b587ea7328
- Agrega SecMapa con visualización geográfica de siniestros - Actualiza exportación a PDF con nuevas secciones - Corrige colores de interfaz (modo claro/oscuro) - Corrige cálculo de víctimas fatales en SecSintesis usando campo 'fallecidos' - Corrige serie histórica para reflejar año filtrado correctamente
35 lines
1013 B
React
35 lines
1013 B
React
export default function KPICard({
|
|
label,
|
|
value,
|
|
color,
|
|
unit,
|
|
variation,
|
|
}) {
|
|
const formattedValue =
|
|
typeof value === 'number' ? value.toLocaleString('es-AR') : value
|
|
|
|
return (
|
|
<div className="rounded-[28px] border border-opsv-border bg-opsv-surface p-6 shadow-sm">
|
|
<div className="flex flex-col items-center text-center gap-4">
|
|
<div className="flex flex-col items-center">
|
|
<div
|
|
className="text-3xl font-black text-opsv-navy"
|
|
style={color ? { color } : undefined}
|
|
>
|
|
{formattedValue}
|
|
{unit ? (
|
|
<span className="text-base font-semibold text-opsv-muted"> {unit}</span>
|
|
) : null}
|
|
</div>
|
|
<p className="mt-3 text-sm text-opsv-muted">{label}</p>
|
|
</div>
|
|
|
|
{variation ? (
|
|
<div className="rounded-2xl bg-opsv-bg px-3 py-2 text-sm font-semibold text-opsv-text">
|
|
{variation}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |