683 lines
37 KiB
Plaintext
683 lines
37 KiB
Plaintext
1→'use client'
|
|
2→
|
|
3→import { useEffect, useState } from 'react'
|
|
4→import { db as _db } from '@/lib/db' // not used — placeholder for type alignment
|
|
5→import { useAos } from '@/store/aos'
|
|
6→import { useFetch } from '@/hooks/use-fetch'
|
|
7→import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
8→import { Badge } from '@/components/ui/badge'
|
|
9→import { Button } from '@/components/ui/button'
|
|
10→import { Input } from '@/components/ui/input'
|
|
11→import { Label } from '@/components/ui/label'
|
|
12→import { Skeleton } from '@/components/ui/skeleton'
|
|
13→import { ScrollArea } from '@/components/ui/scroll-area'
|
|
14→import { Progress } from '@/components/ui/progress'
|
|
15→import {
|
|
16→ Dialog,
|
|
17→ DialogContent,
|
|
18→ DialogHeader,
|
|
19→ DialogTitle,
|
|
20→ DialogFooter,
|
|
21→ DialogDescription,
|
|
22→} from '@/components/ui/dialog'
|
|
23→import { Textarea } from '@/components/ui/textarea'
|
|
24→import {
|
|
25→ Building2,
|
|
26→ ArrowLeft,
|
|
27→ FolderKanban,
|
|
28→ Receipt,
|
|
29→ LifeBuoy,
|
|
30→ CheckCircle2,
|
|
31→ Clock,
|
|
32→ ShieldCheck,
|
|
33→ Check,
|
|
34→ X,
|
|
35→ Loader2,
|
|
36→ KeyRound,
|
|
37→ AlertTriangle,
|
|
38→ Bell,
|
|
39→ Info,
|
|
40→} from 'lucide-react'
|
|
41→import { formatEuro, formatDate, formatRelative, daysUntil } from '@/lib/format'
|
|
42→import { cn } from '@/lib/utils'
|
|
43→import { toast } from 'sonner'
|
|
44→import {
|
|
45→ Popover,
|
|
46→ PopoverContent,
|
|
47→ PopoverTrigger,
|
|
48→} from '@/components/ui/popover'
|
|
49→import { Footer } from './footer'
|
|
50→
|
|
51→void _db
|
|
52→
|
|
53→interface PortalCompany {
|
|
54→ id: string
|
|
55→ name: string
|
|
56→ legalForm: string | null
|
|
57→ city: string | null
|
|
58→ projectCount: number
|
|
59→ invoiceCount: number
|
|
60→ licenseCount: number
|
|
61→ contactName: string | null
|
|
62→ contactEmail: string | null
|
|
63→}
|
|
64→
|
|
65→interface PortalData {
|
|
66→ company: { id: string; name: string; legalForm: string | null; city: string | null }
|
|
67→ kpis: {
|
|
68→ openProjects: number
|
|
69→ unpaidCents: number
|
|
70→ unpaidInvoiceCount: number
|
|
71→ openTickets: number
|
|
72→ pendingApprovals: number
|
|
73→ activeLicenses: number
|
|
74→ }
|
|
75→ projects: {
|
|
76→ id: string; name: string; type: string; status: string; progress: number
|
|
77→ budgetType: string; spentHours: number; budgetHours: number | null
|
|
78→ dueDate: string | null; taskCount: number; doneTasks: number
|
|
79→ }[]
|
|
80→ invoices: {
|
|
81→ id: string; number: string; status: string; type: string
|
|
82→ issueDate: string; dueDate: string; grossCents: number
|
|
83→ zugferd: boolean; xrechnung: boolean; lineCount: number
|
|
84→ }[]
|
|
85→ tickets: {
|
|
86→ id: string; number: string; subject: string; status: string; priority: string
|
|
87→ messageCount: number; lastMessageAt: string
|
|
88→ }[]
|
|
89→ approvals: {
|
|
90→ id: string; title: string; description: string | null; status: string
|
|
91→ decidedAt: string | null; decidedBy: string | null; decidedIp: string | null
|
|
92→ decision: string | null; createdAt: string
|
|
93→ }[]
|
|
94→ licenses: {
|
|
95→ id: string; key: string; product: string; plan: string; status: string
|
|
96→ validUntil: string | null; activations: { domain: string; environment: string }[]
|
|
97→ }[]
|
|
98→}
|
|
99→
|
|
100→export function PortalShell() {
|
|
101→ const { portalMode, portalCompanyId, setPortalMode, setPortalCompany } = useAos()
|
|
102→ const [tab, setTab] = useState<'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses'>('overview')
|
|
103→
|
|
104→ // If portal mode is on but no company selected, show the login/selection screen
|
|
105→ if (portalMode && !portalCompanyId) {
|
|
106→ return <PortalLogin onBack={() => setPortalMode(false)} onSelect={(id) => setPortalCompany(id)} />
|
|
107→ }
|
|
108→
|
|
109→ if (portalMode && portalCompanyId) {
|
|
110→ return (
|
|
111→ <PortalApp
|
|
112→ companyId={portalCompanyId}
|
|
113→ tab={tab}
|
|
114→ setTab={setTab}
|
|
115→ onExit={() => { setPortalMode(false); setPortalCompany(null) }}
|
|
116→ />
|
|
117→ )
|
|
118→ }
|
|
119→
|
|
120→ return null
|
|
121→}
|
|
122→
|
|
123→function PortalLogin({ onBack, onSelect }: { onBack: () => void; onSelect: (id: string) => void }) {
|
|
124→ const { data, loading } = useFetch<{ companies: PortalCompany[] }>('/api/aos/portal/companies')
|
|
125→ const [q, setQ] = useState('')
|
|
126→
|
|
127→ return (
|
|
128→ <div className="flex min-h-screen flex-col bg-muted/30">
|
|
129→ <header className="flex h-16 items-center gap-3 border-b border-border bg-background px-4 md:px-6">
|
|
130→ <Button variant="ghost" size="sm" className="gap-1.5" onClick={onBack}>
|
|
131→ <ArrowLeft className="size-4" />Zur Agentur-Ansicht
|
|
132→ </Button>
|
|
133→ <div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
|
|
134→ <ShieldCheck className="size-3.5" />Sichere Verbindung
|
|
135→ </div>
|
|
136→ </header>
|
|
137→ <main className="mx-auto w-full max-w-3xl flex-1 p-4 md:p-8">
|
|
138→ <div className="mb-6 space-y-1.5">
|
|
139→ <h1 className="text-2xl font-semibold tracking-tight">Client-Portal</h1>
|
|
140→ <p className="text-sm text-muted-foreground">
|
|
141→ Wähle dein Unternehmen. Du siehst ausschließlich deine eigenen Projekte, Rechnungen, Tickets und Freigaben.
|
|
142→ </p>
|
|
143→ </div>
|
|
144→ <div className="mb-4">
|
|
145→ <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Firma suchen…" className="max-w-sm" />
|
|
146→ </div>
|
|
147→ {loading || !data ? (
|
|
148→ <div className="space-y-2">
|
|
149→ {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-20 w-full" />)}
|
|
150→ </div>
|
|
151→ ) : (
|
|
152→ <div className="space-y-2">
|
|
153→ {data.companies
|
|
154→ .filter((c) => c.name.toLowerCase().includes(q.toLowerCase()))
|
|
155→ .map((c) => (
|
|
156→ <button
|
|
157→ key={c.id}
|
|
158→ onClick={() => onSelect(c.id)}
|
|
159→ 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"
|
|
160→ >
|
|
161→ <div className="flex size-12 items-center justify-center rounded-md bg-muted">
|
|
162→ <Building2 className="size-5 text-muted-foreground" />
|
|
163→ </div>
|
|
164→ <div className="min-w-0 flex-1">
|
|
165→ <div className="flex items-center gap-2">
|
|
166→ <span className="truncate text-sm font-semibold">{c.name}</span>
|
|
167→ {c.legalForm && <Badge variant="outline" className="text-[10px]">{c.legalForm}</Badge>}
|
|
168→ </div>
|
|
169→ <p className="mt-0.5 truncate text-xs text-muted-foreground">{c.contactName ?? '—'} · {c.contactEmail ?? '—'}</p>
|
|
170→ <div className="mt-1.5 flex items-center gap-3 text-[11px] text-muted-foreground">
|
|
171→ <span className="flex items-center gap-1"><FolderKanban className="size-3" />{c.projectCount} Projekte</span>
|
|
172→ <span className="flex items-center gap-1"><Receipt className="size-3" />{c.invoiceCount} Rechnungen</span>
|
|
173→ <span className="flex items-center gap-1"><KeyRound className="size-3" />{c.licenseCount} Lizenzen</span>
|
|
174→ </div>
|
|
175→ </div>
|
|
176→ <ArrowLeft className="size-4 rotate-180 text-muted-foreground" />
|
|
177→ </button>
|
|
178→ ))}
|
|
179→ </div>
|
|
180→ )}
|
|
181→ </main>
|
|
182→ <Footer />
|
|
183→ </div>
|
|
184→ )
|
|
185→}
|
|
186→
|
|
187→function PortalApp({ companyId, tab, setTab, onExit }: {
|
|
188→ companyId: string
|
|
189→ tab: 'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses'
|
|
190→ setTab: (t: 'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses') => void
|
|
191→ onExit: () => void
|
|
192→}) {
|
|
193→ const { data, loading, refetch } = useFetch<PortalData>(`/api/aos/portal/companies/${companyId}`)
|
|
194→
|
|
195→ if (loading || !data) {
|
|
196→ return (
|
|
197→ <div className="flex min-h-screen flex-col bg-muted/30">
|
|
198→ <header className="flex h-16 items-center gap-3 border-b border-border bg-background px-4 md:px-6">
|
|
199→ <Skeleton className="h-8 w-32" />
|
|
200→ </header>
|
|
201→ <main className="flex-1 p-6"><Skeleton className="h-96 w-full" /></main>
|
|
202→ </div>
|
|
203→ )
|
|
204→ }
|
|
205→
|
|
206→ return (
|
|
207→ <div className="flex min-h-screen flex-col bg-muted/30">
|
|
208→ {/* Portal header */}
|
|
209→ <header className="flex h-16 items-center gap-3 border-b border-border bg-background px-4 md:px-6">
|
|
210→ <Button variant="ghost" size="sm" className="gap-1.5" onClick={onExit}>
|
|
211→ <ArrowLeft className="size-4" />Agentur-Ansicht
|
|
212→ </Button>
|
|
213→ <div className="ml-2 flex items-center gap-2">
|
|
214→ <div className="flex size-9 items-center justify-center rounded-md bg-primary text-primary-foreground">
|
|
215→ <Building2 className="size-4" />
|
|
216→ </div>
|
|
217→ <div className="leading-tight">
|
|
218→ <p className="text-sm font-semibold">{data.company.name}</p>
|
|
219→ <p className="text-[10px] text-muted-foreground">Client-Portal · {data.company.legalForm ?? ''} {data.company.city ?? ''}</p>
|
|
220→ </div>
|
|
221→ </div>
|
|
222→ <div className="ml-auto flex items-center gap-2">
|
|
223→ <PortalNotificationsBell companyId={data.company.id} />
|
|
224→ <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
225→ <ShieldCheck className="size-3.5" />Sicher geschützt
|
|
226→ </div>
|
|
227→ </div>
|
|
228→ </header>
|
|
229→
|
|
230→ {/* Tab nav */}
|
|
231→ <div className="border-b border-border bg-background px-4 md:px-6">
|
|
232→ <div className="flex gap-1 overflow-x-auto py-2">
|
|
233→ {([
|
|
234→ { id: 'overview', label: 'Übersicht', icon: Building2 },
|
|
235→ { id: 'approvals', label: `Freigaben${data.kpis.pendingApprovals > 0 ? ` (${data.kpis.pendingApprovals})` : ''}`, icon: CheckCircle2 },
|
|
236→ { id: 'invoices', label: 'Rechnungen', icon: Receipt },
|
|
237→ { id: 'tickets', label: 'Tickets', icon: LifeBuoy },
|
|
238→ { id: 'licenses', label: 'Lizenzen', icon: KeyRound },
|
|
239→ ] as const).map((t) => {
|
|
240→ const Icon = t.icon
|
|
241→ const active = tab === t.id
|
|
242→ return (
|
|
243→ <button
|
|
244→ key={t.id}
|
|
245→ onClick={() => setTab(t.id)}
|
|
246→ className={cn(
|
|
247→ 'flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition',
|
|
248→ active ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/50'
|
|
249→ )}
|
|
250→ >
|
|
251→ <Icon className="size-3.5" />
|
|
252→ {t.label}
|
|
253→ </button>
|
|
254→ )
|
|
255→ })}
|
|
256→ </div>
|
|
257→ </div>
|
|
258→
|
|
259→ {/* Content */}
|
|
260→ <main className="flex-1 p-4 md:p-6">
|
|
261→ {tab === 'overview' && <PortalOverview data={data} setTab={setTab} />}
|
|
262→ {tab === 'approvals' && <PortalApprovals data={data} refetch={refetch} />}
|
|
263→ {tab === 'invoices' && <PortalInvoices data={data} />}
|
|
264→ {tab === 'tickets' && <PortalTickets data={data} />}
|
|
265→ {tab === 'licenses' && <PortalLicenses data={data} />}
|
|
266→ </main>
|
|
267→ <Footer />
|
|
268→ </div>
|
|
269→ )
|
|
270→}
|
|
271→
|
|
272→function PortalOverview({ data, setTab }: { data: PortalData; setTab: (t: 'overview' | 'approvals' | 'invoices' | 'tickets' | 'licenses') => void }) {
|
|
273→ return (
|
|
274→ <div className="space-y-6">
|
|
275→ {/* Welcome banner */}
|
|
276→ <Card className="border-foreground/20 bg-gradient-to-br from-foreground/5 to-transparent">
|
|
277→ <CardContent className="flex items-center gap-4 p-5">
|
|
278→ <div className="flex size-12 items-center justify-center rounded-xl bg-foreground text-background">
|
|
279→ <Building2 className="size-6" />
|
|
280→ </div>
|
|
281→ <div className="flex-1">
|
|
282→ <h2 className="text-lg font-semibold">Willkommen, {data.company.name}</h2>
|
|
283→ <p className="text-xs text-muted-foreground">
|
|
284→ Du siehst ausschließlich deine eigenen Daten — sicher und geschützt.
|
|
285→ {data.kpis.pendingApprovals > 0 && <span className="font-medium text-foreground"> {data.kpis.pendingApprovals} Freigabe(n) warten auf dich.</span>}
|
|
286→ </p>
|
|
287→ </div>
|
|
288→ {data.kpis.pendingApprovals > 0 && (
|
|
289→ <Button size="sm" className="gap-1.5" onClick={() => setTab('approvals')}>
|
|
290→ <CheckCircle2 className="size-4" />
|
|
291→ Freigaben ({data.kpis.pendingApprovals})
|
|
292→ </Button>
|
|
293→ )}
|
|
294→ </CardContent>
|
|
295→ </Card>
|
|
296→
|
|
297→ <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
|
298→ <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>
|
|
299→ <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>
|
|
300→ <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>
|
|
301→ <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>
|
|
302→ <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>
|
|
303→ </div>
|
|
304→
|
|
305→ <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
|
306→ {/* Pending approvals */}
|
|
307→ <Card>
|
|
308→ <CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
309→ <CardTitle className="flex items-center gap-2 text-sm"><Clock className="size-3.5 text-muted-foreground" />Wartende Freigaben</CardTitle>
|
|
310→ <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => setTab('approvals')}>Alle</Button>
|
|
311→ </CardHeader>
|
|
312→ <CardContent className="space-y-2">
|
|
313→ {data.approvals.filter((a) => a.status === 'pending').slice(0, 4).map((a) => (
|
|
314→ <div key={a.id} className="rounded-md border border-border p-3">
|
|
315→ <p className="text-xs font-medium">{a.title}</p>
|
|
316→ {a.description && <p className="mt-0.5 text-[11px] text-muted-foreground">{a.description}</p>}
|
|
317→ <p className="mt-1 text-[10px] text-muted-foreground">Eingereicht {formatRelative(a.createdAt)}</p>
|
|
318→ </div>
|
|
319→ ))}
|
|
320→ {data.approvals.filter((a) => a.status === 'pending').length === 0 && (
|
|
321→ <p className="py-4 text-center text-xs text-muted-foreground">Keine offenen Freigaben.</p>
|
|
322→ )}
|
|
323→ </CardContent>
|
|
324→ </Card>
|
|
325→
|
|
326→ {/* Projects */}
|
|
327→ <Card>
|
|
328→ <CardHeader className="pb-2"><CardTitle className="text-sm">Meine Projekte ({data.projects.length})</CardTitle></CardHeader>
|
|
329→ <CardContent className="space-y-2">
|
|
330→ {data.projects.slice(0, 4).map((p) => (
|
|
331→ <div key={p.id} className="rounded-md border border-border p-3">
|
|
332→ <div className="flex items-center justify-between">
|
|
333→ <p className="truncate text-xs font-medium">{p.name}</p>
|
|
334→ <Badge variant="outline" className="text-[10px] capitalize">{p.status}</Badge>
|
|
335→ </div>
|
|
336→ <div className="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
|
|
337→ <span>{p.doneTasks}/{p.taskCount} Aufgaben</span>
|
|
338→ <span>{p.progress}%</span>
|
|
339→ </div>
|
|
340→ <Progress value={p.progress} className="mt-1 h-1" />
|
|
341→ </div>
|
|
342→ ))}
|
|
343→ </CardContent>
|
|
344→ </Card>
|
|
345→ </div>
|
|
346→
|
|
347→ {/* Recent invoices */}
|
|
348→ <Card>
|
|
349→ <CardHeader className="pb-2"><CardTitle className="text-sm">Letzte Rechnungen</CardTitle></CardHeader>
|
|
350→ <CardContent className="p-0">
|
|
351→ <div className="overflow-x-auto">
|
|
352→ <table className="w-full text-sm">
|
|
353→ <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
|
|
354→ <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>
|
|
355→ </thead>
|
|
356→ <tbody className="divide-y divide-border">
|
|
357→ {data.invoices.slice(0, 5).map((i) => (
|
|
358→ <tr key={i.id}>
|
|
359→ <td className="px-4 py-2.5"><code className="font-mono text-[11px]">{i.number}</code></td>
|
|
360→ <td className="px-4 py-2.5 text-xs">{formatDate(i.issueDate)}</td>
|
|
361→ <td className="px-4 py-2.5 text-xs">{formatDate(i.dueDate)}</td>
|
|
362→ <td className="px-4 py-2.5 text-right text-xs font-semibold tabular-nums">{formatEuro(i.grossCents)}</td>
|
|
363→ <td className="px-4 py-2.5"><Badge variant="outline" className="text-[10px] capitalize">{i.status}</Badge></td>
|
|
364→ </tr>
|
|
365→ ))}
|
|
366→ </tbody>
|
|
367→ </table>
|
|
368→ </div>
|
|
369→ </CardContent>
|
|
370→ </Card>
|
|
371→ </div>
|
|
372→ )
|
|
373→}
|
|
374→
|
|
375→function PortalApprovals({ data, refetch }: { data: PortalData; refetch: () => void }) {
|
|
376→ const [deciding, setDeciding] = useState<string | null>(null)
|
|
377→ const [decision, setDecision] = useState<'approved' | 'rejected' | 'changes-requested'>('approved')
|
|
378→ const [feedback, setFeedback] = useState('')
|
|
379→ const [dialogOpen, setDialogOpen] = useState(false)
|
|
380→ const [busy, setBusy] = useState(false)
|
|
381→
|
|
382→ const openDecision = (approvalId: string, dec: 'approved' | 'rejected' | 'changes-requested') => {
|
|
383→ setDeciding(approvalId)
|
|
384→ setDecision(dec)
|
|
385→ setFeedback('')
|
|
386→ setDialogOpen(true)
|
|
387→ }
|
|
388→
|
|
389→ const submit = async () => {
|
|
390→ if (!deciding) return
|
|
391→ setBusy(true)
|
|
392→ const t = toast.loading('Freigabe wird gespeichert (IP + Zeitstempel)…')
|
|
393→ try {
|
|
394→ const r = await fetch(`/api/aos/portal/approvals/${deciding}/decide`, {
|
|
395→ method: 'PATCH',
|
|
396→ headers: { 'content-type': 'application/json' },
|
|
397→ body: JSON.stringify({ decision, decidedBy: data.company.name, feedback }),
|
|
398→ })
|
|
399→ const res = await r.json()
|
|
400→ if (!r.ok) throw new Error(res.error || 'decide failed')
|
|
401→ toast.success(`Freigabe ${decision === 'approved' ? 'akzeptiert' : decision === 'rejected' ? 'abgelehnt' : 'mit Änderungswunsch'} (IP: ${res.evidence.decidedIp})`, { id: t })
|
|
402→ setDialogOpen(false)
|
|
403→ refetch()
|
|
404→ } catch (err) {
|
|
405→ toast.error(err instanceof Error ? err.message : 'Speichern fehlgeschlagen', { id: t })
|
|
406→ } finally {
|
|
407→ setBusy(false)
|
|
408→ }
|
|
409→ }
|
|
410→
|
|
411→ const statusMeta: Record<string, { label: string; cls: string }> = {
|
|
412→ pending: { label: 'Wartend', cls: 'bg-foreground/50 text-background' },
|
|
413→ approved: { label: 'Freigegeben', cls: 'bg-foreground text-background' },
|
|
414→ rejected: { label: 'Abgelehnt', cls: 'bg-muted text-muted-foreground' },
|
|
415→ 'changes-requested': { label: 'Änderung gewünscht', cls: 'bg-muted text-foreground' },
|
|
416→ }
|
|
417→
|
|
418→ return (
|
|
419→ <div className="space-y-4">
|
|
420→ <div className="flex items-center gap-2">
|
|
421→ <CheckCircle2 className="size-5 text-muted-foreground" />
|
|
422→ <div>
|
|
423→ <h1 className="text-lg font-semibold">Freigaben</h1>
|
|
424→ <p className="text-xs text-muted-foreground">Meilenstein-Freigaben mit Zeitstempel- und IP-Evidenz.</p>
|
|
425→ </div>
|
|
426→ </div>
|
|
427→
|
|
428→ <div className="space-y-2">
|
|
429→ {data.approvals.map((a) => {
|
|
430→ const meta = statusMeta[a.status] ?? statusMeta.pending
|
|
431→ return (
|
|
432→ <Card key={a.id} className="p-4">
|
|
433→ <div className="flex items-start justify-between gap-3">
|
|
434→ <div className="min-w-0 flex-1">
|
|
435→ <div className="flex items-center gap-2">
|
|
436→ <p className="text-sm font-medium">{a.title}</p>
|
|
437→ <Badge variant="outline" className={cn('text-[10px]', meta.cls)}>{meta.label}</Badge>
|
|
438→ </div>
|
|
439→ {a.description && <p className="mt-1 text-xs text-muted-foreground">{a.description}</p>}
|
|
440→ {a.status !== 'pending' && (
|
|
441→ <div className="mt-2 space-y-0.5 text-[10px] text-muted-foreground">
|
|
442→ <p>Entschieden: {formatDate(a.decidedAt!)} von {a.decidedBy}</p>
|
|
443→ <p>IP-Evidenz: <code className="font-mono">{a.decidedIp}</code></p>
|
|
444→ {a.decision && <p className="italic">„{a.decision}"</p>}
|
|
445→ </div>
|
|
446→ )}
|
|
447→ {a.status === 'pending' && (
|
|
448→ <p className="mt-1 text-[10px] text-muted-foreground">Eingereicht {formatRelative(a.createdAt)}</p>
|
|
449→ )}
|
|
450→ </div>
|
|
451→ {a.status === 'pending' && (
|
|
452→ <div className="flex shrink-0 gap-1.5">
|
|
453→ <Button size="sm" className="h-8 gap-1 text-xs" onClick={() => openDecision(a.id, 'approved')}>
|
|
454→ <Check className="size-3.5" />Freigeben
|
|
455→ </Button>
|
|
456→ <Button size="sm" variant="outline" className="h-8 gap-1 text-xs" onClick={() => openDecision(a.id, 'changes-requested')}>
|
|
457→ <AlertTriangle className="size-3.5" />Änderung
|
|
458→ </Button>
|
|
459→ <Button size="sm" variant="ghost" className="h-8 gap-1 text-xs text-muted-foreground" onClick={() => openDecision(a.id, 'rejected')}>
|
|
460→ <X className="size-3.5" />Ablehnen
|
|
461→ </Button>
|
|
462→ </div>
|
|
463→ )}
|
|
464→ </div>
|
|
465→ </Card>
|
|
466→ )
|
|
467→ })}
|
|
468→ {data.approvals.length === 0 && <p className="py-8 text-center text-xs text-muted-foreground">Keine Freigaben.</p>}
|
|
469→ </div>
|
|
470→
|
|
471→ <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
472→ <DialogContent className="sm:max-w-md">
|
|
473→ <DialogHeader>
|
|
474→ <DialogTitle>
|
|
475→ {decision === 'approved' && 'Freigabe bestätigen'}
|
|
476→ {decision === 'rejected' && 'Freigabe ablehnen'}
|
|
477→ {decision === 'changes-requested' && 'Änderungswunsch senden'}
|
|
478→ </DialogTitle>
|
|
479→ <DialogDescription>
|
|
480→ Deine Entscheidung wird mit Zeitstempel und IP-Adresse gespeichert (eIDAS Art. 25 AdES).
|
|
481→ </DialogDescription>
|
|
482→ </DialogHeader>
|
|
483→ <div className="space-y-3">
|
|
484→ <div className="space-y-1.5">
|
|
485→ <Label className="text-xs">Kommentar / Feedback (optional)</Label>
|
|
486→ <Textarea value={feedback} onChange={(e) => setFeedback(e.target.value)} placeholder="z.B. Bitte Kontrast erhöhen…" className="min-h-[80px] text-sm" />
|
|
487→ </div>
|
|
488→ <div className="rounded-md border border-dashed border-border p-2.5 text-[10px] text-muted-foreground">
|
|
489→ <p className="flex items-center gap-1.5"><ShieldCheck className="size-3" />Evidenz: {new Date().toLocaleString('de-DE')} · IP wird erfasst</p>
|
|
490→ </div>
|
|
491→ </div>
|
|
492→ <DialogFooter>
|
|
493→ <Button variant="outline" onClick={() => setDialogOpen(false)}>Abbrechen</Button>
|
|
494→ <Button onClick={submit} disabled={busy} className="gap-1.5">
|
|
495→ {busy && <Loader2 className="size-3.5 animate-spin" />}
|
|
496→ {decision === 'approved' ? 'Freigeben' : decision === 'rejected' ? 'Ablehnen' : 'Senden'}
|
|
497→ </Button>
|
|
498→ </DialogFooter>
|
|
499→ </DialogContent>
|
|
500→ </Dialog>
|
|
501→ </div>
|
|
502→ )
|
|
503→}
|
|
504→
|
|
505→function PortalInvoices({ data }: { data: PortalData }) {
|
|
506→ return (
|
|
507→ <div className="space-y-4">
|
|
508→ <div className="flex items-center gap-2">
|
|
509→ <Receipt className="size-5 text-muted-foreground" />
|
|
510→ <div>
|
|
511→ <h1 className="text-lg font-semibold">Rechnungen ({data.invoices.length})</h1>
|
|
512→ <p className="text-xs text-muted-foreground">Deine Rechnungen — Ansicht nur für dein Unternehmen.</p>
|
|
513→ </div>
|
|
514→ </div>
|
|
515→ <Card>
|
|
516→ <CardContent className="p-0">
|
|
517→ <div className="overflow-x-auto">
|
|
518→ <table className="w-full text-sm">
|
|
519→ <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
|
|
520→ <tr>
|
|
521→ <th className="px-4 py-2 font-medium">Nr.</th>
|
|
522→ <th className="px-4 py-2 font-medium">Typ</th>
|
|
523→ <th className="px-4 py-2 font-medium">Datum</th>
|
|
524→ <th className="px-4 py-2 font-medium">Fällig</th>
|
|
525→ <th className="px-4 py-2 font-medium text-right">Betrag</th>
|
|
526→ <th className="px-4 py-2 font-medium">E-Rechnung</th>
|
|
527→ <th className="px-4 py-2 font-medium">Status</th>
|
|
528→ </tr>
|
|
529→ </thead>
|
|
530→ <tbody className="divide-y divide-border">
|
|
531→ {data.invoices.map((i) => {
|
|
532→ const due = daysUntil(i.dueDate)
|
|
533→ return (
|
|
534→ <tr key={i.id}>
|
|
535→ <td className="px-4 py-2.5"><code className="font-mono text-[11px]">{i.number}</code></td>
|
|
536→ <td className="px-4 py-2.5 text-xs text-muted-foreground">{i.type}</td>
|
|
537→ <td className="px-4 py-2.5 text-xs">{formatDate(i.issueDate)}</td>
|
|
538→ <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>
|
|
539→ <td className="px-4 py-2.5 text-right text-xs font-semibold tabular-nums">{formatEuro(i.grossCents)}</td>
|
|
540→ <td className="px-4 py-2.5">
|
|
541→ <div className="flex gap-1">
|
|
542→ {i.zugferd && <Badge variant="outline" className="text-[9px]">ZUGFeRD</Badge>}
|
|
543→ {i.xrechnung && <Badge variant="outline" className="text-[9px]">XRechnung</Badge>}
|
|
544→ </div>
|
|
545→ </td>
|
|
546→ <td className="px-4 py-2.5"><Badge variant="outline" className="text-[10px] capitalize">{i.status}</Badge></td>
|
|
547→ </tr>
|
|
548→ )
|
|
549→ })}
|
|
550→ </tbody>
|
|
551→ </table>
|
|
552→ </div>
|
|
553→ </CardContent>
|
|
554→ </Card>
|
|
555→ </div>
|
|
556→ )
|
|
557→}
|
|
558→
|
|
559→function PortalTickets({ data }: { data: PortalData }) {
|
|
560→ return (
|
|
561→ <div className="space-y-4">
|
|
562→ <div className="flex items-center justify-between">
|
|
563→ <div className="flex items-center gap-2">
|
|
564→ <LifeBuoy className="size-5 text-muted-foreground" />
|
|
565→ <div>
|
|
566→ <h1 className="text-lg font-semibold">Tickets ({data.tickets.length})</h1>
|
|
567→ <p className="text-xs text-muted-foreground">Support-Anfragen und Konversationen.</p>
|
|
568→ </div>
|
|
569→ </div>
|
|
570→ <Button size="sm"><LifeBuoy className="size-4" />Neues Ticket</Button>
|
|
571→ </div>
|
|
572→ <div className="space-y-2">
|
|
573→ {data.tickets.map((t) => (
|
|
574→ <Card key={t.id} className="p-4">
|
|
575→ <div className="flex items-start justify-between gap-3">
|
|
576→ <div className="min-w-0 flex-1">
|
|
577→ <div className="flex items-center gap-2">
|
|
578→ <code className="text-[10px] font-mono text-muted-foreground">{t.number}</code>
|
|
579→ {t.priority === 'urgent' && <Badge variant="outline" className="text-[9px]">DRINGEND</Badge>}
|
|
580→ </div>
|
|
581→ <p className="mt-0.5 truncate text-sm font-medium">{t.subject}</p>
|
|
582→ <p className="mt-1 text-[10px] text-muted-foreground">{t.messageCount} Nachrichten · letzte {formatRelative(t.lastMessageAt)}</p>
|
|
583→ </div>
|
|
584→ <Badge variant="outline" className="text-[10px] capitalize">{t.status}</Badge>
|
|
585→ </div>
|
|
586→ </Card>
|
|
587→ ))}
|
|
588→ {data.tickets.length === 0 && <p className="py-8 text-center text-xs text-muted-foreground">Keine Tickets.</p>}
|
|
589→ </div>
|
|
590→ </div>
|
|
591→ )
|
|
592→}
|
|
593→
|
|
594→function PortalLicenses({ data }: { data: PortalData }) {
|
|
595→ return (
|
|
596→ <div className="space-y-4">
|
|
597→ <div className="flex items-center gap-2">
|
|
598→ <KeyRound className="size-5 text-muted-foreground" />
|
|
599→ <div>
|
|
600→ <h1 className="text-lg font-semibold">Lizenzen ({data.licenses.length})</h1>
|
|
601→ <p className="text-xs text-muted-foreground">Deine Produkt-Lizenzen und Aktivierungen.</p>
|
|
602→ </div>
|
|
603→ </div>
|
|
604→ <div className="space-y-2">
|
|
605→ {data.licenses.map((l) => (
|
|
606→ <Card key={l.id} className="p-4">
|
|
607→ <div className="flex items-start justify-between gap-3">
|
|
608→ <div className="min-w-0 flex-1">
|
|
609→ <div className="flex items-center gap-2">
|
|
610→ <p className="text-sm font-medium">{l.product}</p>
|
|
611→ <Badge variant="outline" className="text-[10px] capitalize">{l.plan}</Badge>
|
|
612→ </div>
|
|
613→ <code className="mt-1 block text-[10px] font-mono text-muted-foreground">{l.key}</code>
|
|
614→ <div className="mt-1.5 space-y-0.5 text-[10px] text-muted-foreground">
|
|
615→ {l.activations.map((a, i) => <p key={i}>↳ {a.domain} ({a.environment})</p>)}
|
|
616→ {l.validUntil && <p>Gültig bis: {formatDate(l.validUntil)}</p>}
|
|
617→ </div>
|
|
618→ </div>
|
|
619→ <Badge variant="outline" className="text-[10px] capitalize">{l.status}</Badge>
|
|
620→ </div>
|
|
621→ </Card>
|
|
622→ ))}
|
|
623→ </div>
|
|
624→ </div>
|
|
625→ )
|
|
626→}
|
|
627→
|
|
628→// Portal notifications bell — client-scoped
|
|
629→function PortalNotificationsBell({ companyId }: { companyId: string }) {
|
|
630→ const [open, setOpen] = useState(false)
|
|
631→ const { data } = useFetch<{ notifications: { id: string; type: string; title: string; detail: string; module: string; daysUntil: number }[]; stats: { total: number; urgent: number; warning: number; info: number } }>(`/api/aos/portal/companies/${companyId}/notifications`)
|
|
632→
|
|
633→ const notifs = data?.notifications ?? []
|
|
634→ const urgent = data?.stats.urgent ?? 0
|
|
635→
|
|
636→ return (
|
|
637→ <Popover open={open} onOpenChange={setOpen}>
|
|
638→ <PopoverTrigger asChild>
|
|
639→ <Button variant="ghost" size="icon" className="relative" aria-label="Benachrichtigungen">
|
|
640→ <Bell className="size-4" />
|
|
641→ {urgent > 0 && (
|
|
642→ <span className="absolute right-1 top-1 flex size-4 items-center justify-center rounded-full bg-foreground text-[9px] font-bold text-background">
|
|
643→ {urgent}
|
|
644→ </span>
|
|
645→ )}
|
|
646→ {urgent === 0 && notifs.length > 0 && (
|
|
647→ <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-foreground/50" />
|
|
648→ )}
|
|
649→ </Button>
|
|
650→ </PopoverTrigger>
|
|
651→ <PopoverContent align="end" className="w-72 p-0">
|
|
652→ <div className="flex items-center justify-between border-b border-border px-3 py-2.5">
|
|
653→ <span className="text-xs font-semibold">Deine Benachrichtigungen</span>
|
|
654→ {notifs.length > 0 && <Badge variant="outline" className="text-[10px]">{notifs.length}</Badge>}
|
|
655→ </div>
|
|
656→ <ScrollArea className="h-72">
|
|
657→ {notifs.length === 0 ? (
|
|
658→ <div className="flex flex-col items-center justify-center gap-2 py-10 text-center">
|
|
659→ <CheckCircle2 className="size-7 text-muted-foreground/50" />
|
|
660→ <p className="text-xs text-muted-foreground">Keine offenen Benachrichtigungen.</p>
|
|
661→ </div>
|
|
662→ ) : (
|
|
663→ <div className="divide-y divide-border">
|
|
664→ {notifs.map((n) => {
|
|
665→ const Icon = n.type === 'urgent' ? AlertTriangle : n.type === 'warning' ? Clock : Info
|
|
666→ return (
|
|
667→ <div key={n.id} className="flex items-start gap-2.5 px-3 py-2.5">
|
|
668→ <Icon className={cn('mt-0.5 size-3.5 shrink-0', n.type === 'urgent' ? 'text-foreground' : n.type === 'warning' ? 'text-foreground/70' : 'text-muted-foreground')} />
|
|
669→ <div className="min-w-0 flex-1">
|
|
670→ <p className="truncate text-xs font-medium">{n.title}</p>
|
|
671→ <p className="mt-0.5 text-[10px] text-muted-foreground">{n.detail}</p>
|
|
672→ </div>
|
|
673→ </div>
|
|
674→ )
|
|
675→ })}
|
|
676→ </div>
|
|
677→ )}
|
|
678→ </ScrollArea>
|
|
679→ </PopoverContent>
|
|
680→ </Popover>
|
|
681→ )
|
|
682→}
|
|
683→ |