@solidxai/core-ui 0.1.12-beta.5 → 0.1.12-beta.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboard.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DashboardResponse, useGetDashboardQuery } from '../../../redux/api/dashboardApi';\nimport { SqlExpression } from '../../../types/solid-core';\nimport { SolidButton, SolidIcon, SolidTooltip, SolidTooltipContent, SolidTooltipTrigger } from '../../shad-cn-ui';\nimport qs from 'qs';\nimport { Dispatch, SetStateAction, useEffect, useState } from 'react';\nimport styles from './SolidDashboard.module.css';\nimport SolidDashboardBody, { GridItem } from './SolidDashboardBody';\nimport { DashboardFilter } from './DashboardFilter';\n// import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper'; // moved to SolidX Studio panel\nimport { SolidDashboardFilterRequired } from './SolidDashboardFilterRequired';\nimport { SolidDashboardLoading } from './SolidDashboardLoading';\nimport { SolidDashboardRenderError } from './SolidDashboardRenderError';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { showNavbar, toggleNavbar } from \"../../../redux/features/navbarSlice\";\nimport SolidDashboardNotAvailable from './SolidDashboardNotAvailable';\nimport { showToast } from '../../../redux/features/toastSlice';\nimport { ERROR_MESSAGES } from '../../../constants/error-messages';\nimport { useUpsertUserDashboardLayoutMutation } from '../../../redux/api/dashboardLayoutApi';\n\nexport enum DashboardVariableType {\n  DATE = 'date',\n  SELECTION_STATIC = 'selectionStatic',\n  SELECTION_DYNAMIC = 'selectionDynamic',\n}\n\nenum SOURCE_TYPE {\n  SQL = 'sql',\n  PROVIDER = 'provider',\n}\n\nexport interface DashboardVariableRecord {\n  id: number;\n  variableName: string;\n  variableType: DashboardVariableType;\n  selectionStaticValues?: string;\n  selectionDynamicSourceType?: SOURCE_TYPE;\n  selectionDynamicProviderName?: string;\n  selectionDynamicSQL?: string;\n  isMultiSelect?: boolean;\n  defaultValue?: string;\n  defaultOperator?: string;\n}\n\nfunction handleDashboardData(\n  data: DashboardResponse,\n  setDashboardVariables: Dispatch<SetStateAction<DashboardVariableRecord[]>>,\n  setQuestions: Dispatch<SetStateAction<any[]>>,\n) {\n  const { records, meta } = data;\n  if (records && records.length > 0) {\n    // Set the layout options for the dashboard body\n    const dashboardData = records[0]; // Assuming we want the first dashboard\n\n    // Set the dashboard variables\n    setDashboardVariables(dashboardData.dashboardVariables || []);\n\n    // Set the dashboard questions\n    setQuestions(dashboardData.questions)\n\n  }\n}\n\nfunction getQueryParams(moduleName: string, dashboardName?: string) {\n  const filters: any = {\n    module: {\n      name: {\n        $eq: moduleName\n      }\n    }\n  };\n\n  if (dashboardName !== undefined) {\n    filters.name = { $eqi: dashboardName };\n  }\n\n  const query = {\n    filters,\n    populate: ['dashboardVariables', 'questions']\n  };\n  const urlQuery = qs.stringify(query, {\n    encodeValuesOnly: true,\n  });\n  return urlQuery;\n}\n\n// Render the dashboard body only if:\n// 1. There are dashboard questions\n// AND\n// (\n// 1. There are dashboard variables and all dashboard variable filter rules have been applied i.e (all dashboard variables have been selected)\n//. OR\n// 2. There are no dashboard variables\n// )\n// \nfunction isRenderDashboardBody(questions: any[], dashboardVariables: DashboardVariableRecord[], filters: SqlExpression[]) {\n  if (questions.length === 0) {\n    return false;\n  }\n\n  if (dashboardVariables.length === 0) {\n    return true;\n  }\n\n  // Check if all dashboard variables have corresponding filters applied\n  const allVariablesFiltered = dashboardVariables.every(variable =>\n    filters.some(filter => filter.variableName === variable.variableName)\n  );\n\n  return allVariablesFiltered;\n}\n\ntype SolidDashboardViewProps = {\n  moduleName: string;\n  dashboardName?: string;\n};\n\nconst SolidDashboard = (params: SolidDashboardViewProps) => {\n  const { data, isLoading, error } = useGetDashboardQuery(getQueryParams(params.moduleName, params.dashboardName)) // FIXME : error handling should be done properly\n  // Define a state called layoutOption and pass it after destructing the widgetOptions and dashboardOptions from layoutOption\n  // 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? \n  // 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\n  // TODO [HP]: This is fully CONFUSED\n  // const [layoutOption, setLayoutOption] = useState<SolidDashboardBodyProps>({\n  //   filters: [],\n  //   questions: [],\n  // });\n\n  // TODO [HP]: replace dashboardVariableFilterRules with filters everywhere...\n  // const [dashboardVariableFilterRules, setDashboardVariableFilterRules] = useState<ISolidDashboardVariableFilterRule[]>([]);\n  const dispatch = useDispatch();\n\n  const visibleNavbar = useSelector((state: any) => state.navbarState?.visibleNavbar);\n  const [filters, setFilters] = useState<SqlExpression[]>([]);\n  const [questions, setQuestions] = useState<any[]>([]);\n  const [dashboardVariables, setDashboardVariables] = useState<DashboardVariableRecord[]>([]);\n  const [isDashboardFilterVisible, setIsDashboardFilterVisible] = useState(false);\n\n  const [upsertDashboardLayout] = useUpsertUserDashboardLayoutMutation();\n\n  const [dashboardLayout, setDashboardLayout] = useState<GridItem[]>([]);\n\n  const updateUserDashboardLayout = async () => {\n    try {\n      const response = await upsertDashboardLayout({\n        dashboardId: data?.records[0].id,\n        layout: JSON.stringify(dashboardLayout),\n      }).unwrap();\n      if (response.statusCode === 200) {\n        dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.LAYOUT, detail: ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_SUCCESSFULLY }));\n      }\n    } catch (error) {\n      dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.LAYOUT, detail: ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_FAILED }));\n    }\n  }\n\n  useEffect(() => {\n    // Invoke the dashboard api to fetch the dashboard data\n    // console.log('Dashboard Data testing:', isLoading, data, error);\n    if (!isLoading && data) {\n      // Assuming data contains the layout options\n      handleDashboardData(data, setDashboardVariables, setQuestions);\n    }\n  }, [isLoading, data]);\n\n  const toggleBothSidebars = () => {\n    if (visibleNavbar) {\n      dispatch(toggleNavbar());   // close both\n    } else {\n      dispatch(showNavbar());     // open both\n    }\n  };\n\n\n\n  return (\n    <div className={`h-screen surface-0 flex`}>\n\n      <div className={`h-full flex-grow-1 ${styles.SolidDashboardPageContentWrapper}`}>\n        {isLoading && <SolidDashboardLoading />}\n        {error && <SolidDashboardRenderError />}\n        {!isLoading && !error && data && data.records.length === 0 && (\n          <SolidDashboardNotAvailable />\n        )}\n        {!isLoading && !error && data && data.records.length > 0 && (\n          <>\n            <div className=\"page-header\" style={{ borderBottom: '1px solid var(--primary-light-color)' }}>\n              <div className='flex align-items-center gap-2'>\n                <div className=\"apps-icon block md:hidden cursor-pointer\" onClick={toggleBothSidebars}>\n                  <SolidIcon name=\"si-th-large\" aria-hidden />\n                </div>\n                <p className={`view-title solid-text-wrapper flex align-items-center gap-1 ${styles.SolidDashboardTitle}`}>\n                  {data?.records[0]?.displayName ? data?.records[0]?.displayName : data?.records[0]?.name}\n                  {data?.records[0]?.description && (\n                    <SolidTooltip>\n                      <SolidTooltipTrigger asChild>\n                        <SolidIcon name=\"si-info-circle\" className=\"solid-field-tooltip-icon\" aria-hidden />\n                      </SolidTooltipTrigger>\n                      <SolidTooltipContent side=\"right\">{data?.records[0]?.description}</SolidTooltipContent>\n                    </SolidTooltip>\n                  )}\n                </p>\n              </div>\n              {dashboardVariables && dashboardVariables.length > 0 && (\n                <>\n                  <div className='flex gap-2'>\n                    <SolidButton\n                      type=\"button\"\n                      icon={filters.length > 0 ? \"si si-filter-fill\" : \"si si-filter\"}\n                      className=\"lg:hidden solid-icon-button\"\n                      size='sm'\n                      variant='secondary'\n                      onClick={() => setIsDashboardFilterVisible(true)}\n                    />\n\n                    <SolidButton\n                      type=\"button\"\n                      icon={filters.length > 0 ? \"si si-filter-fill\" : \"si si-filter\"}\n                      label={\"Filter\"}\n                      className=\"hidden lg:inline-flex\"\n                      size='sm'\n                      variant='secondary'\n                      onClick={() => setIsDashboardFilterVisible(true)}\n                    />\n                    {filters.length > 0 && (\n                      <SolidButton\n                        type=\"button\"\n                        size=\"sm\"\n                        icon=\"si si-filter-slash\"\n                        severity=\"secondary\"\n                        className=\"solid-icon-button \"\n                        outlined\n                        onClick={() => { setFilters([]); setIsDashboardFilterVisible(false); }}\n                      />\n                    )}\n                    <SolidButton\n                      type=\"button\"\n                      size=\"sm\"\n                      icon=\"si si-save\"\n                      severity=\"secondary\"\n                      className=\"solid-icon-button \"\n                      outlined\n                      onClick={() => updateUserDashboardLayout()} />\n                  </div>\n                  <DashboardFilter\n                    dashboardVariables={dashboardVariables}\n                    initialFilters={filters}\n                    onApply={setFilters}\n                    visible={isDashboardFilterVisible}\n                    onHide={() => setIsDashboardFilterVisible(false)}\n                  />\n                </>\n              )}\n            </div>\n            {!isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardFilterRequired />}\n            {isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardBody dashboardId={data?.records[0]?.id} questions={questions} filters={filters} dashboardLayout={dashboardLayout} setDashboardLayout={setDashboardLayout} />}\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default SolidDashboard;\n"]}

package/dist/components/core/dashboard/SolidDashboard.module.css

@@ -0,0 +1,83 @@
+.SolidDashboardTitle {
+    margin: 4.3px 0 !important
+}
+
+.SolidDashboardContentWrapper {
+    background-color: var(--hightlight-bg-secondary);
+    height: calc(100vh - 64px) !important;
+}
+
+.SolidChartCardWrapper {
+    /* box-shadow: 0px 6px 15px 1px rgb(0 0 0 / 6%); */
+    border: 1px solid #e4e3e3;
+    border-radius: 12px;
+    background-color: var(--surface-card);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.SolidChartTitle {
+    color: var(--solid-dark-title);
+}
+
+.SolidDashboardDateRangeFilterWrapper {
+    border: 1px solid var(--gray-300);
+    border-radius: 6px;
+}
+
+.SolidDashboardDateRangeFilter input {
+    border: none !important;
+}
+
+
+.SolidDashboardPageContentWrapper {
+    transition: width 0.3s ease;
+    min-width: 0;
+    border-right: 1px solid var(--primary-light-color);
+}
+
+.SolidXAIFloatingBtn {
+    position: absolute;
+    top: 50%;
+    right: -1px;
+    /* transform: translateY(-50%) rotate(-90deg); */
+    z-index: 1000;
+    font-size: 0.875rem;
+    background-color: #eff1f4;
+    color: var(--secondary-dark-color);
+    white-space: nowrap;
+    padding: 0.75rem 0.5rem;
+    border-radius: 4px 4px 4px 0;
+    border-top: 1px solid var(--primary-light-color);
+    border-right: 1px solid var(--primary-light-color);
+    border-bottom: 1px solid var(--primary-light-color);
+    border-left: none;
+    display: inline-block;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    width: 30px;
+    transition: right 0.3s;
+    margin-top: -50px;
+    cursor: pointer;
+    box-shadow:
+        0 -4px 6px -4px rgba(0, 0, 0, 0.1),
+        4px 0 6px -4px rgba(0, 0, 0, 0.1),
+        0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+.SolidXAIListPanel {
+    position: fixed !important;
+    top: 0;
+    right: -700px;
+    /* Hidden by default */
+    width: 700px;
+    height: 100vh;
+    transition: right 0.3s ease;
+    z-index: 999;
+    border-left: 1px solid var(--primary-light-color);
+}
+
+.SolidXAIListPanelOpen {
+    right: 0;
+}

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

@@ -0,0 +1,263 @@
+import { DashboardResponse, useGetDashboardQuery } from '../../../redux/api/dashboardApi';
+import { SqlExpression } from '../../../types/solid-core';
+import { SolidButton, SolidIcon, SolidTooltip, SolidTooltipContent, SolidTooltipTrigger } from '../../shad-cn-ui';
+import qs from 'qs';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import styles from './SolidDashboard.module.css';
+import SolidDashboardBody, { GridItem } from './SolidDashboardBody';
+import { DashboardFilter } from './DashboardFilter';
+// import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper'; // moved to SolidX Studio panel
+import { SolidDashboardFilterRequired } from './SolidDashboardFilterRequired';
+import { SolidDashboardLoading } from './SolidDashboardLoading';
+import { SolidDashboardRenderError } from './SolidDashboardRenderError';
+import { useDispatch, useSelector } from "react-redux";
+import { showNavbar, toggleNavbar } from "../../../redux/features/navbarSlice";
+import SolidDashboardNotAvailable from './SolidDashboardNotAvailable';
+import { showToast } from '../../../redux/features/toastSlice';
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { useUpsertUserDashboardLayoutMutation } from '../../../redux/api/dashboardLayoutApi';
+
+export enum DashboardVariableType {
+  DATE = 'date',
+  SELECTION_STATIC = 'selectionStatic',
+  SELECTION_DYNAMIC = 'selectionDynamic',
+}
+
+enum SOURCE_TYPE {
+  SQL = 'sql',
+  PROVIDER = 'provider',
+}
+
+export interface DashboardVariableRecord {
+  id: number;
+  variableName: string;
+  variableType: DashboardVariableType;
+  selectionStaticValues?: string;
+  selectionDynamicSourceType?: SOURCE_TYPE;
+  selectionDynamicProviderName?: string;
+  selectionDynamicSQL?: string;
+  isMultiSelect?: boolean;
+  defaultValue?: string;
+  defaultOperator?: string;
+}
+
+function handleDashboardData(
+  data: DashboardResponse,
+  setDashboardVariables: Dispatch<SetStateAction<DashboardVariableRecord[]>>,
+  setQuestions: Dispatch<SetStateAction<any[]>>,
+) {
+  const { records, meta } = data;
+  if (records && records.length > 0) {
+    // Set the layout options for the dashboard body
+    const dashboardData = records[0]; // Assuming we want the first dashboard
+
+    // Set the dashboard variables
+    setDashboardVariables(dashboardData.dashboardVariables || []);
+
+    // Set the dashboard questions
+    setQuestions(dashboardData.questions)
+
+  }
+}
+
+function getQueryParams(moduleName: string, dashboardName?: string) {
+  const filters: any = {
+    module: {
+      name: {
+        $eq: moduleName
+      }
+    }
+  };
+
+  if (dashboardName !== undefined) {
+    filters.name = { $eqi: dashboardName };
+  }
+
+  const query = {
+    filters,
+    populate: ['dashboardVariables', 'questions']
+  };
+  const urlQuery = qs.stringify(query, {
+    encodeValuesOnly: true,
+  });
+  return urlQuery;
+}
+
+// Render the dashboard body only if:
+// 1. There are dashboard questions
+// AND
+// (
+// 1. There are dashboard variables and all dashboard variable filter rules have been applied i.e (all dashboard variables have been selected)
+//. OR
+// 2. There are no dashboard variables
+// )
+// 
+function isRenderDashboardBody(questions: any[], dashboardVariables: DashboardVariableRecord[], filters: SqlExpression[]) {
+  if (questions.length === 0) {
+    return false;
+  }
+
+  if (dashboardVariables.length === 0) {
+    return true;
+  }
+
+  // Check if all dashboard variables have corresponding filters applied
+  const allVariablesFiltered = dashboardVariables.every(variable =>
+    filters.some(filter => filter.variableName === variable.variableName)
+  );
+
+  return allVariablesFiltered;
+}
+
+type SolidDashboardViewProps = {
+  moduleName: string;
+  dashboardName?: string;
+};
+
+const SolidDashboard = (params: SolidDashboardViewProps) => {
+  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
+  // TODO [HP]: This is fully CONFUSED
+  // const [layoutOption, setLayoutOption] = useState<SolidDashboardBodyProps>({
+  //   filters: [],
+  //   questions: [],
+  // });
+
+  // TODO [HP]: replace dashboardVariableFilterRules with filters everywhere...
+  // const [dashboardVariableFilterRules, setDashboardVariableFilterRules] = useState<ISolidDashboardVariableFilterRule[]>([]);
+  const dispatch = useDispatch();
+
+  const visibleNavbar = useSelector((state: any) => state.navbarState?.visibleNavbar);
+  const [filters, setFilters] = useState<SqlExpression[]>([]);
+  const [questions, setQuestions] = useState<any[]>([]);
+  const [dashboardVariables, setDashboardVariables] = useState<DashboardVariableRecord[]>([]);
+  const [isDashboardFilterVisible, setIsDashboardFilterVisible] = useState(false);
+
+  const [upsertDashboardLayout] = 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) {
+        dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.LAYOUT, detail: ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_SUCCESSFULLY }));
+      }
+    } catch (error) {
+      dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.LAYOUT, detail: ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_FAILED }));
+    }
+  }
+
+  useEffect(() => {
+    // Invoke the dashboard api to fetch the dashboard data
+    // console.log('Dashboard Data testing:', isLoading, data, error);
+    if (!isLoading && data) {
+      // Assuming data contains the layout options
+      handleDashboardData(data, setDashboardVariables, setQuestions);
+    }
+  }, [isLoading, data]);
+
+  const toggleBothSidebars = () => {
+    if (visibleNavbar) {
+      dispatch(toggleNavbar());   // close both
+    } else {
+      dispatch(showNavbar());     // open both
+    }
+  };
+
+
+
+  return (
+    <div className={`h-screen surface-0 flex`}>
+
+      <div className={`h-full flex-grow-1 ${styles.SolidDashboardPageContentWrapper}`}>
+        {isLoading && <SolidDashboardLoading />}
+        {error && <SolidDashboardRenderError />}
+        {!isLoading && !error && data && data.records.length === 0 && (
+          <SolidDashboardNotAvailable />
+        )}
+        {!isLoading && !error && data && data.records.length > 0 && (
+          <>
+            <div className="page-header" style={{ borderBottom: '1px solid var(--primary-light-color)' }}>
+              <div className='flex align-items-center gap-2'>
+                <div className="apps-icon block md:hidden cursor-pointer" onClick={toggleBothSidebars}>
+                  <SolidIcon name="si-th-large" aria-hidden />
+                </div>
+                <p className={`view-title solid-text-wrapper flex align-items-center gap-1 ${styles.SolidDashboardTitle}`}>
+                  {data?.records[0]?.displayName ? data?.records[0]?.displayName : data?.records[0]?.name}
+                  {data?.records[0]?.description && (
+                    <SolidTooltip>
+                      <SolidTooltipTrigger asChild>
+                        <SolidIcon name="si-info-circle" className="solid-field-tooltip-icon" aria-hidden />
+                      </SolidTooltipTrigger>
+                      <SolidTooltipContent side="right">{data?.records[0]?.description}</SolidTooltipContent>
+                    </SolidTooltip>
+                  )}
+                </p>
+              </div>
+              {dashboardVariables && dashboardVariables.length > 0 && (
+                <>
+                  <div className='flex gap-2'>
+                    <SolidButton
+                      type="button"
+                      icon={filters.length > 0 ? "si si-filter-fill" : "si si-filter"}
+                      className="lg:hidden solid-icon-button"
+                      size='sm'
+                      variant='secondary'
+                      onClick={() => setIsDashboardFilterVisible(true)}
+                    />
+
+                    <SolidButton
+                      type="button"
+                      icon={filters.length > 0 ? "si si-filter-fill" : "si si-filter"}
+                      label={"Filter"}
+                      className="hidden lg:inline-flex"
+                      size='sm'
+                      variant='secondary'
+                      onClick={() => setIsDashboardFilterVisible(true)}
+                    />
+                    {filters.length > 0 && (
+                      <SolidButton
+                        type="button"
+                        size="sm"
+                        icon="si si-filter-slash"
+                        severity="secondary"
+                        className="solid-icon-button "
+                        outlined
+                        onClick={() => { setFilters([]); setIsDashboardFilterVisible(false); }}
+                      />
+                    )}
+                    <SolidButton
+                      type="button"
+                      size="sm"
+                      icon="si si-save"
+                      severity="secondary"
+                      className="solid-icon-button "
+                      outlined
+                      onClick={() => updateUserDashboardLayout()} />
+                  </div>
+                  <DashboardFilter
+                    dashboardVariables={dashboardVariables}
+                    initialFilters={filters}
+                    onApply={setFilters}
+                    visible={isDashboardFilterVisible}
+                    onHide={() => setIsDashboardFilterVisible(false)}
+                  />
+                </>
+              )}
+            </div>
+            {!isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardFilterRequired />}
+            {isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardBody dashboardId={data?.records[0]?.id} questions={questions} filters={filters} dashboardLayout={dashboardLayout} setDashboardLayout={setDashboardLayout} />}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default SolidDashboard;

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

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

@@ -0,0 +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;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,4CA+GjI,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,162 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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)) {
+            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, Fragment as _Fragment } from "react/jsx-runtime";
+import 'gridstack/dist/gridstack.min.css';
+import styles from './SolidDashboard.module.css';
+import { SolidQuestionRenderer } from './SolidQuestionRenderer';
+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 { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { useDispatch } from 'react-redux';
+import { showToast } from '../../../redux/features/toastSlice';
+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) {
+    var dashboardId = _a.dashboardId, questions = _a.questions, _b = _a.filters, filters = _b === void 0 ? [] : _b, dashboardLayout = _a.dashboardLayout, setDashboardLayout = _a.setDashboardLayout;
+    var dispatch = useDispatch();
+    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) {
+                            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 }));
+                        }
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        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]);
+    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 (_jsx(_Fragment, { children: _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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboardBody.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,eAAe,EAAE,EAAE,iBAAiB,EAAsB,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,+CAA+C,EAAE,MAAM,uCAAuC,CAAC;AACxG,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAyB/D,IAAM,qBAAqB,GAAG,UAAC,SAAgB;IAC7C,OAAO,SAAS,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,KAAK;QAC5B,IAAM,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC;QACtB,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAClC,OAAO;YACL,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YACjB,CAAC,EAAE,GAAG,GAAG,CAAC;YACV,CAAC,EAAE,GAAG,GAAG,CAAC;YACV,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAGF,IAAM,kBAAkB,GAAG,UAAC,EAAsG;QAApG,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,eAAe,qBAAA,EAAE,kBAAkB,wBAAA;IACrG,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAM,eAAe,GAAG,kBAAI,SAAS,QAClC,GAAG,CAAC,UAAC,CAAC,EAAE,KAAK,IAAK,OAAA,uBAAM,CAAC,KAAE,YAAY,EAAE,KAAK,GAAG,CAAC,IAAG,EAAnC,CAAmC,CAAC;SACtD,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,gBAAK,OAAA,CAAC,MAAA,CAAC,CAAC,cAAc,mCAAI,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,cAAc,mCAAI,CAAC,CAAC,YAAY,CAAC,CAAA,EAAA,CAAC,CAAC;IAEzF,IAAA,KAAmC,iBAAiB,EAAE,EAApD,KAAK,WAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAwB,CAAC;IAC7D,IAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAA,KACJ,+CAA+C,EAAE,EAD5C,eAAe,QAAA,EAAE,UAA8C,EAAtC,cAAc,UAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eACjB,CAAC;IAEpD,SAAS,CAAC;QACR,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACnD,IAAM,UAAU,GAAG;;;;;;;wBAEE,qBAAM,eAAe,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE,EAAA;;wBAAtD,QAAQ,GAAG,SAA2C;wBACtD,GAAG,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,MAAM,CAAC;wBAC7B,gBAAc,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;wBAE9D,MAAM,GAAG,aAAW;4BACxB,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,UAAC,CAAC;gCACtB,IAAM,KAAK,GAAI,aAA0B,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,EAAtB,CAAsB,CAAC,CAAC;gCAC5E,OAAO,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;4BAChD,CAAC,CAAC;4BACF,CAAC,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;wBAE3C,kBAAkB,CAAC,MAAM,CAAC,CAAC;wBAC3B,UAAU,CAAC,cAAQ,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;;;;wBAEzD,IAAI,OAAK,CAAC,MAAM,KAAK,GAAG,EAAE;4BACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;yBAC3I;6BAAM;4BACL,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;yBAC7H;;;;;aAEJ,CAAC;QAEF,UAAU,EAAE,CAAC;IACf,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAG7B,oBAAoB;IACpB,wCAAwC;IACxC,oCAAoC;IACpC,gEAAgE;IAChE,4EAA4E;IAC5E,8DAA8D;IAC9D,mBAAmB;IAGnB,IAAM,kBAAkB,GAAG,UAAC,SAAiB;QAC3C,IAAI,CAAC,aAAa,CAAC,OAAO;YAAE,OAAO;QAEnC,mEAAmE;QACnE,IAAM,WAAW,GAAG,SAAoC,CAAC;QAEzD,IAAM,OAAO,GAAe,WAAW,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CAAC;YACnD,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,CAAC;SACV,CAAC,EANkD,CAMlD,CAAC,CAAC;QAEJ,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC5B,yCAAyC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACL,4BACE,cACE,GAAG,EAAE,YAA+C,EACpD,SAAS,EAAE,cAAO,MAAM,CAAC,4BAA4B,CAAE,EACvD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,YAGxD,OAAO,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE;oBACV,IAAI,EAAE,EAAE;oBACR,SAAS,EAAE,GAAG;iBACf,EACD,UAAU,EAAE;oBACV,MAAM,EAAE,cAAc;iBACvB,EACD,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd,EACD,cAAc,EAAE,kBAAkB,YAEjC,eAAe,CAAC,GAAG,CAAC,UAAC,QAAa,IAAK,OAAA,CACtC,cAAiC,SAAS,EAAC,4DAA4D,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,YAI9I,QAAQ,CAAC,YAAY,KAAK,iBAAiB,CAAC,CAAC,CAAC,CAC7C,KAAC,qBAAqB,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAChE,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,GAAI,CAClF,IARO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CASzB,CACP,EAXuC,CAWvC,CAAC,GACc,CACnB,GACG,GACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","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 { ERROR_MESSAGES } from '../../../constants/error-messages';\nimport { useDispatch } from 'react-redux';\nimport { showToast } from '../../../redux/features/toastSlice';\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 dispatch = useDispatch();\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          dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.FORBIDDEN_ERROR, detail: ERROR_MESSAGES.FORBIDDEN_ERROR, sticky: true }));\n        } else {\n          dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.SOMETHING_WRONG, detail: 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      <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;\n"]}