refactor: tenants surface uses @crema/table-ui + search-ui + feedback-ui

Replaces the hand-rolled shadcn primitives in app/routes/tenants.tsx
with manifest libs: DataTable + ActionsCell + BadgeCell + DateCell +
Pagination + useTable from table-ui, SearchInput from search-ui, and
AlertBanner + ConfirmDialog + EmptyState + LoadingOverlay from feedback-ui.

Behaviour preserved: same columns, same row actions, same suspend/
deactivate/activate handlers. Gains: built-in sortable columns,
pagination controls, density toggle support, proper confirmation dialogs
for destructive actions, accessible empty/loading/error states.

Wires three new sibling libs into tsconfig.json paths and app.css
@source lines: lib-table-ui, lib-search-ui, lib-feedback-ui, plus
lib-auth-ui (used by lib-arcadia-auth-ui after its refactor).

Corrects the earlier miss of not checking docs/LIBS.md before rolling
custom UI — the manifest already had what we needed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/app.css

@@ -13,6 +13,10 @@
 @source "../../lib-action-bus/src";
 @source "../../lib-arcadia-client/src";
 @source "../../lib-arcadia-auth-ui/src";
+@source "../../lib-table-ui/src";
+@source "../../lib-search-ui/src";
+@source "../../lib-feedback-ui/src";
+@source "../../lib-auth-ui/src";
 /* CREMA:SOURCES */
 
 @custom-variant dark (&:is(.dark *));

app/routes/tenants.tsx

@@ -1,11 +1,23 @@
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { Link } from "react-router"
-import { AlertTriangle, Loader2, MoreHorizontal, Pause, Play, Plus, RefreshCw, Search, X } from "lucide-react"
+import { Pause, Play, Plus, RefreshCw } from "lucide-react"
 
 import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
+import {
+  ActionsCell,
+  BadgeCell,
+  DataTable,
+  DateCell,
+  Pagination,
+  useTable,
+  type ActionItem,
+  type BadgeTone,
+  type Column,
+} from "@crema/table-ui"
+import { SearchInput } from "@crema/search-ui"
+import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
 
 import { AppShell } from "~/components/layout/app-shell"
-import { Badge } from "~/components/ui/badge"
 import { Button } from "~/components/ui/button"
 import {
   Card,
@@ -15,27 +27,23 @@ import {
   CardTitle,
 } from "~/components/ui/card"
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu"
-import { Input } from "~/components/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "~/components/ui/table"
-import { activateTenant, deactivateTenant, listTenants, suspendTenant, type Tenant, type TenantStatus } from "~/lib/arcadia/tenants"
+  activateTenant,
+  deactivateTenant,
+  listTenants,
+  suspendTenant,
+  type Tenant,
+  type TenantStatus,
+} from "~/lib/arcadia/tenants"
 import { pageTitle } from "~/lib/page-meta"
 import { useSession } from "~/lib/session"
 
 export const meta = () => pageTitle("Tenants")
 
+type PendingAction = {
+  kind: "suspend" | "deactivate"
+  tenant: Tenant
+} | null
+
 export default function TenantsRoute() {
   const session = useSession()
   const arcadia = useArcadiaClient()
@@ -43,7 +51,8 @@ export default function TenantsRoute() {
   const [tenants, setTenants] = useState<Tenant[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
-  const [query, setQuery] = useState("")
+  const [pending, setPending] = useState<PendingAction>(null)
+  const [search, setSearch] = useState("")
 
   const refresh = useCallback(async () => {
     setError(null)
@@ -62,16 +71,84 @@ export default function TenantsRoute() {
     if (session) refresh()
   }, [session, refresh])
 
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase()
-    if (!q) return tenants
-    return tenants.filter(
-      (t) =>
-        t.name.toLowerCase().includes(q) ||
-        t.slug.toLowerCase().includes(q) ||
-        t.id.toLowerCase().includes(q),
-    )
-  }, [tenants, query])
+  const runAction = useCallback(
+    async (action: PendingAction) => {
+      if (!action) return
+      try {
+        if (action.kind === "suspend") await suspendTenant(arcadia, action.tenant.id)
+        else await deactivateTenant(arcadia, action.tenant.id)
+        setPending(null)
+        await refresh()
+      } catch (err) {
+        setError(err instanceof ArcadiaError ? err.message : "Action failed.")
+        setPending(null)
+      }
+    },
+    [arcadia, refresh],
+  )
+
+  const columns = useMemo<Column<Tenant>[]>(
+    () => [
+      {
+        id: "name",
+        header: "Name",
+        accessor: "name",
+        sortable: true,
+        cell: (t) => <span className="font-medium">{t.name}</span>,
+      },
+      {
+        id: "slug",
+        header: "Slug",
+        accessor: "slug",
+        sortable: true,
+        cell: (t) => (
+          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{t.slug}</code>
+        ),
+      },
+      {
+        id: "status",
+        header: "Status",
+        accessor: "status",
+        sortable: true,
+        cell: (t) => <BadgeCell label={t.status} tone={statusTone(t.status)} />,
+      },
+      {
+        id: "plan",
+        header: "Plan",
+        accessor: (t) => t.plan?.name ?? "",
+        sortable: true,
+        cell: (t) => <span className="text-muted-foreground">{t.plan?.name ?? "—"}</span>,
+      },
+      {
+        id: "created",
+        header: "Created",
+        accessor: "inserted_at",
+        sortable: true,
+        cell: (t) => <DateCell value={t.inserted_at} format="short" />,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (t) => (
+          <ActionsCell items={rowActions(t, arcadia, refresh, setPending, setError)} />
+        ),
+      },
+    ],
+    [arcadia, refresh],
+  )
+
+  const table = useTable<Tenant>({
+    data: tenants,
+    columns,
+    getRowId: (t) => t.id,
+    initialPageSize: 25,
+    initialSearch: search,
+  })
+  // Keep useTable's search in lockstep with our SearchInput.
+  useEffect(() => {
+    table.setSearch(search)
+  }, [search, table])
 
   if (!session) {
     return (
@@ -123,154 +200,132 @@ export default function TenantsRoute() {
           </div>
         </header>
 
+        {error ? (
+          <AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
+            {error}
+          </AlertBanner>
+        ) : null}
+
         <Card>
           <CardHeader className="flex flex-row items-center justify-between gap-4">
-            <div className="relative max-w-sm flex-1">
-              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                data-action="tenants-search"
-                placeholder="Search by name, slug, or ID"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                className="pl-9"
-              />
-              {query ? (
-                <button
-                  type="button"
-                  data-action="tenants-search-clear"
-                  onClick={() => setQuery("")}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                >
-                  <X className="size-4" />
-                </button>
-              ) : null}
-            </div>
+            <SearchInput
+              value={search}
+              onValueChange={setSearch}
+              placeholder="Search by name, slug, or status"
+              data-action="tenants-search"
+              className="max-w-sm flex-1"
+            />
             <div className="text-xs text-muted-foreground">
-              {filtered.length} of {tenants.length}
+              {table.total} of {tenants.length}
             </div>
           </CardHeader>
 
-          <CardContent className="p-0">
-            {error ? (
-              <div className="flex items-start gap-2 border-t border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-                <AlertTriangle className="mt-0.5 size-4 shrink-0" />
-                <span>{error}</span>
-              </div>
-            ) : null}
-
-            {loading && tenants.length === 0 ? (
-              <div className="flex items-center justify-center gap-2 p-12 text-sm text-muted-foreground">
-                <Loader2 className="size-4 animate-spin" />
-                Loading tenants…
-              </div>
-            ) : filtered.length === 0 ? (
-              <div className="p-12 text-center text-sm text-muted-foreground">
-                {query ? "No tenants match that search." : "No tenants yet."}
-              </div>
+          <CardContent className="relative p-0">
+            <LoadingOverlay active={loading && tenants.length === 0} label="Loading tenants…" />
+            {table.total === 0 && !loading ? (
+              <EmptyState
+                title={search ? "No tenants match that search." : "No tenants yet."}
+                description={
+                  search ? "Try a different name, slug, or status." : "Create your first tenant to get started."
+                }
+                className="py-12"
+              />
             ) : (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Name</TableHead>
-                    <TableHead>Slug</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Plan</TableHead>
-                    <TableHead>Created</TableHead>
-                    <TableHead className="w-10" />
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filtered.map((t) => (
-                    <TenantRow key={t.id} tenant={t} onChange={refresh} />
-                  ))}
-                </TableBody>
-              </Table>
+              <>
+                <DataTable
+                  columns={columns}
+                  rows={table.pageRows}
+                  getRowId={(t) => t.id}
+                  sort={table.sort}
+                  onSortToggle={table.toggleSort}
+                  loading={loading && tenants.length > 0}
+                  stickyHeader
+                />
+                <Pagination
+                  page={table.page}
+                  pageSize={table.pageSize}
+                  total={table.total}
+                  onPageChange={table.setPage}
+                  onPageSizeChange={table.setPageSize}
+                />
+              </>
             )}
           </CardContent>
         </Card>
       </div>
+
+      <ConfirmDialog
+        open={pending?.kind === "suspend"}
+        onOpenChange={(o) => !o && setPending(null)}
+        title="Suspend tenant?"
+        description={
+          pending
+            ? `${pending.tenant.name} will be suspended. Members won't be able to sign in until you reactivate.`
+            : ""
+        }
+        confirmLabel="Suspend"
+        variant="default"
+        onConfirm={() => runAction(pending)}
+      />
+      <ConfirmDialog
+        open={pending?.kind === "deactivate"}
+        onOpenChange={(o) => !o && setPending(null)}
+        title="Deactivate tenant?"
+        description={
+          pending
+            ? `${pending.tenant.name} will be deactivated. This is more severe than suspending.`
+            : ""
+        }
+        confirmLabel="Deactivate"
+        variant="danger"
+        onConfirm={() => runAction(pending)}
+      />
     </AppShell>
   )
 }
 
-function TenantRow({ tenant, onChange }: { tenant: Tenant; onChange: () => void | Promise<void> }) {
-  const arcadia = useArcadiaClient()
-  const [busy, setBusy] = useState(false)
+function statusTone(status: TenantStatus): BadgeTone {
+  if (status === "active") return "success"
+  if (status === "suspended") return "warning"
+  if (status === "deactivated") return "danger"
+  return "default"
+}
 
-  const act = async (fn: () => Promise<unknown>) => {
-    setBusy(true)
-    try {
-      await fn()
-      await onChange()
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  return (
-    <TableRow data-action={`tenants-row-${tenant.slug}`}>
-      <TableCell className="font-medium">{tenant.name}</TableCell>
-      <TableCell>
-        <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{tenant.slug}</code>
-      </TableCell>
-      <TableCell>
-        <StatusBadge status={tenant.status} />
-      </TableCell>
-      <TableCell>
-        <span className="text-sm text-muted-foreground">{tenant.plan?.name ?? "—"}</span>
-      </TableCell>
-      <TableCell>
-        <span className="text-xs text-muted-foreground">{formatDate(tenant.inserted_at)}</span>
-      </TableCell>
-      <TableCell>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              disabled={busy}
-              data-action={`tenants-row-${tenant.slug}-menu`}
-            >
-              {busy ? <Loader2 className="size-4 animate-spin" /> : <MoreHorizontal className="size-4" />}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {tenant.status === "active" ? (
-              <DropdownMenuItem onClick={() => act(() => suspendTenant(arcadia, tenant.id))}>
-                <Pause className="size-4" />
-                Suspend
-              </DropdownMenuItem>
-            ) : (
-              <DropdownMenuItem onClick={() => act(() => activateTenant(arcadia, tenant.id))}>
-                <Play className="size-4" />
-                Activate
-              </DropdownMenuItem>
-            )}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => act(() => deactivateTenant(arcadia, tenant.id))}>
-              Deactivate
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </TableCell>
-    </TableRow>
-  )
-}
-
-function StatusBadge({ status }: { status: TenantStatus }) {
-  const variant: "default" | "secondary" | "destructive" | "outline" =
-    status === "active" ? "default" : status === "suspended" ? "secondary" : "outline"
-  return (
-    <Badge variant={variant} className="capitalize">
-      {status}
-    </Badge>
-  )
-}
-
-function formatDate(iso: string): string {
-  try {
-    return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })
-  } catch {
-    return iso
+function rowActions(
+  t: Tenant,
+  arcadia: ReturnType<typeof useArcadiaClient>,
+  refresh: () => Promise<void>,
+  setPending: (p: PendingAction) => void,
+  setError: (msg: string | null) => void,
+): ActionItem[] {
+  const items: ActionItem[] = []
+  if (t.status === "active") {
+    items.push({
+      id: "suspend",
+      label: "Suspend",
+      icon: <Pause className="size-4" />,
+      onSelect: () => setPending({ kind: "suspend", tenant: t }),
+    })
+  } else {
+    items.push({
+      id: "activate",
+      label: "Activate",
+      icon: <Play className="size-4" />,
+      onSelect: async () => {
+        try {
+          await activateTenant(arcadia, t.id)
+          await refresh()
+        } catch (err) {
+          setError(err instanceof ArcadiaError ? err.message : "Activate failed.")
+        }
+      },
+    })
   }
+  items.push({
+    id: "deactivate",
+    label: "Deactivate",
+    destructive: true,
+    onSelect: () => setPending({ kind: "deactivate", tenant: t }),
+  })
+  return items
 }