@pixelated-tech/components 3.5.13 → 3.6.0

package/README.md

@@ -271,6 +271,8 @@ import { Accordion, Callout } from '@pixelated-tech/components';
 
 For detailed usage examples and API documentation, see the [Component Reference Guide](docs/components.md).
 
+For administrative components and site management features, see the [Admin Components Guide](docs/admin.md).
+
 ### Storybook Interactive Demos
 
 Explore all components with live, interactive examples:

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

@@ -0,0 +1,258 @@
+/**
+ * Google API Integration Services
+ * Centralized integration for Google services (Analytics, Search Console, etc.)
+ * Combines authentication, caching, and data processing logic
+ */
+"use server";
+import { google } from 'googleapis';
+import { RouteCache } from './site-health-cache';
+import { calculateDateRanges, formatChartDate, getCachedData, setCachedData } from './google.api.utils';
+/**
+ * Create authenticated Google API client for a specific service
+ */
+export async function createGoogleAuthClient(config, scopes) {
+    try {
+        let auth;
+        if (config.serviceAccountKey) {
+            // Use service account authentication (recommended)
+            const credentials = JSON.parse(config.serviceAccountKey);
+            auth = new google.auth.GoogleAuth({
+                credentials,
+                scopes,
+            });
+        }
+        else if (config.clientId && config.clientSecret && config.refreshToken) {
+            // Fallback to OAuth2 (deprecated for server-side apps)
+            const oauth2Client = new google.auth.OAuth2(config.clientId, config.clientSecret);
+            oauth2Client.setCredentials({
+                refresh_token: config.refreshToken,
+            });
+            auth = oauth2Client;
+        }
+        else {
+            return {
+                success: false,
+                error: 'Google credentials not configured. Set GOOGLE_SERVICE_ACCOUNT_KEY or OAuth credentials.'
+            };
+        }
+        return { success: true, auth };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: `Authentication failed: ${error.message}`
+        };
+    }
+}
+/**
+ * Create Analytics Data API client
+ */
+export async function createAnalyticsClient(config) {
+    const result = await createGoogleAuthClient(config, ['https://www.googleapis.com/auth/analytics.readonly']);
+    if (!result.success)
+        return result;
+    return {
+        success: true,
+        client: google.analyticsdata({ version: 'v1beta', auth: result.auth }),
+        auth: result.auth
+    };
+}
+/**
+ * Create Search Console API client
+ */
+export async function createSearchConsoleClient(config) {
+    const result = await createGoogleAuthClient(config, ['https://www.googleapis.com/auth/webmasters.readonly']);
+    if (!result.success)
+        return result;
+    return {
+        success: true,
+        client: google.searchconsole({ version: 'v1', auth: result.auth }),
+        auth: result.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 = getCachedData(analyticsCache, 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;
+        const dateRange = calculateDateRanges(startDate, endDate);
+        // Fetch current period data
+        const currentResponse = await analyticsData.properties.runReport({
+            property: `properties/${config.ga4PropertyId}`,
+            requestBody: {
+                dateRanges: [{ startDate: dateRange.currentStartStr, endDate: dateRange.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: dateRange.previousStartStr, endDate: dateRange.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((dateRange.currentEnd.getTime() - dateRange.currentStart.getTime()) / (24 * 60 * 60 * 1000));
+        for (let i = daysInRange - 1; i >= 0; i--) {
+            const currentDate = new Date(dateRange.currentEnd);
+            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() - (dateRange.currentEnd.getTime() - dateRange.currentStart.getTime()));
+            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;
+            chartData.push({
+                date: formatChartDate(currentDate),
+                currentPageViews: currentPageViews,
+                previousPageViews: previousPageViews,
+            });
+        }
+        // Cache the result
+        setCachedData(analyticsCache, cacheKey, chartData);
+        return { success: true, data: chartData };
+    }
+    catch (error) {
+        console.error('Google Analytics error:', error);
+        return {
+            success: false,
+            error: error.message
+        };
+    }
+}
+// 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 = getCachedData(searchConsoleCache, 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;
+        const dateRange = calculateDateRanges(startDate, endDate);
+        // Fetch current period data
+        const currentResponse = await searchconsole.searchanalytics.query({
+            siteUrl: config.siteUrl,
+            requestBody: {
+                startDate: dateRange.currentStartStr,
+                endDate: dateRange.currentEndStr,
+                dimensions: ['date'],
+                rowLimit: 10000,
+            },
+        });
+        // Fetch previous period data
+        const previousResponse = await searchconsole.searchanalytics.query({
+            siteUrl: config.siteUrl,
+            requestBody: {
+                startDate: dateRange.previousStartStr,
+                endDate: dateRange.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((dateRange.currentEnd.getTime() - dateRange.currentStart.getTime()) / (24 * 60 * 60 * 1000));
+        for (let i = daysInRange - 1; i >= 0; i--) {
+            const currentDate = new Date(dateRange.currentEnd);
+            currentDate.setDate(currentDate.getDate() - i);
+            const currentDateStr = currentDate.toISOString().split('T')[0];
+            // Calculate corresponding previous period date
+            const previousDate = new Date(currentDate.getTime() - (dateRange.currentEnd.getTime() - dateRange.currentStart.getTime()));
+            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 };
+            chartData.push({
+                date: formatChartDate(currentDate),
+                currentImpressions: Math.round(currentImpressions),
+                currentClicks: Math.round(currentClicks),
+                previousImpressions: Math.round(previousData.impressions),
+                previousClicks: Math.round(previousData.clicks),
+            });
+        }
+        // Cache the result
+        setCachedData(searchConsoleCache, cacheKey, chartData);
+        return { success: true, data: chartData };
+    }
+    catch (error) {
+        console.error('Google Search Console error:', error);
+        return {
+            success: false,
+            error: error.message
+        };
+    }
+}

package/dist/components/admin/site-health/google.api.utils.js

@@ -0,0 +1,47 @@
+/**
+ * Google API Integration Utilities
+ * Shared utility functions for Google API integrations
+ * These are NOT server actions - just regular utility functions
+ */
+/**
+ * Calculate date ranges for current and previous periods
+ */
+export function calculateDateRanges(startDate, endDate) {
+    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);
+    return {
+        currentStart: currentStartDate,
+        currentEnd: currentEndDate,
+        previousStart: previousStartDate,
+        previousEnd: previousEndDate,
+        currentStartStr: currentStartDate.toISOString().split('T')[0],
+        currentEndStr: currentEndDate.toISOString().split('T')[0],
+        previousStartStr: previousStartDate.toISOString().split('T')[0],
+        previousEndStr: previousEndDate.toISOString().split('T')[0],
+    };
+}
+/**
+ * Format date for chart display
+ */
+export function formatChartDate(date) {
+    return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric'
+    });
+}
+/**
+ * Get cached data or null if not cached
+ */
+export function getCachedData(cache, cacheKey) {
+    return cache.get(cacheKey);
+}
+/**
+ * Set cached data
+ */
+export function setCachedData(cache, cacheKey, data) {
+    cache.set(cacheKey, data);
+}

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

@@ -1,114 +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 { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
 SiteHealthAccessibility.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthAccessibility({ siteName }) {
-    const fetchAccessibilityData = 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 accessibility data');
-        }
-        return result;
-    }, []);
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Accessibility", fetchData: fetchAccessibilityData, children: (data) => {
-            const getScoreColor = (score) => {
-                return getScoreIndicator(score).color;
-            };
-            const getAuditScoreIcon = (score) => {
-                return getScoreIndicator(score).icon;
-            };
-            // Helper function to display audit item details
-            const formatAuditItem = (item, auditTitle) => {
-                // Handle URLs
-                if (item.url && typeof item.url === 'string') {
-                    return item.url;
-                }
-                // Handle sources (like JavaScript files)
-                if (item.source && typeof item.source === 'string') {
-                    return item.source;
-                }
-                // Handle text descriptions
-                if (item.text && typeof item.text === 'string') {
-                    return item.text;
-                }
-                // Handle entities (like "Google Tag Manager")
-                if (item.entity && typeof item.entity === 'string') {
-                    return item.entity;
-                }
-                // Handle nodes with selectors
-                if (item.node && typeof item.node === 'object' && 'selector' in item.node) {
-                    return `Element: ${item.node.selector}`;
-                }
-                // Handle nodes with snippets
-                if (item.node && typeof item.node === 'object' && 'snippet' in item.node) {
-                    const snippet = item.node.snippet;
-                    return `Element: ${snippet.length > 50 ? snippet.substring(0, 50) + '...' : snippet}`;
-                }
-                // Handle origins (like domains)
-                if (item.origin && typeof item.origin === 'string') {
-                    return item.origin;
-                }
-                // Handle labels
-                if (item.label && typeof item.label === 'string') {
-                    return item.label;
-                }
-                // Handle numeric values with units
-                if (item.value && typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
-                    const value = item.value;
-                    return `${value.value}${item.unit || ''}`;
-                }
-                // Handle statistics
-                if (item.statistic && typeof item.statistic === 'string' && item.value) {
-                    if (typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
-                        const value = item.value;
-                        return `${item.statistic}: ${value.value}`;
-                    }
-                    return item.statistic;
-                }
-                // Handle timing data with audit context
-                if (typeof item === 'number') {
-                    let context = '';
-                    if (auditTitle) {
-                        if (auditTitle.toLowerCase().includes('server') || auditTitle.toLowerCase().includes('backend')) {
-                            context = ' server response';
-                        }
-                        else if (auditTitle.toLowerCase().includes('network') || auditTitle.toLowerCase().includes('request')) {
-                            context = ' network request';
-                        }
-                        else if (auditTitle.toLowerCase().includes('render') || auditTitle.toLowerCase().includes('blocking')) {
-                            context = ' render blocking';
-                        }
-                        else if (auditTitle.toLowerCase().includes('javascript') || auditTitle.toLowerCase().includes('js')) {
-                            context = ' JavaScript';
-                        }
-                        else if (auditTitle.toLowerCase().includes('image') || auditTitle.toLowerCase().includes('media')) {
-                            context = ' media resource';
-                        }
-                    }
-                    return `${item.toFixed(2)}ms${context}`;
-                }
-                if (item.value && typeof item.value === 'number') {
-                    const unit = item.unit || 'ms';
-                    let context = '';
-                    if (auditTitle && unit === 'ms') {
-                        if (auditTitle.toLowerCase().includes('server')) {
-                            context = ' server time';
-                        }
-                        else if (auditTitle.toLowerCase().includes('network')) {
-                            context = ' network time';
-                        }
-                    }
-                    return `${item.value.toFixed(2)}${unit}${context}`;
-                }
-                // If we can't find anything meaningful, show a generic message
-                return 'Details available';
-            };
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Accessibility", 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 accessibility data available for this site." }));
             }

package/dist/components/admin/site-health/site-health-axe-core.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 { getImpactIndicator, getIncompleteIndicator, getPassingIndicator } from './site-health-indicators';
@@ -8,14 +7,6 @@ SiteHealthAxeCore.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthAxeCore({ siteName }) {
-    const fetchAxeCoreData = useCallback(async (site) => {
-        const response = await fetch(`/api/site-health/axe-core?siteName=${encodeURIComponent(site)}`);
-        const result = await response.json();
-        if (!result.success) {
-            throw new Error(result.error || 'Failed to fetch axe-core data');
-        }
-        return result;
-    }, []);
     const getImpactColor = (impact) => {
         return getImpactIndicator(impact).color;
     };
@@ -34,7 +25,10 @@ export function SiteHealthAxeCore({ siteName }) {
         }
         return 'Unknown element';
     };
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Axe-Core Accessibility", fetchData: fetchAxeCoreData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Axe-Core Accessibility", endpoint: {
+            endpoint: '/api/site-health/axe-core',
+            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 axe-core data available for this site." }));
             }

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

@@ -9,42 +9,40 @@ SiteHealthCloudwatch.propTypes = {
     endDate: PropTypes.string,
 };
 export function SiteHealthCloudwatch({ siteName, startDate, endDate }) {
-    const fetchCloudwatchData = 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/cloudwatch?${params.toString()}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch CloudWatch data: ${response.status}`);
-        }
-        const result = await response.json();
-        if (!result.success) {
-            if (result.error?.includes('Health Check ID not configured')) {
-                throw new Error('Route53 Health Check ID not configured for this site');
-            }
-            else {
-                throw new Error(result.error || 'Failed to load CloudWatch health check data');
-            }
-        }
-        return result.data;
-    };
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "CloudWatch Uptime", columnSpan: 2, fetchData: fetchCloudwatchData, children: (data) => {
-            if (!data || data.length === 0) {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "CloudWatch Uptime", columnSpan: 2, endpoint: {
+            endpoint: '/api/site-health/cloudwatch',
+            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 uptime data available. Route53 health checks may not be configured to send metrics to CloudWatch." }) }));
             }
             // Check if all data points have zero checks (no actual data)
-            const hasActualData = data.some((point) => point.totalChecks > 0);
+            const hasActualData = data.some((point) => point && typeof point === 'object' && point.totalChecks > 0);
             if (!hasActualData) {
                 return (_jsx("div", { className: "health-visualization-placeholder", children: _jsxs("div", { className: "health-text-secondary", children: ["Health check exists but has no metric data in CloudWatch for the selected period.", _jsx("br", {}), "Route53 health checks must be configured to send metrics to CloudWatch for historical data."] }) }));
             }
-            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: "CloudWatch Health Check Availability Over Time" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 }, label: { value: 'Check Count', angle: -90, position: 'insideLeft' } }), _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.successCount === 'number' &&
+                typeof point.failureCount === 'number' &&
+                typeof point.totalChecks === 'number' &&
+                typeof point.successRate === '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 CloudWatch 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: "CloudWatch Health Check Availability Over Time" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 }, label: { value: 'Check Count', angle: -90, position: 'insideLeft' } }), _jsx(Tooltip, { formatter: (value, name) => [
                                         value?.toLocaleString() || '0',
                                         name || 'Unknown'
                                     ], labelFormatter: (label) => `Date: ${label}` }), _jsx(Legend, { wrapperStyle: {
                                         fontSize: '12px',
                                         paddingTop: '10px'
-                                    } }), _jsx(Bar, { dataKey: "successCount", stackId: "checks", fill: "#10b981", name: "Successful Checks", radius: [2, 2, 0, 0] }), _jsx(Bar, { dataKey: "failureCount", stackId: "checks", fill: "#ef4444", name: "Failed Checks", radius: [2, 2, 0, 0] })] }, `cloudwatch-chart-${data.length}`) }) }) }));
+                                    } }), _jsx(Bar, { dataKey: "successCount", stackId: "checks", fill: "#10b981", name: "Successful Checks", radius: [2, 2, 0, 0] }), _jsx(Bar, { dataKey: "failureCount", stackId: "checks", fill: "#ef4444", name: "Failed Checks", radius: [2, 2, 0, 0] })] }, `cloudwatch-chart-${validData.length}`) }) }) }));
         } }));
 }

package/dist/components/admin/site-health/site-health-dependency-vulnerabilities.js

@@ -1,21 +1,15 @@
 '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';
 SiteHealthDependencyVulnerabilities.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthDependencyVulnerabilities({ siteName }) {
-    const fetchDependencyData = useCallback(async (site) => {
-        const response = await fetch(`/api/site-health/security?siteName=${encodeURIComponent(site)}`);
-        const result = await response.json();
-        if (!result.success) {
-            throw new Error(result.error || 'Failed to fetch dependency data');
-        }
-        return result;
-    }, []);
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Dependency Vulnerability", fetchData: fetchDependencyData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Dependency Vulnerability", endpoint: {
+            endpoint: '/api/site-health/security',
+            responseTransformer: (result) => result, // Result is already in the correct format
+        }, children: (data) => {
             if (!data) {
                 return (_jsx("p", { style: { color: '#6b7280' }, children: "No dependency data available for this site." }));
             }

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

@@ -9,20 +9,14 @@ SiteHealthGit.propTypes = {
     endDate: PropTypes.string,
 };
 export function SiteHealthGit({ siteName, startDate, endDate }) {
-    const fetchGitData = async (site) => {
-        const params = new URLSearchParams({ siteName: encodeURIComponent(site) });
-        if (startDate)
-            params.append('startDate', startDate);
-        if (endDate)
-            params.append('endDate', endDate);
-        const response = await fetch(`/api/site-health/github?${params.toString()}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch git data');
-        }
-        const data = await response.json();
-        return data;
-    };
-    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Git Push Notes", fetchData: fetchGitData, children: (data) => {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Git Push Notes", endpoint: {
+            endpoint: '/api/site-health/github',
+            params: {
+                ...(startDate && { startDate }),
+                ...(endDate && { endDate }),
+            },
+            responseTransformer: (result) => result, // Result is already in the correct format
+        }, children: (data) => {
             if (!data || !data.success) {
                 return (_jsx("p", { style: { color: '#6b7280' }, children: "No git data available for this site." }));
             }
@@ -32,7 +26,7 @@ export function SiteHealthGit({ siteName, startDate, endDate }) {
             // Prepare table data
             const tableData = (data.commits || []).map((commit) => ({
                 Date: new Date(commit.date).toLocaleDateString(),
-                Message: _jsx("span", { className: "health-truncate-text", title: commit.message, children: commit.message }),
+                Message: _jsx("span", { title: commit.message, children: commit.message }),
                 Version: commit.version ? (_jsx("span", { className: "health-version-tag", children: commit.version.split('~')[0] })) : (_jsx("span", { className: "health-text-muted", children: "-" }))
             }));
             return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteName.replace('-', ' ') }), _jsx("div", { className: "health-section-list", children: tableData.length === 0 ? (_jsx("p", { className: "health-empty-state", children: "No recent commits found" })) : (_jsx(Table, { id: "git-table", data: tableData, altRowColor: "#DDD" })) }), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(data.timestamp).toLocaleString()] })] }));