cancel aticvate

src/lib/component/Commands.svelte

@@ -9,6 +9,7 @@
 	let userId = null;
 	let tableId = null;
 	let flag = null;
+	let orderToCancel = null;
 
 	if (browser) {
 		token = localStorage.getItem('token');
@@ -22,6 +23,7 @@
 	let isCreatingOrder = false;
 	let customerName = '';
 	let customerPhone = '';
+	let showConfirmCancel = false;
 
 	const fetchOrders = async () => {
 		if (!companyId || !tableId) return;
@@ -136,7 +138,10 @@
 					{#if flag == 'admin'}
 						<button
 							class="w-full rounded bg-red-600 py-2 hover:bg-red-700"
-							on:click={() => openOrder(order.id)}
+							on:click={() => {
+								orderToCancel = order.name;
+								showConfirmCancel = true;
+							}}
 						>
 							Cancelar
 						</button>
@@ -195,3 +200,25 @@
 		</div>
 	</div>
 {/if}
+{#if showConfirmCancel}
+	<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+		<div class="w-full max-w-sm rounded-lg bg-gray-800 p-6">
+			<h2 class="mb-4 text-lg font-bold">Confirmar Exclusão</h2>
+			<p class="mb-4">Deseja realmente cancelar a comanda {orderToCancel}?</p>
+			<div class="flex justify-end gap-2">
+				<button
+					on:click={() => (showConfirmCancel = false)}
+					class="rounded bg-gray-600 px-4 py-2 text-white transition-colors hover:bg-gray-700"
+				>
+					Cancelar
+				</button>
+				<button
+					on:click={deleteTable}
+					class="rounded bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700"
+				>
+					Excluir
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}