|
|
@@ -0,0 +1,297 @@
|
|
|
+<script>
|
|
|
+ import { onMount } from 'svelte';
|
|
|
+ import { goto } from '$app/navigation';
|
|
|
+ import { page } from '$app/stores';
|
|
|
+
|
|
|
+ let selectedCategory = null;
|
|
|
+ let isPaymentModalOpen = false;
|
|
|
+ let selectedPaymentMethod = null;
|
|
|
+
|
|
|
+ let tableIdNum = 0;
|
|
|
+ let currentTable = undefined;
|
|
|
+ let currentOrder = undefined;
|
|
|
+ let products = [];
|
|
|
+ let categories = [];
|
|
|
+
|
|
|
+ $: tableIdNum = parseInt($page.params.tableId || '0');
|
|
|
+
|
|
|
+ async function fetchTableAndOrder() {
|
|
|
+ try {
|
|
|
+ const resTable = await fetch(`/api/table/${tableIdNum}`);
|
|
|
+ currentTable = await resTable.json();
|
|
|
+
|
|
|
+ if (currentTable?.orderId) {
|
|
|
+ const resOrder = await fetch(`/api/order/${currentTable.orderId}`);
|
|
|
+ currentOrder = await resOrder.json();
|
|
|
+ } else {
|
|
|
+ currentOrder = undefined;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Erro ao buscar dados da mesa:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function fetchProductsAndCategories() {
|
|
|
+ try {
|
|
|
+ const res = await fetch('/api/products');
|
|
|
+ const data = await res.json();
|
|
|
+ products = data.products;
|
|
|
+ categories = data.categories;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Erro ao buscar produtos:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMount(async () => {
|
|
|
+ await fetchTableAndOrder();
|
|
|
+ await fetchProductsAndCategories();
|
|
|
+ });
|
|
|
+
|
|
|
+ $: if (categories.length > 0 && !selectedCategory) {
|
|
|
+ selectedCategory = categories[0].name;
|
|
|
+ }
|
|
|
+
|
|
|
+ $: if (currentTable && currentTable.status === 'FREE') {
|
|
|
+ console.warn('Mesa n\u00e3o est\u00e1 ocupada ou foi liberada.');
|
|
|
+ goto('/tables');
|
|
|
+ }
|
|
|
+
|
|
|
+ $: filteredProducts = selectedCategory
|
|
|
+ ? products.filter((p) => p.category.name === selectedCategory)
|
|
|
+ : products;
|
|
|
+
|
|
|
+ async function handleAddItem(product) {
|
|
|
+ const payload = { productId: product.id, quantity: 1 };
|
|
|
+ await fetch(`/api/order/${currentTable.orderId}/add-item`, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify(payload)
|
|
|
+ });
|
|
|
+ await fetchTableAndOrder();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function updateItemQuantity(tableId, itemId, newQuantity) {
|
|
|
+ await fetch(`/api/order/${currentTable.orderId}/update-item`, {
|
|
|
+ method: 'PUT',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ itemId, quantity: newQuantity })
|
|
|
+ });
|
|
|
+ await fetchTableAndOrder();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function removeItemFromOrder(tableId, itemId) {
|
|
|
+ await fetch(`/api/order/${currentTable.orderId}/remove-item`, {
|
|
|
+ method: 'DELETE',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ itemId })
|
|
|
+ });
|
|
|
+ await fetchTableAndOrder();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handlePaymentConfirm() {
|
|
|
+ if (!selectedPaymentMethod) {
|
|
|
+ console.warn('Selecione uma forma de pagamento');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ await fetch(`/api/order/${currentTable.orderId}/close`, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ paymentMethod: selectedPaymentMethod })
|
|
|
+ });
|
|
|
+ isPaymentModalOpen = false;
|
|
|
+ goto('/tables');
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- restante do componente permanece o mesmo -->
|
|
|
+
|
|
|
+{#if !currentTable || (currentTable.status !== 'FREE' && !currentOrder)}
|
|
|
+ <div class="py-10 text-center">Carregando...</div>
|
|
|
+{:else}
|
|
|
+ <div class="container mx-auto">
|
|
|
+ <div class="mb-6 flex items-center">
|
|
|
+ <button
|
|
|
+ on:click={() => goto('/tables')}
|
|
|
+ class="mr-4 rounded-lg bg-gray-800 p-2 hover:bg-gray-700"
|
|
|
+ >
|
|
|
+ <!-- <img src="/icons/arrow-left.svg" alt="Voltar" class="w-5 h-5" /> -->
|
|
|
+ </button>
|
|
|
+ <h1 class="text-2xl font-bold">Mesa {tableIdNum}</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
|
+ <div class="overflow-hidden rounded-lg bg-gray-800 shadow-lg lg:col-span-2">
|
|
|
+ <div class="bg-gray-700 p-4">
|
|
|
+ <h2 class="text-lg font-semibold">Adicionar Produtos</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-gray-750 flex overflow-x-auto border-b border-gray-700 p-2">
|
|
|
+ {#each categories as category}
|
|
|
+ <button
|
|
|
+ class="mx-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium {selectedCategory ===
|
|
|
+ category.name
|
|
|
+ ? 'bg-indigo-600 text-white'
|
|
|
+ : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}"
|
|
|
+ on:click={() => (selectedCategory = category.name)}
|
|
|
+ >
|
|
|
+ {category.name}
|
|
|
+ </button>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="grid max-h-[calc(100vh-400px)] grid-cols-2 gap-4 overflow-y-auto p-4 sm:grid-cols-3 md:grid-cols-4"
|
|
|
+ >
|
|
|
+ {#each filteredProducts as product}
|
|
|
+ <button
|
|
|
+ class="hover:bg-gray-650 rounded-lg bg-gray-700 p-4 text-left"
|
|
|
+ on:click={() => handleAddItem(product)}
|
|
|
+ >
|
|
|
+ <div class="flex h-full flex-col">
|
|
|
+ <h3 class="mb-2 line-clamp-2 font-medium">{product.name}</h3>
|
|
|
+ <div class="mt-auto flex items-center justify-between">
|
|
|
+ <span class="font-semibold text-emerald-400">R$ {product.price.toFixed(2)}</span>
|
|
|
+ <!-- <img src="/icons/plus.svg" alt="Adicionar" class="w-5 h-5 text-emerald-400" /> -->
|
|
|
+ </div>
|
|
|
+ {#if product.sendToKitchen}
|
|
|
+ <span class="mt-2 rounded-full bg-yellow-800 px-2 py-0.5 text-xs text-yellow-300"
|
|
|
+ >Cozinha</span
|
|
|
+ >
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="flex h-full flex-col overflow-hidden rounded-lg bg-gray-800 shadow-lg md:h-[calc(100vh-200px)]"
|
|
|
+ >
|
|
|
+ <div class="bg-gray-700 p-4">
|
|
|
+ <h2 class="text-lg font-semibold">Comanda</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 overflow-y-auto p-4">
|
|
|
+ {#if currentOrder?.items.length === 0}
|
|
|
+ <div class="py-6 text-center text-gray-400">
|
|
|
+ <!-- <img src="/icons/shopping-cart.svg" class="w-10 h-10 mx-auto mb-2 opacity-50" alt="Nenhum item" /> -->
|
|
|
+ <p>Nenhum item adicionado</p>
|
|
|
+ </div>
|
|
|
+ {:else}
|
|
|
+ {#each currentOrder.items as item, index}
|
|
|
+ <div class="bg-gray-750 flex items-center justify-between rounded-lg p-3">
|
|
|
+ <div class="flex-1">
|
|
|
+ <h3 class="font-medium">{item.product.name}</h3>
|
|
|
+ <p class="text-sm text-gray-400">
|
|
|
+ R$ {(item.priceAtOrder ?? 0).toFixed(2)} x {item.quantity}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <button
|
|
|
+ on:click={() => updateItemQuantity(tableIdNum, item.id, item.quantity - 1)}
|
|
|
+ class="rounded bg-gray-700 p-1 hover:bg-gray-600"
|
|
|
+ >
|
|
|
+ <!-- <img src="/icons/minus.svg" class="w-4 h-4" alt="Diminuir" /> -->
|
|
|
+ </button>
|
|
|
+ <span class="w-8 text-center">{item.quantity}</span>
|
|
|
+ <button
|
|
|
+ on:click={() => updateItemQuantity(tableIdNum, item.id, item.quantity + 1)}
|
|
|
+ class="rounded bg-gray-700 p-1 hover:bg-gray-600"
|
|
|
+ >
|
|
|
+ <!-- <img src="/icons/plus.svg" class="w-4 h-4" alt="Aumentar" /> -->
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ on:click={() => removeItemFromOrder(tableIdNum, item.id)}
|
|
|
+ class="ml-2 rounded bg-red-700 p-1 hover:bg-red-600"
|
|
|
+ >
|
|
|
+ <!-- <img src="/icons/trash.svg" class="w-4 h-4" alt="Remover" /> -->
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-gray-750 border-t border-gray-700 p-4">
|
|
|
+ <div class="mb-2 flex justify-between">
|
|
|
+ <span class="font-medium">Subtotal:</span>
|
|
|
+ <span>R$ {currentOrder?.totalAmount.toFixed(2)}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button
|
|
|
+ on:click={() => (isPaymentModalOpen = true)}
|
|
|
+ disabled={currentOrder?.items.length === 0}
|
|
|
+ class="flex w-full items-center justify-center rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
|
+ >
|
|
|
+ <!-- <img src="/icons/credit-card.svg" class="w-5 h-5 mr-2" alt="Pagamento" /> -->
|
|
|
+ Fechar Atendimento
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {#if isPaymentModalOpen}
|
|
|
+ <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
|
|
+ <div class="w-full max-w-lg rounded-lg bg-gray-800 p-6 shadow-xl">
|
|
|
+ <h2 class="mb-4 text-xl font-bold">Finalizar Pedido</h2>
|
|
|
+
|
|
|
+ <div class="mb-6">
|
|
|
+ <h3 class="mb-3 text-lg font-medium">Resumo do Pedido</h3>
|
|
|
+ <div class="mb-4 max-h-60 overflow-y-auto sm:max-h-80">
|
|
|
+ {#each currentOrder.items as item, index}
|
|
|
+ <div class="flex justify-between border-b border-gray-700 py-2">
|
|
|
+ <span>{item.quantity}x {item.product.name}</span>
|
|
|
+ <span>R$ {((item.priceAtOrder ?? 0) * item.quantity).toFixed(2)}</span>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between text-lg font-semibold">
|
|
|
+ <span>Total:</span>
|
|
|
+ <span>R$ {currentOrder.totalAmount.toFixed(2)}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3 class="mb-3 text-lg font-medium">Forma de Pagamento</h3>
|
|
|
+ <div class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
|
+ {#each ['CASH', 'PIX', 'DEBIT', 'CREDIT'] as method}
|
|
|
+ <button
|
|
|
+ class="flex flex-col items-center justify-center rounded-lg border-2 p-4 transition-colors {selectedPaymentMethod ===
|
|
|
+ method
|
|
|
+ ? 'border-emerald-500 bg-emerald-900/20'
|
|
|
+ : 'border-gray-700 hover:border-gray-600'}"
|
|
|
+ on:click={() => (selectedPaymentMethod = method)}
|
|
|
+ >
|
|
|
+ <!-- <img src="/icons/{method.toLowerCase()}.svg" class="w-8 h-8 mb-2" alt={method} /> -->
|
|
|
+ <span
|
|
|
+ >{method === 'CASH'
|
|
|
+ ? 'Dinheiro'
|
|
|
+ : method === 'PIX'
|
|
|
+ ? 'Pix'
|
|
|
+ : method === 'DEBIT'
|
|
|
+ ? 'Cart\u00e3o de D\u00e9bito'
|
|
|
+ : 'Cart\u00e3o de Cr\u00e9dito'}</span
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex space-x-3">
|
|
|
+ <button
|
|
|
+ on:click={() => (isPaymentModalOpen = false)}
|
|
|
+ class="flex-1 rounded-lg bg-gray-700 py-3 font-medium hover:bg-gray-600"
|
|
|
+ >
|
|
|
+ Cancelar
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ on:click={handlePaymentConfirm}
|
|
|
+ disabled={!selectedPaymentMethod}
|
|
|
+ class="flex-1 rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
|
+ >
|
|
|
+ Confirmar Pagamento
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+{/if}
|
gdias