table with fiscal and calendar year filtering logic, search bar to se…

…arch any column, and testing page with fake data. test takes over index, still need to make prettier

client/src/TableTestPage.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import FilteringTable from './components/FilteringTable';
+
+function TableTestPage() {
+  // Define the columns
+  const columns = [
+    { id: 'id', label: 'ID' },
+    { id: 'name', label: 'Name' },
+    { id: 'date', label: 'Date' },
+    // Add more columns as needed
+  ];
+
+  // Generate the rows
+  const rows = [];
+  const startDate = new Date('2023-01-01');
+  const endDate = new Date('2024-12-31');
+  for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
+    rows.push({
+      id: rows.length + 1,
+      name: `Name ${rows.length + 1}`,
+      date: d.toISOString().split('T')[0], // Format the date as 'yyyy-mm-dd'
+      // Add more data as needed
+    });
+  }
+
+  return <FilteringTable columns={columns} rows={rows} />;
+}
+
+export default TableTestPage;

client/src/components/FilteringTable.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableFooter,
+  TableRow,
+  TablePagination,
+  TextField,
+  Select,
+  MenuItem,
+  Button,
+  Input,
+  SelectChangeEvent,
+} from '@mui/material';
+
+interface Column {
+  id: string;
+  label: string;
+}
+
+interface Row {
+  [key: string]: number | string;
+  id: number;
+  name: string;
+  date: string;
+}
+
+interface FilteringTableProps {
+  columns: Column[];
+  rows: Row[];
+}
+
+function FilteringTable({
+  columns: initialColumns,
+  rows: initialRows,
+}: FilteringTableProps) {
+  const [rows, setRows] = useState<Row[]>(initialRows);
+  const [columns, setColumns] = useState<Column[]>(initialColumns);
+  const [filterType, setFilterType] = useState('calendar');
+  const [filterYear, setFilterYear] = useState(new Date().getFullYear());
+  const [filterVisible, setFilterVisible] = useState(false);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleFilterTypeChange = (event: SelectChangeEvent<string>) => {
+    setFilterType(event.target.value);
+  };
+
+  const handleFilterYearChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setFilterYear(parseInt(event.target.value, 10));
+  };
+
+  const toggleFilterVisible = () => {
+    setFilterVisible(!filterVisible);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value.toLowerCase());
+    setPage(0); // Reset to the first page when the search term changes
+  };
+
+  // Apply the search filter first
+  const searchedRows = rows.filter((row) => {
+    // Convert all row values to string and lowercase, then check if they include the search term
+    return Object.values(row).some((value) =>
+      value.toString().toLowerCase().includes(searchTerm),
+    );
+  });
+
+  // Then apply the year filter
+  const filteredRows = searchedRows.filter((row) => {
+    const date = new Date(row.date as string);
+    const year = date.getFullYear();
+    const month = date.getMonth();
+
+    if (filterType === 'calendar') {
+      return year === filterYear;
+    } else {
+      // fiscal year
+      return (
+        (month >= 6 && year === filterYear) ||
+        (month < 6 && year - 1 === filterYear)
+      );
+    }
+  });
+
+  return (
+    <>
+      <Button onClick={toggleFilterVisible}>Filter</Button>
+      {filterVisible && (
+        <>
+          <Select value={filterType} onChange={handleFilterTypeChange}>
+            <MenuItem value="calendar">Calendar Year</MenuItem>
+            <MenuItem value="fiscal">Fiscal Year</MenuItem>
+          </Select>
+          <TextField
+            label="Year"
+            value={filterYear}
+            onChange={handleFilterYearChange}
+          />
+        </>
+      )}
+      <Input
+        placeholder="Search"
+        value={searchTerm}
+        onChange={handleSearchChange}
+      />
+      <TableContainer
+        style={{
+          borderRadius: '16px',
+          overflow: 'hidden',
+          boxShadow: '0px 0px 10px rgba(0,0,0,0.1)',
+          maxWidth: '80%',
+          margin: 'auto',
+        }}
+      >
+        <Table>
+          <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <TableCell key={column.id}>{column.label}</TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {filteredRows
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map((row) => (
+                <TableRow key={row.id}>
+                  {columns.map((column) => (
+                    <TableCell key={column.id}>{row[column.id]}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25]}
+                component="div"
+                count={filteredRows.length}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                onPageChange={handleChangePage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+              />
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </TableContainer>
+    </>
+  );
+}
+
+export default FilteringTable;

client/src/index.tsx

@@ -1,19 +1,30 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import reportWebVitals from './reportWebVitals';
-import App from './App';
-import { AlertProvider } from './util/context/AlertContext';
+// import React from 'react';
+// import { createRoot } from 'react-dom/client';
+// import reportWebVitals from './reportWebVitals';
+// import App from './App';
+// import { AlertProvider } from './util/context/AlertContext';
+
+// const container = document.getElementById('root');
+// // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+// const root = createRoot(container!); // createRoot(container!) if you use TypeScript
+// root.render(
+//   <AlertProvider>
+//     <App />
+//   </AlertProvider>,
+// );
 
-const container = document.getElementById('root');
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const root = createRoot(container!); // createRoot(container!) if you use TypeScript
-root.render(
-  <AlertProvider>
-    <App />
-  </AlertProvider>,
-);
+// // If you want to start measuring performance in your app, pass a function
+// // to log results (for example: reportWebVitals(console.log))
+// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals();
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestPage from './TableTestPage'; // replace with the actual path to your TestPage.tsx file
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+ReactDOM.render(
+  <React.StrictMode>
+    <TestPage />
+  </React.StrictMode>,
+  document.getElementById('root')
+);