From 9cc4b0c36f34329f1835932fa6e5bb131137458f Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 27 Oct 2021 08:09:51 +0300 Subject: [PATCH 01/56] feat(appcontext): add earnining menu item to the side nav --- src/context/AppContext.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/context/AppContext.js b/src/context/AppContext.js index f1c4bb509..dde65e84e 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -78,6 +78,13 @@ function getRoutes(user) { POLICIES.APPROVE_TREE, ]), }, + { + name: 'Earnings', + linkTo: '/earnings', + component: Growers, + icon: CompareIcon, + disabled: false, + }, { name: 'Growers', linkTo: '/growers', From 8c120492fdc02f8983b21195a3ceeded242cbd42 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 27 Oct 2021 08:22:18 +0300 Subject: [PATCH 02/56] feat(view): add earnings view component --- src/context/AppContext.js | 3 ++- src/views/EarningsView.js | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/views/EarningsView.js diff --git a/src/context/AppContext.js b/src/context/AppContext.js index dde65e84e..61d9224da 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -5,6 +5,7 @@ import axios from 'axios'; import VerifyView from '../views/VerifyView'; import Growers from '../components/Growers'; import CapturesView from '../views/CapturesView'; +import EarningsView from '../views/EarningsView'; import Account from '../components/Account'; import Home from '../components/Home'; import Users from '../components/Users'; @@ -81,7 +82,7 @@ function getRoutes(user) { { name: 'Earnings', linkTo: '/earnings', - component: Growers, + component: EarningsView, icon: CompareIcon, disabled: false, }, diff --git a/src/views/EarningsView.js b/src/views/EarningsView.js new file mode 100644 index 000000000..4b70066c7 --- /dev/null +++ b/src/views/EarningsView.js @@ -0,0 +1,12 @@ +/** + * @function + * @name EarningsView + * @description View for the earnings page + * @param {Object} props - The properties passed to the component + * @returns {React.Component} + */ +function EarningsView(props) { + return 'EarningsView works'; +} + +export default EarningsView; From 02290b4c14e3cb8dffd7fc8f4a45b0ff1c4f69c1 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 27 Oct 2021 08:43:54 +0300 Subject: [PATCH 03/56] feat(components): add earnings table component --- src/components/EarningsTable/EarningsTable.js | 15 +++++++++++++++ src/views/EarningsView.js | 5 ++++- 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/components/EarningsTable/EarningsTable.js diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js new file mode 100644 index 000000000..54df04ea1 --- /dev/null +++ b/src/components/EarningsTable/EarningsTable.js @@ -0,0 +1,15 @@ +/** + * @function + * @name EarningsTable + * @description displays table containing earnings data + * @param {object} props - component props + * @param {object} props.earnings - earnings data + * + * @returns {React.Component} earnings table + */ + +function EarningsTable() { + return 'EarningsTable Works'; +} + +export default EarningsTable; diff --git a/src/views/EarningsView.js b/src/views/EarningsView.js index 4b70066c7..f99ec053d 100644 --- a/src/views/EarningsView.js +++ b/src/views/EarningsView.js @@ -1,3 +1,6 @@ +import React from 'react'; +import EarningsTable from '../components/EarningsTable/EarningsTable'; + /** * @function * @name EarningsView @@ -6,7 +9,7 @@ * @returns {React.Component} */ function EarningsView(props) { - return 'EarningsView works'; + return ; } export default EarningsView; From 6074a7ca6609b2a1c27bfc5901719b427826205e Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 27 Oct 2021 08:51:07 +0300 Subject: [PATCH 04/56] feat(earnings table): add navbar --- src/components/EarningsTable/EarningsTable.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 54df04ea1..5c7f52244 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -1,3 +1,7 @@ +import Grid from '@material-ui/core/Grid'; +import Navbar from '../Navbar'; +import React from 'react'; + /** * @function * @name EarningsTable @@ -7,9 +11,17 @@ * * @returns {React.Component} earnings table */ - function EarningsTable() { - return 'EarningsTable Works'; + return ( + + + + + +

EarningsTable Works

+ + + ); } export default EarningsTable; From dd42b0ce40d69a5c9a84e68543f6c5d4f4e8a548 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 27 Oct 2021 20:35:39 +0300 Subject: [PATCH 05/56] feat(app context): add CreditCardIcon for the earnings side menu item --- src/context/AppContext.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/context/AppContext.js b/src/context/AppContext.js index 61d9224da..ff756ad98 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -24,6 +24,7 @@ import IconPermIdentity from '@material-ui/icons/PermIdentity'; import CategoryIcon from '@material-ui/icons/Category'; import HomeIcon from '@material-ui/icons/Home'; import CompareIcon from '@material-ui/icons/Compare'; +import CreditCardIcon from '@material-ui/icons/CreditCard'; import { GrowerProvider } from './GrowerContext'; import { session, hasPermission, POLICIES } from '../models/auth'; import api from '../api/treeTrackerApi'; @@ -83,7 +84,7 @@ function getRoutes(user) { name: 'Earnings', linkTo: '/earnings', component: EarningsView, - icon: CompareIcon, + icon: CreditCardIcon, disabled: false, }, { From be9d172a9245deec5757c8b24d7e8da4de71ef9f Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 27 Oct 2021 20:58:11 +0300 Subject: [PATCH 06/56] feat(earnings table): style side menu with css --- src/components/EarningsTable/EarningsTable.js | 67 ++++++++++++++++--- 1 file changed, 56 insertions(+), 11 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 5c7f52244..a30729ea8 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -1,6 +1,45 @@ import Grid from '@material-ui/core/Grid'; -import Navbar from '../Navbar'; import React from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; +import Menu, { MENU_WIDTH } from '../common/Menu'; + +/** + * @function + * @name styles + * @description styles for EarningsTable component + * + * @returns {Object} css classes + */ +const style = () => ({ + box: { + width: '100%', + height: '100%', + position: 'relative', + }, + menuAside: { + height: '100%', + width: MENU_WIDTH, + position: 'absolute', + left: 0, + top: 0, + }, + menu: { + height: '100%', + width: MENU_WIDTH, + overflow: 'hidden', + }, + rightBox: { + height: '100%', + position: 'absolute', + padding: '40px', + left: MENU_WIDTH, + top: 0, + right: 0, + backgroundColor: 'rgb(239, 239, 239)', + boxSizing: 'border-box', + }, +}); /** * @function @@ -8,20 +47,26 @@ import React from 'react'; * @description displays table containing earnings data * @param {object} props - component props * @param {object} props.earnings - earnings data + * @param {object} props.classes - css classes * * @returns {React.Component} earnings table */ -function EarningsTable() { +function EarningsTable(props) { + const { classes } = props; return ( - - - - - -

EarningsTable Works

- - +
+
+ + + +
+
+ +

EarningsTable Works

+ +
+
); } -export default EarningsTable; +export default withStyles(style)(EarningsTable); From 20189a2a67c4104b12b16a3489c804339160a9a2 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 27 Oct 2021 21:02:58 +0300 Subject: [PATCH 07/56] feat(earnings table): move styles to a separate file --- src/components/EarningsTable/EarningsTable.js | 42 ++----------------- .../EarningsTable/EarningsTable.styles.js | 40 ++++++++++++++++++ 2 files changed, 43 insertions(+), 39 deletions(-) create mode 100644 src/components/EarningsTable/EarningsTable.styles.js diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index a30729ea8..0a9785e75 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -2,44 +2,8 @@ import Grid from '@material-ui/core/Grid'; import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; -import Menu, { MENU_WIDTH } from '../common/Menu'; - -/** - * @function - * @name styles - * @description styles for EarningsTable component - * - * @returns {Object} css classes - */ -const style = () => ({ - box: { - width: '100%', - height: '100%', - position: 'relative', - }, - menuAside: { - height: '100%', - width: MENU_WIDTH, - position: 'absolute', - left: 0, - top: 0, - }, - menu: { - height: '100%', - width: MENU_WIDTH, - overflow: 'hidden', - }, - rightBox: { - height: '100%', - position: 'absolute', - padding: '40px', - left: MENU_WIDTH, - top: 0, - right: 0, - backgroundColor: 'rgb(239, 239, 239)', - boxSizing: 'border-box', - }, -}); +import styles from './EarningsTable.styles'; +import Menu from '../common/Menu'; /** * @function @@ -69,4 +33,4 @@ function EarningsTable(props) { ); } -export default withStyles(style)(EarningsTable); +export default withStyles(styles)(EarningsTable); diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js new file mode 100644 index 000000000..4c7283877 --- /dev/null +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -0,0 +1,40 @@ +import { MENU_WIDTH } from '../common/Menu'; + +/** + * @function + * @name styles + * @description styles for EarningsTable component + * + * @returns {Object} css classes + */ +const styles = () => ({ + box: { + width: '100%', + height: '100%', + position: 'relative', + }, + menuAside: { + height: '100%', + width: MENU_WIDTH, + position: 'absolute', + left: 0, + top: 0, + }, + menu: { + height: '100%', + width: MENU_WIDTH, + overflow: 'hidden', + }, + rightBox: { + height: '100%', + position: 'absolute', + padding: '40px', + left: MENU_WIDTH, + top: 0, + right: 0, + backgroundColor: 'rgb(239, 239, 239)', + boxSizing: 'border-box', + }, +}); + +export default styles; From f7aa91003f1fde19abf6cd5081ebc496304da44e Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 28 Oct 2021 10:40:42 +0300 Subject: [PATCH 08/56] feat(earnings top bar): add import and export buttons --- src/components/EarningsTable/EarningsTable.js | 102 +++++++++++++++--- .../EarningsTable/EarningsTable.styles.js | 44 ++++++-- 2 files changed, 122 insertions(+), 24 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 0a9785e75..0b68bf5cd 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -1,10 +1,86 @@ -import Grid from '@material-ui/core/Grid'; import React from 'react'; -import { withStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; -import styles from './EarningsTable.styles'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import GetAppIcon from '@material-ui/icons/GetApp'; +import PublishIcon from '@material-ui/icons/Publish'; +import useStyles from './EarningsTable.styles'; import Menu from '../common/Menu'; +/** + * @function + * @name EarningsLeftMenu + * @description renders left menu + * + * @param {Object} props - component props + * @param {Object} props.classes - component css classes + * @returns {React.Component} left menu + */ +function EarningsLeftMenu(props) { + const classes = useStyles(); + return ( + + + + + + ); +} + +/** + * @function + * @name EarningsTableTopar + * @description renders earnings table top bar + * + * @param {Object} props - component props + * @returns + */ +function EarningsTableTopar(props) { + const classes = useStyles(); + return ( + + + + + + + Earnings + + + + + + + + + + EXPORT + + + + + + IMPORT + + + + + + + + ); +} + /** * @function * @name EarningsTable @@ -16,21 +92,13 @@ import Menu from '../common/Menu'; * @returns {React.Component} earnings table */ function EarningsTable(props) { - const { classes } = props; + const classes = useStyles(); return ( -
-
- - - -
-
- -

EarningsTable Works

- -
-
+ + + + ); } -export default withStyles(styles)(EarningsTable); +export default EarningsTable; diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 4c7283877..4e1d46e4a 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -1,13 +1,32 @@ import { MENU_WIDTH } from '../common/Menu'; +import { makeStyles } from '@material-ui/core/styles'; /** - * @function - * @name styles + * @object + * @name EarningsTableTopBarStyles + * @description styles for EarningsTableTopBar component + */ +const earningsTableTopBarStyles = { + earningsTableTopBar: { + display: 'flex', + justifyContent: 'space-between', + }, + dowloadButton: { + color: '#86C232', + }, + + earningsTableTopBarRight: { + width: '60%', + height: '100%', + }, +}; + +/** + * @object + * @name EarningsTableStyles * @description styles for EarningsTable component - * - * @returns {Object} css classes */ -const styles = () => ({ +const earningsTableStyles = { box: { width: '100%', height: '100%', @@ -35,6 +54,17 @@ const styles = () => ({ backgroundColor: 'rgb(239, 239, 239)', boxSizing: 'border-box', }, -}); +}; + +/** + * @function + * @name useStyles + * @description hook that combines all the styles + * @returns {object} styles + */ +const useStyles = makeStyles(() => ({ + ...earningsTableStyles, + ...earningsTableTopBarStyles, +})); -export default styles; +export default useStyles; From cf6e67054968843886822268dc92a1e7bd2d9e05 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 28 Oct 2021 21:24:01 +0300 Subject: [PATCH 09/56] feat(earnings top bar): style the title --- src/components/EarningsTable/EarningsTable.js | 47 ++----------------- .../EarningsTable/EarningsTable.styles.js | 35 +------------- 2 files changed, 6 insertions(+), 76 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 0b68bf5cd..bf8231a04 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -2,8 +2,6 @@ import React from 'react'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import GetAppIcon from '@material-ui/icons/GetApp'; -import PublishIcon from '@material-ui/icons/Publish'; import useStyles from './EarningsTable.styles'; import Menu from '../common/Menu'; @@ -19,7 +17,7 @@ import Menu from '../common/Menu'; function EarningsLeftMenu(props) { const classes = useStyles(); return ( - + @@ -38,45 +36,8 @@ function EarningsLeftMenu(props) { function EarningsTableTopar(props) { const classes = useStyles(); return ( - - - - - - - Earnings - - - - - - - - - - EXPORT - - - - - - IMPORT - - - - - - + + Earnings ); } @@ -94,7 +55,7 @@ function EarningsTableTopar(props) { function EarningsTable(props) { const classes = useStyles(); return ( - + diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 4e1d46e4a..143b6f029 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -7,17 +7,8 @@ import { makeStyles } from '@material-ui/core/styles'; * @description styles for EarningsTableTopBar component */ const earningsTableTopBarStyles = { - earningsTableTopBar: { - display: 'flex', - justifyContent: 'space-between', - }, - dowloadButton: { - color: '#86C232', - }, - - earningsTableTopBarRight: { - width: '60%', - height: '100%', + earningsTableTopBarTitle: { + paddingTop: '25px', }, }; @@ -27,33 +18,11 @@ const earningsTableTopBarStyles = { * @description styles for EarningsTable component */ const earningsTableStyles = { - box: { - width: '100%', - height: '100%', - position: 'relative', - }, - menuAside: { - height: '100%', - width: MENU_WIDTH, - position: 'absolute', - left: 0, - top: 0, - }, menu: { height: '100%', width: MENU_WIDTH, overflow: 'hidden', }, - rightBox: { - height: '100%', - position: 'absolute', - padding: '40px', - left: MENU_WIDTH, - top: 0, - right: 0, - backgroundColor: 'rgb(239, 239, 239)', - boxSizing: 'border-box', - }, }; /** From 85bd058ff814356ada91dea34e9c43999b030cde Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 28 Oct 2021 21:50:30 +0300 Subject: [PATCH 10/56] feat(earnings table): display earnings table filled with dummy data --- src/components/EarningsTable/EarningsTable.js | 54 ++++++++++++++++--- .../EarningsTable/EarningsTable.styles.js | 8 +-- src/views/EarningsView.js | 6 ++- 3 files changed, 56 insertions(+), 12 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index bf8231a04..66874564f 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -1,6 +1,11 @@ import React from 'react'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; +import Table from '@material-ui/core/Table'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import TableCell from '@material-ui/core/TableCell'; +import TableBody from '@material-ui/core/TableBody'; import Typography from '@material-ui/core/Typography'; import useStyles from './EarningsTable.styles'; import Menu from '../common/Menu'; @@ -46,18 +51,53 @@ function EarningsTableTopar(props) { * @function * @name EarningsTable * @description displays table containing earnings data - * @param {object} props - component props - * @param {object} props.earnings - earnings data - * @param {object} props.classes - css classes - * * @returns {React.Component} earnings table */ -function EarningsTable(props) { - const classes = useStyles(); +function EarningsTable() { return ( - + + + + + + Id + Grower + Funder + Amount + Payment System + Effective Payment Date + + + + + 1 + Grower 1 + Funder 1 + $100 + Payment System 1 + 01/01/2019 + + + 2 + Grower 2 + Funder 2 + $100 + Payment System 2 + 01/02/2019 + + + 3 + Grower 3 + Funder 3 + $100 + Payment System 3 + 03/01/2019 + + +
+ ); } diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 143b6f029..d17558b0f 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -14,10 +14,10 @@ const earningsTableTopBarStyles = { /** * @object - * @name EarningsTableStyles - * @description styles for EarningsTable component + * @name EarningsLeftMenu + * @description styles for EarningsLeftMenu component */ -const earningsTableStyles = { +const earningsLeftMenuStyles = { menu: { height: '100%', width: MENU_WIDTH, @@ -32,7 +32,7 @@ const earningsTableStyles = { * @returns {object} styles */ const useStyles = makeStyles(() => ({ - ...earningsTableStyles, + ...earningsLeftMenuStyles, ...earningsTableTopBarStyles, })); diff --git a/src/views/EarningsView.js b/src/views/EarningsView.js index f99ec053d..582feb24c 100644 --- a/src/views/EarningsView.js +++ b/src/views/EarningsView.js @@ -1,5 +1,6 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import EarningsTable from '../components/EarningsTable/EarningsTable'; +import { documentTitle } from '../common/variables'; /** * @function @@ -9,6 +10,9 @@ import EarningsTable from '../components/EarningsTable/EarningsTable'; * @returns {React.Component} */ function EarningsView(props) { + useEffect(() => { + document.title = `Earnings - ${documentTitle}`; // change the document title + }, []); return ; } From 223764a72766f7f9db415ad3095db26c75129dc2 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 28 Oct 2021 23:39:08 +0300 Subject: [PATCH 11/56] feat(earnings table): display earnings table with dummy data --- src/components/EarningsTable/EarningsTable.js | 63 ++++++++++++------- .../EarningsTable/EarningsTable.styles.js | 18 +++++- 2 files changed, 57 insertions(+), 24 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 66874564f..37537ab02 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -6,6 +6,8 @@ import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; +import TableFooter from '@material-ui/core/TableFooter'; +import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import useStyles from './EarningsTable.styles'; import Menu from '../common/Menu'; @@ -35,10 +37,9 @@ function EarningsLeftMenu(props) { * @name EarningsTableTopar * @description renders earnings table top bar * - * @param {Object} props - component props * @returns */ -function EarningsTableTopar(props) { +function EarningsTableTopar() { const classes = useStyles(); return ( @@ -54,48 +55,64 @@ function EarningsTableTopar(props) { * @returns {React.Component} earnings table */ function EarningsTable() { + const classes = useStyles(); return ( - + Id - Grower - Funder - Amount - Payment System - Effective Payment Date + Grower + Funder + Amount + Payment System + Effective Payment Date 1 - Grower 1 - Funder 1 - $100 - Payment System 1 - 01/01/2019 + Grower 1 + Funder 1 + $100 + Payment System 1 + 01/01/2019 2 - Grower 2 - Funder 2 - $100 - Payment System 2 - 01/02/2019 + Grower 2 + Funder 2 + $100 + Payment System 2 + 01/02/2019 3 - Grower 3 - Funder 3 - $100 - Payment System 3 - 03/01/2019 + Grower 3 + Funder 3 + $100 + Payment System 3 + 03/01/2019 + + {}} + onChangeRowsPerPage={() => {}} + SelectProps={{ + inputProps: { 'aria-label': 'rows per page' }, + native: true, + }} + /> +
diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index d17558b0f..2e566890c 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core/styles'; */ const earningsTableTopBarStyles = { earningsTableTopBarTitle: { - paddingTop: '25px', + padding: '25px 0 25px 0', }, }; @@ -25,6 +25,21 @@ const earningsLeftMenuStyles = { }, }; +/** + * @object + * @name EarningsTableStyles + * @description styles for EarningsTableStyles component + */ +const earningsTableStyles = { + earningsTableRightContents: { + width: '80%', + }, + + root: { + borderBottom: 'none', + }, +}; + /** * @function * @name useStyles @@ -34,6 +49,7 @@ const earningsLeftMenuStyles = { const useStyles = makeStyles(() => ({ ...earningsLeftMenuStyles, ...earningsTableTopBarStyles, + ...earningsTableStyles, })); export default useStyles; From 303c64e1a0ae0206b37d51779c9d6bfd2a3c07f4 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Fri, 29 Oct 2021 08:41:46 +0300 Subject: [PATCH 12/56] feat(treetrackerapi): add getEarnings api --- src/api/treeTrackerApi.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js index 0ca6d7ede..8691a8217 100644 --- a/src/api/treeTrackerApi.js +++ b/src/api/treeTrackerApi.js @@ -174,6 +174,26 @@ export default { .then(handleResponse) .catch(handleError); }, + + /** + * @function + * @name getEarnings + * @description get earnings + * + * @returns {Array} - list of earnings + */ + getEarnings() { + const query = `${process.env.REACT_APP_API_ROOT}/api/earnings`; + return fetch(query, { + method: 'GET', + headers: { + 'content-type': 'application/json', + Authorization: session.token, + }, + }) + .then(handleResponse) + .catch(handleError); + }, /* * get species by id */ From 97f48fafdee8a50219e0f27c981ea293cbf880f9 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Fri, 29 Oct 2021 10:17:02 +0300 Subject: [PATCH 13/56] feat(earnings table): style table header --- src/components/EarningsTable/EarningsTable.js | 45 ++++++++++++++----- .../EarningsTable/EarningsTable.styles.js | 8 ++++ 2 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 37537ab02..40fc7d443 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -6,6 +6,7 @@ import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; +import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import TableFooter from '@material-ui/core/TableFooter'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; @@ -43,11 +44,17 @@ function EarningsTableTopar() { const classes = useStyles(); return ( - Earnings + Earnings ); } +/** + * @Array + * @name earnings table header columns + */ +const headerColumns = ['Id', 'Grower', 'Funder', 'Amount', 'Payment System']; + /** * @function * @name EarningsTable @@ -56,22 +63,38 @@ function EarningsTableTopar() { */ function EarningsTable() { const classes = useStyles(); + + /** + * @function + * @name renderTableHeaderColumns + * @description renders table header columns + * + * @param {Array} columns - table header columns + * @returns {JSX} table header columns + */ + const renderTableHeaderColumns = (columns) => ( + + {columns.map((column, i) => ( + + {column} + + ))} + + + Effective Payment Date{' '} + + + + + ); + return ( - - - Id - Grower - Funder - Amount - Payment System - Effective Payment Date - - + {renderTableHeaderColumns(headerColumns)} 1 diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 2e566890c..6c3ac1b52 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -35,6 +35,14 @@ const earningsTableStyles = { width: '80%', }, + earningsTableHeader: { + borderBottom: '2px solid #e0e0e0', + }, + + infoIcon: { + color: '#86C232', + }, + root: { borderBottom: 'none', }, From e02d5542fd9630845efa6c7569cd6b8719acf094 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sun, 31 Oct 2021 10:16:41 +0300 Subject: [PATCH 14/56] refactor(earnings table): dynamically displaying growers header and rows --- src/components/EarningsTable/EarningsTable.js | 122 ++++++++++++------ 1 file changed, 83 insertions(+), 39 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 40fc7d443..0069b6445 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -13,6 +13,33 @@ import Typography from '@material-ui/core/Typography'; import useStyles from './EarningsTable.styles'; import Menu from '../common/Menu'; +/** + * @function + * @name GrowersTablePagination + * @description renders table pagination + * + * @returns {React.Component} growers table pagination + */ +const GrowersTablePagination = () => { + const classes = useStyles(); + + return ( + {}} + onChangeRowsPerPage={() => {}} + SelectProps={{ + inputProps: { 'aria-label': 'rows per page' }, + native: true, + }} + /> + ); +}; + /** * @function * @name EarningsLeftMenu @@ -54,6 +81,32 @@ function EarningsTableTopar() { * @name earnings table header columns */ const headerColumns = ['Id', 'Grower', 'Funder', 'Amount', 'Payment System']; +const growers = [ + { + id: 1, + name: 'Grower 1', + funder: 'Funder 1', + amount: '$100', + paymentSystem: 'Payment System 1', + effectivePaymentDate: '01/01/2019', + }, + { + id: 2, + name: 'Grower 2', + funder: 'Funder 2', + amount: '$100', + paymentSystem: 'Payment System 2', + effectivePaymentDate: '01/02/2019', + }, + { + id: 3, + name: 'Grower 3', + funder: 'Funder 3', + amount: '$100', + paymentSystem: 'Payment System 3', + effectivePaymentDate: '03/01/2019', + }, +]; /** * @function @@ -88,6 +141,34 @@ function EarningsTable() { ); + /** + * @function + * @name renderTableBodyRowCells + * @description renders table body row cells + * @param {Object} grower - grower instance to render + * @returns {JSX} table body row cells + */ + const renderTableBodyRowCells = (grower) => ( + + {grower.id} + {grower.name} + {grower.funder} + {grower.amount} + {grower.paymentSystem} + {grower.effectivePaymentDate} + + ); + + /** + * @function + * @name renderTableBodyRows + * @description renders table body rows + * @param {Array} growers - growers to render + * @returns {JSX} table body rows + */ + const renderTableBodyRows = (growers) => + growers.map((grower) => renderTableBodyRowCells(grower)); + return ( @@ -95,46 +176,9 @@ function EarningsTable() {
{renderTableHeaderColumns(headerColumns)} - - - 1 - Grower 1 - Funder 1 - $100 - Payment System 1 - 01/01/2019 - - - 2 - Grower 2 - Funder 2 - $100 - Payment System 2 - 01/02/2019 - - - 3 - Grower 3 - Funder 3 - $100 - Payment System 3 - 03/01/2019 - - + {renderTableBodyRows(growers)} - {}} - onChangeRowsPerPage={() => {}} - SelectProps={{ - inputProps: { 'aria-label': 'rows per page' }, - native: true, - }} - /> +
From d4e836122521e83ea46c31b82ccfcfd70a31d4fa Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sun, 31 Oct 2021 10:44:13 +0300 Subject: [PATCH 15/56] feat(earnings table): make renderTableHeaderColumns function completely dynamic --- src/components/EarningsTable/EarningsTable.js | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 0069b6445..aaf8f9786 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -80,7 +80,14 @@ function EarningsTableTopar() { * @Array * @name earnings table header columns */ -const headerColumns = ['Id', 'Grower', 'Funder', 'Amount', 'Payment System']; +const headerColumns = [ + 'Id', + 'Grower', + 'Funder', + 'Amount', + 'Payment System', + 'Effective Payment Date', +]; const growers = [ { id: 1, @@ -129,15 +136,14 @@ function EarningsTable() { {columns.map((column, i) => ( - {column} + + {column} + {i === columns.length - 1 && ( + + )} + ))} - - - Effective Payment Date{' '} - - - ); From 369fbdeedf87aee31cb9c3b9b735311cc795cb7a Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sun, 31 Oct 2021 11:04:57 +0300 Subject: [PATCH 16/56] feat(earnings table): style infoIcon horizontally align with effective date column --- src/components/EarningsTable/EarningsTable.styles.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 6c3ac1b52..c4c94d123 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -41,6 +41,9 @@ const earningsTableStyles = { infoIcon: { color: '#86C232', + position: 'absolute', + top: '11.6%', + right: '3%', }, root: { From 4b8aaf9747472619d1cb36f5504e607452343bbe Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 1 Nov 2021 00:04:19 +0300 Subject: [PATCH 17/56] feat(earnings table): customize earnings table pagination ui --- src/components/EarningsTable/EarningsTable.js | 60 ++++++++++++------- .../EarningsTable/EarningsTable.styles.js | 10 +++- 2 files changed, 49 insertions(+), 21 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index aaf8f9786..815cbe801 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -26,7 +26,7 @@ const GrowersTablePagination = () => { return ( ); - /** - * @function - * @name renderTableBodyRowCells - * @description renders table body row cells - * @param {Object} grower - grower instance to render - * @returns {JSX} table body row cells - */ - const renderTableBodyRowCells = (grower) => ( - - {grower.id} - {grower.name} - {grower.funder} - {grower.amount} - {grower.paymentSystem} - {grower.effectivePaymentDate} - - ); - /** * @function * @name renderTableBodyRows @@ -173,7 +155,45 @@ function EarningsTable() { * @returns {JSX} table body rows */ const renderTableBodyRows = (growers) => - growers.map((grower) => renderTableBodyRowCells(grower)); + growers.map((grower, i) => ( + + + {grower.id} + + + {grower.name} + + + {grower.funder} + + + {grower.amount} + + + {grower.paymentSystem} + + + {grower.effectivePaymentDate} + + + )); return ( diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index c4c94d123..8123a4747 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -47,7 +47,15 @@ const earningsTableStyles = { }, root: { - borderBottom: 'none', + border: 'none', + }, + selectRoot: { + marginRight: '76%', + position: 'relative', + right: '10%', + border: '1px solid #e0e0e0', + borderRadius: '2px', + padding: '4px', }, }; From 585da9f6a4a20415433bb2c0aa4ba97757ce46cd Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 1 Nov 2021 09:00:18 +0300 Subject: [PATCH 18/56] feat(earnings table): remove full colon on rows per page text --- src/components/EarningsTable/EarningsTable.js | 1 + src/components/EarningsTable/EarningsTable.styles.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 815cbe801..978c2eccc 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -28,6 +28,7 @@ const GrowersTablePagination = () => { count={10} classes={{ selectRoot: classes.selectRoot, root: classes.root }} rowsPerPageOptions={[5, 10, 20, { label: 'All', value: -1 }]} + labelRowsPerPage="Rows per page" page={1} rowsPerPage={5} onChangePage={() => {}} diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 8123a4747..ea1f3476b 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -54,7 +54,7 @@ const earningsTableStyles = { position: 'relative', right: '10%', border: '1px solid #e0e0e0', - borderRadius: '2px', + borderRadius: '3px', padding: '4px', }, }; From 9f19aa959750397e506ab9035218e4f9ea75dc48 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 3 Nov 2021 07:56:26 +0300 Subject: [PATCH 19/56] feat(tree tracker api): change earnings api end point --- src/api/treeTrackerApi.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js index 8691a8217..47b72092c 100644 --- a/src/api/treeTrackerApi.js +++ b/src/api/treeTrackerApi.js @@ -183,7 +183,7 @@ export default { * @returns {Array} - list of earnings */ getEarnings() { - const query = `${process.env.REACT_APP_API_ROOT}/api/earnings`; + const query = `https://dev-k8s.treetracker.org/earnings`; return fetch(query, { method: 'GET', headers: { From 975eac7b938eab4b62e7e0515af4ebd3ade8f1a4 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 3 Nov 2021 08:32:41 +0300 Subject: [PATCH 20/56] refactor(earnings table component): rename growers to earnings --- src/components/EarningsTable/EarningsTable.js | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 978c2eccc..5d685d253 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -18,9 +18,9 @@ import Menu from '../common/Menu'; * @name GrowersTablePagination * @description renders table pagination * - * @returns {React.Component} growers table pagination + * @returns {React.Component} earnings table pagination */ -const GrowersTablePagination = () => { +const EarningsTablePagination = () => { const classes = useStyles(); return ( @@ -89,7 +89,7 @@ const headerColumns = [ 'Payment System', 'Effective Payment Date', ]; -const growers = [ +const earnings = [ { id: 1, name: 'Grower 1', @@ -152,46 +152,46 @@ function EarningsTable() { * @function * @name renderTableBodyRows * @description renders table body rows - * @param {Array} growers - growers to render + * @param {Array} earnings - earnings to render * @returns {JSX} table body rows */ - const renderTableBodyRows = (growers) => - growers.map((grower, i) => ( - + const renderTableBodyRows = (earnings) => + earnings.map((earning, i) => ( + - {grower.id} + {earning.id} - {grower.name} + {earning.name} - {grower.funder} + {earning.funder} - {grower.amount} + {earning.amount} - {grower.paymentSystem} + {earning.paymentSystem} - {grower.effectivePaymentDate} + {earning.effectivePaymentDate} )); @@ -203,9 +203,9 @@ function EarningsTable() { {renderTableHeaderColumns(headerColumns)} - {renderTableBodyRows(growers)} + {renderTableBodyRows(earnings)} - +
From b77baa127bdc033c639e5c22e804c91b34d159ed Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 3 Nov 2021 09:38:56 +0300 Subject: [PATCH 21/56] feat(earning table top bar): add and style import export buttons --- src/components/EarningsTable/EarningsTable.js | 37 +++++++++++++++--- .../EarningsTable/EarningsTable.styles.js | 39 +++++++++++++++---- 2 files changed, 63 insertions(+), 13 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 5d685d253..ec06161d9 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -7,6 +7,8 @@ import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import GetAppIcon from '@material-ui/icons/GetApp'; +import PublishIcon from '@material-ui/icons/Publish'; import TableFooter from '@material-ui/core/TableFooter'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; @@ -15,7 +17,7 @@ import Menu from '../common/Menu'; /** * @function - * @name GrowersTablePagination + * @name EarningsTablePagination * @description renders table pagination * * @returns {React.Component} earnings table pagination @@ -46,11 +48,9 @@ const EarningsTablePagination = () => { * @name EarningsLeftMenu * @description renders left menu * - * @param {Object} props - component props - * @param {Object} props.classes - component css classes * @returns {React.Component} left menu */ -function EarningsLeftMenu(props) { +function EarningsLeftMenu() { const classes = useStyles(); return ( @@ -71,8 +71,33 @@ function EarningsLeftMenu(props) { function EarningsTableTopar() { const classes = useStyles(); return ( - - Earnings + + + + Earnings + + + + + + + EXPORT + + + + + + IMPORT + + + + + ); } diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index ea1f3476b..99d077b22 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -2,18 +2,42 @@ import { MENU_WIDTH } from '../common/Menu'; import { makeStyles } from '@material-ui/core/styles'; /** - * @object + * @constant + * @type {object} + * @description possible colors for earning table component + * @see {@link https://colors.artyclick.com/color-name-finder/} - to learn how + * color names are generated + */ +const COLORS = { + appleGreen: '#86C232', + lavenderPinocchio: '#E0E0E0', +}; + +/** + * @constant + * @type {object} * @name EarningsTableTopBarStyles * @description styles for EarningsTableTopBar component */ const earningsTableTopBarStyles = { earningsTableTopBarTitle: { - padding: '25px 0 25px 0', + // padding: '25px 0 25px 0', + }, + actionButton: { + color: COLORS.appleGreen, + }, + actionButtonIcon: { + position: 'relative', + top: '4px', + }, + topBarActions: { + width: '60%', }, }; /** - * @object + * @constant + * @type {object} * @name EarningsLeftMenu * @description styles for EarningsLeftMenu component */ @@ -26,7 +50,8 @@ const earningsLeftMenuStyles = { }; /** - * @object + * @constant + * @type {object} * @name EarningsTableStyles * @description styles for EarningsTableStyles component */ @@ -36,11 +61,11 @@ const earningsTableStyles = { }, earningsTableHeader: { - borderBottom: '2px solid #e0e0e0', + borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, infoIcon: { - color: '#86C232', + color: `${COLORS.appleGreen}`, position: 'absolute', top: '11.6%', right: '3%', @@ -53,7 +78,7 @@ const earningsTableStyles = { marginRight: '76%', position: 'relative', right: '10%', - border: '1px solid #e0e0e0', + border: `1px solid ${COLORS.lavenderPinocchio}`, borderRadius: '3px', padding: '4px', }, From 487871a3f2542055b520e0426dd4d2e64fe7529e Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 3 Nov 2021 10:00:07 +0300 Subject: [PATCH 22/56] feat(earnings table columns): relatively position infoIcon --- src/components/EarningsTable/EarningsTable.styles.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 99d077b22..b6ed75df7 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -66,9 +66,9 @@ const earningsTableStyles = { infoIcon: { color: `${COLORS.appleGreen}`, - position: 'absolute', - top: '11.6%', - right: '3%', + position: 'relative', + top: '5px', + left: '5px', }, root: { From 537915025c2ae04e674729b490d2a165c30b3145 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Fri, 5 Nov 2021 08:55:38 +0300 Subject: [PATCH 23/56] feat(earnings table): call earnings api inside useEffect --- src/api/treeTrackerApi.js | 2 +- src/components/EarningsTable/EarningsTable.js | 25 +++++++++++++------ src/views/EarningsView.js | 6 ++--- 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js index 47b72092c..5a1377960 100644 --- a/src/api/treeTrackerApi.js +++ b/src/api/treeTrackerApi.js @@ -183,7 +183,7 @@ export default { * @returns {Array} - list of earnings */ getEarnings() { - const query = `https://dev-k8s.treetracker.org/earnings`; + const query = `https://dev-k8s.treetracker.org/earnings/earnings`; return fetch(query, { method: 'GET', headers: { diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index ec06161d9..4beae1800 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; import Table from '@material-ui/core/Table'; @@ -9,9 +9,9 @@ import TableBody from '@material-ui/core/TableBody'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import GetAppIcon from '@material-ui/icons/GetApp'; import PublishIcon from '@material-ui/icons/Publish'; -import TableFooter from '@material-ui/core/TableFooter'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; +import API from '../../api/treeTrackerApi'; import useStyles from './EarningsTable.styles'; import Menu from '../common/Menu'; @@ -150,6 +150,15 @@ const earnings = [ function EarningsTable() { const classes = useStyles(); + async function fetchEarnings() { + const response = await API.getEarnings(); + console.log('earnings loaded---------------', response); + } + + useEffect(() => { + fetchEarnings(); + }, []); + /** * @function * @name renderTableHeaderColumns @@ -161,7 +170,7 @@ function EarningsTable() { const renderTableHeaderColumns = (columns) => ( {columns.map((column, i) => ( - + {column} {i === columns.length - 1 && ( @@ -228,10 +237,12 @@ function EarningsTable() { {renderTableHeaderColumns(headerColumns)} - {renderTableBodyRows(earnings)} - - - + + {renderTableBodyRows(earnings)} + + + +
diff --git a/src/views/EarningsView.js b/src/views/EarningsView.js index 582feb24c..30957e971 100644 --- a/src/views/EarningsView.js +++ b/src/views/EarningsView.js @@ -6,12 +6,12 @@ import { documentTitle } from '../common/variables'; * @function * @name EarningsView * @description View for the earnings page - * @param {Object} props - The properties passed to the component + * * @returns {React.Component} */ -function EarningsView(props) { +function EarningsView() { useEffect(() => { - document.title = `Earnings - ${documentTitle}`; // change the document title + document.title = `Earnings - ${documentTitle}`; }, []); return ; } From 5bd2eabcc16352ed8313b1a71c6de60fccbcceeb Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 8 Nov 2021 09:57:57 +0300 Subject: [PATCH 24/56] feat(earnings view): move side navigation menu to earnings view --- package-lock.json | 4 +- src/components/EarningsTable/EarningsTable.js | 75 +++++++------------ .../EarningsTable/EarningsTable.styles.js | 29 ++----- src/context/AppContext.js | 2 +- src/views/EarningsView.js | 19 ----- src/views/EarningsView/EarningsView.js | 53 +++++++++++++ src/views/EarningsView/EarningsView.styles.js | 35 +++++++++ 7 files changed, 123 insertions(+), 94 deletions(-) delete mode 100644 src/views/EarningsView.js create mode 100644 src/views/EarningsView/EarningsView.js create mode 100644 src/views/EarningsView/EarningsView.styles.js diff --git a/package-lock.json b/package-lock.json index b65fdd1a9..1ec422cc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "treetracker-admin-client", - "version": "1.24.0", + "version": "1.25.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "treetracker-admin-client", - "version": "1.24.0", + "version": "1.25.1", "dependencies": { "@date-io/date-fns": "^1.3.13", "@material-ui/core": "^4.9.10", diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 4beae1800..0ab56819e 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -1,11 +1,10 @@ import React, { useEffect } from 'react'; -import Paper from '@material-ui/core/Paper'; -import Grid from '@material-ui/core/Grid'; import Table from '@material-ui/core/Table'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; +import Grid from '@material-ui/core/Grid'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import GetAppIcon from '@material-ui/icons/GetApp'; import PublishIcon from '@material-ui/icons/Publish'; @@ -13,7 +12,6 @@ import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import API from '../../api/treeTrackerApi'; import useStyles from './EarningsTable.styles'; -import Menu from '../common/Menu'; /** * @function @@ -28,7 +26,10 @@ const EarningsTablePagination = () => { return ( { ); }; -/** - * @function - * @name EarningsLeftMenu - * @description renders left menu - * - * @returns {React.Component} left menu - */ -function EarningsLeftMenu() { - const classes = useStyles(); - return ( - - - - - - ); -} - /** * @function * @name EarningsTableTopar @@ -71,30 +54,23 @@ function EarningsLeftMenu() { function EarningsTableTopar() { const classes = useStyles(); return ( - - - - Earnings - - - - - - - EXPORT - - - - - - IMPORT - - + + + Earnings + + + + + + + EXPORT + + + + + + IMPORT + @@ -231,10 +207,11 @@ function EarningsTable() { )); return ( - - - + + + + {renderTableHeaderColumns(headerColumns)} diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index b6ed75df7..f0cfd833c 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -38,28 +38,13 @@ const earningsTableTopBarStyles = { /** * @constant * @type {object} - * @name EarningsLeftMenu - * @description styles for EarningsLeftMenu component - */ -const earningsLeftMenuStyles = { - menu: { - height: '100%', - width: MENU_WIDTH, - overflow: 'hidden', - }, -}; - -/** - * @constant - * @type {object} - * @name EarningsTableStyles + * @name earningsTableStyles * @description styles for EarningsTableStyles component */ const earningsTableStyles = { - earningsTableRightContents: { - width: '80%', + earningsTable: { + padding: '20px 0 0 20px', }, - earningsTableHeader: { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, @@ -71,13 +56,12 @@ const earningsTableStyles = { left: '5px', }, - root: { + earningsTablePagination: { border: 'none', + paddingRight: '0px', }, selectRoot: { - marginRight: '76%', - position: 'relative', - right: '10%', + marginRight: '72%', border: `1px solid ${COLORS.lavenderPinocchio}`, borderRadius: '3px', padding: '4px', @@ -91,7 +75,6 @@ const earningsTableStyles = { * @returns {object} styles */ const useStyles = makeStyles(() => ({ - ...earningsLeftMenuStyles, ...earningsTableTopBarStyles, ...earningsTableStyles, })); diff --git a/src/context/AppContext.js b/src/context/AppContext.js index 8e6e6e9cd..0cbb174ae 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -5,7 +5,7 @@ import axios from 'axios'; import VerifyView from '../views/VerifyView'; import Growers from '../components/Growers'; import CapturesView from '../views/CapturesView'; -import EarningsView from '../views/EarningsView'; +import EarningsView from '../views/EarningsView/EarningsView'; import Account from '../components/Account'; import Home from '../components/Home/Home'; import Users from '../components/Users'; diff --git a/src/views/EarningsView.js b/src/views/EarningsView.js deleted file mode 100644 index 30957e971..000000000 --- a/src/views/EarningsView.js +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useEffect } from 'react'; -import EarningsTable from '../components/EarningsTable/EarningsTable'; -import { documentTitle } from '../common/variables'; - -/** - * @function - * @name EarningsView - * @description View for the earnings page - * - * @returns {React.Component} - */ -function EarningsView() { - useEffect(() => { - document.title = `Earnings - ${documentTitle}`; - }, []); - return ; -} - -export default EarningsView; diff --git a/src/views/EarningsView/EarningsView.js b/src/views/EarningsView/EarningsView.js new file mode 100644 index 000000000..fd2271c32 --- /dev/null +++ b/src/views/EarningsView/EarningsView.js @@ -0,0 +1,53 @@ +import React, { useEffect } from 'react'; +import Paper from '@material-ui/core/Paper'; +import Grid from '@material-ui/core/Grid'; +import EarningsTable from '../../components/EarningsTable/EarningsTable'; +import { documentTitle } from '../../common/variables'; +import Menu from '../../components/common/Menu'; +import useStyles from './EarningsView.styles'; + +/** + * @function + * @name EarningsLeftMenu + * @description renders left menu + * + * @returns {React.Component} left menu + */ +function EarningsLeftMenu() { + const classes = useStyles(); + + return ( + <> + + + + + ); +} + +/** + * @function + * @name EarningsView + * @description View for the earnings page + * + * @returns {React.Component} + */ +function EarningsView() { + const classes = useStyles(); + + useEffect(() => { + document.title = `Earnings - ${documentTitle}`; + }, []); + return ( + + + + + + + + + ); +} + +export default EarningsView; diff --git a/src/views/EarningsView/EarningsView.styles.js b/src/views/EarningsView/EarningsView.styles.js new file mode 100644 index 000000000..1baeed954 --- /dev/null +++ b/src/views/EarningsView/EarningsView.styles.js @@ -0,0 +1,35 @@ +import { makeStyles } from '@material-ui/core/styles'; + +/** + * @constant + * @name earningsViewStyles + * @description styles for earnings view + * @type {object} + */ +const earningsViewLeftMenu = { + earningsViewLeftMenu: { + height: '100%', + }, +}; + +/** + * @constant + * @name earningsViewStyles + * @description styles for earnings view + * @type {object} + */ +const earningsViewStyles = {}; + +/** + * @function + * @name useStyles + * @description combines and makes styles for earnings view component + * + * @returns {object} earnings view styles + */ +const useStyles = makeStyles(() => ({ + ...earningsViewStyles, + ...earningsViewLeftMenu, +})); + +export default useStyles; From 40364b7e6436c3dee506e299249c46a39194b6ff Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 8 Nov 2021 13:01:17 +0300 Subject: [PATCH 25/56] feat(earnings table): load earnings from mock api --- public/earnings.json | 65 ++++++++++++++++ src/api/treeTrackerApi.js | 36 +-------- src/components/EarningsTable/EarningsTable.js | 77 ++++--------------- .../EarningsTable/EarningsTable.styles.js | 2 +- 4 files changed, 82 insertions(+), 98 deletions(-) create mode 100644 public/earnings.json diff --git a/public/earnings.json b/public/earnings.json new file mode 100644 index 000000000..b3f282352 --- /dev/null +++ b/public/earnings.json @@ -0,0 +1,65 @@ +{ + "earnings": [ + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + }, + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + }, + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + }, + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + }, + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + }, + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + }, + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + }, + { + "name": "Mohamed Sankoh", + "funder": "Environment for Africa", + "amount": "$2.34", + "paymentSystem": "Visa", + "effectivePaymentDate": "Aug 10,2021" + } + ], + "totalCount": 28, + "links": { + "prev": null, + "next": "http://dev-k8s.treetracker.org/earnings?&offset=1" + } +} diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js index 5a1377960..f1b52bd3c 100644 --- a/src/api/treeTrackerApi.js +++ b/src/api/treeTrackerApi.js @@ -98,40 +98,6 @@ export default { .then(handleResponse) .catch(handleError); }, - /* - * to rollback from a wrong approving - */ - // undoCaptureImage(id) { - // const query = `${ - // process.env.REACT_APP_API_ROOT - // }/api/${getOrganization()}trees/${id}`; - // return fetch(query, { - // method: 'PATCH', - // headers: { - // 'content-type': 'application/json', - // Authorization: session.token, - // }, - // body: JSON.stringify({ - // id: id, - // active: true, - // approved: false, - // }), - // }) - // .then(handleResponse) - // .catch(handleError); - // }, - // getUnverifiedCaptureCount() { - // const query = `${ - // process.env.REACT_APP_API_ROOT - // }/api/${getOrganization()}trees/count?where[approved]=false&where[active]=true`; - // return fetch(query, { - // headers: { - // Authorization: session.token, - // }, - // }) - // .then(handleResponse) - // .catch(handleError); - // }, getCaptureCount(filter) { const query = `${ process.env.REACT_APP_API_ROOT @@ -183,7 +149,7 @@ export default { * @returns {Array} - list of earnings */ getEarnings() { - const query = `https://dev-k8s.treetracker.org/earnings/earnings`; + const query = `earnings.json`; return fetch(query, { method: 'GET', headers: { diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 0ab56819e..41ec1b988 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import Table from '@material-ui/core/Table'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; @@ -7,7 +7,8 @@ import TableBody from '@material-ui/core/TableBody'; import Grid from '@material-ui/core/Grid'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import GetAppIcon from '@material-ui/icons/GetApp'; -import PublishIcon from '@material-ui/icons/Publish'; +import Select from '@material-ui/core/Select'; +import MenuItem from '@material-ui/core/MenuItem'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import API from '../../api/treeTrackerApi'; @@ -20,18 +21,19 @@ import useStyles from './EarningsTable.styles'; * * @returns {React.Component} earnings table pagination */ -const EarningsTablePagination = () => { +const EarningsTablePagination = (props) => { const classes = useStyles(); + const { totalCount } = props; return ( {}} @@ -56,23 +58,7 @@ function EarningsTableTopar() { return ( - Earnings - - - - - - - EXPORT - - - - - - IMPORT - - - + Earnings ); @@ -83,38 +69,11 @@ function EarningsTableTopar() { * @name earnings table header columns */ const headerColumns = [ - 'Id', 'Grower', 'Funder', 'Amount', 'Payment System', - 'Effective Payment Date', -]; -const earnings = [ - { - id: 1, - name: 'Grower 1', - funder: 'Funder 1', - amount: '$100', - paymentSystem: 'Payment System 1', - effectivePaymentDate: '01/01/2019', - }, - { - id: 2, - name: 'Grower 2', - funder: 'Funder 2', - amount: '$100', - paymentSystem: 'Payment System 2', - effectivePaymentDate: '01/02/2019', - }, - { - id: 3, - name: 'Grower 3', - funder: 'Funder 3', - amount: '$100', - paymentSystem: 'Payment System 3', - effectivePaymentDate: '03/01/2019', - }, + 'Effective Date', ]; /** @@ -125,9 +84,13 @@ const earnings = [ */ function EarningsTable() { const classes = useStyles(); + const [earnings, setEarnings] = useState([]); + const [totalCount, setTotalCount] = useState(0); async function fetchEarnings() { const response = await API.getEarnings(); + setEarnings(response.earnings); + setTotalCount(response.totalCount); console.log('earnings loaded---------------', response); } @@ -146,7 +109,7 @@ function EarningsTable() { const renderTableHeaderColumns = (columns) => ( {columns.map((column, i) => ( - + {column} {i === columns.length - 1 && ( @@ -170,35 +133,25 @@ function EarningsTable() { - {earning.id} - - {earning.name} {earning.funder} {earning.amount} {earning.paymentSystem} {earning.effectivePaymentDate} @@ -217,7 +170,7 @@ function EarningsTable() { {renderTableBodyRows(earnings)} - +
diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index f0cfd833c..5e1df3dad 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -43,7 +43,7 @@ const earningsTableTopBarStyles = { */ const earningsTableStyles = { earningsTable: { - padding: '20px 0 0 20px', + padding: '20px 0 0 40px', }, earningsTableHeader: { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, From ad1e73a5bd15bc007c68676e8c8c31f27b36b00e Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 8 Nov 2021 22:42:04 +0300 Subject: [PATCH 26/56] refactor(earnings table): put table header and body into their own components --- public/earnings.json | 32 +-- src/components/EarningsTable/EarningsTable.js | 200 +++++++++--------- 2 files changed, 115 insertions(+), 117 deletions(-) diff --git a/public/earnings.json b/public/earnings.json index b3f282352..af4d560c1 100644 --- a/public/earnings.json +++ b/public/earnings.json @@ -1,60 +1,60 @@ { "earnings": [ { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" }, { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" }, { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" }, { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" }, { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" }, { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" }, { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" }, { - "name": "Mohamed Sankoh", + "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", "paymentSystem": "Visa", - "effectivePaymentDate": "Aug 10,2021" + "effectiveDate": "Aug 10,2021" } ], "totalCount": 28, diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 41ec1b988..87502d0d6 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -6,28 +6,75 @@ import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; import Grid from '@material-ui/core/Grid'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; -import GetAppIcon from '@material-ui/icons/GetApp'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import API from '../../api/treeTrackerApi'; import useStyles from './EarningsTable.styles'; +/** + * @function + * @name EarningsTableTopar + * @description renders earnings table top bar which contains table actions(i.e. filter, export, etc) + * + * @returns + */ +function EarningsTableTopar() { + const classes = useStyles(); + return ( + + + Earnings + + + ); +} + +/** + * @function + * @name EarningsTableHead + * @description renders earnings table head columns dynamically + * @param {object} props + * @param {string} props.columns + * + * @returns {React.Component} earnings table head columns + */ +const EarningsTableHead = ({ columns }) => { + const classes = useStyles(); + + return ( + + + {columns.map((column, i) => ( + + + {column} + {i === columns.length - 1 && ( + + )} + + + ))} + + + ); +}; + /** * @function * @name EarningsTablePagination * @description renders table pagination * + * @param {object} props + * @param {string} props.total - total earnings + * * @returns {React.Component} earnings table pagination */ -const EarningsTablePagination = (props) => { +const EarningsTablePagination = ({ total }) => { const classes = useStyles(); - const { totalCount } = props; return ( { /** * @function - * @name EarningsTableTopar - * @description renders earnings table top bar + * @name EarningsTableBody + * @description renders earnings table body rows dynamically + * @param {object} props + * @param {object} props.data + * @param {string} props.columns + * @param {string} props.total * - * @returns + * @returns {React.Component} earnings table body rows */ -function EarningsTableTopar() { - const classes = useStyles(); +const EarningsTableBody = ({ data, columns, total }) => { return ( - - - Earnings - - + + {data.map((row, i) => ( + + {columns.map((column, j) => ( + + {row[column]} + + ))} + + ))} + + + + ); -} - -/** - * @Array - * @name earnings table header columns - */ -const headerColumns = [ - 'Grower', - 'Funder', - 'Amount', - 'Payment System', - 'Effective Date', -]; +}; /** * @function @@ -82,83 +129,37 @@ const headerColumns = [ * @description displays table containing earnings data * @returns {React.Component} earnings table */ -function EarningsTable() { +export default function EarningsTable() { const classes = useStyles(); const [earnings, setEarnings] = useState([]); const [totalCount, setTotalCount] = useState(0); + const headerColumns = [ + 'Grower', + 'Funder', + 'Amount', + 'Payment System', + 'Effective Date', + ]; + + const bodyColumns = [ + 'grower', + 'funder', + 'amount', + 'paymentSystem', + 'effectiveDate', + ]; + async function fetchEarnings() { const response = await API.getEarnings(); setEarnings(response.earnings); setTotalCount(response.totalCount); - console.log('earnings loaded---------------', response); } useEffect(() => { fetchEarnings(); }, []); - /** - * @function - * @name renderTableHeaderColumns - * @description renders table header columns - * - * @param {Array} columns - table header columns - * @returns {JSX} table header columns - */ - const renderTableHeaderColumns = (columns) => ( - - {columns.map((column, i) => ( - - - {column} - {i === columns.length - 1 && ( - - )} - - - ))} - - ); - - /** - * @function - * @name renderTableBodyRows - * @description renders table body rows - * @param {Array} earnings - earnings to render - * @returns {JSX} table body rows - */ - const renderTableBodyRows = (earnings) => - earnings.map((earning, i) => ( - - - {earning.name} - - - {earning.funder} - - - {earning.amount} - - - {earning.paymentSystem} - - - {earning.effectivePaymentDate} - - - )); - return ( @@ -166,17 +167,14 @@ function EarningsTable() { - {renderTableHeaderColumns(headerColumns)} - - {renderTableBodyRows(earnings)} - - - - + +
); } - -export default EarningsTable; From 38d987b0e2176604bdd72ec21c8654820bfaf23a Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 8 Nov 2021 22:45:56 +0300 Subject: [PATCH 27/56] chore(earnings table): rename totalCount to total --- src/components/EarningsTable/EarningsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 87502d0d6..7623f72c3 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -117,7 +117,7 @@ const EarningsTableBody = ({ data, columns, total }) => { ))} - + ); From 2355d8211b21072235dc15d17ce8e03e48cae3ec Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 8 Nov 2021 22:59:57 +0300 Subject: [PATCH 28/56] chore(earnings table): remove unsude MENU_WIDTH contant --- src/components/EarningsTable/EarningsTable.styles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 5e1df3dad..c01b297f1 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -1,4 +1,3 @@ -import { MENU_WIDTH } from '../common/Menu'; import { makeStyles } from '@material-ui/core/styles'; /** From bd5b0e282a7dbd14a4f34c461fd0a1e5907ff563 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Mon, 8 Nov 2021 23:07:00 +0300 Subject: [PATCH 29/56] chore(earnings view): remove unused classes object --- src/views/EarningsView/EarningsView.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/views/EarningsView/EarningsView.js b/src/views/EarningsView/EarningsView.js index fd2271c32..32f34f29c 100644 --- a/src/views/EarningsView/EarningsView.js +++ b/src/views/EarningsView/EarningsView.js @@ -33,8 +33,6 @@ function EarningsLeftMenu() { * @returns {React.Component} */ function EarningsView() { - const classes = useStyles(); - useEffect(() => { document.title = `Earnings - ${documentTitle}`; }, []); From 14a240b7c0a50cf31adcfa584820c67ab865bd33 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Tue, 9 Nov 2021 10:20:00 +0300 Subject: [PATCH 30/56] feat(earnings table): add filter button --- src/components/EarningsTable/EarningsTable.js | 51 ++++++++++++++++++- .../EarningsTable/EarningsTable.styles.js | 10 ++-- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 7623f72c3..a51314c76 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -4,8 +4,11 @@ import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; +import GetAppIcon from '@material-ui/icons/GetApp'; import Grid from '@material-ui/core/Grid'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import CardContent from '@material-ui/core/CardContent'; +import Card from '@material-ui/core/Card'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import API from '../../api/treeTrackerApi'; @@ -22,8 +25,52 @@ function EarningsTableTopar() { const classes = useStyles(); return ( - - Earnings + + + Earnings + + + + + {/* start EXPORT button */} + + + + EXPORT + + + {/* end EXPORT button */} + + {/* start FILTER button */} + + + + + + + Date Range + Oct 1 - Oct 5 + + + + + + + + + + {/* end FILTER button */} + ); diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index c01b297f1..c5ee81c3a 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -19,19 +19,21 @@ const COLORS = { * @description styles for EarningsTableTopBar component */ const earningsTableTopBarStyles = { - earningsTableTopBarTitle: { - // padding: '25px 0 25px 0', - }, actionButton: { color: COLORS.appleGreen, + cursor: 'pointer', }, actionButtonIcon: { position: 'relative', - top: '4px', + top: '2px', }, topBarActions: { width: '60%', }, + + earningsTableTopTitle: { + padding: '0px 0px 0px 10px', + }, }; /** From 739c2826fe902d78362eb1cd1e17a8d28b035ce4 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Wed, 10 Nov 2021 21:58:59 +0300 Subject: [PATCH 31/56] feat(earnings table): add date filter button --- src/components/EarningsTable/EarningsTable.js | 69 +++++++++---------- .../EarningsTable/EarningsTable.styles.js | 8 ++- 2 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index a51314c76..c264bf6a3 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -7,8 +7,8 @@ import TableBody from '@material-ui/core/TableBody'; import GetAppIcon from '@material-ui/icons/GetApp'; import Grid from '@material-ui/core/Grid'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; -import CardContent from '@material-ui/core/CardContent'; -import Card from '@material-ui/core/Card'; +import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; +import Paper from '@material-ui/core/Paper'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import API from '../../api/treeTrackerApi'; @@ -30,10 +30,12 @@ function EarningsTableTopar() { Earnings + + {/* start earning table actions */} - + {/* start EXPORT button */} - + - - - - - - Date Range - Oct 1 - Oct 5 - - - - - - - + + +
+ Date Range + Oct 1 - Oct 5 +
+ {/* end FILTER button */} + {/* end earnings table actions */} ); } @@ -208,19 +201,21 @@ export default function EarningsTable() { }, []); return ( - - - - - - - - -
+ + + + + + + + + +
+ ); diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index c5ee81c3a..275c174e1 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -40,7 +40,7 @@ const earningsTableTopBarStyles = { * @constant * @type {object} * @name earningsTableStyles - * @description styles for EarningsTableStyles component + * @description styles for EarningsTable component */ const earningsTableStyles = { earningsTable: { @@ -50,6 +50,11 @@ const earningsTableStyles = { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, + earningsTableFilterButton: { + cursor: 'pointer', + border: `1px solid ${COLORS.lavenderPinocchio}`, + }, + infoIcon: { color: `${COLORS.appleGreen}`, position: 'relative', @@ -62,7 +67,6 @@ const earningsTableStyles = { paddingRight: '0px', }, selectRoot: { - marginRight: '72%', border: `1px solid ${COLORS.lavenderPinocchio}`, borderRadius: '3px', padding: '4px', From b9739f920958983e42beb9fe7cbfd26435816be8 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 11 Nov 2021 07:33:52 +0300 Subject: [PATCH 32/56] feat(earnings table): style filter button --- src/components/EarningsTable/EarningsTable.js | 38 +++++++++---------- .../EarningsTable/EarningsTable.styles.js | 29 +++++++++++--- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index c264bf6a3..09748dd59 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -24,7 +24,7 @@ import useStyles from './EarningsTable.styles'; function EarningsTableTopar() { const classes = useStyles(); return ( - + Earnings @@ -49,11 +49,15 @@ function EarningsTableTopar() { {/* end EXPORT button */} {/* start FILTER button */} - +
- Date Range - Oct 1 - Oct 5 + + Date Range + + + Oct 1 - Oct 5 +
- - - - - - - - -
- - + + + + + +
); } diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 275c174e1..f2c09e57f 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -10,6 +10,7 @@ import { makeStyles } from '@material-ui/core/styles'; const COLORS = { appleGreen: '#86C232', lavenderPinocchio: '#E0E0E0', + carbonGrey: '#585B5D', }; /** @@ -19,6 +20,21 @@ const COLORS = { * @description styles for EarningsTableTopBar component */ const earningsTableTopBarStyles = { + earningsTableTopar: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + paddingBottom: '20px', + }, + fiterButonSmallText: { + color: COLORS.carbonGrey, + fontSize: '0.8em', + textAlign: 'left', + }, + fiterButonMediumText: { + fontSize: '1.1em', + textAlign: 'left', + }, actionButton: { color: COLORS.appleGreen, cursor: 'pointer', @@ -34,6 +50,12 @@ const earningsTableTopBarStyles = { earningsTableTopTitle: { padding: '0px 0px 0px 10px', }, + earningsTableFilterButton: { + cursor: 'pointer', + padding: '10px 15px 10px 15px', + border: `1px solid ${COLORS.lavenderPinocchio}`, + borderRadius: '5px', + }, }; /** @@ -44,17 +66,12 @@ const earningsTableTopBarStyles = { */ const earningsTableStyles = { earningsTable: { - padding: '20px 0 0 40px', + padding: '40px 60px 0px 60px', }, earningsTableHeader: { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, - earningsTableFilterButton: { - cursor: 'pointer', - border: `1px solid ${COLORS.lavenderPinocchio}`, - }, - infoIcon: { color: `${COLORS.appleGreen}`, position: 'relative', From d722cd207a3aac56c45167bf8833db5e19189cfe Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 11 Nov 2021 09:45:16 +0300 Subject: [PATCH 33/56] feat(earnings table ): add filter earnings button --- src/components/EarningsTable/EarningsTable.js | 63 +++++++++++++------ .../EarningsTable/EarningsTable.styles.js | 35 ++++++++--- 2 files changed, 68 insertions(+), 30 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 09748dd59..ff7a38732 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -7,8 +7,10 @@ import TableBody from '@material-ui/core/TableBody'; import GetAppIcon from '@material-ui/icons/GetApp'; import Grid from '@material-ui/core/Grid'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import IconFilter from '@material-ui/icons/FilterList'; +import Button from '@material-ui/core/Button'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; -import Paper from '@material-ui/core/Paper'; +import Avatar from '@material-ui/core/Avatar'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import API from '../../api/treeTrackerApi'; @@ -33,7 +35,12 @@ function EarningsTableTopar() { {/* start earning table actions */} - + {/* start EXPORT button */} {/* end EXPORT button */} - {/* start FILTER button */} - - -
- - Date Range - - - Oct 1 - Oct 5 - -
- - + {/* start Date Range button */} + + + + {/* end Date Range button */} + + {/* start Filter button */} + + - {/* end FILTER button */} {/* end earnings table actions */} @@ -205,7 +228,7 @@ export default function EarningsTable() { }, []); return ( - + diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index f2c09e57f..3b7b7258f 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -11,6 +11,8 @@ const COLORS = { appleGreen: '#86C232', lavenderPinocchio: '#E0E0E0', carbonGrey: '#585B5D', + black: '#000', + feta: '#F3F9EB', }; /** @@ -26,12 +28,28 @@ const earningsTableTopBarStyles = { justifyContent: 'space-between', paddingBottom: '20px', }, - fiterButonSmallText: { + filterAvatar: { + backgroundColor: COLORS.feta, + color: COLORS.appleGreen, + marginLeft: '0.75rem', + width: '25px', + height: '25px', + }, + + iconFilter: { + color: COLORS.appleGreen, + }, + + filterButtonText: { + color: COLORS.black, + fontSize: '1.2em', + }, + dateFiterButonSmallText: { color: COLORS.carbonGrey, fontSize: '0.8em', textAlign: 'left', }, - fiterButonMediumText: { + dateFiterButonMediumText: { fontSize: '1.1em', textAlign: 'left', }, @@ -50,11 +68,11 @@ const earningsTableTopBarStyles = { earningsTableTopTitle: { padding: '0px 0px 0px 10px', }, - earningsTableFilterButton: { - cursor: 'pointer', - padding: '10px 15px 10px 15px', - border: `1px solid ${COLORS.lavenderPinocchio}`, - borderRadius: '5px', + earningsTableDateFilterButton: { + padding: '12px 30px 12px 15px', + }, + filterButton: { + padding: '15px 30px 20px 15px', }, }; @@ -65,9 +83,6 @@ const earningsTableTopBarStyles = { * @description styles for EarningsTable component */ const earningsTableStyles = { - earningsTable: { - padding: '40px 60px 0px 60px', - }, earningsTableHeader: { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, From bf7ee21d16d5391d2c6f3d3473cedee0faf1e5bf Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 11 Nov 2021 19:42:40 +0300 Subject: [PATCH 34/56] feat(earnings table top bar): arrage well top bar actions --- src/components/EarningsTable/EarningsTable.js | 9 ++------- src/components/EarningsTable/EarningsTable.styles.js | 6 +++++- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index ff7a38732..522590d0c 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -35,12 +35,7 @@ function EarningsTableTopar() { {/* start earning table actions */} - + {/* start EXPORT button */} +
diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 3b7b7258f..1f7a65a14 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -26,7 +26,8 @@ const earningsTableTopBarStyles = { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', - paddingBottom: '20px', + alignItems: 'center', + padding: '40px 40px 20px 0px', }, filterAvatar: { backgroundColor: COLORS.feta, @@ -83,6 +84,9 @@ const earningsTableTopBarStyles = { * @description styles for EarningsTable component */ const earningsTableStyles = { + earningsTable: { + padding: '0px 40px 0px 40px', + }, earningsTableHeader: { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, From d3cd978929d97dbad41afc1226ffa6fed42be001 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 11 Nov 2021 21:53:33 +0300 Subject: [PATCH 35/56] feat(earnings table): add sort icon on table header --- src/components/EarningsTable/EarningsTable.js | 24 ++++++++++++------- .../EarningsTable/EarningsTable.styles.js | 20 +++++++++++++++- 2 files changed, 35 insertions(+), 9 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 522590d0c..ccaf91d7f 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -5,6 +5,7 @@ import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; import GetAppIcon from '@material-ui/icons/GetApp'; +import TableSortLabel from '@material-ui/core/TableSortLabel'; import Grid from '@material-ui/core/Grid'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import IconFilter from '@material-ui/icons/FilterList'; @@ -63,7 +64,7 @@ function EarningsTableTopar() { @@ -107,13 +108,20 @@ const EarningsTableHead = ({ columns }) => { {columns.map((column, i) => ( - - - {column} - {i === columns.length - 1 && ( - - )} - + + + + {column} + {i === columns.length - 1 && ( + + )} + + ))} diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 1f7a65a14..9d40296fe 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -91,13 +91,31 @@ const earningsTableStyles = { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, - infoIcon: { + earningsTableHeadSortIcon: { + color: `${COLORS.appleGreen} !important`, + padding: '1px', + backgroundColor: COLORS.feta, + fontSize: '1.5em', + }, + + arrowDropDownIcon: { color: `${COLORS.appleGreen}`, position: 'relative', top: '5px', left: '5px', }, + infoIcon: { + color: `${COLORS.appleGreen}`, + backgroundColor: COLORS.feta, + padding: '3px', + margin: ' 0 4px 0 0', + fontSize: '0.9em', + position: 'relative', + top: '3px', + left: '5px', + }, + earningsTablePagination: { border: 'none', paddingRight: '0px', From 3b81790d184472fcb6e438a0bd917fd745850ffe Mon Sep 17 00:00:00 2001 From: Zaven Arra Date: Thu, 11 Nov 2021 14:29:14 -0800 Subject: [PATCH 36/56] feat: enable capture matching for dev deployment --- .env.development | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.development b/.env.development index f7fc4c22c..61d112f84 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,4 @@ REACT_APP_WEBMAP_DOMAIN=http://dev.treetracker.org REACT_APP_API_ROOT=https://dev-k8s.treetracker.org/api/admin REACT_APP_TREETRACKER_API_ROOT=https://dev-k8s.treetracker.org/treetracker -REACT_APP_ENABLE_CAPTURE_MATCHING=false \ No newline at end of file +REACT_APP_ENABLE_CAPTURE_MATCHING=true From 6a4f8f25b7d719266bfe4e9985b69286f9bdbea8 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Fri, 12 Nov 2021 18:57:26 +0300 Subject: [PATCH 37/56] feat(earnings table filter): add filter and style filter header --- src/components/EarningsTable/EarningsTable.js | 67 +++++++++++++++++++ .../EarningsTable/EarningsTable.styles.js | 17 +++++ 2 files changed, 84 insertions(+) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index ccaf91d7f..ef43e09aa 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -5,11 +5,18 @@ import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; import GetAppIcon from '@material-ui/icons/GetApp'; +import TextField from '@material-ui/core/TextField'; +import Drawer from '@material-ui/core/Drawer'; +import Select from '@material-ui/core/Select'; +import MenuItem from '@material-ui/core/MenuItem'; +import Divider from '@material-ui/core/Divider'; import TableSortLabel from '@material-ui/core/TableSortLabel'; import Grid from '@material-ui/core/Grid'; +import FormControl from '@material-ui/core/FormControl'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import IconFilter from '@material-ui/icons/FilterList'; import Button from '@material-ui/core/Button'; +import CloseIcon from '@material-ui/icons/Close'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import Avatar from '@material-ui/core/Avatar'; import TablePagination from '@material-ui/core/TablePagination'; @@ -241,6 +248,66 @@ export default function EarningsTable() { total={totalCount} />
+ + + {/* start filter header */} + + + + + Filters + + 1 + + + + + + + {/* end filter header */} + + {/* start filter form */} + + + + + + + + + + + + + + + {/* end filter form */} + + ); } diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 9d40296fe..1c1d933b5 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -87,9 +87,26 @@ const earningsTableStyles = { earningsTable: { padding: '0px 40px 0px 40px', }, + earningsTableDrawer: { + width: '300px', + padding: '20px 15px', + }, + earningsTableFilterHeader: {}, earningsTableHeader: { borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, }, + earningsTableFilterCloseIcon: { + color: COLORS.appleGreen, + cursor: 'pointer', + backgroundColor: COLORS.feta, + }, + earningsTableFilterAvatar: { + backgroundColor: COLORS.feta, + color: COLORS.appleGreen, + marginLeft: '0.5rem', + width: '30px', + height: '30px', + }, earningsTableHeadSortIcon: { color: `${COLORS.appleGreen} !important`, From 0cb8052413ccc0e2679d472307f4d7f5e82ff471 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Fri, 12 Nov 2021 20:19:42 +0300 Subject: [PATCH 38/56] feat(earnings table filter): add funder and payment system select filters --- src/components/EarningsTable/EarningsTable.js | 44 ++++++++++++------- .../EarningsTable/EarningsTable.styles.js | 3 ++ 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index ef43e09aa..87adabecf 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -5,11 +5,10 @@ import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/TableBody'; import GetAppIcon from '@material-ui/icons/GetApp'; -import TextField from '@material-ui/core/TextField'; import Drawer from '@material-ui/core/Drawer'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; -import Divider from '@material-ui/core/Divider'; +import InputLabel from '@material-ui/core/InputLabel'; import TableSortLabel from '@material-ui/core/TableSortLabel'; import Grid from '@material-ui/core/Grid'; import FormControl from '@material-ui/core/FormControl'; @@ -280,29 +279,42 @@ export default function EarningsTable() { {/* start filter form */} - - - - None + Environment For Africa + - - - None + Visa - - - {/* end filter form */} diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 1c1d933b5..d4d9a0cd0 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -107,6 +107,9 @@ const earningsTableStyles = { width: '30px', height: '30px', }, + earningsFIlterSelectFormControl: { + width: '100%', + }, earningsTableHeadSortIcon: { color: `${COLORS.appleGreen} !important`, From 69c182873e9465f4fae5fd1c786e6625203abc39 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Fri, 12 Nov 2021 23:33:07 +0300 Subject: [PATCH 39/56] feat(earnings filter): adding action buttons --- src/components/EarningsTable/EarningsTable.js | 159 ++++++++++-------- .../EarningsTable/EarningsTable.styles.js | 25 ++- 2 files changed, 107 insertions(+), 77 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 87adabecf..17eba2b90 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -23,6 +23,93 @@ import Typography from '@material-ui/core/Typography'; import API from '../../api/treeTrackerApi'; import useStyles from './EarningsTable.styles'; +/** + * @function + * @name EarningsTableFilter + * @description render filter for earnings table + * + * @returns {React.Component} + */ +function EarningsTableFilter() { + const classes = useStyles(); + + return ( + + {/* start filter header */} + + + + + Filters + + 1 + + + + + + + {/* end filter header */} + + {/* start filter form */} + + + Funder + + + + + + Payment System + + + + + + + + + {/* end filter form */} + + ); +} + /** * @function * @name EarningsTableTopar @@ -248,77 +335,7 @@ export default function EarningsTable() { /> - - {/* start filter header */} - - - - - Filters - - 1 - - - - - - - {/* end filter header */} - - {/* start filter form */} - - - - Funder - - - - - - - Payment System - - - - - {/* end filter form */} - + ); diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index d4d9a0cd0..1d91b925f 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -79,13 +79,12 @@ const earningsTableTopBarStyles = { /** * @constant - * @type {object} - * @name earningsTableStyles - * @description styles for EarningsTable component + * @name earningTableFilterStyles + * @description styles for EarningsTableFilter component */ -const earningsTableStyles = { - earningsTable: { - padding: '0px 40px 0px 40px', +const earningTableFilterStyles = { + earningTableFilterActions: { + marginTop: '100px', }, earningsTableDrawer: { width: '300px', @@ -109,6 +108,19 @@ const earningsTableStyles = { }, earningsFIlterSelectFormControl: { width: '100%', + marginTop: '20px', + }, +}; + +/** + * @constant + * @type {object} + * @name earningsTableStyles + * @description styles for EarningsTable component + */ +const earningsTableStyles = { + earningsTable: { + padding: '0px 40px 0px 40px', }, earningsTableHeadSortIcon: { @@ -156,6 +168,7 @@ const earningsTableStyles = { const useStyles = makeStyles(() => ({ ...earningsTableTopBarStyles, ...earningsTableStyles, + ...earningTableFilterStyles, })); export default useStyles; From b3fc22dda042727058d6d390d01fe0739a786be9 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sat, 13 Nov 2021 09:25:10 +0300 Subject: [PATCH 40/56] feat(earnings table filter): styled filters according to the designs --- src/components/EarningsTable/EarningsTable.js | 20 +++++++++++++++++-- .../EarningsTable/EarningsTable.styles.js | 9 +++++++-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 17eba2b90..ad4d2958e 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -15,6 +15,7 @@ import FormControl from '@material-ui/core/FormControl'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import IconFilter from '@material-ui/icons/FilterList'; import Button from '@material-ui/core/Button'; +import Divider from '@material-ui/core/Divider'; import CloseIcon from '@material-ui/icons/Close'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import Avatar from '@material-ui/core/Avatar'; @@ -96,13 +97,28 @@ function EarningsTableFilter() { Visa + + + - - + + {/* end filter form */} diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 1d91b925f..35429a978 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -12,6 +12,7 @@ const COLORS = { lavenderPinocchio: '#E0E0E0', carbonGrey: '#585B5D', black: '#000', + white: '#fff', feta: '#F3F9EB', }; @@ -83,8 +84,12 @@ const earningsTableTopBarStyles = { * @description styles for EarningsTableFilter component */ const earningTableFilterStyles = { - earningTableFilterActions: { - marginTop: '100px', + earningTableFilterSubmitButton: { + marginBottom: '10px', + color: COLORS.white, + }, + earningTableFilterCancelButton: { + border: 'none', }, earningsTableDrawer: { width: '300px', From 674200e2f7175ac9378547729813759ffd695d4f Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sat, 13 Nov 2021 10:17:40 +0300 Subject: [PATCH 41/56] feat(earnings filters): toggle open filter --- src/components/EarningsTable/EarningsTable.js | 206 ++++++++++-------- .../EarningsTable/EarningsTable.styles.js | 4 +- 2 files changed, 122 insertions(+), 88 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index ad4d2958e..a08270192 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -17,6 +17,7 @@ import IconFilter from '@material-ui/icons/FilterList'; import Button from '@material-ui/core/Button'; import Divider from '@material-ui/core/Divider'; import CloseIcon from '@material-ui/icons/Close'; +import PropTypes from 'prop-types'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import Avatar from '@material-ui/core/Avatar'; import TablePagination from '@material-ui/core/TablePagination'; @@ -28,115 +29,143 @@ import useStyles from './EarningsTable.styles'; * @function * @name EarningsTableFilter * @description render filter for earnings table + * @param {object} props - properties passed to the component + * @param {string} props.isFilterOpen - flag that decides where filter should open/close + * @param {Function} setIsFilterOpen - closes filter when executed * * @returns {React.Component} */ -function EarningsTableFilter() { +function EarningsTableFilter(props) { + const { isFilterOpen, setIsFilterOpen } = props; const classes = useStyles(); + const closeFilter = () => setIsFilterOpen(false); + return ( - - {/* start filter header */} - - - - - Filters - - 1 - + + + {/* start filter header */} + + + + + Filters + + 1 + + + closeFilter()} + className={classes.earningsTableFilterCloseIcon} + /> - - - {/* end filter header */} + {/* end filter header */} - {/* start filter form */} - - - Funder - - + + Funder + + + - - - Payment System - - - + + Payment System + + + - + - - - + + + + {/* end filter form */} - {/* end filter form */} - + ); } +EarningsTableFilter.propTypes = { + isFilterOpen: PropTypes.string.isRequired, + setIsFilterOpen: PropTypes.func.isRequired, +}; + /** * @function - * @name EarningsTableTopar + * @name EarningsTableTopBar * @description renders earnings table top bar which contains table actions(i.e. filter, export, etc) + * @param {object} props - properties passed to component + * @param {string} props.setIsFilterOpen - sets filter open/closed * - * @returns + * @returns {React.Component} */ -function EarningsTableTopar() { +function EarningsTableTopBar(props) { + const { setIsFilterOpen } = props; const classes = useStyles(); + const openFilter = () => setIsFilterOpen(true); return ( - + Earnings @@ -184,7 +213,7 @@ function EarningsTableTopar() { {/* start Filter button */} {/* end EXPORT button */} {/* start Date Range button */} - - + + + + {/* end Date Range button */} {/* start Filter button */} - - + + + + diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 06edc59f5..0e973bb80 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -28,7 +28,7 @@ const earningsTableTopBarStyles = { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - padding: '40px 40px 20px 0px', + padding: '40px 0px 20px 0px', }, filterAvatar: { backgroundColor: COLORS.feta, From 8016b6c5a8a9f2114d4d70031bbecf920bad088e Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sat, 13 Nov 2021 13:05:46 +0300 Subject: [PATCH 44/56] feat(earnings tool): add env variable to hide/show earnings tool --- .env.development | 1 + .env.test | 1 + src/context/AppContext.js | 2 +- src/views/EarningsView/EarningsView.styles.js | 2 ++ 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.env.development b/.env.development index 61d112f84..a95604aa0 100644 --- a/.env.development +++ b/.env.development @@ -2,3 +2,4 @@ REACT_APP_WEBMAP_DOMAIN=http://dev.treetracker.org REACT_APP_API_ROOT=https://dev-k8s.treetracker.org/api/admin REACT_APP_TREETRACKER_API_ROOT=https://dev-k8s.treetracker.org/treetracker REACT_APP_ENABLE_CAPTURE_MATCHING=true +REACT_APP_ENABLE_EARNINGS=false diff --git a/.env.test b/.env.test index 8cfaf86fa..812fa06fe 100644 --- a/.env.test +++ b/.env.test @@ -1 +1,2 @@ REACT_APP_WEBMAP_DOMAIN=http://test.treetracker.org + diff --git a/src/context/AppContext.js b/src/context/AppContext.js index 0cbb174ae..8a9f439d6 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -85,7 +85,7 @@ function getRoutes(user) { linkTo: '/earnings', component: EarningsView, icon: CreditCardIcon, - disabled: false, + disabled: process.env.REACT_APP_ENABLE_EARNINGS !== 'true', }, { name: 'Growers', diff --git a/src/views/EarningsView/EarningsView.styles.js b/src/views/EarningsView/EarningsView.styles.js index 1baeed954..d569d0a90 100644 --- a/src/views/EarningsView/EarningsView.styles.js +++ b/src/views/EarningsView/EarningsView.styles.js @@ -1,4 +1,5 @@ import { makeStyles } from '@material-ui/core/styles'; +import { MENU_WIDTH } from '../../components/common/Menu'; /** * @constant @@ -9,6 +10,7 @@ import { makeStyles } from '@material-ui/core/styles'; const earningsViewLeftMenu = { earningsViewLeftMenu: { height: '100%', + width: MENU_WIDTH, }, }; From c77bb0aa5f02bd7ce3525bb0d055266ce1fa9d1f Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sat, 13 Nov 2021 13:21:32 +0300 Subject: [PATCH 45/56] build(packages): add react-csv libary for exporting data to csv --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index 1ec422cc9..cbbcb2e31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "prop-types": "*", "react": "*", "react-autosuggest": "^10.0.2", + "react-csv": "^2.0.3", "react-dom": "*", "react-fast-compare": "^3.2.0", "react-infinite": "*", @@ -30503,6 +30504,11 @@ "react": "^15.3.0 || ^16.0.0 || ^17.0.0" } }, + "node_modules/react-csv": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.0.3.tgz", + "integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w==" + }, "node_modules/react-dev-utils": { "version": "11.0.3", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.3.tgz", @@ -61374,6 +61380,11 @@ "@babel/runtime": "^7.12.13" } }, + "react-csv": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.0.3.tgz", + "integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w==" + }, "react-dev-utils": { "version": "11.0.3", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.3.tgz", diff --git a/package.json b/package.json index dfa3fdf0c..68eeba20a 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "prop-types": "*", "react": "*", "react-autosuggest": "^10.0.2", + "react-csv": "^2.0.3", "react-dom": "*", "react-fast-compare": "^3.2.0", "react-infinite": "*", From 3f09f324c0b2bbbb614ecd4bc0ea9a61224ec206 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Sat, 13 Nov 2021 14:17:44 +0300 Subject: [PATCH 46/56] feat(earnings table): export earnings to csv --- .env.development | 2 +- src/components/EarningsTable/EarningsTable.js | 18 ++++++++++++++---- .../EarningsTable/EarningsTable.styles.js | 6 ++++++ 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/.env.development b/.env.development index a95604aa0..46837f745 100644 --- a/.env.development +++ b/.env.development @@ -2,4 +2,4 @@ REACT_APP_WEBMAP_DOMAIN=http://dev.treetracker.org REACT_APP_API_ROOT=https://dev-k8s.treetracker.org/api/admin REACT_APP_TREETRACKER_API_ROOT=https://dev-k8s.treetracker.org/treetracker REACT_APP_ENABLE_CAPTURE_MATCHING=true -REACT_APP_ENABLE_EARNINGS=false +REACT_APP_ENABLE_EARNINGS=true diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 86bdacc2a..06ba3fba4 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -12,6 +12,7 @@ import InputLabel from '@material-ui/core/InputLabel'; import TableSortLabel from '@material-ui/core/TableSortLabel'; import Grid from '@material-ui/core/Grid'; import FormControl from '@material-ui/core/FormControl'; +import { CSVLink } from 'react-csv'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import IconFilter from '@material-ui/icons/FilterList'; import Button from '@material-ui/core/Button'; @@ -156,12 +157,13 @@ EarningsTableFilter.propTypes = { * @name EarningsTableTopBar * @description renders earnings table top bar which contains table actions(i.e. filter, export, etc) * @param {object} props - properties passed to component + * @param {array} props.data - earnings to be exported * @param {string} props.setIsFilterOpen - sets filter open/closed * * @returns {React.Component} */ function EarningsTableTopBar(props) { - const { setIsFilterOpen } = props; + const { setIsFilterOpen, data } = props; const classes = useStyles(); const openFilter = () => setIsFilterOpen(true); return ( @@ -179,8 +181,15 @@ function EarningsTableTopBar(props) { @@ -232,6 +241,7 @@ function EarningsTableTopBar(props) { } EarningsTableTopBar.propTypes = { setIsFilterOpen: PropTypes.func.isRequired, + data: PropTypes.array.isRequired, }; /** @@ -377,7 +387,7 @@ export default function EarningsTable() { return ( - + Date: Sat, 13 Nov 2021 16:40:54 +0300 Subject: [PATCH 47/56] feat(earnings table): put earnings meta data in an array of objects --- public/earnings.json | 2 +- src/components/EarningsTable/EarningsTable.js | 207 +++++++----------- 2 files changed, 84 insertions(+), 125 deletions(-) diff --git a/public/earnings.json b/public/earnings.json index 2c69223c0..51dc0388e 100644 --- a/public/earnings.json +++ b/public/earnings.json @@ -65,7 +65,7 @@ "paymentDate": "Aug 11,2021" } ], - "totalCount": 28, + "totalCount": 8, "links": { "prev": null, "next": "http://dev-k8s.treetracker.org/earnings?&offset=1" diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 06ba3fba4..40be78541 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -7,6 +7,7 @@ import TableBody from '@material-ui/core/TableBody'; import GetAppIcon from '@material-ui/icons/GetApp'; import Drawer from '@material-ui/core/Drawer'; import Select from '@material-ui/core/Select'; +import TableContainer from '@material-ui/core/TableContainer'; import MenuItem from '@material-ui/core/MenuItem'; import InputLabel from '@material-ui/core/InputLabel'; import TableSortLabel from '@material-ui/core/TableSortLabel'; @@ -31,7 +32,7 @@ import useStyles from './EarningsTable.styles'; * @name EarningsTableFilter * @description render filter for earnings table * @param {object} props - properties passed to the component - * @param {string} props.isFilterOpen - flag that decides where filter should open/close + * @param {boolean} props.isFilterOpen - flag that decides where filter should open/close * @param {Function} setIsFilterOpen - closes filter when executed * * @returns {React.Component} @@ -148,7 +149,7 @@ function EarningsTableFilter(props) { } EarningsTableFilter.propTypes = { - isFilterOpen: PropTypes.string.isRequired, + isFilterOpen: PropTypes.bool.isRequired, setIsFilterOpen: PropTypes.func.isRequired, }; @@ -245,105 +246,18 @@ EarningsTableTopBar.propTypes = { }; /** - * @function - * @name EarningsTableHead - * @description renders earnings table head columns dynamically - * @param {object} props - * @param {string} props.columns - * - * @returns {React.Component} earnings table head columns - */ -const EarningsTableHead = ({ columns }) => { - const classes = useStyles(); - - return ( - - - {columns.map((column, i) => ( - - - - {column} - {i === columns.length - 2 && ( - - )} - - - - ))} - - - ); -}; - -/** - * @function - * @name EarningsTablePagination - * @description renders table pagination - * - * @param {object} props - * @param {string} props.total - total earnings - * - * @returns {React.Component} earnings table pagination - */ -const EarningsTablePagination = ({ total }) => { - const classes = useStyles(); - - return ( - {}} - onChangeRowsPerPage={() => {}} - SelectProps={{ - inputProps: { 'aria-label': 'rows per page' }, - native: true, - }} - /> - ); -}; - -/** - * @function - * @name EarningsTableBody - * @description renders earnings table body rows dynamically - * @param {object} props - * @param {object} props.data - * @param {string} props.columns - * @param {string} props.total - * - * @returns {React.Component} earnings table body rows + * @constant + * @name earningTableMetaData + * @description infomation about column that will display an instance of earning */ -const EarningsTableBody = ({ data, columns, total }) => { - return ( - - {data.map((row, i) => ( - - {columns.map((column, j) => ( - - {row[column]} - - ))} - - ))} - - - - - ); -}; +const earningTableMetaData = [ + { description: 'Grower', name: 'grower' }, + { description: 'Funder', name: 'funder' }, + { description: 'Amount', name: 'amount' }, + { description: 'Payment System', name: 'paymentSystem' }, + { description: 'Effective Date', name: 'effectiveDate' }, + { description: 'Payment Date', name: 'paymentDate' }, +]; /** * @function @@ -356,24 +270,18 @@ export default function EarningsTable() { const [earnings, setEarnings] = useState([]); const [totalCount, setTotalCount] = useState(0); const [isFilterOpen, setIsFilterOpen] = useState(false); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); - const headerColumns = [ - 'Grower', - 'Funder', - 'Amount', - 'Payment System', - 'Effective Date', - 'Payment Date', - ]; + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; - const bodyColumns = [ - 'grower', - 'funder', - 'amount', - 'paymentSystem', - 'effectiveDate', - 'paymentDate', - ]; + const handleChangeRowsPerPage = (event) => { + console.log('handleChangeRowsPerPage---', event); + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; async function fetchEarnings() { const response = await API.getEarnings(); @@ -388,14 +296,65 @@ export default function EarningsTable() { return ( -
- - -
+ + + + + {earningTableMetaData.map((column, i) => ( + + + + {column.description} + {i === earningTableMetaData.length - 2 && ( + + )} + + + + ))} + + + + + {earnings.map((row, i) => ( + + {earningTableMetaData.map((column, j) => ( + + {row[column.name]} + + ))} + + ))} + +
+ + + Date: Thu, 18 Nov 2021 06:36:35 +0300 Subject: [PATCH 48/56] feat(earnings table): display earning details --- src/components/EarningsTable/EarningsTable.js | 168 +++++++++++++++++- 1 file changed, 160 insertions(+), 8 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 40be78541..db06533a9 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -32,7 +32,7 @@ import useStyles from './EarningsTable.styles'; * @name EarningsTableFilter * @description render filter for earnings table * @param {object} props - properties passed to the component - * @param {boolean} props.isFilterOpen - flag that decides where filter should open/close + * @param {boolean} props.isFilterOpen - flag that decides wheather filter should open/close * @param {Function} setIsFilterOpen - closes filter when executed * * @returns {React.Component} @@ -41,7 +41,7 @@ function EarningsTableFilter(props) { const { isFilterOpen, setIsFilterOpen } = props; const classes = useStyles(); - const closeFilter = () => setIsFilterOpen(false); + const handleCloseFilter = () => setIsFilterOpen(false); return ( closeFilter()} + onClick={() => handleCloseFilter()} className={classes.earningsTableFilterCloseIcon} /> @@ -153,6 +153,141 @@ EarningsTableFilter.propTypes = { setIsFilterOpen: PropTypes.func.isRequired, }; +/** + * @function + * @name EarningDetails + * @description render details of an earning + * @param {object} props - properties passed to the component + * @param {boolean} props.isDetailsDrawerOpen - flag that decides wheather details drawer should open/close + * @param {Function} setIsDetailsDrawerOpen - closes earning details drawer when executed + * @param {object} props.selectedEarning - earning object + * @param {Function} props.setSelectedEarning - sets/resets selected earning object + * + * @returns {React.Component} + */ +function EarningDetails(props) { + const { + isDetailsDrawerOpen, + setIsDetailsDrawerOpen, + selectedEarning, + setSelectedEarning, + } = props; + const classes = useStyles(); + + const handleCloseDetails = () => { + setIsDetailsDrawerOpen(false); + setSelectedEarning(null); + }; + + return ( + + + {/* start filter header */} + + + + + Details + + + handleCloseDetails()} + className={classes.earningsTableFilterCloseIcon} + /> + + + {/* end filter header */} + + {/* start filter form */} + + + + Funder + + + + + + + Payment System + + + + + + + + + + + + {/* end filter form */} + + + ); +} + +EarningDetails.propTypes = { + isDetailsDrawerOpen: PropTypes.bool.isRequired, + setIsDetailsDrawerOpen: PropTypes.func.isRequired, + setSelectedEarning: PropTypes.func.isRequired, + selectedEarning: PropTypes.object.isRequired, +}; + /** * @function * @name EarningsTableTopBar @@ -270,15 +405,16 @@ export default function EarningsTable() { const [earnings, setEarnings] = useState([]); const [totalCount, setTotalCount] = useState(0); const [isFilterOpen, setIsFilterOpen] = useState(false); + const [isDetailsDrawerOpen, setIsDetailsDrawerOpen] = useState(false); const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); + const [selectedEarning, setSelectedEarning] = useState(null); const handleChangePage = (event, newPage) => { setPage(newPage); }; const handleChangeRowsPerPage = (event) => { - console.log('handleChangeRowsPerPage---', event); setRowsPerPage(parseInt(event.target.value, 10)); setPage(0); }; @@ -289,6 +425,11 @@ export default function EarningsTable() { setTotalCount(response.totalCount); } + const handleOpenEarningDetails = (earning) => { + setSelectedEarning(earning); + setIsDetailsDrawerOpen(true); + }; + useEffect(() => { fetchEarnings(); }, []); @@ -324,11 +465,16 @@ export default function EarningsTable() { - {earnings.map((row, i) => ( - + {earnings.map((earning, i) => ( + handleOpenEarningDetails(earning)} + > {earningTableMetaData.map((column, j) => ( - {row[column.name]} + + {earning[column.name]} + ))} @@ -344,7 +490,6 @@ export default function EarningsTable() { }} component="div" rowsPerPageOptions={[5, 10, 20, { label: 'All', value: -1 }]} - colSpan={3} page={page} rowsPerPage={rowsPerPage} onChangePage={handleChangePage} @@ -359,6 +504,13 @@ export default function EarningsTable() { isFilterOpen={isFilterOpen} setIsFilterOpen={setIsFilterOpen} /> + + ); } From 5e7973a87781a60430e38fe581336d48e6b72ed9 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 18 Nov 2021 07:55:21 +0300 Subject: [PATCH 49/56] feat(theme): move all colors to the theme --- .../EarningsTable/EarningsTable.styles.js | 92 +++++++++---------- src/components/common/theme.js | 18 ++++ 2 files changed, 60 insertions(+), 50 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index f09b770b8..73421099f 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -1,30 +1,15 @@ import { makeStyles } from '@material-ui/core/styles'; /** - * @constant - * @type {object} - * @description possible colors for earning table component - * @see {@link https://colors.artyclick.com/color-name-finder/} - to learn how - * color names are generated - */ -const COLORS = { - appleGreen: '#86C232', - lavenderPinocchio: '#E0E0E0', - carbonGrey: '#585B5D', - black: '#000', - white: '#fff', - feta: '#F3F9EB', -}; - -/** - * @constant - * @type {object} + * @function * @name EarningsTableTopBarStyles * @description styles for EarningsTableTopBar component + * @param {object} theme - material-ui theme object + * @returns {object} styles for EarningsTableTopBar component */ -const earningsTableTopBarStyles = { +const earningsTableTopBarStyles = (theme) => ({ csvLink: { - color: COLORS.appleGreen, + color: theme.palette.primary.main, display: 'flex', alignItems: 'flex-end', textDecoration: 'none', @@ -37,23 +22,23 @@ const earningsTableTopBarStyles = { padding: '40px 0px 20px 0px', }, filterAvatar: { - backgroundColor: COLORS.feta, - color: COLORS.appleGreen, + backgroundColor: theme.palette.primary.lightVery, + color: theme.palette.primary.main, marginLeft: '0.75rem', width: '25px', height: '25px', }, iconFilter: { - color: COLORS.appleGreen, + color: theme.palette.primary.main, }, filterButtonText: { - color: COLORS.black, + color: theme.palette.stats.black, fontSize: '1.2em', }, dateFiterButonSmallText: { - color: COLORS.carbonGrey, + color: theme.palette.stats.carbonGrey, fontSize: '0.8em', textAlign: 'left', }, @@ -62,7 +47,7 @@ const earningsTableTopBarStyles = { textAlign: 'left', }, actionButton: { - color: COLORS.appleGreen, + color: theme.palette.primary.main, cursor: 'pointer', }, actionButtonIcon: { @@ -82,17 +67,17 @@ const earningsTableTopBarStyles = { filterButton: { padding: '15px 30px 20px 15px', }, -}; +}); /** * @constant * @name earningTableFilterStyles * @description styles for EarningsTableFilter component */ -const earningTableFilterStyles = { +const earningTableFilterStyles = (theme) => ({ earningTableFilterSubmitButton: { marginBottom: '10px', - color: COLORS.white, + color: theme.palette.stats.white, }, earningTableFilterCancelButton: { border: 'none', @@ -103,16 +88,16 @@ const earningTableFilterStyles = { }, earningsTableFilterHeader: {}, earningsTableHeader: { - borderBottom: `2px solid ${COLORS.lavenderPinocchio}`, + borderBottom: `2px solid ${theme.palette.stats.lavenderPinocchio}`, }, earningsTableFilterCloseIcon: { - color: COLORS.appleGreen, + color: theme.palette.primary.main, cursor: 'pointer', - backgroundColor: COLORS.feta, + backgroundColor: theme.palette.stats.feta, }, earningsTableFilterAvatar: { - backgroundColor: COLORS.feta, - color: COLORS.appleGreen, + backgroundColor: theme.palette.stats.feta, + color: theme.palette.primary.main, marginLeft: '0.5rem', width: '30px', height: '30px', @@ -121,36 +106,37 @@ const earningTableFilterStyles = { width: '100%', marginTop: '20px', }, -}; +}); /** - * @constant - * @type {object} + * @function * @name earningsTableStyles * @description styles for EarningsTable component + * @param {object} theme - material-ui theme object + * @returns {object} styles for EarningsTable component */ -const earningsTableStyles = { +const earningsTableStyles = (theme) => ({ earningsTable: { padding: '0px 40px 0px 40px', }, earningsTableHeadSortIcon: { - color: `${COLORS.appleGreen} !important`, + color: `${theme.palette.primary.main} !important`, padding: '1px', - backgroundColor: COLORS.feta, + backgroundColor: theme.palette.primary.lightVery, fontSize: '1.5em', }, arrowDropDownIcon: { - color: `${COLORS.appleGreen}`, + color: `${theme.palette.primary.main}`, position: 'relative', top: '5px', left: '5px', }, infoIcon: { - color: `${COLORS.appleGreen}`, - backgroundColor: COLORS.feta, + color: `${theme.palette.primary.main}`, + backgroundColor: theme.palette.primary.lightVery, padding: '3px', margin: ' 0 4px 0 0', fontSize: '0.9em', @@ -164,11 +150,11 @@ const earningsTableStyles = { paddingRight: '0px', }, selectRoot: { - border: `1px solid ${COLORS.lavenderPinocchio}`, + border: `1px solid ${theme.palette.stats.lavenderPinocchio}`, borderRadius: '3px', padding: '4px', }, -}; +}); /** * @function @@ -176,10 +162,16 @@ const earningsTableStyles = { * @description hook that combines all the styles * @returns {object} styles */ -const useStyles = makeStyles(() => ({ - ...earningsTableTopBarStyles, - ...earningsTableStyles, - ...earningTableFilterStyles, -})); +const useStyles = makeStyles((theme) => { + const earningsTableTopBar = earningsTableTopBarStyles(theme); + const earningsTable = earningsTableStyles(theme); + const earningTableFilter = earningTableFilterStyles(theme); + + return { + ...earningsTableTopBar, + ...earningsTable, + ...earningTableFilterStyles, + }; +}); export default useStyles; diff --git a/src/components/common/theme.js b/src/components/common/theme.js index 7f0593d3e..1d7807a50 100644 --- a/src/components/common/theme.js +++ b/src/components/common/theme.js @@ -3,6 +3,20 @@ */ import { createMuiTheme } from '@material-ui/core/styles'; +/** + * @constant + * @type {object} + * @description other colors used in the UI + * @see {@link https://colors.artyclick.com/color-name-finder/} - to learn how + * color names are generated + */ +const COLORS = { + lavenderPinocchio: '#E0E0E0', // used for the borders + carbonGrey: '#585B5D', // used for adding contrast in texts + black: '#000', // used as text color + white: '#fff', // used as text color +}; + export const colorPrimary = 'rgba(118, 187, 35, 1)'; const colorPrimarySelected = 'rgba(118, 187, 35, 0.3)'; @@ -45,6 +59,10 @@ export default createMuiTheme({ green: colorPrimary, red: 'rgba(233, 88, 57, 1)', orange: 'rgba(239, 128, 49, 1)', + lavenderPinocchio: COLORS.lavenderPinocchio, + carbonGrey: COLORS.carbonGrey, + black: COLORS.black, + white: COLORS.white, }, }, overrides: { From 791478913f26247a9a855c3cc25ca066ad2d0302 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 18 Nov 2021 07:56:37 +0300 Subject: [PATCH 50/56] feat(earnings details): render details page when when earning is not null --- public/earnings.json | 8 +++ src/components/EarningsTable/EarningsTable.js | 54 ++++++------------- 2 files changed, 25 insertions(+), 37 deletions(-) diff --git a/public/earnings.json b/public/earnings.json index 51dc0388e..71d230e36 100644 --- a/public/earnings.json +++ b/public/earnings.json @@ -1,6 +1,7 @@ { "earnings": [ { + "id": 1, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", @@ -9,6 +10,7 @@ "paymentDate": "Aug 11,2021" }, { + "id": 2, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", @@ -17,6 +19,7 @@ "paymentDate": "Aug 11,2021" }, { + "id": 3, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", @@ -25,6 +28,7 @@ "paymentDate": "Aug 11,2021" }, { + "id": 4, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", @@ -33,6 +37,7 @@ "paymentDate": "Aug 11,2021" }, { + "id": 5, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", @@ -41,6 +46,7 @@ "paymentDate": "Aug 11,2021" }, { + "id": 6, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", @@ -49,6 +55,7 @@ "paymentDate": "Aug 11,2021" }, { + "id": 7, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", @@ -57,6 +64,7 @@ "paymentDate": "Aug 11,2021" }, { + "id": 8, "grower": "Mohamed Sankoh", "funder": "Environment for Africa", "amount": "$2.34", diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index db06533a9..ce70ef176 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -179,7 +179,7 @@ function EarningDetails(props) { setSelectedEarning(null); }; - return ( + return selectedEarning ? ( - - - Funder - - - + + + Id + {selectedEarning.id} + - - - Payment System - - - + + Grower + {selectedEarning.grower} + + + Funder + {selectedEarning.funder} + + @@ -278,6 +256,8 @@ function EarningDetails(props) { {/* end filter form */} + ) : ( + '' ); } From 9b2b4a370bd28d4f43f74279c12a44ef57e908ae Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 18 Nov 2021 09:15:53 +0300 Subject: [PATCH 51/56] feat(earnings table): use them spacing for all spacing in styles --- src/components/EarningsTable/EarningsTable.js | 72 ++++++++-------- .../EarningsTable/EarningsTable.styles.js | 84 +++++++++---------- src/components/common/theme.js | 3 +- 3 files changed, 78 insertions(+), 81 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index ce70ef176..57f9f7fec 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -55,7 +55,7 @@ function EarningsTableFilter(props) { className={classes.earningsTableFilterForm} > {/* start filter header */} - + - - - Funder - - - + + Funder + + + - - - Payment System - - - + + Payment System + + + + diff --git a/src/components/EarningsTable/EarningsTable.styles.js b/src/components/EarningsTable/EarningsTable.styles.js index 73421099f..4f5868b76 100644 --- a/src/components/EarningsTable/EarningsTable.styles.js +++ b/src/components/EarningsTable/EarningsTable.styles.js @@ -19,14 +19,14 @@ const earningsTableTopBarStyles = (theme) => ({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - padding: '40px 0px 20px 0px', + padding: theme.spacing(10, 0, 5, 0), }, filterAvatar: { backgroundColor: theme.palette.primary.lightVery, color: theme.palette.primary.main, - marginLeft: '0.75rem', - width: '25px', - height: '25px', + marginLeft: theme.spacing(3), + width: theme.spacing(6.25), + height: theme.spacing(6.25), }, iconFilter: { @@ -35,37 +35,29 @@ const earningsTableTopBarStyles = (theme) => ({ filterButtonText: { color: theme.palette.stats.black, - fontSize: '1.2em', + fontSize: theme.spacing(4.5), }, dateFiterButonSmallText: { color: theme.palette.stats.carbonGrey, - fontSize: '0.8em', + fontSize: theme.spacing(3), textAlign: 'left', }, dateFiterButonMediumText: { - fontSize: '1.1em', + fontSize: theme.spacing(3.5), textAlign: 'left', }, actionButton: { color: theme.palette.primary.main, cursor: 'pointer', }, - actionButtonIcon: { - position: 'relative', - top: '2px', - }, - topBarActions: { - width: '60%', - }, - earningsTableTopTitle: { - padding: '0px 0px 0px 10px', + padding: theme.spacing(0, 0, 0, 2), }, earningsTableDateFilterButton: { - padding: '12px 30px 12px 15px', + padding: theme.spacing(3, 7.5, 3, 4), }, filterButton: { - padding: '15px 30px 20px 15px', + padding: theme.spacing(4, 7.5, 5, 4), }, }); @@ -76,35 +68,35 @@ const earningsTableTopBarStyles = (theme) => ({ */ const earningTableFilterStyles = (theme) => ({ earningTableFilterSubmitButton: { - marginBottom: '10px', + marginBottom: theme.spacing(2.5), color: theme.palette.stats.white, }, earningTableFilterCancelButton: { border: 'none', }, earningsTableFilterForm: { - width: '300px', - padding: '20px 15px', + width: theme.spacing(75), + padding: theme.spacing(5, 3.75), }, - earningsTableFilterHeader: {}, earningsTableHeader: { - borderBottom: `2px solid ${theme.palette.stats.lavenderPinocchio}`, + borderBottom: `${theme.spacing(0.5)} solid ${ + theme.palette.stats.lavenderPinocchio + }`, }, earningsTableFilterCloseIcon: { color: theme.palette.primary.main, cursor: 'pointer', - backgroundColor: theme.palette.stats.feta, + backgroundColor: theme.palette.primary.lightVery, }, earningsTableFilterAvatar: { - backgroundColor: theme.palette.stats.feta, + backgroundColor: theme.palette.primary.lightVery, color: theme.palette.primary.main, - marginLeft: '0.5rem', - width: '30px', - height: '30px', + marginLeft: theme.spacing(2), + width: theme.spacing(7.5), + height: theme.spacing(7.5), }, earningsFIlterSelectFormControl: { - width: '100%', - marginTop: '20px', + marginTop: theme.spacing(6), }, }); @@ -117,42 +109,44 @@ const earningTableFilterStyles = (theme) => ({ */ const earningsTableStyles = (theme) => ({ earningsTable: { - padding: '0px 40px 0px 40px', + padding: theme.spacing(0, 10, 0, 10), }, earningsTableHeadSortIcon: { color: `${theme.palette.primary.main} !important`, - padding: '1px', + padding: theme.spacing(0.25), backgroundColor: theme.palette.primary.lightVery, - fontSize: '1.5em', + fontSize: theme.spacing(6), }, arrowDropDownIcon: { color: `${theme.palette.primary.main}`, position: 'relative', - top: '5px', - left: '5px', + top: theme.spacing(1), + left: theme.spacing(1), }, infoIcon: { color: `${theme.palette.primary.main}`, backgroundColor: theme.palette.primary.lightVery, - padding: '3px', - margin: ' 0 4px 0 0', - fontSize: '0.9em', + padding: theme.spacing(1), + margin: theme.spacing(0, 1, 0, 0), + fontSize: theme.spacing(4), position: 'relative', - top: '3px', - left: '5px', + top: theme.spacing(1), + left: theme.spacing(1), }, earningsTablePagination: { border: 'none', - paddingRight: '0px', + paddingRight: theme.spacing(0), }, selectRoot: { - border: `1px solid ${theme.palette.stats.lavenderPinocchio}`, - borderRadius: '3px', - padding: '4px', + border: `${theme.spacing(0.25)} solid ${ + theme.palette.stats.lavenderPinocchio + }`, + borderRadius: theme.spacing(1), + padding: theme.spacing(1), }, }); @@ -170,7 +164,7 @@ const useStyles = makeStyles((theme) => { return { ...earningsTableTopBar, ...earningsTable, - ...earningTableFilterStyles, + ...earningTableFilter, }; }); diff --git a/src/components/common/theme.js b/src/components/common/theme.js index 1d7807a50..f21dbe2a5 100644 --- a/src/components/common/theme.js +++ b/src/components/common/theme.js @@ -6,12 +6,13 @@ import { createMuiTheme } from '@material-ui/core/styles'; /** * @constant * @type {object} + * @name COLORS * @description other colors used in the UI * @see {@link https://colors.artyclick.com/color-name-finder/} - to learn how * color names are generated */ const COLORS = { - lavenderPinocchio: '#E0E0E0', // used for the borders + lavenderPinocchio: '#E0E0E0', // used for some of the borders carbonGrey: '#585B5D', // used for adding contrast in texts black: '#000', // used as text color white: '#fff', // used as text color From f8bad91a88cc6def596b8799c825825bbfc518d5 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 18 Nov 2021 09:35:12 +0300 Subject: [PATCH 52/56] feat(earnings table): change rows per page options --- src/components/EarningsTable/EarningsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 57f9f7fec..11b7bc122 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -471,7 +471,7 @@ export default function EarningsTable() { root: classes.earningsTablePagination, }} component="div" - rowsPerPageOptions={[5, 10, 20, { label: 'All', value: -1 }]} + rowsPerPageOptions={[20, 50, 100, { label: 'All', value: -1 }]} page={page} rowsPerPage={rowsPerPage} onChangePage={handleChangePage} From 2b91264f0752a2aa16eeb07073e0d334a0d9b925 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 18 Nov 2021 09:53:40 +0300 Subject: [PATCH 53/56] feat(earnings table): use ernings table metadata to handle show/hide info icon --- src/components/EarningsTable/EarningsTable.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 11b7bc122..47a5c857e 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -365,14 +365,14 @@ EarningsTableTopBar.propTypes = { /** * @constant * @name earningTableMetaData - * @description infomation about column that will display an instance of earning + * @description infomation about column that will display an instance of Earning */ const earningTableMetaData = [ { description: 'Grower', name: 'grower' }, { description: 'Funder', name: 'funder' }, { description: 'Amount', name: 'amount' }, { description: 'Payment System', name: 'paymentSystem' }, - { description: 'Effective Date', name: 'effectiveDate' }, + { description: 'Effective Date', name: 'effectiveDate', info: true }, { description: 'Payment Date', name: 'paymentDate' }, ]; @@ -436,7 +436,7 @@ export default function EarningsTable() { > {column.description} - {i === earningTableMetaData.length - 2 && ( + {column?.info && ( )} From 29a1602b52a2a6cc59a2a4fe808e83820d51afcc Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 18 Nov 2021 21:18:20 +0300 Subject: [PATCH 54/56] chore(app context): remove unused GrowerProvider variable --- src/context/AppContext.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/context/AppContext.js b/src/context/AppContext.js index ad904a09a..3fc0f7653 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -25,7 +25,6 @@ import CategoryIcon from '@material-ui/icons/Category'; import HomeIcon from '@material-ui/icons/Home'; import CompareIcon from '@material-ui/icons/Compare'; import CreditCardIcon from '@material-ui/icons/CreditCard'; -import { GrowerProvider } from './GrowerContext'; import { session, hasPermission, POLICIES } from '../models/auth'; import api from '../api/treeTrackerApi'; From 8a3d987a6094a08ff762b8e9e1d0090e83790959 Mon Sep 17 00:00:00 2001 From: mloweedgar Date: Thu, 18 Nov 2021 22:57:42 +0300 Subject: [PATCH 55/56] feat(earnings details): implement earning details UI --- src/components/EarningsTable/EarningsTable.js | 144 ++++++++++++++++-- .../EarningsTable/EarningsTable.styles.js | 27 +++- 2 files changed, 156 insertions(+), 15 deletions(-) diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 47a5c857e..00e809c36 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -19,6 +19,7 @@ import IconFilter from '@material-ui/icons/FilterList'; import Button from '@material-ui/core/Button'; import Divider from '@material-ui/core/Divider'; import CloseIcon from '@material-ui/icons/Close'; +import TextField from '@material-ui/core/TextField'; import PropTypes from 'prop-types'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import Avatar from '@material-ui/core/Avatar'; @@ -192,8 +193,8 @@ function EarningDetails(props) { direction="column" className={classes.earningsTableFilterForm} > - {/* start filter header */} - + {/* start earning details header */} + - {/* end filter header */} + {/* end earnings detail header */} - {/* start filter form */} - + {/* start earning details contents */} + - + Id - {selectedEarning.id} + {selectedEarning.id} - + Grower - {selectedEarning.grower} + {selectedEarning.grower} - + Funder - {selectedEarning.funder} + {selectedEarning.funder} - + + + + + Amount + {selectedEarning.amount} + + + + Currency + Us Dollar + + + + + + + + Status + Waiting payment + + + + + Effective Payment Date + + + + {selectedEarning.effectiveDate} + + + + + + + + + Consolidation + + + + Consolidation Type + 087654321 + + + + + + Start Date + Aug 10, 2021 + + + + End Date + Aug 10, 2021 + + + + + + + + + + Payment + + + + + + + + + + Payment System + + + + + + + + Payment Confirmed by + User24352 + + + + Payment confirmation method + User24352 + + + + + - APPLY + LOG PAYMENT