feat: reseller self-service portal (clients + licenses + tickets)
- ResellerPortalView with 3 tabs:
1. Kunden: list agency's clients + create new client (POST /api/aos/clients)
2. Lizenzen: list agency-filtered licenses + create new license with
live pricing preview (base + agency discount + yearly discount = net)
3. Tickets: agency-scoped ticket inbox + escalate button
- Top: agency selector (pick which approved reseller to act as)
- Full integration: store, sidebar, top-bar, command-menu, i18n, app-shell
- Mobile responsive, German labels, no indigo/blue
This commit is contained in:
Z User committed
1 parent
ec5e6b1629
commit
39b3636333
9 files changed
+3071
No files matched your search
@@ -0,0 +1,876 @@
|
||||
1→'use client'
|
||||
2→
|
||||
3→import { useMemo, useState } from 'react'
|
||||
4→import {
|
||||
5→ Users,
|
||||
6→ Building2,
|
||||
7→ Globe,
|
||||
8→ MapPin,
|
||||
9→ Clock,
|
||||
10→ Percent,
|
||||
11→ CheckCircle2,
|
||||
12→ XCircle,
|
||||
13→ History,
|
||||
14→ Inbox,
|
||||
15→ Mail,
|
||||
16→ Loader2,
|
||||
17→ ChevronRight,
|
||||
18→ ShoppingBag,
|
||||
19→} from 'lucide-react'
|
||||
20→import { useFetch } from '@/hooks/use-fetch'
|
||||
21→import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
22→import { Badge } from '@/components/ui/badge'
|
||||
23→import { Button } from '@/components/ui/button'
|
||||
24→import { Input } from '@/components/ui/input'
|
||||
25→import { Label } from '@/components/ui/label'
|
||||
26→import { Textarea } from '@/components/ui/textarea'
|
||||
27→import { Skeleton } from '@/components/ui/skeleton'
|
||||
28→import {
|
||||
29→ Dialog,
|
||||
30→ DialogContent,
|
||||
31→ DialogDescription,
|
||||
32→ DialogFooter,
|
||||
33→ DialogHeader,
|
||||
34→ DialogTitle,
|
||||
35→} from '@/components/ui/dialog'
|
||||
36→import {
|
||||
37→ Sheet,
|
||||
38→ SheetContent,
|
||||
39→ SheetDescription,
|
||||
40→ SheetHeader,
|
||||
41→ SheetTitle,
|
||||
42→} from '@/components/ui/sheet'
|
||||
43→import {
|
||||
44→ Collapsible,
|
||||
45→ CollapsibleContent,
|
||||
46→ CollapsibleTrigger,
|
||||
47→} from '@/components/ui/collapsible'
|
||||
48→import { PageHeader } from '../primitives'
|
||||
49→import { FuseButton } from '@/components/FuseButton'
|
||||
50→import { formatRelative, formatDate, formatDateTime } from '@/lib/format'
|
||||
51→import { cn } from '@/lib/utils'
|
||||
52→import { toast } from 'sonner'
|
||||
53→
|
||||
54→/* ----------------------------- types ----------------------------- */
|
||||
55→
|
||||
56→interface AgencyCompany {
|
||||
57→ id: string
|
||||
58→ name: string
|
||||
59→ email: string | null
|
||||
60→ website: string | null
|
||||
61→ city: string | null
|
||||
62→ isAgency: boolean
|
||||
63→ agencyStatus: string | null
|
||||
64→ agencyDiscountPct: number | null
|
||||
65→}
|
||||
66→
|
||||
67→interface AgencyApplication {
|
||||
68→ id: string
|
||||
69→ companyId: string
|
||||
70→ status: 'pending' | 'approved' | 'rejected'
|
||||
71→ discountPct: number
|
||||
72→ businessModel?: string | null
|
||||
73→ expectedClientVolume?: string | null
|
||||
74→ referredBy?: string | null
|
||||
75→ reviewedBy?: string | null
|
||||
76→ reviewedAt?: string | null
|
||||
77→ rejectReason?: string | null
|
||||
78→ appliedAt: string
|
||||
79→ createdAt: string
|
||||
80→ updatedAt: string
|
||||
81→ company: AgencyCompany
|
||||
82→}
|
||||
83→
|
||||
84→interface AgencyClient {
|
||||
85→ id: string
|
||||
86→ name: string
|
||||
87→ email: string | null
|
||||
88→}
|
||||
89→
|
||||
90→interface ApprovedAgency extends AgencyCompany {
|
||||
91→ agencyDiscountPct: number
|
||||
92→ agencyApprovedAt: string
|
||||
93→ agencyClients: AgencyClient[]
|
||||
94→ _count: { agencyClients: number; licenses: number }
|
||||
95→}
|
||||
96→
|
||||
97→interface AgencyData {
|
||||
98→ applications: {
|
||||
99→ pending: AgencyApplication[]
|
||||
100→ reviewed: AgencyApplication[]
|
||||
101→ }
|
||||
102→ agencies: ApprovedAgency[]
|
||||
103→ stats: { pending: number; approved: number; totalApplications: number }
|
||||
104→}
|
||||
105→
|
||||
106→const BASE_PRICE_EUR = 50 // 50 €/Monat base price for preview
|
||||
107→
|
||||
108→/* ----------------------------- view ----------------------------- */
|
||||
109→
|
||||
110→export function AgencyView() {
|
||||
111→ const { data, loading, refetch } = useFetch<AgencyData>('/api/aos/agency')
|
||||
112→
|
||||
113→ if (loading || !data) {
|
||||
114→ return (
|
||||
115→ <div className="space-y-6 p-4 md:p-6">
|
||||
116→ <Skeleton className="h-9 w-32" />
|
||||
117→ <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
118→ {Array.from({ length: 4 }).map((_, i) => (
|
||||
119→ <Skeleton key={i} className="h-24" />
|
||||
120→ ))}
|
||||
121→ </div>
|
||||
122→ <Skeleton className="h-64" />
|
||||
123→ </div>
|
||||
124→ )
|
||||
125→ }
|
||||
126→
|
||||
127→ const { applications, agencies, stats } = data
|
||||
128→ const avgDiscount =
|
||||
129→ agencies.length > 0
|
||||
130→ ? Math.round(
|
||||
131→ agencies.reduce((sum, a) => sum + (a.agencyDiscountPct ?? 0), 0) / agencies.length,
|
||||
132→ )
|
||||
133→ : 0
|
||||
134→
|
||||
135→ return (
|
||||
136→ <div className="space-y-6 p-4 md:p-6">
|
||||
137→ <PageHeader
|
||||
138→ title="Reseller"
|
||||
139→ description="Reseller-Verwaltung: Bewerbungen prüfen, Rabatt-Sätze festlegen (0–20 %) und genehmigte Reseller mit ihren Kunden einsehen."
|
||||
140→ />
|
||||
141→
|
||||
142→ {/* Stats */}
|
||||
143→ <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
144→ <StatCard
|
||||
145→ label="Offene Bewerbungen"
|
||||
146→ value={stats.pending}
|
||||
147→ icon={Inbox}
|
||||
148→ hint="wartet auf Freigabe"
|
||||
149→ />
|
||||
150→ <StatCard
|
||||
151→ label="Genehmigte Reseller"
|
||||
152→ value={stats.approved}
|
||||
153→ icon={Users}
|
||||
154→ hint="aktiv im System"
|
||||
155→ />
|
||||
156→ <StatCard
|
||||
157→ label="Bewerbungen gesamt"
|
||||
158→ value={stats.totalApplications}
|
||||
159→ icon={History}
|
||||
160→ hint="inkl. Verlauf"
|
||||
161→ />
|
||||
162→ <StatCard
|
||||
163→ label="Ø Rabatt"
|
||||
164→ value={`${avgDiscount}%`}
|
||||
165→ icon={Percent}
|
||||
166→ hint={agencies.length ? `über ${agencies.length} Reseller` : '—'}
|
||||
167→ />
|
||||
168→ </div>
|
||||
169→
|
||||
170→ <PendingApplicationsSection applications={applications.pending} onChanged={refetch} />
|
||||
171→ <ApprovedAgenciesSection agencies={agencies} />
|
||||
172→ <ReviewedSection applications={applications.reviewed} />
|
||||
173→ </div>
|
||||
174→ )
|
||||
175→}
|
||||
176→
|
||||
177→/* ----------------------------- stats card ----------------------------- */
|
||||
178→
|
||||
179→function StatCard({
|
||||
180→ label,
|
||||
181→ value,
|
||||
182→ icon: Icon,
|
||||
183→ hint,
|
||||
184→}: {
|
||||
185→ label: string
|
||||
186→ value: number | string
|
||||
187→ icon: typeof Inbox
|
||||
188→ hint?: string
|
||||
189→}) {
|
||||
190→ return (
|
||||
191→ <Card className="p-4">
|
||||
192→ <div className="flex items-center justify-between">
|
||||
193→ <p className="text-xs text-muted-foreground">{label}</p>
|
||||
194→ <Icon className="size-3.5 text-muted-foreground" />
|
||||
195→ </div>
|
||||
196→ <p className="mt-1 text-2xl font-semibold tabular-nums">{value}</p>
|
||||
197→ {hint && <p className="text-[10px] text-muted-foreground">{hint}</p>}
|
||||
198→ </Card>
|
||||
199→ )
|
||||
200→}
|
||||
201→
|
||||
202→/* ----------------------------- pending applications ----------------------------- */
|
||||
203→
|
||||
204→function PendingApplicationsSection({
|
||||
205→ applications,
|
||||
206→ onChanged,
|
||||
207→}: {
|
||||
208→ applications: AgencyApplication[]
|
||||
209→ onChanged: () => void
|
||||
210→}) {
|
||||
211→ const [approveTarget, setApproveTarget] = useState<AgencyApplication | null>(null)
|
||||
212→ const [rejectTarget, setRejectTarget] = useState<AgencyApplication | null>(null)
|
||||
213→
|
||||
214→ return (
|
||||
215→ <section className="space-y-3">
|
||||
216→ <div className="flex items-center justify-between">
|
||||
217→ <h2 className="text-sm font-semibold tracking-tight">
|
||||
218→ Bewerbende Reseller
|
||||
219→ <span className="ml-2 text-xs font-normal text-muted-foreground">
|
||||
220→ {applications.length} offen
|
||||
221→ </span>
|
||||
222→ </h2>
|
||||
223→ </div>
|
||||
224→
|
||||
225→ {applications.length === 0 ? (
|
||||
226→ <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-14 text-center">
|
||||
227→ <div className="flex size-12 items-center justify-center rounded-full border border-border bg-background">
|
||||
228→ <Inbox className="size-5 text-muted-foreground" />
|
||||
229→ </div>
|
||||
230→ <div className="space-y-1">
|
||||
231→ <p className="text-sm font-medium">Keine bewerbenden Anfragen</p>
|
||||
232→ <p className="max-w-sm text-xs text-muted-foreground">
|
||||
233→ Neue Reseller-Bewerbungen erscheinen hier.
|
||||
234→ </p>
|
||||
235→ </div>
|
||||
236→ </div>
|
||||
237→ ) : (
|
||||
238→ <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
239→ {applications.map((app) => (
|
||||
240→ <Card key={app.id} className="flex flex-col">
|
||||
241→ <CardContent className="flex flex-1 flex-col gap-3 p-4">
|
||||
242→ {/* header */}
|
||||
243→ <div className="flex items-start justify-between gap-3">
|
||||
244→ <div className="min-w-0 space-y-1">
|
||||
245→ <p className="truncate text-sm font-semibold">{app.company.name}</p>
|
||||
246→ <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
|
||||
247→ {app.company.email && (
|
||||
248→ <span className="inline-flex items-center gap-1">
|
||||
249→ <Mail className="size-3" />
|
||||
250→ {app.company.email}
|
||||
251→ </span>
|
||||
252→ )}
|
||||
253→ {app.company.website && (
|
||||
254→ <span className="inline-flex items-center gap-1">
|
||||
255→ <Globe className="size-3" />
|
||||
256→ {app.company.website}
|
||||
257→ </span>
|
||||
258→ )}
|
||||
259→ {app.company.city && (
|
||||
260→ <span className="inline-flex items-center gap-1">
|
||||
261→ <MapPin className="size-3" />
|
||||
262→ {app.company.city}
|
||||
263→ </span>
|
||||
264→ )}
|
||||
265→ </div>
|
||||
266→ </div>
|
||||
267→ <Badge variant="outline" className="gap-1 border-foreground/40 text-[10px]">
|
||||
268→ <Clock className="size-2.5" />
|
||||
269→ {formatRelative(app.appliedAt)}
|
||||
270→ </Badge>
|
||||
271→ </div>
|
||||
272→
|
||||
273→ {/* application details */}
|
||||
274→ {(app.businessModel || app.expectedClientVolume || app.referredBy) && (
|
||||
275→ <div className="grid grid-cols-1 gap-2 rounded-md border border-border bg-muted/30 p-3 text-xs sm:grid-cols-3">
|
||||
276→ {app.businessModel && (
|
||||
277→ <Meta label="Geschäftsmodell" value={app.businessModel} />
|
||||
278→ )}
|
||||
279→ {app.expectedClientVolume && (
|
||||
280→ <Meta label="Erw. Kundenvolumen" value={app.expectedClientVolume} />
|
||||
281→ )}
|
||||
282→ {app.referredBy && (
|
||||
283→ <Meta label="Empfohlen von" value={app.referredBy} />
|
||||
284→ )}
|
||||
285→ </div>
|
||||
286→ )}
|
||||
287→
|
||||
288→ {/* actions */}
|
||||
289→ <div className="mt-auto flex items-center justify-end gap-2 pt-1">
|
||||
290→ <Button
|
||||
291→ size="sm"
|
||||
292→ variant="outline"
|
||||
293→ onClick={() => setRejectTarget(app)}
|
||||
294→ >
|
||||
295→ <XCircle className="size-3.5" />
|
||||
296→ Ablehnen
|
||||
297→ </Button>
|
||||
298→ <Button
|
||||
299→ size="sm"
|
||||
300→ onClick={() => setApproveTarget(app)}
|
||||
301→ >
|
||||
302→ <CheckCircle2 className="size-3.5" />
|
||||
303→ Genehmigen
|
||||
304→ </Button>
|
||||
305→ </div>
|
||||
306→ </CardContent>
|
||||
307→ </Card>
|
||||
308→ ))}
|
||||
309→ </div>
|
||||
310→ )}
|
||||
311→
|
||||
312→ <ApproveDialog
|
||||
313→ application={approveTarget}
|
||||
314→ onClose={() => setApproveTarget(null)}
|
||||
315→ onChanged={onChanged}
|
||||
316→ />
|
||||
317→ <RejectDialog
|
||||
318→ application={rejectTarget}
|
||||
319→ onClose={() => setRejectTarget(null)}
|
||||
320→ onChanged={onChanged}
|
||||
321→ />
|
||||
322→ </section>
|
||||
323→ )
|
||||
324→}
|
||||
325→
|
||||
326→function Meta({ label, value }: { label: string; value: string }) {
|
||||
327→ return (
|
||||
328→ <div className="min-w-0">
|
||||
329→ <p className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</p>
|
||||
330→ <p className="mt-0.5 truncate text-xs font-medium">{value}</p>
|
||||
331→ </div>
|
||||
332→ )
|
||||
333→}
|
||||
334→
|
||||
335→/* ----------------------------- approve dialog ----------------------------- */
|
||||
336→
|
||||
337→function ApproveDialog({
|
||||
338→ application,
|
||||
339→ onClose,
|
||||
340→ onChanged,
|
||||
341→}: {
|
||||
342→ application: AgencyApplication | null
|
||||
343→ onClose: () => void
|
||||
344→ onChanged: () => void
|
||||
345→}) {
|
||||
346→ const [discount, setDiscount] = useState(10)
|
||||
347→ const [committing, setCommitting] = useState(false)
|
||||
348→
|
||||
349→ // Reset state when dialog opens for a new application
|
||||
350→ const handleOpenChange = (open: boolean) => {
|
||||
351→ if (open) setDiscount(10)
|
||||
352→ if (!open) {
|
||||
353→ if (!committing) onClose()
|
||||
354→ }
|
||||
355→ }
|
||||
356→
|
||||
357→ const net = useMemo(() => {
|
||||
358→ const netEur = BASE_PRICE_EUR * (1 - discount / 100)
|
||||
359→ return netEur.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
360→ }, [discount])
|
||||
361→
|
||||
362→ const handleCommit = async () => {
|
||||
363→ if (!application) return
|
||||
364→ setCommitting(true)
|
||||
365→ try {
|
||||
366→ const r = await fetch(`/api/aos/agency/${application.id}/approve`, {
|
||||
367→ method: 'PATCH',
|
||||
368→ headers: { 'content-type': 'application/json' },
|
||||
369→ body: JSON.stringify({ discountPct: discount }),
|
||||
370→ })
|
||||
371→ if (!r.ok) {
|
||||
372→ const err = await r.json().catch(() => ({}))
|
||||
373→ throw new Error(err.error || 'approve failed')
|
||||
374→ }
|
||||
375→ // Defer close + refetch so the FuseButton's done-state + toast can render.
|
||||
376→ setTimeout(() => {
|
||||
377→ onClose()
|
||||
378→ onChanged()
|
||||
379→ }, 350)
|
||||
380→ } catch (err) {
|
||||
381→ setCommitting(false)
|
||||
382→ throw err
|
||||
383→ }
|
||||
384→ // Note: setCommitting(false) intentionally skipped on success — dialog will
|
||||
385→ // close via the setTimeout above and the button's doneLabel will be shown.
|
||||
386→ }
|
||||
387→
|
||||
388→ return (
|
||||
389→ <Dialog open={!!application} onOpenChange={handleOpenChange}>
|
||||
390→ <DialogContent className="sm:max-w-md">
|
||||
391→ {application && (
|
||||
392→ <>
|
||||
393→ <DialogHeader>
|
||||
394→ <DialogTitle className="flex items-center gap-2">
|
||||
395→ <CheckCircle2 className="size-4" />
|
||||
396→ Reseller-Bewerbung genehmigen
|
||||
397→ </DialogTitle>
|
||||
398→ <DialogDescription>
|
||||
399→ <span className="font-medium text-foreground">{application.company.name}</span> wird
|
||||
400→ als Reseller freigeschaltet. Der Rabatt wird auf alle vom Reseller angelegten Kundenlizenzierungen
|
||||
401→ angewendet.
|
||||
402→ </DialogDescription>
|
||||
403→ </DialogHeader>
|
||||
404→
|
||||
405→ <div className="space-y-3">
|
||||
406→ <div className="space-y-1.5">
|
||||
407→ <div className="flex items-center justify-between">
|
||||
408→ <Label htmlFor="discount-pct">Rabatt (%)</Label>
|
||||
409→ <span className="text-[10px] text-muted-foreground">0 – 20</span>
|
||||
410→ </div>
|
||||
411→ <Input
|
||||
412→ id="discount-pct"
|
||||
413→ type="number"
|
||||
414→ min={0}
|
||||
415→ max={20}
|
||||
416→ step={1}
|
||||
417→ value={discount}
|
||||
418→ onChange={(e) => {
|
||||
419→ const raw = parseInt(e.target.value, 10)
|
||||
420→ if (Number.isNaN(raw)) {
|
||||
421→ setDiscount(0)
|
||||
422→ return
|
||||
423→ }
|
||||
424→ setDiscount(Math.min(20, Math.max(0, raw)))
|
||||
425→ }}
|
||||
426→ className="tabular-nums"
|
||||
427→ />
|
||||
428→ </div>
|
||||
429→
|
||||
430→ {/* live preview */}
|
||||
431→ <div className="rounded-md border border-border bg-muted/40 p-3 text-xs">
|
||||
432→ <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
|
||||
433→ Preisvorschau
|
||||
434→ </p>
|
||||
435→ <p className="mt-1 tabular-nums">
|
||||
436→ <span className="font-medium">{BASE_PRICE_EUR} €/Monat</span>
|
||||
437→ <span className="mx-1.5 text-muted-foreground">Basis</span>
|
||||
438→ <span className="mx-1 text-muted-foreground">→</span>
|
||||
439→ <span className="text-muted-foreground">mit {discount}% Rabatt</span>
|
||||
440→ <span className="mx-1.5 text-muted-foreground">=</span>
|
||||
441→ <span className="font-semibold border-foreground/40 px-1.5 py-0.5 rounded border">
|
||||
442→ {net} €
|
||||
443→ </span>
|
||||
444→ </p>
|
||||
445→ </div>
|
||||
446→ </div>
|
||||
447→
|
||||
448→ <DialogFooter className="gap-2">
|
||||
449→ <Button variant="outline" onClick={onClose} disabled={committing}>
|
||||
450→ Abbrechen
|
||||
451→ </Button>
|
||||
452→ <FuseButton
|
||||
453→ label="Genehmigen"
|
||||
454→ doneLabel="Genehmigt"
|
||||
455→ onCommit={handleCommit}
|
||||
456→ disabled={committing}
|
||||
457→ variant="default"
|
||||
458→ />
|
||||
459→ </DialogFooter>
|
||||
460→ </>
|
||||
461→ )}
|
||||
462→ </DialogContent>
|
||||
463→ </Dialog>
|
||||
464→ )
|
||||
465→}
|
||||
466→
|
||||
467→/* ----------------------------- reject dialog ----------------------------- */
|
||||
468→
|
||||
469→function RejectDialog({
|
||||
470→ application,
|
||||
471→ onClose,
|
||||
472→ onChanged,
|
||||
473→}: {
|
||||
474→ application: AgencyApplication | null
|
||||
475→ onClose: () => void
|
||||
476→ onChanged: () => void
|
||||
477→}) {
|
||||
478→ const [reason, setReason] = useState('')
|
||||
479→ const [submitting, setSubmitting] = useState(false)
|
||||
480→
|
||||
481→ const handleOpenChange = (open: boolean) => {
|
||||
482→ if (!open) {
|
||||
483→ if (!submitting) {
|
||||
484→ setReason('')
|
||||
485→ onClose()
|
||||
486→ }
|
||||
487→ }
|
||||
488→ }
|
||||
489→
|
||||
490→ const submit = async () => {
|
||||
491→ if (!application) return
|
||||
492→ if (!reason.trim()) {
|
||||
493→ toast.error('Bitte gib einen Ablehnungsgrund an.')
|
||||
494→ return
|
||||
495→ }
|
||||
496→ setSubmitting(true)
|
||||
497→ const t = toast.loading('Ablehnung wird gespeichert…')
|
||||
498→ try {
|
||||
499→ const r = await fetch(`/api/aos/agency/${application.id}/reject`, {
|
||||
500→ method: 'PATCH',
|
||||
501→ headers: { 'content-type': 'application/json' },
|
||||
502→ body: JSON.stringify({ reason: reason.trim() }),
|
||||
503→ })
|
||||
504→ if (!r.ok) {
|
||||
505→ const err = await r.json().catch(() => ({}))
|
||||
506→ throw new Error(err.error || 'reject failed')
|
||||
507→ }
|
||||
508→ toast.success(`${application.company.name} abgelehnt`, { id: t })
|
||||
509→ setReason('')
|
||||
510→ onClose()
|
||||
511→ onChanged()
|
||||
512→ } catch (err) {
|
||||
513→ toast.error(err instanceof Error ? err.message : 'Ablehnung fehlgeschlagen', { id: t })
|
||||
514→ } finally {
|
||||
515→ setSubmitting(false)
|
||||
516→ }
|
||||
517→ }
|
||||
518→
|
||||
519→ return (
|
||||
520→ <Dialog open={!!application} onOpenChange={handleOpenChange}>
|
||||
521→ <DialogContent className="sm:max-w-md">
|
||||
522→ {application && (
|
||||
523→ <>
|
||||
524→ <DialogHeader>
|
||||
525→ <DialogTitle className="flex items-center gap-2">
|
||||
526→ <XCircle className="size-4" />
|
||||
527→ Reseller-Bewerbung ablehnen
|
||||
528→ </DialogTitle>
|
||||
529→ <DialogDescription>
|
||||
530→ <span className="font-medium text-foreground">{application.company.name}</span>
|
||||
531→ {' '}wird abgelehnt. Der Grund wird für den Bewerber sichtbar protokolliert.
|
||||
532→ </DialogDescription>
|
||||
533→ </DialogHeader>
|
||||
534→
|
||||
535→ <div className="space-y-1.5">
|
||||
536→ <Label htmlFor="reject-reason">Ablehnungsgrund</Label>
|
||||
537→ <Textarea
|
||||
538→ id="reject-reason"
|
||||
539→ placeholder="z. B. Unvollständige Angaben, kein passendes Geschäftsmodell…"
|
||||
540→ value={reason}
|
||||
541→ onChange={(e) => setReason(e.target.value)}
|
||||
542→ rows={4}
|
||||
543→ maxLength={500}
|
||||
544→ disabled={submitting}
|
||||
545→ />
|
||||
546→ <p className="text-right text-[10px] text-muted-foreground">
|
||||
547→ {reason.length} / 500
|
||||
548→ </p>
|
||||
549→ </div>
|
||||
550→
|
||||
551→ <DialogFooter className="gap-2">
|
||||
552→ <Button variant="outline" onClick={onClose} disabled={submitting}>
|
||||
553→ Abbrechen
|
||||
554→ </Button>
|
||||
555→ <Button variant="destructive" onClick={submit} disabled={submitting}>
|
||||
556→ {submitting ? (
|
||||
557→ <Loader2 className="size-3.5 animate-spin" />
|
||||
558→ ) : (
|
||||
559→ <XCircle className="size-3.5" />
|
||||
560→ )}
|
||||
561→ Ablehnen
|
||||
562→ </Button>
|
||||
563→ </DialogFooter>
|
||||
564→ </>
|
||||
565→ )}
|
||||
566→ </DialogContent>
|
||||
567→ </Dialog>
|
||||
568→ )
|
||||
569→}
|
||||
570→
|
||||
571→/* ----------------------------- approved agencies ----------------------------- */
|
||||
572→
|
||||
573→function ApprovedAgenciesSection({ agencies }: { agencies: ApprovedAgency[] }) {
|
||||
574→ const [openAgency, setOpenAgency] = useState<ApprovedAgency | null>(null)
|
||||
575→
|
||||
576→ return (
|
||||
577→ <section className="space-y-3">
|
||||
578→ <div className="flex items-center justify-between">
|
||||
579→ <h2 className="text-sm font-semibold tracking-tight">
|
||||
580→ Genehmigte Reseller
|
||||
581→ <span className="ml-2 text-xs font-normal text-muted-foreground">
|
||||
582→ {agencies.length} aktiv
|
||||
583→ </span>
|
||||
584→ </h2>
|
||||
585→ </div>
|
||||
586→
|
||||
587→ {agencies.length === 0 ? (
|
||||
588→ <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-14 text-center">
|
||||
589→ <div className="flex size-12 items-center justify-center rounded-full border border-border bg-background">
|
||||
590→ <Users className="size-5 text-muted-foreground" />
|
||||
591→ </div>
|
||||
592→ <div className="space-y-1">
|
||||
593→ <p className="text-sm font-medium">Noch keine Reseller genehmigt</p>
|
||||
594→ <p className="max-w-sm text-xs text-muted-foreground">
|
||||
595→ Genehmigte Reseller-Bewerbungen erscheinen hier mit ihren Kunden und Lizenzen.
|
||||
596→ </p>
|
||||
597→ </div>
|
||||
598→ </div>
|
||||
599→ ) : (
|
||||
600→ <Card>
|
||||
601→ <CardHeader className="pb-2">
|
||||
602→ <CardTitle className="text-sm">Reseller ({agencies.length})</CardTitle>
|
||||
603→ </CardHeader>
|
||||
604→ <CardContent className="p-0">
|
||||
605→ <div className="overflow-x-auto">
|
||||
606→ <table className="w-full text-sm">
|
||||
607→ <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
|
||||
608→ <tr>
|
||||
609→ <th className="px-4 py-2 font-medium">Reseller</th>
|
||||
610→ <th className="px-4 py-2 font-medium">Rabatt</th>
|
||||
611→ <th className="px-4 py-2 font-medium text-right">Kunden</th>
|
||||
612→ <th className="px-4 py-2 font-medium text-right">Lizenzen</th>
|
||||
613→ <th className="px-4 py-2 font-medium">Genehmigt am</th>
|
||||
614→ <th className="px-4 py-2 font-medium text-right">Aktion</th>
|
||||
615→ </tr>
|
||||
616→ </thead>
|
||||
617→ <tbody className="divide-y divide-border">
|
||||
618→ {agencies.map((a) => (
|
||||
619→ <tr key={a.id} className="transition hover:bg-muted/40">
|
||||
620→ <td className="px-4 py-2.5">
|
||||
621→ <div className="flex items-center gap-2">
|
||||
622→ <div className="flex size-7 shrink-0 items-center justify-center rounded-md border border-border">
|
||||
623→ <Building2 className="size-3.5 text-muted-foreground" />
|
||||
624→ </div>
|
||||
625→ <div className="min-w-0">
|
||||
626→ <p className="truncate text-xs font-medium">{a.name}</p>
|
||||
627→ {a.email && (
|
||||
628→ <p className="truncate text-[10px] text-muted-foreground">{a.email}</p>
|
||||
629→ )}
|
||||
630→ </div>
|
||||
631→ </div>
|
||||
632→ </td>
|
||||
633→ <td className="px-4 py-2.5">
|
||||
634→ <Badge
|
||||
635→ variant="outline"
|
||||
636→ className="border-foreground/40 text-[10px] tabular-nums"
|
||||
637→ >
|
||||
638→ <Percent className="size-2.5" />
|
||||
639→ {a.agencyDiscountPct}%
|
||||
640→ </Badge>
|
||||
641→ </td>
|
||||
642→ <td className="px-4 py-2.5 text-right text-xs tabular-nums">
|
||||
643→ {a._count.agencyClients}
|
||||
644→ </td>
|
||||
645→ <td className="px-4 py-2.5 text-right text-xs tabular-nums">
|
||||
646→ {a._count.licenses}
|
||||
647→ </td>
|
||||
648→ <td className="px-4 py-2.5 text-xs">
|
||||
649→ {formatDate(a.agencyApprovedAt)}
|
||||
650→ </td>
|
||||
651→ <td className="px-4 py-2.5 text-right">
|
||||
652→ <Button
|
||||
653→ size="sm"
|
||||
654→ variant="ghost"
|
||||
655→ onClick={() => setOpenAgency(a)}
|
||||
656→ className="gap-1"
|
||||
657→ >
|
||||
658→ <ShoppingBag className="size-3.5" />
|
||||
659→ Kunden ansehen
|
||||
660→ <ChevronRight className="size-3" />
|
||||
661→ </Button>
|
||||
662→ </td>
|
||||
663→ </tr>
|
||||
664→ ))}
|
||||
665→ </tbody>
|
||||
666→ </table>
|
||||
667→ </div>
|
||||
668→ </CardContent>
|
||||
669→ </Card>
|
||||
670→ )}
|
||||
671→
|
||||
672→ <ClientsSheet agency={openAgency} onClose={() => setOpenAgency(null)} />
|
||||
673→ </section>
|
||||
674→ )
|
||||
675→}
|
||||
676→
|
||||
677→function ClientsSheet({
|
||||
678→ agency,
|
||||
679→ onClose,
|
||||
680→}: {
|
||||
681→ agency: ApprovedAgency | null
|
||||
682→ onClose: () => void
|
||||
683→}) {
|
||||
684→ return (
|
||||
685→ <Sheet open={!!agency} onOpenChange={(o) => !o && onClose()}>
|
||||
686→ <SheetContent side="right" className="w-full gap-0 sm:max-w-md">
|
||||
687→ {agency && (
|
||||
688→ <>
|
||||
689→ <SheetHeader className="border-b border-border">
|
||||
690→ <SheetTitle className="flex items-center gap-2">
|
||||
691→ <Building2 className="size-4 text-muted-foreground" />
|
||||
692→ {agency.name}
|
||||
693→ </SheetTitle>
|
||||
694→ <SheetDescription>
|
||||
695→ Reseller-Kundenverwaltung — {agency._count.agencyClients} Kunde(n),{' '}
|
||||
696→ {agency._count.licenses} Lizenz(en).
|
||||
697→ </SheetDescription>
|
||||
698→ </SheetHeader>
|
||||
699→
|
||||
700→ <div className="flex-1 overflow-y-auto px-4 py-3">
|
||||
701→ {/* routing note */}
|
||||
702→ <div className="mb-3 flex items-start gap-2 rounded-md border border-border bg-muted/40 p-3 text-[11px]">
|
||||
703→ <Mail className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
|
||||
704→ <p className="text-muted-foreground">
|
||||
705→ Reseller kann eigene Kunden anlegen und lizenzieren. Tickets von dessen Kunden werden
|
||||
706→ an den Reseller geroutet, nicht an uns.
|
||||
707→ </p>
|
||||
708→ </div>
|
||||
709→
|
||||
710→ {/* meta */}
|
||||
711→ <dl className="mb-3 grid grid-cols-2 gap-2 text-xs">
|
||||
712→ <MetaItem label="Rabatt" value={`${agency.agencyDiscountPct}%`} />
|
||||
713→ <MetaItem label="Genehmigt" value={formatDate(agency.agencyApprovedAt)} />
|
||||
714→ {agency.email && (
|
||||
715→ <MetaItem label="E-Mail" value={agency.email} full />
|
||||
716→ )}
|
||||
717→ {agency.city && <MetaItem label="Stadt" value={agency.city} />}
|
||||
718→ {agency.website && <MetaItem label="Website" value={agency.website} />}
|
||||
719→ </dl>
|
||||
720→
|
||||
721→ {/* clients list */}
|
||||
722→ <p className="mb-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
723→ Kunden ({agency.agencyClients.length})
|
||||
724→ </p>
|
||||
725→ {agency.agencyClients.length === 0 ? (
|
||||
726→ <div className="rounded-md border border-dashed border-border bg-muted/20 px-4 py-8 text-center">
|
||||
727→ <p className="text-xs text-muted-foreground">
|
||||
728→ Noch keine Kunden angelegt.
|
||||
729→ </p>
|
||||
730→ </div>
|
||||
731→ ) : (
|
||||
732→ <ul className="space-y-1">
|
||||
733→ {agency.agencyClients.map((c) => (
|
||||
734→ <li
|
||||
735→ key={c.id}
|
||||
736→ className="flex items-center gap-3 rounded-md border border-border bg-background px-3 py-2"
|
||||
737→ >
|
||||
738→ <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold">
|
||||
739→ {c.name.slice(0, 2).toUpperCase()}
|
||||
740→ </div>
|
||||
741→ <div className="min-w-0 flex-1">
|
||||
742→ <p className="truncate text-xs font-medium">{c.name}</p>
|
||||
743→ {c.email && (
|
||||
744→ <p className="truncate text-[10px] text-muted-foreground">{c.email}</p>
|
||||
745→ )}
|
||||
746→ </div>
|
||||
747→ </li>
|
||||
748→ ))}
|
||||
749→ </ul>
|
||||
750→ )}
|
||||
751→ </div>
|
||||
752→ </>
|
||||
753→ )}
|
||||
754→ </SheetContent>
|
||||
755→ </Sheet>
|
||||
756→ )
|
||||
757→}
|
||||
758→
|
||||
759→function MetaItem({
|
||||
760→ label,
|
||||
761→ value,
|
||||
762→ full,
|
||||
763→}: {
|
||||
764→ label: string
|
||||
765→ value: string
|
||||
766→ full?: boolean
|
||||
767→}) {
|
||||
768→ return (
|
||||
769→ <div className={cn('min-w-0', full && 'col-span-2')}>
|
||||
770→ <dt className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</dt>
|
||||
771→ <dd className="mt-0.5 truncate text-xs font-medium">{value}</dd>
|
||||
772→ </div>
|
||||
773→ )
|
||||
774→}
|
||||
775→
|
||||
776→/* ----------------------------- reviewed (history) ----------------------------- */
|
||||
777→
|
||||
778→function ReviewedSection({ applications }: { applications: AgencyApplication[] }) {
|
||||
779→ const [open, setOpen] = useState(false)
|
||||
780→
|
||||
781→ return (
|
||||
782→ <section className="space-y-2">
|
||||
783→ <Collapsible open={open} onOpenChange={setOpen}>
|
||||
784→ <Card className="bg-muted/30">
|
||||
785→ <CollapsibleTrigger asChild>
|
||||
786→ <button
|
||||
787→ type="button"
|
||||
788→ className="flex w-full items-center justify-between p-3 text-left"
|
||||
789→ >
|
||||
790→ <div className="flex items-center gap-2">
|
||||
791→ <History className="size-3.5 text-muted-foreground" />
|
||||
792→ <span className="text-xs font-semibold">Verlauf</span>
|
||||
793→ <Badge variant="secondary" className="text-[10px] tabular-nums">
|
||||
794→ {applications.length}
|
||||
795→ </Badge>
|
||||
796→ </div>
|
||||
797→ <span className="text-[10px] text-muted-foreground">
|
||||
798→ {open ? 'ausblenden' : 'einblenden'}
|
||||
799→ </span>
|
||||
800→ </button>
|
||||
801→ </CollapsibleTrigger>
|
||||
802→
|
||||
803→ <CollapsibleContent>
|
||||
804→ {applications.length === 0 ? (
|
||||
805→ <div className="border-t border-border px-4 py-6 text-center text-xs text-muted-foreground">
|
||||
806→ Noch keine bewerteten Bewerbungen.
|
||||
807→ </div>
|
||||
808→ ) : (
|
||||
809→ <div className="border-t border-border">
|
||||
810→ <ul className="divide-y divide-border">
|
||||
811→ {applications.map((a) => (
|
||||
812→ <li
|
||||
813→ key={a.id}
|
||||
814→ className="flex flex-col gap-1 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between"
|
||||
815→ >
|
||||
816→ <div className="min-w-0 space-y-0.5">
|
||||
817→ <div className="flex items-center gap-2">
|
||||
818→ <span className="truncate text-xs font-medium">{a.company.name}</span>
|
||||
819→ <StatusBadge status={a.status} />
|
||||
820→ </div>
|
||||
821→ {a.status === 'rejected' && a.rejectReason && (
|
||||
822→ <p className="truncate text-[11px] text-muted-foreground">
|
||||
823→ Grund: {a.rejectReason}
|
||||
824→ </p>
|
||||
825→ )}
|
||||
826→ {a.status === 'approved' && (
|
||||
827→ <p className="text-[11px] text-muted-foreground">
|
||||
828→ Rabatt: <span className="tabular-nums">{a.discountPct}%</span>
|
||||
829→ </p>
|
||||
830→ )}
|
||||
831→ </div>
|
||||
832→ <div className="shrink-0 text-right text-[10px] text-muted-foreground">
|
||||
833→ {a.reviewedBy && <p>reviewed by {a.reviewedBy}</p>}
|
||||
834→ {a.reviewedAt && (
|
||||
835→ <p className="tabular-nums">{formatDateTime(a.reviewedAt)}</p>
|
||||
836→ )}
|
||||
837→ </div>
|
||||
838→ </li>
|
||||
839→ ))}
|
||||
840→ </ul>
|
||||
841→ </div>
|
||||
842→ )}
|
||||
843→ </CollapsibleContent>
|
||||
844→ </Card>
|
||||
845→ </Collapsible>
|
||||
846→ </section>
|
||||
847→ )
|
||||
848→}
|
||||
849→
|
||||
850→function StatusBadge({ status }: { status: 'approved' | 'rejected' | 'pending' }) {
|
||||
851→ if (status === 'approved') {
|
||||
852→ return (
|
||||
853→ <Badge
|
||||
854→ variant="outline"
|
||||
855→ className="gap-1 border-foreground/40 text-[10px]"
|
||||
856→ >
|
||||
857→ <CheckCircle2 className="size-2.5" />
|
||||
858→ Genehmigt
|
||||
859→ </Badge>
|
||||
860→ )
|
||||
861→ }
|
||||
862→ if (status === 'rejected') {
|
||||
863→ return (
|
||||
864→ <Badge variant="outline" className="gap-1 text-[10px] text-muted-foreground">
|
||||
865→ <XCircle className="size-2.5" />
|
||||
866→ Abgelehnt
|
||||
867→ </Badge>
|
||||
868→ )
|
||||
869→ }
|
||||
870→ return (
|
||||
871→ <Badge variant="outline" className="text-[10px] text-muted-foreground">
|
||||
872→ Offen
|
||||
873→ </Badge>
|
||||
874→ )
|
||||
875→}
|
||||
876→
|
||||
@@ -0,0 +1,876 @@
|
||||
1→ 1→'use client'
|
||||
2→ 2→
|
||||
3→ 3→import { useMemo, useState } from 'react'
|
||||
4→ 4→import {
|
||||
5→ 5→ Users,
|
||||
6→ 6→ Building2,
|
||||
7→ 7→ Globe,
|
||||
8→ 8→ MapPin,
|
||||
9→ 9→ Clock,
|
||||
10→ 10→ Percent,
|
||||
11→ 11→ CheckCircle2,
|
||||
12→ 12→ XCircle,
|
||||
13→ 13→ History,
|
||||
14→ 14→ Inbox,
|
||||
15→ 15→ Mail,
|
||||
16→ 16→ Loader2,
|
||||
17→ 17→ ChevronRight,
|
||||
18→ 18→ ShoppingBag,
|
||||
19→ 19→} from 'lucide-react'
|
||||
20→ 20→import { useFetch } from '@/hooks/use-fetch'
|
||||
21→ 21→import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
22→ 22→import { Badge } from '@/components/ui/badge'
|
||||
23→ 23→import { Button } from '@/components/ui/button'
|
||||
24→ 24→import { Input } from '@/components/ui/input'
|
||||
25→ 25→import { Label } from '@/components/ui/label'
|
||||
26→ 26→import { Textarea } from '@/components/ui/textarea'
|
||||
27→ 27→import { Skeleton } from '@/components/ui/skeleton'
|
||||
28→ 28→import {
|
||||
29→ 29→ Dialog,
|
||||
30→ 30→ DialogContent,
|
||||
31→ 31→ DialogDescription,
|
||||
32→ 32→ DialogFooter,
|
||||
33→ 33→ DialogHeader,
|
||||
34→ 34→ DialogTitle,
|
||||
35→ 35→} from '@/components/ui/dialog'
|
||||
36→ 36→import {
|
||||
37→ 37→ Sheet,
|
||||
38→ 38→ SheetContent,
|
||||
39→ 39→ SheetDescription,
|
||||
40→ 40→ SheetHeader,
|
||||
41→ 41→ SheetTitle,
|
||||
42→ 42→} from '@/components/ui/sheet'
|
||||
43→ 43→import {
|
||||
44→ 44→ Collapsible,
|
||||
45→ 45→ CollapsibleContent,
|
||||
46→ 46→ CollapsibleTrigger,
|
||||
47→ 47→} from '@/components/ui/collapsible'
|
||||
48→ 48→import { PageHeader } from '../primitives'
|
||||
49→ 49→import { FuseButton } from '@/components/FuseButton'
|
||||
50→ 50→import { formatRelative, formatDate, formatDateTime } from '@/lib/format'
|
||||
51→ 51→import { cn } from '@/lib/utils'
|
||||
52→ 52→import { toast } from 'sonner'
|
||||
53→ 53→
|
||||
54→ 54→/* ----------------------------- types ----------------------------- */
|
||||
55→ 55→
|
||||
56→ 56→interface AgencyCompany {
|
||||
57→ 57→ id: string
|
||||
58→ 58→ name: string
|
||||
59→ 59→ email: string | null
|
||||
60→ 60→ website: string | null
|
||||
61→ 61→ city: string | null
|
||||
62→ 62→ isAgency: boolean
|
||||
63→ 63→ agencyStatus: string | null
|
||||
64→ 64→ agencyDiscountPct: number | null
|
||||
65→ 65→}
|
||||
66→ 66→
|
||||
67→ 67→interface AgencyApplication {
|
||||
68→ 68→ id: string
|
||||
69→ 69→ companyId: string
|
||||
70→ 70→ status: 'pending' | 'approved' | 'rejected'
|
||||
71→ 71→ discountPct: number
|
||||
72→ 72→ businessModel?: string | null
|
||||
73→ 73→ expectedClientVolume?: string | null
|
||||
74→ 74→ referredBy?: string | null
|
||||
75→ 75→ reviewedBy?: string | null
|
||||
76→ 76→ reviewedAt?: string | null
|
||||
77→ 77→ rejectReason?: string | null
|
||||
78→ 78→ appliedAt: string
|
||||
79→ 79→ createdAt: string
|
||||
80→ 80→ updatedAt: string
|
||||
81→ 81→ company: AgencyCompany
|
||||
82→ 82→}
|
||||
83→ 83→
|
||||
84→ 84→interface AgencyClient {
|
||||
85→ 85→ id: string
|
||||
86→ 86→ name: string
|
||||
87→ 87→ email: string | null
|
||||
88→ 88→}
|
||||
89→ 89→
|
||||
90→ 90→interface ApprovedAgency extends AgencyCompany {
|
||||
91→ 91→ agencyDiscountPct: number
|
||||
92→ 92→ agencyApprovedAt: string
|
||||
93→ 93→ agencyClients: AgencyClient[]
|
||||
94→ 94→ _count: { agencyClients: number; licenses: number }
|
||||
95→ 95→}
|
||||
96→ 96→
|
||||
97→ 97→interface AgencyData {
|
||||
98→ 98→ applications: {
|
||||
99→ 99→ pending: AgencyApplication[]
|
||||
100→ 100→ reviewed: AgencyApplication[]
|
||||
101→ 101→ }
|
||||
102→ 102→ agencies: ApprovedAgency[]
|
||||
103→ 103→ stats: { pending: number; approved: number; totalApplications: number }
|
||||
104→ 104→}
|
||||
105→ 105→
|
||||
106→ 106→const BASE_PRICE_EUR = 50 // 50 €/Monat base price for preview
|
||||
107→ 107→
|
||||
108→ 108→/* ----------------------------- view ----------------------------- */
|
||||
109→ 109→
|
||||
110→ 110→export function AgencyView() {
|
||||
111→ 111→ const { data, loading, refetch } = useFetch<AgencyData>('/api/aos/agency')
|
||||
112→ 112→
|
||||
113→ 113→ if (loading || !data) {
|
||||
114→ 114→ return (
|
||||
115→ 115→ <div className="space-y-6 p-4 md:p-6">
|
||||
116→ 116→ <Skeleton className="h-9 w-32" />
|
||||
117→ 117→ <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
118→ 118→ {Array.from({ length: 4 }).map((_, i) => (
|
||||
119→ 119→ <Skeleton key={i} className="h-24" />
|
||||
120→ 120→ ))}
|
||||
121→ 121→ </div>
|
||||
122→ 122→ <Skeleton className="h-64" />
|
||||
123→ 123→ </div>
|
||||
124→ 124→ )
|
||||
125→ 125→ }
|
||||
126→ 126→
|
||||
127→ 127→ const { applications, agencies, stats } = data
|
||||
128→ 128→ const avgDiscount =
|
||||
129→ 129→ agencies.length > 0
|
||||
130→ 130→ ? Math.round(
|
||||
131→ 131→ agencies.reduce((sum, a) => sum + (a.agencyDiscountPct ?? 0), 0) / agencies.length,
|
||||
132→ 132→ )
|
||||
133→ 133→ : 0
|
||||
134→ 134→
|
||||
135→ 135→ return (
|
||||
136→ 136→ <div className="space-y-6 p-4 md:p-6">
|
||||
137→ 137→ <PageHeader
|
||||
138→ 138→ title="Reseller"
|
||||
139→ 139→ description="Reseller-Verwaltung: Bewerbungen prüfen, Rabatt-Sätze festlegen (0–20 %) und genehmigte Reseller mit ihren Kunden einsehen."
|
||||
140→ 140→ />
|
||||
141→ 141→
|
||||
142→ 142→ {/* Stats */}
|
||||
143→ 143→ <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
144→ 144→ <StatCard
|
||||
145→ 145→ label="Offene Bewerbungen"
|
||||
146→ 146→ value={stats.pending}
|
||||
147→ 147→ icon={Inbox}
|
||||
148→ 148→ hint="wartet auf Freigabe"
|
||||
149→ 149→ />
|
||||
150→ 150→ <StatCard
|
||||
151→ 151→ label="Genehmigte Reseller"
|
||||
152→ 152→ value={stats.approved}
|
||||
153→ 153→ icon={Users}
|
||||
154→ 154→ hint="aktiv im System"
|
||||
155→ 155→ />
|
||||
156→ 156→ <StatCard
|
||||
157→ 157→ label="Bewerbungen gesamt"
|
||||
158→ 158→ value={stats.totalApplications}
|
||||
159→ 159→ icon={History}
|
||||
160→ 160→ hint="inkl. Verlauf"
|
||||
161→ 161→ />
|
||||
162→ 162→ <StatCard
|
||||
163→ 163→ label="Ø Rabatt"
|
||||
164→ 164→ value={`${avgDiscount}%`}
|
||||
165→ 165→ icon={Percent}
|
||||
166→ 166→ hint={agencies.length ? `über ${agencies.length} Reseller` : '—'}
|
||||
167→ 167→ />
|
||||
168→ 168→ </div>
|
||||
169→ 169→
|
||||
170→ 170→ <PendingApplicationsSection applications={applications.pending} onChanged={refetch} />
|
||||
171→ 171→ <ApprovedAgenciesSection agencies={agencies} />
|
||||
172→ 172→ <ReviewedSection applications={applications.reviewed} />
|
||||
173→ 173→ </div>
|
||||
174→ 174→ )
|
||||
175→ 175→}
|
||||
176→ 176→
|
||||
177→ 177→/* ----------------------------- stats card ----------------------------- */
|
||||
178→ 178→
|
||||
179→ 179→function StatCard({
|
||||
180→ 180→ label,
|
||||
181→ 181→ value,
|
||||
182→ 182→ icon: Icon,
|
||||
183→ 183→ hint,
|
||||
184→ 184→}: {
|
||||
185→ 185→ label: string
|
||||
186→ 186→ value: number | string
|
||||
187→ 187→ icon: typeof Inbox
|
||||
188→ 188→ hint?: string
|
||||
189→ 189→}) {
|
||||
190→ 190→ return (
|
||||
191→ 191→ <Card className="p-4">
|
||||
192→ 192→ <div className="flex items-center justify-between">
|
||||
193→ 193→ <p className="text-xs text-muted-foreground">{label}</p>
|
||||
194→ 194→ <Icon className="size-3.5 text-muted-foreground" />
|
||||
195→ 195→ </div>
|
||||
196→ 196→ <p className="mt-1 text-2xl font-semibold tabular-nums">{value}</p>
|
||||
197→ 197→ {hint && <p className="text-[10px] text-muted-foreground">{hint}</p>}
|
||||
198→ 198→ </Card>
|
||||
199→ 199→ )
|
||||
200→ 200→}
|
||||
201→ 201→
|
||||
202→ 202→/* ----------------------------- pending applications ----------------------------- */
|
||||
203→ 203→
|
||||
204→ 204→function PendingApplicationsSection({
|
||||
205→ 205→ applications,
|
||||
206→ 206→ onChanged,
|
||||
207→ 207→}: {
|
||||
208→ 208→ applications: AgencyApplication[]
|
||||
209→ 209→ onChanged: () => void
|
||||
210→ 210→}) {
|
||||
211→ 211→ const [approveTarget, setApproveTarget] = useState<AgencyApplication | null>(null)
|
||||
212→ 212→ const [rejectTarget, setRejectTarget] = useState<AgencyApplication | null>(null)
|
||||
213→ 213→
|
||||
214→ 214→ return (
|
||||
215→ 215→ <section className="space-y-3">
|
||||
216→ 216→ <div className="flex items-center justify-between">
|
||||
217→ 217→ <h2 className="text-sm font-semibold tracking-tight">
|
||||
218→ 218→ Bewerbende Reseller
|
||||
219→ 219→ <span className="ml-2 text-xs font-normal text-muted-foreground">
|
||||
220→ 220→ {applications.length} offen
|
||||
221→ 221→ </span>
|
||||
222→ 222→ </h2>
|
||||
223→ 223→ </div>
|
||||
224→ 224→
|
||||
225→ 225→ {applications.length === 0 ? (
|
||||
226→ 226→ <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-14 text-center">
|
||||
227→ 227→ <div className="flex size-12 items-center justify-center rounded-full border border-border bg-background">
|
||||
228→ 228→ <Inbox className="size-5 text-muted-foreground" />
|
||||
229→ 229→ </div>
|
||||
230→ 230→ <div className="space-y-1">
|
||||
231→ 231→ <p className="text-sm font-medium">Keine bewerbenden Anfragen</p>
|
||||
232→ 232→ <p className="max-w-sm text-xs text-muted-foreground">
|
||||
233→ 233→ Neue Reseller-Bewerbungen erscheinen hier.
|
||||
234→ 234→ </p>
|
||||
235→ 235→ </div>
|
||||
236→ 236→ </div>
|
||||
237→ 237→ ) : (
|
||||
238→ 238→ <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
239→ 239→ {applications.map((app) => (
|
||||
240→ 240→ <Card key={app.id} className="flex flex-col">
|
||||
241→ 241→ <CardContent className="flex flex-1 flex-col gap-3 p-4">
|
||||
242→ 242→ {/* header */}
|
||||
243→ 243→ <div className="flex items-start justify-between gap-3">
|
||||
244→ 244→ <div className="min-w-0 space-y-1">
|
||||
245→ 245→ <p className="truncate text-sm font-semibold">{app.company.name}</p>
|
||||
246→ 246→ <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
|
||||
247→ 247→ {app.company.email && (
|
||||
248→ 248→ <span className="inline-flex items-center gap-1">
|
||||
249→ 249→ <Mail className="size-3" />
|
||||
250→ 250→ {app.company.email}
|
||||
251→ 251→ </span>
|
||||
252→ 252→ )}
|
||||
253→ 253→ {app.company.website && (
|
||||
254→ 254→ <span className="inline-flex items-center gap-1">
|
||||
255→ 255→ <Globe className="size-3" />
|
||||
256→ 256→ {app.company.website}
|
||||
257→ 257→ </span>
|
||||
258→ 258→ )}
|
||||
259→ 259→ {app.company.city && (
|
||||
260→ 260→ <span className="inline-flex items-center gap-1">
|
||||
261→ 261→ <MapPin className="size-3" />
|
||||
262→ 262→ {app.company.city}
|
||||
263→ 263→ </span>
|
||||
264→ 264→ )}
|
||||
265→ 265→ </div>
|
||||
266→ 266→ </div>
|
||||
267→ 267→ <Badge variant="outline" className="gap-1 border-foreground/40 text-[10px]">
|
||||
268→ 268→ <Clock className="size-2.5" />
|
||||
269→ 269→ {formatRelative(app.appliedAt)}
|
||||
270→ 270→ </Badge>
|
||||
271→ 271→ </div>
|
||||
272→ 272→
|
||||
273→ 273→ {/* application details */}
|
||||
274→ 274→ {(app.businessModel || app.expectedClientVolume || app.referredBy) && (
|
||||
275→ 275→ <div className="grid grid-cols-1 gap-2 rounded-md border border-border bg-muted/30 p-3 text-xs sm:grid-cols-3">
|
||||
276→ 276→ {app.businessModel && (
|
||||
277→ 277→ <Meta label="Geschäftsmodell" value={app.businessModel} />
|
||||
278→ 278→ )}
|
||||
279→ 279→ {app.expectedClientVolume && (
|
||||
280→ 280→ <Meta label="Erw. Kundenvolumen" value={app.expectedClientVolume} />
|
||||
281→ 281→ )}
|
||||
282→ 282→ {app.referredBy && (
|
||||
283→ 283→ <Meta label="Empfohlen von" value={app.referredBy} />
|
||||
284→ 284→ )}
|
||||
285→ 285→ </div>
|
||||
286→ 286→ )}
|
||||
287→ 287→
|
||||
288→ 288→ {/* actions */}
|
||||
289→ 289→ <div className="mt-auto flex items-center justify-end gap-2 pt-1">
|
||||
290→ 290→ <Button
|
||||
291→ 291→ size="sm"
|
||||
292→ 292→ variant="outline"
|
||||
293→ 293→ onClick={() => setRejectTarget(app)}
|
||||
294→ 294→ >
|
||||
295→ 295→ <XCircle className="size-3.5" />
|
||||
296→ 296→ Ablehnen
|
||||
297→ 297→ </Button>
|
||||
298→ 298→ <Button
|
||||
299→ 299→ size="sm"
|
||||
300→ 300→ onClick={() => setApproveTarget(app)}
|
||||
301→ 301→ >
|
||||
302→ 302→ <CheckCircle2 className="size-3.5" />
|
||||
303→ 303→ Genehmigen
|
||||
304→ 304→ </Button>
|
||||
305→ 305→ </div>
|
||||
306→ 306→ </CardContent>
|
||||
307→ 307→ </Card>
|
||||
308→ 308→ ))}
|
||||
309→ 309→ </div>
|
||||
310→ 310→ )}
|
||||
311→ 311→
|
||||
312→ 312→ <ApproveDialog
|
||||
313→ 313→ application={approveTarget}
|
||||
314→ 314→ onClose={() => setApproveTarget(null)}
|
||||
315→ 315→ onChanged={onChanged}
|
||||
316→ 316→ />
|
||||
317→ 317→ <RejectDialog
|
||||
318→ 318→ application={rejectTarget}
|
||||
319→ 319→ onClose={() => setRejectTarget(null)}
|
||||
320→ 320→ onChanged={onChanged}
|
||||
321→ 321→ />
|
||||
322→ 322→ </section>
|
||||
323→ 323→ )
|
||||
324→ 324→}
|
||||
325→ 325→
|
||||
326→ 326→function Meta({ label, value }: { label: string; value: string }) {
|
||||
327→ 327→ return (
|
||||
328→ 328→ <div className="min-w-0">
|
||||
329→ 329→ <p className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</p>
|
||||
330→ 330→ <p className="mt-0.5 truncate text-xs font-medium">{value}</p>
|
||||
331→ 331→ </div>
|
||||
332→ 332→ )
|
||||
333→ 333→}
|
||||
334→ 334→
|
||||
335→ 335→/* ----------------------------- approve dialog ----------------------------- */
|
||||
336→ 336→
|
||||
337→ 337→function ApproveDialog({
|
||||
338→ 338→ application,
|
||||
339→ 339→ onClose,
|
||||
340→ 340→ onChanged,
|
||||
341→ 341→}: {
|
||||
342→ 342→ application: AgencyApplication | null
|
||||
343→ 343→ onClose: () => void
|
||||
344→ 344→ onChanged: () => void
|
||||
345→ 345→}) {
|
||||
346→ 346→ const [discount, setDiscount] = useState(10)
|
||||
347→ 347→ const [committing, setCommitting] = useState(false)
|
||||
348→ 348→
|
||||
349→ 349→ // Reset state when dialog opens for a new application
|
||||
350→ 350→ const handleOpenChange = (open: boolean) => {
|
||||
351→ 351→ if (open) setDiscount(10)
|
||||
352→ 352→ if (!open) {
|
||||
353→ 353→ if (!committing) onClose()
|
||||
354→ 354→ }
|
||||
355→ 355→ }
|
||||
356→ 356→
|
||||
357→ 357→ const net = useMemo(() => {
|
||||
358→ 358→ const netEur = BASE_PRICE_EUR * (1 - discount / 100)
|
||||
359→ 359→ return netEur.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
360→ 360→ }, [discount])
|
||||
361→ 361→
|
||||
362→ 362→ const handleCommit = async () => {
|
||||
363→ 363→ if (!application) return
|
||||
364→ 364→ setCommitting(true)
|
||||
365→ 365→ try {
|
||||
366→ 366→ const r = await fetch(`/api/aos/agency/${application.id}/approve`, {
|
||||
367→ 367→ method: 'PATCH',
|
||||
368→ 368→ headers: { 'content-type': 'application/json' },
|
||||
369→ 369→ body: JSON.stringify({ discountPct: discount }),
|
||||
370→ 370→ })
|
||||
371→ 371→ if (!r.ok) {
|
||||
372→ 372→ const err = await r.json().catch(() => ({}))
|
||||
373→ 373→ throw new Error(err.error || 'approve failed')
|
||||
374→ 374→ }
|
||||
375→ 375→ // Defer close + refetch so the FuseButton's done-state + toast can render.
|
||||
376→ 376→ setTimeout(() => {
|
||||
377→ 377→ onClose()
|
||||
378→ 378→ onChanged()
|
||||
379→ 379→ }, 350)
|
||||
380→ 380→ } catch (err) {
|
||||
381→ 381→ setCommitting(false)
|
||||
382→ 382→ throw err
|
||||
383→ 383→ }
|
||||
384→ 384→ // Note: setCommitting(false) intentionally skipped on success — dialog will
|
||||
385→ 385→ // close via the setTimeout above and the button's doneLabel will be shown.
|
||||
386→ 386→ }
|
||||
387→ 387→
|
||||
388→ 388→ return (
|
||||
389→ 389→ <Dialog open={!!application} onOpenChange={handleOpenChange}>
|
||||
390→ 390→ <DialogContent className="sm:max-w-md">
|
||||
391→ 391→ {application && (
|
||||
392→ 392→ <>
|
||||
393→ 393→ <DialogHeader>
|
||||
394→ 394→ <DialogTitle className="flex items-center gap-2">
|
||||
395→ 395→ <CheckCircle2 className="size-4" />
|
||||
396→ 396→ Reseller-Bewerbung genehmigen
|
||||
397→ 397→ </DialogTitle>
|
||||
398→ 398→ <DialogDescription>
|
||||
399→ 399→ <span className="font-medium text-foreground">{application.company.name}</span> wird
|
||||
400→ 400→ als Reseller freigeschaltet. Der Rabatt wird auf alle vom Reseller angelegten Kundenlizenzierungen
|
||||
401→ 401→ angewendet.
|
||||
402→ 402→ </DialogDescription>
|
||||
403→ 403→ </DialogHeader>
|
||||
404→ 404→
|
||||
405→ 405→ <div className="space-y-3">
|
||||
406→ 406→ <div className="space-y-1.5">
|
||||
407→ 407→ <div className="flex items-center justify-between">
|
||||
408→ 408→ <Label htmlFor="discount-pct">Rabatt (%)</Label>
|
||||
409→ 409→ <span className="text-[10px] text-muted-foreground">0 – 20</span>
|
||||
410→ 410→ </div>
|
||||
411→ 411→ <Input
|
||||
412→ 412→ id="discount-pct"
|
||||
413→ 413→ type="number"
|
||||
414→ 414→ min={0}
|
||||
415→ 415→ max={20}
|
||||
416→ 416→ step={1}
|
||||
417→ 417→ value={discount}
|
||||
418→ 418→ onChange={(e) => {
|
||||
419→ 419→ const raw = parseInt(e.target.value, 10)
|
||||
420→ 420→ if (Number.isNaN(raw)) {
|
||||
421→ 421→ setDiscount(0)
|
||||
422→ 422→ return
|
||||
423→ 423→ }
|
||||
424→ 424→ setDiscount(Math.min(20, Math.max(0, raw)))
|
||||
425→ 425→ }}
|
||||
426→ 426→ className="tabular-nums"
|
||||
427→ 427→ />
|
||||
428→ 428→ </div>
|
||||
429→ 429→
|
||||
430→ 430→ {/* live preview */}
|
||||
431→ 431→ <div className="rounded-md border border-border bg-muted/40 p-3 text-xs">
|
||||
432→ 432→ <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
|
||||
433→ 433→ Preisvorschau
|
||||
434→ 434→ </p>
|
||||
435→ 435→ <p className="mt-1 tabular-nums">
|
||||
436→ 436→ <span className="font-medium">{BASE_PRICE_EUR} €/Monat</span>
|
||||
437→ 437→ <span className="mx-1.5 text-muted-foreground">Basis</span>
|
||||
438→ 438→ <span className="mx-1 text-muted-foreground">→</span>
|
||||
439→ 439→ <span className="text-muted-foreground">mit {discount}% Rabatt</span>
|
||||
440→ 440→ <span className="mx-1.5 text-muted-foreground">=</span>
|
||||
441→ 441→ <span className="font-semibold border-foreground/40 px-1.5 py-0.5 rounded border">
|
||||
442→ 442→ {net} €
|
||||
443→ 443→ </span>
|
||||
444→ 444→ </p>
|
||||
445→ 445→ </div>
|
||||
446→ 446→ </div>
|
||||
447→ 447→
|
||||
448→ 448→ <DialogFooter className="gap-2">
|
||||
449→ 449→ <Button variant="outline" onClick={onClose} disabled={committing}>
|
||||
450→ 450→ Abbrechen
|
||||
451→ 451→ </Button>
|
||||
452→ 452→ <FuseButton
|
||||
453→ 453→ label="Genehmigen"
|
||||
454→ 454→ doneLabel="Genehmigt"
|
||||
455→ 455→ onCommit={handleCommit}
|
||||
456→ 456→ disabled={committing}
|
||||
457→ 457→ variant="default"
|
||||
458→ 458→ />
|
||||
459→ 459→ </DialogFooter>
|
||||
460→ 460→ </>
|
||||
461→ 461→ )}
|
||||
462→ 462→ </DialogContent>
|
||||
463→ 463→ </Dialog>
|
||||
464→ 464→ )
|
||||
465→ 465→}
|
||||
466→ 466→
|
||||
467→ 467→/* ----------------------------- reject dialog ----------------------------- */
|
||||
468→ 468→
|
||||
469→ 469→function RejectDialog({
|
||||
470→ 470→ application,
|
||||
471→ 471→ onClose,
|
||||
472→ 472→ onChanged,
|
||||
473→ 473→}: {
|
||||
474→ 474→ application: AgencyApplication | null
|
||||
475→ 475→ onClose: () => void
|
||||
476→ 476→ onChanged: () => void
|
||||
477→ 477→}) {
|
||||
478→ 478→ const [reason, setReason] = useState('')
|
||||
479→ 479→ const [submitting, setSubmitting] = useState(false)
|
||||
480→ 480→
|
||||
481→ 481→ const handleOpenChange = (open: boolean) => {
|
||||
482→ 482→ if (!open) {
|
||||
483→ 483→ if (!submitting) {
|
||||
484→ 484→ setReason('')
|
||||
485→ 485→ onClose()
|
||||
486→ 486→ }
|
||||
487→ 487→ }
|
||||
488→ 488→ }
|
||||
489→ 489→
|
||||
490→ 490→ const submit = async () => {
|
||||
491→ 491→ if (!application) return
|
||||
492→ 492→ if (!reason.trim()) {
|
||||
493→ 493→ toast.error('Bitte gib einen Ablehnungsgrund an.')
|
||||
494→ 494→ return
|
||||
495→ 495→ }
|
||||
496→ 496→ setSubmitting(true)
|
||||
497→ 497→ const t = toast.loading('Ablehnung wird gespeichert…')
|
||||
498→ 498→ try {
|
||||
499→ 499→ const r = await fetch(`/api/aos/agency/${application.id}/reject`, {
|
||||
500→ 500→ method: 'PATCH',
|
||||
501→ 501→ headers: { 'content-type': 'application/json' },
|
||||
502→ 502→ body: JSON.stringify({ reason: reason.trim() }),
|
||||
503→ 503→ })
|
||||
504→ 504→ if (!r.ok) {
|
||||
505→ 505→ const err = await r.json().catch(() => ({}))
|
||||
506→ 506→ throw new Error(err.error || 'reject failed')
|
||||
507→ 507→ }
|
||||
508→ 508→ toast.success(`${application.company.name} abgelehnt`, { id: t })
|
||||
509→ 509→ setReason('')
|
||||
510→ 510→ onClose()
|
||||
511→ 511→ onChanged()
|
||||
512→ 512→ } catch (err) {
|
||||
513→ 513→ toast.error(err instanceof Error ? err.message : 'Ablehnung fehlgeschlagen', { id: t })
|
||||
514→ 514→ } finally {
|
||||
515→ 515→ setSubmitting(false)
|
||||
516→ 516→ }
|
||||
517→ 517→ }
|
||||
518→ 518→
|
||||
519→ 519→ return (
|
||||
520→ 520→ <Dialog open={!!application} onOpenChange={handleOpenChange}>
|
||||
521→ 521→ <DialogContent className="sm:max-w-md">
|
||||
522→ 522→ {application && (
|
||||
523→ 523→ <>
|
||||
524→ 524→ <DialogHeader>
|
||||
525→ 525→ <DialogTitle className="flex items-center gap-2">
|
||||
526→ 526→ <XCircle className="size-4" />
|
||||
527→ 527→ Reseller-Bewerbung ablehnen
|
||||
528→ 528→ </DialogTitle>
|
||||
529→ 529→ <DialogDescription>
|
||||
530→ 530→ <span className="font-medium text-foreground">{application.company.name}</span>
|
||||
531→ 531→ {' '}wird abgelehnt. Der Grund wird für den Bewerber sichtbar protokolliert.
|
||||
532→ 532→ </DialogDescription>
|
||||
533→ 533→ </DialogHeader>
|
||||
534→ 534→
|
||||
535→ 535→ <div className="space-y-1.5">
|
||||
536→ 536→ <Label htmlFor="reject-reason">Ablehnungsgrund</Label>
|
||||
537→ 537→ <Textarea
|
||||
538→ 538→ id="reject-reason"
|
||||
539→ 539→ placeholder="z. B. Unvollständige Angaben, kein passendes Geschäftsmodell…"
|
||||
540→ 540→ value={reason}
|
||||
541→ 541→ onChange={(e) => setReason(e.target.value)}
|
||||
542→ 542→ rows={4}
|
||||
543→ 543→ maxLength={500}
|
||||
544→ 544→ disabled={submitting}
|
||||
545→ 545→ />
|
||||
546→ 546→ <p className="text-right text-[10px] text-muted-foreground">
|
||||
547→ 547→ {reason.length} / 500
|
||||
548→ 548→ </p>
|
||||
549→ 549→ </div>
|
||||
550→ 550→
|
||||
551→ 551→ <DialogFooter className="gap-2">
|
||||
552→ 552→ <Button variant="outline" onClick={onClose} disabled={submitting}>
|
||||
553→ 553→ Abbrechen
|
||||
554→ 554→ </Button>
|
||||
555→ 555→ <Button variant="destructive" onClick={submit} disabled={submitting}>
|
||||
556→ 556→ {submitting ? (
|
||||
557→ 557→ <Loader2 className="size-3.5 animate-spin" />
|
||||
558→ 558→ ) : (
|
||||
559→ 559→ <XCircle className="size-3.5" />
|
||||
560→ 560→ )}
|
||||
561→ 561→ Ablehnen
|
||||
562→ 562→ </Button>
|
||||
563→ 563→ </DialogFooter>
|
||||
564→ 564→ </>
|
||||
565→ 565→ )}
|
||||
566→ 566→ </DialogContent>
|
||||
567→ 567→ </Dialog>
|
||||
568→ 568→ )
|
||||
569→ 569→}
|
||||
570→ 570→
|
||||
571→ 571→/* ----------------------------- approved agencies ----------------------------- */
|
||||
572→ 572→
|
||||
573→ 573→function ApprovedAgenciesSection({ agencies }: { agencies: ApprovedAgency[] }) {
|
||||
574→ 574→ const [openAgency, setOpenAgency] = useState<ApprovedAgency | null>(null)
|
||||
575→ 575→
|
||||
576→ 576→ return (
|
||||
577→ 577→ <section className="space-y-3">
|
||||
578→ 578→ <div className="flex items-center justify-between">
|
||||
579→ 579→ <h2 className="text-sm font-semibold tracking-tight">
|
||||
580→ 580→ Genehmigte Reseller
|
||||
581→ 581→ <span className="ml-2 text-xs font-normal text-muted-foreground">
|
||||
582→ 582→ {agencies.length} aktiv
|
||||
583→ 583→ </span>
|
||||
584→ 584→ </h2>
|
||||
585→ 585→ </div>
|
||||
586→ 586→
|
||||
587→ 587→ {agencies.length === 0 ? (
|
||||
588→ 588→ <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-14 text-center">
|
||||
589→ 589→ <div className="flex size-12 items-center justify-center rounded-full border border-border bg-background">
|
||||
590→ 590→ <Users className="size-5 text-muted-foreground" />
|
||||
591→ 591→ </div>
|
||||
592→ 592→ <div className="space-y-1">
|
||||
593→ 593→ <p className="text-sm font-medium">Noch keine Reseller genehmigt</p>
|
||||
594→ 594→ <p className="max-w-sm text-xs text-muted-foreground">
|
||||
595→ 595→ Genehmigte Reseller-Bewerbungen erscheinen hier mit ihren Kunden und Lizenzen.
|
||||
596→ 596→ </p>
|
||||
597→ 597→ </div>
|
||||
598→ 598→ </div>
|
||||
599→ 599→ ) : (
|
||||
600→ 600→ <Card>
|
||||
601→ 601→ <CardHeader className="pb-2">
|
||||
602→ 602→ <CardTitle className="text-sm">Reseller ({agencies.length})</CardTitle>
|
||||
603→ 603→ </CardHeader>
|
||||
604→ 604→ <CardContent className="p-0">
|
||||
605→ 605→ <div className="overflow-x-auto">
|
||||
606→ 606→ <table className="w-full text-sm">
|
||||
607→ 607→ <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
|
||||
608→ 608→ <tr>
|
||||
609→ 609→ <th className="px-4 py-2 font-medium">Reseller</th>
|
||||
610→ 610→ <th className="px-4 py-2 font-medium">Rabatt</th>
|
||||
611→ 611→ <th className="px-4 py-2 font-medium text-right">Kunden</th>
|
||||
612→ 612→ <th className="px-4 py-2 font-medium text-right">Lizenzen</th>
|
||||
613→ 613→ <th className="px-4 py-2 font-medium">Genehmigt am</th>
|
||||
614→ 614→ <th className="px-4 py-2 font-medium text-right">Aktion</th>
|
||||
615→ 615→ </tr>
|
||||
616→ 616→ </thead>
|
||||
617→ 617→ <tbody className="divide-y divide-border">
|
||||
618→ 618→ {agencies.map((a) => (
|
||||
619→ 619→ <tr key={a.id} className="transition hover:bg-muted/40">
|
||||
620→ 620→ <td className="px-4 py-2.5">
|
||||
621→ 621→ <div className="flex items-center gap-2">
|
||||
622→ 622→ <div className="flex size-7 shrink-0 items-center justify-center rounded-md border border-border">
|
||||
623→ 623→ <Building2 className="size-3.5 text-muted-foreground" />
|
||||
624→ 624→ </div>
|
||||
625→ 625→ <div className="min-w-0">
|
||||
626→ 626→ <p className="truncate text-xs font-medium">{a.name}</p>
|
||||
627→ 627→ {a.email && (
|
||||
628→ 628→ <p className="truncate text-[10px] text-muted-foreground">{a.email}</p>
|
||||
629→ 629→ )}
|
||||
630→ 630→ </div>
|
||||
631→ 631→ </div>
|
||||
632→ 632→ </td>
|
||||
633→ 633→ <td className="px-4 py-2.5">
|
||||
634→ 634→ <Badge
|
||||
635→ 635→ variant="outline"
|
||||
636→ 636→ className="border-foreground/40 text-[10px] tabular-nums"
|
||||
637→ 637→ >
|
||||
638→ 638→ <Percent className="size-2.5" />
|
||||
639→ 639→ {a.agencyDiscountPct}%
|
||||
640→ 640→ </Badge>
|
||||
641→ 641→ </td>
|
||||
642→ 642→ <td className="px-4 py-2.5 text-right text-xs tabular-nums">
|
||||
643→ 643→ {a._count.agencyClients}
|
||||
644→ 644→ </td>
|
||||
645→ 645→ <td className="px-4 py-2.5 text-right text-xs tabular-nums">
|
||||
646→ 646→ {a._count.licenses}
|
||||
647→ 647→ </td>
|
||||
648→ 648→ <td className="px-4 py-2.5 text-xs">
|
||||
649→ 649→ {formatDate(a.agencyApprovedAt)}
|
||||
650→ 650→ </td>
|
||||
651→ 651→ <td className="px-4 py-2.5 text-right">
|
||||
652→ 652→ <Button
|
||||
653→ 653→ size="sm"
|
||||
654→ 654→ variant="ghost"
|
||||
655→ 655→ onClick={() => setOpenAgency(a)}
|
||||
656→ 656→ className="gap-1"
|
||||
657→ 657→ >
|
||||
658→ 658→ <ShoppingBag className="size-3.5" />
|
||||
659→ 659→ Kunden ansehen
|
||||
660→ 660→ <ChevronRight className="size-3" />
|
||||
661→ 661→ </Button>
|
||||
662→ 662→ </td>
|
||||
663→ 663→ </tr>
|
||||
664→ 664→ ))}
|
||||
665→ 665→ </tbody>
|
||||
666→ 666→ </table>
|
||||
667→ 667→ </div>
|
||||
668→ 668→ </CardContent>
|
||||
669→ 669→ </Card>
|
||||
670→ 670→ )}
|
||||
671→ 671→
|
||||
672→ 672→ <ClientsSheet agency={openAgency} onClose={() => setOpenAgency(null)} />
|
||||
673→ 673→ </section>
|
||||
674→ 674→ )
|
||||
675→ 675→}
|
||||
676→ 676→
|
||||
677→ 677→function ClientsSheet({
|
||||
678→ 678→ agency,
|
||||
679→ 679→ onClose,
|
||||
680→ 680→}: {
|
||||
681→ 681→ agency: ApprovedAgency | null
|
||||
682→ 682→ onClose: () => void
|
||||
683→ 683→}) {
|
||||
684→ 684→ return (
|
||||
685→ 685→ <Sheet open={!!agency} onOpenChange={(o) => !o && onClose()}>
|
||||
686→ 686→ <SheetContent side="right" className="w-full gap-0 sm:max-w-md">
|
||||
687→ 687→ {agency && (
|
||||
688→ 688→ <>
|
||||
689→ 689→ <SheetHeader className="border-b border-border">
|
||||
690→ 690→ <SheetTitle className="flex items-center gap-2">
|
||||
691→ 691→ <Building2 className="size-4 text-muted-foreground" />
|
||||
692→ 692→ {agency.name}
|
||||
693→ 693→ </SheetTitle>
|
||||
694→ 694→ <SheetDescription>
|
||||
695→ 695→ Reseller-Kundenverwaltung — {agency._count.agencyClients} Kunde(n),{' '}
|
||||
696→ 696→ {agency._count.licenses} Lizenz(en).
|
||||
697→ 697→ </SheetDescription>
|
||||
698→ 698→ </SheetHeader>
|
||||
699→ 699→
|
||||
700→ 700→ <div className="flex-1 overflow-y-auto px-4 py-3">
|
||||
701→ 701→ {/* routing note */}
|
||||
702→ 702→ <div className="mb-3 flex items-start gap-2 rounded-md border border-border bg-muted/40 p-3 text-[11px]">
|
||||
703→ 703→ <Mail className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
|
||||
704→ 704→ <p className="text-muted-foreground">
|
||||
705→ 705→ Reseller kann eigene Kunden anlegen und lizenzieren. Tickets von dessen Kunden werden
|
||||
706→ 706→ an den Reseller geroutet, nicht an uns.
|
||||
707→ 707→ </p>
|
||||
708→ 708→ </div>
|
||||
709→ 709→
|
||||
710→ 710→ {/* meta */}
|
||||
711→ 711→ <dl className="mb-3 grid grid-cols-2 gap-2 text-xs">
|
||||
712→ 712→ <MetaItem label="Rabatt" value={`${agency.agencyDiscountPct}%`} />
|
||||
713→ 713→ <MetaItem label="Genehmigt" value={formatDate(agency.agencyApprovedAt)} />
|
||||
714→ 714→ {agency.email && (
|
||||
715→ 715→ <MetaItem label="E-Mail" value={agency.email} full />
|
||||
716→ 716→ )}
|
||||
717→ 717→ {agency.city && <MetaItem label="Stadt" value={agency.city} />}
|
||||
718→ 718→ {agency.website && <MetaItem label="Website" value={agency.website} />}
|
||||
719→ 719→ </dl>
|
||||
720→ 720→
|
||||
721→ 721→ {/* clients list */}
|
||||
722→ 722→ <p className="mb-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
723→ 723→ Kunden ({agency.agencyClients.length})
|
||||
724→ 724→ </p>
|
||||
725→ 725→ {agency.agencyClients.length === 0 ? (
|
||||
726→ 726→ <div className="rounded-md border border-dashed border-border bg-muted/20 px-4 py-8 text-center">
|
||||
727→ 727→ <p className="text-xs text-muted-foreground">
|
||||
728→ 728→ Noch keine Kunden angelegt.
|
||||
729→ 729→ </p>
|
||||
730→ 730→ </div>
|
||||
731→ 731→ ) : (
|
||||
732→ 732→ <ul className="space-y-1">
|
||||
733→ 733→ {agency.agencyClients.map((c) => (
|
||||
734→ 734→ <li
|
||||
735→ 735→ key={c.id}
|
||||
736→ 736→ className="flex items-center gap-3 rounded-md border border-border bg-background px-3 py-2"
|
||||
737→ 737→ >
|
||||
738→ 738→ <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold">
|
||||
739→ 739→ {c.name.slice(0, 2).toUpperCase()}
|
||||
740→ 740→ </div>
|
||||
741→ 741→ <div className="min-w-0 flex-1">
|
||||
742→ 742→ <p className="truncate text-xs font-medium">{c.name}</p>
|
||||
743→ 743→ {c.email && (
|
||||
744→ 744→ <p className="truncate text-[10px] text-muted-foreground">{c.email}</p>
|
||||
745→ 745→ )}
|
||||
746→ 746→ </div>
|
||||
747→ 747→ </li>
|
||||
748→ 748→ ))}
|
||||
749→ 749→ </ul>
|
||||
750→ 750→ )}
|
||||
751→ 751→ </div>
|
||||
752→ 752→ </>
|
||||
753→ 753→ )}
|
||||
754→ 754→ </SheetContent>
|
||||
755→ 755→ </Sheet>
|
||||
756→ 756→ )
|
||||
757→ 757→}
|
||||
758→ 758→
|
||||
759→ 759→function MetaItem({
|
||||
760→ 760→ label,
|
||||
761→ 761→ value,
|
||||
762→ 762→ full,
|
||||
763→ 763→}: {
|
||||
764→ 764→ label: string
|
||||
765→ 765→ value: string
|
||||
766→ 766→ full?: boolean
|
||||
767→ 767→}) {
|
||||
768→ 768→ return (
|
||||
769→ 769→ <div className={cn('min-w-0', full && 'col-span-2')}>
|
||||
770→ 770→ <dt className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</dt>
|
||||
771→ 771→ <dd className="mt-0.5 truncate text-xs font-medium">{value}</dd>
|
||||
772→ 772→ </div>
|
||||
773→ 773→ )
|
||||
774→ 774→}
|
||||
775→ 775→
|
||||
776→ 776→/* ----------------------------- reviewed (history) ----------------------------- */
|
||||
777→ 777→
|
||||
778→ 778→function ReviewedSection({ applications }: { applications: AgencyApplication[] }) {
|
||||
779→ 779→ const [open, setOpen] = useState(false)
|
||||
780→ 780→
|
||||
781→ 781→ return (
|
||||
782→ 782→ <section className="space-y-2">
|
||||
783→ 783→ <Collapsible open={open} onOpenChange={setOpen}>
|
||||
784→ 784→ <Card className="bg-muted/30">
|
||||
785→ 785→ <CollapsibleTrigger asChild>
|
||||
786→ 786→ <button
|
||||
787→ 787→ type="button"
|
||||
788→ 788→ className="flex w-full items-center justify-between p-3 text-left"
|
||||
789→ 789→ >
|
||||
790→ 790→ <div className="flex items-center gap-2">
|
||||
791→ 791→ <History className="size-3.5 text-muted-foreground" />
|
||||
792→ 792→ <span className="text-xs font-semibold">Verlauf</span>
|
||||
793→ 793→ <Badge variant="secondary" className="text-[10px] tabular-nums">
|
||||
794→ 794→ {applications.length}
|
||||
795→ 795→ </Badge>
|
||||
796→ 796→ </div>
|
||||
797→ 797→ <span className="text-[10px] text-muted-foreground">
|
||||
798→ 798→ {open ? 'ausblenden' : 'einblenden'}
|
||||
799→ 799→ </span>
|
||||
800→ 800→ </button>
|
||||
801→ 801→ </CollapsibleTrigger>
|
||||
802→ 802→
|
||||
803→ 803→ <CollapsibleContent>
|
||||
804→ 804→ {applications.length === 0 ? (
|
||||
805→ 805→ <div className="border-t border-border px-4 py-6 text-center text-xs text-muted-foreground">
|
||||
806→ 806→ Noch keine bewerteten Bewerbungen.
|
||||
807→ 807→ </div>
|
||||
808→ 808→ ) : (
|
||||
809→ 809→ <div className="border-t border-border">
|
||||
810→ 810→ <ul className="divide-y divide-border">
|
||||
811→ 811→ {applications.map((a) => (
|
||||
812→ 812→ <li
|
||||
813→ 813→ key={a.id}
|
||||
814→ 814→ className="flex flex-col gap-1 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between"
|
||||
815→ 815→ >
|
||||
816→ 816→ <div className="min-w-0 space-y-0.5">
|
||||
817→ 817→ <div className="flex items-center gap-2">
|
||||
818→ 818→ <span className="truncate text-xs font-medium">{a.company.name}</span>
|
||||
819→ 819→ <StatusBadge status={a.status} />
|
||||
820→ 820→ </div>
|
||||
821→ 821→ {a.status === 'rejected' && a.rejectReason && (
|
||||
822→ 822→ <p className="truncate text-[11px] text-muted-foreground">
|
||||
823→ 823→ Grund: {a.rejectReason}
|
||||
824→ 824→ </p>
|
||||
825→ 825→ )}
|
||||
826→ 826→ {a.status === 'approved' && (
|
||||
827→ 827→ <p className="text-[11px] text-muted-foreground">
|
||||
828→ 828→ Rabatt: <span className="tabular-nums">{a.discountPct}%</span>
|
||||
829→ 829→ </p>
|
||||
830→ 830→ )}
|
||||
831→ 831→ </div>
|
||||
832→ 832→ <div className="shrink-0 text-right text-[10px] text-muted-foreground">
|
||||
833→ 833→ {a.reviewedBy && <p>reviewed by {a.reviewedBy}</p>}
|
||||
834→ 834→ {a.reviewedAt && (
|
||||
835→ 835→ <p className="tabular-nums">{formatDateTime(a.reviewedAt)}</p>
|
||||
836→ 836→ )}
|
||||
837→ 837→ </div>
|
||||
838→ 838→ </li>
|
||||
839→ 839→ ))}
|
||||
840→ 840→ </ul>
|
||||
841→ 841→ </div>
|
||||
842→ 842→ )}
|
||||
843→ 843→ </CollapsibleContent>
|
||||
844→ 844→ </Card>
|
||||
845→ 845→ </Collapsible>
|
||||
846→ 846→ </section>
|
||||
847→ 847→ )
|
||||
848→ 848→}
|
||||
849→ 849→
|
||||
850→ 850→function StatusBadge({ status }: { status: 'approved' | 'rejected' | 'pending' }) {
|
||||
851→ 851→ if (status === 'approved') {
|
||||
852→ 852→ return (
|
||||
853→ 853→ <Badge
|
||||
854→ 854→ variant="outline"
|
||||
855→ 855→ className="gap-1 border-foreground/40 text-[10px]"
|
||||
856→ 856→ >
|
||||
857→ 857→ <CheckCircle2 className="size-2.5" />
|
||||
858→ 858→ Genehmigt
|
||||
859→ 859→ </Badge>
|
||||
860→ 860→ )
|
||||
861→ 861→ }
|
||||
862→ 862→ if (status === 'rejected') {
|
||||
863→ 863→ return (
|
||||
864→ 864→ <Badge variant="outline" className="gap-1 text-[10px] text-muted-foreground">
|
||||
865→ 865→ <XCircle className="size-2.5" />
|
||||
866→ 866→ Abgelehnt
|
||||
867→ 867→ </Badge>
|
||||
868→ 868→ )
|
||||
869→ 869→ }
|
||||
870→ 870→ return (
|
||||
871→ 871→ <Badge variant="outline" className="text-[10px] text-muted-foreground">
|
||||
872→ 872→ Offen
|
||||
873→ 873→ </Badge>
|
||||
874→ 874→ )
|
||||
875→ 875→}
|
||||
876→ 876→
|
||||
Reference in new issue
Block a user