@pixelated-tech/components 3.5.14 → 3.7.0

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-mock-context.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+const SiteHealthMockDataContext = createContext(null);
+export const SiteHealthMockProvider = ({ mocks, children }) => {
+    return (_jsx(SiteHealthMockDataContext.Provider, { value: mocks, children: children }));
+};
+SiteHealthMockProvider.propTypes = {
+    mocks: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired
+};
+export function useSiteHealthMockData() {
+    return useContext(SiteHealthMockDataContext);
+}

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

@@ -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') {
@@ -147,7 +119,12 @@ export function SiteHealthOnSiteSEO({ siteName }) {
                 // Fallback to original formatting
                 return formatAuditItem(item);
             };
-            return (_jsxs(_Fragment, { children: [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
+            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: 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,6 +1,5 @@
 '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 { formatScore, getScoreColor } from './site-health-utils';
@@ -8,15 +7,10 @@ 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." }));
             }

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

@@ -1,6 +1,5 @@
 '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 { formatAuditItem, getAuditScoreIcon, getScoreColor, formatScore } from './site-health-utils';
@@ -8,15 +7,10 @@ SiteHealthPerformance.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthPerformance({ 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 - Performance", fetchData: fetchCWVData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Performance", 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." }));
             }

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

@@ -1,6 +1,5 @@
 '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 { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
@@ -8,15 +7,12 @@ SiteHealthSecurity.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthSecurity({ siteName }) {
-    const fetchSecurityData = useCallback(async (site) => {
-        // Fetch PSI data for best practices security audits
-        const psiResponse = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
-        const psiResult = await psiResponse.json();
-        return {
-            psiData: psiResult.success ? psiResult : undefined
-        };
-    }, []);
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Site Security", fetchData: fetchSecurityData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Security", endpoint: {
+            endpoint: '/api/site-health/core-web-vitals',
+            responseTransformer: (result) => ({
+                psiData: result.success ? result : undefined
+            }),
+        }, children: (data) => {
             const psiData = data?.psiData?.data?.[0];
             if (!psiData) {
                 return (_jsx("p", { style: { color: '#6b7280' }, children: "No security data available for this site." }));

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

@@ -1,6 +1,5 @@
 '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 { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
@@ -8,15 +7,10 @@ SiteHealthSEO.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthSEO({ siteName }) {
-    const fetchSEOData = 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 SEO data');
-        }
-        return result;
-    }, []);
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - SEO", fetchData: fetchSEOData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - SEO", 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 SEO data available for this site." }));
             }

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

@@ -1,65 +1,123 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { PageGridItem } from '../../general/semantic';
 import "./site-health.css";
+import { useSiteHealthMockData } from './site-health-mock-context';
 SiteHealthTemplate.propTypes = {
     siteName: PropTypes.string.isRequired,
     title: PropTypes.string,
     children: PropTypes.func.isRequired,
-    fetchData: PropTypes.func.isRequired,
+    endpoint: PropTypes.shape({
+        endpoint: PropTypes.string.isRequired,
+        method: PropTypes.oneOf(['GET', 'POST', 'PUT', 'DELETE']),
+        headers: PropTypes.object,
+        params: PropTypes.object,
+        body: PropTypes.any,
+        responseTransformer: PropTypes.func,
+    }),
     enableCacheControl: PropTypes.bool,
     columnSpan: PropTypes.number,
+    data: PropTypes.any,
 };
 export function SiteHealthTemplate(props) {
     const typedProps = props;
-    const [data, setData] = useState(null);
+    const mockDataMap = useSiteHealthMockData();
+    const storyMockData = typedProps.title ? mockDataMap?.[typedProps.title] : undefined;
+    const [data, setData] = useState(typedProps.data ?? storyMockData ?? null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
+    // Default fetch function for endpoint-based requests
+    const fetchFromEndpoint = useCallback(async (useCache = true) => {
+        if (!typedProps.endpoint) {
+            throw new Error('Endpoint is not configured for SiteHealthTemplate');
+        }
+        const { endpoint: endpointUrl, method = 'GET', headers = {}, params = {}, body, responseTransformer } = typedProps.endpoint;
+        // Build URL with siteName parameter
+        const url = new URL(endpointUrl, window.location.origin);
+        url.searchParams.set('siteName', encodeURIComponent(typedProps.siteName));
+        // Add additional params
+        Object.entries(params).forEach(([key, value]) => {
+            url.searchParams.set(key, value);
+        });
+        // Add cache control if not using cache
+        if (!useCache) {
+            url.searchParams.set('cache', 'false');
+        }
+        const response = await fetch(url.toString(), {
+            method,
+            headers: {
+                'Content-Type': 'application/json',
+                ...headers,
+            },
+            body: body ? JSON.stringify(body) : undefined,
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.error || 'API request failed');
+        }
+        // Apply response transformer if provided
+        return responseTransformer ? responseTransformer(result) : result;
+    }, [typedProps.endpoint, typedProps.siteName]);
+    const loadData = useCallback(async () => {
+        if (!typedProps.siteName) {
+            setData(null);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            // Check for cache control from URL query parameters
+            const urlParams = new URLSearchParams(window.location.search);
+            const cacheParam = urlParams.get('cache');
+            const useCache = typedProps.enableCacheControl ?? true ? (cacheParam !== 'false') : true;
+            const result = await fetchFromEndpoint(useCache);
+            setData(result);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load data');
+            setData(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [typedProps.siteName, fetchFromEndpoint, typedProps.enableCacheControl]);
     useEffect(() => {
-        let isMounted = true;
-        const loadData = async () => {
-            if (!typedProps.siteName) {
-                if (isMounted) {
-                    setData(null);
-                    setLoading(false);
-                    setError(null);
-                }
-                return;
-            }
-            if (isMounted) {
-                setLoading(true);
-                setError(null);
-            }
-            try {
-                // Check for cache control from URL query parameters
-                const urlParams = new URLSearchParams(window.location.search);
-                const cacheParam = urlParams.get('cache');
-                const useCache = typedProps.enableCacheControl ? (cacheParam !== 'false') : true;
-                const result = await typedProps.fetchData(typedProps.siteName, useCache);
-                if (isMounted) {
-                    setData(result);
-                    setError(null);
-                }
-            }
-            catch (err) {
-                if (isMounted) {
-                    setError(err instanceof Error ? err.message : 'Failed to load data');
-                    setData(null);
-                }
-            }
-            finally {
-                if (isMounted) {
-                    setLoading(false);
-                }
-            }
-        };
+        if (!typedProps.siteName) {
+            return;
+        }
+        if (storyMockData || typeof typedProps.data !== 'undefined') {
+            return;
+        }
         loadData();
-        return () => {
-            isMounted = false;
-        };
-    }, [typedProps.siteName, typedProps.fetchData]);
+    }, [loadData, typedProps.siteName, typedProps.data, storyMockData]);
+    useEffect(() => {
+        if (!typedProps.siteName) {
+            setData(null);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        if (storyMockData) {
+            setData(storyMockData);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        if (typeof typedProps.data !== 'undefined') {
+            setData(typedProps.data);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+    }, [typedProps.siteName, typedProps.data, storyMockData]);
     // If no site selected, show nothing
     if (!typedProps.siteName) {
         return null;

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

@@ -6,15 +6,10 @@ SiteHealthUptime.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthUptime({ siteName }) {
-    const fetchUptimeData = async (site) => {
-        const response = await fetch(`/api/site-health/uptime?siteName=${encodeURIComponent(site)}`);
-        const result = await response.json();
-        if (!result.success) {
-            throw new Error('Failed to load health status');
-        }
-        return result;
-    };
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Health Status", fetchData: fetchUptimeData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Health Status", endpoint: {
+            endpoint: '/api/site-health/uptime',
+            responseTransformer: (result) => result, // Result is already in the correct format
+        }, children: (data) => {
             if (!data) {
                 return (_jsx("p", { style: { color: '#6b7280' }, children: "No uptime data available for this site." }));
             }

package/dist/components/admin/site-health/site-health.css

@@ -455,3 +455,10 @@ th, td {
   padding: 1rem 0;
   color: var(--color-text-secondary);
 }
+
+/* Print Styles */
+@media print {
+  .site-health-header {
+    display: none;
+  }
+}