@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,75 @@
+import {
+  ListItemButton,
+  ListItemText,
+  Stack,
+  useTheme,
+  type ListItemButtonProps,
+  type SxProps,
+  type Theme,
+} from "@mui/material";
+import type { HTMLAttributeAnchorTarget, ReactNode } from "react";
+import { Bullet } from "./Bullet";
+
+export type MenuItemProps = Omit<ListItemButtonProps, "onClick"> & {
+  icon?: ReactNode;
+  endAdornment?: ReactNode;
+  title?: string;
+  sx?: SxProps<Theme>;
+  onClick: (target?: HTMLAttributeAnchorTarget) => void;
+};
+
+export const MenuItem = ({
+  selected = false,
+  icon = <Bullet />,
+  title,
+  endAdornment,
+  sx,
+  onClick,
+  ...props
+}: MenuItemProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue, iron } = theme.palette.app.color;
+
+  return (
+    <ListItemButton
+      {...props}
+      onClick={(e) => onClick(e.ctrlKey ? "_blank" : "_self")}
+      onMouseDown={(e) => {
+        e.preventDefault();
+
+        if (e.button === 1) {
+          onClick("_blank");
+        }
+      }}
+      sx={{
+        ...sx,
+        color: selected ? iron[600] : theme.palette.primary.light,
+        ":hover": {
+          color: iron[600],
+          ".bullet-hover": {
+            color: selected ? "" : butterflyBlue[900],
+          },
+        },
+      }}
+    >
+      <Stack
+        alignItems="center"
+        direction="row"
+        flex={1}
+        gap="10px"
+        justifyContent="center"
+      >
+        {icon}
+        {title && (
+          <ListItemText
+            primary={title}
+            disableTypography={true}
+            sx={{ ...sx, padding: "0" }}
+          />
+        )}
+      </Stack>
+      {endAdornment}
+    </ListItemButton>
+  );
+};

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

@@ -0,0 +1,13 @@
+import { Collapse, type CollapseProps } from "@mui/material";
+import type { PropsWithChildren } from "react";
+
+export const OpenDrawerCollapse = ({
+  children,
+  ...rest
+}: PropsWithChildren<CollapseProps>) => {
+  return (
+    <Collapse timeout="auto" unmountOnExit {...rest}>
+      {children}
+    </Collapse>
+  );
+};

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

@@ -0,0 +1,48 @@
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import type { SxProps, Theme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
+import { Bullet } from "../Bullet";
+import { MenuItem, type MenuItemProps } from "../MenuItem";
+
+type OpenDrawerMenuItemProps = {
+  icon?: MenuItemProps["icon"];
+  title: MenuItemProps["title"];
+  isShowEndAdornment?: boolean;
+  selected?: MenuItemProps["selected"];
+  onClick: MenuItemProps["onClick"];
+  sx?: SxProps<Theme>;
+  isExpanded?: boolean;
+};
+
+export const OpenDrawerMenuItem = ({
+  icon = <Bullet />,
+  title,
+  isShowEndAdornment = false,
+  selected = false,
+  onClick,
+  isExpanded,
+  sx,
+}: OpenDrawerMenuItemProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  return (
+    <Box
+      sx={{
+        bgcolor: selected && !isShowEndAdornment ? butterflyBlue[900] : "",
+      }}
+    >
+      <MenuItem
+        sx={sx}
+        title={title}
+        icon={icon}
+        onClick={onClick}
+        selected={selected}
+        endAdornment={
+          isShowEndAdornment && (isExpanded ? <ExpandLess /> : <ExpandMore />)
+        }
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,232 @@
+"use client";
+
+import { Box, List, useTheme } from "@mui/material";
+import { isEmpty as _isEmpty } from "lodash";
+import { type HTMLAttributeAnchorTarget, useEffect, useState } from "react";
+import { urlToNestedObject } from "../../utils/urlToNestedObject";
+import type { MenuItem } from "../Drawer";
+import { OpenDrawerCollapse } from "./OpenDrawerCollapse";
+import { OpenDrawerMenuItem } from "./OpenDrawerMenuItem";
+
+type OpenDrawerMenuItemListProps = {
+  menuItems: MenuItem[];
+  currentPathname: string;
+};
+
+export type NestedMenuState = {
+  [K in MenuItem["key"]]?:
+    | boolean
+    | {
+        [SubK in MenuItem["key"]]?: boolean | NestedMenuState;
+      };
+};
+
+type MenuItemRecursiveProps = {
+  menuItem: MenuItem;
+  level?: number;
+  parentPath?: string;
+  subMenusOpen: NestedMenuState;
+  setSubMenusOpen: (
+    value: NestedMenuState | ((prev: NestedMenuState) => NestedMenuState)
+  ) => void;
+  currentPathMenuOpen: NestedMenuState;
+};
+
+const getNestedMenuState = (state: NestedMenuState, path: string[]) => {
+  if (path.length === 0) {
+    return false;
+  }
+
+  if (typeof state !== "object") {
+    return false;
+  }
+
+  const [first, ...rest] = path;
+
+  if (!first) {
+    return false;
+  }
+
+  const nextState = state[first];
+
+  if (rest.length === 0) {
+    return Boolean(nextState);
+  }
+
+  return getNestedMenuState(nextState as NestedMenuState, rest);
+};
+
+export const isPathInCurrentSelection = (
+  state: NestedMenuState,
+  path: string[]
+): boolean => {
+  const result = path.reduce<unknown>((acc, segment) => {
+    if (typeof acc !== "object" || acc === null || !(segment in acc)) {
+      return undefined;
+    }
+
+    return (acc as Record<string, unknown>)[segment];
+  }, state);
+
+  if (result === true) {
+    return true;
+  }
+
+  return !!(
+    typeof result === "object" &&
+    result !== null &&
+    Object.values(result).every((v) => v === true)
+  );
+};
+
+export const isMenuOpen = (state: NestedMenuState, path: string[]) => {
+  const value = getNestedMenuState(state, path);
+
+  return Boolean(value);
+};
+
+export const MenuItemRecursive = ({
+  menuItem,
+  level = 0,
+  parentPath = "",
+  subMenusOpen,
+  setSubMenusOpen,
+  currentPathMenuOpen,
+}: MenuItemRecursiveProps) => {
+  const theme = useTheme();
+
+  if (level === 3) {
+    return;
+  }
+
+  const { butterflyBlue, slate } = theme.palette.app.color;
+
+  const { key, icon, title, isView, onClick, menuItems = [] } = menuItem;
+
+  if (isView === false) {
+    return;
+  }
+
+  const currentPath = parentPath ? `${parentPath}/${key}` : key;
+
+  const pathArray = currentPath.split("/");
+
+  const isMenuExpanded = isMenuOpen(subMenusOpen, pathArray);
+
+  const isMenuSelected = isPathInCurrentSelection(
+    currentPathMenuOpen,
+    pathArray
+  );
+
+  const dynamicPadding = level * 3 + 1.5;
+
+  const handleClick = (target?: HTMLAttributeAnchorTarget) => {
+    if (menuItems.length > 0) {
+      setSubMenusOpen((prev) => {
+        const newState = { ...prev };
+
+        let current = newState;
+
+        for (let i = 0; i < pathArray.length - 1; i++) {
+          const segment = pathArray[i];
+
+          if (!segment) {
+            continue;
+          }
+
+          current[segment] =
+            typeof current[segment] === "object" ? current[segment] : {};
+          current = current[segment] as NestedMenuState;
+        }
+
+        const lastSegment = pathArray[pathArray.length - 1];
+
+        if (lastSegment) {
+          current[lastSegment] = !isMenuExpanded;
+        }
+
+        return newState;
+      });
+    } else if (onClick && !isMenuSelected) {
+      const path = key === "home" ? "/" : `/${currentPath}`;
+
+      onClick(path, target);
+    }
+  };
+
+  return (
+    <Box key={key}>
+      <OpenDrawerMenuItem
+        sx={{
+          paddingLeft: dynamicPadding,
+          ":focus-visible": {
+            border: `1px solid ${butterflyBlue[900]}`,
+            backgroundColor: slate[900],
+          },
+        }}
+        onClick={handleClick}
+        icon={level === 0 ? icon : undefined}
+        title={title}
+        isShowEndAdornment={menuItems.length > 0 && level < 2}
+        selected={isMenuSelected}
+        isExpanded={isMenuExpanded}
+      />
+
+      {menuItems.length > 0 && (
+        <OpenDrawerCollapse in={isMenuExpanded}>
+          <List component="div" disablePadding>
+            {menuItems.map((subMenuItem) => (
+              <MenuItemRecursive
+                key={subMenuItem.key}
+                menuItem={subMenuItem}
+                level={level + 1}
+                parentPath={currentPath}
+                subMenusOpen={subMenusOpen}
+                setSubMenusOpen={setSubMenusOpen}
+                currentPathMenuOpen={currentPathMenuOpen}
+              />
+            ))}
+          </List>
+        </OpenDrawerCollapse>
+      )}
+    </Box>
+  );
+};
+
+export const OpenDrawerMenuItemList = ({
+  menuItems,
+  currentPathname,
+}: OpenDrawerMenuItemListProps) => {
+  const [subMenusOpen, setSubMenusOpen] = useState<NestedMenuState>({});
+
+  const [currentPathMenuOpen, setCurrentPathMenuOpen] =
+    useState<NestedMenuState>({});
+
+  useEffect(() => {
+    const navObj = urlToNestedObject(currentPathname);
+
+    if (_isEmpty(navObj)) {
+      setSubMenusOpen({ home: true });
+      setCurrentPathMenuOpen({ home: true });
+
+      return;
+    }
+
+    const subState = JSON.parse(JSON.stringify(navObj));
+
+    const selState = JSON.parse(JSON.stringify(navObj));
+
+    setSubMenusOpen(subState);
+    setCurrentPathMenuOpen(selState);
+  }, [currentPathname]);
+
+  return menuItems.map((menuItem) => (
+    <MenuItemRecursive
+      key={menuItem.key}
+      menuItem={menuItem}
+      subMenusOpen={subMenusOpen}
+      setSubMenusOpen={setSubMenusOpen}
+      currentPathMenuOpen={currentPathMenuOpen}
+    />
+  ));
+};

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

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

package/packages/shared-components/src/FilterList/DateRangePickerPopUp.tsx

@@ -0,0 +1,123 @@
+import type { PopoverProps } from "@mui/material";
+import {
+  Box,
+  Divider,
+  IconButton,
+  Popover,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { ClearIcon } from "@mui/x-date-pickers";
+import { isFunction } from "lodash";
+import { type PropsWithChildren } from "react";
+import { Button } from "../Button";
+import { PadBox } from "../PadBox";
+
+type DateRangePickerPopUpProps = Partial<
+  PropsWithChildren<PopoverProps> & {
+    onApply: () => void;
+    showFooter: boolean;
+    showDivider: boolean;
+    title: string;
+    required: boolean;
+    background: boolean;
+    open: boolean;
+  }
+>;
+
+export const DateRangePickerPopUp = ({
+  open = false,
+  anchorEl,
+  onClose,
+  children,
+  onApply,
+  showDivider = false,
+  showFooter = true,
+  title,
+  required,
+  background = false,
+}: DateRangePickerPopUpProps) => {
+  const theme = useTheme();
+
+  const { slate } = theme.palette.app.color;
+
+  const handleApply = () => {
+    if (isFunction(onApply)) {
+      onApply();
+    }
+  };
+
+  const handleClose = () => {
+    if (isFunction(onClose)) {
+      onClose({}, "backdropClick");
+    }
+  };
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      onClose={(_event, reason) => {
+        if (reason === "backdropClick") {
+          return;
+        }
+        handleClose();
+      }}
+      sx={{ "& .MuiPaper-root": { minWidth: "300px" } }}
+    >
+      {showDivider && (
+        <Stack alignItems="flex-end">
+          <PadBox padding={{ padding: "8px" }}>
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              width="100%"
+              alignItems="center"
+            >
+              <Stack direction="row" alignItems="center" gap="5px">
+                <Typography variant="h6">{title} </Typography>
+
+                {required && (
+                  <Typography variant="h6" color="error">
+                    *
+                  </Typography>
+                )}
+              </Stack>
+
+              <IconButton onClick={handleClose}>
+                <ClearIcon />
+              </IconButton>
+            </Stack>
+          </PadBox>
+
+          <Divider sx={{ width: "100%" }} />
+        </Stack>
+      )}
+
+      <Box
+        sx={{
+          background: background ? slate[600] : "transparent",
+          borderRadius: "5px",
+        }}
+      >
+        {children}
+      </Box>
+
+      {showFooter && (
+        <PadBox padding={{ padding: "10px" }}>
+          <Box display="flex" justifyContent="flex-end">
+            <Button
+              onClick={handleApply}
+              variant="text"
+              sx={{ maxWidth: "40px" }}
+            >
+              Submit
+            </Button>
+          </Box>
+        </PadBox>
+      )}
+    </Popover>
+  );
+};

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

@@ -0,0 +1,180 @@
+import { Box, IconButton, Stack } from "@mui/material";
+import React, { useRef, useState } from "react";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Button } from "../Button";
+import { FilterPill } from "../Chips/FilterPill";
+import { SvgFilterList } from "../Svgs/SvgFilterList";
+import { Tooltip } from "../Tooltip";
+import { FilterPopup } from "./FilterPopup";
+import { FilterPopupWrapper } from "./FilterPopupWrapper";
+import type { FilterListType } from "./FilterTypeWrapper";
+import { FilterTypeWrapper } from "./FilterTypeWrapper";
+import { getFormValue } from "./getFormData";
+
+export type FilterListProps = {
+  filterListItems: FilterListType[];
+};
+export const FilterList = ({ filterListItems }: FilterListProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const filterPopupAnchorElm = useRef<HTMLDivElement | null>(null);
+
+  const [openFilterPopup, setOpenFilterPopup] = useState(false);
+
+  const [filterListData, setFilterListData] = useState<FieldValues>();
+
+  const [currentFilter, setCurrentFilter] = useState<null | FilterListType>(
+    null
+  );
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors },
+    watch,
+  } = useForm();
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const onSubmit = (data: FieldValues) => {
+    setOpenFilterPopup(false);
+    setCurrentFilter(null);
+    handleClose();
+
+    setFilterListData(data);
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseFilterPopup = () => {
+    setOpenFilterPopup(false);
+  };
+
+  const handleFilterItemClick = (filter: FilterListType) => {
+    setOpenFilterPopup(true);
+    setAnchorEl(null);
+    setCurrentFilter(filter);
+  };
+
+  const handlerReset = () => {
+    reset();
+    setFilterListData(undefined);
+  };
+
+  const handleDelete = (key: string) => {
+    setValue(`${key}`, null);
+    setFilterListData((prevData) => {
+      const newData = { ...prevData };
+
+      delete newData[key];
+
+      return newData;
+    });
+  };
+
+  const getFilterItem = (key: string) => {
+    return filterListItems.find((item) => item.key === key);
+  };
+
+  const currentFilterValue = currentFilter?.key
+    ? watch(currentFilter.key)
+    : null;
+
+  const open = Boolean(anchorEl);
+
+  const renderChips = (data: FieldValues) => {
+    return Object.entries(data).map(([key, value]) => {
+      if (!value) {
+        return;
+      }
+
+      const item = getFilterItem(key);
+
+      const keyValue = item && getFormValue(value, item);
+
+      return (
+        <FilterPill
+          ref={filterPopupAnchorElm}
+          key={key}
+          label={
+            <Tooltip
+              toolTipLabel={`${keyValue}`}
+            >{`${item?.label}: ${keyValue}`}</Tooltip>
+          }
+          onDelete={() => handleDelete(key)}
+          onClick={(e: { currentTarget: HTMLDivElement | null }) => {
+            setOpenFilterPopup(true);
+            filterPopupAnchorElm.current = e.currentTarget;
+
+            const item = getFilterItem(key);
+
+            if (item) {
+              setCurrentFilter(item);
+              handleFilterItemClick(item);
+            }
+          }}
+        />
+      );
+    });
+  };
+
+  return (
+    <Stack>
+      <Stack direction="row" spacing={1} alignItems="center">
+        {filterListData && renderChips(filterListData)}
+        <IconButton
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={filterPopupAnchorElm as any}
+          onClick={handleClick}
+          sx={{ height: "40px" }}
+        >
+          <SvgFilterList />
+        </IconButton>
+        <Button onClick={() => handlerReset()} variant="text">
+          Clear Filter
+        </Button>
+      </Stack>
+      <FilterPopup
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        onApply={() => {
+          handleSubmit(onSubmit)();
+        }}
+      >
+        {filterListItems.map((filter) => (
+          <Box
+            key={filter.key}
+            onClick={() =>
+              filter.type !== "switch" && handleFilterItemClick(filter)
+            }
+          >
+            <FilterTypeWrapper filter={filter} control={control} />
+          </Box>
+        ))}
+      </FilterPopup>
+
+      {currentFilter && currentFilter.type !== "switch" && (
+        <FilterPopupWrapper
+          open={openFilterPopup}
+          onClose={handleCloseFilterPopup}
+          onApply={() => {
+            handleSubmit(onSubmit)();
+          }}
+          control={control}
+          currentFilterValue={currentFilterValue}
+          anchorEl={filterPopupAnchorElm.current}
+          filterItem={currentFilter}
+          errors={errors}
+        />
+      )}
+    </Stack>
+  );
+};