styles changes

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 (