Add new images and update styles for visualization components

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -1,13 +1,105 @@
 import React, { useState } from "react";
 import Search from "../../ui/inputs/Search";
-
+import vehicle from "../../../assets/image/vehicles.png";
+import workStation from "../../../assets/image/workStation.png";
+import machines from "../../../assets/image/machines.png";
+import feneration from "../../../assets/image/feneration.png";
+import worker from "../../../assets/image/worker.png";
 const Assets: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   const handleSearchChange = (value: string) => {
     setSearchValue(value);
-    console.log(value); // Log the search value if needed
+    setSelectedCategory(null); // Reset selected category when search changes
   };
+
+  const categoryList = [
+    {
+      assetName: "Doors",
+      assetImage: "",
+      category: "Feneration",
+      categoryImage: feneration,
+    },
+    {
+      assetName: "Windows",
+      assetImage: "",
+      category: "Feneration",
+      categoryImage: feneration,
+    },
+    {
+      assetName: "Pillars",
+      assetImage: "",
+      category: "Feneration",
+      categoryImage: feneration,
+    },
+    {
+      assetName: "Forklift",
+      assetImage: "",
+      category: "Vehicles",
+      categoryImage: vehicle,
+    },
+    {
+      assetName: "AGV",
+      assetImage: "",
+      category: "Vehicles",
+      categoryImage: vehicle,
+    },
+    {
+      assetName: "Pallet",
+      assetImage: "",
+      category: "Workstation",
+      categoryImage: workStation,
+    },
+    {
+      assetName: "Controller",
+      assetImage: "",
+      category: "Workstation",
+      categoryImage: workStation,
+    },
+    {
+      assetName: "Conveyor",
+      assetImage: "",
+      category: "Workstation",
+      categoryImage: workStation,
+    },
+    {
+      assetName: "VMC",
+      assetImage: "",
+      category: "Machines",
+      categoryImage: machines,
+    },
+    {
+      assetName: "CMC",
+      assetImage: "",
+      category: "Machines",
+      categoryImage: machines,
+    },
+    {
+      assetName: "Male Worker",
+      assetImage: "",
+      category: "Workers",
+      categoryImage: worker,
+    },
+    {
+      assetName: "Female Worker",
+      assetImage: "",
+      category: "Workers",
+      categoryImage: worker,
+    },
+  ];
+
+  // Get unique categories
+  const uniqueCategories = Array.from(
+    new Set(categoryList.map((asset) => asset.category))
+  );
+
+  // Filter assets based on the selected category
+  const filteredAssets =
+    selectedCategory !== null
+      ? categoryList.filter((asset) => asset.category === selectedCategory)
+      : [];
+
   return (
     <div className="assets-container">
       <Search onChange={handleSearchChange} />
@@ -15,11 +107,58 @@ const Assets: React.FC = () => {
         <div className="searched-content">
           <p>Results for "{searchValue}"</p>
         </div>
+      ) : selectedCategory ? (
+        <div className="assets-wrapper">
+          {/* Back Button */}
+          <div
+            className="back-button"
+            onClick={() => setSelectedCategory(null)}
+          >
+            ← Back
+          </div>
+          <h2>{selectedCategory}</h2>
+          <div className="assets-container">
+            {filteredAssets.map((asset, index) => (
+              <div key={index} className="assets">
+                <img
+                  src={asset.assetImage}
+                  alt={asset.assetName}
+                  className="asset-image"
+                />
+                <div className="asset-name">{asset.assetName}</div>
+              </div>
+            ))}
+          </div>
+        </div>
       ) : (
-        <></>
+        <div className="assets-wrapper">
+          <h2>Categories</h2>
+          <div className="categories-container">
+            {uniqueCategories.map((category, index) => {
+              const categoryInfo = categoryList.find(
+                (asset) => asset.category === category
+              );
+              return (
+                <div
+                  key={index}
+                  className="category"
+                  onClick={() => setSelectedCategory(category)}
+                >
+                  <img
+                    src={categoryInfo?.categoryImage || ""}
+                    alt={category}
+                    className="category-image"
+                  />
+                  <div className="category-name">{category}</div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
       )}
     </div>
   );
 };
 
 export default Assets;
+