diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx index 99828ae..439879e 100644 --- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx +++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx @@ -1,29 +1,21 @@ 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 NavigateCatagory from '../NavigateCatagory' const Hrm = () => { const [selectedCard, setSelectedCard] = useState(0); const [workers, setWorkers] = useState([]); - - const { productStore } = useSceneContext(); - const { products, getProductById } = productStore(); - const { selectedProductStore } = useProductContext(); - const { selectedProduct } = selectedProductStore(); const { setResourceManagementId } = useResourceManagementId(); + const { assetStore } = useSceneContext(); + const { assets: allAssets } = assetStore(); useEffect(() => { - if (selectedProduct) { - const productDetails = getProductById(selectedProduct.productUuid); - const workerDetails = productDetails?.eventDatas || []; - - const formattedWorkers = workerDetails - .filter((worker: any) => worker.type === "human") + if (allAssets.length > 0) { + const formattedWorkers = allAssets + .filter((worker: any) => worker.eventData.type === "Human") .map((worker: any, index: number) => ({ employee: { image: "", @@ -34,15 +26,15 @@ 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", @@ -55,13 +47,7 @@ const Hrm = () => { setWorkers(formattedWorkers); } - }, [selectedProduct, getProductById]); - - useEffect(() => { - // - }, [workers]); - - + }, [allAssets]); // const employee_details = [ @@ -151,7 +137,7 @@ const Hrm = () => { // }, // ] function handleRenameWorker(newName: string) { - // + } function handleHumanClick(employee: any) { diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx index faa6015..c7ed11f 100644 --- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx +++ b/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(null); const [assets, setAssets] = useState([]); - - 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 || []; - const grouped: Record = {}; - productAssets.forEach((asset: any) => { - if (asset.type === "storageUnit" || asset.type === "human") return; - if (!grouped[asset.modelName]) { - grouped[asset.modelName] = { - id: asset.modelUuid, - name: asset.modelName, - 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, - count: 1, - }; - } else { - grouped[asset.modelName].count += 1; - } - }); + if (allAssets.length > 0) { + const fetchAssets = async () => { + const grouped: Record = {}; - setAssets(Object.values(grouped)); + // Use Promise.all to handle all async operations + await Promise.all(allAssets.map(async (asset: any) => { + console.log('asset: ', asset); + 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", + image: assetImage, + description: asset.description ?? "No description", + cost: asset.cost ?? 0, + count: 1, + }; + } else { + grouped[asset.assetId].count += 1; + } + })); + + setAssets(Object.values(grouped)); + } + fetchAssets(); } - }, [selectedProduct]); + }, [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); } @@ -127,7 +130,7 @@ const AssetManagement = () => { {expandedAssetId === asset.id ? <>
setExpandedAssetId(null)}>▾
- + { console.log(asset.image) }} /> :
@@ -170,9 +173,9 @@ const AssetManagement = () => { -
+
handleAssetClick(asset.id)}> -
handleAssetClick(asset.id)}>View in Scene
+
View in Scene
diff --git a/app/src/services/factoryBuilder/asset/assets/getAssetThumbnail.ts b/app/src/services/factoryBuilder/asset/assets/getAssetThumbnail.ts new file mode 100644 index 0000000..7a318a2 --- /dev/null +++ b/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) => { + console.log('assetId: ', assetId); + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v2/getAssetThumbnail/${assetId}`, + { + method: "GET", + headers: { + Authorization: "Bearer ", + "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"); + } + + // console.log('response: ', response); + return await response.json(); + } catch (error: any) { + echo.error("Failed to get asset image"); + console.log(error.message); + } +};