human resource management profile ui fix

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

@@ -1,9 +1,13 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
+import {
-import { useSceneContext } from '../../../../../modules/scene/sceneContext';
+  ClockThreeIcon,
-import RenameInput from '../../../../ui/inputs/RenameInput';
+  LocationPinIcon,
-import { useResourceManagementId } from '../../../../../store/builder/store';
+  TargetIcon,
-import { getAssetThumbnail } from '../../../../../services/factoryBuilder/asset/assets/getAssetThumbnail';
+} from "../../../../icons/ExportCommonIcons";
+import { useSceneContext } from "../../../../../modules/scene/sceneContext";
+import RenameInput from "../../../../ui/inputs/RenameInput";
+import { useResourceManagementId } from "../../../../../store/builder/store";
+import { getAssetThumbnail } from "../../../../../services/factoryBuilder/asset/assets/getAssetThumbnail";
 // import NavigateCatagory from '../NavigateCatagory'
 
 const Hrm = () => {
@@ -14,9 +18,9 @@ const Hrm = () => {
   const { assets: allAssets } = assetStore();
 
   async function getAsset(assetId: string) {
-        let thumbnail = await getAssetThumbnail(assetId)
+    let thumbnail = await getAssetThumbnail(assetId);
     if (thumbnail.thumbnail) {
-            let assetImage = thumbnail.thumbnail
+      let assetImage = thumbnail.thumbnail;
       return assetImage;
     }
   }
@@ -24,7 +28,9 @@ const Hrm = () => {
   useEffect(() => {
     if (allAssets.length > 0) {
       const fetchWorkers = async () => {
-            const humans = allAssets.filter((worker: any) => worker.eventData.type === "Human");
+        const humans = allAssets.filter(
+          (worker: any) => worker.eventData.type === "Human"
+        );
 
         const formattedWorkers = await Promise.all(
           humans.map(async (worker: any, index: number) => {
@@ -50,8 +56,15 @@ const Hrm = () => {
                 total_tasks: worker.totalTasks ?? 0,
                 completed_tasks: worker.completedTasks ?? 0,
               },
-                        actions: ["Assign Task", "Reassign Task", "Pause", "Emergency Stop"],
+              actions: [
-                        location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`,
+                "Assign Task",
+                "Reassign Task",
+                "Pause",
+                "Emergency Stop",
+              ],
+              location: `Floor ${worker.floor || "-"} . Zone ${
+                worker.zone || "-"
+              }`,
             };
           })
         );
@@ -63,8 +76,6 @@ const Hrm = () => {
     }
   }, [allAssets]);
 
-
-
   // const employee_details = [
   //     {
   //         "employee": {
@@ -151,17 +162,13 @@ const Hrm = () => {
   //         "location": "Floor 4 . Zone B"
   //     },
   // ]
-function handleRenameWorker(newName: string) {
+  function handleRenameWorker(newName: string) {}
-
-
-}
   function handleHumanClick(employee: any) {
     if (employee.modelId) {
       setResourceManagementId(employee.modelId);
     }
   }
 
-
   return (
     <>
       {/* <NavigateCatagory
@@ -170,27 +177,45 @@ return (
                 setSelectedCategory={setSelectedCategory}
             /> */}
 
-        <div className='hrm-container assetManagement-wrapper'>
+      <div className="hrm-container assetManagement-wrapper">
         {workers.map((employee, index) => (
           <div
-                    className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
+            className={`analysis-wrapper ${
+              selectedCard === index ? "active" : ""
+            }`}
             onClick={() => setSelectedCard(index)}
             key={index}
           >
             <header>
               <div className="user-details">
                 <div className="user-image-wrapper">
-                                <img className='user-image' src={employee.employee.image} alt="" />
+                  <img
+                    className="user-image"
+                    src={employee.employee.image}
+                    alt=""
+                  />
                   <div className={`status ${employee.employee.status}`}></div>
                 </div>
                 <div className="details">
                   {/* <div className="employee-name">{employee.employee.name}</div> */}
-                                <RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
+                  <RenameInput
-                                <div className="employee-id">{employee.employee.employee_id}</div>
+                    value={employee.employee.name}
+                    onRename={handleRenameWorker}
+                  />
+                  <div className="employee-id">
+                    {employee.employee.employee_id}
+                  </div>
                 </div>
               </div>
 
-                        <div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
+              <div
+                className="see-more"
+                onClick={() => {
+                  handleHumanClick(employee.employee);
+                }}
+              >
+                View in Scene
+              </div>
             </header>
 
             <div className="content">
@@ -217,13 +242,16 @@ return (
 
               <div className="task-stats">
                 <div className="stat-item">
-
                   <div className="stat-wrapper">
-                                    <span className="stat-icon"><ClockThreeIcon /></span>
+                    <span className="stat-icon">
+                      <ClockThreeIcon />
+                    </span>
                     <span>Planned time:</span>
                   </div>
 
-                                <span className='stat-value'>{employee.task.planned_time_hours} hr</span>
+                  <span className="stat-value">
+                    {employee.task.planned_time_hours} hr
+                  </span>
                 </div>
                 {/* <div className="stat-item">
 
@@ -244,13 +272,16 @@ return (
                                     <span className='stat-value'>{employee.task.time_spent_hours} hr</span>
                                 </div> */}
                 <div className="stat-item">
-
                   <div className="stat-wrapper">
-                                    <span className="stat-icon"><TargetIcon /></span>
+                    <span className="stat-icon">
+                      <TargetIcon />
+                    </span>
                     <span>Cost per hr:</span>
                   </div>
 
-                                <span className='stat-value'>{employee.task.completed_tasks}</span>
+                  <span className="stat-value">
+                    {employee.task.completed_tasks}
+                  </span>
                 </div>
               </div>
 
@@ -263,19 +294,18 @@ return (
                 </div>
                 <div className="location-value">{employee.location}</div>
               </div>
-                        <div className="task-actions">
+              {/* <div className="task-actions">
-                            {/* <button className="btn btn-default">Assign Task</button>
+                <button className="btn btn-default">Assign Task</button>
-                                <button className="btn btn-default">Reassign Task</button> */}
+                <button className="btn btn-default">Reassign Task</button>
                 <button className="btn btn-default">Pause</button>
                 <button className="btn btn-danger">Emergency Stop</button>
+              </div> */}
             </div>
           </div>
-
-                </div>
         ))}
       </div>
     </>
-)
+  );
-}
+};
 
-export default Hrm
+export default Hrm;

app/src/styles/layout/_resourceManagement.scss

@@ -114,28 +114,27 @@
           .user-image-wrapper {
             width: 28px;
             height: 28px;
+            position: relative;
+            .user-image {
+              height: 100%;
+              width: 100%;
               border-radius: 50%;
               background-color: #fff;
-            position: relative;
               overflow: hidden;
-            .user-image{
+              // transform: translate(-26px, -12px);
-              height: 300%;
-              width: 300%;
-              transform: translate(-26px, -12px);
             }
 
             .status {
               border-radius: 50%;
               width: 6px;
               height: 6px;
-              outline: 1px solid #2f2c32;
+              outline: 2px solid var(--background-color-solid);
-
               position: absolute;
               bottom: 0;
               right: 0;
 
               &.Active {
-                background-color: #44e5c6;
+                background-color: #1d9419;
               }
             }
           }