From ac75dc833dc28205743a67822737b8e3a8d5e017 Mon Sep 17 00:00:00 2001
From: Edmilson Lopes <edmls2008@gmail.com>
Date: Wed, 10 Dec 2025 14:42:20 -0300
Subject: [PATCH] Refine storefront layout and order queue

---
 src/App.js                          |  67 +++++++----
 src/components/Admin/GrillQueue.jsx |  14 ++-
 src/components/Client/MenuView.jsx  | 165 ++++++++++++++++------------
 3 files changed, 151 insertions(+), 95 deletions(-)

diff --git a/src/App.js b/src/App.js
index 11222a22..90d850c3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -276,45 +276,64 @@ function App() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-100 font-sans pb-24">
-      <header className="bg-white sticky top-0 z-30 shadow-sm">
-        <div className="bg-red-900 text-white p-1 text-center text-[10px] md:text-xs font-medium uppercase tracking-wider">
-          O melhor churrasco da região • Peça agora
-        </div>
-        <div className="p-4 flex justify-between items-center max-w-lg mx-auto">
+    <div className="min-h-screen bg-[#f5f6fa] font-sans pb-28">
+      <header className="bg-gradient-to-b from-red-700 via-red-600 to-red-500 text-white pb-10 shadow-md">
+        <div className="max-w-4xl mx-auto px-4 pt-4 flex justify-between items-center">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-yellow-400 rounded-lg flex items-center justify-center text-red-900 font-black text-xl shadow-sm">
+            <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-xl font-black shadow-lg">
               ED
             </div>
             <div>
-              <h1 className="font-bold text-gray-800 leading-none">Datony</h1>
-              <span className="text-xs text-gray-500">Espetinhos Premium</span>
+              <p className="text-xs uppercase tracking-[0.2em] text-red-100 font-semibold">Espetinho Datony</p>
+              <h1 className="text-2xl font-black leading-tight">O melhor da região</h1>
             </div>
           </div>
-          <div className="flex items-center gap-3 text-gray-400">
+          <div className="flex items-center gap-3 text-white/80">
+            <div className="hidden sm:flex items-center gap-2 bg-white/10 px-3 py-1 rounded-full text-xs font-semibold">
+              <span className="w-2 h-2 rounded-full bg-emerald-300 animate-pulse" /> Aberto agora
+            </div>
+            <button
+              onClick={() => setView('grill')}
+              className="w-10 h-10 rounded-full bg-white/10 backdrop-blur flex items-center justify-center hover:bg-white/20 transition"
+              title="Fila do churrasqueiro"
+            >
+              <ChefHat size={20} />
+            </button>
             <button
               onClick={() => {
                 setView('login');
                 setLoginError('');
               }}
-              className="hover:text-red-600 transition-colors"
+              className="w-10 h-10 rounded-full bg-white/10 backdrop-blur flex items-center justify-center hover:bg-white/20 transition"
+              title="Área administrativa"
             >
               <User size={20} />
             </button>
-            <button onClick={() => setView('grill')} className="hover:text-red-600 transition-colors">
-              <ChefHat size={20} />
-            </button>
+          </div>
+        </div>
+
+        <div className="max-w-4xl mx-auto px-4 mt-4">
+          <div className="bg-white/10 backdrop-blur-xl rounded-2xl p-4 flex items-center justify-between border border-white/20">
+            <div>
+              <p className="text-sm text-red-100">Faça seu pedido e retire rápido</p>
+              <p className="text-lg font-bold">Espetinhos artesanais e bebidas geladas</p>
+            </div>
+            <div className="hidden md:flex gap-2">
+              <div className="px-3 py-2 rounded-xl bg-white/10 text-sm font-semibold">Pagamento na retirada</div>
+              <div className="px-3 py-2 rounded-xl bg-white/10 text-sm font-semibold">Programe pelo WhatsApp</div>
+            </div>
           </div>
         </div>
       </header>
 
-      <main className="max-w-lg mx-auto p-4">
+      <main className="max-w-4xl mx-auto px-4 -mt-8 space-y-6">
         {view === 'login' && (
-          <form onSubmit={handleLogin} className="bg-white rounded-xl shadow-sm p-6 space-y-4">
-            <div>
-              <h2 className="text-lg font-bold text-gray-800">Acesso do administrador</h2>
-              <p className="text-sm text-gray-500">Use usuário e senha definidos no banco (PGUSER/PGPASSWORD).</p>
+          <form onSubmit={handleLogin} className="bg-white rounded-2xl shadow-lg p-6 space-y-4 border border-gray-100">
+            <div className="flex items-center gap-2 text-red-600 font-bold">
+              <User size={18} />
+              <h2 className="text-lg">Acesso do administrador</h2>
             </div>
+            <p className="text-sm text-gray-500">Use usuário e senha definidos no banco (PGUSER/PGPASSWORD).</p>
 
             {loginError && <div className="text-sm text-red-600 bg-red-50 border border-red-100 p-3 rounded-lg">{loginError}</div>}
 
@@ -327,7 +346,7 @@ function App() {
                 type="text"
                 value={loginForm.username}
                 onChange={(e) => setLoginForm((prev) => ({ ...prev, username: e.target.value }))}
-                className="w-full border rounded-lg p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
+                className="w-full border border-gray-200 rounded-lg p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
                 placeholder="postgres"
               />
             </div>
@@ -341,7 +360,7 @@ function App() {
                 type="password"
                 value={loginForm.password}
                 onChange={(e) => setLoginForm((prev) => ({ ...prev, password: e.target.value }))}
-                className="w-full border rounded-lg p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
+                className="w-full border border-gray-200 rounded-lg p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
                 placeholder="senha do banco"
               />
             </div>
@@ -349,14 +368,14 @@ function App() {
             <div className="flex gap-3">
               <button
                 type="submit"
-                className="flex-1 bg-red-600 text-white py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors"
+                className="flex-1 bg-red-600 text-white py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors shadow"
               >
                 Entrar
               </button>
               <button
                 type="button"
                 onClick={() => setView('menu')}
-                className="flex-1 border border-gray-300 text-gray-700 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
+                className="flex-1 border border-gray-200 text-gray-700 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
               >
                 Cancelar
               </button>
@@ -391,7 +410,7 @@ function App() {
       </main>
 
       {view === 'menu' && Object.keys(cart).length > 0 && (
-        <div className="fixed bottom-6 left-6 right-6 z-40 max-w-lg mx-auto">
+        <div className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 z-40 max-w-4xl mx-auto">
           <button
             onClick={() => setView('cart')}
             className="w-full bg-gray-900 text-white p-4 rounded-2xl shadow-2xl flex justify-between items-center transform hover:scale-[1.02] transition-all"
diff --git a/src/components/Admin/GrillQueue.jsx b/src/components/Admin/GrillQueue.jsx
index 281f6bc8..ee2a5c1c 100644
--- a/src/components/Admin/GrillQueue.jsx
+++ b/src/components/Admin/GrillQueue.jsx
@@ -7,10 +7,18 @@ export const GrillQueue = () => {
   const [queue, setQueue] = useState([]);
   const [loading, setLoading] = useState(false);
 
+  const getOrderTimestamp = (order) => {
+    if (order.createdAt?.seconds) return order.createdAt.seconds * 1000;
+    const time = order.createdAt || order.timestamp || order.dateString;
+    const parsed = time ? new Date(time).getTime() : 0;
+    return Number.isNaN(parsed) ? 0 : parsed;
+  };
+
   const loadQueue = async () => {
     setLoading(true);
     const data = await orderService.fetchQueue();
-    setQueue(data);
+    const orderedQueue = data.sort((a, b) => getOrderTimestamp(a) - getOrderTimestamp(b));
+    setQueue(orderedQueue);
     setLoading(false);
   };
 
@@ -43,7 +51,9 @@ export const GrillQueue = () => {
           <div key={order.id} className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
             <div className="flex justify-between items-start">
               <div>
-                <p className="text-sm text-gray-500">{formatDateTime(order.createdAt)}</p>
+                <p className="text-xs text-gray-500 flex items-center gap-1">
+                  <Clock size={14} className="text-yellow-600" /> Recebido em {formatDateTime(order.createdAt) || '---'}
+                </p>
                 <h3 className="text-lg font-bold text-gray-800">{order.name || 'Cliente'}</h3>
                 <p className="text-xs text-gray-500 uppercase">{order.type}</p>
               </div>
diff --git a/src/components/Client/MenuView.jsx b/src/components/Client/MenuView.jsx
index 6c00a907..13e06a07 100644
--- a/src/components/Client/MenuView.jsx
+++ b/src/components/Client/MenuView.jsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Plus, Minus, Image as ImageIcon, SlidersHorizontal } from 'lucide-react';
+import { Plus, Minus, CupSoda, Beef, Martini, SlidersHorizontal } from 'lucide-react';
 import { formatCurrency } from '../../utils/format';
 
 export const MenuView = ({ products, cart, onUpdateCart, onProceed }) => {
@@ -20,17 +20,20 @@ export const MenuView = ({ products, cart, onUpdateCart, onProceed }) => {
 
   const sortedProducts = useMemo(() => {
     const espetos = [];
+    const bebidas = [];
     const others = [];
 
     products.forEach((item) => {
       if (item.category?.toLowerCase().includes('espeto')) {
         espetos.push(item);
+      } else if (item.category?.toLowerCase().includes('bebida')) {
+        bebidas.push(item);
       } else {
         others.push(item);
       }
     });
 
-    return [...espetos, ...others];
+    return [...espetos, ...bebidas, ...others];
   }, [products]);
 
   const filteredProducts = useMemo(() => {
@@ -49,20 +52,50 @@ export const MenuView = ({ products, cart, onUpdateCart, onProceed }) => {
     );
   }, [selectedCategory, sortedProducts]);
 
+  const groupedProducts = useMemo(() => {
+    const groups = new Map();
+    filteredProducts.forEach((item) => {
+      const label = item.category
+        ? item.category.charAt(0).toUpperCase() + item.category.slice(1)
+        : 'Outros';
+      if (!groups.has(label)) {
+        groups.set(label, []);
+      }
+      groups.get(label).push(item);
+    });
+    return Array.from(groups.entries());
+  }, [filteredProducts]);
+
+  const groupIcon = (category) => {
+    if (category.toLowerCase().includes('espeto')) return <Beef size={18} />;
+    if (category.toLowerCase().includes('bebida')) return <Martini size={18} />;
+    return <CupSoda size={18} />;
+  };
+
   return (
-    <div className="animate-in fade-in space-y-4">
-      <div className="flex items-center justify-between gap-2 overflow-x-auto pb-3 no-scrollbar">
-        <div className="flex gap-2">
+    <div className="animate-in fade-in space-y-5">
+      <div className="bg-white rounded-2xl shadow-sm border border-red-100 p-4">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <p className="text-xs text-red-500 font-semibold uppercase">Cardápio</p>
+            <h2 className="text-lg font-black text-gray-800">Escolha seus favoritos</h2>
+          </div>
+          <div className="flex items-center gap-1 text-xs text-gray-400">
+            <SlidersHorizontal size={16} />
+            Filtros
+          </div>
+        </div>
+        <div className="mt-3 flex items-center gap-2 overflow-x-auto no-scrollbar pb-1">
           {categories.map((category) => {
             const isActive = category === selectedCategory;
             return (
               <button
                 key={category}
                 onClick={() => setSelectedCategory(category)}
-                className={`px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-colors ${
+                className={`px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-colors border ${
                   isActive
-                    ? 'bg-red-600 text-white shadow-md shadow-red-200'
-                    : 'bg-white text-gray-600 border border-gray-200 hover:border-gray-300'
+                    ? 'bg-red-600 text-white border-red-600 shadow-md shadow-red-200'
+                    : 'bg-red-50 text-red-700 border-red-100 hover:border-red-200'
                 }`}
               >
                 {category}
@@ -70,81 +103,75 @@ export const MenuView = ({ products, cart, onUpdateCart, onProceed }) => {
             );
           })}
         </div>
-        <div className="flex items-center gap-1 text-xs text-gray-400">
-          <SlidersHorizontal size={16} />
-          Filtros
-        </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        {filteredProducts.map((item) => (
-          <div
-            key={item.id}
-            className="bg-white p-3 rounded-xl shadow-sm border border-gray-100 flex gap-3 transition-all active:scale-[0.99] hover:shadow-md"
-          >
-            <div className="w-24 h-24 bg-gray-100 rounded-lg flex-shrink-0 overflow-hidden">
-              {item.imageUrl ? (
-                <img src={item.imageUrl} alt={item.name} className="w-full h-full object-cover" />
-              ) : (
-                <div className="w-full h-full flex items-center justify-center text-gray-300">
-                  <ImageIcon size={24} />
-                </div>
-              )}
+      <div className="space-y-4">
+        {groupedProducts.map(([category, items]) => (
+          <section key={category} className="space-y-2">
+            <div className="flex items-center gap-2 text-red-700 font-bold text-lg">
+              <span className="w-8 h-8 rounded-full bg-red-50 text-red-600 flex items-center justify-center">
+                {groupIcon(category)}
+              </span>
+              {category}
             </div>
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm divide-y">
+              {items.map((item) => (
+                <div key={item.id} className="flex items-center gap-3 p-3">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-gray-900 text-base">{item.name}</h3>
+                      {item.category && (
+                        <span className="text-[10px] px-2 py-1 rounded-full bg-gray-100 text-gray-500 uppercase">
+                          {item.category}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-500 mt-1 line-clamp-2">{item.desc || 'Feito na brasa na hora para você.'}</p>
+                  </div>
 
-            <div className="flex-1 flex flex-col justify-between">
-              <div>
-                <div className="flex items-center justify-between gap-2">
-                  <h3 className="font-bold text-gray-800 line-clamp-1">{item.name}</h3>
-                  {item.category && (
-                    <span className="text-[10px] uppercase tracking-wide font-bold text-red-500 bg-red-50 px-2 py-1 rounded-full">
-                      {item.category}
-                    </span>
-                  )}
-                </div>
-                <p className="text-xs text-gray-500 mt-1 line-clamp-2 leading-relaxed">{item.desc}</p>
-              </div>
-              <div className="flex justify-between items-end mt-2 gap-2">
-                <span className="font-bold text-gray-900 text-lg">{formatCurrency(item.price)}</span>
-
-                {cart[item.id] ? (
-                  <div className="flex items-center bg-gray-100 rounded-lg p-1 gap-2 shadow-inner">
-                    <button
-                      onClick={() => onUpdateCart(item, -1)}
-                      className="w-7 h-7 flex items-center justify-center bg-white rounded text-red-600 shadow-sm"
-                    >
-                      <Minus size={14} />
-                    </button>
-                    <span className="font-bold text-sm min-w-[20px] text-center">{cart[item.id].qty}</span>
-                    <button
-                      onClick={() => onUpdateCart(item, 1)}
-                      className="w-7 h-7 flex items-center justify-center bg-green-600 rounded text-white shadow-sm"
-                    >
-                      <Plus size={14} />
-                    </button>
+                  <div className="flex flex-col items-end gap-2 min-w-[120px]">
+                    <span className="text-sm font-extrabold text-red-600">{formatCurrency(item.price)}</span>
+                    {cart[item.id] ? (
+                      <div className="flex items-center gap-2 bg-red-50 rounded-full px-2 py-1 border border-red-100">
+                        <button
+                          onClick={() => onUpdateCart(item, -1)}
+                          className="w-8 h-8 flex items-center justify-center rounded-full bg-white text-red-600 border border-red-200"
+                        >
+                          <Minus size={14} />
+                        </button>
+                        <span className="font-bold text-sm min-w-[20px] text-center">{cart[item.id].qty}</span>
+                        <button
+                          onClick={() => onUpdateCart(item, 1)}
+                          className="w-8 h-8 flex items-center justify-center rounded-full bg-red-600 text-white shadow"
+                        >
+                          <Plus size={14} />
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => onUpdateCart(item, 1)}
+                        className="w-10 h-10 rounded-full bg-red-600 text-white flex items-center justify-center shadow-md hover:bg-red-700 transition"
+                        aria-label={`Adicionar ${item.name}`}
+                      >
+                        <Plus size={18} />
+                      </button>
+                    )}
                   </div>
-                ) : (
-                  <button
-                    onClick={() => onUpdateCart(item, 1)}
-                    className="bg-red-50 text-red-600 px-3 py-1.5 rounded-lg text-sm font-bold hover:bg-red-100 transition-colors w-full text-center"
-                  >
-                    Adicionar
-                  </button>
-                )}
-              </div>
+                </div>
+              ))}
             </div>
-          </div>
+          </section>
         ))}
       </div>
 
       {Object.keys(cart).length > 0 && (
-        <div className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 z-40 max-w-xl mx-auto">
+        <div className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 z-40 max-w-4xl mx-auto">
           <button
             onClick={onProceed}
-            className="w-full bg-gray-900 text-white p-4 rounded-2xl shadow-2xl flex justify-between items-center transform hover:scale-[1.02] transition-all"
+            className="w-full bg-red-600 text-white p-4 rounded-2xl shadow-xl flex justify-between items-center transform hover:scale-[1.02] transition-all"
           >
             <div className="flex items-center gap-3">
-              <span className="bg-red-600 px-3 py-1 rounded-lg text-sm font-bold">
+              <span className="bg-white/20 px-3 py-1 rounded-lg text-sm font-bold">
                 {Object.values(cart).reduce((acc, item) => acc + item.qty, 0)}
               </span>
               <span className="font-bold">Ver sacola</span>