Financial metrics implementation (#111)

* financial metric button added with no functionality

* encapsulating all changes for original framework

* implementation added on metrics, untested

frontend/src/components/FinancialMetrics.jsx

@@ -0,0 +1,51 @@
+import React, { useState, useContext } from 'react';
+import TransactionContext from '../context/TransactionContext';
+
+export default function FinancialMetrics() {
+  const [showMetrics, setShowMetrics] = useState(false);
+  const { balance, currency, convertCurrency, transactions, monthlyMetrics } = useContext(TransactionContext);
+  const [convertedBalance, setConvertedBalance] = useState(0);
+
+  // Function to toggle the visibility of the modal
+  const handleClick = () => {
+    setShowMetrics(!showMetrics);
+  };
+
+  // Calculate and set the converted balance when currency or balance changes
+  React.useEffect(() => {
+    const updateConvertedBalance = async () => {
+      const converted = await convertCurrency(currency, 'NZD', balance); // Convert balance to current currency
+      setConvertedBalance(converted);
+    };
+    updateConvertedBalance();
+  }, [currency, balance, convertCurrency]);
+
+  return (
+    <div className="text-center">
+      <button 
+        onClick={handleClick} 
+        className="bg-green-500 text-white text-button px-3 py-3 min-w-[280px] rounded-full hover:bg-green-600 active:bg-green-700">
+        Financial Metrics
+      </button>
+
+      {/* Conditionally render the modal */}
+      {showMetrics && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white p-5 rounded-lg shadow-lg w-[90%] max-w-lg">
+            <h2 className="text-xl font-semibold mb-4">Financial Metrics</h2>
+            <p><strong>Current Balance:</strong> {convertedBalance} {currency}</p>
+            <p><strong>Spending per Month:</strong> {monthlyMetrics.monthlySpending} {currency}</p>
+            <p><strong>Income per Month:</strong> {monthlyMetrics.monthlyIncome} {currency}</p>
+            <p><strong>% Income Spent:</strong> {monthlyMetrics.percentageSpent.toFixed(2)}%</p>
+            <p><strong>% Income Saved:</strong> {monthlyMetrics.percentageSaved.toFixed(2)}%</p>
+            <button 
+              onClick={handleClick}
+              className="mt-4 bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/context/TransactionContextProvider.jsx

@@ -126,6 +126,38 @@ export function TransactionContextProvider({ children }) {
     }
   };
 
+  // calculates metrics for the user
+  const calculateMetrics = (transactions) => {
+    const now = new Date();
+    const currentMonth = now.getMonth();
+    const currentYear = now.getFullYear();
+
+    let monthlySpending = 0;
+    let monthlyIncome = 0;
+
+    transactions.forEach(transaction => {
+      const transactionDate = new Date(transaction.date);
+      const isCurrentMonth = transactionDate.getMonth() === currentMonth && transactionDate.getFullYear() === currentYear;
+      if (isCurrentMonth) {
+        if (transaction.amount < 0) {
+          monthlySpending += Math.abs(transaction.amount); // Spending is negative
+        } else {
+          monthlyIncome += transaction.amount; // Income is positive
+        }
+      }
+    });
+
+    const percentageSpent = monthlyIncome > 0 ? (monthlySpending / monthlyIncome) * 100 : 0;
+    const percentageSaved = 100 - percentageSpent;
+
+    return {
+      monthlySpending,
+      monthlyIncome,
+      percentageSpent,
+      percentageSaved,
+    };
+  };
+
   //function for handling the selection of transactions for deletion
   const handleSelect = (transactionId, isSelected) => {
     setSelectedTransactions((prev) =>
@@ -154,6 +186,7 @@ export function TransactionContextProvider({ children }) {
     convertCurrency, // returns a promise that resolves to the converted amount
     handleSelect, // function to handle the selection of transactions
     requestUiUpdate, // call this function to request a UI update of the transactions if it is not done automatically
+    monthlyMetrics: calculateMetrics(transactions) // 
   };
 
   return (

frontend/src/pages/Dashboard.jsx

@@ -9,6 +9,7 @@ import SavingsTracker from "../components/SavingsTracker";
 import Banner from "../components/Banner";
 
 import FintrackLogo from "../assets/images/FintrackLogo.png";
+import FinancialMetrics from "../components/FinancialMetrics";
 
 /*
  * When adding your new component:
@@ -21,7 +22,6 @@ import FintrackLogo from "../assets/images/FintrackLogo.png";
 export default function Dashboard() {
   return (
     <>
-
       <div className='flex items-center'>
         <Banner />
       </div>
@@ -40,6 +40,7 @@ export default function Dashboard() {
           <div className="flex flex-col w-[20%] items-center gap-[3%] mt-[121px] pl-12">
             <AddTransactionButton />
             <DeleteTransactionButton />
+            <FinancialMetrics />
             <CurrencyDropdown />
           </div>
         </div>
@@ -48,9 +49,7 @@ export default function Dashboard() {
           <SavingsTracker />
         </div>
 
-        <div className="bg-green-300 flex flex-row justify-center">
-          <p>INCOME STATS</p>
-        </div>
+
       </div>
     </>
   );