Source: ExecutiveCockpitCard.jsx
import React from 'react';
export default function ExecutiveCockpitCard({
agentName = 'Alex // Vocal S2S',
status = 'OPERATIONAL',
ttfa = '142 ms',
activeCalls = 3,
resolvedHours = '42h / sem',
auditLock = 'MinIO WORM 90j'
}) {
return (
<div style={{
background: '#121214',
border: '1px solid #27272A',
borderRadius: '8px',
padding: '24px',
maxWidth: '440px',
color: '#F4F4F5',
fontFamily: 'Inter Tight, -apple-system, sans-serif'
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22C55E' }}></span>
<span style={{ fontSize: '13px', fontWeight: 600, color: '#FFFFFF' }}>{agentName}</span>
</div>
<span style={{ fontSize: '10px', background: '#27272A', color: '#22C55E', padding: '3px 8px', borderRadius: '4px', fontFamily: 'Geist Mono, monospace' }}>
{status}
</span>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '20px' }}>
<div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '12px', borderRadius: '6px' }}>
<div style={{ fontSize: '10px', color: '#A1A1AA', textTransform: 'uppercase', marginBottom: '4px' }}>Latence TTFA</div>
<div style={{ fontSize: '20px', fontWeight: 600, fontFamily: 'Geist Mono, monospace', color: '#FFFFFF' }}>{ttfa}</div>
</div>
<div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '12px', borderRadius: '6px' }}>
<div style={{ fontSize: '10px', color: '#A1A1AA', textTransform: 'uppercase', marginBottom: '4px' }}>Flux S2S Actifs</div>
<div style={{ fontSize: '20px', fontWeight: 600, fontFamily: 'Geist Mono, monospace', color: '#22C55E' }}>{activeCalls}</div>
</div>
</div>
<div style={{ borderTop: '1px solid #27272A', paddingTop: '14px', marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
<span style={{ fontSize: '12px', color: '#A1A1AA' }}>Charge liberee :</span>
<span style={{ fontSize: '12px', fontWeight: 600, fontFamily: 'Geist Mono, monospace', color: '#FFFFFF' }}>{resolvedHours}</span>
</div>
<div style={{ background: 'rgba(34, 197, 94, 0.05)', border: '1px solid rgba(34, 197, 94, 0.2)', padding: '8px 12px', borderRadius: '6px', fontSize: '10px', color: '#A1A1AA', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>REGISTRE AUDIT LÉGAL</span>
<strong style={{ color: '#22C55E', fontFamily: 'Geist Mono, monospace' }}>{auditLock}</strong>
</div>
</div>
);
}