bugFix(allPage): Fix all remain bug into champs Bay

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 {

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;
+export default Page;

src/components/AssigningRoles.tsx

@@ -54,7 +54,7 @@ const AssigningRole: React.FC<AssignRoleInterface> = ({
     <>
       {isLoading || mutation.isPending ? (
         <div>
-          <div className="border-t-4 border-b-4 border-black rounded-full w-5 h-5 animate-spin m-auto"></div>
+          <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-5 h-5 animate-spin m-auto"></div>
         </div>
       ) : (
         <select

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>

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>

src/components/GoogleButton.tsx

@@ -6,7 +6,7 @@ const GoogleButton: React.FC = () => {
     <img
       src="/google.jpg"
       alt="Google"
-      className=" cursor-pointer"
+      className=" cursor-pointer hover:scale-110"
       width={50}
       height={50}
       onClick={() => (window.location.href = `${api_base_url}/users/google`)}

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>

src/components/ReviewCard.tsx

@@ -1,36 +1,51 @@
-import React from 'react';//@ts-ignore
-import ReactStars from "react-rating-stars-component";
+import React from 'react'; //@ts-ignore
+import ReactStars from 'react-rating-stars-component';
 
 interface ReviewInterface {
-    rating:number;
-    feedback:string;
-    image:string;
-    firstName:string;
-    lastName:string;
-    buyerId?:string;
+  rating: number;
+  feedback: string;
+  image: string;
+  firstName: string;
+  lastName: string;
+  buyerId?: string;
 }
 
-const ReviewCard: React.FC<ReviewInterface> =({ rating, feedback, image, firstName, lastName }) =>{
-    return(
-        <div className='block'>
-            <div className="double-grid w-[50%] border rounded-2xl border">
-                <div className='flex items-center justify-center w-full'>
-                    <img src={image} className="rounded-full h-[60px] w-[60px] border-black-1 "/>
-                </div>
-                <div className="wrap py-4">
-                    <span className="text-[13px] font-bold capitalize">{firstName} {lastName}</span>
-                    <ReactStars
-                        count={5}
-                        value={rating}
-                        isHalf={true}
-                        size={12}
-                        activeColor="#ffd700"
-                        edit={false}
-                    />
-                    <span className="text-[12px] bold">{feedback.length > 30 ? feedback.substring(0,30)+'...' : feedback}</span>
-                </div>
-            </div>
+const ReviewCard: React.FC<ReviewInterface> = ({
+  rating,
+  feedback,
+  image,
+  firstName,
+  lastName,
+}) => {
+  return (
+    <div className="block">
+      <div className="double-grid sm:w-[50%] w-[90%] rounded-2xl border">
+        <div className="flex items-center justify-center w-full">
+          <img
+            src={image}
+            className="rounded-full h-[60px] w-[60px] border-black-1 "
+          />
         </div>
-    )
+        <div className="wrap py-4">
+          <span className="text-[13px] font-bold capitalize">
+            {firstName} {lastName}
+          </span>
+          <ReactStars
+            count={5}
+            value={rating}
+            isHalf={true}
+            size={12}
+            activeColor="#ffd700"
+            edit={false}
+          />
+          <span className="text-[12px] bold">
+            {feedback.length > 30
+              ? feedback.substring(0, 30) + '...'
+              : feedback}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
 };
-export default ReviewCard;
+export default ReviewCard;