@codezee/sixtify-brahma 0.2.3 → 0.2.6

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,20 @@
+const SUPPORTED_FILE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "application/pdf",
+  "application/msword",
+  "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/fileSizeValidate.ts

@@ -0,0 +1,5 @@
+export const isFileSizeValid = (file: File, maxSizeMB: number) => {
+  const maxSizeInBytes = maxSizeMB * 1024 * 1024;
+
+  return file.size <= maxSizeInBytes;
+};

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

@@ -0,0 +1,9 @@
+export * from "./theme/theme";
+
+export * from "./theme/colorPaletteUI";
+
+export * from "./colorVariant";
+
+export * from "./date";
+
+export * from "./fileSizeValidate";

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],
+};