ALwrity + Wix + Wordpress + GSC + Bug Fixes

frontend/src/components/billing/BillingOverview.tsx

@@ -12,11 +12,7 @@ import {
 import { motion } from 'framer-motion';
 import { 
   DollarSign, 
-  TrendingUp, 
   RefreshCw,
-  AlertTriangle,
-  CheckCircle,
-  XCircle,
   Info
 } from 'lucide-react';
 
@@ -28,7 +24,6 @@ import {
   formatCurrency, 
   formatNumber, 
   formatPercentage,
-  getUsageStatusColor,
   getUsageStatusIcon,
   calculateUsagePercentage
 } from '../../services/billingService';
@@ -53,7 +48,6 @@ const BillingOverview: React.FC<BillingOverviewProps> = ({
 
   const getStatusChip = () => {
     const status = usageStats.usage_status;
-    const color = getUsageStatusColor(status);
     const icon = getUsageStatusIcon(status);
     
     let chipColor: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' = 'default';

frontend/src/components/billing/CompactBillingDashboard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Card,
   CardContent,
@@ -26,9 +26,6 @@ import { billingService } from '../../services/billingService';
 import { monitoringService } from '../../services/monitoringService';
 import { onApiEvent } from '../../utils/apiEvents';
 
-// Components
-import ComprehensiveAPIBreakdown from './ComprehensiveAPIBreakdown';
-
 interface CompactBillingDashboardProps {
   userId?: string;
 }
@@ -38,7 +35,6 @@ const CompactBillingDashboard: React.FC<CompactBillingDashboardProps> = ({ userI
   const [systemHealth, setSystemHealth] = useState<SystemHealth | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
 
   const fetchData = async () => {
     try {
@@ -52,7 +48,6 @@ const CompactBillingDashboard: React.FC<CompactBillingDashboardProps> = ({ userI
       
       setDashboardData(billingData);
       setSystemHealth(healthData);
-      setLastUpdated(new Date());
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to fetch data');
     } finally {
@@ -62,6 +57,7 @@ const CompactBillingDashboard: React.FC<CompactBillingDashboardProps> = ({ userI
 
   useEffect(() => {
     fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userId]);
 
   // Event-driven refresh
@@ -77,11 +73,11 @@ const CompactBillingDashboard: React.FC<CompactBillingDashboardProps> = ({ userI
       fetchData();
     });
     return unsubscribe;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const formatCurrency = (amount: number) => `$${amount.toFixed(4)}`;
   const formatNumber = (num: number) => num.toLocaleString();
-  const formatPercentage = (num: number) => `${num.toFixed(1)}%`;
 
   if (loading && !dashboardData) {
     return (
@@ -118,9 +114,7 @@ const CompactBillingDashboard: React.FC<CompactBillingDashboardProps> = ({ userI
 
   if (!dashboardData) return null;
 
-  const { current_usage, trends, limits, alerts } = dashboardData;
-  const activeProviders = Object.entries(current_usage.provider_breakdown)
-    .filter(([_, data]) => data.cost > 0);
+  const { current_usage, limits, alerts } = dashboardData;
 
   return (
     <motion.div

frontend/src/components/billing/ComprehensiveAPIBreakdown.tsx

@@ -10,26 +10,15 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
 } from '@mui/material';
 import { ExpandMore } from '@mui/icons-material';
 import { motion } from 'framer-motion';
 import { 
   Info,
-  DollarSign,
-  Activity,
-  Zap,
   Search,
   Image,
   Code,
   Database,
-  Globe,
   FileText,
   BarChart3
 } from 'lucide-react';

frontend/src/components/billing/CostBreakdown.tsx

@@ -8,11 +8,8 @@ import {
   Chip,
 } from '@mui/material';
 import { motion } from 'framer-motion';
-import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
 import { 
-  DollarSign, 
-  TrendingUp,
-  BarChart3,
   PieChart as PieChartIcon
 } from 'lucide-react';
 

frontend/src/components/billing/EnhancedBillingDashboard.tsx

@@ -3,13 +3,9 @@ import {
   Box,
   Container,
   Grid,
-  Card,
-  CardContent,
   Typography,
   Alert,
   CircularProgress,
-  useTheme,
-  useMediaQuery,
   ToggleButton,
   ToggleButtonGroup,
   Tooltip,
@@ -18,14 +14,6 @@ import {
 } from '@mui/material';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
-  DollarSign, 
-  TrendingUp, 
-  AlertTriangle, 
-  Activity,
-  Zap,
-  BarChart3,
-  PieChart,
-  Clock,
   Grid3X3,
   List,
   Info,
@@ -61,11 +49,7 @@ const EnhancedBillingDashboard: React.FC<EnhancedBillingDashboardProps> = ({ use
   const [systemHealth, setSystemHealth] = useState<SystemHealth | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [viewMode, setViewMode] = useState<ViewMode>('compact');
-  
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   const fetchDashboardData = async () => {
     try {
@@ -75,7 +59,6 @@ const EnhancedBillingDashboard: React.FC<EnhancedBillingDashboardProps> = ({ use
       ]);
       setDashboardData(billingData);
       setSystemHealth(healthData);
-      setLastUpdated(new Date());
     } catch (error) {
       setError(error instanceof Error ? error.message : 'Failed to fetch dashboard data');
     } finally {
@@ -95,7 +78,6 @@ const EnhancedBillingDashboard: React.FC<EnhancedBillingDashboardProps> = ({ use
         .then(([billingData, health]) => {
           setDashboardData(billingData);
           setSystemHealth(health);
-          setLastUpdated(new Date());
         })
         .catch(() => {/* ignore */});
     });

frontend/src/components/billing/UsageAlerts.tsx

@@ -12,7 +12,6 @@ import {
   IconButton,
   Tooltip,
   Collapse,
-  Alert,
 } from '@mui/material';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 

frontend/src/components/billing/UsageTrends.tsx

@@ -22,7 +22,6 @@ import {
 import { 
   TrendingUp, 
   TrendingDown,
-  BarChart3,
   Calendar
 } from 'lucide-react';