added feneration assets

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import vehicle from "../../../assets/image/vehicles.png";
 import workStation from "../../../assets/image/workStation.png";
@@ -6,19 +6,21 @@ import machines from "../../../assets/image/machines.png";
 import feneration from "../../../assets/image/feneration.png";
 import worker from "../../../assets/image/worker.png";
 import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
-
+import arch from "../../../assets/gltf-glb/arch.glb";
+import door from "../../../assets/gltf-glb/door.glb";
+import window from "../../../assets/gltf-glb/window.glb";
 interface AssetProp {
   filename: string;
-  thumbnail: string;
+  thumbnail?: string;
   category: string;
-  description: string;
-  tags: string;
-  url: String;
-  uploadDate: number;
-  isArchieve: boolean;
-  animated: boolean;
-  price: number;
-  CreatedBy: String;
+  description?: string;
+  tags?: string;
+  url?: String;
+  uploadDate?: number;
+  isArchieve?: boolean;
+  animated?: boolean;
+  price?: number;
+  CreatedBy?: String;
 }
 const Assets: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
@@ -30,55 +32,64 @@ const Assets: React.FC = () => {
     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,
-    },
-    {
-      category: "Vehicles",
-      categoryImage: vehicle,
-    },
-    {
-      category: "Workstation",
-      categoryImage: workStation,
-    },
-    {
-      category: "Machines",
-      categoryImage: machines,
-    },
-    {
-      category: "Workers",
-      categoryImage: worker,
-    },
-  ];
-
-  // Get unique categories
-  const uniqueCategories = Array.from(
-    new Set(categoryList.map((asset) => asset.category))
+  const categoryList = useMemo(
+    () => [
+      {
+        assetName: "Doors",
+        assetImage: "",
+        category: "Feneration",
+        categoryImage: feneration,
+      },
+      {
+        assetName: "Windows",
+        assetImage: "",
+        category: "Feneration",
+        categoryImage: feneration,
+      },
+      {
+        assetName: "Pillars",
+        assetImage: "",
+        category: "Feneration",
+        categoryImage: feneration,
+      },
+      { category: "Vehicles", categoryImage: vehicle },
+      { category: "Workstation", categoryImage: workStation },
+      { category: "Machines", categoryImage: machines },
+      { category: "Workers", categoryImage: worker },
+    ],
+    []
   );
 
   const fetchCategoryAssets = async (asset: any) => {
-    try {
-      setSelectedCategory(asset);
-      const res = await getCategoryAsset(asset);
-      setFilteredAsset(res);
-    } catch (error) {}
+    setSelectedCategory(asset);
+    if (asset === "Feneration") {
+      const localAssets: AssetProp[] = [
+        {
+          filename: "arch",
+          category: "Feneration",
+          url: arch,
+        },
+        {
+          filename: "door",
+          category: "Feneration",
+          url: door,
+        },
+        {
+          filename: "window",
+          category: "Feneration",
+          url: window,
+        },
+      ];
+      setFilteredAsset(localAssets);
+    } else {
+      try {
+        const res = await getCategoryAsset(asset);
+        setFilteredAsset(res || []); // Ensure it's always an array
+      } catch (error) {}
+    }
   };
+
+  useEffect(() => {}, [filteredAsset]);
   return (
     <div className="assets-container">
       <Search onChange={handleSearchChange} />
@@ -100,12 +111,22 @@ const Assets: React.FC = () => {
             {filteredAsset &&
               filteredAsset?.map((asset: any, index: number) => (
                 <div key={index} className="assets">
-                  <img
-                    src={asset.thumbnail}
-                    alt={asset.filename}
-                    className="asset-image"
-                  />
-                  <div className="asset-name">{asset.filename}</div>
+                  {asset?.thumbnail && (
+                    <img
+                      src={asset?.thumbnail}
+                      alt={asset.filename}
+                      className="asset-image"
+                    />
+                  )}
+                  <div className="asset-name">
+                    {asset.filename
+                      .split("_")
+                      .map(
+                        (word: any) =>
+                          word.charAt(0).toUpperCase() + word.slice(1)
+                      )
+                      .join(" ")}
+                  </div>
                 </div>
               ))}
           </div>
@@ -114,7 +135,9 @@ const Assets: React.FC = () => {
         <div className="assets-wrapper">
           <h2>Categories</h2>
           <div className="categories-container">
-            {uniqueCategories.map((category, index) => {
+            {Array.from(
+              new Set(categoryList.map((asset) => asset.category))
+            ).map((category, index) => {
               const categoryInfo = categoryList.find(
                 (asset) => asset.category === category
               );