@liiift-studio/sales-portal 3.0.0 → 3.1.0

package/README.md

@@ -72,7 +72,7 @@ export default function SalesPortal() {
     <SalesPortalPage
       texts={{
         title: 'Sales Portal',
-        dashboardTitle: 'Monthly Sales',
+        dashboardTitle: ' Sales',
         dashboardSubtitle: 'by designer'
       }}
     />

package/SETUP.md

@@ -39,7 +39,7 @@ export default function SalesPortal() {
         title: 'Sales Portal',
         description: 'Track your typeface sales performance and revenue.',
         subtitle: 'All sales are reviewed internally before payouts.',
-        dashboardTitle: 'Monthly Sales',
+        dashboardTitle: 'Sales',
         dashboardSubtitle: 'by designer'
       }}
     />

package/api/utils/processors/invoiceProcessor.js

@@ -17,8 +17,8 @@ import { isTestSale } from '../clients';
 function findMatches({ invoice, line = {}, sanitySales = [] }) {
 	// Find matching order
 	const associatedOrder = 
-		(invoice?.id && sanitySales.find(order => order.orderStatus.invoiceId === invoice.id)) || 
-		(invoice?.payment_intent && sanitySales.find(order => order.orderStatus.paymentIntentId === invoice.payment_intent)) || 
+		(invoice?.id && sanitySales.find(order => order?.orderStatus?.invoiceId === invoice.id)) ||
+		(invoice?.payment_intent && sanitySales.find(order => order?.orderStatus?.paymentIntentId === invoice.payment_intent)) ||
 		(invoice?.customer?.email && sanitySales.find(order => {
 			const orderDate = new Date(order._createdAt);
 			const invoiceDate = new Date(invoice.created * 1000);

package/components/DateRangeSalesTable.js

@@ -514,7 +514,7 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
               ? '2px solid var(--green, green)'
               : '2px solid var(--red, red)',
             color: reconciliationData.isReconciled
-              ? 'var(--green, green)'
+              ? 'var(--black, #1a1a1a)'
               : 'var(--red, red)',
             backgroundColor: 'rgba(255, 255, 255, 0.9)',
             filter: 'invert(0) !important',

package/components/Sales.js

@@ -203,6 +203,11 @@ export default function Sales(props) {
 				},
 				'Sales data'
 			);
+
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}`);
+			}
+
 			const data = await response.json();
 
 			if (data.success) {
@@ -257,6 +262,10 @@ export default function Sales(props) {
 				'Previous sales data'
 			);
 
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}`);
+			}
+
 			const data = await response.json();
 
 			if (data.success) {
@@ -314,8 +323,27 @@ export default function Sales(props) {
 			const processedLicenseTypeData = processLicenseTypeData(sales);
 			setLicenseTypeData(processedLicenseTypeData);
 
-			// Set total sales (sum of all sales minus tax and shipping)
-			const totalRevenue = (processedData.salesMax - processedData.taxData.at(-1) - processedData.shippingData.at(-1)) || 0;
+			// Set total sales from unique invoice amounts (accounts for discounts correctly)
+			const seenInvoices = new Set();
+			let totalRevenue = 0;
+			sales.forEach(s => {
+				if (s.shippingProvision) return;
+				const sid = s.id;
+				if (sid && !seenInvoices.has(sid)) {
+					seenInvoices.add(sid);
+					totalRevenue += (s.invoiceTotal || s.total || 0) / 100;
+				}
+			});
+			// Subtract refunds
+			const seenRefunds = new Set();
+			sales.forEach(s => {
+				s.refunds?.forEach(r => {
+					if (r.id && !seenRefunds.has(r.id)) {
+						seenRefunds.add(r.id);
+						totalRevenue -= (r.total || 0) / 100;
+					}
+				});
+			});
 			setTotal(totalRevenue);
 			
 			// Calculate revenue change percentage compared to previous period
@@ -567,10 +595,14 @@ export default function Sales(props) {
 				data-disabled={loading}
 			>
 				<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-					<IconButton 
+					<IconButton
 						onClick={() => {
 							const newDate = new Date(date);
-							newDate.setUTCMonth(date.getUTCMonth() - 1);
+							if (viewMode === 'year') {
+								newDate.setUTCFullYear(date.getUTCFullYear() - 1);
+							} else {
+								newDate.setUTCMonth(date.getUTCMonth() - 1);
+							}
 							setDate(newDate);
 						}}
 						size="small"
@@ -579,19 +611,23 @@ export default function Sales(props) {
 						<ChevronLeftIcon />
 					</IconButton>
 					<DatePicker
-						label='Month/Year (UTC)'
-						views={['month', 'year']}
-						format="MMM YYYY"
+						label={viewMode === 'year' ? 'Year (UTC)' : 'Month/Year (UTC)'}
+						views={viewMode === 'year' ? ['year'] : ['month', 'year']}
+						format={viewMode === 'year' ? 'YYYY' : 'MMM YYYY'}
 						formatDensity="dense"
 						slotProps={{ textField: { variant: "filled" } }}
 						sx={{ "& *": { borderRadius: "4px" } }}
 						value={dayjs.utc(date)}
 						onChange={(newValue) => setDate(newValue.toDate())}
 					/>
-					<IconButton 
+					<IconButton
 						onClick={() => {
 							const newDate = new Date(date);
-							newDate.setUTCMonth(date.getUTCMonth() + 1);
+							if (viewMode === 'year') {
+								newDate.setUTCFullYear(date.getUTCFullYear() + 1);
+							} else {
+								newDate.setUTCMonth(date.getUTCMonth() + 1);
+							}
 							setDate(newDate);
 						}}
 						size="small"
@@ -783,25 +819,9 @@ export default function Sales(props) {
 				<Box sx={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
 					{HeaderSection}
 
-					{/* 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 && (
+					{/* Sales Data Display */}
+					{!!sales.length && (
 						<>
-
 							<Box
 								data-disabled={loading}
 								className={`sales-data-section ${styles.salesSection}`}
@@ -813,18 +833,32 @@ export default function Sales(props) {
 								}}
 							>
 
-								{/* Chart Section */}
-								<Box className="sales-chart-wrapper">
-									<SalesChart
-										sales={sales}
-										chartState={chartState}
-										seriesData={seriesData}
-										displayLosses={displayLosses}
-										setDisplayLosses={setDisplayLosses}
-										date={date}
-										loading={loading}
-									/>
-								</Box>
+								{/* Chart Section — Year or Month */}
+								{viewMode === 'year' && date ? (
+									<Box className="year-overview-wrapper">
+										<YearOverview
+											designer={designer}
+											year={date.getUTCFullYear()}
+											onMonthClick={(monthIndex) => {
+												const newDate = new Date(Date.UTC(date.getUTCFullYear(), monthIndex, 1));
+												setDate(newDate);
+												setViewMode('month');
+											}}
+										/>
+									</Box>
+								) : (
+									<Box className="sales-chart-wrapper">
+										<SalesChart
+											sales={sales}
+											chartState={chartState}
+											seriesData={seriesData}
+											displayLosses={displayLosses}
+											setDisplayLosses={setDisplayLosses}
+											date={date}
+											loading={loading}
+										/>
+									</Box>
+								)}
 
 								{/* Summary Dashboard */}
 								<Box className="summary-cards-wrapper">
@@ -876,7 +910,7 @@ export default function Sales(props) {
 								{/* Sales Table Section */}
 								{designer && (
 									<Box className="sales-table-wrapper">
-										<SalesTable 
+										<SalesTable
 											sales={sales}
 											designer={designer}
 											admin={admin}
@@ -889,12 +923,12 @@ export default function Sales(props) {
 							</Box>
 
 							{/* Date Range Sales Table Section */}
-								<DateRangeSalesTable
-									designer={designer}
-									admin={admin}
-									loading={loadingStates.dateRangeSalesData}
-									updateLoadingState={updateLoadingState}
-								/>
+							<DateRangeSalesTable
+								designer={designer}
+								admin={admin}
+								loading={loadingStates.dateRangeSalesData}
+								updateLoadingState={updateLoadingState}
+							/>
 						</>
 					)}
 

package/components/SalesPortalPage.js

@@ -60,7 +60,7 @@ export default function SalesPortalPage({
 
 	// Default page title text
 	const {
-		dashboardTitle = 'Monthly Sales',
+		dashboardTitle = 'Sales',
 		dashboardSubtitle = 'by designer'
 	} = texts;
 

package/components/SalesTable.js

@@ -173,7 +173,7 @@ export function SalesTable({ sales = [], designer = {}, admin = false, loading =
               ? '2px solid var(--green, green)'
               : '2px solid var(--red, red)',
             color: reconciliationData.isReconciled
-              ? 'var(--green, green)'
+              ? 'var(--black, #1a1a1a)'
               : 'var(--red, red)',
           }}>
             {reconciliationData.isLoading ? (

package/package.json

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

package/styles/sales-portal.module.scss

@@ -47,7 +47,7 @@
     align-items: center;
     white-space: nowrap;
     :global(.MuiTypography-root){
-        font-family: 'Tomato Grotesk', sans-serif;
+        font-family: inherit;
     }
 }
 

package/styles/sales-portal.theme.js

@@ -27,7 +27,7 @@ let size = createTheme({
 let typography = createTheme({
 
 	typography: {
-		fontFamily: '"Ordinary", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+		fontFamily: 'inherit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
 		h1: {
 			maxWidth: '95%',
 			fontStyle: 'normal',