webmoney/ESPECIFICACIONES_WEBMONEY.md

📋 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
2. Dominios y Configuración
3. Infraestructura del Servidor
4. Stack Tecnológico
5. Funcionalidades Previstas
6. Requisitos de UI/UX
7. Notas Importantes de Desarrollo
8. Matriz de Tareas
9. 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

# 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)

# 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:

# /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:

# 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

-- 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:

-- 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

• Login/Logout
• Recuperación de contraseña
• Perfil de usuario
• Cambio de contraseña
• 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:

// 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:

// 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:

$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:

// 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:

// 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:

'timezone' => 'Europe/Madrid',
'locale' => 'es',
'fallback_locale' => 'es',
'faker_locale' => 'es_ES',

Laravel config/database.php (PostgreSQL):

'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):

'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:

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:

// 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:

# 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:

# En .htaccess o apache config:
AddDefaultCharset utf-8

# Headers específicos
Header set Content-Type "text/html; charset=utf-8"

# Para archivos específicos
<FilesMatch "\.php$">
  Header set Content-Type "text/html; charset=utf-8"
</FilesMatch>

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):

# 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.