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

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

@@ -4,6 +4,8 @@ import { fetcher } from '@/app/api/tools';
 import useSWR from 'swr';
 import { useParams } from 'next/navigation';
 import Link from 'next/link';
+import { getDishBg, getOrderBg, Order } from '@/app/tools';
+import { OrderID } from '@/app/components';
 
 export default function Home() {
   const { id } = useParams();
@@ -27,59 +29,33 @@ export default function Home() {
       </p>
       <p className="text-4xl">Zamówienia:</p>
       <ul className="max-w-screen-md w-full">
-        {data?.map(
-          (order: {
-            id: number;
-            created_on: string;
-            updated_on: string;
-            waiter: number;
-            waiter_name: string;
-            data: [
-              { item: string; additional_info: string; finished: boolean }
-            ];
-            status: string;
-            status_name: string;
-          }) => (
-            <li
-              key={order.id}
-              className={`m-2 p-2 rounded-md border-2 ${
-                {
-                  1: 'bg-red-200 border-red-400',
-                  2: 'bg-purple-200 border-purple-400',
-                  3: 'bg-green-200 border-green-400',
-                  4: 'bg-gray-100 border-gray-400',
-                }[order.status]
-              }`}
-            >
-              <h1 className="text-xl">
-                <span className="font-mono">
-                  {'['}
-                  {String(order.id % 1000).padStart(3, '0')}
-                  {']'}
-                </span>{' '}
-                - {new Date(order.updated_on).toLocaleTimeString('pl-PL')}
-              </h1>
-              <h2 className="text-xl">{order.waiter_name}</h2>
-              <h3>{order.status_name}</h3>
-              <div className="">
-                <ul>
-                  {order.data.map((dish) => (
-                    <li
-                      key={dish.item}
-                      className="p-2 m-2 flex gap-4 bg-white border-2 border-gray-400"
-                    >
-                      <input type="checkbox" checked={dish.finished} readOnly />
-                      <div>
-                        <p className="text-lg">{dish.item}</p>
-                        <div>{dish.additional_info}</div>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </li>
-          )
-        )}
+        {data?.map((order: Order) => (
+          <li
+            key={order.id}
+            className={`m-2 p-2 rounded-md border-2 ${getOrderBg(order)}`}
+          >
+            <OrderID order={order} />
+            <h2 className="text-xl">Kelner: {order.waiter_name}</h2>
+            { (order.client) ? <h2 className="text-xl">Klient: {order.client}</h2> : <></>}
+            <h3>{order.status_name}</h3>
+            <div className="">
+              <ul>
+                {order.data.map((dish) => (
+                  <li
+                    key={dish.item}
+                    className={`p-2 m-2 flex gap-4 border-2 ${getDishBg(dish)}`}
+                  >
+                    <input type="checkbox" checked={dish.finished} readOnly />
+                    <div>
+                      <p className="text-lg">{dish.item} - {dish.takeout ? 'Na wynos' : 'Na miejscu'}</p>
+                      <div>{dish.additional_info}</div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </li>
+        ))}
       </ul>
     </>
   );