Skip to content
BranchesTags

Repository files navigation

SR Manager 🛡️

Comprehensive role-based document management system for safety and prevention companies

Plataforma integral para la gestión de documentación de prevención de riesgos laborales en Chile

Platform for occupational risk management and documentation in Chile. Companies can manage workers, upload documents, and admins can review and approve with role-based workflows. Built with React 18, TypeScript, Cloudflare Workers, D1, and R2.

Status TypeScript React Cloudflare Version

🌐 Production Environment

✨ Características Principales

🎨 Dashboard Profesional

  • Diseño moderno con fuente Inter (Google Fonts)
  • Sistema de estadísticas visuales con 4 métricas clave
  • Información educativa sobre prevención de riesgos
  • Proceso explicado en 5 pasos claros
  • 6 servicios principales destacados
  • Componentes UI reutilizables (InfoCard, ProcessSteps, StatCard)

🔒 Autenticación y Seguridad

  • Sistema de registro con validación avanzada de contraseñas

    • Requisitos: mínimo 8 caracteres, mayúsculas, minúsculas, números, caracteres especiales
    • Indicador visual de fortaleza de contraseña en tiempo real
    • Confirmación de contraseña con feedback instantáneo

  • Hashing Seguro PBKDF2: 100,000 iteraciones con sal aleatoria

  • Rate Limiting Avanzado:

    • Registro: 5 intentos por hora por IP
    • Login: 5 intentos por 15 minutos por IP+email, bloqueo de 30 minutos

  • Sanitización de Entradas: Validación y limpieza de todos los inputs

  • Protección contra Timing Attacks: Comparación constante de contraseñas

  • JWT tokens con Jose library

  • Auditoría de Seguridad: Logging detallado de eventos de autenticación

📋 Servicios de Prevención de Riesgos

  • RIOHS - Reglamento Interno (Código del Trabajo Art. 153)
  • Planes de Emergencia - DS 594 y Ley 16.744
  • Vigilancia Epidemiológica - Ruido, sílice, químicos, ergonómicos
  • Matriz IPER - Identificación de Peligros y Evaluación de Riesgos
  • Protocolos MINSAL - TMERT, PREXOR, PLANESI, manejo de cargas
  • Asesoría SEREMI - Fiscalizaciones y sumarios

🚀 Deployment Automatizado

  • Un solo comando: pnpm run deploy
  • Validación automática (TypeScript + ESLint)
  • Build de Worker y Frontend
  • Deploy a Workers y Pages
  • Verificación de health checks
  • Resumen detallado con URLs

🏗️ Tech Stack

Frontend

  • React 18 + TypeScript 5.3
  • Vite - Build tool ultra-rápido
  • Tailwind CSS - Utility-first CSS
  • Lucide React - Iconos modernos
  • React Router - Navegación SPA
  • Inter Font - Tipografía profesional de Google Fonts

Backend

  • Cloudflare Workers - Edge computing serverless
  • Hono - Framework web ultra-ligero para Workers
  • TypeScript - Type safety
  • Jose - JWT tokens
  • PBKDF2 - Advanced password hashing (100k iterations)
  • Rate Limiting - In-memory protection against abuse

Base de Datos y Storage

  • Cloudflare D1 - SQLite distribuido globalmente
  • Cloudflare R2 - Object storage (compatible S3)
  • 7 tablas: users, jobs, files, quotes, signatures, audit_logs

DevOps

  • Wrangler 4.42.2 - CLI de Cloudflare
  • pnpm - Package manager rápido
  • ESLint - Code quality
  • Git - Version control

📁 Estructura del Proyecto

sr-manager-app/
├── web/                           # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   └── ui/               # Componentes reutilizables
│   │   │       ├── InfoCard.tsx
│   │   │       ├── ProcessSteps.tsx
│   │   │       ├── StatCard.tsx
│   │   │       ├── PasswordStrength.tsx
│   │   │       └── ...
│   │   ├── pages/
│   │   │   ├── Dashboard/
│   │   │   │   └── DashboardUsuario.tsx
│   │   │   └── Auth/
│   │   │       ├── Login.tsx
│   │   │       └── Registro.tsx
│   │   ├── hooks/                # Custom React hooks
│   │   ├── api/                  # HTTP client
│   │   └── config.ts             # Environment config
│   ├── index.html                # Inter font from Google
│   └── tailwind.config.js        # Inter configured
├── worker/                        # Cloudflare Worker API
│   └── src/
│       ├── index.ts              # Hono app entry
│       ├── routes/               # API routes
│       └── lib/                  # JWT, DB helpers
├── infra/
│   └── d1/
│       └── migrations/           # 7 SQL migrations
├── scripts/
│   └── deploy.mjs                # Automated deployment
├── DEPLOYMENT.md                 # Deployment guide
├── wrangler.toml                 # Cloudflare config
└── package.json                  # Workspace scripts

🚀 Quick Start

Prerequisites

  • Node.js v18+ (recomendado v20+)
  • pnpm v8+
  • Wrangler CLI v4+
  • Cuenta de Cloudflare con Workers, D1 y R2 habilitados

Instalación

# Clonar repositorio
git clone https://github.com/electrocicla/docs-manager-app.git
cd docs-manager-app

# Instalar dependencias
pnpm install

# Configurar Python environment (si es necesario)
pnpm run configure:python

💻 Desarrollo Local

Iniciar Ambos Servidores

# Frontend + Worker concurrentemente
pnpm run dev

Iniciar Individualmente

# Solo frontend (http://localhost:3000)
pnpm run dev:web

# Solo worker (http://localhost:8787)
pnpm run dev:worker

🗄️ Configuración de Base de Datos

Crear Base de Datos D1

# Crear base de datos
wrangler d1 create sr-prevencion-db

# Copiar el database_id al wrangler.toml

Ejecutar Migraciones

# Migraciones locales
pnpm run db:migrate:local

# Migraciones remotas (producción)
pnpm run db:migrate:remote

Estructura de Tablas

  • users - Usuarios del sistema (clientes, profesionales, admin)
  • jobs - Solicitudes de trabajo/documentos
  • files - Metadatos de archivos (apuntan a R2)
  • quotes - Cotizaciones de profesionales
  • signatures - Registros de firmas digitales
  • audit_logs - Registro de auditoría
  • Seed data con usuario admin

📦 Configuración de Storage R2

# Crear bucket
pnpm run r2:create

# O manualmente
wrangler r2 bucket create sr-prevencion-files

✅ Testing y Validación

Validación de Código

# TypeScript type checking
pnpm run typecheck

# ESLint (frontend)
pnpm run lint

# Ambos
pnpm run typecheck && pnpm run lint

Build

# Build completo (frontend + worker)
pnpm run build

# Build individual
pnpm run build:web
pnpm run build:worker

🚀 Deployment

Deploy Completo (Recomendado)

# Un solo comando despliega todo:
# 1. Valida TypeScript
# 2. Valida ESLint
# 3. Build Worker y Frontend
# 4. Deploy Worker a Cloudflare
# 5. Deploy Pages a Cloudflare
# 6. Verifica health checks
# 7. Muestra resumen con URLs

pnpm run deploy

Deploy Individual

# Solo Worker
pnpm run deploy:worker

# Solo Pages
pnpm run deploy:pages

# Ambiente de producción
pnpm run deploy:production

Verificar Deployment

# Health check del Worker
curl https://sr-prevencion.electrocicla.workers.dev/health

# Ver logs en tiempo real
npx wrangler tail

Para más detalles, consulta DEPLOYMENT.md.

⚙️ Variables de Entorno

Desarrollo Local

Crea .dev.vars en la raíz para desarrollo local:

JWT_SECRET=tu-clave-secreta-muy-larga-y-segura
CLOUDFLARE_ACCOUNT_ID=tu-account-id

Producción

Configura secrets en Cloudflare:

# Agregar secret
npx wrangler secret put JWT_SECRET

# Listar secrets
npx wrangler secret list

Variables en wrangler.toml

[vars]
ENVIRONMENT = "development"

[env.production.vars]
ENVIRONMENT = "production"

🔐 Autenticación

Clientes

  • Registro con email/password
  • Validación de contraseña:
    • Mínimo 8 caracteres
    • Al menos 1 mayúscula
    • Al menos 1 minúscula
    • Al menos 1 número
    • Al menos 1 carácter especial
  • Indicador visual de fortaleza
  • JWT tokens con expiración

Profesionales/Admin

  • Cloudflare Access con Zero Trust
  • Validación de roles en backend
  • Permisos granulares

🎨 Componentes UI

Nuevos Componentes

// Tarjetas informativas
<InfoCard 
  icon={<Shield />}
  title="Título"
  description="Descripción..."
/>

// Proceso paso a paso
<ProcessSteps 
  steps={[
    { number: 1, title: "Paso 1", description: "..." }
  ]}
/>

// Estadísticas
<StatCard 
  title="Total"
  value={42}
  icon={FileText}
  color="blue"
/>

// Validación de contraseña
<PasswordStrength password={password} />

📋 Features

✅ Implementado (Producción)

Autenticación y Usuarios

  • ✅ Registro de usuarios con validación avanzada
  • ✅ Indicador de fortaleza de contraseña en tiempo real
  • ✅ Login con JWT tokens
  • ✅ Confirmación de contraseña con feedback visual
  • ✅ Gestión de sesiones
  • ✅ Cierre de sesión seguro

Dashboard Profesional

  • ✅ Diseño moderno con fuente Inter
  • ✅ Estadísticas visuales (4 métricas clave)
  • ✅ Sección informativa colapsable
  • ✅ Información educativa sobre prevención de riesgos
  • ✅ Proceso explicado en 5 pasos
  • ✅ 6 servicios principales destacados
  • ✅ CTA persuasivo

Gestión de Trabajos

  • ✅ Creación de trabajos/solicitudes
  • ✅ Listado de trabajos con estados
  • ✅ Vista de detalles de trabajo
  • ✅ Estados: POR_REVISAR, REVISION_EN_PROGRESO, COTIZACION, TRABAJO_EN_PROGRESO, FINALIZADO

Gestión de Documentos

  • ✅ Sistema completo de gestión documental para trabajadores
  • ✅ 5 tipos de documentos requeridos por legislación chilena:
    • Cédula de Identidad
    • Contrato de Trabajo
    • Información Riesgos Laborales DS 44
    • Registro Entrega de RIOHS
    • Registro Entrega de EPP
  • ✅ Upload multipart con validación de archivos (PDF, imágenes)
  • ✅ Almacenamiento seguro en Cloudflare R2
  • ✅ Estados automáticos de documentos:
    • Faltante (no subido)
    • En espera de revisión (recién subido)
    • En revisión (admin revisando)
    • Aprobado/Vigente
    • Rechazado
    • Vencido/Obsoleto
  • ✅ Descarga segura con URLs firmadas temporales
  • ✅ Eliminación de documentos por usuarios propietarios
  • ✅ Control administrativo completo de estados
  • ✅ Dashboard visual con progreso de completitud
  • ✅ Fechas de emisión y vencimiento con alertas
  • ✅ Workflow completo: Upload → Revisión → Aprobación/Rechazo
  • ✅ Permisos granulares: Usuarios eliminan propios, Admins controlan todo

Gestión de Documentos

  • ✅ Sistema completo de gestión documental
  • ✅ 5 tipos de documentos requeridos por ley chilena
  • ✅ Upload directo a R2 con validación de tipos MIME
  • ✅ Estados automáticos: Faltante → En espera de revisión → En revisión → Aprobado/Rechazado
  • ✅ Descarga segura con URLs firmadas
  • ✅ Eliminación de documentos por usuarios
  • ✅ Control administrativo de estados
  • ✅ Dashboard visual con indicadores de completitud

DevOps

  • ✅ Script de deploy automatizado
  • ✅ Validación TypeScript automática
  • ✅ Validación ESLint automática
  • ✅ Build optimizado
  • ✅ Documentación completa (DEPLOYMENT.md)

🔄 En Desarrollo

  • 🔄 Sistema de cotizaciones por profesionales
  • 🔄 Aceptación de cotizaciones
  • 🔄 Workflow completo de estados
  • 🔄 Dashboard de profesional
  • 🔄 Dashboard de admin
  • 🔄 Firma digital de documentos
  • 🔄 Sistema de notificaciones

🎯 Roadmap Futuro

  • 📱 Aplicación móvil (React Native)
  • 🔔 Notificaciones push y email
  • 💳 Integración con sistemas de pago chilenos (WebPay, Mercado Pago)
  • ✍️ Integración con proveedores de firma electrónica chilenos
  • 📊 Analytics y reportes avanzados
  • 🔄 Versionado de documentos
  • 📝 Audit trail completo
  • 🌍 Soporte multiidioma
  • 📧 Templates de correos personalizables
  • 🤖 Automatización de flujos con IA

📚 Documentación Adicional

Endpoints Principales

GET  /health                    # Health check
POST /api/auth/signup           # Registro
POST /api/auth/login            # Login
GET  /api/jobs                  # Listar trabajos
POST /api/jobs                  # Crear trabajo
GET  /api/jobs/:id              # Detalles de trabajo

# Gestión de Documentos
GET  /api/documents/types       # Tipos de documentos requeridos
GET  /api/documents/worker/:id  # Documentos de un trabajador
POST /api/documents/upload      # Subir documento (multipart)
GET  /api/documents/download/:id # Descargar documento (URL firmada)
DELETE /api/documents/:id       # Eliminar documento
PUT  /api/documents/:id         # Actualizar estado (solo admin)
GET  /api/documents/pending     # Documentos pendientes (solo admin)

# Gestión de Empresas y Trabajadores
GET  /api/companies             # Listar empresas
POST /api/companies             # Crear empresa
GET  /api/workers               # Listar trabajadores
POST /api/workers               # Crear trabajador

📄 Workflow de Gestión Documental

Proceso Completo

  1. Registro de Empresa y Trabajadores

    • Empresa crea cuenta y registra trabajadores
    • Sistema valida RUT y datos chilenos

  2. Upload de Documentos

    • Trabajador accede a su perfil
    • Ve 5 documentos requeridos con estados visuales
    • Sube documentos con drag & drop o selección de archivos
    • Validación automática de tipos MIME y tamaño

  3. Revisión Automática

    • Documento pasa automáticamente a "En espera de revisión"
    • Admin recibe notificación de documentos pendientes
    • Admin puede descargar y revisar documentos

  4. Aprobación/Rechazo

    • Admin cambia estado: Aprobado, Rechazado, o solicita corrección
    • Comentarios opcionales para rechazos
    • Historial de cambios auditado

  5. Gestión Continua

    • Alertas de vencimiento automático
    • Re-upload de documentos expirados
    • Descarga de documentos por usuarios autorizados

Estados de Documentos

  • 🔴 Faltante: Documento no subido
  • 🟠 En espera de revisión: Recién subido, pendiente de revisión
  • 🟡 En revisión: Admin está revisando
  • 🟢 Aprobado/Vigente: Documento aprobado y válido
  • 🔴 Rechazado: Documento rechazado (con comentarios)
  • ⚫ Vencido/Obsoleto: Documento expirado

Seguridad Documental

  • ✅ Upload directo a R2 (no pasa por servidor)
  • ✅ URLs firmadas temporales para descarga
  • ✅ Validación de permisos por empresa/trabajador
  • ✅ Audit trail de todas las acciones
  • ✅ Encriptación en tránsito y reposo

🔒 Seguridad

Implementado

  • ✅ JWT validation en todos los endpoints
  • ✅ Bcrypt para hash de contraseñas
  • ✅ Validación de fortaleza de contraseña (8+ caracteres)
  • ✅ CORS configurado
  • ✅ Sanitización de inputs
  • ✅ Rate limiting en edge (Cloudflare)
  • ✅ HTTPS obligatorio en producción
  • ✅ Secrets management con Wrangler

Best Practices

  • Límites de tamaño de archivo (200MB max)
  • Validación de MIME types
  • Sanitización de nombres de archivo
  • Tokens con expiración
  • No guardar contraseñas en texto plano
  • Audit logs de acciones críticas

🛠️ Troubleshooting

Error: "Not authenticated"

npx wrangler login

Error: "Database not found"

Verificar database_id en wrangler.toml:

npx wrangler d1 list

Error: "R2 bucket not found"

pnpm run r2:create

Error en Build

rm -rf node_modules web/node_modules worker/node_modules
rm -rf web/dist worker/dist
pnpm install
pnpm run build

Ver Logs

# Logs en tiempo real
npx wrangler tail

# Logs en dashboard
# https://dash.cloudflare.com → Workers → sr-prevencion → Logs

📊 Estado del Proyecto

📋 Changelog Reciente

[1.1.0] - October 28, 2025 - Security & Photo Upload Enhancement

🚀 New Features

  • Photo Upload System: Complete worker profile photo functionality
    • Server-side photo uploads to R2 storage
    • Secure file serving through worker endpoints
    • Profile image display in worker cards and profiles
    • Image validation and error handling

🔒 Security Enhancements

  • Advanced Password Security: Upgraded from SHA-256 to PBKDF2

    • PBKDF2 with 100,000 iterations for enhanced security
    • Constant-time password comparison to prevent timing attacks
    • Secure salt generation using Web Crypto API

  • Rate Limiting Implementation: Comprehensive protection against abuse

    • Registration: 5 attempts per hour per IP
    • Login: 5 attempts per 15 minutes per IP+email with 30-minute lockout
    • Account lockout with clear messaging and recovery time display

  • Input Sanitization: Enhanced security across all endpoints

    • Email normalization and validation
    • Full name sanitization and length validation
    • Password strength requirements (8+ chars, uppercase, lowercase, numbers, symbols)
    • SQL injection prevention with parameterized queries

🐛 Bug Fixes

  • Account Creation Workflow: Fixed registration failures

    • Implemented proper password hashing
    • Added duplicate email detection with clear error messages
    • Enhanced validation feedback

  • Document Status Workflow: Corrected approval processes

    • Fixed UNDER_REVIEW status handling
    • Improved profile completeness calculations
    • Enhanced document download URLs

  • File Upload Issues: Resolved photo upload problems

    • Replaced signed URL approach with server-side uploads
    • Fixed image loading and display issues
    • Added comprehensive error logging

📈 Performance Improvements

🔧 Technical Updates

  • Crypto Module: Complete rewrite with PBKDF2 implementation
  • Authentication Routes: Enhanced with rate limiting and sanitization
  • Frontend Validation: Strengthened password requirements
  • Database Operations: Improved error handling and logging

📊 Security Audit Results

  • ✅ PBKDF2 password hashing implemented
  • ✅ Rate limiting for all auth endpoints
  • ✅ Input sanitization across all forms
  • ✅ Enhanced audit logging with metadata
  • ✅ Timing attack protection
  • ✅ Account lockout mechanisms

[1.0.0] - October 23, 2025 - Production Release

  • Complete role-based document management system
  • Company and worker CRUD operations
  • Admin document review and approval workflows
  • R2 cloud storage integration
  • JWT authentication with bcrypt
  • TypeScript strict mode implementation

🤝 Contribución

  1. Fork el repositorio
  2. Crea una rama feature (git checkout -b feature/amazing-feature)
  3. Commit tus cambios (git commit -m 'feat: Add amazing feature')
  4. Push a la rama (git push origin feature/amazing-feature)
  5. Abre un Pull Request

Convenciones de Commits

Usamos Conventional Commits:

  • feat: - Nueva funcionalidad
  • fix: - Corrección de bug
  • docs: - Cambios en documentación
  • style: - Cambios de formato (no afectan código)
  • refactor: - Refactorización de código
  • test: - Agregar o modificar tests
  • chore: - Tareas de mantenimiento

📞 Soporte

📄 Licencia

Proprietary - Todos los derechos reservados © 2025 Electrocicla

Desarrollado con ❤️ por Electrocicla para mejorar la prevención de riesgos laborales en Chile 🇨🇱

About

Web platform for occupational risk management and documentation in Chile. Companies can upload files, receive professional review, quotes, and finalized signed reports by certified safety engineers. Built with React, TypeScript, Cloudflare Workers, D1, and R2.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages