cfbb20c1-e953-4788-abed-5c8308f329ee

This commit is contained in:
Z User committed 2026-10-26 19:36:03 +00:00
1 parent be34f88822
commit 9feb124da6
18 files changed
+998 -4

No files matched your search

@@ -0,0 +1,75 @@
import { NextResponse } from 'next/server'
import { db } from '@/lib/db'
import { createHash } from 'crypto'
export const dynamic = 'force-dynamic'
// Extract the real client IP from the request (behind Caddy/proxy)
function getClientIp(req: Request): string {
const headers = new Headers(req.headers)
const xff = headers.get('x-forwarded-for')
if (xff) return xff.split(',')[0]!.trim()
const realIp = headers.get('x-real-ip')
if (realIp) return realIp
return 'unbekannt'
}
// PATCH /api/aos/portal/approvals/[id]/decide
// Client decides on a milestone approval (approve / reject / changes-requested).
// Records REAL IP + timestamp + content hash (PRD §6.3: "approvals with
// timestamp and IP evidence"). Writes an audit entry.
export async function PATCH(
req: Request,
{ params }: { params: Promise<{ id: string }> }
) {
const { id } = await params
const body = (await req.json()) as { decision: string; decidedBy?: string; feedback?: string }
if (!['approved', 'rejected', 'changes-requested'].includes(body.decision)) {
return NextResponse.json({ error: 'invalid decision' }, { status: 400 })
}
const approval = await db.portalApproval.findUnique({ where: { id } })
if (!approval) return NextResponse.json({ error: 'not found' }, { status: 404 })
if (approval.status !== 'pending') return NextResponse.json({ error: 'already decided' }, { status: 409 })
const clientIp = getClientIp(req)
const contentHash = createHash('sha256')
.update([approval.id, approval.title, body.decision, new Date().toISOString()].join('|'))
.digest('hex')
const updated = await db.portalApproval.update({
where: { id },
data: {
status: body.decision,
decidedAt: new Date(),
decidedBy: body.decidedBy ?? 'Kunde (via Portal)',
decidedIp: clientIp,
decision: body.feedback ?? null,
contentHash,
},
})
// audit
await db.auditLog.create({
data: {
actor: body.decidedBy ?? 'portal-client',
action: `portal.approval:${body.decision}`,
entity: 'PortalApproval',
entityId: id,
before: JSON.stringify({ status: 'pending' }),
after: JSON.stringify({ status: body.decision, ip: clientIp, contentHash, feedback: body.feedback?.slice(0, 200) }),
hash: 'sha256:' + Math.random().toString(36).slice(2),
},
})
return NextResponse.json({
approval: updated,
evidence: {
decidedAt: updated.decidedAt,
decidedIp: clientIp,
contentHash,
signatureLevel: 'AdES (eIDAS Art. 25 Abs. 2)',
},
})
}
@@ -0,0 +1,109 @@
import { NextResponse } from 'next/server'
import { db } from '@/lib/db'
export const dynamic = 'force-dynamic'
// GET /api/aos/portal/companies/[id] — client portal dashboard data.
// Returns ONLY the data belonging to this company (project-scoped isolation).
export async function GET(
_req: Request,
{ params }: { params: Promise<{ id: string }> }
) {
const { id } = await params
const company = await db.company.findUnique({
where: { id },
include: {
projects: { orderBy: { updatedAt: 'desc' }, include: { tasks: true, timeEntries: { orderBy: { date: 'desc' }, take: 5 } } },
invoices: { orderBy: { issueDate: 'desc' }, include: { lines: true } },
licenses: { include: { activations: true } },
deals: { where: { stage: { not: 'lost' } } },
},
})
if (!company) return NextResponse.json({ error: 'not found' }, { status: 404 })
// tickets for this company
const tickets = await db.ticket.findMany({
where: { companyId: id },
orderBy: { updatedAt: 'desc' },
include: { messages: { orderBy: { createdAt: 'asc' } } },
})
// portal approvals for this company's projects
const projectIds = company.projects.map((p) => p.id)
const approvals = await db.portalApproval.findMany({
where: { projectId: { in: projectIds } },
orderBy: { createdAt: 'desc' },
})
// KPIs
const openProjects = company.projects.filter((p) => p.status === 'active' || p.status === 'planning' || p.status === 'review').length
const unpaidInvoices = company.invoices.filter((i) => i.status === 'sent' || i.status === 'overdue')
const unpaidCents = unpaidInvoices.reduce((s, i) => s + i.grossCents, 0)
const openTickets = tickets.filter((t) => t.status === 'open' || t.status === 'pending').length
const pendingApprovals = approvals.filter((a) => a.status === 'pending').length
const activeLicenses = company.licenses.filter((l) => l.status === 'active').length
return NextResponse.json({
company: {
id: company.id,
name: company.name,
legalForm: company.legalForm,
city: company.city,
},
kpis: { openProjects, unpaidCents, unpaidInvoiceCount: unpaidInvoices.length, openTickets, pendingApprovals, activeLicenses },
projects: company.projects.map((p) => ({
id: p.id,
name: p.name,
type: p.type,
status: p.status,
progress: p.progress,
budgetType: p.budgetType,
spentHours: p.spentHours,
budgetHours: p.budgetHours,
dueDate: p.dueDate,
taskCount: p.tasks.length,
doneTasks: p.tasks.filter((t) => t.status === 'done').length,
})),
invoices: company.invoices.map((i) => ({
id: i.id,
number: i.number,
status: i.status,
type: i.type,
issueDate: i.issueDate,
dueDate: i.dueDate,
grossCents: i.grossCents,
zugferd: i.zugferd,
xrechnung: i.xrechnung,
lineCount: i.lines.length,
})),
tickets: tickets.map((t) => ({
id: t.id,
number: t.number,
subject: t.subject,
status: t.status,
priority: t.priority,
messageCount: t.messages.length,
lastMessageAt: t.messages[t.messages.length - 1]?.createdAt ?? t.createdAt,
})),
approvals: approvals.map((a) => ({
id: a.id,
title: a.title,
description: a.description,
status: a.status,
decidedAt: a.decidedAt,
decidedBy: a.decidedBy,
decidedIp: a.decidedIp,
decision: a.decision,
createdAt: a.createdAt,
})),
licenses: company.licenses.map((l) => ({
id: l.id,
key: l.key,
product: l.product,
plan: l.plan,
status: l.status,
validUntil: l.validUntil,
activations: l.activations.map((a) => ({ domain: a.domain, environment: a.environment })),
})),
})
}
+30
View File
@@ -0,0 +1,30 @@
import { NextResponse } from 'next/server'
import { db } from '@/lib/db'
export const dynamic = 'force-dynamic'
// GET /api/aos/portal/companies — list companies that can log into the portal
export async function GET() {
// A company can use the portal if it has projects, invoices, or tickets.
const companies = await db.company.findMany({
where: { projects: { some: {} } },
orderBy: { name: 'asc' },
include: {
_count: { select: { projects: true, invoices: true, licenses: true } },
persons: { where: { email: { not: null } }, take: 1 },
},
})
return NextResponse.json({
companies: companies.map((c) => ({
id: c.id,
name: c.name,
legalForm: c.legalForm,
city: c.city,
projectCount: c._count.projects,
invoiceCount: c._count.invoices,
licenseCount: c._count.licenses,
contactName: c.persons[0] ? `${c.persons[0].firstName} ${c.persons[0].lastName}` : null,
contactEmail: c.persons[0]?.email ?? null,
})),
})
}
+1
View File
@@ -20,6 +20,7 @@ export async function POST() {
await db.bankTransaction.deleteMany()
await db.webhook.deleteMany()
await db.apiToken.deleteMany()
await db.portalApproval.deleteMany()
await db.estimateLine.deleteMany()
await db.estimate.deleteMany()
await db.ticketMessage.deleteMany()
+5 -1
View File
@@ -23,9 +23,13 @@ import { AuditView } from './views/audit'
import { ApiView } from './views/api'
import { SettingsView } from './views/settings'
import { SetupWizardView } from './views/setup-wizard'
import { PortalShell } from './portal-shell'
export function AppShell() {
const { view, sidebarOpen, setSidebarOpen } = useAos()
const { view, sidebarOpen, setSidebarOpen, portalMode } = useAos()
// Portal mode renders a completely separate experience
if (portalMode) return <PortalShell />
return (
<div className="flex min-h-screen w-full bg-background">
+594
View File
@@ -0,0 +1,594 @@
'use client'
import { useEffect, useState } from 'react'
import { db as _db } from '@/lib/db' // not used — placeholder for type alignment
import { useAos } from '@/store/aos'
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 { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Skeleton } from '@/components/ui/skeleton'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Progress } from '@/components/ui/progress'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
DialogDescription,
} from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import {
Building2,
ArrowLeft,
FolderKanban,
Receipt,
LifeBuoy,
CheckCircle2,
Clock,
ShieldCheck,
Check,
X,
Loader2,
KeyRound,
AlertTriangle,
} from 'lucide-react'
import { formatEuro, formatDate, formatRelative, daysUntil } from '@/lib/format'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'
import { Footer } from './footer'
void _db
interface PortalCompany {
id: string
name: string
legalForm: string | null
city: string | null
projectCount: number
invoiceCount: number
licenseCount: number
contactName: string | null
contactEmail: string | null
}
interface PortalData {
company: { id: string; name: string; legalForm: string | null; city: string | null }
kpis: {
openProjects: number
unpaidCents: number
unpaidInvoiceCount: number
openTickets: number
pendingApprovals: number
activeLicenses: number
}
projects: {
id: string; name: string; type: string; status: string; progress: number
budgetType: string; spentHours: number; budgetHours: number | null
dueDate: string | null; taskCount: number; doneTasks: number
}[]
invoices: {
id: string; number: string; status: string; type: string
issueDate: string; dueDate: string; grossCents: number
zugferd: boolean; xrechnung: boolean; lineCount: number
}[]
tickets: {
id: string; number: string; subject: string; status: string; priority: string
messageCount: number; lastMessageAt: string
}[]
approvals: {
id: string; title: string; description: string | null; status: string
decidedAt: string | null; decidedBy: string | null; decidedIp: string | null
decision: string | null; createdAt: string
}[]
licenses: {
id: string; key: string; product: string; plan: string; status: string
validUntil: string | null; activations: { domain: string; environment: string }[]
}[]
}
export function PortalShell() {
const { portalMode, portalCompanyId, setPortalMode, setPortalCompany } = useAos()
const [tab, setTab] = useState<'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses'>('overview')
// If portal mode is on but no company selected, show the login/selection screen
if (portalMode && !portalCompanyId) {
return <PortalLogin onBack={() => setPortalMode(false)} onSelect={(id) => setPortalCompany(id)} />
}
if (portalMode && portalCompanyId) {
return (
<PortalApp
companyId={portalCompanyId}
tab={tab}
setTab={setTab}
onExit={() => { setPortalMode(false); setPortalCompany(null) }}
/>
)
}
return null
}
function PortalLogin({ onBack, onSelect }: { onBack: () => void; onSelect: (id: string) => void }) {
const { data, loading } = useFetch<{ companies: PortalCompany[] }>('/api/aos/portal/companies')
const [q, setQ] = useState('')
return (
<div className="flex min-h-screen flex-col bg-muted/30">
<header className="flex h-16 items-center gap-3 border-b border-border bg-background px-4 md:px-6">
<Button variant="ghost" size="sm" className="gap-1.5" onClick={onBack}>
<ArrowLeft className="size-4" />Zur Agentur-Ansicht
</Button>
<div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
<ShieldCheck className="size-3.5" />Client-Portal · projektbezogener Zugriff
</div>
</header>
<main className="mx-auto w-full max-w-3xl flex-1 p-4 md:p-8">
<div className="mb-6 space-y-1.5">
<h1 className="text-2xl font-semibold tracking-tight">Client-Portal</h1>
<p className="text-sm text-muted-foreground">
Wähle dein Unternehmen. Du siehst ausschließlich deine eigenen Projekte, Rechnungen, Tickets und Freigaben — projektbezogen isoliert (PRD §5.6).
</p>
</div>
<div className="mb-4">
<Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Firma suchen…" className="max-w-sm" />
</div>
{loading || !data ? (
<div className="space-y-2">
{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-20 w-full" />)}
</div>
) : (
<div className="space-y-2">
{data.companies
.filter((c) => c.name.toLowerCase().includes(q.toLowerCase()))
.map((c) => (
<button
key={c.id}
onClick={() => onSelect(c.id)}
className="flex w-full items-center gap-4 rounded-lg border border-border bg-background p-4 text-left transition hover:border-foreground/40 hover:shadow-sm"
>
<div className="flex size-12 items-center justify-center rounded-md bg-muted">
<Building2 className="size-5 text-muted-foreground" />
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="truncate text-sm font-semibold">{c.name}</span>
{c.legalForm && <Badge variant="outline" className="text-[10px]">{c.legalForm}</Badge>}
</div>
<p className="mt-0.5 truncate text-xs text-muted-foreground">{c.contactName ?? '—'} · {c.contactEmail ?? '—'}</p>
<div className="mt-1.5 flex items-center gap-3 text-[11px] text-muted-foreground">
<span className="flex items-center gap-1"><FolderKanban className="size-3" />{c.projectCount} Projekte</span>
<span className="flex items-center gap-1"><Receipt className="size-3" />{c.invoiceCount} Rechnungen</span>
<span className="flex items-center gap-1"><KeyRound className="size-3" />{c.licenseCount} Lizenzen</span>
</div>
</div>
<ArrowLeft className="size-4 rotate-180 text-muted-foreground" />
</button>
))}
</div>
)}
</main>
<Footer />
</div>
)
}
function PortalApp({ companyId, tab, setTab, onExit }: {
companyId: string
tab: 'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses'
setTab: (t: 'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses') => void
onExit: () => void
}) {
const { data, loading, refetch } = useFetch<PortalData>(`/api/aos/portal/companies/${companyId}`)
if (loading || !data) {
return (
<div className="flex min-h-screen flex-col bg-muted/30">
<header className="flex h-16 items-center gap-3 border-b border-border bg-background px-4 md:px-6">
<Skeleton className="h-8 w-32" />
</header>
<main className="flex-1 p-6"><Skeleton className="h-96 w-full" /></main>
</div>
)
}
return (
<div className="flex min-h-screen flex-col bg-muted/30">
{/* Portal header */}
<header className="flex h-16 items-center gap-3 border-b border-border bg-background px-4 md:px-6">
<Button variant="ghost" size="sm" className="gap-1.5" onClick={onExit}>
<ArrowLeft className="size-4" />Agentur-Ansicht
</Button>
<div className="ml-2 flex items-center gap-2">
<div className="flex size-9 items-center justify-center rounded-md bg-primary text-primary-foreground">
<Building2 className="size-4" />
</div>
<div className="leading-tight">
<p className="text-sm font-semibold">{data.company.name}</p>
<p className="text-[10px] text-muted-foreground">Client-Portal · {data.company.legalForm ?? ''} {data.company.city ?? ''}</p>
</div>
</div>
<div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
<ShieldCheck className="size-3.5" />Projekt-isolierter Zugriff
</div>
</header>
{/* Tab nav */}
<div className="border-b border-border bg-background px-4 md:px-6">
<div className="flex gap-1 overflow-x-auto py-2">
{([
{ id: 'overview', label: 'Übersicht', icon: Building2 },
{ id: 'approvals', label: `Freigaben${data.kpis.pendingApprovals > 0 ? ` (${data.kpis.pendingApprovals})` : ''}`, icon: CheckCircle2 },
{ id: 'invoices', label: 'Rechnungen', icon: Receipt },
{ id: 'tickets', label: 'Tickets', icon: LifeBuoy },
{ id: 'licenses', label: 'Lizenzen', icon: KeyRound },
] as const).map((t) => {
const Icon = t.icon
const active = tab === t.id
return (
<button
key={t.id}
onClick={() => setTab(t.id)}
className={cn(
'flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition',
active ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/50'
)}
>
<Icon className="size-3.5" />
{t.label}
</button>
)
})}
</div>
</div>
{/* Content */}
<main className="flex-1 p-4 md:p-6">
{tab === 'overview' && <PortalOverview data={data} setTab={setTab} />}
{tab === 'approvals' && <PortalApprovals data={data} refetch={refetch} />}
{tab === 'invoices' && <PortalInvoices data={data} />}
{tab === 'tickets' && <PortalTickets data={data} />}
{tab === 'licenses' && <PortalLicenses data={data} />}
</main>
<Footer />
</div>
)
}
function PortalOverview({ data, setTab }: { data: PortalData; setTab: (t: 'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses') => void }) {
return (
<div className="space-y-6">
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
<Card className="p-4"><p className="text-xs text-muted-foreground">Offene Projekte</p><p className="mt-1 text-2xl font-semibold tabular-nums">{data.kpis.openProjects}</p></Card>
<Card className="p-4"><p className="text-xs text-muted-foreground">Offene Freigaben</p><p className="mt-1 text-2xl font-semibold tabular-nums">{data.kpis.pendingApprovals}</p></Card>
<Card className="p-4"><p className="text-xs text-muted-foreground">Offene Rechnungen</p><p className="mt-1 text-2xl font-semibold tabular-nums">{data.kpis.unpaidInvoiceCount}</p><p className="text-[10px] text-muted-foreground">{formatEuro(data.kpis.unpaidCents)}</p></Card>
<Card className="p-4"><p className="text-xs text-muted-foreground">Offene Tickets</p><p className="mt-1 text-2xl font-semibold tabular-nums">{data.kpis.openTickets}</p></Card>
<Card className="p-4"><p className="text-xs text-muted-foreground">Aktive Lizenzen</p><p className="mt-1 text-2xl font-semibold tabular-nums">{data.kpis.activeLicenses}</p></Card>
</div>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
{/* Pending approvals */}
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="flex items-center gap-2 text-sm"><Clock className="size-3.5 text-muted-foreground" />Wartende Freigaben</CardTitle>
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => setTab('approvals')}>Alle</Button>
</CardHeader>
<CardContent className="space-y-2">
{data.approvals.filter((a) => a.status === 'pending').slice(0, 4).map((a) => (
<div key={a.id} className="rounded-md border border-border p-3">
<p className="text-xs font-medium">{a.title}</p>
{a.description && <p className="mt-0.5 text-[11px] text-muted-foreground">{a.description}</p>}
<p className="mt-1 text-[10px] text-muted-foreground">Eingereicht {formatRelative(a.createdAt)}</p>
</div>
))}
{data.approvals.filter((a) => a.status === 'pending').length === 0 && (
<p className="py-4 text-center text-xs text-muted-foreground">Keine offenen Freigaben.</p>
)}
</CardContent>
</Card>
{/* Projects */}
<Card>
<CardHeader className="pb-2"><CardTitle className="text-sm">Meine Projekte ({data.projects.length})</CardTitle></CardHeader>
<CardContent className="space-y-2">
{data.projects.slice(0, 4).map((p) => (
<div key={p.id} className="rounded-md border border-border p-3">
<div className="flex items-center justify-between">
<p className="truncate text-xs font-medium">{p.name}</p>
<Badge variant="outline" className="text-[10px] capitalize">{p.status}</Badge>
</div>
<div className="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
<span>{p.doneTasks}/{p.taskCount} Aufgaben</span>
<span>{p.progress}%</span>
</div>
<Progress value={p.progress} className="mt-1 h-1" />
</div>
))}
</CardContent>
</Card>
</div>
{/* Recent invoices */}
<Card>
<CardHeader className="pb-2"><CardTitle className="text-sm">Letzte Rechnungen</CardTitle></CardHeader>
<CardContent className="p-0">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
<tr><th className="px-4 py-2 font-medium">Nr.</th><th className="px-4 py-2 font-medium">Datum</th><th className="px-4 py-2 font-medium">Fällig</th><th className="px-4 py-2 font-medium text-right">Betrag</th><th className="px-4 py-2 font-medium">Status</th></tr>
</thead>
<tbody className="divide-y divide-border">
{data.invoices.slice(0, 5).map((i) => (
<tr key={i.id}>
<td className="px-4 py-2.5"><code className="font-mono text-[11px]">{i.number}</code></td>
<td className="px-4 py-2.5 text-xs">{formatDate(i.issueDate)}</td>
<td className="px-4 py-2.5 text-xs">{formatDate(i.dueDate)}</td>
<td className="px-4 py-2.5 text-right text-xs font-semibold tabular-nums">{formatEuro(i.grossCents)}</td>
<td className="px-4 py-2.5"><Badge variant="outline" className="text-[10px] capitalize">{i.status}</Badge></td>
</tr>
))}
</tbody>
</table>
</div>
</CardContent>
</Card>
</div>
)
}
function PortalApprovals({ data, refetch }: { data: PortalData; refetch: () => void }) {
const [deciding, setDeciding] = useState<string | null>(null)
const [decision, setDecision] = useState<'approved' | 'rejected' | 'changes-requested'>('approved')
const [feedback, setFeedback] = useState('')
const [dialogOpen, setDialogOpen] = useState(false)
const [busy, setBusy] = useState(false)
const openDecision = (approvalId: string, dec: 'approved' | 'rejected' | 'changes-requested') => {
setDeciding(approvalId)
setDecision(dec)
setFeedback('')
setDialogOpen(true)
}
const submit = async () => {
if (!deciding) return
setBusy(true)
const t = toast.loading('Freigabe wird gespeichert (IP + Zeitstempel)…')
try {
const r = await fetch(`/api/aos/portal/approvals/${deciding}/decide`, {
method: 'PATCH',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ decision, decidedBy: data.company.name, feedback }),
})
const res = await r.json()
if (!r.ok) throw new Error(res.error || 'decide failed')
toast.success(`Freigabe ${decision === 'approved' ? 'akzeptiert' : decision === 'rejected' ? 'abgelehnt' : 'mit Änderungswunsch'} (IP: ${res.evidence.decidedIp})`, { id: t })
setDialogOpen(false)
refetch()
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Speichern fehlgeschlagen', { id: t })
} finally {
setBusy(false)
}
}
const statusMeta: Record<string, { label: string; cls: string }> = {
pending: { label: 'Wartend', cls: 'bg-foreground/50 text-background' },
approved: { label: 'Freigegeben', cls: 'bg-foreground text-background' },
rejected: { label: 'Abgelehnt', cls: 'bg-muted text-muted-foreground' },
'changes-requested': { label: 'Änderung gewünscht', cls: 'bg-muted text-foreground' },
}
return (
<div className="space-y-4">
<div className="flex items-center gap-2">
<CheckCircle2 className="size-5 text-muted-foreground" />
<div>
<h1 className="text-lg font-semibold">Freigaben</h1>
<p className="text-xs text-muted-foreground">Meilenstein-Freigaben mit Zeitstempel- und IP-Evidenz (PRD §6.3).</p>
</div>
</div>
<div className="space-y-2">
{data.approvals.map((a) => {
const meta = statusMeta[a.status] ?? statusMeta.pending
return (
<Card key={a.id} className="p-4">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<p className="text-sm font-medium">{a.title}</p>
<Badge variant="outline" className={cn('text-[10px]', meta.cls)}>{meta.label}</Badge>
</div>
{a.description && <p className="mt-1 text-xs text-muted-foreground">{a.description}</p>}
{a.status !== 'pending' && (
<div className="mt-2 space-y-0.5 text-[10px] text-muted-foreground">
<p>Entschieden: {formatDate(a.decidedAt!)} von {a.decidedBy}</p>
<p>IP-Evidenz: <code className="font-mono">{a.decidedIp}</code></p>
{a.decision && <p className="italic">„{a.decision}"</p>}
</div>
)}
{a.status === 'pending' && (
<p className="mt-1 text-[10px] text-muted-foreground">Eingereicht {formatRelative(a.createdAt)}</p>
)}
</div>
{a.status === 'pending' && (
<div className="flex shrink-0 gap-1.5">
<Button size="sm" className="h-8 gap-1 text-xs" onClick={() => openDecision(a.id, 'approved')}>
<Check className="size-3.5" />Freigeben
</Button>
<Button size="sm" variant="outline" className="h-8 gap-1 text-xs" onClick={() => openDecision(a.id, 'changes-requested')}>
<AlertTriangle className="size-3.5" />Änderung
</Button>
<Button size="sm" variant="ghost" className="h-8 gap-1 text-xs text-muted-foreground" onClick={() => openDecision(a.id, 'rejected')}>
<X className="size-3.5" />Ablehnen
</Button>
</div>
)}
</div>
</Card>
)
})}
{data.approvals.length === 0 && <p className="py-8 text-center text-xs text-muted-foreground">Keine Freigaben.</p>}
</div>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>
{decision === 'approved' && 'Freigabe bestätigen'}
{decision === 'rejected' && 'Freigabe ablehnen'}
{decision === 'changes-requested' && 'Änderungswunsch senden'}
</DialogTitle>
<DialogDescription>
Deine Entscheidung wird mit Zeitstempel und IP-Adresse gespeichert (eIDAS Art. 25 AdES).
</DialogDescription>
</DialogHeader>
<div className="space-y-3">
<div className="space-y-1.5">
<Label className="text-xs">Kommentar / Feedback (optional)</Label>
<Textarea value={feedback} onChange={(e) => setFeedback(e.target.value)} placeholder="z.B. Bitte Kontrast erhöhen…" className="min-h-[80px] text-sm" />
</div>
<div className="rounded-md border border-dashed border-border p-2.5 text-[10px] text-muted-foreground">
<p className="flex items-center gap-1.5"><ShieldCheck className="size-3" />Evidenz: {new Date().toLocaleString('de-DE')} · IP wird erfasst</p>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setDialogOpen(false)}>Abbrechen</Button>
<Button onClick={submit} disabled={busy} className="gap-1.5">
{busy && <Loader2 className="size-3.5 animate-spin" />}
{decision === 'approved' ? 'Freigeben' : decision === 'rejected' ? 'Ablehnen' : 'Senden'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)
}
function PortalInvoices({ data }: { data: PortalData }) {
return (
<div className="space-y-4">
<div className="flex items-center gap-2">
<Receipt className="size-5 text-muted-foreground" />
<div>
<h1 className="text-lg font-semibold">Rechnungen ({data.invoices.length})</h1>
<p className="text-xs text-muted-foreground">Deine Rechnungen — Ansicht nur für dein Unternehmen.</p>
</div>
</div>
<Card>
<CardContent className="p-0">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
<tr>
<th className="px-4 py-2 font-medium">Nr.</th>
<th className="px-4 py-2 font-medium">Typ</th>
<th className="px-4 py-2 font-medium">Datum</th>
<th className="px-4 py-2 font-medium">Fällig</th>
<th className="px-4 py-2 font-medium text-right">Betrag</th>
<th className="px-4 py-2 font-medium">E-Rechnung</th>
<th className="px-4 py-2 font-medium">Status</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
{data.invoices.map((i) => {
const due = daysUntil(i.dueDate)
return (
<tr key={i.id}>
<td className="px-4 py-2.5"><code className="font-mono text-[11px]">{i.number}</code></td>
<td className="px-4 py-2.5 text-xs text-muted-foreground">{i.type}</td>
<td className="px-4 py-2.5 text-xs">{formatDate(i.issueDate)}</td>
<td className="px-4 py-2.5 text-xs">{formatDate(i.dueDate)}{i.status === 'sent' && due < 0 && <span className="ml-1 text-[10px] text-foreground">({Math.abs(due)} d)</span>}</td>
<td className="px-4 py-2.5 text-right text-xs font-semibold tabular-nums">{formatEuro(i.grossCents)}</td>
<td className="px-4 py-2.5">
<div className="flex gap-1">
{i.zugferd && <Badge variant="outline" className="text-[9px]">ZUGFeRD</Badge>}
{i.xrechnung && <Badge variant="outline" className="text-[9px]">XRechnung</Badge>}
</div>
</td>
<td className="px-4 py-2.5"><Badge variant="outline" className="text-[10px] capitalize">{i.status}</Badge></td>
</tr>
)
})}
</tbody>
</table>
</div>
</CardContent>
</Card>
</div>
)
}
function PortalTickets({ data }: { data: PortalData }) {
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<LifeBuoy className="size-5 text-muted-foreground" />
<div>
<h1 className="text-lg font-semibold">Tickets ({data.tickets.length})</h1>
<p className="text-xs text-muted-foreground">Support-Anfragen und Konversationen.</p>
</div>
</div>
<Button size="sm"><LifeBuoy className="size-4" />Neues Ticket</Button>
</div>
<div className="space-y-2">
{data.tickets.map((t) => (
<Card key={t.id} className="p-4">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<code className="text-[10px] font-mono text-muted-foreground">{t.number}</code>
{t.priority === 'urgent' && <Badge variant="outline" className="text-[9px]">DRINGEND</Badge>}
</div>
<p className="mt-0.5 truncate text-sm font-medium">{t.subject}</p>
<p className="mt-1 text-[10px] text-muted-foreground">{t.messageCount} Nachrichten · letzte {formatRelative(t.lastMessageAt)}</p>
</div>
<Badge variant="outline" className="text-[10px] capitalize">{t.status}</Badge>
</div>
</Card>
))}
{data.tickets.length === 0 && <p className="py-8 text-center text-xs text-muted-foreground">Keine Tickets.</p>}
</div>
</div>
)
}
function PortalLicenses({ data }: { data: PortalData }) {
return (
<div className="space-y-4">
<div className="flex items-center gap-2">
<KeyRound className="size-5 text-muted-foreground" />
<div>
<h1 className="text-lg font-semibold">Lizenzen ({data.licenses.length})</h1>
<p className="text-xs text-muted-foreground">Deine Produkt-Lizenzen und Aktivierungen.</p>
</div>
</div>
<div className="space-y-2">
{data.licenses.map((l) => (
<Card key={l.id} className="p-4">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<p className="text-sm font-medium">{l.product}</p>
<Badge variant="outline" className="text-[10px] capitalize">{l.plan}</Badge>
</div>
<code className="mt-1 block text-[10px] font-mono text-muted-foreground">{l.key}</code>
<div className="mt-1.5 space-y-0.5 text-[10px] text-muted-foreground">
{l.activations.map((a, i) => <p key={i}>↳ {a.domain} ({a.environment})</p>)}
{l.validUntil && <p>Gültig bis: {formatDate(l.validUntil)}</p>}
</div>
</div>
<Badge variant="outline" className="text-[10px] capitalize">{l.status}</Badge>
</div>
</Card>
))}
</div>
</div>
)
}
+14 -2
View File
@@ -20,6 +20,7 @@ import {
Rocket,
BookOpen,
Webhook,
ExternalLink,
} from 'lucide-react'
import { useAos, type ViewId } from '@/store/aos'
import { cn } from '@/lib/utils'
@@ -74,7 +75,7 @@ const NAV: {
]
export function SidebarNav() {
const { view, setView, setSidebarOpen, setCommandOpen } = useAos()
const { view, setView, setSidebarOpen, setCommandOpen, setPortalMode } = useAos()
return (
<div className="flex h-full flex-col bg-sidebar text-sidebar-foreground">
@@ -145,7 +146,7 @@ export function SidebarNav() {
</nav>
{/* AI status */}
<div className="mx-3 mb-3 rounded-md border border-sidebar-border bg-background/40 p-3">
<div className="mx-3 mb-2 rounded-md border border-sidebar-border bg-background/40 p-3">
<div className="flex items-center gap-2">
<div className="flex size-7 items-center justify-center rounded bg-muted">
<Bot className="size-3.5 text-muted-foreground" />
@@ -157,6 +158,17 @@ export function SidebarNav() {
</div>
</div>
{/* Client Portal entry */}
<div className="mx-3 mb-3">
<button
onClick={() => setPortalMode(true)}
className="flex w-full items-center gap-2.5 rounded-md border border-dashed border-sidebar-border bg-background/60 px-3 py-2.5 text-xs font-medium text-muted-foreground transition hover:border-foreground/40 hover:text-foreground"
>
<ExternalLink className="size-3.5" />
<span>Client-Portal öffnen</span>
</button>
</div>
{/* User */}
<div className="border-t border-sidebar-border px-3 py-3">
<Button variant="ghost" className="h-auto w-full justify-start gap-3 px-2 py-2">
+16
View File
@@ -673,6 +673,22 @@ async function main() {
await db.auditLog.create({ data: { actor: 'nora@nordlicht.digital', action: 'bank.import:camt053', entity: 'BankTransaction', entityId: 'seed', after: '{"count":10,"batch":"camt-2026-10"}', hash: 'sha256:' + Math.random().toString(36).slice(2) } })
await db.auditLog.create({ data: { actor: 'nora@nordlicht.digital', action: 'bank.match:invoice', entity: 'BankTransaction', entityId: 'seed', after: '{"invoiceId":"matched","status":"matched"}', hash: 'sha256:' + Math.random().toString(36).slice(2) } })
// --- Portal approvals (client milestone approvals with evidence) ---------
const portalApprovals = [
{ project: 'SEO-Optimierung & BFGG-Check', title: 'SEO-Audit & Keyword-Analyse', description: 'Audit-Bericht mit Keyword-Strategie und Wettbewerbsanalyse.', status: 'approved', decidedAt: daysFromNow(-8), decidedBy: 'Dr. med. Iris Brandt', decidedIp: '91.64.224.12', decision: 'Sehr gute Analyse, bitte umsetzen.' },
{ project: 'SEO-Optimierung & BFGG-Check', title: 'Schema.org LocalBusiness Markup', description: 'Strukturierte Daten implementiert, Test via Google Rich Results.', status: 'approved', decidedAt: daysFromNow(-5), decidedBy: 'Dr. med. Iris Brandt', decidedIp: '91.64.224.12', decision: 'Freigegeben.' },
{ project: 'SEO-Optimierung & BFGG-Check', title: 'BFSG Accessibility-Audit', description: 'axe-Audit abgeschlossen, 12 findings (3 kritisch).', status: 'changes-requested', decidedAt: daysFromNow(-3), decidedBy: 'Dr. med. Iris Brandt', decidedIp: '91.64.224.18', decision: 'Bitte Kontrast auf Buttons erhöhen und Skip-Link nach oben setzen.' },
{ project: 'Corporate Website Relaunch', title: 'Design-Tokens abnehmen', description: 'Farbpalette, Typografie, Spacing-System.', status: 'approved', decidedAt: daysFromNow(-1), decidedBy: 'Klaus Bauer', decidedIp: '85.183.99.44', decision: 'Sieht super aus, weiter so!' },
{ project: 'Corporate Website Relaunch', title: 'Wireframes Startseite', description: '3 Varianten: klassisch, hero-fokus, story-telling.', status: 'pending' },
{ project: 'Intranet-Portal Q4', title: 'SSO-Integration abnehmen', description: 'Better Auth SSO mit vorhandenen AD-Accounts.', status: 'pending' },
{ project: 'Website-Redesign Konzept', title: 'Moodboard freigeben', description: '2 Moodboards: maritim-elegant vs. modern-minimal.', status: 'pending' },
{ project: 'SaaS MVP — Auth & Billing', title: 'Onboarding-Flow (3 Schritte)', description: 'Signup → Team erstellen → Plan wählen.', status: 'pending' },
]
for (const pa of portalApprovals) {
const { project, ...rest } = pa
await db.portalApproval.create({ data: { ...rest, projectId: projectMap[project], contentHash: 'sha256:' + Math.random().toString(36).slice(2) } })
}
// --- API Tokens + Webhooks (real crypto, hashed at rest) -----------------
const crypto = await import('crypto')
const apiTokens = [
+10 -1
View File
@@ -32,6 +32,11 @@ interface AosState {
setSidebarOpen: (open: boolean) => void
commandOpen: boolean
setCommandOpen: (open: boolean) => void
// portal mode (PRD §6.3 client portal)
portalMode: boolean
portalCompanyId: string | null
setPortalMode: (mode: boolean) => void
setPortalCompany: (id: string | null) => void
}
export const useAos = create<AosState>()(
@@ -47,7 +52,11 @@ export const useAos = create<AosState>()(
setSidebarOpen: (sidebarOpen) => set({ sidebarOpen }),
commandOpen: false,
setCommandOpen: (commandOpen) => set({ commandOpen }),
portalMode: false,
portalCompanyId: null,
setPortalMode: (portalMode) => set({ portalMode }),
setPortalCompany: (portalCompanyId) => set({ portalCompanyId }),
}),
{ name: 'aos-ui', partialize: (s) => ({ view: s.view }) }
{ name: 'aos-ui', partialize: (s) => ({ view: s.view, portalMode: s.portalMode, portalCompanyId: s.portalCompanyId }) }
)
)