@allbluecn/admin-app 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/admin-app",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -30,7 +30,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
-    "lucide-react": "^1.27.0",
+    "lucide-react": "^1.43.0",
     "motion": "^12.42.2",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
@@ -42,9 +42,9 @@
     "start-authjs": "^1.0.2",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.4.3",
-    "@allbluecn/database": "0.5.0",
-    "@allbluecn/kernel": "0.6.0",
-    "@allbluecn/web-app": "0.10.3"
+    "@allbluecn/database": "0.8.0",
+    "@allbluecn/web-app": "0.11.1",
+    "@allbluecn/kernel": "0.8.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.40.1",
@@ -54,19 +54,22 @@
     "@tailwindcss/vite": "^4.3.2",
     "@tanstack/react-query-devtools": "5.102.8",
     "@tanstack/react-router-devtools": "1.167.1",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "^16.3.2",
     "@types/bcryptjs": "^2.4.6",
     "@types/node": "^24.13.3",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "5.0.0",
     "eslint": "^9",
+    "jsdom": "^29.1.1",
     "nitro": "3.0.260903-beta",
     "shadcn": "^4.15.0",
     "tailwindcss": "^4",
     "typescript": "^7",
     "vite": "^8.1.5",
-    "vitest": "^4.1.10",
+    "vitest": "5.0.0",
     "wrangler": "^4.99.0"
   },
   "files": [
@@ -81,6 +84,8 @@
     "build": "node scripts/i18n/compile.mjs && vite build && if [ -d .output/server ]; then cp instrument.server.mjs .output/server; fi",
     "start": "node --import ./.output/server/instrument.server.mjs .output/server/index.mjs",
     "lint": "eslint",
-    "typecheck": "node scripts/i18n/compile.mjs && tsc --noEmit"
+    "typecheck": "node scripts/i18n/compile.mjs && tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
   }
 }

package/src/__tests__/components/provider-icon.test.tsx

@@ -0,0 +1,59 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@testing-library/react'
+
+// @lobehub/icons 是数百个品牌图标的聚合包，dynamic import 会拖慢 vitest 且
+// 测试目标是 fallback 渲染路径；mock 为空对象使 mod[lobeName] 为 undefined，
+// ProviderLogo 走 InitialFallback 分支（与"平台下架的 provider"真实行为一致）。
+vi.mock('@lobehub/icons', () => ({}))
+
+import { ProviderIcon } from '../../components/ai-provider/provider-icon'
+
+describe('ProviderIcon', () => {
+  it('按 size 设置容器内联宽高', () => {
+    const { container } = render(
+      <ProviderIcon
+        provider={{ providerId: 'deprecated-vendor', brandName: 'Deprecated Vendor' }}
+        size={56}
+      />
+    )
+    const box = container.querySelector('div')
+    expect(box).not.toBeNull()
+    expect(box).toHaveStyle({ width: '56px', height: '56px' })
+  })
+
+  it('未知 providerId 时回落到品牌名首字母', () => {
+    const { container } = render(
+      <ProviderIcon
+        provider={{ providerId: 'deprecated-vendor', brandName: 'Deprecated Vendor' }}
+      />
+    )
+    expect(container.textContent).toContain('D')
+  })
+
+  it('透传 className 到容器', () => {
+    const { container } = render(
+      <ProviderIcon
+        provider={{ providerId: 'deprecated-vendor', brandName: 'Deprecated Vendor' }}
+        className="mt-4"
+      />
+    )
+    expect(container.querySelector('div')).toHaveClass('mt-4')
+  })
+})

package/src/__tests__/setup.ts

@@ -0,0 +1,35 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+/// <reference types="vitest/globals" />
+import '@testing-library/jest-dom/vitest'
+
+import { overwriteGetLocale } from '@/paraglide/runtime.js'
+
+// jsdom 无 ResizeObserver（@tanstack/charts、虚拟滚动等库模块加载时引用）
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof globalThis.ResizeObserver
+}
+
+beforeAll(() => {
+  // jsdom 的 navigator.language 为 en-US，会导致中文文案断言失败
+  overwriteGetLocale(() => 'zh')
+})

package/src/components/invitations/invitations-page.tsx

@@ -0,0 +1,527 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from "react"
+import type React from "react"
+import { m } from "@/paraglide/messages.js"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { Ticket, Plus, Copy, Ban, CheckCircle2, Trash2, Users } from "lucide-react"
+import { PageHeader } from "@/components/common/page-header"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  listInvitationCodesFn,
+  createInvitationCodeFn,
+  toggleInvitationCodeFn,
+  deleteInvitationCodeFn,
+  getRegistrationModeFn,
+  setRegistrationModeFn,
+} from "@/server/serverFns/invitations"
+import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
+
+type RegistrationMode = "invite" | "open"
+
+type InvitationUseRow = {
+  userId: string
+  usedAt: Date | string
+  user: { username: string }
+}
+
+type InvitationCodeRow = {
+  id: string
+  code: string
+  maxUses: number
+  usedCount: number
+  expiresAt: Date | string
+  disabledAt: Date | string | null
+  createdAt: Date | string
+  creator: string | null
+  uses: InvitationUseRow[]
+}
+
+type CodeStatus = "disabled" | "expired" | "exhausted" | "active"
+
+function statusOf(row: InvitationCodeRow): CodeStatus {
+  if (row.disabledAt != null) return "disabled"
+  if (new Date(row.expiresAt).getTime() < Date.now()) return "expired"
+  if (row.usedCount >= row.maxUses) return "exhausted"
+  return "active"
+}
+
+function StatusBadge({ status }: { status: CodeStatus }) {
+  const config: Record<CodeStatus, { variant: React.ComponentProps<typeof Badge>["variant"]; label: string; className?: string }> = {
+    active: { variant: "default", label: m["admin-invitations_status_active"]() },
+    exhausted: { variant: "secondary", label: m["admin-invitations_status_exhausted"]() },
+    expired: { variant: "outline", label: m["admin-invitations_status_expired"]() },
+    disabled: { variant: "secondary", label: m["admin-invitations_status_disabled"](), className: "text-muted-foreground" },
+  }
+  const c = config[status]
+  return <Badge variant={c.variant} className={c.className}>{c.label}</Badge>
+}
+
+export function InvitationsPage(): React.ReactElement {
+  const queryClient = useQueryClient()
+  const [pendingDelete, setPendingDelete] = useState<InvitationCodeRow | null>(null)
+  const [usesViewer, setUsesViewer] = useState<InvitationCodeRow | null>(null)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [createForm, setCreateForm] = useState({ code: "", maxUses: 1, validDays: 30 })
+
+  const codesQuery = useQuery({
+    queryKey: ["invitations", "codes"],
+    queryFn: () => listInvitationCodesFn({ data: { page: 1, pageSize: 100 } }),
+  })
+  const modeQuery = useQuery({
+    queryKey: ["invitations", "mode"],
+    queryFn: () => getRegistrationModeFn({ data: {} }),
+  })
+
+  const invalidateCodes = () =>
+    queryClient.invalidateQueries({ queryKey: ["invitations", "codes"] })
+
+  const modeMutation = useMutation({
+    mutationFn: (mode: RegistrationMode) => setRegistrationModeFn({ data: { mode } }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_modeUpdated"]())
+      queryClient.invalidateQueries({ queryKey: ["invitations", "mode"] })
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_modeFailed"]()),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (vars: { code?: string; maxUses: number; validDays: number }) =>
+      createInvitationCodeFn({ data: vars }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_created"]())
+      setCreateOpen(false)
+      setCreateForm({ code: "", maxUses: 1, validDays: 30 })
+      invalidateCodes()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_createFailed"]()),
+  })
+
+  const toggleMutation = useMutation({
+    mutationFn: (id: string) => toggleInvitationCodeFn({ data: { id } }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_toggled"]())
+      invalidateCodes()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_toggleFailed"]()),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteInvitationCodeFn({ data: { id } }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_deleted"]())
+      setPendingDelete(null)
+      invalidateCodes()
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_deleteFailed"]())
+      setPendingDelete(null)
+    },
+  })
+
+  const codes = codesQuery.data?.codes ?? []
+  const loading = codesQuery.isLoading
+  const mode = modeQuery.data?.mode ?? "invite"
+
+  const handleCopy = async (code: string) => {
+    try {
+      await navigator.clipboard.writeText(code)
+      toast.success(m["admin-invitations_toast_copied"]())
+    } catch {
+      toast.error(m["admin-invitations_toast_copyFailed"]())
+    }
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <PageHeader
+        title={m["admin-invitations_page_title"]()}
+        description={m["admin-invitations_page_subtitle"]()}
+        icon={Ticket}
+      />
+
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex items-center justify-between gap-6">
+            <div>
+              <div className="text-sm font-medium">{m["admin-invitations_mode_title"]()}</div>
+              <div className="text-xs text-muted-foreground mt-0.5">
+                {mode === "open"
+                  ? m["admin-invitations_mode_open_desc"]()
+                  : m["admin-invitations_mode_invite_desc"]()}
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Switch
+                checked={mode === "open"}
+                onCheckedChange={(checked) =>
+                  modeMutation.mutate(checked ? "open" : "invite")
+                }
+                disabled={modeMutation.isPending}
+                aria-label={m["admin-invitations_mode_title"]()}
+              />
+              <span className="text-sm font-medium">
+                {mode === "open"
+                  ? m["admin-invitations_mode_open"]()
+                  : m["admin-invitations_mode_invite"]()}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold">{m["admin-invitations_page_title"]()}</h2>
+          <Button onClick={() => setCreateOpen(true)}>
+            <Plus className="size-4" />
+            {m["admin-invitations_create_title"]()}
+          </Button>
+        </div>
+
+        {loading ? (
+          <div className="space-y-2">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : codes.length === 0 ? (
+          <div className="rounded-lg border border-dashed py-12 text-center text-muted-foreground">
+            {m["admin-invitations_empty"]()}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-border overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead>{m["admin-invitations_table_columns_code"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_status"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_uses"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_expires"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_creator"]()}</TableHead>
+                  <TableHead className="text-right">
+                    {m["admin-invitations_table_columns_actions"]()}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {codes.map((row) => {
+                  const status = statusOf(row)
+                  const canDelete = row.usedCount === 0
+                  return (
+                    <TableRow key={row.id}>
+                      <TableCell>
+                        <button
+                          type="button"
+                          className="inline-flex items-center gap-1.5 font-mono text-sm hover:text-primary"
+                          onClick={() => handleCopy(row.code)}
+                          title={m["admin-invitations_toast_copied"]()}
+                        >
+                          {row.code}
+                          <Copy className="size-3.5 text-muted-foreground" />
+                        </button>
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge status={status} />
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-sm">
+                            {row.usedCount}/{row.maxUses}
+                          </span>
+                          {row.uses.length > 0 && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 px-2"
+                              onClick={() => setUsesViewer(row)}
+                            >
+                              <Users className="size-3.5" />
+                            </Button>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm">
+                          {formatTimestamp(row.expiresAt)}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        {row.creator ? (
+                          <span className="text-sm">{row.creator}</span>
+                        ) : (
+                          <span className="text-sm text-muted-foreground">—</span>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="inline-flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className={row.disabledAt != null ? "h-8" : "h-8"}
+                            disabled={toggleMutation.isPending}
+                            onClick={() => toggleMutation.mutate(row.id)}
+                          >
+                            {row.disabledAt != null ? (
+                              <>
+                                <CheckCircle2 className="size-4" />
+                                {m["admin-invitations_action_toggle_enable"]()}
+                              </>
+                            ) : (
+                              <>
+                                <Ban className="size-4" />
+                                {m["admin-invitations_action_toggle_disable"]()}
+                              </>
+                            )}
+                          </Button>
+                          {canDelete ? (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                              onClick={() => setPendingDelete(row)}
+                            >
+                              <Trash2 className="size-4" />
+                              {m["admin-invitations_action_delete"]()}
+                            </Button>
+                          ) : (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-8 text-destructive"
+                                  disabled
+                                >
+                                  <Trash2 className="size-4" />
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                {m["admin-invitations_delete_disabled_hint"]()}
+                              </TooltipContent>
+                            </Tooltip>
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{m["admin-invitations_create_title"]()}</DialogTitle>
+            <DialogDescription>
+              {m["admin-invitations_create_desc"]()}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="invite-code">{m["admin-invitations_create_code_label"]()}</Label>
+              <Input
+                id="invite-code"
+                value={createForm.code}
+                onChange={(e) =>
+                  setCreateForm((f) => ({ ...f, code: e.target.value }))
+                }
+                placeholder={m["admin-invitations_create_code_placeholder"]()}
+                maxLength={32}
+                pattern="[A-Za-z0-9_-]*"
+              />
+              <p className="text-xs text-muted-foreground">
+                {m["admin-invitations_create_code_help"]()}
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="invite-maxuses">
+                  {m["admin-invitations_create_maxuses_label"]()}
+                </Label>
+                <Input
+                  id="invite-maxuses"
+                  type="number"
+                  min={1}
+                  max={9999}
+                  value={createForm.maxUses}
+                  onChange={(e) =>
+                    setCreateForm((f) => ({
+                      ...f,
+                      maxUses: Math.max(1, Math.min(9999, Number(e.target.value) || 1)),
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="invite-validdays">
+                  {m["admin-invitations_create_validdays_label"]()}
+                </Label>
+                <Input
+                  id="invite-validdays"
+                  type="number"
+                  min={1}
+                  max={365}
+                  value={createForm.validDays}
+                  onChange={(e) =>
+                    setCreateForm((f) => ({
+                      ...f,
+                      validDays: Math.max(1, Math.min(365, Number(e.target.value) || 1)),
+                    }))
+                  }
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>
+              {m.common_common_cancel()}
+            </Button>
+            <Button
+              onClick={() =>
+                createMutation.mutate({
+                  code: createForm.code.trim() || undefined,
+                  maxUses: createForm.maxUses,
+                  validDays: createForm.validDays,
+                })
+              }
+              disabled={createMutation.isPending}
+            >
+              {m["admin-invitations_create_submit"]()}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={!!pendingDelete}
+        onOpenChange={(open: boolean) => !open && setPendingDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {m["admin-invitations_delete_confirm_title"]({
+                code: pendingDelete?.code ?? "",
+              })}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {m["admin-invitations_delete_confirm_desc"]()}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteMutation.isPending}
+              onClick={() =>
+                pendingDelete && deleteMutation.mutate(pendingDelete.id)
+              }
+            >
+              {m["admin-invitations_action_delete"]()}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Dialog
+        open={!!usesViewer}
+        onOpenChange={(open: boolean) => !open && setUsesViewer(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {m["admin-invitations_uses_title"]({
+                code: usesViewer?.code ?? "",
+              })}
+            </DialogTitle>
+          </DialogHeader>
+          {usesViewer && usesViewer.uses.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              {m["admin-invitations_uses_empty"]()}
+            </div>
+          ) : usesViewer ? (
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead>{m["admin-invitations_uses_column_username"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_uses_column_usedat"]()}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {usesViewer.uses.map((u) => (
+                  <TableRow key={u.userId}>
+                    <TableCell>
+                      <span className="text-sm">{u.user.username}</span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm">{formatTimestamp(u.usedAt)}</span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}