From fa5c4bce392555a4f845b456fbcd4f20a370ccfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Tue, 4 Aug 2026 13:19:46 -0300
Subject: [PATCH] Standardize supply hub card layout

---
 src/pages/Supplies.tsx | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/pages/Supplies.tsx b/src/pages/Supplies.tsx
index ccf36f7..3748225 100644
--- a/src/pages/Supplies.tsx
+++ b/src/pages/Supplies.tsx
@@ -202,7 +202,6 @@ const ModuleCard = ({
 };
 
 const FlowStepCard = ({
-  number,
   title,
   description,
   meta,
@@ -210,7 +209,6 @@ const FlowStepCard = ({
   to,
   tone = 'default',
 }: {
-  number: string;
   title: string;
   description: string;
   meta: string;
@@ -226,20 +224,17 @@ const FlowStepCard = ({
   };
 
   return (
-    <RouterLink to={to} className={`${panelClassName} group flex min-h-44 flex-col p-5 transition-colors hover:border-brand-primary/70`}>
-      <div className="flex items-start justify-between gap-4">
-        <span className="text-xs font-bold tracking-[0.18em] text-dark-muted">{number}</span>
-        <div className={`flex h-10 w-10 items-center justify-center rounded-xl border ${tones[tone]}`}>
-          <Icon className="h-5 w-5" />
+    <RouterLink to={to} className={`${panelClassName} group flex min-h-36 items-start gap-4 p-5 transition-colors hover:border-brand-primary`}>
+      <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border ${tones[tone]}`}>
+        <Icon className="h-5 w-5" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-3">
+          <h3 className="text-base font-bold text-dark-text">{title}</h3>
+          <ArrowRight className="mt-0.5 h-4 w-4 shrink-0 text-dark-muted transition-transform group-hover:translate-x-0.5 group-hover:text-brand-primary" />
         </div>
-      </div>
-      <div className="mt-5">
-        <h3 className="text-base font-bold text-dark-text">{title}</h3>
-        <p className="mt-1.5 text-sm font-semibold leading-5 text-dark-muted">{description}</p>
-      </div>
-      <div className="mt-auto flex items-center justify-between gap-3 pt-5">
-        <span className={`text-xs font-bold ${tone === 'critical' ? 'text-red-300' : tone === 'attention' ? 'text-amber-300' : tone === 'ready' ? 'text-emerald-300' : 'text-dark-text'}`}>{meta}</span>
-        <ArrowRight className="h-4 w-4 shrink-0 text-dark-muted transition-transform group-hover:translate-x-0.5 group-hover:text-brand-primary" />
+        <p className="mt-2 text-sm font-semibold leading-5 text-dark-muted">{description}</p>
+        <span className={`mt-4 block text-xs font-bold ${tone === 'critical' ? 'text-red-300' : tone === 'attention' ? 'text-amber-300' : tone === 'ready' ? 'text-emerald-300' : 'text-dark-text'}`}>{meta}</span>
       </div>
     </RouterLink>
   );
@@ -425,9 +420,9 @@ const SuppliesHub = () => {
         <p className="mt-1 text-sm font-semibold text-dark-muted">Da necessidade de material até a produção acompanhada.</p>
       </div>
       <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
-        <FlowStepCard number="01" title="Garantir materiais" description="Confira saldos, pendências de composição e a compra sugerida." icon={BarChart3} to={negativeMaterialNeeds.length > 0 ? '/supplies/purchase-needs?tab=materials&filter=negative_balance' : materialPurchaseNeeds.length > 0 ? '/supplies/purchase-needs?tab=materials&filter=to_buy' : mappingSkuCount > 0 ? '/supplies/purchase-needs?tab=mapping' : '/supplies/purchase-needs?tab=materials&filter=all'} tone={negativeMaterialNeeds.length > 0 ? 'critical' : materialPurchaseNeeds.length > 0 ? 'attention' : mappingSkuCount > 0 ? 'attention' : 'ready'} meta={negativeMaterialNeeds.length > 0 ? `${formatNumber(negativeMaterialNeeds.length, 0)} saldos negativos` : materialPurchaseNeeds.length > 0 ? `${formatNumber(materialPurchaseNeeds.length, 0)} materiais para comprar` : mappingSkuCount > 0 ? 'Sem falta calculada · dados pendentes' : 'Materiais cobertos'} />
-        <FlowStepCard number="02" title="Definir corte" description="Priorize SKUs, cores e tamanhos com necessidade e material disponível." icon={Scissors} to={mappingSkuCount > 0 ? '/supplies/purchase-needs?tab=mapping' : '/cutting'} tone={mappingSkuCount > 0 ? 'attention' : 'default'} meta={mappingSkuCount > 0 ? `${formatNumber(mappingSkuCount, 0)} SKUs precisam de mapeamento` : 'Abrir plano de corte'} />
-        <FlowStepCard number="03" title="Acompanhar produção" description="Gerencie as OPs criadas a partir do corte até sua finalização." icon={ClipboardList} to="/production-orders" tone={activeProductionCount > 0 ? 'ready' : 'default'} meta={activeProductionCount > 0 ? `${formatNumber(productionCounts.open, 0)} abertas · ${formatNumber(productionCounts.inProgress, 0)} em andamento` : 'Nenhuma OP em execução'} />
+        <FlowStepCard title="Garantir materiais" description="Confira saldos, pendências de composição e a compra sugerida." icon={BarChart3} to={negativeMaterialNeeds.length > 0 ? '/supplies/purchase-needs?tab=materials&filter=negative_balance' : materialPurchaseNeeds.length > 0 ? '/supplies/purchase-needs?tab=materials&filter=to_buy' : mappingSkuCount > 0 ? '/supplies/purchase-needs?tab=mapping' : '/supplies/purchase-needs?tab=materials&filter=all'} tone={negativeMaterialNeeds.length > 0 ? 'critical' : materialPurchaseNeeds.length > 0 ? 'attention' : mappingSkuCount > 0 ? 'attention' : 'ready'} meta={negativeMaterialNeeds.length > 0 ? `${formatNumber(negativeMaterialNeeds.length, 0)} saldos negativos` : materialPurchaseNeeds.length > 0 ? `${formatNumber(materialPurchaseNeeds.length, 0)} materiais para comprar` : mappingSkuCount > 0 ? 'Sem falta calculada · dados pendentes' : 'Materiais cobertos'} />
+        <FlowStepCard title="Definir corte" description="Priorize SKUs, cores e tamanhos com necessidade e material disponível." icon={Scissors} to={mappingSkuCount > 0 ? '/supplies/purchase-needs?tab=mapping' : '/cutting'} tone={mappingSkuCount > 0 ? 'attention' : 'default'} meta={mappingSkuCount > 0 ? `${formatNumber(mappingSkuCount, 0)} SKUs precisam de mapeamento` : 'Abrir plano de corte'} />
+        <FlowStepCard title="Acompanhar produção" description="Gerencie as OPs criadas a partir do corte até sua finalização." icon={ClipboardList} to="/production-orders" tone={activeProductionCount > 0 ? 'ready' : 'default'} meta={activeProductionCount > 0 ? `${formatNumber(productionCounts.open, 0)} abertas · ${formatNumber(productionCounts.inProgress, 0)} em andamento` : 'Nenhuma OP em execução'} />
       </div>
     </section>
     <section className="border-t border-dark-border pt-6">