bb983cb7-102d-4a43-baad-e3307280755d

2026-10-26 15:45:18 +00:00
1 parent 34bd721ab1
commit 40805e16cd
@@ -8,6 +8,7 @@ import { CommandMenu } from './command-menu'
 import { CompanyDrawer } from './company-drawer'
 import { Sheet, SheetContent, SheetTitle } from '@/components/ui/sheet'
 import { DashboardView } from './views/dashboard'
+import { ReportingView } from './views/reporting'
 import { CrmView } from './views/crm'
 import { LeadsView } from './views/leads'
 import { EstimatesView } from './views/estimates'
@@ -19,6 +20,7 @@ import { ExpensesView } from './views/expenses'
 import { FinanceView } from './views/finance'
 import { AuditView } from './views/audit'
 import { SettingsView } from './views/settings'
+import { SetupWizardView } from './views/setup-wizard'

 export function AppShell() {
  const { view, sidebarOpen, setSidebarOpen } = useAos()
@@ -45,6 +47,7 @@ export function AppShell() {
        <TopBar />
        <main className="flex-1">
          {view === 'dashboard' && <DashboardView />}
+          {view === 'reporting' && <ReportingView />}
          {view === 'crm' && <CrmView />}
          {view === 'leads' && <LeadsView />}
          {view === 'estimates' && <EstimatesView />}
@@ -56,6 +59,7 @@ export function AppShell() {
          {view === 'finance' && <FinanceView />}
          {view === 'audit' && <AuditView />}
          {view === 'settings' && <SettingsView />}
+          {view === 'setup' && <SetupWizardView />}
        </main>
        <Footer />
      </div>
@@ -18,6 +18,8 @@ import {
  Wallet,
  FileText,
  LifeBuoy,
+  BarChart3,
+  Rocket,
 } from 'lucide-react'
 import { useAos, type ViewId } from '@/store/aos'
 import {
@@ -33,6 +35,7 @@ import { toast } from 'sonner'

 const VIEWS: { id: ViewId; label: string; icon: typeof LayoutDashboard; hint: string }[] = [
  { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, hint: 'Übersicht & KPIs' },
+  { id: 'reporting', label: 'Reporting', icon: BarChart3, hint: 'Pipeline, Auslastung, MRR' },
  { id: 'crm', label: 'CRM', icon: Users, hint: 'Firmen & Pipeline' },
  { id: 'leads', label: 'Leads Finder', icon: Radar, hint: 'Review-Queue' },
  { id: 'estimates', label: 'Angebote', icon: FileText, hint: 'Quotes & Conversion' },
@@ -44,6 +47,7 @@ const VIEWS: { id: ViewId; label: string; icon: typeof LayoutDashboard; hint: st
  { id: 'finance', label: 'Finanzen', icon: Receipt, hint: 'Rechnungen & E-Rechnung' },
  { id: 'audit', label: 'Audit-Protokoll', icon: ScrollText, hint: 'Hash-Kette & GoBD' },
  { id: 'settings', label: 'Erweiterungen', icon: Settings2, hint: 'Module & Compliance' },
+  { id: 'setup', label: 'Setup-Wizard', icon: Rocket, hint: '≤ 15 Min Installation' },
 ]

 interface SearchResult {
@@ -16,6 +16,8 @@ import {
  Wallet,
  FileText,
  LifeBuoy,
+  BarChart3,
+  Rocket,
 } from 'lucide-react'
 import { useAos, type ViewId } from '@/store/aos'
 import { cn } from '@/lib/utils'
@@ -28,7 +30,10 @@ const NAV: {
 }[] = [
  {
    group: 'Übersicht',
-    items: [{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, permission: '*' }],
+    items: [
+      { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, permission: '*' },
+      { id: 'reporting', label: 'Reporting', icon: BarChart3, permission: '*' },
+    ],
  },
  {
    group: 'Vertrieb',
@@ -57,7 +62,10 @@ const NAV: {
  },
  {
    group: 'System',
-    items: [{ id: 'settings', label: 'Erweiterungen', icon: Settings2, permission: 'admin' }],
+    items: [
+      { id: 'settings', label: 'Erweiterungen', icon: Settings2, permission: 'admin' },
+      { id: 'setup', label: 'Setup-Wizard', icon: Rocket, permission: 'admin' },
+    ],
  },
 ]

@@ -17,6 +17,7 @@ import {

 const TITLES: Record<ViewId, { title: string; crumb: string }> = {
  dashboard: { title: 'Dashboard', crumb: 'Übersicht' },
+  reporting: { title: 'Reporting', crumb: 'Übersicht / Reporting' },
  crm: { title: 'CRM', crumb: 'Vertrieb / CRM' },
  leads: { title: 'Leads Finder', crumb: 'Vertrieb / Leads' },
  estimates: { title: 'Angebote', crumb: 'Vertrieb / Angebote' },
@@ -28,6 +29,7 @@ const TITLES: Record<ViewId, { title: string; crumb: string }> = {
  finance: { title: 'Finanzen', crumb: 'Betrieb / Finanzen' },
  audit: { title: 'Audit-Protokoll', crumb: 'Betrieb / Audit' },
  settings: { title: 'Erweiterungen', crumb: 'System / Module' },
+  setup: { title: 'Setup-Wizard', crumb: 'System / Setup' },
 }

 export function TopBar() {
@@ -0,0 +1,397 @@
+'use client'
+
+import {
+  BarChart3,
+  TrendingUp,
+  Users,
+  Repeat,
+  Activity,
+  CalendarClock,
+  ArrowRight,
+} from 'lucide-react'
+import { useFetch } from '@/hooks/use-fetch'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { PageHeader } from '../primitives'
+import { formatEuro, formatEuroCompact, formatDate } from '@/lib/format'
+import { useAos } from '@/store/aos'
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  Cell,
+  Line,
+  LineChart,
+  CartesianGrid,
+  Area,
+  AreaChart,
+} from 'recharts'
+
+interface ReportingData {
+  pipeline: {
+    stages: { stage: string; label: string; count: number; valueCents: number }[]
+    pipelineValue: number
+    wonValue: number
+    lostValue: number
+    conversionRate: number
+    avgDealSizeCents: number
+  }
+  utilization: {
+    byProject: { label: string; totalHours: number; billableHours: number; utilizationPct: number }[]
+    weekly: { label: string; hours: number }[]
+  }
+  recurring: {
+    mrr: number
+    arr: number
+    recurringContractsMrr: number
+    rebillMrr: number
+    recurringExpensesMrr: number
+    renewalsDue: { name: string; type: string; renewalDate: string; daysUntil: number }[]
+    activeLicenses: number
+  }
+  revenue: { label: string; cents: number }[]
+  activity: { group: string; count: number }[]
+  estimateWinRate: number
+}
+
+export function ReportingView() {
+  const { data, loading } = useFetch<ReportingData>('/api/aos/reporting')
+  const setView = useAos((s) => s.setView)
+
+  if (loading || !data) {
+    return (
+      <div className="space-y-6 p-4 md:p-6">
+        <Skeleton className="h-9 w-32" />
+        <Skeleton className="h-64" />
+      </div>
+    )
+  }
+
+  const { pipeline, utilization, recurring, revenue, activity } = data
+  const maxStageValue = Math.max(...pipeline.stages.map((s) => s.valueCents), 1)
+  const maxHours = Math.max(...utilization.weekly.map((w) => w.hours), 1)
+  const maxRev = Math.max(...revenue.map((r) => r.cents), 1)
+
+  return (
+    <div className="space-y-6 p-4 md:p-6">
+      <PageHeader
+        title="Reporting"
+        description="Cross-module Dashboards: Pipeline, Auslastung, wiederkehrende Umsätze (MRR/ARR), Aktivität. Datengetrieben, keine manuelle Zusammenstellung."
+      />
+
+      {/* KPI summary */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">Offene Pipeline</p>
+            <TrendingUp className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{formatEuroCompact(pipeline.pipelineValue)}</p>
+          <p className="text-[10px] text-muted-foreground">Conversion: {pipeline.conversionRate}%</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">MRR</p>
+            <Repeat className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{formatEuroCompact(recurring.mrr)}</p>
+          <p className="text-[10px] text-muted-foreground">ARR: {formatEuroCompact(recurring.arr)}</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">Ø Deal-Größe</p>
+            <BarChart3 className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{formatEuroCompact(pipeline.avgDealSizeCents)}</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">Angebot-Win-Rate</p>
+            <ArrowRight className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{data.estimateWinRate}<span className="text-sm text-muted-foreground">%</span></p>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="pipeline">
+        <TabsList>
+          <TabsTrigger value="pipeline">Pipeline</TabsTrigger>
+          <TabsTrigger value="utilization">Auslastung</TabsTrigger>
+          <TabsTrigger value="recurring">MRR & Erneuerungen</TabsTrigger>
+          <TabsTrigger value="activity">Aktivität</TabsTrigger>
+        </TabsList>
+
+        {/* Pipeline tab */}
+        <TabsContent value="pipeline" className="mt-4 space-y-4">
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+            <Card className="lg:col-span-2">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">Pipeline nach Phase</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2.5">
+                  {pipeline.stages.filter((s) => s.stage !== 'lost').map((s) => (
+                    <div key={s.stage}>
+                      <div className="mb-1 flex items-center justify-between text-xs">
+                        <span className="font-medium">{s.label}</span>
+                        <span className="text-muted-foreground">{s.count} Deals · {formatEuroCompact(s.valueCents)}</span>
+                      </div>
+                      <div className="h-2.5 w-full overflow-hidden rounded bg-muted">
+                        <div className="h-full rounded bg-foreground transition-all duration-500" style={{ width: `${(s.valueCents / maxStageValue) * 100}%` }} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">Umsatz (6 Monate, bezahlt)</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={200}>
+                  <AreaChart data={revenue} margin={{ top: 4, right: 4, bottom: 0, left: -20 }}>
+                    <defs>
+                      <linearGradient id="revGrad" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor="var(--foreground)" stopOpacity={0.3} />
+                        <stop offset="100%" stopColor="var(--foreground)" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <XAxis dataKey="label" tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} />
+                    <YAxis tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} tickFormatter={(v) => formatEuroCompact(v).replace(' €', '')} width={50} />
+                    <Tooltip
+                      contentStyle={{ background: 'var(--popover)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', fontSize: 12 }}
+                      formatter={(v: number) => [formatEuro(v), 'Umsatz']}
+                    />
+                    <Area type="monotone" dataKey="cents" stroke="var(--foreground)" strokeWidth={2} fill="url(#revGrad)" />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <Card className="p-4">
+              <p className="text-xs text-muted-foreground">Gewonnen (YTD)</p>
+              <p className="mt-1 text-xl font-semibold tabular-nums">{formatEuro(pipeline.wonValue)}</p>
+            </Card>
+            <Card className="p-4">
+              <p className="text-xs text-muted-foreground">Verloren</p>
+              <p className="mt-1 text-xl font-semibold tabular-nums text-muted-foreground">{formatEuro(pipeline.lostValue)}</p>
+            </Card>
+            <Card className="p-4">
+              <p className="text-xs text-muted-foreground">Conversion-Rate</p>
+              <p className="mt-1 text-xl font-semibold tabular-nums">{pipeline.conversionRate}%</p>
+            </Card>
+          </div>
+        </TabsContent>
+
+        {/* Utilization tab */}
+        <TabsContent value="utilization" className="mt-4 space-y-4">
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm">
+                  <Users className="size-3.5 text-muted-foreground" />
+                  Auslastung nach Projekt
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2.5">
+                  {utilization.byProject.map((u) => (
+                    <div key={u.label}>
+                      <div className="mb-1 flex items-center justify-between text-xs">
+                        <span className="truncate font-medium">{u.label}</span>
+                        <span className="tabular-nums text-muted-foreground">{u.billableHours}/{u.totalHours} h · {u.utilizationPct}%</span>
+                      </div>
+                      <div className="h-2 w-full overflow-hidden rounded bg-muted">
+                        <div className="h-full rounded bg-foreground" style={{ width: `${u.utilizationPct}%` }} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">Wöchentliche Stunden (12 Wochen)</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={200}>
+                  <BarChart data={utilization.weekly} margin={{ top: 4, right: 4, bottom: 0, left: -20 }}>
+                    <XAxis dataKey="label" tick={{ fontSize: 10, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} />
+                    <YAxis tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} width={40} />
+                    <Tooltip
+                      cursor={{ fill: 'var(--muted)', opacity: 0.4 }}
+                      contentStyle={{ background: 'var(--popover)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', fontSize: 12 }}
+                      formatter={(v: number) => [`${v} h`, 'Stunden']}
+                    />
+                    <Bar dataKey="hours" radius={[3, 3, 0, 0]}>
+                      {utilization.weekly.map((_, i) => (
+                        <Cell key={i} fill="var(--foreground)" fillOpacity={0.35 + (i / utilization.weekly.length) * 0.65} />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        {/* MRR & Renewals tab */}
+        <TabsContent value="recurring" className="mt-4 space-y-4">
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">MRR-Zusammensetzung</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <MrrRow label="Wartungs-/Dienstverträge" cents={recurring.recurringContractsMrr} total={recurring.mrr} />
+                  <MrrRow label="Weiterbelastete Assets (+Markup)" cents={recurring.rebillMrr} total={recurring.mrr} />
+                  <MrrRow label="Wiederkehrende Ausgaben" cents={recurring.recurringExpensesMrr} total={recurring.mrr} negative />
+                </div>
+                <div className="mt-3 border-t border-border pt-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-semibold">MRR gesamt</span>
+                    <span className="text-lg font-semibold tabular-nums">{formatEuro(recurring.mrr)}</span>
+                  </div>
+                  <div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
+                    <span>ARR (×12)</span>
+                    <span className="tabular-nums">{formatEuro(recurring.arr)}</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm">
+                  <CalendarClock className="size-3.5 text-muted-foreground" />
+                  Erneuerungen (60 Tage)
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2 max-h-56 overflow-y-auto [scrollbar-width:thin]">
+                  {recurring.renewalsDue.length === 0 && (
+                    <p className="py-6 text-center text-xs text-muted-foreground">Keine anstehenden Erneuerungen.</p>
+                  )}
+                  {recurring.renewalsDue.map((r, i) => (
+                    <div key={i} className="flex items-center justify-between rounded-md border border-border p-2 text-xs">
+                      <div className="min-w-0">
+                        <p className="truncate font-medium">{r.name}</p>
+                        <p className="text-[10px] text-muted-foreground">{r.type} · {formatDate(r.renewalDate)}</p>
+                      </div>
+                      <Badge variant="outline" className={r.daysUntil < 7 ? 'border-foreground/50' : ''}>
+                        {r.daysUntil < 0 ? `${Math.abs(r.daysUntil)} d drüber` : `${r.daysUntil} d`}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+            <Card className="p-4">
+              <p className="text-xs text-muted-foreground">Aktive Lizenzen</p>
+              <p className="mt-1 text-xl font-semibold tabular-nums">{recurring.activeLicenses}</p>
+            </Card>
+            <Card className="p-4">
+              <p className="text-xs text-muted-foreground">Erneuerungen ≤ 60 d</p>
+              <p className="mt-1 text-xl font-semibold tabular-nums">{recurring.renewalsDue.length}</p>
+            </Card>
+            <Card className="p-4">
+              <p className="text-xs text-muted-foreground">MRR</p>
+              <p className="mt-1 text-xl font-semibold tabular-nums">{formatEuroCompact(recurring.mrr)}</p>
+            </Card>
+            <Card className="p-4">
+              <p className="text-xs text-muted-foreground">ARR</p>
+              <p className="mt-1 text-xl font-semibold tabular-nums">{formatEuroCompact(recurring.arr)}</p>
+            </Card>
+          </div>
+        </TabsContent>
+
+        {/* Activity tab */}
+        <TabsContent value="activity" className="mt-4 space-y-4">
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm">
+                  <Activity className="size-3.5 text-muted-foreground" />
+                  Aktivität nach Aktionsgruppe (30 Tage)
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={220}>
+                  <BarChart data={activity} layout="vertical" margin={{ top: 4, right: 16, bottom: 0, left: 20 }}>
+                    <XAxis type="number" tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} />
+                    <YAxis type="category" dataKey="group" tick={{ fontSize: 10, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} width={100} />
+                    <Tooltip
+                      cursor={{ fill: 'var(--muted)', opacity: 0.4 }}
+                      contentStyle={{ background: 'var(--popover)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', fontSize: 12 }}
+                      formatter={(v: number) => [`${v} Ereignisse`, 'Anzahl']}
+                    />
+                    <Bar dataKey="count" radius={[0, 3, 3, 0]}>
+                      {activity.map((_, i) => (
+                        <Cell key={i} fill="var(--foreground)" fillOpacity={0.4 + (i / Math.max(activity.length, 1)) * 0.6} />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">Umsatz- & Aktivitätstrend</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={220}>
+                  <LineChart data={revenue} margin={{ top: 4, right: 4, bottom: 0, left: -20 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
+                    <XAxis dataKey="label" tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} />
+                    <YAxis tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} axisLine={false} tickLine={false} tickFormatter={(v) => formatEuroCompact(v).replace(' €', '')} width={50} />
+                    <Tooltip
+                      contentStyle={{ background: 'var(--popover)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', fontSize: 12 }}
+                      formatter={(v: number) => [formatEuro(v), 'Bezahlt']}
+                    />
+                    <Line type="monotone" dataKey="cents" stroke="var(--foreground)" strokeWidth={2} dot={{ fill: 'var(--foreground)', r: 3 }} />
+                  </LineChart>
+                </ResponsiveContainer>
+                <Button variant="ghost" size="sm" className="mt-2 h-7 text-xs" onClick={() => setView('audit')}>
+                  Vollständiges Audit-Protokoll →
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function MrrRow({ label, cents, total, negative }: { label: string; cents: number; total: number; negative?: boolean }) {
+  const pct = total > 0 ? Math.round((cents / total) * 100) : 0
+  return (
+    <div>
+      <div className="mb-1 flex items-center justify-between text-xs">
+        <span className="text-muted-foreground">{label}</span>
+        <span className={`tabular-nums ${negative ? 'text-muted-foreground' : ''}`}>
+          {negative ? '−' : ''}{formatEuro(cents)}
+        </span>
+      </div>
+      <div className="h-1.5 w-full overflow-hidden rounded bg-muted">
+        <div className={`h-full rounded ${negative ? 'bg-muted-foreground/40' : 'bg-foreground'}`} style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,444 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Rocket,
+  UserPlus,
+  Building2,
+  Boxes,
+  Mail,
+  Sparkles,
+  Database,
+  ShieldCheck,
+  Check,
+  ChevronRight,
+  ChevronLeft,
+  Loader2,
+  TestTube,
+  Lock,
+} from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { PageHeader } from '../primitives'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+const STEPS = [
+  { id: 1, label: 'Admin-Konto', icon: UserPlus, desc: 'Passkey + Instanz-URL' },
+  { id: 2, label: 'Firmendaten', icon: Building2, desc: 'Rechtsform, USt-IdNr., Bank' },
+  { id: 3, label: 'Module', icon: Boxes, desc: 'Auswahl & Abhängigkeiten' },
+  { id: 4, label: 'E-Mail', icon: Mail, desc: 'SMTP / IMAP Test' },
+  { id: 5, label: 'Integrationen', icon: Sparkles, desc: 'AI, Jina, Search' },
+  { id: 6, label: 'Seed-Daten', icon: Database, desc: 'Pipelines, Vorlagen, Sätze' },
+  { id: 7, label: 'Backup & Key', icon: ShieldCheck, desc: 'Verschlüsselung + Escrow' },
+]
+
+const MODULE_OPTIONS = [
+  { id: 'crm', label: 'CRM', desc: 'Firmen, Deals, Pipeline', required: true },
+  { id: 'leads', label: 'Leads Finder', desc: 'Evidenzbasierte Audits + AI', recommended: true },
+  { id: 'projects', label: 'Projekte', desc: 'Aufgaben, Zeit, Budgets', recommended: true },
+  { id: 'licenses', label: 'Lizenzen', desc: 'Ausgestellt + Erneuerungen' },
+  { id: 'contracts', label: 'Verträge', desc: 'Werkvertrag, AVV, NDA' },
+  { id: 'expenses', label: 'Ausgaben', desc: 'Belastbar, DATEV' },
+  { id: 'estimates', label: 'Angebote', desc: 'Quotes → Projekt → Rechnung' },
+  { id: 'support', label: 'Support', desc: 'Tickets + AI-Summary' },
+  { id: 'finance', label: 'Finanzen', desc: 'Rechnungen, E-Rechnung' },
+]
+
+export function SetupWizardView() {
+  const [step, setStep] = useState(1)
+  const [completed, setCompleted] = useState<Set<number>>(new Set())
+  const [mailTesting, setMailTesting] = useState(false)
+  const [mailResult, setMailResult] = useState<{ smtp: { ok: boolean; message: string }; imap: { ok: boolean; message: string } } | null>(null)
+  const [modules, setModules] = useState<Record<string, boolean>>({
+    crm: true, leads: true, projects: true, licenses: true, contracts: true, expenses: true, estimates: true, support: true, finance: true,
+  })
+  const [aiEnabled, setAiEnabled] = useState(true)
+  const [escrowConfirmed, setEscrowConfirmed] = useState(false)
+  const [done, setDone] = useState(false)
+
+  const next = () => {
+    setCompleted((s) => new Set(s).add(step))
+    if (step < 7) setStep(step + 1)
+    else setDone(true)
+  }
+  const back = () => step > 1 && setStep(step - 1)
+
+  const testMail = async () => {
+    setMailTesting(true)
+    const t = toast.loading('SMTP/IMAP-Verbindung wird getestet…')
+    try {
+      const r = await fetch('/api/aos/setup/test-mail', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ smtpHost: 'smtp.nordlicht.digital', smtpPort: 587, imapHost: 'imap.nordlicht.digital', imapPort: 993, user: 'mail@nordlicht.digital' }),
+      })
+      if (!r.ok) throw new Error('test failed')
+      const data = await r.json()
+      setMailResult(data)
+      toast.success('Verbindungstest abgeschlossen', { id: t })
+    } catch {
+      toast.error('Test fehlgeschlagen', { id: t })
+    } finally {
+      setMailTesting(false)
+    }
+  }
+
+  if (done) {
+    return (
+      <div className="space-y-6 p-4 md:p-6">
+        <PageHeader title="Setup-Wizard" description="Installation abgeschlossen." />
+        <Card className="mx-auto max-w-2xl">
+          <CardContent className="flex flex-col items-center gap-4 p-10 text-center">
+            <div className="flex size-16 items-center justify-center rounded-full bg-foreground text-background">
+              <Check className="size-8" />
+            </div>
+            <div className="space-y-1">
+              <h2 className="text-xl font-semibold">AOS ist bereit</h2>
+              <p className="text-sm text-muted-foreground">
+                Installation in unter 15 Minuten abgeschlossen. Alle Module aktiviert, E-Mail verbunden, Backup konfiguriert.
+              </p>
+            </div>
+            <div className="grid w-full grid-cols-2 gap-3 text-left">
+              <SummaryRow label="Module aktiviert" value={`${Object.values(modules).filter(Boolean).length} / ${MODULE_OPTIONS.length}`} />
+              <SummaryRow label="E-Mail" value={mailResult ? 'Verbunden' : 'Übersprungen'} />
+              <SummaryRow label="AI-Schicht" value={aiEnabled ? 'Aktiv' : 'Deaktiviert'} />
+              <SummaryRow label="Verschlüsselung" value="AES-256-GCM" />
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => { setDone(false); setStep(1); setCompleted(new Set()) }}>
+                Wiederholen
+              </Button>
+              <Button>Zum Dashboard</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6 p-4 md:p-6">
+      <PageHeader
+        title="Setup-Wizard"
+        description="„Next, next, done“ — AOS in unter 15 Minuten installiert. Jeder Schritt wird gespeichert, bevor der nächste erscheint."
+      />
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
+        {/* Stepper */}
+        <Card className="lg:col-span-1">
+          <CardContent className="p-4">
+            <div className="space-y-1">
+              {STEPS.map((s) => {
+                const Icon = s.icon
+                const isActive = step === s.id
+                const isDone = completed.has(s.id)
+                return (
+                  <button
+                    key={s.id}
+                    onClick={() => setStep(s.id)}
+                    className={cn(
+                      'flex w-full items-center gap-3 rounded-md p-2 text-left transition',
+                      isActive ? 'bg-muted' : 'hover:bg-muted/50'
+                    )}
+                  >
+                    <div className={cn(
+                      'flex size-8 shrink-0 items-center justify-center rounded-md border',
+                      isDone ? 'border-foreground bg-foreground text-background' : isActive ? 'border-foreground/40' : 'border-border'
+                    )}>
+                      {isDone ? <Check className="size-4" /> : <Icon className="size-4" />}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className={cn('text-xs font-medium', isActive || isDone ? 'text-foreground' : 'text-muted-foreground')}>
+                        {s.id}. {s.label}
+                      </p>
+                      <p className="truncate text-[10px] text-muted-foreground">{s.desc}</p>
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+            <div className="mt-4 border-t border-border pt-3">
+              <div className="mb-1 flex items-center justify-between text-[10px] text-muted-foreground">
+                <span>Fortschritt</span>
+                <span>{completed.size}/7</span>
+              </div>
+              <div className="h-1.5 w-full overflow-hidden rounded bg-muted">
+                <div className="h-full rounded bg-foreground transition-all duration-500" style={{ width: `${(completed.size / 7) * 100}%` }} />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Step content */}
+        <Card className="lg:col-span-3">
+          <CardHeader className="border-b border-border pb-3">
+            <div className="flex items-center gap-2">
+              {(() => {
+                const Icon = STEPS[step - 1].icon
+                return <Icon className="size-5 text-muted-foreground" />
+              })()}
+              <div>
+                <CardTitle className="text-base">Schritt {step}: {STEPS[step - 1].label}</CardTitle>
+                <p className="mt-0.5 text-xs text-muted-foreground">{STEPS[step - 1].desc}</p>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4 p-6">
+            {step === 1 && (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <Field label="Name" placeholder="Max Brandt" defaultValue="Max Brandt" />
+                  <Field label="E-Mail" placeholder="max@agentur.de" defaultValue="max@nordlicht.digital" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs">Instanz-URL</Label>
+                  <Input defaultValue="https://aos.nordlicht.digital" className="text-sm" />
+                  <p className="text-[10px] text-muted-foreground">Wird für E-Mail-Links, Webhooks und das Client-Portal verwendet.</p>
+                </div>
+                <div className="rounded-md border border-border bg-muted/20 p-3">
+                  <div className="flex items-center gap-2">
+                    <Lock className="size-4 text-muted-foreground" />
+                    <span className="text-xs font-medium">Passkey-Authentifizierung</span>
+                    <Badge variant="outline" className="ml-auto text-[10px]">Empfohlen</Badge>
+                  </div>
+                  <p className="mt-1 text-[11px] text-muted-foreground">Better Auth mit Passkeys + Passwort-Fallback. Sessions, Rate-Limits, TOTP optional.</p>
+                  <Button size="sm" variant="outline" className="mt-2 h-7 gap-1.5 text-xs">
+                    <UserPlus className="size-3.5" />Passkey registrieren
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {step === 2 && (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <Field label="Firmenname" defaultValue="Nordlicht Digital GmbH" />
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Rechtsform</Label>
+                    <select className="h-9 w-full rounded border border-input bg-background px-3 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring">
+                      <option>GmbH</option><option>UG (haftungsbeschränkt)</option><option>AG</option><option>e.K.</option><option>GbR</option><option>Einzelunternehmen</option>
+                    </select>
+                  </div>
+                  <Field label="USt-IdNr." defaultValue="DE284617302" mono />
+                  <Field label="Registergericht" defaultValue="Amtsgericht Hamburg" />
+                  <Field label="HRB-Nummer" defaultValue="HRB 142887" mono />
+                  <Field label="Sitz" defaultValue="Hamburg" />
+                </div>
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <Field label="IBAN" defaultValue="DE89 3704 0044 0532 0130 00" mono />
+                  <Field label="BIC" defaultValue="COBADEFFXXX" mono />
+                </div>
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+                  <Field label="Rechnungspräfix" defaultValue="RE" mono />
+                  <Field label="Steuersatz (Standard)" defaultValue="19%" />
+                  <Field label="Steuersatz (ermäßigt)" defaultValue="7%" />
+                </div>
+              </div>
+            )}
+
+            {step === 3 && (
+              <div className="space-y-3">
+                <p className="text-xs text-muted-foreground">
+                  Wähle die Module für diese Instanz. In v1 wird „Aktivieren“ via Rebuild ausgeführt (kein Hot-Plug).
+                </p>
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                  {MODULE_OPTIONS.map((m) => (
+                    <div key={m.id} className={cn('flex items-center gap-3 rounded-md border p-3', modules[m.id] ? 'border-foreground/30 bg-foreground/5' : 'border-border')}>
+                      <Switch
+                        checked={modules[m.id]}
+                        onCheckedChange={(v) => setModules((s) => ({ ...s, [m.id]: v }))}
+                        disabled={m.required}
+                      />
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-sm font-medium">{m.label}</span>
+                          {m.required && <Badge variant="outline" className="text-[9px]">Pflicht</Badge>}
+                          {m.recommended && <Badge variant="secondary" className="text-[9px]">Empfohlen</Badge>}
+                        </div>
+                        <p className="text-[11px] text-muted-foreground">{m.desc}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div className="rounded-md border border-dashed border-border p-3 text-[11px] text-muted-foreground">
+                  <p className="font-medium text-foreground">Abhängigkeiten</p>
+                  <p className="mt-1">CRM ist Basis für Leads, Angebote, Projekte, Lizenzen, Verträge, Ausgaben und Finanzen. Module können jederzeit in „Erweiterungen“ (in)aktiviert werden.</p>
+                </div>
+              </div>
+            )}
+
+            {step === 4 && (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <Field label="SMTP-Host" defaultValue="smtp.nordlicht.digital" />
+                  <Field label="SMTP-Port" defaultValue="587" mono />
+                  <Field label="IMAP-Host" defaultValue="imap.nordlicht.digital" />
+                  <Field label="IMAP-Port" defaultValue="993" mono />
+                  <Field label="Benutzer" defaultValue="mail@nordlicht.digital" />
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Passwort</Label>
+                    <Input type="password" placeholder="••••••••" className="text-sm" />
+                  </div>
+                </div>
+                <div className="rounded-md border border-border p-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium">Verbindung testen</span>
+                    <Button size="sm" variant="outline" className="h-7 gap-1.5 text-xs" onClick={testMail} disabled={mailTesting}>
+                      {mailTesting ? <Loader2 className="size-3.5 animate-spin" /> : <TestTube className="size-3.5" />}
+                      Test ausführen
+                    </Button>
+                  </div>
+                  {mailResult && (
+                    <div className="mt-2 space-y-1.5 text-[11px]">
+                      <div className="flex items-center gap-2">
+                        <span className={cn('size-1.5 rounded-full', mailResult.smtp.ok ? 'bg-foreground' : 'bg-muted-foreground/40')} />
+                        <span className="text-muted-foreground">SMTP:</span>
+                        <span>{mailResult.smtp.message}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className={cn('size-1.5 rounded-full', mailResult.imap.ok ? 'bg-foreground' : 'bg-muted-foreground/40')} />
+                        <span className="text-muted-foreground">IMAP:</span>
+                        <span>{mailResult.imap.message}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {step === 5 && (
+              <div className="space-y-3">
+                <p className="text-xs text-muted-foreground">
+                  AI ist optional und standardmäßig deaktiviert. Ohne API-Keys verlässt kein Datum den Server.
+                </p>
+                <div className="rounded-md border border-border p-3">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium">AI-Schicht aktivieren</p>
+                      <p className="text-[11px] text-muted-foreground">Lead-Erklärungen, Ticket-Summary, Antwort-Vorschläge</p>
+                    </div>
+                    <Switch checked={aiEnabled} onCheckedChange={setAiEnabled} />
+                  </div>
+                </div>
+                {aiEnabled && (
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <Field label="LLM Provider" defaultValue="z-ai-web-dev-sdk" />
+                    <Field label="Jina (OCR/Embeddings)" placeholder="API-Key (optional)" />
+                    <Field label="Search Provider" placeholder="SerpAPI / Tavily Key" />
+                    <Field label="Firecrawl" placeholder="API-Key (optional)" />
+                  </div>
+                )}
+                <div className="rounded-md border border-dashed border-border p-3 text-[11px] text-muted-foreground">
+                  <p className="font-medium text-foreground">Guardrails</p>
+                  <p className="mt-1">Strukturierte Outputs (Zod-validiert), AI schreibt nie in Finanz-Tabellen, jede Aktion wird mit Prompt-Hash protokolliert. Mensch bestätigt vor jedem Versand.</p>
+                </div>
+              </div>
+            )}
+
+            {step === 6 && (
+              <div className="space-y-3">
+                <p className="text-xs text-muted-foreground">
+                  Sensible deutsche Standardwerte: Pipeline-Stages, Aufgaben-Workflows, Stundensätze, Vorlagen.
+                </p>
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                  {[
+                    'Pipeline-Stages (Lead → Qualifiziert → Angebot → Verhandlung → Gewonnen/Verloren)',
+                    'Aufgaben-Workflows (Website, Shop, App, Retainer)',
+                    'Stundensätze (Junior 75€, Senior 95€, Lead 110€)',
+                    'E-Mail-Vorlagen (Angebot, Rechnung, Mahnung, Willkommen)',
+                    'Vertrags-Templates (Werkvertrag, AVV, NDA, SLA)',
+                    'Rechnungs-Vorlage (Typst, ZUGFeRD-konform)',
+                    'Launch-Checkliste (Impressum, Datenschutz, BFSG, Backups)',
+                    'Verlust-Gründe (Budget, Timing, Wettbewerb, Kein Bedarf)',
+                  ].map((item) => (
+                    <div key={item} className="flex items-start gap-2 rounded-md border border-border p-2">
+                      <Check className="mt-0.5 size-3.5 shrink-0 text-foreground" />
+                      <span className="text-[11px]">{item}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {step === 7 && (
+              <div className="space-y-4">
+                <div className="rounded-md border border-border p-3">
+                  <div className="flex items-center gap-2">
+                    <ShieldCheck className="size-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">Backup-Ziel</span>
+                  </div>
+                  <div className="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <Field label="Backup-Typ" defaultValue="S3-kompatibel" />
+                    <Field label="Intervall" defaultValue="Täglich 03:00" />
+                    <Field label="Aufbewahrung" defaultValue="30 Tage" />
+                    <Field label="Ziel" defaultValue="s3://backups.nordlicht/aos/" mono />
+                  </div>
+                </div>
+                <div className="rounded-md border border-foreground/30 bg-foreground/5 p-3">
+                  <div className="flex items-start gap-2">
+                    <Lock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                    <div className="flex-1">
+                      <p className="text-sm font-medium">ENCRYPTION_KEY Escrow bestätigen</p>
+                      <p className="mt-1 text-[11px] text-muted-foreground">
+                        Der Verschlüsselungs-Key (AES-256-GCM) sichert SMTP, API-Keys und Signier-Schlüssel. Er wird <span className="font-medium">separat vom DB-Backup</span> verwahrt. Ohne ihn sind Secrets unwiederherstellbar.
+                      </p>
+                      <label className="mt-2 flex items-center gap-2 text-xs">
+                        <input
+                          type="checkbox"
+                          checked={escrowConfirmed}
+                          onChange={(e) => setEscrowConfirmed(e.target.checked)}
+                          className="size-3.5 rounded border-border"
+                        />
+                        Ich habe den Key sicher gespeichert (Passwort-Manager / Offline-Medium).
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div className="rounded-md border border-dashed border-border p-3 text-[11px] text-muted-foreground">
+                  <p>Restore-Drill: Backup/Restore wird bei jedem Release geprüft. Empfehlung: ersten Restore-Test innerhalb von 7 Tagen.</p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+
+          {/* Footer nav */}
+          <div className="flex items-center justify-between border-t border-border p-4">
+            <Button variant="ghost" size="sm" onClick={back} disabled={step === 1} className="gap-1.5">
+              <ChevronLeft className="size-4" />Zurück
+            </Button>
+            <div className="flex items-center gap-2">
+              {completed.has(step) && <Badge variant="outline" className="gap-1 text-[10px]"><Check className="size-2.5" />Gespeichert</Badge>}
+              <Button size="sm" onClick={next} disabled={step === 7 && !escrowConfirmed} className="gap-1.5">
+                {step === 7 ? 'Abschließen' : 'Weiter & Speichern'}
+                {step === 7 ? <Check className="size-4" /> : <ChevronRight className="size-4" />}
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+function Field({ label, placeholder, defaultValue, mono }: { label: string; placeholder?: string; defaultValue?: string; mono?: boolean }) {
+  return (
+    <div className="space-y-1.5">
+      <Label className="text-xs">{label}</Label>
+      <Input placeholder={placeholder} defaultValue={defaultValue} className={cn('text-sm', mono && 'font-mono')} />
+    </div>
+  )
+}
+
+function SummaryRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-md border border-border p-2.5">
+      <p className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</p>
+      <p className="mt-0.5 text-sm font-medium">{value}</p>
+    </div>
+  )
+}