feat: inicializacion de Help Desk segun estandar Telcotronics con bitacora de errores e integracion MCP

This commit is contained in:
2026-10-16 23:29:32 -05:00
commit 0f2708462e
54 changed files with 7590 additions and 0 deletions
+52
View File
@@ -0,0 +1,52 @@
<%- include('../partials/header') %>
<% title = 'Crear Usuario'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Nuevo Usuario</h1>
<a href="/admin/users" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Volver</a>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<form action="/admin/users/create" method="POST">
<div class="mb-3">
<label class="form-label">Nombre</label>
<input type="text" name="nombre" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Contraseña</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Rol</label>
<select name="rol" class="form-select">
<option value="client">Cliente</option>
<option value="agent">Agente</option>
<option value="admin">Admin</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Crear Usuario</button>
</form>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+91
View File
@@ -0,0 +1,91 @@
<%- include('../partials/header') %>
<% title = 'Admin Dashboard'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard Administrativo</h1>
</div>
<div class="row mb-4">
<div class="col-md-3 mb-3">
<div class="card text-white bg-primary">
<div class="card-body text-center">
<h5><i class="fas fa-users"></i> Usuarios</h5>
<h2><%= users.length %></h2>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-white bg-success">
<div class="card-body text-center">
<h5><i class="fas fa-ticket"></i> Tickets</h5>
<h2><%= tickets.length %></h2>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-white bg-info">
<div class="card-body text-center">
<h5><i class="fas fa-building"></i> Departamentos</h5>
<h2><%= departments.length %></h2>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-white bg-warning">
<div class="card-body text-center">
<h5><i class="fas fa-spinner"></i> Abiertos</h5>
<h2><%= stats.find(s => s.status === 'abierto') ? stats.find(s => s.status === 'abierto').total : 0 %></h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-header"><h5>Últimos Tickets</h5></div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm">
<thead><tr><th>#</th><th>Asunto</th><th>Usuario</th><th>Estado</th></tr></thead>
<tbody>
<% tickets.slice(0, 5).forEach(t => { %>
<tr>
<td>#<%= t.id %></td>
<td><%= t.asunto %></td>
<td><%= t.usuario_nombre || '' %></td>
<td><span class="badge bg-<%= t.status === 'abierto' ? 'success' : t.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= t.status %></span></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-header"><h5>Accesos Rápidos</h5></div>
<div class="card-body">
<div class="list-group">
<a href="/admin/users" class="list-group-item list-group-item-action"><i class="fas fa-users"></i> Gestionar Usuarios</a>
<a href="/admin/departments" class="list-group-item list-group-item-action"><i class="fas fa-building"></i> Gestionar Departamentos</a>
<a href="/agent/dashboard" class="list-group-item list-group-item-action"><i class="fas fa-tasks"></i> Ver Todos los Tickets</a>
</div>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+97
View File
@@ -0,0 +1,97 @@
<%- include('../partials/header') %>
<% title = 'Departamentos'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Departamentos</h1>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
<i class="fas fa-plus"></i> Nuevo Departamento
</button>
</div>
<div class="row">
<% departments.forEach(d => { %>
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><%= d.nombre %></h5>
<p class="card-text"><%= d.descripcion || 'Sin descripción' %></p>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal<%= d.id %>">
<i class="fas fa-edit"></i>
</button>
<form action="/admin/departments/delete/<%= d.id %>" method="POST" style="display:inline">
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Eliminar este departamento?')">
<i class="fas fa-trash"></i>
</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="editModal<%= d.id %>">
<div class="modal-dialog">
<div class="modal-content">
<form action="/admin/departments/update/<%= d.id %>" method="POST">
<div class="modal-header">
<h5 class="modal-title">Editar Departamento</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Nombre</label>
<input type="text" name="nombre" class="form-control" value="<%= d.nombre %>" required>
</div>
<div class="mb-3">
<label class="form-label">Descripción</label>
<textarea name="descripcion" class="form-control" rows="3"><%= d.descripcion || '' %></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<% }) %>
</div>
<div class="modal fade" id="createModal">
<div class="modal-dialog">
<div class="modal-content">
<form action="/admin/departments/create" method="POST">
<div class="modal-header">
<h5 class="modal-title">Nuevo Departamento</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Nombre</label>
<input type="text" name="nombre" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Descripción</label>
<textarea name="descripcion" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Crear</button>
</div>
</form>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+67
View File
@@ -0,0 +1,67 @@
<%- include('../partials/header') %>
<% title = 'Usuarios'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Usuarios</h1>
<a href="/admin/users/create" class="btn btn-primary">
<i class="fas fa-plus"></i> Nuevo Usuario
</a>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Email</th>
<th>Rol</th>
<th>Activo</th>
<th>Registro</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<% if (users.length === 0) { %>
<tr><td colspan="7" class="text-center">No hay usuarios</td></tr>
<% } %>
<% users.forEach(u => { %>
<tr>
<td><%= u.id %></td>
<td><%= u.nombre %></td>
<td><%= u.email %></td>
<td><span class="badge bg-<%= u.rol === 'superadmin' ? 'dark' : u.rol === 'admin' ? 'danger' : u.rol === 'agent' ? 'info' : 'secondary' %>"><%= u.rol %></span></td>
<td><span class="badge bg-<%= u.is_active ? 'success' : 'danger' %>"><%= u.is_active ? 'Sí' : 'No' %></span></td>
<td><%= u.created_at %></td>
<td>
<% if (u.rol !== 'superadmin') { %>
<form action="/admin/users/invite/<%= u.id %>" method="POST" style="display:inline">
<button type="submit" class="btn btn-sm btn-info" title="Generar link de invitación">
<i class="fas fa-envelope"></i>
</button>
</form>
<form action="/admin/users/delete/<%= u.id %>" method="POST" style="display:inline">
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Eliminar este usuario?')">
<i class="fas fa-trash"></i>
</button>
</form>
<% } %>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<%- include('../partials/footer') %>
+75
View File
@@ -0,0 +1,75 @@
<%- include('../partials/header') %>
<% title = 'Panel de ' + (user.rol === 'admin' ? 'Administración' : 'Agente'); %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Panel de <%= user.rol === 'admin' ? 'Administración' : 'Agente' %></h1>
</div>
<div class="row mb-4">
<% stats.forEach(s => { %>
<% const color = s.status === 'abierto' ? 'success' : s.status === 'en_progreso' ? 'primary' : 'secondary' %>
<div class="col-md-4 mb-3">
<div class="card border-<%= color %> text-<%= color %>">
<div class="card-body text-center">
<h5 class="card-title"><%= s.status %></h5>
<h2><%= s.total %></h2>
</div>
</div>
</div>
<% }) %>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Usuario</th>
<th>Asunto</th>
<th>Departamento</th>
<th>Prioridad</th>
<th>Estado</th>
<th>Asignado</th>
<th>Fecha</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<% if (tickets.length === 0) { %>
<tr><td colspan="9" class="text-center">No hay tickets</td></tr>
<% } %>
<% tickets.forEach(t => { %>
<tr>
<td>#<%= t.id %></td>
<td><%= t.usuario_nombre || '' %></td>
<td><%= t.asunto %></td>
<td><%= t.departamento_nombre || 'Sin depto' %></td>
<td>
<span class="badge bg-<%= t.prioridad === 'alta' ? 'danger' : t.prioridad === 'critica' ? 'dark' : t.prioridad === 'media' ? 'warning' : 'info' %>"><%= t.prioridad %></span>
</td>
<td>
<span class="badge bg-<%= t.status === 'abierto' ? 'success' : t.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= t.status %></span>
</td>
<td><%= t.asignado_nombre || 'Sin asignar' %></td>
<td><%= t.created_at %></td>
<td>
<a href="/agent/ticket/<%= t.id %>" class="btn btn-sm btn-info"><i class="fas fa-eye"></i></a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<%- include('../partials/footer') %>
+102
View File
@@ -0,0 +1,102 @@
<%- include('../partials/header') %>
<% title = 'Ticket #' + ticket.id; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Ticket #<%= ticket.id %>: <%= ticket.asunto %></h1>
<a href="/agent/dashboard" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Volver</a>
</div>
<div class="row">
<div class="col-md-3">
<div class="card mb-3">
<div class="card-header"><h6 class="mb-0">Información</h6></div>
<div class="card-body">
<p><strong>Estado:</strong> <span class="badge bg-<%= ticket.status === 'abierto' ? 'success' : ticket.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= ticket.status %></span></p>
<p><strong>Prioridad:</strong> <span class="badge bg-<%= ticket.prioridad === 'alta' ? 'danger' : ticket.prioridad === 'critica' ? 'dark' : ticket.prioridad === 'media' ? 'warning' : 'info' %>"><%= ticket.prioridad %></span></p>
<p><strong>Departamento:</strong> <%= ticket.departamento_nombre || 'Sin departamento' %></p>
<p><strong>Cliente:</strong> <%= ticket.usuario_nombre %> (<%= ticket.usuario_email %>)</p>
<p><strong>Asignado:</strong> <%= ticket.asignado_nombre || 'Sin asignar' %></p>
<p><strong>Creado:</strong> <%= ticket.created_at %></p>
</div>
</div>
<div class="card mb-3">
<div class="card-header"><h6 class="mb-0">Acciones</h6></div>
<div class="card-body">
<form action="/agent/ticket/<%= ticket.id %>/status" method="POST" class="mb-2">
<label class="form-label">Cambiar Estado</label>
<select name="status" class="form-select mb-2">
<option value="abierto" <%= ticket.status === 'abierto' ? 'selected' : '' %>>Abierto</option>
<option value="en_progreso" <%= ticket.status === 'en_progreso' ? 'selected' : '' %>>En Progreso</option>
<option value="cerrado" <%= ticket.status === 'cerrado' ? 'selected' : '' %>>Cerrado</option>
</select>
<button type="submit" class="btn btn-primary btn-sm w-100">Actualizar</button>
</form>
<% if (user.rol === 'admin') { %>
<form action="/agent/ticket/<%= ticket.id %>/assign" method="POST">
<label class="form-label">Asignar a</label>
<select name="assigned_to" class="form-select mb-2">
<option value="">Sin asignar</option>
<% agents.forEach(a => { %>
<option value="<%= a.id %>" <%= ticket.assigned_to === a.id ? 'selected' : '' %>><%= a.nombre %></option>
<% }) %>
</select>
<button type="submit" class="btn btn-info btn-sm w-100">Asignar</button>
</form>
<% } %>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card mb-3">
<div class="card-header">
<strong><%= ticket.usuario_nombre %></strong> <span class="text-muted">- <%= ticket.created_at %></span>
</div>
<div class="card-body">
<p><%= ticket.mensaje %></p>
</div>
</div>
<h5>Respuestas</h5>
<% if (respuestas.length === 0) { %>
<p class="text-muted">No hay respuestas aún</p>
<% } %>
<% respuestas.forEach(r => { %>
<div class="card mb-2 <%= r.usuario_rol === 'agent' || r.usuario_rol === 'admin' ? 'border-primary' : '' %>">
<div class="card-header">
<strong><%= r.usuario_nombre %></strong>
<span class="badge bg-<%= r.usuario_rol === 'admin' ? 'danger' : r.usuario_rol === 'agent' ? 'info' : 'secondary' %> ms-1"><%= r.usuario_rol %></span>
<span class="text-muted float-end"><%= r.created_at %></span>
</div>
<div class="card-body"><p class="mb-0"><%= r.mensaje %></p></div>
</div>
<% }) %>
<div class="card mt-3">
<div class="card-header"><strong>Responder</strong></div>
<div class="card-body">
<form action="/agent/ticket/<%= ticket.id %>/respond" method="POST">
<div class="mb-3">
<textarea name="mensaje" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary"><i class="fas fa-reply"></i> Responder</button>
</form>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+43
View File
@@ -0,0 +1,43 @@
<%- include('../partials/header') %>
<% title = 'Aceptar Invitación'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="row justify-content-center mt-5">
<div class="col-md-5">
<div class="card shadow">
<div class="card-header bg-info text-white text-center">
<h4><i class="fas fa-envelope"></i> Aceptar Invitación</h4>
</div>
<div class="card-body">
<p class="text-muted">Has sido invitado con el email: <strong><%= email %></strong></p>
<form action="/invite/<%= token %>" method="POST">
<div class="mb-3">
<label class="form-label">Nombre Completo</label>
<input type="text" name="nombre" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Contraseña</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Confirmar Contraseña</label>
<input type="password" name="confirm_password" class="form-control" required>
</div>
<button type="submit" class="btn btn-info w-100">Activar Cuenta</button>
</form>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+49
View File
@@ -0,0 +1,49 @@
<%- include('../partials/header') %>
<% title = 'Iniciar Sesión'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3">
<%= msg %>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3">
<%= msg %>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<% }) %>
<% } %>
<div class="row justify-content-center mt-5">
<div class="col-md-5">
<div class="card shadow">
<div class="card-header bg-primary text-white text-center">
<h4><i class="fas fa-headset"></i> Help Desk</h4>
<span>Iniciar Sesión</span>
</div>
<div class="card-body">
<form action="/login" method="POST">
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Contraseña</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary w-100">Ingresar</button>
</form>
<div class="text-center mt-3">
<a href="/register">¿No tienes cuenta? Regístrate</a>
</div>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+55
View File
@@ -0,0 +1,55 @@
<%- include('../partials/header') %>
<% title = 'Registro'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="row justify-content-center mt-5">
<div class="col-md-5">
<div class="card shadow">
<div class="card-header bg-success text-white text-center">
<h4><i class="fas fa-user-plus"></i> Crear Cuenta</h4>
<small>Registra tu empresa</small>
</div>
<div class="card-body">
<form action="/register" method="POST">
<div class="mb-3">
<label class="form-label">Nombre de la Empresa</label>
<input type="text" name="company_name" class="form-control" placeholder="Mi Empresa" required>
</div>
<hr>
<div class="mb-3">
<label class="form-label">Tu Nombre</label>
<input type="text" name="nombre" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Contraseña</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Confirmar Contraseña</label>
<input type="password" name="confirm_password" class="form-control" required>
</div>
<button type="submit" class="btn btn-success w-100">Crear Empresa</button>
</form>
<div class="text-center mt-3">
<a href="/login">¿Ya tienes cuenta? Inicia sesión</a>
</div>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+68
View File
@@ -0,0 +1,68 @@
<%- include('../partials/header') %>
<% title = 'Mis Tickets'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Mis Tickets</h1>
<a href="/client/new-ticket" class="btn btn-primary">
<i class="fas fa-plus"></i> Nuevo Ticket
</a>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Asunto</th>
<th>Departamento</th>
<th>Prioridad</th>
<th>Estado</th>
<th>Asignado</th>
<th>Fecha</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<% if (tickets.length === 0) { %>
<tr><td colspan="8" class="text-center">No tienes tickets aún</td></tr>
<% } %>
<% tickets.forEach(ticket => { %>
<tr>
<td>#<%= ticket.id %></td>
<td><%= ticket.asunto %></td>
<td><%= ticket.departamento_nombre || 'Sin departamento' %></td>
<td>
<span class="badge bg-<%= ticket.prioridad === 'alta' ? 'danger' : ticket.prioridad === 'critica' ? 'dark' : ticket.prioridad === 'media' ? 'warning' : 'info' %>">
<%= ticket.prioridad %>
</span>
</td>
<td>
<span class="badge bg-<%= ticket.status === 'abierto' ? 'success' : ticket.status === 'en_progreso' ? 'primary' : 'secondary' %>">
<%= ticket.status %>
</span>
</td>
<td><%= ticket.asignado_nombre || 'Sin asignar' %></td>
<td><%= ticket.created_at %></td>
<td>
<a href="/client/ticket/<%= ticket.id %>" class="btn btn-sm btn-info">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<%- include('../partials/footer') %>
+59
View File
@@ -0,0 +1,59 @@
<%- include('../partials/header') %>
<% title = 'Nuevo Ticket'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Nuevo Ticket</h1>
</div>
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<form action="/client/new-ticket" method="POST">
<div class="mb-3">
<label class="form-label">Asunto</label>
<input type="text" name="asunto" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Departamento</label>
<select name="department_id" class="form-select">
<option value="">Sin departamento</option>
<% departments.forEach(dept => { %>
<option value="<%= dept.id %>"><%= dept.nombre %></option>
<% }) %>
</select>
</div>
<div class="mb-3">
<label class="form-label">Prioridad</label>
<select name="prioridad" class="form-select">
<option value="baja">Baja</option>
<option value="media" selected>Media</option>
<option value="alta">Alta</option>
<option value="critica">Crítica</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Mensaje</label>
<textarea name="mensaje" class="form-control" rows="6" required></textarea>
</div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-paper-plane"></i> Enviar Ticket
</button>
</form>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+88
View File
@@ -0,0 +1,88 @@
<%- include('../partials/header') %>
<% title = 'Ticket #' + ticket.id; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Ticket #<%= ticket.id %>: <%= ticket.asunto %></h1>
<div>
<form action="/client/ticket/<%= ticket.id %>/close" method="POST" style="display:inline">
<button type="submit" class="btn btn-warning" onclick="return confirm('¿Cerrar este ticket?')">
<i class="fas fa-times"></i> Cerrar Ticket
</button>
</form>
<a href="/client/dashboard" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> Volver
</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="card mb-3">
<div class="card-header"><h6 class="mb-0">Información</h6></div>
<div class="card-body">
<p><strong>Estado:</strong>
<span class="badge bg-<%= ticket.status === 'abierto' ? 'success' : ticket.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= ticket.status %></span>
</p>
<p><strong>Prioridad:</strong>
<span class="badge bg-<%= ticket.prioridad === 'alta' ? 'danger' : ticket.prioridad === 'critica' ? 'dark' : ticket.prioridad === 'media' ? 'warning' : 'info' %>"><%= ticket.prioridad %></span>
</p>
<p><strong>Departamento:</strong> <%= ticket.departamento_nombre || 'Sin departamento' %></p>
<p><strong>Asignado:</strong> <%= ticket.asignado_nombre || 'Sin asignar' %></p>
<p><strong>Creado:</strong> <%= ticket.created_at %></p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card mb-3">
<div class="card-header">
<strong><%= ticket.usuario_nombre %></strong>
<span class="text-muted">- <%= ticket.created_at %></span>
</div>
<div class="card-body">
<p><%= ticket.mensaje %></p>
</div>
</div>
<h5>Respuestas</h5>
<% if (respuestas.length === 0) { %>
<p class="text-muted">No hay respuestas aún</p>
<% } %>
<% respuestas.forEach(r => { %>
<div class="card mb-2 <%= r.usuario_rol === 'agent' || r.usuario_rol === 'admin' ? 'border-primary' : '' %>">
<div class="card-header">
<strong><%= r.usuario_nombre %></strong>
<span class="badge bg-<%= r.usuario_rol === 'admin' ? 'danger' : r.usuario_rol === 'agent' ? 'info' : 'secondary' %> ms-1"><%= r.usuario_rol %></span>
<span class="text-muted float-end"><%= r.created_at %></span>
</div>
<div class="card-body">
<p class="mb-0"><%= r.mensaje %></p>
</div>
</div>
<% }) %>
<div class="card mt-3">
<div class="card-header"><strong>Responder</strong></div>
<div class="card-body">
<form action="/client/ticket/<%= ticket.id %>/respond" method="POST">
<div class="mb-3">
<textarea name="mensaje" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary"><i class="fas fa-reply"></i> Responder</button>
</form>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+56
View File
@@ -0,0 +1,56 @@
<%- include('../partials/header') %>
<% title = 'Configuración'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Configuración de la Empresa</h1>
</div>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header"><h5>Información</h5></div>
<div class="card-body">
<form action="/company/update" method="POST">
<div class="mb-3">
<label class="form-label">Nombre</label>
<input type="text" name="name" class="form-control" value="<%= company.name %>">
</div>
<button type="submit" class="btn btn-primary">Guardar</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header"><h5>Plan y Límites</h5></div>
<div class="card-body">
<p><strong>Plan:</strong> <span class="badge bg-<%= company.plan === 'enterprise' ? 'danger' : company.plan === 'pro' ? 'warning' : 'secondary' %>"><%= company.plan %></span></p>
<p><strong>Usuarios:</strong> <%= userCount %> / <%= company.max_users %></p>
<p><strong>Tickets:</strong> <%= ticketCount %> / <%= company.max_tickets %></p>
<div class="progress mb-2">
<div class="progress-bar" style="width: <%= Math.min(100, (userCount / company.max_users) * 100) %>%">
<%= Math.round((userCount / company.max_users) * 100) %>% usuarios
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width: <%= Math.min(100, (ticketCount / company.max_tickets) * 100) %>%">
<%= Math.round((ticketCount / company.max_tickets) * 100) %>% tickets
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('../partials/footer') %>
+49
View File
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help Desk - <%- title || 'Sistema de Tickets' %></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<%- include('../partials/navbar') %>
<div class="container-fluid">
<div class="row">
<% if (user) { %>
<%- include('../partials/sidebar') %>
<main class="col-md-9 ms-sm-auto col-lg-10 px-4">
<% } else { %>
<main class="col-12 px-4">
<% } %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3">
<%= msg %>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3">
<%= msg %>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<% }) %>
<% } %>
<%- body %>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
+7
View File
@@ -0,0 +1,7 @@
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
+20
View File
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help Desk - <%= typeof title !== 'undefined' ? title : 'Sistema de Tickets' %></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<%- include('navbar') %>
<div class="container-fluid">
<div class="row">
<% if (user) { %>
<%- include('sidebar') %>
<main class="col-md-9 ms-sm-auto col-lg-10 px-4">
<% } else { %>
<main class="col-12 px-4">
<% } %>
+18
View File
@@ -0,0 +1,18 @@
<nav class="navbar navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<i class="fas fa-headset"></i> Help Desk
</a>
<% if (user) { %>
<div class="d-flex align-items-center">
<span class="text-light me-3">
<i class="fas fa-user"></i> <%= user.nombre %>
<span class="badge bg-info ms-1"><%= user.rol %></span>
</span>
<a href="/logout" class="btn btn-outline-light btn-sm">
<i class="fas fa-sign-out-alt"></i> Salir
</a>
</div>
<% } %>
</div>
</nav>
+70
View File
@@ -0,0 +1,70 @@
<nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky pt-3">
<% if (company) { %>
<div class="px-3 mb-3">
<small class="text-muted"><%= company.name %></small>
<span class="badge bg-info"><%= company.plan %></span>
</div>
<% } %>
<ul class="nav flex-column">
<% if (user.rol === 'superadmin') { %>
<li class="nav-item">
<a class="nav-link" href="/saas/companies">
<i class="fas fa-building"></i> Empresas
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/admin/dashboard">
<i class="fas fa-tachometer-alt"></i> Mi Empresa
</a>
</li>
<% } %>
<li class="nav-item">
<a class="nav-link" href="/<%= ['superadmin','admin'].includes(user.rol) ? 'admin' : user.rol %>/dashboard">
<i class="fas fa-tachometer-alt"></i> Dashboard
</a>
</li>
<% if (user.rol === 'client') { %>
<li class="nav-item">
<a class="nav-link" href="/client/new-ticket">
<i class="fas fa-plus-circle"></i> Nuevo Ticket
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/client/dashboard">
<i class="fas fa-tickets"></i> Mis Tickets
</a>
</li>
<% } %>
<% if (['superadmin', 'admin', 'agent'].includes(user.rol)) { %>
<li class="nav-item">
<a class="nav-link" href="/agent/dashboard">
<i class="fas fa-tasks"></i> Tickets
</a>
</li>
<% } %>
<% if (['superadmin', 'admin'].includes(user.rol)) { %>
<li class="nav-item">
<a class="nav-link" href="/admin/users">
<i class="fas fa-users"></i> Usuarios
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/admin/departments">
<i class="fas fa-building"></i> Departamentos
</a>
</li>
<% } %>
<li class="nav-item">
<a class="nav-link" href="/company">
<i class="fas fa-cog"></i> Configuración
</a>
</li>
</ul>
</div>
</nav>
+141
View File
@@ -0,0 +1,141 @@
<%- include('../partials/header') %>
<% title = 'Empresas - SaaS Admin'; %>
<% if (success_msg && success_msg.length > 0) { %>
<% success_msg.forEach(msg => { %>
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
<% error_msg.forEach(msg => { %>
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<% }) %>
<% } %>
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Panel SaaS - Empresas</h1>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
<i class="fas fa-plus"></i> Nueva Empresa
</button>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Slug</th>
<th>Plan</th>
<th>Usuarios</th>
<th>Tickets</th>
<th>Límites</th>
<th>Activo</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<% companies.forEach(c => { %>
<tr>
<td><%= c.id %></td>
<td><%= c.name %></td>
<td><code><%= c.slug %></code></td>
<td><span class="badge bg-<%= c.plan === 'enterprise' ? 'danger' : c.plan === 'pro' ? 'warning' : 'secondary' %>"><%= c.plan %></span></td>
<td><%= c.userCount || 0 %></td>
<td><%= c.ticketCount || 0 %></td>
<td><%= c.max_users %> users / <%= c.max_tickets %> tickets</td>
<td>
<span class="badge bg-<%= c.is_active ? 'success' : 'danger' %>">
<%= c.is_active ? 'Sí' : 'No' %>
</span>
</td>
<td>
<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal<%= c.id %>">
<i class="fas fa-edit"></i>
</button>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<div class="modal fade" id="createModal">
<div class="modal-dialog">
<div class="modal-content">
<form action="/saas/companies/create" method="POST">
<div class="modal-header">
<h5 class="modal-title">Nueva Empresa</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Nombre</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Slug (identificador único)</label>
<input type="text" name="slug" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Plan</label>
<select name="plan" class="form-select">
<option value="free">Free</option>
<option value="pro">Pro</option>
<option value="enterprise">Enterprise</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Crear</button>
</div>
</form>
</div>
</div>
</div>
<% companies.forEach(c => { %>
<div class="modal fade" id="editModal<%= c.id %>">
<div class="modal-dialog">
<div class="modal-content">
<form action="/saas/companies/update/<%= c.id %>" method="POST">
<div class="modal-header">
<h5 class="modal-title">Editar <%= c.name %></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Nombre</label>
<input type="text" name="name" class="form-control" value="<%= c.name %>">
</div>
<div class="mb-3">
<label class="form-label">Plan</label>
<select name="plan" class="form-select">
<option value="free" <%= c.plan === 'free' ? 'selected' : '' %>>Free</option>
<option value="pro" <%= c.plan === 'pro' ? 'selected' : '' %>>Pro</option>
<option value="enterprise" <%= c.plan === 'enterprise' ? 'selected' : '' %>>Enterprise</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Máx. Usuarios</label>
<input type="number" name="max_users" class="form-control" value="<%= c.max_users %>">
</div>
<div class="mb-3">
<label class="form-label">Máx. Tickets</label>
<input type="number" name="max_tickets" class="form-control" value="<%= c.max_tickets %>">
</div>
<div class="form-check mb-3">
<input type="checkbox" name="is_active" class="form-check-input" value="1" <%= c.is_active ? 'checked' : '' %>>
<label class="form-check-label">Activo</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<% }) %>
<%- include('../partials/footer') %>