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,42 +9,58 @@ 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 }) => (
-  <NavLink
-    to={to}
-    end={end}
-    className={({ isActive }) =>
-      `inline-flex items-center gap-2 pb-1 border-b-2 text-[14px] leading-5 ` +
-      (isActive
-        ? 'text-[#92722A] font-medium border-[#92722A]'
-        : 'text-[#232528] border-transparent hover:text-gray-900')
-    }
-  >
-    {({ isActive }) => (
-      <>
-        {iconActive && iconInactive ? (
-          <img
-            src={isActive ? iconActive : iconInactive}
-            alt={label}
-            className="h-[18px] w-[18px]"
-          />
-        ) : (
-          <span
-            className={`inline-block h-[18px] w-[18px] rounded ${
-              isActive ? 'bg-[#92722A]' : 'bg-[#C9CDD1]'
-            }`}
-          />
-        )}
-        <span>{label}</span>
-      </>
-    )}
-  </NavLink>
-);
+const NavItem = ({ label, to, iconActive, iconInactive, end = false }) => {
+  const isReactElement = React.isValidElement(iconActive) || React.isValidElement(iconInactive);
+  
+  return (
+    <NavLink
+      to={to}
+      end={end}
+      className={({ isActive }) =>
+        `inline-flex items-center gap-2 pb-1 border-b-2 text-[14px] leading-5 ` +
+        (isActive
+          ? 'text-[#92722A] font-medium border-[#92722A]'
+          : 'text-[#232528] border-transparent hover:text-gray-900')
+      }
+    >
+      {({ isActive }) => {
+        const icon = isActive ? iconActive : iconInactive;
+        
+        return (
+          <>
+            {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={icon}
+                alt={label}
+                className="h-[18px] w-[18px]"
+              />
+            ) : (
+              <span
+                className={`inline-block h-[18px] w-[18px] rounded ${
+                  isActive ? 'bg-[#92722A]' : 'bg-[#C9CDD1]'
+                }`}
+              />
+            )}
+            <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}
-              iconInactive={configInactiveSrc}
+              iconActive={manufacturingIndexActive}
+              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" />