@erpsquad/common 1.10.65 → 1.10.67

package/dist/chunks/{uom-field-wrapper-BN-gHLZh.esm.js → uom-field-wrapper-CvW-ILPC.esm.js}

@@ -2,15 +2,15 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-ClFauRgV.esm.js";
 import { useFieldArray, Controller, useForm, useWatch, useFormContext } from "react-hook-form";
 import { P as PropTypes, e as _objectWithoutPropertiesLoose, _ as _extends$1, g as generateUtilityClass, j as capitalize, u as useDefaultProps, k as interopRequireDefaultExports, y as lighten_1, z as darken_1, f as alpha_1 } from "./identifier-0SZUhw_A.esm.js";
 import { i as default_1$3, T as Typography, e as useForkRef, o as ownerWindow, d as useEnhancedEffect, h as debounce, p as isMuiElement, u as useAuth, q as useControlled, r as requireCreateSvgIcon } from "./useAuth-BVQ2r4xx.esm.js";
-import { aq as default_1$4, w as DynamicSelect, h as DateTimePicker, D as DatePicker$1, ar as useThemeProps, A as Accordion$1, a8 as Select, f as ChipOrPlaceholder$1, i as DropdownButton, s as DynamicPhone, u as DynamicSearchSelect, k as DynamicCheckBox, af as TitleDropdownButton, T as HeaderCard, ad as TabBar, as as default_1$5, a7 as SearchableSelect, at as Chip$1, ae as TimePicker, aj as UploadMedia, a3 as PhoneInput, Z as ModalLoader, Y as MaterialTable, m as DynamicDate, z as DynamicTime, C as ChipGenerator, M as Footer, F as Fallback, au as IconButton$1, av as TabContext, aw as TabList, ax as Tab, ay as TabPanel, az as default_1$9, a as ActionBar, aA as SwitchBase } from "./android-12-switch-CrpXnQsd.esm.js";
-import { D as DynamicInput, E as Typography$1, b as Avatar, G as o, M as Modal, B as Button, c as ConfirmPopUp, f as Box$1, d as Toast, u as useTheme$1, S as SearchBar, I as resolveComponentProps, J as mergeSlotProps, K as appendOwnerState, P as Paper$1, o as chainPropTypes, h as ButtonBase$1, y as default_1$6, T as TextField$1, e as Tooltip$1, F as default_1$7, x as default_1$8, N as Menu$2, O as MenuItem$1, q as useRtl, z as List$1, v as ListItem, Q as ListItemText$1, U as refType } from "./appbar-CHxm7L_f.esm.js";
+import { aq as default_1$4, w as DynamicSelect, h as DateTimePicker, D as DatePicker$1, ar as useThemeProps, A as Accordion$1, a8 as Select, f as ChipOrPlaceholder$1, i as DropdownButton, s as DynamicPhone, u as DynamicSearchSelect, k as DynamicCheckBox, af as TitleDropdownButton, T as HeaderCard, ad as TabBar, as as default_1$5, a7 as SearchableSelect, at as Chip$1, ae as TimePicker, aj as UploadMedia, a3 as PhoneInput, Z as ModalLoader, Y as MaterialTable, m as DynamicDate, z as DynamicTime, C as ChipGenerator, M as Footer, F as Fallback, au as IconButton$1, av as TabContext, aw as TabList, ax as Tab, ay as TabPanel, az as default_1$9, a as ActionBar, aA as SwitchBase } from "./android-12-switch-CRhzpgwy.esm.js";
+import { D as DynamicInput, E as Typography$1, b as Avatar, G as o, M as Modal, B as Button, c as ConfirmPopUp, f as Box$1, d as Toast, u as useTheme$1, S as SearchBar, I as resolveComponentProps, J as mergeSlotProps, K as appendOwnerState, P as Paper$1, o as chainPropTypes, h as ButtonBase$1, y as default_1$6, T as TextField$1, e as Tooltip$1, F as default_1$7, x as default_1$8, N as Menu$2, O as MenuItem$1, q as useRtl, z as List$1, v as ListItem, Q as ListItemText$1, U as refType } from "./appbar-JugRLTTB.esm.js";
 import * as React from "react";
 import React__default, { useState, lazy, useMemo, useRef, useEffect, useCallback, useLayoutEffect, useContext, createElement, createContext, cloneElement } from "react";
 import DatePicker from "react-datepicker";
 /* empty css                            */
 import { C as CalenderIcon, i as images } from "./images-DvZ6-RV8.esm.js";
 import { KeyboardArrowLeft, KeyboardArrowRight, Close, ChevronLeft, ChevronRight, Add, AccessTimeRounded, KeyboardArrowUp, KeyboardArrowDown, Clear } from "@mui/icons-material";
-import { Box, styled as styled$1, TextField, DialogTitle, IconButton, DialogContent, MenuItem, DialogActions, CircularProgress, FormControlLabel, Checkbox as Checkbox$2, Grid, ButtonBase, useTheme, useMediaQuery, Drawer, Tooltip, Collapse, Divider, ButtonGroup, Button as Button$1, Popper, Grow, Paper, ClickAwayListener, Menu as Menu$1, ListItemIcon, ListItemText, OutlinedInput, InputAdornment, Dialog, FormHelperText, Card as Card$1, CardContent as CardContent$1, TableRow, TableCell, TableContainer, Table, TableHead, TableBody } from "@mui/material";
+import { Box, styled as styled$1, TextField, DialogTitle, IconButton, DialogContent, MenuItem, DialogActions, CircularProgress, FormControlLabel, Checkbox as Checkbox$2, Grid, ButtonBase, Modal as Modal$1, useTheme, useMediaQuery, Drawer, Tooltip, Collapse, Divider, ButtonGroup, Button as Button$1, Popper, Grow, Paper, ClickAwayListener, Menu as Menu$1, ListItemIcon, ListItemText, OutlinedInput, InputAdornment, Popover, Dialog, FormHelperText, Card as Card$1, CardContent as CardContent$1, TableRow, TableCell, TableContainer, Table, TableHead, TableBody } from "@mui/material";
 import { u as useLanguage } from "./useLangauge-Cb9mu6cS.esm.js";
 import dayjs from "dayjs";
 /* empty css                    */
@@ -21,14 +21,14 @@ import { Sparkles, X, TrendingUp, AlertTriangle, Clock, SendHorizontal, Check, C
 import * as d3 from "d3";
 import { marked } from "marked";
 import { bw as streamV1AiFeatureChat, aF as getV1User, bx as getV1ReportsScheduleReport, J as getV1ReportsReportList, by as deleteV1ReportsScheduleReportId, bz as putV1ReportsUpdateScheduleReportId, bA as postV1ReportsScheduleReport, y as getV1FormBuilder } from "./api-DhR7H-jj.esm.js";
-import { b as getApiConfigSafe, a as auth, g as getApiConfig } from "./api-config-GOys-syK.esm.js";
+import { b as getApiConfigSafe, g as getApiConfig, a as auth } from "./api-config-GOys-syK.esm.js";
 import * as Yup from "yup";
-import { C as Checkbox$1, f as usePages, b as useDeepMemo, a as useApi } from "./checkbox-BG9DbVQ5.esm.js";
+import { C as Checkbox$1, f as usePages, b as useDeepMemo, a as useApi } from "./checkbox-aq3lcSNh.esm.js";
 import { C as Chip, M as Menu, t as transformTableColumns, b as formateValueByType, r as renderEmptyRowsFallback } from "./form-builder-deconversion-DNCtkxQC.esm.js";
-import { M as MoreIcon, q as Filter, e as Close$1, c as ArrowUpDown, g as Export, p as Calendar$1, a as ArrowDown } from "./radio-button-DSUBR45C.esm.js";
+import { M as MoreIcon, e as Close$1, q as Filter, c as ArrowUpDown, g as Export, p as Calendar$1, a as ArrowDown } from "./radio-button-DSUBR45C.esm.js";
 import { enqueueSnackbar, useSnackbar, SnackbarProvider } from "notistack";
 import { useDispatch } from "react-redux";
-import { a as apiHelper, c as useGenericDataFetcher, b as useAppTranslations } from "./ERPUIProvider-DtSGxSro.esm.js";
+import { a as apiHelper, c as useGenericDataFetcher, b as useAppTranslations } from "./ERPUIProvider-B25RO0oy.esm.js";
 import Board from "@asseinfo/react-kanban";
 import { a as calculateEntries, t as truncateDecimals } from "./translations-Df5Mt7kz.esm.js";
 import FullCalendar from "@fullcalendar/react";
@@ -42,22 +42,25 @@ import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
 import { E as Eye, a as EyeOff } from "./tick-BKOomNx0.esm.js";
 import { j as Copy$1, e as ArrowUp } from "./arrow-up-BDkqlEB_.esm.js";
 import ReactFlagsSelect from "react-flags-select";
+import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
+import Papa from "papaparse";
+import { D as Document } from "./document-rki7DMqA.esm.js";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { g as getEntityId, R as RANGE, a as handleCompareDateRangeSync, h as handleCompareDateRange } from "./navigation-utils-ChG-fDRf.esm.js";
-import { E as ErpLoader } from "./page-context-BR0JEfCp.esm.js";
+import { E as ErpLoader } from "./page-context-Da49_1zP.esm.js";
 import { Gantt, ViewMode } from "gantt-task-react";
 import { DateRange, Calendar } from "react-date-range";
 import { v as viewTypes } from "./action-bar-BsXTcYpL.esm.js";
 import DataEditor, { GridCellKind } from "@glideapps/glide-data-grid";
 import { useExtraCells } from "@glideapps/glide-data-grid-cells";
 import { createPortal } from "react-dom";
-import { C as Collapse$1 } from "./sidebar-C_fhINvI.esm.js";
+import { C as Collapse$1 } from "./sidebar-Cc9-z3ES.esm.js";
 import { useMaterialReactTable, MaterialReactTable } from "material-react-table";
 import { R as RecgtangleIcon, C as CheckBoxIcon$1, T as Trash, E as Edit } from "./trash-Dgfsw2UY.esm.js";
 import _$1 from "lodash";
-import { P as PathnameDocument } from "./modules-BjL8mfuw.esm.js";
+import { P as PathnameDocument } from "./modules-DmtCo0T_.esm.js";
 import { f as PathnameRental, b as PathnameCrm, e as PathnamePurchase, d as PathnameManufacturing, c as PathnameInventory, a as PathnameAccounting } from "./pathname.rental-Dvo5a732.esm.js";
-import { a as PathnameUsers } from "./route-page-map-gBJ6YfCI.esm.js";
+import { a as PathnameUsers } from "./route-page-map-BRDtQTgL.esm.js";
 import { u as useAppDispatch, a as useAppSelector } from "./hooks-Cj9Yhy-E.esm.js";
 import { f as fetchCompanies } from "./store-Djcai2P1.esm.js";
 import { useDropzone } from "react-dropzone";
@@ -4264,29 +4267,9 @@ const AddressModal = ({
               placeholder: t(`accounting.${translationKey}.addressModal.address3_placeholder`)
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            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__ */ jsxRuntimeExports.jsx(Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            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__ */ jsxRuntimeExports.jsx(Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             DynamicInput,
             {
@@ -4336,17 +4319,7 @@ const AddressModal = ({
               formControl: control
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            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__ */ jsxRuntimeExports.jsx(Grid, { item: true, sm: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             DynamicInput,
             {
@@ -4657,6 +4630,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] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetch(url).then((r) => r.text()).then((text) => {
+      const result = Papa.parse(text);
+      setData(result.data);
+      setLoading(false);
+    });
+  }, [url]);
+  if (loading) return /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s3", children: "Loading..." });
+  if (!data.length) return /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s3", children: "Empty file" });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { component: "table", sx: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: (data[0] || []).map((h, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", { style: { border: "1px solid #ccc", padding: 8, background: "#f5f5f5", textAlign: "left" }, children: h }, i)) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: data.slice(1).map((row, r) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: row.map((c, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { border: "1px solid #ccc", padding: 8 }, children: c }, i)) }, r)) })
+  ] });
+};
+const TextPreview = ({ url }) => {
+  const [text, setText] = useState("");
+  useEffect(() => {
+    fetch(url).then((r) => r.text()).then(setText);
+  }, [url]);
+  return /* @__PURE__ */ 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] = useState(false);
+  const name = fileName || (fileUrl == null ? void 0 : fileUrl.substring((fileUrl == null ? void 0 : fileUrl.lastIndexOf("/")) + 1)) || "";
+  const ext = useMemo(() => {
+    var _a2;
+    return ((_a2 = name.split(".").pop()) == null ? void 0 : _a2.toLowerCase()) || "";
+  }, [name]);
+  const s3BucketUrl = ((_a = getApiConfig()) == null ? void 0 : _a.s3BucketUrl) || "https://erpforce-dev.s3.eu-west-1.amazonaws.com/";
+  const fullUrl = 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__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: fullUrl,
+          alt: name,
+          style: { width: "100%", height: "100%", objectFit: "contain" }
+        }
+      );
+    }
+    if (pdfExts.includes(ext)) {
+      return isLocalFile ? /* @__PURE__ */ jsxRuntimeExports.jsx("embed", { src: fullUrl, title: name, style: { width: "100%", height: "100%" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("iframe", { src: fullUrl, title: name, style: { width: "100%", height: "100%", border: "none" } });
+    }
+    if (iframeExts.includes(ext)) {
+      if (ext === "csv") {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(CsvPreview, { url: fullUrl });
+      }
+      if (isLocalFile) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(TextPreview, { url: fullUrl });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("iframe", { src: fullUrl, title: name, style: { width: "100%", height: "100%", border: "none" } });
+    }
+    if (isLocalFile) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          gap: 2,
+          height: "100%",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Document, { fontSize: "large" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s3", weight: "medium", children: name }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outlined", onClick: () => window.open(fullUrl, "_blank"), children: "Download" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DocViewer,
+      {
+        documents: [{ uri: fullUrl, fileName: name, fileType: ext }],
+        pluginRenderers: DocViewerRenderers,
+        config: { header: { disableHeader: true } },
+        style: { width: "100%", height: "100%" }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { size: "small", onClick: () => setOpen(true), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { fontSize: "small" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Modal$1, { open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(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__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s3", weight: "medium", children: name }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Close$1, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { flex: 1, p: 2, sx: { overflow: "auto", minHeight: 0 }, children: renderContent() })
+    ] }) })
+  ] });
+};
 const ExpandableSummaryWrapper = ({
   children,
   defaultExpanded = true,
@@ -10331,9 +10433,8 @@ const ReportsTitleBar = (props) => {
   ];
   const [selectedItems, setSelectedItems] = useState(defaultSelected);
   const [level, setLevel] = useState(1);
-  const [actionAnchorEl, setActionAnchorEl] = useState(
-    null
-  );
+  const [actionAnchorEl, setActionAnchorEl] = useState(null);
+  const [appliedFiltersAnchorEl, setAppliedFiltersAnchorEl] = useState(null);
   const [allFields, setAllFields] = useState([]);
   const [dateRange, setDateRange] = useState();
   const [open, setOpen] = useState(false);
@@ -10430,6 +10531,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;
+  useEffect(() => {
+    if (selectedFilterCount === 0 && appliedFiltersAnchorEl) {
+      setAppliedFiltersAnchorEl(null);
+    }
+  }, [selectedFilterCount, appliedFiltersAnchorEl]);
   useEffect(() => {
     if (!autoShowFiltersWithValue) return;
     setSelectedItems((prev) => {
@@ -10600,9 +10714,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;
@@ -10632,13 +10747,12 @@ const ReportsTitleBar = (props) => {
       }
     );
   };
-  const FilterContainer = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    filtersConfig.map(renderFilter),
-    customFilterComponents.map(({ key, component }) => /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, key))
-  ] });
   const handleFilterClose = () => {
     setActionAnchorEl(null);
   };
+  const handleAppliedFilterClose = () => {
+    setAppliedFiltersAnchorEl(null);
+  };
   const ExportContainer = React__default.memo(() => {
     var _a2;
     const handleClose2 = () => setExportAnchorEl(null);
@@ -10685,27 +10799,7 @@ const ReportsTitleBar = (props) => {
         }
       ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "h3", weight: "medium", color: "theme.secondary.1000", children: title }) }),
       searchBar && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "reportsTitleBar--SearchBar", children: searchBar }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ReportButtons,
-        {
-          zIndex: 999,
-          className: "reportsTitleBar--RightContent",
-          buttons
-        }
-      )
-    ] }),
-    (tabs == null ? void 0 : tabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TabBar,
-      {
-        tabs: tabs || [],
-        activeValue,
-        setActiveValue,
-        isTabViewOnly: true
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", my: 2.5, alignItems: "center", flexWrap: "wrap", gap: 1 }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "reportsTitleBar--FilterWrapper", children: [
-        FilterContainer(),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "reportsTitleBar--RightContent", children: [
         showDateFilter && isDateRange && (filters == null ? void 0 : filters[endDateKey]) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
@@ -10846,110 +10940,165 @@ const ReportsTitleBar = (props) => {
               /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$5, {})
             ]
           }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "report-display", children: [
-        ((_a = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(Export, { fontSize: "small" }),
-              onClick: (event) => setExportAnchorEl(event.currentTarget),
-              children: t("common.export")
-            }
-          ),
-          exportAnchorEl && /* @__PURE__ */ jsxRuntimeExports.jsx(ExportContainer, {})
-        ] }),
-        (filterDropDown == null ? void 0 : filterDropDown.length) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              sx: ({ palette }) => ({
-                border: "1px solid",
-                borderColor: "grey.200",
-                borderRadius: "50px",
-                color: `${palette.grey[800]} !important`,
-                "&:hover": {
-                  bgcolor: `${palette.grey[200]} !important`
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "report-display", children: [
+          ((_a = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(Export, { fontSize: "small" }),
+                onClick: (event) => setExportAnchorEl(event.currentTarget),
+                children: t("common.export")
+              }
+            ),
+            exportAnchorEl && /* @__PURE__ */ jsxRuntimeExports.jsx(ExportContainer, {})
+          ] }),
+          (filterDropDown == null ? void 0 : filterDropDown.length) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(Filter, { fontSize: "small" }),
+                onClick: (event) => setActionAnchorEl(event.currentTarget),
+                children: t("common.filter")
+              }
+            ) }),
+            showLevelBtn && /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } }),
+            selectedFilterCount > 0 && /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(Filter, { fontSize: "small" }),
+                endIcon: appliedFilterCount > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  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__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: "reportsTitleBar--FilterAction--lvWrapper", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { type: "s3", weight: "medium", color: "grey.800", children: [
+                " Level ",
+                level,
+                " of ",
+                dataLength
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.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
                 }
-              }),
-              variant: "text",
-              startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(Filter, { fontSize: "small" }),
-              onClick: (event) => setActionAnchorEl(event.currentTarget),
-              children: t("common.filter")
-            }
-          ) }),
-          showLevelBtn && /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
-        ] }),
-        filterDropDownFunc(),
-        showLevelBtn && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: "reportsTitleBar--FilterAction--lvWrapper", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { type: "s3", weight: "medium", color: "grey.800", children: [
-              " Level ",
-              level,
-              " of ",
-              dataLength
+              }), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: () => {
+                  setLevel(level == dataLength ? level : level + 1);
+                  handleRowsCollapse == null ? void 0 : handleRowsCollapse(level);
+                }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: images.common.expand }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: () => {
+                  setLevel(level != 1 ? level - 1 : 1);
+                  handleRowsExpand == null ? void 0 : handleRowsExpand(level);
+                }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: images.common.collapse }) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(Button$1, { onClick: () => {
-                setLevel(level == dataLength ? level : level + 1);
-                handleRowsCollapse == null ? void 0 : handleRowsCollapse(level);
-              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: images.common.expand }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: () => {
-                setLevel(level != 1 ? level - 1 : 1);
-                handleRowsExpand == null ? void 0 : handleRowsExpand(level);
-              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: images.common.collapse }) })
-            ] })
+            isDateFilterEnabled && /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
           ] }),
-          isDateFilterEnabled && /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
+          isDateFilterEnabled && showDateFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s3", weight: "medium", color: "grey.800", children: "As of: " }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ReportButtons,
+              {
+                zIndex: 997,
+                className: "reportsTitleBar--RightContent",
+                dropdownMenuButtonData: {
+                  icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { fontSize: "small" }),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    RANGE[dateRange],
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$5, {})
+                  ] }),
+                  options
+                },
+                toggleCallback
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: dateSelectRef })
+          ] })
         ] }),
-        isDateFilterEnabled && showDateFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s3", weight: "medium", color: "grey.800", children: "As of: " }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ReportButtons,
-            {
-              zIndex: 997,
-              className: "reportsTitleBar--RightContent",
-              dropdownMenuButtonData: {
-                icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { fontSize: "small" }),
-                children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                  RANGE[dateRange],
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$5, {})
-                ] }),
-                options
-              },
-              toggleCallback
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: dateSelectRef })
-        ] })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ReportButtons,
+          {
+            zIndex: 999,
+            buttons
+          }
+        )
       ] })
     ] }),
+    (tabs == null ? void 0 : tabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TabBar,
+      {
+        tabs: tabs || [],
+        activeValue,
+        setActiveValue,
+        isTabViewOnly: true
+      }
+    ) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Popper,
       {
@@ -11010,6 +11159,99 @@ const ReportsTitleBar = (props) => {
           }
         )
       }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      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__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Box,
+              {
+                sx: {
+                  px: 2,
+                  py: 1.5,
+                  borderBottom: "1px solid",
+                  borderColor: "grey.200",
+                  bgcolor: "grey.50",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s3", weight: "medium", color: "grey.800", children: t("common.appliedFilters", "Applied Filters") }),
+                  appliedFilterCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    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__ */ jsxRuntimeExports.jsx(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  p: 2,
+                  maxHeight: 380,
+                  overflowY: "auto"
+                },
+                children: hasContent ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  selectedFilters.map((config) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    Box,
+                    {
+                      sx: { display: "flex", flexDirection: "column", gap: 0.75 },
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s4", weight: "medium", color: "grey.700", children: t(config.label) }),
+                        renderFilter(config)
+                      ]
+                    },
+                    config.key
+                  )),
+                  customFilterComponents.map(({ key, component }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: component }, key))
+                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { type: "s4", color: "grey.500", children: t("common.noFiltersApplied", "No filters applied") })
+              }
+            )
+          ] });
+        })()
+      }
     )
   ] });
 };
@@ -16773,58 +17015,59 @@ const UomFieldWrapper = ({
   );
 };
 export {
-  MaterialEditableTable as $,
+  ListingComponent as $,
   AISummaryPanel as A,
   BarChart as B,
   CalculationSummary as C,
   DonutChart as D,
-  DynamicDateTime as E,
-  DynamicLayoutWrapper as F,
+  DynamicDateRange as E,
+  DynamicDateTime as F,
   GridCard as G,
-  DynamicModal as H,
-  ElementController as I,
-  EntityViewWrapper as J,
-  ExpandableSummaryWrapper as K,
-  FormData as L,
-  FormLoader as M,
-  Forms as N,
-  GanttChart as O,
-  GridCard$1 as P,
-  GridCardMarkup as Q,
-  GridFallback as R,
-  GridWrapper as S,
-  GroupedBarChart as T,
-  HrLine as U,
-  InventoryReportsTitleBar as V,
-  ItemResponseDetails as W,
-  LabelValue as X,
-  LineChart as Y,
-  List as Z,
-  ListingComponent as _,
+  DynamicLayoutWrapper as H,
+  DynamicModal as I,
+  ElementController as J,
+  EntityViewWrapper as K,
+  ExpandableSummaryWrapper as L,
+  FormData as M,
+  FormLoader as N,
+  Forms as O,
+  GanttChart as P,
+  GridCard$1 as Q,
+  GridCardMarkup as R,
+  GridFallback as S,
+  GridWrapper as T,
+  GroupedBarChart as U,
+  HrLine as V,
+  InventoryReportsTitleBar as W,
+  ItemResponseDetails as X,
+  LabelValue as Y,
+  LineChart as Z,
+  List as _,
   ActivityTag as a,
-  MultiLine as a0,
-  MultiLineChart as a1,
-  MultiSelect as a2,
-  PageLoader as a3,
-  QuickApprovalModal as a4,
-  ReportButtons as a5,
-  ReportTable as a6,
-  ReportsTitleBar as a7,
-  GeneralScheduleReport as a8,
-  ScheduleReportModal as a9,
-  Snackbar as aa,
-  SubHeaderDoc as ab,
-  TabBarUi as ac,
-  TextArea as ad,
-  TimeRangePicker as ae,
-  UomFieldWrapper as af,
-  Upload as ag,
-  UserDropdown as ah,
-  calculateOptimalSizes as ai,
-  dynamicFields as aj,
-  fields as ak,
-  useDynamicLayout as al,
-  validator as am,
+  MaterialEditableTable as a0,
+  MultiLine as a1,
+  MultiLineChart as a2,
+  MultiSelect as a3,
+  PageLoader as a4,
+  QuickApprovalModal as a5,
+  ReportButtons as a6,
+  ReportTable as a7,
+  ReportsTitleBar as a8,
+  GeneralScheduleReport as a9,
+  ScheduleReportModal as aa,
+  Snackbar as ab,
+  SubHeaderDoc as ac,
+  TabBarUi as ad,
+  TextArea as ae,
+  TimeRangePicker as af,
+  UomFieldWrapper as ag,
+  Upload as ah,
+  UserDropdown as ai,
+  calculateOptimalSizes as aj,
+  dynamicFields as ak,
+  fields as al,
+  useDynamicLayout as am,
+  validator as an,
   ActivityTag$1 as b,
   AddressModal as c,
   AdvancedDynamicLayoutWrapper as d,
@@ -16847,8 +17090,8 @@ export {
   DashBoardCard as u,
   DashBoardHeader as v,
   DateRangePicker as w,
-  DonutChart$1 as x,
-  DyanmicTextEditor as y,
-  DynamicDateRange as z
+  DocumentPreview as x,
+  DonutChart$1 as y,
+  DyanmicTextEditor as z
 };
-//# sourceMappingURL=uom-field-wrapper-BN-gHLZh.esm.js.map
+//# sourceMappingURL=uom-field-wrapper-CvW-ILPC.esm.js.map