swapped underscore for lodash, added store utility functions for deep equal selector, added fonts

frontend/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@dinero.js/currencies": "^2.0.0-alpha.8",
     "@material-table/core": "^0.2.6",
+    "@material-table/exporters": "^1.0.8",
     "@mui/icons-material": "^5.2.0",
     "@mui/lab": "^5.0.0-alpha.59",
     "@mui/material": "^5.2.1",
@@ -15,12 +16,16 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
     "dinero.js": "^2.0.0-alpha.8",
+    "filefy": "^0.1.11",
+    "lodash": "^4.17.21",
     "material-ui-popup-state": "^2.0.0",
+    "normalizr": "^3.6.1",
     "react": "^17.0.2",
-    "react-data-grid": "^7.0.0-beta.7",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
+    "react-table": "^7.7.0",
+    "rsuite-table": "^5.3.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

frontend/public/index.html

@@ -24,7 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Budg-E</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+    <title>BudgE</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/src/components/AccountTable/AccountTable.js

@@ -36,7 +36,6 @@ import { toSnapshot } from '@dinero.js/core'
 import Tooltip from '@mui/material/Tooltip'
 import { useTheme } from '@mui/styles'
 import AccountTableHeader from './AccountTableHeader'
-import _ from 'underscore'
 import { payeesSelectors } from '../../redux/slices/Payees'
 import { createSelector } from '@reduxjs/toolkit'
 import { categoriesSelectors } from '../../redux/slices/Categories'

frontend/src/components/BudgetTable/BudgetTable.js

@@ -1,20 +1,11 @@
 import React, { useMemo } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { createSelector } from '@reduxjs/toolkit'
-import MaterialTable, { MTableCell, MTableEditCell, MTableBodyRow, MTableToolbar } from '@material-table/core'
-import { TableIcons } from '../../utils/Table'
 import { refreshBudget } from '../../redux/slices/Budgets'
-import {
-  fetchBudgetMonth,
-  updateCategoryMonth,
-  fetchCategoryMonths,
-  refreshBudgetMonth,
-  refreshBudgetCategory,
-} from '../../redux/slices/BudgetMonths'
+import { updateCategoryMonth, refreshBudgetCategory } from '../../redux/slices/BudgetMonths'
 import { updateCategory } from '../../redux/slices/Categories'
 import { updateCategoryGroup, fetchCategories, categoryGroupsSelectors } from '../../redux/slices/CategoryGroups'
 import { categoriesSelectors } from '../../redux/slices/Categories'
-import TextField from '@mui/material/TextField'
 import IconButton from '@mui/material/IconButton'
 import AddCircleIcon from '@mui/icons-material/AddCircle'
 import Chip from '@mui/material/Chip'
@@ -28,7 +19,7 @@ import PopupState, { bindTrigger } from 'material-ui-popup-state'
 import CategoryGroupForm from '../CategoryGroupForm'
 import CategoryForm from '../CategoryForm'
 import Tooltip from '@mui/material/Tooltip'
-import _ from 'underscore'
+import _ from 'lodash'
 import { formatMonthFromDateString, getDateFromString } from '../../utils/Date'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
@@ -49,32 +40,6 @@ import TableRow from '@mui/material/TableRow'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
-const StyledMTableToolbar = styled(MTableToolbar)(({ theme }) => ({
-  backgroundColor: theme.palette.action.hover,
-  minHeight: '0 !important',
-  padding: '0 !important',
-  margin: '0',
-  '& .MuiInputBase-input': {
-    padding: '0 !important',
-    width: '130px',
-    // '::-webkit-input-placeholder': {
-    //   fontStyle: 'italic',
-    // },
-    // ':-moz-placeholder': {
-    //   fontStyle: 'italic',
-    // },
-    // '::-moz-placeholder': {
-    //   fontStyle: 'italic',
-    // },
-    // ':-ms-input-placeholder': {
-    //   fontStyle: 'italic',
-    // },
-  },
-  '& .MuiInputAdornment-root .MuiIconButton-root': {
-    padding: 0,
-  },
-}))
-
 export default function BudgetTable(props) {
   let isLoading = false
   const theme = useTheme()
@@ -137,6 +102,7 @@ export default function BudgetTable(props) {
     [categoryGroupsSelectors.selectAll, categoriesSelectors.selectAll, selectCategoryMonths],
     (groups, categories, categoryMonths) => {
       let retval = []
+      const underfunded = isPositive(budgetMonth.underfunded) && !isZero(budgetMonth.underfunded)
       groups.map(group => {
         if (group.internal) {
           return
@@ -184,6 +150,7 @@ export default function BudgetTable(props) {
 
           if (category.trackingAccountId) {
             groupRow.trackingAccountId = true
+            groupRow.underfunded = underfunded
           }
 
           groupRow.subRows.push({
@@ -192,6 +159,7 @@ export default function BudgetTable(props) {
             order: category.order,
             groupId: group.id,
             trackingAccountId: category.trackingAccountId,
+            underfunded,
           })
         }
 
@@ -398,7 +366,7 @@ export default function BudgetTable(props) {
 
             let color = 'default'
             if (props.row.original.trackingAccountId) {
-              if (isPositive(budgetMonth.underfunded) && !isZero(budgetMonth.underfunded)) {
+              if (props.row.original.underfunded) {
                 color = 'warning'
               } else if (isZero(balance) || isNegative(balance)) {
                 color = 'default'
@@ -504,10 +472,14 @@ export default function BudgetTable(props) {
       data,
       autoResetExpanded: false,
       initialState: {
-        expanded: data.reduce((result, current, index) => {
-          result[index] = true
-          return result
-        }, {}),
+        expanded: useMemo(
+          () =>
+            data.reduce((result, current, index) => {
+              result[index] = true
+              return result
+            }, {}),
+          [],
+        ),
       },
     },
     // useGroupBy,

frontend/src/utils/Store.js

@@ -0,0 +1,4 @@
+import { createSelectorCreator, defaultMemoize } from 'reselect'
+
+// create a "selector creator" that uses lodash.isequal instead of ===
+export const createDeepEqualSelector = createSelectorCreator(defaultMemoize, _.isEqual)