Yurest · Portal de gestión

Esquema de funcionamiento de la web

Cómo se relacionan las pantallas, los actores, la base de datos y los workflows automáticos.

Actores y pantallas

Las cinco audiencias que tocan la plataforma y la pantalla principal de cada una.

Comercial Cliente Equipo Yurest (interno) Contabilidad Integraciones Backend (n8n + Supabase)

flowchart LR classDef cliente fill:#fde68a,stroke:#f59e0b,color:#78350f classDef comercial fill:#dbeafe,stroke:#3b82f6,color:#1e3a8a classDef yurest fill:#fecaca,stroke:#fc5858,color:#7f1d1d classDef contab fill:#dcfce7,stroke:#16a34a,color:#14532d classDef integ fill:#ede9fe,stroke:#8b5cf6,color:#4c1d95 classDef backend fill:#cbd5e1,stroke:#64748b,color:#0f172a Comercial[👔 Comercial
lista.html · proyectos.html
distribucion.html]:::comercial Cliente[👤 Cliente
solicitud.html
vía email con token]:::cliente Yurest[🧑‍💼 Equipo Yurest
index.html · sinasignar.html
bajas.html · ventas.html]:::yurest Contab[💼 Contabilidad
contabilidad.html
Grabar en A3]:::contab Integ[🔌 Integraciones
integraciones.html
Asana TPV NI]:::integ BD[(🗄️ Supabase
+ workflows n8n)]:::backend Comercial -.crea solicitud.-> Cliente Cliente -.envía datos firmados.-> BD Yurest -.completa fichas.-> BD Comercial -.consulta KPIs.-> BD Contab -.toggle A3.-> BD Integ -.tareas Asana.-> BD

Flujo principal: Solicitud → Ficha → Completada → A3

El recorrido completo desde que el comercial pide los datos hasta que contabilidad da de alta el cliente en A3.

flowchart TD classDef cliente fill:#fde68a,stroke:#f59e0b,color:#78350f classDef comercial fill:#dbeafe,stroke:#3b82f6,color:#1e3a8a classDef yurest fill:#fecaca,stroke:#fc5858,color:#7f1d1d classDef contab fill:#dcfce7,stroke:#16a34a,color:#14532d classDef backend fill:#cbd5e1,stroke:#64748b,color:#0f172a A1[1️⃣ Comercial · lista.html
📨 Solicitar ficha]:::comercial A2[(solicitudes
estado=pendiente
access_token=uuid)]:::backend A3[📧 Email al cliente
solicitud.html?t=ABC]:::backend B1[2️⃣ Cliente · solicitud.html
Rellena datos de empresa,
JP, firmante, TPV, SEPA]:::cliente B2[✍️ Firma SEPA en canvas
+ valida IBAN MOD-97]:::cliente B3[📤 Envía formulario]:::cliente C1[(fichas_alta
estado=completada
fecha_rellenado set
sepa_mandato JSONB)]:::backend C2[📁 Crea carpeta Drive]:::backend C3[📧 Email al cliente
con enlace a Drive]:::backend C4[📧 Email al comercial
aviso ficha rellenada]:::backend C5{TPV
no integrado?}:::backend C6[📋 Tarea Asana
+ email a soporte]:::backend D1[3️⃣ Pestaña 'Rellenado cliente'
Comercial pulsa 'Completar ficha']:::comercial D2[Comercial · index.html
Completa todos los detalles
módulos, locales, financiero]:::comercial D3[(fichas_alta
estado=rellenado
fecha_completado set)]:::backend E1[4️⃣ Pestaña 'Fichas'
Listado con SEPA disponible]:::yurest E2[5️⃣ Contabilidad · contabilidad.html
Pendientes A3]:::contab E3[📄 Ver mandato SEPA
+ Descargar PDF]:::contab E4[Toggle 'Grabado en A3']:::contab E5[(grabado_a3=true
grabado_a3_at set)]:::backend A1 --> A2 --> A3 --> B1 B1 --> B2 --> B3 B3 --> C1 C1 --> C2 --> C3 C1 --> C4 C1 --> C5 C5 -- Sí --> C6 C5 -- No --> D1 C6 --> D1 C1 --> D1 D1 --> D2 --> D3 D3 --> E1 D3 --> E2 E2 --> E3 E2 --> E4 --> E5

Mapa de pantallas y navegación

Sidebar agrupado por dominios. Cada pantalla es accesible desde cualquier otra vía el menú lateral.

flowchart LR classDef informes fill:#fff7ed,stroke:#f59e0b,color:#9a3412 classDef comercial fill:#eff6ff,stroke:#3b82f6,color:#1e40af classDef impl fill:#fef2f2,stroke:#fc5858,color:#7f1d1d classDef contab fill:#f0fdf4,stroke:#16a34a,color:#14532d classDef sop fill:#faf5ff,stroke:#8b5cf6,color:#5b21b6 SB[📐 Sidebar lateral] SB --> I[📊 Informes] I --> Ven[Ventas
KPIs · tiempos por estado]:::informes I --> Imp[Implementadores
distribución de carga]:::informes SB --> Co[💼 Comercial] Co --> Fic[Fichas de cliente
tabs Fichas / Rellenado / Solicitudes]:::comercial Co --> Baj[Bajas]:::comercial SB --> Im[🔧 Implementación] Im --> Sin[Sin asignar 🟠]:::impl Im --> Pro[Proyectos
+ kanban tareas]:::impl SB --> Cont[📒 Contabilidad] Cont --> A3[Grabar en A3 🟠
SEPA + toggle]:::contab SB --> Sup[🎧 Soporte] Sup --> Int[Integraciones
panel Asana]:::sop

Workflows n8n implicados

Cada acción dispara uno o varios workflows en n8n que orquestan Supabase, Asana, Google Drive y SMTP.

Workflow	Trigger	Qué hace
`04-fichas-alta`	POST guardarFicha · GET altas	Listado y CRUD de fichas. UPDATE solo campos enviados (no destructivo).
`08-solicitudes`	POST crearSolicitud · GET listaSolicitudes	Crea solicitud con `access_token` aleatorio. Devuelve la lista filtrada por estado.
`10-eliminar`	POST eliminarFicha/Solicitud	Soft-delete (UPDATE deleted_at). Devuelve `{success, ficha_count, sol_count}` con diagnóstico.
`11-auxiliares`	POST responderSolicitud	Cliente envía → INSERT ficha + crea Drive + UPDATE solicitud.ficha_id + emails (cliente, comercial, integraciones si TPV NI).
`12-completar-ficha`	GET ?t= o ?id=	Resuelve token o id a datos de la ficha/solicitud para prellenar el formulario.
`13-grabado-a3`	POST grabadoA3	Toggle del flag con diagnóstico de filas afectadas.

Modelo de datos esencial

Tablas y relaciones que sostienen todo el flujo. Soft-delete vía deleted_at en todas.

erDiagram SOLICITUDES ||--o{ FICHAS_ALTA : genera FICHAS_ALTA ||--o{ LOCALES : tiene FICHAS_ALTA ||--o{ ADJUNTOS_JSONB : "tiene" FICHAS_ALTA ||--|| SEPA_MANDATO_JSONB : "firma" FICHAS_ALTA ||--o{ PROYECTOS : "se convierte en" PROYECTOS ||--o{ TAREAS : tiene SOLICITUDES { uuid id PK text access_token UK uuid ficha_id FK text estado jsonb datos timestamptz created_at } FICHAS_ALTA { uuid id PK text estado "rellenado|completada" text denominacion text cif text email bool grabado_a3 jsonb sepa_mandato jsonb adjuntos timestamptz fecha_solicitud timestamptz fecha_rellenado timestamptz fecha_completado timestamptz grabado_a3_at } LOCALES { uuid id PK uuid ficha_id FK } PROYECTOS { uuid id PK text cliente text estado text asana_project_url }

Nota semántica: en fichas_alta el estado completada significa "rellenada por el cliente" y rellenado significa "completada por el comercial". Triggers SQL actualizan automáticamente fecha_rellenado, fecha_completado y grabado_a3_at al cambiar el campo correspondiente.

Cómo se usa cada acción clave

Acción	Quién	Dónde	Qué pasa
Solicitar ficha	Comercial	lista.html · botón "Solicitar ficha"	Crea solicitud + envía email al cliente con URL `?t=<token>`.
Rellenar solicitud	Cliente	solicitud.html (link del email)	Datos empresa + JP + firmante + TPV (integrado/no) + IBAN + firma SEPA.
Completar ficha	Comercial	Pestaña "Rellenado cliente" → botón	Abre index.html con los datos prellenados; al guardar pasa a estado `rellenado`.
Editar ficha	Comercial / Yurest	Pestaña "Fichas" · botón Editar	UPDATE solo de campos enviados — no destructivo.
Eliminar ficha/solicitud	Comercial / Yurest	Pestañas correspondientes · botón Eliminar	Soft-delete con confirmación + toast de diagnóstico.
Grabar en A3	Contabilidad	contabilidad.html · toggle por fila	UPDATE flag `grabado_a3`; trigger setea `grabado_a3_at`.
Ver mandato SEPA	Contabilidad	contabilidad.html · botón "📄 Ver mandato"	Modal con datos legales completos + firma + descarga PDF (popup, una sola hoja A4).
TPV no integrado	Cliente	solicitud.html · checkbox cabecera TPV	Al enviar: tarea automática en Asana (proyecto Integraciones) + email a soporte/Yurest/Roocket.

Estados de ficha y solicitud

stateDiagram-v2 [*] --> SolicitudPendiente: Comercial crea solicitud SolicitudPendiente --> SolicitudCompletada: Cliente rellena
(workflow 11) SolicitudCompletada --> FichaCompletada: INSERT en fichas_alta
estado=completada FichaCompletada --> FichaRellenada: Comercial Guarda
estado=rellenado FichaRellenada --> GrabadoA3: Contabilidad activa toggle GrabadoA3 --> [*]

"Completada" = rellenada por cliente · "Rellenado" = cerrada por comercial. La nomenclatura es legacy pero los triggers SQL ya alinean fechas con esta semántica.