f6acc620-0a4c-41b3-9763-6681634541c0
This commit is contained in:
Z User committed
1 parent
f2d4241a1c
commit
e7185103f5
3 files changed
+1632
No files matched your search
@@ -0,0 +1,683 @@
|
||||
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→
|
||||
Reference in new issue
Block a user