chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate page components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
frontend/src/pages/admin/UserDetailPage.tsx
View File

@@ -189,8 +189,8 @@ export function UserDetailPage() {
}
const selectClass = cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
)
if (loading) {
@@ -224,15 +224,15 @@ export function UserDetailPage() {
<div className="flex items-center gap-4">
<button
onClick={() => navigate('/admin/users')}
className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-md border border-[#1e2130] p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<ArrowLeft className="h-4 w-4" />
</button>
<div className="flex-1">
<h1 className="text-xl font-heading font-semibold text-foreground">
<h1 className="text-xl font-heading font-semibold text-[#e2e5eb]">
{user.full_name || user.email}
</h1>
<p className="text-sm text-muted-foreground">{user.email}</p>
<p className="text-sm text-[#848b9b]">{user.email}</p>
</div>
<div className="flex items-center gap-2">
{user.is_super_admin && (
@@ -252,21 +252,21 @@ export function UserDetailPage() {
{/* Account & Subscription */}
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<div className="bg-card border border-border rounded-xl p-6">
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-[#848b9b]">
Account & Subscription
</h2>
<dl className="space-y-3">
{user.account && (
<>
<div className="flex justify-between">
<dt className="text-sm text-muted-foreground">Account</dt>
<dd className="text-sm text-foreground">{user.account.name}</dd>
<dt className="text-sm text-[#848b9b]">Account</dt>
<dd className="text-sm text-[#e2e5eb]">{user.account.name}</dd>
</div>
{user.account.display_code && (
<div className="flex justify-between">
<dt className="text-sm text-muted-foreground">Display Code</dt>
<dd className="text-sm font-mono text-muted-foreground">{user.account.display_code}</dd>
<dt className="text-sm text-[#848b9b]">Display Code</dt>
<dd className="text-sm font-mono text-[#848b9b]">{user.account.display_code}</dd>
</div>
)}
</>
@@ -274,13 +274,13 @@ export function UserDetailPage() {
{user.subscription ? (
<>
<div className="flex justify-between">
<dt className="text-sm text-muted-foreground">Plan</dt>
<dd className="text-sm font-semibold text-foreground">
<dt className="text-sm text-[#848b9b]">Plan</dt>
<dd className="text-sm font-semibold text-[#e2e5eb]">
{user.subscription.plan.charAt(0).toUpperCase() + user.subscription.plan.slice(1)}
</dd>
</div>
<div className="flex justify-between">
<dt className="text-sm text-muted-foreground">Status</dt>
<dt className="text-sm text-[#848b9b]">Status</dt>
<dd>
<StatusBadge variant={user.subscription.status === 'trialing' ? 'warning' : 'success'}>
{user.subscription.status}
@@ -289,24 +289,24 @@ export function UserDetailPage() {
</div>
{user.subscription.current_period_end && (
<div className="flex justify-between">
<dt className="text-sm text-muted-foreground">Period End</dt>
<dd className="text-sm text-muted-foreground">{fmt(user.subscription.current_period_end)}</dd>
<dt className="text-sm text-[#848b9b]">Period End</dt>
<dd className="text-sm text-[#848b9b]">{fmt(user.subscription.current_period_end)}</dd>
</div>
)}
</>
) : (
<div className="text-sm text-muted-foreground">No subscription</div>
<div className="text-sm text-[#848b9b]">No subscription</div>
)}
<div className="flex justify-between">
<dt className="text-sm text-muted-foreground">Joined</dt>
<dd className="text-sm text-muted-foreground">{fmt(user.created_at)}</dd>
<dt className="text-sm text-[#848b9b]">Joined</dt>
<dd className="text-sm text-[#848b9b]">{fmt(user.created_at)}</dd>
</div>
</dl>
</div>
{/* Admin Actions */}
<div className="bg-card border border-border rounded-xl p-6">
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-[#848b9b]">
Admin Actions
</h2>
<div className="space-y-3">
@@ -317,16 +317,16 @@ export function UserDetailPage() {
setSelectedPlan(user.subscription?.plan || 'free')
setPlanModalOpen(true)
}}
className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex w-full items-center gap-3 rounded-lg border border-[#1e2130] px-4 py-3 text-left text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<Shield className="h-4 w-4 text-muted-foreground" />
<Shield className="h-4 w-4 text-[#848b9b]" />
Change Plan
</button>
<button
onClick={() => setTrialModalOpen(true)}
className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex w-full items-center gap-3 rounded-lg border border-[#1e2130] px-4 py-3 text-left text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<Clock className="h-4 w-4 text-muted-foreground" />
<Clock className="h-4 w-4 text-[#848b9b]" />
{user.subscription?.status === 'trialing' ? 'Extend Trial' : 'Start Trial'}
</button>
</>
@@ -349,9 +349,9 @@ export function UserDetailPage() {
setResetTempPassword(null)
setResetModalOpen(true)
}}
className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex w-full items-center gap-3 rounded-lg border border-[#1e2130] px-4 py-3 text-left text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<KeyRound className="h-4 w-4 text-muted-foreground" />
<KeyRound className="h-4 w-4 text-[#848b9b]" />
Reset Password
</button>
<button
@@ -402,42 +402,42 @@ export function UserDetailPage() {
{/* Invite Code Used */}
{user.invite_code_used && (
<div className="bg-card border border-border rounded-xl p-6">
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-[#848b9b]">
<Ticket className="mr-2 inline h-4 w-4" />
Invite Code Used
</h2>
<dl className="grid grid-cols-2 gap-4 md:grid-cols-4">
<div>
<dt className="text-xs text-muted-foreground">Code</dt>
<dd className="mt-1 font-mono text-sm text-muted-foreground">{user.invite_code_used.code}</dd>
<dt className="text-xs text-[#848b9b]">Code</dt>
<dd className="mt-1 font-mono text-sm text-[#848b9b]">{user.invite_code_used.code}</dd>
</div>
<div>
<dt className="text-xs text-muted-foreground">Plan Assigned</dt>
<dd className="mt-1 text-sm text-muted-foreground">
<dt className="text-xs text-[#848b9b]">Plan Assigned</dt>
<dd className="mt-1 text-sm text-[#848b9b]">
{user.invite_code_used.assigned_plan.charAt(0).toUpperCase() + user.invite_code_used.assigned_plan.slice(1)}
</dd>
</div>
<div>
<dt className="text-xs text-muted-foreground">Trial Days</dt>
<dd className="mt-1 text-sm text-muted-foreground">{user.invite_code_used.trial_duration_days ?? '—'}</dd>
<dt className="text-xs text-[#848b9b]">Trial Days</dt>
<dd className="mt-1 text-sm text-[#848b9b]">{user.invite_code_used.trial_duration_days ?? '—'}</dd>
</div>
<div>
<dt className="text-xs text-muted-foreground">Created By</dt>
<dd className="mt-1 text-sm text-muted-foreground">{user.invite_code_used.created_by_email ?? '—'}</dd>
<dt className="text-xs text-[#848b9b]">Created By</dt>
<dd className="mt-1 text-sm text-[#848b9b]">{user.invite_code_used.created_by_email ?? '—'}</dd>
</div>
</dl>
</div>
)}
{/* Tabs: Sessions / Audit Logs */}
<div className="bg-card border border-border rounded-xl">
<div className="flex border-b border-border">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl">
<div className="flex border-b border-[#1e2130]">
<button
onClick={() => setActiveTab('sessions')}
className={cn(
'px-6 py-3 text-sm font-medium',
activeTab === 'sessions' ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
activeTab === 'sessions' ? 'border-b-2 border-foreground text-[#e2e5eb]' : 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
Sessions ({user.total_sessions})
@@ -446,7 +446,7 @@ export function UserDetailPage() {
onClick={() => setActiveTab('audit')}
className={cn(
'px-6 py-3 text-sm font-medium',
activeTab === 'audit' ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
activeTab === 'audit' ? 'border-b-2 border-foreground text-[#e2e5eb]' : 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
Audit Logs ({user.total_audit_logs})
@@ -458,7 +458,7 @@ export function UserDetailPage() {
user.recent_sessions.length > 0 ? (
<table className="w-full">
<thead>
<tr className="border-b border-border text-left text-xs text-muted-foreground">
<tr className="border-b border-[#1e2130] text-left text-xs text-[#848b9b]">
<th className="pb-2 font-medium">Tree</th>
<th className="pb-2 font-medium">Started</th>
<th className="pb-2 font-medium">Completed</th>
@@ -467,17 +467,17 @@ export function UserDetailPage() {
</thead>
<tbody>
{user.recent_sessions.map(s => (
<tr key={s.id} className="border-b border-border">
<td className="py-3 text-sm text-muted-foreground">{s.tree_name ?? '—'}</td>
<td className="py-3 text-sm text-muted-foreground">{fmtFull(s.started_at)}</td>
<td className="py-3 text-sm text-muted-foreground">{fmtFull(s.completed_at)}</td>
<tr key={s.id} className="border-b border-[#1e2130]">
<td className="py-3 text-sm text-[#848b9b]">{s.tree_name ?? '—'}</td>
<td className="py-3 text-sm text-[#848b9b]">{fmtFull(s.started_at)}</td>
<td className="py-3 text-sm text-[#848b9b]">{fmtFull(s.completed_at)}</td>
<td className="py-3">
{s.outcome ? (
<StatusBadge variant={s.outcome === 'resolved' ? 'success' : 'default'}>
{s.outcome}
</StatusBadge>
) : (
<span className="text-sm text-muted-foreground">—</span>
<span className="text-sm text-[#848b9b]">—</span>
)}
</td>
</tr>
@@ -485,7 +485,7 @@ export function UserDetailPage() {
</tbody>
</table>
) : (
<div className="py-8 text-center text-sm text-muted-foreground">No sessions yet</div>
<div className="py-8 text-center text-sm text-[#848b9b]">No sessions yet</div>
)
)}
@@ -493,7 +493,7 @@ export function UserDetailPage() {
user.recent_audit_logs.length > 0 ? (
<table className="w-full">
<thead>
<tr className="border-b border-border text-left text-xs text-muted-foreground">
<tr className="border-b border-[#1e2130] text-left text-xs text-[#848b9b]">
<th className="pb-2 font-medium">Action</th>
<th className="pb-2 font-medium">Resource</th>
<th className="pb-2 font-medium">Time</th>
@@ -501,16 +501,16 @@ export function UserDetailPage() {
</thead>
<tbody>
{user.recent_audit_logs.map(a => (
<tr key={a.id} className="border-b border-border">
<td className="py-3 text-sm text-muted-foreground">{a.action}</td>
<td className="py-3 text-sm text-muted-foreground">{a.resource_type ?? '—'}</td>
<td className="py-3 text-sm text-muted-foreground">{fmtFull(a.created_at)}</td>
<tr key={a.id} className="border-b border-[#1e2130]">
<td className="py-3 text-sm text-[#848b9b]">{a.action}</td>
<td className="py-3 text-sm text-[#848b9b]">{a.resource_type ?? '—'}</td>
<td className="py-3 text-sm text-[#848b9b]">{fmtFull(a.created_at)}</td>
</tr>
))}
</tbody>
</table>
) : (
<div className="py-8 text-center text-sm text-muted-foreground">No audit logs yet</div>
<div className="py-8 text-center text-sm text-[#848b9b]">No audit logs yet</div>
)
)}
</div>
@@ -530,7 +530,7 @@ export function UserDetailPage() {
}
>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Plan</label>
<select
aria-label="Subscription plan"
value={selectedPlan}
@@ -560,11 +560,11 @@ export function UserDetailPage() {
}
>
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
Choose how to reset the password for <span className="font-medium text-foreground">{user.full_name || user.email}</span>.
<p className="text-sm text-[#848b9b]">
Choose how to reset the password for <span className="font-medium text-[#e2e5eb]">{user.full_name || user.email}</span>.
</p>
<div className="space-y-2">
<label className="flex items-start gap-3 rounded-lg border border-border p-3 cursor-pointer hover:bg-accent">
<label className="flex items-start gap-3 rounded-lg border border-[#1e2130] p-3 cursor-pointer hover:bg-accent">
<input
type="radio"
name="reset-mode"
@@ -574,11 +574,11 @@ export function UserDetailPage() {
className="mt-0.5"
/>
<div>
<div className="text-sm font-medium text-foreground">Send Reset Email</div>
<div className="text-xs text-muted-foreground">User receives an email with a reset link (30 min expiry)</div>
<div className="text-sm font-medium text-[#e2e5eb]">Send Reset Email</div>
<div className="text-xs text-[#848b9b]">User receives an email with a reset link (30 min expiry)</div>
</div>
</label>
<label className="flex items-start gap-3 rounded-lg border border-border p-3 cursor-pointer hover:bg-accent">
<label className="flex items-start gap-3 rounded-lg border border-[#1e2130] p-3 cursor-pointer hover:bg-accent">
<input
type="radio"
name="reset-mode"
@@ -588,8 +588,8 @@ export function UserDetailPage() {
className="mt-0.5"
/>
<div>
<div className="text-sm font-medium text-foreground">Generate Temp Password</div>
<div className="text-xs text-muted-foreground">A temporary password is generated. You share it manually.</div>
<div className="text-sm font-medium text-[#e2e5eb]">Generate Temp Password</div>
<div className="text-xs text-[#848b9b]">A temporary password is generated. You share it manually.</div>
</div>
</label>
</div>
@@ -613,18 +613,18 @@ export function UserDetailPage() {
This password will not be shown again. Copy it now.
</div>
<div className="flex items-center gap-2">
<code className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground font-mono">
<code className="flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] font-mono">
{resetTempPassword}
</code>
<button
onClick={handleCopyResetPassword}
className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
className="rounded-md border border-[#1e2130] p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
title="Copy password"
>
{resetCopied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
</button>
</div>
<p className="text-xs text-muted-foreground">
<p className="text-xs text-[#848b9b]">
The user will be required to change this password on next login.
</p>
</div>
@@ -646,7 +646,7 @@ export function UserDetailPage() {
}
>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Days to add</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Days to add</label>
<Input
type="number"
value={trialDays}
@@ -654,7 +654,7 @@ export function UserDetailPage() {
min={1}
max={90}
/>
<p className="mt-1 text-xs text-muted-foreground">1-90 days. Will convert to trialing status if not already.</p>
<p className="mt-1 text-xs text-[#848b9b]">1-90 days. Will convert to trialing status if not already.</p>
</div>
</Modal>
@@ -712,11 +712,11 @@ export function UserDetailPage() {
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
This user cannot be deleted because they have dependencies:
</div>
<ul className="space-y-1 text-sm text-muted-foreground">
<ul className="space-y-1 text-sm text-[#848b9b]">
{Object.entries(hardDeleteBlockers).map(([key, count]) => (
<li key={key} className="flex justify-between">
<span>{key.replace(/_/g, ' ')}</span>
<span className="font-mono text-muted-foreground">{count}</span>
<span className="font-mono text-[#848b9b]">{count}</span>
</li>
))}
</ul>