Develop

.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(/C:\\Users\\alejandro.minguez\\Documents\\webDev\\GitHub\\admin-one-vue-tailwind\\src\\stores/**)"
+    ]
+  },
+  "enabledMcpjsonServers": [
+    "supabase"
+  ],
+  "outputStyle": "Explanatory",
+  "enableAllProjectMcpServers": true
+}

.gitignore

@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+.codegpt

.htaccess

@@ -0,0 +1,16 @@
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    RewriteBase /sinaq/
+    RewriteRule ^index\.html$ - [L]
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteRule . /sinaq/index.html [L]
+  </IfModule>
+
+  # Permitir CORS y Headers necesarios
+  <IfModule mod_headers.c>
+    Header set Access-Control-Allow-Origin "*"
+    Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
+    Header set Access-Control-Allow-Headers "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization"
+    Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' https://login.microsoftonline.com https://*.microsoft.com data: ws:;"
+  </IfModule>

.htaccess_bak

@@ -0,0 +1,15 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /sinaq/
+
+  # Proxy para manejar CORS
+  <!-- RewriteRule ^api/lecturas/(.*)$ http://localhost:3000/api/lecturas/$1 [P,L] -->
+  <!-- RewriteRule ^api/(.*)$ https://app.chj.es/ContadoresWebApiTest/api/$1 [P,L] -->
+</IfModule>
+
+# Habilitar CORS
+<IfModule mod_headers.c>
+  Header set Access-Control-Allow-Origin "*"
+  Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE,PATCH,OPTIONS"
+  Header set Access-Control-Allow-Headers "Content-Type, Authorization"
+</IfModule>

CLAUDE.md

@@ -0,0 +1,102 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- **Start development server**: `npm run dev` (Vite development server)
+- **Build for production**: `npm run build` (Vite build)
+- **Preview production build**: `npm run preview --port 4173`
+- **Lint code**: `npm run lint` (ESLint with auto-fix)
+- **Format code**: `npm run format` (Prettier)
+
+## Project Architecture
+
+This is a Vue 3 admin dashboard application built with:
+
+- **Vue 3** with Composition API and `<script setup>` syntax
+- **Vite** as build tool with custom base path `/sinaq/`
+- **Tailwind CSS 3** for styling with custom scrollbar utilities
+- **Vue Router 4** with hash-based routing and authentication guards
+- **Pinia** for state management
+- **PrimeVue 4** UI component library with custom theming
+- **FormKit** for form handling
+- **Vueform** for advanced form components
+
+### Key Dependencies
+
+- **@azure/msal-browser**: Microsoft authentication (MSAL)
+- **@supabase/supabase-js**: Database integration
+- **axios**: HTTP client
+- **chart.js**: Data visualization
+- **leaflet + @vue-leaflet/vue-leaflet**: Interactive maps
+- **jspdf + jspdf-autotable**: PDF generation
+- **xlsx**: Excel file handling
+- **date-fns**: Date manipulation
+
+### Application Structure
+
+#### Authentication & Routing
+- **Authentication flow**: Microsoft Azure AD via MSAL (`src/services/msalConfig.js`)
+- **Session management**: 30-minute timeout with auto-logout in `src/stores/login.js`
+- **Route guards** in `src/router/index.js`:
+  - Routes with `meta.requiresAuth: true` require authentication
+  - Routes with `meta.requiredRole: 'admin'` require admin privileges (role '99', 99, or 'admin')
+  - Session expiry checked on each navigation with `checkSessionExpiry()`
+  - Session renewed on each authenticated route navigation via `renewSession()`
+- **User state persistence**: sessionStorage for user data, avatar, role, and session timestamps
+- **Router mode**: Hash-based routing (`createWebHashHistory`)
+- **Unauthenticated users** redirected to `/login`
+- **Unauthorized users** redirected to `/unauthorized`
+
+#### Main Application Areas
+- **Home** (`/`): Excel uploader and analytics (`ExcelUploaderView.vue`)
+- **Admin Panel** (`/admin/*`): CRUD operations requiring admin role
+  - `/admin/operarios`: Operators management
+  - `/admin/unidades_operativas`: Operational units management
+  - `/admin/zonas`: Zones management
+  - `/admin/infraestructuras`: Infrastructure management
+  - `/admin/puntos_muestreo`: Sampling points management
+- **Map Visualization** (`/mapa`): Interactive map of sampling points using Leaflet
+- **Analytics Table** (`/tablaAnaliticas`): Table view of analytics data
+- **Settings** (`/settings`): Configuration panel (admin only)
+
+#### Service Layer Architecture
+Services in `src/services/` handle data operations:
+- **Authentication**: `msalConfig.js` (Microsoft authentication integration)
+- **Database**: `supabase.js` (Supabase client configuration)
+- **Domain Services**: Separate files for each entity (operarios, uo, zonas, infraestructuras, puntosMuestreo, analiticas)
+- **External APIs**: `factorialConfig.js` (Factorial HR integration)
+
+#### Store Management (Pinia)
+- **main.js**: Sample data and general app state
+- **login.js**: Authentication state with session timeout management
+  - Watchers persist state to sessionStorage
+  - Session timeout clears after 30 minutes of inactivity
+  - Provides `login()`, `logout()`, `renewSession()`, `checkSessionExpiry()`
+- **auth.js**: Additional auth utilities
+- **plantas.js**: Plant/facility data
+- **darkMode.js**: Theme switching
+
+### Code Style & Standards
+
+- **ESLint**: Vue 3 recommended + eslint:recommended rules
+- **Prettier**: 2 spaces, single quotes, no semicolons, 100 char width, no trailing commas
+- **Components**: Use Composition API with `<script setup>` syntax
+- **Path alias**: `@/` points to `src/` directory
+- **ECMAScript**: Target ES2022 (top-level await supported)
+
+### Custom Styling
+
+- **Tailwind extended** with custom scrollbar utilities (`aside-scrollbars` with light/gray variants)
+- **PrimeVue theming**: Disabled in favor of Tailwind classes (`theme: 'none'`)
+- **Custom animations**: fade-in/fade-out keyframes and transitions
+- **Dark mode**: Supported via CSS classes (`darkMode: 'class'` in Tailwind config)
+- **Responsive layout**: Mobile-first design with collapsable sidebar
+
+### Build Configuration
+
+- **Vite target**: ES2022 for top-level await support
+- **Base path**: `/sinaq/` for deployment
+- **Vue options**: Production hydration mismatch details disabled
+- **Asset handling**: Static assets served from `/sinaq/` base path

GEMINI.md

@@ -0,0 +1,73 @@
+# Project Overview
+
+This is a Vue.js 3 admin dashboard project built with Tailwind CSS 3 and Vite. It uses Pinia for state management and Vue Router for routing. The project uses MSAL for Microsoft authentication. It is a customizable and responsive admin template with a dark mode feature.
+
+## Building and Running
+
+### Installation
+To install the project dependencies, run:
+```bash
+npm install
+```
+
+### Development
+To run the project in development mode with hot-reloading, use:
+```bash
+npm run dev
+```
+
+### Production Build
+To build the project for production, run:
+```bash
+npm run build
+```
+
+### Preview
+To preview the production build, use:
+```bash
+npm run preview
+```
+
+### Linting
+To lint the project files, run:
+```bash
+npm run lint
+```
+
+## Development Conventions
+
+- **Framework:** Vue.js 3 with Composition API and `<script setup>` syntax.
+- **State Management:** Pinia is used for state management.
+- **Routing:** Vue Router is used for routing.
+- **Authentication:** MSAL (Microsoft Authentication Library) is used for Microsoft authentication.
+- **Styling:** Tailwind CSS is used for styling.
+- **Build Tool:** Vite is used as the build tool.
+- **Linting:** ESLint is used for linting.
+- **Formatting:** Prettier is used for code formatting.
+
+## Project Structure
+
+The `src` directory contains the main source code of the application.
+
+- **`assets`:** Contains static assets like images and CSS files.
+- **`components`:** Contains reusable Vue components.
+- **`composables`:** Contains composable functions for reusing logic across components.
+- **`constants`:** Contains constant values used throughout the application.
+- **`css`:** Contains the main CSS file and Tailwind CSS configuration.
+- **`helpers`:** Contains helper functions.
+- **`layouts`:** Contains layout components for different pages.
+- **`router`:** Contains the Vue Router configuration.
+- **`services`:** Contains services for interacting with APIs and MSAL configuration.
+- **`stores`:** Contains Pinia stores for state management.
+- **`views`:** Contains the application's views or pages.
+- **`App.vue`:** The root Vue component.
+- **`main.js`:** The entry point of the application.
+
+## Features
+
+- **Authentication:** The application has a login system with Microsoft authentication using MSAL.
+- **Dashboard:** A dashboard page to display important information.
+- **Tables:** Components for displaying data in tables.
+- **Forms:** Components for creating and managing forms.
+- **Dark Mode:** The application has a dark mode feature.
+- **Responsive Layout:** The application is designed to be responsive and work on different screen sizes.

SECURITY.md

@@ -0,0 +1,112 @@
+# Mejoras de Seguridad Implementadas
+
+## 1. Almacenamiento Seguro de Sesión
+
+### ✅ Cambios Realizados
+- **sessionStorage** en lugar de localStorage para datos sensibles
+- Los datos se eliminan automáticamente al cerrar la pestaña
+- Mayor seguridad contra acceso no autorizado
+
+### 📁 Archivos Modificados
+- `src/stores/login.js` - Migración completa a sessionStorage
+
+### 🔒 Beneficios
+- Sesiones no persisten después de cerrar el navegador
+- Datos aislados entre pestañas diferentes
+- Menor superficie de ataque
+
+## 2. Expiración Automática de Sesión
+
+### ✅ Funcionalidades
+- **Timeout de sesión**: 30 minutos de inactividad
+- **Renovación automática**: Se renueva con cada actividad del usuario
+- **Limpieza automática**: Logout automático al expirar
+
+### 📁 Archivos Creados/Modificados
+- `src/stores/login.js` - Lógica de timeout y renovación
+- `src/composables/useSessionSecurity.js` - Monitor de actividad del usuario
+- `src/layouts/LayoutAuthenticated.vue` - Integración automática
+
+### 🔒 Beneficios
+- Protección contra sesiones abandonadas
+- Logout automático por inactividad
+- Monitoreo de actividad del usuario
+
+## 3. Sistema de Autorización Mejorado
+
+### ✅ Funcionalidades
+- **Control de roles**: Verificación granular por ruta
+- **Rutas protegidas**: Admin panel solo para administradores
+- **Validación automática**: En cada navegación
+
+### 📁 Archivos Modificados
+- `src/router/index.js` - Guards de navegación mejorados
+- Rutas `/admin` y `/settings` requieren rol 'admin'
+
+### 🔒 Beneficios
+- Acceso controlado basado en roles
+- Prevención de escalada de privilegios
+- Redirección automática a página de no autorizado
+
+## 4. Monitoreo de Seguridad de Sesión
+
+### ✅ Funcionalidades
+- **Monitor de actividad**: Detecta interacción del usuario
+- **Verificación inicial**: Valida sesión al cargar la página
+- **Eventos monitoreados**: Click, teclas, scroll, movimiento del mouse
+
+### 📁 Archivos Creados
+- `src/composables/useSessionSecurity.js` - Sistema de monitoreo
+
+### 🔒 Beneficios
+- Renovación automática de sesión con actividad
+- Detección de sesiones abandonadas
+- Mejor experiencia de usuario
+
+## Configuración de Seguridad
+
+### Parámetros Configurables (src/stores/login.js)
+```javascript
+const SESSION_DURATION = 30 * 60 * 1000 // 30 minutos
+const WARNING_TIME = 5 * 60 * 1000      // Avisar 5 min antes
+```
+
+### Eventos Monitoreados (src/composables/useSessionSecurity.js)
+```javascript
+const ACTIVITY_EVENTS = [
+  'mousedown', 'mousemove', 'keypress', 
+  'scroll', 'touchstart', 'click'
+]
+```
+
+## Flujo de Seguridad
+
+1. **Login** → Inicializa timestamps y timeout de sesión
+2. **Actividad del Usuario** → Renueva automáticamente la sesión
+3. **Navegación** → Verifica autenticación, expiración y roles
+4. **Inactividad (30min)** → Logout automático con alerta
+5. **Cierre de pestaña** → Limpieza automática de datos
+
+## Próximas Mejoras Sugeridas
+
+### 🔄 Futuras Implementaciones
+- [ ] Sistema de logging de seguridad
+- [ ] Protección CSRF para formularios críticos
+- [ ] Cifrado de datos sensibles en sessionStorage
+- [ ] Rate limiting para intentos de login
+- [ ] Autenticación de dos factores (2FA)
+
+## Testing
+
+### Probar las Mejoras
+1. **Sesión**: Login → Esperar 30min → Verificar logout automático
+2. **Roles**: Login como operario → Intentar acceder a `/admin`
+3. **Actividad**: Login → Usar la app → Verificar que no expire
+4. **Cierre**: Login → Cerrar pestaña → Reabrir → Verificar logout
+
+### Validación de Seguridad
+- ✅ sessionStorage en lugar de localStorage
+- ✅ Timeout automático de 30 minutos
+- ✅ Renovación con actividad del usuario
+- ✅ Control de roles por ruta
+- ✅ Limpieza automática de sesión