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→