@liiift-studio/sales-portal 1.2.1

package/components/SalesTable.js

@@ -0,0 +1,677 @@
+// Sales table component for displaying detailed sales information
+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,
+  CircularProgress
+} from '@mui/material';
+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 styles from '../styles/sales-portal.module.scss';
+import { TableRowCells, getCellValue } from './table-row-cells';
+import { COLUMNS } from './table-columns';
+import { DataGrid } from '@mui/x-data-grid';
+
+export function SalesTable({ sales = [], designer = {}, admin = false, loading = false, date = new Date(), updateLoadingState = () => {} }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [selectedColumns, setSelectedColumns] = useState([
+    'orderNumber',
+    'total',
+    'amountDiscounted',
+    'taxAmount',
+    'preTaxTotal',
+    'date',
+    'description',
+    'typeface',
+    'refund'
+  ]);
+  
+  // 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: []
+  });
+  
+  // Reconciliation state
+  const [reconciliationData, setReconciliationData] = useState({
+    isLoading: false,
+    isReconciled: false,
+    totalBalanceChange: 0,
+    grossSales: 0,
+    difference: 0,
+    error: 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,
+        // Explicitly enable sorting
+        sortable: true,
+        // Add custom comparator for currency and date values
+        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 table's Gross Total column
+  function calculateGrossSales() {
+    let grossSales = 0;
+    sales.forEach(sale => {
+      sale?.refunds?.map((refund, i) => {
+        grossSales -= (refund.adjustedTotal || 0);
+      })
+      grossSales += sale?.shippingProvision ? sale?.total : sale?.totalWithTax;
+    });
+    return grossSales;
+  }
+
+  // Fetch balance transactions from Stripe
+  useEffect(() => {
+    if (!designer?.user || !designer?.password || !date || !admin || !sales) return;
+    
+    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, 
+            date, 
+            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, date, admin, sales]);
+
+  // Early return if no designer data is available
+  if (!designer?.user || !designer?.password) {
+    return (
+      <Grid container sx={{ mt: 16 }} className={styles.salesSection}>
+        <Grid item xs={12}>
+          <Typography variant="h6" sx={{ color: 'var(--red, red)' }}>
+            Error: Designer credentials not available
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+
+  /**
+   * Downloads sales data as CSV file
+   * @param {string} separator - CSV separator character
+   * @param {Object} designer - Designer information
+   * @param {Date} date - Current date
+   */
+  const downloadSalesData = (separator = ',', designer, date, selectedCols = selectedColumns) => {
+    updateLoadingState('csvDownload', true);
+
+    try {
+      // Get filtered columns
+      const filteredColumns = COLUMNS
+        .filter(column => selectedCols.includes(column.id) && (!column.adminOnly || admin));
+      
+      // Generate row data programmatically instead of relying on DOM
+      const rows = !sales?.length 
+        ? [{
+            sale: null,
+            designer,
+            admin,
+            isNoData: true,
+            color: "red"
+          }] 
+        : sales.flatMap(sale => {
+            const rowsData = [];
+            
+            // Add refund rows if any
+            if (sale?.refunds?.length > 0) {
+              sale.refunds.forEach((refund) => {
+                rowsData.push({
+                  sale,
+                  designer,
+                  admin,
+                  refund,
+                  color: "red"
+                });
+              });
+            }
+            
+            // Add original sale row
+            rowsData.push({
+              sale,
+              designer,
+              admin,
+              color: sale?.disputed ? "red!important" : "inherit"
+            });
+
+            return rowsData;
+          });
+
+      // Generate CSV header row
+      const headerRow = filteredColumns.map(column => `"${column.label}"`).join(separator);
+      
+      // Generate CSV data rows
+      const dataRows = rows.map(row => {
+        return filteredColumns.map(column => {
+          const result = getCellValue({
+            column,
+            sale: row.sale,
+            designer: row.designer,
+            admin: row.admin,
+            refund: row.refund,
+            isNoData: row.isNoData,
+            color: row.color
+          });
+          
+          // Format the value for CSV
+          let value = result.value;
+          if (typeof value === 'object' && React.isValidElement(value)) {
+            // If value is a React element (like a link), extract its text
+            value = value.props.children || '';
+          }
+          
+          // Clean and format cell data
+          let data = String(value)
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replace(/(\s\s)/gm, ' ')
+            .replace(/"/g, '""');
+            
+          return `"${data}"`;
+        }).join(separator);
+      });
+      
+      // Combine header and data rows
+      const csv_string = [headerRow, ...dataRows].join('\n');
+
+      // Download it
+      const filename = `${slugify(designer.user, { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}-${slugify(new Date(date).toUTCString(), { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}.csv`;
+      const 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='salesTable-section'
+    >
+      {/* Reconciliation Check - Only show for admin users */}
+      {admin && !reconciliationData.error && sales.length > 0 &&  (
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <Box 
+            sx={{ 
+              display: 'inline-block',
+              gap: 2,
+              p: 2,
+              mt: "20px",
+              borderRadius: '4px',
+              border: reconciliationData.isReconciled 
+                ? '2px solid var(--green, green)' 
+                : '2px solid var(--red, red)',
+              color: reconciliationData.isReconciled
+                ? 'var(--green, green)'
+                : 'var(--red, red)',
+            }}
+          >
+            {reconciliationData.isLoading ? (
+              <Typography variant="body1"><CircularProgress size={24} /> 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 in another month. Check for the same difference either the prior or next month.</Typography>
+                      <Typography variant="body2">• If a payment was approved after the invoice was finalized, there might be a delayed payment that shows up next month.</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>
+      )}
+
+      {/* Sales Table */}
+      <Grid item xs={12} 
+        textAlign={"right"} 
+        sx={{
+          opacity: !!sales?.length ? 1 : 0.25, 
+          pointerEvents: !!sales?.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, date, 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: !!sales?.length ? 1 : 0.25, 
+          pointerEvents: !!sales?.length ? "" : "none"
+        }}
+      >
+        <DataGrid
+          id={`${slugify(designer.user, { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}-${slugify(new Date(date).toUTCString(), { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}`}
+          rows={(() => {
+            if (!sales?.length) {
+              // Return array with single no-data row
+              return [{
+                id: 'no-data',
+                sale: null,
+                designer,
+                admin,
+                color: "red"
+              }];
+            }
+
+            // Process sales data
+            return sales.flatMap(sale => {
+              const rows = [];
+              
+              // Create a unique ID for this sale using orderNumber if available
+              const saleUniqueId = sale.orderNumber 
+                ? `order-${sale.orderNumber}-${sale.id}`
+                : sale.id;
+              
+              // Add refund rows if any
+              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}`,
+                    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>
+  );
+}