add feature to change order status

src/lib/component/HistoricModal.svelte

@@ -0,0 +1,46 @@
+<script>
+  export let pedidos = [];
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  const fechar = () => dispatch('close');
+
+  // Dispara evento para o pedido específico voltar para andamento
+  function voltarParaAndamento(pedido) {
+    dispatch('voltarAndamento', pedido);
+  }
+</script>
+
+<div class="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50">
+  <div class="bg-gray-700 text-white p-6 rounded-md w-96 max-h-[80vh] overflow-auto">
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="font-bold text-lg">Histórico de Pedidos</h2>
+      <button on:click={fechar} class="text-red-600 text-xl font-bold" aria-label="Fechar modal">✖</button>
+    </div>
+
+    {#each pedidos as pedido (pedido.mesa)}
+      <div class="mb-4 border-b border-gray-300 pb-2">
+        <p><strong>Mesa:</strong> {pedido.mesa}</p>
+        <p><strong>Status:</strong> {pedido.status}</p>
+        <div class="mt-2">
+          <strong>Itens:</strong>
+          <ul class="list-disc list-inside">
+            {#each pedido.itens as item}
+              <li>{item}</li>
+            {/each}
+          </ul>
+        </div>
+        <!-- Botão voltar andamento individual -->
+        {#if pedido.status !== 'andamento'}
+          <button
+            class="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded transition"
+            on:click={() => voltarParaAndamento(pedido)}
+          >
+            Voltar para andamento
+          </button>
+        {/if}
+      </div>
+    {/each}
+
+  </div>
+</div>

src/lib/component/Kitchen.svelte

@@ -0,0 +1,87 @@
+<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://dev2.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 min-h-screen 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>

src/lib/component/OrderCard.svelte

@@ -0,0 +1,41 @@
+<script>
+  export let pedido;
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  function marcarComoPronto() {
+    // Atualiza status local (caso precise refletir no próprio componente)
+    pedido.status = 'pronto';
+
+    // Emite evento para o componente pai
+    dispatch('pedidoPronto', pedido);
+  }
+</script>
+
+<div class="bg-gray-700 p-4 rounded-md shadow-md text-white flex justify-between">
+  <div class="flex flex-col">
+    <div class="font-semibold mb-2">
+      Mesa {pedido.mesa}
+    </div>
+
+    <div>
+      <strong>Itens:</strong>
+      <ul class="list-disc list-inside">
+        {#each pedido.itens as item}
+          <li>{item}</li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-end gap-2 justify-between">
+    <button
+      class="bg-green-600 px-4 py-2 rounded-xl text-sm hover:bg-green-500"
+      style="min-height: 100px;"
+      on:click={marcarComoPronto}
+    >
+      Pedido pronto
+    </button>
+  </div>
+</div>