@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,159 @@
+import { Box, Slider, Stack, Tooltip } from "@mui/material";
+import { DateTime } from "luxon";
+import { ArrowUp } from "../Svgs/ArrowUp";
+import { type WorkDayType } from "../utils/colorVariant";
+import { getTimeInHHmm } from "../utils/date";
+import { TimelineTrackSegments } from "./TimelineTrackSegments";
+
+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 + 0.5)) * 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 - 0.5)) * 100}%`,
+          }}
+        >
+          <ArrowUp />
+        </Box>
+      </Tooltip>
+      <Slider
+        valueLabelDisplay="off"
+        marks={marks}
+        max={totalDots - 1}
+        step={1}
+        value={[]}
+        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>
+  );
+};

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

@@ -0,0 +1,130 @@
+import { Box, Stack, Tooltip } from "@mui/material";
+import { DateTime } from "luxon";
+import { getColorByVariant } from "../utils/colorVariant";
+import { getTimeInHHmm } from "../utils/date";
+import { getArrowValue, type HighlightedInterval } from "./Timeline";
+
+type TimelineTrackSegmentsProps = {
+  totalDots: number;
+  intervals: HighlightedInterval[];
+  startTimeline: number;
+};
+
+export const TimelineTrackSegments = ({
+  totalDots,
+  intervals,
+  startTimeline,
+}: TimelineTrackSegmentsProps) => {
+  return (
+    <Box sx={{ position: "relative", width: "100%", height: 4 }}>
+      {intervals?.map((interval, index) => {
+        const inTime = getTimeInHHmm(interval.in_time);
+
+        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;
+
+        let out_time = getArrowValue(outTime);
+
+        out_time = out_time < in_time ? out_time + totalDots : out_time;
+
+        const isValidInTime = !isNaN(in_time);
+
+        const isValidOutTime = !isNaN(out_time);
+
+        let inTimeLabel = "";
+
+        let outTimeLabel = "";
+
+        if (isValidInTime) {
+          inTimeLabel = `In time : ${inTime} ${!isValidOutTime ? " / Missing punch" : ""}`;
+        }
+
+        if (isValidOutTime) {
+          outTimeLabel = `Out time : ${outTime}  ${!isValidInTime ? "/ Missing punch" : ""}`;
+        }
+
+        const startPercent =
+          (((in_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
+
+        const endPercent =
+          (((out_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
+
+        const labelText = `In/Out: ${getTimeInHHmm(interval.in_time)} - ${getTimeInHHmm(
+          interval.out_time
+        )} (${shiftHours})`;
+
+        const color = getColorByVariant(interval.status_type);
+
+        return (
+          // eslint-disable-next-line sonarjs/no-array-index-key
+          <Stack direction="row" key={index}>
+            {isValidInTime && (
+              <Tooltip arrow title={inTimeLabel} placement="top">
+                <Box
+                  sx={{
+                    height: 8,
+                    width: 8,
+                    position: "absolute",
+                    left: `${startPercent}%`,
+                    boxShadow: "none",
+                    backgroundColor: color,
+                    borderRadius: "50%",
+                    top: "15px",
+                    zIndex: 3,
+                    "&:focus, &:hover, &:active": {
+                      boxShadow: "none",
+                    },
+                  }}
+                />
+              </Tooltip>
+            )}
+            <Tooltip arrow title={labelText} placement="top">
+              <Box
+                sx={{
+                  position: "absolute",
+                  left: `${startPercent}%`,
+                  width: `${endPercent - startPercent}%`,
+                  height: 3.5,
+                  top: "17.5px",
+                  backgroundColor: color,
+                  zIndex: 2,
+                }}
+              />
+            </Tooltip>
+            {isValidOutTime && (
+              <Tooltip arrow title={outTimeLabel} placement="top">
+                <Box
+                  sx={{
+                    height: 8,
+                    width: 8,
+                    position: "absolute",
+                    right: `${100 - endPercent}%`,
+                    boxShadow: "none",
+                    backgroundColor: color,
+                    borderRadius: "50%",
+                    top: "15px",
+                    zIndex: 3,
+                    "&:focus, &:hover, &:active": {
+                      boxShadow: "none",
+                    },
+                  }}
+                />
+              </Tooltip>
+            )}
+          </Stack>
+        );
+      })}
+    </Box>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from "./AttendanceStatus";
+export * from "./Timeline";

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

@@ -0,0 +1,59 @@
+import {
+  AddCircleOutline,
+  CheckCircleOutline,
+  Close,
+  ErrorOutline,
+  HighlightOff,
+} from "@mui/icons-material";
+import { IconButton, Stack } from "@mui/material";
+import type { ReactNode } from "react";
+import { PadBox } from "../PadBox";
+import type { ToastBodyProps } from "./ToastBody";
+import { ToastBody } from "./ToastBody";
+import type { ToastFooterLinkProps } from "./ToastFooterLink";
+import { ToastFooterLink } from "./ToastFooterLink";
+import type { ToastType } from "./types";
+
+export type ToastProps = ToastBodyProps &
+  ToastFooterLinkProps & {
+    closeToast?: () => void;
+    type: ToastType;
+  };
+
+type ToastIcon = {
+  [K in ToastType]: ReactNode;
+};
+
+export const Toast = ({
+  closeToast,
+  type,
+  title,
+  description,
+  href,
+  linkText,
+}: ToastProps) => {
+  const toastIcons: ToastIcon = {
+    info: <AddCircleOutline color="info" fontSize="large" />,
+    success: <CheckCircleOutline color="success" fontSize="large" />,
+    warning: <ErrorOutline color="warning" fontSize="large" />,
+    error: <HighlightOff color="error" fontSize="large" />,
+  };
+
+  return (
+    <PadBox padding={{ p: "20px", pl: "16px" }}>
+      <Stack direction="row" gap="16px" alignItems="center">
+        {toastIcons[type]}
+
+        <Stack alignItems="flex-start" gap="1.2rem" flexGrow={1}>
+          <ToastBody title={title} description={description} />
+
+          {href && <ToastFooterLink href={href} linkText={linkText} />}
+        </Stack>
+
+        <IconButton onClick={closeToast} disableRipple>
+          <Close />
+        </IconButton>
+      </Stack>
+    </PadBox>
+  );
+};

package/packages/shared-components/src/Toast/ToastBody.tsx

@@ -0,0 +1,26 @@
+import { Stack, Typography, useTheme } from "@mui/material";
+import type { ToastBody as ToastBodyType } from "./types";
+
+export type ToastBodyProps = Readonly<ToastBodyType>;
+
+export function ToastBody({ title, description }: ToastBodyProps) {
+  const {
+    palette: {
+      app: { color },
+    },
+  } = useTheme();
+
+  return (
+    <Stack gap="4px">
+      <Typography fontWeight={500} color="black" variant="body1">
+        {title}
+      </Typography>
+
+      {description && (
+        <Typography color={color.slate[900]} variant="body2">
+          {description}
+        </Typography>
+      )}
+    </Stack>
+  );
+}

package/packages/shared-components/src/Toast/ToastFooterLink.tsx

@@ -0,0 +1,19 @@
+import { Link, Typography } from "@mui/material";
+import { HoverBox } from "./Toaster.styled";
+import type { ToastLink } from "./types";
+
+export type ToastFooterLinkProps = Readonly<ToastLink>;
+
+export function ToastFooterLink({ href, linkText }: ToastFooterLinkProps) {
+  return (
+    <Link
+      href={href}
+      underline="none"
+      target={href?.startsWith("http") ? "_blank" : "_self"}
+    >
+      <HoverBox>
+        <Typography>{linkText ?? href}</Typography>
+      </HoverBox>
+    </Link>
+  );
+}

package/packages/shared-components/src/Toast/Toaster.styled.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, styled, type BoxProps, type CSSObject } from "@mui/material";
+import type { ComponentType } from "react";
+import { ToastContainer, type ToastContainerProps } from "react-toastify";
+
+export const ToasterStyled: ComponentType<ToastContainerProps> = styled(
+  ToastContainer as any
+)<ToastContainerProps>(({
+  theme: {
+    palette: {
+      app: { color },
+    },
+  },
+}) => {
+  const toastBody: CSSObject = {
+    "& .Toastify__toast-container": {
+      padding: "0px",
+    },
+
+    "& .Toastify__toast": {
+      padding: "0px",
+      inlineSize: "400px",
+      marginLeft: "-80px",
+      borderRadius: "8px",
+      border: `2px solid ${color.iron[700]}`,
+    },
+
+    "& .Toastify__toast-body": {
+      padding: "0px",
+    },
+  };
+
+  const toastSuccess: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--success": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.darkMint[900]}`,
+      },
+    },
+  };
+
+  const toastError: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--error": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.red[900]}`,
+      },
+    },
+  };
+
+  const toastWarning: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--warning": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.darkOrange[900]}`,
+      },
+    },
+  };
+
+  const toastInfo: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--info": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.slate[900]}`,
+      },
+    },
+  };
+
+  return {
+    ...toastBody,
+    ...toastSuccess,
+    ...toastError,
+    ...toastWarning,
+    ...toastInfo,
+  };
+});
+
+export const HoverBox: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({
+  color: theme.palette.app.color.slate[900],
+
+  "&:hover": {
+    color: theme.palette.app.color.butterflyBlue[900],
+  },
+}));

package/packages/shared-components/src/Toast/Toaster.tsx

@@ -0,0 +1,21 @@
+import { Slide } from "react-toastify";
+
+import { ToasterStyled } from "./Toaster.styled";
+
+export const Toaster = () => {
+  return (
+    <ToasterStyled
+      position="top-right"
+      autoClose={5000}
+      hideProgressBar
+      newestOnTop
+      closeButton={false}
+      closeOnClick={false}
+      rtl={false}
+      draggable
+      pauseOnHover
+      transition={Slide}
+      limit={5}
+    />
+  );
+};

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

@@ -0,0 +1,3 @@
+export { Toaster } from "./Toaster";
+
+export { toasts } from "./toasts";

package/packages/shared-components/src/Toast/toasts.tsx

@@ -0,0 +1,28 @@
+import { toast as reactToast, type ToastOptions } from "react-toastify";
+import { Toast } from "./Toast";
+import type { ToastArgs, ToastsTypeFunctions, ToastType } from "./types";
+
+// eslint-disable-next-line sonarjs/function-return-type
+function createToast(
+  { title, description, href, linkText }: ToastArgs,
+  type: ToastType,
+  options?: ToastOptions
+) {
+  return reactToast(
+    <Toast
+      title={title}
+      description={description}
+      href={href}
+      linkText={linkText}
+      type={type}
+    />,
+    { ...options, icon: false, type }
+  );
+}
+
+export const toasts: ToastsTypeFunctions = {
+  info: (toast, options?) => createToast(toast, "info", options),
+  success: (toast, options?) => createToast(toast, "success", options),
+  warning: (toast, options?) => createToast(toast, "warning", options),
+  error: (toast, options?) => createToast(toast, "error", options),
+};

package/packages/shared-components/src/Toast/types.ts

@@ -0,0 +1,13 @@
+import type { ToastOptions, TypeOptions } from "react-toastify";
+
+export type ToastType = Exclude<TypeOptions, "default">;
+export type ToastBody = { title: string; description?: string };
+export type ToastLink = { href?: string; linkText?: string };
+export type ToastArgs = ToastBody & ToastLink;
+
+export type ToastsTypeFunctions = {
+  [K in ToastType]: (
+    _toast: ToastArgs,
+    _options?: Omit<ToastOptions, "type">
+  ) => string | number;
+};

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

@@ -0,0 +1,36 @@
+import type { TooltipProps as MuiTooltipProps } from "@mui/material";
+import { Box, Tooltip as MuiTooltip, Typography } from "@mui/material";
+import type { PropsWithChildren, ReactNode } from "react";
+
+type TooltipProps = PropsWithChildren<{
+  toolTipLabel: ReactNode;
+  placement?: MuiTooltipProps["placement"];
+}>;
+
+export const Tooltip = ({
+  toolTipLabel,
+  children,
+  placement = "top-start",
+  ...rest
+}: TooltipProps) => {
+  return (
+    <MuiTooltip arrow placement={placement} title={toolTipLabel} {...rest}>
+      {typeof children === "string" ? (
+        <Typography
+          variant="body2"
+          fontWeight={500}
+          sx={{
+            maxWidth: "150px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {children}
+        </Typography>
+      ) : (
+        <Box>{children}</Box>
+      )}
+    </MuiTooltip>
+  );
+};

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

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

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

@@ -0,0 +1,42 @@
+import type { CSSObject, IconButtonProps, MenuProps } from "@mui/material";
+
+import { IconButton, Menu, menuClasses } from "@mui/material";
+
+import { styled } from "@mui/material/styles";
+import type { ComponentType } from "react";
+
+export const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({
+  theme,
+}) => {
+  const style: CSSObject = {
+    [`& .${menuClasses.paper}`]: {
+      boxShadow: theme.palette.app.paperBoxShadow,
+      minWidth: "29rem",
+      width: "auto",
+      margin: "0 0.5rem",
+      borderRadius: "8px",
+      overflow: "visible",
+      "& .MuiList-root": {
+        padding: "0",
+        overflow: "visible",
+      },
+    },
+  };
+
+  return style;
+});
+
+export const IconButtonStyled: ComponentType<IconButtonProps> = styled(
+  IconButton,
+  {
+    shouldForwardProp: (prop) => prop !== "isOpened",
+  }
+)<{ isOpened?: boolean }>(() => {
+  const style: CSSObject = {
+    paddingInline: "0.3rem",
+    paddingBlock: "0.2rem",
+    borderRadius: "8px",
+  };
+
+  return style;
+});