Use Tiny compositions for purchase planning
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m41s

This commit is contained in:
Cauê Faleiros
2026-08-03 10:22:39 -03:00
parent 1a3fed3dda
commit e993bfdaf3
11 changed files with 544 additions and 40 deletions

View File

@@ -1997,8 +1997,9 @@ const PurchaseNeedsScreen = () => {
</tbody>
</table>
) : (
<table className="w-full min-w-[920px] table-fixed border-collapse">
<table className="w-full min-w-[1120px] table-fixed border-collapse">
<colgroup>
<col className="w-[280px]" />
<col />
<col className="w-[120px]" />
<col className="w-[120px]" />
@@ -2008,9 +2009,10 @@ const PurchaseNeedsScreen = () => {
</colgroup>
<thead className="border-b border-dark-border bg-dark-input/40 text-xs font-bold uppercase tracking-widest text-dark-muted">
<tr>
<th scope="col" className="px-4 py-3 text-left">Material</th>
<th scope="col" className="px-4 py-3 text-right">Planejado</th>
<th scope="col" className="px-4 py-3 text-right">Estoque</th>
<th scope="col" className="px-4 py-3 text-left">Demanda de produto</th>
<th scope="col" className="px-4 py-3 text-left">Material necessário</th>
<th scope="col" className="px-4 py-3 text-right">Necessário</th>
<th scope="col" className="px-4 py-3 text-right">Estoque atual</th>
<th scope="col" className="px-4 py-3 text-right">Pendente</th>
<th scope="col" className="px-4 py-3 text-right">Comprar</th>
<th scope="col" className="px-4 py-3 text-left">Cobertura</th>
@@ -2021,6 +2023,19 @@ const PurchaseNeedsScreen = () => {
const referenceProduct = need.products?.[0];
return (
<tr key={need.material}>
<td className="px-4 py-4 align-middle">
{need.products?.length ? (
<div className="min-w-0">
{need.products.slice(0, 2).map(product => (
<div key={product.productId} className="mb-1 min-w-0 last:mb-0" title={product.name}>
<p className="truncate text-xs font-bold text-dark-text">{product.name || product.productId}</p>
<p className="text-[10px] font-semibold text-dark-muted">SKU {product.productId} · demanda {formatNumber(product.suggestedQuantity)} un.</p>
</div>
))}
{need.products.length > 2 && <p className="mt-1 text-[10px] font-semibold text-dark-muted">+{need.products.length - 2} SKUs impactados</p>}
</div>
) : <span className="text-xs font-semibold text-dark-muted">Plano manual</span>}
</td>
<td className="px-4 py-4 align-middle">
<div className="min-w-0">
<p className="text-sm font-bold text-dark-text">{getNeedDisplayName(need)}</p>