christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 18:05:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: unify search bar in DataGrid to support multi-term search (space/comma)

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-06-17 16:41:34 +02:00
parent 64f2953c70
commit e1a6c87c77
1 changed files with 12 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+12 -36
View File
@@ -251,7 +251,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
const [visibleMetrics, setVisibleMetrics] = useState<('sellOut' | 'units')[]>(['sellOut', 'units']); const [visibleMetrics, setVisibleMetrics] = useState<('sellOut' | 'units')[]>(['sellOut', 'units']);
const [showAdsMetrics, setShowAdsMetrics] = useState(true); const [showAdsMetrics, setShowAdsMetrics] = useState(true);
const [showAttributedSales, setShowAttributedSales] = useState(false); const [showAttributedSales, setShowAttributedSales] = useState(false);
const [showBulkSearch, setShowBulkSearch] = useState(false);
const [showYTD, setShowYTD] = useState(false); const [showYTD, setShowYTD] = useState(false);
const [showOnlyTop50, setShowOnlyTop50] = useState(false); const [showOnlyTop50, setShowOnlyTop50] = useState(false);
const [showDimensionMenu, setShowDimensionMenu] = useState(false); const [showDimensionMenu, setShowDimensionMenu] = useState(false);
@@ -864,49 +864,25 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
{/* Search Bar */} {/* Search Bar */}
<div className="flex items-center gap-2 mr-2"> <div className="flex items-center gap-2 mr-2">
<div className="relative w-full sm:w-64 lg:w-80"> <div className="relative w-full sm:w-64 lg:w-80">
{showBulkSearch ? ( <input
<textarea type="text"
placeholder="Bulk Search (ASINs/SKUs)..." placeholder="Search SKU, ASIN... (separate with space or comma)"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all min-h-[40px] max-h-[120px] font-mono leading-tight" className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
rows={1} />
/> <svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
) : ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
<> </svg>
<input
type="text"
placeholder="Search SKU, ASIN..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
/>
<svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</>
)}
{searchTerm && ( {searchTerm && (
<button <button
onClick={() => setSearchTerm('')} onClick={() => setSearchTerm('')}
className={`absolute right-3 ${showBulkSearch ? 'top-2' : 'top-2.5'} text-slate-500 hover:text-white`} className="absolute right-3 top-2.5 text-slate-500 hover:text-white"
> >
<CloseIcon /> <CloseIcon />
</button> </button>
)} )}
</div> </div>
<button
onClick={() => setShowBulkSearch(!showBulkSearch)}
className={`p-2 rounded-lg border transition-all flex items-center justify-center ${showBulkSearch
? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)]'
: 'bg-slate-800/50 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
}`}
title={showBulkSearch ? "Switch to Single Search" : "Enable Bulk Search"}
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
</button>
</div> </div>
<div className="h-6 w-px bg-white/10 hidden xl:block mx-1" /> <div className="h-6 w-px bg-white/10 hidden xl:block mx-1" />