-
+
+
-
-
- Planned time:
-
-
-
{employee.task.planned_time_hours} hr
+
+
+ Planned time:
- {/*
+
+ {employee.task.planned_time_hours} hr
+
+ {/*
@@ -242,39 +243,39 @@ const Hrm = () => {
{employee.task.time_spent_hours} hr
*/}
-
+
-
-
- Cost per hr:
-
-
-
{employee.task.completed_tasks}
+
+
+ Cost per hr:
-
-
-
-
{employee.location}
-
-
- {/*
- */}
-
-
+ {employee.task.completed_tasks}
+
+
+
{employee.location}
+
+
+ {/*
+ */}
+
+
+
- ))}
-
- >
- )
+
+
+ ))}
+
+ >
+)
}
export default Hrm
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 718915c..eddec0b 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
+++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
@@ -1,65 +1,70 @@
import { useEffect, useState } from 'react'
// import NavigateCatagory from '../../NavigateCatagory'
import { EyeIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
-import assetImage from "../../../../../../assets/image/asset-image.png"
+import assetImageFallback 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';
import { TypeBasedAssetIcons } from '../../../../../icons/AssetTypeIcons';
+
const AssetManagement = () => {
// const [selectedCategory, setSelectedCategory] = useState("All Assets");
const [expandedAssetId, setExpandedAssetId] = useState
(null);
const [assets, setAssets] = useState([]);
-
- const { productStore } = useSceneContext();
- const { 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 ?? assetImageFallback;
+ 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,
- type: asset.type,
- 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) => {
+
+ 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,
+ type: asset.eventData.type,
+ 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();
}
- // eslint-disable-next-line
- }, [selectedProduct]);
+ }, [allAssets]);
function handleRenameAsset(newName: string) {
- //
- // if (expandedAssetId) {
- // setAssets(prevAssets =>
- // prevAssets.map(asset =>
- // asset.id === expandedAssetId ? { ...asset, name: newName } : asset
- // )
- // );
- // }
+
}
useEffect(() => {
@@ -68,8 +73,6 @@ const AssetManagement = () => {
}, [assets]);
function handleAssetClick(id: string) {
-
-
setResourceManagementId(id);
}
@@ -126,7 +129,6 @@ 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..77469a0
--- /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) => {
+
+ 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");
+ }
+
+ //
+ return await response.json();
+ } catch (error: any) {
+ echo.error("Failed to get asset image");
+
+ }
+};
diff --git a/app/src/styles/layout/_resourceManagement.scss b/app/src/styles/layout/_resourceManagement.scss
index 131220f..9582a24 100644
--- a/app/src/styles/layout/_resourceManagement.scss
+++ b/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%;