Primer commit — OPSV Dashboard de siniestralidad vial

2026-04-29 13:39:09 -03:00
commit ca7b159657
67 changed files with 12246 additions and 0 deletions
@@ -0,0 +1,46 @@
+export default function KPICard({
+  label,
+  value,
+  color,
+  unit,
+  variation,
+  centered = false,
+}) {
+  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 items-start justify-between gap-4 ${
+          centered ? 'flex-col items-center text-center' : ''
+        }`}
+      >
+        <div className={centered ? '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>
+  )
+}