color changes, client, realization time

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

@@ -3,16 +3,15 @@
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import * as React from 'react';
-import { useForm, useFieldArray, useWatch, Control } from 'react-hook-form';
+import { useForm, useFieldArray } from 'react-hook-form';
 import { fetcher } from '@/app/api/tools';
 import useSWR from 'swr';
+import { Dish } from '@/app/tools';
 
 type FormValues = {
-  data: {
-    item: string;
-    additional_info: string;
-    finished: boolean;
-  }[];
+  client: string;
+  realization_time: string;
+  data: Dish[];
 };
 
 export default function App() {
@@ -27,9 +26,13 @@ export default function App() {
     formState: { errors },
   } = useForm<FormValues>({
     defaultValues: {
-      data: [{ item: '', additional_info: '', finished: false }],
+      client: '',
+      realization_time: new Date().toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }),
+      data: [
+        { item: 'Inne', additional_info: '', finished: false, takeout: false },
+      ],
     },
-    mode: 'onBlur',
+    mode: 'all',
   });
   const { fields, append, remove } = useFieldArray({
     name: 'data',
@@ -45,7 +48,7 @@ export default function App() {
       },
     })
       .then(({ status }) => console.log(status))
-      .then((_) => router.push(`/waiter/${id}`));
+      .then(() => router.push(`/waiter/${id}`));
   };
 
   if (error) return <div>Błąd przy ładowaniu danych</div>;
@@ -59,6 +62,26 @@ export default function App() {
         className="flex flex-col max-w-screen-md w-full my-4"
       >
         <p className="text-2xl text-center">Nowe zamówienie</p>
+        <p>
+          <label htmlFor={`client`}>Klient</label>
+          <input
+            placeholder="Klient"
+            type="text"
+            {...register(`client` as const, {
+              required: false,
+            })}
+            className={errors?.client ? 'error' : ''}
+          />
+        </p>
+        <p>
+          <label htmlFor={`realization_time`}>Godzina realizacji</label>
+          <input
+            {...register(`realization_time` as const, {
+              required: false,
+            })}
+            className={errors?.realization_time ? 'error' : ''}
+          />
+        </p>
         {fields.map((field, index) => {
           return (
             <div
@@ -72,7 +95,7 @@ export default function App() {
                   required: false,
                 })}
               />
-              <p className="basis-1/3">
+              <div className="basis-1/3">
                 <label htmlFor={`data.${index}.item`}>Danie</label>
                 <select
                   {...register(`data.${index}.item` as const, {
@@ -87,8 +110,18 @@ export default function App() {
                     </option>
                   ))}
                 </select>
-              </p>
-              <p className="basis-1/3">
+                <section className="flex flex-row my-2 gap-2">
+                  <label htmlFor={`data.${index}.takeout`}>Na wynos</label>
+                  <input
+                    {...register(`data.${index}.takeout` as const, {
+                      required: false,
+                    })}
+                    type="checkbox"
+                    className={errors?.data?.[index]?.takeout ? 'error' : ''}
+                  />
+                </section>
+              </div>
+              <div className="basis-1/3">
                 <label htmlFor={`data.${index}.additional_info`}>
                   Dodatkowe informacje
                 </label>
@@ -101,7 +134,7 @@ export default function App() {
                     errors?.data?.[index]?.additional_info ? 'error' : ''
                   }
                 />
-              </p>
+              </div>
               {fields.length > 1 ? (
                 <p className="basis-1/3 flex items-center justify-center">
                   <button type="button" onClick={() => remove(index)}>
@@ -123,6 +156,7 @@ export default function App() {
               item: '',
               additional_info: '',
               finished: false,
+              takeout: false,
             })
           }
         >
@@ -141,7 +175,9 @@ export default function App() {
           Złóż zamówienie
         </button>
       </form>
-      <Link href={`/waiter/${id}`} className='mt-10'><button>Powrót</button></Link>
+      <Link href={`/waiter/${id}`} className="mt-10">
+        <button>Powrót</button>
+      </Link>
     </>
   );
 }