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

feat: Add Resource Management module with HRM and Asset Management features

Browse Source 
- Introduced FilePackageIcon component for resource management.
- Updated MainScene to include resource management functionality.
- Enhanced SideBarRight to support resource management display.
- Created NavigateCategory component for category navigation in resource management.
- Developed ResourceManagement component to switch between HRM and Asset Management views.
- Implemented Hrm component to display employee details and tasks.
- Added AssetManagement component to manage and display asset information.
- Updated useModuleStore to include resourceManagement as a submodule.
- Created resourceManagement.scss for styling the new module.
- Removed hrm.scss as its styles have been integrated into resourceManagement.scss.
- Updated main.scss to import resourceManagement styles instead of hrm.
This commit is contained in:
Nalvazhuthi
2025-08-22 12:44:55 +05:30
parent 31c07e92b4
commit dc873a8c59
15 changed files with 873 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/src/assets/image/asset-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 753 KiB

12
app/src/components/icons/ContextMenuIcons.tsx
View File

@@ -173,7 +173,7 @@ export function FocusIcon() {
export function TransformIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_55_63)">
<g clipPath="url(#clip0_55_63)">
<path d="M3 0.75C2.40326 0.75 1.83097 0.987053 1.40901 1.40901C0.987053 1.83097 0.75 2.40326 0.75 3C0.75 3.59674 0.987053 4.16903 1.40901 4.59099C1.83097 5.01295 2.40326 5.25 3 5.25C3.24134 5.24937 3.481 5.20991 3.7098 5.13314L3.28805 4.71141L4.79632 3.20316L4.94545 3.05402L5.22342 3.33199C5.24047 3.22214 5.24935 3.11117 5.25 3C5.25 2.40326 5.01295 1.83097 4.59099 1.40901C4.16903 0.987053 3.59674 0.75 3 0.75ZM4.94545 3.65062L3.88467 4.71141L5.92336 6.75L5.37333 7.30001L8.07427 7.84017L7.53403 5.13923L6.98405 5.68922L4.94545 3.65062ZM8.28647 6.75L8.61202 8.37797L6.75 8.00555V11.25H11.25V6.75H8.28645H8.28647Z" fill="#FCFDFD" />
</g>
<defs>
@@ -189,7 +189,7 @@ export function TransformIcon() {
export function DublicateIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_190)">
<g clipPath="url(#clip0_1_190)">
<path d="M9 1.5H2C1.72386 1.5 1.5 1.72386 1.5 2V9C1.5 9.27615 1.27614 9.5 1 9.5C0.72386 9.5 0.5 9.27615 0.5 9V2C0.5 1.17158 1.17158 0.5 2 0.5H9C9.27615 0.5 9.5 0.72386 9.5 1C9.5 1.27614 9.27615 1.5 9 1.5Z" fill="white" />
<path d="M6.5 5.5C6.5 5.22385 6.72385 5 7 5C7.27615 5 7.5 5.22385 7.5 5.5V6.5H8.5C8.77615 6.5 9 6.72385 9 7C9 7.27615 8.77615 7.5 8.5 7.5H7.5V8.5C7.5 8.77615 7.27615 9 7 9C6.72385 9 6.5 8.77615 6.5 8.5V7.5H5.5C5.22385 7.5 5 7.27615 5 7C5 6.72385 5.22385 6.5 5.5 6.5H6.5V5.5Z" fill="white" />
<path fillRule="evenodd" clipRule="evenodd" d="M10 2.5C10.8285 2.5 11.5 3.17158 11.5 4V10C11.5 10.8285 10.8285 11.5 10 11.5H4C3.17158 11.5 2.5 10.8285 2.5 10V4C2.5 3.17158 3.17158 2.5 4 2.5H10ZM10 3.5C10.2761 3.5 10.5 3.72386 10.5 4V10C10.5 10.2761 10.2761 10.5 10 10.5H4C3.72386 10.5 3.5 10.2761 3.5 10V4C3.5 3.72386 3.72386 3.5 4 3.5H10Z" fill="white" />
@@ -207,7 +207,7 @@ export function DublicateIcon() {
export function CopyIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_197)">
<g clipPath="url(#clip0_1_197)">
<path d="M4.375 1.5H8.875C9.22018 1.5 9.5 1.77982 9.5 2.125V5.07422C9.25749 5.02497 9.00651 5 8.75 5C6.67893 5 5 6.67893 5 8.75C5 8.91951 5.01426 9.08616 5.03613 9.25H4.375C4.02982 9.25 3.75 8.97018 3.75 8.625V2.125C3.75 1.77982 4.02982 1.5 4.375 1.5Z" stroke="white" />
<path d="M7.02181 10.8891C5.8404 9.93469 5.6564 8.20324 6.61085 7.02182C7.56529 5.84041 9.29675 5.65641 10.4782 6.61086C11.6596 7.5653 11.8436 9.29676 10.8891 10.4782C9.93468 11.6596 8.20322 11.8436 7.02181 10.8891ZM7.53035 9.63652C7.55951 9.73588 7.64818 9.80729 7.7514 9.81511L7.79716 9.81441L7.84067 9.80562C7.94019 9.77642 8.01223 9.68724 8.01987 9.58381L8.01932 9.53942L7.89568 8.38246L9.76272 9.88956L9.80012 9.91475C9.89114 9.96447 10.0045 9.95243 10.083 9.88469L10.1143 9.8522L10.1395 9.8148C10.1892 9.72378 10.1772 9.61043 10.1094 9.53189L10.0769 9.50062L8.20913 7.99291L9.36823 7.86974L9.41174 7.86095C9.52542 7.82759 9.60327 7.71674 9.59039 7.59475C9.57742 7.47272 9.47859 7.38002 9.36039 7.37128L9.3154 7.37259L7.5357 7.5631L7.50592 7.57044L7.46405 7.58808L7.42779 7.61277L7.40435 7.63401L7.37612 7.66895L7.36028 7.69633L7.35134 7.71672L7.33894 7.75692L7.33456 7.781L7.33441 7.81227L7.52217 9.59225L7.53035 9.63652Z" fill="white" />
</g>
@@ -223,7 +223,7 @@ export function CopyIcon() {
export function PasteIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_207)">
<g clipPath="url(#clip0_1_207)">
<path d="M4.375 1.5H8.875C9.22018 1.5 9.5 1.77982 9.5 2.125V5.07422C9.25749 5.02497 9.00651 5 8.75 5C6.67893 5 5 6.67893 5 8.75C5 8.91951 5.01426 9.08616 5.03613 9.25H4.375C4.02982 9.25 3.75 8.97018 3.75 8.625V2.125C3.75 1.77982 4.02982 1.5 4.375 1.5Z" stroke="white" />
<path d="M10.4408 6.58164C11.6383 7.51587 11.8516 9.24395 10.9174 10.4414C9.9832 11.6389 8.25512 11.8523 7.05765 10.918C5.86019 9.98382 5.64679 8.25574 6.58102 7.05828C7.51524 5.86081 9.24332 5.64742 10.4408 6.58164ZM9.95361 7.84272C9.92276 7.74387 9.83289 7.67398 9.72956 7.66791L9.68382 7.66939L9.64046 7.67892C9.54146 7.7098 9.47094 7.8002 9.46506 7.90374L9.46636 7.94811L9.60965 9.10281L7.71726 7.62766L7.67944 7.60311C7.58759 7.55494 7.47446 7.56891 7.39709 7.63798L7.36637 7.67099L7.34182 7.70881C7.29366 7.80066 7.30763 7.91379 7.37669 7.99117L7.4097 8.02188L9.30286 9.49763L8.14603 9.64048L8.10268 9.65001C7.98957 9.6853 7.91362 9.79746 7.92858 9.91921C7.94362 10.041 8.044 10.132 8.16233 10.1387L8.2073 10.1367L9.9835 9.91593L10.0131 9.90809L10.0547 9.88974L10.0906 9.86444L10.1136 9.8428L10.1413 9.80739L10.1566 9.77974L10.1652 9.7592L10.1769 9.71879L10.1809 9.69464L10.1805 9.66338L9.96254 7.88684L9.95361 7.84272Z" fill="white" />
</g>
@@ -248,7 +248,7 @@ export function ModifiersIcon() {
export function DeleteIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_241)">
<g clipPath="url(#clip0_1_241)">
<path d="M4.70588 5.32353V9.02941M7.17647 5.32353V9.02941M9.64706 2.85294V10.2647C9.64706 10.947 9.09402 11.5 8.41177 11.5H3.47059C2.78835 11.5 2.23529 10.947 2.23529 10.2647V2.85294M1 2.85294H10.8824M7.79412 2.85294V2.23529C7.79412 1.55306 7.24108 1 6.55882 1H5.32353C4.6413 1 4.08824 1.55306 4.08824 2.23529V2.85294" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
@@ -263,7 +263,7 @@ export function DeleteIcon() {
export function MoveIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_241)">
<g clipPath="url(#clip0_1_241)">
<path d="M4.70588 5.32353V9.02941M7.17647 5.32353V9.02941M9.64706 2.85294V10.2647C9.64706 10.947 9.09402 11.5 8.41177 11.5H3.47059C2.78835 11.5 2.23529 10.947 2.23529 10.2647V2.85294M1 2.85294H10.8824M7.79412 2.85294V2.23529C7.79412 1.55306 7.24108 1 6.55882 1H5.32353C4.6413 1 4.08824 1.55306 4.08824 2.23529V2.85294" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>

41
app/src/components/icons/ExportCommonIcons.tsx
View File

@@ -1370,7 +1370,7 @@ export const NavigationIcon = () => {
export const HangTagIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5895_2753)">
<g clipPath="url(#clip0_5895_2753)">
<path d="M14.7002 5.2998V9.37598L9.5 14.5762L5.42383 10.5L10.624 5.2998H14.7002ZM12 7.2002C11.5581 7.2002 11.2002 7.55806 11.2002 8C11.2002 8.44194 11.5581 8.7998 12 8.7998C12.4419 8.7998 12.7998 8.44194 12.7998 8C12.7998 7.55806 12.4419 7.2002 12 7.2002Z" stroke="var(--text-color)" stroke-opacity="0.85" stroke-width="0.6" />
</g>
<defs>
@@ -1476,4 +1476,43 @@ export const TargetIcon = () => {
<path d="M9.625 5.5C9.625 7.77815 7.77815 9.625 5.5 9.625M9.625 5.5C9.625 3.22182 7.77815 1.375 5.5 1.375M9.625 5.5H7.975M5.5 9.625C3.22182 9.625 1.375 7.77815 1.375 5.5M5.5 9.625V7.975M5.5 1.375C3.22182 1.375 1.375 3.22182 1.375 5.5M5.5 1.375V3.025M1.375 5.5H3.025" stroke="#FCFDFD" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)
}
export const ForkLiftIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_6014_655)">
<g filter="url(#filter0_f_6014_655)">
<path d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z" fill="white" />
<path d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z" fill="white" />
<path d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z" fill="white" />
<path d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z" fill="white" />
<path d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z" fill="white" />
</g>
<path d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z" fill="white" />
<path d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z" fill="white" />
<path d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z" fill="white" />
<path d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z" fill="white" />
<path d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z" fill="white" />
</g>
<defs>
<filter id="filter0_f_6014_655" x="2.14674" y="4.11427" width="17" height="11.7715" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="0.233881" result="effect1_foregroundBlur_6014_655" />
</filter>
<clipPath id="clip0_6014_655">
<rect width="18.7105" height="18.7105" fill="white" transform="translate(0.644775 0.644531)" />
</clipPath>
</defs>
</svg>
)
}
export const RightHalfFillCircleIcon = () => {
return (
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.50391 17.3962C13.8218 17.3962 17.4003 13.8178 17.4003 9.49985C17.4003 5.18983 13.8139 1.60352 9.49594 1.60352C5.17802 1.60352 1.59961 5.18983 1.59961 9.49985C1.59961 13.8178 5.18596 17.3962 9.50391 17.3962ZM9.50391 16.0523C5.86982 16.0523 2.95143 13.1339 2.95143 9.49985C2.95143 5.87373 5.86189 2.95533 9.49594 2.95533L9.50391 16.0523Z" fill="#CCACFF" />
</svg>
)
}

26
app/src/components/icons/SimulationIcons.tsx
View File

@@ -835,3 +835,29 @@ export const LayoutIcon = () => {
</svg>
);
};
export function FilePackageIcon({ isActive }: Readonly<{ isActive: boolean }>) {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_6049_2260)">
<g filter="url(#filter0_f_6049_2260)">
<path d="M12 3C13.1046 3 14 3.89543 14 5H15C16.6569 5 18 6.34315 18 8V14C18 15.6569 16.6569 17 15 17H5C3.34315 17 2 15.6569 2 14V8C2 6.34315 3.34315 5 5 5H6C6 3.89543 6.89543 3 8 3H12ZM17 9H3V14C3 15.0711 3.84198 15.9455 4.90018 15.9976L5 16H15C16.0711 16 16.9455 15.158 16.9976 14.0998L17 14V9ZM15 6H5C3.9289 6 3.05446 6.84198 3.00245 7.90018L3 8H17C17 6.9289 16.158 6.05446 15.0998 6.00245L15 6ZM12 4H8C7.47282 4 7.04092 4.40794 7.00274 4.92537L7 5H13C13 4.47282 12.5921 4.04092 12.0746 4.00274L12 4Z" fill="#FCFDFD" />
</g>
<path d="M12 3C13.1046 3 14 3.89543 14 5H15C16.6569 5 18 6.34315 18 8V14C18 15.6569 16.6569 17 15 17H5C3.34315 17 2 15.6569 2 14V8C2 6.34315 3.34315 5 5 5H6C6 3.89543 6.89543 3 8 3H12ZM17 9H3V14C3 15.0711 3.84198 15.9455 4.90018 15.9976L5 16H15C16.0711 16 16.9455 15.158 16.9976 14.0998L17 14V9ZM15 6H5C3.9289 6 3.05446 6.84198 3.00245 7.90018L3 8H17C17 6.9289 16.158 6.05446 15.0998 6.00245L15 6ZM12 4H8C7.47282 4 7.04092 4.40794 7.00274 4.92537L7 5H13C13 4.47282 12.5921 4.04092 12.0746 4.00274L12 4Z" fill="#FCFDFD" />
</g>
<defs>
<filter id="filter0_f_6049_2260" x="1.1" y="2.1" width="17.8" height="15.8" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="0.45" result="effect1_foregroundBlur_6049_2260" />
</filter>
<clipPath id="clip0_6049_2260">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
)
}

8
app/src/components/layout/scenes/MainScene.tsx
View File

@@ -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 && (
<>
<KeyPressListener />
{loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
{/* {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />} */}
{!isPlaying && (
<>
{toggleThreeD && !isVersionSaved && <ModuleToggle />}
@@ -188,7 +188,7 @@ function MainScene() {
}
onDragOver={(event) => event.preventDefault()}
>
<Scene layout="Main Layout" />
{/* <Scene layout="Main Layout" /> */}
</div>
{selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && (

66
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -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 <VersionHistory />;
@@ -186,6 +203,8 @@ const SideBarRight: React.FC = () => {
return <Visualization />;
case "decals":
return <DecalTransformation />;
case "resourceManagement":
return <ResourceManagement />;
default:
return null;
}
@@ -201,19 +220,23 @@ const SideBarRight: React.FC = () => {
<>
{(!isVersionSaved || activeModule !== "simulation") && (
<div className="sidebar-actions-container">
{activeModule !== "simulation" && (
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
onClick={() => {
setSubModule("properties");
setVersionHistoryVisible(false);
}}
>
<div className="tooltip">properties</div>
<PropertiesIcon isActive={subModule === "properties"} />
</button>
<>
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
onClick={() => {
setSubModule("properties");
setVersionHistoryVisible(false);
}}
>
<div className="tooltip">properties</div>
<PropertiesIcon isActive={subModule === "properties"} />
</button>
</>
)}
{activeModule === "simulation" && (
<>
<button
@@ -251,6 +274,21 @@ const SideBarRight: React.FC = () => {
</button>
</>
)}
{(activeModule === "builder" || activeModule === "simulation") && (
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "resourceManagement" ? "active" : ""}`}
onClick={() => {
setSubModule("resourceManagement");
setVersionHistoryVisible(false);
}}
>
<div className="tooltip">Resource Management</div>
<FilePackageIcon isActive={subModule === "resourceManagement"} />
</button>
)}
</div>
)}
@@ -258,7 +296,7 @@ const SideBarRight: React.FC = () => {
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
{renderComponent()}
{/* <Hrm /> */}
{/* <ResourceManagement /> */}
</div>
</div>
)}

25
app/src/components/layout/sidebarRight/resourceManagement/NavigateCatagory.tsx Normal file
View File

@@ -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 (
<div className="category-wrapper">
{category.map((cat) => (
<div
key={cat}
className={`category ${selectedCategory === cat ? "active" : ''}`}
onClick={() => setSelectedCategory(cat)}
>
{cat}
</div>
))}
</div>
);
};
export default NavigateCategory;

48
app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx Normal file
View File

@@ -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<DisplayType>("asset");
return (
<div className='resourceManagement-container'>
<div className="navigation-wrapper">
<div
className={`navigation ${selectType === "assetManagement" ? "active" : ""}`}
onClick={() => setSelectType("assetManagement")}
>
Asset Management
</div>
<div
className={`navigation ${selectType === "peopleOperation" ? "active" : ""}`}
onClick={() => setSelectType("peopleOperation")}
>
People Operations
</div>
</div>
<div className="search-container">
<Search onChange={() => { }} />
<div className="select-catagory">
<RegularDropDown
header={"floor"}
options={["floor"]} // Pass layout names as options
onSelect={() => { }}
search={false}
/>
</div>
</div>
{selectType === "assetManagement" ? <AssetManagement /> : <Hrm />}
</div>
)
}
export default ResourceManagement

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

@@ -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 (
<div className='hrm-container'>
<div className="navigation-wrapper">
<div
className={`navigation ${selectType === "assetManagement" ? "active" : ""}`}
onClick={() => setSelectType("assetManagement")}
>
Asset Management
</div>
<div
className={`navigation ${selectType === "peopleOperation" ? "active" : ""}`}
onClick={() => setSelectType("peopleOperation")}
>
People Operations
</div>
</div>
<>
{/* <NavigateCatagory
category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
<div className="search-container">
<Search onChange={() => { }} />
<div className="select-catagory">
<RegularDropDown
header={"floor"}
options={["floor"]} // Pass layout names as options
onSelect={() => { }}
search={false}
/>
</div>
</div>
<div className="catagories-wrapper">
{["All People", "Technician", "Operator", "Supervisor", "Safety Officer"].map((cat, index) => (
<div
key={cat}
className={`catagory ${selectcatogory === cat ? "active" : ''}`}
onClick={() => setSelectCatogary(cat)}
>
{cat}
</div>
))}
</div>
<div className="analysis-container">
<div className='hrm-container assetManagement-wrapper'>
{employee_details.map((employee, index) => (
<div className="analysis-wrapper">
<div
className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
onClick={() => setSelectedCard(index)}
>
<header>
<div className="user-details">
<div className="user-image-wrapper">
@@ -206,7 +178,7 @@ const Hrm = () => {
<div className="stat-wrapper">
<span className="stat-icon"><TargetIcon /></span>
<span>Completed Tasks:</span>
<span>Cost per hr:</span>
</div>
<span className='stat-value'>{employee.task.completed_tasks}</span>
@@ -233,7 +205,7 @@ const Hrm = () => {
</div>
))}
</div>
</div>
</>
)
}

159
app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx Normal file
View File

@@ -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<string | null>(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 (
<>
{/* <NavigateCatagory
category={["All Assets", "Machines", "Workstation", "Vehicles"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
<div className='assetManagement-container'>
{dummyAssets.map((asset, index) => (
<div className={`assetManagement-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`}>
<header>
<div className="header-wrapper">
{expandedAssetId === asset.id ?
<img className='asset-image' src={asset.image} alt="" />
:
<div className="icon"><ForkLiftIcon /></div>
}
<div className="asset-details-container">
<div className="asset-details">
<div className="asset-name">{asset.name}</div>
<div className="asset-model">{asset.model}</div>
</div>
<div className="asset-status-wrapper">
<div className={`indication ${asset.status}`}></div>
<div className="status">{asset.status}</div>
</div>
</div>
</div>
{expandedAssetId === asset.id && <div className="description">{asset.description}</div>}
</header>
{expandedAssetId === asset.id ? (
<div className="asset-estimate">
<div className="asset-estimate__unit-cost">
<div className="asset-estimate__label">Cost of Asset</div>
<div className="asset-estimate__value">₹ 1,22,000</div>
</div>
<div className="asset-estimate__breakdown">
<div className="asset-estimate__in-scene">
<div className="asset-estimate__label">In Scene</div>
<div className="asset-estimate__value">5 items</div>
</div>
<div className="asset-estimate__total-cost">
<div className="asset-estimate__label">Total Cost</div>
<div className="asset-estimate__value">₹ 6,10,000</div>
</div>
</div>
<div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
<EyeIcon isClosed={false} />
<div className="asset-estimate__view-text">View in Scene</div>
</div>
</div>
) : (
<div className="asset-contents">
<div className="asset-wrapper">
<div className="key-wrapper">
<div className="icon"><RightHalfFillCircleIcon /></div>
<div className="key">Usage rate</div>
</div>
<div className="progress-wrapper">
<div className="progress-bar">
<div
className="filled-value"
style={{ width: `${asset.usageRate}%` }}
></div>
</div>
<div className="usage-value">{asset.usageRate}%</div>
</div>
</div>
<div className="asset-wrapper">
<div className="key-wrapper">
<div className="icon"><LocationPinIcon /></div>
<div className="key">{asset.level}</div>
</div>
<div
className="viewMore"
onClick={() =>
setExpandedAssetId(expandedAssetId === asset.id ? null : asset.id)
}
>
<div className="value">{expandedAssetId === asset.id ? "View Less" : "View More"}</div>
<div className="icon"><KebabIcon /></div>
</div>
</div>
</div>
)}
</div>
))}
</div >
</>
)
}
export default AssetManagement

2
app/src/store/useModuleStore.ts
View File

@@ -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;

4
app/src/styles/layout/compareLayout.scss
View File

@@ -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%,

251
app/src/styles/layout/hrm.scss
View File

@@ -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;
}
}
}
}
}
}
}

489
app/src/styles/layout/resourceManagement.scss Normal file
View File

@@ -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;
}
}
}
}
}
}
}
}

2
app/src/styles/main.scss
View File

@@ -37,7 +37,7 @@
@use "layout/skeleton";
@use "layout/compareLayoutPopUp";
@use "layout/compareLayout";
@use "layout/hrm";
@use "layout/resourceManagement.scss";
// pages
@use "pages/dashboard";