colored orders + ping sound

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

@@ -40,7 +40,17 @@ export default function Home() {
             status: string;
             status_name: string;
           }) => (
-            <li key={order.id} className="m-2 p-2 border-2 bg-gray-100">
+            <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">
                   {'['}
@@ -56,7 +66,7 @@ export default function Home() {
                   {order.data.map((dish) => (
                     <li
                       key={dish.item}
-                      className="p-2 m-2 flex gap-4 bg-gray-200 border-2 border-gray-400"
+                      className="p-2 m-2 flex gap-4 bg-white border-2 border-gray-400"
                     >
                       <input type="checkbox" checked={dish.finished} readOnly />
                       <div>