kwikid-components-react
Version:
KwikID's Component Library in React
175 lines (174 loc) • 6.3 kB
JSON
{
"config": {
"layout": {
"id": "kyc-audit-checklist",
"styles": "width: 100%; font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12);",
"components": [
{
"id": "audit-header",
"type": "div",
"styles": "background-color: #1e293b; color: white; padding: 1.25rem;",
"components": [
{
"id": "audit-title",
"type": "h2",
"value": "KYC Audit Checklist",
"styles": "margin: 0; font-size: 1.25rem; font-weight: 600;"
}
]
},
{
"id": "customer-info",
"type": "div",
"styles": "background-color: #f8fafc; padding: 0.75rem 1.25rem; border-bottom: 1px solid #e2e8f0;",
"components": [
{
"id": "customer-name",
"type": "div",
"styles": "font-weight: 600;",
"components": [
{
"id": "name-label",
"type": "span",
"value": "Customer: ",
"styles": ""
},
{
"id": "name-value",
"type": "span",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.customerInfo.name"
}
}
},
"styles": ""
}
]
}
]
},
{
"id": "checklist-table-container",
"type": "div",
"styles": "padding: 1.25rem;",
"components": [
{
"id": "checklist-table",
"type": "table",
"styles": "width: 100%; border-collapse: collapse; border: 1px solid #e2e8f0;",
"components": [
{
"id": "checklist-header",
"type": "thead",
"styles": "",
"components": [
{
"id": "header-row",
"type": "tr",
"styles": "background-color: #f1f5f9;",
"components": [
{
"id": "header-step",
"type": "th",
"value": "Verification Step",
"styles": "padding: 0.75rem; text-align: left; border-bottom: 2px solid #e2e8f0; font-weight: 600;"
},
{
"id": "header-status",
"type": "th",
"value": "Status",
"styles": "padding: 0.75rem; text-align: center; border-bottom: 2px solid #e2e8f0; font-weight: 600; width: 120px;"
}
]
}
]
},
{
"id": "checklist-body",
"type": "tbody",
"styles": "",
"components": [
{
"id": "step-1",
"type": "tr",
"styles": "border-bottom: 1px solid #e2e8f0;",
"components": [
{
"id": "step-1-name",
"type": "td",
"styles": "padding: 0.75rem; color: #334155;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationSteps[0].name"
}
}
}
},
{
"id": "step-1-status",
"type": "td",
"styles": "padding: 0.75rem; text-align: center; color: #22c55e;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationSteps[0].status"
}
}
}
}
]
},
{
"id": "step-2",
"type": "tr",
"styles": "border-bottom: 1px solid #e2e8f0;",
"components": [
{
"id": "step-2-name",
"type": "td",
"styles": "padding: 0.75rem; color: #334155;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationSteps[1].name"
}
}
}
},
{
"id": "step-2-status",
"type": "td",
"styles": "padding: 0.75rem; text-align: center; color: #22c55e;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationSteps[1].status"
}
}
}
}
]
}
]
}
]
}
]
}
]
}
}
}