Refine cutting dashboard layout
This commit is contained in:
Cauê Faleiros
@@ -688,17 +688,25 @@ const Cutting = () => {
|
||||
</div>
|
||||
|
||||
{!!issueSummaries.length && (
|
||||
<div className="rounded-2xl border border-amber-400/20 bg-amber-400/5 p-4 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between gap-4">
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
|
||||
<div className="mb-3 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-amber-200">Pendências para fechar o Corte</h2>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
Estes pontos substituem as correções manuais que antes ficavam espalhadas no Excel.
|
||||
</p>
|
||||
<h2 className="text-sm font-bold text-dark-text">Pendências do plano</h2>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Itens que ainda precisam de regra, cor, tamanho ou rendimento.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-xs font-bold text-amber-300">
|
||||
{formatNumber(cutPlan.summary.rowsWithIssues)} SKUs
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsSettingsOpen(true)}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-input px-3 py-2 text-xs font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer"
|
||||
>
|
||||
<Settings2 className="h-4 w-4 text-brand-primary" />
|
||||
Corrigir
|
||||
</button>
|
||||
</div>
|
||||
<span className="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-xs font-bold text-amber-300">
|
||||
{formatNumber(cutPlan.summary.rowsWithIssues)} SKUs
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
|
||||
{issueSummaries.map(summary => (
|
||||
@@ -714,13 +722,13 @@ const Cutting = () => {
|
||||
setCurrentPage(1);
|
||||
setCorrectionPage(1);
|
||||
}}
|
||||
className="rounded-xl border border-dark-border bg-dark-card p-3 text-left transition-colors hover:border-amber-400/50 cursor-pointer"
|
||||
className="rounded-xl border border-dark-border bg-dark-input/60 p-3 text-left transition-colors hover:border-amber-400/50 cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-xs font-bold text-dark-text">{issueLabels[summary.issue]}</span>
|
||||
<span className="text-sm font-bold text-amber-300">{formatNumber(summary.count)}</span>
|
||||
</div>
|
||||
<p className="mt-2 text-[11px] font-medium leading-relaxed text-dark-muted">{issueHelp[summary.issue]}</p>
|
||||
<p className="mt-1 line-clamp-2 text-[11px] font-medium leading-relaxed text-dark-muted">{issueHelp[summary.issue]}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -728,24 +736,42 @@ const Cutting = () => {
|
||||
)}
|
||||
|
||||
{!!cutPlan.familySummaries.length && (
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-4">
|
||||
{cutPlan.familySummaries.map(summary => (
|
||||
<div key={summary.family.key} className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<span className={`inline-flex rounded-full border px-2.5 py-1 text-xs font-bold ${familyStyles[summary.family.key]}`}>
|
||||
{summary.family.materialLabel}
|
||||
</span>
|
||||
<h3 className="mt-3 text-sm font-bold text-dark-text">{summary.family.label}</h3>
|
||||
</div>
|
||||
<Scissors className="h-5 w-5 text-dark-muted" />
|
||||
</div>
|
||||
<p className="mt-4 text-2xl font-bold text-dark-text">{formatNumber(summary.suggestedCutQuantity)} un.</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{formatNumber(summary.skuCount)} SKUs · {formatNumber(summary.colorCount)} cores · {summary.estimatedRolls === null ? 'sem rendimento' : `${formatNumber(summary.estimatedRolls)} rolos`}
|
||||
</p>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-dark-text">Corte por família</h2>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Volume agrupado para orientar compra e corte.</p>
|
||||
</div>
|
||||
))}
|
||||
<Scissors className="h-5 w-5 text-dark-muted" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-5">
|
||||
{cutPlan.familySummaries.map(summary => (
|
||||
<button
|
||||
key={summary.family.key}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFamilyFilter(summary.family.key);
|
||||
setCutFilter('need');
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="rounded-xl border border-dark-border bg-dark-input/50 p-3 text-left transition-colors hover:border-brand-primary cursor-pointer"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<span className={`inline-flex rounded-full border px-2.5 py-1 text-[11px] font-bold ${familyStyles[summary.family.key]}`}>
|
||||
{summary.family.materialLabel}
|
||||
</span>
|
||||
<h3 className="mt-2 truncate text-sm font-bold text-dark-text">{summary.family.label}</h3>
|
||||
</div>
|
||||
<span className="text-[11px] font-bold text-dark-muted">{formatNumber(summary.skuCount)} SKUs</span>
|
||||
</div>
|
||||
<p className="mt-3 text-2xl font-bold text-dark-text">{formatNumber(summary.suggestedCutQuantity)} un.</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{formatNumber(summary.colorCount)} cores · {summary.estimatedRolls === null ? 'sem rendimento' : `${formatNumber(summary.estimatedRolls)} rolos`}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -820,79 +846,76 @@ const Cutting = () => {
|
||||
) : (
|
||||
<div className={`overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-dark-border dark:bg-dark-card ${isRefreshing ? 'refreshing-content' : ''}`} aria-busy={isRefreshing}>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[1420px] table-fixed text-left text-sm">
|
||||
<table className="w-full min-w-[1180px] table-fixed text-left text-sm">
|
||||
<colgroup>
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[360px]" />
|
||||
<col className="w-[150px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[100px]" />
|
||||
<col className="w-[130px]" />
|
||||
<col className="w-[105px]" />
|
||||
<col className="w-[320px]" />
|
||||
<col className="w-[110px]" />
|
||||
<col className="w-[130px]" />
|
||||
<col className="w-[145px]" />
|
||||
<col className="w-[115px]" />
|
||||
<col className="w-[125px]" />
|
||||
<col className="w-[140px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[150px]" />
|
||||
<col className="w-[80px]" />
|
||||
<col className="w-[130px]" />
|
||||
<col className="w-[110px]" />
|
||||
</colgroup>
|
||||
<thead className="border-b border-zinc-100 bg-zinc-50 text-zinc-500 dark:border-dark-border dark:bg-dark-header dark:text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">ID Produto</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Descrição</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Família</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Cor</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Tamanho</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Demanda proj.</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Estoque</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Disponível</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Necessidade</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Rolos</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Pendências</th>
|
||||
<th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">ID Produto</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Descrição</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Família</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Variação</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Demanda</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Estoque</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Necessidade</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Rolos</th>
|
||||
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Pendências</th>
|
||||
<th className="px-4 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{paginatedRows.map(row => (
|
||||
<tr key={row.id} className="transition-colors hover:bg-zinc-50/80 dark:hover:bg-dark-input/50">
|
||||
<td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{row.id}</td>
|
||||
<td className="max-w-0 px-6 py-2.5">
|
||||
<td className="px-4 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{row.id}</td>
|
||||
<td className="max-w-0 px-4 py-2.5">
|
||||
<div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={row.name}>{row.name}</div>
|
||||
<div className="text-[10px] font-medium text-zinc-400 dark:text-dark-muted">
|
||||
Média: {formatNumber(row.dailySales, 2)} un./dia · Cobertura: {formatDays(row.daysOfCover)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<td className="px-4 py-2.5">
|
||||
<span className={`inline-flex whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-bold ${familyStyles[row.family.key]}`}>
|
||||
{row.family.materialLabel}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<span className="inline-flex max-w-full items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-2.5 py-1 text-xs font-bold text-sky-300">
|
||||
<Palette className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">{row.color || '-'}</span>
|
||||
</span>
|
||||
<td className="px-4 py-2.5">
|
||||
<div className="flex min-w-0 items-center gap-1.5">
|
||||
<span className="inline-flex min-w-0 max-w-[92px] items-center gap-1.5 rounded-full border border-sky-400/25 bg-sky-400/10 px-2 py-1 text-xs font-bold text-sky-300">
|
||||
<Palette className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">{row.color || '-'}</span>
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2 py-1 text-xs font-bold text-emerald-300">
|
||||
<Ruler className="h-3 w-3" />
|
||||
{row.size || '-'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2.5 py-1 text-xs font-bold text-emerald-300">
|
||||
<Ruler className="h-3.5 w-3.5" />
|
||||
{row.size || '-'}
|
||||
</span>
|
||||
<td className="px-4 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">{formatNumber(row.projectedDemand, 1)} un.</td>
|
||||
<td className="px-4 py-2.5 whitespace-nowrap">
|
||||
<div className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.stock)} un.</div>
|
||||
{!!row.openProductionQuantity && (
|
||||
<div className="text-[10px] font-semibold text-dark-muted">Disp. {formatNumber(row.availableQuantity)} un.</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">{formatNumber(row.projectedDemand, 1)} un.</td>
|
||||
<td className="px-6 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">{formatNumber(row.stock)} un.</td>
|
||||
<td className="px-6 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">
|
||||
{formatNumber(row.availableQuantity)} un.
|
||||
{!!row.openProductionQuantity && <span className="ml-1 text-xs text-dark-muted">incl. OP</span>}
|
||||
</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap">
|
||||
<td className="px-4 py-2.5 whitespace-nowrap">
|
||||
<span className={row.suggestedCutQuantity > 0 ? 'font-bold text-red-300' : 'font-bold text-emerald-300'}>
|
||||
{formatNumber(row.suggestedCutQuantity)} un.
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">
|
||||
<td className="px-4 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">
|
||||
{row.estimatedRolls === null ? '-' : formatNumber(row.estimatedRolls)}
|
||||
</td>
|
||||
<td className="px-6 py-2.5">{renderIssueBadge(row)}</td>
|
||||
<td className="px-4 py-2.5">{renderIssueBadge(row)}</td>
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<Link
|
||||
to={`/products/${row.id}`}
|
||||
|
||||
Reference in New Issue
Block a user