@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,27 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgEmail = (props: SvgIconProps) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <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/SvgExport.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgExport = (props: SvgIconProps) => {
+  return (
+    <svg
+      width="38"
+      height="38"
+      viewBox="0 0 36 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="Communication / Share_iOS_Export">
+        <rect
+          x="0.5"
+          y="0.5"
+          width="33"
+          height="33"
+          rx="3.5"
+          stroke="#BCBFC2"
+        />
+        <path
+          id="Vector"
+          d="M14 11L17 8M17 8L20 11M17 8V18M12.0002 15C11.0683 15 10.6024 15 10.2349 15.1522C9.74481 15.3552 9.35523 15.7448 9.15224 16.2349C9 16.6024 9 17.0681 9 18V22.8C9 23.9201 9 24.4798 9.21799 24.9076C9.40973 25.2839 9.71547 25.5905 10.0918 25.7822C10.5192 26 11.079 26 12.1969 26H21.8036C22.9215 26 23.4805 26 23.9079 25.7822C24.2842 25.5905 24.5905 25.2839 24.7822 24.9076C25 24.4802 25 23.921 25 22.8031V18C25 17.0681 24.9999 16.6024 24.8477 16.2349C24.6447 15.7448 24.2554 15.3552 23.7654 15.1522C23.3978 15 22.9319 15 22 15"
+          stroke="#4C5D70"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,22 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgFilterList = (props: SvgIconProps) => (
+  <svg
+    width="38"
+    height="38"
+    viewBox="0 0 36 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <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/SvgImport.tsx

@@ -0,0 +1,43 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgImport = (props: SvgIconProps) => {
+  return (
+    <svg
+      width="38"
+      height="38"
+      viewBox="0 0 36 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="Communication / Share_iOS_Export">
+        <rect
+          x="0.5"
+          y="0.5"
+          width="33"
+          height="33"
+          rx="3.5"
+          stroke="#BCBFC2"
+        />
+        <g id="Group 5">
+          <path
+            id="Vector"
+            d="M12.0002 12.75C11.0683 12.75 10.6024 12.75 10.2349 12.9022C9.74481 13.1052 9.35523 13.4948 9.15224 13.9849C9 14.3524 9 14.8181 9 15.75V21.55C9 22.6701 9 23.2298 9.21799 23.6576C9.40973 24.0339 9.71547 24.3405 10.0918 24.5322C10.5192 24.75 11.079 24.75 12.1969 24.75H21.8036C22.9215 24.75 23.4805 24.75 23.9079 24.5322C24.2842 24.3405 24.5905 24.0339 24.7822 23.6576C25 23.2302 25 22.671 25 21.5531V15.75C25 14.8181 24.9999 14.3524 24.8477 13.9849C24.6447 13.4948 24.2554 13.1052 23.7654 12.9022C23.3978 12.75 22.9319 12.75 22 12.75"
+            stroke="#4C5D70"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Vector_2"
+            d="M20 16.25L17 19.25M17 19.25L14 16.25M17 19.25L17 9.25"
+            stroke="#4C5D70"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </g>
+    </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,19 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgPhone = (props: SvgIconProps) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <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/SvgProfile.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgProfile = (props: SvgIconProps) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_8728_7975)">
+      <path
+        d="M10.7224 0.0587158C11.281 0.136841 11.7302 0.277466 12.2536 0.543091C13.9919 1.41809 15.0114 3.37122 14.8122 5.4259C14.6911 6.64856 14.2888 7.6134 13.5153 8.53528C13.0778 9.05871 12.4021 9.55871 11.7731 9.82043C9.6794 10.6954 7.38643 9.96106 6.06612 7.9884C5.02315 6.43372 4.87471 4.29309 5.69112 2.64075C6.61299 0.77356 8.58565 -0.238159 10.7224 0.0587158ZM9.10909 1.58606C8.22237 1.80872 7.42159 2.44934 7.01534 3.26965C6.73018 3.84778 6.63252 4.28918 6.63643 4.98059C6.64424 6.05871 7.03096 7.03137 7.73409 7.7384C8.06221 8.07043 8.26534 8.21887 8.65596 8.41418C9.4958 8.82825 10.5036 8.82825 11.3435 8.41418C11.7341 8.21887 11.9372 8.07043 12.2653 7.7384C13.7419 6.25012 13.738 3.59778 12.2575 2.28528C11.4333 1.55872 10.2614 1.297 9.10909 1.58606Z"
+        fill="#93AABE"
+      />
+      <path
+        d="M10.7811 11.293C13.7655 11.418 16.121 12.3438 17.5272 13.9453C18.6093 15.1758 19.1913 16.7305 19.2929 18.6562C19.3397 19.5352 19.2694 19.75 18.8866 19.9258C18.7343 19.9961 18.4061 20 9.9999 20C1.59365 20 1.26553 19.9961 1.11318 19.9258C0.73037 19.75 0.660057 19.5352 0.706932 18.6562C0.933495 14.3594 3.61318 11.8086 8.37881 11.3516C9.16787 11.2773 9.95693 11.2578 10.7811 11.293ZM8.7499 12.7734C5.96474 13.0234 4.16787 13.8945 3.11709 15.5039C2.64053 16.2344 2.28506 17.3008 2.20303 18.2305L2.17568 18.5547H9.9999H17.8241L17.7968 18.2344C17.7811 18.0547 17.7265 17.7148 17.6757 17.4805C17.2851 15.668 16.2929 14.3867 14.6718 13.6094C13.7694 13.1758 12.7851 12.9258 11.4452 12.793C10.8358 12.7305 9.34756 12.7227 8.7499 12.7734Z"
+        fill="#93AABE"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_8728_7975">
+        <rect
+          width="20"
+          height="20"
+          fill="white"
+          transform="matrix(-1 0 0 1 20 0)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);

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

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+export const SvgView = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12.0002 6.7728C14.7546 6.7728 17.0888 8.029 18.5584 9.0828C20.3008 10.3324 21.1984 11.538 21.4316 12C21.1984 12.4598 20.303 13.6676 18.5584 14.9172C17.0866 15.971 14.7546 17.2272 12.0002 17.2272C9.24582 17.2272 6.91381 15.971 5.44201 14.9172C3.69741 13.6676 2.80201 12.4598 2.56881 12C2.80201 11.5402 3.69741 10.3324 5.44201 9.0828C6.91161 8.029 9.24582 6.7728 12.0002 6.7728ZM12.0002 5.466C6.04701 5.466 1.22021 10.6932 1.22021 12C1.22021 13.3068 6.04701 18.534 12.0002 18.534C17.9534 18.534 22.7802 13.3068 22.7802 12C22.7802 10.6932 17.9534 5.466 12.0002 5.466ZM12.0002 8.0796C9.83541 8.0796 8.07981 9.8352 8.07981 12C8.07981 14.1648 9.83541 15.9204 12.0002 15.9204C14.165 15.9204 15.9206 14.1648 15.9206 12C15.9206 9.8352 14.165 8.0796 12.0002 8.0796ZM10.9442 12C10.029 12 9.28541 11.2564 9.28541 10.3412C9.28541 9.426 10.029 8.6824 10.9442 8.6824C11.8594 8.6824 12.603 9.426 12.603 10.3412C12.603 11.2564 11.8616 12 10.9442 12Z"
+      fill="#4C5D70"
+    />
+  </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,18 @@
+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 "./SvgExport";
+export * from "./SvgImport";
+export * from "./SvgNoLogo";
+export * from "./SvgNoSign";
+export * from "./SvgProfile";
+export * from "./SvgsDrop";
+export * from "./SvgsHome";
+export * from "./SvgView";

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>
+  );
+};