@liiift-studio/sales-portal 1.2.1

package/components/SummaryCards.js

@@ -0,0 +1,345 @@
+// Summary dashboard cards displaying key sales metrics at a glance with country code tooltips
+import React from 'react';
+import { 
+	Grid, 
+	Box, 
+	Typography, 
+	Paper, 
+	Tooltip, 
+	useMediaQuery,
+	useTheme
+} from '@mui/material';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import TrendingDownIcon from '@mui/icons-material/TrendingDown';
+import TrendingFlatIcon from '@mui/icons-material/TrendingFlat';
+import styles from '../styles/sales-portal.module.scss';
+import DebugValues from './DebugValues';
+import { formatCurrency, calculatePercentageChange, formatPercentage } from '../utils/currencyUtils';
+import countryCodes from '../data/countryCode.json';
+
+/**
+ * Gets the full country name from a country code
+ * @param {string} code - The country code (e.g., 'US', 'GB')
+ * @returns {string} The full country name or the original code if not found
+ */
+const getCountryName = (code) => {
+	if (!code || code === 'Unknown') return 'Unknown';
+	
+	// If it's already a full name (more than 2 chars), return as is
+	if (code.length > 2) return code;
+	
+	// Find the country in the countryCodes array
+	const country = countryCodes.find(c => c.code === code);
+	return country ? country.label : code;
+};
+
+/**
+ * Summary dashboard component showing key sales metrics with period-over-period comparison
+ * @param {Object} props - Component props
+ * @param {Array} props.sales - Current period sales data
+ * @param {Array} props.previousSales - Previous period sales data for comparison
+ * @param {boolean} props.loading - Loading state
+ * @param {Object} props.chartState - Chart data state
+ * @param {Date} props.date - Current date being displayed
+ * @param {Object} props.locationData - Data about sales by location
+ * @returns {JSX.Element} Summary cards component
+ */
+export default function SummaryCards({ 
+	sales = [], 
+	previousSales = [], 
+	loading = false,
+	chartState,
+	date,
+	locationData = {}
+}) {
+	if (!sales || !chartState) {
+		return null;
+	}
+
+	// Get month name for display
+	const monthName = new Date(date).toLocaleString("en-US", { timeZone: 'UTC', month: "long" });
+	const year = new Date(date).getUTCFullYear();
+	
+	// NOTE: Values from chartState are transformed in the processChartData function in salesDataProcessing.js
+	// Values from the API are in cents, but processChartData divides them by 100 for display
+	
+	// Net revenue (excluding tax and shipping)
+	const netRevenue = (chartState.salesMax - chartState.taxData.at(-1) - chartState.shippingData.at(-1)) || 0;
+	
+	// Gross revenue (including tax and shipping)
+	const grossRevenue = chartState.salesMax || 0;
+	
+	const taxTotal = chartState.taxData.at(-1) || 0;
+	const shippingTotal = chartState.shippingData.at(-1) || 0;
+	
+	const orderCount = sales.length;
+	const averageOrderValue = orderCount ? netRevenue / orderCount : 0;
+	// Sum all daily discount amounts to get total discounts for the period
+	const discountTotal = chartState.discountLostData.reduce((sum, val) => sum + val, 0) || 0;
+	const discountRate = netRevenue > 0 ? (discountTotal / (netRevenue + discountTotal)) * 100 : 0;
+	const refundTotal = chartState.refundTotal || 0;
+	const refundRate = netRevenue > 0 ? (refundTotal / (netRevenue + refundTotal)) * 100 : 0;
+	
+	// Location data
+	const { 
+		topLocation = 'Unknown', 
+		topLocationPercentage = 0, 
+		previousTopLocation = '',
+		previousTopLocationPercentage = 0,
+		locationChange = null 
+	} = locationData;
+	
+	// Calculate previous period metrics (if available)
+	let previousRevenue = 0;
+	let previousOrderCount = 0;
+	let previousAvgOrderValue = 0;
+	let previousRefundTotal = 0;
+	let hasPreviousData = false;
+	
+	if (previousSales && previousSales.length > 0) {
+		hasPreviousData = true;
+		previousOrderCount = previousSales.length;
+		
+		// Important: Raw sale data is in cents, but after applying processChartData, 
+		// the previous period data would be in dollars.
+		// Here we're calculating manually, so we need to convert the values ourselves
+		previousRevenue = 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);
+		
+		previousRefundTotal = previousSales.reduce((sum, sale) => {
+			if (sale.refunds && sale.refunds.length > 0) {
+				return sum + sale.refunds.reduce((refundSum, refund) => {
+					return refundSum + (refund.adjustedTotal || 0);
+				}, 0) / 100; // Convert cents to dollars
+			}
+			return sum;
+		}, 0);
+		
+		previousAvgOrderValue = previousOrderCount ? previousRevenue / previousOrderCount : 0;
+	}
+	
+	// Calculate period-over-period changes with our utility function
+	const revenueChange = calculatePercentageChange(grossRevenue, previousRevenue);
+	const orderCountChange = calculatePercentageChange(orderCount, previousOrderCount);
+	const avgOrderValueChange = calculatePercentageChange(averageOrderValue, previousAvgOrderValue);
+	const refundChange = calculatePercentageChange(refundTotal, previousRefundTotal);
+		
+	// Helper function to get trend icon
+	const getTrendIcon = (change) => {
+		if (change === null) return null;
+		
+		// For refund metrics, lower is better
+		const isRefundMetric = false; // Set to true for refund metrics
+		
+		if (Math.abs(change) < 1) return <TrendingFlatIcon sx={{ mx: 1 }} />;
+		
+		if ((change > 0 && !isRefundMetric) || (change < 0 && isRefundMetric)) {
+			return <TrendingUpIcon sx={{ mx: 1, fontSize: '1em', verticalAlign: 'middle', color: 'var(--green)' }} />;
+		} else {
+			return <TrendingDownIcon sx={{ mx: 1, fontSize: '1em', verticalAlign: 'middle', color: 'var(--red)' }} />;
+		}
+	};
+	
+	
+	// Define metric cards
+	const metricCards = [
+		{
+			title: 'Gross Sales',
+			value: formatCurrency(grossRevenue),
+			change: revenueChange,
+			tooltip: hasPreviousData ? `Previous: ${formatCurrency(previousRevenue)}` : 'No prior data available',
+			bgcolor: 'var(--black, black)',
+		},
+		{
+			title: 'Orders',
+			value: orderCount,
+			change: orderCountChange,
+			tooltip: hasPreviousData ? `Previous: ${previousOrderCount}` : 'No prior data available',
+			bgcolor: 'var(--black, black)',
+		},
+		{
+			title: 'Avg. Order Value',
+			value: formatCurrency(averageOrderValue),
+			change: avgOrderValueChange,
+			tooltip: hasPreviousData ? `Previous: ${formatCurrency(previousAvgOrderValue)}` : 'No prior data available',
+			bgcolor: 'var(--black, black)',
+		},
+		{
+			title: 'Discount Rate',
+			value: `${discountRate.toFixed(1)}%`,
+			tooltip: `Total discounts: ${formatCurrency(discountTotal)}`,
+			bgcolor: 'var(--black, black)',
+		},
+		{
+			title: 'Refund Rate',
+			value: `${refundRate.toFixed(1)}%`,
+			change: refundChange,
+			tooltip: `Total refunds: ${formatCurrency(refundTotal)}`,
+			bgcolor: 'var(--black, black)',
+		},
+		{
+			title: 'Top Location',
+			value: topLocation !== 'Unknown' ? `${topLocationPercentage.toFixed(0)}% ${topLocation}` : 'Unknown',
+			change: locationChange,
+			tooltip: previousTopLocation ? 
+				`Previous top location: ${previousTopLocation} (${previousTopLocationPercentage.toFixed(1)}%)` : 
+				'No prior data available',
+			bgcolor: 'var(--black, black)',
+			isLocationCard: true,
+			locationCode: topLocation,
+		}
+	];
+
+	// Use MUI's useMediaQuery hook for responsive design
+	const theme = useTheme();
+	const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+	const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+	
+	// Function to render the location card value with tooltip
+	const renderLocationValue = (locationCode, value) => {
+		if (locationCode === 'Unknown' || !locationCode) {
+			return value;
+		}
+		
+		// If the location code is 2 characters (standard ISO country code)
+		if (locationCode.length === 2) {
+			// Extract percentage and code parts
+			const parts = value.split(' ');
+			const percentage = parts[0];
+			const code = parts[1];
+			
+			const countryName = getCountryName(code);
+			
+			return (
+				<>
+					{percentage}{' '}
+					<Tooltip 
+						title={`${code}: ${countryName}`} 
+						placement="top" 
+						arrow
+					>
+						<span style={{ color: "var(--white, white)", borderBottom: '2px solid rgba(255,255,255,.45)', cursor: 'help' }}>{code}</span>
+					</Tooltip>
+				</>
+			);
+		}
+		
+		return value;
+	};
+	
+	return (
+		<Grid 
+			container 
+			spacing={isMobile ? 1 : 2} 
+			sx={{ 
+				mt: 2,
+				position: 'relative',
+				'&[data-loading="true"]': {
+					opacity: 0.7,
+					pointerEvents: 'none'
+				}
+			}}
+			data-disabled={loading}
+			data-loading={loading}
+		>
+			{/* Debug component */}
+			<DebugValues 
+				totalRevenue={netRevenue}
+				grossRevenue={grossRevenue}
+				previousRevenue={previousRevenue}
+				revenueChange={revenueChange}
+				chartState={chartState}
+			/>
+			
+			{/* Period header - removing CircularProgress as we use loading attribute instead */}
+			
+			{/* Metric cards */}
+			{metricCards.map((card, index) => (
+				<Grid key={`metric-${index}`} item xs={6} md={4}>
+					<Tooltip 
+						title={card.tooltip} 
+						placement="top" 
+						arrow
+					>
+						<Paper 
+							elevation={0} 
+							sx={{ 
+								p: 4, 
+								textAlign: 'center',
+								borderRadius: '4px',
+								border: '1px solid rgba(255, 255, 255, 0.12)',
+								backgroundColor: card.bgcolor,
+								'&:hover': {
+									boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
+									transform: 'translateY(-2px)',
+									transition: 'all 0.3s ease'
+								}
+							}}
+						>
+							<Box sx={{ 
+								display: 'flex', 
+								alignItems: 'center',
+								justifyContent: 'center', 
+							}}>
+								<Typography 
+									variant="h6" color="rgba(255, 255, 255, 0.7)"
+									sx={{
+										whiteSpace: 'nowrap',
+										textOverflow: 'ellipsis',
+										overflow: 'hidden',
+									}}
+								>
+									{card.title}
+								</Typography>
+							</Box>
+							<Box sx={{ 
+								display: 'flex', 
+								alignItems: 'center',
+								justifyContent: 'center', 
+							}}>
+								<Typography 
+									variant={isMobile ? "h6" : "h5"} 
+									fontWeight="bold"
+									sx={{
+										fontSize: {
+											xs: '1.1rem',
+											sm: '1.3rem',
+											md: '1.5rem'
+										},
+										color: 'rgba(255, 255, 255, 0.95)'
+									}}
+								>
+									{card.isLocationCard ? renderLocationValue(card.locationCode, card.value) : card.value}
+								</Typography>
+							</Box>
+
+							<Box sx={{ 
+								display: 'flex', 
+								alignItems: 'center',
+								justifyContent: 'center', 
+							}}>
+								<Typography 
+									variant="caption" 
+									sx={{ 
+										mt: 0.5,
+										opacity: (card.change !== null && card.change !== undefined) ? 1 : 0.25,
+										color: card.change > 0 ? 'var(--green, #4caf50)' : 
+													card.change < 0 ? 'var(--red, #f44336)' : 
+														'rgba(255, 255, 255, 0.6)'
+									}}
+								>
+									{(card.change !== null && card.change !== undefined) ? `${formatPercentage(card.change)} vs prior` : <span>&nbsp;</span>}
+									{card.change !== undefined && getTrendIcon(card.change)}
+								</Typography>
+							</Box>
+						</Paper>
+					</Tooltip>
+				</Grid>
+			))}
+		</Grid>
+	);
+}

package/components/TopPerformers.js

@@ -0,0 +1,331 @@
+// Top performers component displaying top performing typefaces and designers
+import React, { useState } from 'react';
+import { Grid, Typography, Box, Tooltip, Select, MenuItem, FormControl, InputLabel, Stack } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import SortIcon from '@mui/icons-material/Sort';
+// Top performers component displaying top performing typefaces and designers
+import styles from '../styles/sales-portal.module.scss';
+
+/**
+ * Top performers section showing top typefaces and designers with sortable data
+ */
+export default function TopPerformers({ 
+	typefaceData, 
+	designersData, 
+	total, 
+	chartState, 
+	sales, 
+	loading, 
+	admin 
+}) {
+	// State for sorting typefaces
+	const [typefaceSortKey, setTypefaceSortKey] = useState('percentage'); // 'percentage', 'orders', 'title'
+	const [typefaceSortDirection, setTypefaceSortDirection] = useState('desc'); // 'asc', 'desc'
+	
+	// State for sorting designers
+	const [designerSortKey, setDesignerSortKey] = useState('percentage'); // 'percentage', 'orders', 'name'
+	const [designerSortDirection, setDesignerSortDirection] = useState('desc'); // 'asc', 'desc'
+
+	// Sort typefaces based on the current sort config
+	const sortedTypefaces = React.useMemo(() => {
+		if (!typefaceData) return [];
+		
+		const sortableData = [...typefaceData];
+		
+		return sortableData.sort((a, b) => {
+			if (typefaceSortKey === 'percentage') {
+				// Sort by percentage of total sales
+				const valueA = a.total / total;
+				const valueB = b.total / total;
+				return typefaceSortDirection === 'asc' ? valueA - valueB : valueB - valueA;
+			} 
+			else if (typefaceSortKey === 'orders') {
+				// Sort by order count
+				return typefaceSortDirection === 'asc' ? a.orders - b.orders : b.orders - a.orders;
+			}
+			else {
+				// Sort by title alphabetically
+				return typefaceSortDirection === 'asc' 
+					? a.title.localeCompare(b.title) 
+					: b.title.localeCompare(a.title);
+			}
+		}).slice(0, 3); // Get top 3
+	}, [typefaceData, typefaceSortKey, typefaceSortDirection, total]);
+
+	// Sort designers based on the current sort config
+	const sortedDesigners = React.useMemo(() => {
+		if (!designersData) return [];
+		
+		const sortableData = [...designersData];
+		
+		return sortableData.sort((a, b) => {
+			if (designerSortKey === 'percentage') {
+				// Sort by percentage of total sales
+				const valueA = a.total / total;
+				const valueB = b.total / total;
+				return designerSortDirection === 'asc' ? valueA - valueB : valueB - valueA;
+			} 
+			else if (designerSortKey === 'orders') {
+				// Sort by order count
+				return designerSortDirection === 'asc' ? a.orders - b.orders : b.orders - a.orders;
+			}
+			else {
+				// Sort by name alphabetically
+				const nameA = a?.firstName && a?.lastName ? `${a.firstName} ${a.lastName}` : a?._id || '';
+				const nameB = b?.firstName && b?.lastName ? `${b.firstName} ${b.lastName}` : b?._id || '';
+				return designerSortDirection === 'asc' 
+					? nameA.localeCompare(nameB) 
+					: nameB.localeCompare(nameA);
+			}
+		}).slice(0, 3); // Get top 3
+	}, [designersData, designerSortKey, designerSortDirection, total]);
+
+	// Toggle sort direction
+	const toggleSortDirection = (currentType) => {
+		if (currentType === 'typeface') {
+			setTypefaceSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+		} else {
+			setDesignerSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+		}
+	};
+	return (
+		<>
+
+			{/* Top Performing Designers */}
+			<Grid container className='designers-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' sx={{color: "var(--white, white)"}}>
+							<strong>Designers</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="designer-sort-label">Sort by</InputLabel>
+								<Select
+									labelId="designer-sort-label"
+									value={designerSortKey}
+									onChange={(e) => setDesignerSortKey(e.target.value)}
+									label="Sort by"
+								>
+									<MenuItem value="percentage">Percentage</MenuItem>
+									<MenuItem value="orders">Orders</MenuItem>
+									<MenuItem value="name">Name</MenuItem>
+								</Select>
+							</FormControl>
+							<Tooltip 
+								title={`Sort ${designerSortDirection === 'asc' ? 'Descending' : 'Ascending'}`}
+							>
+								<Box 
+									onClick={() => toggleSortDirection('designer')} 
+									sx={{ 
+										cursor: 'pointer',
+										display: { xs: 'none', sm: 'flex' },
+										alignItems: 'center',
+										justifyContent: 'center',
+										padding: '6px 10px',
+										color: "var(--white, white)",
+									}}
+								>
+									{designerSortDirection === 'asc' ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+								</Box>
+							</Tooltip>
+						</Stack>
+					</Box>
+					<Box sx={{
+						background: "rgba(var(--blackRGB, 0,0,0), 0.06)",
+						padding: "10px 10px 20px",
+					}}>
+						{
+							sortedDesigners.map((designer, i) => {
+									return (
+										<Box
+											key={`designer-total-${i}`}
+											sx={{
+												paddingBottom: "10px",
+											}}
+										>
+											<Typography
+												variant='h5'
+												sx={{
+													whiteSpace: "nowrap",
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													paddingBottom: "0.5em"
+												}}>
+												{designer?.firstName && designer?.lastName ?
+													`${designer.firstName} ${designer.lastName}`
+													:
+													designer?._id
+												}
+												<span className={styles.earningContainer}>
+													<strong> {(designer.total / (total)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>%
+												</span>
+												<span style={{ opacity: "0.5", textTransform: "none" }}> ({designer.orders} Orders for a total of </span>
+												<span style={{ opacity: "0.5" }}> USD</span>$<strong>{(designer.total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}</strong>
+												<span style={{ opacity: "0.5", textTransform: "none" }}>)</span>
+											</Typography>
+
+											{/* Individual typefaces for this designer */}
+											{typefaceData
+												?.filter(typeface => typeface.author._id === designer._id)
+												.map((typeface, j) => (
+													<Typography
+														key={`designer-typeface-${i}-${j}`}
+														variant='h6'
+														sx={{
+															whiteSpace: "nowrap",
+															overflow: "hidden",
+															textOverflow: "ellipsis",
+														}}>
+														{typeface.title}
+														<span className={styles.earningContainer}>
+															<strong> {(typeface.total / (total + chartState.refundTotal)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>%
+														</span>
+														<span style={{ opacity: "0.5", textTransform: "none" }}> ({typeface.orders} Orders for a total of </span>
+														<span style={{ opacity: "0.5" }}> USD</span>$<strong>{(typeface.total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}</strong>
+														<span style={{ opacity: "0.5", textTransform: "none" }}>)</span>
+													</Typography>
+												))}
+										</Box>
+									)
+								})
+						}
+					</Box>
+				</Grid>
+			</Grid>
+
+			
+			{/* Top Performing products */}
+			<Grid container className='top-performers-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>Top Performers</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="typeface-sort-label">Sort by</InputLabel>
+								<Select
+									labelId="typeface-sort-label"
+									value={typefaceSortKey}
+									onChange={(e) => setTypefaceSortKey(e.target.value)}
+									label="Sort by"
+									
+								>
+									<MenuItem value="percentage">Percentage</MenuItem>
+									<MenuItem value="orders">Orders</MenuItem>
+									<MenuItem value="title">Name</MenuItem>
+								</Select>
+							</FormControl>
+							<Tooltip 
+								title={`Sort ${typefaceSortDirection === 'asc' ? 'Descending' : 'Ascending'}`}
+							>
+								<Box 
+									onClick={() => toggleSortDirection('typeface')} 
+									sx={{ 
+										cursor: 'pointer',
+										display: { xs: 'none', sm: 'flex' },
+										alignItems: 'center',
+										justifyContent: 'center',
+										padding: '6px 10px',
+										color: "var(--white, white)",
+									}}
+								>
+									{typefaceSortDirection === 'asc' ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+								</Box>
+							</Tooltip>
+						</Stack>
+					</Box>
+					<Box sx={{
+						background: "rgba(var(--blackRGB, 0,0,0), 0.06)",
+						padding: "10px"
+					}}>
+						{
+							sortedTypefaces.map((typeface, i) => {
+									return (
+										<Typography
+											key={`typeface-total-${i}`}
+											variant='h5'
+											sx={{
+												whiteSpace: "nowrap",
+												overflow: "hidden",
+												textOverflow: "ellipsis",
+												paddingBottom: "0.5em"
+											}}>
+											{typeface.title}
+											<span className={styles.earningContainer}>
+												<strong> {(typeface.total / (total)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>%
+											</span>
+											<span style={{ opacity: "0.5", textTransform: "none" }}> ({typeface.orders} Orders for a total of </span>
+											<span style={{ opacity: "0.5" }}> USD</span>$<strong>{(typeface.total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}</strong>
+											<span style={{ opacity: "0.5", textTransform: "none" }}>)</span>
+										</Typography>
+									)
+								})
+						}
+					</Box>
+				</Grid>
+			</Grid>
+
+		</>
+	);
+}