robobyte-front-builder 1.0.26 → 1.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/LICENSE +65 -0
  2. package/README.md +57 -0
  3. package/docs/ReportViewer.md +581 -0
  4. package/docs/fetchReportData.md +379 -0
  5. package/docs/printLayout.md +405 -0
  6. package/package.json +29 -1
  7. package/training/00-index.md +168 -0
  8. package/training/01-input.md +144 -0
  9. package/training/02-checkbox.md +107 -0
  10. package/training/03-dropdown.md +135 -0
  11. package/training/04-datepicker.md +139 -0
  12. package/training/05-radio.md +123 -0
  13. package/training/06-number.md +133 -0
  14. package/training/07-textarea.md +114 -0
  15. package/training/08-richtext.md +112 -0
  16. package/training/09-tag.md +110 -0
  17. package/training/10-time.md +107 -0
  18. package/training/11-toggle.md +108 -0
  19. package/training/12-signature.md +107 -0
  20. package/training/13-autocomplete.md +134 -0
  21. package/training/14-button.md +168 -0
  22. package/training/15-label.md +138 -0
  23. package/training/16-header.md +128 -0
  24. package/training/17-divider.md +96 -0
  25. package/training/18-image.md +105 -0
  26. package/training/19-link.md +108 -0
  27. package/training/20-banner.md +122 -0
  28. package/training/21-progress-circle.md +101 -0
  29. package/training/22-progress-line.md +93 -0
  30. package/training/23-menu.md +139 -0
  31. package/training/24-popover.md +114 -0
  32. package/training/25-layout.md +116 -0
  33. package/training/26-layout-cell.md +143 -0
  34. package/training/27-card.md +87 -0
  35. package/training/28-wizard.md +126 -0
  36. package/training/29-wizard-step.md +92 -0
  37. package/training/30-repeater.md +123 -0
  38. package/training/31-dialog.md +131 -0
  39. package/training/32-breadcrumb.md +121 -0
  40. package/training/33-dataGrid.md +129 -0
  41. package/training/34-dataTableViewer.md +115 -0
  42. package/training/35-reportViewer.md +673 -0
  43. package/training/36-viewRenderer.md +110 -0
  44. package/training/37-treeView.md +170 -0
  45. package/training/38-kpi-metric.md +148 -0
  46. package/training/39-kpi-trend.md +105 -0
  47. package/training/40-kpi-badge.md +112 -0
  48. package/training/41-kpi-statusDot.md +118 -0
  49. package/training/42-kpi-iconBox.md +114 -0
  50. package/training/43-kpi-gauge.md +143 -0
  51. package/training/44-kpi-bulletChart.md +126 -0
  52. package/training/45-kpi-colorScale.md +143 -0
  53. package/training/46-kpi-rating.md +125 -0
  54. package/training/47-kpi-countdown.md +151 -0
  55. package/training/48-fetchReportData.md +276 -0
  56. package/training/49-printLayout.md +215 -0
  57. package/training/examples/01-login-form.json +176 -0
  58. package/training/examples/02-contact-form.json +141 -0
  59. package/training/examples/03-kpi-cards-row.json +123 -0
  60. package/training/examples/04-settings-toggles.json +153 -0
  61. package/training/examples/05-user-profile-card.json +136 -0
  62. package/training/examples/06-date-range-filter.json +108 -0
  63. package/training/examples/07-search-bar-results.json +130 -0
  64. package/training/examples/08-notification-settings.json +131 -0
  65. package/training/examples/09-employee-profile-form.json +259 -0
  66. package/training/examples/10-invoice-form.json +241 -0
  67. package/training/examples/11-dashboard-overview.json +251 -0
  68. package/training/examples/12-registration-wizard.json +154 -0
  69. package/training/examples/13-product-catalog.json +168 -0
  70. package/training/examples/14-data-table-with-filters.json +180 -0
  71. package/training/examples/15-tabbed-profile.json +92 -0
  72. package/training/examples/16-kpi-full-row.json +203 -0
  73. package/training/examples/17-tree-detail-view.json +139 -0
  74. package/training/examples/18-employee-management.json +233 -0
  75. package/training/examples/19-sales-dashboard.json +272 -0
  76. package/training/examples/20-checkout-wizard.json +225 -0
  77. package/training/examples/21-analytics-page.json +222 -0
  78. package/training/examples/22-hr-onboarding.json +222 -0
  79. package/training/examples/23-document-browser.json +241 -0
  80. package/training/examples/24-order-management.json +290 -0
  81. package/training/examples/25-crm-contact-page.json +272 -0
package/training/examples/08-notification-settings.json ADDED
@@ -0,0 +1,131 @@
1
+ {
2
+ "description": "Grouped notification settings with section headers, multiple toggles per category, and save banner",
3
+ "components_used": ["layout", "layout-cell", "header", "label", "toggle", "divider", "banner", "button"],
4
+ "root": {
5
+ "type": "layout",
6
+ "props": { "cols": 1, "rowGap": 0 },
7
+ "children": [
8
+ {
9
+ "type": "layout-cell",
10
+ "props": {},
11
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "32px", "maxWidth": "640px" },
12
+ "children": [
13
+ {
14
+ "type": "layout",
15
+ "props": { "cols": 1, "rowGap": 24 },
16
+ "children": [
17
+ {
18
+ "type": "layout-cell",
19
+ "props": {},
20
+ "style": {},
21
+ "children": [
22
+ { "type": "header", "props": { "text": "Notification Preferences", "variant": "h5", "component": "h1", "color": "textPrimary" } },
23
+ { "type": "label", "props": { "text": "Control how and when you receive notifications", "variant": "body2", "color": "textSecondary" } }
24
+ ]
25
+ },
26
+ {
27
+ "type": "layout-cell",
28
+ "props": {},
29
+ "style": {},
30
+ "children": [
31
+ {
32
+ "type": "banner",
33
+ "props": { "key": "savedBanner", "message": "Your notification preferences have been saved successfully.", "severity": "success", "variant": "filled", "open": "data.saved", "dismissible": true, "icon": true },
34
+ "actions": { "onClose": { "type": "custom", "code": "setData({ saved: false })" } }
35
+ }
36
+ ]
37
+ },
38
+ {
39
+ "type": "layout-cell",
40
+ "props": {},
41
+ "style": {},
42
+ "children": [
43
+ { "type": "header", "props": { "text": "Account Activity", "variant": "h6", "component": "h2", "color": "textPrimary", "prefix": "AccountCircleOutlined", "prefixColor": "primary.main", "iconGap": "8px" } }
44
+ ]
45
+ },
46
+ {
47
+ "type": "layout-cell",
48
+ "props": {},
49
+ "style": { "gap": "0px" },
50
+ "children": [
51
+ { "type": "toggle", "props": { "key": "loginAlerts", "label": "Login alerts", "labelPosition": "right", "size": "small", "color": "primary", "helperText": "Get notified when someone signs into your account" } },
52
+ { "type": "toggle", "props": { "key": "passwordChange", "label": "Password changes", "labelPosition": "right", "size": "small", "color": "primary", "helperText": "Alert when your password is updated" } },
53
+ { "type": "toggle", "props": { "key": "twoFactorAuth", "label": "Two-factor auth prompts", "labelPosition": "right", "size": "small", "color": "primary" } }
54
+ ]
55
+ },
56
+ {
57
+ "type": "layout-cell",
58
+ "props": {},
59
+ "style": {},
60
+ "children": [
61
+ { "type": "divider", "props": { "orientation": "horizontal" } }
62
+ ]
63
+ },
64
+ {
65
+ "type": "layout-cell",
66
+ "props": {},
67
+ "style": {},
68
+ "children": [
69
+ { "type": "header", "props": { "text": "Project Updates", "variant": "h6", "component": "h2", "color": "textPrimary", "prefix": "FolderOutlined", "prefixColor": "warning.main", "iconGap": "8px" } }
70
+ ]
71
+ },
72
+ {
73
+ "type": "layout-cell",
74
+ "props": {},
75
+ "style": { "gap": "0px" },
76
+ "children": [
77
+ { "type": "toggle", "props": { "key": "taskAssigned", "label": "Task assigned to me", "labelPosition": "right", "size": "small", "color": "primary" } },
78
+ { "type": "toggle", "props": { "key": "taskCompleted", "label": "Task completed", "labelPosition": "right", "size": "small", "color": "primary" } },
79
+ { "type": "toggle", "props": { "key": "commentMention", "label": "Comment mentions", "labelPosition": "right", "size": "small", "color": "primary", "helperText": "When someone @mentions you in a comment" } },
80
+ { "type": "toggle", "props": { "key": "deadlineReminder", "label": "Deadline reminders", "labelPosition": "right", "size": "small", "color": "primary", "helperText": "24 hours before a task is due" } }
81
+ ]
82
+ },
83
+ {
84
+ "type": "layout-cell",
85
+ "props": {},
86
+ "style": {},
87
+ "children": [
88
+ { "type": "divider", "props": { "orientation": "horizontal" } }
89
+ ]
90
+ },
91
+ {
92
+ "type": "layout-cell",
93
+ "props": {},
94
+ "style": {},
95
+ "children": [
96
+ { "type": "header", "props": { "text": "Reports & Digest", "variant": "h6", "component": "h2", "color": "textPrimary", "prefix": "AssessmentOutlined", "prefixColor": "success.main", "iconGap": "8px" } }
97
+ ]
98
+ },
99
+ {
100
+ "type": "layout-cell",
101
+ "props": {},
102
+ "style": { "gap": "0px" },
103
+ "children": [
104
+ { "type": "toggle", "props": { "key": "dailyDigest", "label": "Daily digest email", "labelPosition": "right", "size": "small", "color": "primary" } },
105
+ { "type": "toggle", "props": { "key": "weeklyReport", "label": "Weekly performance report", "labelPosition": "right", "size": "small", "color": "primary" } },
106
+ { "type": "toggle", "props": { "key": "monthlyAnalytics", "label": "Monthly analytics summary", "labelPosition": "right", "size": "small", "color": "primary" } }
107
+ ]
108
+ },
109
+ {
110
+ "type": "layout-cell",
111
+ "props": {},
112
+ "style": { "justifyContent": "flex-end", "gap": "12px", "padding": "8px 0 0 0" },
113
+ "children": [
114
+ { "type": "button", "props": { "label": "Reset to Default", "variant": "text", "color": "inherit" }, "actions": { "onClick": { "type": "reset" } } },
115
+ {
116
+ "type": "button",
117
+ "props": { "label": "Save Changes", "variant": "contained", "color": "primary", "prefix": "SaveOutlined" },
118
+ "actions": { "onClick": { "type": "custom", "code": "saveNotificationPrefs(form); setData({ saved: true })" } }
119
+ }
120
+ ]
121
+ }
122
+ ]
123
+ }
124
+ ]
125
+ }
126
+ ]
127
+ },
128
+ "dialogs": [],
129
+ "actions": [],
130
+ "timers": []
131
+ }
package/training/examples/09-employee-profile-form.json ADDED
@@ -0,0 +1,259 @@
1
+ {
2
+ "description": "Full employee profile edit form with 2-column layout, all field types, and save/cancel actions",
3
+ "components_used": ["layout", "layout-cell", "header", "label", "input", "dropdown", "datepicker", "radio", "checkbox", "tag", "divider", "button", "banner"],
4
+ "root": {
5
+ "type": "layout",
6
+ "props": { "cols": 1, "rowGap": 0 },
7
+ "children": [
8
+ {
9
+ "type": "layout-cell",
10
+ "props": {},
11
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 12px rgba(0,0,0,0.08)", "padding": "40px" },
12
+ "children": [
13
+ {
14
+ "type": "layout",
15
+ "props": { "cols": 1, "rowGap": 28 },
16
+ "children": [
17
+ {
18
+ "type": "layout-cell",
19
+ "props": {},
20
+ "style": { "justifyContent": "space-between", "alignItems": "center" },
21
+ "children": [
22
+ { "type": "header", "props": { "text": "Employee Profile", "variant": "h5", "component": "h1", "color": "textPrimary" } },
23
+ { "type": "label", "props": { "text": "ID: data.employee.id", "variant": "caption", "color": "textSecondary" } }
24
+ ]
25
+ },
26
+ {
27
+ "type": "layout-cell",
28
+ "props": {},
29
+ "style": {},
30
+ "children": [
31
+ {
32
+ "type": "banner",
33
+ "props": { "key": "saveBanner", "message": "Profile updated successfully.", "severity": "success", "open": "data.saved", "dismissible": true },
34
+ "actions": { "onClose": { "type": "custom", "code": "setData({ saved: false })" } }
35
+ }
36
+ ]
37
+ },
38
+ {
39
+ "type": "layout-cell",
40
+ "props": {},
41
+ "style": {},
42
+ "children": [
43
+ { "type": "header", "props": { "text": "Personal Information", "variant": "h6", "component": "h2", "color": "primary" } }
44
+ ]
45
+ },
46
+ {
47
+ "type": "layout-cell",
48
+ "props": {},
49
+ "style": {},
50
+ "children": [
51
+ {
52
+ "type": "layout",
53
+ "props": { "cols": 2, "gap": 20, "rowGap": 20 },
54
+ "children": [
55
+ {
56
+ "type": "layout-cell",
57
+ "props": {},
58
+ "style": {},
59
+ "children": [
60
+ { "type": "input", "props": { "key": "firstName", "label": "First Name", "required": true, "size": "medium", "value": "data.employee.firstName" }, "style": { "width": "100%" } }
61
+ ]
62
+ },
63
+ {
64
+ "type": "layout-cell",
65
+ "props": {},
66
+ "style": {},
67
+ "children": [
68
+ { "type": "input", "props": { "key": "lastName", "label": "Last Name", "required": true, "size": "medium", "value": "data.employee.lastName" }, "style": { "width": "100%" } }
69
+ ]
70
+ },
71
+ {
72
+ "type": "layout-cell",
73
+ "props": {},
74
+ "style": {},
75
+ "children": [
76
+ { "type": "input", "props": { "key": "email", "label": "Work Email", "required": true, "prefix": "EmailOutlined", "size": "medium", "value": "data.employee.email" }, "style": { "width": "100%" } }
77
+ ]
78
+ },
79
+ {
80
+ "type": "layout-cell",
81
+ "props": {},
82
+ "style": {},
83
+ "children": [
84
+ { "type": "input", "props": { "key": "phone", "label": "Phone Number", "prefix": "PhoneOutlined", "size": "medium", "value": "data.employee.phone" }, "style": { "width": "100%" } }
85
+ ]
86
+ },
87
+ {
88
+ "type": "layout-cell",
89
+ "props": {},
90
+ "style": {},
91
+ "children": [
92
+ { "type": "datepicker", "props": { "key": "birthDate", "label": "Date of Birth", "fullWidth": true, "format": "MM/DD/YYYY", "value": "data.employee.birthDate" } }
93
+ ]
94
+ },
95
+ {
96
+ "type": "layout-cell",
97
+ "props": {},
98
+ "style": {},
99
+ "children": [
100
+ {
101
+ "type": "radio",
102
+ "props": {
103
+ "key": "gender",
104
+ "label": "Gender",
105
+ "row": true,
106
+ "value": "data.employee.gender",
107
+ "options": [
108
+ { "label": "Male", "value": "male" },
109
+ { "label": "Female", "value": "female" },
110
+ { "label": "Prefer not to say", "value": "other" }
111
+ ]
112
+ }
113
+ }
114
+ ]
115
+ }
116
+ ]
117
+ }
118
+ ]
119
+ },
120
+ {
121
+ "type": "layout-cell",
122
+ "props": {},
123
+ "style": {},
124
+ "children": [
125
+ { "type": "divider", "props": { "orientation": "horizontal" } }
126
+ ]
127
+ },
128
+ {
129
+ "type": "layout-cell",
130
+ "props": {},
131
+ "style": {},
132
+ "children": [
133
+ { "type": "header", "props": { "text": "Job Details", "variant": "h6", "component": "h2", "color": "primary" } }
134
+ ]
135
+ },
136
+ {
137
+ "type": "layout-cell",
138
+ "props": {},
139
+ "style": {},
140
+ "children": [
141
+ {
142
+ "type": "layout",
143
+ "props": { "cols": 2, "gap": 20, "rowGap": 20 },
144
+ "children": [
145
+ {
146
+ "type": "layout-cell",
147
+ "props": {},
148
+ "style": {},
149
+ "children": [
150
+ {
151
+ "type": "dropdown",
152
+ "props": {
153
+ "key": "department",
154
+ "label": "Department",
155
+ "required": true,
156
+ "fullWidth": true,
157
+ "value": "data.employee.department",
158
+ "optionsKey": "data.departments",
159
+ "labelField": "name",
160
+ "valueField": "id"
161
+ }
162
+ }
163
+ ]
164
+ },
165
+ {
166
+ "type": "layout-cell",
167
+ "props": {},
168
+ "style": {},
169
+ "children": [
170
+ {
171
+ "type": "dropdown",
172
+ "props": {
173
+ "key": "jobTitle",
174
+ "label": "Job Title",
175
+ "required": true,
176
+ "fullWidth": true,
177
+ "value": "data.employee.jobTitle",
178
+ "optionsKey": "data.jobTitles",
179
+ "labelField": "label",
180
+ "valueField": "value"
181
+ }
182
+ }
183
+ ]
184
+ },
185
+ {
186
+ "type": "layout-cell",
187
+ "props": {},
188
+ "style": {},
189
+ "children": [
190
+ { "type": "datepicker", "props": { "key": "startDate", "label": "Start Date", "fullWidth": true, "format": "MM/DD/YYYY", "value": "data.employee.startDate" } }
191
+ ]
192
+ },
193
+ {
194
+ "type": "layout-cell",
195
+ "props": {},
196
+ "style": {},
197
+ "children": [
198
+ {
199
+ "type": "dropdown",
200
+ "props": {
201
+ "key": "employmentType",
202
+ "label": "Employment Type",
203
+ "fullWidth": true,
204
+ "value": "data.employee.employmentType",
205
+ "options": [
206
+ { "label": "Full-Time", "value": "fulltime" },
207
+ { "label": "Part-Time", "value": "parttime" },
208
+ { "label": "Contract", "value": "contract" },
209
+ { "label": "Intern", "value": "intern" }
210
+ ]
211
+ }
212
+ }
213
+ ]
214
+ },
215
+ {
216
+ "type": "layout-cell",
217
+ "props": { "colSpan": 2 },
218
+ "style": {},
219
+ "children": [
220
+ { "type": "tag", "props": { "key": "skills", "label": "Skills", "fullWidth": true, "value": "data.employee.skills", "placeholder": "Type and press Enter to add skills..." } }
221
+ ]
222
+ },
223
+ {
224
+ "type": "layout-cell",
225
+ "props": { "colSpan": 2 },
226
+ "style": {},
227
+ "children": [
228
+ { "type": "checkbox", "props": { "key": "isManager", "label": "This employee manages a team", "labelPosition": "right", "value": "data.employee.isManager" } }
229
+ ]
230
+ }
231
+ ]
232
+ }
233
+ ]
234
+ },
235
+ {
236
+ "type": "layout-cell",
237
+ "props": {},
238
+ "style": { "justifyContent": "flex-end", "gap": "12px", "padding": "8px 0 0 0" },
239
+ "children": [
240
+ { "type": "button", "props": { "label": "Cancel", "variant": "outlined", "color": "inherit" } },
241
+ {
242
+ "type": "button",
243
+ "props": { "label": "Save Changes", "variant": "contained", "color": "primary", "prefix": "SaveOutlined" },
244
+ "actions": {
245
+ "onClick": { "type": "custom", "code": "updateEmployee(form.employee.id, form); setData({ saved: true })" }
246
+ }
247
+ }
248
+ ]
249
+ }
250
+ ]
251
+ }
252
+ ]
253
+ }
254
+ ]
255
+ },
256
+ "dialogs": [],
257
+ "actions": [],
258
+ "timers": []
259
+ }
package/training/examples/10-invoice-form.json ADDED
@@ -0,0 +1,241 @@
1
+ {
2
+ "description": "Invoice creation form with header info, line items data grid, and totals KPI metrics",
3
+ "components_used": ["layout", "layout-cell", "header", "label", "input", "dropdown", "datepicker", "dataGrid", "kpi-metric", "divider", "button"],
4
+ "root": {
5
+ "type": "layout",
6
+ "props": { "cols": 1, "rowGap": 24 },
7
+ "children": [
8
+ {
9
+ "type": "layout-cell",
10
+ "props": {},
11
+ "style": { "justifyContent": "space-between", "alignItems": "center" },
12
+ "children": [
13
+ { "type": "header", "props": { "text": "Create Invoice", "variant": "h4", "component": "h1", "color": "textPrimary" } },
14
+ { "type": "label", "props": { "text": "INV-data.invoice.number", "variant": "h6", "color": "textSecondary" } }
15
+ ]
16
+ },
17
+ {
18
+ "type": "layout-cell",
19
+ "props": {},
20
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "28px" },
21
+ "children": [
22
+ {
23
+ "type": "layout",
24
+ "props": { "cols": 1, "rowGap": 20 },
25
+ "children": [
26
+ {
27
+ "type": "layout-cell",
28
+ "props": {},
29
+ "style": {},
30
+ "children": [
31
+ { "type": "header", "props": { "text": "Invoice Details", "variant": "h6", "color": "textPrimary" } }
32
+ ]
33
+ },
34
+ {
35
+ "type": "layout-cell",
36
+ "props": {},
37
+ "style": {},
38
+ "children": [
39
+ {
40
+ "type": "layout",
41
+ "props": { "cols": 3, "gap": 16, "rowGap": 16 },
42
+ "children": [
43
+ {
44
+ "type": "layout-cell",
45
+ "props": {},
46
+ "style": {},
47
+ "children": [
48
+ {
49
+ "type": "dropdown",
50
+ "props": {
51
+ "key": "clientId",
52
+ "label": "Bill To (Client)",
53
+ "required": true,
54
+ "fullWidth": true,
55
+ "optionsKey": "data.clients",
56
+ "labelField": "name",
57
+ "valueField": "id",
58
+ "placeholder": "Select client..."
59
+ }
60
+ }
61
+ ]
62
+ },
63
+ {
64
+ "type": "layout-cell",
65
+ "props": {},
66
+ "style": {},
67
+ "children": [
68
+ { "type": "datepicker", "props": { "key": "invoiceDate", "label": "Invoice Date", "fullWidth": true, "required": true, "format": "MM/DD/YYYY" } }
69
+ ]
70
+ },
71
+ {
72
+ "type": "layout-cell",
73
+ "props": {},
74
+ "style": {},
75
+ "children": [
76
+ { "type": "datepicker", "props": { "key": "dueDate", "label": "Due Date", "fullWidth": true, "required": true, "format": "MM/DD/YYYY" } }
77
+ ]
78
+ },
79
+ {
80
+ "type": "layout-cell",
81
+ "props": {},
82
+ "style": {},
83
+ "children": [
84
+ {
85
+ "type": "dropdown",
86
+ "props": {
87
+ "key": "currency",
88
+ "label": "Currency",
89
+ "fullWidth": true,
90
+ "options": [
91
+ { "label": "USD — US Dollar", "value": "USD" },
92
+ { "label": "EUR — Euro", "value": "EUR" },
93
+ { "label": "GBP — British Pound", "value": "GBP" }
94
+ ]
95
+ }
96
+ }
97
+ ]
98
+ },
99
+ {
100
+ "type": "layout-cell",
101
+ "props": {},
102
+ "style": {},
103
+ "children": [
104
+ {
105
+ "type": "dropdown",
106
+ "props": {
107
+ "key": "paymentTerms",
108
+ "label": "Payment Terms",
109
+ "fullWidth": true,
110
+ "options": [
111
+ { "label": "Due on Receipt", "value": "immediate" },
112
+ { "label": "Net 15", "value": "net15" },
113
+ { "label": "Net 30", "value": "net30" },
114
+ { "label": "Net 60", "value": "net60" }
115
+ ]
116
+ }
117
+ }
118
+ ]
119
+ },
120
+ {
121
+ "type": "layout-cell",
122
+ "props": {},
123
+ "style": {},
124
+ "children": [
125
+ { "type": "input", "props": { "key": "poNumber", "label": "PO Number (optional)", "placeholder": "e.g. PO-12345" }, "style": { "width": "100%" } }
126
+ ]
127
+ }
128
+ ]
129
+ }
130
+ ]
131
+ }
132
+ ]
133
+ }
134
+ ]
135
+ },
136
+ {
137
+ "type": "layout-cell",
138
+ "props": {},
139
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "28px" },
140
+ "children": [
141
+ {
142
+ "type": "layout",
143
+ "props": { "cols": 1, "rowGap": 16 },
144
+ "children": [
145
+ {
146
+ "type": "layout-cell",
147
+ "props": {},
148
+ "style": {},
149
+ "children": [
150
+ { "type": "header", "props": { "text": "Line Items", "variant": "h6", "color": "textPrimary" } }
151
+ ]
152
+ },
153
+ {
154
+ "type": "layout-cell",
155
+ "props": {},
156
+ "style": {},
157
+ "children": [
158
+ {
159
+ "type": "dataGrid",
160
+ "props": {
161
+ "key": "lineItems",
162
+ "dataKey": "data.invoice.lineItems",
163
+ "height": "320px",
164
+ "addLabel": "Add Line Item",
165
+ "showAddBtn": true,
166
+ "showDeleteCol": true,
167
+ "columns": "data.lineItemColumns"
168
+ }
169
+ }
170
+ ]
171
+ },
172
+ {
173
+ "type": "layout-cell",
174
+ "props": {},
175
+ "style": {},
176
+ "children": [
177
+ { "type": "divider", "props": { "orientation": "horizontal" } }
178
+ ]
179
+ },
180
+ {
181
+ "type": "layout-cell",
182
+ "props": {},
183
+ "style": { "justifyContent": "flex-end" },
184
+ "children": [
185
+ {
186
+ "type": "layout",
187
+ "props": { "cols": 3, "gap": 24 },
188
+ "children": [
189
+ {
190
+ "type": "layout-cell",
191
+ "props": {},
192
+ "style": { "alignItems": "flex-end" },
193
+ "children": [
194
+ { "type": "kpi-metric", "props": { "valueKey": "data.invoice.subtotal", "label": "Subtotal", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "20px", "fontWeight": "600", "align": "right", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "12px" } }
195
+ ]
196
+ },
197
+ {
198
+ "type": "layout-cell",
199
+ "props": {},
200
+ "style": { "alignItems": "flex-end" },
201
+ "children": [
202
+ { "type": "kpi-metric", "props": { "valueKey": "data.invoice.tax", "label": "Tax (10%)", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "20px", "fontWeight": "600", "align": "right", "labelPosition": "above", "labelColor": "text.secondary", "labelFontSize": "12px" } }
203
+ ]
204
+ },
205
+ {
206
+ "type": "layout-cell",
207
+ "props": {},
208
+ "style": { "alignItems": "flex-end", "backgroundColor": "#f0f7ff", "borderRadius": "8px", "padding": "12px 16px" },
209
+ "children": [
210
+ { "type": "kpi-metric", "props": { "valueKey": "data.invoice.total", "label": "Total Due", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "28px", "fontWeight": "700", "align": "right", "labelPosition": "above", "labelColor": "primary.main", "labelFontSize": "13px", "color": "primary.main" } }
211
+ ]
212
+ }
213
+ ]
214
+ }
215
+ ]
216
+ }
217
+ ]
218
+ }
219
+ ]
220
+ },
221
+ {
222
+ "type": "layout-cell",
223
+ "props": {},
224
+ "style": { "justifyContent": "flex-end", "gap": "12px" },
225
+ "children": [
226
+ { "type": "button", "props": { "label": "Save as Draft", "variant": "outlined", "color": "inherit", "prefix": "SaveOutlined" } },
227
+ {
228
+ "type": "button",
229
+ "props": { "label": "Send Invoice", "variant": "contained", "color": "primary", "prefix": "SendOutlined", "size": "large" },
230
+ "actions": {
231
+ "onClick": { "type": "custom", "code": "sendInvoice({ clientId: form.clientId, lineItems: form.lineItems, total: data.invoice.total })" }
232
+ }
233
+ }
234
+ ]
235
+ }
236
+ ]
237
+ },
238
+ "dialogs": [],
239
+ "actions": [],
240
+ "timers": []
241
+ }