From c6c42e914a793481f7e8d76cc7faa6dec3e4e0a4 Mon Sep 17 00:00:00 2001 From: IO420 <320154041@pcpuma.acatlan.unam.mx> Date: Wed, 8 Oct 2025 12:01:52 -0600 Subject: [PATCH] styles changes --- app/(private)/AgregarTiempo/addTime.css | 20 +-- app/(private)/Alta/style.css | 3 +- app/(private)/Inscripcion/inscripcion.css | 46 ++++-- app/(private)/Inscripcion/page.tsx | 51 ++++-- app/(private)/Monitor/Page.module.css | 79 +++------- app/Components/Alta/registerAlta.tsx | 7 +- .../Global/Information/information.tsx | 17 +- .../Global/StepNavigator/StepNavigator.tsx | 75 +++++---- app/Components/Global/selectArea.tsx | 3 +- app/Components/Global/table.module.css | 8 + app/Components/Global/table.tsx | 40 +++++ app/Components/Receipt/Receipt.tsx | 32 ++-- app/Components/Selection/Selection.css | 1 - .../auth/ChangePassword/changePassword.tsx | 7 +- app/globals.css | 148 ++++++++++++++---- 15 files changed, 345 insertions(+), 192 deletions(-) create mode 100644 app/Components/Global/table.module.css create mode 100644 app/Components/Global/table.tsx diff --git a/app/(private)/AgregarTiempo/addTime.css b/app/(private)/AgregarTiempo/addTime.css index 8a95b1d..1fe80b1 100644 --- a/app/(private)/AgregarTiempo/addTime.css +++ b/app/(private)/AgregarTiempo/addTime.css @@ -1,11 +1,11 @@ .addTime { - position: relative; - max-width: 600px; - margin-top: 1rem; - border: 1px solid #e5e7eb; - border-radius: 4px; - background-color: #f9fafb; - padding: 1rem; - display: flex; - flex-direction: column; -} \ No newline at end of file + position: relative; + max-width: 600px; + margin-top: 1rem; + border-radius: 4px; + background-color: #fff; + padding: 1rem; + display: flex; + flex-direction: column; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} diff --git a/app/(private)/Alta/style.css b/app/(private)/Alta/style.css index bf559d8..4bf3b2f 100644 --- a/app/(private)/Alta/style.css +++ b/app/(private)/Alta/style.css @@ -3,7 +3,8 @@ grid-template-columns: 1fr 1fr; } .containerAlta { - background-color: #f9f9f9; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 100%; max-width: 900px; padding: 1rem; diff --git a/app/(private)/Inscripcion/inscripcion.css b/app/(private)/Inscripcion/inscripcion.css index 7b05ca4..c448ebb 100644 --- a/app/(private)/Inscripcion/inscripcion.css +++ b/app/(private)/Inscripcion/inscripcion.css @@ -1,9 +1,37 @@ -.inscripcion{ - background-color: #f9f9f9; - width: 100%; - max-width: 700px; - border-radius: 4px; - padding: 1rem; - margin-top: 1rem; - outline: 1px solid #cfcfcf; -} \ No newline at end of file +.inscripcion { + position: relative; + top: 0; + background-color: #ffffff; + width: 100%; + max-width: 700px; + border-radius: 4px; + 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; + } +} diff --git a/app/(private)/Inscripcion/page.tsx b/app/(private)/Inscripcion/page.tsx index 55578f9..6dc0f1c 100644 --- a/app/(private)/Inscripcion/page.tsx +++ b/app/(private)/Inscripcion/page.tsx @@ -2,10 +2,11 @@ import SearchUser from "@/app/Components/Global/SearchUser/searchUser"; import Information from "@/app/Components/Global/Information/information"; import Receipt from "@/app/Components/Receipt/Receipt"; import Selection from "@/app/Components/Selection/Selection"; +import ShowError from "@/app/Components/Global/ShowError"; import { GetStudent } from "@/app/lib/getStudent"; import "./inscripcion.css"; -import ShowError from "@/app/Components/Global/ShowError"; +import Table from "@/app/Components/Global/table"; export default async function Page(props: { 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 (
{errorMessage && }

INSCRIPCIÓN

- +
+
+ + + {student && ( + + )} +
+ + {student && } + {student && ( <> - - -
diff --git a/app/(private)/Monitor/Page.module.css b/app/(private)/Monitor/Page.module.css index 21769a9..7ea84a2 100644 --- a/app/(private)/Monitor/Page.module.css +++ b/app/(private)/Monitor/Page.module.css @@ -1,70 +1,41 @@ .tableContainer { - overflow-y: auto; - overflow-x: auto; - border-radius: 4px; - border: 1px solid #cfcfcf; - max-height: 430px; - scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0); - 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; + overflow-y: auto; + overflow-x: auto; + border-radius: 4px; + max-height: 430px; + scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0); + width: 100%; } .disponible { - display: flex; - width: 100%; - height: 100%; - background-color: green; - color: green; - font-weight: bold; + display: flex; + width: 100%; + height: 100%; + background-color: green; + color: green; + font-weight: bold; } .ocupado { - color: red; - font-weight: bold; + color: red; + font-weight: bold; } - .actions { - text-align: center; + text-align: center; } .resetButton { - padding: 8px 16px; - background-color: #ff4d4d; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-weight: bold; - transition: 0.3s; + padding: 8px 16px; + background-color: #ff4d4d; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-weight: bold; + transition: 0.3s; } .resetButton:hover { - background-color: #cc0000; -} \ No newline at end of file + background-color: #cc0000; +} diff --git a/app/Components/Alta/registerAlta.tsx b/app/Components/Alta/registerAlta.tsx index e3e8089..5a078c4 100644 --- a/app/Components/Alta/registerAlta.tsx +++ b/app/Components/Alta/registerAlta.tsx @@ -1,5 +1,6 @@ "use client"; -import axios from "axios"; +import apiClient from "@/app/lib/apiClient"; + import { useEffect, useState } from "react"; export default function RegisterAlta() { @@ -9,9 +10,7 @@ export default function RegisterAlta() { useEffect(() => { const fetchCarreras = async () => { try { - const response = await axios.get( - "https://venus.acatlan.unam.mx/asignacionTiempo_test/carrera" - ); + const response = await apiClient.get("/carrera"); const sortedCarreras = response.data.sort((a: any, b: any) => a.carrera.localeCompare(b.carrera) diff --git a/app/Components/Global/Information/information.tsx b/app/Components/Global/Information/information.tsx index 60c23c8..d1a4f9d 100644 --- a/app/Components/Global/Information/information.tsx +++ b/app/Components/Global/Information/information.tsx @@ -3,20 +3,23 @@ interface 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 (
-
    +
      {entries.map(([key, value]) => ( -
    • - {key}: {value} +
    • + {key} + {value}
      • ))}
); -} -//IO \ No newline at end of file +} +//IO diff --git a/app/Components/Global/StepNavigator/StepNavigator.tsx b/app/Components/Global/StepNavigator/StepNavigator.tsx index a91a7e2..ac25728 100644 --- a/app/Components/Global/StepNavigator/StepNavigator.tsx +++ b/app/Components/Global/StepNavigator/StepNavigator.tsx @@ -1,50 +1,49 @@ -'use client' +"use client"; import { useState, ReactNode } from "react"; -import "./StepNavigator.css" +import "./StepNavigator.css"; interface StepNavigatorProps { - totalSteps: number; - children: ReactNode[]; - onFinish?: () => void; + totalSteps: number; + children: ReactNode[]; + onFinish?: () => void; } -export default function StepNavigator({ totalSteps, children, onFinish }: StepNavigatorProps) { - const [step, setStep] = useState(1); +export default function StepNavigator({ + totalSteps, + children, + onFinish, +}: StepNavigatorProps) { + const [step, setStep] = useState(1); - const handleNext = (e: React.MouseEvent) => { - e.preventDefault(); - if (step < totalSteps) setStep(step + 1); - else if (onFinish) onFinish(); - }; + const handleNext = (e: React.MouseEvent) => { + e.preventDefault(); + if (step < totalSteps) setStep(step + 1); + else if (onFinish) onFinish(); + }; - const handlePrev = (e: React.MouseEvent) => { - e.preventDefault(); - if (step > 1) setStep(step - 1); - }; + const handlePrev = (e: React.MouseEvent) => { + e.preventDefault(); + if (step > 1) setStep(step - 1); + }; - return ( -
- {children[step - 1]} + return ( +
+ {children[step - 1]} -
- {step > 1 && ( - - )} +
+ {step > 1 && ( + + )} - {step < totalSteps && - -} -
-
- ); + {step < totalSteps && ( + + )} + +
+ ); } diff --git a/app/Components/Global/selectArea.tsx b/app/Components/Global/selectArea.tsx index 5da0cf7..d17cc3e 100644 --- a/app/Components/Global/selectArea.tsx +++ b/app/Components/Global/selectArea.tsx @@ -1,4 +1,4 @@ -import axios from "axios"; +import apiClient from "@/app/lib/apiClient"; import { useEffect, useState } from "react"; export default function selectArea() { @@ -6,6 +6,7 @@ export default function selectArea() { useEffect(() => { const fetchArea = async () => { + const response = await apiClient.get("/area-ubicacion"); setArea(response.data); }; diff --git a/app/Components/Global/table.module.css b/app/Components/Global/table.module.css new file mode 100644 index 0000000..b25dd2e --- /dev/null +++ b/app/Components/Global/table.module.css @@ -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; +} diff --git a/app/Components/Global/table.tsx b/app/Components/Global/table.tsx new file mode 100644 index 0000000..a44a1b4 --- /dev/null +++ b/app/Components/Global/table.tsx @@ -0,0 +1,40 @@ +"use client"; + +import React from "react"; +import styles from "./table.module.css"; + +interface TableProps { + headers: string[]; + data: Array>; +} + +export default function Table({ headers, data }: TableProps) { + return ( +
+
+ + + {headers.map((header, index) => ( + + ))} + + + + {data.length > 0 ? ( + data.map((row, rowIndex) => ( + + {headers.map((header, colIndex) => ( + + ))} + + )) + ) : ( + + + + )} + +
{header}
{row[header]}
No hay registros
+
+ ); +} diff --git a/app/Components/Receipt/Receipt.tsx b/app/Components/Receipt/Receipt.tsx index 9d0d281..4c0891d 100644 --- a/app/Components/Receipt/Receipt.tsx +++ b/app/Components/Receipt/Receipt.tsx @@ -78,25 +78,19 @@ function Receipt({ numAcount }: ReceiptsProps) {
-
- { - const value = error.target.value; - if (/^\d*$/.test(value) && value.length <= 7) { - setFolio(value); - } - }} - placeholder="Numero de tiket..." - inputMode="numeric" - pattern="[0-9]*" - /> - -
+ { + const value = error.target.value; + if (/^\d*$/.test(value) && value.length <= 7) { + setFolio(value); + } + }} + placeholder="Numero de tiket..." + inputMode="numeric" + pattern="[0-9]*" + />
diff --git a/app/Components/Selection/Selection.css b/app/Components/Selection/Selection.css index f1f30ce..1c70764 100644 --- a/app/Components/Selection/Selection.css +++ b/app/Components/Selection/Selection.css @@ -3,7 +3,6 @@ gap: 1rem; justify-content: center; align-items: center; - margin: 10px; flex-wrap: wrap; } diff --git a/app/Components/auth/ChangePassword/changePassword.tsx b/app/Components/auth/ChangePassword/changePassword.tsx index 7f4eac1..e59abfc 100644 --- a/app/Components/auth/ChangePassword/changePassword.tsx +++ b/app/Components/auth/ChangePassword/changePassword.tsx @@ -1,5 +1,5 @@ "use client"; -import axios from "axios"; +import apiClient from "@/app/lib/apiClient"; import { useState } from "react"; export default function ChangePassword() { @@ -11,10 +11,7 @@ export default function ChangePassword() { e.preventDefault; const data = { pass, newPass, confirmNewPass }; - await axios.post( - "https://venus.acatlan.unam.mx/asignacionTiempo_test/user/create", - data - ); + await apiClient.post("/user/create", data); }; return ( diff --git a/app/globals.css b/app/globals.css index f6675ee..d6fa085 100644 --- a/app/globals.css +++ b/app/globals.css @@ -23,7 +23,7 @@ body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; - width: 100dvw; + width: 100vw; overflow: hidden; } @@ -173,9 +173,9 @@ select { border: 1px solid #cfcfcf; background-color: #fff; border-radius: 4px; - font-size: 2rem; + font-size: 1.5rem; color: black; - height: 4rem; + height: 3.5rem; } input:focus, @@ -186,12 +186,20 @@ select:focus { transition: all 0.2s ease-in-out; } +select:-webkit-scrollbar { + width: 6px; +} + +option { + font-size: 1.5rem; +} + input[type="checkbox"] { min-width: 3rem; } label { - font-size: 2rem; + font-size: 1.5rem; font-weight: bold; display: block; } @@ -201,7 +209,7 @@ button { padding: 1rem 1.75rem; border-radius: 4px; cursor: pointer; - height: 4rem; + height: 3.5rem; } .groupInput { @@ -210,6 +218,8 @@ button { gap: 10px; align-items: center; justify-content: space-between; + width: 100%; + max-width: 450px; } .button { @@ -278,23 +288,50 @@ a { .information { display: flex; flex-direction: column; - border: 1px solid #e5e7eb; + background-color: #ffffff; border-radius: 4px; - background-color: #f3f4f6; width: 100%; 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 { - padding: 1rem; +.informationList { + 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 { top: 0; left: 0; width: 100%; - font-size: 3rem; + font-size: 2.5rem; font-weight: bold; text-align: start; color: #bd8c01; @@ -324,9 +361,9 @@ form { width: 100%; max-width: 750px; margin-top: 1rem; - border: 1px solid #e5e7eb; border-radius: 4px; - background-color: #f9fafb; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .toggleGroup { @@ -354,10 +391,10 @@ form { .toggleButton.active { font-weight: 600; - background-color: #e5e7eb; + background-color: #ffffff; color: rgb(1, 92, 184); border-radius: 4px 4px 0 0; - border-bottom: 1px solid rgb(1, 92, 184); + border-bottom: none; } p { @@ -366,28 +403,78 @@ p { table { width: 100%; - border-collapse: collapse; + border-collapse: separate; + border-spacing: 0 1rem; table-layout: auto; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.5rem; + color: #333; } table th, table td { - padding: 10px; - text-align: center; - border-bottom: 1px solid #cfcfcf; - word-wrap: break-word; - overflow-wrap: break-word; + padding: 0.85rem 1.5rem; } table th { position: sticky; - top: 0px; - background-color: rgb(1, 92, 184); - color: white; + top: 0; + color: #ffffff; + 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 { - 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 { @@ -462,10 +549,6 @@ table tr { justify-content: center; align-items: center; } - - .title { - text-align: center; - } } @media (max-width: 1300px) { @@ -473,6 +556,11 @@ table tr { width: 100%; max-width: none; } + + .containerSection { + overflow: auto; + scrollbar-width: none; + } } @media (max-width: 800px) { @@ -526,6 +614,7 @@ table tr { .containerSection { align-items: center; + scrollbar-width: none; } .centerGrid { @@ -564,6 +653,7 @@ table tr { @media (max-width: 450px) { .title { + text-align: center; max-width: 250px; overflow-wrap: break-word; }