diff --git a/src/App.tsx b/src/App.tsx index 4c34031..e71be52 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -115,6 +115,7 @@ export default function App() { const syncedData = await getAllSyncedRows(session?.access_token); const editableColumns = new Set([ + COLUMNS.CLASSIFICATION, COLUMNS.LONG_DE, COLUMNS.LONG_EN, COLUMNS.SHORT_DE, COLUMNS.SHORT_EN, COLUMNS.DETAILS_DE, COLUMNS.DETAILS_EN, diff --git a/src/components/MissingDataView.tsx b/src/components/MissingDataView.tsx index de70539..6329ddb 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 } from 'lucide-react'; +import { Search, ChevronDown, ChevronUp, X, Edit2, Save, Filter, XCircle } from 'lucide-react'; import { cn } from '../lib/utils'; interface MissingDataViewProps { @@ -52,6 +52,8 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi const [sortDesc, setSortDesc] = useState(false); const [page, setPage] = useState(1); const [editing, setEditing] = useState(null); + const [columnFilters, setColumnFilters] = useState>({}); + const [showFilterMenu, setShowFilterMenu] = useState(null); const pageSize = 100; const launchDateCol = useMemo(() => @@ -87,6 +89,19 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi ); } + (Object.entries(columnFilters) as [string, string][]).forEach(([colIdx, filterValue]) => { + if (!filterValue) return; + const colIdxNum = parseInt(colIdx); + const filterLower = filterValue.toLowerCase(); + result = result.filter(r => { + const val: any = r.row[colIdxNum]; + const displayVal = colIdxNum === launchDateCol || colIdxNum === readyToOrderCol + ? formatDateValue(val) || String(val ?? '') + : String(val ?? ''); + return displayVal.toLowerCase().includes(filterLower); + }); + }); + if (sortCol !== null) { result.sort((a, b) => { const valA = a.row[sortCol]; @@ -101,7 +116,7 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi } return result; - }, [data, activeTab, search, sortCol, sortDesc, launchDateCol]); + }, [data, activeTab, search, sortCol, sortDesc, launchDateCol, columnFilters]); const paginatedData = useMemo(() => { const start = (page - 1) * pageSize; @@ -203,18 +218,45 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi handleSort(col)} + className="px-2 py-2 font-medium border-r border-slate-700/30 relative" > - +
handleSort(col)} + > {label} {sortCol === col && ( sortDesc ? : )} - +
+
+ { + 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] && ( + + )} +
))} - +