Fixing PLans page
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Plans & Billing Page - Consolidated
|
||||
* Tabs: Current Plan, Upgrade/Downgrade, Credits Overview, Purchase Credits, Billing History, Payment Methods
|
||||
* Tabs: Current Plan, Credits Overview, Billing History
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
@@ -12,6 +12,7 @@ import { Card } from '../../components/ui/card';
|
||||
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 {
|
||||
getCreditBalance,
|
||||
getCreditPackages,
|
||||
@@ -38,7 +39,7 @@ import {
|
||||
} from '../../services/billing.api';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
type TabType = 'plan' | 'upgrade' | 'credits' | 'purchase' | 'invoices' | 'payments' | 'payment-methods';
|
||||
type TabType = 'plan' | 'credits' | 'invoices';
|
||||
|
||||
export default function PlansAndBillingPage() {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('plan');
|
||||
@@ -339,12 +340,8 @@ export default function PlansAndBillingPage() {
|
||||
|
||||
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: 'payments' as TabType, label: 'Payments', icon: <Wallet className="w-4 h-4" /> },
|
||||
{ id: 'payment-methods' as TabType, label: 'Payment Methods', icon: <Wallet className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -403,177 +400,125 @@ export default function PlansAndBillingPage() {
|
||||
{/* 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>
|
||||
{!hasActivePlan && (
|
||||
<div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
|
||||
No active plan found. Please choose a plan to activate your account.
|
||||
</div>
|
||||
)}
|
||||
<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">
|
||||
{currentPlan?.name || 'No Plan Selected'}
|
||||
{/* 2/3 Current Plan + 1/3 Plan Features Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Current Plan Card - 2/3 width */}
|
||||
<Card className="p-6 lg:col-span-2">
|
||||
<h2 className="text-lg font-semibold mb-4">Your Current Plan</h2>
|
||||
{!hasActivePlan && (
|
||||
<div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
|
||||
No active plan found. Please choose a plan to activate your account.
|
||||
</div>
|
||||
)}
|
||||
<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">
|
||||
{currentPlan?.name || 'No Plan Selected'}
|
||||
</div>
|
||||
<div className="text-gray-600 dark:text-gray-400">
|
||||
{currentPlan?.description || 'Select a plan to unlock full access.'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-600 dark:text-gray-400">
|
||||
{currentPlan?.description || 'Select a plan to unlock full access.'}
|
||||
<Badge variant="light" color={hasActivePlan ? 'success' : 'warning'}>
|
||||
{hasActivePlan ? subscriptionStatus : 'plan required'}
|
||||
</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">Current Balance</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{creditBalance?.credits?.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">Period Ends</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{currentSubscription?.current_period_end
|
||||
? new Date(currentSubscription.current_period_end).toLocaleDateString()
|
||||
: '—'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="light" color={hasActivePlan ? 'success' : 'warning'}>
|
||||
{hasActivePlan ? subscriptionStatus : 'plan required'}
|
||||
</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">Current Balance</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{creditBalance?.credits?.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">Period Ends</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white text-base">
|
||||
{currentSubscription?.current_period_end
|
||||
? new Date(currentSubscription.current_period_end).toLocaleDateString()
|
||||
: '—'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex gap-3">
|
||||
<Button variant="primary" tone="brand" onClick={() => setActiveTab('upgrade')}>
|
||||
{hasActivePlan ? 'Change Plan' : 'Choose a Plan'}
|
||||
</Button>
|
||||
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('purchase')}>
|
||||
Purchase Credits
|
||||
</Button>
|
||||
{hasActivePlan && (
|
||||
<Button
|
||||
variant="outline"
|
||||
tone="neutral"
|
||||
disabled={planLoadingId === currentSubscription?.id}
|
||||
onClick={handleCancelSubscription}
|
||||
>
|
||||
{planLoadingId === currentSubscription?.id ? 'Cancelling...' : 'Cancel Subscription'}
|
||||
<div className="mt-6 flex gap-3">
|
||||
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('credits')}>
|
||||
Purchase Credits
|
||||
</Button>
|
||||
)}
|
||||
{hasActivePlan && (
|
||||
<Button
|
||||
variant="outline"
|
||||
tone="neutral"
|
||||
disabled={planLoadingId === currentSubscription?.id}
|
||||
onClick={handleCancelSubscription}
|
||||
>
|
||||
{planLoadingId === currentSubscription?.id ? 'Cancelling...' : 'Cancel Subscription'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Plan Features</h2>
|
||||
<ul className="space-y-3">
|
||||
{(currentPlan?.features && currentPlan.features.length > 0
|
||||
? currentPlan.features
|
||||
: ['Credits included each month', 'Module access per plan limits', '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>
|
||||
{/* Plan Features Card - 1/3 width with 2-column layout */}
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Plan Features</h2>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{(currentPlan?.features && currentPlan.features.length > 0
|
||||
? currentPlan.features
|
||||
: ['ai_writer', 'image_gen', 'auto_publish', 'custom_prompts', 'email_support', 'api_access'])
|
||||
.map((feature) => (
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{hasPaymentMethods ? (
|
||||
<div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
||||
<div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Select payment method</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{paymentMethods.map((method) => (
|
||||
<label
|
||||
key={method.id}
|
||||
className={`px-3 py-2 rounded-lg border cursor-pointer text-sm ${
|
||||
selectedPaymentMethod === (method.type || method.id)
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sr-only"
|
||||
checked={selectedPaymentMethod === (method.type || method.id)}
|
||||
onChange={() => setSelectedPaymentMethod(method.type || method.id)}
|
||||
/>
|
||||
<div className="font-semibold text-gray-900 dark:text-white">{method.display_name}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{method.type}</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{/* Upgrade/Downgrade Section with Pricing Table */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="mx-auto" style={{ maxWidth: '1200px' }}>
|
||||
<PricingTable
|
||||
variant="1"
|
||||
plans={plans.map(plan => {
|
||||
const discount = plan.annual_discount_percent || 15;
|
||||
return {
|
||||
id: plan.id,
|
||||
name: plan.name,
|
||||
monthlyPrice: plan.price || 0,
|
||||
price: plan.price || 0,
|
||||
annualDiscountPercent: discount,
|
||||
period: `/${plan.interval || 'month'}`,
|
||||
description: plan.description || 'Standard plan',
|
||||
features: plan.features && plan.features.length > 0
|
||||
? plan.features
|
||||
: ['Monthly credits included', 'Module access', 'Email support'],
|
||||
buttonText: plan.id === currentPlanId ? 'Current Plan' : 'Select Plan',
|
||||
highlighted: plan.is_featured || false,
|
||||
disabled: plan.id === currentPlanId || planLoadingId === plan.id,
|
||||
};
|
||||
})}
|
||||
showToggle={true}
|
||||
onPlanSelect={(plan) => plan.id && handleSelectPlan(plan.id)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
|
||||
No payment methods available. Please contact support or add one from the Payment Methods tab.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{plans.map((plan) => {
|
||||
const isCurrent = plan.id === currentPlanId;
|
||||
const price = plan.price ? `$${plan.price}/${plan.interval || 'month'}` : 'Custom';
|
||||
return (
|
||||
<Card key={plan.id} className="p-6 relative border border-gray-200 dark:border-gray-700">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold">{plan.name}</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{price}</div>
|
||||
<div className="text-sm text-gray-500">{plan.description || 'Standard plan'}</div>
|
||||
</div>
|
||||
<div className="space-y-3 mb-6">
|
||||
{(plan.features && plan.features.length > 0 ? plan.features : ['Monthly credits included', 'Module access per plan', 'Email support']).map((feature) => (
|
||||
<div key={feature} className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
variant={isCurrent ? 'outline' : 'primary'}
|
||||
tone="brand"
|
||||
fullWidth
|
||||
disabled={isCurrent || planLoadingId === plan.id}
|
||||
onClick={() => handleSelectPlan(plan.id)}
|
||||
>
|
||||
{planLoadingId === plan.id
|
||||
? 'Updating...'
|
||||
: isCurrent
|
||||
? 'Current Plan'
|
||||
: 'Select Plan'}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{plans.length === 0 && (
|
||||
<div className="col-span-3 text-center py-12 text-gray-500">
|
||||
No plans available. Please contact support.
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -623,69 +568,53 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Purchase Credits Tab */}
|
||||
{activeTab === 'purchase' && (
|
||||
<div className="space-y-6">
|
||||
{hasPaymentMethods ? (
|
||||
<div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
||||
<div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Select payment method</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{paymentMethods.map((method) => (
|
||||
<label
|
||||
key={method.id}
|
||||
className={`px-3 py-2 rounded-lg border cursor-pointer text-sm ${
|
||||
selectedPaymentMethod === (method.type || method.id)
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sr-only"
|
||||
checked={selectedPaymentMethod === (method.type || method.id)}
|
||||
onChange={() => setSelectedPaymentMethod(method.type || method.id)}
|
||||
/>
|
||||
<div className="font-semibold text-gray-900 dark:text-white">{method.display_name}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{method.type}</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{/* Purchase Credits Section - Single Row */}
|
||||
<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>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
|
||||
No payment methods available. Please contact support or add one from the Payment Methods tab.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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 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>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t border-gray-200 p-4 dark:border-gray-800">
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
onClick={() => handlePurchase(pkg.id)}
|
||||
fullWidth
|
||||
size="md"
|
||||
disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
|
||||
>
|
||||
{purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase'}
|
||||
</Button>
|
||||
</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"
|
||||
disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
|
||||
>
|
||||
{purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase'}
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
{packages.length === 0 && (
|
||||
<div className="col-span-3 text-center py-12 text-gray-500">
|
||||
@@ -693,88 +622,88 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</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 ? (
|
||||
<div className="space-y-6">
|
||||
{/* Invoices Section */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold">Invoices</h2>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
) : (
|
||||
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"
|
||||
onClick={() => handleDownloadInvoice(invoice.id)}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</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>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
) : (
|
||||
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"
|
||||
onClick={() => handleDownloadInvoice(invoice.id)}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Payments Tab */}
|
||||
{activeTab === 'payments' && (
|
||||
<div className="space-y-6">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Payments</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Recent payments and manual submissions</p>
|
||||
</div>
|
||||
{/* Payments Section */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold">Payments</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Recent payments and manual submissions</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
@@ -831,113 +760,13 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Submit Manual Payment</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Invoice ID (optional)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={manualPayment.invoice_id}
|
||||
onChange={(e) => setManualPayment((p) => ({ ...p, invoice_id: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
placeholder="Invoice ID"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Amount</label>
|
||||
<input
|
||||
type="text"
|
||||
value={manualPayment.amount}
|
||||
onChange={(e) => setManualPayment((p) => ({ ...p, amount: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
placeholder="e.g., 99.00"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Payment Method</label>
|
||||
<input
|
||||
type="text"
|
||||
value={manualPayment.payment_method}
|
||||
onChange={(e) => setManualPayment((p) => ({ ...p, payment_method: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
placeholder="bank_transfer / local_wallet / manual"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reference</label>
|
||||
<input
|
||||
type="text"
|
||||
value={manualPayment.reference}
|
||||
onChange={(e) => setManualPayment((p) => ({ ...p, reference: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
placeholder="Reference or transaction id"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label>
|
||||
<textarea
|
||||
value={manualPayment.notes}
|
||||
onChange={(e) => setManualPayment((p) => ({ ...p, notes: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
placeholder="Optional notes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<Button variant="primary" tone="brand" onClick={handleSubmitManualPayment}>
|
||||
Submit Manual Payment
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment Methods Tab */}
|
||||
{activeTab === 'payment-methods' && (
|
||||
<div className="space-y-6">
|
||||
{/* Payment Methods Section */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold">Payment Methods</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
|
||||
<select
|
||||
value={newPaymentMethod.type}
|
||||
onChange={(e) => setNewPaymentMethod((p) => ({ ...p, type: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value="bank_transfer">Bank Transfer</option>
|
||||
<option value="local_wallet">Local Wallet</option>
|
||||
<option value="manual">Manual</option>
|
||||
</select>
|
||||
<h2 className="text-lg font-semibold">Payment Methods</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Manage your payment methods</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Display Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newPaymentMethod.display_name}
|
||||
onChange={(e) => setNewPaymentMethod((p) => ({ ...p, display_name: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
placeholder="e.g., Bank Transfer (USD)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Instructions (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newPaymentMethod.instructions}
|
||||
onChange={(e) => setNewPaymentMethod((p) => ({ ...p, instructions: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
placeholder="Where to send payment"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<Button variant="primary" tone="brand" onClick={handleAddPaymentMethod}>
|
||||
Add Payment Method
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{paymentMethods.map((method) => (
|
||||
|
||||
Reference in New Issue
Block a user