Add forms for profile and password settings; improve tests for settings pages

- Implement `ProfileSettingsForm` and `PasswordChangeForm` components to manage user profile and password updates.
- Add `SessionCard` for session management and related API hooks (`useSession`).
- Update settings page tests to include user state mock and React Query provider for better test reliability.
- Enhance `PasswordSettingsPage` and `ProfileSettingsPage` tests to verify component rendering and user interaction.
- Improve API hook structure with dedicated hooks for session and user profile management.

frontend/src/app/(authenticated)/settings/password/page.tsx

@@ -1,25 +1,25 @@
 /**
  * Password Settings Page
- * Change password functionality
+ * Secure password change functionality for authenticated users
  */
 
-/* istanbul ignore next - Next.js type import for metadata */
-import type { Metadata } from 'next';
+'use client';
 
-/* istanbul ignore next - Next.js metadata, not executable code */
-export const metadata: Metadata = {
-  title: 'Password Settings',
-};
+import { PasswordChangeForm } from '@/components/settings';
 
 export default function PasswordSettingsPage() {
   return (
-    <div>
-      <h2 className="text-2xl font-semibold text-foreground mb-4">
-        Password Settings
-      </h2>
-      <p className="text-muted-foreground">
-        Change your password (Coming in Task 3.3)
-      </p>
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold text-foreground">
+          Password Settings
+        </h2>
+        <p className="text-muted-foreground mt-1">
+          Change your password to keep your account secure
+        </p>
+      </div>
+
+      <PasswordChangeForm />
     </div>
   );
 }

frontend/src/app/(authenticated)/settings/profile/page.tsx

@@ -1,25 +1,25 @@
 /**
  * Profile Settings Page
- * User profile management - edit name, email, phone, preferences
+ * User profile management - edit name, email, and other profile information
  */
 
-/* istanbul ignore next - Next.js type import for metadata */
-import type { Metadata } from 'next';
+'use client';
 
-/* istanbul ignore next - Next.js metadata, not executable code */
-export const metadata: Metadata = {
-  title: 'Profile Settings',
-};
+import { ProfileSettingsForm } from '@/components/settings';
 
 export default function ProfileSettingsPage() {
   return (
-    <div>
-      <h2 className="text-2xl font-semibold text-foreground mb-4">
-        Profile Settings
-      </h2>
-      <p className="text-muted-foreground">
-        Manage your profile information (Coming in Task 3.2)
-      </p>
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold text-foreground">
+          Profile Settings
+        </h2>
+        <p className="text-muted-foreground mt-1">
+          Manage your profile information
+        </p>
+      </div>
+
+      <ProfileSettingsForm />
     </div>
   );
 }

frontend/src/app/(authenticated)/settings/sessions/page.tsx

@@ -1,25 +1,25 @@
 /**
  * Session Management Page
- * View and manage active sessions across devices
+ * View and manage active sessions across all devices
  */
 
-/* istanbul ignore next - Next.js type import for metadata */
-import type { Metadata } from 'next';
+'use client';
 
-/* istanbul ignore next - Next.js metadata, not executable code */
-export const metadata: Metadata = {
-  title: 'Active Sessions',
-};
+import { SessionsManager } from '@/components/settings';
 
 export default function SessionsPage() {
   return (
-    <div>
-      <h2 className="text-2xl font-semibold text-foreground mb-4">
-        Active Sessions
-      </h2>
-      <p className="text-muted-foreground">
-        Manage your active sessions (Coming in Task 3.4)
-      </p>
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold text-foreground">
+          Active Sessions
+        </h2>
+        <p className="text-muted-foreground mt-1">
+          View and manage devices signed in to your account
+        </p>
+      </div>
+
+      <SessionsManager />
     </div>
   );
 }