@liiift-studio/sales-portal 2.3.0 → 3.0.0

package/api/getYearSales.js

@@ -0,0 +1,105 @@
+// API endpoint for fetching a full year of sales data in a single request
+import { authenticateDesigner, processSalesData } from './utils/salesDataProcessor';
+import { sendError, requirePost } from './utils/apiResponse';
+
+export const config = { maxDuration: 300 };
+
+/**
+ * Fetches 12 months of sales data, processes each month, and returns
+ * the results grouped by month with typeface breakdowns.
+ * This avoids 12 separate API calls from the frontend.
+ */
+export default async function handler(req, res) {
+	if (!requirePost(req, res)) return;
+
+	try {
+		const { user, password, year, admin } = req.body;
+
+		if (!year) {
+			return sendError(res, 400, 'Year is required');
+		}
+
+		const designer = await authenticateDesigner(user, password);
+		if (!designer) {
+			return sendError(res, 401, 'Looks like there was an issue finding the account.');
+		}
+
+		const months = [];
+
+		// Process each month sequentially to avoid Stripe rate limiting
+		for (let month = 0; month < 12; month++) {
+			const monthDate = new Date(Date.UTC(year, month, 1));
+
+			try {
+				const sales = await processSalesData({
+					date: monthDate.toISOString(),
+					designer,
+					admin
+				});
+
+				// Group sales by typeface for the stacked chart
+				const typefaceMap = {};
+				let monthTotal = 0;
+				let shippingTotal = 0;
+
+				sales.forEach(sale => {
+					if (sale.shippingProvision) {
+						shippingTotal += sale.total || 0;
+						return;
+					}
+
+					const typefaceName = sale.typeface?.title || sale.description?.split(' (')[0] || 'Other';
+					if (!typefaceMap[typefaceName]) {
+						typefaceMap[typefaceName] = { total: 0, count: 0 };
+					}
+					typefaceMap[typefaceName].total += sale.total || 0;
+					typefaceMap[typefaceName].count += 1;
+					monthTotal += sale.total || 0;
+				});
+
+				months.push({
+					month,
+					year,
+					total: monthTotal,
+					shippingTotal,
+					salesCount: sales.length,
+					currency: sales[0]?.currency || 'usd',
+					typefaces: Object.entries(typefaceMap)
+						.map(([name, data]) => ({ name, ...data }))
+						.sort((a, b) => b.total - a.total),
+				});
+			} catch (monthError) {
+				// If a single month fails, include it with zero data rather than failing the whole request
+				console.error(`Error processing month ${month + 1}/${year}:`, monthError.message);
+				months.push({
+					month,
+					year,
+					total: 0,
+					shippingTotal: 0,
+					salesCount: 0,
+					currency: 'usd',
+					typefaces: [],
+					error: monthError.message,
+				});
+			}
+		}
+
+		// Build a list of all typefaces across the year for consistent chart series
+		const allTypefaces = new Set();
+		months.forEach(m => m.typefaces.forEach(t => allTypefaces.add(t.name)));
+
+		res.status(200).json({
+			success: true,
+			data: {
+				year,
+				months,
+				allTypefaces: [...allTypefaces].sort(),
+				yearTotal: months.reduce((sum, m) => sum + m.total, 0),
+				yearShipping: months.reduce((sum, m) => sum + m.shippingTotal, 0),
+				currency: months.find(m => m.currency)?.currency || 'usd',
+			}
+		});
+	} catch (error) {
+		return sendError(res, 500, 'Failed to fetch year sales data', error);
+	}
+}

package/components/Sales.js

@@ -18,6 +18,7 @@ import countryCodes from '../data/countryCode.json';
 import { getCurrencySymbol, getCurrencyLabel } from '../utils/currencyUtils';
 import { SalesTable } from './SalesTable';
 import { DateRangeSalesTable } from './DateRangeSalesTable';
+import YearOverview from './YearOverview';
 import SalesChart from './SalesChart';
 import TopPerformers from './TopPerformers';
 import TypefaceList from './TypefaceList';
@@ -47,6 +48,7 @@ export default function Sales(props) {
 	const [previousSalesError, setPreviousSalesError] = useState('');
 	const [retryInfo, setRetryInfo] = useState({ retrying: false, attempt: 0, label: '' });
 	const [date, setDate] = useState(null);
+	const [viewMode, setViewMode] = useState('month'); // 'month' | 'year'
 	const [displayLosses, setDisplayLosses] = useState(false);
 
 	// Max retry attempts for failed API calls
@@ -671,6 +673,37 @@ export default function Sales(props) {
 							</IconButton>
 						</Tooltip>
 					)}
+					{/* Month/Year toggle */}
+					<Box sx={{
+						display: 'flex',
+						ml: 1,
+						border: '1px solid var(--black, #1a1a1a)',
+						borderRadius: '4px',
+						overflow: 'hidden',
+					}}>
+						{['month', 'year'].map(mode => (
+							<Box
+								key={mode}
+								onClick={() => setViewMode(mode)}
+								sx={{
+									px: 1.5,
+									py: 0.5,
+									cursor: 'pointer',
+									fontSize: '0.75rem',
+									fontWeight: viewMode === mode ? 'bold' : 'normal',
+									bgcolor: viewMode === mode ? 'var(--black, #1a1a1a)' : 'transparent',
+									color: viewMode === mode ? 'var(--white, white)' : 'inherit',
+									textTransform: 'uppercase',
+									letterSpacing: '0.05em',
+									'&:hover': {
+										bgcolor: viewMode === mode ? 'var(--black, #1a1a1a)' : 'rgba(0,0,0,0.05)',
+									},
+								}}
+							>
+								{mode === 'month' ? 'Mo' : 'Yr'}
+							</Box>
+						))}
+					</Box>
 				</Box>
 			</Box>
 
@@ -724,7 +757,7 @@ export default function Sales(props) {
 				</Box>
 			}
 		</Box>
-	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales, retryInfo]);
+	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales, retryInfo, viewMode]);
 
 	return (
 		<LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -750,8 +783,23 @@ export default function Sales(props) {
 				<Box sx={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
 					{HeaderSection}
 
-					{/* Sales Data Display */}
-					{!!sales.length && (
+					{/* Year Overview */}
+					{viewMode === 'year' && date && (
+						<Box sx={{ width: '100%', px: { xs: 2, md: 0 } }}>
+							<YearOverview
+								designer={designer}
+								year={date.getUTCFullYear()}
+								onMonthClick={(monthIndex) => {
+									const newDate = new Date(Date.UTC(date.getUTCFullYear(), monthIndex, 1));
+									setDate(newDate);
+									setViewMode('month');
+								}}
+							/>
+						</Box>
+					)}
+
+					{/* Monthly Sales Data Display */}
+					{viewMode === 'month' && !!sales.length && (
 						<>
 
 							<Box

package/components/YearOverview.js

@@ -0,0 +1,243 @@
+// Year overview component showing 12-month stacked bar chart by typeface
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Typography, CircularProgress, Tooltip } from '@mui/material';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { getCurrencySymbol } from '../utils/currencyUtils';
+
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+// Color palette for typeface segments
+const COLORS = [
+	'var(--black, #1a1a1a)',
+	'var(--green, #4caf50)',
+	'#2196f3',
+	'#ff9800',
+	'#9c27b0',
+	'#f44336',
+	'#00bcd4',
+	'#795548',
+	'#607d8b',
+	'#e91e63',
+	'#3f51b5',
+	'#cddc39',
+];
+
+/**
+ * Year overview component
+ * @param {Object} props
+ * @param {Object} props.designer - Designer data with user/password
+ * @param {number} props.year - Year to display
+ * @param {Function} props.onMonthClick - Called when a bar is clicked, receives month index
+ */
+export default function YearOverview({ designer, year, onMonthClick }) {
+	const [data, setData] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState('');
+
+	useEffect(() => {
+		if (!designer?.user || !designer?.password || !year) return;
+
+		setLoading(true);
+		setError('');
+
+		fetch('/api/sales-portal/getYearSales', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				user: designer.user,
+				password: designer.password,
+				year,
+				admin: designer.admin || false,
+			}),
+		})
+			.then(res => res.json())
+			.then(res => {
+				if (res.success) {
+					setData(res.data);
+				} else {
+					setError(res.message || 'Failed to load year data');
+				}
+			})
+			.catch(err => setError(err.message))
+			.finally(() => setLoading(false));
+	}, [designer?.user, designer?.password, designer?.admin, year]);
+
+	// Build chart series from typeface data
+	const { series, xAxisData, topTypefaces } = useMemo(() => {
+		if (!data?.months) return { series: [], xAxisData: [], topTypefaces: [] };
+
+		// Get top typefaces by total revenue across the year, cap at 12 for readability
+		const typefaceTotals = {};
+		data.months.forEach(m => {
+			m.typefaces.forEach(t => {
+				typefaceTotals[t.name] = (typefaceTotals[t.name] || 0) + t.total;
+			});
+		});
+
+		const sorted = Object.entries(typefaceTotals)
+			.sort((a, b) => b[1] - a[1]);
+
+		// Top N get individual colors, rest grouped as "Other"
+		const MAX_SERIES = 10;
+		const topNames = sorted.slice(0, MAX_SERIES).map(([name]) => name);
+		const hasOther = sorted.length > MAX_SERIES;
+
+		const chartSeries = topNames.map((name, i) => ({
+			type: 'bar',
+			data: data.months.map(m => {
+				const tf = m.typefaces.find(t => t.name === name);
+				return (tf?.total || 0) / 100;
+			}),
+			label: name,
+			stack: 'total',
+			color: COLORS[i % COLORS.length],
+		}));
+
+		if (hasOther) {
+			chartSeries.push({
+				type: 'bar',
+				data: data.months.map(m => {
+					const otherTotal = m.typefaces
+						.filter(t => !topNames.includes(t.name))
+						.reduce((sum, t) => sum + t.total, 0);
+					return otherTotal / 100;
+				}),
+				label: 'Other',
+				stack: 'total',
+				color: '#e0e0e0',
+			});
+		}
+
+		return {
+			series: chartSeries,
+			xAxisData: MONTH_LABELS,
+			topTypefaces: sorted.slice(0, MAX_SERIES),
+		};
+	}, [data]);
+
+	if (loading) {
+		return (
+			<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 300, gap: 2 }}>
+				<CircularProgress size={24} />
+				<Typography variant="body1">Loading {year} sales data...</Typography>
+			</Box>
+		);
+	}
+
+	if (error) {
+		return (
+			<Box sx={{ p: 4, textAlign: 'center' }}>
+				<Typography variant="body1" sx={{ color: 'var(--red, red)' }}>{error}</Typography>
+			</Box>
+		);
+	}
+
+	if (!data) return null;
+
+	const symbol = getCurrencySymbol(data.currency);
+
+	return (
+		<Box sx={{ width: '100%' }}>
+			{/* Year total */}
+			<Typography variant="h6" sx={{ mb: 2, opacity: 0.7 }}>
+				{year} Total: {symbol}{(data.yearTotal / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+				{data.yearShipping > 0 && (
+					<span style={{ opacity: 0.5, fontSize: '0.8em' }}>
+						{' '}(+ {symbol}{(data.yearShipping / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })} shipping)
+					</span>
+				)}
+			</Typography>
+
+			{/* Stacked bar chart */}
+			{series.length > 0 ? (
+				<Box sx={{ width: '100%', height: { xs: 250, sm: 350 } }}>
+					<ResponsiveChartContainer
+						series={series}
+						xAxis={[{
+							data: xAxisData,
+							scaleType: 'band',
+							id: 'months',
+						}]}
+						yAxis={[{
+							id: 'revenue',
+							valueFormatter: (v) => `${symbol}${v?.toLocaleString() || 0}`,
+						}]}
+					>
+						<BarPlot
+							onItemClick={(event, barData) => {
+								if (onMonthClick && barData?.dataIndex !== undefined) {
+									onMonthClick(barData.dataIndex);
+								}
+							}}
+						/>
+						<ChartsXAxis axisId="months" />
+						<ChartsYAxis axisId="revenue" />
+						<ChartsTooltip />
+						<ChartsAxisHighlight x="band" />
+					</ResponsiveChartContainer>
+				</Box>
+			) : (
+				<Typography variant="body2" sx={{ textAlign: 'center', py: 4, opacity: 0.5 }}>
+					No sales data for {year}
+				</Typography>
+			)}
+
+			{/* Legend */}
+			{topTypefaces.length > 0 && (
+				<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mt: 2 }}>
+					{topTypefaces.map(([name, total], i) => (
+						<Tooltip key={name} title={`${symbol}${(total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}`}>
+							<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'default' }}>
+								<Box sx={{
+									width: 12,
+									height: 12,
+									borderRadius: '2px',
+									bgcolor: COLORS[i % COLORS.length],
+								}} />
+								<Typography variant="caption">{name}</Typography>
+							</Box>
+						</Tooltip>
+					))}
+				</Box>
+			)}
+
+			{/* Monthly breakdown table */}
+			<Box sx={{ mt: 4, opacity: 0.8 }}>
+				{data.months.map((m, i) => (
+					<Box
+						key={i}
+						onClick={() => onMonthClick && onMonthClick(i)}
+						sx={{
+							display: 'flex',
+							justifyContent: 'space-between',
+							py: 0.75,
+							px: 1,
+							borderBottom: '1px solid rgba(0,0,0,0.06)',
+							cursor: 'pointer',
+							'&:hover': { bgcolor: 'rgba(0,0,0,0.03)' },
+							borderRadius: '4px',
+						}}
+					>
+						<Typography variant="body2">
+							{MONTH_LABELS[i]} {year}
+							{m.error && <span style={{ color: 'var(--red, red)', marginLeft: 8 }}>error</span>}
+						</Typography>
+						<Box sx={{ display: 'flex', gap: 3 }}>
+							<Typography variant="body2" sx={{ opacity: 0.5 }}>
+								{m.salesCount} sale{m.salesCount !== 1 ? 's' : ''}
+							</Typography>
+							<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
+								{symbol}{(m.total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+							</Typography>
+						</Box>
+					</Box>
+				))}
+			</Box>
+		</Box>
+	);
+}

package/index.js

@@ -10,6 +10,7 @@ export { default as Sales } from './components/Sales.js';
 export { SalesTable } from './components/SalesTable.js';
 export { DateRangeSalesTable } from './components/DateRangeSalesTable.js';
 export { default as SalesChart } from './components/SalesChart.js';
+export { default as YearOverview } from './components/YearOverview.js';
 export { default as SummaryCards } from './components/SummaryCards.js';
 export { default as TopPerformers } from './components/TopPerformers.js';
 export { default as TypefaceList } from './components/TypefaceList.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sales-portal",
-	"version": "2.3.0",
+	"version": "3.0.0",
 	"description": "Centralized sales portal package for Liiift Studio projects",
 	"main": "index.js",
 	"types": "index.d.ts",