feat: expand admin customer account controls
This commit is contained in:
chihlasm
@@ -123,6 +123,10 @@ export const adminApi = {
|
||||
api.put(`/admin/users/${id}/subscription/plan`, { plan }).then(r => r.data),
|
||||
extendUserTrial: (id: string, days: number) =>
|
||||
api.put(`/admin/users/${id}/subscription/extend-trial`, { days }).then(r => r.data),
|
||||
updateAccountSubscriptionPlan: (id: string, plan: string) =>
|
||||
api.put(`/admin/accounts/${id}/subscription/plan`, { plan }).then(r => r.data),
|
||||
extendAccountTrial: (id: string, days: number) =>
|
||||
api.put(`/admin/accounts/${id}/subscription/extend-trial`, { days }).then(r => r.data),
|
||||
|
||||
// Invite Codes
|
||||
listInviteCodes: (params?: Record<string, unknown>) =>
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
ArrowRightLeft,
|
||||
Building2,
|
||||
CalendarClock,
|
||||
Check,
|
||||
Copy,
|
||||
Crown,
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
Mail,
|
||||
Search,
|
||||
Shield,
|
||||
Sparkles,
|
||||
UserCheck,
|
||||
UserPlus,
|
||||
UserX,
|
||||
@@ -16,12 +20,18 @@ import {
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Pagination, SearchInput, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
|
||||
import { EmptyState, PageHeader, Pagination, SearchInput, StatusBadge, ActionMenu } from '@/components/admin'
|
||||
import { Modal } from '@/components/common/Modal'
|
||||
import { adminApi } from '@/api/admin'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { AdminAccountListItem, AdminAccountMember, AdminUserListItem } from '@/types/admin'
|
||||
import type {
|
||||
AccountFeatureOverrideResponse,
|
||||
AccountOverrideResponse,
|
||||
AdminAccountListItem,
|
||||
AdminAccountMember,
|
||||
AdminUserListItem,
|
||||
} from '@/types/admin'
|
||||
|
||||
type UserRecord = AdminUserListItem | (AdminAccountMember & {
|
||||
account_id: string
|
||||
@@ -43,18 +53,43 @@ function buildMemberRecord(account: AdminAccountListItem, member: AdminAccountMe
|
||||
}
|
||||
}
|
||||
|
||||
function UsageMini({
|
||||
label,
|
||||
current,
|
||||
}: {
|
||||
label: string
|
||||
current: number
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-card/50 px-3 py-2">
|
||||
<p className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">{label}</p>
|
||||
<p className="mt-1 text-sm font-semibold text-foreground">{current}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function UsersPage() {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [accounts, setAccounts] = useState<AdminAccountListItem[]>([])
|
||||
const [people, setPeople] = useState<AdminUserListItem[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [search, setSearch] = useState('')
|
||||
const [accountOverrides, setAccountOverrides] = useState<AccountOverrideResponse[]>([])
|
||||
const [featureOverrides, setFeatureOverrides] = useState<AccountFeatureOverrideResponse[]>([])
|
||||
const [accountsLoading, setAccountsLoading] = useState(true)
|
||||
const [accountSearch, setAccountSearch] = useState('')
|
||||
const [planFilter, setPlanFilter] = useState('all')
|
||||
const [statusFilter, setStatusFilter] = useState('all')
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
const accountPageSize = 8
|
||||
const peoplePageSize = 20
|
||||
const [showArchived, setShowArchived] = useState(false)
|
||||
|
||||
const [people, setPeople] = useState<AdminUserListItem[]>([])
|
||||
const [peopleLoading, setPeopleLoading] = useState(false)
|
||||
const [peopleSearch, setPeopleSearch] = useState('')
|
||||
const [peoplePage, setPeoplePage] = useState(1)
|
||||
const [peopleTotal, setPeopleTotal] = useState(0)
|
||||
const peoplePageSize = 12
|
||||
|
||||
const [roleModalUser, setRoleModalUser] = useState<UserRecord | null>(null)
|
||||
const [newRole, setNewRole] = useState('')
|
||||
const [moveModalUser, setMoveModalUser] = useState<UserRecord | null>(null)
|
||||
@@ -78,51 +113,83 @@ export function UsersPage() {
|
||||
role: 'engineer' as 'engineer' | 'viewer',
|
||||
})
|
||||
const [inviteLoading, setInviteLoading] = useState(false)
|
||||
const [planModalAccount, setPlanModalAccount] = useState<AdminAccountListItem | null>(null)
|
||||
const [selectedPlan, setSelectedPlan] = useState('free')
|
||||
const [planSaving, setPlanSaving] = useState(false)
|
||||
const [trialModalAccount, setTrialModalAccount] = useState<AdminAccountListItem | null>(null)
|
||||
const [trialDays, setTrialDays] = useState('14')
|
||||
const [trialSaving, setTrialSaving] = useState(false)
|
||||
|
||||
const fetchAccounts = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setAccountsLoading(true)
|
||||
try {
|
||||
const data = await adminApi.listAccounts({
|
||||
page,
|
||||
size: accountPageSize,
|
||||
include_archived: showArchived || undefined,
|
||||
})
|
||||
setAccounts(data.items)
|
||||
setPeople([])
|
||||
setTotal(data.total)
|
||||
const [accountsData, overridesData, featureOverrideData] = await Promise.all([
|
||||
adminApi.listAccounts({
|
||||
page,
|
||||
size: accountPageSize,
|
||||
search: accountSearch || undefined,
|
||||
plan: planFilter !== 'all' ? planFilter : undefined,
|
||||
status: statusFilter !== 'all' ? statusFilter : undefined,
|
||||
include_archived: showArchived || undefined,
|
||||
}),
|
||||
adminApi.listAccountOverrides(),
|
||||
adminApi.listFeatureFlagOverrides(),
|
||||
])
|
||||
setAccounts(accountsData.items)
|
||||
setTotal(accountsData.total)
|
||||
setAccountOverrides(overridesData)
|
||||
setFeatureOverrides(featureOverrideData)
|
||||
} catch {
|
||||
toast.error('Failed to load accounts')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setAccountsLoading(false)
|
||||
}
|
||||
}, [accountPageSize, page, showArchived])
|
||||
}, [accountPageSize, accountSearch, page, planFilter, showArchived, statusFilter])
|
||||
|
||||
const fetchPeople = useCallback(async () => {
|
||||
setLoading(true)
|
||||
if (!peopleSearch.trim()) {
|
||||
setPeopleLoading(false)
|
||||
setPeople([])
|
||||
setPeopleTotal(0)
|
||||
return
|
||||
}
|
||||
setPeopleLoading(true)
|
||||
try {
|
||||
const data = await adminApi.listUsers({
|
||||
page,
|
||||
page: peoplePage,
|
||||
size: peoplePageSize,
|
||||
search: search || undefined,
|
||||
search: peopleSearch || undefined,
|
||||
include_archived: showArchived || undefined,
|
||||
})
|
||||
setPeople(data.items)
|
||||
setAccounts([])
|
||||
setTotal(data.total)
|
||||
setPeopleTotal(data.total)
|
||||
} catch {
|
||||
toast.error('Failed to load people search')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setPeopleLoading(false)
|
||||
}
|
||||
}, [page, peoplePageSize, search, showArchived])
|
||||
}, [peoplePage, peoplePageSize, peopleSearch, showArchived])
|
||||
|
||||
useEffect(() => {
|
||||
if (search.trim()) {
|
||||
fetchPeople()
|
||||
return
|
||||
}
|
||||
fetchAccounts()
|
||||
}, [fetchAccounts, fetchPeople, search])
|
||||
}, [fetchAccounts])
|
||||
|
||||
useEffect(() => {
|
||||
fetchPeople()
|
||||
}, [fetchPeople])
|
||||
|
||||
const limitOverrideByAccount = useMemo(
|
||||
() => new Map(accountOverrides.map((override) => [override.account_id, override])),
|
||||
[accountOverrides]
|
||||
)
|
||||
|
||||
const featureOverrideCounts = useMemo(() => {
|
||||
const counts = new Map<string, number>()
|
||||
for (const override of featureOverrides) {
|
||||
counts.set(override.account_id, (counts.get(override.account_id) ?? 0) + 1)
|
||||
}
|
||||
return counts
|
||||
}, [featureOverrides])
|
||||
|
||||
const handleRoleChange = async () => {
|
||||
if (!roleModalUser || !newRole) return
|
||||
@@ -130,11 +197,10 @@ export function UsersPage() {
|
||||
await adminApi.updateUserRole(roleModalUser.id, newRole)
|
||||
toast.success('Role updated')
|
||||
setRoleModalUser(null)
|
||||
if (search.trim()) {
|
||||
if (peopleSearch.trim()) {
|
||||
fetchPeople()
|
||||
} else {
|
||||
fetchAccounts()
|
||||
}
|
||||
fetchAccounts()
|
||||
} catch {
|
||||
toast.error('Failed to update role')
|
||||
}
|
||||
@@ -149,11 +215,10 @@ export function UsersPage() {
|
||||
await adminApi.activateUser(user.id)
|
||||
toast.success('User activated')
|
||||
}
|
||||
if (search.trim()) {
|
||||
if (peopleSearch.trim()) {
|
||||
fetchPeople()
|
||||
} else {
|
||||
fetchAccounts()
|
||||
}
|
||||
fetchAccounts()
|
||||
} catch {
|
||||
toast.error('Failed to update user status')
|
||||
}
|
||||
@@ -166,11 +231,10 @@ export function UsersPage() {
|
||||
toast.success('User moved to account')
|
||||
setMoveModalUser(null)
|
||||
setDisplayCode('')
|
||||
if (search.trim()) {
|
||||
if (peopleSearch.trim()) {
|
||||
fetchPeople()
|
||||
} else {
|
||||
fetchAccounts()
|
||||
}
|
||||
fetchAccounts()
|
||||
} catch {
|
||||
toast.error('Failed to move user')
|
||||
}
|
||||
@@ -204,11 +268,7 @@ export function UsersPage() {
|
||||
account_role: 'engineer',
|
||||
send_email: true,
|
||||
})
|
||||
if (search.trim()) {
|
||||
fetchPeople()
|
||||
} else {
|
||||
fetchAccounts()
|
||||
}
|
||||
fetchAccounts()
|
||||
} catch (err: unknown) {
|
||||
if (err && typeof err === 'object' && 'response' in err) {
|
||||
const axiosErr = err as { response?: { data?: { detail?: string } } }
|
||||
@@ -240,6 +300,7 @@ export function UsersPage() {
|
||||
setShowInviteModal(false)
|
||||
setInviteForm({ email: '', account_display_code: '', role: 'engineer' })
|
||||
toast.success(result.email_sent ? 'Invite sent' : 'Invite created (email not configured)')
|
||||
fetchAccounts()
|
||||
} catch (err: unknown) {
|
||||
if (err && typeof err === 'object' && 'response' in err) {
|
||||
const axiosErr = err as { response?: { data?: { detail?: string } } }
|
||||
@@ -252,6 +313,36 @@ export function UsersPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateAccountPlan = async () => {
|
||||
if (!planModalAccount) return
|
||||
setPlanSaving(true)
|
||||
try {
|
||||
await adminApi.updateAccountSubscriptionPlan(planModalAccount.id, selectedPlan)
|
||||
toast.success(`Plan updated to ${selectedPlan}`)
|
||||
setPlanModalAccount(null)
|
||||
fetchAccounts()
|
||||
} catch {
|
||||
toast.error('Failed to update account plan')
|
||||
} finally {
|
||||
setPlanSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleExtendTrial = async () => {
|
||||
if (!trialModalAccount || !trialDays) return
|
||||
setTrialSaving(true)
|
||||
try {
|
||||
await adminApi.extendAccountTrial(trialModalAccount.id, parseInt(trialDays, 10))
|
||||
toast.success(`Trial extended by ${trialDays} days`)
|
||||
setTrialModalAccount(null)
|
||||
fetchAccounts()
|
||||
} catch {
|
||||
toast.error('Failed to update trial')
|
||||
} finally {
|
||||
setTrialSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const userActions = (user: UserRecord) => ([
|
||||
{
|
||||
label: 'View Detail',
|
||||
@@ -311,15 +402,15 @@ export function UsersPage() {
|
||||
</div>
|
||||
)
|
||||
|
||||
const isSearching = Boolean(search.trim())
|
||||
const totalPages = Math.max(1, Math.ceil(total / (isSearching ? peoplePageSize : accountPageSize)))
|
||||
const accountTotalPages = Math.max(1, Math.ceil(total / accountPageSize))
|
||||
const peopleTotalPages = Math.max(1, Math.ceil(peopleTotal / peoplePageSize))
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<PageHeader
|
||||
title="Accounts"
|
||||
description="Manage accounts as the top-level admin object, with members nested inside each account."
|
||||
description="Manage customer accounts, subscriptions, overrides, and account-level SaaS operations."
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="secondary" onClick={() => setShowInviteModal(true)}>
|
||||
@@ -334,25 +425,59 @@ export function UsersPage() {
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-border bg-card p-4">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Global People Search
|
||||
Customer Account Management
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Search any name or email across every account. Leave it blank to browse accounts and their members.
|
||||
Search customers, inspect subscription health, and manage account-level SaaS controls from here.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:flex xl:items-center">
|
||||
<SearchInput
|
||||
value={search}
|
||||
value={accountSearch}
|
||||
onSearch={(value) => {
|
||||
setSearch(value)
|
||||
setAccountSearch(value)
|
||||
setPage(1)
|
||||
}}
|
||||
placeholder="Search people across all accounts..."
|
||||
className="w-full sm:min-w-[320px]"
|
||||
placeholder="Search accounts, owners, or display codes..."
|
||||
className="w-full xl:min-w-[320px]"
|
||||
/>
|
||||
<select
|
||||
value={planFilter}
|
||||
onChange={(e) => {
|
||||
setPlanFilter(e.target.value)
|
||||
setPage(1)
|
||||
}}
|
||||
className={cn(
|
||||
'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
|
||||
'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
|
||||
)}
|
||||
>
|
||||
<option value="all">All plans</option>
|
||||
<option value="free">Free</option>
|
||||
<option value="pro">Pro</option>
|
||||
<option value="team">Team</option>
|
||||
</select>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
setStatusFilter(e.target.value)
|
||||
setPage(1)
|
||||
}}
|
||||
className={cn(
|
||||
'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
|
||||
'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
|
||||
)}
|
||||
>
|
||||
<option value="all">All statuses</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="trialing">Trialing</option>
|
||||
<option value="past_due">Past due</option>
|
||||
<option value="canceled">Canceled</option>
|
||||
<option value="orphaned">Orphaned</option>
|
||||
</select>
|
||||
<label className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -360,6 +485,7 @@ export function UsersPage() {
|
||||
onChange={(e) => {
|
||||
setShowArchived(e.target.checked)
|
||||
setPage(1)
|
||||
setPeoplePage(1)
|
||||
}}
|
||||
className="rounded border-border bg-card"
|
||||
/>
|
||||
@@ -369,98 +495,240 @@ export function UsersPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isSearching ? (
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl bg-accent p-2 text-muted-foreground">
|
||||
<Search className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">People Results</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{loading ? 'Searching people...' : `${total} matching people found across all accounts.`}
|
||||
</p>
|
||||
</div>
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl bg-accent p-2 text-muted-foreground">
|
||||
<Building2 className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
{people.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{people.map((person) => renderUserRow(person))}
|
||||
</div>
|
||||
) : !loading ? (
|
||||
<EmptyState
|
||||
icon={<Search className="h-8 w-8" />}
|
||||
title="No people matched that search"
|
||||
description="Try a name, email address, or clear the search to return to the account view."
|
||||
/>
|
||||
) : null}
|
||||
</section>
|
||||
) : (
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl bg-accent p-2 text-muted-foreground">
|
||||
<Building2 className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">Account Directory</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Browse accounts first, then work with the users inside each one.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">Customer Accounts</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{accountsLoading ? 'Loading account records...' : `${total} customer accounts match the current filters.`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{accounts.length > 0 ? (
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{accounts.map((account) => (
|
||||
{accounts.length > 0 ? (
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{accounts.map((account) => {
|
||||
const limitOverride = limitOverrideByAccount.get(account.id)
|
||||
const featureOverrideCount = featureOverrideCounts.get(account.id) ?? 0
|
||||
|
||||
return (
|
||||
<article key={account.id} className="rounded-2xl border border-border bg-card p-5">
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-lg font-semibold text-foreground">{account.name}</h3>
|
||||
<StatusBadge variant="default">{account.display_code}</StatusBadge>
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-lg font-semibold text-foreground">{account.name}</h3>
|
||||
<StatusBadge variant="default">{account.display_code}</StatusBadge>
|
||||
{account.branding_company_name && account.branding_company_name !== account.name && (
|
||||
<StatusBadge variant="default">{account.branding_company_name}</StatusBadge>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Owner: {account.owner?.name ?? 'Unassigned'}{account.owner?.email ? ` • ${account.owner.email}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{account.subscription ? (
|
||||
<>
|
||||
<StatusBadge variant="default">
|
||||
{account.subscription.plan}
|
||||
</StatusBadge>
|
||||
<StatusBadge
|
||||
variant={
|
||||
account.subscription.status === 'past_due'
|
||||
? 'warning'
|
||||
: account.subscription.status === 'canceled'
|
||||
? 'destructive'
|
||||
: account.subscription.status === 'trialing'
|
||||
? 'warning'
|
||||
: 'success'
|
||||
}
|
||||
>
|
||||
{account.subscription.status}
|
||||
</StatusBadge>
|
||||
</>
|
||||
) : (
|
||||
<StatusBadge variant="warning">No subscription</StatusBadge>
|
||||
)}
|
||||
{account.sso_enabled && <StatusBadge variant="success">SSO</StatusBadge>}
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Created {formatDate(account.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<StatusBadge variant="default">
|
||||
<Users className="mr-1 h-3.5 w-3.5" />
|
||||
{account.member_count} members
|
||||
</StatusBadge>
|
||||
<StatusBadge variant="success">{account.active_member_count} active</StatusBadge>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
await navigator.clipboard.writeText(account.display_code)
|
||||
toast.success('Display code copied')
|
||||
}}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
Copy Code
|
||||
</Button>
|
||||
{account.owner && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/admin/users/${account.owner?.id}`)}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
View Owner
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setPlanModalAccount(account)
|
||||
setSelectedPlan(account.subscription?.plan ?? 'free')
|
||||
}}
|
||||
>
|
||||
<Crown className="h-4 w-4" />
|
||||
Change Plan
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setTrialModalAccount(account)
|
||||
setTrialDays('14')
|
||||
}}
|
||||
>
|
||||
<CalendarClock className="h-4 w-4" />
|
||||
Trial
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
{account.members.length > 0 ? (
|
||||
account.members.map((member) => renderUserRow(buildMemberRecord(account, member)))
|
||||
) : (
|
||||
<div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
|
||||
No members found in this account.
|
||||
</div>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<UsageMini label="Members" current={account.member_count} />
|
||||
<UsageMini label="Active" current={account.active_member_count} />
|
||||
<UsageMini label="Flows" current={account.usage.tree_count} />
|
||||
<UsageMini label="Sessions / mo" current={account.usage.session_count_this_month} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<StatusBadge variant="default">{account.pending_invite_count} pending invites</StatusBadge>
|
||||
<StatusBadge variant={limitOverride ? 'warning' : 'default'}>
|
||||
{limitOverride ? 'Custom limits' : 'Default limits'}
|
||||
</StatusBadge>
|
||||
<StatusBadge variant={featureOverrideCount > 0 ? 'warning' : 'default'}>
|
||||
{featureOverrideCount} feature overrides
|
||||
</StatusBadge>
|
||||
{account.subscription?.cancel_at_period_end && (
|
||||
<StatusBadge variant="warning">Cancels at period end</StatusBadge>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : !loading ? (
|
||||
<EmptyState
|
||||
icon={<Building2 className="h-8 w-8" />}
|
||||
title="No accounts to show"
|
||||
description="Create a user with a personal account or clear filters to repopulate the directory."
|
||||
/>
|
||||
) : null}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
total={total}
|
||||
pageSize={isSearching ? peoplePageSize : accountPageSize}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
<dl className="mt-4 grid gap-3 text-sm sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-border bg-card/50 p-3">
|
||||
<dt className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Renewal</dt>
|
||||
<dd className="mt-1 text-foreground">
|
||||
{formatDate(account.subscription?.current_period_end ?? null)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border bg-card/50 p-3">
|
||||
<dt className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Created</dt>
|
||||
<dd className="mt-1 text-foreground">{formatDate(account.created_at)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
<h4 className="text-sm font-semibold text-foreground">Members</h4>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{account.members.length > 0 ? (
|
||||
account.members.slice(0, 3).map((member) => renderUserRow(buildMemberRecord(account, member)))
|
||||
) : (
|
||||
<div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
|
||||
No members found in this account.
|
||||
</div>
|
||||
)}
|
||||
{account.members.length > 3 && (
|
||||
<div className="rounded-xl border border-dashed border-border px-4 py-3 text-sm text-muted-foreground">
|
||||
+{account.members.length - 3} more members in this account
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : !accountsLoading ? (
|
||||
<EmptyState
|
||||
icon={<Building2 className="h-8 w-8" />}
|
||||
title="No customer accounts found"
|
||||
description="Adjust the plan or status filters, or clear the account search."
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={accountTotalPages}
|
||||
total={total}
|
||||
pageSize={accountPageSize}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4 rounded-2xl border border-border bg-card p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl bg-accent p-2 text-muted-foreground">
|
||||
<Search className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">Global People Search</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Find a user anywhere across customer accounts without leaving the account management view.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SearchInput
|
||||
value={peopleSearch}
|
||||
onSearch={(value) => {
|
||||
setPeopleSearch(value)
|
||||
setPeoplePage(1)
|
||||
}}
|
||||
placeholder="Search people by name, email, or account..."
|
||||
className="max-w-lg"
|
||||
/>
|
||||
|
||||
{peopleSearch.trim() ? (
|
||||
people.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{people.map((person) => renderUserRow(person))}
|
||||
<Pagination
|
||||
page={peoplePage}
|
||||
totalPages={peopleTotalPages}
|
||||
total={peopleTotal}
|
||||
pageSize={peoplePageSize}
|
||||
onPageChange={setPeoplePage}
|
||||
/>
|
||||
</div>
|
||||
) : !peopleLoading ? (
|
||||
<EmptyState
|
||||
icon={<Sparkles className="h-8 w-8" />}
|
||||
title="No matching people"
|
||||
description="Try another name or email to find the person you need."
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Searching people...
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Type a name or email to search individual users globally.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<Modal
|
||||
isOpen={!!roleModalUser}
|
||||
@@ -694,6 +962,66 @@ export function UsersPage() {
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
isOpen={!!planModalAccount}
|
||||
onClose={() => setPlanModalAccount(null)}
|
||||
title="Change Account Plan"
|
||||
size="sm"
|
||||
footer={(
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="secondary" onClick={() => setPlanModalAccount(null)}>Cancel</Button>
|
||||
<Button onClick={handleUpdateAccountPlan} loading={planSaving}>Save</Button>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Updating plan for <span className="font-medium text-foreground">{planModalAccount?.name}</span>.
|
||||
</p>
|
||||
<select
|
||||
value={selectedPlan}
|
||||
onChange={(e) => setSelectedPlan(e.target.value)}
|
||||
className={cn(
|
||||
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
|
||||
'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
|
||||
)}
|
||||
>
|
||||
<option value="free">Free</option>
|
||||
<option value="pro">Pro</option>
|
||||
<option value="team">Team</option>
|
||||
</select>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
isOpen={!!trialModalAccount}
|
||||
onClose={() => setTrialModalAccount(null)}
|
||||
title="Start or Extend Trial"
|
||||
size="sm"
|
||||
footer={(
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="secondary" onClick={() => setTrialModalAccount(null)}>Cancel</Button>
|
||||
<Button onClick={handleExtendTrial} loading={trialSaving}>Save</Button>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Starting or extending trial for <span className="font-medium text-foreground">{trialModalAccount?.name}</span>.
|
||||
</p>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-foreground">Days</label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={90}
|
||||
value={trialDays}
|
||||
onChange={(e) => setTrialDays(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -54,14 +54,40 @@ export interface AdminAccountMember {
|
||||
deleted_at: string | null
|
||||
}
|
||||
|
||||
export interface AdminAccountOwnerSummary {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export interface AdminAccountSubscriptionSummary {
|
||||
id: string
|
||||
plan: string
|
||||
status: string
|
||||
billing_interval: string | null
|
||||
current_period_end: string | null
|
||||
cancel_at_period_end: boolean
|
||||
}
|
||||
|
||||
export interface AdminAccountUsageSummary {
|
||||
tree_count: number
|
||||
session_count_this_month: number
|
||||
}
|
||||
|
||||
export interface AdminAccountListItem {
|
||||
id: string
|
||||
name: string
|
||||
display_code: string
|
||||
created_at: string
|
||||
owner_id: string | null
|
||||
owner: AdminAccountOwnerSummary | null
|
||||
subscription: AdminAccountSubscriptionSummary | null
|
||||
usage: AdminAccountUsageSummary
|
||||
member_count: number
|
||||
active_member_count: number
|
||||
pending_invite_count: number
|
||||
sso_enabled: boolean
|
||||
branding_company_name: string | null
|
||||
members: AdminAccountMember[]
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user