@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

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

@@ -1,14 +1,14 @@
 
 import { SqlExpression } from "../../../types/solid-core";
-import { AutoComplete, AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Calendar } from "primereact/calendar";
-import { Nullable } from "primereact/ts-helpers";
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import styles from './SolidDashboard.module.css';
 import { useGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
-import { ProgressSpinner } from "primereact/progressspinner";
 import { DashboardVariableRecord } from "./SolidDashboard";
-import { Button } from "primereact/button";
+import { SolidAutocomplete, SolidButton, SolidDatePicker, SolidIcon, SolidSpinner } from "../../shad-cn-ui";
+
+type Nullable<T> = T | null;
+type AutoCompleteChangeEvent = { value: any };
+type AutoCompleteCompleteEvent = { query: string };
 
 
 export interface DashboardVariableFilterProps {
@@ -17,17 +17,19 @@ export interface DashboardVariableFilterProps {
   dashboardVariable: DashboardVariableRecord;
 }
 
+type DateRange = [Date | null, Date | null] | null;
+
 export const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
   // Initialize the default dates state
   // If the dashboardVariable has a defaultOperator as Between and a defaultValue as two dates, we can set those as the initial values, otherwise null
   const defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue
   const defaultDatesArray = JSON.parse(defaultDatesString || '[]');
   // Map the defaultDatesArray to Date objects
-  const defaultDates: Nullable<(Date | null)[]> = defaultDatesArray.length === 2 ? [
+  const defaultDates: DateRange = defaultDatesArray.length === 2 ? [
     new Date(defaultDatesArray[0]),
     new Date(defaultDatesArray[1])
   ] : null;
-  const [dates, setDates] = useState<Nullable<(Date | null)[]>>(defaultDates);
+  const [dates, setDates] = useState<DateRange>(defaultDates);
 
   useEffect(() => {
     setDates(null);  // reset UI
@@ -35,32 +37,37 @@ export const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps>
   
   return (
     <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>
-      <Calendar value={dates} onChange={(e) => {
-        console.log(`Calendar changed values are: `);
-        console.log(e.value);
-        const newDates = e.value as Date[] | null;
-        setDates(newDates);
+      <SolidDatePicker
+        selectsRange
+        startDate={dates ? dates[0] : null}
+        endDate={dates ? dates[1] : null}
+        onChange={(next: [Date | null, Date | null] | null) => {
+          const newDates = next;
+          setDates(newDates);
 
-        if (newDates && newDates.length === 2 && newDates[0] && newDates[1]) {
-          const filter: SqlExpression = {
-            variableName: dashboardVariable.variableName,
-            // @ts-ignore
-            operator: '$between',
-            value: [
+          if (newDates && newDates[0] && newDates[1]) {
+            const filter: SqlExpression = {
+              variableName: dashboardVariable.variableName,
+              // @ts-ignore
+              operator: '$between',
+              value: [
               newDates[0].toISOString().split('T')[0],
               newDates[1].toISOString().split('T')[0]
             ]
-          };
-          setFilters(prev => {
-            // Remove any existing dashboardDate filter and replace with the new one
-            // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
-            return [filter];
-          });
-        }
+            };
+            setFilters(prev => {
+              // Remove any existing dashboardDate filter and replace with the new one
+              // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
+              return [filter];
+            });
+          }
 
-      }} selectionMode="range" readOnlyInput hideOnRangeSelection inputStyle={{ height: 36.38 }} className={styles.SolidDashboardDateRangeFilter} />
+        }}
+        className={styles.SolidDashboardDateRangeFilter}
+        inputClassName="h-3rem w-full"
+      />
       <div className="px-2">
-        <i className="pi pi-calendar opacity-50"></i>
+        <SolidIcon name="si-calendar" className="opacity-50" aria-hidden />
       </div>
     </div>
   )
@@ -120,16 +127,14 @@ export const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariable
 
   return (
     <>
-      {isLoading && <ProgressSpinner></ProgressSpinner>}
+      {isLoading && <SolidSpinner />}
       {isError && <div>Error loading values</div>}
       {!isLoading && !isError &&
-        <AutoComplete
+        <SolidAutocomplete
           value={selectionDynamicValues}
           suggestions={filteredItems}
           completeMethod={searchDynamic}
           onChange={(e: AutoCompleteChangeEvent) => {
-            console.log('AutoComplete changed values are:');
-            console.log(e);
             setSelectionDynamicValues(e.value)
           }}
           multiple
@@ -195,7 +200,7 @@ export const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableF
   }, [clearSignal]);
 
   return (
-    <AutoComplete
+    <SolidAutocomplete
       value={selectionStaticValues}
       suggestions={filteredStaticItems}
       completeMethod={searchStatic}
@@ -240,12 +245,11 @@ const SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboa
     <div className="flex align-items-center gap-3">
       {dashboardVariableComponents}
       {filters.length > 0 && (
-        <Button
+        <SolidButton
           onClick={clearAllFilters}
-          size="small"
+          size="sm"
           outlined
-          // severity="info"
-          icon="pi pi-filter-slash"
+          icon="si si-filter-slash"
         />
       )}
     </div>
@@ -253,4 +257,3 @@ const SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboa
 }
 
 export default SolidDashboardVariable;
-

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

@@ -1 +1 @@
-{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAS1D,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,qBAAqB,qCAAmD,0BAA0B,4CAwD9G,CAAA"}
+{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAO1D,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,qBAAqB,qCAAmD,0BAA0B,4CA4E9G,CAAA"}

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

@@ -1,21 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
-import { Message } from 'primereact/message';
-import { MeterGroup } from 'primereact/metergroup';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import { SolidMessage, SolidSpinner } from '../../shad-cn-ui';
 import qs from 'qs';
 import { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';
 import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
 import styles from './SolidDashboard.module.css';
 export var SolidQuestionRenderer = function (_a) {
-    var _b, _c, _d, _e;
-    var question = _a.question, _f = _a.filters, filters = _f === void 0 ? [] : _f, _g = _a.isPreview, isPreview = _g === void 0 ? false : _g;
+    var _b;
+    var question = _a.question, _c = _a.filters, filters = _c === void 0 ? [] : _c, _d = _a.isPreview, isPreview = _d === void 0 ? false : _d;
     if (!question) {
-        return (_jsx("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), children: _jsx(Message, { text: "Preview Unavailable" }) }));
+        return (_jsx("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), children: _jsx(SolidMessage, { text: "Preview Unavailable" }) }));
     }
     var textAlign = (_b = question === null || question === void 0 ? void 0 : question.textAlign) !== null && _b !== void 0 ? _b : 'start';
     if (!question) {
-        return (_jsx(_Fragment, { children: _jsx(Message, { text: "Preview Unavailable" }) }));
+        return (_jsx(SolidMessage, { text: "Preview Unavailable" }));
     }
     // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);
     // load the question data.
@@ -23,7 +21,7 @@ export var SolidQuestionRenderer = function (_a) {
         isPreview: isPreview,
         filters: filters,
     });
-    var _h = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams }), questionData = _h.data, questionDataIsLoading = _h.isLoading, questionDataError = _h.error;
+    var _e = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams }), questionData = _e.data, questionDataIsLoading = _e.isLoading, questionDataError = _e.error;
     // console.log(`Question data: `); console.log(questionData);
     // console.log(`Question data is loading: `); console.log(questionDataIsLoading);
     // console.log(`Question data error: `); console.log(questionDataError);
@@ -31,7 +29,14 @@ export var SolidQuestionRenderer = function (_a) {
     // const kpi = questionData.data.kpi;
     // const visualizationData = questionData.data.visualizationData;
     // const visualizedAs = question.data.visualisedAs;
-    return (_jsxs(_Fragment, { children: [questionDataIsLoading && _jsx(ProgressSpinner, {}), !questionDataIsLoading &&
-                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " h-full"), children: [_jsxs("div", { className: 'flex flex-col p-4 pb-3', style: { borderBottom: "1px solid #e4e3e3" }, 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 })] }), _jsxs("div", { className: 'mt-3 flex-1 min-h-0 p-4 pt-2', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && _jsx(MeterGroup, { values: questionData.data.visualizationData.dataset, max: (_e = (_d = (_c = questionData === null || questionData === void 0 ? void 0 : questionData.data) === null || _c === void 0 ? void 0 : _c.visualizationData) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.reduce(function (total, item) { return total + item.value; }, 0) }), question.visualisedAs === 'prime-datatable' && _jsx(PrimeReactDatatableRenderer, { options: options, visualizationData: questionData.data.visualizationData })] })] })] }));
+    return (_jsxs(_Fragment, { children: [questionDataIsLoading && _jsx(SolidSpinner, {}), !questionDataIsLoading &&
+                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " h-full"), children: [_jsxs("div", { className: 'flex flex-col p-4 pb-3', style: { borderBottom: "1px solid #e4e3e3" }, 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 })] }), _jsxs("div", { className: 'mt-3 flex-1 min-h-0 p-4 pt-2', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && (function () {
+                                    var dataset = questionData.data.visualizationData.dataset;
+                                    var total = dataset.reduce(function (sum, it) { return sum + it.value; }, 0) || 1;
+                                    return (_jsx("div", { className: "solid-meter-group", children: dataset.map(function (item, idx) {
+                                            var percentage = Math.round((item.value / total) * 100);
+                                            return (_jsxs("div", { className: "solid-meter-group-row", children: [_jsx("span", { className: "solid-meter-group-label", children: item.label }), _jsx("div", { className: "solid-meter-group-bar", children: _jsx("div", { className: "solid-meter-group-bar-fill", style: { width: "".concat(percentage, "%"), backgroundColor: item.color || 'var(--solid-surface-accent)' } }) }), _jsxs("span", { className: "solid-meter-group-value", children: [percentage, "%"] })] }, "".concat(item.label, "-").concat(idx)));
+                                        }) }));
+                                })(), question.visualisedAs === 'prime-datatable' && _jsx(PrimeReactDatatableRenderer, { options: options, visualizationData: questionData.data.visualizationData })] })] })] }));
 };
 //# sourceMappingURL=SolidQuestionRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidQuestionRenderer.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oCAAoC,EAAE,MAAM,yCAAyC,CAAC;AAE/F,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,2BAA2B,MAAM,+CAA+C,CAAC;AACxF,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAcjD,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,EAAyE;;QAAvE,QAAQ,cAAA,EAAE,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA;IAC7E,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO,CACH,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,qBAAqB,SAAM,YACjD,KAAC,OAAO,IAAC,IAAI,EAAC,qBAAqB,GAAG,GACpC,CACT,CAAC;KACL;IAED,IAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,OAAO,CAAA;IAChD,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO,CACH,4BACI,KAAC,OAAO,IAAC,IAAI,EAAC,qBAAqB,GAAG,GACvC,CACN,CAAA;KACJ;IACD,+EAA+E;IAE/E,0BAA0B;IAC1B,IAAM,WAAW,GAAG,EAAE,CAAC,SAAS,CAC5B;QACI,SAAS,WAAA;QACT,OAAO,SAAA;KACV,CAGJ,CAAC;IACI,IAAA,KAAqF,oCAAoC,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAvJ,YAAY,UAAA,EAAa,qBAAqB,eAAA,EAAS,iBAAiB,WAA+E,CAAC;IAGtK,6DAA6D;IAC7D,iFAAiF;IACjF,wEAAwE;IACxE,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,CAAC,CAAC;IACnD,qCAAqC;IACrC,iEAAiE;IACjE,mDAAmD;IACnD,OAAO,CACH,8BACK,qBAAqB,IAAI,KAAC,eAAe,KAAG,EAC5C,CAAC,qBAAqB;gBACnB,eAAK,SAAS,EAAE,UAAG,MAAM,CAAC,qBAAqB,YAAS,aACpD,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,mBAAmB,EAAE,aAChF,cAAK,SAAS,EAAE,2BAAoB,SAAS,cAAI,MAAM,CAAC,eAAe,CAAE,YAAG,QAAQ,CAAC,IAAI,GAAO,EAChG,cAAK,SAAS,EAAE,uCAAgC,SAAS,cAAI,MAAM,CAAC,eAAe,CAAE,YAAG,YAAY,CAAC,IAAI,CAAC,GAAG,GAAO,IAClH,EACN,eAAK,SAAS,EAAC,8BAA8B,aACxC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,KAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,EAAE,QAAQ,CAAC,YAAY,GAAI,EAC5L,QAAQ,CAAC,YAAY,KAAK,mBAAmB,IAAI,KAAC,UAAU,IAAC,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,GAAG,EAAE,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,iBAAiB,0CAAE,OAAO,0CAAE,MAAM,CAAC,UAAC,KAAa,EAAE,IAAc,IAAK,OAAA,KAAK,GAAG,IAAI,CAAC,KAAK,EAAlB,CAAkB,EAAE,CAAC,CAAC,GAAI,EAC3O,QAAQ,CAAC,YAAY,KAAK,iBAAiB,IAAI,KAAC,2BAA2B,IAAC,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,CAAC,IAAI,CAAC,iBAAiB,GAAI,IACvJ,IACJ,IAEX,CACN,CAAA;AACL,CAAC,CAAA","sourcesContent":["\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport { SqlExpression } from '../../../types/solid-core';\nimport { Message } from 'primereact/message';\nimport { MeterGroup } from 'primereact/metergroup';\nimport { ProgressSpinner } from 'primereact/progressspinner';\nimport qs from 'qs';\nimport { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';\nimport PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';\nimport styles from './SolidDashboard.module.css';\n\ntype SolidQuestionRendererProps = {\n    question: any;\n    filters: SqlExpression[];\n    isPreview: boolean;\n};\n\ntype DataItem = {\n    value: number;\n    label?: string | HTMLElement;\n    color?: string;\n}\n\nexport const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }: SolidQuestionRendererProps) => {\n    if (!question) {\n        return (\n            <div className={`${styles.SolidChartCardWrapper} p-4`}>\n                <Message text=\"Preview Unavailable\" />\n            </div>\n        );\n    }\n\n    const textAlign = question?.textAlign ?? 'start'\n    if (!question) {\n        return (\n            <>\n                <Message text=\"Preview Unavailable\" />\n            </>\n        )\n    }\n    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);\n\n    // load the question data.\n    const queryParams = qs.stringify(\n        {\n            isPreview,\n            filters,\n        },\n        // ensures proper handling of arrays\n        // { arrayFormat: 'indices' }\n    );\n    const { data: questionData, isLoading: questionDataIsLoading, error: questionDataError } = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams });\n\n\n    // console.log(`Question data: `); console.log(questionData);\n    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);\n    // console.log(`Question data error: `); console.log(questionDataError);\n    const options = JSON.parse(question?.chartOptions);\n    // const kpi = questionData.data.kpi;\n    // const visualizationData = questionData.data.visualizationData;\n    // const visualizedAs = question.data.visualisedAs;\n    return (\n        <>\n            {questionDataIsLoading && <ProgressSpinner />}\n            {!questionDataIsLoading &&\n                <div className={`${styles.SolidChartCardWrapper} h-full`}>\n                    <div className='flex flex-col p-4 pb-3' style={{ borderBottom: \"1px solid #e4e3e3\" }}>\n                        <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>\n                        <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>\n                    </div>\n                    <div className='mt-3 flex-1 min-h-0 p-4 pt-2'>\n                        {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs} />}\n                        {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset} max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)} />}\n                        {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}\n                    </div>\n                </div>\n            }\n        </>\n    )\n}"]}
+{"version":3,"file":"SolidQuestionRenderer.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport type { ReactNode } from 'react';\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport { SqlExpression } from '../../../types/solid-core';\nimport { SolidMessage, SolidSpinner } from '../../shad-cn-ui';\nimport qs from 'qs';\nimport { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';\nimport PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';\nimport styles from './SolidDashboard.module.css';\n\ntype SolidQuestionRendererProps = {\n    question: any;\n    filters: SqlExpression[];\n    isPreview: boolean;\n};\n\ntype DataItem = {\n    value: number;\n    label?: string | ReactNode;\n    color?: string;\n}\n\nexport const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }: SolidQuestionRendererProps) => {\n    if (!question) {\n        return (\n            <div className={`${styles.SolidChartCardWrapper} p-4`}>\n                <SolidMessage text=\"Preview Unavailable\" />\n            </div>\n        );\n    }\n\n    const textAlign = question?.textAlign ?? 'start'\n    if (!question) {\n        return (\n            <SolidMessage text=\"Preview Unavailable\" />\n        )\n    }\n    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);\n\n    // load the question data.\n    const queryParams = qs.stringify(\n        {\n            isPreview,\n            filters,\n        },\n        // ensures proper handling of arrays\n        // { arrayFormat: 'indices' }\n    );\n    const { data: questionData, isLoading: questionDataIsLoading, error: questionDataError } = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams });\n\n\n    // console.log(`Question data: `); console.log(questionData);\n    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);\n    // console.log(`Question data error: `); console.log(questionDataError);\n    const options = JSON.parse(question?.chartOptions);\n    // const kpi = questionData.data.kpi;\n    // const visualizationData = questionData.data.visualizationData;\n    // const visualizedAs = question.data.visualisedAs;\n    return (\n        <>\n            {questionDataIsLoading && <SolidSpinner />}\n            {!questionDataIsLoading &&\n                <div className={`${styles.SolidChartCardWrapper} h-full`}>\n                    <div className='flex flex-col p-4 pb-3' style={{ borderBottom: \"1px solid #e4e3e3\" }}>\n                        <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>\n                        <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>\n                    </div>\n                    <div className='mt-3 flex-1 min-h-0 p-4 pt-2'>\n                        {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs} />}\n                        {question.visualisedAs === 'prime-meter-group' && (() => {\n                            const dataset: DataItem[] = questionData.data.visualizationData.dataset;\n                            const total = dataset.reduce((sum, it) => sum + it.value, 0) || 1;\n                            return (\n                                <div className=\"solid-meter-group\">\n                                    {dataset.map((item: DataItem, idx: number) => {\n                                        const percentage = Math.round((item.value / total) * 100);\n                                        return (\n                                            <div key={`${item.label}-${idx}`} className=\"solid-meter-group-row\">\n                                                <span className=\"solid-meter-group-label\">{item.label}</span>\n                                                <div className=\"solid-meter-group-bar\">\n                                                    <div\n                                                        className=\"solid-meter-group-bar-fill\"\n                                                        style={{ width: `${percentage}%`, backgroundColor: item.color || 'var(--solid-surface-accent)' }}\n                                                    />\n                                                </div>\n                                                <span className=\"solid-meter-group-value\">{percentage}%</span>\n                                            </div>\n                                        );\n                                    })}\n                                </div>\n                            );\n                        })()}\n                        {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}\n                    </div>\n                </div>\n            }\n        </>\n    )\n}\n"]}

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

@@ -1,9 +1,8 @@
 
+import type { ReactNode } from 'react';
 import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
 import { SqlExpression } from '../../../types/solid-core';
-import { Message } from 'primereact/message';
-import { MeterGroup } from 'primereact/metergroup';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import { SolidMessage, SolidSpinner } from '../../shad-cn-ui';
 import qs from 'qs';
 import { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';
 import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
@@ -17,7 +16,7 @@ type SolidQuestionRendererProps = {
 
 type DataItem = {
     value: number;
-    label?: string | HTMLElement;
+    label?: string | ReactNode;
     color?: string;
 }
 
@@ -25,7 +24,7 @@ export const SolidQuestionRenderer = ({ question, filters = [], isPreview = fals
     if (!question) {
         return (
             <div className={`${styles.SolidChartCardWrapper} p-4`}>
-                <Message text="Preview Unavailable" />
+                <SolidMessage text="Preview Unavailable" />
             </div>
         );
     }
@@ -33,9 +32,7 @@ export const SolidQuestionRenderer = ({ question, filters = [], isPreview = fals
     const textAlign = question?.textAlign ?? 'start'
     if (!question) {
         return (
-            <>
-                <Message text="Preview Unavailable" />
-            </>
+            <SolidMessage text="Preview Unavailable" />
         )
     }
     // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);
@@ -61,7 +58,7 @@ export const SolidQuestionRenderer = ({ question, filters = [], isPreview = fals
     // const visualizedAs = question.data.visualisedAs;
     return (
         <>
-            {questionDataIsLoading && <ProgressSpinner />}
+            {questionDataIsLoading && <SolidSpinner />}
             {!questionDataIsLoading &&
                 <div className={`${styles.SolidChartCardWrapper} h-full`}>
                     <div className='flex flex-col p-4 pb-3' style={{ borderBottom: "1px solid #e4e3e3" }}>
@@ -70,11 +67,33 @@ export const SolidQuestionRenderer = ({ question, filters = [], isPreview = fals
                     </div>
                     <div className='mt-3 flex-1 min-h-0 p-4 pt-2'>
                         {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs} />}
-                        {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset} max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)} />}
+                        {question.visualisedAs === 'prime-meter-group' && (() => {
+                            const dataset: DataItem[] = questionData.data.visualizationData.dataset;
+                            const total = dataset.reduce((sum, it) => sum + it.value, 0) || 1;
+                            return (
+                                <div className="solid-meter-group">
+                                    {dataset.map((item: DataItem, idx: number) => {
+                                        const percentage = Math.round((item.value / total) * 100);
+                                        return (
+                                            <div key={`${item.label}-${idx}`} className="solid-meter-group-row">
+                                                <span className="solid-meter-group-label">{item.label}</span>
+                                                <div className="solid-meter-group-bar">
+                                                    <div
+                                                        className="solid-meter-group-bar-fill"
+                                                        style={{ width: `${percentage}%`, backgroundColor: item.color || 'var(--solid-surface-accent)' }}
+                                                    />
+                                                </div>
+                                                <span className="solid-meter-group-value">{percentage}%</span>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            );
+                        })()}
                         {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}
                     </div>
                 </div>
             }
         </>
     )
-}
+}

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeReactDatatableRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":"AAMA,KAAK,gCAAgC,GAAG;IACpC,OAAO,EAAE,GAAG,CAAC;IACb,iBAAiB,EAAE,GAAG,CAAC;CAC1B,CAAA;AAED,QAAA,MAAM,2BAA2B,mCAAoC,gCAAgC,4CAwCpG,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"PrimeReactDatatableRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":"AAGA,KAAK,gCAAgC,GAAG;IACpC,OAAO,EAAE,GAAG,CAAC;IACb,iBAAiB,EAAE,GAAG,CAAC;CAC1B,CAAA;AAED,QAAA,MAAM,2BAA2B,mCAAoC,gCAAgC,4CAwCpG,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.js

@@ -1,8 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
-import { Column } from "primereact/column";
-import { DataTable } from "primereact/datatable";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SolidSpinner } from "../../../shad-cn-ui";
 var PrimeReactDatatableRenderer = function (_a) {
     // {
     //   "size": "small",
@@ -13,20 +10,13 @@ var PrimeReactDatatableRenderer = function (_a) {
     //     "rowsPerPageOptions": [5, 10, 25, 50]
     //   }
     // }    
-    var _b, _c;
     var options = _a.options, visualizationData = _a.visualizationData;
-    var size = (options === null || options === void 0 ? void 0 : options.size) || 'small';
-    var showGridlines = (options === null || options === void 0 ? void 0 : options.showGridLines) || false;
-    var stripedRows = (options === null || options === void 0 ? void 0 : options.stripedRows) || false;
-    var paginator = (options === null || options === void 0 ? void 0 : options.pagination) || false;
-    var rows = ((_b = options === null || options === void 0 ? void 0 : options.pagination) === null || _b === void 0 ? void 0 : _b.rows) || 10;
-    var rowsPerPageOptions = ((_c = options === null || options === void 0 ? void 0 : options.pagination) === null || _c === void 0 ? void 0 : _c.rowsPerPageOptions) || [5, 10, 25, 50];
     if (!visualizationData) {
-        return (_jsx(_Fragment, { children: _jsx(ProgressSpinner, {}) }));
+        return _jsx(SolidSpinner, {});
     }
     var columns = visualizationData.columns;
     var data = visualizationData.rows;
-    return (_jsx(_Fragment, { children: _jsx(DataTable, { value: data, tableStyle: { minWidth: '50rem' }, size: size, showGridlines: showGridlines, stripedRows: stripedRows, paginator: paginator, rows: rows, rowsPerPageOptions: rowsPerPageOptions, children: columns.map(function (col, i) { return (_jsx(Column, { field: col.field, header: col.header }, col.field)); }) }) }));
+    return (_jsx("div", { className: "solid-simple-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(function (col) { return (_jsx("th", { children: col.header }, col.field)); }) }) }), _jsx("tbody", { children: data.map(function (row, rowIndex) { return (_jsx("tr", { children: columns.map(function (col) { return (_jsx("td", { children: row[col.field] }, "".concat(rowIndex, "-").concat(col.field))); }) }, rowIndex)); }) })] }) }));
 };
 export default PrimeReactDatatableRenderer;
 //# sourceMappingURL=PrimeReactDatatableRenderer.js.map

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeReactDatatableRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":";AACA,+EAA+E;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,IAAM,2BAA2B,GAAG,UAAC,EAAgE;IACjG,IAAI;IACJ,qBAAqB;IACrB,2BAA2B;IAC3B,yBAAyB;IACzB,oBAAoB;IACpB,kBAAkB;IAClB,4CAA4C;IAC5C,MAAM;IACN,QAAQ;;QAT2B,OAAO,aAAA,EAAE,iBAAiB,uBAAA;IAW7D,IAAM,IAAI,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,KAAI,OAAO,CAAC;IACtC,IAAM,aAAa,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,KAAI,KAAK,CAAC;IACtD,IAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,KAAI,KAAK,CAAC;IAClD,IAAM,SAAS,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,KAAI,KAAK,CAAC;IAC/C,IAAM,IAAI,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,0CAAE,IAAI,KAAI,EAAE,CAAC;IAC7C,IAAM,kBAAkB,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,0CAAE,kBAAkB,KAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAEtF,IAAI,CAAC,iBAAiB,EAAE;QACpB,OAAO,CACH,4BACI,KAAC,eAAe,KAAG,GACpB,CACN,CAAC;KACL;IAED,IAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC;IAC1C,IAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;IAEpC,OAAO,CACH,4BACI,KAAC,SAAS,IAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,YAE/L,OAAO,CAAC,GAAG,CAAC,UAAC,GAAQ,EAAE,CAAS,IAAK,OAAA,CACjC,KAAC,MAAM,IAAiB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,IAA/C,GAAG,CAAC,KAAK,CAA0C,CACnE,EAFoC,CAEpC,CAAC,GAEE,GACb,CACN,CAAA;AACL,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["\n// import \"../../../../components/core/dashboard/chart-renderers/init-chartjs\";\nimport { Column } from \"primereact/column\";\nimport { DataTable } from \"primereact/datatable\";\nimport { ProgressSpinner } from \"primereact/progressspinner\";\n\ntype PrimeReactDatatableRendererProps = {\n    options: any;\n    visualizationData: any;\n}\n\nconst PrimeReactDatatableRenderer = ({ options, visualizationData }: PrimeReactDatatableRendererProps) => {\n    // {\n    //   \"size\": \"small\",\n    //   \"showGridlines\": true,\n    //   \"stripedRows\": true,\n    //   \"pagination\": {\n    //     \"rows\": 10,\n    //     \"rowsPerPageOptions\": [5, 10, 25, 50]\n    //   }\n    // }    \n\n    const size = options?.size || 'small';\n    const showGridlines = options?.showGridLines || false;\n    const stripedRows = options?.stripedRows || false;\n    const paginator = options?.pagination || false;\n    const rows = options?.pagination?.rows || 10;\n    const rowsPerPageOptions = options?.pagination?.rowsPerPageOptions || [5, 10, 25, 50];\n\n    if (!visualizationData) {\n        return (\n            <>\n                <ProgressSpinner />\n            </>\n        );\n    }\n\n    const columns = visualizationData.columns;\n    const data = visualizationData.rows;\n\n    return (\n        <>\n            <DataTable value={data} tableStyle={{ minWidth: '50rem' }} size={size} showGridlines={showGridlines} stripedRows={stripedRows} paginator={paginator} rows={rows} rowsPerPageOptions={rowsPerPageOptions} >\n                {\n                    columns.map((col: any, i: number) => (\n                        <Column key={col.field} field={col.field} header={col.header} />\n                    ))\n                }\n            </DataTable>\n        </>\n    )\n};\n\nexport default PrimeReactDatatableRenderer;"]}
+{"version":3,"file":"PrimeReactDatatableRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAOnD,IAAM,2BAA2B,GAAG,UAAC,EAAgE;IACjG,IAAI;IACJ,qBAAqB;IACrB,2BAA2B;IAC3B,yBAAyB;IACzB,oBAAoB;IACpB,kBAAkB;IAClB,4CAA4C;IAC5C,MAAM;IACN,QAAQ;QAT2B,OAAO,aAAA,EAAE,iBAAiB,uBAAA;IAW7D,IAAI,CAAC,iBAAiB,EAAE;QACpB,OAAO,KAAC,YAAY,KAAG,CAAC;KAC3B;IAED,IAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC;IAC1C,IAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;IAEpC,OAAO,CACH,cAAK,SAAS,EAAC,oBAAoB,YAC/B,4BACI,0BACI,uBACK,OAAO,CAAC,GAAG,CAAC,UAAC,GAAQ,IAAK,OAAA,CACvB,uBAAqB,GAAG,CAAC,MAAM,IAAtB,GAAG,CAAC,KAAK,CAAmB,CACxC,EAF0B,CAE1B,CAAC,GACD,GACD,EACR,0BACK,IAAI,CAAC,GAAG,CAAC,UAAC,GAAQ,EAAE,QAAgB,IAAK,OAAA,CACtC,uBACK,OAAO,CAAC,GAAG,CAAC,UAAC,GAAQ,IAAK,OAAA,CACvB,uBAAsC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAA3C,UAAG,QAAQ,cAAI,GAAG,CAAC,KAAK,CAAE,CAAuB,CAC7D,EAF0B,CAE1B,CAAC,IAHG,QAAQ,CAIZ,CACR,EANyC,CAMzC,CAAC,GACE,IACJ,GACN,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["\nimport { SolidSpinner } from \"../../../shad-cn-ui\";\n\ntype PrimeReactDatatableRendererProps = {\n    options: any;\n    visualizationData: any;\n}\n\nconst PrimeReactDatatableRenderer = ({ options, visualizationData }: PrimeReactDatatableRendererProps) => {\n    // {\n    //   \"size\": \"small\",\n    //   \"showGridlines\": true,\n    //   \"stripedRows\": true,\n    //   \"pagination\": {\n    //     \"rows\": 10,\n    //     \"rowsPerPageOptions\": [5, 10, 25, 50]\n    //   }\n    // }    \n\n    if (!visualizationData) {\n        return <SolidSpinner />;\n    }\n\n    const columns = visualizationData.columns;\n    const data = visualizationData.rows;\n\n    return (\n        <div className=\"solid-simple-table\">\n            <table>\n                <thead>\n                    <tr>\n                        {columns.map((col: any) => (\n                            <th key={col.field}>{col.header}</th>\n                        ))}\n                    </tr>\n                </thead>\n                <tbody>\n                    {data.map((row: any, rowIndex: number) => (\n                        <tr key={rowIndex}>\n                            {columns.map((col: any) => (\n                                <td key={`${rowIndex}-${col.field}`}>{row[col.field]}</td>\n                            ))}\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n};\n\nexport default PrimeReactDatatableRenderer;\n"]}

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx

@@ -1,8 +1,5 @@
 
-// import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
-import { Column } from "primereact/column";
-import { DataTable } from "primereact/datatable";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { SolidSpinner } from "../../../shad-cn-ui";
 
 type PrimeReactDatatableRendererProps = {
     options: any;
@@ -20,35 +17,35 @@ const PrimeReactDatatableRenderer = ({ options, visualizationData }: PrimeReactD
     //   }
     // }    
 
-    const size = options?.size || 'small';
-    const showGridlines = options?.showGridLines || false;
-    const stripedRows = options?.stripedRows || false;
-    const paginator = options?.pagination || false;
-    const rows = options?.pagination?.rows || 10;
-    const rowsPerPageOptions = options?.pagination?.rowsPerPageOptions || [5, 10, 25, 50];
-
     if (!visualizationData) {
-        return (
-            <>
-                <ProgressSpinner />
-            </>
-        );
+        return <SolidSpinner />;
     }
 
     const columns = visualizationData.columns;
     const data = visualizationData.rows;
 
     return (
-        <>
-            <DataTable value={data} tableStyle={{ minWidth: '50rem' }} size={size} showGridlines={showGridlines} stripedRows={stripedRows} paginator={paginator} rows={rows} rowsPerPageOptions={rowsPerPageOptions} >
-                {
-                    columns.map((col: any, i: number) => (
-                        <Column key={col.field} field={col.field} header={col.header} />
-                    ))
-                }
-            </DataTable>
-        </>
-    )
+        <div className="solid-simple-table">
+            <table>
+                <thead>
+                    <tr>
+                        {columns.map((col: any) => (
+                            <th key={col.field}>{col.header}</th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {data.map((row: any, rowIndex: number) => (
+                        <tr key={rowIndex}>
+                            {columns.map((col: any) => (
+                                <td key={`${rowIndex}-${col.field}`}>{row[col.field]}</td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
 };
 
-export default PrimeReactDatatableRenderer;
+export default PrimeReactDatatableRenderer;

package/dist/components/core/extension/solid-core/CustomIcon/StatusIcon.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import 'primeicons/primeicons.css';
+import React from "react";
 interface StatusIconProps {
     isPublished: boolean;
 }

package/dist/components/core/extension/solid-core/CustomIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/CustomIcon/StatusIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AAEnC,UAAU,eAAe;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAShD,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/CustomIcon/StatusIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,eAAe;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAOhD,CAAC"}

package/dist/components/core/extension/solid-core/CustomIcon/StatusIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'primeicons/primeicons.css';
+import { SolidIcon } from "../../../../shad-cn-ui/SolidIcon";
 export var StatusIcon = function (_a) {
     var isPublished = _a.isPublished;
-    return (_jsx("span", { className: "status-icon ".concat(isPublished ? 'success' : 'danger'), title: isPublished ? 'Published' : 'Not Published', children: _jsx("i", { className: "pi ".concat(isPublished ? 'pi-check' : 'pi-times') }) }));
+    return (_jsx("span", { className: "status-icon ".concat(isPublished ? "success" : "danger"), title: isPublished ? "Published" : "Not Published", children: _jsx(SolidIcon, { name: isPublished ? "si-check" : "si-times", "aria-hidden": true }) }));
 };
 //# sourceMappingURL=StatusIcon.js.map

package/dist/components/core/extension/solid-core/CustomIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/CustomIcon/StatusIcon.tsx"],"names":[],"mappings":";AACA,OAAO,2BAA2B,CAAC;AAMnC,MAAM,CAAC,IAAM,UAAU,GAA8B,UAAC,EAAe;QAAb,WAAW,iBAAA;IACjE,OAAO,CACL,eACE,SAAS,EAAE,sBAAe,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAE,EAC9D,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,YAElD,YAAG,SAAS,EAAE,aAAM,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAE,GAAI,GAC1D,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport 'primeicons/primeicons.css';\n\ninterface StatusIconProps {\n  isPublished: boolean;\n}\n\nexport const StatusIcon: React.FC<StatusIconProps> = ({ isPublished }) => {\n  return (\n    <span\n      className={`status-icon ${isPublished ? 'success' : 'danger'}`}\n      title={isPublished ? 'Published' : 'Not Published'}\n    >\n      <i className={`pi ${isPublished ? 'pi-check' : 'pi-times'}`} />\n    </span>\n  );\n};\n"]}
+{"version":3,"file":"StatusIcon.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/CustomIcon/StatusIcon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAM7D,MAAM,CAAC,IAAM,UAAU,GAA8B,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,CACxE,eACE,SAAS,EAAE,sBAAe,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAE,EAC9D,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,YAElD,KAAC,SAAS,IAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,wBAAgB,GACjE,CACR;AAPyE,CAOzE,CAAC","sourcesContent":["import React from \"react\";\nimport { SolidIcon } from \"../../../../shad-cn-ui/SolidIcon\";\n\ninterface StatusIconProps {\n  isPublished: boolean;\n}\n\nexport const StatusIcon: React.FC<StatusIconProps> = ({ isPublished }) => (\n  <span\n    className={`status-icon ${isPublished ? \"success\" : \"danger\"}`}\n    title={isPublished ? \"Published\" : \"Not Published\"}\n  >\n    <SolidIcon name={isPublished ? \"si-check\" : \"si-times\"} aria-hidden />\n  </span>\n);\n"]}

package/dist/components/core/extension/solid-core/CustomIcon/StatusIcon.tsx

@@ -1,17 +1,15 @@
-import React from 'react';
-import 'primeicons/primeicons.css';
+import React from "react";
+import { SolidIcon } from "../../../../shad-cn-ui/SolidIcon";
 
 interface StatusIconProps {
   isPublished: boolean;
 }
 
-export const StatusIcon: React.FC<StatusIconProps> = ({ isPublished }) => {
-  return (
-    <span
-      className={`status-icon ${isPublished ? 'success' : 'danger'}`}
-      title={isPublished ? 'Published' : 'Not Published'}
-    >
-      <i className={`pi ${isPublished ? 'pi-check' : 'pi-times'}`} />
-    </span>
-  );
-};
+export const StatusIcon: React.FC<StatusIconProps> = ({ isPublished }) => (
+  <span
+    className={`status-icon ${isPublished ? "success" : "danger"}`}
+    title={isPublished ? "Published" : "Not Published"}
+  >
+    <SolidIcon name={isPublished ? "si-check" : "si-times"} aria-hidden />
+  </span>
+);

package/dist/components/core/extension/solid-core/dashboardQuestion/ChartFormPreviewWidget.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Message } from 'primereact/message';
+import { SolidMessage } from "../../../../../components/shad-cn-ui";
 import { SolidQuestionRenderer } from "../../../../../components/core/dashboard/SolidQuestionRenderer";
 var ChartFormPreviewWidget = function (_a) {
     var formData = _a.formData, field = _a.field, fieldsMetadata = _a.fieldsMetadata, viewMetadata = _a.viewMetadata, formViewData = _a.formViewData;
@@ -14,7 +14,7 @@ var ChartFormPreviewWidget = function (_a) {
     console.log("formViewData: ");
     console.log(formViewData);
     if (!formData || !formData.visualisedAs) {
-        return (_jsx(_Fragment, { children: _jsx(Message, { text: "Preview Unavailable" }) }));
+        return (_jsx(_Fragment, { children: _jsx(SolidMessage, { text: "Preview Unavailable" }) }));
     }
     var visualisedAs = formData.visualisedAs.value;
     return (_jsx("div", { className: "mt-3 p-2", children: _jsx(SolidQuestionRenderer, { question: formViewData === null || formViewData === void 0 ? void 0 : formViewData.data, isPreview: true, filters: [] }) }));

package/dist/components/core/extension/solid-core/dashboardQuestion/ChartFormPreviewWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartFormPreviewWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/dashboardQuestion/ChartFormPreviewWidget.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gEAAgE,CAAC;AAEvG,IAAM,sBAAsB,GAAG,UAAC,EAAqF;QAAnF,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,cAAc,oBAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAAA;IACzF,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC1B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACtB,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACnB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAChC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC9B,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC1B,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC9B,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAE1B,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,4BACI,KAAC,OAAO,IAAC,IAAI,EAAC,qBAAqB,GAAG,GACvC,CACN,CAAA;KACJ;IAED,IAAM,YAAY,GAAG,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC;IAEjD,OAAO,CACC,cAAK,SAAS,EAAC,UAAU,YACrB,KAAC,qBAAqB,IAAC,QAAQ,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,GACnF,CACb,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["\n\nimport { SolidFormWidgetProps } from \"../../../../../types\";\nimport { Message } from 'primereact/message';\nimport { SolidQuestionRenderer } from \"../../../../../components/core/dashboard/SolidQuestionRenderer\";\n\nconst ChartFormPreviewWidget = ({ formData, field, fieldsMetadata, viewMetadata, formViewData }: SolidFormWidgetProps) => {\n    console.log(`formData: `);\n    console.log(formData);\n    console.log(`field: `);\n    console.log(field);\n    console.log(`fieldsMetadata: `);\n    console.log(fieldsMetadata);\n    console.log(`viewMetadata: `);\n    console.log(viewMetadata);\n    console.log(`formViewData: `);\n    console.log(formViewData);\n\n    if (!formData || !formData.visualisedAs) {\n        return (\n            <>\n                <Message text=\"Preview Unavailable\" />\n            </>\n        )\n    }\n\n    const visualisedAs = formData.visualisedAs.value;\n\n    return (\n            <div className=\"mt-3 p-2\">\n                <SolidQuestionRenderer question={formViewData?.data} isPreview={true} filters={[]} />\n            </div>\n    );\n};\n\nexport default ChartFormPreviewWidget;"]}
+{"version":3,"file":"ChartFormPreviewWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/dashboardQuestion/ChartFormPreviewWidget.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gEAAgE,CAAC;AAEvG,IAAM,sBAAsB,GAAG,UAAC,EAAqF;QAAnF,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,cAAc,oBAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAAA;IACzF,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC1B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACtB,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACnB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAChC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC9B,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC1B,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC9B,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAE1B,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,4BACI,KAAC,YAAY,IAAC,IAAI,EAAC,qBAAqB,GAAG,GAC5C,CACN,CAAA;KACJ;IAED,IAAM,YAAY,GAAG,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC;IAEjD,OAAO,CACC,cAAK,SAAS,EAAC,UAAU,YACrB,KAAC,qBAAqB,IAAC,QAAQ,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,GACnF,CACb,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["\n\nimport { SolidFormWidgetProps } from \"../../../../../types\";\nimport { SolidMessage } from \"../../../../../components/shad-cn-ui\";\nimport { SolidQuestionRenderer } from \"../../../../../components/core/dashboard/SolidQuestionRenderer\";\n\nconst ChartFormPreviewWidget = ({ formData, field, fieldsMetadata, viewMetadata, formViewData }: SolidFormWidgetProps) => {\n    console.log(`formData: `);\n    console.log(formData);\n    console.log(`field: `);\n    console.log(field);\n    console.log(`fieldsMetadata: `);\n    console.log(fieldsMetadata);\n    console.log(`viewMetadata: `);\n    console.log(viewMetadata);\n    console.log(`formViewData: `);\n    console.log(formViewData);\n\n    if (!formData || !formData.visualisedAs) {\n        return (\n            <>\n                <SolidMessage text=\"Preview Unavailable\" />\n            </>\n        )\n    }\n\n    const visualisedAs = formData.visualisedAs.value;\n\n    return (\n            <div className=\"mt-3 p-2\">\n                <SolidQuestionRenderer question={formViewData?.data} isPreview={true} filters={[]} />\n            </div>\n    );\n};\n\nexport default ChartFormPreviewWidget;\n"]}

package/dist/components/core/extension/solid-core/dashboardQuestion/ChartFormPreviewWidget.tsx

@@ -1,7 +1,7 @@
 
 
 import { SolidFormWidgetProps } from "../../../../../types";
-import { Message } from 'primereact/message';
+import { SolidMessage } from "../../../../../components/shad-cn-ui";
 import { SolidQuestionRenderer } from "../../../../../components/core/dashboard/SolidQuestionRenderer";
 
 const ChartFormPreviewWidget = ({ formData, field, fieldsMetadata, viewMetadata, formViewData }: SolidFormWidgetProps) => {
@@ -19,7 +19,7 @@ const ChartFormPreviewWidget = ({ formData, field, fieldsMetadata, viewMetadata,
     if (!formData || !formData.visualisedAs) {
         return (
             <>
-                <Message text="Preview Unavailable" />
+                <SolidMessage text="Preview Unavailable" />
             </>
         )
     }
@@ -33,4 +33,4 @@ const ChartFormPreviewWidget = ({ formData, field, fieldsMetadata, viewMetadata,
     );
 };
 
-export default ChartFormPreviewWidget;
+export default ChartFormPreviewWidget;

package/dist/components/core/extension/solid-core/media/card/MediaCardWidget.d.ts

@@ -0,0 +1,3 @@
+import { SolidKanbanCardWidgetProps } from "../../../../../../types/solid-core";
+export default function MediaCardWidget({ rowData, setLightboxUrls, setOpenLightbox, }: SolidKanbanCardWidgetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaCardWidget.d.ts.map

package/dist/components/core/extension/solid-core/media/card/MediaCardWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCardWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/media/card/MediaCardWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AA6ChF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,eAAe,EACf,eAAe,GAChB,EAAE,0BAA0B,2CAwF5B"}