import React, { useState, useEffect } from 'react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, AreaChart, Area } from 'recharts'; import TrendingUpIcon from '@mui/icons-material/TrendingUp'; import TrendingDownIcon from '@mui/icons-material/TrendingDown'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import AttachMoneyIcon from '@mui/icons-material/AttachMoney'; import InventoryIcon from '@mui/icons-material/Inventory'; import AnalyticsIcon from '@mui/icons-material/Analytics'; import WarningIcon from '@mui/icons-material/Warning'; import InfoIcon from '@mui/icons-material/Info'; import CloseIcon from '@mui/icons-material/Close'; import SearchIcon from '@mui/icons-material/Search'; import SortIcon from '@mui/icons-material/Sort'; import EditIcon from '@mui/icons-material/Edit'; import { getNonce, isPro } from '../../Helpers'; import { useModalManager } from '../../hooks/useModalManager'; import IncompleteOrdersSection from '../Components/Analytics/IncompleteOrdersSection'; import CartInteractionsAnalytics from '../Components/Analytics/CartInteractionsAnalytics'; import PriceModal from '../PriceModal/PriceModal'; import './wooanalytics.scss'; const WooAnalytics = ({ onVisitTab }) => { const { modalConfig, closeModal, showPremiumModal } = useModalManager(); const [analyticsData, setAnalyticsData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [selectedPeriod, setSelectedPeriod] = useState('weekly'); const [isWooCommerceActive, setIsWooCommerceActive] = useState(false); const [isAnalyticsEnabled, setIsAnalyticsEnabled] = useState(false); const [settingsLoading, setSettingsLoading] = useState(true); // Modal states const [modalOpen, setModalOpen] = useState(false); const [modalType, setModalType] = useState(''); const [modalData, setModalData] = useState(null); // Top Products states const [searchTerm, setSearchTerm] = useState(''); const [sortField, setSortField] = useState('total_revenue'); const [sortDirection, setSortDirection] = useState('desc'); const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage] = useState(10); // Handle glass effect interactions for mobile const handleGlassEffectTouch = (e) => { const container = e.currentTarget; const overlay = container.querySelector('.glass-overlay'); if (overlay) { // Toggle glass overlay on mobile touch if (overlay.style.opacity === '1') { overlay.style.opacity = '0'; overlay.style.visibility = 'hidden'; } else { overlay.style.opacity = '1'; overlay.style.visibility = 'visible'; } } }; // Handle navigation to WooCommerce settings tab const handleGoToSettings = () => { // Check if user has premium access /* if (!isPro()) { showPremiumModal(); return; } */ if (typeof onVisitTab === "function") { onVisitTab('woocommerce'); } else { // Fallback to direct navigation if onVisitTab is not available window.location.href = 'admin.php?page=shop-explorer#/settings'; } }; // Fetch analytics data from real WooCommerce database const fetchAnalyticsData = () => { setLoading(true); wp.ajax.send('wpnts_woo_analytics_data', { data: { nonce: getNonce(), }, success(response) { if (response.analytics_data && !response.analytics_data.error) { setAnalyticsData(response.analytics_data); setError(null); } else { setError(response.analytics_data?.error || 'No analytics data available'); } setLoading(false); }, error(error) { console.error('Analytics fetch error:', error); setError('Failed to load analytics data'); setLoading(false); }, }); }; // Check WooCommerce status and analytics settings useEffect(() => { const checkInitialStatus = async () => { setSettingsLoading(true); try { // Check WooCommerce status const wooStatus = await new Promise((resolve, reject) => { wp.ajax.send('nts_is_woocommerce_installed', { data: { nonce: getNonce() }, success: resolve, error: reject, }); }); const isWooActive = wooStatus.status === 'active' || wooStatus.class_exists || wooStatus.plugin_active || wooStatus.functions_exist; setIsWooCommerceActive(isWooActive); if (!isWooActive) { setSettingsLoading(false); setLoading(false); return; } // Check analytics settings try { const settingsResponse = await new Promise((resolve, reject) => { wp.ajax.send('notice_settings', { data: { nonce: getNonce() }, success: resolve, error: reject, }); }); console.log('Settings response:', settingsResponse); const wooSettings = settingsResponse.notice_settings?.wpnts_schedules_interval_woocommerce_settings; const analyticsEnabled = wooSettings?.wooanalytics === true; setIsAnalyticsEnabled(analyticsEnabled); setSettingsLoading(false); if (analyticsEnabled) { fetchAnalyticsData(); } else { setLoading(false); } } catch (settingsError) { console.warn('Settings check failed, assuming analytics disabled:', settingsError); // If settings check fails, assume analytics is disabled but WooCommerce is active setIsAnalyticsEnabled(false); setSettingsLoading(false); setLoading(false); } } catch (error) { // If WooCommerce check fails, assume it's not active setIsWooCommerceActive(false); setSettingsLoading(false); setLoading(false); setError('Failed to check WooCommerce status: ' + (error.message || 'Unknown error')); } }; checkInitialStatus(); }, []); useEffect(() => { if (isWooCommerceActive && isAnalyticsEnabled) { fetchAnalyticsData(); // Refresh data every 5 minutes const interval = setInterval(fetchAnalyticsData, 300000); return () => clearInterval(interval); } }, [isWooCommerceActive, isAnalyticsEnabled]); // Show loading state if (settingsLoading || loading) { return (

Loading Analytics

Preparing your WooCommerce analytics dashboard...

1 Checking system status
2 Loading analytics data
); } // Show analytics with glass effect when disabled if (!isAnalyticsEnabled && isWooCommerceActive) { return (

WooCommerce Analytics Dashboard

Preview Mode - Enable to Access Full Features
{/* Order Analytics Overview with Glass Effect */}

Order Analytics

Today's Orders

12
✓ 8 Completed ⏳ 3 Processing ⏸ 1 Pending

Order Analytics

Track daily orders with real-time status breakdown. Monitor completed, processing, pending, and cancelled orders.

Enable WooCommerce Analytics to access live data

Today's Revenue

$2,450.00
From completed & processing orders

Revenue Analytics

Track daily, weekly, and monthly revenue with growth indicators and detailed breakdowns.

Enable WooCommerce Analytics to access live data

Last 7 Days

89 Orders
$15,230.00 Revenue
✓ 72 ⏳ 12 ⏸ 5

Weekly Performance

Comprehensive 7-day performance metrics including order volume and revenue trends.

Enable WooCommerce Analytics to access live data

Last 15 Days

156 Orders
$28,940.00 Revenue
✓ 134 ⏳ 18 ↩ 4 Refunded

Extended Performance

15-day analytics showing extended trends, refunds, and comprehensive order status tracking.

Enable WooCommerce Analytics to access live data
{/* Customer Analytics with Glass Effect */}

Customer Analytics

New Customers

Today: 5
Last 7 days: 23
Last 15 days: 41

Returning Customers

Today: 7
Last 7 days: 66
Last 15 days: 115

Customer Analytics

Track new vs returning customers, customer acquisition patterns, and loyalty metrics.

Enable WooCommerce Analytics to access live data
{/* Charts Section with Glass Effect */}
{/* Order Trends Chart */}

Order Trends (Last 15 Days)

Order Trends (Last 15 Days)

Interactive charts showing daily order patterns, revenue trends, and growth indicators over time.

Enable WooCommerce Analytics to access live data
{/* Order Status Breakdown Chart */}

Order Status Breakdown (Last 15 Days)

Order Status Breakdown (Last 15 Days)

Stacked bar charts showing order status distribution with completed, processing, pending, and cancelled orders.

Enable WooCommerce Analytics to access live data
{/* Top Products Chart */}

Top Selling Products (Last 30 Days)

Premium T-Shirt
Wireless Headphones
Coffee Mug

Top Selling Products (Last 30 Days)

Bar charts showing best-selling products by quantity and revenue with detailed product performance metrics.

Enable WooCommerce Analytics to access live data
{/* Revenue vs Orders Chart */}

Daily Revenue vs Orders

Daily Revenue vs Orders

Line charts correlating daily revenue with order volume to identify patterns and optimization opportunities.

Enable WooCommerce Analytics to access live data
{/* Top Products Table with Glass Effect */}

Top Products Details (Last 30 Days)

Rank Product Name Quantity Sold Orders Avg Price Total Revenue Actions
#1 Premium T-Shirt 156 89 $29.99 $4,678.44
#2 Wireless Headphones 78 67 $89.99 $7,019.22
#3 Coffee Mug 234 156 $12.99 $3,039.66

Top Products Details (Last 30 Days)

Detailed product performance table with search, sorting, and pagination. Track quantity sold, orders, pricing, and revenue.

Enable WooCommerce Analytics to access live data
{/* Incomplete Orders Section with Glass Effect */}

Incomplete Orders Analytics

Total Incomplete

15
Orders not completed

Recovery Potential

$2,340.50
Total abandoned value

Recovery Rate

23%
Orders eventually completed

Today's Abandoned

3
New incomplete orders

Daily Abandonment Trends

Most Abandoned Products

Premium Jacket
Smart Watch
Running Shoes

Incomplete Orders Analytics

Track abandoned carts, recovery potential, and customer contact information. Includes daily trends and most abandoned products analysis.

Enable WooCommerce Analytics to access live data
{/* Cart Interactions Analytics with Glass Effect */}

Cart Interactions Analytics

Track how customers interact with products in their cart

Total Interactions

1,247

Last 30 days

Removal Rate

18.5%

Products removed from cart

Engagement Rate

34.2%

Quantity adjustments

Most Removed

Premium Jacket

Product with most removals

Interaction Types Distribution

Cart Interactions Analytics

Monitor customer cart behavior including product additions, removals, quantity changes, and interaction patterns.

Enable WooCommerce Analytics to access live data
{/* Activation Guide */}

Enable Full Analytics Access

To unlock all these powerful analytics features with live data:

1 Go to Activity Guard → Configuration
2 Navigate to WooCommerce tab
3 Enable "WooCommerce Analytics Dashboard"
4 Save settings and return here
{/* */}
); } // Show WooCommerce not active error if (!isWooCommerceActive) { return (

WooCommerce Required

WooCommerce must be installed and activated to use the Analytics Dashboard.

Install WooCommerce
); } // Show other errors if (error) { return (

Error Loading Analytics

{error}

); } // Show no data message if (!analyticsData) { return (

No Analytics Data Available

Make sure WooCommerce is active and you have some orders to display analytics.

); } const { order_analytics = {}, revenue_analytics = {}, customer_analytics = {}, top_products = [], order_trends = [] } = analyticsData || {}; // Show no data message if there's no meaningful data if (analyticsData && analyticsData.has_data === false) { return (

No Sales Data Available

Your WooCommerce store doesn't have any sales data yet. Once you start receiving orders, your analytics will appear here.

Get started:

  • • Add products to your WooCommerce store
  • • Process some test orders
  • • Wait for customer purchases
  • • Check back here for analytics
); } // Format currency using WooCommerce currency const formatCurrency = (amount) => { let currency = revenue_analytics?.currency || '$'; // Clean up HTML entities that might come from WooCommerce currency = currency.replace(/ /g, ' ').replace(/&#\d+;/g, ''); // If currency is still problematic, use a fallback if (currency.includes('&') || currency.length > 5) { currency = '$'; // Fallback to dollar sign } // Format the number with proper currency symbol const formatted = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(amount || 0); return `${currency}${formatted}`; }; // Format percentage const formatPercentage = (value) => { return `${value >= 0 ? '+' : ''}${value.toFixed(1)}%`; }; // Modal handlers const openModal = (type, data = null) => { setModalType(type); setModalData(data); setModalOpen(true); }; const closeAnalyticsModal = () => { setModalOpen(false); setModalType(''); setModalData(null); }; // Top Products filtering and sorting const getFilteredAndSortedProducts = () => { if (!top_products || !Array.isArray(top_products)) return []; let filtered = top_products.filter(product => product.name && product.name.toLowerCase().includes(searchTerm.toLowerCase()) ); filtered.sort((a, b) => { let aVal = a[sortField] || 0; let bVal = b[sortField] || 0; if (sortField === 'name') { aVal = (a.name || '').toLowerCase(); bVal = (b.name || '').toLowerCase(); return sortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal); } return sortDirection === 'asc' ? aVal - bVal : bVal - aVal; }); return filtered; }; const getPaginatedProducts = () => { const filtered = getFilteredAndSortedProducts(); const startIndex = (currentPage - 1) * itemsPerPage; return filtered.slice(startIndex, startIndex + itemsPerPage); }; const getTotalPages = () => { return Math.ceil(getFilteredAndSortedProducts().length / itemsPerPage); }; const handleSort = (field) => { if (sortField === field) { setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc'); } else { setSortField(field); setSortDirection('desc'); } setCurrentPage(1); }; const openProductEditor = (productId) => { if (productId) { window.open(`post.php?post=${productId}&action=edit`, '_blank'); } }; return (

WooCommerce Analytics Dashboard

Last updated: {new Date(analyticsData.last_updated).toLocaleString()}
{/* Order Analytics Overview */}

Order Analytics

Today's Orders

openModal('todayOrders', order_analytics.today)} />
{order_analytics.today?.total || 0}
✓ {order_analytics.today?.completed || 0} Completed ⏳ {order_analytics.today?.processing || 0} Processing ⏸ {order_analytics.today?.pending || 0} Pending ✗ {order_analytics.today?.cancelled || 0} Cancelled {(order_analytics.today?.refunded || 0) > 0 && ( ↩ {order_analytics.today?.refunded || 0} Refunded )} {(order_analytics.today?.on_hold || 0) > 0 && ( ⏸ {order_analytics.today?.on_hold || 0} On Hold )}

Today's Revenue

openModal('todayRevenue', { revenue: revenue_analytics.today, orders: order_analytics.today })} />
{formatCurrency(revenue_analytics.today || 0)}
From completed & processing orders

Last 7 Days

openModal('weeklyStats', { revenue: revenue_analytics.week, orders: order_analytics.week })} />
{order_analytics.week?.total || 0} Orders
{formatCurrency(revenue_analytics.week || 0)} Revenue
✓ {order_analytics.week?.completed || 0} ⏳ {order_analytics.week?.processing || 0} ⏸ {order_analytics.week?.pending || 0}

Last 15 Days

openModal('fifteenDaysStats', { revenue: revenue_analytics.fifteen_days, orders: order_analytics.fifteen_days })} />
{order_analytics.fifteen_days?.total || 0} Orders
{formatCurrency(revenue_analytics.fifteen_days || 0)} Revenue
✓ {order_analytics.fifteen_days?.completed || 0} ⏳ {order_analytics.fifteen_days?.processing || 0} ↩ {order_analytics.fifteen_days?.refunded || 0} Refunded
{/* Customer Analytics */}

Customer Analytics

openModal('customerAnalytics', customer_analytics)} />

New Customers

Today: {customer_analytics.new_customers_today || 0}
Last 7 days: {customer_analytics.new_customers_week || 0}
Last 15 days: {customer_analytics.new_customers_fifteen_days || 0}

Returning Customers

Today: {customer_analytics.returning_customers_today || 0}
Last 7 days: {customer_analytics.returning_customers_week || 0}
Last 15 days: {customer_analytics.returning_customers_fifteen_days || 0}
{/* Charts Section */}
{/* Order Trends Chart */}

Order Trends (Last 15 Days)

openModal('orderTrends', order_trends)} />
[ name === 'total_revenue' ? formatCurrency(value) : value, name === 'total_revenue' ? 'Revenue' : name === 'total_orders' ? 'Total Orders' : name === 'completed' ? 'Completed' : name === 'processing' ? 'Processing' : name === 'pending' ? 'Pending' : name ]} />
{/* Order Status Breakdown Chart */}

Order Status Breakdown (Last 15 Days)

openModal('orderStatusBreakdown', order_trends)} />
{/* Top Products Chart */}

Top Selling Products (Last 30 Days)

openModal('topProductsChart', top_products)} />
[ name === 'total_revenue' ? formatCurrency(value) : value, name === 'total_quantity' ? 'Quantity Sold' : name === 'total_revenue' ? 'Revenue' : name ]} />
{/* Revenue vs Orders Chart */}

Daily Revenue vs Orders

openModal('revenueVsOrders', order_trends)} />
[ name === 'total_revenue' ? formatCurrency(value) : value, name === 'total_revenue' ? 'Revenue' : 'Orders' ]} />
{/* Enhanced Top Products Table */}

Top Products Details (Last 30 Days)

openModal('topProductsTable', top_products)} />
{ setSearchTerm(e.target.value); setCurrentPage(1); }} />
{getPaginatedProducts().length > 0 ? ( getPaginatedProducts().map((product, index) => { const globalIndex = (currentPage - 1) * itemsPerPage + index + 1; return ( ); }) ) : ( )}
Rank handleSort('name')} > Product Name handleSort('total_quantity')} > Quantity Sold handleSort('order_count')} > Orders handleSort('avg_price')} > Avg Price handleSort('total_revenue')} > Total Revenue Actions
#{globalIndex} {product.name || 'Unknown Product'} {product.total_quantity || 0} {product.order_count || 0} {formatCurrency(product.avg_price || 0)} {formatCurrency(product.total_revenue || 0)}
{searchTerm ? 'No products found matching your search' : 'No product data available'}
{/* Pagination */} {getTotalPages() > 1 && (
Showing {((currentPage - 1) * itemsPerPage) + 1} to {Math.min(currentPage * itemsPerPage, getFilteredAndSortedProducts().length)} of {getFilteredAndSortedProducts().length} products
{Array.from({ length: getTotalPages() }, (_, i) => i + 1).map(page => ( ))}
)}
{/* Incomplete Orders Section */} {/* Cart Interactions Analytics */}
{/* Modal Component */} {modalOpen && (
e.stopPropagation()}>

{getModalTitle()}

{renderModalContent()}
)} {/* Premium Modal */}
); // Modal helper functions function getModalTitle() { switch (modalType) { case 'todayOrders': return "Today's Orders - Detailed Breakdown"; case 'todayRevenue': return "Today's Revenue - Detailed Analysis"; case 'weeklyStats': return "Last 7 Days - Performance Summary"; case 'fifteenDaysStats': return "Last 15 Days - Performance Summary"; case 'customerAnalytics': return "Customer Analytics - Detailed Insights"; case 'orderTrends': return "Order Trends - Historical Data"; case 'orderStatusBreakdown': return "Order Status Breakdown - Analysis"; case 'topProductsChart': return "Top Products Chart - Performance Data"; case 'revenueVsOrders': return "Revenue vs Orders - Correlation Analysis"; case 'topProductsTable': return "Top Products - Complete Details"; default: return "Analytics Details"; } } function renderModalContent() { switch (modalType) { case 'todayOrders': return (
Total Orders: {modalData?.total || 0}
Completed: {modalData?.completed || 0}
Processing: {modalData?.processing || 0}
Pending: {modalData?.pending || 0}
Cancelled: {modalData?.cancelled || 0}
{(modalData?.refunded || 0) > 0 && (
Refunded: {modalData?.refunded || 0}
)} {(modalData?.on_hold || 0) > 0 && (
On Hold: {modalData?.on_hold || 0}
)}

This shows all orders placed today, broken down by their current status. Completed and processing orders contribute to revenue calculations.

); case 'todayRevenue': return (
Total Revenue Today: {formatCurrency(modalData?.revenue || 0)}

Revenue Sources:

Completed Orders ({modalData?.orders?.completed || 0}): Contributing to revenue
Processing Orders ({modalData?.orders?.processing || 0}): Contributing to revenue

Revenue includes only completed and processing orders. Pending, cancelled, and refunded orders are excluded from revenue calculations.

); case 'weeklyStats': case 'fifteenDaysStats': const period = modalType === 'weeklyStats' ? '7 days' : '15 days'; return (

Last {period} Summary:

Total Orders: {modalData?.orders?.total || 0}
Total Revenue: {formatCurrency(modalData?.revenue || 0)}
Completed Orders: {modalData?.orders?.completed || 0}
Processing Orders: {modalData?.orders?.processing || 0}
Average Order Value: {modalData?.orders?.total > 0 ? formatCurrency((modalData?.revenue || 0) / modalData.orders.total) : formatCurrency(0) }

Performance metrics for the last {period}, showing order volume, revenue generation, and average order values.

); case 'customerAnalytics': return (

Customer Acquisition Analysis:

Today:
New: {modalData?.new_customers_today || 0} Returning: {modalData?.returning_customers_today || 0}
Last 7 Days:
New: {modalData?.new_customers_week || 0} Returning: {modalData?.returning_customers_week || 0}
Last 15 Days:
New: {modalData?.new_customers_fifteen_days || 0} Returning: {modalData?.returning_customers_fifteen_days || 0}

Customer analytics help you understand acquisition patterns and customer loyalty. New customers are first-time buyers, while returning customers have made previous purchases.

); case 'orderTrends': case 'orderStatusBreakdown': return (

Data Points: {modalData?.length || 0} days

Total Revenue Period: {formatCurrency( modalData?.reduce((sum, day) => sum + (day.total_revenue || 0), 0) || 0 )}
Total Orders Period: {modalData?.reduce((sum, day) => sum + (day.total_orders || 0), 0) || 0}
Peak Revenue Day: {modalData?.reduce((max, day) => (day.total_revenue || 0) > (max.total_revenue || 0) ? day : max, modalData[0] || {} )?.date || 'N/A'}
Peak Orders Day: {modalData?.reduce((max, day) => (day.total_orders || 0) > (max.total_orders || 0) ? day : max, modalData[0] || {} )?.date || 'N/A'}

Historical trend analysis showing daily performance patterns, peak periods, and overall growth trajectory over the selected timeframe.

); case 'revenueVsOrders': return (

Daily Revenue vs Orders Analysis:

Total Days Analyzed: {modalData?.length || 0}
Total Revenue: {formatCurrency( modalData?.reduce((sum, day) => sum + (day.total_revenue || 0), 0) || 0 )}
Total Orders: {modalData?.reduce((sum, day) => sum + (day.total_orders || 0), 0) || 0}
Average Order Value: {formatCurrency( modalData?.length > 0 ? modalData.reduce((sum, day) => sum + (day.total_revenue || 0), 0) / Math.max(1, modalData.reduce((sum, day) => sum + (day.total_orders || 0), 0)) : 0 )}
Best Revenue Day: {modalData?.reduce((best, day) => (day.total_revenue || 0) > (best.total_revenue || 0) ? day : best, modalData[0] || {} )?.date || 'N/A'}
Most Orders Day: {modalData?.reduce((best, day) => (day.total_orders || 0) > (best.total_orders || 0) ? day : best, modalData[0] || {} )?.date || 'N/A'}
{/* Daily Breakdown Table */}

Daily Performance Breakdown:

{modalData && modalData.length > 0 ? ( modalData.slice().reverse().map((day, index) => { const avgOrderValue = (day.total_orders || 0) > 0 ? (day.total_revenue || 0) / (day.total_orders || 0) : 0; const maxRevenue = Math.max(...modalData.map(d => d.total_revenue || 0)); const revenuePercentage = maxRevenue > 0 ? ((day.total_revenue || 0) / maxRevenue * 100) : 0; return ( ); }) ) : ( )}
Date Orders Revenue Avg Order Value Completed Processing Performance
{day.date} {day.total_orders || 0} {formatCurrency(day.total_revenue || 0)} {formatCurrency(avgOrderValue)} {day.completed || 0} {day.processing || 0}
{revenuePercentage.toFixed(0)}%
No daily data available

Detailed daily breakdown showing the correlation between order volume and revenue generation. The performance bar shows each day's revenue relative to the best performing day.

); case 'topProductsChart': case 'topProductsTable': return (

Product Performance Summary:

Total Products: {modalData?.length || 0}
Total Revenue: {formatCurrency( modalData?.reduce((sum, product) => sum + (product.total_revenue || 0), 0) || 0 )}
Total Quantity Sold: {modalData?.reduce((sum, product) => sum + (product.total_quantity || 0), 0) || 0}
Top Performer: {modalData?.[0]?.name || 'N/A'}
{/* Detailed Products Table */}

All Products Performance:

{modalData && modalData.length > 0 ? ( modalData.map((product, index) => { const totalRevenue = modalData.reduce((sum, p) => sum + (p.total_revenue || 0), 0); const revenuePercentage = totalRevenue > 0 ? ((product.total_revenue || 0) / totalRevenue * 100) : 0; return ( ); }) ) : ( )}
Rank Product Name Qty Sold Orders Avg Price Total Revenue Performance
#{index + 1} {product.name || 'Unknown Product'} {product.total_quantity || 0} {product.order_count || 0} {formatCurrency(product.avg_price || 0)} {formatCurrency(product.total_revenue || 0)}
{revenuePercentage.toFixed(1)}%
No product data available

Complete product performance analysis showing all products ranked by revenue generation over the last 30 days. The performance bar shows each product's contribution to total revenue.

); default: return
No additional details available.
; } } }; export default WooAnalytics;