{"id":45168,"date":"2025-04-29T15:42:23","date_gmt":"2025-04-29T15:42:23","guid":{"rendered":"https:\/\/theme-dev.cmsmasters.net\/wellness-bliss\/?page_id=45168"},"modified":"2026-02-16T12:32:07","modified_gmt":"2026-02-16T12:32:07","slug":"events-page","status":"publish","type":"page","link":"https:\/\/maribel.in\/?page_id=45168","title":{"rendered":"Events Page"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n \n \n \n Maribel Wellness Dashboard<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <script src=\"\/_sdk\/data_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n box-sizing: border-box;\n font-family: 'Inter', sans-serif;\n background: #f8f9fa;\n }\n * {\n font-family: 'Inter', sans-serif;\n }\n .gradient-card {\n background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n }\n .gradient-card-light {\n background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);\n border: 1px solid rgba(139, 92, 246, 0.2);\n }\n .gradient-button {\n background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n }\n .gradient-button:hover {\n background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);\n }\n .gradient-button-secondary {\n background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);\n }\n .gradient-button-secondary:hover {\n background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);\n }\n .sidebar-collapsed {\n width: 80px;\n }\n .sidebar-expanded {\n width: 280px;\n }\n .nav-item:hover {\n background: rgba(139, 92, 246, 0.1);\n }\n .card-hover:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 24px rgba(139, 92, 246, 0.15);\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .animate-in {\n animation: fadeIn 0.5s ease-out forwards;\n }\n .stat-card:nth-child(1) { animation-delay: 0.1s; }\n .stat-card:nth-child(2) { animation-delay: 0.2s; }\n .stat-card:nth-child(3) { animation-delay: 0.3s; }\n .stat-card:nth-child(4) { animation-delay: 0.4s; }\n @keyframes pulse-glow {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }\n 50% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }\n }\n .live-indicator {\n animation: pulse-glow 2s infinite;\n }\n .active-user {\n animation: fadeIn 0.3s ease-out;\n }\n .text-purple-dark {\n color: #4c1d95;\n }\n .text-purple-main {\n color: #7c3aed;\n }\n <\/style>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full bg-gradient-to-br from-white via-purple-50 to-white text-gray-800 overflow-auto\"><!-- Login Screen -->\n <div id=\"loginScreen\" class=\"h-full w-full flex items-center justify-center p-4 md:p-6 bg-gradient-to-br from-white via-purple-50 to-white overflow-auto\">\n <div class=\"w-full max-w-md\">\n <div class=\"text-center mb-8 md:mb-10\">\n <h1 id=\"loginTitle\" class=\"text-3xl md:text-4xl font-bold text-purple-dark mb-2\">Maribel Wellness Centre<\/h1>\n <p class=\"text-gray-600 text-xs md:text-sm font-medium\">Project Management Dashboard<\/p>\n <\/div>\n <div class=\"gradient-card-light rounded-3xl p-6 md:p-8 border-2 border-purple-200\">\n <form id=\"loginForm\" class=\"space-y-5 md:space-y-6\">\n <div><label class=\"block text-sm md:text-base font-semibold text-purple-dark mb-3\">Role<\/label> <select id=\"loginRole\" onchange=\"toggleLoginSection()\" class=\"w-full px-4 py-3 md:py-4 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium text-base md:text-lg touch-manipulation\"> <option value=\"investor\">Investor<\/option> <option value=\"admin\">Administrator<\/option> <\/select>\n <\/div>\n <div id=\"adminLoginSection\" class=\"space-y-4\">\n <div><label class=\"block text-sm md:text-base font-semibold text-purple-dark mb-3\">Username or Email<\/label> <input type=\"text\" id=\"loginEmail\" autocomplete=\"username\" class=\"w-full px-4 py-3 md:py-4 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium text-base md:text-lg touch-manipulation\" placeholder=\"e.g., admin or admin@example.com\">\n <\/div>\n <div><label class=\"block text-sm md:text-base font-semibold text-purple-dark mb-3\">Password<\/label> <input type=\"password\" id=\"loginPassword\" autocomplete=\"current-password\" class=\"w-full px-4 py-3 md:py-4 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium text-base md:text-lg touch-manipulation\" placeholder=\"Enter your password\">\n <\/div>\n <p class=\"text-xs md:text-sm text-gray-600 font-medium bg-blue-50 border border-blue-200 rounded-lg p-3\">Demo: Use any username and password for admin login<\/p>\n <\/div>\n <div id=\"investorLoginSection\" class=\"hidden space-y-4\">\n <div><label class=\"block text-sm md:text-base font-semibold text-purple-dark mb-3\">Investor ID<\/label> <input type=\"text\" id=\"investorUserId\" autocomplete=\"off\" inputmode=\"text\" class=\"w-full px-4 py-3 md:py-4 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium text-base md:text-lg touch-manipulation uppercase\" placeholder=\"e.g., MMC001\">\n <\/div>\n <\/div><button type=\"submit\" class=\"w-full py-4 md:py-5 rounded-xl gradient-button text-white font-bold text-lg md:text-xl hover:shadow-lg active:scale-95 transition-all touch-manipulation\"> Sign In to Dashboard <\/button>\n <\/form>\n <\/div>\n <p class=\"text-center text-gray-500 text-xs md:text-sm mt-6 md:mt-8 font-medium px-2\"><strong>Demo Mode:<\/strong> For Admin: enter any username and password \u2022 For Investor: create an investor record first with an ID like MMC001<\/p>\n <\/div>\n <\/div><!-- Dashboard -->\n <div id=\"dashboard\" class=\"h-full hidden w-full\">\n <div class=\"flex h-full flex-col md:flex-row\"><!-- Sidebar -->\n <aside id=\"sidebar\" class=\"sidebar-expanded bg-white shadow-lg border-r border-purple-100 flex flex-col transition-all duration-300 flex-shrink-0 w-full md:w-auto max-h-[400px] md:max-h-full overflow-y-auto md:overflow-y-hidden order-2 md:order-1\">\n <div class=\"p-4 md:p-6 border-b border-purple-100\">\n <div class=\"flex items-center gap-3 md:gap-4\">\n <div class=\"w-10 h-10 md:w-12 md:h-12 rounded-xl gradient-card flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-5 h-5 md:w-6 md:h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\"><\/path>\n <\/svg>\n <\/div>\n <div class=\"sidebar-text\">\n <h2 id=\"sidebarTitle\" class=\"font-bold text-base md:text-lg text-purple-dark\">Maribel<\/h2>\n <p class=\"text-xs text-gray-500\">Wellness Centre<\/p>\n <\/div>\n <\/div>\n <\/div>\n <nav class=\"flex-1 p-2 md:p-4 space-y-1 md:space-y-2\"><button onclick=\"showSection('overview'); closeMobileSidebar();\" class=\"nav-item w-full flex items-center gap-3 md:gap-4 px-3 md:px-4 py-2 md:py-3 rounded-lg md:rounded-xl text-left transition-all text-purple-dark bg-purple-100 font-semibold text-sm md:text-base touch-manipulation\" data-section=\"overview\">\n <svg class=\"w-5 h-5 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"><\/path>\n <\/svg><span class=\"sidebar-text font-semibold\">Overview<\/span> <\/button> <button onclick=\"showSection('projects'); closeMobileSidebar();\" class=\"nav-item w-full flex items-center gap-3 md:gap-4 px-3 md:px-4 py-2 md:py-3 rounded-lg md:rounded-xl text-left transition-all text-gray-600 hover:text-purple-dark hover:bg-purple-50 font-semibold text-sm md:text-base touch-manipulation\" data-section=\"projects\">\n <svg class=\"w-5 h-5 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path>\n <\/svg><span class=\"sidebar-text font-semibold\">Projects<\/span> <\/button> <button onclick=\"showSection('milestones'); closeMobileSidebar();\" class=\"nav-item w-full flex items-center gap-3 md:gap-4 px-3 md:px-4 py-2 md:py-3 rounded-lg md:rounded-xl text-left transition-all text-gray-600 hover:text-purple-dark hover:bg-purple-50 font-semibold text-sm md:text-base touch-manipulation\" data-section=\"milestones\">\n <svg class=\"w-5 h-5 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n <\/svg><span class=\"sidebar-text font-semibold\">Milestones<\/span> <\/button> <button onclick=\"showSection('team'); closeMobileSidebar();\" class=\"nav-item w-full flex items-center gap-3 md:gap-4 px-3 md:px-4 py-2 md:py-3 rounded-lg md:rounded-xl text-left transition-all text-gray-600 hover:text-purple-dark hover:bg-purple-50 admin-only font-semibold text-sm md:text-base touch-manipulation\" data-section=\"team\">\n <svg class=\"w-5 h-5 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"><\/path>\n <\/svg><span class=\"sidebar-text font-semibold\">Team<\/span> <\/button> <button onclick=\"showSection('investors'); closeMobileSidebar();\" class=\"nav-item w-full flex items-center gap-3 md:gap-4 px-3 md:px-4 py-2 md:py-3 rounded-lg md:rounded-xl text-left transition-all text-gray-600 hover:text-purple-dark hover:bg-purple-50 admin-only font-semibold text-sm md:text-base touch-manipulation\" data-section=\"investors\">\n <svg class=\"w-5 h-5 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n <\/svg><span class=\"sidebar-text font-semibold\">Investors<\/span> <\/button>\n <\/nav><!-- Active Users Indicator -->\n <div class=\"p-3 md:p-4 border-t border-purple-100 space-y-2 hidden md:block\">\n <div class=\"flex items-center gap-2\">\n <div class=\"w-2 h-2 rounded-full bg-purple-600 live-indicator\"><\/div><span class=\"text-xs text-gray-600 font-semibold\">Live Users<\/span> <span id=\"activeUserCount\" class=\"text-xs font-bold text-purple-600 ml-auto\">1<\/span>\n <\/div>\n <div id=\"activeUsersList\" class=\"space-y-1 max-h-20 overflow-y-auto\"><!-- Active users will be shown here -->\n <\/div>\n <\/div>\n <div class=\"p-3 md:p-4 border-t border-purple-100 hidden md:block\"><button id=\"toggleSidebar\" onclick=\"toggleSidebar()\" class=\"w-full flex items-center justify-center gap-2 px-3 md:px-4 py-2 md:py-3 rounded-lg md:rounded-xl gradient-card-light hover:bg-purple-100 transition-all text-purple-dark font-semibold text-sm md:text-base touch-manipulation\">\n <svg id=\"toggleIcon\" class=\"w-5 h-5 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 19l-7-7 7-7m8 14l-7-7 7-7\"><\/path>\n <\/svg><span class=\"sidebar-text text-sm font-semibold\">Collapse<\/span> <\/button>\n <\/div>\n <\/aside><!-- Main Content -->\n <main class=\"flex-1 overflow-auto order-1 md:order-2 w-full\"><!-- Header -->\n <header class=\"sticky top-0 z-10 bg-white shadow-sm border-b border-purple-100 px-4 md:px-8 py-3 md:py-4\">\n <div class=\"flex items-center justify-between gap-4\">\n <div class=\"min-w-0 flex-1\">\n <h1 id=\"welcomeText\" class=\"text-lg md:text-2xl font-bold text-purple-dark truncate\">Welcome back!<\/h1>\n <p class=\"text-gray-600 text-xs md:text-sm font-medium hidden md:block\">Real-time collaboration dashboard<\/p>\n <\/div>\n <div class=\"flex items-center gap-2 md:gap-4\">\n <div class=\"text-right hidden md:block\">\n <p id=\"userEmail\" class=\"font-semibold text-gray-800 text-sm\"><\/p>\n <p id=\"userRole\" class=\"text-xs font-semibold text-purple-600\"><\/p>\n <\/div><button onclick=\"logout()\" class=\"px-3 md:px-4 py-2 md:py-2 rounded-lg md:rounded-xl gradient-card-light hover:bg-purple-100 border-2 border-purple-200 transition-all text-xs md:text-sm font-semibold text-purple-dark touch-manipulation\"> Sign Out <\/button>\n <\/div>\n <\/div>\n <\/header>\n <div class=\"p-4 md:p-8 space-y-6 md:space-y-8\"><!-- Overview Section -->\n <section id=\"overviewSection\" class=\"space-y-6 md:space-y-8\"><!-- Stats Grid -->\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-6\">\n <div class=\"stat-card gradient-card-light rounded-xl md:rounded-2xl p-4 md:p-6 border-2 border-purple-200 card-hover transition-all opacity-0 animate-in\">\n <div class=\"flex items-center justify-between mb-3 md:mb-4\">\n <div class=\"w-8 h-8 md:w-12 md:h-12 rounded-lg md:rounded-xl gradient-card flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-4 h-4 md:w-6 md:h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path>\n <\/svg>\n <\/div><span class=\"text-xs font-bold text-purple-600 bg-purple-100 px-2 py-1 rounded-full\">Active<\/span>\n <\/div>\n <p id=\"totalProjects\" class=\"text-xl md:text-3xl font-bold text-purple-dark\">0<\/p>\n <p class=\"text-xs md:text-sm text-gray-600 mt-1 md:mt-2 font-medium\">Projects<\/p>\n <\/div>\n <div class=\"stat-card gradient-card-light rounded-xl md:rounded-2xl p-4 md:p-6 border-2 border-purple-200 card-hover transition-all opacity-0 animate-in\">\n <div class=\"flex items-center justify-between mb-3 md:mb-4\">\n <div class=\"w-8 h-8 md:w-12 md:h-12 rounded-lg md:rounded-xl gradient-card flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-4 h-4 md:w-6 md:h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n <\/svg>\n <\/div><span class=\"text-xs font-bold text-purple-600 bg-purple-100 px-2 py-1 rounded-full\">Tracked<\/span>\n <\/div>\n <p id=\"totalMilestones\" class=\"text-xl md:text-3xl font-bold text-purple-dark\">0<\/p>\n <p class=\"text-xs md:text-sm text-gray-600 mt-1 md:mt-2 font-medium\">Milestones<\/p>\n <\/div>\n <div class=\"stat-card gradient-card-light rounded-xl md:rounded-2xl p-4 md:p-6 border-2 border-purple-200 card-hover transition-all opacity-0 animate-in\">\n <div class=\"flex items-center justify-between mb-3 md:mb-4\">\n <div class=\"w-8 h-8 md:w-12 md:h-12 rounded-lg md:rounded-xl gradient-card flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-4 h-4 md:w-6 md:h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"><\/path>\n <\/svg>\n <\/div><span class=\"text-xs font-bold text-purple-600 bg-purple-100 px-2 py-1 rounded-full\">Team<\/span>\n <\/div>\n <p id=\"totalMembers\" class=\"text-xl md:text-3xl font-bold text-purple-dark\">0<\/p>\n <p class=\"text-xs md:text-sm text-gray-600 mt-1 md:mt-2 font-medium\">Members<\/p>\n <\/div>\n <div class=\"stat-card gradient-card-light rounded-xl md:rounded-2xl p-4 md:p-6 border-2 border-purple-200 card-hover transition-all opacity-0 animate-in\">\n <div class=\"flex items-center justify-between mb-3 md:mb-4\">\n <div class=\"w-8 h-8 md:w-12 md:h-12 rounded-lg md:rounded-xl gradient-card flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-4 h-4 md:w-6 md:h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path>\n <\/svg>\n <\/div><span class=\"text-xs font-bold text-purple-600 bg-purple-100 px-2 py-1 rounded-full\">Progress<\/span>\n <\/div>\n <p id=\"avgProgress\" class=\"text-xl md:text-3xl font-bold text-purple-dark\">0%<\/p>\n <p class=\"text-xs md:text-sm text-gray-600 mt-1 md:mt-2 font-medium\">Completion<\/p>\n <\/div>\n <\/div><!-- Charts Row -->\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6\"><!-- Project Status Chart -->\n <div class=\"gradient-card-light rounded-2xl p-6 border-2 border-purple-200\">\n <h3 class=\"text-lg font-bold text-purple-dark mb-6\">Project Status<\/h3>\n <div id=\"statusChart\" class=\"flex items-center justify-center gap-8\">\n <div class=\"relative\">\n <svg class=\"w-40 h-40\" viewbox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f3e8ff\" stroke-width=\"12\" \/> <circle id=\"progressRing\" class=\"progress-ring\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"url(#gradient)\" stroke-width=\"12\" stroke-linecap=\"round\" stroke-dasharray=\"251.2\" stroke-dashoffset=\"251.2\" \/> <defs>\n <lineargradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"#8b5cf6\" \/>\n <stop offset=\"100%\" stop-color=\"#7c3aed\" \/>\n <\/lineargradient>\n <\/defs>\n <\/svg>\n <div class=\"absolute inset-0 flex items-center justify-center flex-col\"><span id=\"chartPercent\" class=\"text-2xl font-bold text-purple-dark\">0%<\/span> <span class=\"text-xs text-gray-600 font-semibold\">Complete<\/span>\n <\/div>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-3 h-3 rounded-full gradient-card\"><\/div><span class=\"text-sm text-gray-700 font-semibold\">Completed<\/span> <span id=\"completedCount\" class=\"text-sm font-bold text-purple-dark ml-auto\">0<\/span>\n <\/div>\n <div class=\"flex items-center gap-3\">\n <div class=\"w-3 h-3 rounded-full bg-blue-400\"><\/div><span class=\"text-sm text-gray-700 font-semibold\">In Progress<\/span> <span id=\"inProgressCount\" class=\"text-sm font-bold text-purple-dark ml-auto\">0<\/span>\n <\/div>\n <div class=\"flex items-center gap-3\">\n <div class=\"w-3 h-3 rounded-full bg-amber-400\"><\/div><span class=\"text-sm text-gray-700 font-semibold\">Pending<\/span> <span id=\"pendingCount\" class=\"text-sm font-bold text-purple-dark ml-auto\">0<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div><!-- Recent Activity -->\n <div class=\"gradient-card-light rounded-2xl p-6 border-2 border-purple-200\">\n <h3 class=\"text-lg font-bold text-purple-dark mb-6\">Real-Time Activity<\/h3>\n <div id=\"recentActivity\" class=\"space-y-4 max-h-64 overflow-auto\">\n <p class=\"text-gray-600 text-sm text-center py-8 font-medium\">No recent activity<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section><!-- Projects Section -->\n <section id=\"projectsSection\" class=\"hidden space-y-6\">\n <div class=\"flex items-center justify-between\">\n <h2 class=\"text-xl font-bold text-purple-dark\">Projects & Work Status<\/h2><button onclick=\"openModal('project')\" class=\"admin-only px-4 py-2 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"><\/path>\n <\/svg> Add Project <\/button>\n <\/div>\n <div id=\"projectsList\" class=\"grid gap-4\">\n <p class=\"text-gray-600 text-center py-12 font-medium\">No projects yet. Click \"Add Project\" to create one.<\/p>\n <\/div>\n <\/section><!-- Milestones Section -->\n <section id=\"milestonesSection\" class=\"hidden space-y-6\">\n <div class=\"flex items-center justify-between\">\n <h2 class=\"text-xl font-bold text-purple-dark\">Milestones<\/h2><button onclick=\"openModal('milestone')\" class=\"admin-only px-4 py-2 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"><\/path>\n <\/svg> Add Milestone <\/button>\n <\/div>\n <div id=\"milestonesList\" class=\"grid gap-4\">\n <p class=\"text-gray-600 text-center py-12 font-medium\">No milestones yet. Click \"Add Milestone\" to create one.<\/p>\n <\/div>\n <\/section><!-- Team Section -->\n <section id=\"teamSection\" class=\"hidden space-y-6\">\n <div class=\"flex items-center justify-between\">\n <h2 class=\"text-xl font-bold text-purple-dark\">Team Members<\/h2><button onclick=\"openModal('user')\" class=\"px-4 py-2 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"><\/path>\n <\/svg> Add User <\/button>\n <\/div>\n <div id=\"teamList\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <p class=\"text-gray-600 text-center py-12 col-span-full font-medium\">No team members yet. Click \"Add User\" to add someone.<\/p>\n <\/div>\n <\/section><!-- Investors Section -->\n <section id=\"investorsSection\" class=\"hidden space-y-6\">\n <div class=\"flex items-center justify-between\">\n <h2 class=\"text-xl font-bold text-purple-dark\">Investor Management<\/h2><button onclick=\"openInvestorForm()\" class=\"px-4 py-2 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"><\/path>\n <\/svg> Add Investor <\/button>\n <\/div>\n <div id=\"investorsList\" class=\"grid gap-6\">\n <p class=\"text-gray-600 text-center py-12 font-medium\">No investors yet. Click \"Add Investor\" to create one.<\/p>\n <\/div>\n <\/section>\n <\/div>\n <\/main>\n <\/div>\n <\/div><!-- Modal -->\n <div id=\"modal\" class=\"fixed inset-0 z-50 hidden\">\n <div class=\"absolute inset-0 bg-black\/30 backdrop-blur-sm\" onclick=\"closeModal()\"><\/div>\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full max-w-lg\">\n <div class=\"gradient-card-light rounded-2xl p-8 border-2 border-purple-200 m-4 bg-white\">\n <div class=\"flex items-center justify-between mb-6\">\n <h3 id=\"modalTitle\" class=\"text-xl font-bold text-purple-dark\">Add New<\/h3><button onclick=\"closeModal()\" class=\"p-2 rounded-lg hover:bg-purple-100 transition-all text-purple-dark\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n <\/svg><\/button>\n <\/div>\n <form id=\"modalForm\" class=\"space-y-4\"><!-- Dynamic form content -->\n <\/form>\n <\/div>\n <\/div>\n <\/div><!-- Delete Confirmation -->\n <div id=\"deleteConfirm\" class=\"fixed inset-0 z-50 hidden\">\n <div class=\"absolute inset-0 bg-black\/30 backdrop-blur-sm\" onclick=\"cancelDelete()\"><\/div>\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full max-w-sm\">\n <div class=\"gradient-card-light rounded-2xl p-6 border-2 border-purple-200 m-4 text-center bg-white\">\n <div class=\"w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4\">\n <svg class=\"w-8 h-8 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-bold text-purple-dark mb-2\">Confirm Delete<\/h3>\n <p class=\"text-gray-600 text-sm mb-6 font-medium\">Are you sure you want to delete this item? This action cannot be undone.<\/p>\n <div class=\"flex gap-3\"><button onclick=\"cancelDelete()\" class=\"flex-1 px-4 py-3 rounded-xl gradient-card-light hover:bg-purple-100 transition-all font-bold text-purple-dark border-2 border-purple-200\">Cancel<\/button> <button onclick=\"confirmDelete()\" class=\"flex-1 px-4 py-3 rounded-xl bg-red-600 hover:bg-red-700 transition-all font-bold text-white\">Delete<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div><!-- Investor Modal -->\n <div id=\"investorModal\" class=\"fixed inset-0 z-50 hidden\">\n <div class=\"absolute inset-0 bg-black\/30 backdrop-blur-sm\" onclick=\"closeInvestorModal()\"><\/div>\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full max-w-2xl max-h-[90vh] overflow-y-auto\">\n <div class=\"gradient-card-light rounded-2xl p-8 border-2 border-purple-200 m-4 bg-white\">\n <div class=\"flex items-center justify-between mb-6\">\n <h3 class=\"text-xl font-bold text-purple-dark\">Investor Details<\/h3><button onclick=\"closeInvestorModal()\" class=\"p-2 rounded-lg hover:bg-purple-100 transition-all text-purple-dark\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n <\/svg><\/button>\n <\/div>\n <div id=\"investorFormContainer\" class=\"space-y-6\"><!-- Investor Form -->\n <form id=\"investorForm\" class=\"space-y-4\">\n <div class=\"grid grid-cols-2 gap-4\">\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">User ID<\/label> <input type=\"text\" id=\"investorUserId\" value=\"MMC001\" readonly class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-gray-50 text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 font-semibold opacity-70\">\n <\/div>\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Full Name *<\/label> <input type=\"text\" id=\"investorName\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Enter investor name\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Contact Number *<\/label> <input type=\"tel\" id=\"investorContact\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Enter contact number\">\n <\/div>\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Email ID *<\/label> <input type=\"email\" id=\"investorEmail\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Enter email address\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-3 gap-4\">\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Invested Amount<\/label> <input type=\"number\" id=\"investorInvestedAmount\" step=\"0.01\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"0.00\">\n <\/div>\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Committed Amount<\/label> <input type=\"number\" id=\"investorCommittedAmount\" step=\"0.01\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"0.00\">\n <\/div>\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Due Amount<\/label> <input type=\"number\" id=\"investorDueAmount\" step=\"0.01\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"0.00\">\n <\/div>\n <\/div><button type=\"submit\" class=\"w-full py-3 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all\"> Save Investor Details <\/button>\n <\/form><!-- Receipt Section -->\n <div id=\"receiptSection\" class=\"hidden pt-6 border-t-2 border-purple-200\">\n <h4 class=\"text-lg font-bold text-purple-dark mb-4\">Add Receipt<\/h4>\n <form id=\"receiptForm\" class=\"space-y-4\">\n <div class=\"grid grid-cols-3 gap-4\">\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Receipt Date *<\/label> <input type=\"date\" id=\"receiptDate\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 font-semibold\">\n <\/div>\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Receipt Amount *<\/label> <input type=\"number\" id=\"receiptAmount\" step=\"0.01\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"0.00\">\n <\/div>\n <div><label class=\"block text-sm font-bold text-purple-dark mb-2\">Discounted Amount<\/label> <input type=\"number\" id=\"discountedAmount\" step=\"0.01\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"0.00\">\n <\/div>\n <\/div><button type=\"submit\" class=\"w-full py-3 rounded-xl gradient-button-secondary text-white font-bold hover:shadow-lg transition-all\"> Add Receipt <\/button>\n <\/form><!-- Receipts List -->\n <div id=\"receiptsList\" class=\"mt-6 space-y-3\"><!-- Receipts will be added here -->\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div><!-- Loading Overlay -->\n <div id=\"loadingOverlay\" class=\"fixed inset-0 z-50 hidden bg-black\/30 backdrop-blur-sm flex items-center justify-center\">\n <div class=\"w-12 h-12 border-4 border-purple-300 border-t-purple-600 rounded-full animate-spin\"><\/div>\n <\/div>\n <script>\n \/\/ State\n let currentUser = null;\n let allData = [];\n let sidebarCollapsed = false;\n let deleteTarget = null;\n let currentRecordCount = 0;\n let currentInvestor = null;\n let investorReceipts = [];\n let sessionId = generateSessionId();\n let activeUsers = new Map();\n\n \/\/ Generate unique session ID\n function generateSessionId() {\n return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n }\n\n \/\/ Default config\n const defaultConfig = {\n dashboard_title: 'Maribel Wellness Centre',\n welcome_message: 'Welcome back!',\n background_color: '#f8f9fa',\n surface_color: '#ffffff',\n text_color: '#1a1a1a',\n primary_action_color: '#8b5cf6',\n secondary_action_color: '#c4b5fd',\n font_family: 'Inter',\n font_size: 16\n };\n\n \/\/ Data Handler with real-time sync\n const dataHandler = {\n onDataChanged(data) {\n allData = data;\n currentRecordCount = data.length;\n \n \/\/ Update active users\n const sessions = new Set();\n data.forEach(item => {\n if (item.sessionId) {\n sessions.add(item.sessionId);\n }\n });\n \n \/\/ Sync active users (max 10)\n if (sessions.size <= 10) {\n updateActiveUsers(Array.from(sessions));\n }\n \n updateDashboard();\n }\n };\n\n \/\/ Update active users display\n function updateActiveUsers(sessions) {\n activeUsers.clear();\n sessions.forEach(sid => activeUsers.set(sid, Date.now()));\n \n document.getElementById('activeUserCount').textContent = activeUsers.size;\n const list = document.getElementById('activeUsersList');\n \n const usersList = Array.from(activeUsers.keys()).slice(0, 10).map((sid, idx) => {\n const isCurrentUser = sid === sessionId;\n return `\n <div class=\"text-xs px-3 py-1 rounded-lg bg-purple-100 text-purple-700 active-user flex items-center gap-2 font-semibold\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-purple-600\"><\/span>\n <span>${isCurrentUser ? 'You' : `User ${idx + 1}`}<\/span>\n <\/div>\n `;\n }).join('');\n \n list.innerHTML = usersList || '<p class=\"text-xs text-gray-500 text-center py-2 font-medium\">Waiting for users...<\/p>';\n }\n\n \/\/ Initialize SDKs\n async function initApp() {\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n applyConfig(config);\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (v) => window.elementSdk.setConfig({ background_color: v })\n },\n {\n get: () => config.surface_color || defaultConfig.surface_color,\n set: (v) => window.elementSdk.setConfig({ surface_color: v })\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (v) => window.elementSdk.setConfig({ text_color: v })\n },\n {\n get: () => config.primary_action_color || defaultConfig.primary_action_color,\n set: (v) => window.elementSdk.setConfig({ primary_action_color: v })\n },\n {\n get: () => config.secondary_action_color || defaultConfig.secondary_action_color,\n set: (v) => window.elementSdk.setConfig({ secondary_action_color: v })\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (v) => window.elementSdk.setConfig({ font_family: v })\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (v) => window.elementSdk.setConfig({ font_size: v })\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n ['dashboard_title', config.dashboard_title || defaultConfig.dashboard_title],\n ['welcome_message', config.welcome_message || defaultConfig.welcome_message]\n ])\n });\n }\n\n if (window.dataSdk) {\n const result = await window.dataSdk.init(dataHandler);\n if (!result.isOk) {\n console.error('Failed to initialize data SDK');\n }\n }\n }\n\n function applyConfig(config) {\n const title = config.dashboard_title || defaultConfig.dashboard_title;\n const welcome = config.welcome_message || defaultConfig.welcome_message;\n const fontFamily = config.font_family || defaultConfig.font_family;\n const baseSize = config.font_size || defaultConfig.font_size;\n\n document.getElementById('loginTitle').textContent = title;\n document.getElementById('sidebarTitle').textContent = title.split(' ')[0];\n document.getElementById('welcomeText').textContent = welcome;\n\n document.body.style.fontFamily = `${fontFamily}, sans-serif`;\n document.body.style.fontSize = `${baseSize}px`;\n }\n\n \/\/ Toggle login sections\n function toggleLoginSection() {\n const role = document.getElementById('loginRole').value;\n const adminSection = document.getElementById('adminLoginSection');\n const investorSection = document.getElementById('investorLoginSection');\n \n if (role === 'investor') {\n adminSection.classList.add('hidden');\n investorSection.classList.remove('hidden');\n } else {\n adminSection.classList.remove('hidden');\n investorSection.classList.add('hidden');\n }\n }\n\n \/\/ Login\n document.getElementById('loginForm').addEventListener('submit', async (e) => {\n e.preventDefault();\n \n try {\n const role = document.getElementById('loginRole').value;\n let identifier = '';\n \n if (role === 'admin') {\n identifier = document.getElementById('loginEmail').value.trim();\n const password = document.getElementById('loginPassword').value.trim();\n \n if (!identifier) {\n showToast('Please enter your username or email', 'error');\n return;\n }\n if (!password) {\n showToast('Please enter your password', 'error');\n return;\n }\n \n \/\/ Admin login accepted with any credentials (demo mode)\n showToast('Admin login successful!', 'success');\n } else {\n identifier = document.getElementById('investorUserId').value.toUpperCase().trim();\n if (!identifier) {\n showToast('Please enter your Investor ID', 'error');\n return;\n }\n \n \/\/ Check if investor exists in data\n let foundInvestor = allData.find(d => d.type === 'investor' && d.userId === identifier);\n \n if (!foundInvestor) {\n showToast('Invalid Investor ID. Please create an investor record first or check the ID.', 'error');\n return;\n }\n }\n \n if (!identifier) {\n showToast('Please enter valid credentials', 'error');\n return;\n }\n \n currentUser = { identifier, role, sessionId };\n document.getElementById('userEmail').textContent = identifier;\n document.getElementById('userRole').textContent = role === 'admin' ? 'Administrator' : 'Investor';\n \n await registerSession();\n \n document.getElementById('loginScreen').classList.add('hidden');\n document.getElementById('dashboard').classList.remove('hidden');\n \n document.querySelectorAll('.admin-only').forEach(el => {\n el.style.display = role === 'admin' ? 'flex' : 'none';\n });\n \n updateDashboard();\n } catch (error) {\n console.error('Login error:', error);\n showToast('Login failed. Please try again.', 'error');\n }\n });\n\n async function registerSession() {\n try {\n if (window.dataSdk) {\n const sessionRecord = {\n type: 'session',\n sessionId: sessionId,\n userId: currentUser.identifier,\n role: currentUser.role,\n lastViewed: new Date().toISOString(),\n createdAt: new Date().toISOString()\n };\n \n await window.dataSdk.create(sessionRecord);\n }\n } catch (error) {\n \/\/ Session registration failed, but login should still work\n console.error('Session registration error:', error);\n }\n }\n\n function logout() {\n currentUser = null;\n document.getElementById('dashboard').classList.add('hidden');\n document.getElementById('loginScreen').classList.remove('hidden');\n document.getElementById('loginEmail').value = '';\n sessionId = generateSessionId();\n }\n\n \/\/ Sidebar toggle\n function toggleSidebar() {\n sidebarCollapsed = !sidebarCollapsed;\n const sidebar = document.getElementById('sidebar');\n const toggleIcon = document.getElementById('toggleIcon');\n \n if (sidebarCollapsed) {\n sidebar.classList.remove('sidebar-expanded');\n sidebar.classList.add('sidebar-collapsed');\n toggleIcon.style.transform = 'rotate(180deg)';\n document.querySelectorAll('.sidebar-text').forEach(el => el.classList.add('hidden'));\n } else {\n sidebar.classList.remove('sidebar-collapsed');\n sidebar.classList.add('sidebar-expanded');\n toggleIcon.style.transform = 'rotate(0deg)';\n document.querySelectorAll('.sidebar-text').forEach(el => el.classList.remove('hidden'));\n }\n }\n\n \/\/ Section navigation\n function showSection(section) {\n ['overview', 'projects', 'milestones', 'team', 'investors'].forEach(s => {\n document.getElementById(`${s}Section`).classList.add('hidden');\n });\n document.getElementById(`${section}Section`).classList.remove('hidden');\n \n document.querySelectorAll('.nav-item').forEach(btn => {\n if (btn.dataset.section === section) {\n btn.classList.add('bg-purple-100', 'text-purple-dark');\n btn.classList.remove('text-gray-600');\n } else {\n btn.classList.remove('bg-purple-100', 'text-purple-dark');\n btn.classList.add('text-gray-600');\n }\n });\n \n if (section === 'investors') {\n renderInvestors();\n }\n }\n\n function closeMobileSidebar() {\n \/\/ On mobile, sidebar is hidden by default and shown on scroll\n if (window.innerWidth < 768) {\n document.getElementById('sidebar').style.maxHeight = '0';\n setTimeout(() => {\n document.getElementById('sidebar').style.maxHeight = '';\n }, 300);\n }\n }\n\n \/\/ Modal functions\n function openModal(type) {\n if (currentRecordCount >= 999) {\n showToast('Maximum limit of 999 items reached. Please delete some items first.', 'error');\n return;\n }\n \n const modal = document.getElementById('modal');\n const title = document.getElementById('modalTitle');\n const form = document.getElementById('modalForm');\n \n let formContent = '';\n \n if (type === 'project') {\n title.textContent = 'Add New Project';\n formContent = `\n <input type=\"hidden\" name=\"type\" value=\"project\">\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Project Name<\/label>\n <input type=\"text\" name=\"name\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Enter project name\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Description<\/label>\n <textarea name=\"description\" rows=\"3\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Project description\"><\/textarea>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Status<\/label>\n <select name=\"status\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 font-semibold\">\n <option value=\"pending\">Pending<\/option>\n <option value=\"in-progress\">In Progress<\/option>\n <option value=\"completed\">Completed<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Priority<\/label>\n <select name=\"priority\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 font-semibold\">\n <option value=\"low\">Low<\/option>\n <option value=\"medium\">Medium<\/option>\n <option value=\"high\">High<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Progress (%)<\/label>\n <input type=\"number\" name=\"progress\" min=\"0\" max=\"100\" value=\"0\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Due Date<\/label>\n <input type=\"date\" name=\"dueDate\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\">\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"w-full py-3 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all\">\n Create Project\n <\/button>\n `;\n } else if (type === 'milestone') {\n title.textContent = 'Add New Milestone';\n formContent = `\n <input type=\"hidden\" name=\"type\" value=\"milestone\">\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Milestone Name<\/label>\n <input type=\"text\" name=\"name\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Enter milestone name\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Description<\/label>\n <textarea name=\"description\" rows=\"3\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Milestone description\"><\/textarea>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Status<\/label>\n <select name=\"status\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 font-semibold\">\n <option value=\"pending\">Pending<\/option>\n <option value=\"in-progress\">In Progress<\/option>\n <option value=\"completed\">Completed<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Due Date<\/label>\n <input type=\"date\" name=\"dueDate\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\">\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"w-full py-3 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all\">\n Create Milestone\n <\/button>\n `;\n } else if (type === 'user') {\n title.textContent = 'Add Team Member';\n formContent = `\n <input type=\"hidden\" name=\"type\" value=\"user\">\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Full Name<\/label>\n <input type=\"text\" name=\"name\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Enter full name\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Email<\/label>\n <input type=\"email\" name=\"email\" required class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 transition-all font-semibold\" placeholder=\"Enter email\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-purple-dark mb-2\">Role<\/label>\n <select name=\"role\" class=\"w-full px-4 py-3 rounded-xl border-2 border-purple-200 bg-white text-gray-800 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-100 font-semibold\">\n <option value=\"member\">Team Member<\/option>\n <option value=\"lead\">Team Lead<\/option>\n <option value=\"manager\">Project Manager<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"w-full py-3 rounded-xl gradient-button text-white font-bold hover:shadow-lg transition-all\">\n Add Team Member\n <\/button>\n `;\n }\n \n form.innerHTML = formContent;\n modal.classList.remove('hidden');\n }\n\n function closeModal() {\n document.getElementById('modal').classList.add('hidden');\n }\n\n \/\/ Form submission\n document.getElementById('modalForm').addEventListener('submit', async (e) => {\n e.preventDefault();\n const formData = new FormData(e.target);\n const data = Object.fromEntries(formData);\n \n data.progress = data.progress ? parseInt(data.progress) : 0;\n data.createdAt = new Date().toISOString();\n data.sessionId = sessionId;\n \n showLoading(true);\n const result = await window.dataSdk.create(data);\n showLoading(false);\n \n if (result.isOk) {\n closeModal();\n showToast(`${data.type.charAt(0).toUpperCase() + data.type.slice(1)} created successfully!`, 'success');\n } else {\n showToast('Failed to create item. Please try again.', 'error');\n }\n });\n\n \/\/ Delete functions\n function requestDelete(item) {\n deleteTarget = item;\n document.getElementById('deleteConfirm').classList.remove('hidden');\n }\n\n function cancelDelete() {\n deleteTarget = null;\n document.getElementById('deleteConfirm').classList.add('hidden');\n }\n\n async function confirmDelete() {\n if (!deleteTarget) return;\n \n document.getElementById('deleteConfirm').classList.add('hidden');\n showLoading(true);\n \n const result = await window.dataSdk.delete(deleteTarget);\n showLoading(false);\n \n if (result.isOk) {\n showToast('Item deleted successfully!', 'success');\n } else {\n showToast('Failed to delete item. Please try again.', 'error');\n }\n \n deleteTarget = null;\n }\n\n \/\/ Update progress\n async function updateProgress(item, newProgress) {\n showLoading(true);\n const updatedItem = { ...item, progress: parseInt(newProgress) };\n if (newProgress >= 100) {\n updatedItem.status = 'completed';\n } else if (newProgress > 0) {\n updatedItem.status = 'in-progress';\n }\n \n const result = await window.dataSdk.update(updatedItem);\n showLoading(false);\n \n if (!result.isOk) {\n showToast('Failed to update progress. Please try again.', 'error');\n }\n }\n\n \/\/ Dashboard update\n function updateDashboard() {\n const projects = allData.filter(d => d.type === 'project');\n const milestones = allData.filter(d => d.type === 'milestone');\n const users = allData.filter(d => d.type === 'user');\n \n \/\/ Stats\n document.getElementById('totalProjects').textContent = projects.length;\n document.getElementById('totalMilestones').textContent = milestones.length;\n document.getElementById('totalMembers').textContent = users.length;\n \n const avgProgress = projects.length > 0 \n ? Math.round(projects.reduce((sum, p) => sum + (p.progress || 0), 0) \/ projects.length)\n : 0;\n document.getElementById('avgProgress').textContent = avgProgress + '%';\n \n \/\/ Status counts\n const completed = projects.filter(p => p.status === 'completed').length;\n const inProgress = projects.filter(p => p.status === 'in-progress').length;\n const pending = projects.filter(p => p.status === 'pending').length;\n \n document.getElementById('completedCount').textContent = completed;\n document.getElementById('inProgressCount').textContent = inProgress;\n document.getElementById('pendingCount').textContent = pending;\n \n \/\/ Progress ring\n const completionRate = projects.length > 0 ? (completed \/ projects.length) * 100 : 0;\n const circumference = 251.2;\n const offset = circumference - (completionRate \/ 100) * circumference;\n document.getElementById('progressRing').style.strokeDashoffset = offset;\n document.getElementById('chartPercent').textContent = Math.round(completionRate) + '%';\n \n \/\/ Recent activity\n updateRecentActivity();\n \n \/\/ Lists\n renderProjects(projects);\n renderMilestones(milestones);\n renderTeam(users);\n }\n\n function updateRecentActivity() {\n const container = document.getElementById('recentActivity');\n const sorted = [...allData]\n .filter(d => ['project', 'milestone', 'user'].includes(d.type))\n .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n .slice(0, 5);\n \n if (sorted.length === 0) {\n container.innerHTML = '<p class=\"text-gray-600 text-sm text-center py-8 font-medium\">No recent activity<\/p>';\n return;\n }\n \n container.innerHTML = sorted.map(item => {\n const icon = item.type === 'project' ? '\ud83d\udccb' : item.type === 'milestone' ? '\ud83c\udfaf' : '\ud83d\udc64';\n const date = new Date(item.createdAt).toLocaleDateString();\n const time = new Date(item.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n return `\n <div class=\"flex items-center gap-4 p-3 rounded-xl bg-purple-50 border border-purple-200\">\n <span class=\"text-2xl\">${icon}<\/span>\n <div class=\"flex-1 min-w-0\">\n <p class=\"font-semibold text-gray-800 truncate\">${item.name}<\/p>\n <p class=\"text-xs text-gray-600 font-medium\">${item.type.charAt(0).toUpperCase() + item.type.slice(1)} \u2022 ${date} ${time}<\/p>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function renderProjects(projects) {\n const container = document.getElementById('projectsList');\n \n if (projects.length === 0) {\n container.innerHTML = '<p class=\"text-gray-600 text-center py-12 font-medium\">No projects yet. Click \"Add Project\" to create one.<\/p>';\n return;\n }\n \n container.innerHTML = projects.map(project => {\n const statusColors = {\n 'pending': 'bg-amber-100 text-amber-800',\n 'in-progress': 'bg-blue-100 text-blue-800',\n 'completed': 'bg-green-100 text-green-800'\n };\n const priorityColors = {\n 'low': 'bg-gray-100 text-gray-800',\n 'medium': 'bg-amber-100 text-amber-800',\n 'high': 'bg-red-100 text-red-800'\n };\n \n return `\n <div class=\"gradient-card-light rounded-2xl p-6 border-2 border-purple-200 bg-white card-hover transition-all\" data-id=\"${project.__backendId}\">\n <div class=\"flex items-start justify-between mb-4\">\n <div class=\"flex-1\">\n <h3 class=\"font-bold text-lg text-purple-dark mb-1\">${project.name}<\/h3>\n <p class=\"text-gray-600 text-sm font-medium\">${project.description || 'No description'}<\/p>\n <\/div>\n <button onclick='requestDelete(${JSON.stringify(project).replace(\/'\/g, \"\\\\'\")})' class=\"admin-only p-2 rounded-lg hover:bg-red-100 text-gray-600 hover:text-red-600 transition-all\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <div class=\"flex items-center gap-3 mb-4\">\n <span class=\"px-3 py-1 rounded-full text-xs font-bold ${statusColors[project.status] || statusColors['pending']}\">${(project.status || 'pending').replace('-', ' ').toUpperCase()}<\/span>\n <span class=\"px-3 py-1 rounded-full text-xs font-bold ${priorityColors[project.priority] || priorityColors['medium']}\">${(project.priority || 'medium').toUpperCase()}<\/span>\n ${project.dueDate ? `<span class=\"text-xs text-gray-600 font-semibold\">Due: ${new Date(project.dueDate).toLocaleDateString()}<\/span>` : ''}\n <\/div>\n <div class=\"space-y-2\">\n <div class=\"flex items-center justify-between text-sm\">\n <span class=\"text-gray-600 font-semibold\">Progress<\/span>\n <span class=\"font-bold text-purple-dark\">${project.progress || 0}%<\/span>\n <\/div>\n <div class=\"relative admin-only\">\n <div class=\"h-2 rounded-full bg-purple-100 overflow-hidden\">\n <div class=\"h-full rounded-full gradient-card transition-all\" style=\"width: ${project.progress || 0}%\"><\/div>\n <\/div>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"${project.progress || 0}\" \n onchange=\"updateProgress(${JSON.stringify(project).replace(\/\"\/g, '"')}, this.value)\"\n class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\">\n <\/div>\n <div class=\"relative ${currentUser && currentUser.role !== 'admin' ? '' : 'hidden'}\">\n <div class=\"h-2 rounded-full bg-purple-100 overflow-hidden\">\n <div class=\"h-full rounded-full gradient-card transition-all\" style=\"width: ${project.progress || 0}%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function renderMilestones(milestones) {\n const container = document.getElementById('milestonesList');\n \n if (milestones.length === 0) {\n container.innerHTML = '<p class=\"text-gray-600 text-center py-12 font-medium\">No milestones yet. Click \"Add Milestone\" to create one.<\/p>';\n return;\n }\n \n container.innerHTML = milestones.map(milestone => {\n const statusColors = {\n 'pending': '#fbbf24',\n 'in-progress': '#60a5fa',\n 'completed': '#10b981'\n };\n const dotColor = statusColors[milestone.status] || statusColors['pending'];\n \n return `\n <div class=\"gradient-card-light rounded-2xl p-6 border-2 border-purple-200 bg-white flex items-center gap-6\" data-id=\"${milestone.__backendId}\">\n <div class=\"flex flex-col items-center gap-2\">\n <div class=\"w-4 h-4 rounded-full border-4\" style=\"border-color: ${dotColor}\"><\/div>\n <div class=\"w-0.5 h-12 bg-purple-200\"><\/div>\n <\/div>\n <div class=\"flex-1\">\n <div class=\"flex items-start justify-between\">\n <div>\n <h3 class=\"font-bold text-lg text-purple-dark\">${milestone.name}<\/h3>\n <p class=\"text-gray-600 text-sm mt-1 font-medium\">${milestone.description || 'No description'}<\/p>\n <p class=\"text-xs text-gray-500 mt-2 font-semibold\">${milestone.dueDate ? `Due: ${new Date(milestone.dueDate).toLocaleDateString()}` : 'No due date'}<\/p>\n <\/div>\n <button onclick='requestDelete(${JSON.stringify(milestone).replace(\/'\/g, \"\\\\'\")})' class=\"admin-only p-2 rounded-lg hover:bg-red-100 text-gray-600 hover:text-red-600 transition-all\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function renderTeam(users) {\n const container = document.getElementById('teamList');\n \n if (users.length === 0) {\n container.innerHTML = '<p class=\"text-gray-600 text-center py-12 col-span-full font-medium\">No team members yet. Click \"Add User\" to add someone.<\/p>';\n return;\n }\n \n container.innerHTML = users.map(user => {\n const roleColors = {\n 'member': 'bg-gray-100 text-gray-800',\n 'lead': 'bg-blue-100 text-blue-800',\n 'manager': 'bg-purple-100 text-purple-800'\n };\n const initials = user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);\n \n return `\n <div class=\"gradient-card-light rounded-2xl p-6 border-2 border-purple-200 bg-white card-hover transition-all\" data-id=\"${user.__backendId}\">\n <div class=\"flex items-start justify-between mb-4\">\n <div class=\"w-14 h-14 rounded-xl gradient-card flex items-center justify-center text-white font-bold text-lg\">\n ${initials}\n <\/div>\n <button onclick='requestDelete(${JSON.stringify(user).replace(\/'\/g, \"\\\\'\")})' class=\"admin-only p-2 rounded-lg hover:bg-red-100 text-gray-600 hover:text-red-600 transition-all\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <h3 class=\"font-bold text-lg text-purple-dark\">${user.name}<\/h3>\n <p class=\"text-gray-600 text-sm mb-3 font-medium\">${user.email}<\/p>\n <span class=\"px-3 py-1 rounded-full text-xs font-bold ${roleColors[user.role] || roleColors['member']}\">${(user.role || 'member').toUpperCase()}<\/span>\n <\/div>\n `;\n }).join('');\n }\n\n \/\/ Toast notification\n function showToast(message, type = 'info') {\n const toast = document.createElement('div');\n const colors = {\n 'success': 'bg-green-600',\n 'error': 'bg-red-600',\n 'info': 'bg-blue-600'\n };\n toast.className = `fixed bottom-6 right-6 px-6 py-4 rounded-xl shadow-lg z-50 ${colors[type]} text-white font-bold animate-in`;\n toast.textContent = message;\n document.body.appendChild(toast);\n \n setTimeout(() => {\n toast.style.opacity = '0';\n toast.style.transform = 'translateY(20px)';\n setTimeout(() => toast.remove(), 300);\n }, 3000);\n }\n\n \/\/ Loading overlay\n function showLoading(show) {\n document.getElementById('loadingOverlay').classList.toggle('hidden', !show);\n }\n\n \/\/ Investor Management Functions\n function openInvestorForm() {\n currentInvestor = null;\n investorReceipts = [];\n \n document.getElementById('investorForm').reset();\n document.getElementById('investorUserId').value = 'MMC001';\n document.getElementById('receiptSection').classList.add('hidden');\n document.getElementById('receiptsList').innerHTML = '';\n \n document.getElementById('investorModal').classList.remove('hidden');\n }\n\n function closeInvestorModal() {\n document.getElementById('investorModal').classList.add('hidden');\n currentInvestor = null;\n investorReceipts = [];\n }\n\n function openInvestorDetails(investor) {\n currentInvestor = investor;\n investorReceipts = investor.receipts || [];\n \n document.getElementById('investorUserId').value = investor.userId || 'MMC001';\n document.getElementById('investorName').value = investor.name || '';\n document.getElementById('investorContact').value = investor.contactNumber || '';\n document.getElementById('investorEmail').value = investor.email || '';\n document.getElementById('investorInvestedAmount').value = investor.investedAmount || '';\n document.getElementById('investorCommittedAmount').value = investor.committedAmount || '';\n document.getElementById('investorDueAmount').value = investor.dueAmount || '';\n \n document.getElementById('receiptSection').classList.remove('hidden');\n renderReceiptsList();\n \n document.getElementById('investorModal').classList.remove('hidden');\n }\n\n document.getElementById('investorForm').addEventListener('submit', async (e) => {\n e.preventDefault();\n \n const investorData = {\n type: 'investor',\n userId: document.getElementById('investorUserId').value,\n name: document.getElementById('investorName').value,\n contactNumber: document.getElementById('investorContact').value,\n email: document.getElementById('investorEmail').value,\n investedAmount: parseFloat(document.getElementById('investorInvestedAmount').value) || 0,\n committedAmount: parseFloat(document.getElementById('investorCommittedAmount').value) || 0,\n dueAmount: parseFloat(document.getElementById('investorDueAmount').value) || 0,\n receipts: investorReceipts,\n sessionId: sessionId,\n createdAt: currentInvestor ? currentInvestor.createdAt : new Date().toISOString()\n };\n \n showLoading(true);\n \n if (currentInvestor) {\n const result = await window.dataSdk.update({\n ...currentInvestor,\n ...investorData\n });\n showLoading(false);\n if (result.isOk) {\n showToast('Investor updated successfully!', 'success');\n closeInvestorModal();\n } else {\n showToast('Failed to update investor. Please try again.', 'error');\n }\n } else {\n const result = await window.dataSdk.create(investorData);\n showLoading(false);\n if (result.isOk) {\n showToast('Investor created successfully!', 'success');\n closeInvestorModal();\n } else {\n showToast('Failed to create investor. Please try again.', 'error');\n }\n }\n });\n\n document.getElementById('receiptForm').addEventListener('submit', (e) => {\n e.preventDefault();\n \n const receipt = {\n date: document.getElementById('receiptDate').value,\n amount: parseFloat(document.getElementById('receiptAmount').value),\n discountedAmount: parseFloat(document.getElementById('discountedAmount').value) || 0\n };\n \n investorReceipts.push(receipt);\n renderReceiptsList();\n document.getElementById('receiptForm').reset();\n showToast('Receipt added successfully!', 'success');\n });\n\n function renderReceiptsList() {\n const container = document.getElementById('receiptsList');\n \n if (investorReceipts.length === 0) {\n container.innerHTML = '<p class=\"text-gray-600 text-sm text-center py-4 font-medium\">No receipts added yet<\/p>';\n return;\n }\n \n container.innerHTML = investorReceipts.map((receipt, index) => `\n <div class=\"gradient-card-light rounded-xl p-4 border-2 border-purple-200 bg-white flex items-center justify-between\">\n <div class=\"flex-1\">\n <p class=\"font-bold text-purple-dark\">Receipt #${index + 1}<\/p>\n <p class=\"text-sm text-gray-600 font-semibold\">Date: ${receipt.date}<\/p>\n <div class=\"flex gap-6 mt-2 text-sm\">\n <div>\n <span class=\"text-gray-600 font-semibold\">Amount: <\/span>\n <span class=\"font-bold text-purple-dark\">\u20b9${receipt.amount.toFixed(2)}<\/span>\n <\/div>\n ${receipt.discountedAmount > 0 ? `<div>\n <span class=\"text-gray-600 font-semibold\">Discount: <\/span>\n <span class=\"font-bold text-green-600\">\u20b9${receipt.discountedAmount.toFixed(2)}<\/span>\n <\/div>` : ''}\n <\/div>\n <\/div>\n <button onclick=\"deleteReceipt(${index})\" class=\"p-2 rounded-lg hover:bg-red-100 text-gray-600 hover:text-red-600 transition-all\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n `).join('');\n }\n\n function deleteReceipt(index) {\n investorReceipts.splice(index, 1);\n renderReceiptsList();\n showToast('Receipt deleted', 'info');\n }\n\n function renderInvestors() {\n const container = document.getElementById('investorsList');\n const investors = allData.filter(d => d.type === 'investor');\n \n if (investors.length === 0) {\n container.innerHTML = '<p class=\"text-gray-600 text-center py-12 font-medium\">No investors yet. Click \"Add Investor\" to create one.<\/p>';\n return;\n }\n \n container.innerHTML = investors.map(investor => {\n const totalInvested = investor.investedAmount || 0;\n const committed = investor.committedAmount || 0;\n const due = investor.dueAmount || 0;\n const receiptsCount = (investor.receipts || []).length;\n \n return `\n <div class=\"gradient-card-light rounded-2xl p-6 border-2 border-purple-200 bg-white card-hover transition-all\">\n <div class=\"flex items-start justify-between mb-4\">\n <div class=\"flex-1\">\n <h3 class=\"font-bold text-lg text-purple-dark mb-1\">${investor.name}<\/h3>\n <p class=\"text-gray-600 text-sm font-medium\">${investor.userId} \u2022 ${investor.email}<\/p>\n <p class=\"text-gray-600 text-sm font-medium\">\ud83d\udcf1 ${investor.contactNumber}<\/p>\n <\/div>\n <button onclick='requestDelete(${JSON.stringify(investor).replace(\/'\/g, \"\\\\'\")})' class=\"p-2 rounded-lg hover:bg-red-100 text-gray-600 hover:text-red-600 transition-all\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n \n <div class=\"grid grid-cols-3 gap-4 mb-4\">\n <div class=\"bg-purple-100 rounded-xl p-3 border border-purple-200\">\n <p class=\"text-xs text-gray-700 mb-1 font-bold\">Invested Amount<\/p>\n <p class=\"font-bold text-purple-dark\">\u20b9${totalInvested.toFixed(2)}<\/p>\n <\/div>\n <div class=\"bg-blue-100 rounded-xl p-3 border border-blue-200\">\n <p class=\"text-xs text-gray-700 mb-1 font-bold\">Committed Amount<\/p>\n <p class=\"font-bold text-blue-700\">\u20b9${committed.toFixed(2)}<\/p>\n <\/div>\n <div class=\"bg-amber-100 rounded-xl p-3 border border-amber-200\">\n <p class=\"text-xs text-gray-700 mb-1 font-bold\">Due Amount<\/p>\n <p class=\"font-bold text-amber-700\">\u20b9${due.toFixed(2)}<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-center justify-between pt-4 border-t-2 border-purple-200\">\n <span class=\"text-xs text-gray-600 font-bold\">\ud83d\udcc4 ${receiptsCount} Receipt(s)<\/span>\n <button onclick='openInvestorDetails(${JSON.stringify(investor).replace(\/\"\/g, '"')})' class=\"px-4 py-2 rounded-lg gradient-button-secondary text-white text-sm font-bold hover:shadow-lg transition-all\">\n View & Manage\n <\/button>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n \/\/ Initialize\n initApp();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9ce6297d50f9b2b1',t:'MTc3MTE3MjczNS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html><\/div>\n\t\t\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>Maribel Wellness Dashboard Maribel Wellness Centre Project Management Dashboard Role InvestorAdministrator Username or Email Password Demo: Use any username and password for admin login Investor ID Sign In to Dashboard…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-45168","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Events Page - maribel.in<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/maribel.in\/?page_id=45168\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Events Page - maribel.in\" \/>\n<meta property=\"og:description\" content=\"Maribel Wellness Dashboard Maribel Wellness Centre Project Management Dashboard Role InvestorAdministrator Username or Email Password Demo: Use any username and password for admin login Investor ID Sign In to Dashboard...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maribel.in\/?page_id=45168\" \/>\n<meta property=\"og:site_name\" content=\"maribel.in\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-16T12:32:07+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/maribel.in\\\/?page_id=45168\",\"url\":\"https:\\\/\\\/maribel.in\\\/?page_id=45168\",\"name\":\"Events Page - maribel.in\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maribel.in\\\/#website\"},\"datePublished\":\"2025-04-29T15:42:23+00:00\",\"dateModified\":\"2026-02-16T12:32:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/maribel.in\\\/?page_id=45168#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/maribel.in\\\/?page_id=45168\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/maribel.in\\\/?page_id=45168#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/maribel.in\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Events Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/maribel.in\\\/#website\",\"url\":\"https:\\\/\\\/maribel.in\\\/\",\"name\":\"Maribel.in\",\"description\":\"A Tropical Sanctuary for Refined Healing & Deep Rejuvenation\",\"publisher\":{\"@id\":\"https:\\\/\\\/maribel.in\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/maribel.in\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/maribel.in\\\/#organization\",\"name\":\"Maribel Wellness Centre\",\"url\":\"https:\\\/\\\/maribel.in\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/maribel.in\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/maribel.in\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Untitled-design-2026-02-12T041818.585.png\",\"contentUrl\":\"https:\\\/\\\/maribel.in\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Untitled-design-2026-02-12T041818.585.png\",\"width\":222,\"height\":45,\"caption\":\"Maribel Wellness Centre\"},\"image\":{\"@id\":\"https:\\\/\\\/maribel.in\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Events Page - maribel.in","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/maribel.in\/?page_id=45168","og_locale":"en_US","og_type":"article","og_title":"Events Page - maribel.in","og_description":"Maribel Wellness Dashboard Maribel Wellness Centre Project Management Dashboard Role InvestorAdministrator Username or Email Password Demo: Use any username and password for admin login Investor ID Sign In to Dashboard...","og_url":"https:\/\/maribel.in\/?page_id=45168","og_site_name":"maribel.in","article_modified_time":"2026-02-16T12:32:07+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/maribel.in\/?page_id=45168","url":"https:\/\/maribel.in\/?page_id=45168","name":"Events Page - maribel.in","isPartOf":{"@id":"https:\/\/maribel.in\/#website"},"datePublished":"2025-04-29T15:42:23+00:00","dateModified":"2026-02-16T12:32:07+00:00","breadcrumb":{"@id":"https:\/\/maribel.in\/?page_id=45168#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maribel.in\/?page_id=45168"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/maribel.in\/?page_id=45168#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/maribel.in\/"},{"@type":"ListItem","position":2,"name":"Events Page"}]},{"@type":"WebSite","@id":"https:\/\/maribel.in\/#website","url":"https:\/\/maribel.in\/","name":"Maribel.in","description":"A Tropical Sanctuary for Refined Healing & Deep Rejuvenation","publisher":{"@id":"https:\/\/maribel.in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/maribel.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/maribel.in\/#organization","name":"Maribel Wellness Centre","url":"https:\/\/maribel.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/maribel.in\/#\/schema\/logo\/image\/","url":"https:\/\/maribel.in\/wp-content\/uploads\/2026\/02\/Untitled-design-2026-02-12T041818.585.png","contentUrl":"https:\/\/maribel.in\/wp-content\/uploads\/2026\/02\/Untitled-design-2026-02-12T041818.585.png","width":222,"height":45,"caption":"Maribel Wellness Centre"},"image":{"@id":"https:\/\/maribel.in\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/maribel.in\/index.php?rest_route=\/wp\/v2\/pages\/45168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maribel.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maribel.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maribel.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maribel.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45168"}],"version-history":[{"count":16,"href":"https:\/\/maribel.in\/index.php?rest_route=\/wp\/v2\/pages\/45168\/revisions"}],"predecessor-version":[{"id":47069,"href":"https:\/\/maribel.in\/index.php?rest_route=\/wp\/v2\/pages\/45168\/revisions\/47069"}],"wp:attachment":[{"href":"https:\/\/maribel.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}