mirror of
https://github.com/christianvidalwolf-prog/Craze-Data-check.git
synced 2026-08-03 11:35:24 +02:00
feat: add Pricing & Units tab for Level error monitoring
New tab shows all products with missing UVP/SRP pricing or invalid container units (40'HC/HQ = 0 or 1, missing Units/Outer). Price fields are inline-editable with Supabase sync. Columns are detected dynamically from Excel headers so future SRP countries (e.g. Poland) appear automatically. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
d48e2cb0ff
commit
38466b3876
+14
-3
@@ -10,6 +10,7 @@ import { getAllSyncedRows, saveRowToSupabase } from './lib/supabase';
|
||||
import { getStoredSession, signOut, type AuthSession } from './lib/auth';
|
||||
import { LoginPage } from './components/LoginPage';
|
||||
import { DimensionsView } from './components/DimensionsView';
|
||||
import { PricingView } from './components/PricingView';
|
||||
import { UndoToast } from './components/UndoToast';
|
||||
|
||||
export default function App() {
|
||||
@@ -31,7 +32,7 @@ export default function App() {
|
||||
fileDate: null,
|
||||
hasUnsavedChanges: false
|
||||
});
|
||||
const [activeModule, setActiveModule] = useState<'descriptions' | 'matrix' | 'dimensions'>('descriptions');
|
||||
const [activeModule, setActiveModule] = useState<'descriptions' | 'matrix' | 'dimensions' | 'pricing'>('descriptions');
|
||||
const [undoHistory, setUndoHistory] = useState<{ data: ExcelRow[], message: string }[]>([]);
|
||||
const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
|
||||
const [isLoadingDefault, setIsLoadingDefault] = useState(true);
|
||||
@@ -354,14 +355,24 @@ export default function App() {
|
||||
)}
|
||||
|
||||
{activeModule === 'dimensions' && (
|
||||
<DimensionsView
|
||||
data={appState.data}
|
||||
<DimensionsView
|
||||
data={appState.data}
|
||||
headers={appState.headers}
|
||||
onEdit={(index) => setEditingRowIndex(index)}
|
||||
onSaveRow={handleSaveRow}
|
||||
onCaptureState={captureState}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeModule === 'pricing' && (
|
||||
<PricingView
|
||||
data={appState.data}
|
||||
headers={appState.headers}
|
||||
onSaveRow={handleSaveRow}
|
||||
onCaptureState={captureState}
|
||||
onEdit={(index) => setEditingRowIndex(index)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,515 @@
|
||||
import React, { useState, useMemo, useRef, useCallback } from 'react';
|
||||
import { ExcelRow, COLUMNS } from '../types';
|
||||
import {
|
||||
AlertTriangle,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
DollarSign,
|
||||
Package,
|
||||
Save,
|
||||
X,
|
||||
ChevronDown,
|
||||
Edit2,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
interface PricingViewProps {
|
||||
data: ExcelRow[];
|
||||
headers: string[];
|
||||
onSaveRow: (index: number, updatedRow: ExcelRow) => void;
|
||||
onCaptureState: (message: string) => void;
|
||||
onEdit: (index: number) => void;
|
||||
}
|
||||
|
||||
interface DetectedCol {
|
||||
index: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
type FilterMode = 'all' | 'all_errors' | 'pricing_errors' | 'units_errors';
|
||||
|
||||
interface EditingCell {
|
||||
rowIndex: number;
|
||||
colIndex: number;
|
||||
value: string;
|
||||
}
|
||||
|
||||
// Flexible multi-keyword column finder
|
||||
function findCol(headers: string[], ...keywords: string[]): number {
|
||||
return headers.findIndex(h =>
|
||||
keywords.every(kw => (h || '').toLowerCase().includes(kw.toLowerCase()))
|
||||
);
|
||||
}
|
||||
|
||||
export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }: PricingViewProps) {
|
||||
const [filterMode, setFilterMode] = useState<FilterMode>('all_errors');
|
||||
const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
|
||||
const [savingCell, setSavingCell] = useState<{ rowIndex: number; colIndex: number } | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// ── Dynamic column detection ──────────────────────────────────────────────
|
||||
const { uvpIdx, srpCols, containerCols } = useMemo(() => {
|
||||
const uvpIdx = findCol(headers, 'uvp');
|
||||
|
||||
// All SRP columns, sorted: INT first, UK second, then alphabetically
|
||||
const srp: DetectedCol[] = headers
|
||||
.map((h, i) => ({ index: i, name: h || '' }))
|
||||
.filter(({ name }) => /srp/i.test(name))
|
||||
.sort((a, b) => {
|
||||
const order = (n: string) => {
|
||||
if (/int/i.test(n)) return 0;
|
||||
if (/uk/i.test(n)) return 1;
|
||||
return 2;
|
||||
};
|
||||
return order(a.name) - order(b.name);
|
||||
});
|
||||
|
||||
// All 40' container columns (HC, HQ, etc.)
|
||||
const container: DetectedCol[] = headers
|
||||
.map((h, i) => ({ index: i, name: h || '' }))
|
||||
.filter(({ name }) => /40/i.test(name) && /h[cq]/i.test(name));
|
||||
|
||||
return { uvpIdx, srpCols: srp, containerCols: container };
|
||||
}, [headers]);
|
||||
|
||||
// ── Error analysis per row ────────────────────────────────────────────────
|
||||
const analyzedRows = useMemo(() => {
|
||||
return data.map((row, dataIndex) => {
|
||||
const pricingErrors: string[] = [];
|
||||
const unitErrors: string[] = [];
|
||||
|
||||
// UVP check
|
||||
if (uvpIdx >= 0) {
|
||||
const v = row[uvpIdx];
|
||||
if (v === undefined || v === null || v === '' || Number(v) === 0) {
|
||||
pricingErrors.push('UVP missing');
|
||||
}
|
||||
}
|
||||
|
||||
// SRP checks
|
||||
srpCols.forEach(({ index, name }) => {
|
||||
const v = row[index];
|
||||
if (v === undefined || v === null || v === '' || Number(v) === 0) {
|
||||
pricingErrors.push(`${name} missing`);
|
||||
}
|
||||
});
|
||||
|
||||
// Units per Outer check
|
||||
const unitsOuter = Number(row[COLUMNS.UNITS_OUTER]);
|
||||
if (!unitsOuter || unitsOuter === 0) {
|
||||
unitErrors.push('Units/Outer: missing');
|
||||
}
|
||||
|
||||
// 40' container checks
|
||||
containerCols.forEach(({ index, name }) => {
|
||||
const v = Number(row[index]);
|
||||
if (!v || v === 0) unitErrors.push(`${name}: empty`);
|
||||
else if (v === 1) unitErrors.push(`${name}: value is 1`);
|
||||
});
|
||||
|
||||
return {
|
||||
row,
|
||||
dataIndex,
|
||||
pricingErrors,
|
||||
unitErrors,
|
||||
hasErrors: pricingErrors.length > 0 || unitErrors.length > 0,
|
||||
isCritical: unitErrors.length > 0,
|
||||
};
|
||||
});
|
||||
}, [data, uvpIdx, srpCols, containerCols]);
|
||||
|
||||
// ── Stats ─────────────────────────────────────────────────────────────────
|
||||
const stats = useMemo(() => {
|
||||
const withPricing = analyzedRows.filter(r => r.pricingErrors.length > 0).length;
|
||||
const withUnits = analyzedRows.filter(r => r.unitErrors.length > 0).length;
|
||||
const withAny = analyzedRows.filter(r => r.hasErrors).length;
|
||||
const allOk = analyzedRows.length - withAny;
|
||||
return { total: analyzedRows.length, withPricing, withUnits, withAny, allOk };
|
||||
}, [analyzedRows]);
|
||||
|
||||
// ── Filtered rows ─────────────────────────────────────────────────────────
|
||||
const filteredRows = useMemo(() => {
|
||||
switch (filterMode) {
|
||||
case 'all_errors': return analyzedRows.filter(r => r.hasErrors);
|
||||
case 'pricing_errors': return analyzedRows.filter(r => r.pricingErrors.length > 0);
|
||||
case 'units_errors': return analyzedRows.filter(r => r.unitErrors.length > 0);
|
||||
default: return analyzedRows;
|
||||
}
|
||||
}, [analyzedRows, filterMode]);
|
||||
|
||||
// ── Inline edit helpers ───────────────────────────────────────────────────
|
||||
const startEdit = (rowIndex: number, colIndex: number, currentValue: string) => {
|
||||
setEditingCell({ rowIndex, colIndex, value: currentValue });
|
||||
setTimeout(() => inputRef.current?.focus(), 0);
|
||||
};
|
||||
|
||||
const commitEdit = useCallback(async () => {
|
||||
if (!editingCell) return;
|
||||
const { rowIndex, colIndex, value } = editingCell;
|
||||
const original = data[rowIndex];
|
||||
const newRow = [...original];
|
||||
newRow[colIndex] = value;
|
||||
setSavingCell({ rowIndex, colIndex });
|
||||
setEditingCell(null);
|
||||
onCaptureState(`Updated pricing for ${original[COLUMNS.ARTICLE_NO]}`);
|
||||
await onSaveRow(rowIndex, newRow);
|
||||
setSavingCell(null);
|
||||
}, [editingCell, data, onSaveRow, onCaptureState]);
|
||||
|
||||
const cancelEdit = () => setEditingCell(null);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') commitEdit();
|
||||
if (e.key === 'Escape') cancelEdit();
|
||||
};
|
||||
|
||||
// ── Column helpers ────────────────────────────────────────────────────────
|
||||
const pricingEditableCols: DetectedCol[] = [
|
||||
...(uvpIdx >= 0 ? [{ index: uvpIdx, name: headers[uvpIdx] || 'UVP' }] : []),
|
||||
...srpCols,
|
||||
];
|
||||
|
||||
const formatPrice = (val: any) => {
|
||||
if (val === undefined || val === null || val === '') return '';
|
||||
const n = parseFloat(String(val).replace(',', '.'));
|
||||
return isNaN(n) ? String(val) : n.toFixed(2);
|
||||
};
|
||||
|
||||
const formatUnits = (val: any) => {
|
||||
if (val === undefined || val === null || val === '') return '—';
|
||||
return String(val);
|
||||
};
|
||||
|
||||
const unitBadge = (val: any, label: string) => {
|
||||
const n = Number(val);
|
||||
if (!val || n === 0) return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 border border-red-500/40">
|
||||
<AlertCircle className="w-3 h-3" /> 0
|
||||
</span>
|
||||
);
|
||||
if (n === 1) return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-amber-500/20 text-amber-400 border border-amber-500/40">
|
||||
<AlertTriangle className="w-3 h-3" /> 1
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/30">
|
||||
{n.toLocaleString()}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const unitOuterBadge = (val: any) => {
|
||||
const n = Number(val);
|
||||
if (!val || n === 0) return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 border border-red-500/40">
|
||||
<AlertCircle className="w-3 h-3" /> Missing
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-slate-500/20 text-slate-300 border border-slate-600/50">
|
||||
{n}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
// ── Column detection notice ───────────────────────────────────────────────
|
||||
const missingCols: string[] = [];
|
||||
if (uvpIdx < 0) missingCols.push('UVP');
|
||||
if (srpCols.length === 0) missingCols.push('SRP');
|
||||
if (containerCols.length === 0) missingCols.push('Units/40\'');
|
||||
|
||||
const FILTERS: { id: FilterMode; label: string; count: number; color: string }[] = [
|
||||
{ id: 'all', label: 'All Products', count: stats.total, color: 'text-slate-300' },
|
||||
{ id: 'all_errors', label: 'All Issues', count: stats.withAny, color: 'text-red-400' },
|
||||
{ id: 'pricing_errors', label: 'Pricing Issues', count: stats.withPricing, color: 'text-amber-400' },
|
||||
{ id: 'units_errors', label: 'Units Issues', count: stats.withUnits, color: 'text-orange-400' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-4">
|
||||
|
||||
{/* ── Column detection warning ── */}
|
||||
{missingCols.length > 0 && (
|
||||
<div className="flex items-center gap-3 px-4 py-2.5 bg-amber-500/10 border border-amber-500/30 rounded-lg text-amber-300 text-sm">
|
||||
<AlertTriangle className="w-4 h-4 shrink-0" />
|
||||
<span>
|
||||
Could not auto-detect columns for: <strong>{missingCols.join(', ')}</strong>.
|
||||
Check that the Excel headers contain "UVP", "SRP", or "40HC"/"40HQ".
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Stat cards ── */}
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
<StatCard label="Total Products" value={stats.total} icon={<Package className="w-4 h-4" />} color="slate" />
|
||||
<StatCard label="Pricing Issues" value={stats.withPricing} icon={<DollarSign className="w-4 h-4" />} color="amber" />
|
||||
<StatCard label="Units Issues" value={stats.withUnits} icon={<AlertCircle className="w-4 h-4" />} color="red" />
|
||||
<StatCard label="All OK" value={stats.allOk} icon={<CheckCircle2 className="w-4 h-4" />} color="emerald" />
|
||||
</div>
|
||||
|
||||
{/* ── Filter tabs ── */}
|
||||
<div className="flex items-center gap-1 bg-slate-800/60 rounded-lg p-1 border border-slate-700/50 w-fit">
|
||||
{FILTERS.map(f => (
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => setFilterMode(f.id)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
|
||||
filterMode === f.id
|
||||
? 'bg-slate-700 text-white shadow-sm'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/40'
|
||||
)}
|
||||
>
|
||||
{f.label}
|
||||
<span className={cn(
|
||||
'text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[22px] text-center',
|
||||
filterMode === f.id
|
||||
? 'bg-slate-600 text-white'
|
||||
: f.count > 0 ? `${f.color} bg-current/10` : 'text-slate-500'
|
||||
)}>
|
||||
{f.count}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Table ── */}
|
||||
<div className="flex-1 overflow-auto bg-slate-800 rounded-xl border border-slate-700 shadow-xl">
|
||||
{filteredRows.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-slate-400">
|
||||
<CheckCircle2 className="w-12 h-12 text-emerald-500 mb-3" />
|
||||
<p className="text-lg font-medium text-emerald-400">No issues found</p>
|
||||
<p className="text-sm mt-1">All products are correctly configured.</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead className="sticky top-0 z-10 bg-slate-900">
|
||||
<tr>
|
||||
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
|
||||
Art. No.
|
||||
</th>
|
||||
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700">
|
||||
Article Name
|
||||
</th>
|
||||
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
|
||||
Line
|
||||
</th>
|
||||
|
||||
{/* Editable pricing columns */}
|
||||
{pricingEditableCols.map(col => (
|
||||
<th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
|
||||
<span className="flex items-center gap-1">
|
||||
<Edit2 className="w-3 h-3" />
|
||||
{col.name}
|
||||
</span>
|
||||
</th>
|
||||
))}
|
||||
|
||||
{/* Units/Outer */}
|
||||
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
|
||||
Units/Outer
|
||||
</th>
|
||||
|
||||
{/* Container columns */}
|
||||
{containerCols.map(col => (
|
||||
<th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
|
||||
{col.name}
|
||||
</th>
|
||||
))}
|
||||
|
||||
{/* Status */}
|
||||
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700">
|
||||
Status
|
||||
</th>
|
||||
|
||||
{/* Actions */}
|
||||
<th className="px-3 py-3 border-b border-slate-700 w-10" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredRows.map(({ row, dataIndex, pricingErrors, unitErrors, isCritical }) => {
|
||||
const hasAnyError = pricingErrors.length > 0 || unitErrors.length > 0;
|
||||
return (
|
||||
<tr
|
||||
key={dataIndex}
|
||||
className={cn(
|
||||
'border-b border-slate-700/50 transition-colors hover:bg-slate-700/20',
|
||||
isCritical
|
||||
? 'bg-red-950/20'
|
||||
: pricingErrors.length > 0
|
||||
? 'bg-amber-950/10'
|
||||
: ''
|
||||
)}
|
||||
>
|
||||
{/* Article No */}
|
||||
<td className="px-3 py-2.5 font-mono text-xs text-slate-300 whitespace-nowrap">
|
||||
{row[COLUMNS.ARTICLE_NO]}
|
||||
</td>
|
||||
|
||||
{/* Article Name */}
|
||||
<td className="px-3 py-2.5 text-slate-200 max-w-[200px]">
|
||||
<span className="line-clamp-1" title={row[COLUMNS.ARTICLE_NAME]}>
|
||||
{row[COLUMNS.ARTICLE_NAME] || '—'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Line */}
|
||||
<td className="px-3 py-2.5 text-slate-400 whitespace-nowrap text-xs">
|
||||
{row[COLUMNS.LINE] || '—'}
|
||||
</td>
|
||||
|
||||
{/* Editable pricing cells */}
|
||||
{pricingEditableCols.map(col => {
|
||||
const isEditing = editingCell?.rowIndex === dataIndex && editingCell?.colIndex === col.index;
|
||||
const isSaving = savingCell?.rowIndex === dataIndex && savingCell?.colIndex === col.index;
|
||||
const val = formatPrice(row[col.index]);
|
||||
const isEmpty = !row[col.index] || row[col.index] === '' || Number(row[col.index]) === 0;
|
||||
|
||||
return (
|
||||
<td key={col.index} className="px-3 py-2">
|
||||
{isEditing ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={editingCell.value}
|
||||
onChange={e => setEditingCell(prev => prev ? { ...prev, value: e.target.value } : null)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={commitEdit}
|
||||
className="w-24 bg-slate-900 border border-blue-500 rounded px-2 py-1 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
<button onClick={commitEdit} className="text-emerald-400 hover:text-emerald-300 p-0.5">
|
||||
<Save className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button onClick={cancelEdit} className="text-slate-500 hover:text-slate-300 p-0.5">
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => startEdit(dataIndex, col.index, val)}
|
||||
className={cn(
|
||||
'group flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors hover:bg-slate-700/60 min-w-[72px]',
|
||||
isEmpty
|
||||
? 'text-amber-400 border border-amber-500/40 bg-amber-500/5'
|
||||
: 'text-slate-200 border border-transparent hover:border-slate-600'
|
||||
)}
|
||||
title={isSaving ? 'Saving…' : `Click to edit ${col.name}`}
|
||||
>
|
||||
{isSaving ? (
|
||||
<span className="text-slate-500 italic">saving…</span>
|
||||
) : isEmpty ? (
|
||||
<>
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
<span>Missing</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>{val}</span>
|
||||
<Edit2 className="w-2.5 h-2.5 opacity-0 group-hover:opacity-50" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Units/Outer */}
|
||||
<td className="px-3 py-2.5">
|
||||
{unitOuterBadge(row[COLUMNS.UNITS_OUTER])}
|
||||
</td>
|
||||
|
||||
{/* Container unit columns */}
|
||||
{containerCols.map(col => (
|
||||
<td key={col.index} className="px-3 py-2.5">
|
||||
{unitBadge(row[col.index], col.name)}
|
||||
</td>
|
||||
))}
|
||||
|
||||
{/* Status badge */}
|
||||
<td className="px-3 py-2.5">
|
||||
{!hasAnyError ? (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
<CheckCircle2 className="w-3 h-3" /> OK
|
||||
</span>
|
||||
) : isCritical ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-bold bg-red-500/15 text-red-400 border border-red-500/30">
|
||||
<AlertCircle className="w-3 h-3" /> Critical
|
||||
</span>
|
||||
{unitErrors.map((e, i) => (
|
||||
<span key={i} className="text-[10px] text-red-400/70 pl-1">{e}</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
||||
<AlertTriangle className="w-3 h-3" /> Incomplete
|
||||
</span>
|
||||
{pricingErrors.map((e, i) => (
|
||||
<span key={i} className="text-[10px] text-amber-400/70 pl-1">{e}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Edit button */}
|
||||
<td className="px-2 py-2.5">
|
||||
<button
|
||||
onClick={() => onEdit(dataIndex)}
|
||||
className="p-1.5 text-slate-500 hover:text-slate-200 hover:bg-slate-700 rounded transition-colors"
|
||||
title="Open full editor"
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Footer count ── */}
|
||||
<p className="text-xs text-slate-500 pb-1">
|
||||
Showing {filteredRows.length} of {stats.total} products
|
||||
{pricingEditableCols.length > 0 && (
|
||||
<> · Click any <span className="text-blue-400">price cell</span> to edit inline</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Stat card ─────────────────────────────────────────────────────────────────
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
icon,
|
||||
color,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
icon: React.ReactNode;
|
||||
color: 'slate' | 'amber' | 'red' | 'emerald';
|
||||
}) {
|
||||
const colors = {
|
||||
slate: { bg: 'bg-slate-800', border: 'border-slate-700', text: 'text-slate-200', icon: 'text-slate-400' },
|
||||
amber: { bg: 'bg-amber-950/30', border: 'border-amber-700/40', text: 'text-amber-300', icon: 'text-amber-500' },
|
||||
red: { bg: 'bg-red-950/30', border: 'border-red-700/40', text: 'text-red-300', icon: 'text-red-500' },
|
||||
emerald: { bg: 'bg-emerald-950/20', border: 'border-emerald-700/30', text: 'text-emerald-300', icon: 'text-emerald-500' },
|
||||
};
|
||||
const c = colors[color];
|
||||
return (
|
||||
<div className={cn('rounded-xl border p-4 flex items-center gap-4', c.bg, c.border)}>
|
||||
<span className={c.icon}>{icon}</span>
|
||||
<div>
|
||||
<p className={cn('text-2xl font-bold', c.text)}>{value}</p>
|
||||
<p className="text-xs text-slate-400">{label}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { FileSpreadsheet, FileText, CheckSquare, Table, Box } from 'lucide-react';
|
||||
import { FileText, Table, Box, DollarSign } from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
interface SidebarProps {
|
||||
activeModule: string;
|
||||
setActiveModule: (m: 'descriptions' | 'completeness' | 'matrix' | 'dimensions') => void;
|
||||
setActiveModule: (m: 'descriptions' | 'completeness' | 'matrix' | 'dimensions' | 'pricing') => void;
|
||||
}
|
||||
|
||||
export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
|
||||
@@ -12,6 +12,7 @@ export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
|
||||
{ id: 'matrix', label: 'Matrix', icon: Table },
|
||||
{ id: 'descriptions', label: 'Product Descriptions', icon: FileText },
|
||||
{ id: 'dimensions', label: 'Dimensions', icon: Box },
|
||||
{ id: 'pricing', label: 'Pricing & Units', icon: DollarSign },
|
||||
] as const;
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user