cfbb20c1-e953-4788-abed-5c8308f329ee
This commit is contained in:
Z User committed
1 parent
be34f88822
commit
9feb124da6
18 files changed
+998
-4
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
+122
@@ -0,0 +1,122 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
# Verify Client Portal (real project-scoped data + real IP evidence)
|
||||||
|
set -u
|
||||||
|
cd /home/z/my-project
|
||||||
|
BASE=http://127.0.0.1:3000
|
||||||
|
SHOTS=/home/z/my-project/aos-shots
|
||||||
|
mkdir -p "$SHOTS"
|
||||||
|
|
||||||
|
echo "=== Start server ==="
|
||||||
|
pkill -f "next dev" 2>/dev/null; sleep 1
|
||||||
|
bun run dev > dev.log 2>&1 &
|
||||||
|
SRV=$!
|
||||||
|
for i in $(seq 1 90); do curl -s -o /dev/null "$BASE/" 2>/dev/null && break; sleep 1; done
|
||||||
|
echo " ready after ${i}s"; sleep 2
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=== 1. Portal company list ==="
|
||||||
|
curl -s "$BASE/api/aos/portal/companies" | python3 -c "
|
||||||
|
import sys,json
|
||||||
|
d=json.load(sys.stdin)
|
||||||
|
print(f' companies: {len(d[\"companies\"])}')
|
||||||
|
for c in d['companies'][:3]:
|
||||||
|
print(f' {c[\"name\"]}: {c[\"projectCount\"]} projects, {c[\"invoiceCount\"]} invoices')
|
||||||
|
" 2>/dev/null
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=== 2. Portal company detail (project-scoped) ==="
|
||||||
|
COMPANY_ID=$(curl -s "$BASE/api/aos/portal/companies" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['companies'][0]['id'])" 2>/dev/null)
|
||||||
|
echo " company id: $COMPANY_ID"
|
||||||
|
curl -s "$BASE/api/aos/portal/companies/$COMPANY_ID" | python3 -c "
|
||||||
|
import sys,json
|
||||||
|
d=json.load(sys.stdin)
|
||||||
|
print(f' company: {d[\"company\"][\"name\"]}')
|
||||||
|
print(f' kpis: {d[\"kpis\"]}')
|
||||||
|
print(f' projects: {len(d[\"projects\"])}')
|
||||||
|
print(f' invoices: {len(d[\"invoices\"])}')
|
||||||
|
print(f' tickets: {len(d[\"tickets\"])}')
|
||||||
|
print(f' approvals: {len(d[\"approvals\"])} ({sum(1 for a in d[\"approvals\"] if a[\"status\"]==\"pending\")} pending)')
|
||||||
|
print(f' licenses: {len(d[\"licenses\"])}')
|
||||||
|
" 2>/dev/null
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=== 3. Approve a pending portal approval (real IP + evidence) ==="
|
||||||
|
APPROVAL_ID=$(curl -s "$BASE/api/aos/portal/companies/$COMPANY_ID" | python3 -c "
|
||||||
|
import sys,json
|
||||||
|
d=json.load(sys.stdin)
|
||||||
|
print(next(a['id'] for a in d['approvals'] if a['status']=='pending'))
|
||||||
|
" 2>/dev/null)
|
||||||
|
echo " approval id: $APPROVAL_ID"
|
||||||
|
curl -s -X PATCH "$BASE/api/aos/portal/approvals/$APPROVAL_ID/decide" -H 'content-type: application/json' -d '{"decision":"approved","decidedBy":"E2E Test-Kunde","feedback":"Sieht super aus!"}' | python3 -c "
|
||||||
|
import sys,json
|
||||||
|
d=json.load(sys.stdin)
|
||||||
|
print(f' status: {d[\"approval\"][\"status\"]}')
|
||||||
|
print(f' decidedAt: {d[\"approval\"][\"decidedAt\"]}')
|
||||||
|
print(f' decidedIp: {d[\"approval\"][\"decidedIp\"]} (real request IP, not mock)')
|
||||||
|
print(f' contentHash: {d[\"evidence\"][\"contentHash\"][:24]}...')
|
||||||
|
print(f' signatureLevel: {d[\"evidence\"][\"signatureLevel\"]}')
|
||||||
|
" 2>/dev/null
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=== 4. Duplicate decision (should 409) ==="
|
||||||
|
curl -s -X PATCH "$BASE/api/aos/portal/approvals/$APPROVAL_ID/decide" -H 'content-type: application/json' -d '{"decision":"rejected"}' | python3 -c "
|
||||||
|
import sys,json
|
||||||
|
d=json.load(sys.stdin)
|
||||||
|
print(f' result: {d.get(\"error\",\"ok\")}')
|
||||||
|
" 2>/dev/null
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=== Browser: Portal flow ==="
|
||||||
|
agent-browser open "$BASE/" >/dev/null 2>&1
|
||||||
|
agent-browser wait --load networkidle >/dev/null 2>&1 || true
|
||||||
|
agent-browser wait 3000 >/dev/null 2>&1
|
||||||
|
agent-browser set viewport 1440 900 >/dev/null 2>&1
|
||||||
|
|
||||||
|
echo " === Click 'Client-Portal öffnen' ==="
|
||||||
|
agent-browser find text "Client-Portal öffnen" click >/dev/null 2>&1
|
||||||
|
agent-browser wait 3000 >/dev/null 2>&1
|
||||||
|
H1=$(agent-browser get text h1 2>/dev/null | head -1)
|
||||||
|
echo " portal login H1: $H1"
|
||||||
|
agent-browser screenshot --full "$SHOTS/v16-portal-login.png" >/dev/null 2>&1 && echo " login shot OK"
|
||||||
|
|
||||||
|
echo " === Select first company ==="
|
||||||
|
agent-browser eval "document.querySelector('button[class*=border]')?.click()" >/dev/null 2>&1
|
||||||
|
agent-browser wait 3000 >/dev/null 2>&1
|
||||||
|
H1=$(agent-browser get text h1 2>/dev/null | head -1)
|
||||||
|
echo " portal overview H1: $H1"
|
||||||
|
agent-browser screenshot --full "$SHOTS/v16-portal-overview.png" >/dev/null 2>&1 && echo " overview shot OK"
|
||||||
|
|
||||||
|
echo " === Go to Freigaben tab ==="
|
||||||
|
agent-browser find text "Freigaben" click >/dev/null 2>&1
|
||||||
|
agent-browser wait 2000 >/dev/null 2>&1
|
||||||
|
agent-browser screenshot --full "$SHOTS/v16-portal-approvals.png" >/dev/null 2>&1 && echo " approvals shot OK"
|
||||||
|
|
||||||
|
echo " === Click Freigeben on a pending approval ==="
|
||||||
|
agent-browser find text "Freigeben" click >/dev/null 2>&1
|
||||||
|
agent-browser wait 1500 >/dev/null 2>&1
|
||||||
|
agent-browser screenshot --full "$SHOTS/v16-portal-approval-dialog.png" >/dev/null 2>&1 && echo " dialog shot OK"
|
||||||
|
# click the confirm Freigeben button in dialog
|
||||||
|
agent-browser find text "Freigeben" click >/dev/null 2>&1
|
||||||
|
agent-browser wait 3000 >/dev/null 2>&1
|
||||||
|
agent-browser screenshot --full "$SHOTS/v16-portal-approval-done.png" >/dev/null 2>&1 && echo " done shot OK"
|
||||||
|
|
||||||
|
echo " === Go to Rechnungen tab ==="
|
||||||
|
agent-browser find text "Rechnungen" click >/dev/null 2>&1
|
||||||
|
agent-browser wait 2000 >/dev/null 2>&1
|
||||||
|
agent-browser screenshot --full "$SHOTS/v16-portal-invoices.png" >/dev/null 2>&1 && echo " invoices shot OK"
|
||||||
|
|
||||||
|
echo " === Exit back to agency ==="
|
||||||
|
agent-browser find text "Agentur-Ansicht" click >/dev/null 2>&1
|
||||||
|
agent-browser wait 2000 >/dev/null 2>&1
|
||||||
|
H1=$(agent-browser get text h1 2>/dev/null | head -1)
|
||||||
|
echo " back to agency H1: $H1"
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=== Errors ==="
|
||||||
|
agent-browser errors 2>&1 | head -5
|
||||||
|
echo "--- dev.log errors ---"
|
||||||
|
grep -iE "error|⨯|500" dev.log | grep -v SIGTERM | tail -5
|
||||||
|
|
||||||
|
agent-browser close >/dev/null 2>&1
|
||||||
|
kill $SRV 2>/dev/null
|
||||||
|
echo "=== DONE ==="
|
||||||
Binary file not shown.
@@ -507,5 +507,27 @@ model Webhook {
|
|||||||
updatedAt DateTime @updatedAt
|
updatedAt DateTime @updatedAt
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Client Portal (PRD §6.3) — milestone approvals with evidence
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
model PortalApproval {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
projectId String
|
||||||
|
title String // e.g. "Design-Entwürfe freigeben"
|
||||||
|
description String?
|
||||||
|
status String @default("pending") // pending|approved|rejected|changes-requested
|
||||||
|
// evidence (PRD §6.3: "approvals with timestamp and IP evidence")
|
||||||
|
decidedAt DateTime?
|
||||||
|
decidedBy String? // client name
|
||||||
|
decidedIp String? // real client IP at decision time
|
||||||
|
decision String? // free-text reason/feedback
|
||||||
|
// content hash for tamper-evidence
|
||||||
|
contentHash String?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -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 })),
|
||||||
|
})),
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
})),
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -20,6 +20,7 @@ export async function POST() {
|
|||||||
await db.bankTransaction.deleteMany()
|
await db.bankTransaction.deleteMany()
|
||||||
await db.webhook.deleteMany()
|
await db.webhook.deleteMany()
|
||||||
await db.apiToken.deleteMany()
|
await db.apiToken.deleteMany()
|
||||||
|
await db.portalApproval.deleteMany()
|
||||||
await db.estimateLine.deleteMany()
|
await db.estimateLine.deleteMany()
|
||||||
await db.estimate.deleteMany()
|
await db.estimate.deleteMany()
|
||||||
await db.ticketMessage.deleteMany()
|
await db.ticketMessage.deleteMany()
|
||||||
|
|||||||
@@ -23,9 +23,13 @@ import { AuditView } from './views/audit'
|
|||||||
import { ApiView } from './views/api'
|
import { ApiView } from './views/api'
|
||||||
import { SettingsView } from './views/settings'
|
import { SettingsView } from './views/settings'
|
||||||
import { SetupWizardView } from './views/setup-wizard'
|
import { SetupWizardView } from './views/setup-wizard'
|
||||||
|
import { PortalShell } from './portal-shell'
|
||||||
|
|
||||||
export function AppShell() {
|
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 (
|
return (
|
||||||
<div className="flex min-h-screen w-full bg-background">
|
<div className="flex min-h-screen w-full bg-background">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -20,6 +20,7 @@ import {
|
|||||||
Rocket,
|
Rocket,
|
||||||
BookOpen,
|
BookOpen,
|
||||||
Webhook,
|
Webhook,
|
||||||
|
ExternalLink,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { useAos, type ViewId } from '@/store/aos'
|
import { useAos, type ViewId } from '@/store/aos'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
@@ -74,7 +75,7 @@ const NAV: {
|
|||||||
]
|
]
|
||||||
|
|
||||||
export function SidebarNav() {
|
export function SidebarNav() {
|
||||||
const { view, setView, setSidebarOpen, setCommandOpen } = useAos()
|
const { view, setView, setSidebarOpen, setCommandOpen, setPortalMode } = useAos()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col bg-sidebar text-sidebar-foreground">
|
<div className="flex h-full flex-col bg-sidebar text-sidebar-foreground">
|
||||||
@@ -145,7 +146,7 @@ export function SidebarNav() {
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* AI status */}
|
{/* 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 items-center gap-2">
|
||||||
<div className="flex size-7 items-center justify-center rounded bg-muted">
|
<div className="flex size-7 items-center justify-center rounded bg-muted">
|
||||||
<Bot className="size-3.5 text-muted-foreground" />
|
<Bot className="size-3.5 text-muted-foreground" />
|
||||||
@@ -157,6 +158,17 @@ export function SidebarNav() {
|
|||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* User */}
|
||||||
<div className="border-t border-sidebar-border px-3 py-3">
|
<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">
|
<Button variant="ghost" className="h-auto w-full justify-start gap-3 px-2 py-2">
|
||||||
|
|||||||
@@ -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.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) } })
|
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) -----------------
|
// --- API Tokens + Webhooks (real crypto, hashed at rest) -----------------
|
||||||
const crypto = await import('crypto')
|
const crypto = await import('crypto')
|
||||||
const apiTokens = [
|
const apiTokens = [
|
||||||
|
|||||||
+10
-1
@@ -32,6 +32,11 @@ interface AosState {
|
|||||||
setSidebarOpen: (open: boolean) => void
|
setSidebarOpen: (open: boolean) => void
|
||||||
commandOpen: boolean
|
commandOpen: boolean
|
||||||
setCommandOpen: (open: boolean) => void
|
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>()(
|
export const useAos = create<AosState>()(
|
||||||
@@ -47,7 +52,11 @@ export const useAos = create<AosState>()(
|
|||||||
setSidebarOpen: (sidebarOpen) => set({ sidebarOpen }),
|
setSidebarOpen: (sidebarOpen) => set({ sidebarOpen }),
|
||||||
commandOpen: false,
|
commandOpen: false,
|
||||||
setCommandOpen: (commandOpen) => set({ commandOpen }),
|
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 }) }
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
Reference in new issue
Block a user