counter/src/lib/component/OrderCard.svelte

<script>
	export let pedido;
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();

	function marcarItemComoPronto(id) {
		dispatch('marcarPronto', [id]);
	}

	function marcarTodosComoProntos() {
		const ids = pedido.items.map((item) => item.id);
		dispatch('marcarPronto', ids);
	}
</script>

<div class="flex flex-col rounded-md bg-gray-700 p-4 text-white shadow-md">
	<div class="flex justify-between">
		<div>
			<div class="mb-2 font-semibold flex"> Mesa <p class="ml-2 text-yellow-400 font-bold">{pedido.mesa}</p></div>
			<div class="mb-2 font-semibold flex"> Comanda <p class="ml-2 text-yellow-400 font-bold">{pedido.comanda_nome}</p></div>
			<div class="mb-2 font-semibold flex"> Garçom <p class="ml-2 text-yellow-400 font-bold">{pedido.user_name}</p></div>

			<strong>Itens:</strong>
			<ul class="list-inside list-disc text-lg">
				{#each pedido.items as item}
					<li class="mb-1 flex items-center justify-between">
						<div>
							{item.nome}
							{#if item.observacao}
								<span class="italic text-yellow-300"> — {item.observacao}</span>
							{/if}
						</div>
						<button
							class="ml-4 mt-2 h-10 rounded-md bg-blue-600 px-4 py-1 text-sm font-bold hover:bg-blue-500"
							on:click={() => marcarItemComoPronto(item.id)}
						>
							Item pronto
						</button>
					</li>
				{/each}
			</ul>
		</div>

		<div class="flex items-center">
		</div>
	</div>
</div>