robobyte-front-builder 1.0.26 → 1.0.27

package/training/examples/24-order-management.json

@@ -0,0 +1,290 @@
+{
+  "description": "Order management page: autocomplete customer search, filters, editable order grid, status banner, and edit dialog",
+  "components_used": ["layout", "layout-cell", "header", "label", "autocomplete", "datepicker", "dropdown", "button", "dataGrid", "kpi-metric", "kpi-trend", "kpi-badge", "banner", "dialog", "input", "number"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 20 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "justifyContent": "space-between", "alignItems": "center" },
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 1, "rowGap": 4 },
+            "children": [
+              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                { "type": "header", "props": { "text": "Order Management", "variant": "h4", "component": "h1", "color": "textPrimary" } }
+              ]},
+              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                { "type": "label", "props": { "text": "data.lastRefreshed", "variant": "caption", "color": "textSecondary", "prefix": "AccessTimeOutlined", "prefixSize": "14px", "iconGap": "4px" } }
+              ]}
+            ]
+          },
+          {
+            "type": "layout",
+            "props": { "cols": 1, "rowGap": 0 },
+            "children": [
+              { "type": "layout-cell", "props": {}, "style": { "gap": "10px" }, "children": [
+                { "type": "button", "props": { "label": "New Order", "variant": "contained", "color": "primary", "prefix": "AddOutlined", "size": "medium" }, "actions": { "onClick": { "type": "custom", "code": "openDialog('newOrderDialog')" } } },
+                { "type": "button", "props": { "label": "Export", "variant": "outlined", "color": "inherit", "prefix": "DownloadOutlined", "size": "medium" }, "actions": { "onClick": { "type": "custom", "code": "exportOrders(form)" } } }
+              ]}
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "banner",
+            "props": { "key": "orderBanner", "message": "data.bannerMessage", "severity": "data.bannerSeverity", "open": "data.showBanner", "dismissible": true, "icon": true },
+            "actions": { "onClose": { "type": "custom", "code": "setData({ showBanner: false })" } }
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 4, "gap": 16 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "10px", "boxShadow": "0 1px 4px rgba(0,0,0,0.08)", "padding": "16px" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.totalOrders", "label": "Total Orders", "format": "number", "fontSize": "22px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px" } },
+                  { "type": "kpi-trend", "props": { "valueKey": "data.stats.ordersGrowth", "label": "vs last month", "isPercent": true, "decimals": 0, "variant": "text", "size": "small", "showIcon": true } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "10px", "boxShadow": "0 1px 4px rgba(0,0,0,0.08)", "padding": "16px" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.revenue", "label": "Revenue", "format": "currency", "currency": "USD", "decimals": 0, "fontSize": "22px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px" } },
+                  { "type": "kpi-trend", "props": { "valueKey": "data.stats.revenueGrowth", "label": "vs last month", "isPercent": true, "decimals": 1, "variant": "text", "size": "small", "showIcon": true } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "10px", "boxShadow": "0 1px 4px rgba(0,0,0,0.08)", "padding": "16px" },
+                "children": [
+                  { "type": "label", "props": { "text": "Pending Orders", "variant": "caption", "color": "textSecondary" } },
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.pendingOrders", "format": "number", "fontSize": "22px", "fontWeight": "700", "color": "warning.main", "align": "left", "labelPosition": "none" } },
+                  { "type": "kpi-badge", "props": { "valueKey": "data.stats.pendingRisk", "variant": "soft", "size": "small", "thresholds": [{ "operator": "==", "value": "high", "color": "error.main", "label": "High Volume" }, { "operator": "==", "value": "normal", "color": "success.main", "label": "Normal" }] } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "10px", "boxShadow": "0 1px 4px rgba(0,0,0,0.08)", "padding": "16px" },
+                "children": [
+                  { "type": "label", "props": { "text": "Avg Fulfillment Time", "variant": "caption", "color": "textSecondary" } },
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.avgFulfillmentHours", "format": "number", "decimals": 1, "suffix": " hrs", "fontSize": "22px", "fontWeight": "700", "align": "left", "labelPosition": "none" } },
+                  { "type": "kpi-trend", "props": { "valueKey": "data.stats.fulfillmentDelta", "label": "vs target", "isPercent": true, "decimals": 0, "variant": "text", "size": "small", "showIcon": true, "invertColors": true } }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)" },
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 1, "rowGap": 0 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "padding": "16px 20px", "borderBottom": "1px solid #e8e8e8", "flexWrap": "wrap", "gap": "10px" },
+                "children": [
+                  {
+                    "type": "autocomplete",
+                    "props": {
+                      "key": "customerFilter",
+                      "label": "Customer",
+                      "size": "small",
+                      "optionsKey": "data.customerSuggestions",
+                      "labelField": "name",
+                      "valueField": "id",
+                      "freeSolo": false,
+                      "clearable": true,
+                      "placeholder": "Search customer..."
+                    },
+                    "style": { "width": "240px" },
+                    "actions": { "onChange": { "type": "custom", "code": "fetchCustomerSuggestions(form.customerFilter)" } }
+                  },
+                  { "type": "datepicker", "props": { "key": "orderDateFrom", "label": "From", "size": "small", "format": "MM/DD/YYYY", "clearable": true }, "style": { "width": "160px" } },
+                  { "type": "datepicker", "props": { "key": "orderDateTo", "label": "To", "size": "small", "format": "MM/DD/YYYY", "clearable": true }, "style": { "width": "160px" } },
+                  {
+                    "type": "dropdown",
+                    "props": {
+                      "key": "orderStatus",
+                      "label": "Status",
+                      "size": "small",
+                      "options": [
+                        { "label": "All", "value": "" },
+                        { "label": "Pending", "value": "pending" },
+                        { "label": "Processing", "value": "processing" },
+                        { "label": "Shipped", "value": "shipped" },
+                        { "label": "Delivered", "value": "delivered" },
+                        { "label": "Cancelled", "value": "cancelled" },
+                        { "label": "Refunded", "value": "refunded" }
+                      ]
+                    }
+                  },
+                  { "type": "button", "props": { "label": "Filter", "variant": "contained", "color": "primary", "size": "small" }, "actions": { "onClick": { "type": "custom", "code": "loadOrders({ customer: form.customerFilter, from: form.orderDateFrom, to: form.orderDateTo, status: form.orderStatus })" } } },
+                  { "type": "button", "props": { "label": "Reset", "variant": "text", "color": "inherit", "size": "small" }, "actions": { "onClick": { "type": "reset" } } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": {},
+                "children": [
+                  {
+                    "type": "dataGrid",
+                    "props": {
+                      "key": "ordersGrid",
+                      "dataKey": "data.orders",
+                      "height": "480px",
+                      "readOnly": false,
+                      "showAddBtn": false,
+                      "showDeleteCol": false,
+                      "rowSelection": "single",
+                      "columns": "data.orderColumns"
+                    },
+                    "actions": {
+                      "onRowClick": { "type": "custom", "code": "setData({ editingOrder: clickedRow }); openDialog('editOrderDialog')" }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [
+    {
+      "key": "newOrderDialog",
+      "title": "Create New Order",
+      "width": "560px",
+      "children": [
+        {
+          "type": "layout",
+          "props": { "cols": 2, "gap": 16, "rowGap": 16 },
+          "children": [
+            { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+              {
+                "type": "autocomplete",
+                "props": {
+                  "key": "newOrderCustomer",
+                  "label": "Customer",
+                  "required": true,
+                  "fullWidth": true,
+                  "optionsKey": "data.allCustomers",
+                  "labelField": "name",
+                  "valueField": "id",
+                  "placeholder": "Search and select customer..."
+                }
+              }
+            ]},
+            { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+              {
+                "type": "dropdown",
+                "props": {
+                  "key": "newOrderProduct",
+                  "label": "Product",
+                  "required": true,
+                  "fullWidth": true,
+                  "optionsKey": "data.products",
+                  "labelField": "name",
+                  "valueField": "id"
+                }
+              }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "number", "props": { "key": "newOrderQty", "label": "Quantity", "required": true, "min": 1, "max": 9999 }, "style": { "width": "100%" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "datepicker", "props": { "key": "newOrderDelivery", "label": "Requested Delivery", "fullWidth": true, "format": "MM/DD/YYYY" } }
+            ]},
+            { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+              { "type": "input", "props": { "key": "newOrderNotes", "label": "Notes (optional)", "placeholder": "Any special instructions..." }, "style": { "width": "100%" } }
+            ]}
+          ]
+        }
+      ],
+      "actions": {
+        "onConfirm": { "type": "custom", "code": "createOrder({ customerId: form.newOrderCustomer, productId: form.newOrderProduct, qty: form.newOrderQty, delivery: form.newOrderDelivery, notes: form.newOrderNotes }); setData({ showBanner: true, bannerMessage: 'Order created successfully', bannerSeverity: 'success' })" },
+        "confirmLabel": "Create Order",
+        "cancelLabel": "Cancel"
+      }
+    },
+    {
+      "key": "editOrderDialog",
+      "title": "Edit Order — data.editingOrder.orderNumber",
+      "width": "480px",
+      "children": [
+        {
+          "type": "layout",
+          "props": { "cols": 2, "gap": 16, "rowGap": 16 },
+          "children": [
+            { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+              {
+                "type": "dropdown",
+                "props": {
+                  "key": "editStatus",
+                  "label": "Order Status",
+                  "required": true,
+                  "fullWidth": true,
+                  "value": "data.editingOrder.status",
+                  "options": [
+                    { "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": "number", "props": { "key": "editQty", "label": "Quantity", "required": true, "min": 1, "value": "data.editingOrder.quantity" }, "style": { "width": "100%" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "datepicker", "props": { "key": "editDelivery", "label": "Delivery Date", "fullWidth": true, "value": "data.editingOrder.requestedDelivery", "format": "MM/DD/YYYY" } }
+            ]},
+            { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+              { "type": "input", "props": { "key": "editNotes", "label": "Internal Notes", "value": "data.editingOrder.notes" }, "style": { "width": "100%" } }
+            ]}
+          ]
+        }
+      ],
+      "actions": {
+        "onConfirm": { "type": "custom", "code": "updateOrder(data.editingOrder.id, { status: form.editStatus, quantity: form.editQty, delivery: form.editDelivery, notes: form.editNotes }); setData({ showBanner: true, bannerMessage: 'Order updated', bannerSeverity: 'success' })" },
+        "confirmLabel": "Update Order",
+        "cancelLabel": "Cancel"
+      }
+    }
+  ],
+  "actions": [],
+  "timers": [
+    { "key": "orderRefresh", "interval": 120000, "action": { "type": "custom", "code": "loadOrders()" } }
+  ]
+}

package/training/examples/25-crm-contact-page.json

@@ -0,0 +1,272 @@
+{
+  "description": "CRM contact detail page with menu-driven tabs: info fields, activity report, deals grid, notes richtext, and KPI sidebar",
+  "components_used": ["layout", "layout-cell", "header", "label", "menu", "input", "dropdown", "datepicker", "button", "reportViewer", "dataGrid", "richtext", "kpi-metric", "kpi-trend", "kpi-badge", "kpi-statusDot", "kpi-rating", "image", "divider", "banner"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 0 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "28px" },
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 4, "gap": 24 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "alignItems": "center", "gap": "16px" },
+                "children": [
+                  { "type": "image", "props": { "src": "data.contact.avatarUrl", "alt": "Contact Photo", "width": "72px", "height": "72px", "borderRadius": "50%", "objectFit": "cover" } },
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 4 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": { "gap": "8px", "alignItems": "center" }, "children": [
+                        { "type": "header", "props": { "text": "data.contact.fullName", "variant": "h5", "component": "h1", "color": "textPrimary" } },
+                        { "type": "kpi-statusDot", "props": { "valueKey": "data.contact.leadStatus", "size": "8", "pulse": true, "showLabel": true, "thresholds": [{ "operator": "==", "value": "hot", "color": "error.main", "label": "Hot" }, { "operator": "==", "value": "warm", "color": "warning.main", "label": "Warm" }, { "operator": "==", "value": "cold", "color": "info.main", "label": "Cold" }] } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "label", "props": { "text": "data.contact.title", "variant": "body2", "color": "textSecondary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "label", "props": { "text": "data.contact.company", "variant": "body1", "color": "primary", "fontWeight": "500", "prefix": "BusinessOutlined", "prefixSize": "16px", "prefixColor": "primary.main", "iconGap": "6px" } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "gap": "8px" },
+                "children": [
+                  { "type": "label", "props": { "text": "data.contact.email", "variant": "body2", "color": "textPrimary", "prefix": "EmailOutlined", "prefixColor": "primary.main", "prefixSize": "16px", "iconGap": "8px" } },
+                  { "type": "label", "props": { "text": "data.contact.phone", "variant": "body2", "color": "textPrimary", "prefix": "PhoneOutlined", "prefixColor": "primary.main", "prefixSize": "16px", "iconGap": "8px" } },
+                  { "type": "label", "props": { "text": "data.contact.location", "variant": "body2", "color": "textPrimary", "prefix": "LocationOnOutlined", "prefixColor": "primary.main", "prefixSize": "16px", "iconGap": "8px" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "gap": "8px" },
+                "children": [
+                  { "type": "label", "props": { "text": "Relationship Score", "variant": "caption", "color": "textSecondary" } },
+                  { "type": "kpi-rating", "props": { "valueKey": "data.contact.relationshipScore", "maxRating": 5, "precision": 1, "size": "medium", "readOnly": true, "showValue": true } },
+                  { "type": "kpi-badge", "props": { "valueKey": "data.contact.segment", "variant": "soft", "size": "medium", "thresholds": [{ "operator": "==", "value": "vip", "color": "warning.main", "label": "VIP" }, { "operator": "==", "value": "strategic", "color": "primary.main", "label": "Strategic" }, { "operator": "==", "value": "standard", "color": "text.secondary", "label": "Standard" }] } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "gap": "10px", "justifyContent": "flex-end", "alignItems": "flex-start" },
+                "children": [
+                  { "type": "button", "props": { "label": "Log Activity", "variant": "outlined", "color": "primary", "size": "small", "prefix": "AddTaskOutlined" } },
+                  { "type": "button", "props": { "label": "Send Email", "variant": "contained", "color": "primary", "size": "small", "prefix": "EmailOutlined" } }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "marginTop": "16px" },
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 4, "gap": 16 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": { "colSpan": 3 },
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "overflow": "hidden" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 0 },
+                    "children": [
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "borderBottom": "1px solid #e8e8e8" },
+                        "children": [
+                          {
+                            "type": "menu",
+                            "props": {
+                              "key": "contactTab",
+                              "variant": "tabs",
+                              "orientation": "horizontal",
+                              "indicatorColor": "primary",
+                              "textColor": "inherit",
+                              "items": [
+                                { "label": "Contact Info", "value": "info" },
+                                { "label": "Activity", "value": "activity" },
+                                { "label": "Deals", "value": "deals" },
+                                { "label": "Notes", "value": "notes" }
+                              ]
+                            }
+                          }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "24px", "display": "form.contactTab === 'info' ? 'flex' : 'none'" },
+                        "children": [
+                          {
+                            "type": "layout",
+                            "props": { "cols": 2, "gap": 20, "rowGap": 20 },
+                            "children": [
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "input", "props": { "key": "editFirstName", "label": "First Name", "value": "data.contact.firstName" }, "style": { "width": "100%" } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "input", "props": { "key": "editLastName", "label": "Last Name", "value": "data.contact.lastName" }, "style": { "width": "100%" } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "input", "props": { "key": "editEmail", "label": "Email", "value": "data.contact.email", "prefix": "EmailOutlined" }, "style": { "width": "100%" } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "input", "props": { "key": "editPhone", "label": "Phone", "value": "data.contact.phone", "prefix": "PhoneOutlined" }, "style": { "width": "100%" } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "input", "props": { "key": "editTitle", "label": "Job Title", "value": "data.contact.title" }, "style": { "width": "100%" } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "dropdown", "props": { "key": "editLeadStatus", "label": "Lead Status", "fullWidth": true, "value": "data.contact.leadStatus", "options": [{ "label": "Hot", "value": "hot" }, { "label": "Warm", "value": "warm" }, { "label": "Cold", "value": "cold" }, { "label": "Closed Won", "value": "won" }, { "label": "Closed Lost", "value": "lost" }] } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "dropdown", "props": { "key": "editSource", "label": "Lead Source", "fullWidth": true, "value": "data.contact.source", "options": [{ "label": "Website", "value": "website" }, { "label": "Referral", "value": "referral" }, { "label": "Cold Outreach", "value": "cold" }, { "label": "Event", "value": "event" }, { "label": "Partner", "value": "partner" }] } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "datepicker", "props": { "key": "editNextFollowup", "label": "Next Follow-up", "fullWidth": true, "format": "MM/DD/YYYY", "value": "data.contact.nextFollowup" } }
+                              ]},
+                              { "type": "layout-cell", "props": { "colSpan": 2 }, "style": { "justifyContent": "flex-end" }, "children": [
+                                { "type": "button", "props": { "label": "Save Changes", "variant": "contained", "color": "primary", "prefix": "SaveOutlined" }, "actions": { "onClick": { "type": "custom", "code": "updateContact(data.contact.id, form)" } } }
+                              ]}
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "24px", "display": "form.contactTab === 'activity' ? 'flex' : 'none'" },
+                        "children": [
+                          { "type": "reportViewer", "props": { "key": "activityLog", "id": "contact-activity", "pageId": "crm", "height": "400px", "noHeader": true, "filter": { "contactId": "data.contact.id" } } }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "24px", "display": "form.contactTab === 'deals' ? 'flex' : 'none'" },
+                        "children": [
+                          {
+                            "type": "dataGrid",
+                            "props": {
+                              "key": "dealsGrid",
+                              "dataKey": "data.contact.deals",
+                              "height": "380px",
+                              "readOnly": false,
+                              "showAddBtn": true,
+                              "addLabel": "Add Deal",
+                              "showDeleteCol": true,
+                              "columns": "data.dealColumns"
+                            }
+                          }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "24px", "display": "form.contactTab === 'notes' ? 'flex' : 'none'" },
+                        "children": [
+                          {
+                            "type": "layout",
+                            "props": { "cols": 1, "rowGap": 16 },
+                            "children": [
+                              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                                { "type": "richtext", "props": { "key": "contactNotes", "label": "Notes", "value": "data.contact.notes", "minHeight": "300px", "toolbar": true } }
+                              ]},
+                              { "type": "layout-cell", "props": {}, "style": { "justifyContent": "flex-end" }, "children": [
+                                { "type": "button", "props": { "label": "Save Notes", "variant": "contained", "color": "primary" }, "actions": { "onClick": { "type": "custom", "code": "saveContactNotes(data.contact.id, form.contactNotes)" } } }
+                              ]}
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "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": "header", "props": { "text": "Summary", "variant": "h6", "color": "textPrimary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "backgroundColor": "#f8f9fa", "borderRadius": "8px", "padding": "16px", "gap": "12px" }, "children": [
+                        { "type": "kpi-metric", "props": { "valueKey": "data.contact.totalDealsValue", "label": "Total Deal Value", "format": "currency", "currency": "USD", "decimals": 0, "fontSize": "22px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } },
+                        { "type": "kpi-trend", "props": { "valueKey": "data.contact.dealValueGrowth", "label": "vs last year", "isPercent": true, "decimals": 1, "variant": "chip", "size": "small", "showIcon": true } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "divider", "props": { "orientation": "horizontal" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
+                        { "type": "label", "props": { "text": "Open Deals", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "kpi-metric", "props": { "valueKey": "data.contact.openDeals", "format": "number", "fontSize": "16px", "fontWeight": "600", "align": "right", "labelPosition": "none" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
+                        { "type": "label", "props": { "text": "Won Deals", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "kpi-metric", "props": { "valueKey": "data.contact.wonDeals", "format": "number", "fontSize": "16px", "fontWeight": "600", "align": "right", "labelPosition": "none", "color": "success.main" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
+                        { "type": "label", "props": { "text": "Lost Deals", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "kpi-metric", "props": { "valueKey": "data.contact.lostDeals", "format": "number", "fontSize": "16px", "fontWeight": "600", "align": "right", "labelPosition": "none", "color": "error.main" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "divider", "props": { "orientation": "horizontal" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
+                        { "type": "label", "props": { "text": "Last Contact", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.contact.lastContactDate", "variant": "body2", "color": "textPrimary", "fontWeight": "500" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
+                        { "type": "label", "props": { "text": "Next Follow-up", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.contact.nextFollowup", "variant": "body2", "color": "warning.main", "fontWeight": "500" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
+                        { "type": "label", "props": { "text": "Customer Since", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.contact.customerSince", "variant": "body2", "color": "textPrimary", "fontWeight": "500" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "divider", "props": { "orientation": "horizontal" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "label", "props": { "text": "Assigned To", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.contact.assignedRep", "variant": "body1", "color": "textPrimary", "fontWeight": "500" } }
+                      ]}
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [],
+  "actions": [],
+  "timers": []
+}