restructuring layout

2025-09-26 16:56:07 -06:00
parent dce377b586
commit 3bd6d6b7c2
64 changed files with 187 additions and 195 deletions
@@ -0,0 +1,130 @@
+"use client";
+
+import Cookies from "js-cookie";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { PostImpressions } from "@/app/lib/postImpressions";
+
+import "./Impressions.css";
+
+interface CostOption {
+  value: number;
+}
+
+interface ImpressionsProps {
+  costs: CostOption[];
+  numAcount: number | null;
+}
+
+function Impressions({ costs, numAcount }: ImpressionsProps) {
+  const [pages, setPages] = useState("");
+  const [cost, setCost] = useState("");
+
+  const router = useRouter();
+
+  const handleLogout = () => {
+    Cookies.remove("token");
+    Cookies.remove("session");
+    router.push("/Login");
+  };
+
+  const handlePayment = async () => {
+    if (!numAcount) {
+      router.push(
+        `/Impresiones?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
+      );
+      return;
+    }
+
+    if (!pages) {
+      router.push(
+        `/Impresiones?numAcount=${numAcount}&error=Ingresa el numero de hojas a imprimir`
+      );
+      return;
+    }
+
+    if (!cost) {
+      router.push(
+        `/Impresiones?numAcount=${numAcount}&error=Selecciona un costo`
+      );
+      return;
+    }
+
+    const result = await PostImpressions({
+      id_cuenta: numAcount,
+      numero_hojas: parseInt(pages),
+      monto: parseInt(cost) * parseInt(pages),
+    });
+
+    if (result.error) {
+      if (result.error === "Token inválido") handleLogout();
+      else {
+        router.push(
+          `/Impresiones?numAcount=${numAcount}&error=${result.error}`
+        );
+      }
+      return;
+    }
+
+    setPages("");
+    setCost("");
+    router.push(
+      `/Impresiones?numAcount=${numAcount}&success=Impresion cobrada correctamente`
+    );
+  };
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        handlePayment();
+      }}
+    >
+      <div className="gap">
+        <div className="groupInput">
+          <label className="label">Costo:</label>
+          <select value={cost} onChange={(e) => setCost(e.target.value)}>
+            <option value="">Selecciona el costo</option>
+            {costs.map((c) => (
+              <option key={c.value} value={c.value}>
+                ${c.value}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="groupInput">
+          <label className="label">Hojas:</label>
+          <input
+            type="text"
+            value={pages}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (/^\d*$/.test(value)) {
+                setPages(value);
+              }
+            }}
+            placeholder="Numero de hojas a imprimir..."
+            inputMode="numeric"
+            pattern="[0-9]*"
+          />
+        </div>
+
+        <div className="groupLabel">
+          <label className="label">
+            Total: {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
+          </label>
+        </div>
+
+        <div className="containerButton">
+          <button className="button buttonCharge" type="submit">
+            Cobrar
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default Impressions;
+//IO