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

styles changes

Browse Source
This commit is contained in:
Lino
2025-10-08 12:01:52 -06:00
parent b507eb157b
commit c6c42e914a
15 changed files with 345 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(private)/AgregarTiempo/addTime.css
+10 -10
View File
@@ -1,11 +1,11 @@
.addTime { .addTime {
position: relative; position: relative;
max-width: 600px; max-width: 600px;
margin-top: 1rem; margin-top: 1rem;
border: 1px solid #e5e7eb; border-radius: 4px;
border-radius: 4px; background-color: #fff;
background-color: #f9fafb; padding: 1rem;
padding: 1rem; display: flex;
display: flex; flex-direction: column;
flex-direction: column; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
app/(private)/Alta/style.css
+2 -1
View File
@@ -3,7 +3,8 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.containerAlta { .containerAlta {
background-color: #f9f9f9; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
padding: 1rem; padding: 1rem;
app/(private)/Inscripcion/inscripcion.css
+37 -9
View File
@@ -1,9 +1,37 @@
.inscripcion{ .inscripcion {
background-color: #f9f9f9; position: relative;
width: 100%; top: 0;
max-width: 700px; background-color: #ffffff;
border-radius: 4px; width: 100%;
padding: 1rem; max-width: 700px;
margin-top: 1rem; border-radius: 4px;
outline: 1px solid #cfcfcf; padding: 1rem;
} margin-top: 1rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.containeInformation {
display: flex;
gap: 10px;
width: 100%;
}
.firstPartInformation {
display: flex;
flex-direction: column;
width: 100%;
max-width: 450px;
}
@media (max-width: 800px) {
.containeInformation {
justify-content: center;
align-items: center;
}
}
@media (max-width: 800px) {
.containeInformation {
flex-direction: column;
}
}
app/(private)/Inscripcion/page.tsx
+37 -14
View File
@@ -2,10 +2,11 @@ import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
import Information from "@/app/Components/Global/Information/information"; import Information from "@/app/Components/Global/Information/information";
import Receipt from "@/app/Components/Receipt/Receipt"; import Receipt from "@/app/Components/Receipt/Receipt";
import Selection from "@/app/Components/Selection/Selection"; import Selection from "@/app/Components/Selection/Selection";
import ShowError from "@/app/Components/Global/ShowError";
import { GetStudent } from "@/app/lib/getStudent"; import { GetStudent } from "@/app/lib/getStudent";
import "./inscripcion.css"; import "./inscripcion.css";
import ShowError from "@/app/Components/Global/ShowError"; import Table from "@/app/Components/Global/table";
export default async function Page(props: { export default async function Page(props: {
searchParams?: Promise<{ searchParams?: Promise<{
@@ -27,28 +28,50 @@ export default async function Page(props: {
} }
} }
const headers = ["Inscrito", "Tiempo", "Confirmó"];
const data = [
{
Inscrito: "WINDOWS",
Tiempo: "9 minutos",
Confirmó: "si",
},
{
Inscrito: "WINDOWS",
Tiempo: "9 minutos",
Confirmó: "si/no",
},
{
Inscrito: "WINDOWS",
Tiempo: "9 minutos",
Confirmó: "si/no",
},
];
return ( return (
<section className="containerSection"> <section className="containerSection">
{errorMessage && <ShowError key={Date.now()} message={errorMessage} />} {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
<h2 className="title"> INSCRIPCIÓN </h2> <h2 className="title"> INSCRIPCIÓN </h2>
<SearchUser value={numAcount} /> <div className="containeInformation">
<div className="firstPartInformation">
<SearchUser value={numAcount} />
{student && (
<Information
NoCuenta={student.id_cuenta}
Nombre={student.nombre}
Carrera={student.carrera.carrera}
Credito={student.credito}
/>
)}
</div>
{student && <Table headers={headers} data={data} />}
</div>
{student && ( {student && (
<> <>
<Information
NoCuenta={student.id_cuenta}
Nombre={student.nombre}
Carrera={student.carrera.carrera}
Credito={student.credito}
/>
<Information
inscrito={"WINDOWS"}
tiempo={"9minutos"}
confirmo={"si/no"}
/>
<section className="inscripcion"> <section className="inscripcion">
<Selection /> <Selection />
app/(private)/Monitor/Page.module.css
+25 -54
View File
@@ -1,70 +1,41 @@
.tableContainer { .tableContainer {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
border-radius: 4px; border-radius: 4px;
border: 1px solid #cfcfcf; max-height: 430px;
max-height: 430px; scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0); width: 100%;
background-color: #f9f9f9;
width: 100%;
}
.machineTable {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
.machineTable th,
.machineTable td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #cfcfcf;
word-wrap: break-word;
overflow-wrap: break-word;
}
.machineTable th {
position: sticky;
top: 0px;
background-color: rgb(1, 92, 184);
color: white;
}
.machineTable tr {
min-width: 400px;
} }
.disponible { .disponible {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: green; background-color: green;
color: green; color: green;
font-weight: bold; font-weight: bold;
} }
.ocupado { .ocupado {
color: red; color: red;
font-weight: bold; font-weight: bold;
} }
.actions { .actions {
text-align: center; text-align: center;
} }
.resetButton { .resetButton {
padding: 8px 16px; padding: 8px 16px;
background-color: #ff4d4d; background-color: #ff4d4d;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
transition: 0.3s; transition: 0.3s;
} }
.resetButton:hover { .resetButton:hover {
background-color: #cc0000; background-color: #cc0000;
} }
app/Components/Alta/registerAlta.tsx
+3 -4
View File
@@ -1,5 +1,6 @@
"use client"; "use client";
import axios from "axios"; import apiClient from "@/app/lib/apiClient";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function RegisterAlta() { export default function RegisterAlta() {
@@ -9,9 +10,7 @@ export default function RegisterAlta() {
useEffect(() => { useEffect(() => {
const fetchCarreras = async () => { const fetchCarreras = async () => {
try { try {
const response = await axios.get( const response = await apiClient.get("/carrera");
"https://venus.acatlan.unam.mx/asignacionTiempo_test/carrera"
);
const sortedCarreras = response.data.sort((a: any, b: any) => const sortedCarreras = response.data.sort((a: any, b: any) =>
a.carrera.localeCompare(b.carrera) a.carrera.localeCompare(b.carrera)
app/Components/Global/Information/information.tsx
+10 -7
View File
@@ -3,20 +3,23 @@ interface InformationProps {
} }
export default function Information(props: InformationProps) { export default function Information(props: InformationProps) {
const entries = Object.entries(props).filter(([_, value]) => value !== undefined); const entries = Object.entries(props).filter(
([_, value]) => value !== undefined
);
if (entries.length === 0) return null; if (entries.length === 0) return null;
return ( return (
<div className="information"> <div className="information">
<ul> <ul className="informationList">
{entries.map(([key, value]) => ( {entries.map(([key, value]) => (
<li key={key}> <li key={key} className="informationItem">
<b>{key}: </b>{value} <span className="informationKey">{key}</span>
<span className="informationValue">{value}</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
); );
} }
//IO //IO
app/Components/Global/StepNavigator/StepNavigator.tsx
+37 -38
View File
@@ -1,50 +1,49 @@
'use client' "use client";
import { useState, ReactNode } from "react"; import { useState, ReactNode } from "react";
import "./StepNavigator.css" import "./StepNavigator.css";
interface StepNavigatorProps { interface StepNavigatorProps {
totalSteps: number; totalSteps: number;
children: ReactNode[]; children: ReactNode[];
onFinish?: () => void; onFinish?: () => void;
} }
export default function StepNavigator({ totalSteps, children, onFinish }: StepNavigatorProps) { export default function StepNavigator({
const [step, setStep] = useState(1); totalSteps,
children,
onFinish,
}: StepNavigatorProps) {
const [step, setStep] = useState(1);
const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => { const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault(); e.preventDefault();
if (step < totalSteps) setStep(step + 1); if (step < totalSteps) setStep(step + 1);
else if (onFinish) onFinish(); else if (onFinish) onFinish();
}; };
const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => { const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault(); e.preventDefault();
if (step > 1) setStep(step - 1); if (step > 1) setStep(step - 1);
}; };
return ( return (
<section className="stepNavigator"> <section className="stepNavigator">
{children[step - 1]} {children[step - 1]}
<div className="absoluteButton"> <div className="absoluteButton">
{step > 1 && ( {step > 1 && (
<button <button onClick={handlePrev} className="button buttonSearch">
onClick={handlePrev} Atrás
className="button buttonSearch"> </button>
Atrás )}
</button>
)}
{step < totalSteps && {step < totalSteps && (
<button <button onClick={handleNext} className="button buttonSearch">
onClick={handleNext} Siguiente
className="button buttonSearch" </button>
> )}
Siguiente </div>
</button> </section>
} );
</div>
</section>
);
} }
app/Components/Global/selectArea.tsx
+2 -1
View File
@@ -1,4 +1,4 @@
import axios from "axios"; import apiClient from "@/app/lib/apiClient";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function selectArea() { export default function selectArea() {
@@ -6,6 +6,7 @@ export default function selectArea() {
useEffect(() => { useEffect(() => {
const fetchArea = async () => { const fetchArea = async () => {
const response = await apiClient.get("/area-ubicacion");
setArea(response.data); setArea(response.data);
}; };
app/Components/Global/table.module.css
+8
View File
@@ -0,0 +1,8 @@
.tableContainer {
width: 100%;
max-width: 450px;
overflow-x: hidden;
scrollbar-color: #2563eb #ffffff00;
scroll-behavior: smooth;
transition: all 0.3s ease;
}
app/Components/Global/table.tsx
+40
View File
@@ -0,0 +1,40 @@
"use client";
import React from "react";
import styles from "./table.module.css";
interface TableProps {
headers: string[];
data: Array<Record<string, any>>;
}
export default function Table({ headers, data }: TableProps) {
return (
<div className={styles.tableContainer}>
<table>
<thead>
<tr>
{headers.map((header, index) => (
<th key={index}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.length > 0 ? (
data.map((row, rowIndex) => (
<tr key={rowIndex}>
{headers.map((header, colIndex) => (
<td key={colIndex}>{row[header]}</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={headers.length}>No hay registros</td>
</tr>
)}
</tbody>
</table>
</div>
);
}
app/Components/Receipt/Receipt.tsx
+13 -19
View File
@@ -78,25 +78,19 @@ function Receipt({ numAcount }: ReceiptsProps) {
<div className="gap"> <div className="gap">
<div className="groupInput"> <div className="groupInput">
<label className="label">Ticket:</label> <label className="label">Ticket:</label>
<div className="groupInformation"> <input
<input type="text"
type="text" value={folio}
value={folio} onChange={(error) => {
onChange={(error) => { const value = error.target.value;
const value = error.target.value; if (/^\d*$/.test(value) && value.length <= 7) {
if (/^\d*$/.test(value) && value.length <= 7) { setFolio(value);
setFolio(value); }
} }}
}} placeholder="Numero de tiket..."
placeholder="Numero de tiket..." inputMode="numeric"
inputMode="numeric" pattern="[0-9]*"
pattern="[0-9]*" />
/>
<select className="informationButton">
<option>7</option>
<option>8</option>
</select>
</div>
</div> </div>
<div className="groupInput"> <div className="groupInput">
app/Components/Selection/Selection.css
-1
View File
@@ -3,7 +3,6 @@
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 10px;
flex-wrap: wrap; flex-wrap: wrap;
} }
app/Components/auth/ChangePassword/changePassword.tsx
+2 -5
View File
@@ -1,5 +1,5 @@
"use client"; "use client";
import axios from "axios"; import apiClient from "@/app/lib/apiClient";
import { useState } from "react"; import { useState } from "react";
export default function ChangePassword() { export default function ChangePassword() {
@@ -11,10 +11,7 @@ export default function ChangePassword() {
e.preventDefault; e.preventDefault;
const data = { pass, newPass, confirmNewPass }; const data = { pass, newPass, confirmNewPass };
await axios.post( await apiClient.post("/user/create", data);
"https://venus.acatlan.unam.mx/asignacionTiempo_test/user/create",
data
);
}; };
return ( return (
app/globals.css
+119 -29
View File
@@ -23,7 +23,7 @@ body {
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
min-height: 100dvh; min-height: 100dvh;
width: 100dvw; width: 100vw;
overflow: hidden; overflow: hidden;
} }
@@ -173,9 +173,9 @@ select {
border: 1px solid #cfcfcf; border: 1px solid #cfcfcf;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
font-size: 2rem; font-size: 1.5rem;
color: black; color: black;
height: 4rem; height: 3.5rem;
} }
input:focus, input:focus,
@@ -186,12 +186,20 @@ select:focus {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
select:-webkit-scrollbar {
width: 6px;
}
option {
font-size: 1.5rem;
}
input[type="checkbox"] { input[type="checkbox"] {
min-width: 3rem; min-width: 3rem;
} }
label { label {
font-size: 2rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
display: block; display: block;
} }
@@ -201,7 +209,7 @@ button {
padding: 1rem 1.75rem; padding: 1rem 1.75rem;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
height: 4rem; height: 3.5rem;
} }
.groupInput { .groupInput {
@@ -210,6 +218,8 @@ button {
gap: 10px; gap: 10px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%;
max-width: 450px;
} }
.button { .button {
@@ -278,23 +288,50 @@ a {
.information { .information {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid #e5e7eb; background-color: #ffffff;
border-radius: 4px; border-radius: 4px;
background-color: #f3f4f6;
width: 100%; width: 100%;
max-width: 450px; max-width: 450px;
margin-top: 10px; margin-top: 1rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
} }
.information ul { .informationList {
padding: 1rem; list-style: none;
padding: 0 1rem;
margin: 0;
}
.informationItem {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 5px 0;
border-bottom: 1px solid #e5e5e5;
}
.informationItem:last-child {
border-bottom: none;
}
.informationKey {
font-weight: 600;
text-transform: capitalize;
width: 100px;
}
.informationValue {
color: #555;
font-size: 1.5rem;
} }
.title { .title {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
font-size: 3rem; font-size: 2.5rem;
font-weight: bold; font-weight: bold;
text-align: start; text-align: start;
color: #bd8c01; color: #bd8c01;
@@ -324,9 +361,9 @@ form {
width: 100%; width: 100%;
max-width: 750px; max-width: 750px;
margin-top: 1rem; margin-top: 1rem;
border: 1px solid #e5e7eb;
border-radius: 4px; border-radius: 4px;
background-color: #f9fafb; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
.toggleGroup { .toggleGroup {
@@ -354,10 +391,10 @@ form {
.toggleButton.active { .toggleButton.active {
font-weight: 600; font-weight: 600;
background-color: #e5e7eb; background-color: #ffffff;
color: rgb(1, 92, 184); color: rgb(1, 92, 184);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
border-bottom: 1px solid rgb(1, 92, 184); border-bottom: none;
} }
p { p {
@@ -366,28 +403,78 @@ p {
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: separate;
border-spacing: 0 1rem;
table-layout: auto; table-layout: auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.5rem;
color: #333;
} }
table th, table th,
table td { table td {
padding: 10px; padding: 0.85rem 1.5rem;
text-align: center;
border-bottom: 1px solid #cfcfcf;
word-wrap: break-word;
overflow-wrap: break-word;
} }
table th { table th {
position: sticky; position: sticky;
top: 0px; top: 0;
background-color: rgb(1, 92, 184); color: #ffffff;
color: white; font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
z-index: 2;
border: none;
}
table td {
text-align: center;
word-wrap: break-word;
overflow-wrap: break-word;
border: none;
} }
table tr { table tr {
min-width: 400px; background-color: rgb(255, 255, 255);
transition: background-color 0.2s ease;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
thead tr {
background-color: #2563eb;
position: relative;
z-index: 1;
}
tbody tr {
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 1;
z-index: 0;
}
tbody tr.hidden {
transform: translateY(-10px);
opacity: 0;
height: 0;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
table tr:hover {
background-color: #cfcfcf;
}
table th:first-child,
table td:first-child {
border-radius: 4px 0 0 4px;
}
table th:last-child,
table td:last-child {
border-radius: 0 4px 4px 0;
} }
.tableContainer { .tableContainer {
@@ -462,10 +549,6 @@ table tr {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.title {
text-align: center;
}
} }
@media (max-width: 1300px) { @media (max-width: 1300px) {
@@ -473,6 +556,11 @@ table tr {
width: 100%; width: 100%;
max-width: none; max-width: none;
} }
.containerSection {
overflow: auto;
scrollbar-width: none;
}
} }
@media (max-width: 800px) { @media (max-width: 800px) {
@@ -526,6 +614,7 @@ table tr {
.containerSection { .containerSection {
align-items: center; align-items: center;
scrollbar-width: none;
} }
.centerGrid { .centerGrid {
@@ -564,6 +653,7 @@ table tr {
@media (max-width: 450px) { @media (max-width: 450px) {
.title { .title {
text-align: center;
max-width: 250px; max-width: 250px;
overflow-wrap: break-word; overflow-wrap: break-word;
} }