refactor: enhance settings and auth components for improved navigation and user feedback

Updated the Settings and Auth components to include better navigation handling by adding search parameters for tab selection. Enhanced the Access component to utilize badges for status indicators, improving visual clarity. Refactored the Schedule component to streamline job status display with badges, ensuring a more cohesive user experience. Additionally, integrated client directives in UI components for better performance.
2026-07-09 23:39:10 +07:00
parent bbcf9d76d9
commit aa1779170a
48 changed files with 3019 additions and 511 deletions
@@ -0,0 +1,8 @@
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":0,"jobs":0,"loading":true,"modulesError":false,"jobsError":false},"timestamp":1783613834659}
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":4,"jobs":0,"loading":false,"modulesError":false,"jobsError":false},"timestamp":1783613834740}
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":0,"jobs":0,"loading":true,"modulesError":false,"jobsError":false},"timestamp":1783613854903}
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":4,"jobs":0,"loading":false,"modulesError":false,"jobsError":false},"timestamp":1783613854967}
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":0,"jobs":0,"loading":true,"modulesError":false,"jobsError":false},"timestamp":1783613897698}
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":4,"jobs":0,"loading":false,"modulesError":false,"jobsError":false},"timestamp":1783613897769}
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":4,"jobs":0,"loading":false,"modulesError":false,"jobsError":false},"timestamp":1783614164222}
+{"sessionId":"ce85d7","runId":"pre-fix","hypothesisId":"C","location":"schedule.tsx:mount","message":"schedule page data loaded","data":{"modules":4,"jobs":0,"loading":false,"modulesError":false,"jobsError":false},"timestamp":1783614181455}
@@ -1,5 +1,5 @@
-import { Minus, TrendingDown, TrendingUp } from 'lucide-react'
-
+import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
+import { Badge } from '@/components/reui/badge'
 import { cn } from '@evobgp/ui/lib/utils'

 export type AnalyticsKpiItem = {
@@ -12,39 +12,42 @@ export type AnalyticsKpiItem = {
  }
 }

-const TONE_CLASS = {
-  success: 'text-success',
-  warning: 'text-warning',
-  destructive: 'text-destructive',
-  muted: 'text-muted-foreground',
-} as const
-
-function DeltaIcon({ direction }: { direction: AnalyticsKpiItem['delta'] extends infer D ? D extends { direction: infer Dir } ? Dir : never : never }) {
-  if (direction === 'up') return <TrendingUp className="size-3" />
-  if (direction === 'down') return <TrendingDown className="size-3" />
-  return <Minus className="size-3" />
+function deltaBadgeVariant(
+  tone?: 'success' | 'warning' | 'destructive' | 'muted',
+): 'success-light' | 'warning-light' | 'destructive-light' | 'outline' {
+  if (tone === 'success') return 'success-light'
+  if (tone === 'warning') return 'warning-light'
+  if (tone === 'destructive') return 'destructive-light'
+  return 'outline'
 }

-export function AnalyticsKpiRow({ items, className }: { items: AnalyticsKpiItem[]; className?: string }) {
+function toKpiItem(item: AnalyticsKpiItem): KpiStatItem {
+  return {
+    id: item.label,
+    value: item.value,
+    label: item.label,
+    footer: item.delta ? (
+      <Badge variant={deltaBadgeVariant(item.delta.tone)} size="sm">
+        {item.delta.label}
+      </Badge>
+    ) : undefined,
+  }
+}
+
+/** Compact KPI row inside analytics panels (stats-12 embedded tiles). */
+export function AnalyticsKpiRow({
+  items,
+  className,
+}: {
+  items: AnalyticsKpiItem[]
+  className?: string
+}) {
  return (
-    <div className={cn('grid gap-4 sm:grid-cols-3', className)}>
-      {items.map((item) => (
-        <div key={item.label} className="min-w-0 space-y-1">
-          <p className="text-xs text-muted-foreground">{item.label}</p>
-          <p className="text-2xl font-semibold tracking-tight tabular-nums">{item.value}</p>
-          {item.delta ? (
-            <p
-              className={cn(
-                'flex items-center gap-1 text-xs',
-                TONE_CLASS[item.delta.tone ?? 'muted'],
-              )}
-            >
-              <DeltaIcon direction={item.delta.direction} />
-              {item.delta.label}
-            </p>
-          ) : null}
-        </div>
-      ))}
-    </div>
+    <KpiStatGrid
+      items={items.map(toKpiItem)}
+      embedded
+      className={cn(className)}
+      aria-label="Показатели"
+    />
  )
 }
@@ -40,14 +40,12 @@ export function BadgeTabs({
      value={value}
      defaultValue={defaultValue}
      onValueChange={onValueChange}
+      orientation="horizontal"
      className={cn('w-full', className)}
    >
      <TabsList
        variant="line"
-        className={cn(
-          'mb-4 w-full justify-start gap-6',
-          listClassName,
-        )}
+        className={cn('mb-3.5 w-full justify-start gap-6', listClassName)}
      >
        {items.map((item) => (
          <TabsTrigger key={item.value} value={item.value} className="gap-2">
@@ -0,0 +1,116 @@
+"use client"
+
+import { useState, type ComponentType } from "react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@evobgp/ui/components/tabs"
+
+import { BillingTab } from "./billing-tab"
+import { SETTINGS_TAB_ITEMS } from "./data"
+import { NotificationsTab } from "./notifications-tab"
+import { ProfileTab } from "./profile-tab"
+import { SecurityTab } from "./security-tab"
+
+const TAB_COMPONENTS: Record<string, ComponentType> = {
+  profile: ProfileTab,
+  security: SecurityTab,
+  notifications: NotificationsTab,
+  billing: BillingTab,
+}
+
+// ── Settings Navigation ──
+
+function SettingsNavigation({
+  isMobile,
+  activeValue,
+}: {
+  isMobile: boolean
+  activeValue: string
+}) {
+  return (
+    <div className={cn("min-w-0", isMobile ? "w-full" : "w-40 shrink-0")}>
+      {isMobile ? (
+        <div className="-mx-1 overflow-x-auto px-1 pb-1">
+          <TabsList className="h-auto w-max min-w-max justify-start gap-1 bg-transparent p-0">
+            {SETTINGS_TAB_ITEMS.map((tab) => (
+              <TabsTrigger
+                key={tab.value}
+                value={tab.value}
+                className={cn(
+                  "w-full justify-start gap-3 px-3 py-1.5 shadow-none",
+                  activeValue === tab.value ? "bg-muted!" : "bg-transparent"
+                )}
+              >
+                {tab.icon}
+                <span className="truncate">{tab.label}</span>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+      ) : (
+        <TabsList className="h-auto w-full flex-col items-stretch gap-1 bg-transparent p-0">
+          {SETTINGS_TAB_ITEMS.map((tab) => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className={cn(
+                "w-full justify-start gap-3 px-3 py-1.5 shadow-none",
+                activeValue === tab.value ? "bg-muted!" : "bg-transparent"
+              )}
+            >
+              {tab.icon}
+              <span className="truncate">{tab.label}</span>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      )}
+    </div>
+  )
+}
+
+export function AccountSettings() {
+  const isMobile = useIsMobile()
+  const [activeTab, setActiveTab] = useState("profile")
+
+  return (
+    <div className="w-full max-w-4xl space-y-8">
+      {/* Header */}
+      <header className="px-1">
+        <h1 className="text-xl font-semibold tracking-tight">
+          Account Settings
+        </h1>
+        <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+          Update your profile, access, notifications, and billing preferences.
+        </p>
+      </header>
+
+      {/* Tabs */}
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        orientation={isMobile ? "horizontal" : "vertical"}
+        className={cn("w-full gap-4 lg:gap-8")}
+      >
+        <SettingsNavigation isMobile={isMobile} activeValue={activeTab} />
+
+        <div className="min-w-0 flex-1">
+          {SETTINGS_TAB_ITEMS.map((tab) => {
+            const TabComponent = TAB_COMPONENTS[tab.value]
+
+            return (
+              <TabsContent key={tab.value} value={tab.value} className="mt-0">
+                <TabComponent />
+              </TabsContent>
+            )
+          })}
+        </div>
+      </Tabs>
+    </div>
+  )
+}
@@ -0,0 +1,180 @@
+import { useState } from "react"
+import { Badge } from "@/components/reui/badge"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@evobgp/ui/components/field"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@evobgp/ui/components/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+
+import { BILLING_PLANS, COUNTRIES } from "./data"
+import { SettingRow } from "./setting-row"
+import { SettingsCard } from "./settings-card"
+import { SettingsFieldGroup } from "./settings-field-group"
+import { createSelectValueHandler, getOptionLabel } from "./utils"
+
+export function BillingTab() {
+  const [country, setCountry] = useState("us")
+  const handleCountryChange = createSelectValueHandler(setCountry)
+
+  return (
+    <div className="space-y-6">
+      {/* Card */}
+      <SettingsCard title="Plan and billing" description="Current subscription">
+        <SettingsFieldGroup
+          legend="Plan and billing"
+          description="Review your current subscription and plan options."
+        >
+          {BILLING_PLANS.map((plan, index) => (
+            <SettingRow
+              key={plan.id}
+              title={plan.name}
+              titleAddon={
+                plan.current ? (
+                  <Badge variant="info-light" size="sm">
+                    Current
+                  </Badge>
+                ) : null
+              }
+              description={
+                <>
+                  <span className="text-foreground font-medium">
+                    {plan.price}
+                  </span>{" "}
+                  / {plan.period} · {plan.features.join(", ")}
+                </>
+              }
+              last={index === BILLING_PLANS.length - 1}
+            >
+              <Button variant={plan.current ? "outline" : "ghost"} size="sm">
+                {plan.current ? "Manage" : "Switch"}
+              </Button>
+            </SettingRow>
+          ))}
+        </SettingsFieldGroup>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Billing details"
+        description="Invoices and payments"
+        footer={<Button>Update billing</Button>}
+      >
+        <SettingsFieldGroup
+          legend="Billing details"
+          description="Manage invoice contacts and payment details."
+        >
+          <SettingRow
+            title="Billing email"
+            description="Receives invoices and renewal notices."
+            labelFor="settings-7-billing-email"
+          >
+            <Input
+              id="settings-7-billing-email"
+              defaultValue="billing@acme.dev"
+              type="email"
+            />
+          </SettingRow>
+
+          <SettingRow
+            title="Invoice profile"
+            description="Business details used on receipts and tax forms."
+            contentClassName="@md/field-group:w-[22rem]"
+          >
+            <FieldSet className="w-full gap-3">
+              <FieldLegend className="sr-only">Invoice profile</FieldLegend>
+              <FieldDescription className="sr-only">
+                Company identity used for invoices and tax documents.
+              </FieldDescription>
+
+              <FieldGroup className="gap-4">
+                <Field>
+                  <FieldLabel htmlFor="settings-7-company-name">
+                    Company name
+                  </FieldLabel>
+                  <Input
+                    id="settings-7-company-name"
+                    defaultValue="Acme Labs"
+                  />
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="settings-7-billing-country">
+                    Country
+                  </FieldLabel>
+                  <Select value={country} onValueChange={handleCountryChange}>
+                    <SelectTrigger
+                      id="settings-7-billing-country"
+                      className="w-full"
+                    >
+                      <SelectValue>
+                        {getOptionLabel(COUNTRIES, country)}
+                      </SelectValue>
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        {COUNTRIES.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </SettingRow>
+
+          <SettingRow
+            title="Tax ID"
+            description="Optional number used for VAT or company invoices."
+            labelFor="settings-7-tax-id"
+          >
+            <InputGroup className="w-full">
+              <InputGroupAddon align="inline-start">
+                <InputGroupText>VAT</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput
+                id="settings-7-tax-id"
+                defaultValue="US-2048-ACME"
+              />
+            </InputGroup>
+          </SettingRow>
+
+          <SettingRow
+            title="Card on file"
+            description="Used for monthly renewals."
+            last
+          >
+            <div className="flex flex-wrap items-center justify-end gap-2">
+              <span className="text-muted-foreground text-sm">
+                Visa ending in 4242
+              </span>
+              <Button variant="outline">Update</Button>
+            </div>
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,187 @@
+"use client"
+
+import { type ReactNode } from "react"
+import { UserIcon, ShieldIcon, BellIcon, CreditCardIcon, MonitorIcon, SmartphoneIcon } from "lucide-react"
+
+// ── Types ──
+
+export type SelectOption = {
+  value: string
+  label: string
+}
+
+export type BillingPlan = {
+  id: string
+  name: string
+  price: string
+  period: string
+  current: boolean
+  features: string[]
+}
+
+export type Session = {
+  id: string
+  device: string
+  browser: string
+  location: string
+  lastActive: string
+  current: boolean
+  icon: ReactNode
+}
+
+export type SettingsTabItem = {
+  value: string
+  label: string
+  icon: ReactNode
+}
+
+// ── Data ──
+
+export const SETTINGS_TAB_ITEMS: SettingsTabItem[] = [
+  {
+    value: "profile",
+    label: "My Profile",
+    icon: (
+      <UserIcon aria-hidden="true" />
+    ),
+  },
+  {
+    value: "security",
+    label: "Security",
+    icon: (
+      <ShieldIcon aria-hidden="true" />
+    ),
+  },
+  {
+    value: "notifications",
+    label: "Notifications",
+    icon: (
+      <BellIcon aria-hidden="true" />
+    ),
+  },
+  {
+    value: "billing",
+    label: "Billing",
+    icon: (
+      <CreditCardIcon aria-hidden="true" />
+    ),
+  },
+]
+
+export const TIMEZONES: SelectOption[] = [
+  { value: "utc-8", label: "UTC-8 (Pacific Time)" },
+  { value: "utc-5", label: "UTC-5 (Eastern Time)" },
+  { value: "utc+0", label: "UTC+0 (London)" },
+  { value: "utc+1", label: "UTC+1 (Berlin)" },
+  { value: "utc+9", label: "UTC+9 (Tokyo)" },
+]
+
+export const ROLES: SelectOption[] = [
+  { value: "engineering-lead", label: "Engineering Lead" },
+  { value: "developer", label: "Developer" },
+  { value: "designer", label: "Designer" },
+  { value: "product-manager", label: "Product Manager" },
+]
+
+export const COUNTRIES: SelectOption[] = [
+  { value: "us", label: "United States" },
+  { value: "uk", label: "United Kingdom" },
+  { value: "de", label: "Germany" },
+  { value: "uz", label: "Uzbekistan" },
+]
+
+export const TIMEOUTS: SelectOption[] = [
+  { value: "5", label: "5 minutes" },
+  { value: "10", label: "10 minutes" },
+  { value: "15", label: "15 minutes" },
+  { value: "30", label: "30 minutes" },
+]
+
+export const QUIET_HOURS: SelectOption[] = [
+  { value: "18:00", label: "6:00 PM" },
+  { value: "20:00", label: "8:00 PM" },
+  { value: "22:00", label: "10:00 PM" },
+  { value: "23:00", label: "11:00 PM" },
+]
+
+export const QUIET_HOURS_END: SelectOption[] = [
+  { value: "06:00", label: "6:00 AM" },
+  { value: "08:00", label: "8:00 AM" },
+  { value: "09:00", label: "9:00 AM" },
+  { value: "10:00", label: "10:00 AM" },
+]
+
+export const DIGEST_CADENCE: SelectOption[] = [
+  { value: "daily", label: "Daily summary" },
+  { value: "weekly", label: "Weekly digest" },
+  { value: "mentions", label: "Only mentions" },
+]
+
+export const RECOVERY_METHODS: SelectOption[] = [
+  { value: "authenticator", label: "Authenticator first" },
+  { value: "sms", label: "SMS fallback" },
+  { value: "email", label: "Email fallback" },
+]
+
+export const BILLING_PLANS: BillingPlan[] = [
+  {
+    id: "free",
+    name: "Free",
+    price: "$0",
+    period: "forever",
+    current: false,
+    features: ["1 workspace", "Basic exports", "Community support"],
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    price: "$29",
+    period: "per month",
+    current: true,
+    features: ["Unlimited workspaces", "Automations", "Priority support"],
+  },
+  {
+    id: "team",
+    name: "Team",
+    price: "$79",
+    period: "per month",
+    current: false,
+    features: ["Everything in Pro", "SSO", "Shared billing"],
+  },
+]
+
+export const SESSIONS: Session[] = [
+  {
+    id: "sess-1",
+    device: "macOS",
+    browser: "Chrome",
+    location: "San Francisco, CA",
+    lastActive: "Active now",
+    current: true,
+    icon: (
+      <MonitorIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "sess-2",
+    device: "iPhone",
+    browser: "Safari",
+    location: "San Francisco, CA",
+    lastActive: "2 hours ago",
+    current: false,
+    icon: (
+      <SmartphoneIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "sess-3",
+    device: "Windows",
+    browser: "Firefox",
+    location: "New York, NY",
+    lastActive: "3 days ago",
+    current: false,
+    icon: (
+      <MonitorIcon aria-hidden="true" />
+    ),
+  },
+]
@@ -0,0 +1,223 @@
+import { useState } from "react"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@evobgp/ui/components/field"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Switch } from "@evobgp/ui/components/switch"
+
+import { DIGEST_CADENCE, QUIET_HOURS, QUIET_HOURS_END, TIMEOUTS } from "./data"
+import { SettingRow } from "./setting-row"
+import { SettingsCard } from "./settings-card"
+import { SettingsFieldGroup } from "./settings-field-group"
+import { createSelectValueHandler, getOptionLabel } from "./utils"
+
+export function NotificationsTab() {
+  const [autoDismiss, setAutoDismiss] = useState("10")
+  const [quietStart, setQuietStart] = useState("20:00")
+  const [quietEnd, setQuietEnd] = useState("08:00")
+  const [digestCadence, setDigestCadence] = useState("weekly")
+  const handleAutoDismissChange = createSelectValueHandler(setAutoDismiss)
+  const handleQuietStartChange = createSelectValueHandler(setQuietStart)
+  const handleQuietEndChange = createSelectValueHandler(setQuietEnd)
+  const handleDigestCadenceChange = createSelectValueHandler(setDigestCadence)
+
+  return (
+    <div className="space-y-6">
+      {/* Card */}
+      <SettingsCard title="Activity alerts" description="Desktop and badge">
+        <SettingsFieldGroup
+          legend="Activity alerts"
+          description="Control desktop, badge, and sound alerts."
+        >
+          <SettingRow
+            title="Desktop notifications"
+            description="Show alerts for mentions and approvals."
+            labelFor="settings-7-desktop-notifications"
+          >
+            <Switch id="settings-7-desktop-notifications" defaultChecked />
+          </SettingRow>
+
+          <SettingRow
+            title="Quiet hours"
+            description="Hold non-urgent alerts outside your workday."
+            contentClassName="@md/field-group:w-[22rem]"
+          >
+            <FieldSet className="w-full gap-3">
+              <FieldLegend className="sr-only">Quiet hours</FieldLegend>
+              <FieldDescription className="sr-only">
+                Define when non-urgent activity should stay muted.
+              </FieldDescription>
+
+              <FieldGroup className="gap-3 sm:grid sm:grid-cols-2">
+                <Field>
+                  <FieldLabel htmlFor="settings-7-quiet-start">
+                    Start
+                  </FieldLabel>
+                  <Select
+                    value={quietStart}
+                    onValueChange={handleQuietStartChange}
+                  >
+                    <SelectTrigger
+                      id="settings-7-quiet-start"
+                      className="w-full"
+                    >
+                      <SelectValue>
+                        {getOptionLabel(QUIET_HOURS, quietStart)}
+                      </SelectValue>
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        {QUIET_HOURS.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="settings-7-quiet-end">End</FieldLabel>
+                  <Select value={quietEnd} onValueChange={handleQuietEndChange}>
+                    <SelectTrigger id="settings-7-quiet-end" className="w-full">
+                      <SelectValue>
+                        {getOptionLabel(QUIET_HOURS_END, quietEnd)}
+                      </SelectValue>
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        {QUIET_HOURS_END.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </SettingRow>
+
+          <SettingRow
+            title="Unread badge"
+            description="Display a badge when new activity arrives."
+            labelFor="settings-7-unread-badge"
+          >
+            <Switch id="settings-7-unread-badge" defaultChecked />
+          </SettingRow>
+
+          <SettingRow
+            title="Auto dismiss"
+            description="Choose how long alerts stay visible."
+            labelFor="settings-7-auto-dismiss"
+            last
+          >
+            <Select value={autoDismiss} onValueChange={handleAutoDismissChange}>
+              <SelectTrigger id="settings-7-auto-dismiss" className="w-full">
+                <SelectValue>
+                  {getOptionLabel(TIMEOUTS, autoDismiss)}
+                </SelectValue>
+              </SelectTrigger>
+
+              <SelectContent>
+                <SelectGroup>
+                  {TIMEOUTS.map((timeout) => (
+                    <SelectItem key={timeout.value} value={timeout.value}>
+                      {timeout.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Email updates"
+        description="Inbox preferences"
+        footer={
+          <>
+            <Button variant="outline">Reset</Button>
+            <Button>Save preferences</Button>
+          </>
+        }
+      >
+        <SettingsFieldGroup
+          legend="Email updates"
+          description="Control which emails reach your inbox."
+        >
+          <SettingRow
+            title="Team communication"
+            description="Messages, approvals, and activity summaries."
+            labelFor="settings-7-team-communication"
+          >
+            <Switch id="settings-7-team-communication" defaultChecked />
+          </SettingRow>
+
+          <SettingRow
+            title="Product announcements"
+            description="Releases, improvements, and launches."
+            labelFor="settings-7-product-announcements"
+          >
+            <Switch id="settings-7-product-announcements" />
+          </SettingRow>
+
+          <SettingRow
+            title="Weekly digest"
+            description="A recap of workspaces, mentions, and tasks."
+            labelFor="settings-7-weekly-digest"
+          >
+            <Switch id="settings-7-weekly-digest" defaultChecked />
+          </SettingRow>
+
+          <SettingRow
+            title="Digest cadence"
+            description="Set how often summary emails arrive."
+            labelFor="settings-7-digest-cadence"
+            last
+          >
+            <Select
+              value={digestCadence}
+              onValueChange={handleDigestCadenceChange}
+            >
+              <SelectTrigger id="settings-7-digest-cadence" className="w-full">
+                <SelectValue>
+                  {getOptionLabel(DIGEST_CADENCE, digestCadence)}
+                </SelectValue>
+              </SelectTrigger>
+
+              <SelectContent>
+                <SelectGroup>
+                  {DIGEST_CADENCE.map((item) => (
+                    <SelectItem key={item.value} value={item.value}>
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,103 @@
+"use client"
+
+import { useState } from "react"
+import { useFileUpload } from "@/hooks/use-file-upload"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Button } from "@evobgp/ui/components/button"
+import { UserCircle, XIcon, UploadIcon } from "lucide-react"
+
+interface ProfileAvatarUploadProps {
+  defaultAvatar: string
+  alt: string
+  inputId?: string
+}
+
+export function ProfileAvatarUpload({
+  defaultAvatar,
+  alt,
+  inputId,
+}: ProfileAvatarUploadProps) {
+  const [removedCurrentPhoto, setRemovedCurrentPhoto] = useState(false)
+  const [{ files }, { removeFile, openFileDialog, getInputProps }] =
+    useFileUpload({
+      accept: "image/*",
+    })
+
+  const currentFile = files[0] ?? null
+  const hasSavedPhoto = Boolean(defaultAvatar) && !removedCurrentPhoto
+  const previewUrl =
+    currentFile?.preview ?? (hasSavedPhoto ? defaultAvatar : null)
+  const hasPhoto = Boolean(previewUrl)
+
+  const handleCancelUpload = () => {
+    if (!currentFile) {
+      return
+    }
+
+    removeFile(currentFile.id)
+  }
+
+  const handleRemovePhoto = () => {
+    if (currentFile) {
+      removeFile(currentFile.id)
+    }
+
+    setRemovedCurrentPhoto(true)
+  }
+
+  return (
+    <div className="flex grow flex-wrap items-center justify-start gap-2">
+      {/* Actions */}
+      <div className="relative">
+        <Avatar className="size-10">
+          <AvatarImage src={previewUrl ?? undefined} alt={alt} />
+          <AvatarFallback className="text-muted-foreground bg-muted">
+            <UserCircle aria-hidden="true" className="size-4 opacity-60" />
+          </AvatarFallback>
+        </Avatar>
+
+        {currentFile ? (
+          <Button
+            variant="outline"
+            size="icon-xs"
+            onClick={handleCancelUpload}
+            className="absolute -top-1 -right-1 size-4 rounded-full"
+            aria-label={`Cancel ${currentFile.file.name}`}
+          >
+            <XIcon aria-hidden="true" />
+          </Button>
+        ) : null}
+      </div>
+
+      <div className="relative inline-flex">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={openFileDialog}
+          aria-haspopup="dialog"
+        >
+          <UploadIcon aria-hidden="true" />
+          {hasPhoto ? "Change" : "Upload"}
+        </Button>
+        <input
+          {...getInputProps({ id: inputId })}
+          className="sr-only"
+          aria-label="Upload profile image"
+          tabIndex={-1}
+        />
+      </div>
+
+      {hasPhoto ? (
+        <Button variant="outline" size="sm" onClick={handleRemovePhoto}>
+          <XIcon aria-hidden="true" />
+          Remove
+        </Button>
+      ) : null}
+    </div>
+  )
+}
@@ -0,0 +1,217 @@
+import { useState } from "react"
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/reui/alert"
+import { Badge } from "@/components/reui/badge"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@evobgp/ui/components/field"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@evobgp/ui/components/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Textarea } from "@evobgp/ui/components/textarea"
+import { ROLES, TIMEZONES } from "./data"
+import { ProfileAvatarUpload } from "./profile-avatar-upload"
+import { SettingRow } from "./setting-row"
+import { SettingsCard } from "./settings-card"
+import { SettingsFieldGroup } from "./settings-field-group"
+import { createSelectValueHandler, getOptionLabel } from "./utils"
+import { UserIcon } from "lucide-react"
+
+export function ProfileTab() {
+  const [role, setRole] = useState("engineering-lead")
+  const [timezone, setTimezone] = useState("utc-8")
+  const handleRoleChange = createSelectValueHandler(setRole)
+  const handleTimezoneChange = createSelectValueHandler(setTimezone)
+
+  return (
+    <div className="space-y-6">
+      <Alert variant="warning">
+        <UserIcon aria-hidden="true" />
+        <AlertTitle>Complete your profile.</AlertTitle>
+        <AlertDescription>
+          Add a photo and keep your role and timezone current.
+        </AlertDescription>
+        <AlertAction>
+          <Button type="button" variant="outline" size="xs">
+            Dismiss
+          </Button>
+          <Button type="button" size="xs">
+            Update
+          </Button>
+        </AlertAction>
+      </Alert>
+
+      {/* Card */}
+      <SettingsCard
+        title="My profile"
+        description="Public account details"
+        footer={
+          <>
+            <Button variant="outline">Cancel</Button>
+            <Button>Save changes</Button>
+          </>
+        }
+      >
+        <SettingsFieldGroup
+          legend="Profile fields"
+          description="Update your personal profile details."
+        >
+          <SettingRow
+            title="Photo"
+            description="Shown in comments and mentions."
+          >
+            <ProfileAvatarUpload
+              defaultAvatar="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80"
+              alt="Alex Morgan"
+              inputId="settings-7-profile-photo"
+            />
+          </SettingRow>
+
+          <SettingRow
+            title="Full name"
+            description="Used across the workspace."
+            labelFor="settings-7-full-name"
+          >
+            <Input id="settings-7-full-name" defaultValue="Alex Morgan" />
+          </SettingRow>
+
+          <SettingRow
+            title="Email address"
+            description="Primary sign-in email."
+            labelFor="settings-7-email"
+            titleAddon={<Badge variant="success-light">Verified</Badge>}
+          >
+            <Input
+              id="settings-7-email"
+              defaultValue="alex@acme.dev"
+              type="email"
+            />
+          </SettingRow>
+
+          <SettingRow
+            title="Username"
+            description="Visible in mentions and links."
+            labelFor="settings-7-username"
+          >
+            <InputGroup className="w-full">
+              <InputGroupAddon align="inline-start">
+                <InputGroupText>@</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput
+                id="settings-7-username"
+                defaultValue="alexmorgan"
+              />
+            </InputGroup>
+          </SettingRow>
+
+          <SettingRow
+            title="Profile details"
+            description="Public details shared across the workspace."
+            contentClassName="@md/field-group:w-[22rem]"
+          >
+            <FieldSet className="w-full gap-3">
+              <FieldLegend className="sr-only">Profile details</FieldLegend>
+              <FieldDescription className="sr-only">
+                Public profile and workspace defaults.
+              </FieldDescription>
+
+              <FieldGroup className="gap-4">
+                <Field>
+                  <FieldLabel htmlFor="settings-7-role">Role</FieldLabel>
+                  <Select value={role} onValueChange={handleRoleChange}>
+                    <SelectTrigger id="settings-7-role" className="w-full">
+                      <SelectValue>{getOptionLabel(ROLES, role)}</SelectValue>
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        {ROLES.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="settings-7-timezone">
+                    Time zone
+                  </FieldLabel>
+                  <Select value={timezone} onValueChange={handleTimezoneChange}>
+                    <SelectTrigger id="settings-7-timezone" className="w-full">
+                      <SelectValue>
+                        {getOptionLabel(TIMEZONES, timezone)}
+                      </SelectValue>
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        {TIMEZONES.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="settings-7-website">Website</FieldLabel>
+                  <InputGroup className="w-full">
+                    <InputGroupAddon align="inline-start">
+                      <InputGroupText>https://</InputGroupText>
+                    </InputGroupAddon>
+                    <InputGroupInput
+                      id="settings-7-website"
+                      defaultValue="alexmorgan.dev"
+                    />
+                  </InputGroup>
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </SettingRow>
+
+          <SettingRow
+            title="Bio"
+            description="Short profile summary."
+            labelFor="settings-7-bio"
+            last
+          >
+            <Textarea
+              id="settings-7-bio"
+              defaultValue="Building developer tools at Acme. Previously at Vercel and Stripe."
+              rows={4}
+              className="min-h-24 resize-none"
+            />
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,257 @@
+"use client"
+
+import { Fragment, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@evobgp/ui/components/field"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@evobgp/ui/components/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "@evobgp/ui/components/item"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Switch } from "@evobgp/ui/components/switch"
+import { RECOVERY_METHODS, SESSIONS } from "./data"
+import { SettingRow } from "./setting-row"
+import { SettingsCard } from "./settings-card"
+import { SettingsFieldGroup } from "./settings-field-group"
+import { createSelectValueHandler, getOptionLabel } from "./utils"
+import { LogOutIcon } from "lucide-react"
+
+export function SecurityTab() {
+  const [recoveryMethod, setRecoveryMethod] = useState("authenticator")
+  const handleRecoveryMethodChange = createSelectValueHandler(setRecoveryMethod)
+
+  return (
+    <div className="space-y-6">
+      {/* Card */}
+      <SettingsCard
+        title="Change password"
+        description="Access protection"
+        footer={<Button>Update password</Button>}
+      >
+        <SettingsFieldGroup
+          legend="Password settings"
+          description="Update your password and keep your account protected."
+        >
+          <SettingRow
+            title="Current password"
+            description="Verify your identity before making changes."
+            labelFor="settings-7-current-password"
+          >
+            <Input
+              id="settings-7-current-password"
+              type="password"
+              placeholder="Enter current password"
+            />
+          </SettingRow>
+
+          <SettingRow
+            title="New password"
+            description="Use at least 12 characters and a unique phrase."
+            contentClassName="@md/field-group:w-[22rem]"
+            last
+          >
+            <FieldSet className="w-full gap-3">
+              <FieldLegend className="sr-only">New password</FieldLegend>
+              <FieldDescription className="sr-only">
+                Create and confirm the next password for this account.
+              </FieldDescription>
+
+              <FieldGroup className="gap-4">
+                <Field>
+                  <FieldLabel htmlFor="settings-7-new-password">
+                    New password
+                  </FieldLabel>
+                  <Input
+                    id="settings-7-new-password"
+                    type="password"
+                    placeholder="Create a new password"
+                  />
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="settings-7-confirm-password">
+                    Confirm password
+                  </FieldLabel>
+                  <Input
+                    id="settings-7-confirm-password"
+                    type="password"
+                    placeholder="Confirm the new password"
+                  />
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Two-step verification"
+        description="Extra sign-in checks"
+      >
+        <SettingsFieldGroup
+          legend="Two-step verification"
+          description="Add backup checks for future sign-ins."
+        >
+          <SettingRow
+            title="Authenticator app"
+            description="Use one-time codes from an app."
+            labelFor="settings-7-authenticator-app"
+            titleAddon={
+              <Badge variant="info-light" size="sm">
+                Recommended
+              </Badge>
+            }
+          >
+            <Switch id="settings-7-authenticator-app" defaultChecked />
+          </SettingRow>
+
+          <SettingRow
+            title="Recovery phone"
+            description="Used if you lose access to your authenticator app."
+            labelFor="settings-7-recovery-phone"
+          >
+            <InputGroup className="w-full">
+              <InputGroupAddon align="inline-start">
+                <InputGroupText>+1</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput
+                id="settings-7-recovery-phone"
+                defaultValue="415 555 0148"
+              />
+            </InputGroup>
+          </SettingRow>
+
+          <SettingRow
+            title="Delivery method"
+            description="Choose how backup verification requests are delivered."
+            labelFor="settings-7-recovery-method"
+          >
+            <Select
+              value={recoveryMethod}
+              onValueChange={handleRecoveryMethodChange}
+            >
+              <SelectTrigger id="settings-7-recovery-method" className="w-full">
+                <SelectValue>
+                  {getOptionLabel(RECOVERY_METHODS, recoveryMethod)}
+                </SelectValue>
+              </SelectTrigger>
+
+              <SelectContent>
+                <SelectGroup>
+                  {RECOVERY_METHODS.map((method) => (
+                    <SelectItem key={method.value} value={method.value}>
+                      {method.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </SettingRow>
+
+          <SettingRow
+            title="Trusted devices"
+            description="Skip repeat prompts on known devices."
+            labelFor="settings-7-trusted-devices"
+            last
+          >
+            <Switch id="settings-7-trusted-devices" defaultChecked />
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+
+      <SettingsCard title="Active sessions" description="Signed-in devices">
+        <ItemGroup className="gap-0">
+          {SESSIONS.map((session, index) => (
+            <Fragment key={session.id}>
+              {index > 0 ? <ItemSeparator className="my-0" /> : null}
+              <Item className="min-h-0 items-center gap-4 px-5 py-3.5">
+                <ItemMedia className="self-center!">
+                  <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
+                    {session.icon}
+                  </Item>
+                </ItemMedia>
+
+                <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
+                  <ItemTitle className="gap-2 leading-5">
+                    {session.browser} on {session.device}
+                    {session.current ? (
+                      <Badge variant="success-light" size="xs">
+                        Current
+                      </Badge>
+                    ) : null}
+                  </ItemTitle>
+                  <ItemDescription className="leading-5">
+                    {session.location} · {session.lastActive}
+                  </ItemDescription>
+                </ItemContent>
+
+                <ItemActions className="w-28 shrink-0 justify-end self-center">
+                  {session.current ? (
+                    <Button variant="outline" size="sm">
+                      This device
+                    </Button>
+                  ) : (
+                    <Button variant="ghost" size="sm">
+                      <LogOutIcon data-icon="inline-start" aria-hidden="true" />
+                      Revoke
+                    </Button>
+                  )}
+                </ItemActions>
+              </Item>
+            </Fragment>
+          ))}
+        </ItemGroup>
+      </SettingsCard>
+
+      <SettingsCard title="Delete account" description="Irreversible changes">
+        <SettingsFieldGroup
+          legend="Delete account"
+          description="Review irreversible actions before deleting your account."
+        >
+          <SettingRow
+            title="Close account"
+            description="Permanently remove your account, sessions, and recovery settings."
+            last
+            contentClassName="@md/field-group:w-[22rem]"
+          >
+            <div className="flex w-full flex-col items-start gap-2 @md/field-group:items-end">
+              <p className="text-muted-foreground text-xs leading-5">
+                This action cannot be undone.
+              </p>
+              <Button variant="destructive">Delete account</Button>
+            </div>
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,62 @@
+import { type ReactNode } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldSeparator,
+  FieldTitle,
+} from "@evobgp/ui/components/field"
+
+interface SettingRowProps {
+  title: string
+  description?: ReactNode
+  children: ReactNode
+  last?: boolean
+  labelFor?: string
+  contentClassName?: string
+  titleAddon?: ReactNode
+}
+
+export function SettingRow({
+  title,
+  description,
+  children,
+  last,
+  labelFor,
+  contentClassName,
+  titleAddon,
+}: SettingRowProps) {
+  return (
+    <>
+      <Field orientation="responsive" className="gap-4 px-5 py-3">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
+          <div className="flex flex-wrap items-center gap-2">
+            {labelFor ? (
+              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
+            ) : (
+              <FieldTitle>{title}</FieldTitle>
+            )}
+            {titleAddon}
+          </div>
+
+          {description ? (
+            <FieldDescription>{description}</FieldDescription>
+          ) : null}
+        </div>
+
+        <FieldContent
+          className={cn("min-w-0 @md/field-group:w-78", contentClassName)}
+        >
+          <div className="flex w-full justify-start @md/field-group:justify-end">
+            {children}
+          </div>
+        </FieldContent>
+      </Field>
+
+      {!last ? <FieldSeparator /> : null}
+    </>
+  )
+}
@@ -0,0 +1,59 @@
+"use client"
+
+import { type ReactNode } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@evobgp/ui/components/card"
+
+interface SettingsCardProps {
+  title: string
+  description?: string
+  children: ReactNode
+  footer?: ReactNode
+  className?: string
+  contentClassName?: string
+  footerClassName?: string
+}
+
+export function SettingsCard({
+  title,
+  description,
+  children,
+  footer,
+  className,
+  contentClassName,
+  footerClassName,
+}: SettingsCardProps) {
+  return (
+    <Card className={cn("gap-0 p-0", className)}>
+      {/* Header */}
+      <CardHeader className="gap-0 border-b px-5 py-3">
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+
+      {/* Content */}
+      <CardContent className={cn("p-0", contentClassName)}>
+        {children}
+      </CardContent>
+
+      {footer ? (
+        <CardFooter
+          className={cn(
+            "justify-end gap-2 border-t px-5 py-3",
+            footerClassName
+          )}
+        >
+          {footer}
+        </CardFooter>
+      ) : null}
+    </Card>
+  )
+}
@@ -0,0 +1,37 @@
+import { type ReactNode } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  FieldDescription,
+  FieldGroup,
+  FieldLegend,
+  FieldSet,
+} from "@evobgp/ui/components/field"
+
+interface SettingsFieldGroupProps {
+  legend: string
+  description: string
+  children: ReactNode
+  className?: string
+  fieldGroupClassName?: string
+}
+
+export function SettingsFieldGroup({
+  legend,
+  description,
+  children,
+  className,
+  fieldGroupClassName,
+}: SettingsFieldGroupProps) {
+  return (
+    <FieldSet className={cn("gap-0", className)}>
+      <FieldLegend className="sr-only">{legend}</FieldLegend>
+      {/* Description */}
+      <FieldDescription className="sr-only">{description}</FieldDescription>
+      {/* List */}
+      <FieldGroup className={cn("gap-0", fieldGroupClassName)}>
+        {children}
+      </FieldGroup>
+    </FieldSet>
+  )
+}
@@ -0,0 +1,22 @@
+"use client"
+
+import { type Dispatch, type SetStateAction } from "react"
+
+import type { SelectOption } from "./data"
+
+export function getOptionLabel<T extends SelectOption>(
+  options: T[],
+  value: string
+) {
+  return options.find((option) => option.value === value)?.label ?? value
+}
+
+export function createSelectValueHandler(
+  setValue: Dispatch<SetStateAction<string>>
+) {
+  return (value: string | null) => {
+    if (value !== null) {
+      setValue(value)
+    }
+  }
+}
@@ -0,0 +1,9 @@
+import { AccountSettings } from "./components/account-settings"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-start justify-center p-4 sm:p-6 md:p-10">
+      <AccountSettings />
+    </div>
+  )
+}
@@ -8,22 +8,13 @@ import {
 } from 'lucide-react'
 import type { ReactNode } from 'react'

+import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
 import { Badge } from '@/components/reui/badge'
-import { dashboardKpiGridClassName, kpiCardContentClassName } from '@/lib/ui-surface'
-import { Card, CardContent } from '@evobgp/ui/components/card'
-import { cn } from '@evobgp/ui/lib/utils'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'

 import { aggregateNetworkMetrics, runningJobCount } from '@/queries/overview'
 import type { JobRow, ModuleRow, PeerRow, SpeakerRow } from '@/types/api'

-type KpiCard = {
-  icon: ReactNode
-  iconClass: string
-  value: string
-  label: string
-  badge: ReactNode
-}
+type KpiCard = KpiStatItem & { icon: ReactNode }

 function buildKpis({
  modules,
@@ -52,22 +43,24 @@ function buildKpis({

  return [
    {
+      id: 'modules',
      icon: <Boxes aria-hidden />,
-      iconClass: 'text-primary',
+      iconClassName: 'text-primary',
      value: loading ? '—' : `${enabledModules}/${modules.length || 0}`,
      label: 'Модули активны',
-      badge: (
+      footer: (
        <Badge variant="primary-light" size="sm">
          {loading ? '…' : `${modules.length} всего`}
        </Badge>
      ),
    },
    {
+      id: 'bgp',
      icon: <Network aria-hidden />,
-      iconClass: 'text-info',
+      iconClassName: 'text-info',
      value: loading || bgpPct === null ? '—' : `${bgpPct}%`,
      label: 'BGP готовность',
-      badge: (
+      footer: (
        <Badge
          variant={
            bgpPct !== null && bgpPct >= 90
@@ -85,22 +78,24 @@ function buildKpis({
      ),
    },
    {
+      id: 'peers',
      icon: <Share2 aria-hidden />,
-      iconClass: 'text-success',
+      iconClassName: 'text-success',
      value: loading ? '—' : `${network.peersEstablished}/${peersEnabled}`,
      label: 'Пиры Established',
-      badge: (
+      footer: (
        <Badge variant="success-light" size="sm">
          {loading ? '…' : `${network.peersTotal} в каталоге`}
        </Badge>
      ),
    },
    {
+      id: 'speakers',
      icon: <ServerCog aria-hidden />,
-      iconClass: 'text-warning',
+      iconClassName: 'text-warning',
      value: loading ? '—' : `${network.speakersOnline}/${network.speakersTotal}`,
      label: 'Спикеры online',
-      badge: (
+      footer: (
        <Badge
          variant={network.speakersOnline === network.speakersTotal ? 'success-light' : 'warning-light'}
          size="sm"
@@ -110,22 +105,24 @@ function buildKpis({
      ),
    },
    {
+      id: 'jobs',
      icon: <ListChecks aria-hidden />,
-      iconClass: 'text-focus',
+      iconClassName: 'text-focus',
      value: loading ? '—' : String(running),
      label: 'Активные задачи',
-      badge: (
+      footer: (
        <Badge variant={running > 0 ? 'info-light' : 'outline'} size="sm">
          {loading ? '…' : `${jobs.length} в выборке`}
        </Badge>
      ),
    },
    {
+      id: 'risks',
      icon: <AlertTriangle aria-hidden />,
-      iconClass: 'text-destructive',
+      iconClassName: 'text-destructive',
      value: loading ? '—' : String(riskCount),
      label: 'Риски',
-      badge: (
+      footer: (
        <Badge variant={riskCount > 0 ? 'destructive-light' : 'success-light'} size="sm">
          {loading
            ? '…'
@@ -151,33 +148,10 @@ export function DashboardKpiGrid({
  jobs: JobRow[]
  loading?: boolean
 }) {
-  const cards = buildKpis({ modules, peers, speakers, jobs, loading })
-
  return (
-    <section aria-label="KPI обзора" className={dashboardKpiGridClassName}>
-      {cards.map((card) => (
-        <Card key={card.label} size="sm" className="gap-0">
-          <CardContent className={cn(kpiCardContentClassName, 'gap-3 p-4')}>
-            <Item
-              className={cn(
-                'border-background bg-muted flex size-9 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
-                card.iconClass,
-              )}
-            >
-              <ItemMedia variant="icon" className="size-auto">
-                {card.icon}
-              </ItemMedia>
-            </Item>
-            <div className="space-y-0.5">
-              <div className="text-foreground text-xl leading-none font-bold tabular-nums">
-                {card.value}
-              </div>
-              <div className="text-muted-foreground text-xs font-medium">{card.label}</div>
-            </div>
-            {card.badge}
-          </CardContent>
-        </Card>
-      ))}
-    </section>
+    <KpiStatGrid
+      items={buildKpis({ modules, peers, speakers, jobs, loading })}
+      aria-label="KPI обзора"
+    />
  )
 }
@@ -0,0 +1,129 @@
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@evobgp/ui/components/card"
+import { Input } from "@evobgp/ui/components/input"
+import { Label } from "@evobgp/ui/components/label"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@evobgp/ui/components/tabs"
+
+export function Pattern() {
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-6">
+      <Tabs defaultValue="account">
+        <TabsList variant="line" className="mb-3.5 w-full">
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Account</CardTitle>
+              <CardDescription className="text-sm">
+                Update your account information.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="underline-name" className="text-sm">
+                  Name
+                </Label>
+                <Input
+                  id="underline-name"
+                  defaultValue="Alex Chen"
+                  className="h-9"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="underline-email" className="text-sm">
+                  Email
+                </Label>
+                <Input
+                  id="underline-email"
+                  type="email"
+                  defaultValue="alex.chen@example.com"
+                  className="h-9"
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="pt-3">
+              <Button size="sm">Save changes</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+        <TabsContent value="password">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Password</CardTitle>
+              <CardDescription className="text-sm">
+                Change your password here.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="underline-current" className="text-sm">
+                  Current password
+                </Label>
+                <Input id="underline-current" type="password" className="h-9" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="underline-new" className="text-sm">
+                  New password
+                </Label>
+                <Input id="underline-new" type="password" className="h-9" />
+              </div>
+            </CardContent>
+            <CardFooter className="pt-3">
+              <Button size="sm">Update password</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+        <TabsContent value="settings">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Settings</CardTitle>
+              <CardDescription className="text-sm">
+                Manage your preferences.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="underline-theme" className="text-sm">
+                  Theme
+                </Label>
+                <Input
+                  id="underline-theme"
+                  defaultValue="Light"
+                  className="h-9"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="underline-language" className="text-sm">
+                  Language
+                </Label>
+                <Input
+                  id="underline-language"
+                  defaultValue="English"
+                  className="h-9"
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="pt-3">
+              <Button size="sm">Save settings</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
@@ -0,0 +1,126 @@
+import type { KeyboardEvent, ReactNode } from 'react'
+
+import { Frame, FramePanel } from '@/components/reui/frame'
+import { cn } from '@evobgp/ui/lib/utils'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+
+export type KpiStatItem = {
+  id?: string
+  icon?: ReactNode
+  iconClassName?: string
+  value: ReactNode
+  label: ReactNode
+  footer?: ReactNode
+  active?: boolean
+  onClick?: () => void
+}
+
+const DEFAULT_ICON_CLASS =
+  'text-muted-foreground [&_svg]:text-current'
+
+function kpiStatGridClassName(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
+  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
+  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
+  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+}
+
+function handleCardKeyDown(onClick: () => void, event: KeyboardEvent<HTMLDivElement>) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    onClick()
+  }
+}
+
+/** Single KPI tile (ReUI stats-12 / dashboard PRO pattern). */
+export function KpiStatCard({
+  item,
+  embedded = false,
+  className,
+}: {
+  item: KpiStatItem
+  embedded?: boolean
+  className?: string
+}) {
+  const clickable = Boolean(item.onClick)
+
+  const panel = (
+    <FramePanel
+      className={cn(
+        'flex h-full flex-col items-start gap-6',
+        clickable && 'cursor-pointer transition-colors hover:bg-muted/30',
+        item.active && 'ring-1 ring-primary/30',
+        className,
+      )}
+      onClick={item.onClick}
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      onKeyDown={clickable && item.onClick ? (e) => handleCardKeyDown(item.onClick!, e) : undefined}
+    >
+      {item.icon ? (
+        <Item
+          className={cn(
+            'border-background bg-muted flex size-10.5 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            item.iconClassName ?? DEFAULT_ICON_CLASS,
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {item.icon}
+          </ItemMedia>
+        </Item>
+      ) : null}
+
+      <div className="space-y-0.5">
+        <div className="text-foreground text-2xl leading-none font-bold tabular-nums">{item.value}</div>
+        <div className="text-muted-foreground text-sm font-medium">{item.label}</div>
+      </div>
+
+      {item.footer ? <div className="mt-auto w-full">{item.footer}</div> : null}
+    </FramePanel>
+  )
+
+  if (embedded) {
+    return (
+      <Frame className="h-full ring-1 ring-foreground/10">
+        {panel}
+      </Frame>
+    )
+  }
+
+  return <Frame className="h-full">{panel}</Frame>
+}
+
+export function KpiStatGrid({
+  items,
+  className,
+  embedded = false,
+  'aria-label': ariaLabel,
+}: {
+  items: KpiStatItem[]
+  className?: string
+  embedded?: boolean
+  'aria-label'?: string
+}) {
+  return (
+    <section aria-label={ariaLabel} className={cn('@container w-full', className)}>
+      <div className={cn('grid gap-5', kpiStatGridClassName(items.length))}>
+        {items.map((item, index) => (
+          <KpiStatCard
+            key={item.id ?? (typeof item.label === 'string' ? item.label : `kpi-${index}`)}
+            item={item}
+            embedded={embedded}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export function kpiStatItemKey(item: KpiStatItem, index: number): string {
+  if (item.id) return item.id
+  if (typeof item.label === 'string') return item.label
+  return `kpi-${index}`
+}
@@ -92,7 +92,7 @@ const NAV_GROUPS: NavGroup[] = [
    items: [
      { to: '/access', label: 'Доступ', icon: KeyRound, description: 'API-ключи' },
      { to: '/tenant-settings', label: 'Настройки BIRD', icon: ServerCog, description: 'Tenant BIRD config' },
-      { to: '/settings', label: 'Настройки UI', icon: Settings, description: 'Токен и подключение' },
+      { to: '/settings', label: 'Настройки UI', icon: Settings, description: 'Токен и подключение', search: { tab: 'connection' } },
    ],
  },
 ]
@@ -1,5 +1,7 @@
-import { KpiSparklineCard, type KpiSparklineMetric } from '@/components/patterns/kpi-sparkline-card'
-import { kpiGridClassName } from '@/lib/ui-surface'
+import { Clock, Gauge, Globe, Tags } from 'lucide-react'
+
+import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
+import { Badge } from '@/components/reui/badge'
 import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
 import {
  communityLabel,
@@ -7,7 +9,7 @@ import {
  moduleDohProfileIds,
 } from '@/lib/modules/helpers'
 import { dohPolicyRu } from '@/lib/ui-labels'
-import { SectionCardsSkeleton } from '@/components/skeletons'
+import { KpiStatGridSkeleton } from '@/components/skeletons'
 import type { AsEntry, BgpCommunity, DohProfile, ModuleRow } from '@/types/api'

 interface ModuleKpiCardsProps {
@@ -18,12 +20,6 @@ interface ModuleKpiCardsProps {
  loading?: boolean
 }

-function syntheticSparkline(seed: number): number[] {
-  return Array.from({ length: 9 }, (_, i) =>
-    Math.round(seed * (0.8 + (i / 9) * 0.2 + Math.sin(i) * 0.05)),
-  )
-}
-
 export function ModuleKpiCards({
  mod,
  communities,
@@ -32,67 +28,65 @@ export function ModuleKpiCards({
  loading = false,
 }: ModuleKpiCardsProps) {
  if (loading || !mod) {
-    return <SectionCardsSkeleton count={4} />
+    return <KpiStatGridSkeleton count={4} />
  }

  const asPrefixTotal = asEntries.reduce((acc, entry) => acc + (entry.prefix_count ?? 0), 0)
  const dohIds = moduleDohProfileIds(mod)

-  const metrics: KpiSparklineMetric[] = [
+  const items: KpiStatItem[] = [
    {
      id: 'priority',
-      title: 'Приоритет',
-      label: 'Порядок в ревизии',
+      icon: <Gauge aria-hidden />,
+      iconClassName: 'text-info',
      value: String(mod.priority ?? 0),
-      delta: mod.enabled !== false ? 'активен' : 'выключен',
-      deltaVariant: mod.enabled !== false ? 'success-light' : 'outline',
-      detail: mod.type,
-      tone: 'info',
-      sparkline: syntheticSparkline(mod.priority ?? 1),
+      label: 'Приоритет',
+      footer: (
+        <Badge variant={mod.enabled !== false ? 'success-light' : 'outline'} size="sm">
+          {mod.enabled !== false ? 'активен' : 'выключен'} · {mod.type}
+        </Badge>
+      ),
    },
    {
      id: 'interval',
-      title: 'Интервал',
-      label: 'Обновление',
+      icon: <Clock aria-hidden />,
+      iconClassName: 'text-warning',
      value: moduleIntervalLabel(mod),
-      delta: formatDateTime(mod.last_refreshed_at) || 'никогда',
-      deltaVariant: 'primary-light',
-      detail: 'last refresh',
-      tone: 'warning',
-      sparkline: syntheticSparkline(12),
+      label: 'Интервал обновления',
+      footer: (
+        <Badge variant="primary-light" size="sm">
+          {formatDateTime(mod.last_refreshed_at) || 'никогда'}
+        </Badge>
+      ),
    },
    {
      id: 'prefixes',
-      title: 'Префиксы',
-      label: mod.type === 'AS_PREFIXES' ? 'AS entries' : 'Записи',
+      icon: <Tags aria-hidden />,
+      iconClassName: 'text-success',
      value: mod.type === 'AS_PREFIXES' ? String(asPrefixTotal) : String(asEntries.length),
-      delta: `${asEntries.length} AS`,
-      deltaVariant: 'success-light',
-      detail: 'в модуле',
-      tone: 'success',
-      sparkline: syntheticSparkline(asPrefixTotal || asEntries.length || 1),
+      label: mod.type === 'AS_PREFIXES' ? 'Префиксы AS' : 'Записи модуля',
+      footer: (
+        <Badge variant="success-light" size="sm">
+          {asEntries.length} AS · в модуле
+        </Badge>
+      ),
    },
    {
      id: 'policy',
-      title: 'DoH / BGP',
-      label: communityLabel(mod.default_community_id, communities),
+      icon: <Globe aria-hidden />,
+      iconClassName: 'text-primary',
      value: dohIds.length > 0 ? String(dohIds.length) : '—',
-      delta: dohPolicyRu(mod.doh_resolver_policy),
-      deltaVariant: 'info-light',
-      detail:
-        dohIds.length > 0
-          ? dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join(', ')
-          : 'без DoH',
-      tone: 'info',
-      sparkline: syntheticSparkline(dohIds.length || 2),
+      label: communityLabel(mod.default_community_id, communities),
+      footer: (
+        <Badge variant="info-light" size="sm">
+          {dohPolicyRu(mod.doh_resolver_policy)}
+          {dohIds.length > 0
+            ? ` · ${dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join(', ')}`
+            : ' · без DoH'}
+        </Badge>
+      ),
    },
  ]

-  return (
-    <section aria-label="KPI модуля" className={kpiGridClassName}>
-      {metrics.map((metric) => (
-        <KpiSparklineCard key={metric.id} metric={metric} />
-      ))}
-    </section>
-  )
+  return <KpiStatGrid items={items} aria-label="KPI модуля" />
 }
@@ -65,9 +65,9 @@ export function NetworkPeersCard({
          </Button>
        }
      >
-        <div className="border-b px-5 py-3">
-          <Tabs value={tab} onValueChange={(v) => setTab(v as PeerTab)}>
-            <TabsList>
+        <div className="px-5 pt-3">
+          <Tabs value={tab} onValueChange={(v) => setTab(v as PeerTab)} className="w-full">
+            <TabsList variant="line" className="w-full justify-start gap-6">
              <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
              <TabsTrigger value="established">Established ({counts.established})</TabsTrigger>
              <TabsTrigger value="pending">Ожидание ({counts.pending})</TabsTrigger>
@@ -52,9 +52,9 @@ export function OperationsJobsCard({

  return (
    <DataGridCard title="Задачи" description="Фильтр по статусу · data-grid-filtering pattern">
-      <div className="border-b px-5 py-3">
-        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)}>
-          <TabsList>
+      <div className="px-5 pt-3">
+        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)} className="w-full">
+          <TabsList variant="line" className="w-full justify-start gap-6">
            <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
            <TabsTrigger value="active">Активные ({counts.active})</TabsTrigger>
            <TabsTrigger value="succeeded">Успешные ({counts.succeeded})</TabsTrigger>
@@ -1,6 +1,7 @@
 export { DonutBreakdownCard } from './donut-breakdown-card'
 export { IllustratedEmptyState } from './illustrated-empty-state'
 export { KpiSparklineCard, type KpiSparklineMetric } from './kpi-sparkline-card'
+export { KpiStatGrid, KpiStatCard, type KpiStatItem } from '@/components/kpi-stat-grid'
 export { PanelCorners } from './panel-corners'
 export { ProjectsEmptyState } from './projects-empty-state'
 export { SegmentedProgressCard, type SegmentStat } from './segmented-progress-card'
@@ -0,0 +1,92 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const alertVariants = cva(
+  [
+    "relative w-full text-sm border has-[>svg]:grid-cols-[calc(var(--spacing)*3)_1fr] grid-cols-[0_1fr] grid gap-y-0.5 items-center [&>svg:not([class*=size-])]:size-4",
+    "has-[>[data-slot=alert-title]+[data-slot=alert-description]]:[&_[data-slot=alert-action]]:sm:row-end-3",
+    "has-[>[data-slot=alert-title]+[data-slot=alert-description]]:items-start",
+    "has-[>[data-slot=alert-title]+[data-slot=alert-description]]:[&_svg]:translate-y-0.5",
+    "rounded-lg",
+    "px-3",
+    "py-2.5",
+    "has-[>svg]:gap-x-2.5",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "border-destructive/30 bg-destructive/4 [&>svg]:text-destructive",
+        info: "border-info/30 bg-info/4 [&>svg]:text-info",
+        success: "border-success/30 bg-success/4 [&>svg]:text-success",
+        warning: "border-warning/30 bg-warning/4 [&>svg]:text-warning",
+        invert:
+          "border-invert bg-invert text-invert-foreground [&_[data-slot=alert-description]]:text-invert-foreground/70",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn(
+        "flex gap-1.5 max-sm:col-start-2 max-sm:mt-2 max-sm:justify-start sm:col-start-3 sm:row-start-1 sm:justify-end sm:self-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
@@ -46,9 +46,9 @@ export function ScheduleJobsCard({

  return (
    <DataGridCard title="Задачи" description="Последние задачи из API">
-      <div className="border-b px-5 py-3">
-        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)}>
-          <TabsList>
+      <div className="px-5 pt-3">
+        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)} className="w-full">
+          <TabsList variant="line" className="w-full justify-start gap-6">
            <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
            <TabsTrigger value="refresh">Обновление ({counts.refresh})</TabsTrigger>
            <TabsTrigger value="failed">С ошибкой ({counts.failed})</TabsTrigger>
@@ -1,7 +1,7 @@
 import type { ReactElement, ReactNode } from 'react'
-import { Card, CardContent } from '@evobgp/ui/components/card'
-import { cn } from '@evobgp/ui/lib/utils'
-import { TruncatedText } from '@/components/truncated-text'
+
+import { Badge } from '@/components/reui/badge'
+import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'

 export interface SectionCardItem {
  label: ReactNode
@@ -14,97 +14,46 @@ export interface SectionCardItem {
  onClick?: () => void
 }

-const VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
-  default: '',
-  warning: 'border-warning/50',
-  destructive: 'border-destructive/50',
-}
-
-function sectionGridClass(count: number): string {
-  if (count <= 1) return 'grid-cols-1'
-  if (count === 2) return 'sm:grid-cols-2'
-  if (count === 3) return 'sm:grid-cols-2 lg:grid-cols-3'
-  if (count === 4) return 'sm:grid-cols-2 lg:grid-cols-4'
-  if (count === 5) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'
-  if (count === 6) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
-  return 'sm:grid-cols-2 lg:grid-cols-3'
-}
-
-const VALUE_VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
-  default: '',
-  warning: 'text-warning-foreground',
+const VARIANT_ICON_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
+  default: 'text-muted-foreground',
+  warning: 'text-warning',
  destructive: 'text-destructive',
 }

+function hintToFooter(hint: ReactNode) {
+  if (typeof hint === 'string') {
+    return (
+      <Badge variant="outline" size="sm">
+        {hint}
+      </Badge>
+    )
+  }
+  return hint
+}
+
+function toKpiStatItem(item: SectionCardItem, index: number): KpiStatItem {
+  const footer =
+    item.badge ?? (item.hint ? hintToFooter(item.hint) : undefined)
+
+  return {
+    id: typeof item.label === 'string' ? item.label : `section-${index}`,
+    icon: item.icon,
+    iconClassName: VARIANT_ICON_CLASS[item.variant ?? 'default'],
+    value: item.value,
+    label: item.label,
+    footer,
+    active: item.active,
+    onClick: item.onClick,
+  }
+}
+
+/** KPI row for route sections — ReUI stats-12 / dashboard PRO pattern. */
 export function SectionCards({ items, className }: { items: SectionCardItem[]; className?: string }) {
  return (
-    <div className={cn('grid gap-3', sectionGridClass(items.length), className)}>
-      {items.map((item, idx) => {
-        const clickable = Boolean(item.onClick)
-        const content = (
-          <CardContent className="flex items-start gap-3 px-4 py-3">
-            {item.icon ? (
-              <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
-                {item.icon}
-              </span>
-            ) : null}
-            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-              <div className="flex items-center justify-between gap-2">
-                {typeof item.label === 'string' ? (
-                  <TruncatedText className="text-xs text-muted-foreground">{item.label}</TruncatedText>
-                ) : (
-                  <span className="truncate text-xs text-muted-foreground">{item.label}</span>
-                )}
-                {item.badge ? <span className="shrink-0">{item.badge}</span> : null}
-              </div>
-              <div className="flex min-w-0 items-baseline gap-1.5">
-                <span
-                  className={cn(
-                    'flex items-center gap-1 text-lg font-semibold tabular-nums',
-                    VALUE_VARIANT_CLASS[item.variant ?? 'default'],
-                  )}
-                >
-                  {item.value}
-                </span>
-                {item.hint ? (
-                  typeof item.hint === 'string' ? (
-                    <TruncatedText className="text-xs text-muted-foreground">· {item.hint}</TruncatedText>
-                  ) : (
-                    <span className="truncate text-xs text-muted-foreground">· {item.hint}</span>
-                  )
-                ) : null}
-              </div>
-            </div>
-          </CardContent>
-        )
-        return (
-          <Card
-            key={typeof item.label === 'string' ? item.label : idx}
-            size="sm"
-            className={cn(
-              'gap-0',
-              VARIANT_CLASS[item.variant ?? 'default'],
-              item.active && 'border-primary ring-1 ring-primary/30',
-              clickable && 'cursor-pointer transition-colors hover:bg-muted/40',
-            )}
-            onClick={item.onClick}
-            role={clickable ? 'button' : undefined}
-            tabIndex={clickable ? 0 : undefined}
-            onKeyDown={
-              clickable
-                ? (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault()
-                      item.onClick?.()
-                    }
-                  }
-                : undefined
-            }
-          >
-            {content}
-          </Card>
-        )
-      })}
-    </div>
+    <KpiStatGrid
+      items={items.map(toKpiStatItem)}
+      className={className}
+      aria-label="Показатели"
+    />
  )
 }
@@ -0,0 +1,68 @@
+import { Moon, Sun, SunMoon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
+import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
+import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+import { Badge } from '@/components/reui/badge'
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@evobgp/ui/components/toggle-group'
+
+const THEME_OPTIONS = [
+  { value: 'light', label: 'Светлая', icon: Sun },
+  { value: 'dark', label: 'Тёмная', icon: Moon },
+  { value: 'system', label: 'Система', icon: SunMoon },
+] as const
+
+export function AppearanceSettingsTab() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <div className="space-y-6">
+      <SettingsCard
+        title="Тема интерфейса"
+        description="Быстрый переключатель также доступен в боковой панели"
+      >
+        <SettingsFieldGroup
+          legend="Тема"
+          description="Цветовая схема всех экранов в этом браузере."
+        >
+          <SettingRow
+            title="Тема"
+            description="Влияет на цветовую схему всех экранов в этом браузере."
+            titleAddon={
+              <Badge variant="primary-light" size="sm">
+                мгновенно
+              </Badge>
+            }
+            last
+          >
+            <ToggleGroup
+              multiple={false}
+              value={[theme ?? 'system']}
+              onValueChange={(value) => {
+                if (value.length > 0) setTheme(value[0])
+              }}
+              variant="outline"
+              size="sm"
+              aria-label="Тема интерфейса"
+              className="w-full sm:w-auto"
+            >
+              {THEME_OPTIONS.map((option) => {
+                const Icon = option.icon
+                return (
+                  <ToggleGroupItem key={option.value} value={option.value} className="gap-1.5">
+                    <Icon aria-hidden className="size-3.5" />
+                    {option.label}
+                  </ToggleGroupItem>
+                )
+              })}
+            </ToggleGroup>
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,115 @@
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { Save } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
+import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
+import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+import { Badge } from '@/components/reui/badge'
+import { LoadingButton } from '@/components/loading-button'
+import {
+  DEV_API_TOKEN,
+  normalizeApiToken,
+  setToken,
+  TOKEN_STORAGE_KEY,
+} from '@/lib/api-client'
+import { authKeys } from '@/queries/auth'
+import { Alert, AlertDescription } from '@evobgp/ui/components/alert'
+import { Button } from '@evobgp/ui/components/button'
+import { Input } from '@evobgp/ui/components/input'
+
+export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolean }) {
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const [token, setTokenValue] = useState('')
+
+  useEffect(() => {
+    const stored = window.localStorage.getItem(TOKEN_STORAGE_KEY) ?? ''
+    setTokenValue(stored)
+  }, [])
+
+  async function applyToken(raw: string) {
+    const normalized = normalizeApiToken(raw)
+    setToken(normalized || null)
+    setTokenValue(normalized)
+    await qc.invalidateQueries({ queryKey: authKeys.all })
+    toast.success('Токен сохранён')
+    if (normalized && tokenRequired) {
+      void navigate({ to: '/dashboard' })
+    }
+  }
+
+  function saveToken() {
+    void applyToken(token)
+  }
+
+  function useDevToken() {
+    void applyToken(DEV_API_TOKEN)
+  }
+
+  return (
+    <div className="space-y-6">
+      {tokenRequired ? (
+        <Alert>
+          <AlertDescription>
+            Для доступа к разделу нужен API-токен. Сохраните токен ниже или нажмите «Использовать
+            dev».
+          </AlertDescription>
+        </Alert>
+      ) : null}
+
+      <SettingsCard
+        title="Подключение к API"
+        description="Токен хранится только в этом браузере (localStorage)"
+        footer={
+          <div className="flex w-full flex-wrap justify-end gap-2">
+            <Button type="button" variant="outline" onClick={useDevToken}>
+              Использовать dev
+            </Button>
+            <LoadingButton onClick={saveToken}>
+              <Save />
+              Сохранить токен
+            </LoadingButton>
+          </div>
+        }
+      >
+        <SettingsFieldGroup
+          legend="API-токен"
+          description="Параметры подключения браузера к EvoBGP API."
+        >
+          <SettingRow
+            title="Токен для запросов"
+            description={
+              <>
+                Ключ для заголовка <code className="text-xs">Authorization</code>. Управление
+                ключами tenant — в разделе{' '}
+                <Link to="/access" className="text-primary underline-offset-4 hover:underline">
+                  Права доступа
+                </Link>
+                .
+              </>
+            }
+            titleAddon={
+              <Badge variant="outline" size="sm">
+                localStorage
+              </Badge>
+            }
+            labelFor="settings-token"
+            last
+          >
+            <Input
+              id="settings-token"
+              type="password"
+              autoComplete="off"
+              value={token}
+              onChange={(e) => setTokenValue(e.target.value)}
+              placeholder="dev или API-ключ"
+            />
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,90 @@
+import { Link } from '@tanstack/react-router'
+import {
+  ActivityIcon,
+  KeyRoundIcon,
+  SlidersHorizontalIcon,
+} from 'lucide-react'
+import { Fragment } from 'react'
+
+import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
+import { Badge } from '@/components/reui/badge'
+import { Button } from '@evobgp/ui/components/button'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from '@evobgp/ui/components/item'
+
+const ADMIN_SECTIONS = [
+  {
+    id: 'tenant-settings',
+    to: '/tenant-settings' as const,
+    title: 'Параметры арендатора',
+    description: 'BIRD, ревизии, файловые логи и дополнительные ключи /v1/settings.',
+    icon: <SlidersHorizontalIcon aria-hidden="true" />,
+    badge: { label: 'operator', variant: 'warning-light' as const },
+  },
+  {
+    id: 'access',
+    to: '/access' as const,
+    title: 'Права доступа',
+    description: 'API-ключи tenant, роли и управление доступом.',
+    icon: <KeyRoundIcon aria-hidden="true" />,
+    badge: { label: 'operator', variant: 'warning-light' as const },
+  },
+  {
+    id: 'monitoring',
+    to: '/monitoring' as const,
+    title: 'Мониторинг',
+    description: 'Метрики, состояние jobs и observability control plane.',
+    icon: <ActivityIcon aria-hidden="true" />,
+    badge: { label: 'viewer+', variant: 'info-light' as const },
+  },
+] as const
+
+export function SectionsSettingsTab() {
+  return (
+    <div className="space-y-6">
+      <SettingsCard
+        title="Разделы control plane"
+        description="Параметры tenant и операции — отдельно от настроек браузера"
+      >
+        <ItemGroup className="gap-0">
+          {ADMIN_SECTIONS.map((section, index) => (
+            <Fragment key={section.id}>
+              {index > 0 ? <ItemSeparator className="my-0" /> : null}
+              <Item className="min-h-0 items-center gap-4 px-5 py-3.5">
+                <ItemMedia className="self-center!">
+                  <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
+                    {section.icon}
+                  </Item>
+                </ItemMedia>
+
+                <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
+                  <ItemTitle className="gap-2 leading-5">
+                    {section.title}
+                    <Badge variant={section.badge.variant} size="xs">
+                      {section.badge.label}
+                    </Badge>
+                  </ItemTitle>
+                  <ItemDescription className="leading-5">{section.description}</ItemDescription>
+                </ItemContent>
+
+                <ItemActions className="shrink-0 justify-end self-center">
+                  <Button variant="outline" size="sm" render={<Link to={section.to} />}>
+                    Открыть
+                  </Button>
+                </ItemActions>
+              </Item>
+            </Fragment>
+          ))}
+        </ItemGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,114 @@
+import { useQuery } from '@tanstack/react-query'
+import { MonitorIcon } from 'lucide-react'
+
+import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
+import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
+import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+import { Badge } from '@/components/reui/badge'
+import { QueryState } from '@/components/query-state'
+import { TOKEN_STORAGE_KEY } from '@/lib/api-client'
+import { authSessionQueryOptions } from '@/queries/auth'
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from '@evobgp/ui/components/item'
+
+const ROLE_LABELS: Record<string, string> = {
+  viewer: 'Просмотр',
+  editor: 'Редактор',
+  operator: 'Оператор',
+  node: 'Нода',
+}
+
+export function SessionSettingsTab() {
+  const hasStoredToken = Boolean(
+    typeof window !== 'undefined' && window.localStorage.getItem(TOKEN_STORAGE_KEY)?.trim(),
+  )
+
+  const sessionQ = useQuery({
+    ...authSessionQueryOptions(),
+    enabled: hasStoredToken,
+  })
+
+  return (
+    <div className="space-y-6">
+      <SettingsCard title="Текущая сессия" description="Проверка токена через GET /v1/auth/session">
+        <QueryState
+          data={sessionQ.data}
+          isLoading={sessionQ.isLoading && hasStoredToken}
+          isError={sessionQ.isError}
+          error={sessionQ.error}
+          empty={!hasStoredToken}
+          emptyTitle="Токен не задан"
+          emptyDescription="Сохраните API-токен во вкладке «Подключение»."
+          skeleton={<div className="h-24 px-5 py-4" />}
+          onRetry={() => sessionQ.refetch()}
+        >
+          {(session) => (
+            <ItemGroup className="gap-0">
+              <Item className="min-h-0 items-center gap-4 px-5 py-3.5">
+                <ItemMedia className="self-center!">
+                  <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
+                    <MonitorIcon aria-hidden="true" />
+                  </Item>
+                </ItemMedia>
+
+                <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
+                  <ItemTitle className="gap-2 leading-5">
+                    Этот браузер
+                    <Badge variant="success-light" size="xs">
+                      Активна
+                    </Badge>
+                  </ItemTitle>
+                  <ItemDescription className="leading-5">
+                    Tenant:{' '}
+                    <code className="text-foreground font-mono text-xs">{session.tenant_id}</code>
+                  </ItemDescription>
+                </ItemContent>
+              </Item>
+            </ItemGroup>
+          )}
+        </QueryState>
+      </SettingsCard>
+
+      <SettingsCard title="Роль и доступ" description="Права текущего API-ключа">
+        <SettingsFieldGroup
+          legend="Роль"
+          description="Уровень доступа, определённый API-ключом."
+        >
+          <SettingRow
+            title="Роль"
+            description="Определяет доступ к операциям control plane и CRUD."
+            titleAddon={
+              sessionQ.data ? (
+                <Badge variant="info-light" size="sm">
+                  {ROLE_LABELS[sessionQ.data.role] ?? sessionQ.data.role}
+                </Badge>
+              ) : (
+                <Badge variant="outline" size="sm">
+                  неизвестно
+                </Badge>
+              )
+            }
+            last
+          >
+            {sessionQ.data ? (
+              <p className="text-muted-foreground text-sm">
+                Ключ с ролью <strong>{sessionQ.data.role}</strong> в tenant{' '}
+                <code className="font-mono text-xs">{sessionQ.data.tenant_id}</code>.
+              </p>
+            ) : (
+              <p className="text-muted-foreground text-sm">
+                Сохраните токен и дождитесь проверки сессии.
+              </p>
+            )}
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
+    </div>
+  )
+}
@@ -0,0 +1,45 @@
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+
+import { AppearanceSettingsTab } from './appearance-settings-tab'
+import { ConnectionSettingsTab } from './connection-settings-tab'
+import { SectionsSettingsTab } from './sections-settings-tab'
+import { SessionSettingsTab } from './session-settings-tab'
+import {
+  SETTINGS_TAB_ITEMS,
+  type SettingsTab,
+} from './settings-tabs-data'
+
+export function SettingsPageShell({
+  activeTab,
+  onTabChange,
+  tokenRequired,
+}: {
+  activeTab: SettingsTab
+  onTabChange: (tab: SettingsTab) => void
+  tokenRequired: boolean
+}) {
+  return (
+    <BadgeTabs
+      value={activeTab}
+      onValueChange={(value) => onTabChange(value as SettingsTab)}
+      items={SETTINGS_TAB_ITEMS.map((tab) => ({
+        value: tab.value,
+        label: tab.label,
+        icon: tab.icon,
+      }))}
+    >
+      <TabsContent value="connection" className="mt-0">
+        <ConnectionSettingsTab tokenRequired={tokenRequired} />
+      </TabsContent>
+      <TabsContent value="session" className="mt-0">
+        <SessionSettingsTab />
+      </TabsContent>
+      <TabsContent value="appearance" className="mt-0">
+        <AppearanceSettingsTab />
+      </TabsContent>
+      <TabsContent value="sections" className="mt-0">
+        <SectionsSettingsTab />
+      </TabsContent>
+    </BadgeTabs>
+  )
+}
@@ -0,0 +1,49 @@
+import {
+  KeyRoundIcon,
+  MonitorSmartphoneIcon,
+  PaletteIcon,
+  SlidersHorizontalIcon,
+} from 'lucide-react'
+import { type ReactNode } from 'react'
+
+export type SettingsTab = 'connection' | 'session' | 'appearance' | 'sections'
+
+export type SettingsTabItem = {
+  value: SettingsTab
+  label: string
+  icon: ReactNode
+}
+
+export const SETTINGS_TAB_ITEMS: SettingsTabItem[] = [
+  {
+    value: 'connection',
+    label: 'Подключение',
+    icon: <KeyRoundIcon aria-hidden="true" />,
+  },
+  {
+    value: 'session',
+    label: 'Сессия',
+    icon: <MonitorSmartphoneIcon aria-hidden="true" />,
+  },
+  {
+    value: 'appearance',
+    label: 'Оформление',
+    icon: <PaletteIcon aria-hidden="true" />,
+  },
+  {
+    value: 'sections',
+    label: 'Разделы',
+    icon: <SlidersHorizontalIcon aria-hidden="true" />,
+  },
+]
+
+export function parseSettingsTab(value: unknown): SettingsTab {
+  if (
+    value === 'session' ||
+    value === 'appearance' ||
+    value === 'sections'
+  ) {
+    return value
+  }
+  return 'connection'
+}
@@ -1,35 +1,37 @@
 import { Skeleton } from '@evobgp/ui/components/skeleton'

+import { KpiStatGrid } from '@/components/kpi-stat-grid'
 import { panelCardInsetClassName } from '@/components/panel-card'
 import {
  chartPanelGridClassName,
-  dashboardKpiGridClassName,
  dashboardMainSidebarClassName,
-  kpiGridClassName,
 } from '@/lib/ui-surface'
-import { SectionCards } from './section-cards'

-export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
+export function KpiStatGridSkeleton({ count = 4 }: { count?: number }) {
  return (
-    <SectionCards
-      items={Array.from({ length: count }, (_, i) => ({
-        icon: <Skeleton className="size-4 rounded-sm" key={`icon-${i}`} />,
-        label: <Skeleton className="h-3 w-20" key={`label-${i}`} />,
-        value: <Skeleton className="h-5 w-16" key={`value-${i}`} />,
+    <KpiStatGrid
+      items={Array.from({ length: count }, (_, index) => ({
+        id: `kpi-skeleton-${index}`,
+        icon: <Skeleton className="size-4 rounded-sm" />,
+        value: <Skeleton className="h-8 w-16" />,
+        label: <Skeleton className="h-4 w-28" />,
+        footer: <Skeleton className="h-5 w-32 rounded-full" />,
      }))}
+      aria-label="Загрузка показателей"
    />
  )
 }

-/** Matches dashboard-5 / telemetry layout: KPI row, charts, main+sidebar, bottom grids. */
+/** @deprecated Use KpiStatGridSkeleton */
+export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
+  return <KpiStatGridSkeleton count={count} />
+}
+
+/** Matches dashboard layout: KPI row, charts, main+sidebar, bottom grids. */
 export function AnalyticsDashboardSkeleton() {
  return (
    <div className="@container flex flex-col gap-4">
-      <div className={dashboardKpiGridClassName}>
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Skeleton key={`kpi-${i}`} className="h-28 w-full rounded-xl" />
-        ))}
-      </div>
+      <KpiStatGridSkeleton count={6} />

      <div className={chartPanelGridClassName}>
        <Skeleton className="h-72 w-full rounded-xl" />
@@ -50,13 +52,7 @@ export function AnalyticsDashboardSkeleton() {
 }

 export function KpiSparklineSkeleton({ count = 4 }: { count?: number }) {
-  return (
-    <div className={kpiGridClassName}>
-      {Array.from({ length: count }).map((_, i) => (
-        <Skeleton key={i} className="h-36 w-full rounded-xl" />
-      ))}
-    </div>
-  )
+  return <KpiStatGridSkeleton count={count} />
 }

 export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
@@ -0,0 +1,415 @@
+import type React from "react"
+import {
+  useCallback,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type DragEvent,
+  type InputHTMLAttributes,
+} from "react"
+
+export type FileMetadata = {
+  name: string
+  size: number
+  type: string
+  url: string
+  id: string
+}
+
+export type FileWithPreview = {
+  file: File | FileMetadata
+  id: string
+  preview?: string
+}
+
+export type FileUploadOptions = {
+  maxFiles?: number // Only used when multiple is true, defaults to Infinity
+  maxSize?: number // in bytes
+  accept?: string
+  multiple?: boolean // Defaults to false
+  initialFiles?: FileMetadata[]
+  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change
+  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added
+  onError?: (errors: string[]) => void
+}
+
+export type FileUploadState = {
+  files: FileWithPreview[]
+  isDragging: boolean
+  errors: string[]
+}
+
+export type FileUploadActions = {
+  addFiles: (files: FileList | File[]) => void
+  removeFile: (id: string) => void
+  clearFiles: () => void
+  clearErrors: () => void
+  handleDragEnter: (e: DragEvent<HTMLElement>) => void
+  handleDragLeave: (e: DragEvent<HTMLElement>) => void
+  handleDragOver: (e: DragEvent<HTMLElement>) => void
+  handleDrop: (e: DragEvent<HTMLElement>) => void
+  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void
+  openFileDialog: () => void
+  getInputProps: (
+    props?: InputHTMLAttributes<HTMLInputElement>
+  ) => InputHTMLAttributes<HTMLInputElement> & {
+    ref: React.Ref<HTMLInputElement>
+  }
+}
+
+export const useFileUpload = (
+  options: FileUploadOptions = {}
+): [FileUploadState, FileUploadActions] => {
+  const {
+    maxFiles = Number.POSITIVE_INFINITY,
+    maxSize = Number.POSITIVE_INFINITY,
+    accept = "*",
+    multiple = false,
+    initialFiles = [],
+    onFilesChange,
+    onFilesAdded,
+    onError,
+  } = options
+
+  const [state, setState] = useState<FileUploadState>({
+    files: initialFiles.map((file) => ({
+      file,
+      id: file.id,
+      preview: file.url,
+    })),
+    isDragging: false,
+    errors: [],
+  })
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const validateFile = useCallback(
+    (file: File | FileMetadata): string | null => {
+      if (file instanceof File) {
+        if (file.size > maxSize) {
+          return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`
+        }
+      } else {
+        if (file.size > maxSize) {
+          return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`
+        }
+      }
+
+      if (accept !== "*") {
+        const acceptedTypes = accept.split(",").map((type) => type.trim())
+        const fileType = file instanceof File ? file.type || "" : file.type
+        const fileExtension = `.${file instanceof File ? file.name.split(".").pop() : file.name.split(".").pop()}`
+
+        const isAccepted = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return fileExtension.toLowerCase() === type.toLowerCase()
+          }
+          if (type.endsWith("/*")) {
+            const baseType = type.split("/")[0]
+            return fileType.startsWith(`${baseType}/`)
+          }
+          return fileType === type
+        })
+
+        if (!isAccepted) {
+          return `File "${file instanceof File ? file.name : file.name}" is not an accepted file type.`
+        }
+      }
+
+      return null
+    },
+    [accept, maxSize]
+  )
+
+  const createPreview = useCallback(
+    (file: File | FileMetadata): string | undefined => {
+      if (file instanceof File) {
+        return URL.createObjectURL(file)
+      }
+      return file.url
+    },
+    []
+  )
+
+  const generateUniqueId = useCallback((file: File | FileMetadata): string => {
+    if (file instanceof File) {
+      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+    }
+    return file.id
+  }, [])
+
+  const clearFiles = useCallback(() => {
+    setState((prev) => {
+      // Clean up object URLs
+      for (const file of prev.files) {
+        if (
+          file.preview &&
+          file.file instanceof File &&
+          file.file.type.startsWith("image/")
+        ) {
+          URL.revokeObjectURL(file.preview)
+        }
+      }
+
+      if (inputRef.current) {
+        inputRef.current.value = ""
+      }
+
+      const newState = {
+        ...prev,
+        files: [],
+        errors: [],
+      }
+
+      onFilesChange?.(newState.files)
+      return newState
+    })
+  }, [onFilesChange])
+
+  const addFiles = useCallback(
+    (newFiles: FileList | File[]) => {
+      if (!newFiles || newFiles.length === 0) return
+
+      const newFilesArray = Array.from(newFiles)
+      const errors: string[] = []
+
+      // Clear existing errors when new files are uploaded
+      setState((prev) => ({ ...prev, errors: [] }))
+
+      // In single file mode, clear existing files first
+      if (!multiple) {
+        clearFiles()
+      }
+
+      // Check if adding these files would exceed maxFiles (only in multiple mode)
+      if (
+        multiple &&
+        maxFiles !== Number.POSITIVE_INFINITY &&
+        state.files.length + newFilesArray.length > maxFiles
+      ) {
+        errors.push(`You can only upload a maximum of ${maxFiles} files.`)
+        onError?.(errors)
+        setState((prev) => ({ ...prev, errors }))
+        return
+      }
+
+      const validFiles: FileWithPreview[] = []
+
+      for (const file of newFilesArray) {
+        // Only check for duplicates if multiple files are allowed
+        if (multiple) {
+          const isDuplicate = state.files.some(
+            (existingFile) =>
+              existingFile.file.name === file.name &&
+              existingFile.file.size === file.size
+          )
+
+          // Skip duplicate files silently
+          if (isDuplicate) {
+            return
+          }
+        }
+
+        // Check file size
+        if (file.size > maxSize) {
+          errors.push(
+            multiple
+              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`
+              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`
+          )
+          continue
+        }
+
+        const error = validateFile(file)
+        if (error) {
+          errors.push(error)
+        } else {
+          validFiles.push({
+            file,
+            id: generateUniqueId(file),
+            preview: createPreview(file),
+          })
+        }
+      }
+
+      // Only update state if we have valid files to add
+      if (validFiles.length > 0) {
+        // Call the onFilesAdded callback with the newly added valid files
+        onFilesAdded?.(validFiles)
+
+        setState((prev) => {
+          const newFiles = !multiple
+            ? validFiles
+            : [...prev.files, ...validFiles]
+          onFilesChange?.(newFiles)
+          return {
+            ...prev,
+            files: newFiles,
+            errors,
+          }
+        })
+      } else if (errors.length > 0) {
+        onError?.(errors)
+        setState((prev) => ({
+          ...prev,
+          errors,
+        }))
+      }
+
+      // Reset input value after handling files
+      if (inputRef.current) {
+        inputRef.current.value = ""
+      }
+    },
+    [
+      state.files,
+      maxFiles,
+      multiple,
+      maxSize,
+      validateFile,
+      createPreview,
+      generateUniqueId,
+      clearFiles,
+      onFilesChange,
+      onFilesAdded,
+    ]
+  )
+
+  const removeFile = useCallback(
+    (id: string) => {
+      setState((prev) => {
+        const fileToRemove = prev.files.find((file) => file.id === id)
+        if (
+          fileToRemove &&
+          fileToRemove.preview &&
+          fileToRemove.file instanceof File &&
+          fileToRemove.file.type.startsWith("image/")
+        ) {
+          URL.revokeObjectURL(fileToRemove.preview)
+        }
+
+        const newFiles = prev.files.filter((file) => file.id !== id)
+        onFilesChange?.(newFiles)
+
+        return {
+          ...prev,
+          files: newFiles,
+          errors: [],
+        }
+      })
+    },
+    [onFilesChange]
+  )
+
+  const clearErrors = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      errors: [],
+    }))
+  }, [])
+
+  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setState((prev) => ({ ...prev, isDragging: true }))
+  }, [])
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (e.currentTarget.contains(e.relatedTarget as Node)) {
+      return
+    }
+
+    setState((prev) => ({ ...prev, isDragging: false }))
+  }, [])
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: DragEvent<HTMLElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setState((prev) => ({ ...prev, isDragging: false }))
+
+      // Don't process files if the input is disabled
+      if (inputRef.current?.disabled) {
+        return
+      }
+
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        // In single file mode, only use the first file
+        if (!multiple) {
+          const file = e.dataTransfer.files[0]
+          addFiles([file])
+        } else {
+          addFiles(e.dataTransfer.files)
+        }
+      }
+    },
+    [addFiles, multiple]
+  )
+
+  const handleFileChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files)
+      }
+    },
+    [addFiles]
+  )
+
+  const openFileDialog = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.click()
+    }
+  }, [])
+
+  const getInputProps = useCallback(
+    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {
+      return {
+        ...props,
+        type: "file" as const,
+        onChange: handleFileChange,
+        accept: props.accept || accept,
+        multiple: props.multiple !== undefined ? props.multiple : multiple,
+        ref: inputRef,
+      }
+    },
+    [accept, multiple, handleFileChange]
+  )
+
+  return [
+    state,
+    {
+      addFiles,
+      removeFile,
+      clearFiles,
+      clearErrors,
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      handleFileChange,
+      openFileDialog,
+      getInputProps,
+    },
+  ]
+}
+
+// Helper function to format bytes to human-readable format
+export const formatBytes = (bytes: number, decimals = 2): string => {
+  if (bytes === 0) return "0 Bytes"
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i]
+}
@@ -1,27 +1,26 @@
 /**
 * EvoBGP UI surface contract (ReUI Pro).
 *
- * Primary surface: **Card** via `PanelCard` / `DataGridCard`.
- * All route-level panels, KPI tiles, charts and data grids use shadcn Card —
- * not ReUI Frame — for visual consistency across screens.
+ * KPI tiles: **stats-12** pattern via `KpiStatGrid` / `SectionCards` (Frame + icon tile + badge).
+ * Panels and data grids: shadcn Card via `PanelCard` / `DataGridCard`.
 *
- * ReUI Frame blocks from registry are adapted into Card composition when installed.
- *
- * @see https://reui.io/blocks — card category
+ * @see https://reui.io/blocks — stats-12, dashboard-1
 * @see `.agents/skills/shadcn-react/SKILL.md`
 */
 export const UI_SURFACE = 'card' as const

-/** Shared padding for KPI / metric tiles inside PanelCard. */
-export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
+/** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
+export const kpiStatGridClassName = '@container w-full'

-/** Compact 6-tile KPI row on dashboard overview. */
-export const dashboardKpiGridClassName =
-  'grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6'
+/** @deprecated Use kpiStatGridClassName — kept for legacy imports. */
+export const dashboardKpiGridClassName = kpiStatGridClassName

-/** Grid for dashboard-5 style KPI sparkline row (4 columns at xl). */
+/** @deprecated Sparkline KPI row replaced by stats-12 grid. */
 export const kpiGridClassName =
-  'grid grid-cols-1 gap-4 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  'grid grid-cols-1 gap-5 @3xl:grid-cols-2 @6xl:grid-cols-4'
+
+/** @deprecated */
+export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'

 /** Two-column chart panel row (monitoring / network overview). */
 export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'
@@ -9,7 +9,7 @@ export const Route = createFileRoute('/_auth')({
    const raw =
      typeof window !== 'undefined' ? window.localStorage.getItem(TOKEN_STORAGE_KEY) : null
    if (!raw || !normalizeApiToken(raw)) {
-      throw redirect({ to: '/settings', search: { reason: 'token-required' } })
+      throw redirect({ to: '/settings', search: { tab: 'connection', reason: 'token-required' } })
    }
  },
  component: AuthLayout,
@@ -8,6 +8,7 @@ import { PanelCard } from '@/components/panel-card'

 import { AccessApiKeysCard } from '@/components/access/access-api-keys-card'
 import { PageHeader } from '@/components/page-header'
+import { Badge } from '@/components/reui/badge'
 import { SectionCards, type SectionCardItem } from '@/components/section-cards'
 import { SectionCardsSkeleton } from '@/components/skeletons'
 import { authSessionQueryOptions } from '@/queries/auth'
@@ -39,20 +40,32 @@ function AccessComponent() {
        label: 'Всего ключей',
        value: keys.length,
        icon: <KeyRound className="size-4" />,
-        hint: 'в tenant',
+        badge: (
+          <Badge variant="primary-light" size="sm">
+            в tenant
+          </Badge>
+        ),
      },
      {
        label: 'Активных',
        value: activeCount,
        icon: <ShieldCheck className="size-4" />,
-        hint: 'не отозваны',
+        badge: (
+          <Badge variant="success-light" size="sm">
+            не отозваны
+          </Badge>
+        ),
      },
      {
        label: 'Отозванных',
        value: revokedCount,
        icon: <ShieldOff className="size-4" />,
-        hint: 'revoked',
        variant: revokedCount > 0 ? 'warning' : 'default',
+        badge: (
+          <Badge variant={revokedCount > 0 ? 'warning-light' : 'outline'} size="sm">
+            revoked
+          </Badge>
+        ),
      },
    ],
    [keys.length, activeCount, revokedCount],
@@ -96,7 +109,11 @@ function AccessComponent() {
      ) : (
        <PanelCard contentClassName="py-4 text-sm text-muted-foreground">
            Не удалось определить сессию. Укажите токен в{' '}
-            <Link to="/settings" className="text-primary underline-offset-4 hover:underline">
+            <Link
+              to="/settings"
+              search={{ tab: 'connection' }}
+              className="text-primary underline-offset-4 hover:underline"
+            >
              настройках
            </Link>{' '}
            (для dev-окружения — <code className="text-xs">dev</code> при включённом demo-seed).
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import { BookText, Globe, RefreshCw, Tags } from 'lucide-react'

 import { Button } from '@evobgp/ui/components/button'
+import { Badge } from '@/components/reui/badge'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { DirectoriesCommunitiesGrid } from '@/components/directories/directories-communities-grid'
@@ -30,19 +31,31 @@ function DirectoriesComponent() {
      label: 'Сообщества BGP',
      value: communities.length,
      icon: <Tags className="size-4" />,
-      hint: 'теги префиксов в AS- и CDN-модулях',
+      badge: (
+        <Badge variant="primary-light" size="sm">
+          теги префиксов
+        </Badge>
+      ),
    },
    {
      label: 'DoH профили',
      value: dohProfiles.length,
      icon: <Globe className="size-4" />,
-      hint: 'резолвинг доменных модулей',
+      badge: (
+        <Badge variant="info-light" size="sm">
+          резолвинг доменов
+        </Badge>
+      ),
    },
    {
      label: 'Справочники',
      value: 'Общие',
      icon: <BookText className="size-4" />,
-      hint: 'используются всеми модулями tenant',
+      badge: (
+        <Badge variant="outline" size="sm">
+          все модули tenant
+        </Badge>
+      ),
    },
  ]

@@ -2,9 +2,10 @@ import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { AlertTriangle, Clock, ListTodo, RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'

 import { Button } from '@evobgp/ui/components/button'
+import { Badge } from '@/components/reui/badge'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { ScheduleAgendaPanel } from '@/components/schedule/schedule-agenda-panel'
 import { ScheduleJobsCard } from '@/components/schedule/schedule-jobs-card'
@@ -36,39 +37,37 @@ function ScheduleComponent() {
    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
  ).length

-  // #region agent log
-  useEffect(() => {
-    fetch('http://127.0.0.1:7311/ingest/6b35c3ae-1bcd-4c9c-81eb-f157c9347393', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': 'ce85d7' },
-      body: JSON.stringify({
-        sessionId: 'ce85d7',
-        runId: 'pre-fix',
-        hypothesisId: 'C',
-        location: 'schedule.tsx:mount',
-        message: 'schedule page data loaded',
-        data: {
-          modules: modules.length,
-          jobs: jobs.length,
-          loading,
-          modulesError: modulesQ.isError,
-          jobsError: jobsQ.isError,
-        },
-        timestamp: Date.now(),
-      }),
-    }).catch(() => {})
-  }, [modules.length, jobs.length, loading, modulesQ.isError, jobsQ.isError])
-  // #endregion
-
  const items: SectionCardItem[] = [
-    { label: 'Всего задач', value: jobs.length, icon: <ListTodo className="size-4" />, hint: 'в выборке' },
-    { label: 'В работе', value: running, icon: <Clock className="size-4" />, hint: 'в очереди и выполняются' },
+    {
+      label: 'Всего задач',
+      value: jobs.length,
+      icon: <ListTodo className="size-4" />,
+      badge: (
+        <Badge variant="primary-light" size="sm">
+          в выборке
+        </Badge>
+      ),
+    },
+    {
+      label: 'В работе',
+      value: running,
+      icon: <Clock className="size-4" />,
+      badge: (
+        <Badge variant={running > 0 ? 'info-light' : 'outline'} size="sm">
+          очередь и выполнение
+        </Badge>
+      ),
+    },
    {
      label: 'С ошибкой',
      value: failed,
      icon: <AlertTriangle className="size-4" />,
-      hint: failed > 0 ? 'требуют внимания' : 'без ошибок',
      variant: failed > 0 ? 'warning' : 'default',
+      badge: (
+        <Badge variant={failed > 0 ? 'warning-light' : 'success-light'} size="sm">
+          {failed > 0 ? 'требуют внимания' : 'без ошибок'}
+        </Badge>
+      ),
    },
  ]

@@ -1,213 +1,51 @@
-import { createFileRoute, Link, useNavigate, useRouterState } from '@tanstack/react-router'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Moon, Save, Sun, SunMoon } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import { useEffect, useState } from 'react'
-import { toast } from 'sonner'
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'

-import { Badge } from '@/components/reui/badge'
-import { LoadingButton } from '@/components/loading-button'
 import { PageHeader } from '@/components/page-header'
-import { PanelCard } from '@/components/panel-card'
-import { SettingsSettingField } from '@/components/settings/settings-setting-field'
-import { DEV_API_TOKEN, normalizeApiToken, setToken, TOKEN_STORAGE_KEY } from '@/lib/api-client'
-import { authKeys, authSessionQueryOptions } from '@/queries/auth'
-import { Alert, AlertDescription } from '@evobgp/ui/components/alert'
-import { Button } from '@evobgp/ui/components/button'
-import { FieldGroup } from '@evobgp/ui/components/field'
-import { Input } from '@evobgp/ui/components/input'
+import { SettingsPageShell } from '@/components/settings/settings-page-shell'
 import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from '@evobgp/ui/components/toggle-group'
+  type SettingsTab,
+} from '@/components/settings/settings-tabs-data'
+
+const settingsSearchSchema = z.object({
+  tab: z
+    .enum(['connection', 'session', 'appearance', 'sections'])
+    .catch('connection'),
+  reason: z.enum(['token-required']).optional(),
+})

 export const Route = createFileRoute('/_auth/settings')({
  component: SettingsComponent,
+  validateSearch: (search) => settingsSearchSchema.parse(search),
 })

-const THEME_OPTIONS = [
-  { value: 'light', label: 'Светлая', icon: Sun },
-  { value: 'dark', label: 'Тёмная', icon: Moon },
-  { value: 'system', label: 'Система', icon: SunMoon },
-] as const
-
 function SettingsComponent() {
-  const navigate = useNavigate()
-  const tokenRequired = useRouterState({
-    select: (s) => new URLSearchParams(s.location.search).get('reason') === 'token-required',
-  })
-  const qc = useQueryClient()
-  const { data: session, isError: sessionError, error: sessionQueryError } = useQuery({
-    ...authSessionQueryOptions(),
-    enabled: Boolean(
-      typeof window !== 'undefined' && window.localStorage.getItem(TOKEN_STORAGE_KEY)?.trim(),
-    ),
-  })
-  const { theme, setTheme } = useTheme()
-  const [token, setTokenValue] = useState('')
+  const navigate = Route.useNavigate()
+  const { tab, reason } = Route.useSearch()
+  const tokenRequired = reason === 'token-required'

-  useEffect(() => {
-    const t = window.localStorage.getItem(TOKEN_STORAGE_KEY) ?? ''
-    setTokenValue(t)
-  }, [])
-
-  async function applyToken(raw: string) {
-    const normalized = normalizeApiToken(raw)
-    setToken(normalized || null)
-    setTokenValue(normalized)
-    await qc.invalidateQueries({ queryKey: authKeys.all })
-    toast.success('Токен сохранён')
-    if (normalized) {
-      void navigate({ to: '/dashboard' })
-    }
+  function handleTabChange(nextTab: SettingsTab) {
+    void navigate({
+      search: (prev) => ({
+        ...prev,
+        tab: nextTab,
+      }),
+      replace: true,
+    })
  }

-  function saveTokenHandler() {
-    void applyToken(token)
-  }
-
-  function useDevToken() {
-    void applyToken(DEV_API_TOKEN)
-  }
-
-  const showSessionRow = Boolean(session || sessionError)
-  const sessionErrorMessage =
-    sessionQueryError instanceof Error
-      ? sessionQueryError.message
-      : 'Не удалось проверить сессию'
-
  return (
-    <div className="mx-auto flex max-w-3xl flex-col gap-6">
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-6">
      <PageHeader
        title="Настройки"
-        description="Параметры интерфейса и подключения браузера к API."
+        description="Параметры интерфейса и подключения браузера к API. Параметры tenant — во вкладке «Разделы»."
      />

-      {tokenRequired ? (
-        <Alert>
-          <AlertDescription>
-            Для доступа к разделу нужен API-токен. Сохраните токен ниже или нажмите «Использовать
-            dev».
-          </AlertDescription>
-        </Alert>
-      ) : null}
-
-      <PanelCard
-        title="Подключение к API"
-        description="Токен хранится только в этом браузере (localStorage)."
-        contentClassName="p-0"
-        footer={
-          <div className="flex w-full flex-wrap justify-end gap-2">
-            <Button type="button" variant="outline" onClick={useDevToken}>
-              Использовать dev
-            </Button>
-            <LoadingButton onClick={saveTokenHandler}>
-              <Save />
-              Сохранить токен
-            </LoadingButton>
-          </div>
-        }
-      >
-        <FieldGroup className="gap-0">
-          <SettingsSettingField
-            title="Токен для запросов"
-            description={
-              <>
-                Ключ для заголовка <code className="text-xs">Authorization</code>. Управление
-                ключами tenant — в разделе{' '}
-                <Link to="/access" className="text-primary underline-offset-4 hover:underline">
-                  Права доступа
-                </Link>
-                .
-              </>
-            }
-            badge={{ label: 'localStorage', variant: 'outline' }}
-            labelFor="token"
-            last={!showSessionRow}
-          >
-            <Input
-              id="token"
-              type="password"
-              autoComplete="off"
-              value={token}
-              onChange={(e) => setTokenValue(e.target.value)}
-              placeholder="dev или API-ключ"
-            />
-          </SettingsSettingField>
-
-          {showSessionRow ? (
-            <SettingsSettingField
-              title="Статус сессии"
-              description={
-                session
-                  ? 'Проверка токена через GET /v1/auth/session.'
-                  : 'Токен сохранён, но сессия не подтверждена API.'
-              }
-              badge={
-                session
-                  ? { label: session.role, variant: 'success-light' }
-                  : { label: 'ошибка', variant: 'destructive-light' }
-              }
-              last
-            >
-              {session ? (
-                <div className="text-muted-foreground space-y-1 text-sm">
-                  <p>
-                    Tenant:{' '}
-                    <code className="text-foreground font-mono text-xs">{session.tenant_id}</code>
-                  </p>
-                  <p>
-                    Роль: <Badge variant="info-light" size="sm">{session.role}</Badge>
-                  </p>
-                </div>
-              ) : (
-                <p className="text-destructive text-sm">
-                  {sessionErrorMessage}. Для токена <code className="font-mono">dev</code> нужен
-                  demo-seed (<code className="text-xs">EVOBGP_SEED_DEMO</code> ≠ 0) и запущенный
-                  API.
-                </p>
-              )}
-            </SettingsSettingField>
-          ) : null}
-        </FieldGroup>
-      </PanelCard>
-
-      <PanelCard
-        title="Оформление"
-        description="Тема интерфейса. Быстрый переключатель также доступен в боковой панели."
-        contentClassName="p-0"
-      >
-        <FieldGroup className="gap-0">
-          <SettingsSettingField
-            title="Тема"
-            description="Влияет на цветовую схему всех экранов в этом браузере."
-            badge={{ label: 'мгновенно', variant: 'primary-light' }}
-            last
-          >
-            <ToggleGroup
-              multiple={false}
-              value={[theme ?? 'system']}
-              onValueChange={(value) => {
-                if (value.length > 0) setTheme(value[0])
-              }}
-              variant="outline"
-              size="sm"
-              aria-label="Тема интерфейса"
-              className="w-full sm:w-auto"
-            >
-              {THEME_OPTIONS.map((option) => {
-                const Icon = option.icon
-                return (
-                  <ToggleGroupItem key={option.value} value={option.value} className="gap-1.5">
-                    <Icon aria-hidden className="size-3.5" />
-                    {option.label}
-                  </ToggleGroupItem>
-                )
-              })}
-            </ToggleGroup>
-          </SettingsSettingField>
-        </FieldGroup>
-      </PanelCard>
+      <SettingsPageShell
+        activeTab={tab}
+        onTabChange={handleTabChange}
+        tokenRequired={tokenRequired}
+      />
    </div>
  )
 }
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"

@@ -1,3 +1,5 @@
+"use client"
+
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"

@@ -1,3 +1,5 @@
+"use client"
+
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"

 import { cn } from "@evobgp/ui/lib/utils"
@@ -1,3 +1,5 @@
+"use client"
+
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch"

 import { cn } from "@evobgp/ui/lib/utils"
@@ -13,9 +13,9 @@ function Tabs({
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
-      data-orientation={orientation}
+      orientation={orientation}
      className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
        className
      )}
      {...props}
@@ -24,12 +24,12 @@ function Tabs({
 }

 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
  {
    variants: {
      variant: {
        default: "bg-muted",
-        line: "gap-1 bg-transparent",
+        line: "gap-1 border-b border-border bg-transparent",
      },
    },
    defaultVariants: {
@@ -58,10 +58,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
    <TabsPrimitive.Tab
      data-slot="tabs-trigger"
      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
        className
      )}
      {...props}