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

429
app/routes/organizations.tsx
View File

@@ -11,7 +11,8 @@ import {
Users as UsersIcon,
} 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,
@@ -24,18 +25,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,
@@ -82,14 +79,20 @@ const ON_OWNER_REMOVAL_LABEL: Record<OnOwnerRemoval, string> = {
freeze_until_new_owner: "Freeze until new owner",
}
/** Members are keyed by user_id only; show the short form consistently. */
function memberLabel(m: OrgMembership): string {
return `${m.user_id.slice(0, 8)}…`
}
export default function OrganizationsRoute() {
const session = useSession()
const arcadia = useArcadiaClient()
const toast = useToast()
const [orgs, setOrgs] = useState<Organization[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [info, setInfo] = useState<string | null>(null)
// Raw thrown value: the status code is what makes the message useful.
const [error, setError] = useState<unknown>(null)
const [search, setSearch] = useState("")
const [statusFilter, setStatusFilter] = useState<"all" | OrgStatus>("all")
@@ -102,7 +105,7 @@ export default function OrganizationsRoute() {
try {
setOrgs(await listAllOrganizations(arcadia))
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Failed to load organizations.")
setError(err)
} finally {
setLoading(false)
}
@@ -179,7 +182,7 @@ export default function OrganizationsRoute() {
onSelect: () => setSettingsDialog({ org: o }),
},
]
return <ActionsCell items={items} />
return <ActionsCell items={items} triggerDataAction={`org-${o.id}-actions`} />
},
},
],
@@ -222,17 +225,6 @@ export default function OrganizationsRoute() {
</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
@@ -262,64 +254,59 @@ export default function OrganizationsRoute() {
</CardHeader>
<CardContent className="relative p-0">
<LoadingOverlay
active={loading && orgs.length === 0}
label="Loading organizations…"
/>
{table.total === 0 && !loading ? (
<EmptyState
icon={<Building className="size-6" />}
title={
search || statusFilter !== "all"
? "No organizations match those filters."
: "No organizations yet."
}
description={
search || statusFilter !== "all"
? "Loosen the filter set."
: "End-users create these from inside the app; nothing to do here yet."
}
className="py-12"
<DataState
loading={loading}
error={error}
isEmpty={table.total === 0}
onRetry={refresh}
loadingLabel="Loading organizations…"
empty={
<EmptyState
icon={<Building className="size-6" />}
title={
search || statusFilter !== "all"
? "No organizations match those filters."
: "No organizations yet."
}
description={
search || statusFilter !== "all"
? "Loosen the filter set."
: "End-users create these from inside the app; nothing to do here yet."
}
className="py-12"
/>
}
>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(o) => o.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && orgs.length > 0}
stickyHeader
/>
) : (
<>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(o) => o.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && orgs.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>
<MembersDialog
state={membersDialog}
onClose={() => setMembersDialog(null)}
onInfo={setInfo}
onError={setError}
/>
<MembersDialog state={membersDialog} onClose={() => setMembersDialog(null)} />
<SettingsDialog
state={settingsDialog}
onClose={() => setSettingsDialog(null)}
onSaved={async (msg) => {
onSaved={async (message) => {
setSettingsDialog(null)
if (msg) setInfo(msg)
await refresh()
toast.success(message)
}}
onError={setError}
/>
</AppShell>
)
@@ -347,38 +334,42 @@ type InvitePane = "none" | "invite_existing" | "add_restricted"
function MembersDialog({
state,
onClose,
onInfo,
onError,
}: {
state: MembersDialogState
onClose: () => void
onInfo: (msg: string | null) => void
onError: (msg: string | null) => void
}) {
const arcadia = useArcadiaClient()
const toast = useToast()
const open = state !== null
const org = state?.org
const [members, setMembers] = useState<OrgMembership[]>([])
const [loading, setLoading] = useState(false)
// The member list has its own load error — a failed fetch inside this dialog
// must not read as "no members yet".
const [error, setError] = useState<unknown>(null)
const [pendingRemove, setPendingRemove] = useState<OrgMembership | null>(null)
const [transferTarget, setTransferTarget] = useState<OrgMembership | null>(null)
const [pane, setPane] = useState<InvitePane>("none")
const refresh = useCallback(async () => {
if (!org) return
setError(null)
setLoading(true)
try {
setMembers(await listMembers(arcadia, org.id))
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : "Failed to load members.")
setError(err)
} finally {
setLoading(false)
}
}, [arcadia, org, onError])
}, [arcadia, org])
useEffect(() => {
if (open) refresh()
if (open) {
setPane("none")
refresh()
}
}, [open, refresh])
return (
@@ -417,36 +408,40 @@ function MembersDialog({
<InviteByEmailForm
orgId={org!.id}
onCancel={() => setPane("none")}
onSaved={async (msg) => {
onSaved={async (message) => {
setPane("none")
onInfo(msg)
await refresh()
toast.success(message)
}}
onError={onError}
/>
) : (
<AddRestrictedForm
orgId={org!.id}
onCancel={() => setPane("none")}
onSaved={async (msg) => {
onSaved={async (message) => {
setPane("none")
onInfo(msg)
await refresh()
toast.success(message)
}}
onError={onError}
/>
)}
<div className="relative">
<LoadingOverlay active={loading && members.length === 0} label="Loading members…" />
{members.length === 0 && !loading ? (
<EmptyState
icon={<UsersIcon className="size-6" />}
title="No members yet."
description="Invite someone or add a restricted sub-user to get started."
className="py-8"
/>
) : (
<DataState
loading={loading}
error={error}
isEmpty={members.length === 0}
onRetry={refresh}
loadingLabel="Loading members…"
empty={
<EmptyState
icon={<UsersIcon className="size-6" />}
title="No members yet."
description="Invite someone or add a restricted sub-user to get started."
className="py-8"
/>
}
>
<div className="rounded-md border border-border">
<table className="w-full text-sm">
<thead className="bg-muted/40 text-left text-xs text-muted-foreground">
@@ -461,7 +456,7 @@ function MembersDialog({
<tbody>
{members.map((m) => (
<tr key={m.id} className="border-t border-border">
<td className="px-3 py-2 font-mono text-xs">{m.user_id.slice(0, 8)}…</td>
<td className="px-3 py-2 font-mono text-xs">{memberLabel(m)}</td>
<td className="px-3 py-2">
<Badge variant={roleBadgeVariant(m.role)}>{m.role}</Badge>
</td>
@@ -477,11 +472,7 @@ function MembersDialog({
orgId={org!.id}
onTransfer={() => setTransferTarget(m)}
onRemove={() => setPendingRemove(m)}
onRoleChanged={async (msg) => {
onInfo(msg)
await refresh()
}}
onError={onError}
onRoleChanged={refresh}
/>
</td>
</tr>
@@ -489,7 +480,7 @@ function MembersDialog({
</tbody>
</table>
</div>
)}
</DataState>
</div>
<DialogFooter>
@@ -505,22 +496,25 @@ function MembersDialog({
description={
pendingRemove
? pendingRemove.role === "owner"
? "This member is the owner. Removal will follow the org's owner-removal policy."
: "They will lose access to this organization."
? `This member owns ${org?.name ?? "the organization"}. Removing them applies its owner-removal policy — ${
org ? ON_OWNER_REMOVAL_LABEL[org.on_owner_removal].toLowerCase() : "the configured policy"
} — which may delete or freeze the whole workspace. Transfer ownership first if you only mean to remove the person.`
: `They immediately lose access to ${org?.name ?? "this organization"} and anything shared inside it.`
: ""
}
confirmLabel="Remove"
variant="danger"
onConfirm={async () => {
if (!pendingRemove || !org) return
const who = memberLabel(pendingRemove)
try {
await removeMember(arcadia, org.id, pendingRemove.user_id)
setPendingRemove(null)
onInfo("Member removed.")
await refresh()
toast.success(`Removed ${who} from ${org.name}`)
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : "Remove failed.")
setPendingRemove(null)
toast.error(errorMessage(err, `remove ${who} from ${org.name}`))
}
}}
/>
@@ -531,21 +525,22 @@ function MembersDialog({
title="Transfer ownership?"
description={
transferTarget
? `The current owner will be demoted to admin. ${transferTarget.user_id.slice(0, 8)}… will become owner.`
? `${memberLabel(transferTarget)} becomes the owner of ${org?.name ?? "this organization"}, and the current owner is demoted to admin.`
: ""
}
confirmLabel="Transfer"
variant="default"
onConfirm={async () => {
if (!transferTarget || !org) return
const who = memberLabel(transferTarget)
try {
await transferOwnership(arcadia, org.id, transferTarget.user_id)
setTransferTarget(null)
onInfo("Ownership transferred.")
await refresh()
toast.success(`${org.name} is now owned by ${who}`)
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : "Transfer failed.")
setTransferTarget(null)
toast.error(errorMessage(err, `transfer ${org.name} to ${who}`))
}
}}
/>
@@ -560,16 +555,15 @@ function MemberRowActions({
onTransfer,
onRemove,
onRoleChanged,
onError,
}: {
member: OrgMembership
orgId: string
onTransfer: () => void
onRemove: () => void
onRoleChanged: (msg: string) => Promise<void>
onError: (msg: string | null) => void
onRoleChanged: () => Promise<void>
}) {
const arcadia = useArcadiaClient()
const toast = useToast()
const items: ActionItem[] = []
@@ -583,9 +577,10 @@ function MemberRowActions({
const next = member.role === "admin" ? "member" : "admin"
try {
await changeMemberRole(arcadia, orgId, member.user_id, next)
await onRoleChanged(`Role set to ${next}.`)
await onRoleChanged()
toast.success(`${memberLabel(member)} is now ${next === "admin" ? "an admin" : "a member"}`)
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : "Role change failed.")
toast.error(errorMessage(err, `change ${memberLabel(member)} to ${next}`))
}
},
})
@@ -607,7 +602,9 @@ function MemberRowActions({
onSelect: onRemove,
})
return <ActionsCell items={items} />
return (
<ActionsCell items={items} triggerDataAction={`org-${orgId}-member-${member.id}-actions`} />
)
}
// ============================================================================
@@ -618,17 +615,33 @@ function InviteByEmailForm({
orgId,
onCancel,
onSaved,
onError,
}: {
orgId: string
onCancel: () => void
onSaved: (msg: string) => Promise<void>
onError: (msg: string | null) => void
onSaved: (message: string) => Promise<void>
}) {
const arcadia = useArcadiaClient()
const [email, setEmail] = useState("")
const [role, setRole] = useState<OrgRole>("member")
const [saving, setSaving] = useState(false)
const [error, setError] = useState<unknown>(null)
const submit = async () => {
setError(null)
setSaving(true)
try {
const res = await inviteMember(arcadia, orgId, { email, role })
await onSaved(
res.type === "membership"
? `Added ${email.trim()} — they already had an account`
: `Invitation sent to ${email.trim()}`,
)
} catch (err) {
// The form stays filled in; the error lands right under it.
setError(err)
setSaving(false)
}
}
return (
<div className="rounded-md border border-border bg-muted/20 p-3">
@@ -637,9 +650,10 @@ function InviteByEmailForm({
placeholder="email@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
data-action={`org-${orgId}-invite-email`}
/>
<Select value={role} onValueChange={(v) => setRole(v as OrgRole)}>
<SelectTrigger>
<SelectTrigger data-action={`org-${orgId}-invite-role`}>
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -647,31 +661,31 @@ function InviteByEmailForm({
<SelectItem value="admin">Admin</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="sm" onClick={onCancel} disabled={saving}>
<Button
variant="outline"
size="sm"
onClick={onCancel}
disabled={saving}
data-action={`org-${orgId}-invite-cancel`}
>
Cancel
</Button>
<Button
size="sm"
disabled={!email || saving}
onClick={async () => {
setSaving(true)
try {
const res = await inviteMember(arcadia, orgId, { email, role })
await onSaved(
res.type === "membership"
? "Invited existing user."
: "Email invitation sent.",
)
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : "Invite failed.")
} finally {
setSaving(false)
}
}}
onClick={submit}
data-action={`org-${orgId}-invite-submit`}
>
Send invite
</Button>
</div>
{error ? (
<div className="mt-2">
<DialogError error={error} context="send the invitation" />
</div>
) : null}
<p className="mt-2 text-xs text-muted-foreground">
If an account with that email already exists in this tenant, an invited membership is
created; otherwise an email invitation is sent and the user is materialized on accept.
@@ -684,12 +698,10 @@ function AddRestrictedForm({
orgId,
onCancel,
onSaved,
onError,
}: {
orgId: string
onCancel: () => void
onSaved: (msg: string) => Promise<void>
onError: (msg: string | null) => void
onSaved: (message: string) => Promise<void>
}) {
const arcadia = useArcadiaClient()
const [email, setEmail] = useState("")
@@ -698,13 +710,37 @@ function AddRestrictedForm({
const [password, setPassword] = useState("")
const [role, setRole] = useState<OrgRole>("member")
const [saving, setSaving] = useState(false)
const [error, setError] = useState<unknown>(null)
const submit = async () => {
setError(null)
setSaving(true)
try {
await addRestrictedMember(arcadia, orgId, {
email,
password,
first_name: firstName,
last_name: lastName,
role,
})
await onSaved(`Added ${email.trim()} as a restricted user`)
} catch (err) {
setError(err)
setSaving(false)
}
}
return (
<div className="rounded-md border border-border bg-muted/20 p-3">
<div className="grid gap-2 sm:grid-cols-2">
<div className="flex flex-col gap-1">
<Label htmlFor="r-email">Email</Label>
<Input id="r-email" value={email} onChange={(e) => setEmail(e.target.value)} />
<Input
id="r-email"
value={email}
onChange={(e) => setEmail(e.target.value)}
data-action={`org-${orgId}-restricted-email`}
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="r-password">Initial password</Label>
@@ -713,20 +749,31 @@ function AddRestrictedForm({
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
data-action={`org-${orgId}-restricted-password`}
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="r-first">First name</Label>
<Input id="r-first" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
<Input
id="r-first"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
data-action={`org-${orgId}-restricted-first-name`}
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="r-last">Last name</Label>
<Input id="r-last" value={lastName} onChange={(e) => setLastName(e.target.value)} />
<Input
id="r-last"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
data-action={`org-${orgId}-restricted-last-name`}
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="r-role">Role</Label>
<Select value={role} onValueChange={(v) => setRole(v as OrgRole)}>
<SelectTrigger id="r-role">
<SelectTrigger id="r-role" data-action={`org-${orgId}-restricted-role`}>
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -736,30 +783,28 @@ function AddRestrictedForm({
</Select>
</div>
</div>
{error ? (
<div className="mt-3">
<DialogError error={error} context="add the restricted user" />
</div>
) : null}
<div className="mt-3 flex items-center justify-end gap-2">
<Button variant="outline" size="sm" onClick={onCancel} disabled={saving}>
<Button
variant="outline"
size="sm"
onClick={onCancel}
disabled={saving}
data-action={`org-${orgId}-restricted-cancel`}
>
Cancel
</Button>
<Button
size="sm"
disabled={!email || !password || !firstName || !lastName || saving}
onClick={async () => {
setSaving(true)
try {
await addRestrictedMember(arcadia, orgId, {
email,
password,
first_name: firstName,
last_name: lastName,
role,
})
await onSaved("Restricted user added.")
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : "Add failed.")
} finally {
setSaving(false)
}
}}
onClick={submit}
data-action={`org-${orgId}-restricted-submit`}
>
Add user
</Button>
@@ -780,12 +825,10 @@ function SettingsDialog({
state,
onClose,
onSaved,
onError,
}: {
state: SettingsDialogState
onClose: () => void
onSaved: (msg?: string) => Promise<void>
onError: (msg: string | null) => void
onSaved: (message: string) => Promise<void>
}) {
const arcadia = useArcadiaClient()
const open = state !== null
@@ -795,15 +838,35 @@ function SettingsDialog({
const [status, setStatus] = useState<OrgStatus>("active")
const [onOwnerRemoval, setOnOwnerRemoval] = useState<OnOwnerRemoval>("require_transfer")
const [saving, setSaving] = useState(false)
const [error, setError] = useState<unknown>(null)
useEffect(() => {
if (org) {
setName(org.name)
setStatus(org.status)
setOnOwnerRemoval(org.on_owner_removal)
setError(null)
setSaving(false)
}
}, [org])
const submit = async () => {
if (!org) return
setError(null)
setSaving(true)
try {
await updateOrganization(arcadia, org.id, {
name,
status,
on_owner_removal: onOwnerRemoval,
})
await onSaved(`Saved ${name.trim() || org.name}`)
} catch (err) {
setError(err)
setSaving(false)
}
}
return (
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
<DialogContent>
@@ -815,13 +878,18 @@ function SettingsDialog({
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-1">
<Label htmlFor="o-name">Name</Label>
<Input id="o-name" value={name} onChange={(e) => setName(e.target.value)} />
<Input
id="o-name"
value={name}
onChange={(e) => setName(e.target.value)}
data-action="org-settings-name"
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="o-status">Status</Label>
<Select value={status} onValueChange={(v) => setStatus(v as OrgStatus)}>
<SelectTrigger id="o-status">
<SelectTrigger id="o-status" data-action="org-settings-status">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -838,7 +906,7 @@ function SettingsDialog({
value={onOwnerRemoval}
onValueChange={(v) => setOnOwnerRemoval(v as OnOwnerRemoval)}
>
<SelectTrigger id="o-policy">
<SelectTrigger id="o-policy" data-action="org-settings-policy">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -853,33 +921,24 @@ function SettingsDialog({
</div>
</div>
{error ? <DialogError error={error} context="save the organization" /> : null}
<DialogFooter>
<Button variant="outline" onClick={onClose} disabled={saving}>
<Button
variant="outline"
onClick={onClose}
disabled={saving}
data-action="org-settings-cancel"
>
Cancel
</Button>
<Button
disabled={saving}
onClick={async () => {
if (!org) return
setSaving(true)
try {
await updateOrganization(arcadia, org.id, {
name,
status,
on_owner_removal: onOwnerRemoval,
})
await onSaved("Organization updated.")
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : "Save failed.")
} finally {
setSaving(false)
}
}}
>
Save
<Button disabled={saving} onClick={submit} data-action="org-settings-save">
{saving ? "Saving…" : "Save"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"