Arreglo de node_modules
This commit is contained in:
Fimm committed
commit
eed3b45de3
40 files changed
+13127
No files matched your search
Executable
+643
@@ -0,0 +1,643 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
// Transfer,
|
||||
// Error as ErrorIcon,
|
||||
Buildings,
|
||||
// PhoneCall,
|
||||
Envelope,
|
||||
// CurrentLocation,
|
||||
// FilePdf,
|
||||
UserCircle
|
||||
} from "@boxicons/react";
|
||||
|
||||
// interfaces para TypeScript
|
||||
interface ContratoPendiente {
|
||||
idLeadEmpresas: string;
|
||||
cotizacion: string;
|
||||
contrato: string;
|
||||
tipoVenta: string;
|
||||
tipoContrato: string;
|
||||
idEmpresas: string;
|
||||
empresa: string;
|
||||
fechaFirmado: string;
|
||||
ejecutivoID: string;
|
||||
Responsable: string;
|
||||
}
|
||||
|
||||
interface ContratoDetalleItem {
|
||||
Url: string;
|
||||
Contrato: string;
|
||||
FirmaEstado: number;
|
||||
CURSO_ID: string;
|
||||
CURSO: string;
|
||||
JORNADA: string;
|
||||
DIREMP: string;
|
||||
Fecha: string;
|
||||
Valor: string;
|
||||
}
|
||||
|
||||
interface OCItem {
|
||||
Detalle: string;
|
||||
NumeroInterno: string;
|
||||
FechaSubidaPago: string;
|
||||
TipoDocumento: string;
|
||||
}
|
||||
|
||||
interface SNCItem {
|
||||
Detalle: string;
|
||||
codInscripcion: string;
|
||||
FechaSubida: string;
|
||||
}
|
||||
|
||||
export default function NegociosPorAprobarPage() {
|
||||
// --- ESTADOS DE VISTAS ---
|
||||
const [divSelectOk, setDivSelectOk] = useState(true);
|
||||
const [divGestion, setDivGestion] = useState(false);
|
||||
const [divGestionMotivo, setDivGestionMotivo] = useState(false);
|
||||
const [divInfo, setDivInfo] = useState(false);
|
||||
const [divDetalleContratos, setDivDetalleContratos] = useState(false);
|
||||
|
||||
// --- ESTADOS DE GESTIÓN Y SELECCIÓN ---
|
||||
const [estadoGestion, setEstadoGestion] = useState("");
|
||||
const [motivoRechazo, setMotivoRechazo] = useState("");
|
||||
const [empresaSeleccionada, setEmpresaSeleccionada] = useState<{
|
||||
nombre: string;
|
||||
id: string;
|
||||
ejecutivo: string;
|
||||
telefono: string;
|
||||
mail: string;
|
||||
direccion: string;
|
||||
comuna: string;
|
||||
}>({
|
||||
nombre: "",
|
||||
id: "",
|
||||
ejecutivo: "",
|
||||
telefono: "",
|
||||
mail: "",
|
||||
direccion: "",
|
||||
comuna: ""
|
||||
});
|
||||
|
||||
// --- MODALES (LOADING, ALERTA, ALUMNOS) ---
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [modalAlerta, setModalAlerta] = useState({ show: false, message: "" });
|
||||
const [showModalAlumnos, setShowModalAlumnos] = useState(false);
|
||||
const [alumnosList, setAlumnosList] = useState<any[]>([]);
|
||||
|
||||
// --- DATOS SIMULADOS (Reemplazan a los DataLists de ASP.NET) ---
|
||||
const [listaPendientes, setListaPendientes] = useState<ContratoPendiente[]>([
|
||||
{
|
||||
idLeadEmpresas: "101",
|
||||
cotizacion: "COT-2026-01",
|
||||
contrato: "CNT-8854",
|
||||
tipoVenta: "Directa",
|
||||
tipoContrato: "Anual",
|
||||
idEmpresas: "EMP-99",
|
||||
empresa: "Empresa Ejemplo S.A.",
|
||||
fechaFirmado: "2026-02-15",
|
||||
ejecutivoID: "EJ-01",
|
||||
Responsable: "Carlos Mendoza"
|
||||
}
|
||||
]);
|
||||
|
||||
const [listaContratosDetalle, setListaContratosDetalle] = useState<ContratoDetalleItem[]>([
|
||||
{
|
||||
Url: "https://sam.norteamericano.cl/documentos/contrato.pdf",
|
||||
Contrato: "CNT-8854",
|
||||
FirmaEstado: 1,
|
||||
CURSO_ID: "ING-01",
|
||||
CURSO: "Inglés Corporativo",
|
||||
JORNADA: "Mañana",
|
||||
DIREMP: "Av. Providencia 1234",
|
||||
Fecha: "01/03/2026",
|
||||
Valor: "$1.500.000"
|
||||
}
|
||||
]);
|
||||
|
||||
const [listaOC, setListaOC] = useState<OCItem[]>([
|
||||
{
|
||||
Detalle: "oc_8854.pdf",
|
||||
NumeroInterno: "OC-4412",
|
||||
FechaSubidaPago: "2026-02-16",
|
||||
TipoDocumento: "Orden de Compra"
|
||||
}
|
||||
]);
|
||||
const [mnsjNoOC, setMnsjNoOC] = useState("");
|
||||
|
||||
const [listaSNC, setListaSNC] = useState<SNCItem[]>([
|
||||
{
|
||||
Detalle: "sence_8854.pdf",
|
||||
codInscripcion: "SNC-1200938",
|
||||
FechaSubida: "2026-02-17"
|
||||
}
|
||||
]);
|
||||
const [mnsjNoSNC, setMnsjNoSNC] = useState("");
|
||||
|
||||
// --- MANEJADORES DE EVENTOS ---
|
||||
const handleVerItem = (item: ContratoPendiente) => {
|
||||
setEmpresaSeleccionada({
|
||||
nombre: item.empresa,
|
||||
id: item.idEmpresas,
|
||||
ejecutivo: item.Responsable,
|
||||
telefono: "+56 9 1234 5678",
|
||||
mail: "contacto@empresa.cl",
|
||||
direccion: "Av. Providencia 1234",
|
||||
comuna: "Providencia"
|
||||
});
|
||||
setDivGestion(true);
|
||||
setDivSelectOk(false);
|
||||
setDivInfo(true);
|
||||
setDivDetalleContratos(true);
|
||||
};
|
||||
|
||||
const handleListaGestionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const val = e.target.value;
|
||||
setEstadoGestion(val);
|
||||
if (val === "Rechazado") {
|
||||
setDivGestionMotivo(true);
|
||||
} else {
|
||||
setDivGestionMotivo(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmarGestion = () => {
|
||||
if (!estadoGestion) {
|
||||
setModalAlerta({ show: true, message: "Seleccione un estado de gestión." });
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setModalAlerta({ show: true, message: "Gestión procesada con éxito." });
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
const handleVerParticipantes = (contratoId: string) => {
|
||||
setAlumnosList([
|
||||
{ RUT: "11.111.111-1", Nombre: "Juan Pérez", Email: "juan@empresa.cl" },
|
||||
{ RUT: "22.222.222-2", Nombre: "María López", Email: "maria@empresa.cl" }
|
||||
]);
|
||||
setShowModalAlumnos(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container-fluid py-3">
|
||||
<div className="row">
|
||||
{/* BARRA SUPERIOR */}
|
||||
<div className="col-md-12">
|
||||
<div className="alert alert-light text-dark shadow" role="alert">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-10">
|
||||
<strong className="text-muted">Negocios por aprobar</strong>
|
||||
</div>
|
||||
<div className="col-md-2 text-end">
|
||||
<Link href="/Clientes/Index" className="btn btn-danger btn-sm">
|
||||
{/* <Transfer className="me-1" /> */}
|
||||
Volver
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLA O MENSAJE DE NEGOCIOS POR APROBAR */}
|
||||
<div className="col-md-12" id="div_select">
|
||||
{divSelectOk && (
|
||||
<div className="alert alert-light text-dark shadow" id="div_select_ok">
|
||||
<div className="table-responsive">
|
||||
{listaPendientes.length > 0 ? (
|
||||
<table className="table table-sm mb-0" style={{ fontSize: "13px" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start" style={{ width: "3%" }}></th>
|
||||
<th className="text-start" style={{ width: "5%" }}>Contrato</th>
|
||||
<th className="text-start" style={{ width: "7%" }}>Tipo Venta</th>
|
||||
<th className="text-start" style={{ width: "7%" }}>Tipo Contrato</th>
|
||||
<th className="text-start" style={{ width: "30%" }}>Empresa</th>
|
||||
<th className="text-start" style={{ width: "7%" }}>Fecha de Subida</th>
|
||||
<th className="text-center" style={{ width: "11%" }}>Ejecutivo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{listaPendientes.map((item, idx) => (
|
||||
<tr key={idx}>
|
||||
<td className="text-center" style={{ width: "3%" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0 text-decoration-none"
|
||||
onClick={() => handleVerItem(item)}
|
||||
>
|
||||
<span className="badge bg-primary" style={{ fontWeight: "normal" }}>
|
||||
Ver
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
<td className="text-start" style={{ width: "5%" }}>{item.contrato}</td>
|
||||
<td className="text-start" style={{ width: "7%" }}>{item.tipoVenta}</td>
|
||||
<td className="text-start" style={{ width: "7%" }}>{item.tipoContrato}</td>
|
||||
<td className="text-start" style={{ width: "30%" }}>{item.empresa}</td>
|
||||
<td className="text-start" style={{ width: "7%" }}>{item.fechaFirmado}</td>
|
||||
<td className="text-center" style={{ width: "11%" }}>{item.Responsable}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div className="alert alert-light text-dark" id="div_select_error">
|
||||
<div className="row">
|
||||
<div className="col-md-3"></div>
|
||||
<div className="col-md-6 text-center">
|
||||
<div className="alert alert-light text-dark mt-5" role="alert">
|
||||
<strong>
|
||||
{/* <ErrorIcon className="text-primary" style={{ fontSize: "90px" }} /> */}
|
||||
</strong>
|
||||
<br />
|
||||
<br />
|
||||
<h5>
|
||||
<strong>No existen contratos pendientes por autorizar.</strong>
|
||||
</h5>
|
||||
<hr />
|
||||
<strong className="text-muted">
|
||||
Si cree que esto es un error, contáctenos.{" "}
|
||||
<a target="_blank" href="https://norteamericano.freshdesk.com/support/tickets/new" rel="noreferrer">
|
||||
Generar Ticket
|
||||
</a>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* PANEL DE GESTIÓN (APROBAR/RECHAZAR) */}
|
||||
{divGestion && (
|
||||
<div className="col-md-12" id="div_gestion">
|
||||
<div className="alert alert-light text-dark shadow" role="alert">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-4 text-end">
|
||||
<h4 className="mb-0">Estado: </h4>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<select
|
||||
className="form-select"
|
||||
value={estadoGestion}
|
||||
onChange={handleListaGestionChange}
|
||||
>
|
||||
<option value="">-- Seleccionar --</option>
|
||||
<option value="Aprobado">Aprobar</option>
|
||||
<option value="Rechazado">Rechazar</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleConfirmarGestion}
|
||||
>
|
||||
Confirmar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{divGestionMotivo && (
|
||||
<div className="row mt-2" id="div_gestion_motivo">
|
||||
<div className="col-md-4 text-end">
|
||||
<h4>
|
||||
<strong>Motivo</strong>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-md-8">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={motivoRechazo}
|
||||
onChange={(e) => setMotivoRechazo(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PANEL LATERAL DE INFORMACIÓN DE EMPRESA */}
|
||||
{divInfo && (
|
||||
<div className="col-md-3" id="div_info">
|
||||
<div className="alert alert-light text-dark shadow" role="alert">
|
||||
<table className="table table-sm table-borderless mb-0 text-center">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<Buildings className="text-primary border rounded p-1 mb-2" style={{ fontSize: "50px" }} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<span className="fs-5">{empresaSeleccionada.nombre}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<strong><span className="fs-5">{empresaSeleccionada.id}</span></strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-end">
|
||||
<strong>Ejecutivo: </strong>
|
||||
</td>
|
||||
<td className="text-start">{empresaSeleccionada.ejecutivo}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="alert alert-light text-dark shadow" role="alert">
|
||||
<div className="table-responsive">
|
||||
<table className="table table-sm table-borderless mb-0" style={{ fontSize: "14px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<span className="text-dark" style={{ fontSize: "18px" }}>
|
||||
Contacto
|
||||
</span>
|
||||
<hr />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ width: "25px" }}>
|
||||
{/* <PhoneCall /> */}
|
||||
</td>
|
||||
<td>{empresaSeleccionada.telefono}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ width: "25px" }}><Envelope /></td>
|
||||
<td>{empresaSeleccionada.mail}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ width: "25px" }}>
|
||||
{/* <CurrentLocation /> */}
|
||||
</td>
|
||||
<td>{empresaSeleccionada.direccion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ width: "25px" }}>
|
||||
{/* <CurrentLocation /> */}
|
||||
</td>
|
||||
<td>{empresaSeleccionada.comuna}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PANEL DERECHO DE DETALLES DE CONTRATOS, OC Y SENCE */}
|
||||
{divDetalleContratos && (
|
||||
<div className="col-md-9" id="div_detalle_contratos">
|
||||
<div className="row">
|
||||
{/* LISTADO DE CONTRATOS */}
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="alert alert-light shadow">
|
||||
<table className="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-center" style={{ width: "5%" }}>Ver contrato</th>
|
||||
<th className="text-center" style={{ width: "10%" }}>Contrato</th>
|
||||
<th className="text-center" style={{ width: "10%" }}>Estado</th>
|
||||
<th className="text-center" style={{ width: "20%" }}>Curso</th>
|
||||
<th className="text-center" style={{ width: "5%" }}>Participantes</th>
|
||||
<th className="text-center" style={{ width: "15%" }}>Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{listaContratosDetalle.map((item, idx) => (
|
||||
<tr key={idx}>
|
||||
<td className="text-center" style={{ width: "5%" }}>
|
||||
<a target="_blank" href={item.Url} className="btn btn-primary btn-sm" rel="noreferrer">
|
||||
{/* <FilePdf /> */}
|
||||
</a>
|
||||
</td>
|
||||
<th className="text-center" style={{ width: "10%" }}>{item.Contrato}</th>
|
||||
<th className="text-center mx-auto" style={{ width: "10%" }}>
|
||||
{item.FirmaEstado === 1 ? "CONTRATO FIRMADO" : "CONTRATO SIN FIRMAR"}
|
||||
</th>
|
||||
<td className="text-center" style={{ width: "20%" }}>
|
||||
{`${item.CURSO_ID} ${item.CURSO} x${item.JORNADA} ${item.DIREMP} ${item.Fecha}`}
|
||||
</td>
|
||||
<td className="text-center" style={{ width: "5%" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0 text-decoration-none d-inline-flex align-items-center gap-1"
|
||||
onClick={() => handleVerParticipantes(item.Contrato)}
|
||||
>
|
||||
<UserCircle /> Ver Participantes
|
||||
</button>
|
||||
</td>
|
||||
<td className="text-center" style={{ width: "15%" }}>{item.Valor}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DETALLE ORDEN DE COMPRA */}
|
||||
<div className="col-md-6" id="detalle_oc">
|
||||
<div className="alert alert-light shadow">
|
||||
<table className="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start" style={{ width: "5%" }}></th>
|
||||
<th className="text-center" style={{ width: "10%" }}>Número Interno</th>
|
||||
<th className="text-center" style={{ width: "10%" }}>Fecha de Subida</th>
|
||||
<th className="text-center" style={{ width: "15%" }}>Tipo Documento</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{listaOC.map((oc, idx) => (
|
||||
<tr key={idx}>
|
||||
<td className="text-start" style={{ width: "5%" }}>
|
||||
<a
|
||||
target="_blank"
|
||||
href={`https://sam.norteamericano.cl/documentos/Comprobante/${oc.Detalle}`}
|
||||
className="btn btn-primary btn-sm"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Ver
|
||||
</a>
|
||||
</td>
|
||||
<td className="text-center text-wrap" style={{ width: "10%" }}>{oc.NumeroInterno}</td>
|
||||
<td className="text-center" style={{ width: "10%" }}>{oc.FechaSubidaPago}</td>
|
||||
<td className="text-center" style={{ width: "15%" }}>{oc.TipoDocumento}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{mnsjNoOC && <h4 className="text-center mt-2">{mnsjNoOC}</h4>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DETALLE SENCE */}
|
||||
<div className="col-md-6" id="detalle_snc">
|
||||
<div className="alert alert-light shadow">
|
||||
<table className="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-center" style={{ width: "10%" }}></th>
|
||||
<th className="text-center" style={{ width: "40%" }}>Inscripción sence</th>
|
||||
<th className="text-center" style={{ width: "20%" }}>Fecha de subida</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{listaSNC.map((snc, idx) => (
|
||||
<tr key={idx}>
|
||||
<td className="text-center" style={{ width: "10%" }}>
|
||||
<a
|
||||
target="_blank"
|
||||
href={`https://sam.norteamericano.cl/documentos/Sence/${snc.Detalle}`}
|
||||
className="btn btn-primary btn-sm"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Ver
|
||||
</a>
|
||||
</td>
|
||||
<td className="text-center" style={{ width: "40%" }}>{snc.codInscripcion}</td>
|
||||
<td className="text-center" style={{ width: "20%" }}>{snc.FechaSubida}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{mnsjNoSNC && <h4 className="text-center mt-2">{mnsjNoSNC}</h4>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- MODAL PARTICIPANTES / ALUMNOS --- */}
|
||||
{showModalAlumnos && (
|
||||
<div className="modal fade show d-block bg-dark bg-opacity-50" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header text-white text-center" style={{ backgroundColor: "#373193" }}>
|
||||
<h5 className="modal-title">Empresas</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white"
|
||||
onClick={() => setShowModalAlumnos(false)}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<table className="table table-bordered table-hover table-sm mb-0" style={{ backgroundColor: "white", fontSize: "12px" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>RUT</th>
|
||||
<th>Nombre</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alumnosList.map((alm, index) => (
|
||||
<tr key={index}>
|
||||
<td>{alm.RUT}</td>
|
||||
<td>{alm.Nombre}</td>
|
||||
<td>{alm.Email}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => setShowModalAlumnos(false)}>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- MODAL ALERTA DE ERRORES / MENSAJES --- */}
|
||||
{modalAlerta.show && (
|
||||
<div className="modal fade show d-block bg-dark bg-opacity-50" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div className="modal-content text-dark">
|
||||
<div className="modal-header alert alert-secondary mb-0">
|
||||
<h5 className="float-start mt-2">
|
||||
<strong>Módulo Academico - Empresa</strong>
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close float-end mt-1"
|
||||
onClick={() => setModalAlerta({ show: false, message: "" })}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body alert mb-0" style={{ textAlign: "justify" }}>
|
||||
<div className="row">
|
||||
<div className="col-md-12 text-center">
|
||||
<h5>
|
||||
<strong>{modalAlerta.message}</strong>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setModalAlerta({ show: false, message: "" })}
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- MODAL CARGANDO (SPINNER) --- */}
|
||||
{isLoading && (
|
||||
<div className="modal fade show d-block bg-dark bg-opacity-50" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div className="modal-content text-dark">
|
||||
<div className="modal-header alert alert-secondary mb-0">
|
||||
<h5 className="float-start mt-2">
|
||||
<strong>Módulo Academico - Empresas</strong>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="modal-body alert mb-0" style={{ textAlign: "justify" }}>
|
||||
<div className="row">
|
||||
<div className="col-md-12 text-center">
|
||||
<h5>
|
||||
<strong>Procesando, espere un momento</strong>
|
||||
</h5>
|
||||
<div className="d-flex justify-content-center gap-1 mt-2">
|
||||
<div className="spinner-grow spinner-grow-sm text-primary" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-danger" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-primary" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-danger" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-primary" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-danger" role="status"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Executable
+535
@@ -0,0 +1,535 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
///import { FilePdf, ZoomIn } from "@boxicons/react";
|
||||
|
||||
// Interfaces para TypeScript
|
||||
interface ContratoDetalleItem {
|
||||
Url: string;
|
||||
Contrato: string;
|
||||
FirmaEstado: number;
|
||||
CURSO_ID: string;
|
||||
CURSO: string;
|
||||
JORNADA: string;
|
||||
DIREMP: string;
|
||||
Fecha: string;
|
||||
Valor: string;
|
||||
}
|
||||
|
||||
interface OCItem {
|
||||
Detalle: string;
|
||||
NumeroInterno: string;
|
||||
FechaSubidaPago: string;
|
||||
TipoDocumento: string;
|
||||
Responsable: string;
|
||||
}
|
||||
|
||||
interface SNCItem {
|
||||
Detalle: string;
|
||||
codInscripcion: string;
|
||||
FechaSubida: string;
|
||||
Responsable: string;
|
||||
}
|
||||
|
||||
export default function ContratosEmpresasPage() {
|
||||
// --- ESTADOS DE FORMULARIO DE BÚSQUEDA ---
|
||||
const [idContrato, setIdContrato] = useState("");
|
||||
const [tipoContrato, setTipoContrato] = useState("");
|
||||
|
||||
// --- ESTADOS DE SECCIONES DE DETALLES ---
|
||||
const [mostrarDetalles, setMostrarDetalles] = useState(false);
|
||||
const [estadoContratoLabel, setEstadoContratoLabel] = useState("Sin información");
|
||||
const [divDetalleContratos, setDivDetalleContratos] = useState(false);
|
||||
const [divDetalleOc, setDivDetalleOc] = useState(false);
|
||||
const [divDetalleSnc, setDivDetalleSnc] = useState(false);
|
||||
|
||||
const [observacion, setObservacion] = useState("");
|
||||
|
||||
// --- MODALES (LOADING, ALERTA, VERIFICA, ALUMNOS) ---
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [modalAlerta, setModalAlerta] = useState({ show: false, message: "" });
|
||||
const [modalVerificaAnulacion, setModalVerificaAnulacion] = useState(false);
|
||||
const [modalAlumnos, setModalAlumnos] = useState(false);
|
||||
|
||||
// --- DATOS SIMULADOS PARA LAS TABLAS ---
|
||||
const [contratosDetalleList, setContratosDetalleList] = useState<ContratoDetalleItem[]>([
|
||||
{
|
||||
Url: "https://empresas.norteamericano.cl/documento.pdf",
|
||||
Contrato: "CNT-1020",
|
||||
FirmaEstado: 1,
|
||||
CURSO_ID: "ING-01",
|
||||
CURSO: "Inglés Básico",
|
||||
JORNADA: "Tarde",
|
||||
DIREMP: "Casa Matriz",
|
||||
Fecha: "2026-01-15",
|
||||
Valor: "$450.000"
|
||||
}
|
||||
]);
|
||||
const [mnsjNoContratos, setMnsjNoContratos] = useState("");
|
||||
|
||||
const [ocDetalleList, setOcDetalleList] = useState<OCItem[]>([
|
||||
{
|
||||
Detalle: "comprobante_1020.pdf",
|
||||
NumeroInterno: "OC-5501",
|
||||
FechaSubidaPago: "2026-01-16",
|
||||
TipoDocumento: "Comprobante Pago",
|
||||
Responsable: "María González"
|
||||
}
|
||||
]);
|
||||
const [mnsjNoOC, setMnsjNoOC] = useState("");
|
||||
|
||||
const [sncDetalleList, setSncDetalleList] = useState<SNCItem[]>([
|
||||
{
|
||||
Detalle: "sence_1020.pdf",
|
||||
codInscripcion: "SNC-88412",
|
||||
FechaSubida: "2026-01-17",
|
||||
Responsable: "Pedro Ramírez"
|
||||
}
|
||||
]);
|
||||
const [mnsjNoSNC, setMnsjNoSNC] = useState("");
|
||||
|
||||
const [alumnosList, setAlumnosList] = useState<any[]>([]);
|
||||
|
||||
// --- MANEJADORES DE EVENTOS ---
|
||||
const handleMostrarClick = () => {
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setEstadoContratoLabel("Vigente");
|
||||
setMostrarDetalles(true);
|
||||
setDivDetalleContratos(true);
|
||||
setDivDetalleOc(true);
|
||||
setDivDetalleSnc(true);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleVerParticipantes = (contratoId: string) => {
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setAlumnosList([
|
||||
{ RUT: "12.345.678-9", Nombre: "Juan Pérez", Email: "juan.perez@empresa.cl" },
|
||||
{ RUT: "98.765.432-1", Nombre: "Ana Gómez", Email: "ana.gomez@empresa.cl" }
|
||||
]);
|
||||
setModalAlumnos(true);
|
||||
}, 800);
|
||||
};
|
||||
|
||||
const handleDesactivarVerifica = () => {
|
||||
if (!observacion.trim()) {
|
||||
setModalAlerta({
|
||||
show: true,
|
||||
message: "Debe ingresar el motivo de por qué se anula el contrato."
|
||||
});
|
||||
return;
|
||||
}
|
||||
setModalVerificaAnulacion(true);
|
||||
};
|
||||
|
||||
const handleConfirmarAnulacion = () => {
|
||||
setModalVerificaAnulacion(false);
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setEstadoContratoLabel("Anulado");
|
||||
setModalAlerta({
|
||||
show: true,
|
||||
message: "El contrato se ha anulado exitosamente."
|
||||
});
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container-fluid py-3">
|
||||
{/* MENÚ / BÚSQUEDA */}
|
||||
<div className="row" id="menu">
|
||||
<div className="col-md-3">
|
||||
<div className="alert alert-light text-dark shadow-sm">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<h5>
|
||||
<strong>Contratos Empresas</strong>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<div className="alert alert-light text-dark shadow-sm" role="alert">
|
||||
<div className="row align-items-center">
|
||||
<div className="col">
|
||||
<h5 className="text-end mb-0">
|
||||
<strong>Número</strong>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
value={idContrato}
|
||||
onChange={(e) => setIdContrato(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={tipoContrato}
|
||||
onChange={(e) => setTipoContrato(e.target.value)}
|
||||
>
|
||||
<option value="">-- Seleccionar --</option>
|
||||
<option value="1">Contrato Cerrado</option>
|
||||
<option value="2">Plan Central</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm w-100"
|
||||
onClick={handleMostrarClick}
|
||||
>
|
||||
Mostrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DETALLES DEL CONTRATO */}
|
||||
{mostrarDetalles && (
|
||||
<div className="row" id="detalles">
|
||||
<div className="col-md-10 mx-auto">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="row alert alert-warning mx-auto shadow-sm">
|
||||
<div className="col-md-6 text-end">
|
||||
<h3>Estado contrato:</h3>
|
||||
</div>
|
||||
<div className="col-md-6 text-start">
|
||||
<h3>{estadoContratoLabel}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
{/* TABLA DETALLE CONTRATOS */}
|
||||
{divDetalleContratos && (
|
||||
<div className="col-md-12 mb-3" id="div_detalle_contratos">
|
||||
<div className="alert alert-light shadow-sm">
|
||||
<table className="table table-sm caption-top mb-0">
|
||||
<caption className="pt-0">Contrato Empresa</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-center" style={{ width: "5%" }}>Ver contrato</th>
|
||||
<th className="text-center" style={{ width: "10%" }}>Contrato</th>
|
||||
<th className="text-center" style={{ width: "10%" }}>Estado</th>
|
||||
<th className="text-center" style={{ width: "20%" }}>Curso</th>
|
||||
<th className="text-center" style={{ width: "5%" }}>Participantes</th>
|
||||
<th className="text-center" style={{ width: "15%" }}>Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{contratosDetalleList.map((item, idx) => (
|
||||
<tr key={idx}>
|
||||
<td className="text-start" style={{ width: "5%" }}>
|
||||
<a target="_blank" href={item.Url} className="btn btn-primary btn-sm" rel="noreferrer">
|
||||
{/* <FilePdf /> */}
|
||||
</a>
|
||||
</td>
|
||||
<th className="text-center" style={{ width: "10%" }}>{item.Contrato}</th>
|
||||
<th className="text-center mx-auto" style={{ width: "10%" }}>
|
||||
{item.FirmaEstado === 1 ? "CONTRATO FIRMADO" : "CONTRATO SIN FIRMAR"}
|
||||
</th>
|
||||
<td className="text-center" style={{ width: "20%" }}>
|
||||
{`${item.CURSO_ID} ${item.CURSO} ${item.JORNADA} ${item.DIREMP} ${item.Fecha}`}
|
||||
</td>
|
||||
<td className="text-center" style={{ width: "5%" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0 text-decoration-none d-inline-flex align-items-center gap-1"
|
||||
onClick={() => handleVerParticipantes(item.Contrato)}
|
||||
>
|
||||
{/* <ZoomIn /> Ver Participantes */}
|
||||
</button>
|
||||
</td>
|
||||
<td className="text-center" style={{ width: "15%" }}>{item.Valor}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{mnsjNoContratos && <h4 className="mt-2">{mnsjNoContratos}</h4>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TABLA COMPROBANTES DE PAGOS (OC) */}
|
||||
{divDetalleOc && (
|
||||
<div className="col-md-6" id="div_detalle_oc">
|
||||
<div className="alert alert-light shadow-sm">
|
||||
<table className="table table-sm caption-top mb-0">
|
||||
<caption className="pt-0">Comprobantes de Pagos</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start" style={{ width: "5%" }}></th>
|
||||
<th className="text-start small" style={{ width: "10%" }}>Número Interno</th>
|
||||
<th className="text-center small" style={{ width: "10%" }}>Fecha de Subida</th>
|
||||
<th className="text-center small" style={{ width: "10%" }}>Tipo Documento</th>
|
||||
<th className="text-center small" style={{ width: "10%" }}>Responsable</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ocDetalleList.map((oc, idx) => (
|
||||
<tr key={idx}>
|
||||
<td className="text-start" style={{ width: "5%" }}>
|
||||
<a
|
||||
target="_blank"
|
||||
href={`https://empresas.norteamericano.cl/ComprobantesPagos/${oc.Detalle}`}
|
||||
className="btn btn-primary btn-sm"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Ver
|
||||
</a>
|
||||
</td>
|
||||
<td className="text-start small text-wrap" style={{ width: "10%" }}>{oc.NumeroInterno}</td>
|
||||
<td className="text-center small" style={{ width: "10%" }}>{oc.FechaSubidaPago}</td>
|
||||
<td className="text-center small" style={{ width: "10%" }}>{oc.TipoDocumento}</td>
|
||||
<td className="text-center small" style={{ width: "10%" }}>{oc.Responsable}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{mnsjNoOC && <h4 className="mt-2">{mnsjNoOC}</h4>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TABLA INSCRIPCIÓN SENCE */}
|
||||
{divDetalleSnc && (
|
||||
<div className="col-md-6" id="div_detalle_snc">
|
||||
<div className="alert alert-light shadow-sm">
|
||||
<table className="table table-sm caption-top mb-0">
|
||||
<caption className="pt-0">Inscripcion SENCE</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-center" style={{ width: "10%" }}></th>
|
||||
<th className="text-center" style={{ width: "40%" }}>Inscripción sence</th>
|
||||
<th className="text-center" style={{ width: "20%" }}>Fecha de subida</th>
|
||||
<th className="text-center" style={{ width: "30%" }}>Responsable</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sncDetalleList.map((snc, idx) => (
|
||||
<tr key={idx}>
|
||||
<th className="text-center" style={{ width: "10%" }}>
|
||||
<a
|
||||
target="_blank"
|
||||
href={`https://empresas.norteamericano.cl/DocumentosSence/${snc.Detalle}`}
|
||||
className="btn btn-primary btn-sm"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Ver
|
||||
</a>
|
||||
</th>
|
||||
<td className="text-center small" style={{ width: "40%" }}>{snc.codInscripcion}</td>
|
||||
<td className="text-center small" style={{ width: "20%" }}>{snc.FechaSubida}</td>
|
||||
<td className="text-center small" style={{ width: "30%" }}>{snc.Responsable}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{mnsjNoSNC && <h4 className="mt-2">{mnsjNoSNC}</h4>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* SECCIÓN DESACTIVAR / OBS. */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="row alert alert-light mx-auto shadow-sm align-items-center">
|
||||
<div className="col-md-3 text-end">
|
||||
<h4 className="mb-0">Motivo</h4>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<textarea
|
||||
id="TextAreaObservacion"
|
||||
className="form-control"
|
||||
cols={20}
|
||||
rows={3}
|
||||
placeholder="Escribir el motivo de por que se anula el contrato"
|
||||
value={observacion}
|
||||
onChange={(e) => setObservacion(e.target.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="col-md-3 text-start">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-warning w-100"
|
||||
onClick={handleDesactivarVerifica}
|
||||
>
|
||||
Desactivar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- MODAL PARTICIPANTES (ALUMNOS) --- */}
|
||||
{modalAlumnos && (
|
||||
<div className="modal fade show d-block bg-dark bg-opacity-50" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header text-white text-center" style={{ backgroundColor: "#373193" }}>
|
||||
<h5 className="modal-title">Empresas</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white"
|
||||
onClick={() => setModalAlumnos(false)}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<table className="table table-bordered table-hover table-sm mb-0" style={{ backgroundColor: "white", fontSize: "12px" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>RUT</th>
|
||||
<th>Nombre</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alumnosList.map((alm, index) => (
|
||||
<tr key={index}>
|
||||
<td>{alm.RUT}</td>
|
||||
<td>{alm.Nombre}</td>
|
||||
<td>{alm.Email}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => setModalAlumnos(false)}>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- MODAL ALERTA DE MENSAJES --- */}
|
||||
{modalAlerta.show && (
|
||||
<div className="modal fade show d-block bg-dark bg-opacity-50" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div className="modal-content text-dark">
|
||||
<div className="modal-header alert alert-secondary mb-0">
|
||||
<h5 className="float-start mt-2">
|
||||
<strong>Módulo Venta - Empresa</strong>
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close float-end mt-1"
|
||||
onClick={() => setModalAlerta({ show: false, message: "" })}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body alert mb-0" style={{ textAlign: "justify" }}>
|
||||
<div className="row mb-2">
|
||||
<div className="col-md-12 text-center">
|
||||
<h5>
|
||||
<strong>{modalAlerta.message}</strong>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setModalAlerta({ show: false, message: "" })}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- MODAL CONFIRMACIÓN DE ANULACIÓN --- */}
|
||||
{modalVerificaAnulacion && (
|
||||
<div className="modal fade show d-block bg-dark bg-opacity-50" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header text-white text-center" style={{ backgroundColor: "#373193" }}>
|
||||
<h5 className="modal-title">Empresas</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white"
|
||||
onClick={() => setModalVerificaAnulacion(false)}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<h4 className="fw-bolder text-center">
|
||||
¿Desea anular el contrato {idContrato || "0"} junto con su documentación?
|
||||
</h4>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-success"
|
||||
onClick={handleConfirmarAnulacion}
|
||||
>
|
||||
Confirmar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setModalVerificaAnulacion(false)}
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- MODAL CARGANDO (SPINNER) --- */}
|
||||
{isLoading && (
|
||||
<div className="modal fade show d-block bg-dark bg-opacity-50" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div className="modal-content text-dark">
|
||||
<div className="modal-header alert alert-secondary mb-0">
|
||||
<h5 className="float-start mt-2">
|
||||
<strong>SAM - Empresas</strong>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="modal-body alert mb-0" style={{ textAlign: "justify" }}>
|
||||
<div className="row mb-2">
|
||||
<div className="col-md-12 text-center">
|
||||
<h5>
|
||||
<strong>Procesando, espere un momento</strong>
|
||||
</h5>
|
||||
<div className="d-flex justify-content-center gap-1 mt-2">
|
||||
<div className="spinner-grow spinner-grow-sm text-primary" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-danger" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-primary" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-danger" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-primary" role="status"></div>
|
||||
<div className="spinner-grow spinner-grow-sm text-danger" role="status"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Executable
+1281
File diff suppressed because it is too large.
Load diff
Executable
+128
@@ -0,0 +1,128 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
InfoSquare,
|
||||
// CartDownload,
|
||||
// FileArchive,
|
||||
File,
|
||||
// IdCard
|
||||
} from "@boxicons/react";
|
||||
|
||||
export default function Page() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [modalAlerta, setModalAlerta] = useState({
|
||||
show: false,
|
||||
message: ""
|
||||
});
|
||||
|
||||
const secciones = [
|
||||
{
|
||||
titulo: "Administración Empresas",
|
||||
items: [
|
||||
{
|
||||
icon: <InfoSquare />,
|
||||
color: "text-primary",
|
||||
label: "Información de Empresas",
|
||||
href: "/empresas/informacion"
|
||||
},
|
||||
{
|
||||
icon: <InfoSquare />,
|
||||
color: "text-warning",
|
||||
label: "Autorizar Negocios",
|
||||
href: "/empresas/autorizador"
|
||||
},
|
||||
{
|
||||
icon: <InfoSquare />,
|
||||
color: "text-success",
|
||||
label: "Anular Contratos",
|
||||
href: "/empresas/desactivador"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
titulo: "Informes",
|
||||
items: [
|
||||
{
|
||||
icon: <File />,
|
||||
color: "text-warning",
|
||||
label: "Informes de documentos autorizados/rechazados",
|
||||
href: "/Informes/ContratosAutorizados"
|
||||
},
|
||||
{
|
||||
icon: <InfoSquare />,
|
||||
color: "text-danger",
|
||||
label: "Informes de contratos anulados",
|
||||
href: "/Informes/ContratosAnulados"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const handleLinkClick = () => {
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="menu" className="container py-3">
|
||||
{secciones.map((seccion, sIdx) => (
|
||||
<div className="row" key={sIdx}>
|
||||
<div className="col-md-2" />
|
||||
<div className="col-md-8">
|
||||
<div className="alert alert-light text-dark">
|
||||
<h5>
|
||||
<strong>{seccion.titulo}</strong>
|
||||
</h5>
|
||||
<hr />
|
||||
<table className="table table-hover mb-0">
|
||||
<tbody>
|
||||
{seccion.items.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td className={item.color} style={{ width: "5%" }}>
|
||||
<h1>{item.icon}</h1>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-grid gap-2 mt-2">
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-decoration-none alert-link"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* --- MODAL CARGANDO --- */}
|
||||
{isLoading && (
|
||||
<div
|
||||
className="modal fade show d-block bg-dark bg-opacity-50"
|
||||
role="dialog"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content text-center p-4">
|
||||
<div
|
||||
className="spinner-border text-primary mx-auto mb-3"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">Cargando...</span>
|
||||
</div>
|
||||
<h5>Cargando...</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user