diff --git a/src/components/ArticleDetails.tsx b/src/components/ArticleDetails.tsx index ca02db9..9d90dbd 100644 --- a/src/components/ArticleDetails.tsx +++ b/src/components/ArticleDetails.tsx @@ -1,6 +1,6 @@ import React, { useState, useMemo } from 'react'; import { ExcelRow, COLUMNS } from '../types'; -import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package, X as XIcon } from 'lucide-react'; +import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package, X } from 'lucide-react'; import { cn } from '../lib/utils'; import { ColumnFilterPopover } from './ColumnFilterPopover'; @@ -185,8 +185,16 @@ export function ArticleDetails({ data, onEdit, rowStatuses }: ArticleDetailsProp 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" + 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 && ( + + )} {(Object.values(columnFilters) as string[][]).some(v => v.length > 0) && ( )} diff --git a/src/components/ColumnFilterPopover.tsx b/src/components/ColumnFilterPopover.tsx index fae457a..77b4cee 100644 --- a/src/components/ColumnFilterPopover.tsx +++ b/src/components/ColumnFilterPopover.tsx @@ -1,5 +1,5 @@ import React, { useState, useMemo } from 'react'; -import { Search, Check } from 'lucide-react'; +import { Search, Check, X } from 'lucide-react'; import { cn } from '../lib/utils'; interface ColumnFilterPopoverProps { @@ -50,9 +50,17 @@ export function ColumnFilterPopover({ placeholder="Filter values..." value={search} onChange={e => setSearch(e.target.value)} - 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" + className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500" autoFocus /> + {search && ( + + )}
diff --git a/src/components/DimensionsView.tsx b/src/components/DimensionsView.tsx index eeff64b..702a4e4 100644 --- a/src/components/DimensionsView.tsx +++ b/src/components/DimensionsView.tsx @@ -1,6 +1,6 @@ import React, { useState, useMemo } from 'react'; import { ExcelRow, COLUMNS } from '../types'; -import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw, Layers, Link2, Search, Filter, X as XIcon, Undo2 } from 'lucide-react'; +import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw, Layers, Link2, Search, Filter, X, Undo2 } from 'lucide-react'; import { cn } from '../lib/utils'; import { ConfirmModal } from './ConfirmModal'; import { ColumnFilterPopover } from './ColumnFilterPopover'; @@ -307,8 +307,16 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat placeholder="Search SKU or Name in groups..." value={search} onChange={e => setSearch(e.target.value)} - 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" + className="w-full pl-9 pr-10 py-2 bg-slate-900 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-blue-500" /> + {search && ( + + )}
@@ -368,7 +376,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat className="p-2 text-red-400 hover:text-red-300 transition-colors" title="Clear all filters" > - + )}
diff --git a/src/components/HistoryView.tsx b/src/components/HistoryView.tsx index 24f10e8..aa70631 100644 --- a/src/components/HistoryView.tsx +++ b/src/components/HistoryView.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { History, RotateCcw, ChevronDown, ChevronRight, User, Calendar, Tag } from 'lucide-react'; +import { History, RotateCcw, ChevronDown, ChevronRight, User, Calendar, Tag, Search, X } from 'lucide-react'; import { getHistory, deleteHistoryEntry, HistoryEntry } from '../lib/supabase'; import { ExcelRow, COLUMNS } from '../types'; import { cn } from '../lib/utils'; @@ -102,8 +102,16 @@ export function HistoryView({ headers, data, onRevert, sessionToken }: HistoryVi placeholder="Search history..." value={search} onChange={(e) => setSearch(e.target.value)} - className="pl-10 pr-4 py-2 bg-slate-800 border border-slate-700 rounded-md text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition-colors w-64" + className="pl-10 pr-10 py-2 bg-slate-800 border border-slate-700 rounded-md text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition-colors w-64" /> + {search && ( + + )} + )} {(Object.values(columnFilters) as string[][]).some(v => v.length > 0) && ( )} diff --git a/src/components/PendingValidationView.tsx b/src/components/PendingValidationView.tsx index bfa7f49..64b609a 100644 --- a/src/components/PendingValidationView.tsx +++ b/src/components/PendingValidationView.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { ExcelRow, COLUMNS } from '../types'; -import { Clock, Undo2, Package, Box, DollarSign, FileText, Search, Filter } from 'lucide-react'; +import { Clock, Undo2, Package, Box, DollarSign, FileText, Search, Filter, X } from 'lucide-react'; import { cn } from '../lib/utils'; interface PendingValidationViewProps { @@ -81,8 +81,16 @@ export function PendingValidationView({ data, pendingRows, rowStatuses, onRevert placeholder="Search by article no or name..." value={search} onChange={e => setSearch(e.target.value)} - className="bg-slate-800 border border-slate-700 rounded-md pl-9 pr-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-blue-500 w-64" + className="bg-slate-800 border border-slate-700 rounded-md pl-9 pr-10 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-blue-500 w-64" /> + {search && ( + + )} diff --git a/src/components/PricingView.tsx b/src/components/PricingView.tsx index e212763..5e9d5d9 100644 --- a/src/components/PricingView.tsx +++ b/src/components/PricingView.tsx @@ -282,9 +282,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit, onChange={e => setSearch(e.target.value)} className="w-full pl-4 pr-10 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all" /> -
- -
+ {search ? ( + + ) : ( +
+ +
+ )} {/* ── Filter tabs ── */} diff --git a/src/components/ProductDescriptions.tsx b/src/components/ProductDescriptions.tsx index ed19333..a6d47c8 100644 --- a/src/components/ProductDescriptions.tsx +++ b/src/components/ProductDescriptions.tsx @@ -246,8 +246,16 @@ export function ProductDescriptions({ data, headers, asinColumnIndex, onEdit, ro placeholder="Search Article Name or No..." value={search} onChange={e => { 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" + className="w-full pl-9 pr-10 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" /> + {search && ( + + )} {(Object.values(columnFilters) as string[][]).some(v => v.length > 0) && (