152 lines
5.4 KiB
Markdown
152 lines
5.4 KiB
Markdown
# 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*
|