feat(event): setting user status

src/app/(main)/home/page.tsx

@@ -22,7 +22,7 @@ export default function Home() {
       <div className='w-full sm:w-[90%]'>
         <Calendar
           userId={data?.data.user?.id}
-          height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
+          height='calc(100svh - 115px - (var(--spacing) * 2 * 5))'
         />
       </div>
     </div>

src/components/calendar.tsx

@@ -17,10 +17,6 @@ import { Button } from '@/components/ui/button';
 import { fromZodIssue } from 'zod-validation-error/v4';
 import type { $ZodIssue } from 'zod/v4/core';
 import { useGetApiCalendar } from '@/generated/api/calendar/calendar';
-//import {
-//  generateColor,
-//  generateSecondaryColor,
-//} from '@marko19907/string-to-color';
 
 moment.updateLocale('en', {
   week: {
@@ -29,21 +25,18 @@ moment.updateLocale('en', {
   },
 });
 
-function eventPropGetter() {
-  //  event: {
-  //  id: string;
-  //  start: Date;
-  //  end: Date;
-  //  type: UserCalendarSchemaItem['type'];
-  //  userId?: string;
-  // }
+function eventPropGetter(event: {
+  id: string;
+  start: Date;
+  end: Date;
+  type: UserCalendarSchemaItem['type'];
+  userId?: string;
+  colorOverride?: string;
+}) {
   return {
-    //  style: {
-    //    backgroundColor: generateColor(event.userId || 'defaultColor', {
-    //      saturation: 0.7,
-    //      lightness: 0.5,
-    //    }),
-    //  },
+    style: event.colorOverride
+      ? { backgroundColor: event.colorOverride }
+      : undefined,
   };
 }
 
@@ -79,6 +72,7 @@ export default function Calendar({
     end: Date;
     type: UserCalendarSchemaItem['type'];
     userId?: string;
+    colorOverride?: string;
   }[];
   className?: string;
 }) {
@@ -143,6 +137,7 @@ function CalendarWithUserEvents({
     end: Date;
     type: UserCalendarSchemaItem['type'];
     userId?: string;
+    colorOverride?: string;
   }[];
   className?: string;
 }) {
@@ -238,7 +233,7 @@ function CalendarWithUserEvents({
       resourceTitleAccessor={(event) => event.title}
       startAccessor={(event) => event.start}
       endAccessor={(event) => event.end}
-      selectable={sesstion.data?.user?.id === userId}
+      selectable={sesstion.data?.user?.id === userId && !additionalEvents}
       onEventDrop={(event) => {
         const { start, end, event: droppedEvent } = event;
         if (droppedEvent.type === 'blocked_private') return;
@@ -308,6 +303,7 @@ function CalendarWithMultiUserEvents({
     end: Date;
     type: UserCalendarSchemaItem['type'];
     userId?: string;
+    colorOverride?: string;
   }[];
   className?: string;
 }) {
@@ -398,6 +394,7 @@ function CalendarWithoutUserEvents({
     end: Date;
     type: UserCalendarSchemaItem['type'];
     userId?: string;
+    colorOverride?: string;
   }[];
   className?: string;
 }) {

src/components/custom-ui/app-sidebar.tsx

@@ -37,7 +37,7 @@ import {
 const items = [
   {
     title: 'Calendar',
-    url: '#',
+    url: '/home',
     icon: CalendarDays,
   },
   {
@@ -52,7 +52,7 @@ const items = [
   },
   {
     title: 'Events',
-    url: '#',
+    url: '/events',
     icon: CalendarClock,
   },
 ];
@@ -114,7 +114,7 @@ export function AppSidebar() {
           <SidebarFooter>
             <SidebarMenuItem className='pl-[8px]'>
               <Link
-                href='/event/new'
+                href='/events/new'
                 className='flex items-center gap-2 text-xl font-label'
               >
                 <CalendarPlus className='size-8' />

src/components/custom-ui/event-list-entry.tsx

@@ -1,9 +1,20 @@
+'use client';
+
 import { Card } from '@/components/ui/card';
 import Logo from '@/components/misc/logo';
 import { Label } from '@/components/ui/label';
 import Link from 'next/link';
 import zod from 'zod/v4';
 import { EventSchema } from '@/app/api/event/validation';
+import { useSession } from 'next-auth/react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { usePatchApiEventEventIDParticipantUser } from '@/generated/api/event-participant/event-participant';
 
 type EventListEntryProps = zod.output<typeof EventSchema>;
 
@@ -13,7 +24,11 @@ export default function EventListEntry({
   start_time,
   end_time,
   location,
+  participants,
 }: EventListEntryProps) {
+  const session = useSession();
+  const updateAttendance = usePatchApiEventEventIDParticipantUser();
+
   const formatDate = (isoString?: string) => {
     if (!isoString) return '-';
     return new Date(isoString).toLocaleDateString();
@@ -60,6 +75,45 @@ export default function EventListEntry({
                 <Label>{location}</Label>
               </div>
             )}
+            {participants &&
+              participants.some(
+                (p) => p.user.id === session.data?.user?.id,
+              ) && (
+                <div className='flex items-center justify-end'>
+                  <Select
+                    defaultValue={
+                      participants
+                        .find((p) => p.user.id === session.data?.user?.id)
+                        ?.status.toUpperCase() || 'PENDING'
+                    }
+                    onValueChange={(value) => {
+                      updateAttendance.mutate({
+                        eventID: id,
+                        user: session.data?.user?.id || '',
+                        data: {
+                          status: value as
+                            | 'ACCEPTED'
+                            | 'TENTATIVE'
+                            | 'DECLINED'
+                            | 'PENDING',
+                        },
+                      });
+                    }}
+                  >
+                    <SelectTrigger id='language'>
+                      <SelectValue placeholder='Select status' />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value='ACCEPTED'>Attending</SelectItem>
+                      <SelectItem value='TENTATIVE'>Maybe Attending</SelectItem>
+                      <SelectItem value='DECLINED'>Not Attending</SelectItem>
+                      <SelectItem value='PENDING' disabled>
+                        Pending Response
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
           </div>
         </div>
       </Card>

src/components/custom-ui/participant-list-entry.tsx

@@ -10,6 +10,7 @@ type ParticipantListEntryProps = zod.output<typeof ParticipantSchema>;
 
 export default function ParticipantListEntry({
   user,
+  status,
 }: ParticipantListEntryProps) {
   const { resolvedTheme } = useTheme();
   const defaultImage =
@@ -21,6 +22,7 @@ export default function ParticipantListEntry({
     <div className='flex items-center gap-2 py-1 ml-5'>
       <Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
       <span>{user.name}</span>
+      <span className='text-sm text-gray-500'>{status}</span>
     </div>
   );
 }

src/components/forms/event-form.tsx

@@ -374,6 +374,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
                   end: endDate ? new Date(endDate) : new Date(),
                   type: 'event',
                   userId: 'create-event',
+                  colorOverride: '#ff9800',
                 },
               ]}
               height='600px'