@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,509 @@
+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
+          }
+          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 (!newValue) {
+              setInputValue("");
+            }
+
+            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>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+type SkeletonProps = {
+  label?: string;
+};
+export const Skeleton = ({ label }: SkeletonProps) => {
+  return (
+    <Stack gap="10px">
+      {label && (
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      )}
+      <MuiSkeleton
+        height="40px"
+        sx={{
+          transform: "scale(1)",
+        }}
+      />
+    </Stack>
+  );
+};

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

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

package/packages/shared-components/src/FormFields/CheckBox/CheckBox.styled.tsx

@@ -0,0 +1,76 @@
+import { Check } from "@mui/icons-material";
+import type { BoxProps, CSSObject, CheckboxProps } from "@mui/material";
+import { Box, styled } from "@mui/material";
+import type { ComponentType } from "react";
+type BoxStyledProps = {
+  size: CheckboxProps["size"];
+} & BoxProps;
+
+type CheckStyledProps = {
+  size: CheckboxProps["size"];
+} & CheckboxProps;
+
+export const BoxStyled: ComponentType<BoxStyledProps> = styled(Box)<{
+  size: CheckboxProps["size"];
+}>(({ theme, size }) => {
+  const { color } = theme.palette.app;
+
+  const checkBoxSize =
+    size === "small"
+      ? {
+          width: "14px",
+          height: "14px",
+        }
+      : {
+          width: "20px",
+          height: "20px",
+        };
+
+  const style: CSSObject = {
+    ...checkBoxSize,
+    borderRadius: "4px",
+    border: `2px solid ${color.iron[900]}`,
+    "input:hover ~ &": {
+      borderColor: color.butterflyBlue[900],
+    },
+    "input:disabled ~ &": {
+      borderColor: color.iron[800],
+    },
+  };
+
+  return style;
+});
+
+export const CheckStyled: ComponentType<CheckStyledProps> = styled(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Check as any
+)<{
+  size: CheckboxProps["size"];
+}>(({ theme, size }) => {
+  const { color } = theme.palette.app;
+
+  const checkBoxSize =
+    size === "small"
+      ? {
+          width: "14px",
+          height: "14px",
+        }
+      : {
+          width: "20px",
+          height: "20px",
+        };
+
+  const style: CSSObject = {
+    ...checkBoxSize,
+    border: `2px solid ${color.butterflyBlue[900]}`,
+    borderRadius: "4px",
+    color: color.iron[600],
+    backgroundColor: color.butterflyBlue[900],
+    "input:disabled ~ &": {
+      borderColor: color.iron[800],
+      backgroundColor: color.iron[800],
+    },
+  };
+
+  return style;
+});

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

@@ -0,0 +1,44 @@
+import Checkbox, {
+  type CheckboxProps as MuiCheckboxProps,
+} from "@mui/material/Checkbox";
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import { BoxStyled, CheckStyled } from "./CheckBox.styled";
+import { Skeleton } from "./Skeleton";
+
+export type CheckBoxProps<P extends FieldValues> = UseControllerProps<P> &
+  Omit<Omit<MuiCheckboxProps, "checked">, keyof ControllerRenderProps<P>> & {
+    loading?: boolean;
+  };
+
+export function CheckBox<P extends FieldValues>({
+  name,
+  rules,
+  control,
+  defaultValue,
+  size,
+  loading = false,
+  ...restCheckBoxProps
+}: CheckBoxProps<P>) {
+  const {
+    field: { value = false, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  return (
+    <Checkbox
+      icon={<BoxStyled size={size} />}
+      checkedIcon={<CheckStyled size={size} />}
+      checked={value}
+      {...restField}
+      {...restCheckBoxProps}
+    />
+  );
+}

package/packages/shared-components/src/FormFields/CheckBox/Skeleton.tsx

@@ -0,0 +1,12 @@
+import { Skeleton as MuiSkeleton } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <MuiSkeleton
+      width={30}
+      height={30}
+      sx={{ borderRadius: "4px" }}
+      variant="rectangular"
+    />
+  );
+};

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

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