some minor fixes

frontend/app/waiter/[id]/new/page.tsx

@@ -8,10 +8,15 @@ import { fetcher } from '@/app/api/tools';
 import useSWR from 'swr';
 import { Dish } from '@/app/tools';
 
+type FormDish = Dish & {
+  filter: string;
+};
+
 type FormValues = {
+  status: number;
   client: string;
   realization_time: string;
-  data: Dish[];
+  data: FormDish[];
 };
 
 export default function App() {
@@ -24,22 +29,37 @@ export default function App() {
     control,
     handleSubmit,
     formState: { errors },
+    getValues,
+    setValue,
+    watch,
   } = useForm<FormValues>({
     defaultValues: {
+      status: 2,
       client: '',
-      realization_time: new Date().toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }),
+      realization_time: new Date().toLocaleTimeString('pl-PL', {
+        hour: '2-digit',
+        minute: '2-digit',
+      }),
       data: [
-        { item: 'Inne', additional_info: '', finished: false, takeout: false },
+        {
+          item: '',
+          additional_info: '',
+          finished: false,
+          takeout: false,
+          times: 1,
+          filter: '',
+        },
       ],
     },
     mode: 'all',
+    criteriaMode: 'all',
+    shouldFocusError: true
   });
   const { fields, append, remove } = useFieldArray({
     name: 'data',
     control,
   });
   const onSubmit = (data: FormValues) => {
-    console.log(data);
     fetch('/api/orders', {
       method: 'POST',
       body: JSON.stringify({ waiter: id, ...data }),
@@ -54,6 +74,8 @@ export default function App() {
   if (error) return <div>Błąd przy ładowaniu danych</div>;
   if (isLoading) return <div>Ładowanie</div>;
 
+  watch('data')
+
   return (
     <>
       <form
@@ -95,21 +117,56 @@ export default function App() {
                   required: false,
                 })}
               />
-              <div className="basis-1/3">
+              <div className="basis-1/3 gap-2">
                 <label htmlFor={`data.${index}.item`}>Danie</label>
+                <input
+                  {...register(`data.${index}.filter` as const, {
+                    required: false,
+                  })}
+                  placeholder='Wyszukaj danie'
+                  className={errors?.data?.[index]?.filter ? 'error' : ''}
+                  onChange={(e) => setValue(`data.${index}.item`, data
+                    ?.filter((data: { id: number; name: string }) =>
+                      data.name
+                        .toLowerCase()
+                        .includes(
+                          e.target.value.toLowerCase()
+                        )
+                    )[0].name, {shouldValidate: true})}
+                />
                 <select
                   {...register(`data.${index}.item` as const, {
                     required: true,
                   })}
                   className={errors?.data?.[index]?.item ? 'error' : ''}
                 >
-                  <option value="Inne">Inne</option>
-                  {data?.map((data: { id: number; name: string }) => (
-                    <option key={data.name} value={data.name}>
-                      {data.name}
-                    </option>
-                  ))}
+                  {!!getValues(`data.${index}.filter`) ? (
+                    null
+                  ) : (
+                    <option value="Inne">Inne</option>
+                  )}
+                  {data
+                    ?.filter((data: { id: number; name: string }) =>
+                      data.name
+                        .toLowerCase()
+                        .includes(
+                          getValues(`data.${index}.filter`).toLowerCase()
+                        )
+                    )
+                    .map((data: { id: number; name: string }) => (
+                      <option key={data.name} value={data.name}>
+                        {data.name}
+                      </option>
+                    ))}
                 </select>
+                <label htmlFor={`data.${index}.times`}>Ilość</label>
+                  <input
+                    {...register(`data.${index}.times` as const, {
+                      required: false,
+                    })}
+                    type="number"
+                    className={errors?.data?.[index]?.times ? 'error' : ''}
+                  />
                 <section className="flex flex-row my-2 gap-2">
                   <label htmlFor={`data.${index}.takeout`}>Na wynos</label>
                   <input
@@ -157,6 +214,8 @@ export default function App() {
               additional_info: '',
               finished: false,
               takeout: false,
+              times: 1,
+              filter: '',
             })
           }
         >