mirror of
https://github.com/christianvidalwolf-prog/Craze-Data-check.git
synced 2026-08-03 21:05:24 +02:00
feat: add Classification column and Excel-style column filters to Pricing & Units tab
- Added Classification column next to Line with color-coded badges (Core=blue, OOC=amber) - Added Excel-style filter icons on Article Name (text search), Line, and Classification headers - Filter icons appear on hover; turn blue when active - Multi-select popover for Line and Classification; free-text popover for Article Name - Filters work additively alongside the existing global search bar - ArticleDetails: removed Tariff/Barcode/Origin columns and tab to simplify the view 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
04d198ea59
commit
71af4e1915
@@ -8,7 +8,7 @@ interface ArticleDetailsProps {
|
||||
onEdit: (index: number) => void;
|
||||
}
|
||||
|
||||
type TabType = 'all' | 'missingDetailsDE' | 'missingDetailsEN' | 'missingAnyDetails' | 'lowStock' | 'missingTariff';
|
||||
type TabType = 'all' | 'missingDetailsDE' | 'missingDetailsEN' | 'missingAnyDetails' | 'lowStock';
|
||||
|
||||
export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('all');
|
||||
@@ -29,15 +29,13 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
|
||||
if (activeTab === 'missingDetailsEN') result = result.filter(r => !r.row[COLUMNS.DETAILS_EN]);
|
||||
if (activeTab === 'missingAnyDetails') result = result.filter(r => !r.row[COLUMNS.DETAILS_DE] || !r.row[COLUMNS.DETAILS_EN]);
|
||||
if (activeTab === 'lowStock') result = result.filter(r => Number(r.row[COLUMNS.ITEM_AVAILABLE] || 0) <= 0);
|
||||
if (activeTab === 'missingTariff') result = result.filter(r => !r.row[COLUMNS.TARIFF_CODE]);
|
||||
|
||||
// Search filter
|
||||
if (search) {
|
||||
const s = search.toLowerCase();
|
||||
result = result.filter(r =>
|
||||
String(r.row[COLUMNS.ARTICLE_NO] || '').toLowerCase().includes(s) ||
|
||||
String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s) ||
|
||||
String(r.row[COLUMNS.BARCODE] || '').toLowerCase().includes(s)
|
||||
String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -98,7 +96,6 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
|
||||
{ id: 'missingDetailsEN', label: 'No Details EN' },
|
||||
{ id: 'missingAnyDetails', label: 'Missing Details' },
|
||||
{ id: 'lowStock', label: 'Out of Stock' },
|
||||
{ id: 'missingTariff', label: 'No Tariff Code' },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -125,7 +122,7 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search SKU, Name, Barcode..."
|
||||
placeholder="Search SKU or Name..."
|
||||
value={search}
|
||||
onChange={e => { setSearch(e.target.value); setPage(1); }}
|
||||
className="w-full pl-9 pr-4 py-2 bg-slate-900/50 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
|
||||
@@ -149,9 +146,6 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
|
||||
{[
|
||||
{ col: COLUMNS.ARTICLE_NO, label: 'SKU' },
|
||||
{ col: COLUMNS.ARTICLE_NAME, label: 'Name' },
|
||||
{ col: COLUMNS.BARCODE, label: 'Barcode' },
|
||||
{ col: COLUMNS.TARIFF_CODE, label: 'Tariff' },
|
||||
{ col: COLUMNS.COUNTRY_ORIGIN, label: 'Origin' },
|
||||
{ col: COLUMNS.CLASSIFICATION, label: 'Class' },
|
||||
{ col: COLUMNS.ITEM_AVAILABLE, label: 'Stock' },
|
||||
{ col: COLUMNS.DETAILS_DE, label: 'Details DE' },
|
||||
@@ -180,9 +174,6 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
|
||||
<td className="px-3 py-2 font-medium text-slate-200 max-w-[150px] truncate" title={row[COLUMNS.ARTICLE_NAME]}>
|
||||
{row[COLUMNS.ARTICLE_NAME]}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-slate-400">{row[COLUMNS.BARCODE] || '—'}</td>
|
||||
<td className="px-3 py-2 text-slate-400">{row[COLUMNS.TARIFF_CODE] || '—'}</td>
|
||||
<td className="px-3 py-2 text-slate-400">{row[COLUMNS.COUNTRY_ORIGIN] || '—'}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={cn(
|
||||
"px-1.5 py-0.5 rounded-[4px] text-[10px] font-bold border",
|
||||
@@ -221,7 +212,7 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
|
||||
))}
|
||||
{paginatedData.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10} className="px-4 py-8 text-center text-slate-500">
|
||||
<td colSpan={7} className="px-4 py-8 text-center text-slate-500">
|
||||
No articles found.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -10,6 +10,9 @@ import {
|
||||
X,
|
||||
ChevronDown,
|
||||
Edit2,
|
||||
Filter,
|
||||
Check,
|
||||
Search,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
@@ -47,6 +50,10 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
|
||||
const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
|
||||
const [savingCell, setSavingCell] = useState<{ rowIndex: number; colIndex: number } | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [lineMultiFilter, setLineMultiFilter] = useState<string[]>([]);
|
||||
const [classificationFilter, setClassificationFilter] = useState<string[]>([]);
|
||||
const [nameColFilter, setNameColFilter] = useState('');
|
||||
const [openFilter, setOpenFilter] = useState<'name' | 'line' | 'classification' | null>(null);
|
||||
|
||||
// ── Dynamic column detection ──────────────────────────────────────────────
|
||||
const { uvpIdx, srpCols, containerCols } = useMemo(() => {
|
||||
@@ -128,10 +135,19 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
|
||||
return { total: analyzedRows.length, withPricing, withUnits, withAny, allOk };
|
||||
}, [analyzedRows]);
|
||||
|
||||
// ── Unique values for column filters ─────────────────────────────────────
|
||||
const uniqueLines = useMemo(() =>
|
||||
Array.from(new Set(data.map(r => String(r[COLUMNS.LINE] || '')))).sort(),
|
||||
[data]);
|
||||
|
||||
const uniqueClassifications = useMemo(() =>
|
||||
Array.from(new Set(data.map(r => String(r[COLUMNS.CLASSIFICATION] || '')))).sort(),
|
||||
[data]);
|
||||
|
||||
// ── Filtered rows ─────────────────────────────────────────────────────────
|
||||
const filteredRows = useMemo(() => {
|
||||
let result = analyzedRows;
|
||||
|
||||
|
||||
// Mode filter
|
||||
switch (filterMode) {
|
||||
case 'all_errors': result = analyzedRows.filter(r => r.hasErrors); break;
|
||||
@@ -139,17 +155,29 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
|
||||
case 'units_errors': result = analyzedRows.filter(r => r.unitErrors.length > 0); break;
|
||||
}
|
||||
|
||||
// Search filter
|
||||
// Global search (SKU + Name)
|
||||
if (search) {
|
||||
const s = search.toLowerCase();
|
||||
result = result.filter(r =>
|
||||
result = result.filter(r =>
|
||||
String(r.row[COLUMNS.ARTICLE_NO] || '').toLowerCase().includes(s) ||
|
||||
String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s)
|
||||
);
|
||||
}
|
||||
|
||||
// Column filters
|
||||
if (nameColFilter) {
|
||||
const s = nameColFilter.toLowerCase();
|
||||
result = result.filter(r => String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s));
|
||||
}
|
||||
if (lineMultiFilter.length > 0) {
|
||||
result = result.filter(r => lineMultiFilter.includes(String(r.row[COLUMNS.LINE] || '')));
|
||||
}
|
||||
if (classificationFilter.length > 0) {
|
||||
result = result.filter(r => classificationFilter.includes(String(r.row[COLUMNS.CLASSIFICATION] || '')));
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [analyzedRows, filterMode, search]);
|
||||
}, [analyzedRows, filterMode, search, nameColFilter, lineMultiFilter, classificationFilter]);
|
||||
|
||||
// ── Inline edit helpers ───────────────────────────────────────────────────
|
||||
const startEdit = (rowIndex: number, colIndex: number, currentValue: string) => {
|
||||
@@ -318,11 +346,75 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
|
||||
<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
|
||||
{/* Article Name with text filter */}
|
||||
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 group relative">
|
||||
<div className="flex items-center gap-1">
|
||||
<span>Article Name</span>
|
||||
<button
|
||||
onClick={() => setOpenFilter(openFilter === 'name' ? null : 'name')}
|
||||
className={cn(
|
||||
'p-0.5 rounded hover:bg-slate-700 transition-colors',
|
||||
nameColFilter ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
|
||||
)}
|
||||
>
|
||||
<Filter className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
{openFilter === 'name' && (
|
||||
<TextFilterPopover
|
||||
value={nameColFilter}
|
||||
onChange={setNameColFilter}
|
||||
onClose={() => setOpenFilter(null)}
|
||||
/>
|
||||
)}
|
||||
</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
|
||||
{/* Line with multi-select filter */}
|
||||
<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 group relative">
|
||||
<div className="flex items-center gap-1">
|
||||
<span>Line</span>
|
||||
<button
|
||||
onClick={() => setOpenFilter(openFilter === 'line' ? null : 'line')}
|
||||
className={cn(
|
||||
'p-0.5 rounded hover:bg-slate-700 transition-colors',
|
||||
lineMultiFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
|
||||
)}
|
||||
>
|
||||
<Filter className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
{openFilter === 'line' && (
|
||||
<ColumnFilterPopover
|
||||
uniqueValues={uniqueLines}
|
||||
selectedValues={lineMultiFilter}
|
||||
onToggle={val => setLineMultiFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
|
||||
onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }}
|
||||
onClose={() => setOpenFilter(null)}
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
{/* Classification with multi-select filter */}
|
||||
<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 group relative">
|
||||
<div className="flex items-center gap-1">
|
||||
<span>Classification</span>
|
||||
<button
|
||||
onClick={() => setOpenFilter(openFilter === 'classification' ? null : 'classification')}
|
||||
className={cn(
|
||||
'p-0.5 rounded hover:bg-slate-700 transition-colors',
|
||||
classificationFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
|
||||
)}
|
||||
>
|
||||
<Filter className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
{openFilter === 'classification' && (
|
||||
<ColumnFilterPopover
|
||||
uniqueValues={uniqueClassifications}
|
||||
selectedValues={classificationFilter}
|
||||
onToggle={val => setClassificationFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
|
||||
onClear={() => { setClassificationFilter([]); setOpenFilter(null); }}
|
||||
onClose={() => setOpenFilter(null)}
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
|
||||
{/* Editable pricing columns */}
|
||||
@@ -388,6 +480,20 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
|
||||
{row[COLUMNS.LINE] || '—'}
|
||||
</td>
|
||||
|
||||
{/* Classification */}
|
||||
<td className="px-3 py-2.5">
|
||||
<span className={cn(
|
||||
'px-2 py-0.5 rounded text-[10px] font-bold border whitespace-nowrap',
|
||||
String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().includes('CORE')
|
||||
? 'bg-blue-500/10 text-blue-400 border-blue-500/20'
|
||||
: String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().includes('OOC')
|
||||
? 'bg-amber-500/10 text-amber-500 border-amber-500/20'
|
||||
: 'bg-slate-700/50 text-slate-400 border-slate-600/50'
|
||||
)}>
|
||||
{row[COLUMNS.CLASSIFICATION] || '—'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Editable pricing cells */}
|
||||
{pricingEditableCols.map(col => {
|
||||
const isEditing = editingCell?.rowIndex === dataIndex && editingCell?.colIndex === col.index;
|
||||
@@ -513,6 +619,80 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
|
||||
);
|
||||
}
|
||||
|
||||
// ── Text filter popover ───────────────────────────────────────────────────────
|
||||
function TextFilterPopover({ value, onChange, onClose }: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="absolute top-full left-0 mt-1 w-56 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search article name…"
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
autoFocus
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 text-xs text-white focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-1 border-t border-slate-700">
|
||||
<button onClick={() => { onChange(''); onClose(); }} className="text-[10px] font-medium text-slate-400 hover:text-white transition-colors">Clear</button>
|
||||
<button onClick={onClose} className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Multi-select column filter popover ────────────────────────────────────────
|
||||
function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onClear, onClose }: {
|
||||
uniqueValues: string[];
|
||||
selectedValues: string[];
|
||||
onToggle: (val: string) => void;
|
||||
onClear: () => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [search, setSearch] = useState('');
|
||||
const filtered = uniqueValues.filter(v => v.toLowerCase().includes(search.toLowerCase()));
|
||||
|
||||
return (
|
||||
<div className="absolute top-full left-0 mt-1 w-56 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter values…"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
autoFocus
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 text-xs text-white focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto space-y-0.5">
|
||||
{filtered.map(val => (
|
||||
<label key={val} className="flex items-center gap-2 px-1.5 py-1 hover:bg-slate-700/50 rounded cursor-pointer group">
|
||||
<div className={cn(
|
||||
'w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors',
|
||||
selectedValues.includes(val) ? 'bg-blue-600 border-blue-600' : 'border-slate-600 bg-slate-900 group-hover:border-slate-500'
|
||||
)}>
|
||||
{selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
|
||||
</div>
|
||||
<input type="checkbox" className="hidden" checked={selectedValues.includes(val)} onChange={() => onToggle(val)} />
|
||||
<span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
|
||||
</label>
|
||||
))}
|
||||
{filtered.length === 0 && <p className="text-[10px] text-slate-500 text-center py-2">No values</p>}
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-1 border-t border-slate-700">
|
||||
<button onClick={onClear} className="text-[10px] font-medium text-slate-400 hover:text-white transition-colors">Clear</button>
|
||||
<button onClick={onClose} className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Stat card ─────────────────────────────────────────────────────────────────
|
||||
function StatCard({
|
||||
label,
|
||||
|
||||
Reference in New Issue
Block a user