feat(plans): add net balance per months

components/common/ControlButtons/index.tsx

@@ -1,9 +1,21 @@
 import { Button, makeStyles } from '@material-ui/core'
 import React from 'react'
 
-import { dateAfterDays, dateBeforeDays, startDateAfterMonths, startDateBeforeMonths } from '../../../lib/date-helper'
+import {
+  dateAfterDays,
+  dateBeforeDays,
+  getDate,
+  startDateAfterMonths,
+  startDateBeforeMonths,
+} from '../../../lib/date-helper'
 
 const useStyles = makeStyles({
+  component: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: '800px',
+  },
   button: {
     marginLeft: '0.5rem',
     fontSize: '1rem',
@@ -14,7 +26,7 @@ const useStyles = makeStyles({
 function ControlButtons({ dateColumns, values, setValues }: any) {
   const classes = useStyles()
   return (
-    <div>
+    <div className={classes.component}>
       <Button
         size="medium"
         type="submit"
@@ -53,7 +65,7 @@ function ControlButtons({ dateColumns, values, setValues }: any) {
         className={classes.button}
         onClick={() =>
           setValues({
-            startMonth: dateBeforeDays(dateColumns / 2 - 1),
+            startMonth: getDate(),
             endMonth: dateAfterDays(dateColumns / 2 + 1),
           })
         }

components/finance/FinanceMonthHeader/Dropdown.tsx

@@ -0,0 +1,132 @@
+/* eslint-disable react/button-has-type */
+import { gql, useQuery } from '@apollo/client'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import React from 'react'
+
+import Loader from '../../common/Loader'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    main: {
+      display: 'flex',
+      marginTop: '-20px',
+      marginLeft: '-6px',
+      width: '50%',
+      height: '50px',
+    },
+    component1: {
+      display: 'grid',
+    },
+    component2: {
+      display: 'grid',
+      marginTop: '110px',
+      marginLeft: '-100px',
+    },
+    component3: {
+      display: 'grid',
+      marginTop: '240px',
+      marginLeft: '-100px',
+    },
+    component4: {
+      display: 'grid',
+      marginTop: '310px',
+      marginLeft: '-50px',
+    },
+    font: {
+      fontSize: '15px',
+      width: '280px',
+      backgroundColor: '#389bb7',
+      color: 'white',
+      paddingLeft: '200px',
+    },
+    font2: {
+      fontSize: '15px',
+      width: '380px',
+      color: '#57d028',
+      marginTop: '5px',
+    },
+    font3: {
+      color: '#c54582',
+      width: '380px',
+      fontSize: '15px',
+      marginTop: '5px',
+    },
+    font4: {
+      fontSize: '15px',
+      width: '280px',
+      backgroundColor: '#389bb7',
+      color: 'white',
+    },
+    button: {
+      backgroundColor: '#c54582',
+      width: '50px',
+      height: '30px',
+      borderRadius: '5px',
+    },
+  })
+)
+
+const GET_NET_BALANCE = gql`
+  query NetBalance {
+    charts {
+      cashAtHome {
+        amount
+      }
+      banks {
+        balance
+      }
+      creditCards {
+        outstandingBalance
+      }
+    }
+  }
+`
+
+function Dropdown({ plannedIncome, plannedExpense, isActive, setIsActive }: any) {
+  const { loading, error, data } = useQuery(GET_NET_BALANCE)
+  const classes = useStyles()
+
+  if (loading || error)
+    return (
+      <div>
+        <Loader open={loading} error={error} />
+      </div>
+    )
+  const { banks, creditCards } = data.charts
+
+  const bankTotal = banks.reduce((acc: any, curr: any) => acc + curr.balance, 0)
+  const creditCardTotal = creditCards.reduce((acc: any, curr: any) => acc + curr.outstandingBalance, 0)
+
+  const plannedIncomeMonth = plannedIncome.map((month: any) => month)
+  const plannedExpenseMonth = plannedExpense.map((month: any) => month)
+
+  const totalBank = bankTotal
+  const totalCredit = creditCardTotal
+
+  return (
+    <div className={classes.main}>
+      <div className={classes.component1}>
+        <p className={classes.font}>Till Today-{'>'}</p>
+        <p className={classes.font2}>Available cash in hand: {totalBank.toLocaleString()}</p>
+        <p className={classes.font3}>Credit cards outstanding balance: {totalCredit.toLocaleString()}</p>
+      </div>
+      <div className={classes.component2}>
+        <p className={classes.font4}>For remaining days in this month</p>
+        <p className={classes.font2}>Yet to earn This month as per plan: {plannedIncomeMonth.toLocaleString()}</p>
+        <p className={classes.font3}>Yet to spend This month as per plan: {plannedExpenseMonth.toLocaleString()}</p>
+      </div>
+      <div className={classes.component3}>
+        <p className={classes.font4}>Future months (till Feb 2022)</p>
+        {/* <p className={classes.font2}>Planned Income: {total5.toLocaleString()}</p> */}
+        {/* <p className={classes.font3}>Planned Expenses: {total6.toLocaleString()}</p> */}
+      </div>
+      <div className={classes.component4}>
+        <button className={classes.button} onClick={() => setIsActive(!isActive)}>
+          △
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Dropdown

components/finance/FinanceMonthHeader/index.tsx

@@ -6,10 +6,14 @@ import React from 'react'
 
 import { getDate } from '../../../lib/date-helper'
 import Loader from '../../common/Loader'
+import Dropdown from './Dropdown'
 
 const useStyles = makeStyles(() =>
   createStyles({
     todayHeader: {
+      borderWidth: '0 2px 2px 2px',
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
       borderRadius: 0,
       color: 'white',
       width: '10rem',
@@ -32,7 +36,7 @@ const useStyles = makeStyles(() =>
       },
     },
     isActive: {
-      borderWidth: '0 2px',
+      borderWidth: '0 2px 2px 2px',
       borderStyle: 'solid',
       boxSizing: 'border-box',
     },
@@ -43,6 +47,36 @@ const useStyles = makeStyles(() =>
         background: '#255d6d',
       },
     },
+    balance: {
+      marginTop: '-68px',
+      cursor: 'pointer',
+      '&:hover': {
+        background: 'white',
+      },
+    },
+    net: {
+      display: 'inline-block',
+      alignItems: 'center',
+      width: '20px',
+      marginLeft: '145px',
+    },
+    graph: {
+      height: '25px',
+      marginLeft: '30px',
+      display: 'none',
+      '&:hover': {
+        display: 'flex',
+      },
+    },
+    dropdown: {
+      position: 'absolute',
+      marginLeft: '100px',
+      border: '2px solid #c54582',
+      marginTop: '-25px',
+      height: '330px',
+      borderTop: 'none',
+      width: '1000px',
+    },
   })
 )
 
@@ -56,49 +90,134 @@ const GET_HEADINGS = gql`
   }
 `
 
+const NET_BALANCE = gql`
+  query ActualsDates($startMonth: String!, $endMonth: String!) {
+    totalMonthsAmount(startMonth: $startMonth, endMonth: $endMonth) {
+      month
+      totalPlannedIncome
+      totalPlannedExpenses
+    }
+    charts {
+      banks {
+        balance
+      }
+      cashAtHome {
+        amount
+      }
+      creditCards {
+        outstandingBalance
+      }
+    }
+  }
+`
+
 function FinanceMonthHeader({ endMonth, startMonth, activeColumn }: any) {
   const { loading, error, data } = useQuery(GET_HEADINGS, {
     variables: { startMonth: startMonth.format('YYYYMM'), endMonth: endMonth.format('YYYYMM') },
   })
-
+  const {
+    loading: netBalanceLoading,
+    error: netBalanceError,
+    data: netBalanceData,
+  } = useQuery(NET_BALANCE, {
+    variables: { startMonth: startMonth.format('YYYYMM'), endMonth: endMonth.format('YYYYMM') },
+  })
+  const [isActive, setIsActive] = React.useState(false)
   const classes = useStyles()
   const todayDisplayDate = getDate()
 
+  const { banks, creditCards } = netBalanceData?.charts || {}
+  const bankTotal = banks?.reduce((acc: number, curr: any) => acc + curr.balance, 0)
+  const creditCardTotal = creditCards?.reduce((acc: number, curr: any) => acc + curr.outstandingBalance, 0)
+
+  const cashAtHome = netBalanceData?.charts?.cashAtHome?.amount || 0
+  const totalBank = bankTotal
+  const totalCredit = creditCardTotal
+  const totalCash = cashAtHome
+  const net = totalBank - totalCredit + totalCash
+
+  if (netBalanceLoading || netBalanceError) {
+    return (
+      <div>
+        <Loader open={netBalanceLoading} error={netBalanceError} />
+      </div>
+    )
+  }
+
   if (loading || error)
     return (
       <div>
         <Loader open={loading} error={error} />
       </div>
     )
 
+  const { totalMonthsAmount } = netBalanceData
+  const totalPlannedIncome = totalMonthsAmount.map((month: any) => month.totalPlannedIncome)
+  const totalPlannedExpenses = totalMonthsAmount.map((month: any) => month.totalPlannedExpenses)
+
+  const plannedIncome = totalPlannedIncome.map((month: any) => month)
+  const plannedExpense = totalPlannedExpenses.map((month: any) => month)
+  const plannedIncomeExpense = plannedIncome.map(
+    (month: any, index: number) => plannedIncome[index] - plannedExpense[index]
+  )
+
+  const netBalance = plannedIncomeExpense
+  const balance = netBalance.map((month: any) => month)
+  const monthlyBalance = balance.map((month: any, index: number) => balance[index] + net)
+
   const months = data.actualMonths
 
   return (
-    <div className="flex">
-      {months.map((x: any, columnIndex: any) => {
-        const newStyle = todayDisplayDate === x.month ? classes.todayHeader : classes.dateHeader
-
-        return (
-          <>
-            {columnIndex === 0 && (
-              <div>
-                <p className="bg-plannedExpense h-8 w-24 text-sm text-center">Expenses</p>
-                <p className=" h-8 w-24 mt-2 text-sm text-center">Net Balance</p>
-              </div>
-            )}
-            <div key={x.month} className={`flex flex-col  ${isEqual(columnIndex, activeColumn) && classes.isActive}`}>
-              <Button
-                size="small"
-                variant="contained"
-                className={`${newStyle} ${isEqual(columnIndex, activeColumn) && classes.isActiveDate}`}
-              >
-                {x.month.toLocaleString('default', { month: 'long' })}
-              </Button>
-            </div>
-          </>
-        )
-      })}
-    </div>
+    <>
+      <div>
+        <div className="flex">
+          {months.map((x: any, columnIndex: any) => {
+            const newStyle = todayDisplayDate === x.month ? classes.todayHeader : classes.dateHeader
+
+            return (
+              <>
+                {columnIndex === 0 && (
+                  <div>
+                    <p className="bg-plannedExpense h-8 w-24 text-sm text-center">Expenses</p>
+                    <p className=" h-8 w-24 mt-2 text-sm text-center">Net Balance</p>
+                  </div>
+                )}
+                <div
+                  key={x.month}
+                  className={`flex flex-col  ${isEqual(columnIndex, activeColumn) && classes.isActive}`}
+                >
+                  <Button
+                    size="small"
+                    variant="contained"
+                    className={`${newStyle} ${isEqual(columnIndex, activeColumn) && classes.isActiveDate}`}
+                  >
+                    {x.month.toLocaleString('default', { month: 'long' })}
+                  </Button>
+                </div>
+              </>
+            )
+          })}
+        </div>
+        {monthlyBalance.map((x: any) => (
+          <div className={classes.net}>
+            <Button onClick={() => setIsActive(!isActive)} className={classes.balance}>
+              {x.toLocaleString()}
+              <img className={classes.graph} src="/images/analysis-50x50.jpg" alt="graph" />
+            </Button>
+          </div>
+        ))}
+        {isActive && (
+          <div className={classes.dropdown}>
+            <Dropdown
+              plannedIncome={plannedIncome}
+              plannedExpense={plannedExpense}
+              isActive={isActive}
+              setIsActive={setIsActive}
+            />
+          </div>
+        )}
+      </div>
+    </>
   )
 }