Added extension functionality

2026-02-21 11:39:45 +01:00
parent 2f83f232c6
commit 026497ed75
132 changed files with 3533 additions and 60 deletions
@@ -16,7 +16,12 @@
      "Bash(python3:*)",
      "Bash(git -C /Users/jakobwennberg/erp-base status --porcelain)",
      "Bash(__NEW_LINE_421a23f44da9923d__ echo '=== Checking which index exports are used ===' grep -r @/components/calendar /Users/jakobwennberg/erp-base/app --include=*.tsx --include=*.ts 2)",
-      "Bash(/dev/null __NEW_LINE_421a23f44da9923d__ echo -e '\\\\n=== Checking which calendar deadline components are directly imported ===' grep -rE \"DeadlineList|DeadlineCard|DeadlineForm|DeadlineFilters|PaymentSummaryCard|TaxTodoWidget|UpcomingDeadlinesWidget\" /Users/jakobwennberg/erp-base --include=*.tsx --include=*.ts)"
+      "Bash(/dev/null __NEW_LINE_421a23f44da9923d__ echo -e '\\\\n=== Checking which calendar deadline components are directly imported ===' grep -rE \"DeadlineList|DeadlineCard|DeadlineForm|DeadlineFilters|PaymentSummaryCard|TaxTodoWidget|UpcomingDeadlinesWidget\" /Users/jakobwennberg/erp-base --include=*.tsx --include=*.ts)",
+      "Bash(npm run build:*)",
+      "Bash(npx supabase:*)",
+      "Bash(curl:*)",
+      "Bash(npx tsc:*)",
+      "Bash(findstr:*)"
    ]
  }
 }
@@ -460,3 +460,6 @@ NEXT_PUBLIC_APP_URL               # App base URL
 NEXT_PUBLIC_VAPID_PUBLIC_KEY      # Web push public key
 VAPID_PRIVATE_KEY                 # Web push private key
 ```
+
+## Other
+We should never create a nul file
@@ -0,0 +1,39 @@
+import { createClient } from '@/lib/supabase/server'
+import { redirect, notFound } from 'next/navigation'
+import { getExtensionDefinition } from '@/lib/extensions/sectors'
+import ExtensionWorkspaceLoader from '@/components/extensions/ExtensionWorkspaceLoader'
+
+export default async function ExtensionWorkspacePage({
+  params,
+}: {
+  params: Promise<{ sector: string; slug: string }>
+}) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) redirect('/login')
+
+  const definition = getExtensionDefinition(sector, slug)
+  if (!definition) notFound()
+
+  // Check toggle
+  const { data: toggle } = await supabase
+    .from('extension_toggles')
+    .select('enabled')
+    .eq('user_id', user.id)
+    .eq('sector_slug', sector)
+    .eq('extension_slug', slug)
+    .single()
+
+  if (!toggle?.enabled) redirect('/extensions')
+
+  return (
+    <ExtensionWorkspaceLoader
+      sector={sector}
+      slug={slug}
+      definition={definition}
+      userId={user.id}
+    />
+  )
+}
@@ -0,0 +1,85 @@
+import { notFound } from 'next/navigation'
+import { getExtensionDefinition, getSector } from '@/lib/extensions/sectors'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import CategoryBadge from '@/components/extensions/CategoryBadge'
+import ExtensionToggleButton from '@/components/extensions/ExtensionToggleButton'
+import Link from 'next/link'
+
+export default async function ExtensionDetailPage({
+  params,
+}: {
+  params: Promise<{ sector: string; extension: string }>
+}) {
+  const { sector: sectorSlug, extension: extensionSlug } = await params
+
+  const definition = getExtensionDefinition(sectorSlug, extensionSlug)
+  if (!definition) notFound()
+
+  const sector = getSector(sectorSlug as any)
+  const Icon = resolveIcon(definition.icon)
+
+  const dataPatternLabels: Record<string, string> = {
+    core: 'Använder bokföringsdata',
+    manual: 'Manuell inmatning',
+    both: 'Bokföringsdata + manuell inmatning',
+  }
+
+  return (
+    <div>
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-1.5 text-sm text-muted-foreground mb-6">
+        <Link href="/extensions" className="hover:text-foreground transition-colors">
+          Tillägg
+        </Link>
+        <span>/</span>
+        <Link
+          href={`/extensions/${sectorSlug}`}
+          className="hover:text-foreground transition-colors"
+        >
+          {sector?.name ?? sectorSlug}
+        </Link>
+        <span>/</span>
+        <span className="text-foreground">{definition.name}</span>
+      </nav>
+
+      {/* Header with toggle */}
+      <div className="flex items-start justify-between gap-4 mb-8">
+        <div className="flex items-start gap-4">
+          <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 flex-shrink-0">
+            <Icon className="h-7 w-7 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-xl font-semibold tracking-tight">{definition.name}</h1>
+            <p className="text-sm text-muted-foreground mt-0.5">{definition.description}</p>
+            <div className="mt-2">
+              <CategoryBadge category={definition.category} />
+            </div>
+          </div>
+        </div>
+        <ExtensionToggleButton sectorSlug={sectorSlug} extensionSlug={extensionSlug} />
+      </div>
+
+      {/* Details */}
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-sm font-semibold mb-2">Beskrivning</h2>
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            {definition.longDescription}
+          </p>
+        </div>
+
+        <div>
+          <h2 className="text-sm font-semibold mb-2">Datakälla</h2>
+          <p className="text-sm text-muted-foreground">
+            {dataPatternLabels[definition.dataPattern]}
+          </p>
+          {definition.readsCoreTables && definition.readsCoreTables.length > 0 && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Läser från: {definition.readsCoreTables.join(', ')}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,49 @@
+import { notFound } from 'next/navigation'
+import { getSector } from '@/lib/extensions/sectors'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import ExtensionCard from '@/components/extensions/ExtensionCard'
+import Link from 'next/link'
+
+export default async function SectorExtensionsPage({
+  params,
+}: {
+  params: Promise<{ sector: string }>
+}) {
+  const { sector: sectorSlug } = await params
+  const sector = getSector(sectorSlug as any)
+
+  if (!sector) notFound()
+
+  const Icon = resolveIcon(sector.icon)
+
+  return (
+    <div>
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-1.5 text-sm text-muted-foreground mb-6">
+        <Link href="/extensions" className="hover:text-foreground transition-colors">
+          Tillägg
+        </Link>
+        <span>/</span>
+        <span className="text-foreground">{sector.name}</span>
+      </nav>
+
+      {/* Header */}
+      <div className="flex items-start gap-4 mb-8">
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 flex-shrink-0">
+          <Icon className="h-6 w-6 text-primary" />
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">{sector.name}</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">{sector.description}</p>
+        </div>
+      </div>
+
+      {/* Extensions grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {sector.extensions.map(ext => (
+          <ExtensionCard key={ext.slug} extension={ext} />
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,45 @@
+import { SECTORS } from '@/lib/extensions/sectors'
+import ExtensionCard from '@/components/extensions/ExtensionCard'
+import SectorCard from '@/components/extensions/SectorCard'
+
+export default function ExtensionsPage() {
+  const generalSector = SECTORS.find(s => s.slug === 'general')
+  const industrySectors = SECTORS.filter(s => s.slug !== 'general')
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-xl font-semibold tracking-tight">Tillägg</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Utöka ditt bokföringssystem med verktyg och branschspecifika funktioner.
+        </p>
+      </div>
+
+      {/* General extensions */}
+      {generalSector && (
+        <section className="mb-10">
+          <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4">
+            {generalSector.name}
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {generalSector.extensions.map(ext => (
+              <ExtensionCard key={ext.slug} extension={ext} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Industry sectors */}
+      <section>
+        <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4">
+          Branschverktyg
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+          {industrySectors.map(sector => (
+            <SectorCard key={sector.slug} sector={sector} />
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}
@@ -29,6 +29,12 @@ export default async function DashboardLayout({

  const entityType = (settings.entity_type as EntityType) || 'enskild_firma'

+  const { data: enabledToggles } = await supabase
+    .from('extension_toggles')
+    .select('sector_slug, extension_slug')
+    .eq('user_id', user.id)
+    .eq('enabled', true)
+
  return (
    <div className="min-h-screen bg-background">
      {/* Skip to content link for keyboard/screen reader users */}
@@ -41,6 +47,7 @@ export default async function DashboardLayout({
      <DashboardNav
        companyName={settings.company_name || 'Min verksamhet'}
        entityType={entityType}
+        enabledExtensions={enabledToggles || []}
      />
      <main id="main-content" className="pb-20 md:pb-0 md:pl-[232px]" role="main">
        <div className="max-w-5xl mx-auto px-5 py-8 md:px-8 md:py-10">
@@ -1 +1 @@
-export { default } from '@/extensions/receipt-ocr/pages/ReceiptsPage'
+export { default } from '@/extensions/general/receipt-ocr/pages/ReceiptsPage'
@@ -1 +1 @@
-export { default } from '@/extensions/receipt-ocr/pages/scan/ScanReceiptPage'
+export { default } from '@/extensions/general/receipt-ocr/pages/scan/ScanReceiptPage'
@@ -24,7 +24,7 @@ import {
  Calendar,
 } from 'lucide-react'
 import type { CompanySettings, BankConnection } from '@/types'
-import { NotificationSettings } from '@/extensions/push-notifications/NotificationSettings'
+import { NotificationSettings } from '@/extensions/general/push-notifications/NotificationSettings'
 import { CalendarFeedSettings } from '@/components/settings/CalendarFeedSettings'

 export default function SettingsPage() {
@@ -1,10 +1,9 @@
 'use client'

-import { useState, useEffect, useMemo, Suspense } from 'react'
+import { useState, useEffect, Suspense } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { createClient } from '@/lib/supabase/client'
 import { Progress } from '@/components/ui/progress'
-import { Button } from '@/components/ui/button'
 import { useToast } from '@/components/ui/use-toast'
 import { Loader2 } from 'lucide-react'
 import type { CompanySettings, EntityType, MomsPeriod } from '@/types'
@@ -13,13 +12,18 @@ import Step1EntityType from '@/components/onboarding/Step1EntityType'
 import Step2CompanyDetails from '@/components/onboarding/Step2CompanyDetails'
 import Step3TaxRegistration from '@/components/onboarding/Step3TaxRegistration'
 import Step4PreliminaryTax from '@/components/onboarding/Step4PreliminaryTax'
-import Step6ConnectBank from '@/components/onboarding/Step6ConnectBank'
+import Step5ConnectBank from '@/components/onboarding/Step6ConnectBank'
+import Step6SectorSelection from '@/components/onboarding/Step2SectorSelection'
+import Step7ExtensionSuggestions from '@/components/onboarding/Step3ExtensionSuggestions'
+
 const STEP_TITLES = [
  'Verksamhetsform',
  'Företagsuppgifter',
  'Skatteregistrering',
  'F-skatt',
  'Anslut bank',
+  'Bransch',
+  'Tillägg',
 ]

 export default function OnboardingPage() {
@@ -40,8 +44,9 @@ function OnboardingPageContent() {
  const [isSaving, setIsSaving] = useState(false)
  const [currentStep, setCurrentStep] = useState(1)
  const [settings, setSettings] = useState<Partial<CompanySettings>>({})
+  const [sectorSlug, setSectorSlug] = useState<string | null>(null)

-  const totalSteps = 5
+  const totalSteps = 7
  const stepTitles = STEP_TITLES

  // Load existing settings on mount
@@ -63,6 +68,9 @@ function OnboardingPageContent() {
      if (data) {
        setSettings(data)
        setCurrentStep(data.onboarding_step || 1)
+        if ((data as Record<string, unknown>).sector_slug) {
+          setSectorSlug((data as Record<string, unknown>).sector_slug as string)
+        }
      }

      setIsLoading(false)
@@ -74,13 +82,13 @@ function OnboardingPageContent() {
  // Handle bank_connected callback from PSD2 flow
  useEffect(() => {
    if (searchParams.get('bank_connected') === 'true') {
-      saveSettings({ onboarding_complete: true }).then((success) => {
+      toast({
+        title: 'Bank ansluten!',
+        description: 'Din bank har kopplats.',
+      })
+      saveSettings({}, 6).then((success) => {
        if (success) {
-          toast({
-            title: 'Bank ansluten!',
-            description: 'Din bank är kopplad och profilen är redo.',
-          })
-          router.push('/')
+          setCurrentStep(6)
        }
      })
    }
@@ -205,18 +213,6 @@ function OnboardingPageContent() {
    }
  }

-  const handleComplete = async () => {
-    const success = await saveSettings({ onboarding_complete: true })
-
-    if (success) {
-      toast({
-        title: 'Välkommen!',
-        description: 'Din profil är nu redo.',
-      })
-      router.push('/')
-    }
-  }
-
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
@@ -227,6 +223,41 @@ function OnboardingPageContent() {

  const progressPercent = ((currentStep - 1) / (totalSteps - 1)) * 100

+  const handleSectorNext = async (data: { sector_slug: string | null }) => {
+    setSectorSlug(data.sector_slug)
+    const nextStep = currentStep + 1
+    const settingsUpdate: Partial<CompanySettings> = {}
+    if (data.sector_slug) {
+      ;(settingsUpdate as Record<string, unknown>).sector_slug = data.sector_slug
+    }
+    const success = await saveSettings(settingsUpdate, nextStep)
+    if (success) {
+      setCurrentStep(nextStep)
+    }
+  }
+
+  const handleExtensionsNext = async (data: { enabled_extensions: { sector_slug: string; extension_slug: string }[] }) => {
+    // Insert extension toggles if any were selected
+    if (data.enabled_extensions.length > 0) {
+      try {
+        const { data: { user } } = await supabase.auth.getUser()
+        if (user) {
+          const rows = data.enabled_extensions.map(ext => ({
+            user_id: user.id,
+            sector_slug: ext.sector_slug,
+            extension_slug: ext.extension_slug,
+            enabled: true,
+          }))
+          await supabase.from('extension_toggles').upsert(rows, {
+            onConflict: 'user_id,sector_slug,extension_slug',
+          })
+        }
+      } catch (err) {
+        console.error('Failed to save extension toggles:', err)
+      }
+    }
+  }
+
  const renderSteps = () => (
    <>
      {currentStep === 1 && (
@@ -281,7 +312,7 @@ function OnboardingPageContent() {
      )}

      {currentStep === 5 && (
-        <Step6ConnectBank
+        <Step5ConnectBank
          initialData={{
            bank_name: settings.bank_name ?? undefined,
            clearing_number: settings.clearing_number ?? undefined,
@@ -291,10 +322,30 @@ function OnboardingPageContent() {
          }}
          onComplete={async (data) => {
            if (data) {
-              await saveSettings({ ...data, onboarding_complete: true })
-            } else {
-              await saveSettings({ onboarding_complete: true })
+              await saveSettings(data, 6)
            }
+            setCurrentStep(6)
+          }}
+          onBack={handleBack}
+          onSkip={() => setCurrentStep(6)}
+          isSaving={isSaving}
+        />
+      )}
+
+      {currentStep === 6 && (
+        <Step6SectorSelection
+          onNext={handleSectorNext}
+          onBack={handleBack}
+          isSaving={isSaving}
+        />
+      )}
+
+      {currentStep === 7 && (
+        <Step7ExtensionSuggestions
+          sectorSlug={sectorSlug}
+          onNext={async (data) => {
+            await handleExtensionsNext(data)
+            await saveSettings({ onboarding_complete: true }, totalSteps)
            toast({
              title: 'Välkommen!',
              description: 'Din profil är nu redo.',
@@ -302,7 +353,6 @@ function OnboardingPageContent() {
            router.push('/')
          }}
          onBack={handleBack}
-          onSkip={handleComplete}
          isSaving={isSaving}
        />
      )}
@@ -0,0 +1,115 @@
+import { createClient } from '@/lib/supabase/server'
+import { NextResponse } from 'next/server'
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ sector: string; slug: string }> }
+) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const extensionId = `${sector}/${slug}`
+
+  const { searchParams } = new URL(request.url)
+  const key = searchParams.get('key')
+
+  let query = supabase
+    .from('extension_data')
+    .select('*')
+    .eq('user_id', user.id)
+    .eq('extension_id', extensionId)
+
+  if (key) {
+    query = query.eq('key', key)
+  }
+
+  const { data, error } = await query
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+
+  return NextResponse.json({ data })
+}
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ sector: string; slug: string }> }
+) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const body = await request.json()
+  const { key, value } = body
+
+  if (!key) {
+    return NextResponse.json({ error: 'key is required' }, { status: 400 })
+  }
+
+  const extensionId = `${sector}/${slug}`
+
+  const { data, error } = await supabase
+    .from('extension_data')
+    .upsert(
+      {
+        user_id: user.id,
+        extension_id: extensionId,
+        key,
+        value,
+      },
+      { onConflict: 'user_id,extension_id,key' }
+    )
+    .select()
+    .single()
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+
+  return NextResponse.json({ data })
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ sector: string; slug: string }> }
+) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { searchParams } = new URL(request.url)
+  const key = searchParams.get('key')
+
+  if (!key) {
+    return NextResponse.json({ error: 'key query parameter is required' }, { status: 400 })
+  }
+
+  const extensionId = `${sector}/${slug}`
+
+  const { error } = await supabase
+    .from('extension_data')
+    .delete()
+    .eq('user_id', user.id)
+    .eq('extension_id', extensionId)
+    .eq('key', key)
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+
+  return NextResponse.json({ success: true })
+}
@@ -0,0 +1,74 @@
+import { createClient } from '@/lib/supabase/server'
+import { NextResponse } from 'next/server'
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ sector: string; slug: string }> }
+) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const extensionId = `${sector}/${slug}`
+
+  const { data } = await supabase
+    .from('extension_data')
+    .select('value')
+    .eq('user_id', user.id)
+    .eq('extension_id', extensionId)
+    .eq('key', 'settings')
+    .single()
+
+  return NextResponse.json({ data: data?.value ?? {} })
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ sector: string; slug: string }> }
+) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const body = await request.json()
+  const extensionId = `${sector}/${slug}`
+
+  // Get existing settings and merge
+  const { data: existing } = await supabase
+    .from('extension_data')
+    .select('value')
+    .eq('user_id', user.id)
+    .eq('extension_id', extensionId)
+    .eq('key', 'settings')
+    .single()
+
+  const mergedSettings = { ...(existing?.value ?? {}), ...body }
+
+  const { data, error } = await supabase
+    .from('extension_data')
+    .upsert(
+      {
+        user_id: user.id,
+        extension_id: extensionId,
+        key: 'settings',
+        value: mergedSettings,
+      },
+      { onConflict: 'user_id,extension_id,key' }
+    )
+    .select()
+    .single()
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+
+  return NextResponse.json({ data: data.value })
+}
@@ -1,6 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { getSettings, saveSettings } from '@/extensions/ai-categorization'
+import { getSettings, saveSettings } from '@/extensions/general/ai-categorization'

 /**
 * GET /api/extensions/ai-categorization/settings
@@ -1,7 +1,7 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { categorizeTransactions } from '@/extensions/ai-categorization'
-import type { CategorizationSuggestion } from '@/extensions/ai-categorization/categorizer'
+import { categorizeTransactions } from '@/extensions/general/ai-categorization'
+import type { CategorizationSuggestion } from '@/extensions/general/ai-categorization/categorizer'

 /**
 * GET /api/extensions/ai-categorization/suggestions?transaction_ids=id1,id2,...
@@ -1,7 +1,7 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { generateChatResponse } from '@/extensions/ai-chat/chatbot/chain'
-import { CHATBOT_CONFIG } from '@/extensions/ai-chat/chatbot/config'
+import { generateChatResponse } from '@/extensions/general/ai-chat/chatbot/chain'
+import { CHATBOT_CONFIG } from '@/extensions/general/ai-chat/chatbot/config'
 import type { ChatMessage, ChatRequest } from '@/types/chat'

 // Simple in-memory rate limiting (per user)
@@ -1,6 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
-import { streamChatResponse } from '@/extensions/ai-chat/chatbot/chain'
-import { CHATBOT_CONFIG } from '@/extensions/ai-chat/chatbot/config'
+import { streamChatResponse } from '@/extensions/general/ai-chat/chatbot/chain'
+import { CHATBOT_CONFIG } from '@/extensions/general/ai-chat/chatbot/config'
 import type { ChatMessage, ChatRequest, SourceReference } from '@/types/chat'

 // Simple in-memory rate limiting (per user)
@@ -1,7 +1,7 @@
 import { createServiceClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { createSession, getAccountBalance, type AccountInfo } from '@/extensions/enable-banking/lib/api-client'
-import type { StoredAccount } from '@/extensions/enable-banking/types'
+import { createSession, getAccountBalance, type AccountInfo } from '@/extensions/general/enable-banking/lib/api-client'
+import type { StoredAccount } from '@/extensions/general/enable-banking/types'

 /**
 * GET /api/extensions/enable-banking/callback
@@ -1,8 +1,8 @@
 import { createClient } from '@supabase/supabase-js'
 import { NextResponse } from 'next/server'
-import { syncAccountTransactions } from '@/extensions/enable-banking/lib/sync'
-import { isConsentExpiringSoon, getDaysUntilExpiry } from '@/extensions/enable-banking/lib/api-client'
-import type { StoredAccount } from '@/extensions/enable-banking/types'
+import { syncAccountTransactions } from '@/extensions/general/enable-banking/lib/sync'
+import { isConsentExpiringSoon, getDaysUntilExpiry } from '@/extensions/general/enable-banking/lib/api-client'
+import type { StoredAccount } from '@/extensions/general/enable-banking/types'

 /**
 * GET /api/extensions/enable-banking/sync/cron
@@ -4,7 +4,7 @@ import { loadExtensions } from '@/lib/extensions/loader'
 import {
  sendTaxDeadlineNotifications,
  sendInvoiceNotifications,
-} from '@/extensions/push-notifications/notification-scheduler'
+} from '@/extensions/general/push-notifications/notification-scheduler'

 /**
 * GET /api/extensions/push-notifications/cron
@@ -1,6 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { getSettings, saveSettings } from '@/extensions/push-notifications'
+import { getSettings, saveSettings } from '@/extensions/general/push-notifications'

 /**
 * GET /api/extensions/push-notifications/settings
@@ -1,6 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { getVapidPublicKey } from '@/extensions/push-notifications/notification-sender'
+import { getVapidPublicKey } from '@/extensions/general/push-notifications/notification-sender'

 /**
 * GET /api/extensions/push-notifications/subscribe
@@ -1,6 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { findTransactionMatches } from '@/extensions/receipt-ocr/lib/receipt-matcher'
+import { findTransactionMatches } from '@/extensions/general/receipt-ocr/lib/receipt-matcher'
 import { eventBus } from '@/lib/events/bus'
 import { ensureInitialized } from '@/lib/init'
 import type { Receipt, Transaction } from '@/types'
@@ -1,6 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { getSettings, saveSettings } from '@/extensions/receipt-ocr'
+import { getSettings, saveSettings } from '@/extensions/general/receipt-ocr'

 /**
 * GET /api/extensions/receipt-ocr/settings
@@ -1,7 +1,7 @@
 import { createClient } from '@/lib/supabase/server'
 import { NextResponse } from 'next/server'
-import { analyzeReceipt } from '@/extensions/receipt-ocr/lib/receipt-analyzer'
-import { processLineItems } from '@/extensions/receipt-ocr/lib/receipt-categorizer'
+import { analyzeReceipt } from '@/extensions/general/receipt-ocr/lib/receipt-analyzer'
+import { processLineItems } from '@/extensions/general/receipt-ocr/lib/receipt-categorizer'
 import { eventBus } from '@/lib/events/bus'
 import { ensureInitialized } from '@/lib/init'
 import { uploadDocument } from '@/lib/core/documents/document-service'
@@ -0,0 +1,51 @@
+import { createClient } from '@/lib/supabase/server'
+import { NextResponse } from 'next/server'
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ sector: string; slug: string }> }
+) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { data } = await supabase
+    .from('extension_toggles')
+    .select('*')
+    .eq('user_id', user.id)
+    .eq('sector_slug', sector)
+    .eq('extension_slug', slug)
+    .single()
+
+  return NextResponse.json({ data: data ?? { enabled: false } })
+}
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ sector: string; slug: string }> }
+) {
+  const { sector, slug } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { error } = await supabase
+    .from('extension_toggles')
+    .delete()
+    .eq('user_id', user.id)
+    .eq('sector_slug', sector)
+    .eq('extension_slug', slug)
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+
+  return NextResponse.json({ success: true })
+}
@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import {
+  createMockRequest,
+  parseJsonResponse,
+  createQueuedMockSupabase,
+  makeExtensionToggle,
+} from '@/tests/helpers'
+
+const { supabase: mockSupabase, enqueue, reset } = createQueuedMockSupabase()
+vi.mock('@/lib/supabase/server', () => ({
+  createClient: () => Promise.resolve(mockSupabase),
+}))
+
+import { GET, POST } from '../route'
+
+describe('GET /api/extensions/toggles', () => {
+  const mockUser = { id: 'user-1', email: 'test@test.se' }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    reset()
+    mockSupabase.auth.getUser.mockResolvedValue({ data: { user: mockUser } })
+  })
+
+  it('returns 401 when not authenticated', async () => {
+    mockSupabase.auth.getUser.mockResolvedValue({ data: { user: null } })
+
+    const response = await GET()
+    const { status, body } = await parseJsonResponse(response)
+
+    expect(status).toBe(401)
+    expect(body).toEqual({ error: 'Unauthorized' })
+  })
+
+  it('returns enabled toggles for user', async () => {
+    const toggles = [
+      makeExtensionToggle({ extension_slug: 'receipt-ocr' }),
+      makeExtensionToggle({ extension_slug: 'ai-chat' }),
+    ]
+    enqueue({ data: toggles, error: null })
+
+    const response = await GET()
+    const { status, body } = await parseJsonResponse<{ data: unknown[] }>(response)
+
+    expect(status).toBe(200)
+    expect(body.data).toEqual(toggles)
+    expect(mockSupabase.from).toHaveBeenCalledWith('extension_toggles')
+  })
+})
+
+describe('POST /api/extensions/toggles', () => {
+  const mockUser = { id: 'user-1', email: 'test@test.se' }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    reset()
+    mockSupabase.auth.getUser.mockResolvedValue({ data: { user: mockUser } })
+  })
+
+  it('returns 401 when not authenticated', async () => {
+    mockSupabase.auth.getUser.mockResolvedValue({ data: { user: null } })
+
+    const request = createMockRequest('/api/extensions/toggles', {
+      method: 'POST',
+      body: { sector_slug: 'general', extension_slug: 'receipt-ocr', enabled: true },
+    })
+    const response = await POST(request)
+    const { status, body } = await parseJsonResponse(response)
+
+    expect(status).toBe(401)
+    expect(body).toEqual({ error: 'Unauthorized' })
+  })
+
+  it('returns 400 when missing fields', async () => {
+    const request = createMockRequest('/api/extensions/toggles', {
+      method: 'POST',
+      body: { sector_slug: 'general' },
+    })
+    const response = await POST(request)
+    const { status, body } = await parseJsonResponse<{ error: string }>(response)
+
+    expect(status).toBe(400)
+    expect(body.error).toBe('sector_slug, extension_slug, and enabled are required')
+  })
+
+  it('upserts toggle and returns data', async () => {
+    const toggle = makeExtensionToggle({
+      sector_slug: 'general',
+      extension_slug: 'receipt-ocr',
+      enabled: true,
+    })
+    enqueue({ data: toggle, error: null })
+
+    const request = createMockRequest('/api/extensions/toggles', {
+      method: 'POST',
+      body: { sector_slug: 'general', extension_slug: 'receipt-ocr', enabled: true },
+    })
+    const response = await POST(request)
+    const { status, body } = await parseJsonResponse<{ data: unknown }>(response)
+
+    expect(status).toBe(200)
+    expect(body.data).toEqual(toggle)
+    expect(mockSupabase.from).toHaveBeenCalledWith('extension_toggles')
+  })
+})
@@ -0,0 +1,62 @@
+import { createClient } from '@/lib/supabase/server'
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { data, error } = await supabase
+    .from('extension_toggles')
+    .select('*')
+    .eq('user_id', user.id)
+    .eq('enabled', true)
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+
+  return NextResponse.json({ data })
+}
+
+export async function POST(request: Request) {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const body = await request.json()
+  const { sector_slug, extension_slug, enabled } = body
+
+  if (!sector_slug || !extension_slug || typeof enabled !== 'boolean') {
+    return NextResponse.json(
+      { error: 'sector_slug, extension_slug, and enabled are required' },
+      { status: 400 }
+    )
+  }
+
+  const { data, error } = await supabase
+    .from('extension_toggles')
+    .upsert(
+      {
+        user_id: user.id,
+        sector_slug,
+        extension_slug,
+        enabled,
+      },
+      { onConflict: 'user_id,sector_slug,extension_slug' }
+    )
+    .select()
+    .single()
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+
+  return NextResponse.json({ data })
+}
@@ -1,6 +1,6 @@
 'use client'

-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { createClient } from '@/lib/supabase/client'
@@ -24,11 +24,14 @@ import {
  Building2,
  FileInput,
 } from 'lucide-react'
+import { getExtensionDefinition } from '@/lib/extensions/sectors'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
 import type { EntityType } from '@/types'

 interface DashboardNavProps {
  companyName: string
  entityType: EntityType
+  enabledExtensions?: { sector_slug: string; extension_slug: string }[]
 }

 interface NavItem {
@@ -61,12 +64,31 @@ const groupLabels: Record<string, string> = {
  övrigt: 'Övrigt',
 }

-export default function DashboardNav({ companyName, entityType }: DashboardNavProps) {
+export default function DashboardNav({ companyName, entityType, enabledExtensions }: DashboardNavProps) {
  const pathname = usePathname()
  const router = useRouter()
  const supabase = createClient()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [isOvrigtExpanded, setIsOvrigtExpanded] = useState(false)
+  const [isTillaggExpanded, setIsTillaggExpanded] = useState(false)
+  const [liveExtensions, setLiveExtensions] = useState(enabledExtensions ?? [])
+
+  const fetchExtensions = useCallback(async () => {
+    try {
+      const res = await fetch('/api/extensions/toggles')
+      if (res.ok) {
+        const { data } = await res.json()
+        if (data) setLiveExtensions(data)
+      }
+    } catch {
+      // keep current state on error
+    }
+  }, [])
+
+  // Refresh extensions when dropdown is opened or mobile menu is opened
+  useEffect(() => {
+    if (isTillaggExpanded || isMobileMenuOpen) fetchExtensions()
+  }, [isTillaggExpanded, isMobileMenuOpen, fetchExtensions])

  const handleLogout = async () => {
    await supabase.auth.signOut()
@@ -174,6 +196,53 @@ export default function DashboardNav({ companyName, entityType }: DashboardNavPr
                </div>
              </div>

+              {/* Tillägg - collapsible */}
+              <div className="mb-4">
+                <button
+                  onClick={() => setIsTillaggExpanded(!isTillaggExpanded)}
+                  className="w-full flex items-center justify-between px-3 mb-1.5 text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-[0.08em] hover:text-muted-foreground transition-colors"
+                >
+                  <span>Tillägg</span>
+                  <ChevronDown className={cn(
+                    "h-3 w-3 transition-transform duration-200",
+                    isTillaggExpanded && "rotate-180"
+                  )} />
+                </button>
+                {isTillaggExpanded && (
+                  <div className="space-y-px animate-fade-in">
+                    {liveExtensions.length > 0 ? liveExtensions.map((toggle) => {
+                      const def = getExtensionDefinition(toggle.sector_slug, toggle.extension_slug)
+                      if (!def) return null
+                      const ExtIcon = resolveIcon(def.icon)
+                      const href = `/e/${toggle.sector_slug}/${toggle.extension_slug}`
+                      const active = isActive(href)
+                      return (
+                        <Link
+                          key={`${toggle.sector_slug}/${toggle.extension_slug}`}
+                          href={href}
+                          className={cn(
+                            'group flex items-center px-3 py-[7px] text-[13px] transition-colors duration-150 rounded-lg',
+                            active
+                              ? 'bg-primary/8 text-foreground font-medium'
+                              : 'text-muted-foreground hover:text-foreground hover:bg-muted/40'
+                          )}
+                        >
+                          <ExtIcon className={cn(
+                            "mr-2.5 h-[15px] w-[15px] flex-shrink-0",
+                            active ? "text-primary" : "text-muted-foreground/70 group-hover:text-muted-foreground"
+                          )} />
+                          {def.name}
+                        </Link>
+                      )
+                    }) : (
+                      <p className="px-3 py-2 text-[12px] text-muted-foreground/60">
+                        Inga tillägg aktiverade
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+
              {/* Övrigt group - collapsible */}
              <div className="mb-4">
                <button
@@ -357,6 +426,40 @@ export default function DashboardNav({ companyName, entityType }: DashboardNavPr
                })}
              </div>

+              {/* Tillägg */}
+              <div className="mb-4">
+                <p className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Tillägg
+                </p>
+                {liveExtensions.length > 0 ? liveExtensions.map((toggle) => {
+                  const def = getExtensionDefinition(toggle.sector_slug, toggle.extension_slug)
+                  if (!def) return null
+                  const ExtIcon = resolveIcon(def.icon)
+                  const href = `/e/${toggle.sector_slug}/${toggle.extension_slug}`
+                  const active = isActive(href)
+                  return (
+                    <Link
+                      key={`${toggle.sector_slug}/${toggle.extension_slug}`}
+                      href={href}
+                      onClick={closeMobileMenu}
+                      className={cn(
+                        'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors',
+                        active
+                          ? 'bg-primary/10 text-primary font-medium'
+                          : 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
+                      )}
+                    >
+                      <ExtIcon className="h-5 w-5" />
+                      {def.name}
+                    </Link>
+                  )
+                }) : (
+                  <p className="px-3 py-2 text-xs text-muted-foreground/60">
+                    Inga tillägg aktiverade
+                  </p>
+                )}
+              </div>
+
              {/* Other section */}
              <div className="mb-4">
                <p className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
@@ -0,0 +1,21 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import type { ExtensionCategory } from '@/lib/extensions/types'
+
+const CATEGORY_CONFIG: Record<ExtensionCategory, { label: string; className: string }> = {
+  accounting: { label: 'Bokföring & Skatt', className: 'bg-rose-100 text-rose-700 border-rose-200' },
+  reports: { label: 'Branschrapporter', className: 'bg-blue-100 text-blue-700 border-blue-200' },
+  import: { label: 'Smart Import', className: 'bg-emerald-100 text-emerald-700 border-emerald-200' },
+  operations: { label: 'Verktyg', className: 'bg-slate-100 text-slate-700 border-slate-200' },
+}
+
+export default function CategoryBadge({ category }: { category: ExtensionCategory }) {
+  const config = CATEGORY_CONFIG[category]
+  return (
+    <Badge variant="outline" className={cn('text-[10px] font-medium', config.className)}>
+      {config.label}
+    </Badge>
+  )
+}
@@ -0,0 +1,44 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/card'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import type { ExtensionDefinition } from '@/lib/extensions/types'
+import CategoryBadge from './CategoryBadge'
+import ExtensionToggleButton from './ExtensionToggleButton'
+import Link from 'next/link'
+
+export default function ExtensionCard({ extension }: { extension: ExtensionDefinition }) {
+  const Icon = resolveIcon(extension.icon)
+
+  return (
+    <Card className="group relative">
+      <CardContent className="pt-6">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-start gap-3 min-w-0">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
+              <Icon className="h-5 w-5 text-primary" />
+            </div>
+            <div className="min-w-0">
+              <Link
+                href={`/extensions/${extension.sector}/${extension.slug}`}
+                className="text-sm font-medium hover:underline"
+              >
+                {extension.name}
+              </Link>
+              <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                {extension.description}
+              </p>
+              <div className="mt-2">
+                <CategoryBadge category={extension.category} />
+              </div>
+            </div>
+          </div>
+          <ExtensionToggleButton
+            sectorSlug={extension.sector}
+            extensionSlug={extension.slug}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
@@ -0,0 +1,23 @@
+'use client'
+
+import { Switch } from '@/components/ui/switch'
+import { useExtensionToggle } from '@/lib/extensions/hooks'
+
+export default function ExtensionToggleButton({
+  sectorSlug,
+  extensionSlug,
+}: {
+  sectorSlug: string
+  extensionSlug: string
+}) {
+  const { enabled, isLoading, toggle } = useExtensionToggle(sectorSlug, extensionSlug)
+
+  return (
+    <Switch
+      checked={enabled}
+      onCheckedChange={toggle}
+      disabled={isLoading}
+      aria-label={enabled ? 'Inaktivera tillägg' : 'Aktivera tillägg'}
+    />
+  )
+}
@@ -0,0 +1,33 @@
+'use client'
+
+import type { ExtensionDefinition } from '@/lib/extensions/types'
+import { getWorkspaceComponent } from '@/lib/extensions/workspace-registry'
+import ExtensionWorkspaceShell from './ExtensionWorkspaceShell'
+import EmptyExtensionState from './shared/EmptyExtensionState'
+
+export default function ExtensionWorkspaceLoader({
+  sector,
+  slug,
+  definition,
+  userId,
+}: {
+  sector: string
+  slug: string
+  definition: ExtensionDefinition
+  userId: string
+}) {
+  const WorkspaceComponent = getWorkspaceComponent(sector, slug)
+
+  return (
+    <ExtensionWorkspaceShell definition={definition}>
+      {WorkspaceComponent ? (
+        <WorkspaceComponent userId={userId} />
+      ) : (
+        <EmptyExtensionState
+          title="Kommer snart"
+          description={`${definition.name} \u00e4r under utveckling och kommer snart att vara tillg\u00e4ngligt.`}
+        />
+      )}
+    </ExtensionWorkspaceShell>
+  )
+}
@@ -0,0 +1,51 @@
+'use client'
+
+import type { ExtensionDefinition } from '@/lib/extensions/types'
+import { getSector } from '@/lib/extensions/sectors'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import Link from 'next/link'
+
+export default function ExtensionWorkspaceShell({
+  definition,
+  children,
+}: {
+  definition: ExtensionDefinition
+  children: React.ReactNode
+}) {
+  const Icon = resolveIcon(definition.icon)
+  const sector = getSector(definition.sector)
+
+  return (
+    <div>
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-1.5 text-sm text-muted-foreground mb-6">
+        <Link href="/extensions" className="hover:text-foreground transition-colors">
+          Till\u00e4gg
+        </Link>
+        <span>/</span>
+        <Link
+          href={`/extensions/${definition.sector}`}
+          className="hover:text-foreground transition-colors"
+        >
+          {sector?.name ?? definition.sector}
+        </Link>
+        <span>/</span>
+        <span className="text-foreground">{definition.name}</span>
+      </nav>
+
+      {/* Header */}
+      <div className="flex items-start gap-4 mb-8">
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 flex-shrink-0">
+          <Icon className="h-6 w-6 text-primary" />
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">{definition.name}</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">{definition.description}</p>
+        </div>
+      </div>
+
+      {/* Extension content */}
+      {children}
+    </div>
+  )
+}
@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import { Card, CardContent } from '@/components/ui/card'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import type { Sector } from '@/lib/extensions/types'
+
+export default function SectorCard({ sector }: { sector: Sector }) {
+  const Icon = resolveIcon(sector.icon)
+
+  return (
+    <Link href={`/extensions/${sector.slug}`}>
+      <Card className="group hover:border-primary/30 transition-colors cursor-pointer">
+        <CardContent className="pt-6">
+          <div className="flex items-start gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
+              <Icon className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <h3 className="text-sm font-medium group-hover:text-primary transition-colors">
+                {sector.name}
+              </h3>
+              <p className="text-xs text-muted-foreground mt-0.5">{sector.description}</p>
+              <p className="text-xs text-muted-foreground mt-1.5">
+                {sector.extensions.length} tillägg
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { FolderKanban } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function ProjectCostWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Projektkostnadsuppföljning"
+      description="Uppföljning av kostnader per byggprojekt kommer snart. Du kommer kunna koppla fakturor och transaktioner till specifika projekt."
+      icon={<FolderKanban className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { Calculator } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function RotCalculatorWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="ROT-avdragsberäkning"
+      description="Beräkning av ROT-avdrag för hantverkstjänster kommer snart. Du kommer kunna beräkna kundens avdrag och generera underlag till Skatteverket."
+      icon={<Calculator className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { BarChart3 } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function MultichannelRevenueWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Flerkanalintäkter"
+      description="Uppföljning av intäkter per försäljningskanal kommer snart. Du kommer kunna jämföra prestanda mellan webshop, marknadsplatser och fysisk butik."
+      icon={<BarChart3 className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { ShoppingBag } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function ShopifyImportWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Shopify-import"
+      description="Import av ordrar och transaktioner från Shopify kommer snart. Du kommer kunna synkronisera din Shopify-butik automatiskt."
+      icon={<ShoppingBag className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,15 @@
+'use client'
+
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+import { Sparkles } from 'lucide-react'
+
+export default function AiCategorizationWorkspace({ userId }: WorkspaceComponentProps) {
+  return (
+    <EmptyExtensionState
+      title="AI-kategorisering"
+      description="AI-kategorisering k\u00f6rs automatiskt n\u00e4r nya transaktioner synkas. G\u00e5 till Transaktioner f\u00f6r att se f\u00f6rslag."
+      icon={<Sparkles className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,15 @@
+'use client'
+
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+import { MessageSquare } from 'lucide-react'
+
+export default function AiChatWorkspace({ userId }: WorkspaceComponentProps) {
+  return (
+    <EmptyExtensionState
+      title="AI-assistent"
+      description="Anv\u00e4nd chattwidgeten i nedre h\u00f6gra h\u00f6rnet f\u00f6r att st\u00e4lla fr\u00e5gor om bokf\u00f6ring och skatt."
+      icon={<MessageSquare className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,15 @@
+'use client'
+
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+import { Landmark } from 'lucide-react'
+
+export default function EnableBankingWorkspace({ userId }: WorkspaceComponentProps) {
+  return (
+    <EmptyExtensionState
+      title="Bankintegration (PSD2)"
+      description="Koppla ditt bankkonto under Inst\u00e4llningar f\u00f6r att synka transaktioner automatiskt."
+      icon={<Landmark className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,15 @@
+'use client'
+
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+import { Bell } from 'lucide-react'
+
+export default function PushNotificationsWorkspace({ userId }: WorkspaceComponentProps) {
+  return (
+    <EmptyExtensionState
+      title="Push-notiser"
+      description="Konfigurera push-notiser under Inst\u00e4llningar. Notiser skickas automatiskt vid viktiga h\u00e4ndelser."
+      icon={<Bell className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,15 @@
+'use client'
+
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+import { Camera } from 'lucide-react'
+
+export default function ReceiptOcrWorkspace({ userId }: WorkspaceComponentProps) {
+  return (
+    <EmptyExtensionState
+      title="Kvittoscanning"
+      description="Ladda upp och skanna kvitton direkt fr\u00e5n till\u00e4ggets arbetsyta. G\u00e5 till Kvitton i sidomenyn f\u00f6r att komma ig\u00e5ng."
+      icon={<Camera className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { DoorOpen } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function OccupancyWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Beläggningsgrad"
+      description="Uppföljning av rumsbeläggning kommer snart. Du kommer kunna registrera beläggning och se trender över tid."
+      icon={<DoorOpen className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { BedDouble } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function RevparWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="RevPAR-beräkning"
+      description="Beräkning av intäkt per tillgängligt rum (RevPAR) kommer snart. Du kommer kunna följa upp RevPAR per dag, vecka och månad."
+      icon={<BedDouble className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,109 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import KPICard from '@/components/extensions/shared/KPICard'
+import DateRangeFilter from '@/components/extensions/shared/DateRangeFilter'
+import DataEntryForm from '@/components/extensions/shared/DataEntryForm'
+import ExtensionLoadingSkeleton from '@/components/extensions/shared/ExtensionLoadingSkeleton'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+export default function EarningsPerLiterWorkspace({ userId }: WorkspaceComponentProps) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [earningsPerLiter, setEarningsPerLiter] = useState<number>(0)
+  const [totalLiters, setTotalLiters] = useState<number>(0)
+  const [totalRevenue, setTotalRevenue] = useState<number>(0)
+
+  // Data entry state
+  const [liters, setLiters] = useState('')
+  const [entryDate, setEntryDate] = useState(new Date().toISOString().slice(0, 10))
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const now = new Date()
+  const [dateRange, setDateRange] = useState({
+    start: new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10),
+    end: new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10),
+  })
+
+  useEffect(() => {
+    // In a real implementation, this would fetch liter entries and revenue data
+    setIsLoading(false)
+  }, [dateRange, userId])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    // In a real implementation, this would save the liter entry via API
+    setIsSubmitting(false)
+    setLiters('')
+  }
+
+  if (isLoading) return <ExtensionLoadingSkeleton />
+
+  return (
+    <div className="space-y-6">
+      <DateRangeFilter
+        onRangeChange={(start, end) => setDateRange({ start, end })}
+      />
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <KPICard
+          label="Intäkt per liter"
+          value={earningsPerLiter.toLocaleString('sv-SE')}
+          suffix="kr/l"
+        />
+        <KPICard
+          label="Totalt liter"
+          value={totalLiters.toLocaleString('sv-SE')}
+          suffix="l"
+        />
+        <KPICard
+          label="Alkoholintäkter"
+          value={totalRevenue.toLocaleString('sv-SE')}
+          suffix="kr"
+        />
+      </div>
+
+      <DataEntryForm
+        title="Registrera daglig literförsäljning"
+        onSubmit={handleSubmit}
+        submitLabel="Registrera"
+        isSubmitting={isSubmitting}
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="entry-date">Datum</Label>
+            <Input
+              id="entry-date"
+              type="date"
+              value={entryDate}
+              onChange={e => setEntryDate(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="liters">Antal liter</Label>
+            <Input
+              id="liters"
+              type="number"
+              step="0.01"
+              min="0"
+              placeholder="0.00"
+              value={liters}
+              onChange={e => setLiters(e.target.value)}
+            />
+          </div>
+        </div>
+      </DataEntryForm>
+
+      <div className="rounded-xl border p-6">
+        <h3 className="text-sm font-semibold mb-4">Så fungerar det</h3>
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          Intäkt per liter beräknas genom att dividera alkoholintäkter med totalt antal sålda
+          liter. Registrera daglig literförsäljning ovan. Alkoholintäkter hämtas automatiskt
+          från bokföringen.
+        </p>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,64 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import KPICard from '@/components/extensions/shared/KPICard'
+import DateRangeFilter from '@/components/extensions/shared/DateRangeFilter'
+import ExtensionLoadingSkeleton from '@/components/extensions/shared/ExtensionLoadingSkeleton'
+
+export default function FoodCostWorkspace({ userId }: WorkspaceComponentProps) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [foodCost, setFoodCost] = useState<number>(0)
+  const [revenue, setRevenue] = useState<number>(0)
+  const [purchases, setPurchases] = useState<number>(0)
+
+  // Set initial date range to current month
+  const now = new Date()
+  const [dateRange, setDateRange] = useState({
+    start: new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10),
+    end: new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10),
+  })
+
+  useEffect(() => {
+    // In a real implementation, this would fetch journal_entry_lines
+    // and calculate food cost via the API
+    setIsLoading(false)
+  }, [dateRange, userId])
+
+  if (isLoading) return <ExtensionLoadingSkeleton />
+
+  return (
+    <div className="space-y-6">
+      <DateRangeFilter
+        onRangeChange={(start, end) => setDateRange({ start, end })}
+      />
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <KPICard
+          label="Food Cost %"
+          value={foodCost}
+          suffix="%"
+        />
+        <KPICard
+          label="Varuinköp"
+          value={purchases.toLocaleString('sv-SE')}
+          suffix="kr"
+        />
+        <KPICard
+          label="Livsmedelsintäkter"
+          value={revenue.toLocaleString('sv-SE')}
+          suffix="kr"
+        />
+      </div>
+
+      <div className="rounded-xl border p-6">
+        <h3 className="text-sm font-semibold mb-4">Så fungerar det</h3>
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          Food Cost % beräknas automatiskt utifrån din bokföring. Varuinköp (konton 4000-4999)
+          divideras med livsmedelsintäkter (konton 3000-3999). En bra riktvärde för restauranger
+          är 25-35%.
+        </p>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { Receipt } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function PosImportWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Kassa Z-rapport import"
+      description="Stöd för import av Z-rapporter kommer snart. Du kommer kunna importera dagliga kassarapporter direkt från ditt kassasystem."
+      icon={<Receipt className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { HandCoins } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function TipTrackingWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Dricksuppföljning"
+      description="Registrering av dricks per skift kommer snart. Du kommer kunna följa upp dricksfördelning och bokföra det korrekt."
+      icon={<HandCoins className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,39 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface DataEntryFormProps {
+  title: string
+  onSubmit: (e: React.FormEvent) => void
+  submitLabel?: string
+  isSubmitting?: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+export default function DataEntryForm({
+  title,
+  onSubmit,
+  submitLabel = 'Spara',
+  isSubmitting = false,
+  children,
+  className,
+}: DataEntryFormProps) {
+  return (
+    <Card className={cn('', className)}>
+      <CardHeader>
+        <CardTitle className="text-base">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} className="space-y-4">
+          {children}
+          <Button type="submit" disabled={isSubmitting} size="sm">
+            {isSubmitting ? 'Sparar...' : submitLabel}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
@@ -0,0 +1,66 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+type Period = 'month' | 'quarter' | 'year' | 'custom'
+
+interface DateRangeFilterProps {
+  onRangeChange: (start: string, end: string) => void
+  className?: string
+}
+
+export default function DateRangeFilter({ onRangeChange, className }: DateRangeFilterProps) {
+  const [activePeriod, setActivePeriod] = useState<Period>('month')
+
+  const now = new Date()
+
+  const handlePeriod = (period: Period) => {
+    setActivePeriod(period)
+    const year = now.getFullYear()
+    const month = now.getMonth()
+
+    switch (period) {
+      case 'month': {
+        const start = new Date(year, month, 1).toISOString().slice(0, 10)
+        const end = new Date(year, month + 1, 0).toISOString().slice(0, 10)
+        onRangeChange(start, end)
+        break
+      }
+      case 'quarter': {
+        const qStart = Math.floor(month / 3) * 3
+        const start = new Date(year, qStart, 1).toISOString().slice(0, 10)
+        const end = new Date(year, qStart + 3, 0).toISOString().slice(0, 10)
+        onRangeChange(start, end)
+        break
+      }
+      case 'year': {
+        onRangeChange(`${year}-01-01`, `${year}-12-31`)
+        break
+      }
+    }
+  }
+
+  const periods: { key: Period; label: string }[] = [
+    { key: 'month', label: 'M\u00e5nad' },
+    { key: 'quarter', label: 'Kvartal' },
+    { key: 'year', label: '\u00c5r' },
+  ]
+
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      {periods.map(({ key, label }) => (
+        <Button
+          key={key}
+          variant={activePeriod === key ? 'default' : 'ghost'}
+          size="sm"
+          onClick={() => handlePeriod(key)}
+          className="text-xs"
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,21 @@
+import { Puzzle } from 'lucide-react'
+
+interface EmptyExtensionStateProps {
+  title?: string
+  description?: string
+  icon?: React.ReactNode
+}
+
+export default function EmptyExtensionState({
+  title = 'Ingen data \u00e4nnu',
+  description = 'Data kommer att visas h\u00e4r n\u00e4r det finns tillg\u00e4ngligt.',
+  icon,
+}: EmptyExtensionStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      {icon ?? <Puzzle className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+      <h3 className="text-lg font-medium text-foreground">{title}</h3>
+      <p className="text-sm text-muted-foreground mt-1 max-w-md">{description}</p>
+    </div>
+  )
+}
@@ -0,0 +1,23 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function ExtensionLoadingSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* KPI cards skeleton */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="rounded-xl border p-6 space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-8 w-16" />
+            <Skeleton className="h-3 w-32" />
+          </div>
+        ))}
+      </div>
+      {/* Content skeleton */}
+      <div className="rounded-xl border p-6 space-y-4">
+        <Skeleton className="h-6 w-48" />
+        <Skeleton className="h-40 w-full" />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,34 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface KPICardProps {
+  label: string
+  value: string | number
+  suffix?: string
+  trend?: { value: number; label: string }
+  className?: string
+}
+
+export default function KPICard({ label, value, suffix, trend, className }: KPICardProps) {
+  return (
+    <Card className={cn('', className)}>
+      <CardContent className="pt-6">
+        <p className="text-sm text-muted-foreground">{label}</p>
+        <div className="flex items-baseline gap-1 mt-1">
+          <span className="text-2xl font-semibold tracking-tight">{value}</span>
+          {suffix && <span className="text-sm text-muted-foreground">{suffix}</span>}
+        </div>
+        {trend && (
+          <p className={cn(
+            'text-xs mt-1',
+            trend.value > 0 ? 'text-green-600' : trend.value < 0 ? 'text-red-600' : 'text-muted-foreground'
+          )}>
+            {trend.value > 0 ? '+' : ''}{trend.value}% {trend.label}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { Clock } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function BillableHoursWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Debiterbar tid"
+      description="Tidsrapportering och uppföljning av debiterbara timmar kommer snart. Du kommer kunna logga tid per kund och projekt."
+      icon={<Clock className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,14 @@
+'use client'
+
+import { Layers } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function ProjectBillingWorkspace() {
+  return (
+    <EmptyExtensionState
+      title="Projektfakturering"
+      description="Uppföljning av fakturering per kundprojekt kommer snart. Du kommer kunna koppla tidrapporter till fakturor automatiskt."
+      icon={<Layers className="h-12 w-12 text-muted-foreground/40 mb-4" />}
+    />
+  )
+}
@@ -0,0 +1,124 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { SECTORS } from '@/lib/extensions/sectors'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import { Briefcase, ArrowRight, Loader2 } from 'lucide-react'
+
+interface Step2SectorSelectionProps {
+  onNext: (data: { sector_slug: string | null }) => void
+  onBack: () => void
+  isSaving: boolean
+}
+
+export default function Step2SectorSelection({ onNext, onBack, isSaving }: Step2SectorSelectionProps) {
+  const [selected, setSelected] = useState<string | null>(null)
+
+  const industrySectors = SECTORS.filter(s => s.slug !== 'general')
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Vilken bransch verkar du inom?</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Vi anpassar verktyg och tillägg baserat på din bransch. Du kan alltid ändra detta senare.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {industrySectors.map(sector => {
+          const Icon = resolveIcon(sector.icon)
+          const isSelected = selected === sector.slug
+          return (
+            <Card
+              key={sector.slug}
+              className={cn(
+                'cursor-pointer transition-all',
+                isSelected
+                  ? 'border-primary ring-2 ring-primary/20'
+                  : 'hover:border-primary/50'
+              )}
+              onClick={() => setSelected(sector.slug)}
+            >
+              <CardContent className="pt-6">
+                <div className="flex items-start gap-3">
+                  <div className={cn(
+                    'flex h-10 w-10 items-center justify-center rounded-lg flex-shrink-0',
+                    isSelected ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'
+                  )}>
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium">{sector.name}</p>
+                    <p className="text-xs text-muted-foreground mt-0.5">{sector.description}</p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {sector.extensions.length} branschverktyg
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )
+        })}
+
+        {/* "Other" option */}
+        <Card
+          className={cn(
+            'cursor-pointer transition-all',
+            selected === 'other'
+              ? 'border-primary ring-2 ring-primary/20'
+              : 'hover:border-primary/50'
+          )}
+          onClick={() => setSelected('other')}
+        >
+          <CardContent className="pt-6">
+            <div className="flex items-start gap-3">
+              <div className={cn(
+                'flex h-10 w-10 items-center justify-center rounded-lg flex-shrink-0',
+                selected === 'other' ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'
+              )}>
+                <Briefcase className="h-5 w-5" />
+              </div>
+              <div>
+                <p className="text-sm font-medium">Annan bransch</p>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Generella verktyg utan branschspecifika tillägg
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="flex items-center justify-between pt-4">
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" onClick={onBack}>
+            Tillbaka
+          </Button>
+          <Button variant="ghost" onClick={() => onNext({ sector_slug: null })}>
+            Hoppa över
+          </Button>
+        </div>
+        <Button
+          onClick={() => onNext({ sector_slug: selected === 'other' ? null : selected })}
+          disabled={!selected || isSaving}
+        >
+          {isSaving ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Sparar...
+            </>
+          ) : (
+            <>
+              Nästa
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,134 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import { cn } from '@/lib/utils'
+import { getSector } from '@/lib/extensions/sectors'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import CategoryBadge from '@/components/extensions/CategoryBadge'
+import { ArrowRight, Loader2 } from 'lucide-react'
+import type { SectorSlug, ExtensionDefinition } from '@/lib/extensions/types'
+
+interface Step3Props {
+  sectorSlug: string | null
+  onNext: (data: { enabled_extensions: { sector_slug: string; extension_slug: string }[] }) => void
+  onBack: () => void
+  isSaving: boolean
+}
+
+export default function Step3ExtensionSuggestions({ sectorSlug, onNext, onBack, isSaving }: Step3Props) {
+  const generalSector = getSector('general')
+  const selectedSector = sectorSlug ? getSector(sectorSlug as SectorSlug) : null
+
+  const [toggles, setToggles] = useState<Record<string, boolean>>({})
+
+  const handleToggle = (ext: ExtensionDefinition) => {
+    const key = `${ext.sector}/${ext.slug}`
+    setToggles(prev => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  const handleSubmit = () => {
+    const enabled = Object.entries(toggles)
+      .filter(([, enabled]) => enabled)
+      .map(([key]) => {
+        const [sector_slug, extension_slug] = key.split('/')
+        return { sector_slug, extension_slug }
+      })
+    onNext({ enabled_extensions: enabled })
+  }
+
+  const handleSkip = () => {
+    onNext({ enabled_extensions: [] })
+  }
+
+  // Group: first general, then sector-specific
+  const sections: { label: string; extensions: ExtensionDefinition[] }[] = []
+  if (generalSector) {
+    sections.push({ label: generalSector.name, extensions: generalSector.extensions })
+  }
+  if (selectedSector) {
+    sections.push({ label: selectedSector.name, extensions: selectedSector.extensions })
+  }
+
+  const enabledCount = Object.values(toggles).filter(Boolean).length
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Välj dina tillägg</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Aktivera de verktyg du vill använda. Du kan alltid ändra detta senare under Tillägg.
+        </p>
+      </div>
+
+      {sections.map(section => (
+        <div key={section.label}>
+          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+            {section.label}
+          </h3>
+          <div className="space-y-2">
+            {section.extensions.map(ext => {
+              const Icon = resolveIcon(ext.icon)
+              const key = `${ext.sector}/${ext.slug}`
+              const isEnabled = toggles[key] ?? false
+              return (
+                <div
+                  key={key}
+                  className={cn(
+                    'flex items-center justify-between gap-3 rounded-lg border p-3 transition-colors',
+                    isEnabled && 'border-primary/30 bg-primary/5'
+                  )}
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className={cn(
+                      'flex h-9 w-9 items-center justify-center rounded-lg flex-shrink-0',
+                      isEnabled ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'
+                    )}>
+                      <Icon className="h-4 w-4" />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <p className="text-sm font-medium">{ext.name}</p>
+                        <CategoryBadge category={ext.category} />
+                      </div>
+                      <p className="text-xs text-muted-foreground line-clamp-1">{ext.description}</p>
+                    </div>
+                  </div>
+                  <Switch
+                    checked={isEnabled}
+                    onCheckedChange={() => handleToggle(ext)}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      ))}
+
+      <div className="flex items-center justify-between pt-4">
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" onClick={onBack}>
+            Tillbaka
+          </Button>
+          <Button variant="ghost" onClick={handleSkip}>
+            Hoppa över
+          </Button>
+        </div>
+        <Button onClick={handleSubmit} disabled={isSaving}>
+          {isSaving ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Sparar...
+            </>
+          ) : (
+            <>
+              {enabledCount > 0 ? `Nästa (${enabledCount} valda)` : 'Nästa'}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,521 @@
+# Extension System — Design Document
+
+## The App
+
+erp-base is a Swedish accounting platform for sole traders (enskild firma) and limited companies (aktiebolag). It handles the legally required bookkeeping and financial management that every Swedish business needs.
+
+## Core Functionality
+
+The core is the standard accounting system. It's what every user gets out of the box — the features that exist in any accounting platform like Fortnox, Visma, or Björn Lundén. Nothing more, nothing less:
+
+- Double-entry bookkeeping (journal entries, BAS chart of accounts, voucher numbering)
+- Invoicing (create, send, track, payment matching)
+- Supplier invoice management
+- Bank transaction reconciliation
+- Financial reports (income statement, balance sheet, trial balance, VAT declaration, general ledger)
+- Tax compliance (SRU export, NE-bilaga, tax deadline tracking)
+- Document archive with 7-year legal retention
+- Customer and supplier management
+
+That's the core. It doesn't include receipt scanning, AI categorization, AI chat, push notifications, or PSD2 bank connection. Those are not standard accounting features — they're value-adds.
+
+## Extensions
+
+Extensions are **everything beyond the core accounting system**. They are self-contained tools that a user adds to their dashboard. No extensions are active by default — the user chooses which ones they want.
+
+There are two kinds of extensions:
+
+### General Extensions
+
+General extensions are not tied to any specific business sector. They're useful for any business but they go beyond what a standard accounting system offers. They are optional — the user toggles them on from the marketplace.
+
+Examples:
+- **Receipt OCR** — Scan receipts and extract data automatically
+- **AI Categorization** — AI-powered transaction categorization suggestions
+- **AI Chat** — AI assistant for tax and bookkeeping questions
+- **Push Notifications** — Event notifications for accounting activities
+- **Enable Banking** — PSD2 automatic bank transaction sync
+
+These currently exist in the codebase at `extensions/` and are always loaded. They need to be migrated to the toggle system so users choose to enable them.
+
+### Sector Extensions
+
+Sector extensions are tied to a specific market sector. They're only relevant to businesses operating in that sector. A restaurant owner wants "Food Cost %" but an IT consultant does not.
+
+Examples:
+- **Restaurant:** Food Cost %, Earnings Per Alcohol Liter, POS Z-Report Import, Tip Tracking
+- **Construction:** ROT Calculator, Project Cost Tracking
+- **Hotel:** RevPAR, Occupancy Tracking
+- **IT/Consulting:** Billable Hours Ratio, Project Billing Metrics
+- **E-commerce:** Shopify Order Import, Multi-channel Revenue Analytics
+
+### The Unified Model
+
+Both general and sector extensions live in the same system:
+
+```
+extensions/
+  general/                    ← General extensions (any business)
+    receipt-ocr/
+    ai-categorization/
+    ai-chat/
+    push-notifications/
+    enable-banking/
+  restaurant/                 ← Restaurant sector extensions
+    food-cost/
+    earnings-per-liter/
+    pos-import/
+    tip-tracking/
+  construction/               ← Construction sector extensions
+    rot-calculator/
+    project-cost/
+  hotel/                      ← Hotel sector extensions
+    revpar/
+    occupancy/
+  tech/                       ← IT/Consulting sector extensions
+    billable-hours/
+    project-billing/
+  ecommerce/                  ← E-commerce sector extensions
+    shopify-import/
+    multichannel-revenue/
+```
+
+In the marketplace:
+- General extensions are shown to everyone, always visible
+- Sector extensions are suggested based on the user's primary sector
+- But all extensions are browsable by everyone regardless of sector
+
+In the sidebar under "Your Extensions":
+- Both general and sector extensions appear together
+- Whatever the user has enabled shows up here
+
+---
+
+## Design Decisions (Confirmed)
+
+### 1. Extensions are self-contained — they do NOT write to the core accounting system
+
+Extensions are **independent tools that live on the dashboard**. They are NOT part of the core accounting system. They have their own world, their own data, their own purpose. They never create journal entries, invoices, or modify any accounting records.
+
+There are two one-way data flows into an extension. Data never flows back:
+
+```
+Core Accounting Data ──→ Extension (reads it, displays it, uses it in calculations)
+User Manual Input    ──→ Extension (stores it in extension's own data, processes it)
+Extension            ──✗──→ Core Accounting (never writes back)
+```
+
+An extension may:
+- **Be fed core data** — the platform feeds accounting data (journal entries, transactions, invoices) into the extension for it to read and use in calculations
+- **Accept user input** — the user submits data directly into the extension for data that doesn't exist in any accounting system (e.g. liters of alcohol sold per day, POS Z-report files, Shopify order exports)
+- **Store its own data** — extension-specific data lives in the extension's own storage, separate from core accounting
+- **Calculate and display** — combine core data + extension data to produce metrics, reports, insights
+
+An extension may NOT:
+- Create journal entries
+- Create or modify invoices
+- Modify transactions or any core accounting table
+- Write back to the core accounting system in any way
+
+This is a critical architectural constraint. Extensions are safe — enabling or disabling one can never corrupt or affect the accounting data. The core bookkeeping is a walled garden that extensions can look into but never modify.
+
+**Important:** Features like POS Z-Report Import and Shopify Order Import are EXTENSIONS. They import data into the extension's own storage and provide analytics on that data. They do not create journal entries from imported data. The bookkeeping of POS data or Shopify orders is a separate activity the user does in the core platform.
+
+### 2. Data source depends on the extension — three patterns
+
+**Pattern A: Fed from core accounting data**
+Some extensions are fed existing bookkeeping data. For example, a "Food Cost %" extension reads journal entries for food purchase accounts (4000-series) and food revenue accounts (3000-series), then calculates and displays the metric. The user doesn't enter anything — the data already exists in the bookkeeping. These are extensions for data that Fortnox, Visma, and other accounting systems already have.
+
+**Pattern B: User submits data manually**
+Some extensions need data that doesn't exist in any accounting system. No system tracks liters of alcohol sold, or daily staff tips, or room occupancy counts. For these extensions, the user manually submits data into the extension's workspace. The extension stores, processes, and displays this data. This has nothing to do with the core accounting functionality.
+
+**Pattern C: Both**
+Some extensions combine core accounting data with user-submitted data. "Earnings Per Alcohol Liter" reads alcohol revenue from the bookkeeping (Pattern A) and takes user-entered liter counts (Pattern B) to calculate revenue per liter.
+
+### 3. Full marketplace for post-onboarding management
+
+After onboarding, users have a dedicated "Extensions" marketplace page where they can:
+- Browse all available extensions (general + all sectors)
+- Read descriptions and details
+- Toggle extensions on/off at any time
+- Discover extensions from sectors other than their primary one
+
+### 4. Primary sector with cross-sector browsing
+
+During onboarding, the user selects a **primary sector** (e.g. "Restaurant & Cafe"). The app then suggests extensions for that sector, plus general extensions. But the user is NOT locked in — they can browse and enable extensions from any sector at any time via the marketplace.
+
+The primary sector serves as a **recommendation filter**, not a restriction.
+
+### 5. First-party now, third-party later
+
+We build all extensions ourselves initially. But the architecture should be clean and well-defined enough that external developers could eventually build extensions too. This means:
+- Clear extension interface/contract
+- Well-documented data access patterns
+- Self-contained extension structure (each extension is a standalone module)
+
+---
+
+## The User Experience
+
+1. User signs up, goes through onboarding
+2. During onboarding, they select their business sector ("Restaurant & Cafe")
+3. The app suggests extensions: general extensions + extensions for that sector
+4. User toggles on the ones they want
+5. On the dashboard, the sidebar has a **"Your Extensions"** section listing all enabled extensions
+6. Clicking an extension opens its workspace — a dedicated page with the extension's own UI
+7. The user interacts with the extension: views data, enters inputs, sees calculations/reports
+8. User can browse the marketplace anytime to add/remove extensions
+
+---
+
+## Extension Definition
+
+### What an Extension Contains
+
+| Part | Required? | Description |
+|------|-----------|-------------|
+| **Metadata** | Yes | Name, description, sector (or 'general'), category, icon — for marketplace and sidebar |
+| **Workspace UI** | Yes | A React component — the main page the user sees when they click the extension |
+| **Extension data** | Depends | Storage for user-submitted data and extension state |
+| **Configuration** | Optional | Settings panel for customizing the extension's behavior |
+| **Core data queries** | Optional | Queries that read from journal entries, transactions, invoices, etc. |
+
+### Extension Interface
+
+```typescript
+interface ExtensionDefinition {
+  // Identity
+  slug: string                      // URL-safe ID, unique within sector (e.g. 'earnings-per-liter')
+  name: string                      // Display name (e.g. 'Earnings Per Alcohol Liter')
+  sector: string                    // 'general' | 'restaurant' | 'construction' | 'hotel' | 'tech' | 'ecommerce'
+  category: ExtensionCategory       // 'accounting' | 'reports' | 'import' | 'operations'
+
+  // Display (for marketplace and sidebar)
+  description: string               // One-line description
+  longDescription: string           // Detailed description with features
+  icon: string                      // Lucide icon name
+  entityTypes?: EntityType[]        // Supported entity types (default: both EF and AB)
+
+  // Data patterns
+  dataPattern: 'core' | 'manual' | 'both'  // How the extension gets its data
+  readsCoreTables?: string[]        // Which core tables this extension reads (for pattern A/C)
+  hasOwnData?: boolean              // Whether users submit data into this extension (for pattern B/C)
+}
+```
+
+### Sector Definition
+
+```typescript
+interface Sector {
+  slug: string                      // 'general' | 'restaurant' | 'construction' | etc.
+  name: string                      // 'General' | 'Restaurant & Cafe' | etc.
+  icon: string                      // Lucide icon name
+  description: string               // Short tagline
+  extensions: ExtensionDefinition[]
+}
+```
+
+### Extension Categories
+
+```typescript
+type ExtensionCategory = 'accounting' | 'reports' | 'import' | 'operations'
+```
+
+| Category | Color | Purpose |
+|----------|-------|---------|
+| Accounting & Tax | Red | Calculations related to bookkeeping, VAT, deductions |
+| Industry Reports | Blue | KPIs, analytics, metrics |
+| Smart Import | Green | Parse and import data from external tools |
+| Operational Tools | Gray | Day-to-day business tools |
+
+---
+
+## Concrete Examples
+
+| Extension | Sector | Data Pattern | User Input | Reads Core Data | What it Does |
+|-----------|--------|--------------|------------|-----------------|--------------|
+| Receipt OCR | General | B (manual) | Uploads receipt images | None | Scans receipts, extracts merchant/amount/VAT data |
+| AI Categorization | General | A (core) | None | Uncategorized transactions | Suggests BAS account categories using AI |
+| Enable Banking | General | B (manual) | Bank connection setup | None | Syncs bank transactions via PSD2 |
+| Earnings Per Alcohol Liter | Restaurant | A + B (both) | Liters sold per day/week | Alcohol revenue from BAS 3001 | Calculates revenue/liter, trends over time |
+| Food Cost % | Restaurant | A (core) | None | Food purchases (4000-series), food revenue (3000-series) | Calculates food_cost/food_revenue %, trends |
+| Tip Tracking | Restaurant | B (manual) | Tip amounts per shift | Optionally reads staff cost accounts | Total tips, tips/employee, tip % of revenue |
+| POS Z-Report Import | Restaurant | B (manual) | Uploads Z-report CSV/Excel | None | Parses POS data, stores in extension, shows daily sales analytics |
+| Shopify Order Import | E-commerce | B (manual) | Uploads order export | None | Imports orders into extension, shows revenue by product, trends |
+| ROT Calculator | Construction | A + B (both) | Labor hours, material costs per job | Invoice data for customer billing | ROT deduction amounts (30% of labor, max 50k/year per customer) |
+| RevPAR | Hotel | A + B (both) | Room count and occupancy | Room revenue accounts | Revenue Per Available Room, occupancy rate |
+| Billable Hours Ratio | IT/Consulting | A + B (both) | Hours worked per project | Invoice data for billed amounts | Billable/total hours, effective hourly rate |
+
+---
+
+## Architecture
+
+### Where Things Live
+
+```
+extensions/
+  general/                          ← General extensions
+    receipt-ocr/
+      index.ts                      ← Extension definition + logic
+      lib/
+      __tests__/
+    ai-categorization/
+      index.ts
+      lib/
+    ai-chat/
+      index.ts
+      lib/
+    push-notifications/
+      index.ts
+      lib/
+    enable-banking/
+      index.ts
+      lib/
+  restaurant/                       ← Restaurant sector
+    earnings-per-liter/
+      index.ts
+      lib/
+    food-cost/
+      index.ts
+      lib/
+    pos-import/
+      index.ts
+      lib/
+    tip-tracking/
+      index.ts
+      lib/
+  construction/                     ← Construction sector
+    rot-calculator/
+      index.ts
+      lib/
+  hotel/                            ← Hotel sector
+    revpar/
+      index.ts
+      lib/
+  tech/                             ← IT/Consulting sector
+    billable-hours/
+      index.ts
+      lib/
+  ecommerce/                        ← E-commerce sector
+    shopify-import/
+      index.ts
+      lib/
+
+lib/
+  extensions/
+    types.ts                        ← ExtensionDefinition, Sector, ExtensionCategory types
+    sectors.ts                      ← Sector + extension metadata registry (source of truth)
+    workspace-registry.tsx           ← Maps sector/slug → lazy-loaded React component
+    hooks.ts                        ← useExtensionToggle, useEnabledExtensions
+
+components/
+  extensions/
+    ExtensionWorkspaceShell.tsx     ← Shared layout wrapper
+    shared/                         ← Shared UI primitives
+      KPICard.tsx
+      DataEntryForm.tsx
+      DateRangeFilter.tsx
+      EmptyExtensionState.tsx
+      ExtensionLoadingSkeleton.tsx
+    general/                        ← General extension workspaces
+      ReceiptOcrWorkspace.tsx
+      AiCategorizationWorkspace.tsx
+      AiChatWorkspace.tsx
+    restaurant/                     ← Restaurant extension workspaces
+      EarningsPerLiterWorkspace.tsx
+      FoodCostWorkspace.tsx
+      PosImportWorkspace.tsx
+    construction/
+      RotCalculatorWorkspace.tsx
+    hotel/
+      RevparWorkspace.tsx
+    tech/
+      BillableHoursWorkspace.tsx
+    ecommerce/
+      ShopifyImportWorkspace.tsx
+
+app/(dashboard)/
+  extensions/                       ← Marketplace
+    page.tsx                        ← Extension hub (browse sectors + general)
+    [sector]/
+      page.tsx                      ← Extensions for a specific sector
+      [extension]/
+        page.tsx                    ← Extension detail + toggle
+  e/                                ← Extension workspaces
+    [sector]/
+      [slug]/
+        page.tsx                    ← Renders the workspace component
+```
+
+### Data Storage
+
+Extensions store their data in the existing `extension_data` table:
+
+```
+extension_data:
+  user_id:      auth user
+  extension_id: 'restaurant/earnings-per-liter'   (sector/slug format)
+  key:          'settings' | 'entries' | 'config' | custom keys
+  value:        JSONB (flexible)
+```
+
+For the "Earnings Per Liter" extension, data might look like:
+```
+key: 'settings'     → { "defaultUnit": "liter", "currency": "SEK" }
+key: 'entries'      → [{ "date": "2025-01-15", "liters": 42.5, "type": "spirits" }, ...]
+key: 'config'       → { "revenueAccounts": ["3001"], "trackByType": true }
+```
+
+### The Toggle System
+
+New database table:
+
+```sql
+create table extension_toggles (
+  id              uuid primary key default uuid_generate_v4(),
+  user_id         uuid not null references auth.users on delete cascade,
+  sector_slug     text not null,       -- 'general' | 'restaurant' | 'construction' | etc.
+  extension_slug  text not null,
+  enabled         boolean not null default true,
+  created_at      timestamptz not null default now(),
+  updated_at      timestamptz not null default now(),
+  constraint extension_toggles_unique unique (user_id, sector_slug, extension_slug)
+);
+```
+
+Also add to company_settings:
+```sql
+alter table company_settings add column sector_slug text;
+```
+
+### API Routes for Extensions
+
+Each extension that needs data persistence gets API routes:
+
+```
+app/api/extensions/[sector]/[slug]/
+  data/route.ts       — GET (read entries), POST (submit new entry), DELETE (remove entry)
+  settings/route.ts   — GET (read settings), PATCH (update settings)
+```
+
+These are simple CRUD routes that read/write to `extension_data`. They follow the existing API route pattern (auth check, RLS, user_id filtering).
+
+### Sidebar Integration
+
+The sidebar (`DashboardNav.tsx`) gets a new section: **"Your Extensions"**. It reads enabled extensions from `extension_toggles` and renders links:
+
+```
+── Your Extensions ──────────
+  📷 Receipt OCR             → /e/general/receipt-ocr
+  🤖 AI Categorization       → /e/general/ai-categorization
+  📊 Food Cost %             → /e/restaurant/food-cost
+  🍷 Earnings Per Liter      → /e/restaurant/earnings-per-liter
+```
+
+Each link goes to `/e/{sector}/{slug}` which renders the extension's workspace component.
+
+### Onboarding Integration
+
+Add two new steps to the onboarding flow (after entity type selection):
+
+**Step 2: Sector Selection**
+"What type of business do you run?"
+Grid of sectors with icons and descriptions. User picks one.
+Stores `sector_slug` on `company_settings`.
+
+**Step 3: Extension Suggestions**
+"Here are tools for your business. Pick the ones you want."
+Shows general extensions + extensions for the selected sector, grouped by category.
+User toggles desired extensions. Inserts into `extension_toggles`.
+Can be skipped — user can always add extensions later from the marketplace.
+
+---
+
+## The Extension Workspace Pattern
+
+Every extension workspace follows the same pattern:
+
+```
+┌─────────────────────────────────────────────────┐
+│  Extension Workspace Shell                       │
+│  ┌─────────────────────────────────────────────┐ │
+│  │  Header: Extension name + settings link     │ │
+│  ├─────────────────────────────────────────────┤ │
+│  │                                             │ │
+│  │  Extension-specific UI                      │ │
+│  │                                             │ │
+│  │  This is where the extension does its thing │ │
+│  │  - Data entry forms                         │ │
+│  │  - KPI cards and charts                     │ │
+│  │  - Tables of submitted data                 │ │
+│  │  - Calculation results                      │ │
+│  │  - Date range filters                       │ │
+│  │                                             │ │
+│  └─────────────────────────────────────────────┘ │
+└─────────────────────────────────────────────────┘
+```
+
+The `ExtensionWorkspaceShell` provides consistent chrome (header, breadcrumbs, settings link). The extension fills in the content area with whatever UI it needs.
+
+### Example: Earnings Per Alcohol Liter
+
+When the user clicks this extension, they see:
+
+1. **KPI cards at top**: Current earnings/liter, trend vs last month, total liters this month
+2. **Data entry section**: Form to log daily sales (date, liters sold, alcohol type)
+3. **History table**: Past entries with edit/delete
+4. **Chart**: Earnings per liter over time (line chart)
+5. **Revenue breakdown**: Reads from core journal entries — alcohol revenue by account
+
+The extension reads revenue data from journal_entry_lines (BAS 3001 for 25% alcohol revenue) and combines it with user-submitted liter data to calculate the metric.
+
+---
+
+## Migration from Current Architecture
+
+The current codebase has receipt-ocr, ai-categorization, ai-chat, push-notifications, sru-export, ne-bilaga, and enable-banking implemented as always-on server-side plugins using the `Extension` interface, the extension registry, and the event bus.
+
+These need to become general extensions in the new system:
+1. Move from `extensions/{name}/` to `extensions/general/{name}/`
+2. Add metadata (description, icon, category) to each
+3. Register them in the sector data registry under the `general` sector
+4. Create workspace components for each
+5. Make them toggleable via `extension_toggles` (instead of always loaded)
+6. The existing event bus integration and server-side behavior stays — general extensions may still use the event bus for background processing (e.g. ai-categorization reacting to transaction.synced). The toggle check becomes a gate in their event handlers.
+
+Note: SRU export and NE-bilaga may remain as core features since they're legally required for Swedish accounting compliance, not optional value-adds. This is a decision to make during implementation.
+
+---
+
+## What Needs to Be Built
+
+1. **Extension types** — ExtensionDefinition, Sector, ExtensionCategory in types
+2. **Sector data registry** — All sectors and extension metadata in code
+3. **Database migration** — extension_toggles table + sector_slug on company_settings
+4. **Toggle hooks** — useExtensionToggle, useEnabledExtensions (client-side)
+5. **Workspace component registry** — Maps sector/slug → lazy-loaded React component
+6. **Workspace routing** — `app/(dashboard)/e/[sector]/[slug]/page.tsx`
+7. **Workspace shell** — Shared layout wrapper component
+8. **Marketplace pages** — `app/(dashboard)/extensions/` for browsing and toggling
+9. **Sidebar "Your Extensions"** — Wire enabled extensions into DashboardNav
+10. **Onboarding steps** — Sector selection + extension suggestions
+11. **Shared UI components** — KPICard, DataEntryForm, DateRangeFilter, EmptyExtensionState
+12. **Extension API routes** — Generic CRUD for extension_data
+13. **Migrate general extensions** — Move current extensions to new toggle system
+14. **Build first sector extensions** — Starting with restaurant sector
+
+---
+
+## Summary
+
+**The app** is a Swedish accounting platform.
+
+**Core functionality** is the standard accounting system: bookkeeping, invoicing, reports, tax, bank reconciliation. Every user gets this.
+
+**Extensions** are everything beyond core accounting. They come in two kinds:
+- **General extensions** (receipt-ocr, ai-categorization, etc.) — useful for any business, not sector-specific
+- **Sector extensions** (food cost %, earnings per liter, etc.) — tied to a specific market sector
+
+All extensions live in the same system, use the same toggle mechanism, appear in the same marketplace, and show up under "Your Extensions" in the sidebar. No extensions are active by default — the user chooses which ones to add.
+
+Extensions are read-only with respect to the core accounting system. They can be fed accounting data, they can accept manual user input, but they never write back to the bookkeeping.
@@ -0,0 +1,2 @@
+// Project Cost extension — Track costs per construction project
+export const PROJECT_COST_EXTENSION_ID = 'construction/project-cost'
@@ -0,0 +1,2 @@
+// ROT Calculator extension — Calculate ROT tax deductions for construction work
+export const ROT_CALCULATOR_EXTENSION_ID = 'construction/rot-calculator'
@@ -0,0 +1,2 @@
+// Multichannel Revenue extension — Track revenue across sales channels
+export const MULTICHANNEL_REVENUE_EXTENSION_ID = 'ecommerce/multichannel-revenue'
@@ -0,0 +1,2 @@
+// Shopify Import extension — Import orders and transactions from Shopify
+export const SHOPIFY_IMPORT_EXTENSION_ID = 'ecommerce/shopify-import'
--- a/Show More
+++ b/Show More