4146cf4f-64d9-48ee-a4ec-195ac8b92e10

src/components/aos/app-shell.tsx

@@ -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 { CalendarView } from './views/calendar'
 import { ReportingView } from './views/reporting'
 import { CrmView } from './views/crm'
 import { LeadsView } from './views/leads'
@@ -55,6 +56,7 @@ export function AppShell() {
         <TopBar />
         <main className="flex-1">
           {view === 'dashboard' && <DashboardView />}
+          {view === 'calendar' && <CalendarView />}
           {view === 'reporting' && <ReportingView />}
           {view === 'crm' && <CrmView />}
           {view === 'leads' && <LeadsView />}

src/components/aos/command-menu.tsx

@@ -24,6 +24,7 @@ import {
   Webhook,
   HelpCircle,
   SlidersHorizontal,
+  CalendarDays,
 } from 'lucide-react'
 import { useAos, type ViewId } from '@/store/aos'
 import {
@@ -39,6 +40,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: 'calendar', label: 'Fristen', icon: CalendarDays, hint: 'Kalender & Deadlines' },
   { 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' },

src/components/aos/sidebar-nav.tsx

@@ -23,6 +23,7 @@ import {
   ExternalLink,
   SlidersHorizontal,
   HelpCircle,
+  CalendarDays,
 } from 'lucide-react'
 import { useAos, type ViewId } from '@/store/aos'
 import { translate } from '@/lib/i18n'
@@ -38,6 +39,7 @@ const NAV: {
     group: 'nav.overview',
     items: [
       { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, permission: '*' },
+      { id: 'calendar', label: 'Fristen', icon: CalendarDays, permission: '*' },
       { id: 'reporting', label: 'Reporting', icon: BarChart3, permission: '*' },
     ],
   },

src/components/aos/top-bar.tsx

@@ -19,6 +19,7 @@ import {
 
 const TITLES: Record<ViewId, { title: string; crumb: string }> = {
   dashboard: { title: 'Dashboard', crumb: 'Übersicht' },
+  calendar: { title: 'Fristen', crumb: 'Übersicht / Fristen' },
   reporting: { title: 'Reporting', crumb: 'Übersicht / Reporting' },
   crm: { title: 'CRM', crumb: 'Vertrieb / CRM' },
   leads: { title: 'Leads Finder', crumb: 'Vertrieb / Leads' },

src/components/aos/views/calendar.tsx

@@ -0,0 +1,290 @@
+'use client'
+
+import { useState } from '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 { ScrollArea } from '@/components/ui/scroll-area'
+import { PageHeader } from '../primitives'
+import { useAos } from '@/store/aos'
+import { cn } from '@/lib/utils'
+import { formatDate, formatRelative } from '@/lib/format'
+import {
+  ChevronLeft,
+  ChevronRight,
+  CalendarDays,
+  AlertTriangle,
+  Clock,
+  CheckCircle2,
+  Landmark,
+  FileSignature,
+  KeyRound,
+  FolderKanban,
+  Receipt,
+  LifeBuoy,
+  CheckCircle,
+} from 'lucide-react'
+
+interface Deadline {
+  id: string
+  date: string
+  module: string
+  type: string
+  title: string
+  detail: string
+  urgency: 'past' | 'today' | 'soon' | 'future'
+  daysUntil: number
+}
+interface CalendarDay {
+  date: string
+  isCurrentMonth: boolean
+  deadlines: Deadline[]
+}
+interface CalendarData {
+  month: string
+  monthLabel: string
+  weeks: CalendarDay[][] // fixed typo
+  upcoming: Deadline[]
+  overdue: Deadline[]
+  stats: { total: number; overdue: number; today: number; thisWeek: number; byModule: Record<string, number> }
+  modules: string[]
+}
+
+const MODULE_META: Record<string, { label: string; icon: typeof Landmark; view: string }> = {
+  accounting: { label: 'Buchhaltung', icon: Landmark, view: 'accounting' },
+  contracts: { label: 'Verträge', icon: FileSignature, view: 'contracts' },
+  licenses: { label: 'Lizenzen', icon: KeyRound, view: 'licenses' },
+  projects: { label: 'Projekte', icon: FolderKanban, view: 'projects' },
+  finance: { label: 'Finanzen', icon: Receipt, view: 'finance' },
+  support: { label: 'Support', icon: LifeBuoy, view: 'support' },
+  portal: { label: 'Portal', icon: CheckCircle, view: 'dashboard' },
+}
+
+const URGENCY_META: Record<string, { label: string; cls: string; dot: string }> = {
+  past: { label: 'Überfällig', cls: 'border-foreground/60 bg-foreground/5', dot: 'bg-foreground' },
+  today: { label: 'Heute', cls: 'border-foreground/60 bg-foreground/10', dot: 'bg-foreground' },
+  soon: { label: 'Bald', cls: 'border-foreground/40 bg-foreground/5', dot: 'bg-foreground/70' },
+  future: { label: 'Geplant', cls: 'border-border', dot: 'bg-muted-foreground/50' },
+}
+
+const WEEKDAYS = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
+
+export function CalendarView() {
+  const now = new Date()
+  const [monthParam, setMonthParam] = useState(`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`)
+  const { data, loading } = useFetch<CalendarData>(`/api/aos/calendar?month=${monthParam}`)
+  const setView = useAos((s) => s.setView)
+
+  const navigateMonth = (delta: number) => {
+    const [y, m] = monthParam.split('-').map(Number)
+    const d = new Date(y, m - 1 + delta, 1)
+    setMonthParam(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`)
+  }
+
+  const today = new Date()
+  const isToday = (dateStr: string) => {
+    const d = new Date(dateStr)
+    return d.getDate() === today.getDate() && d.getMonth() === today.getMonth() && d.getFullYear() === today.getFullYear()
+  }
+
+  if (loading || !data) {
+    return (
+      <div className="space-y-6 p-4 md:p-6">
+        <Skeleton className="h-9 w-32" />
+        <Skeleton className="h-96" />
+      </div>
+    )
+  }
+
+  const { weeks, upcoming, overdue, stats, monthLabel } = data
+
+  return (
+    <div className="space-y-6 p-4 md:p-6">
+      <PageHeader
+        title="Fristen"
+        description="Einheitliche Kalender-Ansicht aller Deadlines: USt-Voranmeldungen, Vertrags-/Lizenzablauf, Projekt-Deadlines, Rechnungs-Fälligkeiten, Ticket-SLAs."
+      />
+
+      {/* KPIs */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
+        <Card className="p-4">
+          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Überfällig</p><AlertTriangle className="size-3.5 text-muted-foreground" /></div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.overdue}</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Heute</p><Clock className="size-3.5 text-muted-foreground" /></div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.today}</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Diese Woche</p><CalendarDays className="size-3.5 text-muted-foreground" /></div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.thisWeek}</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Gesamt</p><CheckCircle2 className="size-3.5 text-muted-foreground" /></div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.total}</p>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        {/* Calendar grid */}
+        <Card className="lg:col-span-2">
+          <CardHeader className="flex flex-row items-center justify-between pb-3">
+            <CardTitle className="text-base">{monthLabel}</CardTitle>
+            <div className="flex items-center gap-1">
+              <Button variant="ghost" size="icon" className="size-8" onClick={() => navigateMonth(-1)}>
+                <ChevronLeft className="size-4" />
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 text-xs" onClick={() => setMonthParam(`${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`)}>
+                Heute
+              </Button>
+              <Button variant="ghost" size="icon" className="size-8" onClick={() => navigateMonth(1)}>
+                <ChevronRight className="size-4" />
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="p-0">
+            {/* Weekday header */}
+            <div className="grid grid-cols-7 border-y border-border bg-muted/30">
+              {WEEKDAYS.map((d) => (
+                <div key={d} className="px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{d}</div>
+              ))}
+            </div>
+            {/* Calendar grid */}
+            <div className="grid grid-cols-7">
+              {weeks.flat().map((day, i) => {
+                const dayDate = new Date(day.date)
+                const isTodayCell = isToday(day.date)
+                return (
+                  <div
+                    key={i}
+                    className={cn(
+                      'min-h-[80px] border-b border-r border-border p-1',
+                      !day.isCurrentMonth && 'bg-muted/20',
+                      (i + 1) % 7 === 0 && 'border-r-0'
+                    )}
+                  >
+                    <div className={cn(
+                      'mb-1 flex h-5 w-5 items-center justify-center rounded text-[10px] font-medium',
+                      isTodayCell ? 'bg-foreground text-background' : day.isCurrentMonth ? 'text-foreground' : 'text-muted-foreground/50'
+                    )}>
+                      {dayDate.getDate()}
+                    </div>
+                    <div className="space-y-0.5">
+                      {day.deadlines.slice(0, 3).map((dl) => {
+                        const meta = MODULE_META[dl.module] ?? { label: dl.module, icon: Clock, view: 'dashboard' }
+                        const Icon = meta.icon
+                        const urg = URGENCY_META[dl.urgency]
+                        return (
+                          <button
+                            key={dl.id}
+                            onClick={() => setView(meta.view as typeof setView extends (v: infer V) => void ? V : never)}
+                            className={cn('flex w-full items-center gap-1 rounded px-1 py-0.5 text-left transition hover:bg-muted', urg.cls)}
+                            title={dl.title}
+                          >
+                            <Icon className="size-2.5 shrink-0 text-muted-foreground" />
+                            <span className="truncate text-[9px] leading-tight">{dl.title}</span>
+                          </button>
+                        )
+                      })}
+                      {day.deadlines.length > 3 && (
+                        <p className="px-1 text-[9px] text-muted-foreground">+{day.deadlines.length - 3} weitere</p>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Upcoming + Overdue list */}
+        <div className="space-y-4">
+          {/* Overdue */}
+          {overdue.length > 0 && (
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm">
+                  <AlertTriangle className="size-3.5 text-foreground" />
+                  Überfällig ({overdue.length})
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-1.5">
+                <ScrollArea className="max-h-48">
+                  {overdue.map((d) => <DeadlineItem key={d.id} d={d} onClick={() => setView((MODULE_META[d.module]?.view ?? 'dashboard') as never)} />)}
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Upcoming */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-sm">
+                <Clock className="size-3.5 text-muted-foreground" />
+                Anstehend ({upcoming.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-1.5">
+              <ScrollArea className="max-h-96">
+                {upcoming.length === 0 && <p className="py-4 text-center text-xs text-muted-foreground">Keine anstehenden Fristen.</p>}
+                {upcoming.map((d) => <DeadlineItem key={d.id} d={d} onClick={() => setView((MODULE_META[d.module]?.view ?? 'dashboard') as never)} />)}
+              </ScrollArea>
+            </CardContent>
+          </Card>
+
+          {/* By module */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">Verteilung nach Modul</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-1.5">
+              {Object.entries(stats.byModule).map(([mod, count]) => {
+                const meta = MODULE_META[mod] ?? { label: mod, icon: Clock, view: 'dashboard' }
+                const Icon = meta.icon
+                return (
+                  <div key={mod} className="flex items-center gap-2 text-xs">
+                    <Icon className="size-3 text-muted-foreground" />
+                    <span className="flex-1">{meta.label}</span>
+                    <Badge variant="outline" className="text-[10px]">{count}</Badge>
+                  </div>
+                )
+              })}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DeadlineItem({ d, onClick }: { d: Deadline; onClick: () => void }) {
+  const meta = MODULE_META[d.module] ?? { label: d.module, icon: Clock, view: 'dashboard' }
+  const Icon = meta.icon
+  const urg = URGENCY_META[d.urgency]
+  return (
+    <button
+      onClick={onClick}
+      className={cn('flex w-full items-start gap-2 rounded-md border p-2 text-left transition hover:bg-muted/50', urg.cls)}
+    >
+      <Icon className="mt-0.5 size-3 shrink-0 text-muted-foreground" />
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-[11px] font-medium">{d.title}</p>
+        <p className="truncate text-[10px] text-muted-foreground">{d.detail}</p>
+        <div className="mt-0.5 flex items-center gap-1.5 text-[9px] text-muted-foreground">
+          <span className="flex items-center gap-0.5">
+            <span className={cn('size-1 rounded-full', urg.dot)} />
+            {d.type}
+          </span>
+          <span>·</span>
+          <span>{formatDate(d.date)}</span>
+          <span>·</span>
+          <span className={cn(d.daysUntil < 0 && 'text-foreground font-medium')}>
+            {d.daysUntil === 0 ? 'heute' : d.daysUntil < 0 ? `${Math.abs(d.daysUntil)} d drüber` : `in ${d.daysUntil} d`}
+          </span>
+        </div>
+      </div>
+    </button>
+  )
+}