feat(ai): add ADR-036 unified OCR architecture and frontend test coverage

- Add ADR-036 unified OCR architecture (typhoon-ocr via Ollama)
- Extend AI execution profiles for OCR sandbox configuration
- Add comprehensive frontend test coverage (components, hooks, services)
- Add backend test coverage for document-numbering services
- Update OCR sidecar with typhoon-ocr integration
- Add AI policy service and execution profile management
- Update AGENTS.md and architecture documentation

frontend/components/layout/__tests__/dashboard-shell.test.tsx

@@ -0,0 +1,52 @@
+// File: frontend/components/layout/__tests__/dashboard-shell.test.tsx
+// Change Log:
+// - 2026-06-13: Initial creation - test coverage for DashboardShell component
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import { DashboardShell } from '../dashboard-shell';
+import { useUIStore } from '@/lib/stores/ui-store';
+
+describe('DashboardShell', () => {
+  beforeEach(() => {
+    act(() => {
+      useUIStore.setState({ isSidebarOpen: true });
+    });
+  });
+
+  it('ควรเรนเดอร์ children ได้ถูกต้อง', () => {
+    render(
+      <DashboardShell>
+        <div>Test Content</div>
+      </DashboardShell>,
+    );
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('ควรมี class md:ml-[240px] เมื่อ isSidebarOpen เป็น true', () => {
+    act(() => {
+      useUIStore.setState({ isSidebarOpen: true });
+    });
+    const { container } = render(
+      <DashboardShell>
+        <div>Content</div>
+      </DashboardShell>,
+    );
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.className).toContain('md:ml-[240px]');
+  });
+
+  it('ควรมี class md:ml-[70px] เมื่อ isSidebarOpen เป็น false', () => {
+    act(() => {
+      useUIStore.setState({ isSidebarOpen: false });
+    });
+    const { container } = render(
+      <DashboardShell>
+        <div>Content</div>
+      </DashboardShell>,
+    );
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.className).toContain('md:ml-[70px]');
+  });
+});

frontend/components/layout/__tests__/header.test.tsx

@@ -0,0 +1,27 @@
+// File: frontend/components/layout/__tests__/header.test.tsx
+// Change Log
+// - 2026-06-13: Add coverage for Header composition.
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Header } from '../header';
+
+vi.mock('../user-menu', () => ({ UserMenu: () => <div>User menu</div> }));
+vi.mock('../global-search', () => ({ GlobalSearch: () => <label>Search<input aria-label="Search" /></label> }));
+vi.mock('../notifications-dropdown', () => ({ NotificationsDropdown: () => <button>Notifications</button> }));
+vi.mock('../sidebar', () => ({ MobileSidebar: () => <button>Mobile sidebar</button> }));
+vi.mock('../theme-toggle', () => ({ ThemeToggle: () => <button>Theme</button> }));
+vi.mock('../project-switcher', () => ({ ProjectSwitcher: () => <button>Project</button> }));
+
+describe('Header', () => {
+  it('renders application title and composed controls', () => {
+    render(<Header />);
+    expect(screen.getByText('LCBP3-DMS')).toBeInTheDocument();
+    expect(screen.getByLabelText('Search')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Mobile sidebar' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Project' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Theme' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Notifications' })).toBeInTheDocument();
+    expect(screen.getByText('User menu')).toBeInTheDocument();
+  });
+});

frontend/components/layout/__tests__/layout-widgets.test.tsx

@@ -0,0 +1,313 @@
+// File: frontend/components/layout/__tests__/layout-widgets.test.tsx
+// Change Log:
+// - 2026-06-14: Add coverage for uncovered layout widgets and navigation interactions
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import React from 'react';
+import { GlobalSearch } from '../global-search';
+import { MobileSidebar, Sidebar } from '../sidebar';
+import { ProjectSwitcher } from '../project-switcher';
+import { NotificationsDropdown } from '../notifications-dropdown';
+import { UserMenu } from '../user-menu';
+import { useProjectStore } from '@/lib/stores/project-store';
+import { useAuthStore } from '@/lib/stores/auth-store';
+
+const mocks = vi.hoisted(() => ({
+  routerPush: vi.fn(),
+  markAsRead: vi.fn(),
+  signOut: vi.fn(),
+  pathname: '/correspondences',
+  searchType: '',
+  suggestions: [
+    {
+      uuid: '019505a1-7c3e-7000-8000-abc123def501',
+      type: 'correspondence',
+      title: 'Incoming Correspondence',
+      documentNumber: 'COR-001',
+    },
+  ],
+  searchLoading: false,
+  projects: [
+    {
+      publicId: '019505a1-7c3e-7000-8000-abc123def601',
+      projectName: 'Project One',
+    },
+    {
+      publicId: '019505a1-7c3e-7000-8000-abc123def602',
+      projectName: 'Project Two',
+    },
+  ],
+  projectsLoading: false,
+  notifications: {
+    items: [
+      {
+        publicId: '019505a1-7c3e-7000-8000-abc123def701',
+        notificationId: 1,
+        title: 'Workflow task',
+        message: 'Please review the RFA',
+        type: 'INFO',
+        isRead: false,
+        createdAt: '2026-06-14T00:00:00Z',
+        link: '/review-tasks',
+      },
+    ],
+    unreadCount: 1,
+  },
+  notificationsLoading: false,
+  session: {
+    user: {
+      name: 'DMS Admin',
+      email: 'admin@example.local',
+      role: 'ADMIN',
+    },
+  },
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mocks.routerPush }),
+  usePathname: () => mocks.pathname,
+  useSearchParams: () => ({
+    get: (key: string) => (key === 'type' ? mocks.searchType : null),
+  }),
+}));
+
+vi.mock('next/link', () => ({
+  default: ({ children, href, onClick, className, title }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+    <a href={String(href)} onClick={onClick} className={className} title={title}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock('next-auth/react', () => ({
+  useSession: () => ({ data: mocks.session }),
+  signOut: mocks.signOut,
+}));
+
+vi.mock('@/hooks/use-search', () => ({
+  useSearchSuggestions: () => ({
+    data: mocks.suggestions,
+    isLoading: mocks.searchLoading,
+  }),
+}));
+
+vi.mock('@/hooks/use-projects', () => ({
+  useProjects: () => ({
+    data: mocks.projects,
+    isLoading: mocks.projectsLoading,
+  }),
+}));
+
+vi.mock('@/hooks/use-notification', () => ({
+  useNotifications: () => ({
+    data: mocks.notifications,
+    isLoading: mocks.notificationsLoading,
+  }),
+  useMarkNotificationRead: () => ({
+    mutate: mocks.markAsRead,
+  }),
+}));
+
+vi.mock('@/components/ui/select', () => ({
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: React.ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+  }) => (
+    <select data-testid="project-select" value={value} onChange={(event) => onValueChange?.(event.target.value)}>
+      {children}
+    </select>
+  ),
+  SelectTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  SelectContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  SelectValue: ({ placeholder }: { placeholder?: string }) => <option value="">{placeholder}</option>,
+  SelectItem: ({ children, value }: { children: React.ReactNode; value: string }) => <option value={value}>{children}</option>,
+}));
+
+vi.mock('@/components/ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DropdownMenuItem: ({
+    children,
+    onClick,
+    disabled,
+    className,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+  }) => (
+    <button type="button" onClick={onClick} disabled={disabled} className={className}>
+      {children}
+    </button>
+  ),
+  DropdownMenuLabel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DropdownMenuSeparator: () => <hr />,
+}));
+
+vi.mock('@/components/ui/command', () => ({
+  Command: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  CommandGroup: ({ children, heading }: { children: React.ReactNode; heading?: string }) => (
+    <div>
+      {heading && <div>{heading}</div>}
+      {children}
+    </div>
+  ),
+  CommandItem: ({ children, onSelect }: { children: React.ReactNode; onSelect?: () => void }) => (
+    <button type="button" onClick={onSelect}>
+      {children}
+    </button>
+  ),
+  CommandList: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('@/components/ui/sheet', () => ({
+  Sheet: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  SheetTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  SheetContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  SheetTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
+}));
+
+describe('layout widgets', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.pathname = '/correspondences';
+    mocks.searchType = '';
+    mocks.projects = [
+      { publicId: '019505a1-7c3e-7000-8000-abc123def601', projectName: 'Project One' },
+      { publicId: '019505a1-7c3e-7000-8000-abc123def602', projectName: 'Project Two' },
+    ];
+    mocks.projectsLoading = false;
+    mocks.notificationsLoading = false;
+    mocks.notifications = {
+      items: [
+        {
+          publicId: '019505a1-7c3e-7000-8000-abc123def701',
+          notificationId: 1,
+          title: 'Workflow task',
+          message: 'Please review the RFA',
+          type: 'INFO',
+          isRead: false,
+          createdAt: '2026-06-14T00:00:00Z',
+          link: '/review-tasks',
+        },
+      ],
+      unreadCount: 1,
+    };
+    useProjectStore.setState({ selectedProjectId: null });
+    useAuthStore.setState({
+      user: {
+        id: '019505a1-7c3e-7000-8000-abc123def801',
+        publicId: '019505a1-7c3e-7000-8000-abc123def801',
+        username: 'admin',
+        email: 'admin@example.local',
+        firstName: 'DMS',
+        lastName: 'Admin',
+        role: 'ADMIN',
+      },
+      token: 'token',
+      isAuthenticated: true,
+    });
+  });
+
+  it('Sidebar ควรแสดงเมนู admin และ collapse label ได้', () => {
+    render(<Sidebar />);
+    expect(screen.getByText('Admin Panel')).toBeInTheDocument();
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    expect(screen.queryByText('Admin Panel')).not.toBeInTheDocument();
+    expect(screen.getByTitle('Admin Panel')).toBeInTheDocument();
+  });
+
+  it('MobileSidebar ควร render navigation และซ่อน admin เมื่อ role ไม่ใช่ admin', () => {
+    useAuthStore.setState({
+      user: {
+        id: '019505a1-7c3e-7000-8000-abc123def802',
+        publicId: '019505a1-7c3e-7000-8000-abc123def802',
+        username: 'viewer',
+        email: 'viewer@example.local',
+        firstName: 'DMS',
+        lastName: 'Viewer',
+        role: 'User',
+      },
+      token: 'token',
+      isAuthenticated: true,
+    });
+    render(<MobileSidebar />);
+    expect(screen.getByText('Mobile Navigation')).toBeInTheDocument();
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    expect(screen.queryByText('Admin Panel')).not.toBeInTheDocument();
+  });
+
+  it('GlobalSearch ควร submit query และเปิด suggestion route ได้', async () => {
+    render(<GlobalSearch />);
+    const input = screen.getByPlaceholderText('Search documents...');
+    fireEvent.change(input, { target: { value: 'rfa search' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(mocks.routerPush).toHaveBeenCalledWith('/search?q=rfa%20search');
+    fireEvent.focus(input);
+    await waitFor(() => expect(screen.getByText('Incoming Correspondence')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Incoming Correspondence'));
+    expect(mocks.routerPush).toHaveBeenCalledWith('/correspondences/019505a1-7c3e-7000-8000-abc123def501');
+  });
+
+  it('ProjectSwitcher ควรเลือก project และ global ได้', () => {
+    render(<ProjectSwitcher />);
+    const select = screen.getByTestId('project-select');
+    fireEvent.change(select, { target: { value: '019505a1-7c3e-7000-8000-abc123def602' } });
+    expect(useProjectStore.getState().selectedProjectId).toBe('019505a1-7c3e-7000-8000-abc123def602');
+    fireEvent.change(select, { target: { value: 'global' } });
+    expect(useProjectStore.getState().selectedProjectId).toBeNull();
+  });
+
+  it('ProjectSwitcher ควร auto-select เมื่อมี project เดียวและแสดง loading/empty state ได้', async () => {
+    mocks.projects = [{ publicId: '019505a1-7c3e-7000-8000-abc123def603', projectName: 'Single Project' }];
+    const { rerender, container } = render(<ProjectSwitcher />);
+    await waitFor(() => expect(useProjectStore.getState().selectedProjectId).toBe('019505a1-7c3e-7000-8000-abc123def603'));
+    expect(screen.getByText('Single Project')).toBeInTheDocument();
+    mocks.projectsLoading = true;
+    rerender(<ProjectSwitcher />);
+    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
+    mocks.projectsLoading = false;
+    mocks.projects = [];
+    rerender(<ProjectSwitcher />);
+    expect(screen.queryByText('Single Project')).not.toBeInTheDocument();
+  });
+
+  it('NotificationsDropdown ควร mark read และ navigate เมื่อคลิก notification', () => {
+    render(<NotificationsDropdown />);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Workflow task'));
+    expect(mocks.markAsRead).toHaveBeenCalledWith('019505a1-7c3e-7000-8000-abc123def701');
+    expect(mocks.routerPush).toHaveBeenCalledWith('/review-tasks');
+  });
+
+  it('NotificationsDropdown ควรแสดง loading และ empty state ได้', () => {
+    mocks.notificationsLoading = true;
+    const { rerender, container } = render(<NotificationsDropdown />);
+    expect(container.querySelector('.animate-spin')).toBeInTheDocument();
+    mocks.notificationsLoading = false;
+    mocks.notifications = { items: [], unreadCount: 0 };
+    rerender(<NotificationsDropdown />);
+    expect(screen.getByText('No new notifications')).toBeInTheDocument();
+  });
+
+  it('UserMenu ควรแสดงข้อมูล session และ logout กลับ login', async () => {
+    mocks.signOut.mockResolvedValueOnce(undefined);
+    render(<UserMenu />);
+    expect(screen.getByText('DMS Admin')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Profile'));
+    expect(mocks.routerPush).toHaveBeenCalledWith('/profile');
+    fireEvent.click(screen.getByText('Settings'));
+    expect(mocks.routerPush).toHaveBeenCalledWith('/settings');
+    fireEvent.click(screen.getByText('Log out'));
+    await waitFor(() => expect(mocks.signOut).toHaveBeenCalledWith({ redirect: false }));
+    expect(mocks.routerPush).toHaveBeenCalledWith('/login');
+  });
+});

frontend/components/layout/__tests__/navbar.test.tsx

@@ -0,0 +1,71 @@
+// File: frontend/components/layout/__tests__/navbar.test.tsx
+// Change Log:
+// - 2026-06-13: Initial creation - test coverage for Navbar component
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import { Navbar } from '../navbar';
+import { useUIStore } from '@/lib/stores/ui-store';
+import { useSession } from 'next-auth/react';
+
+// Mock dependencies
+vi.mock('next-auth/react', () => ({
+  useSession: vi.fn(),
+  signOut: vi.fn(),
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock('next/link', () => ({
+  default: ({ children, href }: { children: React.ReactNode; href: string }) => (
+    <a href={href}>{children}</a>
+  ),
+}));
+
+describe('Navbar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // รีเซ็ต ui store
+    act(() => {
+      useUIStore.setState({ isSidebarOpen: true, toggleSidebar: vi.fn() });
+    });
+    vi.mocked(useSession).mockReturnValue({
+      data: { user: { name: 'John Doe', email: 'john@example.com', role: 'Admin' } },
+    } as any);
+  });
+
+  it('ควรเรนเดอร์ header ได้ถูกต้อง', () => {
+    render(<Navbar />);
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
+
+  it('ควรแสดงข้อความ Document Management System', () => {
+    render(<Navbar />);
+    expect(screen.getByText('Document Management System')).toBeInTheDocument();
+  });
+
+  it('ควรมีปุ่ม Toggle navigation menu สำหรับ mobile', () => {
+    render(<Navbar />);
+    expect(screen.getByText('Toggle navigation menu')).toBeInTheDocument();
+  });
+
+  it('ควรมีปุ่ม Notifications', () => {
+    render(<Navbar />);
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  it('ควรเรียก toggleSidebar เมื่อคลิกปุ่ม menu', () => {
+    const mockToggle = vi.fn();
+    act(() => {
+      useUIStore.setState({ isSidebarOpen: true, toggleSidebar: mockToggle });
+    });
+    render(<Navbar />);
+    // ปุ่ม menu บน mobile
+    const menuButton = screen.getByRole('button', { name: /toggle navigation menu/i });
+    fireEvent.click(menuButton);
+    expect(mockToggle).toHaveBeenCalledOnce();
+  });
+});

frontend/components/layout/__tests__/theme-toggle.test.tsx

@@ -0,0 +1,58 @@
+// File: frontend/components/layout/__tests__/theme-toggle.test.tsx
+// Change Log:
+// - 2026-06-13: Initial creation - test coverage for ThemeToggle component
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeToggle } from '../theme-toggle';
+
+const mockSetTheme = vi.fn();
+let mockResolvedTheme = 'dark';
+
+vi.mock('next-themes', () => ({
+  useTheme: () => ({
+    resolvedTheme: mockResolvedTheme,
+    setTheme: mockSetTheme,
+  }),
+}));
+
+describe('ThemeToggle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockResolvedTheme = 'dark';
+  });
+
+  it('ควรแสดงปุ่ม Toggle White/Dark mode', () => {
+    render(<ThemeToggle />);
+    const button = screen.getByTitle('Toggle white/dark mode');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('ควรแสดงข้อความ White เมื่อ theme ปัจจุบันเป็น dark', () => {
+    mockResolvedTheme = 'dark';
+    render(<ThemeToggle />);
+    expect(screen.getByText('White')).toBeInTheDocument();
+  });
+
+  it('ควรแสดงข้อความ Dark เมื่อ theme ปัจจุบันเป็น light', () => {
+    mockResolvedTheme = 'light';
+    render(<ThemeToggle />);
+    expect(screen.getByText('Dark')).toBeInTheDocument();
+  });
+
+  it('ควรเรียก setTheme("light") เมื่อคลิกขณะ theme เป็น dark', () => {
+    mockResolvedTheme = 'dark';
+    render(<ThemeToggle />);
+    const button = screen.getByTitle('Toggle white/dark mode');
+    fireEvent.click(button);
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+  });
+
+  it('ควรเรียก setTheme("dark") เมื่อคลิกขณะ theme เป็น light', () => {
+    mockResolvedTheme = 'light';
+    render(<ThemeToggle />);
+    const button = screen.getByTitle('Toggle white/dark mode');
+    fireEvent.click(button);
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+});

frontend/components/layout/__tests__/user-nav.test.tsx

@@ -0,0 +1,107 @@
+// File: frontend/components/layout/__tests__/user-nav.test.tsx
+// Change Log:
+// - 2026-06-13: Initial creation - test coverage for UserNav component
+// - 2026-06-13: Fix Radix UI DropdownMenu testing — ใช้ userEvent แทน fireEvent และ waitFor
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserNav } from '../user-nav';
+import { useSession, signOut } from 'next-auth/react';
+
+vi.mock('next-auth/react', () => ({
+  useSession: vi.fn(),
+  signOut: vi.fn(),
+}));
+
+const mockPush = vi.fn();
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+describe('UserNav Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useSession).mockReturnValue({
+      data: {
+        user: {
+          name: 'John Doe',
+          email: 'john@example.com',
+          role: 'Admin',
+        },
+      },
+    } as any);
+  });
+
+  it('ควรเรนเดอร์อักษรย่อชื่อผู้ใช้ได้อย่างถูกต้อง', () => {
+    render(<UserNav />);
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+
+  it('ควรแสดงรายละเอียดผู้ใช้ใน DropdownMenuContent (forceMount)', async () => {
+    render(<UserNav />);
+    // DropdownMenuContent ใช้ forceMount → render อยู่ใน DOM เสมอ
+    // แต่ Radix ซ่อนด้วย data-state — ต้อง click trigger ก่อน
+    const user = userEvent.setup();
+    const trigger = screen.getByRole('button');
+    await act(async () => {
+      await user.click(trigger);
+    });
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('ควรเปลี่ยนเส้นทางไปหน้า Profile เมื่อคลิกเมนู Profile', async () => {
+    render(<UserNav />);
+    const user = userEvent.setup();
+    await act(async () => {
+      await user.click(screen.getByRole('button'));
+    });
+    await waitFor(() => {
+      expect(screen.getByText('Profile')).toBeInTheDocument();
+    });
+    await act(async () => {
+      await user.click(screen.getByText('Profile'));
+    });
+    expect(mockPush).toHaveBeenCalledWith('/profile');
+  });
+
+  it('ควรเปลี่ยนเส้นทางไปหน้า Settings เมื่อคลิกเมนู Settings', async () => {
+    render(<UserNav />);
+    const user = userEvent.setup();
+    await act(async () => {
+      await user.click(screen.getByRole('button'));
+    });
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+    await act(async () => {
+      await user.click(screen.getByText('Settings'));
+    });
+    expect(mockPush).toHaveBeenCalledWith('/settings');
+  });
+
+  it('ควรออกจากระบบและเปลี่ยนเส้นทางไปหน้า Login เมื่อคลิกเมนู Log out', async () => {
+    vi.mocked(signOut).mockResolvedValue({} as any);
+    render(<UserNav />);
+    const user = userEvent.setup();
+    await act(async () => {
+      await user.click(screen.getByRole('button'));
+    });
+    await waitFor(() => {
+      expect(screen.getByText('Log out')).toBeInTheDocument();
+    });
+    await act(async () => {
+      await user.click(screen.getByText('Log out'));
+    });
+    expect(signOut).toHaveBeenCalledWith({ redirect: false });
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith('/login');
+    });
+  });
+});