added funding countdown

src/components/DateFormatter/dateFormatter.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DateFormatter = ({ date, color }) => {
+  const formattedDate = new Intl.DateTimeFormat('en-US', { 
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric' }).format(new Date(date));
+  return <div style={{fontSize: '3em', textAlign: 'center', color: color}}>{formattedDate}</div>;
+};
+
+DateFormatter.propTypes = {
+  date: PropTypes.string.isRequired,
+  options: PropTypes.object,
+  color: PropTypes.string
+};
+
+export default DateFormatter;

src/components/FundingCalculator/fundingCalculator.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FundingCalculator = ({ transactions, monthlyCost }) => {
+    const calculateEndDate = (transactions, monthlyCost) => {
+        // Calculate total funds available as of the latest transaction date
+        let totalFunds = 0;
+        let latestDate = new Date(Math.max(...transactions.map(tx => new Date(tx.date))));
+    
+        transactions.forEach(transaction => {
+          const transactionDate = new Date(transaction.date);
+          if (transactionDate <= latestDate) {
+            totalFunds += transaction.amount;
+          }
+        });
+    
+        // Determine how many months the total funds will cover
+        const monthsCovered = totalFunds / monthlyCost;
+        const endDate = new Date(latestDate);
+        endDate.setMonth(endDate.getMonth() + Math.floor(monthsCovered));
+        const remainingDays = (monthsCovered - Math.floor(monthsCovered)) * 30;
+        endDate.setDate(endDate.getDate() + remainingDays);
+    
+        return endDate;
+      };
+
+    const securedUntilDate = calculateEndDate(transactions, monthlyCost);
+    const currentDate = new Date();
+
+    const dateStyle = {
+        color: securedUntilDate >= currentDate ? 'green' : 'red',
+        fontSize: '2.5em', 
+        textAlign: 'center'
+    };
+
+    return (
+        <div style={dateStyle}>{securedUntilDate.toDateString()}</div>
+    );
+};
+
+FundingCalculator.propTypes = {
+    transactions: PropTypes.arrayOf(
+        PropTypes.shape({
+        date: PropTypes.string.isRequired,
+        amount: PropTypes.number.isRequired,
+        })
+    ).isRequired,
+    monthlyCost: PropTypes.number.isRequired,
+};
+
+export default FundingCalculator;