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

docs & ux improvmeents

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 20:31:58 +00:00
parent 90e6e96b2b
commit 4bffede052
247 changed files with 6869 additions and 53517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/auth/SignUpForm.tsx
View File

@@ -129,7 +129,7 @@ export default function SignUpForm({ planDetails: planDetailsProp, planLoading:
<p className="text-sm text-gray-500 dark:text-gray-400">
{planSlug && paidPlans.includes(planSlug)
? `You're signing up for the ${planSlug} plan. You'll be taken to billing to complete payment.`
: "No credit card required. 100 AI credits to get started."}
: "No credit card required. Start creating content today."}
</p>
</div>
<div>

2
frontend/src/components/auth/SignUpFormEnhanced.tsx
View File

@@ -275,7 +275,7 @@ export default function SignUpFormEnhanced({ planDetails: planDetailsProp, planL
<p className="text-sm text-gray-500 dark:text-gray-400">
{isPaidPlan
? `Complete the ${totalSteps}-step process to activate your subscription.`
: 'No credit card required. 1000 AI credits to get started.'}
: 'No credit card required. Start creating content today.'}
</p>
</div>

2
frontend/src/components/auth/SignUpFormSimplified.tsx
View File

@@ -226,7 +226,7 @@ export default function SignUpFormSimplified({ planDetails: planDetailsProp, pla
<p className="text-sm text-gray-500 dark:text-gray-400">
{isPaidPlan
? 'Complete your registration and select a payment method.'
: 'No credit card required. 1000 AI credits to get started.'}
: 'No credit card required. Start creating content today.'}
</p>
</div>

22
frontend/src/components/billing/BillingBalancePanel.tsx
View File

@@ -19,7 +19,7 @@ export default function BillingBalancePanel() {
if (loading && !balance) {
return (
<div className="p-4">
<div className="text-gray-500">Loading credit balance...</div>
<div className="text-gray-500">Loading content usage...</div>
</div>
);
}
@@ -28,19 +28,19 @@ export default function BillingBalancePanel() {
<div className="p-4 space-y-6">
<div className="flex items-center justify-between mb-4">
<div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Balance</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and subscription status</p>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Usage Overview</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Track your content generation and plan status</p>
</div>
<Link to="/account/purchase-credits">
<Link to="/account/plans-and-billing">
<Button variant="primary" startIcon={<DollarLineIcon className="w-4 h-4" />}>
Purchase Credits
Manage Plan
</Button>
</Link>
</div>
{error && !balance && (
<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">
Balance unavailable. {error}
Usage unavailable. {error}
<div className="mt-3">
<Button variant="outline" size="sm" onClick={loadBalance}>
Retry
@@ -53,23 +53,23 @@ export default function BillingBalancePanel() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card className="p-6">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Balance</h3>
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Content This Month</h3>
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{(balance?.credits ?? 0).toLocaleString()}
{(balance?.credits_remaining ?? balance?.credits ?? 0).toLocaleString()}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Available credits</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Content pieces remaining</p>
</Card>
<Card className="p-6">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Subscription Plan</h3>
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Plan</h3>
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
(balance as any)?.subscription_plan || user?.account?.plan?.name || 'None'
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
{(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} credits/month` : 'No subscription'}
{(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} content pieces/month` : 'No subscription'}
</p>
</Card>

14
frontend/src/components/dashboard/CreditBalanceWidget.tsx
View File

@@ -12,17 +12,17 @@ export default function CreditBalanceWidget() {
if (loading && !balance) {
return (
<ComponentCard title="Credit Balance" desc="Loading...">
<div className="animate-pulse">Loading credit balance...</div>
<ComponentCard title="Content Usage" desc="Loading...">
<div className="animate-pulse">Loading content usage...</div>
</ComponentCard>
);
}
if (error && !balance) {
return (
<ComponentCard title="Credit Balance" desc="Balance unavailable">
<ComponentCard title="Content Usage" desc="Usage unavailable">
<div className="text-sm text-red-600 dark:text-red-400 mb-3">
Balance unavailable. Please retry.
Usage unavailable. Please retry.
</div>
<Button variant="outline" size="sm" onClick={loadBalance}>
Retry
@@ -38,11 +38,11 @@ export default function CreditBalanceWidget() {
: 0;
return (
<ComponentCard title="Credit Balance" desc="Current credit status and usage">
<ComponentCard title="Content Usage" desc="Monthly content allowance">
<div className="space-y-4">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-sm text-gray-600 dark:text-gray-400">Current Credits</span>
<span className="text-sm text-gray-600 dark:text-gray-400">Content Pieces</span>
<span className="text-2xl font-bold text-primary">{balance.credits}</span>
</div>
</div>
@@ -69,7 +69,7 @@ export default function CreditBalanceWidget() {
</div>
{error && (
<div className="mt-2 text-xs text-amber-600 dark:text-amber-400">
Balance may be outdated. {error}
Usage may be outdated. {error}
</div>
)}
</div>

6
frontend/src/components/dashboard/UsageChartWidget.tsx
View File

@@ -36,7 +36,7 @@ export default function UsageChartWidget() {
return (
<ComponentCard
title="Usage Summary"
desc="Credit usage breakdown by operation and model"
desc="Usage breakdown by operation and model"
>
<div className="space-y-4">
<div className="flex justify-end items-center mb-4">
@@ -53,7 +53,7 @@ export default function UsageChartWidget() {
<div className="grid grid-cols-2 gap-4">
<div>
<div className="text-sm text-gray-600 dark:text-gray-400">Total Credits Used</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Content Created</div>
<div className="text-2xl font-bold">{usageSummary.total_credits_used}</div>
</div>
<div>
@@ -68,7 +68,7 @@ export default function UsageChartWidget() {
{usageSummary.by_operation && Object.entries(usageSummary.by_operation).map(([op, stats]) => (
<div key={op} className="flex justify-between items-center text-sm">
<span className="capitalize">{op.replace('_', ' ')}</span>
<span className="font-medium">{stats.credits} credits (${(Number(stats.cost) || 0).toFixed(2)})</span>
<span className="font-medium">{stats.credits} operations (${(Number(stats.cost) || 0).toFixed(2)})</span>
</div>
))}
{(!usageSummary.by_operation || Object.keys(usageSummary.by_operation || {}).length === 0) && (

2
frontend/src/components/ui/pricing-table/index.tsx
View File

@@ -194,7 +194,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
<li className="flex items-start gap-2">
<Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
<span className="text-xs text-gray-600 dark:text-gray-400">
{plan.included_credits.toLocaleString()} Credits/month
{plan.included_credits.toLocaleString()} Content pieces/month
</span>
</li>
)}