From dcde2629e62e3e521e244f8f9799ffa0aa6be3f1 Mon Sep 17 00:00:00 2001
From: rajakvk <rajakvk.public@gmail.com>
Date: Wed, 29 Dec 2021 20:40:28 +0530
Subject: [PATCH] feat: show available room for income and expense for each
 category

109
---
 .../finance/FinanceCategories/index.tsx       |  3 +++
 .../FinanceCategoryList/CategorySummary.css   | 10 +++++++++
 .../FinanceCategoryList/CategorySummary.tsx   | 21 +++++++++++++++++++
 .../finance/FinanceCategoryList/index.tsx     | 11 ++++++++--
 pages/_app.tsx                                |  1 +
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 components/finance/FinanceCategoryList/CategorySummary.css
 create mode 100644 components/finance/FinanceCategoryList/CategorySummary.tsx

diff --git a/components/finance/FinanceCategories/index.tsx b/components/finance/FinanceCategories/index.tsx
index eceb15b..9640e6c 100644
--- a/components/finance/FinanceCategories/index.tsx
+++ b/components/finance/FinanceCategories/index.tsx
@@ -23,6 +23,9 @@ const FinanceCategories = ({ columns, activeCell, setActiveCell }: financeCatego
         incomeOrExpense
         order
         id
+        plannedTotal
+        actualTotal
+        balanceTotal
       }
     }
   `
diff --git a/components/finance/FinanceCategoryList/CategorySummary.css b/components/finance/FinanceCategoryList/CategorySummary.css
new file mode 100644
index 0000000..4683e0c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/components/finance/FinanceCategoryList/CategorySummary.tsx b/components/finance/FinanceCategoryList/CategorySummary.tsx
new file mode 100644
index 0000000..39e3cad
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/components/finance/FinanceCategoryList/index.tsx b/components/finance/FinanceCategoryList/index.tsx
index 96e1b85..9411825 100644
--- a/components/finance/FinanceCategoryList/index.tsx
+++ b/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>
     </>
   )
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1d36ae2..dc9f076 100644
--- a/pages/_app.tsx
+++ b/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'