Merge branch 'main-demo' into dev-resourceManagement

app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx

@@ -1,32 +1,38 @@
 import { useEffect, useState } from 'react'
 import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
 import { useSceneContext } from '../../../../../modules/scene/sceneContext';
-import { useProductContext } from '../../../../../modules/simulation/products/productContext';
 import RenameInput from '../../../../ui/inputs/RenameInput';
 import { useResourceManagementId } from '../../../../../store/builder/store';
-import { set } from 'immer/dist/internal';
+import { getAssetThumbnail } from '../../../../../services/factoryBuilder/asset/assets/getAssetThumbnail';
 // import NavigateCatagory from '../NavigateCatagory'
 
 const Hrm = () => {
     const [selectedCard, setSelectedCard] = useState(0);
     const [workers, setWorkers] = useState<any[]>([]);
-
-    const { productStore } = useSceneContext();
-    const { products, getProductById } = productStore();
-    const { selectedProductStore } = useProductContext();
-    const { selectedProduct } = selectedProductStore();
     const { setResourceManagementId } = useResourceManagementId();
+    const { assetStore } = useSceneContext();
+    const { assets: allAssets } = assetStore();
+
+    async function getAsset(assetId: string) {
+        let thumbnail = await getAssetThumbnail(assetId)
+        if (thumbnail.thumbnail) {
+            let assetImage = thumbnail.thumbnail
+            return assetImage;
+        }
+    }
 
    useEffect(() => {
-        if (selectedProduct) {
-            const productDetails = getProductById(selectedProduct.productUuid);
-            const workerDetails = productDetails?.eventDatas || [];
+    if (allAssets.length > 0) {
+        const fetchWorkers = async () => {
+            const humans = allAssets.filter((worker: any) => worker.eventData.type === "Human");
 
-            const formattedWorkers = workerDetails
-                .filter((worker: any) => worker.type === "human")
-                .map((worker: any, index: number) => ({
+            const formattedWorkers = await Promise.all(
+                humans.map(async (worker: any, index: number) => {
+                    const assetImage = await getAsset(worker.assetId);
+
+                    return {
                         employee: {
-                        image: "",
+                            image: assetImage,
                             name: worker.modelName,
                             modelId: worker.modelUuid,
                             employee_id: `HR-${204 + index}`,
@@ -34,33 +40,28 @@ const Hrm = () => {
                         },
                         task: {
                             status: "Ongoing",
-                        title: worker.taskTitle || "No Task Assigned",
+                            title: worker.taskTitle ?? "No Task Assigned",
                             location: {
-                            floor: worker.floor || 0,
-                            zone: worker.zone || "N/A"
+                                floor: worker.floor ?? 0,
+                                zone: worker.zone ?? "N/A",
                             },
-                        planned_time_hours: worker.plannedTime || 0,
-                        time_spent_hours: worker.timeSpent || 0,
-                        total_tasks: worker.totalTasks || 0,
-                        completed_tasks: worker.completedTasks || 0
+                            planned_time_hours: worker.plannedTime ?? 0,
+                            time_spent_hours: worker.timeSpent ?? 0,
+                            total_tasks: worker.totalTasks ?? 0,
+                            completed_tasks: worker.completedTasks ?? 0,
                         },
-                    actions: [
-                        "Assign Task",
-                        "Reassign Task",
-                        "Pause",
-                        "Emergency Stop"
-                    ],
-                    location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`
-                }));
+                        actions: ["Assign Task", "Reassign Task", "Pause", "Emergency Stop"],
+                        location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`,
+                    };
+                })
+            );
 
             setWorkers(formattedWorkers);
+        };
+
+        fetchWorkers();
     }
-    }, [selectedProduct, getProductById]);
-
-    useEffect(() => {
-        // 
-    }, [workers]);
-
+}, [allAssets]);
 
 
 
@@ -151,7 +152,7 @@ const Hrm = () => {
 //     },
 // ]
 function handleRenameWorker(newName: string) {
-        // 
+
 
 }
 function handleHumanClick(employee: any) {

app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx

@@ -3,60 +3,65 @@ import { useEffect, useState } from 'react'
 import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
 import assetImage from "../../../../../../assets/image/asset-image.png"
 import { useSceneContext } from '../../../../../../modules/scene/sceneContext';
-import { useProductContext } from '../../../../../../modules/simulation/products/productContext';
 import RenameInput from '../../../../../ui/inputs/RenameInput';
 import { useResourceManagementId } from '../../../../../../store/builder/store';
+import { getAssetThumbnail } from '../../../../../../services/factoryBuilder/asset/assets/getAssetThumbnail';
+
 const AssetManagement = () => {
     // const [selectedCategory, setSelectedCategory] = useState("All Assets");
     const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
     const [assets, setAssets] = useState<any[]>([]);
-
-    const { productStore } = useSceneContext();
-    const { products, getProductById } = productStore();
-    const { selectedProductStore } = useProductContext();
-    const { selectedProduct } = selectedProductStore();
     const { setResourceManagementId } = useResourceManagementId();
+    const { assetStore } = useSceneContext();
+    const { assets: allAssets } = assetStore();
 
-
+    async function getAsset(assetId: string) {
+        let thumbnail = await getAssetThumbnail(assetId)
+        if (thumbnail.thumbnail) {
+            let assetImage = thumbnail.thumbnail
+            return assetImage;
+        }
+    }
 
     useEffect(() => {
-        if (selectedProduct) {
-            const productDetails = getProductById(selectedProduct.productUuid);
-            const productAssets = productDetails?.eventDatas || [];
+        if (allAssets.length > 0) {
+            const fetchAssets = async () => {
                 const grouped: Record<string, any> = {};
-            productAssets.forEach((asset: any) => {
-                if (asset.type === "storageUnit" || asset.type === "human") return;
-                if (!grouped[asset.modelName]) {
-                    grouped[asset.modelName] = {
+
+                // Use Promise.all to handle all async operations
+                await Promise.all(allAssets.map(async (asset: any) => {
+                    
+                    if (asset.eventData.type === "Storage" || asset.eventData.type === "Human") return;
+
+                    const assetImage = await getAsset(asset.assetId);
+
+                    if (!grouped[asset.assetId]) {
+                        grouped[asset.assetId] = {
                             id: asset.modelUuid,
+                            assetId: asset.assetId,
                             name: asset.modelName,
-                        model: asset.modelCode || "N/A",
-                        status: asset.status || "Online",
-                        usageRate: asset.usageRate || 15,
-                        level: asset.level || "Level 1",
+                            model: asset.modelCode ?? "N/A",
+                            status: asset.status ?? "Online",
+                            usageRate: asset.usageRate ?? 15,
+                            level: asset.level ?? "Level 1",
                             image: assetImage,
-                        description: asset.description || "No description",
-                        cost: asset.cost || 0,
+                            description: asset.description ?? "No description",
+                            cost: asset.cost ?? 0,
                             count: 1,
                         };
                     } else {
-                    grouped[asset.modelName].count += 1;
+                        grouped[asset.assetId].count += 1;
                     }
-            });
+                }));
 
                 setAssets(Object.values(grouped));
             }
-    }, [selectedProduct]);
+            fetchAssets();
+        }
+    }, [allAssets]);
 
     function handleRenameAsset(newName: string) {
-        // 
-        // if (expandedAssetId) {
-        //     setAssets(prevAssets =>
-        //         prevAssets.map(asset =>
-        //             asset.id === expandedAssetId ? { ...asset, name: newName } : asset
-        //         )
-        //     );
-        // }
+
     }
 
     useEffect(() => {
@@ -65,8 +70,6 @@ const AssetManagement = () => {
     }, [assets]);
 
     function handleAssetClick(id: string) {
-        
-        
         setResourceManagementId(id);
     }
 
@@ -170,9 +173,9 @@ const AssetManagement = () => {
                                     </div>
                                 </div>
 
-                                <div className="asset-estimate__view-button">
+                                <div className="asset-estimate__view-button" onClick={() => handleAssetClick(asset.id)}>
                                     <EyeIcon isClosed={false} />
-                                    <div className="asset-estimate__view-text" onClick={() => handleAssetClick(asset.id)}>View in Scene</div>
+                                    <div className="asset-estimate__view-text">View in Scene</div>
                                 </div>
                             </div>
 

app/src/services/factoryBuilder/asset/assets/getAssetThumbnail.ts

@@ -0,0 +1,33 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
+
+export const getAssetThumbnail = async (assetId: String) => {
+    
+    try {
+        const response = await fetch(
+            `${url_Backend_dwinzo}/api/v2/getAssetThumbnail/${assetId}`,
+            {
+                method: "GET",
+                headers: {
+                    Authorization: "Bearer <access_token>",
+                    "Content-Type": "application/json",
+                    token: localStorage.getItem("token") || "",
+                    refresh_token: localStorage.getItem("refreshToken") || "",
+                },
+            }
+        );
+        const newAccessToken = response.headers.get("x-access-token");
+        if (newAccessToken) {
+            localStorage.setItem("token", newAccessToken);
+        }
+
+        if (!response.ok) {
+            throw new Error("Failed to fetch assets");
+        }
+
+        // 
+        return await response.json();
+    } catch (error: any) {
+        echo.error("Failed to get asset image");
+        
+    }
+};

app/src/styles/layout/resourceManagement.scss

@@ -117,6 +117,12 @@
             border-radius: 50%;
             background-color: #fff;
             position: relative;
+            overflow: hidden;
+            .user-image{
+              height: 300%;
+              width: 300%;
+              transform: translate(-26px, -12px);
+            }
 
             .status {
               border-radius: 50%;