# 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](https://nodejs.org)
- **npm** (se instala automáticamente junto con Node.js)

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

```bash
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:

```bash
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á:

```bash
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](https://supabase.com) → Settings → API.

### 4. Iniciar la aplicación

```bash
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*