@liiift-studio/sales-portal 1.2.1

package/components/PeriodComparison.js

@@ -0,0 +1,501 @@
+// Period comparison component for comparing sales data across different time periods
+import React, { useState, useEffect } from 'react';
+import { 
+  Grid, 
+  Typography, 
+  Box, 
+  ToggleButtonGroup, 
+  ToggleButton,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  CircularProgress,
+  Paper
+} from '@mui/material';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import styles from '../styles/sales-portal.module.scss';
+
+/**
+ * Process chart data from sales information
+ * @param {Array} sales - Sales data
+ * @param {Date} date - Date for the data
+ * @returns {Object} Processed chart data
+ */
+const processChartData = (sales, date) => {
+	// Initialize arrays for each day of the month (1-31)
+	const daysInMonth = new Date(date.getUTCFullYear(), date.getUTCMonth() + 1, 0).getUTCDate();
+	const xAxis = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+	
+	// Initialize data arrays with zeros
+	const salesData = Array(daysInMonth).fill(0);
+	const orderData = Array(daysInMonth).fill(0);
+	const discountData = Array(daysInMonth).fill(0);
+	const refundData = Array(daysInMonth).fill(0);
+	const taxData = Array(daysInMonth).fill(0);
+	const shippingData = Array(daysInMonth).fill(0);
+	
+	let refundTotal = 0;
+	
+	// Process each sale
+	sales.forEach(sale => {
+		// Get the day of the month (1-31)
+		const saleDate = new Date(sale.date);
+		const day = saleDate.getUTCDate() - 1; // Adjust to 0-based index
+		
+		// Skip if the day is out of range
+		if (day < 0 || day >= daysInMonth) return;
+		
+		// Update cumulative data for the day and all subsequent days
+		for (let i = day; i < daysInMonth; i++) {
+			salesData[i] += sale.total || 0;
+			orderData[i] += 1;
+			discountData[i] += sale.amountDiscounted || 0;
+			taxData[i] += sale.taxAmount || 0;
+			shippingData[i] += sale.shippingCost || 0;
+		}
+		
+		// Process refunds
+		if (sale.refunds && sale.refunds.length > 0) {
+			sale.refunds.forEach(refund => {
+				refundTotal += refund.adjustedTotal || 0;
+				// Get the day of the refund
+				const refundDate = new Date(refund.date);
+				const refundDay = refundDate.getUTCDate() - 1;
+				
+				// Skip if the refund day is out of range
+				if (refundDay < 0 || refundDay >= daysInMonth) return;
+				
+				// Update refund data for the day and all subsequent days
+				for (let i = refundDay; i < daysInMonth; i++) {
+					refundData[i] += refund.adjustedTotal || 0;
+				}
+			});
+		}
+	});
+	
+	// Convert from cents to dollars for display
+	const salesDataInDollars = salesData.map(value => value / 100);
+	const discountDataInDollars = discountData.map(value => value / 100);
+	const refundDataInDollars = refundData.map(value => value / 100);
+	const taxDataInDollars = taxData.map(value => value / 100);
+	const shippingDataInDollars = shippingData.map(value => value / 100);
+	
+	return {
+		xAxis,
+		salesData: salesDataInDollars,
+		salesMax: salesDataInDollars[daysInMonth - 1] || 0,
+		orderData,
+		orderMax: orderData[daysInMonth - 1] || 0,
+		discountData: discountDataInDollars,
+		discountMax: discountDataInDollars[daysInMonth - 1] || 0,
+		refundData: refundDataInDollars,
+		refundMax: refundDataInDollars[daysInMonth - 1] || 0,
+		refundTotal: refundTotal / 100,
+		taxData: taxDataInDollars,
+		shippingData: shippingDataInDollars
+	};
+};
+
+/**
+ * Format currency values in USD
+ * @param {number} value - Value to format as currency
+ * @returns {string} Formatted currency string
+ */
+const formatCurrency = (value) => {
+	// Values are already in dollars, no need to divide by 100
+	return new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD',
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 0,
+	}).format(value);
+};
+
+/**
+ * Period comparison component that allows comparing sales metrics across two time periods
+ * @param {Object} props - Component props
+ * @param {Array} props.currentSales - Current period sales data
+ * @param {Object} props.chartState - Current period chart data
+ * @param {Object} props.designer - Designer information
+ * @param {boolean} props.loading - Loading state
+ * @param {Date} props.date - Current date being displayed
+ * @param {Function} props.updateLoadingState - Function to update loading state
+ * @returns {JSX.Element} Period comparison component
+ */
+export default function PeriodComparison({
+	currentSales = [],
+	chartState,
+	designer = {},
+	loading = false,
+	date,
+	updateLoadingState
+}) {
+	// Comparison type: MoM (Month over Month) or YoY (Year over Year)
+	const [comparisonType, setComparisonType] = useState('MoM');
+	
+	// Metric to compare: revenue, orders, avgOrderValue, etc.
+	const [metric, setMetric] = useState('revenue');
+	
+	// Previous period data
+	const [previousSales, setPreviousSales] = useState([]);
+	const [previousChartState, setPreviousChartState] = useState(null);
+	const [loadingPrevious, setLoadingPrevious] = useState(false);
+	
+	// Process chart data for the metric being compared
+	const [comparisonData, setComparisonData] = useState({
+		currentPeriodLabel: '',
+		previousPeriodLabel: '',
+		currentData: [],
+		previousData: [],
+		xAxisData: []
+	});
+
+	// Fetch previous period data when date, comparison type, or designer changes
+	useEffect(() => {
+		if (!date || !designer?.user || !designer?.password) {
+			return;
+		}
+		
+		const fetchPreviousPeriodData = async () => {
+			setLoadingPrevious(true);
+			
+			// Calculate the previous period date based on comparison type
+			let previousDate = new Date(date);
+			if (comparisonType === 'MoM') {
+				// Month over Month - go back 1 month
+				previousDate.setUTCMonth(previousDate.getUTCMonth() - 1);
+			} else {
+				// Year over Year - go back 1 year
+				previousDate.setUTCFullYear(previousDate.getUTCFullYear() - 1);
+			}
+			
+			try {
+				const response = await fetch('/api/sales-portal/getSales', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({ 
+						user: designer?.user, 
+						password: designer?.password, 
+						date: previousDate,
+						admin: designer?.admin 
+					}),
+				});
+				
+				const data = await response.json();
+				
+				if (data.success) {
+					setPreviousSales(data.data);
+					
+					// Process previous period chart data
+					if (data.data && data.data.length > 0) {
+						// Process chart data with correct cents to dollars conversion
+						const processedChartData = processChartData(data.data, previousDate);
+						setPreviousChartState(processedChartData);
+					}
+				}
+			} catch (error) {
+				console.error('Error fetching previous period data:', error);
+			} finally {
+				setLoadingPrevious(false);
+			}
+		};
+		
+		fetchPreviousPeriodData();
+	}, [date, comparisonType, designer?.user, designer?.password, designer?.admin]);
+	
+	// Process comparison data based on selected metric when data changes
+	useEffect(() => {
+		if (!chartState || !date) {
+			return;
+		}
+		
+		// Ensure we have valid chart state before processing
+		if (!chartState.xAxis || !chartState.salesData) {
+			return;
+		}
+		
+		// Get current period label
+		const currentMonthName = new Date(date).toLocaleString("en-US", { timeZone: 'UTC', month: "long" });
+		const currentYear = new Date(date).getUTCFullYear();
+		const currentPeriodLabel = `${currentMonthName} ${currentYear}`;
+		
+		// Get previous period label
+		let previousPeriodLabel = 'Previous Period';
+		if (previousChartState) {
+			let previousDate = new Date(date);
+			if (comparisonType === 'MoM') {
+				previousDate.setUTCMonth(previousDate.getUTCMonth() - 1);
+			} else {
+				previousDate.setUTCFullYear(previousDate.getUTCFullYear() - 1);
+			}
+			
+			const previousMonthName = previousDate.toLocaleString("en-US", { timeZone: 'UTC', month: "long" });
+			const previousYear = previousDate.getUTCFullYear();
+			previousPeriodLabel = `${previousMonthName} ${previousYear}`;
+		}
+		
+		// Generate x-axis data (days 1-31)
+		const daysInMonth = new Date(date.getUTCFullYear(), date.getUTCMonth() + 1, 0).getUTCDate();
+		const xAxisData = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+		
+		// Generate data arrays based on selected metric
+		let currentData = Array(daysInMonth).fill(0);
+		let previousData = Array(daysInMonth).fill(0);
+		
+		// Check if we're comparing daily values or cumulative
+		const useCumulativeData = true; // Could be a toggle in the UI
+		
+		switch (metric) {
+			case 'revenue':
+				if (useCumulativeData) {
+					currentData = chartState.salesData || Array(daysInMonth).fill(0);
+					previousData = previousChartState?.salesData || Array(daysInMonth).fill(0);
+				} else {
+					// For non-cumulative data, calculate daily values
+					currentData = (chartState.salesData || Array(daysInMonth).fill(0)).map((val, i, arr) => 
+						i === 0 ? val : val - arr[i-1]
+					);
+					
+					// Process previous data safely
+					previousData = previousChartState?.salesData 
+						? previousChartState.salesData.map((val, i, arr) => 
+							i === 0 ? val : val - arr[i-1]
+						) 
+						: Array(daysInMonth).fill(0);
+				}
+				break;
+				
+			case 'orders':
+				if (useCumulativeData) {
+					currentData = chartState.orderData || Array(daysInMonth).fill(0);
+					previousData = previousChartState?.orderData || Array(daysInMonth).fill(0);
+				} else {
+					currentData = (chartState.orderData || Array(daysInMonth).fill(0)).map((val, i, arr) => 
+						i === 0 ? val : val - arr[i-1]
+					);
+					
+					previousData = previousChartState?.orderData 
+						? previousChartState.orderData.map((val, i, arr) => 
+							i === 0 ? val : val - arr[i-1]
+						) 
+						: Array(daysInMonth).fill(0);
+				}
+				break;
+				
+			case 'discounts':
+				if (useCumulativeData) {
+					currentData = chartState.discountData || Array(daysInMonth).fill(0);
+					previousData = previousChartState?.discountData || Array(daysInMonth).fill(0);
+				} else {
+					currentData = (chartState.discountData || Array(daysInMonth).fill(0)).map((val, i, arr) => 
+						i === 0 ? val : val - arr[i-1]
+					);
+					
+					previousData = previousChartState?.discountData 
+						? previousChartState.discountData.map((val, i, arr) => 
+							i === 0 ? val : val - arr[i-1]
+						) 
+						: Array(daysInMonth).fill(0);
+				}
+				break;
+				
+			case 'refunds':
+				if (useCumulativeData) {
+					currentData = chartState.refundData || Array(daysInMonth).fill(0);
+					previousData = previousChartState?.refundData || Array(daysInMonth).fill(0);
+				} else {
+					currentData = (chartState.refundData || Array(daysInMonth).fill(0)).map((val, i, arr) => 
+						i === 0 ? val : val - arr[i-1]
+					);
+					
+					previousData = previousChartState?.refundData 
+						? previousChartState.refundData.map((val, i, arr) => 
+							i === 0 ? val : val - arr[i-1]
+						) 
+						: Array(daysInMonth).fill(0);
+				}
+				break;
+				
+			default:
+				currentData = [];
+				previousData = [];
+		}
+		
+		// Calculate the current day (for limiting data display in current month)
+		const currentDate = new Date();
+		const isCurrentMonth = date.getUTCMonth() === currentDate.getUTCMonth() && 
+			date.getUTCFullYear() === currentDate.getUTCFullYear();
+		const currentDay = isCurrentMonth ? currentDate.getUTCDate() : daysInMonth;
+		
+		// Limit the data to the current day if viewing the current month
+		if (isCurrentMonth) {
+			currentData = currentData.slice(0, currentDay);
+			previousData = previousData.slice(0, currentDay);
+		}
+		
+		// Set the comparison data
+		setComparisonData({
+			currentPeriodLabel,
+			previousPeriodLabel,
+			currentData,
+			previousData,
+			xAxisData: xAxisData.slice(0, isCurrentMonth ? currentDay : daysInMonth)
+		});
+		
+	}, [chartState, previousChartState, date, metric, comparisonType]);
+
+	// Handle comparison type change
+	const handleComparisonTypeChange = (event, newType) => {
+		if (newType) {
+			setComparisonType(newType);
+		}
+	};
+
+	// Handle metric change
+	const handleMetricChange = (event) => {
+		setMetric(event.target.value);
+	};
+
+	// Get y-axis label based on selected metric
+	const getYAxisLabel = () => {
+		switch (metric) {
+			case 'revenue':
+				return 'Revenue';
+			case 'orders':
+				return 'Order Count';
+			case 'discounts':
+				return 'Discount Amount';
+			case 'refunds':
+				return 'Refund Amount';
+			default:
+				return '';
+		}
+	};
+
+	// Skip rendering if no data
+	if (!chartState || currentSales.length === 0) {
+		return null;
+	}
+
+	return (
+		<Grid container className={styles.salesSection} sx={{ mt: 4 }}>
+			<Grid item xs={12} sx={{ mb: 2 }}>
+				<Paper elevation={0} sx={{ p: 2, borderRadius: '4px', border: '1px solid rgba(0, 0, 0, 0.12)' }}>
+					<Box sx={{ 
+						display: 'flex', 
+						justifyContent: 'space-between',
+						alignItems: 'center',
+						flexWrap: 'wrap',
+						mb: 2
+					}}>
+						<Typography variant="h5" fontWeight="bold">
+							Period Comparison
+							{(loading || loadingPrevious) && <CircularProgress size={20} sx={{ ml: 2 }} />}
+						</Typography>
+						
+						<Box sx={{ 
+							display: 'flex',
+							alignItems: 'center',
+							gap: 2 
+						}}>
+							{/* Metric selection */}
+							<FormControl size="small" sx={{ minWidth: 150 }}>
+								<InputLabel id="metric-select-label">Metric</InputLabel>
+								<Select
+									labelId="metric-select-label"
+									id="metric-select"
+									value={metric}
+									label="Metric"
+									onChange={handleMetricChange}
+								>
+									<MenuItem value="revenue">Revenue</MenuItem>
+									<MenuItem value="orders">Orders</MenuItem>
+									<MenuItem value="discounts">Discounts</MenuItem>
+									<MenuItem value="refunds">Refunds</MenuItem>
+								</Select>
+							</FormControl>
+							
+							{/* Comparison type toggle */}
+							<ToggleButtonGroup
+								value={comparisonType}
+								exclusive
+								onChange={handleComparisonTypeChange}
+								size="small"
+							>
+								<ToggleButton value="MoM">
+									Month over Month
+								</ToggleButton>
+								<ToggleButton value="YoY">
+									Year over Year
+								</ToggleButton>
+							</ToggleButtonGroup>
+						</Box>
+					</Box>
+
+					{/* Comparison chart */}
+					<ResponsiveChartContainer
+						xAxis={[{
+							data: comparisonData.xAxisData,
+							scaleType: 'band',
+							id: 'x-axis-id',
+							label: 'Day of Month',
+						}]}
+						yAxis={[{
+							scaleType: 'linear',
+							valueFormatter: (value) => {
+								if (metric === 'orders') {
+									return value;
+								}
+								return formatCurrency(value);
+							},
+							id: 'y-axis-id',
+							label: getYAxisLabel(),
+						}]}
+						series={[
+							{
+							type: 'line',
+							data: comparisonData.currentData,
+							label: comparisonData.currentPeriodLabel,
+							color: 'var(--blue, blue)',
+							valueFormatter: (value) => {
+								if (metric === 'orders') {
+									return value;
+								}
+								return formatCurrency(value);
+							}
+						},
+						{
+							type: 'line',
+							data: comparisonData.previousData,
+							label: comparisonData.previousPeriodLabel,
+							color: 'var(--grey800, grey)',
+							valueFormatter: (value) => {
+								if (metric === 'orders') {
+									return value;
+								}
+								return formatCurrency(value);
+							}
+						}
+					]}
+					height={300}
+					margin={{ left: 70, right: 20, top: 50, bottom: 30 }}
+				>
+					<ChartsLegend position="top" />
+					<LinePlot />
+					<ChartsXAxis label="Day of Month" />
+					<ChartsYAxis label={getYAxisLabel()} />
+					<ChartsTooltip />
+				</ResponsiveChartContainer>
+					
+				</Paper>
+			</Grid>
+		</Grid>
+	);
+}