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

Clean up cutting settings UI
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 33s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-07-08 12:39:41 -03:00
parent c736dbe873
commit d3ddc17381
1 changed files with 64 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/Cutting.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { AlertTriangle, ClipboardList, Download, Layers3, Package, Palette, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2 } from 'lucide-react';
import { AlertTriangle, ClipboardList, Download, Layers3, Package, Palette, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2, X } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import PaginationControls from '../components/PaginationControls';
import RefreshStatus from '../components/RefreshStatus';
@@ -264,6 +264,19 @@ const Cutting = () => {
setCorrectionPage(1);
}, [correctionIssueFilter, dateRange, targetCoverageDays]);
useEffect(() => {
if (!isSettingsOpen) return undefined;
const closeOnEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setIsSettingsOpen(false);
}
};
document.addEventListener('keydown', closeOnEscape);
return () => document.removeEventListener('keydown', closeOnEscape);
}, [isSettingsOpen]);
const updateFamilyYield = (familyKey: CutFamilyKey, value: string) => {
const parsedValue = Number(value);
setCuttingSettings(current => {
@@ -358,10 +371,17 @@ const Cutting = () => {
return <span className="text-xs font-bold text-emerald-300">OK</span>;
}
const issueSummary = row.issues.map(issue => issueLabels[issue]).join(', ');
return (
<span className="inline-flex items-center gap-1.5 rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300">
<AlertTriangle className="h-3.5 w-3.5" />
{row.issues.map(issue => issueLabels[issue]).join(', ')}
<span
className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300"
title={issueSummary}
>
<AlertTriangle className="h-3.5 w-3.5 shrink-0" />
<span className="truncate">
{row.issues.length === 1 ? issueLabels[row.issues[0]] : `${row.issues.length} pendências`}
</span>
</span>
);
};
@@ -410,7 +430,17 @@ const Cutting = () => {
<RefreshStatus isRefreshing={isRefreshing} />
{isSettingsOpen && (
<div className="space-y-4 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
<div
className="fixed inset-0 z-50 flex justify-end bg-black/60 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-label="Regras de corte"
onClick={() => setIsSettingsOpen(false)}
>
<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"
onClick={(event) => event.stopPropagation()}
>
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div>
<h2 className="text-sm font-bold text-dark-text">Regras de Corte</h2>
@@ -418,23 +448,34 @@ const Cutting = () => {
{configuredYieldCount} rendimentos configurados · {productOverrideCount} correções de produto
</p>
</div>
<button
type="button"
onClick={clearSettings}
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-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer"
>
<RotateCcw className="h-4 w-4" />
Limpar regras
</button>
<button
type="button"
onClick={() => void persistSettings()}
disabled={saveStatus === 'saving' || !hasUnsavedSettings}
className="inline-flex items-center justify-center gap-2 rounded-xl border border-brand-primary/30 bg-brand-primary/15 px-3 py-2 text-xs font-bold text-brand-primary transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
>
<SaveIcon className="h-4 w-4" />
{saveStatus === 'saving' ? 'Salvando' : 'Salvar regras'}
</button>
<div className="flex flex-wrap items-center gap-2">
<button
type="button"
onClick={clearSettings}
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-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer"
>
<RotateCcw className="h-4 w-4" />
Limpar regras
</button>
<button
type="button"
onClick={() => void persistSettings()}
disabled={saveStatus === 'saving' || !hasUnsavedSettings}
className="inline-flex items-center justify-center gap-2 rounded-xl border border-brand-primary/30 bg-brand-primary/15 px-3 py-2 text-xs font-bold text-brand-primary transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
>
<SaveIcon className="h-4 w-4" />
{saveStatus === 'saving' ? 'Salvando' : 'Salvar regras'}
</button>
<button
type="button"
onClick={() => setIsSettingsOpen(false)}
className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-dark-text cursor-pointer"
title="Fechar"
aria-label="Fechar regras"
>
<X className="h-4 w-4" />
</button>
</div>
</div>
{saveStatus === 'saved' && (
<p className="text-xs font-semibold text-emerald-300">Regras salvas no banco de dados.</p>
@@ -584,6 +625,7 @@ const Cutting = () => {
</div>
)}
</div>
</div>
</div>
)}