@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

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"]}

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

@@ -1,14 +1,14 @@
 
 import { SqlExpression } from "../../../types/solid-core";
-import { AutoComplete, AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Calendar } from "primereact/calendar";
-import { Nullable } from "primereact/ts-helpers";
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import styles from './SolidDashboard.module.css';
 import { useGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
-import { ProgressSpinner } from "primereact/progressspinner";
 import { DashboardVariableRecord } from "./SolidDashboard";
-import { Button } from "primereact/button";
+import { SolidAutocomplete, SolidButton, SolidDatePicker, SolidIcon, SolidSpinner } from "../../shad-cn-ui";
+
+type Nullable<T> = T | null;
+type AutoCompleteChangeEvent = { value: any };
+type AutoCompleteCompleteEvent = { query: string };
 
 
 export interface DashboardVariableFilterProps {
@@ -17,17 +17,19 @@ export interface DashboardVariableFilterProps {
   dashboardVariable: DashboardVariableRecord;
 }
 
+type DateRange = [Date | null, Date | null] | null;
+
 export const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
   // Initialize the default dates state
   // If the dashboardVariable has a defaultOperator as Between and a defaultValue as two dates, we can set those as the initial values, otherwise null
   const defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue
   const defaultDatesArray = JSON.parse(defaultDatesString || '[]');
   // Map the defaultDatesArray to Date objects
-  const defaultDates: Nullable<(Date | null)[]> = defaultDatesArray.length === 2 ? [
+  const defaultDates: DateRange = defaultDatesArray.length === 2 ? [
     new Date(defaultDatesArray[0]),
     new Date(defaultDatesArray[1])
   ] : null;
-  const [dates, setDates] = useState<Nullable<(Date | null)[]>>(defaultDates);
+  const [dates, setDates] = useState<DateRange>(defaultDates);
 
   useEffect(() => {
     setDates(null);  // reset UI
@@ -35,32 +37,37 @@ export const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps>
   
   return (
     <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>
-      <Calendar value={dates} onChange={(e) => {
-        console.log(`Calendar changed values are: `);
-        console.log(e.value);
-        const newDates = e.value as Date[] | null;
-        setDates(newDates);
+      <SolidDatePicker
+        selectsRange
+        startDate={dates ? dates[0] : null}
+        endDate={dates ? dates[1] : null}
+        onChange={(next: [Date | null, Date | null] | null) => {
+          const newDates = next;
+          setDates(newDates);
 
-        if (newDates && newDates.length === 2 && newDates[0] && newDates[1]) {
-          const filter: SqlExpression = {
-            variableName: dashboardVariable.variableName,
-            // @ts-ignore
-            operator: '$between',
-            value: [
+          if (newDates && newDates[0] && newDates[1]) {
+            const filter: SqlExpression = {
+              variableName: dashboardVariable.variableName,
+              // @ts-ignore
+              operator: '$between',
+              value: [
               newDates[0].toISOString().split('T')[0],
               newDates[1].toISOString().split('T')[0]
             ]
-          };
-          setFilters(prev => {
-            // Remove any existing dashboardDate filter and replace with the new one
-            // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
-            return [filter];
-          });
-        }
+            };
+            setFilters(prev => {
+              // Remove any existing dashboardDate filter and replace with the new one
+              // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
+              return [filter];
+            });
+          }
 
-      }} selectionMode="range" readOnlyInput hideOnRangeSelection inputStyle={{ height: 36.38 }} className={styles.SolidDashboardDateRangeFilter} />
+        }}
+        className={styles.SolidDashboardDateRangeFilter}
+        inputClassName="h-3rem w-full"
+      />
       <div className="px-2">
-        <i className="pi pi-calendar opacity-50"></i>
+        <SolidIcon name="si-calendar" className="opacity-50" aria-hidden />
       </div>
     </div>
   )
@@ -120,16 +127,14 @@ export const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariable
 
   return (
     <>
-      {isLoading && <ProgressSpinner></ProgressSpinner>}
+      {isLoading && <SolidSpinner />}
       {isError && <div>Error loading values</div>}
       {!isLoading && !isError &&
-        <AutoComplete
+        <SolidAutocomplete
           value={selectionDynamicValues}
           suggestions={filteredItems}
           completeMethod={searchDynamic}
           onChange={(e: AutoCompleteChangeEvent) => {
-            console.log('AutoComplete changed values are:');
-            console.log(e);
             setSelectionDynamicValues(e.value)
           }}
           multiple
@@ -195,7 +200,7 @@ export const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableF
   }, [clearSignal]);
 
   return (
-    <AutoComplete
+    <SolidAutocomplete
       value={selectionStaticValues}
       suggestions={filteredStaticItems}
       completeMethod={searchStatic}
@@ -240,12 +245,11 @@ const SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboa
     <div className="flex align-items-center gap-3">
       {dashboardVariableComponents}
       {filters.length > 0 && (
-        <Button
+        <SolidButton
           onClick={clearAllFilters}
-          size="small"
+          size="sm"
           outlined
-          // severity="info"
-          icon="pi pi-filter-slash"
+          icon="si si-filter-slash"
         />
       )}
     </div>
@@ -253,4 +257,3 @@ const SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboa
 }
 
 export default SolidDashboardVariable;
-

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

@@ -1 +1 @@
-{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAS1D,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,qBAAqB,qCAAmD,0BAA0B,4CAwD9G,CAAA"}
+{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAO1D,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,qBAAqB,qCAAmD,0BAA0B,4CA4E9G,CAAA"}

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

@@ -1,21 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
-import { Message } from 'primereact/message';
-import { MeterGroup } from 'primereact/metergroup';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import { SolidMessage, SolidSpinner } from '../../shad-cn-ui';
 import qs from 'qs';
 import { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';
 import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
 import styles from './SolidDashboard.module.css';
 export var SolidQuestionRenderer = function (_a) {
-    var _b, _c, _d, _e;
-    var question = _a.question, _f = _a.filters, filters = _f === void 0 ? [] : _f, _g = _a.isPreview, isPreview = _g === void 0 ? false : _g;
+    var _b;
+    var question = _a.question, _c = _a.filters, filters = _c === void 0 ? [] : _c, _d = _a.isPreview, isPreview = _d === void 0 ? false : _d;
     if (!question) {
-        return (_jsx("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), children: _jsx(Message, { text: "Preview Unavailable" }) }));
+        return (_jsx("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), children: _jsx(SolidMessage, { text: "Preview Unavailable" }) }));
     }
     var textAlign = (_b = question === null || question === void 0 ? void 0 : question.textAlign) !== null && _b !== void 0 ? _b : 'start';
     if (!question) {
-        return (_jsx(_Fragment, { children: _jsx(Message, { text: "Preview Unavailable" }) }));
+        return (_jsx(SolidMessage, { text: "Preview Unavailable" }));
     }
     // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);
     // load the question data.
@@ -23,7 +21,7 @@ export var SolidQuestionRenderer = function (_a) {
         isPreview: isPreview,
         filters: filters,
     });
-    var _h = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams }), questionData = _h.data, questionDataIsLoading = _h.isLoading, questionDataError = _h.error;
+    var _e = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams }), questionData = _e.data, questionDataIsLoading = _e.isLoading, questionDataError = _e.error;
     // console.log(`Question data: `); console.log(questionData);
     // console.log(`Question data is loading: `); console.log(questionDataIsLoading);
     // console.log(`Question data error: `); console.log(questionDataError);
@@ -31,7 +29,14 @@ export var SolidQuestionRenderer = function (_a) {
     // const kpi = questionData.data.kpi;
     // const visualizationData = questionData.data.visualizationData;
     // const visualizedAs = question.data.visualisedAs;
-    return (_jsxs(_Fragment, { children: [questionDataIsLoading && _jsx(ProgressSpinner, {}), !questionDataIsLoading &&
-                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " h-full"), children: [_jsxs("div", { className: 'flex flex-col p-4 pb-3', style: { borderBottom: "1px solid #e4e3e3" }, children: [_jsx("div", { className: "font-medium text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: question.name }), _jsx("div", { className: "mt-2 font-bold text-3xl text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: questionData.data.kpi })] }), _jsxs("div", { className: 'mt-3 flex-1 min-h-0 p-4 pt-2', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && _jsx(MeterGroup, { values: questionData.data.visualizationData.dataset, max: (_e = (_d = (_c = questionData === null || questionData === void 0 ? void 0 : questionData.data) === null || _c === void 0 ? void 0 : _c.visualizationData) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.reduce(function (total, item) { return total + item.value; }, 0) }), question.visualisedAs === 'prime-datatable' && _jsx(PrimeReactDatatableRenderer, { options: options, visualizationData: questionData.data.visualizationData })] })] })] }));
+    return (_jsxs(_Fragment, { children: [questionDataIsLoading && _jsx(SolidSpinner, {}), !questionDataIsLoading &&
+                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " h-full"), children: [_jsxs("div", { className: 'flex flex-col p-4 pb-3', style: { borderBottom: "1px solid #e4e3e3" }, children: [_jsx("div", { className: "font-medium text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: question.name }), _jsx("div", { className: "mt-2 font-bold text-3xl text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: questionData.data.kpi })] }), _jsxs("div", { className: 'mt-3 flex-1 min-h-0 p-4 pt-2', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && (function () {
+                                    var dataset = questionData.data.visualizationData.dataset;
+                                    var total = dataset.reduce(function (sum, it) { return sum + it.value; }, 0) || 1;
+                                    return (_jsx("div", { className: "solid-meter-group", children: dataset.map(function (item, idx) {
+                                            var percentage = Math.round((item.value / total) * 100);
+                                            return (_jsxs("div", { className: "solid-meter-group-row", children: [_jsx("span", { className: "solid-meter-group-label", children: item.label }), _jsx("div", { className: "solid-meter-group-bar", children: _jsx("div", { className: "solid-meter-group-bar-fill", style: { width: "".concat(percentage, "%"), backgroundColor: item.color || 'var(--solid-surface-accent)' } }) }), _jsxs("span", { className: "solid-meter-group-value", children: [percentage, "%"] })] }, "".concat(item.label, "-").concat(idx)));
+                                        }) }));
+                                })(), question.visualisedAs === 'prime-datatable' && _jsx(PrimeReactDatatableRenderer, { options: options, visualizationData: questionData.data.visualizationData })] })] })] }));
 };
 //# sourceMappingURL=SolidQuestionRenderer.js.map