Merge branch 'Lino' of https://github.com/IO420/Nexus into Carlos
This commit is contained in:
@@ -3,123 +3,128 @@ import SearchUser from "@/app/Components/SearchUser/searchUser";
|
||||
import Toggle from "@/app/Components/Toggle/Toggle";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Page() {
|
||||
export default function Page(props: {
|
||||
searchParams?: Promise<{
|
||||
numAcount: string;
|
||||
success?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
}) {
|
||||
const params = props.searchParams;
|
||||
|
||||
const [tiempo, setTiempo] = useState("");
|
||||
const [selectedTable, setSelectedTable] = useState(null);
|
||||
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title">EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
|
||||
|
||||
<Toggle
|
||||
defaultView="Equipos"
|
||||
options={[
|
||||
{
|
||||
key: "Equipos",
|
||||
label: "Equipos",
|
||||
content: (
|
||||
<>
|
||||
<SearchUser urlBase="ActivosMantenimiento" />
|
||||
<Toggle
|
||||
defaultView="Equipos"
|
||||
options={[
|
||||
{
|
||||
key: "Equipos",
|
||||
label: "Equipos",
|
||||
content: (
|
||||
<>
|
||||
<SearchUser urlBase="ActivosMantenimiento" value={"2"} />
|
||||
|
||||
<form className="containerForm">
|
||||
<label className="label">Equipos disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Equipos disponibles --</option>
|
||||
<option value="15">1</option>
|
||||
<option value="30">2</option>
|
||||
<option value="45">3</option>
|
||||
<option value="60">4</option>
|
||||
<option value="90">5</option>
|
||||
<option value="120">6</option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
<form className="containerForm">
|
||||
<label className="label">Equipos disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Equipos disponibles --</option>
|
||||
<option value="15">1</option>
|
||||
<option value="30">2</option>
|
||||
<option value="45">3</option>
|
||||
<option value="60">4</option>
|
||||
<option value="90">5</option>
|
||||
<option value="120">6</option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Areas",
|
||||
label: "Areas",
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Áreas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Áreas disponibles --</option>
|
||||
<option value="15">PECERA</option>
|
||||
<option value="30">JAULA</option>
|
||||
<option value="45">HUACAL</option>
|
||||
<option value="60">PCNET1</option>
|
||||
<option value="90">PCNET2</option>
|
||||
</select>
|
||||
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Activo
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Mantenimiento
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Areas",
|
||||
label: "Areas",
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Áreas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Áreas disponibles --</option>
|
||||
<option value="15">PECERA</option>
|
||||
<option value="30">JAULA</option>
|
||||
<option value="45">HUACAL</option>
|
||||
<option value="60">PCNET1</option>
|
||||
<option value="90">PCNET2</option>
|
||||
</select>
|
||||
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Activo
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Mantenimiento
|
||||
</label>
|
||||
</div>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Actualizar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Mesas",
|
||||
label: "Liberar mesa",
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Mesas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Mesas disponibles --</option>
|
||||
<option value="15">1</option>
|
||||
<option value="30">4</option>
|
||||
<option value="45">7</option>
|
||||
<option value="60">10</option>
|
||||
<option value="90">15</option>
|
||||
</select>
|
||||
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Actualizar
|
||||
</button>
|
||||
<div className="checkbox">
|
||||
<input type="checkbox" />
|
||||
<label>Mantenimiento</label>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Mesas",
|
||||
label: "Liberar mesa",
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Mesas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Mesas disponibles --</option>
|
||||
<option value="15">1</option>
|
||||
<option value="30">4</option>
|
||||
<option value="45">7</option>
|
||||
<option value="60">10</option>
|
||||
<option value="90">15</option>
|
||||
</select>
|
||||
|
||||
<div className="checkbox">
|
||||
<input type="checkbox" />
|
||||
<label>
|
||||
Mantenimiento
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Confirmar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Confirmar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,29 +5,34 @@ import { GetStudent } from "@/app/lib/getStudent";
|
||||
|
||||
import "./addTime.css";
|
||||
|
||||
export default async function Page({ searchParams }: any) {
|
||||
export default async function Page(props: {
|
||||
searchParams?: Promise<{
|
||||
numAcount: string;
|
||||
}>;
|
||||
}) {
|
||||
const params = await props.searchParams;
|
||||
const numAcount = params?.numAcount ? params.numAcount : null;
|
||||
|
||||
const numAccount = searchParams?.numAccount
|
||||
? Number(searchParams.numAccount)
|
||||
: null;
|
||||
|
||||
let student: any = null;
|
||||
if (numAccount) {
|
||||
student = await GetStudent(numAccount);
|
||||
if (numAcount) {
|
||||
student = await GetStudent(parseInt(numAcount));
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> AGREGAR TIEMPO </h2>
|
||||
|
||||
<SearchUser urlBase="AgregarTiempo" />
|
||||
<SearchUser urlBase="AgregarTiempo" value={numAcount} />
|
||||
|
||||
{student ? (
|
||||
<>
|
||||
<Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
|
||||
|
||||
<div className="addTime">
|
||||
<Receipt />
|
||||
<Receipt
|
||||
urlBase={"/ActivosMantenimiento"}
|
||||
numAcount={student.id_cuenta}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -1,50 +1,45 @@
|
||||
"use client";
|
||||
import SearchUser from "@/app/Components/SearchUser/searchUser";
|
||||
import Toggle from "@/app/Components/Toggle/Toggle";
|
||||
import { useState } from "react";
|
||||
// Assuming you will create this new component
|
||||
|
||||
export default function Page() {
|
||||
const [tiempo, setTiempo] = useState("");
|
||||
const [selectedTable, setSelectedTable] = useState(null);
|
||||
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> ASIGNACION DE EQUIPOS </h2>
|
||||
|
||||
<Toggle
|
||||
defaultView="Asignar"
|
||||
options={[
|
||||
{
|
||||
key: "Asignar",
|
||||
label: "Asignar tiempo",
|
||||
content: (
|
||||
<>
|
||||
<SearchUser urlBase="AsignacionEquipo"/>
|
||||
<Toggle
|
||||
defaultView="Asignar"
|
||||
options={[
|
||||
{
|
||||
key: "Asignar",
|
||||
label: "Asignar tiempo",
|
||||
content: (
|
||||
<>
|
||||
<SearchUser urlBase="AsignacionEquipo" value={"2"} />
|
||||
|
||||
<form className="containerForm"></form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Liberar",
|
||||
label: "Cancelar tiempo",
|
||||
content: (
|
||||
<>
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> Equipo
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Cuenta
|
||||
</label>
|
||||
</div>
|
||||
<SearchUser urlBase="AsignacionEquipo"/>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<form className="containerForm"></form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Liberar",
|
||||
label: "Cancelar tiempo",
|
||||
content: (
|
||||
<>
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> Equipo
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Cuenta
|
||||
</label>
|
||||
</div>
|
||||
<SearchUser urlBase="AsignacionEquipo" value={"2"} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,68 +2,66 @@
|
||||
import SearchUser from "@/app/Components/SearchUser/searchUser";
|
||||
import Toggle from "@/app/Components/Toggle/Toggle";
|
||||
import { useState } from "react";
|
||||
// Assuming you will create this new component
|
||||
|
||||
export default function Page() {
|
||||
const [tiempo, setTiempo] = useState("");
|
||||
const [selectedTable, setSelectedTable] = useState(null);
|
||||
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> ASIGNACION DE MESAS </h2>
|
||||
|
||||
<Toggle
|
||||
defaultView="Asignar"
|
||||
options={[
|
||||
{
|
||||
key: "Asignar",
|
||||
label: "Asignar mesa",
|
||||
content: (
|
||||
<>
|
||||
<SearchUser urlBase="AsignacionMesas"/>
|
||||
<Toggle
|
||||
defaultView="Asignar"
|
||||
options={[
|
||||
{
|
||||
key: "Asignar",
|
||||
label: "Asignar mesa",
|
||||
content: (
|
||||
<>
|
||||
<SearchUser urlBase="AsignacionMesas" value={"3"} />
|
||||
|
||||
<form className="containerForm">
|
||||
<label className="label">Mesas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Mesas disponibles --</option>
|
||||
<option value="15">1 </option>
|
||||
<option value="30">3 </option>
|
||||
<option value="45">4 </option>
|
||||
<option value="60">22 </option>
|
||||
<option value="90">15 </option>
|
||||
<option value="120">20 </option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Liberar",
|
||||
label: "Liberar mesa",
|
||||
content: (
|
||||
<>
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> Mesa
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Cuenta
|
||||
</label>
|
||||
<form className="containerForm">
|
||||
<label className="label">Mesas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Mesas disponibles --</option>
|
||||
<option value="15">1 </option>
|
||||
<option value="30">3 </option>
|
||||
<option value="45">4 </option>
|
||||
<option value="60">22 </option>
|
||||
<option value="90">15 </option>
|
||||
<option value="120">20 </option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
<SearchUser urlBase="AsignacionMesas"/>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</form>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Liberar",
|
||||
label: "Liberar mesa",
|
||||
content: (
|
||||
<>
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> Mesa
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Cuenta
|
||||
</label>
|
||||
</div>
|
||||
<SearchUser urlBase="AsignacionMesas" value={"3"} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,11 +8,16 @@ import Information from "@/app/Components/Information/information";
|
||||
import SearchUser from "@/app/Components/SearchUser/searchUser";
|
||||
import { GetStudent } from "@/app/lib/getStudent";
|
||||
|
||||
export default function Page({ searchParams }: any) {
|
||||
const params = searchParams;
|
||||
export default async function Page(props: {
|
||||
searchParams?: Promise<{
|
||||
numAcount: string;
|
||||
}>;
|
||||
}) {
|
||||
const params = await props.searchParams;
|
||||
const numAcount = params?.numAcount ? params.numAcount : null;
|
||||
|
||||
let student: any = null;
|
||||
let error: string | null = null;
|
||||
let student: any = null;
|
||||
let error: string | null = null;
|
||||
|
||||
const [usuario_sanciones] = useState([
|
||||
{
|
||||
@@ -172,8 +177,8 @@ export default function Page({ searchParams }: any) {
|
||||
label: "Sanciones",
|
||||
content: (
|
||||
<>
|
||||
<SearchUser urlBase="BitacoraSanciones" />
|
||||
|
||||
<SearchUser urlBase="BitacoraSanciones" value={numAcount} />
|
||||
|
||||
<Information NoCuenta="id cuenta" Nombre="id nombre" />
|
||||
|
||||
<form className="containerForm">
|
||||
|
||||
@@ -3,22 +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({ searchParams }: any) {
|
||||
const params = await searchParams;
|
||||
const numAccount = params.numAccount ? Number(params.numAccount) : null;
|
||||
export default async function Page(props: {
|
||||
searchParams?: Promise<{
|
||||
numAcount: string;
|
||||
success?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
}) {
|
||||
const params = await props.searchParams;
|
||||
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 (numAccount) {
|
||||
const result = await GetStudent(numAccount);
|
||||
if (numAcount) {
|
||||
const result = await GetStudent(parseInt(numAcount));
|
||||
|
||||
if (result.error) {
|
||||
error = result.error;
|
||||
showError = "Alumno no encontrado";
|
||||
} else {
|
||||
student = result;
|
||||
}
|
||||
@@ -26,10 +33,16 @@ export default async function Page({ searchParams }: any) {
|
||||
|
||||
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 ? (
|
||||
<>
|
||||
@@ -46,7 +59,12 @@ export default async function Page({ searchParams }: any) {
|
||||
{
|
||||
key: "1",
|
||||
label: "Recibo",
|
||||
content: <Receipt numAccount={student.id_cuenta}/>,
|
||||
content: (
|
||||
<Receipt
|
||||
urlBase="/Impresiones"
|
||||
numAcount={student.id_cuenta}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
@@ -54,7 +72,7 @@ export default async function Page({ searchParams }: any) {
|
||||
content: (
|
||||
<Impressions
|
||||
costs={[{ value: 1 }, { value: 2 }]}
|
||||
numAccount={student.id_cuenta}
|
||||
numAcount={student.id_cuenta}
|
||||
/>
|
||||
),
|
||||
},
|
||||
@@ -73,7 +91,7 @@ export default async function Page({ searchParams }: any) {
|
||||
{ value: 12 },
|
||||
{ value: 14 },
|
||||
]}
|
||||
numAccount={student.id_cuenta}
|
||||
numAcount={student.id_cuenta}
|
||||
/>
|
||||
),
|
||||
},
|
||||
@@ -101,7 +119,7 @@ export default async function Page({ searchParams }: any) {
|
||||
{ value: 150 },
|
||||
{ value: 200 },
|
||||
]}
|
||||
numAccount={student.id_cuenta}
|
||||
numAcount={student.id_cuenta}
|
||||
/>
|
||||
),
|
||||
},
|
||||
@@ -111,7 +129,7 @@ export default async function Page({ searchParams }: any) {
|
||||
content: (
|
||||
<Impressions
|
||||
costs={[{ value: 1 }, { value: 2 }, { value: 5 }]}
|
||||
numAccount={student.id_cuenta}
|
||||
numAcount={student.id_cuenta}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import "./inscriptions.css";
|
||||
|
||||
import SearchUser from "@/app/Components/SearchUser/searchUser";
|
||||
import Information from "@/app/Components/Information/information";
|
||||
import StepNavigator from "@/app/Components/StepNavigator/StepNavigator";
|
||||
@@ -7,14 +5,20 @@ import Receipt from "@/app/Components/Receipt/Receipt";
|
||||
import Selection from "@/app/Components/Selection/Selection";
|
||||
import { GetStudent } from "@/app/lib/getStudent";
|
||||
|
||||
export default async function Page({ searchParams }: any) {
|
||||
const params = await searchParams;
|
||||
const numAccount = params.numAccount ? Number(params.numAccount) : null;
|
||||
import "./inscriptions.css";
|
||||
|
||||
export default async function Page(props: {
|
||||
searchParams?: Promise<{
|
||||
numAcount: string;
|
||||
}>;
|
||||
}) {
|
||||
const params = await props.searchParams;
|
||||
const numAcount = params?.numAcount ? params.numAcount : null;
|
||||
|
||||
let student: any = null;
|
||||
let error: string | null = null;
|
||||
if (numAccount) {
|
||||
const result = await GetStudent(numAccount);
|
||||
if (numAcount) {
|
||||
const result = await GetStudent(parseInt(numAcount));
|
||||
|
||||
if (result.error) {
|
||||
error = result.error;
|
||||
@@ -27,7 +31,7 @@ export default async function Page({ searchParams }: any) {
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> INSCRIPCION </h2>
|
||||
|
||||
<SearchUser urlBase="Inscripciones" />
|
||||
<SearchUser urlBase="Inscripciones" value={numAcount} />
|
||||
|
||||
{student ? (
|
||||
<>
|
||||
@@ -40,7 +44,7 @@ export default async function Page({ searchParams }: any) {
|
||||
|
||||
<StepNavigator totalSteps={2}>
|
||||
<Selection />
|
||||
<Receipt numAccount={student.id_cuenta}/>
|
||||
<Receipt urlBase={"Inscripciones"} numAcount={student.id_cuenta} />
|
||||
</StepNavigator>
|
||||
</>
|
||||
) : (
|
||||
@@ -49,3 +53,4 @@ export default async function Page({ searchParams }: any) {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function Page() {
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> Quitar Sanciones </h2>
|
||||
<SearchUser urlBase="QuitarSancion"/>
|
||||
<SearchUser urlBase="QuitarSancion" value={"2"} />
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import "./AlertBox.css";
|
||||
|
||||
interface AlertBoxProps {
|
||||
message: string;
|
||||
message: string | null;
|
||||
type: "error" | "success";
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
export default function AlertBox({ message, type, duration = 6000 }: AlertBoxProps) {
|
||||
export default function AlertBox({
|
||||
message,
|
||||
type,
|
||||
duration = 6000,
|
||||
}: AlertBoxProps) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
|
||||
@@ -1,173 +1,173 @@
|
||||
.barNavigation {
|
||||
text-align: center;
|
||||
background-color: rgb(1, 92, 184);
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
min-height: 40px;
|
||||
text-align: center;
|
||||
background-color: rgb(1, 92, 184);
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.barNavigation ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.barNavigation li {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s ease;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.barNavigation li:hover {
|
||||
background-color: #d59f0f;
|
||||
background-color: #d59f0f;
|
||||
}
|
||||
|
||||
.barNavigation ul.active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menuToggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menuToggle div {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.subMenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.subMenu ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 61, 121, 1);
|
||||
transition: color 0.3s ease, opacity 0.3s ease;
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(1, 92, 184);
|
||||
transition: color 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.subMenu.open ul {
|
||||
display: flex;
|
||||
color: rgba(0, 61, 121, 1);
|
||||
display: flex;
|
||||
color: rgba(0, 61, 121, 1);
|
||||
}
|
||||
|
||||
.subMenu ul:hover {
|
||||
color: #5b8cc9;
|
||||
color: #5b8cc9;
|
||||
}
|
||||
|
||||
.subMenu:hover ul {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.subMenu li {
|
||||
padding: 10px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.subMenu span {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.containerLinks {
|
||||
padding: 0 !important;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 0 !important;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
thead,tbody{
|
||||
font-size: 1.25rem;
|
||||
thead,
|
||||
tbody {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.menuToggle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: end;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.menuToggle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: end;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.menuToggle.center {
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menuToggle.center {
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
.barNavigation {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.barNavigation {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
}
|
||||
.barNavigation ul {
|
||||
position: absolute;
|
||||
background-color: rgb(1, 92, 184);
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.barNavigation ul {
|
||||
position: absolute;
|
||||
background-color: rgb(1, 92, 184);
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
height: auto;
|
||||
}
|
||||
.barNavigation {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.barNavigation {
|
||||
padding: 0;
|
||||
}
|
||||
.barNavigation li:hover {
|
||||
background-color: #d59f0f;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.barNavigation li:hover {
|
||||
background-color: #d59f0f;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
.subMenu ul {
|
||||
width: 90%;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
background-color: rgba(0, 61, 121, 1);
|
||||
}
|
||||
|
||||
.subMenu ul {
|
||||
width: 90%;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
background-color: rgba(0, 61, 121, 1);
|
||||
}
|
||||
|
||||
thead,tbody{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
thead,
|
||||
tbody {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,12 +90,12 @@ function BarNavigation() {
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/QuitarSancion" className="links">
|
||||
Quitar sancion
|
||||
<span>Quitar sancion</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/CambiarPass" className="links">
|
||||
Cambiar contraseña
|
||||
<span> Cambiar contraseña</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -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";
|
||||
@@ -14,14 +13,13 @@ interface CostOption {
|
||||
|
||||
interface ImpressionsProps {
|
||||
costs: CostOption[];
|
||||
numAccount: number | null;
|
||||
numAcount: number | null;
|
||||
}
|
||||
|
||||
function Impressions({ costs, numAccount }: ImpressionsProps) {
|
||||
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, numAccount }: ImpressionsProps) {
|
||||
};
|
||||
|
||||
const handlePayment = async () => {
|
||||
setError("");
|
||||
|
||||
if (!numAccount) {
|
||||
setError("Error busca denuevo al estudiante");
|
||||
if (!numAcount) {
|
||||
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:numAccount,
|
||||
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, numAccount }: 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>
|
||||
|
||||
@@ -10,6 +10,7 @@ function Login() {
|
||||
const [user, setUser] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [alert, setAlert] = useState("");
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@@ -28,7 +29,7 @@ function Login() {
|
||||
document.cookie = `token=${token}; path=/; SameSite=Strict`;
|
||||
document.cookie = `id_usuario=${id_usuario}; path=/; SameSite=Strict`;
|
||||
|
||||
setError("Inicio de sesión exitoso");
|
||||
setAlert("Inicio de sesión exitoso");
|
||||
router.push("/Impresiones");
|
||||
}
|
||||
};
|
||||
@@ -71,6 +72,7 @@ function Login() {
|
||||
</button>
|
||||
|
||||
{error && <AlertBox message={error} type="error" />}
|
||||
{alert && <AlertBox message={alert} type="success" />}
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
@media (max-width: 800px) {
|
||||
.button-logout {
|
||||
color: transparent;
|
||||
padding: 1.5rem;
|
||||
padding: 2rem;
|
||||
font-size: 0px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
@@ -14,8 +14,11 @@ export default function Logout() {
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={handleLogout} className="button button-logout">
|
||||
Cerrar sesión
|
||||
</button>
|
||||
<>
|
||||
<h4></h4>
|
||||
<button onClick={handleLogout} className="button button-logout">
|
||||
Cerrar sesión
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
"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";
|
||||
|
||||
interface ReceiptsProps {
|
||||
numAccount: number | null;
|
||||
urlBase: string;
|
||||
numAcount: number | null;
|
||||
}
|
||||
|
||||
function Receipt({ numAccount }: ReceiptsProps) {
|
||||
function Receipt({ urlBase, 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 +28,50 @@ function Receipt({ numAccount }: ReceiptsProps) {
|
||||
const maxFecha = new Date(year, month, today).toISOString().split("T")[0];
|
||||
//restrict this month//
|
||||
|
||||
const handleSaveReceipt = () => {
|
||||
if (!numAccount) {
|
||||
setError("Error busca denuevo al estudiante");
|
||||
const handleSaveReceipt = async () => {
|
||||
if (!numAcount) {
|
||||
router.push(
|
||||
`${urlBase}?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!folio) {
|
||||
setError("Ingresa el folio del tiket");
|
||||
router.push(
|
||||
`${urlBase}?numAcount=${numAcount}&error=Ingresa el folio del tiket`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!amount) {
|
||||
setError("coloca el monto a depositar");
|
||||
router.push(
|
||||
`${urlBase}?numAcount=${numAcount}&error=coloca el monto a depositar`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!date) {
|
||||
setError("coloca la fecha");
|
||||
router.push(`${urlBase}?numAcount=${numAcount}&error=coloca la fecha`);
|
||||
return;
|
||||
}
|
||||
|
||||
PostReceipt({
|
||||
id_cuenta: numAccount,
|
||||
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(`${urlBase}?numAcount=${numAcount}&success=1`);
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
router.push(`${urlBase}?numAcount=${numAcount}&error=${err}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -70,8 +87,8 @@ function Receipt({ numAccount }: ReceiptsProps) {
|
||||
<input
|
||||
type="text"
|
||||
value={folio}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
onChange={(error) => {
|
||||
const value = error.target.value;
|
||||
if (/^\d*$/.test(value)) {
|
||||
setFolio(value);
|
||||
}
|
||||
@@ -96,8 +113,9 @@ function Receipt({ numAccount }: 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 +138,6 @@ function Receipt({ numAccount }: 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>
|
||||
|
||||
@@ -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) {
|
||||
const [numAccount, setNumAccount] = useState("");
|
||||
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 (numAccount) {
|
||||
router.push(`/${url.urlBase}?numAccount=${numAccount}`);
|
||||
if (numAcount) {
|
||||
router.push(`/${props.urlBase}?numAcount=${numAcount}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -27,11 +34,11 @@ function SearchUser(url:urlProp) {
|
||||
<div className="groupInput">
|
||||
<input
|
||||
type="text"
|
||||
value={numAccount}
|
||||
value={numAcount}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
if (/^\d*$/.test(value) && value.length <= 9) {
|
||||
setNumAccount(value);
|
||||
setnumAcount(value);
|
||||
}
|
||||
}}
|
||||
placeholder="Coloca un número de cuenta..."
|
||||
|
||||
@@ -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
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -51,5 +51,6 @@
|
||||
}
|
||||
.wave {
|
||||
display: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -10,3 +10,5 @@ export default function WavesBackground() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
//Chat
|
||||
//IO
|
||||
@@ -5,17 +5,17 @@ import { useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const LoginRedirect = ({ children }: { children: React.ReactNode }) => {
|
||||
const { loading, authenticated } = useAuth();
|
||||
const router = useRouter();
|
||||
const { loading, authenticated } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && authenticated) {
|
||||
router.push("/Impresiones");
|
||||
}
|
||||
}, [loading, authenticated, router]);
|
||||
useEffect(() => {
|
||||
if (!loading && authenticated) {
|
||||
router.push("/Impresiones");
|
||||
}
|
||||
}, [loading, authenticated, router]);
|
||||
|
||||
if (loading) return <p>Cargando...</p>;
|
||||
if (loading) return <p>Cargando...</p>;
|
||||
|
||||
return !authenticated ? <>{children}</> : null;
|
||||
return !authenticated ? <>{children}</> : null;
|
||||
};
|
||||
//IO
|
||||
//IO
|
||||
|
||||
@@ -18,4 +18,4 @@ export const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
return authenticated ? <>{children}</> : null;
|
||||
};
|
||||
//IO
|
||||
//IO
|
||||
|
||||
+50
-7
@@ -13,6 +13,7 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -101,7 +102,7 @@ footer p {
|
||||
border-radius: 4px;
|
||||
width: 90%;
|
||||
max-width: 1150px;
|
||||
height: 550px;
|
||||
height: 600px;
|
||||
min-height: 520px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
@@ -153,18 +154,18 @@ select {
|
||||
border: 1px solid #cfcfcf;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
padding: 1rem 1.75rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
@@ -252,7 +253,7 @@ a {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 2.5rem;
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
text-align: start;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
@@ -288,7 +289,7 @@ form {
|
||||
|
||||
.toggleGroup {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 5px;
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 6px;
|
||||
flex-wrap: wrap;
|
||||
@@ -297,13 +298,14 @@ form {
|
||||
|
||||
.toggleButton {
|
||||
flex: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.toggleButton.active {
|
||||
@@ -375,6 +377,22 @@ table tr {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.loginContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media(max-width: 1330px) {
|
||||
.mainContainer {
|
||||
grid-template-rows: 60px 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
@@ -398,6 +416,10 @@ table tr {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
grid-template-rows: 40px 1fr;
|
||||
}
|
||||
|
||||
.img {
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
@@ -442,6 +464,20 @@ table tr {
|
||||
|
||||
footer p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -450,3 +486,10 @@ table tr {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.title {
|
||||
max-width: 300px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
+3
-2
@@ -2,9 +2,9 @@ import type { Metadata } from "next";
|
||||
import { Poppins } from "next/font/google";
|
||||
import Header from "./Components/Header/Header";
|
||||
import Footer from "./Components/Footer/Footer";
|
||||
import BarNavigation from "./Components/BarNavigation/BarNavigation";
|
||||
import WavesBackground from "./Components/visual/Wave/wavesBack";
|
||||
import FallingSquares from "./Components/visual/Wave/FallingSquares/FallingSquares";
|
||||
import "./globals.css";
|
||||
import WavesBackground from "./Components/Wave/wavesBack";
|
||||
|
||||
const poppins = Poppins({
|
||||
variable: "--font-poppins",
|
||||
@@ -29,6 +29,7 @@ export default function RootLayout({
|
||||
<body className={poppins.variable}>
|
||||
<Header />
|
||||
<main>
|
||||
<FallingSquares />
|
||||
{children}
|
||||
<WavesBackground />
|
||||
</main>
|
||||
|
||||
@@ -11,7 +11,6 @@ const apiClient = axios.create({
|
||||
|
||||
apiClient.interceptors.request.use((config) => {
|
||||
const token = Cookies.get("token");
|
||||
console.log(token)
|
||||
if (token) {
|
||||
if (config.headers && "set" in config.headers) {
|
||||
config.headers.set("Authorization", `Bearer ${token}`);
|
||||
@@ -21,3 +20,4 @@ apiClient.interceptors.request.use((config) => {
|
||||
});
|
||||
|
||||
export default apiClient;
|
||||
//IO
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export const envConfig = {
|
||||
apiUrl: process.env.NEXT_PUBLIC_API_URL,
|
||||
};
|
||||
//IO
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import axios from "axios";
|
||||
import { envConfig } from "./config";
|
||||
|
||||
export async function GetStudent(numAccount: number) {
|
||||
export async function GetStudent(numAcount: number) {
|
||||
try {
|
||||
const response = await axios.get(`${envConfig.apiUrl}/student/${numAccount}`);
|
||||
console.log(response.data)
|
||||
const response = await axios.get(
|
||||
`${envConfig.apiUrl}/student/${numAcount}`
|
||||
);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
const msg =
|
||||
@@ -14,3 +15,4 @@ export async function GetStudent(numAccount: number) {
|
||||
return { error: msg };
|
||||
}
|
||||
}
|
||||
//IO
|
||||
|
||||
@@ -16,3 +16,4 @@ export async function loginUser(usuario: string, password: string) {
|
||||
return { error: msg };
|
||||
}
|
||||
}
|
||||
//IO
|
||||
|
||||
@@ -12,3 +12,4 @@ export async function PostImpressions(data: any) {
|
||||
return { error: msg };
|
||||
}
|
||||
}
|
||||
//IO
|
||||
|
||||
@@ -3,7 +3,6 @@ import apiClient from "./apiClient";
|
||||
export async function PostReceipt(data: any) {
|
||||
try {
|
||||
const response = await apiClient.post("/operations/receipt", data);
|
||||
console.log(response.data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
const msg =
|
||||
@@ -13,3 +12,4 @@ export async function PostReceipt(data: any) {
|
||||
return { error: msg };
|
||||
}
|
||||
}
|
||||
//IO
|
||||
|
||||
+5
-6
@@ -10,12 +10,11 @@ export default function NotFound() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="centerGrido">
|
||||
<section>
|
||||
<img
|
||||
src="/404-bg.png" // 👈 pon tu imagen en /public/404-bg.png
|
||||
alt="Página no encontrada"
|
||||
/>
|
||||
<section>
|
||||
<img
|
||||
src="/404-bg.png"
|
||||
alt="Página no encontrada"
|
||||
/>
|
||||
|
||||
{/* Título */}
|
||||
<h1>404 - Página no encontrada</h1>
|
||||
|
||||
+2
-2
@@ -3,7 +3,7 @@ import { LoginRedirect } from "./Routes/LoginRedirect";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="mainContainer">
|
||||
<div className="loginContainer">
|
||||
<LoginRedirect>
|
||||
<div className="container">
|
||||
<div className="img"></div>
|
||||
@@ -13,4 +13,4 @@ export default function Home() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
//IO
|
||||
+1
-1
@@ -13,7 +13,7 @@ export function middleware(request: NextRequest) {
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: [
|
||||
matcher: [
|
||||
"/Reportes",
|
||||
"/Monitor",
|
||||
"/QuitarSancion",
|
||||
|
||||
Reference in New Issue
Block a user