Display summary pane before generation

components/new/new.vue

@@ -50,7 +50,10 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
   @update:tax="(t) => loans[sel].tax = t"
   @continue="generate"
 />
-<summary v-if="hash == '#new/summary'"/>
+<loan-summary v-if="hash == '#new/summary'"
+    :estimate="estimate"
+    :loans="estimate.loans"
+    :sel="sel" />
 
 </div>
 </template>
@@ -58,7 +61,7 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
 <script>
 import { stripLetters, strip, stripInt, stripPerc } from "../../helpers.js" 
 import LoanDetails from "./details.vue"
-import Summary from "./summary.vue"
+import LoanSummary from "./summary.vue"
 
 // The default values of a new estimate
 const example = {
@@ -130,6 +133,7 @@ function setPrice(value) {
 	this.estimate.loans[this.sel].fees.forEach(fee => {
 		if (fee.perc) fee.amount = (fee.perc / 100 * value).toFixed(2)
 	})
+	this.estimate.loans.forEach(l => {l.ltv = 0; l.amount = 0})
 }
 
 
@@ -190,7 +194,7 @@ function generate() {
 // Percentage values of fees always takek precedent over amounts. The conversion
 // happens in setPrice()
 export default {
-	components: { Summary, LoanDetails },
+	components: { LoanSummary, LoanDetails },
 	methods: {
 		generate, createFees, del, create, setPrice, setLtv, setAmount,
 		setDti, setHousingDti

components/new/summary.vue

@@ -1,5 +1,49 @@
 <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>
+<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>