OPSV — Dashboard de Siniestralidad Vial

Plataforma interactiva de análisis y visualización de datos de siniestros viales de la provincia de Santa Cruz.

Desarrollado por el Observatorio Provincial de Seguridad Vial (OPSV),
dependiente de la Agencia Provincial de Seguridad Vial,
Ministerio de Seguridad de la Provincia de Santa Cruz.

---

¿Qué es este proyecto?

El OPSV Dashboard es una aplicación web que permite visualizar, analizar y exportar datos de siniestros viales registrados en la provincia. Incluye filtros por período, campañas de seguridad vial (como Verano Vivo ), desglose por rutas, localidades, tipo de siniestro y severidad (fatal, con lesiones, sin lesiones).

La aplicación se conecta a una base de datos en la nube (Supabase) para obtener los datos en tiempo real y permite generar reportes en PDF desde el propio navegador.

---

Tecnologías utilizadas

Tecnología	¿Para qué se usa?
React	Construye la interfaz visual (pantallas, gráficos, botones)
Vite	Motor que arranca la aplicación en la computadora para desarrollar
Tailwind CSS	Sistema de estilos visuales (colores, espaciado, tipografía)
Supabase	Base de datos en la nube, tres bases de datos (siniestros, Involucrados, Personas. Con KeyID para vincularlas ) Motor de base de datos PostgreSQL
Recharts	Librería para dibujar los gráficos (líneas, barras, donuts)
React Router	Maneja la navegación entre secciones del dashboard
jsPDF + html2canvas	Genera y descarga reportes en formato PDF
Lucide React	Íconos de la interfaz

---

Estructura del proyecto

opsv-dashboard/
├── src/                        ← Todo el código fuente de la aplicación
│   ├── components/             ← Componentes visuales reutilizables (tarjetas, botones, etc.)
│   ├── sections/               ← Secciones del dashboard 
│   ├── utils/                  ← Funciones de cálculo y datos históricos
│   └── main.jsx                ← Punto de entrada de la aplicación
├── dist/                       ← Versión compilada lista para publicar en internet
├── .env.local                  ← Variables de entorno secretas (No subir a Github) 
├── index.html                  ← Página principal de la aplicación
├── package.json                ← Lista de dependencias y comandos del proyecto
├── vite.config.js              ← Configuración del motor de desarrollo
└── tailwind.config.js          ← Configuración del sistema de estilos

---

Requisitos previos

Antes de poder ejecutar el proyecto en entorno local se necesita:

• Node.js (versión 18 o superior) → Descargar en nodejs.org
• npm (se instala automáticamente junto con Node.js)

Para verificar que están instalados, abrí una terminal y ejecutá:

node --version
npm --version

Ambos comandos deben mostrar un número de versión.

---

Instalación paso a paso

1. Clonar o copiar el proyecto

Si usás Git:

git clone <url-del-repositorio>
cd opsv-dashboard

Si no usás Git, simplemente copiá la carpeta del proyecto a tu computadora.

2. Instalar las dependencias

Abrí una terminal dentro de la carpeta del proyecto y ejecutá:

npm install

Esto descarga todas las herramientas necesarias (React, Recharts, etc.) dentro de la carpeta node_modules. Puede tardar unos minutos la primera vez.

3. Configurar las variables de entorno

Creá un archivo llamado .env.local en la raíz del proyecto (si no existe ya) con el siguiente contenido:

VITE_SUPABASE_URL=https://tu-proyecto.supabase.co
VITE_SUPABASE_ANON_KEY=tu-clave-publica-aqui

Estos valores los encontrás en el panel de tu proyecto en supabase.com → Settings → API.

4. Iniciar la aplicación

npm run dev

Luego abrí el navegador y entrá a: http://localhost:5173

---

Comandos disponibles

Comando	¿Qué hace?
npm run dev	Inicia el servidor de desarrollo local (para trabajar y probar cambios)
npm run build	Compila la aplicación para producción (genera la carpeta dist/)
npm run preview	Previsualiza la versión compilada antes de publicarla

---

Despliegue (publicar en internet)

Para publicar la aplicación en un servidor:

1. Ejecutá npm run build. Esto genera la carpeta dist/ con todos los archivos listos.
2. Subí el contenido de la carpeta dist/ al servidor web o servicio de hosting (Netlify, Vercel, servidor propio, etc.).

Importante: Las variables de entorno del archivo .env.local deben configurarse también en el entorno de producción. Nunca subas el archivo .env.local a un repositorio público.

---

Seguridad

• El archivo .env.local contiene claves de acceso a la base de datos. Está incluido en .gitignore para que nunca se suba accidentalmente a GitHub u otro repositorio.
• La aplicación utiliza la clave pública (anon key) de Supabase, cuyo acceso está limitado por las políticas de seguridad (Row Level Security) configuradas en la base de datos.

---

Contacto y mantenimiento

Observatorio Provincial de Seguridad Vial (OPSV)
Agencia Provincial de Seguridad Vial
Ministerio de Seguridad — Provincia de Santa Cruz

---

Última actualización: abril 2026