{"id":2845,"date":"2026-04-29T06:43:49","date_gmt":"2026-04-29T06:43:49","guid":{"rendered":"https:\/\/2026s1h.winproject.com.au\/?page_id=2845"},"modified":"2026-04-29T23:10:26","modified_gmt":"2026-04-29T23:10:26","slug":"manage-users","status":"publish","type":"page","link":"https:\/\/2026s1h.winproject.com.au\/dzo\/manage-users\/","title":{"rendered":"Manage Users"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2845\" class=\"elementor elementor-2845\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73fcc28 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"73fcc28\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bebed0a elementor-widget elementor-widget-html\" data-id=\"bebed0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');\r\n\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\n\r\n.mu-wrap{\r\n  font-family:'DM Sans',Arial,sans-serif;\r\n  background:#f5f1ec;\r\n  min-height:100vh;\r\n  padding:28px 20px;\r\n}\r\n\r\n\/* PAGE HEADER *\/\r\n.mu-page-head{margin-bottom:24px;}\r\n.mu-page-head h1{font-size:28px;font-weight:700;color:#1a1208;margin-bottom:4px;}\r\n.mu-page-head p{font-size:13px;color:#888;margin:0;}\r\n\r\n\/* STATS ROW *\/\r\n.mu-stats{\r\n  display:grid;\r\n  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));\r\n  gap:12px;margin-bottom:22px;\r\n}\r\n.mu-stat{\r\n  background:#fff;border-radius:14px;padding:16px;\r\n  border:1px solid #ede8e1;\r\n}\r\n.mu-stat-label{font-size:10px;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:6px;}\r\n.mu-stat-val{font-size:26px;font-weight:700;color:#1a1208;}\r\n.mu-stat-sub{font-size:10px;margin-top:4px;font-weight:600;}\r\n\r\n\/* TOOLBAR *\/\r\n.mu-toolbar{\r\n  display:flex;align-items:center;\r\n  gap:10px;flex-wrap:wrap;margin-bottom:16px;\r\n}\r\n.mu-search-wrap{\r\n  flex:1;min-width:200px;position:relative;\r\n}\r\n.mu-search-icon{\r\n  position:absolute;left:12px;top:50%;\r\n  transform:translateY(-50%);font-size:14px;color:#aaa;\r\n}\r\n.mu-search{\r\n  width:100%;padding:10px 12px 10px 36px;\r\n  border:1px solid #ede8e1;border-radius:10px;\r\n  font-size:13px;font-family:inherit;outline:none;\r\n  background:#fff;color:#1a1208;\r\n  transition:border-color .15s;\r\n}\r\n.mu-search:focus{border-color:#D85A30;}\r\n.mu-filter-select{\r\n  padding:10px 14px;border:1px solid #ede8e1;border-radius:10px;\r\n  font-size:12px;font-family:inherit;outline:none;\r\n  background:#fff;color:#444;cursor:pointer;\r\n}\r\n.mu-filter-select:focus{border-color:#D85A30;}\r\n.mu-add-btn{\r\n  padding:10px 20px;background:#D85A30;color:#fff;\r\n  border:none;border-radius:10px;font-size:13px;font-weight:600;\r\n  cursor:pointer;font-family:inherit;white-space:nowrap;\r\n  display:flex;align-items:center;gap:6px;\r\n  transition:background .15s;\r\n}\r\n.mu-add-btn:hover{background:#993C1D;}\r\n\r\n\/* MAIN CARD *\/\r\n.mu-card{\r\n  background:#fff;border-radius:18px;\r\n  border:1px solid #ede8e1;overflow:hidden;\r\n}\r\n.mu-card-head{\r\n  display:flex;align-items:center;justify-content:space-between;\r\n  padding:18px 22px;border-bottom:1px solid #f5f1ec;\r\n  flex-wrap:wrap;gap:10px;\r\n}\r\n.mu-card-head h3{font-size:15px;font-weight:700;color:#1a1208;}\r\n.mu-card-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}\r\n.mu-results-count{font-size:12px;color:#aaa;font-weight:500;}\r\n.mu-export-btn{\r\n  padding:7px 14px;border:1px solid #ede8e1;border-radius:8px;\r\n  background:#fff;font-size:11px;font-weight:600;\r\n  cursor:pointer;font-family:inherit;color:#555;\r\n  transition:all .15s;\r\n}\r\n.mu-export-btn:hover{background:#f5f1ec;border-color:#D85A30;color:#D85A30;}\r\n\r\n\/* TABLE *\/\r\n.mu-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}\r\n.mu-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}\r\n.mu-tbl thead tr{background:#faf8f5;border-bottom:1px solid #ede8e1;}\r\n.mu-tbl th{\r\n  padding:12px 18px;font-size:10px;font-weight:700;\r\n  color:#aaa;text-align:left;text-transform:uppercase;\r\n  letter-spacing:0.8px;white-space:nowrap;\r\n}\r\n.mu-tbl td{\r\n  padding:14px 18px;border-bottom:1px solid #faf8f5;\r\n  vertical-align:middle;color:#2a2015;\r\n}\r\n.mu-tbl tbody tr:last-child td{border-bottom:none;}\r\n.mu-tbl tbody tr{transition:background .1s;}\r\n.mu-tbl tbody tr:hover td{background:#fdf9f5;}\r\n\r\n\/* USER NAME CELL *\/\r\n.mu-user-cell{display:flex;align-items:center;gap:12px;}\r\n.mu-av{\r\n  width:36px;height:36px;border-radius:50%;\r\n  display:inline-flex;align-items:center;justify-content:center;\r\n  font-size:12px;font-weight:700;flex-shrink:0;\r\n}\r\n.mu-user-name{font-weight:600;color:#1a1208;font-size:13px;}\r\n.mu-user-email-small{font-size:11px;color:#aaa;margin-top:1px;}\r\n\r\n\/* ROLE BADGES *\/\r\n.mu-role{\r\n  display:inline-block;padding:4px 12px;border-radius:20px;\r\n  font-size:11px;font-weight:600;white-space:nowrap;\r\n}\r\n.mu-role-admin  {background:#F5C4B3;color:#712B13;}\r\n.mu-role-teacher{background:#FAEEDA;color:#854F0B;}\r\n.mu-role-student{background:#E6F1FB;color:#185FA5;}\r\n.mu-role-parent {background:#EAF3DE;color:#3B6D11;}\r\n\r\n\/* STATUS BADGES *\/\r\n.mu-status{\r\n  display:inline-flex;align-items:center;gap:5px;\r\n  padding:4px 12px;border-radius:20px;\r\n  font-size:11px;font-weight:600;white-space:nowrap;\r\n}\r\n.mu-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}\r\n.mu-status-active  {background:#EAF3DE;color:#3B6D11;}\r\n.mu-status-active .mu-status-dot{background:#3B6D11;}\r\n.mu-status-pending {background:#FAEEDA;color:#854F0B;}\r\n.mu-status-pending .mu-status-dot{background:#854F0B;}\r\n.mu-status-inactive{background:#F1EFE8;color:#888;}\r\n.mu-status-inactive .mu-status-dot{background:#aaa;}\r\n\r\n\/* ACTION BUTTONS *\/\r\n.mu-actions{display:flex;gap:6px;align-items:center;}\r\n.mu-btn-edit{\r\n  padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;\r\n  border:1px solid #ede8e1;background:#fff;color:#555;cursor:pointer;\r\n  font-family:inherit;transition:all .15s;\r\n}\r\n.mu-btn-edit:hover{background:#E6F1FB;border-color:#185FA5;color:#185FA5;}\r\n.mu-btn-del{\r\n  padding:5px 10px;border-radius:8px;font-size:11px;font-weight:600;\r\n  border:1px solid #ede8e1;background:#fff;color:#aaa;cursor:pointer;\r\n  font-family:inherit;transition:all .15s;\r\n}\r\n.mu-btn-del:hover{background:#FCEBEB;border-color:#A32D2D;color:#A32D2D;}\r\n.mu-btn-view{\r\n  padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;\r\n  border:1px solid #ede8e1;background:#fff;color:#555;cursor:pointer;\r\n  font-family:inherit;transition:all .15s;\r\n}\r\n.mu-btn-view:hover{background:#f5f1ec;}\r\n\r\n\/* EMPTY STATE *\/\r\n.mu-empty{\r\n  text-align:center;padding:50px 20px;color:#bbb;\r\n}\r\n.mu-empty-icon{font-size:36px;margin-bottom:12px;}\r\n.mu-empty p{font-size:13px;}\r\n\r\n\/* PAGINATION *\/\r\n.mu-pagination{\r\n  display:flex;align-items:center;justify-content:space-between;\r\n  padding:14px 22px;border-top:1px solid #f5f1ec;\r\n  flex-wrap:wrap;gap:10px;\r\n}\r\n.mu-page-info{font-size:12px;color:#aaa;}\r\n.mu-page-btns{display:flex;gap:6px;}\r\n.mu-page-btn{\r\n  padding:6px 12px;border-radius:8px;border:1px solid #ede8e1;\r\n  background:#fff;font-size:12px;font-weight:600;color:#555;\r\n  cursor:pointer;font-family:inherit;transition:all .15s;\r\n}\r\n.mu-page-btn:hover{background:#FAECE7;border-color:#D85A30;color:#D85A30;}\r\n.mu-page-btn.active{background:#D85A30;border-color:#D85A30;color:#fff;}\r\n.mu-page-btn:disabled{opacity:0.4;cursor:default;}\r\n\r\n\/* MODAL OVERLAY *\/\r\n.mu-modal{\r\n  display:none;position:fixed;inset:0;\r\n  background:rgba(0,0,0,0.45);z-index:99999;\r\n  align-items:center;justify-content:center;padding:16px;\r\n  overflow-y:auto;\r\n}\r\n.mu-modal-box{\r\n  background:#fff;border-radius:18px;width:100%;\r\n  max-width:480px;margin:auto;overflow:hidden;\r\n  font-family:'DM Sans',Arial,sans-serif;\r\n}\r\n.mu-modal-head{\r\n  display:flex;align-items:center;justify-content:space-between;\r\n  padding:18px 22px;border-bottom:1px solid #f5f1ec;\r\n  background:#faf8f5;\r\n}\r\n.mu-modal-head h3{font-size:15px;font-weight:700;color:#1a1208;}\r\n.mu-modal-close{\r\n  background:none;border:none;font-size:20px;\r\n  cursor:pointer;color:#aaa;line-height:1;\r\n  transition:color .15s;\r\n}\r\n.mu-modal-close:hover{color:#D85A30;}\r\n.mu-modal-body{padding:22px;}\r\n.mu-modal-foot{\r\n  display:flex;gap:10px;justify-content:flex-end;\r\n  padding:16px 22px;border-top:1px solid #f5f1ec;\r\n  background:#faf8f5;flex-wrap:wrap;\r\n}\r\n\r\n\/* FORM *\/\r\n.mu-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}\r\n.mu-form-group{display:flex;flex-direction:column;gap:5px;}\r\n.mu-form-group.full{grid-column:1\/-1;}\r\n.mu-form-group label{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:0.5px;}\r\n.mu-form-group input,\r\n.mu-form-group select{\r\n  padding:10px 12px;border:1px solid #ede8e1;border-radius:10px;\r\n  font-size:13px;font-family:inherit;outline:none;color:#1a1208;\r\n  transition:border-color .15s;\r\n}\r\n.mu-form-group input:focus,\r\n.mu-form-group select:focus{border-color:#D85A30;}\r\n\r\n\/* BUTTONS *\/\r\n.mu-btn-cancel{\r\n  padding:10px 20px;background:#fff;color:#555;\r\n  border:1px solid #ede8e1;border-radius:10px;\r\n  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;\r\n  transition:background .15s;\r\n}\r\n.mu-btn-cancel:hover{background:#f5f1ec;}\r\n.mu-btn-primary{\r\n  padding:10px 24px;background:#D85A30;color:#fff;\r\n  border:none;border-radius:10px;font-size:13px;font-weight:600;\r\n  cursor:pointer;font-family:inherit;transition:background .15s;\r\n}\r\n.mu-btn-primary:hover{background:#993C1D;}\r\n.mu-btn-danger{\r\n  padding:10px 24px;background:#A32D2D;color:#fff;\r\n  border:none;border-radius:10px;font-size:13px;font-weight:600;\r\n  cursor:pointer;font-family:inherit;transition:background .15s;\r\n}\r\n.mu-btn-danger:hover{background:#7a2020;}\r\n\r\n\/* VIEW MODAL *\/\r\n.mu-view-av{\r\n  width:72px;height:72px;border-radius:50%;\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-size:26px;font-weight:700;color:#fff;\r\n  margin:0 auto 14px;\r\n}\r\n.mu-view-detail-row{\r\n  display:flex;justify-content:space-between;\r\n  align-items:center;padding:10px 0;\r\n  border-bottom:1px solid #faf8f5;font-size:13px;\r\n}\r\n.mu-view-detail-row:last-child{border-bottom:none;}\r\n.mu-view-detail-label{color:#aaa;font-weight:500;}\r\n.mu-view-detail-val{color:#1a1208;font-weight:600;text-align:right;}\r\n\r\n\/* TOAST *\/\r\n.mu-toast{\r\n  display:none;position:fixed;bottom:24px;right:24px;\r\n  background:#1a1208;color:#fff;padding:12px 20px;\r\n  border-radius:12px;font-size:13px;font-weight:600;\r\n  z-index:999999;font-family:'DM Sans',Arial,sans-serif;\r\n  box-shadow:0 4px 20px rgba(0,0,0,0.2);\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:600px){\r\n  .mu-wrap{padding:16px 12px;}\r\n  .mu-form-grid{grid-template-columns:1fr;}\r\n  .mu-form-group.full{grid-column:1;}\r\n  .mu-stats{grid-template-columns:1fr 1fr;}\r\n  .mu-toolbar{flex-direction:column;align-items:stretch;}\r\n  .mu-add-btn{justify-content:center;}\r\n}\r\n<\/style>\r\n\r\n<div class=\"mu-wrap\">\r\n\r\n  <!-- PAGE HEADER -->\r\n  <div class=\"mu-page-head\">\r\n    <h1>Manage users<\/h1>\r\n    <p>View, add and manage all registered users on the platform<\/p>\r\n  <\/div>\r\n\r\n  <!-- STATS -->\r\n  <div class=\"mu-stats\" id=\"mu-stats\"><\/div>\r\n\r\n  <!-- TOOLBAR -->\r\n  <div class=\"mu-toolbar\">\r\n    <div class=\"mu-search-wrap\">\r\n      <span class=\"mu-search-icon\">&#128269;<\/span>\r\n      <input class=\"mu-search\" id=\"mu-search\" type=\"text\" placeholder=\"Search by name, email or role...\" oninput=\"muRender()\">\r\n    <\/div>\r\n    <select class=\"mu-filter-select\" id=\"mu-role-filter\" onchange=\"muRender()\">\r\n      <option value=\"\">All roles<\/option>\r\n      <option value=\"Admin\">Admin<\/option>\r\n      <option value=\"Teacher\">Teacher<\/option>\r\n      <option value=\"Student\">Student<\/option>\r\n      <option value=\"Parent\">Parent<\/option>\r\n    <\/select>\r\n    <select class=\"mu-filter-select\" id=\"mu-status-filter\" onchange=\"muRender()\">\r\n      <option value=\"\">All statuses<\/option>\r\n      <option value=\"Active\">Active<\/option>\r\n      <option value=\"Pending\">Pending<\/option>\r\n      <option value=\"Inactive\">Inactive<\/option>\r\n    <\/select>\r\n    <button class=\"mu-add-btn\" onclick=\"muOpenAdd()\">&#43; Add user<\/button>\r\n  <\/div>\r\n\r\n  <!-- TABLE CARD -->\r\n  <div class=\"mu-card\">\r\n    <div class=\"mu-card-head\">\r\n      <h3>All users<\/h3>\r\n      <div class=\"mu-card-head-right\">\r\n        <span class=\"mu-results-count\" id=\"mu-results-count\"><\/span>\r\n        <button class=\"mu-export-btn\" onclick=\"muExport()\">&#8595; Export CSV<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"mu-tbl-wrap\">\r\n      <table class=\"mu-tbl\">\r\n        <thead>\r\n          <tr>\r\n            <th>User<\/th>\r\n            <th>Role<\/th>\r\n            <th>Joined<\/th>\r\n            <th>Status<\/th>\r\n            <th>Action<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody id=\"mu-tbody\"><\/tbody>\r\n      <\/table>\r\n      <div id=\"mu-empty\" class=\"mu-empty\" style=\"display:none;\">\r\n        <div class=\"mu-empty-icon\">&#128100;<\/div>\r\n        <p>No users found matching your search.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"mu-pagination\">\r\n      <div class=\"mu-page-info\" id=\"mu-page-info\"><\/div>\r\n      <div class=\"mu-page-btns\" id=\"mu-page-btns\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ADD \/ EDIT MODAL -->\r\n<div id=\"mu-add-modal\" class=\"mu-modal\">\r\n  <div class=\"mu-modal-box\">\r\n    <div class=\"mu-modal-head\">\r\n      <h3 id=\"mu-modal-title\">Add new user<\/h3>\r\n      <button class=\"mu-modal-close\" onclick=\"muCloseAdd()\">&#10005;<\/button>\r\n    <\/div>\r\n    <div class=\"mu-modal-body\">\r\n      <div class=\"mu-form-grid\">\r\n        <div class=\"mu-form-group\">\r\n          <label>First name<\/label>\r\n          <input type=\"text\" id=\"mu-f-first\" placeholder=\"First name\">\r\n        <\/div>\r\n        <div class=\"mu-form-group\">\r\n          <label>Last name<\/label>\r\n          <input type=\"text\" id=\"mu-f-last\" placeholder=\"Last name\">\r\n        <\/div>\r\n        <div class=\"mu-form-group full\">\r\n          <label>Email address<\/label>\r\n          <input type=\"email\" id=\"mu-f-email\" placeholder=\"email@example.com\">\r\n        <\/div>\r\n        <div class=\"mu-form-group\">\r\n          <label>Role<\/label>\r\n          <select id=\"mu-f-role\">\r\n            <option>Student<\/option>\r\n            <option>Parent<\/option>\r\n            <option>Teacher<\/option>\r\n            <option>Admin<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div class=\"mu-form-group\">\r\n          <label>Status<\/label>\r\n          <select id=\"mu-f-status\">\r\n            <option>Active<\/option>\r\n            <option>Pending<\/option>\r\n            <option>Inactive<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div class=\"mu-form-group full\">\r\n          <label>Phone (optional)<\/label>\r\n          <input type=\"tel\" id=\"mu-f-phone\" placeholder=\"+61 400 000 000\">\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"mu-modal-foot\">\r\n      <button class=\"mu-btn-cancel\" onclick=\"muCloseAdd()\">Cancel<\/button>\r\n      <button class=\"mu-btn-primary\" onclick=\"muSaveUser()\">Save user<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- VIEW USER MODAL -->\r\n<div id=\"mu-view-modal\" class=\"mu-modal\">\r\n  <div class=\"mu-modal-box\">\r\n    <div class=\"mu-modal-head\">\r\n      <h3>User details<\/h3>\r\n      <button class=\"mu-modal-close\" onclick=\"muCloseView()\">&#10005;<\/button>\r\n    <\/div>\r\n    <div class=\"mu-modal-body\">\r\n      <div id=\"mu-view-av\" class=\"mu-view-av\"><\/div>\r\n      <div id=\"mu-view-details\"><\/div>\r\n    <\/div>\r\n    <div class=\"mu-modal-foot\">\r\n      <button class=\"mu-btn-cancel\" onclick=\"muCloseView()\">Close<\/button>\r\n      <button class=\"mu-btn-primary\" id=\"mu-view-edit-btn\">Edit user<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- DELETE MODAL -->\r\n<div id=\"mu-del-modal\" class=\"mu-modal\">\r\n  <div class=\"mu-modal-box\">\r\n    <div class=\"mu-modal-head\">\r\n      <h3>Delete user<\/h3>\r\n      <button class=\"mu-modal-close\" onclick=\"muCloseDel()\">&#10005;<\/button>\r\n    <\/div>\r\n    <div class=\"mu-modal-body\" style=\"text-align:center;padding:30px 22px;\">\r\n      <div style=\"font-size:40px;margin-bottom:14px;\">&#9888;&#65039;<\/div>\r\n      <h3 style=\"font-size:16px;font-weight:700;color:#1a1208;margin-bottom:8px;\">Are you sure?<\/h3>\r\n      <p id=\"mu-del-msg\" style=\"font-size:13px;color:#888;line-height:1.5;\"><\/p>\r\n    <\/div>\r\n    <div class=\"mu-modal-foot\">\r\n      <button class=\"mu-btn-cancel\" onclick=\"muCloseDel()\">Cancel<\/button>\r\n      <button class=\"mu-btn-danger\" onclick=\"muConfirmDelete()\">Yes, delete<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TOAST -->\r\n<div class=\"mu-toast\" id=\"mu-toast\"><\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\nvar ITEMS_PER_PAGE = 8;\r\nvar currentPage = 1;\r\nvar editingId = null;\r\nvar deletingId = null;\r\nvar nextId = 100;\r\n\r\n\/* ===== DATA ===== *\/\r\nvar users = [\r\n  {id:1,  first:'Admin',    last:'Druk',       email:'admin@druk.bt',      phone:'+61 400 111 111', role:'Admin',   joined:'Jan 2024', status:'Active'},\r\n  {id:2,  first:'Tshering', last:'Lhamo',      email:'tshering@druk.bt',   phone:'+61 400 222 222', role:'Teacher', joined:'Jan 2024', status:'Active'},\r\n  {id:3,  first:'Karma',    last:'Wangchuk',   email:'karma@druk.bt',      phone:'+61 400 333 333', role:'Teacher', joined:'Feb 2024', status:'Active'},\r\n  {id:4,  first:'Pema',     last:'Seldon',     email:'pema@gmail.com',     phone:'+61 400 444 444', role:'Student', joined:'Feb 2024', status:'Active'},\r\n  {id:5,  first:'Karma',    last:'Dorji',      email:'karma@gmail.com',    phone:'+61 400 555 555', role:'Student', joined:'Mar 2024', status:'Active'},\r\n  {id:6,  first:'Norbu',    last:'Wangdi',     email:'norbu@gmail.com',    phone:'+61 400 666 666', role:'Student', joined:'Apr 2024', status:'Pending'},\r\n  {id:7,  first:'Tashi',    last:'Wangmo',     email:'tashi@gmail.com',    phone:'+61 400 777 777', role:'Student', joined:'Apr 2024', status:'Active'},\r\n  {id:8,  first:'Dorji',    last:'Seldon',     email:'dorji@gmail.com',    phone:'+61 400 888 888', role:'Parent',  joined:'Feb 2024', status:'Active'},\r\n  {id:9,  first:'Cheki',    last:'Dorji',      email:'cheki@gmail.com',    phone:'+61 400 999 999', role:'Parent',  joined:'Mar 2024', status:'Active'},\r\n  {id:10, first:'Kinley',   last:'Dema',       email:'kinley@gmail.com',   phone:'+61 400 101 010', role:'Parent',  joined:'Apr 2024', status:'Active'},\r\n  {id:11, first:'Sonam',    last:'Choden',     email:'sonam@gmail.com',    phone:'+61 400 121 212', role:'Student', joined:'May 2024', status:'Pending'},\r\n  {id:12, first:'Rinchen',  last:'Dorji',      email:'rinchen@gmail.com',  phone:'+61 400 131 313', role:'Parent',  joined:'May 2024', status:'Inactive'}\r\n];\r\n\r\n\/* ===== AVATAR COLOURS ===== *\/\r\nvar avColors = {\r\n  Admin:   {bg:'#F5C4B3',color:'#712B13'},\r\n  Teacher: {bg:'#FAEEDA',color:'#854F0B'},\r\n  Student: {bg:'#E6F1FB',color:'#185FA5'},\r\n  Parent:  {bg:'#EAF3DE',color:'#3B6D11'}\r\n};\r\n\r\nfunction getInitials(first,last){\r\n  return ((first||'')[0]||('')+((last||'')[0]||'')).toUpperCase();\r\n}\r\nfunction getAv(user){\r\n  var c=avColors[user.role]||{bg:'#eee',color:'#555'};\r\n  return c;\r\n}\r\n\r\n\/* ===== STATS ===== *\/\r\nfunction renderStats(){\r\n  var total=users.length;\r\n  var students=users.filter(function(u){return u.role==='Student';}).length;\r\n  var teachers=users.filter(function(u){return u.role==='Teacher';}).length;\r\n  var parents=users.filter(function(u){return u.role==='Parent';}).length;\r\n  var pending=users.filter(function(u){return u.status==='Pending';}).length;\r\n\r\n  document.getElementById('mu-stats').innerHTML=\r\n    '<div class=\"mu-stat\"><div class=\"mu-stat-label\">Total users<\/div><div class=\"mu-stat-val\">'+total+'<\/div><div class=\"mu-stat-sub\" style=\"color:#D85A30\">All roles<\/div><\/div>'+\r\n    '<div class=\"mu-stat\"><div class=\"mu-stat-label\">Students<\/div><div class=\"mu-stat-val\">'+students+'<\/div><div class=\"mu-stat-sub\" style=\"color:#185FA5\">Learners<\/div><\/div>'+\r\n    '<div class=\"mu-stat\"><div class=\"mu-stat-label\">Teachers<\/div><div class=\"mu-stat-val\">'+teachers+'<\/div><div class=\"mu-stat-sub\" style=\"color:#854F0B\">Instructors<\/div><\/div>'+\r\n    '<div class=\"mu-stat\"><div class=\"mu-stat-label\">Parents<\/div><div class=\"mu-stat-val\">'+parents+'<\/div><div class=\"mu-stat-sub\" style=\"color:#3B6D11\">Registered<\/div><\/div>'+\r\n    '<div class=\"mu-stat\"><div class=\"mu-stat-label\">Pending<\/div><div class=\"mu-stat-val\">'+pending+'<\/div><div class=\"mu-stat-sub\" style=\"color:#A32D2D\">Need review<\/div><\/div>';\r\n}\r\n\r\n\/* ===== FILTER ===== *\/\r\nfunction getFiltered(){\r\n  var search=document.getElementById('mu-search').value.toLowerCase();\r\n  var role=document.getElementById('mu-role-filter').value;\r\n  var status=document.getElementById('mu-status-filter').value;\r\n  return users.filter(function(u){\r\n    var name=(u.first+' '+u.last).toLowerCase();\r\n    var matchSearch=!search||name.includes(search)||u.email.toLowerCase().includes(search)||u.role.toLowerCase().includes(search);\r\n    var matchRole=!role||u.role===role;\r\n    var matchStatus=!status||u.status===status;\r\n    return matchSearch&&matchRole&&matchStatus;\r\n  });\r\n}\r\n\r\n\/* ===== RENDER TABLE ===== *\/\r\nwindow.muRender = function(){\r\n  currentPage=1;\r\n  renderTable();\r\n};\r\n\r\nfunction renderTable(){\r\n  var filtered=getFiltered();\r\n  var total=filtered.length;\r\n  var totalPages=Math.max(1,Math.ceil(total\/ITEMS_PER_PAGE));\r\n  if(currentPage>totalPages) currentPage=totalPages;\r\n  var start=(currentPage-1)*ITEMS_PER_PAGE;\r\n  var pageItems=filtered.slice(start,start+ITEMS_PER_PAGE);\r\n\r\n  document.getElementById('mu-results-count').innerText=total+' user'+(total!==1?'s':'')+' found';\r\n  document.getElementById('mu-empty').style.display=total===0?'block':'none';\r\n\r\n  var tbody=document.getElementById('mu-tbody');\r\n  tbody.innerHTML='';\r\n\r\n  pageItems.forEach(function(u){\r\n    var av=getAv(u);\r\n    var initials=getInitials(u.first,u.last);\r\n    var roleClass='mu-role-'+u.role.toLowerCase();\r\n    var statusClass='mu-status-'+u.status.toLowerCase();\r\n\r\n    var tr=document.createElement('tr');\r\n\r\n    \/* USER CELL *\/\r\n    var td1=document.createElement('td');\r\n    td1.innerHTML='<div class=\"mu-user-cell\">'+\r\n      '<div class=\"mu-av\" style=\"background:'+av.bg+';color:'+av.color+'\">'+initials+'<\/div>'+\r\n      '<div><div class=\"mu-user-name\">'+u.first+' '+u.last+'<\/div>'+\r\n      '<div class=\"mu-user-email-small\">'+u.email+'<\/div><\/div><\/div>';\r\n\r\n    \/* ROLE *\/\r\n    var td2=document.createElement('td');\r\n    td2.innerHTML='<span class=\"mu-role '+roleClass+'\">'+u.role+'<\/span>';\r\n\r\n    \/* JOINED *\/\r\n    var td3=document.createElement('td');\r\n    td3.style.color='#888'; td3.style.fontSize='12px';\r\n    td3.innerText=u.joined;\r\n\r\n    \/* STATUS *\/\r\n    var td4=document.createElement('td');\r\n    td4.innerHTML='<span class=\"mu-status '+statusClass+'\"><span class=\"mu-status-dot\"><\/span>'+u.status+'<\/span>';\r\n\r\n    \/* ACTIONS *\/\r\n    var td5=document.createElement('td');\r\n    td5.innerHTML='<div class=\"mu-actions\"><\/div>';\r\n    var actions=td5.querySelector('.mu-actions');\r\n\r\n    var viewBtn=document.createElement('button');\r\n    viewBtn.className='mu-btn-view'; viewBtn.innerText='View';\r\n    viewBtn.addEventListener('click',(function(id){return function(){muView(id);};})(u.id));\r\n\r\n    var editBtn=document.createElement('button');\r\n    editBtn.className='mu-btn-edit'; editBtn.innerText='Edit';\r\n    editBtn.addEventListener('click',(function(id){return function(){muEdit(id);};})(u.id));\r\n\r\n    var delBtn=document.createElement('button');\r\n    delBtn.className='mu-btn-del'; delBtn.innerText='&#128465;';\r\n    delBtn.title='Delete user';\r\n    delBtn.addEventListener('click',(function(id){return function(){muDelete(id);};})(u.id));\r\n\r\n    actions.appendChild(viewBtn);\r\n    actions.appendChild(editBtn);\r\n    actions.appendChild(delBtn);\r\n\r\n    tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);\r\n    tr.appendChild(td4);tr.appendChild(td5);\r\n    tbody.appendChild(tr);\r\n  });\r\n\r\n  renderPagination(total,totalPages);\r\n  renderStats();\r\n}\r\n\r\n\/* ===== PAGINATION ===== *\/\r\nfunction renderPagination(total,totalPages){\r\n  var start=(currentPage-1)*ITEMS_PER_PAGE+1;\r\n  var end=Math.min(currentPage*ITEMS_PER_PAGE,total);\r\n  document.getElementById('mu-page-info').innerText=total===0?'No results':'Showing '+start+'\u2013'+end+' of '+total;\r\n\r\n  var btns=document.getElementById('mu-page-btns');\r\n  btns.innerHTML='';\r\n\r\n  var prevBtn=document.createElement('button');\r\n  prevBtn.className='mu-page-btn'; prevBtn.innerText='&#8592; Prev';\r\n  prevBtn.disabled=currentPage===1;\r\n  prevBtn.addEventListener('click',function(){ if(currentPage>1){currentPage--;renderTable();} });\r\n  btns.appendChild(prevBtn);\r\n\r\n  for(var i=1;i<=totalPages;i++){\r\n    (function(page){\r\n      var btn=document.createElement('button');\r\n      btn.className='mu-page-btn'+(page===currentPage?' active':'');\r\n      btn.innerText=page;\r\n      btn.addEventListener('click',function(){ currentPage=page; renderTable(); });\r\n      btns.appendChild(btn);\r\n    })(i);\r\n  }\r\n\r\n  var nextBtn=document.createElement('button');\r\n  nextBtn.className='mu-page-btn'; nextBtn.innerText='Next &#8594;';\r\n  nextBtn.disabled=currentPage===totalPages;\r\n  nextBtn.addEventListener('click',function(){ if(currentPage<totalPages){currentPage++;renderTable();} });\r\n  btns.appendChild(nextBtn);\r\n}\r\n\r\n\/* ===== VIEW USER ===== *\/\r\nfunction muView(id){\r\n  var u=users.find(function(x){return x.id===id;});\r\n  if(!u)return;\r\n  var av=getAv(u);\r\n  var initials=getInitials(u.first,u.last);\r\n  var roleClass='mu-role-'+u.role.toLowerCase();\r\n  var statusClass='mu-status-'+u.status.toLowerCase();\r\n\r\n  document.getElementById('mu-view-av').style.background=av.bg;\r\n  document.getElementById('mu-view-av').style.color=av.color;\r\n  document.getElementById('mu-view-av').innerText=initials;\r\n\r\n  document.getElementById('mu-view-details').innerHTML=\r\n    '<div style=\"text-align:center;margin-bottom:18px;\">'+\r\n      '<div style=\"font-size:16px;font-weight:700;color:#1a1208;margin-bottom:4px;\">'+u.first+' '+u.last+'<\/div>'+\r\n      '<span class=\"mu-role '+roleClass+'\">'+u.role+'<\/span>'+\r\n    '<\/div>'+\r\n    '<div class=\"mu-view-detail-row\"><span class=\"mu-view-detail-label\">Email<\/span><span class=\"mu-view-detail-val\">'+u.email+'<\/span><\/div>'+\r\n    '<div class=\"mu-view-detail-row\"><span class=\"mu-view-detail-label\">Phone<\/span><span class=\"mu-view-detail-val\">'+(u.phone||'Not provided')+'<\/span><\/div>'+\r\n    '<div class=\"mu-view-detail-row\"><span class=\"mu-view-detail-label\">Joined<\/span><span class=\"mu-view-detail-val\">'+u.joined+'<\/span><\/div>'+\r\n    '<div class=\"mu-view-detail-row\"><span class=\"mu-view-detail-label\">Status<\/span><span class=\"mu-status '+statusClass+'\"><span class=\"mu-status-dot\"><\/span>'+u.status+'<\/span><\/div>';\r\n\r\n  document.getElementById('mu-view-edit-btn').onclick=function(){muCloseView();muEdit(id);};\r\n  document.getElementById('mu-view-modal').style.display='flex';\r\n}\r\nwindow.muCloseView=function(){ document.getElementById('mu-view-modal').style.display='none'; };\r\n\r\n\/* ===== ADD USER ===== *\/\r\nwindow.muOpenAdd=function(){\r\n  editingId=null;\r\n  document.getElementById('mu-modal-title').innerText='Add new user';\r\n  document.getElementById('mu-f-first').value='';\r\n  document.getElementById('mu-f-last').value='';\r\n  document.getElementById('mu-f-email').value='';\r\n  document.getElementById('mu-f-role').value='Student';\r\n  document.getElementById('mu-f-status').value='Active';\r\n  document.getElementById('mu-f-phone').value='';\r\n  document.getElementById('mu-add-modal').style.display='flex';\r\n};\r\nwindow.muCloseAdd=function(){ document.getElementById('mu-add-modal').style.display='none'; };\r\n\r\n\/* ===== EDIT USER ===== *\/\r\nfunction muEdit(id){\r\n  var u=users.find(function(x){return x.id===id;});\r\n  if(!u)return;\r\n  editingId=id;\r\n  document.getElementById('mu-modal-title').innerText='Edit user';\r\n  document.getElementById('mu-f-first').value=u.first;\r\n  document.getElementById('mu-f-last').value=u.last;\r\n  document.getElementById('mu-f-email').value=u.email;\r\n  document.getElementById('mu-f-role').value=u.role;\r\n  document.getElementById('mu-f-status').value=u.status;\r\n  document.getElementById('mu-f-phone').value=u.phone||'';\r\n  document.getElementById('mu-add-modal').style.display='flex';\r\n}\r\n\r\n\/* ===== SAVE USER ===== *\/\r\nwindow.muSaveUser=function(){\r\n  var first=document.getElementById('mu-f-first').value.trim();\r\n  var last=document.getElementById('mu-f-last').value.trim();\r\n  var email=document.getElementById('mu-f-email').value.trim();\r\n  var role=document.getElementById('mu-f-role').value;\r\n  var status=document.getElementById('mu-f-status').value;\r\n  var phone=document.getElementById('mu-f-phone').value.trim();\r\n\r\n  if(!first){alert('Please enter first name');return;}\r\n  if(!last){alert('Please enter last name');return;}\r\n  if(!email){alert('Please enter email');return;}\r\n\r\n  if(editingId){\r\n    var u=users.find(function(x){return x.id===editingId;});\r\n    if(u){u.first=first;u.last=last;u.email=email;u.role=role;u.status=status;u.phone=phone;}\r\n    showToast('&#10003; User updated successfully!');\r\n  } else {\r\n    var today=new Date();\r\n    var months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\r\n    users.push({id:nextId++,first:first,last:last,email:email,role:role,status:status,phone:phone,joined:months[today.getMonth()]+' '+today.getFullYear()});\r\n    showToast('&#10003; New user added successfully!');\r\n  }\r\n\r\n  muCloseAdd();\r\n  renderTable();\r\n};\r\n\r\n\/* ===== DELETE USER ===== *\/\r\nfunction muDelete(id){\r\n  var u=users.find(function(x){return x.id===id;});\r\n  if(!u)return;\r\n  deletingId=id;\r\n  document.getElementById('mu-del-msg').innerText='Are you sure you want to delete '+u.first+' '+u.last+'? This action cannot be undone.';\r\n  document.getElementById('mu-del-modal').style.display='flex';\r\n}\r\nwindow.muCloseDel=function(){ document.getElementById('mu-del-modal').style.display='none'; };\r\nwindow.muConfirmDelete=function(){\r\n  users=users.filter(function(u){return u.id!==deletingId;});\r\n  muCloseDel();\r\n  renderTable();\r\n  showToast('&#128465; User deleted successfully!');\r\n};\r\n\r\n\/* ===== EXPORT CSV ===== *\/\r\nwindow.muExport=function(){\r\n  var filtered=getFiltered();\r\n  var rows=[['Name','Email','Phone','Role','Joined','Status']];\r\n  filtered.forEach(function(u){\r\n    rows.push([u.first+' '+u.last,u.email,u.phone||'',u.role,u.joined,u.status]);\r\n  });\r\n  var csv=rows.map(function(r){return r.join(',');}).join('\\n');\r\n  var blob=new Blob([csv],{type:'text\/csv'});\r\n  var url=URL.createObjectURL(blob);\r\n  var a=document.createElement('a');a.href=url;a.download='users.csv';a.click();\r\n  URL.revokeObjectURL(url);\r\n  showToast('&#8595; CSV exported successfully!');\r\n};\r\n\r\n\/* ===== TOAST ===== *\/\r\nfunction showToast(msg){\r\n  var t=document.getElementById('mu-toast');\r\n  t.innerHTML=msg;t.style.display='block';\r\n  setTimeout(function(){t.style.display='none';},3000);\r\n}\r\n\r\n\/* ===== INIT ===== *\/\r\nrenderTable();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Manage users View, add and manage all registered users on the platform &#128269; All rolesAdminTeacherStudentParent All statusesActivePendingInactive &#43; Add user All users &#8595; Export CSV User Role Joined Status Action &#128100; No users found matching your search. Add new user &#10005; First name Last name Email address Role StudentParentTeacherAdmin Status ActivePendingInactive Phone (optional) Cancel Save user User details &#10005; Close Edit user Delete user &#10005; &#9888;&#65039; Are you sure? Cancel Yes, delete<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2845","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/pages\/2845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/comments?post=2845"}],"version-history":[{"count":5,"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/pages\/2845\/revisions"}],"predecessor-version":[{"id":2962,"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/pages\/2845\/revisions\/2962"}],"wp:attachment":[{"href":"https:\/\/2026s1h.winproject.com.au\/dzo\/wp-json\/wp\/v2\/media?parent=2845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}