IO/front-AT
1
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/(private)/Impresiones/page.tsx
+17 -8
View File
@@ -3,26 +3,29 @@ import Receipt from "../../Components/Receipt/Receipt";
import Impressions from "../../Components/Impressions/impressions";
import Toggle from "../../Components/Toggle/Toggle";
import Information from "../../Components/Information/information";
import AlertBox from "@/app/Components/AlertBox/AlertBox";
import { GetStudent } from "@/app/lib/getStudent";
import "@/app/globals.css";
export default async function Page(props: {
searchParams?: Promise<{
numAcount: string;
success?: string;
error?: string;
}>;
}) {
}) {
const params = await props.searchParams;
const numAcount = params?.numAcount ? parseInt(params.numAcount) : null;
const numAcount = params?.numAcount ? params.numAcount : null;
const showSuccess = params?.success ? parseInt(params.success) : null;
let showError = params?.error ? params.error : null;
let student: any = null;
let error: string | null = null;
if (numAcount) {
const result = await GetStudent(numAcount);
const result = await GetStudent(parseInt(numAcount));
if (result.error) {
error = result.error;
showError = "Alumno no encontrado"
} else {
student = result;
}
@@ -30,10 +33,16 @@ export default async function Page(props: {
return (
<section className="containerSection">
{error && <AlertBox key={error} message={error} type="error" />}
{showError && (
<AlertBox key={Date.now()} message={showError} type="error" />
)}
{showSuccess && (
<AlertBox message="Recibo guardado correctamente" type="success" />
)}
<h2 className="title">IMPRESIONES Y PLOTEO</h2>
<SearchUser urlBase="Impresiones" />
<SearchUser urlBase="Impresiones" value={numAcount}/>
{student ? (
<>
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
app/globals.css
+2 -2
View File
@@ -289,7 +289,7 @@ form {
.toggleGroup {
display: flex;
gap: 10px;
gap: 5px;
background-color: #f3f4f6;
border-radius: 6px;
flex-wrap: wrap;
@@ -304,7 +304,7 @@ form {
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
font-weight: 500;
overflow-y: hidden;
overflow: hidden;
max-height: 60px;
}
app/layout.tsx
+3 -1
View File
@@ -4,6 +4,7 @@ import Header from "./Components/Header/Header";
import Footer from "./Components/Footer/Footer";
import WavesBackground from "./Components/Wave/wavesBack";
import "./globals.css";
import FallingSquares from "./Components/FallingSquares/FallingSquares";
const poppins = Poppins({
variable: "--font-poppins",
@@ -25,9 +26,10 @@ export default function RootLayout({
}>) {
return (
<html lang="es">
<body className={poppins.variable} suppressHydrationWarning>
<body className={poppins.variable}>
<Header />
<main>
<FallingSquares/>
{children}
<WavesBackground />
</main>
app/not-found.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function NotFound() {
return (
<section>
<img
src="/404-bg.png" // 👈 pon tu imagen en /public/404-bg.png
src="/404-bg.png"
alt="Página no encontrada"
/>
middleware.ts
+18 -1
View File
@@ -13,6 +13,23 @@ export function middleware(request: NextRequest) {
}
export const config = {
matcher: []
matcher: [
"/Reportes",
"/Monitor",
"/QuitarSancion",
"/Programas",
"/Mensajes",
"/Inscritos",
"/Inscripciones",
"/InformacionEquipo",
"/Impresiones",
"/CambiarPass",
"/BitacoraSanciones",
"/AsignacionMesas",
"/AsignacionEquipo",
"/Alta",
"/AgregarTiempo",
"/ActivosMantenimiento",
],
};
//IO