Update UX, add stability and change pizzas

am9zZWY · am9zZWY · commit 560fde7d6612 · 2025-06-26T22:45:13.000+02:00
diff --git a/src/app/admin/prepare/order/page.tsx b/src/app/admin/prepare/order/page.tsx
@@ -149,7 +149,7 @@ const ItemTracker = ({
                             textColor="white"
                             className="font-medium"
                         >
-                            {assignMode ? t('Admin.OrderManager.Actions.cancel') : t('Admin.OrderManager.Actions.assignToOrder')}
+                            {assignMode ? t('Admin.OrderManager.Actions.cancel') : t('Admin.OrderManager.Actions.assignToOrder', { count: selectedTickets.size })}
                         </Button>
                         <Button
                             onClick={() => setSelectedTickets(new Set())}
@@ -544,6 +544,12 @@ export default function OrderManagerDashboard() {
         },
     });
 
+    const retrieveOrder = (id: string) => {
+        if (window.confirm(`Are you sure you want to retrieve the order?`)) {
+            retrieveOrderMutation.mutate({ id });
+        }
+    }
+
     const assignTicketsMutation = useMutation({
         mutationFn: async ({ ticketIds, orderId }: { ticketIds: string[]; orderId: string }) => {
             const promises = ticketIds.map(ticketId =>
@@ -690,9 +696,7 @@ export default function OrderManagerDashboard() {
                                         id: order._id.toString(),
                                         ignoreTickets
                                     })}
-                                    onRetrieve={() => retrieveOrderMutation.mutate({
-                                        id: order._id.toString(),
-                                    })}
+                                    onRetrieve={() => retrieveOrder(order._id.toString())}
                                     onTogglePaid={() => togglePaidMutation.mutate({
                                         order: order,
                                         isPaid: !order.isPaid
diff --git a/src/app/admin/prepare/pizza/page.tsx b/src/app/admin/prepare/pizza/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { AlertCircle, Clock, Trash2, X } from 'lucide-react';
+import { Clock, Trash2 } from 'lucide-react';
 import { Heading } from "@/app/components/layout/Heading";
 import { useTranslations } from 'next-intl';
 import { timeslotToDate, timeslotToLocalTime } from "@/lib/time";
@@ -12,6 +12,7 @@ import { deleteTicket, updateTicket, useTickets } from "@/lib/fetch/ticket";
 import { ItemTicketDocumentWithItem, TICKET_STATUS, TicketStatus } from "@/model/ticket";
 import Button from '@/app/components/Button';
 import SearchInput from "@/app/components/SearchInput";
+import ErrorMessage from "@/app/components/ErrorMessage";
 
 const PizzaMakerStation = () => {
     const queryClient = useQueryClient();
@@ -194,15 +195,15 @@ const PizzaMakerStation = () => {
                             disabled={selectedTickets.size === 0}
                             className="w-full py-4 text-lg font-semibold bg-green-500 hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed rounded-xl"
                         >
-                            Mark Ready ({selectedTickets.size})
+                            {t('Admin.Prepare.Actions.markReady', { count: selectedTickets.size })}
                         </Button>
 
                         <Button
                             onClick={markSelectedNotReady}
                             disabled={selectedTickets.size === 0}
                             className="w-full py-4 text-lg font-semibold bg-yellow-500 hover:bg-yellow-600 disabled:bg-gray-300 disabled:cursor-not-allowed rounded-xl"
                         >
-                            Mark Not Ready ({selectedTickets.size})
+                            {t('Admin.Prepare.Actions.markNotReady', { count: selectedTickets.size })}
                         </Button>
 
                         <Button
@@ -211,7 +212,7 @@ const PizzaMakerStation = () => {
                             className="w-full py-4 text-lg font-semibold bg-red-500 hover:bg-red-600 disabled:bg-gray-300 disabled:cursor-not-allowed rounded-xl flex items-center justify-center gap-2"
                         >
                             <Trash2 className="w-5 h-5"/>
-                            Delete Tickets ({selectedTickets.size})
+                            {t('Admin.Prepare.Actions.deleteTickets', { count: selectedTickets.size })}
                         </Button>
                     </div>
 
@@ -226,38 +227,43 @@ const PizzaMakerStation = () => {
                                 return 1
                             }
                             return (timeslotToDate(a.timeslot)?.getTime() || 0) - (timeslotToDate(b.timeslot)?.getTime() || 0)
-                        }).map(ticket => (
-                            <button
-                                key={`${ticket._id.toString()}-${ticket.status}`}
-                                onClick={() => toggleTicketSelection(ticket._id.toString())}
-                                className={`
-                                    border-2 px-4 py-3 rounded-xl text-base flex items-center justify-between cursor-pointer
-                                    transition-all duration-200 hover:shadow-md
-                                    ${ticket.status !== TICKET_STATUS.DEMANDED && !selectedTickets.has(ticket._id.toString())
-                                    ? 'bg-green-50 border-green-200 text-gray-600'
-                                    : 'bg-white'
-                                }
-                                    ${ticket.status !== TICKET_STATUS.DEMANDED && selectedTickets.has(ticket._id.toString())
-                                    ? 'border-blue-500 border-green-200 text-gray-600'
-                                    : 'bg-white'
-                                }
-                                    ${selectedTickets.has(ticket._id.toString()) ? 'border-blue-500' : 'border-gray-200 hover:border-gray-300'}
-                                `}
-                            >
-                                <div className="flex flex-col">
-                                    <span className="font-semibold">{ticket.itemTypeRef.name}</span>
-                                    {ticket?.orderId && (
-                                        <span
-                                            className="text-sm text-gray-500">Order: {ticket.orderId.toString().slice(-6)}</span>
+                        }).map(ticket => {
+                            let color = ''
+                            let border = ''
+
+                            if (ticket.status === TICKET_STATUS.DEMANDED) {
+                                color = 'gray'
+                            } else {
+                                border = 'green'
+                            }
+
+                            if (selectedTickets.has(ticket._id.toString())) {
+                                border = 'primary'
+                            }
+
+                            return (
+                                <Button
+                                    key={`${ticket._id.toString()}-${ticket.status}`}
+                                    onClick={() => toggleTicketSelection(ticket._id.toString())}
+                                    color={color}
+                                    border={border}
+                                    className="px-4 py-3 rounded-xl text-base flex items-center justify-between"
+                                >
+                                    <div className="flex flex-col">
+                                        <span className="font-semibold">{ticket.itemTypeRef.name}</span>
+                                        {ticket?.orderId && (
+                                            <span
+                                                className="text-sm text-gray-500">Order: {ticket.orderId.toString().slice(-6)}</span>
+                                        )}
+                                    </div>
+                                    {ticket.timeslot && (
+                                        <span className="bg-gray-100 py-1 px-3 rounded-full text-sm font-medium">
+                                            {timeslotToLocalTime(ticket.timeslot)}
+                                        </span>
                                     )}
-                                </div>
-                                {ticket.timeslot && (
-                                    <span className="bg-gray-100 py-1 px-3 rounded-full text-sm font-medium">
-                                        {timeslotToLocalTime(ticket.timeslot)}
-                                    </span>
-                                )}
-                            </button>
-                        ))}
+                                </Button>
+                            );
+                        })}
                     </div>
 
                     {upcomingItems.size === 0 && (
@@ -316,17 +322,7 @@ const PizzaMakerStation = () => {
 
             {/* Error Toast */}
             {error && (
-                <div
-                    className="fixed bottom-8 right-8 bg-red-500 text-white rounded-xl px-6 py-4 flex items-center gap-3 shadow-2xl z-50">
-                    <AlertCircle className="w-6 h-6"/>
-                    <span className="font-medium">{error}</span>
-                    <button
-                        onClick={() => setError('')}
-                        className="ml-2 text-white hover:text-gray-200"
-                    >
-                        <X className="w-5 h-5"/>
-                    </button>
-                </div>
+                <ErrorMessage error={error}/>
             )}
         </>
     );
diff --git a/src/app/api/system/reset/route.ts b/src/app/api/system/reset/route.ts
@@ -81,13 +81,11 @@ async function initAndLoadConfig(): Promise<EditableConfig> {
 
 
 const pizzasByName = {
-    Salami: ["Cheese 🧀", "Tomato Sauce 🍅", "Salami 🍕"],
-    "Ham and mushrooms": ["Cheese 🧀", "Tomato Sauce 🍅", "Ham 🥓", "Mushrooms 🍄"],
-    Capricciosa: ["Cheese 🧀", "Tomato Sauce 🍅", "Mushrooms 🍄", "Artichokes 🌱", "Olives 🫒", "Ham 🥓", "Basil 🌿"],
-    Margherita: ["Cheese 🧀", "Tomato Sauce 🍅", "Basil 🌿"],
-    Veggies: ["Cheese 🧀", "Tomato Sauce 🍅", "Mushrooms 🍄", "Onions 🧅", "Green Peppers 🫑", "Olives 🫒"],
-    "Margherita vegan": ["Vegan Cheese 🧀", "Tomato Sauce 🍅", "Basil 🌿"],
-    "Capricciosa vegan": ["Vegan Cheese 🧀", "Tomato Sauce 🍅", "Mushrooms 🍄", "Artichokes 🌱", "Olives 🫒", "Basil 🌿"]
+    Salami: ["Cheese 🧀", "Salami 🍕"],
+    Margherita: ["Cheese 🧀", "Cherry Tomatoes 🍅", "Basil 🌿"],
+    Veggies: ["Cheese 🧀", "Mushrooms 🍄", "Onions 🧅", "Red Bell Peppers 🫑", "Tomatoes 🍅", "Olives 🫒"],
+    "Margherita vegan": ["Vegan Cheese 🧀", "Cherry Tomaten 🍅", "Basil 🌿"],
+    "Veggies vegan": ["Vegan Cheese 🧀", "Mushrooms 🍄", "Onions 🧅", "Red Bell Peppers 🫑", "Tomatoes 🍅", "Olives 🫒"],
 };
 
 /**
@@ -97,7 +95,7 @@ const pizzasByName = {
 export async function GET() {
     await dbConnect();
     await initAndLoadConfig()
-    return Response.json({ status: "success" });
+    return Response.json({ message: 'Successfully basic reconfigured system. You have to reset the database!' })
 }
 
 /**
@@ -123,22 +121,6 @@ export async function POST() {
             ingredients: pizzasByName['Salami'],
             size: 0.5
         },
-        {
-            name: 'Ham and mushrooms half',
-            price: 4,
-            dietary: 'meat',
-            type: 'pizza',
-            ingredients: pizzasByName['Ham and mushrooms'],
-            size: 0.5
-        },
-        {
-            name: 'Capricciosa half',
-            price: 4,
-            type: 'pizza',
-            dietary: 'meat',
-            ingredients: pizzasByName['Capricciosa'],
-            size: 0.5
-        },
         { name: 'Margherita half', price: 6, type: 'pizza', ingredients: pizzasByName['Margherita'], size: 0.5 },
         { name: 'Veggies half', price: 6, type: 'pizza', ingredients: pizzasByName['Veggies'], size: 0.5 },
         {
@@ -150,11 +132,11 @@ export async function POST() {
             size: 0.5
         },
         {
-            name: 'Capricciosa vegan half',
+            name: 'Veggies vegan half',
             price: 3,
             dietary: 'vegan',
             type: 'pizza',
-            ingredients: pizzasByName['Capricciosa vegan'],
+            ingredients: pizzasByName['Veggies vegan'],
             size: 0.5
         },
     ];
@@ -164,5 +146,5 @@ export async function POST() {
 
     await initAndLoadConfig()
 
-    return Response.json({ message: 'Successfully reset system' })
+    return Response.json({ message: 'Successfully reconfigured system' })
 }
diff --git a/src/app/components/Button.tsx b/src/app/components/Button.tsx
@@ -38,11 +38,16 @@ const Button = (button: ButtonProps) => {
     const isDisabled = button.disabled || isRateLimited;
     let color: string = '';
     if (button.color) {
-        if (button.color !== "white" && button.color !== "black") {
+        if (button.color !== "white" && button.color !== "black" && button.color !== "gray") {
             color = `bg-${button.color}-500`;
             if (!isDisabled) {
                 color += ` hover:bg-${button.color}-600`
             }
+        } else if (button.color === "gray") {
+            color = `bg-${button.color}-100`;
+            if (!isDisabled) {
+                color += ` hover:bg-${button.color}-300`
+            }
         } else if (button.color === "white") {
             color = "bg-white";
         } else if (button.color === "black") {
diff --git a/src/i18n/locales/de.yaml b/src/i18n/locales/de.yaml
@@ -180,6 +180,11 @@ translation:
       status: Status
       is_done: ✅ Erledigt
 
+      Actions:
+        markReady: 'Fertig ({count})'
+        markNotReady: 'Nicht fertig ({count})'
+        deleteTickets: 'Tickets löschen ({count})'
+
     OrderManager:
       title: "Ausgabestation"
       description: "Verfolge Artikel und liefere Bestellungen aus"
@@ -196,7 +201,7 @@ translation:
 
       # Buttons and Actions
       Actions:
-        assignToOrder: "Bestellung zuweisen"
+        assignToOrder: "Bestellung zuweisen ({count})"
         cancel: "Abbrechen"
         clear: "Leeren"
         markReady: "Als fertig markieren"
diff --git a/src/i18n/locales/en.yaml b/src/i18n/locales/en.yaml
@@ -178,6 +178,11 @@ translation:
       status: Status
       is_done: ✅ Done
 
+      Actions:
+        markReady: 'Mark Ready ({count})'
+        markNotReady: 'Mark Not Ready ({count})'
+        deleteTickets: 'Delete Tickets ({count})'
+
     OrderManager:
       title: "Delivery Station"
       description: "Track items and deliver orders"
