test: add Stage 3-5 component and layout test coverage

Add tests for:
- PageLayout components: ContentCard, FilterCard, TableCard, TreeCard, PageLayout
- AuthLayout layout component
- LoginLogDetailDrawer and OperationLogDetailDrawer page components

All 518 tests pass across 82 test files.

frontend/admin/src/components/layout/PageLayout/ContentCard.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { ContentCard } from './ContentCard'
+
+vi.mock('antd', () => ({
+  Card: ({
+    children,
+    className,
+    style,
+    title,
+  }: {
+    children?: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    title?: React.ReactNode
+  }) => (
+    <div data-testid="card" data-class={className} style={style}>
+      {title && <div data-testid="card-title">{title}</div>}
+      {children}
+    </div>
+  ),
+}))
+
+describe('ContentCard', () => {
+  it('renders children content', () => {
+    render(
+      <ContentCard>
+        <div>card content</div>
+      </ContentCard>,
+    )
+
+    expect(screen.getByText('card content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <ContentCard className="custom-class">
+        <div>content</div>
+      </ContentCard>,
+    )
+
+    expect(screen.getByTestId('card')).toHaveAttribute('data-class', expect.stringContaining('custom-class'))
+  })
+
+  it('applies custom style', () => {
+    const customStyle = { marginTop: '20px' }
+    render(
+      <ContentCard style={customStyle}>
+        <div>content</div>
+      </ContentCard>,
+    )
+
+    expect(screen.getByTestId('card')).toHaveStyle({ marginTop: '20px' })
+  })
+
+  it('renders with title', () => {
+    render(
+      <ContentCard title="Card Title">
+        <div>content</div>
+      </ContentCard>,
+    )
+
+    expect(screen.getByTestId('card-title')).toHaveTextContent('Card Title')
+  })
+})

frontend/admin/src/components/layout/PageLayout/FilterCard.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { FilterCard } from './FilterCard'
+
+vi.mock('antd', () => ({
+  Card: ({
+    children,
+    className,
+  }: {
+    children?: React.ReactNode
+    className?: string
+  }) => (
+    <div data-testid="card" data-class={className}>
+      {children}
+    </div>
+  ),
+}))
+
+describe('FilterCard', () => {
+  it('renders children content', () => {
+    render(
+      <FilterCard>
+        <div>filter content</div>
+      </FilterCard>,
+    )
+
+    expect(screen.getByText('filter content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <FilterCard className="custom-filter-class">
+        <div>content</div>
+      </FilterCard>,
+    )
+
+    expect(screen.getByTestId('card')).toHaveAttribute('data-class', expect.stringContaining('custom-filter-class'))
+  })
+})

frontend/admin/src/components/layout/PageLayout/PageLayout.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { PageLayout } from './PageLayout'
+
+describe('PageLayout', () => {
+  it('renders children content', () => {
+    render(
+      <PageLayout>
+        <div>page content</div>
+      </PageLayout>,
+    )
+
+    expect(screen.getByText('page content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <PageLayout className="custom-page-layout">
+        <div>content</div>
+      </PageLayout>,
+    )
+
+    const element = screen.getByText('content')
+    expect(element.parentElement).toHaveClass('custom-page-layout')
+  })
+})

frontend/admin/src/components/layout/PageLayout/TableCard.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { TableCard } from './TableCard'
+
+vi.mock('antd', () => ({
+  Card: ({
+    children,
+    className,
+  }: {
+    children?: React.ReactNode
+    className?: string
+  }) => (
+    <div data-testid="card" data-class={className}>
+      {children}
+    </div>
+  ),
+}))
+
+describe('TableCard', () => {
+  it('renders children content', () => {
+    render(
+      <TableCard>
+        <div>table content</div>
+      </TableCard>,
+    )
+
+    expect(screen.getByText('table content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <TableCard className="custom-table-class">
+        <div>content</div>
+      </TableCard>,
+    )
+
+    expect(screen.getByTestId('card')).toHaveAttribute('data-class', expect.stringContaining('custom-table-class'))
+  })
+})

frontend/admin/src/components/layout/PageLayout/TreeCard.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { TreeCard } from './TreeCard'
+
+vi.mock('antd', () => ({
+  Card: ({
+    children,
+    className,
+  }: {
+    children?: React.ReactNode
+    className?: string
+  }) => (
+    <div data-testid="card" data-class={className}>
+      {children}
+    </div>
+  ),
+}))
+
+describe('TreeCard', () => {
+  it('renders children content', () => {
+    render(
+      <TreeCard>
+        <div>tree content</div>
+      </TreeCard>,
+    )
+
+    expect(screen.getByText('tree content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <TreeCard className="custom-tree-class">
+        <div>content</div>
+      </TreeCard>,
+    )
+
+    expect(screen.getByTestId('card')).toHaveAttribute('data-class', expect.stringContaining('custom-tree-class'))
+  })
+})