@codezee/sixtify-brahma 0.2.3 → 0.2.6

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/SvgFilterList.tsx

@@ -0,0 +1,19 @@
+export const SvgFilterList = () => (
+  <svg
+    width="38"
+    height="38"
+    viewBox="0 0 36 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="0.5" y="0.5" width="34" height="34" rx="3.5" fill="white" />
+    <rect x="0.5" y="0.5" width="34" height="34" rx="3.5" stroke="#BCBFC2" />
+    <path
+      d="M10.5 13.8333V11.5C10.5 10.9477 10.9478 10.5 11.5 10.5H24.5001C25.0524 10.5 25.5001 10.9477 25.5001 11.4999L25.5004 13.8333M10.5 13.8333L15.9842 18.534C16.2058 18.724 16.3334 19.0013 16.3334 19.2933V24.2192C16.3334 24.8698 16.9448 25.3472 17.5759 25.1894L18.9092 24.856C19.3544 24.7447 19.6667 24.3448 19.6667 23.8859V19.2933C19.6667 19.0014 19.7943 18.724 20.0159 18.534L25.5004 13.8333M10.5 13.8333H25.5004"
+      stroke="#151E28"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -0,0 +1,66 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgNoLogo = (props: SvgIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={50}
+      height={50}
+      fill="none"
+      {...props}
+      style={{ color: "inherit" }}
+    >
+      <g clipPath="url(#clip0_2072_2023)">
+        <path
+          d="M1.08984 1.08203L48.9112 48.9175"
+          stroke="black"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+        />
+        <path
+          d="M1.08984 6.70996V43.5065H38.9983"
+          stroke="black"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+        />
+        <path
+          d="M6.75391 6.60156H48.9108V43.2899H43.0284"
+          stroke="black"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+        />
+        <path
+          d="M1.41602 33.3332L15.1415 20.6709"
+          stroke="black"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+        />
+        <path
+          d="M36.167 20.7786C38.1524 20.7786 39.7618 19.1796 39.7618 17.2072C39.7618 15.2347 38.1524 13.6357 36.167 13.6357C34.1817 13.6357 32.5723 15.2347 32.5723 17.2072C32.5723 19.1796 34.1817 20.7786 36.167 20.7786Z"
+          fill="black"
+        />
+        <path
+          d="M25.2734 35.4973L28.3235 32.5752"
+          stroke="black"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+        />
+        <path
+          d="M30.1758 30.5188L33.9884 26.7309C34.4241 26.298 35.0777 26.298 35.4045 26.7309L48.6943 39.5015"
+          stroke="black"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2072_2023">
+          <rect width="50" height="50" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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

@@ -0,0 +1,28 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgNoSign = (props: SvgIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={40}
+      height={40}
+      fill="none"
+      {...props}
+      style={{ color: "inherit" }}
+    >
+      <path
+        d="M3.80046 33.943C3.80046 33.943 16.7005 24.343 16.3005 14.543C15.8005 4.74296 6.30046 2.94296 4.00046 18.543C1.70046 34.143 17.6005 30.043 22.3005 26.043C27.0005 22.043 29.5005 16.443 25.1005 15.543C20.9005 14.743 19.6005 28.343 23.9005 30.443C23.9005 30.443 26.0005 32.743 33.6005 22.243C33.8005 22.043 34.1005 22.043 34.2005 22.243L36.6005 27.143C36.7005 27.443 37.1005 27.443 37.3005 27.243L42.7005 21.143"
+        stroke="black"
+        strokeWidth="2"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M3 39.543H43.1"
+        stroke="black"
+        strokeWidth="2"
+        strokeMiterlimit="10"
+      />
+    </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/SvgsDrop.tsx

@@ -0,0 +1,44 @@
+import type { SvgIconProps } from "@mui/material";
+import { useTheme } from "@mui/material";
+
+export const SvgsDrop = (props: SvgIconProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  const fill = props.fill ?? butterflyBlue[900];
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={57}
+      height={49}
+      fill="none"
+      {...props}
+      style={{ color: "inherit" }}
+    >
+      <path
+        fill={fill ?? "currentColor"}
+        d="M29.399 12.005a.602.602 0 0 1-.401-.748c1.096-3.718 4.511-6.448 8.575-6.448a.6.6 0 0 1 .596.602.6.6 0 0 1-.596.602c-3.406 0-6.462 2.297-7.432 5.587a.595.595 0 0 1-.742.405Z"
+      />
+      <path
+        fill={fill ?? "currentColor"}
+        d="M45.923 34.898h-3.578a.6.6 0 0 1-.597-.602.6.6 0 0 1 .597-.602h3.578c4.932 0 8.946-4.049 8.946-9.025 0-4.977-4.014-9.026-8.946-9.026h-.086a.594.594 0 0 1-.45-.208.605.605 0 0 1-.14-.48c.053-.374.08-.75.08-1.117 0-4.313-3.479-7.823-7.754-7.823-1.663 0-3.249.525-4.586 1.517a.594.594 0 0 1-.882-.205C28.317.05 18.422-.928 13.292 5.403a11.475 11.475 0 0 0-2.33 9.519.6.6 0 0 1-.584.721h-.24c-4.932 0-8.945 4.05-8.945 9.026 0 4.977 4.013 9.026 8.946 9.026h3.578a.6.6 0 0 1 .596.601.6.6 0 0 1-.596.602H10.14C4.549 34.898 0 30.31 0 24.67c0-5.482 4.297-9.97 9.67-10.218a12.672 12.672 0 0 1 2.698-9.81c5.493-6.779 16.019-6.019 20.468 1.54a8.81 8.81 0 0 1 4.737-1.368c5.18 0 9.283 4.447 8.924 9.643 5.325.302 9.565 4.767 9.565 10.213 0 5.64-4.549 10.229-10.14 10.229h.001Z"
+      />
+      <path
+        fill={fill ?? "currentColor"}
+        d="M27.95 49c-8.222 0-14.91-6.748-14.91-15.043 0-8.295 6.688-15.043 14.91-15.043 8.22 0 14.91 6.748 14.91 15.043C42.86 42.252 36.17 49 27.95 49Zm0-28.882c-7.564 0-13.718 6.208-13.718 13.839s6.154 13.84 13.717 13.84c7.564 0 13.717-6.21 13.717-13.84s-6.153-13.84-13.717-13.84Z"
+      />
+      <path
+        fill={fill ?? "currentColor"}
+        stroke={fill ?? "currentColor"}
+        d="M27.29 40.013c0 .516.414.94.936.94a.938.938 0 0 0 .936-.94V28.56a.939.939 0 0 0-.936-.94.939.939 0 0 0-.937.94v11.453Z"
+      />
+      <path
+        fill={fill ?? "currentColor"}
+        stroke={fill ?? "currentColor"}
+        d="m32.028 31.772.355-.352a.943.943 0 0 1 0 1.327.933.933 0 0 1-.663.277l.308-1.252Zm0 0 .355-.352-3.493-3.524a.934.934 0 0 0-1.328 0l.356.352-.356-.351 4.466 3.875Zm-3.801-1.879-2.83 2.854 2.83-2.854Zm0 0 2.829 2.854a.934.934 0 0 0 .664.277l-3.493-3.131Z"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,42 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgsEdit = (props: SvgIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={30}
+      height={30}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#fff"
+        stroke="#DBE1E6"
+        d="M.5 4A3.5 3.5 0 0 1 4 .5h22A3.5 3.5 0 0 1 29.5 4v22a3.5 3.5 0 0 1-3.5 3.5H4A3.5 3.5 0 0 1 .5 26V4Z"
+      />
+      <path
+        stroke="#4C5D70"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.565}
+        d="M14.457 8.836h-1.25c-3.125 0-4.375 1.25-4.375 4.375v3.75c0 3.125 1.25 4.375 4.375 4.375h3.75c3.125 0 4.375-1.25 4.375-4.375v-1.25"
+      />
+      <path
+        stroke="#4C5D70"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.565}
+        d="M17.608 9.474 12.683 14.4a1.695 1.695 0 0 0-.413.825l-.269 1.881c-.1.682.382 1.157 1.063 1.063l1.881-.269a1.75 1.75 0 0 0 .825-.412l4.925-4.925c.85-.85 1.25-1.838 0-3.088s-2.237-.85-3.087 0Z"
+      />
+      <path
+        stroke="#4C5D70"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.565}
+        d="M16.898 10.18a4.465 4.465 0 0 0 3.088 3.087"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,40 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgsHistory = (props: SvgIconProps) => {
+  return (
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H26C27.933 0.5 29.5 2.067 29.5 4V26C29.5 27.933 27.933 29.5 26 29.5H4C2.067 29.5 0.5 27.933 0.5 26V4Z"
+        fill="white"
+        stroke="#DBE1E6"
+      />
+      <g clipPath="url(#clip0_22174_76909)">
+        <path
+          d="M15.687 8.125C14.1756 8.13236 12.7094 8.64089 11.5179 9.57092C10.3265 10.501 9.4773 11.7999 9.1033 13.2644L8.6458 12.5725C8.60248 12.5001 8.54495 12.4372 8.47667 12.3876C8.40838 12.338 8.33076 12.3027 8.24848 12.2839C8.1662 12.2651 8.08097 12.2632 7.99792 12.2783C7.91488 12.2933 7.83575 12.325 7.76529 12.3715C7.69484 12.418 7.63452 12.4782 7.58798 12.5486C7.54144 12.619 7.50965 12.6981 7.49451 12.7811C7.47937 12.8642 7.48121 12.9494 7.4999 13.0317C7.5186 13.114 7.55377 13.1917 7.6033 13.26L8.9783 15.3438C9.07381 15.4774 9.21463 15.5718 9.37455 15.6094C9.53784 15.6418 9.70733 15.6093 9.84705 15.5188L11.9095 14.1294C11.9807 14.085 12.0421 14.0267 12.0902 13.9581C12.1384 13.8894 12.1722 13.8118 12.1897 13.7298C12.2072 13.6478 12.2081 13.5631 12.1922 13.4808C12.1763 13.3985 12.144 13.3202 12.0972 13.2506C12.0505 13.181 11.9902 13.1216 11.9199 13.0758C11.8497 13.03 11.771 12.9988 11.6885 12.984C11.6059 12.9693 11.5213 12.9713 11.4395 12.9899C11.3578 13.0085 11.2806 13.0434 11.2127 13.0925L10.2745 13.725C10.5242 12.7115 11.0538 11.7886 11.8027 11.0615C12.5517 10.3345 13.4899 9.83264 14.5104 9.6132C15.5309 9.39375 16.5925 9.46557 17.5741 9.82045C18.5558 10.1753 19.4179 10.799 20.0621 11.6203C20.7063 12.4416 21.1067 13.4274 21.2176 14.4653C21.3285 15.5032 21.1455 16.5514 20.6893 17.4902C20.2332 18.4291 19.5223 19.2208 18.6378 19.7751C17.7533 20.3294 16.7309 20.6239 15.687 20.625C14.7923 20.6226 13.9113 20.4042 13.119 19.9883C12.3267 19.5724 11.6466 18.9713 11.1364 18.2363C11.0907 18.1661 11.0314 18.1058 10.962 18.059C10.8925 18.0122 10.8144 17.9799 10.7322 17.9639C10.65 17.9478 10.5655 17.9485 10.4836 17.9658C10.4016 17.9831 10.324 18.0167 10.2553 18.0646C10.1866 18.1124 10.1283 18.1736 10.0837 18.2445C10.0391 18.3154 10.0092 18.3945 9.99577 18.4771C9.98235 18.5598 9.98567 18.6443 10.0055 18.7256C10.0254 18.807 10.0614 18.8835 10.1114 18.9506C10.9408 20.1464 12.1319 21.0445 13.5097 21.513C14.8874 21.9816 16.3791 21.9959 17.7656 21.5537C19.152 21.1116 20.36 20.2364 21.2122 19.0567C22.0643 17.877 22.5155 16.4551 22.4995 15C22.5057 13.1856 21.7919 11.4428 20.5148 10.1539C19.2377 8.86508 17.5015 8.13542 15.687 8.125Z"
+          fill="#4C5D70"
+        />
+        <path
+          d="M15.625 11.2188C15.4592 11.2188 15.3003 11.2846 15.1831 11.4018C15.0658 11.519 15 11.678 15 11.8438V15C15.0027 15.1652 15.0681 15.3232 15.1831 15.4419L17.0581 17.3338C17.1758 17.4496 17.334 17.5148 17.4991 17.5156C17.6642 17.5165 17.8231 17.4528 17.9419 17.3381C18.0595 17.2214 18.126 17.0628 18.1267 16.897C18.1274 16.7313 18.0623 16.5721 17.9456 16.4544L16.25 14.7431V11.8438C16.25 11.678 16.1842 11.519 16.0669 11.4018C15.9497 11.2846 15.7908 11.2188 15.625 11.2188Z"
+          fill="#4C5D70"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_22174_76909">
+          <rect
+            width="15"
+            height="15"
+            fill="white"
+            transform="translate(7.5 7.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+export const SvgsHome = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      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

@@ -0,0 +1,24 @@
+import { getColorByVariant, type WorkDayType } from "../utils/colorVariant";
+
+type SvgsIndicatorIconProps = {
+  variant?: WorkDayType;
+  colourCode?: string;
+};
+export const SvgsIndicator = ({
+  variant,
+  colourCode,
+}: SvgsIndicatorIconProps) => {
+  const color = variant ? getColorByVariant(variant) : colourCode;
+
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="5" cy="5" r="5" fill={color} />
+    </svg>
+  );
+};

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

@@ -0,0 +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";

package/packages/shared-components/src/Tab/Skeleton.tsx

@@ -0,0 +1,15 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <Stack gap="10px">
+      <MuiSkeleton
+        width={200}
+        height="30px"
+        sx={{
+          transform: "scale(1)",
+        }}
+      />
+    </Stack>
+  );
+};

package/packages/shared-components/src/Tab/Tabs.tsx

@@ -0,0 +1,64 @@
+import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
+import { Tabs as MuiTabs, Stack } from "@mui/material";
+import type { TabOwnProps } from "@mui/material/Tab";
+import Tab from "@mui/material/Tab";
+import type { ReactElement } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { Tooltip } from "../Tooltip";
+import { Skeleton } from "./Skeleton";
+
+export type TabsItems = {
+  value: string;
+  label: string;
+  icon?: ReactElement;
+  toolTipLabel?: string;
+  iconPosition?: TabOwnProps["iconPosition"];
+  onClick: () => void;
+};
+
+type TabsProps = {
+  tabs: TabsItems[];
+  value: string;
+  loading?: boolean;
+};
+
+export const Tabs = ({ tabs, value, loading }: TabsProps) => {
+  if (loading) {
+    return (
+      <Stack gap="10px" direction="row">
+        {tabs.map(() => {
+          return <Skeleton key={uuidv4()} />;
+        })}
+      </Stack>
+    );
+  }
+
+  return (
+    <MuiTabs value={value}>
+      {tabs.map(
+        ({
+          iconPosition = "end",
+          toolTipLabel = "",
+          icon = <HelpOutlineOutlinedIcon color="secondary" />,
+          ...rest
+        }) => (
+          <Tab
+            key={uuidv4()}
+            icon={
+              toolTipLabel ? (
+                <Tooltip toolTipLabel={toolTipLabel} placement="bottom">
+                  {icon}
+                </Tooltip>
+              ) : (
+                icon
+              )
+            }
+            disabled={loading}
+            iconPosition={iconPosition}
+            {...rest}
+          />
+        )
+      )}
+    </MuiTabs>
+  );
+};

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

@@ -0,0 +1 @@
+export * from "./Tabs";

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

@@ -0,0 +1,56 @@
+import { Box, Slider, Stack } from "@mui/material";
+import {
+  getColorByVariant,
+  getStatusLabel,
+  type WorkDayType,
+} from "../utils/colorVariant";
+
+type AttendanceStatusProps = {
+  variant: WorkDayType;
+};
+
+export const AttendanceStatus = ({ variant }: AttendanceStatusProps) => {
+  const color = getColorByVariant(variant);
+
+  return (
+    <Stack sx={{ position: "relative", width: "100%", alignItems: "center" }}>
+      <Box
+        sx={{
+          position: "absolute",
+          backgroundColor: "#ffffff",
+          border: `1px solid ${color}`,
+          borderRadius: "7px",
+          padding: "0px 5px",
+          zIndex: 1,
+          color: `${color}`,
+          height: "28px",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        {getStatusLabel(variant)}
+      </Box>
+      <Slider
+        valueLabelDisplay="off"
+        value={[0, 2]}
+        max={2}
+        step={1}
+        sx={{
+          "& .MuiSlider-track": {
+            background: `${color}`,
+            height: "2px",
+            border: "none",
+          },
+          "& .MuiSlider-thumb": {
+            backgroundColor: `${color}`,
+            height: 8,
+            width: 8,
+          },
+          "& .MuiSlider-rail": {
+            backgroundColor: "transparent",
+          },
+        }}
+      />
+    </Stack>
+  );
+};

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

@@ -0,0 +1,171 @@
+import { Box, Slider, Stack, Tooltip } from "@mui/material";
+import React from "react";
+import { TimelineTrackSegments } from "./TimelineTrackSegments";
+import { type WorkDayType } from "../utils/colorVariant";
+import { getTimeInHHmm } from "../utils/date";
+import { ArrowUp } from "../Svgs/ArrowUp";
+import { DateTime } from "luxon";
+
+export type HighlightedInterval = {
+  in_time: string;
+  out_time: string;
+  status_type: WorkDayType;
+};
+
+type TimelineProps = {
+  totalDots: number;
+  highlightedIntervals: HighlightedInterval[];
+  startTimeline: string;
+  shiftStartTime: string;
+  shiftEndTime: string;
+};
+
+export const getArrowValue = (date: string) => {
+  const time = DateTime.fromFormat(date, "HH:mm");
+
+  const hour = time.hour;
+
+  const minute = time.minute;
+
+  return hour + minute / 60;
+};
+
+export const Timeline = ({
+  totalDots,
+  highlightedIntervals,
+  shiftStartTime,
+  shiftEndTime,
+  startTimeline = "2024-11-17T18:30:04.000Z",
+}: TimelineProps) => {
+  const slotStartTime = parseFloat(getTimeInHHmm(startTimeline));
+
+  const getArrowPosition = (
+    shiftStartTime: string,
+    shiftEndTime: string,
+    type: "END" | "START"
+  ) => {
+    const shiftStart = getTimeInHHmm(shiftStartTime);
+
+    const shiftEnd = getTimeInHHmm(shiftEndTime);
+
+    let shiftStartValue = getArrowValue(shiftStart);
+
+    let shiftEndValue = getArrowValue(shiftEnd);
+
+    shiftStartValue =
+      shiftStartValue < slotStartTime
+        ? shiftStartValue + totalDots
+        : shiftStartValue;
+
+    shiftEndValue =
+      shiftEndValue < shiftStartValue
+        ? shiftEndValue + totalDots
+        : shiftEndValue;
+
+    return type === "END" ? shiftEndValue : shiftStartValue;
+  };
+
+  const isHighlighted = (index: number) => {
+    const wrappedValue = (index + slotStartTime) % totalDots;
+
+    return highlightedIntervals.some(
+      (interval) =>
+        wrappedValue >= parseFloat(getTimeInHHmm(interval.in_time)) &&
+        wrappedValue <= parseFloat(getTimeInHHmm(interval.out_time))
+    );
+  };
+
+  const marks = Array.from({ length: totalDots }, (_, index) => ({
+    value: (index + slotStartTime) % totalDots,
+    label: "",
+    highlighted: isHighlighted((index + slotStartTime) % totalDots),
+  }));
+
+  return (
+    <Stack sx={{ position: "relative", width: "100%" }}>
+      <TimelineTrackSegments
+        totalDots={totalDots}
+        intervals={highlightedIntervals}
+        startTimeline={slotStartTime}
+      />
+      <Tooltip
+        title={`Shift Start: ${getTimeInHHmm(shiftStartTime)}`}
+        arrow
+        placement="top"
+      >
+        <Box
+          sx={{
+            cursor: "pointer",
+            position: "absolute",
+            top: "12px",
+            zIndex: 2,
+            left: `${(((getArrowPosition(shiftStartTime, shiftEndTime, "START") - slotStartTime) % totalDots) / (totalDots - 1)) * 100}%`,
+          }}
+        >
+          <ArrowUp />
+        </Box>
+      </Tooltip>
+      <Tooltip
+        title={`Shift End: ${getTimeInHHmm(shiftEndTime)}`}
+        arrow
+        placement="top"
+      >
+        <Box
+          sx={{
+            cursor: "pointer",
+            position: "absolute",
+            top: "12px",
+            zIndex: 2,
+            left: `${(((getArrowPosition(shiftStartTime, shiftEndTime, "END") - slotStartTime) % totalDots) / (totalDots - 1)) * 100}%`,
+          }}
+        >
+          <ArrowUp />
+        </Box>
+      </Tooltip>
+      <Slider
+        valueLabelDisplay="off"
+        marks={marks}
+        max={totalDots - 1}
+        step={1}
+        value={highlightedIntervals
+          .map((interval) => [
+            (parseFloat(getTimeInHHmm(interval.in_time)) -
+              slotStartTime +
+              totalDots) %
+              totalDots,
+            (parseFloat(getTimeInHHmm(interval.out_time)) -
+              slotStartTime +
+              totalDots) %
+              totalDots,
+          ])
+          .flat()}
+        sx={{
+          zIndex: 1,
+          "& .MuiSlider-track": {
+            background: "transparent",
+            height: 1,
+            border: "none",
+          },
+          "& .MuiSlider-mark": {
+            backgroundColor: "gray",
+            height: 4,
+            width: 4,
+            borderRadius: "50%",
+          },
+          "& .MuiSlider-markActive": {
+            backgroundColor: "transparent",
+            height: 5,
+            width: 5,
+          },
+          "& .MuiSlider-rail": {
+            height: 2,
+            backgroundColor: "#929292",
+          },
+          "& .MuiSlider-thumb": {
+            display: "none",
+          },
+        }}
+      />
+    </Stack>
+  );
+};