From 1b1a145478103dfc50965116ba92584038943ea4 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 22 Jan 2025 16:56:45 -0600
Subject: [PATCH] =?UTF-8?q?Primera=20iteraci=C3=B3n=20de=20nuevo=20dise?=
 =?UTF-8?q?=C3=B1o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 action/action_auditoria_detalle.php |   3 +-
 auditoria.php                       | 247 +++++++++-------------------
 css/auditoria-ux.css                | 139 ++++++++++++++++
 export/supervisor_excel.php         |   6 +-
 fonts/svg/portrait.svg              |   2 +
 js/auditoría.js                     |   7 +-
 6 files changed, 231 insertions(+), 173 deletions(-)
 create mode 100644 css/auditoria-ux.css
 create mode 100644 fonts/svg/portrait.svg

diff --git a/action/action_auditoria_detalle.php b/action/action_auditoria_detalle.php
index 52336af..824237b 100644
--- a/action/action_auditoria_detalle.php
+++ b/action/action_auditoria_detalle.php
@@ -21,11 +21,12 @@ try {
     if ($_SERVER['REQUEST_METHOD'] === 'GET') {
 
         $data = $db
+            ->where('registro_fecha_ideal', $_GET['registro_fecha_ideal'])
             ->where('horario_id', $_GET['horario_id'])
             ->where('profesor_id', $_GET['profesor_id'])
             ->getOne('auditoria_mat');
         // Print the JSON file
-        echo json_encode($data);
+        echo json_encode(array_merge($data, ['query' => $db->getLastQuery(), 'get' => $_GET]));
     } else {
         http_response_code(405);
         echo json_encode(['error' => 'method not allowed']);
diff --git a/auditoria.php b/auditoria.php
index cadf07c..937710e 100644
--- a/auditoria.php
+++ b/auditoria.php
@@ -13,6 +13,7 @@
             display: none;
         }
     </style>
+    <link rel="stylesheet" href="css/auditoria-ux.css">
     <script src="js/jquery.min.js"></script>
     <script src="js/jquery-ui.js"></script>
     <script src="js/bootstrap/bootstrap.min.js"></script>
@@ -266,19 +267,20 @@
                                 <strong>{{ registro.profesor_clave }}</strong>
                                 {{ registro.profesor_nombre }}
                                 <button type="button" class="ml-3 btn btn-sm btn-outline-primary"
-                                    @click="store.current.clase_vista = registro; detalle.obtener_detalle(registro.horario_id, registro.profesor_id)" data-toggle="modal"
-                                    data-target="#ver-detalle">
+                                    @click="store.current.clase_vista = registro; detalle.obtener_detalle(registro.horario_id, registro.profesor_id, registro.registro_fecha_ideal)"
+                                    data-toggle="modal" data-target="#ver-detalle">
                                     <i class="ing-ojo"></i> detalle
                                 </button>
                             </td>
 
 
-                            <td class="text-center align-middle px-2">{{ registro.horario_hora?.slice(0,5) }} -
-                                {{registro.horario_fin?.slice(0,5) }}</td>
+                            <td class="text-center align-middle px-2">
+                                {{ `${registro.horario_hora?.slice(0,5)} - ${registro.horario_fin?.slice(0,5)}` }}
+                            </td>
                             <td class="text-center align-middle px-2">
                                 <div v-if="registro.registro_fecha">
                                     <div class="col-12" :class="registro.color">
-                                        Registro <small>{{ registro.registro_fecha?.slice(11,19) }}</small>
+                                        Registro <small>{{ `${registro.registro_fecha?.slice(11,19)}` }}</small>
                                     </div>
                                 </div>
                                 <div v-else>
@@ -298,21 +300,22 @@
                                             <span class="mr-2" :class="`text-${registro.estado_color}`">
                                                 <i :class="`${registro.estado_icon} ing-2x`"></i>
                                             </span>
-                                            <strong v-if="registro.usuario_nombre">{{ registro.usuario_nombre
-                                                }}</strong>
+                                            <strong v-if="registro.usuario_nombre">
+                                                {{ registro.usuario_nombre }}
+                                            </strong>
                                         </div>
                                         <div class="col-12" v-if="registro.registro_fecha_supervisor">
                                             Hora
-                                            <small>{{ registro.registro_fecha_supervisor?.slice(11,19) }}</small>
+                                            <small>{{ `${registro.registro_fecha_supervisor?.slice(11,19)}` }}</small>
                                         </div>
                                     </div>
                                     <div class="col-12 "
                                         @click="store.registros.mostrarComentario(registro.registro_id)"
                                         v-if="registro.comentario" style="cursor: pointer;">
                                         <strong class="badge border border-primary">Observaciones:</strong>
-                                        <small
-                                            class="text-truncate">{{registro.comentario?.slice(0,25)}}{{registro.comentario.length
-                                            > 10 ? '...' : ''}}</small>
+                                        <small class="text-truncate">{{`${registro.comentario?.slice(0,25)}
+                                            ${registro.comentario.length
+                                            > 10 ? '...' : ''}`}}</small>
                                     </div>
                                 </div>
                             </td>
@@ -388,165 +391,75 @@
         <div class="modal" tabindex="-1" id="ver-detalle">
             <div class="modal-dialog modal-dialog-centered modal-xl" v-if="clase_vista">
                 <div class="modal-content">
-                    <div class="modal-header">
-                        <h2 class="modal-title" :data-id="clase_vista.horario_id">Detalle de la clase</h2>
-
-                    </div>
-                    <div class="modal-body">
-                        <div class="container">
-                            <div class="row">
-                                <section class="col-12 col-md-6">
-                                    <h4 class="h4">Profesor</h4>
-                                    <div class="row">
-                                        <div class="col-12">
-                                            <strong>Nombre:</strong>
-                                            {{ clase_vista.profesor_nombre }}
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Correo:</strong>
-                                            <a :href="`mailto:${clase_vista.profesor_correo}`"><strong>{{
-                                                    detalle.correo }}</strong></a>
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Clave:</strong>
-                                            {{ clase_vista.profesor_clave }}
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Facultad:</strong>
-                                            {{ detalle.facultad }}
-                                        </div>
-                                    </div>
-                                </section>
-                                <section class="col-12 col-md-6">
-                                    <h4 class="h4">Clase</h4>
-                                    <div class="row">
-                                        <div class="col-12">
-                                            <strong>Materia:</strong>
-                                            {{ detalle.materia }}
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Carrera:</strong>
-                                            {{ detalle.carrera }}
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Nivel:</strong>
-                                            {{ detalle.nivel}}
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Grupo:</strong>
-                                            {{ detalle.horario_grupo }}
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Horario:</strong>
-                                            {{ clase_vista.horario_hora?.slice(0, 5) }} -
-                                            {{clase_vista.horario_fin?.slice(0, 5) }}
-                                        </div>
-                                        <div class="col-12">
-                                            <strong>Salón:</strong>
-                                            {{ clase_vista.salon }}
-                                        </div>
-                                    </div>
-                                </section>
+                    <div class="modal-body detalle">
+                        <section class="profesor">
+                            <img class="profesor-icon" src="fonts/svg/portrait.svg" alt="profesor">
+                            <div>
+                                <span class="profesor-nombre">
+                                    {{clase_vista.profesor_nombre}}
+                                </span>
+                                <div class="profesor-datos">
+                                    <a :href="`mailto:${clase_vista.profesor_correo}`" class="profesor-correo">
+                                        {{clase_vista.profesor_correo}}
+                                    </a>
+                                    <i class="pipe"></i>
+                                    <span class="profesor-clave">
+                                        {{clase_vista.profesor_clave}}
+                                    </span>
+                                </div>
                             </div>
-                            <div class="row">
-                                <section class="col-12">
-                                    <h4 class="h4 mt-4">Registro</h4>
-                                    <div class="row">
-                                        <div class="col-md-6 text-center" v-if="!clase_vista.registro_fecha">
-                                            <strong><span class="badge border border-dark"><i
-                                                        class="ing-cancelar"></i></span>
-                                                Sin registro del profesor</strong>
-                                        </div>
-                                        <div class="col-md-6 text-center" v-else>
-                                            El profesor registró su asistencia a las
-                                            <code>{{clase_vista.registro_fecha?.slice(11, 19)}}</code>
-                                            <hr>
-                                            <p v-if="!clase_vista.registro_retardo" class="text-center">
-                                                <span class="badge border border-success"><i
-                                                        class="ing-aceptar"></i></span>
-                                                A tiempo
-                                            </p>
-                                            <p v-else class="text-center">
-                                                <span class="badge border border-warning"><i
-                                                        class="ing-retardo"></i></span>
-                                                Con retardo
-                                            </p>
-                                        </div>
-                                        <div class="col-md-6 text-center" v-if="clase_vista.registro_justificada">
-                                            <strong>
-                                                <span class="badge badge-success mr-2">
-                                                    <i class="ing-finalistas"></i>
-                                                </span>
-                                                Justificada
-                                            </strong>
-                                            <span class="text-muted">
-                                                por
-                                                {{clase_vista.justificador_nombre}} de
-                                                <strong>{{clase_vista.justificador_rol}}</strong>
-                                                <span v-if="clase_vista.justificador_facultad"> de
-                                                    <strong>{{clase_vista.justificador_facultad}}</strong>
-                                                </span>
+                        </section>
 
-                                                el día {{clase_vista.registro_fecha_justificacion?.slice(0, 10)}} a
-                                                las
-                                                {{clase_vista.registro_fecha_justificacion?.slice(11, 16)}}
-                                            </span>
-                                            <div v-if="clase_vista.justificacion">
-                                                <hr>
-                                                <p class="text-center">
-                                                    <strong>Observación:</strong>
-                                                    {{clase_vista.justificacion}}
-                                                </p>
-                                            </div>
-
-                                        </div>
-                                        <div class="col-md-6 text-center"
-                                            v-else-if="clase_vista.registro_fecha_justificacion">
-                                            <strong>
-                                                <span class="badge border border-dark">
-                                                    <i class="ing-cancelar"></i>
-                                                </span>
-                                                Sin justificar, <span class="text-muted">
-                                                    {{clase_vista.justificador_nombre}}
-                                                    ({{clase_vista.justificador_rol}}{{clase_vista.justificador_facultad
-                                                    ? ' de ' + clase_vista.justificador_facultad : ''}})
-                                                </span> borró la justificación, el día
-                                                {{clase_vista.registro_fecha_justificacion?.slice(0, 10)}} a las
-                                                {{clase_vista.registro_fecha_justificacion?.slice(11, 16)}}
-                                            </strong>
-                                        </div>
-                                        <div class="col-md-6 text-center" v-else>
-                                            <strong>
-                                                <span class="badge border border-dark">
-                                                    <i class="ing-cancelar"></i>
-                                                </span>
-                                                Sin justificar
-                                            </strong>
-                                        </div>
-                                </section>
-
-
-                                <section class="col-12" v-if="clase_vista.reposicion_id">
-                                    <h4 class="h4 mt-4">Reposición</h4>
-
-                                    <div class="row">
-                                        <div class="col-12 text-center">
-                                            Esta clase se reprogramó para el día
-                                            {{ clase_vista.reposicion_fecha }} a las
-                                            {{ clase_vista.reposicion_hora?.slice(0, 5) }} -
-                                            {{clase_vista.reposicion_hora_fin?.slice(0, 5) }}
-                                        </div>
-                                    </div>
-                                </section>
+                        <main class="my-5">
+                            <div class="pp-card" style="grid-row: span 5;">
+                                <div :class="`bg-${clase_vista.estado_color}`" class="text-white pp-card-icon ">
+                                    <span>{{clase_vista.nombre}}</span>
+                                    <i :class="clase_vista.estado_icon" class="mx-3"></i>
+                                </div>
+                                <main>
+                                    <span class="supervisor">{{clase_vista.usuario_nombre}}</span>
+                                    <span class="supervisor_hora">{{clase_vista.registro_fecha_supervisor}}</span>
+                                    <footer>Supervisor</footer>
+                                </main>
                             </div>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <!-- botón aceptar -->
-                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">
-                            <i class="ing-aceptar"></i>
-                            Aceptar
-                        </button>
+                            <div class="pp-card" style="grid-row: span 8">
+                                <div class="bg-primary text-white">{{clase_vista.carrera}}</div>
+                                <main>
+                                    <span class="materia">{{clase_vista.materia}}</span>
+                                    <span class="horario">
+                                        <section>
+                                            {{clase_vista.horario_hora}}
+                                            {{clase_vista.horario_fin}}
+                                        </section>
+                                        <section>
+                                            {{clase_vista.horario_grupo}}
+                                        </section>
+                                    </span>
+                                    <span class="salon">{{clase_vista.salon}}</span>
+                                    <footer>{{clase_vista.nivel}}</footer>
+                                </main>
+                            </div>
+                            <div class="pp-card" style="grid-row: span 3">
+                                <div class="bg-warning text-white"
+                                    v-if="clase_vista.registro_fecha && clase_vista.registro_retardo">
+                                    <span>Con retardo</span>
+                                    <i class="ing-retardo"></i>
+                                </div>
+                                <div class="bg-success text-white" v-else-if="clase_vista.registro_fecha">
+                                    <span>A tiempo</span>
+                                    <i class="ing-autorizar"></i>
+                                </div>
+                                <div class="bg-dark text-white" v-else>
+                                    Sin registro
+                                    <i class="ing-cancelar"></i>
+                                </div>
+                            </div>
+
+                        </main>
+
+                        <footer class="facultad">
+                            {{clase_vista.facultad}}
+                        </footer>
                     </div>
                 </div>
             </div>
diff --git a/css/auditoria-ux.css b/css/auditoria-ux.css
new file mode 100644
index 0000000..360d726
--- /dev/null
+++ b/css/auditoria-ux.css
@@ -0,0 +1,139 @@
+@font-face {
+    font-family: 'La Salle Display Regular';
+    src: url('../fonts/indivisaFont/woff/IndivisaDisplaySans-Regular.woff');
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: 'La Salle Display Heavy';
+    src: url('../fonts/indivisaFont/woff/IndivisaDisplaySans-Heavy.woff');
+    font-weight: normal;
+}
+
+.detalle {
+    padding: 2rem;
+    padding-inline: 8rem;
+}
+
+.profesor {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+}
+
+.profesor-icon {
+    height: 6rem;
+    fill: #001d68;
+}
+
+.profesor-nombre {
+    font-size: 2rem;
+    font-weight: 900;
+    font-family: 'La Salle Display Regular';
+    color: black;
+}
+
+.profesor-clave {
+    font-weight: 900;
+    font-size: 1.2rem;
+    font-family: 'La Salle Display Regular';
+}
+
+.profesor-datos {
+    display: flex;
+    align-items: center;
+
+    gap: .75rem;
+    color: #969696;
+}
+
+.profesor-datos .profesor-correo {
+    font-style: italic;
+    text-decoration: underline;
+    color: #969696;
+}
+
+.profesor-datos .profesor-correo:hover {
+    color: #3f3f3f;
+    transition-timing-function: ease-in;
+    transition-duration: .2s;
+}
+
+.pipe::after {
+    content: '';
+    width: .1rem;
+    height: 1.4rem;
+
+    display: block;
+
+    background-color: #969696;
+}
+
+.detalle main {
+    display: grid;
+    gap: 2rem;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.pp-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.pp-card-icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.pp-card div {
+    border-start-start-radius: 1rem;
+    border-start-end-radius: 1rem;
+    padding-inline: 1.5rem;
+    padding-block: .5rem;
+    font-family: 'La Salle Display Heavy';
+    font-size: 1.2rem;
+}
+
+.pp-card main {
+    background-color: #e1e1e1;
+    height: 100%;
+
+    border-end-start-radius: 1rem;
+    border-end-end-radius: 1rem;
+    position: relative;
+}
+
+.pp-card footer {
+    font-style: italic;
+    color: #969696;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: 1rem;
+}
+
+.pp-card:not(:has(main)) {
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        height: 100%;
+
+        border-end-start-radius: 1rem;
+        border-end-end-radius: 1rem;
+        font-size: 1.5rem;
+    }
+}
+
+.facultad {
+    font-family: 'La Salle Display Heavy';
+    font-size: 1.4rem;
+    color: #e1e1e1;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: 1rem;
+}
\ No newline at end of file
diff --git a/export/supervisor_excel.php b/export/supervisor_excel.php
index 359d27c..ebaee8f 100644
--- a/export/supervisor_excel.php
+++ b/export/supervisor_excel.php
@@ -48,16 +48,16 @@ $data = $db->query(
         (auditoria->>'estado_supervisor_id')::integer as estado_id,
         auditoria->>'registro_retardo' as registro_retardo
     FROM last_auditoria
-    JOIN BLOQUE_HORARIO ON ((auditoria->>'horario_hora')::TIME, (auditoria->>'horario_fin')::TIME) OVERLAPS (HORA_INICIO, HORA_FIN)
+    -- JOIN BLOQUE_HORARIO ON ((auditoria->>'horario_hora')::TIME, (auditoria->>'horario_fin')::TIME) OVERLAPS (HORA_INICIO, HORA_FIN)
     WHERE USUARIO_ID = :usuario_id
         AND auditoria->>'facultad_id' = COALESCE(:facultad_id, auditoria->>'facultad_id')
         AND auditoria->>'profesor_clave' = COALESCE(:profesor_clave, auditoria->>'profesor_clave')
-        AND BLOQUE_HORARIO.ID = COALESCE(:bloque_horario_id, BLOQUE_HORARIO.ID)",
+        --AND BLOQUE_HORARIO.ID = COALESCE(:bloque_horario_id, BLOQUE_HORARIO.ID)",
     [
         'usuario_id' => $user->user['id'],
         'facultad_id' => $params['facultad_id'],
         'profesor_clave' => $profesor_clave,
-        'bloque_horario_id' => $params['bloque_horario']
+        /* 'bloque_horario_id' => $params['bloque_horario'] */
     ]
 );
 
diff --git a/fonts/svg/portrait.svg b/fonts/svg/portrait.svg
new file mode 100644
index 0000000..8432242
--- /dev/null
+++ b/fonts/svg/portrait.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" width="512" height="512"><path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H18V20A6,6,0,0,0,6,20v1H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5Z" fill="#001d68"/><circle cx="12" cy="8.5" r="3.5" fill="#001d68"/></svg>
diff --git a/js/auditoría.js b/js/auditoría.js
index ef0833d..683dc0d 100644
--- a/js/auditoría.js
+++ b/js/auditoría.js
@@ -337,12 +337,12 @@ const detalle = reactive({
         this.horario_grupo = null
     },
 
-    async obtener_detalle(horario_id, profesor_id) {
+    async obtener_detalle(horario_id, profesor_id, registro_fecha_ideal) {
         detalle.reset();
         
         $('div.modal#cargando').modal('show');
         try {
-            const resultado = await (await fetch(`action/action_auditoria_detalle.php?${new URLSearchParams({ horario_id, profesor_id })}`)).json();
+            const resultado = await (await fetch(`action/action_auditoria_detalle.php?${new URLSearchParams({ horario_id, profesor_id, registro_fecha_ideal })}`)).json();
 
             this.correo = resultado.profesor_correo;
             this.facultad = resultado.facultad;
@@ -350,6 +350,9 @@ const detalle = reactive({
             this.carrera = resultado.carrera;
             this.nivel = resultado.nivel;
             this.horario_grupo = resultado.horario_grupo;
+
+            this.registro_fecha =
+            store.current.clase_vista = resultado
         }
         catch (error) {
             console.log('Error:', error)