@codezee/sixtify-brahma 0.2.2 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.2",
+  "version": "0.2.6",
   "scripts": {
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx}\"",

package/packages/shared-components/src/Actions/ConfigureAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgConfigure } from "../Svgs";
+
+export type ConfigureActionProps = IconButtonProps;
+
+export const ConfigureAction = (props: ConfigureActionProps) => {
+  return (
+    <IconButton {...props}>
+      <SvgConfigure />
+    </IconButton>
+  );
+};

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

@@ -1,6 +1,7 @@
+export * from "./AddAction";
 export * from "./CalendarAction";
+export * from "./ConfigureAction";
 export * from "./DeleteAction";
 export * from "./DownloadAction";
 export * from "./EditAction";
 export * from "./HistoryAction";
-export * from "./AddAction";

package/packages/shared-components/src/AgGrid/ActionCell/ActionCell.tsx

@@ -11,8 +11,9 @@ type AgGridActionColumn = {
 
 type ActionColumnProps = {
   items: AgGridActionColumn[];
+  disabled?: boolean;
 };
-export const ActionCell = ({ items }: ActionColumnProps) => {
+export const ActionCell = ({ items, disabled }: ActionColumnProps) => {
   const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
 
   const HandleClose = () => {
@@ -29,6 +30,7 @@ export const ActionCell = ({ items }: ActionColumnProps) => {
         component="div"
         sx={{ cursor: "pointer", alignItems: "center", width: "100%" }}
         onClick={HandleClick}
+        disabled={disabled}
       >
         <MoreVertIcon />
       </IconButton>

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

@@ -4,7 +4,9 @@ import { AgGridReact } from "ag-grid-react";
 import type { Ref } from "react";
 import { forwardRef } from "react";
 
-export const defaultPageSize = 25;
+export const defaultPageSize = 50;
+
+export const pageSizeOptions = [20, 50, 100, 200];
 
 //TODO: jaydip, fix unknown type
 export type AgGridProps<T = unknown> = AgGridReactProps<T> & {
@@ -38,6 +40,7 @@ export const AgGrid = forwardRef(
       // eslint-disable-next-line quotes
       overlayNoRowsTemplate = '<span class="ag-overlay-no-rows-center">No Data Found</span>',
       infiniteInitialRowCount = defaultPageSize,
+      pagination = false,
       ...rest
     } = props;
 
@@ -77,6 +80,9 @@ export const AgGrid = forwardRef(
           rowBuffer={rowBuffer}
           infiniteInitialRowCount={infiniteInitialRowCount}
           overlayNoRowsTemplate={overlayNoRowsTemplate}
+          pagination={pagination}
+          {...(pagination ? { paginationPageSize: defaultPageSize } : {})}
+          paginationPageSizeSelector={pagination ? pageSizeOptions : false}
           {...rest}
         />
       </div>

package/packages/shared-components/src/Card/ProfileCard/ProfileCard.tsx

@@ -29,7 +29,7 @@ export function ProfileCard({
       height="400px"
       onClick={onClick}
     >
-      <PadBox padding={{ padding: "5px" }}>
+      <PadBox padding={{ padding: "10px" }}>
         <Stack height="100%" justifyContent="space-between">
           {header}
           {body}

package/packages/shared-components/src/Card/ProfileCard/ProfileCardItem/ProfileCardBody.tsx

@@ -1,8 +1,8 @@
-import CallOutlinedIcon from "@mui/icons-material/CallOutlined";
-import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
 import { Box, Stack } from "@mui/material";
 import type { PropsWithChildren } from "react";
 import { PadBox } from "../../../PadBox";
+import { SvgEmail } from "../../../Svgs/SvgEmail";
+import { SvgPhone } from "../../../Svgs/SvgPhone";
 import { CardItem, CardItemValue } from "../../CardItem";
 
 type ProfileCardBodyProps = PropsWithChildren<{
@@ -39,11 +39,11 @@ export function ProfileCardBody({
             value={<CardItemValue title={subDepartment} loading={loading} />}
           />
           <CardItem
-            label={<EmailOutlinedIcon />}
+            label={<SvgEmail />}
             value={<CardItemValue title={email} loading={loading} />}
           />
           <CardItem
-            label={<CallOutlinedIcon />}
+            label={<SvgPhone />}
             value={<CardItemValue title={phone} loading={loading} />}
           />
         </Stack>

package/packages/shared-components/src/Card/ProfileCard/ProfileCardItem/ProfileCardHeader.tsx

@@ -82,7 +82,7 @@ export function ProfileCardHeader({
               WebkitBoxOrient: "vertical",
             }}
             width="330px"
-            fontWeight="600"
+            fontWeight="500"
             textAlign="center"
           >
             {employeeName ?? "-"}

package/packages/shared-components/src/Charts/PieChart.tsx

@@ -1,14 +1,17 @@
-import type { ReactNode } from "react";
-import type { PieChartProps as MuiPieChartProps } from "@mui/x-charts/PieChart";
-import { PieChart as MuiPieChart } from "@mui/x-charts/PieChart";
+import { styled } from "@mui/material/styles";
 import type { PieSeriesType, PieValueType } from "@mui/x-charts";
-import type { MakeOptional } from "@mui/x-charts/internals";
 import { useDrawingArea } from "@mui/x-charts/hooks";
-import { styled } from "@mui/material/styles";
+import type { MakeOptional } from "@mui/x-charts/internals";
+import type { PieChartProps as MuiPieChartProps } from "@mui/x-charts/PieChart";
+import { PieChart as MuiPieChart } from "@mui/x-charts/PieChart";
+import type { ReactNode } from "react";
+import { Skeleton } from "./Skeleton";
 
 type PieChartProps = Omit<MuiPieChartProps, "series"> & {
   series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, "id">>, "type">;
   label?: string;
+  valueFormatter?: (item: { value: number }) => string;
+  loading?: boolean;
 };
 
 type PieCenterLabelProps = {
@@ -18,14 +21,13 @@ type PieCenterLabelProps = {
 export const PieChart = ({
   height = 235,
   skipAnimation = false,
+  loading = false,
+  valueFormatter = (item: MakeOptional<PieValueType, "id">) => `${item.value}%`,
   tooltip,
   label,
   series,
   ...rest
 }: PieChartProps) => {
-  const valueFormatter = (item: MakeOptional<PieValueType, "id">) =>
-    `${item.value}%`;
-
   const StyledText = styled("text")(({ theme }) => ({
     fill: theme.palette.text.primary,
     textAnchor: "middle",
@@ -33,6 +35,12 @@ export const PieChart = ({
     fontSize: 20,
   }));
 
+  const outerRadius = Number(series.outerRadius ?? 0);
+
+  const innerRadius = Number(series.innerRadius ?? 0);
+
+  const radius = outerRadius - innerRadius;
+
   // eslint-disable-next-line sonarjs/no-unstable-nested-components
   const PieCenterLabel = ({ children }: PieCenterLabelProps) => {
     const { width, height, left, top } = useDrawingArea();
@@ -44,6 +52,10 @@ export const PieChart = ({
     );
   };
 
+  if (loading) {
+    return <Skeleton height={height} radius={radius} />;
+  }
+
   return (
     <MuiPieChart
       height={height}

package/packages/shared-components/src/Charts/Skeleton.tsx

@@ -0,0 +1,36 @@
+import { Box, Skeleton as MuiSkeleton } from "@mui/material";
+
+export const Skeleton = ({
+  height = 235,
+  radius = 18,
+}: {
+  height?: string | number;
+  radius?: number;
+}) => {
+  return (
+    <Box position="relative" display="flex" justifyContent="center">
+      <MuiSkeleton
+        sx={{
+          transform: "unset",
+          width: "162px",
+          height: { height },
+          borderRadius: "50%",
+          border: `${radius}px solid #e0e0e0`,
+          background: "transparent",
+          boxSizing: "border-box",
+        }}
+      />
+
+      <MuiSkeleton
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "80px",
+          height: "25px",
+        }}
+      />
+    </Box>
+  );
+};

package/packages/shared-components/src/Drawer/Bullet.tsx

@@ -4,7 +4,7 @@ export const Bullet = () => {
     <CircleIcon
       className="bullet-hover"
       sx={{
-        fontSize: "7px",
+        fontSize: "6px",
         borderRadius: "50%",
       }}
     />

package/packages/shared-components/src/Drawer/CloseDrawer/CloseDrawerMenuItem.tsx

@@ -29,21 +29,28 @@ export const CloseDrawerMenuItem = ({
       component="li"
       sx={{
         bgcolor: selected && !isShowEndAdornment ? butterflyBlue[900] : "",
+        padding: !title ? "2.5px 0" : "0px",
+        wordBreak: "break-word",
       }}
     >
       <MenuItem
         sx={{
+          fontSize: "14px",
+          padding: "9.5px 16px",
           ":focus-visible": {
             border: `1px solid ${butterflyBlue[900]}`,
             backgroundColor: slate[900],
           },
+          margin: "0",
         }}
         selected={selected}
         title={title}
         icon={icon}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
-        endAdornment={isShowEndAdornment && <ChevronRight />}
+        endAdornment={
+          isShowEndAdornment && <ChevronRight sx={{ fontSize: "16px" }} />
+        }
       />
     </Box>
   );

package/packages/shared-components/src/Drawer/CloseDrawer/CloseDrawerMenuItemList.tsx

@@ -1,7 +1,8 @@
+import { Box } from "@mui/material";
 import { isEmpty as _isEmpty } from "lodash";
 import {
-  type MouseEvent,
   type HTMLAttributeAnchorTarget,
+  type MouseEvent,
   useMemo,
   useState,
 } from "react";
@@ -9,7 +10,10 @@ import { v4 as uuidv4 } from "uuid";
 import { urlToNestedObject } from "../../utils/urlToNestedObject";
 import type { MenuItem } from "../Drawer";
 import { CloseDrawerMenuItem } from "./CloseDrawerMenuItem";
-import { CloseDrawerSubMenuItemList } from "./CloseDrawerSubMenuItemList";
+import {
+  CloseDrawerSubMenuItemList,
+  type MenuOpenState,
+} from "./CloseDrawerSubMenuItemList";
 import { Popper } from "./Popper";
 
 type CloseDrawerMenuItemListProps = {
@@ -27,9 +31,9 @@ export const CloseDrawerMenuItemList = ({
 
   const [currentMenuIndex, setCurrentMenuIndex] = useState<number>(0);
 
-  const [currentPathMenuOpen, setCurrentPathMenuOpen] = useState<
-    Record<string, unknown>
-  >({});
+  const [currentPathMenuOpen, setCurrentPathMenuOpen] = useState<MenuOpenState>(
+    {}
+  );
 
   useMemo(() => {
     const obj = urlToNestedObject(currentPathname);
@@ -86,7 +90,7 @@ export const CloseDrawerMenuItemList = ({
       })}
 
       {!!anchorEl && (
-        <div onMouseLeave={handleClose}>
+        <Box onMouseLeave={handleClose}>
           <Popper
             open={true}
             anchorEl={anchorEl}
@@ -98,7 +102,7 @@ export const CloseDrawerMenuItemList = ({
               onCloseMenuPopover={handleClose}
             />
           </Popper>
-        </div>
+        </Box>
       )}
     </>
   );

package/packages/shared-components/src/Drawer/CloseDrawer/CloseDrawerSubMenuItemList.tsx

@@ -1,125 +1,124 @@
 import { Box, List } from "@mui/material";
 import {
-  type HTMLAttributeAnchorTarget,
   useState,
+  type HTMLAttributeAnchorTarget,
   type MouseEvent,
 } from "react";
-import type { MenuItem } from "../Drawer";
+import { type MenuItem } from "../Drawer";
 import { CloseDrawerMenuItem } from "./CloseDrawerMenuItem";
 import { Popper } from "./Popper";
 
-type CloseDrawerSubMenuItemListProps = {
-  //TODO: jaydip, fix unknown type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  currentPathMenuOpen: any;
-  currentMenuItem?: MenuItem;
+export type MenuOpenState = {
+  [key: string]: MenuOpenState | boolean;
+};
+
+type RecursiveMenuItemProps = {
+  item: MenuItem;
+  parentPath: string;
+  currentPathMenuOpen: MenuOpenState;
   onCloseMenuPopover: () => void;
+  level?: number;
 };
 
-export const CloseDrawerSubMenuItemList = ({
+const RecursiveMenuItem = ({
+  item,
+  parentPath,
   currentPathMenuOpen,
-  currentMenuItem,
   onCloseMenuPopover,
-}: CloseDrawerSubMenuItemListProps) => {
-  const [openPopoverIndex, setOpenPopoverIndex] = useState<number | null>(null);
+  level = 0,
+}: RecursiveMenuItemProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
 
-  const [anchorEls, setAnchorEls] = useState<(HTMLDivElement | null)[]>([]);
+  const isOpen = Boolean(anchorEl);
 
-  const handlePopoverOpen = (
-    event: MouseEvent<HTMLDivElement>,
-    index: number
-  ) => {
-    const newAnchorEls = [...anchorEls];
-
-    newAnchorEls[index] = event.currentTarget;
-    setAnchorEls(newAnchorEls);
-
-    setOpenPopoverIndex(index);
+  const handlePopoverOpen = (event: MouseEvent<HTMLDivElement>) => {
+    if (item.menuItems?.length) {
+      setAnchorEl(event.currentTarget);
+    }
   };
 
   const handleClose = () => {
-    setAnchorEls([]);
-    setOpenPopoverIndex(null);
+    setAnchorEl(null);
+  };
+
+  const handleClick = (target: HTMLAttributeAnchorTarget = "_self") => {
+    const fullPath = `${parentPath}/${item.key}`;
+
+    if (item.onClick) {
+      item.onClick(fullPath, target);
+
+      if (target !== "_blank") {
+        handleClose();
+        onCloseMenuPopover();
+      }
+    }
   };
 
+  const isSelected = Boolean(currentPathMenuOpen[item.key]);
+
+  const currentPath = `${parentPath}/${item.key}`;
+
+  return (
+    <Box onMouseLeave={handleClose}>
+      <CloseDrawerMenuItem
+        onClick={handleClick}
+        title={item.title}
+        icon={item.icon}
+        isShowEndAdornment={Boolean(item.menuItems?.length)}
+        selected={isSelected}
+        onMouseEnter={handlePopoverOpen}
+      />
+
+      {item.menuItems?.length && isOpen && (
+        <Popper open={true} anchorEl={anchorEl} currentMenuIndex={level}>
+          <List disablePadding>
+            {item.menuItems.map((subItem) => (
+              <RecursiveMenuItem
+                key={subItem.key}
+                item={subItem}
+                parentPath={currentPath}
+                currentPathMenuOpen={
+                  (currentPathMenuOpen[item.key] as MenuOpenState) ?? {}
+                }
+                onCloseMenuPopover={onCloseMenuPopover}
+                level={level + 1}
+              />
+            ))}
+          </List>
+        </Popper>
+      )}
+    </Box>
+  );
+};
+
+type CloseDrawerSubMenuItemListProps = {
+  currentPathMenuOpen: MenuOpenState;
+  currentMenuItem?: MenuItem;
+  onCloseMenuPopover: () => void;
+};
+
+export const CloseDrawerSubMenuItemList = ({
+  currentPathMenuOpen,
+  currentMenuItem,
+  onCloseMenuPopover,
+}: CloseDrawerSubMenuItemListProps) => {
   if (!currentMenuItem) {
     return <>Loading...</>;
   }
 
-  const { menuItems = [], key: rootKey } = currentMenuItem;
-
   return (
-    <List>
-      {menuItems.map(
-        ({ title, key: key2, onClick, icon, menuItems = [] }, index) => {
-          const handleClick = (target: HTMLAttributeAnchorTarget = "_self") => {
-            if (onClick) {
-              onClick(`/${rootKey}/${key2}`, target);
-
-              if (target != "_blank") {
-                onCloseMenuPopover();
-              }
-            }
-          };
-
-          const onMouseEnter = (event: MouseEvent<HTMLDivElement>) => {
-            if (menuItems.length > 0) {
-              handlePopoverOpen(event, index);
-            } else {
-              handleClose();
-            }
-          };
-
-          const isMenuSelected = !!currentPathMenuOpen?.[rootKey]?.[key2];
-
-          return (
-            <Box key={key2}>
-              <div onMouseLeave={handleClose}>
-                <CloseDrawerMenuItem
-                  onClick={handleClick}
-                  title={title}
-                  icon={icon}
-                  isShowEndAdornment={!!menuItems.length}
-                  selected={isMenuSelected}
-                  onMouseEnter={onMouseEnter}
-                />
-                {menuItems.length > 0 && openPopoverIndex === index && (
-                  <Popper
-                    open={true}
-                    anchorEl={anchorEls[index]}
-                    currentMenuIndex={0}
-                  >
-                    <List>
-                      {menuItems.map(({ key: key3, title, onClick }) => {
-                        const isMenuSelected =
-                          !!currentPathMenuOpen[rootKey]?.[key2]?.[key3];
-
-                        return (
-                          <CloseDrawerMenuItem
-                            key={key3}
-                            onClick={(target = "_self") => {
-                              if (onClick) {
-                                onClick(`/${rootKey}/${key2}/${key3}`, target);
-
-                                if (target != "_blank") {
-                                  handleClose();
-                                  onCloseMenuPopover();
-                                }
-                              }
-                            }}
-                            title={title}
-                            selected={isMenuSelected}
-                          />
-                        );
-                      })}
-                    </List>
-                  </Popper>
-                )}
-              </div>
-            </Box>
-          );
-        }
-      )}
+    <List disablePadding>
+      {currentMenuItem.menuItems?.map((item) => (
+        <RecursiveMenuItem
+          key={item.key}
+          item={item}
+          parentPath={`/${currentMenuItem.key}`}
+          currentPathMenuOpen={
+            (currentPathMenuOpen[currentMenuItem.key] as MenuOpenState) ?? {}
+          }
+          onCloseMenuPopover={onCloseMenuPopover}
+        />
+      ))}
     </List>
   );
 };

package/packages/shared-components/src/Drawer/CloseDrawer/Popper.tsx

@@ -25,15 +25,15 @@ export const Popper = ({
           name: "offset",
           options: {
             offset: [
-              currentMenuIndex ? 79 : 200,
-              currentMenuIndex ? currentMenuIndex * 36 + 82 : -56,
+              currentMenuIndex ? 79 : 203,
+              currentMenuIndex ? currentMenuIndex * 43.5 + 82 : -40,
             ],
           },
         },
       ]}
       sx={{
         background: mirage[900],
-        width: "200px",
+        width: "203px",
         zIndex: 1300,
       }}
     >

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

@@ -2,7 +2,7 @@
 
 import { Box } from "@mui/material";
 import List from "@mui/material/List";
-import type { ReactNode, HTMLAttributeAnchorTarget } from "react";
+import type { HTMLAttributeAnchorTarget, ReactNode } from "react";
 import { PadBox } from "../PadBox";
 import { AppLogoMedium } from "../Svgs/AppLogo/AppLogoMedium";
 import { AppLogoSmall } from "../Svgs/AppLogo/AppLogoSmall";

package/packages/shared-components/src/Drawer/MenuItem.tsx

@@ -3,9 +3,9 @@ import {
   ListItemText,
   Stack,
   useTheme,
+  type ListItemButtonProps,
   type SxProps,
   type Theme,
-  type ListItemButtonProps,
 } from "@mui/material";
 import type { HTMLAttributeAnchorTarget, ReactNode } from "react";
 import { Bullet } from "./Bullet";
@@ -61,7 +61,13 @@ export const MenuItem = ({
         justifyContent="center"
       >
         {icon}
-        {title && <ListItemText primary={title} />}
+        {title && (
+          <ListItemText
+            primary={title}
+            disableTypography={true}
+            sx={{ ...sx, padding: "0" }}
+          />
+        )}
       </Stack>
       {endAdornment}
     </ListItemButton>