@solidxai/core-ui 0.1.9-beta.19 → 0.1.9-beta.20

package/dist/resources/solid-responsive.css

@@ -1,21 +1,25 @@
-@media(max-width:1399px){
-
-.kanban-ungrouped-column-content {
-    column-gap: 20px;
-  }
-  
-  .kanban-card-container {
-    margin-top: 1.5rem;
-  }
-  
-  .kanban-ungrouped-column .kanban-card-container {
-    flex: 1 1 calc(20% - 20px);
-    max-width: calc(20% - 20px);
-  }
-
-  .solid-card-view-grid {
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  }
+@media(max-width:1399px) {
+
+    .kanban-ungrouped-column-content {
+        column-gap: 20px;
+    }
+
+    .kanban-card-container {
+        margin-top: 1.5rem;
+    }
+
+    .kanban-ungrouped-column .kanban-card-container {
+        flex: 1 1 calc(20% - 20px);
+        max-width: calc(20% - 20px);
+    }
+
+    .solid-card-view-grid {
+        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    }
+
+    .solid-kanban-board-wrapper {
+        width: calc(100vw - 315px) !important;
+    }
 }
 
 @media (max-width: 1199px) {
@@ -149,12 +153,15 @@
     .kanban-ungrouped-column .kanban-card-container {
         flex: 1 1 calc(33.33% - 20px);
         max-width: calc(33.33% - 20px);
-      }
+    }
 
     .solid-card-view-grid {
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-      }
+    }
 
+    .solid-kanban-board-wrapper {
+        width: calc(100vw - 40px) !important;
+    }
 }
 
 
@@ -223,12 +230,12 @@
     }
 
     .solid-custom-filter-wrapper .p-inputtext {
-        width: 100%;
+        width: 100% !important;
     }
 
     .solid-global-search-element {
         min-height: 36px;
-        height: auto;
+        height: auto !important;
     }
 
     .solid-global-search-element input {
@@ -302,9 +309,32 @@
     .solid-form-header {
         padding: 10px 16px 16px 20px !important;
     }
-    .solid-form-wrapper .solid-form-content {
+
+
+    /* .solid-form-wrapper .solid-form-content {
+        height: calc(100vh - 165px) !important;
+    } */
+
+    .solid-form-wrapper .solid-form-content.solid-form-view {
+        height: calc(100vh - 167px) !important;
+    }
+
+    .solid-form-wrapper .solid-form-content.solid-form-edit {
+        height: calc(100vh - 135px) !important;
+    }
+
+    /* .solid-form-wrapper .solid-form-content {
         height: calc(100vh - 139px) !important;
-      }
+    }
+        */
+
+    .solid-inline-relation-dialog .solid-form-content,
+    .solid-inline-relation-dialog .solid-create-mode-form-content {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+
+    }
 
 
     .solid-text-wrapper {
@@ -327,6 +357,21 @@
     }
 
 
+    .solid-list-surface {
+        height: calc(100vh - 70px) !important;
+    }
+
+    .solid-export-summary-chip {
+        max-height: 16px;
+    }
+
+    .solid-radix-dialog-content {
+        width: 85vw !important;
+    }
+
+    .solid-file-upload-wrapper {
+        padding: 6px 6px 6px 0px;
+    }
 
 }
 
@@ -415,7 +460,7 @@
     }
 
     .p-dialog .p-dialog-header {
-        padding: 1rem 1.5rem ;
+        padding: 1rem 1.5rem;
     }
 
     .solid-icon-dialog {
@@ -447,7 +492,7 @@
     }
 
 
-    
+
     /* =================  cog wheel ================== */
     .customize-layout-panel.p-overlaypanel {
         top: 16% !important;
@@ -487,9 +532,9 @@
         width: calc(100vw - 80px);
     }
 
-     .solid-global-search-element input {
+    .solid-global-search-element input {
         height: 28px;
-    } 
+    }
 
     .solid-filter-auto-complete-field button {
         height: 2.5rem !important;
@@ -530,9 +575,24 @@
         padding: 10px 16px 12px 16px !important;
     }
 
-    .solid-form-wrapper .solid-form-content {
+    .solid-form-wrapper .solid-form-content.solid-form-view {
+        height: calc(100vh - 167px) !important;
+    }
+
+    .solid-form-wrapper .solid-form-content.solid-form-edit {
+        height: calc(100vh - 135px) !important;
+    }
+
+    /* .solid-form-wrapper .solid-form-content {
         height: calc(100vh - 132px) !important;
-      }
+    } */
+
+    .solid-inline-relation-dialog .solid-form-content,
+    .solid-inline-relation-dialog .solid-create-mode-form-content {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+    }
 
     .form-wrapper-title {
         font-size: 14px !important;
@@ -566,7 +626,7 @@
         text-overflow: ellipsis;
     }
 
-    .solid-module-mobile-text-wrapper{
+    .solid-module-mobile-text-wrapper {
         max-width: clamp(180px, 65vw, 600px);
         white-space: nowrap;
         overflow: hidden;
@@ -576,18 +636,97 @@
     .kanban-ungrouped-column .kanban-card-container {
         flex: 1 1 calc(50% - 20px);
         max-width: calc(50% - 20px);
-      }
+    }
 
-      .solid-card-view-grid {
+    .solid-card-view-grid {
         grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-      }
+    }
 
-      .solid-img-text-wrapper{
+    .solid-img-text-wrapper {
         max-width: clamp(180px, 60vw, 600px);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    .solid-popover-content.solid-custom-overlay.solid-form-stepper-overlay {
+        left: -86px !important;
+    }
+
+    .solid-list-page-wrapper {
+        padding: 8px;
+    }
+
+    .solid-global-search-element {
+        padding: 0px !important;
+    }
+
+    .solid-global-search-element ul {
+        /* padding: 3px !important; */
+    }
+
+    .solid-autocomplete-chip {
+        min-height: 22px !important;
+        height: 22px !important;
+    }
+
+    .solid-filter-builder,
+    .solid-filter-rule-row,
+    .solid-filter-control-wrap {
+        overflow: visible;
+    }
+
+    .dialog-content {
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .solid-select-wrap {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .solid-select {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .solid-filter-rule-field,
+    .solid-filter-rule-value {
+        min-width: 0;
+    }
+
+    .solid-radix-dialog-content {
+        width: 95vw !important;
+    }
+
+    .solid-media-column-text-wrapper {
+        max-width: clamp(200px, 34vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .solid-list-view-text-wrapper {
+        max-width: clamp(200px, 50vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .solid-bread-crum-text-wrapper {
+        max-width: clamp(150px, 35vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+
+    .solid-form-actions-menu {
+        gap: 0px;
+    }
+
 }
 
 
@@ -619,6 +758,20 @@
         font-size: 0.9rem !important;
     }
 
+    .solid-inline-relation-dialog {
+        width: calc(100vw - 12px) !important;
+        max-width: calc(100vw - 12px) !important;
+        max-height: calc(100dvh - 12px) !important;
+        border-radius: 16px !important;
+    }
+
+    .solid-inline-relation-dialog .solid-form-content,
+    .solid-inline-relation-dialog .solid-create-mode-form-content {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+    }
+
     .text-base {
         font-size: 0.9rem !important;
     }
@@ -649,20 +802,26 @@
         width: 90% !important;
     }
 
-    .solid-module-mobile-text-wrapper{
+    .solid-module-mobile-text-wrapper {
         max-width: clamp(120px, 52vw, 600px);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
-    .solid-img-text-wrapper{
+    .solid-img-text-wrapper {
         max-width: clamp(180px, 50vw, 600px);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
+    .solid-permisson-text-wrapper {
+        max-width: clamp(150px, 65vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
 }
 
@@ -670,11 +829,11 @@
 
     /* ===================== Solid Kanban ==================== */
 
-    .kanban-column:not(.kanban-column-folded) {
+    /* .kanban-column:not(.kanban-column-folded) {
         min-width: 72% !important;
         max-width: 80% !important;
         width: 72% !important;
-    }
+    } */
 
     .kanban-column-folded {
         min-width: fit-content !important;
@@ -686,18 +845,18 @@
     .kanban-ungrouped-column .kanban-card-container {
         flex: 1 1 100%;
         max-width: 100%;
-      }
+    }
 
     .solid-card-view-body {
         padding-left: 12px;
         padding-right: 12px;
-      }
+    }
 
     .solid-card-view-grid {
         grid-template-columns: 1fr;
         gap: 12px;
-      }
-    
+    }
+
 
 
 
@@ -726,17 +885,43 @@
 
 
 
-    .solid-text-wrapper {
+    /* .solid-text-wrapper {
         max-width: clamp(80px, 23vw, 600px);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-    }
+    } */
 
 
-    .solid-img-text-wrapper{
+    .solid-img-text-wrapper {
         max-width: clamp(170px, 40vw, 600px);
     }
+
+    .solid-form-stepper-overlay {
+        width: max-content;
+        min-width: 208px;
+        max-width: min(300px, calc(100vw - 40px));
+    }
+
+    .solid-popover-content.solid-custom-overlay.solid-form-stepper-overlay {
+        left: -86px !important;
+    }
+
+
+    .solid-list-view-text-wrapper {
+        max-width: clamp(100px, 43vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+    .solid-bread-crum-text-wrapper {
+        max-width: clamp(110px, 30vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 
@@ -757,9 +942,9 @@
 }
 
 
-@media(max-width:400px){
-    .solid-img-text-wrapper{
+@media(max-width:400px) {
+    .solid-img-text-wrapper {
         max-width: clamp(137px, 34vw, 600px);
-    
+
     }
-}
+}

package/dist/routes/pages/admin/core/DashboardPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/DashboardPage.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC;AAiV1C,wBAAgB,aAAa,4CAmjB5B"}
+{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/DashboardPage.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC;AAqa1C,wBAAgB,aAAa,4CA8lB5B"}

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

@@ -112,6 +112,58 @@ var sortLayoutItems = function (items) {
         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); })
@@ -355,12 +407,25 @@ export function DashboardPage() {
     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;
@@ -480,6 +545,28 @@ export function DashboardPage() {
         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;
@@ -499,18 +586,7 @@ export function DashboardPage() {
             gridInstanceRef.current.destroy(false);
             gridInstanceRef.current = null;
         }
-        var initialLayout = effectiveLayoutItems.length
-            ? effectiveLayoutItems
-            : 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,
-                });
-            });
+        var initialLayout = renderedLayoutItems.length ? renderedLayoutItems : baseLayoutItems;
         var gridWidgets = initialLayout.map(function (item) { return ({
             id: item.widgetId,
             x: item.x,
@@ -521,10 +597,12 @@ export function DashboardPage() {
             minH: item.minH,
         }); });
         var instance = GridStack.init({
-            column: gridColumns,
-            cellHeight: 92,
-            margin: 8,
+            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.
@@ -535,7 +613,7 @@ export function DashboardPage() {
                 instance.makeWidget(itemEl);
             }
         });
-        instance.column(gridColumns, "none");
+        instance.column(activeGridColumns, "none");
         instance.load(gridWidgets, false);
         instance.batchUpdate(false);
         notifyDashboardChartsToResize();
@@ -553,7 +631,7 @@ export function DashboardPage() {
             if (gridInstanceRef.current === instance)
                 gridInstanceRef.current = null;
         };
-    }, [orderedWidgets, gridColumns, effectiveLayoutItems]);
+    }, [activeGridColumns, baseLayoutItems, isCompactLayout, orderedWidgets, renderedLayoutItems]);
     var handleDraftVariableChange = function (variableName, value) {
         setFilterDraftValues(function (prev) {
             var _a;
@@ -653,6 +731,8 @@ export function DashboardPage() {
                     case 0:
                         if (!moduleName || !dashboardName)
                             return [2 /*return*/];
+                        if (isCompactLayout)
+                            return [2 /*return*/];
                         liveGridLayout = getAllLayoutItemsFromGrid(gridInstanceRef.current);
                         baseLayout = effectiveLayoutItems.length ? effectiveLayoutItems : [];
                         items = liveGridLayout.length
@@ -774,12 +854,12 @@ export function DashboardPage() {
     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, 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), children: orderedWidgets.map(function (widget) {
-                    var _a, _b, _c, _d, _e, _f, _g;
+    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 = widgetLayoutMap.get(widgetName);
-                    return (_jsx("div", { className: "grid-stack-item", "gs-id": widgetName, "gs-x": (_b = slot === null || slot === void 0 ? void 0 : slot.x) !== null && _b !== void 0 ? _b : 0, "gs-y": (_c = slot === null || slot === void 0 ? void 0 : slot.y) !== null && _c !== void 0 ? _c : 0, "gs-w": (_d = slot === null || slot === void 0 ? void 0 : slot.w) !== null && _d !== void 0 ? _d : 4, "gs-h": (_e = slot === null || slot === void 0 ? void 0 : slot.h) !== null && _e !== void 0 ? _e : 3, "gs-min-w": (_f = slot === null || slot === void 0 ? void 0 : slot.minW) !== null && _f !== void 0 ? _f : 2, "gs-min-h": (_g = slot === null || slot === void 0 ? void 0 : slot.minH) !== null && _g !== void 0 ? _g : 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));
+                    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