@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

package/dist/components/core/dashboard/SolidDashboardFilterRequired.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SolidIcon } from "../../shad-cn-ui";
 export var SolidDashboardFilterRequired = function () {
     return (_jsx("div", { className: "flex align-items-center justify-content-center", style: { minHeight: '400px', padding: '2rem' }, children: _jsxs("div", { className: "flex flex-column align-items-center gap-3 text-center", style: { maxWidth: '500px' }, children: [_jsx("div", { className: "flex align-items-center justify-content-center border-circle", style: {
                         width: '80px',
                         height: '80px',
                         backgroundColor: 'var(--blue-50)',
                         color: 'var(--blue-500)'
-                    }, children: _jsx("i", { className: "pi pi-filter", style: { color: "var(--primary-color)", fontSize: '2.5rem' } }) }), _jsx("div", { children: _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("h3", { className: "m-0", style: { color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }, children: "Filters Required" }), _jsx("p", { className: "m-0", style: { color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }, children: "Please select the required filters to render your dashboard." })] }) })] }) }));
+                    }, children: _jsx(SolidIcon, { name: "si-filter", style: { color: "var(--primary-color)", fontSize: '2.5rem' }, "aria-hidden": true }) }), _jsx("div", { children: _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("h3", { className: "m-0", style: { color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }, children: "Filters Required" }), _jsx("p", { className: "m-0", style: { color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }, children: "Please select the required filters to render your dashboard." })] }) })] }) }));
 };
 //# sourceMappingURL=SolidDashboardFilterRequired.js.map

package/dist/components/core/dashboard/SolidDashboardFilterRequired.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardFilterRequired.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardFilterRequired.tsx"],"names":[],"mappings":";AACA,MAAM,CAAC,IAAM,4BAA4B,GAAG;IAC1C,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAC5G,eAAK,SAAS,EAAC,uDAAuD,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aACjG,cACE,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,gBAAgB;wBACjC,KAAK,EAAE,iBAAiB;qBACzB,YAED,YAAG,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAI,GACxF,EACN,wBACE,eAAK,SAAS,EAAC,wBAAwB,aACrC,aAAI,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,iCAAuB,EACtH,YAAG,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,6EAEtG,IACA,GACF,IACF,GACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\nexport const SolidDashboardFilterRequired = () => {\n  return (\n    <div className=\"flex align-items-center justify-content-center\" style={{ minHeight: '400px', padding: '2rem' }}>\n      <div className=\"flex flex-column align-items-center gap-3 text-center\" style={{ maxWidth: '500px' }}>\n        <div\n          className=\"flex align-items-center justify-content-center border-circle\"\n          style={{\n            width: '80px',\n            height: '80px',\n            backgroundColor: 'var(--blue-50)',\n            color: 'var(--blue-500)'\n          }}\n        >\n          <i className=\"pi pi-filter\" style={{ color: \"var(--primary-color)\", fontSize: '2.5rem' }} />\n        </div>\n        <div>\n          <div className=\"flex flex-column gap-2\">\n            <h3 className=\"m-0\" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>Filters Required</h3>\n            <p className=\"m-0\" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>\n              Please select the required filters to render your dashboard.\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}"]}
+{"version":3,"file":"SolidDashboardFilterRequired.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardFilterRequired.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,MAAM,CAAC,IAAM,4BAA4B,GAAG;IAC1C,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAC5G,eAAK,SAAS,EAAC,uDAAuD,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aACjG,cACE,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,gBAAgB;wBACjC,KAAK,EAAE,iBAAiB;qBACzB,YAED,KAAC,SAAS,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,QAAQ,EAAE,QAAQ,EAAE,wBAAgB,GACpG,EACN,wBACE,eAAK,SAAS,EAAC,wBAAwB,aACrC,aAAI,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,iCAAuB,EACtH,YAAG,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,6EAEtG,IACA,GACF,IACF,GACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { SolidIcon } from \"../../shad-cn-ui\";\nexport const SolidDashboardFilterRequired = () => {\n  return (\n    <div className=\"flex align-items-center justify-content-center\" style={{ minHeight: '400px', padding: '2rem' }}>\n      <div className=\"flex flex-column align-items-center gap-3 text-center\" style={{ maxWidth: '500px' }}>\n        <div\n          className=\"flex align-items-center justify-content-center border-circle\"\n          style={{\n            width: '80px',\n            height: '80px',\n            backgroundColor: 'var(--blue-50)',\n            color: 'var(--blue-500)'\n          }}\n        >\n          <SolidIcon name=\"si-filter\" style={{ color: \"var(--primary-color)\", fontSize: '2.5rem' }} aria-hidden />\n        </div>\n        <div>\n          <div className=\"flex flex-column gap-2\">\n            <h3 className=\"m-0\" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>Filters Required</h3>\n            <p className=\"m-0\" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>\n              Please select the required filters to render your dashboard.\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/core/dashboard/SolidDashboardFilterRequired.tsx

@@ -1,4 +1,4 @@
-
+import { SolidIcon } from "../../shad-cn-ui";
 export const SolidDashboardFilterRequired = () => {
   return (
     <div className="flex align-items-center justify-content-center" style={{ minHeight: '400px', padding: '2rem' }}>
@@ -12,7 +12,7 @@ export const SolidDashboardFilterRequired = () => {
             color: 'var(--blue-500)'
           }}
         >
-          <i className="pi pi-filter" style={{ color: "var(--primary-color)", fontSize: '2.5rem' }} />
+          <SolidIcon name="si-filter" style={{ color: "var(--primary-color)", fontSize: '2.5rem' }} aria-hidden />
         </div>
         <div>
           <div className="flex flex-column gap-2">
@@ -25,4 +25,4 @@ export const SolidDashboardFilterRequired = () => {
       </div>
     </div>
   )
-}
+}

package/dist/components/core/dashboard/SolidDashboardLoading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardLoading.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardLoading.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,+CAmDjC,CAAA"}
+{"version":3,"file":"SolidDashboardLoading.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardLoading.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,qBAAqB,+CAmDjC,CAAA"}

package/dist/components/core/dashboard/SolidDashboardLoading.js

@@ -1,7 +1,10 @@
 "use client'";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from 'primereact/skeleton';
+var SkeletonBlock = function (_a) {
+    var width = _a.width, height = _a.height, className = _a.className;
+    return (_jsx("div", { className: "solid-skeleton ".concat(className !== null && className !== void 0 ? className : ""), style: { width: width, height: height } }));
+};
 export var SolidDashboardLoading = function () {
-    return (_jsxs("div", { className: "grid p-4", children: [_jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(Skeleton, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(Skeleton, { width: "70%", height: "2rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(Skeleton, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(Skeleton, { width: "70%", height: "2rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(Skeleton, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(Skeleton, { width: "70%", height: "2rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(Skeleton, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(Skeleton, { width: "100%", height: "14rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-12 lg:col-12 xl:col-8", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(Skeleton, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(Skeleton, { width: "100%", height: "14rem" })] }) }), _jsx("div", { className: "col-12", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(Skeleton, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(Skeleton, { width: "100%", height: "16rem" })] }) })] }));
+    return (_jsxs("div", { className: "grid p-4", children: [_jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(SkeletonBlock, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(SkeletonBlock, { width: "70%", height: "2rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(SkeletonBlock, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(SkeletonBlock, { width: "70%", height: "2rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(SkeletonBlock, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(SkeletonBlock, { width: "70%", height: "2rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(SkeletonBlock, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(SkeletonBlock, { width: "100%", height: "14rem" })] }) }), _jsx("div", { className: "col-12 sm:col-12 md:col-12 lg:col-12 xl:col-8", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(SkeletonBlock, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(SkeletonBlock, { width: "100%", height: "14rem" })] }) }), _jsx("div", { className: "col-12", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(SkeletonBlock, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(SkeletonBlock, { width: "100%", height: "16rem" })] }) })] }));
 };
 //# sourceMappingURL=SolidDashboardLoading.js.map

package/dist/components/core/dashboard/SolidDashboardLoading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardLoading.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardLoading.tsx"],"names":[],"mappings":"AAAA,aAAa,CAAA;;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,CAAC,IAAM,qBAAqB,GAAG;IACjC,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aAGrB,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EACzD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,GAAG,IACpC,GACJ,EAEN,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EACzD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,GAAG,IACpC,GACJ,EAEN,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EACzD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,GAAG,IACpC,GACJ,EAGN,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EACzD,KAAC,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,GAAG,IACtC,GACJ,EAEN,cAAK,SAAS,EAAC,+CAA+C,YAC1D,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EACzD,KAAC,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,GAAG,IACtC,GACJ,EAGN,cAAK,SAAS,EAAC,QAAQ,YACnB,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EACzD,KAAC,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,GAAG,IACtC,GACJ,IAEJ,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["\"use client'\"\nimport { Skeleton } from 'primereact/skeleton'\n\nexport const SolidDashboardLoading = () => {\n    return (\n        <div className=\"grid p-4\">\n\n            {/* ROW 1 — Responsive KPI Cards */}\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <Skeleton width=\"40%\" height=\"1.4rem\" className=\"mb-2\" />\n                    <Skeleton width=\"70%\" height=\"2rem\" />\n                </div>\n            </div>\n\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <Skeleton width=\"40%\" height=\"1.4rem\" className=\"mb-2\" />\n                    <Skeleton width=\"70%\" height=\"2rem\" />\n                </div>\n            </div>\n\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <Skeleton width=\"40%\" height=\"1.4rem\" className=\"mb-2\" />\n                    <Skeleton width=\"70%\" height=\"2rem\" />\n                </div>\n            </div>\n\n            {/* ROW 2 — Responsive Charts: 2 cards on desktop, but collapses */}\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <Skeleton width=\"30%\" height=\"1.4rem\" className=\"mb-3\" />\n                    <Skeleton width=\"100%\" height=\"14rem\" />\n                </div>\n            </div>\n\n            <div className=\"col-12 sm:col-12 md:col-12 lg:col-12 xl:col-8\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <Skeleton width=\"30%\" height=\"1.4rem\" className=\"mb-3\" />\n                    <Skeleton width=\"100%\" height=\"14rem\" />\n                </div>\n            </div>\n\n            {/* ROW 3 — Full width always */}\n            <div className=\"col-12\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <Skeleton width=\"30%\" height=\"1.4rem\" className=\"mb-3\" />\n                    <Skeleton width=\"100%\" height=\"16rem\" />\n                </div>\n            </div>\n\n        </div>\n    )\n}"]}
+{"version":3,"file":"SolidDashboardLoading.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardLoading.tsx"],"names":[],"mappings":"AAAA,aAAa,CAAA;;AAEb,IAAM,aAAa,GAAG,UAAC,EAAqF;QAAnF,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,SAAS,eAAA;IAAgE,OAAA,CAC7G,cACI,SAAS,EAAE,yBAAkB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,EAC9C,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,GAC1B,CACL;AALgH,CAKhH,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG;IACjC,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aAGrB,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EAC9D,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,GAAG,IACzC,GACJ,EAEN,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EAC9D,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,GAAG,IACzC,GACJ,EAEN,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EAC9D,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,GAAG,IACzC,GACJ,EAGN,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EAC9D,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,GAAG,IAC3C,GACJ,EAEN,cAAK,SAAS,EAAC,+CAA+C,YAC1D,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EAC9D,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,GAAG,IAC3C,GACJ,EAGN,cAAK,SAAS,EAAC,QAAQ,YACnB,eAAK,SAAS,EAAC,wCAAwC,aACnD,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,EAC9D,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,GAAG,IAC3C,GACJ,IAEJ,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["\"use client'\"\n\nconst SkeletonBlock = ({ width, height, className }: { width?: string; height?: string; className?: string }) => (\n    <div\n        className={`solid-skeleton ${className ?? \"\"}`}\n        style={{ width, height }}\n    />\n);\n\nexport const SolidDashboardLoading = () => {\n    return (\n        <div className=\"grid p-4\">\n\n            {/* ROW 1 — Responsive KPI Cards */}\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <SkeletonBlock width=\"40%\" height=\"1.4rem\" className=\"mb-2\" />\n                    <SkeletonBlock width=\"70%\" height=\"2rem\" />\n                </div>\n            </div>\n\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <SkeletonBlock width=\"40%\" height=\"1.4rem\" className=\"mb-2\" />\n                    <SkeletonBlock width=\"70%\" height=\"2rem\" />\n                </div>\n            </div>\n\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <SkeletonBlock width=\"40%\" height=\"1.4rem\" className=\"mb-2\" />\n                    <SkeletonBlock width=\"70%\" height=\"2rem\" />\n                </div>\n            </div>\n\n            {/* ROW 2 — Responsive Charts: 2 cards on desktop, but collapses */}\n            <div className=\"col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <SkeletonBlock width=\"30%\" height=\"1.4rem\" className=\"mb-3\" />\n                    <SkeletonBlock width=\"100%\" height=\"14rem\" />\n                </div>\n            </div>\n\n            <div className=\"col-12 sm:col-12 md:col-12 lg:col-12 xl:col-8\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <SkeletonBlock width=\"30%\" height=\"1.4rem\" className=\"mb-3\" />\n                    <SkeletonBlock width=\"100%\" height=\"14rem\" />\n                </div>\n            </div>\n\n            {/* ROW 3 — Full width always */}\n            <div className=\"col-12\">\n                <div className=\"surface-card p-3 border-round shadow-1\">\n                    <SkeletonBlock width=\"30%\" height=\"1.4rem\" className=\"mb-3\" />\n                    <SkeletonBlock width=\"100%\" height=\"16rem\" />\n                </div>\n            </div>\n\n        </div>\n    )\n}\n"]}

package/dist/components/core/dashboard/SolidDashboardLoading.tsx

@@ -1,5 +1,11 @@
 "use client'"
-import { Skeleton } from 'primereact/skeleton'
+
+const SkeletonBlock = ({ width, height, className }: { width?: string; height?: string; className?: string }) => (
+    <div
+        className={`solid-skeleton ${className ?? ""}`}
+        style={{ width, height }}
+    />
+);
 
 export const SolidDashboardLoading = () => {
     return (
@@ -8,48 +14,48 @@ export const SolidDashboardLoading = () => {
             {/* ROW 1 — Responsive KPI Cards */}
             <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
                 <div className="surface-card p-3 border-round shadow-1">
-                    <Skeleton width="40%" height="1.4rem" className="mb-2" />
-                    <Skeleton width="70%" height="2rem" />
+                    <SkeletonBlock width="40%" height="1.4rem" className="mb-2" />
+                    <SkeletonBlock width="70%" height="2rem" />
                 </div>
             </div>
 
             <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
                 <div className="surface-card p-3 border-round shadow-1">
-                    <Skeleton width="40%" height="1.4rem" className="mb-2" />
-                    <Skeleton width="70%" height="2rem" />
+                    <SkeletonBlock width="40%" height="1.4rem" className="mb-2" />
+                    <SkeletonBlock width="70%" height="2rem" />
                 </div>
             </div>
 
             <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
                 <div className="surface-card p-3 border-round shadow-1">
-                    <Skeleton width="40%" height="1.4rem" className="mb-2" />
-                    <Skeleton width="70%" height="2rem" />
+                    <SkeletonBlock width="40%" height="1.4rem" className="mb-2" />
+                    <SkeletonBlock width="70%" height="2rem" />
                 </div>
             </div>
 
             {/* ROW 2 — Responsive Charts: 2 cards on desktop, but collapses */}
             <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
                 <div className="surface-card p-3 border-round shadow-1">
-                    <Skeleton width="30%" height="1.4rem" className="mb-3" />
-                    <Skeleton width="100%" height="14rem" />
+                    <SkeletonBlock width="30%" height="1.4rem" className="mb-3" />
+                    <SkeletonBlock width="100%" height="14rem" />
                 </div>
             </div>
 
             <div className="col-12 sm:col-12 md:col-12 lg:col-12 xl:col-8">
                 <div className="surface-card p-3 border-round shadow-1">
-                    <Skeleton width="30%" height="1.4rem" className="mb-3" />
-                    <Skeleton width="100%" height="14rem" />
+                    <SkeletonBlock width="30%" height="1.4rem" className="mb-3" />
+                    <SkeletonBlock width="100%" height="14rem" />
                 </div>
             </div>
 
             {/* ROW 3 — Full width always */}
             <div className="col-12">
                 <div className="surface-card p-3 border-round shadow-1">
-                    <Skeleton width="30%" height="1.4rem" className="mb-3" />
-                    <Skeleton width="100%" height="16rem" />
+                    <SkeletonBlock width="30%" height="1.4rem" className="mb-3" />
+                    <SkeletonBlock width="100%" height="16rem" />
                 </div>
             </div>
 
         </div>
     )
-}
+}

package/dist/components/core/dashboard/SolidDashboardNotAvailable.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SolidIcon } from "../../shad-cn-ui";
 var SolidDashboardNotAvailable = function () {
     return (_jsx("div", { className: "flex align-items-center justify-content-center", style: { minHeight: '400px', padding: '2rem' }, children: _jsxs("div", { className: "flex flex-column align-items-center gap-3 text-center", style: { maxWidth: '500px' }, children: [_jsx("div", { className: "flex align-items-center justify-content-center border-circle", style: {
                         width: '80px',
                         height: '80px',
                         backgroundColor: 'var(--blue-50)',
                         color: 'var(--blue-500)'
-                    }, children: _jsx("i", { className: "pi pi-chart-bar", style: { fontSize: '2.5rem' } }) }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("h3", { className: "m-0", style: { color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }, children: "Dashboard Not Available" }), _jsx("p", { className: "m-0", style: { color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }, children: "This dashboard has not been configured yet or does not exist. Please check the dashboard settings or contact your administrator." })] })] }) }));
+                    }, children: _jsx(SolidIcon, { name: "si-chart-bar", style: { fontSize: '2.5rem' }, "aria-hidden": true }) }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("h3", { className: "m-0", style: { color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }, children: "Dashboard Not Available" }), _jsx("p", { className: "m-0", style: { color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }, children: "This dashboard has not been configured yet or does not exist. Please check the dashboard settings or contact your administrator." })] })] }) }));
 };
 export default SolidDashboardNotAvailable;
 //# sourceMappingURL=SolidDashboardNotAvailable.js.map

package/dist/components/core/dashboard/SolidDashboardNotAvailable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardNotAvailable.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardNotAvailable.tsx"],"names":[],"mappings":";AAEA,IAAM,0BAA0B,GAAG;IACjC,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAC5G,eAAK,SAAS,EAAC,uDAAuD,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aACjG,cACE,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,gBAAgB;wBACjC,KAAK,EAAE,iBAAiB;qBACzB,YAED,YAAG,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAM,GAC9D,EAEN,eAAK,SAAS,EAAC,wBAAwB,aACrC,aAAI,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,wCAE1F,EACL,YAAG,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,iJAEtG,IACA,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["\n\nconst SolidDashboardNotAvailable = () => {\n  return (\n    <div className=\"flex align-items-center justify-content-center\" style={{ minHeight: '400px', padding: '2rem' }}>\n      <div className=\"flex flex-column align-items-center gap-3 text-center\" style={{ maxWidth: '500px' }}>\n        <div \n          className=\"flex align-items-center justify-content-center border-circle\"\n          style={{\n            width: '80px',\n            height: '80px',\n            backgroundColor: 'var(--blue-50)',\n            color: 'var(--blue-500)'\n          }}\n        >\n          <i className=\"pi pi-chart-bar\" style={{ fontSize: '2.5rem' }}></i>\n        </div>\n        \n        <div className=\"flex flex-column gap-2\">\n          <h3 className=\"m-0\" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>\n            Dashboard Not Available\n          </h3>\n          <p className=\"m-0\" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>\n            This dashboard has not been configured yet or does not exist. Please check the dashboard settings or contact your administrator.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default SolidDashboardNotAvailable;"]}
+{"version":3,"file":"SolidDashboardNotAvailable.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardNotAvailable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,IAAM,0BAA0B,GAAG;IACjC,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAC5G,eAAK,SAAS,EAAC,uDAAuD,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aACjG,cACE,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,gBAAgB;wBACjC,KAAK,EAAE,iBAAiB;qBACzB,YAED,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,wBAAgB,GACxE,EAEN,eAAK,SAAS,EAAC,wBAAwB,aACrC,aAAI,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,wCAE1F,EACL,YAAG,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,iJAEtG,IACA,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["import { SolidIcon } from \"../../shad-cn-ui\";\n\nconst SolidDashboardNotAvailable = () => {\n  return (\n    <div className=\"flex align-items-center justify-content-center\" style={{ minHeight: '400px', padding: '2rem' }}>\n      <div className=\"flex flex-column align-items-center gap-3 text-center\" style={{ maxWidth: '500px' }}>\n        <div \n          className=\"flex align-items-center justify-content-center border-circle\"\n          style={{\n            width: '80px',\n            height: '80px',\n            backgroundColor: 'var(--blue-50)',\n            color: 'var(--blue-500)'\n          }}\n        >\n          <SolidIcon name=\"si-chart-bar\" style={{ fontSize: '2.5rem' }} aria-hidden />\n        </div>\n        \n        <div className=\"flex flex-column gap-2\">\n          <h3 className=\"m-0\" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>\n            Dashboard Not Available\n          </h3>\n          <p className=\"m-0\" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>\n            This dashboard has not been configured yet or does not exist. Please check the dashboard settings or contact your administrator.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default SolidDashboardNotAvailable;\n"]}

package/dist/components/core/dashboard/SolidDashboardNotAvailable.tsx

@@ -1,4 +1,4 @@
-
+import { SolidIcon } from "../../shad-cn-ui";
 
 const SolidDashboardNotAvailable = () => {
   return (
@@ -13,7 +13,7 @@ const SolidDashboardNotAvailable = () => {
             color: 'var(--blue-500)'
           }}
         >
-          <i className="pi pi-chart-bar" style={{ fontSize: '2.5rem' }}></i>
+          <SolidIcon name="si-chart-bar" style={{ fontSize: '2.5rem' }} aria-hidden />
         </div>
         
         <div className="flex flex-column gap-2">
@@ -29,4 +29,4 @@ const SolidDashboardNotAvailable = () => {
   );
 };
 
-export default SolidDashboardNotAvailable;
+export default SolidDashboardNotAvailable;

package/dist/components/core/dashboard/SolidDashboardRenderError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardRenderError.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardRenderError.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,+CA0BrC,CAAA"}
+{"version":3,"file":"SolidDashboardRenderError.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardRenderError.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,+CAyBrC,CAAA"}

package/dist/components/core/dashboard/SolidDashboardRenderError.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SolidIcon } from "../../shad-cn-ui";
 export var SolidDashboardRenderError = function () {
     return (_jsx("div", { className: "flex align-items-center justify-content-center", style: { minHeight: '400px', padding: '2rem' }, children: _jsxs("div", { className: "flex flex-column align-items-center gap-3 text-center", style: { maxWidth: '500px' }, children: [_jsx("div", { className: "flex align-items-center justify-content-center border-circle", style: {
                         width: '80px',
                         height: '80px',
                         backgroundColor: 'var(--red-50)',
                         color: 'var(--red-500)'
-                    }, children: _jsx("i", { className: "pi pi-exclamation-triangle", style: { fontSize: '2.5rem' } }) }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("h3", { className: "m-0", style: { color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }, children: "Error in Loading Dashboard" }), _jsx("p", { className: "m-0", style: { color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }, children: "Failed to load dashboard. Please try again." })] })] }) }));
+                    }, children: _jsx(SolidIcon, { name: "si-exclamation-triangle", style: { fontSize: '2.5rem' }, "aria-hidden": true }) }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("h3", { className: "m-0", style: { color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }, children: "Error in Loading Dashboard" }), _jsx("p", { className: "m-0", style: { color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }, children: "Failed to load dashboard. Please try again." })] })] }) }));
 };
 //# sourceMappingURL=SolidDashboardRenderError.js.map

package/dist/components/core/dashboard/SolidDashboardRenderError.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardRenderError.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardRenderError.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,yBAAyB,GAAG;IACvC,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAC5G,eAAK,SAAS,EAAC,uDAAuD,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aACjG,cACE,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,eAAe;wBAChC,KAAK,EAAE,gBAAgB;qBACxB,YAED,YAAG,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAI,GAChC,EACN,eAAK,SAAS,EAAC,wBAAwB,aACrC,aAAI,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,2CAAiC,EAEhI,YAAG,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,4DAEtG,IACA,IACF,GACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\n\nexport const SolidDashboardRenderError = () => {\n  return (\n    <div className=\"flex align-items-center justify-content-center\" style={{ minHeight: '400px', padding: '2rem' }}>\n      <div className=\"flex flex-column align-items-center gap-3 text-center\" style={{ maxWidth: '500px' }}>\n        <div\n          className=\"flex align-items-center justify-content-center border-circle\"\n          style={{\n            width: '80px',\n            height: '80px',\n            backgroundColor: 'var(--red-50)',\n            color: 'var(--red-500)'\n          }}\n        >\n          <i className=\"pi pi-exclamation-triangle\"\n             style={{ fontSize: '2.5rem' }} />\n        </div>\n        <div className=\"flex flex-column gap-2\">\n          <h3 className=\"m-0\" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>Error in Loading Dashboard</h3>\n\n          <p className=\"m-0\" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>\n            Failed to load dashboard. Please try again.\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}"]}
+{"version":3,"file":"SolidDashboardRenderError.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardRenderError.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,CAAC,IAAM,yBAAyB,GAAG;IACvC,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAC5G,eAAK,SAAS,EAAC,uDAAuD,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aACjG,cACE,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,eAAe;wBAChC,KAAK,EAAE,gBAAgB;qBACxB,YAED,KAAC,SAAS,IAAC,IAAI,EAAC,yBAAyB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,wBAAgB,GACnF,EACN,eAAK,SAAS,EAAC,wBAAwB,aACrC,aAAI,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,2CAAiC,EAEhI,YAAG,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,4DAEtG,IACA,IACF,GACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { SolidIcon } from \"../../shad-cn-ui\";\n\nexport const SolidDashboardRenderError = () => {\n  return (\n    <div className=\"flex align-items-center justify-content-center\" style={{ minHeight: '400px', padding: '2rem' }}>\n      <div className=\"flex flex-column align-items-center gap-3 text-center\" style={{ maxWidth: '500px' }}>\n        <div\n          className=\"flex align-items-center justify-content-center border-circle\"\n          style={{\n            width: '80px',\n            height: '80px',\n            backgroundColor: 'var(--red-50)',\n            color: 'var(--red-500)'\n          }}\n        >\n          <SolidIcon name=\"si-exclamation-triangle\" style={{ fontSize: '2.5rem' }} aria-hidden />\n        </div>\n        <div className=\"flex flex-column gap-2\">\n          <h3 className=\"m-0\" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>Error in Loading Dashboard</h3>\n\n          <p className=\"m-0\" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>\n            Failed to load dashboard. Please try again.\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/core/dashboard/SolidDashboardRenderError.tsx

@@ -1,4 +1,4 @@
-
+import { SolidIcon } from "../../shad-cn-ui";
 
 export const SolidDashboardRenderError = () => {
   return (
@@ -13,8 +13,7 @@ export const SolidDashboardRenderError = () => {
             color: 'var(--red-500)'
           }}
         >
-          <i className="pi pi-exclamation-triangle"
-             style={{ fontSize: '2.5rem' }} />
+          <SolidIcon name="si-exclamation-triangle" style={{ fontSize: '2.5rem' }} aria-hidden />
         </div>
         <div className="flex flex-column gap-2">
           <h3 className="m-0" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>Error in Loading Dashboard</h3>
@@ -26,4 +25,4 @@ export const SolidDashboardRenderError = () => {
       </div>
     </div>
   )
-}
+}

package/dist/components/core/dashboard/SolidDashboardVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardVariable.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardVariable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAI3D,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IACtD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,uBAAuB,CAAC;CAC5C;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA+C9E,CAAA;AAED,eAAO,MAAM,uCAAuC,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA2E1F,CAAA;AAED,eAAO,MAAM,sCAAsC,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAgEzF,CAAA;AAED,MAAM,WAAW,2BAA2B;IAC1C,kBAAkB,EAAE,GAAG,CAAC;IACxB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAmCjE,CAAA;AAED,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"SolidDashboardVariable.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardVariable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAQ3D,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IACtD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,uBAAuB,CAAC;CAC5C;AAID,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAoD9E,CAAA;AAED,eAAO,MAAM,uCAAuC,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAyE1F,CAAA;AAED,eAAO,MAAM,sCAAsC,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAgEzF,CAAA;AAED,MAAM,WAAW,2BAA2B;IAC1C,kBAAkB,EAAE,GAAG,CAAC;IACxB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAkCjE,CAAA;AAED,eAAe,sBAAsB,CAAC"}

package/dist/components/core/dashboard/SolidDashboardVariable.js

@@ -8,13 +8,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AutoComplete } from "primereact/autocomplete";
-import { Calendar } from "primereact/calendar";
 import { useEffect, useState } from "react";
 import styles from './SolidDashboard.module.css';
 import { useGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
-import { ProgressSpinner } from "primereact/progressspinner";
-import { Button } from "primereact/button";
+import { SolidAutocomplete, SolidButton, SolidDatePicker, SolidIcon, SolidSpinner } from "../../shad-cn-ui";
 export var DateVariableFilterComponent = function (_a) {
     var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.dashboardVariable;
     // Initialize the default dates state
@@ -30,12 +27,10 @@ export var DateVariableFilterComponent = function (_a) {
     useEffect(function () {
         setDates(null); // reset UI
     }, [clearSignal]);
-    return (_jsxs("div", { className: "flex align-items-center ".concat(styles.SolidDashboardDateRangeFilterWrapper), children: [_jsx(Calendar, { value: dates, onChange: function (e) {
-                    console.log("Calendar changed values are: ");
-                    console.log(e.value);
-                    var newDates = e.value;
+    return (_jsxs("div", { className: "flex align-items-center ".concat(styles.SolidDashboardDateRangeFilterWrapper), children: [_jsx(SolidDatePicker, { selectsRange: true, startDate: dates ? dates[0] : null, endDate: dates ? dates[1] : null, onChange: function (next) {
+                    var newDates = next;
                     setDates(newDates);
-                    if (newDates && newDates.length === 2 && newDates[0] && newDates[1]) {
+                    if (newDates && newDates[0] && newDates[1]) {
                         var filter_1 = {
                             variableName: dashboardVariable.variableName,
                             // @ts-ignore
@@ -51,7 +46,7 @@ export var DateVariableFilterComponent = function (_a) {
                             return [filter_1];
                         });
                     }
-                }, selectionMode: "range", readOnlyInput: true, hideOnRangeSelection: true, inputStyle: { height: 36.38 }, className: styles.SolidDashboardDateRangeFilter }), _jsx("div", { className: "px-2", children: _jsx("i", { className: "pi pi-calendar opacity-50" }) })] }));
+                }, className: styles.SolidDashboardDateRangeFilter, inputClassName: "h-3rem w-full" }), _jsx("div", { className: "px-2", children: _jsx(SolidIcon, { name: "si-calendar", className: "opacity-50", "aria-hidden": true }) })] }));
 };
 export var SelectionDynamicVariableFilterComponent = function (_a) {
     var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.dashboardVariable;
@@ -99,10 +94,8 @@ export var SelectionDynamicVariableFilterComponent = function (_a) {
     useEffect(function () {
         setSelectionDynamicValues([]);
     }, [clearSignal]);
-    return (_jsxs(_Fragment, { children: [isLoading && _jsx(ProgressSpinner, {}), isError && _jsx("div", { children: "Error loading values" }), !isLoading && !isError &&
-                _jsx(AutoComplete, { value: selectionDynamicValues, suggestions: filteredItems, completeMethod: searchDynamic, onChange: function (e) {
-                        console.log('AutoComplete changed values are:');
-                        console.log(e);
+    return (_jsxs(_Fragment, { children: [isLoading && _jsx(SolidSpinner, {}), isError && _jsx("div", { children: "Error loading values" }), !isLoading && !isError &&
+                _jsx(SolidAutocomplete, { value: selectionDynamicValues, suggestions: filteredItems, completeMethod: searchDynamic, onChange: function (e) {
                         setSelectionDynamicValues(e.value);
                     }, multiple: true, dropdown: true, placeholder: dashboardVariable.variableName, className: "solid-standard-autocomplete", style: { minHeight: 38 } })] }));
 };
@@ -150,7 +143,7 @@ export var SelectionStaticVariableFilterComponent = function (_a) {
     useEffect(function () {
         setSelectionStaticValues([]);
     }, [clearSignal]);
-    return (_jsx(AutoComplete, { value: selectionStaticValues, suggestions: filteredStaticItems, completeMethod: searchStatic, onChange: function (e) { return setSelectionStaticValues(e.value); }, multiple: true, dropdown: true, placeholder: dashboardVariable.variableName, className: "solid-standard-autocomplete", style: { minHeight: 38 } }));
+    return (_jsx(SolidAutocomplete, { value: selectionStaticValues, suggestions: filteredStaticItems, completeMethod: searchStatic, onChange: function (e) { return setSelectionStaticValues(e.value); }, multiple: true, dropdown: true, placeholder: dashboardVariable.variableName, className: "solid-standard-autocomplete", style: { minHeight: 38 } }));
 };
 var SolidDashboardVariable = function (_a) {
     var dashboardVariables = _a.dashboardVariables, filters = _a.filters, setFilters = _a.setFilters;
@@ -172,9 +165,7 @@ var SolidDashboardVariable = function (_a) {
         setClearSignal(function (prev) { return prev + 1; }); // triggers children to reset
     };
     // TODO [HP]: Currently this is static, we need this to be dynamic how we are invoking setFilters below has to be fully dynamic...
-    return (_jsxs("div", { className: "flex align-items-center gap-3", children: [dashboardVariableComponents, filters.length > 0 && (_jsx(Button, { onClick: clearAllFilters, size: "small", outlined: true, 
-                // severity="info"
-                icon: "pi pi-filter-slash" }))] }));
+    return (_jsxs("div", { className: "flex align-items-center gap-3", children: [dashboardVariableComponents, filters.length > 0 && (_jsx(SolidButton, { onClick: clearAllFilters, size: "sm", outlined: true, icon: "si si-filter-slash" }))] }));
 };
 export default SolidDashboardVariable;
 //# sourceMappingURL=SolidDashboardVariable.js.map

package/dist/components/core/dashboard/SolidDashboardVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardVariable.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardVariable.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { SqlExpression } from \"../../../types/solid-core\";\nimport { AutoComplete, AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from \"primereact/autocomplete\";\nimport { Calendar } from \"primereact/calendar\";\nimport { Nullable } from \"primereact/ts-helpers\";\nimport React, { Dispatch, SetStateAction, useEffect, useState } from \"react\";\nimport styles from './SolidDashboard.module.css';\nimport { useGetDashboardVariableSelectionDynamicValuesQuery } from \"../../../redux/api/dashboardApi\";\nimport { ProgressSpinner } from \"primereact/progressspinner\";\nimport { DashboardVariableRecord } from \"./SolidDashboard\";\nimport { Button } from \"primereact/button\";\n\n\nexport interface DashboardVariableFilterProps {\n  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;\n  clearSignal: number;\n  dashboardVariable: DashboardVariableRecord;\n}\n\nexport const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the default dates state\n  // If the dashboardVariable has a defaultOperator as Between and a defaultValue as two dates, we can set those as the initial values, otherwise null\n  const defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue\n  const defaultDatesArray = JSON.parse(defaultDatesString || '[]');\n  // Map the defaultDatesArray to Date objects\n  const defaultDates: Nullable<(Date | null)[]> = defaultDatesArray.length === 2 ? [\n    new Date(defaultDatesArray[0]),\n    new Date(defaultDatesArray[1])\n  ] : null;\n  const [dates, setDates] = useState<Nullable<(Date | null)[]>>(defaultDates);\n\n  useEffect(() => {\n    setDates(null);  // reset UI\n  }, [clearSignal]);\n  \n  return (\n    <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>\n      <Calendar value={dates} onChange={(e) => {\n        console.log(`Calendar changed values are: `);\n        console.log(e.value);\n        const newDates = e.value as Date[] | null;\n        setDates(newDates);\n\n        if (newDates && newDates.length === 2 && newDates[0] && newDates[1]) {\n          const filter: SqlExpression = {\n            variableName: dashboardVariable.variableName,\n            // @ts-ignore\n            operator: '$between',\n            value: [\n              newDates[0].toISOString().split('T')[0],\n              newDates[1].toISOString().split('T')[0]\n            ]\n          };\n          setFilters(prev => {\n            // Remove any existing dashboardDate filter and replace with the new one\n            // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');\n            return [filter];\n          });\n        }\n\n      }} selectionMode=\"range\" readOnlyInput hideOnRangeSelection inputStyle={{ height: 36.38 }} className={styles.SolidDashboardDateRangeFilter} />\n      <div className=\"px-2\">\n        <i className=\"pi pi-calendar opacity-50\"></i>\n      </div>\n    </div>\n  )\n}\n\nexport const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the selection dynamic values state\n  // Pick the values from defaultValue if present, for default operator $in\n  const defaultDynamicValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;\n  const defaultDynamicValues = JSON.parse(defaultDynamicValuesString || '[]');\n\n  // Selection Dynamic Values\n  const [selectionDynamicValues, setSelectionDynamicValues] = useState<string[]>(defaultDynamicValues);\n  const [filteredItems, setFilteredItems] = useState<string[]>([]);\n\n  // Using rtk query to fetch dynamic values based on variableId\n  const variableId = dashboardVariable.id;\n  const queryString = `variableId=${variableId}`;\n  const { data: dynamicValues, isLoading, isError } = useGetDashboardVariableSelectionDynamicValuesQuery(queryString);\n\n  const allItems = dynamicValues ? dynamicValues : [];\n\n  // Dynamic search\n  const searchDynamic = (event: AutoCompleteCompleteEvent) => {\n    const query = event.query.toLowerCase();\n    const filtered = allItems.map(item => item.label).filter(item =>\n      item.toLowerCase().includes(query)\n    );\n    setFilteredItems(filtered);\n  };\n\n  // Set the filters whenever selectionDynamicValues change\n  useEffect(() => {\n    console.log(`Selection Dynamic Values changed:`, selectionDynamicValues);\n    if (selectionDynamicValues.length > 0) {\n      const filter: SqlExpression = {\n        variableName: dashboardVariable.variableName,\n        // @ts-ignore\n        operator: '$in',\n        value: selectionDynamicValues\n      };\n      setFilters(prev => {\n        // Remove any existing filter for this variable and replace with the new one\n        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);\n        return [...filtered, filter];\n      });\n    }\n    // else {\n    //   // If no values selected, remove the filter for this variable\n    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));\n    // }\n  }, [selectionDynamicValues]);\n\n  useEffect(() => {\n    setSelectionDynamicValues([]);\n  }, [clearSignal]);\n\n  return (\n    <>\n      {isLoading && <ProgressSpinner></ProgressSpinner>}\n      {isError && <div>Error loading values</div>}\n      {!isLoading && !isError &&\n        <AutoComplete\n          value={selectionDynamicValues}\n          suggestions={filteredItems}\n          completeMethod={searchDynamic}\n          onChange={(e: AutoCompleteChangeEvent) => {\n            console.log('AutoComplete changed values are:');\n            console.log(e);\n            setSelectionDynamicValues(e.value)\n          }}\n          multiple\n          dropdown\n          placeholder={dashboardVariable.variableName}\n          className=\"solid-standard-autocomplete\"\n          style={{ minHeight: 38 }}\n        />\n      }\n    </>\n  );\n}\n\nexport const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the selection static values state\n  // Pick the values from defaultValue if present, for default operator $in\n  const defaultStaticValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;\n  const defaultStaticValues = JSON.parse(defaultStaticValuesString || '[]');\n\n  // Selection Static Values\n  const [selectionStaticValues, setSelectionStaticValues] = useState<string[]>(defaultStaticValues);\n  const [filteredStaticItems, setFilteredStaticItems] = useState<string[]>([]);\n  const staticValues = JSON.parse(dashboardVariable.selectionStaticValues || '[]') || [];\n\n  // The values are in the format val:label, we need to extract the labels\n  const staticValueItems = staticValues.map((val: any) => ({ value: val.split(':')[0], label: val.split(':')[1] }));\n\n  // Static search\n  const searchStatic = (event: AutoCompleteCompleteEvent) => {\n    const query = event.query.toLowerCase();\n    const filtered = staticValueItems.map(\n      (item: { label: any; }) => item.label\n    ).filter((item: string) =>\n      item.toLowerCase().includes(query)\n    );\n    setFilteredStaticItems(filtered);\n  };\n\n  // Set the filters whenever selectionStaticValues change\n  useEffect(() => {\n    // console.log(`Selection Static Values changed:`, selectionStaticValues);\n    if (selectionStaticValues.length > 0) {\n      const filter: SqlExpression = {\n        variableName: dashboardVariable.variableName,\n        // @ts-ignore\n        operator: '$in',\n        value: selectionStaticValues\n      };\n      setFilters(prev => {\n        // Remove any existing filter for this variable and replace with the new one\n        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);\n        return [...filtered, filter];\n      });\n    }\n    // else {\n    //   // If no values selected, remove the filter for this variable\n    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));\n    // }\n  }, [selectionStaticValues]);\n\n  useEffect(() => {\n    setSelectionStaticValues([]);\n  }, [clearSignal]);\n\n  return (\n    <AutoComplete\n      value={selectionStaticValues}\n      suggestions={filteredStaticItems}\n      completeMethod={searchStatic}\n      onChange={(e: AutoCompleteChangeEvent) => setSelectionStaticValues(e.value)}\n      multiple\n      dropdown\n      placeholder={dashboardVariable.variableName}\n      className=\"solid-standard-autocomplete\"\n      style={{ minHeight: 38 }}\n    />\n  );\n}\n\nexport interface SolidDashboardVariableProps {\n  dashboardVariables: any;\n  filters: SqlExpression[];\n  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;\n}\n\nconst SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboardVariables, filters, setFilters }) => {\n  const [clearSignal, setClearSignal] = useState(0);\n  const dashboardVariableComponents = dashboardVariables.map((dashboardVariable: any, index: number) => {\n    switch (dashboardVariable.variableType) {\n      case 'date':\n        return <DateVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      case 'selectionStatic':\n        return <SelectionStaticVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      case 'selectionDynamic':\n        return <SelectionDynamicVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      default:\n        return null;\n    }\n  });\n\n  const clearAllFilters = () => {\n    setFilters([]);\n    setClearSignal(prev => prev + 1);  // triggers children to reset\n  };\n\n  // TODO [HP]: Currently this is static, we need this to be dynamic how we are invoking setFilters below has to be fully dynamic...\n  return (\n    <div className=\"flex align-items-center gap-3\">\n      {dashboardVariableComponents}\n      {filters.length > 0 && (\n        <Button\n          onClick={clearAllFilters}\n          size=\"small\"\n          outlined\n          // severity=\"info\"\n          icon=\"pi pi-filter-slash\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport default SolidDashboardVariable;\n\n"]}
+{"version":3,"file":"SolidDashboardVariable.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardVariable.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { SqlExpression } from \"../../../types/solid-core\";\nimport React, { Dispatch, SetStateAction, useEffect, useState } from \"react\";\nimport styles from './SolidDashboard.module.css';\nimport { useGetDashboardVariableSelectionDynamicValuesQuery } from \"../../../redux/api/dashboardApi\";\nimport { DashboardVariableRecord } from \"./SolidDashboard\";\nimport { SolidAutocomplete, SolidButton, SolidDatePicker, SolidIcon, SolidSpinner } from \"../../shad-cn-ui\";\n\ntype Nullable<T> = T | null;\ntype AutoCompleteChangeEvent = { value: any };\ntype AutoCompleteCompleteEvent = { query: string };\n\n\nexport interface DashboardVariableFilterProps {\n  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;\n  clearSignal: number;\n  dashboardVariable: DashboardVariableRecord;\n}\n\ntype DateRange = [Date | null, Date | null] | null;\n\nexport const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the default dates state\n  // If the dashboardVariable has a defaultOperator as Between and a defaultValue as two dates, we can set those as the initial values, otherwise null\n  const defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue\n  const defaultDatesArray = JSON.parse(defaultDatesString || '[]');\n  // Map the defaultDatesArray to Date objects\n  const defaultDates: DateRange = defaultDatesArray.length === 2 ? [\n    new Date(defaultDatesArray[0]),\n    new Date(defaultDatesArray[1])\n  ] : null;\n  const [dates, setDates] = useState<DateRange>(defaultDates);\n\n  useEffect(() => {\n    setDates(null);  // reset UI\n  }, [clearSignal]);\n  \n  return (\n    <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>\n      <SolidDatePicker\n        selectsRange\n        startDate={dates ? dates[0] : null}\n        endDate={dates ? dates[1] : null}\n        onChange={(next: [Date | null, Date | null] | null) => {\n          const newDates = next;\n          setDates(newDates);\n\n          if (newDates && newDates[0] && newDates[1]) {\n            const filter: SqlExpression = {\n              variableName: dashboardVariable.variableName,\n              // @ts-ignore\n              operator: '$between',\n              value: [\n              newDates[0].toISOString().split('T')[0],\n              newDates[1].toISOString().split('T')[0]\n            ]\n            };\n            setFilters(prev => {\n              // Remove any existing dashboardDate filter and replace with the new one\n              // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');\n              return [filter];\n            });\n          }\n\n        }}\n        className={styles.SolidDashboardDateRangeFilter}\n        inputClassName=\"h-3rem w-full\"\n      />\n      <div className=\"px-2\">\n        <SolidIcon name=\"si-calendar\" className=\"opacity-50\" aria-hidden />\n      </div>\n    </div>\n  )\n}\n\nexport const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the selection dynamic values state\n  // Pick the values from defaultValue if present, for default operator $in\n  const defaultDynamicValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;\n  const defaultDynamicValues = JSON.parse(defaultDynamicValuesString || '[]');\n\n  // Selection Dynamic Values\n  const [selectionDynamicValues, setSelectionDynamicValues] = useState<string[]>(defaultDynamicValues);\n  const [filteredItems, setFilteredItems] = useState<string[]>([]);\n\n  // Using rtk query to fetch dynamic values based on variableId\n  const variableId = dashboardVariable.id;\n  const queryString = `variableId=${variableId}`;\n  const { data: dynamicValues, isLoading, isError } = useGetDashboardVariableSelectionDynamicValuesQuery(queryString);\n\n  const allItems = dynamicValues ? dynamicValues : [];\n\n  // Dynamic search\n  const searchDynamic = (event: AutoCompleteCompleteEvent) => {\n    const query = event.query.toLowerCase();\n    const filtered = allItems.map(item => item.label).filter(item =>\n      item.toLowerCase().includes(query)\n    );\n    setFilteredItems(filtered);\n  };\n\n  // Set the filters whenever selectionDynamicValues change\n  useEffect(() => {\n    console.log(`Selection Dynamic Values changed:`, selectionDynamicValues);\n    if (selectionDynamicValues.length > 0) {\n      const filter: SqlExpression = {\n        variableName: dashboardVariable.variableName,\n        // @ts-ignore\n        operator: '$in',\n        value: selectionDynamicValues\n      };\n      setFilters(prev => {\n        // Remove any existing filter for this variable and replace with the new one\n        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);\n        return [...filtered, filter];\n      });\n    }\n    // else {\n    //   // If no values selected, remove the filter for this variable\n    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));\n    // }\n  }, [selectionDynamicValues]);\n\n  useEffect(() => {\n    setSelectionDynamicValues([]);\n  }, [clearSignal]);\n\n  return (\n    <>\n      {isLoading && <SolidSpinner />}\n      {isError && <div>Error loading values</div>}\n      {!isLoading && !isError &&\n        <SolidAutocomplete\n          value={selectionDynamicValues}\n          suggestions={filteredItems}\n          completeMethod={searchDynamic}\n          onChange={(e: AutoCompleteChangeEvent) => {\n            setSelectionDynamicValues(e.value)\n          }}\n          multiple\n          dropdown\n          placeholder={dashboardVariable.variableName}\n          className=\"solid-standard-autocomplete\"\n          style={{ minHeight: 38 }}\n        />\n      }\n    </>\n  );\n}\n\nexport const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the selection static values state\n  // Pick the values from defaultValue if present, for default operator $in\n  const defaultStaticValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;\n  const defaultStaticValues = JSON.parse(defaultStaticValuesString || '[]');\n\n  // Selection Static Values\n  const [selectionStaticValues, setSelectionStaticValues] = useState<string[]>(defaultStaticValues);\n  const [filteredStaticItems, setFilteredStaticItems] = useState<string[]>([]);\n  const staticValues = JSON.parse(dashboardVariable.selectionStaticValues || '[]') || [];\n\n  // The values are in the format val:label, we need to extract the labels\n  const staticValueItems = staticValues.map((val: any) => ({ value: val.split(':')[0], label: val.split(':')[1] }));\n\n  // Static search\n  const searchStatic = (event: AutoCompleteCompleteEvent) => {\n    const query = event.query.toLowerCase();\n    const filtered = staticValueItems.map(\n      (item: { label: any; }) => item.label\n    ).filter((item: string) =>\n      item.toLowerCase().includes(query)\n    );\n    setFilteredStaticItems(filtered);\n  };\n\n  // Set the filters whenever selectionStaticValues change\n  useEffect(() => {\n    // console.log(`Selection Static Values changed:`, selectionStaticValues);\n    if (selectionStaticValues.length > 0) {\n      const filter: SqlExpression = {\n        variableName: dashboardVariable.variableName,\n        // @ts-ignore\n        operator: '$in',\n        value: selectionStaticValues\n      };\n      setFilters(prev => {\n        // Remove any existing filter for this variable and replace with the new one\n        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);\n        return [...filtered, filter];\n      });\n    }\n    // else {\n    //   // If no values selected, remove the filter for this variable\n    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));\n    // }\n  }, [selectionStaticValues]);\n\n  useEffect(() => {\n    setSelectionStaticValues([]);\n  }, [clearSignal]);\n\n  return (\n    <SolidAutocomplete\n      value={selectionStaticValues}\n      suggestions={filteredStaticItems}\n      completeMethod={searchStatic}\n      onChange={(e: AutoCompleteChangeEvent) => setSelectionStaticValues(e.value)}\n      multiple\n      dropdown\n      placeholder={dashboardVariable.variableName}\n      className=\"solid-standard-autocomplete\"\n      style={{ minHeight: 38 }}\n    />\n  );\n}\n\nexport interface SolidDashboardVariableProps {\n  dashboardVariables: any;\n  filters: SqlExpression[];\n  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;\n}\n\nconst SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboardVariables, filters, setFilters }) => {\n  const [clearSignal, setClearSignal] = useState(0);\n  const dashboardVariableComponents = dashboardVariables.map((dashboardVariable: any, index: number) => {\n    switch (dashboardVariable.variableType) {\n      case 'date':\n        return <DateVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      case 'selectionStatic':\n        return <SelectionStaticVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      case 'selectionDynamic':\n        return <SelectionDynamicVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      default:\n        return null;\n    }\n  });\n\n  const clearAllFilters = () => {\n    setFilters([]);\n    setClearSignal(prev => prev + 1);  // triggers children to reset\n  };\n\n  // TODO [HP]: Currently this is static, we need this to be dynamic how we are invoking setFilters below has to be fully dynamic...\n  return (\n    <div className=\"flex align-items-center gap-3\">\n      {dashboardVariableComponents}\n      {filters.length > 0 && (\n        <SolidButton\n          onClick={clearAllFilters}\n          size=\"sm\"\n          outlined\n          icon=\"si si-filter-slash\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport default SolidDashboardVariable;\n"]}