IO/front-AT
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

fixed problems and add AlertBox

Browse Source
This commit is contained in:
Lino
2025-09-17 19:42:13 -06:00
parent 7040865452
commit 10adca26af
14 changed files with 134 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(private)/ActivosMantenimiento/page.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export default function Page() {
label: "Equipos",
content: (
<>
<SearchUser />
<SearchUser urlBase="ActivosMantenimiento" />
<form className="containerForm">
<label className="label">Equipos disponibles</label>
app/(private)/AgregarTiempo/page.tsx
+30 -17
View File
@@ -1,26 +1,39 @@
import SearchUser from "@/app/Components/SearchUser/searchUser";
import Information from "@/app/Components/Information/information";
import Receipt from "@/app/Components/Receipt/Receipt";
import { GetStudent } from "@/app/lib/getStudent";
import SearchUser from '@/app/Components/SearchUser/searchUser';
import './addTime.css'
import Information from '@/app/Components/Information/information';
import Receipt from '@/app/Components/Receipt/Receipt';
import "./addTime.css";
export default async function Page({ searchParams }: any) {
const numAccount = searchParams?.numAccount
? Number(searchParams.numAccount)
: null;
let student: any = null;
if (numAccount) {
student = await GetStudent(numAccount);
}
export default function Page() {
return (
<section className='containerSection'>
<h2 className='title'> AGREGAR TIEMPO </h2>
<section className="containerSection">
<h2 className="title"> AGREGAR TIEMPO </h2>
<SearchUser />
<SearchUser urlBase="AgregarTiempo" />
<Information
NoCuenta="idcuanta"
Nombre="juan"
/>
{student ? (
<>
<Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
<div className="addTime">
<Receipt />
</div>
<div className="addTime">
<Receipt />
</div>
</>
) : (
<></>
)}
</section>
);
}
//IO
//IO
app/(private)/AsignacionEquipo/page.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ export default function Page() {
label: "Asignar tiempo",
content: (
<>
<SearchUser />
<SearchUser urlBase="AsignacionEquipo"/>
<form className="containerForm"></form>
</>
@@ -39,7 +39,7 @@ export default function Page() {
<input type="checkbox" /> Cuenta
</label>
</div>
<SearchUser />
<SearchUser urlBase="AsignacionEquipo"/>
</>
),
},
app/(private)/AsignacionMesas/page.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ export default function Page() {
label: "Asignar mesa",
content: (
<>
<SearchUser />
<SearchUser urlBase="AsignacionMesas"/>
<form className="containerForm">
<label className="label">Mesas disponibles</label>
@@ -58,7 +58,7 @@ export default function Page() {
<input type="checkbox" /> Cuenta
</label>
</div>
<SearchUser />
<SearchUser urlBase="AsignacionMesas"/>
</>
),
},
app/(private)/BitacoraSanciones/page.tsx
+1 -1
View File
@@ -166,7 +166,7 @@ export default function Page() {
label: "Sanciones",
content: (
<>
<SearchUser />
<SearchUser urlBase="BitacoraSanciones"/>
<Information NoCuenta="id cuenta" Nombre="id nombre" />
<div className={styles.tableContainer}>
<table className={styles.machineTable}>
app/(private)/Impresiones/page.tsx
+13 -7
View File
@@ -6,24 +6,30 @@ import Information from "../../Components/Information/information";
import "@/app/globals.css";
import { GetStudent } from "@/app/lib/getStudent";
import AlertBox from "@/app/Components/AlertBox/AlertBox";
export default async function Page({
searchParams,
}: {
searchParams: { numAccount?: number };
}) {
export default async function Page({ searchParams }: any) {
const params = await searchParams;
const numAccount = params.numAccount ? Number(params.numAccount) : null;
let student: any = null;
let error: string | null = null;
if (numAccount) {
student = await GetStudent(numAccount);
const result = await GetStudent(numAccount);
if (result.error) {
error = result.error;
} else {
student = result;
}
}
return (
<section className="containerSection">
{error && <AlertBox message={error} type="error" />}
<h2 className="title">IMPRESIONES Y PLOTEO</h2>
<SearchUser />
<SearchUser urlBase="Impresiones" />
{student ? (
<>
app/(private)/Inscripciones/page.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function Page() {
<section className="containerSection">
<h2 className="title"> INSCRIPCION </h2>
<SearchUser />
<SearchUser urlBase="Inscripciones"/>
<Information
NoCuenta="idcuanta"
app/(private)/QuitarSancion/page.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default function Page() {
return (
<section className="containerSection">
<h2 className="title"> Quitar Sanciones </h2>
<SearchUser />
<SearchUser urlBase="QuitarSanciones"/>
<div className={styles.tableContainer}>
<table className={styles.machineTable}>
<thead>
app/Components/AlertBox/AlertBox.css
+32
View File
@@ -0,0 +1,32 @@
.messageBox {
position: absolute;
padding: 0.5rem 1.25rem;
border-radius: 4px;
font-weight: bold;
font-size: 1.5rem;
text-align: center;
opacity: 1;
z-index: 100;
top: 0;
left: 0;
width: 100%;
max-width: 200px;
}
.messageBox.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 1s ease-out;
}
.success {
background-color: #d1f7c4;
color: #000000;
border: 1px solid #a5d6a7;
}
.error {
background-color: #ffcdd2;
color: #000000;
border: 1px solid #ef9a9a;
}
app/Components/AlertBox/AlertBox.tsx
+37
View File
@@ -0,0 +1,37 @@
'use client'
import { useEffect, useState } from "react";
import "./AlertBox.css";
interface AlertBoxProps {
message: string;
type: "error" | "success";
duration?: number;
}
export default function AlertBox({ message, type, duration = 6000 }: AlertBoxProps) {
const [visible, setVisible] = useState(false);
const [text, setText] = useState("");
useEffect(() => {
if (message) {
setText(message);
setVisible(true);
const timeout = setTimeout(() => {
setVisible(false);
setTimeout(() => setText(""), 500);
}, duration);
return () => clearTimeout(timeout);
}
}, [message, duration]);
if (!text) return null;
return (
<div className={`messageBox ${type} ${!visible ? "hidden" : ""}`}>
{text}
</div>
);
}
app/Components/Impressions/impressions.tsx
+5 -19
View File
@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
import Cookies from "js-cookie";
import { envConfig } from "@/app/lib/config";
import "./Impressions.css";
import AlertBox from "../AlertBox/AlertBox";
interface CostOption {
value: number;
@@ -20,10 +21,6 @@ function Impressions({ costs, numAccount }: ImpressionsProps) {
const [cost, setCost] = useState("");
const [error, setError] = useState("");
const [alert, setAlert] = useState("");
const [showError, setShowError] = useState(false);
const [showAlert, setShowAlert] = useState(false);
const router = useRouter();
const handleLogout = () => {
@@ -33,7 +30,6 @@ function Impressions({ costs, numAccount }: ImpressionsProps) {
};
const handlePayment = async () => {
setAlert("");
setError("");
if (!numAccount) {
@@ -46,9 +42,9 @@ function Impressions({ costs, numAccount }: ImpressionsProps) {
return;
}
if(!cost){
setError("Selecciona un costo")
return;
if (!cost) {
setError("Selecciona un costo");
return;
}
const token = Cookies.get("token");
@@ -72,7 +68,6 @@ function Impressions({ costs, numAccount }: ImpressionsProps) {
}
);
setAlert("Cobro realizado correctamente");
setPages("");
} catch (error: any) {
const errorMessage =
@@ -132,16 +127,7 @@ function Impressions({ costs, numAccount }: ImpressionsProps) {
Cobrar
</button>
{error && (
<div className={`messageBox error ${!showError ? "hidden" : ""}`}>
{error}
</div>
)}
{alert && (
<div className={`messageBox success ${!showAlert ? "hidden" : ""}`}>
{alert}
</div>
)}
{error && <AlertBox message={error} type="error" />}
</div>
</div>
</form>
app/Components/SearchUser/searchUser.tsx
+8 -2
View File
@@ -2,14 +2,20 @@
import { useRouter } from "next/navigation";
import { useState } from "react";
function SearchUser() {
interface urlProp{
urlBase:string
}
function SearchUser(url:urlProp) {
const [numAccount, setNumAccount] = useState("");
const router = useRouter();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (numAccount) {
router.push(`/Impresiones?numAccount=${numAccount}`);
router.push(`/${url.urlBase}?numAccount=${numAccount}`);
}
};
app/globals.css
-32
View File
@@ -363,38 +363,6 @@ table tr {
align-items: center;
}
.messageBox {
position: absolute;
padding: 0.5rem 1.25rem;
border-radius: 4px;
font-weight: bold;
font-size: 1.5rem;
text-align: center;
opacity: 1;
z-index: 100;
top: 0;
left: 0;
width: 100%;
}
.messageBox.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 1s ease-out;
}
.success {
background-color: #d1f7c4;
color: #000000;
border: 1px solid #a5d6a7;
}
.error {
background-color: #ffcdd2;
color: #000000;
border: 1px solid #ef9a9a;
}
@media (max-width: 1300px) {
.container {
width: 100%;
app/lib/getStudent.ts
+1
View File
@@ -4,6 +4,7 @@ import { envConfig } from "./config";
export async function GetStudent(numAccount: number) {
try {
const response = await axios.get(`${envConfig.apiUrl}/student/${numAccount}`);
console.log(response.data)
return response.data;
} catch (error: any) {
const msg =