added request to api

2025-09-19 17:20:05 -06:00
parent 33060b5dbb
commit ca67be2de3
14 changed files with 296 additions and 254 deletions
@@ -1,7 +1,8 @@
 .messageBox {
+  display: flex;
  position: absolute;
  padding: 0.5rem 1.25rem;
-  border-radius: 4px;
+  border-radius: 0 4px 4px 0;
  font-weight: bold;
  font-size: 1.5rem;
  text-align: center;
@@ -10,13 +11,15 @@
  top: 0;
  left: 0;
  width: 100%;
-  max-width: 200px;
+  max-height: min-content;
+  opacity: 0.9;
+  transition: opacity 0.5s ease, transform 0.5s ease;
 }

 .messageBox.hidden {
  opacity: 0;
  pointer-events: none;
-  transition: opacity 1s ease-out;
+  transition: opacity 1s ease-out,transform 0.5 ease;
 }

 .success {
@@ -1,12 +1,12 @@
 "use client";

 import { useState } from "react";
-import axios from "axios";
 import { useRouter } from "next/navigation";
 import Cookies from "js-cookie";
-import { envConfig } from "@/app/lib/config";
-import "./Impressions.css";
 import AlertBox from "../AlertBox/AlertBox";
+import { PostImpressions } from "@/app/lib/postImpressions";
+
+import "./Impressions.css";

 interface CostOption {
  value: number;
@@ -16,6 +16,7 @@ interface ImpressionsProps {
  costs: CostOption[];
  numAccount: number | null;
 }
+
 function Impressions({ costs, numAccount }: ImpressionsProps) {
  const [pages, setPages] = useState("");
  const [cost, setCost] = useState("");
@@ -47,38 +48,20 @@ function Impressions({ costs, numAccount }: ImpressionsProps) {
      return;
    }

-    const token = Cookies.get("token");
-    if (!token) {
-      handleLogout();
+    const result = await PostImpressions({
+      id_cuenta:numAccount,
+      numero_hojas : parseInt(pages),
+      monto: parseInt(cost) * parseInt(pages),
+    });
+
+    if (result.error) {
+      if (result.error === "Token inválido") handleLogout();
+      else setError(result.error);
      return;
    }

-    try {
-      await axios.post(
-        `${envConfig.apiUrl}/impressions`,
-        {
-          numAccount: numAccount,
-          pages: parseInt(pages),
-          cost: parseInt(cost) * parseInt(pages),
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        }
-      );
-
-      setPages("");
-    } catch (error: any) {
-      const errorMessage =
-        error.response?.data?.error || "No se encontró el estudiante";
-
-      if (errorMessage === "Token inválido") {
-        handleLogout();
-      }
-
-      setError(errorMessage);
-    }
+    setPages("");
+    setCost("")
  };

  return (
@@ -119,7 +102,7 @@ function Impressions({ costs, numAccount }: ImpressionsProps) {
        </div>

        <div className="groupLabel">
-          <label className="label">Total: {pages && `$${pages}.00`}</label>
+          <label className="label">Total: {pages && `$${parseInt(cost) * parseInt(pages)}.00`}</label>
        </div>

        <div className="containerButton">
@@ -4,11 +4,12 @@ import { loginUser } from "@/app/lib/login";
 import { useRouter } from "next/navigation";

 import "./Login.css";
+import AlertBox from "../AlertBox/AlertBox";

 function Login() {
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
-  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");

  const router = useRouter();

@@ -18,10 +19,16 @@ function Login() {
    const data = await loginUser(user, password);

    if ("error" in data) {
-      setMessage(data.error);
+      setError(data.error);
    } else {
-      document.cookie = `token=${data.access_token}; path=/; SameSite=Strict`;
-      setMessage("Inicio de sesión exitoso");
+      const token = data.access_token;
+      const payload = JSON.parse(atob(token.split(".")[1]));
+      const id_usuario = payload.id;
+
+      document.cookie = `token=${token}; path=/; SameSite=Strict`;
+      document.cookie = `id_usuario=${id_usuario}; path=/; SameSite=Strict`;
+
+      setError("Inicio de sesión exitoso");
      router.push("/Impresiones");
    }
  };
@@ -63,16 +70,7 @@ function Login() {
          Iniciar sesión
        </button>

-        {message && (
-          <div
-            className={`messageBox ${
-              message.includes("exitoso") ? "success" : "error"
-            }`}
-            style={{ marginTop: "10px" }}
-          >
-            {message}
-          </div>
-        )}
+        {error && <AlertBox message={error} type="error" />}
      </form>
    </section>
  );
@@ -1,141 +1,133 @@
-'use client'
-import { useEffect, useState } from "react";
-import "./Receipt.css"
-import { PostReceipt } from "@/app/lib/receipt";
+"use client";
+import AlertBox from "../AlertBox/AlertBox";
+import { useState } from "react";
+import { PostReceipt } from "@/app/lib/postReceipt";
+import Cookies from "js-cookie";

-function Receipt() {
-    const [folio, setFolio] = useState('');
-    const [amount, setAmount] = useState('');
-    const [date, setDate] = useState('');
+import "./Receipt.css";

-    const [error, setError] = useState('');
-    const [alert, setAlert] = useState('');
-    const [showError, setShowError] = useState(false);
-    const [showAlert, setShowAlert] = useState(false);
-
-    //restrict this month//
-    const day = new Date();
-    const year = day.getFullYear();
-    const month = day.getMonth();
-    const today = day.getDate();
-
-    const minFecha = new Date(year, month, 1).toISOString().split('T')[0];
-    const maxFecha = new Date(year, month, today).toISOString().split('T')[0];
-    //restrict this month//
-
-    //fadeOut alert and error 
-    useEffect(() => {
-        if (alert) {
-            setShowAlert(true);
-            const timeout = setTimeout(() => {
-                setShowAlert(false);
-                setTimeout(() => setAlert(''), 500);
-            }, 6000);
-            return () => clearTimeout(timeout);
-        }
-    }, [alert]);
-
-    useEffect(() => {
-        if (error) {
-            setShowError(true);
-            const timeout = setTimeout(() => {
-                setShowError(false);
-                setTimeout(() => setError(''), 500);
-            }, 6000);
-            return () => clearTimeout(timeout);
-        }
-    }, [error]);
-    //fadeOut alert and error//
-
-    const handleSaveReceipt = ( )=>{
-        //PostReceipt(data{folio,amount,date})
-    }
-
-    return (
-        <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)) {
-                                setFolio(value);
-                            }
-                        }}
-                        placeholder='Numero de folio...'
-                        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 {
-                                    setAlert('')
-                                    setError('El monto no puede superar $1000.00')
-                                }
-                            }
-                        }}
-                        placeholder='Monto recibido...'
-                        inputMode='numeric'
-                        pattern="^\d*\.?\d+$"
-                    />
-                </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='containerButton'>
-                    <button
-                        className="button buttonSearch">
-                        Guardar
-                    </button>
-
-                    {error &&
-                        <div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
-                            {error}
-                        </div>
-                    }
-                    {alert &&
-                        <div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
-                            {alert}
-                        </div>
-                    }
-                </div>
-            </div>
-        </form>
-    )
+interface ReceiptsProps {
+  numAccount: number | null;
 }

-export default Receipt
-//IO
+function Receipt({ numAccount }: ReceiptsProps) {
+  const [folio, setFolio] = useState("");
+  const [amount, setAmount] = useState("");
+  const [date, setDate] = useState("");
+
+  const [error, setError] = useState("");
+  const [alert, setAlert] = useState("");
+
+  //restrict this month//
+  const day = new Date();
+  const year = day.getFullYear();
+  const month = day.getMonth();
+  const today = day.getDate();
+
+  const minFecha = new Date(year, month, 1).toISOString().split("T")[0];
+  const maxFecha = new Date(year, month, today).toISOString().split("T")[0];
+  //restrict this month//
+
+  const handleSaveReceipt = () => {
+    if (!numAccount) {
+      setError("Error busca denuevo al estudiante");
+      return;
+    }
+
+    if (!folio) {
+      setError("Ingresa el folio del tiket");
+      return;
+    }
+
+    if (!amount) {
+      setError("coloca el monto a depositar");
+      return;
+    }
+
+    if (!date) {
+      setError("coloca la fecha");
+      return;
+    }
+
+    PostReceipt({
+      id_cuenta: numAccount,
+      folio_recibo: folio,
+      monto: Number(amount),
+      fecha_recibo: date,
+    });
+  };
+
+  return (
+    <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)) {
+                setFolio(value);
+              }
+            }}
+            placeholder="Numero de folio..."
+            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 {
+                  setAlert("");
+                  setError("El monto no puede superar $1000.00");
+                }
+              }
+            }}
+            placeholder="Monto recibido..."
+            inputMode="numeric"
+            pattern="^\d*\.?\d+$"
+          />
+        </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="containerButton">
+          <button className="button buttonSearch">Guardar</button>
+
+          {error && <AlertBox message={error} type="error" />}
+          {alert && <AlertBox message={alert} type="success" />}
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default Receipt;
+//IO