mirror of
https://github.com/christianvidalwolf-prog/Craze-Data-check.git
synced 2026-08-03 19:05:24 +02:00
468 lines
21 KiB
TypeScript
468 lines
21 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { ExcelRow, COLUMNS } from '../types';
|
|
import { Search, ChevronDown, ChevronUp, X, Edit2, Save } from 'lucide-react';
|
|
import { cn } from '../lib/utils';
|
|
import { ColumnFilterPopover } from './ColumnFilterPopover';
|
|
|
|
interface MissingDataViewProps {
|
|
data: ExcelRow[];
|
|
headers: string[];
|
|
onSaveRow: (rowIndex: number, updatedRow: ExcelRow) => void;
|
|
onCaptureState: (message: string) => void;
|
|
}
|
|
|
|
function formatDateValue(val: any): string {
|
|
if (val === null || val === undefined || val === '') return '';
|
|
if (typeof val === 'number') {
|
|
if (val >= 25569 && val <= 60000) {
|
|
const excelEpoch = new Date(1899, 11, 30);
|
|
const date = new Date(excelEpoch.getTime() + val * 86400000);
|
|
return date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|
}
|
|
return '';
|
|
}
|
|
return String(val);
|
|
}
|
|
|
|
function isEmptyOrEpoch(val: any): boolean {
|
|
if (val === null || val === undefined || val === '') return true;
|
|
if (typeof val === 'number') {
|
|
if (val === 0 || val === 1) return true;
|
|
if (val >= 25569 && val <= 60000) return false;
|
|
return true;
|
|
}
|
|
const s = String(val).trim();
|
|
if (s === '' || s === '0' || s === '1') return true;
|
|
if (s.endsWith('/1900')) return true;
|
|
return false;
|
|
}
|
|
|
|
type TabType = 'missingLaunch';
|
|
|
|
interface EditingState {
|
|
rowIndex: number;
|
|
classification: string;
|
|
launchDate: string;
|
|
readyToOrder: string;
|
|
}
|
|
|
|
export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: MissingDataViewProps) {
|
|
const [activeTab, setActiveTab] = useState<TabType>('missingLaunch');
|
|
const [search, setSearch] = useState('');
|
|
const [sortCol, setSortCol] = useState<number | null>(null);
|
|
const [sortDesc, setSortDesc] = useState(false);
|
|
const [page, setPage] = useState(1);
|
|
const [editing, setEditing] = useState<EditingState | null>(null);
|
|
const [columnFilters, setColumnFilters] = useState<Record<number, string[]>>({});
|
|
const [openFilter, setOpenFilter] = useState<number | null>(null);
|
|
const pageSize = 100;
|
|
|
|
const launchDateCol = useMemo(() =>
|
|
headers.findIndex(h => h.toLowerCase().includes('launch')), [headers]);
|
|
const readyToOrderCol = useMemo(() =>
|
|
headers.findIndex(h => h.toLowerCase().includes('ready')), [headers]);
|
|
|
|
const launchHeader = launchDateCol >= 0 ? headers[launchDateCol] : 'Launch Date';
|
|
const readyHeader = readyToOrderCol >= 0 ? headers[readyToOrderCol] : 'Ready to Order';
|
|
|
|
const columns = [
|
|
{ col: COLUMNS.ARTICLE_NO, label: 'SKU', width: 100 },
|
|
{ col: COLUMNS.ARTICLE_NAME, label: 'Name', width: 220 },
|
|
{ col: COLUMNS.CLASSIFICATION, label: 'Classification', width: 130 },
|
|
...(launchDateCol >= 0 ? [{ col: launchDateCol, label: launchHeader, width: 130 }] : []),
|
|
...(readyToOrderCol >= 0 ? [{ col: readyToOrderCol, label: readyHeader, width: 130 }] : []),
|
|
];
|
|
|
|
const columnUniqueValues = useMemo(() => {
|
|
const cols = columns.map(c => c.col);
|
|
const result: Record<number, Set<string>> = {};
|
|
cols.forEach(col => result[col] = new Set());
|
|
|
|
data.forEach(row => {
|
|
cols.forEach(col => {
|
|
let val: any = row[col];
|
|
if (col === launchDateCol || col === readyToOrderCol) {
|
|
val = formatDateValue(val) || String(val ?? '');
|
|
} else {
|
|
val = String(val ?? '');
|
|
}
|
|
if (val) result[col].add(val);
|
|
});
|
|
});
|
|
return result;
|
|
}, [data, columns, launchDateCol, readyToOrderCol]);
|
|
|
|
const getUniqueValues = (col: number): string[] => {
|
|
const values = columnUniqueValues[col];
|
|
if (!values) return [];
|
|
return Array.from(values).sort() as string[];
|
|
};
|
|
|
|
const filteredData = useMemo(() => {
|
|
let result = data.map((row, index) => ({ row, index }));
|
|
|
|
if (activeTab === 'missingLaunch') {
|
|
result = result.filter(r => {
|
|
const val = launchDateCol >= 0 ? r.row[launchDateCol] : undefined;
|
|
return isEmptyOrEpoch(val);
|
|
});
|
|
}
|
|
|
|
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)
|
|
);
|
|
}
|
|
|
|
(Object.entries(columnFilters) as [string, string[]][]).forEach(([colIdx, filterValues]) => {
|
|
if (!filterValues || filterValues.length === 0) return;
|
|
const colIdxNum = parseInt(colIdx);
|
|
result = result.filter(r => {
|
|
const val: any = r.row[colIdxNum];
|
|
const displayVal = colIdxNum === launchDateCol || colIdxNum === readyToOrderCol
|
|
? formatDateValue(val) || String(val ?? '')
|
|
: String(val ?? '');
|
|
return filterValues.includes(displayVal);
|
|
});
|
|
});
|
|
|
|
if (sortCol !== null) {
|
|
result.sort((a, b) => {
|
|
const valA = a.row[sortCol];
|
|
const valB = b.row[sortCol];
|
|
if (typeof valA === 'number' && typeof valB === 'number') {
|
|
return sortDesc ? valB - valA : valA - valB;
|
|
}
|
|
const sA = String(valA || '');
|
|
const sB = String(valB || '');
|
|
return sortDesc ? sB.localeCompare(sA) : sA.localeCompare(sB);
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}, [data, activeTab, search, sortCol, sortDesc, launchDateCol, columnFilters]);
|
|
|
|
const paginatedData = useMemo(() => {
|
|
const start = (page - 1) * pageSize;
|
|
return filteredData.slice(start, start + pageSize);
|
|
}, [filteredData, page]);
|
|
|
|
const totalPages = Math.ceil(filteredData.length / pageSize);
|
|
|
|
const handleSort = (col: number) => {
|
|
if (sortCol === col) setSortDesc(d => !d);
|
|
else { setSortCol(col); setSortDesc(false); }
|
|
};
|
|
|
|
const openEdit = (rowIndex: number, row: ExcelRow) => {
|
|
setEditing({
|
|
rowIndex,
|
|
classification: String(row[COLUMNS.CLASSIFICATION] || ''),
|
|
launchDate: launchDateCol >= 0 ? formatDateValue(row[launchDateCol]) || String(row[launchDateCol] ?? '') : '',
|
|
readyToOrder: readyToOrderCol >= 0 ? formatDateValue(row[readyToOrderCol]) || String(row[readyToOrderCol] ?? '') : '',
|
|
});
|
|
};
|
|
|
|
const handleSave = () => {
|
|
if (!editing) return;
|
|
const row = data[editing.rowIndex];
|
|
onCaptureState(`Updated product ${row[COLUMNS.ARTICLE_NO]}`);
|
|
const newRow = [...row];
|
|
newRow[COLUMNS.CLASSIFICATION] = editing.classification;
|
|
if (launchDateCol >= 0) newRow[launchDateCol] = editing.launchDate;
|
|
if (readyToOrderCol >= 0) newRow[readyToOrderCol] = editing.readyToOrder;
|
|
onSaveRow(editing.rowIndex, newRow);
|
|
setEditing(null);
|
|
};
|
|
|
|
const tabs: { id: TabType; label: string }[] = [
|
|
{ id: 'missingLaunch', label: 'Missing Launch Date' },
|
|
];
|
|
|
|
const editingRow = editing ? data[editing.rowIndex] : null;
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex flex-wrap gap-2 mb-6">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => { setActiveTab(tab.id); setPage(1); }}
|
|
className={cn(
|
|
"px-4 py-2 rounded-md text-sm font-medium transition-colors",
|
|
activeTab === tab.id
|
|
? "bg-indigo-600 text-white shadow-md"
|
|
: "bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white"
|
|
)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-4 mb-6 bg-slate-800/50 p-4 rounded-xl border border-slate-700/50">
|
|
<div className="flex-1 min-w-[200px] relative">
|
|
<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 or Name..."
|
|
value={search}
|
|
onChange={e => { setSearch(e.target.value); setPage(1); }}
|
|
className="w-full pl-9 pr-10 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"
|
|
/>
|
|
{search && (
|
|
<button
|
|
onClick={() => { setSearch(''); setPage(1); }}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center text-xs text-slate-500">
|
|
{filteredData.length} items
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 bg-slate-800 rounded-xl border border-slate-700 shadow-xl overflow-hidden flex flex-col">
|
|
<div className="overflow-x-auto flex-1">
|
|
<table className="w-full text-left text-xs">
|
|
<thead className="bg-slate-900/80 text-slate-400 sticky top-0 z-10">
|
|
<tr>
|
|
{columns.map(({ col, label, width }) => {
|
|
const selectedFilters = columnFilters[col] || [];
|
|
const allValues = getUniqueValues(col);
|
|
const filterCount = selectedFilters.length;
|
|
return (
|
|
<th
|
|
key={col}
|
|
style={{ width, minWidth: width }}
|
|
className="px-2 py-2 font-medium border-r border-slate-700/30 relative"
|
|
>
|
|
<div
|
|
className="flex items-center gap-1 cursor-pointer select-none hover:text-white"
|
|
onClick={() => handleSort(col)}
|
|
>
|
|
{label}
|
|
{sortCol === col && (
|
|
sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />
|
|
)}
|
|
</div>
|
|
<div className="mt-1 relative">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); setOpenFilter(openFilter === col ? null : col); }}
|
|
className={cn(
|
|
"w-full flex items-center justify-between px-1.5 py-0.5 bg-slate-800 border rounded text-[10px] transition-colors",
|
|
filterCount > 0 ? "border-indigo-500 text-white" : "border-slate-600 text-slate-400 hover:border-slate-500"
|
|
)}
|
|
>
|
|
<span className="truncate">{filterCount > 0 ? `${filterCount} selected` : 'Filter...'}</span>
|
|
<ChevronDown className={cn("w-3 h-3 transition-transform", openFilter === col && "rotate-180")} />
|
|
</button>
|
|
{openFilter === col && (
|
|
<ColumnFilterPopover
|
|
uniqueValues={allValues}
|
|
selectedValues={selectedFilters}
|
|
onToggle={(val) => setColumnFilters(prev => {
|
|
const current = prev[col] || [];
|
|
if (current.includes(val)) {
|
|
return { ...prev, [col]: current.filter(v => v !== val) };
|
|
}
|
|
return { ...prev, [col]: [...current, val] };
|
|
})}
|
|
onSelectAll={(vals) => setColumnFilters(prev => ({ ...prev, [col]: vals }))}
|
|
onClear={() => { setColumnFilters(prev => { const n = { ...prev }; delete n[col]; return n; }); }}
|
|
onClose={() => setOpenFilter(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</th>
|
|
);})}
|
|
<th className="px-2 py-2 font-medium text-right" style={{ width: 60 }}></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-700/30">
|
|
{paginatedData.map(({ row, index }) => (
|
|
<tr key={index} className="hover:bg-slate-700/20 transition-colors">
|
|
<td className="px-3 py-2 font-mono text-indigo-400 truncate" style={{ width: 100 }}>
|
|
{row[COLUMNS.ARTICLE_NO]}
|
|
</td>
|
|
<td className="px-3 py-2 font-medium text-slate-200 truncate" style={{ width: 220 }} title={row[COLUMNS.ARTICLE_NAME]}>
|
|
{row[COLUMNS.ARTICLE_NAME]}
|
|
</td>
|
|
<td className="px-3 py-2 truncate" style={{ width: 130 }}>
|
|
{row[COLUMNS.CLASSIFICATION] && String(row[COLUMNS.CLASSIFICATION]).trim() !== '' ? (
|
|
<span className={cn(
|
|
"px-1.5 py-0.5 rounded-[4px] text-[10px] font-bold border",
|
|
String(row[COLUMNS.CLASSIFICATION]).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>
|
|
) : (
|
|
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-500/10 text-red-400 border border-red-500/20">Empty</span>
|
|
)}
|
|
</td>
|
|
{launchDateCol >= 0 && (
|
|
<td className="px-3 py-2 truncate font-mono text-slate-300" style={{ width: 130 }}>
|
|
{isEmptyOrEpoch(row[launchDateCol]) ? (
|
|
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-500/10 text-red-400 border border-red-500/20">Empty</span>
|
|
) : (
|
|
formatDateValue(row[launchDateCol]) || String(row[launchDateCol])
|
|
)}
|
|
</td>
|
|
)}
|
|
{readyToOrderCol >= 0 && (
|
|
<td className="px-3 py-2 truncate font-mono text-slate-300" style={{ width: 130 }}>
|
|
{row[readyToOrderCol] !== null && row[readyToOrderCol] !== undefined && row[readyToOrderCol] !== '' ? (
|
|
formatDateValue(row[readyToOrderCol]) || String(row[readyToOrderCol])
|
|
) : (
|
|
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-slate-700/50 text-slate-500 border border-slate-600/50">—</span>
|
|
)}
|
|
</td>
|
|
)}
|
|
<td className="px-3 py-2 text-right" style={{ width: 60 }}>
|
|
<button
|
|
onClick={() => openEdit(index, row)}
|
|
className="p-1.5 text-slate-500 hover:text-indigo-400 hover:bg-indigo-400/10 rounded transition-colors"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{paginatedData.length === 0 && (
|
|
<tr>
|
|
<td colSpan={columns.length + 1} className="px-4 py-8 text-center text-slate-500">
|
|
No items found.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="bg-slate-900 border-t border-slate-700 p-4 flex items-center justify-between text-xs text-slate-500">
|
|
<div>Showing {paginatedData.length} of {filteredData.length} items</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
disabled={page === 1}
|
|
onClick={() => setPage(p => p - 1)}
|
|
className="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 transition-colors"
|
|
>
|
|
Previous
|
|
</button>
|
|
<span className="text-slate-300">Page {page} of {totalPages || 1}</span>
|
|
<button
|
|
disabled={page === totalPages || totalPages === 0}
|
|
onClick={() => setPage(p => p + 1)}
|
|
className="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 transition-colors"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Focused edit panel */}
|
|
{editing && editingRow && (
|
|
<>
|
|
<div className="fixed inset-0 bg-slate-950/50 backdrop-blur-sm z-40" onClick={() => setEditing(null)} />
|
|
<div className="fixed right-0 top-0 bottom-0 w-[400px] bg-slate-800 border-l border-slate-700 shadow-2xl z-50 flex flex-col animate-in slide-in-from-right duration-200">
|
|
<div className="flex items-center justify-between p-6 border-b border-slate-700 bg-slate-800/50">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-white">Edit Fields</h2>
|
|
<p className="text-xs text-slate-400 mt-0.5">
|
|
{editingRow[COLUMNS.ARTICLE_NO]} — {editingRow[COLUMNS.ARTICLE_NAME]}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setEditing(null)}
|
|
className="p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-full transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto p-6 space-y-5">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Classification</label>
|
|
<select
|
|
value={editing.classification}
|
|
onChange={e => setEditing(prev => prev ? { ...prev, classification: e.target.value } : prev)}
|
|
className={cn(
|
|
"w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
|
|
editing.classification !== String(editingRow[COLUMNS.CLASSIFICATION] || '')
|
|
? "border-blue-500 focus:ring-blue-500"
|
|
: "border-slate-700 focus:border-slate-500 focus:ring-slate-500"
|
|
)}
|
|
>
|
|
<option value="">Select classification...</option>
|
|
{getUniqueValues(COLUMNS.CLASSIFICATION).map(val => (
|
|
<option key={val} value={val}>{val}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{launchDateCol >= 0 && (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{launchHeader}</label>
|
|
<input
|
|
type="text"
|
|
value={editing.launchDate}
|
|
onChange={e => setEditing(prev => prev ? { ...prev, launchDate: e.target.value } : prev)}
|
|
placeholder="DD/MM/YYYY"
|
|
className={cn(
|
|
"w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white font-mono focus:outline-none focus:ring-1 transition-colors",
|
|
editing.launchDate !== (formatDateValue(editingRow[launchDateCol]) || String(editingRow[launchDateCol] ?? ''))
|
|
? "border-blue-500 focus:ring-blue-500"
|
|
: "border-slate-700 focus:border-slate-500 focus:ring-slate-500"
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{readyToOrderCol >= 0 && (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{readyHeader}</label>
|
|
<input
|
|
type="text"
|
|
value={editing.readyToOrder}
|
|
onChange={e => setEditing(prev => prev ? { ...prev, readyToOrder: e.target.value } : prev)}
|
|
placeholder="DD/MM/YYYY"
|
|
className={cn(
|
|
"w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white font-mono focus:outline-none focus:ring-1 transition-colors",
|
|
editing.readyToOrder !== (formatDateValue(editingRow[readyToOrderCol]) || String(editingRow[readyToOrderCol] ?? ''))
|
|
? "border-blue-500 focus:ring-blue-500"
|
|
: "border-slate-700 focus:border-slate-500 focus:ring-slate-500"
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-6 border-t border-slate-700 bg-slate-800/50 flex justify-end gap-3">
|
|
<button
|
|
onClick={() => setEditing(null)}
|
|
className="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-700 rounded-md transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-lg shadow-blue-900/20 transition-colors"
|
|
>
|
|
<Save className="w-4 h-4" />
|
|
Queue Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|