@liiift-studio/sales-portal 3.1.0 → 3.1.1

package/components/DateRangeSalesTable.js

@@ -29,7 +29,7 @@ dayjs.extend(utc);
 import styles from '../styles/sales-portal.module.scss';
 import { getCellValue } from './table-row-cells';
 import { COLUMNS } from './table-columns';
-import SummaryCards from './SummaryCards';
+import Insights from './Insights';
 import TopPerformers from './TopPerformers';
 import TypefaceList from './TypefaceList';
 import LicenseTypeList from './LicenseTypeList';
@@ -379,7 +379,7 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
       </Box>
 
       {/* Date Range Pickers */}
-      <Box sx={{ width: { xs: '100%', sm: '50%', md: '33.33%' }, display: 'flex', gap: 2, mb: 8, justifyContent: 'flex-end', alignItems: 'center' }}>
+      <Box sx={{ width: { xs: '100%', sm: '50%', md: '33.33%' }, display: 'flex', flexWrap: 'wrap', gap: { xs: 1, sm: 2 }, mb: { xs: 4, sm: 8 }, justifyContent: { xs: 'flex-start', sm: 'flex-end' }, alignItems: 'center' }}>
         {!startDate && !endDate && (
           <>
             <Button
@@ -507,9 +507,11 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
         <Box sx={{ width: '100%', mb: 2 }}>
           <Box sx={{
             display: 'inline-block',
-            p: 2,
-            ml: -2,
+            p: { xs: 1.5, sm: 2 },
+            ml: { xs: 0, sm: -2 },
             borderRadius: '4px',
+            maxWidth: '100%',
+            boxSizing: 'border-box',
             border: reconciliationData.isReconciled
               ? '2px solid var(--green, green)'
               : '2px solid var(--red, red)',
@@ -618,8 +620,8 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
       {/* Summary Dashboard and Analysis Components - only show when data is loaded */}
       {!!dateRangeSales.length && (
         <>
-          {/* Summary Cards */}
-          <SummaryCards
+          {/* Insights */}
+          <Insights
             sales={dateRangeSales}
             previousSales={[]} // No previous data in date range view
             loading={loading}

package/components/{SummaryCards.js → Insights.js}

@@ -1,4 +1,4 @@
-// Summary dashboard cards displaying key sales metrics at a glance with country code tooltips
+// Insights cards displaying key sales metrics at a glance with country code tooltips
 import React from 'react';
 import {
 	Box,
@@ -33,7 +33,7 @@ const getCountryName = (code) => {
 };
 
 /**
- * Summary dashboard component showing key sales metrics with period-over-period comparison
+ * Insights component showing key sales metrics with period-over-period comparison
  * @param {Object} props - Component props
  * @param {Array} props.sales - Current period sales data
  * @param {Array} props.previousSales - Previous period sales data for comparison
@@ -41,9 +41,9 @@ const getCountryName = (code) => {
  * @param {Object} props.chartState - Chart data state
  * @param {Date} props.date - Current date being displayed
  * @param {Object} props.locationData - Data about sales by location
- * @returns {JSX.Element} Summary cards component
+ * @returns {JSX.Element} Insights component
  */
-export default function SummaryCards({ 
+export default function Insights({ 
 	sales = [], 
 	previousSales = [], 
 	loading = false,
@@ -151,34 +151,34 @@ export default function SummaryCards({
 			value: formatCurrency(grossRevenue),
 			change: revenueChange,
 			tooltip: hasPreviousData ? `Previous: ${formatCurrency(previousRevenue)}` : 'No prior data available',
-			bgcolor: 'var(--black, black)',
+			bgcolor: '#000000',
 		},
 		{
 			title: 'Orders',
 			value: orderCount,
 			change: orderCountChange,
 			tooltip: hasPreviousData ? `Previous: ${previousOrderCount}` : 'No prior data available',
-			bgcolor: 'var(--black, black)',
+			bgcolor: '#000000',
 		},
 		{
 			title: 'Avg. Order Value',
 			value: formatCurrency(averageOrderValue),
 			change: avgOrderValueChange,
 			tooltip: hasPreviousData ? `Previous: ${formatCurrency(previousAvgOrderValue)}` : 'No prior data available',
-			bgcolor: 'var(--black, black)',
+			bgcolor: '#000000',
 		},
 		{
 			title: 'Discount Rate',
 			value: `${discountRate.toFixed(1)}%`,
 			tooltip: `Total discounts: ${formatCurrency(discountTotal)}`,
-			bgcolor: 'var(--black, black)',
+			bgcolor: '#000000',
 		},
 		{
 			title: 'Refund Rate',
 			value: `${refundRate.toFixed(1)}%`,
 			change: refundChange,
 			tooltip: `Total refunds: ${formatCurrency(refundTotal)}`,
-			bgcolor: 'var(--black, black)',
+			bgcolor: '#000000',
 		},
 		{
 			title: 'Top Location',
@@ -187,7 +187,7 @@ export default function SummaryCards({
 			tooltip: previousTopLocation ? 
 				`Previous top location: ${previousTopLocation} (${previousTopLocationPercentage.toFixed(1)}%)` : 
 				'No prior data available',
-			bgcolor: 'var(--black, black)',
+			bgcolor: '#000000',
 			isLocationCard: true,
 			locationCode: topLocation,
 		}
@@ -221,7 +221,7 @@ export default function SummaryCards({
 						placement="top" 
 						arrow
 					>
-						<span style={{ color: "var(--white, white)", borderBottom: '2px solid rgba(255,255,255,.45)', cursor: 'help' }}>{code}</span>
+						<span style={{ color: "var(--white, white)", borderBottom: '2px solid rgba(var(--whiteRGB, 255, 255, 255), .45)', cursor: 'help' }}>{code}</span>
 					</Tooltip>
 				</>
 			);
@@ -235,7 +235,7 @@ export default function SummaryCards({
 			sx={{
 				display: 'flex',
 				flexWrap: 'wrap',
-				gap: isMobile ? 1 : 2,
+				gap: isMobile ? 1.5 : 2,
 				mt: 2,
 				position: 'relative',
 				'&[data-loading="true"]': {
@@ -259,77 +259,62 @@ export default function SummaryCards({
 			
 			{/* Metric cards */}
 			{metricCards.map((card, index) => (
-				<Box key={`metric-${index}`} sx={{ width: { xs: 'calc(50% - 8px)', md: 'calc(33.33% - 11px)' } }}>
+				<Box key={`metric-${index}`} sx={{ width: { xs: '100%', sm: 'calc(50% - 8px)', md: 'calc(33.33% - 11px)' } }}>
 					<Tooltip 
 						title={card.tooltip} 
 						placement="top" 
 						arrow
 					>
-						<Paper 
-							elevation={0} 
-							sx={{ 
-								p: 4, 
-								textAlign: 'center',
+						<Paper
+							elevation={0}
+							sx={{
+								p: { xs: 1.5, sm: 4 },
+								textAlign: { xs: 'left', sm: 'center' },
 								borderRadius: '4px',
-								border: '1px solid rgba(255, 255, 255, 0.12)',
+								border: '1px solid rgba(var(--whiteRGB, 255, 255, 255), 0.12)',
 								backgroundColor: card.bgcolor,
+								display: { xs: 'flex', sm: 'block' },
+								alignItems: 'center',
+								justifyContent: 'space-between',
+								gap: 1,
 								'&:hover': {
-									boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
-									transform: 'translateY(-2px)',
+									boxShadow: '0 4px 8px rgba(var(--blackRGB, 0, 0, 0), 0.3)',
+									transform: { sm: 'translateY(-2px)' },
 									transition: 'all 0.3s ease'
 								}
 							}}
 						>
-							<Box sx={{ 
-								display: 'flex', 
-								alignItems: 'center',
-								justifyContent: 'center', 
-							}}>
-								<Typography 
-									variant="h6" color="rgba(255, 255, 255, 0.7)"
-									sx={{
-										whiteSpace: 'nowrap',
-										textOverflow: 'ellipsis',
-										overflow: 'hidden',
-									}}
-								>
-									{card.title}
-								</Typography>
-							</Box>
-							<Box sx={{ 
-								display: 'flex', 
-								alignItems: 'center',
-								justifyContent: 'center', 
-							}}>
-								<Typography 
-									variant={isMobile ? "h6" : "h5"} 
+							<Typography
+								variant="body2" color="rgba(var(--whiteRGB, 255, 255, 255), 0.7)"
+								sx={{
+									whiteSpace: 'nowrap',
+									textOverflow: 'ellipsis',
+									overflow: 'hidden',
+									fontSize: { xs: '0.8rem', sm: '1rem' },
+								}}
+							>
+								{card.title}
+							</Typography>
+							<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: { xs: 'flex-end', sm: 'center' } }}>
+								<Typography
+									variant="body1"
 									fontWeight="bold"
 									sx={{
-										fontSize: {
-											xs: '1.1rem',
-											sm: '1.3rem',
-											md: '1.5rem'
-										},
-										color: 'rgba(255, 255, 255, 0.95)'
+										fontSize: { xs: '0.95rem', sm: '1.3rem', md: '1.5rem' },
+										color: 'rgba(var(--whiteRGB, 255, 255, 255), 0.95)',
+										whiteSpace: 'nowrap',
 									}}
 								>
 									{card.isLocationCard ? renderLocationValue(card.locationCode, card.value) : card.value}
 								</Typography>
-							</Box>
-
-							<Box sx={{ 
-								display: 'flex', 
-								alignItems: 'center',
-								justifyContent: 'center', 
-							}}>
-								<Typography 
-									variant="caption" 
-									sx={{ 
-										mt: 0.5,
+								<Typography
+									variant="caption"
+									sx={{
+										display: { xs: 'none', sm: 'block' },
 										opacity: (card.change !== null && card.change !== undefined) ? 1 : 0.25,
-										color: card.change > 0 ? 'var(--green, #4caf50)' : 
-													card.change < 0 ? 'var(--red, #f44336)' : 
-														'rgba(255, 255, 255, 0.6)'
+										color: card.change > 0 ? 'var(--green, #4caf50)' :
+											card.change < 0 ? 'var(--red, #f44336)' :
+												'rgba(var(--whiteRGB, 255, 255, 255), 0.6)'
 									}}
 								>
 									{(card.change !== null && card.change !== undefined) ? `${formatPercentage(card.change)} vs prior` : <span>&nbsp;</span>}

package/components/LicenseTypeList.js

@@ -76,17 +76,19 @@ export default function LicenseTypeList({ licenseTypeData, sales, loading, admin
 				<Box sx={{
 					background: "rgba(var(--blackRGB, 0,0,0), 1)",
 					color: "var(--white, white)",
-					padding: "5px 10px 10px",
+					padding: { xs: "8px 12px", sm: "5px 10px 10px" },
 					display: "flex",
 					justifyContent: "space-between",
-					alignItems: "center"
+					alignItems: "center",
+					flexWrap: { xs: 'wrap', sm: 'nowrap' },
+					gap: 1,
 				}}>
-					<Typography variant='h5'>
+					<Typography variant='h5' sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
 						<strong>License Type</strong>
 					</Typography>
-					<Stack direction="row" spacing={2} alignItems="center">
-						<FormControl variant="filled" size="small" sx={{ 
-							minWidth: 120, 
+					<Stack direction="row" spacing={1} alignItems="center">
+						<FormControl variant="filled" size="small" sx={{
+							minWidth: { xs: 90, sm: 120 },
 							'& .MuiFilledInput-root': { color: "var(--white, white)"},
 							'& .MuiFormLabel-root': { color: 'rgba(255,255,255,0.7)' },
 							'& .MuiSelect-icon': { display: 'none' },
@@ -137,10 +139,11 @@ export default function LicenseTypeList({ licenseTypeData, sales, loading, admin
 								key={`license-total-${i}`} 
 								variant='h5' 
 								sx={{
-									color: 'var(--black, black)', 
-									whiteSpace: "nowrap",
+									color: 'var(--black, black)',
+									whiteSpace: { xs: "normal", md: "nowrap" },
 									overflow: "hidden",
-									textOverflow: "ellipsis", 
+									textOverflow: "ellipsis",
+									fontSize: { xs: '0.85rem', sm: '1rem', md: '1.25rem' },
 									paddingTop: licenseTypeData[i-1] && license.name[0] !== licenseTypeData[i-1].name[0] ? "0.5em" : "",
 								}}
 							>

package/components/LoginForm.js

@@ -104,7 +104,7 @@ export default function LoginForm({
 			<Box sx={{
 				width: '100%',
 				maxWidth: '860px',
-				borderRadius: '12px',
+				borderRadius: { xs: 0, sm: '12px' },
 				overflow: 'hidden',
 				boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
 				bgcolor: 'var(--white, white)',
@@ -207,9 +207,9 @@ export default function LoginForm({
 								justifyContent: 'center',
 								alignItems: 'center',
 								bgcolor: 'var(--green)',
-								minHeight: '64px',
+								minHeight: { xs: '52px', sm: '64px' },
 								maxWidth: 'initial',
-								borderRadius: '0 0 0 12px',
+								borderRadius: { xs: '0 0 0 0', sm: '0 0 0 12px' },
 								opacity: 1,
 								flexShrink: 0,
 								'&:hover': {

package/components/Sales.js

@@ -22,7 +22,7 @@ import YearOverview from './YearOverview';
 import SalesChart from './SalesChart';
 import TopPerformers from './TopPerformers';
 import TypefaceList from './TypefaceList';
-import SummaryCards from './SummaryCards';
+import Insights from './Insights';
 import LicenseTypeList from './LicenseTypeList';
 
 dayjs.extend(utc);
@@ -216,8 +216,11 @@ export default function Sales(props) {
 				setMessage('Error retrieving sales data');
 			}
 		} catch (err) {
-			setMessage('Error retrieving sales data');
-			console.error(err);
+			// Ignore aborted requests (e.g. from component unmount during resize)
+			if (err.name !== 'AbortError' && err.message !== 'Failed to fetch') {
+				setMessage('Error retrieving sales data');
+				console.error(err);
+			}
 		} finally {
 			updateLoadingState('salesData', false);
 		}
@@ -277,6 +280,8 @@ export default function Sales(props) {
 				setPreviousSales([]); // Clear any stale data
 			}
 		} catch (err) {
+			// Ignore aborted requests (e.g. from component unmount during resize)
+			if (err.name === 'AbortError' || err.message === 'Failed to fetch') return;
 			const errorMsg = `Error retrieving previous sales data: ${err.message}`;
 			console.error(errorMsg, err);
 			setPreviousSalesError(errorMsg);
@@ -534,7 +539,7 @@ export default function Sales(props) {
 			{/* Header Section */}
 			<Box data-disabled={loading} data-loading={loading}
 				sx={{
-					width: { xs: '66.67%', md: '66.67%' },
+					width: { xs: '100%', sm: '66.67%' },
 					".show-hover": { display: "none" },
 					"&:hover .show-hover": { display: "inline", opacity: "0.5" },
 				}}
@@ -588,13 +593,14 @@ export default function Sales(props) {
 			{/* Date Picker and View Controls */}
 			<Box
 				sx={{
-					width: { xs: '33.33%', md: '33.33%' },
-					justifyContent: "end",
+					width: { xs: '100%', sm: '33.33%' },
+					justifyContent: { xs: 'flex-start', sm: 'flex-end' },
 					display: "flex",
+					mt: { xs: 2, sm: 0 },
 				}}
 				data-disabled={loading}
 			>
-				<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+				<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.5, sm: 1 }, flexWrap: { xs: 'wrap', sm: 'nowrap' }, justifyContent: { xs: 'flex-start', sm: 'flex-end' } }}>
 					<IconButton
 						onClick={() => {
 							const newDate = new Date(date);
@@ -606,7 +612,7 @@ export default function Sales(props) {
 							setDate(newDate);
 						}}
 						size="small"
-						sx={{ display: { xs: 'none', md: 'inherit' } }}
+						sx={{ minWidth: '44px', minHeight: '44px', display: { xs: 'none', sm: 'flex' } }}
 					>
 						<ChevronLeftIcon />
 					</IconButton>
@@ -615,8 +621,8 @@ export default function Sales(props) {
 						views={viewMode === 'year' ? ['year'] : ['month', 'year']}
 						format={viewMode === 'year' ? 'YYYY' : 'MMM YYYY'}
 						formatDensity="dense"
-						slotProps={{ textField: { variant: "filled" } }}
-						sx={{ "& *": { borderRadius: "4px" } }}
+						slotProps={{ textField: { variant: "filled", size: "small" } }}
+						sx={{ "& *": { borderRadius: "4px" }, maxWidth: { xs: '160px', sm: 'none' }, flex: { xs: 1, sm: 'none' } }}
 						value={dayjs.utc(date)}
 						onChange={(newValue) => setDate(newValue.toDate())}
 					/>
@@ -631,15 +637,15 @@ export default function Sales(props) {
 							setDate(newDate);
 						}}
 						size="small"
-						sx={{ display: { xs: 'none', md: 'inherit' } }}
+						sx={{ minWidth: '44px', minHeight: '44px', display: { xs: 'none', sm: 'flex' } }}
 					>
 						<ChevronRightIcon />
 					</IconButton>
 					{!!sales.length && (
-						<Tooltip 
+						<Tooltip
 							title="Print to PDF"
-							sx={{ display: { xs: 'none', md: 'inherit' } }}
 						>
+						<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
 							<IconButton
 								className='print-button'
 								onClick={() => {
@@ -658,36 +664,50 @@ export default function Sales(props) {
 												size: letter portrait;
 												margin: 0.5in;
 											}
-											header, #navBar, footer, #footer, #titleContainer, .exportSection, 
+											/* 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;
+												display: none !important;
 											}
-											.salesPortal, .salesPortalWrap{
-												background: white;
+											.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 non-printable elements */
-											button, .MuiIconButton-root, .DatePicker {
+											/* Hide interactive elements */
+											button, .MuiIconButton-root, .MuiInput-root,
+											.MuiDateCalendar-root, .print-button,
+											.year-overview-wrapper, .sales-chart-wrapper {
 												display: none !important;
 											}
-											/* Ensure charts and tables fit on page */
-											.salesSection {
+											/* Full width sections */
+											.sales-header-section, .sales-data-section,
+											.insights-wrapper, .sales-table-wrapper {
 												width: 100% !important;
-												margin: 20px 0 !important;
+												padding: 0 !important;
+												margin: 10px 0 !important;
 											}
-											/* Ensure text is readable */
+											/* 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;
+											}
 										}
 									`;
 									document.head.appendChild(style);
@@ -707,6 +727,7 @@ export default function Sales(props) {
 							>
 								<PrintIcon />
 							</IconButton>
+						</Box>
 						</Tooltip>
 					)}
 					{/* Month/Year toggle */}
@@ -722,10 +743,10 @@ export default function Sales(props) {
 								key={mode}
 								onClick={() => setViewMode(mode)}
 								sx={{
-									px: 1.5,
-									py: 0.5,
+									px: { xs: 2, sm: 1.5 },
+									py: { xs: 1, sm: 0.5 },
 									cursor: 'pointer',
-									fontSize: '0.75rem',
+									fontSize: { xs: '0.85rem', sm: '0.75rem' },
 									fontWeight: viewMode === mode ? 'bold' : 'normal',
 									bgcolor: viewMode === mode ? 'var(--black, #1a1a1a)' : 'transparent',
 									color: viewMode === mode ? 'var(--white, white)' : 'inherit',
@@ -860,9 +881,9 @@ export default function Sales(props) {
 									</Box>
 								)}
 
-								{/* Summary Dashboard */}
-								<Box className="summary-cards-wrapper">
-									<SummaryCards
+								{/* Insights */}
+								<Box className="insights-wrapper">
+									<Insights
 										sales={sales}
 										previousSales={previousSales}
 										loading={loading}

package/components/SalesTable.js

@@ -166,9 +166,11 @@ export function SalesTable({ sales = [], designer = {}, admin = false, loading =
         <Box sx={{ width: '100%', mb: 2 }}>
           <Box sx={{
             display: 'inline-block',
-            p: 2,
+            p: { xs: 1.5, sm: 2 },
             mt: '20px',
             borderRadius: '4px',
+            maxWidth: '100%',
+            boxSizing: 'border-box',
             border: reconciliationData.isReconciled
               ? '2px solid var(--green, green)'
               : '2px solid var(--red, red)',

package/components/TopPerformers.js

@@ -110,18 +110,20 @@ export default function TopPerformers({
 					<Box sx={{
 						background: "rgba(var(--blackRGB, 0,0,0), 1)",
 						color: "var(--white, white)",
-						padding: "5px 10px 10px",
+						padding: { xs: "8px 12px", sm: "5px 10px 10px" },
 						display: "flex",
 						justifyContent: "space-between",
-						alignItems: "center"
+						alignItems: "center",
+						flexWrap: { xs: 'wrap', sm: 'nowrap' },
+						gap: 1,
 					}}>
-						<Typography variant='h5' sx={{color: "var(--white, white)"}}>
+						<Typography variant='h5' sx={{ color: "var(--white, white)", fontSize: { xs: '1rem', sm: '1.25rem' } }}>
 							<strong>Designers</strong>
 						</Typography>
-						<Stack direction="row" spacing={2} alignItems="center">
-							
-							<FormControl variant="filled" size="small" sx={{ 
-								minWidth: 120, 
+						<Stack direction="row" spacing={1} alignItems="center">
+
+							<FormControl variant="filled" size="small" sx={{
+								minWidth: { xs: 90, sm: 120 },
 								'& .MuiFilledInput-root': { color: "var(--white, white)" },
 								'& .MuiFormLabel-root': { color: 'rgba(255,255,255,0.7)' },
 								'& .MuiSelect-icon': { display: 'none' }
@@ -159,7 +161,7 @@ export default function TopPerformers({
 					</Box>
 					<Box sx={{
 						background: "rgba(var(--blackRGB, 0,0,0), 0.06)",
-						padding: "10px 10px 20px",
+						padding: { xs: "8px 12px 16px", sm: "10px 10px 20px" },
 					}}>
 						{
 							sortedDesigners.map((designer, i) => {
@@ -173,10 +175,11 @@ export default function TopPerformers({
 											<Typography
 												variant='h5'
 												sx={{
-													whiteSpace: "nowrap",
+													whiteSpace: { xs: "normal", md: "nowrap" },
 													overflow: "hidden",
 													textOverflow: "ellipsis",
-													paddingBottom: "0.5em"
+													paddingBottom: "0.5em",
+													fontSize: { xs: '0.85rem', sm: '1rem', md: '1.25rem' },
 												}}>
 												{designer?.firstName && designer?.lastName ?
 													`${designer.firstName} ${designer.lastName}`
@@ -199,9 +202,10 @@ export default function TopPerformers({
 														key={`designer-typeface-${i}-${j}`}
 														variant='h6'
 														sx={{
-															whiteSpace: "nowrap",
+															whiteSpace: { xs: "normal", md: "nowrap" },
 															overflow: "hidden",
 															textOverflow: "ellipsis",
+															fontSize: { xs: '0.8rem', sm: '0.9rem', md: '1rem' },
 														}}>
 														{typeface.title}
 														<span className={styles.earningContainer}>
@@ -240,17 +244,19 @@ export default function TopPerformers({
 					<Box sx={{
 						background: "rgba(var(--blackRGB, 0,0,0), 1)",
 						color: "var(--white, white)",
-						padding: "5px 10px 10px",
+						padding: { xs: "8px 12px", sm: "5px 10px 10px" },
 						display: "flex",
 						justifyContent: "space-between",
-						alignItems: "center"
+						alignItems: "center",
+						flexWrap: { xs: 'wrap', sm: 'nowrap' },
+						gap: 1,
 					}}>
-						<Typography variant='h5'>
+						<Typography variant='h5' sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
 							<strong>Top Performers</strong>
 						</Typography>
-						<Stack direction="row" spacing={2} alignItems="center">
-							
-							<FormControl 
+						<Stack direction="row" spacing={1} alignItems="center">
+
+							<FormControl
 							variant="filled" 
 							size="small" 
 							sx={{ 

package/components/TypefaceList.js

@@ -64,17 +64,19 @@ export default function TypefaceList({ typefaceData, sales, loading, admin }) {
 				<Box sx={{
 					background: "rgba(var(--blackRGB, 0,0,0), 1)",
 					color: "var(--white, white)",
-					padding: "5px 10px 10px",
+					padding: { xs: "8px 12px", sm: "5px 10px 10px" },
 					display: "flex",
 					justifyContent: "space-between",
-					alignItems: "center"
+					alignItems: "center",
+					flexWrap: { xs: 'wrap', sm: 'nowrap' },
+					gap: 1,
 				}}>
-					<Typography variant='h5'>
+					<Typography variant='h5' sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
 						<strong>Products</strong>
 					</Typography>
-					<Stack direction="row" spacing={2} alignItems="center">
-						<FormControl variant="filled" size="small" sx={{ 
-							minWidth: 120, 
+					<Stack direction="row" spacing={1} alignItems="center">
+						<FormControl variant="filled" size="small" sx={{
+							minWidth: { xs: 90, sm: 120 },
 							'& .MuiFilledInput-root': { color: "var(--white, white)"},
 							'& .MuiFormLabel-root': { color: 'rgba(255,255,255,0.7)' },
 							'& .MuiSelect-icon': { display: 'none' },
@@ -118,10 +120,11 @@ export default function TypefaceList({ typefaceData, sales, loading, admin }) {
 							key={`typeface-total-${i}`} 
 							variant='h5' 
 							sx={{
-								color: 'var(--black, black)', 
-								whiteSpace: "nowrap",
+								color: 'var(--black, black)',
+								whiteSpace: { xs: "normal", md: "nowrap" },
 								overflow: "hidden",
-								textOverflow: "ellipsis", 
+								textOverflow: "ellipsis",
+								fontSize: { xs: '0.85rem', sm: '1rem', md: '1.25rem' },
 								paddingTop: typefaceData[i-1] && typeface.title[0] !== typefaceData[i-1].title[0] ? "0.5em" : "",
 								"& .designer": {display: "none"},
 								"&:hover .designer": {display: "inline"}

package/components/YearOverview.js

@@ -155,7 +155,7 @@ export default function YearOverview({ designer, year, onMonthClick }) {
 
 			{/* Stacked bar chart */}
 			{series.length > 0 ? (
-				<Box sx={{ width: '100%', height: { xs: 250, sm: 350 } }}>
+				<Box sx={{ width: '100%', height: { xs: 200, sm: 300, md: 350 } }}>
 					<ResponsiveChartContainer
 						series={series}
 						xAxis={[{
@@ -215,8 +215,8 @@ export default function YearOverview({ designer, year, onMonthClick }) {
 						sx={{
 							display: 'flex',
 							justifyContent: 'space-between',
-							py: 0.75,
-							px: 1,
+							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)' },
@@ -227,7 +227,7 @@ export default function YearOverview({ designer, year, onMonthClick }) {
 							{MONTH_LABELS[i]} {year}
 							{m.error && <span style={{ color: 'var(--red, red)', marginLeft: 8 }}>error</span>}
 						</Typography>
-						<Box sx={{ display: 'flex', gap: 3 }}>
+						<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>

package/hooks/useReconciliation.js

@@ -12,7 +12,7 @@ export { calculateGrossSales };
  */
 function buildChecks({ sales, diagnostics, grossSales, totalBalanceChange, difference, flaggedTransactions }) {
 	const checks = [];
-	const uniqueChargeIds = new Set(sales.map(s => s.id)).size;
+	const uniqueChargeIds = new Set(sales.filter(s => (s.chargeAmount || s.invoiceTotalWithTax || 0) > 0).map(s => s.id)).size;
 	const salesRefundIds = new Set();
 	sales.forEach(s => s.refunds?.forEach(r => r.id && salesRefundIds.add(r.id)));
 	const testSales = sales.filter(s => s.testSale);
@@ -20,7 +20,7 @@ function buildChecks({ sales, diagnostics, grossSales, totalBalanceChange, diffe
 	// 1. Transaction count match
 	const countMatch = uniqueChargeIds === diagnostics.chargeCount;
 	checks.push({
-		label: 'Transaction count',
+		label: 'Transaction count (>$0)',
 		status: countMatch ? 'pass' : 'fail',
 		detail: `${uniqueChargeIds} sales vs ${diagnostics.chargeCount} Stripe charges`,
 		tip: !countMatch ? 'Mismatch may indicate missing orders in Sanity or charges outside this period.' : null,
@@ -184,7 +184,9 @@ export function useReconciliation({ designer, admin, sales, date, dateRange }) {
 		};
 
 		fetchBalanceTransactions();
-	}, [designer?.user, designer?.password, designer?.admin, date, dateRange, admin, sales]);
+	// Use sales.length instead of sales array to avoid infinite re-render loops
+	// when the array reference changes but content is the same
+	}, [designer?.user, designer?.password, designer?.admin, date, dateRange, admin, sales?.length]);
 
 	return reconciliationData;
 }

package/index.js

@@ -11,7 +11,7 @@ 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 SummaryCards } from './components/Insights.js';
 export { default as TopPerformers } from './components/TopPerformers.js';
 export { default as TypefaceList } from './components/TypefaceList.js';
 export { default as LicenseTypeList } from './components/LicenseTypeList.js';

package/package.json

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

package/styles/sales-portal.module.scss

@@ -76,7 +76,7 @@
 }
 
 .earningContainer {
-    border-bottom: 1px solid rgba(0, 0, 0, .25);
+    border-bottom: 1px solid rgba(var(--blackRGB, 0, 0, 0), .25);
 }
 
 .displayLossContainer{
@@ -115,8 +115,11 @@
 .salesSection{
     padding-left: var(--marginXMobile, 15px);
     padding-right: var(--marginXMobile, 15px);
-    margin-bottom: 28px;
+    margin-bottom: 16px;
     transition: all 0.3s ease;
+    @media screen and (min-width: 600px) {
+        margin-bottom: 28px;
+    }
     @media screen and (min-width: 900px) {
         padding-left: var(--marginX, 30px);
         padding-right: var(--marginX, 30px);
@@ -129,10 +132,14 @@
         pointer-events: none;
         position: absolute;
         top: 0;
-        left: -50%;
-        width: 200%;
+        left: -10%;
+        width: 120%;
+        @media screen and (min-width: 600px) {
+            left: -50%;
+            width: 200%;
+        }
         height: 100%;
-        box-shadow: inset 0 10px 10px 0px rgba(0, 0, 0, 1);
+        box-shadow: inset 0 10px 10px 0px rgba(var(--blackRGB, 0, 0, 0), 1);
     }
 }
 .globeWrap {
@@ -162,7 +169,7 @@
         width: 90%;
         height: 90%;
         border-radius: 100%;
-        background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
+        background: radial-gradient(circle at top, var(--white, white), rgba(var(--whiteRGB, 255, 255, 255), 0) 58%);
         filter: blur(5px);
         z-index: 2; 
     }
@@ -223,14 +230,14 @@
 
 /* New Dashboard Styles */
 
-/* Summary Cards Styling */
-.summaryCardsContainer {
+/* Insights Styling */
+.insightsContainer {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 16px;
     margin-bottom: 24px;
     
-    .summaryCard {
+    .insightCard {
         background-color: rgba(var(--blackRGB, 0, 0, 0), 0.04);
         padding: 16px;
         border-radius: 4px;
@@ -239,7 +246,7 @@
         
         &:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 8px rgba(var(--blackRGB, 0, 0, 0), 0.1);
         }
         
         .cardTitle {
@@ -320,7 +327,7 @@
 .enhancedTable {
     border-radius: 4px;
     overflow: hidden;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 4px rgba(var(--blackRGB, 0, 0, 0), 0.05);
     
     .tableHeader {
         background-color: rgba(var(--blackRGB, 0, 0, 0), 0.06);