feat(blocked_slots): add blocked slots

src/components/custom-ui/blocked-slot-list-entry.tsx

@@ -0,0 +1,56 @@
+'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 { BlockedSlotsSchema } from '@/app/api/blocked_slots/validation';
+
+type BlockedSlotListEntryProps = zod.output<typeof BlockedSlotsSchema>;
+
+export default function BlockedSlotListEntry(slot: BlockedSlotListEntryProps) {
+  const formatDate = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleDateString();
+  };
+  const formatTime = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+  return (
+    <Link href={`/blocked_slots/${slot.id}`} className='block'>
+      <Card className='w-full'>
+        <div className='grid grid-cols-1 gap-2 mx-auto md:mx-4 md:grid-cols-[80px_1fr_250px]'>
+          <div className='w-full items-center justify-center grid'>
+            <Logo colorType='monochrome' logoType='submark' width={50} />
+          </div>
+          <div className='w-full items-center justify-center grid my-3 md:my-0'>
+            <h2 className='text-center'>{slot.reason}</h2>
+          </div>
+          <div className='grid gap-4'>
+            <div className='grid grid-cols-[80px_auto] gap-2'>
+              <Label className='text-[var(--color-neutral-300)] justify-end'>
+                start
+              </Label>
+              <Label>
+                {formatDate(slot.start_time)} {formatTime(slot.start_time)}
+              </Label>
+            </div>
+            <div className='grid grid-cols-[80px_auto] gap-2'>
+              <Label className='text-[var(--color-neutral-300)] justify-end'>
+                end
+              </Label>
+              <Label>
+                {formatDate(slot.end_time)} {formatTime(slot.end_time)}
+              </Label>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

src/components/custom-ui/labeled-input.tsx

@@ -12,7 +12,6 @@ export default function LabeledInput({
   error,
   ...rest
 }: {
-  type: 'text' | 'email' | 'password';
   label: string;
   placeholder?: string;
   value?: string;

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