billing accoutn with all the mess here
This commit is contained in:
IGNY8 VPS (Salman)
523
frontend/src/pages/account/PlansAndBillingPage.tsx
Normal file
523
frontend/src/pages/account/PlansAndBillingPage.tsx
Normal file
@@ -0,0 +1,523 @@
|
||||
/**
|
||||
* Plans & Billing Page - Consolidated
|
||||
* Tabs: Current Plan, Upgrade/Downgrade, Credits Overview, Purchase Credits, Billing History, Payment Methods
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
|
||||
Loader2, AlertCircle, CheckCircle, Download
|
||||
} from 'lucide-react';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Badge from '../../components/ui/badge/Badge';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import {
|
||||
getCreditBalance,
|
||||
getCreditPackages,
|
||||
getInvoices,
|
||||
getAvailablePaymentMethods,
|
||||
purchaseCreditPackage,
|
||||
type CreditBalance,
|
||||
type CreditPackage,
|
||||
type Invoice,
|
||||
type PaymentMethod,
|
||||
} from '../../services/billing.api';
|
||||
|
||||
type TabType = 'plan' | 'upgrade' | 'credits' | 'purchase' | 'invoices' | 'payment-methods';
|
||||
|
||||
export default function PlansAndBillingPage() {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('plan');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// Data states
|
||||
const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
|
||||
const [packages, setPackages] = useState<CreditPackage[]>([]);
|
||||
const [invoices, setInvoices] = useState<Invoice[]>([]);
|
||||
const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [balanceData, packagesData, invoicesData, methodsData] = await Promise.all([
|
||||
getCreditBalance(),
|
||||
getCreditPackages(),
|
||||
getInvoices({}),
|
||||
getAvailablePaymentMethods(),
|
||||
]);
|
||||
|
||||
setCreditBalance(balanceData);
|
||||
setPackages(packagesData.results || []);
|
||||
setInvoices(invoicesData.results || []);
|
||||
setPaymentMethods(methodsData.results || []);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to load billing data');
|
||||
console.error('Billing load error:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePurchase = async (packageId: number) => {
|
||||
try {
|
||||
await purchaseCreditPackage({
|
||||
package_id: packageId,
|
||||
payment_method: 'stripe',
|
||||
});
|
||||
await loadData();
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to purchase credits');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
|
||||
{ id: 'upgrade' as TabType, label: 'Upgrade/Downgrade', icon: <ArrowUpCircle 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: <CreditCard className="w-4 h-4" /> },
|
||||
{ id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
|
||||
{ id: 'payment-methods' as TabType, label: 'Payment Methods', icon: <Wallet className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Plans & Billing</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Manage your subscription, credits, and billing information
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-600" />
|
||||
<p className="text-red-800 dark:text-red-200">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<nav className="-mb-px flex space-x-8 overflow-x-auto">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
type="button"
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
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-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{tab.icon}
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="mt-6">
|
||||
{/* Current Plan Tab */}
|
||||
{activeTab === 'plan' && (
|
||||
<div className="space-y-6">
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Your Current Plan</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">Free Plan</div>
|
||||
<div className="text-gray-600 dark:text-gray-400">Perfect for getting started</div>
|
||||
</div>
|
||||
<Badge variant="light" color="success">Active</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Sites Allowed</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">1</div>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Team Members</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex gap-3">
|
||||
<Button variant="primary" tone="brand">
|
||||
Upgrade Plan
|
||||
</Button>
|
||||
<Button variant="outline" tone="neutral">
|
||||
Compare Plans
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Plan Features</h2>
|
||||
<ul className="space-y-3">
|
||||
{['Basic AI Tools', 'Content Generation', 'Keyword Research', 'Email Support'].map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upgrade/Downgrade Tab */}
|
||||
{activeTab === 'upgrade' && (
|
||||
<div className="space-y-6">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Available Plans</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Choose the plan that best fits your needs</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* Free Plan */}
|
||||
<Card className="p-6 relative">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold">Free</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$0</div>
|
||||
<div className="text-sm text-gray-500">/month</div>
|
||||
</div>
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>100 credits/month</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>1 site</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>1 user</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>Basic features</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="light" color="success" className="absolute top-4 right-4">Current</Badge>
|
||||
</Card>
|
||||
|
||||
{/* Starter Plan */}
|
||||
<Card className="p-6 border-2 border-blue-500">
|
||||
<Badge variant="light" color="primary" className="absolute top-4 right-4">Popular</Badge>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold">Starter</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$29</div>
|
||||
<div className="text-sm text-gray-500">/month</div>
|
||||
</div>
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>1,000 credits/month</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>3 sites</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>2 users</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>Full AI suite</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="primary" tone="brand" fullWidth>
|
||||
Upgrade to Starter
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
{/* Professional Plan */}
|
||||
<Card className="p-6">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold">Professional</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$99</div>
|
||||
<div className="text-sm text-gray-500">/month</div>
|
||||
</div>
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>5,000 credits/month</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>10 sites</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>5 users</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>Priority support</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" tone="neutral" fullWidth>
|
||||
Upgrade to Pro
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<Card className="p-6">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold">Enterprise</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$299</div>
|
||||
<div className="text-sm text-gray-500">/month</div>
|
||||
</div>
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>20,000 credits/month</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>Unlimited sites</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>20 users</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>Dedicated support</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" tone="neutral" fullWidth>
|
||||
Upgrade to Enterprise
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
|
||||
<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">
|
||||
<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>
|
||||
<li>• You can cancel your subscription at any time</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Credits Overview Tab */}
|
||||
{activeTab === 'credits' && (
|
||||
<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">Current Balance</div>
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
{creditBalance?.credits.toLocaleString() || 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-2">credits available</div>
|
||||
</Card>
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Used This Month</div>
|
||||
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
|
||||
{creditBalance?.credits_used_this_month.toLocaleString() || 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-2">credits consumed</div>
|
||||
</Card>
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Monthly Included</div>
|
||||
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
|
||||
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-2">from your plan</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Credit Usage Summary</h2>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-700 dark:text-gray-300">Remaining Credits</span>
|
||||
<span className="font-semibold">{creditBalance?.credits_remaining.toLocaleString() || 0}</span>
|
||||
</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"
|
||||
style={{
|
||||
width: creditBalance?.credits
|
||||
? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%`
|
||||
: '0%'
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Purchase Credits Tab */}
|
||||
{activeTab === 'purchase' && (
|
||||
<div className="space-y-6">
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Credit Packages</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{packages.map((pkg) => (
|
||||
<div key={pkg.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-blue-500 transition-colors">
|
||||
<div className="text-lg font-semibold text-gray-900 dark:text-white">{pkg.name}</div>
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">
|
||||
{pkg.credits.toLocaleString()} <span className="text-sm text-gray-500">credits</span>
|
||||
</div>
|
||||
<div className="text-2xl font-semibold text-gray-900 dark:text-white mt-4">
|
||||
${pkg.price}
|
||||
</div>
|
||||
{pkg.description && (
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-2">{pkg.description}</div>
|
||||
)}
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
onClick={() => handlePurchase(pkg.id)}
|
||||
fullWidth
|
||||
className="mt-6"
|
||||
>
|
||||
Purchase
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{packages.length === 0 && (
|
||||
<div className="col-span-3 text-center py-12 text-gray-500">
|
||||
No credit packages available at this time
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Billing History Tab */}
|
||||
{activeTab === 'invoices' && (
|
||||
<Card className="overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Invoice
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Date
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Amount
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{invoices.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-8 text-center text-gray-500">
|
||||
<FileText className="w-12 h-12 mx-auto mb-2 text-gray-400" />
|
||||
No invoices yet
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
invoices.map((invoice) => (
|
||||
<tr key={invoice.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||
<td className="px-6 py-4 font-medium">{invoice.invoice_number}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
{new Date(invoice.created_at).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 font-semibold">${invoice.total_amount}</td>
|
||||
<td className="px-6 py-4">
|
||||
<Badge
|
||||
variant="light"
|
||||
color={invoice.status === 'paid' ? 'success' : 'warning'}
|
||||
>
|
||||
{invoice.status}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="brand"
|
||||
size="sm"
|
||||
startIcon={<Download className="w-4 h-4" />}
|
||||
className="ml-auto"
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Payment Methods Tab */}
|
||||
{activeTab === 'payment-methods' && (
|
||||
<div className="space-y-6">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold">Payment Methods</h2>
|
||||
<Button variant="primary" tone="brand">
|
||||
Add Payment Method
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{paymentMethods.map((method) => (
|
||||
<div key={method.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<CreditCard className="w-8 h-8 text-gray-400" />
|
||||
<div>
|
||||
<div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">{method.type}</div>
|
||||
</div>
|
||||
</div>
|
||||
{method.is_enabled && (
|
||||
<Badge variant="light" color="success">Active</Badge>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{paymentMethods.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
No payment methods configured
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user