salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

autoamtiona nd other pages udpates,

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 01:40:34 +00:00
parent a02e485f7d
commit 0d3e25e50f
11 changed files with 701 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -15,6 +15,8 @@ import {
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { PricingPlan } from '../../components/ui/pricing-table';
import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
@@ -340,9 +342,18 @@ 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-[var(--color-brand-500)]" />
</div>
<>
<PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
<PageHeader
title="Plans & Billing"
badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
</div>
</div>
</>
);
}
@@ -365,28 +376,23 @@ export default function PlansAndBillingPage() {
};
return (
<div className="p-6">
{/* Page Header with Breadcrumb */}
<div className="mb-6">
<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-2">
<span>Plans & Billing</span>
<span>›</span>
<span className="text-gray-900 dark:text-white font-medium">{pageTitles[activeTab].title}</span>
</div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{pageTitles[activeTab].title}</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
{pageTitles[activeTab].description}
</p>
</div>
{/* Activation / pending payment notice */}
{!hasActivePlan && (
<div className="mb-4 p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
No active plan. Choose a plan below to activate your account.
</div>
)}
{hasPendingManualPayment && (
<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)]">
<>
<PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
<PageHeader
title={pageTitles[activeTab].title}
description={pageTitles[activeTab].description}
badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
parent="Plans & Billing"
/>
<div className="p-6">
{/* Activation / pending payment notice */}
{!hasActivePlan && (
<div className="mb-4 p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
No active plan. Choose a plan below to activate your account.
</div>
)}
{hasPendingManualPayment && (
<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>
)}
@@ -587,14 +593,6 @@ export default function PlansAndBillingPage() {
<div className="space-y-6">
{/* Upgrade Plans Section */}
<div>
<div className="mb-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
{hasActivePlan ? 'Upgrade or Change Your Plan' : 'Choose Your Plan'}
</h2>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Select the plan that best fits your needs
</p>
</div>
<div className="mx-auto" style={{ maxWidth: '1560px' }}>
<PricingTable1
title=""
@@ -895,6 +893,7 @@ export default function PlansAndBillingPage() {
</div>
</div>
)}
</div>
</div>
</>
);
}