added funding countdown
This commit is contained in:
18
src/components/DateFormatter/dateFormatter.js
Normal file
18
src/components/DateFormatter/dateFormatter.js
Normal file
@ -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;
|
51
src/components/FundingCalculator/fundingCalculator.js
Normal file
51
src/components/FundingCalculator/fundingCalculator.js
Normal file
@ -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;
|
Reference in New Issue
Block a user