styles changes

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