CIDWA/front-AT
12
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

added functionalitie to impressions

Browse Source
This commit is contained in:
Lino
2025-09-22 11:57:52 -06:00
parent e9998cac5c
commit 79e9844303
13 changed files with 240 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Components/AlertBox/AlertBox.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
import "./AlertBox.css";
interface AlertBoxProps {
message: string;
message: string | null;
type: "error" | "success";
duration?: number;
}
app/Components/FallingSquares/FallingSquares.tsx
+12
View File
@@ -0,0 +1,12 @@
import "./style.css"
export default function FallingSquares() {
return (
<div className="falling-container">
{Array.from({ length: 10 }).map((_, i) => (
<div key={i} className="square"></div>
))}
</div>
);
}
//Chat
//IO
app/Components/FallingSquares/style.css
+117
View File
@@ -0,0 +1,117 @@
.falling-container {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: -1;
}
.square {
position: absolute;
top: -100px;
opacity: 0.9;
animation: fall linear infinite;
border-radius: 6px;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(110vh) rotate(1080deg);
}
}
.square:nth-child(1) {
left: 10%;
width: 40px;
height: 40px;
background: linear-gradient(45deg, #ff7eb3, #ff758c);
animation-duration: 4s;
animation-delay: 0s;
}
.square:nth-child(2) {
left: 25%;
width: 60px;
height: 60px;
background: linear-gradient(45deg, #43cea2, #185a9d);
animation-duration: 6s;
animation-delay: 2s;
}
.square:nth-child(3) {
left: 40%;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f7971e, #ffd200);
animation-duration: 5s;
animation-delay: 1s;
}
.square:nth-child(4) {
left: 55%;
width: 70px;
height: 70px;
background: linear-gradient(45deg, #7f00ff, #e100ff);
animation-duration: 7s;
animation-delay: 3s;
}
.square:nth-child(5) {
left: 70%;
width: 45px;
height: 45px;
background: linear-gradient(45deg, #00c6ff, #0072ff);
animation-duration: 4.5s;
animation-delay: 1.5s;
}
.square:nth-child(6) {
left: 85%;
width: 55px;
height: 55px;
background: linear-gradient(45deg, #f953c6, #b91d73);
animation-duration: 6.5s;
animation-delay: 2.5s;
}
.square:nth-child(7) {
left: 15%;
width: 65px;
height: 65px;
background: linear-gradient(45deg, #11998e, #38ef7d);
animation-duration: 5.5s;
animation-delay: 1.2s;
}
.square:nth-child(8) {
left: 35%;
width: 40px;
height: 40px;
background: linear-gradient(45deg, #ff4e50, #f9d423);
animation-duration: 7.5s;
animation-delay: 0.5s;
}
.square:nth-child(9) {
left: 60%;
width: 75px;
height: 75px;
background: linear-gradient(45deg, #00b09b, #96c93d);
animation-duration: 4.2s;
animation-delay: 2.8s;
}
.square:nth-child(10) {
left: 80%;
width: 28px;
height: 28px;
background: linear-gradient(45deg, #ff9966, #ff5e62);
animation-duration: 6.8s;
animation-delay: 1.8s;
}
@media (min-width: 768px) {
.square {
animation: fall linear infinite;
}
}
@media (max-width: 767px) {
.square {
animation: none;
}
}
app/Components/Impressions/impressions.tsx
+21 -14
View File
@@ -1,9 +1,8 @@
"use client";
import Cookies from "js-cookie";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Cookies from "js-cookie";
import AlertBox from "../AlertBox/AlertBox";
import { PostImpressions } from "@/app/lib/postImpressions";
import "./Impressions.css";
@@ -21,7 +20,6 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
const [pages, setPages] = useState("");
const [cost, setCost] = useState("");
const [error, setError] = useState("");
const router = useRouter();
const handleLogout = () => {
@@ -31,37 +29,46 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
};
const handlePayment = async () => {
setError("");
if (!numAcount) {
setError("Error busca denuevo al estudiante");
router.push(
`/Impresiones?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
);
return;
}
if (!pages) {
setError("Ingresa el numero de hojas a imprimir");
router.push(
`/Impresiones?numAcount=${numAcount}&error=Ingresa el numero de hojas a imprimir`
);
return;
}
if (!cost) {
setError("Selecciona un costo");
router.push(
`/Impresiones?numAcount=${numAcount}&error=Selecciona un costo`
);
return;
}
const result = await PostImpressions({
id_cuenta:numAcount,
numero_hojas : parseInt(pages),
id_cuenta: numAcount,
numero_hojas: parseInt(pages),
monto: parseInt(cost) * parseInt(pages),
});
if (result.error) {
if (result.error === "Token inválido") handleLogout();
else setError(result.error);
else {
router.push(
`/Impresiones?numAcount=${numAcount}&error=${result.error}`
);
}
return;
}
setPages("");
setCost("")
setCost("");
};
return (
@@ -102,15 +109,15 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
</div>
<div className="groupLabel">
<label className="label">Total: {pages && `$${parseInt(cost) * parseInt(pages)}.00`}</label>
<label className="label">
Total: {(pages && cost) && `$${parseInt(cost) * parseInt(pages)}.00`}
</label>
</div>
<div className="containerButton">
<button className="button buttonCharge" type="submit">
Cobrar
</button>
{error && <AlertBox message={error} type="error" />}
</div>
</div>
</form>
app/Components/Receipt/Receipt.tsx
+35 -21
View File
@@ -1,8 +1,8 @@
"use client";
import AlertBox from "../AlertBox/AlertBox";
import { useState } from "react";
import { PostReceipt } from "@/app/lib/postReceipt";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import "./Receipt.css";
@@ -11,13 +11,12 @@ interface ReceiptsProps {
}
function Receipt({ numAcount }: ReceiptsProps) {
const router = useRouter();
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();
@@ -28,33 +27,50 @@ function Receipt({ numAcount }: ReceiptsProps) {
const maxFecha = new Date(year, month, today).toISOString().split("T")[0];
//restrict this month//
const handleSaveReceipt = () => {
const handleSaveReceipt = async () => {
if (!numAcount) {
setError("Error busca denuevo al estudiante");
router.push(
`/Impresiones?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
);
return;
}
if (!folio) {
setError("Ingresa el folio del tiket");
router.push(
`/Impresiones?numAcount=${numAcount}&error=Ingresa el folio del tiket`
);
return;
}
if (!amount) {
setError("coloca el monto a depositar");
router.push(
`/Impresiones?numAcount=${numAcount}&error=coloca el monto a depositar`
);
return;
}
if (!date) {
setError("coloca la fecha");
router.push(`/Impresiones?numAcount=${numAcount}&error=coloca la fecha`);
return;
}
PostReceipt({
id_cuenta: numAcount,
folio_recibo: folio,
monto: Number(amount),
fecha_recibo: date,
});
try {
await PostReceipt({
id_cuenta: numAcount,
folio_recibo: folio,
monto: Number(amount),
fecha_recibo: date,
});
setFolio("");
setAmount("");
setDate("");
router.push(`/Impresiones?numAcount=${numAcount}&success=1`);
} catch (err: any) {
console.error(err);
router.push(`/Impresiones?numAcount=${numAcount}&error=${err}`);
}
};
return (
@@ -96,8 +112,9 @@ function Receipt({ numAcount }: ReceiptsProps) {
if (value === "" || numericValue <= 1000) {
setAmount(value);
} else {
setAlert("");
setError("El monto no puede superar $1000.00");
router.push(
`/Impresiones?numAcount=${numAcount}&error=El monto no puede superar $1000.00`
);
}
}
}}
@@ -120,9 +137,6 @@ function Receipt({ numAcount }: ReceiptsProps) {
<div className="containerButton">
<button className="button buttonSearch">Guardar</button>
{error && <AlertBox message={error} type="error" />}
{alert && <AlertBox message={alert} type="success" />}
</div>
</div>
</form>
app/Components/SearchUser/searchUser.tsx
+10 -3
View File
@@ -1,21 +1,28 @@
'use client'
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useEffect, useState } from "react";
interface urlProp{
urlBase:string
value:string|null
}
function SearchUser(url:urlProp) {
function SearchUser(props:urlProp) {
const [numAcount, setnumAcount] = useState("");
const router = useRouter();
useEffect(() => {
if (props.value) {
setnumAcount(props.value);
}
}, [props.value]);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (numAcount) {
router.push(`/${url.urlBase}?numAcount=${numAcount}`);
router.push(`/${props.urlBase}?numAcount=${numAcount}`);
}
};
app/Components/Wave/wave.module.css
+1
View File
@@ -51,5 +51,6 @@
}
.wave {
display: none;
animation: none;
}
}
app/Components/Wave/wavesBack.tsx
+2
View File
@@ -10,3 +10,5 @@ export default function WavesBackground() {
</div>
);
}
//Chat
//IO