61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import type { SidChain } from '../../../src/types';
|
|
|
|
export interface SidChainTrackerProps {
|
|
sidChain: SidChain;
|
|
}
|
|
|
|
const sidFields = [
|
|
{ key: 'customerProfileSid', label: 'Customer Profile', icon: '👤' },
|
|
{ key: 'businessEndUserSid', label: 'Business End User', icon: '🏢' },
|
|
{ key: 'authorizedRepEndUserSid', label: 'Authorized Rep', icon: '👔' },
|
|
{ key: 'addressSid', label: 'Address', icon: '📍' },
|
|
{ key: 'supportingDocSid', label: 'Supporting Doc', icon: '📄' },
|
|
{ key: 'trustProductSid', label: 'Trust Product', icon: '🛡️' },
|
|
{ key: 'a2pProfileEndUserSid', label: 'A2P Profile', icon: '📱' },
|
|
{ key: 'brandRegistrationSid', label: 'Brand Registration', icon: '🏷️' },
|
|
{ key: 'messagingServiceSid', label: 'Messaging Service', icon: '💬' },
|
|
{ key: 'campaignSid', label: 'Campaign', icon: '📢' }
|
|
];
|
|
|
|
export const SidChainTracker: React.FC<SidChainTrackerProps> = ({ sidChain }) => {
|
|
return (
|
|
<div className="space-y-3">
|
|
{sidFields.map((field) => {
|
|
const value = sidChain[field.key as keyof SidChain];
|
|
const hasValue = !!value;
|
|
|
|
return (
|
|
<div
|
|
key={field.key}
|
|
className={`flex items-center justify-between p-3 rounded-lg border ${
|
|
hasValue
|
|
? 'border-green-200 bg-green-50'
|
|
: 'border-gray-200 bg-gray-50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-2xl">{field.icon}</span>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">{field.label}</p>
|
|
{hasValue ? (
|
|
<code className="text-xs text-gray-600 font-mono">{value}</code>
|
|
) : (
|
|
<p className="text-xs text-gray-500">Not created yet</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{hasValue ? (
|
|
<span className="text-green-600">✓</span>
|
|
) : (
|
|
<span className="text-gray-400">○</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|