From 2c4cf6a0f5592692025a34b7ee2a6dd2912a3fca Mon Sep 17 00:00:00 2001
From: alorig <220087330+alorig@users.noreply.github.com>
Date: Mon, 24 Nov 2025 12:12:20 +0500
Subject: [PATCH] 1

---
 .../components/sites/SiteProgressWidget.tsx   | 56 ++++++++++++++-----
 frontend/src/services/api.ts                  |  6 +-
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/sites/SiteProgressWidget.tsx b/frontend/src/components/sites/SiteProgressWidget.tsx
index 3d962423..3d35291d 100644
--- a/frontend/src/components/sites/SiteProgressWidget.tsx
+++ b/frontend/src/components/sites/SiteProgressWidget.tsx
@@ -87,6 +87,28 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
     );
   }
 
+  const clusterCoverage: NonNullable<SiteProgress['cluster_coverage']> =
+    progress.cluster_coverage ?? {
+      total_clusters: 0,
+      covered_clusters: 0,
+      details: [] as NonNullable<SiteProgress['cluster_coverage']>['details'],
+    };
+
+  const taxonomyCoverage: NonNullable<SiteProgress['taxonomy_coverage']> =
+    progress.taxonomy_coverage ?? {
+      total_taxonomies: 0,
+      defined_taxonomies: 0,
+      details: [] as NonNullable<SiteProgress['taxonomy_coverage']>['details'],
+    };
+
+  const validationFlags: NonNullable<SiteProgress['validation_flags']> =
+    progress.validation_flags ?? {
+      clusters_attached: false,
+      taxonomies_defined: false,
+      sitemap_generated: false,
+      all_pages_generated: false,
+    };
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'complete':
@@ -126,19 +148,19 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
         <div className="text-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
           <div className="text-2xl font-bold text-gray-900 dark:text-white">
-            {progress.cluster_coverage.covered_clusters}/{progress.cluster_coverage.total_clusters}
+            {clusterCoverage.covered_clusters}/{clusterCoverage.total_clusters}
           </div>
           <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">Clusters Covered</div>
         </div>
         <div className="text-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
           <div className="text-2xl font-bold text-gray-900 dark:text-white">
-            {progress.taxonomy_coverage.defined_taxonomies}/{progress.taxonomy_coverage.total_taxonomies}
+            {taxonomyCoverage.defined_taxonomies}/{taxonomyCoverage.total_taxonomies}
           </div>
           <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">Taxonomies Defined</div>
         </div>
         <div className="text-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
           <div className="text-2xl font-bold text-gray-900 dark:text-white">
-            {progress.validation_flags.all_pages_generated ? '✓' : '✗'}
+            {validationFlags.all_pages_generated ? '✓' : '✗'}
           </div>
           <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">All Pages Generated</div>
         </div>
@@ -149,10 +171,14 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
         <h4 id="cluster-coverage-title" className="text-sm font-semibold text-gray-700 dark:text-gray-300">
           Cluster Coverage
         </h4>
-        {progress.cluster_coverage.details && progress.cluster_coverage.details.length > 0 ? (
-          progress.cluster_coverage.details.map((cluster) => {
-          const totalPages = cluster.hub_pages + cluster.supporting_pages + cluster.attribute_pages;
-          const completionPercent = totalPages > 0 ? Math.min(100, (cluster.content_count / totalPages) * 100) : 0;
+        {clusterCoverage.details && clusterCoverage.details.length > 0 ? (
+          clusterCoverage.details.map((cluster) => {
+          const hubPages = cluster.hub_pages ?? 0;
+          const supportingPages = cluster.supporting_pages ?? 0;
+          const attributePages = cluster.attribute_pages ?? 0;
+          const contentCount = cluster.content_count ?? 0;
+          const totalPages = hubPages + supportingPages + attributePages;
+          const completionPercent = totalPages > 0 ? Math.min(100, (contentCount / totalPages) * 100) : 0;
           
           return (
             <div
@@ -179,7 +205,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
                     )}
                   </div>
                   <div className="text-xs text-gray-600 dark:text-gray-400">
-                    {cluster.content_count} content / {totalPages} pages
+                    {contentCount} content / {totalPages} pages
                   </div>
                 </div>
                 <button
@@ -212,15 +238,15 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
               {/* Page Type Breakdown */}
               <div className="grid grid-cols-3 gap-2 mt-3 text-xs">
                 <div className="text-center p-2 bg-white dark:bg-gray-700 rounded">
-                  <div className="font-medium text-gray-900 dark:text-white">{cluster.hub_pages}</div>
+                  <div className="font-medium text-gray-900 dark:text-white">{hubPages}</div>
                   <div className="text-gray-600 dark:text-gray-400">Hub</div>
                 </div>
                 <div className="text-center p-2 bg-white dark:bg-gray-700 rounded">
-                  <div className="font-medium text-gray-900 dark:text-white">{cluster.supporting_pages}</div>
+                  <div className="font-medium text-gray-900 dark:text-white">{supportingPages}</div>
                   <div className="text-gray-600 dark:text-gray-400">Supporting</div>
                 </div>
                 <div className="text-center p-2 bg-white dark:bg-gray-700 rounded">
-                  <div className="font-medium text-gray-900 dark:text-white">{cluster.attribute_pages}</div>
+                  <div className="font-medium text-gray-900 dark:text-white">{attributePages}</div>
                   <div className="text-gray-600 dark:text-gray-400">Attribute</div>
                 </div>
               </div>
@@ -259,7 +285,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
         </h4>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div className="flex items-center gap-2">
-            {progress.validation_flags.clusters_attached ? (
+            {validationFlags.clusters_attached ? (
               <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
             ) : (
               <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
@@ -267,7 +293,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
             <span className="text-sm text-gray-700 dark:text-gray-300">Clusters Attached</span>
           </div>
           <div className="flex items-center gap-2">
-            {progress.validation_flags.taxonomies_defined ? (
+            {validationFlags.taxonomies_defined ? (
               <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
             ) : (
               <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
@@ -275,7 +301,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
             <span className="text-sm text-gray-700 dark:text-gray-300">Taxonomies Defined</span>
           </div>
           <div className="flex items-center gap-2">
-            {progress.validation_flags.sitemap_generated ? (
+            {validationFlags.sitemap_generated ? (
               <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
             ) : (
               <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
@@ -283,7 +309,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
             <span className="text-sm text-gray-700 dark:text-gray-300">Sitemap Generated</span>
           </div>
           <div className="flex items-center gap-2">
-            {progress.validation_flags.all_pages_generated ? (
+            {validationFlags.all_pages_generated ? (
               <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
             ) : (
               <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 34370ee1..6ac0ab3b 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -2188,7 +2188,7 @@ export interface SiteProgress {
   blueprint_id: number;
   blueprint_name: string;
   overall_status: 'in_progress' | 'complete' | 'blocked';
-  cluster_coverage: {
+  cluster_coverage?: {
     total_clusters: number;
     covered_clusters: number;
     details: Array<{
@@ -2205,12 +2205,12 @@ export interface SiteProgress {
       is_complete: boolean;
     }>;
   };
-  taxonomy_coverage: {
+  taxonomy_coverage?: {
     total_taxonomies: number;
     defined_taxonomies: number;
     details: any[];
   };
-  validation_flags: {
+  validation_flags?: {
     clusters_attached: boolean;
     taxonomies_defined: boolean;
     sitemap_generated: boolean;