---
id: w4/m15/t001
title: Introduce a Security & Compliance section grouping on Settings
worker: worker4
status: done
estimate: 40m
depends_on: []
---

## Objective

Add a labelled **Security & Compliance** section grouping to the account Settings page so security/compliance cards are visually and structurally distinct from the flat Kratos-settings / Team / API Keys column. Structure it so the future session-management card (w4/006) and MFA card (m11) can drop in alongside without further restructuring.

## Context

- `dashboard/src/features/auth/pages/settings-page/index.tsx` is today a single flat column: Kratos `Settings` flow → `<TeamPanel/>` → `<ApiKeysPanel/>` → `<AuditLogPanel/>`, all bare siblings inside `space-y-6` (`mx-auto w-full max-w-2xl`).
- The dashboard's visual-layout rhythm is documented in `dashboard/CLAUDE.md` (§ Visual layout pattern): `space-y-6` between sections, shadcn `Card` primitives, `CardTitle` sizing (no oversized headings in in-app content).
- Every user-visible string goes through `useTranslations()` `t()` — add keys under the `auth.*` namespace (locale files `src/features/auth/locales/{en,zh}.ts`), following the existing settings-page keys (`auth.settingsTitle`, `auth.settingsSubtitle`).
- Render's real IA: audit-log export lives under **Workspace Settings → Compliance**; bex's sibling security surfaces (sessions w4/006, MFA m11) are "Security". Name the grouping "Security & Compliance" to host both.

## Steps

1. Introduce a section grouping in `settings-page/index.tsx` — a section heading (translated, e.g. `auth.securityComplianceSection`) plus a container that groups its cards, matching the `space-y-6` section rhythm and shadcn card treatment.
2. Add the translation keys to `src/features/auth/locales/en.ts` and `zh.ts` (prefixed `auth.`).
3. Leave the actual card move to t002 — this task establishes the empty/near-empty grouping structure and heading so t002 is a clean relocation.

## Files

- `dashboard/src/features/auth/pages/settings-page/index.tsx`
- `dashboard/src/features/auth/locales/en.ts`, `dashboard/src/features/auth/locales/zh.ts`

## Acceptance criteria

- [ ] Settings page renders a translated "Security & Compliance" section heading.
- [ ] The grouping uses the repo's documented layout rhythm (`space-y-6`, shadcn `Card`, no oversized headings).
- [ ] New strings go through `t()` with `auth.`-prefixed keys present in both `en` and `zh`.
- [ ] `yarn typecheck` + `yarn lint` green.

## Out of scope

- Moving the Audit Log card (t002).
- Regrouping Team / API Keys under their own section — this milestone only introduces the security/compliance grouping; a broader Settings IA restructure is separate.
- Implementing the session-management (w4/006) or MFA (m11) cards — only leaving room for them.
