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

22
frontend/src/pages/Settings/CreditsAndBilling.tsx
View File

@@ -1,6 +1,6 @@
/**
* Credits & Billing Page
* User-facing credits usage, transactions, and billing information
* Usage & Billing Page
* User-facing usage overview, transactions, and billing information
*/
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
@@ -67,7 +67,7 @@ const CreditsAndBilling: React.FC = () => {
if (loading) {
return (
<div className="p-6">
<PageMeta title="Credits & Billing" description="Manage your credits and billing" />
<PageMeta title="Usage & Billing" description="View your usage and billing" />
<div className="text-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
<p className="mt-4 text-gray-600 dark:text-gray-400">Loading billing data...</p>
@@ -78,32 +78,32 @@ const CreditsAndBilling: React.FC = () => {
return (
<div className="p-6">
<PageMeta title="Credits & Billing" description="Manage your credits and billing" />
<PageMeta title="Usage & Billing" description="View your usage and billing" />
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Credits & Billing</h1>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Usage & Billing</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Manage your credits, view transactions, and monitor usage
View your content usage and billing history
</p>
</div>
<Link to="/account/purchase-credits">
<Link to="/account/plans">
<Button variant="primary">
Purchase Credits
Manage Plan
</Button>
</Link>
</div>
{/* Credit Balance Cards */}
{/* Balance Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<EnhancedMetricCard
title="Current Balance"
title="Content Remaining"
value={balance?.balance || 0}
icon={<BoltIcon />}
accentColor="orange"
/>
<EnhancedMetricCard
title="Monthly Credits"
title="Monthly Allowance"
value={balance?.monthly_credits || 0}
subtitle={balance?.subscription_plan || 'No plan'}
icon={<CheckCircleIcon />}

23
frontend/src/pages/Settings/Plans.tsx
View File

@@ -51,23 +51,22 @@ const formatWordCount = (num: number): string => {
return num.toString();
};
// Extract major features from plan data - SAME AS MARKETING PAGE
// Extract major features from plan data - SIMPLIFIED VERSION
const extractFeatures = (plan: Plan): string[] => {
const features: string[] = [];
// Content pieces is the main metric now (using included_credits as content pieces)
if (plan.included_credits) features.push(`${formatNumber(plan.included_credits)} Pages/Articles per month`);
if (plan.max_sites) features.push(`${plan.max_sites === 999999 ? 'Unlimited' : plan.max_sites} Site${plan.max_sites > 1 ? 's' : ''}`);
if (plan.max_users) features.push(`${plan.max_users} Team User${plan.max_users > 1 ? 's' : ''}`);
if (plan.included_credits) features.push(`${formatNumber(plan.included_credits)} Monthly Credits`);
if (plan.monthly_word_count_limit) features.push(`${formatWordCount(plan.monthly_word_count_limit)} Words/Month`);
if (plan.max_clusters) features.push(`${plan.max_clusters} AI Keyword Clusters`);
if (plan.max_content_ideas) features.push(`${formatNumber(plan.max_content_ideas)} Content Ideas`);
if (plan.monthly_image_count) {
// Try to split into basic/premium if data available, otherwise show total
const basicImages = Math.floor(plan.monthly_image_count * 0.8);
const premiumImages = Math.floor(plan.monthly_image_count * 0.2);
features.push(`${formatNumber(basicImages)} Basic / ${formatNumber(premiumImages)} Premium Images`);
}
if (plan.daily_image_generation_limit) features.push(`${formatNumber(plan.daily_image_generation_limit)} Image Prompts`);
// Include features as checkmarks
features.push('AI Keyword Clustering');
features.push('AI Content Ideas');
features.push('AI Image Generation');
features.push('Internal Linking');
features.push('SEO Optimization');
features.push('WordPress Publishing');
return features;
};