udpates
This commit is contained in:
IGNY8 VPS (Salman)
@@ -19,7 +19,11 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
|
||||
site_page_generation: { cost: 20, description: 'Per page generated' },
|
||||
};
|
||||
|
||||
export default function BillingUsagePanel() {
|
||||
interface BillingUsagePanelProps {
|
||||
showOnlyActivity?: boolean;
|
||||
}
|
||||
|
||||
export default function BillingUsagePanel({ showOnlyActivity = false }: BillingUsagePanelProps) {
|
||||
const toast = useToast();
|
||||
const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -56,6 +60,72 @@ export default function BillingUsagePanel() {
|
||||
);
|
||||
}
|
||||
|
||||
// If only showing activity table, render just that
|
||||
if (showOnlyActivity) {
|
||||
return (
|
||||
<div>
|
||||
<Card className="p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Activity</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Complete history of credit transactions
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200 dark:border-gray-700">
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Reference</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginated.map((txn) => (
|
||||
<tr key={txn.id} className="border-b border-gray-100 dark:border-gray-800">
|
||||
<td className="py-3 px-4 text-sm text-gray-900 dark:text-white">{new Date(txn.created_at).toLocaleString()}</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant="soft" tone={txn.amount >= 0 ? 'success' : 'danger'}>{txn.transaction_type}</Badge>
|
||||
</td>
|
||||
<td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
|
||||
{txn.amount >= 0 ? '+' : ''}{txn.amount}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{txn.description}</td>
|
||||
<td className="py-3 px-4 text-sm text-gray-500 dark:text-gray-500">{txn.reference_id || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
{transactions.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="py-8 text-center text-gray-500 dark:text-gray-400">No transactions yet</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{transactions.length > 0 && (
|
||||
<div className="mt-4 flex justify-between items-center">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Showing {(page - 1) * pageSize + 1}-{Math.min(page * pageSize, transactions.length)} of {transactions.length}
|
||||
</div>
|
||||
<CompactPagination
|
||||
currentPage={page}
|
||||
totalPages={totalPages}
|
||||
pageSize={pageSize}
|
||||
onPageChange={(p) => setPage(p)}
|
||||
onPageSizeChange={(size) => {
|
||||
setPageSize(size);
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{balance && (
|
||||
|
||||
195
frontend/src/components/billing/CreditCostBreakdownPanel.tsx
Normal file
195
frontend/src/components/billing/CreditCostBreakdownPanel.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
/**
|
||||
* Credit Cost Breakdown Panel
|
||||
* Displays cost per operation and total costs
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card } from '../ui/card';
|
||||
import { DollarSign, TrendingUp, AlertCircle } from 'lucide-react';
|
||||
import Badge from '../ui/badge/Badge';
|
||||
import { getUsageAnalytics, type UsageAnalytics } from '../../services/billing.api';
|
||||
import { useToast } from '../ui/toast/ToastContainer';
|
||||
|
||||
export default function CreditCostBreakdownPanel() {
|
||||
const toast = useToast();
|
||||
const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string>('');
|
||||
const [period] = useState(30); // Last 30 days
|
||||
|
||||
useEffect(() => {
|
||||
loadAnalytics();
|
||||
}, []);
|
||||
|
||||
const loadAnalytics = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const data = await getUsageAnalytics(period);
|
||||
setAnalytics(data);
|
||||
} catch (err: any) {
|
||||
const message = err?.message || 'Failed to load cost analytics';
|
||||
setError(message);
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-32 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4"></div>
|
||||
<div className="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !analytics) {
|
||||
return (
|
||||
<Card className="p-6 text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
Failed to Load Cost Data
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">{error || 'Unknown error'}</p>
|
||||
<button
|
||||
onClick={loadAnalytics}
|
||||
className="px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)]"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Color palette for different operation types
|
||||
const operationColors = [
|
||||
{ bg: 'bg-[var(--color-brand-50)]', text: 'text-[var(--color-brand-500)]', border: 'border-[var(--color-brand-200)]' },
|
||||
{ bg: 'bg-[var(--color-success-50)]', text: 'text-[var(--color-success-500)]', border: 'border-[var(--color-success-200)]' },
|
||||
{ bg: 'bg-[var(--color-info-50)]', text: 'text-[var(--color-info-500)]', border: 'border-[var(--color-info-200)]' },
|
||||
{ bg: 'bg-[var(--color-purple-50)]', text: 'text-[var(--color-purple-500)]', border: 'border-[var(--color-purple-200)]' },
|
||||
{ bg: 'bg-[var(--color-warning-50)]', text: 'text-[var(--color-warning-500)]', border: 'border-[var(--color-warning-200)]' },
|
||||
{ bg: 'bg-[var(--color-teal-50)]', text: 'text-[var(--color-teal-500)]', border: 'border-[var(--color-teal-200)]' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card className="p-6 border-l-4 border-[var(--color-brand-500)]">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 rounded-lg">
|
||||
<DollarSign className="w-5 h-5 text-[var(--color-brand-500)]" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Total Cost</div>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
${((analytics.total_usage || 0) * 0.01).toFixed(2)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">Last {period} days</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 border-l-4 border-[var(--color-success-500)]">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-[var(--color-success-50)] dark:bg-[var(--color-success-900)]/20 rounded-lg">
|
||||
<TrendingUp className="w-5 h-5 text-[var(--color-success-500)]" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Avg Cost/Day</div>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
${(((analytics.total_usage || 0) * 0.01) / period).toFixed(2)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">Daily average</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 border-l-4 border-[var(--color-info-500)]">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-[var(--color-info-50)] dark:bg-[var(--color-info-900)]/20 rounded-lg">
|
||||
<DollarSign className="w-5 h-5 text-[var(--color-info-500)]" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Cost per Credit</div>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
$0.01
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">Standard rate</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Cost by Operation */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Cost by Operation Type
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Breakdown of credit costs per operation
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="soft" tone="brand">
|
||||
Last {period} days
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{analytics.usage_by_type.map((item: { transaction_type: string; total: number; count: number }, idx: number) => {
|
||||
const colorScheme = operationColors[idx % operationColors.length];
|
||||
const costUSD = (item.total * 0.01).toFixed(2);
|
||||
const avgPerOperation = item.count > 0 ? (item.total / item.count).toFixed(0) : '0';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex items-center justify-between p-4 rounded-lg border-l-4 ${colorScheme.border} ${colorScheme.bg} dark:bg-opacity-10 transition-all hover:shadow-md`}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h4 className={`font-semibold ${colorScheme.text}`}>
|
||||
{item.transaction_type}
|
||||
</h4>
|
||||
<Badge variant="soft" tone="neutral" size="xs">
|
||||
{item.count} ops
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-400">Credits: </span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{item.total.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-400">Avg/op: </span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{avgPerOperation} credits
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right ml-4">
|
||||
<div className={`text-2xl font-bold ${colorScheme.text}`}>
|
||||
${costUSD}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">USD</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{(!analytics.usage_by_type || analytics.usage_by_type.length === 0) && (
|
||||
<div className="text-center py-12">
|
||||
<DollarSign className="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
No cost data available for this period
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
frontend/src/components/billing/CreditCostsPanel.tsx
Normal file
92
frontend/src/components/billing/CreditCostsPanel.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Credit Costs Reference Panel
|
||||
* Shows credit cost for each operation type
|
||||
*/
|
||||
|
||||
import { Card } from '../ui/card';
|
||||
import Badge from '../ui/badge/Badge';
|
||||
|
||||
// Credit costs per operation
|
||||
const CREDIT_COSTS: Record<string, { cost: number | string; description: string; color: string }> = {
|
||||
clustering: {
|
||||
cost: 10,
|
||||
description: 'Per clustering request',
|
||||
color: 'brand'
|
||||
},
|
||||
idea_generation: {
|
||||
cost: 15,
|
||||
description: 'Per cluster → ideas request',
|
||||
color: 'brand'
|
||||
},
|
||||
content_generation: {
|
||||
cost: '1 per 100 words',
|
||||
description: 'Per 100 words generated',
|
||||
color: 'brand'
|
||||
},
|
||||
image_prompt_extraction: {
|
||||
cost: 2,
|
||||
description: 'Per content piece',
|
||||
color: 'brand'
|
||||
},
|
||||
image_generation: {
|
||||
cost: 5,
|
||||
description: 'Per image generated',
|
||||
color: 'brand'
|
||||
},
|
||||
linking: {
|
||||
cost: 8,
|
||||
description: 'Per content piece',
|
||||
color: 'brand'
|
||||
},
|
||||
optimization: {
|
||||
cost: '1 per 200 words',
|
||||
description: 'Per 200 words optimized',
|
||||
color: 'brand'
|
||||
},
|
||||
site_structure_generation: {
|
||||
cost: 50,
|
||||
description: 'Per site blueprint',
|
||||
color: 'brand'
|
||||
},
|
||||
site_page_generation: {
|
||||
cost: 20,
|
||||
description: 'Per page generated',
|
||||
color: 'brand'
|
||||
},
|
||||
};
|
||||
|
||||
export default function CreditCostsPanel() {
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Costs per Operation</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Understanding how credits are consumed for each operation type
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Object.entries(CREDIT_COSTS).map(([operation, info]) => (
|
||||
<div
|
||||
key={operation}
|
||||
className="flex items-start justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-[var(--color-brand-300)] dark:hover:border-[var(--color-brand-600)] transition-colors"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-gray-900 dark:text-white capitalize mb-1">
|
||||
{operation.replace(/_/g, ' ')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{info.description}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4 text-right flex-shrink-0">
|
||||
<Badge variant="soft" tone="brand" className="font-semibold">
|
||||
{typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -16,29 +16,32 @@ interface LimitCardProps {
|
||||
usage: LimitUsage;
|
||||
type: 'hard' | 'monthly';
|
||||
daysUntilReset?: number;
|
||||
accentColor?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan';
|
||||
}
|
||||
|
||||
function LimitCard({ title, icon, usage, type, daysUntilReset }: LimitCardProps) {
|
||||
function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'brand' }: LimitCardProps) {
|
||||
const percentage = usage.percentage_used;
|
||||
const isWarning = percentage >= 80;
|
||||
const isDanger = percentage >= 95;
|
||||
|
||||
let barColor = 'bg-blue-500';
|
||||
let badgeVariant: 'default' | 'warning' | 'danger' = 'default';
|
||||
// Determine progress bar color
|
||||
let barColor = `bg-[var(--color-${accentColor}-500)]`;
|
||||
let badgeVariant: 'soft' = 'soft';
|
||||
let badgeTone: 'brand' | 'warning' | 'danger' | 'success' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' = accentColor;
|
||||
|
||||
if (isDanger) {
|
||||
barColor = 'bg-red-500';
|
||||
badgeVariant = 'danger';
|
||||
barColor = 'bg-[var(--color-danger)]';
|
||||
badgeTone = 'danger';
|
||||
} else if (isWarning) {
|
||||
barColor = 'bg-yellow-500';
|
||||
badgeVariant = 'warning';
|
||||
barColor = 'bg-[var(--color-warning)]';
|
||||
badgeTone = 'warning';
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-4 hover:shadow-md transition-shadow">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-blue-600 dark:text-blue-400">
|
||||
<div className={`p-2 bg-[var(--color-${accentColor}-50)] dark:bg-[var(--color-${accentColor}-900)]/20 rounded-lg text-[var(--color-${accentColor}-500)]`}>
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
@@ -50,7 +53,7 @@ function LimitCard({ title, icon, usage, type, daysUntilReset }: LimitCardProps)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={badgeVariant}>{percentage}%</Badge>
|
||||
<Badge variant={badgeVariant} tone={badgeTone}>{percentage}%</Badge>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
@@ -137,7 +140,7 @@ export default function UsageLimitsPanel() {
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">{error || 'Unknown error'}</p>
|
||||
<button
|
||||
onClick={loadUsageSummary}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||
className="px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)]"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
@@ -145,19 +148,19 @@ export default function UsageLimitsPanel() {
|
||||
);
|
||||
}
|
||||
|
||||
const hardLimitIcons = {
|
||||
sites: <Globe className="w-5 h-5" />,
|
||||
users: <Users className="w-5 h-5" />,
|
||||
keywords: <Tag className="w-5 h-5" />,
|
||||
clusters: <TrendingUp className="w-5 h-5" />,
|
||||
const hardLimitConfig = {
|
||||
sites: { icon: <Globe className="w-5 h-5" />, color: 'success' as const },
|
||||
users: { icon: <Users className="w-5 h-5" />, color: 'info' as const },
|
||||
keywords: { icon: <Tag className="w-5 h-5" />, color: 'purple' as const },
|
||||
clusters: { icon: <TrendingUp className="w-5 h-5" />, color: 'warning' as const },
|
||||
};
|
||||
|
||||
const monthlyLimitIcons = {
|
||||
content_ideas: <FileText className="w-5 h-5" />,
|
||||
content_words: <FileText className="w-5 h-5" />,
|
||||
images_basic: <Image className="w-5 h-5" />,
|
||||
images_premium: <Zap className="w-5 h-5" />,
|
||||
image_prompts: <Image className="w-5 h-5" />,
|
||||
const monthlyLimitConfig = {
|
||||
content_ideas: { icon: <FileText className="w-5 h-5" />, color: 'brand' as const },
|
||||
content_words: { icon: <FileText className="w-5 h-5" />, color: 'indigo' as const },
|
||||
images_basic: { icon: <Image className="w-5 h-5" />, color: 'teal' as const },
|
||||
images_premium: { icon: <Zap className="w-5 h-5" />, color: 'cyan' as const },
|
||||
image_prompts: { icon: <Image className="w-5 h-5" />, color: 'pink' as const },
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -171,7 +174,7 @@ export default function UsageLimitsPanel() {
|
||||
</p>
|
||||
</div>
|
||||
{summary.days_until_reset !== undefined && (
|
||||
<Badge variant="default">
|
||||
<Badge variant="soft" tone="brand">
|
||||
Resets in {summary.days_until_reset} days
|
||||
</Badge>
|
||||
)}
|
||||
@@ -183,15 +186,19 @@ export default function UsageLimitsPanel() {
|
||||
Account Limits
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{Object.entries(summary.hard_limits).map(([key, usage]) => (
|
||||
<LimitCard
|
||||
key={key}
|
||||
title={usage.display_name}
|
||||
icon={hardLimitIcons[key as keyof typeof hardLimitIcons]}
|
||||
usage={usage}
|
||||
type="hard"
|
||||
/>
|
||||
))}
|
||||
{Object.entries(summary.hard_limits).map(([key, usage]) => {
|
||||
const config = hardLimitConfig[key as keyof typeof hardLimitConfig];
|
||||
return (
|
||||
<LimitCard
|
||||
key={key}
|
||||
title={usage.display_name}
|
||||
icon={config.icon}
|
||||
usage={usage}
|
||||
type="hard"
|
||||
accentColor={config.color}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,25 +208,29 @@ export default function UsageLimitsPanel() {
|
||||
Monthly Usage Limits
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Object.entries(summary.monthly_limits).map(([key, usage]) => (
|
||||
<LimitCard
|
||||
key={key}
|
||||
title={usage.display_name}
|
||||
icon={monthlyLimitIcons[key as keyof typeof monthlyLimitIcons]}
|
||||
usage={usage}
|
||||
type="monthly"
|
||||
daysUntilReset={summary.days_until_reset}
|
||||
/>
|
||||
))}
|
||||
{Object.entries(summary.monthly_limits).map(([key, usage]) => {
|
||||
const config = monthlyLimitConfig[key as keyof typeof monthlyLimitConfig];
|
||||
return (
|
||||
<LimitCard
|
||||
key={key}
|
||||
title={usage.display_name}
|
||||
icon={config.icon}
|
||||
usage={usage}
|
||||
type="monthly"
|
||||
daysUntilReset={summary.days_until_reset}
|
||||
accentColor={config.color}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upgrade CTA if approaching limits */}
|
||||
{(Object.values(summary.hard_limits).some(u => u.percentage_used >= 80) ||
|
||||
Object.values(summary.monthly_limits).some(u => u.percentage_used >= 80)) && (
|
||||
<Card className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-700">
|
||||
<Card className="p-6 bg-gradient-to-r from-[var(--color-brand-50)] to-[var(--color-brand-100)] dark:from-[var(--color-brand-900)]/20 dark:to-[var(--color-brand-900)]/10 border-[var(--color-brand-200)] dark:border-[var(--color-brand-700)]">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-blue-600 rounded-lg text-white">
|
||||
<div className="p-3 bg-[var(--color-brand-500)] rounded-lg text-white">
|
||||
<TrendingUp className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
@@ -231,10 +242,10 @@ export default function UsageLimitsPanel() {
|
||||
and avoid interruptions.
|
||||
</p>
|
||||
<a
|
||||
href="/account/plans-and-billing"
|
||||
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
href="/account/plans-and-billing?tab=purchase"
|
||||
className="inline-flex items-center px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)] transition-colors"
|
||||
>
|
||||
View Plans & Upgrade
|
||||
Purchase Credits
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
layer(base);
|
||||
|
||||
@import "./styles/tokens.css";
|
||||
@import "./styles/account-colors.css";
|
||||
@import "tailwindcss";
|
||||
|
||||
@keyframes slide-in-right {
|
||||
|
||||
@@ -86,7 +86,7 @@ export default function AccountSettingsPage() {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
||||
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -261,7 +261,7 @@ export default function AccountSettingsPage() {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
className="flex items-center gap-2 px-6 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
|
||||
@@ -13,6 +13,8 @@ import Badge from '../../components/ui/badge/Badge';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { PricingTable, PricingPlan } from '../../components/ui/pricing-table';
|
||||
import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
|
||||
import CreditCostsPanel from '../../components/billing/CreditCostsPanel';
|
||||
import {
|
||||
getCreditBalance,
|
||||
getCreditPackages,
|
||||
@@ -39,7 +41,7 @@ import {
|
||||
} from '../../services/billing.api';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
type TabType = 'plan' | 'credits' | 'invoices';
|
||||
type TabType = 'plan' | 'credits' | 'purchase' | 'invoices';
|
||||
|
||||
export default function PlansAndBillingPage() {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('plan');
|
||||
@@ -322,7 +324,7 @@ export default function PlansAndBillingPage() {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
||||
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -341,6 +343,7 @@ export default function PlansAndBillingPage() {
|
||||
const tabs = [
|
||||
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
|
||||
{ id: 'credits' as TabType, label: 'Credits Overview', icon: <TrendingUp className="w-4 h-4" /> },
|
||||
{ id: 'purchase' as TabType, label: 'Purchase Credits', icon: <Wallet className="w-4 h-4" /> },
|
||||
{ id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
@@ -360,7 +363,7 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
)}
|
||||
{hasPendingManualPayment && (
|
||||
<div className="mb-4 p-4 rounded-lg border border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-100">
|
||||
<div className="mb-4 p-4 rounded-lg border border-[var(--color-info-200)] bg-[var(--color-info-50)] text-[var(--color-info-800)] dark:border-[var(--color-info-800)] dark:bg-[var(--color-info-900)]/20 dark:text-[var(--color-info-100)]">
|
||||
We received your manual payment. It’s pending admin approval; activation will complete once approved.
|
||||
</div>
|
||||
)}
|
||||
@@ -383,7 +386,7 @@ export default function PlansAndBillingPage() {
|
||||
className={`
|
||||
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap
|
||||
${activeTab === tab.id
|
||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}
|
||||
`}
|
||||
@@ -447,7 +450,7 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex gap-3">
|
||||
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('credits')}>
|
||||
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('purchase')}>
|
||||
Purchase Credits
|
||||
</Button>
|
||||
{hasActivePlan && (
|
||||
@@ -471,7 +474,7 @@ export default function PlansAndBillingPage() {
|
||||
{(currentPlan?.features && currentPlan.features.length > 0
|
||||
? currentPlan.features
|
||||
: ['ai_writer', 'image_gen', 'auto_publish', 'custom_prompts', 'email_support', 'api_access'])
|
||||
.map((feature) => (
|
||||
.map((feature: string) => (
|
||||
<div key={feature} className="flex items-start gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700 dark:text-gray-300">{feature}</span>
|
||||
@@ -519,9 +522,9 @@ export default function PlansAndBillingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 mt-6">
|
||||
<h3 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Plan Change Policy</h3>
|
||||
<ul className="space-y-2 text-sm text-blue-800 dark:text-blue-200">
|
||||
<Card className="p-6 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 border-[var(--color-brand-200)] dark:border-[var(--color-brand-800)] mt-6">
|
||||
<h3 className="font-semibold text-[var(--color-brand-900)] dark:text-[var(--color-brand-100)] mb-2">Plan Change Policy</h3>
|
||||
<ul className="space-y-2 text-sm text-[var(--color-brand-800)] dark:text-[var(--color-brand-200)]">
|
||||
<li>• Upgrades take effect immediately and you'll be charged a prorated amount</li>
|
||||
<li>• Downgrades take effect at the end of your current billing period</li>
|
||||
<li>• Unused credits from your current plan will carry over</li>
|
||||
@@ -538,7 +541,7 @@ export default function PlansAndBillingPage() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
|
||||
{creditBalance?.credits.toLocaleString() || 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-2">credits available</div>
|
||||
@@ -568,7 +571,7 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
className="bg-[var(--color-brand-500)] h-2 rounded-full"
|
||||
style={{
|
||||
width: creditBalance?.credits
|
||||
? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%`
|
||||
@@ -579,40 +582,57 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Purchase Credits Section - Single Row */}
|
||||
{/* Credit Cost Breakdown */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Purchase Additional Credits</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our packages</p>
|
||||
<h2 className="text-xl font-semibold">Credit Cost Analytics</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Cost breakdown by operation type</p>
|
||||
</div>
|
||||
<CreditCostBreakdownPanel />
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex gap-4 pb-4">
|
||||
{packages.map((pkg) => (
|
||||
<article key={pkg.id} className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-blue-500 dark:hover:border-blue-500 transition-colors flex-shrink-0" style={{ minWidth: '280px' }}>
|
||||
<div className="relative p-5 pb-6">
|
||||
<div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-500/10">
|
||||
<svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">
|
||||
{pkg.name}
|
||||
</h3>
|
||||
<div className="flex items-baseline gap-2 mb-1">
|
||||
<span className="text-3xl font-bold text-blue-600 dark:text-blue-400">{pkg.credits.toLocaleString()}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
|
||||
</div>
|
||||
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||
${pkg.price}
|
||||
</div>
|
||||
{pkg.description && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{pkg.description}
|
||||
</p>
|
||||
)}
|
||||
{/* Credit Costs Reference */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<CreditCostsPanel />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Purchase Credits Tab */}
|
||||
{activeTab === 'purchase' && (
|
||||
<div className="space-y-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Purchase Additional Credits</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our packages</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex gap-4 pb-4">
|
||||
{packages.map((pkg) => (
|
||||
<article key={pkg.id} className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-brand-500)] dark:hover:border-[var(--color-brand-500)] transition-colors flex-shrink-0" style={{ minWidth: '280px' }}>
|
||||
<div className="relative p-5 pb-6">
|
||||
<div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-500)]/10">
|
||||
<svg className="w-6 h-6 text-[var(--color-brand-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="border-t border-gray-200 p-4 dark:border-gray-800">
|
||||
<h3 className="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">
|
||||
{pkg.name}
|
||||
</h3>
|
||||
<div className="flex items-baseline gap-2 mb-1">
|
||||
<span className="text-3xl font-bold text-[var(--color-brand-500)]">{pkg.credits.toLocaleString()}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
|
||||
</div>
|
||||
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||
${pkg.price}
|
||||
</div>
|
||||
{pkg.description && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{pkg.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t border-gray-200 p-4 dark:border-gray-800">
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
@@ -633,7 +653,23 @@ export default function PlansAndBillingPage() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods Info */}
|
||||
{!hasPaymentMethods && paymentMethods.length === 0 && (
|
||||
<Card className="p-6 bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-900)]/20 border-[var(--color-warning-200)] dark:border-[var(--color-warning-700)]">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-[var(--color-warning-600)] mt-0.5" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-[var(--color-warning-900)] dark:text-[var(--color-warning-100)] mb-1">
|
||||
Payment Method Required
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-warning-800)] dark:text-[var(--color-warning-200)]">
|
||||
Please contact support to set up a payment method before purchasing credits.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@ export default function PurchaseCreditsPage() {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
||||
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -179,9 +179,9 @@ export default function PurchaseCreditsPage() {
|
||||
</div>
|
||||
|
||||
{/* Payment Instructions */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
|
||||
<h3 className="font-semibold mb-3 text-blue-900">Payment Instructions</h3>
|
||||
<p className="text-blue-800 mb-4">{selectedMethod?.instructions}</p>
|
||||
<div className="bg-[var(--color-info-50)] border border-[var(--color-info-200)] dark:bg-[var(--color-info-900)]/20 dark:border-[var(--color-info-700)] rounded-lg p-6 mb-6">
|
||||
<h3 className="font-semibold mb-3 text-[var(--color-info-900)] dark:text-[var(--color-info-100)]">Payment Instructions</h3>
|
||||
<p className="text-[var(--color-info-800)] dark:text-[var(--color-info-200)] mb-4">{selectedMethod?.instructions}</p>
|
||||
|
||||
{selectedMethod?.bank_details && (
|
||||
<div className="bg-white rounded p-4 space-y-2">
|
||||
@@ -240,7 +240,7 @@ export default function PurchaseCreditsPage() {
|
||||
setManualPaymentData({ ...manualPaymentData, transaction_reference: e.target.value })
|
||||
}
|
||||
placeholder="Enter transaction ID or reference number"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[var(--color-brand-500)] focus:border-[var(--color-brand-500)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -255,7 +255,7 @@ export default function PurchaseCreditsPage() {
|
||||
}
|
||||
placeholder="Any additional information..."
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[var(--color-brand-500)] focus:border-[var(--color-brand-500)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -314,8 +314,8 @@ export default function PurchaseCreditsPage() {
|
||||
onClick={() => setSelectedPackage(pkg)}
|
||||
className={`relative cursor-pointer rounded-lg border-2 p-6 transition-all ${
|
||||
selectedPackage?.id === pkg.id
|
||||
? 'border-blue-600 bg-blue-50'
|
||||
: 'border-gray-200 hover:border-blue-300 bg-white'
|
||||
? 'border-[var(--color-brand-500)] bg-[var(--color-brand-50)]'
|
||||
: 'border-gray-200 hover:border-[var(--color-brand-300)] bg-white'
|
||||
} ${pkg.is_featured ? 'ring-2 ring-yellow-400' : ''}`}
|
||||
>
|
||||
{pkg.is_featured && (
|
||||
@@ -326,7 +326,7 @@ export default function PurchaseCreditsPage() {
|
||||
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-bold mb-2">{pkg.name}</h3>
|
||||
<div className="text-3xl font-bold text-blue-600 mb-1">
|
||||
<div className="text-3xl font-bold text-[var(--color-brand-500)] mb-1">
|
||||
{pkg.credits.toLocaleString()}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 mb-3">credits</div>
|
||||
@@ -343,7 +343,7 @@ export default function PurchaseCreditsPage() {
|
||||
|
||||
{selectedPackage?.id === pkg.id && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
|
||||
<div className="w-6 h-6 bg-[var(--color-brand-500)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -364,15 +364,15 @@ export default function PurchaseCreditsPage() {
|
||||
onClick={() => setSelectedPaymentMethod(method.type)}
|
||||
className={`cursor-pointer rounded-lg border-2 p-4 transition-all ${
|
||||
selectedPaymentMethod === method.type
|
||||
? 'border-blue-600 bg-blue-50'
|
||||
: 'border-gray-200 hover:border-blue-300 bg-white'
|
||||
? 'border-[var(--color-brand-500)] bg-[var(--color-brand-50)]'
|
||||
: 'border-gray-200 hover:border-[var(--color-brand-300)] bg-white'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`p-2 rounded-lg ${
|
||||
selectedPaymentMethod === method.type
|
||||
? 'bg-blue-600 text-white'
|
||||
? 'bg-[var(--color-brand-500)] text-white'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
@@ -383,7 +383,7 @@ export default function PurchaseCreditsPage() {
|
||||
<p className="text-sm text-gray-600">{method.instructions}</p>
|
||||
</div>
|
||||
{selectedPaymentMethod === method.type && (
|
||||
<Check className="w-5 h-5 text-blue-600 flex-shrink-0" />
|
||||
<Check className="w-5 h-5 text-[var(--color-brand-500)] flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -405,7 +405,7 @@ export default function PurchaseCreditsPage() {
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-gray-600">Total:</div>
|
||||
<div className="text-3xl font-bold text-blue-600">
|
||||
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
|
||||
${selectedPackage.price}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -116,7 +116,7 @@ export default function TeamManagementPage() {
|
||||
className={`
|
||||
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
|
||||
${activeTab === tab.id
|
||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
|
||||
}
|
||||
`}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Usage & Analytics Page
|
||||
* Tabs: Plan Limits, Credit Usage, API Usage, Cost Breakdown
|
||||
* Tabs: Limits & Usage, API Usage
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
@@ -15,7 +15,7 @@ import BillingBalancePanel from '../../components/billing/BillingBalancePanel';
|
||||
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
|
||||
type TabType = 'limits' | 'credits' | 'balance' | 'api' | 'costs';
|
||||
type TabType = 'limits' | 'api' | 'activity';
|
||||
|
||||
export default function UsageAnalyticsPage() {
|
||||
const toast = useToast();
|
||||
@@ -52,11 +52,9 @@ export default function UsageAnalyticsPage() {
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: 'limits' as TabType, label: 'Plan Limits', icon: <BarChart3 className="w-4 h-4" /> },
|
||||
{ id: 'credits' as TabType, label: 'Credit Usage', icon: <TrendingUp className="w-4 h-4" /> },
|
||||
{ id: 'balance' as TabType, label: 'Credit Balance', icon: <DollarSign className="w-4 h-4" /> },
|
||||
{ id: 'limits' as TabType, label: 'Limits & Usage', icon: <BarChart3 className="w-4 h-4" /> },
|
||||
{ id: 'activity' as TabType, label: 'Activity', icon: <TrendingUp className="w-4 h-4" /> },
|
||||
{ id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
|
||||
{ id: 'costs' as TabType, label: 'Cost Breakdown', icon: <DollarSign className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -67,7 +65,7 @@ export default function UsageAnalyticsPage() {
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usage & Analytics</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Monitor plan limits, credit usage, API calls, and cost breakdown
|
||||
</p>
|
||||
</p>and API calls
|
||||
</div>
|
||||
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
@@ -81,7 +79,7 @@ export default function UsageAnalyticsPage() {
|
||||
className={`
|
||||
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
|
||||
${activeTab === tab.id
|
||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
|
||||
}
|
||||
`}
|
||||
@@ -114,79 +112,17 @@ export default function UsageAnalyticsPage() {
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="mt-6">
|
||||
{/* Plan Limits Tab */}
|
||||
{/* Limits & Usage Tab */}
|
||||
{activeTab === 'limits' && (
|
||||
<UsageLimitsPanel />
|
||||
)}
|
||||
|
||||
{/* Credit Usage Tab */}
|
||||
{activeTab === 'credits' && (
|
||||
<div className="space-y-6">
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Credits Used</div>
|
||||
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
|
||||
{analytics?.total_usage.toLocaleString() || 0}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Purchases</div>
|
||||
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
|
||||
{analytics?.total_purchases.toLocaleString() || 0}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{analytics?.current_balance.toLocaleString() || 0}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Usage by Type */}
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Usage by Operation Type
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{analytics?.usage_by_type.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<Badge variant="light" color="error">
|
||||
{item.transaction_type}
|
||||
</Badge>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{item.count} operations
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-red-600 dark:text-red-400">
|
||||
{item.total.toLocaleString()} credits
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
No usage in this period
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Insert Billing usage panel below current credit-analytics content */}
|
||||
<div className="mt-6">
|
||||
<BillingUsagePanel />
|
||||
</div>
|
||||
<UsageLimitsPanel />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Credit Balance Tab (billing/credits moved here) */}
|
||||
{activeTab === 'balance' && (
|
||||
{/* Activity Tab */}
|
||||
{activeTab === 'activity' && (
|
||||
<div className="space-y-6">
|
||||
<BillingBalancePanel />
|
||||
<BillingUsagePanel showOnlyActivity={true} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -196,7 +132,7 @@ export default function UsageAnalyticsPage() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total API Calls</div>
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
|
||||
{analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0).toLocaleString() || 0}
|
||||
</div>
|
||||
</Card>
|
||||
@@ -245,64 +181,6 @@ export default function UsageAnalyticsPage() {
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cost Breakdown Tab */}
|
||||
{activeTab === 'costs' && (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Cost</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
${((analytics?.total_usage || 0) * 0.01).toFixed(2)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">Estimated USD</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Avg Cost/Day</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
${(((analytics?.total_usage || 0) * 0.01) / period).toFixed(2)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">Estimated USD</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Cost per Credit</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
$0.01
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">Average rate</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Cost by Operation
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{analytics?.usage_by_type.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{item.transaction_type}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{item.total.toLocaleString()} credits used
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold">${(item.total * 0.01).toFixed(2)}</div>
|
||||
<div className="text-xs text-gray-500">USD</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
No cost data available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Summary Cards */}
|
||||
|
||||
@@ -1,435 +0,0 @@
|
||||
/* ===================================================================
|
||||
IGNY8 ACCOUNT SECTION - CUSTOM COLOR SCHEMES
|
||||
===================================================================
|
||||
Brand-specific styling for account, billing, and usage pages
|
||||
Follows IGNY8 design system with enhanced gradients and visual hierarchy
|
||||
=================================================================== */
|
||||
|
||||
/* Account Page Container */
|
||||
.account-page {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.dark .account-page {
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
}
|
||||
|
||||
/* === IGNY8 BRAND GRADIENTS === */
|
||||
.igny8-gradient-primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
}
|
||||
|
||||
.igny8-gradient-success {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
|
||||
.igny8-gradient-warning {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.igny8-gradient-danger {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
|
||||
.igny8-gradient-purple {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
}
|
||||
|
||||
.igny8-gradient-teal {
|
||||
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
|
||||
}
|
||||
|
||||
/* === CARD VARIANTS === */
|
||||
.igny8-card-premium {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
|
||||
}
|
||||
|
||||
.dark .igny8-card-premium {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.igny8-card-success {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.dark .igny8-card-success {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.igny8-card-warning {
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.dark .igny8-card-warning {
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
|
||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
/* === USAGE METRICS === */
|
||||
.usage-metric-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.usage-metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
|
||||
}
|
||||
|
||||
.usage-metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.usage-metric-card.warning::before {
|
||||
background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.usage-metric-card.danger::before {
|
||||
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
|
||||
.usage-metric-card.success::before {
|
||||
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
|
||||
/* === PROGRESS BARS === */
|
||||
.igny8-progress-bar {
|
||||
height: 8px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dark .igny8-progress-bar {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
.igny8-progress-fill {
|
||||
height: 100%;
|
||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.igny8-progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.igny8-progress-fill.primary {
|
||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
|
||||
}
|
||||
|
||||
.igny8-progress-fill.warning {
|
||||
background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.igny8-progress-fill.danger {
|
||||
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
|
||||
.igny8-progress-fill.success {
|
||||
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
|
||||
/* === STAT NUMBERS === */
|
||||
.igny8-stat-number {
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.igny8-stat-number.primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.igny8-stat-number.success {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.igny8-stat-number.warning {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.igny8-stat-number.danger {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* === BADGES === */
|
||||
.igny8-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.igny8-badge.primary {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
|
||||
color: #2563eb;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.dark .igny8-badge.primary {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.igny8-badge.success {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
|
||||
color: #059669;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.dark .igny8-badge.success {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.igny8-badge.warning {
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
|
||||
color: #d97706;
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.dark .igny8-badge.warning {
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.igny8-badge.danger {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
|
||||
color: #dc2626;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.dark .igny8-badge.danger {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* === PLAN CARDS === */
|
||||
.igny8-plan-card {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.igny8-plan-card.featured {
|
||||
border: 2px solid #3b82f6;
|
||||
box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
|
||||
}
|
||||
|
||||
.igny8-plan-card.featured::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
|
||||
}
|
||||
|
||||
.igny8-plan-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* === LIMIT DISPLAY === */
|
||||
.igny8-limit-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
border: 1px solid rgba(59, 130, 246, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dark .igny8-limit-item {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.igny8-limit-item:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.dark .igny8-limit-item:hover {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* === BILLING HISTORY TABLE === */
|
||||
.igny8-billing-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.igny8-billing-table thead th {
|
||||
background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
|
||||
color: #6b7280;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.dark .igny8-billing-table thead th {
|
||||
background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
|
||||
color: #9ca3af;
|
||||
border-bottom: 1px solid #374151;
|
||||
}
|
||||
|
||||
.igny8-billing-table tbody tr {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.dark .igny8-billing-table tbody tr {
|
||||
border-bottom: 1px solid #374151;
|
||||
}
|
||||
|
||||
.igny8-billing-table tbody tr:hover {
|
||||
background: rgba(59, 130, 246, 0.02);
|
||||
}
|
||||
|
||||
.dark .igny8-billing-table tbody tr:hover {
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
.igny8-billing-table tbody td {
|
||||
padding: 1rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.dark .igny8-billing-table tbody td {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
/* === UPGRADE CTA === */
|
||||
.igny8-upgrade-cta {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.igny8-upgrade-cta::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.igny8-upgrade-cta-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* === ANIMATIONS === */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.igny8-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.igny8-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* === RESPONSIVE UTILITIES === */
|
||||
@media (max-width: 640px) {
|
||||
.igny8-stat-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.usage-metric-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.igny8-plan-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user