Skip to content

Commit cf5ba8d

Browse files
hotlonghotlong
committed
Add statistic component and enhance dashboard UI
Introduces a new 'statistic' data-display component for dashboard metrics, updates CRM app pages to use modern layouts and components (tabs, grid, kanban, charts), and refactors chart/kanban plugins for better schema adaptation and color handling. Also updates dependencies, Tailwind and Vite configs to support new plugins, and improves error/loading handling in the runner app.
1 parent 463f693 commit cf5ba8d

File tree

20 files changed

+701
-425
lines changed

20 files changed

+701
-425
lines changed

‎examples/crm-app/pages/customers/[id].json‎

Lines changed: 96 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,104 @@
11
{
22
"type": "page",
33
"title": "Customer Detail",
4-
"className": "p-8 max-w-4xl mx-auto",
54
"body": [
65
{
7-
"type": "button",
8-
"label": "← Back to List",
9-
"variant": "link",
10-
"className": "mb-4 pl-0",
11-
"onClick": "navigate('/customers')"
12-
},
13-
{
14-
"type": "header",
15-
"title": "Customer Profile: ${params.id}",
16-
"className": "mb-6 pb-4 border-b"
17-
},
18-
{
19-
"type": "form",
20-
"objectApiName": "customers",
21-
"recordId": "${params.id}",
22-
"className": "space-y-6",
23-
"fields": [
24-
{ "type": "input", "name": "name", "label": "Company Name", "readOnly": true },
25-
{ "type": "input", "name": "email", "label": "Contact Email", "readOnly": true }
6+
"type": "tabs",
7+
"defaultValue": "overview",
8+
"items": [
9+
{
10+
"label": "Overview",
11+
"value": "overview",
12+
"content": {
13+
"type": "grid",
14+
"columns": 12,
15+
"gap": 6,
16+
"children": [
17+
{
18+
"type": "card",
19+
"title": "Company Profile",
20+
"className": "col-span-12 md:col-span-4",
21+
"children": [
22+
{
23+
"type": "flex",
24+
"direction": "col",
25+
"align": "center",
26+
"className": "pb-6 border-b mb-6",
27+
"children": [
28+
{ "type": "avatar", "fallback": "AC", "size": "xl", "className": "mb-4" },
29+
{ "type": "text", "value": "Acme Corp", "variant": "h3" },
30+
{ "type": "text", "value": "Technology • San Francisco", "variant": "muted" }
31+
]
32+
},
33+
{
34+
"type": "flex",
35+
"direction": "col",
36+
"gap": 4,
37+
"children": [
38+
{ "type": "button", "label": "Edit Profile", "variant": "outline", "className": "w-full" },
39+
{ "type": "button", "label": "Contact", "className": "w-full" }
40+
]
41+
}
42+
]
43+
},
44+
{
45+
"type": "card",
46+
"title": "Details",
47+
"className": "col-span-12 md:col-span-8",
48+
"children": [
49+
{
50+
"type": "form",
51+
"mode": "read",
52+
"layout": "vertical",
53+
"defaultValues": {
54+
"name": "Acme Corp",
55+
"industry": "technology",
56+
"employees": "500-1000",
57+
"revenue": "10M+",
58+
"website": "https://acme.com",
59+
"phone": "+1 (555) 0123",
60+
"description": "Leading provider of road runner catching equipment."
61+
},
62+
"body": [
63+
{
64+
"type": "grid",
65+
"columns": 2,
66+
"gap": 6,
67+
"children": [
68+
{ "type": "input", "name": "name", "label": "Company Name" },
69+
{ "type": "select", "name": "industry", "label": "Industry", "options": [{"label":"Tech","value":"technology"}] },
70+
{ "type": "select", "name": "employees", "label": "Employees", "options": [{"label":"500-1000","value":"500-1000"}] },
71+
{ "type": "input", "name": "revenue", "label": "Annual Revenue" },
72+
{ "type": "input", "name": "website", "label": "Website" },
73+
{ "type": "input", "name": "phone", "label": "Phone" },
74+
{ "type": "textarea", "name": "description", "label": "Description", "colSpan": 2, "rows": 3 }
75+
]
76+
}
77+
]
78+
}
79+
]
80+
}
81+
]
82+
}
83+
},
84+
{
85+
"label": "Activity",
86+
"value": "activity",
87+
"content": {
88+
"type": "card",
89+
"title": "Timeline",
90+
"children": [
91+
{
92+
"type": "timeline",
93+
"items": [
94+
{ "title": "Contract Signed", "time": "2 hours ago", "description": "Annual enterprise license agreement signed." },
95+
{ "title": "Meeting with CEO", "time": "Yesterday", "description": "Discussed Q4 roadmap." },
96+
{ "title": "Ticket Resolved", "time": "3 days ago", "description": "Support ticket #10234 fixed." }
97+
]
98+
}
99+
]
100+
}
101+
}
26102
]
27103
}
28104
]

‎examples/crm-app/pages/customers/index.json‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,53 @@
33
"title": "Customers",
44
"body": [
55
{
6-
"type": "div",
7-
"className": "flex flex-col gap-6",
6+
"type": "card",
7+
"className": "p-0",
88
"children": [
99
{
10-
"type": "div",
11-
"className": "flex justify-between items-center",
12-
"children": [
13-
{
14-
"type": "div",
15-
"children": [
16-
{ "type": "html", "html": "<h2 class='text-3xl font-bold'>Customers</h2>" },
17-
{ "type": "html", "html": "<p class='text-muted-foreground'>Manage your customer relationships and accounts.</p>" }
18-
]
19-
},
20-
{
21-
"type": "button",
22-
"label": "Add Customer"
23-
}
24-
]
25-
},
26-
{
27-
"type": "card",
28-
"className": "p-0 overflow-hidden shadow-sm",
29-
"children": [
10+
"type": "data-table",
11+
"toolbar": [
3012
{
31-
"type": "table",
32-
"columns": [
33-
{ "header": "Name", "accessorKey": "name", "className": "w-[200px]" },
34-
{ "header": "Email", "accessorKey": "email" },
35-
{ "header": "Status", "accessorKey": "status" },
36-
{ "header": "Last Order", "accessorKey": "lastOrder" },
37-
{ "header": "Method", "accessorKey": "method", "className": "text-right" }
38-
],
39-
"data": [
40-
{ "name": "Olivia Martin", "email": "olivia.martin@email.com", "status": "Active", "lastOrder": "$250.00", "method": "Credit Card" },
41-
{ "name": "Isabella Nguyen", "email": "isabella.nguyen@email.com", "status": "Active", "lastOrder": "$450.00", "method": "PayPal" },
42-
{ "name": "Michael Johnson", "email": "michael.johnson@email.com", "status": "Inactive", "lastOrder": "$150.00", "method": "Bank Transfer" },
43-
{ "name": "Sofia Davis", "email": "sofia.davis@email.com", "status": "Active", "lastOrder": "$1,250.00", "method": "Credit Card" },
44-
{ "name": "William Kim", "email": "will.kim@email.com", "status": "Active", "lastOrder": "$50.00", "method": "PayPal" }
13+
"type": "flex",
14+
"justify": "between",
15+
"className": "p-4 border-b",
16+
"children": [
17+
{
18+
"type": "div",
19+
"className": "flex gap-2",
20+
"children": [
21+
{ "type": "input", "placeholder": "Filter customers...", "className": "w-[250px]" }
22+
]
23+
},
24+
{
25+
"type": "div",
26+
"className": "flex gap-2",
27+
"children": [
28+
{ "type": "button", "label": "Export", "variant": "outline", "size": "sm", "icon": "download" },
29+
{ "type": "button", "label": "New Customer", "size": "sm", "icon": "plus" }
30+
]
31+
}
4532
]
4633
}
47-
]
34+
],
35+
"columns": [
36+
{ "header": "Name", "accessorKey": "name", "sortable": true, "width": 200, "fixed": "left" },
37+
{ "header": "Status", "accessorKey": "status", "type": "badge", "width": 100 },
38+
{ "header": "Email", "accessorKey": "email", "width": 200 },
39+
{ "header": "Amount", "accessorKey": "amount", "type": "currency", "align": "right", "width": 150 },
40+
{ "header": "Created At", "accessorKey": "createdAt", "type": "date", "width": 150 },
41+
{ "header": "Actions", "accessorKey": "actions", "type": "action", "width": 80, "fixed": "right" }
42+
],
43+
"data": [
44+
{ "id": "1", "name": "Acme Corp", "status": "active", "email": "contact@acme.com", "amount": 5000, "createdAt": "2023-01-15" },
45+
{ "id": "2", "name": "Globex Inc", "status": "inactive", "email": "info@globex.com", "amount": 1200, "createdAt": "2023-02-10" },
46+
{ "id": "3", "name": "Soylent Corp", "status": "active", "email": "sales@soylent.com", "amount": 8500, "createdAt": "2023-03-05" },
47+
{ "id": "4", "name": "Initech", "status": "active", "email": "pr@initech.com", "amount": 3400, "createdAt": "2023-04-20" },
48+
{ "id": "5", "name": "Umbrella Corp", "status": "active", "email": "secure@umbrella.com", "amount": 9900, "createdAt": "2023-05-12" }
49+
],
50+
"pagination": true,
51+
"pageSize": 10,
52+
"selectable": true
4853
}
4954
]
5055
}

0 commit comments

Comments
 (0)