@solidxai/core-ui 0.1.9-beta.7 → 0.1.9

package/dist/routes/pages/admin/core/DashboardPage.js

@@ -1,10 +1,865 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import SolidDashboard from '../../../../components/core/dashboard/SolidDashboard';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
+import { AlertTriangle, Filter, RefreshCw, Save } from "lucide-react";
+import { GridStack } from "gridstack";
+import "gridstack/dist/gridstack.min.css";
+import { getExtensionComponent } from "../../../../helpers/registry";
+import { SolidAutocomplete, SolidButton, SolidDatePicker, SolidDialog, SolidDialogBody, SolidDialogFooter, SolidSelect, SolidSpinner, } from "../../../../components/shad-cn-ui";
+import { resolveChartType } from "../../../../components/core/dashboard/mappers/echartsOptionMapper";
+import { useGetDashboardDataMutation, useGetDashboardDefinitionQuery, useGetDashboardLayoutQuery, useLazyGetDashboardVariableOptionsQuery, useSaveDashboardLayoutMutation, } from "../../../../redux/api/dashboardRuntimeApi";
+import styles from "./DashboardPage.module.css";
+var normalizeType = function (value) { return "".concat(value !== null && value !== void 0 ? value : "").toLowerCase(); };
+var isDateRangeVariable = function (variable) {
+    var type = normalizeType(variable === null || variable === void 0 ? void 0 : variable.type);
+    return type === "date" || type === "daterange" || type === "date_range";
+};
+var isDynamicVariable = function (variable) {
+    var type = normalizeType(variable === null || variable === void 0 ? void 0 : variable.type);
+    return type === "selectiondynamic" || type === "dynamicselect" || type === "selectdynamic";
+};
+var isStaticVariable = function (variable) {
+    var type = normalizeType(variable === null || variable === void 0 ? void 0 : variable.type);
+    return type === "selectionstatic" || type === "select" || type === "multiselect";
+};
+var isMultiValueVariable = function (variable) {
+    var type = normalizeType(variable === null || variable === void 0 ? void 0 : variable.type);
+    return type === "multiselect" || !!(variable === null || variable === void 0 ? void 0 : variable.multiple) || !!(variable === null || variable === void 0 ? void 0 : variable.allowMultiple) || !!(variable === null || variable === void 0 ? void 0 : variable.isMultiSelect);
+};
+var toOptions = function (options) {
+    return (options !== null && options !== void 0 ? options : [])
+        .map(function (entry) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (typeof entry === "string") {
+            var _h = entry.split(":"), value = _h[0], label = _h[1];
+            return { value: value, label: label !== null && label !== void 0 ? label : value };
+        }
+        return {
+            value: "".concat((_b = (_a = entry === null || entry === void 0 ? void 0 : entry.value) !== null && _a !== void 0 ? _a : entry === null || entry === void 0 ? void 0 : entry.id) !== null && _b !== void 0 ? _b : ""),
+            label: "".concat((_g = (_f = (_e = (_d = (_c = entry === null || entry === void 0 ? void 0 : entry.label) !== null && _c !== void 0 ? _c : entry === null || entry === void 0 ? void 0 : entry.name) !== null && _d !== void 0 ? _d : entry === null || entry === void 0 ? void 0 : entry.displayName) !== null && _e !== void 0 ? _e : entry === null || entry === void 0 ? void 0 : entry.value) !== null && _f !== void 0 ? _f : entry === null || entry === void 0 ? void 0 : entry.id) !== null && _g !== void 0 ? _g : ""),
+        };
+    })
+        .filter(function (entry) { return !!entry.value; });
+};
+var toIso = function (value) {
+    if (!value || Number.isNaN(value.getTime()))
+        return null;
+    return value.toISOString();
+};
+var extractWidgetName = function (widgetData) { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = widgetData === null || widgetData === void 0 ? void 0 : widgetData.meta) === null || _a === void 0 ? void 0 : _a.widgetName) !== null && _b !== void 0 ? _b : widgetData === null || widgetData === void 0 ? void 0 : widgetData.widgetName) !== null && _c !== void 0 ? _c : widgetData === null || widgetData === void 0 ? void 0 : widgetData.id) !== null && _d !== void 0 ? _d : ""; };
+var sortLayoutItems = function (items) {
+    return __spreadArray([], (items !== null && items !== void 0 ? items : []), true).sort(function (a, b) {
+        var _a, _b, _c, _d;
+        var byY = ((_a = a === null || a === void 0 ? void 0 : a.y) !== null && _a !== void 0 ? _a : 0) - ((_b = b === null || b === void 0 ? void 0 : b.y) !== null && _b !== void 0 ? _b : 0);
+        if (byY !== 0)
+            return byY;
+        return ((_c = a === null || a === void 0 ? void 0 : a.x) !== null && _c !== void 0 ? _c : 0) - ((_d = b === null || b === void 0 ? void 0 : b.x) !== null && _d !== void 0 ? _d : 0);
+    });
+};
+var MOBILE_DASHBOARD_BREAKPOINT = 960;
+var TABLET_DASHBOARD_BREAKPOINT = 1280;
+var getResponsiveDashboardColumns = function (viewportWidth, baseColumns) {
+    var safeBaseColumns = Math.max(1, baseColumns || 1);
+    if (viewportWidth < MOBILE_DASHBOARD_BREAKPOINT)
+        return 1;
+    if (viewportWidth < TABLET_DASHBOARD_BREAKPOINT)
+        return Math.min(6, safeBaseColumns);
+    return safeBaseColumns;
+};
+var compactLayoutItemsForColumns = function (items, sourceColumns, targetColumns) {
+    var normalizedSourceColumns = Math.max(1, sourceColumns || 1);
+    var normalizedTargetColumns = Math.max(1, targetColumns || 1);
+    if (normalizedTargetColumns >= normalizedSourceColumns) {
+        return sortLayoutItems(items);
+    }
+    var sortedItems = sortLayoutItems(items);
+    var compactedItems = [];
+    var cursorX = 0;
+    var cursorY = 0;
+    var rowHeight = 0;
+    sortedItems.forEach(function (item) {
+        var _a, _b;
+        var widthRatio = normalizedSourceColumns > 0 ? ((_a = item.w) !== null && _a !== void 0 ? _a : 1) / normalizedSourceColumns : 1;
+        var sourceHeight = Math.max(1, (_b = item.h) !== null && _b !== void 0 ? _b : 1);
+        var nextWidth = normalizedTargetColumns === 1
+            ? 1
+            : Math.max(1, Math.min(normalizedTargetColumns, item.w >= normalizedSourceColumns ? normalizedTargetColumns : Math.round(widthRatio * normalizedTargetColumns)));
+        var nextHeight = normalizedTargetColumns === 1 && sourceHeight <= 2 ? 1 : sourceHeight;
+        if (cursorX > 0 && cursorX + nextWidth > normalizedTargetColumns) {
+            cursorY += Math.max(rowHeight, 1);
+            cursorX = 0;
+            rowHeight = 0;
+        }
+        var scaledMinWidth = item.minW !== undefined
+            ? Math.max(1, Math.min(nextWidth, Math.round((Math.max(item.minW, 1) / normalizedSourceColumns) * normalizedTargetColumns) || 1))
+            : undefined;
+        var scaledMinHeight = item.minH !== undefined
+            ? Math.max(1, Math.min(nextHeight, Math.max(item.minH, 1)))
+            : undefined;
+        var normalizedItem = __assign(__assign({}, item), { x: cursorX, y: cursorY, w: nextWidth, h: nextHeight, minW: scaledMinWidth, minH: scaledMinHeight });
+        compactedItems.push(normalizedItem);
+        cursorX += nextWidth;
+        rowHeight = Math.max(rowHeight, nextHeight);
+        if (cursorX >= normalizedTargetColumns) {
+            cursorY += Math.max(rowHeight, 1);
+            cursorX = 0;
+            rowHeight = 0;
+        }
+    });
+    return compactedItems;
+};
+var toLayoutItems = function (items) {
+    return (items !== null && items !== void 0 ? items : [])
+        .filter(function (item) { var _a; return !!((_a = item === null || item === void 0 ? void 0 : item.widgetId) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.id); })
+        .map(function (item) {
+        var _a, _b, _c, _d, _e;
+        return ({
+            widgetId: (_a = item === null || item === void 0 ? void 0 : item.widgetId) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.id,
+            x: Number((_b = item === null || item === void 0 ? void 0 : item.x) !== null && _b !== void 0 ? _b : 0),
+            y: Number((_c = item === null || item === void 0 ? void 0 : item.y) !== null && _c !== void 0 ? _c : 0),
+            w: Number((_d = item === null || item === void 0 ? void 0 : item.w) !== null && _d !== void 0 ? _d : 4),
+            h: Number((_e = item === null || item === void 0 ? void 0 : item.h) !== null && _e !== void 0 ? _e : 3),
+            minW: (item === null || item === void 0 ? void 0 : item.minW) !== undefined ? Number(item === null || item === void 0 ? void 0 : item.minW) : undefined,
+            minH: (item === null || item === void 0 ? void 0 : item.minH) !== undefined ? Number(item === null || item === void 0 ? void 0 : item.minH) : undefined,
+        });
+    });
+};
+var getAllLayoutItemsFromGrid = function (grid) {
+    var _a;
+    if (!grid)
+        return [];
+    var snapshot = grid.save(false, false, function (node, widget) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!widget.id) {
+            widget.id =
+                (_g = (_d = (_a = node === null || node === void 0 ? void 0 : node.id) !== null && _a !== void 0 ? _a : (_c = (_b = node === null || node === void 0 ? void 0 : node.el) === null || _b === void 0 ? void 0 : _b.getAttribute) === null || _c === void 0 ? void 0 : _c.call(_b, "gs-id")) !== null && _d !== void 0 ? _d : (_f = (_e = node === null || node === void 0 ? void 0 : node.el) === null || _e === void 0 ? void 0 : _e.getAttribute) === null || _f === void 0 ? void 0 : _f.call(_e, "id")) !== null && _g !== void 0 ? _g : "";
+        }
+    });
+    var widgets = Array.isArray(snapshot) ? snapshot : [];
+    var fromSave = toLayoutItems(widgets.map(function (item) {
+        var _a, _b, _c;
+        return ({
+            widgetId: (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.widgetId,
+            x: item === null || item === void 0 ? void 0 : item.x,
+            y: item === null || item === void 0 ? void 0 : item.y,
+            w: (_b = item === null || item === void 0 ? void 0 : item.w) !== null && _b !== void 0 ? _b : item === null || item === void 0 ? void 0 : item.width,
+            h: (_c = item === null || item === void 0 ? void 0 : item.h) !== null && _c !== void 0 ? _c : item === null || item === void 0 ? void 0 : item.height,
+            minW: item === null || item === void 0 ? void 0 : item.minW,
+            minH: item === null || item === void 0 ? void 0 : item.minH,
+        });
+    }));
+    if (fromSave.length > 0)
+        return fromSave;
+    var nodes = Array.isArray((_a = grid === null || grid === void 0 ? void 0 : grid.engine) === null || _a === void 0 ? void 0 : _a.nodes) ? grid.engine.nodes : [];
+    return toLayoutItems(nodes.map(function (node) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return ({
+            widgetId: (_d = (_a = node === null || node === void 0 ? void 0 : node.id) !== null && _a !== void 0 ? _a : (_c = (_b = node === null || node === void 0 ? void 0 : node.el) === null || _b === void 0 ? void 0 : _b.getAttribute) === null || _c === void 0 ? void 0 : _c.call(_b, "gs-id")) !== null && _d !== void 0 ? _d : (_f = (_e = node === null || node === void 0 ? void 0 : node.el) === null || _e === void 0 ? void 0 : _e.getAttribute) === null || _f === void 0 ? void 0 : _f.call(_e, "id"),
+            x: node === null || node === void 0 ? void 0 : node.x,
+            y: node === null || node === void 0 ? void 0 : node.y,
+            w: (_g = node === null || node === void 0 ? void 0 : node.w) !== null && _g !== void 0 ? _g : node === null || node === void 0 ? void 0 : node.width,
+            h: (_h = node === null || node === void 0 ? void 0 : node.h) !== null && _h !== void 0 ? _h : node === null || node === void 0 ? void 0 : node.height,
+            minW: node === null || node === void 0 ? void 0 : node.minW,
+            minH: node === null || node === void 0 ? void 0 : node.minH,
+        });
+    }));
+};
+var resolveDefaultDashboardWidgetComponentName = function (definition, runtime) {
+    var _a, _b;
+    var runtimeData = (_b = (_a = runtime === null || runtime === void 0 ? void 0 : runtime.data) !== null && _a !== void 0 ? _a : runtime) !== null && _b !== void 0 ? _b : {};
+    if ((runtimeData === null || runtimeData === void 0 ? void 0 : runtimeData.value) !== undefined)
+        return "DefaultDashboardKpiWidget";
+    if (Array.isArray(runtimeData === null || runtimeData === void 0 ? void 0 : runtimeData.columns) && Array.isArray(runtimeData === null || runtimeData === void 0 ? void 0 : runtimeData.records))
+        return "DefaultDashboardTableWidget";
+    var chartType = resolveChartType(definition);
+    if (chartType === "line")
+        return "DefaultDashboardLineChartWidget";
+    if (chartType === "bar")
+        return "DefaultDashboardBarChartWidget";
+    if (chartType === "pie")
+        return "DefaultDashboardPieChartWidget";
+    return "DefaultDashboardUnknownWidget";
+};
+var getPreferredWidgetComponentName = function (definition, runtime) {
+    var _a, _b, _c, _d, _e;
+    var explicit = (_d = (_b = (_a = definition === null || definition === void 0 ? void 0 : definition.componentName) !== null && _a !== void 0 ? _a : definition === null || definition === void 0 ? void 0 : definition.widgetComponentName) !== null && _b !== void 0 ? _b : (_c = definition === null || definition === void 0 ? void 0 : definition.renderer) === null || _c === void 0 ? void 0 : _c.componentName) !== null && _d !== void 0 ? _d : (_e = definition === null || definition === void 0 ? void 0 : definition.ui) === null || _e === void 0 ? void 0 : _e.componentName;
+    return explicit || resolveDefaultDashboardWidgetComponentName(definition, runtime);
+};
+var notifyDashboardChartsToResize = function () {
+    if (typeof window === "undefined")
+        return;
+    window.requestAnimationFrame(function () {
+        window.dispatchEvent(new Event("resize"));
+    });
+};
+var resolvePresetRange = function (preset) {
+    if (!preset)
+        return { start: null, end: null };
+    var now = new Date();
+    var end = new Date(now);
+    if (preset === "today") {
+        var start = new Date(now);
+        start.setHours(0, 0, 0, 0);
+        return { start: start, end: end };
+    }
+    if (preset === "last_24_hours") {
+        var start = new Date(now);
+        start.setHours(start.getHours() - 24);
+        return { start: start, end: end };
+    }
+    if (preset === "last_7_days") {
+        var start = new Date(now);
+        start.setDate(start.getDate() - 7);
+        return { start: start, end: end };
+    }
+    if (preset === "last_30_days") {
+        var start = new Date(now);
+        start.setDate(start.getDate() - 30);
+        return { start: start, end: end };
+    }
+    return { start: null, end: null };
+};
+var parseDateValue = function (value) {
+    if (!value)
+        return null;
+    var date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+};
+var getDatePresetOptions = function (variable) {
+    var _a, _b;
+    var metadataPresets = (_b = (_a = variable === null || variable === void 0 ? void 0 : variable.presetValues) !== null && _a !== void 0 ? _a : variable === null || variable === void 0 ? void 0 : variable.presets) !== null && _b !== void 0 ? _b : variable === null || variable === void 0 ? void 0 : variable.datePresets;
+    var builtIns = [
+        { value: "today", label: "Today" },
+        { value: "last_24_hours", label: "Last 24 Hours" },
+        { value: "last_7_days", label: "Last 7 Days" },
+        { value: "last_30_days", label: "Last 30 Days" },
+    ];
+    var source = Array.isArray(metadataPresets) && metadataPresets.length ? metadataPresets : builtIns;
+    var normalized = source
+        .map(function (entry) {
+        var _a, _b, _c, _d;
+        if (typeof entry === "string") {
+            var _e = entry.split(":"), value_1 = _e[0], label_1 = _e[1];
+            var cleaned = "".concat(value_1 !== null && value_1 !== void 0 ? value_1 : "").trim();
+            if (!cleaned)
+                return null;
+            return { value: cleaned, label: "".concat(label_1 !== null && label_1 !== void 0 ? label_1 : cleaned) };
+        }
+        var value = "".concat((_b = (_a = entry === null || entry === void 0 ? void 0 : entry.value) !== null && _a !== void 0 ? _a : entry === null || entry === void 0 ? void 0 : entry.id) !== null && _b !== void 0 ? _b : "").trim();
+        if (!value)
+            return null;
+        var label = "".concat((_d = (_c = entry === null || entry === void 0 ? void 0 : entry.label) !== null && _c !== void 0 ? _c : entry === null || entry === void 0 ? void 0 : entry.displayName) !== null && _d !== void 0 ? _d : value);
+        return { value: value, label: label };
+    })
+        .filter(Boolean);
+    if (!normalized.find(function (entry) { return entry.value === "custom"; })) {
+        normalized.push({ value: "custom", label: "Custom" });
+    }
+    return normalized;
+};
+var buildDefaultFilterValues = function (variables) {
+    var defaults = {};
+    variables.forEach(function (variable) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var name = variable === null || variable === void 0 ? void 0 : variable.name;
+        if (!name)
+            return;
+        if (isDateRangeVariable(variable)) {
+            var presetRange = resolvePresetRange((_b = (_a = variable === null || variable === void 0 ? void 0 : variable.defaultValue) === null || _a === void 0 ? void 0 : _a.preset) !== null && _b !== void 0 ? _b : variable === null || variable === void 0 ? void 0 : variable.defaultValuePreset);
+            var start = (_f = parseDateValue((_d = (_c = variable === null || variable === void 0 ? void 0 : variable.defaultValue) === null || _c === void 0 ? void 0 : _c.start) !== null && _d !== void 0 ? _d : (_e = variable === null || variable === void 0 ? void 0 : variable.defaultValue) === null || _e === void 0 ? void 0 : _e.from)) !== null && _f !== void 0 ? _f : presetRange.start;
+            var end = (_k = parseDateValue((_h = (_g = variable === null || variable === void 0 ? void 0 : variable.defaultValue) === null || _g === void 0 ? void 0 : _g.end) !== null && _h !== void 0 ? _h : (_j = variable === null || variable === void 0 ? void 0 : variable.defaultValue) === null || _j === void 0 ? void 0 : _j.to)) !== null && _k !== void 0 ? _k : presetRange.end;
+            var preset = "".concat((_o = (_m = (_l = variable === null || variable === void 0 ? void 0 : variable.defaultValue) === null || _l === void 0 ? void 0 : _l.preset) !== null && _m !== void 0 ? _m : variable === null || variable === void 0 ? void 0 : variable.defaultValuePreset) !== null && _o !== void 0 ? _o : "").trim() ||
+                (start || end ? "custom" : "custom");
+            defaults[name] = { start: start, end: end, preset: preset };
+            return;
+        }
+        if (isMultiValueVariable(variable)) {
+            var base = variable === null || variable === void 0 ? void 0 : variable.defaultValue;
+            defaults[name] = Array.isArray(base) ? base.map(function (entry) { return "".concat(entry); }) : [];
+            return;
+        }
+        if ((variable === null || variable === void 0 ? void 0 : variable.defaultValue) !== undefined && (variable === null || variable === void 0 ? void 0 : variable.defaultValue) !== null) {
+            defaults[name] = "".concat(variable.defaultValue);
+            return;
+        }
+        defaults[name] = "";
+    });
+    return defaults;
+};
+var buildClearedFilterValues = function (variables) {
+    var cleared = {};
+    variables.forEach(function (variable) {
+        var name = variable === null || variable === void 0 ? void 0 : variable.name;
+        if (!name)
+            return;
+        if (isDateRangeVariable(variable)) {
+            cleared[name] = { start: null, end: null, preset: "custom" };
+            return;
+        }
+        if (isMultiValueVariable(variable)) {
+            cleared[name] = [];
+            return;
+        }
+        cleared[name] = "";
+    });
+    return cleared;
+};
+var isFilterValueApplied = function (variable, value) {
+    if (isDateRangeVariable(variable)) {
+        var range = value;
+        return !!(range === null || range === void 0 ? void 0 : range.start) || !!(range === null || range === void 0 ? void 0 : range.end);
+    }
+    if (isMultiValueVariable(variable)) {
+        return Array.isArray(value) && value.length > 0;
+    }
+    return value !== undefined && value !== null && "".concat(value).trim() !== "";
+};
+var isSameFilterValue = function (variable, left, right) {
+    var _a, _b;
+    if (isDateRangeVariable(variable)) {
+        var leftRange = (_a = left) !== null && _a !== void 0 ? _a : { start: null, end: null };
+        var rightRange = (_b = right) !== null && _b !== void 0 ? _b : { start: null, end: null };
+        return toIso(leftRange.start) === toIso(rightRange.start) && toIso(leftRange.end) === toIso(rightRange.end);
+    }
+    if (isMultiValueVariable(variable)) {
+        var leftArr = Array.isArray(left) ? left.map(function (v) { return "".concat(v); }).sort() : [];
+        var rightArr_1 = Array.isArray(right) ? right.map(function (v) { return "".concat(v); }).sort() : [];
+        if (leftArr.length !== rightArr_1.length)
+            return false;
+        return leftArr.every(function (value, index) { return value === rightArr_1[index]; });
+    }
+    return "".concat(left !== null && left !== void 0 ? left : "") === "".concat(right !== null && right !== void 0 ? right : "");
+};
+var getDashboardTitle = function (definition, fallback) { var _a, _b, _c; return (_c = (_b = (_a = definition === null || definition === void 0 ? void 0 : definition.displayName) !== null && _a !== void 0 ? _a : definition === null || definition === void 0 ? void 0 : definition.title) !== null && _b !== void 0 ? _b : definition === null || definition === void 0 ? void 0 : definition.name) !== null && _c !== void 0 ? _c : fallback; };
+var getWidgetTitle = function (widget, fallback) { var _a, _b, _c; return (_c = (_b = (_a = widget === null || widget === void 0 ? void 0 : widget.displayName) !== null && _a !== void 0 ? _a : widget === null || widget === void 0 ? void 0 : widget.title) !== null && _b !== void 0 ? _b : widget === null || widget === void 0 ? void 0 : widget.name) !== null && _c !== void 0 ? _c : fallback; };
+var isUnauthorizedWidgetRuntime = function (runtime) { var _a, _b; return !!(((_a = runtime === null || runtime === void 0 ? void 0 : runtime.meta) === null || _a === void 0 ? void 0 : _a.unauthorized) || ((_b = runtime === null || runtime === void 0 ? void 0 : runtime.uiHints) === null || _b === void 0 ? void 0 : _b.state) === "unauthorized"); };
 export function DashboardPage() {
+    var _this = this;
+    var _a, _b, _c, _d, _e;
     var params = useParams();
-    var dashboardName = params.dashboardName;
-    var moduleName = params.moduleName;
-    return (_jsx("div", { children: _jsx(SolidDashboard, { moduleName: moduleName, dashboardName: dashboardName }) }));
+    var moduleName = (_a = params.moduleName) !== null && _a !== void 0 ? _a : "";
+    var dashboardName = (_b = params.dashboardName) !== null && _b !== void 0 ? _b : "";
+    var gridRef = useRef(null);
+    var gridInstanceRef = useRef(null);
+    var _f = useGetDashboardDefinitionQuery({ moduleName: moduleName, dashboardName: dashboardName }, { skip: !moduleName || !dashboardName }), definition = _f.data, definitionLoading = _f.isLoading;
+    var layoutData = useGetDashboardLayoutQuery({ moduleName: moduleName, dashboardName: dashboardName }, { skip: !moduleName || !dashboardName }).data;
+    var _g = useGetDashboardDataMutation(), getDashboardData = _g[0], _h = _g[1], dashboardData = _h.data, dataLoading = _h.isLoading, dataError = _h.error;
+    var _j = useSaveDashboardLayoutMutation(), saveDashboardLayout = _j[0], saveLayoutLoading = _j[1].isLoading;
+    var getVariableOptions = useLazyGetDashboardVariableOptionsQuery()[0];
+    var _k = useState({}), appliedVariableValues = _k[0], setAppliedVariableValues = _k[1];
+    var _l = useState({}), filterDraftValues = _l[0], setFilterDraftValues = _l[1];
+    var _m = useState({}), dynamicOptions = _m[0], setDynamicOptions = _m[1];
+    var _o = useState(null), draftLayoutItems = _o[0], setDraftLayoutItems = _o[1];
+    var _p = useState(false), isFilterDialogOpen = _p[0], setIsFilterDialogOpen = _p[1];
+    var _q = useState(function () {
+        return typeof window === "undefined" ? TABLET_DASHBOARD_BREAKPOINT : window.innerWidth;
+    }), viewportWidth = _q[0], setViewportWidth = _q[1];
+    var bootstrappedRef = useRef(false);
+    var variables = useMemo(function () { return (Array.isArray(definition === null || definition === void 0 ? void 0 : definition.variables) ? definition.variables : []); }, [definition]);
+    var definitionWidgets = useMemo(function () { return (Array.isArray(definition === null || definition === void 0 ? void 0 : definition.widgets) ? definition.widgets : []); }, [definition]);
+    var effectiveLayoutItems = useMemo(function () { var _a, _b; return toLayoutItems((_b = (_a = layoutData === null || layoutData === void 0 ? void 0 : layoutData.effectiveLayout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []); }, [layoutData]);
+    var gridColumns = Number((_d = (_c = layoutData === null || layoutData === void 0 ? void 0 : layoutData.effectiveLayout) === null || _c === void 0 ? void 0 : _c.columns) !== null && _d !== void 0 ? _d : 12) || 12;
+    var activeGridColumns = useMemo(function () { return getResponsiveDashboardColumns(viewportWidth, gridColumns); }, [gridColumns, viewportWidth]);
+    var isCompactLayout = activeGridColumns !== gridColumns;
+    var defaultFilterValues = useMemo(function () { return buildDefaultFilterValues(variables); }, [variables]);
+    useEffect(function () {
+        var handleViewportResize = function () {
+            setViewportWidth(window.innerWidth);
+        };
+        handleViewportResize();
+        window.addEventListener("resize", handleViewportResize);
+        return function () { return window.removeEventListener("resize", handleViewportResize); };
+    }, []);
+    useEffect(function () {
+        if (!definition || bootstrappedRef.current)
+            return;
+        setAppliedVariableValues(defaultFilterValues);
+        setFilterDraftValues(defaultFilterValues);
+        bootstrappedRef.current = true;
+    }, [definition, defaultFilterValues]);
+    useEffect(function () {
+        if (!isFilterDialogOpen)
+            return;
+        setFilterDraftValues(appliedVariableValues);
+    }, [appliedVariableValues, isFilterDialogOpen]);
+    useEffect(function () {
+        if (!moduleName || !dashboardName || variables.length === 0)
+            return;
+        var dynamicVariables = variables.filter(function (variable) { return isDynamicVariable(variable); });
+        dynamicVariables.forEach(function (variable) {
+            var variableName = variable === null || variable === void 0 ? void 0 : variable.name;
+            if (!variableName)
+                return;
+            void getVariableOptions({ moduleName: moduleName, dashboardName: dashboardName, variableName: variableName, limit: 100 })
+                .unwrap()
+                .then(function (response) {
+                setDynamicOptions(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[variableName] = toOptions(Array.isArray(response) ? response : []), _a)));
+                });
+            })
+                .catch(function () {
+                setDynamicOptions(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[variableName] = [], _a)));
+                });
+            });
+        });
+    }, [dashboardName, getVariableOptions, moduleName, variables]);
+    var handleDynamicOptionsSearch = function (variableName, query) { return __awaiter(_this, void 0, void 0, function () {
+        var response_1, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!moduleName || !dashboardName || !variableName)
+                        return [2 /*return*/];
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, getVariableOptions({ moduleName: moduleName, dashboardName: dashboardName, variableName: variableName, query: query, limit: 100 }).unwrap()];
+                case 2:
+                    response_1 = _b.sent();
+                    setDynamicOptions(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[variableName] = toOptions(Array.isArray(response_1) ? response_1 : []), _a)));
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a = _b.sent();
+                    setDynamicOptions(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[variableName] = [], _a)));
+                    });
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (!bootstrappedRef.current || !moduleName || !dashboardName)
+            return;
+        void handleRefresh(appliedVariableValues);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [moduleName, dashboardName, bootstrappedRef.current]);
+    var widgetDefinitionMap = useMemo(function () {
+        var map = new Map();
+        definitionWidgets.forEach(function (widget) {
+            if (widget === null || widget === void 0 ? void 0 : widget.id)
+                map.set(widget.id, widget);
+            if (widget === null || widget === void 0 ? void 0 : widget.name)
+                map.set(widget.name, widget);
+        });
+        return map;
+    }, [definitionWidgets]);
+    var widgetDataMap = useMemo(function () {
+        var map = new Map();
+        var rows = Array.isArray(dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.widgets) ? dashboardData.widgets : [];
+        rows.forEach(function (row) {
+            var name = extractWidgetName(row);
+            if (name)
+                map.set(name, row);
+        });
+        return map;
+    }, [dashboardData]);
+    var orderedWidgets = useMemo(function () {
+        var layoutItems = sortLayoutItems(effectiveLayoutItems);
+        if (!layoutItems.length)
+            return definitionWidgets;
+        var seen = new Set();
+        var arranged = [];
+        layoutItems.forEach(function (item) {
+            var key = item === null || item === void 0 ? void 0 : item.widgetId;
+            var definitionWidget = widgetDefinitionMap.get(key);
+            if (!definitionWidget || seen.has(key))
+                return;
+            arranged.push(definitionWidget);
+            seen.add(key);
+        });
+        definitionWidgets.forEach(function (widget) {
+            var _a;
+            var key = (_a = widget === null || widget === void 0 ? void 0 : widget.id) !== null && _a !== void 0 ? _a : widget === null || widget === void 0 ? void 0 : widget.name;
+            if (!key || seen.has(key))
+                return;
+            arranged.push(widget);
+        });
+        return arranged;
+    }, [definitionWidgets, effectiveLayoutItems, widgetDefinitionMap]);
+    var widgetLayoutMap = useMemo(function () {
+        var map = new Map();
+        effectiveLayoutItems.forEach(function (item) { return map.set(item.widgetId, item); });
+        return map;
+    }, [effectiveLayoutItems]);
+    var baseLayoutItems = useMemo(function () {
+        if (effectiveLayoutItems.length)
+            return effectiveLayoutItems;
+        return orderedWidgets.map(function (widget, index) {
+            var _a, _b;
+            return ({
+                widgetId: (_b = (_a = widget === null || widget === void 0 ? void 0 : widget.id) !== null && _a !== void 0 ? _a : widget === null || widget === void 0 ? void 0 : widget.name) !== null && _b !== void 0 ? _b : "widget-".concat(index),
+                x: 0,
+                y: index * 3,
+                w: 4,
+                h: 3,
+            });
+        });
+    }, [effectiveLayoutItems, orderedWidgets]);
+    var renderedLayoutItems = useMemo(function () {
+        return compactLayoutItemsForColumns(baseLayoutItems, gridColumns, activeGridColumns);
+    }, [activeGridColumns, baseLayoutItems, gridColumns]);
+    var renderedWidgetLayoutMap = useMemo(function () {
+        var map = new Map();
+        renderedLayoutItems.forEach(function (item) { return map.set(item.widgetId, item); });
+        return map;
+    }, [renderedLayoutItems]);
+    var appliedFilterCount = useMemo(function () {
+        return variables.reduce(function (count, variable) {
+            var name = variable === null || variable === void 0 ? void 0 : variable.name;
+            if (!name)
+                return count;
+            var value = appliedVariableValues[name];
+            var defaultValue = defaultFilterValues[name];
+            if (!isFilterValueApplied(variable, value))
+                return count;
+            return isSameFilterValue(variable, value, defaultValue) ? count : count + 1;
+        }, 0);
+    }, [appliedVariableValues, defaultFilterValues, variables]);
+    useEffect(function () {
+        if (!gridRef.current || orderedWidgets.length === 0)
+            return;
+        if (gridInstanceRef.current) {
+            gridInstanceRef.current.destroy(false);
+            gridInstanceRef.current = null;
+        }
+        var initialLayout = renderedLayoutItems.length ? renderedLayoutItems : baseLayoutItems;
+        var gridWidgets = initialLayout.map(function (item) { return ({
+            id: item.widgetId,
+            x: item.x,
+            y: item.y,
+            w: item.w,
+            h: item.h,
+            minW: item.minW,
+            minH: item.minH,
+        }); });
+        var instance = GridStack.init({
+            column: activeGridColumns,
+            cellHeight: activeGridColumns === 1 ? 90 : 92,
+            margin: activeGridColumns === 1 ? 10 : 8,
+            float: true,
+            disableDrag: isCompactLayout,
+            disableResize: isCompactLayout,
+        }, gridRef.current);
+        // React renders the DOM; make sure Gridstack converts every item node to a widget,
+        // then explicitly apply layout from API to avoid attribute-parsing or timing issues.
+        instance.batchUpdate();
+        var domItems = Array.from(gridRef.current.querySelectorAll(".grid-stack-item"));
+        domItems.forEach(function (itemEl) {
+            if (!itemEl.gridstackNode) {
+                instance.makeWidget(itemEl);
+            }
+        });
+        instance.column(activeGridColumns, "none");
+        instance.load(gridWidgets, false);
+        instance.batchUpdate(false);
+        notifyDashboardChartsToResize();
+        window.setTimeout(notifyDashboardChartsToResize, 60);
+        instance.on("change", function (_event, _items) {
+            var normalized = getAllLayoutItemsFromGrid(instance);
+            setDraftLayoutItems(normalized);
+            notifyDashboardChartsToResize();
+        });
+        instance.on("resizestop", function () { return notifyDashboardChartsToResize(); });
+        instance.on("dragstop", function () { return notifyDashboardChartsToResize(); });
+        gridInstanceRef.current = instance;
+        return function () {
+            instance.destroy(false);
+            if (gridInstanceRef.current === instance)
+                gridInstanceRef.current = null;
+        };
+    }, [activeGridColumns, baseLayoutItems, isCompactLayout, orderedWidgets, renderedLayoutItems]);
+    var handleDraftVariableChange = function (variableName, value) {
+        setFilterDraftValues(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[variableName] = value, _a)));
+        });
+    };
+    var buildPayloadVariables = function (values) {
+        var payload = {};
+        variables.forEach(function (variable) {
+            var _a, _b;
+            var name = variable === null || variable === void 0 ? void 0 : variable.name;
+            if (!name)
+                return;
+            var value = values[name];
+            if (isDateRangeVariable(variable)) {
+                var range = value;
+                var from = toIso((_a = range === null || range === void 0 ? void 0 : range.start) !== null && _a !== void 0 ? _a : null);
+                var to = toIso((_b = range === null || range === void 0 ? void 0 : range.end) !== null && _b !== void 0 ? _b : null);
+                if (!from && !to)
+                    return;
+                payload[name] = { from: from, to: to };
+                return;
+            }
+            if (isMultiValueVariable(variable)) {
+                var list = Array.isArray(value) ? value.filter(Boolean) : [];
+                if (!list.length)
+                    return;
+                payload[name] = list;
+                return;
+            }
+            if (value === undefined || value === null || value === "")
+                return;
+            payload[name] = value;
+        });
+        return payload;
+    };
+    function handleRefresh(values) {
+        if (values === void 0) { values = appliedVariableValues; }
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!moduleName || !dashboardName)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, getDashboardData({
+                                moduleName: moduleName,
+                                dashboardName: dashboardName,
+                                variables: buildPayloadVariables(values),
+                            }).unwrap()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handleApplyFilters() {
+        return __awaiter(this, void 0, void 0, function () {
+            var nextValues;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        nextValues = __assign({}, filterDraftValues);
+                        setAppliedVariableValues(nextValues);
+                        setIsFilterDialogOpen(false);
+                        return [4 /*yield*/, handleRefresh(nextValues)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handleClearFilters() {
+        return __awaiter(this, void 0, void 0, function () {
+            var clearedValues;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        clearedValues = buildClearedFilterValues(variables);
+                        setFilterDraftValues(clearedValues);
+                        setAppliedVariableValues(clearedValues);
+                        setIsFilterDialogOpen(false);
+                        return [4 /*yield*/, handleRefresh(clearedValues)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handleSaveLayout() {
+        return __awaiter(this, void 0, void 0, function () {
+            var liveGridLayout, baseLayout, items;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!moduleName || !dashboardName)
+                            return [2 /*return*/];
+                        if (isCompactLayout)
+                            return [2 /*return*/];
+                        liveGridLayout = getAllLayoutItemsFromGrid(gridInstanceRef.current);
+                        baseLayout = effectiveLayoutItems.length ? effectiveLayoutItems : [];
+                        items = liveGridLayout.length
+                            ? liveGridLayout
+                            : draftLayoutItems && draftLayoutItems.length
+                                ? draftLayoutItems
+                                : baseLayout;
+                        return [4 /*yield*/, saveDashboardLayout({
+                                moduleName: moduleName,
+                                dashboardName: dashboardName,
+                                layout: {
+                                    engine: "gridstack",
+                                    columns: gridColumns,
+                                    items: items,
+                                },
+                            }).unwrap()];
+                    case 1:
+                        _a.sent();
+                        setDraftLayoutItems(null);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    var renderVariable = function (variable) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var variableName = variable === null || variable === void 0 ? void 0 : variable.name;
+        if (!variableName)
+            return null;
+        var value = filterDraftValues[variableName];
+        var label = (_b = (_a = variable === null || variable === void 0 ? void 0 : variable.displayName) !== null && _a !== void 0 ? _a : variable === null || variable === void 0 ? void 0 : variable.label) !== null && _b !== void 0 ? _b : variableName;
+        if (isDateRangeVariable(variable)) {
+            var range_1 = (_c = value) !== null && _c !== void 0 ? _c : { start: null, end: null };
+            var presetOptions = getDatePresetOptions(variable);
+            var preset = (range_1 === null || range_1 === void 0 ? void 0 : range_1.preset) && presetOptions.some(function (entry) { return entry.value === range_1.preset; }) ? range_1.preset : "custom";
+            return (_jsxs("div", { className: styles.filterField, children: [_jsx("label", { className: styles.filterLabel, children: label }), _jsx(SolidSelect, { value: preset, options: presetOptions, optionLabel: "label", optionValue: "value", placeholder: "Select ".concat(label, " preset"), onChange: function (event) {
+                            var _a, _b, _c, _d, _e;
+                            var selectedPreset = "".concat((_a = event === null || event === void 0 ? void 0 : event.value) !== null && _a !== void 0 ? _a : "custom");
+                            if (selectedPreset === "custom") {
+                                handleDraftVariableChange(variableName, {
+                                    start: (_b = range_1.start) !== null && _b !== void 0 ? _b : null,
+                                    end: (_c = range_1.end) !== null && _c !== void 0 ? _c : null,
+                                    preset: "custom",
+                                });
+                                return;
+                            }
+                            var nextRange = resolvePresetRange(selectedPreset);
+                            handleDraftVariableChange(variableName, {
+                                start: (_d = nextRange.start) !== null && _d !== void 0 ? _d : null,
+                                end: (_e = nextRange.end) !== null && _e !== void 0 ? _e : null,
+                                preset: selectedPreset,
+                            });
+                        } }), preset === "custom" ? (_jsxs("div", { className: styles.dateRange, children: [_jsx(SolidDatePicker, { selected: (_d = range_1.start) !== null && _d !== void 0 ? _d : null, inputClassName: "w-full", onChange: function (next) {
+                                    var _a;
+                                    return handleDraftVariableChange(variableName, {
+                                        start: next !== null && next !== void 0 ? next : null,
+                                        end: (_a = range_1.end) !== null && _a !== void 0 ? _a : null,
+                                        preset: "custom",
+                                    });
+                                }, placeholderText: "Start date", dateFormat: "yyyy-MM-dd" }), _jsx(SolidDatePicker, { selected: (_e = range_1.end) !== null && _e !== void 0 ? _e : null, inputClassName: "w-full", onChange: function (next) {
+                                    var _a;
+                                    return handleDraftVariableChange(variableName, {
+                                        start: (_a = range_1.start) !== null && _a !== void 0 ? _a : null,
+                                        end: next !== null && next !== void 0 ? next : null,
+                                        preset: "custom",
+                                    });
+                                }, placeholderText: "End date", dateFormat: "yyyy-MM-dd" })] })) : null] }, variableName));
+        }
+        if (isMultiValueVariable(variable)) {
+            var baseOptions = isDynamicVariable(variable)
+                ? ((_f = dynamicOptions[variableName]) !== null && _f !== void 0 ? _f : [])
+                : toOptions((_h = (_g = variable === null || variable === void 0 ? void 0 : variable.selectionStaticValues) !== null && _g !== void 0 ? _g : variable === null || variable === void 0 ? void 0 : variable.options) !== null && _h !== void 0 ? _h : []);
+            var selectedValues_1 = Array.isArray(value) ? value : [];
+            return (_jsxs("div", { className: styles.filterField, children: [_jsx("label", { className: styles.filterLabel, children: label }), _jsx(SolidAutocomplete, { multiple: true, dropdown: true, field: "label", className: "w-full", inputClassName: "w-full", value: baseOptions.filter(function (option) { return selectedValues_1.includes(option.value); }), suggestions: baseOptions, completeMethod: function () { return Promise.resolve(); }, placeholder: "Select ".concat(label), onChange: function (event) {
+                            var selected = Array.isArray(event === null || event === void 0 ? void 0 : event.value)
+                                ? event.value
+                                    .map(function (entry) { var _a, _b, _c; return "".concat((_c = (_b = (_a = entry === null || entry === void 0 ? void 0 : entry.value) !== null && _a !== void 0 ? _a : entry === null || entry === void 0 ? void 0 : entry.id) !== null && _b !== void 0 ? _b : entry) !== null && _c !== void 0 ? _c : ""); })
+                                    .filter(function (entry) { return !!entry; })
+                                : [];
+                            handleDraftVariableChange(variableName, selected);
+                        } })] }, variableName));
+        }
+        if (isDynamicVariable(variable)) {
+            var options_1 = (_j = dynamicOptions[variableName]) !== null && _j !== void 0 ? _j : [];
+            var selectedValue_1 = typeof value === "string" ? value : "";
+            var selectedOption = (_k = options_1.find(function (entry) { return "".concat(entry.value) === selectedValue_1; })) !== null && _k !== void 0 ? _k : null;
+            return (_jsxs("div", { className: styles.filterField, children: [_jsx("label", { className: styles.filterLabel, children: label }), _jsx(SolidAutocomplete, { dropdown: true, field: "label", className: "w-full", inputClassName: "w-full", value: selectedOption, suggestions: options_1, completeMethod: function (_a) {
+                            var query = _a.query;
+                            return handleDynamicOptionsSearch(variableName, query);
+                        }, placeholder: "Select ".concat(label), onChange: function (event) {
+                            var _a, _b;
+                            var selected = event === null || event === void 0 ? void 0 : event.value;
+                            var nextValue = (_b = (_a = selected === null || selected === void 0 ? void 0 : selected.value) !== null && _a !== void 0 ? _a : selected === null || selected === void 0 ? void 0 : selected.id) !== null && _b !== void 0 ? _b : "";
+                            handleDraftVariableChange(variableName, nextValue ? "".concat(nextValue) : "");
+                        } })] }, variableName));
+        }
+        var options = isDynamicVariable(variable)
+            ? ((_l = dynamicOptions[variableName]) !== null && _l !== void 0 ? _l : [])
+            : isStaticVariable(variable)
+                ? toOptions((_o = (_m = variable === null || variable === void 0 ? void 0 : variable.selectionStaticValues) !== null && _m !== void 0 ? _m : variable === null || variable === void 0 ? void 0 : variable.options) !== null && _o !== void 0 ? _o : [])
+                : [];
+        return (_jsxs("div", { className: styles.filterField, children: [_jsx("label", { className: styles.filterLabel, children: label }), _jsx(SolidSelect, { value: typeof value === "string" ? value : "", options: options, optionLabel: "label", optionValue: "value", placeholder: "Select ".concat(label), onChange: function (event) { return handleDraftVariableChange(variableName, event.value ? "".concat(event.value) : ""); } })] }, variableName));
+    };
+    var renderWidgetBody = function (widgetDefinition, runtime) {
+        var _a, _b, _c, _d;
+        if (isUnauthorizedWidgetRuntime(runtime)) {
+            return (_jsxs("div", { className: styles.widgetUnauthorizedState, children: [_jsx(AlertTriangle, { size: 18, className: styles.widgetUnauthorizedIcon }), _jsx("span", { className: styles.widgetUnauthorizedText, children: (_b = (_a = runtime === null || runtime === void 0 ? void 0 : runtime.uiHints) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : "Unauthorized" })] }));
+        }
+        var componentName = getPreferredWidgetComponentName(widgetDefinition, runtime);
+        var ExtensionWidget = getExtensionComponent(componentName);
+        if (!ExtensionWidget) {
+            var UnknownWidget = getExtensionComponent("DefaultDashboardUnknownWidget");
+            if (!UnknownWidget)
+                return _jsx("pre", { children: JSON.stringify((_d = (_c = runtime === null || runtime === void 0 ? void 0 : runtime.data) !== null && _c !== void 0 ? _c : runtime) !== null && _d !== void 0 ? _d : {}, null, 2) });
+            return _jsx(UnknownWidget, { definition: widgetDefinition, runtime: runtime, variables: appliedVariableValues });
+        }
+        return (_jsx(ExtensionWidget, __assign({}, ({ definition: widgetDefinition, runtime: runtime, variables: appliedVariableValues }))));
+    };
+    if (definitionLoading) {
+        return (_jsx("div", { className: styles.page, children: _jsx(SolidSpinner, {}) }));
+    }
+    return (_jsxs("div", { className: styles.page, children: [_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles.titleBlock, children: [_jsx("h1", { className: styles.title, children: getDashboardTitle(definition, dashboardName) }), _jsx("p", { className: styles.subtitle, children: (_e = definition === null || definition === void 0 ? void 0 : definition.description) !== null && _e !== void 0 ? _e : "".concat(moduleName, " / ").concat(dashboardName) })] }), _jsxs("div", { className: styles.headerActions, children: [_jsxs("div", { className: styles.filterButtonWrap, children: [_jsx(SolidButton, { className: styles.iconButton, leftIcon: _jsx(Filter, { size: 16 }), onClick: function () { return setIsFilterDialogOpen(true); }, tooltip: "Filters", "aria-label": "Filters" }), appliedFilterCount > 0 ? _jsx("span", { className: styles.filterCountBadge, children: appliedFilterCount }) : null] }), _jsx(SolidButton, { className: styles.iconButton, leftIcon: _jsx(RefreshCw, { size: 16 }), onClick: function () { return void handleRefresh(); }, disabled: dataLoading, tooltip: "Refresh", "aria-label": "Refresh" }), _jsx(SolidButton, { className: styles.iconButton, leftIcon: _jsx(Save, { size: 16 }), onClick: function () { return void handleSaveLayout(); }, disabled: saveLayoutLoading || isCompactLayout, tooltip: "Save Layout", "aria-label": "Save Layout" })] })] }), _jsxs(SolidDialog, { open: isFilterDialogOpen, onOpenChange: setIsFilterDialogOpen, header: "Dashboard Filters", contentClassName: styles.filterDialogContent, children: [_jsx(SolidDialogBody, { children: _jsx("div", { className: styles.filterModalColumn, children: variables.map(renderVariable) }) }), _jsxs(SolidDialogFooter, { className: styles.filterModalActions, children: [_jsx(SolidButton, { variant: "outline", onClick: function () { return void handleClearFilters(); }, children: "Clear" }), _jsx(SolidButton, { onClick: function () { return void handleApplyFilters(); }, children: "Apply" })] })] }), dataError ? _jsx("p", { className: styles.error, children: "Failed to load dashboard data." }) : null, _jsx("div", { ref: gridRef, className: "grid-stack ".concat(styles.gridStack, " ").concat(isCompactLayout ? styles.gridStackCompact : ""), children: orderedWidgets.map(function (widget) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    var widgetName = (_a = widget === null || widget === void 0 ? void 0 : widget.id) !== null && _a !== void 0 ? _a : widget === null || widget === void 0 ? void 0 : widget.name;
+                    var runtime = widgetDataMap.get(widgetName);
+                    var slot = (_b = renderedWidgetLayoutMap.get(widgetName)) !== null && _b !== void 0 ? _b : widgetLayoutMap.get(widgetName);
+                    return (_jsx("div", { className: "grid-stack-item", "gs-id": widgetName, "gs-x": (_c = slot === null || slot === void 0 ? void 0 : slot.x) !== null && _c !== void 0 ? _c : 0, "gs-y": (_d = slot === null || slot === void 0 ? void 0 : slot.y) !== null && _d !== void 0 ? _d : 0, "gs-w": (_e = slot === null || slot === void 0 ? void 0 : slot.w) !== null && _e !== void 0 ? _e : 4, "gs-h": (_f = slot === null || slot === void 0 ? void 0 : slot.h) !== null && _f !== void 0 ? _f : 3, "gs-min-w": (_g = slot === null || slot === void 0 ? void 0 : slot.minW) !== null && _g !== void 0 ? _g : 2, "gs-min-h": (_h = slot === null || slot === void 0 ? void 0 : slot.minH) !== null && _h !== void 0 ? _h : 2, children: _jsxs("div", { className: "grid-stack-item-content ".concat(styles.widgetCard), children: [_jsx("h3", { className: styles.widgetTitle, children: getWidgetTitle(widget, widgetName) }), _jsx("div", { className: styles.widgetBody, children: runtime ? renderWidgetBody(widget, runtime) : _jsx("p", { className: styles.muted, children: "No data" }) })] }) }, widgetName));
+                }) })] }));
 }
 //# sourceMappingURL=DashboardPage.js.map