Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement asset thumbnail fetching and update Hrm and AssetManagement components to use asset data

Browse Source
This commit is contained in:
Gomathi
2025-08-25 18:13:57 +05:30
parent ff22152d8c
commit 358ce22767
3 changed files with 95 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
View File

@@ -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<any[]>([]);
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) {

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

@@ -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) => {
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",
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);
}
@@ -127,7 +130,7 @@ const AssetManagement = () => {
{expandedAssetId === asset.id ?
<>
<div className="drop-icon" onClick={() => setExpandedAssetId(null)}>▾</div>
<img className='asset-image' src={asset.image} alt="" />
<img className='asset-image' src={asset.image} alt="" onClick={() => { console.log(asset.image) }} />
</>
:
<div className="icon"><ForkLiftIcon /></div>
@@ -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>

33
app/src/services/factoryBuilder/asset/assets/getAssetThumbnail.ts Normal file
View File

@@ -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 <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");
}
// console.log('response: ', response);
return await response.json();
} catch (error: any) {
echo.error("Failed to get asset image");
console.log(error.message);
}
};