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/tests/app/(authenticated)/settings/sessions/page.test.tsx

@@ -1,26 +1,56 @@
 /**
  * Tests for Sessions Page
- * Smoke tests for placeholder page
+ * Smoke tests for page rendering
  */
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import SessionsPage from '@/app/(authenticated)/settings/sessions/page';
 
+// Mock the API client
+jest.mock('@/lib/api/client', () => ({
+  ...jest.requireActual('@/lib/api/client'),
+  listMySessions: jest.fn(() =>
+    Promise.resolve({
+      data: {
+        sessions: [],
+        total: 0,
+      },
+    })
+  ),
+}));
+
 describe('SessionsPage', () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  const renderWithProvider = (component: React.ReactElement) => {
+    return render(
+      <QueryClientProvider client={queryClient}>
+        {component}
+      </QueryClientProvider>
+    );
+  };
+
   it('renders without crashing', () => {
-    render(<SessionsPage />);
-    expect(screen.getByText('Active Sessions')).toBeInTheDocument();
+    renderWithProvider(<SessionsPage />);
+    // Check for the main heading
+    expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
   });
 
   it('renders heading', () => {
-    render(<SessionsPage />);
-
+    renderWithProvider(<SessionsPage />);
+    // The heading text
     expect(screen.getByRole('heading', { name: /active sessions/i })).toBeInTheDocument();
   });
 
-  it('shows placeholder text', () => {
-    render(<SessionsPage />);
-
-    expect(screen.getByText(/manage your active sessions/i)).toBeInTheDocument();
+  it('shows description text', () => {
+    renderWithProvider(<SessionsPage />);
+    // Description under the heading
+    expect(screen.getByText(/view and manage devices/i)).toBeInTheDocument();
   });
 });