@liiift-studio/sales-portal 1.2.1

package/components/SalesChart.js

@@ -0,0 +1,307 @@
+// Sales chart component displaying various sales metrics and data visualization
+import React from 'react';
+import { FormGroup, FormControlLabel, Checkbox } from '@mui/material';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import styles from '../styles/sales-portal.module.scss';
+
+const currencyFormatterCentless = new Intl.NumberFormat('en-US', {
+	style: 'currency',
+	currency: 'USD',
+	minimumFractionDigits: 0,
+	maximumFractionDigits: 0,
+}).format;
+
+// CurrentDate in UTC
+const currentDate = new Date();
+
+/**
+ * Line mark styles for chart tooltips
+ * @param {string} color - Color for the line mark
+ * @returns {Object} Styles object for line marks
+ */
+function lineMarkStyles(color) {
+	return {
+		background: color,
+		position: 'relative',
+		'&::before': {
+			content: '""',
+			background: 'var(--white, white)',
+			position: 'absolute',
+			width: 'calc(100% - 4px)',
+			height: 'calc(100% - 4px)',
+			top: '2px',
+			left: '2px',
+			borderRadius: '50%',
+			zIndex: "2",
+		},
+		'&::after': {
+			content: '""',
+			position: 'absolute',
+			top: 'calc(50% - 1px)',
+			left: '-2px',
+			width: 'calc(100% + 4px)',
+			height: '2px',
+			background: 'inherit',
+		}
+	}
+}
+
+/**
+ * Sales chart component for visualizing sales data
+ */
+export default function SalesChart({ 
+	sales, 
+	chartState, 
+	seriesData, 
+	displayLosses, 
+	setDisplayLosses, 
+	date, 
+	loading 
+}) {
+	return (
+		<div data-loading={loading}>
+			
+			{/* SVG Patterns */}
+			<svg style={{ height: "0", display: "block" }}>
+				<pattern id="discountHatch" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
+					<line x1="0" y1="0" x2="0" y2="4" style={{ stroke: "black", strokeWidth: "2" }} />
+				</pattern>
+				<pattern id="discountFirstOrderHatch" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
+					<rect x="0" y="0" width="4" height="4" fill="rgba(var(--blueRGB, 0,0,255), .25)" />
+					<line x1="0" y1="0" x2="0" y2="4" style={{ stroke: "black", strokeWidth: "2" }} />
+				</pattern>
+				<pattern id="firstOrderHatch" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
+					<rect x="0" y="0" width="4" height="4" fill="rgba(var(--blueRGB, 0,0,255), .25)" />
+				</pattern>
+			</svg>
+
+			{/* Display Losses Checkbox */}
+			<div className={styles.displayLossContainer}>
+				<FormGroup>
+					<FormControlLabel
+						control={<Checkbox onChange={(e) => setDisplayLosses(e.target.checked)} size="small" />}
+						label="Show potential losses"
+						sx={{
+							mr: 0,
+						}}
+						componentsProps={{ 
+							typography: { 
+								variant: 'body2', 
+								fontSize: "12px", 
+							} 
+						}}
+					/>
+				</FormGroup>
+			</div>
+
+			{/* Sales Chart */}
+			<ResponsiveChartContainer
+				xAxis={[{
+					data: (() => {
+						return chartState.xAxis;
+					})(),
+					valueFormatter: (v, context) => {
+						if (context?.location === "tick") return `${v}`;
+
+						// Format as "UTC: Month Day"
+						return `UTC: ${new Date(date).toLocaleString("en-US", { timeZone: 'UTC', month: "long" })} ${v}`;
+					},
+					min: chartState.xAxis[0],
+					max: (() => {
+						const lastDayOfMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate();
+						const currentUTCDate = new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate()));
+						
+						if (date.getUTCMonth() === currentUTCDate.getUTCMonth() && date.getUTCFullYear() === currentUTCDate.getUTCFullYear()) {
+							return Math.min(currentUTCDate.getUTCDate(), lastDayOfMonth);
+						}
+						return date.getUTCMonth() < currentUTCDate.getUTCMonth() || date.getUTCFullYear() < currentUTCDate.getUTCFullYear() 
+							? lastDayOfMonth 
+							: 1;
+					})(),
+					scaleType: 'band',
+					id: 'x-axis-id',
+					tickLabelPlacement: 'middle',
+				}]}
+				yAxis={[{
+					stacked: true,
+					scaleType: 'linear',
+					valueFormatter: currencyFormatterCentless,
+					id: 'y-axis-id',
+				}]}
+				series={seriesData.length ? seriesData.map(series => ({
+					...series,
+					data: series.data.slice(0, (() => {
+						// If this is the current month, only show data up to the current day (UTC)
+						const lastDayOfMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate();
+						const currentUTCDate = new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate()));
+						const endDate = (date.getUTCMonth() === currentUTCDate.getUTCMonth() && date.getUTCFullYear() === currentUTCDate.getUTCFullYear())
+							? Math.min(currentUTCDate.getUTCDate(), lastDayOfMonth) 
+							: lastDayOfMonth;
+						return endDate;
+					})())
+				})) : []}
+				height={!!sales.length ? 300 : 75}
+				className={'chart'}
+				skipAnimation
+				disableAxisListener={false}
+			>
+				<BarPlot 
+					borderRadius={4}
+					sx={{
+						'& .MuiBarElement-root': {
+							transition: 'all 0.2s ease-in-out',
+						}
+					}}
+				/>
+				<LinePlot 
+					sx={{
+						'& .MuiLineElement-root': {
+							transition: 'all 0.2s ease-in-out',
+						}
+					}}
+				/>
+				<ChartsYAxis axisId="y-axis-id" />
+				<ChartsXAxis axisId="x-axis-id" />
+				<ChartsAxisHighlight x='line' />
+				<ChartsTooltip
+					slotProps={{
+						popper: {
+							sx: {
+								// The wrap
+								["& .MuiChartsTooltip-root"]: {
+									boxShadow: "0 0 10px rgba(var(--blackRGB, 0,0,0), 0.1)",
+									padding: "10px",
+								},
+								["& .MuiChartsTooltip-paper::after"]: {
+									content: '"non-applicable fields are hidden"',
+									fontSize: "10px",
+									maxWidth: "100%",
+									textAlign: "center",
+									background: "rgba(var(--blackRGB, 0,0,0), 0.1)",
+									display: "block",
+									color: "rgba(var(--blackRGB, 0,0,0), 0.5)",
+									padding: "5px",
+								},
+
+								// The title
+								["& .MuiChartsTooltip-paper thead"]: {
+									background: "var(--black, black)",
+								},
+								["& .MuiChartsTooltip-paper thead *"]: {
+									color: "var(--white, white)",
+									textAlign: "center",
+									fontWeight: "900",
+									fontVariationSettings: '"wght" 900, "wdth" 500',
+									fontSize: "14px",
+									letterSpacing: "0.01em",
+									textTransform: "uppercase",
+								},
+								// The body
+								["& .MuiChartsTooltip-paper tbody tr:nth-of-type(odd)"]: {
+									background: "rgba(var(--blackRGB, 0,0,0), 0.1)",
+									padding: "10px",
+								},
+								["& .MuiChartsTooltip-paper tbody tr * "]: {
+									fontSize: "14px",
+									letterSpacing: "0.01em",
+									textTransform: "uppercase",
+									lineHeight: "1",
+									padding: "5px",
+								},
+								// The mark
+								["& .MuiChartsTooltip-mark"]: {
+									border: "none",
+									outline: "none",
+									boxShadow: "none",
+									marginLeft: "5px",
+									mixBlendMode: "multiply",
+								},
+								// Mark styling for discounts
+								["& .MuiChartsTooltip-row:first-of-type .MuiChartsTooltip-mark"]: {
+									background:
+										(
+											(chartState.discountData?.length > 0 && chartState.discountData.some(value => value !== 0)) &&
+											(chartState.discountFirstOrderData?.length > 0 && chartState.discountFirstOrderData.some(value => value !== 0))
+										) ?
+											'repeating-linear-gradient( -45deg, transparent, transparent 2px, black 0px, black 3px, transparent 0px, transparent 4px), rgba(0,0,0,0.05)'
+											: '',
+								},
+								["& .MuiChartsTooltip-row:nth-of-type(2) .MuiChartsTooltip-mark"]: {
+									background:
+										(
+											(chartState.discountData?.length > 0 && chartState.discountData.some(value => value !== 0)) &&
+											(chartState.discountFirstOrderData?.length > 0 && chartState.discountFirstOrderData.some(value => value !== 0))
+										) ?
+											'repeating-linear-gradient( -45deg, transparent, transparent 2px, black 0px, black 3px, transparent 0px, transparent 4px), rgba(var(--blueRGB, 0,0,255), .25)'
+											: '',
+								},
+								["& .MuiChartsTooltip-row:first-of-type .MuiChartsTooltip-mark"]: {
+									background:
+										(
+											(chartState.discountData?.length > 0 && chartState.discountData.some(value => value !== 0)) &&
+											!(!!chartState.discountFirstOrderData?.length > 0 && !!chartState.discountFirstOrderData.some(value => value !== 0))
+										) ?
+											'repeating-linear-gradient( -45deg, transparent, transparent 2px, black 0px, black 3px, transparent 0px, transparent 4px), rgba(0,0,0,0.05)'
+											: (
+												!(chartState.discountData?.length > 0 && chartState.discountData.some(value => value !== 0)) &&
+												(!!chartState.discountFirstOrderData?.length > 0 && !!chartState.discountFirstOrderData.some(value => value !== 0))
+											) ?
+												'repeating-linear-gradient( -45deg, transparent, transparent 2px, black 0px, black 3px, transparent 0px, transparent 4px), rgba(var(--blueRGB, 0,0,255), .25)'
+												: '',
+								},
+								// Mark styling for lines
+								[`& .MuiChartsTooltip-row:nth-last-of-type(${
+									displayLosses && !!(chartState.taxData?.length > 0 && chartState.taxData.some(value => value !== 0)) && !!(chartState.shippingData?.length > 0 && chartState.shippingData.some(value => value !== 0)) ?
+										5
+										:
+										(displayLosses || !!(chartState.taxData?.length > 0 && chartState.taxData.some(value => value !== 0))) && !!(chartState.shippingData?.length > 0 && chartState.shippingData.some(value => value !== 0)) ?
+											4
+											:
+											!!(chartState.shippingData?.length > 0 && chartState.shippingData.some(value => value !== 0)) ?
+												3
+												:
+												-1
+								}) .MuiChartsTooltip-mark`]: {
+									...lineMarkStyles('var(--orange, orange)')
+								},
+								[`& .MuiChartsTooltip-row:nth-last-of-type(${
+									displayLosses && !!(chartState.taxData?.length > 0 && chartState.taxData.some(value => value !== 0)) ?
+										4
+										:
+										!!(chartState.taxData?.length > 0 && chartState.taxData.some(value => value !== 0)) ?
+											3
+											:
+											-1
+								}) .MuiChartsTooltip-mark`]: {
+									...lineMarkStyles('var(--red, red)')
+								},
+								[`& .MuiChartsTooltip-row:nth-last-of-type(${
+									displayLosses ? 3 : 2
+								}) .MuiChartsTooltip-mark`]: {
+									...lineMarkStyles('var(--green, green)')
+								},
+								[`& .MuiChartsTooltip-row:nth-last-of-type(${
+									displayLosses ? 2 : 1
+								}) .MuiChartsTooltip-mark`]: {
+									...lineMarkStyles('var(--blue, blue)')
+								},
+								[`& .MuiChartsTooltip-row:nth-last-of-type(${
+									displayLosses ? 1 : -1
+								}) .MuiChartsTooltip-mark`]: {
+									...lineMarkStyles('var(--black, black)')
+								},
+							},
+						},
+					}}
+				/>
+				<MarkPlot />
+			</ResponsiveChartContainer>
+		</div>
+	);
+}

package/components/SalesPortalPage.js

@@ -0,0 +1,147 @@
+// Complete sales portal page component with login and dashboard views
+import React, { useState } from 'react';
+import { Grid, Typography } from '@mui/material';
+import { ThemeProvider } from '@mui/system';
+import { salesTheme } from '../styles/sales-portal.theme.js';
+import Sales from './Sales.js';
+import LoginForm from './LoginForm.js';
+
+/**
+ * SalesPortalPage - Complete sales portal page with authentication and dashboard
+ * 
+ * This component provides the full sales portal experience:
+ * - Login form for designer authentication
+ * - Post-login dashboard with admin and designer views
+ * - Automatic theme wrapping
+ * 
+ * @param {Object} props Component props
+ * @param {Function} props.renderLoader Optional render prop for custom loader (receives { fill, position, height })
+ * @param {Object} props.texts Optional text customization for login form
+ * @param {boolean} props.includeTheme Whether to wrap with salesTheme (default: true)
+ * @param {Object} props.pageStyles Optional custom styles for the page container
+ * @param {Object} props.dashboardStyles Optional custom styles for the dashboard container
+ */
+export default function SalesPortalPage({
+	renderLoader,
+	texts = {},
+	includeTheme = true,
+	pageStyles = {},
+	dashboardStyles = {}
+}) {
+	// Authentication state
+	const [designers, setDesigners] = useState(null);
+	const [admin, setAdmin] = useState(false);
+	const [credentials, setCredentials] = useState({ user: '', password: '' });
+	
+	// Date state for syncing across Sales components
+	const [month, setMonth] = useState(new Date().getUTCMonth());
+	const [year, setYear] = useState(new Date().getUTCFullYear());
+
+	const handleLoginSuccess = ({ designers, admin, user, password }) => {
+		setDesigners(designers);
+		setAdmin(admin);
+		setCredentials({ user, password });
+	};
+
+	const updateDate = (newDate) => {
+		setMonth(new Date(newDate).getUTCMonth());
+		setYear(new Date(newDate).getUTCFullYear());
+	};
+
+	// Default page title text
+	const {
+		dashboardTitle = 'Monthly Sales',
+		dashboardSubtitle = 'by designer'
+	} = texts;
+
+	const content = (
+		<>
+			{designers ? (
+				<>
+					{/* Admin View - Shows foundry-wide data */}
+					{admin && (
+						<Grid container columnSpacing={10} sx={{
+							position: 'relative',
+							display: 'flex',
+							alignContent: 'flex-start',
+							background: 'rgba(0,0,0,.06)',
+							...dashboardStyles
+						}}>
+							<Grid item xs={12}>
+								<Sales
+									key={'sales-admin'}
+									month={month}
+									year={year}
+									updateDate={updateDate}
+									designer={{
+										admin: true,
+										firstName: '',
+										lastName: 'The Foundry',
+										user: credentials.user,
+										password: credentials.password
+									}}
+									categories={true}
+									admin={true}
+								/>
+							</Grid>
+						</Grid>
+					)}
+
+					{/* Designer Sales View */}
+					<Grid container columnSpacing={10} sx={{
+						pb: 20,
+						position: 'relative',
+						display: 'flex',
+						alignContent: 'flex-start',
+						minHeight: '80vh',
+						...pageStyles
+					}}>
+						<Grid
+							id='titleContainer'
+							item
+							xs={12}
+							sx={{
+								pt: 10,
+								mx: { xs: 'var(--marginXMobile)', md: 'var(--marginX)' },
+							}}
+						>
+							<Typography variant='h1'>{dashboardTitle}</Typography>
+							{admin && <Typography variant='h5'>{dashboardSubtitle}</Typography>}
+						</Grid>
+
+						{designers.map((designer, i) => (
+							<Sales
+								key={`sales-${i}`}
+								designer={{
+									...designer,
+									user: designer.user || credentials.user,
+									password: designer.password || credentials.password
+								}}
+								month={month}
+								year={year}
+								updateDate={updateDate}
+							/>
+						))}
+					</Grid>
+				</>
+			) : (
+				<LoginForm
+					onLoginSuccess={handleLoginSuccess}
+					renderLoader={renderLoader}
+					texts={texts}
+				/>
+			)}
+		</>
+	);
+
+	// Optionally wrap with theme provider
+	if (includeTheme) {
+		return (
+			<ThemeProvider theme={salesTheme}>
+				{content}
+			</ThemeProvider>
+		);
+	}
+
+	return content;
+}