Add admin pickup event dashboard

src/components/admin/store/PickupEventCard/index.tsx

@@ -0,0 +1,44 @@
+import { Typography } from '@/components/common';
+import { PublicOrderPickupEvent } from '@/lib/types/apiResponses';
+import { OrderPickupEventStatus } from '@/lib/types/enums';
+import { formatEventDate } from '@/lib/utils';
+import styles from './style.module.scss';
+
+interface PickupEventCardProps {
+  pickupEvent: PublicOrderPickupEvent;
+}
+
+const getStatusStyling = (status: OrderPickupEventStatus): string => {
+  if (status === OrderPickupEventStatus.ACTIVE) {
+    return styles.active;
+  }
+  if (status === OrderPickupEventStatus.COMPLETED) {
+    return styles.completed;
+  }
+  return styles.cancelled;
+};
+
+const PickupEventCard = ({ pickupEvent }: PickupEventCardProps) => {
+  const { title, start, end, orders, status } = pickupEvent;
+
+  const statusStyling = getStatusStyling(status);
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.header}>
+        <Typography variant="h5/bold" className={statusStyling}>
+          {status}
+        </Typography>
+        <Typography variant="h5/regular">{`${orders?.length || 0} orders`}</Typography>
+      </div>
+      <Typography variant="h3/bold" className={styles.title}>
+        {title}
+      </Typography>
+      <Typography variant="h5/regular" suppressHydrationWarning>
+        {formatEventDate(start, end, true)}
+      </Typography>
+    </div>
+  );
+};
+
+export default PickupEventCard;

src/components/admin/store/PickupEventCard/style.module.scss

@@ -0,0 +1,33 @@
+.card {
+  background-color: var(--theme-surface-1);
+  border-radius: 1rem;
+  box-shadow: 0 0 4px var(--theme-accent-line-1-transparent);
+  padding: 1rem;
+
+  .title {
+    transition: 0.3s color;
+  }
+
+  &:hover > .title {
+    color: var(--theme-primary-2);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: space-between;
+  }
+}
+
+.active {
+  color: var(--theme-primary-2);
+}
+
+.completed {
+  color: var(--theme-success-1);
+}
+
+.cancelled {
+  color: var(--theme-danger-1);
+}

src/components/admin/store/PickupEventCard/style.module.scss.d.ts

@@ -0,0 +1,14 @@
+export type Styles = {
+  active: string;
+  cancelled: string;
+  card: string;
+  completed: string;
+  header: string;
+  title: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/admin/store/index.tsx

@@ -1,2 +1,3 @@
 export { default as CollectionDetailsForm } from './DetailsForm/CollectionDetailsForm';
 export { default as ItemDetailsForm } from './DetailsForm/ItemDetailsForm';
+export { default as PickupEventCard } from './PickupEventCard';

src/lib/api/StoreAPI.ts

@@ -25,12 +25,14 @@ import type {
   GetOneMerchCollectionResponse,
   GetOneMerchItemResponse,
   GetOneMerchOrderResponse,
+  GetOrderPickupEventsResponse,
   PublicMerchCollection,
   PublicMerchItem,
   PublicMerchItemOption,
   PublicMerchItemPhoto,
   PublicMerchItemWithPurchaseLimits,
   PublicOrder,
+  PublicOrderPickupEvent,
   PublicOrderWithItems,
 } from '@/lib/types/apiResponses';
 import axios from 'axios';
@@ -316,3 +318,31 @@ export const getCollection = async (
 
   return response.data.collection;
 };
+
+export const getFutureOrderPickupEvents = async (
+  token: string
+): Promise<PublicOrderPickupEvent[]> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.store.pickup.future}`;
+
+  const response = await axios.get<GetOrderPickupEventsResponse>(requestUrl, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return response.data.pickupEvents;
+};
+
+export const getPastOrderPickupEvents = async (
+  token: string
+): Promise<PublicOrderPickupEvent[]> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.store.pickup.past}`;
+
+  const response = await axios.get<GetOrderPickupEventsResponse>(requestUrl, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return response.data.pickupEvents;
+};

src/lib/config.ts

@@ -103,7 +103,7 @@ const config = {
     viewResumes: '/admin/resumes',
     store: {
       items: '/admin/store/items',
-      pickupEvents: '/admin/store/pickupEvents',
+      pickup: '/admin/store/pickup',
       homeRoute: '/admin/store',
     },
     events: {

src/lib/services/PermissionService.ts

@@ -5,6 +5,12 @@ import { UserAccessType } from '@/lib/types/enums';
  */
 export const canEditMerchItems = [UserAccessType.ADMIN, UserAccessType.MERCH_STORE_MANAGER];
 
+export const canManagePickupEvents = [
+  UserAccessType.ADMIN,
+  UserAccessType.MERCH_STORE_DISTRIBUTOR,
+  UserAccessType.MERCH_STORE_MANAGER,
+];
+
 export const canManageEvents = [UserAccessType.ADMIN, UserAccessType.MARKETING];
 
 export const canAwardPoints = [UserAccessType.ADMIN];

src/pages/admin/index.tsx

@@ -56,7 +56,7 @@ const AdminPage = ({ user: { accessType }, preview }: AdminProps) => {
         <LinkButton href={config.store.homeRoute}>
           {storeAdminVisible ? 'Manage Store Merchandise' : 'View Merch Store'}
         </LinkButton>
-        <LinkButton href={config.admin.store.pickupEvents}>Manage Pickup Events</LinkButton>
+        <LinkButton href={config.admin.store.pickup}>Manage Pickup Events</LinkButton>
       </div>
       <br />
       <Typography variant="h2/bold">User Points</Typography>

src/pages/admin/store/pickup/index.tsx

@@ -0,0 +1,69 @@
+import { PickupEventCard } from '@/components/admin/store';
+import { Typography } from '@/components/common';
+import { config } from '@/lib';
+import { StoreAPI } from '@/lib/api';
+import withAccessType from '@/lib/hoc/withAccessType';
+import { CookieService, PermissionService } from '@/lib/services';
+import type { PublicOrderPickupEvent } from '@/lib/types/apiResponses';
+import { CookieType } from '@/lib/types/enums';
+import styles from '@/styles/pages/StorePickupEventPage.module.scss';
+import { GetServerSideProps } from 'next';
+import { useState } from 'react';
+
+interface AdminPickupPageProps {
+  futurePickupEvents: PublicOrderPickupEvent[];
+  pastPickupEvents: PublicOrderPickupEvent[];
+}
+
+const AdminPickupPage = ({ futurePickupEvents, pastPickupEvents }: AdminPickupPageProps) => {
+  const [display, setDisplay] = useState<'past' | 'future'>('future');
+  const displayPickupEvents = display === 'past' ? pastPickupEvents : futurePickupEvents;
+  return (
+    <div className={styles.page}>
+      <div className={styles.header}>
+        <Typography variant="h1/bold">Manage Pickup Events</Typography>
+
+        <div className={styles.displayButtons}>
+          <button
+            type="button"
+            className={`${styles.displayButton} ${display === 'future' && styles.active}`}
+            onClick={() => setDisplay('future')}
+          >
+            <Typography variant="h5/bold">Future</Typography>
+          </button>
+          <button
+            type="button"
+            className={`${styles.displayButton} ${display === 'past' && styles.active}`}
+            onClick={() => setDisplay('past')}
+          >
+            <Typography variant="h5/bold">Past</Typography>
+          </button>
+        </div>
+      </div>
+      <div className={styles.cardContainer}>
+        {displayPickupEvents.map(pickupEvent => (
+          <PickupEventCard pickupEvent={pickupEvent} key={pickupEvent.uuid} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AdminPickupPage;
+
+const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
+  const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+  const futurePickupEventsPromise = StoreAPI.getFutureOrderPickupEvents(token);
+  const pastPickupEventsPromise = StoreAPI.getPastOrderPickupEvents(token);
+  const [futurePickupEvents, pastPickupEvents] = await Promise.all([
+    futurePickupEventsPromise,
+    pastPickupEventsPromise,
+  ]);
+  return { props: { futurePickupEvents, pastPickupEvents } };
+};
+
+export const getServerSideProps = withAccessType(
+  getServerSidePropsFunc,
+  PermissionService.canManagePickupEvents,
+  { redirectTo: config.homeRoute }
+);

src/styles/pages/StorePickupEventPage.module.scss

@@ -0,0 +1,36 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: space-between;
+
+    .displayButtons {
+      border-radius: 1rem;
+      box-shadow: 0 0 4px var(--theme-accent-line-1-transparent);
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+
+      .displayButton {
+        padding: 0.5rem 1rem;
+        transition: 0.3s background-color;
+
+        &.active {
+          background-color: var(--theme-primary-2);
+        }
+      }
+    }
+  }
+
+  .cardContainer {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  }
+}

src/styles/pages/StorePickupEventPage.module.scss.d.ts

@@ -0,0 +1,14 @@
+export type Styles = {
+  active: string;
+  cardContainer: string;
+  displayButton: string;
+  displayButtons: string;
+  header: string;
+  page: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;