From 1dcc565299eca203a8ffb469d8c071fd96f1b535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Fri, 17 Jul 2026 10:10:59 -0300
Subject: [PATCH] Standardize operations page layout

---
 src/pages/PlanningIssues.tsx | 28 ++++++++++------------
 src/pages/Supplies.tsx       | 46 ++++++++++++++++++------------------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/pages/PlanningIssues.tsx b/src/pages/PlanningIssues.tsx
index 37698e9..7233243 100644
--- a/src/pages/PlanningIssues.tsx
+++ b/src/pages/PlanningIssues.tsx
@@ -260,8 +260,7 @@ const PlanningIssues = () => {
         })}
       </div>
 
-      <div className="rounded-2xl border border-dark-border bg-dark-card shadow-sm">
-        <div className="flex flex-col gap-3 border-b border-dark-border p-4 xl:flex-row xl:items-center xl:justify-between">
+      <div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[minmax(360px,1fr)_auto] xl:items-center">
           <div className="flex flex-col gap-3 md:flex-row md:items-center">
             <div className="relative w-full md:w-96">
               <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-muted" />
@@ -292,12 +291,12 @@ const PlanningIssues = () => {
           <div className="text-sm font-semibold text-dark-muted">
             {formatNumber(rows.length)} SKUs pendentes
           </div>
-        </div>
+      </div>
 
         {isLoading && !products.length ? (
           <PlanningIssuesSkeleton />
         ) : rows.length ? (
-          <>
+          <div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
             <div className="overflow-x-auto">
               <table className="w-full min-w-[1180px] table-fixed text-left text-sm">
                 <colgroup>
@@ -325,8 +324,8 @@ const PlanningIssues = () => {
                 <tbody className="divide-y divide-dark-border">
                   {paginatedRows.map(row => (
                     <tr key={row.id} className="transition-colors hover:bg-dark-input/50">
-                      <td className="px-6 py-3 font-mono text-[11px] text-dark-muted">#{row.id}</td>
-                      <td className="max-w-0 px-6 py-3">
+                      <td className="px-6 py-2.5 font-mono text-[11px] text-dark-muted">#{row.id}</td>
+                      <td className="max-w-0 px-6 py-2.5">
                         <div className="truncate font-semibold text-dark-text" title={row.name}>{row.name}</div>
                         <div className="mt-1 flex min-w-0 items-center gap-2 text-[10px] font-semibold text-dark-muted">
                           <span className="truncate">Cor: {row.color || '-'}</span>
@@ -335,10 +334,10 @@ const PlanningIssues = () => {
                           {row.hasOverride && <span className="rounded-full border border-brand-primary/25 bg-brand-primary/10 px-2 py-0.5 text-brand-primary">manual</span>}
                         </div>
                       </td>
-                      <td className="px-6 py-3">
+                      <td className="px-6 py-2.5">
                         <ProductTypeBadge type={row.productType} />
                       </td>
-                      <td className="px-6 py-3">
+                      <td className="px-6 py-2.5">
                         <div className="flex flex-wrap gap-1.5">
                           {row.issues.map(issue => (
                             <span
@@ -351,10 +350,10 @@ const PlanningIssues = () => {
                           ))}
                         </div>
                       </td>
-                      <td className="px-6 py-3 text-xs font-bold text-dark-text">{row.familyLabel}</td>
-                      <td className="px-6 py-3 whitespace-nowrap font-bold text-dark-text">{formatNumber(row.quantitySold)} un.</td>
-                      <td className="px-6 py-3 whitespace-nowrap font-bold text-brand-primary">{formatCurrency(row.revenue)}</td>
-                      <td className="px-4 py-3 text-right">
+                      <td className="px-6 py-2.5 text-xs font-bold text-dark-text">{row.familyLabel}</td>
+                      <td className="px-6 py-2.5 whitespace-nowrap font-bold text-dark-text">{formatNumber(row.quantitySold)} un.</td>
+                      <td className="px-6 py-2.5 whitespace-nowrap font-bold text-brand-primary">{formatCurrency(row.revenue)}</td>
+                      <td className="px-4 py-2.5 text-right">
                         <div className="flex justify-end gap-2">
                           <button
                             type="button"
@@ -396,9 +395,9 @@ const PlanningIssues = () => {
                 setCurrentPage(1);
               }}
             />
-          </>
+          </div>
         ) : (
-          <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
+          <div className="flex flex-col items-center justify-center rounded-2xl border border-dark-border bg-dark-card px-6 py-16 text-center shadow-sm">
             {products.length ? (
               <>
                 <CheckCircle2 className="h-10 w-10 text-emerald-300" />
@@ -414,7 +413,6 @@ const PlanningIssues = () => {
             )}
           </div>
         )}
-      </div>
 
       {editingProduct && (
         <SkuPlanningModal
diff --git a/src/pages/Supplies.tsx b/src/pages/Supplies.tsx
index 1b8122a..11a1f04 100644
--- a/src/pages/Supplies.tsx
+++ b/src/pages/Supplies.tsx
@@ -36,7 +36,7 @@ import type { CuttingSettings, DateRange, ProductAnalyticsItem, SupplyFabricPlan
 type InventoryTab = 'dashboard' | 'balance' | 'receipts' | 'inventory' | 'movements';
 type ReceiptView = 'new' | 'pending' | 'history';
 
-const pageClassName = 'mx-auto flex w-full max-w-7xl flex-col gap-6';
+const pageClassName = 'flex w-full flex-col gap-6';
 const panelClassName = 'rounded-2xl border border-dark-border bg-dark-card shadow-sm';
 const buttonClassName = 'inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer';
 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';
@@ -155,8 +155,8 @@ const Header = ({ title, subtitle, backTo }: { title: string; subtitle: string;
       </RouterLink>
     )}
     <div>
-      <h1 className="text-2xl font-bold text-dark-text">{title}</h1>
-      <p className="mt-1 text-sm font-semibold text-dark-muted">{subtitle}</p>
+      <h1 className="mb-2 text-2xl font-bold text-zinc-900 dark:text-dark-text">{title}</h1>
+      <p className="font-medium text-zinc-500 dark:text-dark-muted">{subtitle}</p>
     </div>
   </div>
 );
@@ -384,13 +384,14 @@ const DemandPlanningScreen = () => {
         ))}
       </div>
 
-      <div className={`${panelClassName} p-5`}>
+      <div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[minmax(360px,1fr)_auto] xl:items-center">
         <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
           <div>
             <h2 className="text-base font-bold text-dark-text">{demandQueueLabels[queue]}</h2>
             <p className="mt-1 text-sm font-semibold text-dark-muted">{demandQueueDescriptions[queue]}</p>
           </div>
-          <div className="flex flex-col gap-2 sm:flex-row">
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row xl:justify-end">
             <label className="relative min-w-72">
               <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-dark-muted" />
               <input
@@ -435,10 +436,10 @@ const DemandPlanningScreen = () => {
               <Download className="h-4 w-4" />
               CSV
             </button>
-          </div>
         </div>
+      </div>
 
-        <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
           <div className="rounded-xl border border-dark-border bg-dark-input/35 p-4">
             <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Itens na fila</p>
             <p className="mt-2 text-2xl font-bold text-dark-text">{formatNumber(queueRows.length, 0)}</p>
@@ -455,15 +456,15 @@ const DemandPlanningScreen = () => {
             <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Cobertura alvo</p>
             <p className="mt-2 text-2xl font-bold text-dark-text">{targetCoverageDays} dias</p>
           </div>
-        </div>
+      </div>
 
         {isLoading ? (
-          <div className={emptyStateClassName}>
+          <div className={`${panelClassName} ${emptyStateClassName}`}>
             <PackageSearch className="h-8 w-8 text-brand-primary" />
             <h3 className="text-base font-bold text-dark-text">Carregando dados de produtos...</h3>
           </div>
         ) : queueRows.length ? (
-          <div className="mt-4 overflow-hidden rounded-xl border border-dark-border">
+          <div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
             <div className="overflow-x-auto">
               <table className="w-full min-w-[1080px] table-fixed border-collapse">
                 <colgroup>
@@ -476,7 +477,7 @@ const DemandPlanningScreen = () => {
                   <col className="w-[130px]" />
                   <col className="w-[100px]" />
                 </colgroup>
-                <thead className="border-b border-dark-border bg-dark-input/40 text-xs font-bold uppercase tracking-widest text-dark-muted">
+                <thead className="border-b border-dark-border bg-dark-header text-xs font-bold uppercase tracking-widest text-dark-muted">
                   <tr>
                     <th scope="col" className="px-4 py-3 text-left">SKU</th>
                     <th scope="col" className="px-4 py-3 text-left">Produto</th>
@@ -488,27 +489,27 @@ const DemandPlanningScreen = () => {
                     <th scope="col" className="px-4 py-3 text-right">Ações</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-dark-border bg-dark-card">
+                <tbody className="divide-y divide-dark-border">
                   {paginatedRows.map(row => (
-                    <tr key={row.id}>
-                      <td className="px-4 py-3 font-mono text-[11px] text-dark-muted">#{row.id}</td>
-                      <td className="px-4 py-3">
+                    <tr key={row.id} className="transition-colors hover:bg-dark-input/50">
+                      <td className="px-4 py-2.5 font-mono text-[11px] text-dark-muted">#{row.id}</td>
+                      <td className="px-4 py-2.5">
                         <p className="truncate text-sm font-bold text-dark-text" title={row.name}>{row.name}</p>
                         <p className="mt-1 truncate text-xs font-semibold text-dark-muted">
                           Cor: {row.color || '-'} · Tam.: {row.size || '-'}
                           {row.missingData.length ? ` · Falta: ${row.missingData.join(', ')}` : ''}
                         </p>
                       </td>
-                      <td className="px-4 py-3"><ProductTypeBadge type={row.productType} /></td>
-                      <td className="px-4 py-3 text-right text-sm font-bold text-dark-text">{formatNumber(row.dailySales, 2)}</td>
-                      <td className="px-4 py-3 text-right text-sm font-bold text-dark-text">{formatNumber(row.stock, 0)} un.</td>
-                      <td className="px-4 py-3 text-right text-sm font-bold text-dark-text">{formatDays(row.daysOfCover)}</td>
-                      <td className={`px-4 py-3 text-right text-sm font-bold ${queue === 'dead' ? 'text-amber-300' : row.suggestedUnits > 0 ? 'text-amber-300' : 'text-emerald-300'}`}>
+                      <td className="px-4 py-2.5"><ProductTypeBadge type={row.productType} /></td>
+                      <td className="px-4 py-2.5 text-right text-sm font-bold text-dark-text">{formatNumber(row.dailySales, 2)}</td>
+                      <td className="px-4 py-2.5 text-right text-sm font-bold text-dark-text">{formatNumber(row.stock, 0)} un.</td>
+                      <td className="px-4 py-2.5 text-right text-sm font-bold text-dark-text">{formatDays(row.daysOfCover)}</td>
+                      <td className={`px-4 py-2.5 text-right text-sm font-bold ${queue === 'dead' ? 'text-amber-300' : row.suggestedUnits > 0 ? 'text-amber-300' : 'text-emerald-300'}`}>
                         {queue === 'dead'
                           ? new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(row.stock * row.lastPrice)
                           : `${formatNumber(row.suggestedUnits, 0)} un.`}
                       </td>
-                      <td className="px-4 py-3 text-right">
+                      <td className="px-4 py-2.5 text-right">
                         <div className="flex justify-end gap-2">
                           {queue === 'review' && (
                             <RouterLink
@@ -554,13 +555,12 @@ const DemandPlanningScreen = () => {
             />
           </div>
         ) : (
-          <div className={emptyStateClassName}>
+          <div className={`${panelClassName} ${emptyStateClassName}`}>
             <PackageSearch className="h-8 w-8 text-brand-primary" />
             <h3 className="text-base font-bold text-dark-text">Nada nesta fila</h3>
             <p className="text-sm font-semibold text-dark-muted">Ajuste a busca, período ou cobertura alvo.</p>
           </div>
         )}
-      </div>
     </div>
   );
 };