+
+
+
+
+ {openFilter === 'line' && (
+ setLineFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
+ onSelectAll={setLineFilter}
+ onClear={() => setLineFilter([])}
+ onClose={() => setOpenFilter(null)}
+ title="Filter by Line"
+ className="left-auto right-0"
+ />
+ )}
+
+
+
+
+ {openFilter === 'class' && (
+ setClassFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
+ onSelectAll={setClassFilter}
+ onClear={() => setClassFilter([])}
+ onClose={() => setOpenFilter(null)}
+ title="Filter by Classification"
+ className="left-auto right-0"
+ />
+ )}
+
+
+ {(lineFilter.length > 0 || classFilter.length > 0 || search) && (
+
+ )}
+
+
+
+
+
-
- {groups.filter(g => g.isInconsistent).length} Inconsistencies found
+
+ {groups.filter(g => g.isInconsistent).length} ISSUES
diff --git a/src/components/MatrixView.tsx b/src/components/MatrixView.tsx
index 358afdb..6e00438 100644
--- a/src/components/MatrixView.tsx
+++ b/src/components/MatrixView.tsx
@@ -1,6 +1,8 @@
import React, { useState, useMemo } from 'react';
-import { Search } from 'lucide-react';
import { ExcelRow } from '../types';
+import { Search, Filter, ChevronDown, ChevronUp, X as XIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { ColumnFilterPopover } from './ColumnFilterPopover';
interface MatrixViewProps {
data: ExcelRow[];
@@ -11,20 +13,88 @@ export function MatrixView({ data, headers }: MatrixViewProps) {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(25);
const [search, setSearch] = useState('');
+ const [columnFilters, setColumnFilters] = useState
>({});
+ const [openFilterCol, setOpenFilterCol] = useState(null);
+ const [sortCol, setSortCol] = useState(null);
+ const [sortDesc, setSortDesc] = useState(false);
const filteredData = useMemo(() => {
- if (!search) return data;
- const s = search.toLowerCase();
- return data.filter(row =>
- row.some(cell => String(cell || '').toLowerCase().includes(s))
- );
- }, [data, search]);
+ let result = data.map((row, index) => ({ row, index }));
+
+ // Global search
+ if (search) {
+ const s = search.toLowerCase();
+ result = result.filter(r =>
+ r.row.some(cell => String(cell || '').toLowerCase().includes(s))
+ );
+ }
+
+ // Column-specific filters
+ Object.entries(columnFilters).forEach(([colIdx, selectedValues]) => {
+ const vals = selectedValues as string[];
+ if (vals.length > 0) {
+ result = result.filter(r => vals.includes(String(r.row[Number(colIdx)] || '')));
+ }
+ });
+
+ // Sorting
+ if (sortCol !== null) {
+ result.sort((a, b) => {
+ const valA = String(a.row[sortCol] || '').toLowerCase();
+ const valB = String(b.row[sortCol] || '').toLowerCase();
+
+ // Handle numbers sorting correctly
+ const numA = parseFloat(valA.replace(',', '.'));
+ const numB = parseFloat(valB.replace(',', '.'));
+
+ if (!isNaN(numA) && !isNaN(numB)) {
+ return sortDesc ? numB - numA : numA - numB;
+ }
+
+ return sortDesc
+ ? valB.localeCompare(valA)
+ : valA.localeCompare(valB);
+ });
+ }
+
+ return result;
+ }, [data, search, columnFilters, sortCol, sortDesc]);
const paginatedData = useMemo(() => {
const start = (page - 1) * pageSize;
return filteredData.slice(start, start + pageSize);
}, [filteredData, page, pageSize]);
+ const handleSort = (col: number) => {
+ if (sortCol === col) {
+ setSortDesc(!sortDesc);
+ } else {
+ setSortCol(col);
+ setSortDesc(false);
+ }
+ };
+
+ const getUniqueValues = (col: number) => {
+ const values = data.map(r => String(r[col] || ''));
+ return Array.from(new Set(values)).sort();
+ };
+
+ const toggleColumnFilter = (col: number, value: string) => {
+ setColumnFilters(prev => {
+ const current = prev[col] || [];
+ const next = current.includes(value)
+ ? current.filter(v => v !== value)
+ : [...current, value];
+ return { ...prev, [col]: next };
+ });
+ setPage(1);
+ };
+
+ const setBatchColumnFilter = (col: number, values: string[]) => {
+ setColumnFilters(prev => ({ ...prev, [col]: values }));
+ setPage(1);
+ };
+
const formatCellValue = (val: any, header: string = '') => {
if (val === undefined || val === null || val === '') return '';
@@ -91,15 +161,29 @@ export function MatrixView({ data, headers }: MatrixViewProps) {
Matrix View
All data fields formatted to 2 decimal places for numbers/prices.
-
-
{ setSearch(e.target.value); setPage(1); }}
- className="w-full pl-9 pr-4 py-2 bg-slate-900 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-medium"
- />
+
+
+
+ { setSearch(e.target.value); setPage(1); }}
+ className="w-full pl-9 pr-4 py-2 bg-slate-900 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-medium"
+ />
+
+ {(Object.values(columnFilters) as string[][]).some(v => v.length > 0) && (
+
+ )}
@@ -108,14 +192,58 @@ export function MatrixView({ data, headers }: MatrixViewProps) {