feat(ui): refine default frontend layouts
This commit is contained in:
CaIon
@@ -1,7 +1,14 @@
|
||||
import { Share2 } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { formatQuota } from '@/lib/format'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
@@ -24,18 +31,18 @@ export function AffiliateRewardsCard({
|
||||
const { t } = useTranslation()
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardHeader className='border-b'>
|
||||
<Skeleton className='h-6 w-32' />
|
||||
<Skeleton className='mt-2 h-4 w-48' />
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-8'>
|
||||
<CardContent className='space-y-6 pt-6'>
|
||||
{/* Statistics Skeleton */}
|
||||
<div className='grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-6'>
|
||||
<div className='grid grid-cols-1 gap-3'>
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className='space-y-2'>
|
||||
<div key={i} className='rounded-lg border p-3'>
|
||||
<Skeleton className='h-3 w-16' />
|
||||
<Skeleton className='h-8 w-24' />
|
||||
<Skeleton className='mt-2 h-8 w-24' />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -59,41 +66,50 @@ export function AffiliateRewardsCard({
|
||||
const hasRewards = (user?.aff_quota ?? 0) > 0
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className='text-xl font-semibold tracking-tight'>
|
||||
{t('Referral Program')}
|
||||
</h3>
|
||||
<p className='text-muted-foreground mt-2 text-sm'>
|
||||
{t('Share your link and earn rewards')}
|
||||
</p>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardHeader className='border-b'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
|
||||
<Share2 className='h-4 w-4' />
|
||||
</div>
|
||||
<div className='min-w-0'>
|
||||
<CardTitle className='text-xl tracking-tight'>
|
||||
{t('Referral Program')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('Share your link and earn rewards')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-8'>
|
||||
<CardContent className='space-y-6 pt-6'>
|
||||
{/* Statistics */}
|
||||
<div className='grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-6'>
|
||||
<div className='space-y-2'>
|
||||
<div className='grid grid-cols-1 gap-3 sm:grid-cols-3 xl:grid-cols-1'>
|
||||
<div className='rounded-lg border p-3'>
|
||||
<div className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Pending')}
|
||||
</div>
|
||||
<div className='text-2xl font-semibold'>
|
||||
<div className='mt-2 text-2xl font-semibold break-all'>
|
||||
{formatQuota(user?.aff_quota ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<div className='rounded-lg border p-3'>
|
||||
<div className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Total Earned')}
|
||||
</div>
|
||||
<div className='text-2xl font-semibold'>
|
||||
<div className='mt-2 text-2xl font-semibold break-all'>
|
||||
{formatQuota(user?.aff_history_quota ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<div className='rounded-lg border p-3'>
|
||||
<div className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Invites')}
|
||||
</div>
|
||||
<div className='text-2xl font-semibold'>{user?.aff_count ?? 0}</div>
|
||||
<div className='mt-2 text-2xl font-semibold'>
|
||||
{user?.aff_count ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Gift, ExternalLink, Loader2, Receipt } from 'lucide-react'
|
||||
import { Gift, ExternalLink, Loader2, Receipt, WalletCards } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { formatNumber } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
@@ -119,12 +125,12 @@ export function RechargeFormCard({
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardHeader className='border-b'>
|
||||
<Skeleton className='h-6 w-32' />
|
||||
<Skeleton className='mt-2 h-4 w-48' />
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-8'>
|
||||
<CardContent className='space-y-6 pt-6'>
|
||||
<div className='space-y-6'>
|
||||
{/* Preset Amounts Skeleton */}
|
||||
<div className='space-y-3'>
|
||||
@@ -167,31 +173,36 @@ export function RechargeFormCard({
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div>
|
||||
<h3 className='text-xl font-semibold tracking-tight'>
|
||||
{t('Add Funds')}
|
||||
</h3>
|
||||
<p className='text-muted-foreground mt-2 text-sm'>
|
||||
{t('Choose an amount and payment method')}
|
||||
</p>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardHeader className='border-b'>
|
||||
<div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
|
||||
<div className='flex min-w-0 items-center gap-3'>
|
||||
<div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
|
||||
<WalletCards className='h-4 w-4' />
|
||||
</div>
|
||||
<div className='min-w-0'>
|
||||
<CardTitle className='text-xl tracking-tight'>
|
||||
{t('Add Funds')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('Choose an amount and payment method')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
{onOpenBilling && (
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={onOpenBilling}
|
||||
className='gap-2'
|
||||
className='w-full gap-2 sm:w-auto'
|
||||
>
|
||||
<Receipt className='h-4 w-4' />
|
||||
{t('Billing')}
|
||||
{t('Order History')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-8'>
|
||||
<CardContent className='space-y-6 pt-6'>
|
||||
{/* Online Topup Section */}
|
||||
{hasAnyTopup ? (
|
||||
<div className='space-y-6'>
|
||||
@@ -202,7 +213,7 @@ export function RechargeFormCard({
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Amount')}
|
||||
</Label>
|
||||
<div className='grid grid-cols-2 gap-3 sm:grid-cols-4'>
|
||||
<div className='grid grid-cols-2 gap-3 md:grid-cols-4'>
|
||||
{presetAmounts.map((preset, index) => {
|
||||
const discount =
|
||||
preset.discount ||
|
||||
@@ -224,7 +235,7 @@ export function RechargeFormCard({
|
||||
key={index}
|
||||
variant='outline'
|
||||
className={cn(
|
||||
'hover:border-foreground h-auto rounded-lg p-4 text-left whitespace-normal',
|
||||
'hover:border-foreground flex h-auto flex-col items-start rounded-lg p-4 text-left whitespace-normal',
|
||||
selectedPreset === preset.value
|
||||
? 'border-foreground bg-foreground/5'
|
||||
: 'border-muted'
|
||||
@@ -264,7 +275,7 @@ export function RechargeFormCard({
|
||||
>
|
||||
{t('Custom Amount')}
|
||||
</Label>
|
||||
<div className='relative'>
|
||||
<div className='grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center'>
|
||||
<Input
|
||||
id='topup-amount'
|
||||
type='number'
|
||||
@@ -272,9 +283,9 @@ export function RechargeFormCard({
|
||||
onChange={(e) => handleAmountChange(e.target.value)}
|
||||
min={minTopup}
|
||||
placeholder={`Minimum ${minTopup}`}
|
||||
className='pr-32 text-lg'
|
||||
className='text-lg'
|
||||
/>
|
||||
<div className='absolute end-3 top-1/2 flex -translate-y-1/2 items-center gap-2'>
|
||||
<div className='bg-muted/30 flex min-h-10 items-center justify-between gap-3 rounded-md border px-3 lg:min-w-52'>
|
||||
<span className='text-muted-foreground text-xs'>
|
||||
{t('Amount to pay:')}
|
||||
</span>
|
||||
@@ -294,7 +305,7 @@ export function RechargeFormCard({
|
||||
{t('Payment Method')}
|
||||
</Label>
|
||||
{hasStandardPaymentMethods ? (
|
||||
<div className='flex flex-wrap gap-3'>
|
||||
<div className='grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3'>
|
||||
{topupInfo?.pay_methods?.map((method) => {
|
||||
const minTopup = method.min_topup || 0
|
||||
const disabled = minTopup > topupAmount
|
||||
@@ -305,7 +316,7 @@ export function RechargeFormCard({
|
||||
variant='outline'
|
||||
onClick={() => onPaymentMethodSelect(method)}
|
||||
disabled={disabled || !!paymentLoading}
|
||||
className='gap-2 rounded-lg'
|
||||
className='justify-start gap-2 rounded-lg'
|
||||
>
|
||||
{paymentLoading === method.type ? (
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
@@ -355,7 +366,7 @@ export function RechargeFormCard({
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Waffo Payment')}
|
||||
</Label>
|
||||
<div className='flex flex-wrap gap-3'>
|
||||
<div className='grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3'>
|
||||
{waffoPayMethods?.map((method, index) => {
|
||||
const loadingKey = `waffo-${index}`
|
||||
const waffoMin = waffoMinTopup || 0
|
||||
@@ -367,7 +378,7 @@ export function RechargeFormCard({
|
||||
variant='outline'
|
||||
onClick={() => onWaffoMethodSelect(method, index)}
|
||||
disabled={belowMin || !!paymentLoading}
|
||||
className='gap-2 rounded-lg'
|
||||
className='justify-start gap-2 rounded-lg'
|
||||
>
|
||||
{paymentLoading === loadingKey ? (
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
@@ -434,7 +445,7 @@ export function RechargeFormCard({
|
||||
)}
|
||||
|
||||
{/* Redemption Code Section */}
|
||||
<div className='space-y-3 border-t pt-8'>
|
||||
<div className='space-y-3 border-t pt-6'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Gift className='text-muted-foreground h-4 w-4' />
|
||||
<Label
|
||||
@@ -444,7 +455,7 @@ export function RechargeFormCard({
|
||||
{t('Have a Code?')}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='flex flex-col gap-2 sm:flex-row'>
|
||||
<Input
|
||||
id='redemption-code'
|
||||
value={redemptionCode}
|
||||
@@ -452,7 +463,12 @@ export function RechargeFormCard({
|
||||
placeholder={t('Enter your redemption code')}
|
||||
className='flex-1'
|
||||
/>
|
||||
<Button onClick={onRedeem} disabled={redeeming} variant='outline'>
|
||||
<Button
|
||||
onClick={onRedeem}
|
||||
disabled={redeeming}
|
||||
variant='outline'
|
||||
className='sm:w-auto'
|
||||
>
|
||||
{redeeming && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
|
||||
{t('Redeem')}
|
||||
</Button>
|
||||
|
||||
+259
-243
@@ -6,7 +6,13 @@ import { formatQuota } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useStatus } from '@/hooks/use-status'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import {
|
||||
Select,
|
||||
@@ -185,11 +191,11 @@ export function SubscriptionPlansCard(props: SubscriptionPlansCardProps) {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardHeader className='border-b'>
|
||||
<Skeleton className='h-6 w-32' />
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-4'>
|
||||
<CardContent className='space-y-4 pt-6'>
|
||||
<Skeleton className='h-20 w-full' />
|
||||
<div className='grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3'>
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
@@ -207,237 +213,242 @@ export function SubscriptionPlansCard(props: SubscriptionPlansCardProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className='flex items-center gap-2 text-base'>
|
||||
<Crown className='h-4 w-4' />
|
||||
{t('Subscription Plans')}
|
||||
</CardTitle>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardHeader className='border-b'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
|
||||
<Crown className='h-4 w-4' />
|
||||
</div>
|
||||
<div className='min-w-0'>
|
||||
<CardTitle className='text-xl tracking-tight'>
|
||||
{t('Subscription Plans')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('Purchase a plan to enjoy model benefits')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-5'>
|
||||
<CardContent className='space-y-5 pt-6'>
|
||||
{/* My subscriptions & billing preference */}
|
||||
<Card className='bg-muted/50'>
|
||||
<CardContent className='p-4'>
|
||||
<div className='flex flex-wrap items-center justify-between gap-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm font-medium'>
|
||||
{t('My Subscriptions')}
|
||||
</span>
|
||||
<span className='flex items-center gap-1.5 text-xs font-medium'>
|
||||
<span
|
||||
className={cn(
|
||||
'size-1.5 shrink-0 rounded-full',
|
||||
hasActive ? dotColorMap.success : dotColorMap.neutral
|
||||
)}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
{hasActive ? (
|
||||
<span className={cn(textColorMap.success)}>
|
||||
{activeSubscriptions.length} {t('active')}
|
||||
</span>
|
||||
) : (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('No Active')}
|
||||
</span>
|
||||
<div className='rounded-xl border p-4'>
|
||||
<div className='flex flex-wrap items-center justify-between gap-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm font-medium'>
|
||||
{t('My Subscriptions')}
|
||||
</span>
|
||||
<span className='flex items-center gap-1.5 text-xs font-medium'>
|
||||
<span
|
||||
className={cn(
|
||||
'size-1.5 shrink-0 rounded-full',
|
||||
hasActive ? dotColorMap.success : dotColorMap.neutral
|
||||
)}
|
||||
{allSubscriptions.length > activeSubscriptions.length && (
|
||||
<>
|
||||
<span className='text-muted-foreground/30'>·</span>
|
||||
<span className='text-muted-foreground'>
|
||||
{allSubscriptions.length - activeSubscriptions.length}{' '}
|
||||
{t('expired')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Select
|
||||
value={displayPref}
|
||||
onValueChange={handlePreferenceChange}
|
||||
>
|
||||
<SelectTrigger className='h-8 w-[140px] text-xs'>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
value='subscription_first'
|
||||
disabled={disablePref}
|
||||
>
|
||||
{t('Subscription First')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_first'>
|
||||
{t('Wallet First')}
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value='subscription_only'
|
||||
disabled={disablePref}
|
||||
>
|
||||
{t('Subscription Only')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_only'>
|
||||
{t('Wallet Only')}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
className='h-8 w-8'
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{disablePref && isSubPref && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t(
|
||||
'Preference saved as {{pref}}, but no active subscription. Wallet will be used automatically.',
|
||||
{
|
||||
pref:
|
||||
billingPreference === 'subscription_only'
|
||||
? t('Subscription Only')
|
||||
: t('Subscription First'),
|
||||
}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
{hasActive ? (
|
||||
<span className={cn(textColorMap.success)}>
|
||||
{activeSubscriptions.length} {t('active')}
|
||||
</span>
|
||||
) : (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('No Active')}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{allSubscriptions.length > activeSubscriptions.length && (
|
||||
<>
|
||||
<span className='text-muted-foreground/30'>·</span>
|
||||
<span className='text-muted-foreground'>
|
||||
{allSubscriptions.length - activeSubscriptions.length}{' '}
|
||||
{t('expired')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Select
|
||||
value={displayPref}
|
||||
onValueChange={handlePreferenceChange}
|
||||
>
|
||||
<SelectTrigger className='h-8 w-[140px] text-xs'>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
value='subscription_first'
|
||||
disabled={disablePref}
|
||||
>
|
||||
{t('Subscription First')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_first'>
|
||||
{t('Wallet First')}
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value='subscription_only'
|
||||
disabled={disablePref}
|
||||
>
|
||||
{t('Subscription Only')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_only'>
|
||||
{t('Wallet Only')}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
className='h-8 w-8'
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasAny && (
|
||||
<>
|
||||
<Separator className='my-3' />
|
||||
<div className='max-h-64 space-y-3 overflow-y-auto pr-1'>
|
||||
{allSubscriptions.map((sub) => {
|
||||
const subscription = sub.subscription
|
||||
const totalAmount = Number(
|
||||
subscription?.amount_total || 0
|
||||
)
|
||||
const usedAmount = Number(subscription?.amount_used || 0)
|
||||
const remainAmount =
|
||||
totalAmount > 0
|
||||
? Math.max(0, totalAmount - usedAmount)
|
||||
: 0
|
||||
const planTitle =
|
||||
planTitleMap.get(subscription?.plan_id) || ''
|
||||
const remainDays = getRemainingDays(sub)
|
||||
const usagePercent = getUsagePercent(sub)
|
||||
const now = Date.now() / 1000
|
||||
const isExpired = (subscription?.end_time || 0) < now
|
||||
const isCancelled = subscription?.status === 'cancelled'
|
||||
const isActive =
|
||||
subscription?.status === 'active' && !isExpired
|
||||
{disablePref && isSubPref && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t(
|
||||
'Preference saved as {{pref}}, but no active subscription. Wallet will be used automatically.',
|
||||
{
|
||||
pref:
|
||||
billingPreference === 'subscription_only'
|
||||
? t('Subscription Only')
|
||||
: t('Subscription First'),
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={subscription?.id}
|
||||
className='bg-background rounded-md border p-3 text-xs'
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='font-medium'>
|
||||
{planTitle
|
||||
? `${planTitle} · ${t('Subscription')} #${subscription?.id}`
|
||||
: `${t('Subscription')} #${subscription?.id}`}
|
||||
</span>
|
||||
{isActive ? (
|
||||
<StatusBadge
|
||||
label={t('Active')}
|
||||
variant='success'
|
||||
copyable={false}
|
||||
/>
|
||||
) : isCancelled ? (
|
||||
<StatusBadge
|
||||
label={t('Cancelled')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
) : (
|
||||
<StatusBadge
|
||||
label={t('Expired')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isActive && (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('{{count}} days remaining', {
|
||||
count: remainDays,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className='text-muted-foreground mt-1.5'>
|
||||
{isActive
|
||||
? t('Until')
|
||||
: isCancelled
|
||||
? t('Cancelled at')
|
||||
: t('Expired at')}{' '}
|
||||
{new Date(
|
||||
(subscription?.end_time || 0) * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
{isActive &&
|
||||
(subscription?.next_reset_time ?? 0) > 0 && (
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Next reset')}:{' '}
|
||||
{new Date(
|
||||
subscription!.next_reset_time! * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Total Quota')}:{' '}
|
||||
{totalAmount > 0 ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className='cursor-help'>
|
||||
{formatQuota(usedAmount)}/
|
||||
{formatQuota(totalAmount)} ·{' '}
|
||||
{t('Remaining')} {formatQuota(remainAmount)}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Raw Quota')}: {usedAmount}/{totalAmount} ·{' '}
|
||||
{t('Remaining')} {remainAmount}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{hasAny && (
|
||||
<>
|
||||
<Separator className='my-3' />
|
||||
<div className='max-h-64 space-y-3 overflow-y-auto pr-1'>
|
||||
{allSubscriptions.map((sub) => {
|
||||
const subscription = sub.subscription
|
||||
const totalAmount = Number(subscription?.amount_total || 0)
|
||||
const usedAmount = Number(subscription?.amount_used || 0)
|
||||
const remainAmount =
|
||||
totalAmount > 0
|
||||
? Math.max(0, totalAmount - usedAmount)
|
||||
: 0
|
||||
const planTitle =
|
||||
planTitleMap.get(subscription?.plan_id) || ''
|
||||
const remainDays = getRemainingDays(sub)
|
||||
const usagePercent = getUsagePercent(sub)
|
||||
const now = Date.now() / 1000
|
||||
const isExpired = (subscription?.end_time || 0) < now
|
||||
const isCancelled = subscription?.status === 'cancelled'
|
||||
const isActive =
|
||||
subscription?.status === 'active' && !isExpired
|
||||
|
||||
return (
|
||||
<div
|
||||
key={subscription?.id}
|
||||
className='bg-background rounded-md border p-3 text-xs'
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='font-medium'>
|
||||
{planTitle
|
||||
? `${planTitle} · ${t('Subscription')} #${subscription?.id}`
|
||||
: `${t('Subscription')} #${subscription?.id}`}
|
||||
</span>
|
||||
{isActive ? (
|
||||
<StatusBadge
|
||||
label={t('Active')}
|
||||
variant='success'
|
||||
copyable={false}
|
||||
/>
|
||||
) : isCancelled ? (
|
||||
<StatusBadge
|
||||
label={t('Cancelled')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
) : (
|
||||
t('Unlimited')
|
||||
)}
|
||||
{totalAmount > 0 && (
|
||||
<span className='ml-2'>
|
||||
{t('Used')} {usagePercent}%
|
||||
</span>
|
||||
<StatusBadge
|
||||
label={t('Expired')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{totalAmount > 0 && isActive && (
|
||||
<Progress
|
||||
value={usagePercent}
|
||||
className='mt-2 h-1.5'
|
||||
/>
|
||||
{isActive && (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('{{count}} days remaining', {
|
||||
count: remainDays,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className='text-muted-foreground mt-1.5'>
|
||||
{isActive
|
||||
? t('Until')
|
||||
: isCancelled
|
||||
? t('Cancelled at')
|
||||
: t('Expired at')}{' '}
|
||||
{new Date(
|
||||
(subscription?.end_time || 0) * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
{isActive &&
|
||||
(subscription?.next_reset_time ?? 0) > 0 && (
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Next reset')}:{' '}
|
||||
{new Date(
|
||||
subscription!.next_reset_time! * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Total Quota')}:{' '}
|
||||
{totalAmount > 0 ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className='cursor-help'>
|
||||
{formatQuota(usedAmount)}/
|
||||
{formatQuota(totalAmount)} · {t('Remaining')}{' '}
|
||||
{formatQuota(remainAmount)}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Raw Quota')}: {usedAmount}/{totalAmount} ·{' '}
|
||||
{t('Remaining')} {remainAmount}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
t('Unlimited')
|
||||
)}
|
||||
{totalAmount > 0 && (
|
||||
<span className='ml-2'>
|
||||
{t('Used')} {usagePercent}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{totalAmount > 0 && isActive && (
|
||||
<Progress
|
||||
value={usagePercent}
|
||||
className='mt-2 h-1.5'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!hasAny && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t('Purchase a plan to enjoy model benefits')}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{!hasAny && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t('Purchase a plan to enjoy model benefits')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Available plans grid */}
|
||||
{plans.length > 0 ? (
|
||||
@@ -469,27 +480,32 @@ export function SubscriptionPlansCard(props: SubscriptionPlansCardProps) {
|
||||
return (
|
||||
<Card
|
||||
key={plan.id}
|
||||
className={`relative transition-shadow hover:shadow-md ${
|
||||
isPopular ? 'ring-primary ring-2' : ''
|
||||
}`}
|
||||
>
|
||||
{isPopular && (
|
||||
<div className='absolute -top-2.5 left-3'>
|
||||
<StatusBadge variant='info' copyable={false}>
|
||||
<Sparkles className='h-3 w-3' />
|
||||
{t('Recommended')}
|
||||
</StatusBadge>
|
||||
</div>
|
||||
className={cn(
|
||||
'transition-shadow hover:shadow-md',
|
||||
isPopular && 'border-primary/70 shadow-sm'
|
||||
)}
|
||||
<CardContent className='flex h-full flex-col p-4 pt-5'>
|
||||
<div className='mb-2'>
|
||||
<h4 className='truncate font-semibold'>
|
||||
{plan.title || t('Subscription Plans')}
|
||||
</h4>
|
||||
{plan.subtitle && (
|
||||
<p className='text-muted-foreground truncate text-xs'>
|
||||
{plan.subtitle}
|
||||
</p>
|
||||
>
|
||||
<CardContent className='flex h-full flex-col p-4'>
|
||||
<div className='mb-2 flex items-start justify-between gap-3'>
|
||||
<div className='min-w-0'>
|
||||
<h4 className='truncate font-semibold'>
|
||||
{plan.title || t('Subscription Plans')}
|
||||
</h4>
|
||||
{plan.subtitle && (
|
||||
<p className='text-muted-foreground truncate text-xs'>
|
||||
{plan.subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isPopular && (
|
||||
<StatusBadge
|
||||
variant='info'
|
||||
copyable={false}
|
||||
className='shrink-0'
|
||||
>
|
||||
<Sparkles className='h-3 w-3' />
|
||||
{t('Recommended')}
|
||||
</StatusBadge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { Activity, BarChart3, WalletCards } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { formatQuota } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import type { UserWalletData } from '../types'
|
||||
@@ -13,13 +15,21 @@ export function WalletStatsCard(props: WalletStatsCardProps) {
|
||||
const { t } = useTranslation()
|
||||
if (props.loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className='grid grid-cols-1 gap-6 sm:grid-cols-3 sm:gap-8'>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardContent className='p-0'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-3'>
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className='space-y-2'>
|
||||
<Skeleton className='h-5 w-28' />
|
||||
<Skeleton className='h-11 w-32' />
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'flex items-center justify-center px-4 py-3 sm:px-5 sm:py-4',
|
||||
i > 0 && 'border-t sm:border-t-0 sm:border-l'
|
||||
)}
|
||||
>
|
||||
<div className='w-full max-w-44'>
|
||||
<Skeleton className='h-4 w-24' />
|
||||
<Skeleton className='mt-2 h-7 w-32' />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -28,39 +38,47 @@ export function WalletStatsCard(props: WalletStatsCardProps) {
|
||||
)
|
||||
}
|
||||
|
||||
const stats = [
|
||||
{
|
||||
label: t('Current Balance'),
|
||||
value: formatQuota(props.user?.quota ?? 0),
|
||||
icon: WalletCards,
|
||||
},
|
||||
{
|
||||
label: t('Total Usage'),
|
||||
value: formatQuota(props.user?.used_quota ?? 0),
|
||||
icon: BarChart3,
|
||||
},
|
||||
{
|
||||
label: t('API Requests'),
|
||||
value: (props.user?.request_count ?? 0).toLocaleString(),
|
||||
icon: Activity,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className='grid grid-cols-1 gap-6 sm:grid-cols-3 sm:gap-8'>
|
||||
{/* Current Balance */}
|
||||
<div className='min-w-0 space-y-2'>
|
||||
<div className='text-muted-foreground text-sm font-medium'>
|
||||
{t('Current Balance')}
|
||||
<Card className='overflow-hidden'>
|
||||
<CardContent className='p-0'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-3'>
|
||||
{stats.map((item, index) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className={cn(
|
||||
'flex min-w-0 justify-center px-4 py-3 sm:px-5 sm:py-4',
|
||||
index > 0 && 'border-t sm:border-t-0 sm:border-l'
|
||||
)}
|
||||
>
|
||||
<div className='min-w-0 text-center'>
|
||||
<div className='text-muted-foreground flex items-center justify-center gap-1.5 text-xs font-medium'>
|
||||
<item.icon className='h-3.5 w-3.5' />
|
||||
{item.label}
|
||||
</div>
|
||||
<div className='mt-1 text-xl leading-tight font-semibold tracking-tight break-all lg:text-2xl'>
|
||||
{item.value}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-3xl leading-tight font-semibold tracking-tight break-all lg:text-4xl'>
|
||||
{formatQuota(props.user?.quota ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Total Usage */}
|
||||
<div className='min-w-0 space-y-2'>
|
||||
<div className='text-muted-foreground text-sm font-medium'>
|
||||
{t('Total Usage')}
|
||||
</div>
|
||||
<div className='text-3xl leading-tight font-semibold tracking-tight break-all lg:text-4xl'>
|
||||
{formatQuota(props.user?.used_quota ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Request Count */}
|
||||
<div className='min-w-0 space-y-2'>
|
||||
<div className='text-muted-foreground text-sm font-medium'>
|
||||
{t('API Requests')}
|
||||
</div>
|
||||
<div className='text-3xl leading-tight font-semibold tracking-tight break-all lg:text-4xl'>
|
||||
{(props.user?.request_count ?? 0).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
+47
-45
@@ -239,54 +239,56 @@ export function Wallet(props: WalletProps) {
|
||||
{t('Manage your balance and payment methods')}
|
||||
</SectionPageLayout.Description>
|
||||
<SectionPageLayout.Content>
|
||||
<div className='grid gap-6 lg:grid-cols-3'>
|
||||
{/* Left Column - Stats & Recharge */}
|
||||
<div className='space-y-6 lg:col-span-2'>
|
||||
<WalletStatsCard user={user} loading={userLoading} />
|
||||
<RechargeFormCard
|
||||
topupInfo={topupInfo}
|
||||
presetAmounts={presetAmounts}
|
||||
selectedPreset={selectedPreset}
|
||||
onSelectPreset={handleSelectPreset}
|
||||
topupAmount={topupAmount}
|
||||
onTopupAmountChange={handleTopupAmountChange}
|
||||
paymentAmount={paymentAmount}
|
||||
calculating={calculating}
|
||||
onPaymentMethodSelect={handlePaymentMethodSelect}
|
||||
paymentLoading={paymentLoading}
|
||||
redemptionCode={redemptionCode}
|
||||
onRedemptionCodeChange={setRedemptionCode}
|
||||
onRedeem={handleRedeem}
|
||||
redeeming={redeeming}
|
||||
topupLink={topupInfo?.topup_link}
|
||||
loading={topupLoading}
|
||||
priceRatio={(status?.price as number) || 1}
|
||||
usdExchangeRate={effectiveUsdExchangeRate}
|
||||
onOpenBilling={() => setBillingDialogOpen(true)}
|
||||
creemProducts={topupInfo?.creem_products}
|
||||
enableCreemTopup={topupInfo?.enable_creem_topup}
|
||||
onCreemProductSelect={handleCreemProductSelect}
|
||||
enableWaffoTopup={topupInfo?.enable_waffo_topup}
|
||||
waffoPayMethods={topupInfo?.waffo_pay_methods}
|
||||
waffoMinTopup={topupInfo?.waffo_min_topup}
|
||||
onWaffoMethodSelect={handleWaffoMethodSelect}
|
||||
enableWaffoPancakeTopup={topupInfo?.enable_waffo_pancake_topup}
|
||||
/>
|
||||
</div>
|
||||
<div className='mx-auto flex w-full max-w-7xl flex-col gap-4'>
|
||||
<WalletStatsCard user={user} loading={userLoading} />
|
||||
|
||||
{/* Right Column - Affiliate & Subscriptions */}
|
||||
<div className='space-y-6 lg:col-span-1'>
|
||||
<AffiliateRewardsCard
|
||||
user={user}
|
||||
affiliateLink={affiliateLink}
|
||||
onTransfer={() => setTransferDialogOpen(true)}
|
||||
loading={affiliateLoading}
|
||||
/>
|
||||
<SubscriptionPlansCard topupInfo={topupInfo} />
|
||||
|
||||
<div className='grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(340px,0.4fr)] xl:items-start'>
|
||||
<div className='min-w-0'>
|
||||
<RechargeFormCard
|
||||
topupInfo={topupInfo}
|
||||
presetAmounts={presetAmounts}
|
||||
selectedPreset={selectedPreset}
|
||||
onSelectPreset={handleSelectPreset}
|
||||
topupAmount={topupAmount}
|
||||
onTopupAmountChange={handleTopupAmountChange}
|
||||
paymentAmount={paymentAmount}
|
||||
calculating={calculating}
|
||||
onPaymentMethodSelect={handlePaymentMethodSelect}
|
||||
paymentLoading={paymentLoading}
|
||||
redemptionCode={redemptionCode}
|
||||
onRedemptionCodeChange={setRedemptionCode}
|
||||
onRedeem={handleRedeem}
|
||||
redeeming={redeeming}
|
||||
topupLink={topupInfo?.topup_link}
|
||||
loading={topupLoading}
|
||||
priceRatio={(status?.price as number) || 1}
|
||||
usdExchangeRate={effectiveUsdExchangeRate}
|
||||
onOpenBilling={() => setBillingDialogOpen(true)}
|
||||
creemProducts={topupInfo?.creem_products}
|
||||
enableCreemTopup={topupInfo?.enable_creem_topup}
|
||||
onCreemProductSelect={handleCreemProductSelect}
|
||||
enableWaffoTopup={topupInfo?.enable_waffo_topup}
|
||||
waffoPayMethods={topupInfo?.waffo_pay_methods}
|
||||
waffoMinTopup={topupInfo?.waffo_min_topup}
|
||||
onWaffoMethodSelect={handleWaffoMethodSelect}
|
||||
enableWaffoPancakeTopup={
|
||||
topupInfo?.enable_waffo_pancake_topup
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='xl:sticky xl:top-6'>
|
||||
<AffiliateRewardsCard
|
||||
user={user}
|
||||
affiliateLink={affiliateLink}
|
||||
onTransfer={() => setTransferDialogOpen(true)}
|
||||
loading={affiliateLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subscription Plans */}
|
||||
<SubscriptionPlansCard topupInfo={topupInfo} />
|
||||
</SectionPageLayout.Content>
|
||||
</SectionPageLayout>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user