Connect production orders to stock movements

src/pages/Supplies.tsx

@@ -21,7 +21,7 @@ import {
   Trash2,
   Warehouse,
 } from 'lucide-react';
-import { approveSupplyReceipt, createSupplyFabricPlan, createSupplyReceipt, deleteSupplyFabricPlan, deleteSupplyReceipt, fetchSupplySummary } from '../dataService';
+import { adjustSupplyLotInventory, approveSupplyReceipt, consumeSupplyLotForProduction, createSupplyFabricPlan, createSupplyReceipt, deleteSupplyFabricPlan, deleteSupplyReceipt, fetchSupplySummary } from '../dataService';
 import type { SupplyFabricPlan, SupplyLot, SupplyMovement, SupplyPurchaseNeed, SupplyReceipt, SupplySummary } from '../types';
 
 type InventoryTab = 'dashboard' | 'balance' | 'receipts' | 'inventory' | 'movements';
@@ -547,13 +547,33 @@ const ReceiptsTab = ({
   );
 };
 
-const InventoryCountTab = ({ lots, onRefresh }: { lots: SupplyLot[]; onRefresh: () => void }) => {
+const InventoryCountTab = ({
+  lots,
+  onAdjust,
+  onRefresh,
+}: {
+  lots: SupplyLot[];
+  onAdjust: (lotId: number, countedQuantity: number, reason: string) => Promise<void>;
+  onRefresh: () => void;
+}) => {
   const [search, setSearch] = useState('');
+  const [adjustments, setAdjustments] = useState<Record<number, { countedQuantity: string; reason: string }>>({});
   const normalizedSearch = normalizeSearch(search);
   const visibleLots = lots.filter(lot => (
     !normalizedSearch || normalizeSearch(`${lot.product} ${lot.category} ${lot.supplier} ${lot.invoice} ${lot.id}`).includes(normalizedSearch)
   ));
 
+  const updateAdjustment = (lotId: number, patch: Partial<{ countedQuantity: string; reason: string }>) => {
+    setAdjustments(current => ({
+      ...current,
+      [lotId]: {
+        countedQuantity: current[lotId]?.countedQuantity ?? '',
+        reason: current[lotId]?.reason ?? '',
+        ...patch,
+      },
+    }));
+  };
+
   return (
     <div className="space-y-4">
       <button
@@ -587,6 +607,42 @@ const InventoryCountTab = ({ lots, onRefresh }: { lots: SupplyLot[]; onRefresh:
               <p className="mt-1 text-xs font-semibold text-dark-muted">{lot.category} · lote #{lot.id}</p>
               <p className="mt-3 text-xl font-bold text-dark-text">{formatNumber(lot.quantity)} {lot.unit}</p>
               <p className="mt-1 text-xs font-semibold text-dark-muted">{lot.supplier || 'Sem fornecedor'}</p>
+              <div className="mt-4 grid grid-cols-1 gap-2">
+                <label className="text-xs font-bold text-dark-muted">
+                  Quantidade contada
+                  <input
+                    inputMode="decimal"
+                    value={adjustments[lot.id]?.countedQuantity ?? ''}
+                    onChange={(event) => updateAdjustment(lot.id, { countedQuantity: event.target.value })}
+                    className={`${inputClassName} mt-1`}
+                    placeholder={`${formatNumber(lot.quantity)} ${lot.unit}`}
+                  />
+                </label>
+                <label className="text-xs font-bold text-dark-muted">
+                  Justificativa
+                  <input
+                    value={adjustments[lot.id]?.reason ?? ''}
+                    onChange={(event) => updateAdjustment(lot.id, { reason: event.target.value })}
+                    className={`${inputClassName} mt-1`}
+                    placeholder="ex: contagem física"
+                  />
+                </label>
+                <button
+                  type="button"
+                  onClick={async () => {
+                    const rawQuantity = adjustments[lot.id]?.countedQuantity ?? '';
+                    if (!rawQuantity.trim()) return;
+                    const nextQuantity = parseDecimal(rawQuantity);
+                    const reason = adjustments[lot.id]?.reason.trim() ?? '';
+                    await onAdjust(lot.id, nextQuantity, reason);
+                    setAdjustments(current => ({ ...current, [lot.id]: { countedQuantity: '', reason: '' } }));
+                  }}
+                  className={buttonClassName}
+                >
+                  <ClipboardCheck className="h-4 w-4" />
+                  Ajustar lote
+                </button>
+              </div>
             </div>
           ))}
         </div>
@@ -604,10 +660,91 @@ const InventoryCountTab = ({ lots, onRefresh }: { lots: SupplyLot[]; onRefresh:
 const movementLabels: Record<string, string> = {
   receipt: 'Entrada por recebimento',
   inventory_adjustment: 'Ajuste de inventário',
+  production_exit: 'Saída para produção',
   reversal: 'Estorno',
 };
 
-const MovementsTab = ({ movements }: { movements: SupplyMovement[] }) => {
+const ProductionExitPanel = ({
+  lots,
+  onConsume,
+}: {
+  lots: SupplyLot[];
+  onConsume: (lotId: number, quantity: number, productionOrderNumber: string, reason: string) => Promise<void>;
+}) => {
+  const [form, setForm] = useState({
+    lotId: '',
+    quantity: '',
+    productionOrderNumber: '',
+    reason: '',
+  });
+
+  const selectedLot = lots.find(lot => `${lot.id}` === form.lotId);
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const lotId = Number(form.lotId);
+    const quantity = parseDecimal(form.quantity);
+    if (!lotId || quantity <= 0) return;
+
+    await onConsume(lotId, quantity, form.productionOrderNumber.trim(), form.reason.trim());
+    setForm({ lotId: '', quantity: '', productionOrderNumber: '', reason: '' });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={`${panelClassName} p-5`}>
+      <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
+        <div>
+          <h2 className="text-base font-bold text-dark-text">Saída para produção</h2>
+          <p className="mt-1 text-sm font-semibold text-dark-muted">Baixa material de um lote e registra movimentação ligada à OP.</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: {formatNumber(selectedLot.quantity)} {selectedLot.unit}
+          </span>
+        )}
+      </div>
+      <div className="mt-4 grid grid-cols-1 gap-3 lg:grid-cols-[1.4fr_120px_160px_1fr_auto]">
+        <label className="text-xs font-bold text-dark-muted">
+          Lote
+          <select value={form.lotId} onChange={(event) => setForm(current => ({ ...current, lotId: event.target.value }))} className={`${inputClassName} mt-1`}>
+            <option value="">Selecione...</option>
+            {lots.map(lot => (
+              <option key={lot.id} value={lot.id}>
+                #{lot.id} · {lot.product} · {formatNumber(lot.quantity)} {lot.unit}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="text-xs font-bold text-dark-muted">
+          Quantidade
+          <input inputMode="decimal" value={form.quantity} onChange={(event) => setForm(current => ({ ...current, quantity: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="kg" />
+        </label>
+        <label className="text-xs font-bold text-dark-muted">
+          OP
+          <input value={form.productionOrderNumber} onChange={(event) => setForm(current => ({ ...current, productionOrderNumber: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: OP-123" />
+        </label>
+        <label className="text-xs font-bold text-dark-muted">
+          Motivo
+          <input value={form.reason} onChange={(event) => setForm(current => ({ ...current, reason: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: corte BLCS" />
+        </label>
+        <button type="submit" className={`${buttonClassName} mt-5`}>
+          <Repeat2 className="h-4 w-4" />
+          Baixar
+        </button>
+      </div>
+    </form>
+  );
+};
+
+const MovementsTab = ({
+  lots,
+  movements,
+  onConsume,
+}: {
+  lots: SupplyLot[];
+  movements: SupplyMovement[];
+  onConsume: (lotId: number, quantity: number, productionOrderNumber: string, reason: string) => Promise<void>;
+}) => {
   const [search, setSearch] = useState('');
   const [type, setType] = useState('all');
   const movementTypes = Array.from(new Set(movements.map(movement => movement.type))).sort();
@@ -620,6 +757,7 @@ const MovementsTab = ({ movements }: { movements: SupplyMovement[] }) => {
 
   return (
     <div className="space-y-4">
+      <ProductionExitPanel lots={lots} onConsume={onConsume} />
       <button
         type="button"
         onClick={() => exportCsv('movimentacoes-suprimentos.csv', visibleMovements.map(movement => ({
@@ -771,8 +909,24 @@ const InventoryScreen = () => {
               })}
             />
           )}
-          {activeTab === 'inventory' && <InventoryCountTab lots={summary.lots} onRefresh={loadSummary} />}
-          {activeTab === 'movements' && <MovementsTab movements={summary.movements} />}
+          {activeTab === 'inventory' && (
+            <InventoryCountTab
+              lots={summary.lots}
+              onRefresh={loadSummary}
+              onAdjust={(lotId, countedQuantity, reason) => runSupplyAction(async () => {
+                await adjustSupplyLotInventory(lotId, { countedQuantity, reason });
+              })}
+            />
+          )}
+          {activeTab === 'movements' && (
+            <MovementsTab
+              lots={summary.lots}
+              movements={summary.movements}
+              onConsume={(lotId, quantity, productionOrderNumber, reason) => runSupplyAction(async () => {
+                await consumeSupplyLotForProduction(lotId, { quantity, productionOrderNumber, reason });
+              })}
+            />
+          )}
         </>
       )}
     </div>