Standardize operations page layout

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>
   );
 };