@solidxai/core-ui 0.1.5-beta.1 → 0.1.5-beta.10

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

@@ -0,0 +1,356 @@
+import React, { useState, useEffect } from "react";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { Dropdown } from "primereact/dropdown";
+import { Calendar } from "primereact/calendar";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { SqlExpression } from "../../../types/solid-core";
+import { DashboardVariableRecord } from "./SolidDashboard";
+import { useLazyGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
+import { Divider } from "primereact/divider";
+import { Fieldset } from "primereact/fieldset";
+
+interface DashboardFilterProps {
+    dashboardVariables: DashboardVariableRecord[];
+    initialFilters: SqlExpression[];
+    onApply: (filters: SqlExpression[]) => void;
+    visible: boolean;
+    onHide: () => void;
+}
+
+const getNumberOfInputs = (matchMode: any): number | null => {
+    switch (matchMode) {
+        case '$between': return 2;
+        case '$in': case '$notIn': return null;
+        case '$startsWith': case '$contains': case '$notContains': case '$endsWith': case '$equals': case '$notEquals': case '$lt': case '$lte': case '$gt': case '$gte': return 1;
+        case '$null': case '$notNull': return 0;
+        default: return 1;
+    }
+}
+
+const dateFilterMatchModeOptions = [
+    { label: 'Equals', value: "$eq" },
+    { label: 'Not Equals', value: "$nei" },
+    { label: 'Less Than', value: "$lt" },
+    { label: 'Less Than Or Equal', value: "$lte" },
+    { label: 'Greater Than', value: "$gt" },
+    { label: 'Greater Than Or Equal', value: "$gte" },
+    { label: 'In', value: "$in" },
+    { label: 'Not In', value: "$notIn" },
+    { label: 'Between', value: "$between" }
+];
+
+const selectionFilterMatchModeOptions = [
+    { label: 'In', value: "$in" },
+    { label: 'Not In', value: "$notIn" }
+];
+
+const FilterValueInput = ({ rule, onChange }: any) => {
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    // Ensure values is an array properly sized immediately on render
+    let values = Array.isArray(rule.value) ? [...rule.value] : (rule.value ? [rule.value] : []);
+
+    if (numberOfInputs !== null && numberOfInputs > 0 && values.length !== numberOfInputs) {
+        if (values.length < numberOfInputs) {
+            values = [...values, ...Array(numberOfInputs - values.length).fill('')];
+        } else {
+            values = values.slice(0, numberOfInputs);
+        }
+    }
+    if (values.length === 0 && (numberOfInputs === null || numberOfInputs > 0)) {
+        values = [''];
+    }
+
+    const updateValue = (index: number, val: any) => {
+        const newValues = [...values];
+        newValues[index] = val;
+        onChange(rule.id, 'value', numberOfInputs === 1 ? newValues[0] : newValues);
+    };
+
+    const addInput = () => {
+        const newValues = [...values, ''];
+        onChange(rule.id, 'value', newValues);
+    };
+
+    const deleteInput = (index: number) => {
+        if (values.length > 1) {
+            const newValues = values.filter((_: any, i: number) => i !== index);
+            onChange(rule.id, 'value', newValues);
+        }
+    };
+
+    // Components for actual rendering
+    const renderDate = (val: any, index: number) => {
+        let dateVal = val ? new Date(val) : null;
+        if (isNaN(dateVal?.getTime() || 0)) dateVal = null;
+        return (
+            <Calendar
+                value={dateVal}
+                onChange={(e) => {
+                    const dateStr = e.value ? (e.value as Date).toISOString().split('T')[0] : '';
+                    updateValue(index, dateStr);
+                }}
+                dateFormat="mm/dd/yy"
+                placeholder="mm/dd/yyyy"
+                mask="99/99/9999"
+                className="w-full"
+                inputClassName="w-full p-inputtext-sm"
+            />
+        );
+    };
+
+    const SelectionStaticInput = ({ val, index, updateValue, dv }: any) => {
+        const [filteredItems, setFilteredItems] = useState<{ label: string, value: string }[]>([]);
+        const staticValues = JSON.parse(dv.selectionStaticValues || '[]') || [];
+        const staticValueItems = staticValues.map((v: any) => ({ value: v.split(':')[0], label: v.split(':')[1] }));
+
+        const search = (event: AutoCompleteCompleteEvent) => {
+            const query = event.query.toLowerCase();
+            const filtered = staticValueItems.filter((item: any) =>
+                item.label.toLowerCase().includes(query)
+            );
+            setFilteredItems(filtered);
+        };
+
+        return (
+            <AutoComplete
+                value={val}
+                suggestions={filteredItems}
+                completeMethod={search}
+                onChange={(e) => updateValue(index, e.value)}
+                field="label"
+                dropdown
+                className="w-full"
+                inputClassName="w-full p-inputtext-sm"
+            />
+        );
+    };
+
+    const SelectionDynamicInput = ({ val, index, updateValue, dv }: any) => {
+        const [filteredItems, setFilteredItems] = useState<{ label: string, value: string }[]>([]);
+        const [trigger] = useLazyGetDashboardVariableSelectionDynamicValuesQuery();
+
+        const search = async (event: AutoCompleteCompleteEvent) => {
+            const queryString = `variableId=${dv.id}&q=${event.query}`;
+            try {
+                const res = await trigger(queryString).unwrap();
+                const filtered = res.filter((item: any) =>
+                    item.label.toLowerCase().includes(event.query.toLowerCase())
+                );
+                setFilteredItems(filtered);
+            } catch (error) {
+                console.error(error);
+            }
+        };
+
+        return (
+            <AutoComplete
+                value={val}
+                suggestions={filteredItems}
+                completeMethod={search}
+                onChange={(e) => updateValue(index, e.value)}
+                field="label"
+                dropdown
+                className="w-full"
+                inputClassName="w-full p-inputtext-sm"
+            />
+        );
+    };
+
+    if (numberOfInputs === 0) return <></>;
+
+    return (
+        <div className="flex flex-column gap-2">
+            {values.map((val: any, index: number) => (
+                <div key={index} className="flex gap-2">
+                    <div className="flex-grow-1">
+                        {rule.variable.variableType === 'date' && renderDate(val, index)}
+                        {rule.variable.variableType === 'selectionStatic' && <SelectionStaticInput val={val} index={index} updateValue={updateValue} dv={rule.variable} />}
+                        {rule.variable.variableType === 'selectionDynamic' && <SelectionDynamicInput val={val} index={index} updateValue={updateValue} dv={rule.variable} />}
+                    </div>
+                    {numberOfInputs === null && (
+                        <div className="flex align-items-center">
+                            <Button type="button" text severity='secondary' icon="pi pi-plus" size='small' onClick={addInput} className='p-0 mr-2 target-btn' style={{ width: 30, minWidth: 30 }} />
+                            <Button type="button" text severity='secondary' icon="pi pi-trash" size='small' onClick={() => deleteInput(index)} className='p-0 target-btn' style={{ width: 30, minWidth: 30 }} disabled={values.length <= 1} />
+                        </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const DashboardFilter: React.FC<DashboardFilterProps> = ({
+    dashboardVariables,
+    initialFilters,
+    onApply,
+    visible,
+    onHide,
+}) => {
+    const [rules, setRules] = useState<any[]>([]);
+
+    useEffect(() => {
+        if (visible) {
+            // Initialize rules based on dashboardVariables
+            const newRules = dashboardVariables.map((dv, index) => {
+                const existingFilter = initialFilters.find((f: any) => f.variableName === dv.variableName);
+
+                const defaultOperator = dv.defaultOperator || (dv.variableType === 'date' ? '$between' : '$in');
+
+                let defaultValue = null;
+                if (existingFilter && existingFilter.value !== undefined) {
+                    defaultValue = existingFilter.value;
+                } else if (dv.defaultValue) {
+                    try {
+                        defaultValue = JSON.parse(dv.defaultValue || '[]');
+                    } catch (e) {
+                        defaultValue = null;
+                    }
+                }
+
+                return {
+                    id: index + 1,
+                    fieldName: dv.variableName,
+                    matchMode: existingFilter ? existingFilter.operator : defaultOperator,
+                    value: defaultValue,
+                    variable: dv
+                };
+            });
+            setRules(newRules);
+        }
+    }, [visible, dashboardVariables, initialFilters]);
+
+    const handleChange = (id: number, key: string, value: any) => {
+        setRules((prev) =>
+            prev.map((rule) => {
+                if (rule.id === id) {
+                    let newVal = rule.value;
+                    // Immediate sync of values count when operator matches
+                    if (key === 'matchMode') {
+                        const newNum = getNumberOfInputs(value);
+                        let currentValues = Array.isArray(rule.value) ? [...rule.value] : (rule.value ? [rule.value] : []);
+                        if (newNum !== null && newNum > 0) {
+                            if (currentValues.length < newNum) {
+                                currentValues = [...currentValues, ...Array(newNum - currentValues.length).fill('')];
+                            } else if (currentValues.length > newNum) {
+                                currentValues = currentValues.slice(0, newNum);
+                            }
+                        } else if (newNum === null && currentValues.length === 0) {
+                            currentValues = [''];
+                        }
+                        newVal = newNum === 1 && currentValues.length === 1 ? currentValues[0] : currentValues;
+                        return { ...rule, [key]: value, value: newVal };
+                    }
+                    return { ...rule, [key]: value };
+                }
+                return rule;
+            })
+        );
+    };
+
+    const handleApply = () => {
+        const newFilters: SqlExpression[] = rules
+            .filter((rule) => {
+                if (['$null', '$notNull'].includes(rule.matchMode)) return true;
+
+                if (rule.value === null || rule.value === undefined) return false;
+                if (Array.isArray(rule.value)) {
+                    const hasValidValue = rule.value.some((v: any) => v !== '' && v !== null);
+                    if (!hasValidValue) return false;
+                } else {
+                    if (rule.value === '') return false;
+                }
+                return true;
+            })
+            .map((rule) => {
+                let finalValue = rule.value;
+                const numberOfInputs = getNumberOfInputs(rule.matchMode);
+                // Clean array values or extract single values
+                if (Array.isArray(finalValue)) {
+                    finalValue = finalValue.filter(v => v !== null && v !== '');
+                    if (numberOfInputs === 1 && finalValue.length > 0) {
+                        finalValue = finalValue[0];
+                    }
+                }
+
+                // For selection static/dynamic, we might have selected an object {label, value} or string
+                // We need to extract the 'value' if it's an object from AutoComplete selection
+                if (Array.isArray(finalValue)) {
+                    finalValue = finalValue.map(v => typeof v === 'object' && v !== null && 'value' in v ? v.value : v);
+                } else if (typeof finalValue === 'object' && finalValue !== null && 'value' in finalValue) {
+                    finalValue = finalValue.value;
+                }
+
+                return {
+                    variableName: rule.fieldName,
+                    operator: rule.matchMode,
+                    value: finalValue,
+                }
+            });
+
+        onApply(newFilters);
+        onHide();
+    };
+
+    const handleClear = () => {
+        onApply([]);
+        onHide();
+    };
+
+    return (
+
+
+        <Dialog header={false} className="solid-global-search-filter" showHeader={false} visible={visible} style={{ width: '50vw' }} breakpoints={{ '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }} onHide={onHide}>
+            <div className="flex align-items-center justify-content-between px-3">
+                <h5 className="solid-custom-title m-0">Add Dashboard Filter</h5>
+                <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={onHide} />
+            </div>
+            <Divider className="m-0" />
+            <div className="p-2 lg:p-2">
+                <Fieldset className='primary-filter-fieldset'>
+                    <div className="flex flex-column gap-3 py-3">
+
+                        {rules.map((rule) => (
+                            <div key={rule.id} className="grid grid-nogutter align-items-start">
+                                <div className="col-12 md:col-4 pr-2">
+                                    <div className="p-inputtext p-disabled w-full flex align-items-center mb-2 md:mb-0" style={{ minHeight: '38px' }}>
+                                        {rule.fieldName}
+                                    </div>
+                                </div>
+                                <div className="col-12 md:col-4 pr-2">
+                                    <Dropdown
+                                        value={rule.matchMode}
+                                        onChange={(e: any) => handleChange(rule.id, 'matchMode', e.value)}
+                                        options={rule.variable.variableType === 'date' ? dateFilterMatchModeOptions : selectionFilterMatchModeOptions}
+                                        optionLabel='label'
+                                        optionValue='value'
+                                        placeholder="Select Operator"
+                                        className="p-inputtext-sm w-full"
+                                    />
+                                </div>
+                                <div className="col-12 md:col-4">
+                                    <FilterValueInput rule={rule} onChange={handleChange} />
+                                </div>
+                            </div>
+                        ))}
+                        {rules.length === 0 && (
+                            <div className="text-color-secondary italic">No variables available for this dashboard.</div>
+                        )}
+                    </div>
+                </Fieldset>
+                {/* <div className="flex justify-content-between align-items-center mt-4">
+                    <Button label="Clear Filters" icon="pi pi-filter-slash" severity="danger" text onClick={handleClear} />
+                    <div className="flex gap-2">
+                    </div>
+                </div> */}
+                <div className='flex gap-3 mt-3'>
+                    <Button label="Apply" size="small" onClick={handleApply} autoFocus />
+                    <Button type='button' label='Cancel' outlined size='small' onClick={onHide} />
+                </div>
+
+            </div>
+        </Dialog>
+
+    );
+};

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

@@ -0,0 +1,3 @@
+declare const PrimeDataTableWrapper: ({ question, filters }: any) => import("react/jsx-runtime").JSX.Element;
+export default PrimeDataTableWrapper;
+//# sourceMappingURL=PrimeDataTableWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeDataTableWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/PrimeDataTableWrapper.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,qBAAqB,0BAA2B,GAAG,4CA+BxD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
+import PrimeReactDatatableRenderer from "./chart-renderers/PrimeReactDatatableRenderer";
+import { ProgressSpinner } from "primereact/progressspinner";
+import styles from './SolidDashboard.module.css';
+import qs from 'qs';
+var PrimeDataTableWrapper = function (_a) {
+    var _b, _c, _d;
+    var question = _a.question, filters = _a.filters;
+    var queryParams = qs.stringify({ isPreview: false, filters: filters }, { arrayFormat: 'brackets' });
+    var _e = useGetDashboardQuestionDataByIdQuery({
+        id: question.id,
+        qs: queryParams,
+    }), data = _e.data, isLoading = _e.isLoading;
+    if (isLoading)
+        return _jsx(ProgressSpinner, {});
+    var textAlign = (_b = question === null || question === void 0 ? void 0 : question.textAlign) !== null && _b !== void 0 ? _b : 'start';
+    return (_jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), style: { maxHeight: '40vh', overflowY: 'auto' }, children: [_jsx("div", { className: "font-medium text-".concat(textAlign), children: question.name }), _jsx("div", { className: "mt-2 font-bold text-3xl text-".concat(textAlign), children: (_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.kpi }), _jsx(PrimeReactDatatableRenderer, { options: JSON.parse(question === null || question === void 0 ? void 0 : question.chartOptions), visualizationData: (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.visualizationData })] }));
+};
+export default PrimeDataTableWrapper;
+//# sourceMappingURL=PrimeDataTableWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeDataTableWrapper.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/PrimeDataTableWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oCAAoC,EAAE,MAAM,yCAAyC,CAAC;AAC/F,OAAO,2BAA2B,MAAM,+CAA+C,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAChD,OAAO,EAAE,MAAM,IAAI,CAAC;AAEpB,IAAM,qBAAqB,GAAG,UAAC,EAA0B;;QAAxB,QAAQ,cAAA,EAAE,OAAO,aAAA;IAC9C,IAAM,WAAW,GAAG,EAAE,CAAC,SAAS,CAC5B,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,SAAA,EAAE,EAC7B,EAAE,WAAW,EAAE,UAAU,EAAE,CAC9B,CAAC;IAEI,IAAA,KAAsB,oCAAoC,CAAC;QAC7D,EAAE,EAAE,QAAQ,CAAC,EAAE;QACf,EAAE,EAAE,WAAW;KAClB,CAAC,EAHM,IAAI,UAAA,EAAE,SAAS,eAGrB,CAAC;IAEH,IAAI,SAAS;QAAE,OAAO,KAAC,eAAe,KAAG,CAAC;IAE1C,IAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,OAAO,CAAC;IAEjD,OAAO,CACH,eAAK,SAAS,EAAE,UAAG,MAAM,CAAC,qBAAqB,SAAM,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,aAClG,cAAK,SAAS,EAAE,2BAAoB,SAAS,CAAE,YAC1C,QAAQ,CAAC,IAAI,GACZ,EAEN,cAAK,SAAS,EAAE,uCAAgC,SAAS,CAAE,YACtD,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,GAAG,GACd,EAEN,KAAC,2BAA2B,IACxB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,CAAC,EAC3C,iBAAiB,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,iBAAiB,GAClD,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport PrimeReactDatatableRenderer from \"./chart-renderers/PrimeReactDatatableRenderer\";\nimport { ProgressSpinner } from \"primereact/progressspinner\";\nimport styles from './SolidDashboard.module.css'\nimport qs from 'qs';\n\nconst PrimeDataTableWrapper = ({ question, filters }: any) => {\n    const queryParams = qs.stringify(\n        { isPreview: false, filters },\n        { arrayFormat: 'brackets' }\n    );\n\n    const { data, isLoading } = useGetDashboardQuestionDataByIdQuery({\n        id: question.id,\n        qs: queryParams,\n    });\n\n    if (isLoading) return <ProgressSpinner />;\n\n    const textAlign = question?.textAlign ?? 'start';\n\n    return (\n        <div className={`${styles.SolidChartCardWrapper} p-4`} style={{ maxHeight: '40vh', overflowY: 'auto' }}>\n            <div className={`font-medium text-${textAlign}`}>\n                {question.name}\n            </div>\n\n            <div className={`mt-2 font-bold text-3xl text-${textAlign}`}>\n                {data?.data?.kpi}\n            </div>\n\n            <PrimeReactDatatableRenderer\n                options={JSON.parse(question?.chartOptions)}\n                visualizationData={data?.data?.visualizationData}\n            />\n        </div>\n    );\n};\n\nexport default PrimeDataTableWrapper;"]}

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

@@ -0,0 +1,40 @@
+import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
+import PrimeReactDatatableRenderer from "./chart-renderers/PrimeReactDatatableRenderer";
+import { ProgressSpinner } from "primereact/progressspinner";
+import styles from './SolidDashboard.module.css'
+import qs from 'qs';
+
+const PrimeDataTableWrapper = ({ question, filters }: any) => {
+    const queryParams = qs.stringify(
+        { isPreview: false, filters },
+        { arrayFormat: 'brackets' }
+    );
+
+    const { data, isLoading } = useGetDashboardQuestionDataByIdQuery({
+        id: question.id,
+        qs: queryParams,
+    });
+
+    if (isLoading) return <ProgressSpinner />;
+
+    const textAlign = question?.textAlign ?? 'start';
+
+    return (
+        <div className={`${styles.SolidChartCardWrapper} p-4`} style={{ maxHeight: '40vh', overflowY: 'auto' }}>
+            <div className={`font-medium text-${textAlign}`}>
+                {question.name}
+            </div>
+
+            <div className={`mt-2 font-bold text-3xl text-${textAlign}`}>
+                {data?.data?.kpi}
+            </div>
+
+            <PrimeReactDatatableRenderer
+                options={JSON.parse(question?.chartOptions)}
+                visualizationData={data?.data?.visualizationData}
+            />
+        </div>
+    );
+};
+
+export default PrimeDataTableWrapper;

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

@@ -21,7 +21,6 @@ export interface DashboardVariableRecord {
 }
 type SolidDashboardViewProps = {
     moduleName: string;
-    dashboardId?: number;
     dashboardName?: string;
 };
 declare const SolidDashboard: (params: SolidDashboardViewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboard.tsx"],"names":[],"mappings":"AAoBA,oBAAY,qBAAqB;IAC/B,IAAI,SAAS;IACb,gBAAgB,oBAAoB;IACpC,iBAAiB,qBAAqB;CACvC;AAED,aAAK,WAAW;IACd,GAAG,QAAQ;IACX,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,qBAAqB,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,0BAA0B,CAAC,EAAE,WAAW,CAAC;IACzC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAwED,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,cAAc,WAAY,uBAAuB,4CAiNtD,CAAA;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SolidDashboard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboard.tsx"],"names":[],"mappings":"AAwBA,oBAAY,qBAAqB;IAC/B,IAAI,SAAS;IACb,gBAAgB,oBAAoB;IACpC,iBAAiB,qBAAqB;CACvC;AAED,aAAK,WAAW;IACd,GAAG,QAAQ;IACX,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,qBAAqB,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,0BAA0B,CAAC,EAAE,WAAW,CAAC;IACzC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAsED,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,cAAc,WAAY,uBAAuB,4CA6RtD,CAAA;AAED,eAAe,cAAc,CAAC"}

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

@@ -50,11 +50,11 @@ import { useGetDashboardQuery } from '../../../redux/api/dashboardApi';
 import { Button } from 'primereact/button';
 import { Tooltip } from "primereact/tooltip";
 import qs from 'qs';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { SolidXAIIcon } from '../solid-ai/SolidXAIIcon';
 import styles from './SolidDashboard.module.css';
 import SolidDashboardBody from './SolidDashboardBody';
-import SolidDashboardVariable from './SolidDashboardVariable';
+import { DashboardFilter } from './DashboardFilter';
 import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';
 import { SolidDashboardFilterRequired } from './SolidDashboardFilterRequired';
 import { SolidDashboardLoading } from './SolidDashboardLoading';
@@ -63,6 +63,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { showNavbar, toggleNavbar } from "../../../redux/features/navbarSlice";
 import SolidDashboardNotAvailable from './SolidDashboardNotAvailable';
 import { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from '../../../redux/api/solidSettingsApi';
+import showToast from '../../../helpers/showToast';
+import { Toast } from "primereact/toast";
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { useUpsertUserDashboardLayoutMutation } from '../../../redux/api/dashboardLayoutApi';
 export var DashboardVariableType;
 (function (DashboardVariableType) {
     DashboardVariableType["DATE"] = "date";
@@ -85,7 +89,7 @@ function handleDashboardData(data, setDashboardVariables, setQuestions) {
         setQuestions(dashboardData.questions);
     }
 }
-function getQueryParams(moduleName, dashboardId, dashboardName) {
+function getQueryParams(moduleName, dashboardName) {
     var filters = {
         module: {
             name: {
@@ -93,11 +97,8 @@ function getQueryParams(moduleName, dashboardId, dashboardName) {
             }
         }
     };
-    if (dashboardId !== undefined) {
-        filters.id = { $eq: dashboardId };
-    }
-    else if (dashboardName !== undefined) {
-        filters.name = { $eq: dashboardName };
+    if (dashboardName !== undefined) {
+        filters.name = { $eqi: dashboardName };
     }
     var query = {
         filters: filters,
@@ -131,8 +132,8 @@ function isRenderDashboardBody(questions, dashboardVariables, filters) {
     return allVariablesFiltered;
 }
 var SolidDashboard = function (params) {
-    var _a, _b, _c, _d, _e;
-    var _f = useGetDashboardQuery(getQueryParams(params.moduleName, params.dashboardId, params.dashboardName)), data = _f.data, isLoading = _f.isLoading, error = _f.error; // FIXME : error handling should be done properly
+    var _a, _b, _c, _d, _e, _f;
+    var _g = useGetDashboardQuery(getQueryParams(params.moduleName, params.dashboardName)), data = _g.data, isLoading = _g.isLoading, error = _g.error; // 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
@@ -144,13 +145,41 @@ var SolidDashboard = function (params) {
     // TODO [HP]: replace dashboardVariableFilterRules with filters everywhere...
     // const [dashboardVariableFilterRules, setDashboardVariableFilterRules] = useState<ISolidDashboardVariableFilterRule[]>([]);
     var dispatch = useDispatch();
+    var toast = useRef(null);
     var visibleNavbar = useSelector(function (state) { var _a; return (_a = state.navbarState) === null || _a === void 0 ? void 0 : _a.visibleNavbar; });
-    var _g = useState([]), filters = _g[0], setFilters = _g[1];
-    var _h = useState(false), isOpenSolidXAiPanel = _h[0], setIsOpenSolidXAiPanel = _h[1];
-    var _j = useState(380), chatterWidth = _j[0], setChatterWidth = _j[1];
-    var _k = useState(false), isResizing = _k[0], setIsResizing = _k[1];
-    var _l = useState([]), questions = _l[0], setQuestions = _l[1];
-    var _m = useState([]), dashboardVariables = _m[0], setDashboardVariables = _m[1];
+    var _h = useState([]), filters = _h[0], setFilters = _h[1];
+    var _j = useState(false), isOpenSolidXAiPanel = _j[0], setIsOpenSolidXAiPanel = _j[1];
+    var _k = useState(380), chatterWidth = _k[0], setChatterWidth = _k[1];
+    var _l = useState(false), isResizing = _l[0], setIsResizing = _l[1];
+    var _m = useState([]), questions = _m[0], setQuestions = _m[1];
+    var _o = useState([]), dashboardVariables = _o[0], setDashboardVariables = _o[1];
+    var _p = useState(false), isDashboardFilterVisible = _p[0], setIsDashboardFilterVisible = _p[1];
+    var _q = useUpsertUserDashboardLayoutMutation(), upsertDashboardLayout = _q[0], _r = _q[1], isDashboardLayoutLoading = _r.isLoading, dashboardLayoutError = _r.error, isDashboardLayoutSuccess = _r.isSuccess, dashboardLayoutData = _r.data;
+    var _s = useState([]), dashboardLayout = _s[0], setDashboardLayout = _s[1];
+    var updateUserDashboardLayout = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, upsertDashboardLayout({
+                            dashboardId: data === null || data === void 0 ? void 0 : data.records[0].id,
+                            layout: JSON.stringify(dashboardLayout),
+                        }).unwrap()];
+                case 1:
+                    response = _a.sent();
+                    if (response.statusCode === 200) {
+                        showToast(toast, "success", ERROR_MESSAGES.LAYOUT, ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_SUCCESSFULLY);
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _a.sent();
+                    showToast(toast, "error", ERROR_MESSAGES.LAYOUT, ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_FAILED);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
     useEffect(function () {
         // Invoke the dashboard api to fetch the dashboard data
         // console.log('Dashboard Data testing:', isLoading, data, error);
@@ -207,9 +236,9 @@ var SolidDashboard = function (params) {
             dispatch(showNavbar()); // open both
         }
     };
-    var _o = useState(null), mcpUrl = _o[0], setMcpUrl = _o[1];
+    var _t = useState(null), mcpUrl = _t[0], setMcpUrl = _t[1];
     var getMcpUrl = useLazyGetMcpUrlQuery()[0];
-    var _p = useLazyGetSolidSettingsQuery(), trigger = _p[0], solidSettingsData = _p[1].data;
+    var _u = useLazyGetSolidSettingsQuery(), trigger = _u[0], solidSettingsData = _u[1].data;
     useEffect(function () {
         trigger(""); // Fetch settings on mount
     }, []);
@@ -220,7 +249,7 @@ var SolidDashboard = function (params) {
         }
     }, [solidSettingsData]);
     var enableSolidXAiPanel = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var queryData, queryString, response, error_1;
+        var queryData, queryString, response, error_2;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -240,14 +269,14 @@ var SolidDashboard = function (params) {
                     }
                     return [3 /*break*/, 3];
                 case 2:
-                    error_1 = _c.sent();
+                    error_2 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
         });
     }); };
-    return (_jsxs("div", { className: "h-screen surface-0 flex", children: [_jsxs("div", { className: "h-full flex-grow-1 ".concat(styles.SolidDashboardPageContentWrapper), children: [isLoading && _jsx(SolidDashboardLoading, {}), error && _jsx(SolidDashboardRenderError, {}), !isLoading && !error && data && data.records.length === 0 && (_jsx(SolidDashboardNotAvailable, {})), !isLoading && !error && data && data.records.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "page-header", style: { borderBottom: '1px solid var(--primary-light-color)' }, children: [_jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx("div", { className: "apps-icon block md:hidden cursor-pointer", onClick: toggleBothSidebars, children: _jsx("i", { className: "pi pi-th-large" }) }), _jsxs("p", { className: "view-title solid-text-wrapper flex align-items-center gap-1 ".concat(styles.SolidDashboardTitle), children: [((_a = data === null || data === void 0 ? void 0 : data.records[0]) === null || _a === void 0 ? void 0 : _a.displayName) ? (_b = data === null || data === void 0 ? void 0 : data.records[0]) === null || _b === void 0 ? void 0 : _b.displayName : (_c = data === null || data === void 0 ? void 0 : data.records[0]) === null || _c === void 0 ? void 0 : _c.name, ((_d = data === null || data === void 0 ? void 0 : data.records[0]) === null || _d === void 0 ? void 0 : _d.description) &&
-                                                        _jsxs(_Fragment, { children: [_jsx(Tooltip, { className: 'solid-field-tooltip', target: ".solid-field-tooltip-icon" }), _jsx("i", { className: "pi pi-info-circle solid-field-tooltip-icon", "data-pr-tooltip": (_e = data === null || data === void 0 ? void 0 : data.records[0]) === null || _e === void 0 ? void 0 : _e.description, "data-pr-position": 'right' })] })] })] }), dashboardVariables && dashboardVariables.length > 0 && _jsx(SolidDashboardVariable, { dashboardVariables: dashboardVariables, filters: filters, setFilters: setFilters })] }), !isRenderDashboardBody(questions, dashboardVariables, filters) && _jsx(SolidDashboardFilterRequired, {}), isRenderDashboardBody(questions, dashboardVariables, filters) && _jsx(SolidDashboardBody, { questions: questions, filters: filters })] }))] }), mcpUrl && (_jsxs("div", { className: "chatter-section ".concat(isOpenSolidXAiPanel === false ? 'collapsed' : 'open'), style: { width: chatterWidth }, children: [isOpenSolidXAiPanel && (_jsx("div", { style: {
+    return (_jsxs("div", { className: "h-screen surface-0 flex", children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: "h-full flex-grow-1 ".concat(styles.SolidDashboardPageContentWrapper), children: [isLoading && _jsx(SolidDashboardLoading, {}), error && _jsx(SolidDashboardRenderError, {}), !isLoading && !error && data && data.records.length === 0 && (_jsx(SolidDashboardNotAvailable, {})), !isLoading && !error && data && data.records.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "page-header", style: { borderBottom: '1px solid var(--primary-light-color)' }, children: [_jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx("div", { className: "apps-icon block md:hidden cursor-pointer", onClick: toggleBothSidebars, children: _jsx("i", { className: "pi pi-th-large" }) }), _jsxs("p", { className: "view-title solid-text-wrapper flex align-items-center gap-1 ".concat(styles.SolidDashboardTitle), children: [((_a = data === null || data === void 0 ? void 0 : data.records[0]) === null || _a === void 0 ? void 0 : _a.displayName) ? (_b = data === null || data === void 0 ? void 0 : data.records[0]) === null || _b === void 0 ? void 0 : _b.displayName : (_c = data === null || data === void 0 ? void 0 : data.records[0]) === null || _c === void 0 ? void 0 : _c.name, ((_d = data === null || data === void 0 ? void 0 : data.records[0]) === null || _d === void 0 ? void 0 : _d.description) &&
+                                                        _jsxs(_Fragment, { children: [_jsx(Tooltip, { className: 'solid-field-tooltip', target: ".solid-field-tooltip-icon" }), _jsx("i", { className: "pi pi-info-circle solid-field-tooltip-icon", "data-pr-tooltip": (_e = data === null || data === void 0 ? void 0 : data.records[0]) === null || _e === void 0 ? void 0 : _e.description, "data-pr-position": 'right' })] })] })] }), dashboardVariables && dashboardVariables.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'flex gap-2', children: [_jsx("a", { onClick: function () { return setIsDashboardFilterVisible(true); }, children: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", icon: filters.length > 0 ? "pi pi-filter-fill" : "pi pi-filter", className: "p-button-sm lg:hidden solid-icon-button ", size: 'small' }), _jsx(Button, { type: "button", icon: filters.length > 0 ? "pi pi-filter-fill" : "pi pi-filter", label: "Filter", className: "hidden lg:inline-flex", size: 'small' })] }) }), filters.length > 0 && (_jsx(Button, { type: "button", size: "small", icon: "pi pi-filter-slash", severity: "secondary", className: "solid-icon-button ", outlined: true, onClick: function () { setFilters([]); setIsDashboardFilterVisible(false); } })), _jsx(Button, { type: "button", size: "small", icon: "pi pi-save", severity: "secondary", className: "solid-icon-button ", outlined: true, onClick: function () { return updateUserDashboardLayout(); } })] }), _jsx(DashboardFilter, { dashboardVariables: dashboardVariables, initialFilters: filters, onApply: setFilters, visible: isDashboardFilterVisible, onHide: function () { return setIsDashboardFilterVisible(false); } })] }))] }), !isRenderDashboardBody(questions, dashboardVariables, filters) && _jsx(SolidDashboardFilterRequired, {}), isRenderDashboardBody(questions, dashboardVariables, filters) && _jsx(SolidDashboardBody, { dashboardId: (_f = data === null || data === void 0 ? void 0 : data.records[0]) === null || _f === void 0 ? void 0 : _f.id, questions: questions, filters: filters, dashboardLayout: dashboardLayout, setDashboardLayout: setDashboardLayout })] }))] }), mcpUrl && (_jsxs("div", { className: "chatter-section ".concat(isOpenSolidXAiPanel === false ? 'collapsed' : 'open'), style: { width: chatterWidth }, children: [isOpenSolidXAiPanel && (_jsx("div", { style: {
                             width: 5,
                             cursor: 'col-resize',
                             position: 'absolute',