@codezee/sixtify-brahma 0.2.2 → 0.2.6

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

@@ -4,10 +4,12 @@ import {
   Avatar,
   Box,
   Divider,
+  ListItemIcon,
   Menu,
   MenuItem,
   Stack,
   Typography,
+  useTheme,
 } from "@mui/material";
 import _isFunction from "lodash/isFunction";
 import {
@@ -40,6 +42,10 @@ export function UserProfileMenu({
 }: 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>) => {
@@ -51,25 +57,67 @@ export function UserProfileMenu({
   };
 
   return (
-    <Stack alignItems="center">
-      <IconButtonStyled size="small" onClick={handleClick} isOpened={open}>
-        <Stack direction="row" alignItems="center" gap={1} color="black">
-          <Avatar src={userDetails.avatar} />
-          <Typography>{userDetails.name}</Typography>
-          {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-        </Stack>
-      </IconButtonStyled>
-
+    <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": {
-            marginTop: "5px",
-            width: "290px",
+            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 }) => {
@@ -86,14 +134,27 @@ export function UserProfileMenu({
                 >
                   {(icon || label) && (
                     <Stack
-                      gap="1.2rem"
+                      gap="1px"
                       alignItems="center"
                       width="100%"
                       flexDirection="row"
                       sx={{ ...sx }}
                     >
-                      {icon}
-                      {label && <Typography>{label}</Typography>}
+                      <ListItemIcon
+                        sx={{
+                          minWidth: "20px",
+                          alignItems: "center",
+                          ...sx,
+                        }}
+                      >
+                        {icon}
+                      </ListItemIcon>
+
+                      {label && (
+                        <Typography sx={{ fontSize: "15px" }}>
+                          {label}
+                        </Typography>
+                      )}
                     </Stack>
                   )}
                 </MenuItem>
@@ -102,6 +163,6 @@ export function UserProfileMenu({
           }
         )}
       </Menu>
-    </Stack>
+    </Box>
   );
 }

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

@@ -4,21 +4,22 @@ 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";
-export * from "./Timeline";
-export * from "./Indicator";
-export * from "./FilterList";
-export * from "./Charts";
-export * from "./Stepper";

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

@@ -13,18 +13,23 @@ export type WorkDayType =
   | "paid_leave"
   | "absent"
   | "late_in_early_out"
-  | "unpaid_leave";
+  | "unpaid_leave"
+  | "loss_of_pay"
+  | "penalty";
 
 export type WorkDayTypeShort =
   | "P"
   | "H"
   | "WO"
   | "HO"
-  | "HWO"
+  | "FHWO"
+  | "SHWO"
   | "PL"
   | "A"
   | "LIEO"
-  | "UPL";
+  | "UPL"
+  | "PEN"
+  | "LOP";
 
 export const serverityOptions: Record<WorkDayType, WorkDayTypeShort> = {
   present: "P",
@@ -34,12 +39,14 @@ export const serverityOptions: Record<WorkDayType, WorkDayTypeShort> = {
   first_half_off: "HO",
   second_half_off: "HO",
   full_day_weekly_off: "WO",
-  first_half_weekly_off: "HWO",
-  second_half_weekly_off: "HWO",
+  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") => {
@@ -48,7 +55,8 @@ export const getColorByVariant = (variant: WorkDayType, type = "dark") => {
   const { darkMint, sapphireBlue, darkOrange, orchid, lipstickRed, deepAqua } =
     theme.palette.app.color;
 
-  const index = type === "dark" ? 900 : 600;
+  // eslint-disable-next-line sonarjs/no-nested-conditional
+  const index = type === "dark" ? (variant === "penalty" ? 800 : 900) : 600;
 
   switch (variant) {
     case "present":
@@ -90,6 +98,12 @@ export const getColorByVariant = (variant: WorkDayType, type = "dark") => {
     case "late_in_early_out":
       return lipstickRed[800];
 
+    case "loss_of_pay":
+      return lipstickRed[800];
+
+    case "penalty":
+      return lipstickRed[index];
+
     default:
       return lipstickRed[index];
   }
@@ -136,6 +150,12 @@ export const getStatusLabel = (status: WorkDayType) => {
     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

@@ -1,11 +1,25 @@
-import { DateTime } from "luxon";
+import { DateTime, Duration } from "luxon";
 
-export const dateFormat = (date: Date) => {
-  return DateTime.fromJSDate(date).toFormat("dd-MM-yyyy");
+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).toFormat(format);
+  const dateTime = DateTime.fromISO(date);
 
-  return dateTime;
+  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/index.ts

@@ -1,11 +1,9 @@
-export * from "./theme/theme";
-
-export * from "./file";
-
-export * from "./theme/colorPaletteUI";
-
-export * from "./colorVariant";
-
-export * from "./date";
-
-export * from "./urlToNestedObject";
+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

@@ -41,6 +41,7 @@ export const colorPalette: ColorPalette = {
     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)",
@@ -99,6 +100,7 @@ export const colorPalette: ColorPalette = {
   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%)",

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

@@ -283,6 +283,14 @@ export function appTheme(theme: PaletteMode): ThemeOptions {
           },
         ],
       },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            borderBottom: `1px solid ${palette.app.color.butterflyBlue[700]}`,
+            padding: "10px 16px",
+          },
+        },
+      },
     },
     spacing: 10,
   };