Browse Source

feat: start the kitchen screen

Bruno 4 tháng trước cách đây
mục cha
commit
4283ad1096

+ 32 - 0
src/lib/component/HistoricModal.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let pedidoSelecionado;
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  const fechar = () => dispatch('close');
+</script>
+
+<div class="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50">
+  <div class="bg-white text-black p-6 rounded-md w-80">
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="font-bold text-lg">Detalhes do Pedido</h2>
+      <button on:click={fechar} class="text-red-600">✖</button>
+    </div>
+
+    <p><strong>Mesa:</strong> {pedidoSelecionado.mesa}</p>
+    <p><strong>Status:</strong> {pedidoSelecionado.status}</p>
+
+    <div class="mt-4">
+      <strong>Itens:</strong>
+      <ul class="list-disc list-inside">
+        {#each pedidoSelecionado.itens as item}
+          <li>{item}</li>
+        {/each}
+      </ul>
+    </div>
+
+    <button class="mt-4 bg-blue-500 text-white px-3 py-1 rounded" on:click={fechar}>
+      Voltar para andamento
+    </button>
+  </div>
+</div>

+ 34 - 0
src/lib/component/Kitchen.svelte

@@ -0,0 +1,34 @@
+<script>
+  import OrderCard from '$lib/component/OrderCard.svelte';
+  import HistoricModal from '$lib/component/HistoricModal.svelte';
+
+  let pedidos = [
+    { mesa: '01', itens: ['Coca', 'X-Burguer'], status: 'pendente' },
+    { mesa: '02', itens: ['Água', 'Batata'], status: 'pendente' }
+  ];
+
+  let mostrarHistorico = false;
+  let pedidoSelecionado = null;
+
+  const abrirHistorico = (pedido) => {
+    pedidoSelecionado = pedido;
+    mostrarHistorico = true;
+  };
+
+  const fecharHistorico = () => {
+    mostrarHistorico = false;
+  };
+</script>
+
+<main class="p-4 bg-gray-800 min-h-screen text-white">
+  
+  <div class="mt-4 space-y-4">
+    {#each pedidos as pedido}
+      <OrderCard {pedido} on:verHistorico={() => abrirHistorico(pedido)} />
+    {/each}
+  </div>
+
+  {#if mostrarHistorico}
+    <HistoricModal {pedidoSelecionado} on:close={fecharHistorico} />
+  {/if}
+</main>

+ 37 - 0
src/lib/component/OrderCard.svelte

@@ -0,0 +1,37 @@
+<script>
+  export let pedido;
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  function marcarComoPronto() {
+    pedido.status = 'pronto';
+  }
+
+  function verHistorico() {
+    dispatch('verHistorico');
+  }
+</script>
+
+<div class="bg-gray-700 p-4 rounded-md shadow-md">
+  <div class="flex justify-between mb-2">
+    <div class="font-semibold">Mesa {pedido.mesa}</div>
+    <button class="text-sm underline" on:click={verHistorico}>Ver histórico</button>
+  </div>
+
+  <div class="mb-2">
+    <strong>Itens:</strong>
+    <ul class="list-disc list-inside">
+      {#each pedido.itens as item}
+        <li>{item}</li>
+      {/each}
+    </ul>
+  </div>
+
+  <button
+    class="bg-green-600 px-3 py-1 rounded text-sm hover:bg-green-500"
+    on:click={marcarComoPronto}
+  >
+    Pedido pronto
+  </button>
+</div>

+ 3 - 3
src/lib/layout/SideBar.svelte

@@ -24,16 +24,16 @@
 				{ name: 'Mesas', path: '/dashboard/tables', icon: 'table_bar' },
 				{ name: 'Produtos', path: '/dashboard/products', icon: 'product_sell' },
 				{ name: 'Relatórios', path: '/dashboard/reports', icon: 'report_icon' },
-				{ name: 'Cozinha', path: '/dashboard/cozinha', icon: 'kitchen_icon' },
+				{ name: 'Cozinha', path: '/dashboard/kitchen', icon: 'kitchen_icon' },
 				{ name: 'Gerenciar Usuários', path: '/dashboard/mananger', icon: 'mananger' }
 			];
 		} else if (flag == 'kitchen') {
-			navItems = [{ name: 'Cozinha', path: '/dashboard/cozinha', icon: 'kitchen_icon' }];
+			navItems = [{ name: 'Cozinha', path: '/dashboard/kitchen', icon: 'kitchen_icon' }];
 		} else if (flag == 'cashier') {
 			navItems = [
 				{ name: 'Mesas', path: '/dashboard/tables', icon: 'table_bar' },
 				{ name: 'Relatórios', path: '/dashboard/reports', icon: 'report_icon' },
-				{ name: 'Cozinha', path: '/dashboard/cozinha', icon: 'kitchen_icon' }
+				{ name: 'Cozinha', path: '/dashboard/kitchen', icon: 'kitchen_icon' }
 			];
 		}
 	});

+ 11 - 0
src/routes/dashboard/Kitchen/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+  import SideBar from '$lib/layout/SideBar.svelte';
+  import Kitchen from '$lib/component/Kitchen.svelte';
+  import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
+</script>
+
+<DashBoardGuard>
+  <SideBar>
+    <Kitchen />
+  </SideBar>
+</DashBoardGuard>

+ 11 - 0
src/routes/dashboard/kitchen/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+  import SideBar from '$lib/layout/SideBar.svelte';
+  import Kitchen from '$lib/component/Kitchen.svelte';
+  import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
+</script>
+
+<DashBoardGuard>
+  <SideBar>
+    <Kitchen />
+  </SideBar>
+</DashBoardGuard>