512 lines
26 KiB
Plaintext
Executable File
512 lines
26 KiB
Plaintext
Executable File
layout
|
|
________
|
|
|
|
"use client";
|
|
|
|
import { Geist, Geist_Mono } from "next/font/google";
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
|
import { useState } from "react";
|
|
import {
|
|
Menu, MenuRight, Grid, School, Buildings, Book, Group, SwapHorizontal, DoorOpen
|
|
} from "@boxicons/react";
|
|
|
|
const geistSans = Geist({
|
|
variable: "--font-geist-sans",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: "--font-geist-mono",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
const [open, setOpen] = useState(true);
|
|
|
|
return (
|
|
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
|
|
<body className="d-flex m-0 vh-100" style={{ fontFamily: "system-ui, sans-serif" }}>
|
|
<div
|
|
className={`sidebar d-flex flex-column flex-shrink-0 ${open ? "open" : ""}`}
|
|
style={{
|
|
width: open ? 220 : 60,
|
|
background: "#3C3B6E",
|
|
transition: "width 0.3s ease",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div className="logo-details d-flex align-items-center justify-content-between p-3" style={{ height: 60, whiteSpace: "nowrap" }}>
|
|
{open && <div className="logo_name fw-bold fs-4 text-white">SAM</div>}
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="btn border-0 text-white p-0 d-flex align-items-center"
|
|
style={{ background: "none", fontSize: 24 }}
|
|
>
|
|
{open ? <MenuRight width={24} height={24} /> : <Menu width={24} height={24} />}
|
|
</button>
|
|
</div>
|
|
|
|
<ul className="nav-list list-unstyled m-0 flex-grow-1 d-flex flex-column px-0 py-2">
|
|
<li className="position-relative">
|
|
<a href="/" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Grid width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Dashboard</span>
|
|
</a>
|
|
<span className="tooltip badge rounded-pill bg-dark" style={{ display: open ? "none" : "block", position: "absolute", left: 65, top: 12, zIndex: 10, whiteSpace: "nowrap" }}>Dashboard</span>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/academico" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<School width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Academico</span>
|
|
</a>
|
|
<span className="tooltip badge rounded-pill bg-dark" style={{ display: open ? "none" : "block", position: "absolute", left: 65, top: 12, zIndex: 10, whiteSpace: "nowrap" }}>Academico</span>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/empresas" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Buildings width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Gestion Empresas</span>
|
|
</a>
|
|
<span className="tooltip badge rounded-pill bg-dark" style={{ display: open ? "none" : "block", position: "absolute", left: 65, top: 12, zIndex: 10, whiteSpace: "nowrap" }}>Gestion Empresas</span>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/cursos" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Book width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Curso</span>
|
|
</a>
|
|
<span className="tooltip badge rounded-pill bg-dark" style={{ display: open ? "none" : "block", position: "absolute", left: 65, top: 12, zIndex: 10, whiteSpace: "nowrap" }}>Curso</span>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/secretaria" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Group width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Secretaría</span>
|
|
</a>
|
|
<span className="tooltip badge rounded-pill bg-dark" style={{ display: open ? "none" : "block", position: "absolute", left: 65, top: 12, zIndex: 10, whiteSpace: "nowrap" }}>Secretaría</span>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="https://sam.norteamericano.cl/academico/index.aspx" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<SwapHorizontal width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Plan Central</span>
|
|
</a>
|
|
<span className="tooltip badge rounded-pill bg-dark" style={{ display: open ? "none" : "block", position: "absolute", left: 65, top: 12, zIndex: 10, whiteSpace: "nowrap" }}>Plan Central</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="profile border-top" style={{ borderColor: "rgba(255,255,255,0.2)" }}>
|
|
<div className="profile-details d-flex align-items-center justify-content-between p-3" style={{ whiteSpace: "nowrap" }}>
|
|
{open && (
|
|
<div className="name_job text-white" style={{ fontSize: 13, lineHeight: 1.3 }}>
|
|
<div className="name fw-bold" style={{ fontSize: 14 }}>Usuario</div>
|
|
<div className="job" style={{ opacity: 0.8 }}>Sede</div>
|
|
</div>
|
|
)}
|
|
<a href="/logout" className="text-white text-decoration-none d-flex align-items-center" style={{ flexShrink: 0 }}>
|
|
<DoorOpen width={20} height={20} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section className="home-section flex-grow-1 overflow-auto bg-light">
|
|
<main className="container-fluid p-3">{children}</main>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
_________
|
|
|
|
page
|
|
________
|
|
|
|
'use client'
|
|
import { useState, useEffect } from "react"; // 1. Agregado useEffect
|
|
import {
|
|
Sun,Moon
|
|
} from "@boxicons/react";
|
|
export default function Home() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
useEffect(() => {
|
|
return setLoading(false);
|
|
}, []);
|
|
|
|
|
|
const alumnos = [
|
|
{ id: 101, tipo: "Regular", curso: "Inglés Básico Intensivo", profesor: "John Doe", sede: "Sede Central", sala: "Sala A", horario: "09:00 / 10:30", inicio: "09:00", inicioBadge: "bg-warning text-dark", termino: "10:30", sesion: "En proceso", sesionBadge: "bg-light text-dark" },
|
|
{ id: 102, tipo: "Intensivo", curso: "Francés Avanzado", profesor: "Maria Perez", sede: "Sede Norte", sala: "Sala B", horario: "10:30 / 12:00", inicio: "10:30", inicioBadge: "bg-success text-white", termino: "12:00", sesion: "Completada", sesionBadge: "bg-success text-white" },
|
|
{ id: 103, tipo: "Regular", curso: "Alemán Intermedio", profesor: "Carlos López", sede: "Sede Sur", sala: "Sala C", horario: "14:00 / 15:30", inicio: "14:00", inicioBadge: "bg-warning text-dark", termino: "15:30", sesion: "En proceso", sesionBadge: "bg-light text-dark" },
|
|
{ id: 104, tipo: "Intensivo", curso: "Inglés Avanzado", profesor: "Ana Torres", sede: "Sede Central", sala: "Sala A", horario: "16:00 / 17:30", inicio: "16:00", inicioBadge: "bg-danger text-white", termino: "17:30", sesion: "Pendiente", sesionBadge: "bg-danger text-white" },
|
|
{ id: 105, tipo: "Regular", curso: "Japonés Básico", profesor: "Takashi Tanaka", sede: "Sede Norte", sala: "Sala D", horario: "18:00 / 19:30", inicio: "18:00", inicioBadge: "bg-warning text-dark", termino: "19:30", sesion: "En proceso", sesionBadge: "bg-light text-dark" },
|
|
];
|
|
|
|
|
|
if (loading) return <div className="text-center py-5">Cargando...</div>;
|
|
if (error) return <div className="alert alert-danger my-3">{error}</div>;
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-md-12 mx-auto">
|
|
<div className="row">
|
|
|
|
{/* <!-- Buscador y Filtros --> */}
|
|
<div className="col-md-12">
|
|
<div className="alert alert-light text-dark" role="alert">
|
|
{/* CORREGIDO: margin-bottom cambiado a marginBottom */}
|
|
<div className="row" style={{ marginBottom: '-10px' }}>
|
|
<div className="col-12">
|
|
<div className="row">
|
|
<div className="col-md-4 mt-2">
|
|
<h1><i className="bx bx-time me-1 float-start"></i></h1>
|
|
<strong>Mostrando cursos del día</strong>
|
|
</div>
|
|
<div className="col-md-8"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-md-6">
|
|
<div className="row">
|
|
<div className="col-md-4 mt-2">
|
|
<input type="date" id="TextBoxFecha" className="form-control" />
|
|
</div>
|
|
<div className="col-md-4 mt-2">
|
|
<select id="ListaSedes" className="form-control">
|
|
<option value="">Seleccione Sede</option>
|
|
<option value="">TODAS</option>
|
|
<option value="">MONEDA</option>
|
|
<option value="">PROVIDENCIA</option>
|
|
<option value="">LA FLORIDA</option>
|
|
<option value="">ONLINE</option>
|
|
<option value="">EMPRESAS</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-4 mt-2 d-grid gap-2">
|
|
<button type="button" id="ButtonSearchMod" className="btn btn-primary">Buscar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-md-6">
|
|
<div className="row">
|
|
<div className="col-md-6 d-grid">
|
|
<button type="button" id="LinkButtonJornada01" className="alert-link text-decoration-none btn p-0 text-start">
|
|
<div className="alert alert-light text-dark mb-4" id="div_jornada_01" role="alert">
|
|
<div className="mb-4">
|
|
<h3 className="float-start me-1"><Sun /></h3>
|
|
<h5 className="float-start">
|
|
<strong><span id="LabelNombreJornada">Diurno</span></strong>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div className="col-md-6 d-grid">
|
|
<button type="button" id="LinkButtonJornada02" className="alert-link text-decoration-none btn p-0 text-start">
|
|
<div className="alert alert-secondary text-dark mb-4" id="div_jornada_02" role="alert">
|
|
<div className="mb-4">
|
|
<h3 className="float-start me-1"><Moon /></h3>
|
|
<h5 className="float-start">
|
|
<strong><span id="LabelNombreJornada02">Vespertino</span></strong>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <!-- Tarjetas de Contadores / Indicadores --> */}
|
|
<div className="col-md-12">
|
|
<div className="row">
|
|
<div className="col-md-2" id="Div1">
|
|
<div className="alert alert-light text-dark" role="alert">
|
|
<div className="row">
|
|
<div className="col-md-3 text-center">
|
|
<h1><i className="bx bxs-buildings"></i></h1>
|
|
<span className="fw-bold"><strong>Empresas</strong></span>
|
|
</div>
|
|
<div className="col text-center mt-3">
|
|
<span className="text-muted"><strong>Total</strong></span>
|
|
<h5><strong><span id="LabelEmpTotal">0 %</span></strong></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-md-2" id="promedio_cursos">
|
|
<div className="alert alert-light text-dark" role="alert">
|
|
<div className="row">
|
|
<div className="col-md-3 text-center">
|
|
<h1><i className="bx bxs-book"></i></h1>
|
|
<span className="fw-bold"><strong>Cursos</strong></span>
|
|
</div>
|
|
<div className="col text-center mt-3">
|
|
<span className="text-muted"><strong>Total</strong></span>
|
|
<h5><strong><span id="LabelCursosTotal">0 %</span></strong></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-md-6" id="promedio_alumnos">
|
|
<div className="alert alert-light text-dark" role="alert">
|
|
<div className="row">
|
|
<div className="col-md-3 text-center">
|
|
<h1><i className="bx bxs-user-circle"></i></h1>
|
|
<span className="fw-bold"><strong>Alumnos</strong></span>
|
|
</div>
|
|
<div className="col-md-9 text-center mt-3">
|
|
<div className="row">
|
|
<div className="col-md-4 text-center">
|
|
<span className="text-muted"><strong>Con SENCE</strong></span>
|
|
<h5><strong><span id="LabelAlmConSNC">0</span></strong></h5>
|
|
</div>
|
|
<div className="col-md-4 text-center">
|
|
<span className="text-muted"><strong>Sin SENCE</strong></span>
|
|
<h5><strong><span id="LabelAlmSinSNC">0</span></strong></h5>
|
|
</div>
|
|
<div className="col-md-4 text-center">
|
|
<span className="text-muted"><strong>Total</strong></span>
|
|
<h5><strong><span id="LabelAlumnosTotal">0</span></strong></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-md-2 mt-2" id="excel_primary">
|
|
<button type="button" id="LinkButtonExcel" className="text-decoration-none btn p-0 text-start w-100">
|
|
<div className="alert alert-success" role="alert">
|
|
<div className="row">
|
|
<div className="col-md-3">
|
|
<h1><i className="bx bx-export"></i></h1>
|
|
</div>
|
|
<div className="col text-center">
|
|
<span className="text-muted"><strong>Excel</strong></span>
|
|
<h5><strong><span id="Label1">Exportar</span></strong></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Listado de alumnos*/}
|
|
<div className="col-md-12">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="alert alert-light text-dark" role="alert">
|
|
|
|
<div className="table-responsive" id="listado_cursos_dia">
|
|
<table className="table table-sm mb-0" style={{ fontSize: '12px' }}>
|
|
<thead>
|
|
<tr>
|
|
{/* CORREGIDO: Anchos de columnas pasados a objetos style */}
|
|
<th className="text-center" scope="col" style={{ width: '5%' }}>ID</th>
|
|
<th className="text-center" scope="col" style={{ width: '5%' }}>Tipo</th>
|
|
<th scope="col" style={{ width: '20%' }}>Curso</th>
|
|
<th scope="col" style={{ width: '19%' }}>Profesor</th>
|
|
<th className="text-center" scope="col" style={{ width: '7%' }}>Sede</th>
|
|
<th className="text-center" scope="col" style={{ width: '7%' }}>Sala</th>
|
|
<th className="text-center" scope="col" style={{ width: '14%' }}>Horario</th>
|
|
<th className="text-center" scope="col" style={{ width: '7%' }}>Inicio</th>
|
|
<th className="text-center" scope="col" style={{ width: '7%' }}>Termino</th>
|
|
<th className="text-center" scope="col" style={{ width: '7%' }}>Sesion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{alumnos.map((a) => (
|
|
<tr key={a.id}>
|
|
<td className="text-center">{a.id}</td>
|
|
<td className="text-center">{a.tipo}</td>
|
|
<td className="text-start">{a.curso}</td>
|
|
<td className="text-start">{a.profesor}</td>
|
|
<td className="text-center">{a.sede}</td>
|
|
<td className="text-center">{a.sala}</td>
|
|
<td className="text-center">{a.horario}</td>
|
|
<td className="text-center">
|
|
<span className={`badge rounded-pill ${a.inicioBadge}`}>{a.inicio}</span>
|
|
</td>
|
|
<td className="text-center">{a.termino}</td>
|
|
<td className="text-center">
|
|
<span className={`badge rounded-pill ${a.sesionBadge}`}>{a.sesion}</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Vista alternativa: Sin clases */}
|
|
<div className="text-center d-none" id="listado_cursos_no_clases">
|
|
<div className="row">
|
|
<div className="col-md-3"></div>
|
|
<div className="col-md-6 text-center">
|
|
<div className="alert alert-light text-dark" role="alert">
|
|
{/* CORREGIDO: style cambiado a objeto */}
|
|
<strong><i className="bx bx-error text-primary" style={{ fontSize: '90px' }}></i></strong>
|
|
<br /><br />
|
|
<h5><strong>Jornada sin clases</strong></h5>
|
|
<hr />
|
|
<strong className="text-muted">Si cree que esto es un error, contáctenos. <a target="_blank" rel="noopener noreferrer" href="https://norteamericano.freshdesk.com/support/tickets/new">Generar Ticket</a></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
}
|
|
|
|
________
|
|
layout v2
|
|
_________
|
|
|
|
"use client";
|
|
|
|
import { Geist, Geist_Mono } from "next/font/google";
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Menu, MenuRight, Grid, School, Buildings, Book, Group, SwapHorizontal, DoorOpen, Sun, Moon
|
|
} from "@boxicons/react";
|
|
|
|
const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
|
|
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
|
|
|
|
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
|
const [open, setOpen] = useState(true);
|
|
const [theme, setTheme] = useState<"light" | "dark">("light");
|
|
|
|
// Cargar tema guardado o preferencia del sistema al iniciar
|
|
useEffect(() => {
|
|
const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null;
|
|
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
const currentTheme = savedTheme || (systemDark ? "dark" : "light");
|
|
|
|
setTheme(currentTheme);
|
|
document.documentElement.setAttribute("data-bs-theme", currentTheme);
|
|
}, []);
|
|
|
|
// Alternar entre Claro y Oscuro
|
|
const toggleTheme = () => {
|
|
const newTheme = theme === "light" ? "dark" : "light";
|
|
setTheme(newTheme);
|
|
document.documentElement.setAttribute("data-bs-theme", newTheme);
|
|
localStorage.setItem("theme", newTheme);
|
|
};
|
|
|
|
return (
|
|
<html lang="es" className={`${geistSans.variable} ${geistMono.variable}`} data-bs-theme={theme}>
|
|
<body className="d-flex m-0 vh-100" style={{ fontFamily: "system-ui, sans-serif" }}>
|
|
<div
|
|
className={`sidebar d-flex flex-column flex-shrink-0 ${open ? "open" : ""}`}
|
|
style={{
|
|
width: open ? 220 : 60,
|
|
background: "#3C3B6E",
|
|
transition: "width 0.3s ease",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div className="logo-details d-flex align-items-center justify-content-between p-3" style={{ height: 60, whiteSpace: "nowrap" }}>
|
|
{open && <div className="logo_name fw-bold fs-4 text-white">SAM</div>}
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="btn border-0 text-white p-0 d-flex align-items-center"
|
|
style={{ background: "none", fontSize: 24 }}
|
|
>
|
|
{open ? <MenuRight width={24} height={24} /> : <Menu width={24} height={24} />}
|
|
</button>
|
|
</div>
|
|
|
|
<ul className="nav-list list-unstyled m-0 flex-grow-1 d-flex flex-column px-0 py-2">
|
|
<li className="position-relative">
|
|
<a href="/" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Grid width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/academico" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<School width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Academico</span>
|
|
</a>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/empresas" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Buildings width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Gestion Empresas</span>
|
|
</a>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/cursos" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Book width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Curso</span>
|
|
</a>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="/secretaria" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<Group width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Secretaría</span>
|
|
</a>
|
|
</li>
|
|
<li className="position-relative">
|
|
<a href="https://sam.norteamericano.cl/academico/index.aspx" className="text-white text-decoration-none d-flex align-items-center gap-3 py-2 px-3" style={{ whiteSpace: "nowrap", minHeight: 48 }}>
|
|
<SwapHorizontal width={22} height={22} style={{ flexShrink: 0 }} />
|
|
<span className="links_name" style={{ display: open ? "inline" : "none" }}>Plan Central</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Botón para cambiar tema */}
|
|
<div className="px-2 py-2 border-top" style={{ borderColor: "rgba(255,255,255,0.2)" }}>
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="btn text-white d-flex align-items-center gap-3 w-100 py-2 px-2 border-0"
|
|
style={{ background: "rgba(255,255,255,0.1)", borderRadius: 6, whiteSpace: "nowrap" }}
|
|
title="Cambiar tema"
|
|
>
|
|
{theme === "light" ? <Moon width={20} height={20} /> : <Sun width={20} height={20} />}
|
|
{open && <span>{theme === "light" ? "Modo Oscuro" : "Modo Claro"}</span>}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="profile border-top" style={{ borderColor: "rgba(255,255,255,0.2)" }}>
|
|
<div className="profile-details d-flex align-items-center justify-content-between p-3" style={{ whiteSpace: "nowrap" }}>
|
|
{open && (
|
|
<div className="name_job text-white" style={{ fontSize: 13, lineHeight: 1.3 }}>
|
|
<div className="name fw-bold" style={{ fontSize: 14 }}>Usuario</div>
|
|
<div className="job" style={{ opacity: 0.8 }}>Sede</div>
|
|
</div>
|
|
)}
|
|
<a href="/logout" className="text-white text-decoration-none d-flex align-items-center" style={{ flexShrink: 0 }}>
|
|
<DoorOpen width={20} height={20} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section className="home-section flex-grow-1 overflow-auto bg-body-tertiary">
|
|
<main className="container-fluid p-3">{children}</main>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|