Section 1 & 2 - #Migration Run

frontend/src/components/dashboard/CreditAvailabilityWidget.tsx

@@ -15,6 +15,7 @@ import {
 interface CreditAvailabilityWidgetProps {
   availableCredits: number;
   totalCredits: number;
+  usedCredits?: number;  // Actual credits used this month from API
   loading?: boolean;
 }
 
@@ -29,10 +30,17 @@ const OPERATION_COSTS = {
 export default function CreditAvailabilityWidget({ 
   availableCredits, 
   totalCredits,
+  usedCredits: usedCreditsFromApi,
   loading = false 
 }: CreditAvailabilityWidgetProps) {
-  const usedCredits = totalCredits - availableCredits;
-  const usagePercent = totalCredits > 0 ? Math.round((usedCredits / totalCredits) * 100) : 0;
+  // Use actual used credits from API if provided, otherwise calculate
+  // Note: availableCredits may include purchased credits beyond plan allocation
+  const usedCredits = usedCreditsFromApi ?? 0;
+  
+  // Calculate usage percentage based on plan allocation
+  // If available > plan, user has extra credits (purchased or carried over)
+  const usagePercent = totalCredits > 0 ? Math.min(Math.round((usedCredits / totalCredits) * 100), 100) : 0;
+  const remainingPercent = Math.max(100 - usagePercent, 0);
   
   // Calculate available operations
   const availableOps = Object.entries(OPERATION_COSTS).map(([key, config]) => ({
@@ -72,11 +80,11 @@ export default function CreditAvailabilityWidget({
             className={`h-2 rounded-full transition-all ${
               usagePercent > 90 ? 'bg-error-500' : usagePercent > 75 ? 'bg-warning-500' : 'bg-success-500'
             }`}
-            style={{ width: `${Math.max(100 - usagePercent, 0)}%` }}
+            style={{ width: `${remainingPercent}%` }}
           ></div>
         </div>
         <p className="text-xs text-gray-600 dark:text-gray-400">
-          {totalCredits > 0 ? `${usedCredits.toLocaleString()} of ${totalCredits.toLocaleString()} used (${usagePercent}%)` : 'No credits allocated'}
+          {totalCredits > 0 ? `${usedCredits.toLocaleString()} of ${totalCredits.toLocaleString()} used this month (${usagePercent}%)` : 'No credits allocated'}
         </p>
       </div>
 

frontend/src/components/dashboard/StandardizedModuleWidget.tsx

@@ -87,8 +87,8 @@ export default function StandardizedModuleWidget({
   ];
 
   // Define Writer pipeline - using correct content structure
-  // Content has status: draft, review, published
-  // totalContent = drafts + review + published
+  // Content has status: draft, review, approved, published
+  // totalContent = drafts + review + approved + published
   // Get writer colors from config
   const writerColors = useMemo(() => getPipelineColors('writer'), []);
   

frontend/src/components/dashboard/WorkflowCompletionWidget.tsx

@@ -139,7 +139,7 @@ export default function WorkflowCompletionWidget({
   ];
 
   // Define writer items - using "Content Pages" not "Articles"
-  // Total content = drafts + review + published
+  // Total content = drafts + review + approved + published
   const totalContent = writer.contentDrafts + writer.contentReview + writer.contentPublished;
   const writerItems = [
     { label: 'Content Pages', value: totalContent, barColor: `var(${WORKFLOW_COLORS.writer.contentPages})` },