styles changes

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;
-}
+  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);
+}

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;

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;
-}
+.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;
+  }
+}

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 (
     <section className="containerSection">
       {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
 
       <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 && (
         <>
-          <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">
             <Selection />
 

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;
-}
+  background-color: #cc0000;
+}

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)

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 (
     <div className="information">
-      <ul>
+      <ul className="informationList">
         {entries.map(([key, value]) => (
-          <li key={key}>
-            <b>{key}: </b>{value}
+          <li key={key} className="informationItem">
+            <span className="informationKey">{key}</span>
+            <span className="informationValue">{value}</span>
           </li>
         ))}
       </ul>
     </div>
   );
-} 
-//IO
+}
+//IO

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<HTMLButtonElement>) => {
-        e.preventDefault();
-        if (step < totalSteps) setStep(step + 1);
-        else if (onFinish) onFinish();
-    };
+  const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (step < totalSteps) setStep(step + 1);
+    else if (onFinish) onFinish();
+  };
 
-    const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-        if (step > 1) setStep(step - 1);
-    };
+  const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (step > 1) setStep(step - 1);
+  };
 
-    return (
-        <section className="stepNavigator">
-            {children[step - 1]}
+  return (
+    <section className="stepNavigator">
+      {children[step - 1]}
 
-            <div className="absoluteButton">
-                {step > 1 && (
-                    <button
-                        onClick={handlePrev}
-                        className="button buttonSearch">
-                        Atrás
-                    </button>
-                )}
+      <div className="absoluteButton">
+        {step > 1 && (
+          <button onClick={handlePrev} className="button buttonSearch">
+            Atrás
+          </button>
+        )}
 
-                {step < totalSteps &&
-                    <button
-                        onClick={handleNext}
-                        className="button buttonSearch"
-                    >
-                        Siguiente
-                    </button>
-}
-            </div>
-        </section>
-    );
+        {step < totalSteps && (
+          <button onClick={handleNext} className="button buttonSearch">
+            Siguiente
+          </button>
+        )}
+      </div>
+    </section>
+  );
 }

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);
     };
 

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;
+}

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<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

@@ -78,25 +78,19 @@ function Receipt({ numAcount }: ReceiptsProps) {
       <div className="gap">
         <div className="groupInput">
           <label className="label">Ticket:</label>
-          <div className="groupInformation">
-            <input
-              type="text"
-              value={folio}
-              onChange={(error) => {
-                const value = error.target.value;
-                if (/^\d*$/.test(value) && value.length <= 7) {
-                  setFolio(value);
-                }
-              }}
-              placeholder="Numero de tiket..."
-              inputMode="numeric"
-              pattern="[0-9]*"
-            />
-            <select className="informationButton">
-              <option>7</option>
-              <option>8</option>
-            </select>
-          </div>
+          <input
+            type="text"
+            value={folio}
+            onChange={(error) => {
+              const value = error.target.value;
+              if (/^\d*$/.test(value) && value.length <= 7) {
+                setFolio(value);
+              }
+            }}
+            placeholder="Numero de tiket..."
+            inputMode="numeric"
+            pattern="[0-9]*"
+          />
         </div>
 
         <div className="groupInput">

app/Components/Selection/Selection.css

@@ -3,7 +3,6 @@
   gap: 1rem;
   justify-content: center;
   align-items: center;
-  margin: 10px;
   flex-wrap: wrap;
 }
 

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 (

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;
   }