@liiift-studio/sales-portal 1.2.3 → 1.3.1

package/api/getBalanceTransactions.js

@@ -1,5 +1,7 @@
 // API endpoint to fetch Stripe balance transactions for reconciliation
-const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
+const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY, {
+	maxNetworkRetries: 3,
+});
 
 /**
  * Fetches Stripe balance transactions for a specific month

package/api/getDesignerInfo.js

@@ -5,7 +5,9 @@ export const config = { maxDuration: 300 };
 
 // Import required dependencies
 const { createClient } = require('@sanity/client');
-const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
+const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY, {
+	maxNetworkRetries: 3,
+});
 
 /**
  * Sanity client configuration for CMS interactions

package/api/utils/stripeFetcher.js

@@ -2,7 +2,9 @@
  * Utility functions for fetching data from Stripe API
  */
 
-const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
+const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY, {
+	maxNetworkRetries: 3,
+});
 
 /**
  * Fetches dispute details including all balance transactions

package/components/DateRangeSalesTable.js

@@ -2,15 +2,14 @@
 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, 
+import {
+  Button,
+  TableRow,
+  TableHead,
+  TableContainer,
+  TableCell,
+  TableBody,
+  Table,
   Typography,
   Menu,
   MenuItem,
@@ -53,13 +52,11 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
   // 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>
+      <Box sx={{ mt: 16, width: '100%' }}>
+        <Typography variant="h6" sx={{ color: 'var(--red, red)' }}>
+          Error: Designer credentials not available
+        </Typography>
+      </Box>
     );
   }
   
@@ -568,28 +565,30 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
   };
 
   return (
-    <Grid 
-      container 
-      data-disabled={loading} 
-      data-loading={loading} 
+    <Box
+      data-disabled={loading}
+      data-loading={loading}
       className={`date-range-sales-table-wrapper exportSection ${styles.exportSection} ${styles.salesSection}`}
-      sx={{ 
-        mt: 32, 
-        pt: 16, 
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        width: '100%',
+        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} >
+      <Box id='titleContainer' sx={{ width: { xs: '100%', sm: '50%', md: '66.67%' } }}>
         <Typography variant='h3'>
           Export {designer?.firstName ? `${designer.firstName}'s`: designer?.name ? `${designer.name}'s` : ''} Sales
         </Typography>
-      </Grid>
-      
+      </Box>
+
       {/* Date Range Pickers */}
-      <Grid item xs={12} sm={6} md={4} sx={{ display: 'flex', gap: 2, mb: 8, justifyContent: 'flex-end', alignItems: 'center' }}>
+      <Box sx={{ width: { xs: '100%', sm: '50%', md: '33.33%' }, display: 'flex', gap: 2, mb: 8, justifyContent: 'flex-end', alignItems: 'center' }}>
         {!startDate && !endDate && (
           <>
             <Button
@@ -703,18 +702,18 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
             </IconButton>
           </Tooltip>
         )}
-      </Grid>
+      </Box>
 
       {/* Error Message */}
       {error && (
-        <Grid item xs={12}>
+        <Box sx={{ width: '100%' }}>
           <Typography variant="body2" sx={{ color: 'var(--red, red)', mb: 2 }}>{error}</Typography>
-        </Grid>
+        </Box>
       )}
 
       {/* Reconciliation Check - Only show for admin users */}
       {admin && dateRangeSales.length > 0 && (
-        <Grid item xs={12} sx={{ mb: 2 }}>
+        <Box sx={{ width: '100%', mb: 2 }}>
           <Box 
             sx={{ 
               display: 'inline-block',
@@ -780,9 +779,9 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
               </>
             )}
           </Box>
-        </Grid>
+        </Box>
       )}
-      
+
       {/* Summary Dashboard and Analysis Components - only show when data is loaded */}
       {!!dateRangeSales.length && (
         <>
@@ -833,11 +832,12 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
       
       {/* Sales Table */}
       {!!dateRangeSales.length && (
-        <Grid container sx={{pb: 24}}>
-          <Grid item xs={12} 
-            textAlign={"right"} 
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', width: '100%', pb: 24 }}>
+          <Box
             sx={{
-              opacity: !!dateRangeSales.length ? 1 : 0.25, 
+              width: '100%',
+              textAlign: 'right',
+              opacity: !!dateRangeSales.length ? 1 : 0.25,
               pointerEvents: !!dateRangeSales.length ? "" : "none",
               display: "flex",
               justifyContent: "flex-end",
@@ -859,45 +859,41 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
                 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}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <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>
+                <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>
+                <Box sx={{ ml: 1 }}>
                   <strong style={{ color: 'var(--white, white)' }}>CSV</strong>
-                </Grid>
-              </Grid>
+                </Box>
+              </Box>
 
               <Menu
                 anchorEl={anchorEl}
@@ -912,34 +908,30 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
                   }
                 }}
               >
-                <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>
+                <Box sx={{ display: 'flex' }}>
+                  <Button
+                    onClick={handleSelectNone}
+                    size='small'
+                    variant="contained"
+                    elevation={0}
+                    sx={{
+                      borderRadius: 0,
+                      width: "50%",
+                      boxShadow: 0
+                    }}
+                  >None</Button>
+                  <Button
+                    onClick={handleSelectAll}
+                    size='small'
+                    variant="contained"
+                    elevation={0}
+                    sx={{
+                      borderRadius: 0,
+                      width: "50%",
+                      boxShadow: 0
+                    }}
+                  >All</Button>
+                </Box>
                 {COLUMNS
                   .filter(col => !col.adminOnly || admin)
                   .map((column) => (
@@ -971,9 +963,9 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
                   ))}
               </Menu>
             </Box>
-          </Grid>
+          </Box>
 
-          <Grid item xs={12} data-disabled={loading} sx={{opacity: !!dateRangeSales.length ? 1 : 0.25, pointerEvents: !!dateRangeSales.length ? "" : "none"}}>
+          <Box data-disabled={loading} sx={{ width: '100%', opacity: !!dateRangeSales.length ? 1 : 0.25, pointerEvents: !!dateRangeSales.length ? "" : "none" }}>
             <DataGrid
               id={`${slugify(designer.user, { lower: true, remove: /[*/+~.()'"!:@]/g, strict: true })}-date-range`}
               rows={(() => {
@@ -1064,9 +1056,9 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
                 }
               }}
             />
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
       )}
-    </Grid>
+    </Box>
   );
 }

package/components/LicenseTypeList.js

@@ -1,6 +1,6 @@
 // License type list component displaying all license types and their sales data with percentage sorting capability
 import React, { useState } from 'react';
-import { Grid, Typography, Box, Tooltip, FormControl, InputLabel, Select, MenuItem, Stack } from '@mui/material';
+import { Typography, Box, Tooltip, FormControl, InputLabel, Select, MenuItem, Stack } from '@mui/material';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import styles from '../styles/sales-portal.module.scss';
@@ -59,16 +59,14 @@ export default function LicenseTypeList({ licenseTypeData, sales, loading, admin
 	};
 
 	return (
-		<Grid container className='license-type-section'>
-			<Grid
-				item
-				xs={12}
+		<Box className='license-type-section' sx={{ width: '100%' }}>
+			<Box
 				data-disabled={loading}
 				data-loading={loading}
 				sx={{
+					width: '100%',
 					margin: "20px 0 10px",
 					borderRadius: "4px",
-					flex: "none",
 					opacity: !!sales.length ? 1 : 0.25,
 					pointerEvents: !!sales.length ? "" : "none",
 					border: "1px solid var(--black, black)",
@@ -187,7 +185,7 @@ export default function LicenseTypeList({ licenseTypeData, sales, loading, admin
 						);
 					})}
 				</Box>
-			</Grid>
-		</Grid>
+			</Box>
+		</Box>
 	);
 }