feat: show available room for income and expense for each category

components/finance/FinanceCategories/index.tsx

@@ -23,6 +23,9 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego
         incomeOrExpense
         order
         id
+        plannedTotal
+        actualTotal
+        balanceTotal
       }
     }
   `

components/finance/FinanceCategoryList/CategorySummary.css

@@ -0,0 +1,10 @@
+.finance-category-summary-container {
+  height: 100%;
+  background-color: #f16c6c;
+  padding-left: 0;
+  padding: 0.625rem 0;
+}
+.finance-category-summary-details {
+  padding-left: 0.625rem;
+  font-size: 11px;
+}

components/finance/FinanceCategoryList/CategorySummary.tsx

@@ -0,0 +1,21 @@
+type categoriesSummaryProps = {
+  balanceTotal: number
+  plannedTotal: number
+  actualTotal: number
+}
+
+const CategorySummary = ({
+  balanceTotal,
+  plannedTotal,
+  actualTotal
+}: categoriesSummaryProps) => {
+  return (
+    <div className="finance-category-summary-container" style={{width: `${balanceTotal >= 100 ? 100 : balanceTotal}%`}}>
+      <span className="finance-category-summary-details">
+        { balanceTotal >= 100 ? 'Exceeds by 100' : plannedTotal - actualTotal }
+      </span>
+    </div>
+  )
+}
+
+export default CategorySummary;

components/finance/FinanceCategoryList/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import CategorySummary from './CategorySummary'
 
 function FinanceCategoryList({ item, rowIndex, activeRow, summaryOnClick }: any) {
   return (
@@ -14,10 +15,16 @@ function FinanceCategoryList({ item, rowIndex, activeRow, summaryOnClick }: any)
         {item.name}
       </div>
       <div
-        className={`p-2.5 w-24 text-center ${
+        className={`w-24 text-center ${
           item.incomeOrExpense === 'expense' ? 'bg-plannedExpense' : 'bg-plannedIncome'
         }`}
-      />
+      >
+        <CategorySummary 
+          balanceTotal={item.balanceTotal} 
+          plannedTotal={item.plannedTotal} 
+          actualTotal={item.actualTotal}
+        />
+      </div>
     </>
   )
 }

pages/_app.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable global-require */
 
 import '../styles/global.css'
+import '../components/finance/FinanceCategoryList/CategorySummary.css';
 
 import { ApolloProvider } from '@apollo/client'
 import { UserProvider } from '@auth0/nextjs-auth0'