robobyte-front-builder 1.0.26 → 1.0.27

package/training/examples/18-employee-management.json

@@ -0,0 +1,233 @@
+{
+  "description": "Employee management page with search/filter bar, editable data grid, add/edit dialogs, and status banner",
+  "components_used": ["layout", "layout-cell", "header", "label", "input", "dropdown", "button", "dataGrid", "dialog", "banner", "kpi-metric", "kpi-statusDot"],
+  "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": 2 },
+            "children": [
+              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                { "type": "header", "props": { "text": "Employee Management", "variant": "h4", "component": "h1", "color": "textPrimary" } }
+              ]},
+              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                { "type": "label", "props": { "text": "Manage your workforce — add, edit, and track employees", "variant": "body2", "color": "textSecondary" } }
+              ]}
+            ]
+          },
+          {
+            "type": "button",
+            "props": { "label": "Add Employee", "variant": "contained", "color": "primary", "prefix": "PersonAddOutlined", "size": "medium" },
+            "actions": { "onClick": { "type": "custom", "code": "openDialog('addEmployeeDialog')" } }
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "banner",
+            "props": { "key": "actionBanner", "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": "8px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)", "padding": "16px" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.total", "label": "Total Employees", "format": "number", "fontSize": "24px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)", "padding": "16px" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.active", "label": "Active", "format": "number", "fontSize": "24px", "fontWeight": "700", "color": "success.main", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)", "padding": "16px" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.onLeave", "label": "On Leave", "format": "number", "fontSize": "24px", "fontWeight": "700", "color": "warning.main", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "boxShadow": "0 1px 4px rgba(0,0,0,0.06)", "padding": "16px" },
+                "children": [
+                  { "type": "kpi-metric", "props": { "valueKey": "data.stats.newThisMonth", "label": "New This Month", "format": "number", "fontSize": "24px", "fontWeight": "700", "color": "info.main", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "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", "gap": "12px" },
+                "children": [
+                  { "type": "input", "props": { "key": "search", "label": "Search employees...", "prefix": "SearchOutlined", "size": "small" }, "style": { "width": "280px" } },
+                  {
+                    "type": "dropdown",
+                    "props": {
+                      "key": "deptFilter",
+                      "label": "Department",
+                      "size": "small",
+                      "options": [
+                        { "label": "All", "value": "" },
+                        { "label": "Engineering", "value": "eng" },
+                        { "label": "Sales", "value": "sales" },
+                        { "label": "HR", "value": "hr" },
+                        { "label": "Finance", "value": "finance" }
+                      ]
+                    }
+                  },
+                  {
+                    "type": "dropdown",
+                    "props": {
+                      "key": "statusFilter",
+                      "label": "Status",
+                      "size": "small",
+                      "options": [
+                        { "label": "All", "value": "" },
+                        { "label": "Active", "value": "active" },
+                        { "label": "On Leave", "value": "leave" },
+                        { "label": "Inactive", "value": "inactive" }
+                      ]
+                    }
+                  },
+                  {
+                    "type": "button",
+                    "props": { "label": "Filter", "variant": "outlined", "color": "primary", "size": "small" },
+                    "actions": { "onClick": { "type": "custom", "code": "filterEmployees({ search: form.search, dept: form.deptFilter, status: form.statusFilter })" } }
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": {},
+                "children": [
+                  {
+                    "type": "dataGrid",
+                    "props": {
+                      "key": "employeeGrid",
+                      "dataKey": "data.employees",
+                      "height": "480px",
+                      "readOnly": false,
+                      "showAddBtn": false,
+                      "showDeleteCol": true,
+                      "columns": "data.employeeColumns",
+                      "rowSelection": "single"
+                    },
+                    "actions": {
+                      "onRowClick": { "type": "custom", "code": "setData({ selectedEmployee: clickedRow }); openDialog('editEmployeeDialog')" }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [
+    {
+      "key": "addEmployeeDialog",
+      "title": "Add New Employee",
+      "width": "600px",
+      "children": [
+        {
+          "type": "layout",
+          "props": { "cols": 2, "gap": 16, "rowGap": 16 },
+          "children": [
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "input", "props": { "key": "newFirstName", "label": "First Name", "required": true }, "style": { "width": "100%" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "input", "props": { "key": "newLastName", "label": "Last Name", "required": true }, "style": { "width": "100%" } }
+            ]},
+            { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+              { "type": "input", "props": { "key": "newEmail", "label": "Work Email", "required": true, "prefix": "EmailOutlined" }, "style": { "width": "100%" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "dropdown", "props": { "key": "newDept", "label": "Department", "required": true, "fullWidth": true, "optionsKey": "data.departments", "labelField": "name", "valueField": "id" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "dropdown", "props": { "key": "newRole", "label": "Role", "required": true, "fullWidth": true, "optionsKey": "data.roles", "labelField": "name", "valueField": "id" } }
+            ]}
+          ]
+        }
+      ],
+      "actions": {
+        "onConfirm": { "type": "custom", "code": "createEmployee({ firstName: form.newFirstName, lastName: form.newLastName, email: form.newEmail, dept: form.newDept, role: form.newRole }); setData({ showBanner: true, bannerMessage: 'Employee added successfully', bannerSeverity: 'success' })" },
+        "confirmLabel": "Add Employee",
+        "cancelLabel": "Cancel"
+      }
+    },
+    {
+      "key": "editEmployeeDialog",
+      "title": "Edit Employee",
+      "width": "600px",
+      "children": [
+        {
+          "type": "layout",
+          "props": { "cols": 2, "gap": 16, "rowGap": 16 },
+          "children": [
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "input", "props": { "key": "editFirstName", "label": "First Name", "required": true, "value": "data.selectedEmployee.firstName" }, "style": { "width": "100%" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "input", "props": { "key": "editLastName", "label": "Last Name", "required": true, "value": "data.selectedEmployee.lastName" }, "style": { "width": "100%" } }
+            ]},
+            { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+              { "type": "kpi-statusDot", "props": { "valueKey": "data.selectedEmployee.status", "size": "8", "pulse": false, "showLabel": true, "thresholds": [{ "operator": "==", "value": "active", "color": "success.main", "label": "Active" }, { "operator": "==", "value": "leave", "color": "warning.main", "label": "On Leave" }] } }
+            ]}
+          ]
+        }
+      ],
+      "actions": {
+        "onConfirm": { "type": "custom", "code": "updateEmployee(data.selectedEmployee.id, { firstName: form.editFirstName, lastName: form.editLastName }); setData({ showBanner: true, bannerMessage: 'Employee updated', bannerSeverity: 'success' })" },
+        "confirmLabel": "Save Changes",
+        "cancelLabel": "Cancel"
+      }
+    }
+  ],
+  "actions": [],
+  "timers": []
+}

package/training/examples/19-sales-dashboard.json

@@ -0,0 +1,272 @@
+{
+  "description": "Full sales dashboard: KPI cards, gauge, bullet charts, rep leaderboard, and pipeline report",
+  "components_used": ["layout", "layout-cell", "header", "label", "dropdown", "button", "kpi-metric", "kpi-trend", "kpi-badge", "kpi-gauge", "kpi-bulletChart", "kpi-rating", "reportViewer", "divider", "kpi-statusDot"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 24 },
+    "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": "Sales Dashboard", "variant": "h4", "component": "h1", "color": "textPrimary" } }
+              ]},
+              { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                { "type": "label", "props": { "text": "data.periodLabel", "variant": "body2", "color": "textSecondary" } }
+              ]}
+            ]
+          },
+          {
+            "type": "layout",
+            "props": { "cols": 1, "rowGap": 0 },
+            "children": [
+              { "type": "layout-cell", "props": {}, "style": { "gap": "12px", "alignItems": "center" }, "children": [
+                {
+                  "type": "dropdown",
+                  "props": {
+                    "key": "period",
+                    "label": "Period",
+                    "size": "small",
+                    "options": [
+                      { "label": "This Month", "value": "month" },
+                      { "label": "This Quarter", "value": "quarter" },
+                      { "label": "YTD", "value": "ytd" },
+                      { "label": "Last Year", "value": "lastyear" }
+                    ]
+                  },
+                  "actions": { "onChange": { "type": "custom", "code": "loadSalesDashboard(form.period)" } }
+                },
+                {
+                  "type": "dropdown",
+                  "props": {
+                    "key": "region",
+                    "label": "Region",
+                    "size": "small",
+                    "options": [
+                      { "label": "All Regions", "value": "" },
+                      { "label": "North America", "value": "na" },
+                      { "label": "Europe", "value": "eu" },
+                      { "label": "Asia Pacific", "value": "apac" }
+                    ]
+                  }
+                },
+                { "type": "button", "props": { "label": "Refresh", "variant": "outlined", "color": "inherit", "size": "small", "prefix": "RefreshOutlined" }, "actions": { "onClick": { "type": "custom", "code": "loadSalesDashboard(form.period, form.region)" } } }
+              ]}
+            ]
+          }
+        ]
+      },
+      {
+        "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": "layout",
+                    "props": { "cols": 1, "rowGap": 8 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between" }, "children": [
+                        { "type": "label", "props": { "text": "Total Revenue", "variant": "overline", "color": "textSecondary" } },
+                        { "type": "kpi-statusDot", "props": { "valueKey": "data.revenueStatus", "size": "8", "pulse": true, "showLabel": false, "thresholds": [{ "operator": "==", "value": "on-track", "color": "success.main" }, { "operator": "==", "value": "at-risk", "color": "warning.main" }] } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-metric", "props": { "valueKey": "data.totalRevenue", "format": "currency", "currency": "USD", "decimals": 0, "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-trend", "props": { "valueKey": "data.revenueGrowth", "label": "vs prior period", "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": {}, "children": [
+                        { "type": "label", "props": { "text": "Deals Closed", "variant": "overline", "color": "textSecondary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-metric", "props": { "valueKey": "data.dealsClosed", "format": "number", "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-trend", "props": { "valueKey": "data.dealsGrowth", "label": "vs prior period", "isPercent": true, "decimals": 0, "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": {}, "children": [
+                        { "type": "label", "props": { "text": "Win Rate", "variant": "overline", "color": "textSecondary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-metric", "props": { "valueKey": "data.winRate", "format": "percent", "decimals": 1, "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-badge", "props": { "valueKey": "data.winRateStatus", "variant": "soft", "size": "small", "thresholds": [{ "operator": "==", "value": "above", "color": "success.main", "label": "Above Target" }, { "operator": "==", "value": "below", "color": "error.main", "label": "Below Target" }] } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "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": {}, "children": [
+                        { "type": "label", "props": { "text": "Avg Deal Size", "variant": "overline", "color": "textSecondary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-metric", "props": { "valueKey": "data.avgDealSize", "format": "currency", "currency": "USD", "decimals": 0, "fontSize": "28px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-trend", "props": { "valueKey": "data.avgDealDelta", "label": "vs prior period", "isPercent": true, "decimals": 1, "variant": "chip", "size": "small", "showIcon": true } }
+                      ]}
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "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": "Quota Attainment", "variant": "h6", "color": "textPrimary", "align": "center" } },
+                  { "type": "kpi-gauge", "props": { "valueKey": "data.quotaAttainment", "min": 0, "max": 150, "size": 200, "thickness": 18, "label": "% of Quota", "format": "percent", "decimals": 0, "showNeedle": true, "colors": [{ "from": 0, "to": 60, "color": "#f44336" }, { "from": 60, "to": 100, "color": "#ff9800" }, { "from": 100, "to": 150, "color": "#4caf50" }] } }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": { "colSpan": 2 },
+                "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": "Revenue by Product Line", "variant": "h6", "color": "textPrimary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-bulletChart", "props": { "valueKey": "data.enterpriseActual", "targetKey": "data.enterpriseTarget", "min": 0, "max": 5000000, "label": "Enterprise", "format": "currency", "currency": "USD", "height": "32px", "showTarget": true, "showValue": true, "color": "#1976d2" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-bulletChart", "props": { "valueKey": "data.midmarketActual", "targetKey": "data.midmarketTarget", "min": 0, "max": 2000000, "label": "Mid-Market", "format": "currency", "currency": "USD", "height": "32px", "showTarget": true, "showValue": true, "color": "#388e3c" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "kpi-bulletChart", "props": { "valueKey": "data.smbActual", "targetKey": "data.smbTarget", "min": 0, "max": 800000, "label": "SMB", "format": "currency", "currency": "USD", "height": "32px", "showTarget": true, "showValue": true, "color": "#f57c00" } }
+                      ]}
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "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": "layout",
+                    "props": { "cols": 1, "rowGap": 12 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "header", "props": { "text": "Top Performers", "variant": "h6", "color": "textPrimary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "reportViewer", "props": { "key": "leaderboard", "id": "sales-leaderboard", "pageId": "sales-dashboard", "height": "300px", "noHeader": true } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "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": 12 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "header", "props": { "text": "Pipeline by Stage", "variant": "h6", "color": "textPrimary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "reportViewer", "props": { "key": "pipeline", "id": "pipeline-by-stage", "pageId": "sales-dashboard", "height": "300px", "noHeader": true, "filter": { "period": "form.period" } } }
+                      ]}
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [],
+  "actions": [],
+  "timers": [
+    { "key": "salesRefresh", "interval": 300000, "action": { "type": "custom", "code": "loadSalesDashboard(form.period, form.region)" } }
+  ]
+}