@liiift-studio/sales-portal 1.2.1

package/components/Sales.js

@@ -0,0 +1,773 @@
+// Sales dashboard component displaying sales data, charts, and detailed transaction information for designers and administrators
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Grid, Typography, Box, IconButton, Tooltip } from '@mui/material';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import PrintIcon from '@mui/icons-material/Print';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import TrendingDownIcon from '@mui/icons-material/TrendingDown';
+import TrendingFlatIcon from '@mui/icons-material/TrendingFlat';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import styles from '../styles/sales-portal.module.scss';
+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 { SalesTable } from './SalesTable';
+import { DateRangeSalesTable } from './DateRangeSalesTable';
+import SalesChart from './SalesChart';
+import TopPerformers from './TopPerformers';
+import TypefaceList from './TypefaceList';
+import SummaryCards from './SummaryCards';
+import LicenseTypeList from './LicenseTypeList';
+
+dayjs.extend(utc);
+
+/**
+ * Sales dashboard component
+ */
+export default function Sales(props) {
+	const { month, year, designer, updateDate, categories = false, admin = false } = props;
+
+	// UI State
+	const [loadingStates, setLoadingStates] = useState({
+		designersList: false,
+		salesData: false,
+		previousSalesData: false,
+		salesProcessing: false,
+		designersProcessing: false,
+		chartProcessing: false,
+		csvDownload: false,
+		dateRangeSalesData: false
+	});
+	const [message, setMessage] = useState('');
+	const [previousSalesError, setPreviousSalesError] = useState('');
+	const [date, setDate] = useState(null);
+	const [displayLosses, setDisplayLosses] = useState(false);
+
+	// Helper to update individual loading states
+	const updateLoadingState = useCallback((key, value) => {
+		setLoadingStates(prev => ({
+			...prev,
+			[key]: value
+		}));
+	}, []);
+
+	// Computed overall loading state
+	// but ignore dateRangeSalesData as it is not used in the loading overlay
+	const loading = useMemo(() => 
+		Object.values(loadingStates).some(value => value) && !loadingStates.dateRangeSalesData,
+		[loadingStates]
+	);
+
+	// Sales Data State
+	const [sales, setSales] = useState([]);
+	const [previousSales, setPreviousSales] = useState([]);
+	const [total, setTotal] = useState(0);
+	const [revenueChangePercent, setRevenueChangePercent] = useState(0);
+	const [typefaceData, setTypefaceData] = useState([]);
+	const [designersData, setDesignersData] = useState([]);
+	const [designers, setDesigners] = useState(null);
+	const [locationData, setLocationData] = useState({
+		topLocation: '',
+		topLocationRevenue: 0,
+		topLocationPercentage: 0,
+		previousTopLocation: '',
+		previousTopLocationRevenue: 0,
+		previousTopLocationPercentage: 0,
+		locationChange: null
+	});
+	const [licenseTypeData, setLicenseTypeData] = useState([]);
+
+	// Chart Data State
+	const [chartState, setChartState] = useState({
+		xAxis: [],
+		discountLostData: [],
+		salesData: [],
+		totalSalesData: [],
+		salesMax: 0,
+		orderData: [],
+		orderMax: 0,
+		regularOrderData: [],
+		regularOrderMax: 0,
+		discountData: [],
+		discountMax: 0,
+		discountFirstOrderData: [],
+		firstOrderDiscountMax: 0,
+		firstOrderData: [],
+		firstOrderMax: 0,
+		refundData: [],
+		refundMax: 0,
+		refundTotal: 0,
+		changeMax: 0,
+		taxData: [],
+		shippingData: [],
+		shippedOrdersData: [],
+		shippedOrdersMax: 0
+	});
+
+	const [seriesData, setSeriesData] = useState([]);
+
+	// Load designers list for admin
+	useEffect(() => {
+		if (!admin) return;
+
+		updateLoadingState('designersList', true);
+		fetch('/api/sales-portal/getDesigners', {
+			method: 'GET',
+			headers: { 'Content-Type': 'application/json' },
+		})
+			.then((res) => res.json())
+			.then((res) => {
+				if (res.success) setDesigners(res.data);
+				else setMessage('Error retrieving designers list');
+				updateLoadingState('designersList', false);
+			})
+			.catch((err) => {
+				setMessage('Error retrieving designers list');
+				console.error(err);
+				updateLoadingState('designersList', false);
+			});
+	}, [admin]);
+
+	// Set initial date
+	useEffect(() => {
+		if (year !== '' && month !== '') {
+			var date = new Date(Date.UTC(year, month, 1));
+			setDate(date);
+		}
+	}, [month, year]);
+
+	// Update date for admin
+	useEffect(() => {
+		if (designer?.admin && date && (new Date(date)?.getUTCMonth() !== month || new Date(date)?.getUTCFullYear() !== year)) {
+			updateDate(date);
+		}
+	}, [date, designer?.admin, month, year, updateDate]);
+
+	// 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 data = await response.json();
+
+			if (data.success) {
+				setSales(data.data);
+			} else {
+				setMessage('Error retrieving sales data');
+			}
+		} catch (err) {
+			setMessage('Error retrieving sales data');
+			console.error(err);
+		} finally {
+			updateLoadingState('salesData', false);
+		}
+	}
+
+	// Fetch previous period sales data for comparison (previous month)
+	async function fetchPreviousSales(){
+		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
+			previousDate.setUTCFullYear(currentYear - 1);
+			previousDate.setUTCMonth(11);
+		} 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 data = await response.json();
+
+			if (data.success) {
+				setPreviousSales(data.data || []);
+			} else {
+				const errorMsg = `Failed to load previous sales data: ${data.error || 'Unknown error'}`;
+				console.warn(errorMsg);
+				setPreviousSalesError(errorMsg);
+				setPreviousSales([]); // Clear any stale data
+			}
+		} catch (err) {
+			const errorMsg = `Error retrieving previous sales data: ${err.message}`;
+			console.error(errorMsg, err);
+			setPreviousSalesError(errorMsg);
+			setPreviousSales([]); // Clear any stale data
+		} finally {
+			updateLoadingState('previousSalesData', false);
+		}
+	}
+
+	useEffect(() => {
+		fetchSales();
+		fetchPreviousSales();
+	}, [designer?.user, designer?.password, designer?.admin, date]);
+
+	// Process sales data
+	useEffect(() => {
+		if (!sales || !date) return;
+
+		updateLoadingState('salesProcessing', true);
+		try {
+			
+			// Calculate chart data
+			const processedData = processChartData(sales, date);
+			setChartState(processedData);
+
+			// Process typeface data
+			const processedTypefaceData = processTypefaceData(sales, designers);
+			setTypefaceData(processedTypefaceData);
+
+			// Process license type data
+			const processedLicenseTypeData = processLicenseTypeData(sales);
+			setLicenseTypeData(processedLicenseTypeData);
+
+			// Set total sales (sum of all sales minus tax and shipping)
+			const totalRevenue = (processedData.salesMax - processedData.taxData.at(-1) - processedData.shippingData.at(-1)) || 0;
+			setTotal(totalRevenue);
+			
+			// Calculate revenue change percentage compared to previous period
+			let revChangePercent = 0;
+			let previousPeriodTotal = 0;
+			
+			if (previousSales && previousSales.length > 0) {
+				previousPeriodTotal = previousSales.reduce((sum, sale) => {
+					const saleTotal = sale.total || 0;
+					const saleTax = sale.taxAmount || 0;
+					const saleShipping = sale.shippingCost || 0;
+					return sum + (saleTotal - saleTax - saleShipping) / 100; // Convert cents to dollars
+				}, 0);
+				
+				if (previousPeriodTotal > 0) {
+					revChangePercent = ((totalRevenue / previousPeriodTotal) - 1) * 100;
+					setRevenueChangePercent(revChangePercent);
+				}
+			}
+
+			// Process location data
+			const locationStats = {
+				topLocation: 'Unknown',
+				topLocationRevenue: 0,
+				topLocationPercentage: 0,
+				previousTopLocation: '',
+				previousTopLocationRevenue: 0,
+				previousTopLocationPercentage: 0,
+				locationChange: null
+			};
+
+			// Create a map of country codes to full country names
+			const countryCodeMap = {};
+			countryCodes.forEach(country => {
+				countryCodeMap[country.code] = country.label;
+			});
+			
+			// Helper function to get full country name from country code
+			const getCountryName = (countryCode) => {
+				if (!countryCode) return 'Unknown';
+				// If it's already a full name (more than 2 chars), return as is
+				if (countryCode.length > 2) return countryCode;
+				// Otherwise, look up the code in our map
+				return countryCodeMap[countryCode] || countryCode;
+			};
+
+			// Group sales by location
+			const locationSales = {};
+			sales.forEach(sale => {
+				// Get location using payment method origin for more consistent data
+				// Fall back to customer address if payment method origin not available
+				const countryCode = sale.paymentMethod?.origin?.country || 
+					sale.customerAddress?.country || 
+					sale.billingAddress?.country || 
+					'Unknown';
+				// let location = getCountryName(countryCode);
+				let location = countryCode;
+
+				// Create location entry if doesn't exist
+				if (!locationSales[location]) {
+					locationSales[location] = {
+						totalRevenue: 0,
+						orders: 0
+					};
+				}
+				
+				const saleRevenue = (sale.total - (sale.taxAmount || 0) - (sale.shippingCost || 0)) / 100;
+				locationSales[location].totalRevenue += saleRevenue;
+				locationSales[location].orders += 1;
+			});
+
+			// Find location with highest revenue
+			let maxRevenue = 0;
+			Object.entries(locationSales).forEach(([location, data]) => {
+				if (data.totalRevenue > maxRevenue) {
+					maxRevenue = data.totalRevenue;
+					locationStats.topLocation = location;
+					locationStats.topLocationRevenue = data.totalRevenue;
+					locationStats.topLocationPercentage = totalRevenue > 0 ? (data.totalRevenue / totalRevenue) * 100 : 0;
+				}
+			});
+
+			// Process previous period location data if available
+			if (previousSales && previousSales.length > 0) {
+				const prevLocationSales = {};
+				let prevTotalRevenue = 0;
+				
+				previousSales.forEach(sale => {
+					// Get location using payment method origin for more consistent data
+					// Fall back to customer address if payment method origin not available
+					const countryCode = sale.paymentMethod?.origin?.country || 
+						sale.customerAddress?.country || 
+						sale.billingAddress?.country || 
+						'Unknown';
+					let location = getCountryName(countryCode);
+					
+					if (!prevLocationSales[location]) {
+						prevLocationSales[location] = {
+							totalRevenue: 0,
+							orders: 0
+						};
+					}
+					
+					const saleRevenue = (sale.total - (sale.taxAmount || 0) - (sale.shippingCost || 0)) / 100;
+					prevLocationSales[location].totalRevenue += saleRevenue;
+					prevLocationSales[location].orders += 1;
+					prevTotalRevenue += saleRevenue;
+				});
+
+				// Find previous period location with highest revenue
+				let prevMaxRevenue = 0;
+				Object.entries(prevLocationSales).forEach(([location, data]) => {
+					if (data.totalRevenue > prevMaxRevenue) {
+						prevMaxRevenue = data.totalRevenue;
+						locationStats.previousTopLocation = location;
+						locationStats.previousTopLocationRevenue = data.totalRevenue;
+						locationStats.previousTopLocationPercentage = prevTotalRevenue > 0 ? 
+							(data.totalRevenue / prevTotalRevenue) * 100 : 0;
+					}
+				});
+
+				// Calculate location change when top location is the same
+				if (locationStats.topLocation === locationStats.previousTopLocation && locationStats.previousTopLocationPercentage > 0) {
+					locationStats.locationChange = ((locationStats.topLocationPercentage / locationStats.previousTopLocationPercentage) - 1) * 100;
+				}
+			}
+
+			setLocationData(locationStats);
+		} catch (error) {
+			console.error('Error processing sales data:', error);
+			setMessage('Error processing sales data');
+		} finally {
+			updateLoadingState('salesProcessing', false);
+		}
+	}, [sales, designers, date, previousSales]);
+
+	// Process designers data
+	useEffect(() => {
+		if (!typefaceData) return;
+
+		updateLoadingState('designersProcessing', true);
+		try {
+			const processedDesignersData = processDesignersData(typefaceData);
+			setDesignersData(processedDesignersData);
+		} catch (error) {
+			console.error('Error processing designers data:', error);
+			setMessage('Error processing designers data');
+		} finally {
+			updateLoadingState('designersProcessing', false);
+		}
+	}, [typefaceData]);
+
+	// Update series data for charts
+	useEffect(() => {
+		if (!chartState.xAxis.length) return;
+
+		updateLoadingState('chartProcessing', true);
+		try {
+			const newSeriesData = generateSeriesData(chartState, displayLosses);
+			const filteredSeries = newSeriesData.filter(value => value);
+			// Ensure all series data arrays match xAxis length
+			const validSeries = filteredSeries.every(series => series.data.length === chartState.xAxis.length);
+			if (validSeries) {
+				setSeriesData(filteredSeries);
+				updateLoadingState('chartProcessing', false);
+			}
+		} catch (error) {
+			console.error('Error generating series data:', error);
+			setMessage('Error generating chart data');
+		}
+	}, [chartState, displayLosses]);
+
+	// Helper function to get trend icon based on percentage change
+	const getTrendIcon = (change) => {
+		if (change === null || change === undefined) return null;
+		
+		if (Math.abs(change) < 1) return <TrendingFlatIcon sx={{ fontSize: '1em' }} />;
+		
+		if (change > 0) {
+			return <TrendingUpIcon sx={{ fontSize: '1em', color: 'var(--green, green)' }} />;
+		} else {
+			return <TrendingDownIcon sx={{ fontSize: '1em', color: 'var(--red, red)' }} />;
+		}
+	};
+	
+	// Memoize the header section to prevent unnecessary re-renders
+	const HeaderSection = useMemo(() => (
+		<Grid container className={`sales-header-section ${styles.salesSection}`}>
+			{/* Header Section */}
+			<Grid item xs={8} data-disabled={loading} data-loading={loading} 
+				sx={{
+					".show-hover": { display: "none" },
+					"&:hover .show-hover": { display: "inline", opacity: "0.5" },
+				}}
+			>
+				<Typography variant='h3' className={styles.pageTitle}
+					sx={{
+						borderRadius: "4px",
+						marginLeft: "-10px",
+						display: "inline-block",
+					}}
+				>
+					<Box 
+						component={"span"}
+						sx={{
+							background: (sales?.reduce((acc, curr) => acc + curr.total, 0) / 100) > 0 ? 'rgba(var(--greenRGB, 0, 255, 0), 0.25)' : "",
+							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 ? (
+							<>
+								<span className={`sales-total`} style={{ fontVariationSettings: '"wght" 900' }}>
+									{(total).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+								</span>
+							</>
+						) : `0.00`}
+					</Box>
+					{previousSales && previousSales.length > 0 && revenueChangePercent && (
+						<Tooltip 
+							title={`Net Sales (after tax and shipping): ${previousSales && previousSales.length > 0 ? revenueChangePercent.toFixed(1) + '% vs prior month' : 'No prior month data'}`}
+							placement="top"
+							arrow
+						>
+							<Box 
+								component="span" 
+								sx={{ 
+									marginLeft: '8px', 
+									cursor: 'help',
+									display: { xs: 'none', md: 'inherit' }
+								}}>
+								{getTrendIcon(revenueChangePercent)}
+							</Box>
+						</Tooltip>
+					)}
+				</Typography>
+				<Typography variant='h6'>
+					<strong>{designer?.firstName} {designer?.lastName}{!designer?.firstName && !designer?.lastName ? "Unknown" : ""}'s</strong> <span className="show-hover">[{designer?.user}]</span> pre-commission sales.
+				</Typography>
+			</Grid>
+
+			{/* Date Picker and View Controls */}
+			<Grid item xs={4}
+				sx={{
+					justifyContent: "end",
+					display: "flex",
+				}}
+				data-disabled={loading}
+				disabled={loading}
+			>
+				<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+					<IconButton 
+						onClick={() => {
+							const newDate = new Date(date);
+							newDate.setUTCMonth(date.getUTCMonth() - 1);
+							setDate(newDate);
+						}}
+						size="small"
+						sx={{ display: { xs: 'none', md: 'inherit' } }}
+					>
+						<ChevronLeftIcon />
+					</IconButton>
+					<DatePicker
+						label='Month/Year (UTC)'
+						views={['month', 'year']}
+						format="MMM YYYY"
+						formatDensity="dense"
+						slotProps={{ textField: { variant: "filled" } }}
+						sx={{ "& *": { borderRadius: "4px" } }}
+						value={dayjs.utc(date)}
+						onChange={(newValue) => setDate(newValue.toDate())}
+					/>
+					<IconButton 
+						onClick={() => {
+							const newDate = new Date(date);
+							newDate.setUTCMonth(date.getUTCMonth() + 1);
+							setDate(newDate);
+						}}
+						size="small"
+						sx={{ display: { xs: 'none', md: 'inherit' } }}
+					>
+						<ChevronRightIcon />
+					</IconButton>
+					{!!sales.length && (
+						<Tooltip 
+							title="Print to PDF"
+							sx={{ display: { xs: 'none', md: 'inherit' } }}
+						>
+							<IconButton
+								className='print-button'
+								onClick={() => {
+									// Add print-specific styles to the document
+									const style = document.createElement('style');
+									style.id = 'print-style';
+									// Find the current salesPortal containing the clicked print button
+									const printButton = document.querySelector('.print-button:hover');
+									const currentPortal = printButton.closest('.salesPortal');
+									const allPortals = Array.from(document.querySelectorAll('.salesPortal'));
+									const portalIndex = allPortals.indexOf(currentPortal) + 1;
+									
+									style.textContent = `
+										@media print {
+											@page {
+												size: letter portrait;
+												margin: 0.5in;
+											}
+											header, #navBar, footer, #footer, #titleContainer, .exportSection, 
+											.salesPortal:not(:nth-child(${portalIndex})) {
+												display: none!important;
+											}
+											.salesPortal, .salesPortalWrap{
+												background: white;
+											}
+											body {
+												-webkit-print-color-adjust: exact !important;
+												print-color-adjust: exact !important;
+											}
+											.MuiGrid-container{
+												min-height: 0;
+											}
+											.salesPortal {
+												padding: 0 !important;
+											}
+											.MuiGrid-root {
+												page-break-inside: avoid;
+											}
+											/* Hide non-printable elements */
+											button, .MuiIconButton-root, .DatePicker {
+												display: none !important;
+											}
+											/* Ensure charts and tables fit on page */
+											.salesSection {
+												width: 100% !important;
+												margin: 20px 0 !important;
+											}
+											/* Ensure text is readable */
+											.MuiTypography-root {
+												color: black !important;
+											}
+										}
+									`;
+									document.head.appendChild(style);
+
+									// Trigger print dialog
+									window.print();
+
+									// Remove print styles after printing
+									setTimeout(() => {
+										const printStyle = document.getElementById('print-style');
+										if (printStyle) {
+											printStyle.remove();
+										}
+									}, 1000);
+								}}
+								size="small"
+							>
+								<PrintIcon />
+							</IconButton>
+						</Tooltip>
+					)}
+				</Box>
+			</Grid>
+
+			{/* Error Messages */}
+			{!!(message !== '') &&
+				<Grid item xs={12} pb={8}>
+					<Typography variant='body2' sx={{ color: 'var(--red, red)', mt: 2 }}>{message}</Typography>
+				</Grid>
+			}
+			{!!(previousSalesError !== '') &&
+				<Grid item xs={12} pb={4}>
+					<Typography variant='body2' sx={{ color: 'var(--red, red)', mt: 1, opacity: 0.8 }}>
+						⚠️ Previous sales data: {previousSalesError}
+					</Typography>
+				</Grid>
+			}
+		</Grid>
+	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales]);
+
+	return (
+		<LocalizationProvider dateAdapter={AdapterDayjs}>
+			<Grid className={`salesPortal ${styles.salesPortal}`} item xs={12} p={0}
+				sx={{
+
+					pt: { xs: 8, md: 16 },
+					'&[data-loading="true"]': {
+						position: 'relative',
+						'&:after': {
+							content: '""',
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							right: 0,
+							bottom: 0,
+							backgroundColor: 'rgba(255,255,255,0.7)',
+							zIndex: 1
+						}
+					}
+				}}
+			>
+				<Grid container>
+					{HeaderSection}
+
+					{/* Sales Data Display */}
+					{!!sales.length && (
+						<>
+
+							<Grid
+								item
+								xs={12}
+								data-disabled={loading}
+								className={`sales-data-section ${styles.salesSection}`}
+								sx={{
+									opacity: !!sales.length ? 1 : 0.25,
+									pointerEvents: !!sales.length ? "" : "none",
+									position: "relative",
+								}}
+							>
+
+								{/* Chart Section */}
+								<Box className="sales-chart-wrapper">
+									<SalesChart
+										sales={sales}
+										chartState={chartState}
+										seriesData={seriesData}
+										displayLosses={displayLosses}
+										setDisplayLosses={setDisplayLosses}
+										date={date}
+										loading={loading}
+									/>
+								</Box>
+
+								{/* Summary Dashboard */}
+								<Box className="summary-cards-wrapper">
+									<SummaryCards
+										sales={sales}
+										previousSales={previousSales}
+										loading={loading}
+										chartState={chartState}
+										date={date}
+										locationData={locationData}
+									/>
+								</Box>
+
+								{/* Top Performers Section */}
+								{!!(categories && typefaceData && typefaceData.length) && (
+									<Box className="top-performers-wrapper">
+										<TopPerformers
+											typefaceData={typefaceData}
+											designersData={designersData}
+											total={total}
+											chartState={chartState}
+											sales={sales}
+											loading={loading}
+											admin={admin}
+										/>
+									</Box>
+								)}
+
+								{/* Typeface List */}
+								<Box className="typeface-list-wrapper">
+									<TypefaceList
+										typefaceData={typefaceData}
+										sales={sales}
+										loading={loading}
+										admin={admin}
+									/>
+								</Box>
+
+								{/* License Type List */}
+								<Box className="license-type-list-wrapper">
+									<LicenseTypeList
+										licenseTypeData={licenseTypeData}
+										sales={sales}
+										loading={loading}
+										admin={admin}
+									/>
+								</Box>
+
+								{/* Sales Table Section */}
+								{designer && (
+									<Box className="sales-table-wrapper">
+										<SalesTable 
+											sales={sales}
+											designer={designer}
+											admin={admin}
+											loading={loading}
+											date={date}
+											updateLoadingState={updateLoadingState}
+										/>
+									</Box>
+								)}
+							</Grid>
+							
+							{/* Date Range Sales Table Section */}
+								<DateRangeSalesTable
+									designer={designer}
+									admin={admin}
+									loading={loadingStates.dateRangeSalesData}
+									updateLoadingState={updateLoadingState}
+								/>
+						</>
+					)}
+
+				</Grid>
+			</Grid>
+		</LocalizationProvider>
+	);
+}