From ab6b6cc4be8f6a49da18268ddcf732461b9b4c70 Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Sun, 16 Nov 2025 19:06:48 +0000
Subject: [PATCH] Phase 0: Add credit costs display to Credits page

- Added credit costs reference table to Credits page
- Shows cost per operation type with descriptions
- Consistent with Usage page credit costs display
- Helps users understand credit consumption
---
 frontend/src/pages/Billing/Credits.tsx | 42 ++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/frontend/src/pages/Billing/Credits.tsx b/frontend/src/pages/Billing/Credits.tsx
index 1aeea780..bb7e66b0 100644
--- a/frontend/src/pages/Billing/Credits.tsx
+++ b/frontend/src/pages/Billing/Credits.tsx
@@ -5,6 +5,19 @@ import { fetchCreditBalance, CreditBalance } from '../../services/api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 
+// 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' },
+};
+
 export default function Credits() {
   const toast = useToast();
   const [balance, setBalance] = useState<CreditBalance | null>(null);
@@ -88,6 +101,35 @@ export default function Credits() {
           </Card>
         </div>
       )}
+
+      {/* Credit Costs Reference */}
+      <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>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            Understanding how credits are consumed for each operation type
+          </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">
+                    {operation.replace(/_/g, ' ')}
+                  </div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                    {info.description}
+                  </div>
+                </div>
+                <div className="ml-4 text-right">
+                  <Badge variant="light" color="primary" className="font-semibold">
+                    {typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
+                  </Badge>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
     </div>
   );
 }