From addf93861979cdcfd2193b5ac3313183c0206868 Mon Sep 17 00:00:00 2001
From: Neeraj-Kondaveeti <neerajkondaveeti1901@gmail.com>
Date: Tue, 2 Jun 2026 17:10:24 -0400
Subject: [PATCH] Implement inventory search functionality

---
 .../KIInventory/KIInventory.jsx               | 44 ++++++++++++++-----
 .../KIInventory/KIInventory.module.css        | 12 +++++
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/components/KitchenandInventory/KIInventory/KIInventory.jsx b/src/components/KitchenandInventory/KIInventory/KIInventory.jsx
index 7a919f2289..91b83b20ef 100644
--- a/src/components/KitchenandInventory/KIInventory/KIInventory.jsx
+++ b/src/components/KitchenandInventory/KIInventory/KIInventory.jsx
@@ -66,11 +66,21 @@ const KIInventory = () => {
   // Onsite grown — computed from all items
   const onsiteGrown = items.filter(i => i.onsite).length;
 
-  // Items for active tab filtered by category and search term
+  // Search helper
+  const filterItems = itemsToFilter => {
+    if (!searchTerm.trim()) {
+      return itemsToFilter;
+    }
+
+    return itemsToFilter.filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
+  };
+
+  // Items for active tab
   const activeCategory = CATEGORY_MAP[activeTab];
-  const tabItems = items
-    .filter(i => i.category === activeCategory)
-    .filter(i => !searchTerm || i.name.toLowerCase().includes(searchTerm.toLowerCase()));
+
+  const categoryItems = items.filter(i => i.category === activeCategory);
+
+  const tabItems = filterItems(categoryItems);
 
   // Preserved items description for notification banner
   const preservedDesc =
@@ -91,7 +101,9 @@ const KIInventory = () => {
     }
     if (searchTerm) {
       return (
-        <p style={{ padding: '1rem', opacity: 0.6 }}>No results for &quot;{searchTerm}&quot;</p>
+        <p className={`${styles.noResults} ${darkMode ? styles.darkNoResults : ''}`}>
+          No results for "{searchTerm}"
+        </p>
       );
     }
     return <p style={{ padding: '1rem', opacity: 0.6 }}>No items in {tabName} yet.</p>;
@@ -188,12 +200,20 @@ const KIInventory = () => {
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
             />
-            <button
-              className={`${styles.clearSearch} ${darkMode ? styles.darkClearSearch : ''}`}
-              onClick={() => setSearchTerm('')}
-            >
-              x
-            </button>
+            {searchTerm && (
+              <button
+                className={`${styles.clearSearch} ${darkMode ? styles.darkClearSearch : ''}`}
+                onClick={() => setSearchTerm('')}
+                style={{
+                  backgroundColor: 'red',
+                  color: 'white',
+                  padding: '4px 8px',
+                  marginLeft: '5px',
+                }}
+              >
+                CLEAR
+              </button>
+            )}
           </div>
           <div>
             <button className={classnames(styles.button, styles.addItemButton)}>
@@ -213,7 +233,7 @@ const KIInventory = () => {
           <TabPane key={tab} tabId={tab}>
             <div className={styles.tabContainer}>
               {/* Preserved items notification — only on the Ingredients tab */}
-              {index === 0 && preservedItems.length > 0 && (
+              {index === 0 && preservedItems.length > 0 && !searchTerm && (
                 <div
                   className={`${styles.notificationContainer} ${
                     darkMode ? styles.darkModeNotification : ''
diff --git a/src/components/KitchenandInventory/KIInventory/KIInventory.module.css b/src/components/KitchenandInventory/KIInventory/KIInventory.module.css
index 285fa3814e..1d5f43bbf1 100644
--- a/src/components/KitchenandInventory/KIInventory/KIInventory.module.css
+++ b/src/components/KitchenandInventory/KIInventory/KIInventory.module.css
@@ -311,6 +311,18 @@
   }
 }
 
+.noResults {
+  padding: 1rem;
+  opacity: 0.6;
+  text-align: center;
+  width: 100%;
+  font-size: 1rem;
+}
+
+.darkNoResults {
+  color: #d1d5db;
+}
+
 @media screen and (width <= 768px){
   .inventoryContainer {
     padding: 5px;