robobyte-front-builder 1.0.26 → 1.0.28
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.
- package/INTEGRATION.md +6 -0
- package/LICENSE +65 -0
- package/README.md +166 -21
- package/docs/ReportViewer.md +581 -0
- package/docs/fetchReportData.md +379 -0
- package/docs/printLayout.md +405 -0
- package/package.json +29 -1
- package/src/lib/index.js +14 -0
- package/src/lib/muiTheme.js +655 -0
- package/src/lib/providers/RoboByteFrontBuilderProvider.jsx +45 -1
- package/src/pages/_app.js +1 -0
- package/src/pages/printBuilder/index.jsx +26 -19
- package/src/pages/viewBuilder/index.jsx +29 -19
- package/training/00-index.md +168 -0
- package/training/01-input.md +144 -0
- package/training/02-checkbox.md +107 -0
- package/training/03-dropdown.md +135 -0
- package/training/04-datepicker.md +139 -0
- package/training/05-radio.md +123 -0
- package/training/06-number.md +133 -0
- package/training/07-textarea.md +114 -0
- package/training/08-richtext.md +112 -0
- package/training/09-tag.md +110 -0
- package/training/10-time.md +107 -0
- package/training/11-toggle.md +108 -0
- package/training/12-signature.md +107 -0
- package/training/13-autocomplete.md +134 -0
- package/training/14-button.md +168 -0
- package/training/15-label.md +138 -0
- package/training/16-header.md +128 -0
- package/training/17-divider.md +96 -0
- package/training/18-image.md +105 -0
- package/training/19-link.md +108 -0
- package/training/20-banner.md +122 -0
- package/training/21-progress-circle.md +101 -0
- package/training/22-progress-line.md +93 -0
- package/training/23-menu.md +139 -0
- package/training/24-popover.md +114 -0
- package/training/25-layout.md +116 -0
- package/training/26-layout-cell.md +143 -0
- package/training/27-card.md +87 -0
- package/training/28-wizard.md +126 -0
- package/training/29-wizard-step.md +92 -0
- package/training/30-repeater.md +123 -0
- package/training/31-dialog.md +131 -0
- package/training/32-breadcrumb.md +121 -0
- package/training/33-dataGrid.md +129 -0
- package/training/34-dataTableViewer.md +115 -0
- package/training/35-reportViewer.md +673 -0
- package/training/36-viewRenderer.md +110 -0
- package/training/37-treeView.md +170 -0
- package/training/38-kpi-metric.md +148 -0
- package/training/39-kpi-trend.md +105 -0
- package/training/40-kpi-badge.md +112 -0
- package/training/41-kpi-statusDot.md +118 -0
- package/training/42-kpi-iconBox.md +114 -0
- package/training/43-kpi-gauge.md +143 -0
- package/training/44-kpi-bulletChart.md +126 -0
- package/training/45-kpi-colorScale.md +143 -0
- package/training/46-kpi-rating.md +125 -0
- package/training/47-kpi-countdown.md +151 -0
- package/training/48-fetchReportData.md +276 -0
- package/training/49-printLayout.md +215 -0
- package/training/examples/01-login-form.json +176 -0
- package/training/examples/02-contact-form.json +141 -0
- package/training/examples/03-kpi-cards-row.json +123 -0
- package/training/examples/04-settings-toggles.json +153 -0
- package/training/examples/05-user-profile-card.json +136 -0
- package/training/examples/06-date-range-filter.json +108 -0
- package/training/examples/07-search-bar-results.json +130 -0
- package/training/examples/08-notification-settings.json +131 -0
- package/training/examples/09-employee-profile-form.json +259 -0
- package/training/examples/10-invoice-form.json +241 -0
- package/training/examples/11-dashboard-overview.json +251 -0
- package/training/examples/12-registration-wizard.json +154 -0
- package/training/examples/13-product-catalog.json +168 -0
- package/training/examples/14-data-table-with-filters.json +180 -0
- package/training/examples/15-tabbed-profile.json +92 -0
- package/training/examples/16-kpi-full-row.json +203 -0
- package/training/examples/17-tree-detail-view.json +139 -0
- package/training/examples/18-employee-management.json +233 -0
- package/training/examples/19-sales-dashboard.json +272 -0
- package/training/examples/20-checkout-wizard.json +225 -0
- package/training/examples/21-analytics-page.json +222 -0
- package/training/examples/22-hr-onboarding.json +222 -0
- package/training/examples/23-document-browser.json +241 -0
- package/training/examples/24-order-management.json +290 -0
- package/training/examples/25-crm-contact-page.json +272 -0
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "Settings panel with toggle switches for notification preferences — simple settings UI",
|
|
3
|
+
"components_used": ["layout", "layout-cell", "header", "label", "divider", "toggle", "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": "560px" },
|
|
12
|
+
"children": [
|
|
13
|
+
{
|
|
14
|
+
"type": "layout",
|
|
15
|
+
"props": { "cols": 1, "rowGap": 0 },
|
|
16
|
+
"children": [
|
|
17
|
+
{
|
|
18
|
+
"type": "layout-cell",
|
|
19
|
+
"props": {},
|
|
20
|
+
"style": { "padding": "0 0 20px 0" },
|
|
21
|
+
"children": [
|
|
22
|
+
{ "type": "header", "props": { "text": "Notification Settings", "variant": "h5", "component": "h1", "color": "textPrimary", "prefix": "NotificationsOutlined", "prefixColor": "primary.main", "iconGap": "10px" } }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"type": "layout-cell",
|
|
27
|
+
"props": {},
|
|
28
|
+
"style": { "padding": "16px 0", "justifyContent": "space-between", "alignItems": "center" },
|
|
29
|
+
"children": [
|
|
30
|
+
{
|
|
31
|
+
"type": "layout",
|
|
32
|
+
"props": { "cols": 1, "rowGap": 4 },
|
|
33
|
+
"children": [
|
|
34
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
35
|
+
{ "type": "label", "props": { "text": "Email Notifications", "variant": "body1", "color": "textPrimary", "fontWeight": "500" } }
|
|
36
|
+
]},
|
|
37
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
38
|
+
{ "type": "label", "props": { "text": "Receive updates and alerts via email", "variant": "body2", "color": "textSecondary" } }
|
|
39
|
+
]}
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
{ "type": "toggle", "props": { "key": "emailNotifs", "size": "medium", "color": "primary", "labelPosition": "none" } }
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "layout-cell",
|
|
47
|
+
"props": {},
|
|
48
|
+
"style": {},
|
|
49
|
+
"children": [
|
|
50
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
51
|
+
]
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"type": "layout-cell",
|
|
55
|
+
"props": {},
|
|
56
|
+
"style": { "padding": "16px 0", "justifyContent": "space-between", "alignItems": "center" },
|
|
57
|
+
"children": [
|
|
58
|
+
{
|
|
59
|
+
"type": "layout",
|
|
60
|
+
"props": { "cols": 1, "rowGap": 4 },
|
|
61
|
+
"children": [
|
|
62
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
63
|
+
{ "type": "label", "props": { "text": "Push Notifications", "variant": "body1", "color": "textPrimary", "fontWeight": "500" } }
|
|
64
|
+
]},
|
|
65
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
66
|
+
{ "type": "label", "props": { "text": "Show alerts in browser and mobile app", "variant": "body2", "color": "textSecondary" } }
|
|
67
|
+
]}
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{ "type": "toggle", "props": { "key": "pushNotifs", "size": "medium", "color": "primary", "labelPosition": "none" } }
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"type": "layout-cell",
|
|
75
|
+
"props": {},
|
|
76
|
+
"style": {},
|
|
77
|
+
"children": [
|
|
78
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"type": "layout-cell",
|
|
83
|
+
"props": {},
|
|
84
|
+
"style": { "padding": "16px 0", "justifyContent": "space-between", "alignItems": "center" },
|
|
85
|
+
"children": [
|
|
86
|
+
{
|
|
87
|
+
"type": "layout",
|
|
88
|
+
"props": { "cols": 1, "rowGap": 4 },
|
|
89
|
+
"children": [
|
|
90
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
91
|
+
{ "type": "label", "props": { "text": "Weekly Digest", "variant": "body1", "color": "textPrimary", "fontWeight": "500" } }
|
|
92
|
+
]},
|
|
93
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
94
|
+
{ "type": "label", "props": { "text": "Get a summary of activity every Monday", "variant": "body2", "color": "textSecondary" } }
|
|
95
|
+
]}
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
{ "type": "toggle", "props": { "key": "weeklyDigest", "size": "medium", "color": "primary", "labelPosition": "none" } }
|
|
99
|
+
]
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"type": "layout-cell",
|
|
103
|
+
"props": {},
|
|
104
|
+
"style": {},
|
|
105
|
+
"children": [
|
|
106
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"type": "layout-cell",
|
|
111
|
+
"props": {},
|
|
112
|
+
"style": { "padding": "16px 0", "justifyContent": "space-between", "alignItems": "center" },
|
|
113
|
+
"children": [
|
|
114
|
+
{
|
|
115
|
+
"type": "layout",
|
|
116
|
+
"props": { "cols": 1, "rowGap": 4 },
|
|
117
|
+
"children": [
|
|
118
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
119
|
+
{ "type": "label", "props": { "text": "Marketing Emails", "variant": "body1", "color": "textPrimary", "fontWeight": "500" } }
|
|
120
|
+
]},
|
|
121
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
122
|
+
{ "type": "label", "props": { "text": "Product news, tips, and promotional content", "variant": "body2", "color": "textSecondary" } }
|
|
123
|
+
]}
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{ "type": "toggle", "props": { "key": "marketingEmails", "size": "medium", "color": "primary", "labelPosition": "none" } }
|
|
127
|
+
]
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"type": "layout-cell",
|
|
131
|
+
"props": {},
|
|
132
|
+
"style": { "padding": "24px 0 0 0", "justifyContent": "flex-end", "gap": "12px" },
|
|
133
|
+
"children": [
|
|
134
|
+
{ "type": "button", "props": { "label": "Cancel", "variant": "outlined", "color": "inherit", "size": "medium" } },
|
|
135
|
+
{
|
|
136
|
+
"type": "button",
|
|
137
|
+
"props": { "label": "Save Preferences", "variant": "contained", "color": "primary", "size": "medium" },
|
|
138
|
+
"actions": {
|
|
139
|
+
"onClick": { "type": "custom", "code": "saveNotificationSettings({ emailNotifs: form.emailNotifs, pushNotifs: form.pushNotifs, weeklyDigest: form.weeklyDigest, marketingEmails: form.marketingEmails })" }
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
}
|
|
146
|
+
]
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
},
|
|
150
|
+
"dialogs": [],
|
|
151
|
+
"actions": [],
|
|
152
|
+
"timers": []
|
|
153
|
+
}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "User profile card with avatar, name, role badge, stats, and contact details — read-only display",
|
|
3
|
+
"components_used": ["layout", "layout-cell", "image", "header", "label", "divider", "kpi-badge", "kpi-statusDot", "kpi-metric", "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": "16px", "boxShadow": "0 4px 20px rgba(0,0,0,0.10)", "overflow": "hidden", "maxWidth": "380px" },
|
|
12
|
+
"children": [
|
|
13
|
+
{
|
|
14
|
+
"type": "layout",
|
|
15
|
+
"props": { "cols": 1, "rowGap": 0 },
|
|
16
|
+
"children": [
|
|
17
|
+
{
|
|
18
|
+
"type": "layout-cell",
|
|
19
|
+
"props": {},
|
|
20
|
+
"style": { "backgroundColor": "#1976d2", "padding": "32px 24px 48px 24px", "alignItems": "center", "justifyContent": "center" },
|
|
21
|
+
"children": [
|
|
22
|
+
{ "type": "image", "props": { "src": "data.user.avatarUrl", "alt": "User Avatar", "width": "96px", "height": "96px", "borderRadius": "50%", "border": "3px solid #ffffff", "objectFit": "cover" } }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"type": "layout-cell",
|
|
27
|
+
"props": {},
|
|
28
|
+
"style": { "padding": "0 24px 24px 24px", "alignItems": "center", "marginTop": "-28px" },
|
|
29
|
+
"children": [
|
|
30
|
+
{
|
|
31
|
+
"type": "layout",
|
|
32
|
+
"props": { "cols": 1, "rowGap": 8 },
|
|
33
|
+
"children": [
|
|
34
|
+
{
|
|
35
|
+
"type": "layout-cell",
|
|
36
|
+
"props": {},
|
|
37
|
+
"style": { "alignItems": "center", "gap": "8px" },
|
|
38
|
+
"children": [
|
|
39
|
+
{ "type": "header", "props": { "text": "data.user.fullName", "variant": "h5", "component": "h2", "align": "center", "color": "textPrimary" } },
|
|
40
|
+
{ "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" }, { "operator": "==", "value": "Developer", "color": "info.main", "label": "Developer" }] } }
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"type": "layout-cell",
|
|
45
|
+
"props": {},
|
|
46
|
+
"style": { "alignItems": "center", "gap": "6px" },
|
|
47
|
+
"children": [
|
|
48
|
+
{ "type": "kpi-statusDot", "props": { "valueKey": "data.user.status", "size": "8", "pulse": true, "showLabel": true, "labelPosition": "right", "thresholds": [{ "operator": "==", "value": "online", "color": "success.main", "label": "Online" }, { "operator": "==", "value": "away", "color": "warning.main", "label": "Away" }, { "operator": "==", "value": "offline", "color": "text.disabled", "label": "Offline" }] } }
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"type": "layout-cell",
|
|
53
|
+
"props": {},
|
|
54
|
+
"style": {},
|
|
55
|
+
"children": [
|
|
56
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"type": "layout-cell",
|
|
61
|
+
"props": {},
|
|
62
|
+
"style": {},
|
|
63
|
+
"children": [
|
|
64
|
+
{
|
|
65
|
+
"type": "layout",
|
|
66
|
+
"props": { "cols": 3, "gap": 0 },
|
|
67
|
+
"children": [
|
|
68
|
+
{
|
|
69
|
+
"type": "layout-cell",
|
|
70
|
+
"props": {},
|
|
71
|
+
"style": { "alignItems": "center", "borderRight": "1px solid #e0e0e0", "padding": "8px" },
|
|
72
|
+
"children": [
|
|
73
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.user.projectCount", "label": "Projects", "format": "number", "fontSize": "22px", "fontWeight": "700", "align": "center", "labelPosition": "below", "labelColor": "text.secondary", "labelFontSize": "12px" } }
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"type": "layout-cell",
|
|
78
|
+
"props": {},
|
|
79
|
+
"style": { "alignItems": "center", "borderRight": "1px solid #e0e0e0", "padding": "8px" },
|
|
80
|
+
"children": [
|
|
81
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.user.tasksCompleted", "label": "Tasks Done", "format": "number", "fontSize": "22px", "fontWeight": "700", "align": "center", "labelPosition": "below", "labelColor": "text.secondary", "labelFontSize": "12px" } }
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"type": "layout-cell",
|
|
86
|
+
"props": {},
|
|
87
|
+
"style": { "alignItems": "center", "padding": "8px" },
|
|
88
|
+
"children": [
|
|
89
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.user.yearsExp", "label": "Years Exp", "format": "number", "decimals": 0, "fontSize": "22px", "fontWeight": "700", "align": "center", "labelPosition": "below", "labelColor": "text.secondary", "labelFontSize": "12px" } }
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"type": "layout-cell",
|
|
98
|
+
"props": {},
|
|
99
|
+
"style": {},
|
|
100
|
+
"children": [
|
|
101
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
102
|
+
]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"type": "layout-cell",
|
|
106
|
+
"props": {},
|
|
107
|
+
"style": { "gap": "8px" },
|
|
108
|
+
"children": [
|
|
109
|
+
{ "type": "label", "props": { "text": "data.user.email", "variant": "body2", "color": "textSecondary", "prefix": "EmailOutlined", "prefixColor": "primary.main", "prefixSize": "16px", "iconGap": "8px" } },
|
|
110
|
+
{ "type": "label", "props": { "text": "data.user.department", "variant": "body2", "color": "textSecondary", "prefix": "BusinessOutlined", "prefixColor": "primary.main", "prefixSize": "16px", "iconGap": "8px" } },
|
|
111
|
+
{ "type": "label", "props": { "text": "data.user.location", "variant": "body2", "color": "textSecondary", "prefix": "LocationOnOutlined", "prefixColor": "primary.main", "prefixSize": "16px", "iconGap": "8px" } }
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"type": "layout-cell",
|
|
116
|
+
"props": {},
|
|
117
|
+
"style": { "gap": "8px", "padding": "8px 0 0 0" },
|
|
118
|
+
"children": [
|
|
119
|
+
{ "type": "button", "props": { "label": "Send Message", "variant": "contained", "color": "primary", "fullWidth": true, "prefix": "ChatOutlined" } },
|
|
120
|
+
{ "type": "button", "props": { "label": "View Profile", "variant": "outlined", "color": "primary", "fullWidth": true, "prefix": "PersonOutlined" } }
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
]
|
|
132
|
+
},
|
|
133
|
+
"dialogs": [],
|
|
134
|
+
"actions": [],
|
|
135
|
+
"timers": []
|
|
136
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "Date range filter bar with preset dropdown and apply button — reusable filter component",
|
|
3
|
+
"components_used": ["layout", "layout-cell", "header", "datepicker", "dropdown", "button", "label"],
|
|
4
|
+
"root": {
|
|
5
|
+
"type": "layout",
|
|
6
|
+
"props": { "cols": 1, "rowGap": 16 },
|
|
7
|
+
"children": [
|
|
8
|
+
{
|
|
9
|
+
"type": "layout-cell",
|
|
10
|
+
"props": {},
|
|
11
|
+
"style": {},
|
|
12
|
+
"children": [
|
|
13
|
+
{ "type": "header", "props": { "text": "Filter by Date Range", "variant": "h6", "component": "h2", "color": "textPrimary" } }
|
|
14
|
+
]
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"type": "layout-cell",
|
|
18
|
+
"props": {},
|
|
19
|
+
"style": { "backgroundColor": "#f8f9fa", "borderRadius": "8px", "padding": "16px", "border": "1px solid #e0e0e0" },
|
|
20
|
+
"children": [
|
|
21
|
+
{
|
|
22
|
+
"type": "layout",
|
|
23
|
+
"props": { "cols": 4, "gap": 16 },
|
|
24
|
+
"children": [
|
|
25
|
+
{
|
|
26
|
+
"type": "layout-cell",
|
|
27
|
+
"props": {},
|
|
28
|
+
"style": {},
|
|
29
|
+
"children": [
|
|
30
|
+
{
|
|
31
|
+
"type": "dropdown",
|
|
32
|
+
"props": {
|
|
33
|
+
"key": "preset",
|
|
34
|
+
"label": "Quick Select",
|
|
35
|
+
"fullWidth": true,
|
|
36
|
+
"placeholder": "Choose preset...",
|
|
37
|
+
"options": [
|
|
38
|
+
{ "label": "Today", "value": "today" },
|
|
39
|
+
{ "label": "Yesterday", "value": "yesterday" },
|
|
40
|
+
{ "label": "Last 7 Days", "value": "last7" },
|
|
41
|
+
{ "label": "Last 30 Days", "value": "last30" },
|
|
42
|
+
{ "label": "This Month", "value": "thisMonth" },
|
|
43
|
+
{ "label": "Last Month", "value": "lastMonth" },
|
|
44
|
+
{ "label": "This Quarter", "value": "thisQuarter" },
|
|
45
|
+
{ "label": "Custom Range", "value": "custom" }
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
"actions": {
|
|
49
|
+
"onChange": { "type": "custom", "code": "applyPreset(form.preset)" }
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"type": "layout-cell",
|
|
56
|
+
"props": {},
|
|
57
|
+
"style": {},
|
|
58
|
+
"children": [
|
|
59
|
+
{ "type": "datepicker", "props": { "key": "startDate", "label": "Start Date", "fullWidth": true, "format": "MM/DD/YYYY", "clearable": true, "placeholder": "From..." } }
|
|
60
|
+
]
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"type": "layout-cell",
|
|
64
|
+
"props": {},
|
|
65
|
+
"style": {},
|
|
66
|
+
"children": [
|
|
67
|
+
{ "type": "datepicker", "props": { "key": "endDate", "label": "End Date", "fullWidth": true, "format": "MM/DD/YYYY", "clearable": true, "placeholder": "To..." } }
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"type": "layout-cell",
|
|
72
|
+
"props": {},
|
|
73
|
+
"style": { "alignItems": "flex-end", "gap": "8px" },
|
|
74
|
+
"children": [
|
|
75
|
+
{
|
|
76
|
+
"type": "button",
|
|
77
|
+
"props": { "label": "Apply", "variant": "contained", "color": "primary", "prefix": "FilterListOutlined" },
|
|
78
|
+
"actions": {
|
|
79
|
+
"onClick": { "type": "custom", "code": "applyDateFilter({ startDate: form.startDate, endDate: form.endDate })" }
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"type": "button",
|
|
84
|
+
"props": { "label": "Clear", "variant": "outlined", "color": "inherit" },
|
|
85
|
+
"actions": {
|
|
86
|
+
"onClick": { "type": "reset" }
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"type": "layout-cell",
|
|
97
|
+
"props": {},
|
|
98
|
+
"style": {},
|
|
99
|
+
"children": [
|
|
100
|
+
{ "type": "label", "props": { "text": "data.filterSummary", "variant": "caption", "color": "textSecondary", "prefix": "InfoOutlined", "prefixSize": "14px", "iconGap": "4px" } }
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
"dialogs": [],
|
|
106
|
+
"actions": [],
|
|
107
|
+
"timers": []
|
|
108
|
+
}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "Search bar with autocomplete suggestions and results table below — search UI pattern",
|
|
3
|
+
"components_used": ["layout", "layout-cell", "header", "input", "autocomplete", "button", "dataTableViewer", "label", "divider"],
|
|
4
|
+
"root": {
|
|
5
|
+
"type": "layout",
|
|
6
|
+
"props": { "cols": 1, "rowGap": 24 },
|
|
7
|
+
"children": [
|
|
8
|
+
{
|
|
9
|
+
"type": "layout-cell",
|
|
10
|
+
"props": {},
|
|
11
|
+
"style": {},
|
|
12
|
+
"children": [
|
|
13
|
+
{ "type": "header", "props": { "text": "Search Employees", "variant": "h5", "component": "h1", "color": "textPrimary" } }
|
|
14
|
+
]
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"type": "layout-cell",
|
|
18
|
+
"props": {},
|
|
19
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
|
|
20
|
+
"children": [
|
|
21
|
+
{
|
|
22
|
+
"type": "layout",
|
|
23
|
+
"props": { "cols": 1, "rowGap": 16 },
|
|
24
|
+
"children": [
|
|
25
|
+
{
|
|
26
|
+
"type": "layout-cell",
|
|
27
|
+
"props": {},
|
|
28
|
+
"style": {},
|
|
29
|
+
"children": [
|
|
30
|
+
{
|
|
31
|
+
"type": "layout",
|
|
32
|
+
"props": { "cols": 3, "gap": 12 },
|
|
33
|
+
"children": [
|
|
34
|
+
{
|
|
35
|
+
"type": "layout-cell",
|
|
36
|
+
"props": { "colSpan": 2 },
|
|
37
|
+
"style": {},
|
|
38
|
+
"children": [
|
|
39
|
+
{
|
|
40
|
+
"type": "autocomplete",
|
|
41
|
+
"props": {
|
|
42
|
+
"key": "searchQuery",
|
|
43
|
+
"label": "Search by name, email, or department",
|
|
44
|
+
"optionsKey": "data.employeeSuggestions",
|
|
45
|
+
"labelField": "label",
|
|
46
|
+
"valueField": "value",
|
|
47
|
+
"freeSolo": true,
|
|
48
|
+
"fullWidth": true,
|
|
49
|
+
"prefix": "SearchOutlined",
|
|
50
|
+
"clearable": true,
|
|
51
|
+
"placeholder": "Start typing..."
|
|
52
|
+
},
|
|
53
|
+
"actions": {
|
|
54
|
+
"onChange": { "type": "custom", "code": "loadSuggestions(form.searchQuery)" }
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"type": "layout-cell",
|
|
61
|
+
"props": {},
|
|
62
|
+
"style": { "alignItems": "flex-end" },
|
|
63
|
+
"children": [
|
|
64
|
+
{
|
|
65
|
+
"type": "button",
|
|
66
|
+
"props": { "label": "Search", "variant": "contained", "color": "primary", "fullWidth": true, "size": "medium", "prefix": "SearchOutlined" },
|
|
67
|
+
"actions": {
|
|
68
|
+
"onClick": { "type": "custom", "code": "searchEmployees({ query: form.searchQuery })" }
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"type": "layout-cell",
|
|
79
|
+
"props": {},
|
|
80
|
+
"style": {},
|
|
81
|
+
"children": [
|
|
82
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"type": "layout-cell",
|
|
87
|
+
"props": {},
|
|
88
|
+
"style": { "justifyContent": "space-between", "alignItems": "center" },
|
|
89
|
+
"children": [
|
|
90
|
+
{ "type": "label", "props": { "text": "data.resultCount + ' results found'", "variant": "body2", "color": "textSecondary" } },
|
|
91
|
+
{ "type": "label", "props": { "text": "data.searchTime + 'ms'", "variant": "caption", "color": "textSecondary" } }
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"type": "layout-cell",
|
|
96
|
+
"props": {},
|
|
97
|
+
"style": {},
|
|
98
|
+
"children": [
|
|
99
|
+
{
|
|
100
|
+
"type": "dataTableViewer",
|
|
101
|
+
"props": {
|
|
102
|
+
"dataKey": "data.searchResults",
|
|
103
|
+
"columns": [
|
|
104
|
+
{ "field": "name", "headerName": "Full Name", "width": "200px" },
|
|
105
|
+
{ "field": "email", "headerName": "Email", "width": "220px" },
|
|
106
|
+
{ "field": "department", "headerName": "Department", "width": "160px" },
|
|
107
|
+
{ "field": "role", "headerName": "Role", "width": "150px" },
|
|
108
|
+
{ "field": "status", "headerName": "Status", "width": "100px" }
|
|
109
|
+
],
|
|
110
|
+
"showHeader": true,
|
|
111
|
+
"striped": true,
|
|
112
|
+
"rowHover": true,
|
|
113
|
+
"bordered": true,
|
|
114
|
+
"headerBgColor": "#f5f5f5",
|
|
115
|
+
"headerFontSize": "13px",
|
|
116
|
+
"fontSize": "14px"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
"dialogs": [],
|
|
128
|
+
"actions": [],
|
|
129
|
+
"timers": []
|
|
130
|
+
}
|