@solidxai/core-ui 0.1.13-beta.2 → 0.1.13-beta.4

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

@@ -0,0 +1,168 @@
+
+import 'gridstack/dist/gridstack.min.css';
+import { GridStackOptions, GridStackWidget } from 'gridstack';
+import styles from './SolidDashboard.module.css'
+import { SolidQuestionRenderer } from './SolidQuestionRenderer';
+import { SqlExpression } from '../../../types/solid-core';
+import ReactGridLayout, { useContainerWidth, Layout, LayoutItem } from "react-grid-layout";
+import { useEffect, useRef, useState } from 'react';
+import PrimeDataTableWrapper from './PrimeDataTableWrapper';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import { useLazyGetUserDashboardLayoutByDashboardIdQuery } from '../../../redux/api/dashboardLayoutApi';
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { useDispatch } from 'react-redux';
+import { showToast } from '../../../redux/features/toastSlice';
+
+export interface SolidDashboardBodyProps {
+  dashboardOptions?: GridStackOptions;
+  widgetOptions?: GridStackWidget[];
+  // Replace `any` with a proper `Question` type when available
+  dashboardId: string;
+  questions: any[];
+  filters: SqlExpression[];
+  dashboardLayout: GridItem[];
+  setDashboardLayout: (dashboardLayout: GridItem[]) => void;
+}
+
+export type GridItem = {
+  i: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
+
+// Layout is Layout[] at runtime in v2 — the type definition is misleading
+type LayoutArray = LayoutItem[];
+
+
+const generateDefaultLayout = (questions: any[]): GridItem[] => {
+  return questions.map((q, index) => {
+    const col = index % 3;
+    const row = Math.floor(index / 3);
+    return {
+      i: String(q.name),
+      x: col * 4,   // 0, 4, 8 in a 12-col grid
+      y: row * 4,
+      w: 4,
+      h: 4,
+    };
+  });
+};
+
+
+const SolidDashboardBody = ({ dashboardId, questions, filters = [], dashboardLayout, setDashboardLayout }: SolidDashboardBodyProps) => {
+  const dispatch = useDispatch();
+
+  const sortedQuestions = [...questions]
+    .map((q, index) => ({ ...q, defaultIndex: index + 1 }))
+    .sort((a, b) => (a.sequenceNumber ?? a.defaultIndex) - (b.sequenceNumber ?? b.defaultIndex));
+
+  const { width, containerRef, mounted } = useContainerWidth();
+  const isLayoutReady = useRef(false);
+
+  const [fetchUserLayout, { data: userLayoutData, isSuccess, isLoading }] =
+    useLazyGetUserDashboardLayoutByDashboardIdQuery();
+
+  useEffect(() => {
+    if (!dashboardId || questions.length === 0) return;
+    const loadLayout = async () => {
+      try {
+        const response = await fetchUserLayout(dashboardId).unwrap();
+        const raw = response?.data?.layout;
+        const savedLayout = typeof raw === 'string' ? JSON.parse(raw) : raw;
+
+        const layout = savedLayout
+          ? sortedQuestions.map((q) => {
+            const saved = (savedLayout as GridItem[]).find(s => s.i === String(q.name));
+            return saved ?? generateDefaultLayout([q])[0];
+          })
+          : generateDefaultLayout(sortedQuestions);
+
+        setDashboardLayout(layout);
+        setTimeout(() => { isLayoutReady.current = true; }, 100);
+      } catch (error: any) {
+        if (error.status === 403) {
+          dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FORBIDDEN_ERROR, detail: ERROR_MESSAGES.FORBIDDEN_ERROR, sticky: true }));
+        } else {
+          dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.SOMETHING_WRONG, detail: ERROR_MESSAGES.SOMETHING_WRONG }));
+        }
+      }
+    };
+
+    loadLayout();
+  }, [questions, dashboardId]);
+
+
+  // useEffect(() => {
+  //   if (questions.length === 0) return;
+  //   const saved = getSavedLayout();
+  //   setDashboardLayout(generateLayout(sortedQuestions, saved));
+  //   // Delay the ready flag so onLayoutChange doesn't fire before we're set
+  //   setTimeout(() => { isLayoutReady.current = true; }, 100);
+  // }, [questions]);
+
+
+  const handleLayoutChange = (newLayout: Layout) => {
+    if (!isLayoutReady.current) return;
+
+    // v2 passes LayoutItem[] at runtime despite the type saying Layout
+    const layoutArray = newLayout as unknown as LayoutItem[];
+
+    const updated: GridItem[] = layoutArray.map(item => ({
+      i: item.i,
+      x: item.x,
+      y: item.y,
+      w: item.w,
+      h: item.h,
+    }));
+
+    setDashboardLayout(updated);
+    // saving is handled by the parent/caller
+  };
+
+  return (
+    <>
+      <div
+        ref={containerRef as React.RefObject<HTMLDivElement>}
+        className={`p-4 ${styles.SolidDashboardContentWrapper}`}
+        style={{ width: '100%', overflowY: 'auto', minHeight: 0 }}
+
+      >
+        {mounted && dashboardLayout.length > 0 && (
+          <ReactGridLayout
+            width={width}
+            layout={dashboardLayout}
+            gridConfig={{
+              cols: 12,
+              rowHeight: 120,
+            }}
+            dragConfig={{
+              handle: ".drag-handle",
+            }}
+            resizeConfig={{
+              enabled: true,
+            }}
+            onLayoutChange={handleLayoutChange}
+          >
+            {sortedQuestions.map((question: any) => (
+              <div key={String(question.name)} className="drag-handle cursor-move rounded shadow p-2 overflow-hidden" style={{ backgroundColor: 'transparent' }}>
+                {/* <div className=" mb-2 font-bold">
+                {question.name}
+              </div> */}
+                {question.visualisedAs === "prime-datatable" ? (
+                  <PrimeDataTableWrapper question={question} filters={filters} />
+                ) : (
+                  <SolidQuestionRenderer question={question} filters={filters} isPreview={false} />
+                )}
+              </div>
+            ))}
+          </ReactGridLayout>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default SolidDashboardBody;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboardFilterRequired.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardFilterRequired.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,4BAA4B,+CA0BxC,CAAA"}

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

@@ -0,0 +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(--primary-50)',
+                        color: 'var(--primary-500)'
+                    }, 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

@@ -0,0 +1 @@
+{"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,mBAAmB;wBACpC,KAAK,EAAE,oBAAoB;qBAC5B,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(--primary-50)',\n            color: 'var(--primary-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

@@ -0,0 +1,28 @@
+import { SolidIcon } from "../../shad-cn-ui";
+export const SolidDashboardFilterRequired = () => {
+  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(--primary-50)',
+            color: 'var(--primary-500)'
+          }}
+        >
+          <SolidIcon name="si-filter" style={{ color: "var(--primary-color)", fontSize: '2.5rem' }} aria-hidden />
+        </div>
+        <div>
+          <div className="flex flex-column gap-2">
+            <h3 className="m-0" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>Filters Required</h3>
+            <p className="m-0" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>
+              Please select the required filters to render your dashboard.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardHeader.tsx"],"names":[],"mappings":"AACA,QAAA,MAAM,oBAAoB,+CAOzB,CAAA;AACD,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SolidDashboardHeader = function () {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-screen", children: [_jsx("h1", { className: "text-2xl font-bold mb-4", children: "Solid Dashboard Header" }), _jsx("p", { className: "text-lg", children: "This is a placeholder for the Solid Dashboard Header component." })] }));
+};
+export default SolidDashboardHeader;
+//# sourceMappingURL=SolidDashboardHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboardHeader.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardHeader.tsx"],"names":[],"mappings":";AACA,IAAM,oBAAoB,GAAG;IAC3B,OAAO,CACL,eAAK,SAAS,EAAC,oDAAoD,aACjE,aAAI,SAAS,EAAC,yBAAyB,uCAA4B,EACnE,YAAG,SAAS,EAAC,SAAS,gFAAoE,IACtF,CACP,CAAC;AACJ,CAAC,CAAA;AACD,eAAe,oBAAoB,CAAC","sourcesContent":["\nconst SolidDashboardHeader = () => {\n  return (\n    <div className=\"flex flex-col items-center justify-center h-screen\">\n      <h1 className=\"text-2xl font-bold mb-4\">Solid Dashboard Header</h1>\n      <p className=\"text-lg\">This is a placeholder for the Solid Dashboard Header component.</p>\n    </div>\n  );\n}\nexport default SolidDashboardHeader;"]}

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

@@ -0,0 +1,10 @@
+
+const SolidDashboardHeader = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <h1 className="text-2xl font-bold mb-4">Solid Dashboard Header</h1>
+      <p className="text-lg">This is a placeholder for the Solid Dashboard Header component.</p>
+    </div>
+  );
+}
+export default SolidDashboardHeader;

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

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

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

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

@@ -0,0 +1,10 @@
+"use client'";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(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

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

@@ -0,0 +1,61 @@
+"use client'"
+
+const SkeletonBlock = ({ width, height, className }: { width?: string; height?: string; className?: string }) => (
+    <div
+        className={`solid-skeleton ${className ?? ""}`}
+        style={{ width, height }}
+    />
+);
+
+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">
+                    <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">
+                    <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">
+                    <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">
+                    <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">
+                    <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">
+                    <SkeletonBlock width="30%" height="1.4rem" className="mb-3" />
+                    <SkeletonBlock 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,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(--primary-50)',
+                        color: 'var(--primary-500)'
+                    }, 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

@@ -0,0 +1 @@
+{"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,mBAAmB;wBACpC,KAAK,EAAE,oBAAoB;qBAC5B,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(--primary-50)',\n            color: 'var(--primary-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

@@ -0,0 +1,32 @@
+import { SolidIcon } from "../../shad-cn-ui";
+
+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(--primary-50)',
+            color: 'var(--primary-500)'
+          }}
+        >
+          <SolidIcon name="si-chart-bar" 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 }}>
+            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,+CAyBrC,CAAA"}

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

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

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

@@ -0,0 +1,28 @@
+import { SolidIcon } from "../../shad-cn-ui";
+
+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)'
+          }}
+        >
+          <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>
+
+          <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;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"}