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

Unify product color badges

Browse Source
This commit is contained in:
Cauê Faleiros
2026-07-08 14:34:53 -03:00
parent 7668b83de6
commit 0b883dd8c2
3 changed files with 69 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Cutting.tsx
View File

@@ -3,6 +3,7 @@ import { Link, useOutletContext } from 'react-router-dom';
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 ProductColorBadge from '../components/ProductColorBadge';
import RefreshStatus from '../components/RefreshStatus';
import { CUT_FAMILY_RULES, buildCutPlan, buildOpenProductionByProductId, type CutFamilyKey, type CutIssue, type CutPlanSkuRow, type CutProductOverride } from '../analytics/cutting';
import { exportToCSV, fetchCuttingSettings, fetchProductAnalytics, fetchProductionOrders, saveCuttingSettings } from '../dataService';
@@ -895,10 +896,7 @@ const Cutting = () => {
</td>
<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>
<ProductColorBadge label={row.color} className="max-w-[92px] px-2" />
<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 || '-'}

44
src/pages/ProductGroupDetails.tsx
View File

@@ -4,6 +4,7 @@ import { DollarSign, Package, Palette, Ruler, TrendingDown, TrendingUp, Warehous
import BackButton from '../components/BackButton';
import DateRangePicker from '../components/DateRangePicker';
import PaginationControls from '../components/PaginationControls';
import ProductColorBadge, { ProductColorSwatch, getProductColor } from '../components/ProductColorBadge';
import RefreshStatus from '../components/RefreshStatus';
import { fetchProductAnalytics } from '../dataService';
import { decodeProductGroupKey, normalizeProductText, parseProductName } from '../productParsing';
@@ -26,25 +27,6 @@ type BreakdownRow = {
const BREAKDOWN_LIMIT = 12;
const COLOR_SWATCHES: Array<{ pattern: string; color: string }> = [
{ pattern: 'preto', color: '#171717' },
{ pattern: 'branco', color: '#f8fafc' },
{ pattern: 'bege', color: '#d7bf9a' },
{ pattern: 'café', color: '#79553d' },
{ pattern: 'cafe', color: '#79553d' },
{ pattern: 'perola', color: '#e7dfcf' },
{ pattern: 'pérola', color: '#e7dfcf' },
{ pattern: 'marinho', color: '#172554' },
{ pattern: 'bordo', color: '#6b1226' },
{ pattern: 'bordô', color: '#6b1226' },
{ pattern: 'verde', color: '#166534' },
{ pattern: 'rosa', color: '#f0a6bf' },
{ pattern: 'cinza', color: '#8f8f8f' },
{ pattern: 'vermelho', color: '#b91c1c' },
{ pattern: 'grafite', color: '#3f3f46' },
{ pattern: 'azul', color: '#2563eb' }
];
const getRangeDays = (range: DateRange) => {
const start = new Date(range.start);
const end = new Date(range.end);
@@ -67,26 +49,11 @@ const formatDays = (value: number | null) => {
return `${formatNumber(value, value < 10 ? 1 : 0)} dias`;
};
const getSwatchColor = (label: string) => {
const normalizedLabel = label.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase();
return COLOR_SWATCHES.find(item => normalizedLabel.includes(item.pattern.normalize('NFD').replace(/\p{Diacritic}/gu, '')))?.color || '#64748b';
};
const getBarColor = (label: string) => {
const color = getSwatchColor(label);
const color = getProductColor(label);
return `color-mix(in srgb, ${color} 74%, var(--color-dark-text) 26%)`;
};
const ColorSwatch = ({ label, className = 'h-2.5 w-2.5' }: { label: string; className?: string }) => (
<span
className={`${className} shrink-0 rounded-sm`}
style={{
backgroundColor: getSwatchColor(label),
boxShadow: '0 0 0 1px var(--color-dark-card), 0 0 0 2px var(--color-dark-border)'
}}
/>
);
const buildBreakdown = (rows: VariantRow[], field: 'color' | 'size') => {
const totals = new Map<string, BreakdownRow>();
@@ -147,7 +114,7 @@ const BreakdownPanel = ({
return (
<div key={row.label} className="grid grid-cols-[minmax(7.5rem,9rem)_1fr_6rem] items-center gap-3">
<div className="flex min-w-0 items-center gap-2">
{type === 'color' ? <ColorSwatch label={row.label} /> : <span className="h-2.5 w-2.5 shrink-0 rounded-sm bg-sky-400" />}
{type === 'color' ? <ProductColorSwatch label={row.label} /> : <span className="h-2.5 w-2.5 shrink-0 rounded-sm bg-sky-400" />}
<span className="truncate text-xs font-bold text-dark-text" title={row.label}>
{type === 'size' && row.label !== 'Sem tamanho' ? `Tam. ${row.label}` : row.label}
</span>
@@ -439,10 +406,7 @@ const ProductGroupDetails = () => {
<div className="text-[10px] font-medium text-zinc-400 dark:text-dark-muted">Preço Atual: {formatCurrency(row.lastPrice)}</div>
</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">
<ColorSwatch label={row.color || 'Sem cor'} className="h-2 w-2" />
<span className="truncate">{row.color || '-'}</span>
</span>
<ProductColorBadge label={row.color} className="max-w-[8rem]" />
</td>
<td className="px-6 py-2.5">
<span className="inline-flex rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2.5 py-1 text-xs font-bold text-emerald-300">