robobyte-front-builder 1.0.26 → 1.0.28

package/training/examples/14-data-table-with-filters.json

@@ -0,0 +1,180 @@
+{
+  "description": "Filterable data table with status dropdown, date range, text search, export button, and paginated results",
+  "components_used": ["layout", "layout-cell", "header", "label", "input", "dropdown", "datepicker", "button", "dataTableViewer", "kpi-metric", "banner"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 20 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "justifyContent": "space-between", "alignItems": "center" },
+        "children": [
+          { "type": "header", "props": { "text": "Orders", "variant": "h5", "component": "h1", "color": "textPrimary" } },
+          {
+            "type": "button",
+            "props": { "label": "Export CSV", "variant": "outlined", "color": "inherit", "prefix": "DownloadOutlined", "size": "small" },
+            "actions": { "onClick": { "type": "custom", "code": "exportOrders(form)" } }
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "backgroundColor": "#f8f9fa", "borderRadius": "8px", "padding": "16px", "border": "1px solid #e0e0e0" },
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 5, "gap": 12 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": { "colSpan": 2 },
+                "style": {},
+                "children": [
+                  { "type": "input", "props": { "key": "search", "label": "Search orders...", "prefix": "SearchOutlined", "size": "small" }, "style": { "width": "100%" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": {},
+                "children": [
+                  {
+                    "type": "dropdown",
+                    "props": {
+                      "key": "status",
+                      "label": "Status",
+                      "fullWidth": true,
+                      "size": "small",
+                      "options": [
+                        { "label": "All Statuses", "value": "" },
+                        { "label": "Pending", "value": "pending" },
+                        { "label": "Processing", "value": "processing" },
+                        { "label": "Shipped", "value": "shipped" },
+                        { "label": "Delivered", "value": "delivered" },
+                        { "label": "Cancelled", "value": "cancelled" }
+                      ]
+                    }
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": {},
+                "children": [
+                  { "type": "datepicker", "props": { "key": "dateFrom", "label": "From", "fullWidth": true, "size": "small", "format": "MM/DD/YYYY", "clearable": true } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "alignItems": "flex-end", "gap": "8px" },
+                "children": [
+                  {
+                    "type": "button",
+                    "props": { "label": "Apply Filters", "variant": "contained", "color": "primary", "size": "small" },
+                    "actions": { "onClick": { "type": "custom", "code": "filterOrders({ search: form.search, status: form.status, dateFrom: form.dateFrom })" } }
+                  },
+                  { "type": "button", "props": { "label": "Reset", "variant": "text", "color": "inherit", "size": "small" }, "actions": { "onClick": { "type": "reset" } } }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "banner",
+            "props": { "key": "filterBanner", "message": "data.filterMessage", "severity": "info", "open": "data.isFiltered", "variant": "outlined", "dismissible": false, "icon": true }
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 4, "gap": 12 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "padding": "12px 16px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.totalOrders", "label": "Total Orders", "format": "number", "fontSize": "20px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "11px" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "padding": "12px 16px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.totalRevenue", "label": "Total Revenue", "format": "currency", "currency": "USD", "decimals": 0, "fontSize": "20px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "11px" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "padding": "12px 16px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.avgOrderValue", "label": "Avg Order Value", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "20px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "11px" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "padding": "12px 16px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.pendingCount", "label": "Pending", "format": "number", "fontSize": "20px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "11px", "color": "warning.main" } }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)" },
+        "children": [
+          {
+            "type": "dataTableViewer",
+            "props": {
+              "dataKey": "data.orders",
+              "columns": [
+                { "field": "orderNumber", "headerName": "Order #", "width": "120px" },
+                { "field": "customerName", "headerName": "Customer", "width": "180px" },
+                { "field": "date", "headerName": "Date", "width": "120px" },
+                { "field": "items", "headerName": "Items", "width": "80px" },
+                { "field": "total", "headerName": "Total", "width": "120px" },
+                { "field": "status", "headerName": "Status", "width": "120px" },
+                { "field": "shippingMethod", "headerName": "Shipping", "width": "130px" }
+              ],
+              "showHeader": true,
+              "striped": true,
+              "rowHover": true,
+              "bordered": false,
+              "headerBgColor": "#fafafa",
+              "headerFontSize": "13px",
+              "headerTextColor": "#555",
+              "fontSize": "14px",
+              "cellPaddingH": 16,
+              "cellPaddingV": 12
+            }
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [],
+  "actions": [],
+  "timers": []
+}

package/training/examples/15-tabbed-profile.json

@@ -0,0 +1,92 @@
+{
+  "description": "Tabbed user profile page with menu navigation switching between embedded views for each section",
+  "components_used": ["layout", "layout-cell", "header", "label", "image", "menu", "viewRenderer", "kpi-badge", "kpi-statusDot", "divider"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 0 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "backgroundColor": "#1976d2", "padding": "32px 32px 0 32px" },
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 1, "rowGap": 20 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "gap": "20px", "alignItems": "flex-end" },
+                "children": [
+                  { "type": "image", "props": { "src": "data.user.avatarUrl", "alt": "Profile Photo", "width": "80px", "height": "80px", "borderRadius": "50%", "border": "3px solid rgba(255,255,255,0.8)", "objectFit": "cover" } },
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 4 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": { "gap": "10px", "alignItems": "center" }, "children": [
+                        { "type": "header", "props": { "text": "data.user.fullName", "variant": "h5", "component": "h1", "color": "textPrimary", "elementStyle": { "color": "#ffffff" } } },
+                        { "type": "kpi-badge", "props": { "valueKey": "data.user.role", "variant": "soft", "size": "small", "thresholds": [{ "operator": "==", "value": "Admin", "color": "error.main", "label": "Admin" }, { "operator": "==", "value": "Manager", "color": "warning.main", "label": "Manager" }] } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "gap": "12px", "alignItems": "center" }, "children": [
+                        { "type": "label", "props": { "text": "data.user.title", "variant": "body2", "elementStyle": { "color": "rgba(255,255,255,0.8)" } } },
+                        { "type": "kpi-statusDot", "props": { "valueKey": "data.user.status", "size": "8", "pulse": true, "showLabel": true, "thresholds": [{ "operator": "==", "value": "online", "color": "success.main", "label": "Online" }, { "operator": "==", "value": "away", "color": "warning.main", "label": "Away" }] } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": {},
+                "children": [
+                  {
+                    "type": "menu",
+                    "props": {
+                      "key": "profileTab",
+                      "variant": "tabs",
+                      "orientation": "horizontal",
+                      "color": "inherit",
+                      "indicatorColor": "#ffffff",
+                      "textColor": "rgba(255,255,255,0.7)",
+                      "activeTextColor": "#ffffff",
+                      "items": [
+                        { "label": "Overview", "value": "overview" },
+                        { "label": "Activity", "value": "activity" },
+                        { "label": "Projects", "value": "projects" },
+                        { "label": "Documents", "value": "documents" },
+                        { "label": "Settings", "value": "settings" }
+                      ]
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "padding": "24px", "backgroundColor": "#f5f5f5", "minHeight": "500px" },
+        "children": [
+          {
+            "type": "viewRenderer",
+            "props": {
+              "key": "profileContent",
+              "viewId": "data.profileViews[form.profileTab]",
+              "refreshKey": "form.profileTab",
+              "externalData": { "userId": "data.user.id" },
+              "heightMode": "auto",
+              "isolated": false
+            }
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [],
+  "actions": [],
+  "timers": []
+}

package/training/examples/16-kpi-full-row.json

@@ -0,0 +1,203 @@
+{
+  "description": "Comprehensive KPI showcase — metric, gauge, bullet, colorScale, rating, countdown, iconBox all in one view",
+  "components_used": ["layout", "layout-cell", "header", "label", "divider", "kpi-metric", "kpi-trend", "kpi-badge", "kpi-statusDot", "kpi-gauge", "kpi-bulletChart", "kpi-colorScale", "kpi-rating", "kpi-countdown", "kpi-iconBox"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 24 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          { "type": "header", "props": { "text": "Performance Metrics", "variant": "h5", "component": "h1", "color": "textPrimary" } },
+          { "type": "label", "props": { "text": "All KPI component types demonstrated", "variant": "body2", "color": "textSecondary" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          { "type": "header", "props": { "text": "Metrics & Trends", "variant": "h6", "color": "textSecondary" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 4, "gap": 16 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.revenue", "label": "Monthly Revenue", "format": "currency", "currency": "USD", "decimals": 0, "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "12px" } },
+                  { "type": "kpi-trend", "props": { "valueKey": "data.revenueGrowth", "label": "vs last month", "isPercent": true, "decimals": 1, "variant": "chip", "size": "small", "showIcon": true } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 8 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "flex-start" }, "children": [
+                        { "type": "kpi-metric", "props": { "valueKey": "data.nps", "label": "NPS Score", "format": "number", "decimals": 0, "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "12px" } },
+                        { "type": "kpi-badge", "props": { "valueKey": "data.npsLevel", "variant": "soft", "size": "small", "thresholds": [{ "operator": ">=", "value": 70, "color": "success.main", "label": "Excellent" }, { "operator": ">=", "value": 50, "color": "info.main", "label": "Good" }, { "operator": "<", "value": 50, "color": "error.main", "label": "Poor" }] } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-trend", "props": { "valueKey": "data.npsDelta", "label": "pts vs quarter", "isPercent": false, "decimals": 0, "variant": "text", "size": "small", "showIcon": true } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 8 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between" }, "children": [
+                        { "type": "label", "props": { "text": "System Status", "variant": "overline", "color": "textSecondary" } },
+                        { "type": "kpi-statusDot", "props": { "valueKey": "data.systemStatus", "size": "10", "pulse": true, "showLabel": true, "labelPosition": "right", "thresholds": [{ "operator": "==", "value": "operational", "color": "success.main", "label": "Operational" }, { "operator": "==", "value": "degraded", "color": "warning.main", "label": "Degraded" }, { "operator": "==", "value": "down", "color": "error.main", "label": "Down" }] } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-metric", "props": { "valueKey": "data.uptime", "label": "Uptime", "format": "percent", "decimals": 3, "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "12px", "color": "success.main" } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
+                "children": [
+                  { "type": "kpi-iconBox", "props": { "valueKey": "data.newSignups", "label": "New Signups", "icon": "PersonAddOutlined", "iconSize": "32px", "format": "number", "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "12px", "thresholds": [{ "operator": ">=", "value": 100, "color": "success.main" }, { "operator": ">=", "value": 50, "color": "info.main" }, { "operator": "<", "value": 50, "color": "warning.main" }] } }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          { "type": "divider", "props": { "orientation": "horizontal" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          { "type": "header", "props": { "text": "Gauges & Charts", "variant": "h6", "color": "textSecondary" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 3, "gap": 16 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px", "alignItems": "center" },
+                "children": [
+                  { "type": "header", "props": { "text": "Customer Satisfaction", "variant": "subtitle1", "color": "textPrimary", "align": "center" } },
+                  { "type": "kpi-gauge", "props": { "valueKey": "data.csatScore", "min": 0, "max": 5, "size": 200, "thickness": 16, "label": "out of 5", "format": "number", "decimals": 1, "showNeedle": true, "colors": [{ "from": 0, "to": 2, "color": "#f44336" }, { "from": 2, "to": 3.5, "color": "#ff9800" }, { "from": 3.5, "to": 5, "color": "#4caf50" }] } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
+                "children": [
+                  { "type": "header", "props": { "text": "Sales vs Target", "variant": "subtitle1", "color": "textPrimary" } },
+                  { "type": "kpi-bulletChart", "props": { "valueKey": "data.salesActual", "targetKey": "data.salesTarget", "min": 0, "maxKey": "data.salesMax", "label": "Q4 Sales", "format": "currency", "currency": "USD", "height": "40px", "showTarget": true, "showValue": true, "color": "primary.main", "targetColor": "error.main", "backgroundColor": "#f5f5f5" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
+                "children": [
+                  { "type": "header", "props": { "text": "Response Time", "variant": "subtitle1", "color": "textPrimary" } },
+                  { "type": "kpi-colorScale", "props": { "valueKey": "data.responseTime", "label": "ms", "min": 0, "max": 2000, "steps": 5, "format": "number", "decimals": 0, "showValue": true, "thresholds": [{ "operator": "<=", "value": 400, "color": "success.main", "label": "Fast" }, { "operator": "<=", "value": 800, "color": "info.main", "label": "OK" }, { "operator": "<=", "value": 1200, "color": "warning.main", "label": "Slow" }, { "operator": ">", "value": 1200, "color": "error.main", "label": "Critical" }] } }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          { "type": "divider", "props": { "orientation": "horizontal" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          { "type": "header", "props": { "text": "Rating & Countdown", "variant": "h6", "color": "textSecondary" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 2, "gap": 16 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
+                "children": [
+                  { "type": "label", "props": { "text": "Product Rating", "variant": "overline", "color": "textSecondary" } },
+                  { "type": "kpi-rating", "props": { "valueKey": "data.productRating", "maxRating": 5, "precision": 0.5, "size": "large", "showValue": true, "readOnly": true, "label": "data.reviewCount + ' reviews'", "labelPosition": "right" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
+                "children": [
+                  { "type": "label", "props": { "text": "Sale Ends In", "variant": "overline", "color": "textSecondary" } },
+                  { "type": "kpi-countdown", "props": { "targetDateKey": "data.saleEndDate", "showDays": true, "showHours": true, "showMinutes": true, "showSeconds": true, "size": "large", "color": "error.main", "separatorColor": "text.secondary", "expiredLabel": "Sale has ended!" } }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [],
+  "actions": [],
+  "timers": []
+}

package/training/examples/17-tree-detail-view.json

@@ -0,0 +1,139 @@
+{
+  "description": "Two-panel layout: treeView for hierarchy navigation on left, embedded viewRenderer for detail on right",
+  "components_used": ["layout", "layout-cell", "header", "label", "input", "treeView", "viewRenderer", "divider"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 0 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "padding": "0 0 16px 0" },
+        "children": [
+          { "type": "header", "props": { "text": "Department Browser", "variant": "h5", "component": "h1", "color": "textPrimary" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 3, "gap": 0 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px 0 0 12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "borderRight": "1px solid #e8e8e8", "padding": "0", "overflow": "hidden" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 0 },
+                    "children": [
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "16px", "backgroundColor": "#fafafa", "borderBottom": "1px solid #e8e8e8" },
+                        "children": [
+                          { "type": "label", "props": { "text": "Organization", "variant": "overline", "color": "textSecondary" } },
+                          { "type": "input", "props": { "key": "treeSearch", "label": "", "placeholder": "Search departments...", "prefix": "SearchOutlined", "size": "small" }, "style": { "width": "100%", "marginTop": "8px" } }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "8px" },
+                        "children": [
+                          {
+                            "type": "treeView",
+                            "props": {
+                              "dataKey": "data.orgTree",
+                              "idField": "id",
+                              "labelField": "name",
+                              "childrenField": "children",
+                              "selectedKey": "data.selectedDeptId",
+                              "selectable": true,
+                              "multiSelect": false,
+                              "iconField": "icon",
+                              "defaultIcon": "FolderOutlined",
+                              "leafIcon": "GroupOutlined",
+                              "expandAll": false,
+                              "showSearch": false,
+                              "dense": false,
+                              "showLines": true,
+                              "showCount": true,
+                              "height": "600px",
+                              "fontSize": "14px",
+                              "selectedBg": "#e3f2fd",
+                              "selectedColor": "#1976d2",
+                              "hoverBg": "#f5f5f5"
+                            },
+                            "actions": {
+                              "onSelectCode": "setData({ selectedDeptId: selectedNode.id, selectedDeptName: selectedNode.name })"
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": { "colSpan": 2 },
+                "style": { "backgroundColor": "#f8f9fa", "borderRadius": "0 12px 12px 0", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 16 },
+                    "children": [
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": {},
+                        "children": [
+                          { "type": "label", "props": { "text": "data.selectedDeptName || 'Select a department to view details'", "variant": "h6", "color": "textPrimary" } }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": {},
+                        "children": [
+                          { "type": "divider", "props": { "orientation": "horizontal" } }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "minHeight": "500px" },
+                        "children": [
+                          {
+                            "type": "viewRenderer",
+                            "props": {
+                              "key": "deptDetail",
+                              "viewId": "department-detail-view",
+                              "refreshKey": "data.selectedDeptId",
+                              "externalData": { "departmentId": "data.selectedDeptId" },
+                              "heightMode": "auto",
+                              "isolated": false,
+                              "showBorder": false
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [],
+  "actions": [],
+  "timers": []
+}