marco/webmoney
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
d47201bca7
webmoney/ESPECIFICACIONES_WEBMONEY.md

29 KiB
Raw Blame History

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

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.