jhonathan_guevara/Salud_UT
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5844cfe523
Salud_UT/saludut-inpec/src/app/components/dashboard/dashboard.html

458 lines
17 KiB
HTML
Raw Blame History

<div class="page-shell">
<div class="content-container">
<app-header
title="SALUD UT"
subtitle="Módulo de autorizaciones médicas"
badgeText="SALUD UT"
[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">
&times;
</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)="irACargarPacientes()"
>
<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>
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>
<!-- Carga masiva de autorizaciones -->
<div
class="action-card"
(click)="irACargarAutorizacionesMasivas()"
>
<span class="action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" aria-label="">
<path
d="M4 5h16v10H4z"
fill="none"
stroke="currentColor"
stroke-width="2"
></path>
<path
d="M8 19h8"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
></path>
<path
d="M9 9h6M9 12h6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
></path>
</svg>
</span>
<h4>Carga masiva autorizaciones</h4>
<p>Subir plantilla Excel para crear autorizaciones pendientes</p>
</div>
<!-- Cargar IPS y REPS (solo administradores) -->
<div
class="action-card"
*ngIf="puedeCargarIpsReps()"
(click)="irACargarIpsReps()"
>
<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 IPS y REPS</h4>
<p>Subir Excel de IPS y profesionales REPS</p>
<div class="admin-badge">Solo admin</div>
</div>
<!-- Ver Autorizaciones por Fecha -->
<div
class="action-card"
(click)="irAVerAutorizacionesPorFecha()"
>
<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" *ngIf="puedeVerTodasAutorizaciones()">Solo admin</div>
</div>
<!-- Estadisticas de autorizaciones (solo administradores) -->
<div
class="action-card"
*ngIf="puedeVerEstadisticas()"
(click)="irAEstadisticasAutorizaciones()"
>
<span class="action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" aria-label="">
<path
d="M4 20V10M10 20V4M16 20v-7M22 20H2"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
></path>
</svg>
</span>
<h4>Estadisticas</h4>
<p>Resumen mensual con estados y volumen diario</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>
</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'"
>
<span class="role-label">Sedes asignadas:</span>
<div class="sedes-info">
<div class="sedes-meta" *ngIf="getSedesUsuario().length > 0">
<span class="sedes-count">
{{ getSedesUsuario().length }} sedes
</span>
<button
class="sedes-toggle"
*ngIf="getSedesUsuario().length > 8"
(click)="toggleSedesAsignadas()"
type="button"
>
{{ getTextoToggleSedes() }}
</button>
</div>
<div class="sedes-list" *ngIf="getSedesUsuario().length > 0; else sinSedes">
<span
class="sede-badge"
*ngFor="let sede of getSedesMostradas()"
[title]="sede.nombre_establecimiento"
>
{{ sede.nombre_establecimiento }}
</span>
</div>
<ng-template #sinSedes>
<span class="sedes-empty">Sin sedes asignadas</span>
</ng-template>
</div>
</div>
</div>
</section>
<!-- Permissions Summary -->
<section class="permissions-summary card">
<h3 class="section-title">Permisos disponibles</h3>
<p class="section-subtitle">
Resumen de lo que puedes hacer con tu cuenta.
</p>
<div class="permissions-grid">
<div
class="permission-item"
[class.has-permission]="puedeGenerarAutorizaciones()"
[class.no-permission]="!puedeGenerarAutorizaciones()"
>
<span class="permission-icon" *ngIf="puedeGenerarAutorizaciones(); else noPermGen">
&check;
</span>
<ng-template #noPermGen>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Generar autorizaciones</span>
<span class="permission-meta">Crear y editar solicitudes</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeCargarAutorizacionesMasivas()"
[class.no-permission]="!puedeCargarAutorizacionesMasivas()"
>
<span
class="permission-icon"
*ngIf="puedeCargarAutorizacionesMasivas(); else noPermMasivas"
>
&check;
</span>
<ng-template #noPermMasivas>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Cargar autorizaciones masivas</span>
<span class="permission-meta">Subir archivo con solicitudes</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeVerAutorizacionesPorFecha()"
[class.no-permission]="!puedeVerAutorizacionesPorFecha()"
>
<span
class="permission-icon"
*ngIf="puedeVerAutorizacionesPorFecha(); else noPermFechas"
>
&check;
</span>
<ng-template #noPermFechas>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Ver autorizaciones por fecha</span>
<span class="permission-meta">Consultar por rango</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeDescargarPdfs()"
[class.no-permission]="!puedeDescargarPdfs()"
>
<span class="permission-icon" *ngIf="puedeDescargarPdfs(); else noPermPdf">
&check;
</span>
<ng-template #noPermPdf>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Descargar PDFs</span>
<span class="permission-meta">Generar y descargar documentos</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeVerTodasAutorizaciones()"
[class.no-permission]="!puedeVerTodasAutorizaciones()"
>
<span class="permission-icon" *ngIf="puedeVerTodasAutorizaciones(); else noPermAll">
&check;
</span>
<ng-template #noPermAll>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Ver todas las autorizaciones</span>
<span class="permission-meta">Incluye pendientes y no autorizadas</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeCargarPacientes()"
[class.no-permission]="!puedeCargarPacientes()"
>
<span class="permission-icon" *ngIf="puedeCargarPacientes(); else noPermPacientes">
&check;
</span>
<ng-template #noPermPacientes>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Cargar pacientes (Excel)</span>
<span class="permission-meta">Importar datos masivos</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeCargarCups()"
[class.no-permission]="!puedeCargarCups()"
>
<span class="permission-icon" *ngIf="puedeCargarCups(); else noPermCups">
&check;
</span>
<ng-template #noPermCups>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Cargar CUPS</span>
<span class="permission-meta">Actualizar procedimientos cubiertos</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeCargarIpsReps()"
[class.no-permission]="!puedeCargarIpsReps()"
>
<span class="permission-icon" *ngIf="puedeCargarIpsReps(); else noPermIpsReps">
&check;
</span>
<ng-template #noPermIpsReps>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Cargar IPS y REPS</span>
<span class="permission-meta">Actualizar convenios y profesionales</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeVerEstadisticas()"
[class.no-permission]="!puedeVerEstadisticas()"
>
<span class="permission-icon" *ngIf="puedeVerEstadisticas(); else noPermStats">
&check;
</span>
<ng-template #noPermStats>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Ver estadisticas</span>
<span class="permission-meta">Resumen por dia, semana y mes</span>
</div>
</div>
<div
class="permission-item"
[class.has-permission]="puedeGestionarUsuarios()"
[class.no-permission]="!puedeGestionarUsuarios()"
>
<span class="permission-icon" *ngIf="puedeGestionarUsuarios(); else noPermUsers">
&check;
</span>
<ng-template #noPermUsers>
<span class="permission-icon">&times;</span>
</ng-template>
<div class="permission-body">
<span class="permission-title">Gestionar usuarios</span>
<span class="permission-meta">Crear y editar accesos</span>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink