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

204
frontend/src/pages/AccountSettingsPage.tsx
View File

@@ -167,23 +167,23 @@ export function AccountSettingsPage() {
<div>
<div className="mb-8">
<div className="flex items-center gap-3">
<Building2 className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Account Settings</h1>
<Building2 className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Account Settings</h1>
</div>
<p className="mt-2 text-muted-foreground">
<p className="mt-2 text-[#848b9b]">
Manage your account, subscription, and team
</p>
</div>
<div className="max-w-3xl space-y-6">
{/* Account Info Section */}
<div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<h2 className="text-lg font-semibold text-foreground">Account Information</h2>
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
<h2 className="text-lg font-semibold text-[#e2e5eb]">Account Information</h2>
<div className="mt-4 space-y-4">
{/* Account Name */}
<div>
<label className="block text-sm font-medium text-foreground">
<label className="block text-sm font-medium text-[#e2e5eb]">
Account Name
</label>
{isEditingName ? (
@@ -193,8 +193,8 @@ export function AccountSettingsPage() {
value={editedName}
onChange={(e) => setEditedName(e.target.value)}
className={cn(
'flex-1 rounded-md border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
autoFocus
@@ -226,11 +226,11 @@ export function AccountSettingsPage() {
</div>
) : (
<div className="mt-1 flex items-center gap-2">
<span className="text-sm text-foreground">{account?.name}</span>
<span className="text-sm text-[#e2e5eb]">{account?.name}</span>
{isAccountOwner && (
<button
onClick={() => setIsEditingName(true)}
className="text-xs text-foreground hover:underline"
className="text-xs text-[#e2e5eb] hover:underline"
>
Edit
</button>
@@ -241,10 +241,10 @@ export function AccountSettingsPage() {
{/* Display Code */}
<div>
<label className="block text-sm font-medium text-foreground">
<label className="block text-sm font-medium text-[#e2e5eb]">
Display Code
</label>
<p className="mt-1 text-sm font-mono text-muted-foreground">
<p className="mt-1 text-sm font-mono text-[#848b9b]">
{account?.display_code}
</p>
</div>
@@ -252,8 +252,8 @@ export function AccountSettingsPage() {
</div>
{/* Subscription Section */}
<div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<h2 className="text-lg font-semibold text-foreground">Subscription</h2>
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
<h2 className="text-lg font-semibold text-[#e2e5eb]">Subscription</h2>
<div className="mt-4 space-y-4">
{/* Plan & Status */}
@@ -261,9 +261,9 @@ export function AccountSettingsPage() {
<span
className={cn(
'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium',
plan === 'free' && 'bg-accent text-muted-foreground',
plan === 'pro' && 'bg-accent text-foreground',
plan === 'team' && 'bg-accent text-foreground'
plan === 'free' && 'bg-accent text-[#848b9b]',
plan === 'pro' && 'bg-accent text-[#e2e5eb]',
plan === 'team' && 'bg-accent text-[#e2e5eb]'
)}
>
<Crown className="h-3.5 w-3.5" />
@@ -277,7 +277,7 @@ export function AccountSettingsPage() {
sub.status === 'trialing' && 'bg-blue-500/10 text-blue-400',
sub.status === 'past_due' && 'bg-yellow-500/10 text-yellow-400',
sub.status === 'canceled' && 'bg-red-400/10 text-red-400',
sub.status === 'orphaned' && 'bg-accent text-muted-foreground'
sub.status === 'orphaned' && 'bg-accent text-[#848b9b]'
)}
>
{sub.status.charAt(0).toUpperCase() + sub.status.slice(1).replace('_', ' ')}
@@ -286,7 +286,7 @@ export function AccountSettingsPage() {
</div>
{sub?.current_period_end && (
<p className="text-sm text-muted-foreground">
<p className="text-sm text-[#848b9b]">
Current period ends: {new Date(sub.current_period_end).toLocaleDateString()}
</p>
)}
@@ -329,14 +329,14 @@ export function AccountSettingsPage() {
{/* Team Members Section (owners only) */}
{isAccountOwner && (
<div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
<div className="flex items-center gap-2">
<Users className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Team Members</h2>
<Users className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Team Members</h2>
</div>
{members.length === 0 ? (
<p className="mt-4 text-sm text-muted-foreground">No team members yet.</p>
<p className="mt-4 text-sm text-[#848b9b]">No team members yet.</p>
) : (
<div className="mt-4 divide-y divide-border">
{members.map((member) => (
@@ -345,12 +345,12 @@ export function AccountSettingsPage() {
className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
>
<div>
<p className="text-sm font-medium text-foreground">{member.name}</p>
<p className="text-xs text-muted-foreground">{member.email}</p>
<p className="text-sm font-medium text-[#e2e5eb]">{member.name}</p>
<p className="text-xs text-[#848b9b]">{member.email}</p>
</div>
<div className="flex items-center gap-3">
{member.account_role === 'owner' ? (
<span className="rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent text-foreground">
<span className="rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent text-[#e2e5eb]">
owner
</span>
) : (
@@ -366,8 +366,8 @@ export function AccountSettingsPage() {
}
}}
className={cn(
'rounded-md border border-border bg-card px-2 py-0.5 text-xs',
'text-foreground focus:border-primary focus:outline-hidden'
'rounded-md border border-[#1e2130] bg-[#14161d] px-2 py-0.5 text-xs',
'text-[#e2e5eb] focus:border-primary focus:outline-hidden'
)}
>
<option value="engineer">engineer</option>
@@ -382,7 +382,7 @@ export function AccountSettingsPage() {
{member.account_role !== 'owner' && (
<button
onClick={() => handleRemoveMember(member.id)}
className="text-muted-foreground hover:text-red-400"
className="text-[#848b9b] hover:text-red-400"
title="Remove member"
>
<X className="h-4 w-4" />
@@ -398,10 +398,10 @@ export function AccountSettingsPage() {
{/* Invite Member Section (owners only) */}
{isAccountOwner && (
<div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
<div className="flex items-center gap-2">
<Mail className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Invite Member</h2>
<Mail className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Invite Member</h2>
</div>
<form onSubmit={handleInvite} className="mt-4 space-y-3">
@@ -413,8 +413,8 @@ export function AccountSettingsPage() {
onChange={(e) => setInviteEmail(e.target.value)}
required
className={cn(
'flex-1 rounded-md border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
@@ -422,8 +422,8 @@ export function AccountSettingsPage() {
value={inviteRole}
onChange={(e) => setInviteRole(e.target.value)}
className={cn(
'rounded-md border border-border bg-card px-3 py-2',
'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
'rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
>
<option value="engineer">Engineer</option>
@@ -449,7 +449,7 @@ export function AccountSettingsPage() {
{/* Pending Invites */}
{invites.length > 0 && (
<div className="mt-6">
<h3 className="text-sm font-medium text-foreground">Pending Invites</h3>
<h3 className="text-sm font-medium text-[#e2e5eb]">Pending Invites</h3>
<div className="mt-2 divide-y divide-border">
{invites
.filter((inv) => !inv.used_at)
@@ -459,21 +459,21 @@ export function AccountSettingsPage() {
className="flex items-center justify-between py-2"
>
<div>
<p className="text-sm text-foreground">{invite.email}</p>
<p className="text-xs text-muted-foreground">
<p className="text-sm text-[#e2e5eb]">{invite.email}</p>
<p className="text-xs text-[#848b9b]">
{invite.expires_at
? `Expires ${new Date(invite.expires_at).toLocaleDateString()}`
: 'No expiration'}
</p>
</div>
<div className="flex items-center gap-2">
<span className="rounded-full bg-accent px-2.5 py-0.5 text-xs text-muted-foreground">
<span className="rounded-full bg-accent px-2.5 py-0.5 text-xs text-[#848b9b]">
{invite.role}
</span>
<button
onClick={() => handleResendInvite(invite.id)}
disabled={resendingId === invite.id}
className="text-muted-foreground hover:text-foreground disabled:opacity-50"
className="text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-50"
title="Resend invite"
>
{resendingId === invite.id ? (
@@ -494,32 +494,32 @@ export function AccountSettingsPage() {
{/* Profile Settings Link */}
<Link
to="/account/profile"
className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
>
<div className="flex items-center gap-3">
<UserCog className="h-5 w-5 text-muted-foreground" />
<UserCog className="h-5 w-5 text-[#848b9b]" />
<div>
<h2 className="text-lg font-semibold text-foreground">Profile Settings</h2>
<p className="text-sm text-muted-foreground">Update your name, email, and personal details</p>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Profile Settings</h2>
<p className="text-sm text-[#848b9b]">Update your name, email, and personal details</p>
</div>
</div>
<span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
<span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
</Link>
{/* Team Categories Link (owners only) */}
{isAccountOwner && (
<Link
to="/account/categories"
className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
>
<div className="flex items-center gap-3">
<FolderTree className="h-5 w-5 text-muted-foreground" />
<FolderTree className="h-5 w-5 text-[#848b9b]" />
<div>
<h2 className="text-lg font-semibold text-foreground">Team Categories</h2>
<p className="text-sm text-muted-foreground">Manage tree categories for your team</p>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Team Categories</h2>
<p className="text-sm text-[#848b9b]">Manage tree categories for your team</p>
</div>
</div>
<span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
<span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
</Link>
)}
@@ -527,16 +527,16 @@ export function AccountSettingsPage() {
{isAccountOwner && (
<Link
to="/account/target-lists"
className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
>
<div className="flex items-center gap-3">
<Server className="h-5 w-5 text-muted-foreground" />
<Server className="h-5 w-5 text-[#848b9b]" />
<div>
<h2 className="text-lg font-semibold text-foreground">Target Lists</h2>
<p className="text-sm text-muted-foreground">Saved server lists for maintenance flow batch launching</p>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Target Lists</h2>
<p className="text-sm text-[#848b9b]">Saved server lists for maintenance flow batch launching</p>
</div>
</div>
<span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
<span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
</Link>
)}
@@ -544,16 +544,16 @@ export function AccountSettingsPage() {
{isAccountOwner && (
<Link
to="/account/chat-retention"
className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
>
<div className="flex items-center gap-3">
<Clock className="h-5 w-5 text-muted-foreground" />
<Clock className="h-5 w-5 text-[#848b9b]" />
<div>
<h2 className="text-lg font-semibold text-foreground">Chat Retention</h2>
<p className="text-sm text-muted-foreground">Configure AI assistant conversation retention policies</p>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Chat Retention</h2>
<p className="text-sm text-[#848b9b]">Configure AI assistant conversation retention policies</p>
</div>
</div>
<span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
<span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
</Link>
)}
@@ -561,16 +561,16 @@ export function AccountSettingsPage() {
{isAccountOwner && (
<Link
to="/account/integrations"
className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
>
<div className="flex items-center gap-3">
<Plug className="h-5 w-5 text-muted-foreground" />
<Plug className="h-5 w-5 text-[#848b9b]" />
<div>
<h2 className="text-lg font-semibold text-foreground">Integrations</h2>
<p className="text-sm text-muted-foreground">Connect your PSA to sync session documentation to tickets</p>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Integrations</h2>
<p className="text-sm text-[#848b9b]">Connect your PSA to sync session documentation to tickets</p>
</div>
</div>
<span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
<span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
</Link>
)}
@@ -578,32 +578,32 @@ export function AccountSettingsPage() {
{isAccountOwner && (
<Link
to="/account/branding"
className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
>
<div className="flex items-center gap-3">
<Palette className="h-5 w-5 text-muted-foreground" />
<Palette className="h-5 w-5 text-[#848b9b]" />
<div>
<h2 className="text-lg font-semibold text-foreground">Branding</h2>
<p className="text-sm text-muted-foreground">Customize logo, accent color, and company name</p>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Branding</h2>
<p className="text-sm text-[#848b9b]">Customize logo, accent color, and company name</p>
</div>
</div>
<span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
<span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
</Link>
)}
{/* Feedback Link (all users) */}
<Link
to="/feedback"
className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
>
<div className="flex items-center gap-3">
<MessageSquareText className="h-5 w-5 text-muted-foreground" />
<MessageSquareText className="h-5 w-5 text-[#848b9b]" />
<div>
<h2 className="text-lg font-semibold text-foreground">Send Feedback</h2>
<p className="text-sm text-muted-foreground">Report bugs, request features, or share your thoughts</p>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Send Feedback</h2>
<p className="text-sm text-[#848b9b]">Report bugs, request features, or share your thoughts</p>
</div>
</div>
<span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
<span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
</Link>
{/* Branding Section (owners only) */}
@@ -612,20 +612,20 @@ export function AccountSettingsPage() {
)}
{/* Preferences Section */}
<div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
<div className="flex items-center gap-2">
<Settings className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Preferences</h2>
<Settings className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Preferences</h2>
</div>
<div className="mt-4">
<label
htmlFor="export-format"
className="block text-sm font-medium text-foreground"
className="block text-sm font-medium text-[#e2e5eb]"
>
Default Export Format
</label>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-[#848b9b]">
This format will be pre-selected when exporting sessions
</p>
<select
@@ -636,8 +636,8 @@ export function AccountSettingsPage() {
toast.success('Preference saved')
}}
className={cn(
'mt-2 block w-full max-w-xs rounded-xl border border-border bg-card px-3 py-2',
'text-sm text-foreground',
'mt-2 block w-full max-w-xs rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-sm text-[#e2e5eb]',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
>
@@ -649,23 +649,23 @@ export function AccountSettingsPage() {
</div>
{/* SSO Section (Task 11) */}
{isAccountOwner && (
<div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
<div className="flex items-center gap-2 mb-3">
<ShieldCheck className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Single Sign-On (SSO)</h2>
<span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-label font-medium text-primary">
<ShieldCheck className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Single Sign-On (SSO)</h2>
<span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-[#22d3ee]">
Enterprise
</span>
</div>
<p className="text-sm text-muted-foreground mb-4">
<p className="text-sm text-[#848b9b] mb-4">
SAML and OIDC single sign-on is available for enterprise plans. Contact us to enable SSO for
your organization.
</p>
<a
href="mailto:support@resolutionflow.com?subject=SSO%20Setup%20Request"
className={cn(
'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
'hover:border-[rgba(255,255,255,0.12)] transition-all'
)}
>
@@ -678,7 +678,7 @@ export function AccountSettingsPage() {
<div className="rounded-xl border border-rose-500/20 p-4 sm:p-6">
<div className="flex items-center gap-2 mb-4">
<AlertTriangle className="h-5 w-5 text-rose-500" />
<h2 className="text-lg font-semibold text-foreground">Danger Zone</h2>
<h2 className="text-lg font-semibold text-[#e2e5eb]">Danger Zone</h2>
</div>
<div className="space-y-3">
@@ -686,8 +686,8 @@ export function AccountSettingsPage() {
<>
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-foreground">Transfer Ownership</p>
<p className="text-xs text-muted-foreground">Make another member the account owner</p>
<p className="text-sm font-medium text-[#e2e5eb]">Transfer Ownership</p>
<p className="text-xs text-[#848b9b]">Make another member the account owner</p>
</div>
<Button
variant="secondary"
@@ -698,10 +698,10 @@ export function AccountSettingsPage() {
Transfer
</Button>
</div>
<div className="flex items-center justify-between border-t border-border pt-3">
<div className="flex items-center justify-between border-t border-[#1e2130] pt-3">
<div>
<p className="text-sm font-medium text-foreground">Delete Account</p>
<p className="text-xs text-muted-foreground">Permanently delete your account and all data</p>
<p className="text-sm font-medium text-[#e2e5eb]">Delete Account</p>
<p className="text-xs text-[#848b9b]">Permanently delete your account and all data</p>
</div>
<Button
variant="destructive"
@@ -715,8 +715,8 @@ export function AccountSettingsPage() {
) : (
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-foreground">Leave Account</p>
<p className="text-xs text-muted-foreground">Leave this account and create a personal one</p>
<p className="text-sm font-medium text-[#e2e5eb]">Leave Account</p>
<p className="text-xs text-[#848b9b]">Leave this account and create a personal one</p>
</div>
<Button
variant="destructive"
@@ -769,16 +769,16 @@ function UsageStat({
const isAtLimit = !isUnlimited && current >= max
return (
<div className="rounded-md border border-border bg-card p-3">
<p className="text-xs font-medium text-muted-foreground">{label}</p>
<div className="rounded-md border border-[#1e2130] bg-[#14161d] p-3">
<p className="text-xs font-medium text-[#848b9b]">{label}</p>
<p
className={cn(
'mt-1 text-lg font-semibold',
isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-foreground'
isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-[#e2e5eb]'
)}
>
{current}
<span className="text-sm font-normal text-muted-foreground">
<span className="text-sm font-normal text-[#848b9b]">
{' '}/ {isUnlimited ? 'Unlimited' : max}
</span>
</p>