Phase 0: Update billing pages to show credits and credit costs

- Updated Usage page to show only credits and account management limits
- Removed plan operation limit displays (planner, writer, images)
- Added credit costs reference table showing cost per operation type
- Updated limit cards to handle null limits (for current balance display)
- Improved UI to focus on credit-only system

frontend/src/pages/Billing/Usage.tsx

@@ -5,6 +5,19 @@ import { fetchCreditUsage, CreditUsageLog, fetchUsageLimits, LimitCard } from '.
 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 Usage() {
   const toast = useToast();
   const [usageLogs, setUsageLogs] = useState<CreditUsageLog[]>([]);
@@ -33,13 +46,8 @@ export default function Usage() {
     try {
       setLimitsLoading(true);
       const response = await fetchUsageLimits();
-      console.log('Usage limits response:', response);
       setLimits(response.limits || []);
-      if (!response.limits || response.limits.length === 0) {
-        console.warn('No limits data received from API');
-      }
     } catch (error: any) {
-      console.error('Error loading usage limits:', error);
       toast.error(`Failed to load usage limits: ${error.message}`);
       setLimits([]);
     } finally {
@@ -47,120 +55,82 @@ export default function Usage() {
     }
   };
 
-  const groupedLimits = {
+  // Filter limits to show only credits and account management (Phase 0: Credit-only system)
-    planner: limits.filter(l => l.category === 'planner'),
+  const creditLimits = limits.filter(l => l.category === 'credits');
-    writer: limits.filter(l => l.category === 'writer'),
+  const accountLimits = limits.filter(l => l.category === 'account');
-    images: limits.filter(l => l.category === 'images'),
-    ai: limits.filter(l => l.category === 'ai'),
-    general: limits.filter(l => l.category === 'general'),
-  };
-
-  // Debug info
-  console.log('[Usage Component] Render state:', {
-    limitsLoading,
-    limitsCount: limits.length,
-    groupedLimits,
-    plannerCount: groupedLimits.planner.length,
-    writerCount: groupedLimits.writer.length,
-    imagesCount: groupedLimits.images.length,
-    aiCount: groupedLimits.ai.length,
-    generalCount: groupedLimits.general.length,
-  });
 
   return (
     <div className="p-6">
-      <PageMeta title="Usage" description="Monitor your plan limits and usage statistics" />
+      <PageMeta title="Usage" description="Monitor your credit usage and account limits" />
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Acoount Limits Usage 12</h1>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Usage & Limits</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">Monitor your plan limits and usage statistics</p>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">Monitor your credit usage and account management limits</p>
       </div>
 
-      {/* Debug Info - Remove in production */}
+      {/* Credit Costs Reference */}
-      {import.meta.env.DEV && (
+      <Card className="p-6 mb-6">
-        <Card className="p-4 mb-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
+        <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
-          <div className="text-xs text-gray-600 dark:text-gray-400">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <strong>Debug:</strong> Loading={limitsLoading ? 'Yes' : 'No'}, Limits={limits.length}, 
+          {Object.entries(CREDIT_COSTS).map(([operation, info]) => (
-            Planner={groupedLimits.planner.length}, Writer={groupedLimits.writer.length}, 
+            <div key={operation} className="flex items-start justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-            Images={groupedLimits.images.length}, AI={groupedLimits.ai.length}, General={groupedLimits.general.length}
+              <div className="flex-1">
-          </div>
+                <div className="font-medium text-gray-900 dark:text-white capitalize">
-        </Card>
+                  {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>
 
-      {/* Limit Cards by Category */}
+      {/* Credit Limits */}
       {limitsLoading ? (
         <Card className="p-6 mb-8">
           <div className="flex items-center justify-center h-32">
             <div className="text-gray-500">Loading limits...</div>
           </div>
         </Card>
-      ) : limits.length === 0 ? (
-        <Card className="p-6 mb-8">
-          <div className="text-center text-gray-500 dark:text-gray-400">
-            <p className="mb-2 font-medium">No usage limits data available.</p>
-            <p className="text-sm">The API endpoint may not be responding or your account may not have a plan configured.</p>
-            <p className="text-xs mt-2 text-gray-400">Check browser console for errors. Endpoint: /v1/billing/credits/usage/limits/</p>
-          </div>
-        </Card>
       ) : (
         <div className="space-y-6 mb-8">
-          {/* Planner Limits */}
+          {/* Credit Usage Limits */}
-          {groupedLimits.planner.length > 0 && (
+          {creditLimits.length > 0 && (
             <div>
-              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Planner Limits</h2>
+              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Usage</h2>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                {groupedLimits.planner.map((limit, idx) => (
+                {creditLimits.map((limit, idx) => (
                   <LimitCardComponent key={idx} limit={limit} />
                 ))}
               </div>
             </div>
           )}
 
-          {/* Writer Limits */}
+          {/* Account Management Limits */}
-          {groupedLimits.writer.length > 0 && (
+          {accountLimits.length > 0 && (
             <div>
-              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Writer Limits</h2>
+              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Account Management</h2>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                {groupedLimits.writer.map((limit, idx) => (
+                {accountLimits.map((limit, idx) => (
                   <LimitCardComponent key={idx} limit={limit} />
                 ))}
               </div>
             </div>
           )}
 
-          {/* Image Limits */}
+          {creditLimits.length === 0 && accountLimits.length === 0 && (
-          {groupedLimits.images.length > 0 && (
+            <Card className="p-6">
-            <div>
+              <div className="text-center text-gray-500 dark:text-gray-400">
-              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Image Generation Limits</h2>
+                <p className="mb-2 font-medium">No limits data available.</p>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <p className="text-sm">Your account may not have a plan configured.</p>
-                {groupedLimits.images.map((limit, idx) => (
-                  <LimitCardComponent key={idx} limit={limit} />
-                ))}
               </div>
-            </div>
+            </Card>
-          )}
-
-          {/* AI Credits */}
-          {groupedLimits.ai.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">AI Credits</h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                {groupedLimits.ai.map((limit, idx) => (
-                  <LimitCardComponent key={idx} limit={limit} />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* General Limits */}
-          {groupedLimits.general.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">General Limits</h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                {groupedLimits.general.map((limit, idx) => (
-                  <LimitCardComponent key={idx} limit={limit} />
-                ))}
-              </div>
-            </div>
           )}
         </div>
       )}
@@ -219,22 +189,20 @@ export default function Usage() {
 function LimitCardComponent({ limit }: { limit: LimitCard }) {
   const getCategoryColor = (category: string) => {
     switch (category) {
-      case 'planner': return 'blue';
+      case 'credits': return 'primary';
-      case 'writer': return 'green';
+      case 'account': return 'gray';
-      case 'images': return 'purple';
-      case 'ai': return 'orange';
-      case 'general': return 'gray';
       default: return 'gray';
     }
   };
 
-  const getUsageStatus = (percentage: number) => {
+  const getUsageStatus = (percentage: number | null) => {
+    if (percentage === null) return 'info';
     if (percentage >= 90) return 'danger';
     if (percentage >= 75) return 'warning';
     return 'success';
   };
 
-  const percentage = Math.min(limit.percentage, 100);
+  const percentage = limit.percentage !== null && limit.percentage !== undefined ? Math.min(limit.percentage, 100) : null;
   const status = getUsageStatus(percentage);
   const color = getCategoryColor(limit.category);
   
@@ -242,12 +210,16 @@ function LimitCardComponent({ limit }: { limit: LimitCard }) {
     ? 'bg-red-500' 
     : status === 'warning' 
     ? 'bg-yellow-500' 
+    : status === 'info'
+    ? 'bg-blue-500'
     : 'bg-green-500';
   
   const statusTextColor = status === 'danger'
     ? 'text-red-600 dark:text-red-400'
     : status === 'warning'
     ? 'text-yellow-600 dark:text-yellow-400'
+    : status === 'info'
+    ? 'text-blue-600 dark:text-blue-400'
     : 'text-green-600 dark:text-green-400';
 
   return (
@@ -258,26 +230,44 @@ function LimitCardComponent({ limit }: { limit: LimitCard }) {
       </div>
       <div className="mb-3">
         <div className="flex items-baseline gap-2">
-          <span className="text-2xl font-bold text-gray-900 dark:text-white">{limit.used.toLocaleString()}</span>
+          {limit.limit !== null && limit.limit !== undefined ? (
-          <span className="text-sm text-gray-500 dark:text-gray-400">/ {limit.limit.toLocaleString()}</span>
+            <>
-          <span className="text-xs text-gray-400 dark:text-gray-500">{limit.unit}</span>
+              <span className="text-2xl font-bold text-gray-900 dark:text-white">{limit.used.toLocaleString()}</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">/ {limit.limit.toLocaleString()}</span>
+            </>
+          ) : (
+            <span className="text-2xl font-bold text-gray-900 dark:text-white">
+              {limit.available !== null && limit.available !== undefined ? limit.available.toLocaleString() : limit.used.toLocaleString()}
+            </span>
+          )}
+          {limit.unit && (
+            <span className="text-xs text-gray-400 dark:text-gray-500">{limit.unit}</span>
+          )}
         </div>
-        <div className="mt-2">
+        {percentage !== null && (
-          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+          <div className="mt-2">
-            <div
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-              className={`h-2 rounded-full ${statusColorClass}`}
+              <div
-              style={{ width: `${percentage}%` }}
+                className={`h-2 rounded-full ${statusColorClass}`}
-            />
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
           </div>
-        </div>
+        )}
       </div>
       <div className="flex items-center justify-between text-xs">
-        <span className={statusTextColor}>
+        {limit.available !== null && limit.available !== undefined ? (
-          {limit.available.toLocaleString()} available
+          <span className={statusTextColor}>
-        </span>
+            {limit.available.toLocaleString()} available
-        <span className="text-gray-500 dark:text-gray-400">
+          </span>
-          {percentage.toFixed(1)}% used
+        ) : (
-        </span>
+          <span className="text-gray-500 dark:text-gray-400">Current value</span>
+        )}
+        {percentage !== null && (
+          <span className="text-gray-500 dark:text-gray-400">
+            {percentage.toFixed(1)}% used
+          </span>
+        )}
       </div>
     </Card>
   );