budget-demo/src/views/BudgetPeriodCard.jsx

import { useState, useEffect } from 'react';
import BudgetPeriodTransTable from './BudgetPeriodTransTable';
import './BudgetPeriodCard.scss';

const BudgetPeriodCard = ({periodData}) => {
    const [bankBalance, setBankBalance] = useState(0),
        [projectedLeftover, setProjectedLeftover] = useState(0),
        [bills, setBills] = useState(periodData.bills),
        [paidBills, setPaidBills] = useState([]),
        [unpaidBills, setUnpaidBills] = useState([]),
        [incomes, setIncomes] = useState(periodData.income),
        [paidIncomes, setPaidIncomes] = useState([]),
        [unpaidIncomes, setUnpaidIncomes] = useState([]);

    useEffect(() => { setPaidBills(bills.filter((bill) => bill.paid)); }, [bills]);
    useEffect(() => { setUnpaidBills(bills.filter((bill) => !bill.paid)); }, [bills]);
    useEffect(() => { setPaidIncomes(incomes.filter((income) => income.paid)); }, [incomes]);
    useEffect(() => { setUnpaidIncomes(incomes.filter((income) => !income.paid)); }, [incomes]);
    useEffect(() => {
        setBankBalance(
            periodData.startingAmount - 
            paidBills.reduce((prev, bill) => { return prev + bill.amount; }, 0.0) + 
            paidIncomes.reduce((prev, income) => { return prev + income.amount; }, 0.0)
        );
    }, [paidBills, paidIncomes]);
    useEffect(() => {
        setProjectedLeftover(
            bankBalance - 
            unpaidBills.reduce((prev, bill) => { return prev + bill.amount; }, 0.0) + 
            unpaidIncomes.reduce((prev, income) => { return prev + income.amount; }, 0.0)
        );
    }, [bankBalance, unpaidBills, unpaidIncomes]);

    return (
        <div className='budget-period-card'>
            <div className='card-header'>
                <span className={'lock lock-' + (periodData.locked ? 'locked' : 'unlocked')}>&nbsp;</span>
            </div>
            <div className='card-body'>
                <div className='dates'>
                    <span className='dates-start'>{periodData.startDate.toDateString().split(' ').slice(1).join(' ')}</span>
                    <span> - </span>
                    <span className='dates-end'>{ periodData.endDate.toDateString().split(' ').slice(1).join(' ')}</span> 
                </div>
                <div className='bank-current'>
                    <span className='bank-current-label'>Current Balance</span>
                    <span className='bank-current-value'>{ '$' + parseFloat(bankBalance).toFixed(2) }</span>
                </div>
                <div className='bank-projected'>
                    <span className='bank-projected-label'>Projected Leftover</span>
                    <span className='bank-projected-value'>{ '$' + parseFloat(projectedLeftover).toFixed(2) }</span>
                </div>
                <BudgetPeriodTransTable title={'Unpaid'} transList={ unpaidBills } isBill />
                <BudgetPeriodTransTable title={'Paid'} transList={ paidBills } isBill />
                <BudgetPeriodTransTable title={'Income'} transList={ incomes } />
            </div>
        </div>
    );
};

export default BudgetPeriodCard;