@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/common/SolidXAiIframe.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef, useState } from "react";
+
+interface SolidXAiIframeProps {
+  url: string;
+}
+
+export const SolidXAiIframe: React.FC<SolidXAiIframeProps> = ({ url }) => {
+  const [reachable, setReachable] = useState<boolean | null>(null);
+
+
+  useEffect(() => {
+  const handler = (event:any) => {
+    if (event.data?.action === "REFRESH_PARENT") {
+      window.location.reload();
+    }
+  };
+
+  window.addEventListener("message", handler);
+  return () => window.removeEventListener("message", handler);
+}, []);
+
+
+
+  useEffect(() => {
+    const checkServer = async () => {
+      try {
+        // Try to fetch the page HEAD (fast, no content)
+        const res = await fetch(url, { method: "HEAD" });
+
+        if (res.ok) {
+          setReachable(true);
+        } else {
+          setReachable(false);
+        }
+      } catch (err) {
+        setReachable(false);
+      }
+    };
+
+    checkServer();
+  }, [url]);
+
+  // Loading state
+  if (reachable === null) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-600">
+        Checking SolidX AI server...
+      </div>
+    );
+  }
+
+  // Error state
+  if (reachable === false) {
+    return (
+      <div className="flex  items-center justify-center align-items-center h-full text-center p-4 overflow-x-auto	">
+        <h3>Mcp Server not reachable. <br></br>
+          <span className="opacity-60 mt-2">
+            <strong>{url}</strong>
+          </span>
+        </h3>
+      </div>
+    );
+  }
+  // SUCCESS → load iframe
+  return (
+    <iframe
+      src={url}
+      style={{
+        width: "100%",
+        height: "100%",
+        border: "none",
+      }}
+      allow="clipboard-write; clipboard-read"
+      title="SolidX AI JSON Viewer"
+    />
+  );
+};

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

@@ -0,0 +1,332 @@
+"use client";
+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.tsx

@@ -0,0 +1,117 @@
+'use client';
+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.tsx

@@ -0,0 +1,28 @@
+"use client";
+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.tsx

@@ -0,0 +1,10 @@
+"use client";
+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.tsx

@@ -0,0 +1,55 @@
+"use client'"
+import { Skeleton } from 'primereact/skeleton'
+
+export const SolidDashboardLoading = () => {
+    return (
+        <div className="grid p-4">
+
+            {/* ROW 1 — Responsive KPI Cards */}
+            <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
+                <div className="surface-card p-3 border-round shadow-1">
+                    <Skeleton width="40%" height="1.4rem" className="mb-2" />
+                    <Skeleton width="70%" height="2rem" />
+                </div>
+            </div>
+
+            <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
+                <div className="surface-card p-3 border-round shadow-1">
+                    <Skeleton width="40%" height="1.4rem" className="mb-2" />
+                    <Skeleton width="70%" height="2rem" />
+                </div>
+            </div>
+
+            <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
+                <div className="surface-card p-3 border-round shadow-1">
+                    <Skeleton width="40%" height="1.4rem" className="mb-2" />
+                    <Skeleton width="70%" height="2rem" />
+                </div>
+            </div>
+
+            {/* ROW 2 — Responsive Charts: 2 cards on desktop, but collapses */}
+            <div className="col-12 sm:col-12 md:col-6 lg:col-6 xl:col-4">
+                <div className="surface-card p-3 border-round shadow-1">
+                    <Skeleton width="30%" height="1.4rem" className="mb-3" />
+                    <Skeleton width="100%" height="14rem" />
+                </div>
+            </div>
+
+            <div className="col-12 sm:col-12 md:col-12 lg:col-12 xl:col-8">
+                <div className="surface-card p-3 border-round shadow-1">
+                    <Skeleton width="30%" height="1.4rem" className="mb-3" />
+                    <Skeleton width="100%" height="14rem" />
+                </div>
+            </div>
+
+            {/* ROW 3 — Full width always */}
+            <div className="col-12">
+                <div className="surface-card p-3 border-round shadow-1">
+                    <Skeleton width="30%" height="1.4rem" className="mb-3" />
+                    <Skeleton width="100%" height="16rem" />
+                </div>
+            </div>
+
+        </div>
+    )
+}

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

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

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

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