significant style improvements for decks, collections and cart

src/assets/currentlyUnused/CardLinearChart.jsx

@@ -0,0 +1,85 @@
+// import { Box, Tooltip, Typography, useMediaQuery } from '@mui/material';
+
+// import { ResponsiveLine } from '@nivo/line';
+// import { useCallback, useMemo, useState } from 'react';
+// import { useMode } from '../context';
+// import styled from 'styled-components';
+// const ChartContainer = styled(Box)(({ theme }) => ({
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+//   width: '100%',
+//   height: 'auto',
+//   [theme.breakpoints.down('sm')]: {
+//     width: '150%', // Adjust width for mobile screens
+//     height: '300px', // Adjust height for mobile screens
+//     // transform: 'translateX(10%)', // Shift the chart to the right by 50%
+//   },
+// }));
+
+// const parseDate = (dateString) => {
+//   const date = new Date(dateString);
+//   if (isNaN(date.getTime())) {
+//     console.error(`Invalid date: ${dateString}`);
+//     return null; // or a sensible default, or throw an error, depending on your needs
+//   }
+//   return date;
+// };
+// export const useEventHandlers = () => {
+//   const [hoveredData, setHoveredData] = useState(null);
+//   const handleMouseMove = useCallback((point) => {
+//     setHoveredData(point ? { x: point.data.x, y: point.data.y } : null);
+//   }, []);
+//   const handleMouseLeave = useCallback(() => setHoveredData(null), []);
+//   return { hoveredData, handleMouseMove, handleMouseLeave };
+// };
+
+// const CardLinearChart = ({ nivoReadyData, dimensions }) => {
+//   const { theme } = useMode();
+//   const processedData = useMemo(() => {
+//     return nivoReadyData?.map((series) => ({
+//       ...series,
+//       data: series?.data?.map((point) => ({
+//         ...point,
+//         x: parseDate(point?.x) || point?.x,
+//       })),
+//     }));
+//   }, [nivoReadyData]);
+
+//   const chartProps = useMemo(
+//     () => ({
+//       data: processedData,
+//       margin: { top: 20, right: 20, bottom: 20, left: 35 },
+//       xScale: {
+//         type: 'time',
+//         format: 'time:%Y-%m-%dT%H:%M:%S.%LZ',
+//         useUTC: false,
+//         precision: 'second',
+//       },
+//       axisBottom: {
+//         tickRotation: 0,
+//         legend: 'Time',
+//         legendOffset: 36,
+//         legendPosition: 'middle',
+//         tickSize: 5,
+//         tickPadding: 5,
+//         tickValues: 'every 2 days',
+//         format: '%b %d',
+//       },
+//       enableSlices: 'x',
+//       yScale: { type: 'linear', min: 'auto', max: 'auto' },
+//     }),
+//     [nivoReadyData, processedData]
+//   );
+
+//   if (!processedData || !processedData?.length) {
+//     return <Typography>No data available</Typography>;
+//   }
+//   return (
+//     <ChartContainer dimensions={dimensions} theme={theme}>
+//       <ResponsiveLine {...chartProps} />
+//     </ChartContainer>
+//   );
+// };
+
+// export default CardLinearChart;

src/assets/currentlyUnused/DataTableBodyCell.jsx

@@ -0,0 +1,57 @@
+// // prop-types is a library for typechecking of props
+// import PropTypes from 'prop-types';
+// import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX';
+// import { useMode } from '../../../../context';
+// import { Box } from '@mui/system';
+
+// function DataTableBodyCell({ noBorder, align, children }) {
+//   const { theme } = useMode();
+//   return (
+//     <MDBox
+//       component="td"
+//       textAlign={align}
+//       py={1.5}
+//       // px={3}
+//       // px={{ xs: 1, sm: 2 }}
+//       borders={1}
+//       color="text"
+//       sx={{
+//         justifyContent: 'center',
+//         textAlign: 'center',
+//         // color: theme.palette.text.secondary,
+//         // fontSize: { xs: '0.75rem', sm: '1rem' }, // Example of responsive font size
+//         borderBottom: noBorder
+//           ? 'none'
+//           : `${theme.borders.borderWidth[1]} solid ${theme.palette.backgroundB.lightest}`,
+//       }}
+//     >
+//       <Box
+//         display="inline-block"
+//         width="max-content"
+//         color="text"
+//         sx={{
+//           verticalAlign: 'middle',
+//           justifyContent: 'center',
+//           textAlign: 'center',
+//         }}
+//       >
+//         {children}
+//       </Box>
+//     </MDBox>
+//   );
+// }
+
+// // Setting default values for the props of DataTableBodyCell
+// DataTableBodyCell.defaultProps = {
+//   noBorder: false,
+//   align: 'left',
+// };
+
+// // Typechecking props for the DataTableBodyCell
+// DataTableBodyCell.propTypes = {
+//   children: PropTypes.node.isRequired,
+//   noBorder: PropTypes.bool,
+//   align: PropTypes.oneOf(['left', 'right', 'center']),
+// };
+
+// export default DataTableBodyCell;

src/assets/currentlyUnused/DataTableHeadCell.jsx

@@ -0,0 +1,113 @@
+// import { useMemo } from 'react';
+// import PropTypes from 'prop-types';
+// import { TableRow, Checkbox, Icon } from '@mui/material';
+// import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX';
+// import MDTypography from '../../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography';
+// import { useMode } from '../../../../context';
+// import FlexBetween from '../../../REUSABLE_COMPONENTS/FlexBetween';
+
+// const DataTableHeadCell = ({ headerGroups, isSorted, setSortedValue }) => {
+//   const { theme } = useMode();
+
+//   const renderCellContent = (column, idx) => {
+//     const sorted = setSortedValue(column, isSorted);
+//     const shouldShowIcons = column.showIcons;
+
+//     return (
+//       <MDBox
+//         component="th"
+//         key={idx}
+//         sx={{
+//           borderBottom: `2px solid ${theme.palette.divider}`,
+//           border: `1px solid ${theme.palette.divider}`,
+//           fontWeight: theme.typography.fontWeightMedium,
+//           letterSpacing: '0.0075em',
+//           lineHeight: 1.5,
+//           position: 'sticky',
+//           top: 0,
+//           zIndex: 2,
+//           width: '100%',
+//           // justifyContent: 'space-evenly',
+//           // width: column.id === 'selection' ? '50px' : 'auto',
+//           alignItems: 'center',
+//           boxShadow:
+//             '0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)',
+//           cursor: sorted ? 'pointer' : 'default',
+//           flexGrow: 1,
+//         }}
+//       >
+//         <FlexBetween
+//           mt="0.25rem"
+//           // gap="1.5rem"
+//           sx={{
+//             display: 'flex',
+//             // alignItems: 'center',
+//             justifyContent: 'space-evenly',
+//             flexGrow: 1,
+//           }}
+//         >
+//           <MDTypography
+//             variant="h6"
+//             color="text"
+//             fontWeight="medium"
+//             textTransform="uppercase"
+//             sx={{
+//               fontWeight: 'bold',
+//               flexGrow: 1,
+//               flexShrink: 0,
+//               mx: '100%',
+//             }}
+//           >
+//             {column.render('Header')}
+//           </MDTypography>
+//           {shouldShowIcons && sorted && (
+//             <MDBox
+//               sx={{
+//                 display: 'flex',
+//                 flexDirection: 'row',
+//                 alignItems: 'center',
+//                 justifyContent: 'flex-end',
+//                 height: '100%',
+//                 pr: 1, // Right padding to ensure some space before the edge
+//               }}
+//             >
+//               <Icon color={sorted === 'asce' ? 'action' : 'disabled'}>
+//                 arrow_drop_up
+//               </Icon>
+//               <Icon color={sorted === 'desc' ? 'action' : 'disabled'}>
+//                 arrow_drop_down
+//               </Icon>
+//             </MDBox>
+//           )}
+//         </FlexBetween>
+//       </MDBox>
+//     );
+//   };
+
+//   return useMemo(
+//     () => (
+//       <>
+//         {headerGroups.map((headerGroup, key) => (
+//           <TableRow key={key} {...headerGroup.getHeaderGroupProps()}>
+//             {headerGroup.headers.map(renderCellContent)}
+//           </TableRow>
+//         ))}
+//       </>
+//     ),
+//     [
+//       headerGroups,
+//       isSorted,
+//       setSortedValue,
+//       theme.palette.divider,
+//       theme.typography.fontWeightMedium,
+//     ]
+//   );
+// };
+
+// DataTableHeadCell.propTypes = {
+//   headerGroups: PropTypes.array.isRequired,
+//   isSorted: PropTypes.bool.isRequired,
+//   setSortedValue: PropTypes.func.isRequired,
+// };
+
+// export default DataTableHeadCell;

src/assets/currentlyUnused/DeckEditor.jsx

@@ -0,0 +1,17 @@
+// import React, { useState, useEffect } from 'react';
+// import { Paper, Typography, Box, useMediaQuery } from '@mui/material';
+// import { useMode } from '../../context';
+// import DeckForm from '../../components/forms/DeckForm';
+
+// const DeckEditor = ({ deck, onClose }) => {
+//   const { theme } = useMode();
+//   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+//   return (
+//     <Box sx={{ margin: isMobile ? theme.spacing(1) : theme.spacing(3) }}>
+//       <DeckForm actionType="update" deckData={deck} /> {/* </Paper> */}
+//     </Box>
+//   );
+// };
+
+// export default DeckEditor;