@pixelated-tech/components 3.4.3 → 3.5.0

package/README.md

@@ -268,7 +268,7 @@ npm install @pixelated-tech/components
 import { Accordion, Callout } from '@pixelated-tech/components';
 ```
 
-For detailed usage examples and API documentation, see the [Component Reference Guide](README.COMPONENTS.md).
+For detailed usage examples and API documentation, see the [Component Reference Guide](docs/components.md).
 
 ### Storybook Interactive Demos
 
@@ -282,71 +282,22 @@ npm run storybook
 **Access locally at:** `http://localhost:6006`
 
 
+See the [open issues](https://github.com/brianwhaley/pixelated-components/issues) for a full list of proposed features (and known issues).
+
+
+
+
+
 <!-- ROADMAP -->
-## Roadmap
-
-### New Components
-- [ ] **IN PROGRESS** - Testimonial Block (Nextdoor/Yelp/Google): ingest review feeds + render carousel/grid.
-- [ ] **ON HOLD** LinkedIn Recommendations Integration (Not possible with current LinkedIn API)
-- [ ] **ON HOLD** eBay Feedback Integration - requires user OAuth login
-- [ ] **ON HOLD** Yelp Recommendations integration (Cost Prohibitive)
-- [ ] Instagram Image Integration for Carousels
-- [ ] Shopify Integration
-- [ ] Quickbooks Integration
-- [ ] Buffer Integration (or Sendible, Sprout Social, Hootsuite)
-- [ ] Zapier Integration
-- [ ] Hero Banner: headline, subtext, CTA, background image/video, overlay.
-- [ ] Accessibility Enhancer: wrapper component that automatically improves accessibility across Pixelated sites by adding ARIA labels, roles, and states to existing components. Includes color contrast checking, keyboard navigation helpers, alt-text suggestions for images, and automated accessibility audits.
-- [ ] SEO Dashboard with AI Integration: component that analyzes site content, suggests optimizations, integrates with AI for meta descriptions and keyword research.
-
-### CI / CD Improvements
-- [ ] Add CI workflow to run tests and lints on pull requests.
-
-### Component Improvements
-- [ ] Implement minimal `createContentfulImageURLs` with single `/images` sitemap entry.
-- [ ] Review Contentful helper functions for per-page mapping capability.
-- [ ] Implement `createContentfulImageURLs` per-page mapping with `contentType` & `pageField` config.
-- [ ] Align typography to `--font-sizeN` clamp variables.
-- [ ] Provide Cloudinary transforms presets for image components.
-- [ ] find a better solution than to generate image via build script in amplify for json for sitemap creation
-- [ ] **SocialCards Component**: Fix state initialization to track prop changes properly.
-- [ ] **Modal Component**: Clarify content source pattern (accepts both `modalContent` and `children`).
-- [ ] **Carousel Component**: Fix active card state reset when `props.cards` changes.
-- [ ] **NerdJoke Component**: Add props to useEffect dependencies if endpoint becomes configurable.
-- [ ] **GoogleReviews Component**: Add carousel/grid display modes.
-- [ ] **GoogleReviews Component**: Add API key to config provider instead of hardcoding.
-- [ ] **Instagram Component**: Add accessToken and userId to config provider for centralized API credentials.
-- [ ] **Critters Integration**: Explore adding critters CSS inlining tool for improved page load performance and critical CSS optimization.
-
-### Platform Enhancements
-- [ ] **Project Scaffolding CLI**: Interactive CLI tool that generates complete Next.js projects with pixelated-components pre-configured, including routes.json, layout.tsx, package.json, and basic page structure
-- [ ] **Template Marketplace**: Pre-built industry-specific templates (restaurant, law firm, contractor, etc.) that users can clone and customize
-- [ ] **Configuration Wizard**: Step-by-step setup wizard that collects business info, generates site configuration, and creates initial content structure
-- [ ] **Content Migration Tools**: Automated importers for WordPress, Squarespace, Wix, and other platforms to migrate content to pixelated sites
-- [ ] **A/B Testing Framework**: Built-in experimentation system for testing different layouts, content, and CTAs with automatic winner selection
-- [ ] **Personalization Engine**: Dynamic content delivery based on user behavior, location, and preferences
-- [ ] **Hot Module Replacement for Configs**: Live preview of configuration changes without full rebuilds
-- [ ] **Automated Dependency Updates**: Smart update system that tests component changes across all sites before deployment
-- [ ] **Rollback System**: One-click rollback to previous versions with automatic database and asset restoration
-- [ ] **Performance Budget Tracker**: Automated monitoring of Core Web Vitals with alerts when sites exceed performance budgets
-- [ ] **ConfigBuilder SEO Enhancement**: Upgrade ConfigBuilder with AI-powered meta description generation, keyword optimization suggestions, and automated schema markup
-- [ ] **Conversion Funnel Builder**: Visual funnel creation with automated tracking, A/B testing, and optimization recommendations
-- [ ] **Automated Security Scanner**: Regular security audits with vulnerability detection and automated fixes
-- [ ] **GDPR Compliance Toolkit**: Automated cookie consent, data mapping, and privacy policy generation
-- [ ] **API Gateway**: Unified API management for connecting to CRM, email marketing, payment processors, and other business tools
-- [ ] **Webhook Automation**: Event-driven automation for form submissions, new content, user registrations, and business workflows
-- [ ] **Third-Party Sync Engine**: Bidirectional sync with tools like HubSpot, Mailchimp, QuickBooks, and project management systems
-- [ ] **Testing Strategy for Config Failure Scenarios**: Comprehensive testing framework for config-dependent components and error handling
-  - Test components with missing config providers
-  - Test error pages without config dependencies  
-  - Test app initialization with invalid environment variables
-  - Include chaos engineering tests that simulate config failures
-- [ ] **Documentation Auto-Generator**: Automatically generated API docs, component usage guides, and deployment instructions
+## 🚀 Roadmap
 
+See our detailed [Roadmap](docs/roadmap.md) for planned improvements and refactoring initiatives.
 
-See the [open issues](https://github.com/brianwhaley/pixelated-components/issues) for a full list of proposed features (and known issues).
 
+<!-- TESTING -->
+## 🧪 Testing
 
+See our comprehensive [Testing Documentation](docs/testing.md) for test coverage, setup, and strategies.
 
 
 <!-- CONTRIBUTING -->
@@ -396,136 +347,6 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 
 
-## 🧪 Testing
-
-### Overview
-
-**Current Status**: ✅ 2,387 tests passing across 79 test files
-
-| Metric | Value |
-|--------|-------|
-| Test Files | 79 |
-| Total Tests | 2,387 |
-| Coverage (Statements) | 77.13% |
-| Coverage (Lines) | 79.73% |
-| Coverage (Functions) | 77.98% |
-| Coverage (Branches) | 67.55% |
-| Test Framework | Vitest 4.x |
-| Testing Library | @testing-library/react + jsdom |
-
-### Quick Start
-
-```bash
-npm run test              # Watch mode
-npm run test:ui          # Interactive UI dashboard
-npm run test:coverage    # Generate coverage reports
-npm run test:run         # Single run (for CI)
-```
-
-### Component Coverage
-
-**Component Coverage Summary**
-
-#### Component Coverage (Sorted by Statement Coverage)
-- **site-health-cache.ts**: 100% statements *(new shared caching utility)*
-- **sites.integration.ts**: 100% statements *(new site management functions)*
-- **site-health-indicators.ts**: 100% statements
-- **tiles.tsx**: 100% statements
-- **google.reviews.functions.ts**: 100% statements
-- **accordion.tsx**: 100% statements
-- **modal.tsx**: 100% statements
-- **tab.tsx**: 100% statements
-- **ComponentPropertiesForm.tsx**: 100% statements
-- **ComponentSelector.tsx**: 100% statements
-- **ComponentTree.tsx**: 100% statements
-- **formvalidations.tsx**: 100% statements
-- **googlesearch.tsx**: 100% statements
-- **schema-localbusiness.tsx**: 100% statements
-- **schema-recipe.tsx**: 100% statements
-- **schema-services.tsx**: 100% statements
-- **schema-website.tsx**: 100% statements
-- **schema-blogposting.tsx**: 100% statements
-- **buzzwordbingo.tsx**: 100% statements
-- **markdown.tsx**: 100% statements
-- **timeline.tsx**: 100% statements
-- **config.client.tsx**: 100% statements
-- **sidepanel.tsx**: 97.5% statements
-- **config.ts**: 96.55% statements
-- **google.reviews.components.tsx**: 95.83% statements
-- **schema-blogposting.tsx**: 95.24% statements
-- **recipe.tsx**: 94.59% statements
-- **resume.tsx**: 94.38% statements
-- **contentful.delivery.ts**: 92.5% statements
-- **css.tsx**: 91.43% statements
-- **functions.ts**: 90.91% statements
-- **menu-expando.tsx**: 90.12% statements
-- **site-health-cloudwatch.tsx**: 88% statements
-- **loading.tsx**: 85.71% statements
-- **SaveLoadSection.tsx**: 84.85% statements
-- **table.tsx**: 84.48% statements
-- **ConfigBuilder.tsx**: 83.52% statements
-- **cloudinary.ts**: 83.33% statements
-- **formcomponents.tsx**: 83.33% statements
-- **form.tsx**: 83.2% statements
-- **shoppingcart.functions.ts**: 81.7% statements
-- **callout.tsx**: 80% statements
-- **microinteractions.tsx**: 80% statements
-- **smartimage.tsx**: 82.75% statements
-- **sitemap.ts**: 76.06% statements
-- **manifest.tsx**: 75% statements
-- **carousel.tsx**: 71.7% statements
-- **nerdjoke.tsx**: 69.44% statements
-- **menu-accordion.tsx**: 68.47% statements
-- **semantic.tsx**: 63.51% statements
-- **componentMap.tsx**: 60% statements
-- **propTypeIntrospection.tsx**: 60% statements
-- **wordpress.functions.ts**: 51.43% statements
-- **config.server.tsx**: 50% statements
-- **PageEngine.tsx**: 48% statements
-- **componentGeneration.tsx**: 38.89% statements
-- **socialcard.tsx**: 29.51% statements
-- **PageBuilderUI.tsx**: 26.67% statements
-
-### Testing Next Steps
-
-#### Integration Testing Gaps
-- [ ] **Cross-component interactions** - Test how components work together (e.g., forms with validation, carousels with loading states)
-- [ ] **Form validation edge cases** - Test URL validation, required fields, and complex validation rules under various conditions
-- [ ] **CMS API integrations** - Test API failures, rate limiting, authentication errors, and network timeouts
-- [ ] **Responsive design breakpoints** - Test component behavior across different screen sizes and device types
-- [ ] **Accessibility (a11y) compliance** - Test keyboard navigation, screen reader compatibility, and ARIA attributes
-
-### Test Configuration
-
-
-**Coverage Targets** (configured in `vitest.config.ts`):
-- **Statements**: 70% threshold
-- **Lines**: 70% threshold
-- **Functions**: 70% threshold
-- **Branches**: 60% threshold
-
-**Coverage Thresholds in vitest.config.ts**:
-- Lines: 70% threshold
-- Functions: 70% threshold
-- Branches: 60% threshold
-- Statements: 70% threshold
-
-**Test Environment**: jsdom with @testing-library/react  
-**Test Pattern**: Data-focused validation + behavioral testing
-
-### Tools & Dependencies
-
-| Tool | Purpose |
-|------|---------|
-| Vitest 4.x | Test runner |
-| @testing-library/react | Component testing utilities |
-| jsdom | DOM environment for tests |
-| v8 | Coverage reporting |
-
-
-
-
-
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 [contributors-shield]: https://img.shields.io/github/contributors/brianwhaley/pixelated-components.svg?style=for-the-badge

package/dist/components/admin/componentusage/componentAnalysis.js

@@ -71,13 +71,17 @@ export async function checkComponentUsage(sitePath, componentName) {
             ];
             for (const file of files) {
                 const content = await fs.readFile(file, 'utf-8');
-                if (content.includes('@pixelated-tech/components')) {
+                if (content.includes('@pixelated-tech/components') ||
+                    content.includes('@pixelated-tech/components/adminclient') ||
+                    content.includes('@pixelated-tech/components/adminserver')) {
                     // Check if any semantic export is imported (case insensitive)
                     for (const exportName of semanticExports) {
                         const contentLower = content.toLowerCase();
                         const exportNameLower = exportName.toLowerCase();
                         if (contentLower.includes(exportNameLower) ||
-                            new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components`, 'i').test(content)) {
+                            new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components`, 'i').test(content) ||
+                            new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components/adminclient`, 'i').test(content) ||
+                            new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components/adminserver`, 'i').test(content)) {
                             return true;
                         }
                     }
@@ -92,9 +96,13 @@ export async function checkComponentUsage(sitePath, componentName) {
             // Check for import statements - look for the actual export name (case insensitive)
             const contentLower = content.toLowerCase();
             const exportNameLower = exportName.toLowerCase();
-            if (content.includes('@pixelated-tech/components') &&
+            if ((content.includes('@pixelated-tech/components') ||
+                content.includes('@pixelated-tech/components/adminclient') ||
+                content.includes('@pixelated-tech/components/adminserver')) &&
                 (contentLower.includes(exportNameLower) ||
-                    new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components`, 'i').test(content))) {
+                    new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components`, 'i').test(content) ||
+                    new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components/adminclient`, 'i').test(content) ||
+                    new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components/adminserver`, 'i').test(content))) {
                 return true;
             }
         }

package/dist/components/admin/componentusage/componentDiscovery.js

@@ -44,19 +44,33 @@ function getPixelatedComponentsPath() {
     }
 }
 /**
- * Discover components dynamically by parsing the pixelated-components index
+ * Discover components dynamically by parsing the pixelated-components index files
  * This runs on the server side during API calls
  */
 export async function discoverComponentsFromLibrary() {
     try {
         // Get the pixelated-components package path
         const pixelatedPath = getPixelatedComponentsPath();
-        // Look for the built dist/index.js file
+        const componentNames = [];
+        // Read from main index.js
         const indexPath = path.join(pixelatedPath, 'dist', 'index.js');
-        // Read and parse the index.js file
-        const indexContent = fs.readFileSync(indexPath, 'utf-8');
-        const componentNames = parseComponentExports(indexContent);
-        return componentNames;
+        if (fs.existsSync(indexPath)) {
+            const indexContent = fs.readFileSync(indexPath, 'utf-8');
+            componentNames.push(...parseComponentExports(indexContent));
+        }
+        // Read from adminclient index
+        const adminClientPath = path.join(pixelatedPath, 'dist', 'index.adminclient.js');
+        if (fs.existsSync(adminClientPath)) {
+            const adminClientContent = fs.readFileSync(adminClientPath, 'utf-8');
+            componentNames.push(...parseComponentExports(adminClientContent));
+        }
+        // Read from adminserver index
+        const adminServerPath = path.join(pixelatedPath, 'dist', 'index.adminserver.js');
+        if (fs.existsSync(adminServerPath)) {
+            const adminServerContent = fs.readFileSync(adminServerPath, 'utf-8');
+            componentNames.push(...parseComponentExports(adminServerContent));
+        }
+        return [...new Set(componentNames)].sort(); // Remove duplicates and sort alphabetically
     }
     catch (error) {
         console.error('Error in dynamic component discovery:', error);

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

@@ -1,8 +1,12 @@
 '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';
+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)}`);
@@ -116,7 +120,7 @@ export function SiteHealthAccessibility({ siteName }) {
                                             width: `${(siteData.scores.accessibility || 0) * 100}%`,
                                             backgroundColor: getScoreColor(siteData.scores.accessibility)
                                         } }) })] }) })), siteData.categories.accessibility && siteData.categories.accessibility.audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Accessibility Issues & Recommendations" }), _jsx("div", { className: "space-y-2", children: siteData.categories.accessibility.audits
-                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .filter((audit) => audit.scoreDisplayMode !== 'notApplicable')
                                     .sort((a, b) => {
                                     // Prioritize specific important accessibility audits
                                     const priorityAudits = [

package/dist/components/admin/site-health/site-health-axe-core.js

@@ -1,8 +1,12 @@
 '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';
+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)}`);

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

@@ -28,7 +28,6 @@ export async function getCloudwatchHealthCheckData(config, siteName, startDate,
         // Add 1 day to end time to include the full end date
         const endTimePlusOne = new Date(endTime);
         endTimePlusOne.setDate(endTimePlusOne.getDate() + 1);
-        console.log(`CloudWatch: Fetching data for health check ${config.healthCheckId} from ${startTime.toISOString()} to ${endTimePlusOne.toISOString()}`);
         const metricDataQuery = {
             MetricDataQueries: [
                 {
@@ -55,9 +54,7 @@ export async function getCloudwatchHealthCheckData(config, siteName, startDate,
         };
         const command = new GetMetricDataCommand(metricDataQuery);
         const response = await cloudWatchClient.send(command);
-        console.log(`CloudWatch: Received ${response.MetricDataResults?.[0]?.Timestamps?.length || 0} data points`);
         if (!response.MetricDataResults || response.MetricDataResults.length === 0) {
-            console.log(`CloudWatch: No metric data found for health check ${config.healthCheckId}`);
             return {
                 success: false,
                 error: 'No health check metric data found'
@@ -65,7 +62,6 @@ export async function getCloudwatchHealthCheckData(config, siteName, startDate,
         }
         const metricResult = response.MetricDataResults[0];
         if (!metricResult.Timestamps || !metricResult.Values) {
-            console.log(`CloudWatch: No timestamps or values in metric data`);
             return {
                 success: false,
                 error: 'No health check metric data available'
@@ -101,7 +97,6 @@ export async function getCloudwatchHealthCheckData(config, siteName, startDate,
             };
         })
             .sort((a, b) => a.date.localeCompare(b.date));
-        console.log(`CloudWatch: Processed ${data.length} date groups with data`);
         // Fill in the date range with data points for each day
         let filledData = [];
         if (startDate && endDate) {

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

@@ -1,7 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 import { ComposedChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { SiteHealthTemplate } from './site-health-template';
+SiteHealthCloudwatch.propTypes = {
+    siteName: PropTypes.string.isRequired,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+};
 export function SiteHealthCloudwatch({ siteName, startDate, endDate }) {
     const fetchCloudwatchData = async (site) => {
         const params = new URLSearchParams({ siteName: site });
@@ -29,7 +35,7 @@ export function SiteHealthCloudwatch({ siteName, startDate, endDate }) {
                 return (_jsx("div", { className: "flex items-center justify-center h-64", children: _jsx("div", { className: "text-gray-500", 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.totalChecks > 0);
             if (!hasActualData) {
                 return (_jsx("div", { className: "flex items-center justify-center h-64", children: _jsxs("div", { className: "text-gray-500", 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."] }) }));
             }

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

@@ -1,7 +1,11 @@
 '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)}`);

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

@@ -1,7 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 import { Table } from '@pixelated-tech/components';
 import { SiteHealthTemplate } from './site-health-template';
+SiteHealthGit.propTypes = {
+    siteName: PropTypes.string.isRequired,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+};
 export function SiteHealthGit({ siteName, startDate, endDate }) {
     const fetchGitData = async (site) => {
         const params = new URLSearchParams({ site: encodeURIComponent(site) });

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

@@ -1,7 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { SiteHealthTemplate } from './site-health-template';
+SiteHealthGoogleAnalytics.propTypes = {
+    siteName: PropTypes.string.isRequired,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+};
 export function SiteHealthGoogleAnalytics({ siteName, startDate, endDate }) {
     const fetchAnalyticsData = async (site) => {
         const params = new URLSearchParams({ siteName: site });

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

@@ -1,7 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { SiteHealthTemplate } from './site-health-template';
+SiteHealthGoogleSearchConsole.propTypes = {
+    siteName: PropTypes.string.isRequired,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+};
 export function SiteHealthGoogleSearchConsole({ siteName, startDate, endDate }) {
     const fetchSearchConsoleData = async (site) => {
         const params = new URLSearchParams({ siteName: site });