feat(ui): rediseño integral de UI/UX de la aplicación (navbar, sidebar offcanvas, KPIs, tablas y chat de tickets)
This commit is contained in:
+525
-81
@@ -1,58 +1,533 @@
|
|||||||
body {
|
/* ==============================================================================
|
||||||
font-size: .875rem;
|
Help Desk & FSM — Sistema de Diseño UI/UX Ecosistema Telcotronics
|
||||||
background-color: #f8f9fa;
|
============================================================================== */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--app-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
|
||||||
|
--primary-gradient: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
|
||||||
|
--indigo-gradient: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
|
||||||
|
--card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
|
||||||
|
--card-hover-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
body {
|
||||||
|
font-family: var(--app-font);
|
||||||
|
font-size: 0.885rem;
|
||||||
|
color: #1e293b;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==============================================================================
|
||||||
|
Topbar / Navbar Principal
|
||||||
|
============================================================================== */
|
||||||
|
.app-topbar {
|
||||||
|
background: linear-gradient(90deg, #070e20 0%, #0f172a 100%) !important;
|
||||||
|
height: 64px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
z-index: 1030;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo-glow {
|
||||||
|
filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.45));
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-text {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: #ffffff;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-subtext {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #38bdf8;
|
||||||
|
background: rgba(56, 189, 248, 0.12);
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.1rem 0.35rem;
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-nav-pill {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-plan-badge {
|
||||||
|
background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-profile-badge {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 0.25rem 0.75rem 0.25rem 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar-initials {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--primary-gradient);
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar-initials-sm {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #e2e8f0;
|
||||||
|
color: #334155;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar-img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-nav-name {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-nav-role {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-role-superadmin { color: #f59e0b; }
|
||||||
|
.badge-role-admin { color: #f87171; }
|
||||||
|
.badge-role-agent { color: #818cf8; }
|
||||||
|
.badge-role-client { color: #38bdf8; }
|
||||||
|
|
||||||
|
.btn-logout-glass {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||||
|
color: #e2e8f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-logout-glass:hover {
|
||||||
|
background: rgba(239, 68, 68, 0.2);
|
||||||
|
border-color: rgba(239, 68, 68, 0.4);
|
||||||
|
color: #fca5a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon-glass {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.3rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==============================================================================
|
||||||
|
Sidebar / Menú Lateral
|
||||||
|
============================================================================== */
|
||||||
|
.app-sidebar {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-right: 1px solid #e2e8f0;
|
||||||
|
z-index: 1020;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.app-sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 64px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 100;
|
overflow-y: auto;
|
||||||
padding: 56px 0 0;
|
padding-top: 1rem;
|
||||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link:hover {
|
|
||||||
background-color: #e9ecef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link i {
|
|
||||||
margin-right: 8px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table th {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
font-size: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand i {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.sidebar {
|
|
||||||
position: static;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin-top: 15px;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-company-card {
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-status-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-heading {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #94a3b8;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 0.4rem 0.75rem 0.2rem;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav .nav-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #475569;
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon-wrapper {
|
||||||
|
width: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #64748b;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav .nav-link:hover {
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
color: #0284c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav .nav-link:hover .nav-icon-wrapper {
|
||||||
|
transform: scale(1.1);
|
||||||
|
color: #0284c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav .nav-link.active {
|
||||||
|
background: var(--primary-gradient);
|
||||||
|
color: #ffffff !important;
|
||||||
|
font-weight: 600;
|
||||||
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav .nav-link.active .nav-icon-wrapper {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-bot-card {
|
||||||
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||||
|
border-color: #bae6fd !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bot-sidebar-avatar {
|
||||||
|
animation: floatBot 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==============================================================================
|
||||||
|
Tarjetas KPI & Métricas
|
||||||
|
============================================================================== */
|
||||||
|
.kpi-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
padding: 1.25rem 1.15rem;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: var(--card-hover-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-icon-box {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-value {
|
||||||
|
font-size: 1.85rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #0f172a;
|
||||||
|
line-height: 1.1;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-label {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #64748b;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-subtext {
|
||||||
|
font-size: 0.74rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==============================================================================
|
||||||
|
Contenedor de Tablas y Tarjetas Modernas (app-card)
|
||||||
|
============================================================================== */
|
||||||
|
.app-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card-header {
|
||||||
|
background: #ffffff;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-table thead th {
|
||||||
|
background-color: #f8fafc !important;
|
||||||
|
color: #64748b !important;
|
||||||
|
font-size: 0.72rem !important;
|
||||||
|
text-transform: uppercase !important;
|
||||||
|
letter-spacing: 0.06em !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
border-top: none !important;
|
||||||
|
border-bottom: 1px solid #e2e8f0 !important;
|
||||||
|
padding: 0.85rem 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-table tbody td {
|
||||||
|
vertical-align: middle !important;
|
||||||
|
padding: 0.85rem 1rem !important;
|
||||||
|
border-bottom: 1px solid #f1f5f9 !important;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-table tbody tr {
|
||||||
|
transition: background-color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-table tbody tr:hover {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action-view {
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #0284c7;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action-view:hover {
|
||||||
|
background: #e0f2fe;
|
||||||
|
border-color: #38bdf8;
|
||||||
|
color: #0369a1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-filter {
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-filter:hover {
|
||||||
|
background: #e2e8f0;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-filter.active {
|
||||||
|
background: #0284c7;
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: #0284c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot-sm {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input-group .form-control {
|
||||||
|
border-color: #cbd5e1;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input-group .input-group-text {
|
||||||
|
border-color: #cbd5e1;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==============================================================================
|
||||||
|
Píldoras de Estado y Prioridad
|
||||||
|
============================================================================== */
|
||||||
|
.status-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 0.22rem 0.65rem;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-abierto {
|
||||||
|
background-color: #ecfdf5;
|
||||||
|
color: #059669;
|
||||||
|
border: 1px solid #a7f3d0;
|
||||||
|
}
|
||||||
|
.status-abierto .status-dot {
|
||||||
|
background-color: #10b981;
|
||||||
|
box-shadow: 0 0 6px #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-en-progreso {
|
||||||
|
background-color: #eff6ff;
|
||||||
|
color: #2563eb;
|
||||||
|
border: 1px solid #bfdbfe;
|
||||||
|
}
|
||||||
|
.status-en-progreso .status-dot {
|
||||||
|
background-color: #3b82f6;
|
||||||
|
box-shadow: 0 0 6px #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-cerrado {
|
||||||
|
background-color: #f1f5f9;
|
||||||
|
color: #64748b;
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
}
|
||||||
|
.status-cerrado .status-dot {
|
||||||
|
background-color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-critica {
|
||||||
|
background-color: #fef2f2;
|
||||||
|
color: #dc2626;
|
||||||
|
border: 1px solid #fecaca;
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-alta {
|
||||||
|
background-color: #fffbeb;
|
||||||
|
color: #d97706;
|
||||||
|
border: 1px solid #fde68a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-media {
|
||||||
|
background-color: #f0f9ff;
|
||||||
|
color: #0284c7;
|
||||||
|
border: 1px solid #bae6fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-baja {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
color: #64748b;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==============================================================================
|
||||||
|
Hilo de Conversación y Respuestas
|
||||||
|
============================================================================== */
|
||||||
|
.ticket-message-card {
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
background: #ffffff;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-message-card.message-staff {
|
||||||
|
border-left: 4px solid #4f46e5;
|
||||||
|
background: #fbfbfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-message-card.message-client {
|
||||||
|
border-left: 4px solid #0284c7;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-card-header {
|
||||||
|
background: rgba(248, 250, 252, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta {
|
||||||
|
background: var(--primary-gradient);
|
||||||
|
border: none;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.6rem 1.15rem;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta:hover {
|
||||||
|
background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
|
||||||
|
box-shadow: 0 8px 18px -4px rgba(37, 99, 235, 0.4);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==============================================================================
|
/* ==============================================================================
|
||||||
@@ -229,29 +704,6 @@ main {
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-account-chip {
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
background: #f8fafc;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 0.4rem 0.75rem;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #475569;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-account-chip:hover {
|
|
||||||
background: #e0f2fe;
|
|
||||||
border-color: #bae6fd;
|
|
||||||
color: #0369a1;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==============================================================================
|
|
||||||
Segmented Tabs & Social Buttons for Multi-Channel Login
|
|
||||||
============================================================================== */
|
|
||||||
.login-segmented-tabs {
|
.login-segmented-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #f1f5f9;
|
background: #f1f5f9;
|
||||||
@@ -379,7 +831,7 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ==============================================================================
|
/* ==============================================================================
|
||||||
Mobile & Responsive Optimization for Login Page
|
Mobile & Responsive Optimization for Login & App
|
||||||
============================================================================== */
|
============================================================================== */
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
@media (max-width: 991.98px) {
|
||||||
@@ -515,11 +967,6 @@ main {
|
|||||||
font-size: 0.84rem;
|
font-size: 0.84rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-account-chip {
|
|
||||||
padding: 0.35rem 0.55rem;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-divider {
|
.login-divider {
|
||||||
margin: 1.15rem 0 0.85rem;
|
margin: 1.15rem 0 0.85rem;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
@@ -542,6 +989,3 @@ main {
|
|||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+100
-23
@@ -1,52 +1,129 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Crear Usuario'; %>
|
<% title = 'Crear Nuevo Usuario'; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Nuevo Usuario</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
<a href="/admin/users" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Volver</a>
|
<div>
|
||||||
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Alta de Usuario</h1>
|
||||||
|
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem;">
|
||||||
|
Administración
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Registra un nuevo miembro del equipo técnico o asigna acceso a clientes.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/admin/users" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3 shadow-sm">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
<span>Volver a Usuarios</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row g-4">
|
||||||
<div class="col-md-6">
|
<div class="col-lg-7">
|
||||||
<div class="card">
|
<div class="app-card">
|
||||||
<div class="card-body">
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-user-plus text-primary"></i>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Datos de la Cuenta</h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
<form action="/admin/users/create" method="POST">
|
<form action="/admin/users/create" method="POST">
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Nombre</label>
|
<label class="form-label text-dark fw-semibold small">Nombre Completo <span class="text-danger">*</span></label>
|
||||||
<input type="text" name="nombre" class="form-control" required>
|
<div class="input-group">
|
||||||
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-user"></i></span>
|
||||||
|
<input type="text" name="nombre" class="form-control border-start-0" placeholder="Ej: Carlos Mendoza" required autocomplete="name">
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Email</label>
|
|
||||||
<input type="email" name="email" class="form-control" required>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Contraseña</label>
|
<label class="form-label text-dark fw-semibold small">Correo Electrónico <span class="text-danger">*</span></label>
|
||||||
<input type="password" name="password" class="form-control" required>
|
<div class="input-group">
|
||||||
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-envelope"></i></span>
|
||||||
|
<input type="email" name="email" class="form-control border-start-0" placeholder="carlos@empresa.com" required autocomplete="email">
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Rol</label>
|
<label class="form-label text-dark fw-semibold small">Contraseña Temporal <span class="text-danger">*</span></label>
|
||||||
<select name="rol" class="form-select">
|
<div class="input-group">
|
||||||
<option value="client">Cliente</option>
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-lock"></i></span>
|
||||||
<option value="agent">Agente</option>
|
<input type="password" name="password" class="form-control border-start-0" placeholder="••••••••" required autocomplete="new-password">
|
||||||
<option value="admin">Admin</option>
|
</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.72rem;">El usuario podrá modificarla posteriormente.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="form-label text-dark fw-semibold small">Rol y Permisos</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-user-shield"></i></span>
|
||||||
|
<select name="rol" class="form-select border-start-0">
|
||||||
|
<option value="client">Cliente — Crea y consulta tickets propios</option>
|
||||||
|
<option value="agent" selected>Agente — Atiende tickets y despacha visitas FSM</option>
|
||||||
|
<option value="admin">Administrador — Gestión de usuarios y departamentos</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Crear Usuario</button>
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||||
|
<a href="/admin/users" class="btn btn-light border text-muted btn-sm px-3">
|
||||||
|
Cancelar
|
||||||
|
</a>
|
||||||
|
<button type="submit" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||||
|
<i class="fas fa-save"></i>
|
||||||
|
<span>Crear Usuario</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<div class="app-card p-3.5 mb-3 bg-light border">
|
||||||
|
<h6 class="fw-bold text-dark mb-2" style="font-size: 0.85rem;">
|
||||||
|
<i class="fas fa-shield-alt text-primary me-1.5"></i> Jerarquía de Roles
|
||||||
|
</h6>
|
||||||
|
<div class="d-flex flex-column gap-2 small text-muted" style="font-size: 0.78rem;">
|
||||||
|
<div>
|
||||||
|
<strong class="text-dark">Administrador:</strong> Control total del tenant, métricas, gestión de departamentos y personal técnico.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong class="text-dark">Agente Técnico:</strong> Bandeja de tickets, diagnóstico, asignación y programación de visitas presenciales FSM hacia el Hub.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong class="text-dark">Cliente:</strong> Interfaz exclusiva para apertura, seguimiento e interacción con sus tickets.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%- include('../partials/footer') %>
|
<%- include('../partials/footer') %>
|
||||||
|
|||||||
+164
-49
@@ -1,71 +1,164 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Admin Dashboard'; %>
|
<% title = 'Panel de Administración'; %>
|
||||||
|
|
||||||
|
<%
|
||||||
|
const abiertosCount = stats.find(s => s.status === 'abierto') ? stats.find(s => s.status === 'abierto').total : 0;
|
||||||
|
const progresoCount = stats.find(s => s.status === 'en_progreso') ? stats.find(s => s.status === 'en_progreso').total : 0;
|
||||||
|
const cerradosCount = stats.find(s => s.status === 'cerrado') ? stats.find(s => s.status === 'cerrado').total : 0;
|
||||||
|
%>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Dashboard Administrativo</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
|
<div>
|
||||||
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Dashboard Administrativo</h1>
|
||||||
|
<span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem;">
|
||||||
|
Administración Tenant
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Visión global de rendimiento, gestión de agentes, tickets y catálogo de departamentos.</p>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<a href="/admin/users/create" class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3 shadow-sm">
|
||||||
|
<i class="fas fa-user-plus"></i>
|
||||||
|
<span>Nuevo Usuario</span>
|
||||||
|
</a>
|
||||||
|
<a href="/agent/dashboard" class="btn btn-primary btn-cta btn-sm d-inline-flex align-items-center gap-1.5 shadow-sm">
|
||||||
|
<i class="fas fa-inbox"></i>
|
||||||
|
<span>Ver Bandeja</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mb-4">
|
<!-- Tarjetas KPI -->
|
||||||
<div class="col-md-3 mb-3">
|
<div class="row g-3 mb-4">
|
||||||
<div class="card text-white bg-primary">
|
<div class="col-6 col-lg-3">
|
||||||
<div class="card-body text-center">
|
<div class="kpi-card">
|
||||||
<h5><i class="fas fa-users"></i> Usuarios</h5>
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
<h2><%= users.length %></h2>
|
<span class="kpi-label">Equipo / Usuarios</span>
|
||||||
|
<div class="kpi-icon-box bg-primary-subtle text-primary">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="kpi-value"><%= users.length %></div>
|
||||||
<div class="col-md-3 mb-3">
|
<div class="kpi-subtext text-muted">Cuentas activas en la empresa</div>
|
||||||
<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>
|
||||||
</div>
|
<div class="col-6 col-lg-3">
|
||||||
<div class="col-md-3 mb-3">
|
<div class="kpi-card">
|
||||||
<div class="card text-white bg-info">
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
<div class="card-body text-center">
|
<span class="kpi-label">Total Tickets</span>
|
||||||
<h5><i class="fas fa-building"></i> Departamentos</h5>
|
<div class="kpi-icon-box bg-info-subtle text-info">
|
||||||
<h2><%= departments.length %></h2>
|
<i class="fas fa-ticket-alt"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="kpi-value text-info"><%= tickets.length %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Casos registrados</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 class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">Departamentos</span>
|
||||||
|
<div class="kpi-icon-box bg-purple-subtle text-purple" style="color: #7c3aed; background: rgba(124, 58, 237, 0.1);">
|
||||||
|
<i class="fas fa-network-wired"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value" style="color: #7c3aed;"><%= departments.length %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Áreas de atención configuradas</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">Tickets Pendientes</span>
|
||||||
|
<div class="kpi-icon-box bg-warning-subtle text-warning">
|
||||||
|
<i class="fas fa-hourglass-half"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value text-warning"><%= abiertosCount %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Abiertos sin resolución</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<!-- Grid de Paneles: Últimos Tickets & Departamentos -->
|
||||||
<div class="col-md-6 mb-3">
|
<div class="row g-4">
|
||||||
<div class="card">
|
<!-- Columna Izquierda: Últimos Tickets -->
|
||||||
<div class="card-header"><h5>Últimos Tickets</h5></div>
|
<div class="col-lg-7">
|
||||||
<div class="card-body">
|
<div class="app-card h-100">
|
||||||
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-history text-primary"></i>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.92rem;">Últimas Incidencias Registradas</h5>
|
||||||
|
</div>
|
||||||
|
<a href="/agent/dashboard" class="small text-decoration-none text-primary fw-semibold" style="font-size: 0.78rem;">
|
||||||
|
Ver todos <i class="fas fa-arrow-right ms-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-sm">
|
<table class="table app-table mb-0">
|
||||||
<thead><tr><th>#</th><th>Asunto</th><th>Usuario</th><th>Estado</th></tr></thead>
|
<thead>
|
||||||
<tbody>
|
|
||||||
<% tickets.slice(0, 5).forEach(t => { %>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>#<%= t.id %></td>
|
<th style="width: 70px;">ID</th>
|
||||||
<td><%= t.asunto %></td>
|
<th>Asunto</th>
|
||||||
<td><%= t.usuario_nombre || '' %></td>
|
<th>Estado</th>
|
||||||
<td><span class="badge bg-<%= t.status === 'abierto' ? 'success' : t.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= t.status %></span></td>
|
<th>Fecha</th>
|
||||||
|
<th class="text-end">Acción</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<% if (tickets.length === 0) { %>
|
||||||
|
<tr><td colspan="5" class="text-center py-4 text-muted">No hay tickets registrados</td></tr>
|
||||||
|
<% } %>
|
||||||
|
<% tickets.slice(0, 6).forEach(t => { %>
|
||||||
|
<tr>
|
||||||
|
<td><span class="badge bg-light text-dark border">#<%= t.id %></span></td>
|
||||||
|
<td>
|
||||||
|
<div class="fw-semibold text-dark text-truncate" style="max-width: 220px;"><%= t.asunto %></div>
|
||||||
|
<small class="text-muted"><%= t.usuario_nombre %></small>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (t.status === 'abierto') { %>
|
||||||
|
<span class="status-pill status-abierto"><span class="status-dot"></span>Abierto</span>
|
||||||
|
<% } else if (t.status === 'en_progreso') { %>
|
||||||
|
<span class="status-pill status-en-progreso"><span class="status-dot"></span>En Progreso</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="status-pill status-cerrado"><span class="status-dot"></span>Cerrado</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<small class="text-muted"><%= new Date(t.created_at).toLocaleDateString('es-ES') %></small>
|
||||||
|
</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<a href="/agent/ticket/<%= t.id %>" class="btn btn-action-view btn-sm">
|
||||||
|
<i class="fas fa-eye"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -73,15 +166,37 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna Derecha: Catálogo de Departamentos -->
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<div class="app-card h-100">
|
||||||
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-network-wired text-purple" style="color: #7c3aed;"></i>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.92rem;">Departamentos Activos</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 mb-3">
|
<a href="/admin/departments" class="small text-decoration-none text-primary fw-semibold" style="font-size: 0.78rem;">
|
||||||
<div class="card">
|
Gestionar <i class="fas fa-cog ms-1"></i>
|
||||||
<div class="card-header"><h5>Accesos Rápidos</h5></div>
|
</a>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<div class="list-group">
|
<div class="p-3">
|
||||||
<a href="/admin/users" class="list-group-item list-group-item-action"><i class="fas fa-users"></i> Gestionar Usuarios</a>
|
<div class="d-flex flex-column gap-2.5">
|
||||||
<a href="/admin/departments" class="list-group-item list-group-item-action"><i class="fas fa-building"></i> Gestionar Departamentos</a>
|
<% if (departments.length === 0) { %>
|
||||||
<a href="/agent/dashboard" class="list-group-item list-group-item-action"><i class="fas fa-tasks"></i> Ver Todos los Tickets</a>
|
<p class="text-muted text-center py-3 mb-0">No hay departamentos creados aún.</p>
|
||||||
|
<% } %>
|
||||||
|
<% departments.forEach(dept => { %>
|
||||||
|
<div class="d-flex align-items-center justify-content-between p-2.5 rounded-3 bg-light border border-slate-200">
|
||||||
|
<div>
|
||||||
|
<div class="fw-bold text-dark" style="font-size: 0.84rem;"><%= dept.nombre %></div>
|
||||||
|
<small class="text-muted text-truncate d-block" style="font-size: 0.74rem; max-width: 200px;">
|
||||||
|
<%= dept.descripcion || 'Sin descripción' %>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-white text-secondary border px-2 py-1" style="font-size: 0.72rem;">
|
||||||
|
Activo
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<% }) %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+95
-37
@@ -1,37 +1,91 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Departamentos'; %>
|
<% title = 'Departamentos de Soporte'; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Departamentos</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
|
<div>
|
||||||
<i class="fas fa-plus"></i> Nuevo Departamento
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Catálogo de Departamentos</h1>
|
||||||
|
<span class="badge bg-purple-subtle text-purple border px-2.5 py-1" style="font-size: 0.75rem; color: #7c3aed;">
|
||||||
|
<%= departments.length %> Áreas
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Define las especialidades para enrutar automáticamente los tickets a los técnicos adecuados.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#createModal">
|
||||||
|
<i class="fas fa-plus-circle"></i>
|
||||||
|
<span>Nuevo Departamento</span>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row g-3">
|
||||||
|
<% if (departments.length === 0) { %>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="app-card p-5 text-center">
|
||||||
|
<i class="fas fa-network-wired text-muted fs-1 mb-2"></i>
|
||||||
|
<h5 class="fw-bold text-dark">No hay departamentos configurados</h5>
|
||||||
|
<p class="text-muted small mb-3">Crea departamentos para que tus clientes puedan clasificar sus tickets.</p>
|
||||||
|
<button type="button" class="btn btn-primary btn-sm px-3 rounded-pill" data-bs-toggle="modal" data-bs-target="#createModal">
|
||||||
|
<i class="fas fa-plus me-1"></i> Crear primer departamento
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
<% departments.forEach(d => { %>
|
<% departments.forEach(d => { %>
|
||||||
<div class="col-md-4 mb-3">
|
<div class="col-md-6 col-lg-4">
|
||||||
<div class="card">
|
<div class="app-card h-100 p-3.5 d-flex flex-column justify-content-between">
|
||||||
<div class="card-body">
|
<div>
|
||||||
<h5 class="card-title"><%= d.nombre %></h5>
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
<p class="card-text"><%= d.descripcion || 'Sin descripción' %></p>
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="kpi-icon-box bg-primary-subtle text-primary" style="width: 36px; height: 36px; font-size: 0.85rem;">
|
||||||
|
<i class="fas fa-network-wired"></i>
|
||||||
|
</div>
|
||||||
|
<h6 class="fw-bold text-dark mb-0"><%= d.nombre %></h6>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-light text-muted border" style="font-size: 0.70rem;">#<%= d.id %></span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-3" style="font-size: 0.82rem; min-height: 40px;">
|
||||||
|
<%= d.descripcion || 'Sin descripción específica configurada.' %>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||||
|
<small class="text-muted" style="font-size: 0.72rem;">
|
||||||
|
Área Operativa
|
||||||
|
</small>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal<%= d.id %>">
|
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editModal<%= d.id %>" title="Editar">
|
||||||
<i class="fas fa-edit"></i>
|
<i class="fas fa-pen"></i>
|
||||||
</button>
|
</button>
|
||||||
<form action="/admin/departments/delete/<%= d.id %>" method="POST" style="display:inline">
|
<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?')">
|
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar este departamento?')" title="Eliminar">
|
||||||
<i class="fas fa-trash"></i>
|
<i class="fas fa-trash"></i>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
@@ -40,26 +94,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal fade" id="editModal<%= d.id %>">
|
<!-- Modal Editar Departamento -->
|
||||||
|
<div class="modal fade" id="editModal<%= d.id %>" tabindex="-1">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||||
<form action="/admin/departments/update/<%= d.id %>" method="POST">
|
<form action="/admin/departments/update/<%= d.id %>" method="POST">
|
||||||
<div class="modal-header">
|
<div class="modal-header bg-light border-bottom p-3 px-4">
|
||||||
<h5 class="modal-title">Editar Departamento</h5>
|
<h5 class="modal-title fw-bold" style="font-size: 1rem;"><i class="fas fa-edit text-primary me-2"></i>Editar Departamento</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body p-4">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Nombre</label>
|
<label class="form-label small fw-bold text-dark">Nombre del Departamento <span class="text-danger">*</span></label>
|
||||||
<input type="text" name="nombre" class="form-control" value="<%= d.nombre %>" required>
|
<input type="text" name="nombre" class="form-control" value="<%= d.nombre %>" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Descripción</label>
|
<label class="form-label small fw-bold text-dark">Descripción</label>
|
||||||
<textarea name="descripcion" class="form-control" rows="3"><%= d.descripcion || '' %></textarea>
|
<textarea name="descripcion" class="form-control" rows="3"><%= d.descripcion || '' %></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer p-3 bg-light">
|
||||||
<button type="submit" class="btn btn-primary">Guardar</button>
|
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||||
|
<button type="submit" class="btn btn-primary px-3 shadow-sm">Guardar Cambios</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -68,26 +124,28 @@
|
|||||||
<% }) %>
|
<% }) %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal fade" id="createModal">
|
<!-- Modal Crear Departamento -->
|
||||||
|
<div class="modal fade" id="createModal" tabindex="-1">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||||
<form action="/admin/departments/create" method="POST">
|
<form action="/admin/departments" method="POST">
|
||||||
<div class="modal-header">
|
<div class="modal-header bg-light border-bottom p-3 px-4">
|
||||||
<h5 class="modal-title">Nuevo Departamento</h5>
|
<h5 class="modal-title fw-bold" style="font-size: 1rem;"><i class="fas fa-plus-circle text-primary me-2"></i>Nuevo Departamento</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body p-4">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Nombre</label>
|
<label class="form-label small fw-bold text-dark">Nombre del Departamento <span class="text-danger">*</span></label>
|
||||||
<input type="text" name="nombre" class="form-control" required>
|
<input type="text" name="nombre" class="form-control" placeholder="Ej: Redes & Conectividad" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Descripción</label>
|
<label class="form-label small fw-bold text-dark">Descripción Operativa</label>
|
||||||
<textarea name="descripcion" class="form-control" rows="3"></textarea>
|
<textarea name="descripcion" class="form-control" rows="3" placeholder="Describe el alcance de este departamento..."></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer p-3 bg-light">
|
||||||
<button type="submit" class="btn btn-primary">Crear</button>
|
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||||
|
<button type="submit" class="btn btn-primary px-3 shadow-sm">Crear Departamento</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+102
-29
@@ -1,67 +1,140 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Usuarios'; %>
|
<% title = 'Usuarios y Equipo'; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Usuarios</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
<a href="/admin/users/create" class="btn btn-primary">
|
<div>
|
||||||
<i class="fas fa-plus"></i> Nuevo Usuario
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Gestión de Usuarios y Roles</h1>
|
||||||
|
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem;">
|
||||||
|
<%= users.length %> Cuentas Registradas
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Administra el personal técnico, agentes de soporte y permisos de clientes.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/admin/users/create" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||||
|
<i class="fas fa-user-plus"></i>
|
||||||
|
<span>Nuevo Usuario</span>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="app-card mb-4">
|
||||||
<table class="table table-striped table-hover">
|
<div class="app-card-header d-flex justify-content-between align-items-center p-3">
|
||||||
<thead class="table-dark">
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-users-cog text-primary"></i>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Catálogo de Cuentas</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table app-table mb-0">
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>ID</th>
|
<th style="width: 60px;">ID</th>
|
||||||
<th>Nombre</th>
|
<th>Usuario & Identidad</th>
|
||||||
<th>Email</th>
|
<th>Correo Electrónico</th>
|
||||||
<th>Rol</th>
|
<th>Rol en la Plataforma</th>
|
||||||
<th>Activo</th>
|
<th>Estado</th>
|
||||||
<th>Registro</th>
|
<th>Fecha Alta</th>
|
||||||
<th>Acción</th>
|
<th class="text-end" style="width: 130px;">Acciones</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<% if (users.length === 0) { %>
|
<% if (users.length === 0) { %>
|
||||||
<tr><td colspan="7" class="text-center">No hay usuarios</td></tr>
|
<tr><td colspan="7" class="text-center py-4 text-muted">No hay usuarios registrados</td></tr>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<% users.forEach(u => { %>
|
<% users.forEach(u => { %>
|
||||||
<tr>
|
<tr>
|
||||||
<td><%= u.id %></td>
|
<td><span class="badge bg-light text-dark border">#<%= u.id %></span></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>
|
<td>
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<% if (u.avatar_url) { %>
|
||||||
|
<img src="<%= u.avatar_url %>" alt="<%= u.nombre %>" class="user-avatar-img-sm rounded-circle" style="width: 32px; height: 32px; object-fit: cover;">
|
||||||
|
<% } else { %>
|
||||||
|
<div class="user-avatar-initials-sm" style="width: 32px; height: 32px; font-size: 0.78rem;">
|
||||||
|
<%= (u.nombre || 'U').charAt(0).toUpperCase() %>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<div>
|
||||||
|
<div class="fw-bold text-dark" style="font-size: 0.84rem;"><%= u.nombre %></div>
|
||||||
|
<small class="text-muted" style="font-size: 0.70rem;">
|
||||||
|
Proveedor: <%= u.provider || 'local' %>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-secondary small font-monospace"><%= u.email %></span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (u.rol === 'superadmin') { %>
|
||||||
|
<span class="badge bg-dark text-warning border px-2 py-1"><i class="fas fa-crown me-1"></i>Superadmin</span>
|
||||||
|
<% } else if (u.rol === 'admin') { %>
|
||||||
|
<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1"><i class="fas fa-user-shield me-1"></i>Admin</span>
|
||||||
|
<% } else if (u.rol === 'agent') { %>
|
||||||
|
<span class="badge bg-indigo-subtle text-indigo border px-2 py-1" style="color: #4f46e5; border-color: rgba(79,70,229,0.3) !important;"><i class="fas fa-headset me-1"></i>Agente</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="badge bg-secondary-subtle text-secondary border px-2 py-1"><i class="fas fa-user me-1"></i>Cliente</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (u.is_active) { %>
|
||||||
|
<span class="status-pill status-abierto"><span class="status-dot"></span>Activo</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="status-pill status-cerrado"><span class="status-dot" style="background: #ef4444;"></span>Inactivo</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<small class="text-muted"><%= new Date(u.created_at).toLocaleDateString('es-ES') %></small>
|
||||||
|
</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<div class="d-inline-flex gap-1">
|
||||||
<% if (u.rol !== 'superadmin') { %>
|
<% if (u.rol !== 'superadmin') { %>
|
||||||
<form action="/admin/users/invite/<%= u.id %>" method="POST" style="display:inline">
|
<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">
|
<button type="submit" class="btn btn-sm btn-outline-info" title="Generar link de invitación">
|
||||||
<i class="fas fa-envelope"></i>
|
<i class="fas fa-paper-plane"></i>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<form action="/admin/users/delete/<%= u.id %>" method="POST" style="display:inline">
|
<form action="/admin/users/toggle/<%= u.id %>" method="POST" style="display:inline">
|
||||||
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Eliminar este usuario?')">
|
<button type="submit" class="btn btn-sm btn-outline-<%= u.is_active ? 'warning' : 'success' %>" title="<%= u.is_active ? 'Desactivar cuenta' : 'Activar cuenta' %>">
|
||||||
<i class="fas fa-trash"></i>
|
<i class="fas fa-<%= u.is_active ? 'ban' : 'check' %>"></i>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%- include('../partials/footer') %>
|
<%- include('../partials/footer') %>
|
||||||
|
|||||||
+226
-33
@@ -1,75 +1,268 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Panel de ' + (user.rol === 'admin' ? 'Administración' : 'Agente'); %>
|
<% title = 'Bandeja de Tickets - Panel ' + (user.rol === 'admin' ? 'Administrativo' : 'Operativo'); %>
|
||||||
|
|
||||||
|
<%
|
||||||
|
const totalCount = tickets.length;
|
||||||
|
const abiertosCount = stats.find(s => s.status === 'abierto') ? stats.find(s => s.status === 'abierto').total : 0;
|
||||||
|
const progresoCount = stats.find(s => s.status === 'en_progreso') ? stats.find(s => s.status === 'en_progreso').total : 0;
|
||||||
|
const cerradosCount = stats.find(s => s.status === 'cerrado') ? stats.find(s => s.status === 'cerrado').total : 0;
|
||||||
|
%>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div class="fw-medium"><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div class="fw-medium"><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Panel de <%= user.rol === 'admin' ? 'Administración' : 'Agente' %></h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
|
<div>
|
||||||
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Consola de Triaje y Soporte</h1>
|
||||||
|
<span class="badge bg-indigo bg-opacity-10 text-indigo border border-indigo border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem; color: #4f46e5;">
|
||||||
|
<i class="fas fa-headset me-1"></i> Personal Técnico & FSM
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Gestión activa de incidencias, programación de visitas y despacho a campo.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mb-4">
|
<!-- Tarjetas de Métricas Operativas (KPIs) -->
|
||||||
<% stats.forEach(s => { %>
|
<div class="row g-3 mb-4">
|
||||||
<% const color = s.status === 'abierto' ? 'success' : s.status === 'en_progreso' ? 'primary' : 'secondary' %>
|
<div class="col-6 col-lg-3">
|
||||||
<div class="col-md-4 mb-3">
|
<div class="kpi-card">
|
||||||
<div class="card border-<%= color %> text-<%= color %>">
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
<div class="card-body text-center">
|
<span class="kpi-label">Tickets Asignados</span>
|
||||||
<h5 class="card-title"><%= s.status %></h5>
|
<div class="kpi-icon-box bg-primary-subtle text-primary">
|
||||||
<h2><%= s.total %></h2>
|
<i class="fas fa-tasks"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="kpi-value"><%= totalCount %></div>
|
||||||
|
<div class="kpi-subtext text-muted">En tu ámbito operativo</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">Pendientes / Nuevos</span>
|
||||||
|
<div class="kpi-icon-box bg-success-subtle text-success">
|
||||||
|
<i class="fas fa-bell"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value text-success"><%= abiertosCount %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Requieren primera respuesta</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">En Progreso / Terreno</span>
|
||||||
|
<div class="kpi-icon-box bg-info-subtle text-info">
|
||||||
|
<i class="fas fa-truck"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value text-info"><%= progresoCount %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Visitas o diagnóstico FSM</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">Casos Cerrados</span>
|
||||||
|
<div class="kpi-icon-box bg-secondary-subtle text-secondary">
|
||||||
|
<i class="fas fa-check-circle"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value text-secondary"><%= cerradosCount %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Resueltos satisfactoriamente</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% }) %>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-responsive">
|
<!-- Bandeja de Tickets -->
|
||||||
<table class="table table-striped table-hover">
|
<div class="app-card mb-4">
|
||||||
<thead class="table-dark">
|
<div class="app-card-header d-flex flex-wrap justify-content-between align-items-center gap-2 p-3">
|
||||||
|
|
||||||
|
<!-- Filtros rápidos por estado -->
|
||||||
|
<div class="d-flex flex-wrap align-items-center gap-1.5" id="statusFilterButtons">
|
||||||
|
<button type="button" class="btn btn-sm btn-filter active" onclick="filterByStatus('all', this)">
|
||||||
|
Todos (<%= tickets.length %>)
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-filter" onclick="filterByStatus('abierto', this)">
|
||||||
|
<span class="status-dot-sm bg-success"></span> Abiertos (<%= abiertosCount %>)
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-filter" onclick="filterByStatus('en_progreso', this)">
|
||||||
|
<span class="status-dot-sm bg-primary"></span> En Progreso (<%= progresoCount %>)
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-filter" onclick="filterByStatus('cerrado', this)">
|
||||||
|
<span class="status-dot-sm bg-secondary"></span> Cerrados (<%= cerradosCount %>)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Búsqueda en vivo -->
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="input-group input-group-sm search-input-group">
|
||||||
|
<span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
|
||||||
|
<input type="text" id="agentSearchInput" class="form-control border-start-0 ps-0" placeholder="Buscar ticket, cliente o área..." onkeyup="filterAgentTable()">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table app-table mb-0" id="agentTicketsTable">
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th style="width: 75px;">ID</th>
|
||||||
<th>Usuario</th>
|
<th>Cliente / Solicitante</th>
|
||||||
<th>Asunto</th>
|
<th>Asunto</th>
|
||||||
<th>Departamento</th>
|
<th>Departamento</th>
|
||||||
<th>Prioridad</th>
|
<th>Prioridad</th>
|
||||||
<th>Estado</th>
|
<th>Estado</th>
|
||||||
<th>Asignado</th>
|
<th>Técnico Asignado</th>
|
||||||
<th>Fecha</th>
|
<th>Fecha</th>
|
||||||
<th>Acción</th>
|
<th class="text-end" style="width: 110px;">Gestión</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<% if (tickets.length === 0) { %>
|
<% if (tickets.length === 0) { %>
|
||||||
<tr><td colspan="9" class="text-center">No hay tickets</td></tr>
|
|
||||||
<% } %>
|
|
||||||
<% tickets.forEach(t => { %>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>#<%= t.id %></td>
|
<td colspan="9" class="text-center py-5">
|
||||||
<td><%= t.usuario_nombre || '' %></td>
|
<div class="empty-state-wrapper text-center">
|
||||||
<td><%= t.asunto %></td>
|
<img src="/img/bot-soporte.svg" alt="Sin tickets" width="72" height="72" class="mb-3 opacity-75">
|
||||||
<td><%= t.departamento_nombre || 'Sin depto' %></td>
|
<h5 class="fw-bold text-dark">No hay tickets asignados</h5>
|
||||||
|
<p class="text-muted small mb-0">La bandeja se encuentra al día y libre de incidencias pendientes.</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<% tickets.forEach(t => { %>
|
||||||
|
<tr class="agent-ticket-row" data-status="<%= t.status %>">
|
||||||
<td>
|
<td>
|
||||||
<span class="badge bg-<%= t.prioridad === 'alta' ? 'danger' : t.prioridad === 'critica' ? 'dark' : t.prioridad === 'media' ? 'warning' : 'info' %>"><%= t.prioridad %></span>
|
<span class="badge bg-light text-dark border fw-bold">#<%= t.id %></span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge bg-<%= t.status === 'abierto' ? 'success' : t.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= t.status %></span>
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="user-avatar-initials-sm">
|
||||||
|
<%= (t.usuario_nombre || 'C').charAt(0).toUpperCase() %>
|
||||||
|
</div>
|
||||||
|
<div class="text-truncate" style="max-width: 160px;">
|
||||||
|
<div class="fw-semibold text-dark text-truncate" style="font-size: 0.82rem;"><%= t.usuario_nombre %></div>
|
||||||
|
<small class="text-muted text-truncate d-block" style="font-size: 0.70rem;"><%= t.usuario_email || '' %></small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td><%= t.asignado_nombre || 'Sin asignar' %></td>
|
|
||||||
<td><%= t.created_at %></td>
|
|
||||||
<td>
|
<td>
|
||||||
<a href="/agent/ticket/<%= t.id %>" class="btn btn-sm btn-info"><i class="fas fa-eye"></i></a>
|
<div class="fw-semibold text-dark text-truncate" style="max-width: 250px;">
|
||||||
|
<%= t.asunto %>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge bg-light text-secondary border fw-medium" style="font-size: 0.74rem;">
|
||||||
|
<%= t.departamento_nombre || 'General' %>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (t.prioridad === 'critica') { %>
|
||||||
|
<span class="priority-pill priority-critica"><i class="fas fa-fire me-1"></i>Crítica</span>
|
||||||
|
<% } else if (t.prioridad === 'alta') { %>
|
||||||
|
<span class="priority-pill priority-alta"><i class="fas fa-exclamation-circle me-1"></i>Alta</span>
|
||||||
|
<% } else if (t.prioridad === 'media') { %>
|
||||||
|
<span class="priority-pill priority-media"><i class="fas fa-minus-circle me-1"></i>Media</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="priority-pill priority-baja"><i class="fas fa-arrow-down me-1"></i>Baja</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (t.status === 'abierto') { %>
|
||||||
|
<span class="status-pill status-abierto"><span class="status-dot"></span>Abierto</span>
|
||||||
|
<% } else if (t.status === 'en_progreso') { %>
|
||||||
|
<span class="status-pill status-en-progreso"><span class="status-dot"></span>En Progreso</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="status-pill status-cerrado"><span class="status-dot"></span>Cerrado</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (t.asignado_nombre) { %>
|
||||||
|
<span class="d-inline-flex align-items-center gap-1 text-secondary small" style="font-size: 0.78rem;">
|
||||||
|
<i class="fas fa-user-check text-success"></i>
|
||||||
|
<%= t.asignado_nombre %>
|
||||||
|
</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="badge bg-light text-muted border" style="font-size: 0.70rem;">Sin asignar</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-muted small" style="font-size: 0.74rem;">
|
||||||
|
<%= new Date(t.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'short' }) %>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<a href="/agent/ticket/<%= t.id %>" class="btn btn-action-view btn-sm d-inline-flex align-items-center gap-1 shadow-sm">
|
||||||
|
<span>Gestionar</span>
|
||||||
|
<i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
|
||||||
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentStatusFilter = 'all';
|
||||||
|
|
||||||
|
function filterByStatus(status, btn) {
|
||||||
|
currentStatusFilter = status;
|
||||||
|
|
||||||
|
// Actualizar estado de botones
|
||||||
|
document.querySelectorAll('#statusFilterButtons .btn-filter').forEach(b => b.classList.remove('active'));
|
||||||
|
if (btn) btn.classList.add('active');
|
||||||
|
|
||||||
|
applyFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterAgentTable() {
|
||||||
|
applyFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyFilters() {
|
||||||
|
const query = document.getElementById('agentSearchInput').value.toLowerCase();
|
||||||
|
const rows = document.querySelectorAll('#agentTicketsTable tbody tr.agent-ticket-row');
|
||||||
|
|
||||||
|
rows.forEach(row => {
|
||||||
|
const rowStatus = row.getAttribute('data-status');
|
||||||
|
const rowText = row.innerText.toLowerCase();
|
||||||
|
|
||||||
|
const matchesStatus = (currentStatusFilter === 'all' || rowStatus === currentStatusFilter);
|
||||||
|
const matchesQuery = (query === '' || rowText.includes(query));
|
||||||
|
|
||||||
|
if (matchesStatus && matchesQuery) {
|
||||||
|
row.style.display = '';
|
||||||
|
} else {
|
||||||
|
row.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<%- include('../partials/footer') %>
|
<%- include('../partials/footer') %>
|
||||||
|
|||||||
+238
-110
@@ -1,95 +1,160 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Ticket #' + ticket.id; %>
|
<% title = 'Ticket #' + ticket.id + ' — Gestión Operativa'; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Ticket #<%= ticket.id %>: <%= ticket.asunto %></h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
<a href="/agent/dashboard" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Volver</a>
|
<div>
|
||||||
|
<div class="d-flex flex-wrap align-items-center gap-2 mb-1">
|
||||||
|
<span class="badge bg-light text-dark border px-2.5 py-1.5 fw-bold" style="font-size: 0.85rem;">Ticket #<%= ticket.id %></span>
|
||||||
|
<h1 class="page-title h3 mb-0"><%= ticket.asunto %></h1>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-center gap-2 text-muted small">
|
||||||
|
<span><i class="far fa-calendar-alt me-1"></i><%= new Date(ticket.created_at).toLocaleString('es-ES') %></span>
|
||||||
|
<span>•</span>
|
||||||
|
<span><i class="fas fa-user me-1"></i><%= ticket.usuario_nombre %> (<%= ticket.usuario_email %>)</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span><i class="fas fa-folder me-1"></i><%= ticket.departamento_nombre || 'General' %></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<a href="/agent/dashboard" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3 shadow-sm">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
<span>Volver a la Bandeja</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row g-4">
|
||||||
<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">
|
<!-- Columna Lateral: Ficha, Controles de Estado y FSM -->
|
||||||
<div class="card-header"><h6 class="mb-0">Acciones</h6></div>
|
<div class="col-lg-4">
|
||||||
<div class="card-body">
|
|
||||||
<form action="/agent/ticket/<%= ticket.id %>/status" method="POST" class="mb-2">
|
<!-- Tarjeta de Estado y Asignación Rápida -->
|
||||||
<label class="form-label">Cambiar Estado</label>
|
<div class="app-card mb-3">
|
||||||
<select name="status" class="form-select mb-2">
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||||
<option value="abierto" <%= ticket.status === 'abierto' ? 'selected' : '' %>>Abierto</option>
|
<h6 class="mb-0 fw-bold" style="font-size: 0.88rem;">
|
||||||
<option value="en_progreso" <%= ticket.status === 'en_progreso' ? 'selected' : '' %>>En Progreso</option>
|
<i class="fas fa-sliders-h text-primary me-1.5"></i> Control del Ticket
|
||||||
<option value="cerrado" <%= ticket.status === 'cerrado' ? 'selected' : '' %>>Cerrado</option>
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3">
|
||||||
|
|
||||||
|
<!-- Estado Actual -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label text-muted small fw-semibold mb-1">Estado de Resolución</label>
|
||||||
|
<form action="/agent/ticket/<%= ticket.id %>/status" method="POST" class="d-flex gap-2">
|
||||||
|
<select name="status" class="form-select form-select-sm">
|
||||||
|
<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>
|
</select>
|
||||||
<button type="submit" class="btn btn-primary btn-sm w-100">Actualizar</button>
|
<button type="submit" class="btn btn-primary btn-sm px-3 shadow-sm">Guardar</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
<% if (user.rol === 'admin') { %>
|
<!-- Asignación de Agente (si es admin) -->
|
||||||
<form action="/agent/ticket/<%= ticket.id %>/assign" method="POST">
|
<% if (user.rol === 'admin' || user.rol === 'superadmin') { %>
|
||||||
<label class="form-label">Asignar a</label>
|
<div class="mb-3 pt-2 border-top">
|
||||||
<select name="assigned_to" class="form-select mb-2">
|
<label class="form-label text-muted small fw-semibold mb-1">Reasignar Especialista</label>
|
||||||
|
<form action="/agent/ticket/<%= ticket.id %>/assign" method="POST" class="d-flex gap-2">
|
||||||
|
<select name="assigned_to" class="form-select form-select-sm">
|
||||||
<option value="">Sin asignar</option>
|
<option value="">Sin asignar</option>
|
||||||
<% agents.forEach(a => { %>
|
<% agents.forEach(a => { %>
|
||||||
<option value="<%= a.id %>" <%= ticket.assigned_to === a.id ? 'selected' : '' %>><%= a.nombre %></option>
|
<option value="<%= a.id %>" <%= ticket.assigned_to === a.id ? 'selected' : '' %>><%= a.nombre %></option>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</select>
|
</select>
|
||||||
<button type="submit" class="btn btn-info btn-sm w-100">Asignar</button>
|
<button type="submit" class="btn btn-outline-info btn-sm px-2.5">Asignar</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
<!-- Metadatos Básicos -->
|
||||||
|
<div class="pt-2 border-top">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-1 text-muted" style="font-size: 0.78rem;">
|
||||||
|
<span>Prioridad:</span>
|
||||||
|
<% if (ticket.prioridad === 'critica') { %>
|
||||||
|
<span class="priority-pill priority-critica"><i class="fas fa-fire me-1"></i>Crítica</span>
|
||||||
|
<% } else if (ticket.prioridad === 'alta') { %>
|
||||||
|
<span class="priority-pill priority-alta"><i class="fas fa-exclamation-circle me-1"></i>Alta</span>
|
||||||
|
<% } else if (ticket.prioridad === 'media') { %>
|
||||||
|
<span class="priority-pill priority-media"><i class="fas fa-minus-circle me-1"></i>Media</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="priority-pill priority-baja"><i class="fas fa-arrow-down me-1"></i>Baja</span>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between align-items-center text-muted" style="font-size: 0.78rem;">
|
||||||
|
<span>Asignado a:</span>
|
||||||
|
<span class="fw-semibold text-dark"><%= ticket.asignado_nombre || 'Sin asignar' %></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- MÓDULO VISITAS TÉCNICAS (FSM / tareas.telcotronics.com) -->
|
</div>
|
||||||
<div class="card mb-3 border-warning">
|
</div>
|
||||||
<div class="card-header bg-warning bg-opacity-25 d-flex justify-content-between align-items-center">
|
|
||||||
<h6 class="mb-0 text-dark"><i class="fas fa-truck-pickup me-1"></i> Visita Técnica (FSM)</h6>
|
<!-- MÓDULO VISITAS TÉCNICAS FSM (tareas.telcotronics.com) -->
|
||||||
|
<div class="app-card mb-3 border-amber-200">
|
||||||
|
<div class="app-card-header p-3 border-bottom d-flex justify-content-between align-items-center bg-amber-50" style="background: rgba(245, 158, 11, 0.08);">
|
||||||
|
<div class="d-flex align-items-center gap-1.5">
|
||||||
|
<i class="fas fa-truck text-warning"></i>
|
||||||
|
<h6 class="mb-0 fw-bold text-dark" style="font-size: 0.88rem;">Visita en Terreno (FSM)</h6>
|
||||||
|
</div>
|
||||||
<% if (visita) { %>
|
<% if (visita) { %>
|
||||||
<span class="badge bg-<%= visita.estado === 'completada' ? 'success' : visita.estado === 'en_sitio' ? 'warning' : visita.estado === 'en_camino' ? 'primary' : 'info' %> text-uppercase">
|
<span class="badge bg-warning bg-opacity-25 text-dark border border-warning border-opacity-50 text-uppercase" style="font-size: 0.68rem;">
|
||||||
<%= visita.estado %>
|
<%= visita.estado %>
|
||||||
</span>
|
</span>
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
|
||||||
|
<div class="card-body p-3">
|
||||||
<% if (!visita) { %>
|
<% if (!visita) { %>
|
||||||
<p class="small text-muted mb-3">Si este ticket requiere intervención presencial en sitio o avería física, puedes programar la visita técnica directamente en el sistema central de tareas.</p>
|
<p class="small text-muted mb-3" style="font-size: 0.8rem;">
|
||||||
<button type="button" class="btn btn-warning btn-sm w-100 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalVisita">
|
Si la avería o solicitud requiere inspección física o trabajo presencial en sitio, programa el despacho de un técnico hacia el Hub de Tareas.
|
||||||
<i class="fas fa-calendar-plus me-1"></i> Programar Visita Técnica
|
</p>
|
||||||
|
<button type="button" class="btn btn-warning btn-sm w-100 shadow-sm d-flex align-items-center justify-content-center gap-2 fw-semibold" data-bs-toggle="modal" data-bs-target="#modalVisita">
|
||||||
|
<i class="fas fa-calendar-plus"></i>
|
||||||
|
<span>Programar Visita FSM</span>
|
||||||
</button>
|
</button>
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
|
|
||||||
<!-- MINI-TIMELINE OPERATIVO DE SEGUIMIENTO EN VIVO -->
|
<!-- MINI-TIMELINE OPERATIVO DE SEGUIMIENTO EN VIVO -->
|
||||||
<div class="timeline-operativo">
|
<div class="timeline-operativo">
|
||||||
|
|
||||||
<!-- 1. Programación -->
|
<!-- 1. Programación -->
|
||||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||||
<div class="d-flex align-items-center mb-1">
|
<div class="d-flex align-items-center mb-1">
|
||||||
<span class="badge bg-info text-dark me-2">1</span>
|
<span class="badge bg-info text-dark me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">1</span>
|
||||||
<strong class="small">📅 Programada</strong>
|
<strong class="small text-dark">📅 Programada</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="small ps-4">
|
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||||
<div><strong>Técnico:</strong> <%= visita.tecnico_nombre %></div>
|
<div><strong>Técnico:</strong> <%= visita.tecnico_nombre %></div>
|
||||||
<div class="text-muted"><%= visita.tecnico_email %></div>
|
<div class="text-muted"><%= visita.tecnico_email %></div>
|
||||||
<div class="mt-1"><i class="fas fa-clock text-secondary"></i> <%= visita.fecha_visita ? new Date(visita.fecha_visita).toLocaleString('es-EC') : 'Sin fecha' %></div>
|
<div class="mt-1"><i class="fas fa-clock text-secondary"></i> <%= visita.fecha_visita ? new Date(visita.fecha_visita).toLocaleString('es-EC') : 'Sin fecha' %></div>
|
||||||
<% if (visita.ubicacion) { %>
|
<% if (visita.ubicacion) { %>
|
||||||
<div class="mt-1"><i class="fas fa-map-marker-alt text-danger"></i> <%= visita.ubicacion %></div>
|
<div class="mt-1 text-truncate" title="<%= visita.ubicacion %>"><i class="fas fa-map-marker-alt text-danger"></i> <%= visita.ubicacion %></div>
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,10 +162,10 @@
|
|||||||
<!-- 2. Check-in GPS -->
|
<!-- 2. Check-in GPS -->
|
||||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||||
<div class="d-flex align-items-center mb-1">
|
<div class="d-flex align-items-center mb-1">
|
||||||
<span class="badge <%= (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) ? 'bg-success' : 'bg-secondary' %> me-2">2</span>
|
<span class="badge <%= (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) ? 'bg-success' : 'bg-secondary' %> me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">2</span>
|
||||||
<strong class="small">📍 Check-in en Sitio</strong>
|
<strong class="small text-dark">📍 Check-in en Sitio</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="small ps-4">
|
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||||
<% if (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) { %>
|
<% if (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) { %>
|
||||||
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Arribo confirmado</div>
|
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Arribo confirmado</div>
|
||||||
<div class="text-muted"><%= new Date(visita.historial.checkIn.fecha).toLocaleTimeString('es-EC') %></div>
|
<div class="text-muted"><%= new Date(visita.historial.checkIn.fecha).toLocaleTimeString('es-EC') %></div>
|
||||||
@@ -116,20 +181,20 @@
|
|||||||
<!-- 3. Checklist y Evidencias -->
|
<!-- 3. Checklist y Evidencias -->
|
||||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||||
<div class="d-flex align-items-center mb-1">
|
<div class="d-flex align-items-center mb-1">
|
||||||
<span class="badge <%= (visita.historial && visita.historial.progreso_checklist && visita.historial.progreso_checklist.porcentaje > 0) ? 'bg-primary' : 'bg-secondary' %> me-2">3</span>
|
<span class="badge <%= (visita.historial && visita.historial.progreso_checklist && visita.historial.progreso_checklist.porcentaje > 0) ? 'bg-primary' : 'bg-secondary' %> me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">3</span>
|
||||||
<strong class="small">📸 Avance y Evidencias</strong>
|
<strong class="small text-dark">📸 Avance y Evidencias</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="small ps-4">
|
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||||
<% if (visita.historial && visita.historial.progreso_checklist) { %>
|
<% if (visita.historial && visita.historial.progreso_checklist) { %>
|
||||||
<div class="d-flex justify-content-between mb-1">
|
<div class="d-flex justify-content-between mb-1">
|
||||||
<span>Checklist:</span>
|
<span>Checklist:</span>
|
||||||
<strong><%= visita.historial.progreso_checklist.completados %>/<%= visita.historial.progreso_checklist.total %></strong>
|
<strong><%= visita.historial.progreso_checklist.completados %>/<%= visita.historial.progreso_checklist.total %></strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress mb-2" style="height: 8px;">
|
<div class="progress mb-2" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: <%= visita.historial.progreso_checklist.porcentaje %>%;"></div>
|
<div class="progress-bar bg-success" role="progressbar" style="width: <%= visita.historial.progreso_checklist.porcentaje %>%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<% if (visita.historial.progreso_checklist.items && visita.historial.progreso_checklist.items.length > 0) { %>
|
<% if (visita.historial.progreso_checklist.items && visita.historial.progreso_checklist.items.length > 0) { %>
|
||||||
<ul class="list-unstyled mb-2" style="font-size: 0.8rem;">
|
<ul class="list-unstyled mb-2" style="font-size: 0.75rem;">
|
||||||
<% visita.historial.progreso_checklist.items.forEach(item => { %>
|
<% visita.historial.progreso_checklist.items.forEach(item => { %>
|
||||||
<li class="<%= item.completado ? 'text-success fw-bold' : 'text-muted' %>">
|
<li class="<%= item.completado ? 'text-success fw-bold' : 'text-muted' %>">
|
||||||
<i class="fas <%= item.completado ? 'fa-check-square' : 'fa-square' %> me-1"></i> <%= item.texto %>
|
<i class="fas <%= item.completado ? 'fa-check-square' : 'fa-square' %> me-1"></i> <%= item.texto %>
|
||||||
@@ -150,7 +215,7 @@
|
|||||||
const fotoUrl = foto.url.startsWith('http') ? foto.url : ('https://tareas.telcotronics.com' + foto.url);
|
const fotoUrl = foto.url.startsWith('http') ? foto.url : ('https://tareas.telcotronics.com' + foto.url);
|
||||||
%>
|
%>
|
||||||
<a href="<%= fotoUrl %>" target="_blank" title="<%= foto.descripcion || 'Evidencia' %>">
|
<a href="<%= fotoUrl %>" target="_blank" title="<%= foto.descripcion || 'Evidencia' %>">
|
||||||
<img src="<%= fotoUrl %>" class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;" alt="Evidencia">
|
<img src="<%= fotoUrl %>" class="img-thumbnail" style="width: 44px; height: 44px; object-fit: cover; border-radius: 6px;" alt="Evidencia">
|
||||||
</a>
|
</a>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</div>
|
</div>
|
||||||
@@ -180,10 +245,10 @@
|
|||||||
<!-- 4. Cierre y Sincronización -->
|
<!-- 4. Cierre y Sincronización -->
|
||||||
<div class="timeline-step">
|
<div class="timeline-step">
|
||||||
<div class="d-flex align-items-center mb-1">
|
<div class="d-flex align-items-center mb-1">
|
||||||
<span class="badge <%= visita.estado === 'completada' ? 'bg-success' : 'bg-secondary' %> me-2">4</span>
|
<span class="badge <%= visita.estado === 'completada' ? 'bg-success' : 'bg-secondary' %> me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">4</span>
|
||||||
<strong class="small">🏁 Finalización</strong>
|
<strong class="small text-dark">🏁 Finalización</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="small ps-4">
|
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||||
<% if (visita.estado === 'completada') { %>
|
<% if (visita.estado === 'completada') { %>
|
||||||
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Visita Finalizada</div>
|
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Visita Finalizada</div>
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
@@ -191,8 +256,8 @@
|
|||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<form action="/agent/ticket/<%= ticket.id %>/visita/sync" method="POST" class="mt-2">
|
<form action="/agent/ticket/<%= ticket.id %>/visita/sync" method="POST" class="mt-2">
|
||||||
<button type="submit" class="btn btn-outline-primary btn-sm w-100" title="Actualizar progreso desde tareas.telcotronics.com">
|
<button type="submit" class="btn btn-outline-primary btn-sm w-100 shadow-sm" title="Actualizar progreso desde tareas.telcotronics.com">
|
||||||
<i class="fas fa-sync-alt me-1"></i> Sincronizar estado con Hub
|
<i class="fas fa-sync-alt me-1"></i> Sincronizar con Hub
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -207,12 +272,12 @@
|
|||||||
<i class="fas fa-chevron-down"></i>
|
<i class="fas fa-chevron-down"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse mt-2" id="collapseEventos">
|
<div class="collapse mt-2" id="collapseEventos">
|
||||||
<ul class="list-unstyled mb-0" style="font-size: 0.78rem;">
|
<ul class="list-unstyled mb-0" style="font-size: 0.75rem;">
|
||||||
<% visita.historial.timeline_eventos.forEach(ev => { %>
|
<% visita.historial.timeline_eventos.forEach(ev => { %>
|
||||||
<li class="mb-2 pb-1 border-bottom border-light">
|
<li class="mb-2 pb-1 border-bottom border-light">
|
||||||
<div class="fw-bold text-dark"><%= ev.titulo %></div>
|
<div class="fw-bold text-dark"><%= ev.titulo %></div>
|
||||||
<% if (ev.descripcion) { %><div class="text-muted"><%= ev.descripcion %></div><% } %>
|
<% if (ev.descripcion) { %><div class="text-muted"><%= ev.descripcion %></div><% } %>
|
||||||
<div class="text-muted" style="font-size: 0.7rem;"><i class="fas fa-clock"></i> <%= new Date(ev.fecha).toLocaleString('es-EC') %> - <%= ev.usuarioNombre || 'Sistema' %></div>
|
<div class="text-muted" style="font-size: 0.68rem;"><i class="fas fa-clock"></i> <%= new Date(ev.fecha).toLocaleString('es-EC') %> - <%= ev.usuarioNombre || 'Sistema' %></div>
|
||||||
</li>
|
</li>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -221,71 +286,131 @@
|
|||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<div class="text-center mt-3 pt-2 border-top">
|
<div class="text-center mt-3 pt-2 border-top">
|
||||||
<a href="https://tareas.telcotronics.com" target="_blank" class="small text-muted text-decoration-none">
|
<a href="https://tareas.telcotronics.com" target="_blank" class="small text-muted text-decoration-none" style="font-size: 0.75rem;">
|
||||||
<i class="fas fa-external-link-alt me-1"></i> Abrir en tareas.telcotronics.com
|
<i class="fas fa-external-link-alt me-1"></i> Ver en tareas.telcotronics.com
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-9">
|
<!-- Columna Principal: Hilo y Respuesta Oficial -->
|
||||||
<div class="card mb-3">
|
<div class="col-lg-8">
|
||||||
<div class="card-header">
|
|
||||||
<strong><%= ticket.usuario_nombre %></strong> <span class="text-muted">- <%= ticket.created_at %></span>
|
<!-- Mensaje Inicial del Cliente -->
|
||||||
|
<div class="app-card mb-4 border-start border-4 border-primary">
|
||||||
|
<div class="app-card-header p-3 bg-light border-bottom d-flex align-items-center justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="user-avatar-initials-sm bg-primary text-white">
|
||||||
|
<%= (ticket.usuario_nombre || 'C').charAt(0).toUpperCase() %>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="fw-bold text-dark" style="font-size: 0.85rem;"><%= ticket.usuario_nombre %></span>
|
||||||
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle ms-1" style="font-size: 0.68rem;">Cliente Solicitante</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.72rem;"><%= new Date(ticket.created_at).toLocaleString('es-ES') %></small>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
|
<div class="ticket-description-body" style="white-space: pre-line; font-size: 0.92rem; line-height: 1.6;">
|
||||||
|
<%= ticket.mensaje %>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
|
||||||
<p><%= ticket.mensaje %></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Respuestas</h5>
|
<!-- Hilo de Respuestas -->
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||||
|
<h5 class="fw-bold mb-0 text-dark" style="font-size: 0.95rem;">
|
||||||
|
<i class="fas fa-comments text-primary me-1.5"></i> Conversación y Actuaciones (<%= respuestas.length %>)
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
<% if (respuestas.length === 0) { %>
|
<% if (respuestas.length === 0) { %>
|
||||||
<p class="text-muted">No hay respuestas aún</p>
|
<div class="app-card p-4 text-center mb-4 bg-light border">
|
||||||
<% } %>
|
<i class="far fa-comment-dots text-muted fs-3 mb-2"></i>
|
||||||
<% respuestas.forEach(r => { %>
|
<h6 class="fw-semibold text-secondary">Aún no se han emitido respuestas</h6>
|
||||||
<div class="card mb-2 <%= r.usuario_rol === 'agent' || r.usuario_rol === 'admin' ? 'border-primary' : '' %>">
|
<small class="text-muted">Sé el primero en responder o emitir instrucciones al cliente.</small>
|
||||||
<div class="card-header">
|
</div>
|
||||||
<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 class="conversation-thread mb-4 d-flex flex-column gap-3">
|
||||||
|
<% respuestas.forEach(r => { %>
|
||||||
|
<% const isStaff = ['agent', 'admin', 'superadmin'].includes(r.usuario_rol); %>
|
||||||
|
<div class="ticket-message-card <%= isStaff ? 'message-staff' : 'message-client' %>">
|
||||||
|
<div class="message-card-header d-flex align-items-center justify-content-between p-2.5 px-3 border-bottom">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="user-avatar-initials-sm" style="<%= isStaff ? 'background: #4f46e5; color: #fff;' : 'background: #64748b; color: #fff;' %>">
|
||||||
|
<%= (r.usuario_nombre || 'U').charAt(0).toUpperCase() %>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="fw-bold text-dark" style="font-size: 0.84rem;"><%= r.usuario_nombre %></span>
|
||||||
|
<% if (isStaff) { %>
|
||||||
|
<span class="badge bg-indigo-subtle text-indigo border ms-1" style="font-size: 0.68rem; color: #4f46e5; border-color: rgba(79,70,229,0.2) !important;">
|
||||||
|
<i class="fas fa-headset me-0.5"></i> Agente Oficial
|
||||||
|
</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="badge bg-secondary-subtle text-secondary border ms-1" style="font-size: 0.68rem;">Cliente</span>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.72rem;">
|
||||||
|
<%= new Date(r.created_at).toLocaleString('es-ES') %>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div class="message-card-body p-3">
|
||||||
|
<div style="white-space: pre-line; font-size: 0.90rem; line-height: 1.55;">
|
||||||
|
<%= r.mensaje %>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
|
||||||
<p class="mb-0" style="white-space: pre-wrap;"><%= r.mensaje %></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card mt-3">
|
<!-- Caja de Respuesta del Agente -->
|
||||||
<div class="card-header"><strong>Responder</strong></div>
|
<div class="app-card border shadow-sm">
|
||||||
<div class="card-body">
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-reply text-primary"></i>
|
||||||
|
<h6 class="mb-0 fw-bold" style="font-size: 0.88rem;">Emitir Respuesta Oficial al Cliente</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
<form action="/agent/ticket/<%= ticket.id %>/respond" method="POST">
|
<form action="/agent/ticket/<%= ticket.id %>/respond" method="POST">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<textarea name="mensaje" class="form-control" rows="3" required></textarea>
|
<textarea name="mensaje" class="form-control" rows="4" placeholder="Escribe el diagnóstico, avances o indicaciones para el solicitante..." required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<small class="text-muted" style="font-size: 0.75rem;">El cliente recibirá una notificación y podrá responder en el hilo.</small>
|
||||||
|
<button type="submit" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
<span>Publicar Respuesta</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary"><i class="fas fa-reply"></i> Responder</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- MODAL PROGRAMAR VISITA TÉCNICA (FSM / tareas.telcotronics.com) -->
|
<!-- MODAL PROGRAMAR VISITA TÉCNICA (FSM / tareas.telcotronics.com) -->
|
||||||
<div class="modal fade" id="modalVisita" tabindex="-1" aria-labelledby="modalVisitaLabel" aria-hidden="true">
|
<div class="modal fade" id="modalVisita" tabindex="-1" aria-labelledby="modalVisitaLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-lg">
|
<div class="modal-dialog modal-lg">
|
||||||
<div class="modal-content">
|
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||||
<form action="/agent/ticket/<%= ticket.id %>/visita" method="POST">
|
<form action="/agent/ticket/<%= ticket.id %>/visita" method="POST">
|
||||||
<div class="modal-header bg-warning text-dark">
|
<div class="modal-header bg-warning text-dark p-3 px-4">
|
||||||
<h5 class="modal-title" id="modalVisitaLabel"><i class="fas fa-truck-pickup me-2"></i>Programar Visita Técnica en Terreno</h5>
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-truck-pickup fs-5"></i>
|
||||||
|
<h5 class="modal-title fw-bold" id="modalVisitaLabel">Programar Visita Técnica en Terreno</h5>
|
||||||
|
</div>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body p-4">
|
||||||
<input type="hidden" name="tecnicoNombre" id="inputTecnicoNombre" value="<%= (tecnicosHub && tecnicosHub.length > 0) ? (tecnicosHub[0].nombre || tecnicosHub[0].email) : '' %>">
|
<input type="hidden" name="tecnicoNombre" id="inputTecnicoNombre" value="<%= (tecnicosHub && tecnicosHub.length > 0) ? (tecnicosHub[0].nombre || tecnicosHub[0].email) : '' %>">
|
||||||
|
|
||||||
<div class="row g-3">
|
<div class="row g-3">
|
||||||
<div class="col-md-7">
|
<div class="col-md-7">
|
||||||
<label class="form-label fw-bold">Técnico Responsable (Hub Telcotronics) <span class="text-danger">*</span></label>
|
<label class="form-label small fw-bold text-dark">Técnico de Campo (Hub Telcotronics) <span class="text-danger">*</span></label>
|
||||||
<select name="emailTecnico" id="selectTecnicoHub" class="form-select" required>
|
<select name="emailTecnico" id="selectTecnicoHub" class="form-select" required>
|
||||||
<% if (tecnicosHub && tecnicosHub.length > 0) { %>
|
<% if (tecnicosHub && tecnicosHub.length > 0) { %>
|
||||||
<% tecnicosHub.forEach(t => { %>
|
<% tecnicosHub.forEach(t => { %>
|
||||||
@@ -297,62 +422,65 @@
|
|||||||
<option value="pablinux@hotmail.es" data-nombre="pablinux">pablinux (pablinux@hotmail.es)</option>
|
<option value="pablinux@hotmail.es" data-nombre="pablinux">pablinux (pablinux@hotmail.es)</option>
|
||||||
<% } %>
|
<% } %>
|
||||||
</select>
|
</select>
|
||||||
<small class="text-muted">Lista en vivo conectada con tareas.telcotronics.com</small>
|
<small class="text-muted" style="font-size: 0.72rem;">Lista en vivo de usuarios sincronizada con tareas.telcotronics.com</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5">
|
<div class="col-md-5">
|
||||||
<label class="form-label fw-bold">Prioridad de Campo</label>
|
<label class="form-label small fw-bold text-dark">Prioridad de Despacho</label>
|
||||||
<select name="prioridad" class="form-select">
|
<select name="prioridad" class="form-select">
|
||||||
<option value="Media" <%= ticket.prioridad === 'media' ? 'selected' : '' %>>Media</option>
|
<option value="Media" <%= ticket.prioridad === 'media' ? 'selected' : '' %>>Media — Regular</option>
|
||||||
<option value="Alta" <%= ticket.prioridad === 'alta' || ticket.prioridad === 'critica' ? 'selected' : '' %>>Alta / Urgente</option>
|
<option value="Alta" <%= ticket.prioridad === 'alta' || ticket.prioridad === 'critica' ? 'selected' : '' %>>Alta — Urgente</option>
|
||||||
<option value="Baja" <%= ticket.prioridad === 'baja' ? 'selected' : '' %>>Baja</option>
|
<option value="Baja" <%= ticket.prioridad === 'baja' ? 'selected' : '' %>>Baja — Mantenimiento</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<label class="form-label fw-bold">Fecha y Hora de la Visita <span class="text-danger">*</span></label>
|
<label class="form-label small fw-bold text-dark">Fecha y Hora de Arribo <span class="text-danger">*</span></label>
|
||||||
<input type="datetime-local" name="fechaVisita" class="form-control" required>
|
<input type="datetime-local" name="fechaVisita" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<label class="form-label fw-bold">Fecha / Hora Límite Estimada</label>
|
<label class="form-label small fw-bold text-dark">Hora Límite Estimada</label>
|
||||||
<input type="datetime-local" name="fechaFin" class="form-control">
|
<input type="datetime-local" name="fechaFin" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<label class="form-label fw-bold">Dirección / Ubicación en Sitio <span class="text-danger">*</span></label>
|
<label class="form-label small fw-bold text-dark">Dirección / Ubicación en Sitio <span class="text-danger">*</span></label>
|
||||||
<input type="text" name="ubicacion" class="form-control" placeholder="Ej: Av. Amazonas N34-120 y Colón" required>
|
<input type="text" name="ubicacion" class="form-control" placeholder="Ej: Av. Amazonas N34-120 y Colón" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<label class="form-label fw-bold">Coordenadas GPS (Lat, Lng)</label>
|
<label class="form-label small fw-bold text-dark">Coordenadas GPS (Lat, Lng)</label>
|
||||||
<input type="text" name="coordenadas" class="form-control" placeholder="-0.180653, -78.467834">
|
<input type="text" name="coordenadas" class="form-control" placeholder="-0.180653, -78.467834">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<label class="form-label fw-bold">Referencia de Llegada</label>
|
<label class="form-label small fw-bold text-dark">Referencia de Acceso</label>
|
||||||
<input type="text" name="referencia" class="form-control" placeholder="Ej: Frente al centro comercial, edificio azul 3er piso">
|
<input type="text" name="referencia" class="form-control" placeholder="Ej: Frente al centro comercial, edificio azul 3er piso">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<label class="form-label fw-bold">Instrucciones / Asunto para el Técnico</label>
|
<label class="form-label small fw-bold text-dark">Instrucción / Título para el Técnico</label>
|
||||||
<input type="text" name="titulo" class="form-control" value="Visita Técnica: <%= ticket.asunto %>" required>
|
<input type="text" name="titulo" class="form-control" value="Visita Técnica: <%= ticket.asunto %>" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<label class="form-label fw-bold">Detalles / Síntomas Reportados por el Cliente</label>
|
<label class="form-label small fw-bold text-dark">Síntomas / Resumen del Problema</label>
|
||||||
<textarea name="descripcion" class="form-control" rows="2"><%= ticket.mensaje %></textarea>
|
<textarea name="descripcion" class="form-control" rows="2"><%= ticket.mensaje %></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<label class="form-label fw-bold">Checklist Inicial para el Técnico en Terreno (un ítem por línea)</label>
|
<label class="form-label small fw-bold text-dark">Checklist Inicial (un ítem por línea)</label>
|
||||||
<textarea name="checklist_items" class="form-control" rows="3">Revisión física de acometida y equipamiento
|
<textarea name="checklist_items" class="form-control" rows="3">Revisión física de acometida y equipamiento
|
||||||
Verificación de niveles y potencia óptica
|
Verificación de niveles y potencia óptica
|
||||||
Pruebas de servicio con el cliente y firma</textarea>
|
Pruebas de servicio con el cliente y firma digital</textarea>
|
||||||
<small class="text-muted">El técnico marcará estos ítems desde tareas.telcotronics.com conforme avance en la visita.</small>
|
<small class="text-muted" style="font-size: 0.72rem;">El técnico completará estos ítems desde el Hub móvil conforme ejecute el trabajo.</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer p-3 bg-light">
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||||
<button type="submit" class="btn btn-warning"><i class="fas fa-paper-plane me-1"></i> Asignar y Enviar al Hub</button>
|
<button type="submit" class="btn btn-warning fw-bold d-inline-flex align-items-center gap-1.5 shadow-sm">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
<span>Asignar y Despachar al Hub</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+195
-28
@@ -1,68 +1,235 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Mis Tickets'; %>
|
<% title = 'Mis Tickets'; %>
|
||||||
|
|
||||||
|
<%
|
||||||
|
const totalTickets = tickets.length;
|
||||||
|
const openTickets = tickets.filter(t => t.status === 'abierto').length;
|
||||||
|
const inProgressTickets = tickets.filter(t => t.status === 'en_progreso').length;
|
||||||
|
const closedTickets = tickets.filter(t => t.status === 'cerrado').length;
|
||||||
|
%>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div class="fw-medium"><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div class="fw-medium"><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Mis Tickets</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
<a href="/client/new-ticket" class="btn btn-primary">
|
<div>
|
||||||
<i class="fas fa-plus"></i> Nuevo Ticket
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Mis Solicitudes y Tickets</h1>
|
||||||
|
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem;">
|
||||||
|
Portal Clientes
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Monitorea en tiempo real el progreso de atención y despacho de tus incidencias.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/client/new-ticket" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||||
|
<i class="fas fa-plus-circle"></i>
|
||||||
|
<span>Nuevo Ticket</span>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-responsive">
|
<!-- Tarjetas KPI de Resumen -->
|
||||||
<table class="table table-striped table-hover">
|
<div class="row g-3 mb-4">
|
||||||
<thead class="table-dark">
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">Total Solicitudes</span>
|
||||||
|
<div class="kpi-icon-box bg-primary-subtle text-primary">
|
||||||
|
<i class="fas fa-ticket-alt"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value"><%= totalTickets %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Historial acumulado</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">Abiertos</span>
|
||||||
|
<div class="kpi-icon-box bg-success-subtle text-success">
|
||||||
|
<i class="fas fa-envelope-open-text"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value text-success"><%= openTickets %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Pendientes de atención</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">En Progreso / FSM</span>
|
||||||
|
<div class="kpi-icon-box bg-info-subtle text-info">
|
||||||
|
<i class="fas fa-tools"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value text-info"><%= inProgressTickets %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Con técnico asignado</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-lg-3">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span class="kpi-label">Resueltos</span>
|
||||||
|
<div class="kpi-icon-box bg-secondary-subtle text-secondary">
|
||||||
|
<i class="fas fa-check-double"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi-value text-secondary"><%= closedTickets %></div>
|
||||||
|
<div class="kpi-subtext text-muted">Casos cerrados</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabla de Tickets con Filtro Rápido -->
|
||||||
|
<div class="app-card mb-4">
|
||||||
|
<div class="app-card-header d-flex flex-wrap justify-content-between align-items-center gap-2 p-3">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-stream text-primary"></i>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Bandeja de Tickets</h5>
|
||||||
|
<span class="badge bg-light text-dark border ms-1"><%= tickets.length %></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Búsqueda rápida en navegador -->
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="input-group input-group-sm search-input-group">
|
||||||
|
<span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
|
||||||
|
<input type="text" id="ticketSearchInput" class="form-control border-start-0 ps-0" placeholder="Buscar por asunto, ID o área..." onkeyup="filterTicketsTable()">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table app-table mb-0" id="ticketsTable">
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th style="width: 75px;">ID</th>
|
||||||
<th>Asunto</th>
|
<th>Asunto & Descripción</th>
|
||||||
<th>Departamento</th>
|
<th>Departamento</th>
|
||||||
<th>Prioridad</th>
|
<th>Prioridad</th>
|
||||||
<th>Estado</th>
|
<th>Estado</th>
|
||||||
<th>Asignado</th>
|
<th>Técnico / FSM</th>
|
||||||
<th>Fecha</th>
|
<th>Fecha</th>
|
||||||
<th>Acción</th>
|
<th class="text-end" style="width: 110px;">Acción</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<% if (tickets.length === 0) { %>
|
<% if (tickets.length === 0) { %>
|
||||||
<tr><td colspan="8" class="text-center">No tienes tickets aún</td></tr>
|
|
||||||
<% } %>
|
|
||||||
<% tickets.forEach(ticket => { %>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>#<%= ticket.id %></td>
|
<td colspan="8" class="text-center py-5">
|
||||||
<td><%= ticket.asunto %></td>
|
<div class="empty-state-wrapper text-center">
|
||||||
<td><%= ticket.departamento_nombre || 'Sin departamento' %></td>
|
<img src="/img/bot-soporte.svg" alt="Sin tickets" width="72" height="72" class="mb-3 opacity-75">
|
||||||
|
<h5 class="fw-bold text-dark">No tienes tickets abiertos actualmente</h5>
|
||||||
|
<p class="text-muted small mb-3">Si tienes algún problema o requieres asistencia técnica, genera un ticket aquí.</p>
|
||||||
|
<a href="/client/new-ticket" class="btn btn-primary btn-sm px-3 rounded-pill">
|
||||||
|
<i class="fas fa-plus me-1"></i> Crear mi primer ticket
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<% tickets.forEach(ticket => { %>
|
||||||
|
<tr class="ticket-row" data-status="<%= ticket.status %>">
|
||||||
<td>
|
<td>
|
||||||
<span class="badge bg-<%= ticket.prioridad === 'alta' ? 'danger' : ticket.prioridad === 'critica' ? 'dark' : ticket.prioridad === 'media' ? 'warning' : 'info' %>">
|
<span class="badge bg-light text-dark border fw-bold">#<%= ticket.id %></span>
|
||||||
<%= ticket.prioridad %>
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="fw-semibold text-dark text-truncate" style="max-width: 280px;">
|
||||||
|
<%= ticket.asunto %>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-secondary small d-inline-flex align-items-center gap-1">
|
||||||
|
<i class="fas fa-folder-open text-muted"></i>
|
||||||
|
<%= ticket.departamento_nombre || 'General' %>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge bg-<%= ticket.status === 'abierto' ? 'success' : ticket.status === 'en_progreso' ? 'primary' : 'secondary' %>">
|
<% if (ticket.prioridad === 'critica') { %>
|
||||||
<%= ticket.status %>
|
<span class="priority-pill priority-critica"><i class="fas fa-fire me-1"></i>Crítica</span>
|
||||||
|
<% } else if (ticket.prioridad === 'alta') { %>
|
||||||
|
<span class="priority-pill priority-alta"><i class="fas fa-exclamation-circle me-1"></i>Alta</span>
|
||||||
|
<% } else if (ticket.prioridad === 'media') { %>
|
||||||
|
<span class="priority-pill priority-media"><i class="fas fa-minus-circle me-1"></i>Media</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="priority-pill priority-baja"><i class="fas fa-arrow-down me-1"></i>Baja</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (ticket.status === 'abierto') { %>
|
||||||
|
<span class="status-pill status-abierto"><span class="status-dot"></span>Abierto</span>
|
||||||
|
<% } else if (ticket.status === 'en_progreso') { %>
|
||||||
|
<span class="status-pill status-en-progreso"><span class="status-dot"></span>En Progreso</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="status-pill status-cerrado"><span class="status-dot"></span>Cerrado</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (ticket.asignado_nombre) { %>
|
||||||
|
<div class="d-flex align-items-center gap-1.5 text-secondary small">
|
||||||
|
<i class="fas fa-user-check text-success"></i>
|
||||||
|
<span><%= ticket.asignado_nombre %></span>
|
||||||
|
</div>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="badge bg-light text-muted border" style="font-size: 0.72rem;">Sin asignar</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-muted small" style="font-size: 0.75rem;">
|
||||||
|
<%= new Date(ticket.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' }) %>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td><%= ticket.asignado_nombre || 'Sin asignar' %></td>
|
<td class="text-end">
|
||||||
<td><%= ticket.created_at %></td>
|
<a href="/client/ticket/<%= ticket.id %>" class="btn btn-action-view btn-sm d-inline-flex align-items-center gap-1">
|
||||||
<td>
|
<span>Ver</span>
|
||||||
<a href="/client/ticket/<%= ticket.id %>" class="btn btn-sm btn-info">
|
<i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
|
||||||
<i class="fas fa-eye"></i>
|
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Filtro interactivo de la tabla de tickets
|
||||||
|
function filterTicketsTable() {
|
||||||
|
const query = document.getElementById('ticketSearchInput').value.toLowerCase();
|
||||||
|
const rows = document.querySelectorAll('#ticketsTable tbody tr.ticket-row');
|
||||||
|
|
||||||
|
rows.forEach(row => {
|
||||||
|
const text = row.innerText.toLowerCase();
|
||||||
|
if (text.includes(query)) {
|
||||||
|
row.style.display = '';
|
||||||
|
} else {
|
||||||
|
row.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<%- include('../partials/footer') %>
|
<%- include('../partials/footer') %>
|
||||||
|
|||||||
+123
-27
@@ -1,59 +1,155 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Nuevo Ticket'; %>
|
<% title = 'Nuevo Ticket'; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera -->
|
||||||
<h1 class="h2">Nuevo Ticket</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
|
<div>
|
||||||
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Generar Solicitud de Soporte</h1>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Describe el problema o requerimiento para canalizarlo al equipo técnico correspondiente.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/client/dashboard" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
<span>Volver a mis tickets</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row g-4">
|
||||||
<div class="col-md-8">
|
<!-- Formulario Principal -->
|
||||||
<div class="card">
|
<div class="col-lg-8">
|
||||||
<div class="card-body">
|
<div class="app-card">
|
||||||
<form action="/client/new-ticket" method="POST">
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||||
<div class="mb-3">
|
<div class="app-card-icon-header">
|
||||||
<label class="form-label">Asunto</label>
|
<i class="fas fa-edit text-primary"></i>
|
||||||
<input type="text" name="asunto" class="form-control" required>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Detalles de la Incidencia</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
|
<form action="/client/new-ticket" method="POST">
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Departamento</label>
|
<label class="form-label text-dark fw-semibold small">Asunto o Título Resumido <span class="text-danger">*</span></label>
|
||||||
<select name="department_id" class="form-select">
|
<div class="input-group">
|
||||||
<option value="">Sin departamento</option>
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-heading"></i></span>
|
||||||
|
<input type="text" name="asunto" class="form-control border-start-0" placeholder="Ej: Falla de conectividad en enlace principal de fibra" required autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.74rem;">Sé lo más específico posible para acelerar el triaje técnico.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row g-3 mb-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label text-dark fw-semibold small">Departamento / Especialidad</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-network-wired"></i></span>
|
||||||
|
<select name="department_id" class="form-select border-start-0">
|
||||||
|
<option value="">Soporte General</option>
|
||||||
<% departments.forEach(dept => { %>
|
<% departments.forEach(dept => { %>
|
||||||
<option value="<%= dept.id %>"><%= dept.nombre %></option>
|
<option value="<%= dept.id %>"><%= dept.nombre %></option>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
</div>
|
||||||
<label class="form-label">Prioridad</label>
|
|
||||||
<select name="prioridad" class="form-select">
|
<div class="col-md-6">
|
||||||
<option value="baja">Baja</option>
|
<label class="form-label text-dark fw-semibold small">Nivel de Prioridad Estimado</label>
|
||||||
<option value="media" selected>Media</option>
|
<div class="input-group">
|
||||||
<option value="alta">Alta</option>
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-exclamation-triangle"></i></span>
|
||||||
<option value="critica">Crítica</option>
|
<select name="prioridad" class="form-select border-start-0">
|
||||||
|
<option value="baja">Baja — Consultas o tareas menores</option>
|
||||||
|
<option value="media" selected>Media — Afectación parcial normal</option>
|
||||||
|
<option value="alta">Alta — Impacto operativo significativo</option>
|
||||||
|
<option value="critica">Crítica — Caída total de servicio</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Mensaje</label>
|
|
||||||
<textarea name="mensaje" class="form-control" rows="6" required></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">
|
</div>
|
||||||
<i class="fas fa-paper-plane"></i> Enviar Ticket
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="form-label text-dark fw-semibold small">Descripción Detallada y Evidencias <span class="text-danger">*</span></label>
|
||||||
|
<textarea name="mensaje" class="form-control" rows="7" placeholder="Por favor detalla: 1. ¿Qué suceso o anomalía observas? 2. ¿A qué equipos, sedes o usuarios afecta? 3. ¿Qué pasos ya se han intentado para mitigar?" required></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||||
|
<a href="/client/dashboard" class="btn btn-light border text-muted btn-sm px-3">
|
||||||
|
Cancelar
|
||||||
|
</a>
|
||||||
|
<button type="submit" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
<span>Registrar y Despachar Ticket</span>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Panel Lateral Informativo -->
|
||||||
|
<div class="col-lg-4">
|
||||||
|
|
||||||
|
<!-- Tarjeta del Bot de Soporte -->
|
||||||
|
<div class="app-card mb-3 p-3 text-center bg-gradient-light border">
|
||||||
|
<img src="/img/bot-soporte.svg" alt="Bot Soporte" width="68" height="68" class="mb-2 bot-avatar-img">
|
||||||
|
<h6 class="fw-bold text-dark mb-1">Mesa de Ayuda SIGMA</h6>
|
||||||
|
<p class="text-muted small mb-2" style="font-size: 0.78rem;">
|
||||||
|
Tu ticket entrará inmediatamente en nuestra cola de triaje automatizada.
|
||||||
|
</p>
|
||||||
|
<div class="d-inline-flex align-items-center gap-1.5 bot-status-pill" style="font-size: 0.72rem; padding: 0.25rem 0.65rem;">
|
||||||
|
<span class="bot-status-dot"></span>
|
||||||
|
<span>Tiempo estimado de respuesta: < 15 min</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tarjeta de Buenas Prácticas -->
|
||||||
|
<div class="app-card p-3">
|
||||||
|
<h6 class="fw-bold text-dark mb-2" style="font-size: 0.85rem;">
|
||||||
|
<i class="fas fa-lightbulb text-warning me-1.5"></i> Consejos para agilizar
|
||||||
|
</h6>
|
||||||
|
<ul class="list-unstyled small text-muted mb-0 d-flex flex-column gap-2" style="font-size: 0.78rem;">
|
||||||
|
<li class="d-flex align-items-start gap-2">
|
||||||
|
<i class="fas fa-check text-success mt-1"></i>
|
||||||
|
<span>Indica marcas, modelos o números de serie si corresponde a hardware.</span>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex align-items-start gap-2">
|
||||||
|
<i class="fas fa-check text-success mt-1"></i>
|
||||||
|
<span>Si es una sede remota, especifica dirección o persona de contacto en sitio.</span>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex align-items-start gap-2">
|
||||||
|
<i class="fas fa-check text-success mt-1"></i>
|
||||||
|
<span>Podrás adjuntar respuestas o consultar avances en tiempo real desde tu panel.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%- include('../partials/footer') %>
|
<%- include('../partials/footer') %>
|
||||||
|
|||||||
+180
-48
@@ -1,87 +1,219 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Ticket #' + ticket.id; %>
|
<% title = 'Ticket #' + ticket.id + ' — ' + ticket.asunto; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera del Ticket -->
|
||||||
<h1 class="h2">Ticket #<%= ticket.id %>: <%= ticket.asunto %></h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
<div>
|
<div>
|
||||||
|
<div class="d-flex flex-wrap align-items-center gap-2 mb-1">
|
||||||
|
<span class="badge bg-light text-dark border px-2.5 py-1.5 fw-bold" style="font-size: 0.85rem;">Ticket #<%= ticket.id %></span>
|
||||||
|
<h1 class="page-title h3 mb-0"><%= ticket.asunto %></h1>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-center gap-2 text-muted small">
|
||||||
|
<span><i class="far fa-calendar-alt me-1"></i><%= new Date(ticket.created_at).toLocaleString('es-ES') %></span>
|
||||||
|
<span>•</span>
|
||||||
|
<span><i class="fas fa-folder me-1"></i><%= ticket.departamento_nombre || 'Soporte General' %></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<% if (ticket.status !== 'cerrado') { %>
|
||||||
<form action="/client/ticket/<%= ticket.id %>/close" method="POST" style="display:inline">
|
<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?')">
|
<button type="submit" class="btn btn-outline-warning btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3" onclick="return confirm('¿Confirmas dar por resuelto y cerrar este ticket?')">
|
||||||
<i class="fas fa-times"></i> Cerrar Ticket
|
<i class="fas fa-check"></i>
|
||||||
|
<span>Cerrar Ticket</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<a href="/client/dashboard" class="btn btn-secondary">
|
<% } %>
|
||||||
<i class="fas fa-arrow-left"></i> Volver
|
<a href="/client/dashboard" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
<span>Volver</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row g-4">
|
||||||
<div class="col-md-3">
|
<!-- Columna Izquierda: Información de Ficha -->
|
||||||
<div class="card mb-3">
|
<div class="col-lg-4 order-lg-2">
|
||||||
<div class="card-header"><h6 class="mb-0">Información</h6></div>
|
<div class="app-card mb-3">
|
||||||
<div class="card-body">
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||||
<p><strong>Estado:</strong>
|
<h6 class="mb-0 fw-bold" style="font-size: 0.88rem;">
|
||||||
<span class="badge bg-<%= ticket.status === 'abierto' ? 'success' : ticket.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= ticket.status %></span>
|
<i class="fas fa-info-circle text-primary me-1.5"></i> Ficha del Ticket
|
||||||
</p>
|
</h6>
|
||||||
<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 class="card-body p-3">
|
||||||
|
<div class="ticket-meta-item mb-2.5">
|
||||||
|
<span class="text-muted small d-block">Estado de Atención:</span>
|
||||||
|
<% if (ticket.status === 'abierto') { %>
|
||||||
|
<span class="status-pill status-abierto mt-1"><span class="status-dot"></span>Abierto</span>
|
||||||
|
<% } else if (ticket.status === 'en_progreso') { %>
|
||||||
|
<span class="status-pill status-en-progreso mt-1"><span class="status-dot"></span>En Progreso</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="status-pill status-cerrado mt-1"><span class="status-dot"></span>Cerrado</span>
|
||||||
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="ticket-meta-item mb-2.5">
|
||||||
|
<span class="text-muted small d-block">Prioridad:</span>
|
||||||
|
<% if (ticket.prioridad === 'critica') { %>
|
||||||
|
<span class="priority-pill priority-critica mt-1"><i class="fas fa-fire me-1"></i>Crítica</span>
|
||||||
|
<% } else if (ticket.prioridad === 'alta') { %>
|
||||||
|
<span class="priority-pill priority-alta mt-1"><i class="fas fa-exclamation-circle me-1"></i>Alta</span>
|
||||||
|
<% } else if (ticket.prioridad === 'media') { %>
|
||||||
|
<span class="priority-pill priority-media mt-1"><i class="fas fa-minus-circle me-1"></i>Media</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="priority-pill priority-baja mt-1"><i class="fas fa-arrow-down me-1"></i>Baja</span>
|
||||||
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-9">
|
|
||||||
<div class="card mb-3">
|
<div class="ticket-meta-item mb-2.5">
|
||||||
<div class="card-header">
|
<span class="text-muted small d-block">Especialista Asignado:</span>
|
||||||
<strong><%= ticket.usuario_nombre %></strong>
|
<div class="fw-semibold text-dark mt-1 d-flex align-items-center gap-1.5" style="font-size: 0.84rem;">
|
||||||
<span class="text-muted">- <%= ticket.created_at %></span>
|
<i class="fas fa-user-shield text-indigo" style="color: #4f46e5;"></i>
|
||||||
</div>
|
<span><%= ticket.asignado_nombre || 'En asignación de guardia' %></span>
|
||||||
<div class="card-body">
|
|
||||||
<p><%= ticket.mensaje %></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Respuestas</h5>
|
<div class="ticket-meta-item">
|
||||||
<% if (respuestas.length === 0) { %>
|
<span class="text-muted small d-block">Solicitante:</span>
|
||||||
<p class="text-muted">No hay respuestas aún</p>
|
<div class="fw-medium text-dark mt-1" style="font-size: 0.84rem;">
|
||||||
<% } %>
|
<%= ticket.usuario_nombre %>
|
||||||
<% respuestas.forEach(r => { %>
|
</div>
|
||||||
<div class="card mb-2 <%= r.usuario_rol === 'agent' || r.usuario_rol === 'admin' ? 'border-primary' : '' %>">
|
</div>
|
||||||
<div class="card-header">
|
</div>
|
||||||
<strong><%= r.usuario_nombre %></strong>
|
</div>
|
||||||
<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>
|
<!-- Asistencia Rápida -->
|
||||||
|
<div class="app-card p-3 text-center bg-light border">
|
||||||
|
<img src="/img/bot-soporte.svg" alt="Bot Soporte" width="46" height="46" class="mb-2">
|
||||||
|
<div class="fw-bold text-dark" style="font-size: 0.8rem;">¿Requieres añadir más detalles?</div>
|
||||||
|
<small class="text-muted d-block" style="font-size: 0.72rem;">Usa la caja de comentarios abajo para enviar mensajes directamente al técnico.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna Derecha: Hilo de Conversación -->
|
||||||
|
<div class="col-lg-8 order-lg-1">
|
||||||
|
|
||||||
|
<!-- Mensaje Original del Cliente -->
|
||||||
|
<div class="app-card mb-4 border-start border-4 border-primary">
|
||||||
|
<div class="app-card-header p-3 bg-light border-bottom d-flex align-items-center justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="user-avatar-initials-sm bg-primary text-white">
|
||||||
|
<%= (ticket.usuario_nombre || 'C').charAt(0).toUpperCase() %>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="fw-bold text-dark" style="font-size: 0.85rem;"><%= ticket.usuario_nombre %></span>
|
||||||
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle ms-1" style="font-size: 0.68rem;">Autor del Ticket</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.72rem;"><%= new Date(ticket.created_at).toLocaleString('es-ES') %></small>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
|
<div class="ticket-description-body" style="white-space: pre-line; font-size: 0.92rem; line-height: 1.6;">
|
||||||
|
<%= ticket.mensaje %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hilo de Respuestas -->
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||||
|
<h5 class="fw-bold mb-0 text-dark" style="font-size: 0.95rem;">
|
||||||
|
<i class="fas fa-comments text-primary me-1.5"></i> Hilo de Conversación (<%= respuestas.length %>)
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<% if (respuestas.length === 0) { %>
|
||||||
|
<div class="app-card p-4 text-center mb-4 bg-light border">
|
||||||
|
<i class="far fa-clock text-muted fs-3 mb-2"></i>
|
||||||
|
<h6 class="fw-semibold text-secondary">Aún no hay respuestas en este ticket</h6>
|
||||||
|
<small class="text-muted">Un agente técnico revisará tu solicitud a la brevedad posible.</small>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<div class="conversation-thread mb-4 d-flex flex-column gap-3">
|
||||||
|
<% respuestas.forEach(r => { %>
|
||||||
|
<% const isStaff = ['agent', 'admin', 'superadmin'].includes(r.usuario_rol); %>
|
||||||
|
<div class="ticket-message-card <%= isStaff ? 'message-staff' : 'message-client' %>">
|
||||||
|
<div class="message-card-header d-flex align-items-center justify-content-between p-2.5 px-3 border-bottom">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="user-avatar-initials-sm <%= isStaff ? 'bg-indigo text-white' : 'bg-secondary text-white' %>" style="<%= isStaff ? 'background: #4f46e5;' : '' %>">
|
||||||
|
<%= (r.usuario_nombre || 'U').charAt(0).toUpperCase() %>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="fw-bold text-dark" style="font-size: 0.84rem;"><%= r.usuario_nombre %></span>
|
||||||
|
<% if (isStaff) { %>
|
||||||
|
<span class="badge bg-indigo-subtle text-indigo border ms-1" style="font-size: 0.68rem; color: #4f46e5; border-color: rgba(79,70,229,0.2) !important;">
|
||||||
|
<i class="fas fa-shield-alt me-0.5"></i> Soporte Oficial
|
||||||
|
</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="badge bg-secondary-subtle text-secondary border ms-1" style="font-size: 0.68rem;">Cliente</span>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.72rem;">
|
||||||
|
<%= new Date(r.created_at).toLocaleString('es-ES') %>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div class="message-card-body p-3">
|
||||||
|
<div style="white-space: pre-line; font-size: 0.90rem; line-height: 1.55;">
|
||||||
|
<%= r.mensaje %>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
|
||||||
<p class="mb-0"><%= r.mensaje %></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card mt-3">
|
<!-- Caja de Respuesta -->
|
||||||
<div class="card-header"><strong>Responder</strong></div>
|
<% if (ticket.status !== 'cerrado') { %>
|
||||||
<div class="card-body">
|
<div class="app-card border shadow-sm">
|
||||||
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-reply text-primary"></i>
|
||||||
|
<h6 class="mb-0 fw-bold" style="font-size: 0.88rem;">Añadir Respuesta o Información Adicional</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
<form action="/client/ticket/<%= ticket.id %>/respond" method="POST">
|
<form action="/client/ticket/<%= ticket.id %>/respond" method="POST">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<textarea name="mensaje" class="form-control" rows="3" required></textarea>
|
<textarea name="mensaje" class="form-control" rows="4" placeholder="Escribe aquí tu respuesta, confirmación o detalle adicional para el equipo técnico..." required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-end">
|
||||||
|
<button type="submit" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
<span>Enviar Mensaje</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary"><i class="fas fa-reply"></i> Responder</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<% } else { %>
|
||||||
|
<div class="alert alert-secondary d-flex align-items-center gap-2 rounded-3 border">
|
||||||
|
<i class="fas fa-lock fs-5"></i>
|
||||||
|
<div>Este ticket se encuentra cerrado. Si experimentas una nueva incidencia, por favor abre un nuevo ticket.</div>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
+96
-26
@@ -1,53 +1,123 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Configuración'; %>
|
<% title = 'Configuración de la Empresa'; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Configuración de la Empresa</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
|
<div>
|
||||||
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Ajustes de Organización</h1>
|
||||||
|
<span class="badge company-plan-badge" style="font-size: 0.75rem;">
|
||||||
|
<%= (company.plan || 'Plan').toUpperCase() %>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Información del tenant, cuotas contratadas y parámetros de la empresa.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row g-4">
|
||||||
<div class="col-md-6">
|
<!-- Formulario de Datos Básicos -->
|
||||||
<div class="card mb-3">
|
<div class="col-lg-6">
|
||||||
<div class="card-header"><h5>Información</h5></div>
|
<div class="app-card h-100">
|
||||||
<div class="card-body">
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-building text-primary"></i>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Identidad Corporativa</h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
<form action="/company/update" method="POST">
|
<form action="/company/update" method="POST">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Nombre</label>
|
<label class="form-label text-dark fw-semibold small">Nombre de la Organización</label>
|
||||||
<input type="text" name="name" class="form-control" value="<%= company.name %>">
|
<div class="input-group">
|
||||||
|
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-signature"></i></span>
|
||||||
|
<input type="text" name="name" class="form-control border-start-0" value="<%= company.name %>" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label text-dark fw-semibold small">Slug / Identificador de Tenant</label>
|
||||||
|
<input type="text" class="form-control bg-light text-muted" value="<%= company.slug %>" readonly>
|
||||||
|
<small class="text-muted" style="font-size: 0.72rem;">El slug es administrado por el Superadmin.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-2 border-top">
|
||||||
|
<button type="submit" class="btn btn-primary btn-cta shadow-sm">
|
||||||
|
<i class="fas fa-save me-1"></i> Guardar Cambios
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Guardar</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="card mb-3">
|
<!-- Cuotas y Plan -->
|
||||||
<div class="card-header"><h5>Plan y Límites</h5></div>
|
<div class="col-lg-6">
|
||||||
<div class="card-body">
|
<div class="app-card h-100">
|
||||||
<p><strong>Plan:</strong> <span class="badge bg-<%= company.plan === 'enterprise' ? 'danger' : company.plan === 'pro' ? 'warning' : 'secondary' %>"><%= company.plan %></span></p>
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||||
<p><strong>Usuarios:</strong> <%= userCount %> / <%= company.max_users %></p>
|
<div class="d-flex align-items-center gap-2">
|
||||||
<p><strong>Tickets:</strong> <%= ticketCount %> / <%= company.max_tickets %></p>
|
<i class="fas fa-tachometer-alt text-info"></i>
|
||||||
<div class="progress mb-2">
|
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Consumo de Cuotas y Plan</h5>
|
||||||
<div class="progress-bar" style="width: <%= Math.min(100, (userCount / company.max_users) * 100) %>%">
|
</div>
|
||||||
<%= Math.round((userCount / company.max_users) * 100) %>% usuarios
|
<span class="badge bg-light text-dark border">Ecosistema SIGMA</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3 p-md-4">
|
||||||
|
|
||||||
|
<!-- Barra Usuarios -->
|
||||||
|
<% const pctUsers = Math.min(100, Math.round((userCount / company.max_users) * 100)); %>
|
||||||
|
<div class="mb-4">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||||
|
<span class="small fw-bold text-dark">Usuarios Activos:</span>
|
||||||
|
<span class="small text-muted"><%= userCount %> de <%= company.max_users %> (<%= pctUsers %>%)</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress" style="height: 10px; border-radius: 9999px;">
|
||||||
|
<div class="progress-bar <%= pctUsers > 85 ? 'bg-danger' : 'bg-primary' %>" style="width: <%= pctUsers %>%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress">
|
|
||||||
<div class="progress-bar bg-success" style="width: <%= Math.min(100, (ticketCount / company.max_tickets) * 100) %>%">
|
<!-- Barra Tickets -->
|
||||||
<%= Math.round((ticketCount / company.max_tickets) * 100) %>% tickets
|
<% const pctTickets = Math.min(100, Math.round((ticketCount / company.max_tickets) * 100)); %>
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||||
|
<span class="small fw-bold text-dark">Volumen de Tickets:</span>
|
||||||
|
<span class="small text-muted"><%= ticketCount %> de <%= company.max_tickets %> (<%= pctTickets %>%)</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress" style="height: 10px; border-radius: 9999px;">
|
||||||
|
<div class="progress-bar <%= pctTickets > 85 ? 'bg-danger' : 'bg-success' %>" style="width: <%= pctTickets %>%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3 mt-4 rounded-3 bg-light border border-slate-200">
|
||||||
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<i class="fas fa-shield-alt text-primary"></i>
|
||||||
|
<span class="fw-bold text-dark small">Aislamiento Multi-Tenant Certificado</span>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted d-block" style="font-size: 0.74rem;">
|
||||||
|
Tus registros, tickets y evidencias se encuentran estrictamente particionados y asegurados con MariaDB.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,17 +9,21 @@
|
|||||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
|
||||||
<link rel="shortcut icon" href="/favicon.ico">
|
<link rel="shortcut icon" href="/favicon.ico">
|
||||||
|
<!-- Google Fonts: Plus Jakarta Sans -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
<link href="/css/style.css" rel="stylesheet">
|
<link href="/css/style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="<%= user ? 'app-body' : 'auth-body' %>">
|
||||||
<%- include('navbar') %>
|
<%- include('navbar') %>
|
||||||
<div class="container-fluid">
|
<div class="container-fluid app-container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<% if (user) { %>
|
<% if (user) { %>
|
||||||
<%- include('sidebar') %>
|
<%- include('sidebar') %>
|
||||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-4">
|
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
<main class="col-12 px-2 px-sm-3 px-md-4">
|
<main class="col-12 px-2 px-sm-3 px-md-4">
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|||||||
+43
-13
@@ -1,17 +1,47 @@
|
|||||||
<nav class="navbar navbar-dark bg-dark sticky-top">
|
<nav class="navbar navbar-dark bg-dark sticky-top app-topbar">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid px-3">
|
||||||
<a class="navbar-brand d-flex align-items-center gap-2" href="/">
|
<div class="d-flex align-items-center gap-2">
|
||||||
<img src="/img/logo.svg" alt="Help Desk Logo" width="28" height="28" class="d-inline-block align-text-top rounded-1">
|
|
||||||
<span>Help Desk</span>
|
|
||||||
</a>
|
|
||||||
<% if (user) { %>
|
<% if (user) { %>
|
||||||
<div class="d-flex align-items-center">
|
<button class="btn btn-sm btn-icon-glass text-white d-md-none me-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-label="Abrir menú">
|
||||||
<span class="text-light me-3">
|
<i class="fas fa-bars fs-5"></i>
|
||||||
<i class="fas fa-user"></i> <%= user.nombre %>
|
</button>
|
||||||
<span class="badge bg-info ms-1"><%= user.rol %></span>
|
<% } %>
|
||||||
</span>
|
<a class="navbar-brand d-flex align-items-center gap-2 m-0" href="/">
|
||||||
<a href="/logout" class="btn btn-outline-light btn-sm">
|
<div class="brand-logo-glow">
|
||||||
<i class="fas fa-sign-out-alt"></i> Salir
|
<img src="/img/logo.svg" alt="Help Desk Logo" width="28" height="28" class="d-inline-block align-text-top rounded-1">
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<span class="brand-text">Help Desk <span class="brand-subtext d-none d-sm-inline">& FSM</span></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<% if (typeof company !== 'undefined' && company) { %>
|
||||||
|
<div class="company-nav-pill ms-2 d-none d-lg-flex align-items-center gap-1.5">
|
||||||
|
<i class="fas fa-building text-info" style="font-size: 0.75rem;"></i>
|
||||||
|
<span class="company-name-text"><%= company.name %></span>
|
||||||
|
<span class="badge company-plan-badge"><%= company.plan %></span>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<% if (user) { %>
|
||||||
|
<div class="d-flex align-items-center gap-2 gap-sm-3">
|
||||||
|
<div class="user-profile-badge d-flex align-items-center gap-2">
|
||||||
|
<% if (user.avatar_url) { %>
|
||||||
|
<img src="<%= user.avatar_url %>" alt="<%= user.nombre %>" class="user-avatar-img">
|
||||||
|
<% } else { %>
|
||||||
|
<div class="user-avatar-initials">
|
||||||
|
<%= (user.nombre || 'U').charAt(0).toUpperCase() %>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<div class="d-none d-sm-flex flex-column text-start">
|
||||||
|
<span class="user-nav-name"><%= user.nombre %></span>
|
||||||
|
<span class="user-nav-role badge-role-<%= user.rol %>"><%= user.rol %></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="/logout" class="btn btn-logout-glass btn-sm d-flex align-items-center gap-1.5" title="Cerrar Sesión">
|
||||||
|
<i class="fas fa-sign-out-alt"></i>
|
||||||
|
<span class="d-none d-md-inline">Salir</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|||||||
+73
-29
@@ -1,70 +1,114 @@
|
|||||||
<nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
|
<div class="offcanvas-md offcanvas-start app-sidebar col-md-3 col-lg-2" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
|
||||||
<div class="position-sticky pt-3">
|
|
||||||
<% if (company) { %>
|
<!-- Header para Móvil (Offcanvas) -->
|
||||||
<div class="px-3 mb-3">
|
<div class="offcanvas-header d-md-none border-bottom p-3">
|
||||||
<small class="text-muted"><%= company.name %></small>
|
<div class="d-flex align-items-center gap-2">
|
||||||
<span class="badge bg-info"><%= company.plan %></span>
|
<img src="/img/logo.svg" alt="Logo" width="24" height="24" class="rounded-1">
|
||||||
|
<h6 class="offcanvas-title mb-0 fw-bold" id="sidebarMenuLabel">Menú Principal</h6>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Cerrar"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="offcanvas-body d-flex flex-column p-3 pt-md-3 h-100">
|
||||||
|
|
||||||
|
<!-- Ficha de Organización / Tenant -->
|
||||||
|
<% if (typeof company !== 'undefined' && company) { %>
|
||||||
|
<div class="sidebar-company-card mb-3 p-2.5 rounded-3">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-1">
|
||||||
|
<span class="company-card-title text-truncate fw-bold text-dark" style="font-size: 0.84rem;"><%= company.name %></span>
|
||||||
|
<span class="badge company-plan-badge"><%= (company.plan || 'Plan').toUpperCase() %></span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center gap-1.5 text-muted" style="font-size: 0.72rem;">
|
||||||
|
<span class="company-status-dot"></span>
|
||||||
|
<span>Tenant <%= company.slug || 'activo' %></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
<ul class="nav flex-column">
|
|
||||||
|
<!-- Lista de Navegación -->
|
||||||
|
<ul class="nav flex-column sidebar-nav flex-grow-1 gap-1">
|
||||||
|
|
||||||
|
<li class="sidebar-heading">OPERACIONES</li>
|
||||||
|
|
||||||
<% if (user.rol === 'superadmin') { %>
|
<% if (user.rol === 'superadmin') { %>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/saas/companies">
|
<a class="nav-link <%= typeof title !== 'undefined' && title === 'Empresas' ? 'active' : '' %>" href="/saas/companies">
|
||||||
<i class="fas fa-building"></i> Empresas
|
<div class="nav-icon-wrapper"><i class="fas fa-sitemap"></i></div>
|
||||||
</a>
|
<span>Empresas SaaS</span>
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="/admin/dashboard">
|
|
||||||
<i class="fas fa-tachometer-alt"></i> Mi Empresa
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/<%= ['superadmin','admin'].includes(user.rol) ? 'admin' : user.rol %>/dashboard">
|
<a class="nav-link <%= typeof title !== 'undefined' && (title.includes('Dashboard') || title === 'Mis Tickets') ? 'active' : '' %>" href="/<%= ['superadmin','admin'].includes(user.rol) ? 'admin' : user.rol %>/dashboard">
|
||||||
<i class="fas fa-tachometer-alt"></i> Dashboard
|
<div class="nav-icon-wrapper"><i class="fas fa-chart-pie"></i></div>
|
||||||
|
<span>Dashboard</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<% if (user.rol === 'client') { %>
|
<% if (user.rol === 'client') { %>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/client/new-ticket">
|
<a class="nav-link <%= typeof title !== 'undefined' && title === 'Nuevo Ticket' ? 'active' : '' %>" href="/client/new-ticket">
|
||||||
<i class="fas fa-plus-circle"></i> Nuevo Ticket
|
<div class="nav-icon-wrapper text-primary"><i class="fas fa-plus-circle"></i></div>
|
||||||
|
<span>Nuevo Ticket</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/client/dashboard">
|
<a class="nav-link <%= typeof title !== 'undefined' && title === 'Mis Tickets' ? 'active' : '' %>" href="/client/dashboard">
|
||||||
<i class="fas fa-tickets"></i> Mis Tickets
|
<div class="nav-icon-wrapper"><i class="fas fa-ticket-alt"></i></div>
|
||||||
|
<span>Mis Tickets</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<% if (['superadmin', 'admin', 'agent'].includes(user.rol)) { %>
|
<% if (['superadmin', 'admin', 'agent'].includes(user.rol)) { %>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/agent/dashboard">
|
<a class="nav-link <%= typeof title !== 'undefined' && title.includes('Agente') ? 'active' : '' %>" href="/agent/dashboard">
|
||||||
<i class="fas fa-tasks"></i> Tickets
|
<div class="nav-icon-wrapper"><i class="fas fa-inbox"></i></div>
|
||||||
|
<span>Bandeja Tickets</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<% if (['superadmin', 'admin'].includes(user.rol)) { %>
|
<% if (['superadmin', 'admin'].includes(user.rol)) { %>
|
||||||
|
<li class="sidebar-heading mt-3">ADMINISTRACIÓN</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/admin/users">
|
<a class="nav-link <%= typeof title !== 'undefined' && title === 'Usuarios' ? 'active' : '' %>" href="/admin/users">
|
||||||
<i class="fas fa-users"></i> Usuarios
|
<div class="nav-icon-wrapper"><i class="fas fa-users-cog"></i></div>
|
||||||
|
<span>Usuarios y Equipo</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/admin/departments">
|
<a class="nav-link <%= typeof title !== 'undefined' && title === 'Departamentos' ? 'active' : '' %>" href="/admin/departments">
|
||||||
<i class="fas fa-building"></i> Departamentos
|
<div class="nav-icon-wrapper"><i class="fas fa-network-wired"></i></div>
|
||||||
|
<span>Departamentos</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
<li class="sidebar-heading mt-3">SISTEMA</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/company">
|
<a class="nav-link <%= typeof title !== 'undefined' && title === 'Configuración' ? 'active' : '' %>" href="/company">
|
||||||
<i class="fas fa-cog"></i> Configuración
|
<div class="nav-icon-wrapper"><i class="fas fa-sliders-h"></i></div>
|
||||||
|
<span>Configuración</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<!-- Widget Bot de Soporte Activo en el Sidebar -->
|
||||||
|
<div class="sidebar-bot-card mt-3 p-2.5 rounded-3 border text-center">
|
||||||
|
<div class="d-flex align-items-center gap-2 justify-content-center mb-1">
|
||||||
|
<img src="/img/bot-soporte.svg" alt="Bot Soporte" width="34" height="34" class="bot-sidebar-avatar">
|
||||||
|
<div class="text-start">
|
||||||
|
<div class="fw-bold text-dark" style="font-size: 0.78rem; line-height: 1.1;">Asistente FSM</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.68rem;">SIAX Core v2.0</small>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
<div class="d-flex align-items-center justify-content-center gap-1.5 pt-1">
|
||||||
|
<span class="bot-status-dot" style="width: 6px; height: 6px;"></span>
|
||||||
|
<span class="text-success fw-medium" style="font-size: 0.70rem;">Monitoreo 24/7</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
+115
-56
@@ -1,56 +1,108 @@
|
|||||||
<%- include('../partials/header') %>
|
<%- include('../partials/header') %>
|
||||||
<% title = 'Empresas - SaaS Admin'; %>
|
<% title = 'Empresas - SaaS Admin'; %>
|
||||||
|
|
||||||
|
<!-- Alertas Flash -->
|
||||||
<% if (success_msg && success_msg.length > 0) { %>
|
<% if (success_msg && success_msg.length > 0) { %>
|
||||||
<% success_msg.forEach(msg => { %>
|
<% 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>
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle me-2 fs-5 text-success"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (error_msg && error_msg.length > 0) { %>
|
<% if (error_msg && error_msg.length > 0) { %>
|
||||||
<% error_msg.forEach(msg => { %>
|
<% 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="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
|
||||||
|
<div><%= msg %></div>
|
||||||
|
</div>
|
||||||
|
<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">
|
<!-- Cabecera de Página -->
|
||||||
<h1 class="h2">Panel SaaS - Empresas</h1>
|
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
|
<div>
|
||||||
<i class="fas fa-plus"></i> Nueva Empresa
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<h1 class="page-title h3 mb-0">Gestión Multi-Tenant (SaaS)</h1>
|
||||||
|
<span class="badge bg-dark text-warning border px-2.5 py-1" style="font-size: 0.75rem;">
|
||||||
|
<i class="fas fa-crown me-1"></i> Superadmin Console
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Administración de empresas, suscripciones de planes y cuotas globales del sistema.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#createModal">
|
||||||
|
<i class="fas fa-plus-circle"></i>
|
||||||
|
<span>Nueva Empresa</span>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="app-card mb-4">
|
||||||
<table class="table table-striped table-hover">
|
<div class="app-card-header d-flex justify-content-between align-items-center p-3">
|
||||||
<thead class="table-dark">
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<i class="fas fa-sitemap text-primary"></i>
|
||||||
|
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Organizaciones Registradas</h5>
|
||||||
|
<span class="badge bg-light text-dark border ms-1"><%= companies.length %></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table app-table mb-0">
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>ID</th>
|
<th style="width: 60px;">ID</th>
|
||||||
<th>Nombre</th>
|
<th>Nombre de Empresa</th>
|
||||||
<th>Slug</th>
|
<th>Slug Tenant</th>
|
||||||
<th>Plan</th>
|
<th>Plan Activo</th>
|
||||||
<th>Usuarios</th>
|
<th>Usuarios</th>
|
||||||
<th>Tickets</th>
|
<th>Tickets</th>
|
||||||
<th>Límites</th>
|
<th>Límites Cuota</th>
|
||||||
<th>Activo</th>
|
<th>Estado</th>
|
||||||
<th>Acción</th>
|
<th class="text-end" style="width: 90px;">Acción</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<% companies.forEach(c => { %>
|
<% companies.forEach(c => { %>
|
||||||
<tr>
|
<tr>
|
||||||
<td><%= c.id %></td>
|
<td><span class="badge bg-light text-dark border">#<%= c.id %></span></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>
|
<td>
|
||||||
<span class="badge bg-<%= c.is_active ? 'success' : 'danger' %>">
|
<div class="fw-bold text-dark"><%= c.name %></div>
|
||||||
<%= c.is_active ? 'Sí' : 'No' %>
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge bg-light text-primary border font-monospace"><%= c.slug %></span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge company-plan-badge">
|
||||||
|
<%= (c.plan || 'Free').toUpperCase() %>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal<%= c.id %>">
|
<span class="fw-medium text-dark"><%= c.userCount || 0 %></span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-dark"><%= c.ticketCount || 0 %></span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<small class="text-muted" style="font-size: 0.75rem;">
|
||||||
|
<%= c.max_users %> users / <%= c.max_tickets %> tks
|
||||||
|
</small>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (c.is_active) { %>
|
||||||
|
<span class="status-pill status-abierto"><span class="status-dot"></span>Activo</span>
|
||||||
|
<% } else { %>
|
||||||
|
<span class="status-pill status-cerrado"><span class="status-dot" style="background:#ef4444;"></span>Suspendido</span>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editModal<%= c.id %>" title="Editar cuotas y plan">
|
||||||
<i class="fas fa-edit"></i>
|
<i class="fas fa-edit"></i>
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
@@ -58,79 +110,86 @@
|
|||||||
<% }) %>
|
<% }) %>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal fade" id="createModal">
|
<!-- Modal Crear Empresa -->
|
||||||
|
<div class="modal fade" id="createModal" tabindex="-1">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||||
<form action="/saas/companies/create" method="POST">
|
<form action="/saas/companies/create" method="POST">
|
||||||
<div class="modal-header">
|
<div class="modal-header bg-light border-bottom p-3 px-4">
|
||||||
<h5 class="modal-title">Nueva Empresa</h5>
|
<h5 class="modal-title fw-bold" style="font-size: 1rem;"><i class="fas fa-plus-circle text-primary me-2"></i>Nueva Organización SaaS</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body p-4">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Nombre</label>
|
<label class="form-label small fw-bold text-dark">Nombre de la Empresa <span class="text-danger">*</span></label>
|
||||||
<input type="text" name="name" class="form-control" required>
|
<input type="text" name="name" class="form-control" placeholder="Ej: Telcotronics Andes" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Slug (identificador único)</label>
|
<label class="form-label small fw-bold text-dark">Slug (Identificador URL único) <span class="text-danger">*</span></label>
|
||||||
<input type="text" name="slug" class="form-control" required>
|
<input type="text" name="slug" class="form-control font-monospace" placeholder="ej: telco-andes" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Plan</label>
|
<label class="form-label small fw-bold text-dark">Plan Inicial</label>
|
||||||
<select name="plan" class="form-select">
|
<select name="plan" class="form-select">
|
||||||
<option value="free">Free</option>
|
<option value="free">Free</option>
|
||||||
<option value="pro">Pro</option>
|
<option value="pro" selected>Pro</option>
|
||||||
<option value="enterprise">Enterprise</option>
|
<option value="enterprise">Enterprise</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer p-3 bg-light">
|
||||||
<button type="submit" class="btn btn-primary">Crear</button>
|
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||||
|
<button type="submit" class="btn btn-primary px-3 shadow-sm">Crear Tenant</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Modales de Edición -->
|
||||||
<% companies.forEach(c => { %>
|
<% companies.forEach(c => { %>
|
||||||
<div class="modal fade" id="editModal<%= c.id %>">
|
<div class="modal fade" id="editModal<%= c.id %>" tabindex="-1">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||||
<form action="/saas/companies/update/<%= c.id %>" method="POST">
|
<form action="/saas/companies/update/<%= c.id %>" method="POST">
|
||||||
<div class="modal-header">
|
<div class="modal-header bg-light border-bottom p-3 px-4">
|
||||||
<h5 class="modal-title">Editar <%= c.name %></h5>
|
<h5 class="modal-title fw-bold" style="font-size: 1rem;"><i class="fas fa-edit text-primary me-2"></i>Editar <%= c.name %></h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body p-4">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Nombre</label>
|
<label class="form-label small fw-bold text-dark">Nombre</label>
|
||||||
<input type="text" name="name" class="form-control" value="<%= c.name %>">
|
<input type="text" name="name" class="form-control" value="<%= c.name %>" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Plan</label>
|
<label class="form-label small fw-bold text-dark">Plan Asignado</label>
|
||||||
<select name="plan" class="form-select">
|
<select name="plan" class="form-select">
|
||||||
<option value="free" <%= c.plan === 'free' ? 'selected' : '' %>>Free</option>
|
<option value="free" <%= c.plan === 'free' ? 'selected' : '' %>>Free</option>
|
||||||
<option value="pro" <%= c.plan === 'pro' ? 'selected' : '' %>>Pro</option>
|
<option value="pro" <%= c.plan === 'pro' ? 'selected' : '' %>>Pro</option>
|
||||||
<option value="enterprise" <%= c.plan === 'enterprise' ? 'selected' : '' %>>Enterprise</option>
|
<option value="enterprise" <%= c.plan === 'enterprise' ? 'selected' : '' %>>Enterprise</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="row g-2 mb-3">
|
||||||
<label class="form-label">Máx. Usuarios</label>
|
<div class="col-6">
|
||||||
|
<label class="form-label small fw-bold text-dark">Máx. Usuarios</label>
|
||||||
<input type="number" name="max_users" class="form-control" value="<%= c.max_users %>">
|
<input type="number" name="max_users" class="form-control" value="<%= c.max_users %>">
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="col-6">
|
||||||
<label class="form-label">Máx. Tickets</label>
|
<label class="form-label small fw-bold text-dark">Máx. Tickets</label>
|
||||||
<input type="number" name="max_tickets" class="form-control" value="<%= c.max_tickets %>">
|
<input type="number" name="max_tickets" class="form-control" value="<%= c.max_tickets %>">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-check mb-3">
|
</div>
|
||||||
<input type="checkbox" name="is_active" class="form-check-input" value="1" <%= c.is_active ? 'checked' : '' %>>
|
<div class="form-check form-switch mb-2">
|
||||||
<label class="form-check-label">Activo</label>
|
<input type="checkbox" name="is_active" class="form-check-input" value="1" id="activeSwitch<%= c.id %>" <%= c.is_active ? 'checked' : '' %>>
|
||||||
|
<label class="form-check-label small fw-semibold text-dark" for="activeSwitch<%= c.id %>">Organización Activa</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer p-3 bg-light">
|
||||||
<button type="submit" class="btn btn-primary">Guardar</button>
|
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||||
|
<button type="submit" class="btn btn-primary px-3 shadow-sm">Guardar Cambios</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user