feat(mileage): surface Körjournal in the nav behind a settings toggle (#1540)

* feat(mileage): surface Körjournal in the nav behind a settings toggle

The /mileage page shipped hidden: the route works but no nav row points at
it. Add company_settings.mileage_enabled (mirroring dimensions_enabled) with
a switch in Fönster -> Bokföring, and show the Arbeta nav row when the toggle
is on OR the company already has mileage_trips rows, the same hybrid gate as
webshop orders, so trips created via API/MCP can never become invisible
underlag. UI visibility only, never load-bearing for correctness.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(migrations): move mileage_enabled migration after already-applied 20260812153208

origin/main merged in 20260812153208 which prod has already applied; a new
file sorting before it risks an out-of-order db push abort.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

components/dashboard/DashboardNav.tsx

@@ -46,6 +46,7 @@ import {
   Library,
   BookCheck,
   ShoppingCart,
+  Car,
 } from 'lucide-react'
 import { getBranding } from '@/lib/branding/service'
 import { ENABLED_EXTENSION_IDS as _ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
@@ -86,6 +87,10 @@ interface DashboardNavProps {
   // connection, or existing webshop_orders rows). Drives visibility of the
   // Order row: same mechanism as paysSalaries, fetched by the layout.
   hasWebshop?: boolean
+  // Whether the Körjournal row shows: the company_settings.mileage_enabled
+  // toggle OR existing mileage_trips rows (trips created via API/MCP must
+  // stay reachable). Computed by the dashboard layout.
+  hasMileage?: boolean
   isSandbox?: boolean
   extensionNavItems?: ExtensionNavItem[]
   // Signed-in user's full name + email: drives the bottom-left account
@@ -172,6 +177,10 @@ interface NavItem {
   // WooCommerce/Shopify connection or already-imported order rows.
   // UI-visibility gate only; the page and APIs work regardless.
   requiresWebshop?: boolean
+  // Körjournal surfaces: visible only when the company has opted in via the
+  // bookkeeping settings toggle (company_settings.mileage_enabled) or already
+  // has trips. UI-visibility gate only; the page and APIs work regardless.
+  requiresMileage?: boolean
   // Paywall surfaces: hidden unless the active company holds this paid
   // capability. Cosmetic only, the page and API gates are the real
   // enforcement; this just keeps the sidebar honest for non-payers.
@@ -208,8 +217,10 @@ const navItems: NavItem[] = [
   { href: '/orders', labelKey: 'sales_orders', icon: ShoppingCart, group: 'arbeta', requiresWebshop: true },
   { href: '/supplier-invoices', labelKey: 'supplier_invoices', icon: Wallet, group: 'arbeta' },
   { href: '/salary', labelKey: 'salary', icon: HandCoins, group: 'arbeta', employerOnly: true },
-  // Körjournal is deliberately hidden from the nav; the /mileage route stays live.
-  // { href: '/mileage', labelKey: 'mileage', icon: Car, group: 'arbeta' },
+  // Körjournal: hidden by default (most companies have no car); shows when
+  // the settings toggle is on or trips already exist (hybrid gate, same
+  // "data stays reachable" reasoning as the Order row above).
+  { href: '/mileage', labelKey: 'mileage', icon: Car, group: 'arbeta', requiresMileage: true },
   // Analys: read the numbers.
   { href: '/kpi', labelKey: 'kpi', icon: TrendingUp, group: 'analys' },
   { href: '/reports', labelKey: 'reports', icon: BarChart3, group: 'analys' },
@@ -283,7 +294,7 @@ const groupLabelKey: Record<Exclude<GroupKey, 'top'>, string> = {
   skatt: 'group_tax',
 }
 
-export default function DashboardNav({ companyName: _companyName, entityType, paysSalaries = false, dimensionsEnabled = false, hasWebshop = false, isSandbox = false, extensionNavItems = [], userName = null, userEmail = null, initialUiState }: DashboardNavProps) {
+export default function DashboardNav({ companyName: _companyName, entityType, paysSalaries = false, dimensionsEnabled = false, hasWebshop = false, hasMileage = false, isSandbox = false, extensionNavItems = [], userName = null, userEmail = null, initialUiState }: DashboardNavProps) {
   const pathname = usePathname()
   const router = useRouter()
   const supabase = useRealtimeSupabase()
@@ -503,6 +514,9 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa
     // Webshop surfaces are hidden until a store is connected (or order rows
     // already exist from a since-disconnected store).
     if (item.requiresWebshop && !hasWebshop) return false
+    // Körjournal is hidden until the company opts in via the bookkeeping
+    // settings toggle (or trips already exist, e.g. created via MCP).
+    if (item.requiresMileage && !hasMileage) return false
     // Paywalled surfaces (e.g. the AI-only Dokumentinkorg) are hidden unless
     // the active company holds the capability. The page + API gates enforce
     // the paywall; this keeps the sidebar from advertising a dead workspace.

components/settings/MileageToggle.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useLocale, useTranslations } from 'next-intl'
+import { ExternalLink } from 'lucide-react'
+import { Switch } from '@/components/ui/switch'
+import { useToast } from '@/components/ui/use-toast'
+import {
+  SettingsRow,
+  SettingsRowEnd,
+} from '@/components/settings/SettingsRows'
+import { useSettings } from '@/components/settings/useSettings'
+import { useCanWrite } from '@/lib/hooks/use-can-write'
+import { cn } from '@/lib/utils'
+import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
+
+/**
+ * Company-level toggle for the Körjournal (mileage log). Persists
+ * company_settings.mileage_enabled through the standard settings PUT: the
+ * flag gates UI visibility only (the nav row), never correctness. Trips
+ * created via API/MCP work regardless, and the nav row also shows whenever
+ * mileage_trips rows exist (hybrid gate computed by the dashboard layout),
+ * so turning this off never hides existing underlag.
+ */
+export function MileageToggle() {
+  const t = useTranslations('mileage')
+  const errorLocale = useLocale() as ErrorLocale
+  const { settings, updateSettings } = useSettings()
+  const { canWrite } = useCanWrite()
+  const { toast } = useToast()
+  const [isSaving, setIsSaving] = useState(false)
+
+  const enabled = settings?.mileage_enabled ?? false
+
+  async function handleChange(next: boolean) {
+    setIsSaving(true)
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mileage_enabled: next }),
+      })
+      const json = await res.json().catch(() => null)
+      if (!res.ok) {
+        toast({
+          title: t('settings_save_failed_title'),
+          description: getErrorMessage(json, { locale: errorLocale }),
+          variant: 'destructive',
+        })
+        return
+      }
+      updateSettings({ mileage_enabled: next })
+    } catch (err) {
+      // A rejected fetch (offline, DNS failure, aborted request) never reaches
+      // the !res.ok arm above, and the switch is controlled by the settings
+      // context, so it simply stays where it was: without this toast the click
+      // looks like a dead control rather than a save that did not happen.
+      toast({
+        title: t('settings_save_failed_title'),
+        description: getErrorMessage(err, { locale: errorLocale }),
+        variant: 'destructive',
+      })
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const locked = isSaving || !canWrite
+
+  return (
+    <SettingsRow label={t('settings_heading')} help={t('settings_toggle_help')}>
+      <Switch
+        id="mileage-enabled"
+        checked={enabled}
+        onCheckedChange={(next) => void handleChange(next)}
+        disabled={locked}
+      />
+      <label
+        htmlFor="mileage-enabled"
+        className={cn('text-sm', locked ? 'text-muted-foreground' : 'cursor-pointer')}
+      >
+        {t('settings_toggle_label')}
+      </label>
+      {enabled && (
+        <SettingsRowEnd>
+          <Link
+            href="/mileage"
+            className="inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ExternalLink className="h-3.5 w-3.5" />
+            {t('settings_open_page')}
+          </Link>
+        </SettingsRowEnd>
+      )}
+    </SettingsRow>
+  )
+}

components/settings/sections/BookkeepingSettingsContent.tsx

@@ -13,6 +13,7 @@ import { VoucherSeriesPerSourceTypeForm } from '@/components/settings/VoucherSer
 import { applyDefaultSeriesToMap } from '@/lib/bookkeeping/voucher-series-resolver'
 import { PeriodiseringAutoDetectToggle } from '@/components/settings/PeriodiseringAutoDetectToggle'
 import { DimensionsToggle } from '@/components/settings/DimensionsToggle'
+import { MileageToggle } from '@/components/settings/MileageToggle'
 import { AccountingFrameworkForm } from '@/components/settings/AccountingFrameworkForm'
 import {
   SettingsGroup,
@@ -174,6 +175,7 @@ export function BookkeepingSettingsContent() {
       <SettingsGroup label={t('group_automation')}>
         <PeriodiseringAutoDetectToggle />
         <DimensionsToggle />
+        <MileageToggle />
       </SettingsGroup>
 
       <SettingsGroup>