@liiift-studio/sales-portal 1.3.0 → 1.3.4

package/components/LoginForm.js

@@ -1,7 +1,6 @@
 // Login form modal component for sales portal authentication
 import React, { useEffect, useState } from 'react';
-import { Typography, Input, Button, Box, Dialog, DialogContent, IconButton } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import { Typography, Input, Button, Box, Dialog, DialogContent } from '@mui/material';
 import packageJson from '../package.json';
 
 const { version } = packageJson;
@@ -89,14 +88,14 @@ export default function LoginForm({
 		<Dialog
 			open={open}
 			onClose={onClose}
-			maxWidth="sm"
+			maxWidth="md"
 			fullWidth
 			PaperProps={{
 				sx: {
-					borderRadius: 0,
-					p: { xs: 4, sm: 6 },
-					position: 'relative',
-					overflow: 'visible',
+					borderRadius: '12px',
+					overflow: 'hidden',
+					m: { xs: 2, sm: 4 },
+					maxHeight: 'calc(100vh - 64px)',
 				}
 			}}
 			slotProps={{
@@ -111,131 +110,144 @@ export default function LoginForm({
 			{loading && renderLoader && renderLoader({ fill: true, position: 'fixed', height: '100%' })}
 
 			<DialogContent sx={{ p: 0 }}>
-				{onClose && (
-					<IconButton
-						onClick={onClose}
-						aria-label="Close login"
-						sx={{
-							position: 'absolute',
-							top: 12,
-							right: 12,
-							color: 'var(--grey800)',
-						}}
-					>
-						<CloseIcon />
-					</IconButton>
-				)}
+				<Box sx={{
+					display: 'flex',
+					flexDirection: { xs: 'column', sm: 'row' },
+					minHeight: { sm: '420px' },
+				}}>
+					{/* Left column - Login form */}
+					<Box sx={{
+						flex: 1,
+						p: { xs: 4, sm: 6 },
+						display: 'flex',
+						flexDirection: 'column',
+						justifyContent: 'center',
+					}}>
+						<Typography component="span" variant="h2" sx={{ mb: 5, display: 'block' }}>
+							{title}
+						</Typography>
 
-				<Typography component="span" variant="h2" sx={{ mb: 4, display: 'block' }}>
-					{title}
-				</Typography>
+						<Box>
+							<Input
+								placeholder="Email"
+								onChange={(e) => setUser(e.target.value)}
+								value={user}
+								type="email"
+								autoComplete="username"
+								onKeyPress={handleKeyPress}
+								sx={{
+									m: 0,
+									border: 'none',
+									typography: 'body1',
+									color: 'var(--grey800)',
+									display: 'flex',
+									bgcolor: 'white',
+									borderBottom: '2px solid var(--black)',
+									width: '100%',
+									minHeight: '52px',
+									'& input': {
+										pl: '12px',
+										height: '52px',
+									},
+									'& ::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',
+									bgcolor: 'white',
+									borderBottom: '2px solid var(--black)',
+									width: '100%',
+									minHeight: '52px',
+									'& input': {
+										pl: '12px',
+										height: '52px',
+									},
+									'& ::placeholder': {
+										color: 'var(--grey800)',
+										opacity: 1,
+									}
+								}}
+							/>
+							<Button
+								variant="contained"
+								disableElevation
+								className="bold"
+								onClick={handleLogin}
+								disabled={loading}
+								aria-label={buttonLabel}
+								fullWidth
+								sx={{
+									pl: '12px',
+									m: 0,
+									mt: 3,
+									border: 'none',
+									typography: 'h4',
+									color: 'var(--black)',
+									display: 'flex',
+									justifyContent: 'flex-start',
+									bgcolor: 'var(--green)',
+									height: '56px',
+									borderRadius: '8px',
+									opacity: 1,
+									'&:hover': {
+										color: 'var(--green)',
+										bgcolor: 'var(--green)',
+									},
+									boxShadow: 'none',
+									'&:active': { boxShadow: 'none' },
+									'&:focus': { boxShadow: 'none' },
+								}}
+							>
+								{buttonLabel}
+							</Button>
 
-				<Box sx={{ mb: 4 }}>
-					<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)',
-							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)',
-							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',
-							width: '100%',
-							borderRadius: '0px',
-							opacity: 1,
-							minHeight: '60px',
-							'&:hover': {
-								color: 'var(--green)',
-							},
-							boxShadow: 'none',
-						}}
-					>
-						{buttonLabel}
-					</Button>
+							{message !== '' && (
+								<Typography variant="body1" sx={{ color: 'var(--red)', mt: 2 }}>
+									{message}
+								</Typography>
+							)}
+						</Box>
+					</Box>
 
-					{message !== '' && (
-						<Typography variant="body1" sx={{ color: 'var(--red)', mt: 2 }}>
-							{message}
+					{/* Right column - Info */}
+					<Box sx={{
+						flex: 1,
+						p: { xs: 4, sm: 6 },
+						bgcolor: 'rgba(0, 0, 0, 0.04)',
+						display: 'flex',
+						flexDirection: 'column',
+						justifyContent: 'center',
+						borderLeft: { sm: '1px solid rgba(0, 0, 0, 0.08)' },
+						borderTop: { xs: '1px solid rgba(0, 0, 0, 0.08)', sm: 'none' },
+					}}>
+						<Typography variant="body1" sx={{ textWrap: 'pretty', mb: 3, lineHeight: 1.7 }}>
+							{description}
+						</Typography>
+						<Typography variant="body2" sx={{ textWrap: 'pretty', opacity: 0.7, lineHeight: 1.6 }}>
+							{subtitle}
 						</Typography>
-					)}
-				</Box>
-
-				<Typography variant="body1" sx={{ textWrap: 'pretty', mb: 1 }}>
-					{description}
-				</Typography>
-				<Typography variant="body2" sx={{ textWrap: 'pretty' }}>
-					{subtitle}
-				</Typography>
 
-				{/* Version footer */}
-				<Box sx={{ mt: 4, opacity: 0.5 }}>
-					<Typography variant="body2" sx={{ fontSize: '0.75rem' }}>
-						@liiift-studio/sales-portal v{version}
-					</Typography>
+						{/* Version footer */}
+						<Box sx={{ mt: 'auto', pt: 4, opacity: 0.35 }}>
+							<Typography variant="body2" sx={{ fontSize: '0.7rem' }}>
+								v{version}
+							</Typography>
+						</Box>
+					</Box>
 				</Box>
 			</DialogContent>
 		</Dialog>

package/components/Sales.js

@@ -29,7 +29,7 @@ dayjs.extend(utc);
  * Sales dashboard component
  */
 export default function Sales(props) {
-	const { month, year, designer, updateDate, categories = false, admin = false } = props;
+	const { month, year, designer, updateDate, categories = false, admin = false, fetchDelay = 0 } = props;
 
 	// UI State
 	const [loadingStates, setLoadingStates] = useState({
@@ -44,9 +44,13 @@ export default function Sales(props) {
 	});
 	const [message, setMessage] = useState('');
 	const [previousSalesError, setPreviousSalesError] = useState('');
+	const [retryInfo, setRetryInfo] = useState({ retrying: false, attempt: 0, label: '' });
 	const [date, setDate] = useState(null);
 	const [displayLosses, setDisplayLosses] = useState(false);
 
+	// Max retry attempts for failed API calls
+	const MAX_RETRIES = 3;
+
 	// Helper to update individual loading states
 	const updateLoadingState = useCallback((key, value) => {
 		setLoadingStates(prev => ({
@@ -147,21 +151,40 @@ export default function Sales(props) {
 		}
 	}, [date, designer?.admin, month, year, updateDate]);
 
+	// Fetch with retry logic for rate-limited requests
+	async function fetchWithRetry(url, options, label, attempt = 0) {
+		const response = await fetch(url, options);
+
+		if (!response.ok && attempt < MAX_RETRIES) {
+			const delay = Math.pow(2, attempt) * 1000 + Math.random() * 500;
+			setRetryInfo({ retrying: true, attempt: attempt + 1, label });
+			await new Promise(resolve => setTimeout(resolve, delay));
+			return fetchWithRetry(url, options, label, attempt + 1);
+		}
+
+		setRetryInfo({ retrying: false, attempt: 0, label: '' });
+		return response;
+	}
+
 	// Fetch current period sales data
 	async function fetchSales(){
 		if (!designer?.user || !designer?.password || !date) return;
 		updateLoadingState('salesData', true);
 		try {
-			const response = await fetch('/api/sales-portal/getSales', {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ 
-					user: designer?.user, 
-					password: designer?.password, 
-					date, 
-					admin: designer?.admin 
-				}),
-			});
+			const response = await fetchWithRetry(
+				'/api/sales-portal/getSales',
+				{
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({
+						user: designer?.user,
+						password: designer?.password,
+						date,
+						admin: designer?.admin
+					}),
+				},
+				'Sales data'
+			);
 			const data = await response.json();
 
 			if (data.success) {
@@ -182,15 +205,15 @@ export default function Sales(props) {
 		if (!designer?.user || !designer?.password || !date) {
 			return;
 		}
-		
+
 		updateLoadingState('previousSalesData', true);
 		setPreviousSalesError(''); // Clear any previous errors
-		
+
 		// Calculate previous month date with more robust handling
 		const previousDate = new Date(date.getTime()); // Create a copy
 		const currentMonth = previousDate.getUTCMonth();
 		const currentYear = previousDate.getUTCFullYear();
-		
+
 		// Handle edge cases for month boundaries
 		if (currentMonth === 0) {
 			// January -> December of previous year
@@ -199,23 +222,23 @@ export default function Sales(props) {
 		} else {
 			previousDate.setUTCMonth(currentMonth - 1);
 		}
-		
+
 		try {
-			const response = await fetch('/api/sales-portal/getSales', {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ 
-					user: designer?.user, 
-					password: designer?.password, 
-					date: previousDate, 
-					admin: designer?.admin 
-				}),
-			});
-			
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-			
+			const response = await fetchWithRetry(
+				'/api/sales-portal/getSales',
+				{
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({
+						user: designer?.user,
+						password: designer?.password,
+						date: previousDate,
+						admin: designer?.admin
+					}),
+				},
+				'Previous sales data'
+			);
+
 			const data = await response.json();
 
 			if (data.success) {
@@ -237,6 +260,13 @@ export default function Sales(props) {
 	}
 
 	useEffect(() => {
+		if (fetchDelay > 0) {
+			const timer = setTimeout(() => {
+				fetchSales();
+				fetchPreviousSales();
+			}, fetchDelay);
+			return () => clearTimeout(timer);
+		}
 		fetchSales();
 		fetchPreviousSales();
 	}, [designer?.user, designer?.password, designer?.admin, date]);
@@ -623,6 +653,42 @@ export default function Sales(props) {
 				</Box>
 			</Box>
 
+			{/* Retry Message */}
+			{retryInfo.retrying && (
+				<Box sx={{ width: '100%', pb: 4 }}>
+					<Typography variant='body2' sx={{
+						color: 'var(--grey800, #666)',
+						mt: 2,
+						display: 'flex',
+						alignItems: 'center',
+						gap: 1,
+					}}>
+						<Box component="span" sx={{
+							'@keyframes dotPulse': {
+								'0%, 20%': { opacity: 0 },
+								'50%': { opacity: 1 },
+								'100%': { opacity: 0 },
+							},
+							display: 'inline-flex',
+							gap: '2px',
+							'& span': {
+								width: '4px',
+								height: '4px',
+								borderRadius: '50%',
+								bgcolor: 'var(--grey800, #666)',
+								display: 'inline-block',
+								animation: 'dotPulse 1.4s infinite',
+							},
+							'& span:nth-of-type(2)': { animationDelay: '0.2s' },
+							'& span:nth-of-type(3)': { animationDelay: '0.4s' },
+						}}>
+							<span /><span /><span />
+						</Box>
+						{retryInfo.label} — retrying (attempt {retryInfo.attempt} of {MAX_RETRIES})
+					</Typography>
+				</Box>
+			)}
+
 			{/* Error Messages */}
 			{!!(message !== '') &&
 				<Box sx={{ width: '100%', pb: 8 }}>
@@ -637,7 +703,7 @@ export default function Sales(props) {
 				</Box>
 			}
 		</Box>
-	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales]);
+	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales, retryInfo]);
 
 	return (
 		<LocalizationProvider dateAdapter={AdapterDayjs}>

package/components/SalesPortalPage.js

@@ -57,7 +57,7 @@ export default function SalesPortalPage({
 	const isLoggedIn = !!designers;
 
 	const content = (
-		<>
+		<Box sx={{ minHeight: '100vh' }}>
 			{/* Login Modal */}
 			<LoginForm
 				open={!isLoggedIn}
@@ -130,11 +130,12 @@ export default function SalesPortalPage({
 							month={month}
 							year={year}
 							updateDate={updateDate}
+							fetchDelay={admin ? i * 2000 : 0}
 						/>
 					))}
 				</Box>
 			)}
-		</>
+		</Box>
 	);
 
 	// Optionally wrap with theme provider

package/package.json

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