changes in phase 2

ipi-survey-platform/src/components/admin/AdminHeader.jsx

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { logout as logoutApi } from '@/services/auth/authService';
+import { TbReport } from "react-icons/tb";
 
 const logoSrc = '/assets/images/FCSCLogo.svg';
 const dashboardIconActiveSrc = '/assets/images/cuida_dashboard-outline.svg';
@@ -8,12 +9,17 @@ const dashboardIconInactiveSrc = '/assets/images/cuida_dashboard-outline-inactiv
 const checkCircleActiveSrc = '/assets/images/CheckCircle-active.svg';
 const configActiveSrc = '/assets/images/configrationicon-active.svg';
 const configInactiveSrc = '/assets/images/configrationicon-inactive.svg';
+const manufacturingIndexActive = <TbReport className="text-[#92722A]" />;
+const manufacturingIndexInactive = <TbReport className="text-[#232528]" />;
 const userActiveSrc = '/assets/images/User-active.svg';
 const userInactiveSrc = '/assets/images/User-inactive.svg';
 const manageSubmissionInactiveSrc = '/assets/images/managesubmission - inactive.svg';
 const bellIconSrc = '/assets/images/Bell.svg';
 
-const NavItem = ({ label, to, iconActive, iconInactive, end = false }) => (
+const NavItem = ({ label, to, iconActive, iconInactive, end = false }) => {
+  const isReactElement = React.isValidElement(iconActive) || React.isValidElement(iconInactive);
+  
+  return (
     <NavLink
       to={to}
       end={end}
@@ -24,11 +30,20 @@ const NavItem = ({ label, to, iconActive, iconInactive, end = false }) => (
           : 'text-[#232528] border-transparent hover:text-gray-900')
       }
     >
-    {({ isActive }) => (
+      {({ isActive }) => {
+        const icon = isActive ? iconActive : iconInactive;
+        
+        return (
           <>
-        {iconActive && iconInactive ? (
+            {isReactElement ? (
+              <span className={`h-[18px] w-[18px] flex items-center justify-center ${
+                isActive ? 'text-[#92722A]' : 'text-[#6B7280]'
+              }`}>
+                {React.cloneElement(icon, { style: { fontSize: 18 } })}
+              </span>
+            ) : icon ? (
               <img
-            src={isActive ? iconActive : iconInactive}
+                src={icon}
                 alt={label}
                 className="h-[18px] w-[18px]"
               />
@@ -41,9 +56,11 @@ const NavItem = ({ label, to, iconActive, iconInactive, end = false }) => (
             )}
             <span>{label}</span>
           </>
-    )}
+        );
+      }}
     </NavLink>
-);
+  );
+};
 
 const AdminHeader = () => {
   const [open, setOpen] = React.useState(false);
@@ -149,8 +166,8 @@ const AdminHeader = () => {
             <NavItem
               to="/manufacturing-index"
               label="Manufacturing Index"
-              iconActive={configActiveSrc}
+              iconActive={manufacturingIndexActive}
-              iconInactive={configInactiveSrc}
+              iconInactive={manufacturingIndexInactive}
             />
           </nav>
 

ipi-survey-platform/src/pages/ManufacturingIndex/ManufacturingIndex.jsx

@@ -14,7 +14,8 @@ import {
   InfoOutlined as InfoOutlinedIcon,
   NavigateNext as NavigateNextIcon
 } from '@mui/icons-material';
-import { Breadcrumbs, Link } from '@mui/material';
+import { Breadcrumbs } from '@mui/material';
+import { Link } from 'react-router-dom';
 import Card from '@/components/common/Card';
 import { getManufacturingIndex, getManufacturingMonthlyOverview } from '@/services/manufacturingIndex/ManufacturingIndex';
 
@@ -453,7 +454,7 @@ const ManufacturingIndex = () => {
           <nav className="mb-6 text-sm text-[#8F9299] flex items-center gap-2">
             <Link
               to="/admin/dashboard"
-              className="font-bold flex items-center gap-1 !text-black no-underline hover:underline hover:!text-black"
+              className="font-bold flex items-center gap-1 !text-black no-underline hover:underline hover:!text-black cursor-pointer"
             >
               Dashboard
               <img src="/assets/images/Breadcrumb-vector.svg" alt="" className="ml-1 w-3 h-3" />