MOSIP-32652: Resolved the errors.

pmp-reactjs-ui/src/auth/AppRoutes.js

@@ -1,9 +1,9 @@
-import { createHashRouter, RouterProvider, Navigate, redirect } from 'react-router-dom';
+import { createHashRouter, RouterProvider, redirect } from 'react-router-dom';
 import GuardedRoute from './GuardedRoute.js';
 
 import MainLayout from '../pages/MainLayout.js';
+import PartnerCertificatesList from '../pages/PartnerCertificatesList.js'; 
 import Dashboard from '../pages/Dashboard.js';
-import PartnerCertificate from '../pages/PartnerCertificate.js';
 
 function AppRoutes() {
   const router = createHashRouter([
@@ -21,7 +21,7 @@ function AppRoutes() {
         },
         {
           path: 'partnerCertificate',
-          element: <GuardedRoute><MainLayout><PartnerCertificate/></MainLayout></GuardedRoute>,
+          element: <GuardedRoute><MainLayout><PartnerCertificatesList/></MainLayout></GuardedRoute>,
         }
       ],
     },

pmp-reactjs-ui/src/pages/Dashboard.js

@@ -4,7 +4,7 @@ function Dashboard() {
 
   const navigate = useNavigate();
 
-  const partnerCertificate = () => {
+  const partnerCertificatesList = () => {
     navigate('/partnermanagement/partnerCertificate')
   };
 
@@ -67,7 +67,7 @@ function Dashboard() {
             </p>
           </div>
         </div>
-        <div onClick={() => partnerCertificate()} className="w-[18.5rem] h-60 p-6 mr-3 mb-4 pt-16 bg-white border border-gray-200 shadow cursor-pointer  text-center rounded-xl">
+        <div onClick={() => partnerCertificatesList()} className="w-[18.5rem] h-60 p-6 mr-3 mb-4 pt-16 bg-white border border-gray-200 shadow cursor-pointer  text-center rounded-xl">
           <div className="flex justify-center mb-5">
             <svg
               xmlns="http://www.w3.org/2000/svg"

pmp-reactjs-ui/src/pages/PartnerCertificate.js → pmp-reactjs-ui/src/pages/PartnerCertificatesList.js

@@ -1,26 +1,31 @@
 import { useNavigate } from "react-router-dom";
-import { useState } from 'react';
-import UploadCertificate from "./UploadCertificate";
 
-function PartnerCertificate() {
+function PartnerCertificatesList() {
     const navigate = useNavigate();
-    const [showPopup, setShowPopup] = useState(false);
-
-    const uploadCertificate = () => {
-        setShowPopup(!showPopup);
-    };
+
     const moveToHome = () => {
         navigate('/partnermanagement')
     };
-    const closePopup = () => {
-        console.log("Popup closed");
-        setShowPopup(false);
-    };
+
     return (
         <div className=" flex-col w-screen p-5 bg-anti-flash-white h-full font-inter">
-            <div className="flex-col ml-4">
-                <h1 className="font-bold text-md text-blue-900">Partner Certificate</h1>
-                <p onClick={() => moveToHome()} className="font-semibold text-blue-500 text-xs cursor-pointer">Home</p>
+            <div className="flex-col ml-1">
+                <div className="flex space-x-4">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="22.765" height="14.416" viewBox="0 0 22.765 17.416" className="mt-5">
+                        <path
+                            id="keyboard_backspace_FILL0_wght200_GRAD0_opsz24"
+                            d="M168-676.306l-8-8,8-8,1.067,1.067-6.18,6.18h18.671v1.507H162.887l6.18,6.18Z"
+                            transform="translate(-159.293 693.015)" stroke="#000" stroke-width="1.5" />
+                    </svg>
+
+                    <div className="flex-col mt-4">
+                        <h1 className="font-bold text-md text-blue-900">Partner Certificate</h1>
+                        <p onClick={() => moveToHome()} className="font-semibold text-blue-500 text-xs cursor-pointer">Home</p>
+                    </div>
+                </div>
+
                 <ul className="min-w-3.5 bg-white mt-3 rounded-lg shadow-md p-5 mr-8 pb-20">
                     <li className="rounded-lg shadow-lg border">
                         <div className="flex p-5 items-center bg-slate-100 justify-between">
@@ -39,10 +44,7 @@ function PartnerCertificate() {
                                     <p className="font-medium text-xs text-gray-400">Only .cer or .pem certificate formats are allowed for upload</p>
                                 </div>
                             </div>
-                            <button className="bg-tory-blue h-9 w-28 text-white text-sm font-medium rounded-md" onClick={uploadCertificate}>Upload</button>
-                            {showPopup && (
-                                <UploadCertificate closePopup={closePopup}/>
-                            )}
+                            <button className="bg-tory-blue h-9 w-28 text-white text-sm font-medium rounded-md">Upload</button>
                         </div>
                         <div className="flex items-center p-5 bg-white">
                             <div className="flex-col">
@@ -96,7 +98,7 @@ function PartnerCertificate() {
                     </li>
                 </ul>
             </div>
-            <hr className="w-[81.5rem] h-px ml-7 mt-9 bg-gray-200 border-0 "/>
+            <hr className="w-[81.5rem] h-px ml-7 mt-9 bg-gray-200 border-0 " />
             <div className="flex mt-7 ml-7 justify-between text-sm text-gray-400">
                 <div>
                     <p>2024 © MOSIP - All rights reserved.</p>
@@ -111,4 +113,4 @@ function PartnerCertificate() {
     );
 }
 
-export default PartnerCertificate;
+export default PartnerCertificatesList;

pmp-reactjs-ui/src/pages/SideNav.js

@@ -1,80 +1,39 @@
 import { useState } from 'react';
-import mosip_icon from '../pages/mosip_icon.svg';
-import { Home } from '../sideNaveOptions/Home';
-import { ManagePartnerCertificate } from '../sideNaveOptions/ManagePartnerCertificate';
-import { ManageDeviceDetails } from '../sideNaveOptions/ManageDeviceDetails';
-import { ManageSBIInformation } from '../sideNaveOptions/ManageSBIInformation';
-import { ManagePartnerProfile } from '../sideNaveOptions/ManagePartnerProfile';
+import mosip_icon from '../../src/mosip_icon.svg';
+import side_menu_title from '../../src/side_menu_title.svg';
+import { MenuItemHome } from '../sideNaveOptions/MenuItemHome';
+import { MenuItemPartnerCertificate } from '../sideNaveOptions/MenuItemPartnerCertificate';
+import { MenuItemDeviceDetails } from '../sideNaveOptions/MenuItemDeviceDetails';
+import { MenuItemSBIInformation } from '../sideNaveOptions/MenuItemSBIInformation';
+import { MenuItemPartnerProfile } from '../sideNaveOptions/MenuItemPartnerProfile';
 
 function SideNav() {
     const [open, setOpen] = useState(false);
-    const [activeIcon, setActiveIcon] = useState(false);
-
-    const Options = [
-        {
-            id: 0,
-            component: 'Home',
-            status: true,
-        },
-        {
-            id: 1,
-            component: 'ManagePartnerCertificate',
-            status: false,
-        },
-        {
-            id: 2,
-            component: 'ManageDeviceDetails',
-            status: false,
-        },
-        {
-            id: 3,
-            component: 'ManageSBIInformation',
-            status: false,
-        },
-        {
-            id: 4,
-            component: 'ManagePartnerProfile',
-            status: false,
-        }
-    ]
-
-    const activeTheIcon = (id) => {
-        for (let i = 0; i > Options.length; i++) {
-            if (i === id) {
-                Options[id].status = true;
-            }
-            else {
-                Options[id].status = false;
-            }
-        }
-    };
-
 
     return (
         <div className="flex font-inter">
             <div className={`${open ? "w-72" : "w-20"} h-screen duration-500`}>
                 <div className={`flex h-16 gap-x-4 items-center pl-8 ${open ? 'shadow-md' : 'shadow-sm'}`}>
                     <img src={mosip_icon}/>
                     <div className={`${!open && 'scale-0'} items-center duration-300`}>
-                        <h1 className="text-black origin-left font-bold">MOSIP</h1>
-                        <p className="text-black origin-left font-semibold text-xs text-nowrap">Partner Management Portal</p>
+                        <img src={side_menu_title}/>
                     </div>
                 </div>
                 <ul className="mt-5 items-center">
-                    <li onClick={() => setActiveIcon(!activeIcon)} className="flex items-center gap-x-4 duration-700 cursor-pointer">
-                        <Home selectIcon={activeIcon} />
+                    <li className="flex items-center gap-x-4 duration-700 cursor-pointer">
+                        <MenuItemHome />
                     </li>
-                    <li onClick={() => setActiveIcon(!activeIcon)} className="flex items-center gap-x-4 duration-700 cursor-pointer">
-                        <ManagePartnerCertificate selectIcon={activeIcon} />
+                    <li className="flex items-center gap-x-4 duration-700 cursor-pointer">
+                        <MenuItemPartnerCertificate />
                     </li>
-                    <li onClick={() => setActiveIcon(!activeIcon)} className="flex items-center gap-x-4 duration-700 cursor-pointer">
-                        <ManageDeviceDetails selectIcon={activeIcon} />
+                    <li className="flex items-center gap-x-4 duration-700 cursor-pointer">
+                        <MenuItemDeviceDetails />
                     </li>
-                    <li onClick={() => setActiveIcon(!activeIcon)} className="flex items-center gap-x-4 duration-700 cursor-pointer">
-                        <ManageSBIInformation selectIcon={activeIcon} />
+                    <li className="flex items-center gap-x-4 duration-700 cursor-pointer">
+                        <MenuItemSBIInformation />
                     </li>
-                    <li onClick={() => setActiveIcon(!activeIcon)} className="flex items-center gap-x-4 duration-700 cursor-pointer">
-                        <ManagePartnerProfile selectIcon={activeIcon} />
+                    <li className="flex items-center gap-x-4 duration-700 cursor-pointer">
+                        <MenuItemPartnerProfile />
                     </li>
                 </ul>
             </div>

pmp-reactjs-ui/src/sideNaveOptions/ManageDeviceDetails.js → pmp-reactjs-ui/src/sideNaveOptions/MenuItemDeviceDetails.js

@@ -1,10 +1,16 @@
 import React, { useState } from 'react'
 
-export const ManageDeviceDetails = (props) => {
+export const MenuItemDeviceDetails = (props) => {
 
+  const [activeIcon, setActiveIcon] = useState(false);
+
+  const DeviceDetails = () => {
+    setActiveIcon(!activeIcon);
+};
+
   return (
-    <div className="flex gap-x-5 items-center mt-4">
-      <div className={`h-5 w-1 ${props.selectIcon ? 'bg-tory-blue' : null} rounded-e-xl`}></div>
+    <div className="flex gap-x-5 items-center mt-4 pl-1" onClick={DeviceDetails}>
+      <div className={`h-6 w-1 ${activeIcon ? 'bg-tory-blue' : null} rounded-e-lg`}></div>
       <div className="h-10 p-3 rounded-md shadow-md">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -14,12 +20,12 @@ export const ManageDeviceDetails = (props) => {
           <path id="dvr_FILL0_wght200_GRAD0_opsz24"
             d="M124.849-788.343a.718.718,0,0,0,.526-.22.718.718,0,0,0,.22-.526.718.718,0,0,0-.22-.526.718.718,0,0,0-.526-.22.718.718,0,0,0-.526.22.718.718,0,0,0-.22.526.718.718,0,0,0,.22.526A.718.718,0,0,0,124.849-788.343Zm0-4.849a.718.718,0,0,0,.526-.22.718.718,0,0,0,.22-.526.718.718,0,0,0-.22-.526.718.718,0,0,0-.526-.22.718.718,0,0,0-.526.22.718.718,0,0,0-.22.526.718.718,0,0,0,.22.526A.718.718,0,0,0,124.849-793.192Zm2.565,4.709h10.165V-789.7H127.414Zm0-4.849h10.165v-1.212H127.414Zm-.14,12.729v-2.425h-5.316a1.9,1.9,0,0,1-1.4-.561,1.9,1.9,0,0,1-.561-1.4v-13.056a1.9,1.9,0,0,1,.561-1.4,1.9,1.9,0,0,1,1.4-.561h17.905a1.9,1.9,0,0,1,1.4.561,1.9,1.9,0,0,1,.561,1.4v13.056a1.9,1.9,0,0,1-.561,1.4,1.9,1.9,0,0,1-1.4.561h-5.316v2.425Zm-5.316-3.637h17.905a.713.713,0,0,0,.513-.233.713.713,0,0,0,.233-.513v-13.056a.713.713,0,0,0-.233-.513.713.713,0,0,0-.513-.233H121.958a.713.713,0,0,0-.513.233.713.713,0,0,0-.233.513v13.056a.713.713,0,0,0,.233.513A.713.713,0,0,0,121.958-784.24Zm-.746,0v0Z"
             transform="translate(-119.75 800.25)"
-            fill={props.selectIcon ? "#1447b2" : "#7a7e82"} stroke={props.selectIcon ? "#1447b2" : "#7a7e82"} stroke-width="0.5" />
+            fill={activeIcon ? "#1447b2" : "#7a7e82"} stroke={activeIcon ? "#1447b2" : "#7a7e82"} stroke-width="0.5" />
         </svg>
 
       </div>
       <p className={`duration-200 text-nowrap font-semibold text-xs`}>
-        Manage Device Details
+        Device Details
       </p>
     </div>
   )

pmp-reactjs-ui/src/sideNaveOptions/Home.js → pmp-reactjs-ui/src/sideNaveOptions/MenuItemHome.js

@@ -1,10 +1,18 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
-export const Home = (props) => {
+export const MenuItemHome = (props) => {
+
+    const [activeIcon, setActiveIcon] = useState(false);
+    const navigate = useNavigate();
+    const Home = () => {
+        navigate('/partnermanagement')
+        setActiveIcon(!activeIcon);
+    };
 
     return (
-        <div className="flex gap-x-5 items-center mt-4 font-inter">
-            <div className={`h-5 w-1 ${props.selectIcon ? 'bg-tory-blue' : null} rounded-e-xl`}></div>
+        <div className="flex gap-x-5 items-center mt-4 font-inter pl-1" onClick={Home}>
+            <div className={`h-6 w-1 ${activeIcon ? 'bg-tory-blue' : null} rounded-e-md`}></div>
             <div className="h-10 p-3 rounded-md shadow-md">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -13,7 +21,7 @@ export const Home = (props) => {
                     <path id="home_FILL0_wght300_GRAD0_opsz24"
                         d="M181.8-797.818h4.015v-6.929h6.369v6.929H196.2v-10.494l-7.2-5.269-7.2,5.269Zm-1.8,1.749v-13.118l9-6.581,9,6.581v13.118h-7.615V-803h-2.769v6.929ZM189-805.7Z"
                         transform="translate(-180.001 815.767)"
-                        fill={props.selectIcon ? "#1447b2" : "#7a7e82"}
+                        fill={activeIcon ? "#1447b2" : "#7a7e82"}
                     />
                 </svg>
             </div>

pmp-reactjs-ui/src/sideNaveOptions/ManagePartnerCertificate.js → pmp-reactjs-ui/src/sideNaveOptions/MenuItemPartnerCertificate.js

@@ -1,22 +1,28 @@
 import { useState } from "react";
 
-export const ManagePartnerCertificate = (props) => {
+export const MenuItemPartnerCertificate = (props) => {
+
+    const [activeIcon, setActiveIcon] = useState(false);
+
+    const PartnerCertificate = () => {
+        setActiveIcon(!activeIcon);
+    };
 
     return (
-        <div className="flex gap-x-5 items-center mt-4">
-            <div className={`h-5 w-1 ${props.selectIcon ? 'bg-tory-blue' : null} rounded-e-xl`}></div>
+        <div className="flex gap-x-5 items-center mt-4 pl-1" onClick={PartnerCertificate}>
+            <div className={`h-6 w-1 ${activeIcon ? 'bg-tory-blue' : null} rounded-e-lg`}></div>
             <div className="h-10 p-3 rounded-md shadow-md">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="15.587" height="19.897" viewBox="0 0 15.587 19.897">
                     <path id="upload_file_FILL0_wght200_GRAD0_opsz24"
                         d="M207-824.084h1.078v-5.059l2.263,2.263.763-.769-3.564-3.564-3.564,3.564.769.763L207-829.143Zm-5.264,3.482a1.686,1.686,0,0,1-1.242-.5,1.686,1.686,0,0,1-.5-1.242v-15.916a1.686,1.686,0,0,1,.5-1.242,1.686,1.686,0,0,1,1.242-.5h8.5l4.849,4.849v12.807a1.686,1.686,0,0,1-.5,1.242,1.686,1.686,0,0,1-1.242.5Zm7.958-14.009v-4.31h-7.958a.634.634,0,0,0-.456.207.634.634,0,0,0-.207.456v15.916a.634.634,0,0,0,.207.456.634.634,0,0,0,.456.207h11.605a.634.634,0,0,0,.456-.207.634.634,0,0,0,.207-.456v-12.268Zm-8.621-4.31v0Z"
                         transform="translate(-199.75 840.25)"
-                        fill={props.selectIcon ? "#1447b2" : "#7a7e82"} stroke={props.selectIcon ? "#1447b2" : "#7a7e82"} stroke-width="0.5" />
+                        fill={activeIcon ? "#1447b2" : "#7a7e82"} stroke={activeIcon ? "#1447b2" : "#7a7e82"} stroke-width="0.5" />
                 </svg>
             </div>
             <p className={`duration-200 text-nowrap font-semibold text-xs`}>
-                Manage Partner Certificate
+                Partner Certificate
             </p>
         </div>
     )

pmp-reactjs-ui/src/sideNaveOptions/ManagePartnerProfile.js → pmp-reactjs-ui/src/sideNaveOptions/MenuItemPartnerProfile.js

@@ -1,23 +1,29 @@
 import { useState } from "react";
 
-export const ManagePartnerProfile = (props) => {
+export const MenuItemPartnerProfile = (props) => {
+
+    const [activeIcon, setActiveIcon] = useState(false);
+
+    const PartnerProfile = () => {
+        setActiveIcon(!activeIcon);
+    };
 
     return (
-        <div className="flex gap-x-5 items-center mt-4">
-            <div className={`h-5 w-1 ${props.selectIcon ? 'bg-tory-blue' : null} rounded-e-xl`}></div>
+        <div className="flex gap-x-5 items-center mt-4 pl-1" onClick={PartnerProfile}>
+            <div className={`h-6 w-1 ${activeIcon ? 'bg-tory-blue' : null} rounded-e-lg`}></div>
             <div className="h-10 p-3 rounded-md shadow-md">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="19.897" height="19.897" viewBox="0 0 19.897 19.897">
                     <path id="library_books_FILL0_wght200_GRAD0_opsz24"
                         d="M147.417-833.75h6.359V-836.8h-6.359Zm0,6.128h7.943v-1.141h-7.943Zm0-2.945h7.943v-1.141h-7.943Zm-2.15,6.542a1.785,1.785,0,0,1-1.315-.528,1.785,1.785,0,0,1-.528-1.315v-12.288a1.785,1.785,0,0,1,.528-1.315,1.785,1.785,0,0,1,1.315-.528h12.288a1.785,1.785,0,0,1,1.315.528,1.785,1.785,0,0,1,.528,1.315v12.288a1.785,1.785,0,0,1-.528,1.315,1.785,1.785,0,0,1-1.315.528Zm0-1.141h12.288a.671.671,0,0,0,.483-.219.671.671,0,0,0,.219-.483v-12.288a.671.671,0,0,0-.219-.483.671.671,0,0,0-.483-.219H145.266a.671.671,0,0,0-.483.219.671.671,0,0,0-.219.483v12.288a.671.671,0,0,0,.219.483A.671.671,0,0,0,145.266-825.167Zm-3.423,4.564a1.785,1.785,0,0,1-1.315-.528,1.785,1.785,0,0,1-.528-1.315v-13.429h1.141v13.429a.671.671,0,0,0,.219.483.671.671,0,0,0,.483.219h13.429v1.141Zm2.721-18.256v0Z"
                         transform="translate(-139.75 840.25)"
-                        fill={props.selectIcon ? "#1447b2" : "#7a7e82"} stroke={props.selectIcon ? "#1447b2" : "#7a7e82"} stroke-width="0.5" />
+                        fill={activeIcon ? "#1447b2" : "#7a7e82"} stroke={activeIcon ? "#1447b2" : "#7a7e82"} stroke-width="0.5" />
                 </svg>
 
             </div>
             <p className={`duration-200 text-nowrap font-semibold text-xs`}>
-                Manage Partner Profile
+                Partner Profile
             </p>
         </div>
     )