Restructure customer order flow around hidden cart

client/src/App.jsx

@@ -14,8 +14,8 @@ import heroCup from "../../assets/ranaze-bubble-tea-single-cup-transparent.png";
 const queueStatuses = ["new", "making", "ready"];
 const orderIdleTimeoutMs = 90_000;
 const adminUnlockPressMs = 3_000;
+const adminPassword = "admin";
 const tabLabels = {
-  order: "Order",
   queue: "Order Status",
   menu: "Menu Admin"
 };
@@ -31,6 +31,7 @@ export default function App() {
   const adminPressTimerRef = useRef(null);
   const [view, setView] = useState("order");
   const [orderMode, setOrderMode] = useState(null);
+  const [showCart, setShowCart] = useState(false);
   const [adminUnlocked, setAdminUnlocked] = useState(false);
   const [logoPressing, setLogoPressing] = useState(false);
   const [menu, setMenu] = useState([]);
@@ -90,6 +91,12 @@ export default function App() {
     };
   }, [view, orderMode]);
 
+  useEffect(() => {
+    if (!orderMode) {
+      setShowCart(false);
+    }
+  }, [orderMode]);
+
   useEffect(() => {
     if (!settings) {
       return;
@@ -149,7 +156,7 @@ export default function App() {
     return selectedCategory === "All" || item.category === selectedCategory;
   });
   const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
-  const visibleTabs = adminUnlocked ? ["order", "queue", "menu"] : ["order"];
+  const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
   const modeDetails = {
     premade: {
       stepLabel: "House favorite",
@@ -176,7 +183,17 @@ export default function App() {
     window.clearTimeout(adminPressTimerRef.current);
     setLogoPressing(true);
     adminPressTimerRef.current = window.setTimeout(() => {
-      setAdminUnlocked((current) => !current);
+      if (adminUnlocked) {
+        setAdminUnlocked(false);
+        setView("order");
+      } else {
+        const password = window.prompt("Enter admin password");
+        if (password === adminPassword) {
+          setAdminUnlocked(true);
+        } else if (password !== null && password !== "") {
+          window.alert("Incorrect password");
+        }
+      }
       setLogoPressing(false);
     }, adminUnlockPressMs);
   }
@@ -186,6 +203,18 @@ export default function App() {
     setLogoPressing(false);
   }
 
+  function addLineToTicket(drink, lineBuilder) {
+    setTicket((current) => [
+      ...current,
+      {
+        menuItemId: drink._id,
+        name: drink.name,
+        basePrice: drink.basePrice,
+        ...lineBuilder
+      }
+    ]);
+  }
+
   return (
     <div className="app-shell">
       <header className="topbar">
@@ -209,6 +238,7 @@ export default function App() {
             </p>
           </div>
         </div>
+        {adminUnlocked && (
           <nav className="tabs">
             {visibleTabs.map((tab) => (
               <button
@@ -219,25 +249,40 @@ export default function App() {
                 {tabLabels[tab]}
               </button>
             ))}
-          {adminUnlocked && (
+            <button
-            <button className="tab admin-lock-btn" onClick={() => setAdminUnlocked(false)}>
+              className="tab admin-lock-btn"
+              onClick={() => {
+                setAdminUnlocked(false);
+                setView("order");
+              }}
+            >
               Hide Admin
             </button>
-          )}
           </nav>
+        )}
       </header>
 
       {view === "order" && (
-        <section className="screen">
+        <section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
           {orderMode && (
             <div className="order-toolbar">
-              <button className="text-btn" onClick={() => setOrderMode(null)}>
+              <button className="text-btn" onClick={() => {
+                setOrderMode(null);
+                setShowCart(false);
+              }}>
                 Back to drink options
               </button>
+              <div className="order-toolbar-actions">
+                {ticket.length > 0 && (
+                  <button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
+                    View Order ({ticket.length})
+                  </button>
+                )}
                 <p className="muted order-toolbar-note">
                   This screen returns to the drink menu after 90 seconds of inactivity.
                 </p>
               </div>
+            </div>
           )}
 
           {!orderMode && (
@@ -276,7 +321,7 @@ export default function App() {
             </section>
           )}
 
-          {orderMode && (
+          {orderMode && !showCart && (
           <div className="panel">
             <div className="panel-header">
               <div>
@@ -286,7 +331,9 @@ export default function App() {
               </div>
               <div className="builder-header-actions">
                 <button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
-                <div className="ticket-total">{formatCurrency(ticketTotal(ticket, settings))}</div>
+                {ticket.length > 0 && (
+                  <button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
+                )}
               </div>
             </div>
             <div className="chip-row">
@@ -306,6 +353,10 @@ export default function App() {
                   key={drink._id}
                   className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
                   onClick={() => {
+                    if (orderMode === "premade") {
+                      addLineToTicket(drink, initialBuilder(settings));
+                      return;
+                    }
                     setSelectedDrinkId(drink._id);
                     setBuilder(initialBuilder(settings));
                   }}
@@ -322,6 +373,16 @@ export default function App() {
                 </button>
               ))}
             </div>
+            {orderMode === "premade" && (
+              <div className="empty-state mode-note">
+                Tap any drink to add it to your order. Use the order button whenever you are ready to review.
+              </div>
+            )}
+          </div>
+          )}
+
+          {orderMode && !showCart && orderMode !== "premade" && (
+          <div className="panel">
             {selectedDrink && builder ? (
               <div className="inline-builder">
                 <div className="inline-builder-header">
@@ -398,24 +459,11 @@ export default function App() {
                     />
                   </label>
                 )}
-                {orderMode === "premade" && (
-                  <div className="empty-state mode-note">
-                    This option keeps the drink exactly as our signature recipe.
-                  </div>
-                )}
                 <div className="builder-actions">
                   <button
                     className="primary-btn"
                     onClick={() => {
-                      setTicket((current) => [
+                      addLineToTicket(selectedDrink, builder);
-                        ...current,
-                        {
-                          menuItemId: selectedDrink._id,
-                          name: selectedDrink.name,
-                          basePrice: selectedDrink.basePrice,
-                          ...builder
-                        }
-                      ]);
                       setBuilder(initialBuilder(settings));
                     }}
                   >
@@ -424,21 +472,24 @@ export default function App() {
                 </div>
               </div>
             ) : (
-              <div className="empty-state">Add menu items to start taking orders.</div>
+              <div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
             )}
           </div>
           )}
 
-          {orderMode && (
+          {orderMode && showCart && (
-          <div className="panel">
+          <div className="panel cart-panel">
             <section className="ticket">
               <div className="ticket-header">
                 <div>
                   <p className="eyebrow">Your order</p>
                   <h3>Review your drinks</h3>
                 </div>
+                <div className="ticket-header-actions">
+                  <button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
                   <button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
                 </div>
+              </div>
 
               <div className="ticket-lines">
                 {ticket.length === 0 && <div className="empty-state">Your order is empty.</div>}
@@ -502,6 +553,8 @@ export default function App() {
                       setTicket([]);
                       setCustomerName("");
                       setPaymentMethod("cash");
+                      setShowCart(false);
+                      setOrderMode(null);
                     } catch (requestError) {
                       setError(requestError.message);
                     }

client/src/styles.css

@@ -169,6 +169,10 @@ button {
   gap: 1rem;
 }
 
+.order-screen.is-single {
+  grid-template-columns: 1fr;
+}
+
 .order-toolbar {
   grid-column: 1 / -1;
   display: flex;
@@ -183,6 +187,14 @@ button {
   font-size: 0.92rem;
 }
 
+.order-toolbar-actions,
+.ticket-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
 .queue-screen,
 .menu-screen {
   display: grid;
@@ -341,6 +353,11 @@ button {
   box-shadow: 0 12px 24px rgba(223, 162, 50, 0.28);
 }
 
+.subtle-btn {
+  box-shadow: none;
+  padding-inline: 1rem;
+}
+
 .primary-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -458,6 +475,12 @@ select {
   border-top: 1px solid var(--line);
 }
 
+.cart-panel .ticket {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
 .ticket-line header {
   display: flex;
   justify-content: space-between;
@@ -574,6 +597,12 @@ select {
     flex-direction: column;
   }
 
+  .order-toolbar-actions,
+  .ticket-header-actions {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
   .inline-builder-header {
     flex-direction: column;
   }