docs & ux improvmeents

frontend/src/pages/Billing/Credits.tsx

@@ -6,20 +6,7 @@ import { getCreditBalance, CreditBalance } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
-import { DollarLineIcon } from '../../icons';
-
-// Credit costs per operation (Phase 0: Credit-only system)
-const CREDIT_COSTS: Record<string, { cost: number | string; description: string }> = {
-  clustering: { cost: 10, description: 'Per clustering request' },
-  idea_generation: { cost: 15, description: 'Per cluster → ideas request' },
-  content_generation: { cost: '1 per 100 words', description: 'Per 100 words generated' },
-  image_prompt_extraction: { cost: 2, description: 'Per content piece' },
-  image_generation: { cost: 5, description: 'Per image generated' },
-  linking: { cost: 8, description: 'Per content piece' },
-  optimization: { cost: '1 per 200 words', description: 'Per 200 words optimized' },
-  site_structure_generation: { cost: 50, description: 'Per site blueprint' },
-  site_page_generation: { cost: 20, description: 'Per page generated' },
-};
+import { ArrowUpIcon } from '../../icons';
 
 export default function Credits() {
   const toast = useToast();
@@ -36,7 +23,7 @@ export default function Credits() {
       const data = await getCreditBalance();
       setBalance(data);
     } catch (error: any) {
-      toast.error(`Failed to load credit balance: ${error.message}`);
+      toast.error(`Failed to load content usage: ${error.message}`);
     } finally {
       setLoading(false);
     }
@@ -45,7 +32,7 @@ export default function Credits() {
   if (loading) {
     return (
       <div className="p-6">
-        <PageMeta title="Credits" />
+        <PageMeta title="Content Usage" />
         <div className="flex items-center justify-center h-64">
           <div className="text-gray-500">Loading...</div>
         </div>
@@ -55,15 +42,15 @@ export default function Credits() {
 
   return (
     <div className="p-6">
-      <PageMeta title="Credits" />
+      <PageMeta title="Content Usage" />
       <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Balance</h1>
-          <p className="text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and usage</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Content Usage</h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">Track your monthly content allowance</p>
         </div>
-        <Link to="/account/purchase-credits">
-          <Button variant="primary" startIcon={<DollarLineIcon className="w-4 h-4" />}>
-            Purchase Credits
+        <Link to="/account/plans">
+          <Button variant="primary" startIcon={<ArrowUpIcon className="w-4 h-4" />}>
+            Manage Plan
           </Button>
         </Link>
       </div>
@@ -72,23 +59,23 @@ export default function Credits() {
         <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 Remaining</h3>
             </div>
             <div className="text-3xl font-bold text-gray-900 dark:text-white">
               {(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">Pieces available this month</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 || '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>
 
@@ -106,18 +93,42 @@ export default function Credits() {
         </div>
       )}
 
-      {/* Credit Costs Reference */}
+      {/* What's Included */}
       <div className="mt-8">
         <Card className="p-6">
-          <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">What's Included Per Content Piece</h2>
           <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-            Understanding how credits are consumed for each operation type
+            Every content piece you create includes all of these features
           </p>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {Object.entries(CREDIT_COSTS).map(([operation, info]) => (
-              <div key={operation} className="flex items-start justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                <div className="flex-1">
-                  <div className="font-medium text-gray-900 dark:text-white capitalize">
+            {[
+              { name: 'AI Keyword Clustering', desc: 'Smart keyword grouping' },
+              { name: 'AI Content Ideas', desc: 'Topic suggestions from keywords' },
+              { name: 'AI Content Writing', desc: '1000-2000 word articles' },
+              { name: 'AI Images', desc: '1 featured + 2 in-article images' },
+              { name: 'Internal Linking', desc: 'Smart link suggestions' },
+              { name: 'SEO Optimization', desc: 'Meta tags & readability' },
+              { name: 'WordPress Publishing', desc: 'Direct publish to your site' },
+              { name: 'Multiple Formats', desc: 'Pages, articles, product content' },
+            ].map((feature) => (
+              <div key={feature.name} className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                <div className="w-5 h-5 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center flex-shrink-0 mt-0.5">
+                  <svg className="w-3 h-3 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <div>
+                  <div className="font-medium text-gray-900 dark:text-white">{feature.name}</div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400">{feature.desc}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
                     {operation.replace(/_/g, ' ')}
                   </div>
                   <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">