Tighten purchase needs setup table

This commit is contained in:
Cauê Faleiros
2026-07-21 14:02:12 -03:00
parent b4e51eb8eb
commit c7536d9097

View File

@@ -1848,11 +1848,11 @@ const PurchaseNeedsScreen = () => {
const mappedNeedCount = summary.purchaseNeeds.length - missingReferenceCount; const mappedNeedCount = summary.purchaseNeeds.length - missingReferenceCount;
const impactedSkuCount = countImpactedSkus(summary.purchaseNeeds); const impactedSkuCount = countImpactedSkus(summary.purchaseNeeds);
const setupMode = missingReferenceCount > 0 && missingReferenceCount >= mappedNeedCount; const setupMode = missingReferenceCount > 0 && missingReferenceCount >= mappedNeedCount;
const pageTitle = setupMode ? 'Pendências para Compra' : 'Necessidade de Compra'; const pageTitle = 'Necessidade de Compra';
const pageSubtitle = setupMode const pageSubtitle = setupMode
? 'Complete referências de consumo para liberar o cálculo real de compra por material.' ? 'Complete referências de consumo para liberar o cálculo real de compra por material.'
: 'Materiais abaixo do mínimo e necessidade projetada para compra.'; : 'Materiais abaixo do mínimo e necessidade projetada para compra.';
const panelTitle = setupMode ? 'Fila de cadastro para compra' : 'Necessidade por material'; const panelTitle = setupMode ? 'Pendências de cadastro' : 'Necessidade por material';
const panelSubtitle = setupMode const panelSubtitle = setupMode
? 'Priorize os SKUs com maior impacto e cadastre material, rendimento e unidade de consumo.' ? 'Priorize os SKUs com maior impacto e cadastre material, rendimento e unidade de consumo.'
: 'Planejado - estoque aprovado - recebimentos pendentes.'; : 'Planejado - estoque aprovado - recebimentos pendentes.';
@@ -1937,14 +1937,14 @@ const PurchaseNeedsScreen = () => {
<div className="mt-4 overflow-hidden rounded-xl border border-dark-border"> <div className="mt-4 overflow-hidden rounded-xl border border-dark-border">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
{setupMode ? ( {setupMode ? (
<table className="w-full min-w-[980px] table-fixed border-collapse"> <table className="w-full min-w-[880px] table-fixed border-collapse">
<colgroup> <colgroup>
<col /> <col className="w-[34%]" />
<col className="w-[120px]" /> <col className="w-[12%]" />
<col className="w-[130px]" /> <col className="w-[14%]" />
<col className="w-[150px]" /> <col className="w-[16%]" />
<col className="w-[150px]" /> <col className="w-[14%]" />
<col className="w-[140px]" /> <col className="w-[10%]" />
</colgroup> </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-input/40 text-xs font-bold uppercase tracking-widest text-dark-muted">
<tr> <tr>
@@ -1978,21 +1978,19 @@ const PurchaseNeedsScreen = () => {
<td className="px-4 py-4 text-right align-middle text-sm font-bold text-dark-text">{formatNumber(stockQuantity, 0)} un.</td> <td className="px-4 py-4 text-right align-middle text-sm font-bold text-dark-text">{formatNumber(stockQuantity, 0)} un.</td>
<td className="px-4 py-4 text-right align-middle text-sm font-bold text-amber-300">{formatNeedQuantity(need, need.purchaseKg)}</td> <td className="px-4 py-4 text-right align-middle text-sm font-bold text-amber-300">{formatNeedQuantity(need, need.purchaseKg)}</td>
<td className="px-4 py-4 align-middle"> <td className="px-4 py-4 align-middle">
<div className="flex flex-col gap-1"> <span className="inline-flex w-fit rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300">
<span className="w-fit rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300"> {getNeedPendingLabel(need)}
{getNeedPendingLabel(need)} </span>
</span>
<span className="text-xs font-semibold text-dark-muted">Referência de consumo incompleta</span>
</div>
</td> </td>
<td className="px-4 py-4 text-right align-middle"> <td className="px-4 py-4 text-right align-middle">
{referenceProduct ? ( {referenceProduct ? (
<RouterLink <RouterLink
to={buildConsumptionReferencePath({ sku: referenceProduct.productId, name: referenceProduct.name })} to={buildConsumptionReferencePath({ sku: referenceProduct.productId, name: referenceProduct.name })}
className="inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-dark-input px-3 text-sm font-bold text-dark-text transition-colors hover:bg-dark-border" className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-dark-input text-dark-text transition-colors hover:bg-dark-border"
title={`Cadastrar referência do SKU ${referenceProduct.productId}`}
aria-label={`Cadastrar referência do SKU ${referenceProduct.productId}`}
> >
<Pencil className="h-4 w-4" /> <Pencil className="h-4 w-4" />
Cadastrar
</RouterLink> </RouterLink>
) : ( ) : (
<span className="text-xs font-semibold text-dark-muted">Sem SKU</span> <span className="text-xs font-semibold text-dark-muted">Sem SKU</span>