app/layouts/admin/navbar.tsx

@@ -2,7 +2,7 @@ import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
-import { ProfileIcon } from '~/components/icons/profile'
+import { NotificationIcon } from '~/components/icons/notification'
 import { APP } from '~/configs/meta'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -27,16 +27,11 @@ export const Navbar = () => {
         <Popover className="relative">
           <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
             <div className="flex items-center">
-              {staffData?.profile_picture === '' ? (
-                <ProfileIcon className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
-              ) : (
               <img
                 src={staffData?.profile_picture}
                 alt={staffData?.name}
                 className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
               />
-              )}
-
               <span className="text-xs">{staffData?.name}</span>
             </div>
             <ChevronIcon className="opacity-50" />
@@ -60,6 +55,10 @@ export const Navbar = () => {
             </fetcher.Form>
           </PopoverPanel>
         </Popover>
+        <NotificationIcon
+          className="text-[#B0C3CC]"
+          showBadge={true}
+        />
       </div>
     </div>
   )

package.json

@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "^4.1.1",
     "@react-router/fs-routes": "^7.1.3",
     "@react-router/node": "^7.1.3",

pnpm-lock.yaml

@@ -11,9 +11,6 @@ importers:
       '@headlessui/react':
         specifier: ^2.2.0
         version: 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@heroicons/react':
-        specifier: ^2.2.0
-        version: 2.2.0(react@19.0.0)
       '@hookform/resolvers':
         specifier: ^4.1.1
         version: 4.1.1(react-hook-form@7.54.2(react@19.0.0))
@@ -621,11 +618,6 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  '@heroicons/react@2.2.0':
-    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
-    peerDependencies:
-      react: '>= 16 || ^19.0.0-rc'
-
   '@hookform/resolvers@4.1.1':
     resolution: {integrity: sha512-S9YN1RgNWG+klUz5uQaV6rjE4pr6Py2tamj7ekshzLcMyg+/Pal1KZAYgGszV0+doiy41dUiQgXL3uRS9stndQ==}
     peerDependencies:
@@ -5050,10 +5042,6 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
-  '@heroicons/react@2.2.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
   '@hookform/resolvers@4.1.1(react-hook-form@7.54.2(react@19.0.0))':
     dependencies:
       caniuse-lite: 1.0.30001700