blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: blyzer:d3ddc173812b87bf561a9e11ef667091eff08dfc
Branches Tags
blyzer:main
...
compare: blyzer:090fa21ba5ff62417fe6bcfa838dfbddabe492ff
Branches Tags
blyzer:main

3 Commits
d3ddc17381 ... 090fa21ba5

Author SHA1 Message Date
Cauê Faleiros
090fa21ba5 Fix cutting settings overlay coverage
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 50s
Details
2026-07-08 13:49:33 -03:00
Cauê Faleiros
2ff426559a Improve light theme accent contrast 2026-07-08 13:45:18 -03:00
Cauê Faleiros
248acee2b8 Refine cutting dashboard layout 2026-07-08 13:39:47 -03:00
2 changed files with 207 additions and 75 deletions
Expand all files Collapse all files

104
src/index.css
View File

@@ -150,3 +150,107 @@
transparent; transparent;
} }
} }
@layer utilities {
html[data-theme='offwhite'] .text-red-300,
html[data-theme='offwhite'] .text-red-400 {
color: #b42318 !important;
}
html[data-theme='offwhite'] .text-amber-100,
html[data-theme='offwhite'] .text-amber-200,
html[data-theme='offwhite'] .text-amber-300,
html[data-theme='offwhite'] .text-amber-400 {
color: #9a6700 !important;
}
html[data-theme='offwhite'] .text-sky-300,
html[data-theme='offwhite'] .text-sky-400,
html[data-theme='offwhite'] .text-sky-500 {
color: #0369a1 !important;
}
html[data-theme='offwhite'] .text-emerald-300,
html[data-theme='offwhite'] .text-emerald-400,
html[data-theme='offwhite'] .text-emerald-500 {
color: #047857 !important;
}
html[data-theme='offwhite'] .text-purple-300,
html[data-theme='offwhite'] .text-purple-400,
html[data-theme='offwhite'] .text-purple-500 {
color: #7e22ce !important;
}
html[data-theme='offwhite'] .text-zinc-300,
html[data-theme='offwhite'] .text-zinc-400 {
color: #5f5a52 !important;
}
html[data-theme='offwhite'] .bg-red-400\/10,
html[data-theme='offwhite'] .bg-red-500\/10 {
background-color: rgba(180, 35, 24, 0.12) !important;
}
html[data-theme='offwhite'] .bg-amber-400\/10,
html[data-theme='offwhite'] .bg-amber-500\/10 {
background-color: rgba(154, 103, 0, 0.12) !important;
}
html[data-theme='offwhite'] .bg-sky-400\/10,
html[data-theme='offwhite'] .bg-sky-500\/10 {
background-color: rgba(3, 105, 161, 0.12) !important;
}
html[data-theme='offwhite'] .bg-emerald-400\/10,
html[data-theme='offwhite'] .bg-emerald-500\/10 {
background-color: rgba(4, 120, 87, 0.12) !important;
}
html[data-theme='offwhite'] .bg-purple-400\/10,
html[data-theme='offwhite'] .bg-purple-500\/10 {
background-color: rgba(126, 34, 206, 0.12) !important;
}
html[data-theme='offwhite'] .bg-zinc-500\/10 {
background-color: rgba(95, 90, 82, 0.11) !important;
}
html[data-theme='offwhite'] .border-red-400\/25,
html[data-theme='offwhite'] .border-red-400\/30,
html[data-theme='offwhite'] .border-red-400\/35,
html[data-theme='offwhite'] .border-red-500\/30 {
border-color: rgba(180, 35, 24, 0.28) !important;
}
html[data-theme='offwhite'] .border-amber-400\/20,
html[data-theme='offwhite'] .border-amber-400\/25,
html[data-theme='offwhite'] .border-amber-400\/30,
html[data-theme='offwhite'] .border-amber-400\/35,
html[data-theme='offwhite'] .border-amber-500\/30 {
border-color: rgba(154, 103, 0, 0.30) !important;
}
html[data-theme='offwhite'] .border-sky-400\/25,
html[data-theme='offwhite'] .border-sky-400\/30,
html[data-theme='offwhite'] .border-sky-400\/35 {
border-color: rgba(3, 105, 161, 0.30) !important;
}
html[data-theme='offwhite'] .border-emerald-400\/25,
html[data-theme='offwhite'] .border-emerald-400\/30,
html[data-theme='offwhite'] .border-emerald-400\/35,
html[data-theme='offwhite'] .border-emerald-500\/30 {
border-color: rgba(4, 120, 87, 0.30) !important;
}
html[data-theme='offwhite'] .border-purple-400\/25,
html[data-theme='offwhite'] .border-purple-400\/30 {
border-color: rgba(126, 34, 206, 0.28) !important;
}
html[data-theme='offwhite'] .border-zinc-500\/30,
html[data-theme='offwhite'] .border-zinc-500\/35 {
border-color: rgba(95, 90, 82, 0.28) !important;
}
}

154
src/pages/Cutting.tsx
View File

@@ -273,8 +273,13 @@ const Cutting = () => {
} }
}; };
const previousOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
document.addEventListener('keydown', closeOnEscape); document.addEventListener('keydown', closeOnEscape);
return () => document.removeEventListener('keydown', closeOnEscape); return () => {
document.body.style.overflow = previousOverflow;
document.removeEventListener('keydown', closeOnEscape);
};
}, [isSettingsOpen]); }, [isSettingsOpen]);
const updateFamilyYield = (familyKey: CutFamilyKey, value: string) => { const updateFamilyYield = (familyKey: CutFamilyKey, value: string) => {
@@ -431,14 +436,14 @@ const Cutting = () => {
{isSettingsOpen && ( {isSettingsOpen && (
<div <div
className="fixed inset-0 z-50 flex justify-end bg-black/60 backdrop-blur-sm" className="fixed inset-0 z-50 flex h-dvh justify-end overflow-hidden bg-zinc-950/80 backdrop-blur-md dark:bg-black/75"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-label="Regras de corte" aria-label="Regras de corte"
onClick={() => setIsSettingsOpen(false)} onClick={() => setIsSettingsOpen(false)}
> >
<div <div
className="h-full w-full max-w-6xl space-y-4 overflow-y-auto border-l border-dark-border bg-dark-card p-5 shadow-2xl" className="h-dvh w-full max-w-6xl space-y-4 overflow-y-auto border-l border-dark-border bg-dark-card p-5 shadow-2xl"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
> >
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"> <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
@@ -688,17 +693,25 @@ const Cutting = () => {
</div> </div>
{!!issueSummaries.length && ( {!!issueSummaries.length && (
<div className="rounded-2xl border border-amber-400/20 bg-amber-400/5 p-4 shadow-sm"> <div className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
<div className="mb-4 flex items-start justify-between gap-4"> <div className="mb-3 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div> <div>
<h2 className="text-sm font-bold text-amber-200">Pendências para fechar o Corte</h2> <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"> <p className="mt-1 text-xs font-semibold text-dark-muted">Itens que ainda precisam de regra, cor, tamanho ou rendimento.</p>
Estes pontos substituem as correções manuais que antes ficavam espalhadas no Excel.
</p>
</div> </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"> <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 {formatNumber(cutPlan.summary.rowsWithIssues)} SKUs
</span> </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>
</div> </div>
<div className="grid grid-cols-1 gap-3 md:grid-cols-4"> <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
{issueSummaries.map(summary => ( {issueSummaries.map(summary => (
@@ -714,13 +727,13 @@ const Cutting = () => {
setCurrentPage(1); setCurrentPage(1);
setCorrectionPage(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"> <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-xs font-bold text-dark-text">{issueLabels[summary.issue]}</span>
<span className="text-sm font-bold text-amber-300">{formatNumber(summary.count)}</span> <span className="text-sm font-bold text-amber-300">{formatNumber(summary.count)}</span>
</div> </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> </button>
))} ))}
</div> </div>
@@ -728,25 +741,43 @@ const Cutting = () => {
)} )}
{!!cutPlan.familySummaries.length && ( {!!cutPlan.familySummaries.length && (
<div className="grid grid-cols-1 gap-4 xl:grid-cols-4"> <div className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
{cutPlan.familySummaries.map(summary => ( <div className="mb-3 flex items-center justify-between gap-3">
<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> <div>
<span className={`inline-flex rounded-full border px-2.5 py-1 text-xs font-bold ${familyStyles[summary.family.key]}`}> <h2 className="text-sm font-bold text-dark-text">Corte por família</h2>
{summary.family.materialLabel} <p className="mt-1 text-xs font-semibold text-dark-muted">Volume agrupado para orientar compra e corte.</p>
</span>
<h3 className="mt-3 text-sm font-bold text-dark-text">{summary.family.label}</h3>
</div> </div>
<Scissors className="h-5 w-5 text-dark-muted" /> <Scissors className="h-5 w-5 text-dark-muted" />
</div> </div>
<p className="mt-4 text-2xl font-bold text-dark-text">{formatNumber(summary.suggestedCutQuantity)} un.</p> <div className="grid grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-5">
<p className="mt-1 text-xs font-semibold text-dark-muted"> {cutPlan.familySummaries.map(summary => (
{formatNumber(summary.skuCount)} SKUs · {formatNumber(summary.colorCount)} cores · {summary.estimatedRolls === null ? 'sem rendimento' : `${formatNumber(summary.estimatedRolls)} rolos`} <button
</p> 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> </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>
</div>
)} )}
<div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[1fr_170px_170px_170px_190px]"> <div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[1fr_170px_170px_170px_190px]">
@@ -820,79 +851,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-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"> <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> <colgroup>
<col className="w-[120px]" /> <col className="w-[105px]" />
<col className="w-[360px]" /> <col className="w-[320px]" />
<col className="w-[150px]" />
<col className="w-[120px]" />
<col className="w-[100px]" />
<col className="w-[130px]" />
<col className="w-[110px]" /> <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-[140px]" />
<col className="w-[120px]" /> <col className="w-[80px]" />
<col className="w-[150px]" /> <col className="w-[130px]" />
<col className="w-[110px]" /> <col className="w-[110px]" />
</colgroup> </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"> <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> <tr>
<th className="px-6 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">ID Produto</th>
<th className="px-6 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">Descrição</th>
<th className="px-6 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">Família</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Cor</th> <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Variação</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Tamanho</th> <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Demanda</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Demanda proj.</th> <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Estoque</th>
<th className="px-6 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-6 py-4 text-[10px] font-bold uppercase tracking-wider">Disponível</th> <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Rolos</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Necessidade</th> <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Pendências</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Rolos</th> <th className="px-4 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</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>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border"> <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
{paginatedRows.map(row => ( {paginatedRows.map(row => (
<tr key={row.id} className="transition-colors hover:bg-zinc-50/80 dark:hover:bg-dark-input/50"> <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="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-6 py-2.5"> <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="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"> <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)} Média: {formatNumber(row.dailySales, 2)} un./dia · Cobertura: {formatDays(row.daysOfCover)}
</div> </div>
</td> </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]}`}> <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} {row.family.materialLabel}
</span> </span>
</td> </td>
<td className="px-6 py-2.5"> <td className="px-4 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"> <div className="flex min-w-0 items-center gap-1.5">
<Palette className="h-3.5 w-3.5 shrink-0" /> <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 className="truncate">{row.color || '-'}</span>
</span> </span>
</td> <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">
<td className="px-6 py-2.5"> <Ruler className="h-3 w-3" />
<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 || '-'} {row.size || '-'}
</span> </span>
</div>
</td> </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-4 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-4 py-2.5 whitespace-nowrap">
<td className="px-6 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text"> <div className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.stock)} un.</div>
{formatNumber(row.availableQuantity)} un. {!!row.openProductionQuantity && (
{!!row.openProductionQuantity && <span className="ml-1 text-xs text-dark-muted">incl. OP</span>} <div className="text-[10px] font-semibold text-dark-muted">Disp. {formatNumber(row.availableQuantity)} un.</div>
)}
</td> </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'}> <span className={row.suggestedCutQuantity > 0 ? 'font-bold text-red-300' : 'font-bold text-emerald-300'}>
{formatNumber(row.suggestedCutQuantity)} un. {formatNumber(row.suggestedCutQuantity)} un.
</span> </span>
</td> </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)} {row.estimatedRolls === null ? '-' : formatNumber(row.estimatedRolls)}
</td> </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"> <td className="px-4 py-2.5 text-right">
<Link <Link
to={`/products/${row.id}`} to={`/products/${row.id}`}