From ba9505ff75d12d9a0ed55e9081fe7198f7cdfc91 Mon Sep 17 00:00:00 2001
From: tchami <131756888+tchamianest@users.noreply.github.com>
Date: Thu, 18 Jul 2024 10:33:29 +0200
Subject: [PATCH] bugFix(allPage): Fix all remain bug into champs Bay

---
 src/app/globals.css              |  3 ++
 src/app/products/[id]/page.tsx   | 58 +++++++++++----------
 src/components/Card.tsx          | 87 +++++++++++++++++++-------------
 src/components/DashNavbar.tsx    |  4 +-
 src/components/LatestCard.tsx    |  6 ++-
 src/components/Table.tsx         | 35 +++++++++++--
 src/components/chartssection.tsx | 61 +++++++++++-----------
 src/components/singleproduct.tsx |  2 +-
 src/utils/axios.ts               |  2 +-
 9 files changed, 160 insertions(+), 98 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 58148d9..2aae8bc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -29,6 +29,9 @@ body {}
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
+.capitalize-first::first-letter {
+  text-transform: uppercase;
+}
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .hide-scrollbar {
diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
index 2b54f7d..add074b 100644
--- a/src/app/products/[id]/page.tsx
+++ b/src/app/products/[id]/page.tsx
@@ -28,23 +28,19 @@ import ReviewWrapper from '@/components/ReviewsWrapper';
 //import StripeProvider from '@/components/StripeProvider';
 
 function Page() {
-  const { wishNumber } = useAppSelector(
-    (state: RootState) => state.wishlist
-  )
+  const { wishNumber } = useAppSelector((state: RootState) => state.wishlist);
   const [thumbsSwiper, setThumbsSwiper] = useState(null);
-  const [addProductToCart, setAddProductToCart]=useState(false)
-  
-  const {cart} = useAppSelector(
-    (state: RootState) => state.userCartData,
-  );
+  const [addProductToCart, setAddProductToCart] = useState(false);
+
+  const { cart } = useAppSelector((state: RootState) => state.userCartData);
 
-  const carts=cart as IUSERCART
-  const { id } :any= useParams();
+  const carts = cart as IUSERCART;
+  const { id }: any = useParams();
   const handleSwiper = (swiper: any) => {
     setThumbsSwiper(swiper);
   };
   const _id: string = id.toLocaleString();
-  const { data, isLoading, error , refetch} = useQuery<any>({
+  const { data, isLoading, error, refetch } = useQuery<any>({
     queryKey: ['product', id],
     queryFn: async () => {
       try {
@@ -71,17 +67,20 @@ function Page() {
     const productId = data.product.id;
     dispatch(handleUserAddCart({ productPrice, productId }));
   };
-  const handleAddRemoveWish = async(event: { preventDefault: () => void; })=>{
+  const handleAddRemoveWish = async (event: { preventDefault: () => void }) => {
     event.preventDefault();
-    const response:any = await request.post('/wishes', { productId:id });
-    if(response.status == 200 || response.status == 203){
+    const response: any = await request.post('/wishes', { productId: id });
+    if (response.status == 200 || response.status == 203) {
       const { status } = response;
-      dispatch(handleWishlistCount(status  == 200 ? await wishNumber + 1 : await wishNumber - 1));
-      showToast(response.message, 'success')
+      dispatch(
+        handleWishlistCount(
+          status == 200 ? (await wishNumber) + 1 : (await wishNumber) - 1,
+        ),
+      );
+      showToast(response.message, 'success');
     }
-    console.log('this is response', response)
-    
-  }
+
+  };
   return (
     <div>
       {/* // <StripeProvider> */}
@@ -163,18 +162,22 @@ function Page() {
                 </div>
                 <div className="w-full">
                   <div>
-                    <h1 className="font-bold mt-5 text-2xl capitalize">
+                    <h1 className="font-bold mt-5 text-2xl capitalize-first">
                       {productName}
                     </h1>
                   </div>
                   <div className="flex flex-col gap-4">
                     <div className="flex gap-2 mt-5">
-                      <div className="p-3 rounded-full bg-gray-200 hover:bg-green-500 hover:text-white cursor-pointer" onClick={handleAddRemoveWish}>
+                      <div
+                        className="p-3 rounded-full bg-gray-200 hover:bg-green-500 hover:text-white cursor-pointer"
+                        onClick={handleAddRemoveWish}
+                      >
                         <FaRegHeart />
                       </div>
-                      <div className={`p-3 rounded-full  hover:bg-green-500 hover:text-white cursor-pointer  '${(addProductToCart || carts.product.some(item => item.product ===data.product.id)) ?' bg-red-500 pointer-events-none':'pointer-events-auto bg-gray-200'}`}>
+                      <div
+                        className={`p-3 rounded-full  hover:bg-green-500 hover:text-white cursor-pointer  '${addProductToCart || carts.product.some((item) => item.product === data.product.id) ? ' bg-red-500 pointer-events-none' : 'pointer-events-auto bg-gray-200'}`}
+                      >
                         <MdOutlineShoppingCart
-                        
                           onClick={() => {
                             handleNewItem();
                           }}
@@ -227,10 +230,13 @@ function Page() {
                 </div>
               </div>
               <div className="w-full flex flex-col mt-10">
-              <ReviewWrapper productId={_id.trim()} refetch={refetch} reviews={reviews} />
+                <ReviewWrapper
+                  productId={_id.trim()}
+                  refetch={refetch}
+                  reviews={reviews}
+                />
               </div>
             </div>
-           
           </div>
         )}
       </>
@@ -239,4 +245,4 @@ function Page() {
     </div>
   );
 }
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index b8f360f..4146f71 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -23,57 +23,61 @@ function Card({
   id,
   reviews,
 }: Cards) {
+  const [addProductToCart, setAddProductToCart] = useState(false);
+  const { cart } = useAppSelector((state: RootState) => state.userCartData);
 
-  const [addProductToCart, setAddProductToCart]=useState(false)
-  const {cart} = useAppSelector(
-    (state: RootState) => state.userCartData,
-  );
-  
-  const carts=cart as IUSERCART
+  const carts = cart as IUSERCART;
   const productId = id;
 
   const dispatch = useAppDispatch();
   const handleNewItem = () => {
-    setAddProductToCart(true)
+    setAddProductToCart(true);
     dispatch(handleUserAddCart({ productPrice, productId }));
-  }
-  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+  };
+  const handleImageError = (
+    event: React.SyntheticEvent<HTMLImageElement, Event>,
+  ) => {
     event.currentTarget.src = defaultProductImage.src;
   };
-const { wishNumber } = useAppSelector(
-  (state: RootState) => state.wishlist
-)
+  const { wishNumber } = useAppSelector((state: RootState) => state.wishlist);
 
-const handleAddRemoveWish = async(event: { preventDefault: () => void; })=>{
-  event.preventDefault();
-  const response:any = await request.post('/wishes', { productId:id });
- 
-  if(response.status == 200 || response.status == 203){
-    const { status } = response;
-    dispatch(handleWishlistCount(status  == 200 ? await wishNumber + 1 : await wishNumber - 1));
-    showToast(response.message, 'success')
-  }
-  console.log('this is response', response)
-  
-}
+  const handleAddRemoveWish = async (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    const response: any = await request.post('/wishes', { productId: id });
+
+    if (response.status == 200 || response.status == 203) {
+      const { status } = response;
+      dispatch(
+        handleWishlistCount(
+          status == 200 ? (await wishNumber) + 1 : (await wishNumber) - 1,
+        ),
+      );
+      showToast(response.message, 'success');
+    }
+    console.log('this is response', response);
+  };
   return (
     <div className="relative w-full max-w-[80%] sm:max-w-48 sm:mb-10 min-w-[200px] mx-3 my-6 sm:h-[17rem] h-[19rem] bg-white border border-gray-200 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out transform hover:scale-105">
       <Link href={`/products/${id}`}>
         <div className="overflow-hidden p-3">
-          <img 
-            src={productThumbnail || '../../public/product-default.png'} 
-            alt={productName} 
+          <img
+            src={productThumbnail || '../../public/product-default.png'}
+            alt={productName}
             className="w-full h-32 object-contain transition-transform duration-300"
             onError={handleImageError}
           />
         </div>
       </Link>
       <div className="px-3 pb-3">
-        <h5 className="text-sm font-semibold mb-1  text-gray-900 truncate">
-          {productName.length < 30 ? productName : `${productName.substring(0, 30)}...`}
+        <h5 className="text-sm font-semibold mb-1  text-gray-900 truncate capitalize-first">
+          {productName.length < 30
+            ? productName
+            : `${productName.substring(0, 30)}...`}
         </h5>
         <p className="text-xs text-gray-700 mb-2 truncate">
-          {productDescription.length < 50 ? productDescription : `${productDescription.substring(0, 50)}...`}
+          {productDescription.length < 50
+            ? productDescription
+            : `${productDescription.substring(0, 50)}...`}
         </p>
         <div className="flex items-center justify-between mb-2">
           <span className="text-sm font-bold text-green-500">
@@ -92,11 +96,26 @@ const handleAddRemoveWish = async(event: { preventDefault: () => void; })=>{
         </div>
         <div className="flex justify-end space-x-4">
           <Link href={`/products/${id}`}>
-            <MdOutlineRemoveRedEye className="text-gray-600  hover:text-blue-600 cursor-pointer" size={20} />
+            <MdOutlineRemoveRedEye
+              className="text-gray-600  hover:text-blue-600 cursor-pointer"
+              size={20}
+            />
           </Link>
-          <FaRegHeart className="text-gray-600 hover:text-red-500 cursor-pointer" size={20} onClick={handleAddRemoveWish}/>
-          <MdOutlineShoppingCart className={` hover:text-green-500 cursor-pointer ${addProductToCart ||  carts.product.some(item => item.product === id) ?
-            'text-red-600 pointer-events-none':'text-gray-600'}`} size={20} onClick={handleNewItem} />
+          <FaRegHeart
+            className="text-gray-600 hover:text-red-500 cursor-pointer"
+            size={20}
+            onClick={handleAddRemoveWish}
+          />
+          <MdOutlineShoppingCart
+            className={` hover:text-green-500 cursor-pointer ${
+              addProductToCart ||
+              carts.product.some((item) => item.product === id)
+                ? 'text-red-600 pointer-events-none'
+                : 'text-gray-600'
+            }`}
+            size={20}
+            onClick={handleNewItem}
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/DashNavbar.tsx b/src/components/DashNavbar.tsx
index 306172f..aae0e42 100644
--- a/src/components/DashNavbar.tsx
+++ b/src/components/DashNavbar.tsx
@@ -162,7 +162,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
                       </span>
                     </li>
                   </Link>
-                  <Link href="/dashboard/product/create">
+                  {/* <Link href="/dashboard/product/create">
                     <li
                       key="product"
                       className={`flex bg-primary/80 ${activelink === 'addproduct' ? 'text-yellow-400' : 'text-white'} text-sm hover:text-yellow-400 duration-200  bg-transparent rounded-md  hover:bg-primary p-2 cursor-pointer hover:bg-light-white items-center gap-x-4  bg-light-white`}
@@ -174,7 +174,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
                         Create Product
                       </span>
                     </li>
-                  </Link>
+                  </Link> */}
                 </>
               )}
             </div>
diff --git a/src/components/LatestCard.tsx b/src/components/LatestCard.tsx
index 889f4ed..d5e69df 100644
--- a/src/components/LatestCard.tsx
+++ b/src/components/LatestCard.tsx
@@ -15,7 +15,7 @@ const LatestCard: React.FC<Properties> = ({
 }) => {
   return (
     <div className="flex justify-center items-center flex-col shadow-lg border pb-2  ">
-      <div className="sm:w-[250px] sm:min-w-[250px] h-[260px] min-w-[340px]    overflow-hidden   ">
+      <div className="sm:w-[270px] sm:min-w-[250px] h-[270px] min-w-[340px]    overflow-hidden   ">
         <div
           className="w-full pt-10  h-full bg-no-repeat bg-cover  transition-transform duration-500 ease-in-out transform hover:scale-110"
           style={{
@@ -25,7 +25,9 @@ const LatestCard: React.FC<Properties> = ({
       </div>
       <div className="   w-full pl-2 ">
         <div className=" bg-white h-full w-full bottom-0 left-0">
-          <h1 className=" font-semibold text-2xl  mb-2 capitalize">{name}</h1>
+          <h1 className=" font-semibold text-1xl  mb-2 capitalize-first">
+            {name}
+          </h1>
           <div className="flex gap-4">
             <p className="">Price:{price.toLocaleString()} RWF </p>
           </div>
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index f961f43..4131c31 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -61,10 +61,38 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
         <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
       </div>
     );
-  if (error) return <span>Error: {error.message}</span>;
+  if (error)
+    return (
+      <div className="w-full">
+        <div className="w-full">
+          {' '}
+          <Link href="/dashboard/product/create">
+            <button className="bg-blue-500 p-3 px-5 text-white font-semibold cursor-pointer  hover:bg-blue-700 duration-200">
+              Add New Product
+            </button>
+          </Link>
+        </div>
+        <div className="capitalize flex flex-col items-center w-full h-full font-bold text-gray-400 text-3xl">
+          <img
+            src="/empty.avif"
+            alt="Not found"
+            className="w-[140px] h-[50%]"
+          />
+          No Product Available
+        </div>
+      </div>
+    );
   return (
     <>
       <div className=" overflow-x-auto shadow-md sm:rounded-lg sm:w-[80%] w-full">
+        <div className="w-full">
+          {' '}
+          <Link href="/dashboard/product/create">
+            <button className="bg-blue-500 p-3 px-5 text-white font-semibold cursor-pointer  hover:bg-blue-700 duration-200">
+              Add New Product
+            </button>
+          </Link>
+        </div>
         <table className="w-full text-sm text-left rtl:text-right text-gray-900 dark:text-gray-400">
           <thead className="text-xs text-gray-500 uppercase bg-gray-100 dark:text-gray-900">
             <tr>
@@ -103,7 +131,7 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
             </tr>
           </thead>
           <tbody>
-            {data.map(
+            {data?.map(
               (
                 product: {
                   id: string;
@@ -129,7 +157,8 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
                   <td className="px-6 py-4">{product.productName}</td>
                   <td className="px-6 py-4">{product.stockLevel}</td>
                   <td className="px-6 py-4">
-                    {product.productPrice?.toLocaleString()} {product.productCurrency}
+                    {product.productPrice?.toLocaleString()}{' '}
+                    {product.productCurrency}
                   </td>
                   <td className="px-6 py-4">{product.productDiscount}</td>
                   <td className="py-4">
diff --git a/src/components/chartssection.tsx b/src/components/chartssection.tsx
index 8a0fa94..47aeca7 100644
--- a/src/components/chartssection.tsx
+++ b/src/components/chartssection.tsx
@@ -18,7 +18,6 @@ export const options = {
   title: '',
 };
 const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
-  
   const ProductCategory = useRef<HTMLInputElement>(null);
   const data1 = [
     ['Task', 'Hours per Day'],
@@ -34,40 +33,36 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
     ['productsStats', data?.productsStats > 1 ? data?.productsStats : 0.2],
   ];
 
-
-
   const mutation = useMutation({
     mutationFn: (product_categories: string) => {
-      return request.post(`/categories`, {categoryName:product_categories})
+      return request.post(`/categories`, { categoryName: product_categories });
     },
     onError: (error: any) => {
       showToast(error.response.data.error, 'error');
     },
 
-      onSuccess: async (result:any) => {
-        window.location.reload();
-      },
-
-      onSettled: (result, error) => {
-        showToast(error.response.data.message, 'error');
-      },
-  })
+    onSuccess: async (result: any) => {
+      window.location.reload();
+    },
 
-  const handleAddCategory= async () => {
+    onSettled: (result, error) => {
+      showToast(error.response.data.message, 'error');
+    },
+  });
 
-    const product_categories=ProductCategory.current?.value as string
-    if(product_categories.length>2){
-  
-     await mutation.mutate(product_categories);
-    
-    }else{
-      showToast('Product category must be atleast 3 characters length', 'error');
+  const handleAddCategory = async () => {
+    const product_categories = ProductCategory.current?.value as string;
+    if (product_categories.length > 2) {
+      await mutation.mutate(product_categories);
+    } else {
+      showToast(
+        'Product category must be atleast 3 characters length',
+        'error',
+      );
     }
     //alert(product_categories)
-    
   };
 
-
   return (
     <div className="flex gap-7 sm:w-[80%] h-full sm:flex-row flex-col w-full sm:justify-start sm:items-start justify-center items-center ">
       {user && user?.Role?.name === 'seller' ? (
@@ -127,14 +122,22 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
           <h1 className="font-semibold text-1xl text-left mx-4 w-full mb-3">
             All Categolie On Market
           </h1>
-
-          <div className=' flex flex-col min-w-[80%] md:min-w-[80%] md:w-[80%] md:flex-row items-center justify-evenly py-2 mb-2 gap-4'>
-              <input className=' w-[100%] md:w-[70%] h-12  shadow-lg border border-slate-500' ref={ProductCategory}/> 
-              <button className='sm:min-w-[30%] min-w-[100%] h-12 bg-primaryBlue px-4 text-white text-sm' onClick={handleAddCategory}>Add Category</button>
-          </div>
+          {user && user?.Role?.name === 'admin' && (
+            <div className=" flex flex-col min-w-[80%] md:min-w-[80%] md:w-[80%] md:flex-row items-center justify-evenly py-2 mb-2 gap-4">
+              <input
+                className=" w-[100%] md:w-[70%] h-12  shadow-lg border border-slate-500"
+                ref={ProductCategory}
+              />
+              <button
+                className="sm:min-w-[30%] min-w-[100%] h-12 bg-primaryBlue px-4 text-white text-sm"
+                onClick={handleAddCategory}
+              >
+                Add Category
+              </button>
+            </div>
+          )}
 
           <div className=" w-[80%] p-2 rounded-sm overflow-auto h-[150px]">
-            
             <ul className="flex flex-col gap-3">
               {categories &&
                 categories?.map((el: any) => (
@@ -157,4 +160,4 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
   );
 };
 
-export default Chartssection;
\ No newline at end of file
+export default Chartssection;
diff --git a/src/components/singleproduct.tsx b/src/components/singleproduct.tsx
index 1cc8383..ae1b645 100644
--- a/src/components/singleproduct.tsx
+++ b/src/components/singleproduct.tsx
@@ -137,7 +137,7 @@ const Singleproduct: React.FC<Properties> = ({ role }) => {
             </div>
             <div className="sm:ml-10 ml-0 flex flex-col gap-5">
               <div>
-                <h1 className="font-bold mt-5 text-2xl capitalize">
+                <h1 className="font-bold mt-5 text-2xl capitalize-first">
                   {productName}
                 </h1>
               </div>
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 698eba5..ffb0441 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -32,7 +32,7 @@ axiosInstance.interceptors.response.use(
     if (!error.response) {
       showToast('Server Network Error!', 'error');
     }
-    if (error.response.status === 401) {
+    if (error?.response?.status === 401) {
       if (typeof window !== 'undefined') {
         localStorage.clear();
         window.location.href = '/auth/login';