@liiift-studio/sales-portal 1.2.1

package/components/DebugValues.js

@@ -0,0 +1,48 @@
+// Debug component to help troubleshoot value issues
+import React from 'react';
+import { Box, Typography, Paper } from '@mui/material';
+
+/**
+ * Debug component to display raw and processed values
+ * This is a temporary component to help track data values and transformations
+ */
+export default function DebugValues({ 
+  totalRevenue, 
+  previousRevenue, 
+  revenueChange,
+  chartState
+}) {
+  // Format as currency without dividing
+  const formatRawCurrency = (value) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value);
+  };
+
+  // Calculate the percentage manually
+  const calculatePercentage = (current, previous) => {
+    if (!previous) return 'N/A';
+    const change = ((current - previous) / previous) * 100;
+    return change.toFixed(1) + '%';
+  };
+
+  return (
+    <Paper elevation={1} sx={{ p: 2, m: 2, bgcolor: '#f8f9fa', display: 'none' }}>
+      <Typography variant="h6">Debug Values</Typography>
+      
+      <Box sx={{ mt: 2 }}>
+        <Typography variant="body2">Raw Total Revenue: {formatRawCurrency(totalRevenue)}</Typography>
+        <Typography variant="body2">Raw Previous Revenue: {formatRawCurrency(previousRevenue)}</Typography>
+        <Typography variant="body2">Revenue Change (calc): {calculatePercentage(totalRevenue, previousRevenue)}</Typography>
+        <Typography variant="body2">Revenue Change (state): {revenueChange?.toFixed(1)}%</Typography>
+        
+        <Typography variant="body2" sx={{ mt: 1 }}>Chart Net Total: {formatRawCurrency(chartState?.salesMax)}</Typography>
+        <Typography variant="body2">Chart Tax Total: {formatRawCurrency(chartState?.taxData?.at?.(-1) || 0)}</Typography>
+        <Typography variant="body2">Chart Shipping Total: {formatRawCurrency(chartState?.shippingData?.at?.(-1) || 0)}</Typography>
+      </Box>
+    </Paper>
+  );
+}

package/components/LicenseTypeList.js

@@ -0,0 +1,193 @@
+// License type list component displaying all license types and their sales data with percentage sorting capability
+import React, { useState } from 'react';
+import { Grid, Typography, Box, Tooltip, FormControl, InputLabel, Select, MenuItem, Stack } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import styles from '../styles/sales-portal.module.scss';
+
+/**
+ * List of license types with their sales information
+ * Supports sorting by revenue, license name, order count, and percentage of total revenue
+ */
+export default function LicenseTypeList({ licenseTypeData, sales, loading, admin }) {
+	const [sortKey, setSortKey] = useState('percentage');  // Default sort is by percentage
+	const [sortDirection, setSortDirection] = useState('desc'); // Default direction is descending (highest first)
+
+	// Calculate total revenue for percentage calculations
+	const totalRevenue = React.useMemo(() => {
+		if (!licenseTypeData) return 0;
+		return licenseTypeData.reduce((sum, l) => sum + (l.grossTotal - l.taxTotal - l.refundTotal), 0);
+	}, [licenseTypeData]);
+
+	// Sort license type data based on current sort configuration
+	const sortedLicenseTypeData = React.useMemo(() => {
+		if (!licenseTypeData) return [];
+		
+		const sortableData = [...licenseTypeData];
+		
+		sortableData.sort((a, b) => {
+			if (sortKey === 'revenue') {
+				// Sort by revenue (gross total minus tax and refunds)
+				const valueA = a.grossTotal - a.taxTotal - a.refundTotal;
+				const valueB = b.grossTotal - b.taxTotal - b.refundTotal;
+				return sortDirection === 'asc' ? valueA - valueB : valueB - valueA;
+			} 
+			else if (sortKey === 'orders') {
+				// Sort by number of orders
+				return sortDirection === 'asc' ? a.orders - b.orders : b.orders - a.orders;
+			}
+			else if (sortKey === 'percentage') {
+				// Sort by percentage of total revenue
+				const valueA = (a.grossTotal - a.taxTotal - a.refundTotal) / totalRevenue;
+				const valueB = (b.grossTotal - b.taxTotal - b.refundTotal) / totalRevenue;
+				return sortDirection === 'asc' ? valueA - valueB : valueB - valueA;
+			}
+			else {
+				// Sort alphabetically by license name
+				return sortDirection === 'asc' 
+					? a.name.localeCompare(b.name) 
+					: b.name.localeCompare(a.name);
+			}
+		});
+		
+		return sortableData;
+	}, [licenseTypeData, sortKey, sortDirection]);
+
+	// Toggle sort direction
+	const toggleSortDirection = () => {
+		setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+	};
+
+	return (
+		<Grid container className='license-type-section'>
+			<Grid
+				item
+				xs={12}
+				data-disabled={loading}
+				data-loading={loading}
+				sx={{
+					margin: "20px 0 10px",
+					borderRadius: "4px",
+					flex: "none",
+					opacity: !!sales.length ? 1 : 0.25,
+					pointerEvents: !!sales.length ? "" : "none",
+					border: "1px solid var(--black, black)",
+					'&:hover': { boxShadow: "0 0 8px rgba(0,0,0,0.25)" },
+				}}
+			>
+				<Box sx={{
+					background: "rgba(var(--blackRGB, 0,0,0), 1)",
+					color: "var(--white, white)",
+					padding: "5px 10px 10px",
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center"
+				}}>
+					<Typography variant='h5'>
+						<strong>License Type</strong>
+					</Typography>
+					<Stack direction="row" spacing={2} alignItems="center">
+						<FormControl variant="filled" size="small" sx={{ 
+							minWidth: 120, 
+							'& .MuiFilledInput-root': { color: "var(--white, white)"},
+							'& .MuiFormLabel-root': { color: 'rgba(255,255,255,0.7)' },
+							'& .MuiSelect-icon': { display: 'none' },
+						}}>
+							<InputLabel id="license-sort-label">Sort by</InputLabel>
+							<Select
+								labelId="license-sort-label"
+								value={sortKey}
+								onChange={(e) => setSortKey(e.target.value)}
+								label="Sort by"
+							>
+								<MenuItem value="revenue">Revenue</MenuItem>
+								<MenuItem value="percentage">Percentage</MenuItem>
+								<MenuItem value="name">Name</MenuItem>
+								<MenuItem value="orders">Orders</MenuItem>
+							</Select>
+						</FormControl>
+						<Tooltip title={`Sort ${sortDirection === 'asc' ? 'Descending' : 'Ascending'}`}>
+							<Box 
+								onClick={toggleSortDirection} 
+								sx={{ 
+									display: { xs: 'none', sm: 'flex' },
+									cursor: 'pointer',
+									alignItems: 'center',
+									justifyContent: 'center',
+									padding: '6px 10px',
+									color: "var(--white, white)",
+								}}
+							>
+								{sortDirection === 'asc' ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+							</Box>
+						</Tooltip>
+					</Stack>
+				</Box>
+				<Box sx={{
+					background: "rgba(var(--blackRGB, 0,0,0), 0.06)",
+					padding: "10px",
+					pb: 8
+				}}>
+					{sortedLicenseTypeData?.map((license, i) => {
+						// Calculate the revenue
+						const revenue = license?.grossTotal - license?.taxTotal - license?.refundTotal;
+						// Calculate percentage
+						const percentage = (revenue / totalRevenue) * 100;
+						
+						return (
+							<Typography 
+								key={`license-total-${i}`} 
+								variant='h5' 
+								sx={{
+									color: 'var(--black, black)', 
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis", 
+									paddingTop: licenseTypeData[i-1] && license.name[0] !== licenseTypeData[i-1].name[0] ? "0.5em" : "",
+								}}
+							>
+								{sortKey === 'percentage' ? (
+									// When sorted by percentage, show percentage first
+									<>
+										<span className={styles.earningContainer}>
+											<strong style={{minWidth: "100px", display: "inline-block", textAlign: "right"}}>
+												{percentage.toFixed(1)}%
+											</strong>
+										</span>
+										<span> — </span>
+										<span>
+											{license.name}
+											<span style={{opacity:"0.5", textTransform: "none"}}>({license.orders} Orders)</span>
+											<span style={{opacity:"0.5", marginLeft: "10px"}}>
+												<span style={{opacity: "0.5"}}>USD</span>$
+												{(revenue / 100).toLocaleString('en-US', {minimumFractionDigits: 2})}
+											</span>
+										</span>
+									</>
+								) : (
+									// Default display (revenue first)
+									<>
+										<span className={styles.earningContainer}>
+											<span style={{opacity: "0.5"}}>USD</span>$
+											<strong style={{minWidth: "100px", display: "inline-block", textAlign: "right"}}>
+												{(revenue / 100).toLocaleString('en-US', {minimumFractionDigits: 2})}
+											</strong>
+										</span>
+										<span> — </span>
+										<span>
+											{license.name} 
+											<span style={{opacity:"0.5", textTransform: "none"}}>({license.orders} Orders)</span>
+											<span style={{opacity:"0.5", marginLeft: "10px"}}>
+												{percentage.toFixed(1)}% of total
+											</span>
+										</span>
+									</>
+								)}
+							</Typography>
+						);
+					})}
+				</Box>
+			</Grid>
+		</Grid>
+	);
+}

package/components/LoginForm.js

@@ -0,0 +1,219 @@
+// Login form component for sales portal authentication
+import React, { useEffect, useState } from 'react';
+import { Grid, Typography, Input, Button, Box } from '@mui/material';
+import packageJson from '../package.json';
+
+const { version } = packageJson;
+
+/**
+ * LoginForm component for designer authentication
+ * @param {Object} props Component props
+ * @param {Function} props.onLoginSuccess Callback when login succeeds, receives { designers, admin }
+ * @param {Function} props.renderLoader Optional render prop for custom loader component
+ * @param {string} props.apiEndpoint Optional custom API endpoint (default: '/api/sales-portal/getDesignerInfo')
+ * @param {Object} props.texts Optional text customization { title, description, subtitle, buttonLabel }
+ */
+export default function LoginForm({
+	onLoginSuccess,
+	renderLoader,
+	apiEndpoint = '/api/sales-portal/getDesignerInfo',
+	texts = {}
+}) {
+	const [user, setUser] = useState('');
+	const [password, setPassword] = useState('');
+	const [message, setMessage] = useState('');
+	const [loading, setLoading] = useState(false);
+
+	const {
+		title = 'Sales Portal',
+		description = 'A comprehensive dashboard for type designers to track their typeface sales performance and revenue.',
+		subtitle = 'All sales are reviewed internally before payouts. Contact support if you have questions about your sales data.',
+		buttonLabel = 'Login',
+		errorMessage = 'Incorrect username/password or the user is not a designer.',
+		emptyFieldsMessage = 'Please enter a username and password.',
+		disabledMessage = 'Sales portal is currently disabled.'
+	} = texts;
+
+	const handleLogin = () => {
+		if (user !== '' && password !== '') {
+			setLoading(true);
+			fetch(apiEndpoint, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ user, password }),
+			})
+				.then((res) => res.json())
+				.then((res) => {
+					setLoading(false);
+					if (res.disabled) {
+						setMessage(disabledMessage);
+					} else if (res.success) {
+						setMessage('');
+						onLoginSuccess({
+							designers: res.data,
+							admin: res.admin || false,
+							user,
+							password
+						});
+					} else {
+						setMessage(res.message || errorMessage);
+					}
+				})
+				.catch((err) => {
+					setMessage(err.message || errorMessage);
+					setLoading(false);
+				});
+		} else {
+			setMessage(emptyFieldsMessage);
+		}
+	};
+
+	// Clear message when inputs change
+	useEffect(() => {
+		setMessage('');
+	}, [password, user]);
+
+	// Handle Enter key press
+	const handleKeyPress = (e) => {
+		if (e.key === 'Enter') {
+			handleLogin();
+		}
+	};
+
+	return (
+		<Grid container columnSpacing={10} data-loading={loading} sx={{
+			pb: 20,
+			position: 'relative',
+			display: 'flex',
+			alignContent: 'flex-start',
+			px: { xs: 'var(--marginXMobile)', md: 'var(--marginX)' },
+			minHeight: '80vh'
+		}}>
+
+			{loading && renderLoader && renderLoader({ fill: true, position: 'fixed', height: '100%' })}
+
+			<Grid id='titleContainer' item xs={12} sx={{ py: 10 }}>
+				<Typography component={'span'} variant='h2'>{title}</Typography>
+			</Grid>
+
+			<Grid item xs={12} sm="auto" sx={{ minWidth: "400px", zIndex: 1 }}>
+				<Input
+					placeholder='Email'
+					onChange={(e) => setUser(e.target.value)}
+					value={user}
+					type='email'
+					autoComplete="username"
+					onKeyPress={handleKeyPress}
+					sx={{
+						m: 0,
+						mt: 1,
+						border: 'none',
+						typography: 'body1',
+						color: 'var(--grey800)',
+						display: 'flex',
+						justifyContent: 'flex-start',
+						bgcolor: 'white',
+						borderBottom: "2px solid var(--black)",
+						maxWidth: '400px!important',
+						width: '100%',
+						minHeight: '60px',
+						'& input': {
+							pl: '15px',
+							height: '60px',
+						},
+						'& ::placeholder': {
+							color: 'var(--grey800)',
+							opacity: 1,
+						}
+					}}
+				/>
+				<Input
+					placeholder='Password'
+					onChange={(e) => setPassword(e.target.value)}
+					value={password}
+					type='password'
+					autoComplete="current-password"
+					onKeyPress={handleKeyPress}
+					sx={{
+						m: 0,
+						border: 'none',
+						typography: 'body1',
+						color: 'var(--grey800)',
+						display: 'flex',
+						justifyContent: 'flex-start',
+						bgcolor: 'white',
+						borderBottom: "2px solid var(--black)",
+						maxWidth: '400px!important',
+						width: '100%',
+						minHeight: '60px',
+						'& input': {
+							pl: '15px',
+							height: '60px',
+						},
+						'& ::placeholder': {
+							color: 'var(--grey800)',
+							opacity: 1,
+						}
+					}}
+				/>
+				<Button 
+					variant="contained" 
+					className="bold"
+					onClick={handleLogin}
+					disabled={loading}
+					aria-label={buttonLabel}
+					sx={{
+						pl: '15px',
+						m: 0,
+						border: 'none',
+						typography: 'h4',
+						color: 'var(--black)',
+						display: 'flex',
+						justifyContent: 'flex-start',
+						bgcolor: 'var(--green)',
+						height: '71px',
+						maxWidth: '400px!important',
+						width: '100%',
+						borderRadius: '0px',
+						opacity: 1,
+						minHeight: '60px',
+						'&:hover': {
+							color: 'var(--green)',
+						},
+						boxShadow: 'none',
+					}}
+				>
+					{buttonLabel}
+				</Button>
+				<br />
+				{message !== '' && (
+					<Typography variant='body1' sx={{ color: 'var(--red)', mt: 2 }}>
+						{message}
+					</Typography>
+				)}
+			</Grid>
+
+			<Grid item xs={12} sm={6} sx={{ zIndex: 1 }}>
+				<Typography variant='body1' sx={{ textWrap: 'pretty' }}>
+					{description}
+				</Typography>
+				<br />
+				<Typography variant='body2' sx={{ textWrap: 'pretty' }}>
+					{subtitle}
+				</Typography>
+			</Grid>
+
+			{/* Version footer */}
+			<Grid item xs={12} sx={{ 
+				mt: 'auto', 
+				pt: 8,
+				opacity: 0.5,
+				zIndex: 1 
+			}}>
+				<Typography variant='body2' sx={{ fontSize: '0.75rem' }}>
+					@liiift-studio/sales-portal v{version}
+				</Typography>
+			</Grid>
+		</Grid>
+	);
+}