Reapply "Merge branch 'develop' into feature/gantt-chart-improvements"

JoshuaGoldberg · JoshuaGoldberg · commit 7ca095d49d79 · 2026-04-05T01:38:58.000-04:00
This reverts commit 8ba3a06.
diff --git a/src/backend/src/controllers/calendar.controllers.ts b/src/backend/src/controllers/calendar.controllers.ts
@@ -596,4 +596,18 @@ export default class CalendarController {
       next(error);
     }
   }
+
+  static async getAllEventsPaginated(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { cursor, pageSize } = req.body;
+      const paginatedEvents = await CalendarService.getAllEventsPaginated(
+        req.organization,
+        cursor ? new Date(cursor) : undefined,
+        pageSize ? parseInt(pageSize) : undefined
+      );
+      res.status(200).json(paginatedEvents);
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
 }
diff --git a/src/backend/src/routes/calendar.routes.ts b/src/backend/src/routes/calendar.routes.ts
@@ -297,5 +297,6 @@ calendarRouter.post(
 );
 
 calendarRouter.get('/calendars', CalendarController.getAllCalendars);
+calendarRouter.post('/events-paginated', CalendarController.getAllEventsPaginated);
 
 export default calendarRouter;
diff --git a/src/backend/src/services/calendar.services.ts b/src/backend/src/services/calendar.services.ts
@@ -15,7 +15,8 @@ import {
   Machinery,
   ScheduleSlot,
   notGuest,
-  isSameDay
+  isSameDay,
+  EventInstance
 } from 'shared';
 import { getCalendarQueryArgs } from '../prisma-query-args/calendar.query-args.js';
 import { getEventTypeQueryArgs } from '../prisma-query-args/event-type.query-args.js';
@@ -2749,4 +2750,56 @@ export default class CalendarService {
     });
     return eventTypes.map(eventTypeTransformer);
   }
+
+  /**
+   * Gets all the events paginated, ordered by start time and grouped by date
+   * @param organization the org the user is currently in
+   * @param cursor the start time of the last event on the prev page
+   * @param pageSize the number of events to return per page
+   * @returns
+   */
+  static async getAllEventsPaginated(
+    organization: Organization,
+    cursor?: Date,
+    pageSize: number = 25
+  ): Promise<{ instances: EventInstance[]; nextCursor: Date | null }> {
+    const now = new Date();
+
+    const slots = await prisma.schedule_Slot.findMany({
+      where: {
+        startTime: {
+          lt: cursor ?? now
+        },
+        event: {
+          dateDeleted: null,
+          status: Event_Status.SCHEDULED,
+          eventType: {
+            organizationId: organization.organizationId
+          }
+        }
+      },
+      include: {
+        event: getEventQueryArgs(organization.organizationId)
+      },
+      orderBy: { startTime: 'desc' },
+      take: pageSize
+    });
+
+    const nextCursor = slots.length === pageSize ? slots[slots.length - 1].startTime : null;
+
+    const instances: EventInstance[] = slots.map((slot) => {
+      const { scheduledTimes, ...eventWithoutSlots } = eventTransformer(slot.event);
+      return {
+        ...eventWithoutSlots,
+        scheduleSlotId: slot.scheduleSlotId,
+        startTime: slot.startTime,
+        endTime: slot.endTime,
+        allDay: slot.allDay,
+        recurring: slot.event.scheduledTimes.length > 1,
+        totalScheduledSlots: slot.event.scheduledTimes.length
+      };
+    });
+
+    return { instances, nextCursor };
+  }
 }
diff --git a/src/frontend/src/apis/calendar.api.ts b/src/frontend/src/apis/calendar.api.ts
@@ -11,7 +11,8 @@ import {
   EventTypeCreateArgs,
   Calendar,
   FilterArgs,
-  ScheduleSlot
+  ScheduleSlot,
+  EventInstance
 } from 'shared';
 import { eventTransformer, eventWithMembersTransformer } from './transformers/calendar.transformer';
 import { EditEventArgs, EditScheduleSlotArgs, EventCreateArgs } from '../hooks/calendar.hooks';
@@ -266,3 +267,19 @@ export const scheduleEvent = async (eventId: string, payload: { startTime: Date;
     transformResponse: (data) => eventTransformer(JSON.parse(data))
   });
 };
+
+export const getAllEventsPaginated = (cursor?: Date, pageSize?: number) => {
+  return axios.post<{ instances: EventInstance[]; nextCursor: Date | null }>(
+    apiUrls.calendarEventsPaginated(),
+    { cursor, pageSize },
+    {
+      transformResponse: (data) => {
+        const parsed = JSON.parse(data);
+        return {
+          instances: parsed.instances,
+          nextCursor: parsed.nextCursor ? new Date(parsed.nextCursor) : null
+        };
+      }
+    }
+  );
+};
diff --git a/src/frontend/src/app/AppAuthenticated.tsx b/src/frontend/src/app/AppAuthenticated.tsx
@@ -34,6 +34,7 @@ import { useCurrentOrganization } from '../hooks/organizations.hooks';
 import Statistics from '../pages/StatisticsPage/Statistics';
 import RetrospectiveGanttChartPage from '../pages/RetrospectivePage/Retrospective';
 import Calendar from '../pages/CalendarPage/Calendar';
+import GuestEventPage from '../pages/GuestEventPage/GuestEventPage';
 
 interface AppAuthenticatedProps {
   userId: string;
@@ -121,26 +122,72 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
 
   return userSettingsData.slackId || isGuest(userRole) ? (
     <AppContextUser>
-      <SidebarLayout>
-        <Switch>
-          <Route path={routes.PROJECTS} component={Projects} />
-          <Redirect from={routes.CR_BY_ID} to={routes.CHANGE_REQUESTS_BY_ID} />
-          <Route path={routes.CHANGE_REQUESTS} component={ChangeRequests} />
-          <Route path={routes.GANTT} component={GanttChartPage} />
-          <Route path={routes.TEAMS} component={Teams} />
-          <Route path={routes.SETTINGS} component={Settings} />
-          <Route path={routes.ADMIN_TOOLS} component={AdminTools} />
-          <Route path={routes.INFO} component={InfoPage} />
-          <Route path={routes.CREDITS} component={Credits} />
-          <Route path={routes.FINANCE} component={Finance} />
-          <Route path={routes.CALENDAR} component={Calendar} />
-          <Route path={routes.STATISTICS} component={Statistics} />
-          <Route path={routes.HOME} component={Home} />
-          <Route path={routes.RETROSPECTIVE} component={RetrospectiveGanttChartPage} />
-          <Redirect from={routes.BASE} to={routes.HOME} />
-          <Route path="*" component={PageNotFound} />
-        </Switch>
-      </SidebarLayout>
+      {
+        <>
+          <Box
+            onMouseEnter={() => {
+              setDrawerOpen(true);
+            }}
+            sx={{
+              height: '100vh',
+              position: 'fixed',
+              width: 15,
+              borderRight: 2,
+              borderRightColor: theme.palette.background.paper
+            }}
+          />
+          <IconButton
+            onClick={() => {
+              setDrawerOpen(true);
+              setMoveContent(true);
+            }}
+            sx={{ position: 'fixed', left: -8, top: '3%' }}
+            id="sidebar-button"
+          >
+            <ArrowCircleRightTwoToneIcon
+              sx={{
+                fontSize: '30px',
+                zIndex: 1,
+                '& path:first-of-type': { color: '#000000' },
+                '& path:last-of-type': { color: '#ef4345' }
+              }}
+            />
+          </IconButton>
+          <Sidebar
+            drawerOpen={drawerOpen}
+            setDrawerOpen={setDrawerOpen}
+            moveContent={moveContent}
+            setMoveContent={setMoveContent}
+          />
+        </>
+      }
+      <Box display={'flex'}>
+        <HiddenContentMargin open={moveContent} variant="permanent" />
+        <Container
+          maxWidth={false}
+          sx={{ width: onGuestHomePage && moveContent ? 'calc(100vw - 220px)' : `calc(100vw - 30px)` }}
+        >
+          <Switch>
+            <Route path={routes.PROJECTS} component={Projects} />
+            <Redirect from={routes.CR_BY_ID} to={routes.CHANGE_REQUESTS_BY_ID} />
+            <Route path={routes.CHANGE_REQUESTS} component={ChangeRequests} />
+            <Route path={routes.GANTT} component={GanttChartPage} />
+            <Route path={routes.TEAMS} component={Teams} />
+            <Route path={routes.SETTINGS} component={Settings} />
+            <Route path={routes.ADMIN_TOOLS} component={AdminTools} />
+            <Route path={routes.INFO} component={InfoPage} />
+            <Route path={routes.CREDITS} component={Credits} />
+            <Route path={routes.FINANCE} component={Finance} />
+            <Route path={routes.CALENDAR} component={Calendar} />
+            <Route path={routes.STATISTICS} component={Statistics} />
+            <Route path={routes.HOME} component={Home} />
+            <Route path={routes.RETROSPECTIVE} component={RetrospectiveGanttChartPage} />
+            <Route path={routes.EVENTS} component={GuestEventPage} />
+            <Redirect from={routes.BASE} to={routes.HOME} />
+            <Route path="*" component={PageNotFound} />
+          </Switch>
+        </Container>
+      </Box>
     </AppContextUser>
   ) : (
     <SetUserPreferences userSettings={userSettingsData} />
diff --git a/src/frontend/src/hooks/calendar.hooks.ts b/src/frontend/src/hooks/calendar.hooks.ts
@@ -11,7 +11,8 @@ import {
   FilterArgs,
   ScheduleSlotCreateArgs,
   EventWithMembers,
-  ScheduleSlot
+  ScheduleSlot,
+  EventInstance
 } from 'shared';
 import {
   getAllShops,
@@ -48,7 +49,8 @@ import {
   getSingleEventWithMembers,
   previewScheduleSlotRecurringEdits,
   postDeleteScheduleSlot,
-  scheduleEvent
+  scheduleEvent,
+  getAllEventsPaginated
 } from '../apis/calendar.api';
 import { useCurrentUser } from './users.hooks';
 import { PDFDocument } from 'pdf-lib';
@@ -664,3 +666,16 @@ export const combinePdfsAndDownload = async (blobData: Blob[], filename: string)
   const pdfBlob = new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' });
   saveAs(pdfBlob, filename);
 };
+
+/**
+ * Custom hook to get all events in a paginated manner, sorted by scheduled date ascending.
+ */
+export const useAllEventsPaginated = (cursor?: Date, pageSize?: number) => {
+  return useQuery<{ instances: EventInstance[]; nextCursor: Date | null }, Error>(
+    ['events', 'paginated', cursor, pageSize],
+    async () => {
+      const { data } = await getAllEventsPaginated(cursor, pageSize);
+      return data;
+    }
+  );
+};
diff --git a/src/frontend/src/layouts/Sidebar/Sidebar.tsx b/src/frontend/src/layouts/Sidebar/Sidebar.tsx
@@ -9,7 +9,6 @@ import styles from '../../stylesheets/layouts/sidebar/sidebar.module.css';
 import { Typography, Box, IconButton, Divider } from '@mui/material';
 import HomeIcon from '@mui/icons-material/Home';
 import AlignHorizontalLeftIcon from '@mui/icons-material/AlignHorizontalLeft';
-import RateReviewIcon from '@mui/icons-material/RateReview';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 // To be uncommented after guest sponsors page is developed
 // import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism';
@@ -37,6 +36,7 @@ import QueryStatsIcon from '@mui/icons-material/QueryStats';
 import CurrencyExchangeIcon from '@mui/icons-material/CurrencyExchange';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { useState } from 'react';
+import { CalendarIcon } from '@mui/x-date-pickers';
 
 interface SidebarProps {
   drawerOpen: boolean;
@@ -101,9 +101,9 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
               route: routes.CHANGE_REQUESTS
             },
             {
-              name: 'Design Review',
-              icon: <RateReviewIcon />,
-              route: routes.CALENDAR
+              name: 'Events',
+              icon: <CalendarIcon />,
+              route: routes.EVENTS
             }
           ]
         },
diff --git a/src/frontend/src/pages/GuestEventPage/GuestEventCard.tsx b/src/frontend/src/pages/GuestEventPage/GuestEventCard.tsx
@@ -0,0 +1,80 @@
+import { alpha, Box, Card, CardContent, Chip, Stack, Typography, useTheme } from '@mui/material';
+import { EventInstance, formatEventDate, formatEventTime } from 'shared';
+import ScheduleOutlinedIcon from '@mui/icons-material/ScheduleOutlined';
+
+interface GuestEventCardProps {
+  event: EventInstance;
+}
+
+const GuestEventCard: React.FC<GuestEventCardProps> = ({ event }) => {
+  const theme = useTheme();
+
+  const displayDate = new Date(event.startTime);
+  const formattedDate = formatEventDate(displayDate);
+  const formattedTime = formatEventTime(displayDate);
+
+  const wbsLabels = event.workPackages.map(
+    (wp) =>
+      `${wp.wbsElement.carNumber}.${wp.wbsElement.projectNumber}.${wp.wbsElement.workPackageNumber} - ${wp.wbsElement.name}`
+  );
+
+  const title = wbsLabels.length > 0 ? wbsLabels[0] : event.title;
+  const extraWbs = wbsLabels.slice(1);
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        width: '100%',
+        background: theme.palette.background.paper,
+        borderRadius: 2
+      }}
+    >
+      <CardContent>
+        <Stack gap={1}>
+          <Box>
+            <Typography fontWeight="bold" variant="h6" sx={{ wordBreak: 'break-word' }}>
+              {title}
+            </Typography>
+            {extraWbs.map((label) => (
+              <Typography key={label} variant="body2" color="text.secondary" sx={{ wordBreak: 'break-word' }}>
+                {label}
+              </Typography>
+            ))}
+          </Box>
+
+          <Stack direction="row" flexWrap="wrap" gap={1}>
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              <ScheduleOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary', flexShrink: 0 }} />
+              <Typography variant="body2" color="text.secondary" noWrap>
+                {formattedDate} @ {formattedTime}
+              </Typography>
+            </Stack>
+          </Stack>
+
+          {event.teams.length > 0 && (
+            <Stack direction="row" flexWrap="wrap" gap={0.5}>
+              {event.teams.map((team) => (
+                <Chip
+                  key={team.teamId}
+                  label={team.teamName}
+                  size="small"
+                  variant="filled"
+                  sx={{ bgcolor: alpha(theme.palette.primary.main, 0.45), color: theme.palette.primary.light }}
+                />
+              ))}
+            </Stack>
+          )}
+
+          {event.description && (
+            <Typography variant="body2" color="text.secondary" sx={{ wordBreak: 'break-word' }}>
+              {event.description}
+            </Typography>
+          )}
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default GuestEventCard;
diff --git a/src/frontend/src/pages/GuestEventPage/GuestEventPage.tsx b/src/frontend/src/pages/GuestEventPage/GuestEventPage.tsx
diff --git a/src/frontend/src/utils/routes.ts b/src/frontend/src/utils/routes.ts
diff --git a/src/frontend/src/utils/urls.ts b/src/frontend/src/utils/urls.ts

Original file line number	Diff line number	Diff line change
`@@ -596,4 +596,18 @@ export default class CalendarController {`
`596`	`596`	`next(error);`
`597`	`597`	`}`
`598`	`598`	`}`
	`599`	`+`
	`600`	`+ static async getAllEventsPaginated(req: Request, res: Response, next: NextFunction) {`
	`601`	`+ try {`
	`602`	`+ const { cursor, pageSize } = req.body;`
	`603`	`+ const paginatedEvents = await CalendarService.getAllEventsPaginated(`
	`604`	`+ req.organization,`
	`605`	`+ cursor ? new Date(cursor) : undefined,`
	`606`	`+ pageSize ? parseInt(pageSize) : undefined`
	`607`	`+ );`
	`608`	`+ res.status(200).json(paginatedEvents);`
	`609`	`+ } catch (error: unknown) {`
	`610`	`+ next(error);`
	`611`	`+ }`
	`612`	`+ }`
`599`	`613`	`}`