@pixelated-tech/components 3.5.13 → 3.6.0

package/dist/components/admin/site-health/site-health-performance.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 { formatAuditItem, getAuditScoreIcon, getScoreColor, formatScore } from './site-health-utils';
 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." }));
             }
@@ -24,162 +18,6 @@ export function SiteHealthPerformance({ siteName }) {
             if (siteData.status === 'error') {
                 return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", siteData.error] }));
             }
-            const getAuditScoreIcon = (score) => {
-                return getScoreIndicator(score).icon;
-            };
-            const getScoreColor = (score) => {
-                return getScoreIndicator(score).color;
-            };
-            const formatScore = (score) => {
-                if (score === null)
-                    return 'N/A';
-                return `${Math.round(score * 100)}%`;
-            };
-            // 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}`;
-                }
-                // Handle timing data with more context
-                if (item.duration && typeof item.duration === 'number') {
-                    const duration = item.duration;
-                    let context = '';
-                    if (item.url && typeof item.url === 'string') {
-                        context = ` for ${item.url}`;
-                    }
-                    else if (item.source && typeof item.source === 'string') {
-                        context = ` for ${item.source}`;
-                    }
-                    else if (item.name && typeof item.name === 'string') {
-                        context = ` for ${item.name}`;
-                    }
-                    else if (item.path && typeof item.path === 'string') {
-                        context = ` for ${item.path}`;
-                    }
-                    else if (item.request && typeof item.request === 'string') {
-                        context = ` for ${item.request}`;
-                    }
-                    return `${duration.toFixed(2)}ms${context}`;
-                }
-                // Handle response times
-                if (item.responseTime && typeof item.responseTime === 'number') {
-                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
-                    return `${item.responseTime.toFixed(2)}ms response time${url}`;
-                }
-                // Handle start/end times
-                if ((item.startTime || item.endTime) && typeof (item.startTime || item.endTime) === 'number') {
-                    const start = item.startTime && typeof item.startTime === 'number' ? item.startTime.toFixed(2) : '?';
-                    const end = item.endTime && typeof item.endTime === 'number' ? item.endTime.toFixed(2) : '?';
-                    const url = (item.url && typeof item.url === 'string') ? ` for ${item.url}` : '';
-                    return `${start}ms - ${end}ms${url}`;
-                }
-                // Handle transfer size with timing
-                if (item.transferSize && typeof item.transferSize === 'number' && item.duration && typeof item.duration === 'number') {
-                    const size = (item.transferSize / 1024).toFixed(1);
-                    const time = item.duration.toFixed(2);
-                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
-                    return `${size} KB in ${time}ms${url}`;
-                }
-                // Handle main thread time
-                if (item.mainThreadTime && typeof item.mainThreadTime === 'number') {
-                    return `${item.mainThreadTime.toFixed(1)}ms`;
-                }
-                // For other objects, try to find a meaningful display
-                if (item.group && typeof item.group === 'string') {
-                    return item.group;
-                }
-                if (item.type && typeof item.type === 'string') {
-                    return item.type;
-                }
-                // If we can't find anything meaningful, provide a generic description
-                // This handles raw timing data that might be from various performance metrics
-                if (typeof item === 'number') {
-                    return `${item.toFixed(2)}ms`;
-                }
-                if (item.value && typeof item.value === 'number') {
-                    const unit = item.unit || 'ms';
-                    return `${item.value.toFixed(2)}${unit}`;
-                }
-                return 'Performance metric data available';
-            };
             return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteData.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", siteData.url] }), _jsx("div", { style: { marginBottom: '1.5rem' }, children: _jsxs("div", { className: "health-score-item", style: { width: '100%' }, children: [_jsx("div", { className: "health-score-label", children: "Performance Score" }), _jsx("div", { className: "health-score-value", style: { color: getScoreColor(siteData.scores.performance) }, children: formatScore(siteData.scores.performance) }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
                                             width: siteData.scores.performance !== null ? `${siteData.scores.performance * 100}%` : '0%',
                                             backgroundColor: siteData.scores.performance !== null ? getScoreColor(siteData.scores.performance) : '#6b7280'

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

@@ -1,159 +1,18 @@
 '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';
 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) => {
-            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 more context
-                if (item.duration && typeof item.duration === 'number') {
-                    const duration = item.duration;
-                    let context = '';
-                    if (item.url && typeof item.url === 'string') {
-                        context = ` for ${item.url}`;
-                    }
-                    else if (item.source && typeof item.source === 'string') {
-                        context = ` for ${item.source}`;
-                    }
-                    else if (item.name && typeof item.name === 'string') {
-                        context = ` for ${item.name}`;
-                    }
-                    return `${duration.toFixed(2)}ms${context}`;
-                }
-                // Handle response times
-                if (item.responseTime && typeof item.responseTime === 'number') {
-                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
-                    return `${item.responseTime.toFixed(2)}ms response time${url}`;
-                }
-                // Handle start/end times
-                if ((item.startTime || item.endTime) && typeof (item.startTime || item.endTime) === 'number') {
-                    const start = item.startTime && typeof item.startTime === 'number' ? item.startTime.toFixed(2) : '?';
-                    const end = item.endTime && typeof item.endTime === 'number' ? item.endTime.toFixed(2) : '?';
-                    const url = (item.url && typeof item.url === 'string') ? ` for ${item.url}` : '';
-                    return `${start}ms - ${end}ms${url}`;
-                }
-                // Handle transfer size with timing
-                if (item.transferSize && typeof item.transferSize === 'number' && item.duration && typeof item.duration === 'number') {
-                    const size = (item.transferSize / 1024).toFixed(1);
-                    const time = item.duration.toFixed(2);
-                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
-                    return `${size} KB in ${time}ms${url}`;
-                }
-                // Handle main thread time
-                if (item.mainThreadTime && typeof item.mainThreadTime === 'number') {
-                    return `${item.mainThreadTime.toFixed(1)}ms`;
-                }
-                // For other objects, try to find a meaningful display
-                if (item.group && typeof item.group === 'string') {
-                    return item.group;
-                }
-                if (item.type && typeof item.type === 'string') {
-                    return item.type;
-                }
-                // If we can't find anything meaningful, provide a generic description
-                // This handles raw timing data that might be from various performance metrics
-                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}`;
-                }
-                return 'Details available';
-            };
+    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,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';
 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) => {
-            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 - 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,6 +1,6 @@
 '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";
@@ -8,7 +8,14 @@ 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,
 };
@@ -17,49 +24,67 @@ export function SiteHealthTemplate(props) {
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
+    // Default fetch function for endpoint-based requests
+    const fetchFromEndpoint = useCallback(async (useCache = true) => {
+        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);
-                }
-            }
-        };
         loadData();
-        return () => {
-            isMounted = false;
-        };
-    }, [typedProps.siteName, typedProps.fetchData]);
+    }, [loadData]);
     // 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." }));
             }