@pixelated-tech/components 3.3.5 → 3.4.0

package/dist/components/admin/site-health/site-health-google-search-console.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, Legend, ResponsiveContainer } from 'recharts';
+import { SiteHealthTemplate } from './site-health-template';
+export function SiteHealthGoogleSearchConsole({ siteName, startDate, endDate }) {
+    const fetchSearchConsoleData = async (site) => {
+        const params = new URLSearchParams({ siteName: site });
+        if (startDate)
+            params.append('startDate', startDate);
+        if (endDate)
+            params.append('endDate', endDate);
+        const response = await fetch(`/api/site-health/google-search-console?${params.toString()}`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch search console data: ${response.status}`);
+        }
+        const result = await response.json();
+        if (!result.success) {
+            // Handle specific error types
+            if (result.error?.includes('invalid_grant') || result.error?.includes('authentication')) {
+                throw new Error('Google Search Console authentication expired. Please re-authorize the application.');
+            }
+            else if (result.error?.includes('GSC Site URL not configured')) {
+                throw new Error('GSC Site URL not configured for this site');
+            }
+            else {
+                throw new Error(result.error || 'Failed to load search console data');
+            }
+        }
+        return result.data;
+    };
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Google Search Console", columnSpan: 2, fetchData: fetchSearchConsoleData, children: (data) => {
+            if (!data || data.length === 0) {
+                return (_jsx("div", { className: "flex items-center justify-center h-64", children: _jsx("div", { className: "text-gray-500", children: "No indexing data available for the selected date range" }) }));
+            }
+            return (_jsx("div", { children: _jsx("div", { style: { width: '100%', height: '400px', border: '1px solid #ddd' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, margin: { top: 40, right: 30, left: 20, bottom: 5 }, children: [_jsx("text", { x: "50%", y: 20, textAnchor: "middle", fontSize: "16", fontWeight: "bold", fill: "#374151", children: "Impressions vs Clicks (Current vs Previous Period)" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 } }), _jsx(Tooltip, { formatter: (value, name) => [
+                                        value?.toLocaleString() || '0',
+                                        name || 'Unknown'
+                                    ], labelFormatter: (label) => `Date: ${label}` }), _jsx(Legend, { wrapperStyle: {
+                                        fontSize: '12px',
+                                        paddingTop: '10px'
+                                    } }), _jsx(Bar, { dataKey: "currentImpressions", fill: "#3b82f6", name: "Current Impressions", radius: [2, 2, 0, 0] }), _jsx(Bar, { dataKey: "currentClicks", fill: "#10b981", name: "Current Clicks", radius: [2, 2, 0, 0] }), _jsx(Line, { type: "monotone", dataKey: "previousImpressions", stroke: "#ef4444", strokeWidth: 2, strokeDasharray: "5 5", dot: { fill: '#ef4444', strokeWidth: 2, r: 3 }, activeDot: { r: 5, stroke: '#ef4444', strokeWidth: 2 }, name: "Previous Impressions" }), _jsx(Line, { type: "monotone", dataKey: "previousClicks", stroke: "#f59e0b", strokeWidth: 2, strokeDasharray: "5 5", dot: { fill: '#f59e0b', strokeWidth: 2, r: 3 }, activeDot: { r: 5, stroke: '#f59e0b', strokeWidth: 2 }, name: "Previous Clicks" })] }) }) }) }));
+        } }));
+}

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

@@ -0,0 +1,71 @@
+// Shared constants and utilities for health card visual indicators
+//
+// USAGE:
+// - SCORE_SCALE: For metrics with numerical scores (0-1 range like PageSpeed)
+// - IMPACT_SCALE: For severity-based metrics (critical, serious, moderate, minor like axe-core)
+// - getScoreIndicator(score): Returns {icon, color} for numerical scores
+// - getImpactIndicator(impact): Returns {icon, color} for severity levels
+// - getPassingIndicator(): Returns {icon, color} for successful/passing states
+// - getIncompleteIndicator(): Returns {icon, color} for unknown/incomplete states
+//
+// EXAMPLE:
+// import { getScoreIndicator, getImpactIndicator } from './health-indicators';
+// const indicator = getScoreIndicator(0.85); // Returns {icon: '🟢', color: '#10b981'}
+// const impact = getImpactIndicator('critical'); // Returns {icon: '🔴', color: '#dc2626'}
+export const HEALTH_INDICATORS = {
+    CRITICAL: '🔴',
+    SERIOUS: '🟠',
+    MODERATE: '🟡',
+    MINOR: '⚪',
+    PASSING: '🟢',
+    UNKNOWN: '⚪'
+};
+export const HEALTH_COLORS = {
+    CRITICAL: '#dc2626', // red-600
+    SERIOUS: '#ea580c', // orange-600
+    MODERATE: '#d97706', // amber-600
+    MINOR: '#ca8a04', // yellow-600
+    PASSING: '#10b981', // emerald-500
+    UNKNOWN: '#6b7280' // gray-500
+};
+// Score-based scale (used by PageSpeed and similar metrics)
+export const SCORE_SCALE = {
+    EXCELLENT: { min: 0.9, icon: HEALTH_INDICATORS.PASSING, color: HEALTH_COLORS.PASSING },
+    GOOD: { min: 0.7, icon: HEALTH_INDICATORS.MODERATE, color: HEALTH_COLORS.MODERATE },
+    NEEDS_IMPROVEMENT: { min: 0.5, icon: HEALTH_INDICATORS.SERIOUS, color: HEALTH_COLORS.SERIOUS },
+    POOR: { min: 0, icon: HEALTH_INDICATORS.CRITICAL, color: HEALTH_COLORS.CRITICAL }
+};
+// Impact-based scale (used by axe-core and similar tools)
+export const IMPACT_SCALE = {
+    CRITICAL: { icon: HEALTH_INDICATORS.CRITICAL, color: HEALTH_COLORS.CRITICAL },
+    SERIOUS: { icon: HEALTH_INDICATORS.SERIOUS, color: HEALTH_COLORS.SERIOUS },
+    MODERATE: { icon: HEALTH_INDICATORS.MODERATE, color: HEALTH_COLORS.MODERATE },
+    MINOR: { icon: HEALTH_INDICATORS.MINOR, color: HEALTH_COLORS.MINOR }
+};
+// Utility functions
+export function getScoreIndicator(score) {
+    if (score === null)
+        return { icon: HEALTH_INDICATORS.UNKNOWN, color: HEALTH_COLORS.UNKNOWN };
+    if (score >= SCORE_SCALE.EXCELLENT.min)
+        return SCORE_SCALE.EXCELLENT;
+    if (score >= SCORE_SCALE.GOOD.min)
+        return SCORE_SCALE.GOOD;
+    if (score >= SCORE_SCALE.NEEDS_IMPROVEMENT.min)
+        return SCORE_SCALE.NEEDS_IMPROVEMENT;
+    return SCORE_SCALE.POOR;
+}
+export function getImpactIndicator(impact) {
+    switch (impact.toLowerCase()) {
+        case 'critical': return IMPACT_SCALE.CRITICAL;
+        case 'serious': return IMPACT_SCALE.SERIOUS;
+        case 'moderate': return IMPACT_SCALE.MODERATE;
+        case 'minor': return IMPACT_SCALE.MINOR;
+        default: return { icon: HEALTH_INDICATORS.UNKNOWN, color: HEALTH_COLORS.UNKNOWN };
+    }
+}
+export function getPassingIndicator() {
+    return { icon: HEALTH_INDICATORS.PASSING, color: HEALTH_COLORS.PASSING };
+}
+export function getIncompleteIndicator() {
+    return { icon: HEALTH_INDICATORS.UNKNOWN, color: HEALTH_COLORS.UNKNOWN };
+}