@erpsquad/common 1.8.46 → 1.8.47

package/dist/components/reports-title-bar/reports-title-bar/index.esm.js

@@ -0,0 +1,736 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Button } from "../../button/button/index.esm.js";
+import { Typography } from "../../typography/typography/index.esm.js";
+/* empty css                                  */
+import TitleDropdownButton from "../../title-dropdown-button/title-dropdown-button/index.esm.js";
+import React__default, { useState, useRef, useEffect } from "react";
+import default_1 from "../../../node_modules/@mui/icons-material/KeyboardArrowDown/index.esm.js";
+import { generateFields } from "../../../utils/common/index.esm.js";
+import { ReportButtons } from "../report-buttons/report-buttons/index.esm.js";
+import TabBar from "../../tabs/tabs/index.esm.js";
+import { images } from "../../../images/index.esm.js";
+import { RANGE, handleCompareDateRange } from "../../../utils/date-range/index.esm.js";
+import { DateRange, Calendar as Calendar$1 } from "react-date-range";
+import dayjs from "dayjs";
+import { useAppDispatch } from "../../../redux/hooks/index.esm.js";
+import { fetchCompanies } from "../redux/actionCreator/index.esm.js";
+import SearchableSelect from "../../searchable-select/index.esm.js";
+import { Checkbox } from "../../checkbox/checkbox/index.esm.js";
+import { useTranslation } from "react-i18next";
+import { enUS } from "date-fns/locale";
+import Menu from "../../../node_modules/@mui/material/Menu/Menu/index.esm.js";
+import MenuItem from "../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import { Export } from "../../icons/export/index.esm.js";
+import { Filter } from "../../icons/filter/index.esm.js";
+import Divider from "../../../node_modules/@mui/material/Divider/Divider/index.esm.js";
+import ButtonGroup from "../../../node_modules/@mui/material/ButtonGroup/ButtonGroup/index.esm.js";
+import Button$1 from "../../../node_modules/@mui/material/Button/Button/index.esm.js";
+import { Calendar } from "../../icons/calendar/index.esm.js";
+import Popper from "../../../node_modules/@mui/material/Popper/Popper/index.esm.js";
+import Grow from "../../../node_modules/@mui/material/Grow/Grow/index.esm.js";
+import Paper from "../../../node_modules/@mui/material/Paper/Paper/index.esm.js";
+import { ClickAwayListener } from "../../../node_modules/@mui/material/ClickAwayListener/ClickAwayListener/index.esm.js";
+const ReportsTitleBar = (props) => {
+  var _a;
+  const {
+    title,
+    handleAddButton,
+    buttons = [],
+    dropdownMenuButtonData,
+    isTitleMenu = false,
+    titleMenus = [],
+    reportFilterFields = [],
+    toggleCallback,
+    tabs,
+    activeValue,
+    setActiveValue,
+    isDateFilterEnabled = true,
+    onDateFilterChange,
+    // showCancelButton,
+    filters = {},
+    isDateRange = true,
+    showDateFilter = false,
+    dateFilter = "TODAY",
+    filterDropDown,
+    handleRowsCollapse,
+    handleRowsExpand,
+    showLevelBtn = false,
+    dataLength = 0,
+    filterKeys = {}
+  } = props;
+  const dispatch = useAppDispatch();
+  const customStyle = {
+    "&.MuiOutlinedInput-root": {
+      "& fieldset": {
+        border: "none",
+        borderColor: `#ade7cb`,
+        borderRadius: `25px`
+      },
+      "& .MuiSelect-outlined": {
+        padding: `4.5px 14px !important`
+      },
+      // '&:hover fieldset': {
+      //   border: 'none',
+      // },
+      // '&.Mui-focused fieldset': {
+      //   border: 'none',
+      // },
+      display: `flex`,
+      gap: `4px`,
+      width: `220px`,
+      // height: 30px,
+      border: `1px solid #ade7cb`,
+      borderRadius: `50px`,
+      backgroundColor: `#ebf9f2`,
+      color: `#289b64`,
+      alignItems: `center`,
+      cursor: `pointer`
+      // height: `30px`
+    }
+  };
+  const inputStyle = {
+    border: "none",
+    "&.Mui-focused": {
+      borderColor: "transparent"
+    },
+    "& .MuiOutlinedInput-input": {
+      // padding: "0px",
+      fontSize: "14px",
+      color: "#289b64"
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none"
+    },
+    "& .MuiSelect-icon": {
+      color: "green"
+    }
+  };
+  const defaultSelected = [
+    {
+      value: "company"
+    }
+  ];
+  const [selectedItems, setSelectedItems] = useState(defaultSelected);
+  const [level, setLevel] = useState(1);
+  const [actionAnchorEl, setActionAnchorEl] = useState(
+    null
+  );
+  const [allFields, setAllFields] = useState([]);
+  const [dateRange, setDateRange] = useState();
+  const [open, setOpen] = useState(false);
+  const [exportAnchorEl, setExportAnchorEl] = useState(null);
+  const [customDate, setCustomDate] = useState(
+    new Date(dayjs((filters == null ? void 0 : filters.as_of_date) || "").format("YYYY-MM-DD"))
+  );
+  const { t } = useTranslation();
+  const [customDateRange, setCustomDateRange] = useState({
+    startDate: new Date(dayjs((filters == null ? void 0 : filters.start_date) || "").format("YYYY-MM-DD")),
+    endDate: new Date(dayjs((filters == null ? void 0 : filters.end_date) || "").format("YYYY-MM-DD")),
+    key: "selection"
+  });
+  const anchorRef = useRef(null);
+  const dateSelectRef = useRef(null);
+  const chipDateSelectRef = useRef(null);
+  const handleCloseDatePopper = () => {
+    anchorRef.current = null;
+    setOpen(false);
+  };
+  const handleDateChange = async (range) => {
+    setDateRange(range);
+    if (range === "CUSTOM") {
+      anchorRef.current = dateSelectRef.current;
+      setOpen(true);
+    } else {
+      const data = await handleCompareDateRange({
+        range: RANGE[range],
+        from: "",
+        to: ""
+      });
+      onDateFilterChange == null ? void 0 : onDateFilterChange({
+        start_date: (data == null ? void 0 : data.from) ? data == null ? void 0 : data.from : "",
+        end_date: (data == null ? void 0 : data.to) ? data == null ? void 0 : data.to : ""
+      });
+      handleCloseDatePopper();
+    }
+  };
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    handleCloseDatePopper();
+  };
+  const handleSelectChange = (value) => {
+    if (selectedItems.some((item) => item.value == value.value)) {
+      setSelectedItems(selectedItems.filter((item) => (item == null ? void 0 : item.value) != value.value));
+      return;
+    }
+    setSelectedItems([...selectedItems, value]);
+  };
+  const filtersConfig = (filterDropDown == null ? void 0 : filterDropDown.map((filter) => ({
+    key: filter.value || filter.key,
+    label: filter.name || filter.label || `Search ${filter.value || filter.key}`,
+    placeholder: filter.placeholder || filter.name || filter.label,
+    apiType: filter.apiType || filter.value || filter.key,
+    valueKey: (filterKeys == null ? void 0 : filterKeys[filter.value || filter.key]) || filter.value || filter.key,
+    customFilter: filter.customFilter || null,
+    multiple: filter.multiple || false
+  }))) || [];
+  const options = [
+    {
+      label: RANGE.TODAY,
+      callback: () => {
+        handleDateChange("TODAY");
+      }
+    },
+    {
+      label: RANGE.THIS_WEEK,
+      callback: () => {
+        handleDateChange("THIS_WEEK");
+      }
+    },
+    {
+      label: RANGE.THIS_MONTH,
+      callback: () => {
+        handleDateChange("THIS_MONTH");
+      }
+    },
+    {
+      label: RANGE.THIS_QUARTER,
+      callback: () => {
+        handleDateChange("THIS_QUARTER");
+      }
+    },
+    {
+      label: RANGE.THIS_YEAR,
+      callback: () => {
+        handleDateChange("THIS_YEAR");
+      }
+    },
+    {
+      label: RANGE.YESTERDAY,
+      callback: () => {
+        handleDateChange("YESTERDAY");
+      }
+    },
+    {
+      label: RANGE.PREVIOUS_WEEK,
+      callback: () => {
+        handleDateChange("PREVIOUS_WEEK");
+      }
+    },
+    {
+      label: RANGE.PREVIOUS_MONTH,
+      callback: () => {
+        handleDateChange("PREVIOUS_MONTH");
+      }
+    },
+    {
+      label: RANGE.PREVIOUS_QUARTER,
+      callback: () => {
+        handleDateChange("PREVIOUS_QUARTER");
+      }
+    },
+    {
+      label: RANGE.PREVIOUS_YEAR,
+      callback: () => {
+        handleDateChange("PREVIOUS_YEAR");
+      }
+    },
+    {
+      label: RANGE.CUSTOM,
+      callback: () => {
+        handleDateChange("CUSTOM");
+      }
+    }
+  ];
+  const isChecked = (value) => {
+    return selectedItems.some((item) => (item == null ? void 0 : item.value) == (value == null ? void 0 : value.value));
+  };
+  const handleFilterPopperSubmit = () => {
+    const dateRangeFilter = {
+      start_date: dayjs(customDateRange.startDate).format("YYYY-MM-DD"),
+      end_date: dayjs(customDateRange.endDate).format("YYYY-MM-DD")
+    };
+    const dateFilter2 = {
+      as_of_date: dayjs(customDate).format("YYYY-MM-DD")
+    };
+    onDateFilterChange == null ? void 0 : onDateFilterChange({
+      ...isDateRange ? dateRangeFilter : dateFilter2
+    });
+    handleCloseDatePopper();
+  };
+  function showFilter(val) {
+    return selectedItems.some((item) => (item == null ? void 0 : item.value) == val);
+  }
+  const getStartAndEndDate = (filters2) => {
+    const startDate = dayjs(filters2 == null ? void 0 : filters2.start_date).isValid() ? dayjs(filters2.start_date).toDate() : /* @__PURE__ */ new Date();
+    const endDate = dayjs(filters2 == null ? void 0 : filters2.end_date).isValid() ? dayjs(filters2.end_date).toDate() : /* @__PURE__ */ new Date();
+    return { startDate, endDate };
+  };
+  useEffect(() => {
+    setCustomDate(
+      new Date(dayjs((filters == null ? void 0 : filters.as_of_date) || "").format("YYYY-MM-DD"))
+    );
+  }, [filters == null ? void 0 : filters.as_of_date]);
+  useEffect(() => {
+    setCustomDateRange({
+      ...customDateRange,
+      ...getStartAndEndDate(filters)
+    });
+  }, [filters == null ? void 0 : filters.end_date, filters == null ? void 0 : filters.start_date]);
+  useEffect(() => {
+    if (open) {
+      if (isDateRange) {
+        setCustomDateRange({
+          ...customDateRange,
+          ...getStartAndEndDate(filters)
+        });
+      } else {
+        setCustomDate(
+          new Date(dayjs((filters == null ? void 0 : filters.as_of_date) || "").format("YYYY-MM-DD"))
+        );
+      }
+    }
+  }, [open, isDateRange]);
+  useEffect(() => {
+    dispatch(fetchCompanies());
+  }, []);
+  useEffect(() => {
+    setAllFields(generateFields(reportFilterFields));
+  }, []);
+  useEffect(() => {
+    handleDateChange(dateFilter);
+  }, [dateFilter]);
+  const filterDropDownFunc = () => {
+    return /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl: actionAnchorEl,
+        open: Boolean(actionAnchorEl),
+        onClose: handleFilterClose,
+        children: filterDropDown == null ? void 0 : filterDropDown.map((item) => /* @__PURE__ */ jsxs(MenuItem, { onClick: () => handleSelectChange(item), value: item == null ? void 0 : item.value, children: [
+          /* @__PURE__ */ jsx(Checkbox, { checked: isChecked(item) }),
+          /* @__PURE__ */ jsx(Typography, { sx: { marginLeft: "10px" }, color: "theme.neutral.800", type: "s3", children: item == null ? void 0 : item.name })
+        ] }, item))
+      }
+    );
+  };
+  const renderFilter = ({
+    key,
+    label,
+    placeholder,
+    apiType,
+    valueKey,
+    customFilter,
+    multiple = false,
+    options: options2,
+    show = true,
+    showCancelButton = true
+  }) => {
+    if (!showFilter(key) || !show) return null;
+    return (
+      // <div className="search-filter" key={key}>
+      /* @__PURE__ */ jsx(
+        SearchableSelect,
+        {
+          labelId: `${key}-label`,
+          searchPlaceholder: label,
+          value: filters == null ? void 0 : filters[valueKey],
+          onChange: (e) => onDateFilterChange({ [valueKey]: e.target.value }),
+          showCancelButton,
+          apiType,
+          options: options2,
+          multiple,
+          placeholder,
+          customeFilter: customFilter,
+          customStyle,
+          inputStyle
+        }
+      )
+    );
+  };
+  const FilterContainer = () => /* @__PURE__ */ jsx(Fragment, { children: filtersConfig.map(renderFilter) });
+  const handleFilterClose = () => {
+    setActionAnchorEl(null);
+  };
+  const ExportContainer = React__default.memo(() => {
+    var _a2;
+    const handleClose2 = () => setExportAnchorEl(null);
+    return /* @__PURE__ */ jsx(
+      Menu,
+      {
+        open: Boolean(exportAnchorEl),
+        anchorEl: exportAnchorEl,
+        onClose: handleClose2,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: (_a2 = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a2.map((option, index) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            onClick: () => {
+              option.callback();
+              setExportAnchorEl(null);
+            },
+            children: /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", color: "inherit", children: [
+              " ",
+              option.label
+            ] })
+          },
+          index
+        ))
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "reportsTitleBar", children: [
+      /* @__PURE__ */ jsx("div", { className: "reportsTitleBar--LeftContent", children: isTitleMenu ? /* @__PURE__ */ jsx("div", { style: { zIndex: 999 }, children: /* @__PURE__ */ jsx(
+        TitleDropdownButton,
+        {
+          onClick: handleAddButton,
+          options: titleMenus,
+          isMenuThirdItemDisabled: true,
+          children: title
+        }
+      ) }) : /* @__PURE__ */ jsx(Typography, { type: "h3", weight: "medium", color: "theme.secondary.1000", children: title }) }),
+      /* @__PURE__ */ jsx(
+        ReportButtons,
+        {
+          zIndex: 999,
+          className: "reportsTitleBar--RightContent",
+          buttons
+        }
+      )
+    ] }),
+    (tabs == null ? void 0 : tabs.length) ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      TabBar,
+      {
+        tabs: tabs || [],
+        activeValue,
+        setActiveValue,
+        isTabViewOnly: true
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", my: 2.5, mx: 1 }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "reportsTitleBar--FilterWrapper", children: [
+        FilterContainer(),
+        (filters == null ? void 0 : filters.end_date) && showDateFilter && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "reportsTitleBar--FilterWrapper--Chip",
+            ref: chipDateSelectRef,
+            onClick: () => {
+              if (!open) {
+                anchorRef.current = chipDateSelectRef.current;
+                setOpen(true);
+              } else {
+                handleCloseDatePopper();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
+                  title: `${dayjs(filters == null ? void 0 : filters.start_date).format("DD/MM/YYYY")} - ${dayjs(filters == null ? void 0 : filters.end_date).format("DD/MM/YYYY")}`,
+                  children: [
+                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
+                      t("common.dateRange"),
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
+                        type: "s4",
+                        children: [
+                          dayjs(filters == null ? void 0 : filters.start_date).format("DD/MM/YYYY"),
+                          " -",
+                          " ",
+                          dayjs(filters == null ? void 0 : filters.end_date).format("DD/MM/YYYY")
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(default_1, {})
+            ]
+          }
+        ) }),
+        (customDateRange == null ? void 0 : customDateRange.startDate) && (customDateRange == null ? void 0 : customDateRange.endDate) && isDateFilterEnabled && !["TODAY", "YESTERDAY"].includes(dateRange) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (customDateRange == null ? void 0 : customDateRange.startDate) && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "reportsTitleBar--FilterWrapper--Chip",
+              style: { padding: " 5px 12px" },
+              ref: chipDateSelectRef,
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
+                  title: `${dayjs(customDateRange == null ? void 0 : customDateRange.startDate).format("DD/MM/YYYY")}`,
+                  children: [
+                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
+                      t("common.startDate"),
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
+                        type: "s4",
+                        children: dayjs(customDateRange == null ? void 0 : customDateRange.startDate).format("DD/MM/YYYY")
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) }),
+          (customDateRange == null ? void 0 : customDateRange.endDate) && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "reportsTitleBar--FilterWrapper--Chip",
+              ref: chipDateSelectRef,
+              style: { padding: " 5px 12px" },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
+                  title: `${dayjs(customDateRange == null ? void 0 : customDateRange.startDate).format("DD/MM/YYYY")}`,
+                  children: [
+                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
+                      t("common.endDate"),
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
+                        type: "s4",
+                        children: dayjs(customDateRange == null ? void 0 : customDateRange.endDate).format("DD/MM/YYYY")
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) })
+        ] }),
+        (filters == null ? void 0 : filters.as_of_date) && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "reportsTitleBar--FilterWrapper--Chip",
+            ref: chipDateSelectRef,
+            onClick: () => {
+              if (!open) {
+                anchorRef.current = chipDateSelectRef.current;
+                setOpen(true);
+              } else {
+                handleCloseDatePopper();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
+                  title: `${dayjs(filters == null ? void 0 : filters.as_of_date).format("DD/MM/YYYY")}`,
+                  children: [
+                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
+                      t("common.date"),
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
+                        type: "s4",
+                        children: dayjs(filters == null ? void 0 : filters.as_of_date).format("DD/MM/YYYY")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(default_1, {})
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "report-display", children: [
+        ((_a = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              sx: ({ palette }) => ({
+                border: "1px solid",
+                borderColor: "grey.200",
+                borderRadius: "50px",
+                color: `${palette.grey[800]} !important`,
+                "&:hover": {
+                  bgcolor: `${palette.grey[200]} !important`
+                }
+              }),
+              variant: "text",
+              startIcon: /* @__PURE__ */ jsx(Export, { fontSize: "small" }),
+              onClick: (event) => setExportAnchorEl(event.currentTarget),
+              children: t("common.export")
+            }
+          ),
+          exportAnchorEl && /* @__PURE__ */ jsx(ExportContainer, {})
+        ] }),
+        (filterDropDown == null ? void 0 : filterDropDown.length) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              sx: ({ palette }) => ({
+                border: "1px solid",
+                borderColor: "grey.200",
+                borderRadius: "50px",
+                color: `${palette.grey[800]} !important`,
+                "&:hover": {
+                  bgcolor: `${palette.grey[200]} !important`
+                }
+              }),
+              variant: "text",
+              startIcon: /* @__PURE__ */ jsx(Filter, { fontSize: "small" }),
+              onClick: (event) => setActionAnchorEl(event.currentTarget),
+              children: t("common.filter")
+            }
+          ) }),
+          showLevelBtn && /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
+        ] }),
+        filterDropDownFunc(),
+        showLevelBtn && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Box, { className: "reportsTitleBar--FilterAction--lvWrapper", children: [
+            /* @__PURE__ */ jsxs(Typography, { type: "s3", weight: "medium", color: "grey.800", children: [
+              " Level ",
+              level,
+              " of ",
+              dataLength
+            ] }),
+            /* @__PURE__ */ jsxs(ButtonGroup, { variant: "outlined", disableElevation: true, sx: ({ palette }) => ({
+              "& .MuiButton-root": {
+                borderColor: `${palette.grey[200]} !important`,
+                "&:hover": {
+                  bgcolor: `${palette.grey[200]} !important`
+                }
+              },
+              "& .MuiButtonGroup-firstButton": {
+                borderTopLeftRadius: 20,
+                borderBottomLeftRadius: 20
+              },
+              "& .MuiButtonGroup-lastButton": {
+                borderTopRightRadius: 20,
+                borderBottomRightRadius: 20
+              }
+            }), children: [
+              /* @__PURE__ */ jsx(Button$1, { onClick: () => {
+                setLevel(level == dataLength ? level : level + 1);
+                handleRowsCollapse == null ? void 0 : handleRowsCollapse(level);
+              }, children: /* @__PURE__ */ jsx("img", { src: images.common.expand }) }),
+              /* @__PURE__ */ jsx(Button$1, { onClick: () => {
+                setLevel(level != 1 ? level - 1 : 1);
+                handleRowsExpand == null ? void 0 : handleRowsExpand(level);
+              }, children: /* @__PURE__ */ jsx("img", { src: images.common.collapse }) })
+            ] })
+          ] }),
+          isDateFilterEnabled && /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
+        ] }),
+        isDateFilterEnabled && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx(Typography, { type: "s3", weight: "medium", color: "grey.800", children: "As of: " }),
+          /* @__PURE__ */ jsx(
+            ReportButtons,
+            {
+              zIndex: 997,
+              className: "reportsTitleBar--RightContent",
+              dropdownMenuButtonData: {
+                icon: /* @__PURE__ */ jsx(Calendar, { fontSize: "small" }),
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  RANGE[dateRange],
+                  /* @__PURE__ */ jsx(default_1, {})
+                ] }),
+                options
+              },
+              toggleCallback
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { ref: dateSelectRef })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Popper,
+      {
+        sx: {
+          zIndex: 9999
+        },
+        open,
+        anchorEl: anchorRef.current,
+        role: void 0,
+        transition: true,
+        disablePortal: true,
+        children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx(
+          Grow,
+          {
+            ...TransitionProps,
+            style: {
+              margin: "0 20px 0 20px",
+              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
+            },
+            children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-end"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { children: isDateRange ? /* @__PURE__ */ jsx(
+                    DateRange,
+                    {
+                      editableDateInputs: true,
+                      onChange: (item) => setCustomDateRange(item.selection),
+                      moveRangeOnFirstSelection: false,
+                      ranges: [customDateRange],
+                      locale: enUS
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Calendar$1,
+                    {
+                      onChange: (item) => setCustomDate(item),
+                      date: customDate,
+                      locale: enUS
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Box, { sx: { padding: "0 12px 12px 0" }, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "contained",
+                      sx: { width: "fit-content" },
+                      onClick: handleFilterPopperSubmit,
+                      children: t("common.apply")
+                    }
+                  ) })
+                ]
+              }
+            ) }) })
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  ReportsTitleBar,
+  ReportsTitleBar as default
+};
+//# sourceMappingURL=index.esm.js.map