feat: ( iam ) add forgot and change password to passenger backoffice

apps/edr-passenger-web/backoffice/src/components/layout/Header.tsx

@@ -1,16 +1,18 @@
 'use client';
 
-import { Bell, LogOut, Moon, Sun, ChevronDown, HelpCircle } from 'lucide-react';
+import { Bell, LogOut, Moon, Sun, ChevronDown, HelpCircle, KeyRound } from 'lucide-react';
 import { useAuthStore } from '@/lib/auth-store';
 import { useTheme } from '@/lib/theme-store';
 import { useState } from 'react';
 import Link from 'next/link';
+import ChangePasswordModal from '@/components/layout/ChangePasswordModal';
 
 export default function Header() {
   const { user, logout } = useAuthStore();
   const { isDark, toggleTheme } = useTheme();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [showNotifications, setShowNotifications] = useState(false);
+  const [showChangePassword, setShowChangePassword] = useState(false);
 
   return (
     <header className="flex h-16 items-center justify-between border-b border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-6 shadow-sm">
@@ -108,6 +110,16 @@ export default function Header() {
                 >
                   Settings
                 </Link>
+                <button
+                  onClick={() => {
+                    setShowUserMenu(false);
+                    setShowChangePassword(true);
+                  }}
+                  className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors"
+                >
+                  <KeyRound className="h-4 w-4" />
+                  Change Password
+                </button>
                 <button
                   onClick={() => {
                     logout();
@@ -123,6 +135,11 @@ export default function Header() {
           )}
         </div>
       </div>
+
+      <ChangePasswordModal
+        isOpen={showChangePassword}
+        onClose={() => setShowChangePassword(false)}
+      />
     </header>
   );
 }