Team1293<\/title>\r\n \r\n \r\n <link rel=\"icon\" type=\"image\/png\" href=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png?v=10\">\r\n <link rel=\"apple-touch-icon\" href=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png?v=10\">\r\n <link rel=\"manifest\" href=\"manifest.json?v=10\">\r\n\r\n \r\n <meta name=\"theme-color\" content=\"#0d9488\">\r\n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\r\n <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\r\n <meta name=\"apple-mobile-web-app-title\" content=\"Team1293\">\r\n\r\n \r\n <style>\r\n :root { --primary: #0d9488; --primary-dark: #0f766e; --bg-app: #f3f4f6; --white: #ffffff; --danger: #ef4444; --success: #10b981; --warning: #f59e0b; --text-main: #1f2937; --text-light: #6b7280; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --radius: 12px; }\r\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-app); color: var(--text-main); margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }\r\n \r\n \/* Loading *\/\r\n #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-app); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s ease; }\r\n #loading-overlay.hidden { opacity: 0; pointer-events: none; }\r\n .spinner { width: 50px; height: 50px; border: 5px solid rgba(13, 148, 136, 0.2); border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }\r\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } \r\n \r\n \/* Layout *\/\r\n #app-container { flex: 1; overflow-y: auto; position: relative; display: flex; flex-direction: column; }\r\n header { background: var(--white); padding: 1rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 50; }\r\n .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--primary); }\r\n .brand img { height: 40px; width: auto; }\r\n .nav-btn { background: none; border: none; color: var(--text-light); font-size: 0.9rem; cursor: pointer; }\r\n main { padding: 1.5rem; max-width: 600px; width: 100%; margin: 0 auto; flex: 1; }\r\n\r\n \/* Components *\/\r\n .card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; animation: fadeIn 0.3s ease-out; }\r\n .btn { display: block; width: 100%; padding: 0.875rem; border: none; border-radius: var(--radius); font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform 0.1s, opacity 0.2s; text-align: center; }\r\n .btn:active { transform: scale(0.98); }\r\n .btn-primary { background-color: var(--primary); color: var(--white); }\r\n .btn-secondary { background-color: var(--white); color: var(--primary); border: 1px solid var(--primary); margin-top: 0.5rem; }\r\n .btn-danger { background-color: var(--danger); color: white; }\r\n .btn-warning { background-color: var(--warning); color: white; margin-top: 0.5rem; }\r\n .form-group { margin-bottom: 1rem; }\r\n label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-main); font-weight: 500; }\r\n input, select, textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; background: #fff; }\r\n textarea { resize: vertical; min-height: 80px; }\r\n input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); }\r\n input[readonly] { background-color: #f3f4f6; color: #666; cursor: not-allowed; }\r\n\r\n \/* Fix Dropdown *\/\r\n select {\r\n appearance: none; -webkit-appearance: none; -moz-appearance: none;\r\n background-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\");\r\n background-repeat: no-repeat; background-position: right 1.5rem center; background-size: 0.7em auto;\r\n padding-right: 3.5rem !important; width: 100%; height: 50px; line-height: 1.2;\r\n }\r\n\r\n \/* Helpers *\/\r\n .hidden { display: none !important; } \/* PENTING: !important untuk pecah CSS conflict *\/\r\n .text-small { font-size: 0.8rem; color: var(--text-light); margin-top: 2px; }\r\n .install-icon { font-size: 3rem; margin-bottom: 1rem; color: var(--primary); }\r\n\r\n \/* Views *\/\r\n .view { display: none; }\r\n .view.active { display: block; }\r\n\r\n \/* Hierarchy *\/\r\n .hierarchy-tree { display: flex; flex-direction: column; gap: 1rem; }\r\n .tree-node { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; background: #fff; position: relative; }\r\n .tree-node.level-dsd { border-left: 4px solid var(--primary); }\r\n .tree-node.level-sd { border-left: 4px solid #f59e0b; margin-left: 1rem; }\r\n .tree-node.level-sa { border-left: 4px solid #6366f1; margin-left: 2rem; }\r\n .node-header { display: flex; justify-content: space-between; align-items: center; }\r\n .role-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; background: #e5e7eb; color: var(--text-light); font-weight: 700; text-transform: uppercase; }\r\n .role-badge.dsd { background: #ccfbf1; color: var(--primary-dark); }\r\n .role-badge.sd { background: #fef3c7; color: #b45309; }\r\n .role-badge.sa { background: #e0e7ff; color: #4338ca; }\r\n .role-badge.pending { background: #fee2e2; color: #991b1b; }\r\n .node-stats { font-size: 0.85rem; color: var(--text-light); margin-top: 0.5rem; }\r\n\r\n \/* Modals *\/\r\n #auth-modal, #admin-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; padding: 1rem; }\r\n .modal-content { background: white; padding: 1.5rem; border-radius: var(--radius); margin: 2rem auto; max-width: 400px; text-align: center; }\r\n\r\n \/* Toast *\/\r\n #toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; width: 90%; max-width: 400px; }\r\n .toast { background: #333; color: #fff; padding: 12px 20px; border-radius: 50px; margin-top: 10px; text-align: center; font-size: 0.9rem; opacity: 0; transition: opacity 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }\r\n .toast.show { opacity: 1; }\r\n\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n .admin-controls { display: flex; gap: 0.5rem; margin-top: 0.5rem; }\r\n .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; width: auto; }\r\n @media (min-width: 600px) { main { padding-top: 3rem; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"loading-overlay\">\r\n <div class=\"spinner\"><\/div>\r\n <p style=\"margin-top: 15px; color: #666; font-size: 0.9rem;\">Loading Team1293...<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"auth-modal\">\r\n <div class=\"modal-content\">\r\n <h3>Admin Verification<\/h3>\r\n <p style=\"font-size:0.9rem; color:#666;\">Please enter password to edit.<\/p>\r\n <div class=\"form-group\" style=\"text-align: left;\">\r\n <label>Password<\/label>\r\n <input type=\"password\" id=\"auth-password\" placeholder=\"Enter password (team1293)\">\r\n <\/div>\r\n <button id=\"btn-auth-confirm\" class=\"btn btn-primary\">Confirm<\/button>\r\n <button id=\"btn-auth-cancel\" class=\"btn btn-secondary\" style=\"margin-top:0.5rem;\">Cancel<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"admin-modal\">\r\n <div class=\"modal-content\" style=\"text-align: left;\">\r\n <h3>Edit Member & Ranking<\/h3>\r\n <form id=\"admin-edit-form\">\r\n <input type=\"hidden\" id=\"edit-id\">\r\n <div class=\"form-group\"><label>Name<\/label><input type=\"text\" id=\"edit-name\" required><\/div>\r\n <div class=\"form-group\"><label>Position<\/label><select id=\"edit-role\"><option value=\"DSD\">DSD<\/option><option value=\"SD\">SD<\/option><option value=\"SA\">SA<\/option><\/select><\/div>\r\n <div class=\"form-group\"><label>Parent ID (Manager)<\/label><input type=\"text\" id=\"edit-parentId\" placeholder=\"Enter ID of parent\"><small style=\"color:var(--text-light)\">DSD usually has no parent.<\/small><\/div>\r\n <div class=\"form-group\"><label>Ranking (Order)<\/label><input type=\"number\" id=\"edit-ranking\" value=\"0\"><\/div>\r\n <div style=\"display:flex; gap: 10px; margin-top:1rem;\">\r\n <button type=\"button\" id=\"btn-cancel-edit\" class=\"btn btn-secondary\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\">Save Changes<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <header id=\"app-header\" style=\"display:none;\">\r\n <div class=\"brand\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Logo\">\r\n <span>Team1293<\/span>\r\n <\/div>\r\n <nav>\r\n <button id=\"logout-btn\" class=\"nav-btn\">Logout<\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n <div id=\"app-container\">\r\n <main>\r\n \r\n <section id=\"view-a2hs\" class=\"view active\">\r\n <div class=\"card\" style=\"text-align: center; padding-top: 3rem; padding-bottom: 3rem;\">\r\n \r\n <div style=\"text-align: center; margin-bottom: 1.5rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Team1293 Logo\" style=\"width: 120px; height: auto; display: inline-block;\">\r\n <\/div>\r\n\r\n <div class=\"install-icon\">\ud83d\udcf1<\/div>\r\n <h2 style=\"margin-top: 0;\">Install Team1293 App<\/h2>\r\n <p style=\"color: var(--text-light); line-height: 1.6;\">\r\n For the best experience, add this app to your home screen.\r\n <\/p>\r\n \r\n <div style=\"background: #f0fdfa; padding: 1rem; border-radius: 8px; text-align: left; margin: 1.5rem 0; font-size: 0.9rem;\">\r\n <strong>iPhone\/iPad:<\/strong> Tap <svg style=\"width:16px;height:16px;vertical-align:middle\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z\"\/><\/svg> Share button, then \"Add to Home Screen\".\r\n <br><br>\r\n <strong>Android:<\/strong> Tap the menu (three dots), then \"Add to Home Screen\" or \"Install App\".\r\n <\/div>\r\n\r\n <button id=\"btn-i-have-installed\" class=\"btn btn-primary\">I have added it to Home Screen<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-register\" class=\"view\">\r\n <div class=\"card\">\r\n <div style=\"text-align: center; margin-bottom: 1.5rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Logo\" style=\"width: 120px; height: auto; display: inline-block;\">\r\n <\/div>\r\n <h2 style=\"margin-top:0; text-align: center;\">Join Team1293<\/h2>\r\n <form id=\"register-form\">\r\n <div class=\"form-group\">\r\n <label>Position<\/label>\r\n <select id=\"reg-position\" required>\r\n <option value=\"\">Select Position...<\/option>\r\n <option value=\"SA\">Sales Agent (SA)<\/option>\r\n <option value=\"SD\">Team Leader SD<\/option>\r\n <option value=\"DSD\">Team Head DSD<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Full Name<\/label>\r\n <input type=\"text\" id=\"reg-name\" required placeholder=\"John Doe\">\r\n <p class=\"text-small\" id=\"dsd-hint\" style=\"display:none; color:var(--primary);\">DSD Name is locked to Company Standard.<\/p>\r\n <\/div>\r\n <div class=\"form-group\"><label>Email Address<\/label><input type=\"email\" id=\"reg-email\" required placeholder=\"you@example.com\"><\/div>\r\n <div class=\"form-group\"><label>Password<\/label><input type=\"password\" id=\"reg-password\" required placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\"><\/div>\r\n\r\n \r\n <div id=\"group-sa\" class=\"hidden\">\r\n <div class=\"form-group\">\r\n <label>Who is your Team Leader (SD)?<\/label>\r\n <input type=\"text\" id=\"reg-sd-parent\" placeholder=\"Name of your SD\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"group-sd\" class=\"hidden\">\r\n <div class=\"form-group\">\r\n <label>Who is your Team Head (DSD)?<\/label>\r\n <input type=\"text\" id=\"reg-dsd-parent\" placeholder=\"Name of your DSD\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Who are your subordinates (SA)? (List Names)<\/label>\r\n <textarea id=\"reg-sd-subs\" placeholder=\"Example: Mike, John, Sarah...\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn btn-primary\">Register<\/button>\r\n <\/form>\r\n <div style=\"text-align: center; margin-top: 1rem;\">\r\n <a href=\"#\" id=\"link-to-login\" style=\"color: var(--primary); text-decoration: none; font-size: 0.9rem;\">Already have an account? Login<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-verify\" class=\"view\">\r\n <div class=\"card\" style=\"text-align: center;\">\r\n <div style=\"font-size: 3rem;\">\u2709\ufe0f<\/div>\r\n <h2>Verify Your Email<\/h2>\r\n <p>We've sent a verification link to <strong id=\"verify-email-display\"><\/strong>.<\/p>\r\n <p style=\"font-size: 0.9rem; color: var(--text-light);\">(Click button below to verify in this demo).<\/p>\r\n <button id=\"btn-verify-simulate\" class=\"btn btn-primary\">Verify Email Now<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-login\" class=\"view\">\r\n <div class=\"card\">\r\n <div style=\"text-align: center; margin-bottom: 1.5rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Logo\" style=\"width: 120px; height: auto; display: inline-block;\">\r\n <\/div>\r\n <h2 style=\"margin-top:0; text-align: center;\">Member Login<\/h2>\r\n <form id=\"login-form\">\r\n <div class=\"form-group\"><label>Email<\/label><input type=\"email\" id=\"login-email\" required><\/div>\r\n <div class=\"form-group\"><label>Password<\/label><input type=\"password\" id=\"login-password\" required><\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">Login<\/button>\r\n <\/form>\r\n <div style=\"text-align: center; margin-top: 1rem;\">\r\n <a href=\"#\" id=\"link-to-register\" style=\"color: var(--primary); text-decoration: none; font-size: 0.9rem;\">Create an account<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-products\" class=\"view\">\r\n <div class=\"card\">\r\n <h2>Sales Information<\/h2>\r\n <p>Access the latest product details and pricing.<\/p>\r\n <div style=\"background: #e5e7eb; height: 200px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 1rem 0;\">\r\n <span style=\"color: #666;\">Product Catalog Preview<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/nirvanamalacca.com\/index.php\/salesinfo-pro2\/\" target=\"_blank\" class=\"btn btn-primary\">Visit Full Product Page<\/a>\r\n <hr style=\"margin: 1.5rem 0; border: 0; border-top: 1px solid #e5e7eb;\">\r\n <h3>My Hierarchy Dashboard<\/h3>\r\n <button id=\"btn-to-dashboard\" class=\"btn btn-secondary\">View Team1293 Hierarchy<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-dashboard\" class=\"view\">\r\n <div class=\"card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;\">\r\n <h2 style=\"margin:0;\">Team Hierarchy<\/h2>\r\n <span id=\"user-role-badge\" class=\"role-badge\">Role<\/span>\r\n <\/div>\r\n <p style=\"font-size: 0.9rem; color: var(--text-light);\">Team1293 Structure<\/p>\r\n \r\n <button id=\"btn-request-edit\" class=\"btn btn-warning hidden\">Edit Team Structure<\/button>\r\n <\/div>\r\n <div id=\"hierarchy-container\" class=\"hierarchy-tree\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-admin\" class=\"view\">\r\n <div class=\"card\">\r\n <h2>Admin Control Panel<\/h2>\r\n <p>Manage Team1293 Hierarchy & User Approvals<\/p>\r\n <button id=\"admin-add-btn\" class=\"btn btn-primary\" style=\"margin-bottom: 1rem;\">+ Add New Member<\/button>\r\n <\/div>\r\n <div id=\"admin-list-container\" style=\"display: flex; flex-direction: column; gap: 1rem;\"><\/div>\r\n <\/section>\r\n <\/main>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast-container\"><\/div>\r\n\r\n <script>\r\n \/\/ --- State ---\r\n const AppState = { currentUser: null, users: [], hierarchy: [], currentView: 'view-a2hs' };\r\n\r\n \/\/ --- Mock Backend ---\r\n const MockBackend = {\r\n init: function() {\r\n const storedUsers = localStorage.getItem('team1293_users');\r\n const storedHierarchy = localStorage.getItem('team1293_hierarchy');\r\n if (!storedUsers) {\r\n const seeds = [\r\n { id: 1, name: \"Elaine Lim - \u5289\u66c9\u6167\", email: \"admin@team.com\", password: \"password\", role: \"DSD\", verified: true },\r\n { id: 2, name: \"Sarah Leader\", email: \"sarah@team.com\", password: \"password\", role: \"SD\", verified: true, parentId: 1 },\r\n { id: 3, name: \"Mike Agent\", email: \"mike@team.com\", password: \"password\", role: \"SA\", verified: true, parentId: 2 },\r\n { id: 4, name: \"John Agent\", email: \"john@team.com\", password: \"password\", role: \"SA\", verified: true, parentId: 2 }\r\n ];\r\n localStorage.setItem('team1293_users', JSON.stringify(seeds));\r\n localStorage.setItem('team1293_hierarchy', JSON.stringify(seeds));\r\n }\r\n },\r\n getUsers: () => JSON.parse(localStorage.getItem('team1293_users') || \"[]\"),\r\n getHierarchy: () => JSON.parse(localStorage.getItem('team1293_hierarchy') || \"[]\"),\r\n saveHierarchy: (data) => localStorage.setItem('team1293_hierarchy', JSON.stringify(data)),\r\n saveUsers: (data) => localStorage.setItem('team1293_users', JSON.stringify(data)),\r\n\r\n registerUser: (userData) => {\r\n const users = MockBackend.getUsers();\r\n if (users.find(u => u.email === userData.email)) return { success: false, message: \"Email already exists\" };\r\n const newUser = { id: Date.now(), ...userData, verified: false, status: 'pending', parentId: null };\r\n users.push(newUser); MockBackend.saveUsers(users);\r\n const hierarchy = MockBackend.getHierarchy(); hierarchy.push(newUser); MockBackend.saveHierarchy(hierarchy);\r\n return { success: true, user: newUser };\r\n },\r\n\r\n verifyUser: (email) => {\r\n const users = MockBackend.getUsers();\r\n const index = users.findIndex(u => u.email === email);\r\n if (index !== -1) {\r\n users[index].verified = true; users[index].status = 'active'; MockBackend.saveUsers(users);\r\n const hierarchy = MockBackend.getHierarchy();\r\n const hIndex = hierarchy.findIndex(h => h.email === email);\r\n if(hIndex !== -1) { hierarchy[hIndex].verified = true; MockBackend.saveHierarchy(hierarchy); }\r\n return { success: true, user: users[index] };\r\n }\r\n return { success: false };\r\n },\r\n\r\n login: (email, password) => {\r\n const users = MockBackend.getUsers();\r\n const user = users.find(u => u.email === email && u.password === password);\r\n if (user) {\r\n if (!user.verified) return { success: false, message: \"Please verify your email first.\" };\r\n return { success: true, user };\r\n }\r\n return { success: false, message: \"Invalid credentials.\" };\r\n },\r\n\r\n updateMember: (id, data) => {\r\n let hierarchy = MockBackend.getHierarchy();\r\n let users = MockBackend.getUsers();\r\n const hIndex = hierarchy.findIndex(h => h.id == id);\r\n if (hIndex !== -1) { hierarchy[hIndex] = { ...hierarchy[hIndex], ...data }; MockBackend.saveHierarchy(hierarchy); }\r\n const uIndex = users.findIndex(u => u.id == id);\r\n if (uIndex !== -1) { users[uIndex] = { ...users[uIndex], ...data }; MockBackend.saveUsers(users); }\r\n return { success: true };\r\n }\r\n };\r\n\r\n \/\/ --- UI Controller ---\r\n const UI = {\r\n views: document.querySelectorAll('.view'),\r\n \r\n showView: (viewId) => {\r\n UI.views.forEach(v => v.classList.remove('active'));\r\n document.getElementById(viewId).classList.add('active');\r\n AppState.currentView = viewId;\r\n window.scrollTo(0,0);\r\n },\r\n\r\n toast: (message) => {\r\n const container = document.getElementById('toast-container');\r\n const el = document.createElement('div'); el.className = 'toast show'; el.innerText = message;\r\n container.appendChild(el);\r\n setTimeout(() => { el.classList.remove('show'); setTimeout(() => el.remove(), 300); }, 3000);\r\n },\r\n\r\n persistSession: (user) => {\r\n localStorage.setItem('team1293_session', JSON.stringify(user));\r\n AppState.currentUser = user;\r\n document.getElementById('app-header').style.display = 'flex';\r\n },\r\n\r\n clearSession: () => {\r\n localStorage.removeItem('team1293_session');\r\n AppState.currentUser = null;\r\n document.getElementById('app-header').style.display = 'none';\r\n },\r\n\r\n renderHierarchy: () => {\r\n const container = document.getElementById('hierarchy-container');\r\n container.innerHTML = '';\r\n const user = AppState.currentUser;\r\n const allMembers = MockBackend.getHierarchy();\r\n const role = user.role.toUpperCase();\r\n\r\n document.getElementById('user-role-badge').className = `role-badge ${role.toLowerCase()}`;\r\n document.getElementById('user-role-badge').innerText = role;\r\n\r\n const editBtn = document.getElementById('btn-request-edit');\r\n if (role === 'SD' || role === 'DSD') { editBtn.classList.remove('hidden'); } \r\n else { editBtn.classList.add('hidden'); }\r\n\r\n let visibleMembers = [];\r\n if (role === 'DSD') { visibleMembers = allMembers; } \r\n else if (role === 'SD') { const myDSD = allMembers.find(m => m.id == user.parentId); const mySAs = allMembers.filter(m => m.parentId == user.id); visibleMembers = [myDSD, user, ...mySAs].filter(Boolean); } \r\n else { const mySD = allMembers.find(m => m.id == user.parentId); const myDSD = mySD ? allMembers.find(m => m.id == mySD.parentId) : null; visibleMembers = [myDSD, mySD, user].filter(Boolean); }\r\n\r\n visibleMembers.sort((a, b) => (a.ranking || 0) - (b.ranking || 0));\r\n if(visibleMembers.length === 0) { container.innerHTML = `<p style=\"text-align:center; color:#999;\">No hierarchy data found.<\/p>`; return; }\r\n visibleMembers.forEach(member => {\r\n const node = document.createElement('div');\r\n node.className = `tree-node level-${member.role.toLowerCase()}`;\r\n const pendingBadge = member.status === 'pending' ? '<span class=\"role-badge pending\" style=\"margin-left:5px;\">Pending<\/span>' : '';\r\n node.innerHTML = `<div class=\"node-header\"><span style=\"font-weight:700;\">${member.name}<\/span><span class=\"role-badge ${member.role.toLowerCase()}\">${member.role}<\/span>${pendingBadge}<\/div><div class=\"node-stats\">ID: ${member.id} ${member.parentId ? `| Manager ID: ${member.parentId}` : ''}<\/div>`;\r\n container.appendChild(node);\r\n });\r\n },\r\n\r\n renderAdminList: () => {\r\n const container = document.getElementById('admin-list-container');\r\n container.innerHTML = '';\r\n const members = MockBackend.getHierarchy();\r\n members.sort((a,b) => (a.ranking||0) - (b.ranking||0));\r\n members.forEach(m => {\r\n const row = document.createElement('div');\r\n row.className = 'tree-node'; row.style.padding = '1rem';\r\n const statusText = m.status === 'pending' ? '<span style=\"color:red; font-size:0.8rem;\">(Pending Approval)<\/span>' : '';\r\n row.innerHTML = `<div style=\"display:flex; justify-content:space-between; margin-bottom:0.5rem;\"><strong>${m.name} (${m.role})<\/strong><span style=\"font-size:0.8rem; color:#666;\">Rank: ${m.ranking||0}<\/span><\/div><div style=\"margin-bottom:5px; font-size:0.85rem; color:#666;\">${m.email} ${statusText}<\/div><div class=\"admin-controls\"><button onclick=\"Admin.edit(${m.id})\" class=\"btn btn-sm btn-primary\">Edit<\/button><button onclick=\"Admin.delete(${m.id})\" class=\"btn btn-sm btn-danger\">Delete<\/button><\/div>`;\r\n container.appendChild(row);\r\n });\r\n }\r\n };\r\n\r\n \/\/ --- Admin Functions ---\r\n const Admin = {\r\n edit: (id) => {\r\n const member = MockBackend.getHierarchy().find(m => m.id == id);\r\n if(!member) return;\r\n document.getElementById('edit-id').value = member.id;\r\n document.getElementById('edit-name').value = member.name;\r\n document.getElementById('edit-role').value = member.role;\r\n document.getElementById('edit-parentId').value = member.parentId || \"\";\r\n document.getElementById('edit-ranking').value = member.ranking || 0;\r\n document.getElementById('admin-modal').style.display = 'block';\r\n },\r\n save: (e) => {\r\n e.preventDefault();\r\n const id = document.getElementById('edit-id').value;\r\n const data = { name: document.getElementById('edit-name').value, role: document.getElementById('edit-role').value, parentId: document.getElementById('edit-parentId').value ? parseInt(document.getElementById('edit-parentId').value) : null, ranking: parseInt(document.getElementById('edit-ranking').value) };\r\n MockBackend.updateMember(id, data);\r\n document.getElementById('admin-modal').style.display = 'none';\r\n UI.toast('Member updated successfully');\r\n UI.renderAdminList();\r\n },\r\n delete: (id) => {\r\n if(!confirm(\"Are you sure?\")) return;\r\n let hierarchy = MockBackend.getHierarchy().filter(m => m.id != id);\r\n MockBackend.saveHierarchy(hierarchy);\r\n let users = MockBackend.getUsers().filter(m => m.id != id);\r\n MockBackend.saveUsers(users);\r\n UI.renderAdminList();\r\n UI.toast('Member deleted');\r\n }\r\n };\r\n window.Admin = Admin;\r\n\r\n \/\/ --- App Initialization ---\r\n document.addEventListener('DOMContentLoaded', () => {\r\n MockBackend.init();\r\n\r\n \/\/ --- Registration Dynamic Logic ---\r\n const regPosition = document.getElementById('reg-position');\r\n const regName = document.getElementById('reg-name');\r\n const groupSA = document.getElementById('group-sa');\r\n const groupSD = document.getElementById('group-sd');\r\n const dsdHint = document.getElementById('dsd-hint');\r\n\r\n regPosition.addEventListener('change', (e) => {\r\n const val = e.target.value;\r\n groupSA.classList.add('hidden');\r\n groupSD.classList.add('hidden');\r\n dsdHint.style.display = 'none';\r\n if (val === 'SA') { groupSA.classList.remove('hidden'); regName.readOnly = false; regName.value = \"\"; } \r\n else if (val === 'SD') { groupSD.classList.remove('hidden'); regName.readOnly = false; regName.value = \"\"; } \r\n else if (val === 'DSD') { regName.readOnly = true; regName.value = \"Elaine Lim - \u5289\u66c9\u6167\"; dsdHint.style.display = 'block'; }\r\n });\r\n\r\n \/\/ --- Auth \/ Password Protection ---\r\n const btnRequestEdit = document.getElementById('btn-request-edit');\r\n const authModal = document.getElementById('auth-modal');\r\n const authPassword = document.getElementById('auth-password');\r\n const btnAuthConfirm = document.getElementById('btn-auth-confirm');\r\n const btnAuthCancel = document.getElementById('btn-auth-cancel');\r\n\r\n btnRequestEdit.addEventListener('click', () => {\r\n authPassword.value = '';\r\n authModal.style.display = 'block';\r\n });\r\n btnAuthCancel.addEventListener('click', () => { authModal.style.display = 'none'; });\r\n btnAuthConfirm.addEventListener('click', () => {\r\n if (authPassword.value === 'team1293') {\r\n UI.toast('Access Granted'); authModal.style.display = 'none'; UI.renderAdminList(); UI.showView('view-admin');\r\n } else { UI.toast('Incorrect Password!'); }\r\n });\r\n\r\n \/\/ --- ROUTING LOGIC UPDATE ---\r\n const session = localStorage.getItem('team1293_session');\r\n const isInstalled = localStorage.getItem('team1293_installed');\r\n const isStandalone = window.matchMedia('(display-mode: standalone)').matches;\r\n\r\n if (isStandalone) {\r\n \/\/ --- JIKA BUKA DARI ICON APP (PWA) ---\r\n \/\/ PAKSA tunjuk A2HS Page setiap kali (Supaya boleh Register\/Login semula)\r\n \/\/ Ini akan memastikan flow \"Register dulu\" sentiasa dijaga apabila guna App.\r\n UI.showView('view-a2hs');\r\n document.getElementById('app-header').style.display = 'none';\r\n } else {\r\n \/\/ --- JIKA BUKA DARI BROWSER (Chrome\/Safari) ---\r\n document.getElementById('app-header').style.display = 'none';\r\n\r\n if (session) {\r\n \/\/ Jika login dalam browser, masuk dashboard\r\n AppState.currentUser = JSON.parse(session);\r\n document.getElementById('app-header').style.display = 'flex';\r\n if (AppState.currentUser.role === 'ADMIN' || AppState.currentUser.role === 'DSD') { UI.showView('view-admin'); UI.renderAdminList(); } \r\n else { UI.showView('view-products'); }\r\n } else {\r\n \/\/ Jika tak login, pergi ke A2HS atau Register\r\n if (isInstalled === 'true') { UI.showView('view-register'); } \r\n else { UI.showView('view-a2hs'); }\r\n }\r\n }\r\n\r\n \/\/ --- UNLOCK LOADING SCREEN ---\r\n setTimeout(() => { document.getElementById('loading-overlay').classList.add('hidden'); }, 500);\r\n\r\n \/\/ --- Event Listeners ---\r\n document.getElementById('link-to-login').addEventListener('click', (e) => { e.preventDefault(); UI.showView('view-login'); });\r\n document.getElementById('link-to-register').addEventListener('click', (e) => { e.preventDefault(); UI.showView('view-register'); });\r\n \r\n document.getElementById('btn-i-have-installed').addEventListener('click', () => {\r\n localStorage.setItem('team1293_installed', 'true');\r\n UI.toast(\"Redirecting to Registration...\");\r\n UI.showView('view-register');\r\n });\r\n\r\n document.getElementById('register-form').addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const role = document.getElementById('reg-position').value;\r\n const name = document.getElementById('reg-name').value;\r\n const email = document.getElementById('reg-email').value;\r\n const pass = document.getElementById('reg-password').value;\r\n let extraData = {};\r\n if(role === 'SA') extraData.temp_sd_parent = document.getElementById('reg-sd-parent').value;\r\n if(role === 'SD') { extraData.temp_dsd_parent = document.getElementById('reg-dsd-parent').value; extraData.temp_sa_subs = document.getElementById('reg-sd-subs').value; }\r\n\r\n const result = MockBackend.registerUser({ name, email, password: pass, role, ...extraData });\r\n if (result.success) {\r\n UI.toast(\"Registration Successful! Sent for approval.\");\r\n document.getElementById('verify-email-display').innerText = email;\r\n document.getElementById('verify-email-display').dataset.email = email;\r\n UI.showView('view-verify');\r\n } else { UI.toast(result.message); }\r\n });\r\n\r\n document.getElementById('btn-verify-simulate').addEventListener('click', () => {\r\n const email = document.getElementById('verify-email-display').dataset.email;\r\n const result = MockBackend.verifyUser(email);\r\n if (result.success) { UI.toast(\"Email Verified! Logging in...\"); UI.persistSession(result.user); UI.showView('view-products'); }\r\n });\r\n\r\n document.getElementById('login-form').addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const result = MockBackend.login(document.getElementById('login-email').value, document.getElementById('login-password').value);\r\n if (result.success) {\r\n UI.persistSession(result.user);\r\n UI.toast(\"Login Successful\");\r\n if(result.user.role === 'ADMIN' || result.user.role === 'DSD') { UI.showView('view-admin'); UI.renderAdminList(); } else { UI.showView('view-products'); }\r\n } else { UI.toast(result.message); }\r\n });\r\n\r\n document.getElementById('logout-btn').addEventListener('click', () => { UI.clearSession(); UI.toast(\"Logged Out\"); UI.showView('view-login'); });\r\n document.getElementById('btn-to-dashboard').addEventListener('click', () => { UI.renderHierarchy(); UI.showView('view-dashboard'); });\r\n document.getElementById('admin-add-btn').addEventListener('click', () => { alert(\"In this prototype, please use the 'Register' page to add new members, then edit them here to set hierarchy.\"); });\r\n document.getElementById('btn-cancel-edit').addEventListener('click', () => { document.getElementById('admin-modal').style.display = 'none'; });\r\n document.getElementById('admin-edit-form').addEventListener('submit', Admin.save);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loading Team1293… Admin Verification Please enter password to edit. Password Confirm Cancel Edit Member & Ranking Name PositionDSDSDSA Parent ID (Manager)DSD usually has no parent. Ranking (Order) Cancel Save Changes Team1293 Logout \ud83d\udcf1 Install Team1293 App For the best experience, add this app to your home screen. iPhone\/iPad: Tap Share button, then “Add to Home […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-13735","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages\/13735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/comments?post=13735"}],"version-history":[{"count":110,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages\/13735\/revisions"}],"predecessor-version":[{"id":14105,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages\/13735\/revisions\/14105"}],"wp:attachment":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/media?parent=13735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n Team1293<\/title>\r\n \r\n \r\n <link rel=\"icon\" type=\"image\/png\" href=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png?v=10\">\r\n <link rel=\"apple-touch-icon\" href=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png?v=10\">\r\n <link rel=\"manifest\" href=\"manifest.json?v=10\">\r\n\r\n \r\n <meta name=\"theme-color\" content=\"#0d9488\">\r\n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\r\n <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\r\n <meta name=\"apple-mobile-web-app-title\" content=\"Team1293\">\r\n\r\n \r\n <style>\r\n :root { --primary: #0d9488; --primary-dark: #0f766e; --bg-app: #f3f4f6; --white: #ffffff; --danger: #ef4444; --success: #10b981; --warning: #f59e0b; --text-main: #1f2937; --text-light: #6b7280; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --radius: 12px; }\r\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-app); color: var(--text-main); margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }\r\n \r\n \/* Loading *\/\r\n #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-app); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s ease; }\r\n #loading-overlay.hidden { opacity: 0; pointer-events: none; }\r\n .spinner { width: 50px; height: 50px; border: 5px solid rgba(13, 148, 136, 0.2); border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }\r\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } \r\n \r\n \/* Layout *\/\r\n #app-container { flex: 1; overflow-y: auto; position: relative; display: flex; flex-direction: column; }\r\n header { background: var(--white); padding: 1rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 50; }\r\n .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--primary); }\r\n .brand img { height: 40px; width: auto; }\r\n .nav-btn { background: none; border: none; color: var(--text-light); font-size: 0.9rem; cursor: pointer; }\r\n main { padding: 1.5rem; max-width: 600px; width: 100%; margin: 0 auto; flex: 1; }\r\n\r\n \/* Components *\/\r\n .card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; animation: fadeIn 0.3s ease-out; }\r\n .btn { display: block; width: 100%; padding: 0.875rem; border: none; border-radius: var(--radius); font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform 0.1s, opacity 0.2s; text-align: center; }\r\n .btn:active { transform: scale(0.98); }\r\n .btn-primary { background-color: var(--primary); color: var(--white); }\r\n .btn-secondary { background-color: var(--white); color: var(--primary); border: 1px solid var(--primary); margin-top: 0.5rem; }\r\n .btn-danger { background-color: var(--danger); color: white; }\r\n .btn-warning { background-color: var(--warning); color: white; margin-top: 0.5rem; }\r\n .form-group { margin-bottom: 1rem; }\r\n label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-main); font-weight: 500; }\r\n input, select, textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; background: #fff; }\r\n textarea { resize: vertical; min-height: 80px; }\r\n input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); }\r\n input[readonly] { background-color: #f3f4f6; color: #666; cursor: not-allowed; }\r\n\r\n \/* Fix Dropdown *\/\r\n select {\r\n appearance: none; -webkit-appearance: none; -moz-appearance: none;\r\n background-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\");\r\n background-repeat: no-repeat; background-position: right 1.5rem center; background-size: 0.7em auto;\r\n padding-right: 3.5rem !important; width: 100%; height: 50px; line-height: 1.2;\r\n }\r\n\r\n \/* Helpers *\/\r\n .hidden { display: none !important; } \/* PENTING: !important untuk pecah CSS conflict *\/\r\n .text-small { font-size: 0.8rem; color: var(--text-light); margin-top: 2px; }\r\n .install-icon { font-size: 3rem; margin-bottom: 1rem; color: var(--primary); }\r\n\r\n \/* Views *\/\r\n .view { display: none; }\r\n .view.active { display: block; }\r\n\r\n \/* Hierarchy *\/\r\n .hierarchy-tree { display: flex; flex-direction: column; gap: 1rem; }\r\n .tree-node { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; background: #fff; position: relative; }\r\n .tree-node.level-dsd { border-left: 4px solid var(--primary); }\r\n .tree-node.level-sd { border-left: 4px solid #f59e0b; margin-left: 1rem; }\r\n .tree-node.level-sa { border-left: 4px solid #6366f1; margin-left: 2rem; }\r\n .node-header { display: flex; justify-content: space-between; align-items: center; }\r\n .role-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; background: #e5e7eb; color: var(--text-light); font-weight: 700; text-transform: uppercase; }\r\n .role-badge.dsd { background: #ccfbf1; color: var(--primary-dark); }\r\n .role-badge.sd { background: #fef3c7; color: #b45309; }\r\n .role-badge.sa { background: #e0e7ff; color: #4338ca; }\r\n .role-badge.pending { background: #fee2e2; color: #991b1b; }\r\n .node-stats { font-size: 0.85rem; color: var(--text-light); margin-top: 0.5rem; }\r\n\r\n \/* Modals *\/\r\n #auth-modal, #admin-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; padding: 1rem; }\r\n .modal-content { background: white; padding: 1.5rem; border-radius: var(--radius); margin: 2rem auto; max-width: 400px; text-align: center; }\r\n\r\n \/* Toast *\/\r\n #toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; width: 90%; max-width: 400px; }\r\n .toast { background: #333; color: #fff; padding: 12px 20px; border-radius: 50px; margin-top: 10px; text-align: center; font-size: 0.9rem; opacity: 0; transition: opacity 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }\r\n .toast.show { opacity: 1; }\r\n\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n .admin-controls { display: flex; gap: 0.5rem; margin-top: 0.5rem; }\r\n .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; width: auto; }\r\n @media (min-width: 600px) { main { padding-top: 3rem; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"loading-overlay\">\r\n <div class=\"spinner\"><\/div>\r\n <p style=\"margin-top: 15px; color: #666; font-size: 0.9rem;\">Loading Team1293...<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"auth-modal\">\r\n <div class=\"modal-content\">\r\n <h3>Admin Verification<\/h3>\r\n <p style=\"font-size:0.9rem; color:#666;\">Please enter password to edit.<\/p>\r\n <div class=\"form-group\" style=\"text-align: left;\">\r\n <label>Password<\/label>\r\n <input type=\"password\" id=\"auth-password\" placeholder=\"Enter password (team1293)\">\r\n <\/div>\r\n <button id=\"btn-auth-confirm\" class=\"btn btn-primary\">Confirm<\/button>\r\n <button id=\"btn-auth-cancel\" class=\"btn btn-secondary\" style=\"margin-top:0.5rem;\">Cancel<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"admin-modal\">\r\n <div class=\"modal-content\" style=\"text-align: left;\">\r\n <h3>Edit Member & Ranking<\/h3>\r\n <form id=\"admin-edit-form\">\r\n <input type=\"hidden\" id=\"edit-id\">\r\n <div class=\"form-group\"><label>Name<\/label><input type=\"text\" id=\"edit-name\" required><\/div>\r\n <div class=\"form-group\"><label>Position<\/label><select id=\"edit-role\"><option value=\"DSD\">DSD<\/option><option value=\"SD\">SD<\/option><option value=\"SA\">SA<\/option><\/select><\/div>\r\n <div class=\"form-group\"><label>Parent ID (Manager)<\/label><input type=\"text\" id=\"edit-parentId\" placeholder=\"Enter ID of parent\"><small style=\"color:var(--text-light)\">DSD usually has no parent.<\/small><\/div>\r\n <div class=\"form-group\"><label>Ranking (Order)<\/label><input type=\"number\" id=\"edit-ranking\" value=\"0\"><\/div>\r\n <div style=\"display:flex; gap: 10px; margin-top:1rem;\">\r\n <button type=\"button\" id=\"btn-cancel-edit\" class=\"btn btn-secondary\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\">Save Changes<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <header id=\"app-header\" style=\"display:none;\">\r\n <div class=\"brand\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Logo\">\r\n <span>Team1293<\/span>\r\n <\/div>\r\n <nav>\r\n <button id=\"logout-btn\" class=\"nav-btn\">Logout<\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n <div id=\"app-container\">\r\n <main>\r\n \r\n <section id=\"view-a2hs\" class=\"view active\">\r\n <div class=\"card\" style=\"text-align: center; padding-top: 3rem; padding-bottom: 3rem;\">\r\n \r\n <div style=\"text-align: center; margin-bottom: 1.5rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Team1293 Logo\" style=\"width: 120px; height: auto; display: inline-block;\">\r\n <\/div>\r\n\r\n <div class=\"install-icon\">\ud83d\udcf1<\/div>\r\n <h2 style=\"margin-top: 0;\">Install Team1293 App<\/h2>\r\n <p style=\"color: var(--text-light); line-height: 1.6;\">\r\n For the best experience, add this app to your home screen.\r\n <\/p>\r\n \r\n <div style=\"background: #f0fdfa; padding: 1rem; border-radius: 8px; text-align: left; margin: 1.5rem 0; font-size: 0.9rem;\">\r\n <strong>iPhone\/iPad:<\/strong> Tap <svg style=\"width:16px;height:16px;vertical-align:middle\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z\"\/><\/svg> Share button, then \"Add to Home Screen\".\r\n <br><br>\r\n <strong>Android:<\/strong> Tap the menu (three dots), then \"Add to Home Screen\" or \"Install App\".\r\n <\/div>\r\n\r\n <button id=\"btn-i-have-installed\" class=\"btn btn-primary\">I have added it to Home Screen<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-register\" class=\"view\">\r\n <div class=\"card\">\r\n <div style=\"text-align: center; margin-bottom: 1.5rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Logo\" style=\"width: 120px; height: auto; display: inline-block;\">\r\n <\/div>\r\n <h2 style=\"margin-top:0; text-align: center;\">Join Team1293<\/h2>\r\n <form id=\"register-form\">\r\n <div class=\"form-group\">\r\n <label>Position<\/label>\r\n <select id=\"reg-position\" required>\r\n <option value=\"\">Select Position...<\/option>\r\n <option value=\"SA\">Sales Agent (SA)<\/option>\r\n <option value=\"SD\">Team Leader SD<\/option>\r\n <option value=\"DSD\">Team Head DSD<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Full Name<\/label>\r\n <input type=\"text\" id=\"reg-name\" required placeholder=\"John Doe\">\r\n <p class=\"text-small\" id=\"dsd-hint\" style=\"display:none; color:var(--primary);\">DSD Name is locked to Company Standard.<\/p>\r\n <\/div>\r\n <div class=\"form-group\"><label>Email Address<\/label><input type=\"email\" id=\"reg-email\" required placeholder=\"you@example.com\"><\/div>\r\n <div class=\"form-group\"><label>Password<\/label><input type=\"password\" id=\"reg-password\" required placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\"><\/div>\r\n\r\n \r\n <div id=\"group-sa\" class=\"hidden\">\r\n <div class=\"form-group\">\r\n <label>Who is your Team Leader (SD)?<\/label>\r\n <input type=\"text\" id=\"reg-sd-parent\" placeholder=\"Name of your SD\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"group-sd\" class=\"hidden\">\r\n <div class=\"form-group\">\r\n <label>Who is your Team Head (DSD)?<\/label>\r\n <input type=\"text\" id=\"reg-dsd-parent\" placeholder=\"Name of your DSD\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Who are your subordinates (SA)? (List Names)<\/label>\r\n <textarea id=\"reg-sd-subs\" placeholder=\"Example: Mike, John, Sarah...\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn btn-primary\">Register<\/button>\r\n <\/form>\r\n <div style=\"text-align: center; margin-top: 1rem;\">\r\n <a href=\"#\" id=\"link-to-login\" style=\"color: var(--primary); text-decoration: none; font-size: 0.9rem;\">Already have an account? Login<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-verify\" class=\"view\">\r\n <div class=\"card\" style=\"text-align: center;\">\r\n <div style=\"font-size: 3rem;\">\u2709\ufe0f<\/div>\r\n <h2>Verify Your Email<\/h2>\r\n <p>We've sent a verification link to <strong id=\"verify-email-display\"><\/strong>.<\/p>\r\n <p style=\"font-size: 0.9rem; color: var(--text-light);\">(Click button below to verify in this demo).<\/p>\r\n <button id=\"btn-verify-simulate\" class=\"btn btn-primary\">Verify Email Now<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-login\" class=\"view\">\r\n <div class=\"card\">\r\n <div style=\"text-align: center; margin-bottom: 1.5rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/nirvanamalacca.com\/wp-content\/uploads\/2026\/01\/WhatsApp_Image_2025-12-11_at_4.44.48_PM__1_-removebg-preview.png\" alt=\"Logo\" style=\"width: 120px; height: auto; display: inline-block;\">\r\n <\/div>\r\n <h2 style=\"margin-top:0; text-align: center;\">Member Login<\/h2>\r\n <form id=\"login-form\">\r\n <div class=\"form-group\"><label>Email<\/label><input type=\"email\" id=\"login-email\" required><\/div>\r\n <div class=\"form-group\"><label>Password<\/label><input type=\"password\" id=\"login-password\" required><\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">Login<\/button>\r\n <\/form>\r\n <div style=\"text-align: center; margin-top: 1rem;\">\r\n <a href=\"#\" id=\"link-to-register\" style=\"color: var(--primary); text-decoration: none; font-size: 0.9rem;\">Create an account<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-products\" class=\"view\">\r\n <div class=\"card\">\r\n <h2>Sales Information<\/h2>\r\n <p>Access the latest product details and pricing.<\/p>\r\n <div style=\"background: #e5e7eb; height: 200px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 1rem 0;\">\r\n <span style=\"color: #666;\">Product Catalog Preview<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/nirvanamalacca.com\/index.php\/salesinfo-pro2\/\" target=\"_blank\" class=\"btn btn-primary\">Visit Full Product Page<\/a>\r\n <hr style=\"margin: 1.5rem 0; border: 0; border-top: 1px solid #e5e7eb;\">\r\n <h3>My Hierarchy Dashboard<\/h3>\r\n <button id=\"btn-to-dashboard\" class=\"btn btn-secondary\">View Team1293 Hierarchy<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-dashboard\" class=\"view\">\r\n <div class=\"card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;\">\r\n <h2 style=\"margin:0;\">Team Hierarchy<\/h2>\r\n <span id=\"user-role-badge\" class=\"role-badge\">Role<\/span>\r\n <\/div>\r\n <p style=\"font-size: 0.9rem; color: var(--text-light);\">Team1293 Structure<\/p>\r\n \r\n <button id=\"btn-request-edit\" class=\"btn btn-warning hidden\">Edit Team Structure<\/button>\r\n <\/div>\r\n <div id=\"hierarchy-container\" class=\"hierarchy-tree\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"view-admin\" class=\"view\">\r\n <div class=\"card\">\r\n <h2>Admin Control Panel<\/h2>\r\n <p>Manage Team1293 Hierarchy & User Approvals<\/p>\r\n <button id=\"admin-add-btn\" class=\"btn btn-primary\" style=\"margin-bottom: 1rem;\">+ Add New Member<\/button>\r\n <\/div>\r\n <div id=\"admin-list-container\" style=\"display: flex; flex-direction: column; gap: 1rem;\"><\/div>\r\n <\/section>\r\n <\/main>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast-container\"><\/div>\r\n\r\n <script>\r\n \/\/ --- State ---\r\n const AppState = { currentUser: null, users: [], hierarchy: [], currentView: 'view-a2hs' };\r\n\r\n \/\/ --- Mock Backend ---\r\n const MockBackend = {\r\n init: function() {\r\n const storedUsers = localStorage.getItem('team1293_users');\r\n const storedHierarchy = localStorage.getItem('team1293_hierarchy');\r\n if (!storedUsers) {\r\n const seeds = [\r\n { id: 1, name: \"Elaine Lim - \u5289\u66c9\u6167\", email: \"admin@team.com\", password: \"password\", role: \"DSD\", verified: true },\r\n { id: 2, name: \"Sarah Leader\", email: \"sarah@team.com\", password: \"password\", role: \"SD\", verified: true, parentId: 1 },\r\n { id: 3, name: \"Mike Agent\", email: \"mike@team.com\", password: \"password\", role: \"SA\", verified: true, parentId: 2 },\r\n { id: 4, name: \"John Agent\", email: \"john@team.com\", password: \"password\", role: \"SA\", verified: true, parentId: 2 }\r\n ];\r\n localStorage.setItem('team1293_users', JSON.stringify(seeds));\r\n localStorage.setItem('team1293_hierarchy', JSON.stringify(seeds));\r\n }\r\n },\r\n getUsers: () => JSON.parse(localStorage.getItem('team1293_users') || \"[]\"),\r\n getHierarchy: () => JSON.parse(localStorage.getItem('team1293_hierarchy') || \"[]\"),\r\n saveHierarchy: (data) => localStorage.setItem('team1293_hierarchy', JSON.stringify(data)),\r\n saveUsers: (data) => localStorage.setItem('team1293_users', JSON.stringify(data)),\r\n\r\n registerUser: (userData) => {\r\n const users = MockBackend.getUsers();\r\n if (users.find(u => u.email === userData.email)) return { success: false, message: \"Email already exists\" };\r\n const newUser = { id: Date.now(), ...userData, verified: false, status: 'pending', parentId: null };\r\n users.push(newUser); MockBackend.saveUsers(users);\r\n const hierarchy = MockBackend.getHierarchy(); hierarchy.push(newUser); MockBackend.saveHierarchy(hierarchy);\r\n return { success: true, user: newUser };\r\n },\r\n\r\n verifyUser: (email) => {\r\n const users = MockBackend.getUsers();\r\n const index = users.findIndex(u => u.email === email);\r\n if (index !== -1) {\r\n users[index].verified = true; users[index].status = 'active'; MockBackend.saveUsers(users);\r\n const hierarchy = MockBackend.getHierarchy();\r\n const hIndex = hierarchy.findIndex(h => h.email === email);\r\n if(hIndex !== -1) { hierarchy[hIndex].verified = true; MockBackend.saveHierarchy(hierarchy); }\r\n return { success: true, user: users[index] };\r\n }\r\n return { success: false };\r\n },\r\n\r\n login: (email, password) => {\r\n const users = MockBackend.getUsers();\r\n const user = users.find(u => u.email === email && u.password === password);\r\n if (user) {\r\n if (!user.verified) return { success: false, message: \"Please verify your email first.\" };\r\n return { success: true, user };\r\n }\r\n return { success: false, message: \"Invalid credentials.\" };\r\n },\r\n\r\n updateMember: (id, data) => {\r\n let hierarchy = MockBackend.getHierarchy();\r\n let users = MockBackend.getUsers();\r\n const hIndex = hierarchy.findIndex(h => h.id == id);\r\n if (hIndex !== -1) { hierarchy[hIndex] = { ...hierarchy[hIndex], ...data }; MockBackend.saveHierarchy(hierarchy); }\r\n const uIndex = users.findIndex(u => u.id == id);\r\n if (uIndex !== -1) { users[uIndex] = { ...users[uIndex], ...data }; MockBackend.saveUsers(users); }\r\n return { success: true };\r\n }\r\n };\r\n\r\n \/\/ --- UI Controller ---\r\n const UI = {\r\n views: document.querySelectorAll('.view'),\r\n \r\n showView: (viewId) => {\r\n UI.views.forEach(v => v.classList.remove('active'));\r\n document.getElementById(viewId).classList.add('active');\r\n AppState.currentView = viewId;\r\n window.scrollTo(0,0);\r\n },\r\n\r\n toast: (message) => {\r\n const container = document.getElementById('toast-container');\r\n const el = document.createElement('div'); el.className = 'toast show'; el.innerText = message;\r\n container.appendChild(el);\r\n setTimeout(() => { el.classList.remove('show'); setTimeout(() => el.remove(), 300); }, 3000);\r\n },\r\n\r\n persistSession: (user) => {\r\n localStorage.setItem('team1293_session', JSON.stringify(user));\r\n AppState.currentUser = user;\r\n document.getElementById('app-header').style.display = 'flex';\r\n },\r\n\r\n clearSession: () => {\r\n localStorage.removeItem('team1293_session');\r\n AppState.currentUser = null;\r\n document.getElementById('app-header').style.display = 'none';\r\n },\r\n\r\n renderHierarchy: () => {\r\n const container = document.getElementById('hierarchy-container');\r\n container.innerHTML = '';\r\n const user = AppState.currentUser;\r\n const allMembers = MockBackend.getHierarchy();\r\n const role = user.role.toUpperCase();\r\n\r\n document.getElementById('user-role-badge').className = `role-badge ${role.toLowerCase()}`;\r\n document.getElementById('user-role-badge').innerText = role;\r\n\r\n const editBtn = document.getElementById('btn-request-edit');\r\n if (role === 'SD' || role === 'DSD') { editBtn.classList.remove('hidden'); } \r\n else { editBtn.classList.add('hidden'); }\r\n\r\n let visibleMembers = [];\r\n if (role === 'DSD') { visibleMembers = allMembers; } \r\n else if (role === 'SD') { const myDSD = allMembers.find(m => m.id == user.parentId); const mySAs = allMembers.filter(m => m.parentId == user.id); visibleMembers = [myDSD, user, ...mySAs].filter(Boolean); } \r\n else { const mySD = allMembers.find(m => m.id == user.parentId); const myDSD = mySD ? allMembers.find(m => m.id == mySD.parentId) : null; visibleMembers = [myDSD, mySD, user].filter(Boolean); }\r\n\r\n visibleMembers.sort((a, b) => (a.ranking || 0) - (b.ranking || 0));\r\n if(visibleMembers.length === 0) { container.innerHTML = `<p style=\"text-align:center; color:#999;\">No hierarchy data found.<\/p>`; return; }\r\n visibleMembers.forEach(member => {\r\n const node = document.createElement('div');\r\n node.className = `tree-node level-${member.role.toLowerCase()}`;\r\n const pendingBadge = member.status === 'pending' ? '<span class=\"role-badge pending\" style=\"margin-left:5px;\">Pending<\/span>' : '';\r\n node.innerHTML = `<div class=\"node-header\"><span style=\"font-weight:700;\">${member.name}<\/span><span class=\"role-badge ${member.role.toLowerCase()}\">${member.role}<\/span>${pendingBadge}<\/div><div class=\"node-stats\">ID: ${member.id} ${member.parentId ? `| Manager ID: ${member.parentId}` : ''}<\/div>`;\r\n container.appendChild(node);\r\n });\r\n },\r\n\r\n renderAdminList: () => {\r\n const container = document.getElementById('admin-list-container');\r\n container.innerHTML = '';\r\n const members = MockBackend.getHierarchy();\r\n members.sort((a,b) => (a.ranking||0) - (b.ranking||0));\r\n members.forEach(m => {\r\n const row = document.createElement('div');\r\n row.className = 'tree-node'; row.style.padding = '1rem';\r\n const statusText = m.status === 'pending' ? '<span style=\"color:red; font-size:0.8rem;\">(Pending Approval)<\/span>' : '';\r\n row.innerHTML = `<div style=\"display:flex; justify-content:space-between; margin-bottom:0.5rem;\"><strong>${m.name} (${m.role})<\/strong><span style=\"font-size:0.8rem; color:#666;\">Rank: ${m.ranking||0}<\/span><\/div><div style=\"margin-bottom:5px; font-size:0.85rem; color:#666;\">${m.email} ${statusText}<\/div><div class=\"admin-controls\"><button onclick=\"Admin.edit(${m.id})\" class=\"btn btn-sm btn-primary\">Edit<\/button><button onclick=\"Admin.delete(${m.id})\" class=\"btn btn-sm btn-danger\">Delete<\/button><\/div>`;\r\n container.appendChild(row);\r\n });\r\n }\r\n };\r\n\r\n \/\/ --- Admin Functions ---\r\n const Admin = {\r\n edit: (id) => {\r\n const member = MockBackend.getHierarchy().find(m => m.id == id);\r\n if(!member) return;\r\n document.getElementById('edit-id').value = member.id;\r\n document.getElementById('edit-name').value = member.name;\r\n document.getElementById('edit-role').value = member.role;\r\n document.getElementById('edit-parentId').value = member.parentId || \"\";\r\n document.getElementById('edit-ranking').value = member.ranking || 0;\r\n document.getElementById('admin-modal').style.display = 'block';\r\n },\r\n save: (e) => {\r\n e.preventDefault();\r\n const id = document.getElementById('edit-id').value;\r\n const data = { name: document.getElementById('edit-name').value, role: document.getElementById('edit-role').value, parentId: document.getElementById('edit-parentId').value ? parseInt(document.getElementById('edit-parentId').value) : null, ranking: parseInt(document.getElementById('edit-ranking').value) };\r\n MockBackend.updateMember(id, data);\r\n document.getElementById('admin-modal').style.display = 'none';\r\n UI.toast('Member updated successfully');\r\n UI.renderAdminList();\r\n },\r\n delete: (id) => {\r\n if(!confirm(\"Are you sure?\")) return;\r\n let hierarchy = MockBackend.getHierarchy().filter(m => m.id != id);\r\n MockBackend.saveHierarchy(hierarchy);\r\n let users = MockBackend.getUsers().filter(m => m.id != id);\r\n MockBackend.saveUsers(users);\r\n UI.renderAdminList();\r\n UI.toast('Member deleted');\r\n }\r\n };\r\n window.Admin = Admin;\r\n\r\n \/\/ --- App Initialization ---\r\n document.addEventListener('DOMContentLoaded', () => {\r\n MockBackend.init();\r\n\r\n \/\/ --- Registration Dynamic Logic ---\r\n const regPosition = document.getElementById('reg-position');\r\n const regName = document.getElementById('reg-name');\r\n const groupSA = document.getElementById('group-sa');\r\n const groupSD = document.getElementById('group-sd');\r\n const dsdHint = document.getElementById('dsd-hint');\r\n\r\n regPosition.addEventListener('change', (e) => {\r\n const val = e.target.value;\r\n groupSA.classList.add('hidden');\r\n groupSD.classList.add('hidden');\r\n dsdHint.style.display = 'none';\r\n if (val === 'SA') { groupSA.classList.remove('hidden'); regName.readOnly = false; regName.value = \"\"; } \r\n else if (val === 'SD') { groupSD.classList.remove('hidden'); regName.readOnly = false; regName.value = \"\"; } \r\n else if (val === 'DSD') { regName.readOnly = true; regName.value = \"Elaine Lim - \u5289\u66c9\u6167\"; dsdHint.style.display = 'block'; }\r\n });\r\n\r\n \/\/ --- Auth \/ Password Protection ---\r\n const btnRequestEdit = document.getElementById('btn-request-edit');\r\n const authModal = document.getElementById('auth-modal');\r\n const authPassword = document.getElementById('auth-password');\r\n const btnAuthConfirm = document.getElementById('btn-auth-confirm');\r\n const btnAuthCancel = document.getElementById('btn-auth-cancel');\r\n\r\n btnRequestEdit.addEventListener('click', () => {\r\n authPassword.value = '';\r\n authModal.style.display = 'block';\r\n });\r\n btnAuthCancel.addEventListener('click', () => { authModal.style.display = 'none'; });\r\n btnAuthConfirm.addEventListener('click', () => {\r\n if (authPassword.value === 'team1293') {\r\n UI.toast('Access Granted'); authModal.style.display = 'none'; UI.renderAdminList(); UI.showView('view-admin');\r\n } else { UI.toast('Incorrect Password!'); }\r\n });\r\n\r\n \/\/ --- ROUTING LOGIC UPDATE ---\r\n const session = localStorage.getItem('team1293_session');\r\n const isInstalled = localStorage.getItem('team1293_installed');\r\n const isStandalone = window.matchMedia('(display-mode: standalone)').matches;\r\n\r\n if (isStandalone) {\r\n \/\/ --- JIKA BUKA DARI ICON APP (PWA) ---\r\n \/\/ PAKSA tunjuk A2HS Page setiap kali (Supaya boleh Register\/Login semula)\r\n \/\/ Ini akan memastikan flow \"Register dulu\" sentiasa dijaga apabila guna App.\r\n UI.showView('view-a2hs');\r\n document.getElementById('app-header').style.display = 'none';\r\n } else {\r\n \/\/ --- JIKA BUKA DARI BROWSER (Chrome\/Safari) ---\r\n document.getElementById('app-header').style.display = 'none';\r\n\r\n if (session) {\r\n \/\/ Jika login dalam browser, masuk dashboard\r\n AppState.currentUser = JSON.parse(session);\r\n document.getElementById('app-header').style.display = 'flex';\r\n if (AppState.currentUser.role === 'ADMIN' || AppState.currentUser.role === 'DSD') { UI.showView('view-admin'); UI.renderAdminList(); } \r\n else { UI.showView('view-products'); }\r\n } else {\r\n \/\/ Jika tak login, pergi ke A2HS atau Register\r\n if (isInstalled === 'true') { UI.showView('view-register'); } \r\n else { UI.showView('view-a2hs'); }\r\n }\r\n }\r\n\r\n \/\/ --- UNLOCK LOADING SCREEN ---\r\n setTimeout(() => { document.getElementById('loading-overlay').classList.add('hidden'); }, 500);\r\n\r\n \/\/ --- Event Listeners ---\r\n document.getElementById('link-to-login').addEventListener('click', (e) => { e.preventDefault(); UI.showView('view-login'); });\r\n document.getElementById('link-to-register').addEventListener('click', (e) => { e.preventDefault(); UI.showView('view-register'); });\r\n \r\n document.getElementById('btn-i-have-installed').addEventListener('click', () => {\r\n localStorage.setItem('team1293_installed', 'true');\r\n UI.toast(\"Redirecting to Registration...\");\r\n UI.showView('view-register');\r\n });\r\n\r\n document.getElementById('register-form').addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const role = document.getElementById('reg-position').value;\r\n const name = document.getElementById('reg-name').value;\r\n const email = document.getElementById('reg-email').value;\r\n const pass = document.getElementById('reg-password').value;\r\n let extraData = {};\r\n if(role === 'SA') extraData.temp_sd_parent = document.getElementById('reg-sd-parent').value;\r\n if(role === 'SD') { extraData.temp_dsd_parent = document.getElementById('reg-dsd-parent').value; extraData.temp_sa_subs = document.getElementById('reg-sd-subs').value; }\r\n\r\n const result = MockBackend.registerUser({ name, email, password: pass, role, ...extraData });\r\n if (result.success) {\r\n UI.toast(\"Registration Successful! Sent for approval.\");\r\n document.getElementById('verify-email-display').innerText = email;\r\n document.getElementById('verify-email-display').dataset.email = email;\r\n UI.showView('view-verify');\r\n } else { UI.toast(result.message); }\r\n });\r\n\r\n document.getElementById('btn-verify-simulate').addEventListener('click', () => {\r\n const email = document.getElementById('verify-email-display').dataset.email;\r\n const result = MockBackend.verifyUser(email);\r\n if (result.success) { UI.toast(\"Email Verified! Logging in...\"); UI.persistSession(result.user); UI.showView('view-products'); }\r\n });\r\n\r\n document.getElementById('login-form').addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const result = MockBackend.login(document.getElementById('login-email').value, document.getElementById('login-password').value);\r\n if (result.success) {\r\n UI.persistSession(result.user);\r\n UI.toast(\"Login Successful\");\r\n if(result.user.role === 'ADMIN' || result.user.role === 'DSD') { UI.showView('view-admin'); UI.renderAdminList(); } else { UI.showView('view-products'); }\r\n } else { UI.toast(result.message); }\r\n });\r\n\r\n document.getElementById('logout-btn').addEventListener('click', () => { UI.clearSession(); UI.toast(\"Logged Out\"); UI.showView('view-login'); });\r\n document.getElementById('btn-to-dashboard').addEventListener('click', () => { UI.renderHierarchy(); UI.showView('view-dashboard'); });\r\n document.getElementById('admin-add-btn').addEventListener('click', () => { alert(\"In this prototype, please use the 'Register' page to add new members, then edit them here to set hierarchy.\"); });\r\n document.getElementById('btn-cancel-edit').addEventListener('click', () => { document.getElementById('admin-modal').style.display = 'none'; });\r\n document.getElementById('admin-edit-form').addEventListener('submit', Admin.save);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loading Team1293… Admin Verification Please enter password to edit. Password Confirm Cancel Edit Member & Ranking Name PositionDSDSDSA Parent ID (Manager)DSD usually has no parent. Ranking (Order) Cancel Save Changes Team1293 Logout \ud83d\udcf1 Install Team1293 App For the best experience, add this app to your home screen. iPhone\/iPad: Tap Share button, then “Add to Home […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-13735","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages\/13735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/comments?post=13735"}],"version-history":[{"count":110,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages\/13735\/revisions"}],"predecessor-version":[{"id":14105,"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/pages\/13735\/revisions\/14105"}],"wp:attachment":[{"href":"https:\/\/nirvanamalacca.com\/index.php\/wp-json\/wp\/v2\/media?parent=13735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}