From ff3f4caf5eac42e02876426ae9b0aea5f9deff14 Mon Sep 17 00:00:00 2001
From: Joseph Kifle <kifle.joe@gmail.com>
Date: Mon, 16 Feb 2026 23:10:22 -0500
Subject: [PATCH 1/4] Sticky Date Header

---
 src/app/HomePageClient.tsx           | 73 ++++++++++++++++++++++------
 src/app/VolunteerEventCardHeader.tsx | 23 ---------
 src/app/WelcomeCard.tsx              |  1 +
 src/app/page.tsx                     |  2 -
 4 files changed, 60 insertions(+), 39 deletions(-)
 delete mode 100644 src/app/VolunteerEventCardHeader.tsx

diff --git a/src/app/HomePageClient.tsx b/src/app/HomePageClient.tsx
index d9535b0..152af69 100644
--- a/src/app/HomePageClient.tsx
+++ b/src/app/HomePageClient.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useSession } from "next-auth/react";
 
 import { DefaultButton } from "@/components/Button/DefaultButton";
@@ -23,21 +23,66 @@ export default function HomePageClient({
   events,
 }: HomePageClientProps): React.ReactElement {
   const { status } = useSession();
+
+  // Group events using a standard loop
+  const groups: Record<string, typeof events> = {};
+
+  for (const event of events) {
+    const date = event.eventDate;
+    if (!groups[date]) {
+      groups[date] = [];
+    }
+    groups[date].push(event);
+  }
+
+  // Sort the dates
+  const sortedDates = Object.keys(groups).sort();
+
   return (
     <>
-      {events.map((event) => (
-        <VolunteerEventCard
-          key={event.id}
-          id={event.id}
-          title={event.title}
-          eventDate={event.eventDate}
-          startTime={event.startTime}
-          endTime={event.endTime}
-          capacity={event.capacity}
-          streetLine={event.streetLine}
-          description={event.description}
-        />
-      ))}
+      {sortedDates.map((dateString) => {
+        // Convert "2026-01-02" to "1/2/2026"
+        const [year, month, day] = dateString.split("-").map(Number);
+        const dateObj = new Date(year, month - 1, day);
+
+        const weekday = dateObj.toLocaleDateString("en-US", {
+          weekday: "long",
+        });
+        const displayDate = `${weekday}, ${month}/${day}/${year}`;
+        return (
+          <>
+            <Box
+              key={dateString}
+              sx={{
+                backgroundColor: "secondary.main",
+                color: "white",
+                position: "sticky",
+                top: 56.8,
+                zIndex: 1,
+                padding: 3,
+                width: "100%",
+              }}
+            >
+              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                {displayDate}
+              </Typography>
+            </Box>
+            {groups[dateString].map((event) => (
+              <VolunteerEventCard
+                key={event.id}
+                id={event.id}
+                title={event.title}
+                eventDate={event.eventDate}
+                startTime={event.startTime}
+                endTime={event.endTime}
+                capacity={event.capacity}
+                streetLine={event.streetLine}
+                description={event.description}
+              />
+            ))}
+          </>
+        );
+      })}
       {/* Temporary event creation form */}
       {status === "authenticated" && (
         <Box
diff --git a/src/app/VolunteerEventCardHeader.tsx b/src/app/VolunteerEventCardHeader.tsx
deleted file mode 100644
index 03f367a..0000000
--- a/src/app/VolunteerEventCardHeader.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Box, Typography } from "@mui/material";
-
-export default function VolunteerEventCardHeader(): React.ReactElement {
-  const weekday = "Tuesday";
-  const formattedDate = "1/2/2026";
-
-  return (
-    <Box
-      sx={{
-        backgroundColor: "secondary.main",
-        color: "white",
-        px: 2,
-        py: 1.5,
-        width: "100%",
-        marginTop: 3,
-      }}
-    >
-      <Typography variant="h6" sx={{ fontWeight: 600 }}>
-        {weekday}, {formattedDate}
-      </Typography>
-    </Box>
-  );
-}
diff --git a/src/app/WelcomeCard.tsx b/src/app/WelcomeCard.tsx
index 2d90b38..cdd8021 100644
--- a/src/app/WelcomeCard.tsx
+++ b/src/app/WelcomeCard.tsx
@@ -10,6 +10,7 @@ export default function WelcomeCard(): React.ReactElement {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
+        mb: 4,
       }}
     >
       <Card
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 24f8b73..9a05384 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,5 @@
 import Box from "@mui/material/Box";
 
-import VolunteerEventCardHeader from "@/app/VolunteerEventCardHeader";
 import WelcomeCard from "@/app/WelcomeCard";
 import { getUpcomingEvents } from "@/lib/events";
 
@@ -24,7 +23,6 @@ export default async function HomePage(): Promise<React.ReactElement> {
         }}
       >
         <WelcomeCard />
-        <VolunteerEventCardHeader />
         <HomePageClient events={events} />
       </Box>
     </div>

From 8ee84be81506d95089d86864fe427bd0f591e83d Mon Sep 17 00:00:00 2001
From: Joseph Kifle <kifle.joe@gmail.com>
Date: Mon, 16 Feb 2026 23:21:41 -0500
Subject: [PATCH 2/4] feat: Sticky Date Header

---
 src/app/HomePageClient.tsx           | 73 ++++++----------------------
 src/app/VolunteerEventCardHeader.tsx | 23 +++++++++
 src/app/WelcomeCard.tsx              |  1 -
 src/app/page.tsx                     |  2 +
 4 files changed, 39 insertions(+), 60 deletions(-)
 create mode 100644 src/app/VolunteerEventCardHeader.tsx

diff --git a/src/app/HomePageClient.tsx b/src/app/HomePageClient.tsx
index 152af69..d9535b0 100644
--- a/src/app/HomePageClient.tsx
+++ b/src/app/HomePageClient.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { useSession } from "next-auth/react";
 
 import { DefaultButton } from "@/components/Button/DefaultButton";
@@ -23,66 +23,21 @@ export default function HomePageClient({
   events,
 }: HomePageClientProps): React.ReactElement {
   const { status } = useSession();
-
-  // Group events using a standard loop
-  const groups: Record<string, typeof events> = {};
-
-  for (const event of events) {
-    const date = event.eventDate;
-    if (!groups[date]) {
-      groups[date] = [];
-    }
-    groups[date].push(event);
-  }
-
-  // Sort the dates
-  const sortedDates = Object.keys(groups).sort();
-
   return (
     <>
-      {sortedDates.map((dateString) => {
-        // Convert "2026-01-02" to "1/2/2026"
-        const [year, month, day] = dateString.split("-").map(Number);
-        const dateObj = new Date(year, month - 1, day);
-
-        const weekday = dateObj.toLocaleDateString("en-US", {
-          weekday: "long",
-        });
-        const displayDate = `${weekday}, ${month}/${day}/${year}`;
-        return (
-          <>
-            <Box
-              key={dateString}
-              sx={{
-                backgroundColor: "secondary.main",
-                color: "white",
-                position: "sticky",
-                top: 56.8,
-                zIndex: 1,
-                padding: 3,
-                width: "100%",
-              }}
-            >
-              <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                {displayDate}
-              </Typography>
-            </Box>
-            {groups[dateString].map((event) => (
-              <VolunteerEventCard
-                key={event.id}
-                id={event.id}
-                title={event.title}
-                eventDate={event.eventDate}
-                startTime={event.startTime}
-                endTime={event.endTime}
-                capacity={event.capacity}
-                streetLine={event.streetLine}
-                description={event.description}
-              />
-            ))}
-          </>
-        );
-      })}
+      {events.map((event) => (
+        <VolunteerEventCard
+          key={event.id}
+          id={event.id}
+          title={event.title}
+          eventDate={event.eventDate}
+          startTime={event.startTime}
+          endTime={event.endTime}
+          capacity={event.capacity}
+          streetLine={event.streetLine}
+          description={event.description}
+        />
+      ))}
       {/* Temporary event creation form */}
       {status === "authenticated" && (
         <Box
diff --git a/src/app/VolunteerEventCardHeader.tsx b/src/app/VolunteerEventCardHeader.tsx
new file mode 100644
index 0000000..03f367a
--- /dev/null
+++ b/src/app/VolunteerEventCardHeader.tsx
@@ -0,0 +1,23 @@
+import { Box, Typography } from "@mui/material";
+
+export default function VolunteerEventCardHeader(): React.ReactElement {
+  const weekday = "Tuesday";
+  const formattedDate = "1/2/2026";
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: "secondary.main",
+        color: "white",
+        px: 2,
+        py: 1.5,
+        width: "100%",
+        marginTop: 3,
+      }}
+    >
+      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+        {weekday}, {formattedDate}
+      </Typography>
+    </Box>
+  );
+}
diff --git a/src/app/WelcomeCard.tsx b/src/app/WelcomeCard.tsx
index cdd8021..2d90b38 100644
--- a/src/app/WelcomeCard.tsx
+++ b/src/app/WelcomeCard.tsx
@@ -10,7 +10,6 @@ export default function WelcomeCard(): React.ReactElement {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        mb: 4,
       }}
     >
       <Card
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9a05384..24f8b73 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import Box from "@mui/material/Box";
 
+import VolunteerEventCardHeader from "@/app/VolunteerEventCardHeader";
 import WelcomeCard from "@/app/WelcomeCard";
 import { getUpcomingEvents } from "@/lib/events";
 
@@ -23,6 +24,7 @@ export default async function HomePage(): Promise<React.ReactElement> {
         }}
       >
         <WelcomeCard />
+        <VolunteerEventCardHeader />
         <HomePageClient events={events} />
       </Box>
     </div>

From b54a142d00efd592e99aac97a51df92bdbfa018c Mon Sep 17 00:00:00 2001
From: Joseph Kifle <kifle.joe@gmail.com>
Date: Tue, 24 Feb 2026 13:17:15 -0500
Subject: [PATCH 3/4] Revert "feat: Sticky Date Header"

This reverts commit 8ee84be81506d95089d86864fe427bd0f591e83d.
---
 src/app/HomePageClient.tsx           | 73 ++++++++++++++++++++++------
 src/app/VolunteerEventCardHeader.tsx | 23 ---------
 src/app/WelcomeCard.tsx              |  1 +
 src/app/page.tsx                     |  2 -
 4 files changed, 60 insertions(+), 39 deletions(-)
 delete mode 100644 src/app/VolunteerEventCardHeader.tsx

diff --git a/src/app/HomePageClient.tsx b/src/app/HomePageClient.tsx
index d9535b0..152af69 100644
--- a/src/app/HomePageClient.tsx
+++ b/src/app/HomePageClient.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useSession } from "next-auth/react";
 
 import { DefaultButton } from "@/components/Button/DefaultButton";
@@ -23,21 +23,66 @@ export default function HomePageClient({
   events,
 }: HomePageClientProps): React.ReactElement {
   const { status } = useSession();
+
+  // Group events using a standard loop
+  const groups: Record<string, typeof events> = {};
+
+  for (const event of events) {
+    const date = event.eventDate;
+    if (!groups[date]) {
+      groups[date] = [];
+    }
+    groups[date].push(event);
+  }
+
+  // Sort the dates
+  const sortedDates = Object.keys(groups).sort();
+
   return (
     <>
-      {events.map((event) => (
-        <VolunteerEventCard
-          key={event.id}
-          id={event.id}
-          title={event.title}
-          eventDate={event.eventDate}
-          startTime={event.startTime}
-          endTime={event.endTime}
-          capacity={event.capacity}
-          streetLine={event.streetLine}
-          description={event.description}
-        />
-      ))}
+      {sortedDates.map((dateString) => {
+        // Convert "2026-01-02" to "1/2/2026"
+        const [year, month, day] = dateString.split("-").map(Number);
+        const dateObj = new Date(year, month - 1, day);
+
+        const weekday = dateObj.toLocaleDateString("en-US", {
+          weekday: "long",
+        });
+        const displayDate = `${weekday}, ${month}/${day}/${year}`;
+        return (
+          <>
+            <Box
+              key={dateString}
+              sx={{
+                backgroundColor: "secondary.main",
+                color: "white",
+                position: "sticky",
+                top: 56.8,
+                zIndex: 1,
+                padding: 3,
+                width: "100%",
+              }}
+            >
+              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                {displayDate}
+              </Typography>
+            </Box>
+            {groups[dateString].map((event) => (
+              <VolunteerEventCard
+                key={event.id}
+                id={event.id}
+                title={event.title}
+                eventDate={event.eventDate}
+                startTime={event.startTime}
+                endTime={event.endTime}
+                capacity={event.capacity}
+                streetLine={event.streetLine}
+                description={event.description}
+              />
+            ))}
+          </>
+        );
+      })}
       {/* Temporary event creation form */}
       {status === "authenticated" && (
         <Box
diff --git a/src/app/VolunteerEventCardHeader.tsx b/src/app/VolunteerEventCardHeader.tsx
deleted file mode 100644
index 03f367a..0000000
--- a/src/app/VolunteerEventCardHeader.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Box, Typography } from "@mui/material";
-
-export default function VolunteerEventCardHeader(): React.ReactElement {
-  const weekday = "Tuesday";
-  const formattedDate = "1/2/2026";
-
-  return (
-    <Box
-      sx={{
-        backgroundColor: "secondary.main",
-        color: "white",
-        px: 2,
-        py: 1.5,
-        width: "100%",
-        marginTop: 3,
-      }}
-    >
-      <Typography variant="h6" sx={{ fontWeight: 600 }}>
-        {weekday}, {formattedDate}
-      </Typography>
-    </Box>
-  );
-}
diff --git a/src/app/WelcomeCard.tsx b/src/app/WelcomeCard.tsx
index 2d90b38..cdd8021 100644
--- a/src/app/WelcomeCard.tsx
+++ b/src/app/WelcomeCard.tsx
@@ -10,6 +10,7 @@ export default function WelcomeCard(): React.ReactElement {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
+        mb: 4,
       }}
     >
       <Card
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 24f8b73..9a05384 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,5 @@
 import Box from "@mui/material/Box";
 
-import VolunteerEventCardHeader from "@/app/VolunteerEventCardHeader";
 import WelcomeCard from "@/app/WelcomeCard";
 import { getUpcomingEvents } from "@/lib/events";
 
@@ -24,7 +23,6 @@ export default async function HomePage(): Promise<React.ReactElement> {
         }}
       >
         <WelcomeCard />
-        <VolunteerEventCardHeader />
         <HomePageClient events={events} />
       </Box>
     </div>

From 90812586b738eaff905a046e3bd90d49357ad13e Mon Sep 17 00:00:00 2001
From: AgustinSV <agustin1salasvaca@gmail.com>
Date: Tue, 24 Feb 2026 14:04:39 -0500
Subject: [PATCH 4/4] updated sticky header

---
 src/app/HomePageClient.tsx | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/app/HomePageClient.tsx b/src/app/HomePageClient.tsx
index 152af69..afbac40 100644
--- a/src/app/HomePageClient.tsx
+++ b/src/app/HomePageClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { Box, Typography } from "@mui/material";
 import { useSession } from "next-auth/react";
+import { Fragment } from "react";
 
 import { DefaultButton } from "@/components/Button/DefaultButton";
 
@@ -24,7 +25,6 @@ export default function HomePageClient({
 }: HomePageClientProps): React.ReactElement {
   const { status } = useSession();
 
-  // Group events using a standard loop
   const groups: Record<string, typeof events> = {};
 
   for (const event of events) {
@@ -35,13 +35,11 @@ export default function HomePageClient({
     groups[date].push(event);
   }
 
-  // Sort the dates
   const sortedDates = Object.keys(groups).sort();
 
   return (
     <>
       {sortedDates.map((dateString) => {
-        // Convert "2026-01-02" to "1/2/2026"
         const [year, month, day] = dateString.split("-").map(Number);
         const dateObj = new Date(year, month - 1, day);
 
@@ -49,24 +47,26 @@ export default function HomePageClient({
           weekday: "long",
         });
         const displayDate = `${weekday}, ${month}/${day}/${year}`;
+
         return (
-          <>
+          <Fragment key={dateString}>
             <Box
-              key={dateString}
               sx={{
                 backgroundColor: "secondary.main",
                 color: "white",
                 position: "sticky",
                 top: 56.8,
                 zIndex: 1,
-                padding: 3,
+                padding: 2,
                 width: "100%",
+                mt: 2,
               }}
             >
-              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
                 {displayDate}
               </Typography>
             </Box>
+
             {groups[dateString].map((event) => (
               <VolunteerEventCard
                 key={event.id}
@@ -80,16 +80,12 @@ export default function HomePageClient({
                 description={event.description}
               />
             ))}
-          </>
+          </Fragment>
         );
       })}
-      {/* Temporary event creation form */}
+
       {status === "authenticated" && (
-        <Box
-          sx={{
-            display: "flex",
-          }}
-        >
+        <Box sx={{ display: "flex" }}>
           <DefaultButton
             label="temporary one time event creation button"
             href="/admin/one-time-event-creation"