Merge pull request #57 from atlp-rwanda/bg-fix-dashboard

#187854921 Change Dashboard Routes to Resolve Bug

src/__tests__/CreateProdudash.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import Page from '@/app/dashboard/addproduct/page';
+import Page from '@/app/dashboard/product/create/page';
 import request from '@/utils/axios';
 import { useRouter } from 'next/navigation';
 

src/__tests__/ProfileeditDashboard.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import Page from '@/app/dashboard/profile_/[id]/page';
+import Page from '@/app/dashboard/profile/[id]/page';
 import request from '@/utils/axios';
 import { useRouter } from 'next/navigation';
 

src/__tests__/UpdateReduce.test.tsx

@@ -72,7 +72,7 @@ describe('updatePassword slice', () => {
 
     const action = {
       type: updatePassword.rejected.type,
-      error: 'Failed to update password',
+      erro: 'Failed to update password',
     };
 
     const state = reducer(initialState, action);

src/__tests__/singleProduct.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import Page from '@/app/dashboard/products_/[id]/page';
+import Page from '@/app/dashboard/product/[id]/page';
 import request from '@/utils/axios';
 import { useRouter } from 'next/navigation';
 

src/__tests__/updatesDash.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import Page from '@/app/dashboard/product_/[id]/page';
+import Page from '@/app/dashboard/product/[id]/edit/page';
 import request from '@/utils/axios';
 import { useRouter } from 'next/navigation';
 import { Provider } from 'react-redux';

src/components/DashNavbar.tsx

@@ -60,7 +60,9 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
       <div className="stick relative">
         <div
           className={`${
-            open ? 'w-64' : 'sm:w-20 w-full sm:min-w-0 min-w-[280px]'
+            open
+              ? 'w-60 duration-300'
+              : 'sm:w-20 w-full sm:min-w-0 min-w-[280px]'
           } sm:h-screen h-[70px] p-5 sticky top-0 pt-4 justify-between    duration-300 sm:flex-col bg-primaryBlue flex`}
         >
           <img
@@ -74,13 +76,13 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
           <div className="flex items-center ">
             <img
               src="/logo.png"
-              className={`cursor-pointer duration-500 ${
-                open && 'rotate-[360deg]' && 'min-w-[20px]'
+              className={`cursor-pointer w-10 duration-500 ${
+                open && 'rotate-[360deg]' && 'min-w-[10px]'
               }`}
               onClick={() => handleClick('/')}
             />
             <h1
-              className={`text-white text-1xl  origin-left font-medium duration-200 ${
+              className={`text-white text-sm origin-left font-medium duration-200 ${
                 !open && 'scale-0'
               }`}
             >
@@ -93,7 +95,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
               <Link href="/dashboard">
                 <li
                   key="home"
-                  className={`flex bg-primary/80 ${activelink === 'dashboard' ? 'text-yellow-400' : 'text-white'} text-2xl  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`}
+                  className={`flex bg-primary/80 ${activelink === 'dashboard' ? '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`}
                 >
                   {React.createElement(FaHome)}
                   <span
@@ -107,7 +109,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
                 <Link href="/dashboard/users">
                   <li
                     key="users"
-                    className={`flex bg-primary/80 ${activelink === 'users' ? 'text-yellow-400' : 'text-white'} text-2xl  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`}
+                    className={`flex bg-primary/80 ${activelink === 'users' ? '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`}
                   >
                     {React.createElement(FaUsersGear)}
                     <span
@@ -122,7 +124,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
               <Link href="/dashboard/profile">
                 <li
                   key="profile"
-                  className={`flex bg-primary/80 ${activelink === 'profile' ? 'text-yellow-400' : 'text-white'} text-2xl 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`}
+                  className={`flex bg-primary/80 ${activelink === 'profile' ? '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`}
                 >
                   {React.createElement(FaUserShield)}
                   <span
@@ -135,7 +137,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
               <Link href="/dashboard/product">
                 <li
                   key="product"
-                  className={`flex bg-primary/80 ${activelink === 'product' ? 'text-yellow-400' : 'text-white'} text-2xl  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`}
+                  className={`flex bg-primary/80 ${activelink === 'product' ? '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`}
                 >
                   {React.createElement(AiFillProduct)}
                   <span
@@ -150,7 +152,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
                   <Link href="/dashboard/orders">
                     <li
                       key="product"
-                      className={`flex bg-primary/80 ${activelink === 'orders' ? 'text-yellow-400' : 'text-white'} text-2xl 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`}
+                      className={`flex bg-primary/80 ${activelink === 'orders' ? '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`}
                     >
                       {React.createElement(BsBorderStyle)}
                       <span
@@ -160,10 +162,10 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
                       </span>
                     </li>
                   </Link>
-                  <Link href="/dashboard/addproduct">
+                  <Link href="/dashboard/product/create">
                     <li
                       key="product"
-                      className={`flex bg-primary/80 ${activelink === 'addproduct' ? 'text-yellow-400' : 'text-white'} text-2xl 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`}
+                      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`}
                     >
                       {React.createElement(MdCreateNewFolder)}
                       <span
@@ -180,7 +182,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
             <li
               key="product"
               onClick={() => mutate()}
-              className={`flex bg-primary/80 ${activelink === 'product' ? 'text-yellow-400' : 'text-white'} text-2xl  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`}
+              className={`flex bg-primary/80 ${activelink === '' ? '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`}
             >
               {React.createElement(MdOutlineLogout)}
               <span
@@ -246,14 +248,15 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
                       onClick={handlemenu}
                       className={`${activelink === 'addproduct' ? 'bg-yellow-600 text-white font-bold' : 'text-black'} hover:bg-yellow-400 px-2 hover:text-white font-semibold`}
                     >
-                      <Link href="/dashboard/addproduct">Create Product</Link>
+                      <Link href="/dashboard/product/create">
+                        Create Product
+                      </Link>
                     </li>
                   </>
                 )}
 
                 <li
                   key="product"
-
                   onClick={() => mutate()}
                   className={` hover:bg-yellow-400 px-2 hover:text-white font-semibold`}
                 >

src/components/EditProfile.tsx

@@ -3,26 +3,31 @@ import React, { useEffect, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, RootState } from '@/redux/store';
 import { getUserProfile, updateUserProfile } from '@/redux/slices/profileSlice';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import InputBox from '@/components/InputBox';
+
 import { toast } from 'react-toastify';
 import { showToast } from '@/helpers/toast';
 import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
+
 import updateSchema from '@/validations/userProfileSchema';
 import { useRouter } from 'next/navigation';
 import type { z } from 'zod';
 
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import InputBox from '@/components/InputBox';
+import UpdatePasswords from './updatepassword';
 type FormSchemaType = z.infer<typeof updateSchema>;
 
 const UserProfileForm: React.FC = () => {
   const route = useRouter();
+  const [showlModal, setShowmodal] = useState(false);
   const dispatch = useDispatch<AppDispatch>();
   const { user, loading, error } = useSelector(
     (state: RootState) => state.userProfile,
   );
-
+  const handleshow = () => {
+    setShowmodal(!showlModal);
+  };
   const {
     register,
     handleSubmit,
@@ -113,7 +118,6 @@ const UserProfileForm: React.FC = () => {
         );
         if (response.payload && response.payload.User) {
           currentProfile.User = response.payload.User;
-          console.log('currentProfile', currentProfile);
           localStorage.setItem('profile', JSON.stringify(currentProfile));
         }
 
@@ -267,6 +271,14 @@ const UserProfileForm: React.FC = () => {
                   </svg>
                   {watchedValues.phone || 'Contact Number'}
                 </li>
+                <li>
+                  <button
+                    onClick={() => setShowmodal(!showlModal)}
+                    className="cursor-pointer p-2  text-blue-500 hover:text-blue-600 hover:font-semibold duration-200"
+                  >
+                    Update Password
+                  </button>
+                </li>
               </ul>
             </aside>
 
@@ -350,10 +362,11 @@ const UserProfileForm: React.FC = () => {
                 </div>
                 <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                   <button
+                    onClick={() => route.back()}
                     type="button"
                     className="w-full sm:w-1/2 bg-white text-gray-700 border border-gray-300 px-16 py-2 rounded hover:bg-gray-100 transition duration-300"
                   >
-                    <a href="/profile">Cancel</a>
+                    <a>Cancel</a>
                   </button>
                   <button
                     type="submit"
@@ -371,6 +384,7 @@ const UserProfileForm: React.FC = () => {
           </div>
         </div>
       </main>
+      <UpdatePasswords handleshow={handleshow} showlModal={showlModal} />
     </div>
   );
 };

src/components/Table.tsx

@@ -133,7 +133,7 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
                   </td>
                   <td className="px-6 py-4">{product.productDiscount}</td>
                   <td className="py-4">
-                    <Link href={`/dashboard/products_/${product.id}`}>
+                    <Link href={`/dashboard/product/${product.id}`}>
                       <button className="w-[90px] py-2 bg-blue-500 hover:bg-blue-600 text-white">
                         View
                       </button>
@@ -150,7 +150,7 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
                         </button>
                       </td>
                       <td className="py-2">
-                        <Link href={`/dashboard/product_/${product.id}`}>
+                        <Link href={`/dashboard/product/${product.id}/edit`}>
                           <button className="w-[90px] py-2 bg-gray-500 hover:bg-gray-600 text-white">
                             Update
                           </button>

src/components/headerDash.tsx

@@ -46,7 +46,7 @@ const HeaderDash: React.FC<HeaderInterface> = ({ pageName }) => {
         </div>
         <div className={` flex gap-2 w-auto justify-center items-center`}>
           <div
-            className="bg-blue-600 rounded-full h-10 w-10 flex justify-center items-center hover:bg-green-600"
+            className="bg-blue-600 rounded-full h-7 w-7 flex justify-center items-center hover:bg-green-600"
             onClick={handleShowNotification}
           >
             <NotificationIcon toggleNotification={handleShowNotification} />