@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,168 @@
+import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
+import type { MenuProps } from "@mui/material";
+import {
+  Avatar,
+  Box,
+  Divider,
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import _isFunction from "lodash/isFunction";
+import {
+  useState,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import { IconButtonStyled } from "./UserProfileMenu.styled";
+
+export type UserProfileMenuProps = Omit<MenuProps, "open" | "closeMenu"> & {
+  userDetails: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+  menuItems: {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    divider?: boolean;
+    sx?: CSSProperties;
+    onClick?: () => void;
+  }[];
+};
+
+export function UserProfileMenu({
+  userDetails,
+  menuItems,
+}: UserProfileMenuProps) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const theme = useTheme();
+
+  const { iron } = theme.palette.app.color;
+
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Box position="relative">
+      <Box sx={{ display: "flex", alignItems: "center", textAlign: "center" }}>
+        <IconButtonStyled
+          onClick={handleClick}
+          size="small"
+          sx={{ ml: 2 }}
+          aria-controls={open ? "account-menu" : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? "true" : undefined}
+        >
+          <Stack direction="row" alignItems="center" gap={1} color="black">
+            <Avatar
+              src={userDetails.avatar}
+              sx={{ border: `1px solid ${iron[700]}` }}
+            />
+            <Typography>{userDetails.name}</Typography>
+            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+          </Stack>
+        </IconButtonStyled>
+      </Box>
+      <Menu
+        anchorEl={anchorEl}
+        id="account-menu"
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        sx={{
+          "& .MuiPaper-root": {
+            width: "220px",
+          },
+        }}
+        slotProps={{
+          paper: {
+            elevation: 0,
+            sx: {
+              overflow: "visible",
+              filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+              mt: 1.5,
+              "& .MuiAvatar-root": {
+                width: 32,
+                height: 32,
+                ml: -0.5,
+                mr: 1,
+              },
+              "&::before": {
+                content: "''",
+                display: "block",
+                position: "absolute",
+                top: 0,
+                right: 14,
+                width: 10,
+                height: 10,
+                bgcolor: "background.paper",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 0,
+              },
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: "right", vertical: "top" }}
+        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+      >
+        {menuItems.map(
+          ({ divider = false, onClick, icon, label, sx = {}, key }) => {
+            return (
+              <Box key={`${key}_container`}>
+                {divider && <Divider />}
+
+                <MenuItem
+                  onClick={() => {
+                    if (_isFunction(onClick)) {
+                      onClick();
+                    }
+                  }}
+                >
+                  {(icon || label) && (
+                    <Stack
+                      gap="1px"
+                      alignItems="center"
+                      width="100%"
+                      flexDirection="row"
+                      sx={{ ...sx }}
+                    >
+                      <ListItemIcon
+                        sx={{
+                          minWidth: "20px",
+                          alignItems: "center",
+                          ...sx,
+                        }}
+                      >
+                        {icon}
+                      </ListItemIcon>
+
+                      {label && (
+                        <Typography sx={{ fontSize: "15px" }}>
+                          {label}
+                        </Typography>
+                      )}
+                    </Stack>
+                  )}
+                </MenuItem>
+              </Box>
+            );
+          }
+        )}
+      </Menu>
+    </Box>
+  );
+}

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

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

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

@@ -0,0 +1,25 @@
+export * from "./Actions";
+export * from "./AgGrid";
+export * from "./AppBar";
+export * from "./Breadcrumbs";
+export * from "./Button";
+export * from "./Card";
+export * from "./Charts";
+export * from "./Chips";
+export * from "./Dialog";
+export * from "./Drawer";
+export * from "./FilterList";
+export * from "./FormFields";
+export * from "./Indicator";
+export * from "./Layouts";
+export * from "./Loader";
+export * from "./PadBox";
+export * from "./Pagination";
+export * from "./Stepper";
+export * from "./Svgs";
+export * from "./Tab";
+export * from "./Timeline";
+export * from "./Toast";
+export * from "./Tooltip";
+export * from "./UserProfileMenu";
+export * from "./utils";

package/packages/shared-components/src/utils/colorVariant.ts

@@ -0,0 +1,162 @@
+import { useTheme } from "@mui/material";
+
+export type WorkDayType =
+  | "present"
+  | "holiday"
+  | "weekly_off"
+  | "working"
+  | "first_half_off"
+  | "second_half_off"
+  | "full_day_weekly_off"
+  | "first_half_weekly_off"
+  | "second_half_weekly_off"
+  | "paid_leave"
+  | "absent"
+  | "late_in_early_out"
+  | "unpaid_leave"
+  | "loss_of_pay"
+  | "penalty";
+
+export type WorkDayTypeShort =
+  | "P"
+  | "H"
+  | "WO"
+  | "HO"
+  | "FHWO"
+  | "SHWO"
+  | "PL"
+  | "A"
+  | "LIEO"
+  | "UPL"
+  | "PEN"
+  | "LOP";
+
+export const serverityOptions: Record<WorkDayType, WorkDayTypeShort> = {
+  present: "P",
+  holiday: "H",
+  weekly_off: "WO",
+  working: "P",
+  first_half_off: "HO",
+  second_half_off: "HO",
+  full_day_weekly_off: "WO",
+  first_half_weekly_off: "FHWO",
+  second_half_weekly_off: "SHWO",
+  paid_leave: "PL",
+  absent: "A",
+  unpaid_leave: "UPL",
+  late_in_early_out: "LIEO",
+  loss_of_pay: "LOP",
+  penalty: "PEN",
+};
+
+export const getColorByVariant = (variant: WorkDayType, type = "dark") => {
+  const theme = useTheme();
+
+  const { darkMint, sapphireBlue, darkOrange, orchid, lipstickRed, deepAqua } =
+    theme.palette.app.color;
+
+  // eslint-disable-next-line sonarjs/no-nested-conditional
+  const index = type === "dark" ? (variant === "penalty" ? 800 : 900) : 600;
+
+  switch (variant) {
+    case "present":
+      return darkMint[index];
+
+    case "working":
+      return darkMint[index];
+
+    case "holiday":
+      return sapphireBlue[index];
+
+    case "weekly_off":
+      return darkOrange[index];
+
+    case "full_day_weekly_off":
+      return darkOrange[index];
+
+    case "first_half_weekly_off":
+      return darkOrange[index];
+
+    case "second_half_weekly_off":
+      return darkOrange[index];
+
+    case "paid_leave":
+      return orchid[index];
+
+    case "absent":
+      return lipstickRed[index];
+
+    case "first_half_off":
+      return lipstickRed[index];
+
+    case "second_half_off":
+      return lipstickRed[index];
+
+    case "unpaid_leave":
+      return deepAqua[index];
+
+    case "late_in_early_out":
+      return lipstickRed[800];
+
+    case "loss_of_pay":
+      return lipstickRed[800];
+
+    case "penalty":
+      return lipstickRed[index];
+
+    default:
+      return lipstickRed[index];
+  }
+};
+
+export const getStatusLabel = (status: WorkDayType) => {
+  switch (status) {
+    case "present":
+      return "Present";
+
+    case "absent":
+      return "Absent";
+
+    case "weekly_off":
+      return "Weekly Off";
+
+    case "working":
+      return "Working";
+
+    case "holiday":
+      return "Holiday";
+
+    case "paid_leave":
+      return "Paid Leave";
+
+    case "unpaid_leave":
+      return "Unpaid Leave";
+
+    case "first_half_weekly_off":
+      return "First Half Weekly Off";
+
+    case "second_half_weekly_off":
+      return "Second Half Weekly Off";
+
+    case "first_half_off":
+      return "First Half Off";
+
+    case "second_half_off":
+      return "Second Half Off";
+
+    case "full_day_weekly_off":
+      return "Weekly Off";
+
+    case "late_in_early_out":
+      return "Late In/Early Out";
+
+    case "loss_of_pay":
+      return "Loss of Pay";
+
+    case "penalty":
+      return "Penalty";
+
+    default:
+      return "Absent";
+  }
+};

package/packages/shared-components/src/utils/date.ts

@@ -0,0 +1,25 @@
+import { DateTime, Duration } from "luxon";
+
+export const formatDate = (date: string, format: string = "dd-MM-yyyy") => {
+  return DateTime.fromISO(date).toFormat(format);
+};
+
+export const getTimeInHHmm = (date: string, format: string = "HH:mm") => {
+  const dateTime = DateTime.fromISO(date);
+
+  if (!dateTime.isValid) {
+    return "";
+  }
+
+  return dateTime.toFormat(format);
+};
+
+export const getDifferenceInHHmmss = (startTime: string, endTime: string) => {
+  const start = DateTime.fromISO(startTime);
+
+  const end = DateTime.fromISO(endTime);
+
+  const diff = end.diff(start, ["hours", "minutes", "seconds"]);
+
+  return Duration.fromObject(diff.toObject()).toFormat("hh:mm:ss");
+};

package/packages/shared-components/src/utils/file.ts

@@ -0,0 +1,22 @@
+const SUPPORTED_FILE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "application/pdf",
+  "application/zip",
+  "application/msword",
+  "application/x-zip-compressed",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel",
+];
+
+export const isFileSizeValid = (file: File, maxSizeMB: number) => {
+  const maxSizeInBytes = maxSizeMB * 1024 * 1024;
+
+  return file.size <= maxSizeInBytes;
+};
+
+export const isFileTypeValid = (file: File) => {
+  return SUPPORTED_FILE_TYPES.includes(file.type);
+};

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

@@ -0,0 +1,11 @@
+export * from "./theme/theme";
+
+export * from "./theme/colorPaletteUI";
+
+export * from "./colorVariant";
+
+export * from "./date";
+
+export * from "./file";
+
+export * from "./urlToNestedObject";

package/packages/shared-components/src/utils/theme/colorPalette.ts

@@ -0,0 +1,112 @@
+import type { Color } from "@mui/material";
+
+export type ColorShades = Partial<Color>;
+
+export type ColorPalette = {
+  lightSlateBlue: ColorShades;
+  lipstickRed: ColorShades;
+  darkOrange: ColorShades;
+  deepAqua: ColorShades;
+  sapphireBlue: ColorShades;
+  darkMint: ColorShades;
+  butterflyBlue: ColorShades;
+  orchid: ColorShades;
+  mirage: ColorShades;
+  iron: ColorShades;
+  slate: ColorShades;
+  red: ColorShades;
+  lightBlue: ColorShades;
+  black: ColorShades;
+};
+
+export const colorPalette: ColorPalette = {
+  iron: {
+    900: "hsla(0, 0%, 49%, 1)",
+    800: "hsla(0, 0%, 67%, 1)", // disabled color
+    700: "hsla(0, 0%, 85%, 1)",
+    600: "hsla(0, 0%, 100%, 1)", // white
+    500: "hsla(218, 15%, 59%, 1)",
+    400: "hsla(0, 0%, 18%, 1)",
+    300: "hsla(0, 0%, 0%, 0.35)", // shadow color
+  },
+  slate: {
+    900: "hsla(212, 19%, 37%, 1)", // info
+    800: "hsl(210, 20%, 96%)",
+    700: "hsl(193, 22%, 92%)",
+    600: "	hsl(0, 0%, 98%)",
+    500: "hsl(0, 0%, 49%)",
+  },
+  mirage: {
+    900: "hsla(224, 35%, 12%, 1)", // primary
+    800: "hsla(230, 90%, 3%, 0.08)",
+    700: "hsla(226, 34%, 15%, 1)",
+    600: "hsla(0, 0%, 22%, 0.7)",
+    500: "hsla(0, 0%, 18%, 1)",
+  },
+  lightSlateBlue: {
+    900: "hsla(234, 99%, 68%, 1)",
+    800: "hsla(234, 98%, 81%, 1)",
+    700: "hsla(233, 100%, 94%, 1)",
+    600: "hsla(236, 100%, 97%, 1)",
+  },
+  lipstickRed: {
+    900: "hsla(349, 90%, 41%, 1)",
+    800: "hsla(350, 63%, 64%, 1)",
+    700: "hsla(349, 66%, 87%, 1)",
+    600: "hsla(348, 100%, 95%, 1)",
+  },
+  darkOrange: {
+    900: "hsla(32, 100%, 52%, 1)", //warning
+    800: "hsla(32, 100%, 71%, 1)",
+    700: "hsla(33, 100%, 90%, 1)",
+    600: "hsla(33, 100%, 95%, 1)",
+  },
+  deepAqua: {
+    900: "hsla(183, 87%, 27%, 1)",
+    800: "hsla(184, 50%, 68%, 1)",
+    700: "hsla(183, 68%, 79%, 1)",
+    600: "hsla(183, 85%, 95%, 1)",
+  },
+  sapphireBlue: {
+    900: "hsla(223, 59%, 49%, 1)",
+    800: "hsla(223, 56%, 69%, 1)",
+    700: "hsla(222, 58%, 90%, 1)",
+    600: "hsla(223, 54%, 95%, 1)",
+    500: "hsl(216, 100%, 91%)",
+    400: "	hsl(217, 100%, 95%)",
+    300: "	hsl(193, 22%, 92%)",
+  },
+  darkMint: {
+    900: "hsla(136, 59%, 49%, 1)",
+    800: "hsla(136, 56%, 69%, 1)",
+    700: "hsla(136, 58%, 90%, 1)",
+    600: "hsla(133, 54%, 95%, 1)",
+  },
+  butterflyBlue: {
+    900: "hsla(203, 79%, 57%, 1)", //secondary
+    800: "hsla(204, 79%, 74%, 1)",
+    700: "hsl(204, 16%, 88%)",
+    600: "hsla(209, 83%, 91%, 1)",
+    500: "hsla(203, 82%, 96%, 1)",
+    400: "hsla(208, 25%, 66%, 1)", //primary.light
+    300: "hsla(207, 17%, 88%, 1)",
+  },
+  orchid: {
+    900: "hsla(295, 60%, 66%, 1)",
+    800: "hsla(295, 61%, 80%, 1)",
+    700: "hsla(297, 60%, 93%, 1)",
+    600: "hsla(295, 65%, 97%, 1)",
+  },
+  red: {
+    900: "hsla(0, 90%, 47%, 1)", //error
+    800: "hsla(0, 73%, 59%, 1)",
+    700: "hsla(0, 81%, 37%, 1)",
+  },
+  lightBlue: {
+    100: "hsla(193, 4%, 92%)",
+    50: "hsla(193, 0%, 100%)",
+  },
+  black: {
+    900: "hsl(0, 0%, 0%)",
+  },
+};

package/packages/shared-components/src/utils/theme/colorPaletteUI.tsx

@@ -0,0 +1,44 @@
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { colorPalette } from "./colorPalette";
+
+const ColorSwatch = ({ color, shade }: { color: string; shade: string }) => {
+  return (
+    <Tooltip title={color}>
+      <Box
+        sx={{
+          width: 80,
+          height: 40,
+          backgroundColor: color,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          border: "1px solid #e0e0e0",
+          color: "black",
+          fontSize: "12px",
+        }}
+      >
+        {shade}
+      </Box>
+    </Tooltip>
+  );
+};
+
+export const colorPaletteUI = () => {
+  return (
+    <Stack spacing={4} sx={{ padding: 4 }}>
+      {Object.entries(colorPalette).map(([name, shades]) => (
+        <Stack key={name} spacing={2}>
+          <Typography variant="h6" sx={{ textTransform: "capitalize" }}>
+            {name.replace(/([A-Z])/g, " $1")}
+          </Typography>
+
+          <Stack direction="row" spacing={0}>
+            {Object.entries(shades).map(([shade, color]) => (
+              <ColorSwatch key={shade} shade={shade} color={color} />
+            ))}
+          </Stack>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};

package/packages/shared-components/src/utils/theme/paletteDark.ts

@@ -0,0 +1,10 @@
+import { colorPalette } from "./colorPalette";
+
+export const darkPalette = {
+  app: {
+    color: colorPalette,
+    paperBoxShadow:
+      "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+  },
+  divider: colorPalette.butterflyBlue[700],
+};

package/packages/shared-components/src/utils/theme/paletteLight.ts

@@ -0,0 +1,31 @@
+import { type PaletteOptions } from "@mui/material";
+import { colorPalette } from "./colorPalette";
+
+export const lightPalette: PaletteOptions = {
+  common: {
+    black: "hsla(0, 100%, 0%, 1)",
+    white: "hsla(0, 100%, 100%, 1)",
+  },
+  primary: {
+    main: colorPalette.mirage[900] as string,
+    light: colorPalette.butterflyBlue[400],
+  },
+  secondary: {
+    main: colorPalette.butterflyBlue[900] as string,
+  },
+  info: {
+    main: colorPalette.slate[900] as string,
+  },
+  error: {
+    main: colorPalette.red[900] as string,
+  },
+  warning: {
+    main: colorPalette.darkOrange[900] as string,
+  },
+  app: {
+    color: colorPalette,
+    paperBoxShadow:
+      "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+  },
+  divider: colorPalette.butterflyBlue[700],
+};