From 396ed73ee79fef42330450c4744551c8a6fae7f4 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Fri, 5 Dec 2025 17:12:27 -0600
Subject: [PATCH] fixed style to history

---
 src/app/styles/layout/history.scss | 172 +++++++++++++++++++++++++++++
 src/components/History.tsx         |  62 ++++++++++-
 2 files changed, 233 insertions(+), 1 deletion(-)

diff --git a/src/app/styles/layout/history.scss b/src/app/styles/layout/history.scss
index 7771296..014c331 100644
--- a/src/app/styles/layout/history.scss
+++ b/src/app/styles/layout/history.scss
@@ -100,3 +100,175 @@
   background-color: #ddb288 !important; // Bronce
   font-weight: bold;
 }
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3000;
+}
+
+/* Caja del modal */
+.modal-content {
+  background: #ffffff;
+  width: 420px;
+  max-height: 80vh;
+  padding: 25px 28px;
+  border-radius: 14px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn 0.25s ease-out;
+}
+
+.fade-in {
+  animation: fadeIn 0.25s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.modal-content h2 {
+  margin-bottom: 18px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+/* Contenido desplazable */
+.modal-body {
+  overflow-y: auto;
+  max-height: 50vh;
+  padding-right: 6px;
+}
+
+/* Campos */
+.modal-field {
+  margin-bottom: 15px;
+}
+
+.modal-field label {
+  font-weight: 600;
+  font-size: 14px;
+  display: block;
+  margin-bottom: 5px;
+  color: #333;
+}
+
+/* Texto largo con auto-wrap */
+.long-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #444;
+}
+
+/* Botones */
+.modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 18px;
+  gap: 10px;
+}
+
+.btn {
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: 0.2s ease;
+  border: none;
+}
+
+.btn.cancel {
+  background: #e4e4e4;
+  color: #333;
+}
+
+.btn.cancel:hover {
+  background: #d4d4d4;
+}
+
+.btn.search {
+  background: #0070f3;
+  color: white;
+}
+
+.btn.search:hover {
+  background: #005fcc;
+}
+
+/* Encabezado bonito */
+.headerSelected {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.headerCard {
+  flex: 1;
+  background: #f5f6fa;
+  padding: 12px 14px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+
+.headerCard .label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+
+.headerCard .value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #222;
+}
+
+
+/* Sección de texto largo */
+.sectionCard {
+  background: #f8f8f8;
+  padding: 14px 16px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
+}
+
+.sectionLabel {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: #444;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.sectionText {
+  font-size: 13px;
+  line-height: 1.4;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
diff --git a/src/components/History.tsx b/src/components/History.tsx
index 4a1c099..a9982bb 100644
--- a/src/components/History.tsx
+++ b/src/components/History.tsx
@@ -10,6 +10,8 @@ import "../app/styles/layout/history.scss";
 
 export default function History() {
   const [historial, setHistorial] = useState<any[]>([]);
+  const [selected, setSelected] = useState<any | null>(null);
+
   const api_url = process.env.NEXT_PUBLIC_API_URL;
   const router = useRouter();
 
@@ -33,12 +35,18 @@ export default function History() {
   }, []);
 
   const handleClick = (item: any) => {
-    const inventario = item.inventario;
+    setSelected(item); // <-- abrir modal con datos del equipo
+  };
+
+  const handleBuscar = () => {
+    if (!selected) return;
+    const inventario = selected.inventario;
     router.push(`/editar?equipoId=${inventario}`);
   };
 
   return (
     <div className="history-table-container">
+      {/* TABLA */}
       <table className="history-table">
         <thead>
           <tr className="rowTotal">
@@ -49,6 +57,7 @@ export default function History() {
               {historial.length}
             </td>
           </tr>
+
           <tr>
             <th>Inventario</th>
             <th>Tipo de Equipo</th>
@@ -86,6 +95,57 @@ export default function History() {
           )}
         </tbody>
       </table>
+      
+      {selected && (
+        <div className="modal-overlay">
+          <div className="modal-content fade-in">
+            <h2>Detalles del Equipo</h2>
+
+            <div className="modal-body">
+              {/* Encabezado limpio */}
+              <div className="headerSelected">
+                <div className="headerCard">
+                  <span className="label">Inventario</span>
+                  <span className="value">{selected.inventario}</span>
+                </div>
+
+                <div className="headerCard">
+                  <span className="label">Equipo</span>
+                  <span className="value">
+                    {selected.tipo_equipo === "PERIFÉRICO"
+                      ? selected.periferico
+                      : selected.tipo_equipo}
+                  </span>
+                </div>
+              </div>
+
+              {/* Lugar */}
+              <div className="sectionCard">
+                <span className="sectionLabel">Lugar</span>
+                <p className="sectionText">
+                  {selected.lugar || "Sin especificar"}
+                </p>
+              </div>
+
+              {/* Observaciones */}
+              <div className="sectionCard">
+                <span className="sectionLabel">Observaciones</span>
+                <p className="sectionText">{selected.observaciones || "—"}</p>
+              </div>
+            </div>
+
+            <div className="modal-buttons">
+              <button className="btn cancel" onClick={() => setSelected(null)}>
+                Cancelar
+              </button>
+
+              <button className="btn search" onClick={handleBuscar}>
+                Editar
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }