feature: dashboard settings and invite activation flow consistency fixed. frontend warnings fixed

This commit is contained in:
2026-04-30 14:05:44 +03:30
parent 1b8856f64e
commit 1387e4cb5e
38 changed files with 375 additions and 362 deletions

View File

@@ -5,7 +5,7 @@ import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { authApi } from '@/lib/api/auth';
import type { SubscriptionAlertData } from '@/types';
import type { SubscriptionAlertData } from '@/types/subscription';
export default function SubscriptionsSettingsPage() {
const { currentOrganization } = useAuth();
@@ -39,9 +39,24 @@ export default function SubscriptionsSettingsPage() {
const plan = currentOrganization.plan;
const maxUsers = plan?.maxUsers;
const isUnlimited = typeof maxUsers === 'number' && maxUsers >= 999999;
const seatsUsed = alert?.seatsUsed;
const seatsRemaining =
typeof seatsUsed === 'number' && typeof maxUsers === 'number' && !isUnlimited
? Math.max(0, maxUsers - seatsUsed)
: null;
const daysUntilPlanEnd = alert?.daysUntilPlanEnd ?? null;
const planDayTone =
daysUntilPlanEnd == null
? 'text-text-primary'
: daysUntilPlanEnd > 20
? 'text-emerald-400'
: daysUntilPlanEnd >= 10
? 'text-amber-300'
: 'text-red-400';
return (
<div className="max-w-xl space-y-6">
<div className="max-w-4xl space-y-6">
<div>
<Link
href="/today"
@@ -59,21 +74,38 @@ export default function SubscriptionsSettingsPage() {
</div>
<div className="surface-card p-6 space-y-4">
<div className="flex flex-wrap gap-4 justify-between">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Current plan</p>
<p className="text-lg font-medium text-text-primary capitalize">
{plan?.name ?? '—'}
</p>
</div>
{typeof maxUsers === 'number' && maxUsers < 999999 && (
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats (this org)</p>
<p className="text-lg font-medium text-text-primary">
{alert?.seatsUsed ?? '—'} / {maxUsers}
</p>
</div>
)}
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Plan price</p>
<p className="text-lg font-medium text-text-primary">
{typeof plan?.price === 'number' ? `$${plan.price}` : '—'}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats used</p>
<p className="text-lg font-medium text-text-primary">
{typeof seatsUsed === 'number' ? seatsUsed : '—'}
{typeof maxUsers === 'number' ? ` / ${isUnlimited ? 'Unlimited' : maxUsers}` : ''}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats remaining</p>
<p className="text-lg font-medium text-text-primary">
{isUnlimited ? 'Unlimited' : seatsRemaining ?? '—'}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Days remaining</p>
<p className={`text-lg font-medium ${planDayTone}`}>
{daysUntilPlanEnd ?? '—'}
</p>
</div>
</div>
{alert?.showWarning && (