01 components

GomezMorinFrontEnd/package.json

@@ -9,14 +9,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.0.17",
+    "@material-tailwind/react": "^1.4.2",
     "@reduxjs/toolkit": "^1.9.3",
     "axios": "^1.3.4",
-    "google-map-react": "^2.2.0",
-    "google-maps-react": "^2.0.6",
+    "flowbite": "^1.6.5",
+    "headlessui": "^0.0.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.8",
-    "react-redux": "^8.0.5"
+    "react-icons": "^4.8.0",
+    "react-loader-spinner": "^5.3.4",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.10.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

GomezMorinFrontEnd/src/App.jsx

@@ -1,59 +1,18 @@
-import { useDispatch, useSelector } from "react-redux"
-import { setUsers } from "./states/generalSlice"
-import Card from "./components/Card"
-import { useForm } from "react-hook-form"
-import { createUser, readUsers } from "./queries/query"
-import { useEffect } from "react"
-import MapContainer from "./components/MapContainer"
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Page from "./pages/page"
 
 function App() {
-  const users = useSelector((state) => state.general.users)
-  const dispatch = useDispatch()
-
-  const { register, handleSubmit } = useForm()
-
-  const onSubmit = async (data) => {
-    const response = await createUser(data)
-
-    dispatch(setUsers(response))
-  }
-
-  useEffect(() => {
-    readUsers()
-    .then((response) => {
-
-      if (response) {
-        dispatch(setUsers(response))
-      }
-    })
-  }, [])
-
   return (
-    <div className="w-full h-full ">
-      <form className="flex flex-col w-1/6" onSubmit={ handleSubmit(onSubmit) }>
-        <label htmlFor="username">Username: </label>
-        <input className="border-2 border-gray-400" type="text" id="username" placeholder="Username" {...register("username")} />
-        <label htmlFor="image">Image: </label>
-        <input type="file" id="image" {...register("urlImg")}/>
-        <button
-          className="p-1 border-2 border-black bg-slate-300 "
-        >
-          Enviar Usuario
-        </button>
-      </form>
-
-      <div>
-        <ul>
-          { users.map((user, id) => (
-            <Card key={id} user={ user }/>
-          )) }
-        </ul>
-      </div>
-      <div>
-        <MapContainer />
-      </div>
+    <div className="App w-full h-full">
+      <BrowserRouter>
+        <Routes>
+          <Route element={ <Layout /> }>
+            <Route path="/" element={ <Page /> } />
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </div>
-  )
+  );
 }
 
-export default App
+export default App

GomezMorinFrontEnd/src/components/Checkbox.jsx

@@ -0,0 +1,25 @@
+import { Checkbox } from "@material-tailwind/react";
+
+/**
+ * A Material Tailwind checkbox component with a label and optional sub-label.
+ * 
+ * @param label The text for the checkbox label.
+ * @param subLabel An optional sub-label to display below the checkbox label.
+ * @return {JSX.Element} The Checkbox1 component.
+ */
+const AltCheckbox = ({ label, subLabel }) => {
+  return (
+    <div>
+      <Checkbox
+        color="green"
+        ripple={true}
+        label={label}
+        defaultChecked
+      />
+      <p className="text-sm italic font-thin mb-2">{subLabel}</p>
+    </div>
+
+  );
+};
+
+export default AltCheckbox;

GomezMorinFrontEnd/src/components/Footer.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+/**
+* A React component that displays the footer of a webpage. It includes the Gomez Morin logo,
+* phone number, and address. The component is fixed at the bottom of the page.
+*
+* @return {JSX.Element} The JSX code that displays the footer.
+*/
+const Footer = () => {
+  return (
+    <div className="fixed bottom-0 w-full h-16 bg-gray-blue drop-shadow-lg">
+      <div className="flex justify-between items-center">
+        <div className="px-4 pt-2">
+          <img
+            className="object-scale-down h-12"
+            src="/img/gomez_morin_blanco.png"
+          />
+        </div>
+        <div className="px-3 pt-2 text-white">
+          <p className="text-[#ffffff]">(442) 251 9600 Ext. 9613</p>
+        </div>
+        <div className="px-3 pt-2">
+          <p className="text-white">
+            Av. Constituyentes Esq. Luis Pasteur S/N Col. Villa del Sur,
+            C.P.76000. Santiago de Querétaro.
+          </p>
+        </div>
+        <div className="px-4 pt-2">
+          <img
+            className="object-scale-down h-12"
+            src="/img/gomez_morin_blanco.png"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

GomezMorinFrontEnd/src/components/Header.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+/**
+ * Componente para mostrar el encabezado de la página.
+ * 
+ * @param {string} tittle - Título del encabezado.
+ * @returns {JSX.Element} Elemento JSX que representa el encabezado.
+ */
+const Header = ({ tittle }) => {
+  return (
+    <div className="text-center w-full">
+      <h1 className="Gobold text-black text-6xl ">{tittle}</h1>
+    </div>
+  );
+};
+
+export default Header;

GomezMorinFrontEnd/src/components/InfoProfileCard.jsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import InputForm from "./InputForm";
+import Button from "./Button";
+import Checkbox from "./Checkbox";
+import SpinnerLoader from "./SpinnerLoader";
+
+/**
+ * A component that displays user information and allows them to update their profile.
+ * 
+ * @param {string} Cookie.session.id - The ID of the user's session cookie.
+ * @returns {JSX.Element} The JSX element displaying the user's profile and profile editing form.
+ */
+const InfoProfileCard = (/*Cookie.session.id*/) => {
+  const [user, setUser] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  /* To do:
+  //UseEfect
+  //query.findByID(cookie.session.id)
+  //setUser
+  //setLoading(false)
+  */
+
+
+  const methods = useForm();
+  const reset = methods.reset;
+
+  /**
+   * Handles submission of updated user information.
+   * @param {Object} data - The updated user data to be submitted.
+   */
+  const onSubmitUser = async (data) => {
+    const response = await updateUser(data); //Query importada
+    setUser(response);
+    reset();
+  };
+
+  return (
+    <div className="w-full rounded-lg bg-gray drop-shadow-md">
+      <div className="flex items-center">
+        <div className="w-1/2 mx-6 my-1 text-left">
+          {user.length === 1 ? (
+            user.map((tempUser) => (
+              <FormProvider {...methods}>
+                <form onSubmit={methods.handleSubmit(onSubmitUser)}>
+                  <InputForm
+                    label="Usuario"
+                    name={tempUser.user} //To do: Posible cambio
+                    type="text"
+                    placeholder="Escribe tu nuevo nombre de Usuario"
+                    defaultValue={tempUser.user} //To do: Posible cambio
+                  />
+                  <InputForm
+                    label="Correo"
+                    name={tempUser.mail} //To do: Posible cambio
+                    type="text"
+                    placeholder="prueba"
+                    defaultValue={tempUser.mail} //To do: Posible cambio
+                  />
+                  <InputForm
+                    label="Teléfono Celular"
+                    name={tempUser.phone} //To do: Posible cambio
+                    type="number"
+                    placeholder="prueba"
+                    defaultValue={tempUser.phone} //To do: Posible cambio
+                  />
+                  <div className="flex justify-center items-center w-2/3 my-3">
+                    <Button
+                      text="Guardar Cambios"
+                      type="submit"
+                      colorBg="bg-teal-500"
+                      colorHoverBg="bg-teal-500"
+                      navigation=""
+                    />
+                  </div>
+                </form>
+              </FormProvider>
+            ))
+          ) : loading ? (
+            <SpinnerLoader colorSpin="#AFD135" />
+          ) : (
+            <h1 className="font-bold text-2xl">No existe el usuario</h1>
+          )}
+        </div>
+        <div className="w-1/2 mx-6 my-2 text-left">
+          {user.length === 1 ? (
+            user.map((tempUser) => (
+              <div>
+                <Checkbox
+                  label={"Soy una persona moral"}
+                  subLabel={"Este campo implica que eres una institución afiliada con Gómez Morín."}
+                />
+                <div className="mt-3">
+                  <label className="font-bold">Contraseña</label>
+                </div>
+                <div className="mt-3">
+                  <Button
+                    text="Cambiar Contraseña"
+                    type="submit"
+                    colorBg="bg-pink-red"
+                    colorHoverBg="bg-rose-800"
+                    navigation=""
+                  />
+                </div>
+                <div className="mt-3">
+                  <label className="font-bold">Cuenta</label>
+                </div>
+                <div className="my-3">
+                  <Button
+                    text="Eliminar Cuenta"
+                    type="submit"
+                    colorBg="bg-pink-red"
+                    colorHoverBg="bg-rose-500"
+                    navigation=""
+                  />
+                </div>
+              </div>
+            ))
+          ) : loading ? (
+            <SpinnerLoader colorSpin="#AFD135" />
+          ) : (
+            <h1 className="font-bold text-2xl">No existe el usuario</h1>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InfoProfileCard;

GomezMorinFrontEnd/src/components/Layout.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
+/**
+ * This component is used for the single web application.
+ * In order to show all the components in the routes configured in App.jsx.
+ */
+
+const Layout = () => {
+  return (
+    <div className="w-full h-full flex flex-col">
+      <Navbar />
+      <Outlet />
+      <Footer/>
+    </div>
+  );
+};
+
+export default Layout;