@freighttech/ui 0.13.18

package/src/backend/schedule/ScheduleView.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from 'react'
+import { Calendar, dateFnsLocalizer, type View, type SlotInfo } from 'react-big-calendar'
+import { addDays, differenceInCalendarDays, endOfDay, endOfMonth, endOfWeek, format, getDay, parse, startOfDay, startOfMonth, startOfWeek } from 'date-fns'
+import { enUS } from 'date-fns/locale/en-US'
+import type { ScheduleItem, ScheduleRange, ScheduleSlot, ScheduleViewMode } from './types'
+import { ScheduleToolbar } from './ScheduleToolbar'
+import { Button } from '../../primitives/button'
+import { expandRecurringItems } from './recurrence'
+
+type CalendarEvent = {
+  id: string
+  title: string
+  start: Date
+  end: Date
+  resource: ScheduleItem
+}
+
+const localizer = dateFnsLocalizer({
+  format,
+  parse,
+  startOfWeek,
+  getDay,
+  locales: { 'en-US': enUS },
+})
+
+const VIEW_MAP: Record<ScheduleViewMode, View> = {
+  day: 'day',
+  week: 'week',
+  month: 'month',
+  agenda: 'agenda',
+}
+
+function deriveRange(date: Date, view: ScheduleViewMode, agendaLength: number): ScheduleRange {
+  if (view === 'day') {
+    return { start: startOfDay(date), end: endOfDay(date) }
+  }
+  if (view === 'week') {
+    return { start: startOfWeek(date, { locale: enUS }), end: endOfWeek(date, { locale: enUS }) }
+  }
+  if (view === 'month') {
+    return { start: startOfMonth(date), end: endOfMonth(date) }
+  }
+  const length = Math.max(1, agendaLength)
+  return { start: startOfDay(date), end: endOfDay(addDays(date, length - 1)) }
+}
+
+function normalizeRange(
+  nextRange: Date[] | { start: Date; end: Date } | null | undefined,
+  view: ScheduleViewMode,
+  agendaLength: number,
+): ScheduleRange | null {
+  if (!nextRange) return null
+  if (Array.isArray(nextRange)) {
+    if (nextRange.length === 0) return null
+    if (view === 'agenda') {
+      return { start: nextRange[0], end: nextRange[nextRange.length - 1] }
+    }
+    return deriveRange(nextRange[0], view, agendaLength)
+  }
+  if (nextRange.start && nextRange.end) return { start: nextRange.start, end: nextRange.end }
+  return deriveRange(new Date(), view, agendaLength)
+}
+
+function getEventStyles(item: ScheduleItem): React.CSSProperties {
+  if (item.kind === 'event') {
+    return { backgroundColor: 'rgba(59, 130, 246, 0.15)', border: '1px solid rgba(59, 130, 246, 0.5)', color: '#1e3a8a' }
+  }
+  if (item.kind === 'exception') {
+    return { backgroundColor: 'rgba(148, 163, 184, 0.2)', border: '1px solid rgba(100, 116, 139, 0.6)', color: '#334155' }
+  }
+  return { backgroundColor: 'rgba(16, 185, 129, 0.15)', border: '1px solid rgba(16, 185, 129, 0.5)', color: '#064e3b' }
+}
+
+export type ScheduleViewProps = {
+  items: ScheduleItem[]
+  view: ScheduleViewMode
+  range: ScheduleRange
+  timezone?: string
+  onRangeChange: (range: ScheduleRange) => void
+  onViewChange: (view: ScheduleViewMode) => void
+  onItemClick?: (item: ScheduleItem) => void
+  onSlotClick?: (slot: ScheduleSlot) => void
+  onTimezoneChange?: (timezone: string) => void
+  className?: string
+}
+
+export function ScheduleView({
+  items,
+  view,
+  range,
+  timezone,
+  onRangeChange,
+  onViewChange,
+  onItemClick,
+  onSlotClick,
+  onTimezoneChange,
+  className,
+}: ScheduleViewProps) {
+  const agendaLength = React.useMemo(
+    () => Math.max(1, differenceInCalendarDays(range.end, range.start) + 1),
+    [range.end, range.start],
+  )
+  const currentView = VIEW_MAP[view]
+  const expandedItems = React.useMemo(() => expandRecurringItems(items, range), [items, range])
+  const events = React.useMemo<CalendarEvent[]>(
+    () => expandedItems.map((item) => ({
+      id: item.id,
+      title: item.title,
+      start: item.startsAt,
+      end: item.endsAt,
+      resource: item,
+    })),
+    [expandedItems],
+  )
+
+  const handleNavigate = React.useCallback((date: Date, nextView?: View) => {
+    const resolvedView = (nextView ?? currentView) as ScheduleViewMode
+    onRangeChange(deriveRange(date, resolvedView, agendaLength))
+  }, [agendaLength, currentView, onRangeChange])
+
+  const handleRangeChange = React.useCallback((nextRange: Date[] | { start: Date; end: Date }, nextView?: View) => {
+    const resolvedView = (nextView ?? currentView) as ScheduleViewMode
+    const normalized = normalizeRange(nextRange, resolvedView, agendaLength)
+    if (normalized) onRangeChange(normalized)
+  }, [agendaLength, currentView, onRangeChange])
+
+  const handleViewChange = React.useCallback((nextView: View) => {
+    const resolved = nextView as ScheduleViewMode
+    if (resolved !== view) {
+      onViewChange(resolved)
+      onRangeChange(deriveRange(new Date(), resolved, agendaLength))
+    }
+  }, [agendaLength, onRangeChange, onViewChange, view])
+
+  const rootClassName = ['schedule-view', className].filter(Boolean).join(' ')
+
+  return (
+    <div className={rootClassName}>
+      <ScheduleToolbar
+        view={view}
+        range={range}
+        timezone={timezone}
+        onRangeChange={onRangeChange}
+        onViewChange={onViewChange}
+        onTimezoneChange={onTimezoneChange}
+      />
+      <div className="schedule-calendar mt-4 rounded-xl border bg-card p-3">
+        <Calendar
+          localizer={localizer}
+          culture="en-US"
+          events={events}
+          view={currentView}
+          date={range.start}
+          toolbar={false}
+          selectable={Boolean(onSlotClick)}
+          popup
+          length={agendaLength}
+          onView={handleViewChange}
+          onNavigate={handleNavigate}
+          onRangeChange={handleRangeChange}
+          onSelectEvent={(event: CalendarEvent) => onItemClick?.(event.resource)}
+          onSelectSlot={(slot: SlotInfo) => {
+            if (!onSlotClick) return
+            onSlotClick({ start: slot.start, end: slot.end })
+          }}
+          eventPropGetter={(event: CalendarEvent) => ({
+            style: getEventStyles(event.resource),
+          })}
+          components={{
+            event: ({ event }: { event: CalendarEvent }) => {
+              const resource = event.resource
+              const hasLink = Boolean(resource.linkLabel) && typeof onItemClick === 'function'
+              return (
+                <div className="flex items-center justify-between gap-2">
+                  <span className="truncate text-xs font-medium">{resource.title}</span>
+                  {hasLink ? (
+                    <Button
+                      type="button"
+                      variant="link"
+                      size="sm"
+                      className="h-auto p-0 text-[11px]"
+                      onClick={(clickEvent) => {
+                        clickEvent.stopPropagation()
+                        onItemClick?.(resource)
+                      }}
+                    >
+                      {resource.linkLabel}
+                    </Button>
+                  ) : null}
+                </div>
+              )
+            },
+          }}
+          style={{ height: 640 }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/backend/schedule/index.ts

@@ -0,0 +1,5 @@
+export * from './types'
+export * from './ScheduleToolbar'
+export * from './ScheduleGrid'
+export * from './ScheduleAgenda'
+export * from './ScheduleView'

package/src/backend/schedule/recurrence.ts

@@ -0,0 +1,99 @@
+import type { ScheduleItem, ScheduleRange } from './types'
+
+type RuleMetadata = {
+  rrule?: string
+  exdates?: unknown
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+function startOfDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate())
+}
+
+function toDateKey(value: Date): string {
+  const year = value.getFullYear()
+  const month = String(value.getMonth() + 1).padStart(2, '0')
+  const day = String(value.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function parseRepeat(rrule: string): 'once' | 'daily' | 'weekly' {
+  const freqMatch = rrule.match(/FREQ=([A-Z]+)/)
+  const countMatch = rrule.match(/COUNT=(\d+)/)
+  const freq = freqMatch?.[1]
+  const count = countMatch?.[1] ? Number(countMatch[1]) : null
+  if (freq === 'WEEKLY') return 'weekly'
+  if (freq === 'DAILY') {
+    if (count === 1) return 'once'
+    return 'daily'
+  }
+  return 'once'
+}
+
+function parseRuleMetadata(item: ScheduleItem): RuleMetadata | null {
+  if (!item.metadata || typeof item.metadata !== 'object') return null
+  const metadata = item.metadata as { rule?: unknown }
+  if (!metadata.rule || typeof metadata.rule !== 'object') return null
+  const rule = metadata.rule as RuleMetadata
+  if (typeof rule.rrule !== 'string') return null
+  return rule
+}
+
+function normalizeExdates(exdates: unknown): Set<string> {
+  if (!Array.isArray(exdates)) return new Set()
+  const keys = exdates
+    .map((value) => {
+      if (typeof value !== 'string') return null
+      const parsed = new Date(value)
+      if (Number.isNaN(parsed.getTime())) return null
+      return toDateKey(parsed)
+    })
+    .filter((value): value is string => value !== null)
+  return new Set(keys)
+}
+
+export function expandRecurringItems(items: ScheduleItem[], range: ScheduleRange): ScheduleItem[] {
+  const expanded: ScheduleItem[] = []
+  const rangeStart = startOfDay(range.start)
+  const rangeEnd = startOfDay(range.end)
+
+  items.forEach((item) => {
+    const rule = parseRuleMetadata(item)
+    if (!rule) {
+      expanded.push(item)
+      return
+    }
+
+    const repeat = parseRepeat(rule.rrule ?? '')
+    if (repeat === 'once') {
+      expanded.push(item)
+      return
+    }
+
+    const durationMs = Math.max(0, item.endsAt.getTime() - item.startsAt.getTime())
+    const startHours = item.startsAt.getHours()
+    const startMinutes = item.startsAt.getMinutes()
+    const startSeconds = item.startsAt.getSeconds()
+    const startMs = item.startsAt.getMilliseconds()
+    const itemStartDay = startOfDay(item.startsAt)
+    const exdates = normalizeExdates(rule.exdates)
+
+    for (let cursor = new Date(rangeStart); cursor <= rangeEnd; cursor = new Date(cursor.getTime() + DAY_MS)) {
+      if (cursor < itemStartDay) continue
+      if (repeat === 'weekly' && cursor.getDay() !== item.startsAt.getDay()) continue
+      const dateKey = toDateKey(cursor)
+      if (exdates.has(dateKey)) continue
+      const start = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate(), startHours, startMinutes, startSeconds, startMs)
+      const end = new Date(start.getTime() + durationMs)
+      expanded.push({
+        ...item,
+        id: `${item.id}:${dateKey}`,
+        startsAt: start,
+        endsAt: end,
+      })
+    }
+  })
+
+  return expanded
+}

package/src/backend/schedule/types.ts

@@ -0,0 +1,26 @@
+export type ScheduleViewMode = 'day' | 'week' | 'month' | 'agenda'
+
+export type ScheduleRange = {
+  start: Date
+  end: Date
+}
+
+export type ScheduleSlot = {
+  start: Date
+  end: Date
+}
+
+export type ScheduleItem = {
+  id: string
+  kind: 'availability' | 'event' | 'exception'
+  title: string
+  startsAt: Date
+  endsAt: Date
+  status?: 'draft' | 'negotiation' | 'confirmed' | 'cancelled'
+  subjectType?: 'member' | 'resource'
+  subjectId?: string
+  color?: string
+  linkLabel?: string
+  linkHref?: string
+  metadata?: Record<string, unknown>
+}

package/src/backend/section-page/SectionNav.tsx

@@ -0,0 +1,140 @@
+'use client'
+import * as React from 'react'
+import Link from 'next/link'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { hasAllFeatures } from '@open-mercato/shared/security/features'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { IconButton } from '../../primitives/icon-button'
+import type { SectionNavGroup, SectionNavItem } from './types'
+import { mergeMenuItems } from '../injection/mergeMenuItems'
+import { useInjectedMenuItems, type MenuSurfaceId } from '../injection/useInjectedMenuItems'
+import { resolveInjectedIcon } from '../injection/resolveInjectedIcon'
+
+const DefaultIcon = (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M8 6h13M8 12h13M8 18h13" />
+    <path d="M3 6h.01M3 12h.01M3 18h.01" />
+  </svg>
+)
+
+export type SectionNavProps = {
+  title: string
+  titleKey?: string
+  sections: SectionNavGroup[]
+  activePath: string
+  userFeatures?: Set<string>
+  collapsed: boolean
+  onToggleCollapse: () => void
+  menuSurfaceId?: MenuSurfaceId
+}
+
+export function SectionNav({
+  title,
+  titleKey,
+  sections,
+  activePath,
+  userFeatures,
+  collapsed,
+  onToggleCollapse,
+  menuSurfaceId,
+}: SectionNavProps) {
+  const t = useT()
+  const { items: injectedMenuItems } = useInjectedMenuItems(menuSurfaceId ?? 'menu:sidebar:settings')
+  const grantedFeatureList = React.useMemo(() => (userFeatures ? Array.from(userFeatures) : []), [userFeatures])
+
+  const hasRequiredFeatures = (item: SectionNavItem): boolean => {
+    if (!item.requireFeatures || item.requireFeatures.length === 0) return true
+    if (!userFeatures) return true
+    return hasAllFeatures(grantedFeatureList, item.requireFeatures)
+  }
+
+  const resolvedTitle = titleKey ? t(titleKey, title) : title
+
+  const renderItem = (item: SectionNavItem) => {
+    const isActive = activePath === item.href || activePath.startsWith(item.href + '/')
+    const label = item.labelKey ? t(item.labelKey, item.label) : item.label
+
+    return (
+      <Link
+        key={item.id}
+        href={item.href}
+        className={`relative text-sm rounded px-3 py-1.5 flex items-center gap-2 transition-colors ${
+          isActive
+            ? 'bg-background border shadow-sm font-medium'
+            : 'hover:bg-accent hover:text-accent-foreground'
+        }`}
+        title={collapsed ? label : undefined}
+      >
+        {isActive && (
+          <span className="absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" />
+        )}
+        <span className="flex items-center justify-center shrink-0 text-muted-foreground">
+          {item.icon ?? DefaultIcon}
+        </span>
+        {!collapsed && <span className="truncate">{label}</span>}
+      </Link>
+    )
+  }
+
+  const renderSection = (section: SectionNavGroup) => {
+    const sectionInjected = injectedMenuItems.filter((item) => (item.groupId ?? section.id) === section.id)
+    const mergedItems = mergeMenuItems(
+      section.items.map((item) => ({ id: item.id, item })),
+      sectionInjected,
+    ).flatMap((item) => {
+      if (item.source === 'built-in') {
+        const original = section.items.find((entry) => entry.id === item.id)
+        return original ? [original] : []
+      }
+      if (!item.href) return []
+      return [{
+        id: item.id,
+        label: item.labelKey ? t(item.labelKey, item.label ?? item.id) : (item.label ?? item.id),
+        href: item.href,
+        icon: resolveInjectedIcon(item.icon) ?? undefined,
+      }]
+    })
+    const visibleItems = mergedItems.filter(hasRequiredFeatures)
+    if (visibleItems.length === 0) return null
+
+    const sortedItems = [...visibleItems].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+    const sectionLabel = section.labelKey ? t(section.labelKey, section.label) : section.label
+
+    return (
+      <div key={section.id} className="flex flex-col gap-1">
+        {!collapsed && (
+          <div className="px-3 py-1.5 text-xs uppercase text-muted-foreground/80 font-medium">
+            {sectionLabel}
+          </div>
+        )}
+        {sortedItems.map(renderItem)}
+      </div>
+    )
+  }
+
+  const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+
+  return (
+    <nav className={`flex flex-col gap-4 p-3 ${collapsed ? 'items-center' : ''}`}>
+      <div className={`flex items-center ${collapsed ? 'justify-center' : 'justify-between'} gap-2`}>
+        {!collapsed && (
+          <span className="text-sm font-medium truncate">{resolvedTitle}</span>
+        )}
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onToggleCollapse}
+          title={collapsed ? t('common.expand', 'Expand') : t('common.collapse', 'Collapse')}
+          aria-label={collapsed ? t('common.expand', 'Expand') : t('common.collapse', 'Collapse')}
+        >
+          {collapsed ? <ChevronRight className="size-4" /> : <ChevronLeft className="size-4" />}
+        </IconButton>
+      </div>
+      <div className="border-t" />
+      <div className={`flex flex-col gap-4 ${collapsed ? 'items-center' : ''}`}>
+        {sortedSections.map(renderSection)}
+      </div>
+    </nav>
+  )
+}

package/src/backend/section-page/SectionPage.tsx

@@ -0,0 +1,34 @@
+'use client'
+import * as React from 'react'
+import { SectionNav } from './SectionNav'
+import type { SectionPageProps } from './types'
+
+export function SectionPage({
+  title,
+  titleKey,
+  sections,
+  activePath,
+  userFeatures,
+  children,
+}: SectionPageProps) {
+  const [collapsed, setCollapsed] = React.useState(false)
+
+  return (
+    <div className="flex h-full min-h-[calc(100vh-8rem)]">
+      <aside className={`${collapsed ? 'w-16' : 'w-64'} border-r bg-muted/30 overflow-y-auto shrink-0 transition-all duration-200`}>
+        <SectionNav
+          title={title}
+          titleKey={titleKey}
+          sections={sections}
+          activePath={activePath}
+          userFeatures={userFeatures}
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed(!collapsed)}
+        />
+      </aside>
+      <main className="flex-1 overflow-y-auto p-6">
+        {children}
+      </main>
+    </div>
+  )
+}

package/src/backend/section-page/index.ts

@@ -0,0 +1,3 @@
+export { SectionPage } from './SectionPage'
+export { SectionNav } from './SectionNav'
+export type { SectionPageProps, SectionNavGroup, SectionNavItem } from './types'

package/src/backend/section-page/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+
+export type SectionNavItem = {
+  id: string
+  label: string
+  labelKey?: string
+  href: string
+  icon?: ReactNode
+  iconMarkup?: string
+  requireFeatures?: string[]
+  order?: number
+  children?: SectionNavItem[]
+}
+
+export type SectionNavGroup = {
+  id: string
+  label: string
+  labelKey?: string
+  items: SectionNavItem[]
+  order?: number
+}
+
+export type SectionPageProps = {
+  title: string
+  titleKey?: string
+  sections: SectionNavGroup[]
+  activePath: string
+  userFeatures?: Set<string>
+  children: ReactNode
+}

package/src/backend/settings/SettingsNavigation.tsx

@@ -0,0 +1,74 @@
+'use client'
+import * as React from 'react'
+import Link from 'next/link'
+import { hasAllFeatures } from '@open-mercato/shared/security/features'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type SettingsCard = {
+  id: string
+  titleKey: string
+  title: string
+  descriptionKey: string
+  description: string
+  href: string
+  icon: React.ReactNode
+  requireFeatures?: string[]
+}
+
+export type SettingsSection = {
+  id: string
+  titleKey: string
+  title: string
+  cards: SettingsCard[]
+}
+
+export type SettingsNavigationProps = {
+  sections: SettingsSection[]
+  /** Optional set of user features to filter cards by requireFeatures */
+  userFeatures?: Set<string>
+}
+
+export function SettingsNavigation({ sections, userFeatures }: SettingsNavigationProps) {
+  const t = useT()
+  const grantedFeatureList = React.useMemo(() => (userFeatures ? Array.from(userFeatures) : []), [userFeatures])
+
+  const hasRequiredFeatures = (card: SettingsCard): boolean => {
+    if (!card.requireFeatures || card.requireFeatures.length === 0) return true
+    if (!userFeatures) return true // If no userFeatures provided, show all cards
+    return hasAllFeatures(grantedFeatureList, card.requireFeatures)
+  }
+
+  const renderCard = (card: SettingsCard) => (
+    <Link
+      key={card.href}
+      href={card.href}
+      className="group flex flex-col gap-2 rounded-lg border bg-background p-4 shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+    >
+      <div className="flex items-center gap-3">
+        <span className="text-muted-foreground group-hover:text-accent-foreground">
+          {card.icon}
+        </span>
+        <h3 className="font-medium">{t(card.titleKey, card.title)}</h3>
+      </div>
+      <p className="text-sm text-muted-foreground group-hover:text-accent-foreground/80">
+        {t(card.descriptionKey, card.description)}
+      </p>
+    </Link>
+  )
+
+  const renderSection = (section: SettingsSection) => {
+    const visibleCards = section.cards.filter(hasRequiredFeatures)
+    if (visibleCards.length === 0) return null
+
+    return (
+      <div key={section.id} className="space-y-3">
+        <h2 className="text-lg font-semibold">{t(section.titleKey, section.title)}</h2>
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {visibleCards.map(renderCard)}
+        </div>
+      </div>
+    )
+  }
+
+  return <>{sections.map(renderSection)}</>
+}

package/src/backend/settings/SettingsPageWrapper.tsx

@@ -0,0 +1,78 @@
+'use client'
+import * as React from 'react'
+import { usePathname } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '../utils/apiCall'
+import { SectionPage } from '../section-page'
+import type { SectionNavGroup } from '../section-page'
+
+type FeatureCheckResponse = { ok?: boolean; granted?: string[] }
+
+export type SettingsPageWrapperProps = {
+  sections: SectionNavGroup[]
+  requiredFeatures: string[]
+  children: React.ReactNode
+}
+
+export function SettingsPageWrapper({
+  sections,
+  requiredFeatures,
+  children,
+}: SettingsPageWrapperProps) {
+  const t = useT()
+  const pathname = usePathname()
+  const [userFeatures, setUserFeatures] = React.useState<Set<string> | undefined>(undefined)
+  const [loading, setLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    let cancelled = false
+    async function loadFeatures() {
+      if (requiredFeatures.length === 0) {
+        setUserFeatures(new Set())
+        setLoading(false)
+        return
+      }
+      try {
+        const call = await apiCall<FeatureCheckResponse>('/api/auth/feature-check', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ features: requiredFeatures }),
+        })
+        if (cancelled) return
+        if (call.ok && Array.isArray(call.result?.granted)) {
+          setUserFeatures(new Set(call.result.granted))
+        } else {
+          setUserFeatures(new Set())
+        }
+      } catch {
+        if (!cancelled) setUserFeatures(new Set())
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    loadFeatures()
+    return () => {
+      cancelled = true
+    }
+  }, [requiredFeatures])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-muted-foreground">{t('common.loading', 'Loading...')}</div>
+      </div>
+    )
+  }
+
+  return (
+    <SectionPage
+      title="Settings"
+      titleKey="backend.nav.settings"
+      sections={sections}
+      activePath={pathname ?? '/backend/settings'}
+      userFeatures={userFeatures}
+    >
+      {children}
+    </SectionPage>
+  )
+}