Simplify imported production orders view

src/pages/OlistSync.tsx

@@ -91,6 +91,7 @@ const OlistSync = () => {
   const [syncRunsPage, setSyncRunsPage] = useState(1);
   const [importRunsPage, setImportRunsPage] = useState(1);
   const [supplierReferencesPage, setSupplierReferencesPage] = useState(1);
+  const [importView, setImportView] = useState<'suppliers' | 'files'>('suppliers');
 
   const loadStatus = useCallback(async (initial = false) => {
     if (initial) setIsLoading(true);
@@ -361,21 +362,32 @@ const OlistSync = () => {
             </div>;
           })}
         </div>
-        <div className="border-t border-dark-border">
-          <div className="flex flex-col gap-1 px-5 py-4 sm:flex-row sm:items-center sm:justify-between"><div><p className="text-sm font-bold text-dark-text">Referências por fornecedor</p><p className="mt-1 text-xs font-semibold text-dark-muted">Sugestões calculadas a partir das OPs finalizadas com fornecedor e rendimento.</p></div><span className="text-xs font-bold text-dark-muted">{supplierReferences.length.toLocaleString('pt-BR')} referências</span></div>
-          <div className="divide-y divide-dark-border">
-            {!supplierReferences.length && <p className="px-5 pb-4 text-sm font-semibold text-dark-muted">Nenhuma referência por fornecedor disponível.</p>}
-            {visibleSupplierReferences.map(item => <div key={`${item.familyKey}-${item.supplier}`} className="grid gap-2 px-5 py-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"><div><p className="text-sm font-bold text-dark-text">{item.supplier}</p><p className="mt-1 text-xs font-semibold text-dark-muted">{item.familyKey} · {yieldFamilyLabels[item.familyKey] || 'Família de corte'} · {item.sampleCount.toLocaleString('pt-BR')} OPs</p></div><p className="text-sm font-bold text-brand-primary">{Math.round(item.recommendedUnitsPerRoll!).toLocaleString('pt-BR')} un./rolo</p></div>)}
+        <div className="border-t border-dark-border p-5">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="inline-flex w-fit rounded-xl border border-dark-border bg-dark-input/50 p-1">
+              <button type="button" onClick={() => setImportView('suppliers')} className={`rounded-lg px-3 py-2 text-xs font-bold transition-colors cursor-pointer ${importView === 'suppliers' ? 'bg-brand-primary text-brand-contrast' : 'text-dark-muted hover:text-dark-text'}`}>Referências por fornecedor</button>
+              <button type="button" onClick={() => setImportView('files')} className={`rounded-lg px-3 py-2 text-xs font-bold transition-colors cursor-pointer ${importView === 'files' ? 'bg-brand-primary text-brand-contrast' : 'text-dark-muted hover:text-dark-text'}`}>Arquivos importados</button>
+            </div>
+            <p className="text-xs font-bold text-dark-muted">{importView === 'suppliers' ? `${supplierReferences.length.toLocaleString('pt-BR')} referências` : `${(importData?.runsTotal || 0).toLocaleString('pt-BR')} arquivos`}</p>
           </div>
-          {!!supplierReferences.length && <PaginationControls page={Math.min(supplierReferencesPage, supplierReferencesTotalPages)} pageSize={PAGE_SIZE} total={supplierReferences.length} label="Referências" onChange={setSupplierReferencesPage} />}
-        </div>
-        <div className="border-t border-dark-border">
-          <div className="flex items-center justify-between px-5 py-4"><div><p className="text-sm font-bold text-dark-text">Arquivos importados</p><p className="mt-1 text-xs font-semibold text-dark-muted">Status de cada CSV recebido da Olist.</p></div><span className="text-xs font-bold text-dark-muted">{(importData?.runsTotal || 0).toLocaleString('pt-BR')} arquivos</span></div>
-          <div className="divide-y divide-dark-border">
-            {!importData?.runs.length && <p className="px-5 pb-4 text-sm font-semibold text-dark-muted">Nenhum CSV de OPs finalizadas importado.</p>}
-            {importData?.runs.map(run => <div key={run.id} className="grid gap-3 px-5 py-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"><div className="min-w-0"><p className="truncate text-sm font-bold text-dark-text">{run.filename}</p><p className="mt-1 text-xs font-semibold text-dark-muted">{formatDateTime(run.startedAt)} · {run.totalRows.toLocaleString('pt-BR')} linhas</p>{run.errorMessage && <p className="mt-1 line-clamp-1 text-xs font-semibold text-amber-200">{run.errorMessage}</p>}</div><div className="flex flex-wrap gap-x-3 gap-y-1 text-xs font-bold text-dark-muted"><span>{run.imported} novas</span><span>{run.updated} atualizadas</span><span>{run.skipped} ignoradas</span><span className={run.failed ? 'text-red-300' : ''}>{run.failed} falhas</span></div></div>)}
+
+          <div className="mt-4 overflow-hidden rounded-xl border border-dark-border">
+            {importView === 'suppliers' ? <>
+              <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-dark-border bg-dark-input/50 px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-dark-muted"><span>Fornecedor e família</span><span>Rendimento</span></div>
+              <div className="divide-y divide-dark-border">
+                {!supplierReferences.length && <p className="p-5 text-sm font-semibold text-dark-muted">Nenhuma referência por fornecedor disponível.</p>}
+                {visibleSupplierReferences.map(item => <div key={`${item.familyKey}-${item.supplier}`} className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-4 py-3 sm:items-center"><div><p className="text-sm font-bold text-dark-text">{item.supplier}</p><p className="mt-1 text-xs font-semibold text-dark-muted">{item.familyKey} · {yieldFamilyLabels[item.familyKey] || 'Família de corte'} · {item.sampleCount.toLocaleString('pt-BR')} OPs</p></div><p className="text-sm font-bold text-brand-primary">{Math.round(item.recommendedUnitsPerRoll!).toLocaleString('pt-BR')} un./rolo</p></div>)}
+              </div>
+              {!!supplierReferences.length && <PaginationControls page={Math.min(supplierReferencesPage, supplierReferencesTotalPages)} pageSize={PAGE_SIZE} total={supplierReferences.length} label="Referências" onChange={setSupplierReferencesPage} />}
+            </> : <>
+              <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-dark-border bg-dark-input/50 px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-dark-muted"><span>Arquivo</span><span>Status da importação</span></div>
+              <div className="divide-y divide-dark-border">
+                {!importData?.runs.length && <p className="p-5 text-sm font-semibold text-dark-muted">Nenhum CSV de OPs finalizadas importado.</p>}
+                {importData?.runs.map(run => <div key={run.id} className="grid gap-3 px-4 py-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"><div className="min-w-0"><p className="truncate text-sm font-bold text-dark-text">{run.filename}</p><p className="mt-1 text-xs font-semibold text-dark-muted">{formatDateTime(run.startedAt)} · {run.totalRows.toLocaleString('pt-BR')} linhas</p>{run.errorMessage && <p className="mt-1 line-clamp-1 text-xs font-semibold text-amber-200">{run.errorMessage}</p>}</div><div className="flex flex-wrap gap-x-3 gap-y-1 text-xs font-bold text-dark-muted"><span>{run.imported} novas</span><span>{run.updated} atualizadas</span><span>{run.skipped} ignoradas</span><span className={run.failed ? 'text-red-300' : ''}>{run.failed} falhas</span></div></div>)}
+              </div>
+              {!!importData && <PaginationControls page={importData.runsPage} pageSize={importData.runsPageSize} total={importData.runsTotal} label="Arquivos" onChange={setImportRunsPage} />}
+            </>}
           </div>
-          {!!importData && <PaginationControls page={importData.runsPage} pageSize={importData.runsPageSize} total={importData.runsTotal} label="Arquivos" onChange={setImportRunsPage} />}
         </div>
       </section>