@erpsquad/common 1.10.65 → 1.10.67

package/dist/chunks/{uom-field-wrapper-DQKUL4a5.js → uom-field-wrapper-QpAULeef.js}

@@ -3,8 +3,8 @@ const jsxRuntime = require("./jsx-runtime-B6vEU3CM.js");
 const reactHookForm = require("react-hook-form");
 const identifier = require("./identifier-CaTy7Osd.js");
 const useAuth = require("./useAuth-Boeqeg4o.js");
-const android12Switch = require("./android-12-switch-BP2CP-ah.js");
-const appbar = require("./appbar-Bb4MdbyO.js");
+const android12Switch = require("./android-12-switch-CPchopCJ.js");
+const appbar = require("./appbar-CLVklo7i.js");
 const React = require("react");
 const DatePicker = require("react-datepicker");
 ;/* empty css                         */
@@ -23,12 +23,12 @@ const marked = require("marked");
 const api = require("./api-DHYivGc8.js");
 const apiConfig = require("./api-config-DXwDMFn-.js");
 const Yup = require("yup");
-const checkbox = require("./checkbox-CS7OvJZk.js");
+const checkbox = require("./checkbox-BtV5gEk1.js");
 const formBuilderDeconversion = require("./form-builder-deconversion-CtfddwVS.js");
 const radioButton = require("./radio-button-Z203yCd7.js");
 const notistack = require("notistack");
 const reactRedux = require("react-redux");
-const ERPUIProvider = require("./ERPUIProvider-B_cYjAdF.js");
+const ERPUIProvider = require("./ERPUIProvider-qVNxuYUq.js");
 const Board = require("@asseinfo/react-kanban");
 const translations = require("./translations-DoAAs3Sh.js");
 const FullCalendar = require("@fullcalendar/react");
@@ -42,22 +42,25 @@ const resourceTimelinePlugin = require("@fullcalendar/resource-timeline");
 const tick = require("./tick-EnM_XLSR.js");
 const arrowUp = require("./arrow-up-Dg35LjrD.js");
 const ReactFlagsSelect = require("react-flags-select");
+const DocViewer = require("react-doc-viewer");
+const Papa = require("papaparse");
+const document$1 = require("./document-zJ0CptA2.js");
 const reactRouterDom = require("react-router-dom");
 const navigationUtils = require("./navigation-utils-CjGqJQmS.js");
-const pageContext = require("./page-context-D32zeXhS.js");
+const pageContext = require("./page-context-DPP1VkDf.js");
 const ganttTaskReact = require("gantt-task-react");
 const reactDateRange = require("react-date-range");
 const actionBar = require("./action-bar-DMv6sqDP.js");
 const DataEditor = require("@glideapps/glide-data-grid");
 const glideDataGridCells = require("@glideapps/glide-data-grid-cells");
 const ReactDOM = require("react-dom");
-const sidebar = require("./sidebar-Df3O8Xw6.js");
+const sidebar = require("./sidebar-BOpyMIRe.js");
 const materialReactTable = require("material-react-table");
 const trash = require("./trash-C63VDmtW.js");
 const _$1 = require("lodash");
-const modules = require("./modules-BEfRrTxc.js");
+const modules = require("./modules--vSuX1U9.js");
 const pathname_rental = require("./pathname.rental-C0Yjyyx7.js");
-const routePageMap = require("./route-page-map-CuVKVc8s.js");
+const routePageMap = require("./route-page-map-Czwp-hfI.js");
 const hooks = require("./hooks-DsdahmnZ.js");
 const store = require("./store-BlcYtLUe.js");
 const reactDropzone = require("react-dropzone");
@@ -4283,29 +4286,9 @@ const AddressModal = ({
               placeholder: t(`accounting.${translationKey}.addressModal.address3_placeholder`)
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            appbar.DynamicInput,
-            {
-              type: "text",
-              formControl: control,
-              label: t(`accounting.${translationKey}.addressModal.streetName_label`),
-              name: "street_name",
-              fieldArrayName: "addresses",
-              placeholder: t(`accounting.${translationKey}.addressModal.streetName_placeholder`)
-            }
-          ) }),
           isKSA,
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            appbar.DynamicInput,
-            {
-              type: "text",
-              formControl: control,
-              label: t(`accounting.${translationKey}.addressModal.nationalAddress_label`),
-              name: "national_address",
-              fieldArrayName: "addresses",
-              placeholder: t(`accounting.${translationKey}.addressModal.nationalAddress_placeholder`)
-            }
-          ) }),
+          isKSA,
+          isKSA,
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
             appbar.DynamicInput,
             {
@@ -4355,17 +4338,7 @@ const AddressModal = ({
               formControl: control
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            appbar.DynamicInput,
-            {
-              type: "text",
-              formControl: control,
-              label: t(`accounting.${translationKey}.addressModal.districtName_label`),
-              name: "district_name",
-              fieldArrayName: "addresses",
-              placeholder: t(`accounting.${translationKey}.addressModal.districtName_placeholder`)
-            }
-          ) }),
+          isKSA,
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
             appbar.DynamicInput,
             {
@@ -4676,6 +4649,135 @@ const DashBoardHeader = ({ title, customElement, showEdit = true, showDropDowan
     ] })
   ] }) });
 };
+const imageExts = [
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "svg",
+  "webp",
+  "bmp",
+  "tiff",
+  "tif",
+  "ico",
+  "heic",
+  "heif"
+];
+const iframeExts = ["txt", "csv", "rtf"];
+const pdfExts = ["pdf"];
+const CsvPreview = ({ url }) => {
+  const [data, setData] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    fetch(url).then((r) => r.text()).then((text) => {
+      const result = Papa.parse(text);
+      setData(result.data);
+      setLoading(false);
+    });
+  }, [url]);
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s3", children: "Loading..." });
+  if (!data.length) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s3", children: "Empty file" });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { component: "table", sx: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("tr", { children: (data[0] || []).map((h, i) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("th", { style: { border: "1px solid #ccc", padding: 8, background: "#f5f5f5", textAlign: "left" }, children: h }, i)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("tbody", { children: data.slice(1).map((row, r) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("tr", { children: row.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("td", { style: { border: "1px solid #ccc", padding: 8 }, children: c }, i)) }, r)) })
+  ] });
+};
+const TextPreview = ({ url }) => {
+  const [text, setText] = React.useState("");
+  React.useEffect(() => {
+    fetch(url).then((r) => r.text()).then(setText);
+  }, [url]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("pre", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word", margin: 0, fontSize: 14 }, children: text });
+};
+const DocumentPreview = ({ fileUrl, fileName }) => {
+  var _a;
+  const [open, setOpen] = React.useState(false);
+  const name = fileName || (fileUrl == null ? void 0 : fileUrl.substring((fileUrl == null ? void 0 : fileUrl.lastIndexOf("/")) + 1)) || "";
+  const ext = React.useMemo(() => {
+    var _a2;
+    return ((_a2 = name.split(".").pop()) == null ? void 0 : _a2.toLowerCase()) || "";
+  }, [name]);
+  const s3BucketUrl = ((_a = apiConfig.getApiConfig()) == null ? void 0 : _a.s3BucketUrl) || "https://erpforce-dev.s3.eu-west-1.amazonaws.com/";
+  const fullUrl = React.useMemo(
+    () => (fileUrl == null ? void 0 : fileUrl.startsWith("http")) || (fileUrl == null ? void 0 : fileUrl.startsWith("blob:")) ? fileUrl : s3BucketUrl + fileUrl,
+    [fileUrl, s3BucketUrl]
+  );
+  const isLocalFile = fileUrl == null ? void 0 : fileUrl.startsWith("blob:");
+  const renderContent = () => {
+    if (imageExts.includes(ext)) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: fullUrl,
+          alt: name,
+          style: { width: "100%", height: "100%", objectFit: "contain" }
+        }
+      );
+    }
+    if (pdfExts.includes(ext)) {
+      return isLocalFile ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("embed", { src: fullUrl, title: name, style: { width: "100%", height: "100%" } }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("iframe", { src: fullUrl, title: name, style: { width: "100%", height: "100%", border: "none" } });
+    }
+    if (iframeExts.includes(ext)) {
+      if (ext === "csv") {
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CsvPreview, { url: fullUrl });
+      }
+      if (isLocalFile) {
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TextPreview, { url: fullUrl });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("iframe", { src: fullUrl, title: name, style: { width: "100%", height: "100%", border: "none" } });
+    }
+    if (isLocalFile) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+        material.Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          gap: 2,
+          height: "100%",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(document$1.Document, { fontSize: "large" }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s3", weight: "medium", children: name }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(appbar.Button, { variant: "outlined", onClick: () => window.open(fullUrl, "_blank"), children: "Download" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      DocViewer,
+      {
+        documents: [{ uri: fullUrl, fileName: name, fileType: ext }],
+        pluginRenderers: DocViewer.DocViewerRenderers,
+        config: { header: { disableHeader: true } },
+        style: { width: "100%", height: "100%" }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: () => setOpen(true), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(tick.Eye, { fontSize: "small" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Modal, { open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { sx: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      bgcolor: "background.paper",
+      boxShadow: 24,
+      borderRadius: 1,
+      width: "90vw",
+      height: "90vh",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s3", weight: "medium", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.IconButton, { onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Close, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Box, { flex: 1, p: 2, sx: { overflow: "auto", minHeight: 0 }, children: renderContent() })
+    ] }) })
+  ] });
+};
 const ExpandableSummaryWrapper = ({
   children,
   defaultExpanded = true,
@@ -10350,9 +10452,8 @@ const ReportsTitleBar = (props) => {
   ];
   const [selectedItems, setSelectedItems] = React.useState(defaultSelected);
   const [level, setLevel] = React.useState(1);
-  const [actionAnchorEl, setActionAnchorEl] = React.useState(
-    null
-  );
+  const [actionAnchorEl, setActionAnchorEl] = React.useState(null);
+  const [appliedFiltersAnchorEl, setAppliedFiltersAnchorEl] = React.useState(null);
   const [allFields, setAllFields] = React.useState([]);
   const [dateRange, setDateRange] = React.useState();
   const [open, setOpen] = React.useState(false);
@@ -10449,6 +10550,19 @@ const ReportsTitleBar = (props) => {
     multiple: filter.multiple || false,
     options: filter.options || void 0
   }))) || [];
+  const isFilterApplied = (val) => Array.isArray(val) ? val.length > 0 : val !== void 0 && val !== null && val !== "";
+  const selectedFilters = filtersConfig.filter(
+    (config) => showFilter(config.key)
+  );
+  const selectedFilterCount = selectedFilters.length;
+  const appliedFilterCount = filtersConfig.filter(
+    (config) => isFilterApplied(filters == null ? void 0 : filters[config.valueKey])
+  ).length;
+  React.useEffect(() => {
+    if (selectedFilterCount === 0 && appliedFiltersAnchorEl) {
+      setAppliedFiltersAnchorEl(null);
+    }
+  }, [selectedFilterCount, appliedFiltersAnchorEl]);
   React.useEffect(() => {
     if (!autoShowFiltersWithValue) return;
     setSelectedItems((prev) => {
@@ -10619,9 +10733,10 @@ const ReportsTitleBar = (props) => {
     multiple = false,
     options: options2,
     show = true,
-    showCancelButton = true
+    showCancelButton = true,
+    forceShow = false
   }) => {
-    if (!showFilter(key) || !show) return null;
+    if (!showFilter(key) && !forceShow || !show) return null;
     const companyKey = (filterKeys == null ? void 0 : filterKeys.company) || "company";
     const companyId = filters == null ? void 0 : filters[companyKey];
     const hasCompany = Array.isArray(companyId) ? companyId.length > 0 : !!companyId;
@@ -10651,13 +10766,12 @@ const ReportsTitleBar = (props) => {
       }
     );
   };
-  const FilterContainer = () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
-    filtersConfig.map(renderFilter),
-    customFilterComponents.map(({ key, component }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(React.Fragment, { children: component }, key))
-  ] });
   const handleFilterClose = () => {
     setActionAnchorEl(null);
   };
+  const handleAppliedFilterClose = () => {
+    setAppliedFiltersAnchorEl(null);
+  };
   const ExportContainer = React.memo(() => {
     var _a2;
     const handleClose2 = () => setExportAnchorEl(null);
@@ -10704,27 +10818,7 @@ const ReportsTitleBar = (props) => {
         }
       ) }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "h3", weight: "medium", color: "theme.secondary.1000", children: title }) }),
       searchBar && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "reportsTitleBar--SearchBar", children: searchBar }),
-      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-        ReportButtons,
-        {
-          zIndex: 999,
-          className: "reportsTitleBar--RightContent",
-          buttons
-        }
-      )
-    ] }),
-    (tabs == null ? void 0 : tabs.length) ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      android12Switch.TabBar,
-      {
-        tabs: tabs || [],
-        activeValue,
-        setActiveValue,
-        isTabViewOnly: true
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", my: 2.5, alignItems: "center", flexWrap: "wrap", gap: 1 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "reportsTitleBar--FilterWrapper", children: [
-        FilterContainer(),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "reportsTitleBar--RightContent", children: [
         showDateFilter && isDateRange && (filters == null ? void 0 : filters[endDateKey]) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
           "div",
           {
@@ -10865,110 +10959,165 @@ const ReportsTitleBar = (props) => {
               /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(android12Switch.default_1$2, {})
             ]
           }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "report-display", children: [
-        ((_a = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            appbar.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__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Export, { fontSize: "small" }),
-              onClick: (event) => setExportAnchorEl(event.currentTarget),
-              children: t("common.export")
-            }
-          ),
-          exportAnchorEl && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ExportContainer, {})
-        ] }),
-        (filterDropDown == null ? void 0 : filterDropDown.length) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            appbar.Button,
-            {
-              sx: ({ palette }) => ({
-                border: "1px solid",
-                borderColor: "grey.200",
-                borderRadius: "50px",
-                color: `${palette.grey[800]} !important`,
-                "&:hover": {
-                  bgcolor: `${palette.grey[200]} !important`
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "report-display", children: [
+          ((_a = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              appbar.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__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Export, { fontSize: "small" }),
+                onClick: (event) => setExportAnchorEl(event.currentTarget),
+                children: t("common.export")
+              }
+            ),
+            exportAnchorEl && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ExportContainer, {})
+          ] }),
+          (filterDropDown == null ? void 0 : filterDropDown.length) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              appbar.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__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Filter, { fontSize: "small" }),
+                onClick: (event) => setActionAnchorEl(event.currentTarget),
+                children: t("common.filter")
+              }
+            ) }),
+            showLevelBtn && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } }),
+            selectedFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              appbar.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__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Filter, { fontSize: "small" }),
+                endIcon: appliedFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  material.Box,
+                  {
+                    component: "span",
+                    sx: ({ palette }) => ({
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      minWidth: 20,
+                      height: 20,
+                      px: 0.75,
+                      borderRadius: "10px",
+                      fontSize: `12px !important`,
+                      fontWeight: 600,
+                      lineHeight: 1,
+                      color: palette.common.white,
+                      bgcolor: palette.primary.main
+                    }),
+                    children: appliedFilterCount
+                  }
+                ) : null,
+                onClick: (event) => setAppliedFiltersAnchorEl(event.currentTarget),
+                children: t("common.appliedFilters", "Applied Filters")
+              }
+            )
+          ] }),
+          filterDropDownFunc(),
+          showLevelBtn && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { className: "reportsTitleBar--FilterAction--lvWrapper", children: [
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(useAuth.Typography, { type: "s3", weight: "medium", color: "grey.800", children: [
+                " Level ",
+                level,
+                " of ",
+                dataLength
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.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
                 }
-              }),
-              variant: "text",
-              startIcon: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Filter, { fontSize: "small" }),
-              onClick: (event) => setActionAnchorEl(event.currentTarget),
-              children: t("common.filter")
-            }
-          ) }),
-          showLevelBtn && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
-        ] }),
-        filterDropDownFunc(),
-        showLevelBtn && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { className: "reportsTitleBar--FilterAction--lvWrapper", children: [
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(useAuth.Typography, { type: "s3", weight: "medium", color: "grey.800", children: [
-              " Level ",
-              level,
-              " of ",
-              dataLength
+              }), children: [
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Button, { onClick: () => {
+                  setLevel(level == dataLength ? level : level + 1);
+                  handleRowsCollapse == null ? void 0 : handleRowsCollapse(level);
+                }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("img", { src: images.images.common.expand }) }),
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Button, { onClick: () => {
+                  setLevel(level != 1 ? level - 1 : 1);
+                  handleRowsExpand == null ? void 0 : handleRowsExpand(level);
+                }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("img", { src: images.images.common.collapse }) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.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__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Button, { onClick: () => {
-                setLevel(level == dataLength ? level : level + 1);
-                handleRowsCollapse == null ? void 0 : handleRowsCollapse(level);
-              }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("img", { src: images.images.common.expand }) }),
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Button, { onClick: () => {
-                setLevel(level != 1 ? level - 1 : 1);
-                handleRowsExpand == null ? void 0 : handleRowsExpand(level);
-              }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("img", { src: images.images.common.collapse }) })
-            ] })
+            isDateFilterEnabled && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
           ] }),
-          isDateFilterEnabled && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
+          isDateFilterEnabled && showDateFilter && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s3", weight: "medium", color: "grey.800", children: "As of: " }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              ReportButtons,
+              {
+                zIndex: 997,
+                className: "reportsTitleBar--RightContent",
+                dropdownMenuButtonData: {
+                  icon: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Calendar, { fontSize: "small" }),
+                  children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+                    navigationUtils.RANGE[dateRange],
+                    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(android12Switch.default_1$2, {})
+                  ] }),
+                  options
+                },
+                toggleCallback
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { ref: dateSelectRef })
+          ] })
         ] }),
-        isDateFilterEnabled && showDateFilter && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s3", weight: "medium", color: "grey.800", children: "As of: " }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            ReportButtons,
-            {
-              zIndex: 997,
-              className: "reportsTitleBar--RightContent",
-              dropdownMenuButtonData: {
-                icon: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(radioButton.Calendar, { fontSize: "small" }),
-                children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
-                  navigationUtils.RANGE[dateRange],
-                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(android12Switch.default_1$2, {})
-                ] }),
-                options
-              },
-              toggleCallback
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { ref: dateSelectRef })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          ReportButtons,
+          {
+            zIndex: 999,
+            buttons
+          }
+        )
       ] })
     ] }),
+    (tabs == null ? void 0 : tabs.length) ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      android12Switch.TabBar,
+      {
+        tabs: tabs || [],
+        activeValue,
+        setActiveValue,
+        isTabViewOnly: true
+      }
+    ) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
       material.Popper,
       {
@@ -11029,6 +11178,99 @@ const ReportsTitleBar = (props) => {
           }
         )
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      material.Popover,
+      {
+        anchorEl: appliedFiltersAnchorEl,
+        open: Boolean(appliedFiltersAnchorEl),
+        onClose: handleAppliedFilterClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: {
+          paper: {
+            sx: {
+              mt: 1,
+              minWidth: 280,
+              maxWidth: 340,
+              borderRadius: 2,
+              overflow: "hidden",
+              boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
+            }
+          }
+        },
+        children: (() => {
+          const hasContent = selectedFilters.length > 0 || customFilterComponents.length > 0;
+          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+              material.Box,
+              {
+                sx: {
+                  px: 2,
+                  py: 1.5,
+                  borderBottom: "1px solid",
+                  borderColor: "grey.200",
+                  bgcolor: "grey.50",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s3", weight: "medium", color: "grey.800", children: t("common.appliedFilters", "Applied Filters") }),
+                  appliedFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    material.Box,
+                    {
+                      component: "span",
+                      sx: ({ palette }) => ({
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        minWidth: 20,
+                        height: 20,
+                        px: 0.75,
+                        borderRadius: "10px",
+                        fontSize: "12px !important",
+                        fontWeight: 600,
+                        lineHeight: 1,
+                        color: palette.common.white,
+                        bgcolor: palette.primary.main
+                      }),
+                      children: appliedFilterCount
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              material.Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  p: 2,
+                  maxHeight: 380,
+                  overflowY: "auto"
+                },
+                children: hasContent ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+                  selectedFilters.map((config) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+                    material.Box,
+                    {
+                      sx: { display: "flex", flexDirection: "column", gap: 0.75 },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s4", weight: "medium", color: "grey.700", children: t(config.label) }),
+                        renderFilter(config)
+                      ]
+                    },
+                    config.key
+                  )),
+                  customFilterComponents.map(({ key, component }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(material.Box, { children: component }, key))
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useAuth.Typography, { type: "s4", color: "grey.500", children: t("common.noFiltersApplied", "No filters applied") })
+              }
+            )
+          ] });
+        })()
+      }
     )
   ] });
 };
@@ -16817,6 +17059,7 @@ exports.CustomToggleSwitch = CustomToggleSwitch;
 exports.DashBoardCard = DashBoardCard;
 exports.DashBoardHeader = DashBoardHeader;
 exports.DateRangePicker = DateRangePicker;
+exports.DocumentPreview = DocumentPreview;
 exports.DonutChart = DonutChart;
 exports.DonutChart$1 = DonutChart$1;
 exports.DyanmicTextEditor = DyanmicTextEditor;
@@ -16868,4 +17111,4 @@ exports.dynamicFields = dynamicFields;
 exports.fields = fields;
 exports.useDynamicLayout = useDynamicLayout;
 exports.validator = validator;
-//# sourceMappingURL=uom-field-wrapper-DQKUL4a5.js.map
+//# sourceMappingURL=uom-field-wrapper-QpAULeef.js.map