SPA para gestión y pago de facturas de servicios. Desarrollado con React, TypeScript y Vite.

• Búsqueda de facturas por ID de cliente
• Visualización de información del cliente
• Proceso de pago de facturas
• Modal de detalles completo
• Diseño responsive
• Tests unitarios incluidos

React 18 + TypeScript, Vite, Tailwind CSS, Radix UI, Zustand, TanStack Query, Vitest

Prerrequisitos: Node.js >= 18.0.0, Bun >= 1.0.0

# Clonar e instalar
git clone <url-del-repositorio>
cd prueba-tec-esapp
bun install

# Desarrollo (http://localhost:8080)
bun dev

# Build de producción
bun run build

El proyecto incluye 3 suites de tests unitarios ubicados en src/test/pages/:

1. renderizado-inicial.test.tsx - Verifica el renderizado inicial del portal
2. busqueda-facturas.test.tsx - Prueba la búsqueda y visualización de facturas
3. modal-detalles.test.tsx - Valida la funcionalidad del modal de detalles

Ejecutar todos los tests:

bunx vitest run

src/
├── api/              # API y datos mock
├── components/       # Componentes compartidos
├── features/         # Features por dominio
│   └── invoices/    # Módulo de facturas
├── pages/           # Páginas principales
├── store/           # Estado global (Zustand)
└── test/            # Tests unitarios
    └── pages/       # Tests de páginas

• 123456 - Alejandro Mamani (4 facturas)
• 654321 - Valeria Rocha (3 facturas)
• 111222 - Ricardo Vargas (2 facturas)

1. Ingresa un ID de cliente (6-12 dígitos)
2. Revisa información del cliente y facturas
3. Haz clic en "Detalles" para ver información completa
4. Usa "Pagar" para facturas pendientes

Nota: El ID inv-fail-007 simula errores de pago.

• Moneda: Todas las cantidades en Bolívares (Bs.)
• Persistencia: Datos mock (se reinician al recargar)
• Latency: 400-800ms simulado
• Puerto: 8080 (configurable en vite.config.ts)

bun run build

Los archivos se generan en dist/.

Versión: 0.0.0 | Última actualización: Enero 2026

Por defecto, el servidor corre en el puerto 8080. Para cambiarlo, edita vite.config.ts:

server: {
  port: 3000,
}

• Persistencia: Los datos son mock y se reinician al recargar la página
• Simulación de Latencia: Las operaciones tienen un delay de 400-800ms para simular llamadas de red reales
• Manejo de Errores: ID de cliente terminado en 999 simula un error 500

QuantumCode - Jorge Tancara