@liiift-studio/sales-portal 2.0.0 → 3.0.0

package/api/getBalanceTransactions.js

@@ -22,22 +22,46 @@ export default async function handler(req, res) {
 		// Fetch all balance transactions for the period
 		const balanceTransactions = await fetchAllBalanceTransactions(timeRange);
 
-		// Calculate balance change from charges and refunds only (what sales data tracks)
+		// Build detailed reconciliation data
 		const RECONCILIATION_TYPES = ['charge', 'refund'];
-		let totalBalanceChange = 0;
+		let rawTotal = 0; // Accumulate as float, round once at the end
+		let chargeCount = 0;
+		let refundCount = 0;
+		let chargeTotal = 0;
+		let refundTotal = 0;
+		let settlementCurrency = null;
+		let hasCurrencyConversion = false;
+		let pendingCount = 0;
 		const flaggedTransactions = [];
 
 		balanceTransactions.forEach(transaction => {
-			if (transaction.status === 'pending') return;
+			if (!settlementCurrency && transaction.currency) {
+				settlementCurrency = transaction.currency;
+			}
+
+			if (transaction.status === 'pending') {
+				pendingCount++;
+				return;
+			}
+
+			const rate = transaction.exchange_rate || 1;
+			if (rate !== 1) hasCurrencyConversion = true;
+			const originalAmount = transaction.amount / rate;
 
 			if (RECONCILIATION_TYPES.includes(transaction.type)) {
-				totalBalanceChange += transaction.amount;
+				rawTotal += originalAmount;
+				if (transaction.type === 'charge') {
+					chargeCount++;
+					chargeTotal += originalAmount;
+				} else {
+					refundCount++;
+					refundTotal += originalAmount;
+				}
 			} else if (transaction.type !== 'payout' && transaction.type !== 'stripe_fee') {
-				// Collect disputes, adjustments, connect transfers for review
 				flaggedTransactions.push({
 					id: transaction.id,
 					type: transaction.type,
-					amount: transaction.amount,
+					amount: Math.round(originalAmount),
 					created: transaction.created,
 					description: transaction.description,
 					source: transaction.source,
@@ -45,11 +69,23 @@ export default async function handler(req, res) {
 			}
 		});
 
+		// Round the accumulated total once to minimize rounding error
+		const totalBalanceChange = Math.round(rawTotal);
+
 		return res.status(200).json({
 			success: true,
 			data: {
 				totalBalanceChange,
 				flaggedTransactions,
+				diagnostics: {
+					chargeCount,
+					refundCount,
+					chargeTotal: Math.round(chargeTotal),
+					refundTotal: Math.round(refundTotal),
+					pendingCount,
+					settlementCurrency,
+					hasCurrencyConversion,
+				},
 				transactions: balanceTransactions
 			}
 		});

package/api/getYearSales.js

@@ -0,0 +1,105 @@
+// API endpoint for fetching a full year of sales data in a single request
+import { authenticateDesigner, processSalesData } from './utils/salesDataProcessor';
+import { sendError, requirePost } from './utils/apiResponse';
+
+export const config = { maxDuration: 300 };
+
+/**
+ * Fetches 12 months of sales data, processes each month, and returns
+ * the results grouped by month with typeface breakdowns.
+ * This avoids 12 separate API calls from the frontend.
+ */
+export default async function handler(req, res) {
+	if (!requirePost(req, res)) return;
+
+	try {
+		const { user, password, year, admin } = req.body;
+
+		if (!year) {
+			return sendError(res, 400, 'Year is required');
+		}
+
+		const designer = await authenticateDesigner(user, password);
+		if (!designer) {
+			return sendError(res, 401, 'Looks like there was an issue finding the account.');
+		}
+
+		const months = [];
+
+		// Process each month sequentially to avoid Stripe rate limiting
+		for (let month = 0; month < 12; month++) {
+			const monthDate = new Date(Date.UTC(year, month, 1));
+
+			try {
+				const sales = await processSalesData({
+					date: monthDate.toISOString(),
+					designer,
+					admin
+				});
+
+				// Group sales by typeface for the stacked chart
+				const typefaceMap = {};
+				let monthTotal = 0;
+				let shippingTotal = 0;
+
+				sales.forEach(sale => {
+					if (sale.shippingProvision) {
+						shippingTotal += sale.total || 0;
+						return;
+					}
+
+					const typefaceName = sale.typeface?.title || sale.description?.split(' (')[0] || 'Other';
+					if (!typefaceMap[typefaceName]) {
+						typefaceMap[typefaceName] = { total: 0, count: 0 };
+					}
+					typefaceMap[typefaceName].total += sale.total || 0;
+					typefaceMap[typefaceName].count += 1;
+					monthTotal += sale.total || 0;
+				});
+
+				months.push({
+					month,
+					year,
+					total: monthTotal,
+					shippingTotal,
+					salesCount: sales.length,
+					currency: sales[0]?.currency || 'usd',
+					typefaces: Object.entries(typefaceMap)
+						.map(([name, data]) => ({ name, ...data }))
+						.sort((a, b) => b.total - a.total),
+				});
+			} catch (monthError) {
+				// If a single month fails, include it with zero data rather than failing the whole request
+				console.error(`Error processing month ${month + 1}/${year}:`, monthError.message);
+				months.push({
+					month,
+					year,
+					total: 0,
+					shippingTotal: 0,
+					salesCount: 0,
+					currency: 'usd',
+					typefaces: [],
+					error: monthError.message,
+				});
+			}
+		}
+
+		// Build a list of all typefaces across the year for consistent chart series
+		const allTypefaces = new Set();
+		months.forEach(m => m.typefaces.forEach(t => allTypefaces.add(t.name)));
+
+		res.status(200).json({
+			success: true,
+			data: {
+				year,
+				months,
+				allTypefaces: [...allTypefaces].sort(),
+				yearTotal: months.reduce((sum, m) => sum + m.total, 0),
+				yearShipping: months.reduce((sum, m) => sum + m.shippingTotal, 0),
+				currency: months.find(m => m.currency)?.currency || 'usd',
+			}
+		});
+	} catch (error) {
+		return sendError(res, 500, 'Failed to fetch year sales data', error);
+	}
+}

package/api/utils/processors/invoiceProcessor.js

@@ -94,6 +94,7 @@ function processLineItem({ line, invoice, associatedOrder, associatedTypeface, i
 		disputeDeduction: disputeAmount || 0,
 		invoiceTotal: invoice.total_excluding_tax,
 		invoiceTotalWithTax: invoice.total,
+		chargeAmount: invoice.charge?.amount || invoice.total,
 		discountAmounts: line.discount_amounts,
 		taxAmounts: line.tax_amounts,
 		stripeFees: totalFees,
@@ -140,7 +141,8 @@ function processLineItem({ line, invoice, associatedOrder, associatedTypeface, i
 		orderNumber: associatedOrder?.orderNumber || null,
 		author: associatedTypeface?.author || null,
 		typeface: associatedTypeface || null,
-		saleType: "invoice"
+		saleType: "invoice",
+		currency: invoice.currency || 'usd'
 	};
 }
 
@@ -177,6 +179,7 @@ function processShippingCost({ invoice, associatedOrder, totalFee = null, paymen
 		disputeDeduction: disputeAmount || 0,
 		invoiceTotal: invoice.total_excluding_tax,
 		invoiceTotalWithTax: invoice.total,
+		chargeAmount: invoice.charge?.amount || invoice.total,
 		discountAmounts: null,
 		stripeFees: totalFees,
 		disputed,
@@ -230,7 +233,8 @@ function processShippingCost({ invoice, associatedOrder, totalFee = null, paymen
 		orderNumber: associatedOrder?.orderNumber || null,
 		author: null,
 		typeface: null,
-		saleType: "invoice"
+		saleType: "invoice",
+		currency: invoice.currency || 'usd'
 	};
 }
 

package/api/utils/processors/paymentProcessor.js

@@ -235,6 +235,7 @@ function processPaymentItem({ item = {}, payment, associatedOrder, associatedTyp
         disputeDeduction: disputeAmount || 0,
         invoiceTotal: payment.amount,
         invoiceTotalWithTax: payment.amount,
+        chargeAmount: payment.latest_charge?.amount || payment.amount,
         discountAmounts: [],
         stripeFees: totalFees,
         disputed,
@@ -283,7 +284,8 @@ function processPaymentItem({ item = {}, payment, associatedOrder, associatedTyp
         orderNumber: associatedOrder?.orderNumber || null,
         author: associatedTypeface?.author || null,
         typeface: associatedTypeface || null,
-        saleType: "paymentIntent"
+        saleType: "paymentIntent",
+        currency: payment.currency || 'usd'
     };
 }
 
@@ -319,6 +321,7 @@ function processShippingCost({ payment, associatedOrder, totalFee = null }) {
         disputeDeduction: disputeAmount || 0,
         invoiceTotal: payment.amount,
         invoiceTotalWithTax: payment.amount,
+        chargeAmount: payment.latest_charge?.amount || payment.amount,
         discountAmounts: [],
         stripeFees: totalFees,
         disputed,
@@ -359,7 +362,8 @@ function processShippingCost({ payment, associatedOrder, totalFee = null }) {
         orderNumber: associatedOrder?.orderNumber || null,
         author: null,
         typeface: null,
-        saleType: "paymentIntent"
+        saleType: "paymentIntent",
+        currency: payment.currency || 'usd'
     };
 }
 

package/components/DateRangeSalesTable.js

@@ -505,25 +505,21 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
       {/* Reconciliation Check - Only show for admin users */}
       {admin && dateRangeSales.length > 0 && (
         <Box sx={{ width: '100%', mb: 2 }}>
-          <Box 
-            sx={{ 
-              display: 'inline-block',
-              gap: 2,
-              p: 2,
-              ml: -2,
-              borderRadius: '4px',
-              border: reconciliationData.isReconciled 
-                ? '2px solid var(--green, green)' 
-                : '2px solid var(--red, red)',
-              color: reconciliationData.isReconciled
-                ? 'var(--green, green)'
-                : 'var(--red, red)',
-              backgroundColor: 'rgba(255, 255, 255, 0.9)',
-              filter: 'invert(0) !important',
-              '& *': { filter: 'invert(0) !important' },
-            }}
-          >
-            
+          <Box sx={{
+            display: 'inline-block',
+            p: 2,
+            ml: -2,
+            borderRadius: '4px',
+            border: reconciliationData.isReconciled
+              ? '2px solid var(--green, green)'
+              : '2px solid var(--red, red)',
+            color: reconciliationData.isReconciled
+              ? 'var(--green, green)'
+              : 'var(--red, red)',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            filter: 'invert(0) !important',
+            '& *': { filter: 'invert(0) !important' },
+          }}>
             {reconciliationData.error ? (
               <Typography variant="body1" sx={{ color: 'var(--red, red)' }}>
                 <WarningIcon fontSize="small" sx={{ mr: 1 }} />
@@ -532,37 +528,24 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
             ) : reconciliationData.isLoading ? (
               <Typography variant="body1"><CircularProgress size={24} sx={{ mr: 1 }} /> Checking reconciliation...</Typography>
             ) : reconciliationData.isReconciled ? (
-              <Typography variant="body1" sx={{ fontWeight: 'bold'}}>
+              <Typography variant="body1" sx={{ fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 1 }}>
                 <CheckCircleIcon /> Reconciled
+                {reconciliationData.percentOff !== 0 && (
+                  <span style={{ fontWeight: 'normal', opacity: 0.7 }}>
+                    ({Math.abs(reconciliationData.percentOff).toFixed(2)}% variance)
+                  </span>
+                )}
               </Typography>
             ) : (
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                <Tooltip title="The difference between Stripe balance change and gross sales">
-                  <Typography variant="body1" sx={{ fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
-                    <WarningIcon/> Needs Reconciliation (Difference: ${(Math.abs(reconciliationData.difference) / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })})
-                  </Typography>
-                </Tooltip>
-                <Tooltip 
-                  title={
-                    <React.Fragment>
-                      <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Possible causes:</Typography>
-                      <Typography variant="body2">• This could be due to a sale being refunded outside your selected date range. Check for the same difference in other periods.</Typography>
-                    </React.Fragment>
-                  }
-                  placement="right"
-                  arrow
-                >
-                  <IconButton size="small" sx={{ ml: 1, color: 'inherit' }}>
-                    <InfoIcon fontSize="small" />
-                  </IconButton>
-                </Tooltip>
-              </Box>
+              <Typography variant="body1" sx={{ fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 1 }}>
+                <WarningIcon /> Needs Reconciliation — ${(Math.abs(reconciliationData.difference) / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })} off ({Math.abs(reconciliationData.percentOff).toFixed(2)}%)
+              </Typography>
             )}
-            
-            {!reconciliationData.isLoading && (
+
+            {!reconciliationData.isLoading && !reconciliationData.error && (
               <>
                 <Typography variant="body1">
-                  <strong>Stripe Balance (charges + refunds):</strong> ${(reconciliationData.totalBalanceChange / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+                  <strong>Stripe Balance:</strong> ${(reconciliationData.totalBalanceChange / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
                 </Typography>
                 <Typography variant="body1">
                   <strong>Calculated Gross:</strong> ${(reconciliationData.grossSales / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
@@ -570,24 +553,39 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
                     <span style={{ opacity: 0.6 }}> (incl. ${(reconciliationData.shippingTotal / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })} shipping)</span>
                   )}
                 </Typography>
-              </>
-            )}
 
-            {reconciliationData.flaggedTransactions?.length > 0 && (
-              <Box sx={{ mt: 1 }}>
-                <Tooltip title="View disputes, adjustments, and other flagged transactions">
-                  <Button
-                    size="small"
-                    startIcon={<InfoIcon />}
-                    onClick={() => setFlaggedOpen(true)}
-                    sx={{ color: 'inherit', textTransform: 'none' }}
-                  >
-                    {reconciliationData.flaggedTransactions.length} flagged transaction{reconciliationData.flaggedTransactions.length !== 1 ? 's' : ''}
-                  </Button>
-                </Tooltip>
-              </Box>
-            )}
+                {reconciliationData.checks?.length > 0 && (
+                  <Box sx={{ mt: 2, borderTop: '1px solid currentColor', pt: 1, opacity: 0.9 }}>
+                    {reconciliationData.checks.map((check, i) => (
+                      <Tooltip key={i} title={check.tip || ''} placement="right" arrow>
+                        <Typography variant="body2" sx={{
+                          display: 'flex', alignItems: 'center', gap: 0.5, py: 0.25,
+                          cursor: check.tip ? 'help' : 'default',
+                        }}>
+                          <span style={{ fontSize: '0.9em' }}>
+                            {check.status === 'pass' ? '✓' : check.status === 'fail' ? '✗' : check.status === 'warn' ? '⚠' : 'ℹ'}
+                          </span>
+                          <strong>{check.label}:</strong> {check.detail}
+                        </Typography>
+                      </Tooltip>
+                    ))}
+                  </Box>
+                )}
 
+                {reconciliationData.flaggedTransactions?.length > 0 && (
+                  <Box sx={{ mt: 1 }}>
+                    <Button
+                      size="small"
+                      startIcon={<InfoIcon />}
+                      onClick={() => setFlaggedOpen(true)}
+                      sx={{ color: 'inherit', textTransform: 'none' }}
+                    >
+                      View {reconciliationData.flaggedTransactions.length} flagged transaction{reconciliationData.flaggedTransactions.length !== 1 ? 's' : ''}
+                    </Button>
+                  </Box>
+                )}
+              </>
+            )}
           </Box>
         </Box>
       )}

package/components/LoginForm.js

@@ -1,23 +1,23 @@
-// Login form modal component for sales portal authentication
+// Login form component for sales portal authentication
 import React, { useEffect, useState } from 'react';
-import { Typography, Input, Button, Box, Dialog, DialogContent } from '@mui/material';
+import { Typography, Input, Button, Box } from '@mui/material';
 import packageJson from '../package.json';
 
 const { version } = packageJson;
 
 /**
- * LoginForm modal component for designer authentication
+ * LoginForm component for designer authentication
+ * Renders as an inline centered card (not a modal overlay) so the
+ * site header and footer remain accessible.
  * @param {Object} props Component props
- * @param {boolean} props.open Whether the modal is open
- * @param {Function} props.onClose Callback when the modal is closed
- * @param {Function} props.onLoginSuccess Callback when login succeeds, receives { designers, admin, user, password }
- * @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 }
+ * @param {boolean} props.open Whether the form is visible
+ * @param {Function} props.onLoginSuccess Callback when login succeeds
+ * @param {Function} props.renderLoader Optional render prop for custom loader
+ * @param {string} props.apiEndpoint Optional custom API endpoint
+ * @param {Object} props.texts Optional text customization
  */
 export default function LoginForm({
 	open = true,
-	onClose,
 	onLoginSuccess,
 	renderLoader,
 	apiEndpoint = '/api/sales-portal/getDesignerInfo',
@@ -72,7 +72,7 @@ export default function LoginForm({
 		}
 	};
 
-	// Clear message when inputs change or modal reopens
+	// Clear message when inputs change or form reopens
 	useEffect(() => {
 		setMessage('');
 	}, [password, user]);
@@ -88,32 +88,27 @@ export default function LoginForm({
 		}
 	};
 
+	if (!open) return null;
+
 	return (
-		<Dialog
-			open={open}
-			onClose={onClose}
-			maxWidth="md"
-			fullWidth
-			PaperProps={{
-				sx: {
-					borderRadius: '12px',
-					overflow: 'hidden',
-					m: { xs: 2, sm: 4 },
-					maxHeight: 'calc(100vh - 64px)',
-				}
-			}}
-			slotProps={{
-				backdrop: {
-					sx: {
-						backgroundColor: 'rgba(0, 0, 0, 0.7)',
-						backdropFilter: 'blur(4px)',
-					}
-				}
-			}}
-		>
+		<Box sx={{
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center',
+			minHeight: 'calc(100vh - var(--headerHeight, 80px))',
+			px: { xs: 2, sm: 4 },
+			py: { xs: 4, sm: 8 },
+		}}>
 			{loading && renderLoader && renderLoader({ fill: true, position: 'fixed', height: '100%' })}
 
-			<DialogContent sx={{ p: 0 }}>
+			<Box sx={{
+				width: '100%',
+				maxWidth: '860px',
+				borderRadius: '12px',
+				overflow: 'hidden',
+				boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
+				bgcolor: 'var(--white, white)',
+			}}>
 				<Box sx={{
 					display: 'flex',
 					flexDirection: { xs: 'column', sm: 'row' },
@@ -256,7 +251,7 @@ export default function LoginForm({
 						</Box>
 					</Box>
 				</Box>
-			</DialogContent>
-		</Dialog>
+			</Box>
+		</Box>
 	);
 }

package/components/Sales.js

@@ -15,8 +15,10 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { processChartData, processTypefaceData, processDesignersData, generateSeriesData, processLicenseTypeData } from '../utils/salesDataProcessing';
 import countryCodes from '../data/countryCode.json';
+import { getCurrencySymbol, getCurrencyLabel } from '../utils/currencyUtils';
 import { SalesTable } from './SalesTable';
 import { DateRangeSalesTable } from './DateRangeSalesTable';
+import YearOverview from './YearOverview';
 import SalesChart from './SalesChart';
 import TopPerformers from './TopPerformers';
 import TypefaceList from './TypefaceList';
@@ -46,6 +48,7 @@ export default function Sales(props) {
 	const [previousSalesError, setPreviousSalesError] = useState('');
 	const [retryInfo, setRetryInfo] = useState({ retrying: false, attempt: 0, label: '' });
 	const [date, setDate] = useState(null);
+	const [viewMode, setViewMode] = useState('month'); // 'month' | 'year'
 	const [displayLosses, setDisplayLosses] = useState(false);
 
 	// Max retry attempts for failed API calls
@@ -522,7 +525,7 @@ export default function Sales(props) {
 							padding: "5px 10px 0 10px",
 						}}
 					>
-						{sales ? <Box component="span" sx={{ fontVariationSettings: '"wght" 300' }}><Box component="span" sx={{ display: { xs: 'none', md: 'inherit' }, opacity: "0.5" }}>USD</Box>$ </Box> : ``}
+						{sales ? <Box component="span" sx={{ fontVariationSettings: '"wght" 300' }}><Box component="span" sx={{ display: { xs: 'none', md: 'inherit' }, opacity: "0.5" }}>{getCurrencyLabel(sales[0]?.currency)}</Box>{getCurrencySymbol(sales[0]?.currency)} </Box> : ``}
 						{sales ? (
 							<>
 								<span className={`sales-total`} style={{ fontVariationSettings: '"wght" 900' }}>
@@ -670,6 +673,37 @@ export default function Sales(props) {
 							</IconButton>
 						</Tooltip>
 					)}
+					{/* Month/Year toggle */}
+					<Box sx={{
+						display: 'flex',
+						ml: 1,
+						border: '1px solid var(--black, #1a1a1a)',
+						borderRadius: '4px',
+						overflow: 'hidden',
+					}}>
+						{['month', 'year'].map(mode => (
+							<Box
+								key={mode}
+								onClick={() => setViewMode(mode)}
+								sx={{
+									px: 1.5,
+									py: 0.5,
+									cursor: 'pointer',
+									fontSize: '0.75rem',
+									fontWeight: viewMode === mode ? 'bold' : 'normal',
+									bgcolor: viewMode === mode ? 'var(--black, #1a1a1a)' : 'transparent',
+									color: viewMode === mode ? 'var(--white, white)' : 'inherit',
+									textTransform: 'uppercase',
+									letterSpacing: '0.05em',
+									'&:hover': {
+										bgcolor: viewMode === mode ? 'var(--black, #1a1a1a)' : 'rgba(0,0,0,0.05)',
+									},
+								}}
+							>
+								{mode === 'month' ? 'Mo' : 'Yr'}
+							</Box>
+						))}
+					</Box>
 				</Box>
 			</Box>
 
@@ -723,7 +757,7 @@ export default function Sales(props) {
 				</Box>
 			}
 		</Box>
-	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales, retryInfo]);
+	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales, retryInfo, viewMode]);
 
 	return (
 		<LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -749,8 +783,23 @@ export default function Sales(props) {
 				<Box sx={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
 					{HeaderSection}
 
-					{/* Sales Data Display */}
-					{!!sales.length && (
+					{/* 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 && (
 						<>
 
 							<Box

package/components/SalesPortalPage.js

@@ -67,7 +67,7 @@ export default function SalesPortalPage({
 	const isLoggedIn = !!designers;
 
 	const content = (
-		<Box sx={{ minHeight: '100vh' }}>
+		<Box sx={{ minHeight: 'calc(100vh - var(--headerHeight, 80px))' }}>
 			{/* Login Modal */}
 			<LoginForm
 				open={!isLoggedIn}