Merge branch 'Sarabia' of https://github.com/jls846/front-censo into Lino

src/app/(Operador)/Editar/page.tsx

@@ -1,8 +1,13 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import "../../styles/layout/agregarEquipo.scss";
 import "./editar.css";
+import { useSearchParams } from "next/navigation";
+
 export default function Home() {
+  const searchParams = useSearchParams();
+  const equipoId = searchParams.get("equipoId"); // 🔹 Obtener ID del equipo
+
   const [formData, setFormData] = useState({
     serie: "",
     marca: "",
@@ -18,12 +23,19 @@ export default function Home() {
     responsable: "",
   });
 
+  // Si viene un equipoId, precargarlo
+  useEffect(() => {
+    if (equipoId) {
+      setFormData((prev) => ({ ...prev, serie: equipoId }));
+    }
+  }, [equipoId]);
+
   // Estado para saber si mostramos los campos de SO y Procesador
   const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
 
   const handleGuardar = () => {
     console.log("Formulario enviado:", formData);
-    alert("Equipo guardado (vista solo)");
+    alert(`Equipo ${formData.serie} guardado (vista solo)`);
   };
 
   const handleCancelar = () => {
@@ -34,10 +46,11 @@ export default function Home() {
     <div className="agregarEquipoContainer">
       <div className="innerContainer">
         <h2 className="information">
-          <span></span>
+          {equipoId ? `Editar Equipo (${equipoId})` : "Agregar Equipo"}
           <span>Inventario:</span>
           <span>Fecha de censo:</span>
         </h2>
+
         <form className="equipoForm">
           {/* Columna 1 */}
           <div className="column">
@@ -113,39 +126,43 @@ export default function Home() {
 
           {/* Columna 2 */}
           <div className="column">
-            <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>
+            {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>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>

src/app/(Operador)/Escaner/page.tsx

@@ -3,8 +3,8 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import "../../styles/layout/escaner.scss"; // Importación global
+import BarcodeScanner from "@/components/BarcodeScanner";
 
-// Tipos
 type Equipo = {
   id: string;
   nombre: string;
@@ -18,59 +18,82 @@ const initialEquipos: Equipo[] = [
 
 export default function Dashboard() {
   const router = useRouter();
-  const [equipos, setEquipos] = useState<Equipo[]>(initialEquipos);
+  const [isScanning, setIsScanning] = useState(false);
+  const [equipos, setEquipos] = useState(initialEquipos);
   const [search, setSearch] = useState("");
-  const [lastScan, setLastScan] = useState("");
+  const [lastScan, setLastScan] = useState<string | null>(null);
 
+  // 🔍 Buscar equipo manualmente
   const buscarEquipo = () => {
-    const resultado = equipos.filter(
+    const encontrado = equipos.find(
       (e) =>
-        e.id.includes(search) ||
-        e.nombre.toLowerCase().includes(search.toLowerCase())
+        e.id === search.trim() ||
+        e.nombre.toLowerCase() === search.trim().toLowerCase()
     );
-    setEquipos(resultado);
-  };
-
-  const cerrarSesion = () => {
-    localStorage.removeItem("loggedIn");
-    router.push("/");
+
+    if (encontrado) {
+      // Redirige a la vista de edición con el ID del equipo
+      router.push(`/Editar?equipoId=${encontrado.id}`);
+    } else {
+      alert("Equipo no encontrado.");
+    }
   };
 
+  // 📷 Cuando se escanea un código de barras
   const handleScan = (code: string) => {
     setLastScan(code);
+    setIsScanning(false);
+
     const encontrado = equipos.find((e) => e.id === code);
+
     if (encontrado) {
-      alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`);
+      // ✅ Si el equipo existe, redirige directamente
+      router.push(`/Editar?equipoId=${encontrado.id}`);
     } else {
-      const codigo = prompt("Equipo no registrado. Ingresa el codigo:");
-      if (codigo) {
-        setEquipos([
-          ...equipos,
-          { id: code, nombre: codigo, estado: "Disponible" },
-        ]);
+      // 🚫 Si no existe, se puede registrar
+      const nombre = prompt("Equipo no registrado. Ingresa el nombre:");
+      if (nombre) {
+        const nuevoEquipo = { id: code, nombre, estado: "Disponible" };
+        setEquipos([...equipos, nuevoEquipo]);
         alert("Equipo agregado al inventario");
       }
     }
   };
 
+  // 🔒 Cerrar sesión
+  const cerrarSesion = () => {
+    localStorage.removeItem("loggedIn");
+    router.push("/");
+  };
+
   return (
     <div className="dashboardContainer">
-      {/* VISTA DE ESCANEO */}
       <main className="scanView">
         <h3>Escanear Inventario</h3>
 
-        <div className="scannerFrame">
-          <img src="/barcode_scanner.png" alt="Marco de escaneo" />
-        </div>
+        {isScanning ? (
+          <BarcodeScanner onScan={handleScan} />
+        ) : (
+          <div className="scannerFrame">
+            <img src="/barcode_scanner.png" alt="Marco de escaneo" />
+          </div>
+        )}
 
         <p className="instructions">
-          Enfoca el código de barras dentro del marco
+          {isScanning
+            ? "Enfoca el código de barras dentro del marco"
+            : "Presiona el botón para escanear"}
         </p>
 
-        <button className="scanButton">
-          <img src="/photo_camera.png" alt="camara" /> Escanear
+        <button
+          className="scanButton"
+          onClick={() => setIsScanning(!isScanning)}
+        >
+          <img src="/photo_camera.png" alt="cámara" />
+          {isScanning ? "Cancelar" : "Escanear"}
         </button>
 
+        {/* 🔍 Búsqueda manual */}
         <div className="searchBox">
           <input
             type="text"