@liiift-studio/sales-portal 1.3.1 → 1.3.4

package/components/LoginForm.js

@@ -184,10 +184,12 @@ export default function LoginForm({
 							/>
 							<Button
 								variant="contained"
+								disableElevation
 								className="bold"
 								onClick={handleLogin}
 								disabled={loading}
 								aria-label={buttonLabel}
+								fullWidth
 								sx={{
 									pl: '12px',
 									m: 0,
@@ -199,13 +201,15 @@ export default function LoginForm({
 									justifyContent: 'flex-start',
 									bgcolor: 'var(--green)',
 									height: '56px',
-									width: '100%',
 									borderRadius: '8px',
 									opacity: 1,
 									'&:hover': {
 										color: 'var(--green)',
+										bgcolor: 'var(--green)',
 									},
 									boxShadow: 'none',
+									'&:active': { boxShadow: 'none' },
+									'&:focus': { boxShadow: 'none' },
 								}}
 							>
 								{buttonLabel}

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.1",
+	"version": "1.3.4",
 	"description": "Centralized sales portal package for Liiift Studio projects",
 	"main": "index.js",
 	"types": "index.d.ts",