build

src/components/BarNavigation.tsx

@@ -8,14 +8,8 @@ import Link from "next/link";
 function BarNavigation() {
   const router = useRouter(); // ✅ Para redirigir
   const [openMenu, setOpenMenu] = useState(false);
-  const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
 
   const toggleMenu = () => setOpenMenu(!openMenu);
-  const toggleSubMenu = (index: number) => {
-    if (typeof window !== "undefined" && window.innerWidth <= 800) {
-      setOpenSubMenu(openSubMenu === index ? null : index);
-    }
-  };
 
   const cerrarSesion = () => {
     if (typeof window !== "undefined") {

src/components/BarcodeScanner.tsx

@@ -4,16 +4,6 @@
 import React, { useEffect, useRef } from "react";
 import Quagga from "@ericblade/quagga2";
 
-// Tipos mínimos para el resultado de Quagga
-interface CodeResult {
-  code: string;
-  format: string;
-}
-
-interface QuaggaResult {
-  codeResult: CodeResult | null;
-}
-
 // Tipos para la configuración (opcional, pero mejora legibilidad)
 interface QuaggaConfig {
   inputStream: {

src/components/Editar.tsx

@@ -0,0 +1,260 @@
+"use client";
+import { useSearchParams } from "next/navigation";
+import "../app/styles/layout/agregarEquipo.scss";
+import "./editar.css";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+export default function Editar() {
+  const searchParams = useSearchParams();
+  const equipoId = searchParams.get("equipoId");
+
+  const [formData, setFormData] = useState({
+    serie: "",
+    marca: "",
+    modelo: "",
+    tipoEquipo: "",
+    estado: "",
+    sistemaOperativo: "",
+    procesador: "",
+    tipoUso: "",
+    observaciones: "",
+    adscripcion: "",
+    lugar: "",
+    responsable: "",
+  });
+
+  useEffect(() => {
+    const fetchEquipo = async () => {
+      try {
+        const response = await axios.get(
+          `${process.env.NEXT_PUBLIC_API_URL}/equipos/${equipoId}`
+        );
+
+        setFormData(response.data);
+      } catch (error) {
+        console.error("Error al obtener el equipo:", error);
+        alert("No se pudo cargar la información del equipo.");
+      }
+    };
+
+    if (equipoId) {
+      fetchEquipo();
+    }
+  }, [equipoId]);
+
+  const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
+
+  const handleGuardar = async () => {
+    try {
+      await axios.patch(
+        `${process.env.NEXT_PUBLIC_API_URL}/equipos/update/${equipoId}`,
+        formData
+      );
+      alert("Equipo actualizado correctamente");
+    } catch (error) {
+      console.error("Error al guardar:", error);
+      alert("Hubo un error al guardar el equipo.");
+    }
+  };
+
+  const handleCancelar = () => {
+    alert("Acción cancelada");
+  };
+
+  return (
+    <div className="agregarEquipoContainer">
+      <div className="innerContainer">
+        <h2 className="information">
+          {equipoId ? `Editar Equipo (${equipoId})` : "Agregar Equipo"}
+          <span>Inventario:</span>
+          <span>Fecha de censo:</span>
+        </h2>
+
+        <form className="equipoForm">
+          {/* Columna 1 */}
+          <div className="column">
+            <div className="formGroup">
+              <label>Serie</label>
+              <input
+                type="text"
+                placeholder="Ingresa serie"
+                value={formData.serie}
+                onChange={(e) =>
+                  setFormData({ ...formData, serie: e.target.value })
+                }
+              />
+            </div>
+            <div className="formGroup">
+              <label>Marca</label>
+              <select
+                value={formData.marca}
+                onChange={(e) =>
+                  setFormData({ ...formData, marca: e.target.value })
+                }
+              >
+                <option value="">Ingresa marca</option>
+                <option value="Dell">Dell</option>
+                <option value="HP">HP</option>
+                <option value="Lenovo">Lenovo</option>
+              </select>
+            </div>
+            <div className="formGroup">
+              <label>Modelo</label>
+              <select
+                value={formData.modelo}
+                onChange={(e) =>
+                  setFormData({ ...formData, modelo: e.target.value })
+                }
+              >
+                <option value="">Ingresa modelo</option>
+                <option value="XPS 15">XPS 15</option>
+                <option value="EliteBook">EliteBook</option>
+                <option value="ThinkPad">ThinkPad</option>
+              </select>
+            </div>
+            <div className="formGroup">
+              <label>Estado</label>
+              <select
+                value={formData.estado}
+                onChange={(e) =>
+                  setFormData({ ...formData, estado: e.target.value })
+                }
+              >
+                <option value="">Selecciona estado</option>
+                <option value="Activado">Activado</option>
+                <option value="Desactivado">Desactivado</option>
+                <option value="En reparación">En reparación</option>
+              </select>
+            </div>
+
+            <div className="formGroup">
+              <label>Tipo uso</label>
+              <select
+                value={formData.tipoUso}
+                onChange={(e) =>
+                  setFormData({ ...formData, tipoUso: e.target.value })
+                }
+              >
+                <option value="">Ingresa tipo de uso</option>
+                <option value="administrativo">administrativo</option>
+                <option value="educacional">educacional</option>
+                <option value="laboratorio">laboratorio</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Columna 2 */}
+          <div className="column">
+            {mostrarCamposComputadora && (
+              <>
+                <div className="formGroup">
+                  <label>Procesador</label>
+                  <select
+                    value={formData.procesador}
+                    onChange={(e) =>
+                      setFormData({ ...formData, procesador: e.target.value })
+                    }
+                  >
+                    <option value="">Selecciona procesador</option>
+                    <option value="Ryzen 3">Ryzen 3</option>
+                    <option value="Intel i5">Intel i5</option>
+                    <option value="AMD Ryzen 5">AMD Ryzen 5</option>
+                  </select>
+                </div>
+
+                <div className="formGroup">
+                  <label>Sistema operativo</label>
+                  <select
+                    value={formData.sistemaOperativo}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        sistemaOperativo: e.target.value,
+                      })
+                    }
+                  >
+                    <option value="">Selecciona sistema operativo</option>
+                    <option value="Windows 10">Windows 10</option>
+                    <option value="Windows 11">Windows 11</option>
+                    <option value="Linux">Linux</option>
+                    <option value="macOS">macOS</option>
+                  </select>
+                </div>
+              </>
+            )}
+
+            <div className="formGroup">
+              <label>Adscripción</label>
+              <select
+                value={formData.adscripcion}
+                onChange={(e) =>
+                  setFormData({ ...formData, adscripcion: e.target.value })
+                }
+              >
+                <option value="">Selecciona adscripción</option>
+                <option value="Cedetec">Cedetec</option>
+                <option value="Laboratorio">Laboratorio</option>
+                <option value="Administración">Administración</option>
+              </select>
+            </div>
+
+            <div className="formGroup">
+              <label>Responsable</label>
+              <select value={formData.responsable} disabled={true}>
+                <option value="">Responsable</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Columna 3 */}
+          <div className="column">
+            <div className="formGroup">
+              <label>Lugar</label>
+              <textarea
+                placeholder="Ingresa lugar"
+                value={formData.lugar}
+                onChange={(e) =>
+                  setFormData({ ...formData, lugar: e.target.value })
+                }
+                rows={5}
+                className="textAreaLarge"
+              />
+            </div>
+
+            <div className="formGroup">
+              <label>Observaciones</label>
+              <textarea
+                placeholder="Ingresa observaciones"
+                value={formData.observaciones}
+                onChange={(e) =>
+                  setFormData({ ...formData, observaciones: e.target.value })
+                }
+                rows={5}
+                className="textAreaLarge"
+              />
+            </div>
+
+            <div className="formActions">
+              <button
+                type="button"
+                className="btnGuardar"
+                onClick={handleGuardar}
+              >
+                Guardar
+              </button>
+              <button
+                type="button"
+                className="btnCancelar"
+                onClick={handleCancelar}
+              >
+                Cancelar
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/editar.css

@@ -0,0 +1,120 @@
+/* ====== FORMULARIO ====== */
+.editar {
+  max-width: 1000px;
+  display: flex;
+  gap: 20px;
+  margin: 40px auto;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.columna {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input {
+  padding: 6px 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  outline: none;
+}
+
+input:focus {
+  border-color: #003366;
+  box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
+}
+
+/* Botón cerrar sesión */
+.boton-cerrar {
+  background-color: #e60000;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+  margin-top: 10px;
+}
+
+.boton-cerrar:hover {
+  background-color: #cc0000;
+}
+
+.titulo-editar {
+  position: absolute;
+  top: 50%;
+  left: 50%; /* centra horizontalmente */
+  transform: translate(-50%, -50%); /* centra vertical y horizontalmente */
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 35%; /* ajusta el ancho del bloque de texto */
+  font-size: 18px;
+  font-weight: bold;
+  color: #003366;
+  z-index: 5;
+}
+
+.titulo-editar span {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.3s, text-decoration 0.3s;
+}
+
+/* Cambia de color al pasar el mouse */
+.titulo-editar span:hover {
+  color: #b8870b;
+}
+
+.recuadro {
+  border-radius: 10px; /* Bordes redondeados */
+  padding: 10px; /* Espacio interno */
+  margin: 85px 350px; /* Separación del resto del contenido */
+}
+
+.titulo-rec {
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: 0; /* alinea el texto con el resto de la columna */
+  text-align: left; /* asegura que esté alineado a la izquierda */
+  margin-bottom: 8px; /* un poco de espacio debajo del título */
+}
+.linea {
+  border-bottom: 2px solid #003366; /* color y grosor de la línea */
+  width: 100%; /* ocupa toda la columna */
+  margin-bottom: 10px; /* espacio entre línea y los campos */
+}
+
+.botones {
+  display: flex;
+  justify-content: flex-end; /* Alinea los botones a la derecha */
+  gap: 10px; /* Espacio entre ellos */
+  margin-top: 15px; /* Separación del formulario */
+}
+.guardar {
+  background-color: #b8870b;
+  color: #003366;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.cancelar {
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}