began implementing filter button

JumboCode · Jan 23, 2025 · 0f3828b · 0f3828b
1 parent 9a275bd
commit 0f3828b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/app/images/filterSymbol.svg b/app/images/filterSymbol.svg
diff --git a/app/inventory/[[...inventory]]/page.tsx b/app/inventory/[[...inventory]]/page.tsx
@@ -1,6 +1,9 @@
 "use client"
 import React, { useEffect } from "react";
 import { InventorySpreadsheet } from '@app/components/InventorySpreadsheet';
+import Image from 'next/image';
+import filterSymbol from "@app/images/filterSymbol.svg"
+
 
 // Utility function to format date to dd/mm/yyyy
 function formatDate(date: Date): string {
@@ -41,7 +44,7 @@ function getInventory() {
         console.log("List of Lists:", listOfLists);
         return listOfLists;
       });
-  } catch (error) {
+  } catch (error) { 
     console.error(error);
     return Promise.resolve([]);
   }
@@ -54,7 +57,20 @@ const InternalViewInventoryPage: React.FC = () => {
       .then((items: any) => { setInventory(items) })
   }, []);
   return (
-    <InventorySpreadsheet inventoryItems={inventory} />
+    <div className= "px-10">
+      <div className= "text-[40px] relative overflow-x-auto crimson-regular font-crimson" > Inventory </div>
+      <button className = "flex flex-row border-2 border-grey rounded-l">
+            <Image
+                  src={filterSymbol}
+                  alt="filter button"
+                  width={24}
+                  height={29.14}
+              />
+        <div className= "text-[20px] relative overflow-x-auto crimson-regular font-crimson pl-2" > Filter
+        </div>
+      </button>
+      <InventorySpreadsheet inventoryItems={inventory} />
+    </div>
   );
 };