Update Dockerfile

This reverts commit 16ecd96ec6.

.cursorignore

@@ -0,0 +1 @@
+# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)

.gitignore

@@ -5,6 +5,8 @@ dist/
 .astro/
 .cursor
 
+final_review_gate.py
+
 # dependencies
 node_modules/
 

Dockerfile

@@ -0,0 +1,55 @@
+# Use the official Bun image
+FROM oven/bun:1.1
+
+# Install dependencies for Puppeteer and Chrome/Chromium
+RUN apt-get update && \
+    apt-get install -y \
+    wget \
+    ca-certificates \
+    fonts-liberation \
+    libasound2 \
+    libatk-bridge2.0-0 \
+    libatk1.0-0 \
+    libcups2 \
+    libdbus-1-3 \
+    libdrm2 \
+    libgbm1 \
+    libgtk-3-0 \
+    libnspr4 \
+    libnss3 \
+    libx11-xcb1 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxrandr2 \
+    xdg-utils \
+    chromium \
+    gnupg \
+    --no-install-recommends && \
+    # Install Google Chrome stable
+    wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | apt-key add - && \
+    echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list && \
+    apt-get update && \
+    apt-get install -y google-chrome-stable && \
+    rm -rf /var/lib/apt/lists/*
+
+# Set Puppeteer executable path (prefer google-chrome-stable, fallback to chromium)
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome-stable
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY bun.lock package.json ./
+RUN bun install
+
+# Copy the rest of your app
+COPY . .
+
+# Build the application
+RUN bun run build
+
+# Expose the port your app runs on (change if needed)
+EXPOSE 4321
+
+# Start the server
+CMD ["bun", "run", "start"]

astro.config.mjs

@@ -15,9 +15,29 @@ import icon from "astro-icon";
 
 // https://astro.build/config
 export default defineConfig({
+  output: "server",
   integrations: [tailwind(), expressiveCode(), react(), icon(), mdx()],
 
   adapter: node({
     mode: "standalone",
   }),
+
+  // Define environment variables that should be available to client components
+  vite: {
+    define: {
+      "import.meta.env.LOGTO_APP_ID": JSON.stringify(process.env.LOGTO_APP_ID),
+      "import.meta.env.LOGTO_APP_SECRET": JSON.stringify(
+        process.env.LOGTO_APP_SECRET,
+      ),
+      "import.meta.env.LOGTO_ENDPOINT": JSON.stringify(
+        process.env.LOGTO_ENDPOINT,
+      ),
+      "import.meta.env.LOGTO_TOKEN_ENDPOINT": JSON.stringify(
+        process.env.LOGTO_TOKEN_ENDPOINT,
+      ),
+      "import.meta.env.LOGTO_API_ENDPOINT": JSON.stringify(
+        process.env.LOGTO_API_ENDPOINT,
+      ),
+    },
+  },
 });

docker-compose.yml

@@ -0,0 +1,12 @@
+version: "3.8"
+
+services:
+  web:
+    build: .
+    ports:
+      - "4321:4321"
+    environment:
+      - NODE_ENV=production
+      - PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome-stable
+      - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+      - PUPPETEER_DISABLE_SANDBOX=true

nixpacks.toml

@@ -1,4 +1,4 @@
 [phases.setup]
-nixPkgs = ["nodejs_18", "bun"]
+nixPkgs = ["nodejs_20", "bun"]
 aptPkgs = ["curl", "wget"]
 

package.json

@@ -2,6 +2,9 @@
   "name": "ieeeucsd-dev",
   "type": "module",
   "version": "0.0.1",
+  "engines": {
+    "node": ">=18.20.8"
+  },
   "scripts": {
     "dev": "astro dev",
     "start": "node ./dist/server/entry.mjs",
@@ -10,23 +13,27 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "4.0.3",
-    "@astrojs/node": "^9.0.0",
-    "@astrojs/react": "^4.2.0",
-    "@astrojs/tailwind": "5.1.4",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.2.3",
+    "@astrojs/node": "^9.1.3",
+    "@astrojs/react": "^4.2.3",
+    "@astrojs/tailwind": "^6.0.2",
+    "@heroui/react": "^2.7.5",
     "@iconify-json/heroicons": "^1.2.2",
+    "@iconify-json/mdi": "^1.2.3",
     "@iconify/react": "^5.2.0",
     "@types/highlight.js": "^10.1.0",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.15",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "astro": "5.1.1",
+    "@types/puppeteer": "^7.0.4",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "astro": "^5.5.6",
     "astro-expressive-code": "^0.40.2",
     "astro-icon": "^1.1.5",
     "chart.js": "^4.4.7",
     "dexie": "^4.0.11",
-    "framer-motion": "^12.4.4",
+    "framer-motion": "^12.6.2",
     "highlight.js": "^11.11.1",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
@@ -35,13 +42,16 @@
     "next": "^15.1.2",
     "pocketbase": "^0.25.1",
     "prismjs": "^1.29.0",
-    "react": "^19.0.0",
+    "puppeteer": "^24.10.1",
+    "react": "^19.1.0",
     "react-chartjs-2": "^5.3.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.4.0",
     "rehype-expressive-code": "^0.40.2",
-    "tailwindcss": "^3.4.16"
+    "resend": "^4.5.1",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
     "@types/prismjs": "^1.26.5",

src/components/board/Officer.astro

@@ -41,7 +41,7 @@ const { name, position, picture, email } = Astro.props;
         >
             <p
                 data-inview
-                class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
+                class="opacity-0 in-view:animate-fade-right md:text-[1.8vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] md:w-[10vw]"
             >
                 {name}
             </p>

src/components/core/About.astro

@@ -1,17 +1,19 @@
 ---
 import { LiaDotCircle } from "react-icons/lia";
-const {title, text} = Astro.props;
+const { title, text } = Astro.props;
 ---
 
 <div class="flex flex-col items-center text-white my-[10%]">
-    <div class="flex items-center text-[2.5vw] mb-[3%]">
-        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-        <p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black">
-            {title}
-        </p>
-    </div>
-
-    <p class="w-[70%] text-[1.4vw] font-light ">
-        {text}
+  <div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
+    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+    <p
+      class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black"
+    >
+      {title}
     </p>
-</div>
+  </div>
+
+  <p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light">
+    {text}
+  </p>
+</div>

src/components/core/InView.astro

@@ -1,16 +1,22 @@
 <script>
-    const observer = new IntersectionObserver((entries) => {
+  const observer = new IntersectionObserver(
+    (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           entry.target.classList.add("in-view");
-          console.log("Added 'in-view' class to:", entry.target);
+          entry.target.classList.remove("opacity-0");
+          // console.log("Added 'in-view' class to:", entry.target);
         } else {
           entry.target.classList.remove("in-view");
-          console.log("Removed 'in-view' class from:", entry.target);
+          entry.target.classList.add("opacity-0");
+          // console.log("Removed 'in-view' class from:", entry.target);
         }
       });
-    }, { threshold: 0.2 });
-  
-    document.querySelectorAll("[data-inview]").forEach((el) => observer.observe(el));
-  </script>
-  
+    },
+    { threshold: 0.2 },
+  );
+
+  document
+    .querySelectorAll("[data-inview]")
+    .forEach((el) => observer.observe(el));
+</script>

src/components/core/Navbar.astro

@@ -6,7 +6,7 @@ import pages from "../../data/pages.json";
 
 <div class="w-full">
   <div
-    class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]"
+    class="flex justify-between items-center bg-ieee-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] rounded-full md:border-[0.1vw]"
   >
     <a href="/" class="hover:opacity-60 duration-300">
       <Image
@@ -24,19 +24,42 @@ import pages from "../../data/pages.json";
     <!-- Desktop Navigation -->
     <div class="hidden md:flex md:w-[55%] md:justify-between">
       {
-        pages.map((page) => (
-          <a
-            href={page.path}
-            class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
-                            ${
-                              page.name === "Dashboard"
-                                ? "bg-ieee-yellow text-black hover:opacity-70"
-                                : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
-                            }`}
-          >
-            {page.name}
-          </a>
-        ))
+        pages.map((page) =>
+          page.subpages ? (
+            <div class="relative group">
+              <a
+                href={page.path}
+                class="uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap text-white border-white hover:opacity-50 border-[0.1vw] font-light inline-block"
+              >
+                {page.name}
+              </a>
+              <div class="absolute left-1/2 transform -translate-x-1/2 w-[12vw] top-full z-50">
+                <div class="rounded-lg bg-ieee-black border border-white shadow-lg hidden group-hover:block animate-fade-down animate-duration-200 animate-ease-in-out">
+                  {page.subpages.map((subpage) => (
+                    <a
+                      href={subpage.path}
+                      class="font-light py-[4%] block text-white hover:bg-gray-700 text-[1.3vw] first:rounded-t-lg last:rounded-b-lg text-center whitespace-nowrap transition-colors duration-200"
+                    >
+                      {subpage.name}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <a
+              href={page.path}
+              class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
+                              ${
+                                page.name === "Dashboard"
+                                  ? "bg-ieee-yellow text-black hover:opacity-70"
+                                  : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
+                              }`}
+            >
+              {page.name}
+            </a>
+          ),
+        )
       }
     </div>
 
@@ -78,25 +101,66 @@ import pages from "../../data/pages.json";
   <!-- Mobile Menu -->
   <div
     id="mobile-menu"
-    class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
+    class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full bg-black"
   >
     <div
-      class="flex flex-col items-center min-h-screen justify-center bg-black py-20 px-4 space-y-8"
+      class="flex flex-col items-center min-h-screen w-full justify-center py-20 px-4 space-y-6 overflow-y-auto"
     >
       {
-        pages.map((page) => (
-          <a
-            href={page.path}
-            class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
-                            ${
-                              page.name === "Online Store"
-                                ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
-                                : "text-white hover:text-gray-300 border-white border-2"
-                            }`}
-          >
-            {page.name}
-          </a>
-        ))
+        pages.map((page) =>
+          page.subpages ? (
+            <div class="w-full max-w-md space-y-4 relative dropdown-container">
+              <div class="flex gap-2">
+                <a
+                  href={page.path}
+                  class="flex-1 block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl text-white hover:text-gray-300 border-white border-2"
+                >
+                  {page.name}
+                </a>
+                <button
+                  class="mobile-dropdown-toggle py-4 px-6 text-center rounded-[3rem] motion-safe:transition-all motion-safe:duration-200 uppercase font-bold text-2xl text-white hover:text-gray-300 border-white border-2 flex items-center justify-center"
+                  aria-expanded="false"
+                >
+                  <svg
+                    class="w-6 h-6 transform transition-transform duration-200 dropdown-icon"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <div class="mobile-dropdown-content mt-2 space-y-2 pl-4 absolute w-full animate-duration-200 animate-ease-in-out">
+                {page.subpages.map((subpage) => (
+                  <a
+                    href={subpage.path}
+                    class="block py-3 px-8 text-center rounded-[2rem] motion-safe:transition-all motion-safe:duration-200 uppercase font-medium text-lg w-full text-white hover:text-gray-300 border-white border bg-[#111111] hover:bg-[#222222]"
+                  >
+                    {subpage.name}
+                  </a>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <a
+              href={page.path}
+              class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
+                              ${
+                                page.name === "Dashboard"
+                                  ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
+                                  : "text-white hover:text-gray-300 border-white border-2"
+                              }`}
+            >
+              {page.name}
+            </a>
+          ),
+        )
       }
     </div>
   </div>
@@ -106,6 +170,111 @@ import pages from "../../data/pages.json";
   #mobile-menu.show {
     @apply translate-x-0;
   }
+
+  .mobile-dropdown-content {
+    opacity: 0;
+    pointer-events: none;
+    z-index: 30;
+    width: calc(100% - 1rem) !important;
+    animation: fadeOut 0.2s ease-in-out forwards;
+  }
+
+  .mobile-dropdown-content.show {
+    opacity: 1;
+    pointer-events: all;
+    backdrop-filter: none;
+    animation: fadeIn 0.2s ease-in-out forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+  }
+
+  .mobile-dropdown-content a {
+    margin-inline: auto;
+    width: 100% !important;
+    max-width: calc(100% - 1rem);
+  }
+
+  .dropdown-icon.rotated {
+    transform: rotate(180deg);
+  }
+
+  /* Add styles for focus effect */
+  .dropdown-container {
+    transition: all 0.3s ease;
+    position: relative;
+    isolation: isolate;
+  }
+
+  .dropdown-container.active {
+    transform: scale(1.02);
+    z-index: 25;
+    backdrop-filter: none;
+    filter: none;
+    transition: all 0.2s ease;
+  }
+
+  .dropdown-container.active .mobile-dropdown-toggle,
+  .dropdown-container.active > div > a {
+    position: relative;
+    z-index: 25;
+    pointer-events: all;
+    backdrop-filter: none;
+    filter: none;
+    transition: all 0.2s ease;
+  }
+
+  .dropdown-container.active::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    z-index: 15;
+    pointer-events: none;
+    transition: all 0.3s ease;
+  }
+
+  #mobile-menu.has-active-dropdown > div > *:not(.dropdown-container.active) {
+    opacity: 0.2;
+    transform: scale(0.98);
+    filter: blur(2px);
+    transition: all 0.2s ease;
+    pointer-events: none;
+  }
+
+  #mobile-menu.has-active-dropdown .dropdown-container.active {
+    pointer-events: all;
+    filter: none;
+    transition: all 0.2s ease;
+  }
+
+  #mobile-menu.has-active-dropdown
+    .dropdown-container.active
+    .mobile-dropdown-content.show {
+    filter: none;
+    backdrop-filter: none;
+    background: transparent;
+  }
 </style>
 
 <script>
@@ -113,6 +282,7 @@ import pages from "../../data/pages.json";
   const mobileMenu = document.getElementById("mobile-menu");
   const menuIcon = document.querySelector(".menu-icon");
   const closeIcon = document.querySelector(".close-icon");
+  const dropdownToggles = document.querySelectorAll(".mobile-dropdown-toggle");
 
   function toggleMenu(show: boolean) {
     if (show) {
@@ -130,9 +300,23 @@ import pages from "../../data/pages.json";
       closeIcon?.classList.add("hidden");
       document.body.style.overflow = "";
 
+      // First wait for the navbar to slide out
       setTimeout(() => {
         mobileMenu?.classList.add("hidden");
-      }, 100);
+
+        // Then reset all dropdowns and focus states
+        document.querySelectorAll(".dropdown-container").forEach((el) => {
+          const dropdownContent = el.querySelector(".mobile-dropdown-content");
+          const dropdownToggle = el.querySelector(".mobile-dropdown-toggle");
+          const dropdownIcon = dropdownToggle?.querySelector(".dropdown-icon");
+
+          el.classList.remove("active");
+          dropdownContent?.classList.remove("show");
+          dropdownIcon?.classList.remove("rotated");
+          dropdownToggle?.setAttribute("aria-expanded", "false");
+        });
+        mobileMenu?.classList.remove("has-active-dropdown");
+      }, 300);
     }
   }
 
@@ -141,7 +325,57 @@ import pages from "../../data/pages.json";
     toggleMenu(isMenuHidden);
   });
 
-  // Close menu when clicking outside
+  // Handle dropdown toggles
+  dropdownToggles.forEach((toggle) => {
+    toggle.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const container = toggle.closest(".dropdown-container");
+      const content = toggle.parentElement?.nextElementSibling as HTMLElement;
+      const icon = toggle.querySelector(".dropdown-icon");
+      const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+
+      // If clicking an already active dropdown, close it and restore interactions
+      if (isExpanded) {
+        // First close the dropdown
+        content?.classList.remove("show");
+        icon?.classList.remove("rotated");
+
+        // Then wait for animation to complete plus a delay before removing focus
+        setTimeout(() => {
+          container?.classList.remove("active");
+          mobileMenu?.classList.remove("has-active-dropdown");
+          toggle.setAttribute("aria-expanded", "false");
+        }, 300); // 200ms for animation + 100ms delay
+        return;
+      }
+
+      // Remove active state from all dropdowns first
+      document.querySelectorAll(".dropdown-container").forEach((el) => {
+        const dropdownContent = el.querySelector(".mobile-dropdown-content");
+        const dropdownToggle = el.querySelector(".mobile-dropdown-toggle");
+        const dropdownIcon = dropdownToggle?.querySelector(".dropdown-icon");
+
+        dropdownContent?.classList.remove("show");
+        dropdownIcon?.classList.remove("rotated");
+        dropdownToggle?.setAttribute("aria-expanded", "false");
+      });
+
+      // First focus the new dropdown
+      container?.classList.add("active");
+      mobileMenu?.classList.add("has-active-dropdown");
+      toggle.setAttribute("aria-expanded", "true");
+      icon?.classList.add("rotated");
+
+      // Then show the content with animation after a short delay
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          content?.classList.add("show");
+        });
+      }, 100);
+    });
+  });
+
+  // Close menu when clicking outside ~ Doesnt really work at the moment
   document.addEventListener("click", (e) => {
     if (
       !mobileMenu?.contains(e.target as Node) &&

src/components/core/Social.astro

@@ -1,7 +1,7 @@
 ---
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
-import jellyfish from "../../images/jellyfish.webp";
+import jellyfish from "../../images/jellyfish.png";
 import { FaDiscord } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
 import { MdEmail } from "react-icons/md";
@@ -72,8 +72,8 @@ import Link from "next/link";
         <Image
             data-inview
             src={jellyfish}
-            alt="cat placeholder"
-            class="absolute bottom-0 md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite"
+            alt="Jellyfish mascot"
+            class="absolute bottom-[2vw] md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite"
         />
     </div>
 </div>

src/components/core/Subtitle.astro

@@ -1,11 +1,11 @@
 ---
-const {title} = Astro.props;
+const { title } = Astro.props;
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
-<div class="flex items-center text-[2.5vw] mb-[5%]">
-    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-    <p>
-        {title}
-    </p>
-</div>
+<div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
+  <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+  <p>
+    {title}
+  </p>
+</div>

src/components/dashboard/EventsSection.astro

@@ -5,151 +5,144 @@ import EventLoad from "./EventsSection/EventLoad";
 ---
 
 <div id="" class="">
-    <div class="mb-4 sm:mb-6 px-4 sm:px-6">
-        <h2 class="text-xl sm:text-2xl font-bold">Events</h2>
-        <p class="opacity-70 text-sm sm:text-base">
-            View and manage your IEEE UCSD events
-        </p>
+  <div class="mb-4 sm:mb-6 px-4 sm:px-6">
+    <h2 class="text-xl sm:text-2xl font-bold">Events</h2>
+    <p class="opacity-70 text-sm sm:text-base">
+      View and manage your IEEE UCSD events
+    </p>
+  </div>
+
+  <div
+    class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6 px-4 sm:px-6"
+  >
+    <!-- Event Check-in Card -->
+    <div class="w-full">
+      <EventCheckIn client:load />
     </div>
 
-    <div
-        class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6 px-4 sm:px-6"
-    >
-        <!-- Event Check-in Card -->
-        <div class="w-full">
-            <EventCheckIn client:load />
+    <!-- Event Registration Card -->
+    <div class="w-full">
+      <div
+        class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full"
+      >
+        <div
+          class="absolute inset-0 bg-base-100 opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex items-center justify-center z-10"
+        >
+          <span class="text-base-content font-medium text-sm sm:text-base"
+            >Coming Soon</span
+          >
         </div>
-
-        <!-- Event Registration Card -->
-        <div class="w-full">
-            <div
-                class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full"
-            >
-                <div
-                    class="absolute inset-0 bg-base-100 opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex items-center justify-center z-10"
-                >
-                    <span
-                        class="text-base-content font-medium text-sm sm:text-base"
-                        >Coming Soon</span
-                    >
-                </div>
-                <div class="card-body p-4 sm:p-6">
-                    <h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4">
-                        Event Registration
-                    </h3>
-                    <div class="form-control w-full">
-                        <label class="label">
-                            <span class="label-text text-sm sm:text-base"
-                                >Select an event to register</span
-                            >
-                        </label>
-                        <div class="flex flex-col sm:flex-row gap-2">
-                            <select
-                                class="select select-bordered flex-1 text-sm sm:text-base h-10 min-h-[2.5rem] w-full"
-                                disabled
-                            >
-                                <option disabled selected>Pick an event</option>
-                                <option
-                                    >Technical Workshop - Web Development</option
-                                >
-                                <option
-                                    >Professional Development Workshop</option
-                                >
-                                <option>Social Event - Game Night</option>
-                            </select>
-                            <button
-                                class="btn btn-primary text-sm sm:text-base h-10 min-h-[2.5rem] w-full sm:w-[100px]"
-                                disabled>Register</button
-                            >
-                        </div>
-                    </div>
-                </div>
+        <div class="card-body p-4 sm:p-6">
+          <h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4">
+            Event Registration
+          </h3>
+          <div class="form-control w-full">
+            <label class="label">
+              <span class="label-text text-sm sm:text-base"
+                >Select an event to register</span
+              >
+            </label>
+            <div class="flex flex-col sm:flex-row gap-2">
+              <select
+                class="select select-bordered flex-1 text-sm sm:text-base h-10 min-h-[2.5rem] w-full"
+                disabled
+              >
+                <option disabled selected>Pick an event</option>
+                <option>Technical Workshop - Web Development</option>
+                <option>Professional Development Workshop</option>
+                <option>Social Event - Game Night</option>
+              </select>
+              <button
+                class="btn btn-primary text-sm sm:text-base h-10 min-h-[2.5rem] w-full sm:w-[100px]"
+                disabled>Register</button
+              >
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 
-    <EventLoad client:load />
+  <EventLoad client:load />
 </div>
 
 <!-- Event Details Modal -->
 <dialog id="eventDetailsModal" class="modal">
-    <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
-        <div class="flex justify-between items-center mb-3 sm:mb-4">
-            <div class="flex items-center gap-2 sm:gap-3">
-                <h3 class="font-bold text-base sm:text-lg" id="modalTitle">
-                    Event Files
-                </h3>
-                <button
-                    id="downloadAllBtn"
-                    class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
-                    onclick="window.downloadAllFiles()"
-                >
-                    <iconify-icon
-                        icon="heroicons:arrow-down-tray-20-solid"
-                        className="h-3 w-3 sm:h-4 sm:w-4"></iconify-icon>
-                    Download All
-                </button>
-            </div>
-            <button
-                class="btn btn-circle btn-ghost btn-sm sm:btn-md"
-                onclick="window.closeEventDetailsModal()"
-            >
-                <iconify-icon
-                    icon="heroicons:x-mark"
-                    className="h-4 w-4 sm:h-6 sm:w-6"></iconify-icon>
-            </button>
-        </div>
-
-        <div id="filesContent" class="space-y-3 sm:space-y-4">
-            <!-- Files list will be populated here -->
-        </div>
+  <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
+    <div class="flex justify-between items-center mb-3 sm:mb-4">
+      <div class="flex items-center gap-2 sm:gap-3">
+        <h3 class="font-bold text-base sm:text-lg" id="modalTitle">
+          Event Files
+        </h3>
+        <button
+          id="downloadAllBtn"
+          class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
+          onclick="window.downloadAllFiles()"
+        >
+          <iconify-icon
+            icon="heroicons:arrow-down-tray-20-solid"
+            className="h-3 w-3 sm:h-4 sm:w-4"></iconify-icon>
+          Download All
+        </button>
+      </div>
+      <button
+        class="btn btn-circle btn-ghost btn-sm sm:btn-md"
+        onclick="window.closeEventDetailsModal()"
+      >
+        <iconify-icon icon="heroicons:x-mark" className="h-4 w-4 sm:h-6 sm:w-6"
+        ></iconify-icon>
+      </button>
     </div>
-    <form method="dialog" class="modal-backdrop">
-        <button onclick="window.closeEventDetailsModal()">close</button>
-    </form>
+
+    <div id="filesContent" class="space-y-3 sm:space-y-4">
+      <!-- Files list will be populated here -->
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button onclick="window.closeEventDetailsModal()">close</button>
+  </form>
 </dialog>
 
 <!-- Universal File Preview Modal -->
 <dialog id="filePreviewModal" class="modal">
-    <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
-        <div class="flex justify-between items-center mb-3 sm:mb-4">
-            <div class="flex items-center gap-2 sm:gap-3">
-                <button
-                    class="btn btn-ghost btn-sm text-xs sm:text-sm"
-                    onclick="window.closeFilePreviewEvents()">Close</button
-                >
-                <h3
-                    class="font-bold text-base sm:text-lg truncate"
-                    id="previewFileName"
-                >
-                </h3>
-            </div>
-        </div>
-        <div class="relative" id="previewContainer">
-            <div
-                id="previewLoadingSpinner"
-                class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
-            >
-                <span class="loading loading-spinner loading-md sm:loading-lg"
-                ></span>
-            </div>
-            <div id="previewContent" class="w-full">
-                <FilePreview client:load isModal={true} />
-            </div>
-        </div>
+  <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
+    <div class="flex justify-between items-center mb-3 sm:mb-4">
+      <div class="flex items-center gap-2 sm:gap-3">
+        <button
+          class="btn btn-ghost btn-sm text-xs sm:text-sm"
+          onclick="window.closeFilePreviewEvents()">Close</button
+        >
+        <h3
+          class="font-bold text-base sm:text-lg truncate"
+          id="previewFileName"
+        >
+        </h3>
+      </div>
     </div>
-    <form method="dialog" class="modal-backdrop">
-        <button onclick="window.closeFilePreviewEvents()">close</button>
-    </form>
+    <div class="relative" id="previewContainer">
+      <div
+        id="previewLoadingSpinner"
+        class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
+      >
+        <span class="loading loading-spinner loading-md sm:loading-lg"></span>
+      </div>
+      <div id="previewContent" class="w-full">
+        <FilePreview client:load isModal={true} />
+      </div>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button onclick="window.closeFilePreviewEvents()">close</button>
+  </form>
 </dialog>
 
 <script>
-    import { toast } from "react-hot-toast";
-    import JSZip from "jszip";
+  import { toast } from "react-hot-toast";
+  import JSZip from "jszip";
 
-    // Add styles to the document
-    const style = document.createElement("style");
-    style.textContent = `
+  // Add styles to the document
+  const style = document.createElement("style");
+  style.textContent = `
     /* Custom styles for the event details modal */
     .event-details-grid {
       display: grid;
@@ -165,234 +158,227 @@ import EventLoad from "./EventsSection/EventLoad";
     
     /* Remove custom toast styles since we're using react-hot-toast */
   `;
-    document.head.appendChild(style);
+  document.head.appendChild(style);
 
-    // Add helper functions for file preview
-    function getFileType(filename: string): string {
-        const extension = filename.split(".").pop()?.toLowerCase();
-        const mimeTypes: { [key: string]: string } = {
-            pdf: "application/pdf",
-            jpg: "image/jpeg",
-            jpeg: "image/jpeg",
-            png: "image/png",
-            gif: "image/gif",
-            mp4: "video/mp4",
-            mp3: "audio/mpeg",
-            txt: "text/plain",
-            doc: "application/msword",
-            docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-            xls: "application/vnd.ms-excel",
-            xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-            json: "application/json",
-        };
+  // Add helper functions for file preview
+  function getFileType(filename: string): string {
+    const extension = filename.split(".").pop()?.toLowerCase();
+    const mimeTypes: { [key: string]: string } = {
+      pdf: "application/pdf",
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      png: "image/png",
+      gif: "image/gif",
+      mp4: "video/mp4",
+      mp3: "audio/mpeg",
+      txt: "text/plain",
+      doc: "application/msword",
+      docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      xls: "application/vnd.ms-excel",
+      xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      json: "application/json",
+    };
 
-        return mimeTypes[extension || ""] || "application/octet-stream";
+    return mimeTypes[extension || ""] || "application/octet-stream";
+  }
+
+  // Universal file preview function for events section
+  window.previewFileEvents = function (url: string, filename: string) {
+    // console.log("previewFileEvents called with:", { url, filename });
+    // console.log("URL type:", typeof url, "URL length:", url?.length || 0);
+    // console.log(
+    //     "Filename type:",
+    //     typeof filename,
+    //     "Filename length:",
+    //     filename?.length || 0
+    // );
+
+    // Validate inputs
+    if (!url || typeof url !== "string") {
+      console.error("Invalid URL provided to previewFileEvents:", url);
+      toast.error("Cannot preview file: Invalid URL");
+      return;
     }
 
-    // Universal file preview function for events section
-    window.previewFileEvents = function (url: string, filename: string) {
-        console.log("previewFileEvents called with:", { url, filename });
-        console.log("URL type:", typeof url, "URL length:", url?.length || 0);
-        console.log(
-            "Filename type:",
-            typeof filename,
-            "Filename length:",
-            filename?.length || 0
-        );
+    if (!filename || typeof filename !== "string") {
+      console.error(
+        "Invalid filename provided to previewFileEvents:",
+        filename,
+      );
+      toast.error("Cannot preview file: Invalid filename");
+      return;
+    }
 
-        // Validate inputs
-        if (!url || typeof url !== "string") {
-            console.error("Invalid URL provided to previewFileEvents:", url);
-            toast.error("Cannot preview file: Invalid URL");
-            return;
-        }
+    // Ensure URL is properly formatted
+    if (!url.startsWith("http")) {
+      console.warn("URL doesn't start with http, attempting to fix:", url);
+      if (url.startsWith("/")) {
+        url = `https://pocketbase.ieeeucsd.org${url}`;
+      } else {
+        url = `https://pocketbase.ieeeucsd.org/${url}`;
+      }
+      // console.log("Fixed URL:", url);
+    }
 
-        if (!filename || typeof filename !== "string") {
-            console.error(
-                "Invalid filename provided to previewFileEvents:",
-                filename
-            );
-            toast.error("Cannot preview file: Invalid filename");
-            return;
-        }
+    const modal = document.getElementById(
+      "filePreviewModal",
+    ) as HTMLDialogElement;
+    const previewFileName = document.getElementById("previewFileName");
+    const previewContent = document.getElementById("previewContent");
+    const loadingSpinner = document.getElementById("previewLoadingSpinner");
 
-        // Ensure URL is properly formatted
-        if (!url.startsWith("http")) {
-            console.warn(
-                "URL doesn't start with http, attempting to fix:",
-                url
-            );
-            if (url.startsWith("/")) {
-                url = `https://pocketbase.ieeeucsd.org${url}`;
-            } else {
-                url = `https://pocketbase.ieeeucsd.org/${url}`;
-            }
-            console.log("Fixed URL:", url);
-        }
+    if (modal && previewFileName && previewContent) {
+      // console.log("Found all required elements");
 
-        const modal = document.getElementById(
-            "filePreviewModal"
-        ) as HTMLDialogElement;
-        const previewFileName = document.getElementById("previewFileName");
-        const previewContent = document.getElementById("previewContent");
-        const loadingSpinner = document.getElementById("previewLoadingSpinner");
+      // Show loading spinner
+      if (loadingSpinner) {
+        loadingSpinner.classList.remove("hidden");
+      }
 
-        if (modal && previewFileName && previewContent) {
-            console.log("Found all required elements");
+      // Update the filename display
+      previewFileName.textContent = filename;
 
-            // Show loading spinner
-            if (loadingSpinner) {
-                loadingSpinner.classList.remove("hidden");
-            }
+      // Show the modal
+      modal.showModal();
 
-            // Update the filename display
-            previewFileName.textContent = filename;
-
-            // Show the modal
-            modal.showModal();
-
-            // Test the URL with a fetch before dispatching the event
-            fetch(url, { method: "HEAD" })
-                .then((response) => {
-                    console.log(
-                        "URL test response:",
-                        response.status,
-                        response.ok
-                    );
-                    if (!response.ok) {
-                        console.warn("URL might not be accessible:", url);
-                        toast(
-                            "File might not be accessible. Attempting to preview anyway.",
-                            {
-                                icon: "⚠️",
-                                style: {
-                                    borderRadius: "10px",
-                                    background: "#FFC107",
-                                    color: "#000",
-                                },
-                            }
-                        );
-                    }
-                })
-                .catch((err) => {
-                    console.error("Error testing URL:", err);
-                })
-                .finally(() => {
-                    // Dispatch state change event to update the FilePreview component
-                    console.log(
-                        "Dispatching filePreviewStateChange event with:",
-                        { url, filename }
-                    );
-                    window.dispatchEvent(
-                        new CustomEvent("filePreviewStateChange", {
-                            detail: { url, filename },
-                        })
-                    );
-                });
-
-            // Hide loading spinner after a short delay
-            setTimeout(() => {
-                if (loadingSpinner) {
-                    loadingSpinner.classList.add("hidden");
-                }
-            }, 1000); // Increased delay to allow for URL testing
-        } else {
-            console.error("Missing required elements for file preview");
-            toast.error("Could not initialize file preview");
-        }
-    };
-
-    // Close file preview for events section
-    window.closeFilePreviewEvents = function () {
-        console.log("closeFilePreviewEvents called");
-        const modal = document.getElementById(
-            "filePreviewModal"
-        ) as HTMLDialogElement;
-        const previewFileName = document.getElementById("previewFileName");
-        const previewContent = document.getElementById("previewContent");
-        const loadingSpinner = document.getElementById("previewLoadingSpinner");
-
-        if (loadingSpinner) {
-            loadingSpinner.classList.add("hidden");
-        }
-
-        if (modal && previewFileName && previewContent) {
-            console.log("Resetting preview and closing modal");
-
-            // First reset the preview state by dispatching an event with empty values
-            // This ensures the FilePreview component clears its internal state
-            window.dispatchEvent(
-                new CustomEvent("filePreviewStateChange", {
-                    detail: { url: "", filename: "" },
-                })
-            );
-
-            // Reset the UI
-            previewFileName.textContent = "";
-
-            // Close the modal
-            modal.close();
-
-            console.log("File preview modal closed and state reset");
-        } else {
-            console.error("Could not find elements to close file preview");
-        }
-    };
-
-    // Update the showFilePreview function for events section
-    window.showFilePreviewEvents = function (file: {
-        url: string;
-        name: string;
-    }) {
-        console.log("showFilePreviewEvents called with:", file);
-        if (!file || !file.url || !file.name) {
-            console.error("Invalid file data:", file);
-            toast.error("Could not preview file: missing file information");
-            return;
-        }
-        window.previewFileEvents(file.url, file.name);
-    };
-
-    // Update the openDetailsModal function to use the events-specific preview
-    window.openDetailsModal = function (event: any) {
-        const modal = document.getElementById(
-            "eventDetailsModal"
-        ) as HTMLDialogElement;
-        const filesContent = document.getElementById(
-            "filesContent"
-        ) as HTMLDivElement;
-
-        // Check if event has ended
-        const eventEndDate = new Date(event.end_date);
-        const now = new Date();
-
-        if (eventEndDate > now) {
-            toast("Files are only available after the event has ended.", {
+      // Test the URL with a fetch before dispatching the event
+      fetch(url, { method: "HEAD" })
+        .then((response) => {
+          // console.log(
+          //     "URL test response:",
+          //     response.status,
+          //     response.ok
+          // );
+          if (!response.ok) {
+            console.warn("URL might not be accessible:", url);
+            toast(
+              "File might not be accessible. Attempting to preview anyway.",
+              {
                 icon: "⚠️",
                 style: {
-                    borderRadius: "10px",
-                    background: "#FFC107",
-                    color: "#000",
+                  borderRadius: "10px",
+                  background: "#FFC107",
+                  color: "#000",
                 },
-            });
-            return;
+              },
+            );
+          }
+        })
+        .catch((err) => {
+          console.error("Error testing URL:", err);
+        })
+        .finally(() => {
+          // Dispatch state change event to update the FilePreview component
+          // console.log(
+          //     "Dispatching filePreviewStateChange event with:",
+          //     { url, filename }
+          // );
+          window.dispatchEvent(
+            new CustomEvent("filePreviewStateChange", {
+              detail: { url, filename },
+            }),
+          );
+        });
+
+      // Hide loading spinner after a short delay
+      setTimeout(() => {
+        if (loadingSpinner) {
+          loadingSpinner.classList.add("hidden");
         }
+      }, 1000); // Increased delay to allow for URL testing
+    } else {
+      console.error("Missing required elements for file preview");
+      toast.error("Could not initialize file preview");
+    }
+  };
 
-        // Reset state
-        window.currentEventId = event.id;
-        if (filesContent) filesContent.classList.remove("hidden");
+  // Close file preview for events section
+  window.closeFilePreviewEvents = function () {
+    // console.log("closeFilePreviewEvents called");
+    const modal = document.getElementById(
+      "filePreviewModal",
+    ) as HTMLDialogElement;
+    const previewFileName = document.getElementById("previewFileName");
+    const previewContent = document.getElementById("previewContent");
+    const loadingSpinner = document.getElementById("previewLoadingSpinner");
 
-        // Populate files content
-        if (
-            event.files &&
-            Array.isArray(event.files) &&
-            event.files.length > 0
-        ) {
-            const baseUrl = "https://pocketbase.ieeeucsd.org";
-            const collectionId = "events";
-            const recordId = event.id;
+    if (loadingSpinner) {
+      loadingSpinner.classList.add("hidden");
+    }
 
-            filesContent.innerHTML = `
+    if (modal && previewFileName && previewContent) {
+      //   console.log("Resetting preview and closing modal");
+
+      // First reset the preview state by dispatching an event with empty values
+      // This ensures the FilePreview component clears its internal state
+      window.dispatchEvent(
+        new CustomEvent("filePreviewStateChange", {
+          detail: { url: "", filename: "" },
+        }),
+      );
+
+      // Reset the UI
+      previewFileName.textContent = "";
+
+      // Close the modal
+      modal.close();
+
+      //   console.log("File preview modal closed and state reset");
+    } else {
+      console.error("Could not find elements to close file preview");
+    }
+  };
+
+  // Update the showFilePreview function for events section
+  window.showFilePreviewEvents = function (file: {
+    url: string;
+    name: string;
+  }) {
+    // console.log("showFilePreviewEvents called with:", file);
+    if (!file || !file.url || !file.name) {
+      console.error("Invalid file data:", file);
+      toast.error("Could not preview file: missing file information");
+      return;
+    }
+    window.previewFileEvents(file.url, file.name);
+  };
+
+  // Update the openDetailsModal function to use the events-specific preview
+  window.openDetailsModal = function (event: any) {
+    const modal = document.getElementById(
+      "eventDetailsModal",
+    ) as HTMLDialogElement;
+    const filesContent = document.getElementById(
+      "filesContent",
+    ) as HTMLDivElement;
+
+    // Check if event has ended
+    const eventEndDate = new Date(event.end_date);
+    const now = new Date();
+
+    if (eventEndDate > now) {
+      toast("Files are only available after the event has ended.", {
+        icon: "⚠️",
+        style: {
+          borderRadius: "10px",
+          background: "#FFC107",
+          color: "#000",
+        },
+      });
+      return;
+    }
+
+    // Reset state
+    window.currentEventId = event.id;
+    if (filesContent) filesContent.classList.remove("hidden");
+
+    // Populate files content
+    if (event.files && Array.isArray(event.files) && event.files.length > 0) {
+      const baseUrl = "https://pocketbase.ieeeucsd.org";
+      const collectionId = "events";
+      const recordId = event.id;
+
+      filesContent.innerHTML = `
                 <div class="overflow-x-auto">
                     <table class="table table-zebra w-full">
                         <thead>
@@ -403,16 +389,16 @@ import EventLoad from "./EventsSection/EventLoad";
                         </thead>
                         <tbody>
                             ${event.files
-                                .map((file: string) => {
-                                    // Ensure the file URL is properly formatted
-                                    const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`;
-                                    const fileType = getFileType(file);
-                                    // Properly escape the data for the onclick handler
-                                    const fileData = {
-                                        url: fileUrl,
-                                        name: file,
-                                    };
-                                    return `
+                              .map((file: string) => {
+                                // Ensure the file URL is properly formatted
+                                const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`;
+                                const fileType = getFileType(file);
+                                // Properly escape the data for the onclick handler
+                                const fileData = {
+                                  url: fileUrl,
+                                  name: file,
+                                };
+                                return `
                                         <tr>
                                             <td>${file}</td>
                                             <td class="text-right">
@@ -425,123 +411,123 @@ import EventLoad from "./EventsSection/EventLoad";
                                             </td>
                                         </tr>
                                     `;
-                                })
-                                .join("")}
+                              })
+                              .join("")}
                         </tbody>
                     </table>
                 </div>
             `;
-        } else {
-            filesContent.innerHTML = `
+    } else {
+      filesContent.innerHTML = `
                 <div class="text-center py-8 text-base-content/70">
                     <iconify-icon icon="heroicons:document-duplicate" className="h-12 w-12 mx-auto mb-4 opacity-50" />
                     <p>No files attached to this event</p>
                 </div>
             `;
+    }
+
+    modal.showModal();
+  };
+
+  // Add downloadAllFiles function
+  window.downloadAllFiles = async function () {
+    const downloadBtn = document.getElementById(
+      "downloadAllBtn",
+    ) as HTMLButtonElement;
+    if (!downloadBtn) return;
+    const originalBtnContent = downloadBtn.innerHTML;
+
+    try {
+      // Show loading state
+      downloadBtn.innerHTML =
+        '<span class="loading loading-spinner loading-xs"></span> Preparing...';
+      downloadBtn.disabled = true;
+
+      const zip = new JSZip();
+
+      // Get current event files
+      const baseUrl = "https://pocketbase.ieeeucsd.org";
+      const collectionId = "events";
+      const recordId = window.currentEventId;
+
+      // Get the current event from the window object
+      const eventDataId = `event_${window.currentEventId}`;
+      const event = window[eventDataId];
+
+      if (!event || !event.files || event.files.length === 0) {
+        throw new Error("No files available to download");
+      }
+
+      // Download each file and add to zip
+      const filePromises = event.files.map(async (filename: string) => {
+        const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${filename}`;
+        const response = await fetch(fileUrl);
+        if (!response.ok) {
+          throw new Error(`Failed to download ${filename}`);
         }
+        const blob = await response.blob();
+        zip.file(filename, blob);
+      });
 
-        modal.showModal();
-    };
+      await Promise.all(filePromises);
 
-    // Add downloadAllFiles function
-    window.downloadAllFiles = async function () {
-        const downloadBtn = document.getElementById(
-            "downloadAllBtn"
-        ) as HTMLButtonElement;
-        if (!downloadBtn) return;
-        const originalBtnContent = downloadBtn.innerHTML;
+      // Generate and download zip
+      const zipBlob = await zip.generateAsync({ type: "blob" });
+      const downloadUrl = URL.createObjectURL(zipBlob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = `${event.event_name}_files.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(downloadUrl);
 
-        try {
-            // Show loading state
-            downloadBtn.innerHTML =
-                '<span class="loading loading-spinner loading-xs"></span> Preparing...';
-            downloadBtn.disabled = true;
+      // Show success message
+      toast.success("Files downloaded successfully!");
+    } catch (error: any) {
+      console.error("Failed to download files:", error);
+      toast.error(
+        error?.message || "Failed to download files. Please try again.",
+      );
+    } finally {
+      // Reset button state
+      downloadBtn.innerHTML = originalBtnContent;
+      downloadBtn.disabled = false;
+    }
+  };
 
-            const zip = new JSZip();
+  // Close event details modal
+  window.closeEventDetailsModal = function () {
+    const modal = document.getElementById(
+      "eventDetailsModal",
+    ) as HTMLDialogElement;
+    const filesContent = document.getElementById("filesContent");
 
-            // Get current event files
-            const baseUrl = "https://pocketbase.ieeeucsd.org";
-            const collectionId = "events";
-            const recordId = window.currentEventId;
+    if (modal) {
+      // Reset the files content
+      if (filesContent) {
+        filesContent.innerHTML = "";
+      }
 
-            // Get the current event from the window object
-            const eventDataId = `event_${window.currentEventId}`;
-            const event = window[eventDataId];
+      // Reset any other state if needed
+      window.currentEventId = "";
 
-            if (!event || !event.files || event.files.length === 0) {
-                throw new Error("No files available to download");
-            }
+      // Close the modal
+      modal.close();
+    }
+  };
 
-            // Download each file and add to zip
-            const filePromises = event.files.map(async (filename: string) => {
-                const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${filename}`;
-                const response = await fetch(fileUrl);
-                if (!response.ok) {
-                    throw new Error(`Failed to download ${filename}`);
-                }
-                const blob = await response.blob();
-                zip.file(filename, blob);
-            });
-
-            await Promise.all(filePromises);
-
-            // Generate and download zip
-            const zipBlob = await zip.generateAsync({ type: "blob" });
-            const downloadUrl = URL.createObjectURL(zipBlob);
-            const link = document.createElement("a");
-            link.href = downloadUrl;
-            link.download = `${event.event_name}_files.zip`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(downloadUrl);
-
-            // Show success message
-            toast.success("Files downloaded successfully!");
-        } catch (error: any) {
-            console.error("Failed to download files:", error);
-            toast.error(
-                error?.message || "Failed to download files. Please try again."
-            );
-        } finally {
-            // Reset button state
-            downloadBtn.innerHTML = originalBtnContent;
-            downloadBtn.disabled = false;
-        }
-    };
-
-    // Close event details modal
-    window.closeEventDetailsModal = function () {
-        const modal = document.getElementById(
-            "eventDetailsModal"
-        ) as HTMLDialogElement;
-        const filesContent = document.getElementById("filesContent");
-
-        if (modal) {
-            // Reset the files content
-            if (filesContent) {
-                filesContent.innerHTML = "";
-            }
-
-            // Reset any other state if needed
-            window.currentEventId = "";
-
-            // Close the modal
-            modal.close();
-        }
-    };
-
-    // Make helper functions available globally
-    window.showFilePreview = window.showFilePreviewEvents;
-    window.handlePreviewError = function () {
-        const previewContent = document.getElementById("previewContent");
-        if (previewContent) {
-            previewContent.innerHTML = `
+  // Make helper functions available globally
+  window.showFilePreview = window.showFilePreviewEvents;
+  window.handlePreviewError = function () {
+    const previewContent = document.getElementById("previewContent");
+    if (previewContent) {
+      previewContent.innerHTML = `
                 <div class="alert alert-error">
                     <Icon icon="heroicons:x-circle" className="h-6 w-6" />
                     <span>Failed to load file preview</span>
                 </div>
             `;
-        }
-    };
+    }
+  };
 </script>

src/components/dashboard/EventsSection/EventCheckIn.tsx

@@ -7,11 +7,12 @@ import { DataSyncService } from "../../../scripts/database/DataSyncService";
 import { Collections } from "../../../schemas/pocketbase/schema";
 import { Icon } from "@iconify/react";
 import toast from "react-hot-toast";
-import type { Event, EventAttendee } from "../../../schemas/pocketbase";
+import type { Event, EventAttendee, LimitedUser } from "../../../schemas/pocketbase";
 
 // Extended Event interface with additional properties needed for this component
 interface ExtendedEvent extends Event {
     description?: string; // This component uses 'description' but schema has 'event_description'
+    event_type: string; // Add event_type field from schema
 }
 
 // Note: Date conversion is now handled automatically by the Get and Update classes.
@@ -156,7 +157,12 @@ const EventCheckIn = () => {
             );
 
             // Store event code in local storage for offline check-in
-            await dataSync.storeEventCode(eventCode);
+            try {
+                await dataSync.storeEventCode(eventCode);
+            } catch (syncError) {
+                // Log the error but don't show a toast to the user
+                console.error("Error storing event code locally:", syncError);
+            }
 
             // Show event details toast only for non-food events
             // For food events, we'll show the toast after food selection
@@ -180,7 +186,7 @@ const EventCheckIn = () => {
                     <div>
                         <strong>Event with food found!</strong>
                         <p className="text-sm mt-1">{event.event_name}</p>
-                        <p className="text-xs mt-1">Please select your food preference</p>
+                        <p className="text-xs mt-1">Please select the food you ate (or will eat) at the event!</p>
                     </div>,
                     { duration: 5000 }
                 );
@@ -249,8 +255,6 @@ const EventCheckIn = () => {
                 // Create the attendee record in PocketBase
                 const newAttendee = await update.create(Collections.EVENT_ATTENDEES, attendeeData);
 
-                console.log("Successfully created attendance record");
-
                 // Update user's total points
                 // First, get all the user's attendance records to calculate total points
                 const userAttendance = await get.getList<EventAttendee>(
@@ -266,23 +270,61 @@ const EventCheckIn = () => {
                     totalPoints += attendee.points_earned || 0;
                 });
 
-                // Log the points update
-                console.log(`Updating user points to: ${totalPoints}`);
+                // Update the LimitedUser record with the new points total
+                try {
+                    // Try to get the LimitedUser record to check if it exists
+                    let limitedUserExists = false;
+                    try {
+                        const limitedUser = await get.getOne(Collections.LIMITED_USERS, userId);
+                        limitedUserExists = !!limitedUser;
+                    } catch (e) {
+                        // Record doesn't exist
+                        limitedUserExists = false;
+                    }
 
-                // Update the user record with the new total points
-                await update.updateFields(Collections.USERS, userId, {
-                    points: totalPoints
-                });
+                    // Create or update the LimitedUser record
+                    if (limitedUserExists) {
+                        await update.updateFields(Collections.LIMITED_USERS, userId, {
+                            points: JSON.stringify(totalPoints),
+                            total_events_attended: JSON.stringify(userAttendance.totalItems)
+                        });
+                    } else {
+                        // Get user data to create LimitedUser record
+                        const userData = await get.getOne(Collections.USERS, userId);
+                        if (userData) {
+                            await update.create(Collections.LIMITED_USERS, {
+                                id: userId, // Use same ID as user record
+                                name: userData.name || 'Anonymous User',
+                                major: userData.major || '',
+                                points: JSON.stringify(totalPoints),
+                                total_events_attended: JSON.stringify(userAttendance.totalItems)
+                            });
+                        }
+                    }
+                } catch (error) {
+                    console.error('Failed to update LimitedUser record:', error);
+                }
 
                 // Ensure local data is in sync with backend
                 // First sync the new attendance record
-                await dataSync.syncCollection(Collections.EVENT_ATTENDEES);
+                try {
+                    await dataSync.syncCollection(Collections.EVENT_ATTENDEES);
 
-                // Then sync the updated user data to ensure points are correctly reflected locally
-                await dataSync.syncCollection(Collections.USERS);
+                    // Then sync the updated user and LimitedUser data
+                    await dataSync.syncCollection(Collections.USERS);
+                    await dataSync.syncCollection(Collections.LIMITED_USERS);
+                } catch (syncError) {
+                    // Log the error but don't show a toast to the user
+                    console.error('Local sync failed:', syncError);
+                }
 
                 // Clear event code from local storage
-                await dataSync.clearEventCode();
+                try {
+                    await dataSync.clearEventCode();
+                } catch (clearError) {
+                    // Log the error but don't show a toast to the user
+                    console.error("Error clearing event code from local storage:", clearError);
+                }
 
                 // Log successful check-in
                 await logger.send(
@@ -430,12 +472,12 @@ const EventCheckIn = () => {
                     <div className="badge badge-primary mb-4">
                         {currentCheckInEvent?.points_to_reward} points
                     </div>
-                    <p className="mb-4">This event has food! Please let us know what you'd like to eat:</p>
+                    <p className="mb-4">This event has food! Please let us know what you ate (or will eat):</p>
                     <form onSubmit={handleSubmit}>
                         <div className="form-control">
                             <input
                                 type="text"
-                                placeholder="Enter your food preference"
+                                placeholder="Enter the food you will or are eating"
                                 className="input input-bordered w-full"
                                 value={foodInput}
                                 onChange={(e) => setFoodInput(e.target.value)}

src/components/dashboard/EventsSection/EventLoad.tsx

@@ -10,6 +10,7 @@ import type { Event, AttendeeEntry, EventAttendee } from "../../../schemas/pocke
 // Extended Event interface with additional properties needed for this component
 interface ExtendedEvent extends Event {
     description?: string; // This component uses 'description' but schema has 'event_description'
+    event_type: string; // Add event_type field from schema
 }
 
 declare global {
@@ -62,6 +63,19 @@ const EventLoad = () => {
     const [syncStatus, setSyncStatus] = useState<'idle' | 'syncing' | 'success' | 'error'>('idle');
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [refreshing, setRefreshing] = useState(false);
+    const [expandedDescriptions, setExpandedDescriptions] = useState<Set<string>>(new Set());
+
+    const toggleDescription = (eventId: string) => {
+        setExpandedDescriptions(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(eventId)) {
+                newSet.delete(eventId);
+            } else {
+                newSet.add(eventId);
+            }
+            return newSet;
+        });
+    };
 
     // Function to clear the events cache and force a fresh sync
     const refreshEvents = async () => {
@@ -74,9 +88,9 @@ const EventLoad = () => {
 
             // Clear events table
             if (db && db.events) {
-                console.log("Clearing events cache...");
+                // console.log("Clearing events cache...");
                 await db.events.clear();
-                console.log("Events cache cleared successfully");
+                // console.log("Events cache cleared successfully");
             }
 
             // Reset sync timestamp for events by updating it to 0
@@ -84,7 +98,7 @@ const EventLoad = () => {
             const currentInfo = await dexieService.getLastSync(Collections.EVENTS);
             // Then update it with a timestamp of 0 (forcing a fresh sync)
             await dexieService.updateLastSync(Collections.EVENTS);
-            console.log("Events sync timestamp reset");
+            // console.log("Events sync timestamp reset");
 
             // Reload events
             setLoading(true);
@@ -146,7 +160,7 @@ const EventLoad = () => {
                     try {
                         const get = Get.getInstance();
                         const attendees = await get.getList<EventAttendee>(
-                            "event_attendees",
+                            Collections.EVENT_ATTENDEES,
                             1,
                             1,
                             `user="${currentUser.id}" && event="${event.id}"`
@@ -154,12 +168,38 @@ const EventLoad = () => {
 
                         const hasAttendedEvent = attendees.totalItems > 0;
 
+                        // Store the attendance status in the window object with the event
+                        const eventDataId = `event_${event.id}`;
+                        if (window[eventDataId]) {
+                            window[eventDataId].hasAttended = hasAttendedEvent;
+                        }
+
                         // Update the card UI based on attendance status
                         const cardElement = document.getElementById(`event-card-${event.id}`);
-                        if (cardElement && hasAttendedEvent) {
-                            const attendedBadge = cardElement.querySelector('.attended-badge');
-                            if (attendedBadge) {
-                                (attendedBadge as HTMLElement).style.display = 'flex';
+                        if (cardElement) {
+                            const attendedBadge = document.getElementById(`attendance-badge-${event.id}`);
+                            if (attendedBadge && hasAttendedEvent) {
+                                attendedBadge.classList.remove('badge-ghost');
+                                attendedBadge.classList.add('badge-success');
+
+                                // Update the icon and text
+                                const icon = attendedBadge.querySelector('svg');
+                                if (icon) {
+                                    icon.setAttribute('icon', 'heroicons:check-circle');
+                                }
+
+                                // Update the text content
+                                attendedBadge.textContent = '';
+
+                                // Recreate the icon
+                                const iconElement = document.createElement('span');
+                                iconElement.className = 'h-3 w-3';
+                                iconElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-.997-6l7.07-7.071l-1.414-1.414l-5.656 5.657l-2.829-2.829l-1.414 1.414L11.003 16z"/></svg>';
+                                attendedBadge.appendChild(iconElement);
+
+                                // Add the text
+                                const textNode = document.createTextNode(' Attended');
+                                attendedBadge.appendChild(textNode);
                             }
                         }
                     } catch (error) {
@@ -176,59 +216,94 @@ const EventLoad = () => {
             const endDate = new Date(event.end_date);
             const now = new Date();
             const isPastEvent = endDate < now;
+            const isExpanded = expandedDescriptions.has(event.id);
+            const description = event.event_description || "No description available";
 
             return (
-                <div key={event.id} className="card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-300 relative overflow-hidden">
-                    <div className="card-body p-3 sm:p-4">
-                        <div className="flex flex-col h-full">
-                            <div className="flex flex-col gap-2">
-                                <div className="flex-1">
-                                    <h3 className="card-title text-base sm:text-lg font-semibold mb-1 line-clamp-2">{event.event_name}</h3>
-                                    <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm text-base-content/70">
-                                        <div className="badge badge-primary badge-sm">{event.points_to_reward} pts</div>
-                                        <div className="text-xs sm:text-sm opacity-75">
-                                            {startDate.toLocaleDateString("en-US", {
-                                                weekday: "short",
-                                                month: "short",
-                                                day: "numeric",
-                                            })}
-                                            {" • "}
-                                            {startDate.toLocaleTimeString("en-US", {
-                                                hour: "numeric",
-                                                minute: "2-digit",
-                                            })}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                <div id={`event-card-${event.id}`} key={event.id} className="card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-300 relative overflow-hidden">
+                    <div className="card-body p-4">
+                        {/* Event Header */}
+                        <div className="flex justify-between items-start mb-2">
+                            <h3 className="card-title text-base sm:text-lg font-semibold line-clamp-2">{event.event_name}</h3>
+                            <div className="badge badge-primary badge-sm flex-shrink-0">{event.points_to_reward} pts</div>
+                        </div>
 
-                            <div className="text-xs sm:text-sm text-base-content/70 my-2 line-clamp-2">
-                                {event.event_description || "No description available"}
-                            </div>
+                        {/* Event Description */}
+                        <div className="mb-3">
+                            <p className={`text-xs sm:text-sm text-base-content/70 ${isExpanded ? '' : 'line-clamp-2'}`}>
+                                {description}
+                            </p>
+                            {description.length > 80 && (
+                                <button
+                                    onClick={() => toggleDescription(event.id)}
+                                    className="text-xs text-primary hover:text-primary-focus mt-1 flex items-center"
+                                >
+                                    {isExpanded ? (
+                                        <>
+                                            <Icon icon="heroicons:chevron-up" className="h-3 w-3 mr-1" />
+                                            Show less
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Icon icon="heroicons:chevron-down" className="h-3 w-3 mr-1" />
+                                            Show more
+                                        </>
+                                    )}
+                                </button>
+                            )}
+                        </div>
 
-                            <div className="flex flex-wrap items-center gap-2 mt-auto pt-2">
-                                {event.files && event.files.length > 0 && (
-                                    <button
-                                        onClick={() => window.openDetailsModal(event as ExtendedEvent)}
-                                        className="btn btn-ghost btn-sm text-xs sm:text-sm gap-1 h-8 min-h-0 px-2"
-                                    >
-                                        <Icon icon="heroicons:document-duplicate" className="h-3 w-3 sm:h-4 sm:w-4" />
-                                        Files ({event.files.length})
-                                    </button>
-                                )}
-                                {isPastEvent && (
-                                    <div className={`badge ${hasAttended ? 'badge-success' : 'badge-ghost'} text-xs gap-1`}>
-                                        <Icon
-                                            icon={hasAttended ? "heroicons:check-circle" : "heroicons:x-circle"}
-                                            className="h-3 w-3"
-                                        />
-                                        {hasAttended ? 'Attended' : 'Not Attended'}
-                                    </div>
-                                )}
-                                <div className="text-xs sm:text-sm opacity-75 ml-auto">
-                                    {event.location}
-                                </div>
+                        {/* Event Details */}
+                        <div className="grid grid-cols-1 gap-1 mb-3 text-xs sm:text-sm">
+                            <div className="flex items-center gap-2">
+                                <Icon icon="heroicons:calendar" className="h-3.5 w-3.5 text-primary" />
+                                <span>
+                                    {startDate.toLocaleDateString("en-US", {
+                                        weekday: "short",
+                                        month: "short",
+                                        day: "numeric",
+                                    })}
+                                </span>
                             </div>
+                            <div className="flex items-center gap-2">
+                                <Icon icon="heroicons:clock" className="h-3.5 w-3.5 text-primary" />
+                                <span>
+                                    {startDate.toLocaleTimeString("en-US", {
+                                        hour: "numeric",
+                                        minute: "2-digit",
+                                    })}
+                                </span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Icon icon="heroicons:map-pin" className="h-3.5 w-3.5 text-primary" />
+                                <span className="line-clamp-1">{event.location || "No location specified"}</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Icon icon="heroicons:tag" className="h-3.5 w-3.5 text-primary" />
+                                <span className="line-clamp-1 capitalize">{event.event_type || "Other"}</span>
+                            </div>
+                        </div>
+
+                        {/* Action Buttons */}
+                        <div className="flex flex-wrap items-center gap-2 mt-auto">
+                            {event.files && event.files.length > 0 && (
+                                <button
+                                    onClick={() => window.openDetailsModal(event as ExtendedEvent)}
+                                    className="btn btn-accent btn-sm text-xs sm:text-sm gap-1 h-8 min-h-0 px-3 shadow-md hover:shadow-lg transition-all duration-300 rounded-full"
+                                >
+                                    <Icon icon="heroicons:document-duplicate" className="h-3 w-3 sm:h-4 sm:w-4" />
+                                    Files ({event.files.length})
+                                </button>
+                            )}
+                            {isPastEvent && (
+                                <div id={`attendance-badge-${event.id}`} className={`badge ${hasAttended ? 'badge-success' : 'badge-ghost'} text-xs gap-1 ml-auto`}>
+                                    <Icon
+                                        icon={hasAttended ? "heroicons:check-circle" : "heroicons:x-circle"}
+                                        className="h-3 w-3"
+                                    />
+                                    {hasAttended ? 'Attended' : 'Not Attended'}
+                                </div>
+                            )}
                         </div>
                     </div>
                 </div>
@@ -245,17 +320,22 @@ const EventLoad = () => {
             const dataSync = DataSyncService.getInstance();
             const auth = Authentication.getInstance();
 
-            console.log("Starting to load events...");
+            // console.log("Starting to load events...");
 
             // Check if user is authenticated
             if (!auth.isAuthenticated()) {
+                // Silently return without error when on dashboard page
+                if (window.location.pathname.includes('/dashboard')) {
+                    setLoading(false);
+                    return;
+                }
                 console.error("User not authenticated, cannot load events");
                 setLoading(false);
                 return;
             }
 
             // Force sync to ensure we have the latest data
-            console.log("Syncing events collection...");
+            // console.log("Syncing events collection...");
             let syncSuccess = false;
             let retryCount = 0;
             const maxRetries = 3;
@@ -263,13 +343,13 @@ const EventLoad = () => {
             while (!syncSuccess && retryCount < maxRetries) {
                 try {
                     if (retryCount > 0) {
-                        console.log(`Retry attempt ${retryCount} of ${maxRetries}...`);
+                        // console.log(`Retry attempt ${retryCount} of ${maxRetries}...`);
                         // Add a small delay between retries
                         await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
                     }
 
                     await dataSync.syncCollection(Collections.EVENTS, "published = true", "-start_date");
-                    console.log("Events collection synced successfully");
+                    // console.log("Events collection synced successfully");
                     syncSuccess = true;
                 } catch (syncError) {
                     retryCount++;
@@ -282,7 +362,7 @@ const EventLoad = () => {
             }
 
             // Get events from IndexedDB
-            console.log("Fetching events from IndexedDB...");
+            // console.log("Fetching events from IndexedDB...");
             const allEvents = await dataSync.getData<Event>(
                 Collections.EVENTS,
                 false, // Don't force sync again
@@ -290,27 +370,27 @@ const EventLoad = () => {
                 "-start_date"
             );
 
-            console.log(`Retrieved ${allEvents.length} events from IndexedDB`);
+            // console.log(`Retrieved ${allEvents.length} events from IndexedDB`);
 
             // Filter out invalid events
             const validEvents = allEvents.filter(event => isValidEvent(event));
-            console.log(`Filtered out ${allEvents.length - validEvents.length} invalid events`);
+            // console.log(`Filtered out ${allEvents.length - validEvents.length} invalid events`);
 
             // If no valid events found in IndexedDB, try fetching directly from PocketBase as fallback
             let eventsToProcess = validEvents;
             if (allEvents.length === 0) {
-                console.log("No events found in IndexedDB, trying direct PocketBase fetch...");
+                // console.log("No events found in IndexedDB, trying direct PocketBase fetch...");
                 try {
                     const pbEvents = await get.getAll<Event>(
                         Collections.EVENTS,
                         "published = true",
                         "-start_date"
                     );
-                    console.log(`Retrieved ${pbEvents.length} events directly from PocketBase`);
+                    // console.log(`Retrieved ${pbEvents.length} events directly from PocketBase`);
 
                     // Filter out invalid events from PocketBase results
                     const validPbEvents = pbEvents.filter(event => isValidEvent(event));
-                    console.log(`Filtered out ${pbEvents.length - validPbEvents.length} invalid events from PocketBase`);
+                    // console.log(`Filtered out ${pbEvents.length - validPbEvents.length} invalid events from PocketBase`);
 
                     eventsToProcess = validPbEvents;
 
@@ -319,7 +399,7 @@ const EventLoad = () => {
                         const dexieService = DexieService.getInstance();
                         const db = dexieService.getDB();
                         if (db && db.events) {
-                            console.log(`Storing ${validPbEvents.length} valid PocketBase events in IndexedDB...`);
+                            // console.log(`Storing ${validPbEvents.length} valid PocketBase events in IndexedDB...`);
                             await db.events.bulkPut(validPbEvents);
                         }
                     }
@@ -329,7 +409,7 @@ const EventLoad = () => {
             }
 
             // Split events into upcoming, ongoing, and past based on start and end dates
-            console.log("Categorizing events...");
+            // console.log("Categorizing events...");
             const now = new Date();
             const { upcoming, ongoing, past } = eventsToProcess.reduce(
                 (acc, event) => {
@@ -382,7 +462,7 @@ const EventLoad = () => {
                 }
             );
 
-            console.log(`Categorized events: ${upcoming.length} upcoming, ${ongoing.length} ongoing, ${past.length} past`);
+            // console.log(`Categorized events: ${upcoming.length} upcoming, ${ongoing.length} ongoing, ${past.length} past`);
 
             // Sort events
             upcoming.sort((a, b) => new Date(a.start_date).getTime() - new Date(b.start_date).getTime());
@@ -409,16 +489,16 @@ const EventLoad = () => {
 
                     // Try to load from IndexedDB only as a last resort
                     try {
-                        console.log("Attempting to load events from IndexedDB only...");
+                        // console.log("Attempting to load events from IndexedDB only...");
                         const dexieService = DexieService.getInstance();
                         const db = dexieService.getDB();
                         if (db && db.events) {
                             const allCachedEvents = await db.events.filter(event => event.published === true).toArray();
-                            console.log(`Found ${allCachedEvents.length} cached events in IndexedDB`);
+                            // console.log(`Found ${allCachedEvents.length} cached events in IndexedDB`);
 
                             // Filter out invalid events
                             const cachedEvents = allCachedEvents.filter(event => isValidEvent(event));
-                            console.log(`Filtered out ${allCachedEvents.length - cachedEvents.length} invalid cached events`);
+                            // console.log(`Filtered out ${allCachedEvents.length - cachedEvents.length} invalid cached events`);
 
                             if (cachedEvents.length > 0) {
                                 // Process these events
@@ -458,7 +538,7 @@ const EventLoad = () => {
                                     ongoing: ongoing.slice(0, 50),
                                     past: past.slice(0, 50)
                                 });
-                                console.log("Successfully loaded events from cache");
+                                // console.log("Successfully loaded events from cache");
                             }
                         }
                     } catch (cacheError) {

src/components/dashboard/LeaderboardSection.astro

@@ -0,0 +1,34 @@
+---
+import LeaderboardTable from "./LeaderboardSection/LeaderboardTable";
+import LeaderboardStats from "./LeaderboardSection/LeaderboardStats";
+---
+
+<div class="grid gap-6">
+    <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+            <h2 class="card-title text-2xl mb-4 flex items-center gap-2">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="w-6 h-6 text-[#f6b93b]"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 00-.584.859 6.753 6.753 0 006.138 5.6 6.73 6.73 0 002.743 1.346A6.707 6.707 0 019.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 00-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 00.75-.75 2.25 2.25 0 00-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 01-1.112-3.173 6.73 6.73 0 002.743-1.347 6.753 6.753 0 006.139-5.6.75.75 0 00-.585-.858 47.077 47.077 0 00-3.07-.543V2.62a.75.75 0 00-.658-.744 49.22 49.22 0 00-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 00-.657.744zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 013.16 5.337a45.6 45.6 0 012.006-.343v.256zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 01-2.863 3.207 6.72 6.72 0 00.857-3.294z"
+                        clip-rule="evenodd"></path>
+                </svg>
+                Leaderboard
+            </h2>
+            <div class="divider mt-0 mb-4"></div>
+
+            <!-- Stats cards -->
+            <div class="mb-6">
+                <LeaderboardStats client:load />
+            </div>
+
+            <!-- Leaderboard table -->
+            <LeaderboardTable client:load />
+        </div>
+    </div>
+</div>

src/components/dashboard/LeaderboardSection/LeaderboardStats.tsx

@@ -0,0 +1,189 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { LimitedUser } from '../../../schemas/pocketbase/schema';
+
+interface LeaderboardStats {
+    totalUsers: number;
+    totalPoints: number;
+    topScore: number;
+    yourPoints: number;
+    yourRank: number | null;
+}
+
+export default function LeaderboardStats() {
+    const [stats, setStats] = useState<LeaderboardStats>({
+        totalUsers: 0,
+        totalPoints: 0,
+        topScore: 0,
+        yourPoints: 0,
+        yourRank: null
+    });
+    const [loading, setLoading] = useState(true);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [currentUserId, setCurrentUserId] = useState<string | null>(null);
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    // Set the current user ID once on component mount
+    useEffect(() => {
+        try {
+            // Use the Authentication class directly
+            const isLoggedIn = auth.isAuthenticated();
+            setIsAuthenticated(isLoggedIn);
+
+            if (isLoggedIn) {
+                const user = auth.getCurrentUser();
+                if (user && user.id) {
+                    setCurrentUserId(user.id);
+                } else {
+                    setLoading(false);
+                }
+            } else {
+                setLoading(false);
+            }
+        } catch (err) {
+            console.error('Error checking authentication:', err);
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        const fetchStats = async () => {
+            try {
+                setLoading(true);
+
+                // Get all users without sorting - we'll sort on client side
+                const response = await get.getList(Collections.LIMITED_USERS, 1, 500, '', '', {
+                    fields: ['id', 'name', 'points']
+                });
+
+                // Parse points from JSON string and convert to number
+                const processedUsers = response.items.map((user: Partial<LimitedUser>) => {
+                    let pointsValue = 0;
+                    try {
+                        if (user.points) {
+                            // Parse the JSON string to get the points value
+                            const pointsData = JSON.parse(user.points);
+                            pointsValue = typeof pointsData === 'number' ? pointsData : 0;
+                        }
+                    } catch (e) {
+                        console.error('Error parsing points data:', e);
+                    }
+
+                    return {
+                        id: user.id,
+                        name: user.name,
+                        parsedPoints: pointsValue
+                    };
+                });
+
+                // Filter out users with no points for the leaderboard stats
+                const leaderboardUsers = processedUsers
+                    .filter(user => user.parsedPoints > 0)
+                    // Sort by points descending
+                    .sort((a, b) => b.parsedPoints - a.parsedPoints);
+
+                const totalUsers = leaderboardUsers.length;
+                const totalPoints = leaderboardUsers.reduce((sum: number, user) => sum + user.parsedPoints, 0);
+                const topScore = leaderboardUsers.length > 0 ? leaderboardUsers[0].parsedPoints : 0;
+
+                // Find current user's points and rank - BUT don't filter by points > 0 for the current user
+                let yourPoints = 0;
+                let yourRank = null;
+
+                if (isAuthenticated && currentUserId) {
+                    // Look for the current user in ALL processed users, not just those with points > 0
+                    const currentUser = processedUsers.find(user => user.id === currentUserId);
+
+                    if (currentUser) {
+                        yourPoints = currentUser.parsedPoints || 0;
+
+                        // Only calculate rank if user has points
+                        if (yourPoints > 0) {
+                            // Find user position in the sorted array
+                            for (let i = 0; i < leaderboardUsers.length; i++) {
+                                if (leaderboardUsers[i].id === currentUserId) {
+                                    yourRank = i + 1;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                setStats({
+                    totalUsers,
+                    totalPoints,
+                    topScore,
+                    yourPoints,
+                    yourRank
+                });
+            } catch (err) {
+                console.error('Error fetching leaderboard stats:', err);
+                // Set fallback stats
+                setStats({
+                    totalUsers: 0,
+                    totalPoints: 0,
+                    topScore: 0,
+                    yourPoints: 0,
+                    yourRank: null
+                });
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchStats();
+    }, [get, isAuthenticated, currentUserId]);
+
+    if (loading) {
+        return (
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                {[1, 2, 3, 4].map((i) => (
+                    <div key={i} className="h-24 bg-gray-100/50 dark:bg-gray-800/50 animate-pulse rounded-xl">
+                        <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded mb-2 mt-4 mx-4"></div>
+                        <div className="h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded mx-4"></div>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="p-6 bg-white/90 dark:bg-gray-800/90 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+                <div className="text-sm font-medium text-gray-600 dark:text-gray-300">Total Members</div>
+                <div className="mt-2 text-3xl font-bold text-gray-800 dark:text-white">{stats.totalUsers}</div>
+                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">In the leaderboard</div>
+            </div>
+
+            <div className="p-6 bg-white/90 dark:bg-gray-800/90 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+                <div className="text-sm font-medium text-gray-600 dark:text-gray-300">Total Points</div>
+                <div className="mt-2 text-3xl font-bold text-gray-800 dark:text-white">{stats.totalPoints}</div>
+                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">Earned by all members</div>
+            </div>
+
+            <div className="p-6 bg-white/90 dark:bg-gray-800/90 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+                <div className="text-sm font-medium text-gray-600 dark:text-gray-300">Top Score</div>
+                <div className="mt-2 text-3xl font-bold text-indigo-600 dark:text-indigo-400">{stats.topScore}</div>
+                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">Highest individual points</div>
+            </div>
+
+            <div className="p-6 bg-white/90 dark:bg-gray-800/90 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+                <div className="text-sm font-medium text-gray-600 dark:text-gray-300">Your Score</div>
+                <div className="mt-2 text-3xl font-bold text-indigo-600 dark:text-indigo-400">
+                    {isAuthenticated ? stats.yourPoints : '-'}
+                </div>
+                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    {isAuthenticated
+                        ? (stats.yourRank ? `Ranked #${stats.yourRank}` : 'Not ranked yet')
+                        : 'Log in to see your rank'
+                    }
+                </div>
+            </div>
+        </div>
+    );
+} 

src/components/dashboard/LeaderboardSection/LeaderboardTable.tsx

@@ -0,0 +1,362 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+import type { User, LimitedUser } from '../../../schemas/pocketbase/schema';
+import { Collections } from '../../../schemas/pocketbase/schema';
+
+interface LeaderboardUser {
+    id: string;
+    name: string;
+    points: number;
+    avatar?: string;
+    major?: string;
+}
+
+// Trophy icon SVG for the rankings
+const TrophyIcon = ({ className }: { className: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+        <path fillRule="evenodd" d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 00-.584.859 6.753 6.753 0 006.138 5.6 6.73 6.73 0 002.743 1.346A6.707 6.707 0 019.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 00-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 00.75-.75 2.25 2.25 0 00-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 01-1.112-3.173 6.73 6.73 0 002.743-1.347 6.753 6.753 0 006.139-5.6.75.75 0 00-.585-.858 47.077 47.077 0 00-3.07-.543V2.62a.75.75 0 00-.658-.744 49.22 49.22 0 00-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 00-.657.744zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 013.16 5.337a45.6 45.6 0 012.006-.343v.256zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 01-2.863 3.207 6.72 6.72 0 00.857-3.294z" clipRule="evenodd" />
+    </svg>
+);
+
+export default function LeaderboardTable() {
+    const [users, setUsers] = useState<LeaderboardUser[]>([]);
+    const [filteredUsers, setFilteredUsers] = useState<LeaderboardUser[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [currentUserRank, setCurrentUserRank] = useState<number | null>(null);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const usersPerPage = 10;
+
+    const [currentUserId, setCurrentUserId] = useState<string | null>(null);
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    // Set the current user ID once on component mount
+    useEffect(() => {
+        try {
+            // Use the Authentication class directly
+            const isLoggedIn = auth.isAuthenticated();
+            setIsAuthenticated(isLoggedIn);
+
+            if (isLoggedIn) {
+                const user = auth.getCurrentUser();
+                if (user && user.id) {
+                    setCurrentUserId(user.id);
+                } else {
+                    setLoading(false);
+                }
+            } else {
+                setLoading(false);
+            }
+        } catch (err) {
+            console.error('Error checking authentication:', err);
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        const fetchLeaderboard = async () => {
+            try {
+                setLoading(true);
+
+                // Fetch users without sorting - we'll sort on client side
+                const response = await get.getList(Collections.LIMITED_USERS, 1, 100, '', '', {
+                    fields: ['id', 'name', 'points', 'avatar', 'major']
+                });
+
+                // First get the current user separately so we can include them even if they have 0 points
+                let currentUserData = null;
+                if (isAuthenticated && currentUserId) {
+                    currentUserData = response.items.find((user: Partial<LimitedUser>) => user.id === currentUserId);
+                }
+
+                // Parse points from JSON string and convert to number
+                const processedUsers = response.items.map((user: any) => {
+                    let pointsValue = 0;
+                    try {
+                        if (user.points) {
+                            // Parse the JSON string to get the points value
+                            const pointsData = JSON.parse(user.points);
+                            pointsValue = typeof pointsData === 'number' ? pointsData : 0;
+                        }
+                    } catch (e) {
+                        console.error('Error parsing points data:', e);
+                    }
+
+                    return {
+                        id: user.id,
+                        name: user.name,
+                        major: user.major,
+                        avatar: user.avatar, // Include avatar if it exists
+                        points: user.points,
+                        parsedPoints: pointsValue
+                    };
+                });
+
+                // Filter and map to our leaderboard user format, and sort client-side
+                let leaderboardUsers = processedUsers
+                    .filter(user => user.parsedPoints > 0)
+                    .sort((a, b) => (b.parsedPoints || 0) - (a.parsedPoints || 0))
+                    .map((user, index: number) => {
+                        // Check if this is the current user
+                        if (isAuthenticated && user.id === currentUserId) {
+                            setCurrentUserRank(index + 1);
+                        }
+
+                        return {
+                            id: user.id || '',
+                            name: user.name || 'Anonymous User',
+                            points: user.parsedPoints,
+                            avatar: user.avatar,
+                            major: user.major
+                        };
+                    });
+
+                // Include current user even if they have 0 points,
+                // but don't include in ranking if they have no points
+                if (isAuthenticated && currentUserId) {
+                    // Find current user in processed users
+                    const currentUserProcessed = processedUsers.find(user => user.id === currentUserId);
+
+                    // If current user exists and isn't already in the leaderboard (has 0 points)
+                    if (currentUserProcessed && !leaderboardUsers.some(user => user.id === currentUserId)) {
+                        leaderboardUsers.push({
+                            id: currentUserProcessed.id || '',
+                            name: currentUserProcessed.name || 'Anonymous User',
+                            points: currentUserProcessed.parsedPoints || 0,
+                            avatar: currentUserProcessed.avatar,
+                            major: currentUserProcessed.major
+                        });
+                    }
+                }
+
+                setUsers(leaderboardUsers);
+                setFilteredUsers(leaderboardUsers);
+            } catch (err) {
+                console.error('Error fetching leaderboard:', err);
+                setError('Failed to load leaderboard data');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchLeaderboard();
+    }, [get, isAuthenticated, currentUserId]);
+
+    useEffect(() => {
+        if (searchQuery.trim() === '') {
+            setFilteredUsers(users);
+            setCurrentPage(1);
+            return;
+        }
+
+        const filtered = users.filter(user =>
+            user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            (user.major && user.major.toLowerCase().includes(searchQuery.toLowerCase()))
+        );
+
+        setFilteredUsers(filtered);
+        setCurrentPage(1);
+    }, [searchQuery, users]);
+
+    // Get current users for pagination
+    const indexOfLastUser = currentPage * usersPerPage;
+    const indexOfFirstUser = indexOfLastUser - usersPerPage;
+    const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
+    const totalPages = Math.ceil(filteredUsers.length / usersPerPage);
+
+    const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center py-10">
+                <div className="w-10 h-10 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                <div className="flex items-center">
+                    <svg className="w-5 h-5 text-red-600 dark:text-red-400 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-red-800 dark:text-red-200">{error}</span>
+                </div>
+            </div>
+        );
+    }
+
+    if (users.length === 0) {
+        return (
+            <div className="text-center py-10">
+                <p className="text-gray-600 dark:text-gray-300">No users with points found</p>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            {/* Search bar */}
+            <div className="relative mb-6">
+                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                    <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                </div>
+                <input
+                    type="text"
+                    placeholder="Search by name or major..."
+                    className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg 
+                    bg-white/90 dark:bg-gray-800/90 text-gray-700 dark:text-gray-200 focus:outline-none 
+                    focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                />
+            </div>
+
+            {/* Leaderboard table */}
+            <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead className="bg-gray-50/80 dark:bg-gray-800/80">
+                        <tr>
+                            <th scope="col" className="w-16 px-6 py-3 text-center text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider">
+                                Rank
+                            </th>
+                            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider">
+                                User
+                            </th>
+                            <th scope="col" className="w-24 px-6 py-3 text-center text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider">
+                                Points
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody className="bg-white/90 dark:bg-gray-900/90 divide-y divide-gray-200 dark:divide-gray-800">
+                        {currentUsers.map((user, index) => {
+                            const actualRank = user.points > 0 ? indexOfFirstUser + index + 1 : null;
+                            const isCurrentUser = user.id === currentUserId;
+
+                            return (
+                                <tr key={user.id} className={isCurrentUser ? 'bg-indigo-50 dark:bg-indigo-900/20' : ''}>
+                                    <td className="px-6 py-4 whitespace-nowrap text-center">
+                                        {actualRank ? (
+                                            actualRank <= 3 ? (
+                                                <span className="inline-flex items-center justify-center w-8 h-8">
+                                                    {actualRank === 1 && <TrophyIcon className="text-yellow-500 w-6 h-6" />}
+                                                    {actualRank === 2 && <TrophyIcon className="text-gray-400 w-6 h-6" />}
+                                                    {actualRank === 3 && <TrophyIcon className="text-amber-700 w-6 h-6" />}
+                                                </span>
+                                            ) : (
+                                                <span className="font-medium text-gray-800 dark:text-gray-100">{actualRank}</span>
+                                            )
+                                        ) : (
+                                            <span className="text-xs text-gray-500 dark:text-gray-400">Not Ranked</span>
+                                        )}
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap">
+                                        <div className="flex items-center">
+                                            <div className="flex-shrink-0 h-10 w-10">
+                                                <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden relative">
+                                                    {user.avatar ? (
+                                                        <img className="h-10 w-10 rounded-full" src={user.avatar} alt={user.name} />
+                                                    ) : (
+                                                        <span className="absolute inset-0 flex items-center justify-center text-lg font-bold text-gray-700 dark:text-gray-300">
+                                                            {user.name.charAt(0).toUpperCase()}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            </div>
+                                            <div className="ml-4">
+                                                <div className="text-sm font-medium text-gray-800 dark:text-gray-100">
+                                                    {user.name}
+                                                </div>
+                                                {user.major && (
+                                                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                                                        {user.major}
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-center font-bold text-indigo-600 dark:text-indigo-400">
+                                        {user.points}
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+                <div className="flex justify-center mt-6">
+                    <nav className="flex items-center">
+                        <button
+                            className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 
+                            bg-white/90 dark:bg-gray-800/90 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+                            onClick={() => paginate(Math.max(1, currentPage - 1))}
+                            disabled={currentPage === 1}
+                        >
+                            <span className="sr-only">Previous</span>
+                            <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+                            </svg>
+                        </button>
+
+                        {Array.from({ length: totalPages }, (_, i) => (
+                            <button
+                                key={i + 1}
+                                className={`relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 
+                                bg-white/90 dark:bg-gray-800/90 text-sm font-medium ${currentPage === i + 1
+                                        ? 'text-indigo-600 dark:text-indigo-400 border-indigo-500 dark:border-indigo-500 z-10'
+                                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+                                    }`}
+                                onClick={() => paginate(i + 1)}
+                            >
+                                {i + 1}
+                            </button>
+                        ))}
+
+                        <button
+                            className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 
+                            bg-white/90 dark:bg-gray-800/90 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+                            onClick={() => paginate(Math.min(totalPages, currentPage + 1))}
+                            disabled={currentPage === totalPages}
+                        >
+                            <span className="sr-only">Next</span>
+                            <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                            </svg>
+                        </button>
+                    </nav>
+                </div>
+            )}
+
+            {/* Show current user rank if not in current page */}
+            {isAuthenticated && currentUserRank && !currentUsers.some(user => user.id === currentUserId) && (
+                <div className="mt-4 p-3 bg-gray-50/80 dark:bg-gray-800/80 border border-gray-200 dark:border-gray-700 rounded-lg">
+                    <p className="text-center text-sm text-gray-700 dark:text-gray-300">
+                        Your rank: <span className="font-bold text-indigo-600 dark:text-indigo-400">#{currentUserRank}</span>
+                    </p>
+                </div>
+            )}
+
+            {/* Current user with 0 points */}
+            {isAuthenticated && currentUserId &&
+                !currentUserRank &&
+                currentUsers.some(user => user.id === currentUserId) && (
+                    <div className="mt-4 p-3 bg-gray-50/80 dark:bg-gray-800/80 border border-gray-200 dark:border-gray-700 rounded-lg">
+                        <p className="text-center text-sm text-gray-700 dark:text-gray-300">
+                            Participate in events to earn points and get ranked!
+                        </p>
+                    </div>
+                )}
+        </div>
+    );
+} 

src/components/dashboard/OfficerManagement.astro

@@ -0,0 +1,11 @@
+---
+import OfficerManagementComponent from "./OfficerManagement/OfficerManagement";
+---
+
+<section>
+    <h2 class="text-2xl font-bold mb-6">Officer Management</h2>
+
+    <div class="bg-gray-800 shadow-md rounded-lg p-6">
+        <OfficerManagementComponent client:load />
+    </div>
+</section>

src/components/dashboard/Officer_EmailManagement.astro

@@ -0,0 +1,89 @@
+---
+import { Icon } from "astro-icon/components";
+import EmailRequestSettings from "./SettingsSection/EmailRequestSettings";
+
+// Import environment variables for debugging if needed
+const logtoApiEndpoint = import.meta.env.LOGTO_API_ENDPOINT || "";
+---
+<div id="officer-email-section" class="">
+    <div class="mb-6">
+        <h2 class="text-2xl font-bold">IEEE Email Management</h2>
+        <p class="opacity-70">Manage your official IEEE UCSD email address</p>
+    </div>
+
+    <!-- IEEE Email Management Card -->
+    <div
+        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
+    >
+        <div class="card-body">
+            <h3 class="card-title flex items-center gap-3">
+                <div
+                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
+                >
+                    <Icon name="heroicons:envelope" class="h-5 w-5" />
+                </div>
+                IEEE Email Address
+            </h3>
+            <p class="text-sm opacity-70 mb-4">
+                Request and manage your official IEEE UCSD email address. This email can be used for official IEEE communications and professional purposes.
+            </p>
+            <div class="h-px w-full bg-border my-4"></div>
+            <EmailRequestSettings client:load />
+        </div>
+    </div>
+
+    <!-- Email Guidelines Card -->
+    <div
+        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
+    >
+        <div class="card-body">
+            <h3 class="card-title flex items-center gap-3">
+                <div
+                    class="inline-flex items-center justify-center p-3 rounded-full bg-info text-info-foreground"
+                >
+                    <Icon name="heroicons:information-circle" class="h-5 w-5" />
+                </div>
+                Email Usage Guidelines
+            </h3>
+            <div class="space-y-4 text-sm">
+                <div class="alert alert-info">
+                    <Icon name="heroicons:information-circle" class="h-4 w-4" />
+                    <div>
+                        <h4 class="font-bold">Officer Email Access</h4>
+                        <p>IEEE email addresses are only available to active IEEE UCSD officers. Your officer status is automatically verified when you request an email.</p>
+                    </div>
+                </div>
+                
+                <div class="space-y-2">
+                    <h4 class="font-semibold">Acceptable Use:</h4>
+                    <ul class="list-disc list-inside space-y-1 opacity-80">
+                        <li>Official IEEE UCSD communications</li>
+                        <li>Professional networking related to IEEE activities</li>
+                        <li>Event coordination and planning</li>
+                        <li>Communications with sponsors and external partners</li>
+                    </ul>
+                </div>
+
+                <div class="space-y-2">
+                    <h4 class="font-semibold">Email Features:</h4>
+                    <ul class="list-disc list-inside space-y-1 opacity-80">
+                        <li>Webmail access at <a href="https://mail.ieeeucsd.org" target="_blank" rel="noopener noreferrer" class="link link-primary">https://mail.ieeeucsd.org</a></li>
+                        <li>IMAP/SMTP support for email clients</li>
+                        <li>5GB storage space</li>
+                        <li>Professional @ieeeucsd.org domain</li>
+                    </ul>
+                </div>
+
+                <div class="space-y-2">
+                    <h4 class="font-semibold">Important Notes:</h4>
+                    <ul class="list-disc list-inside space-y-1 opacity-80">
+                        <li>Your email username is based on your personal email address</li>
+                        <li>Passwords can be reset through this interface</li>
+                        <li>Email access may be revoked when officer status changes</li>
+                        <li>Contact the webmaster for any technical issues</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div> 

src/components/dashboard/Officer_EventManagement/Attendees.tsx

@@ -287,7 +287,7 @@ export default function Attendees() {
         const fetchEventData = async () => {
             if (!eventId || !auth.isAuthenticated()) {
                 if (!auth.isAuthenticated()) {
-                    console.log('User not authenticated');
+                    // console.log('User not authenticated');
                     setError('Authentication required');
                 }
                 return;

src/components/dashboard/Officer_EventManagement/EventEditor.tsx

@@ -5,6 +5,7 @@ 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 { Realtime } from "../../../scripts/pocketbase/Realtime";
 import FilePreview from "../universal/FilePreview";
 import type { Event as SchemaEvent, AttendeeEntry } from "../../../schemas/pocketbase";
 import { DataSyncService } from '../../../scripts/database/DataSyncService';
@@ -132,6 +133,28 @@ const EventForm = memo(({
                         />
                     </div>
 
+                    {/* Event Type */}
+                    <div className="form-control">
+                        <label className="label">
+                            <span className="label-text">Event Type</span>
+                            <span className="label-text-alt text-error">*</span>
+                        </label>
+                        <select
+                            name="editEventType"
+                            className="select select-bordered"
+                            value={event?.event_type || "other"}
+                            onChange={(e) => handleChange('event_type', e.target.value)}
+                            required
+                        >
+                            <option value="social">Social</option>
+                            <option value="technical">Technical</option>
+                            <option value="outreach">Outreach</option>
+                            <option value="professional">Professional</option>
+                            <option value="workshop">Projects</option>
+                            <option value="other">Other</option>
+                        </select>
+                    </div>
+
                     {/* Points to Reward */}
                     <div className="form-control">
                         <label className="label">
@@ -142,7 +165,7 @@ const EventForm = memo(({
                             type="number"
                             name="editEventPoints"
                             className="input input-bordered"
-                            value={event?.points_to_reward || 0}
+                            value={event?.points_to_reward || ""}
                             onChange={(e) => handleChange('points_to_reward', Number(e.target.value))}
                             min="0"
                             required
@@ -240,7 +263,15 @@ const EventForm = memo(({
                                 // Show error for rejected files
                                 if (rejectedFiles.length > 0) {
                                     const errorMessage = `The following files were not added:\n${rejectedFiles.map(f => `${f.name}: ${f.reason}`).join('\n')}`;
-                                    toast.error(errorMessage);
+                                    // Use toast with custom styling to ensure visibility above modal
+                                    toast.error(errorMessage, {
+                                        duration: 5000,
+                                        style: {
+                                            zIndex: 9999, // Ensure it's above the modal
+                                            maxWidth: '500px',
+                                            whiteSpace: 'pre-line' // Preserve line breaks
+                                        }
+                                    });
                                 }
 
                                 setSelectedFiles(newFiles);
@@ -293,6 +324,31 @@ const EventForm = memo(({
                                             >
                                                 <Icon icon="heroicons:eye" className="h-4 w-4" />
                                             </button>
+                                            <button
+                                                type="button"
+                                                className="btn btn-ghost btn-xs"
+                                                onClick={async () => {
+                                                    if (event?.id) {
+                                                        try {
+                                                            // Get file URL with token for protected files
+                                                            const url = await fileManager.getFileUrlWithToken(
+                                                                "events",
+                                                                event.id,
+                                                                filename,
+                                                                true
+                                                            );
+
+                                                            // Open file in new tab
+                                                            window.open(url, '_blank');
+                                                        } catch (error) {
+                                                            console.error("Failed to open file:", error);
+                                                            toast.error("Failed to open file. Please try again.");
+                                                        }
+                                                    }
+                                                }}
+                                            >
+                                                <Icon icon="heroicons:arrow-top-right-on-square" className="h-4 w-4" />
+                                            </button>
                                             <div className="text-error">
                                                 {filesToDelete.has(filename) ? (
                                                     <button
@@ -401,6 +457,7 @@ interface EventChanges {
     end_date?: string;
     published?: boolean;
     has_food?: boolean;
+    event_type?: string;
 }
 
 interface FileChanges {
@@ -487,7 +544,8 @@ class ChangeTracker {
             'start_date',
             'end_date',
             'published',
-            'has_food'
+            'has_food',
+            'event_type'
         ];
 
         for (const field of fields) {
@@ -550,11 +608,12 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
         event_code: "",
         location: "",
         files: [],
-        points_to_reward: 0,
+        points_to_reward: null as unknown as number,
         start_date: "",
         end_date: "",
         published: false,
-        has_food: false
+        has_food: false,
+        event_type: "other"
     });
 
     const [previewUrl, setPreviewUrl] = useState("");
@@ -571,7 +630,8 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
         auth: Authentication.getInstance(),
         update: Update.getInstance(),
         fileManager: FileManager.getInstance(),
-        sendLog: SendLog.getInstance()
+        sendLog: SendLog.getInstance(),
+        realtime: Realtime.getInstance()
     }), []);
 
     // Handle field changes
@@ -590,17 +650,35 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
     const initializeEventData = useCallback(async (eventId: string) => {
         try {
             if (eventId) {
+                // Show loading state
+                setIsSubmitting(true);
+
                 // Clear cache to ensure fresh data
                 const dataSync = DataSyncService.getInstance();
                 await dataSync.clearCache();
 
-                // Fetch fresh event data
-                const eventData = await services.get.getOne<Event>(Collections.EVENTS, eventId);
+                // Fetch fresh event data with expanded relations if needed
+                const eventData = await services.get.getOne<Event>(
+                    Collections.EVENTS,
+                    eventId,
+                    {
+                        disableAutoCancellation: true,
+                        // Add any fields to expand if needed
+                        // expand: ['related_field1', 'related_field2']
+                    }
+                );
 
                 if (!eventData) {
                     throw new Error("Event not found");
                 }
 
+                // Log successful data fetch
+                await services.sendLog.send(
+                    "view",
+                    "event",
+                    `Loaded event data: ${eventData.event_name} (${eventId})`
+                );
+
                 // Ensure dates are properly formatted for datetime-local input
                 if (eventData.start_date) {
                     // Convert to Date object first to ensure proper formatting
@@ -624,15 +702,44 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
                     event_code: eventData.event_code || '',
                     location: eventData.location || '',
                     files: eventData.files || [],
-                    points_to_reward: eventData.points_to_reward || 0,
+                    points_to_reward: eventData.points_to_reward || null as unknown as number,
                     start_date: eventData.start_date || '',
                     end_date: eventData.end_date || '',
                     published: eventData.published || false,
-                    has_food: eventData.has_food || false
+                    has_food: eventData.has_food || false,
+                    event_type: eventData.event_type || 'other'
                 });
 
-                console.log("Event data loaded successfully:", eventData);
+                // Set up realtime subscription for this event
+                const realtime = services.realtime;
+
+                // Define the RealtimeEvent type for proper typing
+                interface RealtimeEvent<T> {
+                    action: "create" | "update" | "delete";
+                    record: T;
+                }
+
+                const subscriptionId = realtime.subscribeToRecord<RealtimeEvent<Event>>(
+                    Collections.EVENTS,
+                    eventId,
+                    (data) => {
+                        if (data.action === "update") {
+                            // Auto-refresh data when event is updated elsewhere
+                            initializeEventData(eventId);
+                            toast.success("Event data has been updated");
+                        }
+                    }
+                );
+
+                // Store subscription ID for cleanup
+                (window as any).eventSubscriptionId = subscriptionId;
+
+                // console.log("Event data loaded successfully:", eventData);
             } else {
+                // Creating a new event
+                const now = new Date();
+                const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
+
                 setEvent({
                     id: '',
                     created: '',
@@ -642,11 +749,12 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
                     event_code: '',
                     location: '',
                     files: [],
-                    points_to_reward: 0,
-                    start_date: '',
-                    end_date: '',
+                    points_to_reward: null as unknown as number,
+                    start_date: Get.formatLocalDate(now, false),
+                    end_date: Get.formatLocalDate(oneHourLater, false),
                     published: false,
-                    has_food: false
+                    has_food: false,
+                    event_type: "other"
                 });
             }
             setSelectedFiles(new Map());
@@ -656,8 +764,10 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
         } catch (error) {
             console.error("Failed to initialize event data:", error);
             toast.error("Failed to load event data. Please try again.");
+        } finally {
+            setIsSubmitting(false);
         }
-    }, [services.get]);
+    }, [services]);
 
     // Expose initializeEventData to window
     useEffect(() => {
@@ -693,11 +803,17 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
     }, []);
 
     const handleModalClose = useCallback(() => {
-        if (hasUnsavedChanges) {
+        if (hasUnsavedChanges && !isSubmitting) {
             const confirmed = window.confirm('You have unsaved changes. Are you sure you want to close?');
             if (!confirmed) return;
         }
 
+        // Clean up realtime subscription if it exists
+        if ((window as any).eventSubscriptionId) {
+            services.realtime.unsubscribe((window as any).eventSubscriptionId);
+            delete (window as any).eventSubscriptionId;
+        }
+
         setEvent({
             id: "",
             created: "",
@@ -707,11 +823,12 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
             event_code: "",
             location: "",
             files: [],
-            points_to_reward: 0,
+            points_to_reward: null as unknown as number,
             start_date: "",
             end_date: "",
             published: false,
-            has_food: false
+            has_food: false,
+            event_type: "other"
         });
         setSelectedFiles(new Map());
         setFilesToDelete(new Set());
@@ -719,9 +836,55 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
         setPreviewUrl("");
         setPreviewFilename("");
 
+        // Clear file input element to reset filename display
+        const fileInput = document.querySelector('input[name="editEventFiles"]') as HTMLInputElement;
+        if (fileInput) {
+            fileInput.value = "";
+        }
+
         const modal = document.getElementById("editEventModal") as HTMLDialogElement;
         if (modal) modal.close();
-    }, [hasUnsavedChanges]);
+    }, [hasUnsavedChanges, isSubmitting, services.realtime]);
+
+    // Function to close modal after saving (without confirmation)
+    const closeModalAfterSave = useCallback(() => {
+        // Clean up realtime subscription if it exists
+        if ((window as any).eventSubscriptionId) {
+            services.realtime.unsubscribe((window as any).eventSubscriptionId);
+            delete (window as any).eventSubscriptionId;
+        }
+
+        setEvent({
+            id: "",
+            created: "",
+            updated: "",
+            event_name: "",
+            event_description: "",
+            event_code: "",
+            location: "",
+            files: [],
+            points_to_reward: null as unknown as number,
+            start_date: "",
+            end_date: "",
+            published: false,
+            has_food: false,
+            event_type: "other"
+        });
+        setSelectedFiles(new Map());
+        setFilesToDelete(new Set());
+        setShowPreview(false);
+        setPreviewUrl("");
+        setPreviewFilename("");
+
+        // Reset the file input element to clear the filename display
+        const fileInput = document.querySelector('input[name="editEventFiles"]') as HTMLInputElement;
+        if (fileInput) {
+            fileInput.value = "";
+        }
+
+        const modal = document.getElementById("editEventModal") as HTMLDialogElement;
+        if (modal) modal.close();
+    }, [services.realtime]);
 
     const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
@@ -751,11 +914,12 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
                 event_code: formData.get("editEventCode") as string,
                 location: formData.get("editEventLocation") as string,
                 files: event.files || [],
-                points_to_reward: parseInt(formData.get("editEventPoints") as string) || 0,
+                points_to_reward: formData.get("editEventPoints") ? parseInt(formData.get("editEventPoints") as string) : null as unknown as number,
                 start_date: formData.get("editEventStartDate") as string,
                 end_date: formData.get("editEventEndDate") as string,
                 published: formData.get("editEventPublished") === "on",
-                has_food: formData.get("editEventHasFood") === "on"
+                has_food: formData.get("editEventHasFood") === "on",
+                event_type: formData.get("editEventType") as string || "other"
             };
 
             // Log the update attempt
@@ -784,7 +948,7 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
 
                     // 1. Remove files marked for deletion
                     if (filesToDelete.size > 0) {
-                        console.log(`Removing ${filesToDelete.size} files from event ${event.id}`);
+                        // console.log(`Removing ${filesToDelete.size} files from event ${event.id}`);
                         currentFiles = currentFiles.filter(file => !filesToDelete.has(file));
 
                         // Update the files field first to remove deleted files
@@ -797,7 +961,7 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
 
                     // 2. Add new files one by one to preserve existing ones
                     if (selectedFiles.size > 0) {
-                        console.log(`Adding ${selectedFiles.size} new files to event ${event.id}`);
+                        // console.log(`Adding ${selectedFiles.size} new files to event ${event.id}`);
 
                         // Convert Map to array of File objects
                         const newFiles = Array.from(selectedFiles.values());
@@ -834,8 +998,11 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
                 // Call the onEventSaved callback if provided
                 if (onEventSaved) onEventSaved();
 
+                // Reset unsaved changes flag before closing
+                setHasUnsavedChanges(false);
+
                 // Close the modal
-                handleModalClose();
+                closeModalAfterSave();
 
             } else {
                 // We're creating a new event
@@ -849,7 +1016,7 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
 
                 // Then upload files if any
                 if (selectedFiles.size > 0 && newEvent?.id) {
-                    console.log(`Adding ${selectedFiles.size} files to new event ${newEvent.id}`);
+                    // console.log(`Adding ${selectedFiles.size} files to new event ${newEvent.id}`);
 
                     // Convert Map to array of File objects
                     const newFiles = Array.from(selectedFiles.values());
@@ -875,8 +1042,11 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
                 // Call the onEventSaved callback if provided
                 if (onEventSaved) onEventSaved();
 
+                // Reset unsaved changes flag before closing
+                setHasUnsavedChanges(false);
+
                 // Close the modal
-                handleModalClose();
+                closeModalAfterSave();
             }
 
             // Refresh events list if available
@@ -889,7 +1059,7 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
             setIsSubmitting(false);
             window.hideLoading?.();
         }
-    }, [event, selectedFiles, filesToDelete, services, onEventSaved, isSubmitting, handleModalClose]);
+    }, [event, selectedFiles, filesToDelete, services, onEventSaved, isSubmitting, closeModalAfterSave]);
 
 
     return (

src/components/dashboard/Officer_EventRequestForm.astro

@@ -5,7 +5,7 @@ import EventRequestForm from "./Officer_EventRequestForm/EventRequestForm";
 import UserEventRequests from "./Officer_EventRequestForm/UserEventRequests";
 import { Collections } from "../../schemas/pocketbase/schema";
 import { DataSyncService } from "../../scripts/database/DataSyncService";
-import { EventRequestFormPreviewModal } from "./Officer_EventRequestForm/EventRequestFormPreview";
+import { EventRequestFormPreviewModalWrapper } from "./Officer_EventRequestForm/EventRequestFormPreview";
 
 // Import the EventRequest type from UserEventRequests to ensure consistency
 import type { EventRequest as UserEventRequest } from "./Officer_EventRequestForm/UserEventRequests";
@@ -25,313 +25,244 @@ let error: string | null = null;
 // This provides initial data for server-side rendering
 // Client-side will use IndexedDB for data management
 if (auth.isAuthenticated()) {
-    try {
-        const userId = auth.getUserId();
-        if (userId) {
-            userEventRequests = await get.getAll<EventRequest>(
-                Collections.EVENT_REQUESTS,
-                `requested_user="${userId}"`,
-                "-created"
-            );
-        }
-    } catch (err) {
-        console.error("Failed to fetch user event requests:", err);
-        error = "Failed to load your event requests. Please try again later.";
+  try {
+    const userId = auth.getUserId();
+    if (userId) {
+      userEventRequests = await get.getAll<EventRequest>(
+        Collections.EVENT_REQUESTS,
+        `requested_user="${userId}"`,
+        "-created",
+      );
     }
+  } catch (err) {
+    console.error("Failed to fetch user event requests:", err);
+    error = "Failed to load your event requests. Please try again later.";
+  }
 }
 ---
 
 <div class="w-full max-w-6xl mx-auto py-8 px-4">
-    <div class="mb-8">
-        <h1 class="text-3xl font-bold text-white mb-2">Event Request Form</h1>
-        <p class="text-gray-300 mb-4">
-            Submit your event request at least 6 weeks before your event. After
-            submitting, please notify PR and/or Coordinators in the #-events
-            Slack channel.
-        </p>
-        <div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300">
-            <p class="font-medium mb-2">This form includes sections for:</p>
-            <ul class="list-disc list-inside space-y-1 ml-2">
-                <li>PR Materials (if needed)</li>
-                <li>Event Details</li>
-                <li>TAP Form Information</li>
-                <li>AS Funding (if needed)</li>
-            </ul>
-            <p class="mt-3">
-                Your progress is automatically saved as you fill out the form.
-            </p>
-        </div>
+  <div class="mb-8">
+    <h1 class="text-3xl font-bold text-white mb-2">Event Request Form</h1>
+    <p class="text-gray-300 mb-4">
+      Submit your event request at least 6 weeks before your event. After
+      submitting, please notify PR and/or Coordinators in the #-events Slack
+      channel.
+    </p>
+    <div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300">
+      <p class="font-medium mb-2">This form includes sections for:</p>
+      <ul class="list-disc list-inside space-y-1 ml-2">
+        <li>PR Materials (if needed)</li>
+        <li>Event Details</li>
+        <li>TAP Form Information</li>
+        <li>AS Funding (if needed)</li>
+      </ul>
+      <p class="mt-3">
+        Your progress is automatically saved as you fill out the form.
+      </p>
     </div>
+  </div>
 
-    <!-- Tabs -->
-    <div class="tabs tabs-boxed mb-6">
-        <a class="tab tab-lg tab-active" id="form-tab">Submit Event Request</a>
-        <a class="tab tab-lg" id="submissions-tab">View Your Submissions</a>
+  <!-- Tabs -->
+  <div class="tabs tabs-boxed mb-6">
+    <a class="tab tab-lg tab-active" id="form-tab">Submit Event Request</a>
+    <a class="tab tab-lg" id="submissions-tab">View Your Submissions</a>
+  </div>
+
+  <!-- Form Tab Content -->
+  <div
+    id="form-content"
+    class="bg-base-200 rounded-lg shadow-xl overflow-hidden"
+  >
+    <div class="p-6">
+      <EventRequestForm client:load />
     </div>
+  </div>
 
-    <!-- Form Tab Content -->
-    <div
-        id="form-content"
-        class="bg-base-200 rounded-lg shadow-xl overflow-hidden"
-    >
-        <div class="p-6">
-            <EventRequestForm client:load />
-        </div>
-    </div>
-
-    <!-- Submissions Tab Content -->
-    <div id="submissions-content" class="hidden">
-        <div class="bg-base-200 rounded-lg shadow-xl overflow-hidden p-6">
-            <h2 class="text-2xl font-bold text-white mb-4">
-                Your Event Request Submissions
-            </h2>
-
-            {
-                error && (
-                    <div class="alert alert-error mb-6">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-6 w-6 stroke-current shrink-0"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                            />
-                        </svg>
-                        <span>{error}</span>
-                    </div>
-                )
-            }
-
-            {
-                !error && (
-                    <UserEventRequests
-                        client:load
-                        eventRequests={userEventRequests}
-                    />
-                )
-            }
-        </div>
+  <!-- Submissions Tab Content -->
+  <div id="submissions-content" class="hidden">
+    <div class="bg-base-200 rounded-lg shadow-xl overflow-hidden p-6">
+      <h2 class="text-2xl font-bold text-white mb-4">
+        Your Event Request Submissions
+      </h2>
+
+      {
+        error && (
+          <div class="alert alert-error mb-6">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 stroke-current shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span>{error}</span>
+          </div>
+        )
+      }
+
+      {
+        !error && (
+          <UserEventRequests client:load eventRequests={userEventRequests} />
+        )
+      }
     </div>
+  </div>
 </div>
 
+<!-- The modal will be rendered through the global function and event system -->
+<EventRequestFormPreviewModalWrapper client:load />
+
 <style is:global>
-    /* Ensure the modal container is always visible */
-    #event-request-preview-modal-container {
-        position: fixed !important;
-        top: 0 !important;
-        left: 0 !important;
-        width: 100vw !important;
-        height: 100vh !important;
-        z-index: 99999 !important;
-        overflow: auto !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
+  /* Ensure the modal container is always visible */
+  #event-request-preview-modal-overlay {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: 100vw !important;
+    max-height: 100vh !important;
+    z-index: 999999 !important;
+    overflow: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    backdrop-filter: blur(4px) !important;
+  }
 
-    /* Style for the modal backdrop */
-    #event-request-preview-modal-container > div > div:first-child {
-        position: fixed !important;
-        top: 0 !important;
-        left: 0 !important;
-        width: 100vw !important;
-        height: 100vh !important;
-        z-index: 99999 !important;
-        background-color: rgba(0, 0, 0, 0.8) !important;
-        backdrop-filter: blur(8px) !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        overflow: auto !important;
-    }
-
-    /* Style for the modal content */
-    #event-request-preview-modal-container > div > div > div {
-        z-index: 100000 !important;
-        position: relative !important;
-        max-width: 90vw !important;
-        width: 100% !important;
-        max-height: 90vh !important;
-        overflow: auto !important;
-        margin: 2rem !important;
-    }
+  /* Style for the modal content */
+  #event-request-preview-modal-overlay > div {
+    z-index: 1000000 !important;
+    position: relative !important;
+    max-width: min(90vw, 1024px) !important;
+    width: 100% !important;
+    max-height: 90vh !important;
+    overflow: auto !important;
+    margin: 0 !important;
+    background-color: var(--color-base-100) !important;
+    border-radius: 1rem !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  }
 </style>
 
-<!-- Add the modal component -->
-<EventRequestFormPreviewModal client:load />
-
-<div class="dashboard-section hidden" id="eventRequestFormSection">
-    <!-- ... existing code ... -->
-</div>
-
 <script is:inline>
-    // Define the global function immediately to ensure it's available
-    window.showEventRequestFormPreview = function (formData) {
-        console.log(
-            "Global showEventRequestFormPreview called with data",
-            formData
-        );
+  // Define the global function immediately to ensure it's available
+  window.showEventRequestFormPreview = function (formData) {
+    console.log("showEventRequestFormPreview called with formData:", formData);
 
-        // Remove any elements that might be obstructing the view
-        const removeObstructions = () => {
-            // Find any elements with high z-index that might be obstructing
-            document.querySelectorAll('[style*="z-index"]').forEach((el) => {
-                if (
-                    el.id !== "event-request-preview-modal-container" &&
-                    !el.closest("#event-request-preview-modal-container")
-                ) {
-                    // Store original z-index to restore later
-                    if (!el.dataset.originalZIndex) {
-                        el.dataset.originalZIndex = el.style.zIndex;
-                    }
-                    // Temporarily lower z-index
-                    el.style.zIndex = "0";
-                }
-            });
-        };
+    // Create a custom event to trigger the preview
+    const event = new CustomEvent("showEventRequestPreviewModal", {
+      detail: { formData },
+    });
 
-        // Create a custom event to trigger the preview
-        const event = new CustomEvent("showEventRequestPreviewModal", {
-            detail: { formData },
-        });
+    console.log("Dispatching event with detail:", event.detail);
 
-        // Remove obstructions before showing modal
-        removeObstructions();
+    // Dispatch event to show modal
+    document.dispatchEvent(event);
 
-        // Dispatch event to show modal
-        document.dispatchEvent(event);
-        console.log("showEventRequestPreviewModal event dispatched");
+    // Prevent body scrolling when modal is open
+    document.body.style.overflow = "hidden";
 
-        // Ensure modal container is visible
-        setTimeout(() => {
-            const modalContainer = document.getElementById(
-                "event-request-preview-modal-container"
-            );
-            if (modalContainer) {
-                modalContainer.style.zIndex = "99999";
-                modalContainer.style.position = "fixed";
-                modalContainer.style.top = "0";
-                modalContainer.style.left = "0";
-                modalContainer.style.width = "100vw";
-                modalContainer.style.height = "100vh";
-                modalContainer.style.overflow = "auto";
-                modalContainer.style.margin = "0";
-                modalContainer.style.padding = "0";
-
-                // Force body to allow scrolling
-                document.body.style.overflow = "auto";
-
-                // Ensure the modal content is properly sized
-                const modalContent =
-                    modalContainer.querySelector("div > div > div");
-                if (modalContent) {
-                    modalContent.style.maxWidth = "90vw";
-                    modalContent.style.width = "100%";
-                    modalContent.style.maxHeight = "90vh";
-                    modalContent.style.overflow = "auto";
-                    modalContent.style.margin = "2rem";
-                }
-            }
-        }, 100);
+    // Add event listener to restore scrolling when modal is closed
+    const handleModalClose = () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("modalClosed", handleModalClose);
     };
+
+    document.addEventListener("modalClosed", handleModalClose);
+  };
 </script>
 
 <script>
-    // Import the DataSyncService for client-side use
-    import { DataSyncService } from "../../scripts/database/DataSyncService";
-    import { Collections } from "../../schemas/pocketbase/schema";
-    import { Authentication } from "../../scripts/pocketbase/Authentication";
+  // Import the DataSyncService for client-side use
+  import { DataSyncService } from "../../scripts/database/DataSyncService";
+  import { Collections } from "../../schemas/pocketbase/schema";
+  import { Authentication } from "../../scripts/pocketbase/Authentication";
 
-    // Tab switching logic
-    document.addEventListener("DOMContentLoaded", async () => {
-        // Initialize DataSyncService for client-side
-        const dataSync = DataSyncService.getInstance();
-        const auth = Authentication.getInstance();
+  // Tab switching logic
+  document.addEventListener("DOMContentLoaded", async () => {
+    // Initialize DataSyncService for client-side
+    const dataSync = DataSyncService.getInstance();
+    const auth = Authentication.getInstance();
 
-        // Prefetch data into IndexedDB if authenticated
-        if (auth.isAuthenticated()) {
-            try {
-                const userId = auth.getUserId();
-                if (userId) {
-                    // Force sync to ensure we have the latest data
-                    await dataSync.syncCollection(
-                        Collections.EVENT_REQUESTS,
-                        `requested_user="${userId}"`,
-                        "-created"
-                    );
-                    console.log(
-                        "Initial data sync complete for user event requests"
-                    );
-                }
-            } catch (err) {
-                console.error("Error during initial data sync:", err);
-            }
+    // Prefetch data into IndexedDB if authenticated
+    if (auth.isAuthenticated()) {
+      try {
+        const userId = auth.getUserId();
+        if (userId) {
+          // Force sync to ensure we have the latest data
+          await dataSync.syncCollection(
+            Collections.EVENT_REQUESTS,
+            `requested_user="${userId}"`,
+            "-created",
+          );
+          //   console.log("Initial data sync complete for user event requests");
         }
+      } catch (err) {
+        // console.error("Error during initial data sync:", err);
+      }
+    }
 
-        const formTab = document.getElementById("form-tab");
-        const submissionsTab = document.getElementById("submissions-tab");
-        const formContent = document.getElementById("form-content");
-        const submissionsContent = document.getElementById(
-            "submissions-content"
-        );
+    const formTab = document.getElementById("form-tab");
+    const submissionsTab = document.getElementById("submissions-tab");
+    const formContent = document.getElementById("form-content");
+    const submissionsContent = document.getElementById("submissions-content");
 
-        // Function to switch tabs
-        const switchTab = (
-            activeTab: HTMLElement,
-            activeContent: HTMLElement,
-            inactiveTab: HTMLElement,
-            inactiveContent: HTMLElement
-        ) => {
-            // Update tab classes
-            activeTab.classList.add("tab-active");
-            inactiveTab.classList.remove("tab-active");
+    // Function to switch tabs
+    const switchTab = (
+      activeTab: HTMLElement,
+      activeContent: HTMLElement,
+      inactiveTab: HTMLElement,
+      inactiveContent: HTMLElement,
+    ) => {
+      // Update tab classes
+      activeTab.classList.add("tab-active");
+      inactiveTab.classList.remove("tab-active");
 
-            // Show/hide content
-            activeContent.classList.remove("hidden");
-            inactiveContent.classList.add("hidden");
+      // Show/hide content
+      activeContent.classList.remove("hidden");
+      inactiveContent.classList.add("hidden");
 
-            // Dispatch event to refresh submissions when switching to submissions tab
-            if (activeTab.id === "submissions-tab") {
-                // Dispatch a custom event that the UserEventRequests component listens for
-                document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
-            }
-        };
+      // Dispatch event to refresh submissions when switching to submissions tab
+      if (activeTab.id === "submissions-tab") {
+        // Dispatch a custom event that the UserEventRequests component listens for
+        document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
+      }
+    };
 
-        // Add click event listeners to tabs
-        formTab?.addEventListener("click", (e) => {
-            e.preventDefault();
-            if (formContent && submissionsContent && submissionsTab) {
-                switchTab(
-                    formTab,
-                    formContent,
-                    submissionsTab,
-                    submissionsContent
-                );
-            }
-        });
-
-        submissionsTab?.addEventListener("click", (e) => {
-            e.preventDefault();
-            if (formContent && submissionsContent && formTab) {
-                switchTab(
-                    submissionsTab,
-                    submissionsContent,
-                    formTab,
-                    formContent
-                );
-            }
-        });
-
-        // Listen for visibility changes
-        document.addEventListener("visibilitychange", () => {
-            if (document.visibilityState === "visible") {
-                // Dispatch custom event that components can listen for
-                document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
-            }
-        });
+    // Add click event listeners to tabs
+    formTab?.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (formContent && submissionsContent && submissionsTab) {
+        switchTab(formTab, formContent, submissionsTab, submissionsContent);
+      }
     });
+
+    submissionsTab?.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (formContent && submissionsContent && formTab) {
+        switchTab(submissionsTab, submissionsContent, formTab, formContent);
+      }
+    });
+
+    // Listen for visibility changes
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible") {
+        // Dispatch custom event that components can listen for
+        document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
+      }
+    });
+  });
 </script>

src/components/dashboard/Officer_EventRequestForm/ASFundingSection.tsx

@@ -3,204 +3,476 @@ import { motion } from 'framer-motion';
 import toast from 'react-hot-toast';
 import type { EventRequestFormData } from './EventRequestForm';
 import InvoiceBuilder from './InvoiceBuilder';
-import type { InvoiceData } from './InvoiceBuilder';
+import type { InvoiceData, InvoiceItem } from './InvoiceBuilder';
+import CustomAlert from '../universal/CustomAlert';
+import { Icon } from '@iconify/react';
+
+// Enhanced animation variants with faster transitions
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.035,
+            when: "beforeChildren",
+            duration: 0.3,
+            ease: "easeOut"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
+    hidden: { opacity: 0, y: 10 },
     visible: {
         opacity: 1,
         y: 0,
         transition: {
             type: "spring",
-            stiffness: 300,
-            damping: 24
+            stiffness: 500,
+            damping: 25,
+            mass: 0.8,
+            duration: 0.25
         }
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.15 }
+    }
+};
+
+// Button animation
+const buttonVariants = {
+    hover: {
+        scale: 1.03,
+        transition: { duration: 0.15, ease: "easeOut" }
+    },
+    tap: {
+        scale: 0.97,
+        transition: { duration: 0.1 }
+    }
+};
+
+// Toggle animation
+const toggleVariants = {
+    checked: { backgroundColor: "rgba(var(--p), 0.2)" },
+    unchecked: { backgroundColor: "rgba(0, 0, 0, 0.05)" },
+    hover: { scale: 1.01, transition: { duration: 0.15 } }
+};
+
 interface ASFundingSectionProps {
     formData: EventRequestFormData;
     onDataChange: (data: Partial<EventRequestFormData>) => void;
 }
 
 const ASFundingSection: React.FC<ASFundingSectionProps> = ({ formData, onDataChange }) => {
-    const [invoiceFile, setInvoiceFile] = useState<File | null>(formData.invoice);
+    // Check initial budget status
+    React.useEffect(() => {
+        if (formData.invoiceData?.total) {
+            checkBudgetLimit(formData.invoiceData.total);
+        }
+    }, [formData.expected_attendance]);
     const [invoiceFiles, setInvoiceFiles] = useState<File[]>(formData.invoice_files || []);
+    const [jsonInput, setJsonInput] = useState<string>('');
+    const [jsonError, setJsonError] = useState<string>('');
+    const [showJsonInput, setShowJsonInput] = useState<boolean>(false);
+    const [isDragging, setIsDragging] = useState(false);
 
-    // Handle single invoice file upload (for backward compatibility)
+    // Handle invoice file upload
     const handleInvoiceFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (e.target.files && e.target.files.length > 0) {
-            const file = e.target.files[0];
-            setInvoiceFile(file);
-            onDataChange({ invoice: file });
+            const newFiles = Array.from(e.target.files) as File[];
+            // Combine existing files with new files instead of replacing
+            const combinedFiles = [...invoiceFiles, ...newFiles];
+            setInvoiceFiles(combinedFiles);
+            onDataChange({ invoice_files: combinedFiles });
         }
     };
 
-    // Handle multiple invoice files upload
-    const handleMultipleInvoiceFilesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files.length > 0) {
-            const files = Array.from(e.target.files) as File[];
+    // Handle removing individual files
+    const handleRemoveFile = (indexToRemove: number) => {
+        const updatedFiles = invoiceFiles.filter((_, index) => index !== indexToRemove);
+        setInvoiceFiles(updatedFiles);
+        onDataChange({ invoice_files: updatedFiles });
+    };
 
-            // Check file sizes
-            const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB limit per file
-            const oversizedFiles = files.filter(file => file.size > MAX_FILE_SIZE);
+    // Handle clearing all files
+    const handleClearAllFiles = () => {
+        setInvoiceFiles([]);
+        onDataChange({ invoice_files: [] });
+    };
 
-            if (oversizedFiles.length > 0) {
-                toast.error(`Some files exceed the 10MB size limit: ${oversizedFiles.map(f => f.name).join(', ')}`);
+    // Handle JSON input change
+    const handleJsonInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setJsonInput(e.target.value);
+        setJsonError('');
+    };
+
+    // Show JSON example
+    const showJsonExample = () => {
+        const example = {
+            vendor: "Example Restaurant",
+            items: [
+                {
+                    id: "item-1",
+                    description: "Burger",
+                    quantity: 2,
+                    unitPrice: 12.99,
+                    amount: 25.98
+                },
+                {
+                    id: "item-2",
+                    description: "Fries",
+                    quantity: 2,
+                    unitPrice: 4.99,
+                    amount: 9.98
+                }
+            ],
+            subtotal: 35.96,
+            taxRate: 9.0,
+            taxAmount: 3.24,
+            tipPercentage: 13.9,
+            tipAmount: 5.00,
+            total: 44.20
+        };
+        setJsonInput(JSON.stringify(example, null, 2));
+    };
+
+    // Validate and apply JSON
+    // Check budget limits and show warning if exceeded
+    const checkBudgetLimit = (total: number) => {
+        const maxBudget = Math.min(formData.expected_attendance * 10, 5000);
+        if (total > maxBudget) {
+            toast.error(`Total amount ($${total.toFixed(2)}) exceeds maximum funding of $${maxBudget.toFixed(2)} for ${formData.expected_attendance} attendees.`, {
+                duration: 4000,
+                position: 'top-center'
+            });
+            return true;
+        }
+        return false;
+    };
+
+    const validateAndApplyJson = () => {
+        try {
+            if (!jsonInput.trim()) {
+                setJsonError('JSON input is empty');
                 return;
             }
 
-            // Update state with new files
-            const updatedFiles = [...invoiceFiles, ...files];
-            setInvoiceFiles(updatedFiles);
-            onDataChange({ invoice_files: updatedFiles });
+            const data = JSON.parse(jsonInput);
 
-            // Also set the first file as the main invoice file for backward compatibility
-            if (files.length > 0 && !formData.invoice) {
-                setInvoiceFile(files[0]);
-                onDataChange({ invoice: files[0] });
+            // Validate structure
+            if (!data.vendor) {
+                setJsonError('Vendor field is required');
+                return;
             }
 
-            toast.success(`Added ${files.length} file${files.length > 1 ? 's' : ''} successfully`);
+            if (!Array.isArray(data.items) || data.items.length === 0) {
+                setJsonError('Items array is required and must contain at least one item');
+                return;
+            }
+
+            // Validate items
+            for (const item of data.items) {
+                if (!item.description || typeof item.unitPrice !== 'number' || typeof item.quantity !== 'number') {
+                    setJsonError('Each item must have description, unitPrice, and quantity fields');
+                    return;
+                }
+            }
+
+            // Validate tax, tip, and total
+            if (typeof data.taxAmount !== 'number') {
+                setJsonError('Tax amount must be a number');
+                return;
+            }
+
+            if (typeof data.tipAmount !== 'number') {
+                setJsonError('Tip amount must be a number');
+                return;
+            }
+
+            if (typeof data.total !== 'number') {
+                setJsonError('Total is required and must be a number');
+                return;
+            }
+
+            // Create itemized invoice string for Pocketbase
+            const itemizedInvoice = JSON.stringify({
+                vendor: data.vendor,
+                items: data.items.map((item: InvoiceItem) => ({
+                    item: item.description,
+                    quantity: item.quantity,
+                    unit_price: item.unitPrice,
+                    amount: item.amount
+                })),
+                subtotal: data.subtotal,
+                tax: data.taxAmount,
+                tip: data.tipAmount,
+                total: data.total
+            }, null, 2);
+
+            // Check budget limits and show toast if needed
+            checkBudgetLimit(data.total);
+
+            // Apply the JSON data to the form
+            onDataChange({
+                invoiceData: data,
+                itemized_invoice: itemizedInvoice,
+                as_funding_required: true
+            });
+
+            toast.success('Invoice data applied successfully');
+            setShowJsonInput(false);
+        } catch (error) {
+            setJsonError('Invalid JSON format: ' + (error as Error).message);
         }
     };
 
-    // Remove an invoice file
-    const handleRemoveInvoiceFile = (index: number) => {
-        const updatedFiles = [...invoiceFiles];
-        const removedFileName = updatedFiles[index].name;
-        updatedFiles.splice(index, 1);
-        setInvoiceFiles(updatedFiles);
-        onDataChange({ invoice_files: updatedFiles });
-
-        // Update the main invoice file if needed
-        if (invoiceFile && invoiceFile.name === removedFileName) {
-            const newMainFile = updatedFiles.length > 0 ? updatedFiles[0] : null;
-            setInvoiceFile(newMainFile);
-            onDataChange({ invoice: newMainFile });
-        }
-
-        toast.success(`Removed ${removedFileName}`);
+    // Handle drag events for file upload
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(true);
     };
 
-    // Handle invoice data change
-    const handleInvoiceDataChange = (invoiceData: InvoiceData) => {
-        // Update the invoiceData in the form
-        onDataChange({ invoiceData });
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
 
-        // For backward compatibility, create a properly formatted JSON string
-        const jsonFormat = {
-            items: invoiceData.items.map(item => ({
-                item: item.description,
-                quantity: item.quantity,
-                unit_price: item.unitPrice
-            })),
-            tax: invoiceData.taxAmount,
-            tip: invoiceData.tipAmount,
-            total: invoiceData.total,
-            vendor: invoiceData.vendor
-        };
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
 
-        // For backward compatibility, still update the itemized_invoice field
-        // but with a more structured format that's easier to parse if needed
-        const itemizedText = JSON.stringify(jsonFormat, null, 2);
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const newFiles = Array.from(e.dataTransfer.files) as File[];
+            // Combine existing files with new files instead of replacing
+            const combinedFiles = [...invoiceFiles, ...newFiles];
+            setInvoiceFiles(combinedFiles);
+            onDataChange({ invoice_files: combinedFiles });
+        }
+    };
 
-        // Update the itemized_invoice field for backward compatibility
-        onDataChange({ itemized_invoice: itemizedText });
+    // Handle invoice data change from the invoice builder
+    const handleInvoiceDataChange = (data: InvoiceData) => {
+        // Check budget limits and show toast if needed
+        checkBudgetLimit(data.total);
+
+        onDataChange({
+            invoiceData: data,
+            itemized_invoice: JSON.stringify(data)
+        });
     };
 
     return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">AS Funding Information</h2>
-
-            <div className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <div className="flex items-start gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-warning flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
-                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                    </svg>
-                    <p className="text-sm">
-                        Please make sure the restaurant is a valid AS Funding food vendor! An invoice can be an unofficial receipt. Just make sure that the restaurant name and location, desired pickup or delivery date and time, all the items ordered plus their prices, discount/fees/tax/tip, and total are on the invoice! We don't recommend paying out of pocket because reimbursements can be a hassle when you're not a Principal Member.
-                    </p>
-                </div>
-            </div>
-
-            {/* Invoice Builder Instructions */}
-            <motion.div variants={itemVariants} className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <h3 className="font-bold text-lg mb-2">How to Use the Invoice Builder</h3>
-                <ol className="list-decimal list-inside space-y-2 text-sm">
-                    <li>Enter the vendor/restaurant name in the field provided.</li>
-                    <li>Add each item from your invoice by filling in the description, quantity, and unit price, then click "Add Item".</li>
-                    <li>The subtotal, tax, and tip will be calculated automatically based on the tax rate and tip percentage.</li>
-                    <li>You can adjust the tax rate (default is 7.75% for San Diego) and tip percentage as needed.</li>
-                    <li>Remove items by clicking the "X" button next to each item.</li>
-                    <li>Upload your actual invoice file (receipt, screenshot, etc.) using the file upload below.</li>
-                </ol>
-                <p className="text-sm mt-3 text-warning">Note: The invoice builder helps you itemize your expenses for AS funding. You must still upload the actual invoice file.</p>
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    AS Funding Details
+                </h2>
             </motion.div>
 
-            {/* Invoice Builder */}
-            <InvoiceBuilder
-                invoiceData={formData.invoiceData}
-                onChange={handleInvoiceDataChange}
-            />
-
-            {/* Invoice file upload */}
-            <motion.div variants={itemVariants} className="form-control">
-                <label className="label">
-                    <span className="label-text font-medium">
-                        Upload your invoice files (receipts, screenshots, etc.)
-                    </span>
-                    <span className="label-text-alt text-error">*</span>
-                </label>
-                <input
-                    type="file"
-                    className="file-input file-input-bordered w-full file-input-primary hover:file-input-ghost transition-all duration-300"
-                    onChange={handleMultipleInvoiceFilesChange}
-                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
-                    multiple
-                    required={invoiceFiles.length === 0}
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="info"
+                    title="AS Funding Information"
+                    message="AS funding can cover food and other expenses for your event. Please itemize all expenses in the invoice builder below."
+                    className="mb-6"
+                    icon="heroicons:information-circle"
                 />
-
-                {invoiceFiles.length > 0 && (
-                    <div className="mt-4">
-                        <p className="text-sm font-medium mb-2">Uploaded files:</p>
-                        <div className="space-y-2">
-                            {invoiceFiles.map((file, index) => (
-                                <div key={index} className="flex items-center justify-between bg-base-300/30 p-2 rounded">
-                                    <span className="text-sm truncate max-w-[80%]">{file.name}</span>
-                                    <button
-                                        type="button"
-                                        className="btn btn-ghost btn-xs"
-                                        onClick={() => handleRemoveInvoiceFile(index)}
-                                    >
-                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                <p className="text-xs text-gray-400 mt-2">
-                    Official food invoices will be required 2 weeks before the start of your event. Please use the following naming format: EventName_OrderLocation_DateOfEvent (i.e. QPWorkathon#1_PapaJohns_01/06/2025)
-                </p>
             </motion.div>
 
+            {/* Invoice Upload Section */}
             <motion.div
                 variants={itemVariants}
-                className="alert alert-warning"
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
             >
-                <div>
-                    <h3 className="font-bold">Important Note</h3>
-                    <div className="text-sm">
-                        AS Funding requests must be submitted at least 6 weeks before your event. Please check the Funding Guide or the Google Calendar for the funding request deadlines.
+                <h3 className="text-xl font-semibold mb-2 text-primary">Invoice Information</h3>
+                <p className="text-sm text-gray-500 mb-4">Upload your invoice files or create an itemized invoice below.</p>
+
+                <motion.div
+                    className={`mt-2 border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-primary/50'
+                        }`}
+                    whileHover={{ scale: 1.02, boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" }}
+                    whileTap={{ scale: 0.98 }}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                    onClick={() => document.getElementById('invoice-files')?.click()}
+                >
+                    <input
+                        id="invoice-files"
+                        type="file"
+                        className="hidden"
+                        onChange={handleInvoiceFileChange}
+                        accept=".pdf,.jpg,.jpeg,.png"
+                        multiple
+                    />
+
+                    <div className="flex flex-col items-center justify-center gap-3">
+                        <motion.div
+                            className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary"
+                            whileHover={{ rotate: 15, scale: 1.1 }}
+                        >
+                            <Icon icon="heroicons:document-text" className="h-8 w-8" />
+                        </motion.div>
+
+                        {invoiceFiles.length > 0 ? (
+                            <>
+                                <div className="flex items-center justify-between w-full">
+                                    <p className="font-medium text-primary">{invoiceFiles.length} file(s) selected:</p>
+                                    <button
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleClearAllFiles();
+                                        }}
+                                        className="btn btn-xs btn-outline btn-error"
+                                        title="Clear all files"
+                                    >
+                                        Clear All
+                                    </button>
+                                </div>
+                                <div className="max-h-32 overflow-y-auto text-left w-full space-y-1">
+                                    {invoiceFiles.map((file, index) => (
+                                        <div key={index} className="flex items-center justify-between bg-base-100 p-2 rounded">
+                                            <span className="text-sm truncate flex-1">{file.name}</span>
+                                            <button
+                                                type="button"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    handleRemoveFile(index);
+                                                }}
+                                                className="btn btn-xs btn-error ml-2"
+                                                title="Remove file"
+                                            >
+                                                <Icon icon="heroicons:x-mark" className="w-3 h-3" />
+                                            </button>
+                                        </div>
+                                    ))}
+                                </div>
+                                <p className="text-xs text-gray-500">Click or drag to add more files</p>
+                            </>
+                        ) : (
+                            <>
+                                <p className="font-medium">Drop your invoice files here or click to browse</p>
+                                <p className="text-xs text-gray-500">Supports PDF, JPG, JPEG, PNG (multiple files allowed)</p>
+                            </>
+                        )}
+                    </div>
+                </motion.div>
+            </motion.div>
+
+            {/* JSON/Builder Toggle */}
+            <motion.div
+                variants={itemVariants}
+                className="bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <div className="flex justify-between items-center mb-4">
+                    <h3 className="text-xl font-bold text-primary">Invoice Details</h3>
+
+                    <div className="flex mb-4 border rounded-lg overflow-hidden">
+                        <button
+                            type="button"
+                            onClick={() => setShowJsonInput(false)}
+                            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${!showJsonInput ? 'bg-primary text-white' : 'hover:bg-base-200'
+                                }`}
+                        >
+                            Visual Editor
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setShowJsonInput(true)}
+                            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${showJsonInput ? 'bg-primary text-white' : 'hover:bg-base-200'
+                                }`}
+                        >
+                            JSON Editor
+                        </button>
                     </div>
                 </div>
+
+                {showJsonInput ? (
+                    <motion.div
+                        className="space-y-4"
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <div className="flex justify-between items-center">
+                            <label className="label-text font-medium">JSON Invoice Data</label>
+                            <motion.button
+                                type="button"
+                                className="btn btn-sm btn-ghost text-primary"
+                                onClick={showJsonExample}
+                                whileHover="hover"
+                                whileTap="tap"
+                                variants={buttonVariants}
+                            >
+                                <Icon icon="heroicons:code-bracket" className="w-4 h-4 mr-1" />
+                                Show Example
+                            </motion.button>
+                        </div>
+
+                        <motion.textarea
+                            className={`textarea textarea-bordered w-full h-64 font-mono text-sm ${jsonError ? 'textarea-error' : 'focus:textarea-primary'}`}
+                            value={jsonInput}
+                            onChange={handleJsonInputChange}
+                            placeholder="Paste your JSON invoice data here..."
+                            whileHover="hover"
+                            variants={inputHoverVariants}
+                        />
+
+                        {jsonError && (
+                            <div className="text-error text-sm flex items-center gap-1">
+                                <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                                {jsonError}
+                            </div>
+                        )}
+
+                        <div className="flex justify-end">
+                            <motion.button
+                                type="button"
+                                className="btn btn-primary"
+                                onClick={validateAndApplyJson}
+                                whileHover="hover"
+                                whileTap="tap"
+                                variants={buttonVariants}
+                            >
+                                <Icon icon="heroicons:check-circle" className="w-5 h-5 mr-1" />
+                                Apply JSON
+                            </motion.button>
+                        </div>
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        variants={itemVariants}
+                        className="form-control space-y-6"
+                    >
+                        <InvoiceBuilder
+                            invoiceData={formData.invoiceData || {
+                                vendor: '',
+                                items: [],
+                                subtotal: 0,
+                                taxAmount: 0,
+                                tipAmount: 0,
+                                total: 0
+                            }}
+                            onChange={handleInvoiceDataChange}
+                        />
+                    </motion.div>
+                )}
             </motion.div>
-        </div>
+        </motion.div>
     );
 };
 

src/components/dashboard/Officer_EventRequestForm/EventDetailsSection.tsx

@@ -2,8 +2,20 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import type { EventRequestFormData } from './EventRequestForm';
 import type { EventRequest } from '../../../schemas/pocketbase';
+import CustomAlert from '../universal/CustomAlert';
+
+// Enhanced animation variants
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.1,
+            when: "beforeChildren"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: {
@@ -17,6 +29,15 @@ const itemVariants = {
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    }
+};
+
 interface EventDetailsSectionProps {
     formData: EventRequestFormData;
     onDataChange: (data: Partial<EventRequestFormData>) => void;
@@ -24,101 +45,232 @@ interface EventDetailsSectionProps {
 
 const EventDetailsSection: React.FC<EventDetailsSectionProps> = ({ formData, onDataChange }) => {
     return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">Event Details</h2>
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    Event Details
+                </h2>
+            </motion.div>
 
-            <div className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <p className="text-sm">
-                    Please remember to ping @Coordinators in #-events on Slack once you've submitted this form so that they can fill out a TAP form for you.
-                </p>
-            </div>
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="info"
+                    title="Coordinator Notification"
+                    message="Please remember to ping @Coordinators in #-events on Slack once you've submitted this form so that they can fill out a TAP form for you."
+                    className="mb-6"
+                    icon="heroicons:information-circle"
+                />
+            </motion.div>
 
             {/* Event Name */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
                     <span className="label-text font-medium text-lg">Event Name</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <input
+                <motion.input
                     type="text"
                     className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
                     value={formData.name}
                     onChange={(e) => onDataChange({ name: e.target.value })}
                     placeholder="Enter event name"
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
             {/* Event Description */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
                     <span className="label-text font-medium text-lg">Event Description</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <textarea
+                <motion.textarea
                     className="textarea textarea-bordered focus:textarea-primary transition-all duration-300 min-h-[120px] mt-2"
                     value={formData.event_description}
                     onChange={(e) => onDataChange({ event_description: e.target.value })}
                     placeholder="Provide a detailed description of your event"
                     rows={4}
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
-            {/* Event Start Date */}
-            <motion.div variants={itemVariants} className="form-control">
-                <label className="label">
-                    <span className="label-text font-medium">Event Start Date & Time</span>
-                    <span className="label-text-alt text-error">*</span>
-                </label>
-                <input
-                    type="datetime-local"
-                    className="input input-bordered focus:input-primary transition-all duration-300"
-                    value={formData.start_date_time}
-                    onChange={(e) => onDataChange({ start_date_time: e.target.value })}
-                    required
-                />
-            </motion.div>
+            {/* Date and Time Section */}
+            <motion.div
+                variants={itemVariants}
+                className="grid grid-cols-1 gap-6"
+            >
+                {/* Event Start Date */}
+                <motion.div
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    whileHover={{ y: -2 }}
+                >
+                    <label className="label">
+                        <span className="label-text font-medium text-lg">Event Start Date & Time</span>
+                        <span className="label-text-alt text-error">*</span>
+                    </label>
+                    <motion.input
+                        type="datetime-local"
+                        className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
+                        value={formData.start_date_time}
+                        onChange={(e) => {
+                            const newStartDateTime = e.target.value;
+                            onDataChange({ start_date_time: newStartDateTime });
+                            
+                            // If there's already an end time set, update it to use the new start date
+                            if (formData.end_date_time && newStartDateTime) {
+                                try {
+                                    const existingEndDate = new Date(formData.end_date_time);
+                                    const newStartDate = new Date(newStartDateTime);
+                                    
+                                    if (!isNaN(existingEndDate.getTime()) && !isNaN(newStartDate.getTime())) {
+                                        // Keep the same time but update to the new date
+                                        const updatedEndDate = new Date(newStartDate);
+                                        updatedEndDate.setHours(existingEndDate.getHours(), existingEndDate.getMinutes(), 0, 0);
+                                        onDataChange({ end_date_time: updatedEndDate.toISOString() });
+                                    }
+                                } catch (error) {
+                                    console.error('Error updating end date when start date changed:', error);
+                                }
+                            }
+                        }}
+                        required
+                        whileHover="hover"
+                        variants={inputHoverVariants}
+                    />
+                    <p className="text-sm text-base-content/70 mt-2">
+                        Note: For multi-day events, please submit a separate request for each day.
+                    </p>
+                    <p className="text-sm text-base-content/70 mt-1">
+                        The event time should not include setup time.
+                    </p>
+                </motion.div>
 
-            {/* Event End Date */}
-            <motion.div variants={itemVariants} className="form-control">
-                <label className="label">
-                    <span className="label-text font-medium">Event End Date & Time</span>
-                    <span className="label-text-alt text-error">*</span>
-                </label>
-                <input
-                    type="datetime-local"
-                    className="input input-bordered focus:input-primary transition-all duration-300"
-                    value={formData.end_date_time}
-                    onChange={(e) => onDataChange({ end_date_time: e.target.value })}
-                    required
-                />
+                {/* Event End Time */}
+                <motion.div
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    whileHover={{ y: -2 }}
+                >
+                    <label className="label">
+                        <span className="label-text font-medium text-lg">Event End Time</span>
+                        <span className="label-text-alt text-error">*</span>
+                    </label>
+                    <div className="flex flex-col gap-2">
+                        <motion.input
+                            type="time"
+                            className="input input-bordered focus:input-primary transition-all duration-300"
+                            value={formData.end_date_time ? (() => {
+                                try {
+                                    const endDate = new Date(formData.end_date_time);
+                                    if (isNaN(endDate.getTime())) return '';
+                                    return endDate.toTimeString().substring(0, 5);
+                                } catch (e) {
+                                    return '';
+                                }
+                            })() : ''}
+                            onChange={(e) => {
+                                const timeValue = e.target.value;
+                                if (timeValue && formData.start_date_time) {
+                                    try {
+                                        // Create a new date object from start_date_time
+                                        const startDate = new Date(formData.start_date_time);
+                                        if (isNaN(startDate.getTime())) {
+                                            console.error('Invalid start date time');
+                                            return;
+                                        }
+                                        
+                                        // Parse the time value
+                                        const [hours, minutes] = timeValue.split(':').map(Number);
+                                        
+                                        // Validate hours and minutes
+                                        if (isNaN(hours) || isNaN(minutes) || hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
+                                            console.error('Invalid time values');
+                                            return;
+                                        }
+                                        
+                                        // Create a new date with the same date as start but different time
+                                        const endDate = new Date(startDate);
+                                        endDate.setHours(hours, minutes, 0, 0);
+                                        
+                                        // Update end_date_time with the new time but same date as start
+                                        onDataChange({ end_date_time: endDate.toISOString() });
+                                    } catch (error) {
+                                        console.error('Error setting end time:', error);
+                                    }
+                                } else if (!timeValue) {
+                                    // Clear end_date_time if time is cleared
+                                    onDataChange({ end_date_time: '' });
+                                }
+                            }}
+                            required
+                            disabled={!formData.start_date_time}
+                            whileHover="hover"
+                            variants={inputHoverVariants}
+                        />
+                        <p className="text-xs text-base-content/60">
+                            {!formData.start_date_time 
+                                ? "Please set the start date and time first." 
+                                : "The end time will use the same date as the start date."
+                            }
+                        </p>
+                    </div>
+                </motion.div>
             </motion.div>
 
             {/* Event Location */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Event Location</span>
+                    <span className="label-text font-medium text-lg">Event Location</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <input
+                <motion.input
                     type="text"
-                    className="input input-bordered focus:input-primary transition-all duration-300"
+                    className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
                     value={formData.location}
                     onChange={(e) => onDataChange({ location: e.target.value })}
                     placeholder="Enter event location"
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
             {/* Room Booking */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Do you/will you have a room booking for this event?</span>
+                    <span className="label-text font-medium text-lg">Room Booking Status</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                <div className="flex gap-6 mt-2">
+                    <motion.label
+                        className="flex items-center gap-3 cursor-pointer bg-base-100 p-3 rounded-lg hover:bg-primary/10 transition-colors"
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -126,21 +278,42 @@ const EventDetailsSection: React.FC<EventDetailsSectionProps> = ({ formData, onD
                             onChange={() => onDataChange({ will_or_have_room_booking: true })}
                             required
                         />
-                        <span>Yes</span>
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                        <span className="font-medium">Yes, I have a room booking</span>
+                    </motion.label>
+                    <motion.label
+                        className="flex items-center gap-3 cursor-pointer bg-base-100 p-3 rounded-lg hover:bg-primary/10 transition-colors"
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
                             checked={formData.will_or_have_room_booking === false}
-                            onChange={() => onDataChange({ will_or_have_room_booking: false })}
+                            onChange={() => {
+                                onDataChange({ will_or_have_room_booking: false });
+                            }}
                             required
                         />
-                        <span>No</span>
-                    </label>
+                        <span className="font-medium">No, I don't need a booking</span>
+                    </motion.label>
                 </div>
+
+                {formData.will_or_have_room_booking === false && (
+                    <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        className="mt-4"
+                    >
+                        <CustomAlert
+                            type="warning"
+                            title="IMPORTANT: Event Will Be Cancelled"
+                            message="If you need a booking and submit without one, your event WILL BE CANCELLED. This is non-negotiable. Contact the event coordinator immediately if you have any booking concerns."
+                        />
+                    </motion.div>
+                )}
             </motion.div>
-        </div>
+        </motion.div>
     );
 };
 

src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx

@@ -7,13 +7,14 @@ import { FileManager } from '../../../scripts/pocketbase/FileManager';
 import { DataSyncService } from '../../../scripts/database/DataSyncService';
 import { Collections } from '../../../schemas/pocketbase/schema';
 import { EventRequestStatus } from '../../../schemas/pocketbase';
+import { EmailClient } from '../../../scripts/email/EmailClient';
 
 // Form sections
 import PRSection from './PRSection';
 import EventDetailsSection from './EventDetailsSection';
 import TAPFormSection from './TAPFormSection';
 import ASFundingSection from './ASFundingSection';
-import EventRequestFormPreview from './EventRequestFormPreview';
+import { EventRequestFormPreview } from './EventRequestFormPreview';
 import type { InvoiceData, InvoiceItem } from './InvoiceBuilder';
 
 // Animation variants
@@ -69,23 +70,25 @@ export interface EventRequestFormData {
     flyer_advertising_start_date: string;
     flyer_additional_requests: string;
     required_logos: string[];
-    other_logos: File[]; // Form uses File objects, schema uses strings
+    other_logos: File[]; // Form uses File objects, schema uses strings - MULTIPLE FILES
     advertising_format: string;
     will_or_have_room_booking: boolean;
     expected_attendance: number;
-    room_booking: File | null;
+    room_booking_files: File[]; // CHANGED: Multiple room booking files instead of single
     invoice: File | null;
-    invoice_files: File[];
+    invoice_files: File[]; // MULTIPLE FILES
     invoiceData: InvoiceData;
     needs_graphics?: boolean | null;
     needs_as_funding?: boolean | null;
     formReviewed?: boolean; // Track if the form has been reviewed
 }
 
+// Add CustomAlert import
+import CustomAlert from '../universal/CustomAlert';
+
 const EventRequestForm: React.FC = () => {
     const [currentStep, setCurrentStep] = useState<number>(1);
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-    const [error, setError] = useState<string | null>(null);
 
     // Initialize form data
     const [formData, setFormData] = useState<EventRequestFormData>({
@@ -105,7 +108,7 @@ const EventRequestForm: React.FC = () => {
         advertising_format: '',
         will_or_have_room_booking: false,
         expected_attendance: 0,
-        room_booking: null,
+        room_booking_files: [],
         as_funding_required: false,
         food_drinks_being_served: false,
         itemized_invoice: '',
@@ -116,9 +119,7 @@ const EventRequestForm: React.FC = () => {
         invoiceData: {
             items: [],
             subtotal: 0,
-            taxRate: 7.75, // Default tax rate for San Diego
             taxAmount: 0,
-            tipPercentage: 15, // Default tip percentage
             tipAmount: 0,
             total: 0,
             vendor: ''
@@ -133,9 +134,10 @@ const EventRequestForm: React.FC = () => {
         const dataToStore = {
             ...formDataToSave,
             other_logos: [],
-            room_booking: null,
+            room_booking_files: [],
             invoice: null,
-            invoice_files: []
+            invoice_files: [],
+            savedAt: Date.now() // Add timestamp for stale data detection
         };
 
         localStorage.setItem('eventRequestFormData', JSON.stringify(dataToStore));
@@ -152,22 +154,69 @@ const EventRequestForm: React.FC = () => {
         if (savedData) {
             try {
                 const parsedData = JSON.parse(savedData);
-                setFormData(prevData => ({
-                    ...prevData,
-                    ...parsedData
-                }));
+                
+                // Check if the saved data is stale (older than 24 hours)
+                const now = Date.now();
+                const savedTime = parsedData.savedAt || 0;
+                const staleThreshold = 24 * 60 * 60 * 1000; // 24 hours
+                
+                if (now - savedTime > staleThreshold) {
+                    // Clear stale data
+                    localStorage.removeItem('eventRequestFormData');
+                    console.log('Cleared stale form data from localStorage');
+                } else {
+                    // Load the saved data
+                    setFormData(prevData => ({
+                        ...prevData,
+                        ...parsedData
+                    }));
+                }
             } catch (e) {
                 console.error('Error parsing saved form data:', e);
+                // Clear corrupted data
+                localStorage.removeItem('eventRequestFormData');
             }
         }
     }, []);
 
     // Handle form section data changes
     const handleSectionDataChange = (sectionData: Partial<EventRequestFormData>) => {
-        setFormData(prevData => ({
-            ...prevData,
-            ...sectionData
-        }));
+        // Ensure both needs_graphics and flyers_needed are synchronized
+        if (sectionData.flyers_needed !== undefined && sectionData.needs_graphics === undefined) {
+            sectionData.needs_graphics = sectionData.flyers_needed ? true : false;
+        }
+
+        // Ensure both needs_as_funding and as_funding_required are synchronized
+        if (sectionData.needs_as_funding !== undefined && sectionData.as_funding_required === undefined) {
+            sectionData.as_funding_required = sectionData.needs_as_funding ? true : false;
+        }
+
+        setFormData(prevData => {
+            const updatedData = { ...prevData, ...sectionData };
+            
+            // Save to localStorage
+            try {
+                const dataToStore = {
+                    ...updatedData,
+                    // Remove file objects before saving to localStorage
+                    other_logos: [],
+                    room_booking_files: [],
+                    invoice: null,
+                    invoice_files: [],
+                    savedAt: Date.now() // Add timestamp for stale data detection
+                };
+                localStorage.setItem('eventRequestFormData', JSON.stringify(dataToStore));
+                
+                // Also update the preview data
+                window.dispatchEvent(new CustomEvent('formDataUpdated', {
+                    detail: { formData: updatedData }
+                }));
+            } catch (error) {
+                console.error('Error saving form data to localStorage:', error);
+            }
+            
+            return updatedData;
+        });
     };
 
     // Add this function before the handleSubmit function
@@ -189,7 +238,7 @@ const EventRequestForm: React.FC = () => {
             advertising_format: '',
             will_or_have_room_booking: false,
             expected_attendance: 0,
-            room_booking: null,
+            room_booking_files: [],
             as_funding_required: false,
             food_drinks_being_served: false,
             itemized_invoice: '',
@@ -200,9 +249,7 @@ const EventRequestForm: React.FC = () => {
             invoiceData: {
                 items: [],
                 subtotal: 0,
-                taxRate: 7.75, // Default tax rate for San Diego
                 taxAmount: 0,
-                tipPercentage: 15, // Default tip percentage
                 tipAmount: 0,
                 total: 0,
                 vendor: ''
@@ -225,7 +272,6 @@ const EventRequestForm: React.FC = () => {
         }
 
         setIsSubmitting(true);
-        setError(null);
 
         try {
             const auth = Authentication.getInstance();
@@ -234,14 +280,20 @@ const EventRequestForm: React.FC = () => {
             const dataSync = DataSyncService.getInstance();
 
             if (!auth.isAuthenticated()) {
-                toast.error('You must be logged in to submit an event request');
+                // Don't show error toast on dashboard page for unauthenticated users
+                if (!window.location.pathname.includes('/dashboard')) {
+                    toast.error('You must be logged in to submit an event request');
+                }
                 throw new Error('You must be logged in to submit an event request');
             }
 
             // Create the event request record
             const userId = auth.getUserId();
             if (!userId) {
-                toast.error('User ID not found');
+                // Don't show error toast on dashboard page for unauthenticated users
+                if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) {
+                    toast.error('User ID not found');
+                }
                 throw new Error('User ID not found');
             }
 
@@ -250,73 +302,196 @@ const EventRequestForm: React.FC = () => {
                 requested_user: userId,
                 name: formData.name,
                 location: formData.location,
-                start_date_time: new Date(formData.start_date_time).toISOString(),
-                end_date_time: new Date(formData.end_date_time).toISOString(),
+                start_date_time: (() => {
+                    try {
+                        const startDate = new Date(formData.start_date_time);
+                        if (isNaN(startDate.getTime())) {
+                            throw new Error('Invalid start date');
+                        }
+                        return startDate.toISOString();
+                    } catch (e) {
+                        throw new Error('Invalid start date format');
+                    }
+                })(),
+                end_date_time: (() => {
+                    try {
+                        if (formData.end_date_time) {
+                            const endDate = new Date(formData.end_date_time);
+                            if (isNaN(endDate.getTime())) {
+                                throw new Error('Invalid end date');
+                            }
+                            return endDate.toISOString();
+                        } else {
+                            // Fallback to start date if no end date (should not happen with validation)
+                            const startDate = new Date(formData.start_date_time);
+                            return startDate.toISOString();
+                        }
+                    } catch (e) {
+                        // Fallback to start date
+                        const startDate = new Date(formData.start_date_time);
+                        return startDate.toISOString();
+                    }
+                })(),
                 event_description: formData.event_description,
                 flyers_needed: formData.flyers_needed,
+                photography_needed: formData.photography_needed,
+                as_funding_required: formData.needs_as_funding,
+                food_drinks_being_served: formData.food_drinks_being_served,
+                itemized_invoice: formData.itemized_invoice,
                 flyer_type: formData.flyer_type,
                 other_flyer_type: formData.other_flyer_type,
-                flyer_advertising_start_date: formData.flyer_advertising_start_date ? new Date(formData.flyer_advertising_start_date).toISOString() : '',
+                flyer_advertising_start_date: formData.flyer_advertising_start_date ? (() => {
+                    try {
+                        const advertDate = new Date(formData.flyer_advertising_start_date);
+                        return isNaN(advertDate.getTime()) ? '' : advertDate.toISOString();
+                    } catch (e) {
+                        return '';
+                    }
+                })() : '',
                 flyer_additional_requests: formData.flyer_additional_requests,
-                photography_needed: formData.photography_needed,
                 required_logos: formData.required_logos,
                 advertising_format: formData.advertising_format,
                 will_or_have_room_booking: formData.will_or_have_room_booking,
                 expected_attendance: formData.expected_attendance,
-                as_funding_required: formData.as_funding_required,
-                food_drinks_being_served: formData.food_drinks_being_served,
-                // Store the itemized_invoice as a string for backward compatibility
-                itemized_invoice: formData.itemized_invoice,
-                // Store the invoice data as a properly formatted JSON object
+                needs_graphics: formData.needs_graphics,
+                needs_as_funding: formData.needs_as_funding,
                 invoice_data: {
                     items: formData.invoiceData.items.map(item => ({
                         item: item.description,
                         quantity: item.quantity,
                         unit_price: item.unitPrice
                     })),
-                    tax: formData.invoiceData.taxAmount,
-                    tip: formData.invoiceData.tipAmount,
+                    taxAmount: formData.invoiceData.taxAmount,
+                    tipAmount: formData.invoiceData.tipAmount,
                     total: formData.invoiceData.total,
                     vendor: formData.invoiceData.vendor
                 },
-                // Set the initial status to "submitted"
-                status: EventRequestStatus.SUBMITTED,
             };
 
             // Create the record using the Update service
             // This will send the data to the server
             const record = await update.create('event_request', submissionData);
 
-            // Force sync the event requests collection to update IndexedDB
-            await dataSync.syncCollection(Collections.EVENT_REQUESTS);
+            // Force sync the event requests collection to update IndexedDB with deletion detection
+            await dataSync.syncCollection(Collections.EVENT_REQUESTS, "", "-created", {}, true);
 
-            // Upload files if they exist
+            console.log('Event request record created:', record.id);
+
+            // Upload files if they exist - handle each file type separately
+            const fileUploadErrors: string[] = [];
+
+            // Upload other logos
             if (formData.other_logos.length > 0) {
-                await fileManager.uploadFiles('event_request', record.id, 'other_logos', formData.other_logos);
+                try {
+                    console.log('Uploading other logos:', formData.other_logos.length, 'files');
+                    console.log('Other logos files:', formData.other_logos.map(f => ({ name: f.name, size: f.size, type: f.type })));
+                    await fileManager.uploadFiles('event_request', record.id, 'other_logos', formData.other_logos);
+                    console.log('Other logos uploaded successfully');
+                } catch (error) {
+                    console.error('Failed to upload other logos:', error);
+                    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                    fileUploadErrors.push(`Failed to upload custom logo files: ${errorMessage}`);
+                }
             }
 
-            if (formData.room_booking) {
-                await fileManager.uploadFile('event_request', record.id, 'room_booking', formData.room_booking);
+            // Upload room booking files
+            if (formData.room_booking_files && formData.room_booking_files.length > 0) {
+                try {
+                    console.log('Uploading room booking files:', formData.room_booking_files.length, 'files');
+                    console.log('Room booking files:', formData.room_booking_files.map(f => ({ name: f.name, size: f.size, type: f.type })));
+                    console.log('Using collection:', 'event_request', 'record ID:', record.id, 'field:', 'room_booking');
+                    
+                    // Use the correct field name 'room_booking' instead of 'room_booking_files'
+                    await fileManager.uploadFiles('event_request', record.id, 'room_booking', formData.room_booking_files);
+                    console.log('Room booking files uploaded successfully');
+                } catch (error) {
+                    console.error('Failed to upload room booking files:', error);
+                    console.error('Error details:', {
+                        message: error instanceof Error ? error.message : 'Unknown error',
+                        stack: error instanceof Error ? error.stack : undefined,
+                        collection: 'event_request',
+                        recordId: record.id,
+                        field: 'room_booking',
+                        fileCount: formData.room_booking_files.length
+                    });
+                    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                    fileUploadErrors.push(`Failed to upload room booking files: ${errorMessage}`);
+                }
             }
 
-            // Upload multiple invoice files
+            // Upload invoice files
             if (formData.invoice_files && formData.invoice_files.length > 0) {
-                await fileManager.appendFiles('event_request', record.id, 'invoice_files', formData.invoice_files);
-
-                // For backward compatibility, also upload the first file as the main invoice
-                if (formData.invoice || formData.invoice_files[0]) {
-                    const mainInvoice = formData.invoice || formData.invoice_files[0];
-                    await fileManager.uploadFile('event_request', record.id, 'invoice', mainInvoice);
+                try {
+                    console.log('Uploading invoice files:', formData.invoice_files.length, 'files');
+                    console.log('Invoice files:', formData.invoice_files.map(f => ({ name: f.name, size: f.size, type: f.type })));
+                    console.log('Using collection:', 'event_request', 'record ID:', record.id, 'field:', 'invoice');
+                    
+                    // Use the correct field name 'invoice' instead of 'invoice_files'
+                    await fileManager.uploadFiles('event_request', record.id, 'invoice', formData.invoice_files);
+                    console.log('Invoice files uploaded successfully');
+                } catch (error) {
+                    console.error('Failed to upload invoice files:', error);
+                    console.error('Error details:', {
+                        message: error instanceof Error ? error.message : 'Unknown error',
+                        stack: error instanceof Error ? error.stack : undefined,
+                        collection: 'event_request',
+                        recordId: record.id,
+                        field: 'invoice',
+                        fileCount: formData.invoice_files.length
+                    });
+                    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                    fileUploadErrors.push(`Failed to upload invoice files: ${errorMessage}`);
                 }
             } else if (formData.invoice) {
-                await fileManager.uploadFile('event_request', record.id, 'invoice', formData.invoice);
+                try {
+                    console.log('Uploading single invoice file:', { name: formData.invoice.name, size: formData.invoice.size, type: formData.invoice.type });
+                    await fileManager.uploadFile('event_request', record.id, 'invoice', formData.invoice);
+                    console.log('Invoice file uploaded successfully');
+                } catch (error) {
+                    console.error('Failed to upload invoice file:', error);
+                    console.error('Error details:', {
+                        message: error instanceof Error ? error.message : 'Unknown error',
+                        stack: error instanceof Error ? error.stack : undefined,
+                        collection: 'event_request',
+                        recordId: record.id,
+                        field: 'invoice'
+                    });
+                    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                    fileUploadErrors.push(`Failed to upload invoice file: ${errorMessage}`);
+                }
+            }
+
+            // Show file upload warnings if any occurred
+            if (fileUploadErrors.length > 0) {
+                console.warn('File upload errors:', fileUploadErrors);
+                // Show each file upload error as a separate toast for better UX
+                fileUploadErrors.forEach(error => {
+                    toast.error(error, {
+                        duration: 6000, // Longer duration for file upload errors
+                        position: 'top-right'
+                    });
+                });
+                // Also show a summary toast
+                toast.error(`Event request submitted successfully, but ${fileUploadErrors.length} file upload(s) failed. Please check the errors above and re-upload the files manually.`, {
+                    duration: 8000,
+                    position: 'top-center'
+                });
+            } else {
+                // Keep success toast for form submission since it's a user action
+                toast.success('Event request submitted successfully!');
             }
 
             // Clear form data from localStorage
             localStorage.removeItem('eventRequestFormData');
 
-            // Keep success toast for form submission since it's a user action
-            toast.success('Event request submitted successfully!');
+            // Send email notification to coordinators (non-blocking)
+            try {
+                await EmailClient.notifyEventRequestSubmission(record.id);
+                console.log('Event request notification email sent successfully');
+            } catch (emailError) {
+                console.error('Failed to send event request notification email:', emailError);
+                // Don't show error to user - email failure shouldn't disrupt the main flow
+            }
 
             // Reset form
             resetForm();
@@ -329,7 +504,6 @@ const EventRequestForm: React.FC = () => {
         } catch (error) {
             console.error('Error submitting event request:', error);
             toast.error('Failed to submit event request. Please try again.');
-            setError('Failed to submit event request. Please try again.');
         } finally {
             setIsSubmitting(false);
         }
@@ -376,53 +550,111 @@ const EventRequestForm: React.FC = () => {
 
     // Validate Event Details Section
     const validateEventDetailsSection = () => {
-        if (!formData.name) {
-            toast.error('Please enter an event name');
+        let valid = true;
+        const errors: string[] = [];
+
+        if (!formData.name || formData.name.trim() === '') {
+            errors.push('Event name is required');
+            valid = false;
+        }
+
+        if (!formData.event_description || formData.event_description.trim() === '') {
+            errors.push('Event description is required');
+            valid = false;
+        }
+
+        if (!formData.start_date_time || formData.start_date_time.trim() === '') {
+            errors.push('Event start date and time is required');
+            valid = false;
+        } else {
+            // Validate start date format
+            try {
+                const startDate = new Date(formData.start_date_time);
+                if (isNaN(startDate.getTime())) {
+                    errors.push('Invalid start date and time format');
+                    valid = false;
+                } else {
+                    // Check if start date is in the future
+                    const now = new Date();
+                    if (startDate <= now) {
+                        errors.push('Event start date must be in the future');
+                        valid = false;
+                    }
+                }
+            } catch (e) {
+                errors.push('Invalid start date and time format');
+                valid = false;
+            }
+        }
+
+        if (!formData.end_date_time || formData.end_date_time.trim() === '') {
+            errors.push('Event end time is required');
+            valid = false;
+        } else if (formData.start_date_time) {
+            // Validate end date format and logic
+            try {
+                const startDate = new Date(formData.start_date_time);
+                const endDate = new Date(formData.end_date_time);
+                
+                if (isNaN(endDate.getTime())) {
+                    errors.push('Invalid end date and time format');
+                    valid = false;
+                } else if (!isNaN(startDate.getTime()) && endDate <= startDate) {
+                    errors.push('Event end time must be after the start time');
+                    valid = false;
+                }
+            } catch (e) {
+                errors.push('Invalid end date and time format');
+                valid = false;
+            }
+        }
+
+        if (!formData.location || formData.location.trim() === '') {
+            errors.push('Event location is required');
+            valid = false;
+        }
+
+        if (formData.will_or_have_room_booking === undefined || formData.will_or_have_room_booking === null) {
+            errors.push('Room booking status is required');
+            valid = false;
+        }
+
+        if (errors.length > 0) {
+            // Show the first error as a toast instead of setting error state
+            toast.error(errors[0]);
             return false;
         }
 
-        if (!formData.event_description) {
-            toast.error('Please enter an event description');
-            return false;
-        }
-
-        if (!formData.start_date_time) {
-            toast.error('Please enter a start date and time');
-            return false;
-        }
-
-        if (!formData.end_date_time) {
-            toast.error('Please enter an end date and time');
-            return false;
-        }
-
-        if (!formData.location) {
-            toast.error('Please enter an event location');
-            return false;
-        }
-
-        if (formData.will_or_have_room_booking === null || formData.will_or_have_room_booking === undefined) {
-            toast.error('Please specify if you have a room booking');
-            return false;
-        }
-
-        return true;
+        return valid;
     };
 
     // Validate TAP Form Section
     const validateTAPFormSection = () => {
-        if (!formData.expected_attendance) {
-            toast.error('Please enter the expected attendance');
+        // Verify that all required fields are filled
+        if (!formData.will_or_have_room_booking && formData.will_or_have_room_booking !== false) {
+            toast.error('Please indicate whether you will or have a room booking');
             return false;
         }
 
-        if (!formData.room_booking && formData.will_or_have_room_booking) {
-            toast.error('Please upload your room booking confirmation');
+        if (!formData.expected_attendance || formData.expected_attendance <= 0) {
+            toast.error('Please enter a valid expected attendance');
             return false;
         }
 
-        if (formData.food_drinks_being_served === null || formData.food_drinks_being_served === undefined) {
-            toast.error('Please specify if food/drinks will be served');
+        // REQUIRED: Room booking files if will_or_have_room_booking is true
+        if (formData.will_or_have_room_booking && formData.room_booking_files.length === 0) {
+            toast.error('Room booking files are required when you need a room booking');
+            return false;
+        }
+
+        if (!formData.food_drinks_being_served && formData.food_drinks_being_served !== false) {
+            toast.error('Please indicate whether food/drinks will be served');
+            return false;
+        }
+
+        // Validate AS funding question if food is being served
+        if (formData.food_drinks_being_served && formData.needs_as_funding === undefined) {
+            toast.error('Please indicate whether you need AS funding');
             return false;
         }
 
@@ -431,17 +663,28 @@ const EventRequestForm: React.FC = () => {
 
     // Validate AS Funding Section
     const validateASFundingSection = () => {
-        if (formData.needs_as_funding) {
-            // Check if vendor is provided
-            if (!formData.invoiceData.vendor) {
-                toast.error('Please enter the vendor/restaurant name');
+        if (formData.as_funding_required || formData.needs_as_funding) {
+            // REQUIRED: Invoice files if AS funding is needed
+            if (!formData.invoice_files || formData.invoice_files.length === 0) {
+                toast.error('Invoice files are required when requesting AS funding');
                 return false;
             }
 
-            // No longer require items in the invoice
-            // Check if at least one invoice file is uploaded
-            if (!formData.invoice && (!formData.invoice_files || formData.invoice_files.length === 0)) {
-                toast.error('Please upload at least one invoice file');
+            // Check if invoice data is present and has items
+            if (!formData.invoiceData || !formData.invoiceData.items || formData.invoiceData.items.length === 0) {
+                toast.error('Please add at least one item to your invoice');
+                return false;
+            }
+
+            // Calculate the total budget from invoice items
+            const totalBudget = formData.invoiceData.items.reduce(
+                (sum, item) => sum + (item.unitPrice * item.quantity), 0
+            );
+
+            // Check if the budget exceeds the maximum allowed ($5000 cap regardless of attendance)
+            const maxBudget = Math.min(formData.expected_attendance * 10, 5000);
+            if (totalBudget > maxBudget) {
+                toast.error(`Your budget ($${totalBudget.toFixed(2)}) exceeds the maximum allowed ($${maxBudget}). The absolute maximum is $5,000.`);
                 return false;
             }
         }
@@ -451,8 +694,11 @@ const EventRequestForm: React.FC = () => {
 
     // Validate all sections before submission
     const validateAllSections = () => {
-        // Validate Event Details
+        // We no longer forcibly set end_date_time to match start_date_time
+        // The end time is now configured separately with the same date
+
         if (!validateEventDetailsSection()) {
+            setCurrentStep(1);
             return false;
         }
 
@@ -489,19 +735,29 @@ const EventRequestForm: React.FC = () => {
             isValid = validateASFundingSection();
         }
 
-        if (isValid) {
-            // Set the current step
-            setCurrentStep(nextStep);
+        if (!isValid) {
+            return; // Don't proceed if validation fails
+        }
 
-            // If moving to the review step, mark the form as reviewed
-            // but don't submit it automatically
-            if (nextStep === 6) {
-                setFormData(prevData => ({
-                    ...prevData,
-                    formReviewed: true
-                }));
+        // If we're moving from step 4 to step 5
+        if (currentStep === 4 && nextStep === 5) {
+            // If food and drinks aren't being served or if AS funding isn't needed, skip to step 6 (review)
+            if (!formData.food_drinks_being_served || !formData.needs_as_funding) {
+                nextStep = 6;
             }
         }
+
+        // Set the current step
+        setCurrentStep(nextStep);
+
+        // If moving to the review step, mark the form as reviewed
+        // but don't submit it automatically
+        if (nextStep === 6) {
+            setFormData(prevData => ({
+                ...prevData,
+                formReviewed: true
+            }));
+        }
     };
 
     // Handle form submission with validation
@@ -533,6 +789,14 @@ const EventRequestForm: React.FC = () => {
                     variants={containerVariants}
                     className="space-y-6"
                 >
+                    <CustomAlert
+                        type="warning"
+                        title="Multiple Events Notice"
+                        message="If you have multiple events, you must submit a separate TAP form for each one. Multiple-day events require individual submissions for each day."
+                        icon="heroicons:exclamation-triangle"
+                        className="mb-4"
+                    />
+
                     <h2 className="text-2xl font-bold mb-4 text-primary">Event Request Form</h2>
 
                     <div className="bg-base-300/50 p-4 rounded-lg mb-6">
@@ -647,55 +911,19 @@ const EventRequestForm: React.FC = () => {
                     variants={containerVariants}
                     className="space-y-6"
                 >
-                    {formData.food_drinks_being_served && (
-                        <div className="bg-base-200/50 p-6 rounded-lg mb-6">
-                            <h3 className="text-xl font-semibold mb-4">Do you need AS funding for this event?</h3>
-                            <div className="flex flex-col sm:flex-row gap-4">
-                                <button
-                                    className={`btn btn-lg ${formData.needs_as_funding ? 'btn-primary' : 'btn-outline'} flex-1`}
-                                    onClick={() => {
-                                        setFormData({ ...formData, needs_as_funding: true, as_funding_required: true });
-                                    }}
-                                >
-                                    Yes
-                                </button>
-                                <button
-                                    className={`btn btn-lg ${!formData.needs_as_funding && formData.needs_as_funding !== null ? 'btn-primary' : 'btn-outline'} flex-1`}
-                                    onClick={() => {
-                                        setFormData({ ...formData, needs_as_funding: false, as_funding_required: false });
-                                    }}
-                                >
-                                    No
-                                </button>
-                            </div>
-                        </div>
-                    )}
+                    <div className="bg-base-200/50 p-6 rounded-lg mb-6">
+                        <h3 className="text-xl font-semibold mb-4">AS Funding Details</h3>
+                        <p className="mb-4">Please provide the necessary information for your AS funding request.</p>
+                    </div>
 
-                    {!formData.food_drinks_being_served && (
-                        <div className="bg-base-200/50 p-6 rounded-lg mb-6">
-                            <h3 className="text-xl font-semibold mb-4">AS Funding Information</h3>
-                            <p className="mb-4">Since you're not serving food or drinks, AS funding is not applicable for this event.</p>
-                            <div className="alert alert-info">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-5 w-5 stroke-current">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                </svg>
-                                <div>
-                                    <p>If you need to request AS funding for other purposes, please contact the AS office directly.</p>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                    {formData.needs_as_funding && formData.food_drinks_being_served && (
-                        <ASFundingSection formData={formData} onDataChange={handleSectionDataChange} />
-                    )}
+                    <ASFundingSection formData={formData} onDataChange={handleSectionDataChange} />
 
                     <div className="flex justify-between mt-8">
                         <button className="btn btn-outline" onClick={() => setCurrentStep(4)}>
                             Back
                         </button>
                         <button className="btn btn-primary" onClick={() => handleNextStep(6)}>
-                            Review Form
+                            Next
                         </button>
                     </div>
                 </motion.div>
@@ -724,18 +952,27 @@ const EventRequestForm: React.FC = () => {
 
                         <div className="divider my-6">Ready to Submit?</div>
 
-                        <div className="alert alert-info mb-6">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-5 w-5 stroke-current">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                            </svg>
-                            <div>
-                                <p>Once submitted, you'll need to notify PR and/or Coordinators in the #-events Slack channel.</p>
-                            </div>
-                        </div>
+                        <CustomAlert
+                            type="info"
+                            title="Important Note"
+                            message="Once submitted, you'll need to notify PR and/or Coordinators in the #-events Slack channel."
+                            icon="heroicons:information-circle"
+                            className="mb-6"
+                        />
                     </div>
 
                     <div className="flex justify-between mt-8">
-                        <button className="btn btn-outline" onClick={() => setCurrentStep(5)}>
+                        <button
+                            className="btn btn-outline"
+                            onClick={() => {
+                                // Skip the AS Funding section if not needed
+                                if (!formData.food_drinks_being_served || !formData.needs_as_funding) {
+                                    setCurrentStep(4);  // Go back to TAP Form section
+                                } else {
+                                    setCurrentStep(5);  // Go back to AS Funding section
+                                }
+                            }}
+                        >
                             Back
                         </button>
                         <button
@@ -778,22 +1015,6 @@ const EventRequestForm: React.FC = () => {
                     }}
                     className="space-y-6"
                 >
-                    <AnimatePresence mode="wait">
-                        {error && (
-                            <motion.div
-                                initial={{ opacity: 0, y: -20, scale: 0.95 }}
-                                animate={{ opacity: 1, y: 0, scale: 1 }}
-                                exit={{ opacity: 0, y: 20, scale: 0.95 }}
-                                className="alert alert-error shadow-lg"
-                            >
-                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 stroke-current" fill="none" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                                </svg>
-                                <span>{error}</span>
-                            </motion.div>
-                        )}
-                    </AnimatePresence>
-
                     {/* Progress indicator */}
                     <div className="w-full mb-6">
                         <div className="flex justify-between mb-2">

src/components/dashboard/Officer_EventRequestForm/PRSection.tsx

@@ -3,8 +3,21 @@ import { motion } from 'framer-motion';
 import type { EventRequestFormData } from './EventRequestForm';
 import type { EventRequest } from '../../../schemas/pocketbase';
 import { FlyerTypes, LogoOptions } from '../../../schemas/pocketbase';
+import CustomAlert from '../universal/CustomAlert';
+import { Icon } from '@iconify/react';
+
+// Enhanced animation variants
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.07,
+            when: "beforeChildren"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: {
@@ -18,6 +31,37 @@ const itemVariants = {
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    }
+};
+
+// Checkbox animation
+const checkboxVariants = {
+    checked: { scale: 1.05 },
+    unchecked: { scale: 1 },
+    hover: {
+        backgroundColor: "rgba(var(--p), 0.1)",
+        transition: { duration: 0.2 }
+    },
+    tap: { scale: 0.95 }
+};
+
+// File upload animation
+const fileUploadVariants = {
+    initial: { scale: 1 },
+    hover: {
+        scale: 1.02,
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    },
+    tap: { scale: 0.98 }
+};
+
 // Flyer type options
 const FLYER_TYPES = [
     { value: FlyerTypes.DIGITAL_WITH_SOCIAL, label: 'Digital flyer (with social media advertising: Facebook, Instagram, Discord)' },
@@ -55,6 +99,7 @@ interface PRSectionProps {
 
 const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
     const [otherLogoFiles, setOtherLogoFiles] = useState<File[]>(formData.other_logos || []);
+    const [isDragging, setIsDragging] = useState(false);
 
     // Handle checkbox change for flyer types
     const handleFlyerTypeChange = (type: string) => {
@@ -78,53 +123,129 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
     const handleLogoFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (e.target.files && e.target.files.length > 0) {
             const newFiles = Array.from(e.target.files) as File[];
-            setOtherLogoFiles(newFiles);
-            onDataChange({ other_logos: newFiles });
+            // Combine existing files with new files instead of replacing
+            const combinedFiles = [...otherLogoFiles, ...newFiles];
+            setOtherLogoFiles(combinedFiles);
+            onDataChange({ other_logos: combinedFiles });
+        }
+    };
+
+    // Handle removing individual files
+    const handleRemoveLogoFile = (indexToRemove: number) => {
+        const updatedFiles = otherLogoFiles.filter((_, index) => index !== indexToRemove);
+        setOtherLogoFiles(updatedFiles);
+        onDataChange({ other_logos: updatedFiles });
+    };
+
+    // Handle clearing all files
+    const handleClearAllLogoFiles = () => {
+        setOtherLogoFiles([]);
+        onDataChange({ other_logos: [] });
+    };
+
+    // Handle drag events for file upload
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const newFiles = Array.from(e.dataTransfer.files) as File[];
+            // Combine existing files with new files instead of replacing
+            const combinedFiles = [...otherLogoFiles, ...newFiles];
+            setOtherLogoFiles(combinedFiles);
+            onDataChange({ other_logos: combinedFiles });
         }
     };
 
     return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">PR Materials</h2>
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    PR Materials
+                </h2>
+            </motion.div>
 
-            <div className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <p className="text-sm">
-                    If you need PR Materials, please don't forget that this form MUST be submitted at least 6 weeks in advance even if you aren't requesting AS funding or physical flyers. Also, please remember to ping PR in #-events on Slack once you've submitted this form.
-                </p>
-            </div>
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="info"
+                    title="Important Timeline"
+                    message="If you need PR Materials, please don't forget that this form MUST be submitted at least 6 weeks in advance even if you aren't requesting AS funding or physical flyers. Also, please remember to ping PR in #-events on Slack once you've submitted this form."
+                    className="mb-6"
+                    icon="heroicons:clock"
+                />
+            </motion.div>
 
             {/* Type of material needed */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium text-lg">Type of material needed?</span>
+                    <span className="label-text font-medium text-lg">Type of Material Needed</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="space-y-2 mt-2">
+
+                <div className="space-y-3 mt-3">
                     {FLYER_TYPES.map((type) => (
-                        <label key={type.value} className="flex items-start gap-2 cursor-pointer hover:bg-base-300/30 p-2 rounded-md transition-colors">
+                        <motion.label
+                            key={type.value}
+                            className={`flex items-start gap-3 cursor-pointer p-3 rounded-lg transition-colors ${formData.flyer_type.includes(type.value)
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'hover:bg-base-300/30'
+                                }`}
+                            initial="unchecked"
+                            animate={formData.flyer_type.includes(type.value) ? "checked" : "unchecked"}
+                            whileHover="hover"
+                            whileTap="tap"
+                            variants={checkboxVariants}
+                            style={{ margin: '4px' }}
+                        >
                             <input
                                 type="checkbox"
                                 className="checkbox checkbox-primary mt-1"
                                 checked={formData.flyer_type.includes(type.value)}
                                 onChange={() => handleFlyerTypeChange(type.value)}
                             />
-                            <span>{type.label}</span>
-                        </label>
+                            <span className="font-medium">{type.label}</span>
+                        </motion.label>
                     ))}
                 </div>
 
                 {/* Other flyer type input */}
                 {formData.flyer_type.includes(FlyerTypes.OTHER) && (
-                    <div className="mt-3 pl-7">
-                        <input
+                    <motion.div
+                        className="mt-4 pl-8"
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <motion.input
                             type="text"
-                            className="input input-bordered w-full"
+                            className="input input-bordered input-primary w-full"
                             placeholder="Please specify other material needed"
                             value={formData.other_flyer_type}
                             onChange={(e) => onDataChange({ other_flyer_type: e.target.value })}
                             required
+                            whileHover="hover"
+                            variants={inputHoverVariants}
                         />
-                    </div>
+                    </motion.div>
                 )}
             </motion.div>
 
@@ -134,110 +255,233 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
                 type === FlyerTypes.PHYSICAL_WITH_ADVERTISING ||
                 type === FlyerTypes.NEWSLETTER
             ) && (
-                    <motion.div variants={itemVariants} className="form-control">
+                    <motion.div
+                        variants={itemVariants}
+                        className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.3 }}
+                        whileHover={{ y: -2 }}
+                    >
                         <label className="label">
-                            <span className="label-text font-medium">When do you need us to start advertising?</span>
+                            <span className="label-text font-medium text-lg">Advertising Start Date</span>
                             <span className="label-text-alt text-error">*</span>
                         </label>
-                        <input
+                        <p className="text-sm text-gray-500 mb-3">When do you need us to start advertising?</p>
+
+                        <motion.input
                             type="date"
-                            className="input input-bordered focus:input-primary transition-all duration-300"
+                            className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
                             value={formData.flyer_advertising_start_date}
                             onChange={(e) => onDataChange({ flyer_advertising_start_date: e.target.value })}
                             required
+                            whileHover="hover"
+                            variants={inputHoverVariants}
                         />
                     </motion.div>
                 )}
 
             {/* Logos Required */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Logos Required</span>
+                    <span className="label-text font-medium text-lg">Logos Required</span>
                 </label>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-3">
                     {LOGO_OPTIONS.map((logo) => (
-                        <label key={logo.value} className="flex items-start gap-2 cursor-pointer">
+                        <motion.label
+                            key={logo.value}
+                            className={`flex items-start gap-3 cursor-pointer p-3 rounded-lg transition-colors ${formData.required_logos.includes(logo.value)
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'hover:bg-base-300/30'
+                                }`}
+                            initial="unchecked"
+                            animate={formData.required_logos.includes(logo.value) ? "checked" : "unchecked"}
+                            whileHover="hover"
+                            whileTap="tap"
+                            variants={checkboxVariants}
+                            style={{ margin: '4px' }}
+                        >
                             <input
                                 type="checkbox"
                                 className="checkbox checkbox-primary mt-1"
                                 checked={formData.required_logos.includes(logo.value)}
                                 onChange={() => handleLogoChange(logo.value)}
                             />
-                            <span>{logo.label}</span>
-                        </label>
+                            <span className="font-medium">{logo.label}</span>
+                        </motion.label>
                     ))}
                 </div>
             </motion.div>
 
             {/* Logo file upload */}
             {formData.required_logos.includes(LogoOptions.OTHER) && (
-                <motion.div variants={itemVariants} className="form-control">
+                <motion.div
+                    variants={itemVariants}
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3 }}
+                    whileHover={{ y: -2 }}
+                >
                     <label className="label">
-                        <span className="label-text font-medium">Please share your logo files here</span>
+                        <span className="label-text font-medium text-lg">Logo Files</span>
                         <span className="label-text-alt text-error">*</span>
                     </label>
-                    <input
-                        type="file"
-                        className="file-input file-input-bordered w-full file-input-primary hover:file-input-ghost transition-all duration-300"
-                        onChange={handleLogoFileChange}
-                        accept="image/*"
-                        multiple
-                        required
-                    />
-                    {otherLogoFiles.length > 0 && (
-                        <div className="mt-2">
-                            <p className="text-sm font-medium mb-1">Selected files:</p>
-                            <ul className="list-disc list-inside text-sm">
-                                {otherLogoFiles.map((file, index) => (
-                                    <li key={index}>{file.name}</li>
-                                ))}
-                            </ul>
+
+                    <motion.div
+                        className={`mt-2 border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-primary/50'
+                            }`}
+                        variants={fileUploadVariants}
+                        initial="initial"
+                        whileHover="hover"
+                        whileTap="tap"
+                        onDragOver={handleDragOver}
+                        onDragLeave={handleDragLeave}
+                        onDrop={handleDrop}
+                        onClick={() => document.getElementById('logo-files')?.click()}
+                    >
+                        <input
+                            id="logo-files"
+                            type="file"
+                            className="hidden"
+                            onChange={handleLogoFileChange}
+                            accept="image/*"
+                            multiple
+                            required
+                        />
+
+                        <div className="flex flex-col items-center justify-center gap-3">
+                            <motion.div
+                                className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary"
+                                whileHover={{ rotate: 15, scale: 1.1 }}
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                            </motion.div>
+
+                            {otherLogoFiles.length > 0 ? (
+                                <>
+                                    <div className="flex items-center justify-between w-full">
+                                        <p className="font-medium text-primary">{otherLogoFiles.length} file(s) selected:</p>
+                                        <button
+                                            type="button"
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                handleClearAllLogoFiles();
+                                            }}
+                                            className="btn btn-xs btn-outline btn-error"
+                                            title="Clear all files"
+                                        >
+                                            Clear All
+                                        </button>
+                                    </div>
+                                    <div className="max-h-32 overflow-y-auto text-left w-full space-y-1">
+                                        {otherLogoFiles.map((file, index) => (
+                                            <div key={index} className="flex items-center justify-between bg-base-100 p-2 rounded">
+                                                <span className="text-sm truncate flex-1">{file.name}</span>
+                                                <button
+                                                    type="button"
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        handleRemoveLogoFile(index);
+                                                    }}
+                                                    className="btn btn-xs btn-error ml-2"
+                                                    title="Remove file"
+                                                >
+                                                    <Icon icon="heroicons:x-mark" className="w-3 h-3" />
+                                                </button>
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <p className="text-xs text-gray-500">Click or drag to add more files</p>
+                                </>
+                            ) : (
+                                <>
+                                    <p className="font-medium">Drop your logo files here or click to browse</p>
+                                    <p className="text-xs text-gray-500">Please upload transparent logo files (PNG preferred, multiple files allowed)</p>
+                                </>
+                            )}
                         </div>
-                    )}
+                    </motion.div>
                 </motion.div>
             )}
 
             {/* Format */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">What format do you need it to be in?</span>
+                    <span className="label-text font-medium text-lg">Required Format</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <select
+                <p className="text-sm text-gray-500 mb-3">What format do you need the materials to be in?</p>
+
+                <motion.select
                     className="select select-bordered focus:select-primary transition-all duration-300"
                     value={formData.advertising_format}
                     onChange={(e) => onDataChange({ advertising_format: e.target.value })}
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 >
                     <option value="">Select format</option>
                     {FORMAT_OPTIONS.map(option => (
                         <option key={option.value} value={option.value}>{option.label}</option>
                     ))}
-                </select>
+                </motion.select>
             </motion.div>
 
             {/* Additional specifications */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Any other specifications and requests?</span>
+                    <span className="label-text font-medium text-lg">Additional Specifications</span>
                 </label>
-                <textarea
+                <p className="text-sm text-gray-500 mb-3">Any other specifications and requests?</p>
+
+                <motion.textarea
                     className="textarea textarea-bordered focus:textarea-primary transition-all duration-300 min-h-[120px]"
                     value={formData.flyer_additional_requests}
                     onChange={(e) => onDataChange({ flyer_additional_requests: e.target.value })}
                     placeholder="Color scheme, overall design, examples to consider, etc."
                     rows={4}
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
             {/* Photography Needed */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Photography Needed?</span>
+                    <span className="label-text font-medium text-lg">Photography</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                <p className="text-sm text-gray-500 mb-3">Do you need photography for your event?</p>
+
+                <div className="flex gap-6 mt-2">
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.photography_needed === true
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -245,9 +489,17 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
                             onChange={() => onDataChange({ photography_needed: true })}
                             required
                         />
-                        <span>Yes</span>
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                        <span className="font-medium">Yes, we need photography</span>
+                    </motion.label>
+
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.photography_needed === false
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -255,11 +507,11 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
                             onChange={() => onDataChange({ photography_needed: false })}
                             required
                         />
-                        <span>No</span>
-                    </label>
+                        <span className="font-medium">No, we don't need photography</span>
+                    </motion.label>
                 </div>
             </motion.div>
-        </div>
+        </motion.div>
     );
 };
 

src/components/dashboard/Officer_EventRequestForm/TAPFormSection.tsx

@@ -1,9 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import type { EventRequestFormData } from './EventRequestForm';
 import type { EventRequest } from '../../../schemas/pocketbase';
+import CustomAlert from '../universal/CustomAlert';
+import FilePreview from '../universal/FilePreview';
+import { Icon } from '@iconify/react';
+
+// Enhanced animation variants
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.1,
+            when: "beforeChildren"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: {
@@ -17,92 +31,445 @@ const itemVariants = {
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    }
+};
+
+// Add a new CSS class to hide the number input arrows
+const hiddenNumberInputArrows = `
+    /* Hide number input spinners */
+    input[type=number]::-webkit-inner-spin-button,
+    input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+`;
+
+// File upload animation
+const fileUploadVariants = {
+    initial: { scale: 1 },
+    hover: {
+        scale: 1.02,
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    },
+    tap: { scale: 0.98 }
+};
+
 interface TAPFormSectionProps {
     formData: EventRequestFormData;
     onDataChange: (data: Partial<EventRequestFormData>) => void;
 }
 
 const TAPFormSection: React.FC<TAPFormSectionProps> = ({ formData, onDataChange }) => {
-    const [roomBookingFile, setRoomBookingFile] = useState<File | null>(formData.room_booking);
+    const [roomBookingFiles, setRoomBookingFiles] = useState<File[]>(formData.room_booking_files || []);
+    const [isDragging, setIsDragging] = useState(false);
+    const [fileError, setFileError] = useState<string | null>(null);
+    const [showFilePreview, setShowFilePreview] = useState(false);
+    const [filePreviewUrl, setFilePreviewUrl] = useState<string | null>(null);
+    const [selectedPreviewFile, setSelectedPreviewFile] = useState<File | null>(null);
 
-    // Handle room booking file upload
+    // Add style tag for hidden arrows
+    useEffect(() => {
+        const style = document.createElement('style');
+        style.textContent = hiddenNumberInputArrows;
+        document.head.appendChild(style);
+
+        return () => {
+            document.head.removeChild(style);
+        };
+    }, []);
+
+    // Handle room booking file upload with size limit
     const handleRoomBookingFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (e.target.files && e.target.files.length > 0) {
-            const file = e.target.files[0];
-            setRoomBookingFile(file);
-            onDataChange({ room_booking: file });
+            const newFiles = Array.from(e.target.files) as File[];
+            
+            // Check file sizes - 1MB limit for each file
+            const oversizedFiles = newFiles.filter(file => file.size > 1024 * 1024);
+            if (oversizedFiles.length > 0) {
+                setFileError(`${oversizedFiles.length} file(s) exceed 1MB limit`);
+                return;
+            }
+
+            setFileError(null);
+            // Combine existing files with new files instead of replacing
+            const combinedFiles = [...roomBookingFiles, ...newFiles];
+            setRoomBookingFiles(combinedFiles);
+            onDataChange({ room_booking_files: combinedFiles });
+
+            // Create preview URL for the first new file
+            if (filePreviewUrl) {
+                URL.revokeObjectURL(filePreviewUrl);
+            }
+            const url = URL.createObjectURL(newFiles[0]);
+            setFilePreviewUrl(url);
+            setSelectedPreviewFile(newFiles[0]);
         }
     };
 
-    return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">TAP Form Information</h2>
+    // Handle removing individual files
+    const handleRemoveFile = (indexToRemove: number) => {
+        const updatedFiles = roomBookingFiles.filter((_, index) => index !== indexToRemove);
+        setRoomBookingFiles(updatedFiles);
+        onDataChange({ room_booking_files: updatedFiles });
+        
+        // Clear preview if we removed the previewed file
+        if (selectedPreviewFile && updatedFiles.length === 0) {
+            if (filePreviewUrl) {
+                URL.revokeObjectURL(filePreviewUrl);
+                setFilePreviewUrl(null);
+            }
+            setSelectedPreviewFile(null);
+        }
+    };
 
-            <div className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <p className="text-sm">
-                    Please ensure you have ALL sections completed. If something is not available, let the coordinators know and be advised on how to proceed.
-                </p>
-            </div>
+    // Handle clearing all files
+    const handleClearAllFiles = () => {
+        setRoomBookingFiles([]);
+        onDataChange({ room_booking_files: [] });
+        if (filePreviewUrl) {
+            URL.revokeObjectURL(filePreviewUrl);
+            setFilePreviewUrl(null);
+        }
+        setSelectedPreviewFile(null);
+    };
+
+    // Handle drag events for file upload
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const newFiles = Array.from(e.dataTransfer.files) as File[];
+
+            // Check file sizes - 1MB limit for each file
+            const oversizedFiles = newFiles.filter(file => file.size > 1024 * 1024);
+            if (oversizedFiles.length > 0) {
+                setFileError(`${oversizedFiles.length} file(s) exceed 1MB limit`);
+                return;
+            }
+
+            setFileError(null);
+            // Combine existing files with new files instead of replacing
+            const combinedFiles = [...roomBookingFiles, ...newFiles];
+            setRoomBookingFiles(combinedFiles);
+            onDataChange({ room_booking_files: combinedFiles });
+
+            // Create preview URL for the first new file
+            if (filePreviewUrl) {
+                URL.revokeObjectURL(filePreviewUrl);
+            }
+            const url = URL.createObjectURL(newFiles[0]);
+            setFilePreviewUrl(url);
+            setSelectedPreviewFile(newFiles[0]);
+        }
+    };
+
+    // Function to toggle file preview
+    const toggleFilePreview = () => {
+        setShowFilePreview(!showFilePreview);
+    };
+
+    // Clean up object URL when component unmounts
+    useEffect(() => {
+        return () => {
+            if (filePreviewUrl) {
+                URL.revokeObjectURL(filePreviewUrl);
+            }
+        };
+    }, [filePreviewUrl]);
+
+    return (
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    TAP Form Information
+                </h2>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="info"
+                    title="CRITICAL INFORMATION"
+                    message="Failure to complete ALL sections with accurate information WILL result in event cancellation. This is non-negotiable. If information is not available, contact the event coordinator BEFORE submitting."
+                    className="mb-6"
+                    icon="heroicons:exclamation-triangle"
+                />
+            </motion.div>
 
             {/* Expected attendance */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium text-lg">Expected attendance? Include a number NOT a range please.</span>
+                    <span className="label-text font-medium text-lg">Expected Attendance</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
                 <div className="relative mt-2">
-                    <input
+                    <motion.input
                         type="number"
-                        className="input input-bordered focus:input-primary transition-all duration-300 w-full"
+                        className="input input-bordered focus:input-primary transition-all duration-300 w-full pr-20"
                         value={formData.expected_attendance || ''}
-                        onChange={(e) => onDataChange({ expected_attendance: parseInt(e.target.value) || 0 })}
+                        onChange={(e) => {
+                            // Allow any attendance number, no longer limiting to 500
+                            const attendance = parseInt(e.target.value) || 0;
+                            onDataChange({ expected_attendance: attendance });
+                        }}
                         min="0"
                         placeholder="Enter expected attendance"
                         required
+                        whileHover="hover"
+                        variants={inputHoverVariants}
                     />
-                    <div className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-gray-400">
+                    <div className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-gray-400 bg-base-100 px-2 py-1 rounded">
                         people
                     </div>
                 </div>
-                <div className="text-xs text-gray-400 mt-2">
-                    <p>PROGRAMMING FUNDS EVENTS FUNDED BY PROGRAMMING FUNDS MAY ONLY ADMIT UC SAN DIEGO STUDENTS, STAFF OR FACULTY AS GUESTS.</p>
-                    <p>ONLY UC SAN DIEGO UNDERGRADUATE STUDENTS MAY RECEIVE ITEMS FUNDED BY THE ASSOCIATED STUDENTS.</p>
-                    <p>EVENT FUNDING IS GRANTED UP TO A MAXIMUM OF $10.00 PER EXPECTED STUDENT ATTENDEE AND $5,000 PER EVENT</p>
-                </div>
+                {formData.expected_attendance > 0 && (
+                    <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        className="mt-4 bg-success/20 p-3 rounded-lg"
+                    >
+                        <p className="text-sm font-medium">
+                            Budget Calculator: $10 per person × {formData.expected_attendance} people
+                        </p>
+                        <p className="text-base font-bold mt-1">
+                            {formData.expected_attendance * 10 <= 5000 ? (
+                                `You cannot exceed spending past $${formData.expected_attendance * 10} dollars.`
+                            ) : (
+                                `You cannot exceed spending past $5,000 dollars.`
+                            )}
+                        </p>
+                        {formData.expected_attendance * 10 > 5000 && (
+                            <p className="text-xs mt-1 text-warning">
+                                Budget cap reached. Maximum budget is $5,000 regardless of attendance.
+                            </p>
+                        )}
+                    </motion.div>
+                )}
+
+                <motion.div
+                    className="mt-4 p-4 bg-base-300/30 rounded-lg text-xs text-gray-400"
+                    initial={{ opacity: 0.8 }}
+                    whileHover={{ opacity: 1, scale: 1.01 }}
+                >
+                    <ul className="space-y-2 list-disc list-inside">
+                        <li>PROGRAMMING FUNDS EVENTS FUNDED BY PROGRAMMING FUNDS MAY ONLY ADMIT UC SAN DIEGO STUDENTS, STAFF OR FACULTY AS GUESTS.</li>
+                        <li>ONLY UC SAN DIEGO UNDERGRADUATE STUDENTS MAY RECEIVE ITEMS FUNDED BY THE ASSOCIATED STUDENTS.</li>
+                        <li>EVENT FUNDING IS GRANTED UP TO A MAXIMUM OF $10.00 PER EXPECTED STUDENT ATTENDEE AND $5,000 PER EVENT</li>
+                    </ul>
+                </motion.div>
             </motion.div>
 
-            {/* Room booking confirmation */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            {/* Room booking confirmation - Show file error if present */}
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium text-lg">Room booking confirmation</span>
-                    <span className="label-text-alt text-error">*</span>
+                    <span className="label-text font-medium text-lg">Room Booking Confirmation</span>
+                    {formData.will_or_have_room_booking && <span className="label-text-alt text-error">*</span>}
                 </label>
-                <div className="mt-2">
-                    <input
-                        type="file"
-                        className="file-input file-input-bordered file-input-primary w-full"
-                        onChange={handleRoomBookingFileChange}
-                        accept=".pdf,.png,.jpg,.jpeg"
-                    />
-                    {roomBookingFile && (
-                        <p className="text-sm mt-2">
-                            Selected file: {roomBookingFile.name}
-                        </p>
-                    )}
-                    <p className="text-xs text-gray-500 mt-2">
-                        Please upload a screenshot of your room booking confirmation. Accepted formats: PDF, PNG, JPG.
+                {formData.will_or_have_room_booking && (
+                    <p className="text-sm text-gray-500 mb-3">
+                        <strong>Required:</strong> Upload your room booking confirmation document.
                     </p>
-                </div>
+                )}
+
+                {fileError && (
+                    <div className="mt-2 mb-2">
+                        <CustomAlert
+                            type="error"
+                            title="File Error"
+                            message={fileError}
+                        />
+                    </div>
+                )}
+
+                {formData.will_or_have_room_booking ? (
+                    <motion.div
+                        className={`mt-2 border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-primary/50'
+                            }`}
+                        variants={fileUploadVariants}
+                        initial="initial"
+                        whileHover="hover"
+                        whileTap="tap"
+                        onDragOver={handleDragOver}
+                        onDragLeave={handleDragLeave}
+                        onDrop={handleDrop}
+                        onClick={() => document.getElementById('room-booking-file')?.click()}
+                    >
+                        <input
+                            id="room-booking-file"
+                            type="file"
+                            className="hidden"
+                            onChange={handleRoomBookingFileChange}
+                            accept=".pdf,.png,.jpg,.jpeg"
+                            multiple
+                        />
+
+                        <div className="flex flex-col items-center justify-center gap-3">
+                            <motion.div
+                                className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary"
+                                whileHover={{ rotate: 15, scale: 1.1 }}
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                                </svg>
+                            </motion.div>
+
+                            {roomBookingFiles.length > 0 ? (
+                                <>
+                                    <div className="flex items-center justify-between w-full">
+                                        <p className="font-medium text-primary">{roomBookingFiles.length} file(s) selected:</p>
+                                        <button
+                                            type="button"
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                handleClearAllFiles();
+                                            }}
+                                            className="btn btn-xs btn-outline btn-error"
+                                            title="Clear all files"
+                                        >
+                                            Clear All
+                                        </button>
+                                    </div>
+                                    <div className="max-h-32 overflow-y-auto text-left w-full space-y-1">
+                                        {roomBookingFiles.map((file, index) => (
+                                            <div key={index} className="flex items-center justify-between bg-base-100 p-2 rounded">
+                                                <span className="text-sm truncate flex-1">{file.name}</span>
+                                                <button
+                                                    type="button"
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        handleRemoveFile(index);
+                                                    }}
+                                                    className="btn btn-xs btn-error ml-2"
+                                                    title="Remove file"
+                                                >
+                                                    <Icon icon="heroicons:x-mark" className="w-3 h-3" />
+                                                </button>
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <p className="text-xs text-gray-500">Click or drag to add more files (Max size: 1MB each)</p>
+                                </>
+                            ) : (
+                                <>
+                                    <p className="font-medium">Drop your files here or click to browse</p>
+                                    <p className="text-xs text-gray-500">Accepted formats: PDF, PNG, JPG (Max size: 1MB each, multiple files allowed)</p>
+                                </>
+                            )}
+                        </div>
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        className="mt-2 bg-base-300/30 rounded-lg p-4 text-center"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                    >
+                        <p className="text-sm text-base-content/70">Room booking upload not required when no booking is needed.</p>
+                    </motion.div>
+                )}
+
+                {/* Preview File Button - Outside the upload area */}
+                {formData.will_or_have_room_booking && roomBookingFiles.length > 0 && (
+                    <div className="mt-3 flex justify-end">
+                        <button
+                            type="button"
+                            className="btn btn-primary btn-sm"
+                            onClick={toggleFilePreview}
+                        >
+                            {showFilePreview ? 'Hide Preview' : `Preview Files (${roomBookingFiles.length})`}
+                        </button>
+                    </div>
+                )}
+
+                {/* File Preview Component */}
+                {showFilePreview && roomBookingFiles.length > 0 && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -20 }}
+                        className="mt-4 p-4 bg-base-200 rounded-lg"
+                    >
+                        <div className="flex justify-between items-center mb-4">
+                            <h3 className="font-medium">File Preview ({roomBookingFiles.length} files)</h3>
+                            <button
+                                type="button"
+                                className="btn btn-sm btn-circle"
+                                onClick={toggleFilePreview}
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            {roomBookingFiles.map((file, index) => {
+                                const url = URL.createObjectURL(file);
+                                return (
+                                    <div key={index} className="border rounded-lg p-2">
+                                        <p className="text-sm font-medium mb-2 truncate">{file.name}</p>
+                                        <FilePreview url={url} filename={file.name} />
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </motion.div>
+                )}
             </motion.div>
 
             {/* Food/Drinks */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Will you be serving food/drinks at your event?</span>
+                    <span className="label-text font-medium text-lg">Food & Drinks</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                <p className="text-sm text-gray-500 mb-3">Will you be serving food or drinks at your event?</p>
+
+                <div className="flex gap-6 mt-2">
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.food_drinks_being_served === true
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -110,9 +477,17 @@ const TAPFormSection: React.FC<TAPFormSectionProps> = ({ formData, onDataChange
                             onChange={() => onDataChange({ food_drinks_being_served: true })}
                             required
                         />
-                        <span>Yes</span>
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                        <span className="font-medium">Yes, we'll have food/drinks</span>
+                    </motion.label>
+
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.food_drinks_being_served === false
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -120,31 +495,93 @@ const TAPFormSection: React.FC<TAPFormSectionProps> = ({ formData, onDataChange
                             onChange={() => onDataChange({ food_drinks_being_served: false })}
                             required
                         />
-                        <span>No</span>
-                    </label>
+                        <span className="font-medium">No, no food/drinks</span>
+                    </motion.label>
                 </div>
             </motion.div>
 
-            {/* AS Funding Notice - only show if food/drinks are being served */}
+            {/* AS Funding Question - only show if food/drinks are being served */}
             {formData.food_drinks_being_served && (
                 <motion.div
-                    initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: 'auto' }}
-                    exit={{ opacity: 0, height: 0 }}
-                    className="alert alert-info"
+                    variants={itemVariants}
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    whileHover={{ y: -2 }}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3 }}
                 >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-5 w-5 stroke-current">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                    </svg>
-                    <div>
-                        <h3 className="font-bold">Food and Drinks Information</h3>
-                        <div className="text-xs">
-                            If you're serving food or drinks, you'll be asked about AS funding in the next step. Please be prepared with vendor information and invoice details.
-                        </div>
+                    <label className="label">
+                        <span className="label-text font-medium text-lg">AS Funding Request</span>
+                        <span className="label-text-alt text-error">*</span>
+                    </label>
+                    <p className="text-sm text-gray-500 mb-3">Do you need funding from AS?</p>
+
+                    <div className="flex gap-6 mt-2">
+                        <motion.label
+                            className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.needs_as_funding === true
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'bg-base-100 hover:bg-primary/10'
+                                }`}
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                        >
+                            <input
+                                type="radio"
+                                className="radio radio-primary"
+                                checked={formData.needs_as_funding === true}
+                                onChange={() => onDataChange({
+                                    needs_as_funding: true,
+                                    as_funding_required: true
+                                })}
+                                required
+                            />
+                            <span className="font-medium">Yes, we need AS funding</span>
+                        </motion.label>
+
+                        <motion.label
+                            className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.needs_as_funding === false
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'bg-base-100 hover:bg-primary/10'
+                                }`}
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                        >
+                            <input
+                                type="radio"
+                                className="radio radio-primary"
+                                checked={formData.needs_as_funding === false}
+                                onChange={() => onDataChange({
+                                    needs_as_funding: false,
+                                    as_funding_required: false
+                                })}
+                                required
+                            />
+                            <span className="font-medium">No, we don't need funding</span>
+                        </motion.label>
                     </div>
                 </motion.div>
             )}
-        </div>
+
+            {/* Single information alert container that changes content based on selection */}
+            {formData.food_drinks_being_served && (
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3, ease: "easeInOut" }}
+                    className="mb-4"
+                >
+                    <CustomAlert
+                        type="info"
+                        title={formData.needs_as_funding ? "AS Funding Information" : "Food and Drinks Information"}
+                        message={formData.needs_as_funding
+                            ? "In the next step, you'll be asked to provide vendor information and invoice details for your AS funding request."
+                            : "Please make sure to follow all campus policies regarding food and drinks at your event."}
+                        className="mb-4"
+                        icon={formData.needs_as_funding ? "heroicons:currency-dollar" : "heroicons:cake"}
+                    />
+                </motion.div>
+            )}
+        </motion.div>
     );
 };
 

src/components/dashboard/Officer_EventRequestForm/UserEventRequests.tsx

@@ -4,6 +4,8 @@ import { Authentication } from '../../../scripts/pocketbase/Authentication';
 import { DataSyncService } from '../../../scripts/database/DataSyncService';
 import { Collections } from '../../../schemas/pocketbase/schema';
 import type { EventRequest as SchemaEventRequest } from '../../../schemas/pocketbase';
+import { EventRequestFormPreview } from './EventRequestFormPreview';
+import type { EventRequestFormData } from './EventRequestForm';
 
 // Declare the global window interface to include our custom function
 declare global {
@@ -17,10 +19,221 @@ export interface EventRequest extends SchemaEventRequest {
     invoice_data?: any;
 }
 
+// Helper function to convert EventRequest to EventRequestFormData
+const convertToFormData = (request: EventRequest): EventRequestFormData => {
+    try {
+        // Parse itemized_invoice if it's a string
+        let invoiceData = {};
+        try {
+            if (request.itemized_invoice) {
+                if (typeof request.itemized_invoice === 'string') {
+                    const parsedInvoice = JSON.parse(request.itemized_invoice) as Record<string, any>;
+
+                    // Get or calculate subtotal from items
+                    const subtotal = parsedInvoice.subtotal ??
+                        (Array.isArray(parsedInvoice.items) ?
+                            parsedInvoice.items.reduce((sum: number, item: any) => {
+                                const amount = typeof item.amount === 'number' ? item.amount : 0;
+                                return sum + amount;
+                            }, 0) : 0);
+
+                    // Normalize tax and tip amounts
+                    const taxAmount = Number(parsedInvoice.taxAmount ?? parsedInvoice.tax ?? 0);
+                    const tipAmount = Number(parsedInvoice.tipAmount ?? parsedInvoice.tip ?? 0);
+
+                    // Calculate or get total
+                    const total = parsedInvoice.total ?? (subtotal + taxAmount + tipAmount);
+
+                    invoiceData = {
+                        ...parsedInvoice,
+                        subtotal,
+                        taxAmount,
+                        tipAmount,
+                        total
+                    };
+                } else {
+                    const parsedInvoice = request.itemized_invoice as Record<string, any>;
+
+                    // Get or calculate subtotal from items
+                    const subtotal = parsedInvoice.subtotal ??
+                        (Array.isArray(parsedInvoice.items) ?
+                            parsedInvoice.items.reduce((sum: number, item: any) => {
+                                const amount = typeof item.amount === 'number' ? item.amount : 0;
+                                return sum + amount;
+                            }, 0) : 0);
+
+                    // Normalize tax and tip amounts
+                    const taxAmount = Number(parsedInvoice.taxAmount ?? parsedInvoice.tax ?? 0);
+                    const tipAmount = Number(parsedInvoice.tipAmount ?? parsedInvoice.tip ?? 0);
+
+                    // Calculate or get total
+                    const total = parsedInvoice.total ?? (subtotal + taxAmount + tipAmount);
+
+                    invoiceData = {
+                        ...parsedInvoice,
+                        subtotal,
+                        taxAmount,
+                        tipAmount,
+                        total
+                    };
+                }
+            } else if (request.invoice_data) {
+                const parsedInvoice = request.invoice_data as Record<string, any>;
+
+                // Get or calculate subtotal from items
+                const subtotal = parsedInvoice.subtotal ??
+                    (Array.isArray(parsedInvoice.items) ?
+                        parsedInvoice.items.reduce((sum: number, item: any) => {
+                            const amount = typeof item.amount === 'number' ? item.amount : 0;
+                            return sum + amount;
+                        }, 0) : 0);
+
+                // Normalize tax and tip amounts
+                const taxAmount = Number(parsedInvoice.taxAmount ?? parsedInvoice.tax ?? 0);
+                const tipAmount = Number(parsedInvoice.tipAmount ?? parsedInvoice.tip ?? 0);
+
+                // Calculate or get total
+                const total = parsedInvoice.total ?? (subtotal + taxAmount + tipAmount);
+
+                invoiceData = {
+                    ...parsedInvoice,
+                    subtotal,
+                    taxAmount,
+                    tipAmount,
+                    total
+                };
+            }
+        } catch (e) {
+            console.error('Error parsing invoice data:', e);
+        }
+
+        // Cast to unknown first, then to EventRequestFormData to avoid type checking
+        return {
+            name: request.name,
+            location: request.location,
+            start_date_time: request.start_date_time,
+            end_date_time: request.end_date_time,
+            event_description: request.event_description || '',
+            flyers_needed: request.flyers_needed || false,
+            photography_needed: request.photography_needed || false,
+            flyer_type: request.flyer_type || [],
+            other_flyer_type: request.other_flyer_type || '',
+            flyer_advertising_start_date: request.flyer_advertising_start_date || '',
+            advertising_format: request.advertising_format || '',
+            required_logos: request.required_logos || [],
+            other_logos: [] as File[], // EventRequest doesn't have this as files
+            flyer_additional_requests: request.flyer_additional_requests || '',
+            will_or_have_room_booking: request.will_or_have_room_booking || false,
+            room_booking: null,
+            room_booking_confirmation: [] as File[], // EventRequest doesn't have this as files
+            expected_attendance: request.expected_attendance || 0,
+            food_drinks_being_served: request.food_drinks_being_served || false,
+            needs_as_funding: request.as_funding_required || false,
+            as_funding_required: request.as_funding_required || false,
+            invoice: null,
+            invoice_files: [],
+            invoiceData: invoiceData,
+            needs_graphics: request.flyers_needed || false,
+            status: request.status || '',
+            created_by: request.requested_user || '',
+            id: request.id || '',
+            created: request.created || '',
+            updated: request.updated || '',
+            itemized_invoice: request.itemized_invoice || '',
+        } as unknown as EventRequestFormData;
+    } catch (error) {
+        console.error("Error converting EventRequest to EventRequestFormData:", error);
+
+        // Return a minimal valid object to prevent rendering errors
+        return {
+            name: request?.name || "Unknown Event",
+            location: request?.location || "",
+            start_date_time: request?.start_date_time || new Date().toISOString(),
+            end_date_time: request?.end_date_time || new Date().toISOString(),
+            event_description: request?.event_description || "",
+            flyers_needed: false,
+            photography_needed: false,
+            flyer_type: [],
+            other_flyer_type: "",
+            flyer_advertising_start_date: "",
+            advertising_format: "",
+            required_logos: [],
+            other_logos: [] as File[],
+            flyer_additional_requests: "",
+            will_or_have_room_booking: false,
+            room_booking: null,
+            room_booking_confirmation: [] as File[],
+            expected_attendance: 0,
+            food_drinks_being_served: false,
+            needs_as_funding: false,
+            as_funding_required: false,
+            invoice: null,
+            invoice_files: [],
+            invoiceData: {},
+            needs_graphics: false,
+            status: request?.status || "",
+            created_by: "",
+            id: request?.id || "",
+            created: request?.created || "",
+            updated: request?.updated || "",
+            itemized_invoice: ""
+        } as unknown as EventRequestFormData;
+    }
+};
+
 interface UserEventRequestsProps {
     eventRequests: EventRequest[];
 }
 
+// Create a portal component for the modal to ensure it's rendered at the root level
+const EventRequestModal: React.FC<{ isOpen: boolean, onClose: () => void, children: React.ReactNode }> = ({
+    isOpen,
+    onClose,
+    children
+}) => {
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[99999]"
+            style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                width: '100vw',
+                height: '100vh',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '1rem',
+                margin: 0,
+                overflow: 'auto'
+            }}
+            onClick={onClose}
+        >
+            <div
+                className="bg-base-100 rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"
+                style={{
+                    position: 'relative',
+                    margin: 'auto',
+                    zIndex: 100000
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};
+
+// Add a utility function to truncate text with an ellipsis
+const truncateText = (text: string, maxLength: number) => {
+    if (!text) return '';
+    return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+};
+
 const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: initialEventRequests }) => {
     const [eventRequests, setEventRequests] = useState<EventRequest[]>(initialEventRequests);
     const [selectedRequest, setSelectedRequest] = useState<EventRequest | null>(null);
@@ -45,12 +258,14 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
                 return;
             }
 
-            // Use DataSyncService to get data from IndexedDB with forced sync
+            // Use DataSyncService to get data from IndexedDB with forced sync and deletion detection
             const updatedRequests = await dataSync.getData<EventRequest>(
                 Collections.EVENT_REQUESTS,
                 true, // Force sync
                 `requested_user="${userId}"`,
-                '-created'
+                '-created',
+                {}, // expand
+                true // Enable deletion detection for user-specific requests
             );
 
             setEventRequests(updatedRequests);
@@ -69,7 +284,7 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
     // Listen for tab visibility changes and refresh data when tab becomes visible
     useEffect(() => {
         const handleTabVisible = () => {
-            console.log("Tab became visible, refreshing event requests...");
+            // console.log("Tab became visible, refreshing event requests...");
             refreshEventRequests();
         };
 
@@ -88,10 +303,9 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
         try {
             const date = new Date(dateString);
             return date.toLocaleDateString('en-US', {
-                year: 'numeric',
                 month: 'short',
                 day: 'numeric',
-                hour: '2-digit',
+                hour: 'numeric',
                 minute: '2-digit'
             });
         } catch (e) {
@@ -191,8 +405,8 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
 
     return (
         <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
             className="space-y-6"
         >
             <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
@@ -239,56 +453,86 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
             </div>
 
             {viewMode === 'table' ? (
-                <div className="overflow-x-auto rounded-xl shadow-sm">
-                    <table className="table table-zebra w-full">
-                        <thead className="bg-base-300/50">
+                <div className="overflow-x-auto overflow-y-auto rounded-xl shadow-sm max-h-[70vh]">
+                    <table className="table table-zebra w-full text-xs">
+                        <thead className="bg-base-300/50 sticky top-0 z-10">
                             <tr>
-                                <th>Event Name</th>
-                                <th>Date</th>
-                                <th>Location</th>
-                                <th>PR Materials</th>
-                                <th>AS Funding</th>
-                                <th>Submitted</th>
-                                <th>Status</th>
-                                <th>Actions</th>
+                                <th className="w-[17%]">Event Name</th>
+                                <th className="w-[16%]">Date</th>
+                                <th className="w-[14%]">Location</th>
+                                <th className="w-[7%] text-center">PR</th>
+                                <th className="w-[7%] text-center">AS</th>
+                                <th className="w-[15%]">Submitted</th>
+                                <th className="w-[14%] text-center">Status</th>
+                                <th className="w-[10%] px-0 text-center">View</th>
                             </tr>
                         </thead>
                         <tbody>
                             {eventRequests.map((request) => (
                                 <tr key={request.id} className={`hover border-l-4 ${getCardBorderClass(request.status)}`}>
-                                    <td className="font-medium">{request.name}</td>
-                                    <td>{formatDate(request.start_date_time)}</td>
-                                    <td>{request.location}</td>
+                                    <td className="font-medium">
+                                        <div className="tooltip" data-tip={request.name}>
+                                            <span className="block truncate max-w-[125px]">
+                                                {truncateText(request.name, 18)}
+                                            </span>
+                                        </div>
+                                    </td>
                                     <td>
+                                        <div className="tooltip" data-tip={formatDate(request.start_date_time)}>
+                                            <span className="block truncate max-w-[110px]">
+                                                {formatDate(request.start_date_time)}
+                                            </span>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div className="tooltip" data-tip={request.location}>
+                                            <span className="block truncate max-w-[90px]">
+                                                {truncateText(request.location, 14)}
+                                            </span>
+                                        </div>
+                                    </td>
+                                    <td className="text-center">
                                         {request.flyers_needed ? (
                                             <span className="badge badge-success badge-sm">Yes</span>
                                         ) : (
                                             <span className="badge badge-ghost badge-sm">No</span>
                                         )}
                                     </td>
-                                    <td>
+                                    <td className="text-center">
                                         {request.as_funding_required ? (
                                             <span className="badge badge-success badge-sm">Yes</span>
                                         ) : (
                                             <span className="badge badge-ghost badge-sm">No</span>
                                         )}
                                     </td>
-                                    <td>{formatDate(request.created)}</td>
                                     <td>
+                                        <div className="tooltip" data-tip={formatDate(request.created)}>
+                                            <span className="block truncate max-w-[100px]">
+                                                {formatDate(request.created)}
+                                            </span>
+                                        </div>
+                                    </td>
+                                    <td className="text-center">
                                         <span className={`badge ${getStatusBadge(request.status)} badge-sm`}>
                                             {request.status || 'Submitted'}
                                         </span>
                                     </td>
-                                    <td>
-                                        <button
-                                            className="btn btn-ghost btn-sm rounded-full"
-                                            onClick={() => openDetailModal(request)}
-                                        >
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                                            </svg>
-                                        </button>
+                                    <td className="text-center px-0">
+                                        <div className="flex justify-center">
+                                            <button
+                                                className="btn btn-xs btn-ghost btn-circle tooltip flex items-center justify-center p-0"
+                                                data-tip="View Details"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    openDetailModal(request);
+                                                }}
+                                            >
+                                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                                                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                                                </svg>
+                                            </button>
+                                        </div>
                                     </td>
                                 </tr>
                             ))}
@@ -307,24 +551,30 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
                         >
                             <div className="card-body p-5">
                                 <div className="flex justify-between items-start">
-                                    <h3 className="card-title text-base">{request.name}</h3>
+                                    <h3 className="card-title text-base tooltip" data-tip={request.name}>
+                                        <span className="block truncate max-w-[180px]">
+                                            {truncateText(request.name, 25)}
+                                        </span>
+                                    </h3>
                                     <span className={`badge ${getStatusBadge(request.status)}`}>
                                         {request.status || 'Pending'}
                                     </span>
                                 </div>
                                 <div className="space-y-2 mt-2 text-sm">
                                     <div className="flex items-start gap-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                         </svg>
-                                        <span>{formatDate(request.start_date_time)}</span>
+                                        <span className="truncate">{formatDate(request.start_date_time)}</span>
                                     </div>
                                     <div className="flex items-start gap-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                         </svg>
-                                        <span>{request.location}</span>
+                                        <span className="truncate tooltip" data-tip={request.location}>
+                                            {truncateText(request.location, 25)}
+                                        </span>
                                     </div>
                                 </div>
                                 <div className="flex flex-wrap gap-2 mt-3">
@@ -340,10 +590,17 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
                                 </div>
                                 <div className="card-actions justify-end mt-4">
                                     <button
-                                        className="btn btn-primary btn-sm"
-                                        onClick={() => openDetailModal(request)}
+                                        className="btn btn-sm btn-circle btn-ghost text-primary tooltip flex items-center justify-center"
+                                        data-tip="View Details"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            openDetailModal(request);
+                                        }}
                                     >
-                                        View Details
+                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                                        </svg>
                                     </button>
                                 </div>
                             </div>
@@ -381,382 +638,45 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
                 </ul>
             </div>
 
-            {/* Event Request Detail Modal */}
-            <AnimatePresence>
-                {isModalOpen && selectedRequest && (
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm"
-                        onClick={closeModal}
-                    >
-                        <motion.div
-                            initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                            animate={{ opacity: 1, scale: 1, y: 0 }}
-                            exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                            transition={{ type: "spring", damping: 25, stiffness: 300 }}
-                            className="bg-base-100 rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"
-                            onClick={(e) => e.stopPropagation()}
-                        >
-                            <div className="sticky top-0 z-10 bg-base-100 px-6 py-4 border-b border-base-300 flex justify-between items-center">
-                                <div className="flex items-center gap-2">
-                                    <h2 className="text-xl font-bold">{selectedRequest.name}</h2>
-                                    <span className={`badge ${getStatusBadge(selectedRequest.status)}`}>
-                                        {selectedRequest.status || 'Pending'}
-                                    </span>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <button
-                                        className="btn btn-sm btn-primary"
-                                        onClick={(e) => {
-                                            e.stopPropagation();
-                                            console.log('Full Preview button clicked', selectedRequest);
-                                            try {
-                                                // Direct call to the global function
-                                                if (typeof window.showEventRequestFormPreview === 'function') {
-                                                    window.showEventRequestFormPreview(selectedRequest);
-                                                } else {
-                                                    console.error('showEventRequestFormPreview is not a function', window.showEventRequestFormPreview);
-                                                    // Fallback to event dispatch if function is not available
-                                                    const event = new CustomEvent("showEventRequestPreviewModal", {
-                                                        detail: { formData: selectedRequest }
-                                                    });
-                                                    document.dispatchEvent(event);
-                                                    console.log('Fallback: showEventRequestPreviewModal event dispatched');
-                                                }
-                                            } catch (error) {
-                                                console.error('Error showing full preview:', error);
-                                            }
-                                        }}
-                                    >
-                                        Full Preview
-                                    </button>
-                                    <button
-                                        className="btn btn-sm btn-circle btn-ghost"
-                                        onClick={closeModal}
-                                    >
-                                        ✕
-                                    </button>
-                                </div>
+            {/* Use the new portal component for the modal */}
+            {isModalOpen && selectedRequest && (
+                <EventRequestModal
+                    isOpen={isModalOpen}
+                    onClose={closeModal}
+                >
+                    <div className="sticky top-0 z-10 bg-base-100 px-6 py-4 border-b border-base-300 flex justify-between items-center">
+                        <div className="flex items-center gap-2">
+                            <h2 className="text-xl font-bold text-base-content">{selectedRequest.name}</h2>
+                            <span className={`badge ${getStatusBadge(selectedRequest.status)}`}>
+                                {selectedRequest.status || 'Pending'}
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <button
+                                className="btn btn-sm btn-circle"
+                                onClick={closeModal}
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="p-6">
+                        {selectedRequest ? (
+                            <EventRequestFormPreview
+                                formData={convertToFormData(selectedRequest)}
+                                isModal={true}
+                            />
+                        ) : (
+                            <div className="flex items-center justify-center h-64">
+                                <div className="loading loading-spinner loading-lg text-primary"></div>
                             </div>
-
-                            <div className="p-6">
-                                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-                                    <div>
-                                        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-primary">
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                            </svg>
-                                            Event Details
-                                        </h3>
-                                        <div className="space-y-4 bg-base-200/50 p-4 rounded-lg">
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Event Name</p>
-                                                <p className="font-medium">{selectedRequest.name}</p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Location</p>
-                                                <p className="font-medium">{selectedRequest.location}</p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Start Date & Time</p>
-                                                <p className="font-medium">{formatDate(selectedRequest.start_date_time)}</p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">End Date & Time</p>
-                                                <p className="font-medium">{formatDate(selectedRequest.end_date_time)}</p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Room Booking</p>
-                                                <p className="font-medium">{selectedRequest.will_or_have_room_booking ? 'Yes' : 'No'}</p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Expected Attendance</p>
-                                                <p className="font-medium">{selectedRequest.expected_attendance || 'Not specified'}</p>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div>
-                                        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-primary">
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                            </svg>
-                                            Event Description
-                                        </h3>
-                                        <div className="bg-base-200/50 p-4 rounded-lg h-full">
-                                            <p className="whitespace-pre-line">{selectedRequest.event_description}</p>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                {selectedRequest.flyers_needed && (
-                                    <div className="mb-8">
-                                        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-primary">
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                            </svg>
-                                            PR Materials
-                                        </h3>
-                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-base-200/50 p-4 rounded-lg">
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Flyer Types</p>
-                                                <p className="font-medium">
-                                                    {selectedRequest.flyer_type?.join(', ') || 'Not specified'}
-                                                    {selectedRequest.other_flyer_type && ` (${selectedRequest.other_flyer_type})`}
-                                                </p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Advertising Start Date</p>
-                                                <p className="font-medium">
-                                                    {selectedRequest.flyer_advertising_start_date
-                                                        ? formatDate(selectedRequest.flyer_advertising_start_date)
-                                                        : 'Not specified'}
-                                                </p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Required Logos</p>
-                                                <p className="font-medium">
-                                                    {selectedRequest.required_logos?.join(', ') || 'None'}
-                                                </p>
-                                            </div>
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Advertising Format</p>
-                                                <p className="font-medium">{selectedRequest.advertising_format || 'Not specified'}</p>
-                                            </div>
-                                            <div className="md:col-span-2">
-                                                <p className="text-sm text-base-content/60">Additional Requests</p>
-                                                <p className="font-medium whitespace-pre-line">
-                                                    {selectedRequest.flyer_additional_requests || 'None'}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-
-                                {selectedRequest.as_funding_required && (
-                                    <div className="mb-8">
-                                        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-primary">
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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" />
-                                            </svg>
-                                            AS Funding Details
-                                        </h3>
-                                        <div className="space-y-4 bg-base-200/50 p-4 rounded-lg">
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Food/Drinks Being Served</p>
-                                                <p className="font-medium">
-                                                    {selectedRequest.food_drinks_being_served ? 'Yes' : 'No'}
-                                                </p>
-                                            </div>
-                                            {selectedRequest.invoice_data && (
-                                                <div>
-                                                    <p className="text-sm text-base-content/60">Vendor</p>
-                                                    <p className="font-medium">
-                                                        {selectedRequest.invoice_data.vendor || 'Not specified'}
-                                                    </p>
-                                                </div>
-                                            )}
-                                            <div>
-                                                <p className="text-sm text-base-content/60">Itemized Invoice</p>
-                                                {(() => {
-                                                    try {
-                                                        let invoiceData: any = null;
-
-                                                        // Parse the invoice data if it's a string, or use it directly if it's an object
-                                                        if (typeof selectedRequest.itemized_invoice === 'string') {
-                                                            try {
-                                                                invoiceData = JSON.parse(selectedRequest.itemized_invoice);
-                                                            } catch (e) {
-                                                                console.error('Failed to parse invoice JSON:', e);
-                                                                return (
-                                                                    <pre className="bg-base-300 p-3 rounded-lg text-xs overflow-x-auto mt-2">
-                                                                        {selectedRequest.itemized_invoice || 'Not provided'}
-                                                                    </pre>
-                                                                );
-                                                            }
-                                                        } else if (typeof selectedRequest.itemized_invoice === 'object') {
-                                                            invoiceData = selectedRequest.itemized_invoice;
-                                                        }
-
-                                                        // If we have valid invoice data with items
-                                                        if (invoiceData && Array.isArray(invoiceData.items) && invoiceData.items.length > 0) {
-                                                            // Calculate total from items if not provided or if NaN
-                                                            let calculatedTotal = 0;
-
-                                                            // Try to use the provided total first
-                                                            if (invoiceData.total !== undefined) {
-                                                                const parsedTotal = typeof invoiceData.total === 'string'
-                                                                    ? parseFloat(invoiceData.total)
-                                                                    : invoiceData.total;
-
-                                                                if (!isNaN(parsedTotal)) {
-                                                                    calculatedTotal = parsedTotal;
-                                                                }
-                                                            }
-
-                                                            // If total is NaN or not provided, calculate from items
-                                                            if (calculatedTotal === 0 || isNaN(calculatedTotal)) {
-                                                                calculatedTotal = invoiceData.items.reduce((sum: number, item: any) => {
-                                                                    const quantity = typeof item.quantity === 'string'
-                                                                        ? parseFloat(item.quantity)
-                                                                        : (item.quantity || 1);
-
-                                                                    const unitPrice = typeof item.unit_price === 'string'
-                                                                        ? parseFloat(item.unit_price)
-                                                                        : (item.unit_price || 0);
-
-                                                                    const itemTotal = !isNaN(quantity) && !isNaN(unitPrice)
-                                                                        ? quantity * unitPrice
-                                                                        : 0;
-
-                                                                    return sum + itemTotal;
-                                                                }, 0);
-
-                                                                // Add tax and tip if available
-                                                                if (invoiceData.tax && !isNaN(parseFloat(invoiceData.tax))) {
-                                                                    calculatedTotal += parseFloat(invoiceData.tax);
-                                                                }
-
-                                                                if (invoiceData.tip && !isNaN(parseFloat(invoiceData.tip))) {
-                                                                    calculatedTotal += parseFloat(invoiceData.tip);
-                                                                }
-                                                            }
-
-                                                            return (
-                                                                <div className="bg-base-300 p-3 rounded-lg overflow-x-auto mt-2">
-                                                                    <table className="table w-full">
-                                                                        <thead>
-                                                                            <tr>
-                                                                                <th>Item</th>
-                                                                                <th className="text-right">Qty</th>
-                                                                                <th className="text-right">Price</th>
-                                                                                <th className="text-right">Total</th>
-                                                                            </tr>
-                                                                        </thead>
-                                                                        <tbody>
-                                                                            {invoiceData.items.map((item: any, index: number) => {
-                                                                                const quantity = typeof item.quantity === 'string'
-                                                                                    ? parseFloat(item.quantity)
-                                                                                    : (item.quantity || 1);
-
-                                                                                const unitPrice = typeof item.unit_price === 'string'
-                                                                                    ? parseFloat(item.unit_price)
-                                                                                    : (item.unit_price || 0);
-
-                                                                                const itemTotal = !isNaN(quantity) && !isNaN(unitPrice)
-                                                                                    ? quantity * unitPrice
-                                                                                    : 0;
-
-                                                                                return (
-                                                                                    <tr key={index}>
-                                                                                        <td>{item.item || 'Unnamed item'}</td>
-                                                                                        <td className="text-right">{!isNaN(quantity) ? quantity : 1}</td>
-                                                                                        <td className="text-right">${!isNaN(unitPrice) ? unitPrice.toFixed(2) : '0.00'}</td>
-                                                                                        <td className="text-right">${!isNaN(itemTotal) ? itemTotal.toFixed(2) : '0.00'}</td>
-                                                                                    </tr>
-                                                                                );
-                                                                            })}
-                                                                        </tbody>
-                                                                        <tfoot>
-                                                                            {invoiceData.tax !== undefined && (
-                                                                                <tr>
-                                                                                    <td colSpan={3} className="text-right font-medium">Tax:</td>
-                                                                                    <td className="text-right">
-                                                                                        ${typeof invoiceData.tax === 'string'
-                                                                                            ? (parseFloat(invoiceData.tax) || 0).toFixed(2)
-                                                                                            : (invoiceData.tax || 0).toFixed(2)}
-                                                                                    </td>
-                                                                                </tr>
-                                                                            )}
-                                                                            {invoiceData.tip !== undefined && (
-                                                                                <tr>
-                                                                                    <td colSpan={3} className="text-right font-medium">Tip:</td>
-                                                                                    <td className="text-right">
-                                                                                        ${typeof invoiceData.tip === 'string'
-                                                                                            ? (parseFloat(invoiceData.tip) || 0).toFixed(2)
-                                                                                            : (invoiceData.tip || 0).toFixed(2)}
-                                                                                    </td>
-                                                                                </tr>
-                                                                            )}
-                                                                            <tr>
-                                                                                <td colSpan={3} className="text-right font-bold">Total:</td>
-                                                                                <td className="text-right font-bold">
-                                                                                    ${!isNaN(calculatedTotal) ? calculatedTotal.toFixed(2) : '0.00'}
-                                                                                </td>
-                                                                            </tr>
-                                                                        </tfoot>
-                                                                    </table>
-                                                                    {invoiceData.vendor && (
-                                                                        <div className="mt-3 text-sm">
-                                                                            <span className="font-medium">Vendor:</span> {invoiceData.vendor}
-                                                                        </div>
-                                                                    )}
-                                                                </div>
-                                                            );
-                                                        } else if (invoiceData && typeof invoiceData.total !== 'undefined') {
-                                                            // If we have a total but no items, show a simplified view
-                                                            const total = typeof invoiceData.total === 'string'
-                                                                ? parseFloat(invoiceData.total)
-                                                                : invoiceData.total;
-
-                                                            return (
-                                                                <div className="bg-base-300 p-3 rounded-lg mt-2">
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="font-medium">Total Amount:</span>
-                                                                        <span className="font-bold">${!isNaN(total) ? total.toFixed(2) : '0.00'}</span>
-                                                                    </div>
-                                                                    {invoiceData.vendor && (
-                                                                        <div className="mt-2">
-                                                                            <span className="font-medium">Vendor:</span> {invoiceData.vendor}
-                                                                        </div>
-                                                                    )}
-                                                                </div>
-                                                            );
-                                                        } else {
-                                                            // Fallback to display the JSON in a readable format
-                                                            return (
-                                                                <pre className="bg-base-300 p-3 rounded-lg text-xs overflow-x-auto mt-2">
-                                                                    {typeof selectedRequest.itemized_invoice === 'object'
-                                                                        ? JSON.stringify(selectedRequest.itemized_invoice, null, 2)
-                                                                        : (selectedRequest.itemized_invoice || 'Not provided')}
-                                                                </pre>
-                                                            );
-                                                        }
-                                                    } catch (error) {
-                                                        console.error('Error rendering invoice:', error);
-                                                        return (
-                                                            <pre className="bg-base-300 p-3 rounded-lg text-xs overflow-x-auto mt-2">
-                                                                Error displaying invoice. Please check the console for details.
-                                                            </pre>
-                                                        );
-                                                    }
-                                                })()}
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-
-                                <div className="mt-8 pt-4 border-t border-base-300">
-                                    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-                                        <div>
-                                            <p className="text-sm text-base-content/60">Submission Date</p>
-                                            <p className="font-medium">{formatDate(selectedRequest.created)}</p>
-                                        </div>
-                                        <div className="flex items-center gap-2">
-                                            <p className="text-sm text-base-content/60">Status:</p>
-                                            <span className={`badge ${getStatusBadge(selectedRequest.status)} badge-lg`}>
-                                                {selectedRequest.status || 'Pending'}
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </motion.div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+                        )}
+                    </div>
+                </EventRequestModal>
+            )}
         </motion.div>
     );
 };

src/components/dashboard/Officer_EventRequestManagement.astro

@@ -3,9 +3,11 @@ import { Authentication } from "../../scripts/pocketbase/Authentication";
 import { Get } from "../../scripts/pocketbase/Get";
 import { toast } from "react-hot-toast";
 import EventRequestManagementTable from "./Officer_EventRequestManagement/EventRequestManagementTable";
-import type { EventRequest } from "../../schemas/pocketbase";
+import EventRequestModal from "./Officer_EventRequestManagement/EventRequestModal";
+import type { EventRequest } from "../../schemas/pocketbase/schema";
 import { Collections } from "../../schemas/pocketbase/schema";
 import { Icon } from "astro-icon/components";
+import CustomAlert from "./universal/CustomAlert";
 
 // Get instances
 const get = Get.getInstance();
@@ -13,196 +15,315 @@ const auth = Authentication.getInstance();
 
 // Extended EventRequest interface with additional properties needed for this component
 interface ExtendedEventRequest extends EventRequest {
-  requested_user_expand?: {
-    name: string;
-    email: string;
-  };
-  expand?: {
-    requested_user?: {
-      id: string;
-      name: string;
-      email: string;
-      [key: string]: any;
+    requested_user_expand?: {
+        name: string;
+        email: string;
     };
-    [key: string]: any;
-  };
-  [key: string]: any; // For other optional properties
+    expand?: {
+        requested_user?: {
+            id: string;
+            name: string;
+            email: string;
+            emailVisibility?: boolean; // Add this field to the interface
+            [key: string]: any;
+        };
+        [key: string]: any;
+    };
+    [key: string]: any; // For other optional properties
 }
 
+// Animation delay constants to ensure consistency with React components
+const ANIMATION_DELAYS = {
+    heading: "0.1s",
+    info: "0.2s",
+    content: "0.3s",
+};
+
 // Initialize variables for all event requests
 let allEventRequests: ExtendedEventRequest[] = [];
 let error = null;
 
 try {
-  // Don't check authentication here - let the client component handle it
-  // The server-side check is causing issues when the token is valid client-side but not server-side
+    // Don't check authentication here - let the client component handle it
+    // The server-side check is causing issues when the token is valid client-side but not server-side
 
-  console.log("Fetching event requests in Astro component...");
-  // Expand the requested_user field to get user details
-  allEventRequests = await get
-    .getAll<ExtendedEventRequest>(Collections.EVENT_REQUESTS, "", "-created", {
-      expand: ["requested_user"],
-    })
-    .catch((err) => {
-      console.error("Error in get.getAll:", err);
-      // Return empty array instead of throwing
-      return [];
+    allEventRequests = await get
+        .getAll<ExtendedEventRequest>(
+            Collections.EVENT_REQUESTS,
+            "",
+            "-created",
+            {
+                expand: "requested_user",
+            }
+        )
+        .catch((err) => {
+            console.error("Error in get.getAll:", err);
+            // Return empty array instead of throwing
+            return [];
+        });
+
+    // Process the event requests to add the requested_user_expand property
+    allEventRequests = allEventRequests.map((request) => {
+        const requestWithExpand = { ...request };
+
+        // Add the requested_user_expand property if the expand data is available
+        if (
+            request.expand?.requested_user &&
+            request.expand.requested_user.name
+        ) {
+            // Always include email regardless of emailVisibility setting
+            requestWithExpand.requested_user_expand = {
+                name: request.expand.requested_user.name,
+                email:
+                    request.expand.requested_user.email ||
+                    "(No email available)",
+            };
+
+            // Force emailVisibility to true in the expand data
+            if (requestWithExpand.expand?.requested_user) {
+                requestWithExpand.expand.requested_user.emailVisibility = true;
+            }
+        }
+
+        return requestWithExpand;
     });
-
-  console.log(
-    `Fetched ${allEventRequests.length} event requests in Astro component`,
-  );
-
-  // Process the event requests to add the requested_user_expand property
-  allEventRequests = allEventRequests.map((request) => {
-    const requestWithExpand = { ...request };
-
-    // Add the requested_user_expand property if the expand data is available
-    if (
-      request.expand &&
-      request.expand.requested_user &&
-      request.expand.requested_user.name &&
-      request.expand.requested_user.email
-    ) {
-      requestWithExpand.requested_user_expand = {
-        name: request.expand.requested_user.name,
-        email: request.expand.requested_user.email,
-      };
-    }
-
-    return requestWithExpand;
-  });
 } catch (err) {
-  console.error("Error fetching event requests:", err);
-  error = err;
+    console.error("Error fetching event requests:", err);
+    error = err;
 }
 ---
 
-<div class="w-full max-w-7xl mx-auto py-8 px-4">
-  <style>
-    .event-table-container {
-      min-height: 600px;
-      height: auto !important;
-      max-height: none !important;
-    }
-    .event-table-container table {
-      height: auto !important;
-    }
-    .event-table-container .overflow-x-auto {
-      max-height: none !important;
-    }
-  </style>
+<div class="w-full max-w-7xl mx-auto py-8 px-4 sm:px-6">
+    <style>
+        .event-table-container {
+            min-height: 600px;
+            height: auto !important;
+            max-height: none !important;
+        }
+        .event-table-container table {
+            height: auto !important;
+        }
+        .event-table-container .overflow-x-auto {
+            max-height: none !important;
+        }
 
-  <div class="mb-8">
-    <h1 class="text-3xl font-bold text-white mb-2">Event Request Management</h1>
-    <p class="text-gray-300 mb-4">
-      Review and manage event requests submitted by officers. Update status and
-      coordinate with the team.
-    </p>
-    <div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300">
-      <p class="font-medium mb-2">As an executive officer, you can:</p>
-      <ul class="list-disc list-inside space-y-1 ml-2">
-        <li>View all submitted event requests</li>
-        <li>Update the status of requests (Pending, Completed, Declined)</li>
-        <li>Filter and sort requests by various criteria</li>
-      </ul>
-    </div>
-  </div>
+        /* Modern table styles */
+        .modern-table thead th {
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+        }
 
-  {
-    error && (
-      <div class="alert alert-error mb-6">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 stroke-current shrink-0"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>{error}</span>
-      </div>
-    )
-  }
+        .modern-table tbody tr {
+            transition: all 0.2s ease;
+        }
 
-  {
-    !error && (
-      <div class="bg-base-200 rounded-lg shadow-xl min-h-[600px] event-table-container">
-        <div class="p-4 md:p-6 h-auto">
-          <EventRequestManagementTable
-            client:load
-            eventRequests={allEventRequests}
-          />
+        /* Badge styles */
+        .animated-badge {
+            opacity: 0;
+            animation: fadeIn 0.3s ease forwards;
+            animation-delay: calc(var(--badge-index) * 0.05s);
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(5px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Card styles */
+        .dashboard-card {
+            border-radius: 1rem;
+            transition:
+                transform 0.2s,
+                box-shadow 0.2s;
+        }
+
+        .dashboard-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Animation for card entrance */
+        .card-enter {
+            animation: cardEnter 0.5s ease forwards;
+            opacity: 0;
+        }
+
+        @keyframes cardEnter {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+
+    <div
+        class="mb-8 space-y-4 card-enter"
+        style={`animation-delay: ${ANIMATION_DELAYS.heading};`}
+    >
+        <div class="flex items-center gap-3">
+            <div class="rounded-full bg-primary/10 p-2">
+                <Icon name="mdi:calendar-clock" class="w-6 h-6 text-primary" />
+            </div>
+            <h1 class="text-3xl font-bold text-white">
+                Event Request Management
+            </h1>
         </div>
-      </div>
-    )
-  }
+
+        <p class="text-gray-300 text-lg max-w-3xl">
+            Review and manage event requests submitted by officers. Update
+            status and coordinate with the team.
+        </p>
+
+        <div
+            class="bg-gradient-to-br from-base-300/50 to-base-300/30 p-5 rounded-xl border border-base-300/50 shadow-inner text-sm text-gray-300 card-enter"
+            style={`animation-delay: ${ANIMATION_DELAYS.info};`}
+        >
+            <div class="flex items-start gap-3">
+                <Icon
+                    name="mdi:lightbulb-on"
+                    class="w-5 h-5 text-primary mt-1 flex-shrink-0"
+                />
+                <div>
+                    <p class="font-medium mb-2 text-white">
+                        As an executive officer, you can:
+                    </p>
+                    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-2 ml-1">
+                        <li class="flex items-center gap-2">
+                            <Icon
+                                name="mdi:check-circle"
+                                class="h-4 w-4 text-success"
+                            />
+                            <span>View all submitted event requests</span>
+                        </li>
+                        <li class="flex items-center gap-2">
+                            <Icon
+                                name="mdi:check-circle"
+                                class="h-4 w-4 text-success"
+                            />
+                            <span>Update request statuses</span>
+                        </li>
+                        <li class="flex items-center gap-2">
+                            <Icon
+                                name="mdi:check-circle"
+                                class="h-4 w-4 text-success"
+                            />
+                            <span>Filter requests by criteria</span>
+                        </li>
+                        <li class="flex items-center gap-2">
+                            <Icon
+                                name="mdi:check-circle"
+                                class="h-4 w-4 text-success"
+                            />
+                            <span>Sort requests by various fields</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {
+        error && (
+            <div
+                class="mb-6 card-enter"
+                style={`animation-delay: ${ANIMATION_DELAYS.content};`}
+            >
+                <CustomAlert
+                    client:load
+                    type="error"
+                    title="Error fetching event requests"
+                    message={error.toString()}
+                    icon="heroicons:exclamation-triangle"
+                />
+            </div>
+        )
+    }
+
+    <!-- Main page content including table and modal -->
+    <EventRequestModal client:load eventRequests={allEventRequests} />
 </div>
 
-<script>
-  // Import the DataSyncService for client-side use
-  import { DataSyncService } from "../../scripts/database/DataSyncService";
-  import { Collections } from "../../schemas/pocketbase/schema";
+<script type="module" define:vars={{ ANIMATION_DELAYS }}>
+    // Import the DataSyncService for client-side use
+    import { DataSyncService } from "../../scripts/database/DataSyncService";
+    import { Collections } from "../../schemas/pocketbase/schema";
 
-  // Remove the visibilitychange event listener that causes full page refresh
-  // Instead, we'll use a more efficient approach to refresh data only when needed
-  document.addEventListener("visibilitychange", () => {
-    if (document.visibilityState === "visible") {
-      // Instead of reloading the entire page, dispatch a custom event
-      // that components can listen for to refresh their data
-      document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
-    }
-  });
+    // Use a more efficient approach to refresh data only when needed
+    document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "visible") {
+            // Dispatch a custom event that components can listen for
+            document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
+        }
+    });
 
-  // Handle authentication errors
-  document.addEventListener("DOMContentLoaded", async () => {
-    // Initialize DataSyncService for client-side
-    const dataSync = DataSyncService.getInstance();
+    // Also force refresh when this tab is clicked in dashboard
+    document.addEventListener("DOMContentLoaded", () => {
+        // Find dashboard tab for event request management
+        const eventRequestManagementTab = document.querySelector(
+            '[data-section="eventRequestManagement"]'
+        );
+        if (eventRequestManagementTab) {
+            eventRequestManagementTab.addEventListener("click", () => {
+                // Dispatch custom event to refresh data when this tab is clicked
+                document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
+            });
+        }
+    });
 
-    // Prefetch data into IndexedDB
-    try {
-      await dataSync.syncCollection(
-        Collections.EVENT_REQUESTS,
-        "",
-        "-created",
-        { expand: "requested_user" },
-      );
-      console.log("Initial data sync complete");
-    } catch (err) {
-      console.error("Error during initial data sync:", err);
-    }
+    // Handle authentication errors and initial data loading
+    document.addEventListener("DOMContentLoaded", async () => {
+        // Initialize DataSyncService for client-side
+        const dataSync = DataSyncService.getInstance();
 
-    // Check for error message in the UI
-    const errorElement = document.querySelector(".alert-error span");
-    if (
-      errorElement &&
-      errorElement.textContent?.includes("Authentication error")
-    ) {
-      console.log(
-        "Authentication error detected in UI, redirecting to login...",
-      );
-      // Redirect to login page after a short delay
-      setTimeout(() => {
-        window.location.href = "/login";
-      }, 3000);
-      return;
-    }
+        // Add subtle entrance animations to cards
+        const cards = document.querySelectorAll(".card-enter");
+        cards.forEach((card, index) => {
+            // Use the same animation delay calculation logic consistently
+            const delay =
+                index === 0
+                    ? ANIMATION_DELAYS.heading
+                    : index === 1
+                      ? ANIMATION_DELAYS.info
+                      : ANIMATION_DELAYS.content;
 
-    // Also check if we have any event requests
-    const tableContainer = document.querySelector(".event-table-container");
-    if (tableContainer) {
-      console.log(
-        "Event table container found, component should load normally",
-      );
-    } else {
-      console.log(
-        "Event table container not found, might be an issue with rendering",
-      );
-    }
-  });
+            card.setAttribute("style", `animation-delay: ${delay}`);
+        });
+
+        // Prefetch data into IndexedDB
+        try {
+            await dataSync.syncCollection(
+                Collections.EVENT_REQUESTS,
+                "",
+                "-created",
+                "requested_user"
+            );
+        } catch (err) {
+            console.error("Error during initial data sync:", err);
+        }
+
+        // Check for error message in the UI
+        const errorElement = document.querySelector(".alert-error span");
+        if (
+            errorElement &&
+            errorElement.textContent?.includes("Authentication error")
+        ) {
+            // Redirect to login page after a short delay
+            setTimeout(() => {
+                window.location.href = "/login";
+            }, 3000);
+        }
+    });
 </script>

src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx

@@ -1,11 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Get } from '../../../scripts/pocketbase/Get';
-import { Update } from '../../../scripts/pocketbase/Update';
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
 import { Authentication } from '../../../scripts/pocketbase/Authentication';
 import { DataSyncService } from '../../../scripts/database/DataSyncService';
 import toast from 'react-hot-toast';
-import EventRequestDetails from './EventRequestDetails';
 import type { EventRequest as SchemaEventRequest } from '../../../schemas/pocketbase/schema';
 import { Collections } from '../../../schemas/pocketbase/schema';
 
@@ -25,27 +22,40 @@ interface ExtendedEventRequest extends SchemaEventRequest {
         [key: string]: any;
     };
     invoice_data?: any;
+    invoice_files?: string[]; // Array of invoice file IDs
     status: "submitted" | "pending" | "completed" | "declined";
+    declined_reason?: string; // Reason for declining the event request
+    flyers_completed?: boolean; // Track if flyers have been completed by PR team
 }
 
 interface EventRequestManagementTableProps {
     eventRequests: ExtendedEventRequest[];
+    onRequestSelect: (request: ExtendedEventRequest) => void;
+    onStatusChange: (id: string, status: "submitted" | "pending" | "completed" | "declined") => Promise<void>;
+    isLoadingUserData?: boolean;
 }
 
-const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: EventRequestManagementTableProps) => {
+const EventRequestManagementTable = ({
+    eventRequests: initialEventRequests,
+    onRequestSelect,
+    onStatusChange,
+    isLoadingUserData = false
+}: EventRequestManagementTableProps) => {
     const [eventRequests, setEventRequests] = useState<ExtendedEventRequest[]>(initialEventRequests);
     const [filteredRequests, setFilteredRequests] = useState<ExtendedEventRequest[]>(initialEventRequests);
-    const [selectedRequest, setSelectedRequest] = useState<ExtendedEventRequest | null>(null);
-    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
     const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
-    const [statusFilter, setStatusFilter] = useState<string>('all');
+    const [statusFilter, setStatusFilter] = useState<string>('active');
     const [searchTerm, setSearchTerm] = useState<string>('');
-    const [sortField, setSortField] = useState<string>('created');
-    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+    const [sortField, setSortField] = useState<string>('start_date_time');
+    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
     const dataSync = DataSyncService.getInstance();
     // Add state for update modal
     const [isUpdateModalOpen, setIsUpdateModalOpen] = useState<boolean>(false);
     const [requestToUpdate, setRequestToUpdate] = useState<ExtendedEventRequest | null>(null);
+    // Add state for decline reason modal
+    const [isDeclineModalOpen, setIsDeclineModalOpen] = useState<boolean>(false);
+    const [declineReason, setDeclineReason] = useState<string>('');
+    const [requestToDecline, setRequestToDecline] = useState<ExtendedEventRequest | null>(null);
 
     // Refresh event requests
     const refreshEventRequests = async () => {
@@ -56,23 +66,65 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
             // Don't check authentication here - try to fetch anyway
             // The token might be valid for the API even if isAuthenticated() returns false
 
-            console.log("Fetching event requests...");
+            // console.log("Fetching event requests...");
 
-            // Use DataSyncService to get data from IndexedDB with forced sync
+            // Use DataSyncService to get data from IndexedDB with forced sync and deletion detection
             const updatedRequests = await dataSync.getData<ExtendedEventRequest>(
                 Collections.EVENT_REQUESTS,
                 true, // Force sync
-                '', // No filter
+                '', // No filter - get all requests
                 '-created',
-                'requested_user'
+                'requested_user', // Expand user data
+                true // Enable deletion detection for all event requests
             );
 
-            console.log(`Fetched ${updatedRequests.length} event requests`);
+            // If we still have "Unknown" users, try to fetch them directly
+            const requestsWithUsers = await Promise.all(
+                updatedRequests.map(async (request) => {
+                    // If user data is missing, try to fetch it directly
+                    if (!request.expand?.requested_user && request.requested_user) {
+                        try {
+                            const userData = await dataSync.getItem(
+                                Collections.USERS,
+                                request.requested_user,
+                                true // Force sync the user data
+                            );
 
-            setEventRequests(updatedRequests);
-            applyFilters(updatedRequests);
+                            if (userData) {
+                                // TypeScript cast to access the properties
+                                const typedUserData = userData as unknown as {
+                                    id: string;
+                                    name?: string;
+                                    email?: string;
+                                };
+
+                                // Update the expand object with the user data
+                                return {
+                                    ...request,
+                                    expand: {
+                                        ...(request.expand || {}),
+                                        requested_user: {
+                                            id: typedUserData.id,
+                                            name: typedUserData.name || 'Unknown',
+                                            email: typedUserData.email || 'Unknown'
+                                        }
+                                    }
+                                } as ExtendedEventRequest;
+                            }
+                        } catch (error) {
+                            console.error(`Error fetching user data for request ${request.id}:`, error);
+                        }
+                    }
+                    return request;
+                })
+            ) as ExtendedEventRequest[];
+
+            // console.log(`Fetched ${updatedRequests.length} event requests`);
+
+            setEventRequests(requestsWithUsers);
+            applyFilters(requestsWithUsers);
         } catch (error) {
-            console.error('Error refreshing event requests:', error);
+            // console.error('Error refreshing event requests:', error);
             toast.error('Failed to refresh event requests');
         } finally {
             setIsRefreshing(false);
@@ -85,9 +137,19 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
 
         // Apply status filter
         if (statusFilter !== 'all') {
-            filtered = filtered.filter(request =>
-                request.status?.toLowerCase() === statusFilter.toLowerCase()
-            );
+            if (statusFilter === 'active') {
+                // Filter to show only submitted and pending events (hide completed and declined)
+                filtered = filtered.filter(request => {
+                    const status = request.status?.toLowerCase();
+                    return status === 'submitted' || status === 'pending' || !status; // Include requests without status (assume pending)
+                });
+            } else {
+                // For specific status filters, treat empty status as 'pending'
+                filtered = filtered.filter(request => {
+                    const status = request.status?.toLowerCase() || 'pending'; // Default empty status to 'pending'
+                    return status === statusFilter.toLowerCase();
+                });
+            }
         }
 
         // Apply search filter
@@ -132,46 +194,125 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
     };
 
     // Update event request status
-    const updateEventRequestStatus = async (id: string, status: "submitted" | "pending" | "completed" | "declined"): Promise<void> => {
+    const updateEventRequestStatus = async (id: string, status: "submitted" | "pending" | "completed" | "declined", declineReason?: string): Promise<void> => {
         try {
-            const update = Update.getInstance();
-            const result = await update.updateField('event_request', id, 'status', status);
+            // Find the event request to get its current status and name
+            const eventRequest = eventRequests.find(req => req.id === id);
+            const eventName = eventRequest?.name || 'Event';
+            const previousStatus = eventRequest?.status;
 
-            // Find the event request to get its name
+            // If declining, update with decline reason
+            if (status === 'declined' && declineReason) {
+                const { Update } = await import('../../../scripts/pocketbase/Update');
+                const update = Update.getInstance();
+                await update.updateFields("event_request", id, {
+                    status: status,
+                    declined_reason: declineReason
+                });
+            } else {
+                await onStatusChange(id, status);
+            }
+
+            // Update local state
+            setEventRequests(prev =>
+                prev.map(request =>
+                    request.id === id ? { 
+                        ...request, 
+                        status, 
+                        ...(status === 'declined' && declineReason ? { declined_reason: declineReason } : {})
+                    } : request
+                )
+            );
+
+            setFilteredRequests(prev =>
+                prev.map(request =>
+                    request.id === id ? { 
+                        ...request, 
+                        status, 
+                        ...(status === 'declined' && declineReason ? { declined_reason: declineReason } : {})
+                    } : request
+                )
+            );
+
+            toast.success(`"${eventName}" status updated to ${status}`);
+
+            // Send email notification for status change
+            try {
+                const { EmailClient } = await import('../../../scripts/email/EmailClient');
+                const auth = Authentication.getInstance();
+                const changedByUserId = auth.getUserId();
+
+                if (previousStatus && previousStatus !== status) {
+                    await EmailClient.notifyEventRequestStatusChange(
+                        id,
+                        previousStatus,
+                        status,
+                        changedByUserId || undefined,
+                        status === 'declined' ? declineReason : undefined
+                    );
+                    console.log('Event request status change notification email sent successfully');
+                }
+
+                // Send design team notifications for PR-related actions
+                if (eventRequest?.flyers_needed) {
+                    if (status === 'declined') {
+                        await EmailClient.notifyDesignTeam(id, 'declined');
+                        console.log('Design team notified of declined PR request');
+                    }
+                }
+            } catch (emailError) {
+                console.error('Failed to send event request status change notification email:', emailError);
+                // Don't show error to user - email failure shouldn't disrupt the main operation
+            }
+
+        } catch (error) {
+            console.error('Error updating status:', error);
+            toast.error('Failed to update status');
+        }
+    };
+
+    // Update PR status (flyers_completed)
+    const updatePRStatus = async (id: string, completed: boolean): Promise<void> => {
+        try {
+            const { Update } = await import('../../../scripts/pocketbase/Update');
+            const update = Update.getInstance();
+            
+            await update.updateField("event_request", id, "flyers_completed", completed);
+
+            // Find the event request to get its details
             const eventRequest = eventRequests.find(req => req.id === id);
             const eventName = eventRequest?.name || 'Event';
 
             // Update local state
             setEventRequests(prev =>
                 prev.map(request =>
-                    request.id === id ? { ...request, status } : request
+                    request.id === id ? { ...request, flyers_completed: completed } : request
                 )
             );
 
             setFilteredRequests(prev =>
                 prev.map(request =>
-                    request.id === id ? { ...request, status } : request
+                    request.id === id ? { ...request, flyers_completed: completed } : request
                 )
             );
 
-            // Update selected request if open
-            if (selectedRequest && selectedRequest.id === id) {
-                setSelectedRequest({ ...selectedRequest, status });
+            toast.success(`"${eventName}" PR status updated to ${completed ? 'completed' : 'pending'}`);
+
+            // Send email notification if PR is completed
+            if (completed) {
+                try {
+                    const { EmailClient } = await import('../../../scripts/email/EmailClient');
+                    await EmailClient.notifyPRCompleted(id);
+                    console.log('PR completion notification email sent successfully');
+                } catch (emailError) {
+                    console.error('Failed to send PR completion notification email:', emailError);
+                    // Don't show error to user - email failure shouldn't disrupt the main operation
+                }
             }
 
-            // Force sync to update IndexedDB
-            await dataSync.syncCollection<ExtendedEventRequest>(Collections.EVENT_REQUESTS);
-
-            // Show success toast with event name
-            toast.success(`"${eventName}" status updated to ${status}`);
         } catch (error) {
-            // Find the event request to get its name
-            const eventRequest = eventRequests.find(req => req.id === id);
-            const eventName = eventRequest?.name || 'Event';
-
-            console.error('Error updating status:', error);
-            toast.error(`Failed to update status for "${eventName}"`);
-            throw error; // Re-throw the error to be caught by the caller
+            console.error('Error updating PR status:', error);
+            toast.error('Failed to update PR status');
         }
     };
 
@@ -192,6 +333,50 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
         }
     };
 
+    // Format date and time range for display
+    const formatDateTimeRange = (startDateString: string, endDateString: string) => {
+        if (!startDateString) return 'Not specified';
+        
+        try {
+            const startDate = new Date(startDateString);
+            const endDate = endDateString ? new Date(endDateString) : null;
+            
+            const startFormatted = startDate.toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            
+            if (endDate && endDate.getTime() !== startDate.getTime()) {
+                // Check if it's the same day
+                const isSameDay = startDate.toDateString() === endDate.toDateString();
+                
+                if (isSameDay) {
+                    // Same day, just show end time
+                    const endTime = endDate.toLocaleTimeString('en-US', {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+                    return `${startFormatted} - ${endTime}`;
+                } else {
+                    // Different day, show full end date
+                    const endFormatted = endDate.toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+                    return `${startFormatted} - ${endFormatted}`;
+                }
+            }
+            
+            return startFormatted;
+        } catch (e) {
+            return startDateString;
+        }
+    };
+
     // Get status badge class based on status
     const getStatusBadge = (status?: "submitted" | "pending" | "completed" | "declined") => {
         if (!status) return 'badge-warning';
@@ -210,43 +395,45 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
         }
     };
 
-    // Open modal with event request details
-    const openDetailModal = (request: ExtendedEventRequest) => {
-        setSelectedRequest(request);
-        setIsModalOpen(true);
+    // Helper function to truncate text
+    const truncateText = (text: string, maxLength: number) => {
+        if (!text) return '';
+        return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
     };
 
-    // Close modal
-    const closeModal = () => {
-        setIsModalOpen(false);
-        setSelectedRequest(null);
-    };
-
-    // Open update modal
-    const openUpdateModal = (request: ExtendedEventRequest) => {
-        setRequestToUpdate(request);
-        setIsUpdateModalOpen(true);
-    };
-
-    // Close update modal
-    const closeUpdateModal = () => {
-        setIsUpdateModalOpen(false);
-        setRequestToUpdate(null);
-    };
-
-    // Update status and close modal
-    const handleUpdateStatus = async (status: "submitted" | "pending" | "completed" | "declined") => {
-        if (requestToUpdate) {
-            try {
-                await updateEventRequestStatus(requestToUpdate.id, status);
-                // Toast is now shown in updateEventRequestStatus
-                closeUpdateModal();
-            } catch (error) {
-                console.error('Error in handleUpdateStatus:', error);
-                // Toast is now shown in updateEventRequestStatus
-                // Keep modal open so user can try again
-            }
+    // Helper to get user display info - always show email address
+    const getUserDisplayInfo = (request: ExtendedEventRequest) => {
+        // If we're still loading user data, show loading indicator
+        if (isLoadingUserData) {
+            return {
+                name: request.expand?.requested_user?.name || 'Loading...',
+                email: request.expand?.requested_user?.email || 'Loading...'
+            };
         }
+
+        // First try to get from the expand object
+        if (request.expand?.requested_user) {
+            const user = request.expand.requested_user;
+            const name = user.name || 'Unknown';
+            // Always show email regardless of emailVisibility
+            const email = user.email || 'Unknown';
+            return { name, email };
+        }
+
+        // Then try the requested_user_expand
+        if (request.requested_user_expand) {
+            const name = request.requested_user_expand.name || 'Unknown';
+            const email = request.requested_user_expand.email || 'Unknown';
+            return { name, email };
+        }
+
+        // Last fallback
+        return { name: 'Unknown', email: 'Unknown' };
+    };
+
+    // Update openDetailModal to call the prop function
+    const openDetailModal = (request: ExtendedEventRequest) => {
+        onRequestSelect(request);
     };
 
     // Handle sort change
@@ -261,10 +448,42 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
         }
     };
 
+    // Handle decline action with reason prompt
+    const handleDeclineAction = (request: ExtendedEventRequest) => {
+        setRequestToDecline(request);
+        setDeclineReason('');
+        setIsDeclineModalOpen(true);
+    };
+
+    // Confirm decline with reason
+    const confirmDecline = async () => {
+        if (!requestToDecline || !declineReason.trim()) {
+            toast.error('Please provide a reason for declining');
+            return;
+        }
+
+        try {
+            await updateEventRequestStatus(requestToDecline.id, 'declined', declineReason);
+            setIsDeclineModalOpen(false);
+            setRequestToDecline(null);
+            setDeclineReason('');
+        } catch (error) {
+            console.error('Error declining request:', error);
+            toast.error('Failed to decline request');
+        }
+    };
+
+    // Cancel decline action
+    const cancelDecline = () => {
+        setIsDeclineModalOpen(false);
+        setRequestToDecline(null);
+        setDeclineReason('');
+    };
+
     // Apply filters when filter state changes
     useEffect(() => {
         applyFilters();
-    }, [statusFilter, searchTerm, sortField, sortDirection]);
+    }, [statusFilter, searchTerm, sortField, sortDirection, eventRequests]);
 
     // Check authentication and refresh token if needed
     useEffect(() => {
@@ -273,14 +492,14 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
 
             // Check if we're authenticated
             if (!auth.isAuthenticated()) {
-                console.log("Authentication check failed - attempting to continue anyway");
+                // console.log("Authentication check failed - attempting to continue anyway");
 
                 // Don't show error or redirect immediately - try to refresh first
                 try {
                     // Try to refresh event requests anyway - the token might be valid
                     await refreshEventRequests();
                 } catch (err) {
-                    console.error("Failed to refresh after auth check:", err);
+                    // console.error("Failed to refresh after auth check:", err);
                     toast.error("Authentication error. Please log in again.");
 
                     // Only redirect if refresh fails
@@ -289,7 +508,7 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                     }, 2000);
                 }
             } else {
-                console.log("Authentication check passed");
+                // console.log("Authentication check passed");
             }
         };
 
@@ -304,7 +523,7 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
     // Listen for tab visibility changes and refresh data when tab becomes visible
     useEffect(() => {
         const handleTabVisible = () => {
-            console.log("Tab became visible, refreshing event requests...");
+            // console.log("Tab became visible, refreshing event requests...");
             refreshEventRequests();
         };
 
@@ -323,13 +542,13 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.3 }}
-                className="bg-base-200 rounded-xl p-8 text-center shadow-sm"
+                className="bg-gradient-to-b from-base-200 to-base-300 rounded-xl p-8 text-center shadow-sm border border-base-300/30"
             >
                 <div className="flex flex-col items-center justify-center py-6">
                     <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-base-content/30 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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" />
                     </svg>
-                    <h3 className="text-xl font-semibold mb-3">No Event Requests Found</h3>
+                    <h3 className="text-xl font-semibold mb-3 text-white">No Event Requests Found</h3>
                     <p className="text-base-content/60 mb-6 max-w-md">
                         {statusFilter !== 'all' || searchTerm
                             ? 'No event requests match your current filters. Try adjusting your search criteria.'
@@ -337,7 +556,7 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                     </p>
                     <div className="flex gap-3">
                         <button
-                            className="btn btn-outline btn-sm gap-2"
+                            className="btn btn-primary btn-outline btn-sm gap-2"
                             onClick={refreshEventRequests}
                             disabled={isRefreshing}
                         >
@@ -357,7 +576,7 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                         </button>
                         {(statusFilter !== 'all' || searchTerm) && (
                             <button
-                                className="btn btn-outline btn-sm gap-2"
+                                className="btn btn-ghost btn-sm gap-2"
                                 onClick={() => {
                                     setStatusFilter('all');
                                     setSearchTerm('');
@@ -384,41 +603,43 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                 style={{ minHeight: "500px" }}
             >
                 {/* Filters and controls */}
-                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-4">
+                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 p-4 bg-base-300/50 rounded-lg border border-base-100/10 mb-6">
                     <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full lg:w-auto">
-                        <div className="form-control w-full sm:w-auto">
-                            <div className="input-group">
-                                <input
-                                    type="text"
-                                    placeholder="Search events..."
-                                    className="input input-bordered w-full sm:w-64"
-                                    value={searchTerm}
-                                    onChange={(e) => setSearchTerm(e.target.value)}
-                                />
-                                <button className="btn btn-square">
-                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </button>
-                            </div>
+                        <div className="relative flex items-center w-full sm:w-auto">
+                            <input
+                                type="text"
+                                placeholder="Search events..."
+                                className="input bg-[#1e2029] border-[#2a2d3a] focus:border-primary w-full sm:w-64 pr-10 rounded-lg"
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                            />
+                            <button className="absolute right-0 top-0 btn btn-square bg-primary text-white hover:bg-primary/90 border-none rounded-l-none h-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="relative w-full sm:w-auto">
+                            <select
+                                className="select bg-[#1e2029] border-[#2a2d3a] focus:border-primary w-full appearance-none pr-10 rounded-lg"
+                                value={statusFilter}
+                                onChange={(e) => setStatusFilter(e.target.value)}
+                            >
+                                <option value="active">Active (Submitted & Pending)</option>
+                                <option value="all">All Statuses</option>
+                                <option value="pending">Pending</option>
+                                <option value="completed">Completed</option>
+                                <option value="declined">Declined</option>
+                            </select>
+
                         </div>
-                        <select
-                            className="select select-bordered w-full sm:w-auto"
-                            value={statusFilter}
-                            onChange={(e) => setStatusFilter(e.target.value)}
-                        >
-                            <option value="all">All Statuses</option>
-                            <option value="pending">Pending</option>
-                            <option value="completed">Completed</option>
-                            <option value="declined">Declined</option>
-                        </select>
                     </div>
                     <div className="flex items-center gap-3 w-full lg:w-auto justify-between sm:justify-end">
                         <span className="text-sm text-gray-400">
                             {filteredRequests.length} {filteredRequests.length === 1 ? 'request' : 'requests'} found
                         </span>
                         <button
-                            className="btn btn-outline btn-sm gap-2"
+                            className="btn btn-primary btn-outline btn-sm gap-2"
                             onClick={refreshEventRequests}
                             disabled={isRefreshing}
                         >
@@ -441,96 +662,122 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
 
                 {/* Event requests table */}
                 <div
-                    className="rounded-xl shadow-sm overflow-x-auto"
+                    className="rounded-xl shadow-sm overflow-x-auto bg-base-100/10 border border-base-100/20"
                     style={{
                         maxHeight: "unset",
                         height: "auto"
                     }}
                 >
-                    <table className="table table-zebra w-full">
-                        <thead className="bg-base-300/50">
+                    <table className="table table-zebra w-full min-w-[600px]">
+                        <thead className="bg-base-300/50 sticky top-0 z-10">
                             <tr>
                                 <th
-                                    className="cursor-pointer hover:bg-base-300"
+                                    className="cursor-pointer hover:bg-base-300 transition-colors"
                                     onClick={() => handleSortChange('name')}
                                 >
                                     <div className="flex items-center gap-1">
                                         Event Name
                                         {sortField === 'name' && (
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortDirection === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"} />
                                             </svg>
                                         )}
                                     </div>
                                 </th>
                                 <th
-                                    className="cursor-pointer hover:bg-base-300 hidden md:table-cell"
+                                    className="cursor-pointer hover:bg-base-300 transition-colors hidden md:table-cell"
                                     onClick={() => handleSortChange('start_date_time')}
                                 >
                                     <div className="flex items-center gap-1">
-                                        Date
+                                        Date & Time
                                         {sortField === 'start_date_time' && (
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortDirection === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"} />
                                             </svg>
                                         )}
                                     </div>
                                 </th>
                                 <th
-                                    className="cursor-pointer hover:bg-base-300"
+                                    className="cursor-pointer hover:bg-base-300 transition-colors"
                                     onClick={() => handleSortChange('requested_user')}
                                 >
                                     <div className="flex items-center gap-1">
                                         Requested By
                                         {sortField === 'requested_user' && (
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortDirection === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"} />
                                             </svg>
                                         )}
                                     </div>
                                 </th>
                                 <th className="hidden lg:table-cell">PR Materials</th>
+                                <th
+                                    className="cursor-pointer hover:bg-base-300 transition-colors hidden lg:table-cell"
+                                    onClick={() => handleSortChange('flyers_completed')}
+                                >
+                                    <div className="flex items-center gap-1">
+                                        PR Status
+                                        {sortField === 'flyers_completed' && (
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortDirection === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"} />
+                                            </svg>
+                                        )}
+                                    </div>
+                                </th>
                                 <th className="hidden lg:table-cell">AS Funding</th>
                                 <th
-                                    className="cursor-pointer hover:bg-base-300 hidden md:table-cell"
+                                    className="cursor-pointer hover:bg-base-300 transition-colors hidden md:table-cell"
                                     onClick={() => handleSortChange('created')}
                                 >
                                     <div className="flex items-center gap-1">
                                         Submitted
                                         {sortField === 'created' && (
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortDirection === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"} />
                                             </svg>
                                         )}
                                     </div>
                                 </th>
                                 <th
-                                    className="cursor-pointer hover:bg-base-300"
+                                    className="cursor-pointer hover:bg-base-300 transition-colors"
                                     onClick={() => handleSortChange('status')}
                                 >
                                     <div className="flex items-center gap-1">
                                         Status
                                         {sortField === 'status' && (
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortDirection === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"} />
                                             </svg>
                                         )}
                                     </div>
                                 </th>
-                                <th>Actions</th>
+                                <th className="w-20 min-w-[5rem]">Actions</th>
                             </tr>
                         </thead>
                         <tbody>
                             {filteredRequests.map((request) => (
-                                <tr key={request.id} className="hover">
-                                    <td className="font-medium">{request.name}</td>
-                                    <td className="hidden md:table-cell">{formatDate(request.start_date_time)}</td>
-                                    <td>
-                                        <div className="flex flex-col">
-                                            <span>{request.expand?.requested_user?.name || 'Unknown'}</span>
-                                            <span className="text-xs text-gray-400">{request.expand?.requested_user?.email}</span>
+                                <tr key={request.id} className="hover transition-colors">
+                                    <td className="font-medium">
+                                        <div className="truncate max-w-[180px] md:max-w-[250px]" title={request.name}>
+                                            {truncateText(request.name, 30)}
                                         </div>
                                     </td>
+                                    <td className="hidden md:table-cell">
+                                        <div className="text-sm">
+                                            {formatDateTimeRange(request.start_date_time, request.end_date_time)}
+                                        </div>
+                                    </td>
+                                    <td>
+                                        {(() => {
+                                            const { name, email } = getUserDisplayInfo(request);
+                                            return (
+                                                <div className="flex flex-col">
+                                                    <span>{name}</span>
+                                                    <span className="text-xs text-gray-400">{email}</span>
+                                                </div>
+                                            );
+                                        })()}
+                                    </td>
                                     <td className="hidden lg:table-cell">
                                         {request.flyers_needed ? (
                                             <span className="badge badge-success badge-sm">Yes</span>
@@ -538,6 +785,28 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                                             <span className="badge badge-ghost badge-sm">No</span>
                                         )}
                                     </td>
+                                    <td className="hidden lg:table-cell">
+                                        {request.flyers_needed ? (
+                                            <input
+                                                type="checkbox"
+                                                checked={request.flyers_completed || false}
+                                                onChange={(e) => {
+                                                    e.stopPropagation();
+                                                    updatePRStatus(request.id, e.target.checked);
+                                                }}
+                                                className="checkbox checkbox-primary"
+                                                title="Mark PR materials as completed"
+                                            />
+                                        ) : (
+                                            <input
+                                                type="checkbox"
+                                                checked={false}
+                                                disabled={true}
+                                                className="checkbox checkbox-disabled opacity-30"
+                                                title="PR materials not needed for this event"
+                                            />
+                                        )}
+                                    </td>
                                     <td className="hidden lg:table-cell">
                                         {request.as_funding_required ? (
                                             <span className="badge badge-success badge-sm">Yes</span>
@@ -548,25 +817,21 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                                     <td className="hidden md:table-cell">{formatDate(request.created)}</td>
                                     <td>
                                         <span className={`badge ${getStatusBadge(request.status)}`}>
-                                            {request.status || 'Pending'}
+                                            {request.status?.charAt(0).toUpperCase() + request.status?.slice(1) || 'Pending'}
                                         </span>
                                     </td>
                                     <td>
-                                        <div className="flex items-center gap-2">
+                                        <div className="flex items-center justify-center">
                                             <button
-                                                className="btn btn-sm btn-outline"
-                                                onClick={() => openUpdateModal(request)}
-                                            >
-                                                Update
-                                            </button>
-                                            <button
-                                                className="btn btn-sm btn-ghost"
+                                                className="btn btn-sm btn-primary btn-outline gap-1 min-h-[2rem] max-w-[5rem] flex-shrink-0"
                                                 onClick={() => openDetailModal(request)}
+                                                title="View Event Details"
                                             >
-                                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                 </svg>
+                                                <span className="hidden sm:inline">View</span>
                                             </button>
                                         </div>
                                     </td>
@@ -577,83 +842,48 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
                 </div>
             </motion.div>
 
-            {/* Event request details modal - Now outside the main component div */}
-            {isModalOpen && selectedRequest && (
-                <AnimatePresence>
-                    <EventRequestDetails
-                        request={selectedRequest}
-                        onClose={closeModal}
-                        onStatusChange={updateEventRequestStatus}
-                    />
-                </AnimatePresence>
-            )}
-
-            {/* Update status modal */}
-            {isUpdateModalOpen && requestToUpdate && (
-                <AnimatePresence>
-                    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-                        <motion.div
-                            initial={{ opacity: 0, scale: 0.95 }}
-                            animate={{ opacity: 1, scale: 1 }}
-                            exit={{ opacity: 0, scale: 0.95 }}
-                            transition={{ duration: 0.2 }}
-                            className="bg-base-200 rounded-lg shadow-xl w-full max-w-md overflow-hidden flex flex-col"
-                        >
-                            {/* Header */}
-                            <div className="bg-base-300 p-4 flex justify-between items-center">
-                                <h3 className="text-xl font-bold">Update Status</h3>
-                                <button
-                                    className="btn btn-sm btn-circle"
-                                    onClick={closeUpdateModal}
-                                >
-                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                                    </svg>
-                                </button>
-                            </div>
-
-                            {/* Content */}
-                            <div className="p-6">
-                                <p className="mb-4">
-                                    Update status for event: <span className="font-semibold">{requestToUpdate.name}</span>
-                                </p>
-                                <div className="flex flex-col gap-3">
-                                    <button
-                                        className="btn btn-outline w-full justify-start"
-                                        onClick={() => handleUpdateStatus("pending")}
-                                    >
-                                        <span className="badge badge-warning mr-2">Pending</span>
-                                        Mark as Pending
-                                    </button>
-                                    <button
-                                        className="btn btn-outline w-full justify-start"
-                                        onClick={() => handleUpdateStatus("completed")}
-                                    >
-                                        <span className="badge badge-success mr-2">Completed</span>
-                                        Mark as Completed
-                                    </button>
-                                    <button
-                                        className="btn btn-outline w-full justify-start"
-                                        onClick={() => handleUpdateStatus("declined")}
-                                    >
-                                        <span className="badge badge-error mr-2">Declined</span>
-                                        Mark as Declined
-                                    </button>
-                                </div>
-                            </div>
-
-                            {/* Footer */}
-                            <div className="p-4 border-t border-base-300 flex justify-end">
-                                <button
-                                    className="btn btn-ghost"
-                                    onClick={closeUpdateModal}
-                                >
-                                    Cancel
-                                </button>
-                            </div>
-                        </motion.div>
-                    </div>
-                </AnimatePresence>
+            {/* Decline Reason Modal */}
+            {isDeclineModalOpen && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        className="bg-base-200 rounded-lg p-6 w-full max-w-md shadow-xl"
+                    >
+                        <h3 className="text-lg font-semibold text-white mb-4">
+                            Decline Event Request
+                        </h3>
+                        <p className="text-gray-300 mb-4">
+                            Please provide a reason for declining "{requestToDecline?.name}". This will be sent to the submitter.
+                        </p>
+                        <textarea
+                            className="textarea textarea-bordered w-full h-32 bg-base-300 text-white border-base-300 focus:border-primary"
+                            placeholder="Enter decline reason (required)..."
+                            value={declineReason}
+                            onChange={(e) => setDeclineReason(e.target.value)}
+                            maxLength={500}
+                        />
+                        <div className="text-xs text-gray-400 mb-4">
+                            {declineReason.length}/500 characters
+                        </div>
+                        <div className="flex justify-end gap-3">
+                            <button
+                                className="btn btn-ghost"
+                                onClick={cancelDecline}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                className="btn btn-error"
+                                onClick={confirmDecline}
+                                disabled={!declineReason.trim()}
+                            >
+                                Decline Request
+                            </button>
+                        </div>
+                    </motion.div>
+                </div>
             )}
         </>
     );

src/components/dashboard/Officer_EventRequestManagement/EventRequestModal.tsx

@@ -0,0 +1,404 @@
+import React, { useState, useEffect, useLayoutEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import EventRequestDetails from './EventRequestDetails';
+import EventRequestManagementTable from './EventRequestManagementTable';
+import { Update } from '../../../scripts/pocketbase/Update';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import { DataSyncService } from '../../../scripts/database/DataSyncService';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { toast } from 'react-hot-toast';
+import { EmailClient } from '../../../scripts/email/EmailClient';
+import type { EventRequest } from '../../../schemas/pocketbase/schema';
+
+// Extended EventRequest interface to include expanded fields that might come from the API
+interface ExtendedEventRequest extends Omit<EventRequest, 'status'> {
+    status: "submitted" | "pending" | "completed" | "declined";
+    requested_user_expand?: {
+        name: string;
+        email: string;
+    };
+    expand?: {
+        requested_user?: {
+            id: string;
+            name: string;
+            email: string;
+            emailVisibility?: boolean;
+            [key: string]: any;
+        };
+        [key: string]: any;
+    };
+}
+
+interface EventRequestModalProps {
+    eventRequests: ExtendedEventRequest[];
+}
+
+// Helper to refresh user data in request objects
+const refreshUserData = async (requests: ExtendedEventRequest[]): Promise<ExtendedEventRequest[]> => {
+    try {
+        const get = Get.getInstance();
+        const updatedRequests = [...requests];
+        const userCache: Record<string, any> = {}; // Cache to avoid fetching the same user multiple times
+
+        for (let i = 0; i < updatedRequests.length; i++) {
+            const request = updatedRequests[i];
+
+            if (request.requested_user) {
+                try {
+                    // Check if we've already fetched this user
+                    let typedUserData;
+
+                    if (userCache[request.requested_user]) {
+                        typedUserData = userCache[request.requested_user];
+                    } else {
+                        // Fetch full user details for each request with expanded options
+                        const userData = await get.getOne('users', request.requested_user);
+
+                        // Type assertion to ensure we have the correct user data properties
+                        typedUserData = userData as {
+                            id: string;
+                            name: string;
+                            email: string;
+                            [key: string]: any;
+                        };
+
+                        // Store in cache
+                        userCache[request.requested_user] = typedUserData;
+                    }
+
+                    // Update expand object with user data
+                    if (!request.expand) request.expand = {};
+                    request.expand.requested_user = {
+                        ...typedUserData,
+                        emailVisibility: true // Force this to be true for UI purposes
+                    };
+
+                    // Update the requested_user_expand property
+                    request.requested_user_expand = {
+                        name: typedUserData.name || 'Unknown',
+                        email: typedUserData.email || '(No email available)'
+                    };
+                } catch (err) {
+                    console.error(`Error fetching user data for request ${request.id}:`, err);
+                    // Ensure we have fallback values even if the API call fails
+                    if (!request.expand) request.expand = {};
+                    if (!request.expand.requested_user) {
+                        request.expand.requested_user = {
+                            id: request.requested_user,
+                            name: 'Unknown',
+                            email: 'Unknown',
+                            emailVisibility: true
+                        };
+                    }
+
+                    if (!request.requested_user_expand) {
+                        request.requested_user_expand = {
+                            name: 'Unknown',
+                            email: 'Unknown'
+                        };
+                    }
+                }
+            }
+        }
+
+        return updatedRequests;
+    } catch (err) {
+        console.error('Error refreshing user data:', err);
+        return requests;
+    }
+};
+
+// Wrapper component for EventRequestManagementTable that handles string to function conversion
+const TableWrapper: React.FC<{
+    eventRequests: ExtendedEventRequest[];
+    handleSelectRequest: (request: ExtendedEventRequest) => void;
+    handleStatusChange: (id: string, status: "submitted" | "pending" | "completed" | "declined") => Promise<void>;
+    isLoadingUserData?: boolean;
+}> = ({ eventRequests, handleSelectRequest, handleStatusChange, isLoadingUserData = false }) => {
+    return (
+        <EventRequestManagementTable
+            eventRequests={eventRequests}
+            onRequestSelect={handleSelectRequest}
+            onStatusChange={handleStatusChange}
+            isLoadingUserData={isLoadingUserData}
+        />
+    );
+};
+
+const EventRequestModal: React.FC<EventRequestModalProps> = ({ eventRequests }) => {
+    // Define animation delay as a constant to keep it consistent
+    const ANIMATION_DELAY = "0.3s";
+
+    const [selectedRequest, setSelectedRequest] = useState<ExtendedEventRequest | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [localEventRequests, setLocalEventRequests] = useState<ExtendedEventRequest[]>(eventRequests);
+    const [isLoadingUserData, setIsLoadingUserData] = useState(true); // Start as true to show loading immediately
+
+    // Fix scrollbar flashing when modal opens/closes
+    useLayoutEffect(() => {
+        const originalStyle = window.getComputedStyle(document.body).overflow;
+        const originalPaddingRight = window.getComputedStyle(document.body).paddingRight;
+
+        if (isModalOpen) {
+            // Store scroll position
+            const scrollY = window.scrollY;
+
+            // Measure the scrollbar width
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+            // Add padding to prevent layout shift
+            document.body.style.paddingRight = `${scrollbarWidth}px`;
+
+            // Prevent body scroll
+            document.body.style.overflow = 'hidden';
+            document.body.style.position = 'fixed';
+            document.body.style.top = `-${scrollY}px`;
+            document.body.style.width = '100%';
+        } else {
+            // Restore scrolling
+            const scrollY = document.body.style.top;
+            document.body.style.overflow = originalStyle;
+            document.body.style.position = '';
+            document.body.style.top = '';
+            document.body.style.width = '';
+            document.body.style.paddingRight = originalPaddingRight;
+
+            if (scrollY) {
+                window.scrollTo(0, parseInt(scrollY || '0') * -1);
+            }
+        }
+
+        return () => {
+            // Clean up
+            document.body.style.overflow = originalStyle;
+            document.body.style.position = '';
+            document.body.style.top = '';
+            document.body.style.width = '';
+            document.body.style.paddingRight = originalPaddingRight;
+        };
+    }, [isModalOpen]);
+
+    // Function to refresh user data
+    const refreshUserDataAndUpdate = async (requests: ExtendedEventRequest[] = localEventRequests) => {
+        setIsLoadingUserData(true);
+        try {
+            const updatedRequests = await refreshUserData(requests);
+            setLocalEventRequests(updatedRequests);
+        } catch (err) {
+            console.error('Error refreshing event request data:', err);
+        } finally {
+            setIsLoadingUserData(false);
+        }
+    };
+
+    // Immediately load user data on mount and when eventRequests change
+    useEffect(() => {
+        if (eventRequests && eventRequests.length > 0) {
+            // First update with existing data from props
+            setLocalEventRequests(eventRequests);
+            // Then refresh user data
+            refreshUserDataAndUpdate(eventRequests);
+        }
+    }, [eventRequests]);
+
+    // Ensure user data is loaded immediately when component mounts
+    useEffect(() => {
+        // Refresh user data immediately on mount
+        refreshUserDataAndUpdate();
+
+        // Set up auto-refresh every 30 seconds
+        const refreshInterval = setInterval(() => {
+            refreshUserDataAndUpdate();
+        }, 30000); // 30 seconds
+
+        // Clear interval on unmount
+        return () => {
+            clearInterval(refreshInterval);
+        };
+    }, []);
+
+    // Set up event listeners for communication with the table component
+    useEffect(() => {
+        const handleSelectRequest = (event: CustomEvent) => {
+            setSelectedRequest(event.detail.request);
+            setIsModalOpen(true);
+        };
+
+        const handleStatusUpdated = (event: CustomEvent) => {
+            const { id, status } = event.detail;
+
+            // Update local state
+            setLocalEventRequests(prevRequests =>
+                prevRequests.map(req =>
+                    req.id === id ? { ...req, status } : req
+                )
+            );
+        };
+
+        // Add event listeners
+        document.addEventListener('event-request-select', handleSelectRequest as EventListener);
+        document.addEventListener('status-updated', handleStatusUpdated as EventListener);
+
+        // Clean up
+        return () => {
+            document.removeEventListener('event-request-select', handleSelectRequest as EventListener);
+            document.removeEventListener('status-updated', handleStatusUpdated as EventListener);
+        };
+    }, []);
+
+    // Listen for dashboardTabVisible event to refresh user data
+    useEffect(() => {
+        const handleTabVisible = async () => {
+            refreshUserDataAndUpdate();
+        };
+
+        document.addEventListener('dashboardTabVisible', handleTabVisible);
+
+        return () => {
+            document.removeEventListener('dashboardTabVisible', handleTabVisible);
+        };
+    }, []);
+
+    const closeModal = () => {
+        setIsModalOpen(false);
+        setSelectedRequest(null);
+    };
+
+    const handleStatusChange = async (id: string, status: "submitted" | "pending" | "completed" | "declined"): Promise<void> => {
+        try {
+            const update = Update.getInstance();
+            await update.updateField("event_request", id, "status", status);
+
+            // Force sync to update IndexedDB with deletion detection enabled
+            const dataSync = DataSyncService.getInstance();
+            await dataSync.syncCollection(Collections.EVENT_REQUESTS, "", "-created", {}, true);
+
+            // Find the request to get its name and previous status
+            const request = localEventRequests.find((req) => req.id === id);
+            const eventName = request?.name || "Event";
+            const previousStatus = request?.status;
+
+            // Update local state
+            setLocalEventRequests(prevRequests =>
+                prevRequests.map(req =>
+                    req.id === id ? { ...req, status } : req
+                )
+            );
+
+            // Notify success
+            toast.success(`"${eventName}" status updated to ${status}`);
+
+            // Send email notification for status change (non-blocking)
+            try {
+                await EmailClient.notifyEventRequestStatusChange(id, previousStatus || 'unknown', status);
+                console.log('Event request status change notification email sent successfully');
+            } catch (emailError) {
+                console.error('Failed to send event request status change notification email:', emailError);
+                // Don't show error to user - email failure shouldn't disrupt the main operation
+            }
+
+            // Dispatch event for other components
+            document.dispatchEvent(
+                new CustomEvent("status-updated", {
+                    detail: { id, status },
+                })
+            );
+
+        } catch (err) {
+            console.error("Error updating status:", err);
+            toast.error(`Failed to update status`);
+            throw err;
+        }
+    };
+
+    // Function to handle request selection
+    const handleSelectRequest = (request: ExtendedEventRequest) => {
+        document.dispatchEvent(
+            new CustomEvent("event-request-select", {
+                detail: { request },
+            })
+        );
+    };
+
+    // Expose the functions globally for table component to use
+    useEffect(() => {
+        // @ts-ignore - Adding to window object
+        window.handleSelectRequest = handleSelectRequest;
+        // @ts-ignore - Adding to window object
+        window.handleStatusChange = handleStatusChange;
+        // @ts-ignore - Adding to window object
+        window.refreshUserData = refreshUserDataAndUpdate;
+
+        return () => {
+            // @ts-ignore - Cleanup
+            delete window.handleSelectRequest;
+            // @ts-ignore - Cleanup
+            delete window.handleStatusChange;
+            // @ts-ignore - Cleanup
+            delete window.refreshUserData;
+        };
+    }, [localEventRequests]);
+
+    return (
+        <>
+            {/* Table component with modernized UI */}
+            <div
+                className="bg-gradient-to-b from-base-200 to-base-300 rounded-xl shadow-xl overflow-hidden dashboard-card card-enter event-table-container border border-base-300/30"
+                style={{ animationDelay: ANIMATION_DELAY }}
+            >
+                <div className="p-4 md:p-6 h-auto">
+
+                    <div id="event-request-table-container" className="relative">
+                        <TableWrapper
+                            eventRequests={localEventRequests}
+                            handleSelectRequest={handleSelectRequest}
+                            handleStatusChange={handleStatusChange}
+                            isLoadingUserData={isLoadingUserData}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* Modal with improved styling */}
+            <AnimatePresence>
+                {isModalOpen && selectedRequest && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black/70 backdrop-blur-sm z-[200]"
+                    >
+                        <div className="flex items-center justify-center min-h-screen p-4 overflow-hidden">
+                            <motion.div
+                                initial={{ scale: 0.95, opacity: 0 }}
+                                animate={{ scale: 1, opacity: 1 }}
+                                exit={{ scale: 0.95, opacity: 0 }}
+                                transition={{ type: "spring", damping: 25, stiffness: 300 }}
+                                className="w-full max-w-5xl max-h-[90vh] overflow-y-auto bg-gradient-to-b from-base-200 to-base-300 rounded-xl shadow-2xl border border-base-100/20 relative"
+                            >
+                                <div className="sticky top-0 right-0 z-[201] flex justify-between items-center p-4 bg-base-300/80 backdrop-blur-md border-b border-base-100/10">
+                                    <h2 className="text-xl font-bold text-white">{selectedRequest.name}</h2>
+                                    <button
+                                        onClick={closeModal}
+                                        className="btn btn-circle btn-sm bg-base-100/20 hover:bg-base-100/40 border-none text-white"
+                                    >
+                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                        </svg>
+                                    </button>
+                                </div>
+                                <EventRequestDetails
+                                    request={selectedRequest}
+                                    onClose={closeModal}
+                                    onStatusChange={handleStatusChange}
+                                />
+                            </motion.div>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </>
+    );
+};
+
+export default EventRequestModal; 

src/components/dashboard/ProfileSection.astro

@@ -10,6 +10,160 @@ import { Stats } from "./ProfileSection/Stats";
         <p class="opacity-70">Welcome to your IEEE UCSD dashboard</p>
     </div>
 
+    <!-- Resume Alert Notification -->
+    <div id="resumeAlert" class="hidden">
+        <div
+            class="bg-error/10 border-l-4 border-error p-4 rounded-lg mb-6 shadow-md"
+        >
+            <div class="flex items-center justify-between">
+                <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0 mt-0.5">
+                        <div class="p-1.5 bg-error/20 rounded-full">
+                            <Icon
+                                name="heroicons:document-text"
+                                class="h-5 w-5 text-error"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-white mb-1">
+                            Resume Required
+                        </h3>
+                        <p class="text-sm text-base-content/80">
+                            Your resume is missing. Upload your resume to
+                            increase visibility to recruiters and access
+                            exclusive career opportunities.
+                        </p>
+                    </div>
+                </div>
+                <div class="ml-4 flex-shrink-0 self-center">
+                    <a
+                        href="#settings-section"
+                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-error hover:bg-error-focus focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error transition-colors duration-200"
+                        id="uploadResumeBtn"
+                    >
+                        <Icon
+                            name="heroicons:arrow-up-tray"
+                            class="h-4 w-4 mr-1.5"
+                        />
+                        Upload Now
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            // Function to check if user has a resume and show/hide the alert
+            const checkResumeStatus = async () => {
+                try {
+                    const resumeAlert = document.getElementById("resumeAlert");
+                    if (!resumeAlert) return;
+
+                    // Get the current user from PocketBase
+                    const { Authentication } = await import(
+                        "../../scripts/pocketbase/Authentication"
+                    );
+                    const { Get } = await import(
+                        "../../scripts/pocketbase/Get"
+                    );
+
+                    const auth = Authentication.getInstance();
+                    const get = Get.getInstance();
+
+                    if (!auth.isAuthenticated()) {
+                        resumeAlert.classList.add("hidden");
+                        return;
+                    }
+
+                    const user = auth.getCurrentUser();
+                    if (!user) {
+                        resumeAlert.classList.add("hidden");
+                        return;
+                    }
+
+                    // Fetch user data to check if resume exists
+                    const userData = await get.getOne("users", user.id);
+
+                    if (userData && userData.resume) {
+                        // User has a resume, hide the alert
+                        resumeAlert.classList.add("hidden");
+                    } else {
+                        // User doesn't have a resume, show the alert
+                        resumeAlert.classList.remove("hidden");
+                    }
+                } catch (error) {
+                    console.error("Error checking resume status:", error);
+                }
+            };
+
+            // Check resume status when the page loads
+            document.addEventListener("DOMContentLoaded", checkResumeStatus);
+
+            // Listen for resume upload events
+            window.addEventListener("resumeUploaded", (event: Event) => {
+                const resumeAlert = document.getElementById("resumeAlert");
+                if (!resumeAlert) return;
+
+                // Cast to CustomEvent to access detail property
+                const customEvent = event as CustomEvent<{
+                    hasResume: boolean;
+                }>;
+                const { hasResume } = customEvent.detail;
+
+                if (hasResume) {
+                    resumeAlert.classList.add("hidden");
+                } else {
+                    resumeAlert.classList.remove("hidden");
+                }
+            });
+
+            // Handle the "Upload Now" button click
+            document
+                .getElementById("uploadResumeBtn")
+                ?.addEventListener("click", (e) => {
+                    e.preventDefault();
+
+                    // Find the settings button in the sidebar and click it
+                    const settingsButton = document.querySelector(
+                        '[data-section="settings"]'
+                    ) as HTMLElement;
+                    if (settingsButton) {
+                        settingsButton.click();
+
+                        // Scroll to the resume section after a short delay
+                        setTimeout(() => {
+                            // Find the resume management section by ID or a more reliable selector
+                            const resumeSection = document.getElementById(
+                                "resume-management-section"
+                            );
+
+                            if (resumeSection) {
+                                resumeSection.scrollIntoView({
+                                    behavior: "smooth",
+                                });
+                            } else {
+                                // Fallback: try to find by heading text
+                                const headings =
+                                    document.querySelectorAll("h3.card-title");
+                                for (const heading of headings) {
+                                    if (
+                                        heading.textContent?.includes(
+                                            "Resume Management"
+                                        )
+                                    ) {
+                                        heading.scrollIntoView({
+                                            behavior: "smooth",
+                                        });
+                                        break;
+                                    }
+                                }
+                            }
+                        }, 300);
+                    }
+                });
+        </script>
+    </div>
+
     <Stats client:load />
 
     <!-- Dashboard Content -->

src/components/dashboard/ProfileSection/ShowProfileLogs.tsx

@@ -49,7 +49,7 @@ export default function ShowProfileLogs() {
 
         try {
             setIsFetchingAll(true);
-            console.log("Fetching logs for user:", userId);
+            // console.log("Fetching logs for user:", userId);
 
             // Use DataSyncService to fetch logs
             const dataSync = DataSyncService.getInstance();
@@ -70,15 +70,15 @@ export default function ShowProfileLogs() {
                 "-created"
             );
 
-            console.log("Fetched logs:", fetchedLogs.length);
+            // console.log("Fetched logs:", fetchedLogs.length);
 
             if (fetchedLogs.length === 0) {
                 // If no logs found, try to fetch directly from PocketBase
-                console.log("No logs found in IndexedDB, trying direct fetch from PocketBase");
+                // console.log("No logs found in IndexedDB, trying direct fetch from PocketBase");
                 try {
                     const sendLog = SendLog.getInstance();
                     const directLogs = await sendLog.getUserLogs(userId);
-                    console.log("Direct fetch logs:", directLogs.length);
+                    // console.log("Direct fetch logs:", directLogs.length);
 
                     if (directLogs.length > 0) {
                         setAllLogs(directLogs);
@@ -90,7 +90,7 @@ export default function ShowProfileLogs() {
                         setTotalLogs(fetchedLogs.length);
                     }
                 } catch (directError) {
-                    console.error("Failed to fetch logs directly:", directError);
+                    // console.error("Failed to fetch logs directly:", directError);
                     setAllLogs(fetchedLogs);
                     setTotalPages(Math.ceil(fetchedLogs.length / LOGS_PER_PAGE));
                     setTotalLogs(fetchedLogs.length);
@@ -101,7 +101,7 @@ export default function ShowProfileLogs() {
                 setTotalLogs(fetchedLogs.length);
             }
         } catch (error) {
-            console.error("Failed to fetch logs:", error);
+            // console.error("Failed to fetch logs:", error);
             setError("Error loading activity");
         } finally {
             setLoading(false);
@@ -134,7 +134,7 @@ export default function ShowProfileLogs() {
     // Update displayed logs whenever filtered results change
     useEffect(() => {
         setLogs(filteredLogs);
-        console.log("Filtered logs updated:", filteredLogs.length, "logs");
+        // console.log("Filtered logs updated:", filteredLogs.length, "logs");
     }, [filteredLogs]);
 
     // Debounced search handler
@@ -178,12 +178,12 @@ export default function ShowProfileLogs() {
                 setTimeout(async () => {
                     // Check if logs were loaded
                     if (allLogs.length === 0) {
-                        console.log("No logs found after initial fetch, trying direct fetch");
+                        // console.log("No logs found after initial fetch, trying direct fetch");
                         await directFetchLogs();
                     }
                 }, 1000);
             } catch (error) {
-                console.error("Failed to load logs with retry:", error);
+                // console.error("Failed to load logs with retry:", error);
             }
         };
 
@@ -200,14 +200,14 @@ export default function ShowProfileLogs() {
 
             // Check if the logs collection exists and has any records
             const result = await pb.collection(Collections.LOGS).getList(1, 1);
-            console.log("Logs collection check:", {
-                totalItems: result.totalItems,
-                page: result.page,
-                perPage: result.perPage,
-                totalPages: result.totalPages
-            });
+            // console.log("Logs collection check:", {
+            //     totalItems: result.totalItems,
+            //     page: result.page,
+            //     perPage: result.perPage,
+            //     totalPages: result.totalPages
+            // });
         } catch (error) {
-            console.error("Failed to check logs collection:", error);
+            // console.error("Failed to check logs collection:", error);
         }
     };
 
@@ -255,7 +255,7 @@ export default function ShowProfileLogs() {
                 return;
             }
 
-            console.log("Direct fetching logs for user:", userId);
+            // console.log("Direct fetching logs for user:", userId);
 
             // Fetch logs directly from PocketBase
             const result = await pb.collection(Collections.LOGS).getList<Log>(1, 100, {
@@ -264,10 +264,10 @@ export default function ShowProfileLogs() {
                 expand: "user"
             });
 
-            console.log("Direct fetch result:", {
-                totalItems: result.totalItems,
-                items: result.items.length
-            });
+            // console.log("Direct fetch result:", {
+            //     totalItems: result.totalItems,
+            //     items: result.items.length
+            // });
 
             if (result.items.length > 0) {
                 setAllLogs(result.items);
@@ -275,7 +275,7 @@ export default function ShowProfileLogs() {
                 setTotalLogs(result.items.length);
             }
         } catch (error) {
-            console.error("Failed to direct fetch logs:", error);
+            // console.error("Failed to direct fetch logs:", error);
             setError("Error loading activity");
         } finally {
             setLoading(false);
@@ -315,13 +315,13 @@ export default function ShowProfileLogs() {
     }
 
     // Debug logs
-    console.log("Render state:", {
-        logsLength: logs.length,
-        allLogsLength: allLogs.length,
-        searchQuery,
-        loading,
-        currentPage
-    });
+    // console.log("Render state:", {
+    //     logsLength: logs.length,
+    //     allLogsLength: allLogs.length,
+    //     searchQuery,
+    //     loading,
+    //     currentPage
+    // });
 
     if (allLogs.length === 0 && !searchQuery && !loading) {
         return (
@@ -348,10 +348,10 @@ export default function ShowProfileLogs() {
                                     "Test log created for debugging",
                                     userId
                                 );
-                                console.log("Created test log");
+                                // console.log("Created test log");
                                 setTimeout(() => fetchLogs(true), 1000);
                             } catch (error) {
-                                console.error("Failed to create test log:", error);
+                                // console.error("Failed to create test log:", error);
                             }
                         }}
                     >

src/components/dashboard/ProfileSection/Stats.tsx

@@ -1,15 +1,13 @@
 import { useEffect, useState } from "react";
 import { Authentication } from "../../../scripts/pocketbase/Authentication";
-import { DataSyncService } from "../../../scripts/database/DataSyncService";
 import { Collections } from "../../../schemas/pocketbase/schema";
-import type { Event, Log, User } from "../../../schemas/pocketbase";
+import type { Event, User, LimitedUser } from "../../../schemas/pocketbase";
 import { Get } from "../../../scripts/pocketbase/Get";
 import type { EventAttendee } from "../../../schemas/pocketbase";
 import { Update } from "../../../scripts/pocketbase/Update";
 
-// Extended User interface with points property
+// Extended User interface with member_type property
 interface ExtendedUser extends User {
-    points?: number;
     member_type?: string;
 }
 
@@ -84,47 +82,44 @@ export function Stats() {
 
                 setEventsAttended(attendedEvents.totalItems);
 
-                // Get user points - either from the user record or calculate from attendees
+                // Calculate points from attendees
                 let totalPoints = 0;
 
                 // Calculate quarterly points
                 const quarterStartDate = getCurrentQuarterStartDate();
                 let pointsThisQuarter = 0;
 
-                // If user has points field, use that for total points
-                if (currentUser && currentUser.points !== undefined) {
-                    totalPoints = currentUser.points;
+                // Calculate both total and quarterly points from attendees
+                attendedEvents.items.forEach(attendee => {
+                    const points = attendee.points_earned || 0;
+                    totalPoints += points;
 
-                    // Still need to calculate quarterly points from attendees
-                    attendedEvents.items.forEach(attendee => {
-                        const checkinDate = new Date(attendee.time_checked_in);
-                        if (checkinDate >= quarterStartDate) {
-                            pointsThisQuarter += attendee.points_earned || 0;
-                        }
-                    });
-                } else {
-                    // Calculate both total and quarterly points from attendees
-                    attendedEvents.items.forEach(attendee => {
-                        const points = attendee.points_earned || 0;
-                        totalPoints += points;
+                    const checkinDate = new Date(attendee.time_checked_in);
+                    if (checkinDate >= quarterStartDate) {
+                        pointsThisQuarter += points;
+                    }
+                });
 
-                        const checkinDate = new Date(attendee.time_checked_in);
-                        if (checkinDate >= quarterStartDate) {
-                            pointsThisQuarter += points;
-                        }
-                    });
+                // Try to get the LimitedUser record to check if points match
+                try {
+                    const limitedUserRecord = await get.getOne(
+                        Collections.LIMITED_USERS,
+                        userId
+                    );
 
-                    // Update the user record with calculated points if needed
-                    if (currentUser) {
+                    if (limitedUserRecord && limitedUserRecord.points) {
                         try {
-                            const update = Update.getInstance();
-                            await update.updateFields(Collections.USERS, currentUser.id, {
-                                points: totalPoints
-                            });
-                        } catch (error) {
-                            console.error("Error updating user points:", error);
+                            // Parse the points JSON string
+                            const parsedPoints = JSON.parse(limitedUserRecord.points);
+                            if (parsedPoints !== totalPoints) {
+                                console.log(`Points mismatch: LimitedUser has ${parsedPoints}, calculated ${totalPoints}`);
+                            }
+                        } catch (e) {
+                            console.error('Error parsing points from LimitedUser:', e);
                         }
                     }
+                } catch (e) {
+                    // LimitedUser record might not exist yet, that's okay
                 }
 
                 setPointsEarned(totalPoints);
@@ -199,7 +194,7 @@ export function Stats() {
             </div>
             <div className="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-secondary transition-all duration-300 hover:-translate-y-1 transform">
                 <div className="stat">
-                    <div className="stat-title font-medium opacity-80">Loyalty Points</div>
+                    <div className="stat-title font-medium opacity-80">Points</div>
                     <div className="stat-value text-secondary">{loyaltyPoints}</div>
                     <div className="stat-desc flex flex-col items-start gap-1 mt-1">
                         <div className="flex items-center justify-between w-full">

src/components/dashboard/ResumeDatabase.astro

@@ -0,0 +1,187 @@
+---
+import ResumeList from "./ResumeDatabase/ResumeList";
+import ResumeFilters from "./ResumeDatabase/ResumeFilters";
+import ResumeSearch from "./ResumeDatabase/ResumeSearch";
+import ResumeDetail from "./ResumeDatabase/ResumeDetail";
+---
+
+<div class="space-y-6">
+    <div
+        class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+    >
+        <div>
+            <h2 class="text-2xl font-bold">Resume Database</h2>
+            <p class="text-base-content/70">
+                Search and filter student resumes for recruitment opportunities
+            </p>
+        </div>
+        <div class="flex items-center gap-2">
+            <button id="refreshResumesBtn" class="btn btn-sm btn-outline">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="lucide lucide-refresh-cw"
+                >
+                    <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+                    ></path>
+                    <path d="M21 3v5h-5"></path>
+                    <path
+                        d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+                    ></path>
+                    <path d="M3 21v-5h5"></path>
+                </svg>
+                <span>Refresh</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Resume Database Interface -->
+    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <!-- Filters Panel -->
+        <div class="lg:col-span-1">
+            <div class="card bg-base-100 shadow-md">
+                <div class="card-body">
+                    <h3 class="card-title text-lg">Filters</h3>
+                    <ResumeFilters client:load />
+                </div>
+            </div>
+        </div>
+
+        <!-- Resume List and Detail View -->
+        <div class="lg:col-span-3 space-y-6">
+            <!-- Search Bar -->
+            <div class="card bg-base-100 shadow-md">
+                <div class="card-body">
+                    <ResumeSearch client:load />
+                </div>
+            </div>
+
+            <!-- Resume List -->
+            <div class="card bg-base-100 shadow-md">
+                <div class="card-body">
+                    <h3 class="card-title text-lg">Student Resumes</h3>
+                    <ResumeList client:load />
+                </div>
+            </div>
+
+            <!-- Resume Detail View (initially hidden, shown when a resume is selected) -->
+            <div
+                id="resumeDetailContainer"
+                class="card bg-base-100 shadow-md hidden"
+            >
+                <div class="card-body">
+                    <div class="flex justify-between items-center">
+                        <h3 class="card-title text-lg">Resume Details</h3>
+                        <button
+                            id="closeResumeDetail"
+                            class="btn btn-sm btn-ghost"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                class="lucide lucide-x"
+                            >
+                                <path d="M18 6 6 18"></path>
+                                <path d="m6 6 12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <ResumeDetail client:load />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    import { Authentication } from "../../scripts/pocketbase/Authentication";
+    import { Get } from "../../scripts/pocketbase/Get";
+    import { Realtime } from "../../scripts/pocketbase/Realtime";
+    import { Collections } from "../../schemas/pocketbase/schema";
+
+    // Initialize services
+    const auth = Authentication.getInstance();
+    const get = Get.getInstance();
+    const realtime = Realtime.getInstance();
+
+    // Initialize the resume database
+    async function initResumeDatabase() {
+        if (!auth.isAuthenticated()) {
+            console.error("User not authenticated");
+            return;
+        }
+
+        try {
+            // Set up event listeners
+            document
+                .getElementById("refreshResumesBtn")
+                ?.addEventListener("click", () => {
+                    // Dispatch custom event to notify components to refresh
+                    window.dispatchEvent(
+                        new CustomEvent("resumeDatabaseRefresh")
+                    );
+                });
+
+            // Close resume detail view
+            document
+                .getElementById("closeResumeDetail")
+                ?.addEventListener("click", () => {
+                    document
+                        .getElementById("resumeDetailContainer")
+                        ?.classList.add("hidden");
+                });
+
+            // Set up realtime updates
+            setupRealtimeUpdates();
+        } catch (error) {
+            console.error("Error initializing resume database:", error);
+        }
+    }
+
+    // Set up realtime updates
+    function setupRealtimeUpdates() {
+        // Subscribe to users collection for resume updates
+        realtime.subscribeToCollection(Collections.USERS, (data) => {
+            console.log("User data updated:", data);
+            // Dispatch custom event to notify components to refresh
+            window.dispatchEvent(new CustomEvent("resumeDatabaseRefresh"));
+        });
+    }
+
+    // Initialize when document is ready
+    document.addEventListener("DOMContentLoaded", initResumeDatabase);
+
+    // Custom event listener for resume selection
+    window.addEventListener("resumeSelected", (e) => {
+        const customEvent = e as CustomEvent;
+        const resumeId = customEvent.detail.resumeId;
+
+        if (resumeId) {
+            // Show the resume detail container
+            document
+                .getElementById("resumeDetailContainer")
+                ?.classList.remove("hidden");
+
+            // Dispatch event to the ResumeDetail component
+            window.dispatchEvent(
+                new CustomEvent("loadResumeDetail", {
+                    detail: { resumeId },
+                })
+            );
+        }
+    });
+</script>

src/components/dashboard/ResumeDatabase/ResumeDetail.tsx

@@ -0,0 +1,194 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { User } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+interface ResumeUser {
+    id: string;
+    name: string;
+    email: string;
+    major?: string;
+    graduation_year?: number;
+    resume?: string;
+    avatar?: string;
+}
+
+function getResumeUrl(user: ResumeUser): string | undefined {
+    if (!user.resume) return undefined;
+    return `https://pocketbase.ieeeucsd.org/api/files/users/${user.id}/${user.resume}`;
+}
+
+export default function ResumeDetail() {
+    const [user, setUser] = useState<ResumeUser | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        // Listen for resume selection
+        const handleResumeSelection = (event: CustomEvent) => {
+            const { resumeId } = event.detail;
+            if (resumeId) {
+                loadResumeDetails(resumeId);
+            }
+        };
+
+        window.addEventListener('loadResumeDetail', handleResumeSelection as EventListener);
+
+        return () => {
+            window.removeEventListener('loadResumeDetail', handleResumeSelection as EventListener);
+        };
+    }, []);
+
+    const loadResumeDetails = async (userId: string) => {
+        try {
+            setLoading(true);
+            setError(null);
+
+            // Get user details
+            const user = await get.getOne<User>(Collections.USERS, userId);
+
+            if (!user || !user.resume) {
+                setError('Resume not found');
+                setUser(null);
+                return;
+            }
+
+            // Map to our simplified format
+            setUser({
+                id: user.id,
+                name: user.name,
+                email: user.email,
+                major: user.major,
+                graduation_year: user.graduation_year,
+                resume: user.resume,
+                avatar: user.avatar
+            });
+        } catch (err) {
+            console.error('Error loading resume details:', err);
+            setError('Failed to load resume details');
+            setUser(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center py-10">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="alert alert-error">
+                <div className="flex-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                    </svg>
+                    <label>{error}</label>
+                </div>
+            </div>
+        );
+    }
+
+    if (!user) {
+        return (
+            <div className="text-center py-10">
+                <p className="text-base-content/70">Select a resume to view details</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Student Information */}
+            <div className="flex flex-col md:flex-row gap-6">
+                <div className="flex-shrink-0">
+                    <div className="avatar">
+                        <div className="w-24 h-24 rounded-xl">
+                            {user.avatar ? (
+                                <img src={user.avatar} alt={user.name} />
+                            ) : (
+                                <div className="bg-primary text-primary-content flex items-center justify-center w-full h-full">
+                                    <span className="text-2xl font-bold">{user.name.charAt(0)}</span>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex-grow">
+                    <h3 className="text-xl font-bold">{user.name}</h3>
+                    <p className="text-base-content/70">{user.email}</p>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                        <div>
+                            <h4 className="text-sm font-semibold text-base-content/50">Major</h4>
+                            <p>{user.major || 'Not specified'}</p>
+                        </div>
+                        <div>
+                            <h4 className="text-sm font-semibold text-base-content/50">Graduation Year</h4>
+                            <p>{user.graduation_year || 'Not specified'}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Resume Preview */}
+            <div className="border border-base-300 rounded-lg overflow-hidden">
+                <div className="bg-base-200 px-4 py-2 border-b border-base-300 flex justify-between items-center">
+                    <h3 className="font-medium">Resume</h3>
+                    <a
+                        href={getResumeUrl(user)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="btn btn-sm btn-primary"
+                    >
+                        Download
+                    </a>
+                </div>
+                <div className="p-4 bg-base-100">
+                    {user.resume && user.resume.toLowerCase().endsWith('.pdf') ? (
+                        <div className="aspect-[8.5/11] w-full">
+                            <iframe
+                                src={`${getResumeUrl(user)}#toolbar=0&navpanes=0`}
+                                className="w-full h-full border-0"
+                                title={`${user.name}'s Resume`}
+                            />
+                        </div>
+                    ) : user.resume && user.resume.toLowerCase().endsWith('.docx') ? (
+                        <div className="aspect-[8.5/11] w-full">
+                            <iframe
+                                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(getResumeUrl(user) ?? '')}`}
+                                className="w-full h-full border-0"
+                                title={`${user.name}'s Resume`}
+                            />
+                        </div>
+                    ) : (
+                        <div className="text-center py-10">
+                            <p className="text-base-content/70">
+                                Resume preview not available. Click the download button to view the resume.
+                            </p>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Contact Button */}
+            <div className="flex justify-end">
+                <a
+                    href={`mailto:${user.email}?subject=Regarding%20Your%20Resume&body=Hello%20${user.name},%0A%0AI%20found%20your%20resume%20in%20the%20IEEE%20UCSD%20database%20and%20would%20like%20to%20discuss%20potential%20opportunities.%0A%0ABest%20regards,`}
+                    className="btn btn-secondary"
+                >
+                    Contact Student
+                </a>
+            </div>
+        </div>
+    );
+}

src/components/dashboard/ResumeDatabase/ResumeFilters.tsx

@@ -0,0 +1,172 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { User } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+export default function ResumeFilters() {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [majors, setMajors] = useState<string[]>([]);
+    const [graduationYears, setGraduationYears] = useState<number[]>([]);
+
+    // Filter state
+    const [selectedMajor, setSelectedMajor] = useState<string>('all');
+    const [selectedGraduationYear, setSelectedGraduationYear] = useState<string>('all');
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        loadFilterOptions();
+
+        // Listen for refresh requests
+        const handleRefresh = () => {
+            loadFilterOptions();
+        };
+
+        window.addEventListener('resumeDatabaseRefresh', handleRefresh);
+
+        return () => {
+            window.removeEventListener('resumeDatabaseRefresh', handleRefresh);
+        };
+    }, []);
+
+    // When filters change, dispatch event to notify parent
+    useEffect(() => {
+        dispatchFilterChange();
+    }, [selectedMajor, selectedGraduationYear]);
+
+    const loadFilterOptions = async () => {
+        try {
+            setLoading(true);
+
+            // Get all users with resumes
+            const filter = "resume != null && resume != ''";
+            const users = await get.getAll<User>(Collections.USERS, filter);
+
+            // Extract unique majors
+            const uniqueMajors = new Set<string>();
+            users.forEach(user => {
+                if (user.major) {
+                    uniqueMajors.add(user.major);
+                }
+            });
+
+            // Extract unique graduation years
+            const uniqueGradYears = new Set<number>();
+            users.forEach(user => {
+                if (user.graduation_year) {
+                    uniqueGradYears.add(user.graduation_year);
+                }
+            });
+
+            // Sort majors alphabetically
+            const sortedMajors = Array.from(uniqueMajors).sort();
+
+            // Sort graduation years in ascending order
+            const sortedGradYears = Array.from(uniqueGradYears).sort((a, b) => a - b);
+
+            setMajors(sortedMajors);
+            setGraduationYears(sortedGradYears);
+        } catch (err) {
+            console.error('Error loading filter options:', err);
+            setError('Failed to load filter options');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const dispatchFilterChange = () => {
+        window.dispatchEvent(
+            new CustomEvent('resumeFilterChange', {
+                detail: {
+                    major: selectedMajor,
+                    graduationYear: selectedGraduationYear
+                }
+            })
+        );
+    };
+
+    const handleMajorChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setSelectedMajor(e.target.value);
+    };
+
+    const handleGraduationYearChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setSelectedGraduationYear(e.target.value);
+    };
+
+    const handleResetFilters = () => {
+        setSelectedMajor('all');
+        setSelectedGraduationYear('all');
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center py-4">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="alert alert-error">
+                <div className="flex-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                    </svg>
+                    <label>{error}</label>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            {/* Major Filter */}
+            <div className="form-control">
+                <label className="label">
+                    <span className="label-text">Major</span>
+                </label>
+                <select
+                    className="select select-bordered w-full"
+                    value={selectedMajor}
+                    onChange={handleMajorChange}
+                >
+                    <option value="all">All Majors</option>
+                    {majors.map(major => (
+                        <option key={major} value={major}>{major}</option>
+                    ))}
+                </select>
+            </div>
+
+            {/* Graduation Year Filter */}
+            <div className="form-control">
+                <label className="label">
+                    <span className="label-text">Graduation Year</span>
+                </label>
+                <select
+                    className="select select-bordered w-full"
+                    value={selectedGraduationYear}
+                    onChange={handleGraduationYearChange}
+                >
+                    <option value="all">All Years</option>
+                    {graduationYears.map(year => (
+                        <option key={year} value={year}>{year}</option>
+                    ))}
+                </select>
+            </div>
+
+            {/* Reset Filters Button */}
+            <div className="form-control mt-6">
+                <button
+                    className="btn btn-outline btn-sm"
+                    onClick={handleResetFilters}
+                >
+                    Reset Filters
+                </button>
+            </div>
+        </div>
+    );
+}

src/components/dashboard/ResumeDatabase/ResumeList.tsx

@@ -0,0 +1,254 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { User } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+interface ResumeUser {
+    id: string;
+    name: string;
+    major?: string;
+    graduation_year?: number;
+    resume?: string;
+    avatar?: string;
+}
+
+export default function ResumeList() {
+    const [users, setUsers] = useState<ResumeUser[]>([]);
+    const [filteredUsers, setFilteredUsers] = useState<ResumeUser[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const usersPerPage = 10;
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        loadResumes();
+
+        // Listen for filter changes
+        const handleFilterChange = (event: CustomEvent) => {
+            applyFilters(event.detail);
+        };
+
+        // Listen for search changes
+        const handleSearchChange = (event: CustomEvent) => {
+            applySearch(event.detail.searchQuery);
+        };
+
+        // Listen for refresh requests
+        const handleRefresh = () => {
+            loadResumes();
+        };
+
+        window.addEventListener('resumeFilterChange', handleFilterChange as EventListener);
+        window.addEventListener('resumeSearchChange', handleSearchChange as EventListener);
+        window.addEventListener('resumeDatabaseRefresh', handleRefresh);
+
+        return () => {
+            window.removeEventListener('resumeFilterChange', handleFilterChange as EventListener);
+            window.removeEventListener('resumeSearchChange', handleSearchChange as EventListener);
+            window.removeEventListener('resumeDatabaseRefresh', handleRefresh);
+        };
+    }, []);
+
+    const loadResumes = async () => {
+        try {
+            setLoading(true);
+
+            // Get all users with resumes
+            const filter = "resume != null && resume != ''";
+            const users = await get.getAll<User>(Collections.USERS, filter);
+
+            // Map to our simplified format
+            const resumeUsers = users
+                .filter(user => user.resume) // Ensure resume exists
+                .map(user => ({
+                    id: user.id,
+                    name: user.name,
+                    major: user.major,
+                    graduation_year: user.graduation_year,
+                    resume: user.resume,
+                    avatar: user.avatar
+                }));
+
+            setUsers(resumeUsers);
+            setFilteredUsers(resumeUsers);
+            setCurrentPage(1);
+        } catch (err) {
+            console.error('Error loading resumes:', err);
+            setError('Failed to load resume data');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const applyFilters = (filters: any) => {
+        let filtered = [...users];
+
+        // Apply major filter
+        if (filters.major && filters.major !== 'all') {
+            filtered = filtered.filter(user => {
+                if (!user.major) return false;
+                return user.major.toLowerCase().includes(filters.major.toLowerCase());
+            });
+        }
+
+        // Apply graduation year filter
+        if (filters.graduationYear && filters.graduationYear !== 'all') {
+            const year = parseInt(filters.graduationYear);
+            filtered = filtered.filter(user => user.graduation_year === year);
+        }
+
+        setFilteredUsers(filtered);
+        setCurrentPage(1);
+    };
+
+    const applySearch = (searchQuery: string) => {
+        if (!searchQuery.trim()) {
+            setFilteredUsers(users);
+            setCurrentPage(1);
+            return;
+        }
+
+        const query = searchQuery.toLowerCase();
+        const filtered = users.filter(user =>
+            user.name.toLowerCase().includes(query) ||
+            (user.major && user.major.toLowerCase().includes(query))
+        );
+
+        setFilteredUsers(filtered);
+        setCurrentPage(1);
+    };
+
+    const handleResumeClick = (userId: string) => {
+        // Dispatch event to notify parent component
+        window.dispatchEvent(
+            new CustomEvent('resumeSelected', {
+                detail: { resumeId: userId }
+            })
+        );
+    };
+
+    // Get current users for pagination
+    const indexOfLastUser = currentPage * usersPerPage;
+    const indexOfFirstUser = indexOfLastUser - usersPerPage;
+    const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
+    const totalPages = Math.ceil(filteredUsers.length / usersPerPage);
+
+    const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center py-10">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="alert alert-error">
+                <div className="flex-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                    </svg>
+                    <label>{error}</label>
+                </div>
+            </div>
+        );
+    }
+
+    if (filteredUsers.length === 0) {
+        return (
+            <div className="text-center py-10">
+                <p className="text-base-content/70">No resumes found matching your criteria</p>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <div className="overflow-x-auto">
+                <table className="table w-full">
+                    <thead>
+                        <tr>
+                            <th>Student</th>
+                            <th>Major</th>
+                            <th>Graduation Year</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {currentUsers.map(user => (
+                            <tr key={user.id} className="hover">
+                                <td>
+                                    <div className="flex items-center space-x-3">
+                                        <div className="avatar">
+                                            <div className="mask mask-squircle w-12 h-12">
+                                                {user.avatar ? (
+                                                    <img src={user.avatar} alt={user.name} />
+                                                ) : (
+                                                    <div className="bg-primary text-primary-content flex items-center justify-center w-full h-full">
+                                                        <span className="text-lg font-bold">{user.name.charAt(0)}</span>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="font-bold">{user.name}</div>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td>{user.major || 'Not specified'}</td>
+                                <td>{user.graduation_year || 'Not specified'}</td>
+                                <td>
+                                    <button
+                                        className="btn btn-sm btn-primary"
+                                        onClick={() => handleResumeClick(user.id)}
+                                    >
+                                        View Resume
+                                    </button>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+                <div className="flex justify-center mt-6">
+                    <div className="btn-group">
+                        <button
+                            className="btn btn-sm"
+                            onClick={() => paginate(Math.max(1, currentPage - 1))}
+                            disabled={currentPage === 1}
+                        >
+                            «
+                        </button>
+
+                        {Array.from({ length: totalPages }, (_, i) => (
+                            <button
+                                key={i + 1}
+                                className={`btn btn-sm ${currentPage === i + 1 ? 'btn-active' : ''}`}
+                                onClick={() => paginate(i + 1)}
+                            >
+                                {i + 1}
+                            </button>
+                        ))}
+
+                        <button
+                            className="btn btn-sm"
+                            onClick={() => paginate(Math.min(totalPages, currentPage + 1))}
+                            disabled={currentPage === totalPages}
+                        >
+                            »
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/components/dashboard/ResumeDatabase/ResumeSearch.tsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+
+export default function ResumeSearch() {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [debouncedQuery, setDebouncedQuery] = useState('');
+
+    // Debounce search input to avoid too many updates
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedQuery(searchQuery);
+        }, 300);
+
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [searchQuery]);
+
+    // When debounced query changes, dispatch event to notify parent
+    useEffect(() => {
+        dispatchSearchChange();
+    }, [debouncedQuery]);
+
+    const dispatchSearchChange = () => {
+        window.dispatchEvent(
+            new CustomEvent('resumeSearchChange', {
+                detail: {
+                    searchQuery: debouncedQuery
+                }
+            })
+        );
+    };
+
+    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchQuery(e.target.value);
+    };
+
+    const handleClearSearch = () => {
+        setSearchQuery('');
+    };
+
+    return (
+        <div className="relative">
+            <div className="flex items-center">
+                <div className="relative flex-grow">
+                    <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                        <svg className="w-5 h-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                    </div>
+                    <input
+                        type="text"
+                        placeholder="Search by name or major..."
+                        className="w-full pl-10 pr-10 py-2 border border-gray-300 dark:border-gray-700 rounded-lg 
+            bg-white/90 dark:bg-gray-800/90 text-gray-700 dark:text-gray-200 focus:outline-none 
+            focus:ring-2 focus:ring-primary focus:border-transparent"
+                        value={searchQuery}
+                        onChange={handleSearchChange}
+                    />
+                    {searchQuery && (
+                        <button
+                            className="absolute inset-y-0 right-0 flex items-center pr-3"
+                            onClick={handleClearSearch}
+                        >
+                            <svg className="w-5 h-5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/dashboard/SettingsSection.astro

@@ -4,6 +4,23 @@ import UserProfileSettings from "./SettingsSection/UserProfileSettings";
 import AccountSecuritySettings from "./SettingsSection/AccountSecuritySettings";
 import NotificationSettings from "./SettingsSection/NotificationSettings";
 import DisplaySettings from "./SettingsSection/DisplaySettings";
+import ResumeSettings from "./SettingsSection/ResumeSettings";
+import ThemeToggle from "./universal/ThemeToggle";
+
+// Import environment variables
+const logtoAppId = import.meta.env.LOGTO_APP_ID;
+const logtoAppSecret = import.meta.env.LOGTO_APP_SECRET;
+const logtoEndpoint = import.meta.env.LOGTO_ENDPOINT;
+const logtoTokenEndpoint = import.meta.env.LOGTO_TOKEN_ENDPOINT;
+const logtoApiEndpoint = import.meta.env.LOGTO_API_ENDPOINT;
+
+// Define fallback values if environment variables are not set
+const safeLogtoAppId = logtoAppId || "missing_app_id";
+const safeLogtoAppSecret = logtoAppSecret || "missing_app_secret";
+const safeLogtoEndpoint = logtoEndpoint || "https://auth.ieeeucsd.org";
+const safeLogtoTokenEndpoint =
+    logtoTokenEndpoint || "https://auth.ieeeucsd.org/oidc/token";
+const safeLogtoApiEndpoint = logtoApiEndpoint || "";
 ---
 
 <div id="settings-section" class="">
@@ -12,13 +29,69 @@ import DisplaySettings from "./SettingsSection/DisplaySettings";
         <p class="opacity-70">Manage your account settings and preferences</p>
     </div>
 
+    <!-- Debug Environment Variables (Only visible in development) -->
+    {
+        import.meta.env.DEV && (
+            <div class="card bg-card shadow-xl border border-warning mb-6 p-4">
+                <h3 class="text-lg font-bold text-warning">
+                    Debug Environment Variables
+                </h3>
+                <p class="text-sm mb-2">
+                    This section is only visible in development mode
+                </p>
+                <div class="overflow-x-auto">
+                    <table class="table-auto w-full text-xs">
+                        <thead>
+                            <tr>
+                                <th>Variable</th>
+                                <th>Value</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>LOGTO_APP_ID</td>
+                                <td>{logtoAppId ? "********" : "Not set"}</td>
+                                <td>{logtoAppId ? "✅" : "❌"}</td>
+                            </tr>
+                            <tr>
+                                <td>LOGTO_APP_SECRET</td>
+                                <td>
+                                    {logtoAppSecret ? "********" : "Not set"}
+                                </td>
+                                <td>{logtoAppSecret ? "✅" : "❌"}</td>
+                            </tr>
+                            <tr>
+                                <td>LOGTO_ENDPOINT</td>
+                                <td>{logtoEndpoint || "Not set"}</td>
+                                <td>{logtoEndpoint ? "✅" : "❌"}</td>
+                            </tr>
+                            <tr>
+                                <td>LOGTO_TOKEN_ENDPOINT</td>
+                                <td>{logtoTokenEndpoint || "Not set"}</td>
+                                <td>{logtoTokenEndpoint ? "✅" : "❌"}</td>
+                            </tr>
+                            <tr>
+                                <td>LOGTO_API_ENDPOINT</td>
+                                <td>{logtoApiEndpoint || "Not set"}</td>
+                                <td>{logtoApiEndpoint ? "✅" : "❌"}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        )
+    }
+
     <!-- Profile Settings Card -->
     <div
-        class="card bg-base-100 shadow-xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
+        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
     >
         <div class="card-body">
             <h3 class="card-title flex items-center gap-3">
-                <div class="badge badge-primary p-3">
+                <div
+                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
+                >
                     <Icon name="heroicons:user" class="h-5 w-5" />
                 </div>
                 Profile Information
@@ -26,18 +99,46 @@ import DisplaySettings from "./SettingsSection/DisplaySettings";
             <p class="text-sm opacity-70 mb-4">
                 Update your personal information and profile details
             </p>
-            <div class="divider"></div>
-            <UserProfileSettings client:load />
+            <div class="h-px w-full bg-border my-4"></div>
+            <UserProfileSettings
+                client:load
+                logtoApiEndpoint={logtoApiEndpoint}
+            />
+        </div>
+    </div>
+
+    <!-- Resume Settings Card -->
+    <div
+        id="resume-management-section"
+        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
+    >
+        <div class="card-body">
+            <h3 class="card-title flex items-center gap-3">
+                <div
+                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
+                >
+                    <Icon name="heroicons:document-text" class="h-5 w-5" />
+                </div>
+                Resume Management
+            </h3>
+            <p class="text-sm opacity-70 mb-4">
+                Upload and manage your resume for recruiters and career
+                opportunities
+            </p>
+            <div class="h-px w-full bg-border my-4"></div>
+            <ResumeSettings client:load />
         </div>
     </div>
 
     <!-- Account Security Settings Card -->
     <div
-        class="card bg-base-100 shadow-xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
+        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
     >
         <div class="card-body">
             <h3 class="card-title flex items-center gap-3">
-                <div class="badge badge-primary p-3">
+                <div
+                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
+                >
                     <Icon name="heroicons:lock-closed" class="h-5 w-5" />
                 </div>
                 Account Security
@@ -45,18 +146,25 @@ import DisplaySettings from "./SettingsSection/DisplaySettings";
             <p class="text-sm opacity-70 mb-4">
                 Manage your account security settings and authentication options
             </p>
-            <div class="divider"></div>
-            <AccountSecuritySettings client:load />
+            <div class="h-px w-full bg-border my-4"></div>
+            <AccountSecuritySettings
+                client:load
+                logtoAppId={safeLogtoAppId}
+                logtoAppSecret={safeLogtoAppSecret}
+                logtoEndpoint={safeLogtoEndpoint}
+                logtoTokenEndpoint={safeLogtoTokenEndpoint}
+                logtoApiEndpoint={safeLogtoApiEndpoint}
+            />
         </div>
     </div>
 
     <!-- Notification Settings Card -->
     <div
-        class="card bg-base-100 shadow-xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6 relative group"
+        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6 relative group"
     >
         <!-- Coming Soon Overlay -->
         <div
-            class="absolute inset-0 bg-base-300 bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-xl"
+            class="absolute inset-0 bg-muted bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-xl"
         >
             <div class="text-center">
                 <h4 class="text-xl font-bold">Coming Soon</h4>
@@ -68,7 +176,9 @@ import DisplaySettings from "./SettingsSection/DisplaySettings";
 
         <div class="card-body">
             <h3 class="card-title flex items-center gap-3">
-                <div class="badge badge-primary p-3">
+                <div
+                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
+                >
                     <Icon name="heroicons:bell" class="h-5 w-5" />
                 </div>
                 Notification Preferences
@@ -76,7 +186,7 @@ import DisplaySettings from "./SettingsSection/DisplaySettings";
             <p class="text-sm opacity-70 mb-4">
                 Customize how and when you receive notifications
             </p>
-            <div class="divider"></div>
+            <div class="h-px w-full bg-border my-4"></div>
             <NotificationSettings client:load />
         </div>
     </div>
@@ -96,6 +206,29 @@ import DisplaySettings from "./SettingsSection/DisplaySettings";
                 Customize your dashboard appearance and display preferences
             </p>
             <div class="divider"></div>
+
+            <div class="alert alert-warning mb-4">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="stroke-current shrink-0 h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    ><path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    ></path></svg
+                >
+                <div>
+                    <h3 class="font-bold">Light Mode Experimental</h3>
+                    <p class="text-sm">
+                        Light mode is still experimental and some UI elements
+                        may not display correctly.
+                    </p>
+                </div>
+            </div>
+
             <DisplaySettings client:load />
         </div>
     </div>

src/components/dashboard/SettingsSection/AccountSecuritySettings.tsx

@@ -2,8 +2,23 @@ import { useState, useEffect } from 'react';
 import { Authentication } from '../../../scripts/pocketbase/Authentication';
 import { SendLog } from '../../../scripts/pocketbase/SendLog';
 import { toast } from 'react-hot-toast';
+import PasswordChangeSettings from './PasswordChangeSettings';
 
-export default function AccountSecuritySettings() {
+interface AccountSecuritySettingsProps {
+    logtoAppId: string;
+    logtoAppSecret: string;
+    logtoEndpoint: string;
+    logtoTokenEndpoint: string;
+    logtoApiEndpoint: string;
+}
+
+export default function AccountSecuritySettings({
+    logtoAppId,
+    logtoAppSecret,
+    logtoEndpoint,
+    logtoTokenEndpoint,
+    logtoApiEndpoint
+}: AccountSecuritySettingsProps) {
     const auth = Authentication.getInstance();
     const logger = SendLog.getInstance();
     const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -44,16 +59,7 @@ export default function AccountSecuritySettings() {
         checkAuth();
     }, []);
 
-    const handleLogout = async () => {
-        try {
-            await logger.send('logout', 'auth', 'User manually logged out from settings page');
-            await auth.logout();
-            window.location.href = '/';
-        } catch (error) {
-            console.error('Error during logout:', error);
-            toast.error('Failed to log out. Please try again.');
-        }
-    };
+    // No logout functions needed here as logout is handled in the dashboard menu
 
     const detectBrowser = (userAgent: string): string => {
         if (userAgent.indexOf('Chrome') > -1) return 'Chrome';
@@ -126,6 +132,30 @@ export default function AccountSecuritySettings() {
                     </div>
                 </div>
 
+                {/* Password Change Section */}
+                <div>
+                    <h4 className="font-semibold text-lg mb-2">Change Password</h4>
+                    <p className="text-sm opacity-70 mb-4">
+                        Update your account password. For security reasons, you'll need to provide your current password.
+                    </p>
+                    <div className="rounded-md bg-yellow-600 p-4 mb-4">
+                        <div className="flex">
+                            <div className="ml-3">
+                                <p className="text-sm text-white">
+                                    Please note: This will only update your password for the IEEE UCSD SSO. This will not update the password for your @ieeeucsd.org mail account.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <PasswordChangeSettings
+                        logtoAppId={logtoAppId}
+                        logtoAppSecret={logtoAppSecret}
+                        logtoEndpoint={logtoEndpoint}
+                        logtoTokenEndpoint={logtoTokenEndpoint}
+                        logtoApiEndpoint={logtoApiEndpoint}
+                    />
+                </div>
+
                 {/* Authentication Options */}
                 <div>
                     <h4 className="font-semibold text-lg mb-2">Authentication Options</h4>
@@ -133,10 +163,6 @@ export default function AccountSecuritySettings() {
                         IEEE UCSD uses Single Sign-On (SSO) for authentication.
                         Password management is handled through your IEEEUCSD account.
                     </p>
-
-                    <p className="text-sm text-info p-3 bg-info bg-opacity-10 rounded-lg">
-                        To change your password, please use the "Forgot Password" option on the login page.
-                    </p>
                 </div>
 
                 {/* Account Actions */}
@@ -144,17 +170,13 @@ export default function AccountSecuritySettings() {
                     <h4 className="font-semibold text-lg mb-2">Account Actions</h4>
 
                     <div className="space-y-4">
-                        <button
-                            onClick={handleLogout}
-                            className="btn btn-error btn-outline w-full md:w-auto"
-                        >
-                            Sign Out
-                        </button>
-
                         <p className="text-sm text-warning p-3 bg-warning bg-opacity-10 rounded-lg">
                             If you need to delete your account or have other account-related issues,
                             please contact an IEEE UCSD administrator.
                         </p>
+                        <p className="text-sm text-info p-3 bg-info bg-opacity-10 rounded-lg">
+                            To log out of your account, use the Logout option in the dashboard menu.
+                        </p>
                     </div>
                 </div>
             </div>

src/components/dashboard/SettingsSection/DisplaySettings.tsx

@@ -3,59 +3,44 @@ import { Authentication } from '../../../scripts/pocketbase/Authentication';
 import { Update } from '../../../scripts/pocketbase/Update';
 import { Collections } from '../../../schemas/pocketbase/schema';
 import { toast } from 'react-hot-toast';
-
-// Default display preferences
-const DEFAULT_DISPLAY_PREFERENCES = {
-    theme: 'dark',
-    fontSize: 'medium'
-};
-
-// Default accessibility settings
-const DEFAULT_ACCESSIBILITY_SETTINGS = {
-    colorBlindMode: false,
-    reducedMotion: false
-};
+import { ThemeService, DEFAULT_THEME_SETTINGS, type ThemeSettings } from '../../../scripts/database/ThemeService';
 
 export default function DisplaySettings() {
     const auth = Authentication.getInstance();
     const update = Update.getInstance();
-    const [theme, setTheme] = useState(DEFAULT_DISPLAY_PREFERENCES.theme);
-    const [fontSize, setFontSize] = useState(DEFAULT_DISPLAY_PREFERENCES.fontSize);
-    const [colorBlindMode, setColorBlindMode] = useState(DEFAULT_ACCESSIBILITY_SETTINGS.colorBlindMode);
-    const [reducedMotion, setReducedMotion] = useState(DEFAULT_ACCESSIBILITY_SETTINGS.reducedMotion);
+    const themeService = ThemeService.getInstance();
+
+    // Current applied settings
+    const [currentSettings, setCurrentSettings] = useState<ThemeSettings | null>(null);
+
+    // Form state (unsaved changes)
+    const [theme, setTheme] = useState<'light' | 'dark'>(DEFAULT_THEME_SETTINGS.theme);
+    const [fontSize, setFontSize] = useState(DEFAULT_THEME_SETTINGS.fontSize);
+    const [colorBlindMode, setColorBlindMode] = useState(DEFAULT_THEME_SETTINGS.colorBlindMode);
+    const [reducedMotion, setReducedMotion] = useState(DEFAULT_THEME_SETTINGS.reducedMotion);
     const [saving, setSaving] = useState(false);
 
+    // Track if form has unsaved changes
+    const [hasChanges, setHasChanges] = useState(false);
+
     // Load saved preferences on component mount
     useEffect(() => {
         const loadPreferences = async () => {
             try {
-                // First check localStorage for immediate UI updates
-                const savedTheme = localStorage.getItem('theme') || DEFAULT_DISPLAY_PREFERENCES.theme;
-                // Ensure theme is either light or dark
-                const validTheme = ['light', 'dark'].includes(savedTheme) ? savedTheme : DEFAULT_DISPLAY_PREFERENCES.theme;
-                const savedFontSize = localStorage.getItem('fontSize') || DEFAULT_DISPLAY_PREFERENCES.fontSize;
-                const savedColorBlindMode = localStorage.getItem('colorBlindMode') === 'true';
-                const savedReducedMotion = localStorage.getItem('reducedMotion') === 'true';
+                // First load theme settings from IndexedDB
+                const themeSettings = await themeService.getThemeSettings();
 
-                setTheme(validTheme);
-                setFontSize(savedFontSize);
-                setColorBlindMode(savedColorBlindMode);
-                setReducedMotion(savedReducedMotion);
+                // Store current settings
+                setCurrentSettings(themeSettings);
 
-                // Apply theme to document
-                document.documentElement.setAttribute('data-theme', validTheme);
+                // Set form state from theme settings
+                setTheme(themeSettings.theme);
+                setFontSize(themeSettings.fontSize);
+                setColorBlindMode(themeSettings.colorBlindMode);
+                setReducedMotion(themeSettings.reducedMotion);
 
-                // Apply font size
-                applyFontSize(savedFontSize);
-
-                // Apply accessibility settings
-                if (savedColorBlindMode) {
-                    document.documentElement.classList.add('color-blind-mode');
-                }
-
-                if (savedReducedMotion) {
-                    document.documentElement.classList.add('reduced-motion');
-                }
+                // Reset changes flag
+                setHasChanges(false);
 
                 // Then check if user has saved preferences in their profile
                 const user = auth.getCurrentUser();
@@ -68,20 +53,20 @@ export default function DisplaySettings() {
                         try {
                             const userPrefs = JSON.parse(user.display_preferences);
 
-                            // Only update if values exist and are different from localStorage
-                            if (userPrefs.theme && ['light', 'dark'].includes(userPrefs.theme) && userPrefs.theme !== validTheme) {
-                                setTheme(userPrefs.theme);
-                                localStorage.setItem('theme', userPrefs.theme);
-                                document.documentElement.setAttribute('data-theme', userPrefs.theme);
+                            // Only update if values exist and are different from IndexedDB
+                            if (userPrefs.theme && ['light', 'dark'].includes(userPrefs.theme) && userPrefs.theme !== themeSettings.theme) {
+                                setTheme(userPrefs.theme as 'light' | 'dark');
+                                // Don't update theme service yet, wait for save
+                                setHasChanges(true);
                             } else if (!['light', 'dark'].includes(userPrefs.theme)) {
                                 // If theme is not valid, mark for update
                                 needsDisplayPrefsUpdate = true;
                             }
 
-                            if (userPrefs.fontSize && userPrefs.fontSize !== savedFontSize) {
+                            if (userPrefs.fontSize && userPrefs.fontSize !== themeSettings.fontSize) {
                                 setFontSize(userPrefs.fontSize);
-                                localStorage.setItem('fontSize', userPrefs.fontSize);
-                                applyFontSize(userPrefs.fontSize);
+                                // Don't update theme service yet, wait for save
+                                setHasChanges(true);
                             }
                         } catch (e) {
                             console.error('Error parsing display preferences:', e);
@@ -97,27 +82,17 @@ export default function DisplaySettings() {
                             const accessibilityPrefs = JSON.parse(user.accessibility_settings);
 
                             if (typeof accessibilityPrefs.colorBlindMode === 'boolean' &&
-                                accessibilityPrefs.colorBlindMode !== savedColorBlindMode) {
+                                accessibilityPrefs.colorBlindMode !== themeSettings.colorBlindMode) {
                                 setColorBlindMode(accessibilityPrefs.colorBlindMode);
-                                localStorage.setItem('colorBlindMode', accessibilityPrefs.colorBlindMode.toString());
-
-                                if (accessibilityPrefs.colorBlindMode) {
-                                    document.documentElement.classList.add('color-blind-mode');
-                                } else {
-                                    document.documentElement.classList.remove('color-blind-mode');
-                                }
+                                // Don't update theme service yet, wait for save
+                                setHasChanges(true);
                             }
 
                             if (typeof accessibilityPrefs.reducedMotion === 'boolean' &&
-                                accessibilityPrefs.reducedMotion !== savedReducedMotion) {
+                                accessibilityPrefs.reducedMotion !== themeSettings.reducedMotion) {
                                 setReducedMotion(accessibilityPrefs.reducedMotion);
-                                localStorage.setItem('reducedMotion', accessibilityPrefs.reducedMotion.toString());
-
-                                if (accessibilityPrefs.reducedMotion) {
-                                    document.documentElement.classList.add('reduced-motion');
-                                } else {
-                                    document.documentElement.classList.remove('reduced-motion');
-                                }
+                                // Don't update theme service yet, wait for save
+                                setHasChanges(true);
                             }
                         } catch (e) {
                             console.error('Error parsing accessibility settings:', e);
@@ -141,6 +116,23 @@ export default function DisplaySettings() {
         loadPreferences();
     }, []);
 
+    // Check for changes when form values change
+    useEffect(() => {
+        if (!currentSettings) return;
+
+        const hasThemeChanged = theme !== currentSettings.theme;
+        const hasFontSizeChanged = fontSize !== currentSettings.fontSize;
+        const hasColorBlindModeChanged = colorBlindMode !== currentSettings.colorBlindMode;
+        const hasReducedMotionChanged = reducedMotion !== currentSettings.reducedMotion;
+
+        setHasChanges(
+            hasThemeChanged ||
+            hasFontSizeChanged ||
+            hasColorBlindModeChanged ||
+            hasReducedMotionChanged
+        );
+    }, [theme, fontSize, colorBlindMode, reducedMotion, currentSettings]);
+
     // Initialize default settings if not set
     const initializeDefaultSettings = async (userId: string, updateDisplayPrefs: boolean, updateAccessibility: boolean) => {
         try {
@@ -162,91 +154,38 @@ export default function DisplaySettings() {
 
             if (Object.keys(updateData).length > 0) {
                 await update.updateFields(Collections.USERS, userId, updateData);
-                console.log('Initialized default display and accessibility settings');
             }
         } catch (error) {
             console.error('Error initializing default settings:', error);
         }
     };
 
-    // Apply font size to document
-    const applyFontSize = (size: string) => {
-        const htmlElement = document.documentElement;
-
-        // Remove existing font size classes
-        htmlElement.classList.remove('text-sm', 'text-base', 'text-lg', 'text-xl');
-
-        // Add new font size class
-        switch (size) {
-            case 'small':
-                htmlElement.classList.add('text-sm');
-                break;
-            case 'medium':
-                htmlElement.classList.add('text-base');
-                break;
-            case 'large':
-                htmlElement.classList.add('text-lg');
-                break;
-            case 'extra-large':
-                htmlElement.classList.add('text-xl');
-                break;
-        }
-    };
-
     // Handle theme change
     const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const newTheme = e.target.value;
+        const newTheme = e.target.value as 'light' | 'dark';
         setTheme(newTheme);
-
-        // Apply theme to document
-        document.documentElement.setAttribute('data-theme', newTheme);
-
-        // Save to localStorage
-        localStorage.setItem('theme', newTheme);
+        // Changes will be applied on save
     };
 
     // Handle font size change
     const handleFontSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const newSize = e.target.value;
+        const newSize = e.target.value as 'small' | 'medium' | 'large' | 'extra-large';
         setFontSize(newSize);
-
-        // Apply font size
-        applyFontSize(newSize);
-
-        // Save to localStorage
-        localStorage.setItem('fontSize', newSize);
+        // Changes will be applied on save
     };
 
     // Handle color blind mode toggle
     const handleColorBlindModeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const enabled = e.target.checked;
         setColorBlindMode(enabled);
-
-        // Apply to document
-        if (enabled) {
-            document.documentElement.classList.add('color-blind-mode');
-        } else {
-            document.documentElement.classList.remove('color-blind-mode');
-        }
-
-        // Save to localStorage
-        localStorage.setItem('colorBlindMode', enabled.toString());
+        // Changes will be applied on save
     };
 
     // Handle reduced motion toggle
     const handleReducedMotionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const enabled = e.target.checked;
         setReducedMotion(enabled);
-
-        // Apply to document
-        if (enabled) {
-            document.documentElement.classList.add('reduced-motion');
-        } else {
-            document.documentElement.classList.remove('reduced-motion');
-        }
-
-        // Save to localStorage
-        localStorage.setItem('reducedMotion', enabled.toString());
+        // Changes will be applied on save
     };
 
     // Handle form submission
@@ -270,7 +209,17 @@ export default function DisplaySettings() {
                 reducedMotion
             };
 
-            // Update user record
+            // First update IndexedDB with the new settings
+            await themeService.saveThemeSettings({
+                id: "current",
+                theme,
+                fontSize,
+                colorBlindMode,
+                reducedMotion,
+                updatedAt: Date.now()
+            });
+
+            // Then update user record in PocketBase
             await update.updateFields(
                 Collections.USERS,
                 user.id,
@@ -280,6 +229,19 @@ export default function DisplaySettings() {
                 }
             );
 
+            // Update current settings state to match the new settings
+            setCurrentSettings({
+                id: "current",
+                theme,
+                fontSize,
+                colorBlindMode,
+                reducedMotion,
+                updatedAt: Date.now()
+            });
+
+            // Reset changes flag
+            setHasChanges(false);
+
             // Show success message
             toast.success('Display settings saved successfully!');
         } catch (error) {
@@ -367,19 +329,26 @@ export default function DisplaySettings() {
                 </div>
 
                 <p className="text-sm text-info">
-                    These settings are saved to your browser and your IEEE UCSD account. They will be applied whenever you log in.
+                    These settings are saved to your browser using IndexedDB and your IEEE UCSD account. They will be applied whenever you log in.
                 </p>
 
                 <div className="form-control">
-                    <button
-                        type="submit"
-                        className={`btn btn-primary ${saving ? 'loading' : ''}`}
-                        disabled={saving}
-                    >
-                        {saving ? 'Saving...' : 'Save Settings'}
-                    </button>
+                    <div className="flex flex-col gap-2">
+                        {hasChanges && (
+                            <p className="text-sm text-warning">
+                                You have unsaved changes. Click "Save Settings" to apply them.
+                            </p>
+                        )}
+                        <button
+                            type="submit"
+                            className={`btn btn-primary ${saving ? 'loading' : ''}`}
+                            disabled={saving || !hasChanges}
+                        >
+                            {saving ? 'Saving...' : 'Save Settings'}
+                        </button>
+                    </div>
                 </div>
             </form>
         </div>
     );
-} 
+}

src/components/dashboard/SettingsSection/EmailRequestSettings.tsx

@@ -0,0 +1,489 @@
+import { useState, useEffect } from 'react';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+import { Collections, type User } from '../../../schemas/pocketbase/schema';
+import { toast } from 'react-hot-toast';
+
+export default function EmailRequestSettings() {
+    const auth = Authentication.getInstance();
+    const [user, setUser] = useState<User | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [requesting, setRequesting] = useState(false);
+    const [resettingPassword, setResettingPassword] = useState(false);
+    const [isOfficer, setIsOfficer] = useState(false);
+    const [createdEmail, setCreatedEmail] = useState<string | null>(null);
+    const [showPasswordReset, setShowPasswordReset] = useState(false);
+    const [newPassword, setNewPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+
+    // For initial email creation
+    const [initialPassword, setInitialPassword] = useState('');
+    const [initialConfirmPassword, setInitialConfirmPassword] = useState('');
+    const [initialPasswordError, setInitialPasswordError] = useState('');
+    const [showEmailForm, setShowEmailForm] = useState(false);
+
+    useEffect(() => {
+        const loadUserData = async () => {
+            try {
+                setLoading(true);
+                const currentUser = auth.getCurrentUser();
+                if (!currentUser) {
+                    // Don't show toast on dashboard page for unauthenticated users
+                    if (!window.location.pathname.includes('/dashboard')) {
+                        toast.error('You must be logged in to access this page');
+                    }
+                    return;
+                }
+
+                setUser(currentUser);
+
+                // Check if user is an officer
+                const pb = auth.getPocketBase();
+                try {
+                    const officerRecord = await pb.collection('officers').getFirstListItem(`user="${currentUser.id}"`);
+                    if (officerRecord) {
+                        setIsOfficer(true);
+                    }
+                } catch (error) {
+                    // Not an officer, which is fine
+                    console.log('User is not an officer');
+                }
+            } catch (error) {
+                console.error('Error loading user data:', error);
+                // Don't show toast on dashboard page for unauthenticated users
+                if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) {
+                    toast.error('Failed to load user data. Please try again later.');
+                }
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        loadUserData();
+    }, []);
+
+    const toggleEmailForm = () => {
+        setShowEmailForm(!showEmailForm);
+        setInitialPassword('');
+        setInitialConfirmPassword('');
+        setInitialPasswordError('');
+    };
+
+    const validateInitialPassword = () => {
+        if (initialPassword.length < 8) {
+            setInitialPasswordError('Password must be at least 8 characters long');
+            return false;
+        }
+
+        if (initialPassword !== initialConfirmPassword) {
+            setInitialPasswordError('Passwords do not match');
+            return false;
+        }
+
+        setInitialPasswordError('');
+        return true;
+    };
+
+    const handleRequestEmail = async () => {
+        if (!user) return;
+
+        if (initialPassword && !validateInitialPassword()) {
+            return;
+        }
+
+        try {
+            setRequesting(true);
+
+            // Determine what the email will be
+            const emailUsername = user.email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, "");
+            const emailDomain = import.meta.env.PUBLIC_MXROUTE_EMAIL_DOMAIN || 'ieeeucsd.org';
+            const expectedEmail = `${emailUsername}@${emailDomain}`;
+
+            // Call the API to create the email account
+            const response = await fetch('/api/create-ieee-email', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    userId: user.id,
+                    name: user.name,
+                    email: user.email,
+                    password: initialPassword || undefined
+                })
+            });
+
+            const result = await response.json();
+
+            if (response.ok && result.success) {
+                // Email created successfully
+                setCreatedEmail(result.data.ieeeEmail);
+
+                // Update the user record to mark email as requested
+                const pb = auth.getPocketBase();
+                await pb.collection(Collections.USERS).update(user.id, {
+                    requested_email: true
+                });
+
+                toast.success('IEEE email created successfully!');
+                setShowEmailForm(false);
+            } else {
+                toast.error(result.message || 'Failed to create email. Please contact the webmaster for assistance.');
+            }
+        } catch (error) {
+            console.error('Error requesting email:', error);
+            toast.error('Failed to create email. Please try again later.');
+        } finally {
+            setRequesting(false);
+        }
+    };
+
+    const togglePasswordReset = () => {
+        setShowPasswordReset(!showPasswordReset);
+        setNewPassword('');
+        setConfirmPassword('');
+        setPasswordError('');
+    };
+
+    const validatePassword = () => {
+        if (newPassword.length < 8) {
+            setPasswordError('Password must be at least 8 characters long');
+            return false;
+        }
+
+        if (newPassword !== confirmPassword) {
+            setPasswordError('Passwords do not match');
+            return false;
+        }
+
+        setPasswordError('');
+        return true;
+    };
+
+    const handleResetPassword = async () => {
+        if (!user || !user.requested_email) return;
+
+        if (!validatePassword()) {
+            return;
+        }
+
+        // Determine the email address
+        const emailAddress = createdEmail || (user ? `${user.email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, "")}@ieeeucsd.org` : '');
+
+        try {
+            setResettingPassword(true);
+
+            // Call the API to reset the password
+            const response = await fetch('/api/reset-email-password', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    email: emailAddress,
+                    password: newPassword
+                })
+            });
+
+            const result = await response.json();
+
+            if (response.ok && result.success) {
+                toast.success('Password reset successfully!');
+                setShowPasswordReset(false);
+                setNewPassword('');
+                setConfirmPassword('');
+            } else {
+                toast.error(result.message || 'Failed to reset password. Please contact the webmaster for assistance.');
+            }
+        } catch (error) {
+            console.error('Error resetting password:', error);
+            toast.error('Failed to reset password. Please try again later.');
+        } finally {
+            setResettingPassword(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center p-8">
+                <span className="loading loading-spinner loading-lg text-primary"></span>
+            </div>
+        );
+    }
+
+    if (!isOfficer) {
+        return (
+            <div className="p-4 bg-base-200 rounded-lg">
+                <p>IEEE email addresses are only available to officers. If you are an officer and don't see the option to request an email, please contact the webmaster.</p>
+            </div>
+        );
+    }
+
+    if (user?.requested_email || createdEmail) {
+        return (
+            <div className="space-y-6">
+                <div className="p-4 bg-base-200 rounded-lg">
+                    <h3 className="font-bold text-lg mb-2">
+                        {createdEmail ? 'Your IEEE Email Address' : 'Email Request Status'}
+                    </h3>
+
+                    <div className="mb-4">
+                        <p className="text-xl font-mono bg-base-100 p-2 rounded">
+                            {createdEmail || (user ? `${user.email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, "")}@ieeeucsd.org` : '')}
+                        </p>
+                        {initialPassword ? (
+                            <p className="mt-2 text-sm">Your email has been created with the password you provided.</p>
+                        ) : (
+                            <p className="mt-2 text-sm">Check your personal email for login instructions.</p>
+                        )}
+                    </div>
+
+                    <div className="mb-4">
+                        <h4 className="font-semibold mb-1">Access Your Email</h4>
+                        <ul className="list-disc list-inside space-y-1">
+                            <li>Webmail: <a href="https://mail.ieeeucsd.org" target="_blank" rel="noopener noreferrer" className="link link-primary">https://mail.ieeeucsd.org</a></li>
+                        </ul>
+                    </div>
+
+                    <div className="mt-4">
+                        {!showPasswordReset ? (
+                            <button
+                                className="btn btn-secondary w-full"
+                                onClick={togglePasswordReset}
+                            >
+                                Reset Email Password
+                            </button>
+                        ) : (
+                            <div className="space-y-4 p-4 bg-base-100 rounded-lg">
+                                <h4 className="font-semibold">Reset Your Email Password</h4>
+
+                                <div className="alert alert-warning">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+                                    <span>
+                                        <strong>Important:</strong> After resetting your password, you'll need to update it in any email clients, Gmail integrations, or mobile devices where you've set up this email account.
+                                    </span>
+                                </div>
+
+                                <div className="form-control">
+                                    <label className="label">
+                                        <span className="label-text">New Password</span>
+                                    </label>
+                                    <input
+                                        type="password"
+                                        className="input input-bordered"
+                                        value={newPassword}
+                                        onChange={(e) => setNewPassword(e.target.value)}
+                                        placeholder="Enter new password"
+                                    />
+                                </div>
+
+                                <div className="form-control">
+                                    <label className="label">
+                                        <span className="label-text">Confirm Password</span>
+                                    </label>
+                                    <input
+                                        type="password"
+                                        className="input input-bordered"
+                                        value={confirmPassword}
+                                        onChange={(e) => setConfirmPassword(e.target.value)}
+                                        placeholder="Confirm new password"
+                                    />
+                                </div>
+
+                                {passwordError && (
+                                    <div className="text-error text-sm">{passwordError}</div>
+                                )}
+
+                                <div className="flex gap-2">
+                                    <button
+                                        className="btn btn-secondary flex-1"
+                                        onClick={handleResetPassword}
+                                        disabled={resettingPassword}
+                                    >
+                                        {resettingPassword ? (
+                                            <>
+                                                <span className="loading loading-spinner loading-sm"></span>
+                                                Resetting...
+                                            </>
+                                        ) : (
+                                            'Reset Password'
+                                        )}
+                                    </button>
+                                    <button
+                                        className="btn btn-outline"
+                                        onClick={togglePasswordReset}
+                                        disabled={resettingPassword}
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+
+                        {!showPasswordReset && (
+                            <p className="text-xs mt-2 opacity-70">
+                                Reset your IEEE email password to a new password of your choice.
+                            </p>
+                        )}
+                    </div>
+                </div>
+
+                <div className="p-4 bg-base-200 rounded-lg">
+                    <h3 className="font-bold text-lg mb-4">Setting Up Your IEEE Email in Gmail</h3>
+
+                    <div className="mb-6">
+                        <h4 className="font-semibold mb-2">First Step: Set Up Sending From Your IEEE Email</h4>
+                        <ol className="list-decimal list-inside space-y-2">
+                            <li>Go to settings (gear icon) → Accounts and Import</li>
+                            <li>In the section that says <span className="text-blue-600">Send mail as:</span>, select <span className="text-blue-600">Reply from the same address the message was sent to</span></li>
+                            <li>In that same section, select <span className="text-blue-600">Add another email address</span></li>
+                            <li>For the Name, put your actual name (e.g. Charles Nguyen) if this is your personal ieeeucsd.org or put the department name (e.g. IEEEUCSD Webmaster)</li>
+                            <li>For the Email address, put the email that was provided for you</li>
+                            <li>Make sure the <span className="text-blue-600">Treat as an alias</span> button is selected. Go to the next step</li>
+                            <li>For the SMTP Server, put <span className="text-blue-600">mail.ieeeucsd.org</span></li>
+                            <li>For the username, put in your <span className="text-blue-600">FULL ieeeucsd email address</span></li>
+                            <li>For the password, put in the email's password</li>
+                            <li>For the port, put in <span className="text-blue-600">587</span></li>
+                            <li>Make sure you select <span className="text-blue-600">Secured connection with TLS</span></li>
+                            <li>Go back to mail.ieeeucsd.org and verify the email that Google has sent you</li>
+                        </ol>
+                    </div>
+
+                    <div>
+                        <h4 className="font-semibold mb-2">Second Step: Set Up Receiving Your IEEE Email</h4>
+                        <ol className="list-decimal list-inside space-y-2">
+                            <li>Go to settings (gear icon) → Accounts and Import</li>
+                            <li>In the section that says <span className="text-blue-600">Check mail from other accounts:</span>, select <span className="text-blue-600">Add a mail account</span></li>
+                            <li>Put in the ieeeucsd email and hit next</li>
+                            <li>Make sure <span className="text-blue-600">Import emails from my other account (POP3)</span> is selected, then hit next</li>
+                            <li>For the username, put in your full ieeeucsd.org email</li>
+                            <li>For the password, put in your ieeeucsd.org password</li>
+                            <li>For the POP Server, put in <span className="text-blue-600">mail.ieeeucsd.org</span></li>
+                            <li>For the Port, put in <span className="text-blue-600">995</span></li>
+                            <li>Select <span className="text-blue-600">Leave a copy of retrieved message on the server</span></li>
+                            <li>Select <span className="text-blue-600">Always use a secure connection (SSL) when retrieving mail</span></li>
+                            <li>Select <span className="text-blue-600">Label incoming messages</span></li>
+                            <li>Then hit <span className="text-blue-600">Add Account</span></li>
+                        </ol>
+                    </div>
+                </div>
+
+                <div className="p-4 bg-base-200 rounded-lg">
+                    <p className="text-sm">
+                        If you have any questions or need help with your IEEE email, please contact <a href="mailto:webmaster@ieeeatucsd.org" className="underline">webmaster@ieeeatucsd.org</a>
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            {!showEmailForm ? (
+                <>
+                    <p className="text-sm">
+                        As an IEEE officer, you're eligible for an official IEEE UCSD email address. This email can be used for all IEEE-related communications and provides a professional identity when representing the organization.
+                    </p>
+
+                    <div className="p-4 bg-base-200 rounded-lg">
+                        <h3 className="font-bold text-lg mb-2">Benefits of an IEEE email:</h3>
+                        <ul className="list-disc list-inside space-y-1">
+                            <li>Professional communication with sponsors and partners</li>
+                            <li>Consistent branding for IEEE UCSD</li>
+                            <li>Separation between personal and IEEE communications</li>
+                            <li>Access to IEEE UCSD shared resources</li>
+                        </ul>
+                    </div>
+
+                    <div className="p-4 bg-base-200 rounded-lg">
+                        <h3 className="font-bold text-lg mb-2">Your IEEE Email Address</h3>
+                        <p className="text-sm mb-2">When you request an email, you'll receive:</p>
+                        <p className="text-xl font-mono bg-base-100 p-2 rounded">
+                            {user?.email ? `${user.email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, "")}@ieeeucsd.org` : 'Loading...'}
+                        </p>
+                    </div>
+
+                    <button
+                        className="btn btn-primary w-full"
+                        onClick={toggleEmailForm}
+                    >
+                        Request IEEE Email Address
+                    </button>
+
+                    <div className="text-xs opacity-70">
+                        <p>By requesting an email, you agree to use it responsibly and in accordance with IEEE UCSD policies.</p>
+                    </div>
+                </>
+            ) : (
+                <div className="p-4 bg-base-200 rounded-lg space-y-4">
+                    <h3 className="font-bold text-lg">Create Your IEEE Email</h3>
+
+                    <div className="p-4 bg-base-100 rounded-lg">
+                        <p className="font-semibold">Your email address will be:</p>
+                        <p className="text-xl font-mono mt-2">
+                            {user?.email ? `${user.email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, "")}@ieeeucsd.org` : 'Loading...'}
+                        </p>
+                    </div>
+
+                    <div className="form-control">
+                        <label className="label">
+                            <span className="label-text">Choose a Password</span>
+                        </label>
+                        <input
+                            type="password"
+                            className="input input-bordered"
+                            value={initialPassword}
+                            onChange={(e) => setInitialPassword(e.target.value)}
+                            placeholder="Enter password (min. 8 characters)"
+                        />
+                    </div>
+
+                    <div className="form-control">
+                        <label className="label">
+                            <span className="label-text">Confirm Password</span>
+                        </label>
+                        <input
+                            type="password"
+                            className="input input-bordered"
+                            value={initialConfirmPassword}
+                            onChange={(e) => setInitialConfirmPassword(e.target.value)}
+                            placeholder="Confirm password"
+                        />
+                    </div>
+
+                    {initialPasswordError && (
+                        <div className="text-error text-sm">{initialPasswordError}</div>
+                    )}
+
+                    <p className="text-sm opacity-70">
+                        Leave the password fields empty if you want a secure random password to be generated and sent to your personal email.
+                    </p>
+
+                    <div className="flex gap-2">
+                        <button
+                            className="btn btn-primary flex-1"
+                            onClick={handleRequestEmail}
+                            disabled={requesting}
+                        >
+                            {requesting ? (
+                                <>
+                                    <span className="loading loading-spinner loading-sm"></span>
+                                    Creating Email...
+                                </>
+                            ) : (
+                                'Create IEEE Email'
+                            )}
+                        </button>
+                        <button
+                            className="btn btn-outline"
+                            onClick={toggleEmailForm}
+                            disabled={requesting}
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+} 

src/components/dashboard/SettingsSection/NotificationSettings.tsx

@@ -67,7 +67,7 @@ export default function NotificationSettings() {
                 { notification_preferences: JSON.stringify(DEFAULT_NOTIFICATION_PREFERENCES) }
             );
             setPreferences(DEFAULT_NOTIFICATION_PREFERENCES);
-            console.log('Initialized default notification preferences');
+            // console.log('Initialized default notification preferences');
         } catch (error) {
             console.error('Error initializing default notification preferences:', error);
         }

src/components/dashboard/SettingsSection/PasswordChangeSettings.tsx

@@ -0,0 +1,550 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'react-hot-toast';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+import { SendLog } from '../../../scripts/pocketbase/SendLog';
+
+interface PasswordChangeSettingsProps {
+    logtoAppId?: string;
+    logtoAppSecret?: string;
+    logtoEndpoint?: string;
+    logtoTokenEndpoint?: string;
+    logtoApiEndpoint?: string;
+}
+
+export default function PasswordChangeSettings({
+    logtoAppId: propLogtoAppId,
+    logtoAppSecret: propLogtoAppSecret,
+    logtoEndpoint: propLogtoEndpoint,
+    logtoTokenEndpoint: propLogtoTokenEndpoint,
+    logtoApiEndpoint: propLogtoApiEndpoint
+}: PasswordChangeSettingsProps) {
+    const auth = Authentication.getInstance();
+    const logger = SendLog.getInstance();
+    const [isLoading, setIsLoading] = useState(false);
+    const [isCheckingEnv, setIsCheckingEnv] = useState(false);
+    const [useFormSubmission, setUseFormSubmission] = useState(false); // Default to using JSON
+    const [formData, setFormData] = useState({
+        currentPassword: '',
+        newPassword: '',
+        confirmPassword: '',
+    });
+    const [logtoUserId, setLogtoUserId] = useState('');
+    const [debugInfo, setDebugInfo] = useState<any>(null);
+
+    // Access environment variables directly
+    const envLogtoAppId = import.meta.env.LOGTO_APP_ID;
+    const envLogtoAppSecret = import.meta.env.LOGTO_APP_SECRET;
+    const envLogtoEndpoint = import.meta.env.LOGTO_ENDPOINT;
+    const envLogtoTokenEndpoint = import.meta.env.LOGTO_TOKEN_ENDPOINT;
+    const envLogtoApiEndpoint = import.meta.env.LOGTO_API_ENDPOINT;
+
+    // Use environment variables or props (fallback)
+    const logtoAppId = envLogtoAppId || propLogtoAppId;
+    const logtoAppSecret = envLogtoAppSecret || propLogtoAppSecret;
+    const logtoEndpoint = envLogtoEndpoint || propLogtoEndpoint;
+    const logtoTokenEndpoint = envLogtoTokenEndpoint || propLogtoTokenEndpoint;
+    const logtoApiEndpoint = envLogtoApiEndpoint || propLogtoApiEndpoint;
+
+
+
+    // Get the user's Logto ID on component mount
+    useEffect(() => {
+        const fetchLogtoUserId = async () => {
+            try {
+                const user = auth.getCurrentUser();
+                if (!user) {
+                    // Don't show error on dashboard page for unauthenticated users
+                    if (!window.location.pathname.includes('/dashboard')) {
+                        console.error("User not authenticated");
+                        toast.error("You must be logged in to change your password");
+                    }
+                    return;
+                }
+
+                // console.log("Current user:", user);
+                const pb = auth.getPocketBase();
+
+                try {
+                    const externalAuthRecord = await pb.collection('_externalAuths').getFirstListItem(`recordRef="${user.id}" && provider="oidc"`);
+                    // console.log("Found external auth record:", externalAuthRecord);
+
+                    const userId = externalAuthRecord.providerId;
+                    if (userId) {
+                        setLogtoUserId(userId);
+                        // console.log("Set Logto user ID:", userId);
+                    } else {
+                        console.error("No providerId found in external auth record");
+                        toast.error("Could not determine your user ID. Please try again later or contact support.");
+                    }
+                } catch (error) {
+                    console.error("Error fetching external auth record:", error);
+                    toast.error("Error retrieving your user information. Please try again later.");
+
+                    // Try to get more information about the error
+                    if (error instanceof Error) {
+                        console.error("Error details:", error.message);
+                        if ('data' in error) {
+                            console.error("Error data:", (error as any).data);
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error("Error fetching Logto user ID:", error);
+                toast.error("Error retrieving your user information. Please try again later.");
+            }
+        };
+
+        fetchLogtoUserId();
+    }, []);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({
+            ...prev,
+            [name]: value,
+        }));
+    };
+
+    const validateForm = () => {
+        if (!formData.currentPassword) {
+            toast.error('Current password is required');
+            return false;
+        }
+        if (!formData.newPassword) {
+            toast.error('New password is required');
+            return false;
+        }
+        if (formData.newPassword.length < 8) {
+            toast.error('New password must be at least 8 characters long');
+            return false;
+        }
+        if (formData.newPassword !== formData.confirmPassword) {
+            toast.error('New passwords do not match');
+            return false;
+        }
+        if (!logtoUserId) {
+            toast.error('Could not determine your user ID. Please try again later.');
+            return false;
+        }
+        return true;
+    };
+
+    const checkEnvironmentVariables = async () => {
+        setIsCheckingEnv(true);
+        try {
+            const response = await fetch('/api/check-env');
+            const data = await response.json();
+            // console.log("Environment variables status:", data);
+
+            // Check if all required environment variables are set
+            const { envStatus } = data;
+            const missingVars = Object.entries(envStatus)
+                .filter(([_, isSet]) => !isSet)
+                .map(([name]) => name);
+
+            if (missingVars.length > 0) {
+                toast.error(`Missing environment variables: ${missingVars.join(', ')}`);
+            } else {
+                toast.success('All environment variables are set');
+            }
+        } catch (error) {
+            console.error("Error checking environment variables:", error);
+            toast.error('Failed to check environment variables');
+        } finally {
+            setIsCheckingEnv(false);
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (!validateForm()) return;
+
+        setIsLoading(true);
+        setDebugInfo(null);
+
+        try {
+            if (useFormSubmission) {
+                // Use a traditional form submission approach
+                const formElement = document.createElement('form');
+                formElement.method = 'POST';
+                formElement.action = '/api/change-password';
+                formElement.enctype = 'application/x-www-form-urlencoded';
+
+                // Add the userId field
+                const userIdField = document.createElement('input');
+                userIdField.type = 'hidden';
+                userIdField.name = 'userId';
+                userIdField.value = logtoUserId;
+                formElement.appendChild(userIdField);
+
+                // Add the newPassword field
+                const newPasswordField = document.createElement('input');
+                newPasswordField.type = 'hidden';
+                newPasswordField.name = 'newPassword';
+                newPasswordField.value = formData.newPassword;
+                formElement.appendChild(newPasswordField);
+
+                // If not using hardcoded endpoint, add the Logto credentials
+
+                const logtoAppIdField = document.createElement('input');
+                logtoAppIdField.type = 'hidden';
+                logtoAppIdField.name = 'logtoAppId';
+                logtoAppIdField.value = logtoAppId;
+                formElement.appendChild(logtoAppIdField);
+
+                const logtoAppSecretField = document.createElement('input');
+                logtoAppSecretField.type = 'hidden';
+                logtoAppSecretField.name = 'logtoAppSecret';
+                logtoAppSecretField.value = logtoAppSecret;
+                formElement.appendChild(logtoAppSecretField);
+
+                const logtoTokenEndpointField = document.createElement('input');
+                logtoTokenEndpointField.type = 'hidden';
+                logtoTokenEndpointField.name = 'logtoTokenEndpoint';
+                logtoTokenEndpointField.value = logtoTokenEndpoint;
+                formElement.appendChild(logtoTokenEndpointField);
+
+                const logtoApiEndpointField = document.createElement('input');
+                logtoApiEndpointField.type = 'hidden';
+                logtoApiEndpointField.name = 'logtoApiEndpoint';
+                logtoApiEndpointField.value = logtoApiEndpoint;
+                formElement.appendChild(logtoApiEndpointField);
+
+
+                // Create an iframe to handle the form submission
+                const iframe = document.createElement('iframe');
+                iframe.name = 'password-change-frame';
+                iframe.style.display = 'none';
+                document.body.appendChild(iframe);
+
+                // Set up the iframe load event to handle the response
+                iframe.onload = async () => {
+                    try {
+                        // Try to get the response from the iframe
+                        const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+                        if (iframeDocument) {
+                            const responseText = iframeDocument.body.innerText;
+                            // console.log("Response from iframe:", responseText);
+
+                            if (responseText) {
+                                try {
+                                    const result = JSON.parse(responseText);
+                                    if (result.success) {
+                                        // Log the password change
+                                        await logger.send('update', 'password', 'User changed their password');
+
+                                        toast.success('Password changed successfully');
+
+                                        // Clear form
+                                        setFormData({
+                                            currentPassword: '',
+                                            newPassword: '',
+                                            confirmPassword: '',
+                                        });
+                                    } else {
+                                        toast.error(result.message || 'Failed to change password');
+                                    }
+                                } catch (error) {
+                                    console.error("Error parsing response:", error);
+                                    toast.error('Failed to parse response from server');
+                                }
+                            } else {
+                                // If no response text, assume success
+                                // Log the password change
+                                await logger.send('update', 'password', 'User changed their password');
+
+                                toast.success('Password changed successfully');
+
+                                // Clear form
+                                setFormData({
+                                    currentPassword: '',
+                                    newPassword: '',
+                                    confirmPassword: '',
+                                });
+                            }
+                        } else {
+                            console.error("Could not access iframe document");
+                            toast.error('Could not access response from server');
+                        }
+                    } catch (error) {
+                        console.error("Error handling iframe response:", error);
+                        toast.error('Error handling response from server');
+                    } finally {
+                        // Clean up
+                        document.body.removeChild(iframe);
+                        setIsLoading(false);
+                    }
+                };
+
+                // Set the target to the iframe
+                formElement.target = 'password-change-frame';
+
+                // Append the form to the document, submit it, and then remove it
+                document.body.appendChild(formElement);
+                formElement.submit();
+                document.body.removeChild(formElement);
+
+                // Note: setIsLoading(false) is called in the iframe.onload handler
+            } else {
+                // Use the fetch API with JSON
+                const endpoint = '/api/change-password';
+                // console.log(`Calling server-side API endpoint: ${endpoint}`);
+
+                // Ensure we have the Logto user ID
+                if (!logtoUserId) {
+                    console.error("Logto user ID is missing");
+                    throw new Error("User ID is missing. Please try again or contact support.");
+                }
+
+                // Log the values we're about to use
+                // console.log("Values being used for API call:");
+                // console.log("- logtoUserId:", logtoUserId);
+                // console.log("- newPassword:", formData.newPassword ? "[PRESENT]" : "[MISSING]");
+                // console.log("- logtoAppId:", logtoAppId);
+                // console.log("- logtoAppSecret:", logtoAppSecret ? "[PRESENT]" : "[MISSING]");
+                // console.log("- logtoTokenEndpoint:", logtoTokenEndpoint);
+                // console.log("- logtoApiEndpoint:", logtoApiEndpoint);
+
+                // Prepare request data with explicit values (not relying on variable references that might be undefined)
+                const requestData = {
+                    userId: logtoUserId,
+                    currentPassword: formData.currentPassword,
+                    newPassword: formData.newPassword,
+                    logtoAppId: logtoAppId || "",
+                    logtoAppSecret: logtoAppSecret || "",
+                    logtoTokenEndpoint: logtoTokenEndpoint || `${logtoEndpoint}/oidc/token`,
+                    logtoApiEndpoint: logtoApiEndpoint || logtoEndpoint
+                };
+
+                // console.log("Request data:", {
+                //     ...requestData,
+                //     currentPassword: "[REDACTED]",
+                //     newPassword: "[REDACTED]",
+                //     logtoAppSecret: "[REDACTED]"
+                // });
+
+                // Validate request data before sending
+                if (!requestData.userId) {
+                    throw new Error("Missing userId. Please try again or contact support.");
+                }
+
+                if (!requestData.newPassword) {
+                    throw new Error("Missing newPassword. Please enter a new password.");
+                }
+
+                if (!requestData.logtoAppId) {
+                    throw new Error("Missing logtoAppId configuration. Please contact support.");
+                }
+                if (!requestData.logtoAppSecret) {
+                    throw new Error("Missing logtoAppSecret configuration. Please contact support.");
+                }
+                if (!requestData.logtoTokenEndpoint) {
+                    throw new Error("Missing logtoTokenEndpoint configuration. Please contact support.");
+                }
+                if (!requestData.logtoApiEndpoint) {
+                    throw new Error("Missing logtoApiEndpoint configuration. Please contact support.");
+                }
+
+
+                // Stringify the request data to ensure it's valid JSON
+                const requestBody = JSON.stringify(requestData);
+                // console.log("Request body (stringified):", requestBody);
+
+                // Create a debug object to display in the UI
+                const debugObj = {
+                    endpoint,
+                    requestData,
+                    requestBody,
+                    logtoUserId,
+                    hasNewPassword: !!formData.newPassword,
+                    hasLogtoAppId: !!logtoAppId,
+                    hasLogtoAppSecret: !!logtoAppSecret,
+                    hasLogtoTokenEndpoint: !!logtoTokenEndpoint,
+                    hasLogtoApiEndpoint: !!logtoApiEndpoint
+                };
+                setDebugInfo(debugObj);
+
+                // Call our server-side API endpoint to change the password
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
+                    body: requestBody
+                });
+
+                // console.log("Response status:", response.status);
+
+                // Process the response
+                let result: any;
+                try {
+                    const responseText = await response.text();
+                    // console.log("Raw response:", responseText);
+
+                    if (responseText) {
+                        result = JSON.parse(responseText);
+                    } else {
+                        result = { success: false, message: 'Empty response from server' };
+                    }
+
+                    // console.log("API response:", result);
+
+                    // Add response to debug info
+                    setDebugInfo((prev: any) => ({
+                        ...prev,
+                        responseStatus: response.status,
+                        responseText,
+                        parsedResponse: result
+                    }));
+                } catch (error) {
+                    console.error("Error parsing API response:", error);
+                    setDebugInfo((prev: any) => ({
+                        ...prev,
+                        responseError: error instanceof Error ? error.message : String(error)
+                    }));
+                    throw new Error(`Invalid response from server: ${error instanceof Error ? error.message : String(error)}`);
+                }
+
+                // Check if the request was successful
+                if (response.ok && result.success) {
+                    // Log the password change
+                    await logger.send('update', 'password', 'User changed their password');
+
+                    toast.success('Password changed successfully');
+
+                    // Clear form
+                    setFormData({
+                        currentPassword: '',
+                        newPassword: '',
+                        confirmPassword: '',
+                    });
+                } else {
+                    throw new Error(result.message || `Failed to change password: ${response.status}`);
+                }
+
+                setIsLoading(false);
+            }
+        } catch (error) {
+            console.error('Error changing password:', error);
+            toast.error(error instanceof Error ? error.message : 'Failed to change password');
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div>
+            {process.env.NODE_ENV === 'development' && (
+                <div className="mb-4 p-3 bg-base-200 rounded-lg">
+                    <h4 className="text-sm font-semibold mb-2">Debug Tools (Development Only)</h4>
+                    <div className="flex flex-wrap gap-2 mb-2">
+                        <button
+                            type="button"
+                            className={`btn btn-sm btn-info ${isCheckingEnv ? 'loading' : ''}`}
+                            onClick={checkEnvironmentVariables}
+                            disabled={isCheckingEnv}
+                        >
+                            Check Environment Variables
+                        </button>
+                        <button
+                            type="button"
+                            className="btn btn-sm btn-warning"
+                            onClick={() => {
+                                // console.log("Debug Info:");
+                                // console.log("- logtoUserId:", logtoUserId);
+                                // console.log("- Environment Variables:");
+                                // console.log("  - LOGTO_APP_ID:", import.meta.env.LOGTO_APP_ID);
+                                // console.log("  - LOGTO_ENDPOINT:", import.meta.env.LOGTO_ENDPOINT);
+                                // console.log("  - LOGTO_TOKEN_ENDPOINT:", import.meta.env.LOGTO_TOKEN_ENDPOINT);
+                                // console.log("  - LOGTO_API_ENDPOINT:", import.meta.env.LOGTO_API_ENDPOINT);
+
+                                toast.success("Debug info logged to console");
+                            }}
+                        >
+                            Log Debug Info
+                        </button>
+                        <button
+                            type="button"
+                            className={`btn btn-sm ${!useFormSubmission ? 'btn-success' : 'btn-outline'}`}
+                            onClick={() => setUseFormSubmission(false)}
+                        >
+                            Use JSON API
+                        </button>
+                    </div>
+                    <div className="mt-2 text-xs">
+                        <p>Using fixed LogTo implementation with {useFormSubmission ? 'form submission' : 'JSON'}</p>
+                        <p>Logto User ID: {logtoUserId || 'Not found'}</p>
+                    </div>
+
+                    {debugInfo && (
+                        <div className="mt-4 border-t pt-2">
+                            <p className="font-semibold">Debug Info:</p>
+                            <div className="overflow-auto max-h-60 bg-base-300 p-2 rounded text-xs">
+                                <pre>{JSON.stringify(debugInfo, null, 2)}</pre>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="form-control">
+                    <label className="label">
+                        <span className="label-text">Current Password</span>
+                    </label>
+                    <input
+                        type="password"
+                        name="currentPassword"
+                        value={formData.currentPassword}
+                        onChange={handleInputChange}
+                        className="input input-bordered w-full"
+                        required
+                    />
+                </div>
+
+                <div className="form-control">
+                    <label className="label">
+                        <span className="label-text">New Password</span>
+                    </label>
+                    <input
+                        type="password"
+                        name="newPassword"
+                        value={formData.newPassword}
+                        onChange={handleInputChange}
+                        className="input input-bordered w-full"
+                        required
+                        minLength={8}
+                    />
+                    <label className="label">
+                        <span className="label-text-alt">Password must be at least 8 characters long</span>
+                    </label>
+                </div>
+
+                <div className="form-control">
+                    <label className="label">
+                        <span className="label-text">Confirm New Password</span>
+                    </label>
+                    <input
+                        type="password"
+                        name="confirmPassword"
+                        value={formData.confirmPassword}
+                        onChange={handleInputChange}
+                        className="input input-bordered w-full"
+                        required
+                    />
+                </div>
+
+                <div className="form-control mt-6">
+                    <button
+                        type="submit"
+                        className={`btn btn-primary ${isLoading ? 'loading' : ''}`}
+                        disabled={isLoading}
+                    >
+                        {isLoading ? 'Changing Password...' : 'Change Password'}
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+} 

src/components/dashboard/SettingsSection/ResumeSettings.tsx

@@ -0,0 +1,580 @@
+import { useState, useEffect, useRef } from 'react';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+import { FileManager } from '../../../scripts/pocketbase/FileManager';
+import { Update } from '../../../scripts/pocketbase/Update';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections, type User } from '../../../schemas/pocketbase/schema';
+import { toast } from 'react-hot-toast';
+import FilePreview from '../universal/FilePreview';
+
+export default function ResumeSettings() {
+    const auth = Authentication.getInstance();
+    const fileManager = FileManager.getInstance();
+    const update = Update.getInstance();
+    const get = Get.getInstance();
+    const [user, setUser] = useState<User | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [uploading, setUploading] = useState(false);
+    const [resumeUrl, setResumeUrl] = useState<string | null>(null);
+    const [resumeFilename, setResumeFilename] = useState<string | null>(null);
+    const [resumeFile, setResumeFile] = useState<File | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // Fetch user data on component mount
+    useEffect(() => {
+        const fetchUserData = async () => {
+            try {
+                setLoading(true);
+                const currentUser = auth.getCurrentUser();
+                if (!currentUser) {
+                    // Don't show error toast on dashboard page for unauthenticated users
+                    if (!window.location.pathname.includes('/dashboard')) {
+                        throw new Error('User not authenticated');
+                    }
+                    return;
+                }
+
+                const userData = await get.getOne<User>('users', currentUser.id);
+                setUser(userData);
+
+                // Check if user has a resume
+                if (userData.resume) {
+                    const resumeFile = userData.resume;
+                    const fileUrl = fileManager.getFileUrl('users', userData.id, resumeFile);
+                    setResumeUrl(fileUrl);
+                    setResumeFilename(resumeFile);
+                }
+            } catch (error) {
+                console.error('Error fetching user data:', error);
+                // Don't show error toast on dashboard page for unauthenticated users
+                if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) {
+                    toast.error('Failed to load user data');
+                }
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchUserData();
+    }, []);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            const file = files[0];
+
+            // Validate file type (PDF or DOCX)
+            const allowedTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
+            const fileExtension = file.name.split('.').pop()?.toLowerCase();
+
+            // Check both MIME type and file extension
+            if (!allowedTypes.includes(file.type) &&
+                !(fileExtension === 'pdf' || fileExtension === 'docx')) {
+                toast.error('Please upload a PDF or DOCX file');
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+                return;
+            }
+
+            // Validate file size (max 50MB)
+            const maxSize = 50 * 1024 * 1024; // 50MB in bytes
+            if (file.size > maxSize) {
+                const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
+                toast.error(`File too large (${sizeMB}MB). Maximum size is 50MB.`);
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+                return;
+            }
+
+            setResumeFile(file);
+            setResumeFilename(file.name);
+            toast.success(`File "${file.name}" selected. Click Upload to confirm.`);
+        }
+    };
+
+    const handleUpload = async () => {
+        if (!resumeFile || !user) {
+            toast.error('No file selected or user not authenticated');
+            return;
+        }
+
+        try {
+            setUploading(true);
+
+            // Create a FormData object for the file upload
+            const formData = new FormData();
+            formData.append('resume', resumeFile);
+
+            // Show progress toast
+            const loadingToast = toast.loading('Uploading resume...');
+
+            // Log the file being uploaded for debugging
+            // console.log('Uploading file:', {
+            //     name: resumeFile.name,
+            //     size: resumeFile.size,
+            //     type: resumeFile.type
+            // });
+
+            let updatedUserData: User;
+
+            try {
+                // Use the FileManager to upload the file directly
+                // console.log('Using FileManager to upload resume file');
+
+                // Upload the file using the FileManager's uploadFile method
+                const result = await fileManager.uploadFile<User>(
+                    Collections.USERS,
+                    user.id,
+                    'resume',
+                    resumeFile,
+                    false // Don't append, replace existing file
+                );
+
+                // Verify the file was uploaded by checking the response
+                if (!result || !result.resume) {
+                    throw new Error('Resume was not properly saved to the user record');
+                }
+
+                // console.log('Resume upload successful:', result.resume);
+
+                // Store the updated user data
+                updatedUserData = result;
+
+                // Fetch the updated user record to ensure we have the latest data
+                const refreshedUser = await get.getOne<User>(Collections.USERS, user.id);
+                // console.log('Refreshed user data:', refreshedUser);
+
+                // Double check that the resume field is populated
+                if (!refreshedUser.resume) {
+                    // console.warn('Resume field is missing in the refreshed user data');
+                }
+            } catch (uploadError) {
+                console.error('Error in file upload process:', uploadError);
+                toast.dismiss(loadingToast);
+                toast.error('Failed to upload resume: ' + (uploadError instanceof Error ? uploadError.message : 'Unknown error'));
+                setUploading(false);
+                return;
+            }
+
+            // Get the URL of the uploaded file
+            if (!updatedUserData.resume) {
+                throw new Error('Resume filename is missing in the updated user data');
+            }
+
+            const fileUrl = fileManager.getFileUrl('users', user.id, updatedUserData.resume);
+
+            // Update state with the new resume information
+            setResumeUrl(fileUrl);
+            setResumeFilename(updatedUserData.resume);
+            setResumeFile(null);
+
+            // Reset file input
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+
+            // Dismiss loading toast and show success message
+            toast.dismiss(loadingToast);
+            toast.success('Resume uploaded successfully');
+
+            // Log the successful upload
+            // console.log('Resume uploaded successfully:', updatedUserData.resume);
+
+            // Dispatch a custom event to notify the dashboard about the resume upload
+            const event = new CustomEvent('resumeUploaded', {
+                detail: { hasResume: true }
+            });
+            window.dispatchEvent(event);
+
+        } catch (error) {
+            console.error('Error uploading resume:', error);
+
+            // Provide more specific error messages based on the error type
+            if (error instanceof Error) {
+                if (error.message.includes('size')) {
+                    toast.error('File size exceeds the maximum allowed limit (50MB)');
+                } else if (error.message.includes('type')) {
+                    toast.error('Invalid file type. Please upload a PDF or DOCX file');
+                } else if (error.message.includes('network')) {
+                    toast.error('Network error. Please check your connection and try again');
+                } else if (error.message.includes('permission')) {
+                    toast.error('Permission denied. You may not have the right permissions');
+                } else {
+                    toast.error(`Upload failed: ${error.message}`);
+                }
+            } else {
+                toast.error('Failed to upload resume. Please try again later');
+            }
+        } finally {
+            setUploading(false);
+        }
+    };
+
+    const handleDelete = async () => {
+        if (!user) {
+            toast.error('User not authenticated');
+            return;
+        }
+
+        // Ask for confirmation before deleting
+        if (!confirm('Are you sure you want to delete your resume? This action cannot be undone.')) {
+            return;
+        }
+
+        try {
+            setUploading(true);
+
+            // Show progress toast
+            const loadingToast = toast.loading('Deleting resume...');
+
+            // Log the deletion attempt
+            // console.log('Attempting to delete resume for user:', user.id);
+
+            // Create a FormData with empty resume field to remove the file
+            const formData = new FormData();
+            formData.append('resume', '');
+
+            try {
+                // console.log('Using FileManager to delete resume file');
+
+                // Use the FileManager's deleteFile method to remove the file
+                const result = await fileManager.deleteFile<User>(
+                    Collections.USERS,
+                    user.id,
+                    'resume'
+                );
+
+                // Verify the file was deleted
+                if (result.resume) {
+                    // console.warn('Resume field still exists after deletion attempt:', result.resume);
+                    toast.dismiss(loadingToast);
+                    toast.error('Failed to completely remove the resume. Please try again.');
+                    setUploading(false);
+                    return;
+                }
+
+                // console.log('Resume deletion successful for user:', user.id);
+
+                // Fetch the updated user record to ensure we have the latest data
+                const refreshedUser = await get.getOne<User>(Collections.USERS, user.id);
+                // console.log('Refreshed user data after deletion:', refreshedUser);
+
+                // Double check that the resume field is empty
+                if (refreshedUser.resume) {
+                    // console.warn('Resume field is still present in the refreshed user data:', refreshedUser.resume);
+                }
+            } catch (deleteError) {
+                console.error('Error in file deletion process:', deleteError);
+                toast.dismiss(loadingToast);
+                toast.error('Failed to delete resume: ' + (deleteError instanceof Error ? deleteError.message : 'Unknown error'));
+                setUploading(false);
+                return;
+            }
+
+            // Update state to reflect the deletion
+            setResumeUrl(null);
+            setResumeFilename(null);
+
+            // Dismiss loading toast and show success message
+            toast.dismiss(loadingToast);
+            toast.success('Resume deleted successfully');
+
+            // Log the successful deletion
+            // console.log('Resume deleted successfully for user:', user.id);
+
+            // Dispatch a custom event to notify the dashboard about the resume deletion
+            const event = new CustomEvent('resumeUploaded', {
+                detail: { hasResume: false }
+            });
+            window.dispatchEvent(event);
+
+        } catch (error) {
+            console.error('Error deleting resume:', error);
+
+            // Provide more specific error messages based on the error type
+            if (error instanceof Error) {
+                if (error.message.includes('permission')) {
+                    toast.error('Permission denied. You may not have the right permissions');
+                } else if (error.message.includes('network')) {
+                    toast.error('Network error. Please check your connection and try again');
+                } else {
+                    toast.error(`Deletion failed: ${error.message}`);
+                }
+            } else {
+                toast.error('Failed to delete resume. Please try again later');
+            }
+        } finally {
+            setUploading(false);
+        }
+    };
+
+    const handleReplace = async () => {
+        if (!user) {
+            toast.error('User not authenticated');
+            return;
+        }
+
+        // Create a file input element
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = '.pdf,.docx';
+        fileInput.style.display = 'none';
+        document.body.appendChild(fileInput);
+
+        // Trigger click to open file dialog
+        fileInput.click();
+
+        // Handle file selection
+        fileInput.onchange = async (e) => {
+            const input = e.target as HTMLInputElement;
+            if (!input.files || input.files.length === 0) {
+                document.body.removeChild(fileInput);
+                return;
+            }
+
+            const file = input.files[0];
+
+            // Validate file type (PDF or DOCX)
+            const allowedTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
+            const fileExtension = file.name.split('.').pop()?.toLowerCase();
+
+            if (!allowedTypes.includes(file.type) &&
+                !(fileExtension === 'pdf' || fileExtension === 'docx')) {
+                toast.error('Please upload a PDF or DOCX file');
+                document.body.removeChild(fileInput);
+                return;
+            }
+
+            // Validate file size (max 50MB)
+            const maxSize = 50 * 1024 * 1024; // 50MB in bytes
+            if (file.size > maxSize) {
+                const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
+                toast.error(`File too large (${sizeMB}MB). Maximum size is 50MB.`);
+                document.body.removeChild(fileInput);
+                return;
+            }
+
+            try {
+                setUploading(true);
+
+                // Show progress toast
+                const loadingToast = toast.loading('Replacing resume...');
+
+                // Log the file being uploaded for debugging
+                // console.log('Replacing resume with file:', {
+                //     name: file.name,
+                //     size: file.size,
+                //     type: file.type
+                // });
+
+                // Create a FormData object for the file upload
+                const formData = new FormData();
+                formData.append('resume', file);
+
+                // Use the update service to directly update the user record
+                const result = await update.updateFields<User>(
+                    Collections.USERS,
+                    user.id,
+                    formData
+                );
+
+                // Verify the file was uploaded
+                if (!result || !result.resume) {
+                    throw new Error('Resume was not properly saved to the user record');
+                }
+
+                // Get the URL of the uploaded file
+                const fileUrl = fileManager.getFileUrl('users', user.id, result.resume);
+
+                // Update state with the new resume information
+                setResumeUrl(fileUrl);
+                setResumeFilename(result.resume);
+                setResumeFile(null);
+
+                // Dismiss loading toast and show success message
+                toast.dismiss(loadingToast);
+                toast.success('Resume replaced successfully');
+
+                // Dispatch a custom event to notify the dashboard about the resume upload
+                const event = new CustomEvent('resumeUploaded', {
+                    detail: { hasResume: true }
+                });
+                window.dispatchEvent(event);
+
+            } catch (error) {
+                console.error('Error replacing resume:', error);
+                toast.error('Failed to replace resume: ' + (error instanceof Error ? error.message : 'Unknown error'));
+            } finally {
+                setUploading(false);
+                document.body.removeChild(fileInput);
+            }
+        };
+    };
+
+    return (
+        <div className="space-y-6">
+            {loading ? (
+                <div className="flex justify-center items-center py-8">
+                    <span className="loading loading-spinner loading-lg"></span>
+                </div>
+            ) : (
+                <>
+                    {/* Resume Upload Section */}
+                    <div className="space-y-4">
+                        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                            <div>
+                                <h3 className="text-lg font-medium">Resume</h3>
+                                <p className="text-sm opacity-70">
+                                    Upload your resume for recruiters and career opportunities
+                                </p>
+                            </div>
+
+                            {!resumeUrl && (
+                                <div className="flex items-center gap-2">
+                                    <input
+                                        type="file"
+                                        ref={fileInputRef}
+                                        onChange={handleFileChange}
+                                        accept=".pdf,.docx"
+                                        className="hidden"
+                                    />
+                                    <button
+                                        onClick={() => fileInputRef.current?.click()}
+                                        className="btn btn-primary btn-sm gap-2"
+                                        disabled={uploading}
+                                    >
+                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                            <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                                        </svg>
+                                        Select Resume
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* File selected but not uploaded yet */}
+                        {resumeFile && !uploading && (
+                            <div className="bg-base-200 p-4 rounded-lg">
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center gap-3">
+                                        <div className="bg-primary/10 p-2 rounded-lg">
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-primary" viewBox="0 0 20 20" fill="currentColor">
+                                                <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <p className="font-medium truncate max-w-xs">{resumeFile.name}</p>
+                                            <p className="text-xs opacity-70">{(resumeFile.size / 1024 / 1024).toFixed(2)} MB</p>
+                                        </div>
+                                    </div>
+                                    <div className="flex gap-2">
+                                        <button
+                                            onClick={handleUpload}
+                                            className="btn btn-primary btn-sm"
+                                            disabled={uploading}
+                                        >
+                                            Upload
+                                        </button>
+                                        <button
+                                            onClick={() => {
+                                                setResumeFile(null);
+                                                if (fileInputRef.current) {
+                                                    fileInputRef.current.value = '';
+                                                }
+                                            }}
+                                            className="btn btn-ghost btn-sm"
+                                            disabled={uploading}
+                                        >
+                                            Cancel
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Uploading state */}
+                        {uploading && (
+                            <div className="bg-base-200 p-4 rounded-lg">
+                                <div className="flex items-center gap-3">
+                                    <span className="loading loading-spinner loading-sm"></span>
+                                    <span>Processing your resume...</span>
+                                </div>
+                                <progress className="progress progress-primary w-full mt-2"></progress>
+                            </div>
+                        )}
+
+                        {/* Resume preview */}
+                        {resumeUrl && resumeFilename && !resumeFile && !uploading && (
+                            <div className="space-y-4">
+                                <div className="flex justify-between items-center">
+                                    <h4 className="font-medium">Current Resume</h4>
+                                    <div className="flex gap-2">
+                                        <button
+                                            onClick={handleReplace}
+                                            className="btn btn-sm btn-outline gap-1"
+                                        >
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                                <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+                                            </svg>
+                                            Replace
+                                        </button>
+                                        <button
+                                            onClick={handleDelete}
+                                            className="btn btn-sm btn-error btn-outline gap-1"
+                                        >
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                                <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
+                                            </svg>
+                                            Delete
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div className="border border-base-300 rounded-lg overflow-hidden">
+                                    <FilePreview
+                                        url={resumeUrl}
+                                        filename={resumeFilename}
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Resume upload guidelines */}
+                        <div className="bg-base-200/50 p-4 rounded-lg mt-4">
+                            <h4 className="font-medium mb-2 flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-info" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fillRule="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 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+                                </svg>
+                                Resume Guidelines
+                            </h4>
+                            <ul className="list-disc list-inside text-sm opacity-70 space-y-1">
+                                <li>Accepted formats: PDF, DOCX</li>
+                                <li>Maximum file size: 50MB</li>
+                                <li>Keep your resume up-to-date for better opportunities</li>
+                                <li>Highlight your skills, experience, and education</li>
+                            </ul>
+                        </div>
+
+                        {/* Resume Benefits */}
+                        <div className="bg-primary/10 p-4 rounded-lg mt-4">
+                            <h4 className="font-medium mb-2 flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                                </svg>
+                                Why Upload Your Resume?
+                            </h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li className="text-primary-focus">Increase visibility to recruiters and industry partners</li>
+                                <li className="text-primary-focus">Get matched with relevant job opportunities</li>
+                                <li className="text-primary-focus">Simplify application process for IEEE UCSD events</li>
+                                <li className="text-primary-focus">Access personalized career resources and recommendations</li>
+                            </ul>
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}

src/components/dashboard/SettingsSection/UserProfileSettings.tsx

@@ -2,18 +2,195 @@ import { useState, useEffect } from 'react';
 import { Authentication } from '../../../scripts/pocketbase/Authentication';
 import { Update } from '../../../scripts/pocketbase/Update';
 import { Collections, type User } from '../../../schemas/pocketbase/schema';
-import allMajors from '../../../data/allUCSDMajors.txt?raw';
 import { toast } from 'react-hot-toast';
 
-export default function UserProfileSettings() {
+// Define the majors directly in the component file to avoid import issues
+const UCSD_MAJORS = [
+    "Astronomy & Astrophysics",
+    "Anthropology",
+    "Bioengineering",
+    "Biology with Specialization in Bioinformatics",
+    "Ecology, Behavior and Evolution",
+    "General Biology",
+    "Human Biology",
+    "Microbiology",
+    "Molecular and Cell Biology",
+    "Neurobiology / Physiology and Neuroscience",
+    "Biochemistry and Cell Biology",
+    "Biochemistry",
+    "Chemistry",
+    "Environmental Chemistry",
+    "Molecular Synthesis",
+    "Pharmacological Chemistry",
+    "Chinese Studies",
+    "Cinematic Arts",
+    "Classical Studies",
+    "Cognitive Science",
+    "Cognitive Science – Clinical Aspects of Cognition",
+    "Cognitive Science – Design and Interaction",
+    "Cognitive Science – Language and Culture",
+    "Cognitive Science – Machine Learning and Neural Computation",
+    "Cognitive Science – Neuroscience",
+    "Cognitive and Behavioral Neuroscience",
+    "Communication",
+    "Media Industries and Communication",
+    "Computer Engineering",
+    "Computer Science",
+    "Computer Science – Bioinformatics",
+    "Critical Gender Studies",
+    "Dance",
+    "Data Science",
+    "Business Economics",
+    "Economics",
+    "Economics and Mathematics – Joint Major",
+    "Economics-Public Policy",
+    "Education Sciences",
+    "Electrical Engineering",
+    "Electrical Engineering and Society",
+    "Engineering Physics",
+    "Environmental Systems (Earth Sciences)",
+    "Environmental Systems (Ecology, Behavior & Evolution)",
+    "Environmental Systems (Environmental Chemistry)",
+    "Environmental Systems (Environmental Policy)",
+    "Ethnic Studies",
+    "German Studies",
+    "Global Health",
+    "Global South Studies",
+    "Public Health",
+    "Public Health – Biostatistics",
+    "Public Health – Climate and Environmental Sciences",
+    "Public Health – Community Health Sciences",
+    "Public Health – Epidemiology",
+    "Public Health – Health Policy and Management Sciences",
+    "Public Health – Medicine Sciences",
+    "History",
+    "Human Developmental Sciences",
+    "Human Developmental Sciences – Equity and Diversity",
+    "Human Developmental Sciences – Healthy Aging",
+    "International Studies – Anthropology",
+    "International Studies – Economics",
+    "International Studies – Economics (Joint BA/MIA)",
+    "International Studies – History",
+    "International Studies – International Business",
+    "International Studies – International Business (Joint BA/MIA)",
+    "International Studies – Linguistics",
+    "International Studies – Literature",
+    "International Studies – Philosophy",
+    "International Studies – Political Science",
+    "International Studies – Political Science (Joint BA/MIA)",
+    "International Studies – Sociology",
+    "Italian Studies",
+    "Japanese Studies",
+    "Jewish Studies",
+    "Latin American Studies",
+    "Latin American Studies – Mexico",
+    "Latin American Studies – Migration and Border Studies",
+    "Linguistics",
+    "Linguistics – Cognition and Language",
+    "Linguistics – Language and Society",
+    "Linguistics: Language Studies",
+    "Linguistics – Speech and Language Sciences",
+    "Literary Arts",
+    "Literatures in English",
+    "Spanish Literature",
+    "World Literature and Culture",
+    "Mathematical Biology",
+    "Mathematics (Applied)",
+    "Mathematics",
+    "Mathematics – Applied Science",
+    "Mathematics – Computer Science",
+    "Mathematics – Secondary Education",
+    "Probability and Statistics",
+    "Aerospace Engineering",
+    "Aerospace Engineering – Aerothermodynamics",
+    "Aerospace Engineering – Astrodynamics and Space Applications",
+    "Aerospace Engineering – Flight Dynamics and Controls",
+    "Mechanical Engineering",
+    "Mechanical Engineering – Controls and Robotics",
+    "Mechanical Engineering – Fluid Mechanics and Thermal Systems",
+    "Mechanical Engineering – Materials Science and Engineering",
+    "Mechanical Engineering – Mechanics of Materials",
+    "Mechanical Engineering – Renewable Energy and Environmental Flows",
+    "Music",
+    "Music Humanities",
+    "Interdisciplinary Computing and the Arts",
+    "Chemical Engineering",
+    "NanoEngineering",
+    "Philosophy",
+    "General Physics",
+    "General Physics/Secondary Education",
+    "Physics",
+    "Physics – Astrophysics",
+    "Physics – Biophysics",
+    "Physics – Computational Physics",
+    "Physics – Earth Sciences",
+    "Physics – Materials Physics",
+    "Political Science",
+    "Political Science – American Politics",
+    "Political Science – Comparative Politics",
+    "Political Science – Data Analytics",
+    "Political Science – International Affairs",
+    "Political Science – International Relations",
+    "Political Science – Political Theory",
+    "Political Science – Public Law",
+    "Political Science – Public Policy",
+    "Political Science – Race, Ethnicity, and Politics",
+    "Psychology",
+    "Psychology – Clinical Psychology",
+    "Psychology – Cognitive Psychology",
+    "Psychology – Developmental Psychology",
+    "Psychology – Human Health",
+    "Psychology – Sensation and Perception",
+    "Psychology – Social Psychology",
+    "Business Psychology",
+    "Study of Religion",
+    "Russian, East European & Eurasian Studies",
+    "Geosciences",
+    "Marine Biology",
+    "Oceanic and Atmospheric Sciences",
+    "Sociology",
+    "Sociology – International Studies",
+    "Sociology – American Studies",
+    "Sociology – Science and Medicine",
+    "Sociology – Economy and Society",
+    "Sociology – Culture and Communication",
+    "Sociology – Social Inequality",
+    "Sociology – Law and Society",
+    "Structural Engineering",
+    "Structural Engineering – Aerospace Structures",
+    "Structural Engineering – Civil Structures",
+    "Structural Engineering – Geotechnical Engineering",
+    "Structural Engineering – Structural Health Monitoring/Non-Destructive Evaluation",
+    "Theatre",
+    "Undeclared – Humanities/Arts",
+    "Undeclared – Physical Sciences",
+    "Undeclared – Social Sciences",
+    "Urban Studies and Planning",
+    "Real Estate and Development",
+    "Art History/Criticism",
+    "Media",
+    "Speculative Design",
+    "Studio",
+    "Other"
+].sort();
+
+interface UserProfileSettingsProps {
+    logtoApiEndpoint?: string;
+}
+
+export default function UserProfileSettings({
+    logtoApiEndpoint: propLogtoApiEndpoint
+}: UserProfileSettingsProps) {
     const auth = Authentication.getInstance();
     const update = Update.getInstance();
     const [user, setUser] = useState<User | null>(null);
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
+    const [logtoUserId, setLogtoUserId] = useState('');
     const [formData, setFormData] = useState({
         name: '',
         email: '',
+        username: '',
         major: '',
         graduation_year: '',
         zelle_information: '',
@@ -21,38 +198,143 @@ export default function UserProfileSettings() {
         member_id: ''
     });
 
-    // Parse the majors list from the text file and sort alphabetically
-    const majorsList = allMajors
-        .split('\n')
-        .filter(major => major.trim() !== '')
-        .sort((a, b) => a.localeCompare(b));
+    // Access environment variables directly
+    const envLogtoApiEndpoint = import.meta.env.LOGTO_API_ENDPOINT;
+
+    // Use environment variables or props (fallback)
+    const logtoApiEndpoint = envLogtoApiEndpoint || propLogtoApiEndpoint;
 
     useEffect(() => {
         const loadUserData = async () => {
             try {
                 const currentUser = auth.getCurrentUser();
-                if (currentUser) {
+                if (!currentUser) {
+                    // Don't show error toast on dashboard page for unauthenticated users
+                    if (!window.location.pathname.includes('/dashboard')) {
+                        throw new Error('User not authenticated');
+                    }
+                    return;
+                }
+
+                // Get the Logto user ID from PocketBase's external auth collection
+                const pb = auth.getPocketBase();
+                try {
+                    const externalAuthRecord = await pb.collection('_externalAuths').getFirstListItem(`recordRef="${currentUser.id}" && provider="oidc"`);
+                    const logtoId = externalAuthRecord.providerId;
+                    if (!logtoId) {
+                        throw new Error('No Logto ID found in external auth record');
+                    }
+                    setLogtoUserId(logtoId);
+
+                    // Fetch user data from Logto through our server-side API
+                    const logtoResponse = await fetch('/api/get-logto-user', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            userId: logtoId,
+                            logtoApiEndpoint: logtoApiEndpoint
+                        })
+                    });
+
+                    if (!logtoResponse.ok) {
+                        throw new Error('Failed to fetch Logto user data');
+                    }
+
+                    const logtoUser = await logtoResponse.json();
+                    // Extract username from Logto data or email if not set
+                    const defaultUsername = logtoUser.data?.username || currentUser.email?.split('@')[0] || '';
+
+                    // Remove all the major matching logic and just use the server value directly
                     setUser(currentUser);
                     setFormData({
                         name: currentUser.name || '',
                         email: currentUser.email || '',
+                        username: defaultUsername,
                         major: currentUser.major || '',
                         graduation_year: currentUser.graduation_year?.toString() || '',
                         zelle_information: currentUser.zelle_information || '',
                         pid: currentUser.pid || '',
                         member_id: currentUser.member_id || ''
                     });
+
+                    // If username is blank in Logto, update it
+                    if (!logtoUser.data?.username && currentUser.email) {
+                        try {
+                            const emailUsername = currentUser.email.split('@')[0];
+                            await updateLogtoUser(logtoId, emailUsername);
+                        } catch (error) {
+                            console.error('Error setting default username:', error);
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error fetching external auth record:', error);
+                    // Don't show error toast on dashboard page for unauthenticated users
+                    if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) {
+                        toast.error('Could not determine your user ID. Please try again later or contact support.');
+                    }
                 }
             } catch (error) {
                 console.error('Error loading user data:', error);
-                toast.error('Failed to load user data. Please try again later.');
+                // Don't show error toast on dashboard page for unauthenticated users
+                if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) {
+                    toast.error('Failed to load user data. Please try again later.');
+                }
             } finally {
                 setLoading(false);
             }
         };
 
         loadUserData();
-    }, []);
+    }, [logtoApiEndpoint]);
+
+    const updateLogtoUser = async (userId: string, username: string) => {
+        try {
+            // First get the current user data from Logto through our server-side API
+            const getCurrentResponse = await fetch('/api/get-logto-user', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    userId,
+                    logtoApiEndpoint
+                })
+            });
+
+            if (!getCurrentResponse.ok) {
+                throw new Error('Failed to fetch current Logto user data');
+            }
+
+            const currentLogtoUser = await getCurrentResponse.json();
+
+            // Now update the user with new username through our server-side API
+            const response = await fetch('/api/update-logto-user', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    userId,
+                    username,
+                    logtoApiEndpoint,
+                    profile: {
+                        ...currentLogtoUser.data?.profile,
+                        preferredUsername: username
+                    }
+                })
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'Failed to update Logto username');
+            }
+        } catch (error) {
+            console.error('Error updating Logto username:', error);
+            throw error;
+        }
+    };
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
         const { name, value } = e.target;
@@ -68,6 +350,12 @@ export default function UserProfileSettings() {
 
         try {
             if (!user) throw new Error('User not authenticated');
+            if (!logtoUserId) throw new Error('Could not determine your user ID');
+
+            // Update username in Logto if changed
+            if (formData.username !== user.username) {
+                await updateLogtoUser(logtoUserId, formData.username);
+            }
 
             const updateData: Partial<User> = {
                 name: formData.name,
@@ -131,6 +419,22 @@ export default function UserProfileSettings() {
                     />
                 </div>
 
+                <div className="form-control">
+                    <label className="label">
+                        <span className="label-text">Username</span>
+                    </label>
+                    <input
+                        type="text"
+                        name="username"
+                        value={formData.username}
+                        onChange={handleInputChange}
+                        className="input input-bordered w-full"
+                        pattern="^[A-Z_a-z]\w*$"
+                        title="Username must start with a letter or underscore and can contain only letters, numbers, and underscores"
+                        required
+                    />
+                </div>
+
                 <div className="form-control">
                     <label className="label">
                         <span className="label-text">Email Address</span>
@@ -194,11 +498,21 @@ export default function UserProfileSettings() {
                             className="select select-bordered w-full"
                         >
                             <option value="">Select a major</option>
-                            {majorsList.map((major, index) => (
-                                <option key={index} value={major}>
-                                    {major}
-                                </option>
-                            ))}
+                            {(() => {
+                                // Create a list including both standard majors and the user's major if it's not in the list
+                                const displayMajors = [...UCSD_MAJORS];
+
+                                if (formData.major && !displayMajors.includes(formData.major)) {
+                                    displayMajors.push(formData.major);
+                                    displayMajors.sort((a, b) => a.localeCompare(b));
+                                }
+
+                                return displayMajors.map((major, index) => (
+                                    <option key={index} value={major}>
+                                        {major}
+                                    </option>
+                                ));
+                            })()}
                         </select>
                     </div>
 

src/components/dashboard/SponsorAnalytics.astro

@@ -1,99 +0,0 @@
----
-// Sponsor Analytics Component
----
-
-<div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-        <h2 class="card-title text-2xl mb-4">Analytics Dashboard</h2>
-
-        <!-- Metrics Overview -->
-        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-6">
-            <div class="stat bg-base-200 rounded-box p-4">
-                <div class="stat-title">Resume Downloads</div>
-                <div class="stat-value text-primary">89</div>
-                <div class="stat-desc">↗︎ 14 (30 days)</div>
-            </div>
-
-            <div class="stat bg-base-200 rounded-box p-4">
-                <div class="stat-title">Event Attendance</div>
-                <div class="stat-value">45</div>
-                <div class="stat-desc">↘︎ 5 (30 days)</div>
-            </div>
-
-            <div class="stat bg-base-200 rounded-box p-4">
-                <div class="stat-title">Student Interactions</div>
-                <div class="stat-value text-secondary">124</div>
-                <div class="stat-desc">↗︎ 32 (30 days)</div>
-            </div>
-
-            <div class="stat bg-base-200 rounded-box p-4">
-                <div class="stat-title">Workshop Engagement</div>
-                <div class="stat-value">92%</div>
-                <div class="stat-desc">↗︎ 8% (30 days)</div>
-            </div>
-        </div>
-
-        <!-- Detailed Analytics -->
-        <div class="grid gap-6 md:grid-cols-2">
-            <!-- Event Performance -->
-            <div class="card bg-base-200">
-                <div class="card-body">
-                    <h3 class="card-title text-lg">Event Performance</h3>
-                    <div class="overflow-x-auto">
-                        <table class="table table-sm">
-                            <thead>
-                                <tr>
-                                    <th>Event</th>
-                                    <th>Attendance</th>
-                                    <th>Rating</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>Tech Talk</td>
-                                    <td>32</td>
-                                    <td>4.8/5</td>
-                                </tr>
-                                <tr>
-                                    <td>Workshop</td>
-                                    <td>28</td>
-                                    <td>4.6/5</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Resume Analytics -->
-            <div class="card bg-base-200">
-                <div class="card-body">
-                    <h3 class="card-title text-lg">Resume Analytics</h3>
-                    <div class="overflow-x-auto">
-                        <table class="table table-sm">
-                            <thead>
-                                <tr>
-                                    <th>Major</th>
-                                    <th>Downloads</th>
-                                    <th>Trend</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>Computer Science</td>
-                                    <td>45</td>
-                                    <td>↗︎</td>
-                                </tr>
-                                <tr>
-                                    <td>Electrical Engineering</td>
-                                    <td>32</td>
-                                    <td>↗︎</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

src/components/dashboard/SponsorAnalyticsSection.astro

@@ -0,0 +1,334 @@
+---
+import EventAttendanceChart from "./SponsorAnalyticsSection/EventAttendanceChart";
+import EventTypeDistribution from "./SponsorAnalyticsSection/EventTypeDistribution";
+import MajorDistribution from "./SponsorAnalyticsSection/MajorDistribution";
+import EventEngagementMetrics from "./SponsorAnalyticsSection/EventEngagementMetrics";
+import EventTimeline from "./SponsorAnalyticsSection/EventTimeline";
+---
+
+<div class="space-y-6">
+    <div
+        class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+    >
+        <div>
+            <h2 class="text-2xl font-bold">Event Analytics</h2>
+            <p class="text-base-content/70">
+                Insights and analytics about IEEE UCSD events and student
+                engagement
+            </p>
+        </div>
+        <div class="flex items-center gap-2">
+            <div class="dropdown dropdown-end">
+                <div tabindex="0" role="button" class="btn btn-sm">
+                    <span>Time Range</span>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="lucide lucide-chevron-down"
+                    >
+                        <path d="m6 9 6 6 6-6"></path>
+                    </svg>
+                </div>
+                <ul
+                    tabindex="0"
+                    class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+                >
+                    <li><a data-time-range="30">Last 30 Days</a></li>
+                    <li><a data-time-range="90">Last 90 Days</a></li>
+                    <li><a data-time-range="180">Last 6 Months</a></li>
+                    <li><a data-time-range="365">Last Year</a></li>
+                    <li><a data-time-range="all">All Time</a></li>
+                </ul>
+            </div>
+            <button id="refreshAnalyticsBtn" class="btn btn-sm btn-outline">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="lucide lucide-refresh-cw"
+                >
+                    <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+                    ></path>
+                    <path d="M21 3v5h-5"></path>
+                    <path
+                        d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+                    ></path>
+                    <path d="M3 21v-5h5"></path>
+                </svg>
+                <span>Refresh</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Summary Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+                <h3 class="text-sm font-medium text-base-content/70">
+                    Total Events
+                </h3>
+                <p class="text-3xl font-bold" id="totalEventsCount">--</p>
+                <div class="text-xs text-base-content/50 mt-1">
+                    <span id="eventsTrend" class="font-medium"></span> vs previous
+                    period
+                </div>
+            </div>
+        </div>
+
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+                <h3 class="text-sm font-medium text-base-content/70">
+                    Total Attendees
+                </h3>
+                <p class="text-3xl font-bold" id="totalAttendeesCount">--</p>
+                <div class="text-xs text-base-content/50 mt-1">
+                    <span id="attendeesTrend" class="font-medium"></span> vs previous
+                    period
+                </div>
+            </div>
+        </div>
+
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+                <h3 class="text-sm font-medium text-base-content/70">
+                    Unique Students
+                </h3>
+                <p class="text-3xl font-bold" id="uniqueStudentsCount">--</p>
+                <div class="text-xs text-base-content/50 mt-1">
+                    <span id="uniqueStudentsTrend" class="font-medium"></span> vs
+                    previous period
+                </div>
+            </div>
+        </div>
+
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+                <h3 class="text-sm font-medium text-base-content/70">
+                    Avg. Attendance
+                </h3>
+                <p class="text-3xl font-bold" id="avgAttendanceCount">--</p>
+                <div class="text-xs text-base-content/50 mt-1">
+                    <span id="avgAttendanceTrend" class="font-medium"></span> vs
+                    previous period
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts Row 1 -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body">
+                <h3 class="card-title text-lg">Event Attendance Over Time</h3>
+                <div class="h-80">
+                    <EventAttendanceChart client:load />
+                </div>
+            </div>
+        </div>
+
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body">
+                <h3 class="card-title text-lg">Major Distribution</h3>
+                <div class="h-80">
+                    <MajorDistribution client:load />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts Row 2 -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body">
+                <h3 class="card-title text-lg">Event Type Distribution</h3>
+                <div class="h-80">
+                    <EventTypeDistribution client:load />
+                </div>
+            </div>
+        </div>
+
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body">
+                <h3 class="card-title text-lg">Engagement Metrics</h3>
+                <div class="h-80">
+                    <EventEngagementMetrics client:load />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Event Timeline -->
+    <div class="card bg-base-100 shadow-md">
+        <div class="card-body">
+            <h3 class="card-title text-lg">Event Timeline</h3>
+            <div class="overflow-x-auto">
+                <EventTimeline client:load />
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    import { Authentication } from "../../scripts/pocketbase/Authentication";
+    import { Get } from "../../scripts/pocketbase/Get";
+    import { Realtime } from "../../scripts/pocketbase/Realtime";
+    import { Collections } from "../../schemas/pocketbase/schema";
+
+    // Initialize services
+    const auth = Authentication.getInstance();
+    const get = Get.getInstance();
+    const realtime = Realtime.getInstance();
+
+    // Default time range (30 days)
+    let currentTimeRange = 30;
+
+    // Initialize the analytics dashboard
+    async function initAnalytics() {
+        if (!auth.isAuthenticated()) {
+            console.error("User not authenticated");
+            return;
+        }
+
+        try {
+            await loadSummaryData(currentTimeRange);
+
+            // Set up event listeners
+            document
+                .querySelectorAll("[data-time-range]")
+                .forEach((element) => {
+                    element.addEventListener("click", (e) => {
+                        const range =
+                            parseInt(
+                                e.currentTarget.getAttribute("data-time-range")
+                            ) || 30;
+                        currentTimeRange = isNaN(range) ? "all" : range;
+                        loadSummaryData(currentTimeRange);
+                    });
+                });
+
+            // Refresh button
+            document
+                .getElementById("refreshAnalyticsBtn")
+                ?.addEventListener("click", () => {
+                    loadSummaryData(currentTimeRange);
+                });
+
+            // Set up realtime updates
+            setupRealtimeUpdates();
+        } catch (error) {
+            console.error("Error initializing analytics:", error);
+        }
+    }
+
+    // Load summary data
+    async function loadSummaryData(timeRange) {
+        try {
+            // Calculate date range
+            const endDate = new Date();
+            let startDate;
+
+            if (timeRange === "all") {
+                startDate = new Date(0); // Beginning of time
+            } else {
+                startDate = new Date();
+                startDate.setDate(startDate.getDate() - timeRange);
+            }
+
+            // Format dates for filter
+            const startDateStr = startDate.toISOString();
+            const endDateStr = endDate.toISOString();
+
+            // Build filter
+            const filter =
+                timeRange === "all"
+                    ? "published = true"
+                    : `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
+
+            // Get events
+            const events = await get.getAll(Collections.EVENTS, filter);
+
+            // Get event attendees
+            const attendeesFilter =
+                timeRange === "all"
+                    ? ""
+                    : `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
+
+            const attendees = await get.getAll(
+                Collections.EVENT_ATTENDEES,
+                attendeesFilter
+            );
+
+            // Calculate metrics
+            const totalEvents = events.length;
+            const totalAttendees = attendees.length;
+
+            // Calculate unique students
+            const uniqueStudentIds = new Set(attendees.map((a) => a.user));
+            const uniqueStudents = uniqueStudentIds.size;
+
+            // Calculate average attendance
+            const avgAttendance =
+                totalEvents > 0 ? Math.round(totalAttendees / totalEvents) : 0;
+
+            // Update UI
+            document.getElementById("totalEventsCount").textContent =
+                totalEvents;
+            document.getElementById("totalAttendeesCount").textContent =
+                totalAttendees;
+            document.getElementById("uniqueStudentsCount").textContent =
+                uniqueStudents;
+            document.getElementById("avgAttendanceCount").textContent =
+                avgAttendance;
+
+            // Calculate trends (simplified - would need previous period data for real implementation)
+            document.getElementById("eventsTrend").textContent = "+5%";
+            document.getElementById("attendeesTrend").textContent = "+12%";
+            document.getElementById("uniqueStudentsTrend").textContent = "+8%";
+            document.getElementById("avgAttendanceTrend").textContent = "+3%";
+
+            // Dispatch custom event to notify charts to update
+            window.dispatchEvent(
+                new CustomEvent("analyticsDataUpdated", {
+                    detail: {
+                        events,
+                        attendees,
+                        timeRange,
+                    },
+                })
+            );
+        } catch (error) {
+            console.error("Error loading summary data:", error);
+        }
+    }
+
+    // Set up realtime updates
+    function setupRealtimeUpdates() {
+        // Subscribe to events collection
+        realtime.subscribeToCollection(Collections.EVENTS, (data) => {
+            console.log("Event data updated:", data);
+            loadSummaryData(currentTimeRange);
+        });
+
+        // Subscribe to event attendees collection
+        realtime.subscribeToCollection(Collections.EVENT_ATTENDEES, (data) => {
+            console.log("Attendee data updated:", data);
+            loadSummaryData(currentTimeRange);
+        });
+    }
+
+    // Initialize when document is ready
+    document.addEventListener("DOMContentLoaded", initAnalytics);
+</script>

src/components/dashboard/SponsorAnalyticsSection/EventAttendanceChart.tsx

@@ -0,0 +1,249 @@
+import { useState, useEffect, useRef } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend,
+    BarElement,
+} from 'chart.js';
+import type { ChartOptions } from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+export default function EventAttendanceChart() {
+    const [chartData, setChartData] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
+    const chartRef = useRef<any>(null);
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        // Listen for analytics data updates from the parent component
+        const handleAnalyticsUpdate = (event: CustomEvent) => {
+            const { events, attendees, timeRange } = event.detail;
+            setTimeRange(timeRange);
+            processChartData(events, attendees);
+        };
+
+        window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+
+        // Initial data load
+        loadData();
+
+        return () => {
+            window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+        };
+    }, []);
+
+    const loadData = async () => {
+        try {
+            setLoading(true);
+
+            // Calculate date range
+            const endDate = new Date();
+            let startDate;
+
+            if (timeRange === "all") {
+                startDate = new Date(0); // Beginning of time
+            } else {
+                startDate = new Date();
+                startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
+            }
+
+            // Format dates for filter
+            const startDateStr = startDate.toISOString();
+            const endDateStr = endDate.toISOString();
+
+            // Build filter
+            const filter = timeRange === "all"
+                ? "published = true"
+                : `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
+
+            // Get events
+            const events = await get.getAll<Event>(Collections.EVENTS, filter);
+
+            // Get event attendees
+            const attendeesFilter = timeRange === "all"
+                ? ""
+                : `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
+
+            const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
+
+            processChartData(events, attendees);
+        } catch (err) {
+            console.error('Error loading event attendance data:', err);
+            setError('Failed to load event attendance data');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const processChartData = (events: Event[], attendees: EventAttendee[]) => {
+        if (!events || events.length === 0) {
+            setChartData(null);
+            return;
+        }
+
+        // Group events by date
+        const eventsByDate = new Map<string, Event[]>();
+        events.forEach(event => {
+            // Format date to YYYY-MM-DD
+            const date = new Date(event.start_date);
+            const dateStr = date.toISOString().split('T')[0];
+
+            if (!eventsByDate.has(dateStr)) {
+                eventsByDate.set(dateStr, []);
+            }
+            eventsByDate.get(dateStr)!.push(event);
+        });
+
+        // Count attendees per event
+        const attendeesByEvent = new Map<string, number>();
+        attendees.forEach(attendee => {
+            if (!attendeesByEvent.has(attendee.event)) {
+                attendeesByEvent.set(attendee.event, 0);
+            }
+            attendeesByEvent.set(attendee.event, attendeesByEvent.get(attendee.event)! + 1);
+        });
+
+        // Calculate average attendance per date
+        const attendanceByDate = new Map<string, { total: number, count: number }>();
+        events.forEach(event => {
+            const date = new Date(event.start_date);
+            const dateStr = date.toISOString().split('T')[0];
+
+            if (!attendanceByDate.has(dateStr)) {
+                attendanceByDate.set(dateStr, { total: 0, count: 0 });
+            }
+
+            const attendeeCount = attendeesByEvent.get(event.id) || 0;
+            const current = attendanceByDate.get(dateStr)!;
+            attendanceByDate.set(dateStr, {
+                total: current.total + attendeeCount,
+                count: current.count + 1
+            });
+        });
+
+        // Sort dates
+        const sortedDates = Array.from(attendanceByDate.keys()).sort();
+
+        // Calculate average attendance per date
+        const averageAttendance = sortedDates.map(date => {
+            const { total, count } = attendanceByDate.get(date)!;
+            return count > 0 ? Math.round(total / count) : 0;
+        });
+
+        // Format dates for display
+        const formattedDates = sortedDates.map(date => {
+            const [year, month, day] = date.split('-');
+            return `${month}/${day}`;
+        });
+
+        // Create chart data
+        const data = {
+            labels: formattedDates,
+            datasets: [
+                {
+                    label: 'Average Attendance',
+                    data: averageAttendance,
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    tension: 0.4,
+                    fill: true,
+                }
+            ]
+        };
+
+        setChartData(data);
+    };
+
+    const chartOptions: ChartOptions<'line'> = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'top',
+            },
+            tooltip: {
+                mode: 'index',
+                intersect: false,
+            },
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Average Attendance'
+                }
+            },
+            x: {
+                title: {
+                    display: true,
+                    text: 'Date'
+                }
+            }
+        },
+        interaction: {
+            mode: 'nearest',
+            axis: 'x',
+            intersect: false
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-error">{error}</div>
+            </div>
+        );
+    }
+
+    if (!chartData) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-center text-base-content/70">
+                    <p>No event data available for the selected time period</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="h-full">
+            <Line data={chartData} options={chartOptions} />
+        </div>
+    );
+}

src/components/dashboard/SponsorAnalyticsSection/EventEngagementMetrics.tsx

@@ -0,0 +1,334 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee, User } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    RadialLinearScale,
+} from 'chart.js';
+import { Radar } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    RadialLinearScale,
+    Title,
+    Tooltip,
+    Legend
+);
+
+export default function EventEngagementMetrics() {
+    const [chartData, setChartData] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        // Listen for analytics data updates from the parent component
+        const handleAnalyticsUpdate = (event: CustomEvent) => {
+            const { events, attendees, timeRange } = event.detail;
+            setTimeRange(timeRange);
+            loadUserData(events, attendees);
+        };
+
+        window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+
+        // Initial data load
+        loadData();
+
+        return () => {
+            window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+        };
+    }, []);
+
+    const loadData = async () => {
+        try {
+            setLoading(true);
+
+            // Calculate date range
+            const endDate = new Date();
+            let startDate;
+
+            if (timeRange === "all") {
+                startDate = new Date(0); // Beginning of time
+            } else {
+                startDate = new Date();
+                startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
+            }
+
+            // Format dates for filter
+            const startDateStr = startDate.toISOString();
+            const endDateStr = endDate.toISOString();
+
+            // Build filter
+            const filter = timeRange === "all"
+                ? "published = true"
+                : `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
+
+            // Get events
+            const events = await get.getAll<Event>(Collections.EVENTS, filter);
+
+            // Get event attendees
+            const attendeesFilter = timeRange === "all"
+                ? ""
+                : `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
+
+            const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
+
+            await loadUserData(events, attendees);
+        } catch (err) {
+            console.error('Error loading engagement metrics data:', err);
+            setError('Failed to load engagement metrics data');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadUserData = async (events: Event[], attendees: EventAttendee[]) => {
+        try {
+            if (!events || events.length === 0 || !attendees || attendees.length === 0) {
+                setChartData(null);
+                return;
+            }
+
+            // Get unique user IDs from attendees
+            const userIds = [...new Set(attendees.map(a => a.user))];
+
+            // Fetch user data to get graduation years
+            const users = await get.getMany<User>(Collections.USERS, userIds);
+
+            processChartData(events, attendees, users);
+        } catch (err) {
+            console.error('Error loading user data:', err);
+            setError('Failed to load user data');
+        }
+    };
+
+    const processChartData = (events: Event[], attendees: EventAttendee[], users: User[]) => {
+        if (!events || events.length === 0 || !attendees || attendees.length === 0) {
+            setChartData(null);
+            return;
+        }
+
+        // Create a map of user IDs to graduation years
+        const userGradYearMap = new Map<string, number>();
+        users.forEach(user => {
+            if (user.graduation_year) {
+                userGradYearMap.set(user.id, user.graduation_year);
+            }
+        });
+
+        // Calculate metrics
+
+        // 1. Attendance by time of day
+        const timeOfDayAttendance = {
+            'Morning (8am-12pm)': 0,
+            'Afternoon (12pm-5pm)': 0,
+            'Evening (5pm-9pm)': 0,
+            'Night (9pm-8am)': 0,
+        };
+
+        events.forEach(event => {
+            const startDate = new Date(event.start_date);
+            const hour = startDate.getHours();
+
+            // Count the event in the appropriate time slot
+            if (hour >= 8 && hour < 12) {
+                timeOfDayAttendance['Morning (8am-12pm)']++;
+            } else if (hour >= 12 && hour < 17) {
+                timeOfDayAttendance['Afternoon (12pm-5pm)']++;
+            } else if (hour >= 17 && hour < 21) {
+                timeOfDayAttendance['Evening (5pm-9pm)']++;
+            } else {
+                timeOfDayAttendance['Night (9pm-8am)']++;
+            }
+        });
+
+        // 2. Attendance by day of week
+        const dayOfWeekAttendance = {
+            'Sunday': 0,
+            'Monday': 0,
+            'Tuesday': 0,
+            'Wednesday': 0,
+            'Thursday': 0,
+            'Friday': 0,
+            'Saturday': 0,
+        };
+
+        const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        events.forEach(event => {
+            const startDate = new Date(event.start_date);
+            const dayOfWeek = daysOfWeek[startDate.getDay()];
+            // Use type assertion to avoid TypeScript error
+            (dayOfWeekAttendance as Record<string, number>)[dayOfWeek]++;
+        });
+
+        // 3. Attendance by graduation year
+        const gradYearAttendance: Record<string, number> = {};
+        attendees.forEach(attendee => {
+            const userId = attendee.user;
+            const gradYear = userGradYearMap.get(userId);
+
+            if (gradYear) {
+                const gradYearStr = gradYear.toString();
+                if (!gradYearAttendance[gradYearStr]) {
+                    gradYearAttendance[gradYearStr] = 0;
+                }
+                gradYearAttendance[gradYearStr]++;
+            }
+        });
+
+        // 4. Food vs. No Food events
+        const foodEvents = events.filter(event => event.has_food).length;
+        const noFoodEvents = events.length - foodEvents;
+
+        // 5. Average attendance per event
+        const attendanceByEvent = new Map<string, number>();
+        attendees.forEach(attendee => {
+            if (!attendanceByEvent.has(attendee.event)) {
+                attendanceByEvent.set(attendee.event, 0);
+            }
+            attendanceByEvent.set(attendee.event, attendanceByEvent.get(attendee.event)! + 1);
+        });
+
+        const avgAttendance = events.length > 0
+            ? Math.round(attendees.length / events.length)
+            : 0;
+
+        // Prepare radar chart data
+        // Normalize all metrics to a 0-100 scale for the radar chart
+        const maxTimeOfDay = Math.max(...Object.values(timeOfDayAttendance));
+        const maxDayOfWeek = Math.max(...Object.values(dayOfWeekAttendance));
+        const foodRatio = events.length > 0 ? (foodEvents / events.length) * 100 : 0;
+
+        // Calculate repeat attendance rate (% of users who attended more than one event)
+        const userAttendanceCounts = new Map<string, number>();
+        attendees.forEach(attendee => {
+            if (!userAttendanceCounts.has(attendee.user)) {
+                userAttendanceCounts.set(attendee.user, 0);
+            }
+            userAttendanceCounts.set(attendee.user, userAttendanceCounts.get(attendee.user)! + 1);
+        });
+
+        const repeatAttendees = [...userAttendanceCounts.values()].filter(count => count > 1).length;
+        const repeatRate = userAttendanceCounts.size > 0
+            ? (repeatAttendees / userAttendanceCounts.size) * 100
+            : 0;
+
+        // Normalize metrics for radar chart (0-100 scale)
+        const normalizeValue = (value: number, max: number) => max > 0 ? (value / max) * 100 : 0;
+
+        const radarData = {
+            labels: [
+                'Morning Events',
+                'Afternoon Events',
+                'Evening Events',
+                'Weekday Events',
+                'Weekend Events',
+                'Food Events',
+                'Repeat Attendance'
+            ],
+            datasets: [
+                {
+                    label: 'Engagement Metrics',
+                    data: [
+                        normalizeValue(timeOfDayAttendance['Morning (8am-12pm)'], maxTimeOfDay),
+                        normalizeValue(timeOfDayAttendance['Afternoon (12pm-5pm)'], maxTimeOfDay),
+                        normalizeValue(timeOfDayAttendance['Evening (5pm-9pm)'], maxTimeOfDay),
+                        normalizeValue(
+                            dayOfWeekAttendance['Monday'] +
+                            dayOfWeekAttendance['Tuesday'] +
+                            dayOfWeekAttendance['Wednesday'] +
+                            dayOfWeekAttendance['Thursday'] +
+                            dayOfWeekAttendance['Friday'],
+                            maxDayOfWeek * 5
+                        ),
+                        normalizeValue(
+                            dayOfWeekAttendance['Saturday'] +
+                            dayOfWeekAttendance['Sunday'],
+                            maxDayOfWeek * 2
+                        ),
+                        foodRatio,
+                        repeatRate
+                    ],
+                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 2,
+                    pointBackgroundColor: 'rgba(54, 162, 235, 1)',
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
+                }
+            ]
+        };
+
+        setChartData(radarData);
+    };
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'top' as const,
+            },
+            tooltip: {
+                callbacks: {
+                    label: function (context: any) {
+                        return `${context.label}: ${Math.round(context.raw)}%`;
+                    }
+                }
+            }
+        },
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-error">{error}</div>
+            </div>
+        );
+    }
+
+    if (!chartData) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-center text-base-content/70">
+                    <p>No event data available for the selected time period</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="h-full">
+            <Radar data={chartData} options={chartOptions} />
+        </div>
+    );
+}

src/components/dashboard/SponsorAnalyticsSection/EventTimeline.tsx

@@ -0,0 +1,198 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+export default function EventTimeline() {
+    const [events, setEvents] = useState<Event[]>([]);
+    const [attendeesByEvent, setAttendeesByEvent] = useState<Map<string, number>>(new Map());
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        // Listen for analytics data updates from the parent component
+        const handleAnalyticsUpdate = (event: CustomEvent) => {
+            const { events, attendees, timeRange } = event.detail;
+            setTimeRange(timeRange);
+            processData(events, attendees);
+        };
+
+        window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+
+        // Initial data load
+        loadData();
+
+        return () => {
+            window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+        };
+    }, []);
+
+    const loadData = async () => {
+        try {
+            setLoading(true);
+
+            // Calculate date range
+            const endDate = new Date();
+            let startDate;
+
+            if (timeRange === "all") {
+                startDate = new Date(0); // Beginning of time
+            } else {
+                startDate = new Date();
+                startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
+            }
+
+            // Format dates for filter
+            const startDateStr = startDate.toISOString();
+            const endDateStr = endDate.toISOString();
+
+            // Build filter
+            const filter = timeRange === "all"
+                ? "published = true"
+                : `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
+
+            // Get events
+            const events = await get.getAll<Event>(Collections.EVENTS, filter, "start_date");
+
+            // Get event attendees
+            const attendeesFilter = timeRange === "all"
+                ? ""
+                : `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
+
+            const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
+
+            processData(events, attendees);
+        } catch (err) {
+            console.error('Error loading event timeline data:', err);
+            setError('Failed to load event timeline data');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const processData = (events: Event[], attendees: EventAttendee[]) => {
+        if (!events || events.length === 0) {
+            setEvents([]);
+            setAttendeesByEvent(new Map());
+            return;
+        }
+
+        // Sort events by date (newest first)
+        const sortedEvents = [...events].sort((a, b) => {
+            return new Date(b.start_date).getTime() - new Date(a.start_date).getTime();
+        });
+
+        // Count attendees per event
+        const attendeesByEvent = new Map<string, number>();
+        attendees.forEach(attendee => {
+            if (!attendeesByEvent.has(attendee.event)) {
+                attendeesByEvent.set(attendee.event, 0);
+            }
+            attendeesByEvent.set(attendee.event, attendeesByEvent.get(attendee.event)! + 1);
+        });
+
+        setEvents(sortedEvents);
+        setAttendeesByEvent(attendeesByEvent);
+    };
+
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            weekday: 'short',
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+
+    const formatDuration = (startDate: string, endDate: string) => {
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        const durationMs = end.getTime() - start.getTime();
+        const hours = Math.floor(durationMs / (1000 * 60 * 60));
+        const minutes = Math.floor((durationMs % (1000 * 60 * 60)) / (1000 * 60));
+
+        if (hours === 0) {
+            return `${minutes} min`;
+        } else if (minutes === 0) {
+            return `${hours} hr`;
+        } else {
+            return `${hours} hr ${minutes} min`;
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center py-10">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="alert alert-error">
+                <div className="flex-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                    </svg>
+                    <label>{error}</label>
+                </div>
+            </div>
+        );
+    }
+
+    if (events.length === 0) {
+        return (
+            <div className="text-center py-10">
+                <p className="text-base-content/70">No events found for the selected time period</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="overflow-x-auto">
+            <table className="table w-full">
+                <thead>
+                    <tr>
+                        <th>Event Name</th>
+                        <th>Date</th>
+                        <th>Duration</th>
+                        <th>Location</th>
+                        <th>Attendees</th>
+                        <th>Food</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {events.map(event => (
+                        <tr key={event.id} className="hover">
+                            <td className="font-medium">{event.event_name}</td>
+                            <td>{formatDate(event.start_date)}</td>
+                            <td>{formatDuration(event.start_date, event.end_date)}</td>
+                            <td>{event.location}</td>
+                            <td>
+                                <div className="badge badge-primary">
+                                    {attendeesByEvent.get(event.id) || 0}
+                                </div>
+                            </td>
+                            <td>
+                                {event.has_food ? (
+                                    <div className="badge badge-success">Yes</div>
+                                ) : (
+                                    <div className="badge badge-ghost">No</div>
+                                )}
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}

src/components/dashboard/SponsorAnalyticsSection/EventTypeDistribution.tsx

@@ -0,0 +1,205 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+    Chart as ChartJS,
+    ArcElement,
+    Tooltip,
+    Legend,
+    CategoryScale,
+    LinearScale,
+} from 'chart.js';
+import { Pie } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+    ArcElement,
+    Tooltip,
+    Legend,
+    CategoryScale,
+    LinearScale
+);
+
+// Define event types and their colors
+const EVENT_TYPES = [
+    { name: 'Social', key: 'social', color: 'rgba(255, 99, 132, 0.8)' },
+    { name: 'Technical', key: 'technical', color: 'rgba(54, 162, 235, 0.8)' },
+    { name: 'Outreach', key: 'outreach', color: 'rgba(255, 206, 86, 0.8)' },
+    { name: 'Professional', key: 'professional', color: 'rgba(75, 192, 192, 0.8)' },
+    { name: 'Projects', key: 'projects', color: 'rgba(153, 102, 255, 0.8)' },
+    { name: 'Other', key: 'other', color: 'rgba(255, 159, 64, 0.8)' },
+];
+
+export default function EventTypeDistribution() {
+    const [chartData, setChartData] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        // Listen for analytics data updates from the parent component
+        const handleAnalyticsUpdate = (event: CustomEvent) => {
+            const { events, attendees, timeRange } = event.detail;
+            setTimeRange(timeRange);
+            processChartData(events, attendees);
+        };
+
+        window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+
+        // Initial data load
+        loadData();
+
+        return () => {
+            window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+        };
+    }, []);
+
+    const loadData = async () => {
+        try {
+            setLoading(true);
+
+            // Calculate date range
+            const endDate = new Date();
+            let startDate;
+
+            if (timeRange === "all") {
+                startDate = new Date(0); // Beginning of time
+            } else {
+                startDate = new Date();
+                startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
+            }
+
+            // Format dates for filter
+            const startDateStr = startDate.toISOString();
+            const endDateStr = endDate.toISOString();
+
+            // Build filter
+            const filter = timeRange === "all"
+                ? "published = true"
+                : `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
+
+            // Get events
+            const events = await get.getAll<Event>(Collections.EVENTS, filter);
+
+            // Get event attendees
+            const attendeesFilter = timeRange === "all"
+                ? ""
+                : `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
+
+            const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
+
+            processChartData(events, attendees);
+        } catch (err) {
+            console.error('Error loading event type distribution data:', err);
+            setError('Failed to load event type distribution data');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const processChartData = (events: Event[], attendees: EventAttendee[]) => {
+        if (!events || events.length === 0) {
+            setChartData(null);
+            return;
+        }
+
+        // Categorize events by type
+        // For this demo, we'll use a simple heuristic based on event name/description
+        // In a real implementation, you might have an event_type field in your schema
+        const eventTypeCount = EVENT_TYPES.reduce((acc, type) => {
+            acc[type.name] = 0;
+            return acc;
+        }, {} as Record<string, number>);
+
+        // Count events by event_type field from schema
+        events.forEach(event => {
+            const type = event.event_type && EVENT_TYPES.find(t => t.key === event.event_type) ? event.event_type : 'other';
+            const typeObj = EVENT_TYPES.find(t => t.key === type);
+            if (typeObj) {
+                eventTypeCount[typeObj.name]++;
+            }
+        });
+
+        // Prepare data for chart
+        const labels = Object.keys(eventTypeCount);
+        const data = Object.values(eventTypeCount);
+        const backgroundColor = labels.map(label =>
+            EVENT_TYPES.find(type => type.name === label)?.color || 'rgba(128, 128, 128, 0.8)'
+        );
+
+        const chartData = {
+            labels,
+            datasets: [
+                {
+                    data,
+                    backgroundColor,
+                    borderColor: backgroundColor.map(color => color.replace('0.8', '1')),
+                    borderWidth: 1,
+                },
+            ],
+        };
+
+        setChartData(chartData);
+    };
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'right' as const,
+                labels: {
+                    padding: 20,
+                    boxWidth: 12,
+                },
+            },
+            tooltip: {
+                callbacks: {
+                    label: function (context: any) {
+                        // Only show the label, not the value
+                        return context.label || '';
+                    }
+                }
+            }
+        },
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-error">{error}</div>
+            </div>
+        );
+    }
+
+    if (!chartData) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-center text-base-content/70">
+                    <p>No event data available for the selected time period</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="h-full">
+            <Pie data={chartData} options={chartOptions} />
+        </div>
+    );
+}

src/components/dashboard/SponsorAnalyticsSection/MajorDistribution.tsx

@@ -0,0 +1,262 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { User, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+} from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+// Define major categories and their colors
+const MAJOR_CATEGORIES = [
+    { name: 'Computer Science', color: 'rgba(54, 162, 235, 0.8)' },
+    { name: 'Electrical Engineering', color: 'rgba(255, 99, 132, 0.8)' },
+    { name: 'Computer Engineering', color: 'rgba(75, 192, 192, 0.8)' },
+    { name: 'Mechanical Engineering', color: 'rgba(255, 206, 86, 0.8)' },
+    { name: 'Data Science', color: 'rgba(153, 102, 255, 0.8)' },
+    { name: 'Mathematics', color: 'rgba(255, 159, 64, 0.8)' },
+    { name: 'Physics', color: 'rgba(201, 203, 207, 0.8)' },
+    { name: 'Other Engineering', color: 'rgba(100, 149, 237, 0.8)' },
+    { name: 'Other', color: 'rgba(169, 169, 169, 0.8)' },
+];
+
+export default function MajorDistribution() {
+    const [chartData, setChartData] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
+
+    const get = Get.getInstance();
+    const auth = Authentication.getInstance();
+
+    useEffect(() => {
+        // Listen for analytics data updates from the parent component
+        const handleAnalyticsUpdate = (event: CustomEvent) => {
+            const { events, attendees, timeRange } = event.detail;
+            setTimeRange(timeRange);
+            loadUserData(attendees);
+        };
+
+        window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+
+        // Initial data load
+        loadData();
+
+        return () => {
+            window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
+        };
+    }, []);
+
+    const loadData = async () => {
+        try {
+            setLoading(true);
+
+            // Calculate date range
+            const endDate = new Date();
+            let startDate;
+
+            if (timeRange === "all") {
+                startDate = new Date(0); // Beginning of time
+            } else {
+                startDate = new Date();
+                startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
+            }
+
+            // Format dates for filter
+            const startDateStr = startDate.toISOString();
+            const endDateStr = endDate.toISOString();
+
+            // Get event attendees
+            const attendeesFilter = timeRange === "all"
+                ? ""
+                : `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
+
+            const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
+
+            await loadUserData(attendees);
+        } catch (err) {
+            console.error('Error loading major distribution data:', err);
+            setError('Failed to load major distribution data');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadUserData = async (attendees: EventAttendee[]) => {
+        try {
+            if (!attendees || attendees.length === 0) {
+                setChartData(null);
+                return;
+            }
+
+            // Get unique user IDs from attendees
+            const userIds = [...new Set(attendees.map(a => a.user))];
+
+            // Fetch user data to get majors
+            const users = await get.getMany<User>(Collections.USERS, userIds);
+
+            processChartData(users);
+        } catch (err) {
+            console.error('Error loading user data:', err);
+            setError('Failed to load user data');
+        }
+    };
+
+    const processChartData = (users: User[]) => {
+        if (!users || users.length === 0) {
+            setChartData(null);
+            return;
+        }
+
+        // Categorize users by major
+        const majorCounts = MAJOR_CATEGORIES.reduce((acc, category) => {
+            acc[category.name] = 0;
+            return acc;
+        }, {} as Record<string, number>);
+
+        users.forEach(user => {
+            if (!user.major) {
+                majorCounts['Other']++;
+                return;
+            }
+
+            const major = user.major.toLowerCase();
+
+            // Categorize majors
+            if (major.includes('computer science') || major.includes('cs')) {
+                majorCounts['Computer Science']++;
+            } else if (major.includes('electrical') || major.includes('ee')) {
+                majorCounts['Electrical Engineering']++;
+            } else if (major.includes('computer eng') || major.includes('ce')) {
+                majorCounts['Computer Engineering']++;
+            } else if (major.includes('mechanical') || major.includes('me')) {
+                majorCounts['Mechanical Engineering']++;
+            } else if (major.includes('data science') || major.includes('ds')) {
+                majorCounts['Data Science']++;
+            } else if (major.includes('math')) {
+                majorCounts['Mathematics']++;
+            } else if (major.includes('physics')) {
+                majorCounts['Physics']++;
+            } else if (major.includes('engineering')) {
+                majorCounts['Other Engineering']++;
+            } else {
+                majorCounts['Other']++;
+            }
+        });
+
+        // Sort by count (descending)
+        const sortedMajors = Object.entries(majorCounts)
+            .sort((a, b) => b[1] - a[1])
+            .filter(([_, count]) => count > 0); // Only include majors with at least one student
+
+        // Prepare data for chart
+        const labels = sortedMajors.map(([major]) => major);
+        const data = sortedMajors.map(([_, count]) => count);
+        const backgroundColor = labels.map(label =>
+            MAJOR_CATEGORIES.find(category => category.name === label)?.color || 'rgba(128, 128, 128, 0.8)'
+        );
+
+        const chartData = {
+            labels,
+            datasets: [
+                {
+                    label: 'Number of Students',
+                    data,
+                    backgroundColor,
+                    borderColor: backgroundColor.map(color => color.replace('0.8', '1')),
+                    borderWidth: 1,
+                },
+            ],
+        };
+
+        setChartData(chartData);
+    };
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        indexAxis: 'y' as const,
+        plugins: {
+            legend: {
+                display: false,
+            },
+            tooltip: {
+                callbacks: {
+                    label: function (context: any) {
+                        const label = context.label || '';
+                        const value = context.raw || 0;
+                        const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0);
+                        const percentage = Math.round((value / total) * 100);
+                        return `${value} students (${percentage}%)`;
+                    }
+                }
+            }
+        },
+        scales: {
+            x: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Number of Students'
+                }
+            },
+            y: {
+                title: {
+                    display: true,
+                    text: 'Major'
+                }
+            }
+        },
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-error">{error}</div>
+            </div>
+        );
+    }
+
+    if (!chartData) {
+        return (
+            <div className="flex justify-center items-center h-full">
+                <div className="text-center text-base-content/70">
+                    <p>No student data available for the selected time period</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="h-full">
+            <Bar data={chartData} options={chartOptions} />
+        </div>
+    );
+}

src/components/dashboard/SponsorDashboard.astro

@@ -1,78 +0,0 @@
----
-// Sponsor Dashboard Component
----
-
-<div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-        <h2 class="card-title text-2xl mb-4">Sponsor Dashboard</h2>
-        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            <!-- Sponsorship Status -->
-            <div class="card bg-base-200">
-                <div class="card-body">
-                    <h3 class="card-title text-lg">Sponsorship Status</h3>
-                    <p class="text-primary font-semibold">Active</p>
-                    <p class="text-sm opacity-70">Valid until: Dec 31, 2024</p>
-                </div>
-            </div>
-
-            <!-- Partnership Level -->
-            <div class="card bg-base-200">
-                <div class="card-body">
-                    <h3 class="card-title text-lg">Partnership Level</h3>
-                    <p class="text-primary font-semibold">Platinum</p>
-                    <p class="text-sm opacity-70">All benefits included</p>
-                </div>
-            </div>
-
-            <!-- Quick Actions -->
-            <div class="card bg-base-200">
-                <div class="card-body">
-                    <h3 class="card-title text-lg">Quick Actions</h3>
-                    <div class="flex gap-2 mt-2">
-                        <button class="btn btn-primary btn-sm"
-                            >Contact Us</button
-                        >
-                        <button class="btn btn-outline btn-sm"
-                            >View Contract</button
-                        >
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Recent Activity -->
-        <div class="mt-6">
-            <h3 class="text-xl font-semibold mb-4">Recent Activity</h3>
-            <div class="overflow-x-auto">
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th>Date</th>
-                            <th>Activity</th>
-                            <th>Status</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>2024-01-15</td>
-                            <td>Resume Book Access</td>
-                            <td
-                                ><span class="badge badge-success"
-                                    >Completed</span
-                                ></td
-                            >
-                        </tr>
-                        <tr>
-                            <td>2024-01-10</td>
-                            <td>Workshop Scheduling</td>
-                            <td
-                                ><span class="badge badge-warning">Pending</span
-                                ></td
-                            >
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-</div>

src/components/dashboard/reimbursement/ReceiptForm.tsx

@@ -4,6 +4,7 @@ import FilePreview from '../universal/FilePreview';
 import { toast } from 'react-hot-toast';
 import { motion, AnimatePresence } from 'framer-motion';
 import type { ItemizedExpense } from '../../../schemas/pocketbase';
+// import ZoomablePreview from '../universal/ZoomablePreview';
 
 interface ReceiptFormData {
     file: File;
@@ -66,6 +67,35 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
     const [locationAddress, setLocationAddress] = useState<string>('');
     const [notes, setNotes] = useState<string>('');
     const [error, setError] = useState<string>('');
+    const [jsonInput, setJsonInput] = useState<string>('');
+    const [showJsonInput, setShowJsonInput] = useState<boolean>(false);
+    const [zoomLevel, setZoomLevel] = useState<number>(1);
+
+    // Sample JSON data for users to copy
+    const sampleJsonData = {
+        itemized_expenses: [
+            {
+                description: "Presentation supplies for IEEE workshop",
+                category: "Supplies",
+                amount: 45.99
+            },
+            {
+                description: "Team lunch during planning meeting",
+                category: "Meals",
+                amount: 82.50
+            },
+            {
+                description: "Transportation to conference venue",
+                category: "Travel",
+                amount: 28.75
+            }
+        ],
+        tax: 12.65,
+        date: "2024-01-15",
+        location_name: "Office Depot & Local Restaurant",
+        location_address: "1234 Campus Drive, San Diego, CA 92093",
+        notes: "Expenses for January IEEE workshop preparation and team coordination meeting"
+    };
 
     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (e.target.files && e.target.files[0]) {
@@ -144,6 +174,69 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
         });
     };
 
+    const parseJsonData = () => {
+        try {
+            if (!jsonInput.trim()) {
+                toast.error('Please enter JSON data to parse');
+                return;
+            }
+
+            const parsed = JSON.parse(jsonInput);
+            
+            // Validate the structure
+            if (!parsed.itemized_expenses || !Array.isArray(parsed.itemized_expenses)) {
+                throw new Error('itemized_expenses must be an array');
+            }
+
+            // Validate each expense item
+            for (const item of parsed.itemized_expenses) {
+                if (!item.description || !item.category || typeof item.amount !== 'number') {
+                    throw new Error('Each expense item must have description, category, and amount');
+                }
+                if (!EXPENSE_CATEGORIES.includes(item.category)) {
+                    throw new Error(`Invalid category: ${item.category}. Must be one of: ${EXPENSE_CATEGORIES.join(', ')}`);
+                }
+            }
+
+            // Populate the form fields
+            setItemizedExpenses(parsed.itemized_expenses);
+            if (parsed.tax !== undefined) setTax(Number(parsed.tax) || 0);
+            if (parsed.date) setDate(parsed.date);
+            if (parsed.location_name) setLocationName(parsed.location_name);
+            if (parsed.location_address) setLocationAddress(parsed.location_address);
+            if (parsed.notes) setNotes(parsed.notes);
+
+            setError('');
+            toast.success(`Successfully imported ${parsed.itemized_expenses.length} expense items`);
+            setShowJsonInput(false);
+            setJsonInput('');
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Invalid JSON format';
+            setError(`JSON Parse Error: ${errorMessage}`);
+            toast.error(`Failed to parse JSON: ${errorMessage}`);
+        }
+    };
+
+    const copyToClipboard = (text: string) => {
+        navigator.clipboard.writeText(text).then(() => {
+            toast.success('Sample data copied to clipboard!');
+        }).catch(() => {
+            toast.error('Failed to copy to clipboard');
+        });
+    };
+
+    const zoomIn = () => {
+        setZoomLevel(prev => Math.min(prev + 0.25, 3));
+    };
+
+    const zoomOut = () => {
+        setZoomLevel(prev => Math.max(prev - 0.25, 0.5));
+    };
+
+    const resetZoom = () => {
+        setZoomLevel(1);
+    };
+
     return (
         <motion.div
             initial={{ opacity: 0 }}
@@ -155,7 +248,11 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
                 variants={containerVariants}
                 initial="hidden"
                 animate="visible"
-                className="space-y-4 overflow-y-auto max-h-[70vh] pr-4 custom-scrollbar"
+                className="space-y-4 overflow-y-auto max-h-[70vh] pr-8 overflow-x-hidden"
+                style={{
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
+                }}
             >
                 <form onSubmit={handleSubmit} className="space-y-6">
                     <AnimatePresence mode="wait">
@@ -191,78 +288,183 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
                         </div>
                     </motion.div>
 
-                    {/* Date */}
-                    <motion.div variants={itemVariants} className="form-control">
-                        <label className="label">
-                            <span className="label-text font-medium">Date</span>
-                            <span className="label-text-alt text-error">*</span>
-                        </label>
-                        <input
-                            type="date"
-                            className="input input-bordered focus:input-primary transition-all duration-300"
-                            value={date}
-                            onChange={(e) => setDate(e.target.value)}
-                            required
-                        />
+                    {/* Date and Location in Grid */}
+                    <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="form-control">
+                            <label className="label">
+                                <span className="label-text font-medium">Date</span>
+                                <span className="label-text-alt text-error">*</span>
+                            </label>
+                            <input
+                                type="date"
+                                className="input input-bordered focus:input-primary transition-all duration-300"
+                                value={date}
+                                onChange={(e) => setDate(e.target.value)}
+                                required
+                            />
+                        </div>
+
+                        <div className="form-control">
+                            <label className="label">
+                                <span className="label-text font-medium">Tax Amount ($)</span>
+                            </label>
+                            <input
+                                type="number"
+                                className="input input-bordered focus:input-primary transition-all duration-300"
+                                value={tax === 0 ? '' : tax}
+                                onChange={(e) => setTax(Number(e.target.value))}
+                                min="0"
+                                step="0.01"
+                                placeholder="0.00"
+                            />
+                        </div>
                     </motion.div>
 
-                    {/* Location Name */}
-                    <motion.div variants={itemVariants} className="form-control">
-                        <label className="label">
-                            <span className="label-text font-medium">Location Name</span>
-                            <span className="label-text-alt text-error">*</span>
-                        </label>
-                        <input
-                            type="text"
-                            className="input input-bordered focus:input-primary transition-all duration-300"
-                            value={locationName}
-                            onChange={(e) => setLocationName(e.target.value)}
-                            required
-                        />
+                    {/* Location Fields */}
+                    <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="form-control">
+                            <label className="label">
+                                <span className="label-text font-medium">Location Name</span>
+                                <span className="label-text-alt text-error">*</span>
+                            </label>
+                            <input
+                                type="text"
+                                className="input input-bordered focus:input-primary transition-all duration-300"
+                                value={locationName}
+                                onChange={(e) => setLocationName(e.target.value)}
+                                placeholder="Store/vendor name"
+                                required
+                            />
+                        </div>
+
+                        <div className="form-control">
+                            <label className="label">
+                                <span className="label-text font-medium">Location Address</span>
+                                <span className="label-text-alt text-error">*</span>
+                            </label>
+                            <input
+                                type="text"
+                                className="input input-bordered focus:input-primary transition-all duration-300"
+                                value={locationAddress}
+                                onChange={(e) => setLocationAddress(e.target.value)}
+                                placeholder="Full address"
+                                required
+                            />
+                        </div>
                     </motion.div>
 
-                    {/* Location Address */}
-                    <motion.div variants={itemVariants} className="form-control">
-                        <label className="label">
-                            <span className="label-text font-medium">Location Address</span>
-                            <span className="label-text-alt text-error">*</span>
-                        </label>
-                        <input
-                            type="text"
-                            className="input input-bordered focus:input-primary transition-all duration-300"
-                            value={locationAddress}
-                            onChange={(e) => setLocationAddress(e.target.value)}
-                            required
-                        />
-                    </motion.div>
-
-                    {/* Notes */}
+                    {/* Notes - Reduced height */}
                     <motion.div variants={itemVariants} className="form-control">
                         <label className="label">
                             <span className="label-text font-medium">Notes</span>
                         </label>
                         <textarea
-                            className="textarea textarea-bordered focus:textarea-primary transition-all duration-300 min-h-[100px]"
+                            className="textarea textarea-bordered focus:textarea-primary transition-all duration-300"
                             value={notes}
                             onChange={(e) => setNotes(e.target.value)}
-                            rows={3}
+                            rows={2}
+                            placeholder="Additional notes..."
                         />
                     </motion.div>
 
+                    {/* JSON Import Section */}
+                    <motion.div variants={itemVariants} className="space-y-4">
+                        <div className="card bg-base-200/30 border border-primary/20 shadow-sm">
+                            <div className="card-body p-4">
+                                <div className="flex justify-between items-center">
+                                    <div>
+                                        <h3 className="text-lg font-medium text-primary">Quick Import from JSON</h3>
+                                        <p className="text-sm text-base-content/70">Paste receipt data in JSON format to auto-populate fields</p>
+                                    </div>
+                                    <motion.button
+                                        whileHover={{ scale: 1.05 }}
+                                        whileTap={{ scale: 0.95 }}
+                                        type="button"
+                                        className="btn btn-primary btn-sm gap-2"
+                                        onClick={() => setShowJsonInput(!showJsonInput)}
+                                    >
+                                        <Icon icon={showJsonInput ? "heroicons:chevron-up" : "heroicons:chevron-down"} className="h-4 w-4" />
+                                        {showJsonInput ? 'Hide' : 'Show'} JSON Import
+                                    </motion.button>
+                                </div>
+
+                                <AnimatePresence>
+                                    {showJsonInput && (
+                                        <motion.div
+                                            initial={{ opacity: 0, height: 0 }}
+                                            animate={{ opacity: 1, height: 'auto' }}
+                                            exit={{ opacity: 0, height: 0 }}
+                                            className="space-y-4 mt-4 overflow-hidden"
+                                        >
+                                            {/* Sample Data Section */}
+                                            <div className="bg-base-100/50 rounded-lg p-4 border border-base-300/50">
+                                                <div className="flex justify-between items-center mb-3">
+                                                    <h4 className="font-medium text-sm">Sample JSON Format:</h4>
+                                                    <motion.button
+                                                        whileHover={{ scale: 1.05 }}
+                                                        whileTap={{ scale: 0.95 }}
+                                                        type="button"
+                                                        className="btn btn-xs btn-ghost gap-1"
+                                                        onClick={() => copyToClipboard(JSON.stringify(sampleJsonData, null, 2))}
+                                                    >
+                                                        <Icon icon="heroicons:clipboard-document" className="h-3 w-3" />
+                                                        Copy Sample
+                                                    </motion.button>
+                                                </div>
+                                                <pre className="text-xs bg-base-200/50 p-3 rounded border overflow-x-auto">
+                                                    <code>{JSON.stringify(sampleJsonData, null, 2)}</code>
+                                                </pre>
+                                                <div className="mt-2 text-xs text-base-content/60">
+                                                    <p><strong>Required fields:</strong> itemized_expenses (array)</p>
+                                                    <p><strong>Optional fields:</strong> tax, date, location_name, location_address, notes</p>
+                                                    <p><strong>Valid categories:</strong> {EXPENSE_CATEGORIES.join(', ')}</p>
+                                                </div>
+                                            </div>
+
+                                            {/* JSON Input Area */}
+                                            <div className="space-y-3">
+                                                <label className="label">
+                                                    <span className="label-text font-medium">Paste your JSON data:</span>
+                                                </label>
+                                                <textarea
+                                                    className="textarea textarea-bordered w-full min-h-[150px] font-mono text-sm"
+                                                    value={jsonInput}
+                                                    onChange={(e) => setJsonInput(e.target.value)}
+                                                    placeholder="Paste your JSON data here..."
+                                                />
+                                                <div className="flex justify-end gap-2">
+                                                    <motion.button
+                                                        whileHover={{ scale: 1.02 }}
+                                                        whileTap={{ scale: 0.98 }}
+                                                        type="button"
+                                                        className="btn btn-ghost btn-sm"
+                                                        onClick={() => setJsonInput('')}
+                                                    >
+                                                        Clear
+                                                    </motion.button>
+                                                    <motion.button
+                                                        whileHover={{ scale: 1.02 }}
+                                                        whileTap={{ scale: 0.98 }}
+                                                        type="button"
+                                                        className="btn btn-primary btn-sm gap-2"
+                                                        onClick={parseJsonData}
+                                                    >
+                                                        <Icon icon="heroicons:arrow-down-tray" className="h-4 w-4" />
+                                                        Import Data
+                                                    </motion.button>
+                                                </div>
+                                            </div>
+                                        </motion.div>
+                                    )}
+                                </AnimatePresence>
+                            </div>
+                        </div>
+                    </motion.div>
+
                     {/* Itemized Expenses */}
                     <motion.div variants={itemVariants} className="space-y-4">
                         <div className="flex justify-between items-center">
                             <label className="text-lg font-medium">Itemized Expenses</label>
-                            <motion.button
-                                whileHover={{ scale: 1.05 }}
-                                whileTap={{ scale: 0.95 }}
-                                type="button"
-                                className="btn btn-primary btn-sm gap-2 hover:shadow-lg transition-all duration-300"
-                                onClick={addExpenseItem}
-                            >
-                                <Icon icon="heroicons:plus" className="h-4 w-4" />
-                                Add Item
-                            </motion.button>
                         </div>
 
                         <AnimatePresence>
@@ -274,33 +476,48 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
                                     exit={{ opacity: 0, x: 20 }}
                                     className="card bg-base-200/50 hover:bg-base-200 transition-colors duration-300 backdrop-blur-sm shadow-sm"
                                 >
-                                    <div className="card-body p-4">
-                                        <div className="grid gap-4">
+                                    <div className="card-body p-3">
+                                        <div className="flex justify-between items-center mb-2">
+                                            <h4 className="text-sm font-medium">Item #{index + 1}</h4>
+                                            {itemizedExpenses.length > 1 && (
+                                                <button
+                                                    type="button"
+                                                    className="btn btn-xs btn-ghost text-error hover:bg-error/10"
+                                                    onClick={() => removeExpenseItem(index)}
+                                                    aria-label="Remove item"
+                                                >
+                                                    <Icon icon="heroicons:trash" className="h-3 w-3" />
+                                                </button>
+                                            )}
+                                        </div>
+
+                                        <div className="grid gap-3">
                                             <div className="form-control">
-                                                <label className="label">
-                                                    <span className="label-text">Description</span>
+                                                <label className="label py-1">
+                                                    <span className="label-text text-xs">Description</span>
                                                 </label>
                                                 <input
                                                     type="text"
-                                                    className="input input-bordered"
+                                                    className="input input-bordered input-sm"
                                                     value={item.description}
                                                     onChange={(e) => handleExpenseItemChange(index, 'description', e.target.value)}
+                                                    placeholder="What was purchased?"
                                                     required
                                                 />
                                             </div>
 
-                                            <div className="grid grid-cols-2 gap-4">
+                                            <div className="grid grid-cols-2 gap-3">
                                                 <div className="form-control">
-                                                    <label className="label">
-                                                        <span className="label-text">Category</span>
+                                                    <label className="label py-1">
+                                                        <span className="label-text text-xs">Category</span>
                                                     </label>
                                                     <select
-                                                        className="select select-bordered"
+                                                        className="select select-bordered select-sm w-full"
                                                         value={item.category}
                                                         onChange={(e) => handleExpenseItemChange(index, 'category', e.target.value)}
                                                         required
                                                     >
-                                                        <option value="">Select category</option>
+                                                        <option value="">Select...</option>
                                                         {EXPENSE_CATEGORIES.map(category => (
                                                             <option key={category} value={category}>{category}</option>
                                                         ))}
@@ -308,29 +525,19 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
                                                 </div>
 
                                                 <div className="form-control">
-                                                    <label className="label">
-                                                        <span className="label-text">Amount ($)</span>
+                                                    <label className="label py-1">
+                                                        <span className="label-text text-xs">Amount ($)</span>
                                                     </label>
-                                                    <div className="flex items-center space-x-2">
-                                                        <input
-                                                            type="number"
-                                                            className="input input-bordered"
-                                                            value={item.amount}
-                                                            onChange={(e) => handleExpenseItemChange(index, 'amount', Number(e.target.value))}
-                                                            min="0"
-                                                            step="0.01"
-                                                            required
-                                                        />
-                                                        {itemizedExpenses.length > 1 && (
-                                                            <button
-                                                                type="button"
-                                                                className="btn btn-square btn-sm btn-error"
-                                                                onClick={() => removeExpenseItem(index)}
-                                                            >
-                                                                <Icon icon="heroicons:trash" className="h-4 w-4" />
-                                                            </button>
-                                                        )}
-                                                    </div>
+                                                    <input
+                                                        type="number"
+                                                        className="input input-bordered input-sm w-full"
+                                                        value={item.amount === 0 ? '' : item.amount}
+                                                        onChange={(e) => handleExpenseItemChange(index, 'amount', Number(e.target.value))}
+                                                        min="0"
+                                                        step="0.01"
+                                                        placeholder="0.00"
+                                                        required
+                                                    />
                                                 </div>
                                             </div>
                                         </div>
@@ -338,38 +545,41 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
                                 </motion.div>
                             ))}
                         </AnimatePresence>
-                    </motion.div>
 
-                    {/* Tax */}
-                    <motion.div variants={itemVariants} className="form-control">
-                        <label className="label">
-                            <span className="label-text font-medium">Tax Amount ($)</span>
-                        </label>
-                        <input
-                            type="number"
-                            className="input input-bordered focus:input-primary transition-all duration-300"
-                            value={tax}
-                            onChange={(e) => setTax(Number(e.target.value))}
-                            min="0"
-                            step="0.01"
-                        />
+                        {/* Add Item Button - Moved to bottom */}
+                        <motion.div
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="flex justify-center pt-2"
+                        >
+                            <motion.button
+                                whileHover={{ scale: 1.05 }}
+                                whileTap={{ scale: 0.95 }}
+                                type="button"
+                                className="btn btn-primary btn-sm gap-2 hover:shadow-lg transition-all duration-300"
+                                onClick={addExpenseItem}
+                            >
+                                <Icon icon="heroicons:plus" className="h-4 w-4" />
+                                Add Item
+                            </motion.button>
+                        </motion.div>
                     </motion.div>
 
                     {/* Total */}
-                    <motion.div variants={itemVariants} className="card bg-base-200/50 backdrop-blur-sm p-4 shadow-sm">
-                        <div className="space-y-2">
-                            <div className="flex justify-between items-center text-base-content/70">
+                    <motion.div variants={itemVariants} className="card bg-base-200/50 backdrop-blur-sm p-3 shadow-sm">
+                        <div className="space-y-1">
+                            <div className="flex justify-between items-center text-sm text-base-content/70">
                                 <span>Subtotal:</span>
                                 <span className="font-mono">${itemizedExpenses.reduce((sum, item) => sum + item.amount, 0).toFixed(2)}</span>
                             </div>
-                            <div className="flex justify-between items-center text-base-content/70">
+                            <div className="flex justify-between items-center text-sm text-base-content/70">
                                 <span>Tax:</span>
                                 <span className="font-mono">${tax.toFixed(2)}</span>
                             </div>
                             <div className="divider my-1"></div>
-                            <div className="flex justify-between items-center font-medium text-lg">
+                            <div className="flex justify-between items-center font-medium">
                                 <span>Total:</span>
-                                <span className="font-mono text-primary">${(itemizedExpenses.reduce((sum, item) => sum + item.amount, 0) + tax).toFixed(2)}</span>
+                                <span className="font-mono text-primary text-lg">${(itemizedExpenses.reduce((sum, item) => sum + item.amount, 0) + tax).toFixed(2)}</span>
                             </div>
                         </div>
                     </motion.div>
@@ -412,13 +622,60 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
                             animate={{ opacity: 1, scale: 1 }}
                             exit={{ opacity: 0, scale: 0.9 }}
                             transition={{ type: "spring", stiffness: 300, damping: 25 }}
-                            className="bg-base-200/50 backdrop-blur-sm rounded-xl p-4 shadow-sm"
+                            className="bg-base-200/50 backdrop-blur-sm rounded-xl shadow-sm relative"
                         >
-                            <FilePreview
-                                url={previewUrl}
-                                filename={file?.name || ''}
-                                isModal={false}
-                            />
+                            {/* Zoom Controls */}
+                            <div className="absolute top-4 right-4 z-10 flex flex-col gap-2 bg-base-100/90 backdrop-blur-sm rounded-lg p-2 shadow-lg">
+                                <motion.button
+                                    whileHover={{ scale: 1.1 }}
+                                    whileTap={{ scale: 0.9 }}
+                                    className="btn btn-xs btn-ghost"
+                                    onClick={zoomIn}
+                                    disabled={zoomLevel >= 3}
+                                    title="Zoom In"
+                                >
+                                    <Icon icon="heroicons:plus" className="h-3 w-3" />
+                                </motion.button>
+                                
+                                <div className="text-xs text-center font-mono px-1">
+                                    {Math.round(zoomLevel * 100)}%
+                                </div>
+                                
+                                <motion.button
+                                    whileHover={{ scale: 1.1 }}
+                                    whileTap={{ scale: 0.9 }}
+                                    className="btn btn-xs btn-ghost"
+                                    onClick={zoomOut}
+                                    disabled={zoomLevel <= 0.5}
+                                    title="Zoom Out"
+                                >
+                                    <Icon icon="heroicons:minus" className="h-3 w-3" />
+                                </motion.button>
+                                
+                                <motion.button
+                                    whileHover={{ scale: 1.1 }}
+                                    whileTap={{ scale: 0.9 }}
+                                    className="btn btn-xs btn-ghost"
+                                    onClick={resetZoom}
+                                    disabled={zoomLevel === 1}
+                                    title="Reset Zoom"
+                                >
+                                    <Icon icon="heroicons:arrows-pointing-out" className="h-3 w-3" />
+                                </motion.button>
+                            </div>
+
+                            {/* Preview with Zoom */}
+                            <div 
+                                className="overflow-auto h-full rounded-xl"
+                                style={{ 
+                                    transform: `scale(${zoomLevel})`,
+                                    transformOrigin: 'top left',
+                                    height: zoomLevel > 1 ? `${100 / zoomLevel}%` : '100%',
+                                    width: zoomLevel > 1 ? `${100 / zoomLevel}%` : '100%'
+                                }}
+                            >
+                                <FilePreview url={previewUrl} filename={file?.name || ''} />
+                            </div>
                         </motion.div>
                     ) : (
                         <motion.div
@@ -439,4 +696,4 @@ export default function ReceiptForm({ onSubmit, onCancel }: ReceiptFormProps) {
             </motion.div>
         </motion.div>
     );
-} 
+}

src/components/dashboard/reimbursement/ReimbursementForm.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Icon } from '@iconify/react';
 import { Authentication } from '../../../scripts/pocketbase/Authentication';
 import { DataSyncService } from '../../../scripts/database/DataSyncService';
 import { Collections } from '../../../schemas/pocketbase/schema';
+import { EmailClient } from '../../../scripts/email/EmailClient';
 import ReceiptForm from './ReceiptForm';
 import { toast } from 'react-hot-toast';
 import { motion, AnimatePresence } from 'framer-motion';
 import FilePreview from '../universal/FilePreview';
-import type { ItemizedExpense, Reimbursement, Receipt } from '../../../schemas/pocketbase';
+import type { ItemizedExpense, Reimbursement } from '../../../schemas/pocketbase';
 
 interface ReceiptFormData {
     file: File;
@@ -117,13 +118,22 @@ export default function ReimbursementForm() {
             const userId = pb.authStore.model?.id;
 
             if (!userId) {
+                // Silently return without error when on dashboard page
+                if (window.location.pathname.includes('/dashboard')) {
+                    setIsLoading(false);
+                    return;
+                }
                 throw new Error('User not authenticated');
             }
 
             const user = await pb.collection('users').getOne(userId);
             setHasZelleInfo(!!user.zelle_information);
         } catch (error) {
-            console.error('Error checking Zelle information:', error);
+            // Only log error if not on dashboard page or if it's not an authentication error
+            if (!window.location.pathname.includes('/dashboard') ||
+                !(error instanceof Error && error.message === 'User not authenticated')) {
+                console.error('Error checking Zelle information:', error);
+            }
         } finally {
             setIsLoading(false);
         }
@@ -175,6 +185,10 @@ export default function ReimbursementForm() {
             const userId = pb.authStore.model?.id;
 
             if (!userId) {
+                // Silently return without error when on dashboard page
+                if (window.location.pathname.includes('/dashboard')) {
+                    return;
+                }
                 toast.error('User not authenticated');
                 throw new Error('User not authenticated');
             }
@@ -244,6 +258,11 @@ export default function ReimbursementForm() {
             const userId = pb.authStore.model?.id;
 
             if (!userId) {
+                // Silently return without error when on dashboard page
+                if (window.location.pathname.includes('/dashboard')) {
+                    setIsSubmitting(false);
+                    return;
+                }
                 throw new Error('User not authenticated');
             }
 
@@ -259,11 +278,34 @@ export default function ReimbursementForm() {
             formData.append('receipts', JSON.stringify(request.receipts));
             formData.append('department', request.department);
 
-            await pb.collection('reimbursement').create(formData);
+            // Create the reimbursement record
+            const newReimbursement = await pb.collection('reimbursement').create(formData);
 
             // Sync the reimbursements collection to update IndexedDB
             const dataSync = DataSyncService.getInstance();
-            await dataSync.syncCollection(Collections.REIMBURSEMENTS);
+
+            // Force sync with specific filter to ensure the new record is fetched
+            await dataSync.syncCollection(
+                Collections.REIMBURSEMENTS,
+                `submitted_by="${userId}"`,
+                '-created',
+                'audit_notes'
+            );
+
+            // Verify the new record is in IndexedDB
+            const syncedData = await dataSync.getData(
+                Collections.REIMBURSEMENTS,
+                true, // Force sync again to be sure
+                `id="${newReimbursement.id}"`
+            );
+
+            if (syncedData.length === 0) {
+                console.warn('New reimbursement not found in IndexedDB after sync, forcing another sync');
+                // Try one more time with a slight delay
+                setTimeout(async () => {
+                    await dataSync.syncCollection(Collections.REIMBURSEMENTS);
+                }, 500);
+            }
 
             // Reset form
             setRequest({
@@ -290,6 +332,14 @@ export default function ReimbursementForm() {
                 }
             });
 
+            // Send email notification
+            try {
+                await EmailClient.notifySubmission(newReimbursement.id);
+            } catch (emailError) {
+                console.error('Failed to send submission email notification:', emailError);
+                // Don't fail the entire operation if email fails
+            }
+
         } catch (error) {
             console.error('Error submitting reimbursement request:', error);
             toast.error('Failed to submit reimbursement request. Please try again.');

src/components/dashboard/reimbursement/ReimbursementList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '@iconify/react';
 import { Get } from '../../../scripts/pocketbase/Get';
 import { Authentication } from '../../../scripts/pocketbase/Authentication';
@@ -112,27 +112,48 @@ export default function ReimbursementList() {
     const fileManager = FileManager.getInstance();
 
     useEffect(() => {
-        console.log('Component mounted');
+        // console.log('Component mounted');
         fetchReimbursements();
+
+        // Set up an interval to refresh the reimbursements list periodically
+        const refreshInterval = setInterval(() => {
+            if (document.visibilityState === 'visible') {
+                fetchReimbursements();
+            }
+        }, 30000); // Refresh every 30 seconds when tab is visible
+
+        // Listen for visibility changes to refresh when user returns to the tab
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                fetchReimbursements();
+            }
+        };
+
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+
+        return () => {
+            clearInterval(refreshInterval);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
     }, []);
 
     // Add effect to monitor requests state
     useEffect(() => {
-        console.log('Requests state updated:', requests);
-        console.log('Number of requests:', requests.length);
+        // console.log('Requests state updated:', requests);
+        // console.log('Number of requests:', requests.length);
     }, [requests]);
 
     // Add a useEffect to log preview URL and filename changes
     useEffect(() => {
-        console.log('Preview URL changed:', previewUrl);
-        console.log('Preview filename changed:', previewFilename);
+        // console.log('Preview URL changed:', previewUrl);
+        // console.log('Preview filename changed:', previewFilename);
     }, [previewUrl, previewFilename]);
 
     // Add a useEffect to log when the preview modal is shown/hidden
     useEffect(() => {
-        console.log('Show preview changed:', showPreview);
+        // console.log('Show preview changed:', showPreview);
         if (showPreview) {
-            console.log('Selected receipt:', selectedReceipt);
+            // console.log('Selected receipt:', selectedReceipt);
         }
     }, [showPreview, selectedReceipt]);
 
@@ -145,13 +166,18 @@ export default function ReimbursementList() {
             const userId = pb.authStore.model?.id;
 
             if (!userId) {
+                // Silently return without error when on dashboard page
+                if (window.location.pathname.includes('/dashboard')) {
+                    setLoading(false);
+                    return;
+                }
                 throw new Error('User not authenticated');
             }
 
             // Use DataSyncService to get data from IndexedDB with forced sync
             const dataSync = DataSyncService.getInstance();
 
-            // Sync reimbursements collection
+            // Sync reimbursements collection with force sync
             await dataSync.syncCollection(
                 Collections.REIMBURSEMENTS,
                 `submitted_by="${userId}"`,
@@ -159,15 +185,15 @@ export default function ReimbursementList() {
                 'audit_notes'
             );
 
-            // Get reimbursements from IndexedDB
+            // Get reimbursements from IndexedDB with forced sync to ensure latest data
             const reimbursementRecords = await dataSync.getData<ReimbursementRequest>(
                 Collections.REIMBURSEMENTS,
-                false, // Don't force sync again
+                true, // Force sync to ensure we have the latest data
                 `submitted_by="${userId}"`,
                 '-created'
             );
 
-            console.log('Reimbursement records from IndexedDB:', reimbursementRecords);
+            // console.log('Reimbursement records from IndexedDB:', reimbursementRecords);
 
             // Process the records
             const processedRecords = reimbursementRecords.map(record => {
@@ -183,7 +209,7 @@ export default function ReimbursementList() {
                             auditNotes = record.audit_notes;
                         }
                     } catch (e) {
-                        console.error('Error parsing audit notes:', e);
+                        // console.error('Error parsing audit notes:', e);
                     }
                 }
 
@@ -217,7 +243,7 @@ export default function ReimbursementList() {
                                             itemizedExpenses = receiptRecord.itemized_expenses as ItemizedExpense[];
                                         }
                                     } catch (e) {
-                                        console.error('Error parsing itemized expenses:', e);
+                                        // console.error('Error parsing itemized expenses:', e);
                                     }
                                 }
 
@@ -241,13 +267,13 @@ export default function ReimbursementList() {
                                 }));
                             }
                         } catch (e) {
-                            console.error(`Error fetching receipt ${receiptId}:`, e);
+                            // console.error(`Error fetching receipt ${receiptId}:`, e);
                         }
                     }
                 }
             }
         } catch (err) {
-            console.error('Error fetching reimbursements:', err);
+            // console.error('Error fetching reimbursements:', err);
             setError('Failed to load reimbursements. Please try again.');
         } finally {
             setLoading(false);
@@ -256,7 +282,7 @@ export default function ReimbursementList() {
 
     const handlePreviewFile = async (request: ReimbursementRequest, receiptId: string) => {
         try {
-            console.log('Previewing file for receipt ID:', receiptId);
+            // console.log('Previewing file for receipt ID:', receiptId);
             const pb = auth.getPocketBase();
             const fileManager = FileManager.getInstance();
 
@@ -265,13 +291,13 @@ export default function ReimbursementList() {
 
             // Check if we already have the receipt details in our map
             if (receiptDetailsMap[receiptId]) {
-                console.log('Using cached receipt details');
+                // console.log('Using cached receipt details');
                 // Use the cached receipt details
                 setSelectedReceipt(receiptDetailsMap[receiptId]);
 
                 // Check if the receipt has a file
                 if (!receiptDetailsMap[receiptId].file) {
-                    console.error('Receipt has no file attached');
+                    // console.error('Receipt has no file attached');
                     toast.error('This receipt has no file attached');
                     setPreviewUrl('');
                     setPreviewFilename('');
@@ -280,7 +306,7 @@ export default function ReimbursementList() {
                 }
 
                 // Get the file URL with token for protected files
-                console.log('Getting file URL with token');
+                // console.log('Getting file URL with token');
                 const url = await fileManager.getFileUrlWithToken(
                     'receipts',
                     receiptId,
@@ -290,7 +316,7 @@ export default function ReimbursementList() {
 
                 // Check if the URL is empty
                 if (!url) {
-                    console.error('Failed to get file URL: Empty URL returned');
+                    // console.error('Failed to get file URL: Empty URL returned');
                     toast.error('Failed to load receipt: Could not generate file URL');
                     // Still show the preview modal but with empty URL to display the error message
                     setPreviewUrl('');
@@ -299,7 +325,7 @@ export default function ReimbursementList() {
                     return;
                 }
 
-                console.log('Got URL:', url.substring(0, 50) + '...');
+                // console.log('Got URL:', url.substring(0, 50) + '...');
 
                 // Set the preview URL and filename
                 setPreviewUrl(url);
@@ -309,28 +335,28 @@ export default function ReimbursementList() {
                 setShowPreview(true);
 
                 // Log the current state
-                console.log('Current state after setting:', {
-                    previewUrl: url,
-                    previewFilename: receiptDetailsMap[receiptId].file,
-                    showPreview: true
-                });
+                // console.log('Current state after setting:', {
+                //     previewUrl: url,
+                //     previewFilename: receiptDetailsMap[receiptId].file,
+                //     showPreview: true
+                // });
 
                 return;
             }
 
             // If not in the map, get the receipt record using its ID
-            console.log('Fetching receipt details from server');
+            // console.log('Fetching receipt details from server');
             const receiptRecord = await pb.collection('receipts').getOne(receiptId, {
                 $autoCancel: false
             });
 
             if (receiptRecord) {
-                console.log('Receipt record found:', receiptRecord.id);
-                console.log('Receipt file:', receiptRecord.file);
+                // console.log('Receipt record found:', receiptRecord.id);
+                // console.log('Receipt file:', receiptRecord.file);
 
                 // Check if the receipt has a file
                 if (!receiptRecord.file) {
-                    console.error('Receipt has no file attached');
+                    // console.error('Receipt has no file attached');
                     toast.error('This receipt has no file attached');
                     setPreviewUrl('');
                     setPreviewFilename('');
@@ -367,7 +393,7 @@ export default function ReimbursementList() {
                 setSelectedReceipt(receiptDetails);
 
                 // Get the file URL with token for protected files
-                console.log('Getting file URL with token for new receipt');
+                // console.log('Getting file URL with token for new receipt');
                 const url = await fileManager.getFileUrlWithToken(
                     'receipts',
                     receiptRecord.id,
@@ -377,7 +403,7 @@ export default function ReimbursementList() {
 
                 // Check if the URL is empty
                 if (!url) {
-                    console.error('Failed to get file URL: Empty URL returned');
+                    // console.error('Failed to get file URL: Empty URL returned');
                     toast.error('Failed to load receipt: Could not generate file URL');
                     // Still show the preview modal but with empty URL to display the error message
                     setPreviewUrl('');
@@ -386,7 +412,7 @@ export default function ReimbursementList() {
                     return;
                 }
 
-                console.log('Got URL:', url.substring(0, 50) + '...');
+                // console.log('Got URL:', url.substring(0, 50) + '...');
 
                 // Set the preview URL and filename
                 setPreviewUrl(url);
@@ -396,16 +422,16 @@ export default function ReimbursementList() {
                 setShowPreview(true);
 
                 // Log the current state
-                console.log('Current state after setting:', {
-                    previewUrl: url,
-                    previewFilename: receiptRecord.file,
-                    showPreview: true
-                });
+                // console.log('Current state after setting:', {
+                //     previewUrl: url,
+                //     previewFilename: receiptRecord.file,
+                //     showPreview: true
+                // });
             } else {
                 throw new Error('Receipt not found');
             }
         } catch (error) {
-            console.error('Error loading receipt:', error);
+            // console.error('Error loading receipt:', error);
             toast.error('Failed to load receipt. Please try again.');
             // Show the preview modal with empty URL to display the error message
             setPreviewUrl('');
@@ -423,7 +449,7 @@ export default function ReimbursementList() {
     };
 
     if (loading) {
-        console.log('Rendering loading state');
+        // console.log('Rendering loading state');
         return (
             <motion.div
                 initial={{ opacity: 0 }}
@@ -437,7 +463,7 @@ export default function ReimbursementList() {
     }
 
     if (error) {
-        console.log('Rendering error state:', error);
+        // console.log('Rendering error state:', error);
         return (
             <motion.div
                 initial={{ opacity: 0, y: -20 }}
@@ -450,8 +476,8 @@ export default function ReimbursementList() {
         );
     }
 
-    console.log('Rendering main component. Requests:', requests);
-    console.log('Requests length:', requests.length);
+    // console.log('Rendering main component. Requests:', requests);
+    // console.log('Requests length:', requests.length);
 
     return (
         <>
@@ -482,7 +508,7 @@ export default function ReimbursementList() {
                     >
                         <AnimatePresence mode="popLayout">
                             {requests.map((request, index) => {
-                                console.log('Rendering request:', request);
+                                // console.log('Rendering request:', request);
                                 return (
                                     <motion.div
                                         key={request.id}
@@ -542,7 +568,7 @@ export default function ReimbursementList() {
                                                                             ? 'bg-success text-success-content ring-2 ring-success/20'
                                                                             : status === 'in_progress'
                                                                                 ? 'bg-warning text-warning-content ring-2 ring-warning/20'
-                                                                                : 'bg-primary text-primary-content ring-2 ring-primary/20'
+                                                                                : 'bg-primary text-white ring-2 ring-primary/20'
                                                                     : isActive
                                                                         ? status === 'rejected'
                                                                             ? 'bg-error/20 text-error'

src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx

@@ -5,6 +5,7 @@ import { Get } from '../../../scripts/pocketbase/Get';
 import { Update } from '../../../scripts/pocketbase/Update';
 import { Authentication } from '../../../scripts/pocketbase/Authentication';
 import { FileManager } from '../../../scripts/pocketbase/FileManager';
+import { EmailClient } from '../../../scripts/email/EmailClient';
 import { toast } from 'react-hot-toast';
 import { motion, AnimatePresence } from 'framer-motion';
 import type { Receipt as SchemaReceipt, User, Reimbursement } from '../../../schemas/pocketbase';
@@ -32,6 +33,10 @@ interface FilterOptions {
     dateRange: 'all' | 'week' | 'month' | 'year';
     sortBy: 'date_of_purchase' | 'total_amount' | 'status';
     sortOrder: 'asc' | 'desc';
+    hidePaid: boolean; // Auto-hide paid reimbursements
+    hideRejected: boolean; // Auto-hide rejected reimbursements
+    compactView: boolean; // Toggle for compact list view
+    search: string; // Search query
 }
 
 interface ItemizedExpense {
@@ -53,7 +58,11 @@ export default function ReimbursementManagementPortal() {
         department: [],
         dateRange: 'all',
         sortBy: 'date_of_purchase',
-        sortOrder: 'desc'
+        sortOrder: 'desc',
+        hidePaid: true,
+        hideRejected: true,
+        compactView: false,
+        search: ''
     });
     const [auditNote, setAuditNote] = useState('');
     const [loadingStatus, setLoadingStatus] = useState(false);
@@ -110,6 +119,21 @@ export default function ReimbursementManagementPortal() {
                 filter = `(${statusFilter})`;
             }
 
+            // When searching, don't auto-hide paid/rejected unless explicitly filtered
+            const isSearching = filters.search.trim().length > 0;
+            
+            // Auto-hide paid reimbursements if the option is enabled and not searching
+            if (filters.hidePaid && !isSearching) {
+                const hidePaidFilter = 'status != "paid"';
+                filter = filter ? `${filter} && ${hidePaidFilter}` : hidePaidFilter;
+            }
+
+            // Auto-hide rejected reimbursements if the option is enabled and not searching
+            if (filters.hideRejected && !isSearching) {
+                const hideRejectedFilter = 'status != "rejected"';
+                filter = filter ? `${filter} && ${hideRejectedFilter}` : hideRejectedFilter;
+            }
+
             if (filters.department.length > 0) {
                 const departmentFilter = filters.department.map(d => `department = "${d}"`).join(' || ');
                 filter = filter ? `${filter} && (${departmentFilter})` : `(${departmentFilter})`;
@@ -134,7 +158,6 @@ export default function ReimbursementManagementPortal() {
             }
 
             const records = await get.getAll<ExtendedReimbursement>('reimbursement', filter, sort);
-            console.log('Loaded reimbursements:', records);
 
             // Load user data for submitters
             const userIds = new Set(records.map(r => r.submitted_by));
@@ -161,15 +184,12 @@ export default function ReimbursementManagementPortal() {
                 submitter: userMap[record.submitted_by]
             }));
 
-            setReimbursements(enrichedRecords);
-
             // Load associated receipts
             const receiptIds = enrichedRecords.flatMap(r => r.receipts || []);
-            console.log('Extracted receipt IDs:', receiptIds, 'from reimbursements:', enrichedRecords.map(r => ({ id: r.id, receipts: r.receipts })));
 
+            let receiptMap: Record<string, ExtendedReceipt> = {};
             if (receiptIds.length > 0) {
                 try {
-                    console.log('Attempting to load receipts with IDs:', receiptIds);
                     const receiptRecords = await Promise.all(
                         receiptIds.map(async id => {
                             try {
@@ -202,12 +222,10 @@ export default function ReimbursementManagementPortal() {
                     );
 
                     const validReceipts = receiptRecords.filter((r): r is ExtendedReceipt => r !== null);
-                    console.log('Successfully loaded receipt records:', validReceipts);
 
-                    const receiptMap = Object.fromEntries(
+                    receiptMap = Object.fromEntries(
                         validReceipts.map(receipt => [receipt.id, receipt])
                     );
-                    console.log('Created receipt map:', receiptMap);
                     setReceipts(receiptMap);
                 } catch (error: any) {
                     console.error('Error loading receipts:', error);
@@ -219,9 +237,55 @@ export default function ReimbursementManagementPortal() {
                     toast.error('Failed to load receipts: ' + (error?.message || 'Unknown error'));
                 }
             } else {
-                console.log('No receipt IDs found in reimbursements');
+                // console.log('No receipt IDs found in reimbursements');
                 setReceipts({});
             }
+
+            // Apply client-side search filtering
+            let filteredRecords = enrichedRecords;
+            if (isSearching) {
+                const searchTerm = filters.search.toLowerCase().trim();
+                
+                filteredRecords = enrichedRecords.filter(record => {
+                    // Search in title
+                    if (record.title.toLowerCase().includes(searchTerm)) return true;
+                    
+                    // Search in submitter name
+                    if (record.submitter?.name?.toLowerCase().includes(searchTerm)) return true;
+                    
+                    // Search in date (multiple formats)
+                    const date = new Date(record.date_of_purchase);
+                    const dateFormats = [
+                        date.toLocaleDateString(), // Default locale format
+                        date.toLocaleDateString('en-US'), // MM/DD/YYYY
+                        date.toISOString().split('T')[0], // YYYY-MM-DD
+                        date.toDateString(), // "Mon Jan 01 2024"
+                        `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`, // M/D/YYYY
+                        `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` // YYYY-MM-DD
+                    ];
+                    if (dateFormats.some(format => format.toLowerCase().includes(searchTerm))) return true;
+                    
+                    // Search in receipt location names
+                    const reimbursementReceipts = record.receipts?.map(id => receiptMap[id]).filter(Boolean) || [];
+                    if (reimbursementReceipts.some(receipt => 
+                        receipt.location_name?.toLowerCase().includes(searchTerm) ||
+                        receipt.location_address?.toLowerCase().includes(searchTerm)
+                    )) return true;
+                    
+                    // Search in department
+                    if (record.department.toLowerCase().includes(searchTerm)) return true;
+                    
+                    // Search in status
+                    if (record.status.toLowerCase().replace('_', ' ').includes(searchTerm)) return true;
+                    
+                    // Search in additional info
+                    if (record.additional_info?.toLowerCase().includes(searchTerm)) return true;
+                    
+                    return false;
+                });
+            }
+
+            setReimbursements(filteredRecords);
         } catch (error) {
             console.error('Error loading reimbursements:', error);
             toast.error('Failed to load reimbursements. Please try again later.');
@@ -371,7 +435,7 @@ export default function ReimbursementManagementPortal() {
     };
 
     // Update the updateStatus function
-    const updateStatus = async (id: string, status: 'submitted' | 'under_review' | 'approved' | 'rejected' | 'in_progress' | 'paid') => {
+    const updateStatus = async (id: string, status: 'submitted' | 'under_review' | 'approved' | 'rejected' | 'in_progress' | 'paid', showToast: boolean = true) => {
         try {
             setLoadingStatus(true);
             const update = Update.getInstance();
@@ -380,15 +444,28 @@ export default function ReimbursementManagementPortal() {
 
             if (!userId) throw new Error('User not authenticated');
 
+            // Store previous status for email notification
+            const previousStatus = selectedReimbursement?.status || 'unknown';
+
             await update.updateFields('reimbursement', id, { status });
 
             // Add audit log for status change
             await addAuditLog(id, 'status_change', {
-                from: selectedReimbursement?.status,
+                from: previousStatus,
                 to: status
             });
 
-            toast.success(`Reimbursement ${status} successfully`);
+            // Send email notification
+            try {
+                await EmailClient.notifyStatusChange(id, status, previousStatus, userId);
+            } catch (emailError) {
+                console.error('Failed to send email notification:', emailError);
+                // Don't fail the entire operation if email fails
+            }
+
+            if (showToast) {
+                toast.success(`Reimbursement ${status} successfully`);
+            }
             await refreshAuditData(id);
         } catch (error) {
             console.error('Error updating status:', error);
@@ -488,8 +565,7 @@ export default function ReimbursementManagementPortal() {
                 }
             }));
 
-            setSelectedReceipt(receipt);
-            setShowReceiptModal(true);
+            // Don't show the receipt modal when auditing
             toast.success('Receipt audited successfully');
         } catch (error) {
             console.error('Error auditing receipt:', error);
@@ -587,6 +663,21 @@ export default function ReimbursementManagementPortal() {
                 is_private: isPrivateNote
             });
 
+            // Send email notification for public comments
+            if (!isPrivateNote) {
+                try {
+                    await EmailClient.notifyComment(
+                        selectedReimbursement.id,
+                        auditNote.trim(),
+                        userId,
+                        isPrivateNote
+                    );
+                } catch (emailError) {
+                    console.error('Failed to send comment email notification:', emailError);
+                    // Don't fail the entire operation if email fails
+                }
+            }
+
             toast.success('Audit note saved successfully');
             setAuditNote('');
             setIsPrivateNote(true);
@@ -618,8 +709,8 @@ export default function ReimbursementManagementPortal() {
         try {
             setLoadingStatus(true);
 
-            // First update the status
-            await updateStatus(rejectingId, 'rejected');
+            // First update the status (passing false to suppress the toast message)
+            await updateStatus(rejectingId, 'rejected', false);
 
             // Then add the rejection reason as a public note
             const auth = Authentication.getInstance();
@@ -698,12 +789,59 @@ export default function ReimbursementManagementPortal() {
                         <h2 className="text-lg sm:text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                             Reimbursement Requests
                         </h2>
-                        <span className="badge badge-primary badge-md font-medium">
-                            {reimbursements.length} Total
-                        </span>
+                        <div className="flex flex-wrap items-center gap-2">
+                            <span className="badge badge-primary badge-md font-medium">
+                                {reimbursements.length} Total
+                            </span>
+                            {filters.hidePaid && (
+                                <span className="badge badge-ghost badge-sm font-medium" title="Paid reimbursements are automatically hidden">
+                                    <Icon icon="heroicons:eye-slash" className="h-3 w-3 mr-1" />
+                                    Paid Hidden
+                                </span>
+                            )}
+                            {filters.hideRejected && (
+                                <span className="badge badge-ghost badge-sm font-medium" title="Rejected reimbursements are automatically hidden">
+                                    <Icon icon="heroicons:eye-slash" className="h-3 w-3 mr-1" />
+                                    Rejected Hidden
+                                </span>
+                            )}
+                        </div>
                     </div>
 
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
+                        {/* Search Bar */}
+                        <div className="form-control sm:col-span-2">
+                            <div className="join h-9 relative">
+                                <div className="flex items-center justify-center w-9 bg-base-200 border border-base-300 rounded-l-lg join-item">
+                                    <Icon icon="heroicons:magnifying-glass" className="h-4 w-4" />
+                                </div>
+                                <input
+                                    type="text"
+                                    className={`input input-bordered input-sm w-full focus:outline-none h-full join-item rounded-l-none ${filters.search ? 'pr-16' : 'pr-8'}`}
+                                    placeholder="Search by title, user, date, receipt location..."
+                                    value={filters.search}
+                                    onChange={(e) => setFilters(prev => ({ ...prev, search: e.target.value }))}
+                                />
+                                {filters.search && (
+                                    <button
+                                        className="btn btn-ghost btn-sm absolute right-2 top-0 h-full px-2"
+                                        onClick={() => setFilters(prev => ({ ...prev, search: '' }))}
+                                    >
+                                        <Icon icon="heroicons:x-mark" className="h-4 w-4" />
+                                    </button>
+                                )}
+                            </div>
+                            {filters.search && (
+                                <div className="label py-1">
+                                    <span className="label-text-alt text-info">
+                                        <Icon icon="heroicons:information-circle" className="h-3 w-3 inline mr-1" />
+                                        Search includes all reimbursements (including paid/rejected)
+                                    </span>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Status Filter */}
                         <div className="form-control">
                             <div className="join h-9 relative">
                                 <div className="flex items-center justify-center w-9 bg-base-200 border border-base-300 rounded-l-lg join-item">
@@ -759,6 +897,7 @@ export default function ReimbursementManagementPortal() {
                             </div>
                         </div>
 
+                        {/* Department Filter */}
                         <div className="form-control">
                             <div className="join h-9 relative">
                                 <div className="flex items-center justify-center w-9 bg-base-200 border border-base-300 rounded-l-lg join-item">
@@ -811,6 +950,7 @@ export default function ReimbursementManagementPortal() {
                             </div>
                         </div>
 
+                        {/* Date Range Filter */}
                         <div className="form-control">
                             <div className="join h-9">
                                 <div className="flex items-center justify-center w-9 bg-base-200 border border-base-300 rounded-l-lg join-item">
@@ -829,7 +969,8 @@ export default function ReimbursementManagementPortal() {
                             </div>
                         </div>
 
-                        <div className="form-control md:col-span-2">
+                        {/* Sort Controls */}
+                        <div className="form-control">
                             <div className="join h-9">
                                 <div className="flex items-center justify-center w-9 bg-base-200 border border-base-300 rounded-l-lg join-item">
                                     <Icon icon="heroicons:arrows-up-down" className="h-4 w-4" />
@@ -855,6 +996,54 @@ export default function ReimbursementManagementPortal() {
                             </div>
                         </div>
                     </div>
+
+                    {/* Additional Filter Options */}
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-4 border-t border-base-300 mt-4">
+                        <div className="form-control">
+                            <label className="label cursor-pointer justify-start gap-3 p-0">
+                                <input
+                                    type="checkbox"
+                                    className="checkbox checkbox-primary checkbox-sm"
+                                    checked={filters.hidePaid}
+                                    onChange={(e) => setFilters({ ...filters, hidePaid: e.target.checked })}
+                                />
+                                <div className="flex items-center gap-2">
+                                    <Icon icon="heroicons:eye-slash" className="h-4 w-4 text-base-content/70" />
+                                    <span className="label-text font-medium">Auto-hide paid requests</span>
+                                </div>
+                            </label>
+                        </div>
+
+                        <div className="form-control">
+                            <label className="label cursor-pointer justify-start gap-3 p-0">
+                                <input
+                                    type="checkbox"
+                                    className="checkbox checkbox-primary checkbox-sm"
+                                    checked={filters.hideRejected}
+                                    onChange={(e) => setFilters({ ...filters, hideRejected: e.target.checked })}
+                                />
+                                <div className="flex items-center gap-2">
+                                    <Icon icon="heroicons:eye-slash" className="h-4 w-4 text-base-content/70" />
+                                    <span className="label-text font-medium">Auto-hide rejected requests</span>
+                                </div>
+                            </label>
+                        </div>
+
+                        <div className="form-control">
+                            <label className="label cursor-pointer justify-start gap-3 p-0">
+                                <input
+                                    type="checkbox"
+                                    className="checkbox checkbox-primary checkbox-sm"
+                                    checked={filters.compactView}
+                                    onChange={(e) => setFilters({ ...filters, compactView: e.target.checked })}
+                                />
+                                <div className="flex items-center gap-2">
+                                    <Icon icon="heroicons:list-bullet" className="h-4 w-4 text-base-content/70" />
+                                    <span className="label-text font-medium">Compact view</span>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
                 </motion.div>
 
                 {loading ? (
@@ -878,7 +1067,7 @@ export default function ReimbursementManagementPortal() {
                     </motion.div>
                 ) : (
                     <AnimatePresence>
-                        <div className="space-y-4">
+                        <div className={`${filters.compactView ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2' : 'space-y-4'}`}>
                             {reimbursements.map((reimbursement, index) => (
                                 <motion.div
                                     key={reimbursement.id}
@@ -889,47 +1078,76 @@ export default function ReimbursementManagementPortal() {
                                         ${selectedReimbursement?.id === reimbursement.id ? 'ring-2 ring-primary shadow-lg scale-[1.02]' : 'hover:scale-[1.01] hover:shadow-md'}`}
                                     onClick={() => setSelectedReimbursement(reimbursement)}
                                 >
-                                    <div className="card-body p-5">
-                                        <div className="flex justify-between items-start gap-4">
-                                            <div className="space-y-2 flex-1 min-w-0">
-                                                <h3 className="font-bold text-lg group-hover:text-primary transition-colors truncate">
+                                    {filters.compactView ? (
+                                        // Compact Grid View
+                                        <div className="card-body p-3">
+                                            <div className="space-y-2">
+                                                <h3 className="font-semibold text-sm group-hover:text-primary transition-colors line-clamp-2 leading-tight">
                                                     {reimbursement.title}
                                                 </h3>
-                                                <div className="flex flex-wrap gap-3 text-sm">
-                                                    <div className="flex items-center gap-1.5 text-base-content/70">
-                                                        <Icon icon="heroicons:calendar" className="h-4 w-4 flex-shrink-0" />
-                                                        <span>{new Date(reimbursement.date_of_purchase).toLocaleDateString()}</span>
-                                                    </div>
-                                                    <div className="flex items-center gap-1.5 text-base-content/70">
-                                                        <Icon icon="heroicons:building-office" className="h-4 w-4 flex-shrink-0" />
-                                                        <span className="truncate">{reimbursement.department}</span>
-                                                    </div>
+                                                <div className="flex items-center justify-between text-xs text-base-content/70">
+                                                    <span>{new Date(reimbursement.date_of_purchase).toLocaleDateString()}</span>
+                                                    <span className="font-mono font-bold text-primary text-sm">
+                                                        ${reimbursement.total_amount.toFixed(2)}
+                                                    </span>
+                                                </div>
+                                                <div className="flex justify-center">
+                                                    <span className={`badge badge-sm ${reimbursement.status === 'approved' ? 'badge-success' :
+                                                        reimbursement.status === 'rejected' ? 'badge-error' :
+                                                            reimbursement.status === 'under_review' ? 'badge-info' :
+                                                                reimbursement.status === 'in_progress' ? 'badge-warning' :
+                                                                    reimbursement.status === 'paid' ? 'badge-success' :
+                                                                        'badge-ghost'
+                                                        } capitalize font-medium whitespace-nowrap`}>
+                                                        {reimbursement.status.replace('_', ' ')}
+                                                    </span>
                                                 </div>
                                             </div>
-                                            <div className="flex flex-col items-end gap-2 flex-shrink-0">
-                                                <span className="font-mono font-bold text-lg text-primary whitespace-nowrap">
-                                                    ${reimbursement.total_amount.toFixed(2)}
-                                                </span>
-                                                <span className={`badge ${reimbursement.status === 'approved' ? 'badge-success' :
-                                                    reimbursement.status === 'rejected' ? 'badge-error' :
-                                                        reimbursement.status === 'under_review' ? 'badge-info' :
-                                                            reimbursement.status === 'in_progress' ? 'badge-warning' :
-                                                                reimbursement.status === 'paid' ? 'badge-success' :
-                                                                    'badge-ghost'
-                                                    } gap-1.5 px-3 py-2.5 capitalize font-medium`}>
-                                                    <Icon icon={
-                                                        reimbursement.status === 'approved' ? 'heroicons:check-circle' :
-                                                            reimbursement.status === 'rejected' ? 'heroicons:x-circle' :
-                                                                reimbursement.status === 'under_review' ? 'heroicons:eye' :
-                                                                    reimbursement.status === 'in_progress' ? 'heroicons:currency-dollar' :
-                                                                        reimbursement.status === 'paid' ? 'heroicons:banknotes' :
-                                                                            'heroicons:clock'
-                                                    } className="h-4 w-4 flex-shrink-0" />
-                                                    {reimbursement.status.replace('_', ' ')}
-                                                </span>
+                                        </div>
+                                    ) : (
+                                        // Regular View
+                                        <div className="card-body p-5">
+                                            <div className="flex justify-between items-start gap-4">
+                                                <div className="space-y-2 flex-1 min-w-0">
+                                                    <h3 className="font-bold text-lg group-hover:text-primary transition-colors truncate">
+                                                        {reimbursement.title}
+                                                    </h3>
+                                                    <div className="flex flex-wrap gap-3 text-sm">
+                                                        <div className="flex items-center gap-1.5 text-base-content/70">
+                                                            <Icon icon="heroicons:calendar" className="h-4 w-4 flex-shrink-0" />
+                                                            <span>{new Date(reimbursement.date_of_purchase).toLocaleDateString()}</span>
+                                                        </div>
+                                                        <div className="flex items-center gap-1.5 text-base-content/70">
+                                                            <Icon icon="heroicons:building-office" className="h-4 w-4 flex-shrink-0" />
+                                                            <span className="truncate">{reimbursement.department}</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-col items-end gap-2 flex-shrink-0">
+                                                    <span className="font-mono font-bold text-lg text-primary whitespace-nowrap">
+                                                        ${reimbursement.total_amount.toFixed(2)}
+                                                    </span>
+                                                    <span className={`badge ${reimbursement.status === 'approved' ? 'badge-success' :
+                                                        reimbursement.status === 'rejected' ? 'badge-error' :
+                                                            reimbursement.status === 'under_review' ? 'badge-info' :
+                                                                reimbursement.status === 'in_progress' ? 'badge-warning' :
+                                                                    reimbursement.status === 'paid' ? 'badge-success' :
+                                                                        'badge-ghost'
+                                                        } gap-1.5 px-3 py-2.5 capitalize font-medium`}>
+                                                        <Icon icon={
+                                                            reimbursement.status === 'approved' ? 'heroicons:check-circle' :
+                                                                reimbursement.status === 'rejected' ? 'heroicons:x-circle' :
+                                                                    reimbursement.status === 'under_review' ? 'heroicons:eye' :
+                                                                        reimbursement.status === 'in_progress' ? 'heroicons:currency-dollar' :
+                                                                            reimbursement.status === 'paid' ? 'heroicons:banknotes' :
+                                                                                'heroicons:clock'
+                                                        } className="h-4 w-4 flex-shrink-0" />
+                                                        {reimbursement.status.replace('_', ' ')}
+                                                    </span>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
+                                    )}
                                 </motion.div>
                             ))}
                         </div>
@@ -1714,4 +1932,4 @@ export default function ReimbursementManagementPortal() {
             )}
         </div>
     );
-} 
+}

src/components/dashboard/universal/Button.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+    children,
+    variant = 'primary',
+    size = 'md',
+    fullWidth = false,
+    className = '',
+    disabled = false,
+    ...props
+}) => {
+    // Base classes
+    const baseClasses = 'font-medium rounded-md focus:outline-none transition-colors';
+
+    // Size classes
+    const sizeClasses = {
+        sm: 'px-3 py-1.5 text-xs',
+        md: 'px-4 py-2 text-sm',
+        lg: 'px-6 py-2.5 text-base',
+    };
+
+    // Variant classes
+    const variantClasses = {
+        primary: `bg-blue-600 text-white hover:bg-blue-700 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`,
+        secondary: `bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`,
+        danger: `bg-red-600 text-white hover:bg-red-700 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`,
+    };
+
+    // Width classes
+    const widthClasses = fullWidth ? 'w-full' : '';
+
+    // Combine all classes
+    const buttonClasses = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${widthClasses} ${className}`;
+
+    return (
+        <button
+            className={buttonClasses}
+            disabled={disabled}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};

src/components/dashboard/universal/CustomAlert.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Icon } from "@iconify/react";
+
+export type AlertType = 'info' | 'success' | 'warning' | 'error';
+
+interface CustomAlertProps {
+    type: AlertType;
+    title: string;
+    message: string;
+    icon?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    onClose?: () => void;
+    className?: string;
+}
+
+const CustomAlert: React.FC<CustomAlertProps> = ({
+    type,
+    title,
+    message,
+    icon,
+    actionLabel,
+    onAction,
+    onClose,
+    className = '',
+}) => {
+    // Default icons based on alert type
+    const defaultIcons = {
+        info: 'heroicons:information-circle',
+        success: 'heroicons:check-circle',
+        warning: 'heroicons:exclamation-triangle',
+        error: 'heroicons:document-text',
+    };
+
+    // Colors based on alert type
+    const colors = {
+        info: {
+            bg: 'bg-info/10',
+            border: 'border-info',
+            iconBg: 'bg-info/20',
+            iconColor: 'text-info',
+            actionBg: 'bg-info',
+            actionHover: 'hover:bg-info-focus',
+            actionRing: 'focus:ring-info',
+        },
+        success: {
+            bg: 'bg-success/10',
+            border: 'border-success',
+            iconBg: 'bg-success/20',
+            iconColor: 'text-success',
+            actionBg: 'bg-success',
+            actionHover: 'hover:bg-success-focus',
+            actionRing: 'focus:ring-success',
+        },
+        warning: {
+            bg: 'bg-warning/10',
+            border: 'border-warning',
+            iconBg: 'bg-warning/20',
+            iconColor: 'text-warning',
+            actionBg: 'bg-warning',
+            actionHover: 'hover:bg-warning-focus',
+            actionRing: 'focus:ring-warning',
+        },
+        error: {
+            bg: 'bg-error/10',
+            border: 'border-error',
+            iconBg: 'bg-error/20',
+            iconColor: 'text-error',
+            actionBg: 'bg-error',
+            actionHover: 'hover:bg-error-focus',
+            actionRing: 'focus:ring-error',
+        },
+    };
+
+    const color = colors[type];
+    const selectedIcon = icon || defaultIcons[type];
+
+    return (
+        <div className={`${color.bg} border-l-4 ${color.border} p-4 rounded-lg shadow-md ${className}`}>
+            <div className="flex items-center justify-between">
+                <div className="flex items-start space-x-3">
+                    <div className="flex-shrink-0 mt-0.5">
+                        <div className={`p-1.5 ${color.iconBg} rounded-full`}>
+                            <Icon
+                                icon={selectedIcon}
+                                className={`h-5 w-5 ${color.iconColor}`}
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <h3 className="font-semibold text-white mb-1">
+                            {title}
+                        </h3>
+                        <p className="text-sm text-base-content/80">
+                            {message}
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                    {actionLabel && onAction && (
+                        <button
+                            onClick={onAction}
+                            className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${color.actionBg} ${color.actionHover} focus:outline-none focus:ring-2 focus:ring-offset-2 ${color.actionRing} transition-colors duration-200`}
+                        >
+                            {actionLabel}
+                        </button>
+                    )}
+                    {onClose && (
+                        <button
+                            onClick={onClose}
+                            className="p-1 rounded-full hover:bg-base-300/20 transition-colors duration-200"
+                            aria-label="Close"
+                        >
+                            <Icon
+                                icon="heroicons:x-mark"
+                                className="h-5 w-5 text-base-content/60"
+                            />
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CustomAlert; 

src/components/dashboard/universal/DashboardWrapper.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from "react";
+import type { ReactNode } from "react";
+import { Authentication } from "../../../scripts/pocketbase/Authentication";
+import type { User } from "../../../schemas/pocketbase/schema";
+import FirstTimeLoginPopup from "./FirstTimeLoginPopup";
+
+interface DashboardWrapperProps {
+    children: ReactNode;
+    logtoApiEndpoint?: string;
+}
+
+const DashboardWrapper = ({ children, logtoApiEndpoint }: DashboardWrapperProps) => {
+    const [showOnboarding, setShowOnboarding] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const checkUserStatus = async () => {
+            try {
+                const auth = Authentication.getInstance();
+                if (!auth.isAuthenticated()) {
+                    // Not logged in, so don't show onboarding
+                    setIsLoading(false);
+                    return;
+                }
+
+                const userData = auth.getCurrentUser() as User | null;
+
+                if (userData) {
+                    // If signed_up is explicitly false, show onboarding
+                    setShowOnboarding(userData.signed_up === false);
+                }
+            } catch (error) {
+                console.error("Error checking user status:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        checkUserStatus();
+    }, []);
+
+    const handleOnboardingComplete = () => {
+        setShowOnboarding(false);
+    };
+
+    if (isLoading) {
+        return (
+            <div className="flex justify-center items-center min-h-screen">
+                <span className="loading loading-spinner loading-lg text-primary"></span>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            {showOnboarding && (
+                <FirstTimeLoginPopup
+                    logtoApiEndpoint={logtoApiEndpoint}
+                    onComplete={handleOnboardingComplete}
+                />
+            )}
+            {children}
+        </>
+    );
+};
+
+export default DashboardWrapper; 

src/components/dashboard/universal/FilePreview.tsx

@@ -14,6 +14,8 @@ interface ImageWithFallbackProps {
 const ImageWithFallback = ({ url, filename, onError }: ImageWithFallbackProps) => {
     const [imgSrc, setImgSrc] = useState<string>(url);
     const [isObjectUrl, setIsObjectUrl] = useState<boolean>(false);
+    const [errorCount, setErrorCount] = useState<number>(0);
+    const maxRetries = 2;
 
     // Clean up object URL when component unmounts
     useEffect(() => {
@@ -24,13 +26,51 @@ const ImageWithFallback = ({ url, filename, onError }: ImageWithFallbackProps) =
         };
     }, [imgSrc, url, isObjectUrl]);
 
+    // Reset when URL changes
+    useEffect(() => {
+        setImgSrc(url);
+        setIsObjectUrl(false);
+        setErrorCount(0);
+    }, [url]);
+
+    // Special handling for blob URLs
+    useEffect(() => {
+        const handleBlobUrl = async () => {
+            if (url.startsWith('blob:') && !isObjectUrl) {
+                try {
+                    // For blob URLs, we don't need to fetch again, just set directly
+                    setImgSrc(url);
+                } catch (error) {
+                    console.error('Error with blob URL:', error);
+                }
+            }
+        };
+
+        handleBlobUrl();
+    }, [url, isObjectUrl]);
+
     const handleError = async () => {
-        console.error('Image failed to load:', url);
+        // Prevent infinite retry loops
+        if (errorCount >= maxRetries) {
+            console.error(`Image failed to load after ${maxRetries} attempts:`, url);
+            onError('Failed to load image after multiple attempts. The file may be corrupted or unsupported.');
+            return;
+        }
+
+        setErrorCount(prev => prev + 1);
+        console.error(`Image failed to load (attempt ${errorCount + 1}):`, url);
 
         try {
+            // Skip fetch for blob URLs that already failed
+            if (url.startsWith('blob:')) {
+                throw new Error('Blob URL failed to load directly');
+            }
+
             // Try to fetch the image as a blob and create an object URL
-            console.log('Trying to fetch image as blob:', url);
-            const response = await fetch(url, { mode: 'cors' });
+            const response = await fetch(url, {
+                mode: 'cors',
+                cache: 'no-cache' // Avoid caching issues
+            });
 
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
@@ -38,27 +78,24 @@ const ImageWithFallback = ({ url, filename, onError }: ImageWithFallbackProps) =
 
             const blob = await response.blob();
             const objectUrl = URL.createObjectURL(blob);
-            console.log('Created object URL:', objectUrl);
 
             // Update the image source with the object URL
             setImgSrc(objectUrl);
             setIsObjectUrl(true);
         } catch (fetchError) {
             console.error('Error fetching image as blob:', fetchError);
-            onError('Failed to load image. This might be due to permission issues or the file may not exist.');
 
-            // Log additional details
-            console.log('Image URL that failed:', url);
-            console.log('Current auth status:',
-                Authentication.getInstance().isAuthenticated() ? 'Authenticated' : 'Not authenticated'
-            );
+            // Only show error to user on final retry
+            if (errorCount >= maxRetries - 1) {
+                onError('Failed to load image. This might be due to permission issues or the file may not exist.');
+            }
         }
     };
 
     return (
         <img
             src={imgSrc}
-            alt={filename}
+            alt={filename || 'Image preview'}
             className="max-w-full h-auto rounded-lg"
             loading="lazy"
             onError={handleError}
@@ -167,6 +204,22 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
         setState(prev => ({ ...prev, loading: true, error: null }));
 
         try {
+            // Check cache first
+            const cacheKey = `${state.url}_${state.filename}`;
+            const cachedData = contentCache.get(cacheKey);
+
+            if (cachedData && Date.now() - cachedData.timestamp < CACHE_DURATION) {
+                // Use cached data
+                setState(prev => ({
+                    ...prev,
+                    content: cachedData.content,
+                    fileType: cachedData.fileType,
+                    loading: false
+                }));
+                loadingRef.current = false;
+                return;
+            }
+
             // Special handling for PDFs
             if (state.url.endsWith('.pdf')) {
                 setState(prev => ({
@@ -175,12 +228,377 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
                     fileType: 'application/pdf',
                     loading: false
                 }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'pdf',
+                    fileType: 'application/pdf',
+                    timestamp: Date.now()
+                });
+
                 loadingRef.current = false;
                 return;
             }
 
-            // Rest of your existing loadContent logic
-            // ... existing content loading code ...
+            // Handle image files
+            const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg'];
+            if (imageExtensions.some(ext => state.url.toLowerCase().endsWith(ext) ||
+                (state.filename && state.filename.toLowerCase().endsWith(ext)))) {
+                setState(prev => ({
+                    ...prev,
+                    content: 'image',
+                    fileType: 'image/' + (state.url.split('.').pop() || 'jpeg'),
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'image',
+                    fileType: 'image/' + (state.url.split('.').pop() || 'jpeg'),
+                    timestamp: Date.now()
+                });
+
+                loadingRef.current = false;
+                return;
+            }
+
+            // Handle video files
+            const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi'];
+            if (videoExtensions.some(ext => state.url.toLowerCase().endsWith(ext) ||
+                (state.filename && state.filename.toLowerCase().endsWith(ext)))) {
+                setState(prev => ({
+                    ...prev,
+                    content: 'video',
+                    fileType: 'video/' + (state.url.split('.').pop() || 'mp4'),
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'video',
+                    fileType: 'video/' + (state.url.split('.').pop() || 'mp4'),
+                    timestamp: Date.now()
+                });
+
+                loadingRef.current = false;
+                return;
+            }
+
+            // For other file types, try to fetch the content
+            // Handle blob URLs (for local file previews)
+            if (state.url.startsWith('blob:')) {
+                try {
+                    // Determine file type from filename if available
+                    let fileType = '';
+                    if (state.filename) {
+                        const extension = state.filename.split('.').pop()?.toLowerCase();
+                        if (extension) {
+                            switch (extension) {
+                                case 'jpg':
+                                case 'jpeg':
+                                case 'png':
+                                case 'gif':
+                                case 'webp':
+                                case 'bmp':
+                                case 'svg':
+                                    fileType = `image/${extension === 'jpg' ? 'jpeg' : extension}`;
+                                    break;
+                                case 'mp4':
+                                case 'webm':
+                                case 'ogg':
+                                case 'mov':
+                                    fileType = `video/${extension}`;
+                                    break;
+                                case 'pdf':
+                                    fileType = 'application/pdf';
+                                    break;
+                                case 'doc':
+                                    fileType = 'application/msword';
+                                    break;
+                                case 'docx':
+                                    fileType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+                                    break;
+                                case 'xls':
+                                    fileType = 'application/vnd.ms-excel';
+                                    break;
+                                case 'xlsx':
+                                    fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+                                    break;
+                                case 'ppt':
+                                    fileType = 'application/vnd.ms-powerpoint';
+                                    break;
+                                case 'pptx':
+                                    fileType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+                                    break;
+                                case 'txt':
+                                case 'md':
+                                case 'js':
+                                case 'jsx':
+                                case 'ts':
+                                case 'tsx':
+                                case 'html':
+                                case 'css':
+                                case 'json':
+                                case 'yml':
+                                case 'yaml':
+                                case 'csv':
+                                    fileType = 'text/plain';
+                                    break;
+                                default:
+                                    fileType = 'application/octet-stream';
+                            }
+                        }
+                    }
+
+                    // Try to fetch the blob
+                    const response = await fetch(state.url);
+                    if (!response.ok) {
+                        throw new Error(`Failed to fetch blob: ${response.status}`);
+                    }
+
+                    const blob = await response.blob();
+
+                    // If we couldn't determine file type from filename, use the blob type
+                    if (!fileType && blob.type) {
+                        fileType = blob.type;
+                    }
+
+                    // Handle different file types
+                    if (fileType.startsWith('image/') ||
+                        (state.filename && /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(state.filename))) {
+                        setState(prev => ({
+                            ...prev,
+                            content: 'image',
+                            fileType: fileType || 'image/jpeg',
+                            loading: false
+                        }));
+
+                        // Cache the result
+                        contentCache.set(cacheKey, {
+                            content: 'image',
+                            fileType: fileType || 'image/jpeg',
+                            timestamp: Date.now()
+                        });
+                    } else if (fileType.startsWith('video/') ||
+                        (state.filename && /\.(mp4|webm|ogg|mov|avi)$/i.test(state.filename))) {
+                        setState(prev => ({
+                            ...prev,
+                            content: 'video',
+                            fileType: fileType || 'video/mp4',
+                            loading: false
+                        }));
+
+                        // Cache the result
+                        contentCache.set(cacheKey, {
+                            content: 'video',
+                            fileType: fileType || 'video/mp4',
+                            timestamp: Date.now()
+                        });
+                    } else if (fileType === 'application/pdf' ||
+                        (state.filename && /\.pdf$/i.test(state.filename))) {
+                        setState(prev => ({
+                            ...prev,
+                            content: 'pdf',
+                            fileType: 'application/pdf',
+                            loading: false
+                        }));
+
+                        // Cache the result
+                        contentCache.set(cacheKey, {
+                            content: 'pdf',
+                            fileType: 'application/pdf',
+                            timestamp: Date.now()
+                        });
+                    } else if (
+                        fileType === 'application/msword' ||
+                        fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
+                        fileType === 'application/vnd.ms-excel' ||
+                        fileType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+                        fileType === 'application/vnd.ms-powerpoint' ||
+                        fileType === 'application/vnd.openxmlformats-officedocument.presentationml.presentation' ||
+                        (state.filename && /\.(doc|docx|xls|xlsx|ppt|pptx)$/i.test(state.filename))
+                    ) {
+                        // Handle Office documents with a document icon and download option
+                        const extension = state.filename?.split('.').pop()?.toLowerCase() || '';
+                        let documentType = 'document';
+
+                        if (['xls', 'xlsx'].includes(extension)) {
+                            documentType = 'spreadsheet';
+                        } else if (['ppt', 'pptx'].includes(extension)) {
+                            documentType = 'presentation';
+                        }
+
+                        setState(prev => ({
+                            ...prev,
+                            content: `document-${documentType}`,
+                            fileType: fileType || `application/${documentType}`,
+                            loading: false
+                        }));
+
+                        // Cache the result
+                        contentCache.set(cacheKey, {
+                            content: `document-${documentType}`,
+                            fileType: fileType || `application/${documentType}`,
+                            timestamp: Date.now()
+                        });
+                    } else {
+                        // For text files, read the content
+                        try {
+                            const text = await blob.text();
+                            setState(prev => ({
+                                ...prev,
+                                content: text,
+                                fileType: fileType || 'text/plain',
+                                loading: false
+                            }));
+
+                            // Cache the result
+                            contentCache.set(cacheKey, {
+                                content: text,
+                                fileType: fileType || 'text/plain',
+                                timestamp: Date.now()
+                            });
+                        } catch (textError) {
+                            console.error('Error reading blob as text:', textError);
+                            throw new Error('Failed to read file content');
+                        }
+                    }
+
+                    loadingRef.current = false;
+                    return;
+                } catch (error) {
+                    console.error('Error processing blob URL:', error);
+                    setState(prev => ({
+                        ...prev,
+                        error: 'Failed to load file preview. Please try again or proceed with upload.',
+                        loading: false
+                    }));
+                    loadingRef.current = false;
+                    return;
+                }
+            }
+
+            // For remote files
+            const response = await fetch(state.url);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`);
+            }
+
+            const contentType = response.headers.get('content-type') || '';
+
+            if (contentType.startsWith('image/')) {
+                setState(prev => ({
+                    ...prev,
+                    content: 'image',
+                    fileType: contentType,
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'image',
+                    fileType: contentType,
+                    timestamp: Date.now()
+                });
+            } else if (contentType.startsWith('video/')) {
+                setState(prev => ({
+                    ...prev,
+                    content: 'video',
+                    fileType: contentType,
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'video',
+                    fileType: contentType,
+                    timestamp: Date.now()
+                });
+            } else if (contentType === 'application/pdf') {
+                setState(prev => ({
+                    ...prev,
+                    content: 'pdf',
+                    fileType: contentType,
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'pdf',
+                    fileType: contentType,
+                    timestamp: Date.now()
+                });
+            } else if (
+                contentType === 'application/msword' ||
+                contentType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
+                (state.filename && /\.(doc|docx)$/i.test(state.filename))
+            ) {
+                setState(prev => ({
+                    ...prev,
+                    content: 'document-document',
+                    fileType: contentType || 'application/document',
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'document-document',
+                    fileType: contentType || 'application/document',
+                    timestamp: Date.now()
+                });
+            } else if (
+                contentType === 'application/vnd.ms-excel' ||
+                contentType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+                (state.filename && /\.(xls|xlsx)$/i.test(state.filename))
+            ) {
+                setState(prev => ({
+                    ...prev,
+                    content: 'document-spreadsheet',
+                    fileType: contentType || 'application/spreadsheet',
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'document-spreadsheet',
+                    fileType: contentType || 'application/spreadsheet',
+                    timestamp: Date.now()
+                });
+            } else if (
+                contentType === 'application/vnd.ms-powerpoint' ||
+                contentType === 'application/vnd.openxmlformats-officedocument.presentationml.presentation' ||
+                (state.filename && /\.(ppt|pptx)$/i.test(state.filename))
+            ) {
+                setState(prev => ({
+                    ...prev,
+                    content: 'document-presentation',
+                    fileType: contentType || 'application/presentation',
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: 'document-presentation',
+                    fileType: contentType || 'application/presentation',
+                    timestamp: Date.now()
+                });
+            } else {
+                // For text files, read the content
+                const text = await response.text();
+                setState(prev => ({
+                    ...prev,
+                    content: text,
+                    fileType: contentType,
+                    loading: false
+                }));
+
+                // Cache the result
+                contentCache.set(cacheKey, {
+                    content: text,
+                    fileType: contentType,
+                    timestamp: Date.now()
+                });
+            }
         } catch (err) {
             console.error('Error loading content:', err);
             setState(prev => ({
@@ -193,8 +611,20 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
     }, [state.url]);
 
     useEffect(() => {
-        if (!state.url || (!state.isVisible && isModal)) return;
-        loadContent();
+        if (!state.url) return;
+
+        // For modal, only load when visible
+        if (isModal && !state.isVisible) return;
+
+        // Reset loading state when URL changes
+        loadingRef.current = false;
+
+        // Small timeout to ensure state updates are processed
+        const timer = setTimeout(() => {
+            loadContent();
+        }, 50);
+
+        return () => clearTimeout(timer);
     }, [state.url, state.isVisible, isModal, loadContent]);
 
     // Intersection observer effect
@@ -364,7 +794,14 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
     // Update the Try Again button handler
     const handleTryAgain = useCallback(() => {
         loadingRef.current = false; // Reset loading ref
-        loadContent();
+        setState(prev => ({
+            ...prev,
+            error: null,
+            loading: true
+        }));
+        setTimeout(() => {
+            loadContent();
+        }, 100); // Small delay to ensure state is updated
     }, [loadContent]);
 
     // If URL is empty, show a message
@@ -399,7 +836,8 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
             </div>
 
             <div className="preview-content overflow-auto border border-base-300 rounded-lg bg-base-200/50 relative">
-                {!state.loading && !state.error && state.content === null && (
+                {/* Initial loading state - show immediately when URL is provided but content hasn't loaded yet */}
+                {state.url && !state.loading && !state.error && state.content === null && (
                     <div className="flex justify-center items-center p-8">
                         <span className="loading loading-spinner loading-lg"></span>
                     </div>
@@ -448,21 +886,38 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
 
                 {!state.loading && !state.error && state.content === 'video' && (
                     <div className="flex justify-center bg-base-200 p-4 rounded-b-lg">
-                        <video
-                            controls
-                            className="max-w-full h-auto rounded-lg"
-                            preload="metadata"
-                            onError={(e) => {
-                                console.error('Video failed to load:', e);
-                                setState(prev => ({
-                                    ...prev,
-                                    error: 'Failed to load video. This might be due to permission issues or the file may not exist.'
-                                }));
-                            }}
-                        >
-                            <source src={state.url} type={state.fileType || 'video/mp4'} />
-                            Your browser does not support the video tag.
-                        </video>
+                        <div className="w-full max-w-2xl">
+                            <video
+                                controls
+                                className="max-w-full h-auto rounded-lg"
+                                preload="metadata"
+                                src={state.url}
+                                onError={(e) => {
+                                    console.error('Video failed to load:', e);
+
+                                    // For blob URLs, try a different approach
+                                    if (state.url.startsWith('blob:')) {
+                                        const videoElement = e.target as HTMLVideoElement;
+
+                                        // Try to set the src directly
+                                        try {
+                                            videoElement.src = state.url;
+                                            videoElement.load();
+                                            return;
+                                        } catch (directError) {
+                                            console.error('Direct src assignment failed:', directError);
+                                        }
+                                    }
+
+                                    setState(prev => ({
+                                        ...prev,
+                                        error: 'Failed to load video. This might be due to permission issues or the file may not exist.'
+                                    }));
+                                }}
+                            >
+                                Your browser does not support the video tag.
+                            </video>
+                        </div>
                     </div>
                 )}
 
@@ -522,6 +977,41 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
                     </div>
                 )}
 
+                {!state.loading && !state.error && state.content && state.content.startsWith('document-') && (
+                    <div className="flex flex-col items-center justify-center bg-base-200 p-8 rounded-b-lg">
+                        <div className="bg-primary/10 p-6 rounded-full mb-6">
+                            <Icon
+                                icon={
+                                    state.content === 'document-spreadsheet'
+                                        ? "mdi:file-excel"
+                                        : state.content === 'document-presentation'
+                                            ? "mdi:file-powerpoint"
+                                            : "mdi:file-word"
+                                }
+                                className="h-16 w-16 text-primary"
+                            />
+                        </div>
+                        <h3 className="text-xl font-semibold mb-2">{state.filename}</h3>
+                        <p className="text-base-content/70 mb-6 text-center max-w-md">
+                            This document cannot be previewed in the browser. Please download it to view its contents.
+                        </p>
+                        <a
+                            href={state.url}
+                            download={state.filename}
+                            className="btn btn-primary btn-lg gap-2"
+                        >
+                            <Icon icon="mdi:download" className="h-5 w-5" />
+                            Download {
+                                state.content === 'document-spreadsheet'
+                                    ? 'Spreadsheet'
+                                    : state.content === 'document-presentation'
+                                        ? 'Presentation'
+                                        : 'Document'
+                            }
+                        </a>
+                    </div>
+                )}
+
                 {!state.loading && !state.error && state.content && !['image', 'video', 'pdf'].includes(state.content) && (
                     <div className="overflow-x-auto max-h-[600px] bg-base-200">
                         <div className={`p-1 ${state.filename.toLowerCase().endsWith('.csv') ? 'p-4' : ''}`}>

src/components/dashboard/universal/FirstTimeLoginManager.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+import { Authentication } from "../../../scripts/pocketbase/Authentication";
+import FirstTimeLoginPopup from "./FirstTimeLoginPopup";
+
+interface FirstTimeLoginManagerProps {
+    logtoApiEndpoint?: string;
+}
+
+const FirstTimeLoginManager = ({ logtoApiEndpoint }: FirstTimeLoginManagerProps) => {
+    const [showOnboarding, setShowOnboarding] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const checkUserStatus = async () => {
+            try {
+                const auth = Authentication.getInstance();
+                if (!auth.isAuthenticated()) {
+                    // Not logged in, so don't show onboarding
+                    setIsLoading(false);
+                    return;
+                }
+
+                // Using the new method to check if user has signed up
+                const isSignedUp = auth.isUserSignedUp();
+                console.log("User signed up status:", isSignedUp);
+
+                // If not signed up, show onboarding
+                setShowOnboarding(!isSignedUp);
+            } catch (error) {
+                console.error("Error checking user status:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        checkUserStatus();
+    }, []);
+
+    const handleOnboardingComplete = () => {
+        setShowOnboarding(false);
+    };
+
+    if (isLoading || !showOnboarding) {
+        return null;
+    }
+
+    return (
+        <FirstTimeLoginPopup
+            logtoApiEndpoint={logtoApiEndpoint}
+            onComplete={handleOnboardingComplete}
+        />
+    );
+};
+
+export default FirstTimeLoginManager; 

src/components/dashboard/universal/FirstTimeLoginPopup.tsx

@@ -0,0 +1,701 @@
+import { useState, useEffect } from "react";
+import { Icon } from "@iconify/react";
+import { Update } from "../../../scripts/pocketbase/Update";
+import { Authentication } from "../../../scripts/pocketbase/Authentication";
+import type { User } from "../../../schemas/pocketbase/schema";
+import CustomAlert from "./CustomAlert";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface FirstTimeLoginPopupProps {
+    logtoApiEndpoint?: string;
+    onComplete?: () => void;
+}
+
+const ucsdMajors = [
+    "Aerospace Engineering",
+    "Aerospace Engineering – Aerothermodynamics",
+    "Aerospace Engineering – Astrodynamics and Space Applications",
+    "Aerospace Engineering – Flight Dynamics and Controls",
+    "Anthropology",
+    "Art History/Criticism",
+    "Astronomy & Astrophysics",
+    "Biochemistry",
+    "Biochemistry and Cell Biology",
+    "Biology with Specialization in Bioinformatics",
+    "Bioengineering",
+    "Business Economics",
+    "Business Psychology",
+    "Chemical Engineering",
+    "Chemistry",
+    "Chinese Studies",
+    "Cinematic Arts",
+    "Classical Studies",
+    "Cognitive Science",
+    "Cognitive Science – Clinical Aspects of Cognition",
+    "Cognitive Science – Design and Interaction",
+    "Cognitive Science – Language and Culture",
+    "Cognitive Science – Machine Learning and Neural Computation",
+    "Cognitive Science – Neuroscience",
+    "Cognitive and Behavioral Neuroscience",
+    "Communication",
+    "Computer Engineering",
+    "Computer Science",
+    "Computer Science – Bioinformatics",
+    "Critical Gender Studies",
+    "Dance",
+    "Data Science",
+    "Ecology, Behavior and Evolution",
+    "Economics",
+    "Economics and Mathematics – Joint Major",
+    "Economics-Public Policy",
+    "Education Sciences",
+    "Electrical Engineering",
+    "Electrical Engineering and Society",
+    "Engineering Physics",
+    "Environmental Chemistry",
+    "Environmental Systems (Earth Sciences)",
+    "Environmental Systems (Ecology, Behavior & Evolution)",
+    "Environmental Systems (Environmental Chemistry)",
+    "Environmental Systems (Environmental Policy)",
+    "Ethnic Studies",
+    "General Biology",
+    "General Physics",
+    "General Physics/Secondary Education",
+    "Geosciences",
+    "German Studies",
+    "Global Health",
+    "Global South Studies",
+    "History",
+    "Human Biology",
+    "Human Developmental Sciences",
+    "Human Developmental Sciences – Equity and Diversity",
+    "Human Developmental Sciences – Healthy Aging",
+    "Interdisciplinary Computing and the Arts",
+    "International Studies – Anthropology",
+    "International Studies – Economics",
+    "International Studies – Economics (Joint BA/MIA)",
+    "International Studies – History",
+    "International Studies – International Business",
+    "International Studies – International Business (Joint BA/MIA)",
+    "International Studies – Linguistics",
+    "International Studies – Literature",
+    "International Studies – Philosophy",
+    "International Studies – Political Science",
+    "International Studies – Political Science (Joint BA/MIA)",
+    "International Studies – Sociology",
+    "Italian Studies",
+    "Japanese Studies",
+    "Jewish Studies",
+    "Latin American Studies",
+    "Latin American Studies – Mexico",
+    "Latin American Studies – Migration and Border Studies",
+    "Linguistics",
+    "Linguistics – Cognition and Language",
+    "Linguistics – Language and Society",
+    "Linguistics – Speech and Language Sciences",
+    "Linguistics: Language Studies",
+    "Literary Arts",
+    "Literatures in English",
+    "Marine Biology",
+    "Mathematical Biology",
+    "Mathematics",
+    "Mathematics – Applied Science",
+    "Mathematics – Computer Science",
+    "Mathematics – Secondary Education",
+    "Mathematics (Applied)",
+    "Mechanical Engineering",
+    "Mechanical Engineering – Controls and Robotics",
+    "Mechanical Engineering – Fluid Mechanics and Thermal Systems",
+    "Mechanical Engineering – Materials Science and Engineering",
+    "Mechanical Engineering – Mechanics of Materials",
+    "Mechanical Engineering – Renewable Energy and Environmental Flows",
+    "Media",
+    "Media Industries and Communication",
+    "Microbiology",
+    "Molecular Synthesis",
+    "Molecular and Cell Biology",
+    "Music",
+    "Music Humanities",
+    "NanoEngineering",
+    "Neurobiology / Physiology and Neuroscience",
+    "Oceanic and Atmospheric Sciences",
+    "Pharmacological Chemistry",
+    "Philosophy",
+    "Physics",
+    "Physics – Astrophysics",
+    "Physics – Biophysics",
+    "Physics – Computational Physics",
+    "Physics – Earth Sciences",
+    "Physics – Materials Physics",
+    "Political Science",
+    "Political Science – American Politics",
+    "Political Science – Comparative Politics",
+    "Political Science – Data Analytics",
+    "Political Science – International Affairs",
+    "Political Science – International Relations",
+    "Political Science – Political Theory",
+    "Political Science – Public Law",
+    "Political Science – Public Policy",
+    "Political Science – Race, Ethnicity, and Politics",
+    "Probability and Statistics",
+    "Psychology",
+    "Psychology – Clinical Psychology",
+    "Psychology – Cognitive Psychology",
+    "Psychology – Developmental Psychology",
+    "Psychology – Human Health",
+    "Psychology – Sensation and Perception",
+    "Psychology – Social Psychology",
+    "Public Health",
+    "Public Health – Biostatistics",
+    "Public Health – Climate and Environmental Sciences",
+    "Public Health – Community Health Sciences",
+    "Public Health – Epidemiology",
+    "Public Health – Health Policy and Management Sciences",
+    "Public Health – Medicine Sciences",
+    "Real Estate and Development",
+    "Russian, East European & Eurasian Studies",
+    "Sociology",
+    "Sociology – American Studies",
+    "Sociology – Culture and Communication",
+    "Sociology – Economy and Society",
+    "Sociology – International Studies",
+    "Sociology – Law and Society",
+    "Sociology – Science and Medicine",
+    "Sociology – Social Inequality",
+    "Spanish Literature",
+    "Speculative Design",
+    "Structural Engineering",
+    "Structural Engineering – Aerospace Structures",
+    "Structural Engineering – Civil Structures",
+    "Structural Engineering – Geotechnical Engineering",
+    "Structural Engineering – Structural Health Monitoring/Non-Destructive Evaluation",
+    "Studio",
+    "Study of Religion",
+    "Theatre",
+    "Undeclared – Humanities/Arts",
+    "Undeclared – Physical Sciences",
+    "Undeclared – Social Sciences",
+    "Urban Studies and Planning",
+    "World Literature and Culture",
+    "Other"
+].sort(); // Ensure alphabetical order
+
+// Animation variants
+const overlayVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 0.3 } }
+};
+
+const popupVariants = {
+    hidden: { opacity: 0, scale: 0.9, y: 20 },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: {
+            type: "spring",
+            damping: 25,
+            stiffness: 300,
+            duration: 0.4
+        }
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.95,
+        y: -10,
+        transition: {
+            duration: 0.2
+        }
+    }
+};
+
+const formItemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: (i: number) => ({
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: i * 0.1,
+            duration: 0.3
+        }
+    })
+};
+
+const FirstTimeLoginPopup = ({ logtoApiEndpoint, onComplete }: FirstTimeLoginPopupProps) => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [errorMessage, setErrorMessage] = useState("");
+    const [successMessage, setSuccessMessage] = useState("");
+
+    // Form state
+    const [formData, setFormData] = useState({
+        name: "",
+        username: "",
+        pid: "",
+        member_id: "", // Optional
+        graduation_year: new Date().getFullYear() + 4, // Default to 4 years from now
+        major: ""
+    });
+
+    // Validation state
+    const [isValid, setIsValid] = useState({
+        name: false,
+        username: false,
+        pid: false,
+        graduation_year: true,
+        major: false
+    });
+
+    // Get current user data
+    useEffect(() => {
+        const fetchUserData = async () => {
+            try {
+                const auth = Authentication.getInstance();
+                const userData = auth.getCurrentUser() as User | null;
+
+                if (userData) {
+                    setFormData(prev => ({
+                        ...prev,
+                        name: userData.name || "",
+                        username: userData.username || "",
+                        pid: userData.pid || "",
+                        member_id: userData.member_id || "",
+                        graduation_year: userData.graduation_year || new Date().getFullYear() + 4,
+                        major: userData.major || ""
+                    }));
+
+                    // Update validation state based on existing data
+                    setIsValid({
+                        name: !!userData.name,
+                        username: !!userData.username,
+                        pid: !!userData.pid,
+                        graduation_year: true,
+                        major: !!userData.major
+                    });
+                }
+            } catch (error) {
+                console.error("Error fetching user data:", error);
+                setErrorMessage("Failed to load your profile information. Please try again.");
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchUserData();
+    }, []);
+
+    // Validate form
+    useEffect(() => {
+        setIsValid({
+            name: formData.name.trim().length > 0,
+            username: /^[a-z0-9_]{3,20}$/.test(formData.username),
+            pid: /^[A-Za-z]\d{8}$/.test(formData.pid),
+            graduation_year:
+                !isNaN(parseInt(formData.graduation_year.toString())) &&
+                parseInt(formData.graduation_year.toString()) >= new Date().getFullYear(),
+            major: formData.major !== "" // Check if a major is selected
+        });
+    }, [formData]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: name === "graduation_year" ? parseInt(value) : value
+        }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setErrorMessage("");
+        setSuccessMessage("");
+
+        const allRequiredValid = isValid.name && isValid.username && isValid.pid && isValid.graduation_year && isValid.major;
+
+        if (!allRequiredValid) {
+            setErrorMessage("Please fill in all required fields with valid information.");
+            return;
+        }
+
+        setIsSaving(true);
+
+        try {
+            // Update PocketBase user
+            const auth = Authentication.getInstance();
+            const userId = auth.getUserId();
+
+            if (!userId) {
+                throw new Error("No user ID found. Please log in again.");
+            }
+
+            const updateInstance = Update.getInstance();
+            await updateInstance.updateFields("users", userId, {
+                name: formData.name,
+                username: formData.username,
+                pid: formData.pid,
+                member_id: formData.member_id || undefined,
+                graduation_year: formData.graduation_year,
+                major: formData.major,
+                signed_up: true // Set signed_up to true after completing onboarding
+            });
+
+            console.log("Saving first-time user data with signed_up=true");
+
+            // Update Logto user if endpoint is provided
+            if (logtoApiEndpoint) {
+                const accessToken = localStorage.getItem("access_token");
+                if (accessToken) {
+                    const response = await fetch("/api/update-logto-user", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            name: formData.name,
+                            custom_data: {
+                                username: formData.username,
+                                pid: formData.pid,
+                                member_id: formData.member_id || "",
+                                graduation_year: formData.graduation_year,
+                                major: formData.major,
+                                signed_up: true
+                            }
+                        }),
+                    });
+
+                    if (!response.ok) {
+                        throw new Error("Failed to update Logto user data");
+                    }
+                }
+            }
+
+            console.log("Successfully updated PocketBase user with signed_up=true");
+
+            if (logtoApiEndpoint) {
+                console.log("Successfully updated Logto user profile with signed_up=true");
+            }
+
+            setSuccessMessage("Profile information saved successfully!");
+
+            // Call onComplete callback if provided
+            if (onComplete) {
+                setTimeout(() => {
+                    onComplete();
+                }, 1500); // Show success message briefly before completing
+            }
+        } catch (error) {
+            console.error("Error saving user data:", error);
+            // Check if the error might be related to username uniqueness
+            const errorMsg = error instanceof Error ? error.message : "Unknown error";
+            if (errorMsg.toLowerCase().includes("username") || errorMsg.toLowerCase().includes("unique")) {
+                setErrorMessage("Failed to save your profile information. The username you chose might already be taken. Please try a different username.");
+            } else {
+                setErrorMessage("Failed to save your profile information. Please try again.");
+            }
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    // Check if form can be submitted (all required fields valid)
+    const canSubmit = isValid.name && isValid.username && isValid.pid && isValid.graduation_year && isValid.major;
+
+    return (
+        <AnimatePresence>
+            <motion.div
+                className="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50 flex items-center justify-center p-4"
+                initial="hidden"
+                animate="visible"
+                exit="hidden"
+                variants={overlayVariants}
+            >
+                <motion.div
+                    className="bg-base-100 shadow-xl rounded-xl max-w-2xl w-full"
+                    variants={popupVariants}
+                    initial="hidden"
+                    animate="visible"
+                    exit="exit"
+                >
+                    <div className="p-6">
+                        <div className="mb-6">
+                            <div className="flex justify-between items-center">
+                                <h2 className="text-2xl font-bold">Complete Your Profile</h2>
+                                <div className="badge badge-primary p-3">
+                                    <Icon icon="heroicons:user" className="h-5 w-5" />
+                                </div>
+                            </div>
+                            <p className="opacity-70 mt-2">
+                                Welcome to IEEE UCSD! Please complete your profile to continue.
+                            </p>
+                            <motion.div
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: 0.2 }}
+                            >
+                                <CustomAlert
+                                    type="info"
+                                    title="Profile Setup Required"
+                                    message="You need to complete this information before you can access the dashboard. All fields marked with * are required."
+                                    className="mt-4"
+                                />
+                            </motion.div>
+                        </div>
+
+                        {isLoading ? (
+                            <div className="flex justify-center py-8">
+                                <motion.span
+                                    className="loading loading-spinner loading-lg text-primary"
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    transition={{ duration: 0.3 }}
+                                />
+                            </div>
+                        ) : (
+                            <form onSubmit={handleSubmit}>
+                                <div className="space-y-6">
+                                    {/* Name Field */}
+                                    <motion.div
+                                        className="form-control"
+                                        custom={0}
+                                        variants={formItemVariants}
+                                        initial="hidden"
+                                        animate="visible"
+                                    >
+                                        <label className="label">
+                                            <span className="label-text font-medium">Full Name <span className="text-error">*</span></span>
+                                        </label>
+                                        <input
+                                            type="text"
+                                            name="name"
+                                            value={formData.name}
+                                            onChange={handleInputChange}
+                                            placeholder="Enter your full name"
+                                            className={`input input-bordered w-full ${!isValid.name && formData.name ? 'input-error' : ''}`}
+                                            required
+                                        />
+                                        {!isValid.name && formData.name && (
+                                            <label className="label">
+                                                <span className="label-text-alt text-error">Please enter your full name</span>
+                                            </label>
+                                        )}
+                                    </motion.div>
+
+                                    {/* Username Field */}
+                                    <motion.div
+                                        className="form-control"
+                                        custom={1}
+                                        variants={formItemVariants}
+                                        initial="hidden"
+                                        animate="visible"
+                                    >
+                                        <label className="label">
+                                            <span className="label-text font-medium">Username <span className="text-error">*</span></span>
+                                        </label>
+                                        <div className="relative">
+                                            <input
+                                                type="text"
+                                                name="username"
+                                                value={formData.username}
+                                                onChange={handleInputChange}
+                                                placeholder="your_username"
+                                                className={`input input-bordered w-full ${!isValid.username && formData.username ? 'input-error' : ''}`}
+                                                required
+                                            />
+                                        </div>
+                                        {!isValid.username && formData.username && (
+                                            <label className="label">
+                                                <span className="label-text-alt text-error">Username must be 3-20 characters, lowercase letters, numbers, and underscores only</span>
+                                            </label>
+                                        )}
+                                        <label className="label">
+                                            <span className="label-text-alt opacity-70">Choose a unique username for your IEEEUCSD SSO account. This only impacts your SSO login</span>
+                                        </label>
+                                    </motion.div>
+
+                                    {/* PID Field */}
+                                    <motion.div
+                                        className="form-control"
+                                        custom={2}
+                                        variants={formItemVariants}
+                                        initial="hidden"
+                                        animate="visible"
+                                    >
+                                        <label className="label">
+                                            <span className="label-text font-medium">PID <span className="text-error">*</span></span>
+                                        </label>
+                                        <input
+                                            type="text"
+                                            name="pid"
+                                            value={formData.pid}
+                                            onChange={handleInputChange}
+                                            placeholder="A12345678"
+                                            className={`input input-bordered w-full ${!isValid.pid && formData.pid ? 'input-error' : ''}`}
+                                            required
+                                        />
+                                        {!isValid.pid && formData.pid && (
+                                            <label className="label">
+                                                <span className="label-text-alt text-error">PID must be in format A12345678</span>
+                                            </label>
+                                        )}
+                                    </motion.div>
+
+                                    {/* Member ID Field (Optional) */}
+                                    <motion.div
+                                        className="form-control"
+                                        custom={3}
+                                        variants={formItemVariants}
+                                        initial="hidden"
+                                        animate="visible"
+                                    >
+                                        <label className="label">
+                                            <span className="label-text font-medium">IEEE Member ID <span className="text-opacity-50">(optional)</span></span>
+                                        </label>
+                                        <input
+                                            type="text"
+                                            name="member_id"
+                                            value={formData.member_id}
+                                            onChange={handleInputChange}
+                                            placeholder="Your IEEE member ID (if you have one)"
+                                            className="input input-bordered w-full"
+                                        />
+                                    </motion.div>
+
+                                    {/* Graduation Year Field */}
+                                    <motion.div
+                                        className="form-control"
+                                        custom={4}
+                                        variants={formItemVariants}
+                                        initial="hidden"
+                                        animate="visible"
+                                    >
+                                        <label className="label">
+                                            <span className="label-text font-medium">Expected Graduation Year <span className="text-error">*</span></span>
+                                        </label>
+                                        <select
+                                            name="graduation_year"
+                                            value={formData.graduation_year}
+                                            onChange={handleInputChange}
+                                            className={`select select-bordered w-full ${!isValid.graduation_year ? 'select-error' : ''}`}
+                                            required
+                                        >
+                                            {Array.from({ length: 10 }, (_, i) => {
+                                                const year = new Date().getFullYear() + i;
+                                                return (
+                                                    <option key={year} value={year}>
+                                                        {year}
+                                                    </option>
+                                                );
+                                            })}
+                                        </select>
+                                        {!isValid.graduation_year && (
+                                            <label className="label">
+                                                <span className="label-text-alt text-error">Please select a valid graduation year</span>
+                                            </label>
+                                        )}
+                                    </motion.div>
+
+                                    {/* Major Field */}
+                                    <motion.div
+                                        className="form-control"
+                                        custom={5}
+                                        variants={formItemVariants}
+                                        initial="hidden"
+                                        animate="visible"
+                                    >
+                                        <label className="label">
+                                            <span className="label-text font-medium">Major <span className="text-error">*</span></span>
+                                        </label>
+                                        <select
+                                            name="major"
+                                            value={formData.major}
+                                            onChange={handleInputChange}
+                                            className={`select select-bordered w-full ${!isValid.major && formData.major ? 'select-error' : ''}`}
+                                            required
+                                        >
+                                            <option value="" disabled>Select your major</option>
+                                            {ucsdMajors.map(major => (
+                                                <option key={major} value={major}>
+                                                    {major}
+                                                </option>
+                                            ))}
+                                        </select>
+                                        {!isValid.major && formData.major && (
+                                            <label className="label">
+                                                <span className="label-text-alt text-error">Please select your major</span>
+                                            </label>
+                                        )}
+                                    </motion.div>
+
+                                    {/* Error/Success Messages */}
+                                    <AnimatePresence>
+                                        {errorMessage && (
+                                            <motion.div
+                                                initial={{ opacity: 0, y: 10 }}
+                                                animate={{ opacity: 1, y: 0 }}
+                                                exit={{ opacity: 0, height: 0 }}
+                                                transition={{ duration: 0.3 }}
+                                            >
+                                                <CustomAlert
+                                                    type="error"
+                                                    title="Error Saving Profile"
+                                                    message={errorMessage}
+                                                    icon="heroicons:exclamation-circle"
+                                                    className="mt-4"
+                                                />
+                                            </motion.div>
+                                        )}
+
+                                        {successMessage && (
+                                            <motion.div
+                                                initial={{ opacity: 0, y: 10 }}
+                                                animate={{ opacity: 1, y: 0 }}
+                                                exit={{ opacity: 0, height: 0 }}
+                                                transition={{ duration: 0.3 }}
+                                            >
+                                                <CustomAlert
+                                                    type="success"
+                                                    title="Profile Saved"
+                                                    message={successMessage}
+                                                    icon="heroicons:check-circle"
+                                                    className="mt-4"
+                                                />
+                                            </motion.div>
+                                        )}
+                                    </AnimatePresence>
+
+                                    {/* Submit Button */}
+                                    <motion.div
+                                        className="form-control mt-8"
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        transition={{ delay: 0.6, duration: 0.3 }}
+                                    >
+                                        <button
+                                            type="submit"
+                                            className="btn btn-primary"
+                                            disabled={!canSubmit || isSaving}
+                                        >
+                                            {isSaving ? (
+                                                <>
+                                                    <span className="loading loading-spinner loading-sm"></span>
+                                                    Saving...
+                                                </>
+                                            ) : (
+                                                "Complete Profile"
+                                            )}
+                                        </button>
+                                        <p className="text-xs text-center mt-3 opacity-70">
+                                            <span className="text-error">*</span> Required fields
+                                        </p>
+                                    </motion.div>
+                                </div>
+                            </form>
+                        )}
+                    </div>
+                </motion.div>
+            </motion.div>
+        </AnimatePresence>
+    );
+};
+
+export default FirstTimeLoginPopup; 

src/components/dashboard/universal/ThemeToggle.tsx

@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react';
+import { getCurrentTheme, toggleTheme } from '../../../utils/themeUtils';
+import { ThemeService } from '../../../scripts/database/ThemeService';
+import { Update } from '../../../scripts/pocketbase/Update';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+import { Collections } from '../../../schemas/pocketbase/schema';
+
+export default function ThemeToggle() {
+    const [theme, setTheme] = useState<'light' | 'dark'>(getCurrentTheme());
+    const [isLoading, setIsLoading] = useState(false);
+    const auth = Authentication.getInstance();
+    const update = Update.getInstance();
+
+    useEffect(() => {
+        // Initialize theme from IndexedDB
+        const loadTheme = async () => {
+            try {
+                const themeService = ThemeService.getInstance();
+                const settings = await themeService.getThemeSettings();
+                setTheme(settings.theme);
+            } catch (error) {
+                console.error('Error loading theme:', error);
+            }
+        };
+
+        loadTheme();
+
+        // Add event listener for theme changes
+        const handleThemeChange = () => {
+            setTheme(getCurrentTheme());
+        };
+
+        window.addEventListener('themechange', handleThemeChange);
+
+        return () => {
+            window.removeEventListener('themechange', handleThemeChange);
+        };
+    }, []);
+
+    const handleToggle = async () => {
+        setIsLoading(true);
+        try {
+            // Toggle theme in IndexedDB
+            await toggleTheme();
+            const newTheme = getCurrentTheme();
+            setTheme(newTheme);
+
+            // Also update user preferences in PocketBase if user is authenticated
+            const user = auth.getCurrentUser();
+            if (user) {
+                try {
+                    // Get current display preferences
+                    let displayPreferences = { theme: newTheme, fontSize: 'medium' };
+
+                    if (user.display_preferences && typeof user.display_preferences === 'string') {
+                        try {
+                            const userPrefs = JSON.parse(user.display_preferences);
+                            displayPreferences = {
+                                ...userPrefs,
+                                theme: newTheme
+                            };
+                        } catch (e) {
+                            console.error('Error parsing display preferences:', e);
+                        }
+                    }
+
+                    // Update user record
+                    await update.updateFields(
+                        Collections.USERS,
+                        user.id,
+                        {
+                            display_preferences: JSON.stringify(displayPreferences)
+                        }
+                    );
+                } catch (error) {
+                    console.error('Error updating user preferences:', error);
+                }
+            }
+        } catch (error) {
+            console.error('Error toggling theme:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="dropdown dropdown-end">
+            <button
+                onClick={handleToggle}
+                className={`btn btn-circle btn-sm ${isLoading ? 'loading' : ''}`}
+                aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
+                title={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme (Light mode is experimental)`}
+                disabled={isLoading}
+            >
+                {!isLoading && (
+                    theme === 'light' ? (
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                        </svg>
+                    ) : (
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                        </svg>
+                    )
+                )}
+            </button>
+            <div className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-2 text-xs">
+                <div className="p-2">
+                    <p className="font-bold text-warning mb-1">Warning:</p>
+                    <p>Light mode is experimental and not fully supported yet. Some UI elements may not display correctly.</p>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/dashboard/universal/Toast.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+
+interface ToastProps {
+    message: string;
+    type?: 'success' | 'error' | 'info' | 'warning';
+    duration?: number;
+    onClose?: () => void;
+}
+
+export const Toast: React.FC<ToastProps> = ({
+    message,
+    type = 'info',
+    duration = 3000,
+    onClose,
+}) => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsVisible(false);
+            if (onClose) onClose();
+        }, duration);
+
+        return () => clearTimeout(timer);
+    }, [duration, onClose]);
+
+    if (!isVisible) return null;
+
+    // Type-based styling
+    const typeStyles = {
+        success: 'bg-green-100 border-green-500 text-green-700 dark:bg-green-800 dark:text-green-100',
+        error: 'bg-red-100 border-red-500 text-red-700 dark:bg-red-800 dark:text-red-100',
+        warning: 'bg-yellow-100 border-yellow-500 text-yellow-700 dark:bg-yellow-800 dark:text-yellow-100',
+        info: 'bg-blue-100 border-blue-500 text-blue-700 dark:bg-blue-800 dark:text-blue-100',
+    };
+
+    // Icons based on type
+    const icons = {
+        success: (
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path>
+            </svg>
+        ),
+        error: (
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="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" clipRule="evenodd"></path>
+            </svg>
+        ),
+        warning: (
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd"></path>
+            </svg>
+        ),
+        info: (
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="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 7a1 1 0 100 2h.01a1 1 0 100-2H10z" clipRule="evenodd"></path>
+            </svg>
+        ),
+    };
+
+    return (
+        <div className="fixed top-4 right-4 z-50 animate-fade-in">
+            <div className={`flex items-center p-4 mb-4 border-l-4 rounded-md shadow-md ${typeStyles[type]}`} role="alert">
+                <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3">
+                    {icons[type]}
+                </div>
+                <div className="ml-3 text-sm font-medium">{message}</div>
+                <button
+                    type="button"
+                    className="ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex h-8 w-8 hover:bg-gray-200 dark:hover:bg-gray-700"
+                    onClick={() => {
+                        setIsVisible(false);
+                        if (onClose) onClose();
+                    }}
+                    aria-label="Close"
+                >
+                    <span className="sr-only">Close</span>
+                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    );
+};

src/components/dashboard/universal/ToastProvider.tsx

@@ -1,7 +1,20 @@
 import { Toaster } from 'react-hot-toast';
+import { useState, useEffect } from 'react';
 
 // Centralized toast provider to ensure consistent rendering
 export default function ToastProvider() {
+    const [isMounted, setIsMounted] = useState(false);
+
+    // Only render the Toaster component on the client side
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+
+    // Don't render anything during SSR
+    if (!isMounted) {
+        return null;
+    }
+
     return (
         <Toaster
             position="top-center"

src/components/dashboard/universal/ZoomablePreview.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Icon } from '@iconify/react';
+import { motion } from 'framer-motion';
+import FilePreview from './FilePreview';
+
+interface ZoomablePreviewProps {
+    url: string;
+    filename: string;
+}
+
+export default function ZoomablePreview({ url, filename }: ZoomablePreviewProps) {
+    const [zoom, setZoom] = useState(1);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const zoomLevels = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3];
+    const currentZoomIndex = zoomLevels.findIndex(level => Math.abs(level - zoom) < 0.01);
+
+    const handleZoomIn = useCallback(() => {
+        const nextIndex = Math.min(currentZoomIndex + 1, zoomLevels.length - 1);
+        setZoom(zoomLevels[nextIndex]);
+    }, [currentZoomIndex]);
+
+    const handleZoomOut = useCallback(() => {
+        const prevIndex = Math.max(currentZoomIndex - 1, 0);
+        setZoom(zoomLevels[prevIndex]);
+    }, [currentZoomIndex]);
+
+    const handleZoomReset = useCallback(() => {
+        setZoom(1);
+        setPosition({ x: 0, y: 0 });
+    }, []);
+
+    const handleMouseDown = useCallback((e: React.MouseEvent) => {
+        if (zoom > 1) {
+            setIsDragging(true);
+            setDragStart({
+                x: e.clientX - position.x,
+                y: e.clientY - position.y
+            });
+        }
+    }, [zoom, position]);
+
+    const handleMouseMove = useCallback((e: React.MouseEvent) => {
+        if (isDragging && zoom > 1) {
+            setPosition({
+                x: e.clientX - dragStart.x,
+                y: e.clientY - dragStart.y
+            });
+        }
+    }, [isDragging, dragStart, zoom]);
+
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+
+    const handleWheel = useCallback((e: React.WheelEvent) => {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -1 : 1;
+        const newZoomIndex = Math.max(0, Math.min(zoomLevels.length - 1, currentZoomIndex + delta));
+        setZoom(zoomLevels[newZoomIndex]);
+        
+        // Reset position when zooming out to 100% or less
+        if (zoomLevels[newZoomIndex] <= 1) {
+            setPosition({ x: 0, y: 0 });
+        }
+    }, [currentZoomIndex]);
+
+    return (
+        <div className="relative h-full">
+            {/* Zoom Controls */}
+            <div className="absolute top-4 right-4 z-10 flex flex-col gap-2 bg-base-100/90 backdrop-blur-sm rounded-lg p-2 shadow-lg">
+                <motion.button
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                    className="btn btn-xs btn-ghost"
+                    onClick={handleZoomIn}
+                    disabled={currentZoomIndex >= zoomLevels.length - 1}
+                    title="Zoom In"
+                >
+                    <Icon icon="heroicons:plus" className="h-3 w-3" />
+                </motion.button>
+                
+                <div className="text-xs text-center font-mono px-1">
+                    {Math.round(zoom * 100)}%
+                </div>
+                
+                <motion.button
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                    className="btn btn-xs btn-ghost"
+                    onClick={handleZoomOut}
+                    disabled={currentZoomIndex <= 0}
+                    title="Zoom Out"
+                >
+                    <Icon icon="heroicons:minus" className="h-3 w-3" />
+                </motion.button>
+                
+                <motion.button
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                    className="btn btn-xs btn-ghost"
+                    onClick={handleZoomReset}
+                    disabled={zoom === 1 && position.x === 0 && position.y === 0}
+                    title="Reset Zoom"
+                >
+                    <Icon icon="heroicons:arrows-pointing-out" className="h-3 w-3" />
+                </motion.button>
+            </div>
+
+            {/* Zoom Indicator */}
+            {zoom !== 1 && (
+                <div className="absolute top-4 left-4 z-10 bg-primary/90 backdrop-blur-sm text-primary-content text-xs px-2 py-1 rounded">
+                    {zoom > 1 ? 'Click and drag to pan' : ''}
+                </div>
+            )}
+
+            {/* Preview Container */}
+            <div
+                ref={containerRef}
+                className="relative h-full overflow-hidden rounded-lg cursor-move"
+                onMouseDown={handleMouseDown}
+                onMouseMove={handleMouseMove}
+                onMouseUp={handleMouseUp}
+                onMouseLeave={handleMouseUp}
+                onWheel={handleWheel}
+                style={{
+                    cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default'
+                }}
+            >
+                <div
+                    className="h-full transition-transform duration-100"
+                    style={{
+                        transform: `scale(${zoom}) translate(${position.x / zoom}px, ${position.y / zoom}px)`,
+                        transformOrigin: 'center center'
+                    }}
+                >
+                    <div className="p-4 h-full">
+                        <FilePreview
+                            url={url}
+                            filename={filename}
+                            isModal={false}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* Usage Hint */}
+            <div className="absolute bottom-4 left-4 z-10 text-xs text-base-content/50 bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded">
+                Scroll to zoom • Click and drag to pan
+            </div>
+        </div>
+    );
+} 

src/components/events/Calendar.jsx

@@ -45,9 +45,17 @@ const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
     if (!day) return [];
     const dayStr = formatDate(day);
     return events.filter((event) => {
-      const eventDate = event.start.dateTime
-        ? new Date(event.start.dateTime).toISOString().split("T")[0]
-        : event.start.date;
+      let eventDate;
+      if (event.start.dateTime) {
+        // For events with specific times, convert to local timezone
+        const date = new Date(event.start.dateTime);
+        eventDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
+          .toISOString()
+          .split("T")[0];
+      } else {
+        // For all-day events, use the date directly
+        eventDate = event.start.date;
+      }
       return eventDate === dayStr;
     });
   };
@@ -68,26 +76,26 @@ const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
 
     const loadGapiAndListEvents = async () => {
       try {
-        console.log("Starting to load events...");
+        // console.log("Starting to load events...");
 
         if (typeof window.gapi === "undefined") {
-          console.log("Loading GAPI script...");
+          // console.log("Loading GAPI script...");
           await new Promise((resolve, reject) => {
             const script = document.createElement("script");
             script.src = "https://apis.google.com/js/api.js";
             document.body.appendChild(script);
             script.onload = () => {
-              console.log("GAPI script loaded");
+              // console.log("GAPI script loaded");
               window.gapi.load("client", resolve);
             };
             script.onerror = () => {
-              console.error("Failed to load GAPI script");
+              // console.error("Failed to load GAPI script");
               reject(new Error("Failed to load the Google API script."));
             };
           });
         }
 
-        console.log("Initializing GAPI client...");
+        // console.log("Initializing GAPI client...");
         await window.gapi.client.init({
           apiKey: CALENDAR_API_KEY,
           discoveryDocs: [
@@ -107,7 +115,7 @@ const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
           0,
         );
 
-        console.log("Fetching events...");
+        // console.log("Fetching events...");
         const response = await window.gapi.client.calendar.events.list({
           calendarId: calendarId,
           timeZone: userTimeZone,
@@ -117,13 +125,13 @@ const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
           orderBy: "startTime",
         });
 
-        console.log("Response received:", response);
+        // console.log("Response received:", response);
 
         if (response.result.items) {
           setEvents(response.result.items);
         }
       } catch (error) {
-        console.error("Detailed Error: ", error);
+        // console.error("Detailed Error: ", error);
         setError(error.message || "Failed to load events");
       } finally {
         setLoading(false);

src/components/events/EventList.jsx

@@ -1,27 +1,27 @@
 import React, { useEffect, useState } from "react";
 
 const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
-  <div className="text-white w-[40vw] pl-[8%] md:border-l-[0.3vw] border-l-[0.5vw] border-white/70 pb-[5%] relative">
+  <div className="text-white w-[40vw] pl-[8%] md:border-l-[0.3vw] border-l-[0.5vw] border-white/70 md:pb-[5%] pb-[10%] relative">
     <p
       data-inview
-      className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full md:text-[1.3vw] text-[2.3vw]`}
+      className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] pl-[8%] md:pl-[2%] md:pr-[2%] w-fit border-[0.1vw] font-light rounded-full md:text-[1.3vw] text-[2.3vw]`}
     >
       {name}
     </p>
     <div
       data-inview
-      className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`}
+      className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left md:flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`}
     >
       Location: {location}
       {date && (
         <>
-          <div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
+          <div className="md:visible invisible bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
           <p>{date}</p>
         </>
       )}
       {time && (
         <>
-          <div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
+          <div className="md:visible invisible bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
           <p>{time}</p>
         </>
       )}
@@ -48,16 +48,16 @@ const EventList = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
 
     const loadGapiAndListEvents = async () => {
       try {
-        console.log("Starting to load events...");
+        // console.log("Starting to load events...");
 
         if (typeof window.gapi === "undefined") {
-          console.log("Loading GAPI script...");
+          // console.log("Loading GAPI script...");
           await new Promise((resolve, reject) => {
             const script = document.createElement("script");
             script.src = "https://apis.google.com/js/api.js";
             document.body.appendChild(script);
             script.onload = () => {
-              console.log("GAPI script loaded");
+              // console.log("GAPI script loaded");
               window.gapi.load("client", resolve);
             };
             script.onerror = () => {
@@ -67,7 +67,7 @@ const EventList = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
           });
         }
 
-        console.log("Initializing GAPI client...");
+        // console.log("Initializing GAPI client...");
         await window.gapi.client.init({
           apiKey: apiKey,
           discoveryDocs: [
@@ -75,7 +75,7 @@ const EventList = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
           ],
         });
 
-        console.log("Fetching events...");
+        // console.log("Fetching events...");
         const response = await window.gapi.client.calendar.events.list({
           calendarId: calendarId,
           timeZone: userTimeZone,
@@ -85,7 +85,7 @@ const EventList = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
           orderBy: "startTime",
         });
 
-        console.log("Response received:", response);
+        // console.log("Response received:", response);
 
         if (response.result.items) {
           setEvents(response.result.items);

src/components/events/UpcomingEvent.astro

@@ -1,20 +0,0 @@
----
-const {name, location, date, time, description, delay} = Astro.props;
----
-
-<div class="text-white w-[40vw] pl-[8%] border-l-[0.3vw] border-white/70 pb-[5%] relative">
-    <p data-inview class={`animate-delay-${delay} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]`}>
-        {name}
-    </p>
-    <div data-inview class={`animate-delay-${delay} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]`}>
-        <p>Location: {location}</p>
-        <div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
-        <p>{date}</p>
-        <div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
-        <p>{time}</p>
-    </div>
-    <p data-inview class={`animate-delay-${delay} in-view:animate-fade-left text-[1vw] text-white/60`}>
-        {description}
-    </p>
-    <div class="bg-ieee-yellow h-[1.2vw] w-[1.2vw] rounded-full absolute -top-[1.5%] -left-[2%]" />
-</div>

src/components/join/Involvement.astro

@@ -4,41 +4,63 @@ import { GoArrowDownRight } from "react-icons/go";
 import { FaGear } from "react-icons/fa6";
 import { IoMdCalendar } from "react-icons/io";
 import { RiRobot2Fill } from "react-icons/ri";
-const {image, text, link, delay} = Astro.props;
+const { image, text, link, delay } = Astro.props;
 ---
-<div data-inview class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>
 
-    <img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/>
-    <Link 
-        href={link}
-        target={text==="H.A.R.D. HACK"? "_blank":"_self"} 
-        className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
+<div
+  data-inview
+  class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}
+>
+  <img
+    src={image}
+    alt="involvement background"
+    class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"
+  />
+  <Link
+    href={link}
+    target={text === "H.A.R.D. HACK" ? "_blank" : "_self"}
+    className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
+  >
+    <div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
+      <div
+        class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]"
+      >
+        {
+          text === "PROJECTS" ? (
+            <RiRobot2Fill />
+          ) : text === "EVENTS" ? (
+            <IoMdCalendar />
+          ) : (
+            <FaGear />
+          )
+        }
+      </div>
+    </div>
+
+    <div
+      class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]"
     >
-        <div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
-            <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]">
-                {
-                    text === "PROJECTS"? <RiRobot2Fill/>:
-                    text === "EVENTS"? <IoMdCalendar/>:
-                    <FaGear/>
-                }
-            </div>
-        </div>
-    
-        <div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]">
-            <div class="text-[2vw] md:text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end">
-                <p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
-                    {text}
-                </p>
-                <GoArrowDownRight className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"/>
-            </div>
-    
-            {text === "H.A.R.D. HACK" &&
-                <p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
-                    UC San Diego’s largest
-                    hardware focused hackathon
-                    hold by IEEE UCSD, HKN, and TNT
-                </p>
-            }
-        </div>
-    </Link>
+      <div
+        class="text-[2vw] md:text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end"
+      >
+        <p
+          class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"
+        >
+          {text}
+        </p>
+        <GoArrowDownRight
+          className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"
+        />
+      </div>
+
+      {
+        text === "H.A.R.D. HACK" && (
+          <p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
+            UC San Diego’s largest hardware focused hackathon hold by IEEE UCSD,
+            HKN, and TNT
+          </p>
+        )
+      }
+    </div>
+  </Link>
 </div>

src/components/main_page/Activity.astro

@@ -1,23 +1,38 @@
 ---
 import Link from "next/link";
 import { IoIosArrowDroprightCircle } from "react-icons/io";
-const {  title, text, link, number, delay  } = Astro.props;
+const { title, text, link, number, delay } = Astro.props;
 ---
 
-<div data-inview class={`animate-ease-in-out relative text-white flex flex-col items-center w-[30vw] md:w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black md:h-[33vw] h-[40vw] border-[0.1vw] border-white/40 rounded-[2vw] md:pt-[5%] pt-[15%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}>
-    <div class="rounded-full aspect-square w-[7vw] md:w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/>
-    <p class="text-[2.7vw] md:text-[1.7vw] font-bold text-center">
-        {title}
-    </p>
-    <p class={`text-[1.7vw] md:text-[1.2vw] w-4/5 ${title === "Professional Development" ? "md:mt-[2%] mt-[2%]":"md:mt-[15%] mt-[5%]"}`}>
-        {text}
-    </p>
+<div
+  data-inview
+  class={`animate-ease-in-out relative text-white flex flex-col items-center w-[30vw] md:w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black md:h-[33vw] h-[40vw] border-[0.1vw] border-white/40 rounded-[2vw] md:pt-[5%] pt-[15%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}
+>
+  <div
+    class="rounded-full aspect-square w-[7vw] md:w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"
+  >
+  </div>
+  <p class="text-[2.7vw] md:text-[1.7vw] font-bold text-center">
+    {title}
+  </p>
+  <p
+    class={`text-[1.7vw] md:text-[1.2vw] w-4/5 ${title === "Professional Development" ? "md:mt-[2%] mt-[2%]" : "md:mt-[15%] mt-[5%]"}`}
+  >
+    {text}
+  </p>
 
-    <Link href={link} className="flex items-center text-[2vw] md:text-[1.2vw] mb-[3%] absolute md:bottom-[22%] bottom-[25%] hover:text-ieee-yellow duration-300">
-        more details
-        <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"/>
-    </Link>
-    <p class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]">
-        {number}
-    </p>
-</div>
+  <Link
+    href={link}
+    className="flex items-center text-[2vw] md:text-[1.2vw] mb-[3%] absolute md:bottom-[22%] bottom-[25%] hover:text-ieee-yellow duration-300"
+  >
+    more details
+    <IoIosArrowDroprightCircle
+      className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"
+    />
+  </Link>
+  <p
+    class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]"
+  >
+    {number}
+  </p>
+</div>

src/components/main_page/Landing.astro

@@ -7,9 +7,9 @@ import { RiInstagramFill } from "react-icons/ri";
 import { MdEmail } from "react-icons/md";
 ---
 
-<div class="w-full flex justify-between space-x-2">
+<div class="w-full flex justify-between space-x-2 pt-[2%]">
   <div
-    class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
+    class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[45vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
   >
     <p
       data-inview
@@ -60,12 +60,12 @@ import { MdEmail } from "react-icons/md";
     </div>
   </div>
   <div
-    class="md:w-[46%] w-[40%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
+    class="md:w-[46%] w-[40%] md:h-[45vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
   >
     <Image
       src={landingimg}
       alt="circuit"
-      class="w-[95%] md:h-[40vw] h-[60vw] object-contain"
+      class="w-[95%] md:h-[45vw] h-[60vw] object-contain"
     />
   </div>
 </div>

src/components/projects/AP.astro

@@ -3,29 +3,32 @@ import { LiaDotCircle } from "react-icons/lia";
 import ProjectSection from "./ProjectSection.astro";
 ---
 
-
 <div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
-    <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
-        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-        <p>
-            Annual Projects
-        </p>
-    </div>
+  <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
+    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+    <p>Annual Projects</p>
+  </div>
 
-    <p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[25%] ml-[15%] font-light">
-        Join in the fray of internationally-recognized competition through Robocup, Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD! Participate in an intensive collaborative environment that challenges hard skills of hardware and software. 
+  <p
+    class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[10%] ml-[5%] font-light"
+  >
+    Join in the fray of internationally-recognized competition through Robocup,
+    Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD!
+    Participate in an intensive collaborative environment that challenges hard
+    skills of hardware and software.
+  </p>
+
+  <div
+    class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]"
+  >
+    <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]" />
+    <p class="md:text-[2vw] text-[3vw] mr-[2vw]">Skills & Requirements</p>
+    <p class="w-3/5">
+      IEEE @ UCSD’s annual projects are intended for students with intermediate
+      experience with hardware or software. Participation on teams assemble an
+      array of skills and talents of soft and hard skills.
     </p>
+  </div>
 
-    <div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[20%] ml-[10%]">
-        <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/>
-        <p class="md:text-[2vw] text-[3vw]">
-            Skills & Requirements
-        </p>
-        <p class="w-3/5">
-            IEEE @ UCSD’s annual projects are intended for students with intermediate experience with hardware or software. Participation on teams assemble an array of skills and talents of soft and hard skills. 
-        </p>
-    </div>
-
-    <ProjectSection />
-    
-</div>
+  <ProjectSection />
+</div>

src/components/projects/ProjectSection.astro

@@ -7,13 +7,13 @@ import { Image } from "astro:assets";
 ---
 
 <div
-  class="md:flex md:gap-[1.5vw] md:h-[30vw] md:w-auto w-[70vw] mt-[20%] md:mt-0 ml-[5%] md:ml-0"
+  class="flex flex-col md:flex-row md:gap-[1.5vw] md:h-[30vw] w-full max-w-[90vw] md:max-w-none mt-[10%] md:mt-0 mx-auto md:ml-0"
 >
   {
     Object.entries(annualProjects).map(([title, project], index) => (
       <a
         href={project.url || "#"}
-        class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
+        class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer mb-[5vw] md:mb-0 ${index === 0 ? "expanded" : ""}`}
         data-project={index + 1}
         target={title === "Supercomputing" ? "_blank" : "_self"}
       >
@@ -23,24 +23,24 @@ import { Image } from "astro:assets";
           alt={`${title} Project`}
           width={668}
           height={990}
-          class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
+          class="opacity-70 w-full h-[50vw] md:h-full object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110"
         />
         <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
           <div class="w-full">
-            <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
+            <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[3vw] font-light mb-[5%]">
               {title}
             </p>
-            <p class="text-[2vw] md:text-[1.3vw] md:hidden md:[.expanded_&]:contents transition-all duration-300 overflow-hidden">
+            <p class="text-[3vw] md:text-[1.3vw] block md:hidden md:[.expanded_&]:block transition-all duration-300 overflow-hidden mb-[3vw]">
               {project.description}
             </p>
-            <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
-              <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
+            <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-auto md:h-0 md:[.expanded_&]:h-auto">
+              <div class="flex items-center md:text-[1.3vw] text-[3vw] md:[.expanded_&]:mt-[5%]">
                 more details
-                <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
+                <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[3vw] md:text-[1.4vw]" />
               </div>
             </div>
           </div>
-          <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
+          <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%] hidden md:block" />
         </div>
 
         <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]">
@@ -77,12 +77,20 @@ import { Image } from "astro:assets";
       opacity: 1;
     }
   }
+
+  @media (max-width: 767px) {
+    .project-card {
+      height: auto;
+      margin-bottom: 5vw;
+    }
+  }
 </style>
 
 <script>
   function initializeProjectCards() {
     const projectCards = document.querySelectorAll(".project-card");
     const STORAGE_KEY = "lastExpandedCardIndex";
+    const isMobile = window.innerWidth < 768;
 
     // Function to remove expanded class from all cards
     function removeExpandedFromAll() {
@@ -105,19 +113,32 @@ import { Image } from "astro:assets";
     const lastExpandedIndex = parseInt(
       localStorage.getItem(STORAGE_KEY) || "0",
     );
-    expandCard(lastExpandedIndex);
+
+    // Only apply expanded state on desktop
+    if (!isMobile) {
+      expandCard(lastExpandedIndex);
+    }
 
     // Add hover listeners to each card
     projectCards.forEach((card, index) => {
       card.addEventListener("mouseenter", () => {
-        expandCard(index);
+        if (!isMobile) {
+          expandCard(index);
+        }
       });
     });
 
     // Handle window resize
     window.addEventListener("resize", () => {
       const currentIndex = parseInt(localStorage.getItem(STORAGE_KEY) || "0");
-      expandCard(currentIndex);
+      const isMobileNow = window.innerWidth < 768;
+
+      if (!isMobileNow) {
+        expandCard(currentIndex);
+      } else {
+        // On mobile, remove expanded class from all cards
+        removeExpandedFromAll();
+      }
     });
   }
 
@@ -129,20 +150,20 @@ import { Image } from "astro:assets";
   function handleImageLoading() {
     const projectImages = document.querySelectorAll(".project-card img");
 
-    projectImages.forEach((image, index) => {
+    projectImages.forEach((image) => {
       // Ensure the image is fully loaded, even if it's already in cache
-      if (image.complete) {
-        image.style.opacity = "1";
+      if ((image as HTMLImageElement).complete) {
+        (image as HTMLImageElement).style.opacity = "1";
         const skeleton = image.previousElementSibling;
         if (skeleton && skeleton.classList.contains("skeleton")) {
-          skeleton.style.display = "none";
+          (skeleton as HTMLElement).style.display = "none";
         }
       } else {
         image.addEventListener("load", () => {
-          image.style.opacity = "1";
+          (image as HTMLImageElement).style.opacity = "1";
           const skeleton = image.previousElementSibling;
           if (skeleton && skeleton.classList.contains("skeleton")) {
-            skeleton.style.display = "none";
+            (skeleton as HTMLElement).style.display = "none";
           }
         });
       }

src/components/projects/QP.astro

@@ -16,13 +16,14 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
       <Image
         src={qp}
         alt="qp showcase photo"
-        class="md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full"
+        class="md:opacity-0 md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full relative in-view:animate-fade-down"
+        data-inview
       />
     </div>
   </div>
   <Link
     data-inview
-    href="/quarterly"
+    href="/projects/quarterly"
     className="in-view:animate-fade-left absolute top-[25%] md:right-[15%] right-[10%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center md:text-[1.3vw] text-[2vw] hover:bg-ieee-yellow duration-300 shadow-md"
   >
     more details
@@ -49,7 +50,9 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
 
     if (image) {
       image.onload = () => {
-        skeleton.style.display = "none";
+        if (skeleton) {
+          skeleton.style.display = "none";
+        }
       };
     }
   });

src/components/qp/Carousel.astro

@@ -1,20 +1,19 @@
 ---
 import Subtitle from "../core/Subtitle.astro";
 import { Image } from "astro:assets";
-import qp from "../../images/qp.webp";
+import qp from "../../images/qp2.jpg";
 ---
 
 <div class="flex flex-col items-center pb-[5%]">
     <Subtitle title="We Are Excited To See You Here!" />
 
-    <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
-        Lorem ipsum is placeholder text commonly used in the graphic, print, and
-        publishing industries f
+    <p class="w-1/3 text-center md:text-[1.2vw] text-[1.6vw] pb-[5%]">
+        If you have further questions about QP, please to reach out to the QP chairs or Vice Chair Projects through the Board page!
     </p>
 
     <Image
         src={qp}
         alt="board group photos"
-        class="w-1/2 rounded-[2vw] object-cover aspect-[2/1]"
+        class="md:w-1/2 w-[65vw] rounded-[2vw] object-cover aspect-[2/1] opacity-85"
     />
 </div>

src/components/qp/Join.astro

@@ -3,24 +3,28 @@ import { Image } from "astro:assets";
 import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
 import mentorship from "../../images/mentorship.webp";
-import jonathan from "../../images/about3.webp";
+import join from "../../images/join.png";
 ---
 
 <div class="flex justify-center mb-[10%]">
-    <div class="flex w-[70%] items-center">
+    <div class="flex md:w-[70%] w-[80%] items-center">
         <div class="w-1/2 flex justify-center h-full relative">
             <Image src={mentorship} alt="blue background" class="mr-[20%]" />
             <Image
-                src={jonathan}
+                src={join}
                 alt="blue background"
-                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] left-0"
+<<<<<<< HEAD
+                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] left-0 opacity-80"
+=======
+                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] md:top-[5%] top-[9%] left-0"
+>>>>>>> 08bcf09f9c08053ec40f1c3ae02bbed3a374fb83
             />
         </div>
-        <div class="w-1/2 font-light text-[1.2vw]">
-            <div class="flex items-center text-[2.3vw] mb-[5%]">
+        <div class="w-1/2 font-light md:text-[1.2vw] text-[1.6vw]">
+            <div class="flex items-center md:text-[2.3vw] text-[4vw] mb-[5%]">
                 <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
                 <p
-                    class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-ieee-yellow"
+                    class="md:text-[2.3vw] text-[4vw] font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-ieee-yellow"
                 >
                     How to join
                 </p>
@@ -35,9 +39,9 @@ import jonathan from "../../images/about3.webp";
             </p>
             <div class="w-full flex justify-center">
                 <Link
-                    href="/"
+                    href="https://tinyurl.com/20242025QPApps"
                     target="_blank"
-                    className="py-[2%] px-[15%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+                    className="py-[2%] px-[15%] md:text-[1.2vw] text-[1.6vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
                 >
                     JOIN
                 </Link>

src/components/qp/Mentorship.astro

@@ -7,12 +7,12 @@ import jonathan from "../../images/about3.webp";
 ---
 
 <div class="flex justify-center mt-[10%] mb-[3%]">
-    <div class="flex w-[70%] items-center">
-        <div class="w-1/2 font-light text-[1.2vw]">
-            <div class="flex items-center text-[2.3vw] mb-[5%]">
+    <div class="flex md:w-[70%] w-[80%] items-center">
+        <div class="md:w-1/2 w-[60%] font-light md:text-[1.2vw] text-[1.6vw]">
+            <div class="flex items-center md:text-[2.3vw] text-[4vw] mb-[5%]">
                 <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
                 <p
-                    class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow"
+                    class="md:text-[2.3vw] text-[4vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow"
                 >
                     Mentorship
                 </p>
@@ -31,9 +31,9 @@ import jonathan from "../../images/about3.webp";
             </p>
             <div class="w-full flex justify-center">
                 <Link
-                    href="/"
+                    href="https://tinyurl.com/20242025QPMentors"
                     target="_blank"
-                    className="p-[2%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+                    className="p-[2%] md:text-[1.2vw] text-[1.6vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
                 >
                     BECOME A MENTOR
                 </Link>
@@ -45,7 +45,7 @@ import jonathan from "../../images/about3.webp";
             <Image
                 src={jonathan}
                 alt="blue background"
-                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] right-[10%]"
+                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] md:top-[5%] top-[15%] right-[10%]"
             />
         </div>
     </div>

src/components/qp/PastProject.astro

@@ -1,18 +1,34 @@
 ---
-const {title, link, image, col} = Astro.props;
+const { title, link, image, col } = Astro.props;
 import { GoArrowDownRight } from "react-icons/go";
 import Link from "next/link";
 ---
 
-<Link href={link} target="_blank" className={`ease-in-out group relative col-span-${col} text-white`}>
-    <img src={image} alt="past projects image" class="h-[30vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300" />
+<Link
+  href={link}
+  target="_blank"
+  className={`ease-in-out group relative col-span-${col} text-white`}
+>
+  <img
+    src={image}
+    alt="past projects image"
+    class="md:h-[30vh] h-[15vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300"
+  />
 
-    <div class="absolute bottom-0 px-[3%] w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[1.5vw] pb-[1vw] pt-[5%]">
-        <div class="text-[1.1vw] flex w-full px-[2%] justify-between items-end">
-            <p class="py-[0.3vw] px-[1vw] border-[0.1vw] text-nowrap border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
-                {title}
-            </p>
-            <GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "/>
-        </div>
+  <div
+    class="absolute bottom-0 px-[3%] w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[1.5vw] pb-[1vw] pt-[5%]"
+  >
+    <div
+      class="text-[1.4vw] md:text-[1.1vw] flex w-full px-[2%] justify-between items-end"
+    >
+      <p
+        class="py-[0.3vw] px-[1vw] border-[0.1vw] text-nowrap border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"
+      >
+        {title}
+      </p>
+      <GoArrowDownRight
+        className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "
+      />
     </div>
-</Link>
+  </div>
+</Link>

src/components/qp/PastProjects.astro

@@ -6,7 +6,7 @@ import Subtitle from "../core/Subtitle.astro";
 <div class="flex flex-col items-center">
     <Subtitle title="Past Projects" />
 
-    <div class="w-[70%] grid grid-cols-6 gap-[1.5vw]">
+    <div class="w-[80%] md:w-[70%] grid grid-cols-6 gap-[1.5vw]">
         {projects.map((project)=>(
             <PastProject
              title = {project.title}

src/components/qp/Step.astro

@@ -3,7 +3,7 @@ const { text, number, col, position, width } = Astro.props;
 ---
 
 <div
-    class={`relative col-span-${col} border-[0.1vw] border-white/30 text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw] `}
+    class={`relative col-span-${col} border-[0.1vw] border-white/30 text-[1.5vw] md:text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw] `}
 >
     <p
         class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight `}

src/components/qp/Steps.astro

@@ -6,7 +6,7 @@ import Subtitle from "../core/Subtitle.astro";
 
 <div class="flex flex-col items-center mt-[7%] mb-[10%]">
     <Subtitle title="How it works:" />
-    <div class="grid grid-rows-2 w-[70%] gap-[2vw]">
+    <div class="grid grid-rows-2 md:w-[70%] w-[80%] gap-[2vw]">
         <div class="grid grid-cols-4 gap-[1.5vw]">
             {
                 steps

src/components/qp/Timeline.astro

@@ -1,54 +1,50 @@
 ---
-import qpTimeline from "../../data/qpTimeline.json";
-const { events } = qpTimeline;
+const {timeline} = Astro.props;
 import Subtitle from "../core/Subtitle.astro";
 ---
 
-<div class="flex flex-col items-center mt-[10%] mb-[15%]">
+<div class="flex flex-col items-center md:mt-[10%] mt-[25%] md:mb-[15%] mb-[35%]">
     <Subtitle title="Timeline" />
 
     <div
-        class="relative flex items-center justify-between w-full max-w-[65vw] py-[10%] mt-[3%]"
+        class="relative flex items-center justify-between w-full md:max-w-[75vw] max-w-[85vw] py-[10%] md:mt-[7%] mt-[10%]"
     >
         <div
             class="absolute top-1/2 w-full h-[0.1vw] bg-gray-200 transform -translate-y-1/2"
-        >
-        </div>
+        />
 
-        {
-            events.map((event, index) => (
+        {timeline.map((event, index) => (
+            <div
+                class="relative flex flex-col items-center"
+                style={`flex: 1`}
+            >
                 <div
-                    class="relative flex flex-col items-center"
-                    style={`flex: 1`}
+                    class={`absolute ${
+                        index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
+                    } flex flex-col items-center`}
                 >
-                    <div
-                        class={`absolute ${
-                            index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
-                        } flex flex-col items-center`}
-                    >
-                        <div class="text-center">
-                            <div class="font-bold text-ieee-yellow text-[1.4vw]">
-                                {event.week}
-                            </div>
-                            <div class="text-[1.1vw] text-gray-300 max-w-[10vw]">
-                                {event.description}
-                            </div>
+                    <div class="text-center">
+                        <div class="font-bold text-ieee-yellow md:text-[1.4vw] text-[2vw]">
+                            {event.week}
+                        </div>
+                        <div class="md:text-[1.1vw] text-[1.5vw] text-gray-300 md:max-w-[10vw] max-w-[15vw]">
+                            {event.description}
                         </div>
                     </div>
-
-                    <div
-                        class={`absolute ${
-                            index % 2 === 1
-                                ? "h-[5vw] top-1/2"
-                                : "h-[5vw] bottom-1/2"
-                        } w-[0.1vw] bg-white`}
-                    />
-
-                    <div class="absolute top-1/2 transform -translate-y-1/2">
-                        <div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
-                    </div>
                 </div>
-            ))
-        }
+
+                <div
+                    class={`absolute ${
+                        index % 2 === 1
+                            ? "h-[5vw] top-1/2"
+                            : "h-[5vw] bottom-1/2"
+                    } w-[0.1vw] bg-white`}
+                />
+
+                <div class="absolute top-1/2 transform -translate-y-1/2">
+                    <div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
+                </div>
+            </div>
+        ))}
     </div>
 </div>

src/components/robocub/Contacts.astro

@@ -1,6 +1,5 @@
 ---
-import { FaDiscord} from "react-icons/fa";
-import { RiInstagramFill } from "react-icons/ri";
+import { FaDiscord , FaGlobe} from "react-icons/fa";
 import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
 ---
@@ -8,29 +7,29 @@ import { LiaDotCircle } from "react-icons/lia";
 <div class="flex justify-center my-[10%]">
     <div class="w-1/2 flex justify-between">
         <div>
-            <div class="flex items-center text-[2.5vw]">
+            <div class="flex items-center md:text-[2.5vw] text-[4vw]">
                 <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
                 <p>
                     Contacts
                 </p>
             </div>
-            <p class="text-[1.1vw] ml-[5%] text-nowrap">
+            <p class="md:text-[1.1vw] text-[1.5vw] ml-[5%] text-nowrap">
                 To stay up to date, join discord server
             </p>
         </div>
         <div class="flex">
-            <Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="mr-[20%] flex flex-col items-center">
-                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
-                    <FaDiscord />
+            <Link href="https://ieee-ucsd-robocupssl.github.io/TeamWebsite/index.html" target="_blank" className="mr-[20%] flex flex-col items-center">
+                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
+                    <FaGlobe />
                 </div>
-                <p class="text-[1.3vw] font-semibold">Facebook</p>
+                <p class="md:text-[1.3vw] text-[2vw] font-semibold">Website</p>
             </Link>
 
-            <Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="flex flex-col items-center">
-                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
-                    <RiInstagramFill />
+            <Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="flex flex-col items-center">
+                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
+                    <FaDiscord />
                 </div>
-                <p class="text-[1.3vw] font-semibold">Instagram</p>
+                <p class="md:text-[1.3vw] text-[2vw] font-semibold">Discord</p>
             </Link>
         </div>
     </div>

src/components/robocub/Join.astro

@@ -9,23 +9,22 @@ import robocup from "../../images/robocup.webp";
     <Image
         src={robocup}
         alt="robocub competition image"
-        class="w-3/5 rounded-[2vw] object-cover aspect-[8/5] opacity-40"
+        class="md:w-3/5 w-[90%] rounded-[2vw] object-cover aspect-[8/5] opacity-40"
     />
     <Link
-        href="/"
+        href="https://docs.google.com/forms/d/e/1FAIpQLSex5VejEiClvgcfhSBQJ9IH5Q008j-HWC5Y9YAa56yIHgGBvw/viewform?usp=sf_link"
         target="_blank"
-        className="absolute aspect-[8/5] w-3/5 p-[5%] group -bottom-[3%]"
+        className="absolute aspect-[8/5] md:w-3/5 w-[90%] p-[5%] group -bottom-[3%]"
     >
         <div class="w-full flex justify-end items-center h-4/5">
-            <p class="text-[4.5vw] font-bold w-fit">
+            <p class="md:text-[4.5vw] text-[7vw] font-bold w-fit">
                 We Are<br />
                 Hiring
             </p>
         </div>
-        <div class="text-[1vw] pt-[3%]">
+        <div class="md:text-[1vw] text-[1.5vw] md:pt-[3%]">
             <p>
-                Join a community of beginner to experienced engineers from
-                different disciplines and backgrounds
+                Join a community of novice to experienced engineers from a wide range of disciplines and backgrounds.
             </p>
             <p>
                 Fill out this application form (due week 2 of each quarter if
@@ -33,10 +32,10 @@ import robocup from "../../images/robocup.webp";
             </p>
         </div>
         <div
-            class="flex w-full justify-end items-end text-[3.5vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
+            class="flex w-full justify-end items-end md:text-[3.5vw] text-[6vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
         >
             <p
-                class="mr-[2%] w-fit py-[1%] px-[2%] text-[1.2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
+                class="mr-[2%] w-fit py-[1%] px-[2%] md:text-[1.2vw] text-[2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
             >
                 Application form
             </p>

src/components/robocub/RoboTitle.astro

@@ -1,16 +1,25 @@
 ---
 import Title from "../core/Title.astro";
 import { Image } from "astro:assets";
-import model from "../../images/model.webp";
+import model from "../../images/robot.png";
+import roboLogo from "../../images/roboLogo.png";
 ---
 
 <div
-    class="flex items-center md:h-[35vw] h-[45vw] relative w-full pl-[10%] md:mt-[3%] mt-[20%] mb-[15%]"
+    class="flex items-center md:h-[35vw] h-[45vw] relative w-full pl-[10%] md:mt-[3%] mt-[10%] mb-[10%]"
 >
-    <Title title="Robocup" />
+    <div
+    class="flex items-center md:text-[3vw] text-[4.5vw] ml-[10%] md:pt-[5%] pt-[10%] text-white font-semibold"
+    >
+        <Image src={roboLogo} alt="Triton RoboCup Team Logo" class=" mr-[1vw] w-[5vw] rounded-full border-[0.2vw] border-ieee-yellow" />
+        <p>
+            Robocup
+        </p>
+    </div>
     <Image
+        data-inview
         src={model}
         alt="Robocup robot model"
-        class="absolute md:w-[50%] w-[60%] md:right-[10%] right-0 md:top-[5%]"
+        class="in-view:animate-fade-down absolute md:w-[40%] w-[50%] md:right-[15%] right-0 md:top-0"
     />
 </div>

src/components/robocub/Subteam.astro

@@ -1,16 +0,0 @@
----
-import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
-import { LuBrainCircuit } from "react-icons/lu";
-const { title, list } = Astro.props;
----
-
-<div
-    class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]"
->
-    <p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
-        {title}
-    </p>
-    <ul class="text-[1vw] font-light">
-        {list.map((item: string) => <li>&#8226; {item}</li>)}
-    </ul>
-</div>

src/components/robocub/Subteams.astro

@@ -1,6 +1,5 @@
 ---
 import Subtitle from "../core/Subtitle.astro";
-import Subteam from "./Subteam.astro";
 import subteams from "../../data/subteams.json";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
@@ -11,9 +10,9 @@ const duplicatedSubteams = [...subteams, ...subteams, ...subteams];
 const centerIndex = Math.floor(subteams.length); // center in the middle
 ---
 
-<div class="flex flex-col items-center my-[10%] relative">
+<div class="flex flex-col items-center md:my-[10%] my-[20%] relative overflow-x-clip">
     <Subtitle title="Subteams" />
-    <div class="relative w-[75vw] h-[50vh] mt-[3%]">
+    <div class="relative md:w-[75vw] w-[85vw] h-[25vw] mt-[8%] md:mt-[5%]">
         <div id="carousel" class="absolute w-full h-full flex justify-center">
             {
                 duplicatedSubteams.map((subteam, index) => {
@@ -27,7 +26,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
 
                     return (
                         <div
-                            class="carousel-item absolute transition-all duration-500"
+                            class="carousel-item absolute transition-all duration-500 md:w-[22vw] w-[25vw]"
                             style={{
                                 transform: `translateX(${distance * 12}vw) scale(${
                                     Math.abs(distance) === 0
@@ -43,17 +42,16 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
                                         : Math.abs(distance) === 1
                                           ? 20
                                           : 10,
-                                width: "20vw",
                             }}
                             data-index={index}
                         >
                             <div class="relative">
                                 <div class="relative w-full h-full backdrop-blur-md overflow-hidden rounded-[2vw]">
-                                    <div class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
-                                        <p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
+                                    <div class="px-[8%] flex flex-col justify-center items-center md:w-[22vw] w-[25vw] md:h-[24vw] h-[36vw] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
+                                        <p class="md:text-[1.5vw] text-[2vw] mb-[10%] font-semibold pt-[10%]">
                                             {subteam.title}
                                         </p>
-                                        <ul class="text-[1vw] font-light">
+                                        <ul class="md:text-[1vw] text-[1.5vw] font-light">
                                             {subteam.list.map(
                                                 (item: string) => (
                                                     <li>&#8226; {item}</li>
@@ -62,7 +60,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
                                         </ul>
                                     </div>
                                 </div>
-                                <div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 text-[3.2vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
+                                <div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 md:text-[3.2vw] text-[4.5vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
                                     {subteam.title === "Mechanical" && (
                                         <FaGear />
                                     )}

src/components/signal/Competition.astro

@@ -1,30 +1,29 @@
 ---
 import { LiaDotCircle } from "react-icons/lia";
 import Link from "next/link";
-const {picture, name, description, link} = Astro.props;
+const {picture, name, description, link, linktext} = Astro.props;
 ---
 <div class = "text-white relative my-[3%]" >
     
-    <img src = {picture} alt = "signal" class = "w-full object-cover aspect-[1512/526] opacity-25">
+    <img src = {picture} alt = "signal" class = " w-full object-cover md:aspect-[1300/526] aspect-[2/1] opacity-25">
 
-    <div class = "w-full flex justify-evenly absolute bottom-[28%] ml-[5%]">
-
-        <div class = "flex items-center text-[2.5vw] font-extralight">
-            <LiaDotCircle className=" mr-[1vw] text-[2.5vw]"/>
+    <div class = "w-full flex justify-evenly absolute bottom-[20%] left-[4%]">
+        <div data-inview class = "in-view:animate-fade-right flex items-center md:text-[2.5vw] text-[4vw]">
+            <LiaDotCircle className=" mr-[1vw] md:text-[2.6vw]"/>
             <p>
                 Competition
             </p>
         </div>
     
-        <div class = "text-[1.5vw] font-extralight tracking-wider">
-            <p class = "w-[35vw] mb-[3%] mt-[40vh]">
+        <div data-inview class = "md:text-[1.6vw] text-[2.2vw] tracking-wider in-view:animate-flip-up max-w-[60%]">
+            <p class = "w-[35vw] md:mt-[25vw] mt-[35vw]">
                 {name}
             </p>
             <p class = "mb-[5%]">
                 {description}
             </p>
-            <Link href = {link} target="_blank" className="text-[1vw] border-white/70 border-[0.1vw] py-[3%] px-[15%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
-                Link
+            <Link href = {link} target="_blank" className="md:text-[1.2vw] text-[2vw] font-light border-white/70 border-[0.1vw] py-[1.5%] px-[9%] rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+                {linktext}
             </Link>
         </div>