fixed selection

app/(private)/Inscripcion/page.tsx

@@ -75,6 +75,10 @@ export default async function Page(props: {
       }))
     : [];
 
+  const plataformasInscritas = Array.isArray(inscripcion)
+    ? inscripcion.map((ins) => ins.plataforma?.nombre)
+    : [];
+
   return (
     <section className="containerSection">
       {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
@@ -118,11 +122,12 @@ export default async function Page(props: {
       </div>
 
       {student && (
-        <>
-          <section className="inscripcion">
-            <Inscripcion numAcount={student.id_cuenta} />
-          </section>
-        </>
+        <section className="inscripcion">
+          <Inscripcion
+            numAcount={student.id_cuenta}
+            plataformasInscritas={plataformasInscritas}
+          />
+        </section>
       )}
     </section>
   );

app/Components/Receipt/Inscripcion.tsx

@@ -10,9 +10,10 @@ import Selection from "../Selection/Selection";
 
 interface ReceiptsProps {
   numAcount: number | null;
+  plataformasInscritas: string[];
 }
 
-export default function Inscripcion({ numAcount }: ReceiptsProps) {
+export default function Inscripcion({ numAcount, plataformasInscritas }: ReceiptsProps) {
   const router = useRouter();
 
   const [folio, setFolio] = useState("");
@@ -71,7 +72,7 @@ export default function Inscripcion({ numAcount }: ReceiptsProps) {
 
   return (
     <section>
-      <Selection />
+      <Selection plataformasInscritas={plataformasInscritas} />
 
       <select
         style={{

app/Components/Selection/Selection.tsx

@@ -1,9 +1,13 @@
-'use client';
+"use client";
 
 import { useState } from "react";
 import "./Selection.css";
 
-function Selection() {
+function Selection({
+  plataformasInscritas = [],
+}: {
+  plataformasInscritas: string[];
+}) {
   const [selected, setSelected] = useState<string | null>(null);
 
   const options = [
@@ -25,16 +29,22 @@ function Selection() {
     setSelected(selected === optionName ? null : optionName);
   };
 
+  const opcionesDisponibles = options.filter(
+    (option) => !plataformasInscritas.includes(option.name),
+  );
+
   return (
     <section className="selection">
-      {options.map((option, index) => (
+      {opcionesDisponibles.map((option, index) => (
         <div
           key={index}
           className="selectionItem"
           onClick={() => handleSelect(option.name)}
         >
           <button
-            className={`buttonSelection ${selected === option.name ? "active" : ""}`}
+            className={`buttonSelection ${
+              selected === option.name ? "active" : ""
+            }`}
           >
             <img
               src={option.img}
@@ -46,6 +56,12 @@ function Selection() {
           <span className="buttonLabel">{option.name}</span>
         </div>
       ))}
+
+      {opcionesDisponibles.length === 0 && (
+        <p style={{ opacity: 0.6 }}>
+          El alumno ya está inscrito en todas las plataformas
+        </p>
+      )}
     </section>
   );
 }