From e1a6c87c772b42a2f23ce69819085328f43f46d9 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 17 Jun 2026 16:41:34 +0200
Subject: [PATCH] feat: unify search bar in DataGrid to support multi-term
 search (space/comma)

---
 components/DataGrid.tsx | 48 +++++++++++------------------------------
 1 file changed, 12 insertions(+), 36 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 3635b4e..4b2a2a2 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -251,7 +251,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
     const [visibleMetrics, setVisibleMetrics] = useState<('sellOut' | 'units')[]>(['sellOut', 'units']);
     const [showAdsMetrics, setShowAdsMetrics] = useState(true);
     const [showAttributedSales, setShowAttributedSales] = useState(false);
-    const [showBulkSearch, setShowBulkSearch] = useState(false);
+
     const [showYTD, setShowYTD] = useState(false);
     const [showOnlyTop50, setShowOnlyTop50] = useState(false);
     const [showDimensionMenu, setShowDimensionMenu] = useState(false);
@@ -864,49 +864,25 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                         {/* Search Bar */}
                         <div className="flex items-center gap-2 mr-2">
                             <div className="relative w-full sm:w-64 lg:w-80">
-                                {showBulkSearch ? (
-                                    <textarea
-                                        placeholder="Bulk Search (ASINs/SKUs)..."
-                                        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 min-h-[40px] max-h-[120px] font-mono leading-tight"
-                                        rows={1}
-                                    />
-                                ) : (
-                                    <>
-                                        <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>
-                                    </>
-                                )}
+                                <input
+                                    type="text"
+                                    placeholder="Search SKU, ASIN... (separate with space or comma)"
+                                    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 && (
                                     <button
                                         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 />
                                     </button>
                                 )}
                             </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 className="h-6 w-px bg-white/10 hidden xl:block mx-1" />