From 15660161a7808c5bc153d7cd82367790418c1fba Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sun, 16 Feb 2025 17:02:46 -0800
Subject: [PATCH] update imports

---
 src/components/dashboard/EventsSection.astro  |   8 +-
 .../dashboard/Officer_EventManagement.astro   |  10 +-
 src/pages/dashboard.astro                     | 792 +++++++++---------
 3 files changed, 417 insertions(+), 393 deletions(-)
diff --git a/src/components/dashboard/EventsSection.astro b/src/components/dashboard/EventsSection.astro
index a33b652..49bb506 100644
--- a/src/components/dashboard/EventsSection.astro
+++ b/src/components/dashboard/EventsSection.astro
@@ -221,10 +221,10 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
 </dialog>
 
 <script>
-    import { Get } from "../pocketbase/Get";
-    import { Authentication } from "../pocketbase/Authentication";
-    import { Update } from "../pocketbase/Update";
-    import { SendLog } from "../pocketbase/SendLog";
+    import { Get } from "../../scripts/pocketbase/Get";
+    import { Authentication } from "../../scripts/pocketbase/Authentication";
+    import { Update } from "../../scripts/pocketbase/Update";
+    import { SendLog } from "../../scripts/pocketbase/SendLog";
     import JSZip from "jszip";
 
     // Toast management system
diff --git a/src/components/dashboard/Officer_EventManagement.astro b/src/components/dashboard/Officer_EventManagement.astro
index b9726e7..ac6da17 100644
--- a/src/components/dashboard/Officer_EventManagement.astro
+++ b/src/components/dashboard/Officer_EventManagement.astro
@@ -723,11 +723,11 @@ const currentPage = eventResponse.page;
 </dialog>
 
 <script>
-    import { Get } from "../pocketbase/Get";
-    import { Authentication } from "../pocketbase/Authentication";
-    import { Update } from "../pocketbase/Update";
-    import { FileManager } from "../pocketbase/FileManager";
-    import { SendLog } from "../pocketbase/SendLog";
+    import { Get } from "../../scripts/pocketbase/Get";
+    import { Authentication } from "../../scripts/pocketbase/Authentication";
+    import { Update } from "../../scripts/pocketbase/Update";
+    import { FileManager } from "../../scripts/pocketbase/FileManager";
+    import { SendLog } from "../../scripts/pocketbase/SendLog";
     import FilePreview from "./Officer_EventManagement/FilePreview";
 
     // Add file storage
diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro
index 0dbd550..16ab3b0 100644
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
@@ -11,398 +11,422 @@ const title = "Dashboard";
 
 <!doctype html>
 <html lang="en" data-theme="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{title} | IEEE UCSD</title>
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-  </head>
-  <body class="bg-base-200">
-    <div class="flex h-screen">
-      <!-- Sidebar -->
-      <aside
-        class="bg-base-100 w-80 flex flex-col shadow-xl border-r border-base-200 transition-all duration-300"
-      >
-        <!-- Logo -->
-        <div class="p-6 border-b border-base-200">
-          <div class="flex items-center justify-center">
-            <span
-              class="text-4xl font-bold text-[#06659d] select-none tracking-wide"
-              >IEEEUCSD</span
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title} | IEEE UCSD</title>
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    </head>
+    <body class="bg-base-200">
+        <div class="flex h-screen">
+            <!-- Sidebar -->
+            <aside
+                class="bg-base-100 w-80 flex flex-col shadow-xl border-r border-base-200 transition-all duration-300"
             >
-          </div>
-        </div>
-
-        <!-- User Profile -->
-        <div class="p-6 border-b border-base-200">
-          <div class="flex items-center gap-4" id="userProfileSummary">
-            <div class="avatar flex items-center justify-center">
-              <div
-                class="w-12 h-12 rounded-xl bg-[#06659d] text-white ring ring-base-200 ring-offset-base-100 ring-offset-2 inline-flex items-center justify-center"
-              >
-                <span
-                  class="text-xl font-semibold select-none inline-flex items-center justify-center w-full h-full"
-                  id="userInitials">?</span
-                >
-              </div>
-            </div>
-            <div>
-              <h3 class="font-medium text-lg" id="userName">Loading...</h3>
-              <div
-                class="badge badge-outline mt-1 border-[#06659d] text-[#06659d]"
-                id="userRole"
-              >
-                Member
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Navigation -->
-        <nav class="flex-1 overflow-y-auto scrollbar-hide py-6">
-          <ul class="menu gap-2 px-4 text-base-content/80">
-            <!-- All Members -->
-            <li class="menu-title font-medium opacity-70">
-              <span>Main Menu</span>
-            </li>
-            <li>
-              <button
-                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 active:bg-base-200 active:font-medium active:text-primary"
-                data-section="profile"
-              >
-                <Icon
-                  name="heroicons:home"
-                  class="h-5 w-5 group-[.active]:text-primary"
-                />
-                Dashboard
-              </button>
-            </li>
-            <li>
-              <button
-                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
-                data-section="events"
-              >
-                <Icon name="heroicons:calendar" class="h-5 w-5" />
-                Events
-              </button>
-            </li>
-            <li>
-              <button
-                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
-                data-section="reimbursement"
-              >
-                <Icon name="heroicons:credit-card" class="h-5 w-5" />
-                Reimbursement
-              </button>
-            </li>
-            <!-- Officers Only -->
-            <li>
-              <button
-                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 active:bg-base-200 active:font-medium active:text-primary"
-                data-section="eventManagement"
-              >
-                <Icon
-                  name="heroicons:home"
-                  class="h-5 w-5 group-[.active]:text-primary"
-                />
-                Event Management
-              </button>
-            </li>
-
-            <li class="menu-title mt-6 font-medium opacity-70">
-              <span>Account</span>
-            </li>
-            <li>
-              <button
-                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
-                data-section="settings"
-              >
-                <Icon name="heroicons:cog-6-tooth" class="h-5 w-5" />
-                Settings
-              </button>
-            </li>
-            <li>
-              <button
-                id="logoutButton"
-                class="gap-4 text-error hover:bg-error/10 transition-all duration-200 outline-none focus:outline-none"
-              >
-                <Icon
-                  name="heroicons:arrow-right-on-rectangle"
-                  class="h-5 w-5"
-                />
-                Logout
-              </button>
-            </li>
-          </ul>
-        </nav>
-      </aside>
-
-      <!-- Main Content -->
-      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-base-200">
-        <!-- Mobile Header -->
-        <header class="bg-base-100 p-4 shadow-md lg:hidden">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2">
-              <button id="mobileSidebarToggle" class="btn btn-square btn-ghost">
-                <Icon name="heroicons:bars-3" class="h-6 w-6" />
-              </button>
-              <h1 class="text-xl font-bold">IEEE UCSD</h1>
-            </div>
-          </div>
-        </header>
-
-        <!-- Page Content -->
-        <div class="p-6 max-w-[1600px] mx-auto">
-          <!-- Loading State -->
-          <div id="pageLoadingState" class="w-full">
-            <div class="flex flex-col items-center justify-center p-8">
-              <div class="loading loading-spinner loading-lg"></div>
-              <p class="mt-4 opacity-70">Loading dashboard...</p>
-            </div>
-          </div>
-
-          <!-- Error State -->
-          <div id="pageErrorState" class="hidden w-full">
-            <div class="alert alert-error">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                  clip-rule="evenodd"></path>
-              </svg>
-              <span>Failed to load dashboard content</span>
-            </div>
-          </div>
-
-          <!-- Not Authenticated State -->
-          <div id="notAuthenticatedState" class="hidden w-full">
-            <div class="card bg-base-100 shadow-xl">
-              <div class="card-body items-center text-center">
-                <div class="mb-6">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-16 w-16 opacity-30"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                      clip-rule="evenodd"></path>
-                  </svg>
+                <!-- Logo -->
+                <div class="p-6 border-b border-base-200">
+                    <div class="flex items-center justify-center">
+                        <span
+                            class="text-4xl font-bold text-[#06659d] select-none tracking-wide"
+                            >IEEEUCSD</span
+                        >
+                    </div>
                 </div>
-                <h2 class="card-title text-2xl mb-2">
-                  Sign in to Access Dashboard
-                </h2>
-                <p class="opacity-70 mb-6">
-                  Please sign in with your IEEE UCSD account to access the
-                  dashboard.
-                </p>
-                <button class="login-button btn btn-primary btn-lg gap-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
-                      clip-rule="evenodd"></path>
-                  </svg>
-                  Sign in with IEEEUCSD SSO
-                </button>
-              </div>
-            </div>
-          </div>
 
-          <!-- Main Content -->
-          <div id="mainContent" class="hidden">
-            <ProfileSection />
-            <EventsSection />
-            <ReimbursementSection />
-            <SettingsSection />
-            <Officer_EventManagement />
-          </div>
+                <!-- User Profile -->
+                <div class="p-6 border-b border-base-200">
+                    <div
+                        class="flex items-center gap-4"
+                        id="userProfileSummary"
+                    >
+                        <div class="avatar flex items-center justify-center">
+                            <div
+                                class="w-12 h-12 rounded-xl bg-[#06659d] text-white ring ring-base-200 ring-offset-base-100 ring-offset-2 inline-flex items-center justify-center"
+                            >
+                                <span
+                                    class="text-xl font-semibold select-none inline-flex items-center justify-center w-full h-full"
+                                    id="userInitials">?</span
+                                >
+                            </div>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-lg" id="userName">
+                                Loading...
+                            </h3>
+                            <div
+                                class="badge badge-outline mt-1 border-[#06659d] text-[#06659d]"
+                                id="userRole"
+                            >
+                                Member
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Navigation -->
+                <nav class="flex-1 overflow-y-auto scrollbar-hide py-6">
+                    <ul class="menu gap-2 px-4 text-base-content/80">
+                        <!-- All Members -->
+                        <li class="menu-title font-medium opacity-70">
+                            <span>Main Menu</span>
+                        </li>
+                        <li>
+                            <button
+                                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 active:bg-base-200 active:font-medium active:text-primary"
+                                data-section="profile"
+                            >
+                                <Icon
+                                    name="heroicons:home"
+                                    class="h-5 w-5 group-[.active]:text-primary"
+                                />
+                                Dashboard
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
+                                data-section="events"
+                            >
+                                <Icon
+                                    name="heroicons:calendar"
+                                    class="h-5 w-5"
+                                />
+                                Events
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
+                                data-section="reimbursement"
+                            >
+                                <Icon
+                                    name="heroicons:credit-card"
+                                    class="h-5 w-5"
+                                />
+                                Reimbursement
+                            </button>
+                        </li>
+                        <!-- Officers Only -->
+                        <li>
+                            <button
+                                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 active:bg-base-200 active:font-medium active:text-primary"
+                                data-section="eventManagement"
+                            >
+                                <Icon
+                                    name="heroicons:home"
+                                    class="h-5 w-5 group-[.active]:text-primary"
+                                />
+                                Event Management
+                            </button>
+                        </li>
+
+                        <li class="menu-title mt-6 font-medium opacity-70">
+                            <span>Account</span>
+                        </li>
+                        <li>
+                            <button
+                                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
+                                data-section="settings"
+                            >
+                                <Icon
+                                    name="heroicons:cog-6-tooth"
+                                    class="h-5 w-5"
+                                />
+                                Settings
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                id="logoutButton"
+                                class="gap-4 text-error hover:bg-error/10 transition-all duration-200 outline-none focus:outline-none"
+                            >
+                                <Icon
+                                    name="heroicons:arrow-right-on-rectangle"
+                                    class="h-5 w-5"
+                                />
+                                Logout
+                            </button>
+                        </li>
+                    </ul>
+                </nav>
+            </aside>
+
+            <!-- Main Content -->
+            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-base-200">
+                <!-- Mobile Header -->
+                <header class="bg-base-100 p-4 shadow-md lg:hidden">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center gap-2">
+                            <button
+                                id="mobileSidebarToggle"
+                                class="btn btn-square btn-ghost"
+                            >
+                                <Icon name="heroicons:bars-3" class="h-6 w-6" />
+                            </button>
+                            <h1 class="text-xl font-bold">IEEE UCSD</h1>
+                        </div>
+                    </div>
+                </header>
+
+                <!-- Page Content -->
+                <div class="p-6 max-w-[1600px] mx-auto">
+                    <!-- Loading State -->
+                    <div id="pageLoadingState" class="w-full">
+                        <div
+                            class="flex flex-col items-center justify-center p-8"
+                        >
+                            <div class="loading loading-spinner loading-lg">
+                            </div>
+                            <p class="mt-4 opacity-70">Loading dashboard...</p>
+                        </div>
+                    </div>
+
+                    <!-- Error State -->
+                    <div id="pageErrorState" class="hidden w-full">
+                        <div class="alert alert-error">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-6 w-6"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                                    clip-rule="evenodd"></path>
+                            </svg>
+                            <span>Failed to load dashboard content</span>
+                        </div>
+                    </div>
+
+                    <!-- Not Authenticated State -->
+                    <div id="notAuthenticatedState" class="hidden w-full">
+                        <div class="card bg-base-100 shadow-xl">
+                            <div class="card-body items-center text-center">
+                                <div class="mb-6">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        class="h-16 w-16 opacity-30"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                    >
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                                            clip-rule="evenodd"></path>
+                                    </svg>
+                                </div>
+                                <h2 class="card-title text-2xl mb-2">
+                                    Sign in to Access Dashboard
+                                </h2>
+                                <p class="opacity-70 mb-6">
+                                    Please sign in with your IEEE UCSD account
+                                    to access the dashboard.
+                                </p>
+                                <button
+                                    class="login-button btn btn-primary btn-lg gap-2"
+                                >
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        class="h-5 w-5"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                    >
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
+                                            clip-rule="evenodd"></path>
+                                    </svg>
+                                    Sign in with IEEEUCSD SSO
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Main Content -->
+                    <div id="mainContent" class="hidden">
+                        <ProfileSection />
+                        <EventsSection />
+                        <ReimbursementSection />
+                        <SettingsSection />
+                        <Officer_EventManagement />
+                    </div>
+                </div>
+            </main>
         </div>
-      </main>
-    </div>
-  </body>
+    </body>
 </html>
 
 <script>
-  import { Authentication } from "../components/pocketbase/Authentication";
-  import { Get } from "../components/pocketbase/Get";
-  import { SendLog } from "../components/pocketbase/SendLog";
+    import { Authentication } from "../scripts/pocketbase/Authentication";
+    import { Get } from "../scripts/pocketbase/Get";
+    import { SendLog } from "../scripts/pocketbase/SendLog";
 
-  const auth = Authentication.getInstance();
-  const get = Get.getInstance();
-  const logger = SendLog.getInstance();
+    const auth = Authentication.getInstance();
+    const get = Get.getInstance();
+    const logger = SendLog.getInstance();
 
-  // Initialize page state
-  const pageLoadingState = document.getElementById("pageLoadingState");
-  const pageErrorState = document.getElementById("pageErrorState");
-  const notAuthenticatedState = document.getElementById(
-    "notAuthenticatedState",
-  );
-  const mainContent = document.getElementById("mainContent");
-  const sidebar = document.querySelector("aside");
-
-  // User profile elements
-  const userInitials = document.getElementById("userInitials");
-  const userName = document.getElementById("userName");
-  const userRole = document.getElementById("userRole");
-
-  // Display user profile information
-  const updateUserProfile = async (user: any) => {
-    if (!user) return;
-
-    try {
-      // Get user information including member type
-      const extendedUser = await get.getOne("users", user.id, {
-        fields: ["id", "name", "member_type", "expand.member_type"],
-      });
-
-      // Update display elements
-      if (userName) {
-        userName.textContent = extendedUser.name || "Unknown User";
-      }
-
-      if (userRole) {
-        userRole.textContent = extendedUser.member_type || "Member";
-      }
-
-      if (userInitials) {
-        const initials = (extendedUser.name || "U")
-          .split(" ")
-          .map((n: string) => n[0])
-          .join("")
-          .toUpperCase();
-        userInitials.textContent = initials;
-      }
-    } catch (error) {
-      console.error("Error fetching user profile:", error);
-      if (userName) userName.textContent = "Unknown User";
-      if (userRole) userRole.textContent = "Member";
-      if (userInitials) userInitials.textContent = "?";
-    }
-  };
-
-  // Mobile sidebar toggle
-  const mobileSidebarToggle = document.getElementById("mobileSidebarToggle");
-  if (mobileSidebarToggle && sidebar) {
-    mobileSidebarToggle.addEventListener("click", () => {
-      sidebar.classList.toggle("-translate-x-full");
-    });
-  }
-
-  // Handle navigation
-  const handleNavigation = () => {
-    const navButtons = document.querySelectorAll(".dashboard-nav-btn");
-    const sections = document.querySelectorAll(".dashboard-section");
-
-    navButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        // Remove active class from all buttons
-        navButtons.forEach((btn) =>
-          btn.classList.remove("active", "bg-base-200"),
-        );
-        // Add active class to clicked button
-        button.classList.add("active", "bg-base-200");
-
-        // Hide all sections
-        sections.forEach((section) => section.classList.add("hidden"));
-        // Show selected section
-        const sectionId = `${button.getAttribute("data-section")}Section`;
-        document.getElementById(sectionId)?.classList.remove("hidden");
-
-        // Close sidebar on mobile after selection
-        if (window.innerWidth < 1024 && sidebar) {
-          sidebar.classList.add("-translate-x-full");
-        }
-      });
-    });
-  };
-
-  // Initialize page
-  const initializePage = async () => {
-    try {
-      if (pageLoadingState) pageLoadingState.classList.remove("hidden");
-      if (pageErrorState) pageErrorState.classList.add("hidden");
-      if (notAuthenticatedState) notAuthenticatedState.classList.add("hidden");
-      if (mainContent) mainContent.classList.add("hidden");
-
-      // Check authentication
-      if (!auth.isAuthenticated()) {
-        if (pageLoadingState) pageLoadingState.classList.add("hidden");
-        if (notAuthenticatedState)
-          notAuthenticatedState.classList.remove("hidden");
-        return;
-      }
-
-      const user = auth.getCurrentUser();
-      await updateUserProfile(user);
-
-      // Initialize navigation
-      handleNavigation();
-
-      // Show main content
-      if (mainContent) mainContent.classList.remove("hidden");
-      if (pageLoadingState) pageLoadingState.classList.add("hidden");
-    } catch (error) {
-      console.error("Error initializing dashboard:", error);
-      if (pageLoadingState) pageLoadingState.classList.add("hidden");
-      if (pageErrorState) pageErrorState.classList.remove("hidden");
-    }
-  };
-
-  // Initialize when DOM is loaded
-  document.addEventListener("DOMContentLoaded", initializePage);
-
-  // Handle login button click
-  document
-    .querySelector(".login-button")
-    ?.addEventListener("click", async () => {
-      try {
-        if (pageLoadingState) pageLoadingState.classList.remove("hidden");
-        if (notAuthenticatedState)
-          notAuthenticatedState.classList.add("hidden");
-        await auth.login();
-      } catch (error) {
-        console.error("Login error:", error);
-        if (pageLoadingState) pageLoadingState.classList.add("hidden");
-        if (pageErrorState) pageErrorState.classList.remove("hidden");
-      }
-    });
-
-  // Handle logout button click
-  document.getElementById("logoutButton")?.addEventListener("click", () => {
-    auth.logout();
-    window.location.reload();
-  });
-
-  // Handle responsive sidebar
-  if (sidebar) {
-    // Hide sidebar by default on mobile
-    if (window.innerWidth < 1024) {
-      sidebar.classList.add("-translate-x-full");
-    }
-
-    // Add transition class
-    sidebar.classList.add(
-      "transition-transform",
-      "duration-300",
-      "ease-in-out",
-      "lg:translate-x-0",
-      "fixed",
-      "lg:relative",
-      "h-full",
-      "z-50",
+    // Initialize page state
+    const pageLoadingState = document.getElementById("pageLoadingState");
+    const pageErrorState = document.getElementById("pageErrorState");
+    const notAuthenticatedState = document.getElementById(
+        "notAuthenticatedState"
     );
-  }
+    const mainContent = document.getElementById("mainContent");
+    const sidebar = document.querySelector("aside");
+
+    // User profile elements
+    const userInitials = document.getElementById("userInitials");
+    const userName = document.getElementById("userName");
+    const userRole = document.getElementById("userRole");
+
+    // Display user profile information
+    const updateUserProfile = async (user: any) => {
+        if (!user) return;
+
+        try {
+            // Get user information including member type
+            const extendedUser = await get.getOne("users", user.id, {
+                fields: ["id", "name", "member_type", "expand.member_type"],
+            });
+
+            // Update display elements
+            if (userName) {
+                userName.textContent = extendedUser.name || "Unknown User";
+            }
+
+            if (userRole) {
+                userRole.textContent = extendedUser.member_type || "Member";
+            }
+
+            if (userInitials) {
+                const initials = (extendedUser.name || "U")
+                    .split(" ")
+                    .map((n: string) => n[0])
+                    .join("")
+                    .toUpperCase();
+                userInitials.textContent = initials;
+            }
+        } catch (error) {
+            console.error("Error fetching user profile:", error);
+            if (userName) userName.textContent = "Unknown User";
+            if (userRole) userRole.textContent = "Member";
+            if (userInitials) userInitials.textContent = "?";
+        }
+    };
+
+    // Mobile sidebar toggle
+    const mobileSidebarToggle = document.getElementById("mobileSidebarToggle");
+    if (mobileSidebarToggle && sidebar) {
+        mobileSidebarToggle.addEventListener("click", () => {
+            sidebar.classList.toggle("-translate-x-full");
+        });
+    }
+
+    // Handle navigation
+    const handleNavigation = () => {
+        const navButtons = document.querySelectorAll(".dashboard-nav-btn");
+        const sections = document.querySelectorAll(".dashboard-section");
+
+        navButtons.forEach((button) => {
+            button.addEventListener("click", () => {
+                // Remove active class from all buttons
+                navButtons.forEach((btn) =>
+                    btn.classList.remove("active", "bg-base-200")
+                );
+                // Add active class to clicked button
+                button.classList.add("active", "bg-base-200");
+
+                // Hide all sections
+                sections.forEach((section) => section.classList.add("hidden"));
+                // Show selected section
+                const sectionId = `${button.getAttribute("data-section")}Section`;
+                document.getElementById(sectionId)?.classList.remove("hidden");
+
+                // Close sidebar on mobile after selection
+                if (window.innerWidth < 1024 && sidebar) {
+                    sidebar.classList.add("-translate-x-full");
+                }
+            });
+        });
+    };
+
+    // Initialize page
+    const initializePage = async () => {
+        try {
+            if (pageLoadingState) pageLoadingState.classList.remove("hidden");
+            if (pageErrorState) pageErrorState.classList.add("hidden");
+            if (notAuthenticatedState)
+                notAuthenticatedState.classList.add("hidden");
+            if (mainContent) mainContent.classList.add("hidden");
+
+            // Check authentication
+            if (!auth.isAuthenticated()) {
+                if (pageLoadingState) pageLoadingState.classList.add("hidden");
+                if (notAuthenticatedState)
+                    notAuthenticatedState.classList.remove("hidden");
+                return;
+            }
+
+            const user = auth.getCurrentUser();
+            await updateUserProfile(user);
+
+            // Initialize navigation
+            handleNavigation();
+
+            // Show main content
+            if (mainContent) mainContent.classList.remove("hidden");
+            if (pageLoadingState) pageLoadingState.classList.add("hidden");
+        } catch (error) {
+            console.error("Error initializing dashboard:", error);
+            if (pageLoadingState) pageLoadingState.classList.add("hidden");
+            if (pageErrorState) pageErrorState.classList.remove("hidden");
+        }
+    };
+
+    // Initialize when DOM is loaded
+    document.addEventListener("DOMContentLoaded", initializePage);
+
+    // Handle login button click
+    document
+        .querySelector(".login-button")
+        ?.addEventListener("click", async () => {
+            try {
+                if (pageLoadingState)
+                    pageLoadingState.classList.remove("hidden");
+                if (notAuthenticatedState)
+                    notAuthenticatedState.classList.add("hidden");
+                await auth.login();
+            } catch (error) {
+                console.error("Login error:", error);
+                if (pageLoadingState) pageLoadingState.classList.add("hidden");
+                if (pageErrorState) pageErrorState.classList.remove("hidden");
+            }
+        });
+
+    // Handle logout button click
+    document.getElementById("logoutButton")?.addEventListener("click", () => {
+        auth.logout();
+        window.location.reload();
+    });
+
+    // Handle responsive sidebar
+    if (sidebar) {
+        // Hide sidebar by default on mobile
+        if (window.innerWidth < 1024) {
+            sidebar.classList.add("-translate-x-full");
+        }
+
+        // Add transition class
+        sidebar.classList.add(
+            "transition-transform",
+            "duration-300",
+            "ease-in-out",
+            "lg:translate-x-0",
+            "fixed",
+            "lg:relative",
+            "h-full",
+            "z-50"
+        );
+    }
 </script>
