1281 lines
49 KiB
TypeScript
Executable File
1281 lines
49 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import {
|
|
Search,
|
|
//FilePdf,
|
|
//Refresh,
|
|
//Upload,
|
|
ChevronLeft,
|
|
//ErrorCircle,
|
|
CheckCircle,
|
|
} from "@boxicons/react";
|
|
|
|
// Interfaces para los datos de las listas
|
|
interface EmpresaItem {
|
|
rut: string;
|
|
razonSocial: string;
|
|
giro: string;
|
|
correo: string;
|
|
ultimoContacto: string;
|
|
}
|
|
|
|
interface CotizacionItem {
|
|
cotizacion: string;
|
|
contratosAsociados: string;
|
|
tipoCotizacion: string;
|
|
creacion: string;
|
|
estadoCotizacion: string;
|
|
valor: string;
|
|
idTipoCurso: string;
|
|
condicionCotizacion: string;
|
|
montoDescto: string;
|
|
}
|
|
|
|
interface ContratoItem {
|
|
contrato: string;
|
|
firmaEstado: number;
|
|
url: string;
|
|
cursoInfo: string;
|
|
valor: string;
|
|
autorizacionSSEE?: string;
|
|
}
|
|
|
|
interface DocumentoItem {
|
|
detalle: string;
|
|
numeroInterno?: string;
|
|
fechaSubida: string;
|
|
tipoDocumento?: string;
|
|
codInscripcion?: string;
|
|
responsable: string;
|
|
}
|
|
|
|
interface AlumnoItem {
|
|
rut: string;
|
|
nombre: string;
|
|
email: string;
|
|
}
|
|
|
|
export default function InfoEmpresasPage() {
|
|
// --- ESTADOS DE VISTAS (visibilidad de secciones) ---
|
|
const [headEmpVisible, setHeadEmpVisible] = useState(true);
|
|
const [divMisEmpresasVisible, setDivMisEmpresasVisible] = useState(true);
|
|
const [volver1Visible, setVolver1Visible] = useState(false);
|
|
const [divValorVisible, setDivValorVisible] = useState(false);
|
|
const [divCardInfoVisible, setDivCardInfoVisible] = useState(false);
|
|
const [divListaCotizacionesVisible, setDivListaCotizacionesVisible] = useState(false);
|
|
const [divDetalleVisible, setDivDetalleVisible] = useState(false);
|
|
const [btnSubirContratosVisible, setBtnSubirContratosVisible] = useState(false);
|
|
const [divDetalleContratosVisible, setDivDetalleContratosVisible] = useState(false);
|
|
const [divDetalleOcVisible, setDivDetalleOcVisible] = useState(false);
|
|
const [divDetalleSncVisible, setDivDetalleSncVisible] = useState(false);
|
|
const [divDetalleUpDocVisible, setDivDetalleUpDocVisible] = useState(false);
|
|
const [divDetalleUpDocDetalleVisible, setDivDetalleUpDocDetalleVisible] = useState(false);
|
|
|
|
// --- ESTADOS DE VALORES Y CAMPOS ---
|
|
const [valorNeto, setValorNeto] = useState("");
|
|
const [valorDescuento, setValorDescuento] = useState("");
|
|
const [valorTotal, setValorTotal] = useState("");
|
|
const [idCotizacionV2, setIdCotizacionV2] = useState("0");
|
|
const [empresaInfo, setEmpresaInfo] = useState({
|
|
rut: "76.456.789-0",
|
|
razonSocial: "Empresa de Servicios SpA",
|
|
giro: "Capacitaciones y Servicios",
|
|
direccion: "Av. Providencia 1234",
|
|
comuna: "Providencia",
|
|
fono: "+56 2 2345 6789",
|
|
correo: "contacto@empresa.cl",
|
|
contacto: "Juan Pérez",
|
|
});
|
|
const [contIDV2, setContIDV2] = useState("");
|
|
const [numInterDoc, setNumInterDoc] = useState("");
|
|
|
|
// --- ESTADOS DE MODALES ---
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [modalRespuesta, setModalRespuesta] = useState<{
|
|
show: boolean;
|
|
errorMsg: string;
|
|
okMsg: string;
|
|
}>({ show: false, errorMsg: "", okMsg: "" });
|
|
const [modalAlerta, setModalAlerta] = useState({ show: false, message: "" });
|
|
const [modalAlumnos, setModalAlumnos] = useState({ show: false, data: [] as AlumnoItem[] });
|
|
|
|
// --- DATOS SIMULADOS DE LISTAS ---
|
|
const [misEmpresas] = useState<EmpresaItem[]>([
|
|
{
|
|
rut: "76.456.789-0",
|
|
razonSocial: "Empresa de Servicios SpA",
|
|
giro: "Capacitaciones y Servicios",
|
|
correo: "contacto@empresa.cl",
|
|
ultimoContacto: "2026-02-15",
|
|
},
|
|
]);
|
|
|
|
const [cotizaciones] = useState<CotizacionItem[]>([
|
|
{
|
|
cotizacion: "COT-2026-001",
|
|
contratosAsociados: "2",
|
|
tipoCotizacion: "Corporativa",
|
|
creacion: "2026-01-10",
|
|
estadoCotizacion: "Aprobada",
|
|
valor: "$ 1.500.000",
|
|
idTipoCurso: "1",
|
|
condicionCotizacion: "Credito",
|
|
montoDescto: "100000",
|
|
},
|
|
]);
|
|
|
|
const [contratos] = useState<ContratoItem[]>([
|
|
{
|
|
contrato: "CNT-101",
|
|
firmaEstado: 1,
|
|
url: "#",
|
|
cursoInfo: "101 INGLES INTENSIVO DIURNO SEDE CENTRAL 2026-02-20",
|
|
valor: "$ 750.000",
|
|
autorizacionSSEE: "SSEE-99",
|
|
},
|
|
{
|
|
contrato: "CNT-102",
|
|
firmaEstado: 0,
|
|
url: "#",
|
|
cursoInfo: "102 INGLES AVANZADO VESPERTINO SEDE CENTRAL 2026-02-22",
|
|
valor: "$ 750.000",
|
|
autorizacionSSEE: "SSEE-100",
|
|
},
|
|
]);
|
|
|
|
const [comprobantesOC] = useState<DocumentoItem[]>([
|
|
{
|
|
detalle: "comprobante_pago_1.pdf",
|
|
numeroInterno: "INT-882",
|
|
fechaSubida: "2026-02-18",
|
|
tipoDocumento: "Transferencia",
|
|
responsable: "AdminUser",
|
|
},
|
|
]);
|
|
|
|
const [inscripcionesSNC] = useState<DocumentoItem[]>([
|
|
{
|
|
detalle: "sence_doc_1.pdf",
|
|
codInscripcion: "SENCE-123456",
|
|
fechaSubida: "2026-02-19",
|
|
responsable: "SenceUser",
|
|
},
|
|
]);
|
|
|
|
// --- MANEJADORES DE EVENTOS ---
|
|
const handleVerEmpresa = (rut: string) => {
|
|
setIsLoading(true);
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
setHeadEmpVisible(false);
|
|
setDivMisEmpresasVisible(false);
|
|
setVolver1Visible(true);
|
|
setDivValorVisible(false);
|
|
setDivCardInfoVisible(true);
|
|
setDivListaCotizacionesVisible(true);
|
|
setValorNeto("$ 1.600.000");
|
|
setValorDescuento("$ 100.000");
|
|
setValorTotal("$ 1.500.000");
|
|
}, 600);
|
|
};
|
|
|
|
const handleVolverEmp = () => {
|
|
setHeadEmpVisible(true);
|
|
setDivMisEmpresasVisible(true);
|
|
setVolver1Visible(false);
|
|
setDivValorVisible(false);
|
|
setDivCardInfoVisible(false);
|
|
setDivListaCotizacionesVisible(false);
|
|
setDivDetalleVisible(false);
|
|
};
|
|
|
|
const handleDetalleCotizacion = (cotz: CotizacionItem) => {
|
|
setIsLoading(true);
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
setIdCotizacionV2(cotz.cotizacion);
|
|
setDivListaCotizacionesVisible(false);
|
|
setDivDetalleVisible(true);
|
|
setDivValorVisible(true);
|
|
setBtnSubirContratosVisible(true);
|
|
setDivDetalleContratosVisible(true);
|
|
setDivDetalleOcVisible(true);
|
|
setDivDetalleSncVisible(true);
|
|
}, 600);
|
|
};
|
|
|
|
const handleVolverCotz = () => {
|
|
setDivDetalleVisible(false);
|
|
setDivValorVisible(false);
|
|
setDivListaCotizacionesVisible(true);
|
|
};
|
|
|
|
const handleSubirContratos = () => {
|
|
setDivDetalleContratosVisible(false);
|
|
setDivDetalleOcVisible(false);
|
|
setDivDetalleSncVisible(false);
|
|
setDivDetalleUpDocVisible(true);
|
|
};
|
|
|
|
const handleVerParticipantes = (contratoId: string) => {
|
|
setModalAlumnos({
|
|
show: true,
|
|
data: [
|
|
{ rut: "18.123.456-7", nombre: "Juan Pérez", email: "jperez@correo.cl" },
|
|
{ rut: "19.876.543-2", nombre: "María González", email: "mgonzalez@correo.cl" },
|
|
],
|
|
});
|
|
};
|
|
|
|
const handleSubirArchivoFinal = () => {
|
|
setIsLoading(true);
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
setModalRespuesta({
|
|
show: true,
|
|
errorMsg: "",
|
|
okMsg: "Documento subido con éxito a la plataforma.",
|
|
});
|
|
}, 1000);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* ESTILOS EMBEDIDOS ADAPTADOS */}
|
|
<style jsx global>{`
|
|
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
|
|
.checkbox-wrapper-13 input[type="checkbox"] {
|
|
--active: #275efe;
|
|
--active-inner: #fff;
|
|
--focus: 2px rgba(39, 94, 254, 0.3);
|
|
--border: #bbc1e1;
|
|
--border-hover: #275efe;
|
|
--background: #fff;
|
|
--disabled: #f6f8ff;
|
|
--disabled-inner: #e1e6f9;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
height: 21px;
|
|
outline: none;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
border: 1px solid var(--bc, var(--border));
|
|
background: var(--b, var(--background));
|
|
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:after {
|
|
content: "";
|
|
display: block;
|
|
left: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
|
|
opacity var(--d-o, 0.2s);
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:checked {
|
|
--b: var(--active);
|
|
--bc: var(--active);
|
|
--d-o: 0.3s;
|
|
--d-t: 0.6s;
|
|
--d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:disabled {
|
|
--b: var(--disabled);
|
|
cursor: not-allowed;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:disabled:checked {
|
|
--b: var(--disabled-inner);
|
|
--bc: var(--border);
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:disabled + label {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.checkbox-wrapper-13
|
|
input[type="checkbox"]:hover:not(:checked):not(:disabled) {
|
|
--bc: var(--border-hover);
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:focus {
|
|
box-shadow: 0 0 0 var(--focus);
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:not(.switch) {
|
|
width: 21px;
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:not(.switch):after {
|
|
opacity: var(--o, 0);
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:not(.switch):checked {
|
|
--o: 1;
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"] + label {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:not(.switch) {
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:not(.switch):after {
|
|
width: 5px;
|
|
height: 9px;
|
|
border: 2px solid var(--active-inner);
|
|
border-top: 0;
|
|
border-left: 0;
|
|
left: 7px;
|
|
top: 4px;
|
|
transform: rotate(var(--r, 20deg));
|
|
}
|
|
|
|
.checkbox-wrapper-13 input[type="checkbox"]:not(.switch):checked {
|
|
--r: 43deg;
|
|
}
|
|
}
|
|
|
|
.checkbox-wrapper-13 * {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
.checkbox-wrapper-13 *:before,
|
|
.checkbox-wrapper-13 *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
.auto-style5 {
|
|
left: 0px;
|
|
top: -1px;
|
|
}
|
|
`}</style>
|
|
|
|
<div className="container-fluid mt-5">
|
|
<div className="row">
|
|
{/* CABECERA PRINCIPAL */}
|
|
{headEmpVisible && (
|
|
<div className="col-md-12" id="head_emp">
|
|
<div className="row">
|
|
<div className="alert alert-light rounded d-flex justify-content-between align-items-center">
|
|
<div className="col-md-9">
|
|
<h3>
|
|
<small>Informacion de empresas</small>
|
|
</h3>
|
|
</div>
|
|
<div className="col-md-3 text-end">
|
|
<button
|
|
type="button"
|
|
className="btn btn-success"
|
|
onClick={() =>
|
|
setModalAlerta({
|
|
show: true,
|
|
message: "Descargando vista en Excel...",
|
|
})
|
|
}
|
|
>
|
|
Descargar vista
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* LISTADO DE MIS EMPRESAS */}
|
|
{divMisEmpresasVisible && (
|
|
<div className="col-md-12" id="div_mis_empresas">
|
|
<div className="alert alert-light rounded">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="alert alert-light text-dark shadow table-responsive">
|
|
<table className="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-start" style={{ width: "5%" }}></th>
|
|
<th className="text-start" style={{ width: "10%" }}>
|
|
Rut
|
|
</th>
|
|
<td className="text-start" style={{ width: "25%" }}>
|
|
Razón social
|
|
</td>
|
|
<td className="text-start" style={{ width: "20%" }}>
|
|
Giro
|
|
</td>
|
|
<td className="text-center" style={{ width: "25%" }}>
|
|
Email
|
|
</td>
|
|
<td className="text-end" style={{ width: "15%" }}>
|
|
Fecha del último contacto
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<div style={{ lineHeight: "15px" }}>
|
|
{misEmpresas.map((emp, index) => (
|
|
<table key={index} className="table table-hover">
|
|
<tbody>
|
|
<tr>
|
|
<td className="text-start" style={{ width: "5%" }}>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
onClick={() => handleVerEmpresa(emp.rut)}
|
|
>
|
|
Ver
|
|
</button>
|
|
</td>
|
|
<th className="text-start" style={{ width: "10%" }}>
|
|
{emp.rut}
|
|
</th>
|
|
<td className="text-start" style={{ width: "25%" }}>
|
|
{emp.razonSocial}
|
|
</td>
|
|
<td className="text-start" style={{ width: "20%" }}>
|
|
{emp.giro}
|
|
</td>
|
|
<td className="text-center" style={{ width: "25%" }}>
|
|
{emp.correo}
|
|
</td>
|
|
<td className="text-center" style={{ width: "15%" }}>
|
|
{emp.ultimoContacto}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* BOTÓN DE VOLVER A OTRA EMPRESA */}
|
|
{volver1Visible && (
|
|
<div className="col-md-12 alert alert-light mb-2" id="volver_1">
|
|
<div className="row align-items-center">
|
|
<div className="col-md-9 text-start">
|
|
<h3>
|
|
<strong>
|
|
<small>Cotizaciones de la empresa</small>
|
|
</strong>
|
|
</h3>
|
|
</div>
|
|
<div className="col-md-3 text-end">
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning rounded"
|
|
onClick={handleVolverEmp}
|
|
>
|
|
Ver otra empresa
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* CUADRO RESUMEN VALORES */}
|
|
{divValorVisible && (
|
|
<div className="col-md-12 alert alert-light mb-2" id="div_valor">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="row">
|
|
<table className="table table-sm mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<h3 className="text-end mb-0">
|
|
<strong>
|
|
<small>Total Neto</small>
|
|
</strong>
|
|
</h3>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
readOnly
|
|
value={valorNeto}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h3 className="text-end mb-0">
|
|
<strong>
|
|
<small>Descuento</small>
|
|
</strong>
|
|
</h3>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
readOnly
|
|
value={valorDescuento}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h3 className="text-end mb-0">
|
|
<strong>
|
|
<small>Total</small>
|
|
</strong>
|
|
</h3>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
readOnly
|
|
value={valorTotal}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TARJETA DE INFORMACIÓN DE EMPRESA (LATERAL IZQUIERDA) */}
|
|
{divCardInfoVisible && (
|
|
<div className="col-md-3 text-start text-wrap" id="div_card_info">
|
|
<div className="sticky-top sticky-md-top">
|
|
<div className="auto-style5" id="card_empresa">
|
|
<div className="card-body alert alert-light">
|
|
<h5 className="card-title">
|
|
<strong>Empresa</strong>
|
|
</h5>
|
|
<div className="card-body px-0">
|
|
<div className="table-responsive">
|
|
<table className="table table-borderless">
|
|
<tbody className="table-group-divider">
|
|
<tr>
|
|
<td>
|
|
<h5 className="fs-6 fw-bold">R.U.T.</h5>
|
|
</td>
|
|
<td>
|
|
<span className="fs-6">{empresaInfo.rut}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 className="fs-6 fw-bold">Razon Social</h5>
|
|
</td>
|
|
<td>
|
|
<span className="fs-6 text-wrap">
|
|
{empresaInfo.razonSocial}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 className="fs-6 fw-bold">Giro</h5>
|
|
</td>
|
|
<td>
|
|
<span className="fs-6 text-wrap">
|
|
{empresaInfo.giro}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 className="fs-6 fw-bold">Direccion</h5>
|
|
</td>
|
|
<td>
|
|
<span className="fs-6 text-wrap">
|
|
{empresaInfo.direccion}, {empresaInfo.comuna}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 className="fs-6 fw-bold">Fono</h5>
|
|
</td>
|
|
<td>
|
|
<span className="fs-6">{empresaInfo.fono}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 className="fs-6 fw-bold">Email</h5>
|
|
</td>
|
|
<td>
|
|
<span className="fs-6 text-wrap">
|
|
{empresaInfo.correo}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 className="fs-6 fw-bold">Contacto</h5>
|
|
</td>
|
|
<td>
|
|
<span className="fs-6 text-wrap">
|
|
{empresaInfo.contacto}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* LISTA DE COTIZACIONES DE LA EMPRESA */}
|
|
{divListaCotizacionesVisible && (
|
|
<div className="col-md-9" id="div_lista_cotizaciones">
|
|
<div className="alert alert-light text-dark shadow table-responsive rounded">
|
|
<table className="table table-sm caption-top">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-start" style={{ width: "5%" }}></th>
|
|
<th className="text-start" style={{ width: "10%" }}>
|
|
Cotizacion
|
|
</th>
|
|
<td className="text-start" style={{ width: "10%" }}>
|
|
Contratos
|
|
</td>
|
|
<td className="text-center" style={{ width: "15%" }}>
|
|
Tipo
|
|
</td>
|
|
<td className="text-start" style={{ width: "10%" }}>
|
|
Creacion
|
|
</td>
|
|
<td className="text-center" style={{ width: "25%" }}>
|
|
Observacion
|
|
</td>
|
|
<td className="text-center" style={{ width: "15%" }}>
|
|
Valor total
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<div style={{ lineHeight: "15px" }}>
|
|
{cotizaciones.map((cot, index) => (
|
|
<table key={index} className="table table-hover mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td className="text-start" style={{ width: "5%" }}>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm d-flex align-items-center gap-1"
|
|
onClick={() => handleDetalleCotizacion(cot)}
|
|
>
|
|
<Search style={{ fontSize: "16px" }} /> ver
|
|
</button>
|
|
</td>
|
|
<th className="text-start mx-auto" style={{ width: "10%" }}>
|
|
{cot.cotizacion}
|
|
</th>
|
|
<td className="text-start" style={{ width: "10%" }}>
|
|
{cot.contratosAsociados}
|
|
</td>
|
|
<td className="text-start" style={{ width: "15%" }}>
|
|
{cot.tipoCotizacion}
|
|
</td>
|
|
<td className="text-start" style={{ width: "10%" }}>
|
|
{cot.creacion}
|
|
</td>
|
|
<td className="text-center" style={{ width: "25%" }}>
|
|
{cot.estadoCotizacion}
|
|
</td>
|
|
<td className="text-center" style={{ width: "15%" }}>
|
|
{cot.valor}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* VISTA CONTENEDORA DE DETALLES Y ACCIONES DE COTIZACIÓN */}
|
|
{divDetalleVisible && (
|
|
<div className="col-md-9" id="div_detalle">
|
|
<div className="row">
|
|
{/* BARRA ACCIONES COTIZACIÓN */}
|
|
{btnSubirContratosVisible && (
|
|
<div className="col-md-12" id="btn_subir_contratos">
|
|
<div className="alert alert-light">
|
|
<div className="row align-items-center">
|
|
<div className="col-md-4 text-start">
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning"
|
|
onClick={handleVolverCotz}
|
|
>
|
|
Ver otra cotización
|
|
</button>
|
|
</div>
|
|
<div className="col-md-4 text-center">
|
|
<h3 className="mb-0">
|
|
<strong>
|
|
<small>Cotización: {idCotizacionV2}</small>
|
|
</strong>
|
|
</h3>
|
|
</div>
|
|
<div className="col-md-4 text-end">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
onClick={handleSubirContratos}
|
|
>
|
|
{/* <Upload className="me-1" /> */}
|
|
Subir contrato firmado por cliente
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TABLA DE CONTRATOS */}
|
|
{divDetalleContratosVisible && (
|
|
<div className="col-md-12 mb-3" id="div_detalle_contratos">
|
|
<div className="alert alert-light">
|
|
<table className="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-center" style={{ width: "5%" }}>
|
|
Ver contrato
|
|
</th>
|
|
<th className="text-center" style={{ width: "5%" }}>
|
|
Recargar contrato
|
|
</th>
|
|
<th className="text-center" style={{ width: "10%" }}>
|
|
Contrato
|
|
</th>
|
|
<td className="text-center" style={{ width: "10%" }}>
|
|
Estado
|
|
</td>
|
|
<td className="text-center" style={{ width: "20%" }}>
|
|
Curso
|
|
</td>
|
|
<td className="text-center" style={{ width: "5%" }}>
|
|
Participantes
|
|
</td>
|
|
<td className="text-center" style={{ width: "15%" }}>
|
|
Valor
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<div style={{ lineHeight: "15px" }}>
|
|
{contratos.map((c, index) => (
|
|
<table key={index} className="table table-hover mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td className="text-start" style={{ width: "5%" }}>
|
|
<a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
href={c.url}
|
|
className="btn btn-primary btn-sm"
|
|
>
|
|
{/* <FilePdf /> */}
|
|
</a>
|
|
</td>
|
|
<td className="text-center" style={{ width: "5%" }}>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
disabled={c.firmaEstado === 1}
|
|
>
|
|
{/* <Refresh /> */}
|
|
</button>
|
|
</td>
|
|
<th className="text-center" style={{ width: "10%" }}>
|
|
{c.contrato}
|
|
</th>
|
|
<th
|
|
className="text-center mx-auto"
|
|
style={{ width: "10%" }}
|
|
>
|
|
{c.firmaEstado === 1
|
|
? "CONTRATO FIRMADO"
|
|
: "CONTRATO SIN FIRMAR"}
|
|
</th>
|
|
<td className="text-center" style={{ width: "20%" }}>
|
|
{c.cursoInfo}
|
|
</td>
|
|
<td className="text-center" style={{ width: "5%" }}>
|
|
<button
|
|
type="button"
|
|
className="btn btn-link btn-sm p-0 text-decoration-none"
|
|
onClick={() => handleVerParticipantes(c.contrato)}
|
|
>
|
|
<Search className="me-1" />
|
|
Ver Participantes
|
|
</button>
|
|
</td>
|
|
<td className="text-center" style={{ width: "15%" }}>
|
|
{c.valor}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* SECCIÓN COMPROBANTE DE PAGO (OC) */}
|
|
{divDetalleOcVisible && (
|
|
<div className="col-md-6" id="div_detalle_oc">
|
|
<div className="alert alert-light">
|
|
<div className="mb-2">
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning btn-sm"
|
|
onClick={() => handleSubirContratos()}
|
|
>
|
|
{/* <Upload className="me-1" /> */}
|
|
Subir Comprobante de pago
|
|
</button>
|
|
</div>
|
|
<table className="table table-sm caption-top">
|
|
<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>
|
|
</table>
|
|
|
|
<div style={{ lineHeight: "15px" }}>
|
|
{comprobantesOC.map((oc, index) => (
|
|
<table key={index} className="table table-hover mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td className="text-start" style={{ width: "5%" }}>
|
|
<a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
href={`https://sam.norteamericano.cl/documentos/Comprobante/${oc.detalle}`}
|
|
className="btn btn-primary btn-sm"
|
|
>
|
|
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.fechaSubida}
|
|
</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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* SECCIÓN INSCRIPCIÓN SENCE */}
|
|
{divDetalleSncVisible && (
|
|
<div className="col-md-6" id="div_detalle_snc">
|
|
<div className="alert alert-light">
|
|
<div className="mb-2">
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning btn-sm"
|
|
onClick={() => handleSubirContratos()}
|
|
>
|
|
{/* <Upload className="me-1" /> */}
|
|
Subir Inscripcion SENCE
|
|
</button>
|
|
</div>
|
|
<table className="table table-sm caption-top">
|
|
<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>
|
|
</table>
|
|
|
|
<div style={{ lineHeight: "15px" }}>
|
|
{inscripcionesSNC.map((snc, index) => (
|
|
<table key={index} className="table table-sm mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<th className="text-center" style={{ width: "10%" }}>
|
|
<a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
href={`https://sam.norteamericano.cl/documentos/Sence/${snc.detalle}`}
|
|
className="btn btn-primary btn-sm"
|
|
>
|
|
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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* PANEL DE CARGA DE DOCUMENTOS */}
|
|
{divDetalleUpDocVisible && (
|
|
<div className="col-md-12" id="div_detalle_upDoc">
|
|
<div className="alert alert-light">
|
|
<div className="col-md-12 mb-3">
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning"
|
|
onClick={() => {
|
|
setDivDetalleUpDocVisible(false);
|
|
setDivDetalleContratosVisible(true);
|
|
setDivDetalleOcVisible(true);
|
|
setDivDetalleSncVisible(true);
|
|
}}
|
|
>
|
|
<ChevronLeft className="me-1" /> Volver
|
|
</button>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-12" id="div_detalle_upDoc_select">
|
|
<table className="table table-sm caption-top">
|
|
<caption>Contratos</caption>
|
|
<thead>
|
|
<tr>
|
|
<th className="text-center" style={{ width: "10%" }}></th>
|
|
<th className="text-center" style={{ width: "10%" }}>
|
|
Contrato
|
|
</th>
|
|
<th className="text-center" style={{ width: "30%" }}>
|
|
Estado
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<div style={{ lineHeight: "15px" }}>
|
|
{contratos.map((c, index) => (
|
|
<table key={index} className="table table-sm mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<th className="text-center" style={{ width: "10%" }}>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
onClick={() => {
|
|
setContIDV2(c.contrato);
|
|
setDivDetalleUpDocDetalleVisible(true);
|
|
}}
|
|
>
|
|
Seleccionar
|
|
</button>
|
|
</th>
|
|
<th
|
|
className="text-center small"
|
|
style={{ width: "10%" }}
|
|
>
|
|
{c.contrato}
|
|
</th>
|
|
<td
|
|
className="text-center small"
|
|
style={{ width: "30%" }}
|
|
>
|
|
{c.firmaEstado === 1
|
|
? "CONTRATO FIRMADO"
|
|
: "CONTRATO SIN FIRMAR"}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* SUB-FORMULARIO DE CARGA */}
|
|
{divDetalleUpDocDetalleVisible && (
|
|
<div
|
|
className="col-md-12 mt-3"
|
|
id="div_detalle_upDoc_detalle"
|
|
>
|
|
<div className="row">
|
|
<div className="input-group">
|
|
<span className="input-group-text">
|
|
Numero Contrato
|
|
</span>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
value={contIDV2}
|
|
onChange={(e) => setContIDV2(e.target.value)}
|
|
/>
|
|
<span className="input-group-text ms-2">
|
|
Numero Documento
|
|
</span>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
value={numInterDoc}
|
|
onChange={(e) => setNumInterDoc(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="input-group mt-2">
|
|
<input
|
|
type="file"
|
|
className="form-control"
|
|
aria-label="Upload"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-secondary"
|
|
onClick={handleSubirArchivoFinal}
|
|
>
|
|
Subir Archivo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- MODAL POPUP DE RESPUESTA / ERROR / OK --- */}
|
|
{modalRespuesta.show && (
|
|
<div
|
|
className="modal fade show d-block bg-dark bg-opacity-50"
|
|
tabIndex={-1}
|
|
role="dialog"
|
|
>
|
|
<div className="modal-dialog modal-dialog-centered" role="document">
|
|
<div className="modal-content">
|
|
<div
|
|
className="modal-header text-white text-center"
|
|
style={{ backgroundColor: "#373193" }}
|
|
>
|
|
<h5 className="modal-title">Empresas</h5>
|
|
</div>
|
|
<div className="modal-body">
|
|
{modalRespuesta.errorMsg && (
|
|
<div>
|
|
<strong style={{ color: "#e22523" }}>
|
|
{/* <ErrorCircle className="me-1" /> */}
|
|
<span>{modalRespuesta.errorMsg}</span>
|
|
</strong>
|
|
</div>
|
|
)}
|
|
{modalRespuesta.okMsg && (
|
|
<div>
|
|
<strong style={{ color: "#00285d" }}>
|
|
<CheckCircle className="me-1" />
|
|
<span>{modalRespuesta.okMsg}</span>
|
|
</strong>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
onClick={() =>
|
|
setModalRespuesta({ show: false, errorMsg: "", okMsg: "" })
|
|
}
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* --- MODAL PARTICIPANTES (GRID ALUMNOS) --- */}
|
|
{modalAlumnos.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-xl" role="document">
|
|
<div className="modal-content">
|
|
<div
|
|
className="modal-header text-white text-center"
|
|
style={{ backgroundColor: "#373193" }}
|
|
>
|
|
<h5 className="modal-title">Listado de Alumnos</h5>
|
|
</div>
|
|
<div className="modal-body">
|
|
<table className="table table-bordered table-hover table-sm bg-white text-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>RUT</th>
|
|
<th>Nombre</th>
|
|
<th>Correo</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{modalAlumnos.data.map((al, idx) => (
|
|
<tr key={idx}>
|
|
<td>{al.rut}</td>
|
|
<td>{al.nombre}</td>
|
|
<td>{al.email}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
onClick={() => setModalAlumnos({ show: false, data: [] })}
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* --- MODAL MENSAJE ALERTA --- */}
|
|
{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 MENSAJE CARGANDO --- */}
|
|
{isLoading && (
|
|
<div
|
|
className="modal fade show d-block bg-dark bg-opacity-50"
|
|
tabIndex={-1}
|
|
role="dialog"
|
|
>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content">
|
|
<div className="modal-body">
|
|
<div className="col-md-12 text-center py-3">
|
|
<div className="spinner-border text-info" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p className="mt-2 mb-0">Procesando la información...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
} |