Finance: Show percentage of each expense in plan page #144

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,17 +18,40 @@ type financeCategoriesProps = {
 
 const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCategoriesProps) => {
   const getCategories = () => gql`
-    query Finance {
+    {
       finance {
         incomeExpenseCategories {
           name
           incomeOrExpense
           order
           id
         }
+        workItemsPlan {
+          months {
+            currentMonth
+            incomeExpenseCategories {
+              name
+              incomeOrExpense
+              currency
+              plannedTotal
+              percentageOfTotalExpense
+            }
+          }
+        }
+      }
+
+      charts {
+        currentMonth {
+          budget
+          spent
+        }
       }
     }
   `
+
+  const router = useRouter()
+  const actualSwitch = router.pathname.split('/')[2]
+
   const leftMargin = 384
   const topMargin = 138
   const [panelPosition, setPanelPosition] = useState({
@@ -65,7 +89,8 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego
       </div>
     )
   const [activeRow, activeColumn] = activeCell
-  const workItems = data.finance.incomeExpenseCategories
+  const { workItems, workItemsPlan } = data.finance
+
   const panelSize = 880
 
   const togglePanel = (row: any, col: any) => {
@@ -79,29 +104,58 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego
   return (
     <div className="flex flex-col mt-0">
       <div className="h-6">Income/Expense</div>
-      <ul className="flex flex-col mt-0 ml-0">
-        {workItems.map((item: any, rowIndex: any) => (
-          <li key={item.id} className="h-12 flex mt-px">
-            <div className="w-96 flex" onMouseOver={() => setActiveCell([rowIndex, activeColumn])}>
-              <FinanceCategoryList
-                item={item}
-                activeRow={activeRow}
+      {actualSwitch === 'actuals' ? (
+        <ul className="flex flex-col mt-0 ml-0">
+          {workItems.map((item: any, rowIndex: any) => (
+            <li key={item.id} className="h-12 flex mt-px">
+              <div className="w-96 flex" onMouseOver={() => setActiveCell([rowIndex, activeColumn])}>
+                <FinanceCategoryList
+                  item={item}
+                  activeRow={activeRow}
+                  rowIndex={rowIndex}
+                  summaryOnClick={summaryOnClick}
+                  actualsOrPlan={actualSwitch}
+                />
+              </div>
+              <FinanceSpreadSheet
+                columns={columns}
+                rowIndex={rowIndex}
+                activeCell={activeCell}
+                setActiveCell={setActiveCell}
+                togglePanel={togglePanel}
+                totalValues={totalValues}
+                isOn={isOn}
+              />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <ul className="flex flex-col mt-0 ml-0">
+          {workItemsPlan.months[0].incomeExpenseCategories.map((item: any, rowIndex: any) => (
+            <li key={item.id} className="h-12 flex mt-px">
+              <div className="w-96 flex" onMouseOver={() => setActiveCell([rowIndex, activeColumn])}>
+                <FinanceCategoryList
+                  item={item}
+                  activeRow={activeRow}
+                  rowIndex={rowIndex}
+                  summaryOnClick={summaryOnClick}
+                  actualsOrPlan={actualSwitch}
+                  percentage={item.percentageOfTotalExpense}
+                />
+              </div>
+              <FinanceSpreadSheet
+                columns={columns}
                 rowIndex={rowIndex}
-                summaryOnClick={summaryOnClick}
+                activeCell={activeCell}
+                setActiveCell={setActiveCell}
+                togglePanel={togglePanel}
+                totalValues={totalValues}
+                isOn={isOn}
               />
-            </div>
-            <FinanceSpreadSheet
-              columns={columns}
-              rowIndex={rowIndex}
-              activeCell={activeCell}
-              setActiveCell={setActiveCell}
-              togglePanel={togglePanel}
-              totalValues={totalValues}
-              isOn={isOn}
-            />
-          </li>
-        ))}
-      </ul>
+            </li>
+          ))}
+        </ul>
+      )}
       {isOn ? (
         <div>
           <ExpensePanelDetails

components/finance/FinanceCategoryList/index.tsx

@@ -1,23 +1,64 @@
 import React from 'react'
 
-function FinanceCategoryList({ item, rowIndex, activeRow, summaryOnClick }: any) {
+function FinanceCategoryList({ item, rowIndex, activeRow, summaryOnClick, actualsOrPlan, percentage }: any) {
+  // console.log(percentage.toString())
   return (
     <>
-      <div
-        onClick={() => 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}
-      </div>
-      <div
-        className={`p-2.5 w-24 text-center ${
-          item.incomeOrExpense === 'expense' ? 'bg-plannedExpense' : 'bg-plannedIncome'
-        }`}
-      />
+      {actualsOrPlan === 'actuals' ? (
+        <>
+          <div
+            onClick={() => 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}
+          </div>
+          <div
+            className={`p-2.5 w-24 text-center ${
+              item.incomeOrExpense === 'expense' ? 'bg-plannedExpense' : 'bg-plannedIncome'
+            }`}
+          />
+        </>
+      ) : (
+        <>
+          <div
+            onClick={() => 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}
+          </div>
+          <div className={` w-24`}>
+            {percentage === null ? (
+              <div
+                style={{ position: 'relative', textAlign: 'left', height: '100%' }}
+                className="text-center bg-plannedIncome"
+              >
+                <span
+                  style={{ position: 'absolute', top: '50%', transform: 'translate(0, -50%)', paddingLeft: '10px' }}
+                >
+                  %
+                </span>
+              </div>
+            ) : (
+              <div
+                style={{ width: `${percentage.toString()}%`, position: 'relative', textAlign: 'left', height: '100%' }}
+                className="text-center bg-red-200"
+              >
+                <span
+                  style={{ position: 'absolute', top: '50%', transform: 'translate(0, -50%)', paddingLeft: '10px' }}
+                >
+                  {percentage}%
+                </span>
+              </div>
+            )}
+          </div>
+        </>
+      )}
     </>
   )
 }

components/finance/FinanceSwitch/index.tsx

@@ -6,10 +6,10 @@ const FinanceSwitch = ({ actualOrPlan }: any) => (
   <div className="flex justify-center items-center">
     <div className="flex border-2 border-solid border-gray-200 rounded-full">
       <Link href="./actuals">
-        <a className={`py-2 px-4 rounded-l-full ${actualOrPlan === 'Actual' && 'bg-primary text-white'}`}>Actual</a>
+        <a className={`py-2 px-4 rounded-l-full ${actualOrPlan === 'actuals' && 'bg-primary text-white'}`}>Actual</a>
       </Link>
       <Link href="./plan">
-        <a className={`py-2 px-4 rounded-r-full ${actualOrPlan === 'Plan' && 'bg-primary text-white'}`}>Plan</a>
+        <a className={`py-2 px-4 rounded-r-full ${actualOrPlan === 'plan' && 'bg-primary text-white'}`}>Plan</a>
       </Link>
     </div>
   </div>

pages/finance/actuals.tsx

@@ -32,7 +32,7 @@ export default withPageAuthRequired(() => {
     <div>
       <div>
         <div className="grid grid-cols-financeHeader h-16">
-          <FinanceSwitch actualOrPlan="Actual" />
+          <FinanceSwitch actualOrPlan="actuals" />
           <FinanceDateHeader startDate={values.startDate} endDate={values.endDate} activeColumn={activeCell[1]} />
         </div>
         <div className="flex">

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(() => (
-  <div className="grid grid-cols-financeHeader h-16">
-    <FinanceSwitch actualOrPlan="Plan" />
-  </div>
-))
+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 (
+    <div>
+      <div>
+        <div className="grid grid-cols-financeHeader h-16">
+          <FinanceSwitch actualOrPlan="plan" />
+          <FinanceDateHeader startDate={values.startDate} endDate={values.endDate} activeColumn={activeCell[1]} />
+        </div>
+        <div className="flex">
+          <FinanceCategories
+            columns={dateColumns}
+            activeCell={activeCell}
+            setActiveCell={(cell: any) => setActiveCell(cell)}
+          />
+        </div>
+        <div className="text-center block w-full bottom-0 m-4">
+          <Button
+            size="medium"
+            type="submit"
+            variant="contained"
+            color="primary"
+            className={classes.button}
+            onClick={() =>
+              setValues({
+                startDate: startDateAfterMonths(values.startDate, 1),
+                endDate: dateAfterDays(dateColumns, startDateAfterMonths(values.endDate, 1)),
+              })
+            }
+          >
+            &lt;&lt;
+          </Button>
+          <Button
+            size="medium"
+            type="submit"
+            variant="contained"
+            color="primary"
+            className={classes.button}
+            onClick={() =>
+              setValues({
+                startDate: dateBeforeDays(1, values.startDate),
+                endDate: dateBeforeDays(1, values.endDate),
+              })
+            }
+          >
+            &lt;
+          </Button>
+          <Button
+            size="medium"
+            type="submit"
+            variant="contained"
+            color="primary"
+            className={classes.button}
+            onClick={() =>
+              setValues({
+                startDate: dateBeforeDays(dateColumns / 2 - 1),
+                endDate: dateAfterDays(dateColumns / 2 + 1),
+              })
+            }
+          >
+            Today
+          </Button>
+          <Button
+            size="medium"
+            type="submit"
+            variant="contained"
+            color="primary"
+            className={classes.button}
+            onClick={() =>
+              setValues({
+                startDate: dateAfterDays(1, values.startDate),
+                endDate: dateAfterDays(1, values.endDate),
+              })
+            }
+          >
+            &gt;
+          </Button>
+          <Button
+            size="medium"
+            type="submit"
+            variant="contained"
+            color="primary"
+            className={classes.button}
+            onClick={() =>
+              setValues({
+                startDate: startDateBeforeMonths(values.startDate, -1),
+                endDate: dateAfterDays(dateColumns, startDateBeforeMonths(values.endDate, -1)),
+              })
+            }
+          >
+            &gt;&gt;
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+})