Streamline production order operations
This commit is contained in:
Cauê Faleiros
@@ -1,6 +1,6 @@
|
||||
import { Fragment, type FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { type FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useOutletContext } from 'react-router-dom';
|
||||
import { ArrowLeft, CalendarDays, CheckCircle2, ClipboardList, Clock3, Download, PackageCheck, Search } from 'lucide-react';
|
||||
import { ArrowLeft, CheckCircle2, ClipboardList, Clock3, Download, Eye, PackageCheck, PlayCircle, Search, X, XCircle } from 'lucide-react';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import PaginationControls from '../components/PaginationControls';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
@@ -22,9 +22,12 @@ const statusTabs: Array<{ key: ProductionOrderStatusTab; label: string; dotClass
|
||||
{ key: 'canceled', label: 'Cancelada', dotClass: 'bg-zinc-500' }
|
||||
];
|
||||
|
||||
const editableStatusOptions: Array<{ value: ProductionOrderStatusTab; label: string }> = statusTabs
|
||||
.filter(tab => tab.key !== 'all')
|
||||
.map(tab => ({ value: tab.key, label: tab.label }));
|
||||
const editableStatusOptions: Array<{ value: Exclude<ProductionOrderStatusTab, 'all'>; label: string; description: string }> = [
|
||||
{ value: 'open', label: 'Em aberto', description: 'Aguardando o início da produção.' },
|
||||
{ value: 'in_progress', label: 'Em andamento', description: 'A produção já foi iniciada.' },
|
||||
{ value: 'finished', label: 'Finalizada', description: 'A produção desta OP foi concluída.' },
|
||||
{ value: 'canceled', label: 'Cancelada', description: 'Esta OP não seguirá para produção.' }
|
||||
];
|
||||
|
||||
const statusStyles: Record<string, { label: string; className: string; dotClass: string }> = {
|
||||
open: {
|
||||
@@ -63,16 +66,6 @@ const formatQuantity = (value: number) => (
|
||||
}).format(value)
|
||||
);
|
||||
|
||||
const formatOptionalQuantity = (value: number | null) => (
|
||||
value === null ? '-' : formatQuantity(value)
|
||||
);
|
||||
|
||||
const hasProductionOrderDetails = (order: ProductionOrderItem) => (
|
||||
order.components.length > 0 ||
|
||||
order.steps.length > 0 ||
|
||||
Boolean(order.notes || order.supplier || order.lotCode || order.rollQuantity || order.fabricKg || order.ribKg || order.yieldPiecesPerKg)
|
||||
);
|
||||
|
||||
const getStatusStyle = (status: ProductionOrderStatus, fallbackLabel: string) => (
|
||||
statusStyles[String(status)] || {
|
||||
label: fallbackLabel || 'Em aberto',
|
||||
@@ -137,10 +130,11 @@ const ProductionOrders = () => {
|
||||
const [supplyMessage, setSupplyMessage] = useState('');
|
||||
const [busyStatusOrderId, setBusyStatusOrderId] = useState<number | null>(null);
|
||||
const [statusMessage, setStatusMessage] = useState('');
|
||||
const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
|
||||
const [statusEditorOrderId, setStatusEditorOrderId] = useState<number | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(20);
|
||||
const [exitForm, setExitForm] = useState({
|
||||
orderId: '',
|
||||
lotId: '',
|
||||
quantity: '',
|
||||
reason: '',
|
||||
@@ -201,7 +195,8 @@ const ProductionOrders = () => {
|
||||
const progressCount = summary.counts.in_progress || 0;
|
||||
const finishedCount = summary.counts.finished || 0;
|
||||
const totalQuantity = summary.orders.reduce((total, order) => total + order.quantity, 0);
|
||||
const activeOrders = summary.orders.filter(order => order.status !== 'finished' && order.status !== 'canceled');
|
||||
const selectedOrder = summary.orders.find(order => order.id === selectedOrderId) || null;
|
||||
const statusEditorOrder = summary.orders.find(order => order.id === statusEditorOrderId) || null;
|
||||
|
||||
const handleManualRefresh = () => {
|
||||
void loadProductionOrders({ force: true });
|
||||
@@ -221,6 +216,7 @@ const ProductionOrders = () => {
|
||||
setStatusMessage(error instanceof Error ? error.message : 'Não foi possível atualizar o status da OP.');
|
||||
} finally {
|
||||
setBusyStatusOrderId(null);
|
||||
setStatusEditorOrderId(null);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -229,7 +225,6 @@ const ProductionOrders = () => {
|
||||
setSupplyLots(supplySummary.lots);
|
||||
};
|
||||
|
||||
const selectedOrder = summary.orders.find(order => `${order.id}` === exitForm.orderId);
|
||||
const selectedLot = supplyLots.find(lot => `${lot.id}` === exitForm.lotId);
|
||||
|
||||
const handleProductionExit = async (event: FormEvent<HTMLFormElement>) => {
|
||||
@@ -247,7 +242,7 @@ const ProductionOrders = () => {
|
||||
reason: exitForm.reason.trim() || selectedOrder.productDescription,
|
||||
});
|
||||
await refreshSupplyLots();
|
||||
setExitForm({ orderId: '', lotId: '', quantity: '', reason: '' });
|
||||
setExitForm({ lotId: '', quantity: '', reason: '' });
|
||||
setSupplyMessage('Saída de material registrada no estoque.');
|
||||
} catch (error) {
|
||||
setSupplyMessage(error instanceof Error ? error.message : 'Não foi possível baixar o material.');
|
||||
@@ -384,86 +379,6 @@ const ProductionOrders = () => {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeOrders.length > 0 && (
|
||||
<form onSubmit={handleProductionExit} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-dark-text">Baixa de material da OP</h2>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">Consome um lote do estoque e registra a saída nas movimentações.</p>
|
||||
</div>
|
||||
{selectedLot && (
|
||||
<span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-muted">
|
||||
Saldo lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-1 gap-3 xl:grid-cols-[1.4fr_1.4fr_120px_1fr_auto]">
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Ordem de produção
|
||||
<select
|
||||
value={exitForm.orderId}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, orderId: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"
|
||||
>
|
||||
<option value="">Selecione...</option>
|
||||
{activeOrders.map(order => (
|
||||
<option key={order.id} value={order.id}>
|
||||
{order.number || `#${order.id}`} · {order.productDescription}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Lote de material
|
||||
<select
|
||||
value={exitForm.lotId}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, lotId: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"
|
||||
>
|
||||
<option value="">Selecione...</option>
|
||||
{supplyLots.map(lot => (
|
||||
<option key={lot.id} value={lot.id}>
|
||||
#{lot.id} · {lot.product} · {formatQuantity(lot.quantity)} {lot.unit}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Quantidade
|
||||
<input
|
||||
inputMode="decimal"
|
||||
value={exitForm.quantity}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, quantity: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary"
|
||||
placeholder="kg"
|
||||
/>
|
||||
</label>
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Motivo
|
||||
<input
|
||||
value={exitForm.reason}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, reason: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary"
|
||||
placeholder="ex: corte do pedido"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSupplyBusy || !supplyLots.length}
|
||||
className="mt-5 inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<PackageCheck className="h-4 w-4 text-brand-primary" />
|
||||
Baixar
|
||||
</button>
|
||||
</div>
|
||||
{supplyMessage && (
|
||||
<div className="mt-3 rounded-lg border border-dark-border bg-dark-input px-3 py-2 text-sm font-bold text-dark-muted">
|
||||
{supplyMessage}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
|
||||
<div className="border-b border-dark-border p-5">
|
||||
{statusMessage && (
|
||||
@@ -527,153 +442,61 @@ const ProductionOrders = () => {
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[1180px] text-left text-sm">
|
||||
<table className="w-full min-w-[820px] text-left text-sm">
|
||||
<thead className="border-b border-dark-border bg-dark-header text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Número</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Pedidos</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Data</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Data Prevista</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">SKU / Produto</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Produto</th>
|
||||
<th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Quantidade</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Marcadores</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Integrações</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{paginatedOrders.map((order: ProductionOrderItem) => {
|
||||
const statusStyle = getStatusStyle(order.status, order.statusLabel);
|
||||
const showDetails = hasProductionOrderDetails(order);
|
||||
return (
|
||||
<Fragment key={order.id}>
|
||||
<tr className="transition-colors hover:bg-dark-input/50">
|
||||
<tr key={order.id} className="transition-colors hover:bg-dark-input/50">
|
||||
<td className="px-6 py-3 font-mono text-xs font-bold text-dark-text">{order.number || '-'}</td>
|
||||
<td className="px-6 py-3 text-xs font-semibold text-dark-muted">{order.orderReference || '-'}</td>
|
||||
<td className="px-6 py-3 text-xs font-semibold text-dark-muted">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
{formatDate(order.issueDate)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-xs font-semibold text-dark-muted">{formatDate(order.expectedDate)}</td>
|
||||
<td className="px-6 py-3">
|
||||
<div className="font-bold text-dark-text">{order.productDescription}</div>
|
||||
<div className="mt-1 font-mono text-[10px] font-semibold text-dark-muted">{order.productSku || 'Sem SKU'}</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] font-semibold text-dark-muted">
|
||||
<span className="font-mono">{order.productSku || 'Sem SKU'}</span>
|
||||
<span>{formatDate(order.issueDate)}</span>
|
||||
{order.orderReference && <span>{order.orderReference}</span>}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">
|
||||
<span className="font-bold text-dark-text">{formatQuantity(order.quantity)}</span>
|
||||
<span className="ml-1 text-xs font-semibold text-dark-muted">{order.unit}</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
{order.markers.length ? (
|
||||
<div className="flex max-w-52 flex-wrap gap-1.5">
|
||||
{order.markers.map(marker => (
|
||||
<span
|
||||
key={`${order.id}-${marker.label}`}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted"
|
||||
>
|
||||
<span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: marker.color || 'var(--color-dark-muted)' }} />
|
||||
{marker.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs font-semibold text-dark-muted">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="inline-flex items-center gap-2 text-xs font-semibold text-dark-muted">
|
||||
<span className="h-2 w-2 rounded-full bg-sky-400" />
|
||||
{order.integrationStatus || 'Tiny'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<label className="sr-only" htmlFor={`production-order-status-${order.id}`}>Status da OP</label>
|
||||
<select
|
||||
id={`production-order-status-${order.id}`}
|
||||
value={order.status}
|
||||
<button
|
||||
type="button"
|
||||
disabled={busyStatusOrderId === order.id}
|
||||
onChange={(event) => void handleStatusChange(order, event.target.value as ProductionOrderStatusTab)}
|
||||
className={`h-8 rounded-lg border bg-dark-input px-2 text-[10px] font-bold uppercase tracking-wide outline-none transition-colors focus:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 ${statusStyle.className}`}
|
||||
onClick={() => setStatusEditorOrderId(order.id)}
|
||||
className={`inline-flex min-h-9 items-center gap-2 rounded-lg border px-3 text-xs font-bold transition-colors hover:brightness-125 disabled:cursor-not-allowed disabled:opacity-50 ${statusStyle.className}`}
|
||||
>
|
||||
{editableStatusOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<span className={`h-2 w-2 rounded-full ${statusStyle.dotClass}`} />
|
||||
{statusStyle.label}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedOrderId(order.id);
|
||||
setSupplyMessage('');
|
||||
setExitForm({ lotId: '', quantity: '', reason: '' });
|
||||
}}
|
||||
title="Abrir detalhes da OP"
|
||||
aria-label={`Abrir detalhes da OP ${order.number || order.id}`}
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{showDetails && (
|
||||
<tr className="bg-dark-input/20">
|
||||
<td colSpan={9} className="px-6 pb-5 pt-1">
|
||||
<div className="grid grid-cols-1 gap-4 rounded-xl border border-dark-border bg-dark-card/80 p-4 xl:grid-cols-[1.4fr_1fr_1fr]">
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Composição</h3>
|
||||
{order.components.length ? (
|
||||
<div className="mt-3 overflow-hidden rounded-lg border border-dark-border">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-dark-header text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-bold">Produto</th>
|
||||
<th className="px-3 py-2 text-left font-bold">SKU</th>
|
||||
<th className="px-3 py-2 text-right font-bold">Qtd.</th>
|
||||
<th className="px-3 py-2 text-right font-bold">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{order.components.map(component => (
|
||||
<tr key={component.id}>
|
||||
<td className="px-3 py-2 font-semibold text-dark-text">{component.componentName}</td>
|
||||
<td className="px-3 py-2 font-mono text-dark-muted">{component.componentSku || '-'}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-dark-muted">{formatQuantity(component.quantityPerUnit)} {component.unit}</td>
|
||||
<td className="px-3 py-2 text-right font-bold text-dark-text">{formatQuantity(component.totalQuantity)} {component.unit}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-3 text-xs font-semibold text-dark-muted">Sem composição sincronizada.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Etapas</h3>
|
||||
{order.steps.length ? (
|
||||
<div className="mt-3 divide-y divide-dark-border rounded-lg border border-dark-border">
|
||||
{order.steps.map(step => (
|
||||
<div key={step.id} className="grid grid-cols-[32px_1fr_auto] items-center gap-3 px-3 py-2 text-xs">
|
||||
<span className="font-mono font-bold text-dark-muted">{step.stepNumber ?? '-'}</span>
|
||||
<div>
|
||||
<p className="font-bold text-dark-text">{step.name}</p>
|
||||
<p className="mt-0.5 font-semibold text-dark-muted">{formatDate(step.startDate)} - {formatDate(step.endDate)}</p>
|
||||
</div>
|
||||
<span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: step.color || 'var(--color-brand-primary)' }} title={step.status || 'Sem status'} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-3 text-xs font-semibold text-dark-muted">Sem etapas sincronizadas.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Observações</h3>
|
||||
<dl className="mt-3 grid grid-cols-2 gap-2 text-xs">
|
||||
<div><dt className="font-bold text-dark-muted">Fornecedor</dt><dd className="mt-0.5 font-semibold text-dark-text">{order.supplier || '-'}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Lote</dt><dd className="mt-0.5 font-semibold text-dark-text">{order.lotCode || '-'}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Rolos</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.rollQuantity)}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Malha kg</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.fabricKg)}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Ribana kg</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.ribKg)}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Rendimento</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.yieldPiecesPerKg)}</dd></div>
|
||||
</dl>
|
||||
{order.notes && <p className="mt-3 whitespace-pre-wrap rounded-lg border border-dark-border bg-dark-input p-3 text-xs font-semibold text-dark-muted">{order.notes}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
@@ -713,6 +536,80 @@ const ProductionOrders = () => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedOrder && (
|
||||
<div className="fixed inset-0 z-50 flex justify-end bg-black/70 p-0 backdrop-blur-sm" role="dialog" aria-modal="true" aria-label={`Detalhes da OP ${selectedOrder.number || selectedOrder.id}`}>
|
||||
<button type="button" aria-label="Fechar detalhes" onClick={() => setSelectedOrderId(null)} className="absolute inset-0 cursor-default" />
|
||||
<aside className="relative flex h-full w-full max-w-3xl flex-col border-l border-dark-border bg-dark-card shadow-2xl">
|
||||
<div className="flex items-start justify-between gap-4 border-b border-dark-border px-6 py-5">
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Ordem de produção</p>
|
||||
<h2 className="mt-2 text-xl font-bold text-dark-text">{selectedOrder.number || `OP #${selectedOrder.id}`}</h2>
|
||||
<p className="mt-1 truncate text-sm font-semibold text-dark-muted">{selectedOrder.productDescription}</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => setSelectedOrderId(null)} aria-label="Fechar detalhes" className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary">
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-6 overflow-y-auto px-6 py-5">
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Quantidade</p><p className="mt-1 text-lg font-bold text-dark-text">{formatQuantity(selectedOrder.quantity)} <span className="text-xs text-dark-muted">{selectedOrder.unit}</span></p></div>
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Status</p><button type="button" onClick={() => setStatusEditorOrderId(selectedOrder.id)} className={`mt-2 inline-flex items-center gap-2 rounded-lg border px-2.5 py-1 text-xs font-bold ${getStatusStyle(selectedOrder.status, selectedOrder.statusLabel).className}`}><span className={`h-2 w-2 rounded-full ${getStatusStyle(selectedOrder.status, selectedOrder.statusLabel).dotClass}`} />{getStatusStyle(selectedOrder.status, selectedOrder.statusLabel).label}</button></div>
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Emissão</p><p className="mt-1 text-sm font-bold text-dark-text">{formatDate(selectedOrder.issueDate)}</p></div>
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Previsão</p><p className="mt-1 text-sm font-bold text-dark-text">{formatDate(selectedOrder.expectedDate)}</p></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Produto e marcadores</h3>
|
||||
<div className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 p-4">
|
||||
<p className="font-mono text-xs font-bold text-dark-muted">{selectedOrder.productSku || 'Sem SKU'}</p>
|
||||
{selectedOrder.markers.length > 0 && <div className="mt-3 flex flex-wrap gap-1.5">{selectedOrder.markers.map(marker => <span key={`${selectedOrder.id}-${marker.label}`} className="inline-flex items-center gap-1.5 rounded-full border border-dark-border bg-dark-card px-2.5 py-1 text-[10px] font-bold text-dark-muted"><span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: marker.color || 'var(--color-dark-muted)' }} />{marker.label}</span>)}</div>}
|
||||
<div className="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-xs font-semibold text-dark-muted"><span>Pedido: {selectedOrder.orderReference || '-'}</span><span>Integração: {selectedOrder.integrationStatus || 'Local'}</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Composição</h3>
|
||||
{selectedOrder.components.length ? (
|
||||
<div className="mt-3 overflow-hidden rounded-xl border border-dark-border">
|
||||
<table className="w-full text-xs"><thead className="bg-dark-header text-dark-muted"><tr><th className="px-3 py-2.5 text-left font-bold">Material</th><th className="px-3 py-2.5 text-right font-bold">Por unidade</th><th className="px-3 py-2.5 text-right font-bold">Total</th></tr></thead><tbody className="divide-y divide-dark-border">{selectedOrder.components.map(component => <tr key={component.id}><td className="px-3 py-3"><p className="font-bold text-dark-text">{component.componentName}</p><p className="mt-0.5 font-mono text-[10px] font-semibold text-dark-muted">{component.componentSku || 'Sem SKU'}</p></td><td className="px-3 py-3 text-right font-semibold text-dark-muted">{formatQuantity(component.quantityPerUnit)} {component.unit}</td><td className="px-3 py-3 text-right font-bold text-dark-text">{formatQuantity(component.totalQuantity)} {component.unit}</td></tr>)}</tbody></table>
|
||||
</div>
|
||||
) : <p className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 px-4 py-3 text-sm font-semibold text-dark-muted">Sem composição sincronizada.</p>}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Baixa de material</h3>
|
||||
{selectedOrder.status === 'in_progress' ? (
|
||||
<form onSubmit={handleProductionExit} className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 p-4">
|
||||
<p className="text-sm font-semibold text-dark-muted">Registre uma saída somente quando o material for realmente consumido pela OP.</p>
|
||||
<div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<label className="text-xs font-bold text-dark-muted">Lote de material<select value={exitForm.lotId} onChange={(event) => setExitForm(current => ({ ...current, lotId: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-card px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"><option value="">Selecione...</option>{supplyLots.map(lot => <option key={lot.id} value={lot.id}>#{lot.id} · {lot.product} · {formatQuantity(lot.quantity)} {lot.unit}</option>)}</select></label>
|
||||
<label className="text-xs font-bold text-dark-muted">Quantidade<input inputMode="decimal" value={exitForm.quantity} onChange={(event) => setExitForm(current => ({ ...current, quantity: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-card px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary" placeholder="kg" /></label>
|
||||
<label className="sm:col-span-2 text-xs font-bold text-dark-muted">Motivo (opcional)<input value={exitForm.reason} onChange={(event) => setExitForm(current => ({ ...current, reason: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-card px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary" placeholder="Ex.: corte do pedido" /></label>
|
||||
</div>
|
||||
{selectedLot && <p className="mt-3 text-xs font-bold text-dark-muted">Saldo do lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}</p>}
|
||||
<button type="submit" disabled={isSupplyBusy || !supplyLots.length || !exitForm.lotId || !exitForm.quantity} className="mt-4 inline-flex h-11 items-center gap-2 rounded-lg border border-brand-primary/35 bg-brand-primary/10 px-4 text-sm font-bold text-brand-primary transition-colors hover:bg-brand-primary/20 disabled:cursor-not-allowed disabled:opacity-50"><PackageCheck className="h-4 w-4" />{isSupplyBusy ? 'Registrando...' : 'Registrar baixa'}</button>
|
||||
{supplyMessage && <p className="mt-3 rounded-lg border border-dark-border bg-dark-card px-3 py-2 text-sm font-bold text-dark-muted">{supplyMessage}</p>}
|
||||
</form>
|
||||
) : <div className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 px-4 py-3 text-sm font-semibold text-dark-muted">Altere a OP para <span className="font-bold text-sky-300">Em andamento</span> antes de registrar a baixa de materiais.</div>}
|
||||
</section>
|
||||
|
||||
{(selectedOrder.steps.length > 0 || selectedOrder.notes || selectedOrder.supplier || selectedOrder.lotCode || selectedOrder.rollQuantity || selectedOrder.fabricKg || selectedOrder.ribKg || selectedOrder.yieldPiecesPerKg) && <section><h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Informações adicionais</h3><div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">{(selectedOrder.supplier || selectedOrder.lotCode || selectedOrder.rollQuantity || selectedOrder.fabricKg || selectedOrder.ribKg || selectedOrder.yieldPiecesPerKg) && <dl className="grid grid-cols-2 gap-3 rounded-xl border border-dark-border bg-dark-input/45 p-4 text-xs sm:col-span-2">{selectedOrder.supplier && <div><dt className="font-bold text-dark-muted">Fornecedor</dt><dd className="mt-1 font-bold text-dark-text">{selectedOrder.supplier}</dd></div>}{selectedOrder.lotCode && <div><dt className="font-bold text-dark-muted">Lote</dt><dd className="mt-1 font-bold text-dark-text">{selectedOrder.lotCode}</dd></div>}{selectedOrder.rollQuantity !== null && <div><dt className="font-bold text-dark-muted">Rolos</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.rollQuantity)}</dd></div>}{selectedOrder.fabricKg !== null && <div><dt className="font-bold text-dark-muted">Malha</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.fabricKg)} kg</dd></div>}{selectedOrder.ribKg !== null && <div><dt className="font-bold text-dark-muted">Ribana</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.ribKg)} kg</dd></div>}{selectedOrder.yieldPiecesPerKg !== null && <div><dt className="font-bold text-dark-muted">Rendimento</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.yieldPiecesPerKg)} un./kg</dd></div>}</dl>}{selectedOrder.steps.length > 0 && <div className="rounded-xl border border-dark-border bg-dark-input/45 p-4 sm:col-span-2"><p className="text-xs font-bold text-dark-text">Etapas</p><div className="mt-3 divide-y divide-dark-border">{selectedOrder.steps.map(step => <div key={step.id} className="flex items-center gap-3 py-2 text-xs"><span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: step.color || 'var(--color-brand-primary)' }} /><span className="font-bold text-dark-text">{step.name}</span><span className="ml-auto font-semibold text-dark-muted">{formatDate(step.startDate)} - {formatDate(step.endDate)}</span></div>)}</div></div>}{selectedOrder.notes && <p className="whitespace-pre-wrap rounded-xl border border-dark-border bg-dark-input/45 p-4 text-sm font-semibold text-dark-muted sm:col-span-2">{selectedOrder.notes}</p>}</div></section>}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{statusEditorOrder && (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="production-status-title">
|
||||
<button type="button" aria-label="Fechar alteração de status" onClick={() => setStatusEditorOrderId(null)} className="absolute inset-0 cursor-default" />
|
||||
<div className="relative w-full max-w-lg rounded-2xl border border-dark-border bg-dark-card shadow-2xl">
|
||||
<div className="flex items-start justify-between gap-4 border-b border-dark-border px-5 py-4"><div><h2 id="production-status-title" className="text-lg font-bold text-dark-text">Status da OP</h2><p className="mt-1 text-sm font-semibold text-dark-muted">{statusEditorOrder.number || `OP #${statusEditorOrder.id}`} · {statusEditorOrder.productDescription}</p></div><button type="button" onClick={() => setStatusEditorOrderId(null)} aria-label="Fechar alteração de status" className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary"><X className="h-4 w-4" /></button></div>
|
||||
<div className="space-y-2 p-5">{editableStatusOptions.map(option => { const style = getStatusStyle(option.value, option.label); const isCurrent = statusEditorOrder.status === option.value; const Icon = option.value === 'finished' ? CheckCircle2 : option.value === 'canceled' ? XCircle : option.value === 'in_progress' ? PlayCircle : Clock3; return <button key={option.value} type="button" disabled={isCurrent || busyStatusOrderId === statusEditorOrder.id} onClick={() => void handleStatusChange(statusEditorOrder, option.value)} className={`flex w-full items-center gap-4 rounded-xl border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${isCurrent ? style.className : 'border-dark-border bg-dark-input/45 hover:border-brand-primary/60'}`}><span className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border ${isCurrent ? style.className : 'border-dark-border bg-dark-card text-dark-muted'}`}><Icon className="h-5 w-5" /></span><span><span className="block text-sm font-bold text-dark-text">{option.label}{isCurrent && ' · Atual'}</span><span className="mt-1 block text-xs font-semibold text-dark-muted">{option.description}</span></span></button>; })}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user