From 5a81af78721349c9789f59cf748f4608dd998cae Mon Sep 17 00:00:00 2001
From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx>
Date: Tue, 23 Sep 2025 14:13:23 -0600
Subject: [PATCH] nuevas vistas y componentes

---
 app/(private)/InformacionEquipo/page.tsx | 45 ++-----------
 app/(private)/Programas/page.tsx         | 86 +++++++++++++-----------
 app/Components/Equipos/equipos.tsx       | 39 +++++++++++
 3 files changed, 93 insertions(+), 77 deletions(-)
 create mode 100644 app/Components/Equipos/equipos.tsx

diff --git a/app/(private)/InformacionEquipo/page.tsx b/app/(private)/InformacionEquipo/page.tsx
index 0e7ab86..743d05a 100644
--- a/app/(private)/InformacionEquipo/page.tsx
+++ b/app/(private)/InformacionEquipo/page.tsx
@@ -2,6 +2,7 @@ import ProgramSelector from "@/app/Components/ProgramSelector/ProgramSelector";
 import Toggle from "@/app/Components/Toggle/Toggle";
 
 import "./informacionequipo.css";
+import Equipos from "@/app/Components/Equipos/equipos";
 
 export default function Page() {
   return (
@@ -14,51 +15,16 @@ export default function Page() {
           {
             key: "1",
             label: "Equipos",
-            content: (
-              <form className="containerForm">
-                <div className="groupInput">
-                  <input type="text" />
-                  <button className="button buttonSearch">Buscar</button>
-                </div>
-                <label className="label">Ubicacion</label>
-                <input type="text" placeholder="Coloca" />
-
-                <label className="label">Nombre</label>
-                <input type="text" placeholder="Coloca " />
-
-                <label className="label">Plataforma</label>
-                <select>
-                  <option value="0">Elige</option>
-                  <option value="1">2</option>
-                  <option value="2">3</option>
-                  <option value="3">4</option>
-                  <option value="4">5</option>
-                  <option value="5">6</option>
-                </select>
-
-                <label className="label">Area Ubicacion</label>
-                <select>
-                  <option value="0">Elige</option>
-                  <option value="1">mmmmm</option>
-                  <option value="2">mmmmm</option>
-                  <option value="3">mmmmm</option>
-                  <option value="4">mmmmm</option>
-                  <option value="5">mmmmm</option>
-                </select>
-                <div className="containerButton">
-                  <button className="button buttonSearch">Nuevo</button>
-                  <button className="button buttonSearch">Editar</button>
-                </div>
-              </form>
-            ),
+            content: <Equipos key={2} />,
           },
           {
             key: "2",
             label: "Programa por equipo",
             content: (
               <ProgramSelector
+                key={1}
                 titulo="Programas de Equipo"
-                opcion={["Equipo 1", "Equipo 2", "Equipo 3"]}
+                opcion={["", "Equipo 1", "Equipo 2", "Equipo 3", "Equipo 4"]}
               />
             ),
           },
@@ -67,8 +33,9 @@ export default function Page() {
             label: "Programa por sala",
             content: (
               <ProgramSelector
+                key={2}
                 titulo="Programas por Sala"
-                opcion={["Sala A", "Sala B", "Sala C"]}
+                opcion={["", "PCNET1", "PCNET2", "PCNET3", "PCNET4", "PCNET4"]}
               />
             ),
           },
diff --git a/app/(private)/Programas/page.tsx b/app/(private)/Programas/page.tsx
index 1419f31..3722faf 100644
--- a/app/(private)/Programas/page.tsx
+++ b/app/(private)/Programas/page.tsx
@@ -1,31 +1,38 @@
 "use client";
 import { useState } from "react";
-import SearchUser from "../../Components/SearchUser/searchUser";
 import styleprograms from "./programas.module.css";
 
 export default function Page() {
-  const [Editar, setEditar] = useState(true);
-  const [Nuevo, setNuevo] = useState(true);
+  // modo puede ser: "ver", "editar", "nuevo"
+  const [modo, setModo] = useState("ver");
 
   const handleNuevo = () => {
-    setNuevo(false);
+    setModo("nuevo");
   };
+
   const handleEditar = () => {
-    setEditar(false);
+    setModo("editar");
+  };
+
+  const handleCancelar = () => {
+    setModo("ver");
   };
 
   return (
     <>
-      {Editar ? (
+      {modo === "ver" && (
         <section className="containersection">
-          <h3 className="title"> ID </h3>
-          <label className="label">Programas</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca "
-          />
+          <h3 className="title">PROGRAMAS</h3>
+          <label className="label">ID:2</label>
+          <h2>Programa</h2>
+          <select>
+            <option value="0"></option>
+            <option value="1">ADOBE CREATIVE SUITE</option>
+            <option value="2">mmmmm</option>
+            <option value="3">mmmmm</option>
+            <option value="4">mmmmm</option>
+            <option value="5">mmmmm</option>
+          </select>
           <div className="margin">
             <button className="button buttonSearch" onClick={handleEditar}>
               Editar
@@ -38,40 +45,43 @@ export default function Page() {
             </button>
           </div>
         </section>
-      ) : (
-        <section className="containersection">
-          <div>ID</div>
-          <h2 className="title"> PROGRAMAS </h2>
-          <label className="label">Programas</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca "
-          />
-          <div className="margin">
-            <button className="button buttonSearch">Insertar</button>
+      )}
 
-            <button className={`button buttonSearch ${styleprograms.button}`}>
+      {modo === "editar" && (
+        <section className="containersection">
+          <h2 className="title">Editar Programa:</h2>
+          <label className="label">ID:2</label>
+          <select>
+            <option value="0">Elige</option>
+            <option value="1">ADOBE CREATIVE</option>
+            <option value="2">.....</option>
+            <option value="3">.....</option>
+            <option value="4">.....</option>
+            <option value="5">.....</option>
+          </select>
+          <div className="margin">
+            <button className="button buttonSearch">Guardar</button>
+            <button
+              className={`button buttonSearch ${styleprograms.button}`}
+              onClick={handleCancelar}
+            >
               Cancelar
             </button>
           </div>
         </section>
       )}
 
-      {!Nuevo && (
+      {modo === "nuevo" && (
         <section className="containersection">
-          <label className="label">Programas</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca "
-          />
+          <h2 className="title">Nuevo Programa</h2>
+          <label className="label">Programa</label>
+          <input type="text" placeholder="Coloca el programa " />
           <div className="margin">
             <button className="button buttonSearch">Insertar</button>
-
-            <button className={`button buttonSearch ${styleprograms.button}`}>
+            <button
+              className={`button buttonSearch ${styleprograms.button}`}
+              onClick={handleCancelar}
+            >
               Cancelar
             </button>
           </div>
diff --git a/app/Components/Equipos/equipos.tsx b/app/Components/Equipos/equipos.tsx
new file mode 100644
index 0000000..1b0079f
--- /dev/null
+++ b/app/Components/Equipos/equipos.tsx
@@ -0,0 +1,39 @@
+export default function Equipos() {
+  return (
+    <form className="containerForm">
+      <div className="groupInput">
+        <input type="text" />
+        <button className="button buttonSearch">Buscar</button>
+      </div>
+      <label className="label">Ubicacion</label>
+      <input type="text" placeholder="Coloca" />
+
+      <label className="label">Nombre</label>
+      <input type="text" placeholder="Coloca " />
+
+      <label className="label">Plataforma</label>
+      <select>
+        <option value="0">Elige</option>
+        <option value="1">2</option>
+        <option value="2">3</option>
+        <option value="3">4</option>
+        <option value="4">5</option>
+        <option value="5">6</option>
+      </select>
+
+      <label className="label">Area Ubicacion</label>
+      <select>
+        <option value="0">Elige</option>
+        <option value="1">mmmmm</option>
+        <option value="2">mmmmm</option>
+        <option value="3">mmmmm</option>
+        <option value="4">mmmmm</option>
+        <option value="5">mmmmm</option>
+      </select>
+      <div className="containerButton">
+        <button className="button buttonSearch">Nuevo</button>
+        <button className="button buttonSearch">Editar</button>
+      </div>
+    </form>
+  );
+}