"use client"; import { useEffect, useRef, useState } from "react"; import { Check, ChevronDown, Loader2 } from "lucide-react"; /** * O botão de status do pedido: o de maior hierarquia no cabeçalho. * * Mostra a próxima etapa como ação ("Iniciar produção") e, ao abrir, o menu * com todos os status, o atual marcado. Trocar de status é uma decisão * grande — manda WhatsApp para o cliente — então fica num lugar só, sem * select escondido num cartão lateral. */ export type OpcaoDeStatus = { value: string; label: string }; const PROXIMA: Record = { pending_production: { value: "in_production", label: "Iniciar produção" }, in_production: { value: "finished", label: "Finalizar produção" }, finished: { value: "delivered", label: "Marcar como entregue" }, }; export function BotaoDeStatus({ status, opcoes, pdv, disabled, atualizando, onChange, }: { status: string; opcoes: OpcaoDeStatus[]; pdv: boolean; disabled: boolean; atualizando: boolean; onChange: (status: string) => void | Promise; }) { const [aberto, setAberto] = useState(false); const caixa = useRef(null); useEffect(() => { if (!aberto) return; const fechar = (e: MouseEvent) => { if (caixa.current && !caixa.current.contains(e.target as Node)) setAberto(false); }; const tecla = (e: KeyboardEvent) => { if (e.key === "Escape") setAberto(false); }; document.addEventListener("mousedown", fechar); document.addEventListener("keydown", tecla); return () => { document.removeEventListener("mousedown", fechar); document.removeEventListener("keydown", tecla); }; }, [aberto]); if (pdv) { return ( {status === "canceled" ? "Venda cancelada no PDV" : "Venda concluída no PDV"} ); } const atual = opcoes.find((o) => o.value === status); const proxima = PROXIMA[status]; const concluido = status === "delivered" || status === "canceled"; const escolher = (valor: string) => { setAberto(false); if (valor !== status) void onChange(valor); }; return (

{aberto ? ( ) : null}

); }