Merge commit '90d13fe3422986427b6727428e7401e8880c25a0'

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 { NotificationIcon } from '~/components/icons/notification'
+import { ProfileIcon } from '~/components/icons/profile'
 import { APP } from '~/configs/meta'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -27,11 +27,16 @@ 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">
-              <img
-                src={staffData?.profile_picture}
-                alt={staffData?.name}
-                className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
-              />
+              {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" />
@@ -55,10 +60,6 @@ export const Navbar = () => {
             </fetcher.Form>
           </PopoverPanel>
         </Popover>
-        <NotificationIcon
-          className="text-[#B0C3CC]"
-          showBadge={true}
-        />
       </div>
     </div>
   )

package.json

@@ -15,6 +15,7 @@
   },
   "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,6 +11,9 @@ 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))
@@ -618,6 +621,11 @@ 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:
@@ -5042,6 +5050,10 @@ 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