skouter/components/new/summary.vue

<template>
<div>

<section class="form inputs">
<h3>Monthly Payment - ${{totalMonthly}}</h3>
<label>Loan payment: ${{loanPayment}}</label>
<label>Mortgage insurance: $0</label>
<label>Property taxes: ${{loan.tax}}</label>
</section>

<section class="form inputs">
<h3>Cash to Close - ${{totalMonthly}}</h3>
<label>Closing costs: ${{fees}}</label>
<label>Credits: ${{credits}}</label>
<label>Downpayment: ${{downpayment}}</label>
</section>

<section class="form inputs">
<button>Save Estimate</button>
<button>Generage PDF</button>
</section>

</div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['estimate', 'loans', 'sel'])

const loan = props.loans[props.sel]
const rate = loan.interest / 100 / 12
const term = loan.term*12
const loanPayment = loan.amount *
  rate*(1+rate)**(term) /
  ((1+rate)**(term) - 1)
  
const totalMonthly = (loanPayment + loan.tax + loan.hoa + loan.hazard).toFixed(2)
 
// Closing costs
const downpayment = (props.estimate.price - loan.amount).toFixed(2)
const fees = loan.fees.reduce((total, x) => {
        return x.amount > 0 ? total + x.amount : 0
    }, 0
).toFixed(2)
const credits = loan.fees.reduce((total, x) => {
        return x.amount < 0 ? total + x.amount : 0
    }, 0
).toFixed(2)
</script>