From b66d6cdff28ccd58ba208a93ffd922d24cbf0007 Mon Sep 17 00:00:00 2001
From: Isaac <aizaclopez1511@gmail.com>
Date: Thu, 19 Feb 2026 20:07:40 -0500
Subject: [PATCH 01/46] cambios isaac

---
 src/pages/Home.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index a43bb4a..30624b8 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,7 @@ function Home(){
     return(
         <div>
             <h2>Inicio</h2>
-            <p>Bienvenido a nuestra app web con React</p>
+            <p>Bienvenido a nuestra app web con React isaac</p>
         </div>
     )
 }

From 2dafb56475a07874d0d24ad87b4fe79fc5a12bfd Mon Sep 17 00:00:00 2001
From: JoseG <joseelopez832@gmail.com>
Date: Thu, 19 Feb 2026 14:09:35 -1100
Subject: [PATCH 02/46] cambios jose en home

---
 src/pages/Home.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index a43bb4a..664e63f 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,7 @@ function Home(){
     return(
         <div>
             <h2>Inicio</h2>
-            <p>Bienvenido a nuestra app web con React</p>
+            <p>Bienvenido a nuestra app web con React joseeee</p>
         </div>
     )
 }

From ff80da17441c9a316bef356a9c7c7775bcc8d5a9 Mon Sep 17 00:00:00 2001
From: emilio <ramirezmoralesemilio@gmail.com>
Date: Thu, 19 Feb 2026 20:12:53 -0500
Subject: [PATCH 03/46] Cambios en Clock UI - Emilio

---
 src/pages/Home.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index a43bb4a..80dde86 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,7 @@ function Home(){
     return(
         <div>
             <h2>Inicio</h2>
-            <p>Bienvenido a nuestra app web con React</p>
+            <p>Bienvenido a nuestra app web con React Emilio</p>
         </div>
     )
 }

From 3e4a6710335279a0f73f155f4d18b22c8259b23a Mon Sep 17 00:00:00 2001
From: Alejandro Arias <00835181@red.unid.mx>
Date: Thu, 19 Feb 2026 20:15:29 -0500
Subject: [PATCH 04/46] cambios reports alejandro

---
 src/pages/Home.jsx    | 2 +-
 src/pages/Reports.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index a43bb4a..189738f 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,7 @@ function Home(){
     return(
         <div>
             <h2>Inicio</h2>
-            <p>Bienvenido a nuestra app web con React</p>
+            <p>Bienvenido a nuestra app web con React alejandro</p>
         </div>
     )
 }
diff --git a/src/pages/Reports.jsx b/src/pages/Reports.jsx
index a3542af..0dce81c 100644
--- a/src/pages/Reports.jsx
+++ b/src/pages/Reports.jsx
@@ -9,7 +9,7 @@ function Reports() {
                     <div className="bg-white p-6 rounded-xl shadow
                         hover:shadow-lg transition"> 
                             <h3 className="text-lg font-semibold mb-2">
-                                Reporte Mensual
+                                Reporte Mensual alejandro
                             </h3> 
                             <p className="text-slate-500 text-sm">
                                 Asistencia general por mes.

From 4d291200c7d803ee9191ce67edc99297c6777697 Mon Sep 17 00:00:00 2001
From: Nestor Alejandro <00856217@red.unid.mx>
Date: Fri, 20 Feb 2026 16:54:30 -0500
Subject: [PATCH 05/46] cambios en sidebar-Chiquil

---
 package-lock.json          |  10 +++
 package.json               |   1 +
 src/components/Sidebar.jsx | 136 ++++++++++++++++++++++++++++++-------
 src/pages/Home.jsx         |   2 +-
 4 files changed, 122 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 793b45c..d884077 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "react-intro",
       "version": "0.0.0",
       "dependencies": {
+        "@heroicons/react": "^2.2.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.13.0"
@@ -921,6 +922,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index 5f05d3a..a96a7fc 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.13.0"
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index db6cea9..5e8e8fb 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,39 +1,123 @@
-import {Link} from 'react-router-dom'
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+// Importamos los iconos de Heroicons
+// IMPORTANTE: Este módulo usa Heroicons. 
+// Si ves un error de "module not found", ejecuta en la terminal:
+// npm install @heroicons/react
+import { 
+    HomeIcon, 
+    InformationCircleIcon, 
+    PhoneIcon, 
+    Squares2X2Icon, 
+    UserGroupIcon, 
+    ClockIcon, 
+    DocumentChartBarIcon,
+    Bars3Icon, 
+    MagnifyingGlassIcon, 
+    ArrowLeftOnRectangleIcon, 
+    UserCircleIcon 
+} from '@heroicons/react/24/outline';
 
-function Sidebar(){
-    return(
-        <aside className='w-64 bg-slate-900 text-white min-h-screen p-6 flex flex-col'>
-            <h2 className='text-xl font-bold mb-8'>Reloj Checador</h2>
+function Sidebar() {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+
+    return (
+        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-slate-900 text-white min-h-screen p-6 flex flex-col transition-all duration-300`}>
+            
+            {/* Cabecera y Botón Hamburguesa */}
+            <div className='flex items-center justify-between mb-8'>
+                {!isCollapsed && <h2 className='text-xl font-bold truncate'>Reloj Checador</h2>}
+                <button 
+                    onClick={() => setIsCollapsed(!isCollapsed)}
+                    className="p-1 hover:bg-slate-800 rounded text-slate-400 mx-auto"
+                >
+                    <Bars3Icon className="h-6 w-6" />
+                </button>
+            </div>
+
+            {/* Perfil de Usuario */}
+            <div className={`flex items-center gap-3 mb-6 p-2 rounded-lg bg-slate-800/50 ${isCollapsed ? 'justify-center' : ''}`}>
+                <UserCircleIcon className="h-8 w-8 text-sky-400 flex-shrink-0" />
+                {!isCollapsed && <p className="text-xs font-bold truncate">Admin UNID</p>}
+            </div>
+
+            {/* Buscador */}
+            <div className={`relative mb-8 ${isCollapsed ? 'hidden' : 'block'}`}>
+                <span className="absolute inset-y-0 left-0 flex items-center pl-2 text-slate-500">
+                    <MagnifyingGlassIcon className="h-4 w-4" />
+                </span>
+                <input 
+                    type="text" 
+                    placeholder="Buscar..." 
+                    className="w-full bg-slate-800 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none focus:ring-1 focus:ring-sky-500"
+                />
+            </div>
            
-            {/*Seccion publica*/}
+            {/* Seccion publica */}
             <div className='mb-6'>   
-                <p className='text-slate-400 text-sm mb-2 uppercase tracking-wide'>Sitio</p>
-                <nav className='flex flex-col gap-3'>
-                    <Link to="/" className='hover:text-sky-400 transition'>Inicio</Link>
-                    <Link to="/about" className='hover:text-sky-400 transition'>Acerca de</Link>
-                    <Link to="/contact" className='hover:text-sky-400 transition'>Contacto</Link>
+                <p className={`text-slate-400 text-[10px] mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
+                    {isCollapsed ? '•' : 'Sitio'}
+                </p>
+                <nav className='flex flex-col gap-4'>
+                    <Link to="/" className='flex items-center gap-3 hover:text-sky-400 transition'>
+                        <HomeIcon className="h-5 w-5" />
+                        {!isCollapsed && <span>Inicio</span>}
+                    </Link>
+                    <Link to="/about" className='flex items-center gap-3 hover:text-sky-400 transition'>
+                        <InformationCircleIcon className="h-5 w-5" />
+                        {!isCollapsed && <span>Acerca de</span>}
+                    </Link>
+                    <Link to="/contact" className='flex items-center gap-3 hover:text-sky-400 transition'>
+                        <PhoneIcon className="h-5 w-5" />
+                        {!isCollapsed && <span>Contacto</span>}
+                    </Link>
                 </nav>
             </div>
            
-           {/*Seccion administrativa*/}
-              <div className='mt-6'>
-                 <p className='text-slate-400 text-sm mb-2 uppercase tracking-wide'>Administracion</p>
-                 <nav className='flex flex-col gap-3'>
-                    <Link to="/admin" className='hover:text-sky-400 transition'>Dashboard</Link>
-                    <Link to="/teachers" className='hover:text-sky-400 transition'>Maestros</Link>
-                    <Link to="/clock" className='hover:text-sky-400 transition'>Reloj</Link>
-                    <Link to="/reports" className='hover:text-sky-400 transition'>Reportes</Link>
-                 </nav>
-              </div>
+            {/* Seccion administrativa */}
+            <div className='mt-2'>
+                <p className={`text-slate-400 text-[10px] mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
+                    {isCollapsed ? '•' : 'Administracion'}
+                </p>
+                <nav className='flex flex-col gap-4'>
+                    <Link to="/admin" className='flex items-center gap-3 hover:text-sky-400 transition'>
+                        <Squares2X2Icon className="h-5 w-5" />
+                        {!isCollapsed && <span>Dashboard</span>}
+                    </Link>
+                    <Link to="/teachers" className='flex items-center gap-3 hover:text-sky-400 transition'>
+                        <UserGroupIcon className="h-5 w-5" />
+                        {!isCollapsed && <span>Maestros</span>}
+                    </Link>
+                    <Link to="/clock" className='flex items-center gap-3 hover:text-sky-400 transition'>
+                        <ClockIcon className="h-5 w-5" />
+                        {!isCollapsed && <span>Reloj</span>}
+                    </Link>
+                    <Link to="/reports" className='flex items-center gap-3 hover:text-sky-400 transition'>
+                        <DocumentChartBarIcon className="h-5 w-5" />
+                        {!isCollapsed && <span>Reportes</span>}
+                    </Link>
+                </nav>
+            </div>
             
-            {/*espaciador*/}
+            {/* Espaciador (Este empuja todo lo de abajo al final) */}
             <div className='flex-1'/>
-            {/*footer*/}
-            <div  className='text-slate-400 text-sm'> 
-                 Universidad UNID Playa del Carmen * Admin
+
+            {/* Footer y Botón Cerrar Sesión (Esquina inferior izquierda) */}
+            <div className='mt-auto pt-6'>
+                <button className={`flex items-center gap-3 text-red-500 hover:text-red-400 transition mb-4 w-full ${isCollapsed ? 'justify-center' : ''}`}>
+                    <ArrowLeftOnRectangleIcon className="h-6 w-6" />
+                    {!isCollapsed && <span className='text-sm font-bold'>Cerrar Sesión</span>}
+                </button>
+
+                {!isCollapsed && (
+                    <div className='text-slate-500 text-[10px] border-t border-slate-800 pt-4 leading-tight'> 
+                         Universidad UNID <br />
+                         Playa del Carmen * Admin
+                    </div>
+                )}
             </div>            
         </aside>
     )
 }
 
-export default Sidebar
\ No newline at end of file
+export default Sidebar;
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 356615d..0606883 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,7 @@ function Home(){
     return(
         <div>
             <h2>Inicio</h2>
-            <p>Bienvenido a nuestra app web con Reac ChIQUIL</p>
+            <p>Bienvenido a nuestra app web con React Chiquil</p>
         </div>
     )
 }

From 60735a73f3e2617929d55a6e641dc6018da94949 Mon Sep 17 00:00:00 2001
From: Nestor Alejandro <00856217@red.unid.mx>
Date: Fri, 20 Feb 2026 17:38:39 -0500
Subject: [PATCH 06/46] cambios hechos en el sideba-Chiquil

---
 src/components/Sidebar.jsx | 121 ++++++++++++++++++++-----------------
 src/pages/Home.jsx         |   2 +-
 2 files changed, 65 insertions(+), 58 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 5e8e8fb..f8f66d7 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,123 +1,130 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-// Importamos los iconos de Heroicons
+import { 
+    // Importamos los iconos de Heroicons
 // IMPORTANTE: Este módulo usa Heroicons. 
 // Si ves un error de "module not found", ejecuta en la terminal:
 // npm install @heroicons/react
-import { 
-    HomeIcon, 
-    InformationCircleIcon, 
-    PhoneIcon, 
-    Squares2X2Icon, 
-    UserGroupIcon, 
-    ClockIcon, 
-    DocumentChartBarIcon,
-    Bars3Icon, 
-    MagnifyingGlassIcon, 
-    ArrowLeftOnRectangleIcon, 
-    UserCircleIcon 
+    HomeIcon, InformationCircleIcon, PhoneIcon, 
+    Squares2X2Icon, UserGroupIcon, ClockIcon, 
+    DocumentChartBarIcon, Bars3Icon, MagnifyingGlassIcon, 
+    ArrowLeftOnRectangleIcon, UserCircleIcon 
 } from '@heroicons/react/24/outline';
 
+// Sidebar con secciones públicas y administrativas, colapsable, con perfil de usuario, buscador y botón de cerrar sesión
 function Sidebar() {
     const [isCollapsed, setIsCollapsed] = useState(false);
 
+    // Corregido: Ahora sí crecen al colapsar (h-8) y son normales al expandir (h-5)
+    const iconSize = isCollapsed ? 'h-8 w-8' : 'h-5 w-5';
+
+
+    // El sidebar se colapsa a 96px (w-24) y se expande a 256px (w-64).
     return (
-        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-slate-900 text-white min-h-screen p-6 flex flex-col transition-all duration-300`}>
+        <aside className={`${isCollapsed ? 'w-24' : 'w-64'} bg-slate-900 text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-slate-800`}>
             
-            {/* Cabecera y Botón Hamburguesa */}
+            {/* Cabecera y Hamburguesa */}
             <div className='flex items-center justify-between mb-8'>
                 {!isCollapsed && <h2 className='text-xl font-bold truncate'>Reloj Checador</h2>}
                 <button 
                     onClick={() => setIsCollapsed(!isCollapsed)}
-                    className="p-1 hover:bg-slate-800 rounded text-slate-400 mx-auto"
+                    className="p-1 hover:bg-slate-800 rounded text-slate-400 mx-auto transition-colors"
                 >
-                    <Bars3Icon className="h-6 w-6" />
+                    <Bars3Icon className="h-8 w-8" />
                 </button>
             </div>
 
             {/* Perfil de Usuario */}
             <div className={`flex items-center gap-3 mb-6 p-2 rounded-lg bg-slate-800/50 ${isCollapsed ? 'justify-center' : ''}`}>
-                <UserCircleIcon className="h-8 w-8 text-sky-400 flex-shrink-0" />
+                <UserCircleIcon className={`${isCollapsed ? 'h-10 w-10' : 'h-8 w-8'} text-sky-400 shrink-0`} />
                 {!isCollapsed && <p className="text-xs font-bold truncate">Admin UNID</p>}
             </div>
 
             {/* Buscador */}
-            <div className={`relative mb-8 ${isCollapsed ? 'hidden' : 'block'}`}>
-                <span className="absolute inset-y-0 left-0 flex items-center pl-2 text-slate-500">
-                    <MagnifyingGlassIcon className="h-4 w-4" />
-                </span>
-                <input 
-                    type="text" 
-                    placeholder="Buscar..." 
-                    className="w-full bg-slate-800 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none focus:ring-1 focus:ring-sky-500"
-                />
-            </div>
+            {!isCollapsed && (
+                <div className='relative mb-8 px-1'>
+                    <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
+                    <input 
+                        type="text" 
+                        placeholder="Buscar..." 
+                        className="w-full bg-slate-800 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-slate-700"
+                    />
+                </div>
+            )}
            
-            {/* Seccion publica */}
+            {/* SECCIÓN PÚBLICA */}
             <div className='mb-6'>   
-                <p className={`text-slate-400 text-[10px] mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
+                <p className={`text-slate-400 text-sm mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
                     {isCollapsed ? '•' : 'Sitio'}
                 </p>
-                <nav className='flex flex-col gap-4'>
-                    <Link to="/" className='flex items-center gap-3 hover:text-sky-400 transition'>
-                        <HomeIcon className="h-5 w-5" />
+                <nav className='flex flex-col gap-5'>
+                    <Link to="/" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
+                        <HomeIcon className={`${iconSize} shrink-0`} />
                         {!isCollapsed && <span>Inicio</span>}
                     </Link>
-                    <Link to="/about" className='flex items-center gap-3 hover:text-sky-400 transition'>
-                        <InformationCircleIcon className="h-5 w-5" />
+                    <Link to="/about" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
+                        <InformationCircleIcon className={`${iconSize} shrink-0`} />
                         {!isCollapsed && <span>Acerca de</span>}
                     </Link>
-                    <Link to="/contact" className='flex items-center gap-3 hover:text-sky-400 transition'>
-                        <PhoneIcon className="h-5 w-5" />
+                    <Link to="/contact" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
+                        <PhoneIcon className={`${iconSize} shrink-0`} />
                         {!isCollapsed && <span>Contacto</span>}
                     </Link>
                 </nav>
             </div>
            
-            {/* Seccion administrativa */}
-            <div className='mt-2'>
-                <p className={`text-slate-400 text-[10px] mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
+            {/* SECCIÓN ADMINISTRATIVA */}
+            <div className='mt-4'>
+                <p className={`text-slate-400 text-sm mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
                     {isCollapsed ? '•' : 'Administracion'}
                 </p>
-                <nav className='flex flex-col gap-4'>
-                    <Link to="/admin" className='flex items-center gap-3 hover:text-sky-400 transition'>
-                        <Squares2X2Icon className="h-5 w-5" />
+                <nav className='flex flex-col gap-5'>
+                    <Link to="/admin" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
+                        <Squares2X2Icon className={`${iconSize} shrink-0`} />
                         {!isCollapsed && <span>Dashboard</span>}
                     </Link>
-                    <Link to="/teachers" className='flex items-center gap-3 hover:text-sky-400 transition'>
-                        <UserGroupIcon className="h-5 w-5" />
+                    <Link to="/teachers" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
+                        <UserGroupIcon className={`${iconSize} shrink-0`} />
                         {!isCollapsed && <span>Maestros</span>}
                     </Link>
-                    <Link to="/clock" className='flex items-center gap-3 hover:text-sky-400 transition'>
-                        <ClockIcon className="h-5 w-5" />
+                    <Link to="/clock" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
+                        <ClockIcon className={`${iconSize} shrink-0`} />
                         {!isCollapsed && <span>Reloj</span>}
                     </Link>
-                    <Link to="/reports" className='flex items-center gap-3 hover:text-sky-400 transition'>
-                        <DocumentChartBarIcon className="h-5 w-5" />
+                    <Link to="/reports" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
+                        <DocumentChartBarIcon className={`${iconSize} shrink-0`} />
                         {!isCollapsed && <span>Reportes</span>}
                     </Link>
                 </nav>
             </div>
             
-            {/* Espaciador (Este empuja todo lo de abajo al final) */}
             <div className='flex-1'/>
 
-            {/* Footer y Botón Cerrar Sesión (Esquina inferior izquierda) */}
-            <div className='mt-auto pt-6'>
-                <button className={`flex items-center gap-3 text-red-500 hover:text-red-400 transition mb-4 w-full ${isCollapsed ? 'justify-center' : ''}`}>
-                    <ArrowLeftOnRectangleIcon className="h-6 w-6" />
-                    {!isCollapsed && <span className='text-sm font-bold'>Cerrar Sesión</span>}
+            {/* Footer y Botón Cerrar Sesión CORREGIDO */}
+            <div className='mt-auto pt-6 border-t border-slate-800'>
+                <button 
+                    className={`flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group
+                    ${isCollapsed ? 'justify-center' : 'hover:bg-red-500/10'}`}
+                >
+                    <ArrowLeftOnRectangleIcon 
+                        className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} 
+                    />
+                    {!isCollapsed && (
+                        <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
+                            Cerrar Sesión
+                        </span>
+                    )}
                 </button>
 
                 {!isCollapsed && (
-                    <div className='text-slate-500 text-[10px] border-t border-slate-800 pt-4 leading-tight'> 
+                    <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
                          Universidad UNID <br />
                          Playa del Carmen * Admin
                     </div>
                 )}
             </div>            
         </aside>
-    )
+    );
 }
 
 export default Sidebar;
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 0606883..197c9c9 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,7 @@ function Home(){
     return(
         <div>
             <h2>Inicio</h2>
-            <p>Bienvenido a nuestra app web con React Chiquil</p>
+            <p>Bienvenido a nuestra app web con React </p>
         </div>
     )
 }

From 84e4c9ec0f68cc7156b339667e2063b82dc770d3 Mon Sep 17 00:00:00 2001
From: Alejandro Arias <00835181@red.unid.mx>
Date: Mon, 23 Feb 2026 12:55:43 -0500
Subject: [PATCH 07/46] Cambios en Clock UI - alejandro

---
 src/App.jsx                             |   2 +
 src/components/Sidebar.jsx              |   1 +
 src/pages/systemConfig/SystemConfig.jsx | 752 ++++++++++++++++++++++++
 3 files changed, 755 insertions(+)
 create mode 100644 src/pages/systemConfig/SystemConfig.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 78f28a5..2715c0b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ import Dashboard from "./pages/Dashboard"
 import Teachers from "./pages/Teachers"
 import Clock from "./pages/Clock"
 import Reports from "./pages/Reports"
+import SystemConfig from "./pages/systemConfig/SystemConfig"
 
 
 function App() {
@@ -26,6 +27,7 @@ function App() {
             <Route path="/teachers" element={<Teachers />} />
             <Route path="/clock" element={<Clock />} />
             <Route path="/reports" element={<Reports />} />
+            <Route path="/configuracion" element={<SystemConfig />} />
           </Routes>
         </main>
       </div>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index db6cea9..02e4a97 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -23,6 +23,7 @@ function Sidebar(){
                     <Link to="/teachers" className='hover:text-sky-400 transition'>Maestros</Link>
                     <Link to="/clock" className='hover:text-sky-400 transition'>Reloj</Link>
                     <Link to="/reports" className='hover:text-sky-400 transition'>Reportes</Link>
+                    <Link to="/configuracion" className='hover:text-sky-400 transition'>Configuración</Link>
                  </nav>
               </div>
             
diff --git a/src/pages/systemConfig/SystemConfig.jsx b/src/pages/systemConfig/SystemConfig.jsx
new file mode 100644
index 0000000..4784c8b
--- /dev/null
+++ b/src/pages/systemConfig/SystemConfig.jsx
@@ -0,0 +1,752 @@
+
+import { useState } from "react";
+
+// ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
+const styles = {
+  // Layout principal
+  wrapper: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    background: "#ffffff",
+    minHeight: "100vh",
+    padding: "2rem",
+    color: "#1f2937",
+  },
+  header: {
+    marginBottom: "2.5rem",
+    borderBottom: "1px solid rgba(0,0,0,0.1)",
+    paddingBottom: "1.5rem",
+  },
+  headerTitle: {
+    fontSize: "2rem",
+    fontWeight: "700",
+    letterSpacing: "-0.02em",
+    color: "#1f2937",
+    margin: "0 0 0.25rem 0",
+  },
+  headerSubtitle: {
+    fontSize: "0.95rem",
+    color: "#6b7280",
+    margin: 0,
+    fontStyle: "italic",
+  },
+  moduleBadge: {
+    display: "inline-block",
+    background: "rgba(59,130,246,0.1)",
+    border: "1px solid rgba(59,130,246,0.3)",
+    color: "#1e40af",
+    fontSize: "0.75rem",
+    padding: "0.2rem 0.75rem",
+    borderRadius: "999px",
+    marginBottom: "0.75rem",
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+  },
+
+  // Grid de secciones
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(480px, 1fr))",
+    gap: "1.5rem",
+  },
+  gridFull: {
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    gap: "1.5rem",
+  },
+
+  // Cards
+  card: {
+    background: "#f9fafb",
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderRadius: "16px",
+    padding: "1.75rem",
+    backdropFilter: "blur(12px)",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  },
+  cardTitle: {
+    fontSize: "1rem",
+    fontWeight: "600",
+    color: "#1f2937",
+    margin: "0 0 0.25rem 0",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  cardDesc: {
+    fontSize: "0.82rem",
+    color: "#6b7280",
+    marginBottom: "1.25rem",
+    margin: "0 0 1.25rem 0",
+  },
+
+  // Formularios
+  label: {
+    display: "block",
+    fontSize: "0.8rem",
+    color: "#374151",
+    marginBottom: "0.35rem",
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+  },
+  input: {
+    width: "100%",
+    background: "#ffffff",
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: "8px",
+    padding: "0.6rem 0.9rem",
+    color: "#1f2937",
+    fontSize: "0.9rem",
+    outline: "none",
+    boxSizing: "border-box",
+    transition: "border-color 0.2s",
+  },
+  select: {
+    width: "100%",
+    background: "#ffffff",
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: "8px",
+    padding: "0.6rem 0.9rem",
+    color: "#1f2937",
+    fontSize: "0.9rem",
+    outline: "none",
+    boxSizing: "border-box",
+  },
+  fieldGroup: {
+    marginBottom: "1rem",
+  },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "1rem",
+  },
+
+  // Botones
+  btnPrimary: {
+    background: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
+    color: "#fff",
+    border: "none",
+    borderRadius: "8px",
+    padding: "0.55rem 1.4rem",
+    fontSize: "0.85rem",
+    fontWeight: "600",
+    cursor: "pointer",
+    transition: "opacity 0.2s, transform 0.1s",
+    letterSpacing: "0.02em",
+  },
+  btnSecondary: {
+    background: "#ffffff",
+    color: "#374151",
+    border: "1px solid rgba(0,0,0,0.15)",
+    borderRadius: "8px",
+    padding: "0.55rem 1.2rem",
+    fontSize: "0.85rem",
+    cursor: "pointer",
+    transition: "background 0.2s",
+  },
+  btnDanger: {
+    background: "rgba(239,68,68,0.1)",
+    color: "#dc2626",
+    border: "1px solid rgba(239,68,68,0.3)",
+    borderRadius: "8px",
+    padding: "0.4rem 0.9rem",
+    fontSize: "0.8rem",
+    cursor: "pointer",
+  },
+  btnActions: {
+    display: "flex",
+    gap: "0.75rem",
+    marginTop: "1.25rem",
+    justifyContent: "flex-end",
+  },
+
+  // Slider
+  sliderWrapper: {
+    marginBottom: "1rem",
+  },
+  sliderRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "0.4rem",
+  },
+  sliderValue: {
+    background: "rgba(59,130,246,0.1)",
+    color: "#1e40af",
+    padding: "0.1rem 0.6rem",
+    borderRadius: "999px",
+    fontSize: "0.85rem",
+    fontWeight: "700",
+  },
+  slider: {
+    width: "100%",
+    accentColor: "#3b82f6",
+    cursor: "pointer",
+  },
+
+  // Tabla de roles
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "0.88rem",
+  },
+  th: {
+    textAlign: "left",
+    padding: "0.6rem 0.8rem",
+    color: "#374151",
+    fontSize: "0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    borderBottom: "1px solid rgba(0,0,0,0.08)",
+  },
+  td: {
+    padding: "0.75rem 0.8rem",
+    borderBottom: "1px solid rgba(0,0,0,0.04)",
+    color: "#374151",
+    verticalAlign: "middle",
+  },
+
+  // Badges de estado
+  badgeActive: {
+    background: "rgba(34,197,94,0.1)",
+    color: "#159b2b",
+    border: "1px solid rgba(34,197,94,0.2)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+  },
+  badgeInactive: {
+    background: "rgba(0,0,0,0.05)",
+    color: "#6b7280",
+    border: "1px solid rgba(0,0,0,0.1)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+  },
+  badgeAdmin: {
+    background: "rgba(168,85,247,0.1)",
+    color: "#7e22ce",
+    border: "1px solid rgba(168,85,247,0.2)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+  },
+
+  // Toggle switch
+  toggleRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.7rem 0",
+    borderBottom: "1px solid rgba(0,0,0,0.05)",
+  },
+  toggleLabel: {
+    fontSize: "0.88rem",
+    color: "#1f2937",
+  },
+  toggleSub: {
+    fontSize: "0.78rem",
+    color: "#9ca3af",
+    marginTop: "0.1rem",
+  },
+
+  // Horario
+  scheduleGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gap: "0.4rem",
+    marginBottom: "1rem",
+  },
+  dayCell: {
+    textAlign: "center",
+    padding: "0.5rem 0.25rem",
+    borderRadius: "8px",
+    fontSize: "0.78rem",
+    cursor: "pointer",
+    border: "1px solid transparent",
+    transition: "all 0.2s",
+    fontWeight: "600",
+  },
+  dayCellActive: {
+    background: "rgba(59,130,246,0.1)",
+    border: "1px solid rgba(59,130,246,0.3)",
+    color: "#1e40af",
+  },
+  dayCellInactive: {
+    background: "#f3f4f6",
+    border: "1px solid rgba(0,0,0,0.08)",
+    color: "#9ca3af",
+  },
+
+  // Divider
+  divider: {
+    borderTop: "1px solid rgba(0,0,0,0.06)",
+    margin: "1.25rem 0",
+  },
+
+  // Icono decorativo en card header
+  iconBox: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "1rem",
+    flexShrink: 0,
+  },
+};
+
+// ─── Datos mock ─────────────────────────────────────────────────────────────────
+
+const MOCK_ROLES = [
+  { id: 1, nombre: "Administrador", permisos: "Total", usuarios: 3, estado: "activo" },
+  { id: 2, nombre: "Coordinador", permisos: "Parcial", usuarios: 8, estado: "activo" },
+  { id: 3, nombre: "Docente", permisos: "Lectura", usuarios: 42, estado: "activo" },
+  { id: 4, nombre: "Auxiliar", permisos: "Limitado", usuarios: 12, estado: "inactivo" },
+];
+
+const DIAS_SEMANA = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
+
+// ─── Subcomponente: Toggle ────────────────────────────────────────────────────
+
+function Toggle({ checked, onChange }) {
+  return (
+    <div
+      onClick={() => onChange(!checked)}
+      style={{
+        width: "42px",
+        height: "22px",
+        borderRadius: "999px",
+        background: checked ? "rgba(59,130,246,0.8)" : "rgba(209,213,219,0.8)",
+        border: checked ? "1px solid rgba(59,130,246,0.6)" : "1px solid rgba(0,0,0,0.12)",
+        position: "relative",
+        cursor: "pointer",
+        transition: "background 0.2s",
+        flexShrink: 0,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: "2px",
+          left: checked ? "21px" : "2px",
+          width: "16px",
+          height: "16px",
+          borderRadius: "50%",
+          background: "#fff",
+          transition: "left 0.2s",
+          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+        }}
+      />
+    </div>
+  );
+}
+
+// ─── Subcomponente: SectionCard ────────────────────────────────────────────────
+
+function SectionCard({ icon, title, desc, color = "#3b82f6", children }) {
+  return (
+    <div style={styles.card}>
+      <div style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", marginBottom: "1.25rem" }}>
+        <div style={{ ...styles.iconBox, background: `${color}22` }}>
+          <span>{icon}</span>
+        </div>
+        <div>
+          <h3 style={styles.cardTitle}>{title}</h3>
+          <p style={styles.cardDesc}>{desc}</p>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ─── Subcomponente: Badge de rol ───────────────────────────────────────────────
+
+function RolBadge({ permisos }) {
+  if (permisos === "Total") return <span style={styles.badgeAdmin}>{permisos}</span>;
+  if (permisos === "Parcial") return <span style={{ ...styles.badgeActive }}>{permisos}</span>;
+  return <span style={styles.badgeInactive}>{permisos}</span>;
+}
+
+// ─── COMPONENTE PRINCIPAL ──────────────────────────────────────────────────────
+
+export default function SystemConfig() {
+
+  // --- Estado: Ajustes Institucionales ---
+  const [institucion, setInstitucion] = useState({
+    nombre: "Instituto Tecnológico Nacional",
+    codigo: "ITN-2024",
+    zona: "America/Mexico_City",
+    idioma: "es",
+  });
+
+  // --- Estado: Tolerancia ---
+  const [tolerancia, setTolerancia] = useState({
+    entrada: 10,
+    salida: 5,
+    inasistencias: 3,
+  });
+
+  // --- Estado: Horario base ---
+  const [diasActivos, setDiasActivos] = useState([true, true, true, true, true, false, false]);
+  const [horaInicio, setHoraInicio] = useState("07:00");
+  const [horaFin, setHoraFin] = useState("18:00");
+  const [duracionBloque, setDuracionBloque] = useState("60");
+
+  // --- Estado: Roles ---
+  const [roles, setRoles] = useState(MOCK_ROLES);
+
+  // --- Estado: Notificaciones ---
+  const [notificaciones, setNotificaciones] = useState({
+    emailAsistencia: true,
+    emailReportes: true,
+    pushAlertas: false,
+    resumenDiario: true,
+    alertasFaltas: true,
+    notifDocentes: false,
+  });
+
+  // --- Handlers ---
+  const toggleDia = (idx) => {
+    const copia = [...diasActivos];
+    copia[idx] = !copia[idx];
+    setDiasActivos(copia);
+  };
+
+  const toggleRolEstado = (id) => {
+    setRoles(roles.map((r) =>
+      r.id === id ? { ...r, estado: r.estado === "activo" ? "inactivo" : "activo" } : r
+    ));
+  };
+
+  const toggleNotif = (key) => {
+    setNotificaciones((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  // ─── RENDER ────────────────────────────────────────────────────────────────
+
+  return (
+    <div style={styles.wrapper}>
+
+      {/* ── Encabezado del módulo ── */}
+      <header style={styles.header}>
+        <h1 style={styles.headerTitle}>Configuración del Sistema</h1>
+        <p style={styles.headerSubtitle}>
+          Administre los parámetros globales de operación institucional.
+        </p>
+      </header>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 1 & 2: Ajustes Institucionales + Tolerancia
+      ══════════════════════════════════════════════════════ */}
+      <div style={{ ...styles.grid, marginBottom: "1.5rem" }}>
+
+        {/* ── 1. Ajustes Institucionales ── */}
+        <SectionCard
+          icon="🏛️"
+          title="Ajustes Institucionales"
+          desc="Datos generales y configuración de la institución"
+          color="#3b82f6"
+        >
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Nombre de la institución</label>
+            <input
+              style={styles.input}
+              value={institucion.nombre}
+              onChange={(e) => setInstitucion({ ...institucion, nombre: e.target.value })}
+            />
+          </div>
+
+          <div style={styles.row}>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Código institucional</label>
+              <input
+                style={styles.input}
+                value={institucion.codigo}
+                onChange={(e) => setInstitucion({ ...institucion, codigo: e.target.value })}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Idioma</label>
+              <select
+                style={styles.select}
+                value={institucion.idioma}
+                onChange={(e) => setInstitucion({ ...institucion, idioma: e.target.value })}
+              >
+                <option value="es">Español</option>
+                <option value="en">English</option>
+                <option value="pt">Português</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Zona horaria</label>
+            <select
+              style={styles.select}
+              value={institucion.zona}
+              onChange={(e) => setInstitucion({ ...institucion, zona: e.target.value })}
+            >
+              <option value="America/Mexico_City">America/Mexico_City (UTC-6)</option>
+              <option value="America/Bogota">America/Bogota (UTC-5)</option>
+              <option value="America/Buenos_Aires">America/Buenos_Aires (UTC-3)</option>
+              <option value="America/Lima">America/Lima (UTC-5)</option>
+            </select>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Cancelar</button>
+            <button style={styles.btnPrimary}>Guardar cambios</button>
+          </div>
+        </SectionCard>
+
+        {/* ── 2. Configuración de Tolerancia ── */}
+        <SectionCard
+          icon="⏱️"
+          title="Configuración de Tolerancia"
+          desc="Límites de tiempo y ausencias permitidas"
+          color="#f59e0b"
+        >
+          {/* Slider: tolerancia de entrada */}
+          <div style={styles.sliderWrapper}>
+            <div style={styles.sliderRow}>
+              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de entrada</label>
+              <span style={styles.sliderValue}>{tolerancia.entrada} min</span>
+            </div>
+            <input
+              type="range" min={0} max={30} step={1}
+              value={tolerancia.entrada}
+              onChange={(e) => setTolerancia({ ...tolerancia, entrada: Number(e.target.value) })}
+              style={styles.slider}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
+              <span>0 min</span><span>30 min</span>
+            </div>
+          </div>
+
+          {/* Slider: tolerancia de salida */}
+          <div style={styles.sliderWrapper}>
+            <div style={styles.sliderRow}>
+              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de salida anticipada</label>
+              <span style={styles.sliderValue}>{tolerancia.salida} min</span>
+            </div>
+            <input
+              type="range" min={0} max={20} step={1}
+              value={tolerancia.salida}
+              onChange={(e) => setTolerancia({ ...tolerancia, salida: Number(e.target.value) })}
+              style={styles.slider}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
+              <span>0 min</span><span>20 min</span>
+            </div>
+          </div>
+
+          <div style={styles.divider} />
+
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Inasistencias permitidas por período</label>
+            <select
+              style={styles.select}
+              value={tolerancia.inasistencias}
+              onChange={(e) => setTolerancia({ ...tolerancia, inasistencias: Number(e.target.value) })}
+            >
+              {[1, 2, 3, 4, 5, 6].map((n) => (
+                <option key={n} value={n}>{n} inasistencia{n > 1 ? "s" : ""}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Indicador visual */}
+          <div style={{
+            background: "rgba(245,158,11,0.08)",
+            border: "1px solid rgba(245,158,11,0.2)",
+            borderRadius: "8px",
+            padding: "0.75rem 1rem",
+            display: "flex",
+            gap: "0.5rem",
+            alignItems: "flex-start",
+          }}>
+            <span>⚠️</span>
+            <p style={{ margin: 0, fontSize: "0.8rem", color: "#92400e", lineHeight: "1.4" }}>
+              Los cambios en tolerancia afectarán los registros futuros. Los datos históricos no se modificarán.
+            </p>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Restablecer</button>
+            <button style={styles.btnPrimary}>Aplicar</button>
+          </div>
+        </SectionCard>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 3: Horario Base
+      ══════════════════════════════════════════════════════ */}
+      <div style={{ marginBottom: "1.5rem" }}>
+        <SectionCard
+          icon="📅"
+          title="Horario Base"
+          desc="Define los días y horas de operación del sistema"
+          color="#10b981"
+        >
+          <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Días laborables activos</p>
+          <div style={styles.scheduleGrid}>
+            {DIAS_SEMANA.map((dia, idx) => (
+              <div
+                key={dia}
+                onClick={() => toggleDia(idx)}
+                style={{
+                  ...styles.dayCell,
+                  ...(diasActivos[idx] ? styles.dayCellActive : styles.dayCellInactive),
+                }}
+              >
+                <div>{dia}</div>
+                <div style={{ fontSize: "0.65rem", marginTop: "0.2rem", opacity: 0.7 }}>
+                  {diasActivos[idx] ? "✓" : "—"}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div style={styles.divider} />
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Hora de inicio</label>
+              <input
+                type="time"
+                style={styles.input}
+                value={horaInicio}
+                onChange={(e) => setHoraInicio(e.target.value)}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Hora de cierre</label>
+              <input
+                type="time"
+                style={styles.input}
+                value={horaFin}
+                onChange={(e) => setHoraFin(e.target.value)}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Duración de bloque</label>
+              <select
+                style={styles.select}
+                value={duracionBloque}
+                onChange={(e) => setDuracionBloque(e.target.value)}
+              >
+                <option value="45">45 minutos</option>
+                <option value="60">60 minutos</option>
+                <option value="90">90 minutos</option>
+                <option value="120">120 minutos</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Cancelar</button>
+            <button style={styles.btnPrimary}>Guardar horario</button>
+          </div>
+        </SectionCard>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 4 & 5: Roles + Notificaciones
+      ══════════════════════════════════════════════════════ */}
+      <div style={styles.grid}>
+
+        {/* ── 4. Gestión de Roles ── */}
+        <SectionCard
+          icon="🔑"
+          title="Gestión de Roles"
+          desc="Administre los roles y permisos del sistema"
+          color="#8b5cf6"
+        >
+          <table style={styles.table}>
+            <thead>
+              <tr>
+                <th style={styles.th}>Rol</th>
+                <th style={styles.th}>Permisos</th>
+                <th style={styles.th}>Usuarios</th>
+                <th style={styles.th}>Estado</th>
+                <th style={styles.th}>Acción</th>
+              </tr>
+            </thead>
+            <tbody>
+              {roles.map((rol) => (
+                <tr key={rol.id}>
+                  <td style={styles.td}>
+                    <span style={{ fontWeight: "600", color: "#1f2937" }}>{rol.nombre}</span>
+                  </td>
+                  <td style={styles.td}>
+                    <RolBadge permisos={rol.permisos} />
+                  </td>
+                  <td style={styles.td}>
+                    <span style={{ color: "#374151" }}>{rol.usuarios}</span>
+                  </td>
+                  <td style={styles.td}>
+                    {rol.estado === "activo"
+                      ? <span style={styles.badgeActive}>Activo</span>
+                      : <span style={styles.badgeInactive}>Inactivo</span>
+                    }
+                  </td>
+                  <td style={styles.td}>
+                    <button
+                      style={styles.btnDanger}
+                      onClick={() => toggleRolEstado(rol.id)}
+                    >
+                      {rol.estado === "activo" ? "Deshabilitar" : "Habilitar"}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnPrimary}>+ Nuevo rol</button>
+          </div>
+        </SectionCard>
+
+        {/* ── 5. Preferencias de Notificación ── */}
+        <SectionCard
+          icon="🔔"
+          title="Preferencias de Notificación"
+          desc="Configure qué alertas y notificaciones desea recibir"
+          color="#ec4899"
+        >
+          {[
+            { key: "emailAsistencia", label: "Notificaciones de asistencia", sub: "Email al registrar una asistencia" },
+            { key: "emailReportes", label: "Reportes periódicos", sub: "Resúmenes semanales por correo" },
+            { key: "pushAlertas", label: "Alertas push", sub: "Notificaciones en el navegador" },
+            { key: "resumenDiario", label: "Resumen diario", sub: "Email con el resumen del día" },
+            { key: "alertasFaltas", label: "Alertas por faltas excesivas", sub: "Notificar al superar el límite" },
+            { key: "notifDocentes", label: "Notificar a docentes", sub: "Avisar al docente sobre ausencias" },
+          ].map(({ key, label, sub }) => (
+            <div key={key} style={styles.toggleRow}>
+              <div>
+                <div style={styles.toggleLabel}>{label}</div>
+                <div style={styles.toggleSub}>{sub}</div>
+              </div>
+              <Toggle
+                checked={notificaciones[key]}
+                onChange={() => toggleNotif(key)}
+              />
+            </div>
+          ))}
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Restablecer</button>
+            <button style={styles.btnPrimary}>Guardar preferencias</button>
+          </div>
+        </SectionCard>
+      </div>
+
+     
+    </div>
+  );
+}
\ No newline at end of file

From 88a6642a2c12c69ceee5ce5ca71c2bdd6bbc897d Mon Sep 17 00:00:00 2001
From: Isaac <aizaclopez1511@gmail.com>
Date: Thu, 26 Feb 2026 18:47:10 -0500
Subject: [PATCH 08/46] =?UTF-8?q?Modificaci=C3=B3n=20de=20Teachers-Isaac?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json          |  10 +
 package.json               |   1 +
 src/components/Sidebar.jsx |   2 +-
 src/pages/Teachers.jsx     | 406 +++++++++++++++++++++++++++++++++++--
 4 files changed, 397 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 793b45c..d884077 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "react-intro",
       "version": "0.0.0",
       "dependencies": {
+        "@heroicons/react": "^2.2.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.13.0"
@@ -921,6 +922,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index 5f05d3a..a96a7fc 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.13.0"
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index db6cea9..ac808b8 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -36,4 +36,4 @@ function Sidebar(){
     )
 }
 
-export default Sidebar
\ No newline at end of file
+export default Sidebar;
\ No newline at end of file
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index c6ecaad..2d775ac 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,26 +1,390 @@
-function Teachers() {
+import { useState } from "react";
+
+const initialTeachers = [
+    { id: 1, name: "Leydi Xequeb", subject: "Matemáticas", email: "l.xequeb@universidad.edu", phone: "+502 5555-0101", status: "Activo", degree: "MSc. Matemáticas Aplicadas", joined: "2019-03-15", avatar: "LX" },
+    { id: 2, name: "Irvin Chan", subject: "Programación", email: "i.chan@universidad.edu", phone: "+502 5555-0202", status: "Activo", degree: "Ing. en Sistemas", joined: "2020-08-01", avatar: "IC" },
+    { id: 3, name: "Marcos Rivera", subject: "Fe y Mundo", email: "m.rivera@universidad.edu", phone: "+502 5555-0303", status: "Activo", degree: "Lic. Teología", joined: "2018-01-20", avatar: "MR" },
+    { id: 4, name: "Sandra López", subject: "Física", email: "s.lopez@universidad.edu", phone: "+502 5555-0404", status: "Inactivo", degree: "PhD. Física Teórica", joined: "2017-06-10", avatar: "SL" },
+    { id: 5, name: "Carlos Menéndez", subject: "Química", email: "c.menendez@universidad.edu", phone: "+502 5555-0505", status: "Activo", degree: "MSc. Química Industrial", joined: "2021-02-28", avatar: "CM" },
+    { id: 6, name: "Ana Fuentes", subject: "Inglés", email: "a.fuentes@universidad.edu", phone: "+502 5555-0606", status: "Licencia", degree: "BA. Lenguas Modernas", joined: "2016-09-05", avatar: "AF" },
+];
+
+const avatarColors = [
+    ["#1E3A8A", "#FBBF24"],
+    ["#1D4ED8", "#F59E0B"],
+    ["#1E40AF", "#FCD34D"],
+    ["#1a3270", "#FBBF24"],
+    ["#2563EB", "#F59E0B"],
+    ["#1E3A8A", "#FDE68A"],
+];
+
+const statusConfig = {
+    Activo: { bg: "#D1FAE5", color: "#065F46", dot: "#10B981" },
+    Inactivo: { bg: "#FEE2E2", color: "#991B1B", dot: "#EF4444" },
+    Licencia: { bg: "#FEF3C7", color: "#92400E", dot: "#F59E0B" },
+};
+
+export default function Teachers() {
+    const [teachers, setTeachers] = useState(initialTeachers);
+    const [search, setSearch] = useState("");
+    const [statusFilter, setStatusFilter] = useState("Todos");
+    const [showModal, setShowModal] = useState(false);
+    const [modalMode, setModalMode] = useState("add"); // "add" | "view" | "edit"
+    const [selectedTeacher, setSelectedTeacher] = useState(null);
+    const [form, setForm] = useState({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" });
+    const [sortField, setSortField] = useState("name");
+    const [sortDir, setSortDir] = useState("asc");
+
+    const filtered = teachers
+        .filter(t => statusFilter === "Todos" || t.status === statusFilter)
+        .filter(t =>
+            t.name.toLowerCase().includes(search.toLowerCase()) ||
+            t.subject.toLowerCase().includes(search.toLowerCase()) ||
+            t.email.toLowerCase().includes(search.toLowerCase())
+        )
+        .sort((a, b) => {
+            const va = a[sortField] || ""; const vb = b[sortField] || "";
+            return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+        });
+
+    const handleSort = (field) => {
+        if (sortField === field) setSortDir(d => d === "asc" ? "desc" : "asc");
+        else { setSortField(field); setSortDir("asc"); }
+    };
+
+    const openAdd = () => { setModalMode("add"); setForm({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" }); setShowModal(true); };
+    const openView = (t) => { setModalMode("view"); setSelectedTeacher(t); setShowModal(true); };
+    const openEdit = (t) => { setModalMode("edit"); setSelectedTeacher(t); setForm({ name: t.name, subject: t.subject, email: t.email, phone: t.phone, degree: t.degree, status: t.status }); setShowModal(true); };
+
+    const handleSave = () => {
+        if (!form.name.trim()) return;
+        if (modalMode === "edit") {
+            // Editar docente existente
+            setTeachers(prev => prev.map(t => t.id === selectedTeacher.id ? { ...selectedTeacher, ...form } : t));
+        } else {
+            // Agregar nuevo docente
+            const initials = form.name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
+            setTeachers(prev => [...prev, { ...form, id: Date.now(), avatar: initials, joined: new Date().toISOString().split("T")[0] }]);
+        }
+        setShowModal(false);
+    };
+
+    const handleDelete = (id) => {
+        if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
+            setTeachers(prev => prev.filter(t => t.id !== id));
+        }
+    };
+
+    const SortIcon = ({ field }) => (
+        <span style={{ marginLeft: 4, opacity: sortField === field ? 1 : 0.3, fontSize: 11 }}>
+            {sortField === field && sortDir === "desc" ? "▼" : "▲"}
+        </span>
+    );
+
     return (
-        <div>
-            <h1 className="text-2xl font-bold mb-4">Maestros</h1>
-                <div className="grid grid-cols-3 gap-6">   
-                    <div className="bg-white p-6 rounded-xl shadow"> 
-                        <h3 className="bg-white p-6 rounded-xl shadow">Leydi Xequeb</h3> 
-                        <p className="text-slate-500 text-sm">Matemáticas</p>
-                        <p className="mt-2 text-slate-600">Activo</p>
+        <div style={{ fontFamily: "'DM Sans', 'Segoe UI', sans-serif", background: "#F0F4FF", minHeight: "100vh", padding: "32px 24px" }}>
+            <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');
+        * { box-sizing: border-box; }
+        .th-btn:hover { background: #1E3A8A !important; color: white !important; }
+        .row-hover:hover { background: #EFF6FF !important; }
+        .icon-btn:hover { background: #EFF6FF !important; }
+        .action-btn { transition: all 0.15s; }
+        .action-btn:hover { opacity: 0.85; transform: translateY(-1px); }
+        input:focus, select:focus { outline: 2px solid #3B82F6; outline-offset: 1px; }
+        .modal-overlay { animation: fadeIn 0.2s ease; }
+        .modal-box { animation: slideUp 0.25s ease; }
+        @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 10px; }
+        ::-webkit-scrollbar-thumb { background: #93C5FD; border-radius: 10px; }
+      `}</style>
+
+            {/* Header */}
+            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
+                <div>
+                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
+                        <div style={{ width: 40, height: 40, background: "linear-gradient(135deg, #1E3A8A, #2563EB)", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center" }}>
+                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                            </svg>
+                        </div>
+                        <h1 style={{ fontFamily: "'Sora', sans-serif", fontSize: 26, fontWeight: 700, color: "#1E3A8A", margin: 0 }}>
+                            Gestión de Docentes
+                        </h1>
                     </div>
-                       <div className="bg-white p-6 rounded-xl shadow"> 
-                        <h3 className="bg-white p-6 rounded-xl shadow">Irvin Chan</h3> 
-                        <p className="text-slate-500 text-sm">Programacion</p>
-                        <p className="mt-2 text-slate-600">Activo</p>
+                    <p style={{ color: "#64748B", fontSize: 13.5, margin: 0, marginLeft: 50 }}>
+                        Sistema Académico Universitario · {teachers.length} docentes registrados
+                    </p>
+                </div>
+                <button
+                    onClick={openAdd}
+                    className="action-btn"
+                    style={{ display: "flex", alignItems: "center", gap: 8, background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", color: "white", border: "none", borderRadius: 10, padding: "11px 22px", fontWeight: 600, fontSize: 14, cursor: "pointer", boxShadow: "0 4px 14px rgba(37,99,235,0.35)" }}
+                >
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                    Agregar Docente
+                </button>
+            </div>
+
+            {/* Stats bar */}
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 14, marginBottom: 24 }}>
+                {[
+                    { label: "Total Docentes", value: teachers.length, icon: "👥", accent: "#1E3A8A" },
+                    { label: "Activos", value: teachers.filter(t => t.status === "Activo").length, icon: "✅", accent: "#059669" },
+                    { label: "Inactivos", value: teachers.filter(t => t.status === "Inactivo").length, icon: "⛔", accent: "#DC2626" },
+                    { label: "En Licencia", value: teachers.filter(t => t.status === "Licencia").length, icon: "📋", accent: "#D97706" },
+                ].map((s, i) => (
+                    <div key={i} style={{ background: "white", borderRadius: 12, padding: "16px 18px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", borderLeft: `4px solid ${s.accent}` }}>
+                        <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{s.label}</div>
+                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                            <span style={{ fontSize: 28, fontFamily: "'Sora', sans-serif", fontWeight: 700, color: s.accent }}>{s.value}</span>
+                            <span style={{ fontSize: 20 }}>{s.icon}</span>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Search & Filter bar */}
+            <div style={{ background: "white", borderRadius: 14, padding: "16px 20px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", marginBottom: 18, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
+                {/* Search */}
+                <div style={{ position: "relative", flex: "1 1 260px", minWidth: 200 }}>
+                    <svg style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "#94A3B8" }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
+                    <input
+                        value={search}
+                        onChange={e => setSearch(e.target.value)}
+                        placeholder="Buscar por nombre, materia o correo..."
+                        style={{ width: "100%", paddingLeft: 38, paddingRight: 14, height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
+                    />
+                </div>
+
+                {/* Status filter */}
+                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+                    {["Todos", "Activo", "Inactivo", "Licencia"].map(s => (
+                        <button
+                            key={s}
+                            onClick={() => setStatusFilter(s)}
+                            style={{
+                                padding: "7px 14px", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer", transition: "all 0.15s",
+                                background: statusFilter === s ? "linear-gradient(135deg, #1E3A8A, #2563EB)" : "#F1F5F9",
+                                color: statusFilter === s ? "white" : "#64748B",
+                                border: statusFilter === s ? "none" : "1.5px solid #E2E8F0"
+                            }}
+                        >{s}</button>
+                    ))}
+                </div>
+
+                {/* Results count */}
+                <div style={{ marginLeft: "auto", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>
+                    {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
+                </div>
+            </div>
+
+            {/* Table */}
+            <div style={{ background: "white", borderRadius: 14, boxShadow: "0 1px 8px rgba(0,0,0,0.08)", overflow: "hidden" }}>
+                <div style={{ overflowX: "auto" }}>
+                    <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}>
+                        <thead>
+                            <tr style={{ background: "linear-gradient(90deg, #1E3A8A 0%, #1D4ED8 100%)" }}>
+                                {[
+                                    { label: "Docente", field: "name" },
+                                    { label: "Materia", field: "subject" },
+                                    { label: "Correo", field: "email" },
+                                    { label: "Teléfono", field: null },
+                                    { label: "Estado", field: "status" },
+                                    { label: "Ingreso", field: "joined" },
+                                    { label: "Acciones", field: null },
+                                ].map((col, i) => (
+                                    <th
+                                        key={i}
+                                        onClick={() => col.field && handleSort(col.field)}
+                                        className={col.field ? "th-btn" : ""}
+                                        style={{
+                                            padding: "13px 16px", textAlign: "left", fontSize: 11.5, fontWeight: 700,
+                                            color: "#FBBF24", letterSpacing: "0.08em", textTransform: "uppercase",
+                                            cursor: col.field ? "pointer" : "default", userSelect: "none",
+                                            borderBottom: "2px solid rgba(251,191,36,0.3)", whiteSpace: "nowrap"
+                                        }}
+                                    >
+                                        {col.label}{col.field && <SortIcon field={col.field} />}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {filtered.length === 0 ? (
+                                <tr>
+                                    <td colSpan={7} style={{ textAlign: "center", padding: "52px 20px", color: "#94A3B8" }}>
+                                        <div style={{ fontSize: 40, marginBottom: 10 }}>🔍</div>
+                                        <div style={{ fontWeight: 600, fontSize: 15 }}>Sin resultados</div>
+                                        <div style={{ fontSize: 13 }}>Intenta cambiar el filtro o la búsqueda</div>
+                                    </td>
+                                </tr>
+                            ) : filtered.map((t, idx) => {
+                                const sc = statusConfig[t.status] || statusConfig.Activo;
+                                const ac = avatarColors[t.id % avatarColors.length];
+                                return (
+                                    <tr key={t.id} className="row-hover" style={{ borderBottom: "1px solid #F1F5F9", transition: "background 0.12s", background: idx % 2 === 0 ? "white" : "#FAFBFF" }}>
+                                        {/* Docente */}
+                                        <td style={{ padding: "13px 16px" }}>
+                                            <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
+                                                <div style={{ width: 38, height: 38, borderRadius: 10, background: `linear-gradient(135deg, ${ac[0]}, ${ac[1]})`, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13, color: ac[0] === "#FBBF24" ? "#1E3A8A" : "white", flexShrink: 0, boxShadow: "0 2px 8px rgba(0,0,0,0.15)" }}>
+                                                    {t.avatar}
+                                                </div>
+                                                <div>
+                                                    <div style={{ fontWeight: 600, fontSize: 14, color: "#1E293B" }}>{t.name}</div>
+                                                    <div style={{ fontSize: 11.5, color: "#94A3B8" }}>{t.degree}</div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        {/* Materia */}
+                                        <td style={{ padding: "13px 16px" }}>
+                                            <span style={{ background: "#EFF6FF", color: "#1D4ED8", borderRadius: 6, padding: "3px 10px", fontSize: 12.5, fontWeight: 600 }}>{t.subject}</span>
+                                        </td>
+                                        {/* Email */}
+                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569" }}>{t.email}</td>
+                                        {/* Phone */}
+                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569", whiteSpace: "nowrap" }}>{t.phone}</td>
+                                        {/* Status */}
+                                        <td style={{ padding: "13px 16px" }}>
+                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: sc.bg, color: sc.color, borderRadius: 20, padding: "4px 12px", fontSize: 12, fontWeight: 700 }}>
+                                                <span style={{ width: 7, height: 7, borderRadius: "50%", background: sc.dot, display: "inline-block" }} />
+                                                {t.status}
+                                            </span>
+                                        </td>
+                                        {/* Joined */}
+                                        <td style={{ padding: "13px 16px", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>{t.joined}</td>
+                                        {/* Actions */}
+                                        <td style={{ padding: "13px 16px" }}>
+                                            <div style={{ display: "flex", gap: 6 }}>
+                                                <button onClick={() => openView(t)} className="icon-btn" title="Ver perfil" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
+                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="2.2" strokeLinecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
+                                                </button>
+                                                <button onClick={() => openEdit(t)} className="icon-btn" title="Editar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
+                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.2" strokeLinecap="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>
+                                                </button>
+                                                <button onClick={() => handleDelete(t.id)} className="icon-btn" title="Eliminar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #FEE2E2", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
+                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.2" strokeLinecap="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* Table footer */}
+                <div style={{ padding: "12px 20px", borderTop: "1px solid #F1F5F9", display: "flex", justifyContent: "space-between", alignItems: "center", background: "#FAFBFF" }}>
+                    <span style={{ fontSize: 12.5, color: "#94A3B8" }}>Mostrando {filtered.length} de {teachers.length} docentes</span>
+                    <div style={{ display: "flex", gap: 4 }}>
+                        {[1].map(p => (
+                            <button key={p} style={{ width: 30, height: 30, borderRadius: 7, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13, cursor: "pointer" }}>{p}</button>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            {/* Modal */}
+            {showModal && (
+                <div className="modal-overlay" onClick={() => setShowModal(false)} style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 20 }}>
+                    <div className="modal-box" onClick={e => e.stopPropagation()} style={{ background: "white", borderRadius: 18, width: "100%", maxWidth: 520, boxShadow: "0 24px 64px rgba(0,0,0,0.22)", overflow: "hidden" }}>
+                        {/* Modal header */}
+                        <div style={{ background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", padding: "22px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                                <div style={{ width: 40, height: 40, borderRadius: 10, background: "rgba(251,191,36,0.2)", border: "2px solid #FBBF24", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
+                                </div>
+                                <div>
+                                    <h2 style={{ fontFamily: "'Sora', sans-serif", color: "white", margin: 0, fontSize: 18, fontWeight: 700 }}>
+                                        {modalMode === "add" ? "Nuevo Docente" : modalMode === "edit" ? "Editar Docente" : selectedTeacher?.name}
+                                    </h2>
+                                    <p style={{ color: "#93C5FD", margin: 0, fontSize: 12.5 }}>
+                                        {modalMode === "add" ? "Completar información del docente" : modalMode === "edit" ? "Actualizar información del docente" : selectedTeacher?.subject}
+                                    </p>
+                                </div>
+                            </div>
+                            <button onClick={() => setShowModal(false)} style={{ width: 34, height: 34, borderRadius: 8, border: "1.5px solid rgba(255,255,255,0.25)", background: "transparent", color: "white", fontSize: 18, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
+                        </div>
+
+                        {/* Modal body */}
+                        <div style={{ padding: "24px 28px" }}>
+                            {modalMode === "view" && selectedTeacher && !form.name ? (
+                                <div>
+                                    {/* Avatar grande */}
+                                    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24, padding: "16px", background: "#F8FAFC", borderRadius: 12 }}>
+                                        <div style={{ width: 64, height: 64, borderRadius: 16, background: "linear-gradient(135deg, #1E3A8A, #FBBF24)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, fontWeight: 800, color: "white", boxShadow: "0 4px 16px rgba(30,58,138,0.3)" }}>
+                                            {selectedTeacher.avatar}
+                                        </div>
+                                        <div>
+                                            <div style={{ fontWeight: 700, fontSize: 18, color: "#1E293B" }}>{selectedTeacher.name}</div>
+                                            <div style={{ fontSize: 13, color: "#64748B" }}>{selectedTeacher.degree}</div>
+                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, background: statusConfig[selectedTeacher.status]?.bg, color: statusConfig[selectedTeacher.status]?.color, borderRadius: 20, padding: "3px 10px", fontSize: 12, fontWeight: 700, marginTop: 4 }}>
+                                                <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig[selectedTeacher.status]?.dot, display: "inline-block" }} />
+                                                {selectedTeacher.status}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
+                                        {[
+                                            { icon: "📚", label: "Materia", val: selectedTeacher.subject },
+                                            { icon: "📧", label: "Correo", val: selectedTeacher.email },
+                                            { icon: "📞", label: "Teléfono", val: selectedTeacher.phone },
+                                            { icon: "📅", label: "Fecha de Ingreso", val: selectedTeacher.joined },
+                                        ].map((item, i) => (
+                                            <div key={i} style={{ background: "#F8FAFC", borderRadius: 10, padding: "12px 14px", border: "1px solid #E2E8F0" }}>
+                                                <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{item.icon} {item.label}</div>
+                                                <div style={{ fontSize: 13.5, color: "#334155", fontWeight: 500 }}>{item.val}</div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            ) : (
+                                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+                                    {[
+                                        { label: "Nombre Completo", key: "name", type: "text", placeholder: "Ej. María García López" },
+                                        { label: "Materia que imparte", key: "subject", type: "text", placeholder: "Ej. Cálculo Diferencial" },
+                                        { label: "Correo Institucional", key: "email", type: "email", placeholder: "docente@universidad.edu" },
+                                        { label: "Teléfono", key: "phone", type: "text", placeholder: "+502 0000-0000" },
+                                        { label: "Grado Académico", key: "degree", type: "text", placeholder: "Ej. MSc. Ingeniería de Software" },
+                                    ].map(field => (
+                                        <div key={field.key}>
+                                            <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>{field.label}</label>
+                                            <input
+                                                type={field.type}
+                                                placeholder={field.placeholder}
+                                                value={form[field.key]}
+                                                onChange={e => setForm(f => ({ ...f, [field.key]: e.target.value }))}
+                                                style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
+                                            />
+                                        </div>
+                                    ))}
+                                    <div>
+                                        <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>Estado</label>
+                                        <select value={form.status} onChange={e => setForm(f => ({ ...f, status: e.target.value }))} style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}>
+                                            <option>Activo</option><option>Inactivo</option><option>Licencia</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Modal footer */}
+                        <div style={{ padding: "16px 28px 24px", display: "flex", justifyContent: "flex-end", gap: 10 }}>
+                            <button onClick={() => setShowModal(false)} style={{ padding: "10px 22px", borderRadius: 9, border: "1.5px solid #E2E8F0", background: "white", color: "#64748B", fontWeight: 600, fontSize: 13.5, cursor: "pointer" }}>
+                                {modalMode === "view" ? "Cerrar" : "Cancelar"}
+                            </button>
+                            {(modalMode === "add" || modalMode === "edit") && (
+                                <button onClick={handleSave} className="action-btn" style={{ padding: "10px 24px", borderRadius: 9, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13.5, cursor: "pointer", boxShadow: "0 4px 12px rgba(37,99,235,0.35)" }}>
+                                    {modalMode === "add" ? "Guardar Docente" : "Actualizar Docente"}
+                                </button>
+                            )}
+                        </div>
                     </div>
-                       <div className="bg-white p-6 rounded-xl shadow"> 
-                        <h3 className="bg-white p-6 rounded-xl shadow">Marcos Riviera</h3> 
-                        <p className="text-slate-500 text-sm">Fe y Mundo</p>
-                        <p className="mt-2 text-slate-600">Activo</p>
-                    </div>                    
-                </div>          
+                </div>
+            )}
         </div>
-    )
+    );
 }
-
-export default Teachers;
\ No newline at end of file

From f5c6446fcd68fa00d0df06129f5f10f3089da1cd Mon Sep 17 00:00:00 2001
From: emilio <ramirezmoralesemilio@gmail.com>
Date: Thu, 26 Feb 2026 18:48:16 -0500
Subject: [PATCH 09/46] Modificacion Dashboard

---
 src/pages/Dashboard.jsx | 732 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 711 insertions(+), 21 deletions(-)

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index a2476e4..b33af0d 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,31 +1,721 @@
-function  Dashboard() {
-    return (
-        <div>
-           <h1 className="text-2xl font-bold mb-4">Panel de Control</h1> 
-           {/* Cards */}
-              <div className="grid grid-cols-4 gap-6">
-                <div className="bg-white p-6 rounded-xl shadow">
-                    <p className="text-slate-500 text-sm">Maestros Activos</p>
-                    <p className="text-3xl font-bold mt-2">60</p>
+import { useState, useEffect } from "react";
+
+// ── Paleta oficial ──────────────────────────────────────────────
+const C = {
+  blue:       "#1a3a8f",
+  blueMid:    "#2252c8",
+  blueLight:  "#dde9ff",
+  yellow:     "#f5c400",
+  yellowSoft: "#fff8d6",
+  white:      "#ffffff",
+  bg:         "#f0f4ff",
+  text:       "#0d1f4e",
+  muted:      "#64748b",
+};
+
+// ── Mock data ───────────────────────────────────────────────────
+const dailyData = [
+  { hora: "7am",  asistencias: 4  },
+  { hora: "8am",  asistencias: 12 },
+  { hora: "9am",  asistencias: 18 },
+  { hora: "10am", asistencias: 10 },
+  { hora: "11am", asistencias: 7  },
+  { hora: "12pm", asistencias: 5  },
+  { hora: "1pm",  asistencias: 3  },
+];
+
+const monthlyData = [
+  { mes: "Ene", asistencias: 92, faltas: 8  },
+  { mes: "Feb", asistencias: 88, faltas: 12 },
+  { mes: "Mar", asistencias: 95, faltas: 5  },
+  { mes: "Abr", asistencias: 90, faltas: 10 },
+  { mes: "May", asistencias: 85, faltas: 15 },
+  { mes: "Jun", asistencias: 78, faltas: 22 },
+];
+
+const recentActivity = [
+  { nombre: "Leydi Xequeb",   materia: "Matemáticas", hora: "08:02 AM", estado: "Entrada", tipo: "entrada" },
+  { nombre: "Irvin Chan",     materia: "Programación", hora: "08:15 AM", estado: "Entrada", tipo: "entrada" },
+  { nombre: "Marcos Riviera", materia: "Fe y Mundo",   hora: "09:05 AM", estado: "Retardo", tipo: "retardo" },
+  { nombre: "Ana Pérez",      materia: "Inglés",       hora: "09:30 AM", estado: "Entrada", tipo: "entrada" },
+  { nombre: "Luis Méndez",    materia: "Historia",     hora: "10:00 AM", estado: "Falta",   tipo: "falta"   },
+];
+
+const teachers = [
+  { nombre: "Ana Pérez",      materia: "Inglés",       asistencia: 99, avatar: "AP" },
+  { nombre: "Leydi Xequeb",   materia: "Matemáticas",  asistencia: 97, avatar: "LX" },
+  { nombre: "Irvin Chan",     materia: "Programación", asistencia: 94, avatar: "IC" },
+  { nombre: "Marcos Riviera", materia: "Fe y Mundo",   asistencia: 88, avatar: "MR" },
+];
+
+// ── Contador animado ────────────────────────────────────────────
+function Counter({ target }) {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    let v = 0;
+    const step = target / 40;
+    const t = setInterval(() => {
+      v += step;
+      if (v >= target) { setCount(target); clearInterval(t); }
+      else setCount(Math.floor(v));
+    }, 28);
+    return () => clearInterval(t);
+  }, [target]);
+  return <>{count}</>;
+}
+
+// ── Reloj digital ───────────────────────────────────────────────
+function Clock() {
+  const [time, setTime] = useState(new Date());
+  useEffect(() => {
+    const interval = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(interval);
+  }, []);
+  
+  const hours = String(time.getHours()).padStart(2, '0');
+  const minutes = String(time.getMinutes()).padStart(2, '0');
+  const seconds = String(time.getSeconds()).padStart(2, '0');
+  
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className="flex items-center justify-center px-4 py-2 rounded-xl font-mono text-xl font-bold"
+        style={{
+          background: `linear-gradient(135deg, ${C.blue} 0%, ${C.blueMid} 100%)`,
+          color: C.yellow,
+          boxShadow: `0 4px 15px ${C.blue}40, inset 0 0 20px ${C.yellow}15`,
+        }}
+      >
+        <span className="animate-pulse">{hours}</span>
+        <span className="mx-1 animate-pulse">:</span>
+        <span>{minutes}</span>
+        <span className="mx-1 animate-pulse">:</span>
+        <span className="text-sm">{seconds}</span>
+      </div>
+    </div>
+  );
+}
+
+// ── Line chart SVG ──────────────────────────────────────────────
+function LineChart({ data, valueKey, labelKey, height = 130 }) {
+  const [hovered, setHovered] = useState(null);
+  const W = 560, H = height - 24;
+  const pad = { t: 16, r: 16, b: 8, l: 28 };
+  const innerW = W - pad.l - pad.r;
+  const innerH = H - pad.t - pad.b;
+  const max = Math.max(...data.map((d) => d[valueKey]));
+  const min = 0;
+
+  const pts = data.map((d, i) => ({
+    x: pad.l + (i / (data.length - 1)) * innerW,
+    y: pad.t + (1 - (d[valueKey] - min) / (max - min)) * innerH,
+    val: d[valueKey],
+    label: d[labelKey],
+  }));
+
+  // Smooth polyline path
+  const linePath = pts
+    .map((p, i) => (i === 0 ? `M ${p.x},${p.y}` : `L ${p.x},${p.y}`))
+    .join(" ");
+
+  // Area fill path
+  const areaPath =
+    linePath +
+    ` L ${pts[pts.length - 1].x},${pad.t + innerH} L ${pts[0].x},${pad.t + innerH} Z`;
+
+  // Unique gradient id
+  const gradId = "lineGrad";
+  const areaId = "areaGrad";
+
+  return (
+    <div className="relative" style={{ height }}>
+      <svg
+        width="100%"
+        height={H}
+        viewBox={`0 0 ${W} ${H}`}
+        preserveAspectRatio="none"
+        style={{ overflow: "visible" }}
+      >
+        <defs>
+          <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%"   stopColor={C.blueMid} />
+            <stop offset="100%" stopColor={C.yellow}  />
+          </linearGradient>
+          <linearGradient id={areaId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%"   stopColor={C.blueMid} stopOpacity="0.18" />
+            <stop offset="100%" stopColor={C.blueMid} stopOpacity="0"    />
+          </linearGradient>
+        </defs>
+
+        {/* Grid lines */}
+        {[0, 0.25, 0.5, 0.75, 1].map((r, i) => {
+          const y = pad.t + r * innerH;
+          return (
+            <line
+              key={i}
+              x1={pad.l} y1={y}
+              x2={pad.l + innerW} y2={y}
+              stroke={C.blueLight}
+              strokeWidth="1"
+            />
+          );
+        })}
+
+        {/* Area fill */}
+        <path d={areaPath} fill={`url(#${areaId})`} />
+
+        {/* Line */}
+        <path
+          d={linePath}
+          fill="none"
+          stroke={`url(#${gradId})`}
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {/* Points + hover */}
+        {pts.map((p, i) => (
+          <g key={i}>
+            {/* Invisible hit area */}
+            <rect
+              x={p.x - 20} y={pad.t}
+              width={40} height={innerH}
+              fill="transparent"
+              style={{ cursor: "crosshair" }}
+              onMouseEnter={() => setHovered(i)}
+              onMouseLeave={() => setHovered(null)}
+            />
+
+            {/* Dot */}
+            <circle
+              cx={p.x} cy={p.y} r={hovered === i ? 7 : 4}
+              fill={hovered === i ? C.yellow : C.white}
+              stroke={hovered === i ? C.yellow : C.blueMid}
+              strokeWidth={hovered === i ? 3 : 2}
+              style={{ transition: "all 0.15s ease", filter: hovered === i ? `drop-shadow(0 0 6px ${C.yellow})` : "none" }}
+            />
+
+            {/* Tooltip */}
+            {hovered === i && (
+              <g>
+                <rect
+                  x={p.x - 18} y={p.y - 34}
+                  width={36} height={22}
+                  rx="6"
+                  fill={C.yellow}
+                />
+                <text
+                  x={p.x} y={p.y - 19}
+                  textAnchor="middle"
+                  fontSize="11"
+                  fontWeight="800"
+                  fill={C.blue}
+                >
+                  {p.val}
+                </text>
+                {/* Vertical dashed line */}
+                <line
+                  x1={p.x} y1={p.y + 7}
+                  x2={p.x} y2={pad.t + innerH}
+                  stroke={C.yellow}
+                  strokeWidth="1.5"
+                  strokeDasharray="4 3"
+                  opacity="0.6"
+                />
+              </g>
+            )}
+
+            {/* X label */}
+            <text
+              x={p.x} y={H - 2}
+              textAnchor="middle"
+              fontSize="10"
+              fill={C.muted}
+            >
+              {p.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}
+
+// ── Donut chart ─────────────────────────────────────────────────
+function DonutChart({ percent, color, size = 72 }) {
+  const r = 28;
+  const circ = 2 * Math.PI * r;
+  const dash = (percent / 100) * circ;
+  return (
+    <svg width={size} height={size} viewBox="0 0 70 70">
+      <circle cx="35" cy="35" r={r} fill="none" stroke={C.blueLight} strokeWidth="8" />
+      <circle
+        cx="35" cy="35" r={r}
+        fill="none" stroke={color} strokeWidth="8"
+        strokeDasharray={`${dash} ${circ}`}
+        strokeLinecap="round"
+        transform="rotate(-90 35 35)"
+        style={{ transition: "stroke-dasharray 1.2s ease" }}
+      />
+      <text x="35" y="39" textAnchor="middle" fontSize="12" fontWeight="800" fill={C.text}>
+        {percent}%
+      </text>
+    </svg>
+  );
+}
+
+// ── KPI Card con hover ──────────────────────────────────────────
+function KpiCard({ label, value, icon, sub, accent }) {
+  const [hover, setHover] = useState(false);
+  return (
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      className="rounded-2xl p-5 relative overflow-hidden cursor-default"
+      style={{
+        background: hover
+          ? `linear-gradient(135deg, ${C.blue} 0%, ${C.blueMid} 100%)`
+          : C.white,
+        border: `2px solid ${hover ? C.yellow : C.blueLight}`,
+        boxShadow: hover
+          ? `0 8px 32px ${C.blue}40`
+          : "0 2px 8px rgba(0,0,0,0.06)",
+        transition: "all 0.25s ease",
+      }}
+    >
+      <div
+        className="absolute -top-5 -right-5 w-24 h-24 rounded-full"
+        style={{
+          background: hover ? `${C.yellow}20` : C.blueLight,
+          transition: "all 0.25s",
+        }}
+      />
+      <div className="relative">
+        <div className="flex items-start justify-between mb-3">
+          <p className="text-base font-semibold" style={{ color: hover ? C.yellow : C.muted }}>
+            {label}
+          </p>
+          <span
+            className="text-4xl p-1.5 rounded-xl"
+            style={{
+              background: hover ? `${C.yellow}25` : C.blueLight,
+              transition: "all 0.25s",
+            }}
+          >
+            {icon}
+          </span>
+        </div>
+        <p className="text-5xl font-black mb-1" style={{ color: hover ? C.yellow : C.blue }}>
+          <Counter target={value} />
+        </p>
+        <p className="text-sm font-semibold" style={{ color: hover ? `${C.yellow}cc` : accent }}>
+          {sub}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ── DASHBOARD ───────────────────────────────────────────────────
+function Dashboard() {
+  const [activeTab, setActiveTab] = useState("diario");
+
+  const now = new Date();
+  const dateStr = now.toLocaleDateString("es-MX", {
+    weekday: "long", year: "numeric", month: "long", day: "numeric",
+  });
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{ background: C.bg, fontFamily: "'Segoe UI', system-ui, sans-serif" }}
+    >
+      <style>{`
+        @keyframes fadeInScale {
+          from {
+            opacity: 0;
+            transform: scale(0.92) translateY(12px);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes staggerFade {
+          from {
+            opacity: 0;
+            transform: translateX(-12px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes slideInLeft {
+          from {
+            opacity: 0;
+            transform: translateX(-30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes flipIn {
+          from {
+            opacity: 0;
+            transform: rotateY(90deg) scale(0.8);
+          }
+          to {
+            opacity: 1;
+            transform: rotateY(0deg) scale(1);
+          }
+        }
+        @keyframes shimmer {
+          0%, 100% {
+            background-position: -1000px 0;
+          }
+          50% {
+            background-position: 1000px 0;
+          }
+        }
+        @keyframes pulseGlow {
+          0%, 100% {
+            box-shadow: 0 0 15px rgba(245, 196, 0, 0.4), 0 0 30px rgba(34, 82, 200, 0.1);
+          }
+          50% {
+            box-shadow: 0 0 25px rgba(245, 196, 0, 0.8), 0 0 45px rgba(34, 82, 200, 0.2);
+          }
+        }
+        @keyframes bounceScale {
+          0%, 100% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.12);
+          }
+        }
+        @keyframes gradient {
+          0%, 100% {
+            background-position: 0% 50%;
+          }
+          50% {
+            background-position: 100% 50%;
+          }
+        }
+        .animate-fade-in-scale {
+          animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        .animate-fade-in-up {
+          animation: fadeInUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        .animate-stagger-fade {
+          animation: staggerFade 0.5s ease-out forwards;
+          opacity: 0;
+        }
+        .animate-slide-in-left {
+          animation: slideInLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        .animate-flip-in {
+          animation: flipIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+        .animate-shimmer {
+          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+          background-size: 200% 100%;
+          animation: shimmer 2s infinite;
+        }
+        .animate-pulse-glow {
+          animation: pulseGlow 2s ease-in-out infinite;
+        }
+        .animate-bounce-scale {
+          animation: bounceScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+        .animate-gradient {
+          background-size: 200% 200%;
+          animation: gradient 6s ease infinite;
+        }
+      `}</style>
+      {/* ── MAIN ── */}
+      <main className="p-6 overflow-auto min-h-screen">
+
+        {/* Header */}
+        <div className="flex items-center justify-between mb-7">
+          <div>
+            <h1 className="text-4xl font-black" style={{ color: C.text }}>
+              Panel de Control
+            </h1>
+            <p className="text-base capitalize mt-0.5" style={{ color: C.muted }}>{dateStr}</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <div
+              className="flex items-center gap-2 px-4 py-2 rounded-full text-base font-semibold animate-pulse-glow"
+              style={{ background: C.yellowSoft, color: "#007c04" }}
+            >
+              <span
+                className="w-2 h-2 rounded-full inline-block animate-pulse"
+                style={{ background: C.yellow }}
+              />
+              Sistema Activo
+            </div>
+            <div
+              className="px-4 py-2 rounded-full text-base font-bold"
+              style={{ background: C.blue, color: C.white }}
+            >
+              UNID Playa del Carmen
+            </div>
+          </div>
+        </div>
+
+        {/* KPI CARDS */}
+        <div className="grid grid-cols-4 gap-5 mb-6">
+          <KpiCard label="Docentes Activos" value={60} icon="👨‍🏫" sub="+2 este mes"       accent={C.blueMid} />
+          <KpiCard label="Asistencias Hoy"  value={52} icon="✅"  sub="86.7% del total"   accent="#15803d"   />
+          <KpiCard label="Retardos"         value={5}  icon="⏰"  sub="3 menos que ayer"  accent="#b45309"   />
+          <KpiCard label="Faltas"           value={3}  icon="❌"  sub="5% del total"       accent="#dc2626"   />
+        </div>
+
+        {/* CHARTS */}
+        <div className="grid grid-cols-3 gap-5 mb-6">
+
+          {/* Bar chart */}
+          <div
+            className="col-span-2 rounded-2xl p-6"
+            style={{
+              background: C.white,
+              border: `1.5px solid ${C.blueLight}`,
+              boxShadow: "0 2px 12px rgba(26,58,143,0.07)",
+            }}
+          >
+            <div className="flex items-center justify-between mb-5">
+              <div>
+                <h2 className="text-xl font-bold" style={{ color: C.text }}>Registros del Día</h2>
+                <p className="text-sm mt-0.5" style={{ color: C.muted }}>Entradas por hora — hoy</p>
+              </div>
+              <div className="flex gap-1 p-1 rounded-xl" style={{ background: C.blueLight }}>
+                {["diario", "mensual"].map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    className="px-3 py-1.5 rounded-lg text-sm font-bold capitalize"
+                    style={
+                      activeTab === tab
+                        ? { background: C.yellow, color: C.blue }
+                        : { background: "transparent", color: C.muted }
+                    }
+                  >
+                    {tab}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {activeTab === "diario" ? (
+              <LineChart data={dailyData} valueKey="asistencias" labelKey="hora" height={130} />
+            ) : (
+              <LineChart data={monthlyData} valueKey="asistencias" labelKey="mes" height={130} />
+            )}
+
+            <div className="flex gap-4 mt-4">
+              <div className="flex items-center gap-1.5">
+                <div className="w-3 h-3 rounded-sm" style={{ background: C.blueMid }} />
+                <span className="text-sm" style={{ color: C.muted }}>Asistencias</span>
+              </div>
+              {activeTab === "mensual" && (
+                <div className="flex items-center gap-1.5">
+                  <div className="w-3 h-3 rounded-sm" style={{ background: "#f97316", opacity: 0.7 }} />
+                  <span className="text-sm" style={{ color: C.muted }}>Faltas</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Donuts */}
+          <div
+            className="rounded-2xl p-6 flex flex-col"
+            style={{ background: C.white, border: `1.5px solid ${C.blueLight}`, boxShadow: "0 2px 12px rgba(26,58,143,0.07)" }}
+          >
+            <h2 className="text-xl font-bold mb-1" style={{ color: C.text }}>Indicadores Clave</h2>
+            <p className="text-sm mb-5" style={{ color: C.muted }}>Porcentaje del periodo actual</p>
+            <div className="flex flex-col gap-5 flex-1 justify-center">
+              {[
+                { label: "Tasa de Asistencia", percent: 87,  color: C.blueMid  },
+                { label: "Puntualidad",         percent: 94,  color: C.yellow   },
+                { label: "Cobertura Docente",   percent: 100, color: "#16a34a"  },
+              ].map((item, i) => (
+                <div key={i} className="flex items-center gap-4">
+                  <DonutChart percent={item.percent} color={item.color} size={68} />
+                  <div>
+                    <p className="text-base font-bold" style={{ color: C.text }}>{item.label}</p>
+                    <p className="text-sm mt-0.5" style={{ color: C.muted }}>Ene — Jun 2025</p>
+                  </div>
                 </div>
+              ))}
+            </div>
+          </div>
+        </div>
 
-                <div className="bg-white p-6 rounded-xl shadow">
-                    <p className="text-slate-500 text-sm">Asistencias</p>
-                    <p className="text-3xl font-bold mt-2">40</p>
+        {/* BOTTOM ROW */}
+        <div className="grid grid-cols-6 gap-5">
+          {/* Reloj */}
+          <div
+            className="rounded-2xl p-6 flex flex-col items-center justify-center"
+            style={{ background: C.white, border: `1.5px solid ${C.blueLight}`, boxShadow: "0 2px 12px rgba(26,58,143,0.07)", animation: "fadeInUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both" }}
+          >
+            <p className="text-sm font-bold mb-4" style={{ color: C.muted }}>Hora Actual</p>
+            <Clock />
+            <p className="text-xs mt-4" style={{ color: C.muted }}>Tiempo real del sistema</p>
+          </div>
+
+          {/* Actividad reciente */}
+          <div
+            className="col-span-3 rounded-2xl p-6"
+            style={{ background: C.white, border: `1.5px solid ${C.blueLight}`, boxShadow: "0 2px 12px rgba(26,58,143,0.07)" }}
+          >
+            <div className="flex items-center justify-between mb-5">
+              <div>
+                <h2 className="text-xl font-bold" style={{ color: C.text }}>Actividad Reciente</h2>
+                <p className="text-sm mt-0.5" style={{ color: C.muted }}>Últimos registros de asistencia</p>
+              </div>
+              <button
+                className="text-sm font-bold px-3 py-1.5 rounded-lg"
+                style={{ background: C.yellowSoft, color: C.blue }}
+              >
+                Ver todo →
+              </button>
+            </div>
+            <div className="flex flex-col gap-2.5">
+              {recentActivity.map((item, i) => (
+                <div
+                  key={i}
+                  className="flex items-center gap-4 p-3 rounded-xl"
+                  style={{
+                    background: C.blueLight,
+                    borderLeft: `3px solid ${
+                      item.tipo === "entrada" ? "#16a34a"
+                        : item.tipo === "retardo" ? C.yellow
+                        : "#dc2626"
+                    }`,
+                  }}
+                >
+                  <div
+                    className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-black flex-shrink-0"
+                    style={{ background: C.blue, color: C.yellow }}
+                  >
+                    {item.nombre.split(" ").map((n) => n[0]).join("").slice(0, 2)}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-base font-semibold truncate" style={{ color: C.text }}>{item.nombre}</p>
+                    <p className="text-sm" style={{ color: C.muted }}>{item.materia}</p>
+                  </div>
+                  <div className="text-right flex-shrink-0">
+                    <p className="text-sm mb-1" style={{ color: C.muted }}>{item.hora}</p>
+                    <span
+                      className="px-2.5 py-0.5 rounded-full text-sm font-bold"
+                      style={
+                        item.tipo === "entrada"
+                          ? { background: "#dcfce7", color: "#15803d" }
+                          : item.tipo === "retardo"
+                          ? { background: C.yellowSoft, color: "#7c5c00" }
+                          : { background: "#fee2e2", color: "#b91c1c" }
+                      }
+                    >
+                      {item.estado}
+                    </span>
+                  </div>
                 </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Ranking */}
+          <div
+            className="col-span-2 rounded-2xl p-6 flex flex-col"
+            style={{ background: C.white, border: `1.5px solid ${C.blueLight}`, boxShadow: "0 2px 12px rgba(26,58,143,0.07)" }}
+          >
+            <h2 className="text-xl font-bold mb-1" style={{ color: C.text }}>Ranking Docentes</h2>
+            <p className="text-sm mb-5" style={{ color: C.muted }}>Por tasa de asistencia</p>
 
-                <div className="bg-white p-6 rounded-xl shadow">
-                    <p className="text-slate-500 text-sm">Retardos</p>
-                    <p className="text-3xl font-bold mt-2">3</p>
+            <div className="flex flex-col gap-4 flex-1">
+              {teachers.map((t, i) => (
+                <div key={i} className="flex items-center gap-3">
+                  <span className="text-sm font-black w-5 text-center" style={{ color: i === 0 ? C.yellow : C.muted }}>
+                    #{i + 1}
+                  </span>
+                  <div
+                    className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-black flex-shrink-0"
+                    style={{
+                      background: i === 0
+                        ? `linear-gradient(135deg, ${C.yellow}, #ca8a04)`
+                        : `linear-gradient(135deg, ${C.blue}, ${C.blueMid})`,
+                      color: i === 0 ? C.blue : C.white,
+                    }}
+                  >
+                    {t.avatar}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between mb-1">
+                      <p className="text-sm font-semibold truncate" style={{ color: C.text }}>{t.nombre}</p>
+                      <p className="text-sm font-black ml-2" style={{ color: C.blue }}>{t.asistencia}%</p>
+                    </div>
+                    <div className="w-full rounded-full h-1.5" style={{ background: C.blueLight }}>
+                      <div
+                        className="h-1.5 rounded-full"
+                        style={{
+                          width: `${t.asistencia}%`,
+                          background: i === 0
+                            ? `linear-gradient(90deg, ${C.yellow}, #ca8a04)`
+                            : `linear-gradient(90deg, ${C.blueMid}, ${C.blue})`,
+                          transition: "width 1.2s ease",
+                        }}
+                      />
+                    </div>
+                  </div>
                 </div>
+              ))}
+            </div>
 
-                <div className="bg-white p-6 rounded-xl shadow">
-                    <p className="text-slate-500 text-sm">Faltas</p>
-                    <p className="text-3xl font-bold mt-2">1</p>
+            {/* Resumen cuatrimestral */}
+            <div
+              className="mt-5 rounded-xl p-4"
+              style={{ background: `linear-gradient(135deg, ${C.blue} 0%, ${C.blueMid} 100%)` }}
+            >
+              <div className="flex items-center gap-2 mb-1">
+                <div className="w-2 h-2 rounded-full" style={{ background: C.yellow }} />
+                <p className="text-sm font-bold" style={{ color: C.yellow }}>Resumen Cuatrimestral</p>
+              </div>
+              <p className="text-sm mb-3" style={{ color: `${C.white}70` }}>Enero — Abril 2025</p>
+              <div className="flex justify-between">
+                <div className="text-center">
+                  <p className="text-2xl font-black" style={{ color: C.white }}>91%</p>
+                  <p className="text-sm" style={{ color: `${C.white}70` }}>Asistencia</p>
+                </div>
+                <div className="text-center">
+                  <p className="text-2xl font-black" style={{ color: C.yellow }}>4.2</p>
+                  <p className="text-sm" style={{ color: `${C.white}70` }}>Promedio</p>
                 </div>
-              </div>           
-        </div>  
-    )
+                <div className="text-center">
+                  <p className="text-2xl font-black" style={{ color: C.white }}>6</p>
+                  <p className="text-sm" style={{ color: `${C.white}70` }}>Meses</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </main>
+    </div>
+  );
 }
 
 export default Dashboard;
\ No newline at end of file

From 5072a77c7d75d20f4bf406ed89453c74619e52e6 Mon Sep 17 00:00:00 2001
From: Nestor Alejandro <00856217@red.unid.mx>
Date: Thu, 26 Feb 2026 19:11:42 -0500
Subject: [PATCH 10/46] Cambios en sidebar y app

---
 src/App.jsx                |   2 +
 src/components/Sidebar.jsx | 231 +++++++++++++++++++++----------------
 2 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 78f28a5..9a2c233 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ import Dashboard from "./pages/Dashboard"
 import Teachers from "./pages/Teachers"
 import Clock from "./pages/Clock"
 import Reports from "./pages/Reports"
+import SystemConfig from "./pages/sistemaconfig"
 
 
 function App() {
@@ -26,6 +27,7 @@ function App() {
             <Route path="/teachers" element={<Teachers />} />
             <Route path="/clock" element={<Clock />} />
             <Route path="/reports" element={<Reports />} />
+            <Route path="/sistemaconfig" element={<SystemConfig />} />
           </Routes>
         </main>
       </div>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index f8f66d7..794df86 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,126 +1,153 @@
+/**
+ * INSTRUCCIONES DE INSTALACIÓN:
+ * 1. Instalar Heroicons: npm install @heroicons/react
+ * 2. Instalar React Router: npm install react-router-dom
+ * 3. Tener configurado Tailwind CSS en el proyecto.
+ * * EXTENSIONES RECOMENDADAS EN VS CODE:
+ * - Tailwind CSS IntelliSense (para autocompletado de clases)
+ * - ES7+ React/Redux/React-Native snippets
+ */
+
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { 
-    // Importamos los iconos de Heroicons
-// IMPORTANTE: Este módulo usa Heroicons. 
-// Si ves un error de "module not found", ejecuta en la terminal:
-// npm install @heroicons/react
-    HomeIcon, InformationCircleIcon, PhoneIcon, 
-    Squares2X2Icon, UserGroupIcon, ClockIcon, 
-    DocumentChartBarIcon, Bars3Icon, MagnifyingGlassIcon, 
-    ArrowLeftOnRectangleIcon, UserCircleIcon 
+    HomeIcon, 
+    InformationCircleIcon, 
+    PhoneIcon, 
+    Squares2X2Icon, 
+    UserGroupIcon, 
+    ClockIcon, 
+    DocumentChartBarIcon, 
+    Bars3Icon, 
+    MagnifyingGlassIcon, 
+    ArrowLeftOnRectangleIcon, 
+    UserCircleIcon,
+    Cog6ToothIcon // Icono de engranaje para Configuración
 } from '@heroicons/react/24/outline';
 
-// Sidebar con secciones públicas y administrativas, colapsable, con perfil de usuario, buscador y botón de cerrar sesión
 function Sidebar() {
+    // Estado para colapsar/expandir el sidebar
     const [isCollapsed, setIsCollapsed] = useState(false);
+    const iconSize = 'h-5 w-5';
 
-    // Corregido: Ahora sí crecen al colapsar (h-8) y son normales al expandir (h-5)
-    const iconSize = isCollapsed ? 'h-8 w-8' : 'h-5 w-5';
-
-
-    // El sidebar se colapsa a 96px (w-24) y se expande a 256px (w-64).
     return (
-        <aside className={`${isCollapsed ? 'w-24' : 'w-64'} bg-slate-900 text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-slate-800`}>
+        /* CONTENEDOR PRINCIPAL 
+           - bg-[#1a1a32]: Azul Marino Institucional
+           - border-white/10: Borde sutil para separar del contenido
+        */
+        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
             
-            {/* Cabecera y Hamburguesa */}
-            <div className='flex items-center justify-between mb-8'>
-                {!isCollapsed && <h2 className='text-xl font-bold truncate'>Reloj Checador</h2>}
+            {/* 1. CABECERA (Logo y botón de colapsar) */}
+            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
+                {!isCollapsed && (
+                    <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
+                        Reloj Checador
+                    </h2>
+                )}
                 <button 
                     onClick={() => setIsCollapsed(!isCollapsed)}
-                    className="p-1 hover:bg-slate-800 rounded text-slate-400 mx-auto transition-colors"
+                    className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
+                    title={isCollapsed ? "Expandir" : "Colapsar"}
                 >
                     <Bars3Icon className="h-8 w-8" />
                 </button>
             </div>
 
-            {/* Perfil de Usuario */}
-            <div className={`flex items-center gap-3 mb-6 p-2 rounded-lg bg-slate-800/50 ${isCollapsed ? 'justify-center' : ''}`}>
-                <UserCircleIcon className={`${isCollapsed ? 'h-10 w-10' : 'h-8 w-8'} text-sky-400 shrink-0`} />
-                {!isCollapsed && <p className="text-xs font-bold truncate">Admin UNID</p>}
-            </div>
-
-            {/* Buscador */}
             {!isCollapsed && (
-                <div className='relative mb-8 px-1'>
-                    <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
-                    <input 
-                        type="text" 
-                        placeholder="Buscar..." 
-                        className="w-full bg-slate-800 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-slate-700"
-                    />
-                </div>
-            )}
-           
-            {/* SECCIÓN PÚBLICA */}
-            <div className='mb-6'>   
-                <p className={`text-slate-400 text-sm mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
-                    {isCollapsed ? '•' : 'Sitio'}
-                </p>
-                <nav className='flex flex-col gap-5'>
-                    <Link to="/" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
-                        <HomeIcon className={`${iconSize} shrink-0`} />
-                        {!isCollapsed && <span>Inicio</span>}
-                    </Link>
-                    <Link to="/about" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
-                        <InformationCircleIcon className={`${iconSize} shrink-0`} />
-                        {!isCollapsed && <span>Acerca de</span>}
-                    </Link>
-                    <Link to="/contact" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
-                        <PhoneIcon className={`${iconSize} shrink-0`} />
-                        {!isCollapsed && <span>Contacto</span>}
-                    </Link>
-                </nav>
-            </div>
-           
-            {/* SECCIÓN ADMINISTRATIVA */}
-            <div className='mt-4'>
-                <p className={`text-slate-400 text-sm mb-4 uppercase tracking-wide font-bold ${isCollapsed ? 'text-center' : ''}`}>
-                    {isCollapsed ? '•' : 'Administracion'}
-                </p>
-                <nav className='flex flex-col gap-5'>
-                    <Link to="/admin" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
-                        <Squares2X2Icon className={`${iconSize} shrink-0`} />
-                        {!isCollapsed && <span>Dashboard</span>}
-                    </Link>
-                    <Link to="/teachers" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
-                        <UserGroupIcon className={`${iconSize} shrink-0`} />
-                        {!isCollapsed && <span>Maestros</span>}
-                    </Link>
-                    <Link to="/clock" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
-                        <ClockIcon className={`${iconSize} shrink-0`} />
-                        {!isCollapsed && <span>Reloj</span>}
-                    </Link>
-                    <Link to="/reports" className={`flex items-center gap-4 hover:text-sky-400 transition-all ${isCollapsed ? 'justify-center' : ''}`}>
-                        <DocumentChartBarIcon className={`${iconSize} shrink-0`} />
-                        {!isCollapsed && <span>Reportes</span>}
-                    </Link>
-                </nav>
-            </div>
-            
-            <div className='flex-1'/>
+                <>
+                    {/* 2. PERFIL DE USUARIO Y BUSCADOR */}
+                    <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
+                        <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
+                        <div>
+                            <p className="text-xs font-bold truncate">Admin UNID</p>
+                            <p className="text-[10px] text-slate-400">En línea</p>
+                        </div>
+                    </div>
 
-            {/* Footer y Botón Cerrar Sesión CORREGIDO */}
-            <div className='mt-auto pt-6 border-t border-slate-800'>
-                <button 
-                    className={`flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group
-                    ${isCollapsed ? 'justify-center' : 'hover:bg-red-500/10'}`}
-                >
-                    <ArrowLeftOnRectangleIcon 
-                        className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} 
-                    />
-                    {!isCollapsed && (
-                        <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
-                            Cerrar Sesión
-                        </span>
-                    )}
-                </button>
+                    <div className='relative mb-8 px-1'>
+                        <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
+                        <input 
+                            type="text" 
+                            placeholder="Buscar..." 
+                            className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
+                        />
+                    </div>
 
-                {!isCollapsed && (
-                    <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
-                         Universidad UNID <br />
-                         Playa del Carmen * Admin
+                    {/* 3. SECCIÓN SITIO (Navegación Pública) */}
+                    <div className='mb-6'>   
+                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Sitio</p>
+                        <nav className='flex flex-col gap-5'>
+                            <Link to="/" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <HomeIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Inicio</span>
+                            </Link>
+                            <Link to="/about" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Acerca de</span>
+                            </Link>
+                            <Link to="/contact" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <PhoneIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Contacto</span>
+                            </Link>
+                        </nav>
                     </div>
+
+                    {/* ESPACIADOR FLEXIBLE */}
+                    <div className='flex-1' />
+                    
+                    {/* 4. SECCIÓN ADMINISTRATIVA (Gestión y Configuración) */}
+                    <div className='mt-4 mb-8'>
+                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Administración</p>
+                        <nav className='flex flex-col gap-5'>
+                            <Link to="/admin" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Dashboard</span>
+                            </Link>
+                            <Link to="/teachers" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <UserGroupIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Maestros</span>
+                            </Link>
+                            <Link to="/clock" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <ClockIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Reloj</span>
+                            </Link>
+                            <Link to="/reports" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Reportes</span>
+                            </Link>
+                            {/* NUEVO: Enlace a la página de Configuración */}
+                            <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Configuración</span>
+                            </Link>
+                        </nav>
+                    </div>
+                </>
+            )}
+            
+            {/* Si está colapsado, empuja el botón de salida al final */}
+            {isCollapsed && <div className='flex-1' />}
+
+            {/* 5. FOOTER (Cerrar Sesión e Info Institucional) */}
+            <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
+                {!isCollapsed ? (
+                    <>
+                        <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
+                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} />
+                            <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
+                                Cerrar Sesión
+                            </span>
+                        </button>
+                        <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
+                             Universidad UNID <br />
+                             Playa del Carmen • Admin
+                        </div>
+                    </>
+                ) : (
+                    /* Icono de salida simplificado cuando está colapsado */
+                    <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
+                        <ArrowLeftOnRectangleIcon className={iconSize} />
+                    </button>
                 )}
             </div>            
         </aside>

From e5cfb317aa2682f5e02cdaf3cc7a5e3f172fc06c Mon Sep 17 00:00:00 2001
From: JoseG <joseelopez832@gmail.com>
Date: Thu, 26 Feb 2026 13:17:09 -1100
Subject: [PATCH 11/46] jose reloj2

---
 src/pages/Clock.jsx | 735 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 685 insertions(+), 50 deletions(-)

diff --git a/src/pages/Clock.jsx b/src/pages/Clock.jsx
index fb6ae2a..ba67173 100644
--- a/src/pages/Clock.jsx
+++ b/src/pages/Clock.jsx
@@ -1,53 +1,688 @@
-function Clock() {
-        return (
-            <div className="flex items-center justify-center">
-                {/*contenedor principal*/}
-                <div className="bg-white rounded-2xl shadow-xl
-                  p-10 w-full max-w-lg text-center">
-                    <h1 className="text-3xl font-bold mb-8">
-                        Reloj Checador
-                    </h1>
-                    <p className="text-slate-500 mb-8">
-                        Sistema de Registro de Asistencia Docente
-                    </p>
-
-                    {/*Horario Actual*/}
-                    <div className="mb-8">
-                       <p className="text-5xl font-bold tracking-wider"> 
-                           08:45:23 AM
-                       </p> 
-                       <p className="text-slate-500 mt-2">
-                          Hora Actual
-                       </p>
-                    </div>
-
-                    {/*Estado*/}
-                    <div className="mb-8">
-                        <span className="inline-block px-4 py-2 rounded-full
-                        bg-green-100 text-green-700 text-sm font-medium">
-                            Sistema Activo
-                        </span>
-                    </div>
-
-                    {/*Acciones*/}
-                    <div className="flex justify-center gap-6"> 
-                        <button className="flex-1 bg-sky-600 text-white py-4 
-                        rounded-xl text-lg font-semibold hover:bg-sky-700 transition">
-                            Registrar Entrada
-                        </button>
-                        <button className="flex-1 bg-sky-700 text-white py-4 
-                        rounded-xl text-lg font-semibold hover:bg-sky-800 transition">
-                            Registrar Salida
-                        </button>
-                    </div>
-
-                    {/*Info adicional*/}
-                    <div className="text-slate-400 text-sm mt-8">
-                        Universidad UNID Playa del Carmen * Admin
-                    </div>
+import { useState, useEffect } from "react";
+
+const IMPORTANT_MESSAGES = [
+  "📢 Reunión de facultad: Lunes 10:00 AM — Sala de Juntas",
+  "⚠️ Mantenimiento del sistema: Viernes 11 PM - 1 AM",
+  "📅 Período de evaluaciones: 26 - 30 de Mayo",
+  "🎓 Ceremonia de graduación: 15 de Junio, 11:00 AM",
+];
+
+export default function Clock() {
+  const [time, setTime] = useState(new Date());
+  const [lastAction, setLastAction] = useState(null);
+  const [actionMessage, setActionMessage] = useState("");
+  const [showMessage, setShowMessage] = useState(false);
+  const [msgIndex, setMsgIndex] = useState(0);
+  const [fade, setFade] = useState(true);
+  const [pulse, setPulse] = useState(false);
+  const [showAllMsgs, setShowAllMsgs] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    const rotateMsg = setInterval(() => {
+      setFade(false);
+      setTimeout(() => {
+        setMsgIndex((i) => (i + 1) % IMPORTANT_MESSAGES.length);
+        setFade(true);
+      }, 400);
+    }, 5000);
+    return () => clearInterval(rotateMsg);
+  }, []);
+
+  const formatTime = (date) => {
+    return date.toLocaleTimeString("es-MX", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: true,
+    });
+  };
+
+  const formatDate = (date) => {
+    return date.toLocaleDateString("es-MX", {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  const getHourDegrees = () => (time.getHours() % 12) * 30 + time.getMinutes() * 0.5;
+  const getMinuteDegrees = () => time.getMinutes() * 6 + time.getSeconds() * 0.1;
+  const getSecondDegrees = () => time.getSeconds() * 6;
+
+  const handleAction = (type) => {
+    const now = new Date();
+    const timeStr = now.toLocaleTimeString("es-MX", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true,
+    });
+    setLastAction(type);
+    setActionMessage(
+      type === "entrada"
+        ? `✅ Entrada registrada — ${timeStr}`
+        : `🔴 Salida aplicada — ${timeStr}`
+    );
+    setShowMessage(true);
+    setPulse(true);
+    setTimeout(() => setPulse(false), 600);
+    setTimeout(() => setShowMessage(false), 4000);
+  };
+
+  const dateStr = formatDate(time);
+  const capitalizedDate = dateStr.charAt(0).toUpperCase() + dateStr.slice(1);
+
+  return (
+    <div style={styles.root}>
+      {/* Background grid pattern */}
+      <div style={styles.gridPattern} />
+
+      {/* Top bar */}
+      <div style={styles.topBar}>
+        <div style={styles.logoArea}>
+          <div style={styles.logoIcon}>🎓</div>
+          <div>
+            <div style={styles.logoTitle}>Sistema de Control</div>
+            <div style={styles.logoSub}>Universidad — Asistencia Docente</div>
+          </div>
+        </div>
+
+        {/* Important messages box */}
+        <div style={{ ...styles.msgBox, cursor: "pointer" }} onClick={() => setShowAllMsgs(true)}>
+          <div style={styles.msgHeader}>
+            <span style={styles.msgDot} />
+            <span style={styles.msgLabel}>AVISOS IMPORTANTES</span>
+            <span style={styles.msgViewAll}>Ver todos →</span>
+          </div>
+          <div
+            style={{
+              ...styles.msgText,
+              opacity: fade ? 1 : 0,
+              transition: "opacity 0.4s ease",
+            }}
+          >
+            {IMPORTANT_MESSAGES[msgIndex]}
+          </div>
+          <div style={styles.msgDots}>
+            {IMPORTANT_MESSAGES.map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  ...styles.dotIndicator,
+                  background: i === msgIndex ? "#f0c02f" : "rgba(240,192,47,0.3)",
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Main clock area */}
+      <div style={styles.centerArea}>
+        {/* Analog clock */}
+        <div style={{ ...styles.clockRing, ...(pulse ? styles.clockRingPulse : {}) }}>
+          <div style={styles.clockFace}>
+            {/* Hour markers */}
+            {[...Array(12)].map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  ...styles.hourMarker,
+                  transform: `rotate(${i * 30}deg)`,
+                }}
+              >
+                <div
+                  style={{
+                    ...styles.markerTick,
+                    height: i % 3 === 0 ? "14px" : "7px",
+                    background: i % 3 === 0 ? "#f0c02f" : "rgba(240,192,47,0.4)",
+                  }}
+                />
+              </div>
+            ))}
+
+            {/* Hour numbers */}
+            {[12, 3, 6, 9].map((num, i) => {
+              const angle = i * 90 - 90;
+              const rad = (angle * Math.PI) / 180;
+              const r = 53;
+              const x = 50 + r * Math.cos(rad);
+              const y = 50 + r * Math.sin(rad);
+              return (
+                <div
+                  key={num}
+                  style={{
+                    ...styles.hourNum,
+                    left: `${x}%`,
+                    top: `${y}%`,
+                    transform: "translate(-50%, -50%)",
+                  }}
+                >
+                  {num}
+                </div>
+              );
+            })}
+
+            {/* Hour hand */}
+            <div
+              style={{
+                ...styles.hand,
+                ...styles.hourHand,
+                transform: `translateX(-50%) rotate(${getHourDegrees()}deg)`,
+              }}
+            />
+            {/* Minute hand */}
+            <div
+              style={{
+                ...styles.hand,
+                ...styles.minuteHand,
+                transform: `translateX(-50%) rotate(${getMinuteDegrees()}deg)`,
+              }}
+            />
+            {/* Second hand */}
+            <div
+              style={{
+                ...styles.hand,
+                ...styles.secondHand,
+                transform: `translateX(-50%) rotate(${getSecondDegrees()}deg)`,
+              }}
+            />
+            {/* Center dot */}
+            <div style={styles.centerDot} />
+          </div>
+        </div>
+
+        {/* Digital time */}
+        <div style={styles.digitalTime}>{formatTime(time)}</div>
+        <div style={styles.dateText}>{capitalizedDate}</div>
+
+        {/* Action feedback */}
+        <div
+          style={{
+            ...styles.feedbackBanner,
+            opacity: showMessage ? 1 : 0,
+            transform: showMessage ? "translateY(0) scale(1)" : "translateY(10px) scale(0.97)",
+            pointerEvents: showMessage ? "auto" : "none",
+          }}
+        >
+          <span style={{ fontSize: "1.1rem", fontWeight: 700, letterSpacing: "0.03em" }}>
+            {actionMessage}
+          </span>
+        </div>
+
+        {/* Buttons */}
+        <div style={styles.buttonRow}>
+          <button
+            style={styles.btnEntrada}
+            onClick={() => handleAction("entrada")}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = "translateY(-3px) scale(1.04)";
+              e.currentTarget.style.boxShadow = "0 12px 40px rgba(240,192,47,0.5)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = "translateY(0) scale(1)";
+              e.currentTarget.style.boxShadow = "0 4px 20px rgba(240,192,47,0.25)";
+            }}
+          >
+            <span style={styles.btnIcon}>▶</span>
+            ENTRADA
+          </button>
+
+          <button
+            style={styles.btnSalida}
+            onClick={() => handleAction("salida")}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = "translateY(-3px) scale(1.04)";
+              e.currentTarget.style.boxShadow = "0 12px 40px rgba(255,80,80,0.4)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = "translateY(0) scale(1)";
+              e.currentTarget.style.boxShadow = "0 4px 20px rgba(255,80,80,0.2)";
+            }}
+          >
+            <span style={styles.btnIcon}>■</span>
+            SALIDA
+          </button>
+        </div>
+
+        {lastAction && (
+          <div style={styles.lastActionInfo}>
+            Último registro:{" "}
+            <span style={{ color: "#f0c02f", fontWeight: 600 }}>
+              {lastAction === "entrada" ? "Entrada" : "Salida"}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div style={styles.footer}>
+        <span style={styles.footerText}>
+          © {time.getFullYear()} — Sistema de Asistencia Universitaria
+        </span>
+      </div>
+
+      {/* All messages modal */}
+      {showAllMsgs && (
+        <div style={styles.modalOverlay} onClick={() => setShowAllMsgs(false)}>
+          <div style={styles.modalBox} onClick={(e) => e.stopPropagation()}>
+            <div style={styles.modalHeader}>
+              <div style={styles.modalTitleRow}>
+                <span style={styles.msgDot} />
+                <span style={styles.modalTitle}>TABLERO DE AVISOS</span>
+              </div>
+              <button style={styles.modalClose} onClick={() => setShowAllMsgs(false)}>✕</button>
+            </div>
+            <div style={styles.modalList}>
+              {IMPORTANT_MESSAGES.map((msg, i) => (
+                <div key={i} style={styles.modalItem}>
+                  <div style={styles.modalItemNum}>{String(i + 1).padStart(2, "0")}</div>
+                  <div style={styles.modalItemText}>{msg}</div>
                 </div>
+              ))}
+            </div>
+            <div style={styles.modalFooter}>
+              {IMPORTANT_MESSAGES.length} avisos activos
             </div>
-        )
-    }
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
 
-export default Clock;
\ No newline at end of file
+const styles = {
+  root: {
+    minHeight: "100vh",
+    background: "#1a1a32",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    fontFamily: "'Segoe UI', 'Trebuchet MS', sans-serif",
+    position: "relative",
+    overflow: "hidden",
+    color: "#fff",
+  },
+  gridPattern: {
+    position: "absolute",
+    inset: 0,
+    backgroundImage: `
+      linear-gradient(rgba(240,192,47,0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(240,192,47,0.04) 1px, transparent 1px)
+    `,
+    backgroundSize: "40px 40px",
+    pointerEvents: "none",
+  },
+  topBar: {
+    width: "100%",
+    maxWidth: "1200px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    padding: "24px 32px 0",
+    boxSizing: "border-box",
+    zIndex: 1,
+  },
+  logoArea: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+  },
+  logoIcon: {
+    fontSize: "2rem",
+    lineHeight: 1,
+  },
+  logoTitle: {
+    fontSize: "1rem",
+    fontWeight: 700,
+    color: "#f0c02f",
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+  },
+  logoSub: {
+    fontSize: "0.72rem",
+    color: "rgba(255,255,255,0.45)",
+    letterSpacing: "0.05em",
+    marginTop: "2px",
+  },
+  msgBox: {
+    background: "rgba(255,255,255,0.04)",
+    border: "1px solid rgba(240,192,47,0.25)",
+    borderRadius: "12px",
+    padding: "14px 18px",
+    maxWidth: "360px",
+    minWidth: "280px",
+    backdropFilter: "blur(10px)",
+    boxShadow: "0 4px 24px rgba(0,0,0,0.3)",
+  },
+  msgHeader: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "8px",
+  },
+  msgDot: {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    background: "#f0c02f",
+    boxShadow: "0 0 8px #f0c02f",
+    animation: "none",
+    display: "inline-block",
+  },
+  msgLabel: {
+    fontSize: "0.65rem",
+    fontWeight: 700,
+    color: "#f0c02f",
+    letterSpacing: "0.12em",
+    textTransform: "uppercase",
+  },
+  msgText: {
+    fontSize: "0.82rem",
+    color: "rgba(255,255,255,0.85)",
+    lineHeight: 1.5,
+    minHeight: "38px",
+  },
+  msgDots: {
+    display: "flex",
+    gap: "5px",
+    marginTop: "10px",
+  },
+  dotIndicator: {
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    transition: "background 0.3s",
+  },
+  centerArea: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1,
+    paddingBottom: "20px",
+    gap: "0px",
+  },
+  clockRing: {
+    width: "260px",
+    height: "260px",
+    borderRadius: "50%",
+    background: "linear-gradient(135deg, rgba(240,192,47,0.12), rgba(26,26,50,0.8))",
+    border: "3px solid rgba(240,192,47,0.35)",
+    boxShadow: `
+      0 0 0 1px rgba(240,192,47,0.1),
+      0 0 40px rgba(240,192,47,0.1),
+      inset 0 0 60px rgba(26,26,50,0.6)
+    `,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "box-shadow 0.3s ease",
+    marginBottom: "24px",
+  },
+  clockRingPulse: {
+    boxShadow: `
+      0 0 0 4px rgba(240,192,47,0.3),
+      0 0 60px rgba(240,192,47,0.3),
+      inset 0 0 60px rgba(26,26,50,0.6)
+    `,
+  },
+  clockFace: {
+    width: "230px",
+    height: "230px",
+    borderRadius: "50%",
+    background: "radial-gradient(circle at 40% 35%, #23234a, #1a1a32 70%)",
+    position: "relative",
+    border: "1px solid rgba(240,192,47,0.15)",
+  },
+  hourMarker: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "2px",
+    height: "115px",
+    marginLeft: "-1px",
+    transformOrigin: "top center",
+    display: "flex",
+    justifyContent: "center",
+  },
+  markerTick: {
+    width: "2px",
+    borderRadius: "1px",
+    position: "absolute",
+    top: "6px",
+  },
+  hourNum: {
+    position: "absolute",
+    fontSize: "0.7rem",
+    fontWeight: 700,
+    color: "rgba(240,192,47,0.7)",
+    letterSpacing: "0.02em",
+  },
+  hand: {
+    position: "absolute",
+    bottom: "50%",
+    left: "50%",
+    transformOrigin: "bottom center",
+    borderRadius: "4px",
+  },
+  hourHand: {
+    width: "5px",
+    height: "62px",
+    background: "linear-gradient(to top, #f0c02f, rgba(240,192,47,0.6))",
+    marginLeft: "-2.5px",
+    boxShadow: "0 0 6px rgba(240,192,47,0.5)",
+  },
+  minuteHand: {
+    width: "3px",
+    height: "85px",
+    background: "linear-gradient(to top, #fff, rgba(255,255,255,0.5))",
+    marginLeft: "-1.5px",
+    boxShadow: "0 0 4px rgba(255,255,255,0.3)",
+  },
+  secondHand: {
+    width: "1.5px",
+    height: "95px",
+    background: "linear-gradient(to top, #f0c02f, #ff6060)",
+    marginLeft: "-0.75px",
+    boxShadow: "0 0 4px rgba(255,96,96,0.6)",
+  },
+  centerDot: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "10px",
+    height: "10px",
+    borderRadius: "50%",
+    background: "#f0c02f",
+    transform: "translate(-50%, -50%)",
+    boxShadow: "0 0 10px rgba(240,192,47,0.8)",
+    zIndex: 10,
+  },
+  digitalTime: {
+    fontSize: "3.8rem",
+    fontWeight: 300,
+    letterSpacing: "0.06em",
+    color: "#ffffff",
+    fontVariantNumeric: "tabular-nums",
+    textShadow: "0 0 30px rgba(240,192,47,0.3)",
+    lineHeight: 1,
+    marginBottom: "8px",
+  },
+  dateText: {
+    fontSize: "0.9rem",
+    color: "rgba(240,192,47,0.75)",
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    marginBottom: "28px",
+  },
+  feedbackBanner: {
+    background: "rgba(240,192,47,0.12)",
+    border: "1px solid rgba(240,192,47,0.4)",
+    borderRadius: "10px",
+    padding: "12px 28px",
+    color: "#fff",
+    marginBottom: "20px",
+    transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+    backdropFilter: "blur(8px)",
+    minHeight: "46px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: "320px",
+  },
+  buttonRow: {
+    display: "flex",
+    gap: "20px",
+    marginBottom: "16px",
+  },
+  btnEntrada: {
+    padding: "16px 44px",
+    fontSize: "0.9rem",
+    fontWeight: 700,
+    letterSpacing: "0.12em",
+    background: "#f0c02f",
+    color: "#1a1a32",
+    border: "none",
+    borderRadius: "10px",
+    cursor: "pointer",
+    boxShadow: "0 4px 20px rgba(240,192,47,0.25)",
+    transition: "transform 0.2s ease, box-shadow 0.2s ease",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    textTransform: "uppercase",
+  },
+  btnSalida: {
+    padding: "16px 44px",
+    fontSize: "0.9rem",
+    fontWeight: 700,
+    letterSpacing: "0.12em",
+    background: "transparent",
+    color: "#fff",
+    border: "2px solid rgba(255,255,255,0.3)",
+    borderRadius: "10px",
+    cursor: "pointer",
+    boxShadow: "0 4px 20px rgba(255,80,80,0.2)",
+    transition: "transform 0.2s ease, box-shadow 0.2s ease",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    textTransform: "uppercase",
+  },
+  btnIcon: {
+    fontSize: "0.75rem",
+  },
+  lastActionInfo: {
+    fontSize: "0.78rem",
+    color: "rgba(255,255,255,0.35)",
+    letterSpacing: "0.05em",
+  },
+  footer: {
+    padding: "16px",
+    zIndex: 1,
+  },
+  footerText: {
+    fontSize: "0.7rem",
+    color: "rgba(255,255,255,0.2)",
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+  },
+  msgViewAll: {
+    marginLeft: "auto",
+    fontSize: "0.62rem",
+    color: "rgba(240,192,47,0.55)",
+    letterSpacing: "0.06em",
+    fontWeight: 600,
+  },
+  modalOverlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(10,10,25,0.75)",
+    backdropFilter: "blur(6px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 100,
+  },
+  modalBox: {
+    background: "#1e1e3a",
+    border: "1px solid rgba(240,192,47,0.3)",
+    borderRadius: "16px",
+    width: "480px",
+    maxWidth: "90vw",
+    boxShadow: "0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(240,192,47,0.1)",
+    overflow: "hidden",
+  },
+  modalHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "18px 22px",
+    borderBottom: "1px solid rgba(240,192,47,0.15)",
+    background: "rgba(240,192,47,0.05)",
+  },
+  modalTitleRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+  },
+  modalTitle: {
+    fontSize: "0.75rem",
+    fontWeight: 700,
+    color: "#f0c02f",
+    letterSpacing: "0.14em",
+  },
+  modalClose: {
+    background: "rgba(255,255,255,0.08)",
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: "6px",
+    color: "rgba(255,255,255,0.6)",
+    cursor: "pointer",
+    fontSize: "0.85rem",
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 0,
+  },
+  modalList: {
+    padding: "12px 0",
+  },
+  modalItem: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "14px",
+    padding: "14px 22px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    transition: "background 0.2s",
+  },
+  modalItemNum: {
+    fontSize: "0.65rem",
+    fontWeight: 700,
+    color: "rgba(240,192,47,0.45)",
+    letterSpacing: "0.08em",
+    paddingTop: "2px",
+    minWidth: "22px",
+  },
+  modalItemText: {
+    fontSize: "0.88rem",
+    color: "rgba(255,255,255,0.85)",
+    lineHeight: 1.55,
+  },
+  modalFooter: {
+    padding: "12px 22px",
+    fontSize: "0.7rem",
+    color: "rgba(255,255,255,0.25)",
+    letterSpacing: "0.06em",
+    borderTop: "1px solid rgba(240,192,47,0.1)",
+    textAlign: "right",
+  },
+};

From 71f05e4b8a8b54a6ea6472f4612eedf8fe297e60 Mon Sep 17 00:00:00 2001
From: Alejandro Arias <00835181@red.unid.mx>
Date: Thu, 26 Feb 2026 20:01:32 -0500
Subject: [PATCH 12/46] cambios en Systemconfig

---
 src/App.jsx                            |   2 +
 src/components/Sidebar.jsx             |   3 +-
 src/pages/SytemConfig/Systemconfig.jsx | 751 +++++++++++++++++++++++++
 3 files changed, 755 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/SytemConfig/Systemconfig.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 78f28a5..fb577c3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ import Dashboard from "./pages/Dashboard"
 import Teachers from "./pages/Teachers"
 import Clock from "./pages/Clock"
 import Reports from "./pages/Reports"
+import SystemConfig from "./pages/SytemConfig/Systemconfig"
 
 
 function App() {
@@ -26,6 +27,7 @@ function App() {
             <Route path="/teachers" element={<Teachers />} />
             <Route path="/clock" element={<Clock />} />
             <Route path="/reports" element={<Reports />} />
+            <Route path="/configuracion" element={<SystemConfig />} />
           </Routes>
         </main>
       </div>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index db6cea9..484d9f8 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom'
+import {Link, NavLink} from 'react-router-dom'
 
 function Sidebar(){
     return(
@@ -23,6 +23,7 @@ function Sidebar(){
                     <Link to="/teachers" className='hover:text-sky-400 transition'>Maestros</Link>
                     <Link to="/clock" className='hover:text-sky-400 transition'>Reloj</Link>
                     <Link to="/reports" className='hover:text-sky-400 transition'>Reportes</Link>
+                    <NavLink to="/configuracion" className='hover:text-sky-400 transition'>⚙️ Configuración</NavLink>
                  </nav>
               </div>
             
diff --git a/src/pages/SytemConfig/Systemconfig.jsx b/src/pages/SytemConfig/Systemconfig.jsx
new file mode 100644
index 0000000..82dc7c4
--- /dev/null
+++ b/src/pages/SytemConfig/Systemconfig.jsx
@@ -0,0 +1,751 @@
+import { useState } from "react";
+
+// ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
+const styles = {
+  // Layout principal
+  wrapper: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    background: "#ffffff",
+    minHeight: "100vh",
+    padding: "2rem",
+    color: "#1f2937",
+  },
+  header: {
+    marginBottom: "2.5rem",
+    borderBottom: "1px solid rgba(0,0,0,0.1)",
+    paddingBottom: "1.5rem",
+  },
+  headerTitle: {
+    fontSize: "2rem",
+    fontWeight: "700",
+    letterSpacing: "-0.02em",
+    color: "#1f2937",
+    margin: "0 0 0.25rem 0",
+  },
+  headerSubtitle: {
+    fontSize: "0.95rem",
+    color: "#6b7280",
+    margin: 0,
+    fontStyle: "italic",
+  },
+  moduleBadge: {
+    display: "inline-block",
+    background: "rgba(59,130,246,0.1)",
+    border: "1px solid rgba(59,130,246,0.3)",
+    color: "#1e40af",
+    fontSize: "0.75rem",
+    padding: "0.2rem 0.75rem",
+    borderRadius: "999px",
+    marginBottom: "0.75rem",
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+  },
+
+  // Grid de secciones
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(480px, 1fr))",
+    gap: "1.5rem",
+  },
+  gridFull: {
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    gap: "1.5rem",
+  },
+
+  // Cards
+  card: {
+    background: "#f9fafb",
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderRadius: "16px",
+    padding: "1.75rem",
+    backdropFilter: "blur(12px)",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  },
+  cardTitle: {
+    fontSize: "1rem",
+    fontWeight: "600",
+    color: "#1f2937",
+    margin: "0 0 0.25rem 0",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  cardDesc: {
+    fontSize: "0.82rem",
+    color: "#6b7280",
+    marginBottom: "1.25rem",
+    margin: "0 0 1.25rem 0",
+  },
+
+  // Formularios
+  label: {
+    display: "block",
+    fontSize: "0.8rem",
+    color: "#374151",
+    marginBottom: "0.35rem",
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+  },
+  input: {
+    width: "100%",
+    background: "#ffffff",
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: "8px",
+    padding: "0.6rem 0.9rem",
+    color: "#1f2937",
+    fontSize: "0.9rem",
+    outline: "none",
+    boxSizing: "border-box",
+    transition: "border-color 0.2s",
+  },
+  select: {
+    width: "100%",
+    background: "#ffffff",
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: "8px",
+    padding: "0.6rem 0.9rem",
+    color: "#1f2937",
+    fontSize: "0.9rem",
+    outline: "none",
+    boxSizing: "border-box",
+  },
+  fieldGroup: {
+    marginBottom: "1rem",
+  },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "1rem",
+  },
+
+  // Botones
+  btnPrimary: {
+    background: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
+    color: "#fff",
+    border: "none",
+    borderRadius: "8px",
+    padding: "0.55rem 1.4rem",
+    fontSize: "0.85rem",
+    fontWeight: "600",
+    cursor: "pointer",
+    transition: "opacity 0.2s, transform 0.1s",
+    letterSpacing: "0.02em",
+  },
+  btnSecondary: {
+    background: "#ffffff",
+    color: "#374151",
+    border: "1px solid rgba(0,0,0,0.15)",
+    borderRadius: "8px",
+    padding: "0.55rem 1.2rem",
+    fontSize: "0.85rem",
+    cursor: "pointer",
+    transition: "background 0.2s",
+  },
+  btnDanger: {
+    background: "rgba(239,68,68,0.1)",
+    color: "#dc2626",
+    border: "1px solid rgba(239,68,68,0.3)",
+    borderRadius: "8px",
+    padding: "0.4rem 0.9rem",
+    fontSize: "0.8rem",
+    cursor: "pointer",
+  },
+  btnActions: {
+    display: "flex",
+    gap: "0.75rem",
+    marginTop: "1.25rem",
+    justifyContent: "flex-end",
+  },
+
+  // Slider
+  sliderWrapper: {
+    marginBottom: "1rem",
+  },
+  sliderRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "0.4rem",
+  },
+  sliderValue: {
+    background: "rgba(59,130,246,0.1)",
+    color: "#1e40af",
+    padding: "0.1rem 0.6rem",
+    borderRadius: "999px",
+    fontSize: "0.85rem",
+    fontWeight: "700",
+  },
+  slider: {
+    width: "100%",
+    accentColor: "#3b82f6",
+    cursor: "pointer",
+  },
+
+  // Tabla de roles
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "0.88rem",
+  },
+  th: {
+    textAlign: "left",
+    padding: "0.6rem 0.8rem",
+    color: "#374151",
+    fontSize: "0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    borderBottom: "1px solid rgba(0,0,0,0.08)",
+  },
+  td: {
+    padding: "0.75rem 0.8rem",
+    borderBottom: "1px solid rgba(0,0,0,0.04)",
+    color: "#374151",
+    verticalAlign: "middle",
+  },
+
+  // Badges de estado
+  badgeActive: {
+    background: "rgba(34,197,94,0.1)",
+    color: "#159b2b",
+    border: "1px solid rgba(34,197,94,0.2)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+  },
+  badgeInactive: {
+    background: "rgba(0,0,0,0.05)",
+    color: "#6b7280",
+    border: "1px solid rgba(0,0,0,0.1)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+  },
+  badgeAdmin: {
+    background: "rgba(168,85,247,0.1)",
+    color: "#7e22ce",
+    border: "1px solid rgba(168,85,247,0.2)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+  },
+
+  // Toggle switch
+  toggleRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.7rem 0",
+    borderBottom: "1px solid rgba(0,0,0,0.05)",
+  },
+  toggleLabel: {
+    fontSize: "0.88rem",
+    color: "#1f2937",
+  },
+  toggleSub: {
+    fontSize: "0.78rem",
+    color: "#9ca3af",
+    marginTop: "0.1rem",
+  },
+
+  // Horario
+  scheduleGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gap: "0.4rem",
+    marginBottom: "1rem",
+  },
+  dayCell: {
+    textAlign: "center",
+    padding: "0.5rem 0.25rem",
+    borderRadius: "8px",
+    fontSize: "0.78rem",
+    cursor: "pointer",
+    border: "1px solid transparent",
+    transition: "all 0.2s",
+    fontWeight: "600",
+  },
+  dayCellActive: {
+    background: "rgba(59,130,246,0.1)",
+    border: "1px solid rgba(59,130,246,0.3)",
+    color: "#1e40af",
+  },
+  dayCellInactive: {
+    background: "#f3f4f6",
+    border: "1px solid rgba(0,0,0,0.08)",
+    color: "#9ca3af",
+  },
+
+  // Divider
+  divider: {
+    borderTop: "1px solid rgba(0,0,0,0.06)",
+    margin: "1.25rem 0",
+  },
+
+  // Icono decorativo en card header
+  iconBox: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "1rem",
+    flexShrink: 0,
+  },
+};
+
+// ─── Datos mock ─────────────────────────────────────────────────────────────────
+
+const MOCK_ROLES = [
+  { id: 1, nombre: "Administrador", permisos: "Total", usuarios: 3, estado: "activo" },
+  { id: 2, nombre: "Coordinador", permisos: "Parcial", usuarios: 8, estado: "activo" },
+  { id: 3, nombre: "Docente", permisos: "Lectura", usuarios: 42, estado: "activo" },
+  { id: 4, nombre: "Auxiliar", permisos: "Limitado", usuarios: 12, estado: "inactivo" },
+];
+
+const DIAS_SEMANA = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
+
+// ─── Subcomponente: Toggle ────────────────────────────────────────────────────
+
+function Toggle({ checked, onChange }) {
+  return (
+    <div
+      onClick={() => onChange(!checked)}
+      style={{
+        width: "42px",
+        height: "22px",
+        borderRadius: "999px",
+        background: checked ? "rgba(59,130,246,0.8)" : "rgba(209,213,219,0.8)",
+        border: checked ? "1px solid rgba(59,130,246,0.6)" : "1px solid rgba(0,0,0,0.12)",
+        position: "relative",
+        cursor: "pointer",
+        transition: "background 0.2s",
+        flexShrink: 0,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: "2px",
+          left: checked ? "21px" : "2px",
+          width: "16px",
+          height: "16px",
+          borderRadius: "50%",
+          background: "#fff",
+          transition: "left 0.2s",
+          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+        }}
+      />
+    </div>
+  );
+}
+
+// ─── Subcomponente: SectionCard ────────────────────────────────────────────────
+
+function SectionCard({ icon, title, desc, color = "#3b82f6", children }) {
+  return (
+    <div style={styles.card}>
+      <div style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", marginBottom: "1.25rem" }}>
+        <div style={{ ...styles.iconBox, background: `${color}22` }}>
+          <span>{icon}</span>
+        </div>
+        <div>
+          <h3 style={styles.cardTitle}>{title}</h3>
+          <p style={styles.cardDesc}>{desc}</p>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ─── Subcomponente: Badge de rol ───────────────────────────────────────────────
+
+function RolBadge({ permisos }) {
+  if (permisos === "Total") return <span style={styles.badgeAdmin}>{permisos}</span>;
+  if (permisos === "Parcial") return <span style={{ ...styles.badgeActive }}>{permisos}</span>;
+  return <span style={styles.badgeInactive}>{permisos}</span>;
+}
+
+// ─── COMPONENTE PRINCIPAL ──────────────────────────────────────────────────────
+
+export default function SystemConfig() {
+
+  // --- Estado: Ajustes Institucionales ---
+  const [institucion, setInstitucion] = useState({
+    nombre: "Instituto Tecnológico Nacional",
+    codigo: "ITN-2024",
+    zona: "America/Mexico_City",
+    idioma: "es",
+  });
+
+  // --- Estado: Tolerancia ---
+  const [tolerancia, setTolerancia] = useState({
+    entrada: 10,
+    salida: 5,
+    inasistencias: 3,
+  });
+
+  // --- Estado: Horario base ---
+  const [diasActivos, setDiasActivos] = useState([true, true, true, true, true, false, false]);
+  const [horaInicio, setHoraInicio] = useState("07:00");
+  const [horaFin, setHoraFin] = useState("18:00");
+  const [duracionBloque, setDuracionBloque] = useState("60");
+
+  // --- Estado: Roles ---
+  const [roles, setRoles] = useState(MOCK_ROLES);
+
+  // --- Estado: Notificaciones ---
+  const [notificaciones, setNotificaciones] = useState({
+    emailAsistencia: true,
+    emailReportes: true,
+    pushAlertas: false,
+    resumenDiario: true,
+    alertasFaltas: true,
+    notifDocentes: false,
+  });
+
+  // --- Handlers ---
+  const toggleDia = (idx) => {
+    const copia = [...diasActivos];
+    copia[idx] = !copia[idx];
+    setDiasActivos(copia);
+  };
+
+  const toggleRolEstado = (id) => {
+    setRoles(roles.map((r) =>
+      r.id === id ? { ...r, estado: r.estado === "activo" ? "inactivo" : "activo" } : r
+    ));
+  };
+
+  const toggleNotif = (key) => {
+    setNotificaciones((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  // ─── RENDER ────────────────────────────────────────────────────────────────
+
+  return (
+    <div style={styles.wrapper}>
+
+      {/* ── Encabezado del módulo ── */}
+      <header style={styles.header}>
+        <h1 style={styles.headerTitle}>Configuración del Sistema</h1>
+        <p style={styles.headerSubtitle}>
+          Administre los parámetros globales de operación institucional.
+        </p>
+      </header>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 1 & 2: Ajustes Institucionales + Tolerancia
+      ══════════════════════════════════════════════════════ */}
+      <div style={{ ...styles.grid, marginBottom: "1.5rem" }}>
+
+        {/* ── 1. Ajustes Institucionales ── */}
+        <SectionCard
+          icon="🏛️"
+          title="Ajustes Institucionales"
+          desc="Datos generales y configuración de la institución"
+          color="#3b82f6"
+        >
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Nombre de la institución</label>
+            <input
+              style={styles.input}
+              value={institucion.nombre}
+              onChange={(e) => setInstitucion({ ...institucion, nombre: e.target.value })}
+            />
+          </div>
+
+          <div style={styles.row}>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Código institucional</label>
+              <input
+                style={styles.input}
+                value={institucion.codigo}
+                onChange={(e) => setInstitucion({ ...institucion, codigo: e.target.value })}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Idioma</label>
+              <select
+                style={styles.select}
+                value={institucion.idioma}
+                onChange={(e) => setInstitucion({ ...institucion, idioma: e.target.value })}
+              >
+                <option value="es">Español</option>
+                <option value="en">English</option>
+                <option value="pt">Português</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Zona horaria</label>
+            <select
+              style={styles.select}
+              value={institucion.zona}
+              onChange={(e) => setInstitucion({ ...institucion, zona: e.target.value })}
+            >
+              <option value="America/Mexico_City">America/Mexico_City (UTC-6)</option>
+              <option value="America/Bogota">America/Bogota (UTC-5)</option>
+              <option value="America/Buenos_Aires">America/Buenos_Aires (UTC-3)</option>
+              <option value="America/Lima">America/Lima (UTC-5)</option>
+            </select>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Cancelar</button>
+            <button style={styles.btnPrimary}>Guardar cambios</button>
+          </div>
+        </SectionCard>
+
+        {/* ── 2. Configuración de Tolerancia ── */}
+        <SectionCard
+          icon="⏱️"
+          title="Configuración de Tolerancia"
+          desc="Límites de tiempo y ausencias permitidas"
+          color="#f59e0b"
+        >
+          {/* Slider: tolerancia de entrada */}
+          <div style={styles.sliderWrapper}>
+            <div style={styles.sliderRow}>
+              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de entrada</label>
+              <span style={styles.sliderValue}>{tolerancia.entrada} min</span>
+            </div>
+            <input
+              type="range" min={0} max={30} step={1}
+              value={tolerancia.entrada}
+              onChange={(e) => setTolerancia({ ...tolerancia, entrada: Number(e.target.value) })}
+              style={styles.slider}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
+              <span>0 min</span><span>30 min</span>
+            </div>
+          </div>
+
+          {/* Slider: tolerancia de salida */}
+          <div style={styles.sliderWrapper}>
+            <div style={styles.sliderRow}>
+              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de salida anticipada</label>
+              <span style={styles.sliderValue}>{tolerancia.salida} min</span>
+            </div>
+            <input
+              type="range" min={0} max={20} step={1}
+              value={tolerancia.salida}
+              onChange={(e) => setTolerancia({ ...tolerancia, salida: Number(e.target.value) })}
+              style={styles.slider}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
+              <span>0 min</span><span>20 min</span>
+            </div>
+          </div>
+
+          <div style={styles.divider} />
+
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Inasistencias permitidas por período</label>
+            <select
+              style={styles.select}
+              value={tolerancia.inasistencias}
+              onChange={(e) => setTolerancia({ ...tolerancia, inasistencias: Number(e.target.value) })}
+            >
+              {[1, 2, 3, 4, 5, 6].map((n) => (
+                <option key={n} value={n}>{n} inasistencia{n > 1 ? "s" : ""}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Indicador visual */}
+          <div style={{
+            background: "rgba(245,158,11,0.08)",
+            border: "1px solid rgba(245,158,11,0.2)",
+            borderRadius: "8px",
+            padding: "0.75rem 1rem",
+            display: "flex",
+            gap: "0.5rem",
+            alignItems: "flex-start",
+          }}>
+            <span>⚠️</span>
+            <p style={{ margin: 0, fontSize: "0.8rem", color: "#92400e", lineHeight: "1.4" }}>
+              Los cambios en tolerancia afectarán los registros futuros. Los datos históricos no se modificarán.
+            </p>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Restablecer</button>
+            <button style={styles.btnPrimary}>Aplicar</button>
+          </div>
+        </SectionCard>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 3: Horario Base
+      ══════════════════════════════════════════════════════ */}
+      <div style={{ marginBottom: "1.5rem" }}>
+        <SectionCard
+          icon="📅"
+          title="Horario Base"
+          desc="Define los días y horas de operación del sistema"
+          color="#10b981"
+        >
+          <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Días laborables activos</p>
+          <div style={styles.scheduleGrid}>
+            {DIAS_SEMANA.map((dia, idx) => (
+              <div
+                key={dia}
+                onClick={() => toggleDia(idx)}
+                style={{
+                  ...styles.dayCell,
+                  ...(diasActivos[idx] ? styles.dayCellActive : styles.dayCellInactive),
+                }}
+              >
+                <div>{dia}</div>
+                <div style={{ fontSize: "0.65rem", marginTop: "0.2rem", opacity: 0.7 }}>
+                  {diasActivos[idx] ? "✓" : "—"}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div style={styles.divider} />
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Hora de inicio</label>
+              <input
+                type="time"
+                style={styles.input}
+                value={horaInicio}
+                onChange={(e) => setHoraInicio(e.target.value)}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Hora de cierre</label>
+              <input
+                type="time"
+                style={styles.input}
+                value={horaFin}
+                onChange={(e) => setHoraFin(e.target.value)}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Duración de bloque</label>
+              <select
+                style={styles.select}
+                value={duracionBloque}
+                onChange={(e) => setDuracionBloque(e.target.value)}
+              >
+                <option value="45">45 minutos</option>
+                <option value="60">60 minutos</option>
+                <option value="90">90 minutos</option>
+                <option value="120">120 minutos</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Cancelar</button>
+            <button style={styles.btnPrimary}>Guardar horario</button>
+          </div>
+        </SectionCard>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 4 & 5: Roles + Notificaciones
+      ══════════════════════════════════════════════════════ */}
+      <div style={styles.grid}>
+
+        {/* ── 4. Gestión de Roles ── */}
+        <SectionCard
+          icon="🔑"
+          title="Gestión de Roles"
+          desc="Administre los roles y permisos del sistema"
+          color="#8b5cf6"
+        >
+          <table style={styles.table}>
+            <thead>
+              <tr>
+                <th style={styles.th}>Rol</th>
+                <th style={styles.th}>Permisos</th>
+                <th style={styles.th}>Usuarios</th>
+                <th style={styles.th}>Estado</th>
+                <th style={styles.th}>Acción</th>
+              </tr>
+            </thead>
+            <tbody>
+              {roles.map((rol) => (
+                <tr key={rol.id}>
+                  <td style={styles.td}>
+                    <span style={{ fontWeight: "600", color: "#1f2937" }}>{rol.nombre}</span>
+                  </td>
+                  <td style={styles.td}>
+                    <RolBadge permisos={rol.permisos} />
+                  </td>
+                  <td style={styles.td}>
+                    <span style={{ color: "#374151" }}>{rol.usuarios}</span>
+                  </td>
+                  <td style={styles.td}>
+                    {rol.estado === "activo"
+                      ? <span style={styles.badgeActive}>Activo</span>
+                      : <span style={styles.badgeInactive}>Inactivo</span>
+                    }
+                  </td>
+                  <td style={styles.td}>
+                    <button
+                      style={styles.btnDanger}
+                      onClick={() => toggleRolEstado(rol.id)}
+                    >
+                      {rol.estado === "activo" ? "Deshabilitar" : "Habilitar"}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnPrimary}>+ Nuevo rol</button>
+          </div>
+        </SectionCard>
+
+        {/* ── 5. Preferencias de Notificación ── */}
+        <SectionCard
+          icon="🔔"
+          title="Preferencias de Notificación"
+          desc="Configure qué alertas y notificaciones desea recibir"
+          color="#ec4899"
+        >
+          {[
+            { key: "emailAsistencia", label: "Notificaciones de asistencia", sub: "Email al registrar una asistencia" },
+            { key: "emailReportes", label: "Reportes periódicos", sub: "Resúmenes semanales por correo" },
+            { key: "pushAlertas", label: "Alertas push", sub: "Notificaciones en el navegador" },
+            { key: "resumenDiario", label: "Resumen diario", sub: "Email con el resumen del día" },
+            { key: "alertasFaltas", label: "Alertas por faltas excesivas", sub: "Notificar al superar el límite" },
+            { key: "notifDocentes", label: "Notificar a docentes", sub: "Avisar al docente sobre ausencias" },
+          ].map(({ key, label, sub }) => (
+            <div key={key} style={styles.toggleRow}>
+              <div>
+                <div style={styles.toggleLabel}>{label}</div>
+                <div style={styles.toggleSub}>{sub}</div>
+              </div>
+              <Toggle
+                checked={notificaciones[key]}
+                onChange={() => toggleNotif(key)}
+              />
+            </div>
+          ))}
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Restablecer</button>
+            <button style={styles.btnPrimary}>Guardar preferencias</button>
+          </div>
+        </SectionCard>
+      </div>
+
+     
+    </div>
+  );
+}
\ No newline at end of file

From 5fef3e598e4aadbd28d2b0c7d524ed3c4f8641c6 Mon Sep 17 00:00:00 2001
From: Alejandro Arias <00835181@red.unid.mx>
Date: Thu, 26 Feb 2026 20:25:41 -0500
Subject: [PATCH 13/46] cambios en Systemconfig

---
 src/App.jsx                                   |   6 +-
 src/components/Sidebar.jsx                    |   9 +-
 src/pages/{systemConfig => }/SystemConfig.jsx |   1 +
 src/pages/SytemConfig/Systemconfig.jsx        | 751 ------------------
 4 files changed, 8 insertions(+), 759 deletions(-)
 rename src/pages/{systemConfig => }/SystemConfig.jsx (99%)
 delete mode 100644 src/pages/SytemConfig/Systemconfig.jsx

diff --git a/src/App.jsx b/src/App.jsx
index fb577c3..6246ce3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
- {/* Maquetar sidebar siempre visible con todas rutas - publicas y administrativas*/}
+{/* Maquetar sidebar siempre visible con todas rutas - publicas y administrativas*/}
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import Sidebar from "./components/Sidebar"
 
@@ -9,7 +9,7 @@ import Dashboard from "./pages/Dashboard"
 import Teachers from "./pages/Teachers"
 import Clock from "./pages/Clock"
 import Reports from "./pages/Reports"
-import SystemConfig from "./pages/SytemConfig/Systemconfig"
+import SystemConfig from "./pages/SystemConfig"
 
 
 function App() {
@@ -27,7 +27,7 @@ function App() {
             <Route path="/teachers" element={<Teachers />} />
             <Route path="/clock" element={<Clock />} />
             <Route path="/reports" element={<Reports />} />
-            <Route path="/configuracion" element={<SystemConfig />} />
+            <Route path="/sistemaconfig" element={<SystemConfig />} />
           </Routes>
         </main>
       </div>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 3c842c6..06fd423 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -23,11 +23,10 @@ function Sidebar(){
                     <Link to="/teachers" className='hover:text-sky-400 transition'>Maestros</Link>
                     <Link to="/clock" className='hover:text-sky-400 transition'>Reloj</Link>
                     <Link to="/reports" className='hover:text-sky-400 transition'>Reportes</Link>
-<<<<<<< HEAD
-                    <NavLink to="/configuracion" className='hover:text-sky-400 transition'>⚙️ Configuración</NavLink>
-=======
-                    <Link to="/configuracion" className='hover:text-sky-400 transition'>Configuración</Link>
->>>>>>> 84e4c9ec0f68cc7156b339667e2063b82dc770d3
+                    <NavLink to="/Systemconfig" className='hover:text-sky-400 transition'>Configuración</NavLink>
+                    <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Configuración</span></Link>
                  </nav>
               </div>
             
diff --git a/src/pages/systemConfig/SystemConfig.jsx b/src/pages/SystemConfig.jsx
similarity index 99%
rename from src/pages/systemConfig/SystemConfig.jsx
rename to src/pages/SystemConfig.jsx
index 4784c8b..b74321e 100644
--- a/src/pages/systemConfig/SystemConfig.jsx
+++ b/src/pages/SystemConfig.jsx
@@ -1,4 +1,5 @@
 
+
 import { useState } from "react";
 
 // ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
diff --git a/src/pages/SytemConfig/Systemconfig.jsx b/src/pages/SytemConfig/Systemconfig.jsx
deleted file mode 100644
index 82dc7c4..0000000
--- a/src/pages/SytemConfig/Systemconfig.jsx
+++ /dev/null
@@ -1,751 +0,0 @@
-import { useState } from "react";
-
-// ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
-const styles = {
-  // Layout principal
-  wrapper: {
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-    background: "#ffffff",
-    minHeight: "100vh",
-    padding: "2rem",
-    color: "#1f2937",
-  },
-  header: {
-    marginBottom: "2.5rem",
-    borderBottom: "1px solid rgba(0,0,0,0.1)",
-    paddingBottom: "1.5rem",
-  },
-  headerTitle: {
-    fontSize: "2rem",
-    fontWeight: "700",
-    letterSpacing: "-0.02em",
-    color: "#1f2937",
-    margin: "0 0 0.25rem 0",
-  },
-  headerSubtitle: {
-    fontSize: "0.95rem",
-    color: "#6b7280",
-    margin: 0,
-    fontStyle: "italic",
-  },
-  moduleBadge: {
-    display: "inline-block",
-    background: "rgba(59,130,246,0.1)",
-    border: "1px solid rgba(59,130,246,0.3)",
-    color: "#1e40af",
-    fontSize: "0.75rem",
-    padding: "0.2rem 0.75rem",
-    borderRadius: "999px",
-    marginBottom: "0.75rem",
-    letterSpacing: "0.08em",
-    textTransform: "uppercase",
-  },
-
-  // Grid de secciones
-  grid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(480px, 1fr))",
-    gap: "1.5rem",
-  },
-  gridFull: {
-    display: "grid",
-    gridTemplateColumns: "1fr",
-    gap: "1.5rem",
-  },
-
-  // Cards
-  card: {
-    background: "#f9fafb",
-    border: "1px solid rgba(0,0,0,0.08)",
-    borderRadius: "16px",
-    padding: "1.75rem",
-    backdropFilter: "blur(12px)",
-    boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-  },
-  cardTitle: {
-    fontSize: "1rem",
-    fontWeight: "600",
-    color: "#1f2937",
-    margin: "0 0 0.25rem 0",
-    display: "flex",
-    alignItems: "center",
-    gap: "0.5rem",
-  },
-  cardDesc: {
-    fontSize: "0.82rem",
-    color: "#6b7280",
-    marginBottom: "1.25rem",
-    margin: "0 0 1.25rem 0",
-  },
-
-  // Formularios
-  label: {
-    display: "block",
-    fontSize: "0.8rem",
-    color: "#374151",
-    marginBottom: "0.35rem",
-    letterSpacing: "0.04em",
-    textTransform: "uppercase",
-  },
-  input: {
-    width: "100%",
-    background: "#ffffff",
-    border: "1px solid rgba(0,0,0,0.12)",
-    borderRadius: "8px",
-    padding: "0.6rem 0.9rem",
-    color: "#1f2937",
-    fontSize: "0.9rem",
-    outline: "none",
-    boxSizing: "border-box",
-    transition: "border-color 0.2s",
-  },
-  select: {
-    width: "100%",
-    background: "#ffffff",
-    border: "1px solid rgba(0,0,0,0.12)",
-    borderRadius: "8px",
-    padding: "0.6rem 0.9rem",
-    color: "#1f2937",
-    fontSize: "0.9rem",
-    outline: "none",
-    boxSizing: "border-box",
-  },
-  fieldGroup: {
-    marginBottom: "1rem",
-  },
-  row: {
-    display: "grid",
-    gridTemplateColumns: "1fr 1fr",
-    gap: "1rem",
-  },
-
-  // Botones
-  btnPrimary: {
-    background: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
-    color: "#fff",
-    border: "none",
-    borderRadius: "8px",
-    padding: "0.55rem 1.4rem",
-    fontSize: "0.85rem",
-    fontWeight: "600",
-    cursor: "pointer",
-    transition: "opacity 0.2s, transform 0.1s",
-    letterSpacing: "0.02em",
-  },
-  btnSecondary: {
-    background: "#ffffff",
-    color: "#374151",
-    border: "1px solid rgba(0,0,0,0.15)",
-    borderRadius: "8px",
-    padding: "0.55rem 1.2rem",
-    fontSize: "0.85rem",
-    cursor: "pointer",
-    transition: "background 0.2s",
-  },
-  btnDanger: {
-    background: "rgba(239,68,68,0.1)",
-    color: "#dc2626",
-    border: "1px solid rgba(239,68,68,0.3)",
-    borderRadius: "8px",
-    padding: "0.4rem 0.9rem",
-    fontSize: "0.8rem",
-    cursor: "pointer",
-  },
-  btnActions: {
-    display: "flex",
-    gap: "0.75rem",
-    marginTop: "1.25rem",
-    justifyContent: "flex-end",
-  },
-
-  // Slider
-  sliderWrapper: {
-    marginBottom: "1rem",
-  },
-  sliderRow: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: "0.4rem",
-  },
-  sliderValue: {
-    background: "rgba(59,130,246,0.1)",
-    color: "#1e40af",
-    padding: "0.1rem 0.6rem",
-    borderRadius: "999px",
-    fontSize: "0.85rem",
-    fontWeight: "700",
-  },
-  slider: {
-    width: "100%",
-    accentColor: "#3b82f6",
-    cursor: "pointer",
-  },
-
-  // Tabla de roles
-  table: {
-    width: "100%",
-    borderCollapse: "collapse",
-    fontSize: "0.88rem",
-  },
-  th: {
-    textAlign: "left",
-    padding: "0.6rem 0.8rem",
-    color: "#374151",
-    fontSize: "0.75rem",
-    textTransform: "uppercase",
-    letterSpacing: "0.06em",
-    borderBottom: "1px solid rgba(0,0,0,0.08)",
-  },
-  td: {
-    padding: "0.75rem 0.8rem",
-    borderBottom: "1px solid rgba(0,0,0,0.04)",
-    color: "#374151",
-    verticalAlign: "middle",
-  },
-
-  // Badges de estado
-  badgeActive: {
-    background: "rgba(34,197,94,0.1)",
-    color: "#159b2b",
-    border: "1px solid rgba(34,197,94,0.2)",
-    borderRadius: "999px",
-    padding: "0.15rem 0.65rem",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-  },
-  badgeInactive: {
-    background: "rgba(0,0,0,0.05)",
-    color: "#6b7280",
-    border: "1px solid rgba(0,0,0,0.1)",
-    borderRadius: "999px",
-    padding: "0.15rem 0.65rem",
-    fontSize: "0.75rem",
-  },
-  badgeAdmin: {
-    background: "rgba(168,85,247,0.1)",
-    color: "#7e22ce",
-    border: "1px solid rgba(168,85,247,0.2)",
-    borderRadius: "999px",
-    padding: "0.15rem 0.65rem",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-  },
-
-  // Toggle switch
-  toggleRow: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "0.7rem 0",
-    borderBottom: "1px solid rgba(0,0,0,0.05)",
-  },
-  toggleLabel: {
-    fontSize: "0.88rem",
-    color: "#1f2937",
-  },
-  toggleSub: {
-    fontSize: "0.78rem",
-    color: "#9ca3af",
-    marginTop: "0.1rem",
-  },
-
-  // Horario
-  scheduleGrid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)",
-    gap: "0.4rem",
-    marginBottom: "1rem",
-  },
-  dayCell: {
-    textAlign: "center",
-    padding: "0.5rem 0.25rem",
-    borderRadius: "8px",
-    fontSize: "0.78rem",
-    cursor: "pointer",
-    border: "1px solid transparent",
-    transition: "all 0.2s",
-    fontWeight: "600",
-  },
-  dayCellActive: {
-    background: "rgba(59,130,246,0.1)",
-    border: "1px solid rgba(59,130,246,0.3)",
-    color: "#1e40af",
-  },
-  dayCellInactive: {
-    background: "#f3f4f6",
-    border: "1px solid rgba(0,0,0,0.08)",
-    color: "#9ca3af",
-  },
-
-  // Divider
-  divider: {
-    borderTop: "1px solid rgba(0,0,0,0.06)",
-    margin: "1.25rem 0",
-  },
-
-  // Icono decorativo en card header
-  iconBox: {
-    width: "32px",
-    height: "32px",
-    borderRadius: "8px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "1rem",
-    flexShrink: 0,
-  },
-};
-
-// ─── Datos mock ─────────────────────────────────────────────────────────────────
-
-const MOCK_ROLES = [
-  { id: 1, nombre: "Administrador", permisos: "Total", usuarios: 3, estado: "activo" },
-  { id: 2, nombre: "Coordinador", permisos: "Parcial", usuarios: 8, estado: "activo" },
-  { id: 3, nombre: "Docente", permisos: "Lectura", usuarios: 42, estado: "activo" },
-  { id: 4, nombre: "Auxiliar", permisos: "Limitado", usuarios: 12, estado: "inactivo" },
-];
-
-const DIAS_SEMANA = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
-
-// ─── Subcomponente: Toggle ────────────────────────────────────────────────────
-
-function Toggle({ checked, onChange }) {
-  return (
-    <div
-      onClick={() => onChange(!checked)}
-      style={{
-        width: "42px",
-        height: "22px",
-        borderRadius: "999px",
-        background: checked ? "rgba(59,130,246,0.8)" : "rgba(209,213,219,0.8)",
-        border: checked ? "1px solid rgba(59,130,246,0.6)" : "1px solid rgba(0,0,0,0.12)",
-        position: "relative",
-        cursor: "pointer",
-        transition: "background 0.2s",
-        flexShrink: 0,
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          top: "2px",
-          left: checked ? "21px" : "2px",
-          width: "16px",
-          height: "16px",
-          borderRadius: "50%",
-          background: "#fff",
-          transition: "left 0.2s",
-          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
-        }}
-      />
-    </div>
-  );
-}
-
-// ─── Subcomponente: SectionCard ────────────────────────────────────────────────
-
-function SectionCard({ icon, title, desc, color = "#3b82f6", children }) {
-  return (
-    <div style={styles.card}>
-      <div style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", marginBottom: "1.25rem" }}>
-        <div style={{ ...styles.iconBox, background: `${color}22` }}>
-          <span>{icon}</span>
-        </div>
-        <div>
-          <h3 style={styles.cardTitle}>{title}</h3>
-          <p style={styles.cardDesc}>{desc}</p>
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-}
-
-// ─── Subcomponente: Badge de rol ───────────────────────────────────────────────
-
-function RolBadge({ permisos }) {
-  if (permisos === "Total") return <span style={styles.badgeAdmin}>{permisos}</span>;
-  if (permisos === "Parcial") return <span style={{ ...styles.badgeActive }}>{permisos}</span>;
-  return <span style={styles.badgeInactive}>{permisos}</span>;
-}
-
-// ─── COMPONENTE PRINCIPAL ──────────────────────────────────────────────────────
-
-export default function SystemConfig() {
-
-  // --- Estado: Ajustes Institucionales ---
-  const [institucion, setInstitucion] = useState({
-    nombre: "Instituto Tecnológico Nacional",
-    codigo: "ITN-2024",
-    zona: "America/Mexico_City",
-    idioma: "es",
-  });
-
-  // --- Estado: Tolerancia ---
-  const [tolerancia, setTolerancia] = useState({
-    entrada: 10,
-    salida: 5,
-    inasistencias: 3,
-  });
-
-  // --- Estado: Horario base ---
-  const [diasActivos, setDiasActivos] = useState([true, true, true, true, true, false, false]);
-  const [horaInicio, setHoraInicio] = useState("07:00");
-  const [horaFin, setHoraFin] = useState("18:00");
-  const [duracionBloque, setDuracionBloque] = useState("60");
-
-  // --- Estado: Roles ---
-  const [roles, setRoles] = useState(MOCK_ROLES);
-
-  // --- Estado: Notificaciones ---
-  const [notificaciones, setNotificaciones] = useState({
-    emailAsistencia: true,
-    emailReportes: true,
-    pushAlertas: false,
-    resumenDiario: true,
-    alertasFaltas: true,
-    notifDocentes: false,
-  });
-
-  // --- Handlers ---
-  const toggleDia = (idx) => {
-    const copia = [...diasActivos];
-    copia[idx] = !copia[idx];
-    setDiasActivos(copia);
-  };
-
-  const toggleRolEstado = (id) => {
-    setRoles(roles.map((r) =>
-      r.id === id ? { ...r, estado: r.estado === "activo" ? "inactivo" : "activo" } : r
-    ));
-  };
-
-  const toggleNotif = (key) => {
-    setNotificaciones((prev) => ({ ...prev, [key]: !prev[key] }));
-  };
-
-  // ─── RENDER ────────────────────────────────────────────────────────────────
-
-  return (
-    <div style={styles.wrapper}>
-
-      {/* ── Encabezado del módulo ── */}
-      <header style={styles.header}>
-        <h1 style={styles.headerTitle}>Configuración del Sistema</h1>
-        <p style={styles.headerSubtitle}>
-          Administre los parámetros globales de operación institucional.
-        </p>
-      </header>
-
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 1 & 2: Ajustes Institucionales + Tolerancia
-      ══════════════════════════════════════════════════════ */}
-      <div style={{ ...styles.grid, marginBottom: "1.5rem" }}>
-
-        {/* ── 1. Ajustes Institucionales ── */}
-        <SectionCard
-          icon="🏛️"
-          title="Ajustes Institucionales"
-          desc="Datos generales y configuración de la institución"
-          color="#3b82f6"
-        >
-          <div style={styles.fieldGroup}>
-            <label style={styles.label}>Nombre de la institución</label>
-            <input
-              style={styles.input}
-              value={institucion.nombre}
-              onChange={(e) => setInstitucion({ ...institucion, nombre: e.target.value })}
-            />
-          </div>
-
-          <div style={styles.row}>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Código institucional</label>
-              <input
-                style={styles.input}
-                value={institucion.codigo}
-                onChange={(e) => setInstitucion({ ...institucion, codigo: e.target.value })}
-              />
-            </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Idioma</label>
-              <select
-                style={styles.select}
-                value={institucion.idioma}
-                onChange={(e) => setInstitucion({ ...institucion, idioma: e.target.value })}
-              >
-                <option value="es">Español</option>
-                <option value="en">English</option>
-                <option value="pt">Português</option>
-              </select>
-            </div>
-          </div>
-
-          <div style={styles.fieldGroup}>
-            <label style={styles.label}>Zona horaria</label>
-            <select
-              style={styles.select}
-              value={institucion.zona}
-              onChange={(e) => setInstitucion({ ...institucion, zona: e.target.value })}
-            >
-              <option value="America/Mexico_City">America/Mexico_City (UTC-6)</option>
-              <option value="America/Bogota">America/Bogota (UTC-5)</option>
-              <option value="America/Buenos_Aires">America/Buenos_Aires (UTC-3)</option>
-              <option value="America/Lima">America/Lima (UTC-5)</option>
-            </select>
-          </div>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Cancelar</button>
-            <button style={styles.btnPrimary}>Guardar cambios</button>
-          </div>
-        </SectionCard>
-
-        {/* ── 2. Configuración de Tolerancia ── */}
-        <SectionCard
-          icon="⏱️"
-          title="Configuración de Tolerancia"
-          desc="Límites de tiempo y ausencias permitidas"
-          color="#f59e0b"
-        >
-          {/* Slider: tolerancia de entrada */}
-          <div style={styles.sliderWrapper}>
-            <div style={styles.sliderRow}>
-              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de entrada</label>
-              <span style={styles.sliderValue}>{tolerancia.entrada} min</span>
-            </div>
-            <input
-              type="range" min={0} max={30} step={1}
-              value={tolerancia.entrada}
-              onChange={(e) => setTolerancia({ ...tolerancia, entrada: Number(e.target.value) })}
-              style={styles.slider}
-            />
-            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
-              <span>0 min</span><span>30 min</span>
-            </div>
-          </div>
-
-          {/* Slider: tolerancia de salida */}
-          <div style={styles.sliderWrapper}>
-            <div style={styles.sliderRow}>
-              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de salida anticipada</label>
-              <span style={styles.sliderValue}>{tolerancia.salida} min</span>
-            </div>
-            <input
-              type="range" min={0} max={20} step={1}
-              value={tolerancia.salida}
-              onChange={(e) => setTolerancia({ ...tolerancia, salida: Number(e.target.value) })}
-              style={styles.slider}
-            />
-            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
-              <span>0 min</span><span>20 min</span>
-            </div>
-          </div>
-
-          <div style={styles.divider} />
-
-          <div style={styles.fieldGroup}>
-            <label style={styles.label}>Inasistencias permitidas por período</label>
-            <select
-              style={styles.select}
-              value={tolerancia.inasistencias}
-              onChange={(e) => setTolerancia({ ...tolerancia, inasistencias: Number(e.target.value) })}
-            >
-              {[1, 2, 3, 4, 5, 6].map((n) => (
-                <option key={n} value={n}>{n} inasistencia{n > 1 ? "s" : ""}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* Indicador visual */}
-          <div style={{
-            background: "rgba(245,158,11,0.08)",
-            border: "1px solid rgba(245,158,11,0.2)",
-            borderRadius: "8px",
-            padding: "0.75rem 1rem",
-            display: "flex",
-            gap: "0.5rem",
-            alignItems: "flex-start",
-          }}>
-            <span>⚠️</span>
-            <p style={{ margin: 0, fontSize: "0.8rem", color: "#92400e", lineHeight: "1.4" }}>
-              Los cambios en tolerancia afectarán los registros futuros. Los datos históricos no se modificarán.
-            </p>
-          </div>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Restablecer</button>
-            <button style={styles.btnPrimary}>Aplicar</button>
-          </div>
-        </SectionCard>
-      </div>
-
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 3: Horario Base
-      ══════════════════════════════════════════════════════ */}
-      <div style={{ marginBottom: "1.5rem" }}>
-        <SectionCard
-          icon="📅"
-          title="Horario Base"
-          desc="Define los días y horas de operación del sistema"
-          color="#10b981"
-        >
-          <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Días laborables activos</p>
-          <div style={styles.scheduleGrid}>
-            {DIAS_SEMANA.map((dia, idx) => (
-              <div
-                key={dia}
-                onClick={() => toggleDia(idx)}
-                style={{
-                  ...styles.dayCell,
-                  ...(diasActivos[idx] ? styles.dayCellActive : styles.dayCellInactive),
-                }}
-              >
-                <div>{dia}</div>
-                <div style={{ fontSize: "0.65rem", marginTop: "0.2rem", opacity: 0.7 }}>
-                  {diasActivos[idx] ? "✓" : "—"}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div style={styles.divider} />
-
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Hora de inicio</label>
-              <input
-                type="time"
-                style={styles.input}
-                value={horaInicio}
-                onChange={(e) => setHoraInicio(e.target.value)}
-              />
-            </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Hora de cierre</label>
-              <input
-                type="time"
-                style={styles.input}
-                value={horaFin}
-                onChange={(e) => setHoraFin(e.target.value)}
-              />
-            </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Duración de bloque</label>
-              <select
-                style={styles.select}
-                value={duracionBloque}
-                onChange={(e) => setDuracionBloque(e.target.value)}
-              >
-                <option value="45">45 minutos</option>
-                <option value="60">60 minutos</option>
-                <option value="90">90 minutos</option>
-                <option value="120">120 minutos</option>
-              </select>
-            </div>
-          </div>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Cancelar</button>
-            <button style={styles.btnPrimary}>Guardar horario</button>
-          </div>
-        </SectionCard>
-      </div>
-
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 4 & 5: Roles + Notificaciones
-      ══════════════════════════════════════════════════════ */}
-      <div style={styles.grid}>
-
-        {/* ── 4. Gestión de Roles ── */}
-        <SectionCard
-          icon="🔑"
-          title="Gestión de Roles"
-          desc="Administre los roles y permisos del sistema"
-          color="#8b5cf6"
-        >
-          <table style={styles.table}>
-            <thead>
-              <tr>
-                <th style={styles.th}>Rol</th>
-                <th style={styles.th}>Permisos</th>
-                <th style={styles.th}>Usuarios</th>
-                <th style={styles.th}>Estado</th>
-                <th style={styles.th}>Acción</th>
-              </tr>
-            </thead>
-            <tbody>
-              {roles.map((rol) => (
-                <tr key={rol.id}>
-                  <td style={styles.td}>
-                    <span style={{ fontWeight: "600", color: "#1f2937" }}>{rol.nombre}</span>
-                  </td>
-                  <td style={styles.td}>
-                    <RolBadge permisos={rol.permisos} />
-                  </td>
-                  <td style={styles.td}>
-                    <span style={{ color: "#374151" }}>{rol.usuarios}</span>
-                  </td>
-                  <td style={styles.td}>
-                    {rol.estado === "activo"
-                      ? <span style={styles.badgeActive}>Activo</span>
-                      : <span style={styles.badgeInactive}>Inactivo</span>
-                    }
-                  </td>
-                  <td style={styles.td}>
-                    <button
-                      style={styles.btnDanger}
-                      onClick={() => toggleRolEstado(rol.id)}
-                    >
-                      {rol.estado === "activo" ? "Deshabilitar" : "Habilitar"}
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnPrimary}>+ Nuevo rol</button>
-          </div>
-        </SectionCard>
-
-        {/* ── 5. Preferencias de Notificación ── */}
-        <SectionCard
-          icon="🔔"
-          title="Preferencias de Notificación"
-          desc="Configure qué alertas y notificaciones desea recibir"
-          color="#ec4899"
-        >
-          {[
-            { key: "emailAsistencia", label: "Notificaciones de asistencia", sub: "Email al registrar una asistencia" },
-            { key: "emailReportes", label: "Reportes periódicos", sub: "Resúmenes semanales por correo" },
-            { key: "pushAlertas", label: "Alertas push", sub: "Notificaciones en el navegador" },
-            { key: "resumenDiario", label: "Resumen diario", sub: "Email con el resumen del día" },
-            { key: "alertasFaltas", label: "Alertas por faltas excesivas", sub: "Notificar al superar el límite" },
-            { key: "notifDocentes", label: "Notificar a docentes", sub: "Avisar al docente sobre ausencias" },
-          ].map(({ key, label, sub }) => (
-            <div key={key} style={styles.toggleRow}>
-              <div>
-                <div style={styles.toggleLabel}>{label}</div>
-                <div style={styles.toggleSub}>{sub}</div>
-              </div>
-              <Toggle
-                checked={notificaciones[key]}
-                onChange={() => toggleNotif(key)}
-              />
-            </div>
-          ))}
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Restablecer</button>
-            <button style={styles.btnPrimary}>Guardar preferencias</button>
-          </div>
-        </SectionCard>
-      </div>
-
-     
-    </div>
-  );
-}
\ No newline at end of file

From 65f5d7b53b3a95357d9fecddec9c8cb1a7d2c51d Mon Sep 17 00:00:00 2001
From: Nestor Alejandro <00856217@red.unid.mx>
Date: Thu, 26 Feb 2026 20:28:47 -0500
Subject: [PATCH 14/46] sistem config

---
 src/App.jsx                 |   2 +-
 src/pages/sistemaconfig.jsx | 751 ++++++++++++++++++++++++++++++++++++
 2 files changed, 752 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/sistemaconfig.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 9a2c233..5b5fa4d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -35,4 +35,4 @@ function App() {
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/src/pages/sistemaconfig.jsx b/src/pages/sistemaconfig.jsx
new file mode 100644
index 0000000..82dc7c4
--- /dev/null
+++ b/src/pages/sistemaconfig.jsx
@@ -0,0 +1,751 @@
+import { useState } from "react";
+
+// ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
+const styles = {
+  // Layout principal
+  wrapper: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    background: "#ffffff",
+    minHeight: "100vh",
+    padding: "2rem",
+    color: "#1f2937",
+  },
+  header: {
+    marginBottom: "2.5rem",
+    borderBottom: "1px solid rgba(0,0,0,0.1)",
+    paddingBottom: "1.5rem",
+  },
+  headerTitle: {
+    fontSize: "2rem",
+    fontWeight: "700",
+    letterSpacing: "-0.02em",
+    color: "#1f2937",
+    margin: "0 0 0.25rem 0",
+  },
+  headerSubtitle: {
+    fontSize: "0.95rem",
+    color: "#6b7280",
+    margin: 0,
+    fontStyle: "italic",
+  },
+  moduleBadge: {
+    display: "inline-block",
+    background: "rgba(59,130,246,0.1)",
+    border: "1px solid rgba(59,130,246,0.3)",
+    color: "#1e40af",
+    fontSize: "0.75rem",
+    padding: "0.2rem 0.75rem",
+    borderRadius: "999px",
+    marginBottom: "0.75rem",
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+  },
+
+  // Grid de secciones
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(480px, 1fr))",
+    gap: "1.5rem",
+  },
+  gridFull: {
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    gap: "1.5rem",
+  },
+
+  // Cards
+  card: {
+    background: "#f9fafb",
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderRadius: "16px",
+    padding: "1.75rem",
+    backdropFilter: "blur(12px)",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  },
+  cardTitle: {
+    fontSize: "1rem",
+    fontWeight: "600",
+    color: "#1f2937",
+    margin: "0 0 0.25rem 0",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  cardDesc: {
+    fontSize: "0.82rem",
+    color: "#6b7280",
+    marginBottom: "1.25rem",
+    margin: "0 0 1.25rem 0",
+  },
+
+  // Formularios
+  label: {
+    display: "block",
+    fontSize: "0.8rem",
+    color: "#374151",
+    marginBottom: "0.35rem",
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+  },
+  input: {
+    width: "100%",
+    background: "#ffffff",
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: "8px",
+    padding: "0.6rem 0.9rem",
+    color: "#1f2937",
+    fontSize: "0.9rem",
+    outline: "none",
+    boxSizing: "border-box",
+    transition: "border-color 0.2s",
+  },
+  select: {
+    width: "100%",
+    background: "#ffffff",
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: "8px",
+    padding: "0.6rem 0.9rem",
+    color: "#1f2937",
+    fontSize: "0.9rem",
+    outline: "none",
+    boxSizing: "border-box",
+  },
+  fieldGroup: {
+    marginBottom: "1rem",
+  },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "1rem",
+  },
+
+  // Botones
+  btnPrimary: {
+    background: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
+    color: "#fff",
+    border: "none",
+    borderRadius: "8px",
+    padding: "0.55rem 1.4rem",
+    fontSize: "0.85rem",
+    fontWeight: "600",
+    cursor: "pointer",
+    transition: "opacity 0.2s, transform 0.1s",
+    letterSpacing: "0.02em",
+  },
+  btnSecondary: {
+    background: "#ffffff",
+    color: "#374151",
+    border: "1px solid rgba(0,0,0,0.15)",
+    borderRadius: "8px",
+    padding: "0.55rem 1.2rem",
+    fontSize: "0.85rem",
+    cursor: "pointer",
+    transition: "background 0.2s",
+  },
+  btnDanger: {
+    background: "rgba(239,68,68,0.1)",
+    color: "#dc2626",
+    border: "1px solid rgba(239,68,68,0.3)",
+    borderRadius: "8px",
+    padding: "0.4rem 0.9rem",
+    fontSize: "0.8rem",
+    cursor: "pointer",
+  },
+  btnActions: {
+    display: "flex",
+    gap: "0.75rem",
+    marginTop: "1.25rem",
+    justifyContent: "flex-end",
+  },
+
+  // Slider
+  sliderWrapper: {
+    marginBottom: "1rem",
+  },
+  sliderRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "0.4rem",
+  },
+  sliderValue: {
+    background: "rgba(59,130,246,0.1)",
+    color: "#1e40af",
+    padding: "0.1rem 0.6rem",
+    borderRadius: "999px",
+    fontSize: "0.85rem",
+    fontWeight: "700",
+  },
+  slider: {
+    width: "100%",
+    accentColor: "#3b82f6",
+    cursor: "pointer",
+  },
+
+  // Tabla de roles
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "0.88rem",
+  },
+  th: {
+    textAlign: "left",
+    padding: "0.6rem 0.8rem",
+    color: "#374151",
+    fontSize: "0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    borderBottom: "1px solid rgba(0,0,0,0.08)",
+  },
+  td: {
+    padding: "0.75rem 0.8rem",
+    borderBottom: "1px solid rgba(0,0,0,0.04)",
+    color: "#374151",
+    verticalAlign: "middle",
+  },
+
+  // Badges de estado
+  badgeActive: {
+    background: "rgba(34,197,94,0.1)",
+    color: "#159b2b",
+    border: "1px solid rgba(34,197,94,0.2)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+  },
+  badgeInactive: {
+    background: "rgba(0,0,0,0.05)",
+    color: "#6b7280",
+    border: "1px solid rgba(0,0,0,0.1)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+  },
+  badgeAdmin: {
+    background: "rgba(168,85,247,0.1)",
+    color: "#7e22ce",
+    border: "1px solid rgba(168,85,247,0.2)",
+    borderRadius: "999px",
+    padding: "0.15rem 0.65rem",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+  },
+
+  // Toggle switch
+  toggleRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.7rem 0",
+    borderBottom: "1px solid rgba(0,0,0,0.05)",
+  },
+  toggleLabel: {
+    fontSize: "0.88rem",
+    color: "#1f2937",
+  },
+  toggleSub: {
+    fontSize: "0.78rem",
+    color: "#9ca3af",
+    marginTop: "0.1rem",
+  },
+
+  // Horario
+  scheduleGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gap: "0.4rem",
+    marginBottom: "1rem",
+  },
+  dayCell: {
+    textAlign: "center",
+    padding: "0.5rem 0.25rem",
+    borderRadius: "8px",
+    fontSize: "0.78rem",
+    cursor: "pointer",
+    border: "1px solid transparent",
+    transition: "all 0.2s",
+    fontWeight: "600",
+  },
+  dayCellActive: {
+    background: "rgba(59,130,246,0.1)",
+    border: "1px solid rgba(59,130,246,0.3)",
+    color: "#1e40af",
+  },
+  dayCellInactive: {
+    background: "#f3f4f6",
+    border: "1px solid rgba(0,0,0,0.08)",
+    color: "#9ca3af",
+  },
+
+  // Divider
+  divider: {
+    borderTop: "1px solid rgba(0,0,0,0.06)",
+    margin: "1.25rem 0",
+  },
+
+  // Icono decorativo en card header
+  iconBox: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "1rem",
+    flexShrink: 0,
+  },
+};
+
+// ─── Datos mock ─────────────────────────────────────────────────────────────────
+
+const MOCK_ROLES = [
+  { id: 1, nombre: "Administrador", permisos: "Total", usuarios: 3, estado: "activo" },
+  { id: 2, nombre: "Coordinador", permisos: "Parcial", usuarios: 8, estado: "activo" },
+  { id: 3, nombre: "Docente", permisos: "Lectura", usuarios: 42, estado: "activo" },
+  { id: 4, nombre: "Auxiliar", permisos: "Limitado", usuarios: 12, estado: "inactivo" },
+];
+
+const DIAS_SEMANA = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
+
+// ─── Subcomponente: Toggle ────────────────────────────────────────────────────
+
+function Toggle({ checked, onChange }) {
+  return (
+    <div
+      onClick={() => onChange(!checked)}
+      style={{
+        width: "42px",
+        height: "22px",
+        borderRadius: "999px",
+        background: checked ? "rgba(59,130,246,0.8)" : "rgba(209,213,219,0.8)",
+        border: checked ? "1px solid rgba(59,130,246,0.6)" : "1px solid rgba(0,0,0,0.12)",
+        position: "relative",
+        cursor: "pointer",
+        transition: "background 0.2s",
+        flexShrink: 0,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: "2px",
+          left: checked ? "21px" : "2px",
+          width: "16px",
+          height: "16px",
+          borderRadius: "50%",
+          background: "#fff",
+          transition: "left 0.2s",
+          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+        }}
+      />
+    </div>
+  );
+}
+
+// ─── Subcomponente: SectionCard ────────────────────────────────────────────────
+
+function SectionCard({ icon, title, desc, color = "#3b82f6", children }) {
+  return (
+    <div style={styles.card}>
+      <div style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", marginBottom: "1.25rem" }}>
+        <div style={{ ...styles.iconBox, background: `${color}22` }}>
+          <span>{icon}</span>
+        </div>
+        <div>
+          <h3 style={styles.cardTitle}>{title}</h3>
+          <p style={styles.cardDesc}>{desc}</p>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ─── Subcomponente: Badge de rol ───────────────────────────────────────────────
+
+function RolBadge({ permisos }) {
+  if (permisos === "Total") return <span style={styles.badgeAdmin}>{permisos}</span>;
+  if (permisos === "Parcial") return <span style={{ ...styles.badgeActive }}>{permisos}</span>;
+  return <span style={styles.badgeInactive}>{permisos}</span>;
+}
+
+// ─── COMPONENTE PRINCIPAL ──────────────────────────────────────────────────────
+
+export default function SystemConfig() {
+
+  // --- Estado: Ajustes Institucionales ---
+  const [institucion, setInstitucion] = useState({
+    nombre: "Instituto Tecnológico Nacional",
+    codigo: "ITN-2024",
+    zona: "America/Mexico_City",
+    idioma: "es",
+  });
+
+  // --- Estado: Tolerancia ---
+  const [tolerancia, setTolerancia] = useState({
+    entrada: 10,
+    salida: 5,
+    inasistencias: 3,
+  });
+
+  // --- Estado: Horario base ---
+  const [diasActivos, setDiasActivos] = useState([true, true, true, true, true, false, false]);
+  const [horaInicio, setHoraInicio] = useState("07:00");
+  const [horaFin, setHoraFin] = useState("18:00");
+  const [duracionBloque, setDuracionBloque] = useState("60");
+
+  // --- Estado: Roles ---
+  const [roles, setRoles] = useState(MOCK_ROLES);
+
+  // --- Estado: Notificaciones ---
+  const [notificaciones, setNotificaciones] = useState({
+    emailAsistencia: true,
+    emailReportes: true,
+    pushAlertas: false,
+    resumenDiario: true,
+    alertasFaltas: true,
+    notifDocentes: false,
+  });
+
+  // --- Handlers ---
+  const toggleDia = (idx) => {
+    const copia = [...diasActivos];
+    copia[idx] = !copia[idx];
+    setDiasActivos(copia);
+  };
+
+  const toggleRolEstado = (id) => {
+    setRoles(roles.map((r) =>
+      r.id === id ? { ...r, estado: r.estado === "activo" ? "inactivo" : "activo" } : r
+    ));
+  };
+
+  const toggleNotif = (key) => {
+    setNotificaciones((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  // ─── RENDER ────────────────────────────────────────────────────────────────
+
+  return (
+    <div style={styles.wrapper}>
+
+      {/* ── Encabezado del módulo ── */}
+      <header style={styles.header}>
+        <h1 style={styles.headerTitle}>Configuración del Sistema</h1>
+        <p style={styles.headerSubtitle}>
+          Administre los parámetros globales de operación institucional.
+        </p>
+      </header>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 1 & 2: Ajustes Institucionales + Tolerancia
+      ══════════════════════════════════════════════════════ */}
+      <div style={{ ...styles.grid, marginBottom: "1.5rem" }}>
+
+        {/* ── 1. Ajustes Institucionales ── */}
+        <SectionCard
+          icon="🏛️"
+          title="Ajustes Institucionales"
+          desc="Datos generales y configuración de la institución"
+          color="#3b82f6"
+        >
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Nombre de la institución</label>
+            <input
+              style={styles.input}
+              value={institucion.nombre}
+              onChange={(e) => setInstitucion({ ...institucion, nombre: e.target.value })}
+            />
+          </div>
+
+          <div style={styles.row}>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Código institucional</label>
+              <input
+                style={styles.input}
+                value={institucion.codigo}
+                onChange={(e) => setInstitucion({ ...institucion, codigo: e.target.value })}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Idioma</label>
+              <select
+                style={styles.select}
+                value={institucion.idioma}
+                onChange={(e) => setInstitucion({ ...institucion, idioma: e.target.value })}
+              >
+                <option value="es">Español</option>
+                <option value="en">English</option>
+                <option value="pt">Português</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Zona horaria</label>
+            <select
+              style={styles.select}
+              value={institucion.zona}
+              onChange={(e) => setInstitucion({ ...institucion, zona: e.target.value })}
+            >
+              <option value="America/Mexico_City">America/Mexico_City (UTC-6)</option>
+              <option value="America/Bogota">America/Bogota (UTC-5)</option>
+              <option value="America/Buenos_Aires">America/Buenos_Aires (UTC-3)</option>
+              <option value="America/Lima">America/Lima (UTC-5)</option>
+            </select>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Cancelar</button>
+            <button style={styles.btnPrimary}>Guardar cambios</button>
+          </div>
+        </SectionCard>
+
+        {/* ── 2. Configuración de Tolerancia ── */}
+        <SectionCard
+          icon="⏱️"
+          title="Configuración de Tolerancia"
+          desc="Límites de tiempo y ausencias permitidas"
+          color="#f59e0b"
+        >
+          {/* Slider: tolerancia de entrada */}
+          <div style={styles.sliderWrapper}>
+            <div style={styles.sliderRow}>
+              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de entrada</label>
+              <span style={styles.sliderValue}>{tolerancia.entrada} min</span>
+            </div>
+            <input
+              type="range" min={0} max={30} step={1}
+              value={tolerancia.entrada}
+              onChange={(e) => setTolerancia({ ...tolerancia, entrada: Number(e.target.value) })}
+              style={styles.slider}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
+              <span>0 min</span><span>30 min</span>
+            </div>
+          </div>
+
+          {/* Slider: tolerancia de salida */}
+          <div style={styles.sliderWrapper}>
+            <div style={styles.sliderRow}>
+              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de salida anticipada</label>
+              <span style={styles.sliderValue}>{tolerancia.salida} min</span>
+            </div>
+            <input
+              type="range" min={0} max={20} step={1}
+              value={tolerancia.salida}
+              onChange={(e) => setTolerancia({ ...tolerancia, salida: Number(e.target.value) })}
+              style={styles.slider}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
+              <span>0 min</span><span>20 min</span>
+            </div>
+          </div>
+
+          <div style={styles.divider} />
+
+          <div style={styles.fieldGroup}>
+            <label style={styles.label}>Inasistencias permitidas por período</label>
+            <select
+              style={styles.select}
+              value={tolerancia.inasistencias}
+              onChange={(e) => setTolerancia({ ...tolerancia, inasistencias: Number(e.target.value) })}
+            >
+              {[1, 2, 3, 4, 5, 6].map((n) => (
+                <option key={n} value={n}>{n} inasistencia{n > 1 ? "s" : ""}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Indicador visual */}
+          <div style={{
+            background: "rgba(245,158,11,0.08)",
+            border: "1px solid rgba(245,158,11,0.2)",
+            borderRadius: "8px",
+            padding: "0.75rem 1rem",
+            display: "flex",
+            gap: "0.5rem",
+            alignItems: "flex-start",
+          }}>
+            <span>⚠️</span>
+            <p style={{ margin: 0, fontSize: "0.8rem", color: "#92400e", lineHeight: "1.4" }}>
+              Los cambios en tolerancia afectarán los registros futuros. Los datos históricos no se modificarán.
+            </p>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Restablecer</button>
+            <button style={styles.btnPrimary}>Aplicar</button>
+          </div>
+        </SectionCard>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 3: Horario Base
+      ══════════════════════════════════════════════════════ */}
+      <div style={{ marginBottom: "1.5rem" }}>
+        <SectionCard
+          icon="📅"
+          title="Horario Base"
+          desc="Define los días y horas de operación del sistema"
+          color="#10b981"
+        >
+          <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Días laborables activos</p>
+          <div style={styles.scheduleGrid}>
+            {DIAS_SEMANA.map((dia, idx) => (
+              <div
+                key={dia}
+                onClick={() => toggleDia(idx)}
+                style={{
+                  ...styles.dayCell,
+                  ...(diasActivos[idx] ? styles.dayCellActive : styles.dayCellInactive),
+                }}
+              >
+                <div>{dia}</div>
+                <div style={{ fontSize: "0.65rem", marginTop: "0.2rem", opacity: 0.7 }}>
+                  {diasActivos[idx] ? "✓" : "—"}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div style={styles.divider} />
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Hora de inicio</label>
+              <input
+                type="time"
+                style={styles.input}
+                value={horaInicio}
+                onChange={(e) => setHoraInicio(e.target.value)}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Hora de cierre</label>
+              <input
+                type="time"
+                style={styles.input}
+                value={horaFin}
+                onChange={(e) => setHoraFin(e.target.value)}
+              />
+            </div>
+            <div style={styles.fieldGroup}>
+              <label style={styles.label}>Duración de bloque</label>
+              <select
+                style={styles.select}
+                value={duracionBloque}
+                onChange={(e) => setDuracionBloque(e.target.value)}
+              >
+                <option value="45">45 minutos</option>
+                <option value="60">60 minutos</option>
+                <option value="90">90 minutos</option>
+                <option value="120">120 minutos</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Cancelar</button>
+            <button style={styles.btnPrimary}>Guardar horario</button>
+          </div>
+        </SectionCard>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+          SECCIÓN 4 & 5: Roles + Notificaciones
+      ══════════════════════════════════════════════════════ */}
+      <div style={styles.grid}>
+
+        {/* ── 4. Gestión de Roles ── */}
+        <SectionCard
+          icon="🔑"
+          title="Gestión de Roles"
+          desc="Administre los roles y permisos del sistema"
+          color="#8b5cf6"
+        >
+          <table style={styles.table}>
+            <thead>
+              <tr>
+                <th style={styles.th}>Rol</th>
+                <th style={styles.th}>Permisos</th>
+                <th style={styles.th}>Usuarios</th>
+                <th style={styles.th}>Estado</th>
+                <th style={styles.th}>Acción</th>
+              </tr>
+            </thead>
+            <tbody>
+              {roles.map((rol) => (
+                <tr key={rol.id}>
+                  <td style={styles.td}>
+                    <span style={{ fontWeight: "600", color: "#1f2937" }}>{rol.nombre}</span>
+                  </td>
+                  <td style={styles.td}>
+                    <RolBadge permisos={rol.permisos} />
+                  </td>
+                  <td style={styles.td}>
+                    <span style={{ color: "#374151" }}>{rol.usuarios}</span>
+                  </td>
+                  <td style={styles.td}>
+                    {rol.estado === "activo"
+                      ? <span style={styles.badgeActive}>Activo</span>
+                      : <span style={styles.badgeInactive}>Inactivo</span>
+                    }
+                  </td>
+                  <td style={styles.td}>
+                    <button
+                      style={styles.btnDanger}
+                      onClick={() => toggleRolEstado(rol.id)}
+                    >
+                      {rol.estado === "activo" ? "Deshabilitar" : "Habilitar"}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnPrimary}>+ Nuevo rol</button>
+          </div>
+        </SectionCard>
+
+        {/* ── 5. Preferencias de Notificación ── */}
+        <SectionCard
+          icon="🔔"
+          title="Preferencias de Notificación"
+          desc="Configure qué alertas y notificaciones desea recibir"
+          color="#ec4899"
+        >
+          {[
+            { key: "emailAsistencia", label: "Notificaciones de asistencia", sub: "Email al registrar una asistencia" },
+            { key: "emailReportes", label: "Reportes periódicos", sub: "Resúmenes semanales por correo" },
+            { key: "pushAlertas", label: "Alertas push", sub: "Notificaciones en el navegador" },
+            { key: "resumenDiario", label: "Resumen diario", sub: "Email con el resumen del día" },
+            { key: "alertasFaltas", label: "Alertas por faltas excesivas", sub: "Notificar al superar el límite" },
+            { key: "notifDocentes", label: "Notificar a docentes", sub: "Avisar al docente sobre ausencias" },
+          ].map(({ key, label, sub }) => (
+            <div key={key} style={styles.toggleRow}>
+              <div>
+                <div style={styles.toggleLabel}>{label}</div>
+                <div style={styles.toggleSub}>{sub}</div>
+              </div>
+              <Toggle
+                checked={notificaciones[key]}
+                onChange={() => toggleNotif(key)}
+              />
+            </div>
+          ))}
+
+          <div style={styles.btnActions}>
+            <button style={styles.btnSecondary}>Restablecer</button>
+            <button style={styles.btnPrimary}>Guardar preferencias</button>
+          </div>
+        </SectionCard>
+      </div>
+
+     
+    </div>
+  );
+}
\ No newline at end of file

From 950597df27896d7a04323b6e969784acff2825c1 Mon Sep 17 00:00:00 2001
From: Alejandro Arias <00835181@red.unid.mx>
Date: Thu, 26 Feb 2026 20:31:42 -0500
Subject: [PATCH 15/46] cambios en Systemconfig

---
 src/components/Sidebar.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 06fd423..1579e03 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -23,10 +23,7 @@ function Sidebar(){
                     <Link to="/teachers" className='hover:text-sky-400 transition'>Maestros</Link>
                     <Link to="/clock" className='hover:text-sky-400 transition'>Reloj</Link>
                     <Link to="/reports" className='hover:text-sky-400 transition'>Reportes</Link>
-                    <NavLink to="/Systemconfig" className='hover:text-sky-400 transition'>Configuración</NavLink>
-                    <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Configuración</span></Link>
+                    <Link to="/sistemaconfig" className='hover:text-sky-400 transition'>Configuración</Link>
                  </nav>
               </div>
             

From fa75692609b5b05bfd30cdc3286cbfa9e928f87c Mon Sep 17 00:00:00 2001
From: Alejandro Arias <00835181@red.unid.mx>
Date: Thu, 26 Feb 2026 20:40:55 -0500
Subject: [PATCH 16/46] cambios en Systemconfig

---
 src/App.jsx                                       | 2 +-
 src/pages/{SystemConfig.jsx => SistemaConfig.jsx} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/pages/{SystemConfig.jsx => SistemaConfig.jsx} (100%)

diff --git a/src/App.jsx b/src/App.jsx
index 6246ce3..ba1c759 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,7 +9,7 @@ import Dashboard from "./pages/Dashboard"
 import Teachers from "./pages/Teachers"
 import Clock from "./pages/Clock"
 import Reports from "./pages/Reports"
-import SystemConfig from "./pages/SystemConfig"
+import SystemConfig from "./pages/SistemaConfig"
 
 
 function App() {
diff --git a/src/pages/SystemConfig.jsx b/src/pages/SistemaConfig.jsx
similarity index 100%
rename from src/pages/SystemConfig.jsx
rename to src/pages/SistemaConfig.jsx

From cd577c5e9180d46922a8988194ced278aa78782e Mon Sep 17 00:00:00 2001
From: Nestor Alejandro <00856217@red.unid.mx>
Date: Thu, 26 Feb 2026 21:29:14 -0500
Subject: [PATCH 17/46] cambios sidebar

---
 src/components/Sidebar.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 794df86..851acc9 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -7,6 +7,7 @@
  * - Tailwind CSS IntelliSense (para autocompletado de clases)
  * - ES7+ React/Redux/React-Native snippets
  */
+//archivo: src/components/Sidebar.jsx
 
 import { useState } from 'react';
 import { Link } from 'react-router-dom';

From 57cf8cce8c8c122a79292ad0b014866cbca1002d Mon Sep 17 00:00:00 2001
From: arlinchc <ichan@agiconsultores.com>
Date: Thu, 26 Feb 2026 21:34:18 -0500
Subject: [PATCH 18/46] Delete src/components/Sidebar.jsx

---
 src/components/Sidebar.jsx | 89 --------------------------------------
 1 file changed, 89 deletions(-)
 delete mode 100644 src/components/Sidebar.jsx

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
deleted file mode 100644
index 981c8a3..0000000
--- a/src/components/Sidebar.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import {Link, NavLink} from 'react-router-dom'
-
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { 
-    HomeIcon, 
-    InformationCircleIcon, 
-    PhoneIcon, 
-    Squares2X2Icon, 
-    UserGroupIcon, 
-    ClockIcon, 
-    DocumentChartBarIcon, 
-    Bars3Icon, 
-    MagnifyingGlassIcon, 
-    ArrowLeftOnRectangleIcon, 
-    UserCircleIcon,
-    Cog6ToothIcon // Icono de engranaje para Configuración
-} from '@heroicons/react/24/outline';
-
-function Sidebar() {
-    // Estado para colapsar/expandir el sidebar
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    const iconSize = 'h-5 w-5';
-
-    return (
-        /* CONTENEDOR PRINCIPAL 
-           - bg-[#1a1a32]: Azul Marino Institucional
-           - border-white/10: Borde sutil para separar del contenido
-        */
-        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
-            
-            {/* 1. CABECERA (Logo y botón de colapsar) */}
-            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
-                {!isCollapsed && (
-                    <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
-                        Reloj Checador
-                    </h2>
-                )}
-                <button 
-                    onClick={() => setIsCollapsed(!isCollapsed)}
-                    className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
-                    title={isCollapsed ? "Expandir" : "Colapsar"}
-                >
-                    <Bars3Icon className="h-8 w-8" />
-                </button>
-            </div>
-           
-           {/*Seccion administrativa*/}
-              <div className='mt-6'>
-                 <p className='text-slate-400 text-sm mb-2 uppercase tracking-wide'>Administracion</p>
-                 <nav className='flex flex-col gap-3'>
-                    <Link to="/admin" className='hover:text-sky-400 transition'>Dashboard</Link>
-                    <Link to="/teachers" className='hover:text-sky-400 transition'>Maestros</Link>
-                    <Link to="/clock" className='hover:text-sky-400 transition'>Reloj</Link>
-                    <Link to="/reports" className='hover:text-sky-400 transition'>Reportes</Link>
-                     <Link to="/horarios" className='hover:text-sky-400 transition'>Horario</Link>
-                 </nav>
-              </div>
-            
-            {/* Si está colapsado, empuja el botón de salida al final */}
-            {isCollapsed && <div className='flex-1' />}
-
-            {/* 5. FOOTER (Cerrar Sesión e Info Institucional) */}
-            <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
-                {!isCollapsed ? (
-                    <>
-                        <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
-                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} />
-                            <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
-                                Cerrar Sesión
-                            </span>
-                        </button>
-                        <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
-                             Universidad UNID <br />
-                             Playa del Carmen • Admin
-                        </div>
-                    </>
-                ) : (
-                    /* Icono de salida simplificado cuando está colapsado */
-                    <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
-                        <ArrowLeftOnRectangleIcon className={iconSize} />
-                    </button>
-                )}
-            </div>            
-        </aside>
-    );
-}
-
-export default Sidebar;
\ No newline at end of file

From 18dfc7adc770d636e188d2b888470d65b37a569b Mon Sep 17 00:00:00 2001
From: arlinchc <ichan@agiconsultores.com>
Date: Thu, 26 Feb 2026 21:34:40 -0500
Subject: [PATCH 19/46] Add files via upload

---
 src/components/Sidebar.jsx | 157 +++++++++++++++++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 src/components/Sidebar.jsx

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
new file mode 100644
index 0000000..794df86
--- /dev/null
+++ b/src/components/Sidebar.jsx
@@ -0,0 +1,157 @@
+/**
+ * INSTRUCCIONES DE INSTALACIÓN:
+ * 1. Instalar Heroicons: npm install @heroicons/react
+ * 2. Instalar React Router: npm install react-router-dom
+ * 3. Tener configurado Tailwind CSS en el proyecto.
+ * * EXTENSIONES RECOMENDADAS EN VS CODE:
+ * - Tailwind CSS IntelliSense (para autocompletado de clases)
+ * - ES7+ React/Redux/React-Native snippets
+ */
+
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { 
+    HomeIcon, 
+    InformationCircleIcon, 
+    PhoneIcon, 
+    Squares2X2Icon, 
+    UserGroupIcon, 
+    ClockIcon, 
+    DocumentChartBarIcon, 
+    Bars3Icon, 
+    MagnifyingGlassIcon, 
+    ArrowLeftOnRectangleIcon, 
+    UserCircleIcon,
+    Cog6ToothIcon // Icono de engranaje para Configuración
+} from '@heroicons/react/24/outline';
+
+function Sidebar() {
+    // Estado para colapsar/expandir el sidebar
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const iconSize = 'h-5 w-5';
+
+    return (
+        /* CONTENEDOR PRINCIPAL 
+           - bg-[#1a1a32]: Azul Marino Institucional
+           - border-white/10: Borde sutil para separar del contenido
+        */
+        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
+            
+            {/* 1. CABECERA (Logo y botón de colapsar) */}
+            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
+                {!isCollapsed && (
+                    <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
+                        Reloj Checador
+                    </h2>
+                )}
+                <button 
+                    onClick={() => setIsCollapsed(!isCollapsed)}
+                    className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
+                    title={isCollapsed ? "Expandir" : "Colapsar"}
+                >
+                    <Bars3Icon className="h-8 w-8" />
+                </button>
+            </div>
+
+            {!isCollapsed && (
+                <>
+                    {/* 2. PERFIL DE USUARIO Y BUSCADOR */}
+                    <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
+                        <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
+                        <div>
+                            <p className="text-xs font-bold truncate">Admin UNID</p>
+                            <p className="text-[10px] text-slate-400">En línea</p>
+                        </div>
+                    </div>
+
+                    <div className='relative mb-8 px-1'>
+                        <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
+                        <input 
+                            type="text" 
+                            placeholder="Buscar..." 
+                            className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
+                        />
+                    </div>
+
+                    {/* 3. SECCIÓN SITIO (Navegación Pública) */}
+                    <div className='mb-6'>   
+                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Sitio</p>
+                        <nav className='flex flex-col gap-5'>
+                            <Link to="/" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <HomeIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Inicio</span>
+                            </Link>
+                            <Link to="/about" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Acerca de</span>
+                            </Link>
+                            <Link to="/contact" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <PhoneIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Contacto</span>
+                            </Link>
+                        </nav>
+                    </div>
+
+                    {/* ESPACIADOR FLEXIBLE */}
+                    <div className='flex-1' />
+                    
+                    {/* 4. SECCIÓN ADMINISTRATIVA (Gestión y Configuración) */}
+                    <div className='mt-4 mb-8'>
+                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Administración</p>
+                        <nav className='flex flex-col gap-5'>
+                            <Link to="/admin" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Dashboard</span>
+                            </Link>
+                            <Link to="/teachers" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <UserGroupIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Maestros</span>
+                            </Link>
+                            <Link to="/clock" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <ClockIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Reloj</span>
+                            </Link>
+                            <Link to="/reports" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Reportes</span>
+                            </Link>
+                            {/* NUEVO: Enlace a la página de Configuración */}
+                            <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Configuración</span>
+                            </Link>
+                        </nav>
+                    </div>
+                </>
+            )}
+            
+            {/* Si está colapsado, empuja el botón de salida al final */}
+            {isCollapsed && <div className='flex-1' />}
+
+            {/* 5. FOOTER (Cerrar Sesión e Info Institucional) */}
+            <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
+                {!isCollapsed ? (
+                    <>
+                        <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
+                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} />
+                            <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
+                                Cerrar Sesión
+                            </span>
+                        </button>
+                        <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
+                             Universidad UNID <br />
+                             Playa del Carmen • Admin
+                        </div>
+                    </>
+                ) : (
+                    /* Icono de salida simplificado cuando está colapsado */
+                    <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
+                        <ArrowLeftOnRectangleIcon className={iconSize} />
+                    </button>
+                )}
+            </div>            
+        </aside>
+    );
+}
+
+export default Sidebar;
\ No newline at end of file

From 4efc8dcb4e66c8fa0aeb4b364a2cf8f78556cada Mon Sep 17 00:00:00 2001
From: arlinchc <ichan@agiconsultores.com>
Date: Thu, 26 Feb 2026 21:40:56 -0500
Subject: [PATCH 20/46] Delete src/components/Sidebar.jsx

---
 src/components/Sidebar.jsx | 157 -------------------------------------
 1 file changed, 157 deletions(-)
 delete mode 100644 src/components/Sidebar.jsx

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
deleted file mode 100644
index 794df86..0000000
--- a/src/components/Sidebar.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * INSTRUCCIONES DE INSTALACIÓN:
- * 1. Instalar Heroicons: npm install @heroicons/react
- * 2. Instalar React Router: npm install react-router-dom
- * 3. Tener configurado Tailwind CSS en el proyecto.
- * * EXTENSIONES RECOMENDADAS EN VS CODE:
- * - Tailwind CSS IntelliSense (para autocompletado de clases)
- * - ES7+ React/Redux/React-Native snippets
- */
-
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { 
-    HomeIcon, 
-    InformationCircleIcon, 
-    PhoneIcon, 
-    Squares2X2Icon, 
-    UserGroupIcon, 
-    ClockIcon, 
-    DocumentChartBarIcon, 
-    Bars3Icon, 
-    MagnifyingGlassIcon, 
-    ArrowLeftOnRectangleIcon, 
-    UserCircleIcon,
-    Cog6ToothIcon // Icono de engranaje para Configuración
-} from '@heroicons/react/24/outline';
-
-function Sidebar() {
-    // Estado para colapsar/expandir el sidebar
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    const iconSize = 'h-5 w-5';
-
-    return (
-        /* CONTENEDOR PRINCIPAL 
-           - bg-[#1a1a32]: Azul Marino Institucional
-           - border-white/10: Borde sutil para separar del contenido
-        */
-        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
-            
-            {/* 1. CABECERA (Logo y botón de colapsar) */}
-            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
-                {!isCollapsed && (
-                    <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
-                        Reloj Checador
-                    </h2>
-                )}
-                <button 
-                    onClick={() => setIsCollapsed(!isCollapsed)}
-                    className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
-                    title={isCollapsed ? "Expandir" : "Colapsar"}
-                >
-                    <Bars3Icon className="h-8 w-8" />
-                </button>
-            </div>
-
-            {!isCollapsed && (
-                <>
-                    {/* 2. PERFIL DE USUARIO Y BUSCADOR */}
-                    <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
-                        <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
-                        <div>
-                            <p className="text-xs font-bold truncate">Admin UNID</p>
-                            <p className="text-[10px] text-slate-400">En línea</p>
-                        </div>
-                    </div>
-
-                    <div className='relative mb-8 px-1'>
-                        <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
-                        <input 
-                            type="text" 
-                            placeholder="Buscar..." 
-                            className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
-                        />
-                    </div>
-
-                    {/* 3. SECCIÓN SITIO (Navegación Pública) */}
-                    <div className='mb-6'>   
-                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Sitio</p>
-                        <nav className='flex flex-col gap-5'>
-                            <Link to="/" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <HomeIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Inicio</span>
-                            </Link>
-                            <Link to="/about" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Acerca de</span>
-                            </Link>
-                            <Link to="/contact" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <PhoneIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Contacto</span>
-                            </Link>
-                        </nav>
-                    </div>
-
-                    {/* ESPACIADOR FLEXIBLE */}
-                    <div className='flex-1' />
-                    
-                    {/* 4. SECCIÓN ADMINISTRATIVA (Gestión y Configuración) */}
-                    <div className='mt-4 mb-8'>
-                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Administración</p>
-                        <nav className='flex flex-col gap-5'>
-                            <Link to="/admin" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Dashboard</span>
-                            </Link>
-                            <Link to="/teachers" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <UserGroupIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Maestros</span>
-                            </Link>
-                            <Link to="/clock" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <ClockIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Reloj</span>
-                            </Link>
-                            <Link to="/reports" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Reportes</span>
-                            </Link>
-                            {/* NUEVO: Enlace a la página de Configuración */}
-                            <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Configuración</span>
-                            </Link>
-                        </nav>
-                    </div>
-                </>
-            )}
-            
-            {/* Si está colapsado, empuja el botón de salida al final */}
-            {isCollapsed && <div className='flex-1' />}
-
-            {/* 5. FOOTER (Cerrar Sesión e Info Institucional) */}
-            <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
-                {!isCollapsed ? (
-                    <>
-                        <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
-                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} />
-                            <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
-                                Cerrar Sesión
-                            </span>
-                        </button>
-                        <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
-                             Universidad UNID <br />
-                             Playa del Carmen • Admin
-                        </div>
-                    </>
-                ) : (
-                    /* Icono de salida simplificado cuando está colapsado */
-                    <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
-                        <ArrowLeftOnRectangleIcon className={iconSize} />
-                    </button>
-                )}
-            </div>            
-        </aside>
-    );
-}
-
-export default Sidebar;
\ No newline at end of file

From b131c19302df0c267ea971118a7d5499b4c1089b Mon Sep 17 00:00:00 2001
From: arlinchc <ichan@agiconsultores.com>
Date: Thu, 26 Feb 2026 21:41:15 -0500
Subject: [PATCH 21/46] Delete src/components/Sidebar.jsx

---
 src/components/Sidebar.jsx | 157 -------------------------------------
 1 file changed, 157 deletions(-)
 delete mode 100644 src/components/Sidebar.jsx

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
deleted file mode 100644
index 794df86..0000000
--- a/src/components/Sidebar.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * INSTRUCCIONES DE INSTALACIÓN:
- * 1. Instalar Heroicons: npm install @heroicons/react
- * 2. Instalar React Router: npm install react-router-dom
- * 3. Tener configurado Tailwind CSS en el proyecto.
- * * EXTENSIONES RECOMENDADAS EN VS CODE:
- * - Tailwind CSS IntelliSense (para autocompletado de clases)
- * - ES7+ React/Redux/React-Native snippets
- */
-
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { 
-    HomeIcon, 
-    InformationCircleIcon, 
-    PhoneIcon, 
-    Squares2X2Icon, 
-    UserGroupIcon, 
-    ClockIcon, 
-    DocumentChartBarIcon, 
-    Bars3Icon, 
-    MagnifyingGlassIcon, 
-    ArrowLeftOnRectangleIcon, 
-    UserCircleIcon,
-    Cog6ToothIcon // Icono de engranaje para Configuración
-} from '@heroicons/react/24/outline';
-
-function Sidebar() {
-    // Estado para colapsar/expandir el sidebar
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    const iconSize = 'h-5 w-5';
-
-    return (
-        /* CONTENEDOR PRINCIPAL 
-           - bg-[#1a1a32]: Azul Marino Institucional
-           - border-white/10: Borde sutil para separar del contenido
-        */
-        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
-            
-            {/* 1. CABECERA (Logo y botón de colapsar) */}
-            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
-                {!isCollapsed && (
-                    <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
-                        Reloj Checador
-                    </h2>
-                )}
-                <button 
-                    onClick={() => setIsCollapsed(!isCollapsed)}
-                    className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
-                    title={isCollapsed ? "Expandir" : "Colapsar"}
-                >
-                    <Bars3Icon className="h-8 w-8" />
-                </button>
-            </div>
-
-            {!isCollapsed && (
-                <>
-                    {/* 2. PERFIL DE USUARIO Y BUSCADOR */}
-                    <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
-                        <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
-                        <div>
-                            <p className="text-xs font-bold truncate">Admin UNID</p>
-                            <p className="text-[10px] text-slate-400">En línea</p>
-                        </div>
-                    </div>
-
-                    <div className='relative mb-8 px-1'>
-                        <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
-                        <input 
-                            type="text" 
-                            placeholder="Buscar..." 
-                            className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
-                        />
-                    </div>
-
-                    {/* 3. SECCIÓN SITIO (Navegación Pública) */}
-                    <div className='mb-6'>   
-                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Sitio</p>
-                        <nav className='flex flex-col gap-5'>
-                            <Link to="/" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <HomeIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Inicio</span>
-                            </Link>
-                            <Link to="/about" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Acerca de</span>
-                            </Link>
-                            <Link to="/contact" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <PhoneIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Contacto</span>
-                            </Link>
-                        </nav>
-                    </div>
-
-                    {/* ESPACIADOR FLEXIBLE */}
-                    <div className='flex-1' />
-                    
-                    {/* 4. SECCIÓN ADMINISTRATIVA (Gestión y Configuración) */}
-                    <div className='mt-4 mb-8'>
-                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Administración</p>
-                        <nav className='flex flex-col gap-5'>
-                            <Link to="/admin" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Dashboard</span>
-                            </Link>
-                            <Link to="/teachers" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <UserGroupIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Maestros</span>
-                            </Link>
-                            <Link to="/clock" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <ClockIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Reloj</span>
-                            </Link>
-                            <Link to="/reports" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Reportes</span>
-                            </Link>
-                            {/* NUEVO: Enlace a la página de Configuración */}
-                            <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
-                                <span className='text-sm font-medium'>Configuración</span>
-                            </Link>
-                        </nav>
-                    </div>
-                </>
-            )}
-            
-            {/* Si está colapsado, empuja el botón de salida al final */}
-            {isCollapsed && <div className='flex-1' />}
-
-            {/* 5. FOOTER (Cerrar Sesión e Info Institucional) */}
-            <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
-                {!isCollapsed ? (
-                    <>
-                        <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
-                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} />
-                            <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
-                                Cerrar Sesión
-                            </span>
-                        </button>
-                        <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
-                             Universidad UNID <br />
-                             Playa del Carmen • Admin
-                        </div>
-                    </>
-                ) : (
-                    /* Icono de salida simplificado cuando está colapsado */
-                    <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
-                        <ArrowLeftOnRectangleIcon className={iconSize} />
-                    </button>
-                )}
-            </div>            
-        </aside>
-    );
-}
-
-export default Sidebar;
\ No newline at end of file

From d4b40aec546e86a3a0c70a9f03cd05618db636ea Mon Sep 17 00:00:00 2001
From: Nestor Alejandro <00856217@red.unid.mx>
Date: Thu, 26 Feb 2026 21:42:21 -0500
Subject: [PATCH 22/46] nuevo sidebar

---
 src/components/Sidebar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 851acc9..ac2fb66 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -8,7 +8,7 @@
  * - ES7+ React/Redux/React-Native snippets
  */
 //archivo: src/components/Sidebar.jsx
-
+//nuevo sidebar
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { 

From 61a2e3d073b48e93a3e5e14e796fc68f86538025 Mon Sep 17 00:00:00 2001
From: arlinchc <ichan@agiconsultores.com>
Date: Thu, 26 Feb 2026 21:54:54 -0500
Subject: [PATCH 23/46] Add files via upload

---
 src/components/Sidebar (1).jsx | 158 +++++++++++++++++++++++++++++++++
 1 file changed, 158 insertions(+)
 create mode 100644 src/components/Sidebar (1).jsx

diff --git a/src/components/Sidebar (1).jsx b/src/components/Sidebar (1).jsx
new file mode 100644
index 0000000..ac2fb66
--- /dev/null
+++ b/src/components/Sidebar (1).jsx	
@@ -0,0 +1,158 @@
+/**
+ * INSTRUCCIONES DE INSTALACIÓN:
+ * 1. Instalar Heroicons: npm install @heroicons/react
+ * 2. Instalar React Router: npm install react-router-dom
+ * 3. Tener configurado Tailwind CSS en el proyecto.
+ * * EXTENSIONES RECOMENDADAS EN VS CODE:
+ * - Tailwind CSS IntelliSense (para autocompletado de clases)
+ * - ES7+ React/Redux/React-Native snippets
+ */
+//archivo: src/components/Sidebar.jsx
+//nuevo sidebar
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { 
+    HomeIcon, 
+    InformationCircleIcon, 
+    PhoneIcon, 
+    Squares2X2Icon, 
+    UserGroupIcon, 
+    ClockIcon, 
+    DocumentChartBarIcon, 
+    Bars3Icon, 
+    MagnifyingGlassIcon, 
+    ArrowLeftOnRectangleIcon, 
+    UserCircleIcon,
+    Cog6ToothIcon // Icono de engranaje para Configuración
+} from '@heroicons/react/24/outline';
+
+function Sidebar() {
+    // Estado para colapsar/expandir el sidebar
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const iconSize = 'h-5 w-5';
+
+    return (
+        /* CONTENEDOR PRINCIPAL 
+           - bg-[#1a1a32]: Azul Marino Institucional
+           - border-white/10: Borde sutil para separar del contenido
+        */
+        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
+            
+            {/* 1. CABECERA (Logo y botón de colapsar) */}
+            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
+                {!isCollapsed && (
+                    <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
+                        Reloj Checador
+                    </h2>
+                )}
+                <button 
+                    onClick={() => setIsCollapsed(!isCollapsed)}
+                    className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
+                    title={isCollapsed ? "Expandir" : "Colapsar"}
+                >
+                    <Bars3Icon className="h-8 w-8" />
+                </button>
+            </div>
+
+            {!isCollapsed && (
+                <>
+                    {/* 2. PERFIL DE USUARIO Y BUSCADOR */}
+                    <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
+                        <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
+                        <div>
+                            <p className="text-xs font-bold truncate">Admin UNID</p>
+                            <p className="text-[10px] text-slate-400">En línea</p>
+                        </div>
+                    </div>
+
+                    <div className='relative mb-8 px-1'>
+                        <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
+                        <input 
+                            type="text" 
+                            placeholder="Buscar..." 
+                            className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
+                        />
+                    </div>
+
+                    {/* 3. SECCIÓN SITIO (Navegación Pública) */}
+                    <div className='mb-6'>   
+                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Sitio</p>
+                        <nav className='flex flex-col gap-5'>
+                            <Link to="/" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <HomeIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Inicio</span>
+                            </Link>
+                            <Link to="/about" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Acerca de</span>
+                            </Link>
+                            <Link to="/contact" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <PhoneIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Contacto</span>
+                            </Link>
+                        </nav>
+                    </div>
+
+                    {/* ESPACIADOR FLEXIBLE */}
+                    <div className='flex-1' />
+                    
+                    {/* 4. SECCIÓN ADMINISTRATIVA (Gestión y Configuración) */}
+                    <div className='mt-4 mb-8'>
+                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Administración</p>
+                        <nav className='flex flex-col gap-5'>
+                            <Link to="/admin" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Dashboard</span>
+                            </Link>
+                            <Link to="/teachers" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <UserGroupIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Maestros</span>
+                            </Link>
+                            <Link to="/clock" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <ClockIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Reloj</span>
+                            </Link>
+                            <Link to="/reports" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Reportes</span>
+                            </Link>
+                            {/* NUEVO: Enlace a la página de Configuración */}
+                            <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <span className='text-sm font-medium'>Configuración</span>
+                            </Link>
+                        </nav>
+                    </div>
+                </>
+            )}
+            
+            {/* Si está colapsado, empuja el botón de salida al final */}
+            {isCollapsed && <div className='flex-1' />}
+
+            {/* 5. FOOTER (Cerrar Sesión e Info Institucional) */}
+            <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
+                {!isCollapsed ? (
+                    <>
+                        <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
+                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} />
+                            <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
+                                Cerrar Sesión
+                            </span>
+                        </button>
+                        <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
+                             Universidad UNID <br />
+                             Playa del Carmen • Admin
+                        </div>
+                    </>
+                ) : (
+                    /* Icono de salida simplificado cuando está colapsado */
+                    <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
+                        <ArrowLeftOnRectangleIcon className={iconSize} />
+                    </button>
+                )}
+            </div>            
+        </aside>
+    );
+}
+
+export default Sidebar;
\ No newline at end of file

From f0ee0c060d790894db746567e9b7ca41c603b515 Mon Sep 17 00:00:00 2001
From: arlinchc <ichan@agiconsultores.com>
Date: Thu, 26 Feb 2026 21:55:59 -0500
Subject: [PATCH 24/46] Rename Sidebar (1).jsx to Sidebar.jsx

---
 src/components/{Sidebar (1).jsx => Sidebar.jsx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/components/{Sidebar (1).jsx => Sidebar.jsx} (99%)

diff --git a/src/components/Sidebar (1).jsx b/src/components/Sidebar.jsx
similarity index 99%
rename from src/components/Sidebar (1).jsx
rename to src/components/Sidebar.jsx
index ac2fb66..c297300 100644
--- a/src/components/Sidebar (1).jsx	
+++ b/src/components/Sidebar.jsx
@@ -155,4 +155,4 @@ function Sidebar() {
     );
 }
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;

From 829f0d85bfe5ef110d211d3a0d9a11d97351c618 Mon Sep 17 00:00:00 2001
From: dpalik500 <dpalik500@gmail.com>
Date: Thu, 5 Mar 2026 19:36:56 -0500
Subject: [PATCH 25/46] Add .env file

---
 .env | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 0000000..15aeb4a
--- /dev/null
+++ b/.env
@@ -0,0 +1,5 @@
+DB_HOST="72.56.71.92"
+DB_PORT="5433"
+DB_USER="student"
+DB_PASSWORD="qL8jZQlj6YSLV4zpXaVw"
+DB_NAME="unid"

From 04cc212830d05cb655290ce17f13338b88b96224 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Thu, 5 Mar 2026 19:56:31 -0500
Subject: [PATCH 26/46] Correcciones en Sidebar

---
 src/components/Sidebar.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 981c8a3..c79724e 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,7 +1,6 @@
 import {Link, NavLink} from 'react-router-dom'
 
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
 import { 
     HomeIcon, 
     InformationCircleIcon, 

From b6005b47a590f60d1b708d3a4879cd97aab6717e Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Thu, 5 Mar 2026 20:39:52 -0500
Subject: [PATCH 27/46] Actualiza dependencias y modulo Reports

---
 package-lock.json                             | 11 ++-
 package.json                                  |  2 +
 src/App.jsx                                   | 17 ++--
 src/components/Sidebar.jsx                    | 99 +++++++++++--------
 .../{SistemaConfig.jsx => SystemConfig.jsx}   |  0
 5 files changed, 76 insertions(+), 53 deletions(-)
 rename src/pages/{SistemaConfig.jsx => SystemConfig.jsx} (100%)

diff --git a/package-lock.json b/package-lock.json
index 1211954..a5462e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "license": "ISC",
       "dependencies": {
         "@heroicons/react": "^2.2.0",
+        "jspdf": "^4.2.0",
+        "jspdf-autotable": "^5.0.7",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.13.0"
@@ -2067,11 +2069,14 @@
       "license": "MIT"
     },
     "node_modules/dompurify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
-      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.2.tgz",
+      "integrity": "sha512-6obghkliLdmKa56xdbLOpUZ43pAR6xFy1uOrxBaIDjT+yaRuuybLjGS9eVBoSR/UPU5fq3OXClEHLJNGvbxKpQ==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optional": true,
+      "engines": {
+        "node": ">=20"
+      },
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
diff --git a/package.json b/package.json
index 60df798..1af77cb 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "jspdf": "^4.2.0",
+    "jspdf-autotable": "^5.0.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.13.0"
diff --git a/src/App.jsx b/src/App.jsx
index 1dca8c7..036e764 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,8 @@
-import ScheduleModule from "./modules/schedule/index.jsx";
 
-{/* Maquetar sidebar siempre visible con todas rutas - publicas y administrativas*/}
+
+// Maquetar sidebar siempre visible con todas rutas - publicas y administrativas
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import Sidebar from "./components/Sidebar"
-
 import Home from "./pages/Home"
 import About from "./pages/About"
 import Contact from "./pages/Contact"
@@ -11,15 +10,17 @@ import Dashboard from "./pages/Dashboard"
 import Teachers from "./pages/Teachers"
 import Clock from "./pages/Clock"
 import Reports from "./pages/Reports"
-import SystemConfig from "./pages/sistemaconfig"
+import SystemConfig from "./pages/SystemConfig"
+import ScheduleModule from "./modules/schedule/index.jsx";
 
 
 function App() {
   return(
     <BrowserRouter>
-     {/*Layout Principal side bar siempre visible a pantalla completa*/}
+     {/* Layout Principal side bar siempre visible a pantalla completa */}
      <div className="flex min-h-screen bg-slate-100">
         <Sidebar />
+
         <main className="flex-1 p-10 overflow-y-auto">
           <Routes>
             <Route path="/" element={<Home />} />
@@ -29,12 +30,14 @@ function App() {
             <Route path="/teachers" element={<Teachers />} />
             <Route path="/clock" element={<Clock />} />
             <Route path="/reports" element={<Reports />} />
-            <Route path="/horarios/*" element={<ScheduleModule  />} />
+            <Route path="/config" element={<SystemConfig />} />
+            <Route path="/horarios/*" element={<ScheduleModule />} />
           </Routes>
         </main>
+
       </div>
     </BrowserRouter>
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index ea8143d..2e3ac37 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,15 +1,8 @@
-/**
- * INSTRUCCIONES DE INSTALACIÓN:
- * 1. Instalar Heroicons: npm install @heroicons/react
- * 2. Instalar React Router: npm install react-router-dom
- * 3. Tener configurado Tailwind CSS en el proyecto.
- * * EXTENSIONES RECOMENDADAS EN VS CODE:
- * - Tailwind CSS IntelliSense (para autocompletado de clases)
- * - ES7+ React/Redux/React-Native snippets
- */
-//archivo: src/components/Sidebar.jsx
-//nuevo sidebar
+// archivo: src/components/Sidebar.jsx
+
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
 import { 
     HomeIcon, 
     InformationCircleIcon, 
@@ -18,36 +11,34 @@ import {
     UserGroupIcon, 
     ClockIcon, 
     DocumentChartBarIcon, 
+    CalendarDaysIcon,   // NUEVO ICONO
     Bars3Icon, 
     MagnifyingGlassIcon, 
     ArrowLeftOnRectangleIcon, 
     UserCircleIcon,
-    Cog6ToothIcon // Icono de engranaje para Configuración
+    Cog6ToothIcon
 } from '@heroicons/react/24/outline';
 
 function Sidebar() {
-    // Estado para colapsar/expandir el sidebar
+
     const [isCollapsed, setIsCollapsed] = useState(false);
     const iconSize = 'h-5 w-5';
 
     return (
-        /* CONTENEDOR PRINCIPAL 
-           - bg-[#1a1a32]: Azul Marino Institucional
-           - border-white/10: Borde sutil para separar del contenido
-        */
+
         <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
-            
-            {/* 1. CABECERA (Logo y botón de colapsar) */}
+
+            {/* CABECERA */}
             <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
                 {!isCollapsed && (
                     <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
                         Reloj Checador
                     </h2>
                 )}
+
                 <button 
                     onClick={() => setIsCollapsed(!isCollapsed)}
                     className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
-                    title={isCollapsed ? "Expandir" : "Colapsar"}
                 >
                     <Bars3Icon className="h-8 w-8" />
                 </button>
@@ -55,7 +46,7 @@ function Sidebar() {
 
             {!isCollapsed && (
                 <>
-                    {/* 2. PERFIL DE USUARIO Y BUSCADOR */}
+                    {/* PERFIL */}
                     <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
                         <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
                         <div>
@@ -64,6 +55,7 @@ function Sidebar() {
                         </div>
                     </div>
 
+                    {/* BUSCADOR */}
                     <div className='relative mb-8 px-1'>
                         <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
                         <input 
@@ -73,85 +65,106 @@ function Sidebar() {
                         />
                     </div>
 
-                    {/* 3. SECCIÓN SITIO (Navegación Pública) */}
+                    {/* SECCIÓN SITIO */}
                     <div className='mb-6'>   
                         <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Sitio</p>
+
                         <nav className='flex flex-col gap-5'>
+
                             <Link to="/" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <HomeIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <HomeIcon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Inicio</span>
                             </Link>
+
                             <Link to="/about" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Acerca de</span>
                             </Link>
+
                             <Link to="/contact" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <PhoneIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <PhoneIcon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Contacto</span>
                             </Link>
+
                         </nav>
                     </div>
 
-                    {/* ESPACIADOR FLEXIBLE */}
                     <div className='flex-1' />
-                    
-                    {/* 4. SECCIÓN ADMINISTRATIVA (Gestión y Configuración) */}
+
+                    {/* ADMINISTRACIÓN */}
                     <div className='mt-4 mb-8'>
+
                         <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Administración</p>
+
                         <nav className='flex flex-col gap-5'>
+
                             <Link to="/admin" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Dashboard</span>
                             </Link>
+
                             <Link to="/teachers" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <UserGroupIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <UserGroupIcon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Maestros</span>
                             </Link>
+
+                            {/* NUEVO MENU HORARIOS */}
+                            <Link to="/horarios" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <CalendarDaysIcon className={`${iconSize} text-[#f0c02f]`} />
+                                <span className='text-sm font-medium'>Horarios</span>
+                            </Link>
+
                             <Link to="/clock" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <ClockIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <ClockIcon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Reloj</span>
                             </Link>
+
                             <Link to="/reports" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Reportes</span>
                             </Link>
-                            {/* NUEVO: Enlace a la página de Configuración */}
-                            <Link to="/sistemaconfig" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f] group-hover:scale-110 transition-transform`} />
+
+                            <Link to="/config" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
+                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f]`} />
                                 <span className='text-sm font-medium'>Configuración</span>
                             </Link>
+
                         </nav>
+
                     </div>
+
                 </>
             )}
-            
-            {/* Si está colapsado, empuja el botón de salida al final */}
+
             {isCollapsed && <div className='flex-1' />}
 
-            {/* 5. FOOTER (Cerrar Sesión e Info Institucional) */}
+            {/* FOOTER */}
             <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
+
                 {!isCollapsed ? (
                     <>
                         <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
-                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500 group-hover:text-red-400 shrink-0`} />
-                            <span className='text-sm font-bold text-red-500 group-hover:text-red-400 uppercase tracking-tight'>
+                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500`} />
+                            <span className='text-sm font-bold text-red-500 uppercase tracking-tight'>
                                 Cerrar Sesión
                             </span>
                         </button>
+
                         <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
                              Universidad UNID <br />
                              Playa del Carmen • Admin
                         </div>
                     </>
                 ) : (
-                    /* Icono de salida simplificado cuando está colapsado */
                     <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
                         <ArrowLeftOnRectangleIcon className={iconSize} />
                     </button>
                 )}
-            </div>            
+
+            </div>
+
         </aside>
     );
 }
 
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file
diff --git a/src/pages/SistemaConfig.jsx b/src/pages/SystemConfig.jsx
similarity index 100%
rename from src/pages/SistemaConfig.jsx
rename to src/pages/SystemConfig.jsx

From 13b3e7b3dcf58f52e039320252f91447ab72c801 Mon Sep 17 00:00:00 2001
From: NESTOR ALEJANDRO CHIQUIL CHE
 <nestoralejandrochiquilche@MacBook-Air-de-NESTOR-2.local>
Date: Thu, 26 Mar 2026 19:05:10 -0500
Subject: [PATCH 28/46] Fix: Normalize SystemConfigRoutes filename

---
 .gitignore                           | Bin 281 -> 306 bytes
 backend/routes/SystemConfigRoutes.js |  17 +++++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 backend/routes/SystemConfigRoutes.js

diff --git a/.gitignore b/.gitignore
index e242433908eb6299131ab6c6d9cac844527f236c..554df8f29c852f4153e83d14452c5ee40e58493a 100644
GIT binary patch
delta 33
ocmbQqw25hhB%@?reoAV5ZhlH>PHM3}S4w7ai9VNJYF-%^0KI++*Z=?k

delta 7
OcmdnQG?QtABqIO{IRY90

diff --git a/backend/routes/SystemConfigRoutes.js b/backend/routes/SystemConfigRoutes.js
new file mode 100644
index 0000000..90691e5
--- /dev/null
+++ b/backend/routes/SystemConfigRoutes.js
@@ -0,0 +1,17 @@
+const express = require('express');
+const router = express.Router();
+const {
+    getConfigs,
+    getConfig,
+    createConfig,
+    updateConfig,
+    deleteConfig
+} = require('../controllers/SystemConfigController');
+
+router.get('/', getConfigs);
+router.get('/:id', getConfig);
+router.post('/', createConfig);
+router.put('/:id', updateConfig);
+router.delete('/:id', deleteConfig);
+
+module.exports = router;
\ No newline at end of file

From 87203c7483e57c0520b53024e617e52d33eeb623 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Thu, 26 Mar 2026 19:33:54 -0500
Subject: [PATCH 29/46] =?UTF-8?q?Integraci=C3=B3n=20API=20teachers=20con?=
 =?UTF-8?q?=20frontend=20y=20correcciones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/config/db.js                      |   11 +
 backend/controllers/teachersController.js |   27 +
 backend/models/teachersModel.js           |   39 +
 backend/package-lock.json                 | 1015 ++++++++++++++
 backend/package.json                      |   19 +
 backend/routes/teachersRoutes.js          |   18 +
 backend/server.js                         |   21 +
 src/pages/Teachers.jsx                    | 1495 ++++++++++++++++-----
 8 files changed, 2306 insertions(+), 339 deletions(-)
 create mode 100644 backend/config/db.js
 create mode 100644 backend/controllers/teachersController.js
 create mode 100644 backend/models/teachersModel.js
 create mode 100644 backend/package-lock.json
 create mode 100644 backend/package.json
 create mode 100644 backend/routes/teachersRoutes.js
 create mode 100644 backend/server.js

diff --git a/backend/config/db.js b/backend/config/db.js
new file mode 100644
index 0000000..b001ab7
--- /dev/null
+++ b/backend/config/db.js
@@ -0,0 +1,11 @@
+const {Pool} = require('pg');
+const pool = new Pool({
+    user: "postgres",
+    host: "localhost",
+    database: "onTimeClock",
+    password: "admin123",
+    port: 5432
+});
+
+module.exports = pool;
+
diff --git a/backend/controllers/teachersController.js b/backend/controllers/teachersController.js
new file mode 100644
index 0000000..0b76638
--- /dev/null
+++ b/backend/controllers/teachersController.js
@@ -0,0 +1,27 @@
+//controlador para invocar al modelo
+const teacherModel = require("../models/teachersModel");
+
+exports.getTeachers = async(req, res) => {
+    const teachers = await teacherModel.getAllTeachers();
+    res.json(teachers);
+}
+
+exports.createTeacher =  async(req, res) => {
+   const teacher = await teacherModel.createTeacher(req.body);
+   res.json(teacher);
+}
+
+exports.updateTeacher =  async(req, res) => {
+    const teacher = await teacherModel.updateTeacher(
+        req.params.id,
+        req.body
+    );
+    res.json(teacher);
+}
+
+exports.deleteTeacher =  async(req, res) => {
+    const result = await teacherModel.deleteTeacher(req.params.id);
+    res.json(result);
+}
+
+
diff --git a/backend/models/teachersModel.js b/backend/models/teachersModel.js
new file mode 100644
index 0000000..77a46bb
--- /dev/null
+++ b/backend/models/teachersModel.js
@@ -0,0 +1,39 @@
+ //Modelo para acceso a la base de datos de los profesores
+
+ const pool = require('../config/db');
+ 
+ exports.getAllTeachers = async () => {
+
+    const result = await pool.query('SELECT * FROM teachers order by name');
+    return result.rows;
+ }
+
+exports.createTeacher = async (teacher) => {
+    const {name, subject, email, phone, degree, status, avatar} = teacher;
+
+    const result = await pool.query(
+        "INSERT INTO teachers (name, subject, email, phone, degree, status, avatar) VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *",
+        [name, subject, email, phone, degree, status, avatar]
+    );
+    return result.rows[0];
+}
+
+exports.updateTeacher = async (id, teacher) => {
+    const {name, subject, email, phone, degree, status, avatar} = teacher;
+
+    const result = await pool.query(
+        "UPDATE teachers SET name = $1, subject = $2, email = $3, phone = $4, degree = $5, status = $6, avatar = $7 WHERE id = $8 RETURNING *",
+        [name, subject, email, phone, degree, status, avatar, id]       
+    );
+    return result.rows[0];
+}
+
+exports.deteleTeacher = async (id) => {
+    await pool.query(
+        "DELETE FROM teachers WHERE id=$1",
+        [id]
+    )
+    return {message: "Docente borrado.."}
+}
+
+
diff --git a/backend/package-lock.json b/backend/package-lock.json
new file mode 100644
index 0000000..194ec33
--- /dev/null
+++ b/backend/package-lock.json
@@ -0,0 +1,1015 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "backend",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "cors": "^2.8.6",
+        "dotenv": "^17.3.1",
+        "express": "^5.2.1",
+        "pg": "^8.20.0"
+      },
+      "devDependencies": {}
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-connection-string": "^2.12.0",
+        "pg-pool": "^3.13.0",
+        "pg-protocol": "^1.13.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
+      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
+      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
+      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    }
+  }
+}
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..fc89916
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "pg": "^8.20.0"
+  },
+  "description": ""
+}
diff --git a/backend/routes/teachersRoutes.js b/backend/routes/teachersRoutes.js
new file mode 100644
index 0000000..5d7174b
--- /dev/null
+++ b/backend/routes/teachersRoutes.js
@@ -0,0 +1,18 @@
+//Se definen los endpoints para las APIS
+const express = require("express");
+
+const router = express.Router();
+
+const {
+    getTeachers,
+    createTeacher,
+    updateTeacher,
+    deleteTeacher
+} = require("../controllers/teachersController");
+
+router.get("/", getTeachers);
+router.post("/", createTeacher);
+router.put("/:id", updateTeacher);
+router.delete("/:id", deleteTeacher);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
new file mode 100644
index 0000000..c4290df
--- /dev/null
+++ b/backend/server.js
@@ -0,0 +1,21 @@
+const express = require("express");
+const cors = require("cors"); // permite que React llame a las APIs
+
+const teachersRoutes = require("./routes/teachersRoutes");
+
+const app = express();
+
+app.use(cors());
+app.use(express.json()); 
+
+app.use("/api/teachers", teachersRoutes);
+
+const PORT = 3000;
+
+app.get("/", (req, res) => {
+  res.send("Backend funcionando");
+});
+
+app.listen(PORT, () => {
+  console.log("Servidor de Backend en puerto: " + PORT);
+});
\ No newline at end of file
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index 2d775ac..e7dc03c 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,89 +1,164 @@
-import { useState } from "react";
-
-const initialTeachers = [
-    { id: 1, name: "Leydi Xequeb", subject: "Matemáticas", email: "l.xequeb@universidad.edu", phone: "+502 5555-0101", status: "Activo", degree: "MSc. Matemáticas Aplicadas", joined: "2019-03-15", avatar: "LX" },
-    { id: 2, name: "Irvin Chan", subject: "Programación", email: "i.chan@universidad.edu", phone: "+502 5555-0202", status: "Activo", degree: "Ing. en Sistemas", joined: "2020-08-01", avatar: "IC" },
-    { id: 3, name: "Marcos Rivera", subject: "Fe y Mundo", email: "m.rivera@universidad.edu", phone: "+502 5555-0303", status: "Activo", degree: "Lic. Teología", joined: "2018-01-20", avatar: "MR" },
-    { id: 4, name: "Sandra López", subject: "Física", email: "s.lopez@universidad.edu", phone: "+502 5555-0404", status: "Inactivo", degree: "PhD. Física Teórica", joined: "2017-06-10", avatar: "SL" },
-    { id: 5, name: "Carlos Menéndez", subject: "Química", email: "c.menendez@universidad.edu", phone: "+502 5555-0505", status: "Activo", degree: "MSc. Química Industrial", joined: "2021-02-28", avatar: "CM" },
-    { id: 6, name: "Ana Fuentes", subject: "Inglés", email: "a.fuentes@universidad.edu", phone: "+502 5555-0606", status: "Licencia", degree: "BA. Lenguas Modernas", joined: "2016-09-05", avatar: "AF" },
-];
+import { useState, useEffect } from "react";
 
 const avatarColors = [
-    ["#1E3A8A", "#FBBF24"],
-    ["#1D4ED8", "#F59E0B"],
-    ["#1E40AF", "#FCD34D"],
-    ["#1a3270", "#FBBF24"],
-    ["#2563EB", "#F59E0B"],
-    ["#1E3A8A", "#FDE68A"],
+  ["#1E3A8A", "#FBBF24"],
+  ["#1D4ED8", "#F59E0B"],
+  ["#1E40AF", "#FCD34D"],
+  ["#1a3270", "#FBBF24"],
+  ["#2563EB", "#F59E0B"],
+  ["#1E3A8A", "#FDE68A"],
 ];
 
 const statusConfig = {
-    Activo: { bg: "#D1FAE5", color: "#065F46", dot: "#10B981" },
-    Inactivo: { bg: "#FEE2E2", color: "#991B1B", dot: "#EF4444" },
-    Licencia: { bg: "#FEF3C7", color: "#92400E", dot: "#F59E0B" },
+  Activo: { bg: "#D1FAE5", color: "#065F46", dot: "#10B981" },
+  Inactivo: { bg: "#FEE2E2", color: "#991B1B", dot: "#EF4444" },
+  Licencia: { bg: "#FEF3C7", color: "#92400E", dot: "#F59E0B" },
 };
 
 export default function Teachers() {
-    const [teachers, setTeachers] = useState(initialTeachers);
-    const [search, setSearch] = useState("");
-    const [statusFilter, setStatusFilter] = useState("Todos");
-    const [showModal, setShowModal] = useState(false);
-    const [modalMode, setModalMode] = useState("add"); // "add" | "view" | "edit"
-    const [selectedTeacher, setSelectedTeacher] = useState(null);
-    const [form, setForm] = useState({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" });
-    const [sortField, setSortField] = useState("name");
-    const [sortDir, setSortDir] = useState("asc");
-
-    const filtered = teachers
-        .filter(t => statusFilter === "Todos" || t.status === statusFilter)
-        .filter(t =>
-            t.name.toLowerCase().includes(search.toLowerCase()) ||
-            t.subject.toLowerCase().includes(search.toLowerCase()) ||
-            t.email.toLowerCase().includes(search.toLowerCase())
-        )
-        .sort((a, b) => {
-            const va = a[sortField] || ""; const vb = b[sortField] || "";
-            return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-        });
+  const [teachers, setTeachers] = useState([]);
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("Todos");
+  const [showModal, setShowModal] = useState(false);
+  const [modalMode, setModalMode] = useState("add"); // "add" | "view" | "edit"
+  const [selectedTeacher, setSelectedTeacher] = useState(null);
+  const [form, setForm] = useState({
+    name: "",
+    subject: "",
+    email: "",
+    phone: "",
+    degree: "",
+    status: "Activo",
+  });
+  const [sortField, setSortField] = useState("name");
+  const [sortDir, setSortDir] = useState("asc");
 
-    const handleSort = (field) => {
-        if (sortField === field) setSortDir(d => d === "asc" ? "desc" : "asc");
-        else { setSortField(field); setSortDir("asc"); }
+  //Extraer los datos de la endPoint /api/teachers
+  useEffect(() => {
+    const fetchTeachers = async () => {
+      try {
+        const response = await fetch("http://localhost:3000/api/teachers");
+        const data = await response.json();
+        setTeachers(data);
+      } catch (error) {
+        console.error("Error al cargar datos", error);
+      }
     };
+    fetchTeachers();
+  }, []);
 
-    const openAdd = () => { setModalMode("add"); setForm({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" }); setShowModal(true); };
-    const openView = (t) => { setModalMode("view"); setSelectedTeacher(t); setShowModal(true); };
-    const openEdit = (t) => { setModalMode("edit"); setSelectedTeacher(t); setForm({ name: t.name, subject: t.subject, email: t.email, phone: t.phone, degree: t.degree, status: t.status }); setShowModal(true); };
+  const filtered = teachers
+    .filter((t) => statusFilter === "Todos" || t.status === statusFilter)
+    .filter(
+      (t) =>
+        t.name.toLowerCase().includes(search.toLowerCase()) ||
+        t.subject.toLowerCase().includes(search.toLowerCase()) ||
+        t.email.toLowerCase().includes(search.toLowerCase()),
+    )
+    .sort((a, b) => {
+      const va = a[sortField] || "";
+      const vb = b[sortField] || "";
+      return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+    });
 
-    const handleSave = () => {
-        if (!form.name.trim()) return;
-        if (modalMode === "edit") {
-            // Editar docente existente
-            setTeachers(prev => prev.map(t => t.id === selectedTeacher.id ? { ...selectedTeacher, ...form } : t));
-        } else {
-            // Agregar nuevo docente
-            const initials = form.name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
-            setTeachers(prev => [...prev, { ...form, id: Date.now(), avatar: initials, joined: new Date().toISOString().split("T")[0] }]);
-        }
-        setShowModal(false);
-    };
+  const handleSort = (field) => {
+    if (sortField === field) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    else {
+      setSortField(field);
+      setSortDir("asc");
+    }
+  };
 
-    const handleDelete = (id) => {
-        if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
-            setTeachers(prev => prev.filter(t => t.id !== id));
-        }
-    };
+  const openAdd = () => {
+    setModalMode("add");
+    setForm({
+      name: "",
+      subject: "",
+      email: "",
+      phone: "",
+      degree: "",
+      status: "Activo",
+    });
+    setShowModal(true);
+  };
+  const openView = (t) => {
+    setModalMode("view");
+    setSelectedTeacher(t);
+    setShowModal(true);
+  };
+  const openEdit = (t) => {
+    setModalMode("edit");
+    setSelectedTeacher(t);
+    setForm({
+      name: t.name,
+      subject: t.subject,
+      email: t.email,
+      phone: t.phone,
+      degree: t.degree,
+      status: t.status,
+      avatar: t.avatar
+    });
+    setShowModal(true);
+  };
 
-    const SortIcon = ({ field }) => (
-        <span style={{ marginLeft: 4, opacity: sortField === field ? 1 : 0.3, fontSize: 11 }}>
-            {sortField === field && sortDir === "desc" ? "▼" : "▲"}
-        </span>
-    );
+  const handleSave = () => {
+    if (!form.name.trim()) return;
+    if (modalMode === "edit") {
+      // Editar docente existente
+      setTeachers((prev) =>
+        prev.map((t) =>
+          t.id === selectedTeacher.id ? { ...selectedTeacher, ...form } : t,
+        ),
+      );
+    } else {
+      // Agregar nuevo docente
+      const initials = form.name
+        .split(" ")
+        .map((w) => w[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase();
+      setTeachers((prev) => [
+        ...prev,
+        {
+          ...form,
+          id: Date.now(),
+          avatar: initials,
+          joined: new Date().toISOString().split("T")[0],
+        },
+      ]);
+    }
+    setShowModal(false);
+  };
 
-    return (
-        <div style={{ fontFamily: "'DM Sans', 'Segoe UI', sans-serif", background: "#F0F4FF", minHeight: "100vh", padding: "32px 24px" }}>
-            <style>{`
+  const handleDelete = (id) => {
+    if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
+      setTeachers((prev) => prev.filter((t) => t.id !== id));
+    }
+  };
+
+  const SortIcon = ({ field }) => (
+    <span
+      style={{
+        marginLeft: 4,
+        opacity: sortField === field ? 1 : 0.3,
+        fontSize: 11,
+      }}
+    >
+      {sortField === field && sortDir === "desc" ? "▼" : "▲"}
+    </span>
+  );
+
+  return (
+    <div
+      style={{
+        fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
+        background: "#F0F4FF",
+        minHeight: "100vh",
+        padding: "32px 24px",
+      }}
+    >
+      <style>{`
         @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');
         * { box-sizing: border-box; }
         .th-btn:hover { background: #1E3A8A !important; color: white !important; }
@@ -101,290 +176,1032 @@ export default function Teachers() {
         ::-webkit-scrollbar-thumb { background: #93C5FD; border-radius: 10px; }
       `}</style>
 
-            {/* Header */}
-            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
-                <div>
-                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
-                        <div style={{ width: 40, height: 40, background: "linear-gradient(135deg, #1E3A8A, #2563EB)", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                            </svg>
-                        </div>
-                        <h1 style={{ fontFamily: "'Sora', sans-serif", fontSize: 26, fontWeight: 700, color: "#1E3A8A", margin: 0 }}>
-                            Gestión de Docentes
-                        </h1>
-                    </div>
-                    <p style={{ color: "#64748B", fontSize: 13.5, margin: 0, marginLeft: 50 }}>
-                        Sistema Académico Universitario · {teachers.length} docentes registrados
-                    </p>
-                </div>
-                <button
-                    onClick={openAdd}
-                    className="action-btn"
-                    style={{ display: "flex", alignItems: "center", gap: 8, background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", color: "white", border: "none", borderRadius: 10, padding: "11px 22px", fontWeight: 600, fontSize: 14, cursor: "pointer", boxShadow: "0 4px 14px rgba(37,99,235,0.35)" }}
-                >
-                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                    Agregar Docente
-                </button>
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          marginBottom: 28,
+          flexWrap: "wrap",
+          gap: 16,
+        }}
+      >
+        <div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              marginBottom: 4,
+            }}
+          >
+            <div
+              style={{
+                width: 40,
+                height: 40,
+                background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                borderRadius: 10,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#FBBF24"
+                strokeWidth="2.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
             </div>
+            <h1
+              style={{
+                fontFamily: "'Sora', sans-serif",
+                fontSize: 26,
+                fontWeight: 700,
+                color: "#1E3A8A",
+                margin: 0,
+              }}
+            >
+              Gestión de Docentes
+            </h1>
+          </div>
+          <p
+            style={{
+              color: "#64748B",
+              fontSize: 13.5,
+              margin: 0,
+              marginLeft: 50,
+            }}
+          >
+            Sistema Académico Universitario · {teachers.length} docentes
+            registrados
+          </p>
+        </div>
+        <button
+          onClick={openAdd}
+          className="action-btn"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)",
+            color: "white",
+            border: "none",
+            borderRadius: 10,
+            padding: "11px 22px",
+            fontWeight: 600,
+            fontSize: 14,
+            cursor: "pointer",
+            boxShadow: "0 4px 14px rgba(37,99,235,0.35)",
+          }}
+        >
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Agregar Docente
+        </button>
+      </div>
 
-            {/* Stats bar */}
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 14, marginBottom: 24 }}>
-                {[
-                    { label: "Total Docentes", value: teachers.length, icon: "👥", accent: "#1E3A8A" },
-                    { label: "Activos", value: teachers.filter(t => t.status === "Activo").length, icon: "✅", accent: "#059669" },
-                    { label: "Inactivos", value: teachers.filter(t => t.status === "Inactivo").length, icon: "⛔", accent: "#DC2626" },
-                    { label: "En Licencia", value: teachers.filter(t => t.status === "Licencia").length, icon: "📋", accent: "#D97706" },
-                ].map((s, i) => (
-                    <div key={i} style={{ background: "white", borderRadius: 12, padding: "16px 18px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", borderLeft: `4px solid ${s.accent}` }}>
-                        <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{s.label}</div>
-                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                            <span style={{ fontSize: 28, fontFamily: "'Sora', sans-serif", fontWeight: 700, color: s.accent }}>{s.value}</span>
-                            <span style={{ fontSize: 20 }}>{s.icon}</span>
-                        </div>
-                    </div>
-                ))}
+      {/* Stats bar */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+          gap: 14,
+          marginBottom: 24,
+        }}
+      >
+        {[
+          {
+            label: "Total Docentes",
+            value: teachers.length,
+            icon: "👥",
+            accent: "#1E3A8A",
+          },
+          {
+            label: "Activos",
+            value: teachers.filter((t) => t.status === "Activo").length,
+            icon: "✅",
+            accent: "#059669",
+          },
+          {
+            label: "Inactivos",
+            value: teachers.filter((t) => t.status === "Inactivo").length,
+            icon: "⛔",
+            accent: "#DC2626",
+          },
+          {
+            label: "En Licencia",
+            value: teachers.filter((t) => t.status === "Licencia").length,
+            icon: "📋",
+            accent: "#D97706",
+          },
+        ].map((s, i) => (
+          <div
+            key={i}
+            style={{
+              background: "white",
+              borderRadius: 12,
+              padding: "16px 18px",
+              boxShadow: "0 1px 6px rgba(0,0,0,0.07)",
+              borderLeft: `4px solid ${s.accent}`,
+            }}
+          >
+            <div
+              style={{
+                fontSize: 11,
+                color: "#94A3B8",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.07em",
+                marginBottom: 4,
+              }}
+            >
+              {s.label}
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <span
+                style={{
+                  fontSize: 28,
+                  fontFamily: "'Sora', sans-serif",
+                  fontWeight: 700,
+                  color: s.accent,
+                }}
+              >
+                {s.value}
+              </span>
+              <span style={{ fontSize: 20 }}>{s.icon}</span>
             </div>
+          </div>
+        ))}
+      </div>
 
-            {/* Search & Filter bar */}
-            <div style={{ background: "white", borderRadius: 14, padding: "16px 20px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", marginBottom: 18, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
-                {/* Search */}
-                <div style={{ position: "relative", flex: "1 1 260px", minWidth: 200 }}>
-                    <svg style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "#94A3B8" }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
-                    <input
-                        value={search}
-                        onChange={e => setSearch(e.target.value)}
-                        placeholder="Buscar por nombre, materia o correo..."
-                        style={{ width: "100%", paddingLeft: 38, paddingRight: 14, height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
-                    />
-                </div>
+      {/* Search & Filter bar */}
+      <div
+        style={{
+          background: "white",
+          borderRadius: 14,
+          padding: "16px 20px",
+          boxShadow: "0 1px 6px rgba(0,0,0,0.07)",
+          marginBottom: 18,
+          display: "flex",
+          gap: 12,
+          flexWrap: "wrap",
+          alignItems: "center",
+        }}
+      >
+        {/* Search */}
+        <div style={{ position: "relative", flex: "1 1 260px", minWidth: 200 }}>
+          <svg
+            style={{
+              position: "absolute",
+              left: 12,
+              top: "50%",
+              transform: "translateY(-50%)",
+              color: "#94A3B8",
+            }}
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Buscar por nombre, materia o correo..."
+            style={{
+              width: "100%",
+              paddingLeft: 38,
+              paddingRight: 14,
+              height: 40,
+              border: "1.5px solid #E2E8F0",
+              borderRadius: 9,
+              fontSize: 13.5,
+              color: "#334155",
+              background: "#F8FAFC",
+            }}
+          />
+        </div>
+
+        {/* Status filter */}
+        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+          {["Todos", "Activo", "Inactivo", "Licencia"].map((s) => (
+            <button
+              key={s}
+              onClick={() => setStatusFilter(s)}
+              style={{
+                padding: "7px 14px",
+                borderRadius: 8,
+                fontSize: 13,
+                fontWeight: 600,
+                cursor: "pointer",
+                transition: "all 0.15s",
+                background:
+                  statusFilter === s
+                    ? "linear-gradient(135deg, #1E3A8A, #2563EB)"
+                    : "#F1F5F9",
+                color: statusFilter === s ? "white" : "#64748B",
+                border: statusFilter === s ? "none" : "1.5px solid #E2E8F0",
+              }}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+
+        {/* Results count */}
+        <div
+          style={{
+            marginLeft: "auto",
+            fontSize: 12.5,
+            color: "#94A3B8",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
+        </div>
+      </div>
 
-                {/* Status filter */}
-                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-                    {["Todos", "Activo", "Inactivo", "Licencia"].map(s => (
-                        <button
-                            key={s}
-                            onClick={() => setStatusFilter(s)}
+      {/* Table */}
+      <div
+        style={{
+          background: "white",
+          borderRadius: 14,
+          boxShadow: "0 1px 8px rgba(0,0,0,0.08)",
+          overflow: "hidden",
+        }}
+      >
+        <div style={{ overflowX: "auto" }}>
+          <table
+            style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}
+          >
+            <thead>
+              <tr
+                style={{
+                  background:
+                    "linear-gradient(90deg, #1E3A8A 0%, #1D4ED8 100%)",
+                }}
+              >
+                {[
+                  { label: "Docente", field: "name" },
+                  { label: "Materia", field: "subject" },
+                  { label: "Correo", field: "email" },
+                  { label: "Teléfono", field: "phone" },
+                  { label: "Estado", field: "status" },
+                  { label: "Ingreso", field: "joined" },
+                  { label: "Acciones", field: null },
+                ].map((col, i) => (
+                  <th
+                    key={i}
+                    onClick={() => col.field && handleSort(col.field)}
+                    className={col.field ? "th-btn" : ""}
+                    style={{
+                      padding: "13px 16px",
+                      textAlign: "left",
+                      fontSize: 11.5,
+                      fontWeight: 700,
+                      color: "#FBBF24",
+                      letterSpacing: "0.08em",
+                      textTransform: "uppercase",
+                      cursor: col.field ? "pointer" : "default",
+                      userSelect: "none",
+                      borderBottom: "2px solid rgba(251,191,36,0.3)",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {col.label}
+                    {col.field && <SortIcon field={col.field} />}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={7}
+                    style={{
+                      textAlign: "center",
+                      padding: "52px 20px",
+                      color: "#94A3B8",
+                    }}
+                  >
+                    <div style={{ fontSize: 40, marginBottom: 10 }}>🔍</div>
+                    <div style={{ fontWeight: 600, fontSize: 15 }}>
+                      Sin resultados
+                    </div>
+                    <div style={{ fontSize: 13 }}>
+                      Intenta cambiar el filtro o la búsqueda
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                filtered.map((t, idx) => {
+                  const sc = statusConfig[t.status] || statusConfig.Activo;
+                  const ac = avatarColors[t.id % avatarColors.length];
+                  return (
+                    <tr
+                      key={t.id}
+                      className="row-hover"
+                      style={{
+                        borderBottom: "1px solid #F1F5F9",
+                        transition: "background 0.12s",
+                        background: idx % 2 === 0 ? "white" : "#FAFBFF",
+                      }}
+                    >
+                      {/* Docente */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 11,
+                          }}
+                        >
+                          <div
                             style={{
-                                padding: "7px 14px", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer", transition: "all 0.15s",
-                                background: statusFilter === s ? "linear-gradient(135deg, #1E3A8A, #2563EB)" : "#F1F5F9",
-                                color: statusFilter === s ? "white" : "#64748B",
-                                border: statusFilter === s ? "none" : "1.5px solid #E2E8F0"
+                              width: 38,
+                              height: 38,
+                              borderRadius: 10,
+                              background: `linear-gradient(135deg, ${ac[0]}, ${ac[1]})`,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontWeight: 700,
+                              fontSize: 13,
+                              color: ac[0] === "#FBBF24" ? "#1E3A8A" : "white",
+                              flexShrink: 0,
+                              boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
                             }}
-                        >{s}</button>
-                    ))}
-                </div>
+                          >
+                            {t.avatar}
+                          </div>
+                          <div>
+                            <div
+                              style={{
+                                fontWeight: 600,
+                                fontSize: 14,
+                                color: "#1E293B",
+                              }}
+                            >
+                              {t.name}
+                            </div>
+                            <div style={{ fontSize: 11.5, color: "#94A3B8" }}>
+                              {t.degree}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      {/* Materia */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <span
+                          style={{
+                            background: "#EFF6FF",
+                            color: "#1D4ED8",
+                            borderRadius: 6,
+                            padding: "3px 10px",
+                            fontSize: 12.5,
+                            fontWeight: 600,
+                          }}
+                        >
+                          {t.subject}
+                        </span>
+                      </td>
+                      {/* Email */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 13,
+                          color: "#475569",
+                        }}
+                      >
+                        {t.email}
+                      </td>
+                      {/* Phone */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 13,
+                          color: "#475569",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {t.phone}
+                      </td>
+                      {/* Status */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <span
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                            background: sc.bg,
+                            color: sc.color,
+                            borderRadius: 20,
+                            padding: "4px 12px",
+                            fontSize: 12,
+                            fontWeight: 700,
+                          }}
+                        >
+                          <span
+                            style={{
+                              width: 7,
+                              height: 7,
+                              borderRadius: "50%",
+                              background: sc.dot,
+                              display: "inline-block",
+                            }}
+                          />
+                          {t.status}
+                        </span>
+                      </td>
+                      {/* Joined */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 12.5,
+                          color: "#94A3B8",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {new Date(t.joined).toISOString().split("T")[0]}
+                      </td>
+                      {/* Actions */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <div style={{ display: "flex", gap: 6 }}>
+                          <button
+                            onClick={() => openView(t)}
+                            className="icon-btn"
+                            title="Ver perfil"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #E2E8F0",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#2563EB"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                              <circle cx="12" cy="12" r="3" />
+                            </svg>
+                          </button>
+                          <button
+                            onClick={() => openEdit(t)}
+                            className="icon-btn"
+                            title="Editar"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #E2E8F0",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#F59E0B"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                            </svg>
+                          </button>
+                          <button
+                            onClick={() => handleDelete(t.id)}
+                            className="icon-btn"
+                            title="Eliminar"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #FEE2E2",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#EF4444"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <polyline points="3 6 5 6 21 6" />
+                              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                              <path d="M10 11v6" />
+                              <path d="M14 11v6" />
+                              <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                            </svg>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
 
-                {/* Results count */}
-                <div style={{ marginLeft: "auto", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>
-                    {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
-                </div>
-            </div>
+        {/* Table footer */}
+        <div
+          style={{
+            padding: "12px 20px",
+            borderTop: "1px solid #F1F5F9",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            background: "#FAFBFF",
+          }}
+        >
+          <span style={{ fontSize: 12.5, color: "#94A3B8" }}>
+            Mostrando {filtered.length} de {teachers.length} docentes
+          </span>
+          <div style={{ display: "flex", gap: 4 }}>
+            {[1].map((p) => (
+              <button
+                key={p}
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 7,
+                  border: "none",
+                  background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                  color: "white",
+                  fontWeight: 700,
+                  fontSize: 13,
+                  cursor: "pointer",
+                }}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
 
-            {/* Table */}
-            <div style={{ background: "white", borderRadius: 14, boxShadow: "0 1px 8px rgba(0,0,0,0.08)", overflow: "hidden" }}>
-                <div style={{ overflowX: "auto" }}>
-                    <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}>
-                        <thead>
-                            <tr style={{ background: "linear-gradient(90deg, #1E3A8A 0%, #1D4ED8 100%)" }}>
-                                {[
-                                    { label: "Docente", field: "name" },
-                                    { label: "Materia", field: "subject" },
-                                    { label: "Correo", field: "email" },
-                                    { label: "Teléfono", field: null },
-                                    { label: "Estado", field: "status" },
-                                    { label: "Ingreso", field: "joined" },
-                                    { label: "Acciones", field: null },
-                                ].map((col, i) => (
-                                    <th
-                                        key={i}
-                                        onClick={() => col.field && handleSort(col.field)}
-                                        className={col.field ? "th-btn" : ""}
-                                        style={{
-                                            padding: "13px 16px", textAlign: "left", fontSize: 11.5, fontWeight: 700,
-                                            color: "#FBBF24", letterSpacing: "0.08em", textTransform: "uppercase",
-                                            cursor: col.field ? "pointer" : "default", userSelect: "none",
-                                            borderBottom: "2px solid rgba(251,191,36,0.3)", whiteSpace: "nowrap"
-                                        }}
-                                    >
-                                        {col.label}{col.field && <SortIcon field={col.field} />}
-                                    </th>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {filtered.length === 0 ? (
-                                <tr>
-                                    <td colSpan={7} style={{ textAlign: "center", padding: "52px 20px", color: "#94A3B8" }}>
-                                        <div style={{ fontSize: 40, marginBottom: 10 }}>🔍</div>
-                                        <div style={{ fontWeight: 600, fontSize: 15 }}>Sin resultados</div>
-                                        <div style={{ fontSize: 13 }}>Intenta cambiar el filtro o la búsqueda</div>
-                                    </td>
-                                </tr>
-                            ) : filtered.map((t, idx) => {
-                                const sc = statusConfig[t.status] || statusConfig.Activo;
-                                const ac = avatarColors[t.id % avatarColors.length];
-                                return (
-                                    <tr key={t.id} className="row-hover" style={{ borderBottom: "1px solid #F1F5F9", transition: "background 0.12s", background: idx % 2 === 0 ? "white" : "#FAFBFF" }}>
-                                        {/* Docente */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
-                                                <div style={{ width: 38, height: 38, borderRadius: 10, background: `linear-gradient(135deg, ${ac[0]}, ${ac[1]})`, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13, color: ac[0] === "#FBBF24" ? "#1E3A8A" : "white", flexShrink: 0, boxShadow: "0 2px 8px rgba(0,0,0,0.15)" }}>
-                                                    {t.avatar}
-                                                </div>
-                                                <div>
-                                                    <div style={{ fontWeight: 600, fontSize: 14, color: "#1E293B" }}>{t.name}</div>
-                                                    <div style={{ fontSize: 11.5, color: "#94A3B8" }}>{t.degree}</div>
-                                                </div>
-                                            </div>
-                                        </td>
-                                        {/* Materia */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <span style={{ background: "#EFF6FF", color: "#1D4ED8", borderRadius: 6, padding: "3px 10px", fontSize: 12.5, fontWeight: 600 }}>{t.subject}</span>
-                                        </td>
-                                        {/* Email */}
-                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569" }}>{t.email}</td>
-                                        {/* Phone */}
-                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569", whiteSpace: "nowrap" }}>{t.phone}</td>
-                                        {/* Status */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: sc.bg, color: sc.color, borderRadius: 20, padding: "4px 12px", fontSize: 12, fontWeight: 700 }}>
-                                                <span style={{ width: 7, height: 7, borderRadius: "50%", background: sc.dot, display: "inline-block" }} />
-                                                {t.status}
-                                            </span>
-                                        </td>
-                                        {/* Joined */}
-                                        <td style={{ padding: "13px 16px", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>{t.joined}</td>
-                                        {/* Actions */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <div style={{ display: "flex", gap: 6 }}>
-                                                <button onClick={() => openView(t)} className="icon-btn" title="Ver perfil" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="2.2" strokeLinecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
-                                                </button>
-                                                <button onClick={() => openEdit(t)} className="icon-btn" title="Editar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.2" strokeLinecap="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>
-                                                </button>
-                                                <button onClick={() => handleDelete(t.id)} className="icon-btn" title="Eliminar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #FEE2E2", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.2" strokeLinecap="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>
-                                                </button>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                );
-                            })}
-                        </tbody>
-                    </table>
+      {/* Modal */}
+      {showModal && (
+        <div
+          className="modal-overlay"
+          onClick={() => setShowModal(false)}
+          style={{
+            position: "fixed",
+            inset: 0,
+            background: "rgba(15,23,42,0.55)",
+            backdropFilter: "blur(4px)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1000,
+            padding: 20,
+          }}
+        >
+          <div
+            className="modal-box"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              background: "white",
+              borderRadius: 18,
+              width: "100%",
+              maxWidth: 520,
+              boxShadow: "0 24px 64px rgba(0,0,0,0.22)",
+              overflow: "hidden",
+            }}
+          >
+            {/* Modal header */}
+            <div
+              style={{
+                background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)",
+                padding: "22px 28px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <div
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: 10,
+                    background: "rgba(251,191,36,0.2)",
+                    border: "2px solid #FBBF24",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#FBBF24"
+                    strokeWidth="2.2"
+                    strokeLinecap="round"
+                  >
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
                 </div>
-
-                {/* Table footer */}
-                <div style={{ padding: "12px 20px", borderTop: "1px solid #F1F5F9", display: "flex", justifyContent: "space-between", alignItems: "center", background: "#FAFBFF" }}>
-                    <span style={{ fontSize: 12.5, color: "#94A3B8" }}>Mostrando {filtered.length} de {teachers.length} docentes</span>
-                    <div style={{ display: "flex", gap: 4 }}>
-                        {[1].map(p => (
-                            <button key={p} style={{ width: 30, height: 30, borderRadius: 7, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13, cursor: "pointer" }}>{p}</button>
-                        ))}
-                    </div>
+                <div>
+                  <h2
+                    style={{
+                      fontFamily: "'Sora', sans-serif",
+                      color: "white",
+                      margin: 0,
+                      fontSize: 18,
+                      fontWeight: 700,
+                    }}
+                  >
+                    {modalMode === "add"
+                      ? "Nuevo Docente"
+                      : modalMode === "edit"
+                        ? "Editar Docente"
+                        : selectedTeacher?.name}
+                  </h2>
+                  <p style={{ color: "#93C5FD", margin: 0, fontSize: 12.5 }}>
+                    {modalMode === "add"
+                      ? "Completar información del docente"
+                      : modalMode === "edit"
+                        ? "Actualizar información del docente"
+                        : selectedTeacher?.subject}
+                  </p>
                 </div>
+              </div>
+              <button
+                onClick={() => setShowModal(false)}
+                style={{
+                  width: 34,
+                  height: 34,
+                  borderRadius: 8,
+                  border: "1.5px solid rgba(255,255,255,0.25)",
+                  background: "transparent",
+                  color: "white",
+                  fontSize: 18,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                ×
+              </button>
             </div>
 
-            {/* Modal */}
-            {showModal && (
-                <div className="modal-overlay" onClick={() => setShowModal(false)} style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 20 }}>
-                    <div className="modal-box" onClick={e => e.stopPropagation()} style={{ background: "white", borderRadius: 18, width: "100%", maxWidth: 520, boxShadow: "0 24px 64px rgba(0,0,0,0.22)", overflow: "hidden" }}>
-                        {/* Modal header */}
-                        <div style={{ background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", padding: "22px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-                                <div style={{ width: 40, height: 40, borderRadius: 10, background: "rgba(251,191,36,0.2)", border: "2px solid #FBBF24", display: "flex", alignItems: "center", justifyContent: "center" }}>
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
-                                </div>
-                                <div>
-                                    <h2 style={{ fontFamily: "'Sora', sans-serif", color: "white", margin: 0, fontSize: 18, fontWeight: 700 }}>
-                                        {modalMode === "add" ? "Nuevo Docente" : modalMode === "edit" ? "Editar Docente" : selectedTeacher?.name}
-                                    </h2>
-                                    <p style={{ color: "#93C5FD", margin: 0, fontSize: 12.5 }}>
-                                        {modalMode === "add" ? "Completar información del docente" : modalMode === "edit" ? "Actualizar información del docente" : selectedTeacher?.subject}
-                                    </p>
-                                </div>
-                            </div>
-                            <button onClick={() => setShowModal(false)} style={{ width: 34, height: 34, borderRadius: 8, border: "1.5px solid rgba(255,255,255,0.25)", background: "transparent", color: "white", fontSize: 18, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
-                        </div>
-
-                        {/* Modal body */}
-                        <div style={{ padding: "24px 28px" }}>
-                            {modalMode === "view" && selectedTeacher && !form.name ? (
-                                <div>
-                                    {/* Avatar grande */}
-                                    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24, padding: "16px", background: "#F8FAFC", borderRadius: 12 }}>
-                                        <div style={{ width: 64, height: 64, borderRadius: 16, background: "linear-gradient(135deg, #1E3A8A, #FBBF24)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, fontWeight: 800, color: "white", boxShadow: "0 4px 16px rgba(30,58,138,0.3)" }}>
-                                            {selectedTeacher.avatar}
-                                        </div>
-                                        <div>
-                                            <div style={{ fontWeight: 700, fontSize: 18, color: "#1E293B" }}>{selectedTeacher.name}</div>
-                                            <div style={{ fontSize: 13, color: "#64748B" }}>{selectedTeacher.degree}</div>
-                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, background: statusConfig[selectedTeacher.status]?.bg, color: statusConfig[selectedTeacher.status]?.color, borderRadius: 20, padding: "3px 10px", fontSize: 12, fontWeight: 700, marginTop: 4 }}>
-                                                <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig[selectedTeacher.status]?.dot, display: "inline-block" }} />
-                                                {selectedTeacher.status}
-                                            </span>
-                                        </div>
-                                    </div>
-                                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
-                                        {[
-                                            { icon: "📚", label: "Materia", val: selectedTeacher.subject },
-                                            { icon: "📧", label: "Correo", val: selectedTeacher.email },
-                                            { icon: "📞", label: "Teléfono", val: selectedTeacher.phone },
-                                            { icon: "📅", label: "Fecha de Ingreso", val: selectedTeacher.joined },
-                                        ].map((item, i) => (
-                                            <div key={i} style={{ background: "#F8FAFC", borderRadius: 10, padding: "12px 14px", border: "1px solid #E2E8F0" }}>
-                                                <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{item.icon} {item.label}</div>
-                                                <div style={{ fontSize: 13.5, color: "#334155", fontWeight: 500 }}>{item.val}</div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-                                    {[
-                                        { label: "Nombre Completo", key: "name", type: "text", placeholder: "Ej. María García López" },
-                                        { label: "Materia que imparte", key: "subject", type: "text", placeholder: "Ej. Cálculo Diferencial" },
-                                        { label: "Correo Institucional", key: "email", type: "email", placeholder: "docente@universidad.edu" },
-                                        { label: "Teléfono", key: "phone", type: "text", placeholder: "+502 0000-0000" },
-                                        { label: "Grado Académico", key: "degree", type: "text", placeholder: "Ej. MSc. Ingeniería de Software" },
-                                    ].map(field => (
-                                        <div key={field.key}>
-                                            <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>{field.label}</label>
-                                            <input
-                                                type={field.type}
-                                                placeholder={field.placeholder}
-                                                value={form[field.key]}
-                                                onChange={e => setForm(f => ({ ...f, [field.key]: e.target.value }))}
-                                                style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
-                                            />
-                                        </div>
-                                    ))}
-                                    <div>
-                                        <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>Estado</label>
-                                        <select value={form.status} onChange={e => setForm(f => ({ ...f, status: e.target.value }))} style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}>
-                                            <option>Activo</option><option>Inactivo</option><option>Licencia</option>
-                                        </select>
-                                    </div>
-                                </div>
-                            )}
+            {/* Modal body */}
+            <div style={{ padding: "24px 28px" }}>
+              {modalMode === "view" && selectedTeacher && !form.name ? (
+                <div>
+                  {/* Avatar grande */}
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 16,
+                      marginBottom: 24,
+                      padding: "16px",
+                      background: "#F8FAFC",
+                      borderRadius: 12,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 64,
+                        height: 64,
+                        borderRadius: 16,
+                        background: "linear-gradient(135deg, #1E3A8A, #FBBF24)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 22,
+                        fontWeight: 800,
+                        color: "white",
+                        boxShadow: "0 4px 16px rgba(30,58,138,0.3)",
+                      }}
+                    >
+                      {selectedTeacher.avatar}
+                    </div>
+                    <div>
+                      <div
+                        style={{
+                          fontWeight: 700,
+                          fontSize: 18,
+                          color: "#1E293B",
+                        }}
+                      >
+                        {selectedTeacher.name}
+                      </div>
+                      <div style={{ fontSize: 13, color: "#64748B" }}>
+                        {selectedTeacher.degree}
+                      </div>
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 5,
+                          background: statusConfig[selectedTeacher.status]?.bg,
+                          color: statusConfig[selectedTeacher.status]?.color,
+                          borderRadius: 20,
+                          padding: "3px 10px",
+                          fontSize: 12,
+                          fontWeight: 700,
+                          marginTop: 4,
+                        }}
+                      >
+                        <span
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            background:
+                              statusConfig[selectedTeacher.status]?.dot,
+                            display: "inline-block",
+                          }}
+                        />
+                        {selectedTeacher.status}
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "1fr 1fr",
+                      gap: 14,
+                    }}
+                  >
+                    {[
+                      {
+                        icon: "📚",
+                        label: "Materia",
+                        val: selectedTeacher.subject,
+                      },
+                      {
+                        icon: "📧",
+                        label: "Correo",
+                        val: selectedTeacher.email,
+                      },
+                      {
+                        icon: "📞",
+                        label: "Teléfono",
+                        val: selectedTeacher.phone,
+                      },
+                      {
+                        icon: "📅",
+                        label: "Fecha de Ingreso",
+                        val: selectedTeacher.joined,
+                      },
+                    ].map((item, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          background: "#F8FAFC",
+                          borderRadius: 10,
+                          padding: "12px 14px",
+                          border: "1px solid #E2E8F0",
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontSize: 11,
+                            color: "#94A3B8",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.07em",
+                            marginBottom: 4,
+                          }}
+                        >
+                          {item.icon} {item.label}
                         </div>
-
-                        {/* Modal footer */}
-                        <div style={{ padding: "16px 28px 24px", display: "flex", justifyContent: "flex-end", gap: 10 }}>
-                            <button onClick={() => setShowModal(false)} style={{ padding: "10px 22px", borderRadius: 9, border: "1.5px solid #E2E8F0", background: "white", color: "#64748B", fontWeight: 600, fontSize: 13.5, cursor: "pointer" }}>
-                                {modalMode === "view" ? "Cerrar" : "Cancelar"}
-                            </button>
-                            {(modalMode === "add" || modalMode === "edit") && (
-                                <button onClick={handleSave} className="action-btn" style={{ padding: "10px 24px", borderRadius: 9, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13.5, cursor: "pointer", boxShadow: "0 4px 12px rgba(37,99,235,0.35)" }}>
-                                    {modalMode === "add" ? "Guardar Docente" : "Actualizar Docente"}
-                                </button>
-                            )}
+                        <div
+                          style={{
+                            fontSize: 13.5,
+                            color: "#334155",
+                            fontWeight: 500,
+                          }}
+                        >
+                          {item.val}
                         </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div
+                  style={{ display: "flex", flexDirection: "column", gap: 16 }}
+                >
+                  {[
+                    {
+                      label: "Nombre Completo",
+                      key: "name",
+                      type: "text",
+                      placeholder: "Ej. María García López",
+                    },
+                    {
+                      label: "Materia que imparte",
+                      key: "subject",
+                      type: "text",
+                      placeholder: "Ej. Cálculo Diferencial",
+                    },
+                    {
+                      label: "Correo Institucional",
+                      key: "email",
+                      type: "email",
+                      placeholder: "docente@universidad.edu",
+                    },
+                    {
+                      label: "Teléfono",
+                      key: "phone",
+                      type: "text",
+                      placeholder: "+502 0000-0000",
+                    },
+                    {
+                      label: "Grado Académico",
+                      key: "degree",
+                      type: "text",
+                      placeholder: "Ej. MSc. Ingeniería de Software",
+                    },
+                  ].map((field) => (
+                    <div key={field.key}>
+                      <label
+                        style={{
+                          display: "block",
+                          fontSize: 12.5,
+                          fontWeight: 700,
+                          color: "#374151",
+                          marginBottom: 6,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.06em",
+                        }}
+                      >
+                        {field.label}
+                      </label>
+                      <input
+                        type={field.type}
+                        placeholder={field.placeholder}
+                        value={form[field.key]}
+                        onChange={(e) =>
+                          setForm((f) => ({
+                            ...f,
+                            [field.key]: e.target.value,
+                          }))
+                        }
+                        style={{
+                          width: "100%",
+                          height: 40,
+                          border: "1.5px solid #E2E8F0",
+                          borderRadius: 9,
+                          padding: "0 14px",
+                          fontSize: 13.5,
+                          color: "#334155",
+                          background: "#F8FAFC",
+                        }}
+                      />
                     </div>
+                  ))}
+                  <div>
+                    <label
+                      style={{
+                        display: "block",
+                        fontSize: 12.5,
+                        fontWeight: 700,
+                        color: "#374151",
+                        marginBottom: 6,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.06em",
+                      }}
+                    >
+                      Estado
+                    </label>
+                    <select
+                      value={form.status}
+                      onChange={(e) =>
+                        setForm((f) => ({ ...f, status: e.target.value }))
+                      }
+                      style={{
+                        width: "100%",
+                        height: 40,
+                        border: "1.5px solid #E2E8F0",
+                        borderRadius: 9,
+                        padding: "0 14px",
+                        fontSize: 13.5,
+                        color: "#334155",
+                        background: "#F8FAFC",
+                      }}
+                    >
+                      <option>Activo</option>
+                      <option>Inactivo</option>
+                      <option>Licencia</option>
+                    </select>
+                  </div>
                 </div>
-            )}
+              )}
+            </div>
+
+            {/* Modal footer */}
+            <div
+              style={{
+                padding: "16px 28px 24px",
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 10,
+              }}
+            >
+              <button
+                onClick={() => setShowModal(false)}
+                style={{
+                  padding: "10px 22px",
+                  borderRadius: 9,
+                  border: "1.5px solid #E2E8F0",
+                  background: "white",
+                  color: "#64748B",
+                  fontWeight: 600,
+                  fontSize: 13.5,
+                  cursor: "pointer",
+                }}
+              >
+                {modalMode === "view" ? "Cerrar" : "Cancelar"}
+              </button>
+              {(modalMode === "add" || modalMode === "edit") && (
+                <button
+                  onClick={handleSave}
+                  className="action-btn"
+                  style={{
+                    padding: "10px 24px",
+                    borderRadius: 9,
+                    border: "none",
+                    background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                    color: "white",
+                    fontWeight: 700,
+                    fontSize: 13.5,
+                    cursor: "pointer",
+                    boxShadow: "0 4px 12px rgba(37,99,235,0.35)",
+                  }}
+                >
+                  {modalMode === "add"
+                    ? "Guardar Docente"
+                    : "Actualizar Docente"}
+                </button>
+              )}
+            </div>
+          </div>
         </div>
-    );
+      )}
+    </div>
+  );
 }

From 7d3be1e2f42968d27bc8ec286500c70e7289d90d Mon Sep 17 00:00:00 2001
From: dpalik500 <dpalik500@gmail.com>
Date: Thu, 26 Mar 2026 22:01:17 -0500
Subject: [PATCH 30/46] Add schedules module with backend API and frontend
 integration

---
 backend/config/db.js                          |  15 ++
 backend/controllers/schedulesController.js    | 115 ++++++++++++++
 backend/controllers/teachersController.js     |  38 +++++
 .../migrations/001_create_schedules_table.js  |  28 ++++
 backend/models/schedulesModel.js              | 120 +++++++++++++++
 backend/models/teachesModel.js                |  48 ++++++
 backend/routes/schedulesRoutes.js             |  27 ++++
 backend/routes/teachersRoutes.js              |  12 ++
 backend/server.js                             |  17 +++
 backend/teachersRoutes.js                     |   0
 eslint.config.js                              |  12 ++
 src/api/scheduleAPI.js                        |  58 +++++++
 .../schedule/views/AddScheduleEntry.jsx       | 142 +++++++++++++-----
 src/modules/schedule/views/CalendarView.jsx   |  64 ++++++--
 .../schedule/views/TeachersSchedule.jsx       |  86 ++++++++---
 src/modules/schedule/views/WeeklyView.jsx     |  83 +++++++---
 src/pages/Teachers.jsx                        |   2 +-
 17 files changed, 778 insertions(+), 89 deletions(-)
 create mode 100644 backend/config/db.js
 create mode 100644 backend/controllers/schedulesController.js
 create mode 100644 backend/controllers/teachersController.js
 create mode 100644 backend/migrations/001_create_schedules_table.js
 create mode 100644 backend/models/schedulesModel.js
 create mode 100644 backend/models/teachesModel.js
 create mode 100644 backend/routes/schedulesRoutes.js
 create mode 100644 backend/routes/teachersRoutes.js
 create mode 100644 backend/server.js
 create mode 100644 backend/teachersRoutes.js
 create mode 100644 src/api/scheduleAPI.js

diff --git a/backend/config/db.js b/backend/config/db.js
new file mode 100644
index 0000000..7a1e9c0
--- /dev/null
+++ b/backend/config/db.js
@@ -0,0 +1,15 @@
+const path = require('path');
+const dotenv = require('dotenv');
+const { Pool } = require('pg');
+
+dotenv.config({ path: path.resolve(__dirname, '../../.env') });
+
+const pool = new Pool({
+    user: process.env.DB_USER,
+    host: process.env.DB_HOST,
+    database: process.env.DB_NAME,
+    password: process.env.DB_PASSWORD,
+    port: process.env.DB_PORT,
+});
+
+module.exports = pool;
\ No newline at end of file
diff --git a/backend/controllers/schedulesController.js b/backend/controllers/schedulesController.js
new file mode 100644
index 0000000..5802331
--- /dev/null
+++ b/backend/controllers/schedulesController.js
@@ -0,0 +1,115 @@
+const schedulesModel = require('../models/schedulesModel');
+const teachersModel = require('../models/teachesModel');
+
+exports.getSchedules = async (req, res) => {
+    try {
+        const schedules = await schedulesModel.getAllSchedules();
+        res.json(schedules);
+    } catch (error) {
+        console.error('Error getting schedules:', error);
+        res.status(500).json({ error: 'Failed to fetch schedules' });
+    }
+};
+
+exports.getScheduleById = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const schedule = await schedulesModel.getScheduleById(id);
+        if (!schedule) {
+            return res.status(404).json({ error: 'Schedule not found' });
+        }
+        res.json(schedule);
+    } catch (error) {
+        console.error('Error getting schedule:', error);
+        res.status(500).json({ error: 'Failed to fetch schedule' });
+    }
+};
+
+exports.getSchedulesByTeacher = async (req, res) => {
+    try {
+        const { teacherId } = req.params;
+        const schedules = await schedulesModel.getSchedulesByTeacher(teacherId);
+        res.json(schedules);
+    } catch (error) {
+        console.error('Error getting schedules by teacher:', error);
+        res.status(500).json({ error: 'Failed to fetch schedules by teacher' });
+    }
+};
+
+exports.createSchedule = async (req, res) => {
+    try {
+        const { teacher_id, subject, day, start_time, end_time, room, group_name } = req.body;
+
+        // Validate required fields
+        if (!teacher_id || !subject || !day || !start_time || !end_time || !room || !group_name) {
+            return res.status(400).json({ 
+                error: 'Missing required fields: teacher_id, subject, day, start_time, end_time, room, group_name' 
+            });
+        }
+
+        // Verify teacher exists
+        const teacher = await teachersModel.getTeacherById(teacher_id);
+        if (!teacher) {
+            return res.status(404).json({ error: 'Teacher not found' });
+        }
+
+        const schedule = await schedulesModel.createSchedule({
+            teacher_id,
+            subject,
+            day,
+            start_time,
+            end_time,
+            room,
+            group_name
+        });
+
+        res.status(201).json(schedule);
+    } catch (error) {
+        console.error('Error creating schedule:', error);
+        res.status(500).json({ error: 'Failed to create schedule' });
+    }
+};
+
+exports.updateSchedule = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const { teacher_id, subject, day, start_time, end_time, room, group_name } = req.body;
+
+        const schedule = await schedulesModel.updateSchedule(id, {
+            teacher_id,
+            subject,
+            day,
+            start_time,
+            end_time,
+            room,
+            group_name
+        });
+
+        res.json(schedule);
+    } catch (error) {
+        console.error('Error updating schedule:', error);
+        res.status(500).json({ error: 'Failed to update schedule' });
+    }
+};
+
+exports.deleteSchedule = async (req, res) => {
+    try {
+        const { id } = req.params;
+        await schedulesModel.deleteSchedule(id);
+        res.status(204).end();
+    } catch (error) {
+        console.error('Error deleting schedule:', error);
+        res.status(500).json({ error: 'Failed to delete schedule' });
+    }
+};
+
+exports.getTeachers = async (req, res) => {
+    try {
+        const teachers = await teachersModel.getAllTeachers();
+        res.json(teachers);
+    } catch (error) {
+        console.error('Error getting teachers:', error);
+        res.status(500).json({ error: 'Failed to fetch teachers' });
+    }
+};
+
diff --git a/backend/controllers/teachersController.js b/backend/controllers/teachersController.js
new file mode 100644
index 0000000..b373de3
--- /dev/null
+++ b/backend/controllers/teachersController.js
@@ -0,0 +1,38 @@
+const teacherModel = require('../models/teachesModel');
+
+
+exports.getTeachers = async (req, res) => {
+    const teachers = await teacherModel.getAllTeachers();
+    res.json(teachers);
+}
+
+exports.newTeacher = async (req, res) => {
+    const { name, email, phone, mat } = req.body;
+    const newTeacher = await teacherModel.newTeacheradd({ name, email, phone, mat });
+    res.status(201).json(newTeacher);
+}
+
+exports.getTeacherById = async (req, res) => {
+    const { id } = req.params;
+    const teacher = await teacherModel.getTeacherById(id);
+    res.json(teacher);
+}
+
+exports.createTeacher = async (req, res) => {
+    const { name, subject, email, phone, degree, status, avatar } = req.body;
+    const newTeacher = await teacherModel.createTeacher({ name, subject, email, phone, degree, status, avatar });
+    res.status(201).json(newTeacher);
+}
+
+exports.updateTeacher = async (req, res) => {
+    const { id } = req.params;
+    const { name, subject, email, phone, degree, status, avatar } = req.body;
+    const updatedTeacher = await teacherModel.updateTeacher(id, { name, subject, email, phone, degree, status, avatar });
+    res.json(updatedTeacher);
+}
+
+exports.deleteTeacher = async (req, res) => {
+    const { id } = req.params;
+    await teacherModel.deleteTeacher(id);
+    res.status(204).end();
+}
diff --git a/backend/migrations/001_create_schedules_table.js b/backend/migrations/001_create_schedules_table.js
new file mode 100644
index 0000000..4e97bc8
--- /dev/null
+++ b/backend/migrations/001_create_schedules_table.js
@@ -0,0 +1,28 @@
+const pool = require('../config/db');
+
+async function createSchedulesTable() {
+    try {
+        await pool.query(`
+            CREATE TABLE IF NOT EXISTS schedules (
+                id SERIAL PRIMARY KEY,
+                teacher_id INTEGER NOT NULL REFERENCES teachers(id) ON DELETE CASCADE,
+                subject VARCHAR(255) NOT NULL,
+                day VARCHAR(50) NOT NULL,
+                start_time VARCHAR(5) NOT NULL,
+                end_time VARCHAR(5) NOT NULL,
+                room VARCHAR(100) NOT NULL,
+                group_name VARCHAR(50) NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            );
+        `);
+        console.log('✓ Таблица schedules успешно создана');
+        process.exit(0);
+    } catch (error) {
+        console.error('Ошибка при создании таблицы:', error);
+        process.exit(1);
+    }
+}
+
+createSchedulesTable();
+
diff --git a/backend/models/schedulesModel.js b/backend/models/schedulesModel.js
new file mode 100644
index 0000000..b734933
--- /dev/null
+++ b/backend/models/schedulesModel.js
@@ -0,0 +1,120 @@
+const pool = require('../config/db');
+
+exports.getAllSchedules = async () => {
+    const result = await pool.query(`
+        SELECT 
+            s.id,
+            s.teacher_id,
+            s.subject,
+            s.day,
+            s.start_time,
+            s.end_time,
+            s.room,
+            s.group_name as group,
+            s.created_at,
+            t.name as teacher_name,
+            t.subject as teacher_subject
+        FROM schedules s
+        LEFT JOIN teachers t ON s.teacher_id = t.id
+        ORDER BY s.day, s.start_time
+    `);
+    return result.rows;
+};
+
+exports.getScheduleById = async (id) => {
+    const result = await pool.query(`
+        SELECT 
+            s.id,
+            s.teacher_id,
+            s.subject,
+            s.day,
+            s.start_time,
+            s.end_time,
+            s.room,
+            s.group_name as group,
+            s.created_at,
+            t.name as teacher_name,
+            t.subject as teacher_subject
+        FROM schedules s
+        LEFT JOIN teachers t ON s.teacher_id = t.id
+        WHERE s.id = $1
+    `, [id]);
+    return result.rows[0];
+};
+
+exports.getSchedulesByTeacher = async (teacherId) => {
+    const result = await pool.query(`
+        SELECT 
+            s.id,
+            s.teacher_id,
+            s.subject,
+            s.day,
+            s.start_time,
+            s.end_time,
+            s.room,
+            s.group_name as group,
+            s.created_at,
+            t.name as teacher_name,
+            t.subject as teacher_subject
+        FROM schedules s
+        LEFT JOIN teachers t ON s.teacher_id = t.id
+        WHERE s.teacher_id = $1
+        ORDER BY s.day, s.start_time
+    `, [teacherId]);
+    return result.rows;
+};
+
+exports.createSchedule = async (schedule) => {
+    const { teacher_id, subject, day, start_time, end_time, room, group_name } = schedule;
+    
+    const result = await pool.query(
+        `INSERT INTO schedules (teacher_id, subject, day, start_time, end_time, room, group_name)
+         VALUES ($1, $2, $3, $4, $5, $6, $7)
+         RETURNING 
+            id,
+            teacher_id,
+            subject,
+            day,
+            start_time,
+            end_time,
+            room,
+            group_name as group,
+            created_at
+        `,
+        [teacher_id, subject, day, start_time, end_time, room, group_name]
+    );
+    return result.rows[0];
+};
+
+exports.updateSchedule = async (id, schedule) => {
+    const { teacher_id, subject, day, start_time, end_time, room, group_name } = schedule;
+    
+    const result = await pool.query(
+        `UPDATE schedules 
+         SET teacher_id = $1, subject = $2, day = $3, start_time = $4, end_time = $5, room = $6, group_name = $7, updated_at = CURRENT_TIMESTAMP
+         WHERE id = $8
+         RETURNING 
+            id,
+            teacher_id,
+            subject,
+            day,
+            start_time,
+            end_time,
+            room,
+            group_name as group,
+            created_at,
+            updated_at
+        `,
+        [teacher_id, subject, day, start_time, end_time, room, group_name, id]
+    );
+    return result.rows[0];
+};
+
+exports.deleteSchedule = async (id) => {
+    const result = await pool.query(
+        'DELETE FROM schedules WHERE id = $1 RETURNING id',
+        [id]
+    );
+    return result.rows[0];
+};
+
diff --git a/backend/models/teachesModel.js b/backend/models/teachesModel.js
new file mode 100644
index 0000000..1af2a0b
--- /dev/null
+++ b/backend/models/teachesModel.js
@@ -0,0 +1,48 @@
+const pool = require('../config/db');
+
+
+exports.getAllTeachers = async () => {
+    const result = await pool.query('SELECT * FROM teachers order by name');
+    return result.rows;
+}
+
+exports.newTeacher = async () => {
+    const {name, email, phone, mat} = newteacher
+
+    const result = await pool.query('INSERT INTO teachers (name, email, phone, mat) VALUES ($1, $2, $3, $4) RETURNING *', [name, email, phone, mat])
+    return result.rows[0];
+
+}
+
+exports.getTeacherById = async (id) => {
+    const result = await pool.query('SELECT * FROM teachers WHERE id = $1', [id]);
+    return result.rows[0];
+}
+
+exports.createTeacher = async (teacher) => {
+    const {name, subject, email, phone, degree, status, avatar} = teacher
+
+    const result = await pool.query(
+        'INSERT INTO teachers (name, subject, email, phone, degree, status, avatar) VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *',
+        [name, subject, email, phone, degree, status, avatar]
+    )
+    return result.rows[0];
+}
+
+exports.updateTeacher = async (id, teacher) => {
+    const {name, subject, email, phone, degree, status, avatar} = teacher
+
+    const result = await pool.query(
+        'UPDATE teachers SET name = $1, subject = $2, email = $3, phone = $4, degree = $5, status = $6, avatar = $7 WHERE id = $8 RETURNING *',
+        [name, subject, email, phone, degree, status, avatar, id]
+    )
+    return result.rows[0];
+};
+
+exports.deleteTeacher = async (id) => {
+    const result = await pool.query(
+        'DELETE FROM teachers WHERE id = $1 RETURNING *',
+        [id]
+    )
+    return result.rows[0];
+}
\ No newline at end of file
diff --git a/backend/routes/schedulesRoutes.js b/backend/routes/schedulesRoutes.js
new file mode 100644
index 0000000..4606f22
--- /dev/null
+++ b/backend/routes/schedulesRoutes.js
@@ -0,0 +1,27 @@
+const express = require('express');
+const router = express.Router();
+const controller = require('../controllers/schedulesController');
+
+// Get all schedules
+router.get('/', controller.getSchedules);
+
+// Get schedule by ID
+router.get('/:id', controller.getScheduleById);
+
+// Get schedules by teacher
+router.get('/teacher/:teacherId', controller.getSchedulesByTeacher);
+
+// Get all teachers (for the form dropdown)
+router.get('/data/teachers', controller.getTeachers);
+
+// Create new schedule
+router.post('/', controller.createSchedule);
+
+// Update schedule
+router.put('/:id', controller.updateSchedule);
+
+// Delete schedule
+router.delete('/:id', controller.deleteSchedule);
+
+module.exports = router;
+
diff --git a/backend/routes/teachersRoutes.js b/backend/routes/teachersRoutes.js
new file mode 100644
index 0000000..b1a08bd
--- /dev/null
+++ b/backend/routes/teachersRoutes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+const controller = require('../controllers/teachersController');
+
+router.get('/', controller.getTeachers);
+router.post('/', controller.createTeacher);
+router.get('/:id', controller.getTeacherById);
+router.put('/:id', controller.updateTeacher);
+router.delete('/:id', controller.deleteTeacher);
+router.post('/add/teacher/', controller.newTeacher)
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
new file mode 100644
index 0000000..d42f695
--- /dev/null
+++ b/backend/server.js
@@ -0,0 +1,17 @@
+const express = require('express');
+const cors = require('cors');
+
+const teachersRoutes = require('./routes/teachersRoutes');
+const schedulesRoutes = require('./routes/schedulesRoutes');
+const app = express();
+
+
+app.use(cors());
+app.use(express.json());
+
+app.use('/api/teachers', teachersRoutes);
+app.use('/api/schedules', schedulesRoutes);
+
+const PORT = 3000;
+
+app.listen(PORT, () => console.log('Backend Server running on port 3000. Access http://localhost:3000/api/teachers'));
diff --git a/backend/teachersRoutes.js b/backend/teachersRoutes.js
new file mode 100644
index 0000000..e69de29
diff --git a/eslint.config.js b/eslint.config.js
index 4fa125d..9b81d51 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,8 +6,20 @@ import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
   globalIgnores(['dist']),
+  {
+    files: ['backend/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'commonjs',
+      globals: globals.node,
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
   {
     files: ['**/*.{js,jsx}'],
+    ignores: ['backend/**'],
     extends: [
       js.configs.recommended,
       reactHooks.configs.flat.recommended,
diff --git a/src/api/scheduleAPI.js b/src/api/scheduleAPI.js
new file mode 100644
index 0000000..ab25d6a
--- /dev/null
+++ b/src/api/scheduleAPI.js
@@ -0,0 +1,58 @@
+const API_BASE_URL = 'http://localhost:3000/api';
+
+export const scheduleAPI = {
+  getSchedules: async () => {
+    const response = await fetch(`${API_BASE_URL}/schedules`);
+    if (!response.ok) throw new Error('Failed to fetch schedules');
+    return response.json();
+  },
+
+  getTeachers: async () => {
+    const response = await fetch(`${API_BASE_URL}/schedules/data/teachers`);
+    if (!response.ok) throw new Error('Failed to fetch teachers');
+    return response.json();
+  },
+
+  createSchedule: async (scheduleData) => {
+    const response = await fetch(`${API_BASE_URL}/schedules`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(scheduleData),
+    });
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Failed to create schedule');
+    }
+    return response.json();
+  },
+
+  getScheduleById: async (id) => {
+    const response = await fetch(`${API_BASE_URL}/schedules/${id}`);
+    if (!response.ok) throw new Error('Failed to fetch schedule');
+    return response.json();
+  },
+
+  updateSchedule: async (id, scheduleData) => {
+    const response = await fetch(`${API_BASE_URL}/schedules/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(scheduleData),
+    });
+    if (!response.ok) throw new Error('Failed to update schedule');
+    return response.json();
+  },
+
+  deleteSchedule: async (id) => {
+    const response = await fetch(`${API_BASE_URL}/schedules/${id}`, {
+      method: 'DELETE',
+    });
+    if (!response.ok) throw new Error('Failed to delete schedule');
+  },
+
+  getSchedulesByTeacher: async (teacherId) => {
+    const response = await fetch(`${API_BASE_URL}/schedules/teacher/${teacherId}`);
+    if (!response.ok) throw new Error('Failed to fetch schedules by teacher');
+    return response.json();
+  },
+};
+
diff --git a/src/modules/schedule/views/AddScheduleEntry.jsx b/src/modules/schedule/views/AddScheduleEntry.jsx
index bba33e7..d0ccad2 100644
--- a/src/modules/schedule/views/AddScheduleEntry.jsx
+++ b/src/modules/schedule/views/AddScheduleEntry.jsx
@@ -1,26 +1,81 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { TEACHERS, ROOMS, TIME_SLOTS, DAYS } from "../data/mockData";
+import { ROOMS, TIME_SLOTS, DAYS } from "../data/mockData";
+import { scheduleAPI } from "../../../api/scheduleAPI";
 
 export default function AddScheduleEntry() {
   const navigate = useNavigate();
+  const [teachers, setTeachers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
   const [form, setForm] = useState({
-    teacherId: "", subject: "", day: "", startSlot: "", endSlot: "", room: "", group: "",
+    teacher_id: "", subject: "", day: "", startSlot: "", endSlot: "", room: "", group_name: "",
   });
   const [saved, setSaved] = useState(false);
 
+  // Load teachers from API
+  useEffect(() => {
+    const fetchTeachers = async () => {
+      try {
+        setLoading(true);
+        const data = await scheduleAPI.getTeachers();
+        setTeachers(data);
+      } catch (err) {
+        setError("Error loading teachers: " + err.message);
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchTeachers();
+  }, []);
+
   const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
 
-  const isValid = form.teacherId && form.day && form.startSlot && form.endSlot && form.room && form.group
+  const getTimeFromSlot = (slotId) => {
+    const slot = TIME_SLOTS.find(s => s.id === parseInt(slotId));
+    return slot ? slot.start : "";
+  };
+
+  const getEndTimeFromSlot = (slotId) => {
+    const slot = TIME_SLOTS.find(s => s.id === parseInt(slotId));
+    return slot ? slot.end : "";
+  };
+
+  const isValid = form.teacher_id && form.day && form.startSlot && form.endSlot && form.room && form.group_name
     && parseInt(form.endSlot) > parseInt(form.startSlot);
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (!isValid) return;
-    setSaved(true);
-    setTimeout(() => navigate("/horarios"), 1200);
+    
+    try {
+      setSaved(true);
+      setError("");
+      
+      const startTime = getTimeFromSlot(form.startSlot);
+      const endTime = getEndTimeFromSlot(form.endSlot);
+
+      const scheduleData = {
+        teacher_id: parseInt(form.teacher_id),
+        subject: form.subject,
+        day: form.day,
+        start_time: startTime,
+        end_time: endTime,
+        room: form.room,
+        group_name: form.group_name,
+      };
+
+      await scheduleAPI.createSchedule(scheduleData);
+      
+      setTimeout(() => navigate("/horarios"), 1200);
+    } catch (err) {
+      setError("Error saving schedule: " + err.message);
+      setSaved(false);
+      console.error(err);
+    }
   };
 
-  const selT = TEACHERS.find(t => t.id === form.teacherId);
+  const selT = teachers.find(t => t.id === parseInt(form.teacher_id));
 
   return (
     <div className="max-w-2xl mx-auto">
@@ -33,6 +88,12 @@ export default function AddScheduleEntry() {
       <h1 className="text-2xl font-bold text-gray-800 mb-1">Agregar Clase</h1>
       <p className="text-gray-500 text-sm mb-6">Registra una nueva sesión en el horario semanal</p>
 
+      {error && (
+        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
       <div className="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
 
         {/* Teacher */}
@@ -40,33 +101,45 @@ export default function AddScheduleEntry() {
           <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
             Seleccionar Docente
           </label>
-          <div className="grid sm:grid-cols-2 gap-2">
-            {TEACHERS.map(t => (
-              <button key={t.id} onClick={() => { set("teacherId", t.id); set("subject", t.subject); }}
-                className="flex items-center gap-3 p-3 rounded-xl border text-left transition-all hover:shadow-sm"
-                style={form.teacherId === t.id
-                  ? { borderColor: t.color, background: `${t.color}10`, boxShadow: `0 0 0 2px ${t.color}30` }
-                  : { borderColor: "#e5e7eb", background: "#fafafa" }
-                }
-              >
-                <div
-                  className="w-9 h-9 rounded-xl flex items-center justify-center font-bold text-sm text-white flex-shrink-0 shadow-sm"
-                  style={{ background: t.color }}
-                >
-                  {t.avatar}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <p className="text-sm font-semibold text-gray-800 truncate">{t.name}</p>
-                  <p className="text-xs text-gray-400 truncate">{t.subject}</p>
-                </div>
-                {form.teacherId === t.id && <span className="text-sm flex-shrink-0" style={{ color: t.color }}>✓</span>}
-              </button>
-            ))}
-          </div>
+          {loading ? (
+            <p className="text-gray-400 text-sm">Cargando docentes...</p>
+          ) : teachers.length === 0 ? (
+            <p className="text-gray-400 text-sm">No hay docentes disponibles</p>
+          ) : (
+            <div className="grid sm:grid-cols-2 gap-2">
+              {teachers.map(t => {
+                const colors = ["#4f46e5", "#0284c7", "#d97706", "#059669", "#db2777", "#7c3aed"];
+                const colorIndex = t.id % colors.length;
+                const color = colors[colorIndex];
+                const avatar = t.name.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase();
+                
+                return (
+                  <button key={t.id} onClick={() => { set("teacher_id", t.id); set("subject", t.subject || ""); }}
+                    className="flex items-center gap-3 p-3 rounded-xl border text-left transition-all hover:shadow-sm"
+                    style={form.teacher_id === String(t.id)
+                      ? { borderColor: color, background: `${color}10`, boxShadow: `0 0 0 2px ${color}30` }
+                      : { borderColor: "#e5e7eb", background: "#fafafa" }
+                    }
+                  >
+                    <div
+                      className="w-9 h-9 rounded-xl flex items-center justify-center font-bold text-sm text-white flex-shrink-0 shadow-sm"
+                      style={{ background: color }}
+                    >
+                      {avatar}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-semibold text-gray-800 truncate">{t.name}</p>
+                      <p className="text-xs text-gray-400 truncate">{t.subject || t.email}</p>
+                    </div>
+                    {form.teacher_id === String(t.id) && <span className="text-sm flex-shrink-0" style={{ color }}>✓</span>}
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
 
         <div className="p-6 space-y-5">
-          {/* Subject */}
           <div>
             <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Materia</label>
             <input type="text" value={form.subject} onChange={e => set("subject", e.target.value)} placeholder="Nombre de la materia"
@@ -75,7 +148,6 @@ export default function AddScheduleEntry() {
             />
           </div>
 
-          {/* Day & Group */}
           <div className="grid sm:grid-cols-2 gap-5">
             <div>
               <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Día</label>
@@ -95,14 +167,13 @@ export default function AddScheduleEntry() {
             </div>
             <div>
               <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Grupo</label>
-              <input type="text" value={form.group} onChange={e => set("group", e.target.value)} placeholder="Ej: 3A"
+              <input type="text" value={form.group_name} onChange={e => set("group_name", e.target.value)} placeholder="Ej: 3A"
                 className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-800 placeholder-gray-400
                            focus:outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100"
               />
             </div>
           </div>
 
-          {/* Time */}
           <div>
             <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Horario</label>
             <div className="grid grid-cols-2 gap-4">
@@ -132,7 +203,6 @@ export default function AddScheduleEntry() {
             )}
           </div>
 
-          {/* Room */}
           <div>
             <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Aula</label>
             <div className="flex flex-wrap gap-1.5">
diff --git a/src/modules/schedule/views/CalendarView.jsx b/src/modules/schedule/views/CalendarView.jsx
index cc43dd3..cae0a29 100644
--- a/src/modules/schedule/views/CalendarView.jsx
+++ b/src/modules/schedule/views/CalendarView.jsx
@@ -1,6 +1,7 @@
-import { useState, useMemo } from "react";
-import { INITIAL_CLOSED_DAYS, INITIAL_SCHEDULE, TEACHERS } from "../data/mockData";
+import { useState, useMemo, useEffect } from "react";
+import { INITIAL_CLOSED_DAYS, TIME_SLOTS } from "../data/mockData";
 import LessonModal from "../components/LessonModal";
+import { scheduleAPI } from "../../../api/scheduleAPI";
 
 const MONTH_NAMES = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
 const DOW_NAMES   = ["Dom","Lun","Mar","Mié","Jue","Vie","Sáb"];
@@ -18,6 +19,48 @@ export default function CalendarView() {
   const [month, setMonth] = useState(now.getMonth());
   const [selDate, setSel] = useState(null);
   const [modal, setModal] = useState(null);
+  const [schedules, setSchedules] = useState([]);
+  const [teachers, setTeachers] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [schedulesData, teachersData] = await Promise.all([
+          scheduleAPI.getSchedules(),
+          scheduleAPI.getTeachers()
+        ]);
+        setSchedules(schedulesData);
+        setTeachers(teachersData);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const getTeacherColor = (teacherId) => {
+    const colors = ["#4f46e5", "#0284c7", "#d97706", "#059669", "#db2777", "#7c3aed"];
+    return colors[teacherId % colors.length];
+  };
+
+  const convertToSlot = (timeString) => {
+    const slot = TIME_SLOTS.find(s => s.start === timeString);
+    return slot ? slot.id : 1;
+  };
+
+  const convertedSchedules = useMemo(() => {
+    return schedules.map(s => ({
+      id: s.id,
+      teacherId: s.teacher_id,
+      day: s.day,
+      subject: s.subject,
+      room: s.room,
+      group: s.group,
+      startSlot: convertToSlot(s.start_time),
+      endSlot: convertToSlot(s.end_time),
+      teacher_name: s.teacher_name
+    }));
+  }, [schedules]);
 
   const closedMap = useMemo(() => {
     const m = {};
@@ -29,7 +72,7 @@ export default function CalendarView() {
   const firstDow    = new Date(year, month, 1).getDay();
   const cells       = [...Array(firstDow).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
   const fmt         = d => `${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
-  const todayStr    = fmt.call(null, null) && `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,"0")}-${String(now.getDate()).padStart(2,"0")}`;
+  const todayStr    = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,"0")}-${String(now.getDate()).padStart(2,"0")}`;
 
   const prev = () => month === 0  ? (setMonth(11), setYear(y => y - 1)) : setMonth(m => m - 1);
   const next = () => month === 11 ? (setMonth(0),  setYear(y => y + 1)) : setMonth(m => m + 1);
@@ -38,11 +81,10 @@ export default function CalendarView() {
     if (!selDate) return [];
     const dow     = new Date(selDate + "T12:00").getDay();
     const dayName = DOW_TO_DAY[dow];
-    return dayName ? INITIAL_SCHEDULE.filter(l => l.day === dayName) : [];
-  }, [selDate]);
-
+    return dayName ? convertedSchedules.filter(l => l.day === dayName) : [];
+  }, [selDate, convertedSchedules]);
   return (
-    <div>
+      <div>
       <h1 className="text-2xl font-bold text-gray-800 mb-1">Calendario Académico</h1>
       <p className="text-gray-500 text-sm mb-5">Festivos, días cerrados y clases por día</p>
 
@@ -134,15 +176,16 @@ export default function CalendarView() {
                   <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Clases del día</p>
                   <div className="space-y-2">
                     {selLessons.map(l => {
-                      const t = TEACHERS.find(x => x.id === l.teacherId);
+                      const t = teachers.find(x => x.id === l.teacherId);
+                      const color = getTeacherColor(l.teacherId);
                       return (
                         <button key={l.id} onClick={() => setModal(l)}
                           className="w-full text-left p-3 rounded-xl border border-gray-100 hover:border-gray-200 hover:bg-gray-50 transition-all"
-                          style={{ borderLeft: `3px solid ${t?.color}` }}
+                          style={{ borderLeft: `3px solid ${color}` }}
                         >
                           <p className="text-sm font-medium text-gray-800">{l.subject}</p>
                           <p className="text-xs text-gray-400 mt-0.5">{l.room} · Grupo {l.group}</p>
-                          <p className="text-xs mt-0.5 font-medium" style={{ color: t?.color }}>{t?.name}</p>
+                          <p className="text-xs mt-0.5 font-medium" style={{ color }}>{t?.name}</p>
                         </button>
                       );
                     })}
@@ -189,3 +232,4 @@ export default function CalendarView() {
     </div>
   );
 }
+
diff --git a/src/modules/schedule/views/TeachersSchedule.jsx b/src/modules/schedule/views/TeachersSchedule.jsx
index 10e75c0..9c3c785 100644
--- a/src/modules/schedule/views/TeachersSchedule.jsx
+++ b/src/modules/schedule/views/TeachersSchedule.jsx
@@ -1,25 +1,70 @@
-import { useState, useMemo } from "react";
-import { TEACHERS, INITIAL_SCHEDULE, TIME_SLOTS, DAYS } from "../data/mockData";
+import { useState, useMemo, useEffect } from "react";
+import { TIME_SLOTS, DAYS } from "../data/mockData";
 import LessonModal from "../components/LessonModal";
 import SearchBar from "../components/SearchBar";
+import { scheduleAPI } from "../../../api/scheduleAPI";
 
 export default function TeachersSchedule() {
   const [query,    setQuery]    = useState("");
   const [modal,    setModal]    = useState(null);
   const [expanded, setExpanded] = useState(null);
+  const [teachers, setTeachers] = useState([]);
+  const [schedules, setSchedules] = useState([]);
+  const [loading, setLoading]   = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [teachersData, schedulesData] = await Promise.all([
+          scheduleAPI.getTeachers(),
+          scheduleAPI.getSchedules()
+        ]);
+        setTeachers(teachersData);
+        setSchedules(schedulesData);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const getTeacherColor = (teacherId) => {
+    const colors = ["#4f46e5", "#0284c7", "#d97706", "#059669", "#db2777", "#7c3aed"];
+    return colors[teacherId % colors.length];
+  };
+
+  const getTeacherInitials = (name) => {
+    return name.split(" ").slice(0, 2).map(n => n[0]).join("");
+  };
+
+  const convertToSlot = (timeString) => {
+    const slot = TIME_SLOTS.find(s => s.start === timeString);
+    return slot ? slot.id : 1;
+  };
 
   const filtered = useMemo(() => {
     const q = query.toLowerCase();
-    if (!q) return TEACHERS;
-    return TEACHERS.filter(t =>
+    if (!q) return teachers;
+    return teachers.filter(t =>
       t.id.toLowerCase().includes(q)         ||
       t.name.toLowerCase().includes(q)       ||
-      t.subject.toLowerCase().includes(q)    ||
-      t.department.toLowerCase().includes(q)
+      t.subject.toLowerCase().includes(q)
     );
-  }, [query]);
+  }, [query, teachers]);
 
-  const getLessons = id => INITIAL_SCHEDULE.filter(l => l.teacherId === id);
+  const getLessons = id => schedules.filter(l => l.teacher_id === id).map(s => ({
+    id: s.id,
+    teacherId: s.teacher_id,
+    day: s.day,
+    subject: s.subject,
+    room: s.room,
+    group: s.group,
+    startSlot: convertToSlot(s.start_time),
+    endSlot: convertToSlot(s.end_time)
+  }));
+  
   const slotStart  = id => TIME_SLOTS[id - 1]?.start ?? "";
   const slotEnd    = id => TIME_SLOTS[id - 1]?.end   ?? "";
   const totalHours = id => getLessons(id).reduce((s, l) => s + (l.endSlot - l.startSlot), 0);
@@ -45,23 +90,24 @@ export default function TeachersSchedule() {
           const lessons = getLessons(teacher.id);
           const isOpen  = expanded === teacher.id;
           const hours   = totalHours(teacher.id);
+          const color   = getTeacherColor(teacher.id);
+          const initials = getTeacherInitials(teacher.name);
 
           return (
             <div
               key={teacher.id}
               className="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm"
-              style={{ borderLeft: `4px solid ${teacher.color}` }}
+              style={{ borderLeft: `4px solid ${color}` }}
             >
-              {/* Row */}
               <button
                 onClick={() => setExpanded(isOpen ? null : teacher.id)}
                 className="w-full flex items-center gap-4 px-5 py-4 hover:bg-gray-50 transition-colors text-left"
               >
                 <div
                   className="w-11 h-11 rounded-xl flex items-center justify-center font-bold text-white text-base flex-shrink-0 shadow-sm"
-                  style={{ background: teacher.color }}
+                  style={{ background: color }}
                 >
-                  {teacher.avatar}
+                  {initials}
                 </div>
 
                 <div className="flex-1 min-w-0">
@@ -69,7 +115,7 @@ export default function TeachersSchedule() {
                     <span className="font-semibold text-gray-800 text-sm">{teacher.name}</span>
                     <span className="text-xs font-mono bg-gray-100 text-gray-500 px-2 py-0.5 rounded-md">{teacher.id}</span>
                   </div>
-                  <p className="text-xs text-gray-400 mt-0.5">{teacher.subject} · {teacher.department}</p>
+                  <p className="text-xs text-gray-400 mt-0.5">{teacher.subject}</p>
                 </div>
 
                 <div className="hidden sm:flex items-center gap-6 flex-shrink-0">
@@ -78,20 +124,19 @@ export default function TeachersSchedule() {
                     <p className="text-xs text-gray-400">clases</p>
                   </div>
                   <div className="text-center">
-                    <p className="text-lg font-bold" style={{ color: teacher.color }}>{hours}h</p>
+                    <p className="text-lg font-bold" style={{ color }}>{hours}h</p>
                     <p className="text-xs text-gray-400">sem.</p>
                   </div>
                 </div>
 
                 <div
                   className="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs ml-2 transition-transform duration-200 flex-shrink-0"
-                  style={{ borderColor: teacher.color, color: teacher.color, transform: isOpen ? "rotate(180deg)" : "rotate(0)" }}
+                  style={{ borderColor: color, color, transform: isOpen ? "rotate(180deg)" : "rotate(0)" }}
                 >
                   ▼
                 </div>
               </button>
 
-              {/* Expanded */}
               {isOpen && (
                 <div className="border-t border-gray-100 px-5 pb-5 pt-4">
                   {lessons.length === 0 ? (
@@ -104,13 +149,13 @@ export default function TeachersSchedule() {
                           onClick={() => setModal(lesson)}
                           className="text-left p-3.5 rounded-xl border hover:shadow-md transition-all hover:scale-[1.02] active:scale-95"
                           style={{
-                            background: `${teacher.color}08`,
-                            borderColor: `${teacher.color}25`,
+                            background: `${color}08`,
+                            borderColor: `${color}25`,
                           }}
                         >
                           <span
                             className="inline-block text-xs font-semibold px-2 py-0.5 rounded-md mb-2"
-                            style={{ background: `${teacher.color}20`, color: teacher.color }}
+                            style={{ background: `${color}20`, color }}
                           >
                             {lesson.day}
                           </span>
@@ -122,7 +167,6 @@ export default function TeachersSchedule() {
                     </div>
                   )}
 
-                  {/* Mini weekly bar */}
                   <div className="mt-4 pt-4 border-t border-gray-100">
                     <p className="text-xs text-gray-400 uppercase tracking-wider font-semibold mb-3">Semana</p>
                     <div className="flex gap-1.5">
@@ -137,7 +181,7 @@ export default function TeachersSchedule() {
                               <div
                                 key={l.id}
                                 className="h-8 rounded-lg text-xs flex items-center justify-center font-medium cursor-pointer hover:opacity-70 transition-opacity"
-                                style={{ background: `${teacher.color}20`, color: teacher.color }}
+                                style={{ background: `${color}20`, color }}
                                 onClick={() => setModal(l)}
                               >
                                 {slotStart(l.startSlot)}
diff --git a/src/modules/schedule/views/WeeklyView.jsx b/src/modules/schedule/views/WeeklyView.jsx
index 7c768f2..01795da 100644
--- a/src/modules/schedule/views/WeeklyView.jsx
+++ b/src/modules/schedule/views/WeeklyView.jsx
@@ -1,23 +1,64 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { TEACHERS, TIME_SLOTS, DAYS, INITIAL_SCHEDULE } from "../data/mockData";
+import { TIME_SLOTS, DAYS } from "../data/mockData";
 import LessonModal from "../components/LessonModal";
 import SearchBar from "../components/SearchBar";
+import { scheduleAPI } from "../../../api/scheduleAPI";
 
 export default function WeeklyView() {
   const [modal, setModal]           = useState(null);
   const [query, setQuery]           = useState("");
   const [teacherFilter, setTeacher] = useState("all");
+  const [schedules, setSchedules]   = useState([]);
+  const [teachers, setTeachers]     = useState([]);
+  const [loading, setLoading]       = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [schedulesData, teachersData] = await Promise.all([
+          scheduleAPI.getSchedules(),
+          scheduleAPI.getTeachers()
+        ]);
+        setSchedules(schedulesData);
+        setTeachers(teachersData);
+      } catch (error) {
+        console.error('Error loading schedules:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const convertToSlot = (timeString) => {
+    const slot = TIME_SLOTS.find(s => s.start === timeString);
+    return slot ? slot.id : 1;
+  };
+
+  const convertedSchedules = useMemo(() => {
+    return schedules.map(s => ({
+      id: s.id,
+      teacherId: s.teacher_id,
+      day: s.day,
+      subject: s.subject,
+      room: s.room,
+      group: s.group,
+      startSlot: convertToSlot(s.start_time),
+      endSlot: convertToSlot(s.end_time),
+      teacher_name: s.teacher_name
+    }));
+  }, [schedules]);
 
   const filtered = useMemo(() => {
-    let r = INITIAL_SCHEDULE;
-    if (teacherFilter !== "all") r = r.filter(l => l.teacherId === teacherFilter);
+    let r = convertedSchedules;
+    if (teacherFilter !== "all") r = r.filter(l => l.teacherId === parseInt(teacherFilter));
     if (query.trim()) {
       const q = query.toLowerCase();
       r = r.filter(l => {
-        const t = TEACHERS.find(t => t.id === l.teacherId);
+        const t = teachers.find(t => t.id === l.teacherId);
         return (
-          l.teacherId.toLowerCase().includes(q) ||
+          String(l.teacherId).toLowerCase().includes(q) ||
           l.subject.toLowerCase().includes(q) ||
           t?.name.toLowerCase().includes(q) ||
           l.room.toLowerCase().includes(q) ||
@@ -26,16 +67,18 @@ export default function WeeklyView() {
       });
     }
     return r;
-  }, [query, teacherFilter]);
+  }, [query, teacherFilter, convertedSchedules, teachers]);
 
   const isCont = (day, slotId) =>
     filtered.some(l => l.day === day && l.startSlot < slotId && l.endSlot >= slotId);
 
-  const getT = id => TEACHERS.find(t => t.id === id);
+  const getTeacherColor = (teacherId) => {
+    const colors = ["#4f46e5", "#0284c7", "#d97706", "#059669", "#db2777", "#7c3aed"];
+    return colors[teacherId % colors.length];
+  };
 
   return (
     <div>
-      {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
         <div>
           <h1 className="text-2xl font-bold text-gray-800">Vista Semanal</h1>
@@ -49,7 +92,6 @@ export default function WeeklyView() {
         </Link>
       </div>
 
-      {/* Filters */}
       <div className="flex flex-col sm:flex-row gap-3 mb-6">
         <div className="flex-1">
           <SearchBar query={query} onChange={setQuery} placeholder="Buscar por ID, docente, materia, aula, grupo..." />
@@ -60,7 +102,7 @@ export default function WeeklyView() {
           className="px-3 py-2.5 bg-white border border-gray-200 rounded-xl text-sm text-gray-700 focus:outline-none focus:border-indigo-400 shadow-sm min-w-[220px]"
         >
           <option value="all">Todos los docentes</option>
-          {TEACHERS.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+          {teachers.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
         </select>
       </div>
 
@@ -70,7 +112,6 @@ export default function WeeklyView() {
         </p>
       )}
 
-      {/* Grid */}
       <div className="rounded-2xl border border-gray-200 overflow-hidden bg-white shadow-sm">
         <div className="overflow-x-auto">
           <table className="w-full min-w-[860px]" style={{ borderCollapse: "collapse" }}>
@@ -94,7 +135,8 @@ export default function WeeklyView() {
                     return (
                       <td key={day} className="p-0.5 align-top">
                         {lessons.map(lesson => {
-                          const teacher = getT(lesson.teacherId);
+                          const teacher = teachers.find(t => t.id === lesson.teacherId);
+                          const color = getTeacherColor(lesson.teacherId);
                           const span = lesson.endSlot - lesson.startSlot;
                           return (
                             <button
@@ -102,8 +144,8 @@ export default function WeeklyView() {
                               onClick={() => setModal(lesson)}
                               className="w-full text-left rounded-lg p-2 transition-all hover:scale-[1.03] hover:shadow-md active:scale-95 group"
                               style={{
-                                background: `${teacher?.color}12`,
-                                borderLeft: `3px solid ${teacher?.color}`,
+                                background: `${color}12`,
+                                borderLeft: `3px solid ${color}`,
                                 minHeight: `${span * 50 + (span - 1) * 4}px`,
                                 display: "flex",
                                 flexDirection: "column",
@@ -111,11 +153,11 @@ export default function WeeklyView() {
                               }}
                             >
                               <span className="text-xs font-semibold text-gray-700 leading-tight line-clamp-2">{lesson.subject}</span>
-                              <span className="text-xs font-mono" style={{ color: teacher?.color }}>{teacher?.avatar}</span>
+                              <span className="text-xs font-mono" style={{ color }}>{teacher?.avatar || "TE"}</span>
                               <span className="text-xs text-gray-400">{lesson.room}</span>
                               <span
                                 className="text-xs px-1.5 py-0.5 rounded-md font-semibold self-start mt-auto"
-                                style={{ background: `${teacher?.color}20`, color: teacher?.color }}
+                                style={{ background: `${color}20`, color }}
                               >
                                 {lesson.group}
                               </span>
@@ -132,12 +174,11 @@ export default function WeeklyView() {
         </div>
       </div>
 
-      {/* Legend */}
       <div className="flex flex-wrap gap-4 mt-4">
-        {TEACHERS.map(t => (
+        {teachers.map((t, idx) => (
           <div key={t.id} className="flex items-center gap-1.5">
-            <div className="w-2.5 h-2.5 rounded-sm" style={{ background: t.color }} />
-            <span className="text-xs text-gray-500">{t.name.split(" ").slice(1, 3).join(" ")}</span>
+            <div className="w-2.5 h-2.5 rounded-sm" style={{ background: getTeacherColor(t.id) }} />
+            <span className="text-xs text-gray-500">{t.name.split(" ").slice(0, 2).join(" ")}</span>
           </div>
         ))}
       </div>
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index 2d775ac..41c7b01 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const initialTeachers = [
     { id: 1, name: "Leydi Xequeb", subject: "Matemáticas", email: "l.xequeb@universidad.edu", phone: "+502 5555-0101", status: "Activo", degree: "MSc. Matemáticas Aplicadas", joined: "2019-03-15", avatar: "LX" },

From 271e5a09f1c68cfd286e6b057e7f63bc9b15ec93 Mon Sep 17 00:00:00 2001
From: NESTOR ALEJANDRO CHIQUIL CHE
 <nestoralejandrochiquilche@MacBook-Air-de-NESTOR-2.local>
Date: Thu, 26 Mar 2026 22:22:54 -0500
Subject: [PATCH 31/46] Cambios en config

---
 .vscode/extensions.json                       |    5 +
 backend/config/db.js                          |    9 +
 backend/controllers/SystemConfigController.js |   89 +
 backend/controllers/teachersController.js     |   25 +
 backend/models/SystemConfigModel.js           |   89 +
 backend/models/teachersModel.js               |   37 +
 backend/package-lock.json                     | 1021 +++++++++++
 backend/package.json                          |   21 +
 backend/routes/SystemConfigRoutes.js          |   24 +-
 backend/routes/teachersRoutes.js              |   16 +
 backend/server.js                             |   32 +
 src/components/Sidebar.jsx                    |  217 ++-
 src/pages/SystemConfig.jsx                    |  138 +-
 src/pages/Teachers.jsx                        | 1499 +++++++++++++----
 14 files changed, 2715 insertions(+), 507 deletions(-)
 create mode 100644 .vscode/extensions.json
 create mode 100644 backend/config/db.js
 create mode 100644 backend/controllers/SystemConfigController.js
 create mode 100644 backend/controllers/teachersController.js
 create mode 100644 backend/models/SystemConfigModel.js
 create mode 100644 backend/models/teachersModel.js
 create mode 100644 backend/package-lock.json
 create mode 100644 backend/package.json
 create mode 100644 backend/routes/teachersRoutes.js
 create mode 100644 backend/server.js

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..c785808
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "2guys1account.quackrack-cursor"
+    ]
+}
\ No newline at end of file
diff --git a/backend/config/db.js b/backend/config/db.js
new file mode 100644
index 0000000..9bb3c27
--- /dev/null
+++ b/backend/config/db.js
@@ -0,0 +1,9 @@
+const {Pool} = require('pg');
+const pool = new Pool({
+    user: 'postgres',
+    host: 'localhost',
+    database: 'onTimeclock',
+    password: 'postgres',
+    port:5432
+});
+module.exports = pool;
\ No newline at end of file
diff --git a/backend/controllers/SystemConfigController.js b/backend/controllers/SystemConfigController.js
new file mode 100644
index 0000000..43373d4
--- /dev/null
+++ b/backend/controllers/SystemConfigController.js
@@ -0,0 +1,89 @@
+const {
+    getAllConfigs,
+    getConfigById,
+    createConfig,
+    updateConfig,
+    deleteConfig,
+    getworkdays,    
+    updateworkday   
+} = require('../models/SystemConfigModel');
+
+// Manejador para obtener todas las configuraciones
+exports.getConfigs = async (req, res) => {
+    try {
+        const configs = await getAllConfigs();
+        res.json(configs);
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+};
+
+// Manejador para obtener una configuración por ID
+exports.getConfig = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const config = await getConfigById(id);
+        if (!config) return res.status(404).json({ message: 'Configuración no encontrada' });
+        res.json(config);
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+};
+
+exports.createConfig = async (req, res) => {
+    try {
+        const newConfig = await createConfig(req.body);
+        res.status(201).json(newConfig);
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+};
+
+exports.updateConfig = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const updated = await updateConfig(id, req.body);
+        res.json(updated);
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+};
+
+exports.deleteConfig = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const result = await deleteConfig(id);
+        res.json(result);
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+};
+
+// Manejadores para los días laborales (Work_Days)
+exports.getworkdays = async (req, res) => {
+    try {
+        const days = await getworkdays();
+        res.json(days);
+    } catch (error) {
+        res.status(500).json({ error: 'Error al obtener días laborales' });
+    }
+};
+
+exports.createworkday = async (req, res) => {
+    try {
+        const newDay = await createworkday(req.body);
+        res.status(201).json(newDay);
+    } catch (error) {
+        res.status(500).json({ error: 'Error al crear día laboral' });
+    }
+};
+
+exports.updateworkday = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const updated = await updateworkday(id, req.body);
+        res.json(updated);
+    } catch (error) {
+        res.status(500).json({ error: 'Error al actualizar día laboral' });
+    }
+};
\ No newline at end of file
diff --git a/backend/controllers/teachersController.js b/backend/controllers/teachersController.js
new file mode 100644
index 0000000..61a61cd
--- /dev/null
+++ b/backend/controllers/teachersController.js
@@ -0,0 +1,25 @@
+//controlador para invocar el modelo
+const teacherModel = require("../models/teachersModel");
+
+exports.getTeachers = async (req, res) => {
+    const teachers = await teacherModel.getAllTeachers();
+    res.json(teachers);
+}
+
+exports.createTeacher = async (req, res) => {
+    const teacher = await teacherModel.createTeacher(req.body);
+    res.json(teacher);
+}
+
+exports.updateTeacher = async (req, res) => {
+    const teacher = await teacherModel.updateTeacher(
+        req.params.id, 
+        req.body
+    );
+    res.json(teacher);
+}
+
+exports.deleteTeacher = async (req, res) => {
+    const result = await teacherModel.deleteTeacher(req.params.id);
+    res.json(result);
+}
\ No newline at end of file
diff --git a/backend/models/SystemConfigModel.js b/backend/models/SystemConfigModel.js
new file mode 100644
index 0000000..bac7b41
--- /dev/null
+++ b/backend/models/SystemConfigModel.js
@@ -0,0 +1,89 @@
+const pool = require('../config/db');
+
+// ── Configuración General (Tabla: "system_Config") ──
+exports.getAllConfigs = async () => {
+    const result = await pool.query('SELECT * FROM "system_Config" ORDER BY id');
+    return result.rows;
+};
+
+exports.getConfigById = async (id) => {
+    const result = await pool.query('SELECT * FROM "system_Config" WHERE id = $1', [id]);
+    return result.rows[0];
+};
+
+exports.createConfig = async (config) => {
+    const {
+        nombre_institucion, codigo_institucional, idioma, zona_horaria,
+        tolerancia_entrada, tolerancia_salida, inasistencias_permitidas,
+        email_asistencia, email_reportes, push_alertas,
+        resumen_diario, alertas_faltas, notif_docentes
+    } = config;
+
+    const result = await pool.query(
+        `INSERT INTO "system_Config" (
+            nombre_institucion, codigo_institucional, idioma, zona_horaria,
+            tolerancia_entrada, tolerancia_salida, inasistencias_permitidas,
+            email_asistencia, email_reportes, push_alertas,
+            resumen_diario, alertas_faltas, notif_docentes
+        ) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13) RETURNING *`,
+        [nombre_institucion, codigo_institucional, idioma, zona_horaria,
+         tolerancia_entrada, tolerancia_salida, inasistencias_permitidas,
+         email_asistencia, email_reportes, push_alertas,
+         resumen_diario, alertas_faltas, notif_docentes]
+    );
+    return result.rows[0];
+};
+
+exports.updateConfig = async (id, config) => {
+    const {
+        nombre_institucion, codigo_institucional, idioma, zona_horaria,
+        tolerancia_entrada, tolerancia_salida, inasistencias_permitidas,
+        email_asistencia, email_reportes, push_alertas,
+        resumen_diario, alertas_faltas, notif_docentes
+    } = config;
+
+    const result = await pool.query(
+        `UPDATE "system_Config" SET
+            nombre_institucion=$1, codigo_institucional=$2, idioma=$3, zona_horaria=$4,
+            tolerancia_entrada=$5, tolerancia_salida=$6, inasistencias_permitidas=$7,
+            email_asistencia=$8, email_reportes=$9, push_alertas=$10,
+            resumen_diario=$11, alertas_faltas=$12, notif_docentes=$13,
+            fecha_actualizacion=CURRENT_TIMESTAMP
+        WHERE id=$14 RETURNING *`,
+        [nombre_institucion, codigo_institucional, idioma, zona_horaria,
+         tolerancia_entrada, tolerancia_salida, inasistencias_permitidas,
+         email_asistencia, email_reportes, push_alertas,
+         resumen_diario, alertas_faltas, notif_docentes, id]
+    );
+    return result.rows[0];
+};
+
+exports.deleteConfig = async (id) => {
+    await pool.query('DELETE FROM "system_Config" WHERE id = $1', [id]);
+    return { message: 'Configuración eliminada' };
+};
+
+// ── Work Days (Tabla: "Work_Days") ──
+exports.getworkdays = async () => {
+    const result = await pool.query('SELECT * FROM "work_days"');
+    return result.rows;
+};
+
+exports.updateworkday = async (id, { nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo }) => {
+    const result = await pool.query(
+        `UPDATE "work_days" 
+         SET nombre=$1, dia=$2, hora_inicio=$3, hora_fin=$4, duracion_bloque=$5, activo=$6
+         WHERE id=$7 RETURNING *`,
+        [nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo, id]
+    );
+    return result.rows[0];
+};
+
+exports.createworkday = async ({ nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo }) => {
+    const result = await pool.query(
+        `INSERT INTO "work_days" (nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo)
+         VALUES ($1, $2, $3, $4, $5, $6) RETURNING *`,
+        [nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo]
+    );
+    return result.rows[0];
+};
\ No newline at end of file
diff --git a/backend/models/teachersModel.js b/backend/models/teachersModel.js
new file mode 100644
index 0000000..50c9d18
--- /dev/null
+++ b/backend/models/teachersModel.js
@@ -0,0 +1,37 @@
+//Modelo para acceso ala base de datos de los profesores
+
+const pool = require ('../config/db');
+
+exports.getAllTeachers = async () => {
+
+    const result = await pool.query('SELECT * FROM teachers order by name');
+    return result.rows;
+}
+
+exports.createTeacher = async (teacher) => {
+    const { name, subject,email, phone, degree, status, avatar} = teacher;
+
+    const result = await pool.query(
+        "INSERT INTO teachers (name, subject,email, phone, degree, status, avatar) VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *",
+        [name, subject,email, phone, degree, status, avatar]
+    );
+    return result.rows[0];
+}
+
+exports.updateTeacher = async (id, teacher) => {
+    const { name, subject,email, phone, degree, status, avatar} = teacher;
+
+    const result = await pool.query(
+        "UPDATE teachers SET name = $1, subject = $2, email = $3, phone = $4, degree = $5, status = $6, avatar = $7 WHERE id = $8 RETURNING *",
+        [name, subject,email, phone, degree, status, avatar, id]
+    );
+    return result.rows[0];
+}
+
+exports.deleteTeacher = async (id) => {
+    await pool.query(
+        "DELETE FROM teachers WHERE id = $1",
+        [id]
+    )
+    return { message: "Docente borrado.."}
+}
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
new file mode 100644
index 0000000..8d07f22
--- /dev/null
+++ b/backend/package-lock.json
@@ -0,0 +1,1021 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "backend",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "cord": "^1.0.1",
+        "cors": "^2.8.6",
+        "dotenv": "^17.3.1",
+        "express": "^5.2.1",
+        "pg": "^8.20.0"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cord": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cord/-/cord-1.0.1.tgz",
+      "integrity": "sha512-t56g3YbmUYrEd9wp4VNNY27SoNa8Xm0F9GfT+BZpXG+hNO2LJRgzLYQKgZpFiKkld8MWWuQptydD9dk//5Fe4A==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-connection-string": "^2.12.0",
+        "pg-pool": "^3.13.0",
+        "pg-protocol": "^1.13.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
+      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
+      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
+      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    }
+  }
+}
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..323ce70
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "cord": "^1.0.1",
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "pg": "^8.20.0"
+  }
+}
diff --git a/backend/routes/SystemConfigRoutes.js b/backend/routes/SystemConfigRoutes.js
index 90691e5..97df61a 100644
--- a/backend/routes/SystemConfigRoutes.js
+++ b/backend/routes/SystemConfigRoutes.js
@@ -1,17 +1,17 @@
 const express = require('express');
 const router = express.Router();
-const {
-    getConfigs,
-    getConfig,
-    createConfig,
-    updateConfig,
-    deleteConfig
-} = require('../controllers/SystemConfigController');
+const SystemConfigController = require('../controllers/SystemConfigController');
 
-router.get('/', getConfigs);
-router.get('/:id', getConfig);
-router.post('/', createConfig);
-router.put('/:id', updateConfig);
-router.delete('/:id', deleteConfig);
+// Rutas para Work Days
+router.get('/work-days', SystemConfigController.getworkdays);
+router.post('/work-days', SystemConfigController.createworkday);
+router.put('/work-days/:id', SystemConfigController.updateworkday);
+
+// Rutas para Configuración General
+router.get('/', SystemConfigController.getConfigs);
+router.get('/:id', SystemConfigController.getConfig);
+router.post('/', SystemConfigController.createConfig);
+router.put('/:id', SystemConfigController.updateConfig);
+router.delete('/:id', SystemConfigController.deleteConfig);
 
 module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/teachersRoutes.js b/backend/routes/teachersRoutes.js
new file mode 100644
index 0000000..1965d97
--- /dev/null
+++ b/backend/routes/teachersRoutes.js
@@ -0,0 +1,16 @@
+//se definen los end points para las API de los profesores
+const express = require('express');
+const router = express.Router();
+const{
+    getTeachers,
+    createTeacher,
+    updateTeacher,
+    deleteTeacher   
+} = require('../controllers/teachersController');
+
+router.get("/",getTeachers);
+router.post("/", createTeacher);
+router.put("/:id", updateTeacher);
+router.delete("/:id", deleteTeacher);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
new file mode 100644
index 0000000..dc6b59b
--- /dev/null
+++ b/backend/server.js
@@ -0,0 +1,32 @@
+const express = require("express");
+const cors = require("cors");
+const teachersRoutes = require("./routes/teachersRoutes");
+// Añade esta línea después de las otras importaciones
+const systemConfigRoutes = require('./routes/SystemConfigRoutes');
+
+
+const app = express();
+
+app.use(express.json());
+
+app.use(cors());  // Asumiendo que tienes 'const cors = require('cors');' agregado en otro lugar
+
+app.use("/api/teachers", teachersRoutes);
+
+app.use('/api/systemconfig', systemConfigRoutes);
+
+
+
+
+
+const PORT = 3000;
+app.get("/", (req, res) => {
+    res.send("Bienvenido a la API de profesores");
+});
+
+
+
+
+app.listen(PORT, () => {
+    console.log("Servidor corriendo en el puerto: " + PORT);
+});
\ No newline at end of file
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 2e3ac37..8117248 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,7 +1,5 @@
-// archivo: src/components/Sidebar.jsx
-
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import { 
     HomeIcon, 
@@ -11,7 +9,7 @@ import {
     UserGroupIcon, 
     ClockIcon, 
     DocumentChartBarIcon, 
-    CalendarDaysIcon,   // NUEVO ICONO
+    CalendarDaysIcon,
     Bars3Icon, 
     MagnifyingGlassIcon, 
     ArrowLeftOnRectangleIcon, 
@@ -22,14 +20,26 @@ import {
 function Sidebar() {
 
     const [isCollapsed, setIsCollapsed] = useState(false);
+    const location = useLocation();
     const iconSize = 'h-5 w-5';
 
-    return (
+    const linkClass = (path) => {
+        const isActive = path === "/"
+            ? location.pathname === "/"
+            : location.pathname.startsWith(path);
 
-        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white min-h-screen p-6 flex flex-col transition-all duration-300 border-r border-white/10`}>
+        return `flex items-center gap-3 px-3 py-2 rounded-lg transition-all ${
+            isActive
+                ? 'bg-white/10 text-[#f0c02f]'
+                : 'hover:bg-white/10 hover:text-[#f0c02f]'
+        }`;
+    };
+
+    return (
+        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white h-screen overflow-y-auto p-4 flex flex-col transition-all duration-300 border-r border-white/10`}>
 
             {/* CABECERA */}
-            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-8`}>
+            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-6`}>
                 {!isCollapsed && (
                     <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
                         Reloj Checador
@@ -40,127 +50,112 @@ function Sidebar() {
                     onClick={() => setIsCollapsed(!isCollapsed)}
                     className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
                 >
-                    <Bars3Icon className="h-8 w-8" />
+                    <Bars3Icon className="h-7 w-7" />
                 </button>
             </div>
 
+            {/* PERFIL */}
             {!isCollapsed && (
-                <>
-                    {/* PERFIL */}
-                    <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
-                        <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
-                        <div>
-                            <p className="text-xs font-bold truncate">Admin UNID</p>
-                            <p className="text-[10px] text-slate-400">En línea</p>
-                        </div>
-                    </div>
-
-                    {/* BUSCADOR */}
-                    <div className='relative mb-8 px-1'>
-                        <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
-                        <input 
-                            type="text" 
-                            placeholder="Buscar..." 
-                            className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
-                        />
-                    </div>
-
-                    {/* SECCIÓN SITIO */}
-                    <div className='mb-6'>   
-                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Sitio</p>
-
-                        <nav className='flex flex-col gap-5'>
-
-                            <Link to="/" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <HomeIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Inicio</span>
-                            </Link>
-
-                            <Link to="/about" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <InformationCircleIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Acerca de</span>
-                            </Link>
-
-                            <Link to="/contact" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <PhoneIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Contacto</span>
-                            </Link>
-
-                        </nav>
-                    </div>
-
-                    <div className='flex-1' />
-
-                    {/* ADMINISTRACIÓN */}
-                    <div className='mt-4 mb-8'>
-
-                        <p className='text-slate-500 text-[11px] mb-4 uppercase tracking-[2px] font-black'>Administración</p>
-
-                        <nav className='flex flex-col gap-5'>
-
-                            <Link to="/admin" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Squares2X2Icon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Dashboard</span>
-                            </Link>
-
-                            <Link to="/teachers" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <UserGroupIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Maestros</span>
-                            </Link>
-
-                            {/* NUEVO MENU HORARIOS */}
-                            <Link to="/horarios" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <CalendarDaysIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Horarios</span>
-                            </Link>
-
-                            <Link to="/clock" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <ClockIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Reloj</span>
-                            </Link>
-
-                            <Link to="/reports" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <DocumentChartBarIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Reportes</span>
-                            </Link>
-
-                            <Link to="/config" className="flex items-center gap-4 hover:text-[#f0c02f] transition-all group">
-                                <Cog6ToothIcon className={`${iconSize} text-[#f0c02f]`} />
-                                <span className='text-sm font-medium'>Configuración</span>
-                            </Link>
-
-                        </nav>
-
+                <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
+                    <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
+                    <div>
+                        <p className="text-xs font-bold truncate">Admin UNID</p>
+                        <p className="text-[10px] text-slate-400">En línea</p>
                     </div>
+                </div>
+            )}
 
-                </>
+            {/* BUSCADOR */}
+            {!isCollapsed && (
+                <div className='relative mb-6 px-1'>
+                    <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
+                    <input 
+                        type="text" 
+                        placeholder="Buscar..." 
+                        className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
+                    />
+                </div>
             )}
 
-            {isCollapsed && <div className='flex-1' />}
+            {/* NAV */}
+            <div className='flex flex-col gap-4'>
+
+                {/* SITIO */}
+                <div>
+                    {!isCollapsed && (
+                        <p className='text-slate-500 text-[11px] mb-2 uppercase tracking-[2px] font-black'>Sitio</p>
+                    )}
+
+                    <nav className='flex flex-col gap-1'>
+                        <Link to="/" className={linkClass("/")}>
+                            <HomeIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Inicio</span>}
+                        </Link>
+
+                        <Link to="/about" className={linkClass("/about")}>
+                            <InformationCircleIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Acerca de</span>}
+                        </Link>
+
+                        <Link to="/contact" className={linkClass("/contact")}>
+                            <PhoneIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Contacto</span>}
+                        </Link>
+                    </nav>
+                </div>
+
+                {/* ADMIN */}
+                <div>
+                    {!isCollapsed && (
+                        <p className='text-slate-500 text-[11px] mb-2 uppercase tracking-[2px] font-black'>Administración</p>
+                    )}
+
+                    <nav className='flex flex-col gap-1'>
+                        <Link to="/admin" className={linkClass("/admin")}>
+                            <Squares2X2Icon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Dashboard</span>}
+                        </Link>
+
+                        <Link to="/teachers" className={linkClass("/teachers")}>
+                            <UserGroupIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Maestros</span>}
+                        </Link>
+
+                        <Link to="/horarios" className={linkClass("/horarios")}>
+                            <CalendarDaysIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Horarios</span>}
+                        </Link>
+
+                        <Link to="/clock" className={linkClass("/clock")}>
+                            <ClockIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Reloj</span>}
+                        </Link>
+
+                        <Link to="/reports" className={linkClass("/reports")}>
+                            <DocumentChartBarIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Reportes</span>}
+                        </Link>
+
+                        <Link to="/config" className={linkClass("/config")}>
+                            <Cog6ToothIcon className={iconSize} />
+                            {!isCollapsed && <span className='text-sm'>Configuración</span>}
+                        </Link>
+                    </nav>
+                </div>
+            </div>
 
             {/* FOOTER */}
             <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
-
                 {!isCollapsed ? (
-                    <>
-                        <button className='flex items-center gap-4 w-full px-4 py-3 rounded-xl transition-all group hover:bg-red-500/10'>
-                            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500`} />
-                            <span className='text-sm font-bold text-red-500 uppercase tracking-tight'>
-                                Cerrar Sesión
-                            </span>
-                        </button>
-
-                        <div className='mt-4 text-slate-500 text-[10px] px-4 leading-tight opacity-50'> 
-                             Universidad UNID <br />
-                             Playa del Carmen • Admin
-                        </div>
-                    </>
+                    <button className='flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-all hover:bg-red-500/10'>
+                        <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500`} />
+                        <span className='text-sm font-bold text-red-500'>Cerrar Sesión</span>
+                    </button>
                 ) : (
                     <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
                         <ArrowLeftOnRectangleIcon className={iconSize} />
                     </button>
                 )}
-
             </div>
 
         </aside>
diff --git a/src/pages/SystemConfig.jsx b/src/pages/SystemConfig.jsx
index b74321e..eff75d3 100644
--- a/src/pages/SystemConfig.jsx
+++ b/src/pages/SystemConfig.jsx
@@ -1,5 +1,3 @@
-
-
 import { useState } from "react";
 
 // ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
@@ -391,11 +389,17 @@ export default function SystemConfig() {
     inasistencias: 3,
   });
 
-  // --- Estado: Horario base ---
-  const [diasActivos, setDiasActivos] = useState([true, true, true, true, true, false, false]);
-  const [horaInicio, setHoraInicio] = useState("07:00");
-  const [horaFin, setHoraFin] = useState("18:00");
-  const [duracionBloque, setDuracionBloque] = useState("60");
+  // --- Estado: Horario base (por día) ---
+  const [horarioPorDia, setHorarioPorDia] = useState({
+    0: { activo: true,  inicio: "07:00", fin: "18:00" }, // Lun
+    1: { activo: true,  inicio: "07:00", fin: "18:00" }, // Mar
+    2: { activo: true,  inicio: "07:00", fin: "18:00" }, // Mié
+    3: { activo: true,  inicio: "07:00", fin: "18:00" }, // Jue
+    4: { activo: true,  inicio: "07:00", fin: "18:00" }, // Vie
+    5: { activo: false, inicio: "08:00", fin: "14:00" }, // Sáb
+    6: { activo: false, inicio: "08:00", fin: "14:00" }, // Dom
+  });
+  const [diaSeleccionado, setDiaSeleccionado] = useState(0);
 
   // --- Estado: Roles ---
   const [roles, setRoles] = useState(MOCK_ROLES);
@@ -412,9 +416,18 @@ export default function SystemConfig() {
 
   // --- Handlers ---
   const toggleDia = (idx) => {
-    const copia = [...diasActivos];
-    copia[idx] = !copia[idx];
-    setDiasActivos(copia);
+    setHorarioPorDia((prev) => ({
+      ...prev,
+      [idx]: { ...prev[idx], activo: !prev[idx].activo },
+    }));
+    setDiaSeleccionado(idx);
+  };
+
+  const actualizarHorarioDia = (idx, campo, valor) => {
+    setHorarioPorDia((prev) => ({
+      ...prev,
+      [idx]: { ...prev[idx], [campo]: valor },
+    }));
   };
 
   const toggleRolEstado = (id) => {
@@ -590,23 +603,25 @@ export default function SystemConfig() {
         <SectionCard
           icon="📅"
           title="Horario Base"
-          desc="Define los días y horas de operación del sistema"
+          desc="Define el horario de operación para cada día de la semana"
           color="#10b981"
         >
-          <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Días laborables activos</p>
+          <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Selecciona un día para configurar su horario</p>
           <div style={styles.scheduleGrid}>
             {DIAS_SEMANA.map((dia, idx) => (
               <div
                 key={dia}
-                onClick={() => toggleDia(idx)}
+                onClick={() => setDiaSeleccionado(idx)}
                 style={{
                   ...styles.dayCell,
-                  ...(diasActivos[idx] ? styles.dayCellActive : styles.dayCellInactive),
+                  ...(horarioPorDia[idx].activo ? styles.dayCellActive : styles.dayCellInactive),
+                  outline: diaSeleccionado === idx ? "2px solid #10b981" : "none",
+                  outlineOffset: "2px",
                 }}
               >
                 <div>{dia}</div>
                 <div style={{ fontSize: "0.65rem", marginTop: "0.2rem", opacity: 0.7 }}>
-                  {diasActivos[idx] ? "✓" : "—"}
+                  {horarioPorDia[idx].activo ? "✓" : "—"}
                 </div>
               </div>
             ))}
@@ -614,37 +629,72 @@ export default function SystemConfig() {
 
           <div style={styles.divider} />
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Hora de inicio</label>
-              <input
-                type="time"
-                style={styles.input}
-                value={horaInicio}
-                onChange={(e) => setHoraInicio(e.target.value)}
-              />
+          {/* Panel de configuración del día seleccionado */}
+          <div style={{
+            background: horarioPorDia[diaSeleccionado].activo ? "rgba(16,185,129,0.05)" : "rgba(0,0,0,0.03)",
+            border: `1px solid ${horarioPorDia[diaSeleccionado].activo ? "rgba(16,185,129,0.2)" : "rgba(0,0,0,0.08)"}`,
+            borderRadius: "12px",
+            padding: "1.25rem",
+            marginBottom: "1rem",
+          }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
+              <p style={{ margin: 0, fontWeight: "600", fontSize: "0.95rem", color: "#1f2937" }}>
+                {["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"][diaSeleccionado]}
+              </p>
+              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                <span style={{ fontSize: "0.8rem", color: "#6b7280" }}>
+                  {horarioPorDia[diaSeleccionado].activo ? "Activo" : "Inactivo"}
+                </span>
+                <Toggle
+                  checked={horarioPorDia[diaSeleccionado].activo}
+                  onChange={() => toggleDia(diaSeleccionado)}
+                />
+              </div>
             </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Hora de cierre</label>
-              <input
-                type="time"
-                style={styles.input}
-                value={horaFin}
-                onChange={(e) => setHoraFin(e.target.value)}
-              />
+
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", opacity: horarioPorDia[diaSeleccionado].activo ? 1 : 0.4, pointerEvents: horarioPorDia[diaSeleccionado].activo ? "auto" : "none" }}>
+              <div style={styles.fieldGroup}>
+                <label style={styles.label}>Hora de inicio</label>
+                <input
+                  type="time"
+                  style={styles.input}
+                  value={horarioPorDia[diaSeleccionado].inicio}
+                  onChange={(e) => actualizarHorarioDia(diaSeleccionado, "inicio", e.target.value)}
+                />
+              </div>
+              <div style={styles.fieldGroup}>
+                <label style={styles.label}>Hora de cierre</label>
+                <input
+                  type="time"
+                  style={styles.input}
+                  value={horarioPorDia[diaSeleccionado].fin}
+                  onChange={(e) => actualizarHorarioDia(diaSeleccionado, "fin", e.target.value)}
+                />
+              </div>
             </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Duración de bloque</label>
-              <select
-                style={styles.select}
-                value={duracionBloque}
-                onChange={(e) => setDuracionBloque(e.target.value)}
-              >
-                <option value="45">45 minutos</option>
-                <option value="60">60 minutos</option>
-                <option value="90">90 minutos</option>
-                <option value="120">120 minutos</option>
-              </select>
+          </div>
+
+          {/* Resumen de todos los días activos */}
+          <div style={{ marginTop: "0.5rem" }}>
+            <p style={{ ...styles.label, marginBottom: "0.5rem" }}>Resumen semanal</p>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
+              {DIAS_SEMANA.map((dia, idx) => (
+                horarioPorDia[idx].activo && (
+                  <div key={idx} style={{
+                    display: "flex", justifyContent: "space-between", alignItems: "center",
+                    fontSize: "0.82rem", padding: "0.35rem 0.6rem",
+                    background: diaSeleccionado === idx ? "rgba(16,185,129,0.08)" : "transparent",
+                    borderRadius: "6px", cursor: "pointer",
+                  }} onClick={() => setDiaSeleccionado(idx)}>
+                    <span style={{ color: "#374151", fontWeight: diaSeleccionado === idx ? "600" : "400" }}>
+                      {["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"][idx]}
+                    </span>
+                    <span style={{ color: "#6b7280" }}>
+                      {horarioPorDia[idx].inicio} – {horarioPorDia[idx].fin}
+                    </span>
+                  </div>
+                )
+              ))}
             </div>
           </div>
 
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index 2d775ac..eca77b4 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,89 +1,165 @@
-import { useState } from "react";
-
-const initialTeachers = [
-    { id: 1, name: "Leydi Xequeb", subject: "Matemáticas", email: "l.xequeb@universidad.edu", phone: "+502 5555-0101", status: "Activo", degree: "MSc. Matemáticas Aplicadas", joined: "2019-03-15", avatar: "LX" },
-    { id: 2, name: "Irvin Chan", subject: "Programación", email: "i.chan@universidad.edu", phone: "+502 5555-0202", status: "Activo", degree: "Ing. en Sistemas", joined: "2020-08-01", avatar: "IC" },
-    { id: 3, name: "Marcos Rivera", subject: "Fe y Mundo", email: "m.rivera@universidad.edu", phone: "+502 5555-0303", status: "Activo", degree: "Lic. Teología", joined: "2018-01-20", avatar: "MR" },
-    { id: 4, name: "Sandra López", subject: "Física", email: "s.lopez@universidad.edu", phone: "+502 5555-0404", status: "Inactivo", degree: "PhD. Física Teórica", joined: "2017-06-10", avatar: "SL" },
-    { id: 5, name: "Carlos Menéndez", subject: "Química", email: "c.menendez@universidad.edu", phone: "+502 5555-0505", status: "Activo", degree: "MSc. Química Industrial", joined: "2021-02-28", avatar: "CM" },
-    { id: 6, name: "Ana Fuentes", subject: "Inglés", email: "a.fuentes@universidad.edu", phone: "+502 5555-0606", status: "Licencia", degree: "BA. Lenguas Modernas", joined: "2016-09-05", avatar: "AF" },
-];
+import { useState, useEffect } from "react";
 
 const avatarColors = [
-    ["#1E3A8A", "#FBBF24"],
-    ["#1D4ED8", "#F59E0B"],
-    ["#1E40AF", "#FCD34D"],
-    ["#1a3270", "#FBBF24"],
-    ["#2563EB", "#F59E0B"],
-    ["#1E3A8A", "#FDE68A"],
+  ["#1E3A8A", "#FBBF24"],
+  ["#1D4ED8", "#F59E0B"],
+  ["#1E40AF", "#FCD34D"],
+  ["#1a3270", "#FBBF24"],
+  ["#2563EB", "#F59E0B"],
+  ["#1E3A8A", "#FDE68A"],
 ];
 
 const statusConfig = {
-    Activo: { bg: "#D1FAE5", color: "#065F46", dot: "#10B981" },
-    Inactivo: { bg: "#FEE2E2", color: "#991B1B", dot: "#EF4444" },
-    Licencia: { bg: "#FEF3C7", color: "#92400E", dot: "#F59E0B" },
+  Activo: { bg: "#D1FAE5", color: "#065F46", dot: "#10B981" },
+  Inactivo: { bg: "#FEE2E2", color: "#991B1B", dot: "#EF4444" },
+  Licencia: { bg: "#FEF3C7", color: "#92400E", dot: "#F59E0B" },
 };
 
 export default function Teachers() {
-    const [teachers, setTeachers] = useState(initialTeachers);
-    const [search, setSearch] = useState("");
-    const [statusFilter, setStatusFilter] = useState("Todos");
-    const [showModal, setShowModal] = useState(false);
-    const [modalMode, setModalMode] = useState("add"); // "add" | "view" | "edit"
-    const [selectedTeacher, setSelectedTeacher] = useState(null);
-    const [form, setForm] = useState({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" });
-    const [sortField, setSortField] = useState("name");
-    const [sortDir, setSortDir] = useState("asc");
-
-    const filtered = teachers
-        .filter(t => statusFilter === "Todos" || t.status === statusFilter)
-        .filter(t =>
-            t.name.toLowerCase().includes(search.toLowerCase()) ||
-            t.subject.toLowerCase().includes(search.toLowerCase()) ||
-            t.email.toLowerCase().includes(search.toLowerCase())
-        )
-        .sort((a, b) => {
-            const va = a[sortField] || ""; const vb = b[sortField] || "";
-            return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-        });
+  const [teachers, setTeachers] = useState([]);
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("Todos");
+  const [showModal, setShowModal] = useState(false);
+  const [modalMode, setModalMode] = useState("add"); // "add" | "view" | "edit"
+  const [selectedTeacher, setSelectedTeacher] = useState(null);
+  const [form, setForm] = useState({
+    name: "",
+    subject: "",
+    email: "",
+    phone: "",
+    degree: "",
+    status: "Activo",
+  });
+  const [sortField, setSortField] = useState("name");
+  const [sortDir, setSortDir] = useState("asc");
 
-    const handleSort = (field) => {
-        if (sortField === field) setSortDir(d => d === "asc" ? "desc" : "asc");
-        else { setSortField(field); setSortDir("asc"); }
+  //Extraer los datos de la endpoint /api/tecahers
+  useEffect(() => {
+    const fetchTeachers = async () => {
+      try {
+        const response = await fetch("http://localhost:3000/api/teachers");
+        const data = await response.json();
+        setTeachers(data);
+      } catch (error) {
+        console.error("Error al cargar datos", error);
+      }
     };
+    fetchTeachers();
+  }, []);
 
-    const openAdd = () => { setModalMode("add"); setForm({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" }); setShowModal(true); };
-    const openView = (t) => { setModalMode("view"); setSelectedTeacher(t); setShowModal(true); };
-    const openEdit = (t) => { setModalMode("edit"); setSelectedTeacher(t); setForm({ name: t.name, subject: t.subject, email: t.email, phone: t.phone, degree: t.degree, status: t.status }); setShowModal(true); };
+  const filtered = teachers
+    .filter((t) => statusFilter === "Todos" || t.status === statusFilter)
+    .filter(
+      (t) =>
+        t.name.toLowerCase().includes(search.toLowerCase()) ||
+        t.subject.toLowerCase().includes(search.toLowerCase()) ||
+        t.email.toLowerCase().includes(search.toLowerCase()),
+    )
+    .sort((a, b) => {
+      const va = a[sortField] || "";
+      const vb = b[sortField] || "";
+      return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+    });
 
-    const handleSave = () => {
-        if (!form.name.trim()) return;
-        if (modalMode === "edit") {
-            // Editar docente existente
-            setTeachers(prev => prev.map(t => t.id === selectedTeacher.id ? { ...selectedTeacher, ...form } : t));
-        } else {
-            // Agregar nuevo docente
-            const initials = form.name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
-            setTeachers(prev => [...prev, { ...form, id: Date.now(), avatar: initials, joined: new Date().toISOString().split("T")[0] }]);
-        }
-        setShowModal(false);
-    };
+  const handleSort = (field) => {
+    if (sortField === field) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    else {
+      setSortField(field);
+      setSortDir("asc");
+    }
+  };
 
-    const handleDelete = (id) => {
-        if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
-            setTeachers(prev => prev.filter(t => t.id !== id));
-        }
-    };
+  const openAdd = () => {
+    setModalMode("add");
+    setForm({
+      name: "",
+      subject: "",
+      email: "",
+      phone: "",
+      degree: "",
+      status: "Activo",
+    });
+    setShowModal(true);
+  };
+  const openView = (t) => {
+    setModalMode("view");
+    setSelectedTeacher(t);
+    setShowModal(true);
+  };
+  const openEdit = (t) => {
+    setModalMode("edit");
+    setSelectedTeacher(t);
+    setForm({
+      name: t.name,
+      subject: t.subject,
+      email: t.email,
+      phone: t.phone,
+      degree: t.degree,
+      status: t.status,
+      jpoined: t.joined,
+      avatar: t.avatar,
+    });
+    setShowModal(true);
+  };
 
-    const SortIcon = ({ field }) => (
-        <span style={{ marginLeft: 4, opacity: sortField === field ? 1 : 0.3, fontSize: 11 }}>
-            {sortField === field && sortDir === "desc" ? "▼" : "▲"}
-        </span>
-    );
+  const handleSave = () => {
+    if (!form.name.trim()) return;
+    if (modalMode === "edit") {
+      // Editar docente existente
+      setTeachers((prev) =>
+        prev.map((t) =>
+          t.id === selectedTeacher.id ? { ...selectedTeacher, ...form } : t,
+        ),
+      );
+    } else {
+      // Agregar nuevo docente
+      const initials = form.name
+        .split(" ")
+        .map((w) => w[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase();
+      setTeachers((prev) => [
+        ...prev,
+        {
+          ...form,
+          id: Date.now(),
+          avatar: initials,
+          joined: new Date().toISOString().split("T")[0],
+        },
+      ]);
+    }
+    setShowModal(false);
+  };
 
-    return (
-        <div style={{ fontFamily: "'DM Sans', 'Segoe UI', sans-serif", background: "#F0F4FF", minHeight: "100vh", padding: "32px 24px" }}>
-            <style>{`
+  const handleDelete = (id) => {
+    if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
+      setTeachers((prev) => prev.filter((t) => t.id !== id));
+    }
+  };
+
+  const SortIcon = ({ field }) => (
+    <span
+      style={{
+        marginLeft: 4,
+        opacity: sortField === field ? 1 : 0.3,
+        fontSize: 11,
+      }}
+    >
+      {sortField === field && sortDir === "desc" ? "▼" : "▲"}
+    </span>
+  );
+
+  return (
+    <div
+      style={{
+        fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
+        background: "#F0F4FF",
+        minHeight: "100vh",
+        padding: "32px 24px",
+      }}
+    >
+      <style>{`
         @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');
         * { box-sizing: border-box; }
         .th-btn:hover { background: #1E3A8A !important; color: white !important; }
@@ -101,290 +177,1033 @@ export default function Teachers() {
         ::-webkit-scrollbar-thumb { background: #93C5FD; border-radius: 10px; }
       `}</style>
 
-            {/* Header */}
-            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
-                <div>
-                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
-                        <div style={{ width: 40, height: 40, background: "linear-gradient(135deg, #1E3A8A, #2563EB)", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                            </svg>
-                        </div>
-                        <h1 style={{ fontFamily: "'Sora', sans-serif", fontSize: 26, fontWeight: 700, color: "#1E3A8A", margin: 0 }}>
-                            Gestión de Docentes
-                        </h1>
-                    </div>
-                    <p style={{ color: "#64748B", fontSize: 13.5, margin: 0, marginLeft: 50 }}>
-                        Sistema Académico Universitario · {teachers.length} docentes registrados
-                    </p>
-                </div>
-                <button
-                    onClick={openAdd}
-                    className="action-btn"
-                    style={{ display: "flex", alignItems: "center", gap: 8, background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", color: "white", border: "none", borderRadius: 10, padding: "11px 22px", fontWeight: 600, fontSize: 14, cursor: "pointer", boxShadow: "0 4px 14px rgba(37,99,235,0.35)" }}
-                >
-                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                    Agregar Docente
-                </button>
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          marginBottom: 28,
+          flexWrap: "wrap",
+          gap: 16,
+        }}
+      >
+        <div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              marginBottom: 4,
+            }}
+          >
+            <div
+              style={{
+                width: 40,
+                height: 40,
+                background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                borderRadius: 10,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#FBBF24"
+                strokeWidth="2.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
             </div>
+            <h1
+              style={{
+                fontFamily: "'Sora', sans-serif",
+                fontSize: 26,
+                fontWeight: 700,
+                color: "#1E3A8A",
+                margin: 0,
+              }}
+            >
+              Gestión de Docentes
+            </h1>
+          </div>
+          <p
+            style={{
+              color: "#64748B",
+              fontSize: 13.5,
+              margin: 0,
+              marginLeft: 50,
+            }}
+          >
+            Sistema Académico Universitario · {teachers.length} docentes
+            registrados
+          </p>
+        </div>
+        <button
+          onClick={openAdd}
+          className="action-btn"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)",
+            color: "white",
+            border: "none",
+            borderRadius: 10,
+            padding: "11px 22px",
+            fontWeight: 600,
+            fontSize: 14,
+            cursor: "pointer",
+            boxShadow: "0 4px 14px rgba(37,99,235,0.35)",
+          }}
+        >
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Agregar Docente
+        </button>
+      </div>
 
-            {/* Stats bar */}
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 14, marginBottom: 24 }}>
-                {[
-                    { label: "Total Docentes", value: teachers.length, icon: "👥", accent: "#1E3A8A" },
-                    { label: "Activos", value: teachers.filter(t => t.status === "Activo").length, icon: "✅", accent: "#059669" },
-                    { label: "Inactivos", value: teachers.filter(t => t.status === "Inactivo").length, icon: "⛔", accent: "#DC2626" },
-                    { label: "En Licencia", value: teachers.filter(t => t.status === "Licencia").length, icon: "📋", accent: "#D97706" },
-                ].map((s, i) => (
-                    <div key={i} style={{ background: "white", borderRadius: 12, padding: "16px 18px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", borderLeft: `4px solid ${s.accent}` }}>
-                        <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{s.label}</div>
-                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                            <span style={{ fontSize: 28, fontFamily: "'Sora', sans-serif", fontWeight: 700, color: s.accent }}>{s.value}</span>
-                            <span style={{ fontSize: 20 }}>{s.icon}</span>
-                        </div>
-                    </div>
-                ))}
+      {/* Stats bar */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+          gap: 14,
+          marginBottom: 24,
+        }}
+      >
+        {[
+          {
+            label: "Total Docentes",
+            value: teachers.length,
+            icon: "👥",
+            accent: "#1E3A8A",
+          },
+          {
+            label: "Activos",
+            value: teachers.filter((t) => t.status === "Activo").length,
+            icon: "✅",
+            accent: "#059669",
+          },
+          {
+            label: "Inactivos",
+            value: teachers.filter((t) => t.status === "Inactivo").length,
+            icon: "⛔",
+            accent: "#DC2626",
+          },
+          {
+            label: "En Licencia",
+            value: teachers.filter((t) => t.status === "Licencia").length,
+            icon: "📋",
+            accent: "#D97706",
+          },
+        ].map((s, i) => (
+          <div
+            key={i}
+            style={{
+              background: "white",
+              borderRadius: 12,
+              padding: "16px 18px",
+              boxShadow: "0 1px 6px rgba(0,0,0,0.07)",
+              borderLeft: `4px solid ${s.accent}`,
+            }}
+          >
+            <div
+              style={{
+                fontSize: 11,
+                color: "#94A3B8",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.07em",
+                marginBottom: 4,
+              }}
+            >
+              {s.label}
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <span
+                style={{
+                  fontSize: 28,
+                  fontFamily: "'Sora', sans-serif",
+                  fontWeight: 700,
+                  color: s.accent,
+                }}
+              >
+                {s.value}
+              </span>
+              <span style={{ fontSize: 20 }}>{s.icon}</span>
             </div>
+          </div>
+        ))}
+      </div>
 
-            {/* Search & Filter bar */}
-            <div style={{ background: "white", borderRadius: 14, padding: "16px 20px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", marginBottom: 18, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
-                {/* Search */}
-                <div style={{ position: "relative", flex: "1 1 260px", minWidth: 200 }}>
-                    <svg style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "#94A3B8" }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
-                    <input
-                        value={search}
-                        onChange={e => setSearch(e.target.value)}
-                        placeholder="Buscar por nombre, materia o correo..."
-                        style={{ width: "100%", paddingLeft: 38, paddingRight: 14, height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
-                    />
-                </div>
+      {/* Search & Filter bar */}
+      <div
+        style={{
+          background: "white",
+          borderRadius: 14,
+          padding: "16px 20px",
+          boxShadow: "0 1px 6px rgba(0,0,0,0.07)",
+          marginBottom: 18,
+          display: "flex",
+          gap: 12,
+          flexWrap: "wrap",
+          alignItems: "center",
+        }}
+      >
+        {/* Search */}
+        <div style={{ position: "relative", flex: "1 1 260px", minWidth: 200 }}>
+          <svg
+            style={{
+              position: "absolute",
+              left: 12,
+              top: "50%",
+              transform: "translateY(-50%)",
+              color: "#94A3B8",
+            }}
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Buscar por nombre, materia o correo..."
+            style={{
+              width: "100%",
+              paddingLeft: 38,
+              paddingRight: 14,
+              height: 40,
+              border: "1.5px solid #E2E8F0",
+              borderRadius: 9,
+              fontSize: 13.5,
+              color: "#334155",
+              background: "#F8FAFC",
+            }}
+          />
+        </div>
+
+        {/* Status filter */}
+        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+          {["Todos", "Activo", "Inactivo", "Licencia"].map((s) => (
+            <button
+              key={s}
+              onClick={() => setStatusFilter(s)}
+              style={{
+                padding: "7px 14px",
+                borderRadius: 8,
+                fontSize: 13,
+                fontWeight: 600,
+                cursor: "pointer",
+                transition: "all 0.15s",
+                background:
+                  statusFilter === s
+                    ? "linear-gradient(135deg, #1E3A8A, #2563EB)"
+                    : "#F1F5F9",
+                color: statusFilter === s ? "white" : "#64748B",
+                border: statusFilter === s ? "none" : "1.5px solid #E2E8F0",
+              }}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+
+        {/* Results count */}
+        <div
+          style={{
+            marginLeft: "auto",
+            fontSize: 12.5,
+            color: "#94A3B8",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
+        </div>
+      </div>
 
-                {/* Status filter */}
-                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-                    {["Todos", "Activo", "Inactivo", "Licencia"].map(s => (
-                        <button
-                            key={s}
-                            onClick={() => setStatusFilter(s)}
+      {/* Table */}
+      <div
+        style={{
+          background: "white",
+          borderRadius: 14,
+          boxShadow: "0 1px 8px rgba(0,0,0,0.08)",
+          overflow: "hidden",
+        }}
+      >
+        <div style={{ overflowX: "auto" }}>
+          <table
+            style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}
+          >
+            <thead>
+              <tr
+                style={{
+                  background:
+                    "linear-gradient(90deg, #1E3A8A 0%, #1D4ED8 100%)",
+                }}
+              >
+                {[
+                  { label: "Docente", field: "name" },
+                  { label: "Materia", field: "subject" },
+                  { label: "Correo", field: "email" },
+                  { label: "Teléfono", field: "phone" },
+                  { label: "Grado", field: "degree" },
+                  { label: "Estado", field: "status" },
+                  { label: "Ingreso", field: "joined" },
+                  { label: "Acciones", field: null },
+                ].map((col, i) => (
+                  <th
+                    key={i}
+                    onClick={() => col.field && handleSort(col.field)}
+                    className={col.field ? "th-btn" : ""}
+                    style={{
+                      padding: "13px 16px",
+                      textAlign: "left",
+                      fontSize: 11.5,
+                      fontWeight: 700,
+                      color: "#FBBF24",
+                      letterSpacing: "0.08em",
+                      textTransform: "uppercase",
+                      cursor: col.field ? "pointer" : "default",
+                      userSelect: "none",
+                      borderBottom: "2px solid rgba(251,191,36,0.3)",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {col.label}
+                    {col.field && <SortIcon field={col.field} />}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={7}
+                    style={{
+                      textAlign: "center",
+                      padding: "52px 20px",
+                      color: "#94A3B8",
+                    }}
+                  >
+                    <div style={{ fontSize: 40, marginBottom: 10 }}>🔍</div>
+                    <div style={{ fontWeight: 600, fontSize: 15 }}>
+                      Sin resultados
+                    </div>
+                    <div style={{ fontSize: 13 }}>
+                      Intenta cambiar el filtro o la búsqueda
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                filtered.map((t, idx) => {
+                  const sc = statusConfig[t.status] || statusConfig.Activo;
+                  const ac = avatarColors[t.id % avatarColors.length];
+                  return (
+                    <tr
+                      key={t.id}
+                      className="row-hover"
+                      style={{
+                        borderBottom: "1px solid #F1F5F9",
+                        transition: "background 0.12s",
+                        background: idx % 2 === 0 ? "white" : "#FAFBFF",
+                      }}
+                    >
+                      {/* Docente */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 11,
+                          }}
+                        >
+                          <div
                             style={{
-                                padding: "7px 14px", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer", transition: "all 0.15s",
-                                background: statusFilter === s ? "linear-gradient(135deg, #1E3A8A, #2563EB)" : "#F1F5F9",
-                                color: statusFilter === s ? "white" : "#64748B",
-                                border: statusFilter === s ? "none" : "1.5px solid #E2E8F0"
+                              width: 38,
+                              height: 38,
+                              borderRadius: 10,
+                              background: `linear-gradient(135deg, ${ac[0]}, ${ac[1]})`,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontWeight: 700,
+                              fontSize: 13,
+                              color: ac[0] === "#FBBF24" ? "#1E3A8A" : "white",
+                              flexShrink: 0,
+                              boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
                             }}
-                        >{s}</button>
-                    ))}
-                </div>
+                          >
+                            {t.avatar}
+                          </div>
+                          <div>
+                            <div
+                              style={{
+                                fontWeight: 600,
+                                fontSize: 14,
+                                color: "#1E293B",
+                              }}
+                            >
+                              {t.name}
+                            </div>
+                            <div style={{ fontSize: 11.5, color: "#94A3B8" }}>
+                              {t.degree}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      {/* Materia */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <span
+                          style={{
+                            background: "#EFF6FF",
+                            color: "#1D4ED8",
+                            borderRadius: 6,
+                            padding: "3px 10px",
+                            fontSize: 12.5,
+                            fontWeight: 600,
+                          }}
+                        >
+                          {t.subject}
+                        </span>
+                      </td>
+                      {/* Email */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 13,
+                          color: "#475569",
+                        }}
+                      >
+                        {t.email}
+                      </td>
+                      {/* Phone */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 13,
+                          color: "#475569",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {t.phone}
+                      </td>
+                      {/* Status */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <span
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                            background: sc.bg,
+                            color: sc.color,
+                            borderRadius: 20,
+                            padding: "4px 12px",
+                            fontSize: 12,
+                            fontWeight: 700,
+                          }}
+                        >
+                          <span
+                            style={{
+                              width: 7,
+                              height: 7,
+                              borderRadius: "50%",
+                              background: sc.dot,
+                              display: "inline-block",
+                            }}
+                          />
+                          {t.status}
+                        </span>
+                      </td>
+                      {/* Joined */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 12.5,
+                          color: "#94A3B8",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {new Date(t.joined).toISOString().split("T")[0]}
+                      </td>
+                      {/* Actions */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <div style={{ display: "flex", gap: 6 }}>
+                          <button
+                            onClick={() => openView(t)}
+                            className="icon-btn"
+                            title="Ver perfil"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #E2E8F0",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#2563EB"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                              <circle cx="12" cy="12" r="3" />
+                            </svg>
+                          </button>
+                          <button
+                            onClick={() => openEdit(t)}
+                            className="icon-btn"
+                            title="Editar"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #E2E8F0",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#F59E0B"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                            </svg>
+                          </button>
+                          <button
+                            onClick={() => handleDelete(t.id)}
+                            className="icon-btn"
+                            title="Eliminar"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #FEE2E2",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#EF4444"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <polyline points="3 6 5 6 21 6" />
+                              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                              <path d="M10 11v6" />
+                              <path d="M14 11v6" />
+                              <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                            </svg>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
 
-                {/* Results count */}
-                <div style={{ marginLeft: "auto", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>
-                    {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
-                </div>
-            </div>
+        {/* Table footer */}
+        <div
+          style={{
+            padding: "12px 20px",
+            borderTop: "1px solid #F1F5F9",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            background: "#FAFBFF",
+          }}
+        >
+          <span style={{ fontSize: 12.5, color: "#94A3B8" }}>
+            Mostrando {filtered.length} de {teachers.length} docentes
+          </span>
+          <div style={{ display: "flex", gap: 4 }}>
+            {[1].map((p) => (
+              <button
+                key={p}
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 7,
+                  border: "none",
+                  background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                  color: "white",
+                  fontWeight: 700,
+                  fontSize: 13,
+                  cursor: "pointer",
+                }}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
 
-            {/* Table */}
-            <div style={{ background: "white", borderRadius: 14, boxShadow: "0 1px 8px rgba(0,0,0,0.08)", overflow: "hidden" }}>
-                <div style={{ overflowX: "auto" }}>
-                    <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}>
-                        <thead>
-                            <tr style={{ background: "linear-gradient(90deg, #1E3A8A 0%, #1D4ED8 100%)" }}>
-                                {[
-                                    { label: "Docente", field: "name" },
-                                    { label: "Materia", field: "subject" },
-                                    { label: "Correo", field: "email" },
-                                    { label: "Teléfono", field: null },
-                                    { label: "Estado", field: "status" },
-                                    { label: "Ingreso", field: "joined" },
-                                    { label: "Acciones", field: null },
-                                ].map((col, i) => (
-                                    <th
-                                        key={i}
-                                        onClick={() => col.field && handleSort(col.field)}
-                                        className={col.field ? "th-btn" : ""}
-                                        style={{
-                                            padding: "13px 16px", textAlign: "left", fontSize: 11.5, fontWeight: 700,
-                                            color: "#FBBF24", letterSpacing: "0.08em", textTransform: "uppercase",
-                                            cursor: col.field ? "pointer" : "default", userSelect: "none",
-                                            borderBottom: "2px solid rgba(251,191,36,0.3)", whiteSpace: "nowrap"
-                                        }}
-                                    >
-                                        {col.label}{col.field && <SortIcon field={col.field} />}
-                                    </th>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {filtered.length === 0 ? (
-                                <tr>
-                                    <td colSpan={7} style={{ textAlign: "center", padding: "52px 20px", color: "#94A3B8" }}>
-                                        <div style={{ fontSize: 40, marginBottom: 10 }}>🔍</div>
-                                        <div style={{ fontWeight: 600, fontSize: 15 }}>Sin resultados</div>
-                                        <div style={{ fontSize: 13 }}>Intenta cambiar el filtro o la búsqueda</div>
-                                    </td>
-                                </tr>
-                            ) : filtered.map((t, idx) => {
-                                const sc = statusConfig[t.status] || statusConfig.Activo;
-                                const ac = avatarColors[t.id % avatarColors.length];
-                                return (
-                                    <tr key={t.id} className="row-hover" style={{ borderBottom: "1px solid #F1F5F9", transition: "background 0.12s", background: idx % 2 === 0 ? "white" : "#FAFBFF" }}>
-                                        {/* Docente */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
-                                                <div style={{ width: 38, height: 38, borderRadius: 10, background: `linear-gradient(135deg, ${ac[0]}, ${ac[1]})`, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13, color: ac[0] === "#FBBF24" ? "#1E3A8A" : "white", flexShrink: 0, boxShadow: "0 2px 8px rgba(0,0,0,0.15)" }}>
-                                                    {t.avatar}
-                                                </div>
-                                                <div>
-                                                    <div style={{ fontWeight: 600, fontSize: 14, color: "#1E293B" }}>{t.name}</div>
-                                                    <div style={{ fontSize: 11.5, color: "#94A3B8" }}>{t.degree}</div>
-                                                </div>
-                                            </div>
-                                        </td>
-                                        {/* Materia */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <span style={{ background: "#EFF6FF", color: "#1D4ED8", borderRadius: 6, padding: "3px 10px", fontSize: 12.5, fontWeight: 600 }}>{t.subject}</span>
-                                        </td>
-                                        {/* Email */}
-                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569" }}>{t.email}</td>
-                                        {/* Phone */}
-                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569", whiteSpace: "nowrap" }}>{t.phone}</td>
-                                        {/* Status */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: sc.bg, color: sc.color, borderRadius: 20, padding: "4px 12px", fontSize: 12, fontWeight: 700 }}>
-                                                <span style={{ width: 7, height: 7, borderRadius: "50%", background: sc.dot, display: "inline-block" }} />
-                                                {t.status}
-                                            </span>
-                                        </td>
-                                        {/* Joined */}
-                                        <td style={{ padding: "13px 16px", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>{t.joined}</td>
-                                        {/* Actions */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <div style={{ display: "flex", gap: 6 }}>
-                                                <button onClick={() => openView(t)} className="icon-btn" title="Ver perfil" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="2.2" strokeLinecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
-                                                </button>
-                                                <button onClick={() => openEdit(t)} className="icon-btn" title="Editar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.2" strokeLinecap="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>
-                                                </button>
-                                                <button onClick={() => handleDelete(t.id)} className="icon-btn" title="Eliminar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #FEE2E2", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.2" strokeLinecap="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>
-                                                </button>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                );
-                            })}
-                        </tbody>
-                    </table>
+      {/* Modal */}
+      {showModal && (
+        <div
+          className="modal-overlay"
+          onClick={() => setShowModal(false)}
+          style={{
+            position: "fixed",
+            inset: 0,
+            background: "rgba(15,23,42,0.55)",
+            backdropFilter: "blur(4px)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1000,
+            padding: 20,
+          }}
+        >
+          <div
+            className="modal-box"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              background: "white",
+              borderRadius: 18,
+              width: "100%",
+              maxWidth: 520,
+              boxShadow: "0 24px 64px rgba(0,0,0,0.22)",
+              overflow: "hidden",
+            }}
+          >
+            {/* Modal header */}
+            <div
+              style={{
+                background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)",
+                padding: "22px 28px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <div
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: 10,
+                    background: "rgba(251,191,36,0.2)",
+                    border: "2px solid #FBBF24",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#FBBF24"
+                    strokeWidth="2.2"
+                    strokeLinecap="round"
+                  >
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
                 </div>
-
-                {/* Table footer */}
-                <div style={{ padding: "12px 20px", borderTop: "1px solid #F1F5F9", display: "flex", justifyContent: "space-between", alignItems: "center", background: "#FAFBFF" }}>
-                    <span style={{ fontSize: 12.5, color: "#94A3B8" }}>Mostrando {filtered.length} de {teachers.length} docentes</span>
-                    <div style={{ display: "flex", gap: 4 }}>
-                        {[1].map(p => (
-                            <button key={p} style={{ width: 30, height: 30, borderRadius: 7, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13, cursor: "pointer" }}>{p}</button>
-                        ))}
-                    </div>
+                <div>
+                  <h2
+                    style={{
+                      fontFamily: "'Sora', sans-serif",
+                      color: "white",
+                      margin: 0,
+                      fontSize: 18,
+                      fontWeight: 700,
+                    }}
+                  >
+                    {modalMode === "add"
+                      ? "Nuevo Docente"
+                      : modalMode === "edit"
+                        ? "Editar Docente"
+                        : selectedTeacher?.name}
+                  </h2>
+                  <p style={{ color: "#93C5FD", margin: 0, fontSize: 12.5 }}>
+                    {modalMode === "add"
+                      ? "Completar información del docente"
+                      : modalMode === "edit"
+                        ? "Actualizar información del docente"
+                        : selectedTeacher?.subject}
+                  </p>
                 </div>
+              </div>
+              <button
+                onClick={() => setShowModal(false)}
+                style={{
+                  width: 34,
+                  height: 34,
+                  borderRadius: 8,
+                  border: "1.5px solid rgba(255,255,255,0.25)",
+                  background: "transparent",
+                  color: "white",
+                  fontSize: 18,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                ×
+              </button>
             </div>
 
-            {/* Modal */}
-            {showModal && (
-                <div className="modal-overlay" onClick={() => setShowModal(false)} style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 20 }}>
-                    <div className="modal-box" onClick={e => e.stopPropagation()} style={{ background: "white", borderRadius: 18, width: "100%", maxWidth: 520, boxShadow: "0 24px 64px rgba(0,0,0,0.22)", overflow: "hidden" }}>
-                        {/* Modal header */}
-                        <div style={{ background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", padding: "22px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-                                <div style={{ width: 40, height: 40, borderRadius: 10, background: "rgba(251,191,36,0.2)", border: "2px solid #FBBF24", display: "flex", alignItems: "center", justifyContent: "center" }}>
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
-                                </div>
-                                <div>
-                                    <h2 style={{ fontFamily: "'Sora', sans-serif", color: "white", margin: 0, fontSize: 18, fontWeight: 700 }}>
-                                        {modalMode === "add" ? "Nuevo Docente" : modalMode === "edit" ? "Editar Docente" : selectedTeacher?.name}
-                                    </h2>
-                                    <p style={{ color: "#93C5FD", margin: 0, fontSize: 12.5 }}>
-                                        {modalMode === "add" ? "Completar información del docente" : modalMode === "edit" ? "Actualizar información del docente" : selectedTeacher?.subject}
-                                    </p>
-                                </div>
-                            </div>
-                            <button onClick={() => setShowModal(false)} style={{ width: 34, height: 34, borderRadius: 8, border: "1.5px solid rgba(255,255,255,0.25)", background: "transparent", color: "white", fontSize: 18, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
-                        </div>
-
-                        {/* Modal body */}
-                        <div style={{ padding: "24px 28px" }}>
-                            {modalMode === "view" && selectedTeacher && !form.name ? (
-                                <div>
-                                    {/* Avatar grande */}
-                                    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24, padding: "16px", background: "#F8FAFC", borderRadius: 12 }}>
-                                        <div style={{ width: 64, height: 64, borderRadius: 16, background: "linear-gradient(135deg, #1E3A8A, #FBBF24)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, fontWeight: 800, color: "white", boxShadow: "0 4px 16px rgba(30,58,138,0.3)" }}>
-                                            {selectedTeacher.avatar}
-                                        </div>
-                                        <div>
-                                            <div style={{ fontWeight: 700, fontSize: 18, color: "#1E293B" }}>{selectedTeacher.name}</div>
-                                            <div style={{ fontSize: 13, color: "#64748B" }}>{selectedTeacher.degree}</div>
-                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, background: statusConfig[selectedTeacher.status]?.bg, color: statusConfig[selectedTeacher.status]?.color, borderRadius: 20, padding: "3px 10px", fontSize: 12, fontWeight: 700, marginTop: 4 }}>
-                                                <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig[selectedTeacher.status]?.dot, display: "inline-block" }} />
-                                                {selectedTeacher.status}
-                                            </span>
-                                        </div>
-                                    </div>
-                                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
-                                        {[
-                                            { icon: "📚", label: "Materia", val: selectedTeacher.subject },
-                                            { icon: "📧", label: "Correo", val: selectedTeacher.email },
-                                            { icon: "📞", label: "Teléfono", val: selectedTeacher.phone },
-                                            { icon: "📅", label: "Fecha de Ingreso", val: selectedTeacher.joined },
-                                        ].map((item, i) => (
-                                            <div key={i} style={{ background: "#F8FAFC", borderRadius: 10, padding: "12px 14px", border: "1px solid #E2E8F0" }}>
-                                                <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{item.icon} {item.label}</div>
-                                                <div style={{ fontSize: 13.5, color: "#334155", fontWeight: 500 }}>{item.val}</div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-                                    {[
-                                        { label: "Nombre Completo", key: "name", type: "text", placeholder: "Ej. María García López" },
-                                        { label: "Materia que imparte", key: "subject", type: "text", placeholder: "Ej. Cálculo Diferencial" },
-                                        { label: "Correo Institucional", key: "email", type: "email", placeholder: "docente@universidad.edu" },
-                                        { label: "Teléfono", key: "phone", type: "text", placeholder: "+502 0000-0000" },
-                                        { label: "Grado Académico", key: "degree", type: "text", placeholder: "Ej. MSc. Ingeniería de Software" },
-                                    ].map(field => (
-                                        <div key={field.key}>
-                                            <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>{field.label}</label>
-                                            <input
-                                                type={field.type}
-                                                placeholder={field.placeholder}
-                                                value={form[field.key]}
-                                                onChange={e => setForm(f => ({ ...f, [field.key]: e.target.value }))}
-                                                style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
-                                            />
-                                        </div>
-                                    ))}
-                                    <div>
-                                        <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>Estado</label>
-                                        <select value={form.status} onChange={e => setForm(f => ({ ...f, status: e.target.value }))} style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}>
-                                            <option>Activo</option><option>Inactivo</option><option>Licencia</option>
-                                        </select>
-                                    </div>
-                                </div>
-                            )}
+            {/* Modal body */}
+            <div style={{ padding: "24px 28px" }}>
+              {modalMode === "view" && selectedTeacher && !form.name ? (
+                <div>
+                  {/* Avatar grande */}
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 16,
+                      marginBottom: 24,
+                      padding: "16px",
+                      background: "#F8FAFC",
+                      borderRadius: 12,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 64,
+                        height: 64,
+                        borderRadius: 16,
+                        background: "linear-gradient(135deg, #1E3A8A, #FBBF24)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 22,
+                        fontWeight: 800,
+                        color: "white",
+                        boxShadow: "0 4px 16px rgba(30,58,138,0.3)",
+                      }}
+                    >
+                      {selectedTeacher.avatar}
+                    </div>
+                    <div>
+                      <div
+                        style={{
+                          fontWeight: 700,
+                          fontSize: 18,
+                          color: "#1E293B",
+                        }}
+                      >
+                        {selectedTeacher.name}
+                      </div>
+                      <div style={{ fontSize: 13, color: "#64748B" }}>
+                        {selectedTeacher.degree}
+                      </div>
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 5,
+                          background: statusConfig[selectedTeacher.status]?.bg,
+                          color: statusConfig[selectedTeacher.status]?.color,
+                          borderRadius: 20,
+                          padding: "3px 10px",
+                          fontSize: 12,
+                          fontWeight: 700,
+                          marginTop: 4,
+                        }}
+                      >
+                        <span
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            background:
+                              statusConfig[selectedTeacher.status]?.dot,
+                            display: "inline-block",
+                          }}
+                        />
+                        {selectedTeacher.status}
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "1fr 1fr",
+                      gap: 14,
+                    }}
+                  >
+                    {[
+                      {
+                        icon: "📚",
+                        label: "Materia",
+                        val: selectedTeacher.subject,
+                      },
+                      {
+                        icon: "📧",
+                        label: "Correo",
+                        val: selectedTeacher.email,
+                      },
+                      {
+                        icon: "📞",
+                        label: "Teléfono",
+                        val: selectedTeacher.phone,
+                      },
+                      {
+                        icon: "📅",
+                        label: "Fecha de Ingreso",
+                        val: selectedTeacher.joined,
+                      },
+                    ].map((item, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          background: "#F8FAFC",
+                          borderRadius: 10,
+                          padding: "12px 14px",
+                          border: "1px solid #E2E8F0",
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontSize: 11,
+                            color: "#94A3B8",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.07em",
+                            marginBottom: 4,
+                          }}
+                        >
+                          {item.icon} {item.label}
                         </div>
-
-                        {/* Modal footer */}
-                        <div style={{ padding: "16px 28px 24px", display: "flex", justifyContent: "flex-end", gap: 10 }}>
-                            <button onClick={() => setShowModal(false)} style={{ padding: "10px 22px", borderRadius: 9, border: "1.5px solid #E2E8F0", background: "white", color: "#64748B", fontWeight: 600, fontSize: 13.5, cursor: "pointer" }}>
-                                {modalMode === "view" ? "Cerrar" : "Cancelar"}
-                            </button>
-                            {(modalMode === "add" || modalMode === "edit") && (
-                                <button onClick={handleSave} className="action-btn" style={{ padding: "10px 24px", borderRadius: 9, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13.5, cursor: "pointer", boxShadow: "0 4px 12px rgba(37,99,235,0.35)" }}>
-                                    {modalMode === "add" ? "Guardar Docente" : "Actualizar Docente"}
-                                </button>
-                            )}
+                        <div
+                          style={{
+                            fontSize: 13.5,
+                            color: "#334155",
+                            fontWeight: 500,
+                          }}
+                        >
+                          {item.val}
                         </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div
+                  style={{ display: "flex", flexDirection: "column", gap: 16 }}
+                >
+                  {[
+                    {
+                      label: "Nombre Completo",
+                      key: "name",
+                      type: "text",
+                      placeholder: "Ej. María García López",
+                    },
+                    {
+                      label: "Materia que imparte",
+                      key: "subject",
+                      type: "text",
+                      placeholder: "Ej. Cálculo Diferencial",
+                    },
+                    {
+                      label: "Correo Institucional",
+                      key: "email",
+                      type: "email",
+                      placeholder: "docente@universidad.edu",
+                    },
+                    {
+                      label: "Teléfono",
+                      key: "phone",
+                      type: "text",
+                      placeholder: "+502 0000-0000",
+                    },
+                    {
+                      label: "Grado Académico",
+                      key: "degree",
+                      type: "text",
+                      placeholder: "Ej. MSc. Ingeniería de Software",
+                    },
+                  ].map((field) => (
+                    <div key={field.key}>
+                      <label
+                        style={{
+                          display: "block",
+                          fontSize: 12.5,
+                          fontWeight: 700,
+                          color: "#374151",
+                          marginBottom: 6,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.06em",
+                        }}
+                      >
+                        {field.label}
+                      </label>
+                      <input
+                        type={field.type}
+                        placeholder={field.placeholder}
+                        value={form[field.key]}
+                        onChange={(e) =>
+                          setForm((f) => ({
+                            ...f,
+                            [field.key]: e.target.value,
+                          }))
+                        }
+                        style={{
+                          width: "100%",
+                          height: 40,
+                          border: "1.5px solid #E2E8F0",
+                          borderRadius: 9,
+                          padding: "0 14px",
+                          fontSize: 13.5,
+                          color: "#334155",
+                          background: "#F8FAFC",
+                        }}
+                      />
                     </div>
+                  ))}
+                  <div>
+                    <label
+                      style={{
+                        display: "block",
+                        fontSize: 12.5,
+                        fontWeight: 700,
+                        color: "#374151",
+                        marginBottom: 6,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.06em",
+                      }}
+                    >
+                      Estado
+                    </label>
+                    <select
+                      value={form.status}
+                      onChange={(e) =>
+                        setForm((f) => ({ ...f, status: e.target.value }))
+                      }
+                      style={{
+                        width: "100%",
+                        height: 40,
+                        border: "1.5px solid #E2E8F0",
+                        borderRadius: 9,
+                        padding: "0 14px",
+                        fontSize: 13.5,
+                        color: "#334155",
+                        background: "#F8FAFC",
+                      }}
+                    >
+                      <option>Activo</option>
+                      <option>Inactivo</option>
+                      <option>Licencia</option>
+                    </select>
+                  </div>
                 </div>
-            )}
+              )}
+            </div>
+
+            {/* Modal footer */}
+            <div
+              style={{
+                padding: "16px 28px 24px",
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 10,
+              }}
+            >
+              <button
+                onClick={() => setShowModal(false)}
+                style={{
+                  padding: "10px 22px",
+                  borderRadius: 9,
+                  border: "1.5px solid #E2E8F0",
+                  background: "white",
+                  color: "#64748B",
+                  fontWeight: 600,
+                  fontSize: 13.5,
+                  cursor: "pointer",
+                }}
+              >
+                {modalMode === "view" ? "Cerrar" : "Cancelar"}
+              </button>
+              {(modalMode === "add" || modalMode === "edit") && (
+                <button
+                  onClick={handleSave}
+                  className="action-btn"
+                  style={{
+                    padding: "10px 24px",
+                    borderRadius: 9,
+                    border: "none",
+                    background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                    color: "white",
+                    fontWeight: 700,
+                    fontSize: 13.5,
+                    cursor: "pointer",
+                    boxShadow: "0 4px 12px rgba(37,99,235,0.35)",
+                  }}
+                >
+                  {modalMode === "add"
+                    ? "Guardar Docente"
+                    : "Actualizar Docente"}
+                </button>
+              )}
+            </div>
+          </div>
         </div>
-    );
-}
+      )}
+    </div>
+  );
+}
\ No newline at end of file

From 7685748139ca013f383dcc428bcc894e982d4533 Mon Sep 17 00:00:00 2001
From: JoseG <joseelopez832@gmail.com>
Date: Sat, 28 Mar 2026 09:11:35 -1100
Subject: [PATCH 32/46] reloj y reportes conectados a la base de datos en las
 tablas teachers y records

---
 .env                                       |    6 +
 backend/.env.example                       |    0
 backend/config/db.js                       |   12 +
 backend/controllers/recordsControllers.js  |   45 +
 backend/controllers/reportsControllers.js  |   50 +
 backend/controllers/teachersControllers.js |   50 +
 backend/createRecordsTable.js              |   24 +
 backend/database.sql                       |    0
 backend/diagnoseTeachersApi.js             |   60 ++
 backend/inspectRecordsSchema.js            |   30 +
 backend/modelos/recordsModel.js            |  216 +++++
 backend/modelos/reportsModel.js            |   94 ++
 backend/modelos/teachersModel.js           |  104 ++
 backend/package-lock.json                  | 1015 ++++++++++++++++++++
 backend/package.json                       |   19 +
 backend/routes/recordsRoutes.js            |   15 +
 backend/routes/reportsRoutes.js            |   12 +
 backend/routes/teachersRoutes.js           |   17 +
 backend/seed.js                            |  105 ++
 backend/server.js                          |   20 +
 backend/setupRecordsTable.js               |   29 +
 package-lock.json                          |  162 ++++
 package.json                               |    1 +
 src/pages/Clock.jsx                        |  258 ++++-
 src/pages/Reports.jsx                      |  362 ++++++-
 src/pages/Teachers.jsx                     |  212 +++-
 26 files changed, 2827 insertions(+), 91 deletions(-)
 create mode 100644 .env
 create mode 100644 backend/.env.example
 create mode 100644 backend/config/db.js
 create mode 100644 backend/controllers/recordsControllers.js
 create mode 100644 backend/controllers/reportsControllers.js
 create mode 100644 backend/controllers/teachersControllers.js
 create mode 100644 backend/createRecordsTable.js
 create mode 100644 backend/database.sql
 create mode 100644 backend/diagnoseTeachersApi.js
 create mode 100644 backend/inspectRecordsSchema.js
 create mode 100644 backend/modelos/recordsModel.js
 create mode 100644 backend/modelos/reportsModel.js
 create mode 100644 backend/modelos/teachersModel.js
 create mode 100644 backend/package-lock.json
 create mode 100644 backend/package.json
 create mode 100644 backend/routes/recordsRoutes.js
 create mode 100644 backend/routes/reportsRoutes.js
 create mode 100644 backend/routes/teachersRoutes.js
 create mode 100644 backend/seed.js
 create mode 100644 backend/server.js
 create mode 100644 backend/setupRecordsTable.js

diff --git a/.env b/.env
new file mode 100644
index 0000000..4187ce2
--- /dev/null
+++ b/.env
@@ -0,0 +1,6 @@
+DB_HOST="localhost"
+DB_PORT="5432"
+DB_USER="postgres"
+DB_PASSWORD="postgres"
+DB_NAME="ontimeclock"
+PORT=5000
diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 0000000..e69de29
diff --git a/backend/config/db.js b/backend/config/db.js
new file mode 100644
index 0000000..a063a7c
--- /dev/null
+++ b/backend/config/db.js
@@ -0,0 +1,12 @@
+require('dotenv').config();
+const { Pool } = require('pg');
+
+const pool = new Pool({
+    user: process.env.PGUSER || process.env.DB_USER || 'postgres',
+    host: process.env.PGHOST || process.env.DB_HOST || 'localhost',
+    database: process.env.PGDATABASE || process.env.DB_NAME || 'onTimeClock',
+    password: process.env.PGPASSWORD || process.env.DB_PASSWORD || 'postgres',
+    port: Number(process.env.PGPORT || process.env.DB_PORT || 5432),
+});
+
+module.exports = pool;
\ No newline at end of file
diff --git a/backend/controllers/recordsControllers.js b/backend/controllers/recordsControllers.js
new file mode 100644
index 0000000..8a8dcee
--- /dev/null
+++ b/backend/controllers/recordsControllers.js
@@ -0,0 +1,45 @@
+//controlador para registros de asistencia
+const recordsModel = require('../modelos/recordsModel');
+
+exports.createRecord = async (req, res) => {
+    try {
+        const record = await recordsModel.createRecord(req.body);
+        res.status(201).json(record);
+    } catch (error) {
+        console.error('Error al crear registro:', error.message);
+        
+        if (error.message.includes('No existe')) {
+            res.status(404).json({ error: error.message });
+        } else if (
+            error.message.includes('Ya registraste') ||
+            error.message.includes('Primero debes registrar') ||
+            error.message.includes('obligatoria') ||
+            error.message.includes('tipo de registro')
+        ) {
+            res.status(400).json({ error: error.message });
+        } else {
+            res.status(500).json({ error: 'Error al registrar asistencia' });
+        }
+    }
+}
+
+exports.getRecords = async (req, res) => {
+    try {
+        const records = await recordsModel.getRecords();
+        res.json(records);
+    } catch (error) {
+        console.error('Error al obtener registros:', error);
+        res.status(500).json({ error: 'Error al obtener registros' });
+    }
+}
+
+exports.getRecordsByMatricula = async (req, res) => {
+    try {
+        const { matricula } = req.params;
+        const records = await recordsModel.getRecordsByMatricula(matricula);
+        res.json(records);
+    } catch (error) {
+        console.error('Error al obtener registros:', error);
+        res.status(500).json({ error: 'Error al obtener registros' });
+    }
+}
diff --git a/backend/controllers/reportsControllers.js b/backend/controllers/reportsControllers.js
new file mode 100644
index 0000000..216d7ab
--- /dev/null
+++ b/backend/controllers/reportsControllers.js
@@ -0,0 +1,50 @@
+const reportsModel = require('../modelos/reportsModel');
+
+exports.getSummaryReport = async (req, res) => {
+  try {
+    const { startDate, endDate } = req.query;
+
+    if (!startDate || !endDate) {
+      return res.status(400).json({ error: 'startDate y endDate son obligatorios' });
+    }
+
+    const data = await reportsModel.getSummaryReport(startDate, endDate);
+    res.json(data);
+  } catch (error) {
+    console.error('Error al generar reporte:', error.message);
+
+    if (
+      error.message.includes('formato') ||
+      error.message.includes('inicio no puede ser mayor')
+    ) {
+      return res.status(400).json({ error: error.message });
+    }
+
+    res.status(500).json({ error: 'Error al generar reporte' });
+  }
+};
+
+exports.getTeacherReportDetails = async (req, res) => {
+  try {
+    const { matricula } = req.params;
+    const { startDate, endDate } = req.query;
+
+    if (!startDate || !endDate) {
+      return res.status(400).json({ error: 'startDate y endDate son obligatorios' });
+    }
+
+    const data = await reportsModel.getTeacherReportDetails(matricula, startDate, endDate);
+    res.json(data);
+  } catch (error) {
+    console.error('Error al generar detalle del reporte:', error.message);
+
+    if (
+      error.message.includes('formato') ||
+      error.message.includes('inicio no puede ser mayor')
+    ) {
+      return res.status(400).json({ error: error.message });
+    }
+
+    res.status(500).json({ error: 'Error al generar detalle del reporte' });
+  }
+};
diff --git a/backend/controllers/teachersControllers.js b/backend/controllers/teachersControllers.js
new file mode 100644
index 0000000..cab2546
--- /dev/null
+++ b/backend/controllers/teachersControllers.js
@@ -0,0 +1,50 @@
+//controlador para invocar al modelo 
+const teachersModel = require ('../modelos/teachersModel');
+
+exports.getTeachers = async (req, res) => {
+    try {
+        const teachers = await teachersModel.getTeachers();
+        res.json(teachers);
+    } catch (error) {
+        console.error('Error al obtener docentes:', error.message);
+        res.status(500).json({ error: 'Error al obtener docentes' });
+    }
+};
+
+exports.createTeacher = async (req, res) => {
+    try {
+        const teacher = await teachersModel.createTeacher(req.body);
+        res.status(201).json(teacher);
+    } catch (error) {
+        console.error('Error al crear docente:', error.message);
+        res.status(500).json({ error: 'Error al crear docente' });
+    }
+};
+
+exports.updateTeacher = async (req, res) => {
+    try {
+        const teacher = await teachersModel.updateTeacher(
+            req.params.matricula,
+            req.body
+        );
+
+        if (!teacher) {
+            return res.status(404).json({ error: 'Docente no encontrado' });
+        }
+
+        res.json(teacher);
+    } catch (error) {
+        console.error('Error al actualizar docente:', error.message);
+        res.status(500).json({ error: 'Error al actualizar docente' });
+    }
+};
+
+exports.deleteTeacher = async (req, res) => {
+    try {
+        const result = await teachersModel.deleteTeacher(req.params.matricula);
+        res.json(result);
+    } catch (error) {
+        console.error('Error al eliminar docente:', error.message);
+        res.status(500).json({ error: 'Error al eliminar docente' });
+    }
+};
\ No newline at end of file
diff --git a/backend/createRecordsTable.js b/backend/createRecordsTable.js
new file mode 100644
index 0000000..3327d4a
--- /dev/null
+++ b/backend/createRecordsTable.js
@@ -0,0 +1,24 @@
+const pool = require('./config/db');
+
+async function createRecordsTable() {
+    try {
+        await pool.query(`
+            CREATE TABLE IF NOT EXISTS records (
+                id SERIAL PRIMARY KEY,
+                matricula VARCHAR(50) NOT NULL,
+                nombre VARCHAR(150) NOT NULL,
+                hora_entrada TIME,
+                hora_salida TIME,
+                fecha DATE NOT NULL,
+                CONSTRAINT records_unique_matricula_fecha UNIQUE (matricula, fecha)
+            )
+        `);
+        console.log('✓ Tabla records creada exitosamente');
+    } catch (err) {
+        console.error('Error creando tabla records:', err.message);
+    } finally {
+        pool.end();
+    }
+}
+
+createRecordsTable();
diff --git a/backend/database.sql b/backend/database.sql
new file mode 100644
index 0000000..e69de29
diff --git a/backend/diagnoseTeachersApi.js b/backend/diagnoseTeachersApi.js
new file mode 100644
index 0000000..f9465ac
--- /dev/null
+++ b/backend/diagnoseTeachersApi.js
@@ -0,0 +1,60 @@
+require('dotenv').config();
+const { Client } = require('pg');
+
+const baseConfig = {
+  user: process.env.PGUSER || process.env.DB_USER || 'postgres',
+  host: process.env.PGHOST || process.env.DB_HOST || 'localhost',
+  password: process.env.PGPASSWORD || process.env.DB_PASSWORD || 'postgres',
+  port: Number(process.env.PGPORT || process.env.DB_PORT || 5432),
+};
+
+async function getDatabases() {
+  const client = new Client({ ...baseConfig, database: process.env.PGDATABASE || process.env.DB_NAME || 'postgres' });
+  await client.connect();
+  const { rows } = await client.query("SELECT datname FROM pg_database WHERE datistemplate = false ORDER BY datname");
+  await client.end();
+  return rows.map((r) => r.datname);
+}
+
+async function inspectDb(database) {
+  const client = new Client({ ...baseConfig, database });
+  try {
+    await client.connect();
+    const table = await client.query("SELECT to_regclass('public.teachers') AS teachers_table");
+    if (!table.rows[0].teachers_table) {
+      return { database, hasTeachers: false };
+    }
+
+    const columns = await client.query(
+      "SELECT column_name FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'teachers' ORDER BY ordinal_position"
+    );
+    const count = await client.query("SELECT COUNT(*)::int AS total FROM teachers");
+
+    let sample = [];
+    const colNames = columns.rows.map((c) => c.column_name);
+    if (colNames.includes('matricula') && colNames.includes('nombre')) {
+      const preview = await client.query("SELECT matricula, nombre FROM teachers ORDER BY nombre LIMIT 5");
+      sample = preview.rows;
+    }
+
+    return {
+      database,
+      hasTeachers: true,
+      columns: colNames,
+      total: count.rows[0].total,
+      sample,
+    };
+  } catch (error) {
+    return { database, error: error.message };
+  } finally {
+    await client.end();
+  }
+}
+
+(async () => {
+  const databases = await getDatabases();
+  for (const db of databases) {
+    const result = await inspectDb(db);
+    console.log(JSON.stringify(result));
+  }
+})();
diff --git a/backend/inspectRecordsSchema.js b/backend/inspectRecordsSchema.js
new file mode 100644
index 0000000..d1b412f
--- /dev/null
+++ b/backend/inspectRecordsSchema.js
@@ -0,0 +1,30 @@
+const pool = require('./config/db');
+
+(async () => {
+  try {
+    const table = await pool.query("SELECT to_regclass('public.records') AS records_table");
+    console.log('table:', table.rows[0]);
+
+    const rel = await pool.query(
+      "SELECT c.relkind, n.nspname, c.relname FROM pg_class c JOIN pg_namespace n ON n.oid = c.relnamespace WHERE c.relname = 'records'"
+    );
+    console.log('relations:', rel.rows);
+
+    const cols = await pool.query(
+      "SELECT column_name, data_type FROM information_schema.columns WHERE table_schema='public' AND table_name='records' ORDER BY ordinal_position"
+    );
+    console.log('columns:', cols.rows);
+
+    const attrs = await pool.query(
+      "SELECT a.attname, pg_catalog.format_type(a.atttypid, a.atttypmod) AS type FROM pg_attribute a JOIN pg_class c ON c.oid = a.attrelid JOIN pg_namespace n ON n.oid = c.relnamespace WHERE c.relname = 'records' AND n.nspname = 'public' AND a.attnum > 0 AND NOT a.attisdropped ORDER BY a.attnum"
+    );
+    console.log('pg attrs:', attrs.rows);
+
+    const preview = await pool.query('SELECT * FROM records LIMIT 3');
+    console.log('preview:', preview.rows);
+  } catch (error) {
+    console.error(error.message);
+  } finally {
+    await pool.end();
+  }
+})();
diff --git a/backend/modelos/recordsModel.js b/backend/modelos/recordsModel.js
new file mode 100644
index 0000000..d58896a
--- /dev/null
+++ b/backend/modelos/recordsModel.js
@@ -0,0 +1,216 @@
+//modelo para registros de asistencia
+const pool = require('../config/db');
+
+function getLocalDateString(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+function getLocalTimeString(date) {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+}
+
+async function getTeachersColumns() {
+    const result = await pool.query(
+        "SELECT column_name FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'teachers'"
+    );
+    return new Set(result.rows.map((row) => row.column_name));
+}
+
+async function ensureRecordsTable() {
+    const createTableSql = `
+        CREATE TABLE IF NOT EXISTS records (
+            id SERIAL PRIMARY KEY,
+            matricula VARCHAR(50) NOT NULL,
+            nombre VARCHAR(150) NOT NULL,
+            hora_entrada TIME,
+            hora_salida TIME,
+            fecha DATE NOT NULL,
+            CONSTRAINT records_unique_matricula_fecha UNIQUE (matricula, fecha)
+        )
+    `;
+
+    await pool.query(createTableSql);
+
+    const columnsResult = await pool.query(
+        "SELECT column_name, data_type FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'records'"
+    );
+
+    if (columnsResult.rows.length === 0) {
+        await pool.query('DROP TABLE IF EXISTS records');
+        await pool.query(createTableSql);
+        return;
+    }
+
+    const existingColumns = new Set(columnsResult.rows.map((row) => row.column_name));
+    const fechaColumn = columnsResult.rows.find((row) => row.column_name === 'fecha');
+
+    if (!existingColumns.has('matricula')) {
+        await pool.query('ALTER TABLE records ADD COLUMN matricula VARCHAR(50)');
+    }
+    if (!existingColumns.has('nombre')) {
+        await pool.query('ALTER TABLE records ADD COLUMN nombre VARCHAR(150)');
+    }
+    if (!existingColumns.has('hora_entrada')) {
+        await pool.query('ALTER TABLE records ADD COLUMN hora_entrada TIME');
+    }
+    if (!existingColumns.has('hora_salida')) {
+        await pool.query('ALTER TABLE records ADD COLUMN hora_salida TIME');
+    }
+    if (!existingColumns.has('fecha')) {
+        await pool.query('ALTER TABLE records ADD COLUMN fecha DATE');
+        await pool.query('UPDATE records SET fecha = CURRENT_DATE WHERE fecha IS NULL');
+    } else if (fechaColumn && fechaColumn.data_type !== 'date') {
+        await pool.query(
+            `ALTER TABLE records
+             ALTER COLUMN fecha TYPE DATE
+             USING CASE
+               WHEN fecha IS NULL THEN CURRENT_DATE
+               ELSE DATE(fecha)
+             END`
+        );
+    }
+
+    await pool.query('UPDATE records SET nombre = COALESCE(nombre, \'Sin nombre\')');
+    await pool.query('UPDATE records SET fecha = COALESCE(fecha, CURRENT_DATE)');
+
+    await pool.query('ALTER TABLE records ALTER COLUMN matricula SET NOT NULL');
+    await pool.query('ALTER TABLE records ALTER COLUMN nombre SET NOT NULL');
+    await pool.query('ALTER TABLE records ALTER COLUMN fecha SET NOT NULL');
+
+    await pool.query(
+        `DO $$
+        BEGIN
+            IF NOT EXISTS (
+                SELECT 1
+                FROM pg_constraint
+                WHERE conname = 'records_unique_matricula_fecha'
+            ) THEN
+                BEGIN
+                    ALTER TABLE records
+                    ADD CONSTRAINT records_unique_matricula_fecha UNIQUE (matricula, fecha);
+                EXCEPTION WHEN unique_violation THEN
+                    NULL;
+                END;
+            END IF;
+        END $$;`
+    );
+}
+
+async function getTeacherByMatricula(matricula) {
+    const columns = await getTeachersColumns();
+    const nameField = columns.has('nombre')
+        ? 'nombre'
+        : columns.has('name')
+            ? 'name'
+            : null;
+
+    if (!columns.has('matricula') || !nameField) {
+        throw new Error('La tabla teachers debe tener columnas matricula y nombre/name');
+    }
+
+    const result = await pool.query(
+        `SELECT matricula, ${nameField} AS nombre
+         FROM teachers
+         WHERE CAST(matricula AS TEXT) = $1
+            OR COALESCE(NULLIF(LTRIM(CAST(matricula AS TEXT), '0'), ''), '0')
+               = COALESCE(NULLIF(LTRIM($1, '0'), ''), '0')`,
+        [matricula]
+    );
+
+    return result.rows[0] || null;
+}
+
+exports.createRecord = async (record) => {
+    const { matricula, tipo_registro } = record;
+    const matriculaLimpia = String(matricula || '').trim();
+
+    if (!matriculaLimpia) {
+        throw new Error('La matrícula es obligatoria');
+    }
+
+    if (tipo_registro !== 'entrada' && tipo_registro !== 'salida') {
+        throw new Error('El tipo de registro debe ser entrada o salida');
+    }
+
+    await ensureRecordsTable();
+
+    const teacher = await getTeacherByMatricula(matriculaLimpia);
+    if (!teacher) {
+        throw new Error(`No existe un docente con la matrícula: ${matricula}`);
+    }
+
+    const now = new Date();
+    const fechaHoy = getLocalDateString(now);
+    const horaActual = getLocalTimeString(now);
+
+    const existingResult = await pool.query(
+        'SELECT * FROM records WHERE matricula = $1 AND fecha = $2',
+        [teacher.matricula, fechaHoy]
+    );
+
+    const existing = existingResult.rows[0] || null;
+
+    if (tipo_registro === 'entrada') {
+        if (existing && existing.hora_entrada) {
+            throw new Error('Ya registraste una entrada hoy');
+        }
+
+        const result = existing
+            ? await pool.query(
+                `UPDATE records
+                 SET nombre = $1,
+                     hora_entrada = $2
+                 WHERE id = $3
+                 RETURNING *`,
+                [teacher.nombre, horaActual, existing.id]
+            )
+            : await pool.query(
+                `INSERT INTO records (matricula, nombre, hora_entrada, fecha)
+                 VALUES ($1, $2, $3, $4)
+                 RETURNING *`,
+                [teacher.matricula, teacher.nombre, horaActual, fechaHoy]
+            );
+
+        return result.rows[0];
+    }
+
+    if (!existing) {
+        throw new Error('Primero debes registrar una entrada hoy');
+    }
+
+    if (existing.hora_salida) {
+        throw new Error('Ya registraste una salida hoy');
+    }
+
+    const result = await pool.query(
+        `UPDATE records
+         SET nombre = $1,
+             hora_salida = $2
+         WHERE id = $3
+         RETURNING *`,
+        [teacher.nombre, horaActual, existing.id]
+    );
+
+    return result.rows[0];
+}
+
+exports.getRecords = async () => {
+    await ensureRecordsTable();
+    const result = await pool.query('SELECT * FROM records ORDER BY fecha DESC, id DESC');
+    return result.rows;
+}
+
+exports.getRecordsByMatricula = async (matricula) => {
+    await ensureRecordsTable();
+    const result = await pool.query(
+        'SELECT * FROM records WHERE matricula = $1 ORDER BY fecha DESC, id DESC',
+        [matricula]
+    );
+    return result.rows;
+}
diff --git a/backend/modelos/reportsModel.js b/backend/modelos/reportsModel.js
new file mode 100644
index 0000000..3ca52f9
--- /dev/null
+++ b/backend/modelos/reportsModel.js
@@ -0,0 +1,94 @@
+const pool = require('../config/db');
+
+function validateDate(value) {
+  return /^\d{4}-\d{2}-\d{2}$/.test(String(value || ''));
+}
+
+async function getTeachersNameField() {
+  const result = await pool.query(
+    "SELECT column_name FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'teachers'"
+  );
+  const columns = new Set(result.rows.map((row) => row.column_name));
+
+  if (columns.has('nombre')) {
+    return 'nombre';
+  }
+  if (columns.has('name')) {
+    return 'name';
+  }
+
+  throw new Error('La tabla teachers debe tener columna nombre o name');
+}
+
+function getTotalDays(startDate, endDate) {
+  const start = new Date(`${startDate}T00:00:00`);
+  const end = new Date(`${endDate}T00:00:00`);
+  const diffMs = end.getTime() - start.getTime();
+  return Math.floor(diffMs / (1000 * 60 * 60 * 24)) + 1;
+}
+
+exports.getSummaryReport = async (startDate, endDate) => {
+  if (!validateDate(startDate) || !validateDate(endDate)) {
+    throw new Error('Las fechas deben tener formato YYYY-MM-DD');
+  }
+
+  if (startDate > endDate) {
+    throw new Error('La fecha de inicio no puede ser mayor a la fecha final');
+  }
+
+  const totalDays = getTotalDays(startDate, endDate);
+  const nameField = await getTeachersNameField();
+
+  const result = await pool.query(
+    `SELECT
+        t.matricula::text AS matricula,
+        t.${nameField} AS nombre,
+        COUNT(r.id) FILTER (WHERE r.hora_entrada IS NOT NULL)::int AS asistencias
+     FROM teachers t
+     LEFT JOIN records r
+       ON r.matricula::text = t.matricula::text
+      AND r.fecha BETWEEN $1::date AND $2::date
+     GROUP BY t.matricula, t.${nameField}
+     ORDER BY t.${nameField} ASC`,
+    [startDate, endDate]
+  );
+
+  return result.rows.map((row) => {
+    const asistencias = Number(row.asistencias || 0);
+    const faltas = Math.max(totalDays - asistencias, 0);
+
+    return {
+      matricula: row.matricula,
+      profesor: row.nombre,
+      asistencias,
+      faltas,
+      totalDias: totalDays,
+    };
+  });
+};
+
+exports.getTeacherReportDetails = async (matricula, startDate, endDate) => {
+  if (!validateDate(startDate) || !validateDate(endDate)) {
+    throw new Error('Las fechas deben tener formato YYYY-MM-DD');
+  }
+
+  if (startDate > endDate) {
+    throw new Error('La fecha de inicio no puede ser mayor a la fecha final');
+  }
+
+  const result = await pool.query(
+    `SELECT
+        gs.fecha::date AS fecha,
+        r.hora_entrada,
+        r.hora_salida,
+        CASE WHEN r.hora_entrada IS NOT NULL THEN 'Asistencia' ELSE 'Falta' END AS estado
+     FROM generate_series($2::date, $3::date, interval '1 day') AS gs(fecha)
+     LEFT JOIN records r
+       ON r.matricula::text = $1::text
+      AND r.fecha = gs.fecha::date
+     ORDER BY gs.fecha ASC`,
+    [String(matricula), startDate, endDate]
+  );
+
+  return result.rows;
+};
diff --git a/backend/modelos/teachersModel.js b/backend/modelos/teachersModel.js
new file mode 100644
index 0000000..bf42bb4
--- /dev/null
+++ b/backend/modelos/teachersModel.js
@@ -0,0 +1,104 @@
+//modelos para la base de datos de teachers
+const pool = require('../config/db');
+
+async function getTeachersColumns() {
+    const result = await pool.query(
+        "SELECT column_name FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'teachers'"
+    );
+    return new Set(result.rows.map((row) => row.column_name));
+}
+
+exports.getTeachers = async () => {
+    const columns = await getTeachersColumns();
+    const nameField = columns.has('nombre')
+        ? 'nombre'
+        : columns.has('name')
+            ? 'name'
+            : null;
+
+    if (!columns.has('matricula') || !nameField) {
+        throw new Error('La tabla teachers debe tener columnas matricula y nombre/name');
+    }
+
+    const extraField = columns.has('departamento')
+        ? 'departamento'
+        : columns.has('materia')
+            ? 'materia'
+            : null;
+
+    const query = extraField
+        ? `SELECT matricula, ${nameField} AS nombre, ${extraField} AS departamento FROM teachers ORDER BY ${nameField} ASC`
+        : `SELECT matricula, ${nameField} AS nombre FROM teachers ORDER BY ${nameField} ASC`;
+
+    const result = await pool.query(query);
+    return result.rows;
+};
+
+exports.createTeacher = async (teacher) => {
+    const { matricula, nombre, departamento, materia } = teacher;
+    const columns = await getTeachersColumns();
+
+    if (columns.has('departamento')) {
+        const result = await pool.query(
+            'INSERT INTO teachers (matricula, nombre, departamento) VALUES ($1, $2, $3) RETURNING matricula, nombre, departamento',
+            [matricula, nombre, departamento || materia || null]
+        );
+        return result.rows[0];
+    }
+
+    if (columns.has('materia')) {
+        const result = await pool.query(
+            'INSERT INTO teachers (matricula, nombre, materia) VALUES ($1, $2, $3) RETURNING matricula, nombre, materia AS departamento',
+            [matricula, nombre, materia || departamento || null]
+        );
+        return result.rows[0];
+    }
+
+    const result = await pool.query(
+        'INSERT INTO teachers (matricula, nombre) VALUES ($1, $2) RETURNING matricula, nombre',
+        [matricula, nombre]
+    );
+    return result.rows[0];
+};
+
+exports.updateTeacher = async (matricula, teacher) => {
+    const { matricula: nuevaMatricula, nombre, departamento, materia } = teacher;
+    const columns = await getTeachersColumns();
+
+    const depColumn = columns.has('departamento')
+        ? 'departamento'
+        : columns.has('materia')
+            ? 'materia'
+            : null;
+
+    const depValue = departamento || materia || null;
+
+    const result = depColumn
+        ? await pool.query(
+            `UPDATE teachers
+             SET matricula = COALESCE($1, matricula),
+                 nombre = COALESCE($2, nombre),
+                 ${depColumn} = COALESCE($3, ${depColumn})
+             WHERE matricula = $4
+             RETURNING matricula, nombre, ${depColumn} AS departamento`,
+            [nuevaMatricula || null, nombre || null, depValue, matricula]
+        )
+        : await pool.query(
+            `UPDATE teachers
+             SET matricula = COALESCE($1, matricula),
+                 nombre = COALESCE($2, nombre)
+             WHERE matricula = $3
+             RETURNING matricula, nombre`,
+            [nuevaMatricula || null, nombre || null, matricula]
+        );
+
+    return result.rows[0] || null;
+};
+
+exports.deleteTeacher = async (matricula) => {
+    await pool.query(
+        'DELETE FROM teachers WHERE matricula = $1',
+        [matricula]
+    );
+    return { message: 'docente eliminado' };
+};
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
new file mode 100644
index 0000000..194ec33
--- /dev/null
+++ b/backend/package-lock.json
@@ -0,0 +1,1015 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "backend",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "cors": "^2.8.6",
+        "dotenv": "^17.3.1",
+        "express": "^5.2.1",
+        "pg": "^8.20.0"
+      },
+      "devDependencies": {}
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-connection-string": "^2.12.0",
+        "pg-pool": "^3.13.0",
+        "pg-protocol": "^1.13.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
+      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
+      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
+      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    }
+  }
+}
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..fc89916
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "pg": "^8.20.0"
+  },
+  "description": ""
+}
diff --git a/backend/routes/recordsRoutes.js b/backend/routes/recordsRoutes.js
new file mode 100644
index 0000000..a61ee30
--- /dev/null
+++ b/backend/routes/recordsRoutes.js
@@ -0,0 +1,15 @@
+//rutas para registros de asistencia
+const express = require("express");
+const router = express.Router();
+
+const {
+    createRecord,
+    getRecords,
+    getRecordsByMatricula
+} = require('../controllers/recordsControllers');
+
+router.post("/", createRecord);
+router.get("/", getRecords);
+router.get("/:matricula", getRecordsByMatricula);
+
+module.exports = router;
diff --git a/backend/routes/reportsRoutes.js b/backend/routes/reportsRoutes.js
new file mode 100644
index 0000000..688dcf6
--- /dev/null
+++ b/backend/routes/reportsRoutes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+
+const {
+  getSummaryReport,
+  getTeacherReportDetails,
+} = require('../controllers/reportsControllers');
+
+router.get('/', getSummaryReport);
+router.get('/:matricula/details', getTeacherReportDetails);
+
+module.exports = router;
diff --git a/backend/routes/teachersRoutes.js b/backend/routes/teachersRoutes.js
new file mode 100644
index 0000000..6901602
--- /dev/null
+++ b/backend/routes/teachersRoutes.js
@@ -0,0 +1,17 @@
+//se definen los endpoints para las apis
+const express = require("express");
+
+const router = express.Router();
+const {
+getTeachers,
+createTeacher,
+updateTeacher,
+deleteTeacher
+
+} = require('../controllers/teachersControllers');
+
+router.get("/", getTeachers);
+router.post("/", createTeacher);
+router.put("/:matricula", updateTeacher);
+router.delete("/:matricula", deleteTeacher);
+module.exports = router;
\ No newline at end of file
diff --git a/backend/seed.js b/backend/seed.js
new file mode 100644
index 0000000..66606ef
--- /dev/null
+++ b/backend/seed.js
@@ -0,0 +1,105 @@
+const pool = require('./config/db');
+
+async function createTables() {
+    try {
+        // Crear tabla teachers si no existe
+        await pool.query(`
+            CREATE TABLE IF NOT EXISTS teachers (
+                id SERIAL PRIMARY KEY,
+                matricula VARCHAR(50) NOT NULL UNIQUE,
+                name VARCHAR(100) NOT NULL,
+                subject VARCHAR(100),
+                email VARCHAR(100),
+                phone VARCHAR(20),
+                degree VARCHAR(100),
+                status VARCHAR(20),
+                avatar VARCHAR(255)
+            )
+        `);
+        console.log('Tabla teachers lista ✓');
+
+        // Crear tabla records si no existe
+        await pool.query(`
+            CREATE TABLE IF NOT EXISTS records (
+                id SERIAL PRIMARY KEY,
+                matricula VARCHAR(50) NOT NULL,
+                tipo_registro VARCHAR(20) NOT NULL,
+                fecha TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (matricula) REFERENCES teachers(matricula)
+            )
+        `);
+        console.log('Tabla records lista ✓');
+
+    } catch (err) {
+        console.error('Error creando tablas:', err.message);
+    }
+}
+
+async function seedTeachers() {
+    try {
+        const teachers = [
+            {
+                matricula: '00834138',
+                name: 'María González',
+                subject: 'Matemáticas',
+                email: 'maria.gonzalez@example.com',
+                phone: '+1234567890',
+                degree: 'Licenciatura en Matemáticas',
+                status: 'active',
+                avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Maria'
+            },
+            {
+                matricula: '00834139',
+                name: 'Carlos Rodríguez',
+                subject: 'Historia',
+                email: 'carlos.rodriguez@example.com',
+                phone: '+1234567891',
+                degree: 'Licenciatura en Historia',
+                status: 'active',
+                avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Carlos'
+            },
+            {
+                matricula: '00834140',
+                name: 'Ana López',
+                subject: 'Inglés',
+                email: 'ana.lopez@example.com',
+                phone: '+1234567892',
+                degree: 'Licenciatura en Inglés',
+                status: 'active',
+                avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Ana'
+            },
+            {
+                matricula: '00834141',
+                name: 'Pedro Martínez',
+                subject: 'Ciencias',
+                email: 'pedro.martinez@example.com',
+                phone: '+1234567893',
+                degree: 'Licenciatura en Biología',
+                status: 'active',
+                avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Pedro'
+            }
+        ];
+
+        for (const teacher of teachers) {
+            const { matricula, name, subject, email, phone, degree, status, avatar } = teacher;
+            await pool.query(
+                "INSERT INTO teachers (matricula, name, subject, email, phone, degree, status, avatar) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)",
+                [matricula, name, subject, email, phone, degree, status, avatar]
+            );
+        }
+
+        console.log('Datos de prueba insertados exitosamente!');
+        console.log('Teachers agregados:', teachers.length);
+    } catch (err) {
+        console.error('Error insertando datos:', err.message);
+    } finally {
+        pool.end();
+    }
+}
+
+async function init() {
+    await createTables();
+    await seedTeachers();
+}
+
+init();
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
new file mode 100644
index 0000000..4ab5af0
--- /dev/null
+++ b/backend/server.js
@@ -0,0 +1,20 @@
+const express = require('express');
+const cors = require('cors');  //permite que react llame a las apis 
+
+const teachersRoutes = require('./routes/teachersRoutes');
+const recordsRoutes = require('./routes/recordsRoutes');
+const reportsRoutes = require('./routes/reportsRoutes');
+
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+
+app.use('/api/teachers', teachersRoutes);
+app.use('/api/records', recordsRoutes);
+app.use('/api/reports', reportsRoutes);
+const PORT = 3000;
+
+app.listen(PORT, () => {
+    console.log ("Servidor de backend en puerto " + PORT);
+});
\ No newline at end of file
diff --git a/backend/setupRecordsTable.js b/backend/setupRecordsTable.js
new file mode 100644
index 0000000..f574a3f
--- /dev/null
+++ b/backend/setupRecordsTable.js
@@ -0,0 +1,29 @@
+const pool = require('./config/db');
+
+async function setupRecordsTable() {
+    try {
+        // Primero eliminar la tabla si existe
+        await pool.query('DROP TABLE IF EXISTS records CASCADE');
+        console.log('✓ Tabla anterior eliminada');
+
+        // Crear la tabla records con la estructura correcta
+        await pool.query(`
+            CREATE TABLE records (
+                id SERIAL PRIMARY KEY,
+                matricula VARCHAR(50) NOT NULL,
+                nombre VARCHAR(150) NOT NULL,
+                hora_entrada TIME,
+                hora_salida TIME,
+                fecha DATE NOT NULL,
+                CONSTRAINT records_unique_matricula_fecha UNIQUE (matricula, fecha)
+            )
+        `);
+        console.log('✓ Tabla records creada exitosamente');
+    } catch (err) {
+        console.error('Error:', err.message);
+    } finally {
+        pool.end();
+    }
+}
+
+setupRecordsTable();
diff --git a/package-lock.json b/package-lock.json
index 793b45c..2e8bb5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
+        "nodemon": "^3.1.14",
         "postcss": "^8.5.6",
         "tailwindcss": "^3.4.19",
         "vite": "^7.2.4"
@@ -2498,6 +2499,13 @@
         "node": ">= 4"
       }
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -2850,6 +2858,110 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nodemon": {
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz",
+      "integrity": "sha512-jakjZi93UtB3jHMWsXL68FXSAosbLfY0In5gtKq3niLSkrWznrVBzXFNOEMJUfc9+Ke7SHWoAZsiMkNP3vq6Jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^10.2.1",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/nodemon/node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nodemon/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/nodemon/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/nodemon/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3183,6 +3295,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3475,6 +3594,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/simple-update-notifier/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3638,6 +3783,16 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -3658,6 +3813,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
diff --git a/package.json b/package.json
index 5f05d3a..8c83b99 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "nodemon": "^3.1.14",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.19",
     "vite": "^7.2.4"
diff --git a/src/pages/Clock.jsx b/src/pages/Clock.jsx
index ba67173..b628880 100644
--- a/src/pages/Clock.jsx
+++ b/src/pages/Clock.jsx
@@ -16,6 +16,9 @@ export default function Clock() {
   const [fade, setFade] = useState(true);
   const [pulse, setPulse] = useState(false);
   const [showAllMsgs, setShowAllMsgs] = useState(false);
+  const [matricula, setMatricula] = useState("");
+  const [selectedMatricula, setSelectedMatricula] = useState("");
+  const [teachers, setTeachers] = useState([]);
 
   useEffect(() => {
     const timer = setInterval(() => setTime(new Date()), 1000);
@@ -33,6 +36,29 @@ export default function Clock() {
     return () => clearInterval(rotateMsg);
   }, []);
 
+  useEffect(() => {
+    const loadTeachers = async () => {
+      try {
+        const response = await fetch("http://localhost:3000/api/teachers");
+        if (!response.ok) return;
+        const data = await response.json();
+        if (Array.isArray(data)) {
+          setTeachers(
+            [...data].sort((a, b) =>
+              String(a?.nombre || "").localeCompare(String(b?.nombre || ""), "es", {
+                sensitivity: "base",
+              })
+            )
+          );
+        }
+      } catch {
+        setTeachers([]);
+      }
+    };
+
+    loadTeachers();
+  }, []);
+
   const formatTime = (date) => {
     return date.toLocaleTimeString("es-MX", {
       hour: "2-digit",
@@ -55,23 +81,78 @@ export default function Clock() {
   const getMinuteDegrees = () => time.getMinutes() * 6 + time.getSeconds() * 0.1;
   const getSecondDegrees = () => time.getSeconds() * 6;
 
-  const handleAction = (type) => {
-    const now = new Date();
-    const timeStr = now.toLocaleTimeString("es-MX", {
-      hour: "2-digit",
-      minute: "2-digit",
-      hour12: true,
-    });
-    setLastAction(type);
-    setActionMessage(
-      type === "entrada"
-        ? `✅ Entrada registrada — ${timeStr}`
-        : `🔴 Salida aplicada — ${timeStr}`
+  const normalizeMatricula = (value) => {
+    const raw = String(value ?? "").trim();
+    if (!raw) return "";
+    if (!/^\d+$/.test(raw)) return raw;
+    const normalized = raw.replace(/^0+/, "");
+    return normalized || "0";
+  };
+
+  const handleAction = async (type) => {
+    const matriculaActiva = (selectedMatricula || matricula).trim();
+    if (!matriculaActiva.trim()) {
+      setActionMessage("⚠️ Escribe o selecciona una matrícula antes de registrar");
+      setShowMessage(true);
+      setTimeout(() => setShowMessage(false), 3000);
+      return;
+    }
+
+    const existeMatricula = teachers.some(
+      (teacher) =>
+        normalizeMatricula(teacher.matricula) === normalizeMatricula(matriculaActiva)
     );
-    setShowMessage(true);
-    setPulse(true);
-    setTimeout(() => setPulse(false), 600);
-    setTimeout(() => setShowMessage(false), 4000);
+
+    if (!existeMatricula) {
+      setActionMessage(`❌ La matrícula ${matriculaActiva} no existe en la base de datos`);
+      setShowMessage(true);
+      setTimeout(() => setShowMessage(false), 3500);
+      return;
+    }
+
+    try {
+      const response = await fetch("http://localhost:3000/api/records", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          matricula: matriculaActiva,
+          tipo_registro: type,
+        }),
+      });
+
+      const result = await response.json().catch(() => ({}));
+
+      if (!response.ok) {
+        setActionMessage(`❌ ${result.error || "No se pudo registrar"}`);
+        setShowMessage(true);
+        setTimeout(() => setShowMessage(false), 3500);
+        return;
+      }
+
+      const now = new Date();
+      const timeStr = now.toLocaleTimeString("es-MX", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: true,
+      });
+
+      setLastAction(type);
+      setActionMessage(
+        type === "entrada"
+          ? `✅ Entrada registrada — ${timeStr} | Matrícula: ${matriculaActiva}`
+          : `🔴 Salida aplicada — ${timeStr} | Matrícula: ${matriculaActiva}`
+      );
+      setShowMessage(true);
+      setPulse(true);
+      setTimeout(() => setPulse(false), 600);
+      setTimeout(() => setShowMessage(false), 4000);
+    } catch {
+      setActionMessage("❌ No se pudo conectar con el servidor");
+      setShowMessage(true);
+      setTimeout(() => setShowMessage(false), 3500);
+    }
   };
 
   const dateStr = formatDate(time);
@@ -197,22 +278,51 @@ export default function Clock() {
           </div>
         </div>
 
-        {/* Digital time */}
-        <div style={styles.digitalTime}>{formatTime(time)}</div>
-        <div style={styles.dateText}>{capitalizedDate}</div>
+        <div style={styles.inputBlock}>
+          <input
+            type="text"
+            placeholder="Escribe la matrícula del maestro"
+            value={matricula}
+            onChange={(e) => {
+              const value = e.target.value;
+              setMatricula(value);
+              const existe = teachers.some(
+                (teacher) =>
+                  normalizeMatricula(teacher.matricula) === normalizeMatricula(value)
+              );
+              setSelectedMatricula(existe ? value.trim() : "");
+            }}
+            style={styles.matriculaInput}
+          />
+
+          <select
+            value={selectedMatricula}
+            onChange={(e) => {
+              const value = e.target.value;
+              setSelectedMatricula(value);
+              setMatricula(value);
+            }}
+            style={styles.matriculaSelect}
+          >
+            <option value="" style={styles.matriculaOption}>Selecciona matrícula - nombre completo</option>
+            {teachers.map((teacher) => (
+              <option key={teacher.matricula} value={teacher.matricula} style={styles.matriculaOption}>
+                {teacher.matricula} - {teacher.nombre}
+              </option>
+            ))}
+          </select>
+        </div>
 
-        {/* Action feedback */}
-        <div
-          style={{
-            ...styles.feedbackBanner,
-            opacity: showMessage ? 1 : 0,
-            transform: showMessage ? "translateY(0) scale(1)" : "translateY(10px) scale(0.97)",
-            pointerEvents: showMessage ? "auto" : "none",
-          }}
-        >
-          <span style={{ fontSize: "1.1rem", fontWeight: 700, letterSpacing: "0.03em" }}>
+        <div style={styles.messageSlot}>
+          <div
+            style={{
+              ...styles.inlineToast,
+              opacity: showMessage ? 1 : 0,
+              transform: showMessage ? "translateY(0) scale(1)" : "translateY(8px) scale(0.98)",
+            }}
+          >
             {actionMessage}
-          </span>
+          </div>
         </div>
 
         {/* Buttons */}
@@ -250,14 +360,17 @@ export default function Clock() {
           </button>
         </div>
 
-        {lastAction && (
-          <div style={styles.lastActionInfo}>
-            Último registro:{" "}
-            <span style={{ color: "#f0c02f", fontWeight: 600 }}>
-              {lastAction === "entrada" ? "Entrada" : "Salida"}
-            </span>
-          </div>
-        )}
+        <div
+          style={{
+            ...styles.lastActionInfo,
+            visibility: lastAction ? "visible" : "hidden",
+          }}
+        >
+          Último registro:{" "}
+          <span style={{ color: "#f0c02f", fontWeight: 600 }}>
+            {lastAction === "entrada" ? "Entrada" : "Salida"}
+          </span>
+        </div>
       </div>
 
       {/* Footer */}
@@ -537,10 +650,76 @@ const styles = {
     justifyContent: "center",
     minWidth: "320px",
   },
+  messageSlot: {
+    width: "420px",
+    maxWidth: "90vw",
+    height: "56px",
+    marginBottom: "10px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  inlineToast: {
+    background: "rgba(240,192,47,0.14)",
+    border: "1px solid rgba(240,192,47,0.45)",
+    borderRadius: "10px",
+    padding: "10px 16px",
+    color: "#fff",
+    backdropFilter: "blur(10px)",
+    minHeight: "44px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "44px",
+    boxShadow: "0 10px 28px rgba(0,0,0,0.35)",
+    transition: "opacity 0.35s ease, transform 0.35s ease",
+    pointerEvents: "none",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  inputBlock: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    width: "420px",
+    maxWidth: "90vw",
+    marginBottom: "16px",
+    flexShrink: 0,
+  },
+  matriculaInput: {
+    width: "100%",
+    background: "rgba(255,255,255,0.06)",
+    border: "1px solid rgba(240,192,47,0.35)",
+    borderRadius: "10px",
+    color: "#fff",
+    padding: "11px 12px",
+    fontSize: "0.88rem",
+    outline: "none",
+  },
+  matriculaSelect: {
+    width: "100%",
+    background: "rgba(255,255,255,0.06)",
+    border: "1px solid rgba(240,192,47,0.35)",
+    borderRadius: "10px",
+    color: "#fff",
+    padding: "11px 12px",
+    fontSize: "0.88rem",
+    outline: "none",
+  },
+  matriculaOption: {
+    color: "#1a1a32",
+    background: "#ffffff",
+  },
   buttonRow: {
     display: "flex",
     gap: "20px",
+    width: "420px",
+    maxWidth: "90vw",
     marginBottom: "16px",
+    flexShrink: 0,
   },
   btnEntrada: {
     padding: "16px 44px",
@@ -583,6 +762,7 @@ const styles = {
     fontSize: "0.78rem",
     color: "rgba(255,255,255,0.35)",
     letterSpacing: "0.05em",
+    minHeight: "18px",
   },
   footer: {
     padding: "16px",
@@ -685,4 +865,4 @@ const styles = {
     borderTop: "1px solid rgba(240,192,47,0.1)",
     textAlign: "right",
   },
-};
+};
\ No newline at end of file
diff --git a/src/pages/Reports.jsx b/src/pages/Reports.jsx
index a3542af..56a7257 100644
--- a/src/pages/Reports.jsx
+++ b/src/pages/Reports.jsx
@@ -1,33 +1,335 @@
+import { useEffect, useMemo, useState } from "react";
+import { jsPDF } from "jspdf";
+import autoTable from "jspdf-autotable";
+
 function Reports() {
-        return (
-            <div>
-                <h1 className="text-2xl font-bold mb-8"> 
-                    Reportes de Incidencia      
-                </h1>
-                <div className="grid grid-cols-2 gap-6">
-                    
-                    <div className="bg-white p-6 rounded-xl shadow
-                        hover:shadow-lg transition"> 
-                            <h3 className="text-lg font-semibold mb-2">
-                                Reporte Mensual
-                            </h3> 
-                            <p className="text-slate-500 text-sm">
-                                Asistencia general por mes.
-                            </p>
-                    </div>
-
-                    <div className="bg-white p-6 rounded-xl shadow
-                        hover:shadow-lg transition"> 
-                            <h3 className="text-lg font-semibold mb-2">
-                                Reporte por docente
-                            </h3> 
-                            <p className="text-slate-500 text-sm">
-                                Historial individual por docente.
-                            </p>
-                        </div>
-                </div>           
-        </div>         
-        )
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [allData, setAllData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+  const [selectedTeacher, setSelectedTeacher] = useState("Todos");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [detailError, setDetailError] = useState("");
+  const [detailRows, setDetailRows] = useState([]);
+  const [detailTeacher, setDetailTeacher] = useState(null);
+
+  const teachers = useMemo(
+    () => ["Todos", ...new Set(allData.map((d) => d.profesor))],
+    [allData]
+  );
+
+  const handleSearch = async () => {
+    if (!startDate || !endDate) {
+      setError("Por favor selecciona ambas fechas");
+      return;
+    }
+
+    if (startDate > endDate) {
+      setError("La fecha de inicio no puede ser mayor a la fecha final");
+      return;
     }
 
-export default Reports;
\ No newline at end of file
+    setLoading(true);
+    setError("");
+
+    try {
+      const response = await fetch(
+        `http://localhost:3000/api/reports?startDate=${startDate}&endDate=${endDate}`
+      );
+
+      const payload = await response.json().catch(() => []);
+
+      if (!response.ok) {
+        throw new Error(payload.error || "Error al obtener reporte del servidor");
+      }
+
+      const data = Array.isArray(payload) ? payload : [];
+      setAllData(data);
+
+      let result = data;
+      if (selectedTeacher !== "Todos") {
+        result = result.filter((item) => item.profesor === selectedTeacher);
+      }
+
+      setFilteredData(result);
+    } catch (err) {
+      console.error("Error:", err);
+      setError(
+        err.message ||
+          "No se pudo conectar con el servidor. Verifica que esté corriendo en http://localhost:3000"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (allData.length === 0) return;
+
+    let result = allData;
+    if (selectedTeacher !== "Todos") {
+      result = result.filter((item) => item.profesor === selectedTeacher);
+    }
+
+    setFilteredData(result);
+  }, [selectedTeacher, allData]);
+
+  const exportPDF = () => {
+    if (filteredData.length === 0) return;
+
+    const doc = new jsPDF();
+
+    doc.setFontSize(16);
+    doc.text("Reporte de Asistencia de los Docentes", 14, 15);
+    doc.setFontSize(10);
+    doc.text(`Periodo: ${startDate} al ${endDate}`, 14, 22);
+    doc.text(`Profesor: ${selectedTeacher}`, 14, 29);
+
+    autoTable(doc, {
+      startY: 35,
+      head: [["Matricula", "Profesor", "Asistencias", "Faltas", "Dias Evaluados"]],
+      body: filteredData.map((item) => [
+        item.matricula,
+        item.profesor,
+        item.asistencias,
+        item.faltas,
+        item.totalDias,
+      ]),
+    });
+
+    doc.save(`reporte_asistencia_${startDate}_${endDate}.pdf`);
+  };
+
+  const openTeacherDetail = async (teacherRow) => {
+    if (!startDate || !endDate) {
+      setError("Selecciona primero un rango de fechas");
+      return;
+    }
+
+    setShowDetailModal(true);
+    setDetailLoading(true);
+    setDetailError("");
+    setDetailRows([]);
+    setDetailTeacher(teacherRow);
+
+    try {
+      const response = await fetch(
+        `http://localhost:3000/api/reports/${teacherRow.matricula}/details?startDate=${startDate}&endDate=${endDate}`
+      );
+      const payload = await response.json().catch(() => []);
+
+      if (!response.ok) {
+        throw new Error(payload.error || "No se pudo obtener el detalle del docente");
+      }
+
+      setDetailRows(Array.isArray(payload) ? payload : []);
+    } catch (err) {
+      setDetailError(err.message || "Error al cargar detalle del docente");
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-100 to-slate-200">
+      <div className="bg-blue-900 text-white p-6 shadow-lg">
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
+          <h1 className="text-3xl font-bold tracking-wide">Reporte de Asistencia de Docentes</h1>
+
+          {filteredData.length > 0 && (
+            <button
+              onClick={exportPDF}
+              className="bg-white text-blue-900 px-5 py-2 rounded-lg font-semibold hover:scale-105 transition"
+            >
+              Exportar PDF
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto p-8">
+        <div className="bg-white rounded-2xl shadow-xl p-6 mb-8 border border-slate-200">
+          <div className="grid md:grid-cols-4 gap-6">
+            <div>
+              <label className="block text-sm font-semibold text-slate-600 mb-1">Fecha Inicio</label>
+              <input
+                type="date"
+                className="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-slate-600 mb-1">Fecha Final</label>
+              <input
+                type="date"
+                className="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-slate-600 mb-1">Filtrar Profesor</label>
+              <select
+                className="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={selectedTeacher}
+                onChange={(e) => setSelectedTeacher(e.target.value)}
+              >
+                {teachers.map((teacher, index) => (
+                  <option key={index}>{teacher}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="flex items-end">
+              <button
+                onClick={handleSearch}
+                disabled={loading}
+                className="w-full bg-blue-900 text-white py-2 rounded-lg font-semibold hover:bg-blue-800 transition disabled:bg-slate-400"
+              >
+                {loading ? "Cargando..." : "Generar Reporte"}
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <div className="mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
+              {error}
+            </div>
+          )}
+        </div>
+
+        {filteredData.length > 0 && (
+          <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
+            <table className="w-full">
+              <thead className="bg-blue-900 text-white">
+                <tr>
+                  <th className="p-4 text-left">Matricula</th>
+                  <th className="p-4 text-left">Profesor</th>
+                  <th className="p-4 text-center">Asistencias</th>
+                  <th className="p-4 text-center">Faltas</th>
+                  <th className="p-4 text-center">Dias Evaluados</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {filteredData.map((item, index) => (
+                  <tr
+                    key={index}
+                    className="border-b hover:bg-slate-50 transition cursor-pointer"
+                    onClick={() => openTeacherDetail(item)}
+                  >
+                    <td className="p-4">{item.matricula}</td>
+                    <td className="p-4 text-blue-800 font-semibold">{item.profesor}</td>
+                    <td className="p-4 text-center">
+                      <span className="font-semibold text-green-600">{item.asistencias}</span>
+                    </td>
+                    <td className="p-4 text-center">
+                      <span className="font-semibold text-red-600">{item.faltas}</span>
+                    </td>
+                    <td className="p-4 text-center">{item.totalDias}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            <div className="bg-slate-100 p-4 flex justify-end gap-8 font-semibold">
+              <span className="text-green-600">
+                Total Asistencias: {filteredData.reduce((a, b) => a + Number(b.asistencias || 0), 0)}
+              </span>
+              <span className="text-red-600">
+                Total Faltas: {filteredData.reduce((a, b) => a + Number(b.faltas || 0), 0)}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {!filteredData.length && !loading && (
+          <div className="bg-white rounded-2xl shadow-xl p-12 text-center text-slate-500">
+            <p className="text-lg">Selecciona un rango de fechas y haz clic en "Generar Reporte"</p>
+          </div>
+        )}
+      </div>
+
+      {showDetailModal && (
+        <div
+          className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
+          onClick={() => setShowDetailModal(false)}
+        >
+          <div
+            className="bg-white rounded-xl shadow-2xl w-full max-w-3xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between border-b px-6 py-4">
+              <div>
+                <h3 className="text-lg font-bold text-slate-800">Detalle de Asistencia</h3>
+                <p className="text-sm text-slate-500">
+                  {detailTeacher?.profesor} ({detailTeacher?.matricula})
+                </p>
+              </div>
+              <button
+                onClick={() => setShowDetailModal(false)}
+                className="rounded-md border px-3 py-1 text-sm hover:bg-slate-100"
+              >
+                Cerrar
+              </button>
+            </div>
+
+            <div className="p-6">
+              {detailLoading && <p className="text-slate-600">Cargando detalle...</p>}
+
+              {detailError && (
+                <div className="mb-4 p-3 rounded bg-red-100 border border-red-300 text-red-700">
+                  {detailError}
+                </div>
+              )}
+
+              {!detailLoading && !detailError && (
+                <div className="overflow-x-auto">
+                  <table className="w-full border-collapse">
+                    <thead>
+                      <tr className="bg-slate-200 text-left text-sm text-slate-700">
+                        <th className="p-3">Fecha</th>
+                        <th className="p-3">Hora de Entrada</th>
+                        <th className="p-3">Hora de Salida</th>
+                        <th className="p-3">Estado</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {detailRows.map((row, index) => (
+                        <tr key={index} className="border-b">
+                          <td className="p-3">{String(row.fecha).slice(0, 10)}</td>
+                          <td className="p-3">{row.hora_entrada || "-"}</td>
+                          <td className="p-3">{row.hora_salida || "-"}</td>
+                          <td className="p-3">
+                            <span
+                              className={
+                                row.estado === "Asistencia"
+                                  ? "font-semibold text-green-600"
+                                  : "font-semibold text-red-600"
+                              }
+                            >
+                              {row.estado}
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Reports;
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index c6ecaad..f9ee4e2 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,26 +1,194 @@
+import { useEffect, useMemo, useState } from "react";
+
 function Teachers() {
-    return (
-        <div>
-            <h1 className="text-2xl font-bold mb-4">Maestros</h1>
-                <div className="grid grid-cols-3 gap-6">   
-                    <div className="bg-white p-6 rounded-xl shadow"> 
-                        <h3 className="bg-white p-6 rounded-xl shadow">Leydi Xequeb</h3> 
-                        <p className="text-slate-500 text-sm">Matemáticas</p>
-                        <p className="mt-2 text-slate-600">Activo</p>
-                    </div>
-                       <div className="bg-white p-6 rounded-xl shadow"> 
-                        <h3 className="bg-white p-6 rounded-xl shadow">Irvin Chan</h3> 
-                        <p className="text-slate-500 text-sm">Programacion</p>
-                        <p className="mt-2 text-slate-600">Activo</p>
-                    </div>
-                       <div className="bg-white p-6 rounded-xl shadow"> 
-                        <h3 className="bg-white p-6 rounded-xl shadow">Marcos Riviera</h3> 
-                        <p className="text-slate-500 text-sm">Fe y Mundo</p>
-                        <p className="mt-2 text-slate-600">Activo</p>
-                    </div>                    
-                </div>          
-        </div>
-    )
+  const [teachers, setTeachers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [form, setForm] = useState({ matricula: "", nombre: "", departamento: "" });
+  const [query, setQuery] = useState("");
+
+  async function loadTeachers() {
+    setLoading(true);
+    setError("");
+    try {
+      const response = await fetch("http://localhost:3000/api/teachers");
+      if (!response.ok) {
+        throw new Error("No se pudo cargar la lista de docentes");
+      }
+      const data = await response.json();
+      setTeachers(Array.isArray(data) ? data : []);
+    } catch (err) {
+      setError(err.message || "Error al cargar docentes");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadTeachers();
+  }, []);
+
+  const filteredTeachers = useMemo(() => {
+    const search = query.trim().toLowerCase();
+    if (!search) {
+      return teachers;
+    }
+    return teachers.filter((teacher) => {
+      return (
+        String(teacher.matricula || "").toLowerCase().includes(search) ||
+        String(teacher.nombre || "").toLowerCase().includes(search) ||
+        String(teacher.departamento || "").toLowerCase().includes(search)
+      );
+    });
+  }, [teachers, query]);
+
+  const handleCreate = async (event) => {
+    event.preventDefault();
+
+    if (!form.matricula.trim() || !form.nombre.trim()) {
+      setError("Matricula y nombre son obligatorios.");
+      return;
+    }
+
+    setError("");
+    try {
+      const response = await fetch("http://localhost:3000/api/teachers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          matricula: form.matricula.trim(),
+          nombre: form.nombre.trim(),
+          departamento: form.departamento.trim() || null,
+        }),
+      });
+
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.error || "No se pudo crear el docente");
+      }
+
+      setForm({ matricula: "", nombre: "", departamento: "" });
+      await loadTeachers();
+    } catch (err) {
+      setError(err.message || "No se pudo crear el docente");
+    }
+  };
+
+  const handleDelete = async (matricula) => {
+    const ok = window.confirm(`Eliminar docente ${matricula}?`);
+    if (!ok) {
+      return;
+    }
+
+    setError("");
+    try {
+      const response = await fetch(`http://localhost:3000/api/teachers/${matricula}`, {
+        method: "DELETE",
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.error || "No se pudo eliminar el docente");
+      }
+      await loadTeachers();
+    } catch (err) {
+      setError(err.message || "No se pudo eliminar el docente");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-100 p-6">
+      <div className="mx-auto max-w-5xl space-y-5">
+        <header className="rounded-xl bg-blue-900 px-6 py-5 text-white shadow">
+          <h1 className="text-2xl font-bold">Docentes</h1>
+          <p className="mt-1 text-sm text-blue-100">Datos conectados a PostgreSQL (tabla teachers).</p>
+        </header>
+
+        <section className="rounded-xl bg-white p-5 shadow">
+          <h2 className="mb-3 text-lg font-semibold text-slate-800">Nuevo docente</h2>
+          <form className="grid gap-3 md:grid-cols-4" onSubmit={handleCreate}>
+            <input
+              className="rounded-md border border-slate-300 px-3 py-2"
+              placeholder="Matricula"
+              value={form.matricula}
+              onChange={(e) => setForm((prev) => ({ ...prev, matricula: e.target.value }))}
+            />
+            <input
+              className="rounded-md border border-slate-300 px-3 py-2"
+              placeholder="Nombre"
+              value={form.nombre}
+              onChange={(e) => setForm((prev) => ({ ...prev, nombre: e.target.value }))}
+            />
+            <input
+              className="rounded-md border border-slate-300 px-3 py-2"
+              placeholder="Departamento"
+              value={form.departamento}
+              onChange={(e) => setForm((prev) => ({ ...prev, departamento: e.target.value }))}
+            />
+            <button className="rounded-md bg-blue-700 px-4 py-2 font-semibold text-white hover:bg-blue-800" type="submit">
+              Guardar
+            </button>
+          </form>
+        </section>
+
+        <section className="rounded-xl bg-white p-5 shadow">
+          <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
+            <h2 className="text-lg font-semibold text-slate-800">Listado de docentes</h2>
+            <input
+              className="w-full max-w-xs rounded-md border border-slate-300 px-3 py-2"
+              placeholder="Buscar matricula, nombre o departamento"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </div>
+
+          {error && <div className="mb-3 rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">{error}</div>}
+
+          {loading ? (
+            <p className="text-slate-600">Cargando...</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full border-collapse">
+                <thead>
+                  <tr className="bg-slate-200 text-left text-sm text-slate-700">
+                    <th className="px-3 py-2">Matricula</th>
+                    <th className="px-3 py-2">Nombre</th>
+                    <th className="px-3 py-2">Departamento</th>
+                    <th className="px-3 py-2">Accion</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredTeachers.length === 0 ? (
+                    <tr>
+                      <td className="px-3 py-3 text-sm text-slate-500" colSpan={4}>
+                        No hay docentes.
+                      </td>
+                    </tr>
+                  ) : (
+                    filteredTeachers.map((teacher) => (
+                      <tr className="border-b border-slate-100" key={teacher.matricula}>
+                        <td className="px-3 py-2 text-sm">{teacher.matricula}</td>
+                        <td className="px-3 py-2 text-sm">{teacher.nombre}</td>
+                        <td className="px-3 py-2 text-sm">{teacher.departamento || "-"}</td>
+                        <td className="px-3 py-2 text-sm">
+                          <button
+                            className="rounded-md bg-red-600 px-3 py-1 text-white hover:bg-red-700"
+                            onClick={() => handleDelete(teacher.matricula)}
+                            type="button"
+                          >
+                            Eliminar
+                          </button>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
 }
 
 export default Teachers;
\ No newline at end of file

From 37e1b7635478ea2b8c21e014d69e0323d6341484 Mon Sep 17 00:00:00 2001
From: Isaac <aizaclopez1511@gmail.com>
Date: Sun, 29 Mar 2026 22:13:48 -0500
Subject: [PATCH 33/46] Cambios en Teachers.jsx - Isaac

---
 src/pages/Teachers.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index 2d775ac..de62e2b 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from "react"; //modulo de teachers
 
 const initialTeachers = [
     { id: 1, name: "Leydi Xequeb", subject: "Matemáticas", email: "l.xequeb@universidad.edu", phone: "+502 5555-0101", status: "Activo", degree: "MSc. Matemáticas Aplicadas", joined: "2019-03-15", avatar: "LX" },
@@ -387,4 +387,4 @@ export default function Teachers() {
             )}
         </div>
     );
-}
+}
\ No newline at end of file

From 1b2a1c23ca110fa1af70d49a285b9f1dca46eabb Mon Sep 17 00:00:00 2001
From: Isaac <aizaclopez1511@gmail.com>
Date: Sun, 29 Mar 2026 22:35:50 -0500
Subject: [PATCH 34/46] Cambios en Teachers.jsx - Isaac

---
 backend/config/db.js                       |   10 +
 backend/controllers/teachersControllers.js |  141 ++
 backend/models/teachersModel.js            |   69 +
 backend/routes/teachersRoutes.js           |   39 +
 src/pages/Teachers.jsx                     | 1592 ++++++++++++++++----
 5 files changed, 1516 insertions(+), 335 deletions(-)
 create mode 100644 backend/config/db.js
 create mode 100644 backend/controllers/teachersControllers.js
 create mode 100644 backend/models/teachersModel.js
 create mode 100644 backend/routes/teachersRoutes.js

diff --git a/backend/config/db.js b/backend/config/db.js
new file mode 100644
index 0000000..61d6eb5
--- /dev/null
+++ b/backend/config/db.js
@@ -0,0 +1,10 @@
+const {Pool} = require ('pg');
+const pool = new Pool({
+    user: "postgres",
+    host: "localhost",
+    database: "onTimeClock",
+    password: "postgres",
+    port: 5432
+});
+
+module.exports = pool;
diff --git a/backend/controllers/teachersControllers.js b/backend/controllers/teachersControllers.js
new file mode 100644
index 0000000..3fc6e4d
--- /dev/null
+++ b/backend/controllers/teachersControllers.js
@@ -0,0 +1,141 @@
+// Controlador para la gestión de docentes
+
+const teachersModel = require('../models/teachersModel');
+
+// GET /api/teachers — Obtener todos los docentes
+exports.getAllTeachers = async (req, res) => {
+    try {
+        const teachers = await teachersModel.getAllTeachers();
+        res.status(200).json({
+            success: true,
+            data: teachers,
+        });
+    } catch (error) {
+        console.error('Error al obtener docentes:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error interno al obtener los docentes.',
+        });
+    }
+};
+
+// POST /api/teachers — Agregar un nuevo docente
+exports.createTeacher = async (req, res) => {
+    try {
+        const { matricula, name, subject, email, phone, degree, status, avatar } = req.body;
+
+        // Validación de campos obligatorios
+        if (!name || !subject || !email) {
+            return res.status(400).json({
+                success: false,
+                message: 'Los campos nombre, materia y correo son obligatorios.',
+            });
+        }
+
+        const newTeacher = await teachersModel.createTeacher({
+            matricula,
+            name,
+            subject,
+            email,
+            phone,
+            degree,
+            status,
+            avatar,
+        });
+
+        res.status(201).json({
+            success: true,
+            message: 'Docente creado exitosamente.',
+            data: newTeacher,
+        });
+    } catch (error) {
+        console.error('Error al crear docente:', error);
+
+        // Manejo de correo duplicado (unique constraint de PostgreSQL)
+        if (error.code === '23505') {
+            return res.status(409).json({
+                success: false,
+                message: 'Ya existe un docente registrado con ese correo.',
+            });
+        }
+
+        res.status(500).json({
+            success: false,
+            message: 'Error interno al crear el docente.',
+        });
+    }
+};
+
+// PUT /api/teachers/:id — Editar un docente existente
+exports.updateTeacher = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const { matricula, name, subject, email, phone, degree, status, avatar } = req.body;
+
+        // Validación de campos obligatorios
+        if (!name || !subject || !email) {
+            return res.status(400).json({
+                success: false,
+                message: 'Los campos nombre, materia y correo son obligatorios.',
+            });
+        }
+
+        const updatedTeacher = await teachersModel.updateTeacher(id, {
+            matricula,
+            name,
+            subject,
+            email,
+            phone,
+            degree,
+            status,
+            avatar,
+        });
+
+        if (!updatedTeacher) {
+            return res.status(404).json({
+                success: false,
+                message: `No se encontró ningún docente con el ID ${id}.`,
+            });
+        }
+
+        res.status(200).json({
+            success: true,
+            message: 'Docente actualizado exitosamente.',
+            data: updatedTeacher,
+        });
+    } catch (error) {
+        console.error('Error al actualizar docente:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error interno al actualizar el docente.',
+        });
+    }
+};
+
+// DELETE /api/teachers/:id — Borrar un docente
+exports.deleteTeacher = async (req, res) => {
+    try {
+        const { id } = req.params;
+
+        const result = await teachersModel.deleteTeacher(id);
+
+        if (!result) {
+            return res.status(404).json({
+                success: false,
+                message: `No se encontró ningún docente con el ID ${id}.`,
+            });
+        }
+
+        res.status(200).json({
+            success: true,
+            message: 'Docente eliminado exitosamente.',
+            data: result,
+        });
+    } catch (error) {
+        console.error('Error al eliminar docente:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error interno al eliminar el docente.',
+        });
+    }
+};
\ No newline at end of file
diff --git a/backend/models/teachersModel.js b/backend/models/teachersModel.js
new file mode 100644
index 0000000..9ec6a93
--- /dev/null
+++ b/backend/models/teachersModel.js
@@ -0,0 +1,69 @@
+//Modelo para acceso a la base de datos de los profesores
+
+const pool = require('../config/db.js'); // Asume que tienes conexión a DB
+
+// GET — Obtener todos los docentes
+const getAllTeachers = async () => {
+    try {
+        const query = 'SELECT * FROM teachers ORDER BY id DESC';
+        const result = await pool.query(query);
+        return result.rows;
+    } catch (error) {
+        throw error;
+    }
+};
+
+// POST — Crear nuevo docente
+const createTeacher = async (teacherData) => {
+    try {
+        const { matricula, name, subject, email, phone, degree, status, avatar } = teacherData;
+        
+        const query = `
+            INSERT INTO teachers (matricula, name, subject, email, phone, degree, status, avatar)
+            VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+            RETURNING *
+        `;
+        
+        const result = await pool.query(query, [matricula, name, subject, email, phone, degree, status, avatar]);
+        return result.rows[0];
+    } catch (error) {
+        throw error;
+    }
+};
+
+// PUT — Actualizar docente
+const updateTeacher = async (id, teacherData) => {
+    try {
+        const { matricula, name, subject, email, phone, degree, status, avatar } = teacherData;
+        
+        const query = `
+            UPDATE teachers 
+            SET matricula = $1, name = $2, subject = $3, email = $4, phone = $5, degree = $6, status = $7, avatar = $8
+            WHERE id = $9
+            RETURNING *
+        `;
+        
+        const result = await pool.query(query, [matricula, name, subject, email, phone, degree, status, avatar, id]);
+        return result.rows[0];
+    } catch (error) {
+        throw error;
+    }
+};
+
+// DELETE — Eliminar docente
+const deleteTeacher = async (id) => {
+    try {
+        const query = 'DELETE FROM teachers WHERE id = $1 RETURNING *';
+        const result = await pool.query(query, [id]);
+        return result.rows[0];
+    } catch (error) {
+        throw error;
+    }
+};
+
+module.exports = {
+    getAllTeachers,
+    createTeacher,
+    updateTeacher,
+    deleteTeacher,
+};
\ No newline at end of file
diff --git a/backend/routes/teachersRoutes.js b/backend/routes/teachersRoutes.js
new file mode 100644
index 0000000..817ea11
--- /dev/null
+++ b/backend/routes/teachersRoutes.js
@@ -0,0 +1,39 @@
+// Rutas para la gestión de docentes
+
+const express = require('express');
+const router = express.Router();
+const teachersController = require("../controllers/teachersControllers");
+
+/**
+ * @route   GET /api/teachers
+ * @desc    Obtener todos los docentes
+ * @access  Public
+ */
+router.get('/', teachersController.getAllTeachers);
+
+/**
+ * @route   POST /api/teachers
+ * @desc    Agregar un nuevo docente
+ * @body    { name, subject, email, phone, degree, status, avatar }
+ * @access  Public
+ */
+router.post('/', teachersController.createTeacher);
+
+/**
+ * @route   PUT /api/teachers/:id
+ * @desc    Editar un docente existente
+ * @param   id — ID del docente
+ * @body    { name, subject, email, phone, degree, status, avatar }
+ * @access  Public
+ */
+router.put('/:id', teachersController.updateTeacher);
+
+/**
+ * @route   DELETE /api/teachers/:id
+ * @desc    Borrar un docente
+ * @param   id — ID del docente
+ * @access  Public
+ */
+router.delete('/:id', teachersController.deleteTeacher);
+
+module.exports = router;
\ No newline at end of file
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index de62e2b..20f19c4 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,89 +1,207 @@
-import { useState } from "react"; //modulo de teachers
+import { useState, useEffect } from "react";
 
-const initialTeachers = [
-    { id: 1, name: "Leydi Xequeb", subject: "Matemáticas", email: "l.xequeb@universidad.edu", phone: "+502 5555-0101", status: "Activo", degree: "MSc. Matemáticas Aplicadas", joined: "2019-03-15", avatar: "LX" },
-    { id: 2, name: "Irvin Chan", subject: "Programación", email: "i.chan@universidad.edu", phone: "+502 5555-0202", status: "Activo", degree: "Ing. en Sistemas", joined: "2020-08-01", avatar: "IC" },
-    { id: 3, name: "Marcos Rivera", subject: "Fe y Mundo", email: "m.rivera@universidad.edu", phone: "+502 5555-0303", status: "Activo", degree: "Lic. Teología", joined: "2018-01-20", avatar: "MR" },
-    { id: 4, name: "Sandra López", subject: "Física", email: "s.lopez@universidad.edu", phone: "+502 5555-0404", status: "Inactivo", degree: "PhD. Física Teórica", joined: "2017-06-10", avatar: "SL" },
-    { id: 5, name: "Carlos Menéndez", subject: "Química", email: "c.menendez@universidad.edu", phone: "+502 5555-0505", status: "Activo", degree: "MSc. Química Industrial", joined: "2021-02-28", avatar: "CM" },
-    { id: 6, name: "Ana Fuentes", subject: "Inglés", email: "a.fuentes@universidad.edu", phone: "+502 5555-0606", status: "Licencia", degree: "BA. Lenguas Modernas", joined: "2016-09-05", avatar: "AF" },
-];
 
 const avatarColors = [
-    ["#1E3A8A", "#FBBF24"],
-    ["#1D4ED8", "#F59E0B"],
-    ["#1E40AF", "#FCD34D"],
-    ["#1a3270", "#FBBF24"],
-    ["#2563EB", "#F59E0B"],
-    ["#1E3A8A", "#FDE68A"],
+  ["#1E3A8A", "#FBBF24"],
+  ["#1D4ED8", "#F59E0B"],
+  ["#1E40AF", "#FCD34D"],
+  ["#1a3270", "#FBBF24"],
+  ["#2563EB", "#F59E0B"],
+  ["#1E3A8A", "#FDE68A"],
 ];
 
 const statusConfig = {
-    Activo: { bg: "#D1FAE5", color: "#065F46", dot: "#10B981" },
-    Inactivo: { bg: "#FEE2E2", color: "#991B1B", dot: "#EF4444" },
-    Licencia: { bg: "#FEF3C7", color: "#92400E", dot: "#F59E0B" },
+  Activo: { bg: "#D1FAE5", color: "#065F46", dot: "#10B981" },
+  Inactivo: { bg: "#FEE2E2", color: "#991B1B", dot: "#EF4444" },
+  Licencia: { bg: "#FEF3C7", color: "#92400E", dot: "#F59E0B" },
 };
 
 export default function Teachers() {
-    const [teachers, setTeachers] = useState(initialTeachers);
-    const [search, setSearch] = useState("");
-    const [statusFilter, setStatusFilter] = useState("Todos");
-    const [showModal, setShowModal] = useState(false);
-    const [modalMode, setModalMode] = useState("add"); // "add" | "view" | "edit"
-    const [selectedTeacher, setSelectedTeacher] = useState(null);
-    const [form, setForm] = useState({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" });
-    const [sortField, setSortField] = useState("name");
-    const [sortDir, setSortDir] = useState("asc");
-
-    const filtered = teachers
-        .filter(t => statusFilter === "Todos" || t.status === statusFilter)
-        .filter(t =>
-            t.name.toLowerCase().includes(search.toLowerCase()) ||
-            t.subject.toLowerCase().includes(search.toLowerCase()) ||
-            t.email.toLowerCase().includes(search.toLowerCase())
-        )
-        .sort((a, b) => {
-            const va = a[sortField] || ""; const vb = b[sortField] || "";
-            return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-        });
+  const [teachers, setTeachers] = useState([]);
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("Todos");
+  const [showModal, setShowModal] = useState(false);
+  const [modalMode, setModalMode] = useState("add"); // "add" | "view" | "edit"
+  const [selectedTeacher, setSelectedTeacher] = useState(null);
+  const [form, setForm] = useState({
+    matricula: "",
+    name: "",
+    subject: "",
+    email: "",
+    phone: "",
+    degree: "",
+    status: "Activo",
+  });
+  const [sortField, setSortField] = useState("name");
+  const [sortDir, setSortDir] = useState("asc");
 
-    const handleSort = (field) => {
-        if (sortField === field) setSortDir(d => d === "asc" ? "desc" : "asc");
-        else { setSortField(field); setSortDir("asc"); }
+  //Extraer los datos de la endPoint /api/teachers
+  useEffect(() => {
+    const fetchTeachers = async () => {
+      try {
+        const response = await fetch("http://localhost:3000/api/teachers");
+        const data = await response.json();
+        setTeachers(Array.isArray(data) ? data : data.data || []);
+      } catch (error) {
+        console.error("Error al cargar datos", error);
+        setTeachers([]);
+      }
     };
+    fetchTeachers();
+  }, []);
 
-    const openAdd = () => { setModalMode("add"); setForm({ name: "", subject: "", email: "", phone: "", degree: "", status: "Activo" }); setShowModal(true); };
-    const openView = (t) => { setModalMode("view"); setSelectedTeacher(t); setShowModal(true); };
-    const openEdit = (t) => { setModalMode("edit"); setSelectedTeacher(t); setForm({ name: t.name, subject: t.subject, email: t.email, phone: t.phone, degree: t.degree, status: t.status }); setShowModal(true); };
+  const filtered = teachers
+    .filter((t) => statusFilter === "Todos" || t.status === statusFilter)
+    .filter(
+      (t) =>
+        t.name.toLowerCase().includes(search.toLowerCase()) ||
+        t.subject.toLowerCase().includes(search.toLowerCase()) ||
+        t.email.toLowerCase().includes(search.toLowerCase()),
+    )
+    .sort((a, b) => {
+      const va = a[sortField] || "";
+      const vb = b[sortField] || "";
+      return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+    });
 
-    const handleSave = () => {
-        if (!form.name.trim()) return;
-        if (modalMode === "edit") {
-            // Editar docente existente
-            setTeachers(prev => prev.map(t => t.id === selectedTeacher.id ? { ...selectedTeacher, ...form } : t));
-        } else {
-            // Agregar nuevo docente
-            const initials = form.name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
-            setTeachers(prev => [...prev, { ...form, id: Date.now(), avatar: initials, joined: new Date().toISOString().split("T")[0] }]);
-        }
-        setShowModal(false);
-    };
+  const handleSort = (field) => {
+    if (sortField === field) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    else {
+      setSortField(field);
+      setSortDir("asc");
+    }
+  };
+
+  const emptyForm = {
+    matricula: "",
+    name: "",
+    subject: "",
+    email: "",
+    phone: "",
+    degree: "",
+    status: "Activo",
+    avatar: "",
+  };
+
+  const openAdd = () => {
+    setModalMode("add");
+    setForm(emptyForm);
+    setShowModal(true);
+  };
+  const openView = (t) => {
+    setModalMode("view");
+    setSelectedTeacher(t);
+    setShowModal(true);
+  };
+  const openEdit = (t) => {
+    setModalMode("edit");
+    setSelectedTeacher(t);
+    setForm({
+      matricula: t.matricula || "",
+      name: t.name,
+      subject: t.subject,
+      email: t.email,
+      phone: t.phone,
+      degree: t.degree,
+      status: t.status,
+      avatar: t.avatar || "",
+    });
+    setShowModal(true);
+  };
 
-    const handleDelete = (id) => {
-        if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
-            setTeachers(prev => prev.filter(t => t.id !== id));
-        }
+  const handleSave = async () => {
+    if (!form.name.trim()) return;
+    
+    // Validar que status tenga valor
+    const formData = {
+      ...form,
+      status: form.status || "Activo",
     };
+    
+    try {
+      if (modalMode === "edit") {
+        // Actualizar docente
+        const response = await fetch(`http://localhost:3000/api/teachers/${selectedTeacher.id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(formData),
+        });
+        
+        const result = await response.json();
+        if (!response.ok) throw new Error(result.message || "Error al actualizar");
+        
+        setTeachers((prev) =>
+          prev.map((t) =>
+            t.id === selectedTeacher.id ? result.data : t,
+          ),
+        );
+      } else {
+        // Crear nuevo docente
+        const initials = form.name
+          .split(" ")
+          .map((w) => w[0])
+          .join("")
+          .slice(0, 2)
+          .toUpperCase();
+          
+        const response = await fetch("http://localhost:3000/api/teachers", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ...formData, avatar: initials }),
+        });
+        
+        const result = await response.json();
+        console.log("Response:", result);
+        if (!response.ok) throw new Error(result.message || "Error al crear");
+        
+        setTeachers((prev) => [...prev, result.data]);
+      }
+      setShowModal(false);
+    } catch (error) {
+      console.error("Error al guardar:", error);
+      alert(`Error: ${error.message}`);
+    }
+  };
 
-    const SortIcon = ({ field }) => (
-        <span style={{ marginLeft: 4, opacity: sortField === field ? 1 : 0.3, fontSize: 11 }}>
-            {sortField === field && sortDir === "desc" ? "▼" : "▲"}
-        </span>
-    );
+  const handleDelete = async (id) => {
+    if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
+      try {
+        const response = await fetch(`http://localhost:3000/api/teachers/${id}`, {
+          method: "DELETE",
+        });
+        
+        if (!response.ok) throw new Error("Error al eliminar");
+        
+        setTeachers((prev) => prev.filter((t) => t.id !== id));
+      } catch (error) {
+        console.error("Error al eliminar:", error);
+        alert("Error al eliminar el docente");
+      }
+    }
+  };
 
-    return (
-        <div style={{ fontFamily: "'DM Sans', 'Segoe UI', sans-serif", background: "#F0F4FF", minHeight: "100vh", padding: "32px 24px" }}>
-            <style>{`
+  const SortIcon = ({ field }) => (
+    <span
+      style={{
+        marginLeft: 4,
+        opacity: sortField === field ? 1 : 0.3,
+        fontSize: 11,
+      }}
+    >
+      {sortField === field && sortDir === "desc" ? "▼" : "▲"}
+    </span>
+  );
+
+  return (
+    <div
+      style={{
+        fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
+        background: "#F0F4FF",
+        minHeight: "100vh",
+        padding: "32px 24px",
+      }}
+    >
+      <style>{`
         @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');
         * { box-sizing: border-box; }
         .th-btn:hover { background: #1E3A8A !important; color: white !important; }
@@ -101,290 +219,1094 @@ export default function Teachers() {
         ::-webkit-scrollbar-thumb { background: #93C5FD; border-radius: 10px; }
       `}</style>
 
-            {/* Header */}
-            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
-                <div>
-                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
-                        <div style={{ width: 40, height: 40, background: "linear-gradient(135deg, #1E3A8A, #2563EB)", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                            </svg>
-                        </div>
-                        <h1 style={{ fontFamily: "'Sora', sans-serif", fontSize: 26, fontWeight: 700, color: "#1E3A8A", margin: 0 }}>
-                            Gestión de Docentes
-                        </h1>
-                    </div>
-                    <p style={{ color: "#64748B", fontSize: 13.5, margin: 0, marginLeft: 50 }}>
-                        Sistema Académico Universitario · {teachers.length} docentes registrados
-                    </p>
-                </div>
-                <button
-                    onClick={openAdd}
-                    className="action-btn"
-                    style={{ display: "flex", alignItems: "center", gap: 8, background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", color: "white", border: "none", borderRadius: 10, padding: "11px 22px", fontWeight: 600, fontSize: 14, cursor: "pointer", boxShadow: "0 4px 14px rgba(37,99,235,0.35)" }}
-                >
-                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                    Agregar Docente
-                </button>
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          marginBottom: 28,
+          flexWrap: "wrap",
+          gap: 16,
+        }}
+      >
+        <div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              marginBottom: 4,
+            }}
+          >
+            <div
+              style={{
+                width: 40,
+                height: 40,
+                background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                borderRadius: 10,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#FBBF24"
+                strokeWidth="2.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
             </div>
+            <h1
+              style={{
+                fontFamily: "'Sora', sans-serif",
+                fontSize: 26,
+                fontWeight: 700,
+                color: "#1E3A8A",
+                margin: 0,
+              }}
+            >
+              Gestión de Docentes
+            </h1>
+          </div>
+          <p
+            style={{
+              color: "#64748B",
+              fontSize: 13.5,
+              margin: 0,
+              marginLeft: 50,
+            }}
+          >
+            Sistema Académico Universitario · {teachers.length} docentes
+            registrados
+          </p>
+        </div>
+        <button
+          onClick={openAdd}
+          className="action-btn"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)",
+            color: "white",
+            border: "none",
+            borderRadius: 10,
+            padding: "11px 22px",
+            fontWeight: 600,
+            fontSize: 14,
+            cursor: "pointer",
+            boxShadow: "0 4px 14px rgba(37,99,235,0.35)",
+          }}
+        >
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Agregar Docente
+        </button>
+      </div>
 
-            {/* Stats bar */}
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 14, marginBottom: 24 }}>
-                {[
-                    { label: "Total Docentes", value: teachers.length, icon: "👥", accent: "#1E3A8A" },
-                    { label: "Activos", value: teachers.filter(t => t.status === "Activo").length, icon: "✅", accent: "#059669" },
-                    { label: "Inactivos", value: teachers.filter(t => t.status === "Inactivo").length, icon: "⛔", accent: "#DC2626" },
-                    { label: "En Licencia", value: teachers.filter(t => t.status === "Licencia").length, icon: "📋", accent: "#D97706" },
-                ].map((s, i) => (
-                    <div key={i} style={{ background: "white", borderRadius: 12, padding: "16px 18px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", borderLeft: `4px solid ${s.accent}` }}>
-                        <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{s.label}</div>
-                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                            <span style={{ fontSize: 28, fontFamily: "'Sora', sans-serif", fontWeight: 700, color: s.accent }}>{s.value}</span>
-                            <span style={{ fontSize: 20 }}>{s.icon}</span>
-                        </div>
-                    </div>
-                ))}
+      {/* Stats bar */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+          gap: 14,
+          marginBottom: 24,
+        }}
+      >
+        {[
+          {
+            label: "Total Docentes",
+            value: teachers.length,
+            icon: "👥",
+            accent: "#1E3A8A",
+          },
+          {
+            label: "Activos",
+            value: teachers.filter((t) => t.status === "Activo").length,
+            icon: "✅",
+            accent: "#059669",
+          },
+          {
+            label: "Inactivos",
+            value: teachers.filter((t) => t.status === "Inactivo").length,
+            icon: "⛔",
+            accent: "#DC2626",
+          },
+          {
+            label: "En Licencia",
+            value: teachers.filter((t) => t.status === "Licencia").length,
+            icon: "📋",
+            accent: "#D97706",
+          },
+        ].map((s, i) => (
+          <div
+            key={i}
+            style={{
+              background: "white",
+              borderRadius: 12,
+              padding: "16px 18px",
+              boxShadow: "0 1px 6px rgba(0,0,0,0.07)",
+              borderLeft: `4px solid ${s.accent}`,
+            }}
+          >
+            <div
+              style={{
+                fontSize: 11,
+                color: "#94A3B8",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.07em",
+                marginBottom: 4,
+              }}
+            >
+              {s.label}
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <span
+                style={{
+                  fontSize: 28,
+                  fontFamily: "'Sora', sans-serif",
+                  fontWeight: 700,
+                  color: s.accent,
+                }}
+              >
+                {s.value}
+              </span>
+              <span style={{ fontSize: 20 }}>{s.icon}</span>
             </div>
+          </div>
+        ))}
+      </div>
 
-            {/* Search & Filter bar */}
-            <div style={{ background: "white", borderRadius: 14, padding: "16px 20px", boxShadow: "0 1px 6px rgba(0,0,0,0.07)", marginBottom: 18, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
-                {/* Search */}
-                <div style={{ position: "relative", flex: "1 1 260px", minWidth: 200 }}>
-                    <svg style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "#94A3B8" }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
-                    <input
-                        value={search}
-                        onChange={e => setSearch(e.target.value)}
-                        placeholder="Buscar por nombre, materia o correo..."
-                        style={{ width: "100%", paddingLeft: 38, paddingRight: 14, height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
-                    />
-                </div>
+      {/* Search & Filter bar */}
+      <div
+        style={{
+          background: "white",
+          borderRadius: 14,
+          padding: "16px 20px",
+          boxShadow: "0 1px 6px rgba(0,0,0,0.07)",
+          marginBottom: 18,
+          display: "flex",
+          gap: 12,
+          flexWrap: "wrap",
+          alignItems: "center",
+        }}
+      >
+        <div style={{ position: "relative", flex: "1 1 260px", minWidth: 200 }}>
+          <svg
+            style={{
+              position: "absolute",
+              left: 12,
+              top: "50%",
+              transform: "translateY(-50%)",
+              color: "#94A3B8",
+            }}
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Buscar por nombre, materia o correo..."
+            style={{
+              width: "100%",
+              paddingLeft: 38,
+              paddingRight: 14,
+              height: 40,
+              border: "1.5px solid #E2E8F0",
+              borderRadius: 9,
+              fontSize: 13.5,
+              color: "#334155",
+              background: "#F8FAFC",
+            }}
+          />
+        </div>
+
+        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+          {["Todos", "Activo", "Inactivo", "Licencia"].map((s) => (
+            <button
+              key={s}
+              onClick={() => setStatusFilter(s)}
+              style={{
+                padding: "7px 14px",
+                borderRadius: 8,
+                fontSize: 13,
+                fontWeight: 600,
+                cursor: "pointer",
+                transition: "all 0.15s",
+                background:
+                  statusFilter === s
+                    ? "linear-gradient(135deg, #1E3A8A, #2563EB)"
+                    : "#F1F5F9",
+                color: statusFilter === s ? "white" : "#64748B",
+                border: statusFilter === s ? "none" : "1.5px solid #E2E8F0",
+              }}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+
+        <div
+          style={{
+            marginLeft: "auto",
+            fontSize: 12.5,
+            color: "#94A3B8",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
+        </div>
+      </div>
 
-                {/* Status filter */}
-                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-                    {["Todos", "Activo", "Inactivo", "Licencia"].map(s => (
-                        <button
-                            key={s}
-                            onClick={() => setStatusFilter(s)}
+      {/* Table */}
+      <div
+        style={{
+          background: "white",
+          borderRadius: 14,
+          boxShadow: "0 1px 8px rgba(0,0,0,0.08)",
+          overflow: "hidden",
+        }}
+      >
+        <div style={{ overflowX: "auto" }}>
+          <table
+            style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}
+          >
+            <thead>
+              <tr
+                style={{
+                  background:
+                    "linear-gradient(90deg, #1E3A8A 0%, #1D4ED8 100%)",
+                }}
+              >
+                {[
+                  { label: "Docente", field: "name" },
+                  { label: "Materia", field: "subject" },
+                  { label: "Correo", field: "email" },
+                  { label: "Teléfono", field: null },
+                  { label: "Estado", field: "status" },
+                  { label: "Ingreso", field: "joined" },
+                  { label: "Acciones", field: null },
+                ].map((col, i) => (
+                  <th
+                    key={i}
+                    onClick={() => col.field && handleSort(col.field)}
+                    className={col.field ? "th-btn" : ""}
+                    style={{
+                      padding: "13px 16px",
+                      textAlign: "left",
+                      fontSize: 11.5,
+                      fontWeight: 700,
+                      color: "#FBBF24",
+                      letterSpacing: "0.08em",
+                      textTransform: "uppercase",
+                      cursor: col.field ? "pointer" : "default",
+                      userSelect: "none",
+                      borderBottom: "2px solid rgba(251,191,36,0.3)",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {col.label}
+                    {col.field && <SortIcon field={col.field} />}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={7}
+                    style={{
+                      textAlign: "center",
+                      padding: "52px 20px",
+                      color: "#94A3B8",
+                    }}
+                  >
+                    <div style={{ fontSize: 40, marginBottom: 10 }}>🔍</div>
+                    <div style={{ fontWeight: 600, fontSize: 15 }}>
+                      Sin resultados
+                    </div>
+                    <div style={{ fontSize: 13 }}>
+                      Intenta cambiar el filtro o la búsqueda
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                filtered.map((t, idx) => {
+                  const sc = statusConfig[t.status] || statusConfig.Activo;
+                  const ac = avatarColors[t.id % avatarColors.length];
+                  return (
+                    <tr
+                      key={t.id}
+                      className="row-hover"
+                      style={{
+                        borderBottom: "1px solid #F1F5F9",
+                        transition: "background 0.12s",
+                        background: idx % 2 === 0 ? "white" : "#FAFBFF",
+                      }}
+                    >
+                      {/* Docente */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 11,
+                          }}
+                        >
+                          <div
                             style={{
-                                padding: "7px 14px", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer", transition: "all 0.15s",
-                                background: statusFilter === s ? "linear-gradient(135deg, #1E3A8A, #2563EB)" : "#F1F5F9",
-                                color: statusFilter === s ? "white" : "#64748B",
-                                border: statusFilter === s ? "none" : "1.5px solid #E2E8F0"
+                              width: 38,
+                              height: 38,
+                              borderRadius: 10,
+                              background: `linear-gradient(135deg, ${ac[0]}, ${ac[1]})`,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontWeight: 700,
+                              fontSize: 13,
+                              color: ac[0] === "#FBBF24" ? "#1E3A8A" : "white",
+                              flexShrink: 0,
+                              boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
                             }}
-                        >{s}</button>
-                    ))}
-                </div>
+                          >
+                            {t.avatar}
+                          </div>
+                          <div>
+                            <div
+                              style={{
+                                fontWeight: 600,
+                                fontSize: 14,
+                                color: "#1E293B",
+                              }}
+                            >
+                              {t.name}
+                            </div>
+                            <div style={{ fontSize: 11.5, color: "#94A3B8" }}>
+                              {t.degree}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      {/* Materia */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <span
+                          style={{
+                            background: "#EFF6FF",
+                            color: "#1D4ED8",
+                            borderRadius: 6,
+                            padding: "3px 10px",
+                            fontSize: 12.5,
+                            fontWeight: 600,
+                          }}
+                        >
+                          {t.subject}
+                        </span>
+                      </td>
+                      {/* Email */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 13,
+                          color: "#475569",
+                        }}
+                      >
+                        {t.email}
+                      </td>
+                      {/* Phone */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 13,
+                          color: "#475569",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {t.phone}
+                      </td>
+                      {/* Status */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <span
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                            background: sc.bg,
+                            color: sc.color,
+                            borderRadius: 20,
+                            padding: "4px 12px",
+                            fontSize: 12,
+                            fontWeight: 700,
+                          }}
+                        >
+                          <span
+                            style={{
+                              width: 7,
+                              height: 7,
+                              borderRadius: "50%",
+                              background: sc.dot,
+                              display: "inline-block",
+                            }}
+                          />
+                          {t.status}
+                        </span>
+                      </td>
+                      {/* Joined */}
+                      <td
+                        style={{
+                          padding: "13px 16px",
+                          fontSize: 12.5,
+                          color: "#94A3B8",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {new Date(t.joined).toISOString().split("T")[0]}
+                      </td>
+                      {/* Actions */}
+                      <td style={{ padding: "13px 16px" }}>
+                        <div style={{ display: "flex", gap: 6 }}>
+                          <button
+                            onClick={() => openView(t)}
+                            className="icon-btn"
+                            title="Ver perfil"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #E2E8F0",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#2563EB"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                              <circle cx="12" cy="12" r="3" />
+                            </svg>
+                          </button>
+                          <button
+                            onClick={() => openEdit(t)}
+                            className="icon-btn"
+                            title="Editar"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #E2E8F0",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#F59E0B"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                            </svg>
+                          </button>
+                          <button
+                            onClick={() => handleDelete(t.id)}
+                            className="icon-btn"
+                            title="Eliminar"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "1.5px solid #FEE2E2",
+                              background: "white",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.15s",
+                            }}
+                          >
+                            <svg
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="#EF4444"
+                              strokeWidth="2.2"
+                              strokeLinecap="round"
+                            >
+                              <polyline points="3 6 5 6 21 6" />
+                              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                              <path d="M10 11v6" />
+                              <path d="M14 11v6" />
+                              <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                            </svg>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
 
-                {/* Results count */}
-                <div style={{ marginLeft: "auto", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>
-                    {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
-                </div>
-            </div>
+        {/* Table footer */}
+        <div
+          style={{
+            padding: "12px 20px",
+            borderTop: "1px solid #F1F5F9",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            background: "#FAFBFF",
+          }}
+        >
+          <span style={{ fontSize: 12.5, color: "#94A3B8" }}>
+            Mostrando {filtered.length} de {teachers.length} docentes
+          </span>
+          <div style={{ display: "flex", gap: 4 }}>
+            {[1].map((p) => (
+              <button
+                key={p}
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 7,
+                  border: "none",
+                  background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                  color: "white",
+                  fontWeight: 700,
+                  fontSize: 13,
+                  cursor: "pointer",
+                }}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
 
-            {/* Table */}
-            <div style={{ background: "white", borderRadius: 14, boxShadow: "0 1px 8px rgba(0,0,0,0.08)", overflow: "hidden" }}>
-                <div style={{ overflowX: "auto" }}>
-                    <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}>
-                        <thead>
-                            <tr style={{ background: "linear-gradient(90deg, #1E3A8A 0%, #1D4ED8 100%)" }}>
-                                {[
-                                    { label: "Docente", field: "name" },
-                                    { label: "Materia", field: "subject" },
-                                    { label: "Correo", field: "email" },
-                                    { label: "Teléfono", field: null },
-                                    { label: "Estado", field: "status" },
-                                    { label: "Ingreso", field: "joined" },
-                                    { label: "Acciones", field: null },
-                                ].map((col, i) => (
-                                    <th
-                                        key={i}
-                                        onClick={() => col.field && handleSort(col.field)}
-                                        className={col.field ? "th-btn" : ""}
-                                        style={{
-                                            padding: "13px 16px", textAlign: "left", fontSize: 11.5, fontWeight: 700,
-                                            color: "#FBBF24", letterSpacing: "0.08em", textTransform: "uppercase",
-                                            cursor: col.field ? "pointer" : "default", userSelect: "none",
-                                            borderBottom: "2px solid rgba(251,191,36,0.3)", whiteSpace: "nowrap"
-                                        }}
-                                    >
-                                        {col.label}{col.field && <SortIcon field={col.field} />}
-                                    </th>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {filtered.length === 0 ? (
-                                <tr>
-                                    <td colSpan={7} style={{ textAlign: "center", padding: "52px 20px", color: "#94A3B8" }}>
-                                        <div style={{ fontSize: 40, marginBottom: 10 }}>🔍</div>
-                                        <div style={{ fontWeight: 600, fontSize: 15 }}>Sin resultados</div>
-                                        <div style={{ fontSize: 13 }}>Intenta cambiar el filtro o la búsqueda</div>
-                                    </td>
-                                </tr>
-                            ) : filtered.map((t, idx) => {
-                                const sc = statusConfig[t.status] || statusConfig.Activo;
-                                const ac = avatarColors[t.id % avatarColors.length];
-                                return (
-                                    <tr key={t.id} className="row-hover" style={{ borderBottom: "1px solid #F1F5F9", transition: "background 0.12s", background: idx % 2 === 0 ? "white" : "#FAFBFF" }}>
-                                        {/* Docente */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
-                                                <div style={{ width: 38, height: 38, borderRadius: 10, background: `linear-gradient(135deg, ${ac[0]}, ${ac[1]})`, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13, color: ac[0] === "#FBBF24" ? "#1E3A8A" : "white", flexShrink: 0, boxShadow: "0 2px 8px rgba(0,0,0,0.15)" }}>
-                                                    {t.avatar}
-                                                </div>
-                                                <div>
-                                                    <div style={{ fontWeight: 600, fontSize: 14, color: "#1E293B" }}>{t.name}</div>
-                                                    <div style={{ fontSize: 11.5, color: "#94A3B8" }}>{t.degree}</div>
-                                                </div>
-                                            </div>
-                                        </td>
-                                        {/* Materia */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <span style={{ background: "#EFF6FF", color: "#1D4ED8", borderRadius: 6, padding: "3px 10px", fontSize: 12.5, fontWeight: 600 }}>{t.subject}</span>
-                                        </td>
-                                        {/* Email */}
-                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569" }}>{t.email}</td>
-                                        {/* Phone */}
-                                        <td style={{ padding: "13px 16px", fontSize: 13, color: "#475569", whiteSpace: "nowrap" }}>{t.phone}</td>
-                                        {/* Status */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: sc.bg, color: sc.color, borderRadius: 20, padding: "4px 12px", fontSize: 12, fontWeight: 700 }}>
-                                                <span style={{ width: 7, height: 7, borderRadius: "50%", background: sc.dot, display: "inline-block" }} />
-                                                {t.status}
-                                            </span>
-                                        </td>
-                                        {/* Joined */}
-                                        <td style={{ padding: "13px 16px", fontSize: 12.5, color: "#94A3B8", whiteSpace: "nowrap" }}>{t.joined}</td>
-                                        {/* Actions */}
-                                        <td style={{ padding: "13px 16px" }}>
-                                            <div style={{ display: "flex", gap: 6 }}>
-                                                <button onClick={() => openView(t)} className="icon-btn" title="Ver perfil" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="2.2" strokeLinecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
-                                                </button>
-                                                <button onClick={() => openEdit(t)} className="icon-btn" title="Editar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #E2E8F0", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.2" strokeLinecap="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>
-                                                </button>
-                                                <button onClick={() => handleDelete(t.id)} className="icon-btn" title="Eliminar" style={{ width: 32, height: 32, borderRadius: 8, border: "1.5px solid #FEE2E2", background: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.15s" }}>
-                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.2" strokeLinecap="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>
-                                                </button>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                );
-                            })}
-                        </tbody>
-                    </table>
+      {/* Modal */}
+      {showModal && (
+        <div
+          className="modal-overlay"
+          onClick={() => setShowModal(false)}
+          style={{
+            position: "fixed",
+            inset: 0,
+            background: "rgba(15,23,42,0.55)",
+            backdropFilter: "blur(4px)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1000,
+            padding: 20,
+          }}
+        >
+          <div
+            className="modal-box"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              background: "white",
+              borderRadius: 18,
+              width: "100%",
+              maxWidth: 520,
+              maxHeight: "90vh",
+              overflowY: "auto",
+              boxShadow: "0 24px 64px rgba(0,0,0,0.22)",
+              overflow: "hidden",
+            }}
+          >
+            {/* Modal header */}
+            <div
+              style={{
+                background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)",
+                padding: "22px 28px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <div
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: 10,
+                    background: "rgba(251,191,36,0.2)",
+                    border: "2px solid #FBBF24",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#FBBF24"
+                    strokeWidth="2.2"
+                    strokeLinecap="round"
+                  >
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
                 </div>
-
-                {/* Table footer */}
-                <div style={{ padding: "12px 20px", borderTop: "1px solid #F1F5F9", display: "flex", justifyContent: "space-between", alignItems: "center", background: "#FAFBFF" }}>
-                    <span style={{ fontSize: 12.5, color: "#94A3B8" }}>Mostrando {filtered.length} de {teachers.length} docentes</span>
-                    <div style={{ display: "flex", gap: 4 }}>
-                        {[1].map(p => (
-                            <button key={p} style={{ width: 30, height: 30, borderRadius: 7, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13, cursor: "pointer" }}>{p}</button>
-                        ))}
-                    </div>
+                <div>
+                  <h2
+                    style={{
+                      fontFamily: "'Sora', sans-serif",
+                      color: "white",
+                      margin: 0,
+                      fontSize: 18,
+                      fontWeight: 700,
+                    }}
+                  >
+                    {modalMode === "add"
+                      ? "Nuevo Docente"
+                      : modalMode === "edit"
+                        ? "Editar Docente"
+                        : selectedTeacher?.name}
+                  </h2>
+                  <p style={{ color: "#93C5FD", margin: 0, fontSize: 12.5 }}>
+                    {modalMode === "add"
+                      ? "Completar información del docente"
+                      : modalMode === "edit"
+                        ? "Actualizar información del docente"
+                        : selectedTeacher?.subject}
+                  </p>
                 </div>
+              </div>
+              <button
+                onClick={() => setShowModal(false)}
+                style={{
+                  width: 34,
+                  height: 34,
+                  borderRadius: 8,
+                  border: "1.5px solid rgba(255,255,255,0.25)",
+                  background: "transparent",
+                  color: "white",
+                  fontSize: 18,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                ×
+              </button>
             </div>
 
-            {/* Modal */}
-            {showModal && (
-                <div className="modal-overlay" onClick={() => setShowModal(false)} style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 20 }}>
-                    <div className="modal-box" onClick={e => e.stopPropagation()} style={{ background: "white", borderRadius: 18, width: "100%", maxWidth: 520, boxShadow: "0 24px 64px rgba(0,0,0,0.22)", overflow: "hidden" }}>
-                        {/* Modal header */}
-                        <div style={{ background: "linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%)", padding: "22px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-                                <div style={{ width: 40, height: 40, borderRadius: 10, background: "rgba(251,191,36,0.2)", border: "2px solid #FBBF24", display: "flex", alignItems: "center", justifyContent: "center" }}>
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" strokeWidth="2.2" strokeLinecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
-                                </div>
-                                <div>
-                                    <h2 style={{ fontFamily: "'Sora', sans-serif", color: "white", margin: 0, fontSize: 18, fontWeight: 700 }}>
-                                        {modalMode === "add" ? "Nuevo Docente" : modalMode === "edit" ? "Editar Docente" : selectedTeacher?.name}
-                                    </h2>
-                                    <p style={{ color: "#93C5FD", margin: 0, fontSize: 12.5 }}>
-                                        {modalMode === "add" ? "Completar información del docente" : modalMode === "edit" ? "Actualizar información del docente" : selectedTeacher?.subject}
-                                    </p>
-                                </div>
-                            </div>
-                            <button onClick={() => setShowModal(false)} style={{ width: 34, height: 34, borderRadius: 8, border: "1.5px solid rgba(255,255,255,0.25)", background: "transparent", color: "white", fontSize: 18, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
-                        </div>
+            {/* Modal body */}
+            <div style={{ padding: "24px 28px", overflowY: "auto", maxHeight: "calc(90vh - 160px)" }}>
+              {modalMode === "view" && selectedTeacher ? (
+                <div>
+                  {/* Avatar grande */}
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 16,
+                      marginBottom: 24,
+                      padding: "16px",
+                      background: "#F8FAFC",
+                      borderRadius: 12,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 64,
+                        height: 64,
+                        borderRadius: 16,
+                        background: "linear-gradient(135deg, #1E3A8A, #FBBF24)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 22,
+                        fontWeight: 800,
+                        color: "white",
+                        boxShadow: "0 4px 16px rgba(30,58,138,0.3)",
+                      }}
+                    >
+                      {selectedTeacher.avatar}
+                    </div>
+                    <div>
+                      <div
+                        style={{
+                          fontWeight: 700,
+                          fontSize: 18,
+                          color: "#1E293B",
+                        }}
+                      >
+                        {selectedTeacher.name}
+                      </div>
+                      <div style={{ fontSize: 13, color: "#64748B" }}>
+                        {selectedTeacher.degree}
+                      </div>
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 5,
+                          background: statusConfig[selectedTeacher.status]?.bg,
+                          color: statusConfig[selectedTeacher.status]?.color,
+                          borderRadius: 20,
+                          padding: "3px 10px",
+                          fontSize: 12,
+                          fontWeight: 700,
+                          marginTop: 4,
+                        }}
+                      >
+                        <span
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            background:
+                              statusConfig[selectedTeacher.status]?.dot,
+                            display: "inline-block",
+                          }}
+                        />
+                        {selectedTeacher.status}
+                      </span>
+                    </div>
+                  </div>
 
-                        {/* Modal body */}
-                        <div style={{ padding: "24px 28px" }}>
-                            {modalMode === "view" && selectedTeacher && !form.name ? (
-                                <div>
-                                    {/* Avatar grande */}
-                                    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24, padding: "16px", background: "#F8FAFC", borderRadius: 12 }}>
-                                        <div style={{ width: 64, height: 64, borderRadius: 16, background: "linear-gradient(135deg, #1E3A8A, #FBBF24)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, fontWeight: 800, color: "white", boxShadow: "0 4px 16px rgba(30,58,138,0.3)" }}>
-                                            {selectedTeacher.avatar}
-                                        </div>
-                                        <div>
-                                            <div style={{ fontWeight: 700, fontSize: 18, color: "#1E293B" }}>{selectedTeacher.name}</div>
-                                            <div style={{ fontSize: 13, color: "#64748B" }}>{selectedTeacher.degree}</div>
-                                            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, background: statusConfig[selectedTeacher.status]?.bg, color: statusConfig[selectedTeacher.status]?.color, borderRadius: 20, padding: "3px 10px", fontSize: 12, fontWeight: 700, marginTop: 4 }}>
-                                                <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig[selectedTeacher.status]?.dot, display: "inline-block" }} />
-                                                {selectedTeacher.status}
-                                            </span>
-                                        </div>
-                                    </div>
-                                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
-                                        {[
-                                            { icon: "📚", label: "Materia", val: selectedTeacher.subject },
-                                            { icon: "📧", label: "Correo", val: selectedTeacher.email },
-                                            { icon: "📞", label: "Teléfono", val: selectedTeacher.phone },
-                                            { icon: "📅", label: "Fecha de Ingreso", val: selectedTeacher.joined },
-                                        ].map((item, i) => (
-                                            <div key={i} style={{ background: "#F8FAFC", borderRadius: 10, padding: "12px 14px", border: "1px solid #E2E8F0" }}>
-                                                <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 4 }}>{item.icon} {item.label}</div>
-                                                <div style={{ fontSize: 13.5, color: "#334155", fontWeight: 500 }}>{item.val}</div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-                                    {[
-                                        { label: "Nombre Completo", key: "name", type: "text", placeholder: "Ej. María García López" },
-                                        { label: "Materia que imparte", key: "subject", type: "text", placeholder: "Ej. Cálculo Diferencial" },
-                                        { label: "Correo Institucional", key: "email", type: "email", placeholder: "docente@universidad.edu" },
-                                        { label: "Teléfono", key: "phone", type: "text", placeholder: "+502 0000-0000" },
-                                        { label: "Grado Académico", key: "degree", type: "text", placeholder: "Ej. MSc. Ingeniería de Software" },
-                                    ].map(field => (
-                                        <div key={field.key}>
-                                            <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>{field.label}</label>
-                                            <input
-                                                type={field.type}
-                                                placeholder={field.placeholder}
-                                                value={form[field.key]}
-                                                onChange={e => setForm(f => ({ ...f, [field.key]: e.target.value }))}
-                                                style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}
-                                            />
-                                        </div>
-                                    ))}
-                                    <div>
-                                        <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.06em" }}>Estado</label>
-                                        <select value={form.status} onChange={e => setForm(f => ({ ...f, status: e.target.value }))} style={{ width: "100%", height: 40, border: "1.5px solid #E2E8F0", borderRadius: 9, padding: "0 14px", fontSize: 13.5, color: "#334155", background: "#F8FAFC" }}>
-                                            <option>Activo</option><option>Inactivo</option><option>Licencia</option>
-                                        </select>
-                                    </div>
-                                </div>
-                            )}
+                  {/* ID y Matrícula en fila */}
+                  <div style={{ marginBottom: 14 }}>
+                    {[
+                      { icon: "🎓", label: "Matrícula", val: selectedTeacher.matricula || "—" },
+                    ].map((item, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          background: "#EFF6FF",
+                          borderRadius: 10,
+                          padding: "12px 14px",
+                          border: "1px solid #BFDBFE",
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontSize: 11,
+                            color: "#3B82F6",
+                            fontWeight: 700,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.07em",
+                            marginBottom: 4,
+                          }}
+                        >
+                          {item.icon} {item.label}
                         </div>
+                        <div
+                          style={{
+                            fontSize: 14,
+                            color: "#1D4ED8",
+                            fontWeight: 700,
+                            fontFamily: "monospace",
+                          }}
+                        >
+                          {item.val}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
 
-                        {/* Modal footer */}
-                        <div style={{ padding: "16px 28px 24px", display: "flex", justifyContent: "flex-end", gap: 10 }}>
-                            <button onClick={() => setShowModal(false)} style={{ padding: "10px 22px", borderRadius: 9, border: "1.5px solid #E2E8F0", background: "white", color: "#64748B", fontWeight: 600, fontSize: 13.5, cursor: "pointer" }}>
-                                {modalMode === "view" ? "Cerrar" : "Cancelar"}
-                            </button>
-                            {(modalMode === "add" || modalMode === "edit") && (
-                                <button onClick={handleSave} className="action-btn" style={{ padding: "10px 24px", borderRadius: 9, border: "none", background: "linear-gradient(135deg, #1E3A8A, #2563EB)", color: "white", fontWeight: 700, fontSize: 13.5, cursor: "pointer", boxShadow: "0 4px 12px rgba(37,99,235,0.35)" }}>
-                                    {modalMode === "add" ? "Guardar Docente" : "Actualizar Docente"}
-                                </button>
-                            )}
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "1fr 1fr",
+                      gap: 14,
+                    }}
+                  >
+                    {[
+                      { icon: "📚", label: "Materia", val: selectedTeacher.subject },
+                      { icon: "📧", label: "Correo", val: selectedTeacher.email },
+                      { icon: "📞", label: "Teléfono", val: selectedTeacher.phone },
+                      { icon: "📅", label: "Fecha de Ingreso", val: selectedTeacher.joined },
+                    ].map((item, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          background: "#F8FAFC",
+                          borderRadius: 10,
+                          padding: "12px 14px",
+                          border: "1px solid #E2E8F0",
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontSize: 11,
+                            color: "#94A3B8",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.07em",
+                            marginBottom: 4,
+                          }}
+                        >
+                          {item.icon} {item.label}
+                        </div>
+                        <div
+                          style={{
+                            fontSize: 13.5,
+                            color: "#334155",
+                            fontWeight: 500,
+                          }}
+                        >
+                          {item.val}
                         </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div
+                  style={{ display: "flex", flexDirection: "column", gap: 16 }}
+                >
+                  {/* ── Matrícula ── */}
+                  <div>
+                    <label
+                      style={{
+                        display: "block",
+                        fontSize: 12.5,
+                        fontWeight: 700,
+                        color: "#374151",
+                        marginBottom: 6,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.06em",
+                      }}
+                    >
+                      🎓 Matrícula
+                    </label>
+                    <input
+                      type="text"
+                      placeholder="Ej. MAT-2024-001"
+                      value={form.matricula}
+                      onChange={(e) =>
+                        setForm((f) => ({ ...f, matricula: e.target.value }))
+                      }
+                      style={{
+                        width: "100%",
+                        height: 40,
+                        border: "1.5px solid #BFDBFE",
+                        borderRadius: 9,
+                        padding: "0 14px",
+                        fontSize: 13.5,
+                        color: "#1D4ED8",
+                        background: "#EFF6FF",
+                        fontFamily: "monospace",
+                        fontWeight: 600,
+                      }}
+                    />
+                  </div>
+
+                  {/* ── Resto de campos ── */}
+                  {[
+                    {
+                      label: "Nombre Completo",
+                      key: "name",
+                      type: "text",
+                      placeholder: "Ej. María García López",
+                    },
+                    {
+                      label: "Materia que imparte",
+                      key: "subject",
+                      type: "text",
+                      placeholder: "Ej. Cálculo Diferencial",
+                    },
+                    {
+                      label: "Correo Institucional",
+                      key: "email",
+                      type: "email",
+                      placeholder: "docente@universidad.edu",
+                    },
+                    {
+                      label: "Teléfono",
+                      key: "phone",
+                      type: "text",
+                      placeholder: "+502 0000-0000",
+                    },
+                    {
+                      label: "Grado Académico",
+                      key: "degree",
+                      type: "text",
+                      placeholder: "Ej. MSc. Ingeniería de Software",
+                    },
+                  ].map((field) => (
+                    <div key={field.key}>
+                      <label
+                        style={{
+                          display: "block",
+                          fontSize: 12.5,
+                          fontWeight: 700,
+                          color: "#374151",
+                          marginBottom: 6,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.06em",
+                        }}
+                      >
+                        {field.label}
+                      </label>
+                      <input
+                        type={field.type}
+                        placeholder={field.placeholder}
+                        value={form[field.key]}
+                        onChange={(e) =>
+                          setForm((f) => ({
+                            ...f,
+                            [field.key]: e.target.value,
+                          }))
+                        }
+                        style={{
+                          width: "100%",
+                          height: 40,
+                          border: "1.5px solid #E2E8F0",
+                          borderRadius: 9,
+                          padding: "0 14px",
+                          fontSize: 13.5,
+                          color: "#334155",
+                          background: "#F8FAFC",
+                        }}
+                      />
                     </div>
+                  ))}
+                  <div>
+                    <label
+                      style={{
+                        display: "block",
+                        fontSize: 12.5,
+                        fontWeight: 700,
+                        color: "#374151",
+                        marginBottom: 6,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.06em",
+                      }}
+                    >
+                      Estado
+                    </label>
+                    <select
+                      value={form.status}
+                      onChange={(e) =>
+                        setForm((f) => ({ ...f, status: e.target.value }))
+                      }
+                      style={{
+                        width: "100%",
+                        height: 40,
+                        border: "1.5px solid #E2E8F0",
+                        borderRadius: 9,
+                        padding: "0 14px",
+                        fontSize: 13.5,
+                        color: "#334155",
+                        background: "#F8FAFC",
+                      }}
+                    >
+                      <option>Activo</option>
+                      <option>Inactivo</option>
+                      <option>Licencia</option>
+                    </select>
+                  </div>
                 </div>
-            )}
+              )}
+            </div>
+
+            {/* Modal footer */}
+            <div
+              style={{
+                padding: "16px 28px 24px",
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 10,
+              }}
+            >
+              <button
+                onClick={() => setShowModal(false)}
+                style={{
+                  padding: "10px 22px",
+                  borderRadius: 9,
+                  border: "1.5px solid #E2E8F0",
+                  background: "white",
+                  color: "#64748B",
+                  fontWeight: 600,
+                  fontSize: 13.5,
+                  cursor: "pointer",
+                }}
+              >
+                {modalMode === "view" ? "Cerrar" : "Cancelar"}
+              </button>
+              {(modalMode === "add" || modalMode === "edit") && (
+                <button
+                  onClick={handleSave}
+                  className="action-btn"
+                  style={{
+                    padding: "10px 24px",
+                    borderRadius: 9,
+                    border: "none",
+                    background: "linear-gradient(135deg, #1E3A8A, #2563EB)",
+                    color: "white",
+                    fontWeight: 700,
+                    fontSize: 13.5,
+                    cursor: "pointer",
+                    boxShadow: "0 4px 12px rgba(37,99,235,0.35)",
+                  }}
+                >
+                  {modalMode === "add"
+                    ? "Guardar Docente"
+                    : "Actualizar Docente"}
+                </button>
+              )}
+            </div>
+          </div>
         </div>
-    );
+      )}
+    </div>
+  );
 }
\ No newline at end of file

From 47f196a5592b189a9352771977a0015a9bbc75cc Mon Sep 17 00:00:00 2001
From: Isaac <aizaclopez1511@gmail.com>
Date: Sun, 29 Mar 2026 23:46:57 -0500
Subject: [PATCH 35/46] =?UTF-8?q?Agrego=20backend=20inicial=20con=20server?=
 =?UTF-8?q?.js=20y=20configuraci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/Package-lock.json | 1015 +++++++++++++++++++++++++++++++++++++
 backend/Package.json      |   19 +
 backend/server.js         |   17 +
 ontimeClock               |    1 +
 4 files changed, 1052 insertions(+)
 create mode 100644 backend/Package-lock.json
 create mode 100644 backend/Package.json
 create mode 100644 backend/server.js
 create mode 160000 ontimeClock

diff --git a/backend/Package-lock.json b/backend/Package-lock.json
new file mode 100644
index 0000000..194ec33
--- /dev/null
+++ b/backend/Package-lock.json
@@ -0,0 +1,1015 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "backend",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "cors": "^2.8.6",
+        "dotenv": "^17.3.1",
+        "express": "^5.2.1",
+        "pg": "^8.20.0"
+      },
+      "devDependencies": {}
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-connection-string": "^2.12.0",
+        "pg-pool": "^3.13.0",
+        "pg-protocol": "^1.13.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
+      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
+      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
+      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    }
+  }
+}
diff --git a/backend/Package.json b/backend/Package.json
new file mode 100644
index 0000000..3fe296c
--- /dev/null
+++ b/backend/Package.json
@@ -0,0 +1,19 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "pg": "^8.20.0"
+  },
+  "description": ""
+}
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
new file mode 100644
index 0000000..2f847f7
--- /dev/null
+++ b/backend/server.js
@@ -0,0 +1,17 @@
+    const express = require("express");
+const cors = require("cors"); //Permite que React llame a las API´S
+
+const teachersRoutes = require("./routes/teachersRoutes");
+
+const app = express();
+
+app.use(cors());
+app.use(express.json())
+
+app.use("/api/teachers", teachersRoutes);
+
+const PORT = 3000;
+   
+app.listen(PORT, () => {
+    console.log("Servidor de backend en puerto: " + PORT)
+})
\ No newline at end of file
diff --git a/ontimeClock b/ontimeClock
new file mode 160000
index 0000000..5a41cdf
--- /dev/null
+++ b/ontimeClock
@@ -0,0 +1 @@
+Subproject commit 5a41cdf6d065c14ac2fb854ca49e37518be4b019

From e55ae9fabd1a2644f4e502faa8ba4d279c8b309a Mon Sep 17 00:00:00 2001
From: Nestor <00856217@red.unid.mx>
Date: Wed, 1 Apr 2026 15:27:30 -0500
Subject: [PATCH 36/46] =?UTF-8?q?Correcci=C3=B3n=20de=20Sidebar=20y=20Crea?=
 =?UTF-8?q?cion=20de=20la=20base=20de=20datos=20de=20system=5FConfig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/controllers/SystemConfigController.js |   5 +-
 backend/models/SystemConfigModel.js           |  18 +-
 src/components/Sidebar.jsx                    | 334 ++++----
 src/pages/SystemConfig.jsx                    | 771 +++++++++++-------
 src/pages/sistemaconfig.jsx                   | 751 -----------------
 5 files changed, 643 insertions(+), 1236 deletions(-)
 delete mode 100644 src/pages/sistemaconfig.jsx

diff --git a/backend/controllers/SystemConfigController.js b/backend/controllers/SystemConfigController.js
index 43373d4..a27a045 100644
--- a/backend/controllers/SystemConfigController.js
+++ b/backend/controllers/SystemConfigController.js
@@ -4,8 +4,9 @@ const {
     createConfig,
     updateConfig,
     deleteConfig,
-    getworkdays,    
-    updateworkday   
+    getworkdays,
+    updateworkday,
+    createworkday   // ✅ CORREGIDO: faltaba esta importación
 } = require('../models/SystemConfigModel');
 
 // Manejador para obtener todas las configuraciones
diff --git a/backend/models/SystemConfigModel.js b/backend/models/SystemConfigModel.js
index bac7b41..bf9eb4b 100644
--- a/backend/models/SystemConfigModel.js
+++ b/backend/models/SystemConfigModel.js
@@ -63,27 +63,27 @@ exports.deleteConfig = async (id) => {
     return { message: 'Configuración eliminada' };
 };
 
-// ── Work Days (Tabla: "Work_Days") ──
+// ── Work Days (Tabla: "work_days") ──
 exports.getworkdays = async () => {
     const result = await pool.query('SELECT * FROM "work_days"');
     return result.rows;
 };
 
-exports.updateworkday = async (id, { nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo }) => {
+exports.updateworkday = async (id, { nombre, dia, hora_inicio, hora_fin, activo }) => {
     const result = await pool.query(
         `UPDATE "work_days" 
-         SET nombre=$1, dia=$2, hora_inicio=$3, hora_fin=$4, duracion_bloque=$5, activo=$6
-         WHERE id=$7 RETURNING *`,
-        [nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo, id]
+         SET nombre=$1, dia=$2, hora_inicio=$3, hora_fin=$4, activo=$5
+         WHERE id=$6 RETURNING *`,
+        [nombre, dia, hora_inicio, hora_fin, activo, id]
     );
     return result.rows[0];
 };
 
-exports.createworkday = async ({ nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo }) => {
+exports.createworkday = async ({ nombre, dia, hora_inicio, hora_fin, activo }) => {
     const result = await pool.query(
-        `INSERT INTO "work_days" (nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo)
-         VALUES ($1, $2, $3, $4, $5, $6) RETURNING *`,
-        [nombre, dia, hora_inicio, hora_fin, duracion_bloque, activo]
+        `INSERT INTO "work_days" (nombre, dia, hora_inicio, hora_fin, activo)
+         VALUES ($1, $2, $3, $4, $5) RETURNING *`,
+        [nombre, dia, hora_inicio, hora_fin, activo]
     );
     return result.rows[0];
 };
\ No newline at end of file
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index cf68501..8f2a5ba 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 /**
  * INSTRUCCIONES DE INSTALACIÓN:
  * 1. Instalar Heroicons: npm install @heroicons/react
@@ -10,170 +9,177 @@
  */
 //archivo: src/components/Sidebar.jsx
 //nuevo sidebar
-=======
->>>>>>> desarrollo
-import { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-
-import { 
-    HomeIcon, 
-    InformationCircleIcon, 
-    PhoneIcon, 
-    Squares2X2Icon, 
-    UserGroupIcon, 
-    ClockIcon, 
-    DocumentChartBarIcon, 
-    CalendarDaysIcon,
-    Bars3Icon, 
-    MagnifyingGlassIcon, 
-    ArrowLeftOnRectangleIcon, 
-    UserCircleIcon,
-    Cog6ToothIcon
-} from '@heroicons/react/24/outline';
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+import {
+  HomeIcon,
+  InformationCircleIcon,
+  PhoneIcon,
+  Squares2X2Icon,
+  UserGroupIcon,
+  ClockIcon,
+  DocumentChartBarIcon,
+  CalendarDaysIcon,
+  Bars3Icon,
+  MagnifyingGlassIcon,
+  ArrowLeftOnRectangleIcon,
+  UserCircleIcon,
+  Cog6ToothIcon,
+} from "@heroicons/react/24/outline";
 
 function Sidebar() {
-
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    const location = useLocation();
-    const iconSize = 'h-5 w-5';
-
-    const linkClass = (path) => {
-        const isActive = path === "/"
-            ? location.pathname === "/"
-            : location.pathname.startsWith(path);
-
-        return `flex items-center gap-3 px-3 py-2 rounded-lg transition-all ${
-            isActive
-                ? 'bg-white/10 text-[#f0c02f]'
-                : 'hover:bg-white/10 hover:text-[#f0c02f]'
-        }`;
-    };
-
-    return (
-        <aside className={`${isCollapsed ? 'w-20' : 'w-64'} bg-[#1a1a32] text-white h-screen overflow-y-auto p-4 flex flex-col transition-all duration-300 border-r border-white/10`}>
-
-            {/* CABECERA */}
-            <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-6`}>
-                {!isCollapsed && (
-                    <h2 className='text-xl font-bold truncate text-[#f0c02f]'>
-                        Reloj Checador
-                    </h2>
-                )}
-
-                <button 
-                    onClick={() => setIsCollapsed(!isCollapsed)}
-                    className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
-                >
-                    <Bars3Icon className="h-7 w-7" />
-                </button>
-            </div>
-
-            {/* PERFIL */}
-            {!isCollapsed && (
-                <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
-                    <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
-                    <div>
-                        <p className="text-xs font-bold truncate">Admin UNID</p>
-                        <p className="text-[10px] text-slate-400">En línea</p>
-                    </div>
-                </div>
-            )}
-
-            {/* BUSCADOR */}
-            {!isCollapsed && (
-                <div className='relative mb-6 px-1'>
-                    <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
-                    <input 
-                        type="text" 
-                        placeholder="Buscar..." 
-                        className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
-                    />
-                </div>
-            )}
-
-            {/* NAV */}
-            <div className='flex flex-col gap-4'>
-
-                {/* SITIO */}
-                <div>
-                    {!isCollapsed && (
-                        <p className='text-slate-500 text-[11px] mb-2 uppercase tracking-[2px] font-black'>Sitio</p>
-                    )}
-
-                    <nav className='flex flex-col gap-1'>
-                        <Link to="/" className={linkClass("/")}>
-                            <HomeIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Inicio</span>}
-                        </Link>
-
-                        <Link to="/about" className={linkClass("/about")}>
-                            <InformationCircleIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Acerca de</span>}
-                        </Link>
-
-                        <Link to="/contact" className={linkClass("/contact")}>
-                            <PhoneIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Contacto</span>}
-                        </Link>
-                    </nav>
-                </div>
-
-                {/* ADMIN */}
-                <div>
-                    {!isCollapsed && (
-                        <p className='text-slate-500 text-[11px] mb-2 uppercase tracking-[2px] font-black'>Administración</p>
-                    )}
-
-                    <nav className='flex flex-col gap-1'>
-                        <Link to="/admin" className={linkClass("/admin")}>
-                            <Squares2X2Icon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Dashboard</span>}
-                        </Link>
-
-                        <Link to="/teachers" className={linkClass("/teachers")}>
-                            <UserGroupIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Maestros</span>}
-                        </Link>
-
-                        <Link to="/horarios" className={linkClass("/horarios")}>
-                            <CalendarDaysIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Horarios</span>}
-                        </Link>
-
-                        <Link to="/clock" className={linkClass("/clock")}>
-                            <ClockIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Reloj</span>}
-                        </Link>
-
-                        <Link to="/reports" className={linkClass("/reports")}>
-                            <DocumentChartBarIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Reportes</span>}
-                        </Link>
-
-                        <Link to="/config" className={linkClass("/config")}>
-                            <Cog6ToothIcon className={iconSize} />
-                            {!isCollapsed && <span className='text-sm'>Configuración</span>}
-                        </Link>
-                    </nav>
-                </div>
-            </div>
-
-            {/* FOOTER */}
-            <div className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? 'flex justify-center' : ''}`}>
-                {!isCollapsed ? (
-                    <button className='flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-all hover:bg-red-500/10'>
-                        <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500`} />
-                        <span className='text-sm font-bold text-red-500'>Cerrar Sesión</span>
-                    </button>
-                ) : (
-                    <button className='p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors'>
-                        <ArrowLeftOnRectangleIcon className={iconSize} />
-                    </button>
-                )}
-            </div>
-
-        </aside>
-    );
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const location = useLocation();
+  const iconSize = "h-5 w-5";
+
+  const linkClass = (path) => {
+    const isActive =
+      path === "/"
+        ? location.pathname === "/"
+        : location.pathname.startsWith(path);
+
+    return `flex items-center gap-3 px-3 py-2 rounded-lg transition-all ${
+      isActive
+        ? "bg-white/10 text-[#f0c02f]"
+        : "hover:bg-white/10 hover:text-[#f0c02f]"
+    }`;
+  };
+
+  return (
+    <aside
+      className={`${isCollapsed ? "w-20" : "w-64"} bg-[#1a1a32] text-white h-screen overflow-y-auto p-4 flex flex-col transition-all duration-300 border-r border-white/10`}
+    >
+      {/* CABECERA */}
+      <div
+        className={`flex items-center ${isCollapsed ? "justify-center" : "justify-between"} mb-6`}
+      >
+        {!isCollapsed && (
+          <h2 className="text-xl font-bold truncate text-[#f0c02f]">
+            Reloj Checador
+          </h2>
+        )}
+
+        <button
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="p-1 hover:bg-white/10 rounded text-slate-400 transition-colors"
+        >
+          <Bars3Icon className="h-7 w-7" />
+        </button>
+      </div>
+
+      {/* PERFIL */}
+      {!isCollapsed && (
+        <div className="flex items-center gap-3 mb-6 p-2 rounded-lg bg-white/5 border border-white/10">
+          <UserCircleIcon className="h-8 w-8 text-[#f0c02f] shrink-0" />
+          <div>
+            <p className="text-xs font-bold truncate">Admin UNID</p>
+            <p className="text-[10px] text-slate-400">En línea</p>
+          </div>
+        </div>
+      )}
+
+      {/* BUSCADOR */}
+      {!isCollapsed && (
+        <div className="relative mb-6 px-1">
+          <MagnifyingGlassIcon className="h-4 w-4 absolute left-3 top-2.5 text-slate-500" />
+          <input
+            type="text"
+            placeholder="Buscar..."
+            className="w-full bg-white/5 text-sm text-white rounded-md py-2 pl-8 pr-2 focus:outline-none border border-white/10 focus:border-[#f0c02f]/50 transition-all"
+          />
+        </div>
+      )}
+
+      {/* NAV */}
+      <div className="flex flex-col gap-4">
+        {/* SITIO */}
+        <div>
+          {!isCollapsed && (
+            <p className="text-slate-500 text-[11px] mb-2 uppercase tracking-[2px] font-black">
+              Sitio
+            </p>
+          )}
+
+          <nav className="flex flex-col gap-1">
+            <Link to="/" className={linkClass("/")}>
+              <HomeIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Inicio</span>}
+            </Link>
+
+            <Link to="/about" className={linkClass("/about")}>
+              <InformationCircleIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Acerca de</span>}
+            </Link>
+
+            <Link to="/contact" className={linkClass("/contact")}>
+              <PhoneIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Contacto</span>}
+            </Link>
+          </nav>
+        </div>
+
+        {/* ADMIN */}
+        <div>
+          {!isCollapsed && (
+            <p className="text-slate-500 text-[11px] mb-2 uppercase tracking-[2px] font-black">
+              Administración
+            </p>
+          )}
+
+          <nav className="flex flex-col gap-1">
+            <Link to="/admin" className={linkClass("/admin")}>
+              <Squares2X2Icon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Dashboard</span>}
+            </Link>
+
+            <Link to="/teachers" className={linkClass("/teachers")}>
+              <UserGroupIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Maestros</span>}
+            </Link>
+
+            <Link to="/horarios" className={linkClass("/horarios")}>
+              <CalendarDaysIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Horarios</span>}
+            </Link>
+
+            <Link to="/clock" className={linkClass("/clock")}>
+              <ClockIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Reloj</span>}
+            </Link>
+
+            <Link to="/reports" className={linkClass("/reports")}>
+              <DocumentChartBarIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Reportes</span>}
+            </Link>
+
+            <Link to="/config" className={linkClass("/config")}>
+              <Cog6ToothIcon className={iconSize} />
+              {!isCollapsed && <span className="text-sm">Configuración</span>}
+            </Link>
+          </nav>
+        </div>
+      </div>
+
+      {/* FOOTER */}
+      <div
+        className={`mt-auto pt-6 border-t border-white/10 ${isCollapsed ? "flex justify-center" : ""}`}
+      >
+        {!isCollapsed ? (
+          <button className="flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-all hover:bg-red-500/10">
+            <ArrowLeftOnRectangleIcon className={`${iconSize} text-red-500`} />
+            <span className="text-sm font-bold text-red-500">
+              Cerrar Sesión
+            </span>
+          </button>
+        ) : (
+          <button className="p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors">
+            <ArrowLeftOnRectangleIcon className={iconSize} />
+          </button>
+        )}
+      </div>
+    </aside>
+  );
 }
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/src/pages/SystemConfig.jsx b/src/pages/SystemConfig.jsx
index eff75d3..9a2cfcb 100644
--- a/src/pages/SystemConfig.jsx
+++ b/src/pages/SystemConfig.jsx
@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
-// ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
+const API = "http://localhost:3000/api/systemconfig";
+
+// ─── Paleta de colores y estilos base ───────────────────────────────────────
 const styles = {
-  // Layout principal
   wrapper: {
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
     background: "#ffffff",
@@ -28,38 +29,16 @@ const styles = {
     margin: 0,
     fontStyle: "italic",
   },
-  moduleBadge: {
-    display: "inline-block",
-    background: "rgba(59,130,246,0.1)",
-    border: "1px solid rgba(59,130,246,0.3)",
-    color: "#1e40af",
-    fontSize: "0.75rem",
-    padding: "0.2rem 0.75rem",
-    borderRadius: "999px",
-    marginBottom: "0.75rem",
-    letterSpacing: "0.08em",
-    textTransform: "uppercase",
-  },
-
-  // Grid de secciones
   grid: {
     display: "grid",
     gridTemplateColumns: "repeat(auto-fit, minmax(480px, 1fr))",
     gap: "1.5rem",
   },
-  gridFull: {
-    display: "grid",
-    gridTemplateColumns: "1fr",
-    gap: "1.5rem",
-  },
-
-  // Cards
   card: {
     background: "#f9fafb",
     border: "1px solid rgba(0,0,0,0.08)",
     borderRadius: "16px",
     padding: "1.75rem",
-    backdropFilter: "blur(12px)",
     boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
   },
   cardTitle: {
@@ -74,11 +53,8 @@ const styles = {
   cardDesc: {
     fontSize: "0.82rem",
     color: "#6b7280",
-    marginBottom: "1.25rem",
     margin: "0 0 1.25rem 0",
   },
-
-  // Formularios
   label: {
     display: "block",
     fontSize: "0.8rem",
@@ -110,16 +86,12 @@ const styles = {
     outline: "none",
     boxSizing: "border-box",
   },
-  fieldGroup: {
-    marginBottom: "1rem",
-  },
+  fieldGroup: { marginBottom: "1rem" },
   row: {
     display: "grid",
     gridTemplateColumns: "1fr 1fr",
     gap: "1rem",
   },
-
-  // Botones
   btnPrimary: {
     background: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
     color: "#fff",
@@ -129,7 +101,6 @@ const styles = {
     fontSize: "0.85rem",
     fontWeight: "600",
     cursor: "pointer",
-    transition: "opacity 0.2s, transform 0.1s",
     letterSpacing: "0.02em",
   },
   btnSecondary: {
@@ -140,7 +111,6 @@ const styles = {
     padding: "0.55rem 1.2rem",
     fontSize: "0.85rem",
     cursor: "pointer",
-    transition: "background 0.2s",
   },
   btnDanger: {
     background: "rgba(239,68,68,0.1)",
@@ -157,11 +127,7 @@ const styles = {
     marginTop: "1.25rem",
     justifyContent: "flex-end",
   },
-
-  // Slider
-  sliderWrapper: {
-    marginBottom: "1rem",
-  },
+  sliderWrapper: { marginBottom: "1rem" },
   sliderRow: {
     display: "flex",
     justifyContent: "space-between",
@@ -176,18 +142,8 @@ const styles = {
     fontSize: "0.85rem",
     fontWeight: "700",
   },
-  slider: {
-    width: "100%",
-    accentColor: "#3b82f6",
-    cursor: "pointer",
-  },
-
-  // Tabla de roles
-  table: {
-    width: "100%",
-    borderCollapse: "collapse",
-    fontSize: "0.88rem",
-  },
+  slider: { width: "100%", accentColor: "#3b82f6", cursor: "pointer" },
+  table: { width: "100%", borderCollapse: "collapse", fontSize: "0.88rem" },
   th: {
     textAlign: "left",
     padding: "0.6rem 0.8rem",
@@ -203,8 +159,6 @@ const styles = {
     color: "#374151",
     verticalAlign: "middle",
   },
-
-  // Badges de estado
   badgeActive: {
     background: "rgba(34,197,94,0.1)",
     color: "#159b2b",
@@ -231,8 +185,6 @@ const styles = {
     fontSize: "0.75rem",
     fontWeight: "600",
   },
-
-  // Toggle switch
   toggleRow: {
     display: "flex",
     justifyContent: "space-between",
@@ -240,17 +192,8 @@ const styles = {
     padding: "0.7rem 0",
     borderBottom: "1px solid rgba(0,0,0,0.05)",
   },
-  toggleLabel: {
-    fontSize: "0.88rem",
-    color: "#1f2937",
-  },
-  toggleSub: {
-    fontSize: "0.78rem",
-    color: "#9ca3af",
-    marginTop: "0.1rem",
-  },
-
-  // Horario
+  toggleLabel: { fontSize: "0.88rem", color: "#1f2937" },
+  toggleSub: { fontSize: "0.78rem", color: "#9ca3af", marginTop: "0.1rem" },
   scheduleGrid: {
     display: "grid",
     gridTemplateColumns: "repeat(7, 1fr)",
@@ -277,14 +220,7 @@ const styles = {
     border: "1px solid rgba(0,0,0,0.08)",
     color: "#9ca3af",
   },
-
-  // Divider
-  divider: {
-    borderTop: "1px solid rgba(0,0,0,0.06)",
-    margin: "1.25rem 0",
-  },
-
-  // Icono decorativo en card header
+  divider: { borderTop: "1px solid rgba(0,0,0,0.06)", margin: "1.25rem 0" },
   iconBox: {
     width: "32px",
     height: "32px",
@@ -297,54 +233,133 @@ const styles = {
   },
 };
 
-// ─── Datos mock ─────────────────────────────────────────────────────────────────
-
+// ─── Datos mock para Roles (no tiene tabla en BD) ─────────────────────────────
 const MOCK_ROLES = [
-  { id: 1, nombre: "Administrador", permisos: "Total", usuarios: 3, estado: "activo" },
-  { id: 2, nombre: "Coordinador", permisos: "Parcial", usuarios: 8, estado: "activo" },
-  { id: 3, nombre: "Docente", permisos: "Lectura", usuarios: 42, estado: "activo" },
-  { id: 4, nombre: "Auxiliar", permisos: "Limitado", usuarios: 12, estado: "inactivo" },
+  { id: 1, nombre: "Administrador", permisos: "Total",    usuarios: 3,  estado: "activo" },
+  { id: 2, nombre: "Coordinador",   permisos: "Parcial",  usuarios: 8,  estado: "activo" },
+  { id: 3, nombre: "Docente",       permisos: "Lectura",  usuarios: 42, estado: "activo" },
+  { id: 4, nombre: "Auxiliar",      permisos: "Limitado", usuarios: 12, estado: "inactivo" },
 ];
 
 const DIAS_SEMANA = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
 
-// ─── Subcomponente: Toggle ────────────────────────────────────────────────────
+// ─── Toast ────────────────────────────────────────────────────────────────────
+function Toast({ toasts }) {
+  return (
+    <div style={{
+      position: "fixed", top: "1.5rem", right: "1.5rem",
+      zIndex: 9999, display: "flex", flexDirection: "column", gap: "0.5rem",
+    }}>
+      {toasts.map((t) => (
+        <div key={t.id} style={{
+          background: t.type === "success" ? "#166534" : t.type === "error" ? "#991b1b" : "#1e3a5f",
+          color: "#fff",
+          padding: "0.75rem 1.25rem",
+          borderRadius: "10px",
+          fontSize: "0.88rem",
+          fontWeight: "500",
+          boxShadow: "0 4px 16px rgba(0,0,0,0.18)",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.6rem",
+          minWidth: "260px",
+        }}>
+          <span>{t.type === "success" ? "✅" : t.type === "error" ? "❌" : "ℹ️"}</span>
+          {t.message}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Modal Nuevo Rol ──────────────────────────────────────────────────────────
+function ModalNuevoRol({ onClose, onGuardar }) {
+  const [form, setForm] = useState({ nombre: "", permisos: "Lectura" });
+  const [error, setError] = useState("");
+
+  const handleGuardar = () => {
+    if (!form.nombre.trim()) { setError("El nombre del rol es obligatorio."); return; }
+    onGuardar(form);
+  };
+
+  return (
+    <div style={{
+      position: "fixed", inset: 0,
+      background: "rgba(0,0,0,0.35)",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      zIndex: 1000,
+    }} onClick={onClose}>
+      <div style={{
+        background: "#fff",
+        borderRadius: "16px",
+        padding: "2rem",
+        width: "100%",
+        maxWidth: "420px",
+        boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
+      }} onClick={(e) => e.stopPropagation()}>
+        <h2 style={{ margin: "0 0 0.4rem 0", fontSize: "1.1rem", fontWeight: "700", color: "#1f2937" }}>
+          🔑 Nuevo Rol
+        </h2>
+        <p style={{ margin: "0 0 1.5rem 0", fontSize: "0.82rem", color: "#6b7280" }}>
+          Define el nombre y nivel de permisos del nuevo rol.
+        </p>
+        <div style={styles.fieldGroup}>
+          <label style={styles.label}>Nombre del rol</label>
+          <input
+            style={{ ...styles.input, borderColor: error ? "#ef4444" : undefined }}
+            placeholder="Ej: Supervisor"
+            value={form.nombre}
+            onChange={(e) => { setForm({ ...form, nombre: e.target.value }); setError(""); }}
+            autoFocus
+          />
+          {error && <p style={{ margin: "0.3rem 0 0", fontSize: "0.78rem", color: "#ef4444" }}>{error}</p>}
+        </div>
+        <div style={styles.fieldGroup}>
+          <label style={styles.label}>Nivel de permisos</label>
+          <select
+            style={styles.select}
+            value={form.permisos}
+            onChange={(e) => setForm({ ...form, permisos: e.target.value })}
+          >
+            <option value="Total">Total</option>
+            <option value="Parcial">Parcial</option>
+            <option value="Lectura">Lectura</option>
+            <option value="Limitado">Limitado</option>
+          </select>
+        </div>
+        <div style={{ ...styles.btnActions, marginTop: "1.5rem" }}>
+          <button style={styles.btnSecondary} onClick={onClose}>Cancelar</button>
+          <button style={styles.btnPrimary} onClick={handleGuardar}>Crear rol</button>
+        </div>
+      </div>
+    </div>
+  );
+}
 
+// ─── Toggle ───────────────────────────────────────────────────────────────────
 function Toggle({ checked, onChange }) {
   return (
     <div
       onClick={() => onChange(!checked)}
       style={{
-        width: "42px",
-        height: "22px",
-        borderRadius: "999px",
+        width: "42px", height: "22px", borderRadius: "999px",
         background: checked ? "rgba(59,130,246,0.8)" : "rgba(209,213,219,0.8)",
         border: checked ? "1px solid rgba(59,130,246,0.6)" : "1px solid rgba(0,0,0,0.12)",
-        position: "relative",
-        cursor: "pointer",
-        transition: "background 0.2s",
-        flexShrink: 0,
+        position: "relative", cursor: "pointer", transition: "background 0.2s", flexShrink: 0,
       }}
     >
-      <div
-        style={{
-          position: "absolute",
-          top: "2px",
-          left: checked ? "21px" : "2px",
-          width: "16px",
-          height: "16px",
-          borderRadius: "50%",
-          background: "#fff",
-          transition: "left 0.2s",
-          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
-        }}
-      />
+      <div style={{
+        position: "absolute", top: "2px",
+        left: checked ? "21px" : "2px",
+        width: "16px", height: "16px",
+        borderRadius: "50%", background: "#fff",
+        transition: "left 0.2s", boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+      }} />
     </div>
   );
 }
 
-// ─── Subcomponente: SectionCard ────────────────────────────────────────────────
-
+// ─── SectionCard ──────────────────────────────────────────────────────────────
 function SectionCard({ icon, title, desc, color = "#3b82f6", children }) {
   return (
     <div style={styles.card}>
@@ -362,90 +377,322 @@ function SectionCard({ icon, title, desc, color = "#3b82f6", children }) {
   );
 }
 
-// ─── Subcomponente: Badge de rol ───────────────────────────────────────────────
-
+// ─── RolBadge ─────────────────────────────────────────────────────────────────
 function RolBadge({ permisos }) {
-  if (permisos === "Total") return <span style={styles.badgeAdmin}>{permisos}</span>;
-  if (permisos === "Parcial") return <span style={{ ...styles.badgeActive }}>{permisos}</span>;
+  if (permisos === "Total")   return <span style={styles.badgeAdmin}>{permisos}</span>;
+  if (permisos === "Parcial") return <span style={styles.badgeActive}>{permisos}</span>;
   return <span style={styles.badgeInactive}>{permisos}</span>;
 }
 
-// ─── COMPONENTE PRINCIPAL ──────────────────────────────────────────────────────
-
+// ─── COMPONENTE PRINCIPAL ─────────────────────────────────────────────────────
 export default function SystemConfig() {
 
-  // --- Estado: Ajustes Institucionales ---
-  const [institucion, setInstitucion] = useState({
-    nombre: "Instituto Tecnológico Nacional",
-    codigo: "ITN-2024",
+  // ── Toasts ──
+  const [toasts, setToasts] = useState([]);
+  const addToast = (message, type = "success") => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 3500);
+  };
+
+  // ── ID del registro en BD ──
+  const [configId, setConfigId] = useState(null);
+
+  // ── Estado: Ajustes Institucionales ──
+  const INITIAL_INSTITUCION = {
+    nombre: "",
+    codigo: "",
     zona: "America/Mexico_City",
     idioma: "es",
-  });
-
-  // --- Estado: Tolerancia ---
-  const [tolerancia, setTolerancia] = useState({
-    entrada: 10,
-    salida: 5,
-    inasistencias: 3,
-  });
-
-  // --- Estado: Horario base (por día) ---
-  const [horarioPorDia, setHorarioPorDia] = useState({
-    0: { activo: true,  inicio: "07:00", fin: "18:00" }, // Lun
-    1: { activo: true,  inicio: "07:00", fin: "18:00" }, // Mar
-    2: { activo: true,  inicio: "07:00", fin: "18:00" }, // Mié
-    3: { activo: true,  inicio: "07:00", fin: "18:00" }, // Jue
-    4: { activo: true,  inicio: "07:00", fin: "18:00" }, // Vie
-    5: { activo: false, inicio: "08:00", fin: "14:00" }, // Sáb
-    6: { activo: false, inicio: "08:00", fin: "14:00" }, // Dom
-  });
-  const [diaSeleccionado, setDiaSeleccionado] = useState(0);
+  };
+  const [institucion, setInstitucion] = useState(INITIAL_INSTITUCION);
+  const [savedInstitucion, setSavedInstitucion] = useState(INITIAL_INSTITUCION);
 
-  // --- Estado: Roles ---
-  const [roles, setRoles] = useState(MOCK_ROLES);
+  // ── Estado: Tolerancia ──
+  const INITIAL_TOLERANCIA = { entrada: 10, salida: 5, inasistencias: 3 };
+  const [tolerancia, setTolerancia] = useState(INITIAL_TOLERANCIA);
+  const [savedTolerancia, setSavedTolerancia] = useState(INITIAL_TOLERANCIA);
 
-  // --- Estado: Notificaciones ---
-  const [notificaciones, setNotificaciones] = useState({
+  // ── Estado: Notificaciones ──
+  const INITIAL_NOTIF = {
     emailAsistencia: true,
     emailReportes: true,
     pushAlertas: false,
     resumenDiario: true,
     alertasFaltas: true,
     notifDocentes: false,
-  });
+  };
+  const [notificaciones, setNotificaciones] = useState(INITIAL_NOTIF);
+  const [savedNotificaciones, setSavedNotificaciones] = useState(INITIAL_NOTIF);
+
+  // ── Estado: Horario base ──
+  const INITIAL_HORARIO = {
+    0: { activo: true,  inicio: "07:00", fin: "18:00", id: null },
+    1: { activo: true,  inicio: "07:00", fin: "18:00", id: null },
+    2: { activo: true,  inicio: "07:00", fin: "18:00", id: null },
+    3: { activo: true,  inicio: "07:00", fin: "18:00", id: null },
+    4: { activo: true,  inicio: "07:00", fin: "18:00", id: null },
+    5: { activo: false, inicio: "08:00", fin: "14:00", id: null },
+    6: { activo: false, inicio: "08:00", fin: "14:00", id: null },
+  };
+  const [horarioPorDia, setHorarioPorDia] = useState(INITIAL_HORARIO);
+  const [savedHorario, setSavedHorario] = useState(INITIAL_HORARIO);
+  const [diaSeleccionado, setDiaSeleccionado] = useState(0);
+
+  // ── Estado: Roles ──
+  const [roles, setRoles] = useState(MOCK_ROLES);
+  const [showModalRol, setShowModalRol] = useState(false);
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // CARGAR DATOS DE LA BD AL INICIAR
+  // ─────────────────────────────────────────────────────────────────────────────
+  useEffect(() => {
+    // Cargar configuración general
+    fetch(API)
+      .then((r) => r.json())
+      .then((data) => {
+        if (data && data.length > 0) {
+          const c = data[0];
+          setConfigId(c.id);
+
+          const inst = {
+            nombre: c.nombre_institucion || "",
+            codigo: c.codigo_institucional || "",
+            zona:   c.zona_horaria || "America/Mexico_City",
+            idioma: c.idioma || "es",
+          };
+          setInstitucion(inst);
+          setSavedInstitucion(inst);
+
+          const tol = {
+            entrada:       c.tolerancia_entrada       ?? 10,
+            salida:        c.tolerancia_salida         ?? 5,
+            inasistencias: c.inasistencias_permitidas  ?? 3,
+          };
+          setTolerancia(tol);
+          setSavedTolerancia(tol);
+
+          const notif = {
+            emailAsistencia: c.email_asistencia ?? true,
+            emailReportes:   c.email_reportes   ?? true,
+            pushAlertas:     c.push_alertas     ?? false,
+            resumenDiario:   c.resumen_diario   ?? true,
+            alertasFaltas:   c.alertas_faltas   ?? true,
+            notifDocentes:   c.notif_docentes   ?? false,
+          };
+          setNotificaciones(notif);
+          setSavedNotificaciones(notif);
+        }
+      })
+      .catch(() => addToast("No se pudo conectar con el servidor.", "error"));
+
+    // Cargar días laborales
+    fetch(`${API}/work-days`)
+      .then((r) => r.json())
+      .then((data) => {
+        if (data && data.length > 0) {
+          const nuevo = { ...INITIAL_HORARIO };
+          data.forEach((d) => {
+            const idx = d.dia;
+            if (idx >= 0 && idx <= 6) {
+              nuevo[idx] = {
+                activo: d.activo,
+                inicio: d.hora_inicio ? d.hora_inicio.slice(0, 5) : "07:00",
+                fin:    d.hora_fin    ? d.hora_fin.slice(0, 5)    : "18:00",
+                id:     d.id,
+              };
+            }
+          });
+          setHorarioPorDia(nuevo);
+          setSavedHorario(JSON.parse(JSON.stringify(nuevo)));
+        }
+      })
+      .catch(() => addToast("No se pudieron cargar los días laborales.", "error"));
+  }, []);
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // HELPERS
+  // ─────────────────────────────────────────────────────────────────────────────
+  const buildConfigBody = (instOv, tolOv, notifOv) => {
+    const inst  = instOv  || institucion;
+    const tol   = tolOv   || tolerancia;
+    const notif = notifOv || notificaciones;
+    return {
+      nombre_institucion:       inst.nombre,
+      codigo_institucional:     inst.codigo,
+      idioma:                   inst.idioma,
+      zona_horaria:             inst.zona,
+      tolerancia_entrada:       tol.entrada,
+      tolerancia_salida:        tol.salida,
+      inasistencias_permitidas: tol.inasistencias,
+      email_asistencia:         notif.emailAsistencia,
+      email_reportes:           notif.emailReportes,
+      push_alertas:             notif.pushAlertas,
+      resumen_diario:           notif.resumenDiario,
+      alertas_faltas:           notif.alertasFaltas,
+      notif_docentes:           notif.notifDocentes,
+    };
+  };
 
-  // --- Handlers ---
+  const saveConfig = async (body) => {
+    if (configId) {
+      const res = await fetch(`${API}/${configId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error("Error al actualizar");
+      return res.json();
+    } else {
+      const res = await fetch(API, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error("Error al crear");
+      const data = await res.json();
+      setConfigId(data.id);
+      return data;
+    }
+  };
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // HANDLERS
+  // ─────────────────────────────────────────────────────────────────────────────
   const toggleDia = (idx) => {
-    setHorarioPorDia((prev) => ({
-      ...prev,
-      [idx]: { ...prev[idx], activo: !prev[idx].activo },
-    }));
+    setHorarioPorDia((prev) => ({ ...prev, [idx]: { ...prev[idx], activo: !prev[idx].activo } }));
     setDiaSeleccionado(idx);
   };
-
   const actualizarHorarioDia = (idx, campo, valor) => {
-    setHorarioPorDia((prev) => ({
-      ...prev,
-      [idx]: { ...prev[idx], [campo]: valor },
-    }));
+    setHorarioPorDia((prev) => ({ ...prev, [idx]: { ...prev[idx], [campo]: valor } }));
   };
-
   const toggleRolEstado = (id) => {
     setRoles(roles.map((r) =>
       r.id === id ? { ...r, estado: r.estado === "activo" ? "inactivo" : "activo" } : r
     ));
   };
-
   const toggleNotif = (key) => {
     setNotificaciones((prev) => ({ ...prev, [key]: !prev[key] }));
   };
 
-  // ─── RENDER ────────────────────────────────────────────────────────────────
+  const handleGuardarCambios = async () => {
+    try {
+      await saveConfig(buildConfigBody(institucion, null, null));
+      setSavedInstitucion({ ...institucion });
+      addToast("Ajustes institucionales guardados correctamente.", "success");
+    } catch {
+      addToast("Error al guardar los ajustes institucionales.", "error");
+    }
+  };
+  const handleCancelarInstitucion = () => {
+    setInstitucion({ ...savedInstitucion });
+    addToast("Cambios descartados.", "info");
+  };
+
+  const handleAplicarTolerancia = async () => {
+    try {
+      await saveConfig(buildConfigBody(null, tolerancia, null));
+      setSavedTolerancia({ ...tolerancia });
+      addToast(`Tolerancia aplicada: entrada ${tolerancia.entrada} min, salida ${tolerancia.salida} min.`, "success");
+    } catch {
+      addToast("Error al guardar la tolerancia.", "error");
+    }
+  };
+  const handleRestablecerTolerancia = () => {
+    setTolerancia({ ...savedTolerancia });
+    addToast("Tolerancia restablecida a los valores guardados.", "info");
+  };
+
+  // ── GUARDAR HORARIO (work_days) ── ✅ Sin duracion_bloque
+  const handleGuardarHorario = async () => {
+    try {
+      const updates = Object.entries(horarioPorDia).map(([idx, dia]) => {
+        if (dia.id) {
+          // Registro existente → PUT
+          return fetch(`${API}/work-days/${dia.id}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              nombre:      DIAS_SEMANA[idx],
+              dia:         Number(idx),
+              hora_inicio: dia.inicio,
+              hora_fin:    dia.fin,
+              activo:      dia.activo,
+            }),
+          }).then((res) => {
+            if (!res.ok) throw new Error(`Error actualizando día ${idx}`);
+            return res.json();
+          });
+        }
+        // Sin id → POST
+        return fetch(`${API}/work-days`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            nombre:      DIAS_SEMANA[idx],
+            dia:         Number(idx),
+            hora_inicio: dia.inicio,
+            hora_fin:    dia.fin,
+            activo:      dia.activo,
+          }),
+        }).then((res) => {
+          if (!res.ok) throw new Error(`Error creando día ${idx}`);
+          return res.json();
+        }).then((created) => {
+          setHorarioPorDia((prev) => ({
+            ...prev,
+            [idx]: { ...prev[idx], id: created.id },
+          }));
+        });
+      });
+
+      await Promise.all(updates);
+      setSavedHorario(JSON.parse(JSON.stringify(horarioPorDia)));
+      const activos = DIAS_SEMANA.filter((_, i) => horarioPorDia[i].activo).join(", ");
+      addToast(`Horario guardado. Días activos: ${activos || "ninguno"}.`, "success");
+    } catch {
+      addToast("Error al guardar el horario.", "error");
+    }
+  };
+  const handleCancelarHorario = () => {
+    setHorarioPorDia(JSON.parse(JSON.stringify(savedHorario)));
+    addToast("Cambios de horario descartados.", "info");
+  };
 
+  const handleNuevoRol = () => setShowModalRol(true);
+  const handleGuardarRol = ({ nombre, permisos }) => {
+    const nuevoRol = { id: Date.now(), nombre: nombre.trim(), permisos, usuarios: 0, estado: "activo" };
+    setRoles((prev) => [...prev, nuevoRol]);
+    setShowModalRol(false);
+    addToast(`Rol "${nombre.trim()}" creado con permisos: ${permisos}.`, "success");
+  };
+
+  const handleGuardarPreferencias = async () => {
+    try {
+      await saveConfig(buildConfigBody(null, null, notificaciones));
+      setSavedNotificaciones({ ...notificaciones });
+      const activas = Object.values(notificaciones).filter(Boolean).length;
+      addToast(`Preferencias guardadas. ${activas} notificaciones activas.`, "success");
+    } catch {
+      addToast("Error al guardar las preferencias.", "error");
+    }
+  };
+  const handleRestablecerPreferencias = () => {
+    setNotificaciones({ ...savedNotificaciones });
+    addToast("Preferencias restablecidas.", "info");
+  };
+
+  // ─── RENDER ───────────────────────────────────────────────────────────────────
   return (
     <div style={styles.wrapper}>
+      <Toast toasts={toasts} />
+      {showModalRol && (
+        <ModalNuevoRol
+          onClose={() => setShowModalRol(false)}
+          onGuardar={handleGuardarRol}
+        />
+      )}
 
-      {/* ── Encabezado del módulo ── */}
       <header style={styles.header}>
         <h1 style={styles.headerTitle}>Configuración del Sistema</h1>
         <p style={styles.headerSubtitle}>
@@ -453,106 +700,69 @@ export default function SystemConfig() {
         </p>
       </header>
 
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 1 & 2: Ajustes Institucionales + Tolerancia
-      ══════════════════════════════════════════════════════ */}
+      {/* ══ SECCIÓN 1 & 2 ══ */}
       <div style={{ ...styles.grid, marginBottom: "1.5rem" }}>
 
-        {/* ── 1. Ajustes Institucionales ── */}
-        <SectionCard
-          icon="🏛️"
-          title="Ajustes Institucionales"
-          desc="Datos generales y configuración de la institución"
-          color="#3b82f6"
-        >
+        <SectionCard icon="🏛️" title="Ajustes Institucionales" desc="Datos generales y configuración de la institución" color="#3b82f6">
           <div style={styles.fieldGroup}>
             <label style={styles.label}>Nombre de la institución</label>
-            <input
-              style={styles.input}
-              value={institucion.nombre}
-              onChange={(e) => setInstitucion({ ...institucion, nombre: e.target.value })}
-            />
+            <input style={styles.input} value={institucion.nombre}
+              onChange={(e) => setInstitucion({ ...institucion, nombre: e.target.value })} />
           </div>
-
           <div style={styles.row}>
             <div style={styles.fieldGroup}>
               <label style={styles.label}>Código institucional</label>
-              <input
-                style={styles.input}
-                value={institucion.codigo}
-                onChange={(e) => setInstitucion({ ...institucion, codigo: e.target.value })}
-              />
+              <input style={styles.input} value={institucion.codigo}
+                onChange={(e) => setInstitucion({ ...institucion, codigo: e.target.value })} />
             </div>
             <div style={styles.fieldGroup}>
               <label style={styles.label}>Idioma</label>
-              <select
-                style={styles.select}
-                value={institucion.idioma}
-                onChange={(e) => setInstitucion({ ...institucion, idioma: e.target.value })}
-              >
+              <select style={styles.select} value={institucion.idioma}
+                onChange={(e) => setInstitucion({ ...institucion, idioma: e.target.value })}>
                 <option value="es">Español</option>
                 <option value="en">English</option>
                 <option value="pt">Português</option>
               </select>
             </div>
           </div>
-
           <div style={styles.fieldGroup}>
             <label style={styles.label}>Zona horaria</label>
-            <select
-              style={styles.select}
-              value={institucion.zona}
-              onChange={(e) => setInstitucion({ ...institucion, zona: e.target.value })}
-            >
+            <select style={styles.select} value={institucion.zona}
+              onChange={(e) => setInstitucion({ ...institucion, zona: e.target.value })}>
               <option value="America/Mexico_City">America/Mexico_City (UTC-6)</option>
               <option value="America/Bogota">America/Bogota (UTC-5)</option>
               <option value="America/Buenos_Aires">America/Buenos_Aires (UTC-3)</option>
               <option value="America/Lima">America/Lima (UTC-5)</option>
             </select>
           </div>
-
           <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Cancelar</button>
-            <button style={styles.btnPrimary}>Guardar cambios</button>
+            <button style={styles.btnSecondary} onClick={handleCancelarInstitucion}>Cancelar</button>
+            <button style={styles.btnPrimary} onClick={handleGuardarCambios}>Guardar cambios</button>
           </div>
         </SectionCard>
 
-        {/* ── 2. Configuración de Tolerancia ── */}
-        <SectionCard
-          icon="⏱️"
-          title="Configuración de Tolerancia"
-          desc="Límites de tiempo y ausencias permitidas"
-          color="#f59e0b"
-        >
-          {/* Slider: tolerancia de entrada */}
+        <SectionCard icon="⏱️" title="Configuración de Tolerancia" desc="Límites de tiempo y ausencias permitidas" color="#f59e0b">
           <div style={styles.sliderWrapper}>
             <div style={styles.sliderRow}>
               <label style={{ ...styles.label, margin: 0 }}>Tolerancia de entrada</label>
               <span style={styles.sliderValue}>{tolerancia.entrada} min</span>
             </div>
-            <input
-              type="range" min={0} max={30} step={1}
+            <input type="range" min={0} max={30} step={1} style={styles.slider}
               value={tolerancia.entrada}
-              onChange={(e) => setTolerancia({ ...tolerancia, entrada: Number(e.target.value) })}
-              style={styles.slider}
-            />
+              onChange={(e) => setTolerancia({ ...tolerancia, entrada: Number(e.target.value) })} />
             <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
               <span>0 min</span><span>30 min</span>
             </div>
           </div>
 
-          {/* Slider: tolerancia de salida */}
           <div style={styles.sliderWrapper}>
             <div style={styles.sliderRow}>
               <label style={{ ...styles.label, margin: 0 }}>Tolerancia de salida anticipada</label>
               <span style={styles.sliderValue}>{tolerancia.salida} min</span>
             </div>
-            <input
-              type="range" min={0} max={20} step={1}
+            <input type="range" min={0} max={20} step={1} style={styles.slider}
               value={tolerancia.salida}
-              onChange={(e) => setTolerancia({ ...tolerancia, salida: Number(e.target.value) })}
-              style={styles.slider}
-            />
+              onChange={(e) => setTolerancia({ ...tolerancia, salida: Number(e.target.value) })} />
             <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
               <span>0 min</span><span>20 min</span>
             </div>
@@ -562,26 +772,18 @@ export default function SystemConfig() {
 
           <div style={styles.fieldGroup}>
             <label style={styles.label}>Inasistencias permitidas por período</label>
-            <select
-              style={styles.select}
-              value={tolerancia.inasistencias}
-              onChange={(e) => setTolerancia({ ...tolerancia, inasistencias: Number(e.target.value) })}
-            >
-              {[1, 2, 3, 4, 5, 6].map((n) => (
+            <select style={styles.select} value={tolerancia.inasistencias}
+              onChange={(e) => setTolerancia({ ...tolerancia, inasistencias: Number(e.target.value) })}>
+              {[1,2,3,4,5,6].map((n) => (
                 <option key={n} value={n}>{n} inasistencia{n > 1 ? "s" : ""}</option>
               ))}
             </select>
           </div>
 
-          {/* Indicador visual */}
           <div style={{
-            background: "rgba(245,158,11,0.08)",
-            border: "1px solid rgba(245,158,11,0.2)",
-            borderRadius: "8px",
-            padding: "0.75rem 1rem",
-            display: "flex",
-            gap: "0.5rem",
-            alignItems: "flex-start",
+            background: "rgba(245,158,11,0.08)", border: "1px solid rgba(245,158,11,0.2)",
+            borderRadius: "8px", padding: "0.75rem 1rem",
+            display: "flex", gap: "0.5rem", alignItems: "flex-start",
           }}>
             <span>⚠️</span>
             <p style={{ margin: 0, fontSize: "0.8rem", color: "#92400e", lineHeight: "1.4" }}>
@@ -590,35 +792,25 @@ export default function SystemConfig() {
           </div>
 
           <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Restablecer</button>
-            <button style={styles.btnPrimary}>Aplicar</button>
+            <button style={styles.btnSecondary} onClick={handleRestablecerTolerancia}>Restablecer</button>
+            <button style={styles.btnPrimary} onClick={handleAplicarTolerancia}>Aplicar</button>
           </div>
         </SectionCard>
       </div>
 
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 3: Horario Base
-      ══════════════════════════════════════════════════════ */}
+      {/* ══ SECCIÓN 3: Horario Base ══ */}
       <div style={{ marginBottom: "1.5rem" }}>
-        <SectionCard
-          icon="📅"
-          title="Horario Base"
-          desc="Define el horario de operación para cada día de la semana"
-          color="#10b981"
-        >
+        <SectionCard icon="📅" title="Horario Base" desc="Define el horario de operación para cada día de la semana" color="#10b981">
           <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Selecciona un día para configurar su horario</p>
           <div style={styles.scheduleGrid}>
             {DIAS_SEMANA.map((dia, idx) => (
-              <div
-                key={dia}
-                onClick={() => setDiaSeleccionado(idx)}
+              <div key={dia} onClick={() => setDiaSeleccionado(idx)}
                 style={{
                   ...styles.dayCell,
                   ...(horarioPorDia[idx].activo ? styles.dayCellActive : styles.dayCellInactive),
                   outline: diaSeleccionado === idx ? "2px solid #10b981" : "none",
                   outlineOffset: "2px",
-                }}
-              >
+                }}>
                 <div>{dia}</div>
                 <div style={{ fontSize: "0.65rem", marginTop: "0.2rem", opacity: 0.7 }}>
                   {horarioPorDia[idx].activo ? "✓" : "—"}
@@ -629,13 +821,10 @@ export default function SystemConfig() {
 
           <div style={styles.divider} />
 
-          {/* Panel de configuración del día seleccionado */}
           <div style={{
             background: horarioPorDia[diaSeleccionado].activo ? "rgba(16,185,129,0.05)" : "rgba(0,0,0,0.03)",
             border: `1px solid ${horarioPorDia[diaSeleccionado].activo ? "rgba(16,185,129,0.2)" : "rgba(0,0,0,0.08)"}`,
-            borderRadius: "12px",
-            padding: "1.25rem",
-            marginBottom: "1rem",
+            borderRadius: "12px", padding: "1.25rem", marginBottom: "1rem",
           }}>
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
               <p style={{ margin: 0, fontWeight: "600", fontSize: "0.95rem", color: "#1f2937" }}>
@@ -645,47 +834,40 @@ export default function SystemConfig() {
                 <span style={{ fontSize: "0.8rem", color: "#6b7280" }}>
                   {horarioPorDia[diaSeleccionado].activo ? "Activo" : "Inactivo"}
                 </span>
-                <Toggle
-                  checked={horarioPorDia[diaSeleccionado].activo}
-                  onChange={() => toggleDia(diaSeleccionado)}
-                />
+                <Toggle checked={horarioPorDia[diaSeleccionado].activo} onChange={() => toggleDia(diaSeleccionado)} />
               </div>
             </div>
-
-            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", opacity: horarioPorDia[diaSeleccionado].activo ? 1 : 0.4, pointerEvents: horarioPorDia[diaSeleccionado].activo ? "auto" : "none" }}>
+            <div style={{
+              display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem",
+              opacity: horarioPorDia[diaSeleccionado].activo ? 1 : 0.4,
+              pointerEvents: horarioPorDia[diaSeleccionado].activo ? "auto" : "none",
+            }}>
               <div style={styles.fieldGroup}>
                 <label style={styles.label}>Hora de inicio</label>
-                <input
-                  type="time"
-                  style={styles.input}
+                <input type="time" style={styles.input}
                   value={horarioPorDia[diaSeleccionado].inicio}
-                  onChange={(e) => actualizarHorarioDia(diaSeleccionado, "inicio", e.target.value)}
-                />
+                  onChange={(e) => actualizarHorarioDia(diaSeleccionado, "inicio", e.target.value)} />
               </div>
               <div style={styles.fieldGroup}>
                 <label style={styles.label}>Hora de cierre</label>
-                <input
-                  type="time"
-                  style={styles.input}
+                <input type="time" style={styles.input}
                   value={horarioPorDia[diaSeleccionado].fin}
-                  onChange={(e) => actualizarHorarioDia(diaSeleccionado, "fin", e.target.value)}
-                />
+                  onChange={(e) => actualizarHorarioDia(diaSeleccionado, "fin", e.target.value)} />
               </div>
             </div>
           </div>
 
-          {/* Resumen de todos los días activos */}
           <div style={{ marginTop: "0.5rem" }}>
             <p style={{ ...styles.label, marginBottom: "0.5rem" }}>Resumen semanal</p>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               {DIAS_SEMANA.map((dia, idx) => (
                 horarioPorDia[idx].activo && (
-                  <div key={idx} style={{
+                  <div key={idx} onClick={() => setDiaSeleccionado(idx)} style={{
                     display: "flex", justifyContent: "space-between", alignItems: "center",
                     fontSize: "0.82rem", padding: "0.35rem 0.6rem",
                     background: diaSeleccionado === idx ? "rgba(16,185,129,0.08)" : "transparent",
                     borderRadius: "6px", cursor: "pointer",
-                  }} onClick={() => setDiaSeleccionado(idx)}>
+                  }}>
                     <span style={{ color: "#374151", fontWeight: diaSeleccionado === idx ? "600" : "400" }}>
                       {["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"][idx]}
                     </span>
@@ -699,24 +881,16 @@ export default function SystemConfig() {
           </div>
 
           <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Cancelar</button>
-            <button style={styles.btnPrimary}>Guardar horario</button>
+            <button style={styles.btnSecondary} onClick={handleCancelarHorario}>Cancelar</button>
+            <button style={styles.btnPrimary} onClick={handleGuardarHorario}>Guardar horario</button>
           </div>
         </SectionCard>
       </div>
 
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 4 & 5: Roles + Notificaciones
-      ══════════════════════════════════════════════════════ */}
+      {/* ══ SECCIÓN 4 & 5 ══ */}
       <div style={styles.grid}>
 
-        {/* ── 4. Gestión de Roles ── */}
-        <SectionCard
-          icon="🔑"
-          title="Gestión de Roles"
-          desc="Administre los roles y permisos del sistema"
-          color="#8b5cf6"
-        >
+        <SectionCard icon="🔑" title="Gestión de Roles" desc="Administre los roles y permisos del sistema" color="#8b5cf6">
           <table style={styles.table}>
             <thead>
               <tr>
@@ -730,26 +904,16 @@ export default function SystemConfig() {
             <tbody>
               {roles.map((rol) => (
                 <tr key={rol.id}>
-                  <td style={styles.td}>
-                    <span style={{ fontWeight: "600", color: "#1f2937" }}>{rol.nombre}</span>
-                  </td>
-                  <td style={styles.td}>
-                    <RolBadge permisos={rol.permisos} />
-                  </td>
-                  <td style={styles.td}>
-                    <span style={{ color: "#374151" }}>{rol.usuarios}</span>
-                  </td>
+                  <td style={styles.td}><span style={{ fontWeight: "600", color: "#1f2937" }}>{rol.nombre}</span></td>
+                  <td style={styles.td}><RolBadge permisos={rol.permisos} /></td>
+                  <td style={styles.td}><span style={{ color: "#374151" }}>{rol.usuarios}</span></td>
                   <td style={styles.td}>
                     {rol.estado === "activo"
                       ? <span style={styles.badgeActive}>Activo</span>
-                      : <span style={styles.badgeInactive}>Inactivo</span>
-                    }
+                      : <span style={styles.badgeInactive}>Inactivo</span>}
                   </td>
                   <td style={styles.td}>
-                    <button
-                      style={styles.btnDanger}
-                      onClick={() => toggleRolEstado(rol.id)}
-                    >
+                    <button style={styles.btnDanger} onClick={() => toggleRolEstado(rol.id)}>
                       {rol.estado === "activo" ? "Deshabilitar" : "Habilitar"}
                     </button>
                   </td>
@@ -757,47 +921,34 @@ export default function SystemConfig() {
               ))}
             </tbody>
           </table>
-
           <div style={styles.btnActions}>
-            <button style={styles.btnPrimary}>+ Nuevo rol</button>
+            <button style={styles.btnPrimary} onClick={handleNuevoRol}>+ Nuevo rol</button>
           </div>
         </SectionCard>
 
-        {/* ── 5. Preferencias de Notificación ── */}
-        <SectionCard
-          icon="🔔"
-          title="Preferencias de Notificación"
-          desc="Configure qué alertas y notificaciones desea recibir"
-          color="#ec4899"
-        >
+        <SectionCard icon="🔔" title="Preferencias de Notificación" desc="Configure qué alertas y notificaciones desea recibir" color="#ec4899">
           {[
             { key: "emailAsistencia", label: "Notificaciones de asistencia", sub: "Email al registrar una asistencia" },
-            { key: "emailReportes", label: "Reportes periódicos", sub: "Resúmenes semanales por correo" },
-            { key: "pushAlertas", label: "Alertas push", sub: "Notificaciones en el navegador" },
-            { key: "resumenDiario", label: "Resumen diario", sub: "Email con el resumen del día" },
-            { key: "alertasFaltas", label: "Alertas por faltas excesivas", sub: "Notificar al superar el límite" },
-            { key: "notifDocentes", label: "Notificar a docentes", sub: "Avisar al docente sobre ausencias" },
+            { key: "emailReportes",   label: "Reportes periódicos",          sub: "Resúmenes semanales por correo" },
+            { key: "pushAlertas",     label: "Alertas push",                 sub: "Notificaciones en el navegador" },
+            { key: "resumenDiario",   label: "Resumen diario",               sub: "Email con el resumen del día" },
+            { key: "alertasFaltas",   label: "Alertas por faltas excesivas", sub: "Notificar al superar el límite" },
+            { key: "notifDocentes",   label: "Notificar a docentes",         sub: "Avisar al docente sobre ausencias" },
           ].map(({ key, label, sub }) => (
             <div key={key} style={styles.toggleRow}>
               <div>
                 <div style={styles.toggleLabel}>{label}</div>
                 <div style={styles.toggleSub}>{sub}</div>
               </div>
-              <Toggle
-                checked={notificaciones[key]}
-                onChange={() => toggleNotif(key)}
-              />
+              <Toggle checked={notificaciones[key]} onChange={() => toggleNotif(key)} />
             </div>
           ))}
-
           <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Restablecer</button>
-            <button style={styles.btnPrimary}>Guardar preferencias</button>
+            <button style={styles.btnSecondary} onClick={handleRestablecerPreferencias}>Restablecer</button>
+            <button style={styles.btnPrimary} onClick={handleGuardarPreferencias}>Guardar preferencias</button>
           </div>
         </SectionCard>
       </div>
-
-     
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/sistemaconfig.jsx b/src/pages/sistemaconfig.jsx
deleted file mode 100644
index 82dc7c4..0000000
--- a/src/pages/sistemaconfig.jsx
+++ /dev/null
@@ -1,751 +0,0 @@
-import { useState } from "react";
-
-// ─── Paleta de colores y estilos base (CSS-in-JS para no afectar estilos globales) ───
-const styles = {
-  // Layout principal
-  wrapper: {
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-    background: "#ffffff",
-    minHeight: "100vh",
-    padding: "2rem",
-    color: "#1f2937",
-  },
-  header: {
-    marginBottom: "2.5rem",
-    borderBottom: "1px solid rgba(0,0,0,0.1)",
-    paddingBottom: "1.5rem",
-  },
-  headerTitle: {
-    fontSize: "2rem",
-    fontWeight: "700",
-    letterSpacing: "-0.02em",
-    color: "#1f2937",
-    margin: "0 0 0.25rem 0",
-  },
-  headerSubtitle: {
-    fontSize: "0.95rem",
-    color: "#6b7280",
-    margin: 0,
-    fontStyle: "italic",
-  },
-  moduleBadge: {
-    display: "inline-block",
-    background: "rgba(59,130,246,0.1)",
-    border: "1px solid rgba(59,130,246,0.3)",
-    color: "#1e40af",
-    fontSize: "0.75rem",
-    padding: "0.2rem 0.75rem",
-    borderRadius: "999px",
-    marginBottom: "0.75rem",
-    letterSpacing: "0.08em",
-    textTransform: "uppercase",
-  },
-
-  // Grid de secciones
-  grid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(480px, 1fr))",
-    gap: "1.5rem",
-  },
-  gridFull: {
-    display: "grid",
-    gridTemplateColumns: "1fr",
-    gap: "1.5rem",
-  },
-
-  // Cards
-  card: {
-    background: "#f9fafb",
-    border: "1px solid rgba(0,0,0,0.08)",
-    borderRadius: "16px",
-    padding: "1.75rem",
-    backdropFilter: "blur(12px)",
-    boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-  },
-  cardTitle: {
-    fontSize: "1rem",
-    fontWeight: "600",
-    color: "#1f2937",
-    margin: "0 0 0.25rem 0",
-    display: "flex",
-    alignItems: "center",
-    gap: "0.5rem",
-  },
-  cardDesc: {
-    fontSize: "0.82rem",
-    color: "#6b7280",
-    marginBottom: "1.25rem",
-    margin: "0 0 1.25rem 0",
-  },
-
-  // Formularios
-  label: {
-    display: "block",
-    fontSize: "0.8rem",
-    color: "#374151",
-    marginBottom: "0.35rem",
-    letterSpacing: "0.04em",
-    textTransform: "uppercase",
-  },
-  input: {
-    width: "100%",
-    background: "#ffffff",
-    border: "1px solid rgba(0,0,0,0.12)",
-    borderRadius: "8px",
-    padding: "0.6rem 0.9rem",
-    color: "#1f2937",
-    fontSize: "0.9rem",
-    outline: "none",
-    boxSizing: "border-box",
-    transition: "border-color 0.2s",
-  },
-  select: {
-    width: "100%",
-    background: "#ffffff",
-    border: "1px solid rgba(0,0,0,0.12)",
-    borderRadius: "8px",
-    padding: "0.6rem 0.9rem",
-    color: "#1f2937",
-    fontSize: "0.9rem",
-    outline: "none",
-    boxSizing: "border-box",
-  },
-  fieldGroup: {
-    marginBottom: "1rem",
-  },
-  row: {
-    display: "grid",
-    gridTemplateColumns: "1fr 1fr",
-    gap: "1rem",
-  },
-
-  // Botones
-  btnPrimary: {
-    background: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
-    color: "#fff",
-    border: "none",
-    borderRadius: "8px",
-    padding: "0.55rem 1.4rem",
-    fontSize: "0.85rem",
-    fontWeight: "600",
-    cursor: "pointer",
-    transition: "opacity 0.2s, transform 0.1s",
-    letterSpacing: "0.02em",
-  },
-  btnSecondary: {
-    background: "#ffffff",
-    color: "#374151",
-    border: "1px solid rgba(0,0,0,0.15)",
-    borderRadius: "8px",
-    padding: "0.55rem 1.2rem",
-    fontSize: "0.85rem",
-    cursor: "pointer",
-    transition: "background 0.2s",
-  },
-  btnDanger: {
-    background: "rgba(239,68,68,0.1)",
-    color: "#dc2626",
-    border: "1px solid rgba(239,68,68,0.3)",
-    borderRadius: "8px",
-    padding: "0.4rem 0.9rem",
-    fontSize: "0.8rem",
-    cursor: "pointer",
-  },
-  btnActions: {
-    display: "flex",
-    gap: "0.75rem",
-    marginTop: "1.25rem",
-    justifyContent: "flex-end",
-  },
-
-  // Slider
-  sliderWrapper: {
-    marginBottom: "1rem",
-  },
-  sliderRow: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: "0.4rem",
-  },
-  sliderValue: {
-    background: "rgba(59,130,246,0.1)",
-    color: "#1e40af",
-    padding: "0.1rem 0.6rem",
-    borderRadius: "999px",
-    fontSize: "0.85rem",
-    fontWeight: "700",
-  },
-  slider: {
-    width: "100%",
-    accentColor: "#3b82f6",
-    cursor: "pointer",
-  },
-
-  // Tabla de roles
-  table: {
-    width: "100%",
-    borderCollapse: "collapse",
-    fontSize: "0.88rem",
-  },
-  th: {
-    textAlign: "left",
-    padding: "0.6rem 0.8rem",
-    color: "#374151",
-    fontSize: "0.75rem",
-    textTransform: "uppercase",
-    letterSpacing: "0.06em",
-    borderBottom: "1px solid rgba(0,0,0,0.08)",
-  },
-  td: {
-    padding: "0.75rem 0.8rem",
-    borderBottom: "1px solid rgba(0,0,0,0.04)",
-    color: "#374151",
-    verticalAlign: "middle",
-  },
-
-  // Badges de estado
-  badgeActive: {
-    background: "rgba(34,197,94,0.1)",
-    color: "#159b2b",
-    border: "1px solid rgba(34,197,94,0.2)",
-    borderRadius: "999px",
-    padding: "0.15rem 0.65rem",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-  },
-  badgeInactive: {
-    background: "rgba(0,0,0,0.05)",
-    color: "#6b7280",
-    border: "1px solid rgba(0,0,0,0.1)",
-    borderRadius: "999px",
-    padding: "0.15rem 0.65rem",
-    fontSize: "0.75rem",
-  },
-  badgeAdmin: {
-    background: "rgba(168,85,247,0.1)",
-    color: "#7e22ce",
-    border: "1px solid rgba(168,85,247,0.2)",
-    borderRadius: "999px",
-    padding: "0.15rem 0.65rem",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-  },
-
-  // Toggle switch
-  toggleRow: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "0.7rem 0",
-    borderBottom: "1px solid rgba(0,0,0,0.05)",
-  },
-  toggleLabel: {
-    fontSize: "0.88rem",
-    color: "#1f2937",
-  },
-  toggleSub: {
-    fontSize: "0.78rem",
-    color: "#9ca3af",
-    marginTop: "0.1rem",
-  },
-
-  // Horario
-  scheduleGrid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)",
-    gap: "0.4rem",
-    marginBottom: "1rem",
-  },
-  dayCell: {
-    textAlign: "center",
-    padding: "0.5rem 0.25rem",
-    borderRadius: "8px",
-    fontSize: "0.78rem",
-    cursor: "pointer",
-    border: "1px solid transparent",
-    transition: "all 0.2s",
-    fontWeight: "600",
-  },
-  dayCellActive: {
-    background: "rgba(59,130,246,0.1)",
-    border: "1px solid rgba(59,130,246,0.3)",
-    color: "#1e40af",
-  },
-  dayCellInactive: {
-    background: "#f3f4f6",
-    border: "1px solid rgba(0,0,0,0.08)",
-    color: "#9ca3af",
-  },
-
-  // Divider
-  divider: {
-    borderTop: "1px solid rgba(0,0,0,0.06)",
-    margin: "1.25rem 0",
-  },
-
-  // Icono decorativo en card header
-  iconBox: {
-    width: "32px",
-    height: "32px",
-    borderRadius: "8px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "1rem",
-    flexShrink: 0,
-  },
-};
-
-// ─── Datos mock ─────────────────────────────────────────────────────────────────
-
-const MOCK_ROLES = [
-  { id: 1, nombre: "Administrador", permisos: "Total", usuarios: 3, estado: "activo" },
-  { id: 2, nombre: "Coordinador", permisos: "Parcial", usuarios: 8, estado: "activo" },
-  { id: 3, nombre: "Docente", permisos: "Lectura", usuarios: 42, estado: "activo" },
-  { id: 4, nombre: "Auxiliar", permisos: "Limitado", usuarios: 12, estado: "inactivo" },
-];
-
-const DIAS_SEMANA = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
-
-// ─── Subcomponente: Toggle ────────────────────────────────────────────────────
-
-function Toggle({ checked, onChange }) {
-  return (
-    <div
-      onClick={() => onChange(!checked)}
-      style={{
-        width: "42px",
-        height: "22px",
-        borderRadius: "999px",
-        background: checked ? "rgba(59,130,246,0.8)" : "rgba(209,213,219,0.8)",
-        border: checked ? "1px solid rgba(59,130,246,0.6)" : "1px solid rgba(0,0,0,0.12)",
-        position: "relative",
-        cursor: "pointer",
-        transition: "background 0.2s",
-        flexShrink: 0,
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          top: "2px",
-          left: checked ? "21px" : "2px",
-          width: "16px",
-          height: "16px",
-          borderRadius: "50%",
-          background: "#fff",
-          transition: "left 0.2s",
-          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
-        }}
-      />
-    </div>
-  );
-}
-
-// ─── Subcomponente: SectionCard ────────────────────────────────────────────────
-
-function SectionCard({ icon, title, desc, color = "#3b82f6", children }) {
-  return (
-    <div style={styles.card}>
-      <div style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", marginBottom: "1.25rem" }}>
-        <div style={{ ...styles.iconBox, background: `${color}22` }}>
-          <span>{icon}</span>
-        </div>
-        <div>
-          <h3 style={styles.cardTitle}>{title}</h3>
-          <p style={styles.cardDesc}>{desc}</p>
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-}
-
-// ─── Subcomponente: Badge de rol ───────────────────────────────────────────────
-
-function RolBadge({ permisos }) {
-  if (permisos === "Total") return <span style={styles.badgeAdmin}>{permisos}</span>;
-  if (permisos === "Parcial") return <span style={{ ...styles.badgeActive }}>{permisos}</span>;
-  return <span style={styles.badgeInactive}>{permisos}</span>;
-}
-
-// ─── COMPONENTE PRINCIPAL ──────────────────────────────────────────────────────
-
-export default function SystemConfig() {
-
-  // --- Estado: Ajustes Institucionales ---
-  const [institucion, setInstitucion] = useState({
-    nombre: "Instituto Tecnológico Nacional",
-    codigo: "ITN-2024",
-    zona: "America/Mexico_City",
-    idioma: "es",
-  });
-
-  // --- Estado: Tolerancia ---
-  const [tolerancia, setTolerancia] = useState({
-    entrada: 10,
-    salida: 5,
-    inasistencias: 3,
-  });
-
-  // --- Estado: Horario base ---
-  const [diasActivos, setDiasActivos] = useState([true, true, true, true, true, false, false]);
-  const [horaInicio, setHoraInicio] = useState("07:00");
-  const [horaFin, setHoraFin] = useState("18:00");
-  const [duracionBloque, setDuracionBloque] = useState("60");
-
-  // --- Estado: Roles ---
-  const [roles, setRoles] = useState(MOCK_ROLES);
-
-  // --- Estado: Notificaciones ---
-  const [notificaciones, setNotificaciones] = useState({
-    emailAsistencia: true,
-    emailReportes: true,
-    pushAlertas: false,
-    resumenDiario: true,
-    alertasFaltas: true,
-    notifDocentes: false,
-  });
-
-  // --- Handlers ---
-  const toggleDia = (idx) => {
-    const copia = [...diasActivos];
-    copia[idx] = !copia[idx];
-    setDiasActivos(copia);
-  };
-
-  const toggleRolEstado = (id) => {
-    setRoles(roles.map((r) =>
-      r.id === id ? { ...r, estado: r.estado === "activo" ? "inactivo" : "activo" } : r
-    ));
-  };
-
-  const toggleNotif = (key) => {
-    setNotificaciones((prev) => ({ ...prev, [key]: !prev[key] }));
-  };
-
-  // ─── RENDER ────────────────────────────────────────────────────────────────
-
-  return (
-    <div style={styles.wrapper}>
-
-      {/* ── Encabezado del módulo ── */}
-      <header style={styles.header}>
-        <h1 style={styles.headerTitle}>Configuración del Sistema</h1>
-        <p style={styles.headerSubtitle}>
-          Administre los parámetros globales de operación institucional.
-        </p>
-      </header>
-
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 1 & 2: Ajustes Institucionales + Tolerancia
-      ══════════════════════════════════════════════════════ */}
-      <div style={{ ...styles.grid, marginBottom: "1.5rem" }}>
-
-        {/* ── 1. Ajustes Institucionales ── */}
-        <SectionCard
-          icon="🏛️"
-          title="Ajustes Institucionales"
-          desc="Datos generales y configuración de la institución"
-          color="#3b82f6"
-        >
-          <div style={styles.fieldGroup}>
-            <label style={styles.label}>Nombre de la institución</label>
-            <input
-              style={styles.input}
-              value={institucion.nombre}
-              onChange={(e) => setInstitucion({ ...institucion, nombre: e.target.value })}
-            />
-          </div>
-
-          <div style={styles.row}>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Código institucional</label>
-              <input
-                style={styles.input}
-                value={institucion.codigo}
-                onChange={(e) => setInstitucion({ ...institucion, codigo: e.target.value })}
-              />
-            </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Idioma</label>
-              <select
-                style={styles.select}
-                value={institucion.idioma}
-                onChange={(e) => setInstitucion({ ...institucion, idioma: e.target.value })}
-              >
-                <option value="es">Español</option>
-                <option value="en">English</option>
-                <option value="pt">Português</option>
-              </select>
-            </div>
-          </div>
-
-          <div style={styles.fieldGroup}>
-            <label style={styles.label}>Zona horaria</label>
-            <select
-              style={styles.select}
-              value={institucion.zona}
-              onChange={(e) => setInstitucion({ ...institucion, zona: e.target.value })}
-            >
-              <option value="America/Mexico_City">America/Mexico_City (UTC-6)</option>
-              <option value="America/Bogota">America/Bogota (UTC-5)</option>
-              <option value="America/Buenos_Aires">America/Buenos_Aires (UTC-3)</option>
-              <option value="America/Lima">America/Lima (UTC-5)</option>
-            </select>
-          </div>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Cancelar</button>
-            <button style={styles.btnPrimary}>Guardar cambios</button>
-          </div>
-        </SectionCard>
-
-        {/* ── 2. Configuración de Tolerancia ── */}
-        <SectionCard
-          icon="⏱️"
-          title="Configuración de Tolerancia"
-          desc="Límites de tiempo y ausencias permitidas"
-          color="#f59e0b"
-        >
-          {/* Slider: tolerancia de entrada */}
-          <div style={styles.sliderWrapper}>
-            <div style={styles.sliderRow}>
-              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de entrada</label>
-              <span style={styles.sliderValue}>{tolerancia.entrada} min</span>
-            </div>
-            <input
-              type="range" min={0} max={30} step={1}
-              value={tolerancia.entrada}
-              onChange={(e) => setTolerancia({ ...tolerancia, entrada: Number(e.target.value) })}
-              style={styles.slider}
-            />
-            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
-              <span>0 min</span><span>30 min</span>
-            </div>
-          </div>
-
-          {/* Slider: tolerancia de salida */}
-          <div style={styles.sliderWrapper}>
-            <div style={styles.sliderRow}>
-              <label style={{ ...styles.label, margin: 0 }}>Tolerancia de salida anticipada</label>
-              <span style={styles.sliderValue}>{tolerancia.salida} min</span>
-            </div>
-            <input
-              type="range" min={0} max={20} step={1}
-              value={tolerancia.salida}
-              onChange={(e) => setTolerancia({ ...tolerancia, salida: Number(e.target.value) })}
-              style={styles.slider}
-            />
-            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.72rem", color: "#475569" }}>
-              <span>0 min</span><span>20 min</span>
-            </div>
-          </div>
-
-          <div style={styles.divider} />
-
-          <div style={styles.fieldGroup}>
-            <label style={styles.label}>Inasistencias permitidas por período</label>
-            <select
-              style={styles.select}
-              value={tolerancia.inasistencias}
-              onChange={(e) => setTolerancia({ ...tolerancia, inasistencias: Number(e.target.value) })}
-            >
-              {[1, 2, 3, 4, 5, 6].map((n) => (
-                <option key={n} value={n}>{n} inasistencia{n > 1 ? "s" : ""}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* Indicador visual */}
-          <div style={{
-            background: "rgba(245,158,11,0.08)",
-            border: "1px solid rgba(245,158,11,0.2)",
-            borderRadius: "8px",
-            padding: "0.75rem 1rem",
-            display: "flex",
-            gap: "0.5rem",
-            alignItems: "flex-start",
-          }}>
-            <span>⚠️</span>
-            <p style={{ margin: 0, fontSize: "0.8rem", color: "#92400e", lineHeight: "1.4" }}>
-              Los cambios en tolerancia afectarán los registros futuros. Los datos históricos no se modificarán.
-            </p>
-          </div>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Restablecer</button>
-            <button style={styles.btnPrimary}>Aplicar</button>
-          </div>
-        </SectionCard>
-      </div>
-
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 3: Horario Base
-      ══════════════════════════════════════════════════════ */}
-      <div style={{ marginBottom: "1.5rem" }}>
-        <SectionCard
-          icon="📅"
-          title="Horario Base"
-          desc="Define los días y horas de operación del sistema"
-          color="#10b981"
-        >
-          <p style={{ ...styles.label, marginBottom: "0.75rem" }}>Días laborables activos</p>
-          <div style={styles.scheduleGrid}>
-            {DIAS_SEMANA.map((dia, idx) => (
-              <div
-                key={dia}
-                onClick={() => toggleDia(idx)}
-                style={{
-                  ...styles.dayCell,
-                  ...(diasActivos[idx] ? styles.dayCellActive : styles.dayCellInactive),
-                }}
-              >
-                <div>{dia}</div>
-                <div style={{ fontSize: "0.65rem", marginTop: "0.2rem", opacity: 0.7 }}>
-                  {diasActivos[idx] ? "✓" : "—"}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div style={styles.divider} />
-
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Hora de inicio</label>
-              <input
-                type="time"
-                style={styles.input}
-                value={horaInicio}
-                onChange={(e) => setHoraInicio(e.target.value)}
-              />
-            </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Hora de cierre</label>
-              <input
-                type="time"
-                style={styles.input}
-                value={horaFin}
-                onChange={(e) => setHoraFin(e.target.value)}
-              />
-            </div>
-            <div style={styles.fieldGroup}>
-              <label style={styles.label}>Duración de bloque</label>
-              <select
-                style={styles.select}
-                value={duracionBloque}
-                onChange={(e) => setDuracionBloque(e.target.value)}
-              >
-                <option value="45">45 minutos</option>
-                <option value="60">60 minutos</option>
-                <option value="90">90 minutos</option>
-                <option value="120">120 minutos</option>
-              </select>
-            </div>
-          </div>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Cancelar</button>
-            <button style={styles.btnPrimary}>Guardar horario</button>
-          </div>
-        </SectionCard>
-      </div>
-
-      {/* ══════════════════════════════════════════════════════
-          SECCIÓN 4 & 5: Roles + Notificaciones
-      ══════════════════════════════════════════════════════ */}
-      <div style={styles.grid}>
-
-        {/* ── 4. Gestión de Roles ── */}
-        <SectionCard
-          icon="🔑"
-          title="Gestión de Roles"
-          desc="Administre los roles y permisos del sistema"
-          color="#8b5cf6"
-        >
-          <table style={styles.table}>
-            <thead>
-              <tr>
-                <th style={styles.th}>Rol</th>
-                <th style={styles.th}>Permisos</th>
-                <th style={styles.th}>Usuarios</th>
-                <th style={styles.th}>Estado</th>
-                <th style={styles.th}>Acción</th>
-              </tr>
-            </thead>
-            <tbody>
-              {roles.map((rol) => (
-                <tr key={rol.id}>
-                  <td style={styles.td}>
-                    <span style={{ fontWeight: "600", color: "#1f2937" }}>{rol.nombre}</span>
-                  </td>
-                  <td style={styles.td}>
-                    <RolBadge permisos={rol.permisos} />
-                  </td>
-                  <td style={styles.td}>
-                    <span style={{ color: "#374151" }}>{rol.usuarios}</span>
-                  </td>
-                  <td style={styles.td}>
-                    {rol.estado === "activo"
-                      ? <span style={styles.badgeActive}>Activo</span>
-                      : <span style={styles.badgeInactive}>Inactivo</span>
-                    }
-                  </td>
-                  <td style={styles.td}>
-                    <button
-                      style={styles.btnDanger}
-                      onClick={() => toggleRolEstado(rol.id)}
-                    >
-                      {rol.estado === "activo" ? "Deshabilitar" : "Habilitar"}
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnPrimary}>+ Nuevo rol</button>
-          </div>
-        </SectionCard>
-
-        {/* ── 5. Preferencias de Notificación ── */}
-        <SectionCard
-          icon="🔔"
-          title="Preferencias de Notificación"
-          desc="Configure qué alertas y notificaciones desea recibir"
-          color="#ec4899"
-        >
-          {[
-            { key: "emailAsistencia", label: "Notificaciones de asistencia", sub: "Email al registrar una asistencia" },
-            { key: "emailReportes", label: "Reportes periódicos", sub: "Resúmenes semanales por correo" },
-            { key: "pushAlertas", label: "Alertas push", sub: "Notificaciones en el navegador" },
-            { key: "resumenDiario", label: "Resumen diario", sub: "Email con el resumen del día" },
-            { key: "alertasFaltas", label: "Alertas por faltas excesivas", sub: "Notificar al superar el límite" },
-            { key: "notifDocentes", label: "Notificar a docentes", sub: "Avisar al docente sobre ausencias" },
-          ].map(({ key, label, sub }) => (
-            <div key={key} style={styles.toggleRow}>
-              <div>
-                <div style={styles.toggleLabel}>{label}</div>
-                <div style={styles.toggleSub}>{sub}</div>
-              </div>
-              <Toggle
-                checked={notificaciones[key]}
-                onChange={() => toggleNotif(key)}
-              />
-            </div>
-          ))}
-
-          <div style={styles.btnActions}>
-            <button style={styles.btnSecondary}>Restablecer</button>
-            <button style={styles.btnPrimary}>Guardar preferencias</button>
-          </div>
-        </SectionCard>
-      </div>
-
-     
-    </div>
-  );
-}
\ No newline at end of file

From 8f7570bbf4fff5e6382912d40d08e30599f4014d Mon Sep 17 00:00:00 2001
From: dpalik500 <dpalik500@gmail.com>
Date: Thu, 9 Apr 2026 19:36:00 -0500
Subject: [PATCH 37/46] Add schedules module with backend API and frontend
 integration

---
 backend/migrations/001_create_schedules_table.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/migrations/001_create_schedules_table.js b/backend/migrations/001_create_schedules_table.js
index 4e97bc8..bb73169 100644
--- a/backend/migrations/001_create_schedules_table.js
+++ b/backend/migrations/001_create_schedules_table.js
@@ -16,10 +16,10 @@ async function createSchedulesTable() {
                 updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
             );
         `);
-        console.log('✓ Таблица schedules успешно создана');
+        console.log('Done');
         process.exit(0);
     } catch (error) {
-        console.error('Ошибка при создании таблицы:', error);
+        console.error('Error:', error);
         process.exit(1);
     }
 }

From 75f21efb25c2a83d1d32378029604eb39b8aba33 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 10:01:03 -0500
Subject: [PATCH 38/46] Cambios antes de merge con palikhov-daniil

---
 backend/package-lock.json | 358 +++++++++++++++-
 package-lock.json         | 866 +++++++++++++++++++-------------------
 src/pages/Teachers.jsx    | 201 ---------
 3 files changed, 781 insertions(+), 644 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 194ec33..51c3d6e 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -12,9 +12,9 @@
         "cors": "^2.8.6",
         "dotenv": "^17.3.1",
         "express": "^5.2.1",
+        "nodemon": "^3.1.14",
         "pg": "^8.20.0"
-      },
-      "devDependencies": {}
+      }
     },
     "node_modules/accepts": {
       "version": "2.0.0",
@@ -29,6 +29,40 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/body-parser": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
@@ -53,6 +87,30 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -91,10 +149,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/content-disposition": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
-      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
+      "integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -175,9 +257,9 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "17.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
-      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
@@ -303,6 +385,18 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
@@ -342,6 +436,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -388,6 +496,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -400,6 +520,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -460,6 +589,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "license": "ISC"
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -475,6 +610,48 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
@@ -536,6 +713,21 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -551,6 +743,43 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/nodemon": {
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz",
+      "integrity": "sha512-jakjZi93UtB3jHMWsXL68FXSAosbLfY0In5gtKq3niLSkrWznrVBzXFNOEMJUfc9+Ke7SHWoAZsiMkNP3vq6Jw==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^10.2.1",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -603,9 +832,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
-      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -701,6 +930,18 @@
         "split2": "^4.1.0"
       }
     },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
@@ -753,10 +994,16 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "license": "MIT"
+    },
     "node_modules/qs": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
-      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
+      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
@@ -792,6 +1039,18 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/router": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
@@ -814,6 +1073,18 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/send": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
@@ -885,13 +1156,13 @@
       }
     },
     "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
+        "object-inspect": "^1.13.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -937,6 +1208,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/split2": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
@@ -955,6 +1238,30 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -964,6 +1271,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
     "node_modules/type-is": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
@@ -978,6 +1294,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package-lock.json b/package-lock.json
index 85f7d23..0c4b7aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,9 +46,9 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
-      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -61,9 +61,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.6.tgz",
-      "integrity": "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -71,21 +71,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
-      "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/generator": "^7.28.6",
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
         "@babel/helper-compilation-targets": "^7.28.6",
         "@babel/helper-module-transforms": "^7.28.6",
         "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.28.6",
+        "@babel/parser": "^7.29.0",
         "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
         "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -102,14 +102,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.6.tgz",
-      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -218,27 +218,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
-      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/types": "^7.29.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
-      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.6"
+        "@babel/types": "^7.29.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -280,9 +280,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
-      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -304,18 +304,18 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.6.tgz",
-      "integrity": "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/generator": "^7.28.6",
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.6",
+        "@babel/parser": "^7.29.0",
         "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6",
+        "@babel/types": "^7.29.0",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -323,9 +323,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
-      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -337,9 +337,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
-      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
+      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
       "cpu": [
         "ppc64"
       ],
@@ -354,9 +354,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
-      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz",
+      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
       "cpu": [
         "arm"
       ],
@@ -371,9 +371,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
-      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz",
+      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
       "cpu": [
         "arm64"
       ],
@@ -388,9 +388,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
-      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz",
+      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
       "cpu": [
         "x64"
       ],
@@ -405,9 +405,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
-      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz",
+      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
       "cpu": [
         "arm64"
       ],
@@ -422,9 +422,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
-      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz",
+      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
       "cpu": [
         "x64"
       ],
@@ -439,9 +439,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
       "cpu": [
         "arm64"
       ],
@@ -456,9 +456,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
-      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz",
+      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
       "cpu": [
         "x64"
       ],
@@ -473,9 +473,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
-      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz",
+      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
       "cpu": [
         "arm"
       ],
@@ -490,9 +490,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
-      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz",
+      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
       "cpu": [
         "arm64"
       ],
@@ -507,9 +507,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
-      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz",
+      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
       "cpu": [
         "ia32"
       ],
@@ -524,9 +524,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
-      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz",
+      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
       "cpu": [
         "loong64"
       ],
@@ -541,9 +541,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
-      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz",
+      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
       "cpu": [
         "mips64el"
       ],
@@ -558,9 +558,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
-      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz",
+      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
       "cpu": [
         "ppc64"
       ],
@@ -575,9 +575,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
-      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz",
+      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
       "cpu": [
         "riscv64"
       ],
@@ -592,9 +592,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
-      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz",
+      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
       "cpu": [
         "s390x"
       ],
@@ -609,9 +609,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
-      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz",
+      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
       "cpu": [
         "x64"
       ],
@@ -626,9 +626,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
       "cpu": [
         "arm64"
       ],
@@ -643,9 +643,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz",
+      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
       "cpu": [
         "x64"
       ],
@@ -660,9 +660,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
       "cpu": [
         "arm64"
       ],
@@ -677,9 +677,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz",
+      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
       "cpu": [
         "x64"
       ],
@@ -694,9 +694,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
-      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz",
+      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
       "cpu": [
         "arm64"
       ],
@@ -711,9 +711,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
-      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz",
+      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
       "cpu": [
         "x64"
       ],
@@ -728,9 +728,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
-      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz",
+      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
       "cpu": [
         "arm64"
       ],
@@ -745,9 +745,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
-      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz",
+      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
       "cpu": [
         "ia32"
       ],
@@ -762,9 +762,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
-      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz",
+      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
       "cpu": [
         "x64"
       ],
@@ -821,15 +821,15 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
-      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
+        "minimatch": "^3.1.5"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -862,20 +862,20 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
-      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "debug": "^4.3.2",
         "espree": "^10.0.1",
         "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.1",
-        "minimatch": "^3.1.2",
+        "minimatch": "^3.1.5",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
@@ -899,9 +899,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
-      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1085,16 +1085,16 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.53",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
-      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
+      "integrity": "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
-      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.1.tgz",
+      "integrity": "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==",
       "cpu": [
         "arm"
       ],
@@ -1106,9 +1106,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
-      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.1.tgz",
+      "integrity": "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==",
       "cpu": [
         "arm64"
       ],
@@ -1120,9 +1120,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
-      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.1.tgz",
+      "integrity": "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==",
       "cpu": [
         "arm64"
       ],
@@ -1134,9 +1134,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
-      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.1.tgz",
+      "integrity": "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==",
       "cpu": [
         "x64"
       ],
@@ -1148,9 +1148,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
-      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.1.tgz",
+      "integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
       "cpu": [
         "arm64"
       ],
@@ -1162,9 +1162,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
-      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.1.tgz",
+      "integrity": "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==",
       "cpu": [
         "x64"
       ],
@@ -1176,9 +1176,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
-      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.1.tgz",
+      "integrity": "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==",
       "cpu": [
         "arm"
       ],
@@ -1190,9 +1190,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
-      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.1.tgz",
+      "integrity": "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==",
       "cpu": [
         "arm"
       ],
@@ -1204,9 +1204,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
-      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.1.tgz",
+      "integrity": "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==",
       "cpu": [
         "arm64"
       ],
@@ -1218,9 +1218,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
-      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.1.tgz",
+      "integrity": "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==",
       "cpu": [
         "arm64"
       ],
@@ -1232,9 +1232,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
-      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.1.tgz",
+      "integrity": "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==",
       "cpu": [
         "loong64"
       ],
@@ -1246,9 +1246,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
-      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.1.tgz",
+      "integrity": "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==",
       "cpu": [
         "loong64"
       ],
@@ -1260,9 +1260,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
-      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.1.tgz",
+      "integrity": "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==",
       "cpu": [
         "ppc64"
       ],
@@ -1274,9 +1274,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
-      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.1.tgz",
+      "integrity": "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==",
       "cpu": [
         "ppc64"
       ],
@@ -1288,9 +1288,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
-      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.1.tgz",
+      "integrity": "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==",
       "cpu": [
         "riscv64"
       ],
@@ -1302,9 +1302,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
-      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.1.tgz",
+      "integrity": "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==",
       "cpu": [
         "riscv64"
       ],
@@ -1316,9 +1316,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
-      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.1.tgz",
+      "integrity": "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==",
       "cpu": [
         "s390x"
       ],
@@ -1330,9 +1330,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
-      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==",
       "cpu": [
         "x64"
       ],
@@ -1344,9 +1344,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
-      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.1.tgz",
+      "integrity": "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==",
       "cpu": [
         "x64"
       ],
@@ -1358,9 +1358,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
-      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.1.tgz",
+      "integrity": "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==",
       "cpu": [
         "x64"
       ],
@@ -1372,9 +1372,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
-      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.1.tgz",
+      "integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
       "cpu": [
         "arm64"
       ],
@@ -1386,9 +1386,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
-      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.1.tgz",
+      "integrity": "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==",
       "cpu": [
         "arm64"
       ],
@@ -1400,9 +1400,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
-      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.1.tgz",
+      "integrity": "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==",
       "cpu": [
         "ia32"
       ],
@@ -1414,9 +1414,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
-      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
       "cpu": [
         "x64"
       ],
@@ -1428,9 +1428,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
-      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.1.tgz",
+      "integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
       "cpu": [
         "x64"
       ],
@@ -1514,9 +1514,9 @@
       "optional": true
     },
     "node_modules/@types/react": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
-      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1541,16 +1541,16 @@
       "optional": true
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
-      "integrity": "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.2.0.tgz",
+      "integrity": "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.28.5",
+        "@babel/core": "^7.29.0",
         "@babel/plugin-transform-react-jsx-self": "^7.27.1",
         "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.53",
+        "@rolldown/pluginutils": "1.0.0-rc.3",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.18.0"
       },
@@ -1558,13 +1558,13 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -1638,19 +1638,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -1666,9 +1653,9 @@
       "license": "Python-2.0"
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.23",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
-      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
       "dev": true,
       "funding": [
         {
@@ -1686,8 +1673,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.28.1",
-        "caniuse-lite": "^1.0.30001760",
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
         "fraction.js": "^5.3.4",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
@@ -1720,13 +1707,16 @@
       }
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.19",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
-      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "version": "2.10.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.19.tgz",
+      "integrity": "sha512-qCkNLi2sfBOn8XhZQ0FXsT1Ki/Yo5P90hrkRamVFRS7/KV9hpfA4HkoWNU152+8w0zPjnxo5psx5NL3PSGgv5g==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/binary-extensions": {
@@ -1743,9 +1733,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1767,9 +1757,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
       "dev": true,
       "funding": [
         {
@@ -1787,11 +1777,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.9.0",
-        "caniuse-lite": "^1.0.30001759",
-        "electron-to-chromium": "^1.5.263",
-        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.2.0"
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -1821,9 +1811,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001766",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
-      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "version": "1.0.30001788",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz",
+      "integrity": "sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==",
       "dev": true,
       "funding": [
         {
@@ -1974,9 +1964,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.48.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
-      "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2070,29 +2060,36 @@
       "license": "MIT"
     },
     "node_modules/dompurify": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.2.tgz",
-      "integrity": "sha512-6obghkliLdmKa56xdbLOpUZ43pAR6xFy1uOrxBaIDjT+yaRuuybLjGS9eVBoSR/UPU5fq3OXClEHLJNGvbxKpQ==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.0.tgz",
+      "integrity": "sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optional": true,
-      "engines": {
-        "node": ">=20"
-      },
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.282",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.282.tgz",
-      "integrity": "sha512-FCPkJtpst28UmFzd903iU7PdeVTfY0KAeJy+Lk0GLZRwgwYHn/irRcaCbQQOmr5Vytc/7rcavsYLvTM8RiHYhQ==",
+      "version": "1.5.340",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.340.tgz",
+      "integrity": "sha512-908qahOGocRMinT2nM3ajCEM99H4iPdv84eagPP3FfZy/1ZGeOy2CZYzjhms81ckOPCXPlW7LkY4XpxD8r1DrA==",
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
-      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
+      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -2103,32 +2100,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.2",
-        "@esbuild/android-arm": "0.27.2",
-        "@esbuild/android-arm64": "0.27.2",
-        "@esbuild/android-x64": "0.27.2",
-        "@esbuild/darwin-arm64": "0.27.2",
-        "@esbuild/darwin-x64": "0.27.2",
-        "@esbuild/freebsd-arm64": "0.27.2",
-        "@esbuild/freebsd-x64": "0.27.2",
-        "@esbuild/linux-arm": "0.27.2",
-        "@esbuild/linux-arm64": "0.27.2",
-        "@esbuild/linux-ia32": "0.27.2",
-        "@esbuild/linux-loong64": "0.27.2",
-        "@esbuild/linux-mips64el": "0.27.2",
-        "@esbuild/linux-ppc64": "0.27.2",
-        "@esbuild/linux-riscv64": "0.27.2",
-        "@esbuild/linux-s390x": "0.27.2",
-        "@esbuild/linux-x64": "0.27.2",
-        "@esbuild/netbsd-arm64": "0.27.2",
-        "@esbuild/netbsd-x64": "0.27.2",
-        "@esbuild/openbsd-arm64": "0.27.2",
-        "@esbuild/openbsd-x64": "0.27.2",
-        "@esbuild/openharmony-arm64": "0.27.2",
-        "@esbuild/sunos-x64": "0.27.2",
-        "@esbuild/win32-arm64": "0.27.2",
-        "@esbuild/win32-ia32": "0.27.2",
-        "@esbuild/win32-x64": "0.27.2"
+        "@esbuild/aix-ppc64": "0.27.7",
+        "@esbuild/android-arm": "0.27.7",
+        "@esbuild/android-arm64": "0.27.7",
+        "@esbuild/android-x64": "0.27.7",
+        "@esbuild/darwin-arm64": "0.27.7",
+        "@esbuild/darwin-x64": "0.27.7",
+        "@esbuild/freebsd-arm64": "0.27.7",
+        "@esbuild/freebsd-x64": "0.27.7",
+        "@esbuild/linux-arm": "0.27.7",
+        "@esbuild/linux-arm64": "0.27.7",
+        "@esbuild/linux-ia32": "0.27.7",
+        "@esbuild/linux-loong64": "0.27.7",
+        "@esbuild/linux-mips64el": "0.27.7",
+        "@esbuild/linux-ppc64": "0.27.7",
+        "@esbuild/linux-riscv64": "0.27.7",
+        "@esbuild/linux-s390x": "0.27.7",
+        "@esbuild/linux-x64": "0.27.7",
+        "@esbuild/netbsd-arm64": "0.27.7",
+        "@esbuild/netbsd-x64": "0.27.7",
+        "@esbuild/openbsd-arm64": "0.27.7",
+        "@esbuild/openbsd-x64": "0.27.7",
+        "@esbuild/openharmony-arm64": "0.27.7",
+        "@esbuild/sunos-x64": "0.27.7",
+        "@esbuild/win32-arm64": "0.27.7",
+        "@esbuild/win32-ia32": "0.27.7",
+        "@esbuild/win32-x64": "0.27.7"
       }
     },
     "node_modules/escalade": {
@@ -2155,25 +2152,25 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
-      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-array": "^0.21.2",
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.2",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
@@ -2192,7 +2189,7 @@
         "is-glob": "^4.0.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
+        "minimatch": "^3.1.5",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.3"
       },
@@ -2215,9 +2212,9 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
-      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.0.tgz",
+      "integrity": "sha512-LDicyhrRFrIaheDYryeM2W8gWyZXnAs4zIr2WVPiOSeTmIu2RjR4x/9N0xLaRWZ+9hssBDGo3AadcohuzAvSvg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2231,7 +2228,7 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
@@ -2410,24 +2407,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fdir": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -2492,9 +2471,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
@@ -2824,9 +2803,9 @@
       }
     },
     "node_modules/jspdf": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.0.tgz",
-      "integrity": "sha512-hR/hnRevAXXlrjeqU5oahOE+Ln9ORJUB5brLHHqH67A+RBQZuFr5GkbI9XQI8OUFSEezKegsi45QRpc4bGj75Q==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.28.6",
@@ -2950,19 +2929,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -3022,9 +2988,9 @@
       "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
+      "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==",
       "dev": true,
       "license": "MIT"
     },
@@ -3091,13 +3057,13 @@
       }
     },
     "node_modules/nodemon/node_modules/minimatch": {
-      "version": "10.2.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
-      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^5.0.2"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
         "node": "18 || 20 || >=22"
@@ -3273,13 +3239,13 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=8.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/jonschlinkert"
@@ -3306,9 +3272,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
       "dev": true,
       "funding": [
         {
@@ -3527,24 +3493,24 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
-      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
+      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
-      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.4"
+        "react": "^19.2.5"
       }
     },
     "node_modules/react-refresh": {
@@ -3558,9 +3524,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
-      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.1.tgz",
+      "integrity": "sha512-5BCvFskyAAVumqhEKh/iPhLOIkfxcEUz8WqFIARCkMg8hZZzDYX9CtwxXA0e+qT8zAxmMC0x3Ckb9iMONwc5jg==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -3580,12 +3546,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
-      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.1.tgz",
+      "integrity": "sha512-ZkrQuwwhGibjQLqH1eCdyiZyLWglPxzxdl5tgwgKEyCSGC76vmAjleGocRe3J/MLfzMUIKwaFJWpFVJhK3d2xA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.13.0"
+        "react-router": "7.14.1"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3618,19 +3584,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -3639,12 +3592,13 @@
       "optional": true
     },
     "node_modules/resolve": {
-      "version": "1.22.11",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
-      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "es-errors": "^1.3.0",
         "is-core-module": "^2.16.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
@@ -3691,9 +3645,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
-      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
+      "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3707,31 +3661,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.59.0",
-        "@rollup/rollup-android-arm64": "4.59.0",
-        "@rollup/rollup-darwin-arm64": "4.59.0",
-        "@rollup/rollup-darwin-x64": "4.59.0",
-        "@rollup/rollup-freebsd-arm64": "4.59.0",
-        "@rollup/rollup-freebsd-x64": "4.59.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
-        "@rollup/rollup-linux-arm64-musl": "4.59.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
-        "@rollup/rollup-linux-loong64-musl": "4.59.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
-        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
-        "@rollup/rollup-linux-x64-gnu": "4.59.0",
-        "@rollup/rollup-linux-x64-musl": "4.59.0",
-        "@rollup/rollup-openbsd-x64": "4.59.0",
-        "@rollup/rollup-openharmony-arm64": "4.59.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
-        "@rollup/rollup-win32-x64-gnu": "4.59.0",
-        "@rollup/rollup-win32-x64-msvc": "4.59.0",
+        "@rollup/rollup-android-arm-eabi": "4.60.1",
+        "@rollup/rollup-android-arm64": "4.60.1",
+        "@rollup/rollup-darwin-arm64": "4.60.1",
+        "@rollup/rollup-darwin-x64": "4.60.1",
+        "@rollup/rollup-freebsd-arm64": "4.60.1",
+        "@rollup/rollup-freebsd-x64": "4.60.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.1",
+        "@rollup/rollup-linux-arm64-musl": "4.60.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.1",
+        "@rollup/rollup-linux-loong64-musl": "4.60.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-musl": "4.60.1",
+        "@rollup/rollup-openbsd-x64": "4.60.1",
+        "@rollup/rollup-openharmony-arm64": "4.60.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.1",
+        "@rollup/rollup-win32-x64-gnu": "4.60.1",
+        "@rollup/rollup-win32-x64-msvc": "4.60.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -3994,14 +3948,14 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -4010,6 +3964,37 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4119,9 +4104,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4193,6 +4178,37 @@
         }
       }
     },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index 9072771..7a4bbb7 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,204 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
 
-function Teachers() {
-  const [teachers, setTeachers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
-  const [form, setForm] = useState({ matricula: "", nombre: "", departamento: "" });
-  const [query, setQuery] = useState("");
-
-  async function loadTeachers() {
-    setLoading(true);
-    setError("");
-    try {
-      const response = await fetch("http://localhost:3000/api/teachers");
-      if (!response.ok) {
-        throw new Error("No se pudo cargar la lista de docentes");
-      }
-      const data = await response.json();
-      setTeachers(Array.isArray(data) ? data : []);
-    } catch (err) {
-      setError(err.message || "Error al cargar docentes");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    loadTeachers();
-  }, []);
-
-  const filteredTeachers = useMemo(() => {
-    const search = query.trim().toLowerCase();
-    if (!search) {
-      return teachers;
-    }
-    return teachers.filter((teacher) => {
-      return (
-        String(teacher.matricula || "").toLowerCase().includes(search) ||
-        String(teacher.nombre || "").toLowerCase().includes(search) ||
-        String(teacher.departamento || "").toLowerCase().includes(search)
-      );
-    });
-  }, [teachers, query]);
-
-  const handleCreate = async (event) => {
-    event.preventDefault();
-
-    if (!form.matricula.trim() || !form.nombre.trim()) {
-      setError("Matricula y nombre son obligatorios.");
-      return;
-    }
-
-    setError("");
-    try {
-      const response = await fetch("http://localhost:3000/api/teachers", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          matricula: form.matricula.trim(),
-          nombre: form.nombre.trim(),
-          departamento: form.departamento.trim() || null,
-        }),
-      });
-
-      const payload = await response.json().catch(() => ({}));
-      if (!response.ok) {
-        throw new Error(payload.error || "No se pudo crear el docente");
-      }
-
-      setForm({ matricula: "", nombre: "", departamento: "" });
-      await loadTeachers();
-    } catch (err) {
-      setError(err.message || "No se pudo crear el docente");
-    }
-  };
-
-  const handleDelete = async (matricula) => {
-    const ok = window.confirm(`Eliminar docente ${matricula}?`);
-    if (!ok) {
-      return;
-    }
-
-    setError("");
-    try {
-      const response = await fetch(`http://localhost:3000/api/teachers/${matricula}`, {
-        method: "DELETE",
-      });
-      const payload = await response.json().catch(() => ({}));
-      if (!response.ok) {
-        throw new Error(payload.error || "No se pudo eliminar el docente");
-      }
-      await loadTeachers();
-    } catch (err) {
-      setError(err.message || "No se pudo eliminar el docente");
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-slate-100 p-6">
-      <div className="mx-auto max-w-5xl space-y-5">
-        <header className="rounded-xl bg-blue-900 px-6 py-5 text-white shadow">
-          <h1 className="text-2xl font-bold">Docentes</h1>
-          <p className="mt-1 text-sm text-blue-100">Datos conectados a PostgreSQL (tabla teachers).</p>
-        </header>
-
-        <section className="rounded-xl bg-white p-5 shadow">
-          <h2 className="mb-3 text-lg font-semibold text-slate-800">Nuevo docente</h2>
-          <form className="grid gap-3 md:grid-cols-4" onSubmit={handleCreate}>
-            <input
-              className="rounded-md border border-slate-300 px-3 py-2"
-              placeholder="Matricula"
-              value={form.matricula}
-              onChange={(e) => setForm((prev) => ({ ...prev, matricula: e.target.value }))}
-            />
-            <input
-              className="rounded-md border border-slate-300 px-3 py-2"
-              placeholder="Nombre"
-              value={form.nombre}
-              onChange={(e) => setForm((prev) => ({ ...prev, nombre: e.target.value }))}
-            />
-            <input
-              className="rounded-md border border-slate-300 px-3 py-2"
-              placeholder="Departamento"
-              value={form.departamento}
-              onChange={(e) => setForm((prev) => ({ ...prev, departamento: e.target.value }))}
-            />
-            <button className="rounded-md bg-blue-700 px-4 py-2 font-semibold text-white hover:bg-blue-800" type="submit">
-              Guardar
-            </button>
-          </form>
-        </section>
-
-        <section className="rounded-xl bg-white p-5 shadow">
-          <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-            <h2 className="text-lg font-semibold text-slate-800">Listado de docentes</h2>
-            <input
-              className="w-full max-w-xs rounded-md border border-slate-300 px-3 py-2"
-              placeholder="Buscar matricula, nombre o departamento"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-            />
-          </div>
-
-          {error && <div className="mb-3 rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">{error}</div>}
-
-          {loading ? (
-            <p className="text-slate-600">Cargando...</p>
-          ) : (
-            <div className="overflow-x-auto">
-              <table className="min-w-full border-collapse">
-                <thead>
-                  <tr className="bg-slate-200 text-left text-sm text-slate-700">
-                    <th className="px-3 py-2">Matricula</th>
-                    <th className="px-3 py-2">Nombre</th>
-                    <th className="px-3 py-2">Departamento</th>
-                    <th className="px-3 py-2">Accion</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {filteredTeachers.length === 0 ? (
-                    <tr>
-                      <td className="px-3 py-3 text-sm text-slate-500" colSpan={4}>
-                        No hay docentes.
-                      </td>
-                    </tr>
-                  ) : (
-                    filteredTeachers.map((teacher) => (
-                      <tr className="border-b border-slate-100" key={teacher.matricula}>
-                        <td className="px-3 py-2 text-sm">{teacher.matricula}</td>
-                        <td className="px-3 py-2 text-sm">{teacher.nombre}</td>
-                        <td className="px-3 py-2 text-sm">{teacher.departamento || "-"}</td>
-                        <td className="px-3 py-2 text-sm">
-                          <button
-                            className="rounded-md bg-red-600 px-3 py-1 text-white hover:bg-red-700"
-                            onClick={() => handleDelete(teacher.matricula)}
-                            type="button"
-                          >
-                            Eliminar
-                          </button>
-                        </td>
-                      </tr>
-                    ))
-                  )}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </section>
-      </div>
-    </div>
-  );
-}
-
-const initialTeachers = [
-    { id: 1, name: "Leydi Xequeb", subject: "Matemáticas", email: "l.xequeb@universidad.edu", phone: "+502 5555-0101", status: "Activo", degree: "MSc. Matemáticas Aplicadas", joined: "2019-03-15", avatar: "LX" },
-    { id: 2, name: "Irvin Chan", subject: "Programación", email: "i.chan@universidad.edu", phone: "+502 5555-0202", status: "Activo", degree: "Ing. en Sistemas", joined: "2020-08-01", avatar: "IC" },
-    { id: 3, name: "Marcos Rivera", subject: "Fe y Mundo", email: "m.rivera@universidad.edu", phone: "+502 5555-0303", status: "Activo", degree: "Lic. Teología", joined: "2018-01-20", avatar: "MR" },
-    { id: 4, name: "Sandra López", subject: "Física", email: "s.lopez@universidad.edu", phone: "+502 5555-0404", status: "Inactivo", degree: "PhD. Física Teórica", joined: "2017-06-10", avatar: "SL" },
-    { id: 5, name: "Carlos Menéndez", subject: "Química", email: "c.menendez@universidad.edu", phone: "+502 5555-0505", status: "Activo", degree: "MSc. Química Industrial", joined: "2021-02-28", avatar: "CM" },
-    { id: 6, name: "Ana Fuentes", subject: "Inglés", email: "a.fuentes@universidad.edu", phone: "+502 5555-0606", status: "Licencia", degree: "BA. Lenguas Modernas", joined: "2016-09-05", avatar: "AF" },
-];
 
 const avatarColors = [
   ["#1E3A8A", "#FBBF24"],
@@ -1405,5 +1206,3 @@ export default function Teachers() {
     </div>
   );
 }
-
-export default Teachers;
\ No newline at end of file

From 718bb118a2c4ec560354c21d0eb60442b3279ade Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 10:43:22 -0500
Subject: [PATCH 39/46] Fix merge feature-isaac and clean Teachers module

---
 backend/Package-lock.json | 1015 -------------------------------------
 backend/package-lock.json | 1015 -------------------------------------
 src/pages/Teachers.jsx    |    4 -
 3 files changed, 2034 deletions(-)
 delete mode 100644 backend/Package-lock.json
 delete mode 100644 backend/package-lock.json

diff --git a/backend/Package-lock.json b/backend/Package-lock.json
deleted file mode 100644
index 194ec33..0000000
--- a/backend/Package-lock.json
+++ /dev/null
@@ -1,1015 +0,0 @@
-{
-  "name": "backend",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "backend",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "cors": "^2.8.6",
-        "dotenv": "^17.3.1",
-        "express": "^5.2.1",
-        "pg": "^8.20.0"
-      },
-      "devDependencies": {}
-    },
-    "node_modules/accepts": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
-      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "^3.0.0",
-        "negotiator": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/body-parser": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
-      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
-        "debug": "^4.4.3",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.7.0",
-        "on-finished": "^2.4.1",
-        "qs": "^6.14.1",
-        "raw-body": "^3.0.1",
-        "type-is": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
-      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
-      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.6.0"
-      }
-    },
-    "node_modules/cors": {
-      "version": "2.8.6",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
-      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4",
-        "vary": "^1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "17.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
-      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "license": "MIT"
-    },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "license": "MIT"
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/express": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
-      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "^2.0.0",
-        "body-parser": "^2.2.1",
-        "content-disposition": "^1.0.0",
-        "content-type": "^1.0.5",
-        "cookie": "^0.7.1",
-        "cookie-signature": "^1.2.1",
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "finalhandler": "^2.1.0",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "merge-descriptors": "^2.0.0",
-        "mime-types": "^3.0.0",
-        "on-finished": "^2.4.1",
-        "once": "^1.4.0",
-        "parseurl": "^1.3.3",
-        "proxy-addr": "^2.0.7",
-        "qs": "^6.14.0",
-        "range-parser": "^1.2.1",
-        "router": "^2.2.0",
-        "send": "^1.1.0",
-        "serve-static": "^2.2.0",
-        "statuses": "^2.0.1",
-        "type-is": "^2.0.1",
-        "vary": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
-      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "on-finished": "^2.4.1",
-        "parseurl": "^1.3.3",
-        "statuses": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
-      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
-      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "~2.0.0",
-        "inherits": "~2.0.4",
-        "setprototypeof": "~1.2.0",
-        "statuses": "~2.0.2",
-        "toidentifier": "~1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
-      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/is-promise": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
-      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
-      "license": "MIT"
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/media-typer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
-      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
-      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
-      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "^1.54.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/negotiator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
-      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "license": "MIT",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/path-to-regexp": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
-      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/pg": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
-      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-connection-string": "^2.12.0",
-        "pg-pool": "^3.13.0",
-        "pg-protocol": "^1.13.0",
-        "pg-types": "2.2.0",
-        "pgpass": "1.0.5"
-      },
-      "engines": {
-        "node": ">= 16.0.0"
-      },
-      "optionalDependencies": {
-        "pg-cloudflare": "^1.3.0"
-      },
-      "peerDependencies": {
-        "pg-native": ">=3.0.1"
-      },
-      "peerDependenciesMeta": {
-        "pg-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/pg-cloudflare": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
-      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/pg-connection-string": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
-      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
-      "license": "MIT"
-    },
-    "node_modules/pg-int8": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
-      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/pg-pool": {
-      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
-      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "pg": ">=8.0"
-      }
-    },
-    "node_modules/pg-protocol": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
-      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
-      "license": "MIT"
-    },
-    "node_modules/pg-types": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
-      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-int8": "1.0.1",
-        "postgres-array": "~2.0.0",
-        "postgres-bytea": "~1.0.0",
-        "postgres-date": "~1.0.4",
-        "postgres-interval": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/pgpass": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
-      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
-      "license": "MIT",
-      "dependencies": {
-        "split2": "^4.1.0"
-      }
-    },
-    "node_modules/postgres-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
-      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postgres-bytea": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
-      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-date": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
-      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-interval": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
-      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "license": "MIT",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
-      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
-      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "~3.1.2",
-        "http-errors": "~2.0.1",
-        "iconv-lite": "~0.7.0",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/router": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
-      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "is-promise": "^4.0.0",
-        "parseurl": "^1.3.3",
-        "path-to-regexp": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
-    },
-    "node_modules/send": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
-      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.3",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.1",
-        "mime-types": "^3.0.2",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/serve-static": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
-      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
-      "license": "MIT",
-      "dependencies": {
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "parseurl": "^1.3.3",
-        "send": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "license": "ISC"
-    },
-    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/split2": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
-      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 10.x"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
-      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
-      "license": "MIT",
-      "dependencies": {
-        "content-type": "^1.0.5",
-        "media-typer": "^1.1.0",
-        "mime-types": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC"
-    },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4"
-      }
-    }
-  }
-}
diff --git a/backend/package-lock.json b/backend/package-lock.json
deleted file mode 100644
index 194ec33..0000000
--- a/backend/package-lock.json
+++ /dev/null
@@ -1,1015 +0,0 @@
-{
-  "name": "backend",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "backend",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "cors": "^2.8.6",
-        "dotenv": "^17.3.1",
-        "express": "^5.2.1",
-        "pg": "^8.20.0"
-      },
-      "devDependencies": {}
-    },
-    "node_modules/accepts": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
-      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "^3.0.0",
-        "negotiator": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/body-parser": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
-      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
-        "debug": "^4.4.3",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.7.0",
-        "on-finished": "^2.4.1",
-        "qs": "^6.14.1",
-        "raw-body": "^3.0.1",
-        "type-is": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
-      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
-      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.6.0"
-      }
-    },
-    "node_modules/cors": {
-      "version": "2.8.6",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
-      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4",
-        "vary": "^1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "17.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
-      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "license": "MIT"
-    },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "license": "MIT"
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/express": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
-      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "^2.0.0",
-        "body-parser": "^2.2.1",
-        "content-disposition": "^1.0.0",
-        "content-type": "^1.0.5",
-        "cookie": "^0.7.1",
-        "cookie-signature": "^1.2.1",
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "finalhandler": "^2.1.0",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "merge-descriptors": "^2.0.0",
-        "mime-types": "^3.0.0",
-        "on-finished": "^2.4.1",
-        "once": "^1.4.0",
-        "parseurl": "^1.3.3",
-        "proxy-addr": "^2.0.7",
-        "qs": "^6.14.0",
-        "range-parser": "^1.2.1",
-        "router": "^2.2.0",
-        "send": "^1.1.0",
-        "serve-static": "^2.2.0",
-        "statuses": "^2.0.1",
-        "type-is": "^2.0.1",
-        "vary": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
-      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "on-finished": "^2.4.1",
-        "parseurl": "^1.3.3",
-        "statuses": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
-      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
-      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "~2.0.0",
-        "inherits": "~2.0.4",
-        "setprototypeof": "~1.2.0",
-        "statuses": "~2.0.2",
-        "toidentifier": "~1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
-      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/is-promise": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
-      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
-      "license": "MIT"
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/media-typer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
-      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
-      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
-      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "^1.54.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/negotiator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
-      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "license": "MIT",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/path-to-regexp": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
-      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/pg": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
-      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-connection-string": "^2.12.0",
-        "pg-pool": "^3.13.0",
-        "pg-protocol": "^1.13.0",
-        "pg-types": "2.2.0",
-        "pgpass": "1.0.5"
-      },
-      "engines": {
-        "node": ">= 16.0.0"
-      },
-      "optionalDependencies": {
-        "pg-cloudflare": "^1.3.0"
-      },
-      "peerDependencies": {
-        "pg-native": ">=3.0.1"
-      },
-      "peerDependenciesMeta": {
-        "pg-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/pg-cloudflare": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
-      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/pg-connection-string": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
-      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
-      "license": "MIT"
-    },
-    "node_modules/pg-int8": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
-      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/pg-pool": {
-      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
-      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "pg": ">=8.0"
-      }
-    },
-    "node_modules/pg-protocol": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
-      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
-      "license": "MIT"
-    },
-    "node_modules/pg-types": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
-      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-int8": "1.0.1",
-        "postgres-array": "~2.0.0",
-        "postgres-bytea": "~1.0.0",
-        "postgres-date": "~1.0.4",
-        "postgres-interval": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/pgpass": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
-      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
-      "license": "MIT",
-      "dependencies": {
-        "split2": "^4.1.0"
-      }
-    },
-    "node_modules/postgres-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
-      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postgres-bytea": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
-      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-date": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
-      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-interval": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
-      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "license": "MIT",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
-      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
-      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "~3.1.2",
-        "http-errors": "~2.0.1",
-        "iconv-lite": "~0.7.0",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/router": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
-      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "is-promise": "^4.0.0",
-        "parseurl": "^1.3.3",
-        "path-to-regexp": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
-    },
-    "node_modules/send": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
-      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.3",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.1",
-        "mime-types": "^3.0.2",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/serve-static": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
-      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
-      "license": "MIT",
-      "dependencies": {
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "parseurl": "^1.3.3",
-        "send": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "license": "ISC"
-    },
-    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/split2": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
-      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 10.x"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
-      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
-      "license": "MIT",
-      "dependencies": {
-        "content-type": "^1.0.5",
-        "media-typer": "^1.1.0",
-        "mime-types": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC"
-    },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4"
-      }
-    }
-  }
-}
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index f34d5ec..095b559 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -511,11 +511,7 @@ export default function Teachers() {
                   { label: "Docente", field: "name" },
                   { label: "Materia", field: "subject" },
                   { label: "Correo", field: "email" },
-<<<<<<< HEAD
                   { label: "Teléfono", field: "phone" },
-=======
-                  { label: "Teléfono", field: null },
->>>>>>> feature-isaac
                   { label: "Estado", field: "status" },
                   { label: "Ingreso", field: "joined" },
                   { label: "Acciones", field: null },

From 82affe3253ce5cda89fe71330ee6e4b43767eb0d Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 11:08:57 -0500
Subject: [PATCH 40/46] Fix duplicate Package.json casing issue

---
 backend/Package.json | 19 -------------------
 backend/package.json | 26 --------------------------
 2 files changed, 45 deletions(-)
 delete mode 100644 backend/Package.json
 delete mode 100644 backend/package.json

diff --git a/backend/Package.json b/backend/Package.json
deleted file mode 100644
index 3fe296c..0000000
--- a/backend/Package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "backend",
-  "version": "1.0.0",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "cors": "^2.8.6",
-    "dotenv": "^17.3.1",
-    "express": "^5.2.1",
-    "pg": "^8.20.0"
-  },
-  "description": ""
-}
\ No newline at end of file
diff --git a/backend/package.json b/backend/package.json
deleted file mode 100644
index fc149f9..0000000
--- a/backend/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "backend",
-  "version": "1.0.0",
-  "main": "index.js",
-  "description": "",
-  "main": "server.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-  "type": "commonjs",
-  "dependencies": {
-    "cord": "^1.0.1",
-    "cors": "^2.8.6",
-    "dotenv": "^17.3.1",
-    "express": "^5.2.1",
-    "pg": "^8.20.0"
-  },
-  "description": ""
-}
-  }
-}

From 6df84b14db84830b2e988a3e74a6e5f771de9b52 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 11:10:10 -0500
Subject: [PATCH 41/46] Restore backend package.json

---
 backend/package.json | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 backend/package.json

diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..fc149f9
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+  "type": "commonjs",
+  "dependencies": {
+    "cord": "^1.0.1",
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "pg": "^8.20.0"
+  },
+  "description": ""
+}
+  }
+}

From 40105e6c6fbda423d231fcbf353176c29e890a3a Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 11:13:31 -0500
Subject: [PATCH 42/46] Fix corrupted package.json

---
 backend/package.json | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index fc149f9..356eb60 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,26 +1,21 @@
 {
   "name": "backend",
   "version": "1.0.0",
-  "main": "index.js",
-  "description": "",
+  "description": "Backend onTimeClock",
   "main": "server.js",
+  "type": "commonjs",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "dev": "nodemon server.js",
+    "start": "node server.js",
+    "test": "echo \"No tests\" && exit 0"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-  "type": "commonjs",
-  "dependencies": {
-    "cord": "^1.0.1",
     "cors": "^2.8.6",
     "dotenv": "^17.3.1",
-    "express": "^5.2.1",
+    "express": "^4.19.2",
     "pg": "^8.20.0"
-  },
-  "description": ""
-}
   }
-}
+}
\ No newline at end of file

From 93bc91613e6742659c4715572970daaf78a77759 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 11:37:29 -0500
Subject: [PATCH 43/46] Remove lingering submodule reference ontimeClock

---
 ontimeClock | 1 -
 1 file changed, 1 deletion(-)
 delete mode 160000 ontimeClock

diff --git a/ontimeClock b/ontimeClock
deleted file mode 160000
index 5a41cdf..0000000
--- a/ontimeClock
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 5a41cdf6d065c14ac2fb854ca49e37518be4b019

From 231cb9ef94512ce6b6b5110e01ea369734f214e0 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 12:05:55 -0500
Subject: [PATCH 44/46] Use DATABASE_URL for Render

---
 backend/config/db.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/backend/config/db.js b/backend/config/db.js
index a058895..c16a2bd 100644
--- a/backend/config/db.js
+++ b/backend/config/db.js
@@ -1,14 +1,11 @@
-module.exports = pool;
-
-require('dotenv').config();
-const { Pool } = require('pg');
+require("dotenv").config();
+const { Pool } = require("pg");
 
 const pool = new Pool({
-    user: process.env.PGUSER || process.env.DB_USER || 'postgres',
-    host: process.env.PGHOST || process.env.DB_HOST || 'localhost',
-    database: process.env.PGDATABASE || process.env.DB_NAME || 'onTimeClock',
-    password: process.env.PGPASSWORD || process.env.DB_PASSWORD || 'postgres',
-    port: Number(process.env.PGPORT || process.env.DB_PORT || 5432),
+  connectionString: process.env.DATABASE_URL,
+  ssl: {
+    rejectUnauthorized: false,
+  },
 });
 
-module.exports = pool;
+module.exports = pool;
\ No newline at end of file

From 734e948a772005d6496fde23325e8cb00e5c06e3 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 13:04:20 -0500
Subject: [PATCH 45/46] Connect frontend to Render backend (production API)

---
 backend/package-lock.json  | 476 ++++++++++++++++++-------------------
 src/api/scheduleAPI.js     |   2 +-
 src/pages/Clock.jsx        |   4 +-
 src/pages/Reports.jsx      |   6 +-
 src/pages/SystemConfig.jsx |   2 +-
 src/pages/Teachers.jsx     |   8 +-
 6 files changed, 246 insertions(+), 252 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 8d07f22..addb31e 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -9,48 +9,53 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "cord": "^1.0.1",
         "cors": "^2.8.6",
         "dotenv": "^17.3.1",
-        "express": "^5.2.1",
+        "express": "^4.19.2",
         "pg": "^8.20.0"
       }
     },
     "node_modules/accepts": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
-      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "license": "MIT",
       "dependencies": {
-        "mime-types": "^3.0.0",
-        "negotiator": "^1.0.0"
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
       },
       "engines": {
         "node": ">= 0.6"
       }
     },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
     "node_modules/body-parser": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
-      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
+      "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
       "license": "MIT",
       "dependencies": {
-        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
-        "debug": "^4.4.3",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.7.0",
-        "on-finished": "^2.4.1",
-        "qs": "^6.14.1",
-        "raw-body": "^3.0.1",
-        "type-is": "^2.0.1"
+        "bytes": "~3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "~1.2.0",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "on-finished": "~2.4.1",
+        "qs": "~6.14.0",
+        "raw-body": "~2.5.3",
+        "type-is": "~1.6.18",
+        "unpipe": "~1.0.0"
       },
       "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
     "node_modules/bytes": {
@@ -92,16 +97,15 @@
       }
     },
     "node_modules/content-disposition": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
-      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "license": "MIT",
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "safe-buffer": "5.2.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+      "engines": {
+        "node": ">= 0.6"
       }
     },
     "node_modules/content-type": {
@@ -123,18 +127,9 @@
       }
     },
     "node_modules/cookie-signature": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
-      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.6.0"
-      }
-    },
-    "node_modules/cord": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cord/-/cord-1.0.1.tgz",
-      "integrity": "sha512-t56g3YbmUYrEd9wp4VNNY27SoNa8Xm0F9GfT+BZpXG+hNO2LJRgzLYQKgZpFiKkld8MWWuQptydD9dk//5Fe4A==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
       "license": "MIT"
     },
     "node_modules/cors": {
@@ -155,20 +150,12 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+        "ms": "2.0.0"
       }
     },
     "node_modules/depd": {
@@ -180,6 +167,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
@@ -267,42 +264,45 @@
       }
     },
     "node_modules/express": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
-      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "^2.0.0",
-        "body-parser": "^2.2.1",
-        "content-disposition": "^1.0.0",
-        "content-type": "^1.0.5",
-        "cookie": "^0.7.1",
-        "cookie-signature": "^1.2.1",
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "finalhandler": "^2.1.0",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "merge-descriptors": "^2.0.0",
-        "mime-types": "^3.0.0",
-        "on-finished": "^2.4.1",
-        "once": "^1.4.0",
-        "parseurl": "^1.3.3",
-        "proxy-addr": "^2.0.7",
-        "qs": "^6.14.0",
-        "range-parser": "^1.2.1",
-        "router": "^2.2.0",
-        "send": "^1.1.0",
-        "serve-static": "^2.2.0",
-        "statuses": "^2.0.1",
-        "type-is": "^2.0.1",
-        "vary": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
+      "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "~1.20.3",
+        "content-disposition": "~0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "~0.7.1",
+        "cookie-signature": "~1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.3.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "~0.1.12",
+        "proxy-addr": "~2.0.7",
+        "qs": "~6.14.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "~0.19.0",
+        "serve-static": "~1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "~2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
       },
       "funding": {
         "type": "opencollective",
@@ -310,24 +310,21 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
-      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
       "license": "MIT",
       "dependencies": {
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "on-finished": "^2.4.1",
-        "parseurl": "^1.3.3",
-        "statuses": "^2.0.1"
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "~2.0.2",
+        "unpipe": "~1.0.0"
       },
       "engines": {
-        "node": ">= 18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "node": ">= 0.8"
       }
     },
     "node_modules/forwarded": {
@@ -340,12 +337,12 @@
       }
     },
     "node_modules/fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
-      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.6"
       }
     },
     "node_modules/function-bind": {
@@ -451,19 +448,15 @@
       }
     },
     "node_modules/iconv-lite": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
-      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "license": "MIT",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
+        "safer-buffer": ">= 2.1.2 < 3"
       },
       "engines": {
         "node": ">=0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/inherits": {
@@ -481,12 +474,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/is-promise": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
-      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
-      "license": "MIT"
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -497,61 +484,75 @@
       }
     },
     "node_modules/media-typer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
-      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.6"
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
-      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
       "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/mime-types": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
-      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "license": "MIT",
       "dependencies": {
-        "mime-db": "^1.54.0"
+        "mime-db": "1.52.0"
       },
       "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "node": ">= 0.6"
       }
     },
     "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/negotiator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
-      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -590,15 +591,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -609,14 +601,10 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
-      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
+      "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==",
+      "license": "MIT"
     },
     "node_modules/pg": {
       "version": "8.20.0",
@@ -760,9 +748,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
-      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
@@ -784,35 +772,39 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
-      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
       "license": "MIT",
       "dependencies": {
         "bytes": "~3.1.2",
         "http-errors": "~2.0.1",
-        "iconv-lite": "~0.7.0",
+        "iconv-lite": "~0.4.24",
         "unpipe": "~1.0.0"
       },
       "engines": {
-        "node": ">= 0.10"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/router": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
-      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "is-promise": "^4.0.0",
-        "parseurl": "^1.3.3",
-        "path-to-regexp": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -821,48 +813,48 @@
       "license": "MIT"
     },
     "node_modules/send": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
-      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.3",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.1",
-        "mime-types": "^3.0.2",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.2"
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.1",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "~2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "~2.0.2"
       },
       "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "node": ">= 0.8.0"
       }
     },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
     "node_modules/serve-static": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
-      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
       "license": "MIT",
       "dependencies": {
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "parseurl": "^1.3.3",
-        "send": "^1.2.0"
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "~0.19.1"
       },
       "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "node": ">= 0.8.0"
       }
     },
     "node_modules/setprototypeof": {
@@ -891,13 +883,13 @@
       }
     },
     "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
+        "object-inspect": "^1.13.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -971,14 +963,13 @@
       }
     },
     "node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "license": "MIT",
       "dependencies": {
-        "content-type": "^1.0.5",
-        "media-typer": "^1.1.0",
-        "mime-types": "^3.0.0"
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
       },
       "engines": {
         "node": ">= 0.6"
@@ -993,6 +984,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -1002,12 +1002,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC"
-    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/src/api/scheduleAPI.js b/src/api/scheduleAPI.js
index ab25d6a..9b9bcdd 100644
--- a/src/api/scheduleAPI.js
+++ b/src/api/scheduleAPI.js
@@ -1,4 +1,4 @@
-const API_BASE_URL = 'http://localhost:3000/api';
+const API_BASE_URL = 'https://ontimeclock.onrender.com/api';
 
 export const scheduleAPI = {
   getSchedules: async () => {
diff --git a/src/pages/Clock.jsx b/src/pages/Clock.jsx
index b628880..15dd3ac 100644
--- a/src/pages/Clock.jsx
+++ b/src/pages/Clock.jsx
@@ -39,7 +39,7 @@ export default function Clock() {
   useEffect(() => {
     const loadTeachers = async () => {
       try {
-        const response = await fetch("http://localhost:3000/api/teachers");
+        const response = await fetch("https://ontimeclock.onrender.com/api/teachers");
         if (!response.ok) return;
         const data = await response.json();
         if (Array.isArray(data)) {
@@ -111,7 +111,7 @@ export default function Clock() {
     }
 
     try {
-      const response = await fetch("http://localhost:3000/api/records", {
+      const response = await fetch("https://ontimeclock.onrender.com/api/records", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
diff --git a/src/pages/Reports.jsx b/src/pages/Reports.jsx
index 56a7257..a996edb 100644
--- a/src/pages/Reports.jsx
+++ b/src/pages/Reports.jsx
@@ -38,7 +38,7 @@ function Reports() {
 
     try {
       const response = await fetch(
-        `http://localhost:3000/api/reports?startDate=${startDate}&endDate=${endDate}`
+        `https://ontimeclock.onrender.com/api/reports?startDate=${startDate}&endDate=${endDate}`
       );
 
       const payload = await response.json().catch(() => []);
@@ -60,7 +60,7 @@ function Reports() {
       console.error("Error:", err);
       setError(
         err.message ||
-          "No se pudo conectar con el servidor. Verifica que esté corriendo en http://localhost:3000"
+          "No se pudo conectar con el servidor. Verifica que esté corriendo en https://ontimeclock.onrender.com"
       );
     } finally {
       setLoading(false);
@@ -118,7 +118,7 @@ function Reports() {
 
     try {
       const response = await fetch(
-        `http://localhost:3000/api/reports/${teacherRow.matricula}/details?startDate=${startDate}&endDate=${endDate}`
+        `https://ontimeclock.onrender.com/api/reports/${teacherRow.matricula}/details?startDate=${startDate}&endDate=${endDate}`
       );
       const payload = await response.json().catch(() => []);
 
diff --git a/src/pages/SystemConfig.jsx b/src/pages/SystemConfig.jsx
index 9a2cfcb..da1b711 100644
--- a/src/pages/SystemConfig.jsx
+++ b/src/pages/SystemConfig.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-const API = "http://localhost:3000/api/systemconfig";
+const API = "https://ontimeclock.onrender.com/api/systemconfig";
 
 // ─── Paleta de colores y estilos base ───────────────────────────────────────
 const styles = {
diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index 095b559..150940b 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -39,7 +39,7 @@ export default function Teachers() {
   useEffect(() => {
     const fetchTeachers = async () => {
       try {
-        const response = await fetch("http://localhost:3000/api/teachers");
+        const response = await fetch("https://ontimeclock.onrender.com/api/teachers");
         const data = await response.json();
         setTeachers(Array.isArray(data) ? data : data.data || []);
       } catch (error) {
@@ -121,7 +121,7 @@ export default function Teachers() {
     try {
       if (modalMode === "edit") {
         // Actualizar docente
-        const response = await fetch(`http://localhost:3000/api/teachers/${selectedTeacher.id}`, {
+        const response = await fetch(`https://ontimeclock.onrender.com/api/teachers/${selectedTeacher.id}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(formData),
@@ -144,7 +144,7 @@ export default function Teachers() {
           .slice(0, 2)
           .toUpperCase();
           
-        const response = await fetch("http://localhost:3000/api/teachers", {
+        const response = await fetch("https://ontimeclock.onrender.com/api/teachers", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ ...formData, avatar: initials }),
@@ -166,7 +166,7 @@ export default function Teachers() {
   const handleDelete = async (id) => {
     if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
       try {
-        const response = await fetch(`http://localhost:3000/api/teachers/${id}`, {
+        const response = await fetch(`https://ontimeclock.onrender.com/api/teachers/${id}`, {
           method: "DELETE",
         });
         

From 3383f6c5cd81a33c57162e0232cd654736165f33 Mon Sep 17 00:00:00 2001
From: arlinchc <arlinchc@gmail.com>
Date: Fri, 17 Apr 2026 13:25:30 -0500
Subject: [PATCH 46/46] Fix Teachers full UI (Render compatibility + crash fix)

---
 src/pages/Teachers.jsx | 131 ++++++++++++++++++++++++++++-------------
 1 file changed, 90 insertions(+), 41 deletions(-)

diff --git a/src/pages/Teachers.jsx b/src/pages/Teachers.jsx
index 150940b..17ce82e 100644
--- a/src/pages/Teachers.jsx
+++ b/src/pages/Teachers.jsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
 
-
 const avatarColors = [
   ["#1E3A8A", "#FBBF24"],
   ["#1D4ED8", "#F59E0B"],
@@ -39,7 +38,9 @@ export default function Teachers() {
   useEffect(() => {
     const fetchTeachers = async () => {
       try {
-        const response = await fetch("https://ontimeclock.onrender.com/api/teachers");
+        const response = await fetch(
+          "https://ontimeclock.onrender.com/api/teachers",
+        );
         const data = await response.json();
         setTeachers(Array.isArray(data) ? data : data.data || []);
       } catch (error) {
@@ -51,12 +52,16 @@ export default function Teachers() {
   }, []);
 
   const filtered = teachers
-    .filter((t) => statusFilter === "Todos" || t.status === statusFilter)
     .filter(
       (t) =>
-        t.name.toLowerCase().includes(search.toLowerCase()) ||
-        t.subject.toLowerCase().includes(search.toLowerCase()) ||
-        t.email.toLowerCase().includes(search.toLowerCase()),
+        statusFilter === "Todos" ||
+        t.status?.toLowerCase() === statusFilter.toLowerCase(),
+    )
+    .filter(
+      (t) =>
+        (t.name || "").toLowerCase().includes(search.toLowerCase()) ||
+        (t.subject || "").toLowerCase().includes(search.toLowerCase()) ||
+        (t.email || "").toLowerCase().includes(search.toLowerCase()),
     )
     .sort((a, b) => {
       const va = a[sortField] || "";
@@ -111,29 +116,31 @@ export default function Teachers() {
 
   const handleSave = async () => {
     if (!form.name.trim()) return;
-    
+
     // Validar que status tenga valor
     const formData = {
       ...form,
       status: form.status || "Activo",
     };
-    
+
     try {
       if (modalMode === "edit") {
         // Actualizar docente
-        const response = await fetch(`https://ontimeclock.onrender.com/api/teachers/${selectedTeacher.id}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(formData),
-        });
-        
+        const response = await fetch(
+          `https://ontimeclock.onrender.com/api/teachers/${selectedTeacher.id}`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(formData),
+          },
+        );
+
         const result = await response.json();
-        if (!response.ok) throw new Error(result.message || "Error al actualizar");
-        
+        if (!response.ok)
+          throw new Error(result.message || "Error al actualizar");
+
         setTeachers((prev) =>
-          prev.map((t) =>
-            t.id === selectedTeacher.id ? result.data : t,
-          ),
+          prev.map((t) => (t.id === selectedTeacher.id ? result.data : t)),
         );
       } else {
         // Crear nuevo docente
@@ -143,17 +150,20 @@ export default function Teachers() {
           .join("")
           .slice(0, 2)
           .toUpperCase();
-          
-        const response = await fetch("https://ontimeclock.onrender.com/api/teachers", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ ...formData, avatar: initials }),
-        });
-        
+
+        const response = await fetch(
+          "https://ontimeclock.onrender.com/api/teachers",
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ ...formData, avatar: initials }),
+          },
+        );
+
         const result = await response.json();
         console.log("Response:", result);
         if (!response.ok) throw new Error(result.message || "Error al crear");
-        
+
         setTeachers((prev) => [...prev, result.data]);
       }
       setShowModal(false);
@@ -166,12 +176,15 @@ export default function Teachers() {
   const handleDelete = async (id) => {
     if (window.confirm("¿Estás seguro de que deseas eliminar este docente?")) {
       try {
-        const response = await fetch(`https://ontimeclock.onrender.com/api/teachers/${id}`, {
-          method: "DELETE",
-        });
-        
+        const response = await fetch(
+          `https://ontimeclock.onrender.com/api/teachers/${id}`,
+          {
+            method: "DELETE",
+          },
+        );
+
         if (!response.ok) throw new Error("Error al eliminar");
-        
+
         setTeachers((prev) => prev.filter((t) => t.id !== id));
       } catch (error) {
         console.error("Error al eliminar:", error);
@@ -562,8 +575,12 @@ export default function Teachers() {
                 </tr>
               ) : (
                 filtered.map((t, idx) => {
-                  const sc = statusConfig[t.status] || statusConfig.Activo;
-                  const ac = avatarColors[t.id % avatarColors.length];
+                  const normalizedStatus =
+                    t.status?.charAt(0).toUpperCase() + t.status?.slice(1);
+
+                  const sc =
+                    statusConfig[normalizedStatus] || statusConfig.Activo;
+                  const ac = avatarColors[(t.id || 0) % avatarColors.length];
                   return (
                     <tr
                       key={t.id}
@@ -689,7 +706,9 @@ export default function Teachers() {
                           whiteSpace: "nowrap",
                         }}
                       >
-                        {new Date(t.joined).toISOString().split("T")[0]}
+                        {t.created_at
+                          ? new Date(t.created_at).toLocaleDateString()
+                          : "—"}
                       </td>
                       {/* Actions */}
                       <td style={{ padding: "13px 16px" }}>
@@ -947,7 +966,13 @@ export default function Teachers() {
             </div>
 
             {/* Modal body */}
-            <div style={{ padding: "24px 28px", overflowY: "auto", maxHeight: "calc(90vh - 160px)" }}>
+            <div
+              style={{
+                padding: "24px 28px",
+                overflowY: "auto",
+                maxHeight: "calc(90vh - 160px)",
+              }}
+            >
               {modalMode === "view" && selectedTeacher ? (
                 <div>
                   {/* Avatar grande */}
@@ -1024,7 +1049,11 @@ export default function Teachers() {
                   {/* ID y Matrícula en fila */}
                   <div style={{ marginBottom: 14 }}>
                     {[
-                      { icon: "🎓", label: "Matrícula", val: selectedTeacher.matricula || "—" },
+                      {
+                        icon: "🎓",
+                        label: "Matrícula",
+                        val: selectedTeacher.matricula || "—",
+                      },
                     ].map((item, i) => (
                       <div
                         key={i}
@@ -1069,10 +1098,30 @@ export default function Teachers() {
                     }}
                   >
                     {[
-                      { icon: "📚", label: "Materia", val: selectedTeacher.subject },
-                      { icon: "📧", label: "Correo", val: selectedTeacher.email },
-                      { icon: "📞", label: "Teléfono", val: selectedTeacher.phone },
-                      { icon: "📅", label: "Fecha de Ingreso", val: selectedTeacher.joined },
+                      {
+                        icon: "📚",
+                        label: "Materia",
+                        val: selectedTeacher.subject,
+                      },
+                      {
+                        icon: "📧",
+                        label: "Correo",
+                        val: selectedTeacher.email,
+                      },
+                      {
+                        icon: "📞",
+                        label: "Teléfono",
+                        val: selectedTeacher.phone,
+                      },
+                      {
+                        icon: "📅",
+                        label: "Fecha de Ingreso",
+                        val: selectedTeacher.created_at
+                          ? new Date(
+                              selectedTeacher.created_at,
+                            ).toLocaleDateString()
+                          : "—",
+                      },
                     ].map((item, i) => (
                       <div
                         key={i}