diff --git a/components/extensions/CategoryBadge.tsx b/components/extensions/CategoryBadge.tsx
new file mode 100644
index 00000000..0304df55
--- /dev/null
+++ b/components/extensions/CategoryBadge.tsx
@@ -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 = {
+ 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 (
+
+ {config.label}
+
+ )
+}
diff --git a/components/extensions/ExtensionCard.tsx b/components/extensions/ExtensionCard.tsx
new file mode 100644
index 00000000..9316a0c4
--- /dev/null
+++ b/components/extensions/ExtensionCard.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+
+ {extension.name}
+
+
+ {extension.description}
+
+
+
+
+
+
+
+
+ {/* Breadcrumb */}
+
+
+ {/* Header */}
+
+
+
+
+
+
{definition.name}
+
{definition.description}
+
+
+
+ {/* Extension content */}
+ {children}
+
+
+
+
+
+
+ {sector.name}
+
+
{sector.description}
+
+ {sector.extensions.length} tillägg
+
+
+
+
setDateRange({ start, end })}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
Så fungerar det
+
+ 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.
+
+
+
setDateRange({ start, end })}
+ />
+
+
+
+
+
+
+
+
+
Så fungerar det
+
+ 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%.
+
+
+ {periods.map(({ key, label }) => (
+
+ ))}
+
+ )
+}
diff --git a/components/extensions/shared/EmptyExtensionState.tsx b/components/extensions/shared/EmptyExtensionState.tsx
new file mode 100644
index 00000000..c03c7d25
--- /dev/null
+++ b/components/extensions/shared/EmptyExtensionState.tsx
@@ -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 (
+
+ {icon ??
}
+
{title}
+
{description}
+
+ {/* KPI cards skeleton */}
+
+ {[1, 2, 3].map(i => (
+
+
+
+
+
+ ))}
+
+ {/* Content skeleton */}
+
+
+
+
+
{label}
+
+ {value}
+ {suffix && {suffix}}
+
+ {trend && (
+ 0 ? 'text-green-600' : trend.value < 0 ? 'text-red-600' : 'text-muted-foreground'
+ )}>
+ {trend.value > 0 ? '+' : ''}{trend.value}% {trend.label}
+
+ )}
+
+
+ )
+}
diff --git a/components/extensions/tech/BillableHoursWorkspace.tsx b/components/extensions/tech/BillableHoursWorkspace.tsx
new file mode 100644
index 00000000..73c1ae85
--- /dev/null
+++ b/components/extensions/tech/BillableHoursWorkspace.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { Clock } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function BillableHoursWorkspace() {
+ return (
+ }
+ />
+ )
+}
diff --git a/components/extensions/tech/ProjectBillingWorkspace.tsx b/components/extensions/tech/ProjectBillingWorkspace.tsx
new file mode 100644
index 00000000..e8c5b1a4
--- /dev/null
+++ b/components/extensions/tech/ProjectBillingWorkspace.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { Layers } from 'lucide-react'
+import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+
+export default function ProjectBillingWorkspace() {
+ return (
+ }
+ />
+ )
+}
diff --git a/components/onboarding/Step2SectorSelection.tsx b/components/onboarding/Step2SectorSelection.tsx
new file mode 100644
index 00000000..53329a7d
--- /dev/null
+++ b/components/onboarding/Step2SectorSelection.tsx
@@ -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(null)
+
+ const industrySectors = SECTORS.filter(s => s.slug !== 'general')
+
+ return (
+
+
+
Vilken bransch verkar du inom?
+
+ Vi anpassar verktyg och tillägg baserat på din bransch. Du kan alltid ändra detta senare.
+
+
+
+
+ {industrySectors.map(sector => {
+ const Icon = resolveIcon(sector.icon)
+ const isSelected = selected === sector.slug
+ return (
+
setSelected(sector.slug)}
+ >
+
+
+
+
+
+
+
{sector.name}
+
{sector.description}
+
+ {sector.extensions.length} branschverktyg
+
+
+
+ )
+ })}
+
+ {/* "Other" option */}
+
setSelected('other')}
+ >
+
+
+
+
+
+
+
Annan bransch
+
+ Generella verktyg utan branschspecifika tillägg
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Välj dina tillägg
+
+ Aktivera de verktyg du vill använda. Du kan alltid ändra detta senare under Tillägg.
+
+
+
+ {sections.map(section => (
+
+
+ {section.label}
+
+
+ {section.extensions.map(ext => {
+ const Icon = resolveIcon(ext.icon)
+ const key = `${ext.sector}/${ext.slug}`
+ const isEnabled = toggles[key] ?? false
+ return (
+
+
+
handleToggle(ext)}
+ />
+
+ )
+ })}
+
+
+ ))}
+
+
+
+
+
+
+
+
+