@solidxai/core-ui 0.0.1

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

@@ -0,0 +1,332 @@
+
+import { DashboardResponse, useGetDashboardQuery } from '../../../redux/api/dashboardApi';
+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 { SolidXAIIcon } from '../solid-ai/SolidXAIIcon';
+import styles from './SolidDashboard.module.css';
+import SolidDashboardBody from './SolidDashboardBody';
+import SolidDashboardVariable from './SolidDashboardVariable';
+import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';
+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 { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from '../../../redux/api/solidSettingsApi';
+
+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, dashboardId?: number, dashboardName?: string) {
+  const filters: any = {
+    module: {
+      name: {
+        $eq: moduleName
+      }
+    }
+  };
+
+  if (dashboardId !== undefined) {
+    filters.id = { $eq: dashboardId };
+  } else if (dashboardName !== undefined) {
+    filters.name = { $eq: 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;
+  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
+  // 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 [isOpenSolidXAiPanel, setIsOpenSolidXAiPanel] = useState(false);
+  const [chatterWidth, setChatterWidth] = useState(380);
+  const [isResizing, setIsResizing] = useState(false);
+  const [questions, setQuestions] = useState<any[]>([]);
+  const [dashboardVariables, setDashboardVariables] = useState<DashboardVariableRecord[]>([]);
+
+
+  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]);
+
+  useEffect(() => {
+    const storedOpen = localStorage.getItem('d_solidxai_open');
+    const storedWidth = localStorage.getItem('d_solidxai_width');
+
+    if (storedOpen !== null) {
+      setIsOpenSolidXAiPanel(storedOpen === 'true');
+    }
+
+    if (storedWidth !== null) {
+      const width = parseInt(storedWidth, 10);
+      if (!isNaN(width)) {
+        setChatterWidth(width);
+      }
+    }
+  }, []);
+
+
+  useEffect(() => {
+    if (isResizing) {
+      const handleMouseMove = (e: MouseEvent) => {
+        const newWidth = window.innerWidth - e.clientX;
+        const clampedWidth = Math.max(280, Math.min(newWidth, 700));
+        setChatterWidth(clampedWidth);
+        localStorage.setItem('d_solidxai_width', clampedWidth.toString());
+      };
+
+      const handleMouseUp = () => {
+        setIsResizing(false);
+      };
+
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isResizing]);
+
+
+  const handleOpen = () => {
+    setIsOpenSolidXAiPanel(true);
+    localStorage.setItem('d_solidxai_open', 'true');
+  };
+
+  const handleClose = () => {
+    setIsOpenSolidXAiPanel(false);
+    localStorage.setItem('d_solidxai_open', 'false');
+  };
+
+  const toggleBothSidebars = () => {
+    if (visibleNavbar) {
+      dispatch(toggleNavbar());   // close both
+    } else {
+      dispatch(showNavbar());     // open both
+    }
+  };
+
+
+
+  const [mcpUrl, setMcpUrl] = useState<string | null>(null);
+  const [getMcpUrl] = useLazyGetMcpUrlQuery();
+
+  const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();
+  useEffect(() => {
+    trigger("") // Fetch settings on mount
+  }, [])
+
+  useEffect(() => {
+    if (solidSettingsData?.data?.mcpEnabled && solidSettingsData?.data?.mcpServerUrl) {
+      enableSolidXAiPanel();
+    }
+  }, [solidSettingsData]);
+
+  const enableSolidXAiPanel = async () => {
+    try {
+      const queryData = {
+        showHeader: "true",
+        inListView: "true"
+      };
+      const queryString = qs.stringify({ ...queryData }, { encodeValuesOnly: true });
+      const response = await getMcpUrl(queryString).unwrap();
+      console.log("response", response);
+      if (response && response?.data?.mcpUrl) {
+        setMcpUrl(response?.data?.mcpUrl);
+      }
+    } catch (error) {
+
+    }
+  }
+
+
+  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}>
+                  <i className="pi pi-th-large"></i>
+                </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 &&
+                    <>
+                      <Tooltip className='solid-field-tooltip' target=".solid-field-tooltip-icon" />
+                      <i className="pi pi-info-circle solid-field-tooltip-icon"
+                        data-pr-tooltip={data?.records[0]?.description}
+                        data-pr-position={'right'}
+                      />
+                    </>
+                  }
+                </p>
+              </div>
+              {dashboardVariables && dashboardVariables.length > 0 && <SolidDashboardVariable dashboardVariables={dashboardVariables} filters={filters} setFilters={setFilters} />}
+            </div>
+            {!isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardFilterRequired />}
+            {isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardBody questions={questions} filters={filters} />}
+          </>
+        )}
+      </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>
+              <Button
+                icon="pi pi-chevron-left"
+                size="small"
+                className="px-0"
+                style={{ width: 30 }}
+                onClick={handleOpen}
+              />
+            </div>
+            :
+            <SolidAiMainWrapper mcpUrl={mcpUrl} />
+          }
+        </div>
+      )}
+
+    </div>
+  );
+}
+
+export default SolidDashboard;

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

@@ -0,0 +1,12 @@
+import 'gridstack/dist/gridstack.min.css';
+import { GridStackOptions, GridStackWidget } from 'gridstack';
+import { SqlExpression } from '../../../types/solid-core';
+export interface SolidDashboardBodyProps {
+    dashboardOptions?: GridStackOptions;
+    widgetOptions?: GridStackWidget[];
+    questions: any[];
+    filters: SqlExpression[];
+}
+declare const SolidDashboardBody: ({ questions, filters }: 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;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"}

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

@@ -0,0 +1,76 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } 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';
+var SolidDashboardBody = function (_a) {
+    // const gridRef = useRef<HTMLDivElement>(null);
+    var questions = _a.questions, _b = _a.filters, filters = _b === void 0 ? [] : _b;
+    // 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));
+                })] }) }));
+};
+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":"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"}

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

@@ -0,0 +1,117 @@
+
+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 PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
+import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
+import qs from 'qs';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+export interface SolidDashboardBodyProps {
+  dashboardOptions?: GridStackOptions;
+  widgetOptions?: GridStackWidget[];
+  // Replace `any` with a proper `Question` type when available
+  questions: any[];
+  filters: SqlExpression[];
+}
+
+const SolidDashboardBody = ({ questions, filters = [] }: SolidDashboardBodyProps) => {
+  // const gridRef = useRef<HTMLDivElement>(null);
+
+  // 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
+  const questionsWithDefaultIndex = questions.map((q, index) => ({
+    ...q,
+    defaultIndex: index + 1,
+  }));
+
+
+  const sortedQuestions = [...questionsWithDefaultIndex].sort((a, b) => {
+    const aSeq = a.sequenceNumber ?? a.defaultIndex;
+    const bSeq = b.sequenceNumber ?? b.defaultIndex;
+    return aSeq - bSeq;
+  });
+
+
+  return (
+    <div className={`p-4 overflow-y-auto ${styles.SolidDashboardContentWrapper}`}>
+      {/* <div className="grid-stack" ref={gridRef}></div> */}
+      <div className='grid'>
+        {/* {questions && questions.map((question: any) => {
+          return (
+            <div className='col-4 p-3'>
+              <SolidQuestionRenderer question={question} filters={filters} key={question.id} isPreview={false} />
+            </div>
+          )
+        })} */}
+        {sortedQuestions
+          .filter((question: any) => question.visualisedAs !== 'prime-datatable')
+          .map((question: any) => (
+            <div className="col-4 p-3" key={question.id}>
+              <SolidQuestionRenderer
+                question={question}
+                filters={filters}
+                isPreview={false}
+              />
+            </div>
+          ))}
+
+        {sortedQuestions
+          .filter((question: any) => question.visualisedAs === 'prime-datatable')
+          .map((question: any) => {
+            const queryParams = qs.stringify({ isPreview: false, filters }, { arrayFormat: 'brackets' });
+
+            const { data: questionData, isLoading } = useGetDashboardQuestionDataByIdQuery({
+              id: question.id,
+              qs: queryParams,
+            });
+
+            if (isLoading) return <ProgressSpinner />;
+            const textAlign = question?.textAlign ?? 'start'
+
+            return (
+              <div className="col-12 p-3" key={question.id}>
+                <div className={`${styles.SolidChartCardWrapper} p-4`} style={{ maxHeight: '40vh', overflowY: 'scroll' }}>
+                  <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>
+                  <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>
+                  <div className='mt-3'>
+
+                    <PrimeReactDatatableRenderer
+                      options={JSON.parse(question?.chartOptions)}
+                      visualizationData={questionData?.data?.visualizationData}
+                    />
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+      </div>
+    </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,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(--blue-50)',
+                        color: 'var(--blue-500)'
+                    }, children: _jsx("i", { className: "pi pi-filter", style: { color: "var(--primary-color)", fontSize: '2.5rem' } }) }), _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":";AACA,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,gBAAgB;wBACjC,KAAK,EAAE,iBAAiB;qBACzB,YAED,YAAG,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAI,GACxF,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"}

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

@@ -0,0 +1,28 @@
+
+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(--blue-50)',
+            color: 'var(--blue-500)'
+          }}
+        >
+          <i className="pi pi-filter" style={{ color: "var(--primary-color)", fontSize: '2.5rem' }} />
+        </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"}

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":"AAGA,eAAO,MAAM,qBAAqB,+CAmDjC,CAAA"}

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

@@ -0,0 +1,7 @@
+"use client'";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from 'primereact/skeleton';
+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(Skeleton, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(Skeleton, { 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(Skeleton, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(Skeleton, { 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(Skeleton, { width: "40%", height: "1.4rem", className: "mb-2" }), _jsx(Skeleton, { 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(Skeleton, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(Skeleton, { 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(Skeleton, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(Skeleton, { width: "100%", height: "14rem" })] }) }), _jsx("div", { className: "col-12", children: _jsxs("div", { className: "surface-card p-3 border-round shadow-1", children: [_jsx(Skeleton, { width: "30%", height: "1.4rem", className: "mb-3" }), _jsx(Skeleton, { width: "100%", height: "16rem" })] }) })] }));
+};
+//# sourceMappingURL=SolidDashboardLoading.js.map