inscripcion whitout page

app/Components/Alta/registerAlta.css

@@ -12,12 +12,6 @@
   background-color: #001f5c;
 }
 
-button:disabled {
-  background-color: #bfc6d1;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
 .altaContainerButton{
     display: flex;
     width: 100%;

app/Components/Receipt/Inscripcion.tsx

@@ -7,13 +7,28 @@ import { useRouter } from "next/navigation";
 
 import "./Receipt.css";
 import Selection from "../Selection/Selection";
+import { envConfig } from "@/app/lib/config";
 
 interface ReceiptsProps {
   numAcount: number | null;
   plataformasInscritas: string[];
 }
 
-export default function Inscripcion({ numAcount, plataformasInscritas }: ReceiptsProps) {
+const PLATAFORMA_MAP: Record<string, number> = {
+  WINDOWS: 1,
+  MACINTOSH: 2,
+  PROFESORES: 5,
+};
+
+export default function Inscripcion({
+  numAcount,
+  plataformasInscritas,
+}: ReceiptsProps) {
+  const [conPago, setConPago] = useState<"con" | "sin">("con");
+  const [plataformaSeleccionada, setPlataformaSeleccionada] = useState<
+    string | null
+  >(null);
+
   const router = useRouter();
 
   const [folio, setFolio] = useState("");
@@ -70,85 +85,130 @@ export default function Inscripcion({ numAcount, plataformasInscritas }: Receipt
     }
   };
 
+  const handleInscripcionSinPago = async () => {
+    if (!numAcount) {
+      toast.error("busca de nuevo al estudiante");
+      return;
+    }
+
+    if (!plataformaSeleccionada) {
+      toast.error("Selecciona una plataforma");
+      return;
+    }
+
+    const id_plataforma = PLATAFORMA_MAP[plataformaSeleccionada];
+
+    try {
+      const res = await fetch(`${envConfig.apiUrl}/alumno-inscrito`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          id_cuenta: numAcount,
+          id_plataforma,
+          realizo_pago: false,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.message || "Error al inscribir");
+      }
+
+      toast.success("Alumno inscrito sin pago");
+      router.refresh();
+    } catch (err: any) {
+      toast.error(err.message);
+    }
+  };
+
   return (
     <section>
-      <Selection plataformasInscritas={plataformasInscritas} />
+      <Selection
+        plataformasInscritas={plataformasInscritas}
+        onSelect={setPlataformaSeleccionada}
+      />
 
       <select
+        value={conPago}
+        onChange={(e) => setConPago(e.target.value as "con" | "sin")}
         style={{
           marginBottom: "1rem",
-          maxWidth: "100px",
-          minWidth: "100px",
+          maxWidth: "120px",
+          minWidth: "120px",
         }}
       >
-        <option value="0">con pago</option>
-        <option value="1">sin pago</option>
+        <option value="con">con pago</option>
+        <option value="sin">sin pago</option>
       </select>
 
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleSaveReceipt();
-        }}
-      >
-        <div className="gap">
-          <div className="groupInput">
-            <label className="label">Ticket:</label>
-            <input
-              type="text"
-              value={folio}
-              onChange={(error) => {
-                const value = error.target.value;
-                if (/^\d*$/.test(value) && value.length <= 7) {
-                  setFolio(value);
-                }
-              }}
-              placeholder="Numero de tiket..."
-              inputMode="numeric"
-              pattern="[0-9]*"
-            />
-          </div>
-
-          <div className="groupInput">
-            <label className="label">Monto:</label>
-            <input
-              type="text"
-              value={amount}
-              onChange={(e) => {
-                const value = e.target.value;
-
-                if (/^\d*\.?\d*$/.test(value)) {
-                  const numericValue = parseFloat(value);
-
-                  if (value === "" || numericValue <= 1000) {
-                    setAmount(value);
-                  } else {
-                    toast.error("El monto no puede superar $1000.00");
+      {conPago === "con" && (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSaveReceipt();
+          }}
+        >
+          <div className="gap">
+            <div className="groupInput">
+              <label className="label">Ticket:</label>
+              <input
+                type="text"
+                value={folio}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (/^\d*$/.test(value) && value.length <= 7) {
+                    setFolio(value);
                   }
-                }
-              }}
-              placeholder="Monto recibido..."
-              inputMode="numeric"
-              pattern="^\d*\.?\d+$"
-            />
-          </div>
+                }}
+              />
+            </div>
 
-          <div className="groupInput">
-            <label className="label">Fecha de Pago:</label>
-            <input
-              type="date"
-              value={date}
-              onChange={(e) => setDate(e.target.value)}
-              min={minFecha}
-              max={maxFecha}
-            />
-          </div>
+            <div className="groupInput">
+              <label className="label">Monto:</label>
+              <input
+                type="text"
+                value={amount}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (/^\d*\.?\d*$/.test(value)) {
+                    const numericValue = parseFloat(value);
+                    if (value === "" || numericValue <= 1000) {
+                      setAmount(value);
+                    }
+                  }
+                }}
+              />
+            </div>
 
-          <div className="containerButton">
-            <button className="button buttonSearch">Inscribir</button>
+            <div className="groupInput">
+              <label className="label">Fecha de Pago:</label>
+              <input
+                type="date"
+                value={date}
+                onChange={(e) => setDate(e.target.value)}
+                min={minFecha}
+                max={maxFecha}
+              />
+            </div>
+
+            <div className="containerButton">
+              <button className="button buttonSearch">Inscribir</button>
+            </div>
           </div>
+        </form>
+      )}
+      {conPago === "sin" && (
+        <div className="containerButton">
+          <button
+            className="button buttonSearch"
+            disabled={!plataformaSeleccionada}
+            onClick={handleInscripcionSinPago}
+          >
+            Inscribir
+          </button>
         </div>
-      </form>
+      )}
     </section>
   );
 }

app/Components/Selection/Selection.tsx

@@ -5,11 +5,18 @@ import "./Selection.css";
 
 function Selection({
   plataformasInscritas = [],
+  onSelect,
 }: {
   plataformasInscritas: string[];
+  onSelect: (plataforma: string | null) => void;
 }) {
   const [selected, setSelected] = useState<string | null>(null);
 
+  const handleSelect = (optionName: string) => {
+    const value = selected === optionName ? null : optionName;
+    setSelected(value);
+    onSelect(value);
+  };
   const options = [
     {
       name: "WINDOWS",
@@ -25,10 +32,6 @@ function Selection({
     },
   ];
 
-  const handleSelect = (optionName: string) => {
-    setSelected(selected === optionName ? null : optionName);
-  };
-
   const opcionesDisponibles = options.filter(
     (option) => !plataformasInscritas.includes(option.name),
   );

app/globals.css

@@ -247,6 +247,12 @@ button {
   height: 3.5rem;
 }
 
+button:disabled {
+  background-color: #bfc6d1;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
 .groupInput {
   display: flex;
   flex-wrap: wrap;