create-freakpunch 0.0.0-stage → 0.1.0

package/template/src/pages/settings/company/security-policies-page.tsx

@@ -0,0 +1,164 @@
+import { Controller, useForm, type Control } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+
+import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { useCan } from '@/core/auth/can'
+import { useCompanySettings, useUpdateSecurity } from '@/core/company/hooks'
+import {
+  minLengthOptions,
+  passwordExpiryOptions,
+  sessionTimeoutOptions,
+  type SecurityPolicies,
+} from '@/core/company/types'
+import { FormLayout, FormSection } from '@/core/components/form-page'
+import { Page } from '@/core/components/page'
+import { ErrorState, LoadingState } from '@/core/components/states'
+import { ReadOnlyNotice } from './components/read-only-notice'
+
+export default function SecurityPoliciesPage() {
+  const { t } = useTranslation('company')
+  const query = useCompanySettings()
+  return (
+    <Page title={t('policies.title')} description={t('policies.description')}>
+      {query.isPending ? (
+        <LoadingState />
+      ) : query.error ? (
+        <ErrorState error={query.error} onRetry={() => query.refetch()} />
+      ) : (
+        <PoliciesForm policies={query.data.security} />
+      )}
+    </Page>
+  )
+}
+
+function PoliciesForm({ policies }: { policies: SecurityPolicies }) {
+  const { t } = useTranslation('company')
+  const canEdit = useCan('settings.company.edit')
+  const update = useUpdateSecurity()
+  const { control, handleSubmit, formState, reset } = useForm<SecurityPolicies>({ defaultValues: policies })
+
+  const onSubmit = handleSubmit(async (values) => {
+    const saved = await update.mutateAsync(values)
+    reset(saved.security)
+    toast.success(t('policies.saved'))
+  })
+
+  const timeoutLabel = (minutes: number) =>
+    minutes < 60
+      ? t('policies.session.minutes', { count: minutes })
+      : minutes < 1440
+        ? t('policies.session.hours', { count: minutes / 60 })
+        : t('policies.session.days', { count: minutes / 1440 })
+
+  return (
+    <>
+      {!canEdit && <ReadOnlyNotice />}
+      <FormLayout
+        onSubmit={onSubmit}
+        saveBar="dirty"
+        isDirty={formState.isDirty}
+        isSubmitting={formState.isSubmitting}
+        onCancel={() => reset()}
+        readOnly={!canEdit}
+      >
+        <FormSection title={t('policies.twoFactor.title')} description={t('policies.twoFactor.description')}>
+          <SwitchRow control={control} name="requireTwoFactor" label={t('policies.twoFactor.label')} />
+        </FormSection>
+
+        <FormSection title={t('policies.password.title')} description={t('policies.password.description')}>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <NumberSelect
+              control={control}
+              name="password.minLength"
+              label={t('policies.password.minLength')}
+              options={minLengthOptions.map((n) => ({ value: n, label: t('policies.password.characters', { count: n }) }))}
+            />
+            <NumberSelect
+              control={control}
+              name="password.expiryDays"
+              label={t('policies.password.expiry')}
+              options={passwordExpiryOptions.map((n) => ({
+                value: n,
+                label: n === 0 ? t('policies.password.never') : t('policies.password.days', { count: n }),
+              }))}
+            />
+          </div>
+          <div className="flex flex-col gap-3">
+            <SwitchRow control={control} name="password.requireUppercase" label={t('policies.password.uppercase')} />
+            <SwitchRow control={control} name="password.requireNumber" label={t('policies.password.number')} />
+            <SwitchRow control={control} name="password.requireSymbol" label={t('policies.password.symbol')} />
+          </div>
+        </FormSection>
+
+        <FormSection title={t('policies.session.title')} description={t('policies.session.description')}>
+          <div className="sm:max-w-xs">
+            <NumberSelect
+              control={control}
+              name="sessionTimeout"
+              label={t('policies.session.timeout')}
+              options={sessionTimeoutOptions.map((n) => ({ value: n, label: timeoutLabel(n) }))}
+            />
+          </div>
+        </FormSection>
+      </FormLayout>
+    </>
+  )
+}
+
+type BoolPath = 'requireTwoFactor' | 'password.requireUppercase' | 'password.requireNumber' | 'password.requireSymbol'
+type NumberPath = 'password.minLength' | 'password.expiryDays' | 'sessionTimeout'
+
+function SwitchRow({ control, name, label, hint }: { control: Control<SecurityPolicies>; name: BoolPath; label: string; hint?: string }) {
+  return (
+    <Field orientation="horizontal">
+      <FieldContent>
+        <FieldLabel htmlFor={name}>{label}</FieldLabel>
+        {hint && <FieldDescription>{hint}</FieldDescription>}
+      </FieldContent>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => <Switch id={name} checked={field.value} onCheckedChange={field.onChange} />}
+      />
+    </Field>
+  )
+}
+
+function NumberSelect({
+  control,
+  name,
+  label,
+  options,
+}: {
+  control: Control<SecurityPolicies>
+  name: NumberPath
+  label: string
+  options: { value: number; label: string }[]
+}) {
+  return (
+    <Field>
+      <FieldLabel htmlFor={name}>{label}</FieldLabel>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <Select items={options} value={field.value} onValueChange={(v) => v != null && field.onChange(Number(v))}>
+            <SelectTrigger id={name} className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((o) => (
+                <SelectItem key={o.value} value={o.value}>
+                  {o.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      />
+    </Field>
+  )
+}

package/template/src/pages/settings/company/users-page.tsx

@@ -0,0 +1,262 @@
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { createColumnHelper } from '@tanstack/react-table'
+import { Lock, MailPlus, MoreHorizontal, Send, UserCheck, UserX } from 'lucide-react'
+import { toast } from 'sonner'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { ApiError } from '@/core/api/http'
+import { Can } from '@/core/auth/can'
+import { canManageUser, roles } from '@/core/auth/permissions'
+import { useSession } from '@/core/auth/use-auth'
+import { useConfirm } from '@/core/components/confirm-dialog'
+import { DataTable } from '@/core/components/data-table/data-table'
+import type { DataTableFeatures } from '@/core/components/data-table/features'
+import { ClearFiltersButton, FilterSelect, TableSearch } from '@/core/components/data-table/toolbar'
+import { useListUrlState } from '@/core/components/data-table/use-list-url-state'
+import { Page } from '@/core/components/page'
+import { EmptyState } from '@/core/components/states'
+import { StatusBadge, type StatusTone } from '@/core/components/status-badge'
+import { UserAvatar } from '@/core/components/user-avatar'
+import { useFormat } from '@/core/i18n/use-format'
+import { useChangeRole, useResendInvite, useSetUserStatus, useUsers } from '@/core/users/hooks'
+import { assignableRoles, fullName, userStatuses, type AssignableRole, type User, type UserStatus } from '@/core/users/types'
+import { InviteDialog } from './components/invite-dialog'
+
+const FILTER_KEYS = ['role', 'status'] as const
+const DEFAULT_SORT = { id: 'name', desc: false }
+const helper = createColumnHelper<DataTableFeatures, User>()
+const statusTone: Record<UserStatus, StatusTone> = { active: 'success', invited: 'warning', deactivated: 'neutral' }
+
+export default function UsersPage() {
+  const { t } = useTranslation(['company', 'common'])
+  const fmt = useFormat()
+  const list = useListUrlState({ filterKeys: FILTER_KEYS, defaultSort: DEFAULT_SORT })
+  const query = useUsers(list.listParams)
+  const session = useSession()
+  const me = session?.user ?? null
+  const confirm = useConfirm()
+  const { mutateAsync: changeRole } = useChangeRole()
+  const { mutateAsync: setStatus } = useSetUserStatus()
+  const { mutateAsync: resendInvite } = useResendInvite()
+  const [inviteOpen, setInviteOpen] = useState(false)
+
+  const columns = useMemo(() => {
+    const displayName = (u: User) => fullName(u) || u.email
+
+    async function run(action: () => Promise<unknown>, success: string) {
+      try {
+        await action()
+        toast.success(success)
+      } catch (e) {
+        toast.error(e instanceof ApiError && e.status === 403 ? t('users.toasts.forbidden') : t('users.toasts.failed'))
+      }
+    }
+
+    async function deactivate(user: User) {
+      const name = displayName(user)
+      const ok = await confirm({
+        title: t('users.deactivateConfirm.title', { name }),
+        description: t('users.deactivateConfirm.description'),
+        confirmLabel: t('users.actions.deactivate'),
+        destructive: true,
+      })
+      if (ok) await run(() => setStatus({ id: user.id, status: 'deactivated' }), t('users.toasts.deactivated', { name }))
+    }
+
+    return helper.columns([
+      helper.accessor((u) => displayName(u), {
+        id: 'name',
+        header: t('users.columns.user'),
+        cell: ({ row: { original: u } }) => (
+          <div className="flex min-w-0 items-center gap-3">
+            <UserAvatar user={u} />
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="truncate font-medium">{fullName(u) || u.email}</span>
+                {u.id === me?.id && <Badge variant="secondary">{t('users.you')}</Badge>}
+              </div>
+              <div className="truncate text-xs text-muted-foreground">{fullName(u) ? u.email : u.jobTitle}</div>
+              <div className="mt-1 sm:hidden">
+                <Badge variant="secondary">{t(`common:roles.${u.role as 'owner'}`)}</Badge>
+              </div>
+            </div>
+          </div>
+        ),
+      }),
+      helper.accessor('role', {
+        header: t('users.columns.role'),
+        meta: { hideOnMobile: true },
+        cell: ({ getValue }) => <Badge variant="secondary">{t(`common:roles.${getValue() as 'owner'}`)}</Badge>,
+      }),
+      helper.accessor('status', {
+        header: t('users.columns.status'),
+        meta: { hideOnMobile: true },
+        cell: ({ getValue }) => <StatusBadge tone={statusTone[getValue()]}>{t(`users.status.${getValue()}`)}</StatusBadge>,
+      }),
+      helper.accessor('lastActiveAt', {
+        header: t('users.columns.lastActive'),
+        meta: { hideOnMobile: true, className: 'text-muted-foreground' },
+        cell: ({ row: { original: u } }) =>
+          u.status === 'invited'
+            ? t('users.pendingInvite', { when: fmt.relative(u.createdAt) })
+            : u.lastActiveAt
+              ? fmt.relative(u.lastActiveAt)
+              : t('users.never'),
+      }),
+      helper.display({
+        id: 'actions',
+        header: () => <span className="sr-only">{t('common:table.actions')}</span>,
+        meta: { align: 'right', className: 'w-12' },
+        cell: ({ row: { original: u } }) => {
+          if (u.role === 'owner') {
+            return (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <span className="inline-flex size-7 items-center justify-center text-muted-foreground" aria-label={t('users.ownerLocked')}>
+                      <Lock className="size-3.5" />
+                    </span>
+                  }
+                />
+                <TooltipContent className="max-w-64">{t('users.ownerLocked')}</TooltipContent>
+              </Tooltip>
+            )
+          }
+          if (!canManageUser(me, u)) return null
+          const name = displayName(u)
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button variant="ghost" size="icon-sm" aria-label={t('common:table.actionsFor', { name })}>
+                    <MoreHorizontal />
+                  </Button>
+                }
+              />
+              <DropdownMenuContent align="end" className="w-52">
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>{t('users.actions.changeRole')}</DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuRadioGroup
+                      value={u.role}
+                      onValueChange={(role) => {
+                        if (role === u.role) return
+                        void run(
+                          () => changeRole({ id: u.id, role: role as AssignableRole }),
+                          t('users.toasts.roleChanged', { name, role: t(`common:roles.${role as 'owner'}`) }),
+                        )
+                      }}
+                    >
+                      {assignableRoles.map((r) => (
+                        <DropdownMenuRadioItem key={r} value={r}>
+                          {t(`common:roles.${r as 'owner'}`)}
+                        </DropdownMenuRadioItem>
+                      ))}
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                {u.status === 'invited' && (
+                  <DropdownMenuItem onClick={() => void run(() => resendInvite(u.id), t('users.toasts.resent', { email: u.email }))}>
+                    <Send />
+                    {t('users.actions.resendInvite')}
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator />
+                {u.status === 'deactivated' ? (
+                  <DropdownMenuItem
+                    onClick={() => void run(() => setStatus({ id: u.id, status: 'active' }), t('users.toasts.reactivated', { name }))}
+                  >
+                    <UserCheck />
+                    {t('users.actions.reactivate')}
+                  </DropdownMenuItem>
+                ) : (
+                  <DropdownMenuItem variant="destructive" onClick={() => void deactivate(u)}>
+                    <UserX />
+                    {t('users.actions.deactivate')}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )
+        },
+      }),
+    ])
+  }, [t, fmt, me, confirm, changeRole, setStatus, resendInvite])
+
+  const roleOptions = roles.map((r) => ({ value: r, label: t(`common:roles.${r as 'owner'}`) }))
+  const statusOptions = userStatuses.map((s) => ({ value: s, label: t(`users.status.${s}`) }))
+
+  return (
+    <Page
+      title={t('users.title')}
+      description={t('users.description')}
+      actions={
+        <Can permission="users.manage">
+          <Button onClick={() => setInviteOpen(true)}>
+            <MailPlus data-icon="inline-start" />
+            {t('users.invite')}
+          </Button>
+        </Can>
+      }
+    >
+      <DataTable
+        columns={columns}
+        data={query.data?.items}
+        total={query.data?.total ?? 0}
+        getRowId={(u) => u.id}
+        pagination={list.pagination}
+        onPaginationChange={list.onPaginationChange}
+        sorting={list.sorting}
+        onSortingChange={list.onSortingChange}
+        isLoading={query.isPending}
+        isFetching={query.isFetching}
+        error={query.error}
+        onRetry={() => query.refetch()}
+        noun={t('users.noun')}
+        toolbar={
+          <>
+            <TableSearch value={list.search} onChange={list.setSearch} placeholder={t('users.search')} />
+            <FilterSelect
+              label={t('users.filters.role')}
+              allLabel={t('users.filters.allRoles')}
+              value={list.filters.role}
+              options={roleOptions}
+              onChange={(v) => list.setFilter('role', v)}
+            />
+            <FilterSelect
+              label={t('users.filters.status')}
+              allLabel={t('users.filters.allStatuses')}
+              value={list.filters.status}
+              options={statusOptions}
+              onChange={(v) => list.setFilter('status', v)}
+            />
+            {list.hasActiveFilters && <ClearFiltersButton onClick={list.clearAll} />}
+          </>
+        }
+        empty={
+          <EmptyState
+            title={t('users.emptyTitle')}
+            description={t('users.emptyDescription')}
+            action={list.hasActiveFilters ? <ClearFiltersButton onClick={list.clearAll} /> : undefined}
+          />
+        }
+      />
+      <InviteDialog open={inviteOpen} onOpenChange={setInviteOpen} />
+    </Page>
+  )
+}

package/template/src/pages/settings/settings-layout.tsx

@@ -0,0 +1,57 @@
+import { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
+import { NavLink, Outlet } from 'react-router'
+
+import { usePermissions } from '@/core/auth/can'
+import { useAnyT } from '@/core/i18n/keys'
+import { cn } from '@/lib/utils'
+import { settingsNav } from './settings-nav'
+
+/** Same raised pill as the main sidebar's active item. */
+const linkClass = ({ isActive }: { isActive: boolean }) =>
+  cn(
+    'flex h-8 shrink-0 items-center gap-2 rounded-lg px-2.5 text-[13px] whitespace-nowrap text-muted-foreground outline-none',
+    'hover:bg-fill-1 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40 [&>svg]:size-4 [&>svg]:shrink-0',
+    isActive &&
+      'bg-raised text-foreground shadow-(--shadow-raised) ring-1 ring-border hover:bg-raised [&>svg]:text-primary',
+  )
+
+/**
+ * /app/settings: left sub-navigation inside the content panel (a horizontal
+ * scroller on mobile) and the active settings page on the right.
+ */
+export default function SettingsLayout() {
+  const t = useAnyT()
+  const { t: ts } = useTranslation('settings')
+  const { can } = usePermissions()
+
+  const groups = settingsNav
+    .filter((g) => !g.permission || can(g.permission))
+    .map((g) => ({ ...g, items: g.items.filter((i) => !i.permission || can(i.permission)) }))
+
+  return (
+    <div className="mx-auto flex w-full max-w-(--page-max-width) flex-col gap-6 md:flex-row md:gap-10">
+      <nav aria-label={ts('navLabel')} className="-mx-1 md:mx-0 md:w-52 md:shrink-0">
+        <div className="scrollbar-none flex gap-1 overflow-x-auto px-1 pb-1 md:sticky md:top-0 md:flex-col md:gap-5 md:overflow-visible md:px-0 md:pb-0">
+          {groups.map((group, gi) => (
+            <Fragment key={group.id}>
+              {gi > 0 && <span aria-hidden className="mx-1 w-px shrink-0 self-stretch bg-border md:hidden" />}
+              <div className="flex gap-1 md:flex-col md:gap-0.5">
+                <h2 className="label-caps hidden px-2.5 pb-1.5 md:block">{t(group.label)}</h2>
+                {group.items.map((item) => (
+                  <NavLink key={item.path} to={item.path} className={linkClass}>
+                    <item.icon />
+                    <span>{t(item.label)}</span>
+                  </NavLink>
+                ))}
+              </div>
+            </Fragment>
+          ))}
+        </div>
+      </nav>
+      <div className="min-w-0 flex-1">
+        <Outlet />
+      </div>
+    </div>
+  )
+}

package/template/src/pages/settings/settings-nav.ts

@@ -0,0 +1,69 @@
+import {
+  Bell,
+  Blocks,
+  Building2,
+  KeyRound,
+  Palette,
+  Plug,
+  ScrollText,
+  ShieldCheck,
+  SlidersHorizontal,
+  TriangleAlert,
+  UserRound,
+  Users,
+  LockKeyhole,
+  type LucideIcon,
+} from 'lucide-react'
+
+import type { Permission } from '@/core/auth/permissions'
+import { isFeatureOn } from '@/core/config/runtime'
+import type { FeatureId } from '@/core/config/types'
+import type { I18nKey } from '@/core/i18n/keys'
+
+export type SettingsNavItem = {
+  /** Path relative to /app/settings. */
+  path: string
+  label: I18nKey
+  icon: LucideIcon
+  /** Same permission as the route handle (see settings routes). */
+  permission?: Permission
+  /** Hidden when app.config.ts switches this feature off (same check as the route). */
+  feature?: FeatureId
+}
+
+export type SettingsNavGroup = { id: string; label: I18nKey; permission?: Permission; items: SettingsNavItem[] }
+
+/** Left sub-navigation of /app/settings. Keep in sync with settingsRoutes. */
+const allSettingsNav: SettingsNavGroup[] = [
+  {
+    id: 'account',
+    label: 'settings:groups.account',
+    items: [
+      { path: 'profile', label: 'settings:nav.profile', icon: UserRound },
+      { path: 'security', label: 'settings:nav.security', icon: KeyRound },
+      { path: 'notifications', label: 'settings:nav.notifications', icon: Bell, feature: 'notifications' },
+      { path: 'preferences', label: 'settings:nav.preferences', icon: SlidersHorizontal },
+    ],
+  },
+  {
+    id: 'company',
+    label: 'settings:groups.company',
+    permission: 'settings.company.view',
+    items: [
+      { path: 'company/general', label: 'settings:nav.general', icon: Building2 },
+      { path: 'company/branding', label: 'settings:nav.branding', icon: Palette },
+      { path: 'company/users', label: 'settings:nav.users', icon: Users, permission: 'users.view', feature: 'users' },
+      { path: 'company/roles', label: 'settings:nav.roles', icon: ShieldCheck, permission: 'roles.view', feature: 'roles' },
+      { path: 'company/security', label: 'settings:nav.securityPolicies', icon: LockKeyhole, feature: 'securityPolicies' },
+      { path: 'company/modules', label: 'settings:nav.modules', icon: Blocks, feature: 'modules' },
+      { path: 'company/integrations', label: 'settings:nav.integrations', icon: Plug, permission: 'integrations.manage', feature: 'integrations' },
+      { path: 'company/audit-log', label: 'settings:nav.auditLog', icon: ScrollText, permission: 'audit.view', feature: 'auditLog' },
+      { path: 'company/danger-zone', label: 'settings:nav.dangerZone', icon: TriangleAlert, permission: 'company.delete', feature: 'dangerZone' },
+    ],
+  },
+]
+
+export const settingsNav = allSettingsNav.map((group) => ({
+  ...group,
+  items: group.items.filter((item) => !item.feature || isFeatureOn(item.feature)),
+}))

package/template/src/pages/settings/settings-routes.tsx

@@ -0,0 +1,49 @@
+import { Navigate, type RouteObject } from 'react-router'
+
+import { isFeatureOn } from '@/core/config/runtime'
+import type { FeatureId } from '@/core/config/types'
+import { lazyPage } from '@/core/modules/lazy-page'
+import type { RouteHandle } from '@/core/modules/types'
+
+const page = (crumb: RouteHandle['crumb'], load: Parameters<typeof lazyPage>[0], permission?: RouteHandle['permission']) => ({
+  handle: { crumb, permission } satisfies RouteHandle,
+  lazy: lazyPage(load),
+})
+
+const when = (feature: FeatureId, route: RouteObject): RouteObject[] => (isFeatureOn(feature) ? [route] : [])
+
+/**
+ * /app/settings/* — each page is its own sub-route. Permissions here must
+ * match settings-nav.ts (the guard redirects to /app/no-access).
+ */
+export const settingsRoutes: RouteObject = {
+  path: 'settings',
+  handle: { crumb: 'common:nav.settings' } satisfies RouteHandle,
+  lazy: lazyPage(() => import('./settings-layout')),
+  children: [
+    { index: true, element: <Navigate to="profile" replace /> },
+    { path: 'profile', ...page('settings:nav.profile', () => import('./account/profile-page')) },
+    { path: 'security', ...page('settings:nav.security', () => import('./account/security-page')) },
+    ...when('notifications', { path: 'notifications', ...page('settings:nav.notifications', () => import('./account/notifications-page')) }),
+    { path: 'preferences', ...page('settings:nav.preferences', () => import('./account/preferences-page')) },
+    {
+      path: 'company',
+      handle: { crumb: 'settings:nav.company', permission: 'settings.company.view' } satisfies RouteHandle,
+      children: [
+        { index: true, element: <Navigate to="general" replace /> },
+        { path: 'general', ...page('settings:nav.general', () => import('./company/general-page')) },
+        { path: 'branding', ...page('settings:nav.branding', () => import('./company/branding-page')) },
+        ...when('users', { path: 'users', ...page('settings:nav.users', () => import('./company/users-page'), 'users.view') }),
+        ...when('roles', { path: 'roles', ...page('settings:nav.roles', () => import('./company/roles-page'), 'roles.view') }),
+        ...when('securityPolicies', { path: 'security', ...page('settings:nav.securityPolicies', () => import('./company/security-policies-page')) }),
+        ...when('modules', { path: 'modules', ...page('settings:nav.modules', () => import('./company/modules-page')) }),
+        ...when('integrations', {
+          path: 'integrations',
+          ...page('settings:nav.integrations', () => import('./company/integrations/integrations-page'), 'integrations.manage'),
+        }),
+        ...when('auditLog', { path: 'audit-log', ...page('settings:nav.auditLog', () => import('./company/audit-log-page'), 'audit.view') }),
+        ...when('dangerZone', { path: 'danger-zone', ...page('settings:nav.dangerZone', () => import('./company/danger-zone-page'), 'company.delete') }),
+      ],
+    },
+  ],
+}

package/template/src/providers.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { CircleCheck, Info, OctagonX, TriangleAlert } from 'lucide-react'
+
+import { Toaster } from '@/components/ui/sonner'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { ApiError } from '@/core/api/http'
+import { useCompanySettings } from '@/core/company/hooks'
+import { ConfirmProvider } from '@/core/components/confirm-dialog'
+import { BrandProvider } from '@/core/theme/brand-context'
+import { ThemeProvider, useTheme } from '@/core/theme/theme-context'
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 30_000,
+        refetchOnWindowFocus: false,
+        // Don't retry client errors (404, 401, validation).
+        retry: (count, error) => !(error instanceof ApiError && error.status < 500) && count < 2,
+      },
+    },
+  })
+}
+
+/** Semantic-token icons (the vendored defaults hard-code blue/orange). */
+const toastIcons = {
+  success: <CircleCheck className="size-4 text-success" />,
+  info: <Info className="size-4 text-info" />,
+  warning: <TriangleAlert className="size-4 text-warning" />,
+  error: <OctagonX className="size-4 text-danger" />,
+}
+
+/** Applies the company favicon (Settings → Company → Branding) to the document. */
+function CompanyFavicon() {
+  const favicon = useCompanySettings().data?.branding.favicon
+  useEffect(() => {
+    const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+    if (!link) return
+    link.type = favicon ? '' : 'image/svg+xml'
+    link.href = favicon ?? `${import.meta.env.BASE_URL}favicon.svg`
+  }, [favicon])
+  return null
+}
+
+/** All notifications appear bottom-center, on every screen size. */
+function ThemedToaster() {
+  const { resolvedTheme } = useTheme()
+  return <Toaster theme={resolvedTheme} position="bottom-center" icons={toastIcons} />
+}
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(createQueryClient)
+
+  return (
+    <ThemeProvider>
+      <BrandProvider>
+        <QueryClientProvider client={queryClient}>
+          <TooltipProvider>
+            <ConfirmProvider>{children}</ConfirmProvider>
+            <ThemedToaster />
+            <CompanyFavicon />
+          </TooltipProvider>
+        </QueryClientProvider>
+      </BrandProvider>
+    </ThemeProvider>
+  )
+}