feat: Refactor Hrm and AssetManagement components for improved structure and styling

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

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
-import Search from '../../../../ui/inputs/Search'
-import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
-import { ClockThreeIcon, HourGlassIcon, ListTaskIcon, LocationPinIcon, SlectedTickIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
+import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
 import NavigateCatagory from '../NavigateCatagory'
 
 const Hrm = () => {
+    const [selectedCard, setSelectedCard] = useState(0);
+
     const employee_details = [
         {
             "employee": {
@@ -89,12 +89,9 @@ const Hrm = () => {
                 "Emergency Stop"
             ],
             "location": "Floor 4 . Zone B"
-        }
+        },
     ]
 
-    const [selectedCard, setSelectedCard] = useState(0);
-    console.log('selectedCard: ', selectedCard);
-
     return (
         <>
             {/* <NavigateCatagory

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

@@ -12,7 +12,7 @@ const AssetManagement = () => {
             name: 'Forklift Model X200',
             model: 'FLK-0025',
             status: 'Online',
-            usageRate: 89,
+            usageRate: 15,
             level: 'Level 1',
             image: assetImage,
             description: 'Electric forklift used for moving goods and materials in warehouse operations.',
@@ -24,7 +24,7 @@ const AssetManagement = () => {
             name: 'Warehouse Robot WR-300',
             model: 'WRB-3001',
             status: 'Online',
-            usageRate: 76,
+            usageRate: 50,
             level: 'Level 2',
             image: assetImage,
             description: 'Automated robot for handling packages and inventory in the warehouse.',
@@ -54,9 +54,9 @@ const AssetManagement = () => {
                 setSelectedCategory={setSelectedCategory}
             /> */}
 
-            <div className='assetManagement-container'>
+            <div className='assetManagement-container assetManagement-wrapper'>
                 {dummyAssets.map((asset, index) => (
-                    <div className={`assetManagement-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`}>
+                    <div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`}>
                         <header>
                             <div className="header-wrapper">
 

app/src/styles/layout/resourceManagement.scss

@@ -275,7 +275,7 @@
         flex-direction: column;
         gap: 6px;
 
-        .assetManagement-wrapper {
+        .assetManagement-card-wrapper {
             padding: 16px;
             border: 1px solid #564B69;
             border-radius: 20px;
@@ -447,6 +447,8 @@
             }
 
             &.openViewMore {
+                outline-offset: -1px;
+                outline: 1px solid var(--Color-Hover, #CCACFF);
 
                 header {
                     display: flex;