@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,88 @@
+import type {
+  StepperProps as MuiStepperProps,
+  StepLabelProps,
+} from "@mui/material";
+import {
+  Box,
+  Stepper as MuiStepper,
+  Step,
+  StepLabel,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { useRouter } from "next/navigation";
+
+type StepperProps = MuiStepperProps & {
+  steps: string[];
+  stepUrls?: string[];
+  errorSteps?: number[];
+  showActiveStepIcon?: boolean;
+  stepLabelProps?: StepLabelProps;
+  onStepClick?: (stepIndex: number) => void;
+};
+
+export const Stepper = ({
+  orientation = "horizontal",
+  activeStep = 0,
+  stepLabelProps = {},
+  steps,
+  stepUrls = [],
+  errorSteps = [],
+  onStepClick,
+  ...rest
+}: StepperProps) => {
+  const theme = useTheme();
+
+  const router = useRouter();
+
+  const { butterflyBlue, red } = theme.palette.app.color;
+
+  const handleStepClick = (index: number) => {
+    if (onStepClick) {
+      onStepClick(index);
+    } else if (stepUrls[index]) {
+      router.push(stepUrls[index]);
+    }
+  };
+
+  return (
+    <Box>
+      <MuiStepper activeStep={activeStep} orientation={orientation} {...rest}>
+        {steps.map((label, index) => {
+          const isError = errorSteps.includes(index);
+
+          return (
+            <Step key={label}>
+              <StepLabel
+                {...stepLabelProps}
+                error={isError}
+                sx={{
+                  cursor:
+                    (stepUrls[index] ?? onStepClick) ? "pointer" : "default",
+                  ".Mui-active .MuiStepIcon-root": {
+                    color: `${butterflyBlue[900]} !important`,
+                  },
+                  ".Mui-completed .MuiStepIcon-root": {
+                    color: `${butterflyBlue[900]} !important`,
+                  },
+                  ...(isError && {
+                    ".MuiStepIcon-root": {
+                      color: `${red[900]} !important`,
+                    },
+                    ".MuiStepLabel-label": {
+                      color: `${red[900]} !important`,
+                    },
+                  }),
+                  ...stepLabelProps.sx,
+                }}
+                onClick={() => handleStepClick(index)}
+              >
+                <Typography variant="body2">{label}</Typography>
+              </StepLabel>
+            </Step>
+          );
+        })}
+      </MuiStepper>
+    </Box>
+  );
+};

package/packages/shared-components/src/Stepper/StepperV2.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import type { StepperProps } from "@mui/material/Stepper";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import type { StepLabelProps } from "@mui/material/StepLabel";
+import StepLabel from "@mui/material/StepLabel";
+import Check from "@mui/icons-material/Check";
+import StepConnector, {
+  stepConnectorClasses,
+} from "@mui/material/StepConnector";
+import type { StepIconProps } from "@mui/material/StepIcon";
+
+const QontoConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 10,
+    left: "calc(-50% + 16px)",
+    right: "calc(50% + 16px)",
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#784af4",
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#784af4",
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: "#eaeaf0",
+    borderTopWidth: 3,
+    borderRadius: 1,
+    ...theme.applyStyles("dark", {
+      borderColor: theme.palette.grey[800],
+    }),
+  },
+}));
+
+const QontoStepIconRoot = styled("div")<{ ownerState: { active?: boolean } }>(
+  ({ theme }) => ({
+    color: "#eaeaf0",
+    display: "flex",
+    height: 22,
+    alignItems: "center",
+    "& .QontoStepIcon-completedIcon": {
+      color: "#784af4",
+      zIndex: 1,
+      fontSize: 18,
+    },
+    "& .QontoStepIcon-circle": {
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      backgroundColor: "currentColor",
+    },
+    ...theme.applyStyles("dark", {
+      color: theme.palette.grey[700],
+    }),
+    variants: [
+      {
+        props: ({ ownerState }) => ownerState.active,
+        style: {
+          color: "#784af4",
+        },
+      },
+    ],
+  })
+);
+
+function QontoStepIcon(props: Readonly<StepIconProps>) {
+  const { active, completed, className } = props;
+
+  return (
+    <QontoStepIconRoot ownerState={{ active }} className={className}>
+      {completed ? (
+        <Check className="QontoStepIcon-completedIcon" />
+      ) : (
+        <div className="QontoStepIcon-circle" />
+      )}
+    </QontoStepIconRoot>
+  );
+}
+
+type StepperV2Props = StepperProps & {
+  steps: string[];
+  stepLabelProps?: StepLabelProps;
+};
+
+export const StepperV2 = ({
+  steps,
+  alternativeLabel = true,
+  stepLabelProps = {},
+  ...rest
+}: StepperV2Props) => {
+  return (
+    <Stack sx={{ width: "100%" }} spacing={4}>
+      <Stepper
+        alternativeLabel={alternativeLabel}
+        activeStep={1}
+        connector={<QontoConnector />}
+        {...rest}
+      >
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel StepIconComponent={QontoStepIcon} {...stepLabelProps}>
+              {label}
+            </StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+    </Stack>
+  );
+};

package/packages/shared-components/src/Stepper/StepperV3.tsx

@@ -0,0 +1,72 @@
+import type {
+  StepperProps as MuiStepperProps,
+  StepLabelProps,
+} from "@mui/material";
+import {
+  Stepper as MuiStepper,
+  Step,
+  StepLabel,
+  Box,
+  Typography,
+  useTheme,
+  Stack,
+} from "@mui/material";
+
+type StepperProps = MuiStepperProps & {
+  steps: { in_time?: string; out_time?: string }[];
+  showActiveStepIcon?: boolean;
+  stepLabelProps?: StepLabelProps;
+};
+
+export const StepperV3 = ({
+  orientation = "horizontal",
+  activeStep = 0,
+  stepLabelProps = {},
+  steps,
+  ...rest
+}: StepperProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  return (
+    <Box>
+      <MuiStepper activeStep={activeStep} orientation={orientation} {...rest}>
+        {steps.map((label, index) => (
+          // eslint-disable-next-line sonarjs/no-array-index-key
+          <Step key={index}>
+            <StepLabel
+              {...stepLabelProps}
+              sx={{
+                ".Mui-active .css-18pqgpd-MuiSvgIcon-root-MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".Mui-completed .MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".MuiStepIcon-text": {
+                  color: "transparent !important",
+                  display: "none",
+                },
+              }}
+            >
+              <Stack>
+                {label?.in_time ? (
+                  <>
+                    <Typography variant="caption">In at</Typography>
+                    <Typography variant="caption">{label?.in_time}</Typography>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant="caption">Out at</Typography>
+                    <Typography variant="caption">{label?.out_time}</Typography>
+                  </>
+                )}
+              </Stack>
+            </StepLabel>
+          </Step>
+        ))}
+      </MuiStepper>
+    </Box>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from "./Stepper";
+export * from "./StepperV2";
+export * from "./StepperV3";

package/packages/shared-components/src/Svgs/AppLogo/AppLogoMedium.tsx

@@ -0,0 +1,65 @@
+import type { SVGProps } from "react";
+
+export const AppLogoMedium = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={117}
+      height={42}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#fff"
+        d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+      />
+      <path
+        fill="#3BA4E8"
+        stroke="#3BA4E8"
+        strokeWidth={0.353}
+        d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+      />
+      <path
+        fill="#3BA4E8"
+        d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+      />
+      <path
+        stroke="#3BA4E8"
+        strokeWidth={0.353}
+        d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+      />
+      <path
+        fill="#fff"
+        d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+      />
+      <path
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+      />
+      <path
+        fill="#fff"
+        d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+      />
+      <path
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+      />
+      <path
+        fill="#fff"
+        d="M85 26.695v-2.35h-5.569v-2.364h4.977v-2.203H79.43v-2.14h5.264v-2.332H76.64v11.389H85Zm-13.287-5.727c0 2.541-1.912 3.346-3.977 3.346h-1.371v-6.66h1.439c1.997 0 3.91.756 3.91 3.314Zm3.013 0c0-4.311-3.453-5.662-6.855-5.662h-4.332v11.389h4.469c3.3 0 6.718-1.722 6.718-5.727Zm-16.198-.016c0 2.058-1.421 3.538-3.435 3.538-2.015 0-3.42-1.48-3.42-3.538 0-1.995 1.389-3.475 3.42-3.475 2.03 0 3.436 1.48 3.436 3.475Zm3.098 0C61.626 17.3 58.85 15 55.093 15c-3.74 0-6.516 2.3-6.516 5.952 0 3.603 2.776 6.048 6.516 6.048 3.757 0 6.533-2.445 6.533-6.048Zm-13.523 4.166-2.014-1.802c-.507.676-1.405 1.159-2.539 1.159-1.997 0-3.402-1.415-3.402-3.491 0-2.01 1.438-3.49 3.452-3.49.914 0 1.879.337 2.42 1.045l1.964-1.866C46.986 15.579 45.174 15 43.5 15 39.843 15 37 17.332 37 20.984 37 24.555 39.759 27 43.449 27c2.014 0 3.605-.724 4.654-1.882Z"
+      />
+      <path
+        fill="#fff"
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="M85 26.695v-2.35h-5.569v-2.364h4.977v-2.203H79.43v-2.14h5.264v-2.332H76.64v11.389H85Zm-13.287-5.727c0 2.541-1.912 3.346-3.977 3.346h-1.371v-6.66h1.439c1.997 0 3.91.756 3.91 3.314Zm3.013 0c0-4.311-3.453-5.662-6.855-5.662h-4.332v11.389h4.469c3.3 0 6.718-1.722 6.718-5.727Zm-16.198-.016c0 2.058-1.421 3.538-3.435 3.538-2.015 0-3.42-1.48-3.42-3.538 0-1.995 1.389-3.475 3.42-3.475 2.03 0 3.436 1.48 3.436 3.475Zm3.098 0C61.626 17.3 58.85 15 55.093 15c-3.74 0-6.516 2.3-6.516 5.952 0 3.603 2.776 6.048 6.516 6.048 3.757 0 6.533-2.445 6.533-6.048Zm-13.523 4.166-2.014-1.802c-.507.676-1.405 1.159-2.539 1.159-1.997 0-3.402-1.415-3.402-3.491 0-2.01 1.438-3.49 3.452-3.49.914 0 1.879.337 2.42 1.045l1.964-1.866C46.986 15.579 45.174 15 43.5 15 39.843 15 37 17.332 37 20.984 37 24.555 39.759 27 43.449 27c2.014 0 3.605-.724 4.654-1.882Z"
+      />
+      <path
+        fill="#3BA4E8"
+        d="M117 27v-2.475h-5.576v-2.491h4.983v-2.322h-4.983v-2.254h5.271V15h-8.068v12H117Zm-10.288 0v-2.475h-5.576v-2.491h4.983v-2.322h-4.983v-2.254h5.271V15h-8.068v12h8.373Zm-10.254 0v-2.509h-5.966l5.847-7.169V15h-9.204v2.457h5.577L87 24.491V27h9.458Z"
+      />
+    </svg>
+  );
+};

package/packages/shared-components/src/Svgs/AppLogo/AppLogoSmall.tsx

@@ -0,0 +1,48 @@
+import type { SVGProps } from "react";
+export const AppLogoSmall = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={32}
+    height={42}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+    />
+    <path
+      fill="#3BA4E8"
+      stroke="#3BA4E8"
+      strokeWidth={0.353}
+      d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+    />
+    <path
+      fill="#3BA4E8"
+      d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+    />
+    <path
+      stroke="#3BA4E8"
+      strokeWidth={0.353}
+      d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+    />
+    <path
+      fill="#fff"
+      d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+    />
+    <path
+      stroke="#fff"
+      strokeWidth={0.353}
+      d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+    />
+    <path
+      fill="#fff"
+      d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+    />
+    <path
+      stroke="#fff"
+      strokeWidth={0.353}
+      d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+    />
+  </svg>
+);

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

@@ -0,0 +1,11 @@
+export const ArrowUp = () => (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 10 9"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5 0L10 8.75H0L5 0Z" fill="#D9D9D9" />
+  </svg>
+);