@solidxai/core-ui 0.1.5-beta.6 → 0.1.5-beta.9

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

@@ -4,10 +4,10 @@ import { SqlExpression } from '../../../types/solid-core';
 import { Button } from 'primereact/button';
 import { Tooltip } from "primereact/tooltip";
 import qs from 'qs';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import { SolidXAIIcon } from '../solid-ai/SolidXAIIcon';
 import styles from './SolidDashboard.module.css';
-import SolidDashboardBody from './SolidDashboardBody';
+import SolidDashboardBody, { GridItem } from './SolidDashboardBody';
 import { DashboardFilter } from './DashboardFilter';
 import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';
 import { SolidDashboardFilterRequired } from './SolidDashboardFilterRequired';
@@ -17,6 +17,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { showNavbar, toggleNavbar } from "../../../redux/features/navbarSlice";
 import SolidDashboardNotAvailable from './SolidDashboardNotAvailable';
 import { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from '../../../redux/api/solidSettingsApi';
+import showToast from '../../../helpers/showToast';
+import { Toast } from "primereact/toast";
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { useUpsertUserDashboardLayoutMutation } from '../../../redux/api/dashboardLayoutApi';
 
 export enum DashboardVariableType {
   DATE = 'date',
@@ -61,7 +65,7 @@ function handleDashboardData(
   }
 }
 
-function getQueryParams(moduleName: string, dashboardId?: number, dashboardName?: string) {
+function getQueryParams(moduleName: string, dashboardName?: string) {
   const filters: any = {
     module: {
       name: {
@@ -70,10 +74,8 @@ function getQueryParams(moduleName: string, dashboardId?: number, dashboardName?
     }
   };
 
-  if (dashboardId !== undefined) {
-    filters.id = { $eq: dashboardId };
-  } else if (dashboardName !== undefined) {
-    filters.name = { $eq: dashboardName };
+  if (dashboardName !== undefined) {
+    filters.name = { $eqi: dashboardName };
   }
 
   const query = {
@@ -114,12 +116,11 @@ function isRenderDashboardBody(questions: any[], dashboardVariables: DashboardVa
 
 type SolidDashboardViewProps = {
   moduleName: string;
-  dashboardId?: number;
   dashboardName?: string;
 };
 
 const SolidDashboard = (params: SolidDashboardViewProps) => {
-  const { data, isLoading, error } = useGetDashboardQuery(getQueryParams(params.moduleName, params.dashboardId, params.dashboardName)) // FIXME : error handling should be done properly
+  const { data, isLoading, error } = useGetDashboardQuery(getQueryParams(params.moduleName, params.dashboardName)) // FIXME : error handling should be done properly
   // Define a state called layoutOption and pass it after destructing the widgetOptions and dashboardOptions from layoutOption
   // TODO [HP]: Shouldn't the type of this state variable be something different? Why are we muddling this with layout but calling it body props? 
   // TODO [HP]: Body props should be clearly made up of Gridstack layout options, the questions that make up the body & the filter[] which is an array of SqlExpressions
@@ -132,6 +133,8 @@ const SolidDashboard = (params: SolidDashboardViewProps) => {
   // TODO [HP]: replace dashboardVariableFilterRules with filters everywhere...
   // const [dashboardVariableFilterRules, setDashboardVariableFilterRules] = useState<ISolidDashboardVariableFilterRule[]>([]);
   const dispatch = useDispatch();
+  const toast = useRef<Toast>(null);
+
   const visibleNavbar = useSelector((state: any) => state.navbarState?.visibleNavbar);
   const [filters, setFilters] = useState<SqlExpression[]>([]);
   const [isOpenSolidXAiPanel, setIsOpenSolidXAiPanel] = useState(false);
@@ -142,6 +145,25 @@ const SolidDashboard = (params: SolidDashboardViewProps) => {
   const [isDashboardFilterVisible, setIsDashboardFilterVisible] = useState(false);
 
 
+  const [upsertDashboardLayout, { isLoading: isDashboardLayoutLoading, error: dashboardLayoutError, isSuccess: isDashboardLayoutSuccess, data: dashboardLayoutData }] = useUpsertUserDashboardLayoutMutation();
+
+  const [dashboardLayout, setDashboardLayout] = useState<GridItem[]>([]);
+
+  const updateUserDashboardLayout = async () => {
+    try {
+      const response = await upsertDashboardLayout({
+        dashboardId: data?.records[0].id,
+        layout: JSON.stringify(dashboardLayout),
+      }).unwrap();
+      if (response.statusCode === 200) {
+        showToast(toast, "success", ERROR_MESSAGES.LAYOUT, ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_SUCCESSFULLY);
+      }
+    } catch (error) {
+      showToast(toast, "error", ERROR_MESSAGES.LAYOUT, ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_FAILED);
+    }
+  }
+
+
   useEffect(() => {
     // Invoke the dashboard api to fetch the dashboard data
     // console.log('Dashboard Data testing:', isLoading, data, error);
@@ -246,6 +268,8 @@ const SolidDashboard = (params: SolidDashboardViewProps) => {
 
   return (
     <div className={`h-screen surface-0 flex`}>
+      <Toast ref={toast} />
+
       <div className={`h-full flex-grow-1 ${styles.SolidDashboardPageContentWrapper}`}>
         {isLoading && <SolidDashboardLoading />}
         {error && <SolidDashboardRenderError />}
@@ -275,23 +299,44 @@ const SolidDashboard = (params: SolidDashboardViewProps) => {
               {dashboardVariables && dashboardVariables.length > 0 && (
                 <>
                   <div className='flex gap-2'>
-                    <Button
-                      label="Filter"
-                      icon={filters.length > 0 ? "pi pi-filter-fill" : "pi pi-filter"}
-                      outlined={filters.length === 0}
-                      severity={filters.length > 0 ? "info" : "secondary"}
-                      style={filters.length > 0 ? { background: "rgb(114, 46, 209)" } : {}}
-                      size="small"
-                      onClick={() => setIsDashboardFilterVisible(true)}
-                    />
+                    <a onClick={() => setIsDashboardFilterVisible(true)}>
+                      <>
+                        <Button
+                          type="button"
+                          icon={filters.length > 0 ? "pi pi-filter-fill" : "pi pi-filter"}
+                          className={`p-button-sm lg:hidden solid-icon-button `}
+                          size='small'
+                        />
+
+                        <Button
+                          type="button"
+                          icon={filters.length > 0 ? "pi pi-filter-fill" : "pi pi-filter"}
+                          label={"Filter"}
+                          className={`hidden lg:inline-flex`}
+                          size='small'
+
+                        />
+                      </>
+                    </a>
                     {filters.length > 0 && (
                       <Button
-                        // label="Clear Filters"
+                        type="button"
+                        size="small"
                         icon="pi pi-filter-slash"
-                        severity="danger"
+                        severity="secondary"
+                        className="solid-icon-button "
+                        outlined
                         onClick={() => { setFilters([]); setIsDashboardFilterVisible(false); }}
                       />
                     )}
+                    <Button
+                      type="button"
+                      size="small"
+                      icon="pi pi-save"
+                      severity="secondary"
+                      className="solid-icon-button "
+                      outlined
+                      onClick={() => updateUserDashboardLayout()} />
                   </div>
                   <DashboardFilter
                     dashboardVariables={dashboardVariables}
@@ -304,58 +349,60 @@ const SolidDashboard = (params: SolidDashboardViewProps) => {
               )}
             </div>
             {!isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardFilterRequired />}
-            {isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardBody questions={questions} filters={filters} />}
+            {isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardBody dashboardId={data?.records[0]?.id} questions={questions} filters={filters} dashboardLayout={dashboardLayout} setDashboardLayout={setDashboardLayout} />}
           </>
         )}
       </div>
-      {mcpUrl && (
-        <div className={`chatter-section ${isOpenSolidXAiPanel === false ? 'collapsed' : 'open'}`} style={{ width: chatterWidth }}>
-          {isOpenSolidXAiPanel && (
-            <div
-              style={{
-                width: 5,
-                cursor: 'col-resize',
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                bottom: 0,
-                height: '100%',
-                zIndex: 9,
-              }}
-              onMouseDown={() => setIsResizing(true)}
-            />
-          )}
-          {isOpenSolidXAiPanel &&
-            <Button
-              icon="pi pi-angle-double-right"
-              size="small"
-              text
-              className="chatter-collapse-btn"
-              style={{ width: 30, height: 30, aspectRatio: '1/1' }}
-              onClick={handleClose}
-            />
-          }
-
-          {isOpenSolidXAiPanel === false ?
-            <div className="flex flex-column gap-2 justify-content-center p-2">
-              <div className="chatter-collapsed-content" onClick={handleOpen}>
-                <div className="flex gap-2"> <SolidXAIIcon /> SolidX AI </div>
-              </div>
+      {
+        mcpUrl && (
+          <div className={`chatter-section ${isOpenSolidXAiPanel === false ? 'collapsed' : 'open'}`} style={{ width: chatterWidth }}>
+            {isOpenSolidXAiPanel && (
+              <div
+                style={{
+                  width: 5,
+                  cursor: 'col-resize',
+                  position: 'absolute',
+                  left: 0,
+                  top: 0,
+                  bottom: 0,
+                  height: '100%',
+                  zIndex: 9,
+                }}
+                onMouseDown={() => setIsResizing(true)}
+              />
+            )}
+            {isOpenSolidXAiPanel &&
               <Button
-                icon="pi pi-chevron-left"
+                icon="pi pi-angle-double-right"
                 size="small"
-                className="px-0"
-                style={{ width: 30 }}
-                onClick={handleOpen}
+                text
+                className="chatter-collapse-btn"
+                style={{ width: 30, height: 30, aspectRatio: '1/1' }}
+                onClick={handleClose}
               />
-            </div>
-            :
-            <SolidAiMainWrapper mcpUrl={mcpUrl} />
-          }
-        </div>
-      )}
+            }
+
+            {isOpenSolidXAiPanel === false ?
+              <div className="flex flex-column gap-2 justify-content-center p-2">
+                <div className="chatter-collapsed-content" onClick={handleOpen}>
+                  <div className="flex gap-2"> <SolidXAIIcon /> SolidX AI </div>
+                </div>
+                <Button
+                  icon="pi pi-chevron-left"
+                  size="small"
+                  className="px-0"
+                  style={{ width: 30 }}
+                  onClick={handleOpen}
+                />
+              </div>
+              :
+              <SolidAiMainWrapper mcpUrl={mcpUrl} />
+            }
+          </div>
+        )
+      }
 
-    </div>
+    </div >
   );
 }
 

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

@@ -1,12 +1,24 @@
 import 'gridstack/dist/gridstack.min.css';
 import { GridStackOptions, GridStackWidget } from 'gridstack';
 import { SqlExpression } from '../../../types/solid-core';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
 export interface SolidDashboardBodyProps {
     dashboardOptions?: GridStackOptions;
     widgetOptions?: GridStackWidget[];
+    dashboardId: string;
     questions: any[];
     filters: SqlExpression[];
+    dashboardLayout: GridItem[];
+    setDashboardLayout: (dashboardLayout: GridItem[]) => void;
 }
-declare const SolidDashboardBody: ({ questions, filters }: SolidDashboardBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type GridItem = {
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+declare const SolidDashboardBody: ({ dashboardId, questions, filters, dashboardLayout, setDashboardLayout }: SolidDashboardBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default SolidDashboardBody;
 //# sourceMappingURL=SolidDashboardBody.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardBody.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardBody.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAM1D,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAElC,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED,QAAA,MAAM,kBAAkB,2BAAiC,uBAAuB,4CA+F/E,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"SolidDashboardBody.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardBody.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAMxC,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAElC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,eAAe,EAAE,QAAQ,EAAE,CAAC;IAC5B,kBAAkB,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAqBF,QAAA,MAAM,kBAAkB,6EAAmF,uBAAuB,4CAgHjI,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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)) {
@@ -18,59 +54,109 @@ 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 } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import 'gridstack/dist/gridstack.min.css';
 import styles from './SolidDashboard.module.css';
 import { SolidQuestionRenderer } from './SolidQuestionRenderer';
-import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
-import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
-import qs from 'qs';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import ReactGridLayout, { useContainerWidth } from "react-grid-layout";
+import { useEffect, useRef } 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 showToast from '../../../helpers/showToast';
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { Toast } from 'primereact/toast';
+var generateDefaultLayout = function (questions) {
+    return questions.map(function (q, index) {
+        var col = index % 3;
+        var row = Math.floor(index / 3);
+        return {
+            i: String(q.name),
+            x: col * 4,
+            y: row * 4,
+            w: 4,
+            h: 4,
+        };
+    });
+};
 var SolidDashboardBody = function (_a) {
-    // const gridRef = useRef<HTMLDivElement>(null);
-    var questions = _a.questions, _b = _a.filters, filters = _b === void 0 ? [] : _b;
+    var dashboardId = _a.dashboardId, questions = _a.questions, _b = _a.filters, filters = _b === void 0 ? [] : _b, dashboardLayout = _a.dashboardLayout, setDashboardLayout = _a.setDashboardLayout;
+    var toast = useRef(null);
+    var sortedQuestions = __spreadArray([], questions, true).map(function (q, index) { return (__assign(__assign({}, q), { defaultIndex: index + 1 })); })
+        .sort(function (a, b) { var _a, _b; return ((_a = a.sequenceNumber) !== null && _a !== void 0 ? _a : a.defaultIndex) - ((_b = b.sequenceNumber) !== null && _b !== void 0 ? _b : b.defaultIndex); });
+    var _c = useContainerWidth(), width = _c.width, containerRef = _c.containerRef, mounted = _c.mounted;
+    var isLayoutReady = useRef(false);
+    var _d = useLazyGetUserDashboardLayoutByDashboardIdQuery(), fetchUserLayout = _d[0], _e = _d[1], userLayoutData = _e.data, isSuccess = _e.isSuccess, isLoading = _e.isLoading;
+    useEffect(function () {
+        if (!dashboardId || questions.length === 0)
+            return;
+        var loadLayout = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, raw, savedLayout_1, layout, error_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, fetchUserLayout(dashboardId).unwrap()];
+                    case 1:
+                        response = _b.sent();
+                        raw = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.layout;
+                        savedLayout_1 = typeof raw === 'string' ? JSON.parse(raw) : raw;
+                        layout = savedLayout_1
+                            ? sortedQuestions.map(function (q) {
+                                var saved = savedLayout_1.find(function (s) { return s.i === String(q.name); });
+                                return saved !== null && saved !== void 0 ? saved : generateDefaultLayout([q])[0];
+                            })
+                            : generateDefaultLayout(sortedQuestions);
+                        setDashboardLayout(layout);
+                        setTimeout(function () { isLayoutReady.current = true; }, 100);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _b.sent();
+                        if (error_1.status === 403) {
+                            showToast(toast, "error", ERROR_MESSAGES.FORBIDDEN_ERROR, ERROR_MESSAGES.FORBIDDEN_ERROR);
+                        }
+                        else {
+                            showToast(toast, "error", ERROR_MESSAGES.SOMETHING_WRONG, ERROR_MESSAGES.SOMETHING_WRONG);
+                        }
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadLayout();
+    }, [questions, dashboardId]);
     // useEffect(() => {
-    //   if (!gridRef.current) return;
-    //   // Initialize Gridstack on the specific ref
-    //   const grid = GridStack.init(dashboardOptions || {}, gridRef.current);
-    //   // Load widgets if provided
-    //   if (widgetOptions && widgetOptions.length > 0) {
-    //     grid.load(
-    //       widgetOptions.map((widget) => ({
-    //         ...widget,
-    //         content: `${widget.content ?? 'Widget'}`,
-    //       }))
-    //     );
-    //   }
-    //   // Cleanup on unmount
-    //   return () => {
-    //     grid.destroy(false);
-    //   };
-    // }, [dashboardOptions, widgetOptions]);
-    // Fallback sequencing
-    var questionsWithDefaultIndex = questions.map(function (q, index) { return (__assign(__assign({}, q), { defaultIndex: index + 1 })); });
-    var sortedQuestions = __spreadArray([], questionsWithDefaultIndex, true).sort(function (a, b) {
-        var _a, _b;
-        var aSeq = (_a = a.sequenceNumber) !== null && _a !== void 0 ? _a : a.defaultIndex;
-        var bSeq = (_b = b.sequenceNumber) !== null && _b !== void 0 ? _b : b.defaultIndex;
-        return aSeq - bSeq;
-    });
-    return (_jsx("div", { className: "p-4 overflow-y-auto ".concat(styles.SolidDashboardContentWrapper), children: _jsxs("div", { className: 'grid', children: [sortedQuestions
-                    .filter(function (question) { return question.visualisedAs !== 'prime-datatable'; })
-                    .map(function (question) { return (_jsx("div", { className: "col-4 p-3", children: _jsx(SolidQuestionRenderer, { question: question, filters: filters, isPreview: false }) }, question.id)); }), sortedQuestions
-                    .filter(function (question) { return question.visualisedAs === 'prime-datatable'; })
-                    .map(function (question) {
-                    var _a, _b;
-                    var queryParams = qs.stringify({ isPreview: false, filters: filters }, { arrayFormat: 'brackets' });
-                    var _c = useGetDashboardQuestionDataByIdQuery({
-                        id: question.id,
-                        qs: queryParams,
-                    }), questionData = _c.data, isLoading = _c.isLoading;
-                    if (isLoading)
-                        return _jsx(ProgressSpinner, {});
-                    var textAlign = (_a = question === null || question === void 0 ? void 0 : question.textAlign) !== null && _a !== void 0 ? _a : 'start';
-                    return (_jsx("div", { className: "col-12 p-3", children: _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), style: { maxHeight: '40vh', overflowY: 'scroll' }, 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 }), _jsx("div", { className: 'mt-3', children: _jsx(PrimeReactDatatableRenderer, { options: JSON.parse(question === null || question === void 0 ? void 0 : question.chartOptions), visualizationData: (_b = questionData === null || questionData === void 0 ? void 0 : questionData.data) === null || _b === void 0 ? void 0 : _b.visualizationData }) })] }) }, question.id));
-                })] }) }));
+    //   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]);
+    var handleLayoutChange = function (newLayout) {
+        if (!isLayoutReady.current)
+            return;
+        // v2 passes LayoutItem[] at runtime despite the type saying Layout
+        var layoutArray = newLayout;
+        var updated = layoutArray.map(function (item) { return ({
+            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 (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsx("div", { ref: containerRef, className: "p-4 ".concat(styles.SolidDashboardContentWrapper), style: { width: '100%', overflowY: 'auto', minHeight: 0 }, children: mounted && dashboardLayout.length > 0 && (_jsx(ReactGridLayout, { width: width, layout: dashboardLayout, gridConfig: {
+                        cols: 12,
+                        rowHeight: 120,
+                    }, dragConfig: {
+                        handle: ".drag-handle",
+                    }, resizeConfig: {
+                        enabled: true,
+                    }, onLayoutChange: handleLayoutChange, children: sortedQuestions.map(function (question) { return (_jsx("div", { className: "drag-handle cursor-move rounded shadow p-2 overflow-hidden", style: { backgroundColor: 'transparent' }, children: question.visualisedAs === "prime-datatable" ? (_jsx(PrimeDataTableWrapper, { question: question, filters: filters })) : (_jsx(SolidQuestionRenderer, { question: question, filters: filters, isPreview: false })) }, String(question.name))); }) })) })] }));
 };
 export default SolidDashboardBody;
 //# sourceMappingURL=SolidDashboardBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardBody.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardBody.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport 'gridstack/dist/gridstack.min.css';\nimport { GridStackOptions, GridStackWidget } from 'gridstack';\nimport styles from './SolidDashboard.module.css'\nimport { SolidQuestionRenderer } from './SolidQuestionRenderer';\nimport { SqlExpression } from '../../../types/solid-core';\nimport PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport qs from 'qs';\nimport { ProgressSpinner } from 'primereact/progressspinner';\n\nexport interface SolidDashboardBodyProps {\n  dashboardOptions?: GridStackOptions;\n  widgetOptions?: GridStackWidget[];\n  // Replace `any` with a proper `Question` type when available\n  questions: any[];\n  filters: SqlExpression[];\n}\n\nconst SolidDashboardBody = ({ questions, filters = [] }: SolidDashboardBodyProps) => {\n  // const gridRef = useRef<HTMLDivElement>(null);\n\n  // useEffect(() => {\n  //   if (!gridRef.current) return;\n\n  //   // Initialize Gridstack on the specific ref\n  //   const grid = GridStack.init(dashboardOptions || {}, gridRef.current);\n\n  //   // Load widgets if provided\n  //   if (widgetOptions && widgetOptions.length > 0) {\n  //     grid.load(\n  //       widgetOptions.map((widget) => ({\n  //         ...widget,\n  //         content: `${widget.content ?? 'Widget'}`,\n  //       }))\n  //     );\n  //   }\n\n  //   // Cleanup on unmount\n  //   return () => {\n  //     grid.destroy(false);\n  //   };\n  // }, [dashboardOptions, widgetOptions]);\n\n\n  // Fallback sequencing\n  const questionsWithDefaultIndex = questions.map((q, index) => ({\n    ...q,\n    defaultIndex: index + 1,\n  }));\n\n\n  const sortedQuestions = [...questionsWithDefaultIndex].sort((a, b) => {\n    const aSeq = a.sequenceNumber ?? a.defaultIndex;\n    const bSeq = b.sequenceNumber ?? b.defaultIndex;\n    return aSeq - bSeq;\n  });\n\n\n  return (\n    <div className={`p-4 overflow-y-auto ${styles.SolidDashboardContentWrapper}`}>\n      {/* <div className=\"grid-stack\" ref={gridRef}></div> */}\n      <div className='grid'>\n        {/* {questions && questions.map((question: any) => {\n          return (\n            <div className='col-4 p-3'>\n              <SolidQuestionRenderer question={question} filters={filters} key={question.id} isPreview={false} />\n            </div>\n          )\n        })} */}\n        {sortedQuestions\n          .filter((question: any) => question.visualisedAs !== 'prime-datatable')\n          .map((question: any) => (\n            <div className=\"col-4 p-3\" key={question.id}>\n              <SolidQuestionRenderer\n                question={question}\n                filters={filters}\n                isPreview={false}\n              />\n            </div>\n          ))}\n\n        {sortedQuestions\n          .filter((question: any) => question.visualisedAs === 'prime-datatable')\n          .map((question: any) => {\n            const queryParams = qs.stringify({ isPreview: false, filters }, { arrayFormat: 'brackets' });\n\n            const { data: questionData, isLoading } = useGetDashboardQuestionDataByIdQuery({\n              id: question.id,\n              qs: queryParams,\n            });\n\n            if (isLoading) return <ProgressSpinner />;\n            const textAlign = question?.textAlign ?? 'start'\n\n            return (\n              <div className=\"col-12 p-3\" key={question.id}>\n                <div className={`${styles.SolidChartCardWrapper} p-4`} style={{ maxHeight: '40vh', overflowY: 'scroll' }}>\n                  <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>\n                  <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>\n                  <div className='mt-3'>\n\n                    <PrimeReactDatatableRenderer\n                      options={JSON.parse(question?.chartOptions)}\n                      visualizationData={questionData?.data?.visualizationData}\n                    />\n                  </div>\n                </div>\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  );\n};\n\nexport default SolidDashboardBody;"]}
+{"version":3,"file":"SolidDashboardBody.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardBody.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport 'gridstack/dist/gridstack.min.css';\nimport { GridStackOptions, GridStackWidget } from 'gridstack';\nimport styles from './SolidDashboard.module.css'\nimport { SolidQuestionRenderer } from './SolidQuestionRenderer';\nimport { SqlExpression } from '../../../types/solid-core';\nimport ReactGridLayout, { useContainerWidth, Layout, LayoutItem } from \"react-grid-layout\";\nimport { useEffect, useRef, useState } from 'react';\nimport PrimeDataTableWrapper from './PrimeDataTableWrapper';\nimport 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\nimport { useLazyGetUserDashboardLayoutByDashboardIdQuery } from '../../../redux/api/dashboardLayoutApi';\nimport showToast from '../../../helpers/showToast';\nimport { ERROR_MESSAGES } from '../../../constants/error-messages';\nimport { Toast } from 'primereact/toast';\n\nexport interface SolidDashboardBodyProps {\n  dashboardOptions?: GridStackOptions;\n  widgetOptions?: GridStackWidget[];\n  // Replace `any` with a proper `Question` type when available\n  dashboardId: string;\n  questions: any[];\n  filters: SqlExpression[];\n  dashboardLayout: GridItem[];\n  setDashboardLayout: (dashboardLayout: GridItem[]) => void;\n}\n\nexport type GridItem = {\n  i: string;\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n};\n\n// Layout is Layout[] at runtime in v2 — the type definition is misleading\ntype LayoutArray = LayoutItem[];\n\n\nconst generateDefaultLayout = (questions: any[]): GridItem[] => {\n  return questions.map((q, index) => {\n    const col = index % 3;\n    const row = Math.floor(index / 3);\n    return {\n      i: String(q.name),\n      x: col * 4,   // 0, 4, 8 in a 12-col grid\n      y: row * 4,\n      w: 4,\n      h: 4,\n    };\n  });\n};\n\n\nconst SolidDashboardBody = ({ dashboardId, questions, filters = [], dashboardLayout, setDashboardLayout }: SolidDashboardBodyProps) => {\n  const toast = useRef<Toast>(null);\n\n  const sortedQuestions = [...questions]\n    .map((q, index) => ({ ...q, defaultIndex: index + 1 }))\n    .sort((a, b) => (a.sequenceNumber ?? a.defaultIndex) - (b.sequenceNumber ?? b.defaultIndex));\n\n  const { width, containerRef, mounted } = useContainerWidth();\n  const isLayoutReady = useRef(false);\n\n  const [fetchUserLayout, { data: userLayoutData, isSuccess, isLoading }] =\n    useLazyGetUserDashboardLayoutByDashboardIdQuery();\n\n  useEffect(() => {\n    if (!dashboardId || questions.length === 0) return;\n    const loadLayout = async () => {\n      try {\n        const response = await fetchUserLayout(dashboardId).unwrap();\n        const raw = response?.data?.layout;\n        const savedLayout = typeof raw === 'string' ? JSON.parse(raw) : raw;\n\n        const layout = savedLayout\n          ? sortedQuestions.map((q) => {\n            const saved = (savedLayout as GridItem[]).find(s => s.i === String(q.name));\n            return saved ?? generateDefaultLayout([q])[0];\n          })\n          : generateDefaultLayout(sortedQuestions);\n\n        setDashboardLayout(layout);\n        setTimeout(() => { isLayoutReady.current = true; }, 100);\n      } catch (error: any) {\n        if (error.status === 403) {\n          showToast(toast, \"error\", ERROR_MESSAGES.FORBIDDEN_ERROR, ERROR_MESSAGES.FORBIDDEN_ERROR);\n        } else {\n          showToast(toast, \"error\", ERROR_MESSAGES.SOMETHING_WRONG, ERROR_MESSAGES.SOMETHING_WRONG);\n        }\n      }\n    };\n\n    loadLayout();\n  }, [questions, dashboardId]);\n\n\n  // useEffect(() => {\n  //   if (questions.length === 0) return;\n  //   const saved = getSavedLayout();\n  //   setDashboardLayout(generateLayout(sortedQuestions, saved));\n  //   // Delay the ready flag so onLayoutChange doesn't fire before we're set\n  //   setTimeout(() => { isLayoutReady.current = true; }, 100);\n  // }, [questions]);\n\n\n  const handleLayoutChange = (newLayout: Layout) => {\n    if (!isLayoutReady.current) return;\n\n    // v2 passes LayoutItem[] at runtime despite the type saying Layout\n    const layoutArray = newLayout as unknown as LayoutItem[];\n\n    const updated: GridItem[] = layoutArray.map(item => ({\n      i: item.i,\n      x: item.x,\n      y: item.y,\n      w: item.w,\n      h: item.h,\n    }));\n\n    setDashboardLayout(updated);\n    // saving is handled by the parent/caller\n  };\n\n  return (\n    <>\n      <Toast ref={toast} />\n      <div\n        ref={containerRef as React.RefObject<HTMLDivElement>}\n        className={`p-4 ${styles.SolidDashboardContentWrapper}`}\n        style={{ width: '100%', overflowY: 'auto', minHeight: 0 }}\n\n      >\n        {mounted && dashboardLayout.length > 0 && (\n          <ReactGridLayout\n            width={width}\n            layout={dashboardLayout}\n            gridConfig={{\n              cols: 12,\n              rowHeight: 120,\n            }}\n            dragConfig={{\n              handle: \".drag-handle\",\n            }}\n            resizeConfig={{\n              enabled: true,\n            }}\n            onLayoutChange={handleLayoutChange}\n          >\n            {sortedQuestions.map((question: any) => (\n              <div key={String(question.name)} className=\"drag-handle cursor-move rounded shadow p-2 overflow-hidden\" style={{ backgroundColor: 'transparent' }}>\n                {/* <div className=\" mb-2 font-bold\">\n                {question.name}\n              </div> */}\n                {question.visualisedAs === \"prime-datatable\" ? (\n                  <PrimeDataTableWrapper question={question} filters={filters} />\n                ) : (\n                  <SolidQuestionRenderer question={question} filters={filters} isPreview={false} />\n                )}\n              </div>\n            ))}\n          </ReactGridLayout>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default SolidDashboardBody;"]}