mytek-components 2.1.3 → 2.1.6

package/dist/main.es.js

@@ -518,40 +518,44 @@ const Button = ({
   children,
   onClick,
   fontSize = "16px",
-  color: color2 = "#ffffff",
-  backgroundColor: backgroundColor2 = "#3369BB",
+  color: color2 = "#fff",
+  backgroundColor: backgroundColor2 = "#3B5AA1",
+  hoverBackgroundColor = "#2F4B8A",
+  disabledBackgroundColor = "#9CA3AF",
+  // gray-400
+  disabledTextColor = "#E5E7EB",
+  // gray-200
   height: height2 = "40px",
-  width: width2 = "100px",
+  width: width2 = "auto",
   border: border2 = "none",
-  borderRadius: borderRadius2 = "4px",
-  padding: padding2 = "10px 20px",
-  fontWeight = "normal",
-  style: style2 = {},
+  borderRadius: borderRadius2 = "6px",
+  padding: padding2 = "10px 16px",
+  fontWeight = "500",
   loader = false,
   disabled = false,
+  style: style2 = {},
   ...rest
 }) => {
   const isDisabled = loader || disabled;
   const className = clsx(
-    "flex items-center justify-center transition-opacity",
+    "flex items-center justify-center transition-all duration-200 overflow-hidden",
     {
       "cursor-not-allowed opacity-60": isDisabled,
-      "cursor-pointer": !isDisabled
+      "cursor-pointer hover:brightness-110 active:scale-[0.98]": !isDisabled
     },
     rest.className
-    // ✅ allow external Tailwind className overrides
   );
   const buttonStyle = {
     fontSize,
-    color: color2,
-    backgroundColor: backgroundColor2,
+    color: isDisabled ? disabledTextColor : color2,
+    backgroundColor: isDisabled ? disabledBackgroundColor : backgroundColor2,
     height: height2,
-    // ✅ Only apply width if w-full is NOT passed via className
     width: rest.className?.includes("w-full") ? void 0 : width2,
     border: border2,
     borderRadius: borderRadius2,
     padding: padding2,
     fontWeight,
+    cursor: isDisabled ? "not-allowed" : "pointer",
     ...style2
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -561,8 +565,14 @@ const Button = ({
       disabled: isDisabled,
       className,
       style: buttonStyle,
+      onMouseEnter: (e) => {
+        if (!isDisabled) e.currentTarget.style.backgroundColor = hoverBackgroundColor;
+      },
+      onMouseLeave: (e) => {
+        if (!isDisabled) e.currentTarget.style.backgroundColor = backgroundColor2;
+      },
       ...rest,
-      children: loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : label || children
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate w-full", children: loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : label || children })
     }
   );
 };
@@ -12585,7 +12595,7 @@ function requireLib() {
       }
       var E, T, I, A = Array.prototype, D = Function.prototype, P = Object.prototype, F = b["__core-js_shared__"], M = (E = /[^.]+$/.exec(F && F.keys && F.keys.IE_PROTO || "")) ? "Symbol(src)_1." + E : "", R = D.toString, L = P.hasOwnProperty, z = P.toString, B = RegExp("^" + R.call(L).replace(/[\\^$.*+?()[\]{}|]/g, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"), G = b.Symbol, $ = b.Uint8Array, V = P.propertyIsEnumerable, K = A.splice, U = (T = Object.keys, I = Object, function(e3) {
         return T(I(e3));
-      }), q = Ne(b, "DataView"), H = Ne(b, "Map"), W = Ne(b, "Promise"), J = Ne(b, "Set"), Z = Ne(b, "WeakMap"), Q = Ne(Object, "create"), Y = Pe(q), X = Pe(H), ee = Pe(W), te = Pe(J), re = Pe(Z), ne = G ? G.prototype : void 0, ae = ne ? ne.valueOf : void 0, oe = ne ? ne.toString : void 0;
+      }), q = Ne(b, "DataView"), H = Ne(b, "Map"), W = Ne(b, "Promise"), J = Ne(b, "Set"), Z = Ne(b, "WeakMap"), Q = Ne(Object, "create"), Y = Pe(q), X2 = Pe(H), ee = Pe(W), te = Pe(J), re = Pe(Z), ne = G ? G.prototype : void 0, ae = ne ? ne.valueOf : void 0, oe = ne ? ne.toString : void 0;
       function ie(e3) {
         var t2 = -1, r4 = e3 ? e3.length : 0;
         for (this.clear(); ++t2 < r4; ) {
@@ -12923,7 +12933,7 @@ function requireLib() {
         if (n2) switch (n2) {
           case Y:
             return "[object DataView]";
-          case X:
+          case X2:
             return a;
           case ee:
             return "[object Promise]";
@@ -13978,7 +13988,11 @@ const CustomInput = ({
   onValidationChange,
   // color,
   showTimer,
-  timer
+  timer,
+  minValue,
+  maxValue,
+  stepValue,
+  wrapperClassName
 }) => {
   const [countryCode, setCountryCode] = useState("IN");
   const [nationalNumber, setNationalNumber] = useState("");
@@ -13991,7 +14005,6 @@ const CustomInput = ({
       validate(value);
     }
   }, [value]);
-  console.log(enable);
   const validate = (val) => {
     const raw = category === "amount" ? removeCommas(val) : val;
     if (!isRequired && !val) {
@@ -14214,7 +14227,6 @@ const CustomInput = ({
   const handleChange = (e) => {
     let val;
     if (category == "mobile") {
-      console.log(e);
       val = e;
       validate(val);
     } else {
@@ -14305,20 +14317,9 @@ const CustomInput = ({
     }
     const nationalNumber1 = parsed.nationalNumber || "";
     setNationalNumber(nationalNumber1);
-    console.log(nationalNumber);
     const { length, startsWith } = rules;
     const callingCodeLength = country.dialCode.length;
     const maxTotalLength = callingCodeLength + length;
-    console.log(
-      value2,
-      value2.length,
-      maxTotalLength,
-      length,
-      nationalNumber.length,
-      startsWith,
-      startsWith.test(nationalNumber),
-      "len"
-    );
     if (value2.length > maxTotalLength) {
       setError("Invalid phone number for selected country");
       setEnable(true);
@@ -14365,7 +14366,7 @@ const CustomInput = ({
           prefix && /* @__PURE__ */ jsxRuntimeExports.jsx(
             InputGroup$1.Text,
             {
-              style: { backgroundColor: "#fff", borderColor: "#12AB5B" },
+              style: { backgroundColor: "#fff", borderColor: "#3B5AA1" },
               children: prefix
             }
           ),
@@ -14374,107 +14375,138 @@ const CustomInput = ({
             {
               placement: "top",
               overlay: isAmount && amountInWords && (currency === "₹" || currency === "$") ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$2, { id: `${name}-tooltip`, children: amountInWords }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
-              children: category === "mobile" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-[#12AB5B] rounded-md w-full", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  PhoneInput,
-                  {
-                    value,
-                    onChange: (value2, country) => handlePhoneChange(value2, country),
-                    country: countryCode.toLowerCase(),
-                    enableLongNumbers: true,
-                    disableDropdown: false,
-                    countryCodeEditable: false,
-                    inputProps: { autoComplete: "off" },
-                    containerStyle: { width: "100%" },
-                    disabled,
-                    inputStyle: {
-                      width: "100%",
-                      height: "40px",
-                      fontSize: "14px",
-                      paddingLeft: "48px",
-                      // leave space for flag
-                      border: "none",
-                      backgroundColor: disabled ? "#f1f1f1" : "#fff",
-                      // ✅ gray when disabled
-                      color: disabled ? "#6c757d" : "#000",
-                      // ✅ muted text when disabled
-                      cursor: disabled ? "not-allowed" : "text"
-                      // ✅ show disabled cursor
-                    },
-                    buttonStyle: {
-                      borderRight: "1px solid #12AB5B",
-                      backgroundColor: disabled ? "#f1f1f1" : "#fff",
-                      // ✅ gray when disabled
-                      borderRadius: "0.375rem 0 0 0.375rem",
-                      cursor: disabled ? "not-allowed" : "pointer"
-                    },
-                    dropdownClass: "z-50 mt-1 bg-white border border-gray-300 rounded-md text-sm max-h-60 overflow-y-auto shadow-lg"
-                  }
-                ),
-                button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: button.onClick,
-                    disabled: button.disabled || enable,
-                    className: `px-4 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#12AB5B] rounded-r-md ${button.disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
-                    style: { height: height2 },
-                    children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
-                  }
-                )
-              ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-[#12AB5B] overflow-hidden rounded-md", children: [
-                prefix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-r border-[#12AB5B]", children: prefix }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "input",
-                  {
-                    type: isPassword ? showPassword ? "text" : "password" : type,
-                    name,
-                    value,
-                    onChange: handleChange,
-                    disabled,
-                    placeholder,
-                    className: `flex-1 px-2 py-2 focus:outline-none ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500" : ""}`,
-                    style: {
-                      height: height2,
-                      backgroundColor: disabled ? "#f1f1f1" : void 0,
-                      color: disabled ? "#6c757d" : void 0
-                    }
-                  }
-                ),
-                suffix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-l border-[#12AB5B]", children: suffix }),
-                !error && showTimer && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "span",
-                  {
-                    className: `flex items-center gap-1 justify-center h-[40px] min-w-[60px] px-2 ml-1 rounded text-sm 
-      ${validationStatus === "valid" ? "text-green-600 bg-gray-100" : validationStatus === "invalid" ? "text-red-600" : "text-gray-600 bg-gray-100"}`,
-                    title: validationStatus === "valid" ? "Correct OTP" : validationStatus === "invalid" ? "Incorrect OTP" : "OTP Timer",
-                    children: [
-                      validationStatus === "valid" && /* @__PURE__ */ jsxRuntimeExports.jsx(FaCheck, { size: 18 }),
-                      validationStatus === "invalid" && /* @__PURE__ */ jsxRuntimeExports.jsx(IoMdClose, { size: 18 }),
-                      typeof timer === "number" && validationStatus !== "valid" && `${timer}s`
-                    ]
-                  }
-                ),
-                isPassword && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setShowPassword(!showPassword),
-                    className: "px-2  bg-white text-gray-500 border-l border-[#12AB5B]",
-                    children: showPassword ? /* @__PURE__ */ jsxRuntimeExports.jsx(FiEye, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FiEyeOff, {})
-                  }
-                ),
-                button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    onClick: button?.onClick,
-                    disabled: disabled || enable,
-                    className: `px-2 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#12AB5B] rounded-r-md ${disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
-                    style: { height: height2 },
-                    children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
-                  }
-                )
-              ] })
+              children: category === "mobile" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: `
+                  flex items-center w-full
+                  rounded-md
+                  transition-all duration-200
+                  border border-[1px]
+                  ${disabled ? "border-gray-300 bg-gray-100 cursor-not-allowed" : "border-[#3B5AA1] focus-within:ring-1 focus-within:ring-[#3B5AA1] focus-within:border-[#3B5AA1]"}
+                  ${wrapperClassName || ""}
+                `,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      PhoneInput,
+                      {
+                        value,
+                        onChange: (value2, country) => handlePhoneChange(value2, country),
+                        country: countryCode.toLowerCase(),
+                        enableLongNumbers: false,
+                        disableDropdown: false,
+                        countryCodeEditable: false,
+                        inputProps: { autoComplete: "off" },
+                        containerStyle: { width: "100%" },
+                        disabled,
+                        inputStyle: {
+                          width: "100%",
+                          height: "40px",
+                          fontSize: "14px",
+                          paddingLeft: "48px",
+                          // leave space for flag
+                          border: "none",
+                          backgroundColor: disabled ? "#f1f1f1" : "#fff",
+                          // ✅ gray when disabled
+                          color: disabled ? "#6c757d" : "#000",
+                          // ✅ muted text when disabled
+                          cursor: disabled ? "not-allowed" : "text"
+                          // ✅ show disabled cursor
+                        },
+                        buttonStyle: {
+                          borderRight: "1px solid #3B5AA1",
+                          backgroundColor: disabled ? "#f1f1f1" : "#fff",
+                          // ✅ gray when disabled
+                          borderRadius: "0.375rem 0 0 0.375rem",
+                          cursor: disabled ? "not-allowed" : "pointer"
+                        },
+                        dropdownClass: "z-50 mt-1 bg-white border border-gray-300 rounded-md text-sm max-h-60 overflow-y-auto shadow-lg"
+                      }
+                    ),
+                    button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: button.onClick,
+                        disabled: button.disabled || enable,
+                        className: `px-4 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#3B5AA1] rounded-r-md ${button.disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
+                        style: { height: height2 },
+                        children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
+                      }
+                    )
+                  ]
+                }
+              ) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: `
+              flex items-center
+              overflow-hidden
+              rounded-md
+              transition-all duration-200
+
+              ${disabled ? "border border-gray-300 bg-gray-100 cursor-not-allowed" : "border border-[#3B5AA1] focus-within:border-[#3B5AA1] focus-within:ring-1 focus-within:ring-[#3B5AA1]"}
+                
+              ${wrapperClassName || ""}
+            `,
+                  children: [
+                    prefix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-r border-[#3B5AA1]", children: prefix }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "input",
+                      {
+                        type: isPassword ? showPassword ? "text" : "password" : type,
+                        name,
+                        value,
+                        onChange: handleChange,
+                        disabled,
+                        placeholder,
+                        className: `flex-1 px-2 py-2 focus:outline-none ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500" : ""}`,
+                        style: {
+                          height: height2,
+                          backgroundColor: disabled ? "#f1f1f1" : void 0,
+                          color: disabled ? "#6c757d" : void 0
+                        },
+                        min: minValue,
+                        max: maxValue,
+                        step: stepValue
+                      }
+                    ),
+                    suffix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-l border-[#3B5AA1]", children: suffix }),
+                    !error && showTimer && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "span",
+                      {
+                        className: `flex items-center gap-1 justify-center h-[40px] min-w-[60px] px-2 ml-1 rounded text-sm 
+                    ${validationStatus === "valid" ? "text-green-600 bg-gray-100" : validationStatus === "invalid" ? "text-red-600" : "text-gray-600 bg-gray-100"}`,
+                        title: validationStatus === "valid" ? "Correct OTP" : validationStatus === "invalid" ? "Incorrect OTP" : "OTP Timer",
+                        children: [
+                          validationStatus === "valid" && /* @__PURE__ */ jsxRuntimeExports.jsx(FaCheck, { size: 18 }),
+                          validationStatus === "invalid" && /* @__PURE__ */ jsxRuntimeExports.jsx(IoMdClose, { size: 18 }),
+                          typeof timer === "number" && validationStatus !== "valid" && `${timer}s`
+                        ]
+                      }
+                    ),
+                    isPassword && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowPassword(!showPassword),
+                        className: "px-2  bg-white text-gray-500 border-l border-[#3B5AA1]",
+                        children: showPassword ? /* @__PURE__ */ jsxRuntimeExports.jsx(FiEye, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FiEyeOff, {})
+                      }
+                    ),
+                    button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        onClick: button?.onClick,
+                        disabled: disabled || enable,
+                        className: `px-2 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#3B5AA1] rounded-r-md ${disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
+                        style: { height: height2 },
+                        children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
         ] }),
@@ -15776,11 +15808,18 @@ function DynamicTabs({
   centered = false,
   scrollButtons = "auto",
   indicatorColor = "primary",
-  textColor = "primary"
+  textColor = "primary",
+  handleTabChange,
+  tabIndex
 }) {
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useState(tabIndex || defaultValue);
+  useEffect(() => {
+    const setUpVal = tabs.length - 1 >= tabIndex ? tabIndex : tabs.length - 1;
+    setValue(setUpVal);
+  }, [tabIndex]);
   const handleChange = (event, newValue) => {
     setValue(newValue);
+    handleTabChange(newValue);
   };
   const getTabsStyles = () => {
     const baseStyles = "w-full";
@@ -16403,13 +16442,20 @@ const createLucideIcon = (iconName, iconNode) => {
   Component.displayName = toPascalCase(iconName);
   return Component;
 };
-const __iconNode$4 = [
+const __iconNode$6 = [
+  ["path", { d: "M8 2v4", key: "1cmpym" }],
+  ["path", { d: "M16 2v4", key: "4m81vk" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+  ["path", { d: "M3 10h18", key: "8toen8" }]
+];
+const Calendar = createLucideIcon("calendar", __iconNode$6);
+const __iconNode$5 = [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
 ];
-const Download = createLucideIcon("download", __iconNode$4);
-const __iconNode$3 = [
+const Download = createLucideIcon("download", __iconNode$5);
+const __iconNode$4 = [
   [
     "path",
     {
@@ -16418,28 +16464,33 @@ const __iconNode$3 = [
     }
   ]
 ];
-const Funnel = createLucideIcon("funnel", __iconNode$3);
-const __iconNode$2 = [
+const Funnel = createLucideIcon("funnel", __iconNode$4);
+const __iconNode$3 = [
   ["path", { d: "m8 11 2 2 4-4", key: "1sed1v" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
 ];
-const SearchCheck = createLucideIcon("search-check", __iconNode$2);
-const __iconNode$1 = [
+const SearchCheck = createLucideIcon("search-check", __iconNode$3);
+const __iconNode$2 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["line", { x1: "3", x2: "21", y1: "9", y2: "9", key: "1vqk6q" }],
   ["line", { x1: "3", x2: "21", y1: "15", y2: "15", key: "o2sbyz" }],
   ["line", { x1: "9", x2: "9", y1: "9", y2: "21", key: "1ib60c" }],
   ["line", { x1: "15", x2: "15", y1: "9", y2: "21", key: "1n26ft" }]
 ];
-const Sheet = createLucideIcon("sheet", __iconNode$1);
-const __iconNode = [
+const Sheet = createLucideIcon("sheet", __iconNode$2);
+const __iconNode$1 = [
   ["path", { d: "M12 3v18", key: "108xh3" }],
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M3 9h18", key: "1pudct" }],
   ["path", { d: "M3 15h18", key: "5xshup" }]
 ];
-const Table = createLucideIcon("table", __iconNode);
+const Table = createLucideIcon("table", __iconNode$1);
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
 var weekOfYear$1 = { exports: {} };
 var weekOfYear = weekOfYear$1.exports;
 var hasRequiredWeekOfYear;
@@ -17782,9 +17833,41 @@ const buildColumn = (col, fyOptions, detectedColumnTypes, aggregates) => {
     };
   }
   if (col.TotTyp) {
-    column.Footer = () => {
-      const value = aggregates[col.ColFields];
-      if (value === void 0 || value === null) return "";
+    column.Footer = ({ table }) => {
+      const rows = table.getFilteredRowModel().rows;
+      if (!rows.length) return "";
+      let count = 0;
+      let sum = 0;
+      let min2 = Infinity;
+      let max2 = -Infinity;
+      for (const row of rows) {
+        const val = Number(row.original[col.ColFields]);
+        if (isNaN(val)) continue;
+        count++;
+        sum += val;
+        min2 = Math.min(min2, val);
+        max2 = Math.max(max2, val);
+      }
+      let value;
+      switch (col.TotTyp) {
+        case "SUM":
+          value = sum;
+          break;
+        case "AVG":
+          value = count ? sum / count : 0;
+          break;
+        case "MIN":
+          value = count ? min2 : "";
+          break;
+        case "MAX":
+          value = count ? max2 : "";
+          break;
+        case "COUNT":
+          value = count;
+          break;
+        default:
+          return "";
+      }
       if (isNumericColumn && col.IsPercentage) {
         return formatPercentage({
           value,
@@ -17825,6 +17908,7 @@ const defaultControlOpt = {
   colPinning: true,
   pagination: true,
   rowSelection: false,
+  enableSelectAllRows: true,
   rowPinning: false,
   grouping: false,
   sorting: true,
@@ -17841,7 +17925,8 @@ function SmartGridTable({
   topToolbar = defaultToolBarOpt,
   controls = defaultControlOpt,
   onRowSelectionChange,
-  isLoading = false
+  isLoading = false,
+  resetRowSelection
 }) {
   const safeColumns = useMemo(
     () => sanitizeColumns(columns),
@@ -17853,6 +17938,9 @@ function SmartGridTable({
   );
   const [rowSelection, setRowSelection] = useState({});
   const isMobile = useMediaQuery("(max-width:600px)");
+  useEffect(() => {
+    setRowSelection({});
+  }, [resetRowSelection]);
   const mergedTheme = { ...DEFAULT_THEME, ...theme };
   topToolbar = { ...defaultToolBarOpt, ...topToolbar };
   controls = { ...defaultControlOpt, ...controls };
@@ -17930,7 +18018,7 @@ function SmartGridTable({
   const finalColumns = useMemo(() => {
     if (safeColumns.length === 0) return [];
     return safeColumns.sort((a, b) => a.ColOrder - b.ColOrder).map(
-      (col) => buildColumn(col, fyOptions, detectedColumnTypes, aggregates)
+      (col) => buildColumn(col, fyOptions, detectedColumnTypes)
     );
   }, [safeColumns, fyOptions, detectedColumnTypes, aggregates]);
   const columnPinning = useMemo(() => {
@@ -17979,6 +18067,7 @@ function SmartGridTable({
     enablePagination: !isGridDisabled && controls.pagination,
     enableColumnActions: !isGridDisabled && controls.columnActions,
     enableRowSelection: !isGridDisabled && controls.rowSelection,
+    enableSelectAll: !isGridDisabled && controls.rowSelection && controls?.enableSelectAllRows,
     enableGrouping: !isGridDisabled && controls.grouping,
     enableSorting: !isGridDisabled && controls.sorting,
     enableEditing: !isGridDisabled && controls.editing,
@@ -18423,48 +18512,561 @@ const ExportButton = ({
     )
   ] });
 };
-const SmartTable = ({
-  controls = {
-    columnActions: true,
-    dragging: false,
-    colPinning: true,
-    pagination: true,
-    rowSelection: false,
-    rowPinning: false,
-    grouping: false,
-    sorting: true,
-    editing: false,
-    resizing: true
-  },
-  topToolbar = {
-    enabled: true,
-    globalSearch: true,
-    columnFilters: true,
-    densityToggle: true,
-    fullscreenToggle: false,
-    exportBtn: true,
-    showHideColumnsBtn: true
-  },
-  theme = {
-    headerBg: "#3f5fa3",
-    headerText: "#ffffff",
-    bodyBg: "#ffffff",
-    border: "#cfd6e4"
+const SmartTable = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SmartGridTable, { ...props }) });
+const FinancialDateRangePicker = ({
+  value = null,
+  onChange = () => {
   },
-  height: height2 = "100%",
-  width: width2 = "100%",
-  columns = [],
-  data = [],
-  paginationStyle = "default",
-  isLoading = false,
-  onRowSelectionChange = () => {
-  }
+  placeholder = "Select date range",
+  className = "",
+  disabled = false,
+  error = "",
+  label = "",
+  required = false,
+  defaultMode = "yearly",
+  showFinancialYear = true,
+  showYearly = true,
+  showMonthly = true,
+  showCustom = true,
+  isSticky = false,
+  stickyTop = 0,
+  stickyRight = 0
 }) => {
-  const props = { controls, topToolbar, height: height2, width: width2, isLoading, columns, data, onRowSelectionChange, paginationStyle, theme };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SmartGridTable, { ...props }) });
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectionMode, setSelectionMode] = useState(defaultMode);
+  const [financialYear, setFinancialYear] = useState("");
+  const [yearlySubMode, setYearlySubMode] = useState("half-yearly");
+  const [selectedHalfYear, setSelectedHalfYear] = useState(null);
+  const [selectedQuarter, setSelectedQuarter] = useState(null);
+  const [selectedMonthStart, setSelectedMonthStart] = useState(null);
+  const [selectedMonthEnd, setSelectedMonthEnd] = useState(null);
+  const [monthRangeSelecting, setMonthRangeSelecting] = useState(false);
+  const [customStart, setCustomStart] = useState("");
+  const [customEnd, setCustomEnd] = useState("");
+  const [tempDateRange, setTempDateRange] = useState({ start: "", end: "" });
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: true,
+    left: 0,
+    right: "auto",
+    arrowLeft: 24
+  });
+  const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
+  const [parentWidth, setParentWidth] = useState("100%");
+  useEffect(() => {
+    if (containerRef.current) {
+      const parent = containerRef.current.parentElement;
+      const updateWidth = () => {
+        setParentWidth(parent.offsetWidth);
+      };
+      updateWidth();
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+  }, []);
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const financialYears = Array.from({ length: 5 }, (_, i) => {
+    const year = currentYear - 5 + i + 1;
+    return `${year}-${String(year + 1).slice(2)}`;
+  });
+  const halfYears = [
+    { id: "H1", label: "H1 (Apr-Sep)", startMonth: 3, endMonth: 8 },
+    { id: "H2", label: "H2 (Oct-Mar)", startMonth: 9, endMonth: 2 }
+  ];
+  const quarters = [
+    { id: "Q1", label: "Q1 (Apr-Jun)", startMonth: 3, endMonth: 5 },
+    { id: "Q2", label: "Q2 (Jul-Sep)", startMonth: 6, endMonth: 8 },
+    { id: "Q3", label: "Q3 (Oct-Dec)", startMonth: 9, endMonth: 11 },
+    { id: "Q4", label: "Q4 (Jan-Mar)", startMonth: 0, endMonth: 2 }
+  ];
+  const months = [
+    { id: 4, label: "April", short: "Apr", index: 3 },
+    { id: 5, label: "May", short: "May", index: 4 },
+    { id: 6, label: "June", short: "Jun", index: 5 },
+    { id: 7, label: "July", short: "Jul", index: 6 },
+    { id: 8, label: "August", short: "Aug", index: 7 },
+    { id: 9, label: "September", short: "Sep", index: 8 },
+    { id: 10, label: "October", short: "Oct", index: 9 },
+    { id: 11, label: "November", short: "Nov", index: 10 },
+    { id: 12, label: "December", short: "Dec", index: 11 },
+    { id: 1, label: "January", short: "Jan", index: 0 },
+    { id: 2, label: "February", short: "Feb", index: 1 },
+    { id: 3, label: "March", short: "Mar", index: 2 }
+  ];
+  useEffect(() => {
+    if (isOpen && value) {
+      setTempDateRange(value);
+      setSelectionMode(value?.mode);
+      setFinancialYear(value?.financialYear);
+      if (value?.mode === "monthly") {
+        setSelectedMonthStart(value?.monthStart);
+        setSelectedMonthEnd(value?.monthEnd);
+      }
+      if (value?.mode === "yearly") {
+        setYearlySubMode(value?.yearlySubMode);
+        setSelectedHalfYear(value?.halfYear);
+        setSelectedQuarter(value?.quarter);
+      }
+      if (value?.mode === "custom") {
+        setCustomStart(value?.start);
+        setCustomEnd(value?.end);
+      }
+    }
+  }, [value, isOpen]);
+  useEffect(() => {
+    if (isOpen && containerRef.current && dropdownRef.current && inputRef.current) {
+      const calculatePosition = () => {
+        const container = containerRef.current.getBoundingClientRect();
+        const input = inputRef.current.getBoundingClientRect();
+        const dropdown = dropdownRef.current;
+        const dropdownWidth = 400;
+        const dropdownHeight = dropdown.scrollHeight;
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const spaceBelow = viewportHeight - container.bottom;
+        const spaceAbove = container.top;
+        const showBelow = spaceBelow >= dropdownHeight + 10 || spaceBelow > spaceAbove;
+        let leftPos = 0;
+        let rightPos = "auto";
+        let arrowLeftPos = 24;
+        const containerLeft = container.left;
+        const containerWidth = container.width;
+        const containerRight = containerLeft + containerWidth;
+        const fitsOnRight = containerLeft + dropdownWidth <= viewportWidth - 16;
+        const fitsOnLeft = containerRight - dropdownWidth >= 16;
+        if (fitsOnRight) {
+          leftPos = 0;
+          rightPos = "auto";
+          arrowLeftPos = 24;
+        } else if (fitsOnLeft) {
+          leftPos = "auto";
+          rightPos = 0;
+          arrowLeftPos = dropdownWidth - 40;
+        } else {
+          const maxLeft = viewportWidth - dropdownWidth - 16;
+          const desiredLeft = Math.max(16 - containerLeft, Math.min(0, maxLeft - containerLeft));
+          leftPos = desiredLeft;
+          rightPos = "auto";
+          const inputCenter = input.left + input.width / 2 - container.left;
+          arrowLeftPos = Math.max(16, Math.min(dropdownWidth - 32, inputCenter - desiredLeft - 8));
+        }
+        setDropdownPosition({
+          top: showBelow,
+          left: leftPos,
+          right: rightPos,
+          arrowLeft: arrowLeftPos
+        });
+      };
+      setTimeout(calculatePosition, 10);
+      window.addEventListener("resize", calculatePosition);
+      window.addEventListener("scroll", calculatePosition, true);
+      return () => {
+        window.removeEventListener("resize", calculatePosition);
+        window.removeEventListener("scroll", calculatePosition, true);
+      };
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  const getHalfYearDates = (fy, halfYear) => {
+    const [startYear] = fy.split("-");
+    const year = parseInt(startYear);
+    const hy = halfYears.find((h) => h.id === halfYear);
+    const startDate = new Date(
+      hy.startMonth >= 3 ? year : year + 1,
+      hy.startMonth,
+      1
+    );
+    const endDate = new Date(
+      hy.endMonth >= 3 ? year : year + 1,
+      hy.endMonth + 1,
+      0
+    );
+    return {
+      start: startDate.toLocaleDateString("en-CA"),
+      end: endDate.toLocaleDateString("en-CA")
+    };
+  };
+  const getQuarterDates = (fy, quarter) => {
+    const [startYear] = fy.split("-");
+    const year = parseInt(startYear);
+    const q = quarters.find((q2) => q2.id === quarter);
+    const startDate = new Date(
+      q.startMonth >= 3 ? year : year + 1,
+      q.startMonth,
+      1
+    );
+    const endDate = new Date(
+      q.endMonth >= 3 ? year : year + 1,
+      q.endMonth + 1,
+      0
+    );
+    return {
+      start: startDate.toLocaleDateString("en-CA"),
+      end: endDate.toLocaleDateString("en-CA")
+    };
+  };
+  const getMonthRangeDates = (fy, startMonthId, endMonthId) => {
+    const [startYear] = fy.split("-");
+    const year = parseInt(startYear);
+    const startMonth = months.find((m) => m.id === startMonthId);
+    const endMonth = months.find((m) => m.id === endMonthId);
+    const startDate = new Date(
+      startMonth.index >= 3 ? year : year + 1,
+      startMonth.index,
+      1
+    );
+    const endDate = new Date(
+      endMonth.index >= 3 ? year : year + 1,
+      endMonth.index + 1,
+      0
+    );
+    return {
+      start: startDate.toLocaleDateString("en-CA"),
+      end: endDate.toLocaleDateString("en-CA")
+    };
+  };
+  useEffect(() => {
+    if (selectionMode === "yearly") {
+      if (selectedHalfYear) {
+        const dates = getHalfYearDates(financialYear, selectedHalfYear);
+        setTempDateRange(dates);
+      } else if (selectedQuarter) {
+        const dates = getQuarterDates(financialYear, selectedQuarter);
+        setTempDateRange(dates);
+      }
+    } else if (selectionMode === "monthly" && selectedMonthStart && selectedMonthEnd) {
+      const dates = getMonthRangeDates(financialYear, selectedMonthStart, selectedMonthEnd);
+      setTempDateRange(dates);
+    } else if (selectionMode === "custom" && customStart && customEnd) {
+      setTempDateRange({ start: customStart, end: customEnd });
+    }
+  }, [selectionMode, yearlySubMode, financialYear, selectedHalfYear, selectedQuarter, selectedMonthStart, selectedMonthEnd, customStart, customEnd]);
+  const handleHalfYearSelect = (halfYearId) => {
+    setSelectedHalfYear(halfYearId);
+    setSelectedQuarter(null);
+  };
+  const handleQuarterSelect = (quarterId) => {
+    setSelectedQuarter(quarterId);
+    setSelectedHalfYear(null);
+  };
+  const handleMonthClick = (monthId) => {
+    if (!monthRangeSelecting) {
+      setSelectedMonthStart(monthId);
+      setSelectedMonthEnd(null);
+      setMonthRangeSelecting(true);
+    } else {
+      const startId = selectedMonthStart;
+      const endId = monthId;
+      const startIndex = months.findIndex((m) => m.id === startId);
+      const endIndex = months.findIndex((m) => m.id === endId);
+      if (startIndex <= endIndex) {
+        setSelectedMonthStart(startId);
+        setSelectedMonthEnd(endId);
+      } else {
+        setSelectedMonthStart(endId);
+        setSelectedMonthEnd(startId);
+      }
+      setMonthRangeSelecting(false);
+    }
+  };
+  const isMonthInRange = (monthId) => {
+    if (!selectedMonthStart) return false;
+    if (!selectedMonthEnd) return monthId === selectedMonthStart;
+    const startIndex = months.findIndex((m) => m.id === selectedMonthStart);
+    const endIndex = months.findIndex((m) => m.id === selectedMonthEnd);
+    const currentIndex = months.findIndex((m) => m.id === monthId);
+    const minIndex = Math.min(startIndex, endIndex);
+    const maxIndex = Math.max(startIndex, endIndex);
+    return currentIndex >= minIndex && currentIndex <= maxIndex;
+  };
+  const isMonthRangeEdge = (monthId) => {
+    return monthId === selectedMonthStart || monthId === selectedMonthEnd;
+  };
+  const resetAllSelections = () => {
+    setSelectedHalfYear(null);
+    setSelectedQuarter(null);
+    setSelectedMonthStart(null);
+    setSelectedMonthEnd(null);
+    setMonthRangeSelecting(false);
+    setCustomStart("");
+    setCustomEnd("");
+    setTempDateRange({ start: "", end: "" });
+  };
+  const handleCancel = () => {
+    resetAllSelections();
+    setIsOpen(false);
+  };
+  const handleApply = () => {
+    if (tempDateRange.start && tempDateRange.end) {
+      onChange({
+        start: tempDateRange.start,
+        end: tempDateRange.end,
+        financialYear,
+        mode: selectionMode,
+        yearlySubMode: selectionMode === "yearly" ? yearlySubMode : null,
+        halfYear: selectedHalfYear,
+        quarter: selectedQuarter,
+        monthStart: selectedMonthStart,
+        monthEnd: selectedMonthEnd
+      });
+      setIsOpen(false);
+    }
+  };
+  const handleClear = () => {
+    resetAllSelections();
+    onChange(null);
+    setFinancialYear((/* @__PURE__ */ new Date()).getFullYear() + "-" + String((/* @__PURE__ */ new Date()).getFullYear() + 1).slice(2));
+  };
+  const formatDate2 = (dateStr) => {
+    if (!dateStr) return "";
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+  };
+  const getDisplayValue = () => {
+    if (!value) return "";
+    return `${formatDate2(value.start)} - ${formatDate2(value.end)}`;
+  };
+  const availableModes = [];
+  if (showYearly) availableModes.push("yearly");
+  if (showMonthly) availableModes.push("monthly");
+  if (showCustom) availableModes.push("custom");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `${isSticky ? "fixed z-40 bg-white" : "relative"} ${className}`,
+      style: isSticky ? {
+        top: stickyTop,
+        right: stickyRight || "auto",
+        width: parentWidth
+        // dynamic width applied here
+      } : {},
+      children: [
+        label && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            ref: inputRef,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            className: `
+          flex items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-2 rounded-lg cursor-pointer transition
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white hover:border-[#3B5AA1]/70"}
+          ${error ? "border-red-500" : "border-gray-300"}
+          ${isOpen ? "border-[#3B5AA1]/70 ring-2 ring-[#3B5AA1]/70" : ""}
+        `,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: `w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0 ${disabled ? "text-gray-400" : "text-[#3B5AA1]"}` }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs sm:text-sm truncate ${value ? "text-gray-900" : "text-gray-400"}`, children: getDisplayValue() || placeholder })
+              ] }),
+              value && !disabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleClear();
+                  },
+                  className: "p-1 hover:bg-gray-100 rounded flex-shrink-0 ml-2",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-3 h-3 sm:w-4 sm:h-4 text-gray-500" })
+                }
+              )
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-red-500", children: error }),
+        isOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            ref: dropdownRef,
+            style: {
+              left: dropdownPosition.left !== "auto" ? `${dropdownPosition.left}px` : "auto",
+              right: dropdownPosition.right !== "auto" ? `${dropdownPosition.right}px` : "auto"
+            },
+            className: `
+            absolute z-50 w-full sm:w-[400px] bg-white rounded-xl shadow-2xl border-2 border-gray-200 
+            ${dropdownPosition.top ? "mt-2" : "mb-2 bottom-full"}
+          `,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  style: { left: `${dropdownPosition.arrowLeft}px` },
+                  className: `
+              absolute w-4 h-4 bg-white border-gray-200 transform rotate-45
+              ${dropdownPosition.top ? "-top-2 border-t-2 border-l-2" : "-bottom-2 border-b-2 border-r-2"}
+            `
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative bg-white rounded-xl p-4 sm:p-5 max-h-[70vh] overflow-y-auto", children: [
+                showFinancialYear && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-xs sm:text-sm font-semibold text-gray-700 mb-2", children: "Financial Year" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "select",
+                    {
+                      value: financialYear,
+                      onChange: (e) => {
+                        setFinancialYear(e.target.value);
+                        resetAllSelections();
+                      },
+                      className: "w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:border-[#3B5AA1]/70 focus:ring-2 focus:ring-[#3B5AA1]/70 transition",
+                      children: financialYears.map((fy) => /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: fy, children: [
+                        "FY ",
+                        fy
+                      ] }, fy))
+                    }
+                  )
+                ] }),
+                availableModes.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2 mb-4 bg-gray-100 p-1 rounded-lg", children: availableModes.map((mode) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      setSelectionMode(mode);
+                      resetAllSelections();
+                    },
+                    className: `flex-1 px-3 py-2 font-medium capitalize rounded-md transition text-sm ${selectionMode === mode ? "bg-[#3B5AA1] text-white shadow-md" : "bg-transparent text-gray-600 hover:bg-gray-200"}`,
+                    children: mode
+                  },
+                  mode
+                )) }),
+                selectionMode === "yearly" && showYearly && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Select Half Year" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2", children: halfYears.map((halfYear) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        onClick: () => handleHalfYearSelect(halfYear.id),
+                        className: `p-3 rounded-lg border-2 font-medium text-sm transition ${selectedHalfYear === halfYear.id ? "bg-[#3B5AA1] text-white border-[#3B5AA1]/70 shadow-md" : "bg-white text-gray-700 border-gray-300 hover:border-[#3B5AA1]/70 hover:bg-[#3B5AA1]/10"}`,
+                        children: halfYear.label
+                      },
+                      halfYear.id
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Select Quarter" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2", children: quarters.map((quarter) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        onClick: () => handleQuarterSelect(quarter.id),
+                        className: `p-3 rounded-lg border-2 font-medium text-sm transition ${selectedQuarter === quarter.id ? "bg-[#3B5AA1] text-white border-[#3B5AA1]/70 shadow-md" : "bg-white text-gray-700 border-gray-300 hover:border-[#3B5AA1]/70 hover:bg-[#3B5AA1]/10"}`,
+                        children: quarter.label
+                      },
+                      quarter.id
+                    )) })
+                  ] })
+                ] }),
+                selectionMode === "monthly" && showMonthly && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Select Month Range" }),
+                    monthRangeSelecting && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-[#3B5AA1] font-medium", children: "Select end →" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((month) => {
+                    const inRange = isMonthInRange(month.id);
+                    const isEdge = isMonthRangeEdge(month.id);
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        onClick: () => handleMonthClick(month.id),
+                        className: `p-2 rounded-lg border-2 font-medium text-xs transition ${inRange ? isEdge ? "bg-[#3B5AA1] text-white border-[#3B5AA1]/70 shadow-md" : "bg-[#3B5AA1]/10 text-[#3B5AA1] border-[#3B5AA1]/70" : "bg-white text-gray-700 border-gray-300 hover:border-[#3B5AA1]/70 hover:bg-[#3B5AA1]/10"}`,
+                        children: month.short
+                      },
+                      month.id
+                    );
+                  }) }),
+                  selectedMonthStart && selectedMonthEnd && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setSelectedMonthStart(null);
+                        setSelectedMonthEnd(null);
+                        setMonthRangeSelecting(false);
+                      },
+                      className: "mt-2 text-xs text-[#3B5AA1] hover:underline font-medium",
+                      children: "Clear Selection"
+                    }
+                  )
+                ] }),
+                selectionMode === "custom" && showCustom && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Custom Date Range" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Date" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "input",
+                        {
+                          type: "date",
+                          value: customStart,
+                          onChange: (e) => setCustomStart(e.target.value),
+                          className: "w-full px-2.5 py-2 border-2 border-gray-300 rounded-lg text-xs focus:border-[#3B5AA1]/70 focus:ring-2 focus:ring-[#3B5AA1]/70 transition"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Date" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "input",
+                        {
+                          type: "date",
+                          value: customEnd,
+                          onChange: (e) => setCustomEnd(e.target.value),
+                          min: customStart,
+                          className: "w-full px-2.5 py-2 border-2 border-gray-300 rounded-lg text-xs focus:border-[#3B5AA1]/70 focus:ring-2 focus:ring-[#3B5AA1]/70 transition"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                tempDateRange.start && tempDateRange.end && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#3B5AA1]/10 rounded-lg p-3 mb-4 border border-[#3B5AA1]/70", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-medium text-gray-600 mb-1", children: "Selected Range" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs font-semibold text-[#3B5AA1] break-words", children: [
+                    formatDate2(tempDateRange.start),
+                    " - ",
+                    formatDate2(tempDateRange.end)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      onClick: handleCancel,
+                      className: "flex-1 px-4 py-2 border-2 border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50 transition text-sm",
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      onClick: handleApply,
+                      disabled: !tempDateRange.start || !tempDateRange.end,
+                      className: `flex-1 px-4 py-2 rounded-lg font-medium transition text-sm ${tempDateRange.start && tempDateRange.end ? "bg-[#3B5AA1] text-white hover:bg-[#2d4680] shadow-md" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`,
+                      children: "Apply"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   ComboDropdown as MytekComboDropdown,
+  FinancialDateRangePicker as MytekFinancialDateRangePicker,
   CustomInput as MytekInputField,
   Loader as MytekLoader,
   Mt_MessageBox as MytekMessageBox,