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→
|
||||
Reference in new issue
Block a user