Clarify purchase coverage status

src/pages/Supplies.tsx

@@ -18,6 +18,7 @@ import {
   Search,
   Scissors,
   Truck,
+  Trash2,
   Warehouse,
 } from 'lucide-react';
 import { approveSupplyReceipt, createSupplyFabricPlan, createSupplyReceipt, deleteSupplyFabricPlan, deleteSupplyReceipt, fetchSupplySummary } from '../dataService';
@@ -929,7 +930,7 @@ const FabricPlanningScreen = () => {
           ) : 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 key={plan.id} className="grid grid-cols-1 gap-3 p-4 md:grid-cols-[1.4fr_1fr_100px_100px_44px] 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>
@@ -937,8 +938,15 @@ const FabricPlanningScreen = () => {
                   <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" disabled={isBusy} onClick={() => removePlan(plan.id)} className="text-sm font-bold text-red-400 transition-colors hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer">
-                    Remover
+                  <button
+                    type="button"
+                    title="Remover plano"
+                    aria-label={`Remover plano ${plan.material}`}
+                    disabled={isBusy}
+                    onClick={() => removePlan(plan.id)}
+                    className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer"
+                  >
+                    <Trash2 className="h-4 w-4" />
                   </button>
                 </div>
               ))}
@@ -957,8 +965,8 @@ const FabricPlanningScreen = () => {
 };
 
 const purchaseStatusLabels: Record<SupplyPurchaseNeed['status'], string> = {
-  critical: 'Crítico',
-  attention: 'Atenção',
+  critical: 'Sem estoque',
+  attention: 'Comprar',
   ok: 'Coberto',
 };
 
@@ -996,7 +1004,7 @@ const PurchaseNeedsScreen = () => {
   const visibleNeeds = summary.purchaseNeeds.filter(need => (
     !normalizedSearch || normalizeSearch(`${need.material} ${need.suppliers.join(' ')} ${need.colors.join(' ')}`).includes(normalizedSearch)
   ));
-  const criticalCount = summary.purchaseNeeds.filter(need => need.status === 'critical').length;
+  const purchaseItemCount = summary.purchaseNeeds.filter(need => need.purchaseKg > 0).length;
   const suggestedPurchaseKg = summary.purchaseNeeds.reduce((total, need) => total + need.purchaseKg, 0);
   const pendingSupplierCount = new Set(summary.purchaseNeeds.flatMap(need => need.suppliers)).size;
 
@@ -1005,7 +1013,7 @@ const PurchaseNeedsScreen = () => {
       <Header title="Necessidade de Compra" subtitle="Materiais abaixo do mínimo e necessidade projetada para compra." backTo="/supplies" />
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
         {[
-          { label: 'Itens críticos', value: `${criticalCount}` },
+          { label: 'Itens a comprar', value: `${purchaseItemCount}` },
           { label: 'Compra sugerida', value: `${formatNumber(suggestedPurchaseKg)} kg` },
           { label: 'Fornecedores envolvidos', value: `${pendingSupplierCount}` },
         ].map(stat => (
@@ -1032,7 +1040,7 @@ const PurchaseNeedsScreen = () => {
                 pendente_kg: need.pendingKg,
                 comprar_kg: need.purchaseKg,
                 prioridade: need.priority,
-                status: purchaseStatusLabels[need.status],
+                cobertura: purchaseStatusLabels[need.status],
                 fornecedores: need.suppliers.join(' | '),
                 cores: need.colors.join(' | '),
               })))}
@@ -1059,7 +1067,7 @@ const PurchaseNeedsScreen = () => {
               <span>Estoque</span>
               <span>Pendente</span>
               <span>Comprar</span>
-              <span>Status</span>
+              <span>Cobertura</span>
             </div>
             <div className="divide-y divide-dark-border">
               {visibleNeeds.map(need => (