From 765079236f29604bc5b7a0b3dc37b7ec7f788163 Mon Sep 17 00:00:00 2001 From: kit486759 Date: Fri, 17 Sep 2021 16:20:53 -0700 Subject: [PATCH 1/2] feat(plan.tsx): feature add percentage of each expense in plan page --- .../finance/FinanceCategories/index.tsx | 88 +++++++++--- .../finance/FinanceCategoryList/index.tsx | 52 ++++--- components/finance/FinanceSwitch/index.tsx | 4 +- pages/finance/actuals.tsx | 2 +- pages/finance/plan.tsx | 127 +++++++++++++++++- 5 files changed, 226 insertions(+), 47 deletions(-) diff --git a/components/finance/FinanceCategories/index.tsx b/components/finance/FinanceCategories/index.tsx index 8503a73..aa165bc 100644 --- a/components/finance/FinanceCategories/index.tsx +++ b/components/finance/FinanceCategories/index.tsx @@ -1,5 +1,6 @@ /* eslint-disable jsx-a11y/mouse-events-have-key-events */ import { gql, useQuery } from '@apollo/client' +import { useRouter } from 'next/router' import React, { useState } from 'react' import { useToggle } from 'react-use' @@ -17,7 +18,7 @@ type financeCategoriesProps = { const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCategoriesProps) => { const getCategories = () => gql` - query Finance { + { finance { incomeExpenseCategories { name @@ -26,8 +27,19 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego id } } + + charts { + currentMonth { + budget + spent + } + } } ` + + const router = useRouter() + const actualSwitch = router.pathname.split('/')[2] + const leftMargin = 384 const topMargin = 138 const [panelPosition, setPanelPosition] = useState({ @@ -76,32 +88,64 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego }) } + const { currentMonth } = data.charts + const percentage = Math.round((currentMonth[0].spent / currentMonth[0].budget) * 100) + return (
Income/Expense
- + ) : ( +
- - - ))} - + + ))} + + )} {isOn ? (
-
summaryOnClick(item)} - // onKeyDown={() => summaryOnClick(item)} - aria-hidden="true" - role="button" - tabIndex={0} - className={`p-2.5 flex-1 cursor-pointer ${rowIndex === activeRow ? 'bg-workItemActive' : 'bg-workItem'}`} - > - {item.name} -
-
+ {actualsOrPlan === 'actuals' ? ( + <> +
summaryOnClick(item)} + aria-hidden="true" + role="button" + tabIndex={0} + className={`p-2.5 flex-1 cursor-pointer ${rowIndex === activeRow ? 'bg-workItemActive' : 'bg-workItem'}`} + > + {item.name} +
+
+ + ) : ( + <> +
summaryOnClick(item)} + aria-hidden="true" + role="button" + tabIndex={0} + className={`p-2.5 flex-1 cursor-pointer ${rowIndex === activeRow ? 'bg-workItemActive' : 'bg-workItem'}`} + > + {item.name} +
+
+
+ {percentage}% +
+
+ + )} ) } diff --git a/components/finance/FinanceSwitch/index.tsx b/components/finance/FinanceSwitch/index.tsx index 94ee29f..47bfe20 100644 --- a/components/finance/FinanceSwitch/index.tsx +++ b/components/finance/FinanceSwitch/index.tsx @@ -6,10 +6,10 @@ const FinanceSwitch = ({ actualOrPlan }: any) => ( diff --git a/pages/finance/actuals.tsx b/pages/finance/actuals.tsx index cdccc5d..ac5604c 100644 --- a/pages/finance/actuals.tsx +++ b/pages/finance/actuals.tsx @@ -32,7 +32,7 @@ export default withPageAuthRequired(() => {
- +
diff --git a/pages/finance/plan.tsx b/pages/finance/plan.tsx index a9ce582..d273c46 100644 --- a/pages/finance/plan.tsx +++ b/pages/finance/plan.tsx @@ -1,10 +1,125 @@ import { withPageAuthRequired } from '@auth0/nextjs-auth0' -import React from 'react' +import { Button, makeStyles } from '@material-ui/core' +import React, { useState } from 'react' +import FinanceCategories from '../../components/finance/FinanceCategories' +import FinanceDateHeader from '../../components/finance/FinanceDateHeader' import FinanceSwitch from '../../components/finance/FinanceSwitch' +import { dateAfterDays, dateBeforeDays, startDateAfterMonths, startDateBeforeMonths } from '../../lib/date-helper' -export default withPageAuthRequired(() => ( -
- -
-)) +const useStyles = makeStyles({ + button: { + marginLeft: '0.5rem', + fontSize: '1rem', + textTransform: 'none', + }, +}) + +export default withPageAuthRequired(() => { + const classes = useStyles() + const marginLeft = 384 + const spreadSheetWidth = window.innerWidth - marginLeft + const cellWidth = 160 + const dateColumns = Math.ceil(spreadSheetWidth / cellWidth) + + const [values, setValues] = useState({ + startDate: dateBeforeDays(Math.floor(dateColumns / 2)), + endDate: dateAfterDays(Math.ceil(dateColumns / 2 - 1)), + }) + const [activeCell, setActiveCell] = useState([0, 0]) + + return ( +
+
+
+ + +
+
+ setActiveCell(cell)} + /> +
+
+ + + + + +
+
+
+ ) +}) From e1e385cc5c7c79cca55925b3f6c387fbbda7628f Mon Sep 17 00:00:00 2001 From: kit486759 Date: Mon, 18 Oct 2021 17:44:10 -0700 Subject: [PATCH 2/2] feat(finance): show percentage of each expense in plan page --- .../finance/FinanceCategories/index.tsx | 22 ++++++++++----- .../finance/FinanceCategoryList/index.tsx | 27 ++++++++++++++++--- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/components/finance/FinanceCategories/index.tsx b/components/finance/FinanceCategories/index.tsx index aa165bc..5bb2111 100644 --- a/components/finance/FinanceCategories/index.tsx +++ b/components/finance/FinanceCategories/index.tsx @@ -26,6 +26,18 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego order id } + workItemsPlan { + months { + currentMonth + incomeExpenseCategories { + name + incomeOrExpense + currency + plannedTotal + percentageOfTotalExpense + } + } + } } charts { @@ -77,7 +89,8 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego
) const [activeRow, activeColumn] = activeCell - const workItems = data.finance.incomeExpenseCategories + const { workItems, workItemsPlan } = data.finance + const panelSize = 880 const togglePanel = (row: any, col: any) => { @@ -88,9 +101,6 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego }) } - const { currentMonth } = data.charts - const percentage = Math.round((currentMonth[0].spent / currentMonth[0].budget) * 100) - return (
Income/Expense
@@ -121,7 +131,7 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego ) : (
    - {workItems.map((item: any, rowIndex: any) => ( + {workItemsPlan.months[0].incomeExpenseCategories.map((item: any, rowIndex: any) => (
  • setActiveCell([rowIndex, activeColumn])}>
    {actualsOrPlan === 'actuals' ? ( @@ -32,9 +33,29 @@ function FinanceCategoryList({ item, rowIndex, activeRow, summaryOnClick, actual {item.name}
-
- {percentage}% -
+ {percentage === null ? ( +
+ + % + +
+ ) : ( +
+ + {percentage}% + +
+ )}
)}