FIX: white page, images product, free button on tables, return on commands

src/lib/component/Commands.svelte

@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
 	import save_icon from '$lib/assets/save_icon.svg';
+	import arrow_back from '$lib/assets/arrow_back.svg';
 
 	let token = null;
 	let companyId = null;
@@ -111,8 +112,7 @@
 		fetch('https://dev2.mixtech.dev.br/order/delete', requestOptions)
 			.then((response) => response.json())
 			.then((result) => {
-				(console.log('Pedido cancelado com sucesso:', order_Id, companyId, result),
-					location.reload());
+				(console.log('Pedido cancelado com sucesso:', order_Id, companyId, result), fetchOrders());
 			})
 			.catch((error) => console.error('Erro ao cancelar comanda:', error));
 	}
@@ -146,9 +146,16 @@
 	});
 </script>
 
+<div class="mb-6 flex w-full items-center">
+	<button
+		on:click={() => goto('/dashboard/tables')}
+		class="mr-4 rounded-lg bg-gray-800 p-2 hover:bg-gray-700"
+	>
+		<img src={arrow_back} alt="Voltar" class="h-5 w-5" />
+	</button>
+</div>
 <div class="container mx-auto w-full rounded-md bg-gray-800 p-4">
 	<h1 class="mb-6 text-center text-2xl font-bold">Comandas</h1>
-
 	<div
 		class="grid grid-cols-2 justify-items-center gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
 	>

src/lib/component/Mananger.svelte

@@ -68,7 +68,7 @@
 			if (result.status === 'ok') {
 				console.log('Usuário criado com sucesso!');
 				resetUserForm();
-				location.reload();
+				fetchUsers();
 			} else {
 				console.error('Erro ao criar usuário:', result.msg || result);
 			}
@@ -111,7 +111,7 @@
 		}
 	}
 
-	onMount(() => {
+	function fetchUsers() {
 		const token = localStorage.getItem('token');
 		const company = parseInt(localStorage.getItem('company'), 10);
 
@@ -133,6 +133,10 @@
 				}));
 			})
 			.catch((error) => console.error('Erro ao buscar usuários:', error));
+	}
+
+	onMount(() => {
+		fetchUsers();
 	});
 </script>
 

src/lib/component/Product.svelte

@@ -124,7 +124,7 @@
 					products = [...products, newProduct];
 					console.log('Produto criado com sucesso!');
 					resetProductForm();
-					location.reload();
+					fetchAllItems();
 				} else {
 					console.error('Erro ao criar produto:', res.msg);
 				}
@@ -218,7 +218,7 @@
 					console.log('Categoria criada com sucesso');
 					newCategoryName = '';
 					isAddingCategory = false;
-					location.reload();
+					fetchAllItems();
 				} else {
 					console.error('Erro ao criar categoria:', res.msg);
 				}
@@ -286,7 +286,7 @@
 			});
 	}
 
-	onMount(() => {
+	function fetchAllItems() {
 		const requestOptions = {
 			method: 'POST',
 			headers: {
@@ -332,6 +332,10 @@
 			.catch((error) => {
 				console.error('Erro ao buscar dados:', error);
 			});
+	}
+
+	onMount(() => {
+		fetchAllItems();
 	});
 </script>
 
@@ -557,13 +561,13 @@
 												<div class="flex justify-center gap-4">
 													<button
 														on:click={() => handleEditProduct(product)}
-														class="rounded-lg p-1.5 text-blue-400 hover:bg-blue-900/20"
+														class="rounded-lg text-blue-400 hover:bg-blue-900/20"
 													>
 														<img src={edit_icon} alt="Editar" class="h-4 w-4" />
 													</button>
 													<button
 														on:click|stopPropagation={() => handleDeleteProduct(product.name)}
-														class="rounded-lg p-1.5 text-red-400 hover:bg-red-900/20"
+														class="rounded-lg text-red-400 hover:bg-red-900/20"
 													>
 														<img src={trash_icon} alt="Deletar" class="h-4 w-4" />
 													</button>

src/lib/component/Tables.svelte

@@ -6,6 +6,8 @@
 	let token = null;
 	let company = null;
 	let flag = null;
+	let orders = {};
+	let tableHasOrders = {};
 
 	if (browser) {
 		token = localStorage.getItem('token');
@@ -26,7 +28,6 @@
 	};
 
 	let tables = [];
-	let orders = {};
 	let newTableNumber = '';
 	let showConfirmDelete = false;
 	let tableToDelete = null;
@@ -52,6 +53,7 @@
 		if (result.status !== 'ok') {
 			throw new Error('Falha ao atualizar status: ' + result.msg);
 		}
+		fetchTables();
 	};
 
 	const startOrder = async (tableId, tableNumber) => {
@@ -68,8 +70,6 @@
 				return 'bg-green-600 hover:bg-green-700';
 			case 'OCCUPIED':
 				return 'bg-yellow-500 hover:bg-yellow-600';
-			case 'ALERT':
-				return 'bg-red-600 hover:bg-red-700';
 			default:
 				return 'bg-gray-700 hover:bg-gray-800';
 		}
@@ -81,8 +81,6 @@
 				return 'Livre';
 			case 'OCCUPIED':
 				return 'Ocupada';
-			case 'ALERT':
-				return 'Alerta';
 			default:
 				return 'Desconhecido';
 		}
@@ -142,7 +140,7 @@
 			console.error(error);
 		}
 	};
-
+	let showLiberarMesa = {};
 	const fetchTables = async () => {
 		const requestOptions = {
 			method: 'POST',
@@ -156,19 +154,67 @@
 		try {
 			const response = await fetch('https://dev2.mixtech.dev.br/table/get', requestOptions);
 			const result = await response.json();
+
 			if (result.status === 'ok') {
 				tables = result.data.map((d) => ({
 					id: d.table_id,
 					number: d.table_number,
 					status: statusMap[d.status_id] || 'Desconhecido',
+					statusId: d.status_id,
 					startTime: statusMap[d.status_id] === 'FREE' ? null : new Date().toISOString()
 				}));
+
+				// Inicializa orders, para evitar undefined
 				tables.forEach((t) => {
 					if (t.status !== 'FREE' && !orders[t.id]) {
 						orders[t.id] = { items: [], totalAmount: 0 };
 					}
 				});
+
 				orders = { ...orders };
+
+				await Promise.all(
+					tables.map(async (t) => {
+						try {
+							const orderResp = await fetch('https://dev2.mixtech.dev.br/order/get', {
+								method: 'POST',
+								headers: {
+									'Content-Type': 'application/json',
+									Authorization: `Bearer ${token}`
+								},
+								body: JSON.stringify({
+									company_id: company,
+									table_id: t.id
+								})
+							});
+
+							const text = await orderResp.text();
+
+							// Se resposta vazia ou inválida, considerar sem pedidos
+							if (!text.trim()) {
+								showLiberarMesa[t.id] = t.statusId !== 1; // só liberar se status diferente de 1
+								return;
+							}
+
+							let orderResult;
+							try {
+								orderResult = JSON.parse(text);
+							} catch {
+								showLiberarMesa[t.id] = t.statusId !== 1;
+								return;
+							}
+
+							// Lógica para mostrar botão liberar mesa:
+							// Mesa ocupada (statusId != 1) e sem pedidos (data vazio)
+							showLiberarMesa[t.id] =
+								t.statusId !== 1 && (orderResult.status !== 'ok' || orderResult.data.length === 0);
+						} catch (e) {
+							console.error('Erro ao checar pedidos da mesa', t.id, e);
+							showLiberarMesa[t.id] = false;
+						}
+						showLiberarMesa = { ...showLiberarMesa };
+					})
+				);
 			} else {
 				console.error('Erro ao buscar mesas:', result.msg);
 			}
@@ -176,7 +222,6 @@
 			console.error(error);
 		}
 	};
-
 	const createTable = async () => {
 		if (!newTableNumber) return;
 
@@ -236,7 +281,7 @@
 		{/if}
 
 		<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-			{#each tables as table}
+			{#each tables as table, i}
 				{@const order = getTableOrder(table.id)}
 
 				<div
@@ -250,7 +295,7 @@
 					<div class="p-4">
 						{#if table.status !== 'FREE' && order}
 							<button
-								on:click={() => handleTableClick(table.id, table.number)}
+								on:click={() => handleTableClick(table.id, table.number, i)}
 								class="mt-2 flex w-full items-center justify-center rounded bg-indigo-600 px-3 py-2 text-sm transition-colors hover:bg-indigo-700"
 							>
 								Detalhes Mesa
@@ -258,7 +303,7 @@
 						{:else}
 							<div class="flex flex-col items-center justify-center space-y-2 py-4">
 								<button
-									on:click={() => handleTableClick(table.id, table.number)}
+									on:click={() => handleTableClick(table.id, table.number, i)}
 									class="flex items-center justify-center rounded bg-emerald-600 px-4 py-2 transition-colors hover:bg-emerald-700"
 								>
 									Abrir Mesa
@@ -273,6 +318,15 @@
 								{/if}
 							</div>
 						{/if}
+
+						{#if showLiberarMesa[table.id]}
+							<button
+								on:click={() => updateTableStatus(table.number, 'FREE')}
+								class="mt-2 flex w-full items-center justify-center rounded bg-emerald-600 px-3 py-2 text-sm transition-colors hover:bg-emerald-700"
+							>
+								Liberar Mesa
+							</button>
+						{/if}
 					</div>
 				</div>
 			{/each}