diff --git a/frontend/src/components/BudgetTable/BudgetTable.js b/frontend/src/components/BudgetTable/BudgetTable.js
index a9aeea8..1aa7140 100644
--- a/frontend/src/components/BudgetTable/BudgetTable.js
+++ b/frontend/src/components/BudgetTable/BudgetTable.js
@@ -16,6 +16,7 @@ import BudgetTableHeader from './BudgetTableHeader'
import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'
import CategoryGroupForm from '../CategoryGroupForm'
import CategoryForm from '../CategoryForm'
+import Tooltip from '@mui/material/Tooltip'
export default function BudgetTable(props) {
const theme = useTheme()
@@ -240,6 +241,15 @@ export default function BudgetTable(props) {
}
}
+ // Tooltip for CC warning
+ if (rowData.trackingAccountId && color === 'warning') {
+ return (
+
+
+
+ )
+ }
+
return
}
},
@@ -324,8 +334,11 @@ export default function BudgetTable(props) {
},
EditField: props => {
const childProps = { ...props }
+
+ // This prevents console errors, can't pass these to the DOM
delete childProps.columnDef
delete childProps.rowData
+
return (
- {index % 2 === 0 ? : }
+ {index % 2 === 0 ? : }
diff --git a/frontend/src/pages/Account.js b/frontend/src/pages/Account.js
index 254d85a..850dc5e 100644
--- a/frontend/src/pages/Account.js
+++ b/frontend/src/pages/Account.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
import MaterialTable, { MTableBodyRow, MTableEditField } from "@material-table/core";
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from "react-router";
@@ -17,14 +17,12 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import LockIcon from '@mui/icons-material/Lock';
import { inputToDinero, intlFormat } from '../utils/Currency'
-import { dinero, toUnit, isZero, isPositive, isNegative, multiply } from "dinero.js";
+import { dinero, toUnit, isZero, isNegative, multiply } from "dinero.js";
import { toSnapshot } from "@dinero.js/core";
import Tooltip from '@mui/material/Tooltip'
-import { Icon } from "@mui/material";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
import Button from '@mui/material/Button';
import Popover from '@mui/material/Popover'
-import PopupState, {
+import {
usePopupState,
bindTrigger,
bindPopover,
@@ -34,7 +32,6 @@ import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/styles'
import ReconcileForm from '../components/ReconcileForm'
-import CategoryForm from '../components/CategoryForm'
export default function Account(props) {
const theme = useTheme()
@@ -290,31 +287,37 @@ export default function Account(props) {
editComponent: props => (<>>), // Doing this so that the button isn't available to click when in edit mode
render: rowData => {
let statusIcon = <>>
+ let tooltipText = ''
switch (rowData.status) {
case 0: // pending
+ tooltipText = "Pending"
statusIcon =
break
case 1: // cleared
+ tooltipText = "Cleared"
statusIcon =
break
case 2: // reconciled
+ tooltipText = "Reconciled"
statusIcon =
break
}
return (
- {
- e.stopPropagation()
- setTransactionStatus(rowData)
- }}
- color="inherit"
- >
- {statusIcon}
-
+
+ {
+ e.stopPropagation()
+ setTransactionStatus(rowData)
+ }}
+ color="inherit"
+ >
+ {statusIcon}
+
+
)
},
},
@@ -618,7 +621,13 @@ export default function Account(props) {
}}
actions={[
{
- icon: () => (),
+ icon: () => (
+
+ ),
tooltip: 'Show reconciled transactions',
isFreeAction: true,
onClick: (event) => setShowReconciled(!showReconciled)