Phase 2, 2.1 and 2.2 complete

frontend/src/pages/Dashboard/Home.tsx

@@ -30,6 +30,10 @@ import AIOperationsWidget, { AIOperationsData } from "../../components/dashboard
 import RecentActivityWidget, { ActivityItem } from "../../components/dashboard/RecentActivityWidget";
 import ContentVelocityWidget, { ContentVelocityData } from "../../components/dashboard/ContentVelocityWidget";
 import AutomationStatusWidget, { AutomationData } from "../../components/dashboard/AutomationStatusWidget";
+import SitesOverviewWidget from "../../components/dashboard/SitesOverviewWidget";
+import CreditsUsageWidget from "../../components/dashboard/CreditsUsageWidget";
+import AccountInfoWidget from "../../components/dashboard/AccountInfoWidget";
+import { getSubscriptions, Subscription } from "../../services/billing.api";
 
 export default function Home() {
   const toast = useToast();
@@ -37,7 +41,7 @@ export default function Home() {
   const { activeSector } = useSectorStore();
   const { isGuideDismissed, showGuide, loadFromBackend } = useOnboardingStore();
   const { user } = useAuthStore();
-  const { loadBalance } = useBillingStore();
+  const { balance, loadBalance } = useBillingStore();
   const { setPageInfo } = usePageContext();
 
   // Core state
@@ -46,6 +50,7 @@ export default function Home() {
   const [siteFilter, setSiteFilter] = useState<'all' | number>('all');
   const [showAddSite, setShowAddSite] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [subscription, setSubscription] = useState<Subscription | null>(null);
 
   // Dashboard data state
   const [attentionItems, setAttentionItems] = useState<AttentionItem[]>([]);
@@ -107,9 +112,22 @@ export default function Home() {
   useEffect(() => {
     loadSites();
     loadBalance();
+    loadSubscription();
     loadFromBackend().catch(() => {});
   }, [loadFromBackend, loadBalance]);
 
+  // Load subscription info
+  const loadSubscription = async () => {
+    try {
+      const { results } = await getSubscriptions();
+      // Get the active subscription
+      const activeSubscription = results.find(s => s.status === 'active') || results[0] || null;
+      setSubscription(activeSubscription);
+    } catch (error) {
+      console.error('Failed to load subscription:', error);
+    }
+  };
+
   // Load active site if not set
   useEffect(() => {
     if (!activeSite && sites.length > 0) {
@@ -343,13 +361,38 @@ export default function Home() {
             onDismiss={handleDismissAttention}
           />
 
-          {/* Row 1: Workflow Pipeline (full width) */}
+          {/* Row 1: Sites Overview + Credits + Account (3 columns) */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
+            <SitesOverviewWidget 
+              sites={sites} 
+              loading={sitesLoading}
+              onAddSite={canAddMoreSites ? handleAddSiteClick : undefined}
+              maxSites={maxSites}
+            />
+            <CreditsUsageWidget 
+              balance={balance}
+              aiOperations={{
+                total: aiOperations.totals.count,
+                period: aiOperations.period === '7d' ? 'Last 7 days' : aiOperations.period === '30d' ? 'Last 30 days' : 'Last 90 days',
+              }}
+              loading={loading}
+            />
+            <AccountInfoWidget 
+              balance={balance}
+              subscription={subscription}
+              plan={subscription?.plan && typeof subscription.plan === 'object' ? subscription.plan : null}
+              userPlan={(user?.account as any)?.plan}
+              loading={loading}
+            />
+          </div>
+
+          {/* Row 2: Workflow Pipeline (full width) */}
           <WorkflowPipelineWidget data={pipelineData} loading={loading} />
 
-          {/* Row 2: Workflow Guide (full width) */}
+          {/* Row 3: Quick Actions (full width) */}
           <QuickActionsWidget />
 
-          {/* Row 3: AI Operations + Recent Activity */}
+          {/* Row 4: AI Operations + Recent Activity */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
             <AIOperationsWidget 
               data={aiOperations} 
@@ -359,7 +402,7 @@ export default function Home() {
             <RecentActivityWidget activities={recentActivity} loading={loading} />
           </div>
 
-          {/* Row 4: Content Velocity + Automation Status */}
+          {/* Row 5: Content Velocity + Automation Status */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
             <ContentVelocityWidget data={contentVelocity} loading={loading} />
             <AutomationStatusWidget