kwikid-components-react
Version:
KwikID's Component Library in React
199 lines (198 loc) • 6.98 kB
JSON
{
"config": {
"layout": {
"id": "kyc-report-container",
"styles": "width: 100%; font-family: system-ui, sans-serif; background-color: #f8fafc; border-radius: 0.5rem; border: 1px solid #e2e8f0;",
"components": [
{
"id": "kyc-header",
"type": "div",
"styles": "background-color: #1e293b; color: white; padding: 1rem;",
"components": [
{
"id": "kyc-title",
"type": "h2",
"value": "Video KYC Verification Report",
"styles": "margin: 0; font-size: 1.25rem; font-weight: 600;"
}
]
},
{
"id": "customer-info-section",
"type": "div",
"styles": "padding: 1rem; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;",
"components": [
{
"id": "section-title",
"type": "h3",
"value": "Customer Information",
"styles": "margin: 0 0 0.75rem 0; font-size: 1rem; color: #334155; font-weight: 600;"
},
{
"id": "customer-details",
"type": "div",
"styles": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
"components": [
{
"id": "detail-name",
"type": "div",
"styles": "",
"components": [
{
"id": "name-label",
"type": "div",
"value": "Full Name",
"styles": "font-size: 0.75rem; color: #64748b; margin-bottom: 0.25rem;"
},
{
"id": "name-value",
"type": "div",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.personalDetails.name"
}
}
},
"styles": "font-weight: 500; color: #334155;"
}
]
},
{
"id": "detail-phone",
"type": "div",
"styles": "",
"components": [
{
"id": "phone-label",
"type": "div",
"value": "Phone Number",
"styles": "font-size: 0.75rem; color: #64748b; margin-bottom: 0.25rem;"
},
{
"id": "phone-value",
"type": "div",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.personalDetails.phoneNumber"
}
}
},
"styles": "font-weight: 500; color: #334155;"
}
]
}
]
}
]
},
{
"id": "verification-summary",
"type": "div",
"styles": "padding: 1rem;",
"components": [
{
"id": "summary-title",
"type": "h3",
"value": "Verification Summary",
"styles": "margin: 0 0 0.75rem 0; font-size: 1rem; color: #334155; font-weight: 600;"
},
{
"id": "summary-status",
"type": "div",
"styles": "display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;",
"components": [
{
"id": "status-label",
"type": "div",
"value": "Overall Status:",
"styles": "font-weight: 500;"
},
{
"id": "status-value",
"type": "div",
"styles": "padding: 0.25rem 0.5rem; background-color: #15803d; color: white; border-radius: 0.25rem; font-size: 0.875rem;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationSummary.overallStatus"
}
}
}
}
]
},
{
"id": "verification-checks",
"type": "div",
"styles": "border: 1px solid #e2e8f0; border-radius: 0.25rem;",
"components": [
{
"id": "check-aadhaar",
"type": "div",
"styles": "padding: 0.75rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between;",
"components": [
{
"id": "aadhaar-label",
"type": "div",
"value": "Aadhaar Verification",
"styles": ""
},
{
"id": "aadhaar-status",
"type": "div",
"styles": "color: #15803d;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationStatus.aadhaarVerified"
}
}
}
}
]
},
{
"id": "check-pan",
"type": "div",
"styles": "padding: 0.75rem; display: flex; justify-content: space-between;",
"components": [
{
"id": "pan-label",
"type": "div",
"value": "PAN Verification",
"styles": ""
},
{
"id": "pan-status",
"type": "div",
"styles": "color: #15803d;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationStatus.panVerified"
}
}
}
}
]
}
]
}
]
}
]
}
}
}