counter/src/lib/component/Kitchen.svelte

<script>
  import { onMount } from 'svelte';
  import OrderCard from '$lib/component/OrderCard.svelte';
  import HistoricModal from '$lib/component/HistoricModal.svelte';

  let pedidos = [];

  let mostrarHistorico = false;

  const abrirHistorico = () => {
    mostrarHistorico = true;
  };

  const fecharHistorico = () => {
    mostrarHistorico = false;
  };

  // Marca pedido como concluído (vai para o histórico)
  function handlePedidoPronto(event) {
    const pedidoAtualizado = event.detail;
    pedidos = pedidos.map(pedido =>
      pedido.mesa === pedidoAtualizado.mesa
        ? { ...pedido, status: 'concluido' }
        : pedido
    );
  }

  // Volta pedido do histórico para andamento (volta pra lista)
  function handleVoltarAndamento(event) {
    const pedidoAlvo = event.detail;
    pedidos = pedidos.map(pedido =>
      pedido.mesa === pedidoAlvo.mesa
        ? { ...pedido, status: 'andamento' }
        : pedido
    );
  }

  // ⚡ Carrega pedidos do "backend"
  onMount(async () => {
    try {
      const response = await fetch('https://counter.mixtech.dev.br/dashboard/kitchen');
      const data = await response.json();
      pedidos = data;
    } catch (error) {
      console.error('Erro ao carregar pedidos:', error);

      // Fallback local caso falhe
      pedidos = [
        { mesa: '01', itens: ['Coca', 'X-Burguer'], status: 'pendente' },
        { mesa: '02', itens: ['Água', 'Batata'], status: 'andamento' },
        { mesa: '03', itens: ['Cerveja', 'Sopa'], status: 'pendente' },
        { mesa: '04', itens: ['Suco', 'Lasanha'], status: 'concluido' }
      ];
    }
  });

  // Lista apenas pedidos não concluídos
  $: pedidosAtivos = pedidos.filter(p => p.status !== 'concluido');

  // Lista de pedidos concluídos para o histórico
  $: pedidosConcluidos = pedidos.filter(p => p.status === 'concluido');
</script>

<main class="p-4 bg-gray-800 rounded-md text-white relative">
  <!-- Botão para abrir histórico -->
  <div class="absolute top-4 right-4">
    <button class="text-sm underline" on:click={abrirHistorico}>
      Ver histórico
    </button>
  </div>

  <!-- Lista de pedidos ativos -->
  <div class="mt-10 space-y-4">
    {#each pedidosAtivos as pedido (pedido.mesa)}
      <OrderCard {pedido} on:pedidoPronto={handlePedidoPronto} />
    {/each}
  </div>

  <!-- Modal de histórico -->
  {#if mostrarHistorico}
    <HistoricModal 
      pedidos={pedidosConcluidos}
      on:close={fecharHistorico}
      on:voltarAndamento={handleVoltarAndamento}
    />
  {/if}
</main>