@solidxai/core-ui 0.0.1

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

@@ -0,0 +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"}

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

@@ -0,0 +1,55 @@
+"use client'"
+import { Skeleton } from 'primereact/skeleton'
+
+export const SolidDashboardLoading = () => {
+    return (
+        <div className="grid p-4">
+
+            {/* 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" />
+                </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" />
+                </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" />
+                </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" />
+                </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" />
+                </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" />
+                </div>
+            </div>
+
+        </div>
+    )
+}

package/dist/components/core/dashboard/SolidDashboardNotAvailable.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboardNotAvailable.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardNotAvailable.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,0BAA0B,+CA2B/B,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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." })] })] }) }));
+};
+export default SolidDashboardNotAvailable;
+//# sourceMappingURL=SolidDashboardNotAvailable.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,32 @@
+
+
+const SolidDashboardNotAvailable = () => {
+  return (
+    <div className="flex align-items-center justify-content-center" style={{ minHeight: '400px', padding: '2rem' }}>
+      <div className="flex flex-column align-items-center gap-3 text-center" style={{ maxWidth: '500px' }}>
+        <div 
+          className="flex align-items-center justify-content-center border-circle"
+          style={{
+            width: '80px',
+            height: '80px',
+            backgroundColor: 'var(--blue-50)',
+            color: 'var(--blue-500)'
+          }}
+        >
+          <i className="pi pi-chart-bar" style={{ fontSize: '2.5rem' }}></i>
+        </div>
+        
+        <div className="flex flex-column gap-2">
+          <h3 className="m-0" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>
+            Dashboard Not Available
+          </h3>
+          <p className="m-0" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>
+            This dashboard has not been configured yet or does not exist. Please check the dashboard settings or contact your administrator.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SolidDashboardNotAvailable;

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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." })] })] }) }));
+};
+//# sourceMappingURL=SolidDashboardRenderError.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,29 @@
+
+
+export const SolidDashboardRenderError = () => {
+  return (
+    <div className="flex align-items-center justify-content-center" style={{ minHeight: '400px', padding: '2rem' }}>
+      <div className="flex flex-column align-items-center gap-3 text-center" style={{ maxWidth: '500px' }}>
+        <div
+          className="flex align-items-center justify-content-center border-circle"
+          style={{
+            width: '80px',
+            height: '80px',
+            backgroundColor: 'var(--red-50)',
+            color: 'var(--red-500)'
+          }}
+        >
+          <i className="pi pi-exclamation-triangle"
+             style={{ fontSize: '2.5rem' }} />
+        </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>
+
+          <p className="m-0" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>
+            Failed to load dashboard. Please try again.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { SqlExpression } from "../../../types/solid-core";
+import React, { Dispatch, SetStateAction } from "react";
+import { DashboardVariableRecord } from "./SolidDashboard";
+export interface DashboardVariableFilterProps {
+    setFilters: Dispatch<SetStateAction<SqlExpression[]>>;
+    clearSignal: number;
+    dashboardVariable: DashboardVariableRecord;
+}
+export declare const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps>;
+export declare const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariableFilterProps>;
+export declare const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableFilterProps>;
+export interface SolidDashboardVariableProps {
+    dashboardVariables: any;
+    filters: SqlExpression[];
+    setFilters: Dispatch<SetStateAction<SqlExpression[]>>;
+}
+declare const SolidDashboardVariable: React.FC<SolidDashboardVariableProps>;
+export default SolidDashboardVariable;
+//# sourceMappingURL=SolidDashboardVariable.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,180 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    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";
+export var DateVariableFilterComponent = function (_a) {
+    var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.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
+    var defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue;
+    var defaultDatesArray = JSON.parse(defaultDatesString || '[]');
+    // Map the defaultDatesArray to Date objects
+    var defaultDates = defaultDatesArray.length === 2 ? [
+        new Date(defaultDatesArray[0]),
+        new Date(defaultDatesArray[1])
+    ] : null;
+    var _b = useState(defaultDates), dates = _b[0], setDates = _b[1];
+    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;
+                    setDates(newDates);
+                    if (newDates && newDates.length === 2 && newDates[0] && newDates[1]) {
+                        var filter_1 = {
+                            variableName: dashboardVariable.variableName,
+                            // @ts-ignore
+                            operator: '$between',
+                            value: [
+                                newDates[0].toISOString().split('T')[0],
+                                newDates[1].toISOString().split('T')[0]
+                            ]
+                        };
+                        setFilters(function (prev) {
+                            // Remove any existing dashboardDate filter and replace with the new one
+                            // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
+                            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" }) })] }));
+};
+export var SelectionDynamicVariableFilterComponent = function (_a) {
+    var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.dashboardVariable;
+    // Initialize the selection dynamic values state
+    // Pick the values from defaultValue if present, for default operator $in
+    var defaultDynamicValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+    var defaultDynamicValues = JSON.parse(defaultDynamicValuesString || '[]');
+    // Selection Dynamic Values
+    var _b = useState(defaultDynamicValues), selectionDynamicValues = _b[0], setSelectionDynamicValues = _b[1];
+    var _c = useState([]), filteredItems = _c[0], setFilteredItems = _c[1];
+    // Using rtk query to fetch dynamic values based on variableId
+    var variableId = dashboardVariable.id;
+    var queryString = "variableId=".concat(variableId);
+    var _d = useGetDashboardVariableSelectionDynamicValuesQuery(queryString), dynamicValues = _d.data, isLoading = _d.isLoading, isError = _d.isError;
+    var allItems = dynamicValues ? dynamicValues : [];
+    // Dynamic search
+    var searchDynamic = function (event) {
+        var query = event.query.toLowerCase();
+        var filtered = allItems.map(function (item) { return item.label; }).filter(function (item) {
+            return item.toLowerCase().includes(query);
+        });
+        setFilteredItems(filtered);
+    };
+    // Set the filters whenever selectionDynamicValues change
+    useEffect(function () {
+        console.log("Selection Dynamic Values changed:", selectionDynamicValues);
+        if (selectionDynamicValues.length > 0) {
+            var filter_2 = {
+                variableName: dashboardVariable.variableName,
+                // @ts-ignore
+                operator: '$in',
+                value: selectionDynamicValues
+            };
+            setFilters(function (prev) {
+                // Remove any existing filter for this variable and replace with the new one
+                var filtered = prev.filter(function (f) { return f.variableName !== dashboardVariable.variableName; });
+                return __spreadArray(__spreadArray([], filtered, true), [filter_2], false);
+            });
+        }
+        // else {
+        //   // If no values selected, remove the filter for this variable
+        //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+        // }
+    }, [selectionDynamicValues]);
+    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);
+                        setSelectionDynamicValues(e.value);
+                    }, multiple: true, dropdown: true, placeholder: dashboardVariable.variableName, className: "solid-standard-autocomplete", style: { minHeight: 38 } })] }));
+};
+export var SelectionStaticVariableFilterComponent = function (_a) {
+    var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.dashboardVariable;
+    // Initialize the selection static values state
+    // Pick the values from defaultValue if present, for default operator $in
+    var defaultStaticValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+    var defaultStaticValues = JSON.parse(defaultStaticValuesString || '[]');
+    // Selection Static Values
+    var _b = useState(defaultStaticValues), selectionStaticValues = _b[0], setSelectionStaticValues = _b[1];
+    var _c = useState([]), filteredStaticItems = _c[0], setFilteredStaticItems = _c[1];
+    var staticValues = dashboardVariable.selectionStaticValues || [];
+    // The values are in the format val:label, we need to extract the labels
+    var staticValueItems = staticValues.map(function (val) { return ({ value: val.split(':')[0], label: val.split(':')[1] }); });
+    // Static search
+    var searchStatic = function (event) {
+        var query = event.query.toLowerCase();
+        var filtered = staticValueItems.map(function (item) { return item.label; }).filter(function (item) {
+            return item.toLowerCase().includes(query);
+        });
+        setFilteredStaticItems(filtered);
+    };
+    // Set the filters whenever selectionStaticValues change
+    useEffect(function () {
+        // console.log(`Selection Static Values changed:`, selectionStaticValues);
+        if (selectionStaticValues.length > 0) {
+            var filter_3 = {
+                variableName: dashboardVariable.variableName,
+                // @ts-ignore
+                operator: '$in',
+                value: selectionStaticValues
+            };
+            setFilters(function (prev) {
+                // Remove any existing filter for this variable and replace with the new one
+                var filtered = prev.filter(function (f) { return f.variableName !== dashboardVariable.variableName; });
+                return __spreadArray(__spreadArray([], filtered, true), [filter_3], false);
+            });
+        }
+        // else {
+        //   // If no values selected, remove the filter for this variable
+        //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+        // }
+    }, [selectionStaticValues]);
+    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 } }));
+};
+var SolidDashboardVariable = function (_a) {
+    var dashboardVariables = _a.dashboardVariables, filters = _a.filters, setFilters = _a.setFilters;
+    var _b = useState(0), clearSignal = _b[0], setClearSignal = _b[1];
+    var dashboardVariableComponents = dashboardVariables.map(function (dashboardVariable, index) {
+        switch (dashboardVariable.variableType) {
+            case 'date':
+                return _jsx(DateVariableFilterComponent, { setFilters: setFilters, clearSignal: clearSignal, dashboardVariable: dashboardVariable }, index);
+            case 'selectionStatic':
+                return _jsx(SelectionStaticVariableFilterComponent, { setFilters: setFilters, clearSignal: clearSignal, dashboardVariable: dashboardVariable }, index);
+            case 'selectionDynamic':
+                return _jsx(SelectionDynamicVariableFilterComponent, { setFilters: setFilters, clearSignal: clearSignal, dashboardVariable: dashboardVariable }, index);
+            default:
+                return null;
+        }
+    });
+    var clearAllFilters = function () {
+        setFilters([]);
+        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" }))] }));
+};
+export default SolidDashboardVariable;
+//# sourceMappingURL=SolidDashboardVariable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboardVariable.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardVariable.tsx"],"names":[],"mappings":"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"}