Merge pull request #254 from Actualiza-Tu-Carro/216-userdashboard

216 userdashboard

src/app/dashboardUser/Direcciones/[id]/page.tsx

@@ -0,0 +1,4 @@
+'use client'
+import FormAddress from '~/components/componetsDashboard/FormAddress';
+
+export default FormAddress;

src/app/dashboardUser/Direcciones/page.tsx

@@ -0,0 +1,85 @@
+'use client';
+import Link from 'next/link';
+import React from 'react';
+import { FaRegEdit } from 'react-icons/fa';
+import { MdDelete } from 'react-icons/md';
+import { MainButton } from '~/components/button/button';
+import FormAddress from '~/components/componetsDashboard/FormAddress';
+import { useAddresses } from '~/hooks/userDashboard/useDirections';
+
+import { useDashboardUserStore } from '~/store/dashboardUserStore';
+
+const DireccionesPage = () => {
+  const setFormAddress = useDashboardUserStore((state) => state.setFormAddress);
+  const isOpenFormAddress = useDashboardUserStore(
+    (state) => state.isOpenFormAddress
+  );
+  // const addresses = useDashboardUserStore((state) => state.addresses);
+  const {addresses, remove} = useAddresses('88ee78cc-f654-4497-a5d3-ee92a4e04127')
+
+  return (
+    <div className="min-h-[70vh] flex flex-col justify-evenly">
+      <h1 className="text-4xl font-bold text-center my-8">
+        {!isOpenFormAddress ? 'Direcciones' : 'Dirección nueva'}
+      </h1>
+      {isOpenFormAddress ? (
+        <FormAddress />
+      ) : (
+        <>
+          <div className="flex flex-col gap-y-7 items-center w-full">
+            <section className="border border-primary-lm">
+              {!addresses?.length ? (
+                <p className='py-8 px-12 text-xl'>No has agregado una dirección</p>
+              ) : (
+                <article className="grid grid-cols-8 place-items-center p-4 text-center bg-primary-lm text-gray font-bold">
+                  <p>Departamento</p>
+                  <p>Ciudad</p>
+                  <p>Dirección</p>
+                  <p>Barrio</p>
+                  <p>Teléfono</p>
+                  <p>Referencias</p>
+                  <p>Editar</p>
+                  <p>Eliminar</p>
+                </article>
+              )}
+
+              {addresses?.map((address) => (
+                <React.Fragment key={address.id}>
+                  <article className="grid grid-cols-8 place-items-center px-4 py-3 text-center border-t border-primary-lm">
+                    <p>{address.department.name}</p>
+                    <p>{address.city}</p>
+                    <p>{address.address}</p>
+                    <p>{address.barrio}</p>
+                    <p>{address.phone}</p>
+                    <p>{address.references}</p>
+                    <Link
+                      className="flex justify-center items-center"
+                      href={`/dashboardUser/Direcciones/${address.id}`}
+                    >
+                      <FaRegEdit size={30} />
+                    </Link>
+                    <p
+                      className="flex justify-center items-center"
+                      onClick={() => remove(address.id)}
+                    >
+                      <MdDelete size={30} style={{ color: 'red' }} />
+                    </p>
+                  </article>
+                </React.Fragment>
+              ))}
+            </section>
+            <MainButton
+              variant="secondary"
+              color="red"
+              className=" w-1/6"
+              onClick={() => setFormAddress(true)}
+            >
+              Agregar dirección
+            </MainButton>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+export default DireccionesPage;

src/app/dashboardUser/Favoritos/page.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import CardFavorites from '~/components/componetsDashboard/Cards/CardFavorites';
+import { useEffect, useState } from 'react';
+import { useDashboardUserStore } from '~/store/dashboardUserStore';
+import { ProductsProps } from '~/types/products';
+
+interface Favorite {
+  id: string;
+  image: string;
+  title: string;
+  price: string;
+}
+
+const FavoritosPage = () => {
+  const favorites = useDashboardUserStore((state) => state.favorites);
+  const [favoritesCards, setFavoritesCards] = useState<Favorite[]>();
+
+  useEffect(() => {
+    fetch('http://localhost:3001/products?page=1&limit=300&order=NOMBRE ASC')
+      .then((res) => res.json())
+      .then((data) =>
+        setFavoritesCards(
+          data.items
+            .filter((product: ProductsProps) => favorites.includes(product.id))
+            .map((product: ProductsProps) => ({
+              id: product.id,
+              image: product.image[0],
+              title: product.title,
+              price: product.price.toString(),
+            }))
+        )
+      );
+  }, [favorites]);
+
+  return (
+    <section className="w-full">
+      <h1 className="text-4xl font-bold text-center my-10">Favoritos</h1>
+      {!favoritesCards?.length ? (
+        <h3 className='text-center text-xl'>No has añadido favoritos</h3>
+      ) : (
+        <article className="border-x border-primary-lm">
+          <div className="flex justify-around items-center text-center bg-primary-lm py-4 font-bold text-gray">
+            <p className="w-[100px]">Imagen</p>
+            <p className="w-72">Nombre</p>
+            <p className="w-40">Precio</p>
+            <p className="w-40">Eliminar de favoritos</p>
+          </div>
+          {favoritesCards?.map((favorite) => (
+            <CardFavorites
+              key={favorite.title}
+              image={favorite.image}
+              title={favorite.title}
+              price={favorite.price}
+              id={favorite.id}
+            />
+          ))}
+        </article>
+      )}
+    </section>
+  );
+};
+export default FavoritosPage;

src/app/dashboardUser/layout.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react';
 import '~/assets/styles/tailwind.css';
 // import { Switch, Route, Redirect } from 'react-router-dom';
@@ -11,6 +12,8 @@ import FooterAdmin from '~/components/componetsDashboard//Footers/FooterAdmin.js
 
 import Dashboard from '~/app/dashboardUser/page';
 import { type } from 'os';
+import Form from '~/components/form/Form';
+import { useDashboardUserStore } from '~/store/dashboardUserStore';
 // import Maps from 'views/admin/Maps.js';
 // import Settings from 'views/admin/Settings.js';
 // import Tables from 'views/admin/Tables.js';
@@ -19,11 +22,13 @@ type AdminProps = {
 };
 
 export default function Admin({ children }: AdminProps) {
+  const {contactForm, setContactForm} = useDashboardUserStore(state => state);
   return (
     <>
       <Sidebar />
       <div className="md:ml-64 bg-blueGray-100 min-h-screen">
         <div className="min-h-screen p-4 md:p-10 mx-auto w-full flex flex-col justify-around">
+        {contactForm && <Form updateState={setContactForm} />}
           {children}
           {/* <Switch>
             <Route path="/admin/dashboard" exact component={Dashboard} />

src/app/dashboardUser/page.tsx

@@ -1,26 +1,150 @@
-import React from 'react';
+'use client';
+import React, { useState } from 'react';
+import { MdOutlineSupportAgent } from 'react-icons/md';
 import '~/assets/styles/tailwind.css';
+import FormSupport from '~/components/componetsDashboard/FormSupport';
 
+const pedidos = [
+  {
+    id: '2347588823',
+    date: new Date(),
+    paymentMethod: 'Tarjeta de crédito',
+    state: 'Pagado',
+    address: 'Carrera 1a #11-30',
+    products: [
+      {
+        name: 'Bombillo led Mazda',
+        cuantity: 2,
+        unityPrice: 4000,
+      },
+      {
+        name: 'Radio FM Bluetooth',
+        cuantity: 3,
+        unityPrice: 5000,
+      },
+      {
+        name: 'Farola Mazda 3',
+        cuantity: 4,
+        unityPrice: 1500,
+      },
+    ],
+    totalPrice: 6700,
+  },
+  {
+    id: '2347544723',
+    date: new Date(),
+    paymentMethod: 'Tarjeta de crédito',
+    state: 'Pagado',
+    address: 'Carrera 1a #11-30',
+    products: [
+      {
+        name: 'Bombillo led',
+        cuantity: 2,
+        unityPrice: 3000,
+      },
+      {
+        name: 'Radio FM Bluetooth',
+        cuantity: 3,
+        unityPrice: 2000,
+      },
+      {
+        name: 'Farola Mazda 3',
+        cuantity: 8,
+        unityPrice: 1500,
+      },
+    ],
+    totalPrice: 6500,
+  },
+];
 
 export default function Dashboard() {
+  const [form, setForm] = useState(false);
+  const [id, setId] = useState<String>('');
+
   return (
-    <>
-      <div className="flex flex-wrap">
-        <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
-
-        </div>
-        <div className="w-full xl:w-4/12 px-4">
-
-        </div>
-      </div>
-      <div className="flex flex-wrap mt-4">
-        <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
-
-        </div>
-        <div className="w-full xl:w-4/12 px-4">
-
-        </div>
-      </div>
-    </>
+    <div className="flex flex-wrap flex-col gap-y-12">
+      <h1 className='font-bold text-4xl text-center mx-auto'>Pedidos</h1>
+      <table className="w-full">
+        <thead>
+          <tr className="flex px-4 items-center justify-between text-sm p-4 bg-primary-lm text-gray">
+            <th className="w-24">Fecha</th>
+            <th className="w-36">Método de pago</th>
+            <th className="w-20">Estado</th>
+            <th className="w-36">Dirección de envío</th>
+            <th className="w-40">Productos</th>
+            <th className="w-20">Cantidad</th>
+            <th className="w-28">Precio unitario</th>
+            <th className="w-28">Precio total</th>
+            <th className="w-24">Ayuda</th>
+          </tr>
+        </thead>
+        <tbody>
+          {pedidos.map((pedido) => (
+            <React.Fragment key={pedido.id}>
+              <tr
+                key={`${pedido.id}-info`}
+                className="text-center text-sm bg-secondary-dm text-gray"
+              >
+                <td>
+                  <span className="block m-1">Id del pedido: {pedido.id}</span>
+                </td>
+              </tr>
+              <tr
+                key={`${pedido.id}-details`}
+                className="flex items-center justify-between text-sm text-center border border-primary-lm px-4"
+              >
+                <td className="w-24">
+                  {pedido.date.toISOString().split('T')[0]}
+                </td>
+                <td className="w-36">{pedido.paymentMethod}</td>
+                <td className="w-20">{pedido.state}</td>
+                <td className="w-36">{pedido.address}</td>
+                <td className="w-40">
+                  {pedido.products.map((product) => (
+                    <div
+                      key={`${pedido.id}-${product.name}`}
+                      className="flex flex-col items-center my-2"
+                    >
+                      {product.name}
+                    </div>
+                  ))}
+                </td>
+                <td className="w-20">
+                  {pedido.products.map((product) => (
+                    <div
+                      key={`${pedido.id}-${product.name}-quantity`}
+                      className="flex flex-col items-center my-2"
+                    >
+                      {product.cuantity}
+                    </div>
+                  ))}
+                </td>
+                <td className="w-28">
+                  {pedido.products.map((product) => (
+                    <div
+                      key={`${pedido.id}-${product.name}-price`}
+                      className="flex flex-col items-center my-2"
+                    >
+                      {product.unityPrice}
+                    </div>
+                  ))}
+                </td>
+                <td className="w-28">{pedido.totalPrice}</td>
+                <td
+                  className="w-24 flex justify-center cursor-pointer"
+                  onClick={() => {
+                    setId(pedido.id);
+                    setForm(true);
+                  }}
+                >
+                  <MdOutlineSupportAgent size={30} />
+                </td>
+              </tr>
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+      {form && <FormSupport setForm={setForm} id={id} />}
+    </div>
   );
 }