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
               );

app/src/components/ui/Tools.tsx

@@ -68,9 +68,7 @@ const Tools: React.FC = () => {
         : true
     );
   }, []);
-  useEffect(() => {
-    console.log("activeModule", activeModule);
-  }, [activeModule]);
+  useEffect(() => {}, [activeModule]);
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);

app/src/modules/market/AssetPreview.tsx

@@ -94,7 +94,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
           <div className="asset-details">
             <div className="asset-name">{selectedCard.assetName}</div>
             <div className="asset-description">
-              {`${selectedCard.assetName} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`}
+              {`${selectedCard.description}`}
             </div>
             <div className="asset-review">
               <div className="asset-rating">

app/src/modules/market/CardsContainer.tsx

@@ -14,6 +14,7 @@ interface ModelData {
   thumbnail: string;
   uploadDate: number;
   _id: string;
+  price: number;
 }
 interface ModelsProps {
   models: ModelData[];
@@ -50,7 +51,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
               key={assetDetail._id}
               assetName={assetDetail?.filename}
               uploadedOn={assetDetail.uploadDate}
-              price={36500}
+              price={assetDetail?.price}
               rating={4.5}
               views={800}
               onSelectCard={handleCardSelect}

app/src/modules/market/FilterSearch.tsx

@@ -17,6 +17,7 @@ interface ModelData {
   thumbnail: string;
   uploadDate: number;
   _id: string;
+  price: number;
 }
 interface ModelsProps {
   models: ModelData[];

app/src/modules/market/MarketPlace.tsx

@@ -15,6 +15,7 @@ interface ModelData {
   thumbnail: string;
   uploadDate: number;
   _id: string;
+  price: number;
 }
 const MarketPlace = () => {
   const [models, setModels] = useState<ModelData[]>([]);
@@ -24,6 +25,7 @@ const MarketPlace = () => {
     const filteredAssets = async () => {
       try {
         const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
+        
         setModels(filt.items);
         setFilteredModels(filt.items);
       } catch {}

app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts

@@ -1,6 +1,5 @@
 let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
 export const getCategoryAsset = async (categoryName: any) => {
-  console.log("categoryName:api ", categoryName);
   try {
     const response = await fetch(
       `${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`,
@@ -9,15 +8,12 @@ export const getCategoryAsset = async (categoryName: any) => {
         headers: {
           "Content-Type": "application/json",
         },
-        // body: JSON.stringify({ filename }),
       }
     );
 
     const result = await response.json();
-    console.log("result: ", result);
     return result;
   } catch (error: any) {
-    // console.error("Error fetching category:", error.message);
     throw new Error(error.message);
   }
 };

app/src/styles/layout/sidebar.scss

@@ -1029,10 +1029,14 @@
         }
 
         .asset-image {
+          height: 100%;
+          width: 100%;
           position: absolute;
-          top: 50%;
-          right: 5px;
-          transform: translate(0, -50%);
+          // top: 50%;
+          // right: 5px;
+          // transform: translate(0, -50%);
+          top: 0;
+          left: 0;
           z-index: 2;
         }
       }