Adding Siglead Management Option in the Side Menu & Adding a draft Page

Author: tarashagarwal

src/common/roles.ts

@@ -3,6 +3,7 @@ export const runEnvironments = ["dev", "prod"] as const;
 export type RunEnvironment = (typeof runEnvironments)[number];
 export enum AppRoles {
   EVENTS_MANAGER = "manage:events",
+  SIGLEAD_MANAGER = "manage:siglead",
   TICKETS_SCANNER = "scan:tickets",
   TICKETS_MANAGER = "manage:tickets",
   IAM_ADMIN = "admin:iam",

src/ui/Router.tsx

@@ -19,6 +19,7 @@ import { ViewTicketsPage } from './pages/tickets/ViewTickets.page';
 import { ManageIamPage } from './pages/iam/ManageIam.page';
 import { ManageProfilePage } from './pages/profile/ManageProfile.page';
 import { ManageStripeLinksPage } from './pages/stripe/ViewLinks.page';
+import { ManageSigLeadsPage } from './pages/siglead/ManageSigLeads.page';
 
 const ProfileRediect: React.FC = () => {
   const location = useLocation();
@@ -162,6 +163,10 @@ const authenticatedRouter = createBrowserRouter([
     path: '/stripe',
     element: <ManageStripeLinksPage />,
   },
+  {
+    path: '/siglead-management',
+    element: <ManageSigLeadsPage />,
+  },
   // Catch-all route for authenticated users shows 404 page
   {
     path: '*',

src/ui/components/AppShell/index.tsx

@@ -17,6 +17,7 @@ import {
   IconPizza,
   IconTicket,
   IconLock,
+  IconUsers,
 } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -37,13 +38,6 @@ export interface AcmAppShellProps {
 }
 
 export const navItems = [
-  {
-    link: '/events/manage',
-    name: 'Events',
-    icon: IconCalendar,
-    description: null,
-    validRoles: [AppRoles.EVENTS_MANAGER],
-  },
   {
     link: '/tickets',
     name: 'Ticketing/Merch',
@@ -65,6 +59,13 @@ export const navItems = [
     description: null,
     validRoles: [AppRoles.STRIPE_LINK_CREATOR],
   },
+  {
+    link: '/siglead-management',
+    name: 'SigLead',
+    icon: IconUsers,
+    description: null,
+    validRoles: [AppRoles.SIGLEAD_MANAGER],
+  },
 ];
 
 export const extLinks = [

src/ui/pages/siglead/ManageSigLeads.page.tsx

@@ -0,0 +1,207 @@
+import { Title, Box, TextInput, Textarea, Switch, Select, Button, Loader } from '@mantine/core';
+import { DateTimePicker } from '@mantine/dates';
+import { useForm, zodResolver } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { z } from 'zod';
+import { AuthGuard } from '@ui/components/AuthGuard';
+import { getRunEnvironmentConfig } from '@ui/config';
+import { useApi } from '@ui/util/api';
+import { OrganizationList as orgList } from '@common/orgs';
+import { AppRoles } from '@common/roles';
+
+export function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+const repeatOptions = ['weekly', 'biweekly'] as const;
+
+const baseBodySchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+  start: z.date(),
+  end: z.optional(z.date()),
+  location: z.string().min(1, 'Location is required'),
+  locationLink: z.optional(z.string().url('Invalid URL')),
+  host: z.string().min(1, 'Host is required'),
+  featured: z.boolean().default(false),
+  paidEventId: z.string().min(1, 'Paid Event ID must be at least 1 character').optional(),
+});
+
+const requestBodySchema = baseBodySchema
+  .extend({
+    repeats: z.optional(z.enum(repeatOptions)).nullable(),
+    repeatEnds: z.date().optional(),
+  })
+  .refine((data) => (data.repeatEnds ? data.repeats !== undefined : true), {
+    message: 'Repeat frequency is required when Repeat End is specified.',
+  })
+  .refine((data) => !data.end || data.end >= data.start, {
+    message: 'Event end date cannot be earlier than the start date.',
+    path: ['end'],
+  })
+  .refine((data) => !data.repeatEnds || data.repeatEnds >= data.start, {
+    message: 'Repeat end date cannot be earlier than the start date.',
+    path: ['repeatEnds'],
+  });
+
+type EventPostRequest = z.infer<typeof requestBodySchema>;
+
+export const ManageSigLeadsPage: React.FC = () => {
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const api = useApi('core');
+
+  const { eventId } = useParams();
+
+  const isEditing = eventId !== undefined;
+
+  useEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+    // Fetch event data and populate form
+    const getEvent = async () => {
+      try {
+        const response = await api.get(`/api/v1/events/${eventId}`);
+        const eventData = response.data;
+        const formValues = {
+          title: eventData.title,
+          description: eventData.description,
+          start: new Date(eventData.start),
+          end: eventData.end ? new Date(eventData.end) : undefined,
+          location: eventData.location,
+          locationLink: eventData.locationLink,
+          host: eventData.host,
+          featured: eventData.featured,
+          repeats: eventData.repeats,
+          repeatEnds: eventData.repeatEnds ? new Date(eventData.repeatEnds) : undefined,
+          paidEventId: eventData.paidEventId,
+        };
+        form.setValues(formValues);
+      } catch (error) {
+        console.error('Error fetching event data:', error);
+        notifications.show({
+          message: 'Failed to fetch event data, please try again.',
+        });
+      }
+    };
+    getEvent();
+  }, [eventId, isEditing]);
+
+  const form = useForm<EventPostRequest>({
+    validate: zodResolver(requestBodySchema),
+    initialValues: {
+      title: '',
+      description: '',
+      start: new Date(),
+      end: new Date(new Date().valueOf() + 3.6e6), // 1 hr later
+      location: 'ACM Room (Siebel CS 1104)',
+      locationLink: 'https://maps.app.goo.gl/dwbBBBkfjkgj8gvA8',
+      host: 'ACM',
+      featured: false,
+      repeats: undefined,
+      repeatEnds: undefined,
+      paidEventId: undefined,
+    },
+  });
+
+  const checkPaidEventId = async (paidEventId: string) => {
+    try {
+      const merchEndpoint = getRunEnvironmentConfig().ServiceConfiguration.merch.baseEndpoint;
+      const ticketEndpoint = getRunEnvironmentConfig().ServiceConfiguration.tickets.baseEndpoint;
+      const paidEventHref = paidEventId.startsWith('merch:')
+        ? `${merchEndpoint}/api/v1/merch/details?itemid=${paidEventId.slice(6)}`
+        : `${ticketEndpoint}/api/v1/event/details?eventid=${paidEventId}`;
+      const response = await api.get(paidEventHref);
+      return Boolean(response.status < 299 && response.status >= 200);
+    } catch (error) {
+      console.error('Error validating paid event ID:', error);
+      return false;
+    }
+  };
+
+  const handleSubmit = async (values: EventPostRequest) => {
+    try {
+      setIsSubmitting(true);
+      const realValues = {
+        ...values,
+        start: dayjs(values.start).format('YYYY-MM-DD[T]HH:mm:00'),
+        end: values.end ? dayjs(values.end).format('YYYY-MM-DD[T]HH:mm:00') : undefined,
+        repeatEnds:
+          values.repeatEnds && values.repeats
+            ? dayjs(values.repeatEnds).format('YYYY-MM-DD[T]HH:mm:00')
+            : undefined,
+        repeats: values.repeats ? values.repeats : undefined,
+      };
+
+      const eventURL = isEditing ? `/api/v1/events/${eventId}` : '/api/v1/events';
+      const response = await api.post(eventURL, realValues);
+      notifications.show({
+        title: isEditing ? 'Event updated!' : 'Event created!',
+        message: isEditing ? undefined : `The event ID is "${response.data.id}".`,
+      });
+      navigate('/events/manage');
+    } catch (error) {
+      setIsSubmitting(false);
+      console.error('Error creating/editing event:', error);
+      notifications.show({
+        message: 'Failed to create/edit event, please try again.',
+      });
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+        textAlign: 'center',
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="100"
+        height="100"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{
+          animation: 'rotate 2s linear infinite',
+        }}
+      >
+        <path d="M12 2v2"></path>
+        <path d="M12 20v2"></path>
+        <path d="m4.93 4.93 1.41 1.41"></path>
+        <path d="m17.66 17.66 1.41 1.41"></path>
+        <path d="M2 12h2"></path>
+        <path d="M20 12h2"></path>
+        <path d="m6.34 17.66-1.41 1.41"></path>
+        <path d="m19.07 4.93-1.41 1.41"></path>
+        <circle cx="12" cy="12" r="3"></circle>
+      </svg>
+      <h1 style={{ marginTop: '20px', fontSize: '24px' }}>Page Under Construction</h1>
+
+      <style>
+        {`
+        @keyframes rotate {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `}
+      </style>
+    </div>
+  );
+};