@liiift-studio/sales-portal 3.1.4 → 3.1.6

package/components/Insights.js

@@ -67,6 +67,7 @@ export default function Insights({
 	let grossRevenue, netRevenue, orderCount, averageOrderValue, discountTotal, discountRate, refundTotal, refundRate;
 	let topLocation = 'Unknown', topLocationPercentage = 0, locationChange = null;
 	let hasPreviousData = false;
+	let previousRevenue = 0, previousOrderCount = 0, previousAvgOrderValue = 0, previousRefundTotal = 0;
 	let revenueChange = null, orderCountChange = null, avgOrderValueChange = null, refundChange = null;
 
 	if (isYearView) {
@@ -113,11 +114,6 @@ export default function Insights({
 		locationChange = locData.locationChange ?? null;
 
 		// Calculate previous period metrics (if available)
-		let previousRevenue = 0;
-		let previousOrderCount = 0;
-		let previousAvgOrderValue = 0;
-		let previousRefundTotal = 0;
-
 		if (previousSales && previousSales.length > 0) {
 			hasPreviousData = true;
 			previousOrderCount = previousSales.length;
@@ -167,21 +163,21 @@ export default function Insights({
 			title: 'Gross Sales',
 			value: formatCurrency(grossRevenue),
 			change: revenueChange,
-			tooltip: isYearView ? `${year} year total` : hasPreviousData ? 'vs prior month' : 'No prior data available',
+			tooltip: isYearView ? `${year} year total` : hasPreviousData ? `Previous: ${formatCurrency(previousRevenue)}` : 'No prior data available',
 			bgcolor: '#000000',
 		},
 		{
 			title: 'Orders',
 			value: orderCount,
 			change: orderCountChange,
-			tooltip: isYearView ? `${year} year total` : hasPreviousData ? 'vs prior month' : 'No prior data available',
+			tooltip: isYearView ? `${year} year total` : hasPreviousData ? `Previous: ${previousOrderCount}` : 'No prior data available',
 			bgcolor: '#000000',
 		},
 		{
 			title: 'Avg. Order Value',
 			value: formatCurrency(averageOrderValue),
 			change: avgOrderValueChange,
-			tooltip: isYearView ? `${year} year average` : hasPreviousData ? 'vs prior month' : 'No prior data available',
+			tooltip: isYearView ? `${year} year average` : hasPreviousData ? `Previous: ${formatCurrency(previousAvgOrderValue)}` : 'No prior data available',
 			bgcolor: '#000000',
 		},
 		{
@@ -253,6 +249,7 @@ export default function Insights({
 			sx={{
 				display: 'flex',
 				flexWrap: 'wrap',
+				width: '100%',
 				gap: isMobile ? 1.5 : 2,
 				mt: 2,
 				position: 'relative',

package/components/Sales.js

@@ -706,56 +706,53 @@ export default function Sales(props) {
 									const portalIndex = allPortals.indexOf(currentPortal) + 1;
 									
 									style.textContent = `
-										@media print {
-											@page {
-												size: letter portrait;
-												margin: 0.5in;
-											}
-											/* Hide everything except this sales portal */
-											header, nav, footer, #navBar, #footer, #titleContainer,
-											.exportSection, .date-range-sales-table-wrapper,
-											.salesPortal:not(:nth-child(${portalIndex})) {
-												display: none !important;
-											}
-											.salesPortal, .salesPortalWrap {
-												background: white !important;
-											}
-											body {
-												-webkit-print-color-adjust: exact !important;
-												print-color-adjust: exact !important;
-											}
-											/* Clean up layout */
-											.salesPortal {
-												padding: 0 !important;
-												width: 100% !important;
-											}
-											.salesPortal > * {
-												page-break-inside: avoid;
-											}
-											/* Hide interactive elements */
-											button, .MuiIconButton-root, .MuiInput-root,
-											.MuiDateCalendar-root, .print-button,
-											.year-overview-wrapper, .sales-chart-wrapper {
-												display: none !important;
-											}
-											/* Full width sections */
-											.sales-header-section, .sales-data-section,
-											.insights-wrapper, .sales-table-wrapper {
-												width: 100% !important;
-												padding: 0 !important;
-												margin: 10px 0 !important;
-											}
-											/* Readable text */
-											.MuiTypography-root {
-												color: black !important;
-											}
-											/* Compact cards for print */
-											.MuiPaper-root {
-												box-shadow: none !important;
-												border: 1px solid #ddd !important;
-												page-break-inside: avoid;
-											}
-										}
+@media print {
+  @page { size: letter portrait; margin: 0.5in; }
+  body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+
+  /* Hide site chrome and other portals */
+  header, nav, footer, #navBar, #footer, #titleContainer,
+  .exportSection, .date-range-sales-table-wrapper,
+  .salesPortal:not(:nth-child(${portalIndex})) { display: none !important; }
+
+  /* Hide interactive controls */
+  .MuiIconButton-root, .MuiInput-root, .MuiDateCalendar-root,
+  .print-button, .MuiFilledInput-root, .MuiFormControl-root { display: none !important; }
+
+  /* Portal layout */
+  .salesPortal, .salesPortalWrap { background: white !important; padding: 0 !important; width: 100% !important; }
+
+  /* Full width sections */
+  .sales-header-section, .sales-data-section, .insights-wrapper, .sales-table-wrapper,
+  .sales-chart-wrapper, .year-overview-wrapper, .typeface-list-wrapper,
+  .license-type-list-wrapper, .top-performers-wrapper { width: 100% !important; padding: 0 !important; margin: 10px 0 !important; }
+
+  /* Page break control */
+  .insights-wrapper, .top-performers-wrapper, .typeface-list-wrapper,
+  .license-type-list-wrapper, .sales-table-wrapper { page-break-inside: avoid; break-inside: avoid; }
+
+  /* Prevent cutting elements across pages */
+  .MuiPaper-root, tr, .designers-section > div,
+  .top-performers-section > div, .product-section > div { page-break-inside: avoid; break-inside: avoid; }
+
+  /* Insight cards: keep dark bg with white text */
+  .insights-wrapper .MuiPaper-root { background-color: #000 !important; color: white !important; border: none !important; box-shadow: none !important; }
+  .insights-wrapper .MuiTypography-root { color: inherit !important; }
+
+  /* Other text: black on white */
+  .sales-header-section .MuiTypography-root, .typeface-list-wrapper .MuiTypography-root,
+  .license-type-list-wrapper .MuiTypography-root, .sales-table-wrapper .MuiTypography-root { color: black !important; }
+
+  /* Section header bars: keep dark bg */
+  .designers-section .MuiTypography-h5, .top-performers-section .MuiTypography-h5,
+  .product-section .MuiTypography-h5 { color: white !important; }
+
+  /* Charts: ensure visible */
+  .sales-chart-wrapper, .year-overview-wrapper { max-height: 400px !important; overflow: hidden !important; page-break-inside: avoid; }
+
+  /* Compact tables */
+  .MuiTableCell-root { padding: 4px 8px !important; font-size: 10px !important; }
+}
 									`;
 									document.head.appendChild(style);
 

package/components/TopPerformers.js

@@ -196,7 +196,7 @@ export default function TopPerformers({
 
 											{/* Individual typefaces for this designer */}
 											{typefaceData
-												?.filter(typeface => typeface.author._id === designer._id)
+												?.filter(typeface => typeface.author?._id === designer._id)
 												.map((typeface, j) => (
 													<Typography
 														key={`designer-typeface-${i}-${j}`}
@@ -209,7 +209,7 @@ export default function TopPerformers({
 														}}>
 														{typeface.title}
 														<span className={styles.earningContainer}>
-															<strong> {(typeface.total / (total + chartState.refundTotal)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>%
+															<strong> {(typeface.total / (total + (chartState?.refundTotal || 0))).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>%
 														</span>
 														<span style={{ opacity: "0.5", textTransform: "none" }}> ({typeface.orders} Orders for a total of </span>
 														<span style={{ opacity: "0.5" }}> USD</span>$<strong>{(typeface.total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}</strong>

package/components/YearOverview.js

@@ -112,16 +112,6 @@ export default function YearOverview({ data, loading = false, error = '', year,
 
 	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: 200, sm: 300, md: 350 } }}>
@@ -176,35 +166,63 @@ export default function YearOverview({ data, loading = false, error = '', year,
 			)}
 
 			{/* Monthly breakdown table */}
-			<Box sx={{ mt: 4, opacity: 0.8 }}>
+			<Box sx={{
+				mt: 4,
+				mb: 6,
+				opacity: 0.8,
+				display: 'grid',
+				gridTemplateColumns: 'auto auto auto',
+				columnGap: { xs: 3, sm: 4 },
+				width: 'fit-content',
+			}}>
 				{data.months.map((m, i) => (
-					<Box
-						key={i}
-						onClick={() => onMonthClick && onMonthClick(i)}
-						sx={{
-							display: 'flex',
-							justifyContent: 'space-between',
-							py: { xs: 1.5, sm: 0.75 },
-							px: { xs: 1.5, sm: 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">
+					<React.Fragment key={i}>
+						<Typography
+							variant="body2"
+							onClick={() => onMonthClick && onMonthClick(i)}
+							sx={{
+								py: { xs: 1.5, sm: 0.75 },
+								pl: { xs: 1.5, sm: 1 },
+								cursor: 'pointer',
+								borderBottom: '1px solid rgba(0,0,0,0.06)',
+								'&:hover': { bgcolor: 'rgba(0,0,0,0.03)' },
+								borderRadius: '4px 0 0 4px',
+							}}
+						>
 							{MONTH_LABELS[i]} {year}
 							{m.error && <span style={{ color: 'var(--red, red)', marginLeft: 8 }}>error</span>}
 						</Typography>
-						<Box sx={{ display: 'flex', gap: { xs: 1.5, sm: 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>
+						<Typography
+							variant="body2"
+							onClick={() => onMonthClick && onMonthClick(i)}
+							sx={{
+								py: { xs: 1.5, sm: 0.75 },
+								opacity: 0.5,
+								textAlign: 'right',
+								cursor: 'pointer',
+								borderBottom: '1px solid rgba(0,0,0,0.06)',
+								'&:hover': { bgcolor: 'rgba(0,0,0,0.03)' },
+							}}
+						>
+							{m.salesCount} sale{m.salesCount !== 1 ? 's' : ''}
+						</Typography>
+						<Typography
+							variant="body2"
+							onClick={() => onMonthClick && onMonthClick(i)}
+							sx={{
+								py: { xs: 1.5, sm: 0.75 },
+								pr: { xs: 1.5, sm: 1 },
+								fontWeight: 'bold',
+								textAlign: 'right',
+								cursor: 'pointer',
+								borderBottom: '1px solid rgba(0,0,0,0.06)',
+								'&:hover': { bgcolor: 'rgba(0,0,0,0.03)' },
+								borderRadius: '0 4px 4px 0',
+							}}
+						>
+							{symbol}{(m.total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+						</Typography>
+					</React.Fragment>
 				))}
 			</Box>
 		</Box>

package/package.json

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

package/utils/salesDataProcessing.js

@@ -446,6 +446,7 @@ export function processDesignersData(typefaceData) {
 	let designersData = [];
 
 	typefaceData?.forEach(typeface => {
+		if (!typeface.author?._id) return;
 		let designer = designersData.find(author => author._id === typeface.author._id);
 		if (designer) {
 			designer.total += typeface.total;