Arreglo de node_modules
This commit is contained in:
Fimm committed
commit
eed3b45de3
40 files changed
+13127
No files matched your search
Executable
+349
@@ -0,0 +1,349 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { User } from "@boxicons/react";
|
||||
|
||||
// Interface para mapear la estructura de la lista de contratos anulados
|
||||
interface ContratoAnuladoItem {
|
||||
idEmpresas: string;
|
||||
empresa: string;
|
||||
Contrato: string;
|
||||
Fecha: string;
|
||||
DescripcionActividad: string;
|
||||
usuarioResponsable: string;
|
||||
}
|
||||
|
||||
export default function ContratosHistorialPage() {
|
||||
// --- ESTADOS DE CONTROLES Y SECCIONES ---
|
||||
const [mes, setMes] = useState("");
|
||||
const [agno, setAgno] = useState("");
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
const [mensajeLabel, setMensajeLabel] = useState("");
|
||||
|
||||
// --- ESTADOS DE MODALES Y CARGA ---
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [modalAlerta, setModalAlerta] = useState({ show: false, message: "" });
|
||||
|
||||
// --- DATOS SIMULADOS (DataList / Grid) ---
|
||||
const [contratosAnulados, setContratosAnulados] = useState<ContratoAnuladoItem[]>([
|
||||
{
|
||||
idEmpresas: "76.123.456-7",
|
||||
empresa: "Empresa Ejemplo S.A.",
|
||||
Contrato: "1002",
|
||||
Fecha: "2026-02-10",
|
||||
DescripcionActividad: "Anulación solicitada por el cliente por cambio de presupuesto",
|
||||
usuarioResponsable: "AdminUser",
|
||||
},
|
||||
]);
|
||||
|
||||
// --- MANEJADORES DE EVENTOS ---
|
||||
const handleBuscar = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulación de respuesta de backend
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
if (!mes || !agno) {
|
||||
setModalAlerta({
|
||||
show: true,
|
||||
message: "Por favor seleccione un mes e ingrese un año válido.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
setShowSearch(true);
|
||||
setMensajeLabel("");
|
||||
}, 800);
|
||||
};
|
||||
|
||||
const handleExportarExcel = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setModalAlerta({
|
||||
show: true,
|
||||
message: "Informe mensual exportado correctamente a Excel.",
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container-fluid py-3">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="row">
|
||||
{/* CABECERA IZQUIERDA */}
|
||||
<div className="col-md-5">
|
||||
<div className="alert alert-light text-dark shadow-sm" role="alert">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-8 d-flex align-items-center">
|
||||
<strong>
|
||||
<User style={{ fontSize: "24px" }} />
|
||||
</strong>
|
||||
<strong>
|
||||
<span className="ms-2">Contratos anulados por mes</span>
|
||||
</strong>
|
||||
</div>
|
||||
<div className="col text-end">
|
||||
<Link
|
||||
href="/Clientes/Index"
|
||||
className="btn btn-warning text-dark btn-sm fw-bold"
|
||||
>
|
||||
Volver
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CABECERA DERECHA / FILTROS DE BÚSQUEDA */}
|
||||
<div className="col-md-7">
|
||||
<div className="alert alert-light text-dark shadow-sm" role="alert">
|
||||
<form onSubmit={handleBuscar} className="row align-items-center">
|
||||
<div className="col text-end">
|
||||
<span className="fw-bold">Mes</span>
|
||||
</div>
|
||||
<div className="col">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={mes}
|
||||
onChange={(e) => setMes(e.target.value)}
|
||||
>
|
||||
<option value="">-- Seleccione --</option>
|
||||
<option value="1">Enero</option>
|
||||
<option value="2">Febrero</option>
|
||||
<option value="3">Marzo</option>
|
||||
<option value="4">Abril</option>
|
||||
<option value="5">Mayo</option>
|
||||
<option value="6">Junio</option>
|
||||
<option value="7">Julio</option>
|
||||
<option value="8">Agosto</option>
|
||||
<option value="9">Septiembre</option>
|
||||
<option value="10">Octubre</option>
|
||||
<option value="11">Noviembre</option>
|
||||
<option value="12">Diciembre</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col text-end">
|
||||
<span className="fw-bold">Agno</span>
|
||||
</div>
|
||||
<div className="col">
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
value={agno}
|
||||
onChange={(e) => setAgno(e.target.value)}
|
||||
placeholder="AAAA"
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm d-grid w-100"
|
||||
>
|
||||
Buscar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTÓN EXPORTAR EXCEL */}
|
||||
<div className="col-md-12 mx-auto">
|
||||
<button
|
||||
type="button"
|
||||
className="btn p-0 text-start w-100 text-decoration-none border-0 bg-transparent"
|
||||
onClick={handleExportarExcel}
|
||||
>
|
||||
<div className="alert alert-success shadow" role="alert">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-3">
|
||||
<h1 className="mb-0">
|
||||
{/* <Export /> */}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="col text-center">
|
||||
<span className="text-muted">
|
||||
<strong>Excel</strong>
|
||||
</span>
|
||||
<h5 className="mb-0">
|
||||
<strong>Exportar Mensual</strong>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* TABLA DE RESULTADOS */}
|
||||
{showSearch && (
|
||||
<div className="col-md-12 mt-3" id="div_search">
|
||||
<div className="alert alert-light text-dark shadow-sm" role="alert">
|
||||
<div className="table-responsive">
|
||||
<table
|
||||
className="table table-sm mb-0"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start" style={{ width: "3%" }}></th>
|
||||
<th className="text-start" style={{ width: "7%" }}>
|
||||
RUT Empresa
|
||||
</th>
|
||||
<th className="text-start" style={{ width: "20%" }}>
|
||||
Empresa
|
||||
</th>
|
||||
<th className="text-start" style={{ width: "7%" }}>
|
||||
Contrato
|
||||
</th>
|
||||
<th className="text-start" style={{ width: "12%" }}>
|
||||
Fecha
|
||||
</th>
|
||||
<th className="text-start" style={{ width: "40%" }}>
|
||||
Observacion
|
||||
</th>
|
||||
<th className="text-start" style={{ width: "11%" }}>
|
||||
Responsable
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{contratosAnulados.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="text-start" style={{ width: "3%" }}></td>
|
||||
<td className="text-start" style={{ width: "7%" }}>
|
||||
{item.idEmpresas}
|
||||
</td>
|
||||
<td className="text-start" style={{ width: "20%" }}>
|
||||
{item.empresa}
|
||||
</td>
|
||||
<td className="text-start" style={{ width: "7%" }}>
|
||||
{item.Contrato}
|
||||
</td>
|
||||
<td className="text-start" style={{ width: "12%" }}>
|
||||
{item.Fecha}
|
||||
</td>
|
||||
<td className="text-start" style={{ width: "40%" }}>
|
||||
{item.DescripcionActividad}
|
||||
</td>
|
||||
<td className="text-start" style={{ width: "11%" }}>
|
||||
{item.usuarioResponsable}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{mensajeLabel && (
|
||||
<h4 className="mt-2">
|
||||
<span>{mensajeLabel}</span>
|
||||
</h4>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- MODAL ALERTA / ERRORES --- */}
|
||||
{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 Académico - 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: "" })}
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- MODAL CARGANDO (LOADING 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>Procesando</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>Espere un momento, por favor...</strong>
|
||||
</h5>
|
||||
<div className="d-flex justify-content-center gap-1 mt-3">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user