104 lines
3.3 KiB
Markdown
104 lines
3.3 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm install
|
||
|
|
pnpm dev # http://localhost:5173
|
||
|
|
```
|
||
|
|
|
||
|
|
## Build de producción
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm build # genera la carpeta dist/
|
||
|
|
pnpm preview # previsualización del build
|
||
|
|
```
|
||
|
|
|
||
|
|
## Configuración
|
||
|
|
|
||
|
|
Crea un archivo `.env` en la raíz del proyecto:
|
||
|
|
|
||
|
|
```env
|
||
|
|
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.
|