added event appointments

apps/hub/app/(app)/admin/event/[id]/page.tsx

@@ -8,6 +8,14 @@ export default async ({ params }: { params: Promise<{ id: string }> }) => {
       id: parseInt(id),
     },
   });
+  const users = await prisma.user.findMany({
+    select: {
+      id: true,
+      firstname: true,
+      lastname: true,
+      publicId: true,
+    },
+  });
   if (!event) return <div>Event not found</div>;
-  return <Form event={event} />;
+  return <Form event={event} users={users} />;
 };

apps/hub/app/(app)/admin/event/_components/Form.tsx

@@ -1,12 +1,13 @@
 'use client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  EventAppointmentOptionalDefaultsSchema,
   EventOptionalDefaults,
   EventOptionalDefaultsSchema,
   ParticipantOptionalDefaultsSchema,
 } from '@repo/db/zod';
 import { set, useForm } from 'react-hook-form';
-import { BADGES, Event } from '@repo/db';
+import { BADGES, Event, User } from '@repo/db';
 import { Bot, FileText, UserIcon } from 'lucide-react';
 import { Input } from '../../../../_components/ui/Input';
 import { useRef, useState } from 'react';
@@ -17,15 +18,26 @@ import { Switch } from '../../../../_components/ui/Switch';
 import { PaginatedTable } from '../../../../_components/PaginatedTable';
 import { Select } from '../../../../_components/ui/Select';
 
-export const Form = ({ event }: { event?: Event }) => {
+export const Form = ({
+  event,
+  users,
+}: {
+  event?: Event;
+  users: {
+    id: string;
+    firstname: string;
+    lastname: string;
+    publicId: string;
+  }[];
+}) => {
   const form = useForm({
     resolver: zodResolver(EventOptionalDefaultsSchema),
     defaultValues: event,
   });
-  const participantForm = useForm({
-    resolver: zodResolver(ParticipantOptionalDefaultsSchema),
+  const appointmentForm = useForm({
+    resolver: zodResolver(EventAppointmentOptionalDefaultsSchema),
   });
-
+  console.log(appointmentForm.formState.errors);
   const [loading, setLoading] = useState(false);
   const [deleteLoading, setDeleteLoading] = useState(false);
   const addParticipantModal = useRef<HTMLDialogElement>(null);
@@ -33,13 +45,33 @@ export const Form = ({ event }: { event?: Event }) => {
     <>
       <dialog ref={addParticipantModal} className="modal">
         <div className="modal-box">
-          <h3 className="font-bold text-lg">Teilnehmer</h3>
-          <div className="modal-action">
-            <form method="dialog">
-              {/* if there is a button in form, it will close the modal */}
-              <button className="btn">Close</button>
-            </form>
-          </div>
+          <form method="dialog">
+            {/* if there is a button in form, it will close the modal */}
+            <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+              ✕
+            </button>
+          </form>
+          <h3 className="font-bold text-lg">Teilnehmer hinzufügen</h3>
+          <form
+            onSubmit={appointmentForm.handleSubmit(async (values) => {
+              console.log(values);
+            })}
+          >
+            <Select
+              form={appointmentForm}
+              name="userId"
+              label="Teilnehmer"
+              options={users.map((user) => ({
+                label: `${user.firstname} ${user.lastname} (${user.publicId})`,
+                value: user.id,
+              }))}
+            />
+            <div className="modal-action">
+              <Button type="submit" className="btn btn-primary">
+                Hinzufügen
+              </Button>
+            </div>
+          </form>
         </div>
       </dialog>
       <form
@@ -122,18 +154,18 @@ export const Form = ({ event }: { event?: Event }) => {
           <div className="card-body">
             <div className="flex justify-between">
               <h2 className="card-title">
-                <UserIcon className="w-5 h-5" /> Teilnehmer
+                <UserIcon className="w-5 h-5" /> Termine
               </h2>
               <button
                 className="btn btn-primary btn-outline"
                 onClick={() => addParticipantModal.current?.showModal()}
               >
-                Teilnehmer hinzufügen
+                Hinzufügen
               </button>
             </div>
 
             <PaginatedTable
-              prismaModel={'participant'}
+              prismaModel={'eventAppointment'}
               filter={{
                 eventId: event?.id,
               }}
@@ -142,24 +174,7 @@ export const Form = ({ event }: { event?: Event }) => {
                   user: true,
                 },
               ]}
-              columns={[
-                {
-                  header: 'Vorname',
-                  accessorKey: 'user.firstName',
-                },
-                {
-                  header: 'Nachname',
-                  accessorKey: 'user.lastname',
-                },
-                {
-                  header: 'VAR ID',
-                  accessorKey: 'user.publicId',
-                },
-                {
-                  header: 'Status',
-                  accessorKey: 'status',
-                },
-              ]}
+              columns={[]}
             />
           </div>
         </div>

apps/hub/app/_components/ui/Select.tsx

@@ -35,7 +35,11 @@ const SelectCom = <T extends FieldValues>({
       <SelectTemplate
         {...form.register(name, formOptions)}
         onChange={(newValue: any) => {
-          form.setValue(name, newValue);
+          if ('value' in newValue) {
+            form.setValue(name, newValue.value);
+          } else {
+            form.setValue(name, newValue);
+          }
           form.trigger(name);
         }}
         className={cn('w-full placeholder:text-neutral-600', className)}