@pixelated-tech/components 3.5.13 → 3.6.0

package/dist/components/admin/site-health/site-health-google-analytics.integration.js

@@ -3,110 +3,4 @@
  * Server-side utilities for Google Analytics data retrieval
  */
 "use server";
-import { RouteCache } from './site-health-cache';
-import { createAnalyticsClient } from './google-api-auth';
-// Cache for analytics data (1 hour)
-const analyticsCache = new RouteCache();
-/**
- * Get Google Analytics data for a site with current/previous period comparison
- */
-export async function getGoogleAnalyticsData(config, siteName, startDate, endDate) {
-    try {
-        // Check cache first
-        const cacheKey = `analytics-${siteName}-${startDate || 'default'}-${endDate || 'default'}`;
-        const cached = analyticsCache.get(cacheKey);
-        if (cached) {
-            return { success: true, data: cached };
-        }
-        if (!config.ga4PropertyId || config.ga4PropertyId === 'GA4_PROPERTY_ID_HERE') {
-            return {
-                success: false,
-                error: 'GA4 Property ID not configured for this site'
-            };
-        }
-        // Set up authentication
-        const authResult = await createAnalyticsClient(config);
-        if (!authResult.success) {
-            return {
-                success: false,
-                error: authResult.error || 'Authentication failed'
-            };
-        }
-        const analyticsData = authResult.client;
-        // Calculate date ranges
-        const currentEndDate = endDate ? new Date(endDate) : new Date();
-        const currentStartDate = startDate ? new Date(startDate) : new Date(currentEndDate.getTime() - 30 * 24 * 60 * 60 * 1000);
-        // Calculate previous period (same duration before the current period)
-        const periodDuration = currentEndDate.getTime() - currentStartDate.getTime();
-        const previousEndDate = new Date(currentStartDate.getTime() - 24 * 60 * 60 * 1000); // One day before start
-        const previousStartDate = new Date(previousEndDate.getTime() - periodDuration);
-        const currentStartStr = currentStartDate.toISOString().split('T')[0];
-        const currentEndStr = currentEndDate.toISOString().split('T')[0];
-        const previousStartStr = previousStartDate.toISOString().split('T')[0];
-        const previousEndStr = previousEndDate.toISOString().split('T')[0];
-        // Fetch current period data
-        const currentResponse = await analyticsData.properties.runReport({
-            property: `properties/${config.ga4PropertyId}`,
-            requestBody: {
-                dateRanges: [{ startDate: currentStartStr, endDate: currentEndStr }],
-                dimensions: [{ name: 'date' }],
-                metrics: [{ name: 'screenPageViews' }],
-                orderBys: [{ dimension: { dimensionName: 'date' } }],
-            },
-        });
-        // Fetch previous period data
-        const previousResponse = await analyticsData.properties.runReport({
-            property: `properties/${config.ga4PropertyId}`,
-            requestBody: {
-                dateRanges: [{ startDate: previousStartStr, endDate: previousEndStr }],
-                dimensions: [{ name: 'date' }],
-                metrics: [{ name: 'screenPageViews' }],
-                orderBys: [{ dimension: { dimensionName: 'date' } }],
-            },
-        });
-        // Create a map of previous period data by date
-        const previousDataMap = new Map();
-        previousResponse.data.rows?.forEach((row) => {
-            const dateStr = row.dimensionValues?.[0]?.value || '';
-            if (dateStr) {
-                previousDataMap.set(dateStr, parseInt(row.metricValues?.[0]?.value || '0'));
-            }
-        });
-        // Combine current and previous period data
-        const chartData = [];
-        const daysInRange = Math.ceil((currentEndDate.getTime() - currentStartDate.getTime()) / (24 * 60 * 60 * 1000));
-        for (let i = daysInRange - 1; i >= 0; i--) {
-            const currentDate = new Date(currentEndDate);
-            currentDate.setDate(currentDate.getDate() - i);
-            const currentDateStr = currentDate.toISOString().split('T')[0].replace(/-/g, ''); // YYYYMMDD format
-            // Calculate corresponding previous period date
-            const previousDate = new Date(currentDate.getTime() - periodDuration);
-            const previousDateStr = previousDate.toISOString().split('T')[0].replace(/-/g, ''); // YYYYMMDD format
-            // Get current period data
-            const currentRow = currentResponse.data.rows?.find((row) => row.dimensionValues?.[0]?.value === currentDateStr);
-            const currentPageViews = parseInt(currentRow?.metricValues?.[0]?.value || '0');
-            // Get previous period data
-            const previousPageViews = previousDataMap.get(previousDateStr) || 0;
-            // Format date for display
-            const formattedDate = currentDate.toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric'
-            });
-            chartData.push({
-                date: formattedDate,
-                currentPageViews: currentPageViews,
-                previousPageViews: previousPageViews,
-            });
-        }
-        // Cache the result
-        analyticsCache.set(cacheKey, chartData);
-        return { success: true, data: chartData };
-    }
-    catch (error) {
-        console.error('Google Analytics error:', error);
-        return {
-            success: false,
-            error: error.message
-        };
-    }
-}
+export {};

package/dist/components/admin/site-health/site-health-google-analytics.js

@@ -9,41 +9,33 @@ SiteHealthGoogleAnalytics.propTypes = {
     endDate: PropTypes.string,
 };
 export function SiteHealthGoogleAnalytics({ siteName, startDate, endDate }) {
-    const fetchAnalyticsData = async (site) => {
-        const params = new URLSearchParams({ siteName: site });
-        if (startDate)
-            params.append('startDate', startDate);
-        if (endDate)
-            params.append('endDate', endDate);
-        const response = await fetch(`/api/site-health/google-analytics?${params.toString()}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch analytics data: ${response.status}`);
-        }
-        const result = await response.json();
-        if (!result.success) {
-            // Handle specific error types
-            if (result.error?.includes('invalid_grant') || result.error?.includes('authentication')) {
-                throw new Error('Google Analytics authentication expired. Please re-authorize the application.');
-            }
-            else if (result.error?.includes('GA4 Property ID not configured')) {
-                throw new Error('GA4 Property ID not configured for this site');
-            }
-            else {
-                throw new Error(result.error || 'Failed to load analytics data');
-            }
-        }
-        return result.data;
-    };
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Google Analytics", columnSpan: 2, fetchData: fetchAnalyticsData, children: (data) => {
-            if (!data || data.length === 0) {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Google Analytics", columnSpan: 2, endpoint: {
+            endpoint: '/api/site-health/google-analytics',
+            params: {
+                ...(startDate && { startDate }),
+                ...(endDate && { endDate }),
+            },
+            responseTransformer: (result) => result.data, // Extract the data array from the response
+        }, children: (data) => {
+            // Ensure data is an array
+            if (!data || !Array.isArray(data) || data.length === 0) {
                 return (_jsx("div", { className: "health-visualization-placeholder", children: _jsx("div", { className: "health-text-secondary", children: "No data available for the selected date range" }) }));
             }
-            return (_jsx("div", { children: _jsx("div", { style: { width: '100%', height: '400px', border: '1px solid #ddd' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, margin: { top: 40, right: 30, left: 20, bottom: 5 }, children: [_jsx("text", { x: "50%", y: 20, textAnchor: "middle", fontSize: "16", fontWeight: "bold", fill: "#374151", children: "Page Views (Current vs Previous Period)" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 } }), _jsx(Tooltip, { formatter: (value, name) => [
+            // Filter out any invalid data points
+            const validData = data.filter((point) => point &&
+                typeof point === 'object' &&
+                typeof point.date === 'string' &&
+                typeof point.currentPageViews === 'number' &&
+                typeof point.previousPageViews === 'number');
+            if (validData.length === 0) {
+                return (_jsx("div", { className: "health-visualization-placeholder", children: _jsx("div", { className: "health-text-secondary", children: "Invalid data format received from Google Analytics API." }) }));
+            }
+            return (_jsx("div", { children: _jsx("div", { style: { width: '100%', height: '400px', border: '1px solid #ddd' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: validData, margin: { top: 40, right: 30, left: 20, bottom: 5 }, children: [_jsx("text", { x: "50%", y: 20, textAnchor: "middle", fontSize: "16", fontWeight: "bold", fill: "#374151", children: "Page Views (Current vs Previous Period)" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 } }), _jsx(Tooltip, { formatter: (value, name) => [
                                         value?.toLocaleString() || '0',
                                         name || 'Unknown'
                                     ], labelFormatter: (label) => `Date: ${label}` }), _jsx(Legend, { wrapperStyle: {
                                         fontSize: '12px',
                                         paddingTop: '10px'
-                                    } }), _jsx(Bar, { dataKey: "currentPageViews", fill: "#3b82f6", name: "Current Period", radius: [2, 2, 0, 0] }), _jsx(Line, { type: "monotone", dataKey: "previousPageViews", stroke: "#ef4444", strokeWidth: 2, strokeDasharray: "5 5", dot: { fill: '#ef4444', strokeWidth: 2, r: 3 }, activeDot: { r: 5, stroke: '#ef4444', strokeWidth: 2 }, name: "Previous Period" })] }, `chart-${data.length}`) }) }) }));
+                                    } }), _jsx(Bar, { dataKey: "currentPageViews", fill: "#3b82f6", name: "Current Period", radius: [2, 2, 0, 0] }), _jsx(Line, { type: "monotone", dataKey: "previousPageViews", stroke: "#ef4444", strokeWidth: 2, strokeDasharray: "5 5", dot: { fill: '#ef4444', strokeWidth: 2, r: 3 }, activeDot: { r: 5, stroke: '#ef4444', strokeWidth: 2 }, name: "Previous Period" })] }, `chart-${validData.length}`) }) }) }));
         } }));
 }

package/dist/components/admin/site-health/site-health-google-search-console.integration.js

@@ -3,116 +3,4 @@
  * Server-side utilities for Google Search Console data retrieval
  */
 "use server";
-import { RouteCache } from './site-health-cache';
-import { createSearchConsoleClient } from './google-api-auth';
-// Cache for search console data (1 hour)
-const searchConsoleCache = new RouteCache();
-/**
- * Get Google Search Console data for a site with current/previous period comparison
- */
-export async function getSearchConsoleData(config, siteName, startDate, endDate) {
-    try {
-        // Check cache first
-        const cacheKey = `searchconsole-${siteName}-${startDate || 'default'}-${endDate || 'default'}`;
-        const cached = searchConsoleCache.get(cacheKey);
-        if (cached) {
-            return { success: true, data: cached };
-        }
-        if (!config.siteUrl) {
-            return {
-                success: false,
-                error: 'Site URL not configured for Search Console'
-            };
-        }
-        // Set up authentication
-        const authResult = await createSearchConsoleClient(config);
-        if (!authResult.success) {
-            return {
-                success: false,
-                error: authResult.error || 'Authentication failed'
-            };
-        }
-        const searchconsole = authResult.client;
-        // Calculate date ranges
-        const currentEndDate = endDate ? new Date(endDate) : new Date();
-        const currentStartDate = startDate ? new Date(startDate) : new Date(currentEndDate.getTime() - 30 * 24 * 60 * 60 * 1000);
-        // Calculate previous period (same duration before the current period)
-        const periodDuration = currentEndDate.getTime() - currentStartDate.getTime();
-        const previousEndDate = new Date(currentStartDate.getTime() - 24 * 60 * 60 * 1000); // One day before start
-        const previousStartDate = new Date(previousEndDate.getTime() - periodDuration);
-        const currentStartStr = currentStartDate.toISOString().split('T')[0];
-        const currentEndStr = currentEndDate.toISOString().split('T')[0];
-        const previousStartStr = previousStartDate.toISOString().split('T')[0];
-        const previousEndStr = previousEndDate.toISOString().split('T')[0];
-        // Fetch current period data
-        const currentResponse = await searchconsole.searchanalytics.query({
-            siteUrl: config.siteUrl,
-            requestBody: {
-                startDate: currentStartStr,
-                endDate: currentEndStr,
-                dimensions: ['date'],
-                rowLimit: 10000,
-            },
-        });
-        // Fetch previous period data
-        const previousResponse = await searchconsole.searchanalytics.query({
-            siteUrl: config.siteUrl,
-            requestBody: {
-                startDate: previousStartStr,
-                endDate: previousEndStr,
-                dimensions: ['date'],
-                rowLimit: 10000,
-            },
-        });
-        // Create a map of previous period data by date
-        const previousDataMap = new Map();
-        previousResponse.data.rows?.forEach((row) => {
-            const dateStr = row.keys?.[0] || '';
-            if (dateStr) {
-                previousDataMap.set(dateStr, {
-                    clicks: parseFloat(String(row.clicks || '0')),
-                    impressions: parseFloat(String(row.impressions || '0'))
-                });
-            }
-        });
-        // Combine current and previous period data
-        const chartData = [];
-        const daysInRange = Math.ceil((currentEndDate.getTime() - currentStartDate.getTime()) / (24 * 60 * 60 * 1000));
-        for (let i = daysInRange - 1; i >= 0; i--) {
-            const currentDate = new Date(currentEndDate);
-            currentDate.setDate(currentDate.getDate() - i);
-            const currentDateStr = currentDate.toISOString().split('T')[0];
-            // Calculate corresponding previous period date
-            const previousDate = new Date(currentDate.getTime() - periodDuration);
-            const previousDateStr = previousDate.toISOString().split('T')[0];
-            // Get current period data
-            const currentRow = currentResponse.data.rows?.find((row) => row.keys?.[0] === currentDateStr);
-            const currentClicks = parseFloat(String(currentRow?.clicks || '0'));
-            const currentImpressions = parseFloat(String(currentRow?.impressions || '0'));
-            // Get previous period data
-            const previousData = previousDataMap.get(previousDateStr) || { clicks: 0, impressions: 0 };
-            // Format date for display
-            const formattedDate = currentDate.toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric'
-            });
-            chartData.push({
-                date: formattedDate,
-                currentImpressions: Math.round(currentImpressions),
-                currentClicks: Math.round(currentClicks),
-                previousImpressions: Math.round(previousData.impressions),
-                previousClicks: Math.round(previousData.clicks),
-            });
-        }
-        // Cache the result
-        searchConsoleCache.set(cacheKey, chartData);
-        return { success: true, data: chartData };
-    }
-    catch (error) {
-        console.error('Google Search Console error:', error);
-        return {
-            success: false,
-            error: error.message
-        };
-    }
-}
+export {};

package/dist/components/admin/site-health/site-health-google-search-console.js

@@ -9,36 +9,30 @@ SiteHealthGoogleSearchConsole.propTypes = {
     endDate: PropTypes.string,
 };
 export function SiteHealthGoogleSearchConsole({ siteName, startDate, endDate }) {
-    const fetchSearchConsoleData = async (site) => {
-        const params = new URLSearchParams({ siteName: site });
-        if (startDate)
-            params.append('startDate', startDate);
-        if (endDate)
-            params.append('endDate', endDate);
-        const response = await fetch(`/api/site-health/google-search-console?${params.toString()}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch search console data: ${response.status}`);
-        }
-        const result = await response.json();
-        if (!result.success) {
-            // Handle specific error types
-            if (result.error?.includes('invalid_grant') || result.error?.includes('authentication')) {
-                throw new Error('Google Search Console authentication expired. Please re-authorize the application.');
-            }
-            else if (result.error?.includes('GSC Site URL not configured')) {
-                throw new Error('GSC Site URL not configured for this site');
-            }
-            else {
-                throw new Error(result.error || 'Failed to load search console data');
-            }
-        }
-        return result.data;
-    };
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Google Search Console", columnSpan: 2, fetchData: fetchSearchConsoleData, children: (data) => {
-            if (!data || data.length === 0) {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Google Search Console", columnSpan: 2, endpoint: {
+            endpoint: '/api/site-health/google-search-console',
+            params: {
+                ...(startDate && { startDate }),
+                ...(endDate && { endDate }),
+            },
+            responseTransformer: (result) => result.data, // Extract the data array from the response
+        }, children: (data) => {
+            // Ensure data is an array
+            if (!data || !Array.isArray(data) || data.length === 0) {
                 return (_jsx("div", { className: "health-visualization-placeholder", children: _jsx("div", { className: "health-text-secondary", children: "No indexing data available for the selected date range" }) }));
             }
-            return (_jsx("div", { children: _jsx("div", { style: { width: '100%', height: '400px', border: '1px solid #ddd' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, margin: { top: 40, right: 30, left: 20, bottom: 5 }, children: [_jsx("text", { x: "50%", y: 20, textAnchor: "middle", fontSize: "16", fontWeight: "bold", fill: "#374151", children: "Impressions vs Clicks (Current vs Previous Period)" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 } }), _jsx(Tooltip, { formatter: (value, name) => [
+            // Filter out any invalid data points
+            const validData = data.filter((point) => point &&
+                typeof point === 'object' &&
+                typeof point.date === 'string' &&
+                typeof point.currentImpressions === 'number' &&
+                typeof point.currentClicks === 'number' &&
+                typeof point.previousImpressions === 'number' &&
+                typeof point.previousClicks === 'number');
+            if (validData.length === 0) {
+                return (_jsx("div", { className: "health-visualization-placeholder", children: _jsx("div", { className: "health-text-secondary", children: "Invalid data format received from Google Search Console API." }) }));
+            }
+            return (_jsx("div", { children: _jsx("div", { style: { width: '100%', height: '400px', border: '1px solid #ddd' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: validData, margin: { top: 40, right: 30, left: 20, bottom: 5 }, children: [_jsx("text", { x: "50%", y: 20, textAnchor: "middle", fontSize: "16", fontWeight: "bold", fill: "#374151", children: "Impressions vs Clicks (Current vs Previous Period)" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 } }), _jsx(Tooltip, { formatter: (value, name) => [
                                         value?.toLocaleString() || '0',
                                         name || 'Unknown'
                                     ], labelFormatter: (label) => `Date: ${label}` }), _jsx(Legend, { wrapperStyle: {

package/dist/components/admin/site-health/site-health-on-site-seo.js

@@ -2,7 +2,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
-import { getScoreIndicator } from './site-health-indicators';
+import { formatAuditItem, getAuditScoreIcon } from './site-health-utils';
 /**
  * Restructure audits by type with all pages and their individual results
  */
@@ -61,42 +61,14 @@ function restructureAuditsByType(pagesAnalyzed) {
     });
     return restructuredAudits.sort((a, b) => (b.score || 0) - (a.score || 0));
 }
-// Fetch real SEO data from API
-async function fetchOnSiteSEOData(siteName) {
-    try {
-        const response = await fetch(`/api/site-health/on-site-seo?siteName=${encodeURIComponent(siteName)}`);
-        if (!response.ok) {
-            throw new Error(`API request failed: ${response.status} ${response.statusText}`);
-        }
-        const data = await response.json();
-        if (data.status === 'error') {
-            throw new Error(data.error || 'SEO analysis failed');
-        }
-        // Process data to aggregate audits by type across all pages
-        // const aggregatedOnPageAudits = restructureAuditsByType(data.pagesAnalyzed);
-        return data;
-    }
-    catch (error) {
-        console.error('Error fetching SEO data:', error);
-        // Return error structure that the template can display
-        return {
-            site: siteName,
-            url: '',
-            overallScore: null,
-            pagesAnalyzed: [],
-            onSiteAudits: [],
-            totalPages: 0,
-            timestamp: new Date().toISOString(),
-            status: 'error',
-            error: error instanceof Error ? error.message : 'Failed to fetch SEO data'
-        };
-    }
-}
 SiteHealthOnSiteSEO.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthOnSiteSEO({ siteName }) {
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "On-Site SEO", fetchData: fetchOnSiteSEOData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "On-Site SEO", endpoint: {
+            endpoint: '/api/site-health/on-site-seo',
+            responseTransformer: (result) => result.data, // Extract the data from the response
+        }, children: (data) => {
             if (!data)
                 return null;
             if (data.status === 'error') {
@@ -104,12 +76,6 @@ export function SiteHealthOnSiteSEO({ siteName }) {
             }
             // Process data to aggregate audits by type across all pages
             const aggregatedOnPageAudits = restructureAuditsByType(data.pagesAnalyzed);
-            const getScoreColor = (score) => {
-                return getScoreIndicator(score).color;
-            };
-            const getAuditScoreIcon = (score) => {
-                return getScoreIndicator(score).icon;
-            };
             const formatPageIssue = (item) => {
                 // Handle page-specific results from restructured data
                 if (item.page && typeof item.page === 'string') {
@@ -153,52 +119,12 @@ export function SiteHealthOnSiteSEO({ siteName }) {
                 // Fallback to original formatting
                 return formatAuditItem(item);
             };
-            const formatAuditItem = (item) => {
-                // Handle specific SEO element formatting based on the user's list
-                // Title Tags
-                if (item.title && typeof item.title === 'string') {
-                    return `Title: "${item.title}" (${item.length || 'unknown'} chars)`;
-                }
-                // Meta tags
-                if (item.name && typeof item.name === 'string' && item.content) {
-                    return `${item.name}: ${String(item.content)}`;
-                }
-                // Headings
-                if (item.tag && typeof item.tag === 'string' && item.tag.match(/^h[1-6]$/i)) {
-                    return `${item.tag}: "${item.text || ''}"`;
-                }
-                // Links and URLs
-                if (item.url && typeof item.url === 'string') {
-                    if (item.issue && typeof item.issue === 'string') {
-                        return `${item.url} - ${item.issue}`;
-                    }
-                    return item.url;
-                }
-                // Images with alt tags
-                if (item.src && typeof item.src === 'string') {
-                    return `Image: ${item.src} ${item.alt ? '(has alt)' : '(missing alt)'}`;
-                }
-                // Robots.txt directives
-                if (item.directive && typeof item.directive === 'string') {
-                    return `${item.directive}: ${item.value || ''}`;
-                }
-                // Sitemap entries
-                if (item.loc && typeof item.loc === 'string') {
-                    return item.loc;
-                }
-                // Default formatting
-                return Object.entries(item)
-                    .map(([key, value]) => `${key}: ${String(value)}`)
-                    .join(', ');
-            };
-            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: data.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", data.url] }), data.overallScore !== null && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "On-Site SEO Score" }), _jsxs("div", { className: "health-score-value", style: { color: getScoreColor(data.overallScore) }, children: [Math.round((data.overallScore || 0) * 100), "%"] }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
-                                            width: `${(data.overallScore || 0) * 100}%`,
-                                            backgroundColor: getScoreColor(data.overallScore)
-                                        } }) })] }) })), aggregatedOnPageAudits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "On-Page SEO Audits" }), _jsx("div", { className: "health-audit-list", children: aggregatedOnPageAudits
+            return (_jsxs(_Fragment, { children: [aggregatedOnPageAudits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "On-Page SEO Audits" }), _jsx("div", { className: "health-audit-list", children: aggregatedOnPageAudits
                                     .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .sort((a, b) => (b.score || 0) - (a.score || 0))
                                     .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: [audit.score === null ? '(N/A)' : `(${Math.round((audit.score || 0) * 100)}%)`, " ", audit.title] }), audit.displayValue && audit.score !== 1 && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details && audit.details.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && audit.score !== 1 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items
                                                             .filter((item) => item.score !== 1)
-                                                            .map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatPageIssue(item) }, idx))) }) }))] })] }, audit.id))) })] })), data.onSiteAudits.length > 0 && (_jsxs("div", { style: { marginTop: data.pagesAnalyzed.length > 0 ? '2rem' : '0' }, children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "On-Site SEO Audits" }), _jsx("div", { className: "health-audit-list", children: data.onSiteAudits
+                                                            .map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatPageIssue(item) }, idx))) }) }))] })] }, audit.id))) })] })), data.onSiteAudits.length > 0 && (_jsxs("div", { style: { marginTop: aggregatedOnPageAudits.length > 0 ? '2rem' : '0' }, children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "On-Site SEO Audits" }), _jsx("div", { className: "health-audit-list", children: data.onSiteAudits
                                     .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
                                     .sort((a, b) => (b.score || 0) - (a.score || 0))
                                     .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: [audit.score === null ? '(N/A)' : `(${Math.round((audit.score || 0) * 100)}%)`, " ", audit.title] }), audit.displayValue && audit.score !== 1 && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details && audit.details.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && audit.score !== 1 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items

package/dist/components/admin/site-health/site-health-overview.js

@@ -1,22 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
-import { getScoreIndicator } from './site-health-indicators';
+import { formatScore, getScoreColor } from './site-health-utils';
 SiteHealthOverview.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthOverview({ siteName }) {
-    const fetchCWVData = useCallback(async (site) => {
-        const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
-        const result = await response.json();
-        if (!result.success) {
-            throw new Error(result.error || 'Failed to fetch Core Web Vitals data');
-        }
-        return result;
-    }, []);
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Site Overview", fetchData: fetchCWVData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Site Overview", endpoint: {
+            endpoint: '/api/site-health/core-web-vitals',
+            responseTransformer: (result) => result, // Result is already in the correct format
+        }, children: (data) => {
             if (!data?.data || data.data.length === 0) {
                 return (_jsx("p", { style: { color: '#6b7280' }, children: "No site health data available for this site." }));
             }
@@ -25,14 +19,6 @@ export function SiteHealthOverview({ siteName }) {
                 return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", siteData.error] }));
             }
             // Helper functions
-            const getScoreColor = (score) => {
-                return getScoreIndicator(score).color;
-            };
-            const formatScore = (score) => {
-                if (score === null)
-                    return 'N/A';
-                return `${Math.round(score * 100)}%`;
-            };
             const getStatusColor = (status) => {
                 switch (status) {
                     case 'good': return '#10b981'; // green