+ {/* Header: vaccine name (most prominent) + status badge */}
+
+
💉 {record.vaccine_name}
+
+
+ {isRevoked ? '✕ Revoked' : '✓ Active'}
-
- {record.dose_number != null && (
- = record.dose_series
- ? '#166534'
- : '#1e3a5f',
- color: record.dose_series != null && record.dose_number >= record.dose_series
- ? '#86efac'
- : '#93c5fd',
- whiteSpace: 'nowrap',
- }}
- >
- {record.dose_series != null
- ? `${record.dose_number}/${record.dose_series} doses`
- : `Dose ${record.dose_number}`}
-
- )}
-
- #{record.token_id}
-
-
-
-
- Date: {record.date_administered}
-
-
- Issuer:
-
- {record.issuer?.slice(0, 8)}…{record.issuer?.slice(-4)}
+
+ {/* Dose + token ID */}
+
+ {record.dose_number != null && (
+ = record.dose_series
+ ? '#166534'
+ : '#1e3a5f',
+ color: record.dose_series != null && record.dose_number >= record.dose_series
+ ? '#86efac'
+ : '#93c5fd',
+ whiteSpace: 'nowrap',
+ }}
+ >
+ {record.dose_series != null
+ ? `${record.dose_number}/${record.dose_series} doses`
+ : `Dose ${record.dose_number}`}
-
-
+ )}
+
+ #{record.token_id}
+
+
+
+
+ {/* Labelled meta fields */}
+
+ - Date
+ - {record.date_administered}
+
+ - Issuer
+ -
+
+
+ {record.issuer?.slice(0, 8)}…{record.issuer?.slice(-4)}
+
+
+
+
+