ProyectoGrupal/doli-front

doli-front

SPA (Single Page Application) para la gestión empresarial integrada con Dolibarr.
Desarrollada en Vanilla JS con Vite 7, sin frameworks frontend.

Tecnologías

• Vanilla JS con ES Modules
• Vite 7 — bundler y servidor de desarrollo
• Chart.js — gráficas del dashboard
• @huggingface/transformers — asistente de voz (Whisper, ejecución local en el navegador)

Requisitos

• Node.js 18+
• pnpm

Instalación y desarrollo

pnpm install
pnpm dev        # http://localhost:5173

Build de producción

pnpm build      # genera la carpeta dist/
pnpm preview    # previsualización del build

Configuración

Crea un archivo .env en la raíz del proyecto:

VITE_API_BASE_URL=http://localhost:5001

Por defecto apunta al BFF en localhost:5001.

Páginas disponibles

Ruta hash	Página	Descripción
#/	Dashboard	Métricas generales y gráficas
#/facturas	Facturas	Facturas de clientes: crear, editar, anular
#/facturas-proveedores	Facturas proveedores	CRUD completo, líneas, pagos y cambio de estado
#/clientes	Clientes	Listado y gestión de clientes
#/contacts	Contactos	Listado y gestión de contactos
#/banco	Banco	Movimientos bancarios
#/settings	Configuración	Tema, sesión JWT, webhook y registro VeriFactu

Estructura del proyecto

doli-front/
├── src/
│   ├── main.js              # punto de entrada
│   ├── router.js            # router hash-based
│   ├── pages/               # una página por módulo de negocio
│   │   ├── pagesRegistry.js # registro central de rutas
│   │   ├── DashboardPage.js
│   │   ├── Facturas.js
│   │   ├── FacturasProveedores.js
│   │   ├── ClientesPage.js
│   │   ├── ContactsPage.js
│   │   ├── BancoPage.js
│   │   └── SettingsPage.js
│   ├── services/            # clientes HTTP por entidad
│   │   ├── apiClient.js     # fetch base con JWT automático
│   │   ├── auth.js
│   │   ├── invoices.js
│   │   ├── supplierInvoices.js
│   │   ├── clients.js
│   │   ├── contacts.js
│   │   ├── verifactu.js
│   │   └── ...
│   ├── components/          # componentes reutilizables
│   │   ├── Sidebar.js
│   │   ├── InvoiceModal.js
│   │   ├── VoiceAssistant.js
│   │   └── ...
│   └── styles/              # CSS modular
├── index.html
└── vite.config.js

Arquitectura

La aplicación sigue un patrón de SPA con router hash sin dependencias de framework:

1. main.js inicializa el router y monta el layout principal (sidebar + área de contenido).
2. router.js escucha cambios en window.location.hash y renderiza la página correspondiente.
3. Cada página es una función que devuelve un HTMLElement con toda su lógica encapsulada.
4. services/apiClient.js centraliza todas las llamadas HTTP, adjunta el token JWT y gestiona errores 401.

Credenciales de acceso (desarrollo)

• Usuario: admin
• Contraseña: 12345678

Estas son las credenciales del BFF/Dolibarr por defecto.