@codezee/sixtify-brahma 0.2.2 → 0.2.6

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

@@ -2,7 +2,7 @@
 
 import { Box, List, useTheme } from "@mui/material";
 import { isEmpty as _isEmpty } from "lodash";
-import { useEffect, useState } from "react";
+import { type HTMLAttributeAnchorTarget, useEffect, useState } from "react";
 import { urlToNestedObject } from "../../utils/urlToNestedObject";
 import type { MenuItem } from "../Drawer";
 import { OpenDrawerCollapse } from "./OpenDrawerCollapse";
@@ -13,24 +13,164 @@ type OpenDrawerMenuItemListProps = {
   currentPathname: string;
 };
 
-export const OpenDrawerMenuItemList = ({
-  menuItems,
-  currentPathname,
-}: OpenDrawerMenuItemListProps) => {
-  //TODO: jaydip, fix this type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [subMenusOpen, setSubMenusOpen] = useState<Record<string, any>>({});
+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 [currentPathMenuOpen, setCurrentPathMenuOpen] = useState<
-    //TODO: jaydip, fix this type
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Record<string, any>
-  >({});
+  const first = path[0];
 
+  if (!first) {
+    return false;
+  }
+
+  const rest = path.slice(1);
+
+  const nextState = state[first];
+
+  if (rest.length === 0) {
+    return Boolean(nextState);
+  }
+
+  return getNestedMenuState(nextState as NestedMenuState, rest);
+};
+
+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, onClick, menuItems = [] } = menuItem;
+
+  const currentPath = parentPath ? `${parentPath}/${key}` : key;
+
+  const pathArray = currentPath.split("/");
+
+  const isMenuSelected = isMenuOpen(subMenusOpen, 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] = !isMenuSelected;
+        }
+
+        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}
+      />
+
+      {menuItems.length > 0 && (
+        <OpenDrawerCollapse in={isMenuSelected}>
+          <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 obj = urlToNestedObject(currentPathname);
 
@@ -45,205 +185,13 @@ export const OpenDrawerMenuItemList = ({
     setCurrentPathMenuOpen(obj);
   }, [currentPathname]);
 
-  return menuItems.map((menuItem) => {
-    const { menuItems = [], key: key1, icon, title, onClick } = menuItem;
-
-    const isMenuSelected = !!subMenusOpen?.[key1];
-
-    if (menuItems.length > 0) {
-      return (
-        <Box key={key1}>
-          <OpenDrawerMenuItem
-            sx={{
-              ":focus-visible": {
-                border: `1px solid ${butterflyBlue[900]}`,
-                backgroundColor: slate[900],
-              },
-            }}
-            onClick={() => {
-              setSubMenusOpen((prev) => ({
-                ...prev,
-                [key1]: !isMenuSelected,
-              }));
-            }}
-            icon={icon}
-            title={title}
-            isShowEndAdornment
-            selected={isMenuSelected}
-            key={key1}
-          />
-
-          <OpenDrawerCollapse in={isMenuSelected}>
-            <List component="div" disablePadding key={key1}>
-              {menuItems.map(
-                ({ key: key2, onClick, title, menuItems = [] }) => {
-                  const isSubMenuSelected = menuItems.length
-                    ? !!subMenusOpen?.[key1]?.[key2] ||
-                      !!currentPathMenuOpen?.[key1]?.[key2]?.menuItems
-                    : !!subMenusOpen?.[key1]?.[key2] ||
-                      !!currentPathMenuOpen?.[key1]?.[key2];
-
-                  return (
-                    <Box
-                      sx={{
-                        bgcolor:
-                          isSubMenuSelected && menuItems.length === 0
-                            ? butterflyBlue[900]
-                            : "",
-                      }}
-                      key={key2}
-                    >
-                      {menuItems.length > 0 ? (
-                        <>
-                          <OpenDrawerMenuItem
-                            sx={{
-                              paddingLeft: 4.5,
-                              ":focus-visible": {
-                                border: `1px solid ${butterflyBlue[900]}`,
-                                backgroundColor: slate[900],
-                              },
-                            }}
-                            onClick={() => {
-                              // eslint-disable-next-line sonarjs/no-nested-functions
-                              setSubMenusOpen((prev) => ({
-                                ...prev,
-                                [key1]: {
-                                  ...(prev?.[key1] || {}),
-                                  [key2]: !isSubMenuSelected,
-                                },
-                              }));
-                            }}
-                            key={key2}
-                            title={title}
-                            isShowEndAdornment
-                            selected={isSubMenuSelected}
-                          />
-                          <OpenDrawerCollapse in={isSubMenuSelected}>
-                            <List component="div" disablePadding key={key2}>
-                              {menuItems.map(
-                                ({ key: key3, title, onClick }) => {
-                                  const menuSelectedItem =
-                                    !!subMenusOpen[key1]?.[key2]?.[key3] ||
-                                    !!currentPathMenuOpen[key1]?.[key2]?.[key3];
-
-                                  return (
-                                    <Box
-                                      sx={{
-                                        bgcolor: menuSelectedItem
-                                          ? theme.palette.app.color
-                                              .butterflyBlue[900]
-                                          : "",
-                                      }}
-                                      key={key3}
-                                    >
-                                      <OpenDrawerMenuItem
-                                        sx={
-                                          menuSelectedItem
-                                            ? {
-                                                paddingLeft: menuItems.length
-                                                  ? 7.5
-                                                  : 4.5,
-                                              }
-                                            : {
-                                                paddingLeft: menuItems.length
-                                                  ? 7.5
-                                                  : 4.5,
-                                                ":focus-visible": {
-                                                  border: `1px solid ${butterflyBlue[900]}`,
-                                                  backgroundColor:
-                                                    theme.palette.app.color
-                                                      .slate[900],
-                                                },
-                                              }
-                                        }
-                                        // eslint-disable-next-line sonarjs/no-nested-functions
-                                        onClick={(target) => {
-                                          if (onClick && !menuSelectedItem) {
-                                            onClick(
-                                              `/${key1}/${key2}/${key3}`,
-                                              target
-                                            );
-                                            setSubMenusOpen((prev) => ({
-                                              ...prev,
-                                              [key2]: {
-                                                ...(prev?.[key2] || {}),
-                                                [key3]: !menuSelectedItem,
-                                              },
-                                            }));
-                                          }
-                                        }}
-                                        key={key3}
-                                        title={title}
-                                        selected={menuSelectedItem}
-                                      />
-                                    </Box>
-                                  );
-                                }
-                              )}
-                            </List>
-                          </OpenDrawerCollapse>
-                        </>
-                      ) : (
-                        <OpenDrawerMenuItem
-                          sx={
-                            isSubMenuSelected
-                              ? { paddingLeft: 4.5 }
-                              : {
-                                  paddingLeft: 4.5,
-                                  ":focus-visible": {
-                                    border: `1px solid ${butterflyBlue[900]}`,
-                                    backgroundColor: slate[900],
-                                  },
-                                }
-                          }
-                          onClick={(target) => {
-                            if (onClick && !isSubMenuSelected) {
-                              onClick(`/${key1}/${key2}`, target);
-                            }
-                          }}
-                          key={key2}
-                          title={title}
-                          selected={isSubMenuSelected}
-                        />
-                      )}
-                    </Box>
-                  );
-                }
-              )}
-            </List>
-          </OpenDrawerCollapse>
-        </Box>
-      );
-    }
-
-    return (
-      <OpenDrawerMenuItem
-        sx={
-          isMenuSelected
-            ? {}
-            : {
-                ":focus-within": {
-                  border: `1px solid ${butterflyBlue[900]}`,
-                  backgroundColor: slate[900],
-                },
-              }
-        }
-        onClick={(target) => {
-          if (onClick && !isMenuSelected) {
-            if (key1 === "home") {
-              onClick("/", target);
-
-              return;
-            }
-
-            onClick(`/${key1}`, target);
-          }
-        }}
-        key={key1}
-        icon={icon}
-        selected={isMenuSelected}
-        title={title}
-      />
-    );
-  });
+  return menuItems.map((menuItem) => (
+    <MenuItemRecursive
+      key={menuItem.key}
+      menuItem={menuItem}
+      subMenusOpen={subMenusOpen}
+      setSubMenusOpen={setSubMenusOpen}
+      currentPathMenuOpen={currentPathMenuOpen}
+    />
+  ));
 };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { ExpandMore } from "@mui/icons-material";
 import {
   Accordion,
   AccordionDetails,
@@ -11,23 +11,25 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import type { FilterListType } from "./FilterTypeWrapper";
-import {
-  FilterPopupWrapper,
-  GetFilterPopupComponent,
-} from "./FilterPopupWrapper";
+import { ClearIcon } from "@mui/x-date-pickers/icons";
+import { isEmpty } from "lodash";
+import { DateTime } from "luxon";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { FieldValues } from "react-hook-form";
 import { useForm, useWatch } from "react-hook-form";
-import { SvgFilterList } from "../Svgs/SvgFilterList";
-import { ExpandMore } from "@mui/icons-material";
+import { Button } from "../Button";
+import { FilterPill } from "../Chips/FilterPill";
+import { dateFormats } from "../FormFields";
 import { Switch } from "../FormFields/Switch";
 import { PadBox } from "../PadBox";
-import { Button } from "../Button";
-import { ClearIcon } from "@mui/x-date-pickers/icons";
+import { SvgFilterList } from "../Svgs/SvgFilterList";
 import { Tooltip } from "../Tooltip";
-import { FilterPill } from "../Chips/FilterPill";
+import {
+  FilterPopupWrapper,
+  GetFilterPopupComponent,
+} from "./FilterPopupWrapper";
+import type { FilterListType } from "./FilterTypeWrapper";
 import { getFormValue } from "./getFormData";
-import { isEmpty } from "lodash";
 
 export type FilterListV2Props = {
   filterListItems: FilterListType[];
@@ -37,6 +39,7 @@ export type FilterListV2Props = {
   onChange: (data: FieldValues, isPopup: boolean) => void;
   onClear: () => void;
   resetFormBasedOnFields?: string;
+  dateKeys?: string[];
 };
 export const FilterListV2 = ({
   filterListItems,
@@ -45,6 +48,7 @@ export const FilterListV2 = ({
   onApply,
   onClear,
   onChange,
+  dateKeys,
 }: FilterListV2Props) => {
   const theme = useTheme();
 
@@ -170,7 +174,14 @@ export const FilterListV2 = ({
 
       const item = getFilterItem(key);
 
-      const keyValue = item && getFormValue(value, item);
+      const keyValue =
+        item &&
+        getFormValue(
+          dateKeys?.includes(item?.key)
+            ? DateTime.fromISO(value).toFormat(dateFormats.dateWithEuropean)
+            : value,
+          item
+        );
 
       if (!keyValue) {
         return;

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

@@ -1,3 +1,5 @@
 export * from "./FilterPopup";
 export * from "./FilterList";
 export * from "./FilterListV2";
+export * from "./FilterTypeWrapper";
+export * from "./FilterPopupWrapper";

package/packages/shared-components/src/FormFields/Autocomplete/Autocomplete.tsx

@@ -16,18 +16,21 @@ import {
   useTheme,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { useMemo, useRef, type KeyboardEvent } from "react";
+import { useMemo, useRef, useState, type KeyboardEvent } from "react";
 import {
+  useController,
   type ControllerRenderProps,
   type FieldValues,
   type UseControllerProps,
-  useController,
 } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { EditAction } from "../../Actions";
-import { Skeleton } from "./Skeleton";
+import { toasts } from "../../Toast";
 import { BoxStyled, CheckStyled } from "../CheckBox/CheckBox.styled";
+import { Skeleton } from "./Skeleton";
 
 export type Option = {
+  heading?: string;
   label: string;
   value: string | number;
   disabled?: boolean;
@@ -41,6 +44,7 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> &
     Omit<
       MuiAutocompleteProps<
         {
+          heading?: string;
           label: string;
           value: string | number;
           disabled?: boolean;
@@ -60,11 +64,14 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> &
     label?: string;
     helperText?: string;
     error?: boolean;
+    withLabel?: boolean;
     placeholder?: string;
     isShowAvatar?: boolean;
     shouldCloseOnSelect?: boolean;
     onAction?: () => void;
     isShowSelectAll?: boolean;
+    isShowOptionsOnType?: boolean;
+    maxLimit?: number;
     renderOption?: (
       props: React.HTMLProps<HTMLLIElement>,
       option: Option,
@@ -86,20 +93,27 @@ export function Autocomplete<P extends FieldValues>({
   loading = false,
   helperText,
   error,
+  withLabel = false,
   placeholder = "",
   freeSolo,
+  isShowOptionsOnType = false,
   isShowSelectAll = true,
   isShowAvatar = false,
   shouldCloseOnSelect = false,
   onAction,
   renderOption,
   getOptionLabel,
+  maxLimit,
   ...restProps
 }: AutocompleteProps<P>) {
   const {
     field: { onChange, value, ...restField },
   } = useController({ name, control, defaultValue, rules });
 
+  const { t } = useTranslation();
+
+  const [inputValue, setInputValue] = useState("");
+
   const handleSelectAll = (isSelected: boolean) => {
     if (isSelected) {
       const allValues = options.map((option) => option.value);
@@ -130,6 +144,16 @@ export function Autocomplete<P extends FieldValues>({
     ];
   }, [multiple, isShowSelectAll, options]);
 
+  const filteredOptions = useMemo(() => {
+    if (inputValue.length < 3) {
+      return [];
+    }
+
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+  }, [inputValue]);
+
   // eslint-disable-next-line sonarjs/function-return-type
   const selectedValue = useMemo(() => {
     if (multiple && freeSolo) {
@@ -140,6 +164,8 @@ export function Autocomplete<P extends FieldValues>({
           return selectedOption ? selectedOption.label : val.toString();
         }) || []
       );
+    } else if (withLabel) {
+      return options.find((option) => option.value === value?.value) ?? null;
     } else if (multiple) {
       return options.filter((option) => value?.includes(option.value));
     } else if (!options.find((option) => option.value === value) && freeSolo) {
@@ -176,6 +202,19 @@ export function Autocomplete<P extends FieldValues>({
     },
   }));
 
+  const GroupHeader = styled("div")(({ theme }) => ({
+    position: "sticky",
+    padding: "4px 10px",
+    fontSize: "16px",
+    fontWeight: 500,
+    color: theme.palette.app.color.butterflyBlue[900],
+    backgroundColor: theme.palette.app.color.butterflyBlue[500],
+  }));
+
+  const GroupItems = styled("ul")({
+    padding: 0,
+  });
+
   if (loading) {
     return <Skeleton label={label} />;
   }
@@ -193,6 +232,14 @@ export function Autocomplete<P extends FieldValues>({
         }
 
         if (selectedValue && Array.isArray(selectedValue)) {
+          if (maxLimit && selectedValue.length >= maxLimit) {
+            toasts.error({
+              title: t("common.autocomplete.limitExceed", { maxLimit }),
+            });
+
+            return;
+          }
+
           const valuesArray = selectedValue.map((item) => item.value);
 
           if (valuesArray.includes(highlightedOptionRef.current)) {
@@ -339,15 +386,25 @@ export function Autocomplete<P extends FieldValues>({
                   ...params.InputProps,
                   startAdornment,
                 }}
+                onChange={(e) => {
+                  if (isShowOptionsOnType) {
+                    setInputValue(e.target.value);
+                  }
+                }}
                 onKeyDown={(e) => handleKeyDown(e)}
               />
             );
           }}
           multiple={multiple}
-          options={memoizedOptions}
+          options={isShowOptionsOnType ? filteredOptions : memoizedOptions}
           isOptionEqualToValue={(option, value) =>
             freeSolo ? false : option.value === value.value
           }
+          onInputChange={(_, __, reason) => {
+            if (reason === "clear") {
+              setInputValue("");
+            }
+          }}
           getOptionLabel={(option) => {
             if (getOptionLabel) {
               return getOptionLabel(option);
@@ -360,7 +417,25 @@ export function Autocomplete<P extends FieldValues>({
             return option.label;
           }}
           value={selectedValue}
+          // eslint-disable-next-line sonarjs/cognitive-complexity
           onChange={(_, newValue) => {
+            if (withLabel) {
+              return onChange(newValue);
+            }
+
+            if (
+              multiple &&
+              Array.isArray(newValue) &&
+              maxLimit &&
+              newValue.length > maxLimit
+            ) {
+              toasts.error({
+                title: t("common.autocomplete.limitExceed", { maxLimit }),
+              });
+
+              return;
+            }
+
             if (multiple && isShowSelectAll && Array.isArray(newValue)) {
               const isSelectAllIncluded = newValue.some(
                 (option) =>
@@ -406,6 +481,13 @@ export function Autocomplete<P extends FieldValues>({
 
             onChange(newValue ? newValue.value : null);
           }}
+          groupBy={(option) => option.heading ?? ""}
+          renderGroup={(params) => (
+            <li key={params.key}>
+              <GroupHeader>{params.group}</GroupHeader>
+              <GroupItems>{params.children}</GroupItems>
+            </li>
+          )}
           getOptionDisabled={(option) => !!option.disabled}
         />