Restore fabric planning in supplies

src/pages/Supplies.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { type FormEvent, useState } from 'react';
 import { Link as RouterLink, Navigate, useParams } from 'react-router-dom';
 import {
   AlertTriangle,
@@ -14,6 +14,7 @@ import {
   RefreshCw,
   Repeat2,
   Ruler,
+  Save,
   Search,
   Scissors,
   Truck,
@@ -21,6 +22,14 @@ import {
 } from 'lucide-react';
 
 type InventoryTab = 'dashboard' | 'balance' | 'receipts' | 'inventory' | 'movements';
+type FabricPlan = {
+  id: string;
+  material: string;
+  color: string;
+  quantityKg: number;
+  supplier: string;
+  priority: 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';
@@ -35,6 +44,26 @@ const stats = [
   { label: 'Alertas', value: '0' },
 ];
 
+const formatNumber = (value: number, maximumFractionDigits = 2) => (
+  new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
+);
+
+const parseDecimal = (value: string) => {
+  const number = Number(value.replace(',', '.'));
+  return Number.isFinite(number) ? number : 0;
+};
+
+const loadFabricPlans = (): FabricPlan[] => {
+  try {
+    const rawPlans = localStorage.getItem('nexstar_fabric_plans');
+    if (!rawPlans) return [];
+    const parsed = JSON.parse(rawPlans);
+    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 },
@@ -100,7 +129,8 @@ const SuppliesHub = () => (
     <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
       <ModuleCard title="Planejamento de Corte" description="Ruptura por cor e tamanho, montagem do corte e prioridade por cobertura." icon={Scissors} to="/cutting" />
       <ModuleCard title="Controle de Estoque" description="Saldo, lotes, recebimentos, inventário e movimentações." icon={Package} to="/supplies/inventory" />
-      <ModuleCard title="Planos / Ordem de Produção" description="Ordens geradas pelo corte e acompanhamento de produção." icon={ClipboardList} to="/production-orders" />
+      <ModuleCard title="Ordens de Produção" description="Ordens geradas pelo corte e acompanhamento de produção." icon={ClipboardList} to="/production-orders" />
+      <ModuleCard title="Planejamento de Malha" description="Fila de matéria-prima para compra, recebimento e abastecimento do corte." icon={Ruler} to="/supplies/fabric-planning" />
       <ModuleCard title="Necessidade de Compra" description="Itens abaixo do mínimo e necessidade projetada para compra." icon={BarChart3} to="/supplies/purchase-needs" />
     </div>
   </div>
@@ -271,20 +301,130 @@ const InventoryScreen = () => {
   );
 };
 
-const FabricPlanningScreen = () => (
+const FabricPlanningScreen = () => {
+  const [plans, setPlans] = useState<FabricPlan[]>(loadFabricPlans);
+  const [form, setForm] = useState({
+    material: '',
+    color: '',
+    quantityKg: '',
+    supplier: '',
+    priority: 'Normal',
+  });
+
+  const totalKg = plans.reduce((total, plan) => total + plan.quantityKg, 0);
+
+  const savePlans = (nextPlans: FabricPlan[]) => {
+    setPlans(nextPlans);
+    localStorage.setItem('nexstar_fabric_plans', JSON.stringify(nextPlans));
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const material = form.material.trim();
+    const quantityKg = parseDecimal(form.quantityKg);
+    if (!material || quantityKg <= 0) return;
+
+    const nextPlan: FabricPlan = {
+      id: `${Date.now()}`,
+      material,
+      color: form.color.trim() || 'Todas as cores',
+      quantityKg,
+      supplier: form.supplier.trim() || 'Sem fornecedor',
+      priority: form.priority,
+    };
+
+    savePlans([nextPlan, ...plans]);
+    setForm({ material: '', color: '', quantityKg: '', supplier: '', priority: 'Normal' });
+  };
+
+  return (
     <div className={pageClassName}>
       <Header title="Planejamento de Malha" subtitle="Fila de matéria-prima para compra, recebimento e abastecimento do corte." backTo="/supplies" />
-    <div className={`${panelClassName} p-5`}>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Planos ativos</p>
+          <p className="mt-2 text-3xl font-bold text-dark-text">{plans.length}</p>
+        </div>
+        <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Kg planejado</p>
+          <p className="mt-2 text-3xl font-bold text-dark-text">{formatNumber(totalKg)} kg</p>
+        </div>
+        <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Críticos</p>
+          <p className="mt-2 text-3xl font-bold text-dark-text">{plans.filter(plan => plan.priority === 'Crítico').length}</p>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[420px_1fr]">
+        <form onSubmit={handleSubmit} className={`${panelClassName} p-5`}>
+          <h2 className="text-base font-bold text-dark-text">Novo plano de malha</h2>
+          <div className="mt-4 grid grid-cols-1 gap-3">
+            <label className="text-xs font-bold text-dark-muted">
+              Malha / tecido
+              <input value={form.material} onChange={(event) => setForm(current => ({ ...current, material: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: Meia malha 30.1" />
+            </label>
+            <label className="text-xs font-bold text-dark-muted">
+              Cor
+              <input value={form.color} onChange={(event) => setForm(current => ({ ...current, color: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="Todas as cores" />
+            </label>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <label className="text-xs font-bold text-dark-muted">
+                Quantidade kg
+                <input inputMode="decimal" value={form.quantityKg} onChange={(event) => setForm(current => ({ ...current, quantityKg: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: 180" />
+              </label>
+              <label className="text-xs font-bold text-dark-muted">
+                Prioridade
+                <select value={form.priority} onChange={(event) => setForm(current => ({ ...current, priority: event.target.value }))} className={`${inputClassName} mt-1`}>
+                  <option>Normal</option>
+                  <option>Atenção</option>
+                  <option>Crítico</option>
+                </select>
+              </label>
+            </div>
+            <label className="text-xs font-bold text-dark-muted">
+              Fornecedor
+              <input value={form.supplier} onChange={(event) => setForm(current => ({ ...current, supplier: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="Opcional" />
+            </label>
+            <button type="submit" className="mt-2 inline-flex h-11 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">
+              <Save className="h-4 w-4" />
+              Salvar plano
+            </button>
+          </div>
+        </form>
+
+        <div className={`${panelClassName} overflow-hidden`}>
+          <div className="border-b border-dark-border p-5">
             <h2 className="text-base font-bold text-dark-text">Planos de malha</h2>
-      <p className="mt-1 text-sm font-semibold text-dark-muted">Fila de matéria-prima para compra, recebimento e abastecimento do corte.</p>
+            <p className="mt-1 text-sm font-semibold text-dark-muted">Itens planejados para compra ou recebimento.</p>
+          </div>
+          {plans.length ? (
+            <div className="divide-y divide-dark-border">
+              {plans.map(plan => (
+                <div key={plan.id} className="grid grid-cols-1 gap-3 p-4 md:grid-cols-[1.4fr_1fr_100px_100px_auto] md:items-center">
+                  <div>
+                    <p className="font-bold text-dark-text">{plan.material}</p>
+                    <p className="text-xs font-semibold text-dark-muted">{plan.color}</p>
+                  </div>
+                  <p className="text-sm font-semibold text-dark-muted">{plan.supplier}</p>
+                  <p className="text-sm font-bold text-dark-text">{formatNumber(plan.quantityKg)} kg</p>
+                  <span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-text">{plan.priority}</span>
+                  <button type="button" onClick={() => savePlans(plans.filter(item => item.id !== plan.id))} className="text-sm font-bold text-red-400 transition-colors hover:text-red-300 cursor-pointer">
+                    Remover
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
             <div className={emptyStateClassName}>
               <Ruler className="h-8 w-8 text-brand-primary" />
               <h3 className="text-base font-bold text-dark-text">Nenhum plano de malha cadastrado</h3>
-        <p className="text-sm font-semibold text-dark-muted">Quando houver planos, eles alimentarão recebimentos e corte.</p>
+              <p className="text-sm font-semibold text-dark-muted">Cadastre o primeiro plano no formulário ao lado.</p>
+            </div>
+          )}
         </div>
       </div>
     </div>
-);
+  );
+};
 
 const PurchaseNeedsScreen = () => (
   <div className={pageClassName}>