@codezee/sixtify-brahma 0.2.2 → 0.2.6

package/packages/shared-components/src/Svgs/Drawer/SvgBankConfig.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+export const SvgBankConfig = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+    style={{ color: "inherit" }}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.2215 6.56614L16.2214 6.56609L11.2214 3.1926L11.2214 3.19257C10.4794 2.69157 9.52056 2.69157 8.77861 3.19257L8.77856 3.1926L3.77856 6.56609L3.77849 6.56614C3.17595 6.97214 2.81667 7.64869 2.81667 8.37545V15.0005C2.81667 16.2041 3.79615 17.1834 5 17.1834H9.66667C9.93349 17.1834 10.15 17.3999 10.15 17.6667C10.15 17.9336 9.93349 18.15 9.66667 18.15H5C3.26318 18.15 1.85 16.7371 1.85 15.0005V8.37545C1.85 7.32647 2.36873 6.35065 3.2381 5.76482L16.2215 6.56614ZM16.2215 6.56614C16.8241 6.97215 17.1833 7.64805 17.1833 8.37545V9.00136C17.1833 9.2682 17.3998 9.48464 17.6667 9.48464C17.9335 9.48464 18.15 9.2682 18.15 9.00136V8.37545C18.15 7.32705 17.6305 6.35056 16.7612 5.76477L11.7612 2.39134C10.6912 1.66922 9.3068 1.6699 8.2381 2.39133C8.23809 2.39133 8.23808 2.39134 8.23807 2.39135L3.23818 5.76477L16.2215 6.56614Z"
+      fill={props.fill ?? "currentColor"}
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="0.3"
+    />
+    <path
+      d="M14.0964 15.1683C14.7275 15.1683 15.2391 14.6567 15.2391 14.0256C15.2391 13.3944 14.7275 12.8828 14.0964 12.8828C13.4652 12.8828 12.9536 13.3944 12.9536 14.0256C12.9536 14.6567 13.4652 15.1683 14.0964 15.1683Z"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.2"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M10.3399 12.267L10.7032 11.6378C10.9178 11.2661 11.3992 11.1341 11.7746 11.3508C12.4216 11.7243 12.9504 11.4195 12.9491 10.6704C12.949 10.2413 13.3013 9.88707 13.7339 9.88899L14.5567 9.89214C14.9361 9.88718 15.243 10.1978 15.2479 10.5772L15.248 10.6679C15.2457 11.4149 15.7748 11.7203 16.4242 11.3469L16.5027 11.3017C16.8338 11.1163 17.2562 11.2267 17.4416 11.5578L17.8558 12.2688C18.0738 12.6425 17.9431 13.1247 17.5714 13.3391C16.9221 13.7126 16.9224 14.3229 17.5695 14.6965C17.9413 14.9111 18.0733 15.3925 17.8566 15.7679L17.4933 16.397C17.2787 16.7688 16.7973 16.9008 16.4219 16.6841C15.7749 16.3105 15.2461 16.6154 15.2474 17.3645C15.2455 17.7971 14.8952 18.1478 14.4626 18.1459L13.6398 18.1427C13.2604 18.1477 12.9535 17.8371 12.9486 17.4577L12.9485 17.367C12.9508 16.62 12.4217 16.3145 11.7723 16.688L11.6938 16.7332C11.3627 16.9186 10.9403 16.8082 10.7549 16.4771L10.3407 15.7661C10.1228 15.3924 10.2534 14.9102 10.6251 14.6958C11.2744 14.3223 11.2741 13.712 10.627 13.3384C10.2516 13.1217 10.1253 12.6388 10.3399 12.267Z"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.2"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/Drawer/SvgConfiguration.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const SvgConfiguration = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      d="M17.8051 14.4925V12.8196C17.8051 12.496 17.5427 12.2336 17.2191 12.2336H10.5859V11.2089H13.4015C14.1978 11.2089 14.8456 10.5611 14.8456 9.76469V3.54105C14.8456 3.38566 14.7839 3.23668 14.674 3.12684L11.7201 0.171719C11.6102 0.0617578 11.4611 0 11.3057 0H6.50227C5.70602 0 5.0582 0.647852 5.0582 1.44422V9.76469C5.0582 10.5611 5.70602 11.2089 6.50227 11.2089H9.41406V12.2336H2.78086C2.45727 12.2336 2.19492 12.496 2.19492 12.8196V14.4925C0.941953 14.7626 0 15.8807 0 17.2151C0 18.7507 1.2475 20 2.78086 20C4.31422 20 5.56168 18.7507 5.56168 17.2151C5.56168 15.8807 4.61973 14.7626 3.3668 14.4925V13.4055H9.41406V14.4925C8.16109 14.7626 7.21914 15.8808 7.21914 17.2151C7.21914 18.7507 8.4666 20 10 20C11.5334 20 12.7809 18.7507 12.7809 17.2151C12.7809 15.8807 11.8389 14.7626 10.5859 14.4925V13.4055H16.6332V14.4925C15.3802 14.7626 14.4383 15.8808 14.4383 17.2151C14.4383 18.7507 15.6858 20 17.2191 20C18.7525 20 20 18.7507 20 17.2151C20 15.8807 19.058 14.7626 17.8051 14.4925ZM11.8916 2.00094L12.8455 2.95516H11.8916V2.00094ZM6.23008 9.76469V1.44422C6.23008 1.29406 6.35219 1.17188 6.50227 1.17188H10.7198V3.54105C10.7198 3.86465 10.9821 4.12699 11.3057 4.12699H13.6737V9.76465C13.6737 9.9148 13.5516 10.037 13.4015 10.037H6.50227C6.35219 10.037 6.23008 9.9148 6.23008 9.76469ZM4.38984 17.2151C4.38984 18.1045 3.66805 18.8281 2.78086 18.8281C1.89367 18.8281 1.17188 18.1045 1.17188 17.2151C1.17188 16.3257 1.89367 15.6021 2.78086 15.6021C3.66805 15.6021 4.38984 16.3257 4.38984 17.2151ZM11.609 17.2151C11.609 18.1045 10.8872 18.8281 10 18.8281C9.11277 18.8281 8.39102 18.1045 8.39102 17.2151C8.39102 16.3257 9.11281 15.6021 10 15.6021C10.8872 15.6021 11.609 16.3257 11.609 17.2151ZM17.2191 18.8281C16.332 18.8281 15.6102 18.1045 15.6102 17.2151C15.6102 16.3257 16.332 15.6021 17.2191 15.6021C18.1064 15.6021 18.8281 16.3257 18.8281 17.2151C18.8281 18.1045 18.1063 18.8281 17.2191 18.8281Z"
+      fill={props.fill ?? "currentColor"}
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/Drawer/SvgPayroll.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+
+export const SvgPayroll = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      d="M17.418 2H2.58203C1.7097 2 1 2.7242 1 3.61435V14.0897C1 14.9798 1.7097 15.704 2.58203 15.704H8.19958L7.90075 16.9238H7.1875C6.89627 16.9238 6.66016 17.1647 6.66016 17.4619C6.66016 17.7591 6.89627 18 7.1875 18H12.8125C13.1037 18 13.3398 17.7591 13.3398 17.4619C13.3398 17.1647 13.1037 16.9238 12.8125 16.9238H12.0993L11.8004 15.704H17.418C18.2903 15.704 19 14.9798 19 14.0897V3.61435C19 2.7242 18.2903 2 17.418 2ZM2.58203 3.07623H17.418C17.7087 3.07623 17.9453 3.31763 17.9453 3.61435V12.3318H2.05469V3.61435C2.05469 3.31763 2.29125 3.07623 2.58203 3.07623ZM11.0121 16.9238H8.98792L9.28675 15.704H10.7133L11.0121 16.9238ZM17.418 14.6278C12.311 14.6278 8.00446 14.6278 2.58203 14.6278C2.29125 14.6278 2.05469 14.3864 2.05469 14.0897V13.4081H17.9453V14.0897C17.9453 14.3864 17.7087 14.6278 17.418 14.6278Z"
+      fill={props.fill ?? "currentColor"}
+    />
+    <path
+      d="M5.9375 10.8984C7.81141 10.8984 9.33594 9.37391 9.33594 7.5C9.33594 5.62609 7.81141 4.10156 5.9375 4.10156C4.06359 4.10156 2.53906 5.62609 2.53906 7.5C2.53906 9.37477 4.06066 10.8984 5.9375 10.8984ZM8.16406 7.5C8.16406 9.21152 6.30613 10.2768 4.83367 9.43246L6.3518 7.91434C6.46168 7.80445 6.52344 7.65543 6.52344 7.5V5.35227C7.46773 5.61016 8.16406 6.47508 8.16406 7.5ZM5.35156 5.35227V7.25734L4.00504 8.60387C3.28062 7.34063 3.95363 5.73406 5.35156 5.35227Z"
+      fill={props.fill ?? "currentColor"}
+    />
+    <path
+      d="M11.25 8.08594H16.875C17.1986 8.08594 17.4609 7.82359 17.4609 7.5C17.4609 7.17641 17.1986 6.91406 16.875 6.91406H16.8359V4.375C16.8359 4.05141 16.5736 3.78906 16.25 3.78906C15.9264 3.78906 15.6641 4.05141 15.6641 4.375V6.91406H14.6484V5C14.6484 4.67641 14.3861 4.41406 14.0625 4.41406C13.7389 4.41406 13.4766 4.67641 13.4766 5V6.91406H12.4609V5.625C12.4609 5.30141 12.1986 5.03906 11.875 5.03906C11.5514 5.03906 11.2891 5.30141 11.2891 5.625V6.91406H11.25C10.9264 6.91406 10.6641 7.17641 10.6641 7.5C10.6641 7.82359 10.9264 8.08594 11.25 8.08594Z"
+      fill={props.fill ?? "currentColor"}
+    />
+    <path
+      d="M11.25 10.5859H13.75C14.0736 10.5859 14.3359 10.3236 14.3359 10C14.3359 9.67641 14.0736 9.41406 13.75 9.41406H11.25C10.9264 9.41406 10.6641 9.67641 10.6641 10C10.6641 10.3236 10.9264 10.5859 11.25 10.5859Z"
+      fill={props.fill ?? "currentColor"}
+    />
+    <path
+      d="M16.875 9.41406H16.25C15.9264 9.41406 15.6641 9.67641 15.6641 10C15.6641 10.3236 15.9264 10.5859 16.25 10.5859H16.875C17.1986 10.5859 17.4609 10.3236 17.4609 10C17.4609 9.67641 17.1986 9.41406 16.875 9.41406Z"
+      fill={props.fill ?? "currentColor"}
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/Drawer/SvgsTransaction.tsx

@@ -3,77 +3,79 @@ import type { SVGProps } from "react";
 export const SvgsTransaction = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={20}
-    height={20}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
-    {...props}
-    style={{ color: "inherit" }}
   >
-    <g stroke={props.fill ?? "currentColor"} clipPath="url(#a)">
-      <path
-        strokeWidth={1.5}
-        d="M18 15.5C18 17.432 16.432 19 14.5 19C12.568 19 11 17.432 11 15.5C11 13.568 12.568 12 14.5 12C16.432 12 18 13.568 18 15.5Z"
-      />
-      <path
-        d="M14.6016 14.6992V16.4992"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      />
-      <path
-        d="M6.39844 1V3.7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        strokeMiterlimit="10"
-      />
-      <path
-        d="M12.6953 1V3.7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        strokeMiterlimit="10"
-      />
-      <path
-        d="M1.89844 7.30078H16.2984"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        strokeMiterlimit="10"
-      />
-      <path
-        d="M17.1984 6.27877V13.1616C16.5779 12.4348 15.6684 11.9707 14.6484 11.9707C12.7699 11.9707 11.2484 13.5381 11.2484 15.4734C11.2484 16.1301 11.4269 16.7518 11.7414 17.2773C11.9199 17.5925 12.1494 17.8727 12.4129 18.1004H6.14844C3.17344 18.1004 1.89844 16.349 1.89844 13.722V6.27877C1.89844 3.65174 3.17344 1.90039 6.14844 1.90039H12.9484C15.9234 1.90039 17.1984 3.65174 17.1984 6.27877Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        strokeMiterlimit="10"
-      />
-      <path
-        d="M9.54751 11.3504H9.55561"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        strokeMiterlimit="10"
-      />
-      <path
-        d="M6.84439 11.3504H6.85249"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        strokeMiterlimit="10"
-      />
-      <path
-        d="M6.84439 14.0496H6.85249"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        strokeMiterlimit="10"
-      />
-    </g>
-    <defs>
-      <clipPath id="a">
-        <path fill={props.fill ?? "currentColor"} d="M0 0h20v20H0z" />
-      </clipPath>
-    </defs>
+    <path
+      d="M6.66675 1.66406V4.16406"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.3333 1.66406V4.16406"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2.91675 7.57812H17.0834"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15.0001 19.1667C16.841 19.1667 18.3334 17.6743 18.3334 15.8333C18.3334 13.9924 16.841 12.5 15.0001 12.5C13.1591 12.5 11.6667 13.9924 11.6667 15.8333C11.6667 17.6743 13.1591 19.1667 15.0001 19.1667Z"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15 14.6562V17.1479"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M17.5 7.08073V13.6307C16.8917 12.9391 16 12.4974 15 12.4974C13.1583 12.4974 11.6667 13.9891 11.6667 15.8307C11.6667 16.4557 11.8417 17.0474 12.15 17.5474C12.325 17.8474 12.55 18.1141 12.8083 18.3307H6.66667C3.75 18.3307 2.5 16.6641 2.5 14.1641V7.08073C2.5 4.58073 3.75 2.91406 6.66667 2.91406H13.3333C16.25 2.91406 17.5 4.58073 17.5 7.08073Z"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.99632 11.4167H10.0038"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.91185 11.4167H6.91933"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.91185 13.9167H6.91933"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );

package/packages/shared-components/src/Svgs/Drawer/index.ts

@@ -1,4 +1,7 @@
 export * from "./SettingIcon";
+export * from "./SvgBankConfig";
+export * from "./SvgConfiguration";
+export * from "./SvgPayroll";
 export * from "./SvgsEmployees";
 export * from "./SvgsOrganization";
 export * from "./SvgsTransaction";

package/packages/shared-components/src/Svgs/ImportExcelSuccessIcon.tsx

@@ -0,0 +1,54 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const ImportExcelSuccessIcon = (props: SvgIconProps) => (
+  <svg
+    width="124"
+    height="145"
+    viewBox="0 0 124 145"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_492_7317)">
+      <path
+        d="M59.0476 25.1641C26.5714 25.1641 0 52.1272 0 85.0821C0 118.037 26.5714 145 59.0476 145C91.5238 145 118.095 118.037 118.095 85.0821C118.095 52.1272 91.5238 25.1641 59.0476 25.1641ZM59.0476 136.012C31.2952 136.012 8.85714 113.244 8.85714 85.0821C8.85714 56.9206 31.2952 34.1518 59.0476 34.1518C86.8 34.1518 109.238 56.9206 109.238 85.0821C109.238 113.244 86.8 136.012 59.0476 136.012ZM89.7523 68.3051C89.7523 69.5034 89.1619 70.7018 88.5714 71.301L55.5047 104.855C54.9143 105.454 53.7333 106.053 52.5524 106.053C51.3714 106.053 50.1905 105.454 49.6 104.855L30.7048 85.6813C28.9333 85.0821 28.3428 83.8838 28.3428 82.6854C28.3428 80.2887 30.1143 77.892 33.0667 77.892C34.2476 78.4911 35.4286 79.0903 36.019 79.6895L51.9619 95.8674L82.0762 65.3092C82.6666 64.71 83.8476 64.1108 85.0285 64.1108C87.3904 63.5116 89.7523 65.9083 89.7523 68.3051Z"
+        fill="#3BA4E8"
+      />
+    </g>
+    <path
+      d="M42.0138 8.38853C42.0138 12.7522 38.5297 16.2771 34.2471 16.2771C29.9646 16.2771 26.4805 12.7522 26.4805 8.38853C26.4805 4.02489 29.9646 0.5 34.2471 0.5C38.5297 0.5 42.0138 4.02489 42.0138 8.38853Z"
+      fill="white"
+      stroke="#3BA4E8"
+    />
+    <path
+      d="M123.501 133.015C123.501 136.055 121.074 138.507 118.096 138.507C115.118 138.507 112.691 136.055 112.691 133.015C112.691 129.975 115.118 127.523 118.096 127.523C121.074 127.523 123.501 129.975 123.501 133.015Z"
+      fill="white"
+      stroke="#3BA4E8"
+    />
+    <rect
+      x="115.734"
+      y="13.1836"
+      width="2.3619"
+      height="11.9836"
+      fill="#3BA4E8"
+    />
+    <rect
+      x="122.816"
+      y="17.9766"
+      width="2.39756"
+      height="11.8095"
+      transform="rotate(90 122.816 17.9766)"
+      fill="#3BA4E8"
+    />
+    <defs>
+      <clipPath id="clip0_492_7317">
+        <rect
+          width="118.095"
+          height="119.836"
+          fill="white"
+          transform="translate(0 25.1641)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/packages/shared-components/src/Svgs/SvgConfigure.tsx

@@ -0,0 +1,51 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgConfigure = (props: SvgIconProps) => {
+  return (
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 400 350"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M147.33 110.248C124.029 110.248 105.139 129.108 105.139 152.373C105.139 175.637 124.029 194.497 147.33 194.497C170.63 194.497 189.52 175.637 189.52 152.373C189.52 129.108 170.63 110.248 147.33 110.248ZM265.75 122.313L254.327 131.702C241.296 142.412 241.296 162.333 254.327 173.043L265.75 182.433C269.798 185.76 270.843 191.522 268.221 196.056L245.666 235.063C243.043 239.596 237.523 241.573 232.613 239.737L218.757 234.554C202.953 228.643 185.673 238.603 182.898 255.225L180.466 269.797C179.604 274.961 175.129 278.746 169.886 278.746H124.773C119.53 278.746 115.055 274.961 114.193 269.797L111.76 255.225C108.986 238.603 91.7064 228.643 75.9016 234.554L62.0464 239.737C57.1359 241.573 51.6155 239.596 48.9935 235.063L26.4376 196.056C23.816 191.522 24.8613 185.76 28.9095 182.433L40.333 173.043C53.3629 162.333 53.3629 142.412 40.333 131.702L28.9095 122.313C24.8613 118.985 23.816 113.224 26.4376 108.69L48.9935 69.6828C51.6155 65.1489 57.1359 63.1719 62.0464 65.0086L75.9016 70.1909C91.7064 76.1026 108.986 66.1422 111.76 49.5204L114.193 34.9484C115.055 29.7848 119.53 26 124.773 26H169.886C175.129 26 179.604 29.7848 180.466 34.9484L182.898 49.5204C185.673 66.1422 202.953 76.1026 218.757 70.1909L232.613 65.0086C237.523 63.1719 243.043 65.1489 245.666 69.6828L268.221 108.69C270.843 113.224 269.798 118.985 265.75 122.313Z"
+        fill="white"
+        stroke="black"
+        strokeWidth="14"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <rect
+        x="164.209"
+        y="180.029"
+        width="186.127"
+        height="183.396"
+        rx="50"
+        fill="white"
+      />
+      <path
+        d="M312.062 248.395H261.093C257.113 248.395 253.812 245.095 253.812 241.114C253.812 237.134 257.113 233.833 261.093 233.833H312.062C316.042 233.833 319.343 237.134 319.343 241.114C319.343 245.095 316.14 248.395 312.062 248.395Z"
+        fill="black"
+      />
+      <path
+        d="M210.119 255.774C208.275 255.774 206.43 255.094 204.974 253.638L197.693 246.356C194.877 243.541 194.877 238.881 197.693 236.065C200.508 233.25 205.168 233.25 207.983 236.065L210.119 238.201L226.818 221.503C229.633 218.687 234.293 218.687 237.108 221.503C239.924 224.318 239.924 228.978 237.108 231.794L215.265 253.638C213.906 254.997 212.061 255.774 210.119 255.774Z"
+        fill="black"
+      />
+      <path
+        d="M312.062 316.354H261.093C257.113 316.354 253.812 313.053 253.812 309.072C253.812 305.092 257.113 301.791 261.093 301.791H312.062C316.042 301.791 319.343 305.092 319.343 309.072C319.343 313.053 316.14 316.354 312.062 316.354Z"
+        fill="black"
+      />
+      <path
+        d="M210.119 323.732C208.275 323.732 206.43 323.052 204.974 321.596L197.693 314.315C194.877 311.499 194.877 306.839 197.693 304.024C200.508 301.209 205.168 301.209 207.983 304.024L210.119 306.16L226.818 289.461C229.633 286.646 234.293 286.646 237.108 289.461C239.924 292.277 239.924 296.937 237.108 299.752L215.265 321.596C213.906 322.955 212.061 323.732 210.119 323.732Z"
+        fill="black"
+      />
+      <path
+        d="M286.625 375.865H228.375C175.659 375.865 153.135 353.341 153.135 300.625V242.375C153.135 189.659 175.659 167.135 228.375 167.135H286.625C339.341 167.135 361.864 189.659 361.864 242.375V300.625C361.864 353.341 339.341 375.865 286.625 375.865ZM228.375 181.698C183.619 181.698 167.698 197.62 167.698 242.375V300.625C167.698 345.38 183.619 361.302 228.375 361.302H286.625C331.38 361.302 347.302 345.38 347.302 300.625V242.375C347.302 197.62 331.38 181.698 286.625 181.698H228.375Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

package/packages/shared-components/src/Svgs/SvgEmail.tsx

@@ -0,0 +1,24 @@
+export const SvgEmail = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.33073 3.33594H16.6641C17.5807 3.33594 18.3307 4.08594 18.3307 5.0026V15.0026C18.3307 15.9193 17.5807 16.6693 16.6641 16.6693H3.33073C2.41406 16.6693 1.66406 15.9193 1.66406 15.0026V5.0026C1.66406 4.08594 2.41406 3.33594 3.33073 3.33594Z"
+      stroke="#4C5D70"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M18.3307 5L9.9974 10.8333L1.66406 5"
+      stroke="#4C5D70"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/SvgPhone.tsx

@@ -0,0 +1,16 @@
+export const SvgPhone = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.75697 1.70342C4.4802 1.77517 4.19659 1.93235 3.90615 2.18179C3.58496 2.45856 2.43346 3.63056 2.24553 3.87316C1.48356 4.84698 1.46989 6.36068 2.20794 8.31516C3.10659 10.7036 4.79114 13.1228 6.9233 15.0875C9.86185 17.7971 13.7981 19.55 15.8244 19.058C16.1251 18.9862 16.6239 18.7539 16.8529 18.5796C17.0852 18.4053 18.6297 16.8199 18.7732 16.6114C19.0397 16.2253 19.1422 15.7094 19.0397 15.272C18.9235 14.7834 18.8859 14.739 17.3996 13.2492C15.8995 11.7492 15.8517 11.7116 15.3563 11.6091C14.9633 11.5271 14.5635 11.5988 14.1774 11.8209C14.0886 11.8756 13.6649 12.2617 13.2378 12.6854L12.4621 13.4508L12.2127 13.321C11.6011 13.0032 11.15 12.6991 10.4769 12.1455C9.78668 11.5783 8.8231 10.584 8.29007 9.88694C7.90395 9.38124 7.33674 8.44842 7.33333 8.32199C7.33333 8.29808 7.59985 8.01789 7.92445 7.70011C8.60784 7.03381 8.87778 6.72287 9.03154 6.42902C9.22288 6.05658 9.26047 5.58504 9.12721 5.19551C8.99395 4.79915 8.86411 4.6488 7.55884 3.34012C6.26725 2.04853 6.06907 1.87768 5.70004 1.75126C5.44377 1.659 5.02007 1.6385 4.75697 1.70342ZM5.54969 2.66357C5.64537 2.71824 6.19208 3.2342 6.92671 3.97225C8.2559 5.30485 8.30715 5.36636 8.30373 5.7183C8.30373 6.02924 8.22173 6.13858 7.32991 7.0304C6.87888 7.47801 6.48593 7.89146 6.4586 7.94955C6.41759 8.02131 6.40734 8.1204 6.41759 8.28782C6.42784 8.49284 6.45518 8.57143 6.66361 8.98488C7.13515 9.92111 7.75703 10.7446 8.78552 11.797C9.80718 12.8426 10.8254 13.6216 11.8744 14.1615C12.2469 14.3529 12.3186 14.3802 12.4895 14.3768C12.6056 14.3768 12.7286 14.3529 12.8004 14.3153C12.8653 14.2811 13.289 13.8847 13.7401 13.4371C14.3209 12.8597 14.6045 12.6034 14.7139 12.5556C14.9189 12.4633 15.1854 12.4633 15.3733 12.5556C15.5784 12.6581 17.9941 15.0704 18.1 15.2823C18.1581 15.395 18.1821 15.4975 18.1821 15.6445C18.1821 15.9964 18.1103 16.0921 17.1399 17.0659C16.1797 18.0295 16.0909 18.0944 15.5784 18.2106C15.0829 18.3199 14.2526 18.2311 13.412 17.9816C12.1307 17.6024 10.4086 16.6935 8.99053 15.6479C6.26041 13.6387 3.91641 10.5669 2.94258 7.72745C2.47788 6.37777 2.42663 5.41078 2.78199 4.69322C2.89133 4.46429 2.99384 4.34811 3.70456 3.62714C4.14192 3.18294 4.5622 2.77975 4.63396 2.72849C4.94148 2.51665 5.25584 2.49273 5.54969 2.66357Z"
+      fill="#4C5D70"
+      stroke="#4C5D70"
+      strokeWidth="0.4"
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/SvgsHome.tsx

@@ -2,15 +2,17 @@ import type { SVGProps } from "react";
 export const SvgsHome = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={20}
-    height={20}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
-    {...props}
-    style={{ color: "inherit" }}
   >
     <path
-      fill={props.fill ?? "currentColor"}
-      d="m17.901 6.46-5.925-4.67A3.16 3.16 0 0 0 10 1.11a3.16 3.16 0 0 0-1.975.679L2.099 6.46a2.697 2.697 0 0 0-.734.907c-.17.346-.257.72-.254 1.099v7.76c0 .706.313 1.384.868 1.883.556.5 1.31.78 2.095.78h11.852c.786 0 1.54-.28 2.095-.78.556-.5.868-1.177.868-1.883V8.457a2.436 2.436 0 0 0-.255-1.094 2.696 2.696 0 0 0-.733-.903Zm-5.925 10.653H8.024v-4.439c0-.235.104-.461.29-.627.184-.167.436-.26.698-.26h1.975c.262 0 .513.093.698.26.185.166.29.392.29.627v4.44Zm4.938-.887a.845.845 0 0 1-.29.627c-.185.167-.436.26-.698.26h-1.975v-4.439c0-.706-.312-1.383-.868-1.883a3.14 3.14 0 0 0-2.095-.78H9.013c-.786 0-1.54.28-2.096.78-.555.5-.867 1.177-.867 1.883v4.44H4.074c-.262 0-.513-.094-.698-.26a.845.845 0 0 1-.29-.628V8.457c0-.126.03-.25.089-.365a.901.901 0 0 1 .248-.3L9.348 3.13c.18-.142.412-.22.652-.22.24 0 .472.078.652.22l5.926 4.661c.105.083.19.186.248.3.058.116.088.24.088.366v7.769Z"
+      d="M7.5 17.5016V11.3349C7.5 10.8682 7.5 10.6348 7.59083 10.4566C7.67072 10.2998 7.79821 10.1723 7.95501 10.0924C8.13327 10.0016 8.36662 10.0016 8.83333 10.0016H11.1667C11.6334 10.0016 11.8667 10.0016 12.045 10.0924C12.2018 10.1723 12.3293 10.2998 12.4092 10.4566C12.5 10.6348 12.5 10.8682 12.5 11.3349V17.5016M9.18141 2.30492L3.52949 6.70086C3.15168 6.99471 2.96278 7.14163 2.82669 7.32563C2.70614 7.48862 2.61633 7.67224 2.56169 7.86746C2.5 8.08785 2.5 8.32717 2.5 8.8058V14.8349C2.5 15.7683 2.5 16.235 2.68166 16.5916C2.84144 16.9052 3.09641 17.1601 3.41002 17.3199C3.76654 17.5016 4.23325 17.5016 5.16667 17.5016H14.8333C15.7668 17.5016 16.2335 17.5016 16.59 17.3199C16.9036 17.1601 17.1586 16.9052 17.3183 16.5916C17.5 16.235 17.5 15.7683 17.5 14.8349V8.8058C17.5 8.32717 17.5 8.08785 17.4383 7.86746C17.3837 7.67224 17.2939 7.48862 17.1733 7.32563C17.0372 7.14163 16.8483 6.99471 16.4705 6.70086L10.8186 2.30492C10.5258 2.07721 10.3794 1.96335 10.2178 1.91959C10.0752 1.88097 9.92484 1.88097 9.78221 1.91959C9.62057 1.96335 9.47418 2.07721 9.18141 2.30492Z"
+      stroke={props.fill ?? "currentColor"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );

package/packages/shared-components/src/Svgs/SvgsIndicator.tsx

@@ -1,10 +1,14 @@
 import { getColorByVariant, type WorkDayType } from "../utils/colorVariant";
 
 type SvgsIndicatorIconProps = {
-  variant: WorkDayType;
+  variant?: WorkDayType;
+  colourCode?: string;
 };
-export const SvgsIndicator = ({ variant }: SvgsIndicatorIconProps) => {
-  const color = getColorByVariant(variant);
+export const SvgsIndicator = ({
+  variant,
+  colourCode,
+}: SvgsIndicatorIconProps) => {
+  const color = variant ? getColorByVariant(variant) : colourCode;
 
   return (
     <svg

package/packages/shared-components/src/Svgs/index.ts

@@ -1,12 +1,14 @@
 export * from "./Company";
 export * from "./Drawer";
 export * from "./FormAction";
+export * from "./ImportExcelSuccessIcon";
 export * from "./LogoIcon";
+export * from "./SvgAdd";
 export * from "./SvgCalendar";
+export * from "./SvgConfigure";
 export * from "./SvgDelete";
 export * from "./SvgDownload";
 export * from "./SvgNoLogo";
 export * from "./SvgNoSign";
 export * from "./SvgsDrop";
 export * from "./SvgsHome";
-export * from "./SvgAdd";

package/packages/shared-components/src/Timeline/TimelineTrackSegments.tsx

@@ -1,7 +1,8 @@
 import { Box, Stack, Tooltip } from "@mui/material";
+import { DateTime } from "luxon";
 import { getColorByVariant } from "../utils/colorVariant";
-import { getArrowValue, type HighlightedInterval } from "./Timeline";
 import { getTimeInHHmm } from "../utils/date";
+import { getArrowValue, type HighlightedInterval } from "./Timeline";
 
 type TimelineTrackSegmentsProps = {
   totalDots: number;
@@ -21,6 +22,14 @@ export const TimelineTrackSegments = ({
 
         const outTime = getTimeInHHmm(interval.out_time);
 
+        const intervalInTime = DateTime.fromISO(interval.in_time);
+
+        const intervalOutTime = DateTime.fromISO(interval.out_time);
+
+        const shiftHours = intervalOutTime
+          .diff(intervalInTime, ["hours", "minutes"])
+          .toFormat("hh:mm");
+
         let in_time = getArrowValue(inTime);
 
         in_time = in_time < startTimeline ? in_time + totalDots : in_time;
@@ -53,7 +62,7 @@ export const TimelineTrackSegments = ({
 
         const labelText = `In/Out: ${getTimeInHHmm(interval.in_time)} - ${getTimeInHHmm(
           interval.out_time
-        )}`;
+        )} (${shiftHours})`;
 
         const color = getColorByVariant(interval.status_type);
 

package/packages/shared-components/src/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import type { TooltipProps as MuiTooltipProps } from "@mui/material";
 import { Box, Tooltip as MuiTooltip, Typography } from "@mui/material";
-import { ReactNode, type PropsWithChildren } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 
 type TooltipProps = PropsWithChildren<{
   toolTipLabel: ReactNode;

package/packages/shared-components/src/UserProfileMenu/UserProfileMenu.styled.tsx

@@ -22,15 +22,11 @@ export const MenuStyled = styled(Menu)(({ theme }) => {
 
 export const IconButtonStyled = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== "isOpened",
-})<{ isOpened?: boolean }>(({ theme, isOpened }) => {
-  const { color } = theme.palette.app;
-
+})<{ isOpened?: boolean }>(() => {
   const style: CSSObject = {
-    paddingInline: "0.2rem 0.8rem",
+    paddingInline: "0.3rem",
     paddingBlock: "0.2rem",
-    borderRadius: "20px",
-    background: isOpened ? color.butterflyBlue[500] : color.slate[800],
-    border: `1px solid ${isOpened ? color.butterflyBlue[900] : color.iron[700]}`,
+    borderRadius: "8px",
   };
 
   return style;