@codezee/sixtify-brahma 0.2.3 → 0.2.6

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

@@ -0,0 +1,113 @@
+import { type PropsWithChildren } from "react";
+import { FilterPopup } from "./FilterPopup";
+import type { FilterListType } from "./FilterTypeWrapper";
+import {
+  Autocomplete,
+  DatePicker,
+  DateRangePicker,
+  TextField,
+} from "../FormFields";
+import { useTheme, type PopoverProps } from "@mui/material";
+import type { Control, FieldValues } from "react-hook-form";
+import { PadBox } from "../PadBox";
+
+type FilterPopupWrapperProp = PropsWithChildren<PopoverProps> & {
+  filterItem: FilterListType;
+  control: Control<FieldValues>;
+  currentFilterValue?: string | string[] | null;
+  onApply: () => void;
+};
+
+export type FilterPopupComponentType = {
+  autoComplete?: JSX.Element;
+  text: JSX.Element;
+  date: JSX.Element;
+  checkbox?: JSX.Element;
+  dateRange?: JSX.Element;
+  switch?: JSX.Element;
+  radio?: JSX.Element;
+};
+
+export const GetFilterPopupComponent = (
+  selectedFilter: FilterListType,
+  control: Control<FieldValues>
+): FilterPopupComponentType => {
+  const theme = useTheme();
+
+  const { sapphireBlue, black } = theme.palette.app.color;
+
+  return {
+    autoComplete: selectedFilter.options && (
+      <Autocomplete
+        disableClearable
+        multiple={selectedFilter.multiSelect ?? false}
+        placeholder={`Select ${selectedFilter.label}`}
+        name={`${selectedFilter.key}`}
+        disabled={selectedFilter.isDisabled}
+        shouldCloseOnSelect={selectedFilter.multiSelect ?? false}
+        control={control}
+        options={selectedFilter.options ?? []}
+        sx={{
+          maxHeight: "250px",
+          overflowY: "auto",
+          width: "100%",
+          "& .MuiAutocomplete-tag": {
+            backgroundColor: sapphireBlue[300],
+            color: black[900],
+          },
+        }}
+      />
+    ),
+    text: (
+      <TextField
+        name={selectedFilter.key}
+        control={control}
+        disabled={selectedFilter.isDisabled}
+        placeholder={selectedFilter.label}
+      />
+    ),
+    date: (
+      <DatePicker
+        name={selectedFilter.key}
+        control={control}
+        disabled={selectedFilter.isDisabled}
+      />
+    ),
+    dateRange: (
+      <DateRangePicker
+        name={selectedFilter.key}
+        control={control}
+        disabled={selectedFilter.isDisabled}
+      />
+    ),
+  };
+};
+
+export const FilterPopupWrapper = ({
+  open,
+  anchorEl,
+  filterItem,
+  onClose,
+  control,
+  onApply,
+  currentFilterValue,
+}: FilterPopupWrapperProp) => {
+  return (
+    <FilterPopup
+      title={filterItem.label}
+      filterItem={filterItem}
+      open={open}
+      onClose={onClose}
+      anchorEl={anchorEl}
+      onApply={onApply}
+      currentFilterValue={currentFilterValue}
+      showFooter
+      showDivider
+      background
+    >
+      <PadBox padding={{ padding: "10px" }}>
+        {GetFilterPopupComponent(filterItem, control)[filterItem.type]}
+      </PadBox>
+    </FilterPopup>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { ListItemButton, Stack, Typography } from "@mui/material";
+import { Switch } from "../FormFields/Switch";
+import type { Control, FieldValues } from "react-hook-form";
+
+export type FilterComponentType =
+  | "autoComplete"
+  | "text"
+  | "date"
+  | "dateRange"
+  | "checkbox"
+  | "radio"
+  | "switch";
+
+type Options = readonly {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  avatar?: string;
+}[];
+
+export type FilterListType = {
+  label: string;
+  isDisabled?: boolean;
+  key: string;
+  value: string;
+  type: FilterComponentType;
+  menuInfo?: string;
+  options?: Options;
+  multiSelect?: boolean;
+};
+type FilterTypeWrapperProps = {
+  filter: FilterListType;
+  control: Control<FieldValues>;
+};
+export const FilterTypeWrapper = ({
+  filter,
+  control,
+}: FilterTypeWrapperProps) => {
+  const getFilterByType = (type: FilterComponentType) => {
+    return (
+      <Stack
+        direction="row"
+        width="100%"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Typography variant="body2">{filter.label}</Typography>
+        {type === "switch" ? (
+          <Switch control={control} name={filter.key} />
+        ) : (
+          <Typography variant="body2">{filter.menuInfo}</Typography>
+        )}
+      </Stack>
+    );
+  };
+
+  return <ListItemButton>{getFilterByType(filter.type)}</ListItemButton>;
+};

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

@@ -0,0 +1,29 @@
+import type { FilterListType } from "./FilterTypeWrapper";
+
+export const getFormValue = (value: unknown, item: FilterListType) => {
+  let keyValue = value;
+
+  if (item && item.type === "autoComplete") {
+    if (item.multiSelect && Array.isArray(value)) {
+      keyValue = item.options
+        ?.filter((option) => value.includes(option.value))
+        .map((option) => option.label)
+        .join(", ");
+    } else {
+      keyValue = item.options
+        ?.filter((option) => option.value === value)
+        .map((option) => option.label)
+        .join(", ");
+    }
+  }
+
+  if (item.type === "dateRange" && Array.isArray(value) && value.length === 2) {
+    const startDate = value[0];
+
+    const endDate = value[1];
+
+    keyValue = `${startDate} <= Start Date <= ${endDate}`;
+  }
+
+  return keyValue;
+};

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

@@ -0,0 +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

@@ -0,0 +1,510 @@
+import type { AutocompleteProps as MuiAutocompleteProps } from "@mui/material";
+
+import {
+  Avatar,
+  Box,
+  Checkbox,
+  Chip,
+  Divider,
+  IconButton,
+  InputLabel,
+  Autocomplete as MuiAutocomplete,
+  Paper,
+  Popper,
+  Stack,
+  TextField,
+  useTheme,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { useMemo, useRef, useState, type KeyboardEvent } from "react";
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { EditAction } from "../../Actions";
+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;
+  employee_code?: string;
+  avatar?: string;
+  punch_code?: string;
+};
+
+export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> &
+  Omit<
+    Omit<
+      MuiAutocompleteProps<
+        {
+          heading?: string;
+          label: string;
+          value: string | number;
+          disabled?: boolean;
+          avatar?: string;
+          employee_code?: string;
+          punch_code?: string;
+        },
+        boolean,
+        boolean,
+        boolean
+      >,
+      "renderInput"
+    >,
+    keyof ControllerRenderProps<P>
+  > & {
+    required?: boolean;
+    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,
+      state: { selected: boolean }
+    ) => JSX.Element;
+    getOptionLabel?: (option: string) => string;
+  };
+
+export function Autocomplete<P extends FieldValues>({
+  control,
+  defaultValue,
+  name,
+  required = false,
+  label,
+  multiple = false,
+  disabled = false,
+  options = [],
+  rules,
+  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);
+
+      onChange(allValues);
+    } else {
+      onChange([]);
+    }
+  };
+
+  const highlightedOptionRef = useRef<string | number>("");
+
+  const isAllSelected = useMemo(() => {
+    return (
+      multiple &&
+      isShowSelectAll &&
+      options.length > 0 &&
+      value?.length === options.filter((option) => !option.disabled).length
+    );
+  }, [multiple, isShowSelectAll, options, value]);
+
+  const memoizedOptions = useMemo(() => {
+    return [
+      ...(multiple && isShowSelectAll && options.length
+        ? [{ label: "Select All", value: "select-all" }]
+        : []),
+      ...options,
+    ];
+  }, [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) {
+      return (
+        value?.map((val: string | number) => {
+          const selectedOption = options.find((option) => option.value === val);
+
+          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) {
+      return value;
+    }
+
+    return options.find((option) => option.value === value) || null;
+  }, [multiple, options, value]);
+
+  const {
+    palette: {
+      app: { color },
+    },
+  } = useTheme();
+
+  const StyledPaper = styled(Paper)(({ theme }) => ({
+    "& .MuiAutocomplete-listbox": {
+      maxHeight: 200,
+      overflowY: "auto",
+      marginTop: "10px",
+      "&::-webkit-scrollbar": {
+        width: "6px",
+      },
+      "&::-webkit-scrollbar-thumb": {
+        backgroundColor: theme.palette.secondary.main,
+        borderRadius: "4px",
+      },
+      "&::-webkit-scrollbar-track": {
+        backgroundColor: color.lightBlue[100],
+      },
+      "& .MuiAutocomplete-option": {
+        fontSize: "14px", // Change this to your desired font size
+      },
+    },
+  }));
+
+  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} />;
+  }
+
+  // eslint-disable-next-line sonarjs/cognitive-complexity
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.code === "Space" && highlightedOptionRef.current) {
+      e.preventDefault();
+
+      if (multiple) {
+        if (highlightedOptionRef.current == "select-all") {
+          handleSelectAll(!isAllSelected);
+
+          return;
+        }
+
+        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)) {
+            onChange(
+              valuesArray.filter(
+                (value) => value !== highlightedOptionRef.current
+              )
+            );
+          } else {
+            onChange([...valuesArray, highlightedOptionRef.current]);
+          }
+        }
+      } else {
+        onChange(highlightedOptionRef.current);
+      }
+    }
+  };
+
+  return (
+    <Stack gap="10px">
+      {label && <InputLabel required={required}>{label}</InputLabel>}
+
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        gap="10px"
+        alignItems="start"
+      >
+        <MuiAutocomplete
+          PopperComponent={Popper}
+          PaperComponent={StyledPaper}
+          sx={{
+            "& .MuiAutocomplete-tag": {
+              backgroundColor: color.slate[700],
+              color: "black",
+            },
+            width: "100%",
+          }}
+          onHighlightChange={(event, option) => {
+            if (option) {
+              if (highlightedOptionRef.current != option.value) {
+                highlightedOptionRef.current = option.value;
+              }
+            }
+          }}
+          disableCloseOnSelect={shouldCloseOnSelect}
+          disabled={disabled}
+          freeSolo={freeSolo}
+          {...restProps}
+          {...restField}
+          renderTags={(value: Option[], getTagProps) =>
+            value.map((option: Option, index: number) => {
+              const { key, ...tagProps } = getTagProps({ index });
+
+              const label = typeof option === "string" ? option : option.label;
+
+              let avatarContent = "";
+
+              let avatar = undefined;
+
+              if (isShowAvatar) {
+                if (!option.avatar) {
+                  const initials = option.label
+                    .split(" ")
+                    .map((word) => word[0]?.toUpperCase())
+                    .join("");
+
+                  avatarContent = `${initials}`;
+                }
+                avatar = option.avatar ? (
+                  <Avatar src={option.avatar} alt={option.label} />
+                ) : (
+                  <Avatar>{avatarContent}</Avatar>
+                );
+              }
+
+              return (
+                <Chip avatar={avatar} label={label} key={key} {...tagProps} />
+              );
+            })
+          }
+          renderOption={(props, option, { selected }) => {
+            if (renderOption) {
+              return renderOption(props, option, { selected });
+            }
+
+            const { key, ...optionProps } = props;
+
+            return (
+              <li key={key} {...optionProps}>
+                <Stack gap="5px">
+                  <Stack direction="row" gap="10px">
+                    {multiple && (
+                      <Checkbox
+                        icon={<BoxStyled size="small" />}
+                        checkedIcon={<CheckStyled size="small" />}
+                        indeterminate={
+                          !isAllSelected &&
+                          selectedValue?.length &&
+                          option.value === "select-all"
+                            ? true
+                            : false
+                        }
+                        checked={isAllSelected ? true : selected}
+                        sx={{
+                          marginRight: "8px",
+                          ".MuiCheckbox-indeterminate": {
+                            borderColor: color.butterflyBlue[900],
+                          },
+                        }}
+                      />
+                    )}
+                    {option.label}
+                  </Stack>
+                  {option.value === "select-all" && (
+                    <Divider sx={{ width: "280px" }} />
+                  )}
+                </Stack>
+              </li>
+            );
+          }}
+          renderInput={(params) => {
+            let startAdornment = params.InputProps.startAdornment;
+
+            if (!multiple && selectedValue?.avatar && getOptionLabel) {
+              startAdornment = (
+                <Box width="20px" marginLeft="10px">
+                  <Avatar
+                    src={selectedValue.avatar}
+                    alt={selectedValue.label}
+                    sx={{ width: 24, height: 24 }}
+                  />
+                </Box>
+              );
+            }
+
+            return (
+              <TextField
+                {...params}
+                placeholder={placeholder || `Select ${label}`}
+                error={error}
+                helperText={helperText}
+                InputProps={{
+                  ...params.InputProps,
+                  startAdornment,
+                }}
+                onChange={(e) => {
+                  if (isShowOptionsOnType) {
+                    setInputValue(e.target.value);
+                  }
+                }}
+                onKeyDown={(e) => handleKeyDown(e)}
+              />
+            );
+          }}
+          multiple={multiple}
+          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);
+            }
+
+            if (typeof option === "string") {
+              return option;
+            }
+
+            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) =>
+                  typeof option !== "string" && option?.value === "select-all"
+              );
+
+              if (isSelectAllIncluded) {
+                handleSelectAll(!isAllSelected);
+
+                return;
+              }
+            }
+
+            if (multiple && freeSolo) {
+              if (Array.isArray(newValue)) {
+                // eslint-disable-next-line sonarjs/function-return-type
+                const values = newValue.map((option) => {
+                  return typeof option === "string" ? option : option.value;
+                });
+
+                return onChange(values);
+              }
+
+              return onChange(value || []);
+            }
+
+            if (typeof newValue === "string") {
+              return onChange(newValue ?? null);
+            }
+
+            if (Array.isArray(newValue)) {
+              // eslint-disable-next-line sonarjs/function-return-type
+              const values = newValue.map((option) => {
+                if (typeof option === "string") {
+                  return newValue;
+                }
+
+                return option.value;
+              });
+
+              return onChange(values);
+            }
+
+            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}
+        />
+
+        {onAction && (
+          <IconButton
+            disabled={disabled}
+            sx={{
+              border: `1px solid ${color.iron[800]}`,
+              padding: "0px",
+              borderRadius: "5px",
+            }}
+            onClick={onAction}
+          >
+            <EditAction />
+          </IconButton>
+        )}
+      </Stack>
+    </Stack>
+  );
+}