Unify purchase need controls

src/pages/Supplies.tsx

@@ -2084,18 +2084,6 @@ const formatNeedQuantity = (need: SupplyPurchaseNeed, value: number) => (
   `${formatNumber(value)} ${getNeedUnit(need)}`
 );
 
-const summarizePurchaseNeeds = (needs: SupplyPurchaseNeed[]) => {
-  const totalsByUnit = needs.reduce<Record<string, number>>((totals, need) => {
-    if (need.purchaseKg <= 0) return totals;
-    const unit = getNeedUnit(need);
-    totals[unit] = (totals[unit] || 0) + need.purchaseKg;
-    return totals;
-  }, {});
-
-  const summaries = Object.entries(totalsByUnit).map(([unit, total]) => `${formatNumber(total)} ${unit}`);
-  return summaries.length ? summaries.join(' + ') : '0 kg';
-};
-
 const getNeedDisplayName = (need: SupplyPurchaseNeed) => (
   need.material.replace(/^Cadastrar (consumo|rendimento):\s*/i, '')
 );
@@ -2104,6 +2092,8 @@ const hasNegativeMaterialBalance = (need: SupplyPurchaseNeed) => need.stockKg <
 
 type PurchaseNeedTab = 'materials' | 'services';
 type MaterialPurchaseFilter = 'to_buy' | 'negative_balance' | 'no_stock' | 'all';
+type ServicePurchaseFilter = 'to_schedule' | 'covered' | 'all';
+type PurchaseNeedFilter = MaterialPurchaseFilter | ServicePurchaseFilter;
 
 const sumNeedProducts = (
   need: SupplyPurchaseNeed,
@@ -2296,6 +2286,7 @@ const PurchaseNeedsScreen = () => {
   const requestedFilter = searchParams.get('filter');
   const activeTab: PurchaseNeedTab = requestedTab === 'services' ? 'services' : 'materials';
   const materialFilter: MaterialPurchaseFilter = requestedFilter === 'negative_balance' || requestedFilter === 'no_stock' || requestedFilter === 'all' ? requestedFilter : 'to_buy';
+  const serviceFilter: ServicePurchaseFilter = requestedFilter === 'covered' || requestedFilter === 'all' ? requestedFilter : 'to_schedule';
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
 
@@ -2324,10 +2315,11 @@ const PurchaseNeedsScreen = () => {
     };
   }, []);
 
-  const openQueue = (tab: PurchaseNeedTab, filter: MaterialPurchaseFilter = 'to_buy') => {
+  const openQueue = (tab: PurchaseNeedTab, filter?: PurchaseNeedFilter) => {
+    const nextFilter = filter || (tab === 'materials' ? 'to_buy' : 'to_schedule');
     setSearch('');
     setCurrentPage(1);
-    setSearchParams(tab === 'materials' ? { tab, filter } : { tab });
+    setSearchParams({ tab, filter: nextFilter });
   };
 
   const materialNeeds = summary.purchaseNeeds.filter(need => !need.missingReference && !isServicePurchaseNeed(need));
@@ -2341,13 +2333,18 @@ const PurchaseNeedsScreen = () => {
     if (materialFilter === 'no_stock') return need.stockKg === 0 && need.purchaseKg > 0;
     return true;
   });
+  const filteredServiceNeeds = serviceNeeds.filter(need => {
+    if (serviceFilter === 'to_schedule') return need.purchaseKg > 0;
+    if (serviceFilter === 'covered') return need.purchaseKg <= 0;
+    return true;
+  });
   const activeNeeds = activeTab === 'materials'
     ? [...filteredMaterialNeeds].sort((a, b) => {
       if (hasNegativeMaterialBalance(a) !== hasNegativeMaterialBalance(b)) return hasNegativeMaterialBalance(a) ? -1 : 1;
       if (a.status !== b.status) return a.status === 'critical' ? -1 : b.status === 'critical' ? 1 : 0;
       return b.purchaseKg - a.purchaseKg;
     })
-    : serviceNeeds;
+    : filteredServiceNeeds;
   const normalizedSearch = normalizeSearch(search);
   const visibleNeeds = activeNeeds.filter(need => (
     !normalizedSearch || normalizeSearch(`${need.material} ${getNeedDisplayName(need)} ${need.suppliers.join(' ')} ${need.colors.join(' ')} ${(need.products || []).map(product => `${product.productId} ${product.name}`).join(' ')}`).includes(normalizedSearch)
@@ -2357,55 +2354,23 @@ const PurchaseNeedsScreen = () => {
   const startIndex = (safeCurrentPage - 1) * itemsPerPage;
   const paginatedNeeds = visibleNeeds.slice(startIndex, startIndex + itemsPerPage);
   const purchaseItemCount = purchaseNeeds.length;
-  const suggestedPurchaseSummary = summarizePurchaseNeeds(purchaseNeeds);
-  const pageTitle = 'Necessidade de Compra';
-  const pageSubtitle = 'Materiais e serviços terceirizados para execução; pendências de cadastro ficam em Dados para revisar.';
-  const materialFilters: Array<{ id: MaterialPurchaseFilter; label: string; description: string; count: number }> = [
-    { id: 'to_buy', label: 'Comprar agora', description: 'Materiais com saldo insuficiente para a demanda.', count: purchaseItemCount },
-    { id: 'negative_balance', label: 'Saldo negativo', description: 'Divergências de estoque que precisam de conferência.', count: negativeBalanceNeeds.length },
-    { id: 'no_stock', label: 'Sem saldo', description: 'Materiais sem saldo disponível no Tiny.', count: noStockNeeds.length },
-    { id: 'all', label: 'Todos os materiais', description: 'Inclui itens cobertos para auditoria da conta.', count: materialNeeds.length },
+  const materialFilters: Array<{ id: MaterialPurchaseFilter; label: string; count: number }> = [
+    { id: 'to_buy', label: 'Comprar agora', count: purchaseItemCount },
+    { id: 'negative_balance', label: 'Saldo negativo', count: negativeBalanceNeeds.length },
+    { id: 'no_stock', label: 'Sem saldo', count: noStockNeeds.length },
+    { id: 'all', label: 'Todos os materiais', count: materialNeeds.length },
   ];
-  const activeMaterialFilter = materialFilters.find(filter => filter.id === materialFilter);
-  const panelTitle = activeTab === 'materials' ? activeMaterialFilter?.label || 'Compra de materiais' : 'Serviços terceirizados';
-  const panelSubtitle = activeTab === 'materials'
-    ? activeMaterialFilter?.description || 'Demanda de produto → material → saldo disponível → quantidade para comprar.'
-    : 'Necessidades de beneficiamento e serviços. Não entram no total de compra de materiais.';
+  const serviceFilters: Array<{ id: ServicePurchaseFilter; label: string; count: number }> = [
+    { id: 'to_schedule', label: 'A programar', count: serviceNeeds.filter(need => need.purchaseKg > 0).length },
+    { id: 'covered', label: 'Sem programação', count: serviceNeeds.filter(need => need.purchaseKg <= 0).length },
+    { id: 'all', label: 'Todos os serviços', count: serviceNeeds.length },
+  ];
+  const activeFilter = activeTab === 'materials' ? materialFilter : serviceFilter;
 
   return (
     <div className={pageClassName}>
-      <Header title={pageTitle} subtitle={pageSubtitle} backTo="/supplies" />
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        <button
-          type="button"
-          onClick={() => openQueue('materials', 'to_buy')}
-          className={`cursor-pointer rounded-2xl border p-5 text-left shadow-sm transition-colors ${activeTab === 'materials' && materialFilter === 'to_buy' ? 'border-brand-primary/45 bg-brand-primary/[0.07]' : 'border-dark-border bg-dark-card hover:border-brand-primary/35'}`}
-        >
-          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Materiais para comprar</p>
-          <p className="mt-2 text-3xl font-bold text-dark-text">{purchaseItemCount}</p>
-          <p className="mt-1 text-xs font-semibold text-dark-muted">itens com falta real</p>
-        </button>
-        <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">Compra sugerida</p>
-          <p className="mt-2 text-2xl font-bold text-brand-primary">{suggestedPurchaseSummary}</p>
-          <p className="mt-1 text-xs font-semibold text-dark-muted">necessidade após saldo e recebimentos</p>
-        </div>
-        <button
-          type="button"
-          onClick={() => openQueue('materials', 'negative_balance')}
-          className={`cursor-pointer rounded-2xl border p-5 text-left shadow-sm transition-colors ${activeTab === 'materials' && materialFilter === 'negative_balance' ? 'border-red-400/45 bg-red-400/[0.07]' : 'border-dark-border bg-dark-card hover:border-red-400/35'}`}
-        >
-          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Saldos a conferir</p>
-          <p className="mt-2 text-3xl font-bold text-red-300">{negativeBalanceNeeds.length}</p>
-          <p className="mt-1 text-xs font-semibold text-dark-muted">materiais com estoque negativo</p>
-        </button>
-      </div>
-      <div className={`${panelClassName} p-5`}>
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <h2 className="text-base font-bold text-dark-text">{panelTitle}</h2>
-            <p className="mt-1 text-sm font-semibold text-dark-muted">{panelSubtitle}</p>
-          </div>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <Header title="Necessidade de Compra" subtitle="Materiais e serviços terceirizados para execução; pendências de cadastro ficam em Dados para revisar." backTo="/supplies" />
         <div className="flex flex-wrap gap-2">
           <button type="button" onClick={loadSummary} className={buttonClassName}><RefreshCw className="h-4 w-4" /> Atualizar</button>
           <button
@@ -2418,7 +2383,7 @@ const PurchaseNeedsScreen = () => {
               comprar: need.purchaseKg,
               unidade: getNeedUnit(need),
               prioridade: need.priority,
-                cobertura: need.missingReference ? 'Sem referência de consumo' : purchaseStatusLabels[need.status],
+              cobertura: purchaseStatusLabels[need.status],
               fornecedores: need.suppliers.join(' | '),
               cores: need.colors.join(' | '),
               produtos: (need.products || []).map(product => `${product.productId} ${product.name}`).join(' | '),
@@ -2429,58 +2394,50 @@ const PurchaseNeedsScreen = () => {
           </button>
         </div>
       </div>
-        <div className="mt-5 flex flex-col gap-3 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-[auto_minmax(0,1fr)_190px]">
         <div className="inline-flex w-fit rounded-xl border border-dark-border bg-dark-input p-1">
           {[
-              { id: 'materials' as const, label: `Compra (${purchaseItemCount})` },
-              { id: 'services' as const, label: `Serviços (${serviceNeeds.length})` },
+            { id: 'materials' as const, label: 'Materiais' },
+            { id: 'services' as const, label: 'Serviços' },
           ].map(tab => (
-              <button key={tab.id} type="button" onClick={() => openQueue(tab.id)} className={`rounded-lg px-3 py-2 text-xs font-bold transition-colors cursor-pointer ${activeTab === tab.id ? 'bg-brand-primary text-brand-contrast' : 'text-dark-muted hover:text-dark-text'}`}>
+            <button key={tab.id} type="button" onClick={() => openQueue(tab.id)} className={`rounded-lg px-4 py-2 text-sm font-bold transition-colors cursor-pointer ${activeTab === tab.id ? 'bg-brand-primary text-brand-contrast' : 'text-dark-muted hover:bg-dark-card hover:text-dark-text'}`}>
               {tab.label}
             </button>
           ))}
         </div>
-          <label className="relative block w-full xl:max-w-md">
-            <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-dark-muted" />
+        <label className="relative block">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-dark-muted" />
           <input
             value={search}
             onChange={(event) => {
               setSearch(event.target.value);
               setCurrentPage(1);
             }}
-              className={`${inputClassName} pl-9`}
+            className="h-11 w-full rounded-xl border border-dark-border bg-dark-input py-2.5 pl-10 pr-4 text-sm font-semibold text-dark-text outline-none transition-colors placeholder:text-dark-muted hover:border-brand-primary focus:border-brand-primary"
             placeholder={activeTab === 'services' ? 'Buscar por serviço ou SKU impactado...' : 'Buscar por material, fornecedor ou cor...'}
           />
         </label>
-        </div>
-        {activeTab === 'materials' && (
-          <div className="mt-4 flex flex-wrap gap-2">
-            {materialFilters.map(filter => (
-              <button
-                key={filter.id}
-                type="button"
-                onClick={() => openQueue('materials', filter.id)}
-                className={`cursor-pointer rounded-lg border px-3 py-2 text-left text-xs font-bold transition-colors ${materialFilter === filter.id ? 'border-brand-primary/40 bg-brand-primary/10 text-brand-primary' : 'border-dark-border bg-dark-input text-dark-muted hover:border-brand-primary/35 hover:text-dark-text'}`}
-                title={filter.description}
+        <select
+          value={activeFilter}
+          onChange={(event) => openQueue(activeTab, event.target.value as PurchaseNeedFilter)}
+          className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none transition-colors focus:border-brand-primary cursor-pointer"
+          aria-label={activeTab === 'materials' ? 'Filtro de materiais' : 'Filtro de serviços'}
         >
-                {filter.label} <span className="ml-1 opacity-75">{filter.count}</span>
-              </button>
-            ))}
+          {activeTab === 'materials'
+            ? materialFilters.map(filter => <option key={filter.id} value={filter.id}>{filter.label} ({filter.count})</option>)
+            : serviceFilters.map(filter => <option key={filter.id} value={filter.id}>{filter.label} ({filter.count})</option>)}
+        </select>
       </div>
-        )}
+      <div className={panelClassName}>
         {isLoading ? (
-          <div className={emptyStateClassName}>
+          <div className={`${emptyStateClassName} min-h-[280px]`}>
             <BarChart3 className="h-8 w-8 text-brand-primary" />
             <h3 className="text-base font-bold text-dark-text">Calculando necessidade...</h3>
           </div>
         ) : visibleNeeds.length ? (
-          <div className="mt-4 overflow-hidden rounded-xl border border-dark-border">
+          <>
             <div className="overflow-x-auto">
-              {activeTab === 'materials' ? (
-                <PurchaseMaterialQueue needs={paginatedNeeds} />
-              ) : (
-                <PurchaseServiceQueue needs={paginatedNeeds} />
-              )}
+              {activeTab === 'materials' ? <PurchaseMaterialQueue needs={paginatedNeeds} /> : <PurchaseServiceQueue needs={paginatedNeeds} />}
             </div>
             <PaginationControls
               totalItems={visibleNeeds.length}
@@ -2499,12 +2456,12 @@ const PurchaseNeedsScreen = () => {
               }}
               className="border-t border-dark-border px-4 py-3"
             />
-          </div>
+          </>
         ) : (
-          <div className={emptyStateClassName}>
+          <div className={`${emptyStateClassName} min-h-[280px]`}>
             <BarChart3 className="h-8 w-8 text-brand-primary" />
-            <h3 className="text-base font-bold text-dark-text">{summary.purchaseNeeds.length ? 'Nenhuma necessidade encontrada' : 'Nenhuma necessidade de compra'}</h3>
-            <p className="text-sm font-semibold text-dark-muted">{summary.purchaseNeeds.length ? 'Ajuste a busca.' : 'Cadastre planos de malha para gerar demanda e aprove recebimentos para abater estoque.'}</p>
+            <h3 className="text-base font-bold text-dark-text">{activeTab === 'services' ? 'Nenhum serviço encontrado' : 'Nenhuma necessidade encontrada'}</h3>
+            <p className="text-sm font-semibold text-dark-muted">{summary.purchaseNeeds.length ? 'Ajuste a busca ou o filtro.' : 'Cadastre planos de malha para gerar demanda e aprove recebimentos para abater estoque.'}</p>
           </div>
         )}
       </div>