@pixelated-tech/components 3.3.5 → 3.4.0

package/dist/components/admin/site-health/site-health-core-web-vitals.integration.js

@@ -0,0 +1,208 @@
+"use server";
+const psiCache = new Map();
+const CACHE_TTL_SUCCESS = 60 * 60 * 1000; // 1 hour for successful results
+const CACHE_TTL_ERROR = 5 * 60 * 1000; // 5 minutes for error results
+// Clean up expired cache entries periodically
+setInterval(() => {
+    const now = Date.now();
+    for (const [key, entry] of psiCache.entries()) {
+        const ttl = entry.data.status === 'success' ? CACHE_TTL_SUCCESS : CACHE_TTL_ERROR;
+        if (now - entry.timestamp > ttl) {
+            psiCache.delete(key);
+        }
+    }
+}, 10 * 60 * 1000); // Clean up every 10 minutes
+export async function performCoreWebVitalsAnalysis(url, siteName, useCache = true) {
+    try {
+        // Check cache first (if caching is enabled)
+        const cacheKey = `${siteName}:${url}`;
+        if (useCache) {
+            const cached = psiCache.get(cacheKey);
+            if (cached) {
+                const ttl = cached.data.status === 'success' ? CACHE_TTL_SUCCESS : CACHE_TTL_ERROR;
+                if ((Date.now() - cached.timestamp) < ttl) {
+                    return cached.data;
+                }
+            }
+        }
+        // Fetch PSI data
+        const psiData = await fetchPSIData(url);
+        // Process the PSI data
+        const resultData = processPSIData(psiData, siteName, url);
+        // Cache successful results (if caching is enabled)
+        if (useCache) {
+            psiCache.set(cacheKey, {
+                data: resultData,
+                timestamp: Date.now()
+            });
+        }
+        return resultData;
+    }
+    catch (error) {
+        console.warn(`PSI API failed for ${siteName}:`, error);
+        // Return error status instead of mock data
+        const errorResult = {
+            site: siteName,
+            url: url,
+            metrics: {
+                cls: 0,
+                fid: 0,
+                lcp: 0,
+                fcp: 0,
+                ttfb: 0,
+                speedIndex: 0,
+                interactive: 0,
+                totalBlockingTime: 0,
+                firstMeaningfulPaint: 0,
+            },
+            scores: {
+                performance: 0,
+                accessibility: 0,
+                'best-practices': 0,
+                seo: 0,
+                pwa: 0,
+            },
+            categories: {
+                performance: { id: 'performance', title: 'Performance', score: null, audits: [] },
+                accessibility: { id: 'accessibility', title: 'Accessibility', score: null, audits: [] },
+                'best-practices': { id: 'best-practices', title: 'Best Practices', score: null, audits: [] },
+                seo: { id: 'seo', title: 'SEO', score: null, audits: [] },
+                pwa: { id: 'pwa', title: 'PWA', score: null, audits: [] },
+            },
+            timestamp: new Date().toISOString(),
+            status: 'error',
+            error: error instanceof Error ? error.message : 'PSI API failed',
+        };
+        // Cache error results with shorter TTL (5 minutes) (if caching is enabled)
+        if (useCache) {
+            psiCache.set(`${siteName}:${url}`, {
+                data: errorResult,
+                timestamp: Date.now()
+            });
+        }
+        return errorResult;
+    }
+}
+async function fetchPSIData(url) {
+    const apiKey = process.env.GOOGLE_API_KEY;
+    if (!apiKey) {
+        throw new Error('GOOGLE_API_KEY environment variable is not set');
+    }
+    const psiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&key=${apiKey}&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa`;
+    const fetchWithRetry = async (url, maxRetries = 2) => {
+        for (let attempt = 0; attempt <= maxRetries; attempt++) {
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 60000); // 60 second timeout
+                const response = await fetch(url, {
+                    signal: controller.signal,
+                    headers: {
+                        'User-Agent': 'Mozilla/5.0 (compatible; SiteHealthMonitor/1.0)'
+                    }
+                });
+                clearTimeout(timeoutId);
+                return response;
+            }
+            catch (error) {
+                if (attempt === maxRetries || error instanceof Error && error.name === 'AbortError') {
+                    const errorMessage = error instanceof Error && error.name === 'AbortError'
+                        ? 'PSI API request timed out after 60 seconds'
+                        : `PSI API request failed: ${error instanceof Error ? error.message : 'Unknown error'}`;
+                    throw new Error(errorMessage);
+                }
+                // Wait before retry (exponential backoff)
+                await new Promise(resolve => setTimeout(resolve, Math.pow(2, attempt) * 1000));
+            }
+        }
+        throw new Error('Max retries exceeded');
+    };
+    const psiResponse = await fetchWithRetry(psiUrl);
+    if (!psiResponse.ok) {
+        // Log the error response for debugging
+        const errorText = await psiResponse.text();
+        console.error(`PSI API error for ${url}:`, {
+            status: psiResponse.status,
+            statusText: psiResponse.statusText,
+            url: psiUrl,
+            response: errorText
+        });
+        throw new Error(`PSI API returned ${psiResponse.status}: ${psiResponse.statusText}`);
+    }
+    const psiData = await psiResponse.json();
+    // Check if we have valid data
+    if (psiData.lighthouseResult?.audits &&
+        Object.keys(psiData.lighthouseResult.audits).length > 0) {
+        return psiData;
+    }
+    else {
+        // PSI API returned data but no audits - likely rate limited or invalid response
+        throw new Error('Invalid PSI API response or rate limited');
+    }
+}
+function processPSIData(psiData, siteName, url) {
+    const audits = psiData.lighthouseResult.audits;
+    const categories = psiData.lighthouseResult.categories;
+    // Extract metrics with proper fallbacks
+    const realMetrics = {
+        cls: audits['cumulative-layout-shift']?.numericValue || audits['cumulative-layout-shift']?.displayValue ? parseFloat(audits['cumulative-layout-shift'].displayValue || audits['cumulative-layout-shift'].numericValue) : 0,
+        fid: audits['max-potential-fid']?.numericValue || audits['max-potential-fid']?.displayValue ? parseFloat(audits['max-potential-fid'].displayValue || audits['max-potential-fid'].numericValue) : 0,
+        lcp: audits['largest-contentful-paint']?.numericValue || audits['largest-contentful-paint']?.displayValue ? parseFloat(audits['largest-contentful-paint'].displayValue || audits['largest-contentful-paint'].numericValue) : 0,
+        fcp: audits['first-contentful-paint']?.numericValue || audits['first-contentful-paint']?.displayValue ? parseFloat(audits['first-contentful-paint'].displayValue || audits['first-contentful-paint'].numericValue) : 0,
+        ttfb: audits['server-response-time']?.numericValue ? audits['server-response-time'].numericValue * 1000 : audits['server-response-time']?.displayValue ? parseFloat(audits['server-response-time'].displayValue) * 1000 : 0,
+        speedIndex: audits['speed-index']?.numericValue || audits['speed-index']?.displayValue ? parseFloat(audits['speed-index'].displayValue || audits['speed-index'].numericValue) : 0,
+        interactive: audits['interactive']?.numericValue || audits['interactive']?.displayValue ? parseFloat(audits['interactive'].displayValue || audits['interactive'].numericValue) : 0,
+        totalBlockingTime: audits['total-blocking-time']?.numericValue || audits['total-blocking-time']?.displayValue ? parseFloat(audits['total-blocking-time'].displayValue || audits['total-blocking-time'].numericValue) : 0,
+        firstMeaningfulPaint: audits['first-meaningful-paint']?.numericValue || audits['first-meaningful-paint']?.displayValue ? parseFloat(audits['first-meaningful-paint'].displayValue || audits['first-meaningful-paint'].numericValue) : 0,
+    };
+    // Extract category scores
+    const scores = {
+        performance: categories?.performance?.score ?? null,
+        accessibility: categories?.accessibility?.score ?? null,
+        'best-practices': categories?.['best-practices']?.score ?? null,
+        seo: categories?.seo?.score ?? null,
+        pwa: categories?.pwa?.score ?? null,
+    };
+    // Extract category details with audits
+    const categoryDetails = {
+        performance: extractCategoryData(categories?.performance, audits),
+        accessibility: extractCategoryData(categories?.accessibility, audits),
+        'best-practices': extractCategoryData(categories?.['best-practices'], audits),
+        seo: extractCategoryData(categories?.seo, audits),
+        pwa: extractCategoryData(categories?.pwa, audits),
+    };
+    return {
+        site: siteName,
+        url: url,
+        metrics: realMetrics,
+        scores: scores,
+        categories: categoryDetails,
+        timestamp: new Date().toISOString(),
+        status: 'success',
+    };
+}
+function extractCategoryData(category, audits) {
+    if (!category) {
+        return { id: 'unknown', title: 'Unknown', score: null, audits: [] };
+    }
+    const categoryAudits = category.auditRefs?.map((ref) => {
+        const audit = audits[ref.id];
+        if (!audit)
+            return null;
+        return {
+            id: audit.id,
+            title: audit.title,
+            description: audit.description,
+            score: audit.score,
+            scoreDisplayMode: audit.scoreDisplayMode,
+            displayValue: audit.displayValue,
+            numericValue: audit.numericValue,
+            details: audit.details,
+        };
+    }).filter(Boolean) || [];
+    return {
+        id: category.id,
+        title: category.title,
+        score: category.score,
+        audits: categoryAudits,
+    };
+}

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

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SiteHealthTemplate } from './site-health-template';
+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) => {
+            if (!data) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No dependency data available for this site." }));
+            }
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteName.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", data.url] }), _jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "Overall Status" }), _jsx("div", { className: "health-score-value", style: {
+                                        color: data.status === 'Secure' ? '#10b981' :
+                                            data.status === 'Low Risk' ? '#f59e0b' :
+                                                data.status === 'Moderate Risk' ? '#f59e0b' :
+                                                    data.status === 'High Risk' ? '#ef4444' :
+                                                        data.status === 'Critical' ? '#ef4444' :
+                                                            '#6b7280'
+                                    }, children: data.status }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: data.status === 'Secure' ? '100%' :
+                                                data.status === 'Low Risk' ? '75%' :
+                                                    data.status === 'Moderate Risk' ? '50%' :
+                                                        data.status === 'High Risk' ? '25%' :
+                                                            data.status === 'Critical' ? '10%' : '0%',
+                                            backgroundColor: data.status === 'Secure' ? '#10b981' :
+                                                data.status === 'Low Risk' ? '#f59e0b' :
+                                                    data.status === 'Moderate Risk' ? '#f59e0b' :
+                                                        data.status === 'High Risk' ? '#ef4444' :
+                                                            data.status === 'Critical' ? '#ef4444' : '#6b7280'
+                                        } }) })] }) }), _jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", style: { color: '#10b981' }, children: "\u2713" }), _jsx("div", { className: "health-audit-content", children: _jsxs("span", { className: "health-audit-title", children: ["Dependencies: ", data.totalDependencies || data.dependencies || 0] }) })] }), data.vulnerabilities && data.vulnerabilities.length > 0 && (_jsxs("div", { children: [_jsxs("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: ["Vulnerabilities (", data.summary.total, ")"] }), _jsx("div", { className: "space-y-2", children: data.vulnerabilities.map((vuln, index) => (_jsx("div", { className: `health-vulnerability-item health-vulnerability-${vuln.severity}`, children: _jsxs("div", { className: "health-vulnerability-header", children: [_jsx("span", { className: "health-vulnerability-severity", children: vuln.severity }), _jsxs("div", { children: [_jsx("span", { className: "health-vulnerability-name", children: vuln.name }), vuln.title && (_jsx("p", { className: "health-vulnerability-details", children: vuln.title })), _jsxs("div", { className: "health-vulnerability-meta", children: [_jsxs("span", { className: "health-vulnerability-range", children: ["Range: ", vuln.range] }), vuln.fixAvailable && (_jsx("span", { className: "health-vulnerability-fix", children: "\u2713 Fix available" }))] }), vuln.url && (_jsx("a", { href: vuln.url, target: "_blank", rel: "noopener noreferrer", className: "health-vulnerability-link", children: "View details \u2192" }))] })] }) }, index))) })] })), (!data.vulnerabilities || data.vulnerabilities.length === 0) && data.status === 'Secure' && (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", style: { color: '#10b981' }, children: "\u2713" }), _jsx("div", { className: "health-audit-content", children: _jsx("span", { className: "health-audit-title", children: "No vulnerabilities found" }) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(data.timestamp).toLocaleString()] })] }));
+        } }));
+}

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

@@ -0,0 +1,81 @@
+/**
+ * Git Health Integration Services
+ * Server-side utilities for analyzing git repository health
+ */
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs';
+import path from 'path';
+const execAsync = promisify(exec);
+/**
+ * Analyze git repository health for a site
+ */
+export async function analyzeGitHealth(siteConfig, startDate, endDate) {
+    try {
+        const { localPath } = siteConfig;
+        // Check if the local path exists and is a git repository
+        if (!fs.existsSync(localPath)) {
+            throw new Error('Site directory not found');
+        }
+        const gitDir = path.join(localPath, '.git');
+        if (!fs.existsSync(gitDir)) {
+            throw new Error('Not a git repository');
+        }
+        // Build git log command with date range
+        let sinceOption = '--since="30 days ago"';
+        if (startDate && endDate) {
+            sinceOption = `--since="${startDate}" --before="${endDate}"`;
+        }
+        else if (startDate) {
+            sinceOption = `--since="${startDate}"`;
+        }
+        else if (endDate) {
+            sinceOption = `--before="${endDate}"`;
+        }
+        // Get git log
+        const gitCommand = `git log --oneline ${sinceOption} --pretty=format:"%H|%ad|%s|%an" --date=iso`;
+        const { stdout: logOutput } = await execAsync(gitCommand, { cwd: localPath });
+        const commits = logOutput
+            .trim()
+            .split('\n')
+            .filter(line => line.trim())
+            .map(line => {
+            const [hash, date, ...messageParts] = line.split('|');
+            const message = messageParts.slice(0, -1).join('|');
+            const author = messageParts[messageParts.length - 1];
+            return {
+                hash,
+                date,
+                message,
+                author
+            };
+        })
+            .filter(commit => !/^\d+\.\d+\.\d+$/.test(commit.message.trim())) // Filter out version-only commits
+            .slice(0, (startDate && endDate) ? 100 : 20); // Limit to more commits when date range is specified
+        // Try to associate commits with versions
+        for (const commit of commits) {
+            try {
+                const { stdout: tagOutput } = await execAsync(`git describe --tags --contains ${commit.hash} 2>/dev/null || echo ""`, { cwd: localPath });
+                if (tagOutput.trim()) {
+                    commit.version = tagOutput.trim();
+                }
+            }
+            catch {
+                // Ignore errors for commits not associated with tags
+            }
+        }
+        return {
+            commits,
+            timestamp: new Date().toISOString(),
+            status: 'success'
+        };
+    }
+    catch (error) {
+        return {
+            commits: [],
+            timestamp: new Date().toISOString(),
+            status: 'error',
+            error: error instanceof Error ? error.message : 'Failed to analyze git health'
+        };
+    }
+}

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

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Table } from '@pixelated-tech/components';
+import { SiteHealthTemplate } from './site-health-template';
+export function SiteHealthGit({ siteName, startDate, endDate }) {
+    const fetchGitData = async (site) => {
+        const params = new URLSearchParams({ site: encodeURIComponent(site) });
+        if (startDate)
+            params.append('startDate', startDate);
+        if (endDate)
+            params.append('endDate', endDate);
+        const response = await fetch(`/api/site-health/git?${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) => {
+            if (!data || !data.success) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No git data available for this site." }));
+            }
+            if (data.error) {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", data.error] }));
+            }
+            // Prepare table data
+            const tableData = (data.commits || []).map((commit) => ({
+                Date: new Date(commit.date).toLocaleDateString(),
+                Message: _jsx("span", { className: "max-w-xs truncate inline-block", title: commit.message, children: commit.message }),
+                Version: commit.version ? (_jsx("span", { className: "px-2 py-1 text-xs bg-green-100 text-green-800 rounded", children: commit.version.split('~')[0] })) : (_jsx("span", { className: "text-gray-400", children: "-" }))
+            }));
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteName.replace('-', ' ') }), _jsx("div", { className: "space-y-4", children: tableData.length === 0 ? (_jsx("p", { className: "text-gray-500 text-center py-4", 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()] })] }));
+        } }));
+}

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

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

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

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import { SiteHealthTemplate } from './site-health-template';
+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("div", { className: "flex items-center justify-center h-64", children: _jsx("div", { className: "text-gray-500", 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) => [
+                                        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}`) }) }) }));
+        } }));
+}

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

@@ -0,0 +1,118 @@
+/**
+ * Google Search Console Integration Services
+ * 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
+        };
+    }
+}