253 lines
9.3 KiB
HTML
253 lines
9.3 KiB
HTML
<div class="page-shell">
|
|
<div class="content-container">
|
|
<app-header
|
|
title="SALUD UT"
|
|
subtitle="Módulo de autorizaciones médicas"
|
|
[showUserInfo]="true"
|
|
[userName]="getNombreUsuario()"
|
|
[userRole]="getNombreRolFormateado()"
|
|
[showLogout]="true"
|
|
(logout)="logout()"
|
|
></app-header>
|
|
|
|
<!-- Mensaje de error -->
|
|
<div class="alert alert-error" *ngIf="errorMessage">
|
|
<span class="alert-icon" aria-hidden="true">!</span>
|
|
<span class="alert-message">{{ errorMessage }}</span>
|
|
<button class="alert-close" (click)="cerrarMensajeError()" title="Cerrar">
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="dashboard-main">
|
|
<!-- Welcome Section -->
|
|
<section class="welcome-section card">
|
|
<h2>Bienvenido, {{ getNombreUsuario() }}</h2>
|
|
<p class="welcome-date">{{ getFechaActual() }}</p>
|
|
<p class="welcome-description">
|
|
Sistema de autorizaciones médicas para el INPEC
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Quick Actions -->
|
|
<section class="quick-actions">
|
|
<h3 class="section-title">Acciones rápidas</h3>
|
|
<div class="actions-grid">
|
|
<!-- Buscar Pacientes (disponible para todos) -->
|
|
<div class="action-card" (click)="irABusquedaPacientes()">
|
|
<span class="action-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" role="img" aria-label="">
|
|
<circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle>
|
|
<line x1="16.5" y1="16.5" x2="22" y2="22" stroke="currentColor" stroke-width="2"></line>
|
|
</svg>
|
|
</span>
|
|
<h4>Buscar pacientes</h4>
|
|
<p>Consultar información de pacientes y generar autorizaciones</p>
|
|
</div>
|
|
|
|
<!-- Cargar Pacientes (solo administradores) -->
|
|
<div
|
|
class="action-card"
|
|
*ngIf="puedeCargarPacientes()"
|
|
(click)="abrirCargadorPacientes(inputExcelPacientes)"
|
|
>
|
|
<span class="action-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" role="img" aria-label="">
|
|
<path
|
|
d="M12 3v12m0 0l-4-4m4 4l4-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
<rect x="4" y="17" width="16" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="2"></rect>
|
|
</svg>
|
|
</span>
|
|
<h4>Cargar pacientes</h4>
|
|
<p>
|
|
{{ cargandoExcel
|
|
? 'Cargando archivo de pacientes...'
|
|
: 'Subir archivo Excel con datos de pacientes' }}
|
|
</p>
|
|
<div class="admin-badge">Solo admin</div>
|
|
</div>
|
|
|
|
<!-- Cargar CUPS (solo administradores) -->
|
|
<div
|
|
class="action-card"
|
|
*ngIf="puedeCargarCups()"
|
|
(click)="irACargarCups()"
|
|
>
|
|
<span class="action-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" role="img" aria-label="">
|
|
<path
|
|
d="M12 3v12m0 0l-4-4m4 4l4-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
<rect x="4" y="17" width="16" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="2"></rect>
|
|
</svg>
|
|
</span>
|
|
<h4>Cargar CUPS</h4>
|
|
<p>
|
|
Subir nota tecnica y tabla referencia
|
|
</p>
|
|
<div class="admin-badge">Solo admin</div>
|
|
</div>
|
|
|
|
<!-- Ver Autorizaciones por Fecha (solo administradores) -->
|
|
<div
|
|
class="action-card"
|
|
(click)="irAVerAutorizacionesPorFecha()"
|
|
*ngIf="puedeVerTodasAutorizaciones()"
|
|
>
|
|
<span class="action-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" role="img" aria-label="">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2"></rect>
|
|
<line x1="8" y1="2.5" x2="8" y2="6.5" stroke="currentColor" stroke-width="2"></line>
|
|
<line x1="16" y1="2.5" x2="16" y2="6.5" stroke="currentColor" stroke-width="2"></line>
|
|
<line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"></line>
|
|
</svg>
|
|
</span>
|
|
<h4>Autorizaciones por fecha</h4>
|
|
<p>Consultar y descargar autorizaciones por rango de fechas</p>
|
|
<div class="admin-badge">Solo admin</div>
|
|
</div>
|
|
|
|
<div
|
|
class="action-card"
|
|
*ngIf="puedeGestionarUsuarios()"
|
|
(click)="irAUsuarios()"
|
|
>
|
|
<span class="action-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" role="img" aria-label="">
|
|
<circle cx="9" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"></circle>
|
|
<path
|
|
d="M2 21c0-3.5 3.1-6 7-6s7 2.5 7 6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
></path>
|
|
<circle cx="18" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle>
|
|
</svg>
|
|
</span>
|
|
<h3>Gestionar usuarios</h3>
|
|
<p>Crear y administrar usuarios del sistema.</p>
|
|
<span class="admin-badge">Solo admin</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input de archivo real (oculto) -->
|
|
<input
|
|
#inputExcelPacientes
|
|
type="file"
|
|
accept=".xlsx,.xls"
|
|
hidden
|
|
(click)="$event.stopPropagation()"
|
|
(change)="onExcelSelected($event)"
|
|
/>
|
|
|
|
<!-- Mensaje de estado de la carga -->
|
|
<p class="excel-status" *ngIf="estadoCargaExcel">
|
|
{{ estadoCargaExcel }}
|
|
</p>
|
|
</section>
|
|
|
|
<!-- User Role Information -->
|
|
<section class="role-info card" *ngIf="currentUser">
|
|
<h3 class="section-title">Información de acceso</h3>
|
|
<div class="role-details">
|
|
<div class="role-item">
|
|
<span class="role-label">Rol:</span>
|
|
<span class="role-value">{{ getNombreRolFormateado() }}</span>
|
|
</div>
|
|
|
|
<!-- Sedes asignadas (solo para administrativos) -->
|
|
<div
|
|
class="role-item"
|
|
*ngIf="
|
|
currentUser.nombre_rol === 'administrativo_sede' &&
|
|
getSedesUsuario().length > 0
|
|
"
|
|
>
|
|
<span class="role-label">Sedes asignadas:</span>
|
|
<div class="sedes-list">
|
|
<span
|
|
class="sede-badge"
|
|
*ngFor="let sede of getSedesUsuario()"
|
|
[title]="sede.nombre_establecimiento"
|
|
>
|
|
{{ sede.nombre_establecimiento }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Permissions Summary -->
|
|
<section class="permissions-summary card">
|
|
<h3 class="section-title">Permisos disponibles</h3>
|
|
<div class="permissions-grid">
|
|
<div
|
|
class="permission-item"
|
|
[class.has-permission]="puedeGenerarAutorizaciones()"
|
|
>
|
|
<span class="permission-icon" *ngIf="puedeGenerarAutorizaciones(); else noPermGen">
|
|
✓
|
|
</span>
|
|
<ng-template #noPermGen>
|
|
<span class="permission-icon">×</span>
|
|
</ng-template>
|
|
<span class="permission-text">Generar autorizaciones</span>
|
|
</div>
|
|
|
|
<div
|
|
class="permission-item"
|
|
[class.has-permission]="puedeCargarPacientes()"
|
|
>
|
|
<span class="permission-icon" *ngIf="puedeCargarPacientes(); else noPermExcel">
|
|
✓
|
|
</span>
|
|
<ng-template #noPermExcel>
|
|
<span class="permission-icon">×</span>
|
|
</ng-template>
|
|
<span class="permission-text">Cargar pacientes (Excel)</span>
|
|
</div>
|
|
|
|
<div
|
|
class="permission-item"
|
|
[class.has-permission]="puedeDescargarPdfs()"
|
|
>
|
|
<span class="permission-icon" *ngIf="puedeDescargarPdfs(); else noPermPdf">
|
|
✓
|
|
</span>
|
|
<ng-template #noPermPdf>
|
|
<span class="permission-icon">×</span>
|
|
</ng-template>
|
|
<span class="permission-text">Descargar PDFs</span>
|
|
</div>
|
|
|
|
<div
|
|
class="permission-item"
|
|
[class.has-permission]="puedeVerTodasAutorizaciones()"
|
|
>
|
|
<span class="permission-icon" *ngIf="puedeVerTodasAutorizaciones(); else noPermAll">
|
|
✓
|
|
</span>
|
|
<ng-template #noPermAll>
|
|
<span class="permission-icon">×</span>
|
|
</ng-template>
|
|
<span class="permission-text">Ver todas las autorizaciones</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|