added new icons and new monitor

app/Components/Alta/registerAlta.css

@@ -8,6 +8,11 @@
   color: #ffffff;
 }
 
+.buttonInscription{
+  background-color: #007a5b;
+  color:  white;
+}
+
 .buttonSave:not(:disabled):hover {
   background-color: #001f5c;
 }

app/Components/Alta/registerAlta.tsx

@@ -62,9 +62,19 @@ export default function RegisterAlta(props: urlProp) {
     e.preventDefault();
 
     try {
-      await apiClient.post("/alumno", form);
+      const payload = {
+        id_cuenta: Number(form.cuenta),
+        nombre: `${form.apellidoP} ${form.apellidoM} ${form.nombre}`.trim(),
+        fecha_nacimiento: form.fecha.replaceAll("-", ""),
+        correo: form.email || undefined,
+        id_carrera: Number(form.carrera),
+        genero: form.genero || undefined,
+      };
+
+      await apiClient.post("/student", payload);
+
       setSaved(true);
-      toast.error("Alumno registrado correctamente");
+      toast.success("Alumno registrado correctamente");
     } catch (error) {
       console.error("Error al guardar alumno:", error);
       toast.error("Error al guardar alumno");
@@ -73,7 +83,7 @@ export default function RegisterAlta(props: urlProp) {
 
   const handleInscripcion = (e: React.MouseEvent) => {
     e.preventDefault();
-    router.push("/Inscripcion");
+    router.push(`/Inscripcion?numAcount=${form.cuenta}`);
   };
 
   return (
@@ -150,7 +160,12 @@ export default function RegisterAlta(props: urlProp) {
 
       <div className="containerForm">
         <label className="label">Género</label>
-        <select name="genero" value={form.genero} onChange={handleChange} required>
+        <select
+          name="genero"
+          value={form.genero}
+          onChange={handleChange}
+          required
+        >
           <option value="">Selecciona género</option>
           <option value="Femenino">Femenino</option>
           <option value="Masculino">Masculino</option>
@@ -160,7 +175,12 @@ export default function RegisterAlta(props: urlProp) {
 
       <div className="containerForm">
         <label className="label">Carrera</label>
-        <select name="carrera" value={form.carrera} onChange={handleChange} required>
+        <select
+          name="carrera"
+          value={form.carrera}
+          onChange={handleChange}
+          required
+        >
           <option value="">Selecciona la carrera</option>
           {listMajor.map((c) => (
             <option key={c.id_carrera} value={c.id_carrera}>
@@ -180,7 +200,7 @@ export default function RegisterAlta(props: urlProp) {
         </button>
 
         <button
-          className="button"
+          className="button buttonInscription"
           disabled={!saved}
           onClick={handleInscripcion}
         >

app/Components/Global/Toggle/ToggleTable.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useState, ReactNode } from "react";
+
+interface ToggleOption {
+  key: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface ToggleProps {
+  options: ToggleOption[];
+  defaultView?: string;
+}
+
+export default function ToggleTable({ options, defaultView }: ToggleProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const [view, setView] = useState(defaultView || options[0].key);
+
+  const handleClick = (key: string) => {
+    setView(key);
+
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("key", key);
+
+    router.replace(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <section className="toggleSection" style={{maxWidth:"none"}}>
+      <div className="toggleGroup">
+        {options.map((opt) => (
+          <button
+            key={opt.key}
+            className={`toggleButton ${view === opt.key ? "active" : ""}`}
+            onClick={() => handleClick(opt.key)}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="padding toggleContent">
+        {options.find((opt) => opt.key === view)?.content}
+      </div>
+    </section>
+  );
+}
+//IO

app/Components/Selection/Selection.tsx

@@ -20,15 +20,15 @@ function Selection({
   const options = [
     {
       name: "WINDOWS",
-      img: "https://images.icon-icons.com/2235/PNG/512/windows_os_logo_icon_134678.png",
+      img: "/windows.png",
     },
     {
       name: "MACINTOSH",
-      img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
+      img: "apple.png",
     },
     {
       name: "PROFESORES",
-      img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
+      img: "teacher.png",
     },
   ];
 

app/Components/Selection/SelectionCo.tsx

@@ -15,19 +15,18 @@ function SelectionCo({
   const options = [
     {
       name: "WINDOWS",
-      img: "https://images.icon-icons.com/2235/PNG/512/windows_os_logo_icon_134678.png",
+      img: "/windows.png",
     },
     {
       name: "MACINTOSH",
-      img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
+      img: "apple.png",
     },
     {
       name: "PROFESORES",
-      img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
+      img: "teacher.png",
     },
   ];
 
-  // ✅ SOLO las inscritas
   const opcionesInscritas = options.filter((option) =>
     plataformasInscritas.includes(option.name),
   );