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,151 @@
+# 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*