diff --git a/src/components/MissingDataView.tsx b/src/components/MissingDataView.tsx index 6329ddb..a555304 100644 --- a/src/components/MissingDataView.tsx +++ b/src/components/MissingDataView.tsx @@ -1,6 +1,6 @@ import React, { useState, useMemo } from 'react'; import { ExcelRow, COLUMNS } from '../types'; -import { Search, ChevronDown, ChevronUp, X, Edit2, Save, Filter, XCircle } from 'lucide-react'; +import { Search, ChevronDown, ChevronUp, X, Edit2, Save, Filter, XCircle, ChevronLeft, ChevronRight } from 'lucide-react'; import { cn } from '../lib/utils'; interface MissingDataViewProps { @@ -54,6 +54,7 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi const [editing, setEditing] = useState(null); const [columnFilters, setColumnFilters] = useState>({}); const [showFilterMenu, setShowFilterMenu] = useState(null); + const [filterSearch, setFilterSearch] = useState>({}); const pageSize = 100; const launchDateCol = useMemo(() => @@ -64,6 +65,33 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi const launchHeader = launchDateCol >= 0 ? headers[launchDateCol] : 'Launch Date'; const readyHeader = readyToOrderCol >= 0 ? headers[readyToOrderCol] : 'Ready to Order'; + const columnUniqueValues = useMemo(() => { + const cols = columns.map(c => c.col); + const result: Record> = {}; + 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, launchDateCol, readyToOrderCol]); + + const getDisplayValues = (col: number) => { + const values = columnUniqueValues[col]; + if (!values) return []; + const searchVal = filterSearch[col]?.toLowerCase() || ''; + const arr = Array.from(values).sort(); + return searchVal ? arr.filter(v => v.toLowerCase().includes(searchVal)) : arr; + }; + const filteredData = useMemo(() => { let result = data.map((row, index) => ({ row, index })); @@ -214,7 +242,11 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi - {columns.map(({ col, label, width }) => ( + {columns.map(({ col, label, width }) => { + const isOpen = showFilterMenu === col; + const hasFilter = columnFilters[col]; + const displayValues = getDisplayValues(col); + return ( - ))} + );})}
- { - setColumnFilters(prev => ({ ...prev, [col]: e.target.value })); - setPage(1); - }} - onClick={(e) => e.stopPropagation()} - className="w-full px-1.5 py-0.5 bg-slate-800 border border-slate-600 rounded text-[10px] text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500" - /> - {columnFilters[col] && ( - + + {isOpen && ( +
+
+ setFilterSearch(prev => ({ ...prev, [col]: e.target.value }))} + onClick={(e) => e.stopPropagation()} + className="w-full px-2 py-1 bg-slate-900 border border-slate-700 rounded text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> +
+
+ + {displayValues.map((val) => ( + + ))} + {displayValues.length === 0 && ( +
No values
+ )} +
+
)}