52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
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;
|