@codezee/sixtify-brahma 0.2.29 → 0.2.30

package/packages/shared-components/dist/FilterList/FilterListV2.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterListV2 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_1 = require("@hookform/resolvers/zod");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const icons_1 = require("@mui/x-date-pickers/icons");
@@ -9,36 +10,80 @@ const lodash_1 = require("lodash");
 const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const zod_2 = require("zod");
 const Button_1 = require("../Button");
 const FilterPill_1 = require("../Chips/FilterPill");
 const FormFields_1 = require("../FormFields");
 const Switch_1 = require("../FormFields/Switch");
 const PadBox_1 = require("../PadBox");
 const SvgFilterList_1 = require("../Svgs/SvgFilterList");
+const Toast_1 = require("../Toast");
 const Tooltip_1 = require("../Tooltip");
 const FilterPopupWrapper_1 = require("./FilterPopupWrapper");
+const GetFilterPopupComponent_1 = require("./GetFilterPopupComponent");
 const getFormData_1 = require("./getFormData");
 const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onApply, onClear, onChange, dateKeys, }) => {
     const theme = (0, material_1.useTheme)();
     const { iron, slate } = theme.palette.app.color;
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const filterPopupAnchorElm = (0, react_1.useRef)(null);
+    const dateRangeAnchorRef = (0, react_1.useRef)(null);
     const [openFilterPopup, setOpenFilterPopup] = (0, react_1.useState)(false);
+    const [datePickerPopup, setDatePickerPopup] = (0, react_1.useState)(false);
     const [currentFilter, setCurrentFilter] = (0, react_1.useState)(null);
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)([]);
     const handleDateRange = (filter) => {
         setCurrentFilter(filter);
-        setOpenFilterPopup(true);
+        setDatePickerPopup(true);
     };
     const defaultValues = (0, react_1.useMemo)(() => {
         return filterListItems.reduce((acc, item) => {
-            acc[item.key] = item.value ?? null;
+            if (item.multiSelect || item.type === "dateRange") {
+                acc[item.key] = item.value || [];
+            }
+            else if (item.type === "switch") {
+                acc[item.key] = item.value || false;
+            }
+            else {
+                acc[item.key] = item.value || null;
+            }
             return acc;
         }, {});
     }, [filterListData]);
-    const { control, handleSubmit, setValue, reset, formState: { dirtyFields }, watch, } = (0, react_hook_form_1.useForm)({
+    const baseSchema = zod_2.z.object((() => {
+        const shape = {};
+        filterListItems.forEach((item) => {
+            if (item.multiSelect || item.type === "dateRange") {
+                shape[item.key] = zod_2.z.array(zod_2.z.string()).nullable().optional();
+            }
+            else if (item.type === "switch") {
+                shape[item.key] = zod_2.z.boolean().nullable().optional();
+            }
+            else {
+                shape[item.key] = zod_2.z.string().nullable().optional();
+            }
+        });
+        return shape;
+    })());
+    const validationSchema = baseSchema.superRefine((data, ctx) => {
+        filterListItems.forEach((item) => {
+            if (item.required && !data[item.key].length) {
+                ctx.addIssue({
+                    path: [item.key],
+                    message: `${item.label} is required`,
+                    code: zod_2.z.ZodIssueCode.custom,
+                });
+            }
+        });
+    });
+    const { control, handleSubmit, setValue, reset, formState: { errors, dirtyFields }, watch, } = (0, react_hook_form_1.useForm)({
         values: defaultValues,
+        resolver: (0, zod_1.zodResolver)(validationSchema),
+        mode: "all",
     });
     const company_id = watch("company_id");
+    const business_unit_id = watch("business_unit_id");
+    const department_id = watch("department_id");
     const handleClose = () => {
         setAnchorEl(null);
     };
@@ -48,6 +93,12 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
         }
         setOpenFilterPopup(false);
     };
+    const handleCloseDatePickerPopup = () => {
+        if (currentFilter?.key) {
+            setValue(`${currentFilter?.key}`, filterListData?.[currentFilter.key]);
+        }
+        setDatePickerPopup(false);
+    };
     const handlerReset = () => {
         reset();
         onClear();
@@ -59,10 +110,26 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
     const onSubmit = (data) => {
         setOpenFilterPopup(false);
         setCurrentFilter(null);
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([, value]) => value && !(Array.isArray(value) && value.length === 0)));
+        const filteredData = Object.fromEntries(Object.entries(data).filter(([, value]) => value && !(Array.isArray(value) && !value.length)));
         onApply(filteredData, openFilterPopup, currentFilter?.key);
+        handleClose();
+    };
+    const handleDateRangeSubmit = () => {
+        setDatePickerPopup(false);
+    };
+    const onError = (error) => {
+        const errorKeys = Object.keys(error);
+        const tabsToExpand = filterListItems
+            .filter((filter) => filter.required && errorKeys.includes(filter.key))
+            .map((filter) => filter.key);
+        setExpandedKeys(tabsToExpand);
     };
     const handleDelete = (key) => {
+        const item = getFilterItem(key);
+        if (item?.required)
+            return Toast_1.toasts.error({
+                title: "This is a required custom filter field and cannot be removed.",
+            });
         setValue(`${key}`, null);
         const newData = { ...filterListData };
         delete newData[key];
@@ -70,7 +137,11 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
     };
     const formData = (0, react_hook_form_1.useWatch)({ control });
     const currentFilterValue = currentFilter?.key
-        ? watch(currentFilter.key)
+        ? currentFilter.key === "switch"
+            ? watch(currentFilter.key)
+                ? "true"
+                : "false"
+            : watch(currentFilter.key)
         : null;
     (0, react_1.useEffect)(() => {
         onChange(formData, openFilterPopup);
@@ -83,6 +154,17 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
             setValue("company_id", company_id);
         }
     }, [company_id]);
+    (0, react_1.useMemo)(() => {
+        if (business_unit_id !== filterListData?.business_unit_id &&
+            !openFilterPopup) {
+            setValue("business_unit_location_id", null);
+        }
+    }, [business_unit_id]);
+    (0, react_1.useMemo)(() => {
+        if (department_id !== filterListData?.department_id && !openFilterPopup) {
+            setValue("sub_department_id", null);
+        }
+    }, [department_id]);
     const getFilterItem = (key) => {
         return filterListItems.find((item) => item.key === key);
     };
@@ -93,7 +175,8 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
     }, [formData, dirtyFields]);
     const renderChips = (data) => {
         return Object.entries(data).map(([key, value]) => {
-            if (!value) {
+            const filterKey = key;
+            if (typeof value !== "boolean" && !value) {
                 return;
             }
             const item = getFilterItem(key);
@@ -101,14 +184,14 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                 (0, getFormData_1.getFormValue)(dateKeys?.includes(item?.key)
                     ? luxon_1.DateTime.fromISO(value).toFormat(FormFields_1.dateFormats.dateWithEuropean)
                     : value, item);
-            if (!keyValue) {
+            if (typeof value !== "boolean" && !keyValue) {
                 return;
             }
             return ((0, jsx_runtime_1.jsx)(FilterPill_1.FilterPill, { ref: filterPopupAnchorElm, label: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip
                 // eslint-disable-next-line sonarjs/no-base-to-string
                 , { 
                     // eslint-disable-next-line sonarjs/no-base-to-string
-                    toolTipLabel: `${keyValue}`, children: `${item?.label}: ${keyValue}` }), onDelete: () => handleDelete(key), onClick: (e) => {
+                    toolTipLabel: `${keyValue}`, children: `${item?.label}: ${keyValue}` }), onDelete: () => handleDelete(filterKey), onClick: (e) => {
                     setOpenFilterPopup(true);
                     filterPopupAnchorElm.current = e.currentTarget;
                     const item = getFilterItem(key);
@@ -134,8 +217,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                     if (!shouldFormSubmit) {
                         handleSubmit((data) => {
                             onSubmit(data);
-                            handleClose();
-                        })();
+                        }, onError)();
                     }
                 }, onKeyDown: (e) => {
                     if (e.key === "Enter") {
@@ -143,8 +225,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                         if (!shouldFormSubmit) {
                             handleSubmit((data) => {
                                 onSubmit(data);
-                                handleClose();
-                            })();
+                            }, onError)();
                         }
                     }
                 }, children: (0, jsx_runtime_1.jsxs)(material_1.Drawer, { open: open, onClose: (_event, reason) => {
@@ -162,7 +243,11 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                             }, children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px 30px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "Filter" }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
                                                     reset();
                                                     handleClose();
-                                                }, children: (0, jsx_runtime_1.jsx)(icons_1.ClearIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, sx: { overflowX: "hidden" }, children: filterListItems.map((filter) => filter.type === "switch" ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "80%", sx: { padding: "10px 5px 10px 20px ", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { control: control, name: filter.key })] }, filter.key)) : ((0, jsx_runtime_1.jsxs)(material_1.Accordion, { defaultExpanded: !!filterListData?.[filter.key], disabled: filter.isDisabled, sx: {
+                                                }, children: (0, jsx_runtime_1.jsx)(icons_1.ClearIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, sx: { overflowX: "hidden" }, children: filterListItems.map((filter) => filter.type === "switch" ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "80%", sx: { padding: "10px 5px 10px 20px ", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { control: control, name: filter.key })] }, filter.key)) : ((0, jsx_runtime_1.jsxs)(material_1.Accordion, { defaultExpanded: !!filterListData?.[filter.key], disabled: filter.isDisabled, expanded: expandedKeys.includes(filter.key), onChange: () => {
+                                    setExpandedKeys((prev) => prev.includes(filter.key)
+                                        ? prev.filter((k) => k !== filter.key)
+                                        : [...prev, filter.key]);
+                                }, sx: {
                                     "&.MuiAccordion-root.Mui-expanded": {
                                         margin: "0 !important",
                                     },
@@ -179,7 +264,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                                             "& .MuiAccordionSummary-content.Mui-expanded": {
                                                 margin: "0px",
                                             },
-                                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "90%", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.menuInfo })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { sx: {
+                                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "90%", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), filter.required && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: "*" }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.menuInfo })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { sx: {
                                             background: slate[600],
                                             borderRadius: "5px",
                                             padding: "0px",
@@ -189,26 +274,29 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                                                 paddingRight: "15px",
                                             }, children: filter.type === "dateRange" ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "10px", onClick: (e) => {
                                                     handleDateRange(filter);
-                                                    filterPopupAnchorElm.current = e.currentTarget;
+                                                    dateRangeAnchorRef.current = e.currentTarget;
                                                 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                                             border: "1px solid black",
                                                             borderRadius: "5px",
                                                             width: "150px",
                                                             p: 1,
-                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: (Array.isArray(filterListData?.["dateRange"]) &&
-                                                                filterListData?.["dateRange"][0]) ||
-                                                                "Start Date" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "~" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: Array.isArray(watch(filter.key)) &&
+                                                                watch(filter.key)[0]
+                                                                ? luxon_1.DateTime.fromISO(watch(filter.key)[0]).toFormat(FormFields_1.dateFormats.dateWithEuropean)
+                                                                : "Start Date" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "~" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                                             border: "1px solid black",
                                                             borderRadius: "5px",
                                                             width: "150px",
                                                             p: 1,
-                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: (Array.isArray(filterListData?.["dateRange"]) &&
-                                                                filterListData?.["dateRange"][1]) ||
-                                                                "End Date" }) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, FilterPopupWrapper_1.GetFilterPopupComponent)(filter, control)[filter.type] })) }) })] }, filter.key))) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%", position: "absolute", bottom: "70px" } }), (0, jsx_runtime_1.jsx)(material_1.Stack, { height: "70px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", sx: { position: "absolute", bottom: "15px" }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", disabled: shouldFormSubmit, variant: "contained", onClick: () => {
-                                                handleSubmit(onSubmit)();
-                                                handleClose();
-                                            }, children: "Apply" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: () => handlerReset(), disabled: Object.keys(formData).every((key) => !formData[key]), variant: "outlined", children: "Reset" })] }) }) })] }) }), currentFilter && currentFilter.type !== "switch" && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopupWrapper, { open: openFilterPopup, onClose: handleCloseFilterPopup, onApply: () => {
+                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: Array.isArray(watch(filter.key)) &&
+                                                                watch(filter.key)[1]
+                                                                ? luxon_1.DateTime.fromISO(watch(filter.key)[1]).toFormat(FormFields_1.dateFormats.dateWithEuropean)
+                                                                : "End Date" }) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, GetFilterPopupComponent_1.getFilterPopupComponent)(filter, control, errors)[filter.type] })) }) })] }, filter.key))) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%", position: "absolute", bottom: "70px" } }), (0, jsx_runtime_1.jsx)(material_1.Stack, { height: "70px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", sx: { position: "absolute", bottom: "15px" }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", disabled: shouldFormSubmit, variant: "contained", onClick: () => {
+                                                handleSubmit(onSubmit, onError)();
+                                            }, children: "Apply" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: () => handlerReset(), disabled: Object.keys(formData).every((key) => !formData[key]), variant: "outlined", children: "Reset" })] }) }) })] }) }), currentFilter && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopupWrapper, { open: openFilterPopup, onClose: handleCloseFilterPopup, onApply: () => {
                     handleSubmit(onSubmit)();
-                }, control: control, anchorEl: filterPopupAnchorElm.current, filterItem: currentFilter, currentFilterValue: currentFilterValue }))] }));
+                }, control: control, errors: errors, reset: reset, anchorEl: filterPopupAnchorElm.current, filterItem: currentFilter, currentFilterValue: currentFilterValue })), currentFilter && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopUpDateRangeWrapper, { open: datePickerPopup, onClose: handleCloseDatePickerPopup, onApply: () => {
+                    handleDateRangeSubmit();
+                }, control: control, errors: errors, anchorEl: dateRangeAnchorRef.current, filterItem: currentFilter }))] }));
 };
 exports.FilterListV2 = FilterListV2;

package/packages/shared-components/dist/FilterList/FilterPopup.d.ts

@@ -1,15 +1,17 @@
-import { type PropsWithChildren } from "react";
 import type { PopoverProps } from "@mui/material";
+import { type PropsWithChildren } from "react";
 import type { FilterListType } from "./FilterTypeWrapper";
 type FilterPopupProps = PropsWithChildren<PopoverProps> & {
     onApply?: () => void;
     showFooter?: boolean;
     showDivider?: boolean;
     title?: string;
+    required?: boolean;
     background?: boolean;
     filterItem?: FilterListType;
     currentFilterValue?: string | string[] | null;
+    reset?: () => void;
 };
-export declare const FilterPopup: ({ open, anchorEl, onClose, children, onApply, showDivider, showFooter, title, filterItem, background, currentFilterValue, }: FilterPopupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterPopup: ({ open, anchorEl, onClose, children, onApply, showDivider, showFooter, title, required, filterItem, reset, background, currentFilterValue, }: FilterPopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterPopup.d.ts.map

package/packages/shared-components/dist/FilterList/FilterPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPopup.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAclD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,KAAK,gBAAgB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6HAYzB,gBAAgB,4CA4GlB,CAAC"}
+{"version":3,"file":"FilterPopup.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAWlD,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,KAAK,gBAAgB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,8IAczB,gBAAgB,4CAyHlB,CAAC"}

package/packages/shared-components/dist/FilterList/FilterPopup.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterPopup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const material_1 = require("@mui/material");
+const lodash_1 = require("lodash");
+const react_1 = require("react");
 const Button_1 = require("../Button");
 const PadBox_1 = require("../PadBox");
-const lodash_1 = require("lodash");
-const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider = false, showFooter = true, title, filterItem, background = false, currentFilterValue, }) => {
+const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider = false, showFooter = true, title, required, filterItem, reset, background = false, currentFilterValue, }) => {
     const theme = (0, material_1.useTheme)();
     const { slate } = theme.palette.app.color;
     const [initialValue, setInitialValue] = (0, react_1.useState)(null);
@@ -44,6 +44,9 @@ const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider =
     };
     const handleClose = () => {
         setInitialValue(null);
+        if ((0, lodash_1.isFunction)(reset)) {
+            reset();
+        }
         if ((0, lodash_1.isFunction)(onClose)) {
             onClose({}, "backdropClick");
         }
@@ -53,10 +56,10 @@ const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider =
                 return;
             }
             handleClose();
-        }, sx: { "& .MuiPaper-root": { minWidth: "300px" } }, children: [showDivider && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "8px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: title }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleClose, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+        }, sx: { "& .MuiPaper-root": { minWidth: "300px" } }, children: [showDivider && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "8px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: title }), required && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "error", children: "*" }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleClose, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     background: background ? slate[600] : "transparent",
                     borderRadius: "5px",
                     maxWidth: "300px",
-                }, children: children }), showFooter && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "flex-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleApply, disabled: isDisabled, variant: "text", sx: { maxWidth: "40px" }, children: "Apply" }) }) }))] }));
+                }, children: children }), showFooter && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "flex-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleApply, disabled: isDisabled, variant: "text", sx: { maxWidth: "40px" }, children: "Apply" }) }) }))] }));
 };
 exports.FilterPopup = FilterPopup;

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.d.ts

@@ -1,12 +1,20 @@
+import { type PopoverProps } from "@mui/material";
 import { type PropsWithChildren } from "react";
+import type { Control, FieldErrors, FieldValues } from "react-hook-form";
 import type { FilterListType } from "./FilterTypeWrapper";
-import { type PopoverProps } from "@mui/material";
-import type { Control, FieldValues } from "react-hook-form";
 type FilterPopupWrapperProp = PropsWithChildren<PopoverProps> & {
     filterItem: FilterListType;
     control: Control<FieldValues>;
+    errors: FieldErrors<FieldValues>;
     currentFilterValue?: string | string[] | null;
     onApply: () => void;
+    reset?: () => void;
+};
+type FilterDateRangePickerWrapperProp = PropsWithChildren<PopoverProps> & {
+    filterItem: FilterListType;
+    control: Control<FieldValues>;
+    errors: FieldErrors<FieldValues>;
+    onApply: () => void;
 };
 export type FilterPopupComponentType = {
     autoComplete?: JSX.Element;
@@ -17,7 +25,7 @@ export type FilterPopupComponentType = {
     switch?: JSX.Element;
     radio?: JSX.Element;
 };
-export declare const GetFilterPopupComponent: (selectedFilter: FilterListType, control: Control<FieldValues>) => FilterPopupComponentType;
-export declare const FilterPopupWrapper: ({ open, anchorEl, filterItem, onClose, control, onApply, currentFilterValue, }: FilterPopupWrapperProp) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterPopupWrapper: ({ open, anchorEl, filterItem, onClose, control, errors, onApply, currentFilterValue, reset, }: FilterPopupWrapperProp) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterPopUpDateRangeWrapper: ({ open, anchorEl, filterItem, onClose, control, errors, onApply, }: FilterDateRangePickerWrapperProp) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterPopupWrapper.d.ts.map

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPopupWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopupWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAO1D,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG5D,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IAC9D,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,gBAAgB,cAAc,EAC9B,SAAS,OAAO,CAAC,WAAW,CAAC,KAC5B,wBAkDF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gFAQhC,sBAAsB,4CAmBxB,CAAC"}
+{"version":3,"file":"FilterPopupWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopupWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IAC9D,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,KAAK,gCAAgC,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IACxE,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,+FAUhC,sBAAsB,4CAmCxB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,oEAQzC,gCAAgC,4CAkBlC,CAAC"}

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.js

@@ -1,31 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterPopupWrapper = exports.GetFilterPopupComponent = void 0;
+exports.FilterPopUpDateRangeWrapper = exports.FilterPopupWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FilterPopup_1 = require("./FilterPopup");
-const FormFields_1 = require("../FormFields");
 const material_1 = require("@mui/material");
+const FormFields_1 = require("../FormFields");
 const PadBox_1 = require("../PadBox");
-const GetFilterPopupComponent = (selectedFilter, control) => {
-    const theme = (0, material_1.useTheme)();
-    const { sapphireBlue, black } = theme.palette.app.color;
-    return {
-        autoComplete: selectedFilter.options && ((0, jsx_runtime_1.jsx)(FormFields_1.Autocomplete, { disableClearable: true, multiple: selectedFilter.multiSelect ?? false, placeholder: `Select ${selectedFilter.label}`, name: `${selectedFilter.key}`, disabled: selectedFilter.isDisabled, shouldCloseOnSelect: selectedFilter.multiSelect ?? false, control: control, options: selectedFilter.options ?? [], sx: {
-                maxHeight: "250px",
-                overflowY: "auto",
-                width: "100%",
-                "& .MuiAutocomplete-tag": {
-                    backgroundColor: sapphireBlue[300],
-                    color: black[900],
-                },
-            } })),
-        text: ((0, jsx_runtime_1.jsx)(FormFields_1.TextField, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, placeholder: selectedFilter.label })),
-        date: ((0, jsx_runtime_1.jsx)(FormFields_1.DatePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled })),
-        dateRange: ((0, jsx_runtime_1.jsx)(FormFields_1.DateRangePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled })),
-    };
-};
-exports.GetFilterPopupComponent = GetFilterPopupComponent;
-const FilterPopupWrapper = ({ open, anchorEl, filterItem, onClose, control, onApply, currentFilterValue, }) => {
-    return ((0, jsx_runtime_1.jsx)(FilterPopup_1.FilterPopup, { title: filterItem.label, filterItem: filterItem, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, currentFilterValue: currentFilterValue, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, exports.GetFilterPopupComponent)(filterItem, control)[filterItem.type] }) }));
+const DateRangePickerPopUp_1 = require("./DateRangePickerPopUp");
+const FilterPopup_1 = require("./FilterPopup");
+const GetFilterPopupComponent_1 = require("./GetFilterPopupComponent");
+const FilterPopupWrapper = ({ open, anchorEl, filterItem, onClose, control, errors, onApply, currentFilterValue, reset, }) => {
+    return ((0, jsx_runtime_1.jsx)(FilterPopup_1.FilterPopup, { title: filterItem.label, required: filterItem.required, filterItem: filterItem, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, currentFilterValue: currentFilterValue, reset: reset, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsxs)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: [(0, GetFilterPopupComponent_1.getFilterPopupComponent)(filterItem, control, errors)[filterItem.type], filterItem.type === "switch" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { padding: "10px 5px 10px 20px", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filterItem.label }), (0, jsx_runtime_1.jsx)(FormFields_1.Switch, { control: control, name: filterItem.key })] }, filterItem.key))] }) }));
 };
 exports.FilterPopupWrapper = FilterPopupWrapper;
+const FilterPopUpDateRangeWrapper = ({ open, anchorEl, filterItem, onClose, control, errors, onApply, }) => {
+    return ((0, jsx_runtime_1.jsx)(DateRangePickerPopUp_1.DateRangePickerPopUp, { title: filterItem.label, required: filterItem.required, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, GetFilterPopupComponent_1.getFilterPopupComponent)(filterItem, control, errors)[filterItem.type] }) }));
+};
+exports.FilterPopUpDateRangeWrapper = FilterPopUpDateRangeWrapper;

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.d.ts

@@ -1,4 +1,5 @@
 import type { Control, FieldValues } from "react-hook-form";
+import { FilterKeys } from "./FilterListV2";
 export type FilterComponentType = "autoComplete" | "text" | "date" | "dateRange" | "checkbox" | "radio" | "switch";
 type Options = readonly {
     label: string;
@@ -9,12 +10,13 @@ type Options = readonly {
 export type FilterListType = {
     label: string;
     isDisabled?: boolean;
-    key: string;
+    key: FilterKeys;
     value: string;
     type: FilterComponentType;
     menuInfo?: string;
     options?: Options;
     multiSelect?: boolean;
+    required?: boolean;
 };
 type FilterTypeWrapperProps = {
     filter: FilterListType;

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterTypeWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterTypeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,MAAM,mBAAmB,GAC3B,cAAc,GACd,MAAM,GACN,MAAM,GACN,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,KAAK,OAAO,GAAG,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,EAAE,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AACF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,sBAG/B,sBAAsB,4CAoBxB,CAAC"}
+{"version":3,"file":"FilterTypeWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterTypeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAC3B,cAAc,GACd,MAAM,GACN,MAAM,GACN,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,KAAK,OAAO,GAAG,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,EAAE,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,EAAE,UAAU,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,sBAG/B,sBAAsB,4CAqBxB,CAAC"}

package/packages/shared-components/dist/FilterList/GetFilterPopupComponent.d.ts

@@ -0,0 +1,5 @@
+import { Control, FieldErrors, FieldValues } from "react-hook-form";
+import { FilterPopupComponentType } from "./FilterPopupWrapper";
+import { FilterListType } from "./FilterTypeWrapper";
+export declare const getFilterPopupComponent: (selectedFilter: FilterListType, control: Control<FieldValues>, errors: FieldErrors<FieldValues>) => FilterPopupComponentType;
+//# sourceMappingURL=GetFilterPopupComponent.d.ts.map

package/packages/shared-components/dist/FilterList/GetFilterPopupComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GetFilterPopupComponent.d.ts","sourceRoot":"","sources":["../../src/FilterList/GetFilterPopupComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAOpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,uBAAuB,GAClC,gBAAgB,cAAc,EAC9B,SAAS,OAAO,CAAC,WAAW,CAAC,EAC7B,QAAQ,WAAW,CAAC,WAAW,CAAC,KAC/B,wBA4DF,CAAC"}

package/packages/shared-components/dist/FilterList/GetFilterPopupComponent.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilterPopupComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const FormFields_1 = require("../FormFields");
+const getFilterPopupComponent = (selectedFilter, control, errors) => {
+    const theme = (0, material_1.useTheme)();
+    const { sapphireBlue, black } = theme.palette.app.color;
+    const errorSelectedKey = errors[selectedFilter.key];
+    return {
+        autoComplete: selectedFilter.options && ((0, jsx_runtime_1.jsx)(FormFields_1.Autocomplete, { disableClearable: true, multiple: selectedFilter.multiSelect ?? false, placeholder: `Select ${selectedFilter.label}`, name: `${selectedFilter.key}`, disabled: selectedFilter.isDisabled, shouldCloseOnSelect: selectedFilter.multiSelect ?? false, control: control, options: selectedFilter.options ?? [], sx: {
+                maxHeight: "250px",
+                overflowY: "auto",
+                width: "100%",
+                "& .MuiAutocomplete-tag": {
+                    backgroundColor: sapphireBlue[300],
+                    color: black[900],
+                },
+            }, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+        text: ((0, jsx_runtime_1.jsx)(FormFields_1.TextField, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, placeholder: selectedFilter.label, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+        date: ((0, jsx_runtime_1.jsx)(FormFields_1.DatePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+        dateRange: ((0, jsx_runtime_1.jsx)(FormFields_1.DateRangePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+    };
+};
+exports.getFilterPopupComponent = getFilterPopupComponent;

package/packages/shared-components/dist/FormFields/DateRangePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKvE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEJ,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,GACN,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAiEzB"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEJ,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,GACN,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAkEzB"}

package/packages/shared-components/dist/FormFields/DateRangePicker/DateRangePicker.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = DateRangePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const react_date_range_1 = require("react-date-range");
 const react_hook_form_1 = require("react-hook-form");
 const Skeleton_1 = require("./Skeleton");
-const react_1 = require("react");
 function DateRangePicker({ control, defaultValue, disabled = false, label, name, error = false, helperText, loading = false, required = false, rules, }) {
     const { field: { onChange }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [range, setRange] = (0, react_1.useState)([
@@ -35,5 +35,5 @@ function DateRangePicker({ control, defaultValue, disabled = false, label, name,
                         const endDate = new Date(selectedRange.endDate.toUTCString()).toISOString();
                         onChange([startDate, endDate]);
                     }
-                }, months: 2, direction: "horizontal", calendarFocus: "backwards", staticRanges: [], inputRanges: [], moveRangeOnFirstSelection: false, preventSnapRefocus: true }), error && (0, jsx_runtime_1.jsx)("span", { style: { color: "red" }, children: helperText })] }));
+                }, months: 1, direction: "horizontal", calendarFocus: "backwards", staticRanges: [], inputRanges: [], moveRangeOnFirstSelection: false, preventSnapRefocus: true }), error && (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "red", children: helperText })] }));
 }

package/packages/shared-components/dist/Layouts/FormRow/FormRow.styled.js

@@ -15,7 +15,7 @@ function calculateWidth(childrenCount, fullWidth, maxColumn) {
 }
 exports.RowContainerStyled = (0, styles_1.styled)(material_1.Stack, {
     shouldForwardProp(prop) {
-        return prop !== "fullWidth";
+        return prop !== "fullWidth" && prop !== "maxColumn";
     },
 })(({ children, fullWidth, maxColumn, }) => {
     const childrenCount = react_1.Children.toArray(children).length;

package/packages/shared-components/dist/Svgs/SvgExport.d.ts

@@ -0,0 +1,3 @@
+import type { SvgIconProps } from "@mui/material";
+export declare const SvgExport: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SvgExport.d.ts.map

package/packages/shared-components/dist/Svgs/SvgExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgExport.d.ts","sourceRoot":"","sources":["../../src/Svgs/SvgExport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,eAAO,MAAM,SAAS,GAAI,OAAO,YAAY,4CA8B5C,CAAC"}

package/packages/shared-components/dist/Svgs/SvgExport.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgExport = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SvgExport = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "34", height: "34", viewBox: "0 0 34 34", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsxs)("g", { id: "Communication / Share_iOS_Export", children: [(0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "33", height: "33", rx: "3.5", stroke: "#BCBFC2" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector", d: "M14 11L17 8M17 8L20 11M17 8V18M12.0002 15C11.0683 15 10.6024 15 10.2349 15.1522C9.74481 15.3552 9.35523 15.7448 9.15224 16.2349C9 16.6024 9 17.0681 9 18V22.8C9 23.9201 9 24.4798 9.21799 24.9076C9.40973 25.2839 9.71547 25.5905 10.0918 25.7822C10.5192 26 11.079 26 12.1969 26H21.8036C22.9215 26 23.4805 26 23.9079 25.7822C24.2842 25.5905 24.5905 25.2839 24.7822 24.9076C25 24.4802 25 23.921 25 22.8031V18C25 17.0681 24.9999 16.6024 24.8477 16.2349C24.6447 15.7448 24.2554 15.3552 23.7654 15.1522C23.3978 15 22.9319 15 22 15", stroke: "#4C5D70", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })] }) }));
+};
+exports.SvgExport = SvgExport;

package/packages/shared-components/dist/Svgs/SvgImport.d.ts

@@ -0,0 +1,3 @@
+import type { SvgIconProps } from "@mui/material";
+export declare const SvgImport: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SvgImport.d.ts.map

package/packages/shared-components/dist/Svgs/SvgImport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgImport.d.ts","sourceRoot":"","sources":["../../src/Svgs/SvgImport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,eAAO,MAAM,SAAS,GAAI,OAAO,YAAY,4CAwC5C,CAAC"}

package/packages/shared-components/dist/Svgs/SvgImport.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgImport = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SvgImport = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "34", height: "34", viewBox: "0 0 34 34", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsxs)("g", { id: "Communication / Share_iOS_Export", children: [(0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "33", height: "33", rx: "3.5", stroke: "#BCBFC2" }), (0, jsx_runtime_1.jsxs)("g", { id: "Group 5", children: [(0, jsx_runtime_1.jsx)("path", { id: "Vector", d: "M12.0002 12.75C11.0683 12.75 10.6024 12.75 10.2349 12.9022C9.74481 13.1052 9.35523 13.4948 9.15224 13.9849C9 14.3524 9 14.8181 9 15.75V21.55C9 22.6701 9 23.2298 9.21799 23.6576C9.40973 24.0339 9.71547 24.3405 10.0918 24.5322C10.5192 24.75 11.079 24.75 12.1969 24.75H21.8036C22.9215 24.75 23.4805 24.75 23.9079 24.5322C24.2842 24.3405 24.5905 24.0339 24.7822 23.6576C25 23.2302 25 22.671 25 21.5531V15.75C25 14.8181 24.9999 14.3524 24.8477 13.9849C24.6447 13.4948 24.2554 13.1052 23.7654 12.9022C23.3978 12.75 22.9319 12.75 22 12.75", stroke: "#4C5D70", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector_2", d: "M20 16.25L17 19.25M17 19.25L14 16.25M17 19.25L17 9.25", stroke: "#4C5D70", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })] })] }) }));
+};
+exports.SvgImport = SvgImport;

package/packages/shared-components/dist/Svgs/SvgProfile.d.ts

@@ -0,0 +1,2 @@
+export declare const SvgProfile: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SvgProfile.d.ts.map

package/packages/shared-components/dist/Svgs/SvgProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgProfile.d.ts","sourceRoot":"","sources":["../../src/Svgs/SvgProfile.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,+CA6BtB,CAAC"}

package/packages/shared-components/dist/Svgs/SvgProfile.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgProfile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SvgProfile = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("g", { "clip-path": "url(#clip0_8728_7975)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.7224 0.0587158C11.281 0.136841 11.7302 0.277466 12.2536 0.543091C13.9919 1.41809 15.0114 3.37122 14.8122 5.4259C14.6911 6.64856 14.2888 7.6134 13.5153 8.53528C13.0778 9.05871 12.4021 9.55871 11.7731 9.82043C9.6794 10.6954 7.38643 9.96106 6.06612 7.9884C5.02315 6.43372 4.87471 4.29309 5.69112 2.64075C6.61299 0.77356 8.58565 -0.238159 10.7224 0.0587158ZM9.10909 1.58606C8.22237 1.80872 7.42159 2.44934 7.01534 3.26965C6.73018 3.84778 6.63252 4.28918 6.63643 4.98059C6.64424 6.05871 7.03096 7.03137 7.73409 7.7384C8.06221 8.07043 8.26534 8.21887 8.65596 8.41418C9.4958 8.82825 10.5036 8.82825 11.3435 8.41418C11.7341 8.21887 11.9372 8.07043 12.2653 7.7384C13.7419 6.25012 13.738 3.59778 12.2575 2.28528C11.4333 1.55872 10.2614 1.297 9.10909 1.58606Z", fill: "#93AABE" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.7811 11.293C13.7655 11.418 16.121 12.3438 17.5272 13.9453C18.6093 15.1758 19.1913 16.7305 19.2929 18.6562C19.3397 19.5352 19.2694 19.75 18.8866 19.9258C18.7343 19.9961 18.4061 20 9.9999 20C1.59365 20 1.26553 19.9961 1.11318 19.9258C0.73037 19.75 0.660057 19.5352 0.706932 18.6562C0.933495 14.3594 3.61318 11.8086 8.37881 11.3516C9.16787 11.2773 9.95693 11.2578 10.7811 11.293ZM8.7499 12.7734C5.96474 13.0234 4.16787 13.8945 3.11709 15.5039C2.64053 16.2344 2.28506 17.3008 2.20303 18.2305L2.17568 18.5547H9.9999H17.8241L17.7968 18.2344C17.7811 18.0547 17.7265 17.7148 17.6757 17.4805C17.2851 15.668 16.2929 14.3867 14.6718 13.6094C13.7694 13.1758 12.7851 12.9258 11.4452 12.793C10.8358 12.7305 9.34756 12.7227 8.7499 12.7734Z", fill: "#93AABE" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_8728_7975", children: (0, jsx_runtime_1.jsx)("rect", { width: "20", height: "20", fill: "white", transform: "matrix(-1 0 0 1 20 0)" }) }) })] }));
+exports.SvgProfile = SvgProfile;