feat(blocked_slots): add blocked slots

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

@@ -5,16 +5,28 @@ import { user_default_light } from '@/assets/usericon/default/defaultusericon-ex
 import { useTheme } from 'next-themes';
 import zod from 'zod/v4';
 import { ParticipantSchema } from '@/app/api/event/[eventID]/participant/validation';
+import { usePatchApiEventEventIDParticipantUser } from '@/generated/api/event-participant/event-participant';
+import { useSession } from 'next-auth/react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
 
 type ParticipantListEntryProps = zod.output<typeof ParticipantSchema>;
 
 export default function ParticipantListEntry({
   user,
   status,
-}: ParticipantListEntryProps) {
+  eventID,
+}: ParticipantListEntryProps & { eventID?: string }) {
+  const session = useSession();
   const { resolvedTheme } = useTheme();
   const defaultImage =
     resolvedTheme === 'dark' ? user_default_dark : user_default_light;
+  const updateAttendance = usePatchApiEventEventIDParticipantUser();
 
   const finalImageSrc = user.image ?? defaultImage;
 
@@ -22,7 +34,38 @@ 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>
+      {user.id === session.data?.user?.id && eventID ? (
+        <Select
+          defaultValue={status}
+          onValueChange={(value) => {
+            updateAttendance.mutate({
+              eventID: eventID,
+              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>
+      ) : (
+        <span className='text-sm text-gray-500'>{status}</span>
+      )}
     </div>
   );
 }