dashboardAdmin: merge

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

package.json

@@ -13,27 +13,27 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@popperjs/core": "^2.11.8",
-    "@types/node": "20.4.5",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
-    "autoprefixer": "10.4.14",
+    "@types/node": "20.8.10",
+    "@types/react": "18.2.36",
+    "@types/react-dom": "18.2.14",
+    "autoprefixer": "10.4.16",
     "chart.js": "^4.4.0",
     "encoding": "^0.1.13",
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.12",
-    "firebase": "^10.1.0",
-    "next": "13.4.12",
+    "eslint": "8.53.0",
+    "eslint-config-next": "14.0.1",
+    "firebase": "^10.5.2",
+    "next": "14.0.1",
     "next-themes": "0.2.1",
-    "postcss": "8.4.27",
+    "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.46.1",
-    "react-icons": "^4.10.1",
+    "react-hook-form": "^7.48.2",
+    "react-icons": "^4.11.0",
     "storybook": "^7.2.2",
     "sweetalert2": "^11.7.28",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.1.6",
-    "zustand": "^4.4.3"
+    "tailwindcss": "3.3.5",
+    "typescript": "5.2.2",
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.2.2",

src/app/container_page.tsx

@@ -30,7 +30,7 @@ export function ContainerPage({
       <main className="min-h-screen overflow-hidden mx-auto">
         {pathname !== '/' && <Categories />}
         {pathname === '/products' ? (
-          <section className="w-full h-full flex flex-col items-start justify-between md:gap-x-5 gap-y-6 md:gap-y-0">
+          <section className="w-full h-full flex flex-col items-start justify-between md:gap-x-5 gap-y-6 md:gap-y-0 mt-20 md:mt-0">
             <ContainerProducts />
             <PaginationProducts />
             <TopSellers />

src/app/products/[id]/page.tsx

@@ -1,24 +1,30 @@
 /* eslint-disable react/jsx-no-comment-textnodes */
 /* eslint-disable react/jsx-key */
-"use client";
-import { useState } from "react";
-import { usePathname } from "next/navigation";
+'use client';
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
 import { TopSellers } from '~/components/containerCards/containerCards';
-import { ContainerPage } from "~/app/container_page";
-import { Carousel } from "~/components/carousels/carousel";
-import { productos } from "~/mockData/mockProducts";
-import Breadcrumb from "~/components/breadcrumb/index";
+import { ContainerPage } from '~/app/container_page';
+import { Carousel } from '~/components/carousels/carousel';
+import { productos } from '~/mockData/mockProducts';
+import Breadcrumb from '~/components/breadcrumb/index';
 import BuyDetail from '~/components/buyDetail';
-
-
-/* este es un nuevo moc donde se agrega la descripcion del producto, */
-import { product } from '~/mockData/mocProductsD';
-
+import { ProductDetail } from '~/types/products';
+import Image from 'next/image';
 import Close from '~/assets/icons/Close';
 
 export default function Dinamica() {
-    const Pathname = usePathname();
-    const RouteName = Pathname.split("/").pop() || "";
+    const {id} = useParams();
+    const [productDetail, setProductDetail] = useState<ProductDetail>()
+
+    useEffect(() => {
+        const fetchProduct = async () => {
+            const res = await fetch(`http://localhost:3001/products/${id}`)
+            const data = await res.json();
+            setProductDetail(data.product)
+        }
+        fetchProduct();
+    },[id])
 
     // MockProducts como las imágenes de un mismo producto *hasta conseguir las imágenes correspondientes de un mismo producto.
     // Max: 10 images/product
@@ -42,28 +48,30 @@ export default function Dinamica() {
     // COMPONENT:
     return (
         <ContainerPage>
-            <Breadcrumb />
-            <div className="flex flex-col items-center w-full bg-background-lm dark:bg-background-dm ms:flex-row ms:justify-center">
-                <div className="flex flex-col items-center w-[75%] ms:flex-row ms:justify-center">
+            {productDetail && <Breadcrumb categoryId={productDetail?.categoryId}/>}
+            <div className="flex flex-col items-center w-full bg-background-lm dark:bg-background-dm md:flex-row md:justify-center">
+                <div className="flex flex-col items-center w-[75%] md:flex-row md:justify-between gap-y-8 md:gap-x-8">
                     {/* IMAGES */}
-                    <div className="flex flex-col items-center min-w-[250px] max-w-[500px]">
+                    <div className="flex flex-col items-center min-w-[250px] max-w-[500px] md:h-[74vh]">
                         <div
-                            className="min-w-full mb-2 hover:cursor-pointer"
+                            className="min-w-full mb-2 hover:cursor-pointer h-full"
                             onClick={toggleModalVisibility}
                         >
-                            <img src={mainImage} className="w-full h-auto" />
+                            <Image src={mainImage} className="w-full h-full" alt="Image" width={600} height={600}/>
                         </div>
                         <div
-                            className={`${isModalVisible ? "grid" : "hidden"} z-[9999] fixed top-0 left-0 place-items-center min-w-full min-h-screen bg-[rgb(15,15,15,0.9)] xxl:bg-primary-lm`}
+                            className={`${isModalVisible ? 'grid' : 'hidden'} z-[9999] fixed top-0 left-0 place-items-center min-w-full min-h-screen bg-[rgb(15,15,15,0.9)] xxl:bg-primary-lm`}
                             onClick={toggleModalVisibility}
                         >
                             <div className="absolute right-4 top-4 text-background-lm w-8 hover:cursor-pointer hover:opacity-80">
                                 <Close />
                             </div>
-                            <img
+                            <Image
                                 src={mainImage}
-                                className={`${isModalVisible ? "opacity-100" : "opacity-0"} p-4 w-[600px] h-auto select-none transition-opacity`}
+                                className={`${isModalVisible ? 'opacity-100' : 'opacity-0'} p-4 w-[600px] h-auto select-none transition-opacity`}
                                 onClick={(e) => e.stopPropagation()}
+                                alt="Image"
+                                width={600} height={600}
                             />
                         </div>
                         <div className="flex-1">
@@ -72,37 +80,39 @@ export default function Dinamica() {
                                 setMainImage={setMainImage}
                                 highlight={true}
                                 stl={{
-                                    width: "w-[7%]",
-                                    padding: "p-0",
+                                    width: 'w-[7%]',
+                                    padding: 'p-0',
                                     buttonSquared: true
                                 }}
                             >
                                 {productImagesSliced.map((product, idx) => (
-                                    <img
+                                    <Image
                                         key={idx}
                                         src={product.image[0]}
+                                        alt="Product"
+                                        width={500} height={500}
                                     />
                                 ))}
                             </Carousel>
                         </div>
                     </div>
                     {/* DETAILS */}
-                    <div className="flex flex-col w-1/2">
-                        <BuyDetail />
+                    <div className="flex flex-col md:w-1/2 w-full">
+                        {productDetail && <BuyDetail product={productDetail}/>}
                         </div>
                     </div>
                 </div>
             {/* Descripcion Detail */}
         <div className="h-auto bg-background-lm dark:bg-background-dm flex justify-center pt-5">
-        <div className="ms:w-[90%] md:w-[90%] lg:w-[64%] xl:w-[64%] w-[90%]">
+        <div className="w-[75%]">
           <div className="bg-primary-lm justify-center items-center flex w-52 h-10 rounded-ss-[10px] rounded-se-[10px]">
             <h1 className="text-2xl items-center text-white">Descripción</h1>
           </div>
           <hr className="w-full bg-background-dm border-background-dm dark:bg-background-lm dark:border-background-lm h-[2px]" />
           <div className=" pl-2 pr-2 pt-5 pb-7">
           <p className="text-background-dm dark:text-background-lm text-2x">
             {/* para agregar un salto de línea en el renderizado, divido el contenido de la descripción del producto en líneas separadas utilizando el carácter de salto de línea ("\n") */}
-          {product[0].description.split ("\n").map (function (item) { return ( <span> {item} <br /> </span> ); })}
+          {productDetail?.description}
             </p>
           </div>
         </div>

src/app/protected/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import { useAuth } from '@/context/AuthContext'
+import { useAuth } from '~/context/AuthContext';
 
 const Protected = () => {
   const { user, logout } = useAuth();

src/assets/img/index.ts

@@ -14,10 +14,6 @@ import CompraSegura from './iconsImg/IconCompraSegura.webp';
 import GarantiaServicioCliente from './iconsImg/IconGarantiaServicoAlCliente.webp';
 import SelloGarantia from './iconsImg/SelloGarantia.webp';
 
-// Importa las imágenes de la carpeta 'favicon'
-import FaviconRed from './favicon/FaviconRed.webp';
-import FaviconRedWhite from './favicon/FaviconRedWhite.webp';
-
 // Importa las imágenes de la carpeta 'banners'
 import BannerCarrucelFarolas from './banners/BannerCarucelFarolas.webp';
 import BannerCarrucelMainCategory from './banners/BannerCarucelMainCategory.webp';
@@ -30,7 +26,7 @@ import BannerWomenAndCar from './banners/BannerWomenAndCar.webp';
 import CategoryFarolas from './banners/CategoryFarolas.webp';
 import FlyerCategores from './banners/FlyerCategories.webp';
 import LogoCardBanner from './banners/LogoCardBanner.webp';
-import BannerTitle from './banners/BannerTitle.webp'
+import BannerTitle from './banners/BannerTitle.webp';
 
 // Importa las imágenes de la carpeta 'categories'
 import Cat01 from './categories/Cat01.png';
@@ -62,10 +58,6 @@ export const Images = {
     GarantiaServicioCliente,
     SelloGarantia,
   },
-  favicon: {
-    FaviconRed,
-    FaviconRedWhite,
-  },
   banners: {
     BannerCarrucelFarolas,
     BannerCarrucelMainCategory,
@@ -78,7 +70,7 @@ export const Images = {
     CategoryFarolas,
     FlyerCategores,
     LogoCardBanner,
-    BannerTitle
+    BannerTitle,
   },
   categories: {
     Cat01,

src/components/Banner.tsx

@@ -5,12 +5,14 @@ import { Images } from '~/assets/img';
 
 const Banner: React.FC = () => {
   return (
-    <Link className="bg-auto bg-center bg-fixed bg-no-repeat bg-banner flex items-center justify-center max-w-[1920px] mx-auto" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
+    <section className='w-full bg-black'>
+    <Link className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
       <Image
         src={Images.banners.BannerTitle}
         alt="Título del Blog"
       />
     </Link>
+    </section>
   );
 };
 

src/components/ThemeMode.tsx

@@ -37,7 +37,7 @@ type IconButtonProps = {
 function IconButton({ icon, ...props }: IconButtonProps) {
   return (
     <button
-      className="group p-1 rounded-full text-background-dm hover:text-text-lm dark:hover:text-text-dm"
+      className="group p-1 rounded-full text-background-dm hover:text-text-lm xxxl:px-0 dark:text-white"
       {...props}
     >
       {icon}