feat(event): setting user status

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>
   );
 }