@liiift-studio/sales-portal 1.2.1

package/components/DateRangeSalesTable.js

@@ -0,0 +1,1072 @@
+// Sales table component for displaying sales data within a selected date range
+import React, { useState, useEffect, useMemo } from 'react';
+import { useRouter } from 'next/router';
+var slugify = require('slugify');
+import { 
+  Grid, 
+  Button, 
+  TableRow, 
+  TableHead, 
+  TableContainer, 
+  TableCell, 
+  TableBody, 
+  Table, 
+  Typography,
+  Menu,
+  MenuItem,
+  Checkbox,
+  ListItemText,
+  IconButton,
+  Tooltip,
+  Box
+} from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import DownloadIcon from '@mui/icons-material/Download';
+import TuneIcon from '@mui/icons-material/Tune';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import WarningIcon from '@mui/icons-material/Warning';
+import InfoIcon from '@mui/icons-material/Info';
+import CircularProgress from '@mui/material/CircularProgress';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+import styles from '../styles/sales-portal.module.scss';
+import { TableRowCells, getCellValue } from './table-row-cells';
+import { COLUMNS } from './table-columns';
+import SummaryCards from './SummaryCards';
+import TopPerformers from './TopPerformers';
+import TypefaceList from './TypefaceList';
+import LicenseTypeList from './LicenseTypeList';
+import { processChartData, processTypefaceData, processDesignersData, processLicenseTypeData } from '../utils/salesDataProcessing';
+
+/**
+ * Date range sales table component for displaying detailed sales information between two dates
+ * @param {Object} props - Component props
+ * @param {Array} props.sales - Sales data to display
+ * @param {Object} props.designer - Designer information
+ * @param {boolean} props.admin - Whether user is admin
+ * @param {boolean} props.loading - Loading state
+ * @param {Function} props.updateLoadingState - Function to update loading states
+ */
+export function DateRangeSalesTable({ designer, admin, loading, updateLoadingState }) {
+  // Early return if no designer data is available - MOVED TO TOP before any hooks
+  if (!designer?.user || !designer?.password) {
+    return (
+      <Grid container sx={{ mt: 16 }}>
+        <Grid item xs={12}>
+          <Typography variant="h6" sx={{ color: 'var(--red, red)' }}>
+            Error: Designer credentials not available
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+  
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [selectedColumns, setSelectedColumns] = useState([
+    'orderNumber',
+    'total',
+    'amountDiscounted',
+    'taxAmount',
+    'preTaxTotal',
+    'date',
+    'description',
+    'typeface',
+    'refund',
+    'testSales',
+  ]);
+  
+  // Add sortModel state to manage sorting
+  const [sortModel, setSortModel] = useState([
+    {
+      field: 'date',
+      sort: 'desc'
+    }
+  ]);
+  
+  // Filter model state for implementing filtering
+  const [filterModel, setFilterModel] = useState({
+    items: [],
+    quickFilterValues: []
+  });
+  
+  // Initialize dates
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [dateRangeSales, setDateRangeSales] = useState([]);
+  const [error, setError] = useState('');
+  
+  // Reconciliation state
+  const [reconciliationData, setReconciliationData] = useState({
+    isLoading: false,
+    isReconciled: false,
+    totalBalanceChange: 0,
+    grossSales: 0,
+    difference: 0,
+    error: null
+  });
+
+  // Dashboard states for summary data
+  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 [typefaceData, setTypefaceData] = useState([]);
+  const [designersData, setDesignersData] = useState([]);
+  const [licenseTypeData, setLicenseTypeData] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [locationData, setLocationData] = useState({
+    topLocation: '',
+    topLocationRevenue: 0,
+    topLocationPercentage: 0,
+    previousTopLocation: '',
+    previousTopLocationRevenue: 0,
+    previousTopLocationPercentage: 0,
+    locationChange: null
+  });
+
+  const handleMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleColumnToggle = (columnId) => {
+    setSelectedColumns(prev => {
+      if (prev.includes(columnId)) {
+        return prev.filter(id => id !== columnId);
+      } else {
+        return [...prev, columnId];
+      }
+    });
+  };
+
+  const handleSelectAll = () => {
+    setSelectedColumns(COLUMNS.filter(col => !col.adminOnly || admin).map(col => col.id));
+  };
+
+  const handleSelectNone = () => {
+    setSelectedColumns([]);
+  };
+
+  // Memoize the columns configuration
+  const memoizedColumns = useMemo(() => 
+    COLUMNS
+      .filter(column => selectedColumns.includes(column.id) && (!column.adminOnly || admin))
+      .map(column => ({
+        field: column.id,
+        headerName: column.label || column.headerName,
+        flex: 1,
+        minWidth: 120,
+        sortable: true,
+        sortComparator: (v1, v2, param1, param2) => {
+          // Extract the actual values from complex cell data
+          const getValue = (params) => {
+            if (!params.row) return '';
+            const result = getCellValue({
+              column,
+              sale: params.row.sale || null,
+              designer: params.row.designer || designer,
+              admin: params.row.admin || admin,
+              refund: params.row.refund || null,
+              isNoData: !params.row.sale,
+              color: params.row.color || ''
+            });
+            
+            // Handle React elements (like links)
+            if (typeof result.value === 'object' && React.isValidElement(result.value)) {
+              return result.value.props.children || '';
+            }
+            
+            return result.value;
+          };
+          
+          // Get the actual values to compare
+          const val1 = getValue({ row: param1.api.getRow(param1.id) });
+          const val2 = getValue({ row: param2.api.getRow(param2.id) });
+          
+          // For currency values, extract the number for comparison
+          if (column.id === 'total' || column.id === 'amountDiscounted' || 
+              column.id === 'preTaxTotal' || column.id === 'taxAmount' || 
+              column.id === 'stripeFees') {
+            // Extract numbers from currency strings like "$1,234.56"
+            const extractNumber = (str) => {
+              if (typeof str !== 'string') return str;
+              const match = str.replace(/[^0-9.-]+/g, '');
+              return match ? parseFloat(match) : 0;
+            };
+            
+            return extractNumber(val1) - extractNumber(val2);
+          }
+          
+          // For dates
+          if (column.id === 'date') {
+            const date1 = new Date(val1);
+            const date2 = new Date(val2);
+            return date1 - date2;
+          }
+          
+          // Default string comparison
+          if (typeof val1 === 'string' && typeof val2 === 'string') {
+            return val1.localeCompare(val2);
+          }
+          
+          // Fallback to default comparison
+          return v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
+        },
+        renderCell: (params) => {
+          if (!params.row) return '';
+          
+          const result = getCellValue({
+            column,
+            sale: params.row.sale || null,
+            designer: params.row.designer || designer,
+            admin: params.row.admin || admin,
+            refund: params.row.refund || null,
+            isNoData: !params.row.sale,
+            color: params.row.color || ''
+          });
+          
+          return <div style={{ color: params.row.color || undefined }}>{result.value}</div>;
+        }
+      }))
+  , [selectedColumns, admin, designer]);
+
+  // Calculate gross sales from the sales data
+  function calculateGrossSales() {
+    let grossSales = 0;
+    dateRangeSales.forEach(sale => {
+      sale?.refunds?.map((refund, i) => {
+        grossSales -= (refund.adjustedTotal || 0);
+      })
+      grossSales += sale?.shippingProvision ? sale?.total : sale?.totalWithTax;
+    });
+    return grossSales;
+  }
+
+  // Handle start date change with UTC consistency
+  const handleStartDateChange = (newValue) => {
+    if (!newValue) {
+      setStartDate(null);
+      return;
+    }
+    
+    // Set to start of day in UTC
+    const utcDate = dayjs.utc(newValue).startOf('day');
+    setStartDate(utcDate.toDate());
+    
+    // If end date exists and is before new start date, clear it
+    if (endDate && utcDate.toDate() > endDate) {
+      setEndDate(null);
+    }
+  };
+
+  // Fetch sales data for date range
+  useEffect(() => {
+    if (!startDate || !endDate) return;
+
+    const fetchDateRangeSales = async () => {
+      updateLoadingState('dateRangeSalesData', true);
+      setError('');
+      
+      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: startDate,
+            dateRange: {
+              start: startDate.getTime(),
+              end: endDate.getTime()
+            },
+            admin: designer?.admin 
+          }),
+        });
+        const data = await response.json();
+
+        if (data.success) {
+          setDateRangeSales(data.data);
+        } else {
+          setError('Error retrieving sales data');
+          setDateRangeSales([]);
+        }
+      } catch (err) {
+        console.error('Error fetching date range sales:', err);
+        setError('Error retrieving sales data');
+        setDateRangeSales([]);
+      } finally {
+        updateLoadingState('dateRangeSalesData', false);
+      }
+    };
+
+    fetchDateRangeSales();
+  }, [startDate, endDate, designer?.user, designer?.password, designer?.admin, updateLoadingState]);
+  
+  // Process sales data for dashboard
+  useEffect(() => {
+    if (!dateRangeSales || !dateRangeSales.length) return;
+    
+    try {
+      // For chart state, we'll create a mock date object since processChartData expects one
+      // but will adapt to use all data from the date range
+      const mockDate = startDate ? new Date(startDate) : new Date();
+      
+      // Process chart data
+      const processedData = processChartData(dateRangeSales, mockDate);
+      setChartState(processedData);
+      
+      // Process typeface data
+      const processedTypefaceData = processTypefaceData(dateRangeSales);
+      setTypefaceData(processedTypefaceData);
+      
+      // Process license type data
+      const processedLicenseTypeData = processLicenseTypeData(dateRangeSales);
+      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);
+      
+      // Process designers data
+      const processedDesignersData = processDesignersData(processedTypefaceData);
+      setDesignersData(processedDesignersData);
+      
+      // Process location data
+      const countries = {};
+      let topLocation = 'Unknown';
+      let topLocationRevenue = 0;
+      let topLocationPercentage = 0;
+      
+      dateRangeSales.forEach(sale => {
+        // Get location from various possible sources
+        const countryCode = sale.paymentMethod?.origin?.country || 
+          sale.customerAddress?.country || 
+          sale.billingAddress?.country || 
+          'Unknown';
+        
+        if (!countries[countryCode]) {
+          countries[countryCode] = { revenue: 0, count: 0 };
+        }
+        
+        // Calculate sale revenue (excluding tax and shipping)
+        const saleRevenue = (sale.total - (sale.taxAmount || 0) - (sale.shippingCost || 0)) / 100;
+        countries[countryCode].revenue += saleRevenue;
+        countries[countryCode].count++;
+      });
+      
+      // Find top location
+      Object.entries(countries).forEach(([code, data]) => {
+        if (data.revenue > topLocationRevenue) {
+          topLocation = code;
+          topLocationRevenue = data.revenue;
+        }
+      });
+      
+      // Calculate percentage of total
+      if (totalRevenue > 0 && topLocationRevenue > 0) {
+        topLocationPercentage = (topLocationRevenue / totalRevenue) * 100;
+      }
+      
+      // Set location data (without comparison to previous since this is a custom date range)
+      setLocationData({
+        topLocation,
+        topLocationRevenue,
+        topLocationPercentage,
+        previousTopLocation: '',
+        previousTopLocationRevenue: 0,
+        previousTopLocationPercentage: 0,
+        locationChange: null
+      });
+    } catch (error) {
+      console.error('Error processing date range sales data:', error);
+      setError('Error processing sales data');
+    }
+  }, [dateRangeSales, startDate]);
+  
+  // Fetch balance transactions from Stripe for the date range
+  useEffect(() => {
+    if (!designer?.user || !designer?.password || !startDate || !endDate || !admin || !dateRangeSales.length) {
+      console.log('Skipping balance transactions fetch due to missing data:', {
+        hasDesignerUser: !!designer?.user,
+        hasDesignerPassword: !!designer?.password,
+        hasStartDate: !!startDate,
+        hasEndDate: !!endDate,
+        isAdmin: !!admin,
+        salesCount: dateRangeSales.length
+      });
+      return;
+    }
+    
+    console.log('Fetching balance transactions for date range:', {
+      start: new Date(startDate).toISOString(),
+      end: new Date(endDate).toISOString()
+    });
+    
+    const fetchBalanceTransactions = async () => {
+      setReconciliationData(prev => ({ ...prev, isLoading: true, error: null }));
+      
+      try {
+        const response = await fetch('/api/sales-portal/getBalanceTransactions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ 
+            user: designer?.user, 
+            password: designer?.password,
+            dateRange: {
+              start: startDate.getTime(),
+              end: endDate.getTime()
+            },
+            admin: designer?.admin 
+          }),
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+          const totalBalanceChange = data.data.totalBalanceChange;
+          const grossSales = calculateGrossSales();
+          
+          setReconciliationData(prev => ({
+            ...prev,
+            totalBalanceChange,
+            grossSales,
+            difference: totalBalanceChange - grossSales,
+            isReconciled: Math.abs(totalBalanceChange - grossSales) < 1, // Allow for rounding differences
+            isLoading: false
+          }));
+        } else {
+          setReconciliationData(prev => ({
+            ...prev,
+            error: data.message || 'Failed to fetch balance transactions',
+            isLoading: false
+          }));
+        }
+      } catch (error) {
+        console.error('Error fetching balance transactions:', error);
+        setReconciliationData(prev => ({
+          ...prev,
+          error: error.message || 'Failed to fetch balance transactions',
+          isLoading: false
+        }));
+      }
+    };
+    
+    fetchBalanceTransactions();
+  }, [designer?.user, designer?.password, designer?.admin, startDate, endDate, admin, dateRangeSales]);
+
+  /**
+   * Downloads sales data as CSV file
+   * @param {string} separator - CSV separator character
+   * @param {Object} designer - Designer information
+   * @param {Array} selectedCols - Selected columns to include in CSV
+   */
+  const downloadSalesData = (separator = ',', designer, selectedCols = selectedColumns) => {
+    updateLoadingState('csvDownload', true);
+
+    try {
+      // Create CSV header row using selected columns
+      const visibleColumns = COLUMNS
+        .filter(col => selectedCols.includes(col.id) && (!col.adminOnly || admin));
+      
+      const headerRow = visibleColumns.map(col => `"${col.label || col.headerName}"`);
+      const csv = [headerRow.join(separator)];
+      
+      // Add data rows
+      dateRangeSales.forEach(sale => {
+        // Add original sale row
+        const rowData = [];
+        visibleColumns.forEach(column => {
+          const cellData = getCellValue({
+            column,
+            sale,
+            designer,
+            admin,
+            refund: null,
+            isNoData: false
+          });
+          
+          // Clean and format cell data
+          let data = (cellData.value?.toString() || '')
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replace(/(\s\s)/gm, ' ')
+            .replace(/"/g, '""');
+          
+          rowData.push(`"${data}"`);
+        });
+        csv.push(rowData.join(separator));
+        
+        // Add refund rows if any
+        if (sale?.refunds?.length > 0) {
+          sale.refunds.forEach(refund => {
+            const refundRowData = [];
+            visibleColumns.forEach(column => {
+              const cellData = getCellValue({
+                column,
+                sale,
+                designer,
+                admin,
+                refund,
+                isNoData: false
+              });
+              
+              // Clean and format cell data
+              let data = (cellData.value?.toString() || '')
+                .replace(/(\r\n|\n|\r)/gm, '')
+                .replace(/(\s\s)/gm, ' ')
+                .replace(/"/g, '""');
+              
+              refundRowData.push(`"${data}"`);
+            });
+            csv.push(refundRowData.join(separator));
+          });
+        }
+      });
+      
+      var csv_string = csv.join('\n');
+
+      // Download it
+      var filename = `${slugify(designer.user, { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}-${slugify(startDate.toUTCString(), { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}-to-${slugify(endDate.toUTCString(), { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}.csv`;
+      var link = document.createElement('a');
+      link.style.display = 'none';
+      link.setAttribute('target', '_blank');
+      link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
+      link.setAttribute('download', filename);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (error) {
+      console.error('Error downloading sales data:', error);
+    } finally {
+      updateLoadingState('csvDownload', false);
+    }
+  };
+
+  return (
+    <Grid 
+      container 
+      data-disabled={loading} 
+      data-loading={loading} 
+      className={`date-range-sales-table-wrapper exportSection ${styles.exportSection} ${styles.salesSection}`}
+      sx={{ 
+        mt: 32, 
+        pt: 16, 
+        pb: 8,
+        mb: '0!important',
+        background: "rgba(0,0,0,.85)",
+        "& > *": {filter: "invert(1)"}
+      }}
+    >
+      <Grid id='titleContainer' item xs={12} sm={6} md={8} >
+        <Typography variant='h3'>
+          Export {designer?.firstName ? `${designer.firstName}'s`: designer?.name ? `${designer.name}'s` : ''} Sales
+        </Typography>
+      </Grid>
+      
+      {/* Date Range Pickers */}
+      <Grid item xs={12} sm={6} md={4} sx={{ display: 'flex', gap: 2, mb: 8, justifyContent: 'flex-end', alignItems: 'center' }}>
+        {!startDate && !endDate && (
+          <>
+            <Button
+              variant="outlined"
+              onClick={() => {
+                // Set to January 1st 00:00:00 UTC of two years ago
+                const year = dayjs().subtract(2, 'year').year();
+                const startOfYear = dayjs.utc(`${year}-01-01`).startOf('day');
+                const endOfYear = dayjs.utc(`${year}-12-31`).endOf('day');
+                setStartDate(startOfYear.toDate());
+                setEndDate(endOfYear.toDate());
+              }}
+              sx={{
+                height: 'fit-content',
+                whiteSpace: 'nowrap',
+                mr: 2, 
+                borderWidth: '0!important',
+                color: 'var(--black, black)',
+                py: 4,
+                opacity: 0.5,
+                '&:hover': {
+                  opacity: 1
+                }
+              }}
+            >
+              {dayjs().subtract(2, 'year').year()}
+            </Button>
+            <Button
+              variant="outlined"
+              onClick={() => {
+                // Set to January 1st 00:00:00 UTC of last year
+                const year = dayjs().subtract(1, 'year').year();
+                const startOfYear = dayjs.utc(`${year}-01-01`).startOf('day');
+                const endOfYear = dayjs.utc(`${year}-12-31`).endOf('day');
+                setStartDate(startOfYear.toDate());
+                setEndDate(endOfYear.toDate());
+              }}
+              sx={{
+                height: 'fit-content',
+                whiteSpace: 'nowrap',
+                mr: 2, 
+                borderWidth: '0!important',
+                color: 'var(--black, black)',
+                py: 4,
+                opacity: 0.5,
+                '&:hover': {
+                  opacity: 1
+                }
+              }}
+            >
+              {dayjs().subtract(1, 'year').year()}
+            </Button>
+          </>
+        )}
+        
+        <DatePicker
+          label="Start (UTC)"
+          value={startDate ? dayjs.utc(startDate) : null}
+          onChange={handleStartDateChange}
+          views={['year', 'month', 'day']}
+          format="DD-MM-YYYY"
+          slotProps={{ textField: { variant: "filled" } }}
+          sx={{ "& *": { borderRadius: "4px" } }}
+        />
+        
+        <DatePicker
+          label="End (UTC)"
+          value={endDate ? dayjs.utc(endDate) : null}
+          onChange={(newValue) => {
+            if (!newValue) {
+              setEndDate(null);
+              return;
+            }
+            // Set to end of day in UTC
+            const utcDate = dayjs.utc(newValue).endOf('day');
+            setEndDate(utcDate.toDate());
+          }}
+          minDate={startDate ? dayjs.utc(startDate) : null}
+          disabled={!startDate}
+          views={['year', 'month', 'day']}
+          format="DD-MM-YYYY"
+          slotProps={{ textField: { variant: "filled" } }}
+          sx={{ 
+            transition: "all 0.5s",
+            maxWidth: startDate ? "initial" : "0",
+            opacity: startDate ? "" : "0",
+            "& *": { 
+              borderRadius: "4px",
+              color: startDate ? "" : "transparent",
+            } 
+          }}
+        />
+        
+        {(startDate && endDate) && (
+          <Tooltip title="Clear date range">
+            <IconButton
+              size="small"
+              onClick={() => {
+                setStartDate(null);
+                setEndDate(null);
+              }}
+              sx={{ 
+                color: 'var(--black, black)',
+                opacity: 0.5,
+                '&:hover': {
+                  opacity: 1
+                }
+              }}
+            >
+              ✕
+            </IconButton>
+          </Tooltip>
+        )}
+      </Grid>
+
+      {/* Error Message */}
+      {error && (
+        <Grid item xs={12}>
+          <Typography variant="body2" sx={{ color: 'var(--red, red)', mb: 2 }}>{error}</Typography>
+        </Grid>
+      )}
+
+      {/* Reconciliation Check - Only show for admin users */}
+      {admin && dateRangeSales.length > 0 && (
+        <Grid item xs={12} sx={{ 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' },
+            }}
+          >
+            
+            {reconciliationData.error ? (
+              <Typography variant="body1" sx={{ color: 'var(--red, red)' }}>
+                <WarningIcon fontSize="small" sx={{ mr: 1 }} />
+                Error: {reconciliationData.error}
+              </Typography>
+            ) : reconciliationData.isLoading ? (
+              <Typography variant="body1"><CircularProgress size={24} sx={{ mr: 1 }} /> Checking reconciliation...</Typography>
+            ) : reconciliationData.isReconciled ? (
+              <Typography variant="body1" sx={{ fontWeight: 'bold'}}>
+                <CheckCircleIcon /> Reconciled
+              </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>
+            )}
+            
+            {!reconciliationData.isLoading && (
+              <>
+                <Typography variant="body1">
+                  <strong>Stripe Balance Change:</strong> ${(reconciliationData.totalBalanceChange / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+                </Typography>
+                <Typography variant="body1">
+                  <strong>Gross Sales:</strong> ${(reconciliationData.grossSales / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+                </Typography>
+              </>
+            )}
+          </Box>
+        </Grid>
+      )}
+      
+      {/* Summary Dashboard and Analysis Components - only show when data is loaded */}
+      {!!dateRangeSales.length && (
+        <>
+          {/* Summary Cards */}
+          <SummaryCards
+            sales={dateRangeSales}
+            previousSales={[]} // No previous data in date range view
+            loading={loading}
+            chartState={chartState}
+            date={startDate}
+            locationData={locationData}
+          />
+          
+          {/* Top Performers */}
+          {typefaceData?.length > 0 && (
+            <TopPerformers
+              typefaceData={typefaceData}
+              designersData={designersData}
+              total={total}
+              chartState={chartState}
+              sales={dateRangeSales}
+              loading={loading}
+              admin={admin}
+            />
+          )}
+          
+          {/* Typeface List */}
+          {typefaceData?.length > 0 && (
+            <TypefaceList
+              typefaceData={typefaceData}
+              sales={dateRangeSales}
+              loading={loading}
+              admin={admin}
+            />
+          )}
+          
+          {/* License Type List */}
+          {licenseTypeData?.length > 0 && (
+            <LicenseTypeList
+              licenseTypeData={licenseTypeData}
+              sales={dateRangeSales}
+              loading={loading}
+              admin={admin}
+            />
+          )}
+        </>
+      )}
+      
+      {/* Sales Table */}
+      {!!dateRangeSales.length && (
+        <Grid container sx={{pb: 24}}>
+          <Grid item xs={12} 
+            textAlign={"right"} 
+            sx={{
+              opacity: !!dateRangeSales.length ? 1 : 0.25, 
+              pointerEvents: !!dateRangeSales.length ? "" : "none",
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "flex-end",
+            }}
+          >
+            <Box 
+              className='buttonStyle' 
+              sx={{
+                position: "relative",
+                borderRadius: "4px 4px 0px 0px ",
+                pointerEvents: "none",
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '6px 16px',
+                fontWeight: 500,
+              }}
+            >
+              <Grid container alignItems="center" spacing={1}>
+                <Grid item>
+                  <Tooltip title="Select columns">
+                    <IconButton
+                      size="small"
+                      onClick={handleMenuClick}
+                      sx={{ 
+                        color: 'var(--white, white)',
+                        pointerEvents: "auto",
+                        '&:hover': {
+                          opacity: 0.8
+                        }
+                      }}
+                    >
+                      <TuneIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </Grid>
+                <Grid item>
+                  <Tooltip title="Download CSV">
+                    <IconButton
+                      size="small"
+                      onClick={() => downloadSalesData(',', designer, selectedColumns)} 
+                      sx={{ 
+                        color: 'var(--white, white)',
+                        pointerEvents: "auto",
+                        '&:hover': {
+                          opacity: 0.8
+                        }
+                      }}
+                    >
+                      <DownloadIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </Grid>
+                <Grid item ml={1}>
+                  <strong style={{ color: 'var(--white, white)' }}>CSV</strong>
+                </Grid>
+              </Grid>
+
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleMenuClose}
+                dense={true}
+                PaperProps={{
+                  sx: {
+                    maxHeight: 300,
+                    width: 250,
+                    borderRadius: '4px',
+                  }
+                }}
+              >
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Button 
+                      onClick={handleSelectNone}
+                      size='small'
+                      variant="contained"
+                      elevation={0}
+                      sx={{
+                        borderRadius: 0,
+                        width: "100%",
+                        boxShadow: 0
+                      }}
+                    >None</Button>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Button 
+                      onClick={handleSelectAll}
+                      size='small'
+                      variant="contained"
+                      elevation={0}
+                      sx={{
+                        borderRadius: 0,
+                        width: "100%",
+                        boxShadow: 0
+                      }}
+                    >All</Button>
+                  </Grid>
+                </Grid>
+                {COLUMNS
+                  .filter(col => !col.adminOnly || admin)
+                  .map((column) => (
+                    <MenuItem 
+                      key={column.id}
+                      onClick={() => handleColumnToggle(column.id)}
+                      sx={{
+                        "&:hover": {
+                          backgroundColor: "rgba(0,0,0,0.1)"
+                        }
+                      }}
+                    >
+                      <Checkbox 
+                        checked={selectedColumns.includes(column.id)}
+                        size="small"
+                      />
+                      <ListItemText 
+                        primary={column.label}
+                        primaryTypographyProps={{
+                          variant: 'body2',
+                          style: { 
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                          }
+                        }}
+                      />
+                    </MenuItem>
+                  ))}
+              </Menu>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} data-disabled={loading} sx={{opacity: !!dateRangeSales.length ? 1 : 0.25, pointerEvents: !!dateRangeSales.length ? "" : "none"}}>
+            <DataGrid
+              id={`${slugify(designer.user, { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}-date-range`}
+              rows={(() => {
+                if (!dateRangeSales?.length) {
+                  // Return array with single no-data row
+                  return [{
+                    id: 'no-data',
+                    sale: null,
+                    designer,
+                    admin,
+                    color: "red"
+                  }];
+                }
+
+                // Process sales data
+                return dateRangeSales.flatMap(sale => {
+                  const rows = [];
+                  
+                  // Add refund rows if any
+                  // Create a unique ID for this sale using orderNumber if available
+                  const saleUniqueId = sale.orderNumber 
+                    ? `order-${sale.orderNumber}-${sale.lineId || sale.id}`
+                    : (sale.lineId || sale.id);
+                  
+                  if (sale?.refunds?.length > 0) {
+                    sale.refunds.forEach((refund, i) => {
+                      rows.push({
+                        // Create truly unique ID for each refund row
+                        id: `${saleUniqueId}-refund-${i}-${refund.id}-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`,
+                        sale,
+                        designer,
+                        admin,
+                        refund,
+                        color: "red"
+                      });
+                    });
+                  }
+                  
+                  // Add original sale row with enhanced uniqueness
+                  rows.push({
+                    id: `${saleUniqueId}-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`,
+                    sale,
+                    designer,
+                    admin,
+                    color: sale?.disputed ? "red!important" : "inherit"
+                  });
+
+                  return rows;
+                });
+              })()}
+              columns={memoizedColumns}
+              columnHeaderHeight={36}
+              rowHeight={28}
+              pagination
+              pageSizeOptions={[100]}
+              sortModel={sortModel}
+              onSortModelChange={(newSortModel) => setSortModel(newSortModel)}
+              filterModel={filterModel}
+              onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
+              disableColumnMenu={true}
+              componentsProps={{
+                columnHeaders: {
+                  sx: {
+                    // Style for the header cells
+                    '& .MuiDataGrid-columnHeader--sorted': {
+                      backgroundColor: 'rgba(25, 118, 210, 0.12)',
+                      '&:hover': {
+                        backgroundColor: 'rgba(25, 118, 210, 0.18)'
+                      }
+                    }
+                  }
+                }
+              }}
+              sx={{ 
+                backgroundColor: 'rgba(var(--blackRGB, 0,0,0), 0.06)',
+                maxHeight: 'max(300px, 50vh)', 
+                maxWidth: 'initial!important',
+                borderTopRightRadius: 0,
+                border: "none",
+                '--DataGrid-overlayHeight': '300px',
+                // Add specific styling for sorted column headers
+                '& .MuiDataGrid-columnHeader--sorted': {
+                  backgroundColor: 'rgba(25, 118, 210, 0.12)'
+                },
+                // Optional: add hover effect for sorted headers
+                '& .MuiDataGrid-columnHeader--sorted:hover': {
+                  backgroundColor: 'rgba(25, 118, 210, 0.18)'
+                }
+              }}
+            />
+          </Grid>
+        </Grid>
+      )}
+    </Grid>
+  );
+}