diff --git a/admin-ui/app/components/Accordion/__tests__/Accordion.test.tsx b/admin-ui/app/components/Accordion/__tests__/Accordion.test.tsx
new file mode 100644
index 000000000..5a34d3f89
--- /dev/null
+++ b/admin-ui/app/components/Accordion/__tests__/Accordion.test.tsx
@@ -0,0 +1,101 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import Accordion from '@/components/Accordion'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+type BuildProps = {
+  initialOpen?: boolean
+  open?: boolean
+  onToggle?: (isOpen: boolean) => void
+}
+
+const buildAccordion = ({ initialOpen, open, onToggle }: BuildProps = {}) => (
+  <Accordion initialOpen={initialOpen} open={open} onToggle={onToggle}>
+    <Accordion.Header>
+      Section Title
+      <Accordion.Indicator />
+    </Accordion.Header>
+    <Accordion.Body>Body Content</Accordion.Body>
+  </Accordion>
+)
+
+describe('Accordion', () => {
+  it('renders its header and body children', () => {
+    render(buildAccordion({ initialOpen: true }), { wrapper: Wrapper })
+
+    expect(screen.getByText('Section Title')).toBeInTheDocument()
+    expect(screen.getByText('Body Content')).toBeInTheDocument()
+  })
+
+  it('shows the closed indicator and hides the body when not initially open', () => {
+    render(buildAccordion(), { wrapper: Wrapper })
+
+    expect(screen.getByTestId('AddIcon')).toBeInTheDocument()
+    expect(screen.queryByTestId('RemoveIcon')).not.toBeInTheDocument()
+    expect(screen.getByText('Body Content')).not.toBeVisible()
+  })
+
+  it('shows the open indicator and reveals the body when initialOpen is true', () => {
+    render(buildAccordion({ initialOpen: true }), { wrapper: Wrapper })
+
+    expect(screen.getByTestId('RemoveIcon')).toBeInTheDocument()
+    expect(screen.queryByTestId('AddIcon')).not.toBeInTheDocument()
+    expect(screen.getByText('Body Content')).toBeVisible()
+  })
+
+  it('toggles open when the header is clicked (uncontrolled)', () => {
+    render(buildAccordion(), { wrapper: Wrapper })
+
+    expect(screen.getByTestId('AddIcon')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Section Title'))
+
+    expect(screen.getByTestId('RemoveIcon')).toBeInTheDocument()
+    expect(screen.getByText('Body Content')).toBeVisible()
+  })
+
+  it('toggles closed again on a second header click (uncontrolled)', () => {
+    render(buildAccordion({ initialOpen: true }), { wrapper: Wrapper })
+
+    fireEvent.click(screen.getByText('Section Title'))
+
+    // indicator flips back to the closed state
+    expect(screen.getByTestId('AddIcon')).toBeInTheDocument()
+    expect(screen.queryByTestId('RemoveIcon')).not.toBeInTheDocument()
+  })
+
+  it('throws when open is provided without onToggle', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    expect(() => render(buildAccordion({ open: true }), { wrapper: Wrapper })).toThrow(
+      /props.open has to be used combined with props.onToggle/,
+    )
+
+    consoleError.mockRestore()
+  })
+
+  it('calls onToggle with the next open state when controlled, without changing on its own', () => {
+    const onToggle = jest.fn()
+    render(buildAccordion({ open: false, onToggle }), { wrapper: Wrapper })
+
+    expect(screen.getByTestId('AddIcon')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Section Title'))
+
+    expect(onToggle).toHaveBeenCalledTimes(1)
+    expect(onToggle).toHaveBeenCalledWith(true)
+    // parent owns state: still closed until the prop changes
+    expect(screen.getByTestId('AddIcon')).toBeInTheDocument()
+  })
+
+  it('renders the state dictated by the parent when controlled', () => {
+    render(buildAccordion({ open: true, onToggle: jest.fn() }), { wrapper: Wrapper })
+
+    expect(screen.getByTestId('RemoveIcon')).toBeInTheDocument()
+    expect(screen.getByText('Body Content')).toBeVisible()
+  })
+})
diff --git a/admin-ui/app/components/CustomInput/__tests__/CustomInput.test.tsx b/admin-ui/app/components/CustomInput/__tests__/CustomInput.test.tsx
new file mode 100644
index 000000000..437883ebc
--- /dev/null
+++ b/admin-ui/app/components/CustomInput/__tests__/CustomInput.test.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { CustomInput } from '@/components/CustomInput/CustomInput'
+import type { CustomInputProps } from '@/components/CustomInput/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const renderInput = (props: CustomInputProps) =>
+  render(<CustomInput {...props} />, { wrapper: Wrapper })
+
+describe('CustomInput', () => {
+  it('renders a text input by default', () => {
+    renderInput({ name: 'firstName', type: 'text' })
+    const input = screen.getByTestId('firstName') as HTMLInputElement
+    expect(input.tagName).toBe('INPUT')
+    expect(input.type).toBe('text')
+  })
+
+  it('displays the provided value', () => {
+    renderInput({ name: 'firstName', type: 'text', value: 'Alice', onChange: jest.fn() })
+    const input = screen.getByTestId('firstName') as HTMLInputElement
+    expect(input.value).toBe('Alice')
+  })
+
+  it('fires onChange when typing in the input', () => {
+    const onChange = jest.fn()
+    renderInput({ name: 'firstName', type: 'text', onChange })
+    const input = screen.getByTestId('firstName') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'Bob' } })
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('forwards name, placeholder and disabled props to the input', () => {
+    renderInput({
+      name: 'email',
+      type: 'text',
+      disabled: true,
+      'data-testid': 'email',
+    })
+    const input = screen.getByTestId('email') as HTMLInputElement
+    expect(input.name).toBe('email')
+    expect(input.disabled).toBe(true)
+  })
+
+  it('renders a select element when type is select', () => {
+    renderInput({
+      name: 'country',
+      type: 'select',
+      children: (
+        <>
+          <option value="us">United States</option>
+          <option value="uk">United Kingdom</option>
+        </>
+      ),
+    })
+    const select = screen.getByTestId('country') as HTMLSelectElement
+    expect(select.tagName).toBe('SELECT')
+    expect(screen.getByText('United States')).toBeInTheDocument()
+    expect(screen.getByText('United Kingdom')).toBeInTheDocument()
+  })
+
+  it('fires onChange when selecting an option', () => {
+    const onChange = jest.fn()
+    renderInput({
+      name: 'country',
+      type: 'select',
+      onChange,
+      children: (
+        <>
+          <option value="us">United States</option>
+          <option value="uk">United Kingdom</option>
+        </>
+      ),
+    })
+    const select = screen.getByTestId('country') as HTMLSelectElement
+    fireEvent.change(select, { target: { value: 'uk' } })
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/admin-ui/app/components/EmptyLayout/__tests__/EmptyLayout.test.tsx b/admin-ui/app/components/EmptyLayout/__tests__/EmptyLayout.test.tsx
new file mode 100644
index 000000000..e10d45904
--- /dev/null
+++ b/admin-ui/app/components/EmptyLayout/__tests__/EmptyLayout.test.tsx
@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react'
+import { EmptyLayout } from '@/components/EmptyLayout/EmptyLayout'
+import type { EmptyLayoutProps, SectionProps } from '@/components/EmptyLayout/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const renderLayout = (props: Omit<EmptyLayoutProps, 'pageConfig'>) =>
+  render(
+    <AppTestWrapper>
+      <EmptyLayout {...props} />
+    </AppTestWrapper>,
+  )
+
+const renderSection = (props: SectionProps) =>
+  render(
+    <AppTestWrapper>
+      <EmptyLayout.Section {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('EmptyLayout', () => {
+  it('renders its children', () => {
+    renderLayout({ children: <span>hello child</span> })
+    expect(screen.getByText('hello child')).toBeInTheDocument()
+  })
+
+  it('always applies the fullscreen class on the root element', () => {
+    renderLayout({ children: <span data-testid="content">content</span> })
+    const root = screen.getByTestId('content').parentElement
+    expect(root).toHaveClass('fullscreen')
+  })
+
+  it('merges a custom className alongside fullscreen', () => {
+    renderLayout({ children: <span data-testid="content">content</span>, className: 'extra' })
+    const root = screen.getByTestId('content').parentElement
+    expect(root).toHaveClass('fullscreen')
+    expect(root).toHaveClass('extra')
+  })
+
+  it('exposes a Section sub-layout', () => {
+    expect(EmptyLayout.Section).toBeDefined()
+  })
+
+  describe('EmptyLayout.Section', () => {
+    it('renders children and the base section class', () => {
+      renderSection({ children: <span data-testid="sec">section child</span> })
+      expect(screen.getByText('section child')).toBeInTheDocument()
+      const section = screen.getByTestId('sec').parentElement
+      expect(section).toHaveClass('fullscreen__section')
+      expect(section).not.toHaveClass('fullscreen__section--center')
+    })
+
+    it('does not wrap children in a centering child when center is not set', () => {
+      renderSection({ children: <span data-testid="sec">section child</span> })
+      const section = screen.getByTestId('sec').parentElement
+      expect(section).toHaveClass('fullscreen__section')
+    })
+
+    it('applies the center modifier and wraps children with a max-width container when center is true', () => {
+      renderSection({ center: true, children: <span data-testid="sec">centered</span> })
+      const wrapper = screen.getByTestId('sec').parentElement
+      expect(wrapper).toHaveClass('fullscreen__section__child')
+      expect(wrapper).toHaveStyle({ maxWidth: '420px' })
+      const section = wrapper?.parentElement
+      expect(section).toHaveClass('fullscreen__section--center')
+    })
+
+    it('uses a string width verbatim as maxWidth', () => {
+      renderSection({ center: true, width: '50%', children: <span data-testid="sec">x</span> })
+      const wrapper = screen.getByTestId('sec').parentElement
+      expect(wrapper).toHaveStyle({ maxWidth: '50%' })
+    })
+
+    it('appends px to a numeric width', () => {
+      renderSection({ center: true, width: 600, children: <span data-testid="sec">x</span> })
+      const wrapper = screen.getByTestId('sec').parentElement
+      expect(wrapper).toHaveStyle({ maxWidth: '600px' })
+    })
+
+    it('merges a custom className onto the section', () => {
+      renderSection({ className: 'my-section', children: <span data-testid="sec">x</span> })
+      const section = screen.getByTestId('sec').parentElement
+      expect(section).toHaveClass('my-section')
+      expect(section).toHaveClass('fullscreen__section')
+    })
+  })
+})
diff --git a/admin-ui/app/components/GluuBadge/__tests__/GluuBadge.test.tsx b/admin-ui/app/components/GluuBadge/__tests__/GluuBadge.test.tsx
new file mode 100644
index 000000000..d801ab6f8
--- /dev/null
+++ b/admin-ui/app/components/GluuBadge/__tests__/GluuBadge.test.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import GluuBadge from '@/components/GluuBadge/GluuBadge'
+import type { GluuBadgeProps } from '@/components/GluuBadge/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const renderBadge = (props: Partial<GluuBadgeProps> = {}) =>
+  render(<GluuBadge {...props}>{props.children ?? 'Active'}</GluuBadge>, { wrapper: Wrapper })
+
+describe('GluuBadge', () => {
+  it('renders its content', () => {
+    renderBadge({ children: 'Enabled' })
+    expect(screen.getByText('Enabled')).toBeInTheDocument()
+  })
+
+  it('renders distinct labels for distinct states', () => {
+    const { rerender } = renderBadge({ children: 'Active' })
+    expect(screen.getByText('Active')).toBeInTheDocument()
+
+    // wrapper is preserved by rerender; pass only the updated child element
+    rerender(<GluuBadge>Inactive</GluuBadge>)
+    expect(screen.getByText('Inactive')).toBeInTheDocument()
+    expect(screen.queryByText('Active')).not.toBeInTheDocument()
+  })
+
+  it('is non-interactive by default (no button role, default cursor)', () => {
+    renderBadge({ children: 'Static' })
+    const badge = screen.getByText('Static')
+    expect(badge).not.toHaveAttribute('role', 'button')
+    expect(badge).not.toHaveAttribute('tabindex')
+    expect(badge).toHaveStyle({ cursor: 'default' })
+  })
+
+  it('becomes interactive when onClick is provided', () => {
+    const onClick = jest.fn()
+    renderBadge({ children: 'Clickable', onClick })
+    const badge = screen.getByRole('button', { name: 'Clickable' })
+    expect(badge).toHaveAttribute('tabindex', '0')
+    expect(badge).toHaveStyle({ cursor: 'pointer' })
+    fireEvent.click(badge)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('triggers onClick on Enter key when interactive', () => {
+    const onClick = jest.fn()
+    renderBadge({ children: 'Keyed', onClick })
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('triggers onClick on Space key when interactive', () => {
+    const onClick = jest.fn()
+    renderBadge({ children: 'Spaced', onClick })
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores other keys when interactive', () => {
+    const onClick = jest.fn()
+    renderBadge({ children: 'Ignored', onClick })
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'a' })
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('renders outlined variant with transparent background and colored text', () => {
+    renderBadge({ children: 'Outlined', outlined: true, backgroundColor: 'rgb(255, 0, 0)' })
+    const badge = screen.getByText('Outlined')
+    // outlined => background transparent, text + border take the badge color
+    expect(badge.style.backgroundColor).toBe('transparent')
+    expect(badge).toHaveStyle({ color: 'rgb(255, 0, 0)' })
+  })
+
+  it('applies pill border radius when pill is set', () => {
+    renderBadge({ children: 'Pill', pill: true })
+    expect(screen.getByText('Pill')).toHaveStyle({ borderRadius: '50px' })
+  })
+
+  it('applies the title attribute and className', () => {
+    renderBadge({ children: 'Titled', title: 'A tooltip', className: 'my-badge' })
+    const badge = screen.getByText('Titled')
+    expect(badge).toHaveAttribute('title', 'A tooltip')
+    expect(badge).toHaveClass('my-badge')
+  })
+})
diff --git a/admin-ui/app/components/GluuButton/__tests__/GluuButton.test.tsx b/admin-ui/app/components/GluuButton/__tests__/GluuButton.test.tsx
new file mode 100644
index 000000000..b6f6dcf12
--- /dev/null
+++ b/admin-ui/app/components/GluuButton/__tests__/GluuButton.test.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import GluuButton from '@/components/GluuButton/GluuButton'
+import type { GluuButtonProps } from '@/components/GluuButton/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const renderButton = (props: Partial<GluuButtonProps> = {}) =>
+  render(<GluuButton {...props}>{props.children ?? 'Click me'}</GluuButton>, { wrapper: Wrapper })
+
+describe('GluuButton', () => {
+  it('renders its children', () => {
+    renderButton({ children: 'Save changes' })
+    expect(screen.getByRole('button', { name: 'Save changes' })).toBeInTheDocument()
+  })
+
+  it('fires onClick when clicked', () => {
+    const onClick = jest.fn()
+    renderButton({ onClick })
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire onClick and is disabled when disabled is true', () => {
+    const onClick = jest.fn()
+    renderButton({ onClick, disabled: true })
+    const button = screen.getByRole('button') as HTMLButtonElement
+    expect(button).toBeDisabled()
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('renders a spinner and is disabled while loading', () => {
+    const onClick = jest.fn()
+    renderButton({ onClick, loading: true, children: 'Submit' })
+    const button = screen.getByRole('button') as HTMLButtonElement
+    expect(button).toBeDisabled()
+    // spinner span is the first child element before the label text
+    expect(button.querySelector('span')).toBeInTheDocument()
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('defaults to type="button"', () => {
+    renderButton()
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'button')
+  })
+
+  it('honors type="submit"', () => {
+    renderButton({ type: 'submit' })
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+  })
+
+  it('applies the title attribute', () => {
+    renderButton({ title: 'Tooltip text' })
+    expect(screen.getByRole('button')).toHaveAttribute('title', 'Tooltip text')
+  })
+
+  it('forwards aria-label and aria-expanded', () => {
+    renderButton({ 'aria-label': 'menu', 'aria-expanded': true })
+    const button = screen.getByRole('button', { name: 'menu' })
+    expect(button).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('renders outlined and custom color props without error', () => {
+    renderButton({
+      outlined: true,
+      backgroundColor: '#123456',
+      textColor: '#ffffff',
+      borderColor: '#000000',
+      size: 'lg',
+      block: true,
+    })
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('applies the provided className', () => {
+    renderButton({ className: 'my-btn' })
+    expect(screen.getByRole('button')).toHaveClass('my-btn')
+  })
+})
diff --git a/admin-ui/app/components/GluuDatePicker/__tests__/GluuDatePicker.test.tsx b/admin-ui/app/components/GluuDatePicker/__tests__/GluuDatePicker.test.tsx
new file mode 100644
index 000000000..858ec7bf9
--- /dev/null
+++ b/admin-ui/app/components/GluuDatePicker/__tests__/GluuDatePicker.test.tsx
@@ -0,0 +1,172 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { GluuDatePicker } from '@/components/GluuDatePicker/GluuDatePicker'
+import { createDate } from '@/utils/dayjsUtils'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+// MUI X date pickers render a hidden <input> per field that carries the
+// formatted value, plus a sectioned span group for editing. Reading the
+// underlying input value is the reliable way to assert the displayed value.
+const getInputs = (container: HTMLElement): HTMLInputElement[] =>
+  Array.from(container.querySelectorAll('input'))
+
+// The field label text is mirrored in both the <label> and the outline's
+// <legend>, so match on the actual <label> element to stay unambiguous.
+const getFieldLabels = (container: HTMLElement): string[] =>
+  Array.from(container.querySelectorAll('label')).map((label) => label.textContent ?? '')
+
+const openCalendarAndPickDay = (dayLabel: string): void => {
+  const triggers = screen.getAllByRole('button', { name: /choose date/i })
+  fireEvent.click(triggers[0])
+  const day = screen.getAllByRole('gridcell').find((cell) => cell.textContent === dayLabel)
+  if (day) {
+    fireEvent.click(day)
+  }
+}
+
+describe('GluuDatePicker (single mode)', () => {
+  it('renders a single date field with the provided label', () => {
+    const { container } = render(
+      <GluuDatePicker mode="single" label="Birth Date" onChange={jest.fn()} />,
+      { wrapper: Wrapper },
+    )
+    expect(getFieldLabels(container)).toContain('Birth Date')
+  })
+
+  it('displays the passed value formatted with the default US format (MM/DD/YYYY)', () => {
+    const { container } = render(
+      <GluuDatePicker mode="single" label="When" value={createDate('2024-01-15')} onChange={jest.fn()} />,
+      { wrapper: Wrapper },
+    )
+    expect(getInputs(container)[0].value).toBe('01/15/2024')
+  })
+
+  it('renders an empty field when no value is provided', () => {
+    const { container } = render(<GluuDatePicker mode="single" label="When" onChange={jest.fn()} />, {
+      wrapper: Wrapper,
+    })
+    expect(getInputs(container)[0].value).toBe('')
+  })
+
+  it('respects a custom display format', () => {
+    const { container } = render(
+      <GluuDatePicker
+        mode="single"
+        label="When"
+        value={createDate('2024-01-15')}
+        dateFormat="YYYY-MM-DD"
+        onChange={jest.fn()}
+      />,
+      { wrapper: Wrapper },
+    )
+    expect(getInputs(container)[0].value).toBe('2024-01-15')
+  })
+
+  it('exposes a "Choose date" trigger that opens a calendar', () => {
+    render(<GluuDatePicker mode="single" label="When" onChange={jest.fn()} />, { wrapper: Wrapper })
+    fireEvent.click(screen.getByRole('button', { name: /choose date/i }))
+    expect(screen.getByRole('grid')).toBeInTheDocument()
+  })
+
+  it('fires onChange when a day is selected from the calendar', () => {
+    const onChange = jest.fn()
+    render(
+      <GluuDatePicker mode="single" label="When" value={createDate('2024-01-15')} onChange={onChange} />,
+      { wrapper: Wrapper },
+    )
+    openCalendarAndPickDay('20')
+    expect(onChange).toHaveBeenCalled()
+  })
+})
+
+describe('GluuDatePicker (range mode)', () => {
+  it('renders two fields with default Start Date / End Date labels', () => {
+    const { container } = render(
+      <GluuDatePicker
+        mode="range"
+        startDate={null}
+        endDate={null}
+        onStartDateChange={jest.fn()}
+        onEndDateChange={jest.fn()}
+      />,
+      { wrapper: Wrapper },
+    )
+    const labels = getFieldLabels(container)
+    expect(labels).toContain('Start Date')
+    expect(labels).toContain('End Date')
+  })
+
+  it('displays the start and end date values in their respective fields', () => {
+    const { container } = render(
+      <GluuDatePicker
+        mode="range"
+        startDate={createDate('2024-03-01')}
+        endDate={createDate('2024-03-31')}
+        onStartDateChange={jest.fn()}
+        onEndDateChange={jest.fn()}
+      />,
+      { wrapper: Wrapper },
+    )
+    const inputs = getInputs(container)
+    expect(inputs[0].value).toBe('03/01/2024')
+    expect(inputs[1].value).toBe('03/31/2024')
+  })
+
+  it('honors custom start/end date labels', () => {
+    const { container } = render(
+      <GluuDatePicker
+        mode="range"
+        startDate={null}
+        endDate={null}
+        startDateLabel="From"
+        endDateLabel="To"
+        onStartDateChange={jest.fn()}
+        onEndDateChange={jest.fn()}
+      />,
+      { wrapper: Wrapper },
+    )
+    const labels = getFieldLabels(container)
+    expect(labels).toContain('From')
+    expect(labels).toContain('To')
+  })
+
+  it('fires onStartDateChange when a day is picked in the start calendar', () => {
+    const onStartDateChange = jest.fn()
+    render(
+      <GluuDatePicker
+        mode="range"
+        startDate={createDate('2024-04-01')}
+        endDate={null}
+        onStartDateChange={onStartDateChange}
+        onEndDateChange={jest.fn()}
+      />,
+      { wrapper: Wrapper },
+    )
+    openCalendarAndPickDay('15')
+    expect(onStartDateChange).toHaveBeenCalled()
+  })
+
+  it('renders title labels (not field labels) when labelAsTitle is set', () => {
+    const { container } = render(
+      <GluuDatePicker
+        mode="range"
+        startDate={null}
+        endDate={null}
+        labelAsTitle
+        layout="row"
+        onStartDateChange={jest.fn()}
+        onEndDateChange={jest.fn()}
+      />,
+      { wrapper: Wrapper },
+    )
+    // labelAsTitle renders the labels as standalone "Start Date:" / "End Date:" text
+    expect(screen.getByText('Start Date:')).toBeInTheDocument()
+    expect(screen.getByText('End Date:')).toBeInTheDocument()
+    // and the field <label> elements are dropped
+    expect(container.querySelectorAll('label')).toHaveLength(0)
+  })
+})
diff --git a/admin-ui/app/components/GluuDropdown/__tests__/GluuDropdown.test.tsx b/admin-ui/app/components/GluuDropdown/__tests__/GluuDropdown.test.tsx
new file mode 100644
index 000000000..43286be8c
--- /dev/null
+++ b/admin-ui/app/components/GluuDropdown/__tests__/GluuDropdown.test.tsx
@@ -0,0 +1,217 @@
+import React from 'react'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { GluuDropdown } from '@/components/GluuDropdown/GluuDropdown'
+import type { GluuDropdownOption } from '@/components/GluuDropdown/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const options: GluuDropdownOption<string>[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+]
+
+const getTrigger = (): HTMLElement => screen.getByRole('button', { name: /Choose/i })
+
+describe('GluuDropdown', () => {
+  it('renders the trigger and keeps the menu closed initially', () => {
+    render(<GluuDropdown trigger="Choose fruit" options={options} />, { wrapper: Wrapper })
+
+    expect(getTrigger()).toBeInTheDocument()
+    expect(getTrigger()).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('opens the menu and shows all options when the trigger is clicked', () => {
+    render(<GluuDropdown trigger="Choose fruit" options={options} />, { wrapper: Wrapper })
+
+    fireEvent.click(getTrigger())
+
+    const listbox = screen.getByRole('listbox')
+    expect(getTrigger()).toHaveAttribute('aria-expanded', 'true')
+    const renderedOptions = within(listbox).getAllByRole('option')
+    expect(renderedOptions).toHaveLength(options.length)
+    expect(within(listbox).getByText('Apple')).toBeInTheDocument()
+    expect(within(listbox).getByText('Banana')).toBeInTheDocument()
+    expect(within(listbox).getByText('Cherry')).toBeInTheDocument()
+  })
+
+  it('calls onSelect with the chosen value and option when an option is clicked', () => {
+    const onSelect = jest.fn()
+    render(<GluuDropdown trigger="Choose fruit" options={options} onSelect={onSelect} />, {
+      wrapper: Wrapper,
+    })
+
+    fireEvent.click(getTrigger())
+    fireEvent.click(screen.getByText('Banana'))
+
+    expect(onSelect).toHaveBeenCalledTimes(1)
+    expect(onSelect).toHaveBeenCalledWith('banana', options[1])
+  })
+
+  it('closes the menu after selection by default (closeOnSelect)', () => {
+    render(<GluuDropdown trigger="Choose fruit" options={options} />, { wrapper: Wrapper })
+
+    fireEvent.click(getTrigger())
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Cherry'))
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('keeps the menu open after selection when closeOnSelect is false', () => {
+    render(<GluuDropdown trigger="Choose fruit" options={options} closeOnSelect={false} />, {
+      wrapper: Wrapper,
+    })
+
+    fireEvent.click(getTrigger())
+    fireEvent.click(screen.getByText('Apple'))
+
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+  })
+
+  it('marks the selected option via aria-selected from selectedValue', () => {
+    render(<GluuDropdown trigger="Choose fruit" options={options} selectedValue="banana" />, {
+      wrapper: Wrapper,
+    })
+
+    fireEvent.click(getTrigger())
+    const selectedOption = within(screen.getByRole('listbox'))
+      .getAllByRole('option')
+      .find((opt) => opt.getAttribute('aria-selected') === 'true')
+
+    expect(selectedOption).toBeDefined()
+    expect(selectedOption).toHaveTextContent('Banana')
+  })
+
+  it('does not call onSelect for a disabled option', () => {
+    const onSelect = jest.fn()
+    const withDisabled: GluuDropdownOption<string>[] = [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana', disabled: true },
+    ]
+    render(<GluuDropdown trigger="Choose fruit" options={withDisabled} onSelect={onSelect} />, {
+      wrapper: Wrapper,
+    })
+
+    fireEvent.click(getTrigger())
+    fireEvent.click(screen.getByText('Banana'))
+
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('does not open when disabled and never calls onOpenChange', () => {
+    const onOpenChange = jest.fn()
+    render(
+      <GluuDropdown
+        trigger="Choose fruit"
+        options={options}
+        disabled
+        onOpenChange={onOpenChange}
+      />,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(getTrigger())
+
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+    expect(getTrigger()).toHaveAttribute('aria-disabled', 'true')
+    expect(onOpenChange).not.toHaveBeenCalled()
+  })
+
+  it('fires onOpenChange when toggling open and closed', () => {
+    const onOpenChange = jest.fn()
+    render(
+      <GluuDropdown trigger="Choose fruit" options={options} onOpenChange={onOpenChange} />,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(getTrigger())
+    expect(onOpenChange).toHaveBeenLastCalledWith(true)
+
+    fireEvent.click(getTrigger())
+    expect(onOpenChange).toHaveBeenLastCalledWith(false)
+  })
+
+  it('filters options when searchable and a query is typed', () => {
+    render(<GluuDropdown trigger="Choose fruit" options={options} searchable />, {
+      wrapper: Wrapper,
+    })
+
+    fireEvent.click(getTrigger())
+    const searchBox = screen.getByRole('searchbox')
+    fireEvent.change(searchBox, { target: { value: 'ban' } })
+
+    const listbox = screen.getByRole('listbox')
+    expect(within(listbox).getByText('Banana')).toBeInTheDocument()
+    expect(within(listbox).queryByText('Apple')).not.toBeInTheDocument()
+    expect(within(listbox).queryByText('Cherry')).not.toBeInTheDocument()
+  })
+
+  it('shows the empty message when the search matches nothing', () => {
+    render(
+      <GluuDropdown
+        trigger="Choose fruit"
+        options={options}
+        searchable
+        emptyMessage="No matches"
+      />,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(getTrigger())
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'zzz' } })
+
+    expect(screen.getByText('No matches')).toBeInTheDocument()
+  })
+
+  it('renders the empty message when there are no options', () => {
+    render(
+      <GluuDropdown trigger="Choose fruit" options={[]} emptyMessage="Nothing available" />,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(getTrigger())
+
+    expect(screen.getByText('Nothing available')).toBeInTheDocument()
+  })
+
+  it('respects controlled isOpen and does not toggle its own open state', () => {
+    const onOpenChange = jest.fn()
+    render(
+      <GluuDropdown
+        trigger="Choose fruit"
+        options={options}
+        controlled
+        isOpen
+        onOpenChange={onOpenChange}
+      />,
+      { wrapper: Wrapper },
+    )
+
+    // controlled + isOpen => menu visible from the start
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+
+    // clicking requests a state change but the menu stays open (parent owns isOpen)
+    fireEvent.click(getTrigger())
+    expect(onOpenChange).toHaveBeenLastCalledWith(false)
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+  })
+
+  it('uses renderTrigger to render a custom trigger reflecting open state', () => {
+    render(
+      <GluuDropdown
+        options={options}
+        renderTrigger={(isOpen) => <span>{isOpen ? 'Opened' : 'Closed'}</span>}
+      />,
+      { wrapper: Wrapper },
+    )
+
+    expect(screen.getByText('Closed')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button'))
+    expect(screen.getByText('Opened')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/components/GluuDynamicList/__tests__/GluuDynamicList.test.tsx b/admin-ui/app/components/GluuDynamicList/__tests__/GluuDynamicList.test.tsx
new file mode 100644
index 000000000..1f97caf77
--- /dev/null
+++ b/admin-ui/app/components/GluuDynamicList/__tests__/GluuDynamicList.test.tsx
@@ -0,0 +1,138 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { GluuDynamicList } from '@/components/GluuDynamicList'
+import type { GluuDynamicListItem, GluuDynamicListProps } from '@/components/GluuDynamicList/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const baseProps: GluuDynamicListProps = {
+  title: 'Attributes',
+  items: [],
+  valuePlaceholder: 'Value',
+  keyPlaceholder: 'Key',
+  addButtonLabel: 'Add',
+  removeButtonLabel: 'Remove',
+  onAdd: jest.fn(),
+  onRemove: jest.fn(),
+  onChange: jest.fn(),
+}
+
+const renderList = (overrides: Partial<GluuDynamicListProps> = {}) =>
+  render(<GluuDynamicList {...baseProps} {...overrides} />, { wrapper: Wrapper })
+
+const getRowInputs = (): HTMLInputElement[] =>
+  screen
+    .queryAllByRole('textbox')
+    .filter((el): el is HTMLInputElement =>
+      el.classList.contains('gluu-dynamic-list-input'),
+    )
+
+describe('GluuDynamicList', () => {
+  it('renders the title and add button when there are no items', () => {
+    renderList()
+    expect(screen.getByText('Attributes')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Add/i })).toBeInTheDocument()
+    expect(getRowInputs()).toHaveLength(0)
+  })
+
+  it('renders existing pair items from props with key and value inputs', () => {
+    const items: GluuDynamicListItem[] = [
+      { id: '1', key: 'k1', value: 'v1' },
+      { id: '2', key: 'k2', value: 'v2' },
+    ]
+    renderList({ items })
+    // pair mode -> 2 inputs per row
+    expect(getRowInputs()).toHaveLength(items.length * 2)
+    expect(screen.getByDisplayValue('k1')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('v1')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('k2')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('v2')).toBeInTheDocument()
+  })
+
+  it('renders a single input per row in single mode', () => {
+    const items: GluuDynamicListItem[] = [
+      { id: '1', value: 'a' },
+      { id: '2', value: 'b' },
+    ]
+    renderList({ mode: 'single', items })
+    expect(getRowInputs()).toHaveLength(items.length)
+  })
+
+  it('calls onAdd when the add button is clicked', () => {
+    const onAdd = jest.fn()
+    const items: GluuDynamicListItem[] = [{ id: '1', key: 'k', value: 'v' }]
+    renderList({ items, onAdd })
+    fireEvent.click(screen.getByRole('button', { name: /Add/i }))
+    expect(onAdd).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables the add button when an item is incomplete', () => {
+    const items: GluuDynamicListItem[] = [{ id: '1', key: 'k', value: '' }]
+    renderList({ items })
+    expect(screen.getByRole('button', { name: /Add/i })).toBeDisabled()
+  })
+
+  it('calls onRemove with the item index when a remove button is clicked', () => {
+    const onRemove = jest.fn()
+    const items: GluuDynamicListItem[] = [
+      { id: '1', key: 'k1', value: 'v1' },
+      { id: '2', key: 'k2', value: 'v2' },
+    ]
+    renderList({ items, onRemove })
+    const removeButtons = screen.getAllByRole('button', { name: /Remove/i })
+    expect(removeButtons).toHaveLength(items.length)
+    fireEvent.click(removeButtons[1])
+    expect(onRemove).toHaveBeenCalledWith(1)
+  })
+
+  it('calls onChange with field "key" when editing the key input', () => {
+    const onChange = jest.fn()
+    const items: GluuDynamicListItem[] = [{ id: '1', key: 'k1', value: 'v1' }]
+    renderList({ items, onChange })
+    const keyInput = screen.getByDisplayValue('k1')
+    fireEvent.change(keyInput, { target: { value: 'k1-edited' } })
+    expect(onChange).toHaveBeenCalledWith(0, 'key', 'k1-edited')
+  })
+
+  it('calls onChange with field "value" when editing the value input', () => {
+    const onChange = jest.fn()
+    const items: GluuDynamicListItem[] = [{ id: '1', value: 'v1' }]
+    renderList({ mode: 'single', items, onChange })
+    const valueInput = screen.getByDisplayValue('v1')
+    fireEvent.change(valueInput, { target: { value: 'v1-edited' } })
+    expect(onChange).toHaveBeenCalledWith(0, 'value', 'v1-edited')
+  })
+
+  it('renders the label with a required marker when required', () => {
+    renderList({ label: 'My List', required: true })
+    expect(screen.getByText('My List')).toBeInTheDocument()
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+
+  it('renders the error message only when showError is set', () => {
+    const { rerender } = renderList({ showError: false, errorMessage: 'Bad input' })
+    expect(screen.queryByText('Bad input')).not.toBeInTheDocument()
+    rerender(<GluuDynamicList {...baseProps} showError errorMessage="Bad input" />)
+    expect(screen.getByText('Bad input')).toBeInTheDocument()
+  })
+
+  it('renders a per-item error in single mode via getItemError', () => {
+    const items: GluuDynamicListItem[] = [{ id: '1', value: 'v1' }]
+    renderList({
+      mode: 'single',
+      items,
+      getItemError: () => 'Item invalid',
+    })
+    expect(screen.getByText('Item invalid')).toBeInTheDocument()
+  })
+
+  it('disables row inputs and remove buttons when disabled', () => {
+    const items: GluuDynamicListItem[] = [{ id: '1', key: 'k', value: 'v' }]
+    renderList({ items, disabled: true })
+    getRowInputs().forEach((input) => expect(input).toBeDisabled())
+    expect(screen.getByRole('button', { name: /Remove/i })).toBeDisabled()
+  })
+})
diff --git a/admin-ui/app/components/GluuFilterPopover/__tests__/GluuFilterPopover.test.tsx b/admin-ui/app/components/GluuFilterPopover/__tests__/GluuFilterPopover.test.tsx
new file mode 100644
index 000000000..2cdabf682
--- /dev/null
+++ b/admin-ui/app/components/GluuFilterPopover/__tests__/GluuFilterPopover.test.tsx
@@ -0,0 +1,119 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import GluuFilterPopover from '@/components/GluuFilterPopover/GluuFilterPopover'
+import type { FilterField, GluuFilterPopoverProps } from '@/components/GluuFilterPopover/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const makeProps = (overrides: Partial<GluuFilterPopoverProps> = {}): GluuFilterPopoverProps => ({
+  open: true,
+  fields: [],
+  onApply: jest.fn(),
+  onCancel: jest.fn(),
+  ...overrides,
+})
+
+const renderPopover = (overrides: Partial<GluuFilterPopoverProps> = {}) => {
+  const props = makeProps(overrides)
+  return { props, ...render(<GluuFilterPopover {...props} />, { wrapper: Wrapper }) }
+}
+
+describe('GluuFilterPopover', () => {
+  it('renders nothing when closed', () => {
+    renderPopover({ open: false, applyLabel: 'Apply', cancelLabel: 'Cancel' })
+    expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument()
+  })
+
+  it('renders apply and cancel buttons when open', () => {
+    renderPopover({ applyLabel: 'Apply', cancelLabel: 'Cancel' })
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+
+  it('renders a text field and fires onChange while typing', () => {
+    const onChange = jest.fn()
+    const fields: FilterField[] = [
+      { key: 'name', label: 'Name', value: '', type: 'text', placeholder: 'Search name', onChange },
+    ]
+    renderPopover({ fields })
+    expect(screen.getByText('Name')).toBeInTheDocument()
+    const input = screen.getByPlaceholderText('Search name')
+    fireEvent.change(input, { target: { value: 'abc' } })
+    expect(onChange).toHaveBeenCalledWith('abc')
+  })
+
+  it('renders a select field with its options and fires onChange on selection', () => {
+    const onChange = jest.fn()
+    const fields: FilterField[] = [
+      {
+        key: 'status',
+        label: 'Status',
+        value: 'active',
+        type: 'select',
+        options: [
+          { value: 'active', label: 'Active' },
+          { value: 'inactive', label: 'Inactive' },
+        ],
+        onChange,
+      },
+    ]
+    renderPopover({ fields })
+    const select = screen.getByRole('combobox')
+    expect(screen.getByRole('option', { name: 'Active' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Inactive' })).toBeInTheDocument()
+    fireEvent.change(select, { target: { value: 'inactive' } })
+    expect(onChange).toHaveBeenCalledWith('inactive')
+  })
+
+  it('calls onApply when the apply button is clicked', () => {
+    const onApply = jest.fn()
+    renderPopover({ applyLabel: 'Apply', onApply })
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onCancel when the cancel button is clicked', () => {
+    const onCancel = jest.fn()
+    renderPopover({ cancelLabel: 'Cancel', onCancel })
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables the apply button when applyDisabled is set', () => {
+    renderPopover({ applyLabel: 'Apply', applyDisabled: true })
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled()
+  })
+
+  it('applies on Enter and cancels on Escape via keyboard handlers', () => {
+    const onApply = jest.fn()
+    const onCancel = jest.fn()
+    renderPopover({ onApply, onCancel })
+    fireEvent.keyDown(document, { key: 'Enter' })
+    expect(onApply).toHaveBeenCalledTimes(1)
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not apply on Enter when applyDisabled is set', () => {
+    const onApply = jest.fn()
+    renderPopover({ onApply, applyDisabled: true })
+    fireEvent.keyDown(document, { key: 'Enter' })
+    expect(onApply).not.toHaveBeenCalled()
+  })
+
+  it('calls onCancel when clicking outside the popover', () => {
+    const onCancel = jest.fn()
+    renderPopover({ onCancel })
+    fireEvent.mouseDown(document.body)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders custom children inside the popover', () => {
+    renderPopover({ children: <span>Extra content</span> })
+    expect(screen.getByText('Extra content')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/components/GluuModalShell/__tests__/GluuModalShell.test.tsx b/admin-ui/app/components/GluuModalShell/__tests__/GluuModalShell.test.tsx
new file mode 100644
index 000000000..e73b249e5
--- /dev/null
+++ b/admin-ui/app/components/GluuModalShell/__tests__/GluuModalShell.test.tsx
@@ -0,0 +1,113 @@
+import React from 'react'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { GluuModalShell } from '@/components/GluuModalShell'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+describe('GluuModalShell', () => {
+  it('renders the dialog, children and close controls via a portal on document.body', () => {
+    render(
+      <GluuModalShell onClose={jest.fn()} ariaLabelledBy="modal-title">
+        <h2 id="modal-title">My Modal Title</h2>
+        <p>Modal body content</p>
+      </GluuModalShell>,
+      { wrapper: Wrapper },
+    )
+
+    const dialog = screen.getByRole('dialog')
+    expect(dialog).toBeInTheDocument()
+    expect(dialog).toHaveAttribute('aria-labelledby', 'modal-title')
+    expect(within(dialog).getByText('My Modal Title')).toBeInTheDocument()
+    expect(within(dialog).getByText('Modal body content')).toBeInTheDocument()
+    // portal target is document.body
+    expect(document.body.contains(dialog)).toBe(true)
+  })
+
+  it('calls onClose when the dialog close button is clicked', () => {
+    const onClose = jest.fn()
+    render(
+      <GluuModalShell onClose={onClose}>
+        <p>Body</p>
+      </GluuModalShell>,
+      { wrapper: Wrapper },
+    )
+
+    const closeButton = within(screen.getByRole('dialog')).getByRole('button', { name: /close/i })
+    fireEvent.click(closeButton)
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders a clickable overlay button that calls onClose when closeOnOverlayClick is true', () => {
+    const onClose = jest.fn()
+    render(
+      <GluuModalShell onClose={onClose} closeOnOverlayClick>
+        <p>Body</p>
+      </GluuModalShell>,
+      { wrapper: Wrapper },
+    )
+
+    // The overlay is a button outside the dialog; pick the close-labelled button that is not inside the dialog.
+    const dialog = screen.getByRole('dialog')
+    const overlay = screen
+      .getAllByRole('button', { name: /close/i })
+      .find((btn) => !dialog.contains(btn))
+
+    expect(overlay).toBeDefined()
+    fireEvent.click(overlay as HTMLElement)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders a non-interactive overlay when closeOnOverlayClick is false', () => {
+    const onClose = jest.fn()
+    render(
+      <GluuModalShell onClose={onClose} closeOnOverlayClick={false}>
+        <p>Body</p>
+      </GluuModalShell>,
+      { wrapper: Wrapper },
+    )
+
+    const dialog = screen.getByRole('dialog')
+    // Only the dialog's own close button remains; there is no overlay button.
+    const closeButtons = screen
+      .getAllByRole('button', { name: /close/i })
+      .filter((btn) => dialog.contains(btn))
+    const overlayButtons = screen
+      .queryAllByRole('button', { name: /close/i })
+      .filter((btn) => !dialog.contains(btn))
+
+    expect(closeButtons).toHaveLength(1)
+    expect(overlayButtons).toHaveLength(0)
+  })
+
+  it('closes on Escape key pressed inside the dialog', () => {
+    const onClose = jest.fn()
+    render(
+      <GluuModalShell onClose={onClose}>
+        <p>Body</p>
+      </GluuModalShell>,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' })
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onClose when a click originates inside the dialog content', () => {
+    const onClose = jest.fn()
+    render(
+      <GluuModalShell onClose={onClose}>
+        <button type="button">Inner action</button>
+      </GluuModalShell>,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(screen.getByText('Inner action'))
+
+    expect(onClose).not.toHaveBeenCalled()
+  })
+})
diff --git a/admin-ui/app/components/GluuSearchToolbar/__tests__/GluuRefreshButton.test.tsx b/admin-ui/app/components/GluuSearchToolbar/__tests__/GluuRefreshButton.test.tsx
new file mode 100644
index 000000000..5a50a336c
--- /dev/null
+++ b/admin-ui/app/components/GluuSearchToolbar/__tests__/GluuRefreshButton.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import GluuRefreshButton from '@/components/GluuSearchToolbar/GluuRefreshButton'
+import type { GluuRefreshButtonProps } from '@/components/GluuSearchToolbar/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const renderRefreshButton = (props: Partial<GluuRefreshButtonProps> = {}) => {
+  const onClick = props.onClick ?? jest.fn()
+  const result = render(<GluuRefreshButton onClick={onClick} {...props} />, { wrapper: Wrapper })
+  return { onClick, ...result }
+}
+
+describe('GluuRefreshButton', () => {
+  it('renders a button with the default refresh label', () => {
+    renderRefreshButton()
+    expect(screen.getByRole('button', { name: /Refresh/i })).toBeInTheDocument()
+  })
+
+  it('renders a custom label when provided', () => {
+    renderRefreshButton({ label: 'Reload list' })
+    expect(screen.getByRole('button', { name: /Reload list/i })).toBeInTheDocument()
+  })
+
+  it('calls onClick when clicked', () => {
+    const { onClick } = renderRefreshButton()
+    fireEvent.click(screen.getByRole('button', { name: /Refresh/i }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('is disabled and does not fire onClick when disabled', () => {
+    const { onClick } = renderRefreshButton({ disabled: true })
+    const button = screen.getByRole('button', { name: /Refresh/i })
+    expect(button).toBeDisabled()
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('is disabled while loading', () => {
+    const { onClick } = renderRefreshButton({ loading: true })
+    const button = screen.getByRole('button', { name: /Refresh/i })
+    expect(button).toBeDisabled()
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('applies the className prop to the button', () => {
+    renderRefreshButton({ className: 'my-refresh' })
+    expect(screen.getByRole('button', { name: /Refresh/i })).toHaveClass('my-refresh')
+  })
+})
diff --git a/admin-ui/app/components/GluuSearchToolbar/__tests__/GluuSearchToolbar.test.tsx b/admin-ui/app/components/GluuSearchToolbar/__tests__/GluuSearchToolbar.test.tsx
new file mode 100644
index 000000000..b9b24a6bd
--- /dev/null
+++ b/admin-ui/app/components/GluuSearchToolbar/__tests__/GluuSearchToolbar.test.tsx
@@ -0,0 +1,187 @@
+import React from 'react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import GluuSearchToolbar from '@/components/GluuSearchToolbar/GluuSearchToolbar'
+import type { FilterDef, FilterOption } from '@/components/GluuSearchToolbar/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+describe('GluuSearchToolbar', () => {
+  it('renders a search input with the provided placeholder', () => {
+    render(<GluuSearchToolbar searchPlaceholder="Find users" />, { wrapper: Wrapper })
+    const input = screen.getByPlaceholderText('Find users')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'text')
+  })
+
+  it('updates the input value as the user types', () => {
+    render(<GluuSearchToolbar searchPlaceholder="Find users" />, { wrapper: Wrapper })
+    const input = screen.getByPlaceholderText<HTMLInputElement>('Find users')
+    fireEvent.change(input, { target: { value: 'alice' } })
+    expect(input.value).toBe('alice')
+  })
+
+  it('calls onSearch and onSearchSubmit when Enter is pressed', () => {
+    const onSearch = jest.fn()
+    const onSearchSubmit = jest.fn()
+    render(
+      <GluuSearchToolbar
+        searchPlaceholder="Find users"
+        onSearch={onSearch}
+        onSearchSubmit={onSearchSubmit}
+      />,
+      { wrapper: Wrapper },
+    )
+    const input = screen.getByPlaceholderText('Find users')
+    fireEvent.change(input, { target: { value: 'bob' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onSearch).toHaveBeenCalledWith('bob')
+    expect(onSearchSubmit).toHaveBeenCalledWith('bob')
+  })
+
+  it('does not fire onSearch for non-Enter keys', () => {
+    const onSearch = jest.fn()
+    render(<GluuSearchToolbar searchPlaceholder="Find users" onSearch={onSearch} />, {
+      wrapper: Wrapper,
+    })
+    const input = screen.getByPlaceholderText('Find users')
+    fireEvent.change(input, { target: { value: 'bob' } })
+    fireEvent.keyDown(input, { key: 'a' })
+    expect(onSearch).not.toHaveBeenCalled()
+  })
+
+  it('fires the debounced onSearch when searchOnType is enabled', () => {
+    jest.useFakeTimers()
+    const onSearch = jest.fn()
+    try {
+      render(
+        <GluuSearchToolbar
+          searchPlaceholder="Find users"
+          searchOnType
+          searchDebounceMs={300}
+          onSearch={onSearch}
+        />,
+        { wrapper: Wrapper },
+      )
+      const input = screen.getByPlaceholderText('Find users')
+      fireEvent.change(input, { target: { value: 'carol' } })
+      expect(onSearch).not.toHaveBeenCalled()
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+      expect(onSearch).toHaveBeenCalledWith('carol')
+    } finally {
+      jest.useRealTimers()
+    }
+  })
+
+  it('disables the search input when disabled is true', () => {
+    render(<GluuSearchToolbar searchPlaceholder="Find users" disabled />, { wrapper: Wrapper })
+    expect(screen.getByPlaceholderText('Find users')).toBeDisabled()
+  })
+
+  it('renders a select instead of an input when selectOptions are provided', () => {
+    const options: FilterOption[] = [
+      { label: 'Active', value: 'active' },
+      { label: 'Inactive', value: 'inactive' },
+    ]
+    const onSelectChange = jest.fn()
+    render(
+      <GluuSearchToolbar
+        selectOptions={options}
+        searchValue="active"
+        onSelectChange={onSelectChange}
+        selectPlaceholder="Pick one"
+      />,
+      { wrapper: Wrapper },
+    )
+    const select = screen.getByRole('combobox')
+    expect(select).toBeInTheDocument()
+    fireEvent.change(select, { target: { value: 'inactive' } })
+    expect(onSelectChange).toHaveBeenCalledWith('inactive')
+  })
+
+  it('renders filter selects and fires their onChange', () => {
+    const onChange = jest.fn()
+    const filters: FilterDef[] = [
+      {
+        key: 'status',
+        label: 'Status',
+        value: 'all',
+        options: [
+          { label: 'All', value: 'all' },
+          { label: 'Enabled', value: 'enabled' },
+        ],
+        onChange,
+      },
+    ]
+    render(<GluuSearchToolbar searchPlaceholder="Find" filters={filters} />, { wrapper: Wrapper })
+    const filterSelect = screen.getByLabelText('Status')
+    fireEvent.change(filterSelect, { target: { value: 'enabled' } })
+    expect(onChange).toHaveBeenCalledWith('enabled')
+  })
+
+  it('renders the refresh button and calls onRefresh when clicked', () => {
+    const onRefresh = jest.fn()
+    render(<GluuSearchToolbar searchPlaceholder="Find" onRefresh={onRefresh} />, {
+      wrapper: Wrapper,
+    })
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThan(0)
+    fireEvent.click(buttons[0])
+    expect(onRefresh).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the primary action and calls its onClick', () => {
+    const onClick = jest.fn()
+    render(
+      <GluuSearchToolbar
+        searchPlaceholder="Find"
+        primaryAction={{ label: 'Apply', onClick }}
+      />,
+      { wrapper: Wrapper },
+    )
+    const applyButton = screen.getByRole('button', { name: /Apply/i })
+    fireEvent.click(applyButton)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('falls back to onSearch when the primary action has no onClick', () => {
+    const onSearch = jest.fn()
+    const onSearchSubmit = jest.fn()
+    render(
+      <GluuSearchToolbar
+        searchPlaceholder="Find"
+        onSearch={onSearch}
+        onSearchSubmit={onSearchSubmit}
+        primaryAction={{ label: 'Go' }}
+      />,
+      { wrapper: Wrapper },
+    )
+    const input = screen.getByPlaceholderText('Find')
+    fireEvent.change(input, { target: { value: 'dave' } })
+    fireEvent.click(screen.getByRole('button', { name: /Go/i }))
+    expect(onSearch).toHaveBeenCalledWith('dave')
+    expect(onSearchSubmit).toHaveBeenCalledWith('dave')
+  })
+
+  it('renders a custom dateRangeSlot', () => {
+    render(
+      <GluuSearchToolbar
+        searchPlaceholder="Find"
+        dateRangeSlot={<div data-testid="custom-slot">slot</div>}
+      />,
+      { wrapper: Wrapper },
+    )
+    expect(screen.getByTestId('custom-slot')).toBeInTheDocument()
+  })
+
+  it('renders a search label when provided', () => {
+    render(<GluuSearchToolbar searchPlaceholder="Find" searchLabel="Search users" />, {
+      wrapper: Wrapper,
+    })
+    expect(screen.getByText('Search users')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/components/LicenseScreens/__tests__/ApiKey.test.tsx b/admin-ui/app/components/LicenseScreens/__tests__/ApiKey.test.tsx
new file mode 100644
index 000000000..72d8dcd6b
--- /dev/null
+++ b/admin-ui/app/components/LicenseScreens/__tests__/ApiKey.test.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import ApiKey from '@/components/LicenseScreens/ApiKey'
+
+type LicenseState = {
+  error: string
+  isLoading: boolean
+  generatingTrialKey: boolean
+}
+
+const defaultState: LicenseState = {
+  error: '',
+  isLoading: false,
+  generatingTrialKey: false,
+}
+
+const createStore = (licenseState: LicenseState = defaultState) =>
+  configureStore({
+    reducer: combineReducers({
+      licenseReducer: (state = licenseState) => state,
+    }),
+  })
+
+const renderApiKey = (store: ReturnType<typeof createStore>) =>
+  render(
+    <AppTestWrapper>
+      <Provider store={store}>
+        <ApiKey />
+      </Provider>
+    </AppTestWrapper>,
+  )
+
+describe('ApiKey', () => {
+  it('renders the welcome title', () => {
+    renderApiKey(createStore())
+
+    expect(screen.getByText('Welcome to Admin UI')).toBeInTheDocument()
+  })
+
+  it('renders the logo image', () => {
+    renderApiKey(createStore())
+
+    const logo = screen.getByAltText('Logo')
+    expect(logo).toBeInTheDocument()
+    expect(logo.tagName).toBe('IMG')
+  })
+
+  it('renders the embedded GenerateLicenseCard with its trial button', () => {
+    renderApiKey(createStore())
+
+    expect(screen.getByText('Free Trial')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Start 30 days trial/i })).toBeInTheDocument()
+  })
+
+  it('displays the server error message when present', () => {
+    renderApiKey(createStore({ ...defaultState, error: 'Invalid license key' }))
+
+    expect(screen.getByText('Invalid license key')).toBeInTheDocument()
+  })
+
+  it('does not show an error message when error is empty', () => {
+    renderApiKey(createStore())
+
+    expect(screen.queryByText('Invalid license key')).not.toBeInTheDocument()
+  })
+
+  it('blocks the loader while isLoading is true', () => {
+    renderApiKey(createStore({ ...defaultState, isLoading: true }))
+
+    expect(document.querySelector('[aria-busy="true"]')).toBeInTheDocument()
+  })
+
+  it('blocks the loader while generatingTrialKey is true', () => {
+    renderApiKey(createStore({ ...defaultState, generatingTrialKey: true }))
+
+    expect(document.querySelector('[aria-busy="true"]')).toBeInTheDocument()
+  })
+
+  it('does not block the loader in the idle state', () => {
+    renderApiKey(createStore())
+
+    expect(document.querySelector('[aria-busy="true"]')).not.toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/components/LicenseScreens/__tests__/GenerateLicenseCard.test.tsx b/admin-ui/app/components/LicenseScreens/__tests__/GenerateLicenseCard.test.tsx
new file mode 100644
index 000000000..2cce26b0b
--- /dev/null
+++ b/admin-ui/app/components/LicenseScreens/__tests__/GenerateLicenseCard.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GenerateLicenseCard from '@/components/LicenseScreens/GenerateLicenseCard'
+
+type LicenseState = {
+  generatingTrialKey: boolean
+}
+
+const createStore = (licenseState: LicenseState) =>
+  configureStore({
+    reducer: combineReducers({
+      licenseReducer: (state = licenseState) => state,
+    }),
+  })
+
+const renderCard = (store: ReturnType<typeof createStore>) =>
+  render(
+    <AppTestWrapper>
+      <Provider store={store}>
+        <GenerateLicenseCard />
+      </Provider>
+    </AppTestWrapper>,
+  )
+
+describe('GenerateLicenseCard', () => {
+  it('renders the card title and description', () => {
+    const store = createStore({ generatingTrialKey: false })
+    renderCard(store)
+
+    expect(screen.getByText('Free Trial')).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        'Start your free trial to manage and configure your Auth Server using simplified web interface.',
+      ),
+    ).toBeInTheDocument()
+  })
+
+  it('renders the generate button with the default (idle) label', () => {
+    const store = createStore({ generatingTrialKey: false })
+    renderCard(store)
+
+    const button = screen.getByRole('button', { name: /Start 30 days trial/i })
+    expect(button).toBeInTheDocument()
+    expect(button).not.toBeDisabled()
+  })
+
+  it('dispatches generateTrialLicense when the button is clicked', () => {
+    const store = createStore({ generatingTrialKey: false })
+    const dispatchSpy = jest.spyOn(store, 'dispatch')
+    renderCard(store)
+
+    fireEvent.click(screen.getByRole('button', { name: /Start 30 days trial/i }))
+
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ type: expect.stringContaining('generateTrialLicense') }),
+    )
+  })
+
+  it('disables the button while a trial key is being generated', () => {
+    const store = createStore({ generatingTrialKey: true })
+    renderCard(store)
+
+    const button = screen.getByRole('button', { name: /Generating please wait/i })
+    expect(button).toBeDisabled()
+  })
+
+  it('shows the generating label when generatingTrialKey is true', () => {
+    const store = createStore({ generatingTrialKey: true })
+    renderCard(store)
+
+    expect(screen.getByText('Generating please wait...')).toBeInTheDocument()
+    expect(screen.queryByText('Start 30 days trial')).not.toBeInTheDocument()
+  })
+
+  it('does not dispatch on render before any interaction', () => {
+    const store = createStore({ generatingTrialKey: false })
+    const dispatchSpy = jest.spyOn(store, 'dispatch')
+    renderCard(store)
+
+    expect(dispatchSpy).not.toHaveBeenCalled()
+  })
+})
diff --git a/admin-ui/app/components/ModalLayer/__tests__/ModalLayer.test.tsx b/admin-ui/app/components/ModalLayer/__tests__/ModalLayer.test.tsx
new file mode 100644
index 000000000..d1e58aa1b
--- /dev/null
+++ b/admin-ui/app/components/ModalLayer/__tests__/ModalLayer.test.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import ModalLayer from '@/components/ModalLayer/ModalLayer'
+import type { ModalLayerProps } from '@/components/ModalLayer/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const renderModalLayer = (props: Partial<ModalLayerProps> = {}) => {
+  const onClose = props.onClose ?? jest.fn()
+  const result = render(
+    <ModalLayer onClose={onClose} {...props}>
+      {props.children ?? <div data-testid="modal-content">Inner content</div>}
+    </ModalLayer>,
+    { wrapper: Wrapper },
+  )
+  return { onClose, ...result }
+}
+
+describe('ModalLayer', () => {
+  it('renders its children', () => {
+    renderModalLayer()
+    expect(screen.getByTestId('modal-content')).toBeInTheDocument()
+    expect(screen.getByText('Inner content')).toBeInTheDocument()
+  })
+
+  it('renders the overlay button with the close aria-label', () => {
+    renderModalLayer()
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+  })
+
+  it('calls onClose when the overlay is clicked', () => {
+    const { onClose } = renderModalLayer()
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClose when the scroll container itself is clicked', () => {
+    const { onClose } = renderModalLayer()
+    const presentation = screen.getByRole('presentation')
+    fireEvent.click(presentation)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onClose when clicking inside the content', () => {
+    const { onClose } = renderModalLayer()
+    fireEvent.click(screen.getByTestId('modal-content'))
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('applies the overlay base class', () => {
+    renderModalLayer()
+    const overlay = screen.getByRole('button', { name: 'Close' })
+    expect(overlay.className).not.toHaveLength(0)
+  })
+
+  it('appends the overlayClassName prop to the overlay class list', () => {
+    renderModalLayer({ overlayClassName: 'custom-overlay' })
+    const overlay = screen.getByRole('button', { name: 'Close' })
+    expect(overlay).toHaveClass('custom-overlay')
+  })
+})
diff --git a/admin-ui/app/components/Sidebar/__tests__/Sidebar.test.tsx b/admin-ui/app/components/Sidebar/__tests__/Sidebar.test.tsx
new file mode 100644
index 000000000..fd7233307
--- /dev/null
+++ b/admin-ui/app/components/Sidebar/__tests__/Sidebar.test.tsx
@@ -0,0 +1,150 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { Sidebar } from '@/components/Sidebar/Sidebar'
+import { PageConfigContext } from '@/components/Layout/PageConfigContext'
+import type { PageConfig } from '@/components/Layout/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const makePageConfig = (overrides: Partial<PageConfig> = {}): PageConfig => ({
+  sidebarCollapsed: false,
+  screenSize: '',
+  toggleSidebar: jest.fn(),
+  sidebarSlim: false,
+  animationsDisabled: false,
+  ...overrides,
+})
+
+type ProvidersProps = {
+  children: React.ReactNode
+  pageConfig: PageConfig
+}
+
+const Providers = ({ children, pageConfig }: ProvidersProps) => (
+  <AppTestWrapper>
+    <PageConfigContext.Provider value={pageConfig}>{children}</PageConfigContext.Provider>
+  </AppTestWrapper>
+)
+
+const renderSidebar = (
+  children: React.ReactNode,
+  pageConfig: PageConfig = makePageConfig({ animationsDisabled: true }),
+) => render(<Providers pageConfig={pageConfig}><Sidebar>{children}</Sidebar></Providers>)
+
+const getSidebar = (): HTMLElement => {
+  const el = document.querySelector<HTMLElement>('.sidebar.custom-sidebar-container')
+  if (!el) throw new Error('sidebar container not found')
+  return el
+}
+
+describe('Sidebar', () => {
+  it('renders its children inside the sidebar container', () => {
+    renderSidebar(<span>menu content</span>)
+
+    expect(screen.getByText('menu content')).toBeInTheDocument()
+    const sidebar = getSidebar()
+    expect(sidebar).toContainElement(screen.getByText('menu content'))
+  })
+
+  it('applies the base sidebar classes', () => {
+    renderSidebar(<span>child</span>)
+
+    const sidebar = getSidebar()
+    expect(sidebar).toHaveClass('sidebar')
+    expect(sidebar).toHaveClass('custom-sidebar-container')
+  })
+
+  it('does not add the slim class by default', () => {
+    renderSidebar(<span>child</span>)
+    expect(getSidebar()).not.toHaveClass('sidebar--slim')
+  })
+
+  it('adds the slim class from the slim prop', () => {
+    render(
+      <Providers pageConfig={makePageConfig({ animationsDisabled: true })}>
+        <Sidebar slim>
+          <span>slim</span>
+        </Sidebar>
+      </Providers>,
+    )
+    expect(getSidebar()).toHaveClass('sidebar--slim')
+  })
+
+  it('adds the slim class from pageConfig.sidebarSlim', () => {
+    render(
+      <Providers pageConfig={makePageConfig({ animationsDisabled: true, sidebarSlim: true })}>
+        <Sidebar>
+          <span>slim-cfg</span>
+        </Sidebar>
+      </Providers>,
+    )
+    expect(getSidebar()).toHaveClass('sidebar--slim')
+  })
+
+  it('adds the collapsed class from pageConfig.sidebarCollapsed', () => {
+    render(
+      <Providers pageConfig={makePageConfig({ animationsDisabled: true, sidebarCollapsed: true })}>
+        <Sidebar>
+          <span>collapsed</span>
+        </Sidebar>
+      </Providers>,
+    )
+    expect(getSidebar()).toHaveClass('sidebar--collapsed')
+  })
+
+  it('marks animations disabled when animationsDisabled prop is true', () => {
+    render(
+      <Providers pageConfig={makePageConfig()}>
+        <Sidebar animationsDisabled>
+          <span>no-anim</span>
+        </Sidebar>
+      </Providers>,
+    )
+
+    const sidebar = getSidebar()
+    expect(sidebar).toHaveClass('sidebar--animations-disabled')
+    expect(sidebar).not.toHaveClass('sidebar--animations-enabled')
+  })
+
+  it('marks animations disabled when pageConfig.animationsDisabled is true', () => {
+    render(
+      <Providers pageConfig={makePageConfig({ animationsDisabled: true })}>
+        <Sidebar>
+          <span>cfg-no-anim</span>
+        </Sidebar>
+      </Providers>,
+    )
+
+    const sidebar = getSidebar()
+    expect(sidebar).toHaveClass('sidebar--animations-disabled')
+    expect(sidebar).not.toHaveClass('sidebar--animations-enabled')
+  })
+
+  it('marks the entry animation complete immediately when animations are disabled', () => {
+    render(
+      <Providers pageConfig={makePageConfig({ animationsDisabled: true })}>
+        <Sidebar>
+          <span>done</span>
+        </Sidebar>
+      </Providers>,
+    )
+    expect(getSidebar()).toHaveClass('sidebar--animate-entry-complete')
+  })
+
+  it('enables animations when neither prop nor pageConfig disables them', () => {
+    render(
+      <Providers pageConfig={makePageConfig({ animationsDisabled: false })}>
+        <Sidebar>
+          <div className="sidebar__section">
+            <div className="sidebar-menu">
+              <div className="sidebar-menu__entry">entry</div>
+            </div>
+          </div>
+        </Sidebar>
+      </Providers>,
+    )
+
+    const sidebar = getSidebar()
+    expect(sidebar).toHaveClass('sidebar--animations-enabled')
+    expect(sidebar).not.toHaveClass('sidebar--animations-disabled')
+  })
+})
diff --git a/admin-ui/app/components/SidebarMenu/__tests__/SidebarMenu.test.tsx b/admin-ui/app/components/SidebarMenu/__tests__/SidebarMenu.test.tsx
new file mode 100644
index 000000000..c58346b20
--- /dev/null
+++ b/admin-ui/app/components/SidebarMenu/__tests__/SidebarMenu.test.tsx
@@ -0,0 +1,191 @@
+import React from 'react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { SidebarMenu, SidebarMenuItem } from '@/components/SidebarMenu'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+// The jsdom test URL (jest.config testEnvironmentOptions.url) resolves to pathname "/".
+const ACTIVE_PATH = '/'
+
+// SidebarMenu computes active state inside a setTimeout(0) scheduled from an effect,
+// so flush both timers and pending React work before asserting active styling.
+const flushActiveState = async (): Promise<void> => {
+  await act(async () => {
+    await new Promise<void>((resolve) => setTimeout(resolve, 0))
+  })
+}
+
+describe('SidebarMenu', () => {
+  it('renders leaf menu items with their titles', () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Dashboard" to="/dashboard" />
+        <SidebarMenuItem title="Settings" to="/settings" />
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('renders a leaf item as a navigable link pointing at its "to" target', () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Dashboard" to="/dashboard" />
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    const link = screen.getByRole('link', { name: /Dashboard/i })
+    expect(link).toHaveAttribute('href', '/dashboard')
+  })
+
+  it('renders an item as a router link, preferring "to" over "href"', () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Docs" to="/docs" href="https://example.com/docs" />
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    // When `to` is set it wins: the item renders a react-router Link to that path,
+    // not an external anchor.
+    const link = screen.getByRole('link', { name: /Docs/i })
+    expect(link).toHaveAttribute('href', '/docs')
+    expect(link).not.toHaveAttribute('target')
+  })
+
+  it('fires handleClick for a logout item and prevents navigation', () => {
+    const handleClick = jest.fn()
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Logout" to="logout" handleClick={handleClick} />
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    fireEvent.click(screen.getByRole('link', { name: /Logout/i }))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders nested children and applies the nested entry modifier class', () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Parent">
+          <SidebarMenuItem title="Child A" to="/child-a" />
+          <SidebarMenuItem title="Child B" to="/child-b" />
+        </SidebarMenuItem>
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    expect(screen.getByText('Parent')).toBeInTheDocument()
+    expect(screen.getByText('Child A')).toBeInTheDocument()
+    expect(screen.getByText('Child B')).toBeInTheDocument()
+
+    const parentLi = screen.getByText('Parent').closest('li')
+    expect(parentLi).not.toBeNull()
+    expect(parentLi?.className).toContain('sidebar-menu__entry--nested')
+  })
+
+  it('toggles the open state of a parent node when its toggle link is clicked', () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Parent">
+          <SidebarMenuItem title="Child A" to="/child-a" />
+        </SidebarMenuItem>
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    const parentLi = screen.getByText('Parent').closest('li')
+    expect(parentLi).not.toBeNull()
+    if (!parentLi) {
+      return
+    }
+    expect(parentLi.className).not.toContain('open')
+
+    // The parent's toggle is an <a> without href (so it has no link role); target it directly.
+    const toggle = (): HTMLElement => {
+      const anchor = screen.getByText('Parent').closest('a')
+      expect(anchor).not.toBeNull()
+      return anchor as HTMLElement
+    }
+    fireEvent.click(toggle())
+    expect(parentLi.className).toContain('open')
+
+    fireEvent.click(toggle())
+    expect(parentLi.className).not.toContain('open')
+  })
+
+  it('marks the entry matching the current location as active', async () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Home" to={ACTIVE_PATH} exact />
+        <SidebarMenuItem title="Other" to="/elsewhere" exact />
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    await flushActiveState()
+
+    const homeLi = screen.getByText('Home').closest('li')
+    const otherLi = screen.getByText('Other').closest('li')
+    expect(homeLi?.className).toContain('active')
+    expect(otherLi?.className).not.toContain('active')
+  })
+
+  it('applies the configured active class to the active parent toggle link', async () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Parent" sidebarMenuActiveClass="is-active">
+          <SidebarMenuItem title="Home" to={ACTIVE_PATH} exact />
+        </SidebarMenuItem>
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    await flushActiveState()
+
+    // Active state propagates up: the parent li is active and its toggle link gets the class.
+    const parentLi = screen.getByText('Parent').closest('li')
+    expect(parentLi?.className).toContain('active')
+    const toggle = screen.getByText('Parent').closest('a')
+    expect(toggle?.className).toContain('is-active')
+  })
+
+  it('renders an empty node without a link', () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Hidden" isEmptyNode>
+          <SidebarMenuItem title="Visible Child" to="/visible" />
+        </SidebarMenuItem>
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    // The empty node renders no link/title of its own, but its child still renders.
+    expect(screen.queryByText('Hidden')).not.toBeInTheDocument()
+    expect(screen.getByText('Visible Child')).toBeInTheDocument()
+  })
+
+  it('does not render a caret toggle when noCaret is set on a parent', () => {
+    render(
+      <SidebarMenu>
+        <SidebarMenuItem title="Parent" noCaret>
+          <SidebarMenuItem title="Child" to="/child" />
+        </SidebarMenuItem>
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    const parentLi = screen.getByText('Parent').closest('li')
+    expect(parentLi?.className).toContain('sidebar-menu__entry--no-caret')
+  })
+
+  it('applies the disabled modifier class to the menu container', () => {
+    const { container } = render(
+      <SidebarMenu disabled>
+        <SidebarMenuItem title="Dashboard" to="/dashboard" />
+      </SidebarMenu>,
+      { wrapper: Wrapper },
+    )
+    const menu = container.querySelector('ul.sidebar-menu')
+    expect(menu).not.toBeNull()
+    expect(menu?.className).toContain('sidebar-menu--disabled')
+  })
+})
diff --git a/admin-ui/app/components/Wizard/__tests__/Wizard.test.tsx b/admin-ui/app/components/Wizard/__tests__/Wizard.test.tsx
new file mode 100644
index 000000000..90f62485b
--- /dev/null
+++ b/admin-ui/app/components/Wizard/__tests__/Wizard.test.tsx
@@ -0,0 +1,136 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import Wizard from '@/components/Wizard'
+import WizardStep from '@/components/Wizard/WizardStep'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+// onClick is required by the type but Wizard injects its own via cloneElement.
+const noop = () => {}
+
+const buildSteps = () => [
+  <WizardStep key="one" id="one" onClick={noop} data-testid="step-one">
+    Step One
+  </WizardStep>,
+  <WizardStep key="two" id="two" onClick={noop} data-testid="step-two">
+    Step Two
+  </WizardStep>,
+  <WizardStep key="three" id="three" onClick={noop} data-testid="step-three">
+    Step Three
+  </WizardStep>,
+]
+
+describe('Wizard', () => {
+  it('renders all of its step children', () => {
+    render(<Wizard initialActiveStep="one">{buildSteps()}</Wizard>, { wrapper: Wrapper })
+
+    expect(screen.getByText('Step One')).toBeInTheDocument()
+    expect(screen.getByText('Step Two')).toBeInTheDocument()
+    expect(screen.getByText('Step Three')).toBeInTheDocument()
+  })
+
+  it('marks the initialActiveStep as active by default', () => {
+    render(<Wizard initialActiveStep="two">{buildSteps()}</Wizard>, { wrapper: Wrapper })
+
+    expect(screen.getByTestId('step-two')).toHaveClass('wizard-step--active')
+    expect(screen.getByTestId('step-one')).not.toHaveClass('wizard-step--active')
+    expect(screen.getByTestId('step-three')).not.toHaveClass('wizard-step--active')
+  })
+
+  it('switches the active step when another step is clicked (uncontrolled)', () => {
+    render(<Wizard initialActiveStep="one">{buildSteps()}</Wizard>, { wrapper: Wrapper })
+
+    expect(screen.getByTestId('step-one')).toHaveClass('wizard-step--active')
+
+    fireEvent.click(screen.getByTestId('step-three'))
+
+    expect(screen.getByTestId('step-three')).toHaveClass('wizard-step--active')
+    expect(screen.getByTestId('step-one')).not.toHaveClass('wizard-step--active')
+  })
+
+  it('calls onStepChanged with the clicked step id when controlled', () => {
+    const onStepChanged = jest.fn()
+    render(
+      <Wizard activeStep="one" onStepChanged={onStepChanged}>
+        {buildSteps()}
+      </Wizard>,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(screen.getByTestId('step-two'))
+
+    expect(onStepChanged).toHaveBeenCalledTimes(1)
+    expect(onStepChanged).toHaveBeenCalledWith('two')
+  })
+
+  it('reflects the active step from the activeStep prop when controlled', () => {
+    const { rerender } = render(
+      <Wizard activeStep="one" onStepChanged={jest.fn()}>
+        {buildSteps()}
+      </Wizard>,
+      { wrapper: Wrapper },
+    )
+
+    expect(screen.getByTestId('step-one')).toHaveClass('wizard-step--active')
+
+    rerender(
+      <Wizard activeStep="three" onStepChanged={jest.fn()}>
+        {buildSteps()}
+      </Wizard>,
+    )
+
+    expect(screen.getByTestId('step-three')).toHaveClass('wizard-step--active')
+    expect(screen.getByTestId('step-one')).not.toHaveClass('wizard-step--active')
+  })
+
+  it('does not trigger a step change when a disabled step is clicked', () => {
+    const onStepChanged = jest.fn()
+    render(
+      <Wizard activeStep="one" onStepChanged={onStepChanged}>
+        <WizardStep id="one" onClick={noop} data-testid="step-one">
+          Step One
+        </WizardStep>
+        <WizardStep id="two" disabled onClick={noop} data-testid="step-two">
+          Step Two
+        </WizardStep>
+      </Wizard>,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(screen.getByTestId('step-two'))
+
+    expect(onStepChanged).not.toHaveBeenCalled()
+    expect(screen.getByTestId('step-two')).toHaveClass('wizard-step--disabled')
+  })
+})
+
+describe('WizardStep', () => {
+  it('invokes onClick when an enabled step is clicked', () => {
+    const onClick = jest.fn()
+    render(
+      <WizardStep id="solo" onClick={onClick} data-testid="solo">
+        Solo Step
+      </WizardStep>,
+      { wrapper: Wrapper },
+    )
+
+    fireEvent.click(screen.getByTestId('solo'))
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the success icon when complete', () => {
+    render(
+      <WizardStep id="done" complete onClick={jest.fn()} data-testid="done">
+        Done Step
+      </WizardStep>,
+      { wrapper: Wrapper },
+    )
+
+    expect(screen.getByTestId('done')).toHaveClass('wizard-step--complete')
+    expect(screen.getByTestId('CheckIcon')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuNavBar.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuNavBar.test.tsx
new file mode 100644
index 000000000..008f2579a
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/Tests/GluuNavBar.test.tsx
@@ -0,0 +1,60 @@
+import { type ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { configureStore, combineReducers } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import type { UserInfo } from 'Redux/features/types/authTypes'
+import AppTestWrapper from './Components/AppTestWrapper'
+import GluuNavBar from '../GluuNavBar'
+
+const createTestStore = (userinfo: UserInfo | null): Store =>
+  configureStore({
+    reducer: combineReducers({
+      authReducer: (state = { userinfo }) => state,
+      logoutAuditReducer: (state = { logoutAuditSucceeded: null }) => state,
+    }),
+  })
+
+const renderNavBar = (userinfo: UserInfo | null) => {
+  const store = createTestStore(userinfo)
+  const Wrapper = ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>
+      <AppTestWrapper>{children}</AppTestWrapper>
+    </Provider>
+  )
+  return render(<GluuNavBar />, { wrapper: Wrapper })
+}
+
+describe('GluuNavBar', () => {
+  it('renders the page title element with the default title', () => {
+    renderNavBar(null)
+    const pageTitle = document.getElementById('page-title-navbar')
+    expect(pageTitle).not.toBeNull()
+    expect(pageTitle).toHaveTextContent('Dashboard')
+  })
+
+  it('falls back to the "User" display name when there is no user info', () => {
+    renderNavBar(null)
+    expect(screen.getByText('User')).toBeInTheDocument()
+  })
+
+  it('does not render the theme or language menus when there is no user info', () => {
+    renderNavBar(null)
+    expect(screen.queryByTestId('ACTIVE_LANG')).not.toBeInTheDocument()
+  })
+
+  it('renders the full name when given and family name are present', () => {
+    renderNavBar({ given_name: 'Jane', family_name: 'Doe' })
+    expect(screen.getByText('Jane Doe')).toBeInTheDocument()
+  })
+
+  it('renders the theme and language menus when user info is present', () => {
+    renderNavBar({ given_name: 'Jane', family_name: 'Doe' })
+    expect(screen.getByTestId('ACTIVE_LANG')).toBeInTheDocument()
+  })
+
+  it('renders the notifications trigger', () => {
+    renderNavBar(null)
+    expect(screen.getByAltText('Notifications')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuAlert.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuAlert.test.tsx
new file mode 100644
index 000000000..bb0a93914
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuAlert.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import GluuAlert from 'Routes/Apps/Gluu/GluuAlert'
+import type { GluuAlertProps } from 'Routes/Apps/Gluu/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const renderAlert = (props: GluuAlertProps) =>
+  render(<GluuAlert {...props} />, { wrapper: Wrapper })
+
+describe('GluuAlert', () => {
+  it('renders the message inside an alert when show is true', () => {
+    renderAlert({ show: true, severity: 'error', message: 'Something went wrong' })
+    const alert = screen.getByRole('alert')
+    expect(alert).toBeInTheDocument()
+    expect(alert).toHaveTextContent('Something went wrong')
+  })
+
+  it('renders nothing when show is false', () => {
+    renderAlert({ show: false, severity: 'error', message: 'Hidden message' })
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    expect(screen.queryByText('Hidden message')).not.toBeInTheDocument()
+  })
+
+  it('applies the error severity styling', () => {
+    renderAlert({ show: true, severity: 'error', message: 'Error text' })
+    const alert = screen.getByRole('alert')
+    expect(alert.className).toContain('MuiAlert-colorError')
+  })
+
+  it('applies the warning severity styling', () => {
+    renderAlert({ show: true, severity: 'warning', message: 'Warning text' })
+    const alert = screen.getByRole('alert')
+    expect(alert.className).toContain('MuiAlert-colorWarning')
+  })
+
+  it('applies the info severity styling', () => {
+    renderAlert({ show: true, severity: 'info', message: 'Info text' })
+    const alert = screen.getByRole('alert')
+    expect(alert.className).toContain('MuiAlert-colorInfo')
+  })
+
+  it('applies the success severity styling', () => {
+    renderAlert({ show: true, severity: 'success', message: 'Success text' })
+    const alert = screen.getByRole('alert')
+    expect(alert.className).toContain('MuiAlert-colorSuccess')
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuCommitDialog.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuCommitDialog.test.tsx
new file mode 100644
index 000000000..9cb3bb90e
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuCommitDialog.test.tsx
@@ -0,0 +1,147 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
+import type { GluuCommitDialogProps } from 'Routes/Apps/Gluu/types/index'
+
+jest.mock('@/cedarling/hooks/usePermission', () => ({
+  usePermission: () => ({ canRead: true, canWrite: true, canDelete: true }),
+}))
+
+const mockOnCloseModal = jest.fn()
+jest.mock('Utils/hooks', () => ({
+  useWebhookDialogAction: () => ({
+    webhookTriggerModal: () => null,
+    onCloseModal: mockOnCloseModal,
+    webhookCheckComplete: true,
+  }),
+}))
+
+const createTestStore = (): Store =>
+  configureStore({
+    reducer: combineReducers({
+      webhookReducer: (state = { webhookModal: false }) => state,
+    }),
+  })
+
+const baseProps = (overrides: Partial<GluuCommitDialogProps> = {}): GluuCommitDialogProps => ({
+  handler: jest.fn(),
+  modal: true,
+  onAccept: jest.fn(),
+  ...overrides,
+})
+
+const renderDialog = (props: GluuCommitDialogProps) => {
+  const store = createTestStore()
+  return render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuCommitDialog {...props} />
+      </AppTestWrapper>
+    </Provider>,
+  )
+}
+
+// A valid commit message must be at least 10 characters.
+const VALID_MESSAGE = 'updating the configuration value'
+
+const getTextarea = () => screen.getByPlaceholderText(/.+/) as HTMLTextAreaElement
+
+describe('GluuCommitDialog', () => {
+  beforeEach(() => {
+    mockOnCloseModal.mockClear()
+  })
+
+  it('renders nothing when modal is false', () => {
+    renderDialog(baseProps({ modal: false }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('renders the dialog with the default title when open', () => {
+    renderDialog(baseProps())
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Want to apply changes made on this page?')).toBeInTheDocument()
+  })
+
+  it('renders a custom label as the title when provided', () => {
+    renderDialog(baseProps({ label: 'Apply these custom changes' }))
+    expect(screen.getByText('Apply these custom changes')).toBeInTheDocument()
+  })
+
+  it('renders the license audit log title when isLicenseLabel is true', () => {
+    renderDialog(baseProps({ isLicenseLabel: true, label: 'Ignored Label' }))
+    expect(screen.queryByText('Ignored Label')).not.toBeInTheDocument()
+    expect(screen.getByText(/license/i)).toBeInTheDocument()
+  })
+
+  it('renders an alert message when provided', () => {
+    renderDialog(baseProps({ alertMessage: 'Heads up about this change', alertSeverity: 'error' }))
+    expect(screen.getByText('Heads up about this change')).toBeInTheDocument()
+  })
+
+  it('renders the list of operations when operations are passed', () => {
+    renderDialog(
+      baseProps({
+        operations: [
+          { path: 'displayName', value: 'Acme', label: 'Display Name' },
+          { path: 'enabled', value: true },
+        ],
+      }),
+    )
+    expect(screen.getByText('List of changes')).toBeInTheDocument()
+    expect(screen.getByText('Display Name')).toBeInTheDocument()
+    expect(screen.getByText('enabled')).toBeInTheDocument()
+    expect(screen.getByText('Acme')).toBeInTheDocument()
+    expect(screen.getByText('true')).toBeInTheDocument()
+  })
+
+  it('does not render the operations section when no operations are passed', () => {
+    renderDialog(baseProps())
+    expect(screen.queryByText('List of changes')).not.toBeInTheDocument()
+  })
+
+  it('accepts typing into the message textarea', () => {
+    renderDialog(baseProps())
+    const textarea = getTextarea()
+    fireEvent.change(textarea, { target: { value: VALID_MESSAGE } })
+    expect(textarea.value).toBe(VALID_MESSAGE)
+  })
+
+  it('disables the confirm button until a valid message is entered', () => {
+    renderDialog(baseProps())
+    const confirmButton = screen.getByRole('button', { name: 'Yes' })
+    expect(confirmButton).toBeDisabled()
+    fireEvent.change(getTextarea(), { target: { value: VALID_MESSAGE } })
+    expect(confirmButton).toBeEnabled()
+  })
+
+  it('calls onAccept with the typed message and closes when confirm is clicked', async () => {
+    const onAccept = jest.fn()
+    const handler = jest.fn()
+    renderDialog(baseProps({ onAccept, handler }))
+    fireEvent.change(getTextarea(), { target: { value: VALID_MESSAGE } })
+    fireEvent.click(screen.getByRole('button', { name: 'Yes' }))
+    await waitFor(() => expect(onAccept).toHaveBeenCalledWith(VALID_MESSAGE))
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(mockOnCloseModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('writes the message to formik on accept when formik is provided', async () => {
+    const setFieldValue = jest.fn()
+    renderDialog(baseProps({ formik: { setFieldValue } }))
+    fireEvent.change(getTextarea(), { target: { value: VALID_MESSAGE } })
+    fireEvent.click(screen.getByRole('button', { name: 'Yes' }))
+    await waitFor(() => expect(setFieldValue).toHaveBeenCalledWith('action_message', VALID_MESSAGE))
+  })
+
+  it('calls the close handler when the header close button is clicked', () => {
+    const handler = jest.fn()
+    renderDialog(baseProps({ handler }))
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[0])
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(mockOnCloseModal).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuDialog.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuDialog.test.tsx
new file mode 100644
index 000000000..1a5540f78
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuDialog.test.tsx
@@ -0,0 +1,93 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuDialog from 'Routes/Apps/Gluu/GluuDialog'
+import type { GluuDialogProps } from 'Routes/Apps/Gluu/types/GluuComponentPropsTypes'
+
+jest.mock('@/cedarling/hooks/usePermission', () => ({
+  usePermission: () => ({ canRead: false, canWrite: false, canDelete: true }),
+}))
+
+const mockOnCloseModal = jest.fn()
+jest.mock('Utils/hooks', () => ({
+  useWebhookDialogAction: () => ({
+    webhookTriggerModal: () => null,
+    onCloseModal: mockOnCloseModal,
+  }),
+}))
+
+const createTestStore = (): Store =>
+  configureStore({
+    reducer: combineReducers({
+      webhookReducer: (state = { webhookModal: false }) => state,
+    }),
+  })
+
+const baseProps = (overrides: Partial<GluuDialogProps> = {}): GluuDialogProps => ({
+  row: { name: 'OpenID Client', inum: '1234' },
+  handler: jest.fn(),
+  modal: true,
+  onAccept: jest.fn(),
+  subject: 'Client',
+  feature: 'openid_clients',
+  ...overrides,
+})
+
+const renderDialog = (props: GluuDialogProps) => {
+  const store = createTestStore()
+  return render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuDialog {...props} />
+      </AppTestWrapper>
+    </Provider>,
+  )
+}
+
+describe('GluuDialog', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the deletion confirmation content when modal is open', () => {
+    renderDialog(baseProps())
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(
+      screen.getByText('Deletion confirmation for Client (OpenID Client-1234)'),
+    ).toBeInTheDocument()
+    expect(screen.getByText('Do you really want to delete this item?')).toBeInTheDocument()
+  })
+
+  it('renders nothing when modal is false', () => {
+    renderDialog(baseProps({ modal: false }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('shows a helper message and hides the confirm button until enough characters are typed', () => {
+    renderDialog(baseProps())
+    expect(screen.queryByRole('button', { name: 'Yes' })).not.toBeInTheDocument()
+    const textarea = screen.getByPlaceholderText('Provide the reason of this change')
+    fireEvent.change(textarea, { target: { value: 'short' } })
+    expect(screen.getByText(/characters required/)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Yes' })).not.toBeInTheDocument()
+  })
+
+  it('calls onAccept with the typed message when confirmed', () => {
+    const onAccept = jest.fn()
+    renderDialog(baseProps({ onAccept }))
+    const textarea = screen.getByPlaceholderText('Provide the reason of this change')
+    fireEvent.change(textarea, { target: { value: 'deleting this client now' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Yes' }))
+    expect(onAccept).toHaveBeenCalledWith('deleting this client now')
+  })
+
+  it('calls the handler and onCloseModal when the No button is clicked', () => {
+    const handler = jest.fn()
+    renderDialog(baseProps({ handler }))
+    fireEvent.click(screen.getByRole('button', { name: 'No' }))
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(mockOnCloseModal).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuErrorModal.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuErrorModal.test.tsx
new file mode 100644
index 000000000..fe86a95c9
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuErrorModal.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuErrorModal from 'Routes/Apps/Gluu/GluuErrorModal'
+
+const createTestStore = (authServerHost: string): Store =>
+  configureStore({
+    reducer: combineReducers({
+      authReducer: (state = { config: { authServerHost } }) => state,
+    }),
+  })
+
+const renderModal = (
+  props: { message?: string; description?: string } = {},
+  authServerHost = '',
+) => {
+  const store = createTestStore(authServerHost)
+  return render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuErrorModal {...props} />
+      </AppTestWrapper>
+    </Provider>,
+  )
+}
+
+describe('GluuErrorModal', () => {
+  it('renders the provided message and the Try Again button', () => {
+    renderModal({ message: 'Something went wrong' })
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Try Again' })).toBeInTheDocument()
+  })
+
+  it('renders the description as HTML', () => {
+    renderModal({ message: 'Oops', description: '<strong>details here</strong>' })
+    expect(screen.getByText('details here')).toBeInTheDocument()
+  })
+
+  it('invokes the refresh handler without throwing when Try Again is clicked', () => {
+    renderModal({ message: 'Down' }, '')
+    expect(() => fireEvent.click(screen.getByRole('button', { name: 'Try Again' }))).not.toThrow()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuInputEditor.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuInputEditor.test.tsx
new file mode 100644
index 000000000..52090874b
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuInputEditor.test.tsx
@@ -0,0 +1,170 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuInputEditor from 'Routes/Apps/Gluu/GluuInputEditor'
+import type { GluuInputEditorProps } from 'Routes/Apps/Gluu/types/GluuInputEditor.types'
+import type { FormikProps, FormikValues } from 'formik'
+
+type AceMockProps = {
+  value?: string
+  readOnly?: boolean
+  placeholder?: string
+  onChange?: (value: string) => void
+}
+
+jest.mock('react-ace', () => ({
+  __esModule: true,
+  default: ({ value, readOnly, placeholder, onChange }: AceMockProps) => (
+    <textarea
+      data-testid="ace"
+      readOnly={readOnly}
+      placeholder={placeholder}
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+    />
+  ),
+}))
+
+// Ace language/theme side-effect imports are not needed under the mock.
+jest.mock('ace-builds/src-noconflict/mode-java', () => ({}), { virtual: true })
+jest.mock('ace-builds/src-noconflict/mode-python', () => ({}), { virtual: true })
+jest.mock('ace-builds/src-noconflict/mode-json', () => ({}), { virtual: true })
+jest.mock('ace-builds/src-noconflict/theme-xcode', () => ({}), { virtual: true })
+jest.mock('ace-builds/src-noconflict/theme-monokai', () => ({}), { virtual: true })
+jest.mock('ace-builds/src-noconflict/ext-language_tools', () => ({}), { virtual: true })
+
+const createMockFormik = (
+  values: FormikValues = {},
+  overrides: Partial<FormikProps<FormikValues>> = {},
+): FormikProps<FormikValues> => ({
+  values,
+  initialValues: values,
+  initialErrors: {},
+  initialTouched: {},
+  initialStatus: undefined,
+  errors: {},
+  touched: {},
+  isSubmitting: false,
+  isValidating: false,
+  submitCount: 0,
+  dirty: false,
+  isValid: true,
+  status: undefined,
+  handleChange: jest.fn(),
+  handleBlur: jest.fn(),
+  handleSubmit: jest.fn(),
+  handleReset: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setFieldError: jest.fn(),
+  setValues: jest.fn(),
+  setErrors: jest.fn(),
+  setTouched: jest.fn(),
+  setStatus: jest.fn(),
+  setSubmitting: jest.fn(),
+  setFormikState: jest.fn(),
+  validateField: jest.fn(),
+  validateForm: jest.fn().mockResolvedValue({}),
+  resetForm: jest.fn(),
+  submitForm: jest.fn().mockResolvedValue(undefined),
+  getFieldProps: jest
+    .fn()
+    .mockReturnValue({ value: '', onChange: jest.fn(), onBlur: jest.fn(), name: '' }),
+  getFieldMeta: jest.fn().mockReturnValue({
+    value: '',
+    touched: false,
+    error: undefined,
+    initialValue: '',
+    initialTouched: false,
+    initialError: undefined,
+  }),
+  getFieldHelpers: jest
+    .fn()
+    .mockReturnValue({ setValue: jest.fn(), setTouched: jest.fn(), setError: jest.fn() }),
+  registerField: jest.fn(),
+  unregisterField: jest.fn(),
+  ...overrides,
+})
+
+const baseProps = (
+  overrides: Partial<GluuInputEditorProps<FormikValues>> = {},
+): GluuInputEditorProps<FormikValues> => ({
+  name: 'script',
+  language: 'python',
+  label: 'Script',
+  value: 'print("hi")',
+  formik: createMockFormik({ script: 'print("hi")' }),
+  ...overrides,
+})
+
+const renderEditor = (props: GluuInputEditorProps<FormikValues>) =>
+  render(
+    <AppTestWrapper>
+      <GluuInputEditor {...props} />
+    </AppTestWrapper>,
+  )
+
+const getEditor = (): HTMLTextAreaElement =>
+  screen.getByTestId('ace') as HTMLTextAreaElement
+
+describe('GluuInputEditor', () => {
+  it('renders the label and the editor', () => {
+    renderEditor(baseProps())
+    expect(screen.getByText('Script')).toBeInTheDocument()
+    expect(getEditor()).toBeInTheDocument()
+  })
+
+  it('shows the current value in the editor', () => {
+    renderEditor(baseProps({ value: 'let x = 1' }))
+    expect(getEditor()).toHaveValue('let x = 1')
+  })
+
+  it('falls back to an empty string when value is undefined', () => {
+    renderEditor(baseProps({ value: undefined }))
+    expect(getEditor()).toHaveValue('')
+  })
+
+  it('writes changes to formik via setFieldValue', () => {
+    const formik = createMockFormik({ script: '' })
+    renderEditor(baseProps({ formik, name: 'script', value: '' }))
+    fireEvent.change(getEditor(), { target: { value: 'new code' } })
+    expect(formik.setFieldValue).toHaveBeenCalledTimes(1)
+    expect(formik.setFieldValue).toHaveBeenCalledWith('script', 'new code')
+  })
+
+  it('does not write to formik when readOnly is true', () => {
+    const formik = createMockFormik({ script: 'locked' })
+    renderEditor(baseProps({ formik, readOnly: true, value: 'locked' }))
+    fireEvent.change(getEditor(), { target: { value: 'attempted edit' } })
+    expect(formik.setFieldValue).not.toHaveBeenCalled()
+  })
+
+  it('marks the editor read-only when readOnly is true', () => {
+    renderEditor(baseProps({ readOnly: true }))
+    expect(getEditor()).toHaveAttribute('readonly')
+  })
+
+  it('passes the placeholder through to the editor', () => {
+    renderEditor(baseProps({ value: undefined, placeholder: 'Type here' }))
+    expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument()
+  })
+
+  it('uses the default placeholder when none is provided', () => {
+    renderEditor(baseProps({ value: undefined }))
+    expect(screen.getByPlaceholderText('Write your custom script here')).toBeInTheDocument()
+  })
+
+  it('renders an error message when showError and errorMessage are set', () => {
+    renderEditor(baseProps({ showError: true, errorMessage: 'Required field' }))
+    expect(screen.getByText('Required field')).toBeInTheDocument()
+  })
+
+  it('does not render an error message when showError is false', () => {
+    renderEditor(baseProps({ showError: false, errorMessage: 'Required field' }))
+    expect(screen.queryByText('Required field')).not.toBeInTheDocument()
+  })
+
+  it('renders the shortcode node when provided', () => {
+    renderEditor(baseProps({ shortcode: <span data-testid="shortcode">SC</span> }))
+    expect(screen.getByTestId('shortcode')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuRemovableInputRow.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuRemovableInputRow.test.tsx
new file mode 100644
index 000000000..5203ed316
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuRemovableInputRow.test.tsx
@@ -0,0 +1,117 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuRemovableInputRow from 'Routes/Apps/Gluu/GluuRemovableInputRow'
+import type { GluuRemovableInputRowProps } from 'Routes/Apps/Gluu/types'
+import type { FormikProps, FormikValues } from 'formik'
+
+const createMockFormik = (
+  values: FormikValues = {},
+  overrides: Partial<FormikProps<FormikValues>> = {},
+): FormikProps<FormikValues> => ({
+  values,
+  initialValues: values,
+  initialErrors: {},
+  initialTouched: {},
+  initialStatus: undefined,
+  errors: {},
+  touched: {},
+  isSubmitting: false,
+  isValidating: false,
+  submitCount: 0,
+  dirty: false,
+  isValid: true,
+  status: undefined,
+  handleChange: jest.fn(),
+  handleBlur: jest.fn(),
+  handleSubmit: jest.fn(),
+  handleReset: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setFieldError: jest.fn(),
+  setValues: jest.fn(),
+  setErrors: jest.fn(),
+  setTouched: jest.fn(),
+  setStatus: jest.fn(),
+  setSubmitting: jest.fn(),
+  setFormikState: jest.fn(),
+  validateField: jest.fn(),
+  validateForm: jest.fn().mockResolvedValue({}),
+  resetForm: jest.fn(),
+  submitForm: jest.fn().mockResolvedValue(undefined),
+  getFieldProps: jest
+    .fn()
+    .mockReturnValue({ value: '', onChange: jest.fn(), onBlur: jest.fn(), name: '' }),
+  getFieldMeta: jest.fn().mockReturnValue({
+    value: '',
+    touched: false,
+    error: undefined,
+    initialValue: '',
+    initialTouched: false,
+    initialError: undefined,
+  }),
+  getFieldHelpers: jest
+    .fn()
+    .mockReturnValue({ setValue: jest.fn(), setTouched: jest.fn(), setError: jest.fn() }),
+  registerField: jest.fn(),
+  unregisterField: jest.fn(),
+  ...overrides,
+})
+
+const baseProps = (
+  overrides: Partial<GluuRemovableInputRowProps> = {},
+): GluuRemovableInputRowProps => ({
+  label: 'My Label',
+  name: 'myField',
+  formik: createMockFormik({ myField: 'hello' }),
+  handler: jest.fn(),
+  ...overrides,
+})
+
+const renderRow = (props: GluuRemovableInputRowProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuRemovableInputRow {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuRemovableInputRow', () => {
+  it('renders an input with data-testid={name} populated from formik values', () => {
+    renderRow(baseProps())
+    const input = screen.getByTestId('myField') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+    expect(input.value).toBe('hello')
+  })
+
+  it('renders the remove button and calls handler when clicked', () => {
+    const handler = jest.fn()
+    renderRow(baseProps({ handler }))
+    const removeButton = screen.getByRole('button', { name: /remove/i })
+    expect(removeButton).toBeInTheDocument()
+    fireEvent.click(removeButton)
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides the remove button when hideRemoveButton is true', () => {
+    renderRow(baseProps({ hideRemoveButton: true }))
+    expect(screen.queryByRole('button', { name: /remove/i })).not.toBeInTheDocument()
+  })
+
+  it('renders a toggle (checkbox) instead of a text input when isBoolean is true', () => {
+    const { container } = renderRow(
+      baseProps({ isBoolean: true, formik: createMockFormik({ myField: true }) }),
+    )
+    const checkbox = container.querySelector('input#myField') as HTMLInputElement | null
+    expect(checkbox).toBeInTheDocument()
+    expect(checkbox?.type).toBe('checkbox')
+  })
+
+  it('calls formik.handleChange and setModifiedFields when typing in the input', () => {
+    const formik = createMockFormik({ myField: '' })
+    const setModifiedFields = jest.fn()
+    renderRow(baseProps({ formik, setModifiedFields }))
+    const input = screen.getByTestId('myField')
+    fireEvent.change(input, { target: { value: 'updated' } })
+    expect(formik.handleChange).toHaveBeenCalledTimes(1)
+    expect(setModifiedFields).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuRemovableSelectRow.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuRemovableSelectRow.test.tsx
new file mode 100644
index 000000000..039b67447
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuRemovableSelectRow.test.tsx
@@ -0,0 +1,126 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuRemovableSelectRow from 'Routes/Apps/Gluu/GluuRemovableSelectRow'
+import type { GluuRemovableSelectRowProps } from 'Routes/Apps/Gluu/types'
+import type { JsonValue } from 'Routes/Apps/Gluu/types/common'
+import type { FormikProps } from 'formik'
+
+type SelectFormValues = Record<string, JsonValue>
+
+const createMockFormik = (
+  values: SelectFormValues = {},
+  overrides: Partial<FormikProps<SelectFormValues>> = {},
+): FormikProps<SelectFormValues> => ({
+  values,
+  initialValues: values,
+  initialErrors: {},
+  initialTouched: {},
+  initialStatus: undefined,
+  errors: {},
+  touched: {},
+  isSubmitting: false,
+  isValidating: false,
+  submitCount: 0,
+  dirty: false,
+  isValid: true,
+  status: undefined,
+  handleChange: jest.fn(),
+  handleBlur: jest.fn(),
+  handleSubmit: jest.fn(),
+  handleReset: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setFieldError: jest.fn(),
+  setValues: jest.fn(),
+  setErrors: jest.fn(),
+  setTouched: jest.fn(),
+  setStatus: jest.fn(),
+  setSubmitting: jest.fn(),
+  setFormikState: jest.fn(),
+  validateField: jest.fn(),
+  validateForm: jest.fn().mockResolvedValue({}),
+  resetForm: jest.fn(),
+  submitForm: jest.fn().mockResolvedValue(undefined),
+  getFieldProps: jest
+    .fn()
+    .mockReturnValue({ value: '', onChange: jest.fn(), onBlur: jest.fn(), name: '' }),
+  getFieldMeta: jest.fn().mockReturnValue({
+    value: '',
+    touched: false,
+    error: undefined,
+    initialValue: '',
+    initialTouched: false,
+    initialError: undefined,
+  }),
+  getFieldHelpers: jest
+    .fn()
+    .mockReturnValue({ setValue: jest.fn(), setTouched: jest.fn(), setError: jest.fn() }),
+  registerField: jest.fn(),
+  unregisterField: jest.fn(),
+  ...overrides,
+})
+
+const countryOptions = [
+  { cca2: 'US', name: 'United States' },
+  { cca2: 'CA', name: 'Canada' },
+]
+
+const baseProps = (
+  overrides: Partial<GluuRemovableSelectRowProps> = {},
+): GluuRemovableSelectRowProps => ({
+  label: 'Country',
+  name: 'country',
+  formik: createMockFormik({ country: 'US' }),
+  values: countryOptions,
+  handler: jest.fn(),
+  ...overrides,
+})
+
+const renderRow = (props: GluuRemovableSelectRowProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuRemovableSelectRow {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuRemovableSelectRow', () => {
+  it('renders a select with data-testid={name}, a default choose option and one option per value', () => {
+    renderRow(baseProps())
+    const select = screen.getByTestId('country') as HTMLSelectElement
+    expect(select.tagName).toBe('SELECT')
+    // default "choose" option + 2 country options
+    expect(select.querySelectorAll('option')).toHaveLength(3)
+    expect(screen.getByRole('option', { name: 'United States' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Canada' })).toBeInTheDocument()
+  })
+
+  it('reflects the value from formik.values[name]', () => {
+    renderRow(baseProps({ formik: createMockFormik({ country: 'CA' }) }))
+    const select = screen.getByTestId('country') as HTMLSelectElement
+    expect(select.value).toBe('CA')
+  })
+
+  it('renders the remove button and calls handler when clicked', () => {
+    const handler = jest.fn()
+    renderRow(baseProps({ handler }))
+    const removeButton = screen.getByRole('button', { name: /remove/i })
+    expect(removeButton).toBeInTheDocument()
+    fireEvent.click(removeButton)
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides the remove button when hideRemoveButton is true', () => {
+    renderRow(baseProps({ hideRemoveButton: true }))
+    expect(screen.queryByRole('button', { name: /remove/i })).not.toBeInTheDocument()
+  })
+
+  it('calls formik.handleChange when the select changes', () => {
+    const formik = createMockFormik({ country: 'US' })
+    const setModifiedFields = jest.fn()
+    renderRow(baseProps({ formik, setModifiedFields }))
+    const select = screen.getByTestId('country')
+    fireEvent.change(select, { target: { value: 'CA' } })
+    expect(formik.handleChange).toHaveBeenCalledTimes(1)
+    expect(setModifiedFields).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuScriptErrorModal.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuScriptErrorModal.test.tsx
new file mode 100644
index 000000000..68e4e0b6f
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuScriptErrorModal.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuScriptErrorModal from 'Routes/Apps/Gluu/GluuScriptErrorModal'
+import type { GluuScriptErrorModalProps } from 'Routes/Apps/Gluu/types/GluuComponentPropsTypes'
+
+const baseProps = (
+  overrides: Partial<GluuScriptErrorModalProps> = {},
+): GluuScriptErrorModalProps => ({
+  title: 'Script Error',
+  error: 'TypeError: something failed',
+  isOpen: true,
+  handler: jest.fn(),
+  ...overrides,
+})
+
+const renderModal = (props: GluuScriptErrorModalProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuScriptErrorModal {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuScriptErrorModal', () => {
+  it('renders the title and error text when open', () => {
+    renderModal(baseProps())
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Script Error')).toBeInTheDocument()
+    expect(screen.getByText('TypeError: something failed')).toBeInTheDocument()
+  })
+
+  it('renders nothing when isOpen is false', () => {
+    renderModal(baseProps({ isOpen: false }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.queryByText('TypeError: something failed')).not.toBeInTheDocument()
+  })
+
+  it('calls the handler when the close button is clicked', () => {
+    const handler = jest.fn()
+    renderModal(baseProps({ handler }))
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[0])
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('copies the error to the clipboard and updates the button label', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    })
+    renderModal(baseProps({ error: 'copy me' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Copy To Clipboard' }))
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith('copy me'))
+    expect(await screen.findByRole('button', { name: 'Copied' })).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuServiceDownModal.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuServiceDownModal.test.tsx
new file mode 100644
index 000000000..3a19dc242
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuServiceDownModal.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuServiceDownModal from 'Routes/Apps/Gluu/GluuServiceDownModal'
+
+const createTestStore = (authServerHost: string): Store =>
+  configureStore({
+    reducer: combineReducers({
+      authReducer: (state = { config: { authServerHost } }) => state,
+    }),
+  })
+
+const renderModal = (
+  props: { message?: string; statusCode?: number | string } = {},
+  authServerHost = '',
+) => {
+  const store = createTestStore(authServerHost)
+  return render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuServiceDownModal {...props} />
+      </AppTestWrapper>
+    </Provider>,
+  )
+}
+
+describe('GluuServiceDownModal', () => {
+  it('renders the message and the Try Again button', () => {
+    renderModal({ message: 'Service is unavailable' })
+    expect(screen.getByText('Service is unavailable')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Try Again' })).toBeInTheDocument()
+  })
+
+  it('renders the status code when provided', () => {
+    renderModal({ message: 'Down', statusCode: 503 })
+    expect(screen.getByText('Error code: 503')).toBeInTheDocument()
+  })
+
+  it('does not render an error code when statusCode is absent', () => {
+    renderModal({ message: 'Down' })
+    expect(screen.queryByText(/Error code:/)).not.toBeInTheDocument()
+  })
+
+  it('invokes the refresh handler without throwing when Try Again is clicked', () => {
+    renderModal({ message: 'Down' }, '')
+    expect(() => fireEvent.click(screen.getByRole('button', { name: 'Try Again' }))).not.toThrow()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuSessionTimeout.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuSessionTimeout.test.tsx
new file mode 100644
index 000000000..744358996
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuSessionTimeout.test.tsx
@@ -0,0 +1,131 @@
+import { render, screen, act } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuSessionTimeout from 'Routes/Apps/Gluu/GluuSessionTimeout'
+
+type IdleHandlers = { onIdle?: () => void; onActive?: () => void; disabled?: boolean }
+
+const mockReset = jest.fn()
+let capturedHandlers: IdleHandlers = {}
+
+jest.mock('@/hooks/useIdleTimer', () => ({
+  useIdleTimer: (opts: IdleHandlers) => {
+    capturedHandlers = opts
+    return { reset: mockReset, isIdle: false }
+  },
+}))
+
+const mockNavigateToRoute = jest.fn()
+jest.mock('@/helpers/navigation', () => {
+  const actual = jest.requireActual('@/helpers/navigation')
+  return {
+    ...actual,
+    useAppNavigation: () => ({ navigateToRoute: mockNavigateToRoute, navigateBack: jest.fn() }),
+  }
+})
+
+const createStore = (logoutAuditSucceeded: boolean | null = null): Store =>
+  configureStore({
+    reducer: combineReducers({
+      authReducer: (state = { config: { sessionTimeoutInMins: 5 } }) => state,
+      logoutAuditReducer: (state = { logoutAuditSucceeded }) => state,
+    }),
+  })
+
+const renderTimeout = (isAuthenticated = true, logoutAuditSucceeded: boolean | null = null) => {
+  const store = createStore(logoutAuditSucceeded)
+  // Spy before render so the dispatch reference the component captures is the spied one.
+  const dispatchSpy = jest.spyOn(store, 'dispatch')
+  const utils = render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuSessionTimeout isAuthenticated={isAuthenticated} />
+      </AppTestWrapper>
+    </Provider>,
+  )
+  return { ...utils, store, dispatchSpy }
+}
+
+describe('GluuSessionTimeout', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useFakeTimers()
+    capturedHandlers = {}
+  })
+
+  afterEach(() => {
+    act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    jest.useRealTimers()
+  })
+
+  it('does not show the timeout dialog initially', () => {
+    renderTimeout(true)
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('registers the idle timer with idle/active handlers', () => {
+    renderTimeout(true)
+    expect(typeof capturedHandlers.onIdle).toBe('function')
+    expect(typeof capturedHandlers.onActive).toBe('function')
+  })
+
+  it('disables the idle timer when the user is not authenticated', () => {
+    renderTimeout(false)
+    expect(capturedHandlers.disabled).toBe(true)
+  })
+
+  it('opens the timeout dialog with the countdown after idle + delay', () => {
+    renderTimeout(true)
+    act(() => {
+      capturedHandlers.onIdle?.()
+      jest.advanceTimersByTime(1000)
+    })
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('counts down each second while the dialog is open', () => {
+    renderTimeout(true)
+    act(() => {
+      capturedHandlers.onIdle?.()
+      jest.advanceTimersByTime(1000)
+    })
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    act(() => {
+      jest.advanceTimersByTime(1000)
+    })
+    // Dialog is still open partway through the countdown.
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('closes the dialog and dispatches a logout audit when the countdown reaches zero', () => {
+    const { dispatchSpy } = renderTimeout(true)
+    act(() => {
+      capturedHandlers.onIdle?.()
+      jest.advanceTimersByTime(1000)
+    })
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    dispatchSpy.mockClear()
+    act(() => {
+      // Run well past the full countdown (starts at 10, fires logout after it hits 0).
+      jest.advanceTimersByTime(15 * 1000)
+    })
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ type: expect.stringContaining('auditLogoutLogs') }),
+    )
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('navigates to logout once the logout audit succeeds', () => {
+    renderTimeout(true, true)
+    expect(mockNavigateToRoute).toHaveBeenCalledWith('/admin/logout')
+  })
+
+  it('resets the idle timer when authenticated', () => {
+    renderTimeout(true)
+    expect(mockReset).toHaveBeenCalled()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuSessionTimeoutDialog.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuSessionTimeoutDialog.test.tsx
new file mode 100644
index 000000000..0e7a3c609
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuSessionTimeoutDialog.test.tsx
@@ -0,0 +1,64 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuSessionTimeoutDialog from 'Routes/Apps/Gluu/GluuSessionTimeoutDialog'
+import type { SessionTimeoutDialogProps } from 'Routes/Apps/Gluu/types'
+
+const baseProps = (
+  overrides: Partial<SessionTimeoutDialogProps> = {},
+): SessionTimeoutDialogProps => ({
+  open: true,
+  countdown: 30,
+  onLogout: jest.fn(),
+  onContinue: jest.fn(),
+  ...overrides,
+})
+
+const renderDialog = (props: SessionTimeoutDialogProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuSessionTimeoutDialog {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuSessionTimeoutDialog', () => {
+  it('renders nothing when open is false', () => {
+    renderDialog(baseProps({ open: false }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('renders the dialog with the title and countdown message when open', () => {
+    renderDialog(baseProps({ countdown: 30 }))
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Session Timeout')).toBeInTheDocument()
+    expect(
+      screen.getByText('The current session is about to expire in 30 seconds.'),
+    ).toBeInTheDocument()
+  })
+
+  it('renders Continue and Logout buttons', () => {
+    renderDialog(baseProps())
+    expect(screen.getByRole('button', { name: /continue session/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /logout/i })).toBeInTheDocument()
+  })
+
+  it('calls onContinue when the Continue button is clicked', () => {
+    const onContinue = jest.fn()
+    renderDialog(baseProps({ onContinue }))
+    fireEvent.click(screen.getByRole('button', { name: /continue session/i }))
+    expect(onContinue).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onLogout when the Logout button is clicked', () => {
+    const onLogout = jest.fn()
+    renderDialog(baseProps({ onLogout }))
+    fireEvent.click(screen.getByRole('button', { name: /logout/i }))
+    expect(onLogout).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onContinue when the close (X) button is clicked', () => {
+    const onContinue = jest.fn()
+    renderDialog(baseProps({ onContinue }))
+    fireEvent.click(screen.getByRole('button', { name: /close/i }))
+    expect(onContinue).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuTabs.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuTabs.test.tsx
new file mode 100644
index 000000000..842b8587a
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuTabs.test.tsx
@@ -0,0 +1,86 @@
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuTabs from 'Routes/Apps/Gluu/GluuTabs'
+import type { GluuTabsProps } from 'Routes/Apps/Gluu/types/GluuComponentPropsTypes'
+
+const baseProps = (overrides: Partial<GluuTabsProps> = {}): GluuTabsProps => ({
+  tabNames: ['General', 'Advanced'],
+  tabToShow: (id: string) => <div>Panel {id}</div>,
+  ...overrides,
+})
+
+const renderTabs = (props: GluuTabsProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuTabs {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuTabs', () => {
+  it('renders a tab per tabNames entry with a data-testid', () => {
+    renderTabs(baseProps())
+    expect(screen.getByTestId('General')).toBeInTheDocument()
+    expect(screen.getByTestId('Advanced')).toBeInTheDocument()
+    expect(screen.getAllByRole('tab')).toHaveLength(2)
+  })
+
+  it('renders the active tab panel content and hides inactive panels', () => {
+    renderTabs(baseProps())
+    expect(screen.getByText('Panel General')).toBeInTheDocument()
+
+    const panels = screen.getAllByRole('tabpanel', { hidden: true })
+    expect(panels).toHaveLength(2)
+    expect(panels[0]).not.toHaveAttribute('hidden')
+    expect(panels[1]).toHaveAttribute('hidden')
+  })
+
+  it('switches the panel and calls onTabChange when a tab is clicked', () => {
+    const onTabChange = jest.fn()
+    renderTabs(baseProps({ onTabChange }))
+
+    fireEvent.click(screen.getByTestId('Advanced'))
+
+    expect(onTabChange).toHaveBeenCalledTimes(1)
+    expect(onTabChange).toHaveBeenCalledWith(1)
+    expect(screen.getByText('Panel Advanced')).toBeInTheDocument()
+  })
+
+  it('selects the initial tab according to defaultTab', () => {
+    renderTabs(baseProps({ defaultTab: 1 }))
+    expect(screen.getByText('Panel Advanced')).toBeInTheDocument()
+
+    const panels = screen.getAllByRole('tabpanel', { hidden: true })
+    expect(panels[0]).toHaveAttribute('hidden')
+    expect(panels[1]).not.toHaveAttribute('hidden')
+  })
+
+  it('renders the rightAction when provided', () => {
+    renderTabs(baseProps({ rightAction: <button type="button">Extra Action</button> }))
+    expect(screen.getByRole('button', { name: 'Extra Action' })).toBeInTheDocument()
+  })
+
+  it('supports object tab entries and uses their id for tabToShow', () => {
+    renderTabs(
+      baseProps({
+        tabNames: [
+          { name: 'First', id: 'first-id' },
+          { name: 'Second', id: 'second-id' },
+        ],
+        tabToShow: (id: string) => <div>Content for {id}</div>,
+      }),
+    )
+
+    expect(screen.getByTestId('First')).toBeInTheDocument()
+    expect(screen.getByTestId('Second')).toBeInTheDocument()
+    expect(screen.getByText('Content for first-id')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('Second'))
+    expect(screen.getByText('Content for second-id')).toBeInTheDocument()
+  })
+
+  it('renders the tab label inside each tab element', () => {
+    renderTabs(baseProps())
+    const generalTab = screen.getByTestId('General')
+    expect(within(generalTab).getByText('General')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuThemeFormFooter.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuThemeFormFooter.test.tsx
new file mode 100644
index 000000000..78f09e078
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuThemeFormFooter.test.tsx
@@ -0,0 +1,191 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuThemeFormFooter from 'Routes/Apps/Gluu/GluuThemeFormFooter'
+import type { GluuThemeFormFooterProps } from 'Routes/Apps/Gluu/types/GluuComponentPropsTypes'
+
+type FooterOverrides = Partial<GluuThemeFormFooterProps>
+
+const baseProps = (overrides: FooterOverrides = {}): GluuThemeFormFooterProps => {
+  if (overrides.applyButtonType === 'button') {
+    return { ...overrides, applyButtonType: 'button', onApply: overrides.onApply ?? jest.fn() }
+  }
+  return { ...overrides, applyButtonType: 'submit' }
+}
+
+const renderFooter = (props: GluuThemeFormFooterProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuThemeFormFooter {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuThemeFormFooter', () => {
+  it('renders nothing when no buttons are enabled', () => {
+    const { container } = renderFooter(baseProps())
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders the Back button with its default label as text and title', () => {
+    renderFooter(baseProps({ showBack: true }))
+    const backButton = screen.getByRole('button', { name: 'Back' })
+    expect(backButton).toBeInTheDocument()
+    expect(backButton).toHaveAttribute('title', 'Back')
+    expect(screen.getByText('Back')).toBeInTheDocument()
+  })
+
+  it('renders the Cancel button when showCancel is set', () => {
+    renderFooter(baseProps({ showCancel: true }))
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' })
+    expect(cancelButton).toBeInTheDocument()
+    expect(cancelButton).toHaveAttribute('title', 'Cancel')
+  })
+
+  it('renders the Apply button when showApply is set', () => {
+    renderFooter(baseProps({ showApply: true }))
+    const applyButton = screen.getByRole('button', { name: 'Apply' })
+    expect(applyButton).toBeInTheDocument()
+    expect(applyButton).toHaveAttribute('title', 'Apply')
+  })
+
+  it('disables the Back button when disableBack is true', () => {
+    renderFooter(baseProps({ showBack: true, disableBack: true }))
+    expect(screen.getByRole('button', { name: 'Back' })).toBeDisabled()
+  })
+
+  it('disables the Cancel button when disableCancel is true', () => {
+    renderFooter(baseProps({ showCancel: true, disableCancel: true }))
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled()
+  })
+
+  it('disables the Apply button when disableApply is true', () => {
+    renderFooter(baseProps({ showApply: true, disableApply: true }))
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled()
+  })
+
+  it('disables both Apply and Cancel when isLoading is true', () => {
+    renderFooter(
+      baseProps({ showBack: true, showApply: true, showCancel: true, isLoading: true }),
+    )
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled()
+  })
+
+  it('calls onCancel when the Cancel button is clicked', () => {
+    const onCancel = jest.fn()
+    renderFooter(baseProps({ showCancel: true, onCancel }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onBack when the Back button is clicked', () => {
+    const onBack = jest.fn()
+    renderFooter(baseProps({ showBack: true, onBack }))
+    fireEvent.click(screen.getByRole('button', { name: 'Back' }))
+    expect(onBack).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders and clicks the Back button without onBack (navigates home) without error', () => {
+    renderFooter(baseProps({ showBack: true }))
+    const backButton = screen.getByRole('button', { name: 'Back' })
+    expect(() => fireEvent.click(backButton)).not.toThrow()
+  })
+
+  it('calls onApply when applyButtonType is "button" and Apply is clicked', () => {
+    const onApply = jest.fn()
+    renderFooter(baseProps({ showApply: true, applyButtonType: 'button', onApply }))
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not attach an onClick handler when applyButtonType is "submit"', () => {
+    const onApply = jest.fn()
+    renderFooter(baseProps({ showApply: true, applyButtonType: 'submit', onApply }))
+    const applyButton = screen.getByRole('button', { name: 'Apply' })
+    expect(applyButton).toHaveAttribute('type', 'submit')
+    fireEvent.click(applyButton)
+    expect(onApply).not.toHaveBeenCalled()
+  })
+
+  it('uses custom labels for all buttons when provided', () => {
+    renderFooter(
+      baseProps({
+        showBack: true,
+        showCancel: true,
+        showApply: true,
+        backButtonLabel: 'Go Back',
+        cancelButtonLabel: 'Discard',
+        applyButtonLabel: 'Save',
+      }),
+    )
+    expect(screen.getByRole('button', { name: 'Go Back' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Discard' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
+  })
+
+  describe('step navigation', () => {
+    it('renders the prev/next buttons and the "1 / N" label', () => {
+      renderFooter(
+        baseProps({
+          showApply: true,
+          stepNavigation: {
+            currentIndex: 0,
+            total: 3,
+            onPrev: jest.fn(),
+            onNextStep: jest.fn(),
+          },
+        }),
+      )
+      expect(screen.getByText('1 / 3')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument()
+    })
+
+    it('disables prev on the first step', () => {
+      renderFooter(
+        baseProps({
+          showApply: true,
+          stepNavigation: {
+            currentIndex: 0,
+            total: 3,
+            onPrev: jest.fn(),
+            onNextStep: jest.fn(),
+          },
+        }),
+      )
+      expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled()
+      expect(screen.getByRole('button', { name: /next/i })).not.toBeDisabled()
+    })
+
+    it('disables next on the last step', () => {
+      renderFooter(
+        baseProps({
+          showApply: true,
+          stepNavigation: {
+            currentIndex: 2,
+            total: 3,
+            onPrev: jest.fn(),
+            onNextStep: jest.fn(),
+          },
+        }),
+      )
+      expect(screen.getByText('3 / 3')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /next/i })).toBeDisabled()
+      expect(screen.getByRole('button', { name: /previous/i })).not.toBeDisabled()
+    })
+
+    it('calls onNextStep and onPrev when the step buttons are clicked', () => {
+      const onPrev = jest.fn()
+      const onNextStep = jest.fn()
+      renderFooter(
+        baseProps({
+          showApply: true,
+          stepNavigation: { currentIndex: 1, total: 3, onPrev, onNextStep },
+        }),
+      )
+      fireEvent.click(screen.getByRole('button', { name: /next/i }))
+      fireEvent.click(screen.getByRole('button', { name: /previous/i }))
+      expect(onNextStep).toHaveBeenCalledTimes(1)
+      expect(onPrev).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuTimeoutModal.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuTimeoutModal.test.tsx
new file mode 100644
index 000000000..0e3cf68f9
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuTimeoutModal.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuTimeoutModal from 'Routes/Apps/Gluu/GluuTimeoutModal'
+import { reducer as initReducer } from 'Redux/features/initSlice'
+
+const createTestStore = (isTimeout: boolean, authServerHost = ''): Store =>
+  configureStore({
+    reducer: combineReducers({
+      initReducer,
+      authReducer: (state = { config: { authServerHost } }) => state,
+    }),
+    preloadedState: { initReducer: { isTimeout } },
+  })
+
+const renderModal = (isTimeout: boolean, authServerHost = '') => {
+  const store = createTestStore(isTimeout, authServerHost)
+  const result = render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuTimeoutModal />
+      </AppTestWrapper>
+    </Provider>,
+  )
+  return { store, ...result }
+}
+
+describe('GluuTimeoutModal', () => {
+  it('renders the timeout dialog when isTimeout is true', () => {
+    renderModal(true)
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Request Timeout')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Try Again' })).toBeInTheDocument()
+  })
+
+  it('renders nothing when isTimeout is false', () => {
+    renderModal(false)
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.queryByText('Request Timeout')).not.toBeInTheDocument()
+  })
+
+  it('clears the timeout state when the close button is clicked', () => {
+    const { store } = renderModal(true)
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[0])
+    expect(store.getState().initReducer.isTimeout).toBe(false)
+  })
+
+  it('clears the timeout state when Try Again is clicked', () => {
+    const { store } = renderModal(true, '')
+    fireEvent.click(screen.getByRole('button', { name: 'Try Again' }))
+    expect(store.getState().initReducer.isTimeout).toBe(false)
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuUploadFile.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuUploadFile.test.tsx
new file mode 100644
index 000000000..40f52bc81
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuUploadFile.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuUploadFile from 'Routes/Apps/Gluu/GluuUploadFile'
+import type { GluuUploadFileProps } from 'Routes/Apps/Gluu/types'
+
+const baseProps = (overrides: Partial<GluuUploadFileProps> = {}): GluuUploadFileProps => ({
+  onDrop: jest.fn(),
+  onClearFiles: jest.fn(),
+  placeholder: 'Drop your file here',
+  ...overrides,
+})
+
+const renderUploadFile = (props: GluuUploadFileProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuUploadFile {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuUploadFile', () => {
+  it('renders the placeholder text when no file is selected', () => {
+    renderUploadFile(baseProps())
+    expect(screen.getByText('Drop your file here')).toBeInTheDocument()
+  })
+
+  it('renders a hidden file input', () => {
+    const { container } = renderUploadFile(baseProps())
+    expect(container.querySelector('input[type="file"]')).toBeInTheDocument()
+  })
+
+  it('renders the file name and a remove button when fileName is provided', () => {
+    renderUploadFile(baseProps({ fileName: 'cert.jwt' }))
+    expect(screen.getByText('cert.jwt')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument()
+  })
+
+  it('calls onClearFiles when the remove button is clicked', () => {
+    const onClearFiles = jest.fn()
+    renderUploadFile(baseProps({ fileName: 'cert.jwt', onClearFiles }))
+    fireEvent.click(screen.getByRole('button', { name: /remove/i }))
+    expect(onClearFiles).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides the remove button when showClearButton is false', () => {
+    renderUploadFile(baseProps({ fileName: 'cert.jwt', showClearButton: false }))
+    expect(screen.queryByRole('button', { name: /remove/i })).not.toBeInTheDocument()
+  })
+
+  it('disables the remove button when disabled is true', () => {
+    renderUploadFile(baseProps({ fileName: 'cert.jwt', disabled: true }))
+    expect(screen.getByRole('button', { name: /remove/i })).toBeDisabled()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuViewDetailsModal.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuViewDetailsModal.test.tsx
new file mode 100644
index 000000000..d23ba31ce
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuViewDetailsModal.test.tsx
@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuViewDetailModal from 'Routes/Apps/Gluu/GluuViewDetailsModal'
+import type { GluuViewDetailModalProps } from 'Routes/Apps/Gluu/types/GluuComponentPropsTypes'
+
+const baseProps = (
+  overrides: Partial<GluuViewDetailModalProps> = {},
+): GluuViewDetailModalProps => ({
+  isOpen: true,
+  handleClose: jest.fn(),
+  children: <div>Detail content</div>,
+  ...overrides,
+})
+
+const renderModal = (props: GluuViewDetailModalProps) =>
+  render(
+    <AppTestWrapper>
+      <GluuViewDetailModal {...props} />
+    </AppTestWrapper>,
+  )
+
+describe('GluuViewDetailModal', () => {
+  it('renders the children and the provided title when open', () => {
+    renderModal(baseProps({ title: 'My Details' }))
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('My Details')).toBeInTheDocument()
+    expect(screen.getByText('Detail content')).toBeInTheDocument()
+  })
+
+  it('renders nothing when isOpen is false', () => {
+    renderModal(baseProps({ isOpen: false }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.queryByText('Detail content')).not.toBeInTheDocument()
+  })
+
+  it('renders the default footer close button and calls handleClose when clicked', () => {
+    const handleClose = jest.fn()
+    renderModal(baseProps({ handleClose }))
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[closeButtons.length - 1])
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides the footer when hideFooter is true', () => {
+    renderModal(baseProps({ hideFooter: true }))
+    // Only the header X close button remains (aria-label close), no footer "Close" text button
+    expect(screen.queryByText('Close')).not.toBeInTheDocument()
+  })
+
+  it('renders a custom header when provided', () => {
+    renderModal(baseProps({ customHeader: <div>Custom Header</div>, title: 'Ignored Title' }))
+    expect(screen.getByText('Custom Header')).toBeInTheDocument()
+    expect(screen.queryByText('Ignored Title')).not.toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuWebhookCommitDialog.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuWebhookCommitDialog.test.tsx
new file mode 100644
index 000000000..889719494
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuWebhookCommitDialog.test.tsx
@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuWebhookCommitDialog from 'Routes/Apps/Gluu/GluuWebhookCommitDialog'
+import type { GluuWebhookCommitDialogProps } from 'Routes/Apps/Gluu/types/index'
+
+const mockUsePermission = jest.fn(() => ({ canRead: true, canWrite: true, canDelete: true }))
+jest.mock('@/cedarling/hooks/usePermission', () => ({
+  usePermission: () => mockUsePermission(),
+}))
+
+const mockOnCloseModal = jest.fn()
+const mockWebhookTriggerModal = jest.fn((): ReactNode => null)
+const mockUseWebhookDialogAction = jest.fn(() => ({
+  webhookTriggerModal: mockWebhookTriggerModal,
+  onCloseModal: mockOnCloseModal,
+  webhookCheckComplete: true,
+}))
+jest.mock('Utils/hooks', () => ({
+  useWebhookDialogAction: () => mockUseWebhookDialogAction(),
+}))
+
+const createTestStore = (webhookModal = false): Store =>
+  configureStore({
+    reducer: combineReducers({
+      webhookReducer: (state = { webhookModal }) => state,
+    }),
+  })
+
+const baseProps = (
+  overrides: Partial<GluuWebhookCommitDialogProps> = {},
+): GluuWebhookCommitDialogProps => ({
+  handler: jest.fn(),
+  modal: true,
+  onAccept: jest.fn(),
+  webhookFeature: 'test_feature',
+  ...overrides,
+})
+
+const renderDialog = (props: GluuWebhookCommitDialogProps, webhookModal = false) => {
+  const store = createTestStore(webhookModal)
+  return render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuWebhookCommitDialog {...props} />
+      </AppTestWrapper>
+    </Provider>,
+  )
+}
+
+describe('GluuWebhookCommitDialog', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUsePermission.mockReturnValue({ canRead: true, canWrite: true, canDelete: true })
+    mockWebhookTriggerModal.mockReturnValue(null)
+    mockUseWebhookDialogAction.mockReturnValue({
+      webhookTriggerModal: mockWebhookTriggerModal,
+      onCloseModal: mockOnCloseModal,
+      webhookCheckComplete: true,
+    })
+  })
+
+  it('renders nothing when modal is false', () => {
+    const { container } = renderDialog(baseProps({ modal: false }))
+    expect(container).toBeEmptyDOMElement()
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('renders a blocking loader while the webhook check is incomplete', () => {
+    mockUseWebhookDialogAction.mockReturnValue({
+      webhookTriggerModal: mockWebhookTriggerModal,
+      onCloseModal: mockOnCloseModal,
+      webhookCheckComplete: false,
+    })
+    renderDialog(baseProps())
+    // The commit dialog is not shown while loading.
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('delegates to the commit dialog when the check is complete and no webhook modal', () => {
+    renderDialog(baseProps())
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('renders the webhook trigger modal when webhookModal is set and user can read webhooks', () => {
+    mockWebhookTriggerModal.mockReturnValue(<div data-testid="webhook-trigger">Trigger</div>)
+    renderDialog(baseProps(), true)
+    expect(screen.getByTestId('webhook-trigger')).toBeInTheDocument()
+    expect(mockWebhookTriggerModal).toHaveBeenCalled()
+  })
+
+  it('falls back to the commit dialog when webhookModal is set but read permission is missing', () => {
+    mockUsePermission.mockReturnValue({ canRead: false, canWrite: true, canDelete: true })
+    mockWebhookTriggerModal.mockReturnValue(<div data-testid="webhook-trigger">Trigger</div>)
+    renderDialog(baseProps(), true)
+    expect(screen.queryByTestId('webhook-trigger')).not.toBeInTheDocument()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('closes via handler and onCloseModal when the dialog close button is clicked', () => {
+    const handler = jest.fn()
+    renderDialog(baseProps({ handler }))
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[0])
+    expect(handler).toHaveBeenCalledTimes(1)
+    // onCloseModal is shared by the wrapper's handleClose and the inner dialog; assert it fired.
+    expect(mockOnCloseModal).toHaveBeenCalled()
+  })
+
+  it('renders the passed operations in the commit dialog', () => {
+    renderDialog(
+      baseProps({
+        operations: [{ label: 'displayName', value: 'New Name', path: '/displayName' }],
+      }),
+    )
+    expect(screen.getByText(/New Name/)).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuWebhookExecutionDialog.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuWebhookExecutionDialog.test.tsx
new file mode 100644
index 000000000..cbd331736
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuWebhookExecutionDialog.test.tsx
@@ -0,0 +1,133 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuWebhookExecutionDialog from 'Routes/Apps/Gluu/GluuWebhookExecutionDialog'
+import { reducer as webhookReducer } from 'Plugins/admin/redux/features/WebhookSlice'
+import type { WebhookSliceState, WebhookTriggerResponseItem } from 'Plugins/admin/redux/types'
+
+const mockCanRead = { value: true }
+jest.mock('@/cedarling/hooks/usePermission', () => ({
+  usePermission: () => ({ canRead: mockCanRead.value, canWrite: true, canDelete: true }),
+}))
+
+const defaultState: WebhookSliceState = {
+  webhookModal: false,
+  triggerWebhookInProgress: false,
+  webhookTriggerResults: [],
+  featureToTrigger: '',
+  showWebhookExecutionDialog: false,
+}
+
+const createTestStore = (overrides: Partial<WebhookSliceState> = {}): Store =>
+  configureStore({
+    reducer: combineReducers({ webhookReducer }),
+    preloadedState: { webhookReducer: { ...defaultState, ...overrides } },
+  })
+
+const renderDialog = (overrides: Partial<WebhookSliceState> = {}) => {
+  const store = createTestStore(overrides)
+  const utils = render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuWebhookExecutionDialog />
+      </AppTestWrapper>
+    </Provider>,
+  )
+  return { ...utils, store }
+}
+
+const successResult: WebhookTriggerResponseItem = {
+  success: true,
+  responseObject: { webhookId: 'wh-1', webhookName: 'Welcome Hook' },
+}
+
+const failedResult: WebhookTriggerResponseItem = {
+  success: false,
+  responseCode: 500,
+  responseMessage: 'Internal Server Error',
+  responseObject: { webhookId: 'wh-2', webhookName: 'Audit Hook' },
+}
+
+describe('GluuWebhookExecutionDialog', () => {
+  beforeEach(() => {
+    mockCanRead.value = true
+  })
+
+  it('renders nothing when the dialog is closed and there are no results', () => {
+    renderDialog()
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('renders nothing when the user lacks webhook read permission', () => {
+    mockCanRead.value = false
+    renderDialog({ showWebhookExecutionDialog: true, webhookTriggerResults: [successResult] })
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('does not render the dialog when shown but there are no results', () => {
+    renderDialog({ showWebhookExecutionDialog: true })
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('renders the dialog with title and description when shown with results', () => {
+    renderDialog({ showWebhookExecutionDialog: true, webhookTriggerResults: [successResult] })
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Webhook Execution Information')).toBeInTheDocument()
+  })
+
+  it('renders the execution results table with each webhook row', () => {
+    renderDialog({
+      showWebhookExecutionDialog: true,
+      webhookTriggerResults: [successResult, failedResult],
+    })
+    expect(screen.getByRole('table', { name: /webhook execution table/i })).toBeInTheDocument()
+    expect(screen.getByText('Welcome Hook')).toBeInTheDocument()
+    expect(screen.getByText('Audit Hook')).toBeInTheDocument()
+    expect(screen.getByText('wh-1')).toBeInTheDocument()
+    expect(screen.getByText('wh-2')).toBeInTheDocument()
+  })
+
+  it('shows success and error status with response details for failed webhooks', () => {
+    renderDialog({
+      showWebhookExecutionDialog: true,
+      webhookTriggerResults: [successResult, failedResult],
+    })
+    expect(screen.getByText('Success')).toBeInTheDocument()
+    expect(screen.getByText('Error')).toBeInTheDocument()
+    expect(screen.getByText('500')).toBeInTheDocument()
+    expect(screen.getByText('Internal Server Error')).toBeInTheDocument()
+  })
+
+  it('treats a string "true" success value as success', () => {
+    renderDialog({
+      showWebhookExecutionDialog: true,
+      webhookTriggerResults: [{ success: 'true', responseObject: { webhookName: 'Str Hook' } }],
+    })
+    expect(screen.getByText('Success')).toBeInTheDocument()
+    expect(screen.queryByText('Error')).not.toBeInTheDocument()
+  })
+
+  it('closes the dialog when the OK button is clicked', () => {
+    const { store } = renderDialog({
+      showWebhookExecutionDialog: true,
+      webhookTriggerResults: [successResult],
+    })
+    fireEvent.click(screen.getByRole('button', { name: /^ok$/i }))
+    const state = store.getState() as { webhookReducer: WebhookSliceState }
+    expect(state.webhookReducer.showWebhookExecutionDialog).toBe(false)
+    expect(state.webhookReducer.webhookTriggerResults).toHaveLength(0)
+  })
+
+  it('closes the dialog when the header close button is clicked', () => {
+    const { store } = renderDialog({
+      showWebhookExecutionDialog: true,
+      webhookTriggerResults: [successResult],
+    })
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[closeButtons.length - 1])
+    const state = store.getState() as { webhookReducer: WebhookSliceState }
+    expect(state.webhookReducer.showWebhookExecutionDialog).toBe(false)
+  })
+})