# 📋 ESPECIFICACIONES DEL PROYECTO **Proyecto:** WEBMoney - Gerenciador Financeiro Pessoal WEB **Proveedor:** ConneXiFly **Versión Especificación:** 1.0.0 **Fecha Creación:** 7 de Dezembro de 2025 **Estado:** En Desarrollo --- ## 📑 TABLA DE CONTENIDOS 1. [Información General del Proyecto](#información-general-del-proyecto) 2. [Dominios y Configuración](#dominios-y-configuración) 3. [Infraestructura del Servidor](#infraestructura-del-servidor) 4. [Stack Tecnológico](#stack-tecnológico) 5. [Funcionalidades Previstas](#funcionalidades-previstas) 6. [Requisitos de UI/UX](#requisitos-de-uiux) 7. [Notas Importantes de Desarrollo](#notas-importantes-de-desarrollo) 8. [Matriz de Tareas](#matriz-de-tareas) 9. [Cronograma de Implementación](#cronograma-de-implementación) --- ## 📊 INFORMACIÓN GENERAL DEL PROYECTO ### Descripción **WEBMoney** es un gerenciador financiero personal basado en web que permite a los usuarios: - Gestionar sus finanzas personales - Registrar ingresos y gastos - Generar reportes y análisis gráficos - Exportar datos en múltiples formatos - Acceder desde cualquier dispositivo (web y mobile) ### Objetivos Principales - ✓ Proporcionar herramienta intuitiva de gestión financiera - ✓ Soporte multiidioma (3 idiomas) - ✓ Interfaz moderna, responsiva y accesible - ✓ Seguridad de datos y privacidad - ✓ Integración con documentos (recibos, comprobantes) - ✓ Análisis visual mediante gráficos ### Público Objetivo - Usuarios individuales - Pequeñas empresas - Freelancers - Emprendedores --- ## 🌐 DOMINIOS Y CONFIGURACIÓN ### Dominios Principales | Item | Valor | Propósito | |------|-------|----------| | **Dominio Institucional** | cnxifly.com | Portal principal ConneXiFly | | **Subdominio WEBMoney** | webmoney.cnxifly.com | Aplicación WEBMoney | | **Email** | @cnxifly.com | Comunicación y notificaciones | | **DNS Primario** | ns1028.ui-dns.biz | UI-DNS | | **DNS Secundario** | ns1114.ui-dns.com | UI-DNS | | **DNS Terciario** | ns1016.ui-dns.org | UI-DNS | | **DNS Cuaternario** | ns1119.ui-dns.de | UI-DNS | ### Certificados SSL - **Requerido:** Certificados SSL válidos para cnxifly.com - **Tipo:** Certificado wildcard (*.cnxifly.com) recomendado - **Proveedor:** Preferentemente Let's Encrypt - **Renovación:** Automática (certificados Let's Encrypt) ### Subdominios Configurados ``` cnxifly.com → 213.165.93.60 www.cnxifly.com → 213.165.93.60 webmoney.cnxifly.com → 213.165.93.60 (WEBMoney App) mail.cnxifly.com → 213.165.93.60 (Panel Admin Email - Roundcube/PostfixAdmin) webmail.cnxifly.com → 213.165.93.60 (Webmail Usuarios - Roundcube) ftp.cnxifly.com → 213.165.93.60 (FTP/SFTP) api.cnxifly.com → 213.165.93.60 (API - Futuro) ``` **Nota sobre subdominios de email:** - **mail.cnxifly.com**: Panel administrativo para gestionar cuentas de email, dominios, alias (PostfixAdmin + Roundcube admin) - **webmail.cnxifly.com**: Webmail para usuarios finales leer/enviar emails (Roundcube) --- ## 🖥️ INFRAESTRUCTURA DEL SERVIDOR ### Detalles del Servidor | Característica | Especificación | |---|---| | **IP Público (IPv4)** | 213.165.93.60 | | **IP Público (IPv6)** | 2001:ba0:268:ab00::1 | | **Sistema Operativo** | Linux Ubuntu 24.04.3 LTS | | **Kernel** | 6.8.0-88-generic | | **Arquitectura** | x86_64 (64-bit) | | **Usuario Root** | root | | **Contraseña Root** | Master9354 | | **Conexión SSH** | sshpass (automática con contraseña) | | **Firewall** | UFW (Uncomplicated Firewall) | | **DNS Local** | systemd-resolved | | **Timezone** | Europe/Madrid (WET/WEST) | | **Encoding** | UTF-8 (todo el sistema) | ### Puertos a Configurar | Puerto | Protocolo | Servicio | Estado | |--------|-----------|---------|--------| | 22 | SSH | Acceso remoto | ✓ Activo | | 80 | HTTP | Web (redireccionar a 443) | Pendiente | | 443 | HTTPS | Web seguro | Pendiente | | 25/465/587 | SMTP | Correo electrónico | Pendiente | | 143/993 | IMAP | Acceso correo | Pendiente | | 21 | FTP | Transferencia de archivos | Pendiente | | 22 | SFTP | SFTP (SSH) | Activo | | 53 | DNS | Resolver DNS | Local only | ### Requisitos de Instalación **Sin scripts automáticos - Instalación manual comando a comando** #### Sistema Base - [ ] Actualizar sistema: `apt-get update && apt-get upgrade` - [ ] Instalar build-essential: `apt-get install build-essential` - [ ] Instalar curl, wget: `apt-get install curl wget` - [ ] Instalar git: `apt-get install git` #### Configuración de Timezone y Encoding (OBLIGATORIO) **Timezone: Europe/Madrid** ```bash # Verificar timezone actual timedatectl # Configurar timezone a Madrid timedatectl set-timezone Europe/Madrid # Verificar la configuración timedatectl # Salida esperada: Time zone: Europe/Madrid (WET/WEST, UTC±0/±1) ``` **Encoding UTF-8 (OBLIGATORIO EN TODO EL SISTEMA)** ```bash # Verificar locale actual locale # Instalar paquetes de locales apt-get install locales # Configurar UTF-8 para Madrid (es_ES) locale-gen es_ES.UTF-8 update-locale LANG=es_ES.UTF-8 # Verificar la configuración locale # Salida esperada: LANG=es_ES.UTF-8, LC_ALL=es_ES.UTF-8 # Actualizar variables de entorno export LC_ALL=es_ES.UTF-8 export LANG=es_ES.UTF-8 ``` **Archivos a Modificar:** ```bash # /etc/environment # Agregar al final: LANG=es_ES.UTF-8 LC_ALL=es_ES.UTF-8 LC_CTYPE=es_ES.UTF-8 LC_COLLATE=es_ES.UTF-8 LC_NUMERIC=es_ES.UTF-8 LC_TIME=es_ES.UTF-8 LC_MONETARY=es_ES.UTF-8 LC_MESSAGES=es_ES.UTF-8 LC_PAPER=es_ES.UTF-8 LC_NAME=es_ES.UTF-8 LC_ADDRESS=es_ES.UTF-8 LC_TELEPHONE=es_ES.UTF-8 LC_MEASUREMENT=es_ES.UTF-8 LC_IDENTIFICATION=es_ES.UTF-8 # /etc/locale.gen # Descomentar: # es_ES.UTF-8 UTF-8 es_ES.UTF-8 UTF-8 # /etc/default/locale # Configurar: LANG="es_ES.UTF-8" LANGUAGE="es_ES:es:en" LC_ALL="es_ES.UTF-8" ``` **Verificación Final:** ```bash # Ver zona horaria actual timedatectl # Debe mostrar: Time zone: Europe/Madrid (WET/WEST, UTC±0) # Ver encoding de terminal echo $LANG # Debe mostrar: es_ES.UTF-8 # Ver todas las variables de locale locale # Todas deben estar en UTF-8 ``` ⚠️ **IMPORTANTE:** Estas configuraciones deben aplicarse PRIMERO, antes de instalar cualquier servicio (BD, web, email, etc.). Algunos servicios como PostgreSQL y MySQL heredarán estas configuraciones. --- #### Sistema Base Continuación - [ ] Configurar Timezone: Europe/Madrid - [ ] Configurar Encoding: UTF-8 (todo el sistema) - [ ] Actualizar sistema: `apt-get update && apt-get upgrade` - [ ] Instalar build-essential: `apt-get install build-essential` - [ ] Instalar curl, wget: `apt-get install curl wget` - [ ] Instalar git: `apt-get install git` --- ## 💻 STACK TECNOLÓGICO ### Frontend **Tecnología:** React (última versión estable) ``` React: ^18.3.0 (o versión más reciente) ReactDOM: ^18.3.0 React Router: ^6.x (para navegación) Axios: ^1.6.x (para peticiones HTTP) Bootstrap: ^5.3.0 (CSS Framework) Bootstrap Icons: ^1.11.x Sass/SCSS: Para estilos personalizados Chart.js: ^4.4.x (gráficos) React-ChartJS-2: ^5.2.x (componente React) Date-fns: Para manipulación de fechas ``` **Build Tools:** - Vite (recomendado) o Create React App - Node.js: ^18.0.0 o superior - npm o yarn para gestión de dependencias ### Backend **Tecnología:** Laravel (última versión estable) ``` Laravel: ^11.0 (o versión más reciente) PHP: ^8.2.0 Composer: Última versión (gestor de dependencias) ``` **Dependencias Laravel Principales:** - laravel/framework - laravel/tinker - laravel/passport (autenticación OAuth) - laravel/sanctum (tokens API) - maatwebsite/excel (importar/exportar) - intervention/image (procesamiento de imágenes) - guzzlehttp/guzzle (peticiones HTTP) - doctrine/dbal (migraciones avanzadas) ### Base de Datos **Motor:** Seleccionar entre: - **PostgreSQL 15+** (recomendado para datos financieros) - **MySQL 8.0+** (alternativa compatible) - **MariaDB 10.6+** (alternativa a MySQL) **Características Requeridas:** - Soporte de transacciones ACID - Integridad referencial - Triggers para auditoría - Backups automáticos **CONFIGURACIÓN OBLIGATORIA: UTF-8 en todas las conexiones** ```sql -- PostgreSQL -- En postgresql.conf: client_encoding = 'UTF8' -- Crear base de datos con UTF-8: CREATE DATABASE webmoney ENCODING 'UTF8' LOCALE 'es_ES.UTF-8'; -- MySQL/MariaDB -- En my.cnf o my.ini, agregar en [mysqld]: character-set-server = utf8mb4 collation-server = utf8mb4_unicode_ci -- Crear base de datos: CREATE DATABASE webmoney CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- Verificar encoding: SHOW VARIABLES LIKE 'character%'; SHOW VARIABLES LIKE 'collation%'; ``` **Verificación de Encoding en BD:** ```sql -- PostgreSQL SHOW client_encoding; SHOW server_encoding; -- MySQL/MariaDB SHOW VARIABLES LIKE 'character_set_client'; SHOW VARIABLES LIKE 'character_set_database'; ``` ### Servidor Web **Opciones:** #### Opción 1: Nginx (Recomendado) ``` nginx: 1.24.x o superior - Alto rendimiento - Bajo consumo de memoria - Ideal para aplicaciones modernas ``` #### Opción 2: Apache ``` apache2: 2.4.58 o superior - Mayor compatibilidad - Módulos adicionales disponibles - Mod rewrite para URLs limpias ``` **Configuración Requerida:** - Gzip compression activado - Cache headers adecuados - CORS configurado - Rate limiting para API ### Servidor de Email **Configuración:** ``` Servidor SMTP: Postfix o Exim Servidor IMAP: Dovecot Cuentas de email: ├─ admin@cnxifly.com (administrador) ├─ no-reply@cnxifly.com (notificaciones automáticas) ├─ support@cnxifly.com (soporte técnico) └─ Cuentas centralizadas compartidas Contraseña Base: M@ster93542026 (Cambiar para cada cuenta con incremento numérico) Almacenamiento: Mínimo 10GB Quota por usuario: 5GB ``` ### SSL/TLS **Certificados:** - Let's Encrypt (gratuito, renovable automáticamente) - Wildcard para *.cnxifly.com - Renovación automática mediante Certbot **Ciphers Recomendados:** ``` TLS 1.2 mínimo TLS 1.3 preferido Ciphers modernos (excluir RC4, DES, SSLv3) ``` ### FTP/SFTP **Servidor FTP:** ``` vsftpd (Very Secure FTP Daemon) - Soporte SSL/TLS - Usuarios chroot - Rate limiting - Logging completo ``` **Acceso SFTP:** - SSH en puerto 22 - Usuarios con shell restringido - Directorios home aislados --- ## 🚀 FUNCIONALIDADES PREVISTAS ### Funcionalidades Core (MVP - Minimum Viable Product) #### 1. Autenticación y Gestión de Usuarios - [x] Login/Logout - [x] Recuperación de contraseña - [x] Perfil de usuario - [x] Cambio de contraseña - [x] Autenticación de dos factores (opcional) - [ ] Panel administrativo para crear usuarios (SOLO ADMINS) **⚠️ IMPORTANTE:** Los usuarios NO pueden auto-registrarse. Solo administradores pueden crear nuevas cuentas mediante panel administrativo. #### 2. Gestión de Cuentas Bancarias - [ ] Crear múltiples cuentas - [ ] Editar cuentas - [ ] Eliminar cuentas - [ ] Saldo inicial y actual - [ ] Tipos de cuenta (Ahorro, Corriente, Crédito) #### 3. Registro de Transacciones - [ ] Crear ingreso - [ ] Crear gasto - [ ] Crear transferencia entre cuentas - [ ] Editar transacción - [ ] Eliminar transacción (con registro de auditoría) - [ ] Búsqueda y filtrado de transacciones - [ ] Categorización de gastos #### 4. Categorías de Gastos - [ ] Categorías predefinidas - [ ] Crear categorías personalizadas - [ ] Editar categorías - [ ] Subcategorías - [ ] Colores e iconos personalizados #### 5. Fotos de Recibos - [ ] Cargar foto de recibo - [ ] Asociar con transacción - [ ] Compresión automática - [ ] Galería de recibos - [ ] Búsqueda por fecha y categoría #### 6. Reportes y Análisis - [ ] Resumen de ingresos/gastos (mes, año) - [ ] Gráficos de gastos por categoría - [ ] Evolución de saldo en el tiempo - [ ] Comparativa mes a mes - [ ] Alertas de gasto por categoría - [ ] Proyecciones de ahorro #### 7. Importación/Exportación - [ ] Importar transacciones desde XLS/XLSX - [ ] Importar transacciones desde CSV - [ ] Exportar a XLS/XLSX - [ ] Exportar a CSV - [ ] Exportar a PDF (reportes) - [ ] Generación de PDF con gráficos #### 8. Notificaciones y Alertas - [ ] Alertas de gasto por categoría - [ ] Alertas de saldo bajo - [ ] Recordatorios de transacciones recurrentes - [ ] Notificaciones por email - [ ] Notificaciones en la aplicación ### Funcionalidades Futuras (v2.0+) - Transacciones recurrentes/automáticas - Presupuestos personalizados - Metas de ahorro - Integración con bancos (API) - Sincronización multi-dispositivo - Análisis predictivo (IA) - Compartir cuentas (multi-usuario) - Análisis de inversiones --- ## 🎨 REQUISITOS DE UI/UX ### Idiomas Soportados **3 Idiomas Principales:** 1. **Español** (es) - Idioma principal 2. **Inglés** (en) - Alcance internacional 3. **Portugués Brasileño** (pt-BR) - Mercado brasileño **Implementación:** - i18n (Internacionalization) con librería i18next o react-intl - Cambio de idioma en tiempo real - Almacenamiento de preferencia de idioma - Traducción de todos los textos UI, errores y mensajes ### Sistema de Alertas y Notificaciones **Prohibición Explícita:** ``` ❌ NO se pueden usar alertas del navegador: - alert() - confirm() - prompt() ✅ USAR SIEMPRE: - Modales Bootstrap (Bootstrap Modal) - Toast/Notificaciones (Toast desde Bootstrap 5) - Notificaciones de aplicación personalizadas ``` **Modales Bootstrap:** ```javascript // Ejemplo de modal para confirmación const modal = new bootstrap.Modal(document.getElementById('confirmModal')); modal.show(); // Ejemplo de toast para notificaciones const toast = new bootstrap.Toast(document.getElementById('notificationToast')); toast.show(); ``` **Tipos de Notificaciones:** - Success (Verde): Operaciones completadas - Error (Rojo): Operaciones fallidas - Warning (Amarillo): Advertencias - Info (Azul): Información general - Confirmación: Modal con botones ### Tema Visual **Estilo:** Oscuro, profesional, moderno, basado en azul **Características:** - Modo oscuro por defecto (dark mode) - Base azul profesional para aplicación financiera - Alto contraste para accesibilidad - Diseño moderno y minimalista - Paleta de colores: ``` Primario: #1E40AF (Azul profesional - base principal) Primario Oscuro: #1E3A8A (Azul más oscuro para hover/active) Primario Claro: #3B82F6 (Azul claro para highlights) Secundario: #10B981 (Verde esmeralda para ingresos/positivo) Peligro: #EF4444 (Rojo para gastos/alertas/negativo) Advertencia: #F59E0B (Amarillo ámbar para advertencias) Información: #06B6D4 (Cyan para información) Fondo Principal: #0F172A (Slate 900 - casi negro) Fondo Secundario: #1E293B (Slate 800 - paneles/cards) Fondo Terciario: #334155 (Slate 700 - elementos elevados) Texto Principal: #F1F5F9 (Slate 100 - alto contraste) Texto Secundario: #CBD5E1 (Slate 300 - texto menos importante) Texto Terciario: #94A3B8 (Slate 400 - placeholders/disabled) Bordes: #334155 (Slate 700 - sutiles) Sombras: rgba(0, 0, 0, 0.3) (suaves) ``` **Implementación CSS/SCSS:** ```scss // Variables de tema oscuro azul $primary: #1E40AF; $primary-dark: #1E3A8A; $primary-light: #3B82F6; $secondary: #10B981; $danger: #EF4444; $warning: #F59E0B; $info: #06B6D4; $bg-primary: #0F172A; $bg-secondary: #1E293B; $bg-tertiary: #334155; $text-primary: #F1F5F9; $text-secondary: #CBD5E1; $text-tertiary: #94A3B8; $border-color: #334155; $shadow: rgba(0, 0, 0, 0.3); // Bootstrap override (en frontend/src/styles/_variables.scss) $body-bg: $bg-primary; $body-color: $text-primary; $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $secondary, "danger": $danger, "warning": $warning, "info": $info, "dark": $bg-secondary, "light": $text-tertiary ); ``` **Tipografía:** - Fuente: Inter, Segoe UI, Roboto, o equivalente sans-serif moderna - Peso: 400 (regular), 500 (medium), 600 (semibold), 700 (bold) - Tamaño base: 16px - Línea: 1.5 - Suavizado: -webkit-font-smoothing: antialiased **Efectos Visuales:** - Transiciones suaves: 150-300ms ease - Border radius: 0.5rem (8px) para cards/botones - Sombras sutiles: box-shadow con blur 10-20px - Gradientes opcionales en headers: linear-gradient(135deg, #1E40AF, #1E3A8A) ### Responsividad **Breakpoints:** ```scss $xs: 0px // Móvil pequeño $sm: 576px // Móvil $md: 768px // Tablet $lg: 992px // Desktop $xl: 1200px // Desktop grande $xxl: 1400px // Ultra ancho ``` **Requisitos Específicos:** - [ ] Funcional en móviles (iPhone, Android) - [ ] Funcional en tablets (iPad, Galaxy Tab) - [ ] Funcional en desktops - [ ] Funcional en navegadores modernos (Chrome, Firefox, Safari, Edge) - [ ] Orientación vertical y horizontal - [ ] Touch events para móviles - [ ] Gestos (swipe, pinch) opcionales ### Accesibilidad (WCAG 2.1) **Requisitos Mínimos:** - [ ] Contraste de color: Ratio 4.5:1 para texto - [ ] Navegación por teclado: TAB, ENTER, ESC - [ ] Screen readers: Alt text en imágenes - [ ] Etiquetas HTML semánticas - [ ] Atributos ARIA donde sea necesario - [ ] Validación de formularios accesible ### Componentes Visuales **Componentes Bootstrap Requeridos:** - Navbar/Header - Sidebar/Menu - Cards - Modales - Formularios - Tabla de datos - Gráficos (Chart.js) - Toast/Alertas - Badges/Labels - Buttons - Dropdowns - Accordion - Pagination - Progress bars --- ## 📝 NOTAS IMPORTANTES DE DESARROLLO ### Principios Generales 1. **Instalación Manual** - Cada componente se instala comando a comando - No se utilizan scripts automáticos bash - Cada paso debe ser documentado - Permitir validación entre pasos 2. **Documentación Completa** - Documentar toda la configuración realizada - Incluir comandos exactos utilizados - Explicar el propósito de cada paso - Mantener guía de instalación actualizada 3. **Documentación de Código** - Comentarios en código importante - JSDoc para funciones JavaScript - PHPDoc para funciones Laravel - README en cada módulo/carpeta - Guía de arquitectura 4. **Desarrollo Incremental** - Desarrollar SOLO lo solicitado - CUANDO se solicite específicamente - No anticipar características no solicitadas - Validar con usuario antes de desarrollar 5. **Testing** - Tests unitarios para lógica crítica - Tests de integración para APIs - Tests de UI para componentes - Coverage mínimo: 80% ### Estructura de Directorios Recomendada ``` /webmoney ├── /backend (Laravel) │ ├── app/ │ │ ├── Http/ │ │ │ ├── Controllers/ │ │ │ ├── Middleware/ │ │ │ └── Requests/ │ │ ├── Models/ │ │ ├── Services/ │ │ └── Repositories/ │ ├── database/ │ │ ├── migrations/ │ │ ├── seeders/ │ │ └── factories/ │ ├── routes/ │ ├── config/ │ ├── tests/ │ ├── .env (no versionar) │ ├── composer.json │ └── artisan │ ├── /frontend (React) │ ├── src/ │ │ ├── components/ │ │ ├── pages/ │ │ ├── services/ │ │ ├── hooks/ │ │ ├── contexts/ │ │ ├── styles/ │ │ ├── utils/ │ │ ├── App.jsx │ │ └── main.jsx │ ├── public/ │ ├── tests/ │ ├── package.json │ ├── vite.config.js │ └── .env (no versionar) │ ├── /docs (Documentación) │ ├── INSTALACION.md │ ├── API.md │ ├── ARQUITECTURA.md │ ├── USUARIOS_PRUEBA.md │ └── GUIA_USUARIO.md │ ├── /scripts (Scripts de utilidad) │ ├── backup.sh │ ├── deploy.sh │ └── test.sh │ ├── ESPECIFICACIONES_WEBMONEY.md (este archivo) ├── README.md ├── CHANGELOG.md └── VERSION ``` ### Convenciones de Código **JavaScript/React:** ```javascript // CamelCase para variables y funciones const userName = "John"; function calculateTotal() { } // PascalCase para componentes function UserProfile() { } // UPPER_SNAKE_CASE para constantes const MAX_LOGIN_ATTEMPTS = 5; // Usar arrow functions const handler = () => { }; // Destructuring const { name, email } = user; ``` **Laravel/PHP:** ```php // CamelCase para métodos public function getUserTransactions() { } // CamelCase para propiedades private $transactionService; // PascalCase para clases class TransactionController extends Controller { } // UPPER_SNAKE_CASE para constantes const DEFAULT_PAGE_SIZE = 20; // Usar type hints public function store(TransactionRequest $request): JsonResponse { } ``` ### Variables de Entorno **Backend (.env):** ``` APP_NAME=WEBMoney APP_ENV=production APP_DEBUG=false APP_URL=https://webmoney.cnxifly.com DB_CONNECTION=pgsql DB_HOST=localhost DB_PORT=5432 DB_DATABASE=webmoney DB_USERNAME=webmoney_user DB_PASSWORD=XXXXX MAIL_MAILER=smtp MAIL_HOST=localhost MAIL_PORT=587 MAIL_USERNAME=no-reply@cnxifly.com MAIL_PASSWORD=XXXXX MAIL_ENCRYPTION=tls MAIL_FROM_ADDRESS=no-reply@cnxifly.com JWT_SECRET=XXXXX SESSION_DRIVER=cookie # Timezone y Encoding APP_TIMEZONE=Europe/Madrid APP_LOCALE=es FALLBACK_LOCALE=es APP_ENCODING=UTF-8 ``` **Laravel config/app.php:** ```php 'timezone' => 'Europe/Madrid', 'locale' => 'es', 'fallback_locale' => 'es', 'faker_locale' => 'es_ES', ``` **Laravel config/database.php (PostgreSQL):** ```php 'pgsql' => [ 'driver' => 'pgsql', 'host' => env('DB_HOST', 'localhost'), 'port' => env('DB_PORT', '5432'), 'database' => env('DB_DATABASE', 'webmoney'), 'username' => env('DB_USERNAME', 'postgres'), 'password' => env('DB_PASSWORD', ''), 'charset' => 'utf8', 'prefix' => '', 'schema' => 'public', 'sslmode' => 'prefer', // Conexión UTF-8 'options' => [ 'client_encoding' => 'UTF8', ], ], ``` **Laravel config/database.php (MySQL):** ```php 'mysql' => [ 'driver' => 'mysql', 'host' => env('DB_HOST', 'localhost'), 'port' => env('DB_PORT', '3306'), 'database' => env('DB_DATABASE', 'webmoney'), 'username' => env('DB_USERNAME', 'root'), 'password' => env('DB_PASSWORD', ''), 'unix_socket' => env('DB_SOCKET', ''), 'charset' => 'utf8mb4', 'collation' => 'utf8mb4_unicode_ci', 'prefix' => '', 'prefix_indexes' => true, 'strict' => true, 'engine' => null, 'modes' => [ 'STRICT_TRANS_TABLES', 'ERROR_FOR_DIVISION_BY_ZERO', 'NO_ENGINE_SUBSTITUTION', ], ] ``` **Frontend (.env):** ``` VITE_API_URL=https://webmoney.cnxifly.com/api VITE_APP_NAME=WEBMoney VITE_DEFAULT_LANGUAGE=es VITE_TIMEZONE=Europe/Madrid VITE_ENCODING=UTF-8 ``` **Frontend - vite.config.js:** ```javascript export default { // ... otras config define: { __TIMEZONE__: JSON.stringify('Europe/Madrid'), __LOCALE__: JSON.stringify('es-ES'), __ENCODING__: JSON.stringify('UTF-8'), } } ``` **React - Configuración de i18n:** ```javascript // src/i18n/config.js import i18n from 'i18next'; i18n.init({ lng: 'es', fallbackLng: 'es', defaultNS: 'translation', // Configuración de timezone interpolation: { escapeValue: false, formatSeparators: ['{', '}'], }, resources: { es: { translation: { /* ... */ } }, en: { translation: { /* ... */ } }, 'pt-BR': { translation: { /* ... */ } }, } }); // Configurar date-fns con timezone de Madrid import { setDefaultOptions } from 'date-fns'; import { es } from 'date-fns/locale'; setDefaultOptions({ locale: es }); ``` **Nginx - Headers UTF-8:** ```nginx # En nginx.conf o bloque server: charset utf-8; charset_types text/html text/xml text/plain text/css text/javascript application/json application/javascript; # Headers adicionales para UTF-8 add_header Content-Type "text/html; charset=utf-8"; ``` **Apache - Headers UTF-8:** ```apache # En .htaccess o apache config: AddDefaultCharset utf-8 # Headers específicos Header set Content-Type "text/html; charset=utf-8" # Para archivos específicos Header set Content-Type "text/html; charset=utf-8" ``` ### Seguridad **Requisitos Obligatorios:** - [ ] HTTPS en todas las conexiones - [ ] CSRF protection activada - [ ] SQL injection prevention (prepared statements) - [ ] XSS protection (sanitización de inputs) - [ ] Rate limiting en APIs - [ ] CORS configurado correctamente - [ ] Validación de inputs en frontend y backend - [ ] Hashing de contraseñas (bcrypt, argon2) - [ ] Logs de auditoría para transacciones - [ ] Encriptación de datos sensibles - [ ] Headers de seguridad (CSP, X-Frame-Options, etc.) ### Configuración del Servidor - Timezone y Encoding **⚠️ CRÍTICO: DEBE configurarse ANTES de instalar cualquier servicio** **Timezone: Europe/Madrid (WET/WEST)** - Zona horaria: GMT+0 (invierno), GMT+1 (verano) - Todos los timestamps deben estar en este timezone - Las fechas en la BD deben guardar en UTC pero mostrar en Madrid - Los logs del servidor deben usar Madrid **Encoding: UTF-8 en TODO el sistema** - Archivos del servidor: UTF-8 sin BOM - Base de datos: UTF-8/utf8mb4 - Frontend: UTF-8 - Comunicación HTTP: UTF-8 - Emails: UTF-8 - Archivos CSV/Excel exportados: UTF-8 **Verificación de Configuración (post-instalación):** ```bash # Timezone timedatectl status # Esperado: Time zone: Europe/Madrid (WET/WEST, UTC±0/±1) # Sistema locale locale # Esperado: LANG=es_ES.UTF-8, LC_ALL=es_ES.UTF-8 # Base de datos # PostgreSQL: SHOW server_encoding; -> UTF8 # MySQL: SHOW VARIABLES LIKE 'character_set%'; -> utf8mb4 # Archivos PHP file /path/to/file.php # Esperado: ASCII text (o UTF-8 text) # Headers HTTP curl -I https://webmoney.cnxifly.com # Esperado: Content-Type: text/html; charset=utf-8 ``` ### Performance **Targets:** - [ ] Time to First Byte (TTFB): < 200ms - [ ] First Contentful Paint (FCP): < 1.5s - [ ] Largest Contentful Paint (LCP): < 2.5s - [ ] Cumulative Layout Shift (CLS): < 0.1 - [ ] Bundle size: < 500KB (gzipped) - [ ] API response time: < 500ms --- ## 📊 MATRIZ DE TAREAS ### Fase 1: Infraestructura (v1.0.0) | Tarea | Estado | Responsable | Fecha Estimada | |-------|--------|-------------|---| | Auditoria inicial servidor | ✅ Completado | Copilot | 2025-12-07 | | Instalación SO base | ⏳ Pendiente | - | - | | Instalación MySQL/PostgreSQL | ⏳ Pendiente | - | - | | Instalación Nginx/Apache | ⏳ Pendiente | - | - | | Instalación Node.js | ⏳ Pendiente | - | - | | Instalación PHP y Composer | ⏳ Pendiente | - | - | | Configuración SSL/TLS | ⏳ Pendiente | - | - | | Configuración servidor email | ⏳ Pendiente | - | - | | Configuración FTP/SFTP | ⏳ Pendiente | - | - | | Configuración firewall | ⏳ Pendiente | - | - | ### Fase 2: Backend (v1.1.0) | Tarea | Estado | Responsable | Fecha Estimada | |-------|--------|-------------|---| | Setup proyecto Laravel | ⏳ Pendiente | - | - | | Modelos y Migraciones | ⏳ Pendiente | - | - | | Autenticación y Usuarios | ⏳ Pendiente | - | - | | CRUD Cuentas Bancarias | ⏳ Pendiente | - | - | | CRUD Transacciones | ⏳ Pendiente | - | - | | API REST | ⏳ Pendiente | - | - | | Tests unitarios | ⏳ Pendiente | - | - | ### Fase 3: Frontend (v1.2.0) | Tarea | Estado | Responsable | Fecha Estimada | |-------|--------|-------------|---| | Setup proyecto React | ⏳ Pendiente | - | - | | Autenticación (Login) | ⏳ Pendiente | - | - | | Dashboard principal | ⏳ Pendiente | - | - | | Gestión de cuentas | ⏳ Pendiente | - | - | | Registro de transacciones | ⏳ Pendiente | - | - | | Reportes y gráficos | ⏳ Pendiente | - | - | | Importación/Exportación | ⏳ Pendiente | - | - | | Internacionalización (i18n) | ⏳ Pendiente | - | - | ### Fase 4: Integración (v1.3.0) | Tarea | Estado | Responsable | Fecha Estimada | |-------|--------|-------------|---| | Integración Frontend-Backend | ⏳ Pendiente | - | - | | Testing integral | ⏳ Pendiente | - | - | | Optimización performance | ⏳ Pendiente | - | - | | Deploy a producción | ⏳ Pendiente | - | - | | Documentación final | ⏳ Pendiente | - | - | --- ## 📅 CRONOGRAMA DE IMPLEMENTACIÓN ### Timeline Propuesto ``` Semana 1-2: Infraestructura y Setup ├─ Instalación sistemas base ├─ Configuración BD y web server └─ Configuración SSL y email Semana 3-4: Backend ├─ Proyecto Laravel base ├─ Modelos y migraciones └─ APIs iniciales Semana 5-6: Frontend ├─ Proyecto React base ├─ Componentes y páginas └─ Integración con APIs Semana 7: Testing e integración ├─ Tests completos ├─ Bugs y ajustes └─ Optimización Semana 8: Deploy y documentación ├─ Deploy a producción ├─ Documentación final └─ Capacitación usuarios ``` ### Hitos (Milestones) - **v1.0.0** (2025-12-07): Auditoria y especificaciones - **v1.1.0** (TBD): Infraestructura completa - **v1.2.0** (TBD): Backend funcional - **v1.3.0** (TBD): Frontend integrado - **v2.0.0** (TBD): MVP lanzado en producción --- ## 📞 CONTACTO Y REFERENCIAS **Servidor Principal:** - URL: https://webmoney.cnxifly.com - IP: 213.165.93.60 - SSH: root@213.165.93.60 **Dominio:** - cnxifly.com - Registrador: UI-DNS - Nameservers: ns1028.ui-dns.biz, ns1114.ui-dns.com, ns1016.ui-dns.org, ns1119.ui-dns.de **Documentación Relacionada:** - AUDITORIA_INICIAL_CNXIFLY.md - Auditoria del servidor - PAINEL_CONTROLE.txt - Dashboard del proyecto - .DIRETRIZES_DESENVOLVIMENTO - Normas de desarrollo --- **Documento creado:** 7 de Dezembro de 2025 **Versión:** 1.0.0 **Estado:** En Desarrollo **Última actualización:** 7 de Dezembro de 2025 --- > 📌 Este documento es la especificación viva del proyecto. Se actualizará con cada versión. > Consultar CHANGELOG.md para historia de cambios.