CremaUIStudio/arcadia-admin
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Admin UX overhaul: P0 fixes, error-UX foundations, nav cleanup, tenant detail page

Browse Source 
From the 2026-07-14 UI/UX audit (17/40). Four phases:

P1 — Settings route crashed on Agents→Edit (Input/Textarea used but never
imported). Added imports + a shared route-level error boundary
(components/route-error.tsx) re-exported from all shell routes, so one
crashing panel degrades to an explained card with the nav intact instead of
replacing the whole app with a stack trace. Corrected the stale CLAUDE.md
claim that `npm run typecheck` crashes — it works, and would have caught the
missing import.

P2 — Error/empty/feedback foundations. Fixed useSession identity churn that
fired ~3x duplicate fetches per screen and self-inflicted 429s (referentially
stable snapshot). New lib/errors.ts (describeError → plain-language + the fix)
and components/data-state.tsx (DataState renders exactly one of
error/loading/empty/content, so a failed load never shows as "empty";
DialogError for in-dialog failures; 429 auto-retry). Rolled across all 15
list routes; every mutation now toasts. Surfaced+fixed two silent-failure
bugs (sso + buckets-CORS swallowed load errors; the latter could wipe rules
on save).

P3 — Nav IA + trust cleanup. Default-expanded rail; regrouped into 7 coherent
sections; collapsed the Apps/Plan/Entitlements stub triplication into one
honest /billing page; deleted fabricated seeded notifications and the dead
Help menu item; fixed the 403 copy (referenced a tenant switcher that doesn't
exist); removed orphan /assistant + /library routes; gated dev-seed login
hints behind DEV; renamed /activity → /audit-log with a redirect.

P4 — Tenant detail page (routes/tenants.$id.tsx + components/tenant-detail/*),
closing the provision→configure gap. 8 tabs (Overview, Plan & quotas,
Branding, Localization, Email & SMS, Feature flags, IP rules, Inbound
webhooks), each verified saving to the real backend. Row name links to detail.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jules
2026-07-14 13:43:57 +10:00
parent 938143f3f5
commit 7415b40240
51 changed files with 5923 additions and 4575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
app/routes/memberships.tsx
View File

@@ -9,7 +9,8 @@ import {
Trash2,
} from "lucide-react"
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-core-client"
import { useArcadiaClient } from "@crema/arcadia-core-client"
import { useToast } from "@crema/notification-ui"
import {
ActionsCell,
BadgeCell,
@@ -22,18 +23,14 @@ import {
type Column,
} from "@crema/table-ui"
import { SearchInput } from "@crema/search-ui"
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
import { ConfirmDialog, EmptyState } from "@crema/feedback-ui"
import { AppShell } from "~/components/layout/app-shell"
import { DataState, DialogError } from "~/components/data-state"
import { errorMessage } from "~/lib/errors"
import { Badge } from "~/components/ui/badge"
import { Button } from "~/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "~/components/ui/card"
import { Card, CardContent, CardHeader } from "~/components/ui/card"
import {
Dialog,
DialogContent,
@@ -42,7 +39,6 @@ import {
DialogHeader,
DialogTitle,
} from "~/components/ui/dialog"
import { Input } from "~/components/ui/input"
import { Label } from "~/components/ui/label"
import {
Select,
@@ -74,16 +70,22 @@ type Editor =
| { kind: "edit"; membership: Membership }
| null
/** Who the membership is for, in the operator's words. */
function memberLabel(m: Membership): string {
return m.user?.email ?? m.user_id.slice(0, 8) + "…"
}
export default function MembershipsRoute() {
const session = useSession()
const arcadia = useArcadiaClient()
const toast = useToast()
const [memberships, setMemberships] = useState<Membership[]>([])
const [users, setUsers] = useState<User[]>([])
const [roles, setRoles] = useState<Role[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [info, setInfo] = useState<string | null>(null)
// Raw thrown value — DataState turns the status code into plain language.
const [error, setError] = useState<unknown>(null)
const [search, setSearch] = useState("")
const [statusFilter, setStatusFilter] = useState<"all" | MembershipStatus>("all")
const [editor, setEditor] = useState<Editor>(null)
@@ -93,6 +95,8 @@ export default function MembershipsRoute() {
setError(null)
setLoading(true)
try {
// Users and roles are only needed to populate the editor's pickers; a
// failure there shouldn't blank the table, so they degrade to empty.
const [m, u, r] = await Promise.all([
listMemberships(arcadia),
listUsers(arcadia).catch(() => [] as User[]),
@@ -102,7 +106,7 @@ export default function MembershipsRoute() {
setUsers(u)
setRoles(r)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Failed to load memberships.")
setError(err)
} finally {
setLoading(false)
}
@@ -207,6 +211,7 @@ export default function MembershipsRoute() {
header: "",
align: "right",
cell: (m) => {
const who = memberLabel(m)
const items: ActionItem[] = [
{
id: "edit",
@@ -223,10 +228,10 @@ export default function MembershipsRoute() {
onSelect: async () => {
try {
await suspendMembership(arcadia, m.id)
setInfo("Membership suspended.")
await refresh()
toast.success(`Suspended ${who}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Suspend failed.")
toast.error(errorMessage(err, `suspend ${who}`))
}
},
}
@@ -238,10 +243,10 @@ export default function MembershipsRoute() {
onSelect: async () => {
try {
await activateMembership(arcadia, m.id)
setInfo("Membership activated.")
await refresh()
toast.success(`Activated ${who}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Activate failed.")
toast.error(errorMessage(err, `activate ${who}`))
}
},
},
@@ -260,7 +265,7 @@ export default function MembershipsRoute() {
},
},
],
[arcadia, refresh],
[arcadia, refresh, toast],
)
const summary = useMemo(
@@ -318,17 +323,6 @@ export default function MembershipsRoute() {
</div>
</header>
{error ? (
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
{error}
</AlertBanner>
) : null}
{info ? (
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
{info}
</AlertBanner>
) : null}
<Card>
<CardHeader className="flex flex-row items-center gap-3">
<SearchInput
@@ -358,45 +352,46 @@ export default function MembershipsRoute() {
</CardHeader>
<CardContent className="relative p-0">
<LoadingOverlay
active={loading && memberships.length === 0}
label="Loading memberships…"
/>
{table.total === 0 && !loading ? (
<EmptyState
icon={<Network className="size-6" />}
title={
search || statusFilter !== "all"
? "No memberships match those filters."
: "No memberships yet."
}
description={
search || statusFilter !== "all"
? "Loosen the filter set."
: "Add a user to a tenant to create the first membership."
}
className="py-12"
<DataState
loading={loading}
error={error}
isEmpty={table.total === 0}
onRetry={refresh}
loadingLabel="Loading memberships…"
empty={
<EmptyState
icon={<Network className="size-6" />}
title={
search || statusFilter !== "all"
? "No memberships match those filters."
: "No memberships yet."
}
description={
search || statusFilter !== "all"
? "Loosen the filter set."
: "Add a user to a tenant to create the first membership."
}
className="py-12"
/>
}
>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(m) => m.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && memberships.length > 0}
stickyHeader
/>
) : (
<>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(m) => m.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && memberships.length > 0}
stickyHeader
/>
<Pagination
page={table.page}
pageSize={table.pageSize}
total={table.total}
onPageChange={table.setPage}
onPageSizeChange={table.setPageSize}
/>
</>
)}
<Pagination
page={table.page}
pageSize={table.pageSize}
total={table.total}
onPageChange={table.setPage}
onPageSizeChange={table.setPageSize}
/>
</DataState>
</CardContent>
</Card>
</div>
@@ -407,21 +402,23 @@ export default function MembershipsRoute() {
title="Remove membership?"
description={
pendingDelete
? `${pendingDelete.user?.email ?? pendingDelete.user_id} will lose access to ${pendingDelete.tenant?.name ?? "this tenant"}.`
? `${memberLabel(pendingDelete)} immediately loses access to ${pendingDelete.tenant?.name ?? "this tenant"}, along with any roles they hold there. Suspend instead if this is temporary.`
: ""
}
confirmLabel="Remove"
variant="danger"
onConfirm={async () => {
if (!pendingDelete) return
const who = memberLabel(pendingDelete)
const where = pendingDelete.tenant?.name ?? "this tenant"
try {
await deleteMembership(arcadia, pendingDelete.id)
setPendingDelete(null)
setInfo("Membership removed.")
await refresh()
toast.success(`Removed ${who} from ${where}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Remove failed.")
setPendingDelete(null)
toast.error(errorMessage(err, `remove ${who} from ${where}`))
}
}}
/>
@@ -432,12 +429,11 @@ export default function MembershipsRoute() {
roles={roles}
existingUserIds={new Set(memberships.map((m) => m.user_id))}
onClose={() => setEditor(null)}
onSaved={async (msg) => {
onSaved={async (message) => {
setEditor(null)
if (msg) setInfo(msg)
await refresh()
toast.success(message)
}}
onError={setError}
/>
</AppShell>
)
@@ -456,15 +452,13 @@ function MembershipEditorDialog({
existingUserIds,
onClose,
onSaved,
onError,
}: {
state: Editor
users: User[]
roles: Role[]
existingUserIds: Set<string>
onClose: () => void
onSaved: (msg?: string) => Promise<void>
onError: (msg: string | null) => void
onSaved: (message: string) => Promise<void>
}) {
const arcadia = useArcadiaClient()
const open = state !== null
@@ -475,9 +469,13 @@ function MembershipEditorDialog({
const [status, setStatus] = useState<MembershipStatus>("active")
const [selectedRoles, setSelectedRoles] = useState<Set<string>>(new Set())
const [saving, setSaving] = useState(false)
// Rendered inside the dialog: a page banner would sit behind the scrim.
const [error, setError] = useState<unknown>(null)
useEffect(() => {
if (!open) return
setError(null)
setSaving(false)
if (initial) {
setUserId(initial.user_id)
setStatus(initial.status)
@@ -495,7 +493,7 @@ function MembershipEditorDialog({
)
const submit = async () => {
onError(null)
setError(null)
setSaving(true)
try {
const input = {
@@ -503,22 +501,18 @@ function MembershipEditorDialog({
status,
role_ids: Array.from(selectedRoles),
}
const who =
users.find((u) => u.id === userId)?.email ?? initial?.user?.email ?? "the member"
if (isEdit && initial) {
await updateMembership(arcadia, initial.id, input)
await onSaved("Membership updated.")
await onSaved(`Saved ${who}'s membership`)
} else {
await createMembership(arcadia, input)
await onSaved("Member added.")
await onSaved(`Added ${who}`)
}
} catch (err) {
onError(
err instanceof ArcadiaError
? err.message
: err instanceof Error
? err.message
: "Save failed.",
)
} finally {
// Form state survives so the operator can fix and resubmit.
setError(err)
setSaving(false)
}
}
@@ -614,8 +608,20 @@ function MembershipEditorDialog({
</div>
</div>
{error ? (
<DialogError
error={error}
context={isEdit ? "save the membership" : "add the member"}
/>
) : null}
<DialogFooter>
<Button variant="outline" onClick={onClose} disabled={saving}>
<Button
variant="outline"
onClick={onClose}
disabled={saving}
data-action="membership-form-cancel"
>
Cancel
</Button>
<Button
@@ -640,8 +646,4 @@ function countBy<T>(arr: T[], key: (x: T) => string): Record<string, number> {
}, {})
}
// File-local alias just to keep the Editor type narrowable inside the dialog.
type Editor =
| { kind: "create" }
| { kind: "edit"; membership: Membership }
| null
export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"