Persist supply receipts and stock

src/pages/Supplies.tsx

@@ -1,4 +1,4 @@
-import { type FormEvent, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { Link as RouterLink, Navigate, useParams } from 'react-router-dom';
 import {
   AlertTriangle,
@@ -20,6 +20,8 @@ import {
   Truck,
   Warehouse,
 } from 'lucide-react';
+import { approveSupplyReceipt, createSupplyReceipt, deleteSupplyReceipt, fetchSupplySummary } from '../dataService';
+import type { SupplyLot, SupplyMovement, SupplyReceipt, SupplySummary } from '../types';
 
 type InventoryTab = 'dashboard' | 'balance' | 'receipts' | 'inventory' | 'movements';
 type ReceiptView = 'new' | 'pending' | 'history';
@@ -31,18 +33,6 @@ type FabricPlan = {
   supplier: string;
   priority: string;
 };
-type SupplyReceipt = {
-  id: string;
-  category: string;
-  product: string;
-  quantity: number;
-  unit: string;
-  supplier: string;
-  invoice: string;
-  notes: string;
-  status: 'pending' | 'approved';
-  createdAt: string;
-};
 
 const pageClassName = 'mx-auto flex w-full max-w-7xl flex-col gap-6';
 const panelClassName = 'rounded-2xl border border-dark-border bg-dark-card shadow-sm';
@@ -50,12 +40,19 @@ const buttonClassName = 'inline-flex h-10 items-center justify-center gap-2 roun
 const inputClassName = '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';
 const emptyStateClassName = 'flex min-h-[190px] flex-col items-center justify-center gap-2 px-4 py-10 text-center';
 
-const stats = [
-  { label: 'Total em estoque', value: '0 kg' },
-  { label: 'Lotes ativos', value: '0' },
-  { label: 'Rolos', value: '0' },
-  { label: 'Alertas', value: '0' },
-];
+const emptySupplySummary: SupplySummary = {
+  receipts: [],
+  lots: [],
+  movements: [],
+  stats: {
+    totalQuantityKg: 0,
+    activeLots: 0,
+    rolls: 0,
+    alerts: 0,
+    pendingReceipts: 0,
+    approvedReceipts: 0,
+  },
+};
 
 const formatNumber = (value: number, maximumFractionDigits = 2) => (
   new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
@@ -66,6 +63,36 @@ const parseDecimal = (value: string) => {
   return Number.isFinite(number) ? number : 0;
 };
 
+const formatDateTime = (value: string | null) => {
+  if (!value) return '-';
+  return new Intl.DateTimeFormat('pt-BR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(value));
+};
+
+const normalizeSearch = (value: string) => value.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+
+const exportCsv = (filename: string, rows: Array<Record<string, string | number | null>>) => {
+  if (!rows.length) return;
+  const headers = Object.keys(rows[0]);
+  const escapeCell = (value: string | number | null) => `"${String(value ?? '').replace(/"/g, '""')}"`;
+  const csv = [
+    headers.join(','),
+    ...rows.map(row => headers.map(header => escapeCell(row[header])).join(',')),
+  ].join('\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(url);
+};
+
 const loadFabricPlans = (): FabricPlan[] => {
   try {
     const rawPlans = localStorage.getItem('nexstar_fabric_plans');
@@ -77,17 +104,6 @@ const loadFabricPlans = (): FabricPlan[] => {
   }
 };
 
-const loadReceipts = (): SupplyReceipt[] => {
-  try {
-    const rawReceipts = localStorage.getItem('nexstar_supply_receipts');
-    if (!rawReceipts) return [];
-    const parsed = JSON.parse(rawReceipts);
-    return Array.isArray(parsed) ? parsed : [];
-  } catch {
-    return [];
-  }
-};
-
 const inventoryTabs: Array<{ id: InventoryTab; name: string; icon: typeof BarChart3 }> = [
   { id: 'dashboard', name: 'Dashboard', icon: Warehouse },
   { id: 'balance', name: 'Saldo', icon: BarChart3 },
@@ -160,7 +176,15 @@ const SuppliesHub = () => (
   </div>
 );
 
-const StatGrid = () => (
+const StatGrid = ({ summary }: { summary: SupplySummary }) => {
+  const stats = [
+    { label: 'Total em estoque', value: `${formatNumber(summary.stats.totalQuantityKg)} kg` },
+    { label: 'Lotes ativos', value: `${summary.stats.activeLots}` },
+    { label: 'Rolos', value: `${formatNumber(summary.stats.rolls, 0)}` },
+    { label: 'Alertas', value: `${summary.stats.alerts}` },
+  ];
+
+  return (
   <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
     {stats.map(stat => (
       <div key={stat.label} className="rounded-xl border border-dark-border bg-dark-input/40 px-4 py-4 text-center">
@@ -169,18 +193,43 @@ const StatGrid = () => (
       </div>
     ))}
   </div>
-);
+  );
+};
 
-const InventoryDashboard = () => (
+const InventoryDashboard = ({ summary, onNewReceipt }: { summary: SupplySummary; onNewReceipt: () => void }) => {
+  const categories = summary.lots.reduce<Record<string, { quantity: number; unit: string; lots: number }>>((acc, lot) => {
+    const current = acc[lot.category] || { quantity: 0, unit: lot.unit, lots: 0 };
+    acc[lot.category] = {
+      quantity: current.quantity + lot.quantity,
+      unit: current.unit === lot.unit ? lot.unit : 'mix',
+      lots: current.lots + 1,
+    };
+    return acc;
+  }, {});
+  const latestReceipts = summary.receipts.slice(0, 4);
+
+  return (
   <div className="space-y-4">
-    <StatGrid />
+    <StatGrid summary={summary} />
     <div className={`${panelClassName} p-5`}>
       <h2 className="text-base font-bold text-dark-text">Por categoria de material</h2>
-      <div className={emptyStateClassName}>
-        <Warehouse className="h-8 w-8 text-brand-primary" />
-        <h3 className="text-base font-bold text-dark-text">Nenhuma categoria com saldo</h3>
-        <p className="text-sm font-semibold text-dark-muted">Registre entradas para agrupar o estoque por tipo de material.</p>
-      </div>
+      {Object.keys(categories).length ? (
+        <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
+          {Object.entries(categories).map(([category, data]) => (
+            <div key={category} className="rounded-xl border border-dark-border bg-dark-input/35 p-4">
+              <p className="text-sm font-bold text-dark-text">{category}</p>
+              <p className="mt-2 text-2xl font-bold text-dark-text">{formatNumber(data.quantity)} {data.unit}</p>
+              <p className="mt-1 text-xs font-semibold text-dark-muted">{data.lots} lote(s) ativo(s)</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className={emptyStateClassName}>
+          <Warehouse className="h-8 w-8 text-brand-primary" />
+          <h3 className="text-base font-bold text-dark-text">Nenhuma categoria com saldo</h3>
+          <p className="text-sm font-semibold text-dark-muted">Registre entradas para agrupar o estoque por tipo de material.</p>
+        </div>
+      )}
     </div>
     <div className={`${panelClassName} p-5`}>
       <h2 className="flex items-center gap-2 text-base font-bold text-dark-text"><AlertTriangle className="h-4 w-4 text-yellow-400" /> Alertas de estoque</h2>
@@ -189,45 +238,127 @@ const InventoryDashboard = () => (
     <div className={`${panelClassName} p-5`}>
       <div className="flex items-center justify-between gap-3">
         <h2 className="text-base font-bold text-dark-text">Últimas entradas</h2>
-        <button type="button" className={buttonClassName}>Nova entrada</button>
+        <button type="button" onClick={onNewReceipt} className={buttonClassName}>Nova entrada</button>
       </div>
-      <p className="mt-5 text-sm font-semibold text-dark-muted">Nenhuma entrada registrada.</p>
+      {latestReceipts.length ? (
+        <div className="mt-4 divide-y divide-dark-border overflow-hidden rounded-xl border border-dark-border">
+          {latestReceipts.map(receipt => (
+            <div key={receipt.id} className="grid grid-cols-1 gap-2 bg-dark-input/25 p-3 md:grid-cols-[1fr_auto_auto] md:items-center">
+              <div>
+                <p className="text-sm font-bold text-dark-text">{receipt.product}</p>
+                <p className="text-xs font-semibold text-dark-muted">{receipt.category} · {formatDateTime(receipt.createdAt)}</p>
+              </div>
+              <p className="text-sm font-bold text-dark-text">{formatNumber(receipt.quantity)} {receipt.unit}</p>
+              <span className={`w-fit rounded-full border px-2.5 py-1 text-xs font-bold ${
+                receipt.status === 'approved'
+                  ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300'
+                  : 'border-amber-400/30 bg-amber-400/10 text-amber-300'
+              }`}>
+                {receipt.status === 'approved' ? 'Aprovado' : 'Pendente'}
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="mt-5 text-sm font-semibold text-dark-muted">Nenhuma entrada registrada.</p>
+      )}
     </div>
   </div>
-);
+  );
+};
 
-const BalanceTab = () => (
-  <div className="space-y-4">
-    <div className="flex flex-wrap gap-2">
-      <button type="button" className={buttonClassName}><Download className="h-4 w-4" /> Exportar saldo CSV</button>
-      <button type="button" className={buttonClassName}><LinkIcon className="h-4 w-4" /> Sincronizar com Tiny</button>
-    </div>
-    <div className={`${panelClassName} p-4`}>
-      <div className="grid grid-cols-1 gap-3 lg:grid-cols-[1fr_220px_220px]">
-        <label className="relative">
-          <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-dark-muted" />
-          <input className={`${inputClassName} pl-9`} placeholder="Buscar por SKU, lote, tipo ou fornecedor..." />
-        </label>
-        <select className={inputClassName}><option>Todos os tipos</option></select>
-        <select className={inputClassName}><option>Todos os fornecedores</option></select>
+const BalanceTab = ({ summary, onRefresh }: { summary: SupplySummary; onRefresh: () => void }) => {
+  const [search, setSearch] = useState('');
+  const [category, setCategory] = useState('all');
+  const [supplier, setSupplier] = useState('all');
+  const categories = Array.from(new Set(summary.lots.map(lot => lot.category))).sort();
+  const suppliers = Array.from(new Set(summary.lots.map(lot => lot.supplier || 'Sem fornecedor'))).sort();
+  const normalizedSearch = normalizeSearch(search);
+  const visibleLots = summary.lots.filter(lot => {
+    const lotSupplier = lot.supplier || 'Sem fornecedor';
+    const matchesSearch = !normalizedSearch || normalizeSearch(`${lot.product} ${lot.category} ${lotSupplier} ${lot.invoice} ${lot.id}`).includes(normalizedSearch);
+    const matchesCategory = category === 'all' || lot.category === category;
+    const matchesSupplier = supplier === 'all' || lotSupplier === supplier;
+    return matchesSearch && matchesCategory && matchesSupplier;
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          onClick={() => exportCsv('saldo-suprimentos.csv', visibleLots.map(lot => ({
+            lote: lot.id,
+            material: lot.product,
+            categoria: lot.category,
+            quantidade: lot.quantity,
+            unidade: lot.unit,
+            fornecedor: lot.supplier || 'Sem fornecedor',
+            nota_fiscal: lot.invoice || '',
+            criado_em: lot.createdAt,
+          })))}
+          className={buttonClassName}
+        >
+          <Download className="h-4 w-4" /> Exportar saldo CSV
+        </button>
+        <button type="button" onClick={onRefresh} className={buttonClassName}><RefreshCw className="h-4 w-4" /> Atualizar saldo</button>
+      </div>
+      <div className={`${panelClassName} p-4`}>
+        <div className="grid grid-cols-1 gap-3 lg:grid-cols-[1fr_220px_220px]">
+          <label className="relative">
+            <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-dark-muted" />
+            <input value={search} onChange={(event) => setSearch(event.target.value)} className={`${inputClassName} pl-9`} placeholder="Buscar por SKU, lote, tipo ou fornecedor..." />
+          </label>
+          <select value={category} onChange={(event) => setCategory(event.target.value)} className={inputClassName}>
+            <option value="all">Todos os tipos</option>
+            {categories.map(item => <option key={item} value={item}>{item}</option>)}
+          </select>
+          <select value={supplier} onChange={(event) => setSupplier(event.target.value)} className={inputClassName}>
+            <option value="all">Todos os fornecedores</option>
+            {suppliers.map(item => <option key={item} value={item}>{item}</option>)}
+          </select>
+        </div>
       </div>
-    </div>
     <div className={`${panelClassName} p-5`}>
-      <StatGrid />
+      <StatGrid summary={summary} />
     </div>
     <div className={`${panelClassName} p-5`}>
       <div className="flex items-center justify-between gap-3">
         <h2 className="text-base font-bold text-dark-text">Saldo por tipo</h2>
         <span className="text-xs font-semibold text-dark-muted">Clique para expandir lotes</span>
       </div>
-      <div className={emptyStateClassName}>
-        <Package className="h-8 w-8 text-brand-primary" />
-        <h3 className="text-base font-bold text-dark-text">Nenhum item em estoque</h3>
-        <p className="text-sm font-semibold text-dark-muted">Registre entradas para ver o saldo aqui.</p>
-      </div>
+      {visibleLots.length ? (
+        <div className="mt-4 overflow-hidden rounded-xl border border-dark-border">
+          <div className="hidden grid-cols-[1.2fr_1fr_120px_1fr_140px] border-b border-dark-border bg-dark-input/40 px-4 py-3 text-xs font-bold uppercase tracking-widest text-dark-muted md:grid">
+            <span>Material</span>
+            <span>Categoria</span>
+            <span>Saldo</span>
+            <span>Fornecedor</span>
+            <span>Lote</span>
+          </div>
+          <div className="divide-y divide-dark-border">
+            {visibleLots.map(lot => (
+              <div key={lot.id} className="grid grid-cols-1 gap-2 bg-dark-card px-4 py-3 md:grid-cols-[1.2fr_1fr_120px_1fr_140px] md:items-center">
+                <p className="text-sm font-bold text-dark-text">{lot.product}</p>
+                <p className="text-sm font-semibold text-dark-muted">{lot.category}</p>
+                <p className="text-sm font-bold text-dark-text">{formatNumber(lot.quantity)} {lot.unit}</p>
+                <p className="text-sm font-semibold text-dark-muted">{lot.supplier || 'Sem fornecedor'}</p>
+                <p className="text-xs font-bold text-dark-muted">#{lot.id} · {lot.invoice || 'sem NF'}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className={emptyStateClassName}>
+          <Package className="h-8 w-8 text-brand-primary" />
+          <h3 className="text-base font-bold text-dark-text">{summary.lots.length ? 'Nenhum lote encontrado' : 'Nenhum item em estoque'}</h3>
+          <p className="text-sm font-semibold text-dark-muted">{summary.lots.length ? 'Ajuste a busca ou os filtros.' : 'Registre entradas para ver o saldo aqui.'}</p>
+        </div>
+      )}
     </div>
   </div>
-);
+  );
+};
 
 const ReceiptList = ({
   receipts,
@@ -237,8 +368,8 @@ const ReceiptList = ({
 }: {
   receipts: SupplyReceipt[];
   emptyTitle: string;
-  onApprove: (receiptId: string) => void;
-  onRemove: (receiptId: string) => void;
+  onApprove: (receiptId: number) => void;
+  onRemove: (receiptId: number) => void;
 }) => (
   <div className={`${panelClassName} overflow-hidden`}>
     {receipts.length ? (
@@ -247,7 +378,7 @@ const ReceiptList = ({
           <div key={receipt.id} className="grid grid-cols-1 gap-3 p-4 lg:grid-cols-[1.2fr_120px_1fr_100px_auto] lg:items-center">
             <div>
               <p className="font-bold text-dark-text">{receipt.product}</p>
-              <p className="text-xs font-semibold text-dark-muted">{receipt.category} · NF {receipt.invoice}</p>
+              <p className="text-xs font-semibold text-dark-muted">{receipt.category} · {receipt.invoice ? `NF ${receipt.invoice}` : 'sem NF'} · {formatDateTime(receipt.createdAt)}</p>
             </div>
             <p className="text-sm font-bold text-dark-text">{formatNumber(receipt.quantity)} {receipt.unit}</p>
             <p className="text-sm font-semibold text-dark-muted">{receipt.supplier}</p>
@@ -281,10 +412,21 @@ const ReceiptList = ({
   </div>
 );
 
-const ReceiptsTab = () => {
+const ReceiptsTab = ({
+  receipts,
+  onCreate,
+  onApprove,
+  onRemove,
+  isBusy,
+}: {
+  receipts: SupplyReceipt[];
+  onCreate: (payload: { category: string; product: string; quantity: number; unit: string; supplier: string; invoice: string; notes: string }) => Promise<void>;
+  onApprove: (receiptId: number) => Promise<void>;
+  onRemove: (receiptId: number) => Promise<void>;
+  isBusy: boolean;
+}) => {
   const [activeView, setActiveView] = useState<ReceiptView>('new');
   const [selectedCategory, setSelectedCategory] = useState(receiptCategories[0].name);
-  const [receipts, setReceipts] = useState<SupplyReceipt[]>(loadReceipts);
   const [form, setForm] = useState({
     product: '',
     quantity: '',
@@ -297,41 +439,25 @@ const ReceiptsTab = () => {
   const pendingReceipts = receipts.filter(receipt => receipt.status === 'pending');
   const visibleReceipts = activeView === 'pending' ? pendingReceipts : receipts;
 
-  const saveReceipts = (nextReceipts: SupplyReceipt[]) => {
-    setReceipts(nextReceipts);
-    localStorage.setItem('nexstar_supply_receipts', JSON.stringify(nextReceipts));
-  };
-
-  const handleReceiptSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleReceiptSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const product = form.product.trim();
     const quantity = parseDecimal(form.quantity);
     if (!product || quantity <= 0) return;
 
-    const nextReceipt: SupplyReceipt = {
-      id: `${Date.now()}`,
+    await onCreate({
       category: selectedCategory,
       product,
       quantity,
       unit: form.unit,
       supplier: form.supplier.trim() || 'Sem fornecedor',
-      invoice: form.invoice.trim() || '-',
+      invoice: form.invoice.trim(),
       notes: form.notes.trim(),
-      status: 'pending',
-      createdAt: new Date().toISOString(),
-    };
-
-    saveReceipts([nextReceipt, ...receipts]);
+    });
     setForm({ product: '', quantity: '', unit: 'kg', supplier: '', invoice: '', notes: '' });
     setActiveView('pending');
   };
 
-  const markApproved = (receiptId: string) => {
-    saveReceipts(receipts.map(receipt => (
-      receipt.id === receiptId ? { ...receipt, status: 'approved' } : receipt
-    )));
-  };
-
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap gap-2">
@@ -409,9 +535,9 @@ const ReceiptsTab = () => {
                 <textarea value={form.notes} onChange={(event) => setForm(current => ({ ...current, notes: event.target.value }))} className="mt-1 min-h-20 w-full rounded-lg border border-dark-border bg-dark-input px-3 py-2 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary" placeholder="Condição, divergências, lote..." />
               </label>
             </div>
-            <button type="submit" className="mt-4 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-opacity hover:opacity-90 cursor-pointer">
+            <button type="submit" disabled={isBusy} className="mt-4 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer">
               <Save className="h-4 w-4" />
-              Registrar recebimento
+              {isBusy ? 'Salvando...' : 'Registrar recebimento'}
             </button>
           </div>
         </form>
@@ -421,63 +547,201 @@ const ReceiptsTab = () => {
         <ReceiptList
           receipts={visibleReceipts}
           emptyTitle="Nenhum recebimento pendente"
-          onApprove={markApproved}
-          onRemove={(receiptId) => saveReceipts(receipts.filter(item => item.id !== receiptId))}
+          onApprove={onApprove}
+          onRemove={onRemove}
         />
       )}
       {activeView === 'history' && (
         <ReceiptList
           receipts={visibleReceipts}
           emptyTitle="Nenhum recebimento no histórico"
-          onApprove={markApproved}
-          onRemove={(receiptId) => saveReceipts(receipts.filter(item => item.id !== receiptId))}
+          onApprove={onApprove}
+          onRemove={onRemove}
         />
       )}
     </div>
   );
 };
 
-const InventoryCountTab = () => (
-  <div className="space-y-4">
-    <button type="button" className={buttonClassName}><Download className="h-4 w-4" /> Exportar inventário CSV</button>
-    <div className={`${panelClassName} p-5`}>
+const InventoryCountTab = ({ lots, onRefresh }: { lots: SupplyLot[]; onRefresh: () => void }) => {
+  const [search, setSearch] = useState('');
+  const normalizedSearch = normalizeSearch(search);
+  const visibleLots = lots.filter(lot => (
+    !normalizedSearch || normalizeSearch(`${lot.product} ${lot.category} ${lot.supplier} ${lot.invoice} ${lot.id}`).includes(normalizedSearch)
+  ));
+
+  return (
+    <div className="space-y-4">
+      <button
+        type="button"
+        onClick={() => exportCsv('inventario-suprimentos.csv', visibleLots.map(lot => ({
+          lote: lot.id,
+          material: lot.product,
+          categoria: lot.category,
+          quantidade_sistema: lot.quantity,
+          unidade: lot.unit,
+          fornecedor: lot.supplier || 'Sem fornecedor',
+        })))}
+        className={buttonClassName}
+      >
+        <Download className="h-4 w-4" /> Exportar inventário CSV
+      </button>
+      <div className={`${panelClassName} p-5`}>
       <h2 className="text-base font-bold text-dark-text">Inventário físico</h2>
       <div className="mt-4 rounded-xl border border-dark-border bg-dark-input px-4 py-3 text-sm font-semibold text-dark-muted">
         Compare o estoque do sistema com a contagem física. O ajuste gera movimentação com justificativa.
       </div>
       <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-[1fr_auto]">
-        <input className={inputClassName} placeholder="Buscar item..." />
-        <button type="button" className={buttonClassName}><RefreshCw className="h-4 w-4" /> Recarregar</button>
-      </div>
-      <div className={emptyStateClassName}>
-        <ClipboardCheck className="h-8 w-8 text-brand-primary" />
-        <h3 className="text-base font-bold text-dark-text">Nenhum lote para inventariar</h3>
+        <input value={search} onChange={(event) => setSearch(event.target.value)} className={inputClassName} placeholder="Buscar item..." />
+        <button type="button" onClick={onRefresh} className={buttonClassName}><RefreshCw className="h-4 w-4" /> Recarregar</button>
       </div>
+      {visibleLots.length ? (
+        <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {visibleLots.map(lot => (
+            <div key={lot.id} className="rounded-xl border border-dark-border bg-dark-input/35 p-4">
+              <p className="text-sm font-bold text-dark-text">{lot.product}</p>
+              <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>
+          ))}
+        </div>
+      ) : (
+        <div className={emptyStateClassName}>
+          <ClipboardCheck className="h-8 w-8 text-brand-primary" />
+          <h3 className="text-base font-bold text-dark-text">{lots.length ? 'Nenhum lote encontrado' : 'Nenhum lote para inventariar'}</h3>
+        </div>
+      )}
     </div>
   </div>
-);
+  );
+};
 
-const MovementsTab = () => (
-  <div className="space-y-4">
-    <button type="button" className={buttonClassName}><Download className="h-4 w-4" /> Exportar movimentações CSV</button>
-    <div className={`${panelClassName} p-4`}>
+const movementLabels: Record<string, string> = {
+  receipt: 'Entrada por recebimento',
+  inventory_adjustment: 'Ajuste de inventário',
+  reversal: 'Estorno',
+};
+
+const MovementsTab = ({ movements }: { movements: SupplyMovement[] }) => {
+  const [search, setSearch] = useState('');
+  const [type, setType] = useState('all');
+  const movementTypes = Array.from(new Set(movements.map(movement => movement.type))).sort();
+  const normalizedSearch = normalizeSearch(search);
+  const visibleMovements = movements.filter(movement => {
+    const matchesSearch = !normalizedSearch || normalizeSearch(`${movement.product} ${movement.category} ${movement.reason} ${movement.lotId || ''}`).includes(normalizedSearch);
+    const matchesType = type === 'all' || movement.type === type;
+    return matchesSearch && matchesType;
+  });
+
+  return (
+    <div className="space-y-4">
+      <button
+        type="button"
+        onClick={() => exportCsv('movimentacoes-suprimentos.csv', visibleMovements.map(movement => ({
+          id: movement.id,
+          data: movement.createdAt,
+          tipo: movementLabels[movement.type] || movement.type,
+          material: movement.product,
+          categoria: movement.category,
+          quantidade: movement.quantity,
+          unidade: movement.unit,
+          lote: movement.lotId,
+          motivo: movement.reason,
+        })))}
+        className={buttonClassName}
+      >
+        <Download className="h-4 w-4" /> Exportar movimentações CSV
+      </button>
+      <div className={`${panelClassName} p-4`}>
       <div className="grid grid-cols-1 gap-3 md:grid-cols-[1fr_220px]">
         <label className="relative">
           <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-dark-muted" />
-          <input className={`${inputClassName} pl-9`} placeholder="Buscar lote, tipo ou fornecedor..." />
+          <input value={search} onChange={(event) => setSearch(event.target.value)} className={`${inputClassName} pl-9`} placeholder="Buscar lote, tipo ou fornecedor..." />
         </label>
-        <select className={inputClassName}><option>Todos os tipos</option></select>
-      </div>
-      <div className={emptyStateClassName}>
-        <Repeat2 className="h-8 w-8 text-brand-primary" />
-        <h3 className="text-base font-bold text-dark-text">Nenhuma movimentação ainda</h3>
+        <select value={type} onChange={(event) => setType(event.target.value)} className={inputClassName}>
+          <option value="all">Todos os tipos</option>
+          {movementTypes.map(item => <option key={item} value={item}>{movementLabels[item] || item}</option>)}
+        </select>
       </div>
+      {visibleMovements.length ? (
+        <div className="mt-4 overflow-hidden rounded-xl border border-dark-border">
+          <div className="hidden grid-cols-[170px_1fr_140px_140px] border-b border-dark-border bg-dark-input/40 px-4 py-3 text-xs font-bold uppercase tracking-widest text-dark-muted md:grid">
+            <span>Data</span>
+            <span>Movimento</span>
+            <span>Quantidade</span>
+            <span>Lote</span>
+          </div>
+          <div className="divide-y divide-dark-border">
+            {visibleMovements.map(movement => (
+              <div key={movement.id} className="grid grid-cols-1 gap-2 bg-dark-card px-4 py-3 md:grid-cols-[170px_1fr_140px_140px] md:items-center">
+                <p className="text-sm font-semibold text-dark-muted">{formatDateTime(movement.createdAt)}</p>
+                <div>
+                  <p className="text-sm font-bold text-dark-text">{movementLabels[movement.type] || movement.type}</p>
+                  <p className="text-xs font-semibold text-dark-muted">{movement.product} · {movement.reason}</p>
+                </div>
+                <p className="text-sm font-bold text-dark-text">{formatNumber(movement.quantity)} {movement.unit}</p>
+                <p className="text-xs font-bold text-dark-muted">{movement.lotId ? `#${movement.lotId}` : '-'}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className={emptyStateClassName}>
+          <Repeat2 className="h-8 w-8 text-brand-primary" />
+          <h3 className="text-base font-bold text-dark-text">{movements.length ? 'Nenhuma movimentação encontrada' : 'Nenhuma movimentação ainda'}</h3>
+        </div>
+      )}
     </div>
   </div>
-);
+  );
+};
 
 const InventoryScreen = () => {
   const [activeTab, setActiveTab] = useState<InventoryTab>('dashboard');
+  const [summary, setSummary] = useState<SupplySummary>(emptySupplySummary);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isBusy, setIsBusy] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const loadSummary = async () => {
+    setErrorMessage('');
+    const nextSummary = await fetchSupplySummary();
+    setSummary(nextSummary);
+  };
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const load = async () => {
+      setIsLoading(true);
+      try {
+        const nextSummary = await fetchSupplySummary();
+        if (isMounted) setSummary(nextSummary);
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    };
+
+    load();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const runSupplyAction = async (action: () => Promise<void>) => {
+    setIsBusy(true);
+    setErrorMessage('');
+    try {
+      await action();
+      await loadSummary();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Não foi possível atualizar suprimentos.');
+    } finally {
+      setIsBusy(false);
+    }
+  };
 
   return (
     <div className={pageClassName}>
@@ -497,11 +761,36 @@ const InventoryScreen = () => {
           </button>
         ))}
       </div>
-      {activeTab === 'dashboard' && <InventoryDashboard />}
-      {activeTab === 'balance' && <BalanceTab />}
-      {activeTab === 'receipts' && <ReceiptsTab />}
-      {activeTab === 'inventory' && <InventoryCountTab />}
-      {activeTab === 'movements' && <MovementsTab />}
+      {errorMessage && (
+        <div className="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm font-bold text-red-300">
+          {errorMessage}
+        </div>
+      )}
+      {isLoading ? (
+        <div className={`${panelClassName} p-5 text-sm font-bold text-dark-muted`}>Carregando estoque...</div>
+      ) : (
+        <>
+          {activeTab === 'dashboard' && <InventoryDashboard summary={summary} onNewReceipt={() => setActiveTab('receipts')} />}
+          {activeTab === 'balance' && <BalanceTab summary={summary} onRefresh={loadSummary} />}
+          {activeTab === 'receipts' && (
+            <ReceiptsTab
+              receipts={summary.receipts}
+              isBusy={isBusy}
+              onCreate={(payload) => runSupplyAction(async () => {
+                await createSupplyReceipt(payload);
+              })}
+              onApprove={(receiptId) => runSupplyAction(async () => {
+                await approveSupplyReceipt(receiptId);
+              })}
+              onRemove={(receiptId) => runSupplyAction(async () => {
+                await deleteSupplyReceipt(receiptId);
+              })}
+            />
+          )}
+          {activeTab === 'inventory' && <InventoryCountTab lots={summary.lots} onRefresh={loadSummary} />}
+          {activeTab === 'movements' && <MovementsTab movements={summary.movements} />}
+        </>
+      )}
     </div>
   );
 };