diff --git a/app/src/assets/image/asset-image.png b/app/src/assets/image/asset-image.png new file mode 100644 index 0000000..851c7aa Binary files /dev/null and b/app/src/assets/image/asset-image.png differ diff --git a/app/src/components/icons/ContextMenuIcons.tsx b/app/src/components/icons/ContextMenuIcons.tsx index 3220547..3519c70 100644 --- a/app/src/components/icons/ContextMenuIcons.tsx +++ b/app/src/components/icons/ContextMenuIcons.tsx @@ -173,7 +173,7 @@ export function FocusIcon() { export function TransformIcon() { return ( - + @@ -189,7 +189,7 @@ export function TransformIcon() { export function DublicateIcon() { return ( - + @@ -207,7 +207,7 @@ export function DublicateIcon() { export function CopyIcon() { return ( - + @@ -223,7 +223,7 @@ export function CopyIcon() { export function PasteIcon() { return ( - + @@ -248,7 +248,7 @@ export function ModifiersIcon() { export function DeleteIcon() { return ( - + @@ -263,7 +263,7 @@ export function DeleteIcon() { export function MoveIcon() { return ( - + diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index 691f50f..e7aa8a2 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -1370,7 +1370,7 @@ export const NavigationIcon = () => { export const HangTagIcon = () => { return ( - + @@ -1476,4 +1476,43 @@ export const TargetIcon = () => { ) +} + +export const ForkLiftIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} +export const RightHalfFillCircleIcon = () => { + return ( + + + + ) } \ No newline at end of file diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index 9c09869..95844ad 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -835,3 +835,29 @@ export const LayoutIcon = () => { ); }; + + +export function FilePackageIcon({ isActive }: Readonly<{ isActive: boolean }>) { + + return ( + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index e283986..f09af98 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -59,7 +59,7 @@ function MainScene() { const { setFloatingWidget } = useFloatingWidget(); const { clearComparisonProduct } = useComparisonProduct(); const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem(); - const { selectedAssets,setSelectedAssets } = useSelectedAssets(); + const { selectedAssets, setSelectedAssets } = useSelectedAssets(); const { assetStore, productStore } = useSceneContext(); const { products } = productStore(); const { setName } = assetStore(); @@ -101,7 +101,7 @@ function MainScene() { if (!projectId) return if (selectedFloorItem) { console.log('selectedFloorItem.userData.modelUuid: ', selectedFloorItem.userData.modelUuid); - console.log(' newName: ', newName); + console.log(' newName: ', newName); console.log('projectId: ', projectId); setAssetsApi({ modelUuid: selectedFloorItem.userData.modelUuid, @@ -140,7 +140,7 @@ function MainScene() { {!selectedUser && ( <> - {loadingProgress > 0 && } + {/* {loadingProgress > 0 && } */} {!isPlaying && ( <> {toggleThreeD && !isVersionSaved && } @@ -188,7 +188,7 @@ function MainScene() { } onDragOver={(event) => event.preventDefault()} > - + {/* */} {selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && ( diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 274b531..bb4e137 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -3,6 +3,7 @@ import Header from "./Header"; import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore"; import { AnalysisIcon, + FilePackageIcon, MechanicsIcon, PropertiesIcon, SimulationIcon, @@ -33,7 +34,7 @@ import FloorProperties from "./properties/FloorProperties"; import SelectedWallProperties from "./properties/SelectedWallProperties"; import SelectedFloorProperties from "./properties/SelectedFloorProperties"; import DecalTransformation from "./decals/DecalTransformation"; -import Hrm from "./hrm/Hrm"; +import ResourceManagement from "./resourceManagement/ResourceManagement"; type DisplayComponent = | "versionHistory" @@ -50,6 +51,7 @@ type DisplayComponent = | "analysis" | "visualization" | "decals" + | "resourceManagement" | "none"; const SideBarRight: React.FC = () => { @@ -105,6 +107,19 @@ const SideBarRight: React.FC = () => { setDisplayComponent("analysis"); return; } + if (subModule === "resourceManagement") { + setDisplayComponent("resourceManagement"); + return; + } + } + + + + if (activeModule === "simulation" || activeModule === "builder") { + if (subModule === "resourceManagement") { + setDisplayComponent("resourceManagement"); + return; + } } if (subModule === "properties" && activeModule !== "visualization") { @@ -129,7 +144,7 @@ const SideBarRight: React.FC = () => { return; } if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedSubCategory) { - console.log('selectedSubCategory: ', selectedSubCategory); + if (toolMode === "Aisle") { setDisplayComponent("aisleProperties"); @@ -146,6 +161,7 @@ const SideBarRight: React.FC = () => { setDisplayComponent("globalProperties"); return; } + } if (subModule === "zoneProperties" && (activeModule === "builder" || activeModule === "simulation")) { @@ -157,6 +173,7 @@ const SideBarRight: React.FC = () => { }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedSubCategory]); const renderComponent = () => { + switch (displayComponent) { case "versionHistory": return ; @@ -186,6 +203,8 @@ const SideBarRight: React.FC = () => { return ; case "decals": return ; + case "resourceManagement": + return ; default: return null; } @@ -201,19 +220,23 @@ const SideBarRight: React.FC = () => { <> {(!isVersionSaved || activeModule !== "simulation") && (
+ {activeModule !== "simulation" && ( - + <> + + )} + {activeModule === "simulation" && ( <> )} + + {(activeModule === "builder" || activeModule === "simulation") && ( + + )} +
)} @@ -258,7 +296,7 @@ const SideBarRight: React.FC = () => {
{renderComponent()} - {/* */} + {/* */}
)} diff --git a/app/src/components/layout/sidebarRight/resourceManagement/NavigateCatagory.tsx b/app/src/components/layout/sidebarRight/resourceManagement/NavigateCatagory.tsx new file mode 100644 index 0000000..dca4399 --- /dev/null +++ b/app/src/components/layout/sidebarRight/resourceManagement/NavigateCatagory.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +interface Props { + category: string[]; + selectedCategory: string; + setSelectedCategory: (cat: string) => void; +} + +const NavigateCategory = ({ category, selectedCategory, setSelectedCategory }: Props) => { + return ( +
+ {category.map((cat) => ( +
setSelectedCategory(cat)} + > + {cat} +
+ ))} +
+ ); +}; + +export default NavigateCategory; diff --git a/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx b/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx new file mode 100644 index 0000000..3b0df8a --- /dev/null +++ b/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react' + +import Search from '../../../ui/inputs/Search' +import RegularDropDown from '../../../ui/inputs/RegularDropDown' +import Hrm from './hrm/Hrm' +import AssetManagement from './hrm/assetManagement/AssetManagement' + +const ResourceManagement = () => { + type DisplayType = "hrm" | "asset"; + const [selectType, setSelectType] = useState("assetManagement") + + const [display, setDisplay] = useState("asset"); + + return ( +
+
+
setSelectType("assetManagement")} + > + Asset Management +
+
setSelectType("peopleOperation")} + > + People Operations +
+
+ +
+ { }} /> +
+ { }} + search={false} + /> +
+
+ + {selectType === "assetManagement" ? : } +
+ ) +} + +export default ResourceManagement diff --git a/app/src/components/layout/sidebarRight/hrm/Hrm.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx similarity index 79% rename from app/src/components/layout/sidebarRight/hrm/Hrm.tsx rename to app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx index 2b4b44e..b357143 100644 --- a/app/src/components/layout/sidebarRight/hrm/Hrm.tsx +++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx @@ -1,11 +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 Search from '../../../../ui/inputs/Search' +import RegularDropDown from '../../../../ui/inputs/RegularDropDown' +import { ClockThreeIcon, HourGlassIcon, ListTaskIcon, LocationPinIcon, SlectedTickIcon, TargetIcon } from '../../../../icons/ExportCommonIcons' +import NavigateCatagory from '../NavigateCatagory' const Hrm = () => { - const [selectType, setSelectType] = useState("assetManagement") - const [selectcatogory, setSelectCatogary] = useState("All People") const employee_details = [ { "employee": { @@ -93,50 +92,23 @@ const Hrm = () => { } ] + const [selectedCard, setSelectedCard] = useState(0); + console.log('selectedCard: ', selectedCard); + return ( -
-
-
setSelectType("assetManagement")} - > - Asset Management -
-
setSelectType("peopleOperation")} - > - People Operations -
-
+ <> + {/* */} -
- { }} /> -
- { }} - search={false} - /> -
-
- -
- {["All People", "Technician", "Operator", "Supervisor", "Safety Officer"].map((cat, index) => ( -
setSelectCatogary(cat)} - > - {cat} -
- ))} -
- -
+
{employee_details.map((employee, index) => ( -
+
setSelectedCard(index)} + >
@@ -206,7 +178,7 @@ const Hrm = () => {
- Completed Tasks: + Cost per hr:
{employee.task.completed_tasks} @@ -233,7 +205,7 @@ const 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 new file mode 100644 index 0000000..67dbca5 --- /dev/null +++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx @@ -0,0 +1,159 @@ +import React, { useState } from 'react' +import NavigateCatagory from '../../NavigateCatagory' +import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons'; +import assetImage from "../../../../../../assets/image/asset-image.png" +const AssetManagement = () => { + const [selectedCategory, setSelectedCategory] = useState("All Assets"); + const [expandedAssetId, setExpandedAssetId] = useState(null); + + const dummyAssets = [ + { + id: '1', + name: 'Forklift Model X200', + model: 'FLK-0025', + status: 'Online', + usageRate: 89, + level: 'Level 1', + image: assetImage, + description: 'Electric forklift used for moving goods and materials in warehouse operations.', + cost: 122000, + count: 5, + }, + { + id: '2', + name: 'Warehouse Robot WR-300', + model: 'WRB-3001', + status: 'Online', + usageRate: 76, + level: 'Level 2', + image: assetImage, + description: 'Automated robot for handling packages and inventory in the warehouse.', + cost: 85000, + count: 3, + }, + { + id: '3', + name: 'Conveyor Belt System CB-150', + model: 'CBS-150X', + status: 'Online', + usageRate: 95, + level: 'Level 3', + image: assetImage, + description: 'High-speed conveyor belt system for efficient material handling.', + cost: 45000, + count: 2, + }, + ]; + + + return ( + <> + {/* */} + +
+ {dummyAssets.map((asset, index) => ( +
+
+
+ + {expandedAssetId === asset.id ? + + : +
+ } +
+
+
{asset.name}
+
{asset.model}
+
+
+
+
{asset.status}
+
+
+ +
+ {expandedAssetId === asset.id &&
{asset.description}
} +
+ + {expandedAssetId === asset.id ? ( +
+
+
Cost of Asset
+
₹ 1,22,000
+
+ +
+
+
In Scene
+
5 items
+
+
+
Total Cost
+
₹ 6,10,000
+
+
+ +
setExpandedAssetId(null)}> + +
View in Scene
+
+
+ + + ) : ( +
+
+
+
+
Usage rate
+
+
+
+
+
+
{asset.usageRate}%
+
+
+ +
+
+
+
{asset.level}
+
+ +
+ setExpandedAssetId(expandedAssetId === asset.id ? null : asset.id) + } + > +
{expandedAssetId === asset.id ? "View Less" : "View More"}
+
+
+ +
+ + +
+ + )} + +
+ + ))} +
+ + ) +} + +export default AssetManagement + + diff --git a/app/src/store/useModuleStore.ts b/app/src/store/useModuleStore.ts index 3cc1d00..30a84af 100644 --- a/app/src/store/useModuleStore.ts +++ b/app/src/store/useModuleStore.ts @@ -14,7 +14,7 @@ export default useModuleStore; // New store for subModule -type SubModule = 'properties' | 'simulations' | 'mechanics' | 'analysis' | 'zoneProperties'; +type SubModule = 'properties' | 'simulations' | 'mechanics' | 'analysis' | 'zoneProperties'|"resourceManagement"; interface SubModuleStore { subModule: SubModule; diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss index 1e6545e..13221bc 100644 --- a/app/src/styles/layout/compareLayout.scss +++ b/app/src/styles/layout/compareLayout.scss @@ -305,7 +305,7 @@ background-color: #b7b7c6; // Custom polygon shape (adjust if needed) - clip-path: polygon(96% 52%, + clipPath: polygon(96% 52%, 96% 54%, 45% 53%, 3% 100%, @@ -372,7 +372,7 @@ height: 100%; background: var(--background-color, wheat); - clip-path: polygon(25% 0%, + clipPath: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, diff --git a/app/src/styles/layout/hrm.scss b/app/src/styles/layout/hrm.scss deleted file mode 100644 index b2f6c43..0000000 --- a/app/src/styles/layout/hrm.scss +++ /dev/null @@ -1,251 +0,0 @@ -@use "../abstracts/variables" as *; -@use "../abstracts/mixins" as *; - -.hrm-container { - - - .navigation-wrapper { - @include flex-space-between; - justify-content: space-around; - - .navigation { - - padding: 4px 12px; - border-radius: 20px; - text-wrap: nowrap; - margin: 6px 0; - cursor: pointer; - - &.active { - background: var(--background-color-button); - } - } - - } - - .search-container { - position: relative; - padding: 2px 2px; - - .search-wrapper { - input { - padding-right: 85px; - } - } - - .select-catagory { - position: absolute; - top: 50%; - right: 16px; - transform: translate(0, -50%); - z-index: 10; - - .regularDropdown-container { - padding: 2px 8px; - } - } - } - - .catagories-wrapper { - display: flex; - gap: 12px; - width: 100%; - overflow: auto; - padding: 8px 10px; - - .catagory { - text-wrap: nowrap; - position: relative; - cursor: pointer; - - &.active { - &::after { - content: ""; - position: absolute; - bottom: -6px; - left: 0; - width: 100%; - height: 2px; - border-radius: 100px; - background: var(--background-color-button); - } - - } - } - } - - .analysis-container { - max-height: calc(62vh - 12px); - overflow: auto; - display: flex; - flex-direction: column; - gap: 12px; - margin-top: 7px; - - .analysis-wrapper { - border: 1px solid var(--Color-Hover, #CCACFF); - border-radius: 20px; - padding: 16px; - - display: flex; - flex-direction: column; - gap: 14px; - - header { - position: relative; - @include flex-space-between; - padding: 3px 0; - - .user-details { - display: flex; - gap: 6px; - - .user-image-wrapper { - width: 28px; - height: 28px; - border-radius: 50%; - background-color: #fff; - position: relative; - - .status { - border-radius: 50%; - width: 6px; - height: 6px; - outline: 1px solid #2F2C32; - - position: absolute; - bottom: 0; - right: 0; - - &.Active { - background-color: #44E5C6; - } - } - } - - .details { - .employee-id { - color: #B7B7C6; - font-size: $tiny; - - } - } - } - - .see-more { - color: var(--accent-color); - text-decoration: underline; - cursor: pointer; - } - - &::after { - content: ""; - position: absolute; - bottom: -7px; - left: 0; - width: 100%; - height: 1px; - background-color: #6F6F7A; - } - } - - .content { - display: flex; - flex-direction: column; - gap: 4px; - - .task-info { - padding: 8px 0; - display: flex; - flex-direction: column; - gap: 6px; - - .task-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - - .task-label { - display: flex; - align-items: center; - gap: 3px; - - .label-text { - color: #B7B7C6; - } - } - } - } - - .task-stats { - display: grid; - grid-template-columns: repeat(1, 1fr); // Two equal-width columns - gap: 4px; - - .stat-item { - border-radius: 100px; - @include flex-space-between; - background: linear-gradient(162.53deg, - rgba(51, 51, 51, 0.7) 0%, - rgba(45, 36, 55, 0.7) 106.84%); - border: 1px solid #FFFFFF0D; - padding: 6px; - - .stat-wrapper { - display: flex; - align-items: center; - gap: 4px; - } - - span, - .stat-value { - font-size: 10px; - display: flex; - } - } - } - - .location-wrapper { - display: flex; - align-items: center; - justify-content: space-between; - padding: 6px 0; - - .location-header { - display: flex; - gap: 6px; - - .icon { - display: flex; - } - - .header { - font-size: 12px; - color: #B7B7C6; - } - } - } - - .task-actions { - display: grid; - grid-template-columns: repeat(2, 1fr); // Two equal-width columns - gap: 4px; - margin-top: 3px; - - button { - line-height: 133%; - font-size: 11px; - border: 1px solid var(--Linear-Border, #564B69); - border-radius: 100px; - padding: 4px 0; - - &:last-child { - background-color: #CC2C1E; - } - } - } - - } - } - } -} \ No newline at end of file diff --git a/app/src/styles/layout/resourceManagement.scss b/app/src/styles/layout/resourceManagement.scss new file mode 100644 index 0000000..9bf7b63 --- /dev/null +++ b/app/src/styles/layout/resourceManagement.scss @@ -0,0 +1,489 @@ +@use "../abstracts/variables" as *; +@use "../abstracts/mixins" as *; + + + +.resourceManagement-container { + .navigation-wrapper { + @include flex-space-between; + justify-content: space-around; + + .navigation { + + padding: 4px 12px; + border-radius: 20px; + text-wrap: nowrap; + margin: 6px 0; + cursor: pointer; + + &.active { + background: var(--background-color-button); + } + } + + } + + .search-container { + position: relative; + padding: 4px 2px; + + .search-wrapper { + padding: 0; + + input { + padding-right: 85px; + } + } + + .select-catagory { + position: absolute; + top: 50%; + right: 8px; + transform: translate(0, -50%); + z-index: 10; + + .regularDropdown-container { + padding: 2px 8px; + } + } + } + + .category-wrapper { + display: flex; + gap: 12px; + width: 100%; + overflow: auto; + padding: 8px 10px; + + .category { + text-wrap: nowrap; + position: relative; + cursor: pointer; + color: var(--text-disabled); + + &.active { + color: var(--text-color); + + &::after { + content: ""; + position: absolute; + bottom: -6px; + left: 0; + width: 100%; + height: 2px; + border-radius: 100px; + background: var(--background-color-button); + } + + } + } + } + + .assetManagement-wrapper { + max-height: calc(62vh - 12px); + overflow: auto; + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 7px; + // padding: 7px 2px; + } + + // HRM + .hrm-container { + .analysis-wrapper { + border-radius: 20px; + padding: 16px; + + display: flex; + flex-direction: column; + gap: 14px; + + outline: 1px solid var(--border-color); + outline-offset: -1px; + background: var(--background-color); + + &.active { + outline: 1px solid var(--Color-Hover, #CCACFF); + } + + header { + position: relative; + @include flex-space-between; + padding: 3px 0; + + .user-details { + display: flex; + gap: 6px; + + .user-image-wrapper { + width: 28px; + height: 28px; + border-radius: 50%; + background-color: #fff; + position: relative; + + .status { + border-radius: 50%; + width: 6px; + height: 6px; + outline: 1px solid #2F2C32; + + position: absolute; + bottom: 0; + right: 0; + + &.Active { + background-color: #44E5C6; + } + } + } + + .details { + .employee-id { + color: #B7B7C6; + font-size: $tiny; + + } + } + } + + .see-more { + + padding: 4px 12px; + border-radius: 20px; + text-wrap: nowrap; + margin: 6px 0; + cursor: pointer; + background: var(--background-color-button); + } + + &::after { + content: ""; + position: absolute; + bottom: -7px; + left: 0; + width: 100%; + height: 1px; + background-color: #6F6F7A; + } + } + + .content { + display: flex; + flex-direction: column; + gap: 4px; + + .task-info { + padding: 8px 0; + display: flex; + flex-direction: column; + gap: 6px; + + .task-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + + .task-label { + display: flex; + align-items: center; + gap: 3px; + + .label-text { + color: #B7B7C6; + } + } + } + } + + .task-stats { + display: grid; + grid-template-columns: repeat(1, 1fr); // Two equal-width columns + gap: 4px; + + .stat-item { + border-radius: 100px; + @include flex-space-between; + background: linear-gradient(162.53deg, + rgba(51, 51, 51, 0.7) 0%, + rgba(45, 36, 55, 0.7) 106.84%); + border: 1px solid #FFFFFF0D; + padding: 6px; + + .stat-wrapper { + display: flex; + align-items: center; + gap: 4px; + } + + span, + .stat-value { + font-size: 10px; + display: flex; + } + } + } + + .location-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 0; + + .location-header { + display: flex; + gap: 6px; + + .icon { + display: flex; + } + + .header { + font-size: 12px; + color: #B7B7C6; + } + } + } + + .task-actions { + display: grid; + grid-template-columns: repeat(2, 1fr); // Two equal-width columns + gap: 4px; + margin-top: 3px; + + button { + line-height: 133%; + font-size: 11px; + border: 1px solid var(--Linear-Border, #564B69); + border-radius: 100px; + padding: 4px 0; + + &:last-child { + background-color: #CC2C1E; + } + } + } + + } + } + } + + // ASSET MANAGEMENT + .assetManagement-container { + display: flex; + flex-direction: column; + gap: 6px; + + .assetManagement-wrapper { + padding: 16px; + border: 1px solid #564B69; + border-radius: 20px; + gap: 10px; + + + + header { + border-bottom: 1px solid #595965; + padding-bottom: 8px; + + + .header-wrapper { + display: flex; + gap: 8px; + + .icon { + min-width: 28px; + height: 28px; + border-radius: 7px; + @include flex-center; + background: var(--background-color-button); + } + + .asset-image { + width: 114px; + height: 112px; + border-radius: 15.2px; + object-fit: cover; + } + + .asset-details-container { + width: 100%; + @include flex-space-between; + + .asset-details { + + // .asset-name{ + // overflow: hidden; + // } + .asset-model { + color: var(--text-disabled); + + } + } + } + + .asset-status-wrapper { + padding: 4px 8px; + border: 1px solid var(--text-color-dark, #F3F3FDD9); + border-radius: 100px; + @include flex-space-between; + gap: 4px; + + .indication { + width: 6px; + height: 6px; + border-radius: 100%; + + &.Online { + background-color: #44E5C6; + } + } + + .status { + font-size: $small; + } + } + } + } + + .asset-contents { + display: flex; + flex-direction: column; + gap: 3px; + + .asset-wrapper { + @include flex-space-between; + padding: 6px 0; + gap: 20px; + + .key-wrapper, + .viewMore { + display: flex; + align-items: center; + gap: 6px; + + .icon { + @include flex-center; + } + } + + .viewMore { + padding: 8px; + border-radius: 100px; + background: var(--background-color-button); + cursor: pointer; + } + + .progress-wrapper { + flex: 1; + @include flex-space-between; + gap: 4px; + + .progress-bar { + width: 100%; + height: 5px; + border-radius: 20px; + background-color: #6F6F7A; + position: relative; + + .filled-value { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 10px; + background-color: #CCACFF; + border-radius: 20px; + } + } + } + } + } + + .asset-estimate { + display: flex; + flex-direction: column; + gap: 10px; + + &__label { + color: #B7B7C6; + font-size: 14px; + } + + &__value { + font-weight: 500; + font-size: 16px; + } + + &__unit-cost { + display: flex; + flex-direction: column; + gap: 4px; + } + + &__breakdown { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 2px; + } + + &__view-button { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + background-color: var(--background-color-button); + border-radius: 20px; + padding: 8px 0; + } + + &__view-text { + font-weight: 500; + // color: #4A4AFF; + } + } + + &.openViewMore { + + header { + display: flex; + flex-direction: column; + gap: 6px; + + .header-wrapper { + + gap: 20px; + + .asset-details-container { + flex-direction: column; + align-items: start; + justify-content: center; + + .asset-details { + display: flex; + flex-direction: column; + gap: 4px; + + .asset-name { + font-size: 16px; + } + } + + .asset-status-wrapper { + margin-top: 4px; + } + } + } + } + + + + } + + } + } + +} \ No newline at end of file diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 1c3a1b8..cc59a33 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -37,7 +37,7 @@ @use "layout/skeleton"; @use "layout/compareLayoutPopUp"; @use "layout/compareLayout"; -@use "layout/hrm"; +@use "layout/resourceManagement.scss"; // pages @use "pages/dashboard";