Section 2 COmpleted

frontend/src/pages/Sites/Dashboard.tsx

@@ -10,21 +10,18 @@ import PageHeader from '../../components/common/PageHeader';
 import ComponentCard from '../../components/common/ComponentCard';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
-import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { fetchAPI } from '../../services/api';
-// import { fetchSiteBlueprints } from '../../services/api';
-import SiteProgressWidget from '../../components/sites/SiteProgressWidget';
+import { fetchAPI, fetchSiteSectors } from '../../services/api';
+import SiteSetupChecklist from '../../components/sites/SiteSetupChecklist';
+import { integrationApi } from '../../services/integration.api';
 import { 
-  EyeIcon, 
   FileIcon, 
   PlugInIcon, 
-  ArrowUpIcon,
-  CalendarIcon,
   GridIcon,
   BoltIcon,
   PageIcon,
-  ArrowRightIcon
+  ArrowRightIcon,
+  ArrowUpIcon
 } from '../../icons';
 
 interface Site {
@@ -38,19 +35,15 @@ interface Site {
   created_at: string;
   updated_at: string;
   domain?: string;
+  industry?: string;
+  industry_name?: string;
 }
 
-interface SiteStats {
-  total_pages: number;
-  published_pages: number;
-  draft_pages: number;
-  total_content: number;
-  published_content: number;
-  integrations_count: number;
-  deployments_count: number;
-  last_deployment?: string;
-  views_count?: number;
-  visitors_count?: number;
+interface SiteSetupState {
+  hasIndustry: boolean;
+  hasSectors: boolean;
+  hasWordPressIntegration: boolean;
+  hasKeywords: boolean;
 }
 
 export default function SiteDashboard() {
@@ -58,8 +51,12 @@ export default function SiteDashboard() {
   const navigate = useNavigate();
   const toast = useToast();
   const [site, setSite] = useState<Site | null>(null);
-  const [stats, setStats] = useState<SiteStats | null>(null);
-  const [blueprints, setBlueprints] = useState<any[]>([]);
+  const [setupState, setSetupState] = useState<SiteSetupState>({
+    hasIndustry: false,
+    hasSectors: false,
+    hasWordPressIntegration: false,
+    hasKeywords: false,
+  });
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -71,22 +68,49 @@ export default function SiteDashboard() {
   const loadSiteData = async () => {
     try {
       setLoading(true);
-      const [siteData, statsData] = await Promise.all([
-        fetchAPI(`/v1/auth/sites/${siteId}/`),
-        fetchSiteStats(),
-        // fetchSiteBlueprints({ site_id: Number(siteId) }),
-      ]);
       
+      // Load site data
+      const siteData = await fetchAPI(`/v1/auth/sites/${siteId}/`);
       if (siteData) {
         setSite(siteData);
-      }
-      
-      if (statsData) {
-        setStats(statsData);
-      }
-
-      if (blueprintsData && blueprintsData.results) {
-        setBlueprints(blueprintsData.results);
+        
+        // Check setup state
+        const hasIndustry = !!siteData.industry || !!siteData.industry_name;
+        
+        // Load sectors
+        let hasSectors = false;
+        try {
+          const sectors = await fetchSiteSectors(Number(siteId));
+          hasSectors = sectors && sectors.length > 0;
+        } catch (err) {
+          console.log('Could not load sectors');
+        }
+        
+        // Check WordPress integration
+        let hasWordPressIntegration = false;
+        try {
+          const wpIntegration = await integrationApi.getWordPressIntegration(Number(siteId));
+          hasWordPressIntegration = !!wpIntegration;
+        } catch (err) {
+          // No integration is fine
+        }
+        
+        // Check keywords - try to load keywords for this site
+        let hasKeywords = false;
+        try {
+          const { fetchKeywords } = await import('../../services/api');
+          const keywordsData = await fetchKeywords({ site_id: Number(siteId), page_size: 1 });
+          hasKeywords = keywordsData?.results?.length > 0 || keywordsData?.count > 0;
+        } catch (err) {
+          // No keywords is fine
+        }
+        
+        setSetupState({
+          hasIndustry,
+          hasSectors,
+          hasWordPressIntegration,
+          hasKeywords,
+        });
       }
     } catch (error: any) {
       toast.error(`Failed to load site data: ${error.message}`);
@@ -95,25 +119,6 @@ export default function SiteDashboard() {
     }
   };
 
-  const fetchSiteStats = async (): Promise<SiteStats | null> => {
-    try {
-      // TODO: Create backend endpoint for site stats
-      // For now, return mock data structure
-      return {
-        total_pages: 0,
-        published_pages: 0,
-        draft_pages: 0,
-        total_content: 0,
-        published_content: 0,
-        integrations_count: 0,
-        deployments_count: 0,
-      };
-    } catch (error) {
-      console.error('Error fetching site stats:', error);
-      return null;
-    }
-  };
-
   if (loading) {
     return (
       <div className="p-6">
@@ -139,51 +144,6 @@ export default function SiteDashboard() {
     );
   }
 
-  const statCards = [
-    {
-      title: 'Total Pages',
-      value: stats?.total_pages || 0,
-      icon: <FileIcon />,
-      accentColor: 'blue' as const,
-      href: `/sites/${siteId}/pages`,
-    },
-    {
-      title: 'Published Pages',
-      value: stats?.published_pages || 0,
-      icon: <GridIcon />,
-      accentColor: 'success' as const,
-      href: `/sites/${siteId}/pages?status=published`,
-    },
-    {
-      title: 'Draft Pages',
-      value: stats?.draft_pages || 0,
-      icon: <FileIcon />,
-      accentColor: 'orange' as const,
-      href: `/sites/${siteId}/pages?status=draft`,
-    },
-    {
-      title: 'Integrations',
-      value: stats?.integrations_count || 0,
-      icon: <PlugInIcon />,
-      accentColor: 'purple' as const,
-      href: `/sites/${siteId}/settings?tab=integrations`,
-    },
-    {
-      title: 'Deployments',
-      value: stats?.deployments_count || 0,
-      icon: <ArrowUpIcon />,
-      accentColor: 'blue' as const,
-      href: `/sites/${siteId}/preview`,
-    },
-    {
-      title: 'Total Content',
-      value: stats?.total_content || 0,
-      icon: <FileIcon />,
-      accentColor: 'purple' as const,
-      href: `/sites/${siteId}/content`,
-    },
-  ];
-
   return (
     <div className="p-6">
       <PageMeta title={`${site.name} - Dashboard`} />
@@ -212,34 +172,18 @@ export default function SiteDashboard() {
         </div>
       </div>
 
-      {/* Stage 3: Site Progress Widget */}
-      {blueprints.length > 0 && (
-        <div className="mb-6">
-          {blueprints.map((blueprint) => (
-            <SiteProgressWidget
-              key={blueprint.id}
-              blueprintId={blueprint.id}
-              siteId={Number(siteId)}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Stats Grid - Using EnhancedMetricCard */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
-        {statCards.map((stat, index) => (
-          <EnhancedMetricCard
-            key={index}
-            title={stat.title}
-            value={stat.value}
-            icon={stat.icon}
-            accentColor={stat.accentColor}
-            href={stat.href}
-          />
-        ))}
+      {/* Site Setup Checklist */}
+      <div className="mb-6">
+        <SiteSetupChecklist
+          siteId={Number(siteId)}
+          siteName={site.name}
+          hasIndustry={setupState.hasIndustry}
+          hasSectors={setupState.hasSectors}
+          hasWordPressIntegration={setupState.hasWordPressIntegration}
+          hasKeywords={setupState.hasKeywords}
+        />
       </div>
 
-
       {/* Quick Actions */}
       <ComponentCard title="Quick Actions" desc="Common site management tasks">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -315,34 +259,14 @@ export default function SiteDashboard() {
         </div>
       </ComponentCard>
 
-      {/* Recent Activity */}
-      <Card className="p-6">
+      {/* Recent Activity - Placeholder */}
+      <Card className="p-6 mt-6">
         <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
           Recent Activity
         </h2>
-        <div className="space-y-3">
-          {stats?.last_deployment ? (
-            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-              <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md">
-                <CalendarIcon className="h-5 w-5" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-gray-900 dark:text-white">
-                  Last Deployment
-                </p>
-                <p className="text-xs text-gray-600 dark:text-gray-400">
-                  {new Date(stats.last_deployment).toLocaleString()}
-                </p>
-              </div>
-            </div>
-          ) : (
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              No recent activity
-            </p>
-          )}
-        </div>
-      </Card>
-    </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          No recent activity
+        </p>
   );
 }