From 49913ccb6250ba2c67a7ada1b93433f04c0d1f56 Mon Sep 17 00:00:00 2001
From: kacan98 <kacan@dynaway.com>
Date: Sun, 14 Apr 2024 11:03:59 +0200
Subject: [PATCH] Reorder some of the buying expenses

---
 src/components/result/result.tsx      | 19 ++++++++++++-------
 src/components/result/resultBlock.tsx |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/result/result.tsx b/src/components/result/result.tsx
index 6086a74..f17f24f 100644
--- a/src/components/result/result.tsx
+++ b/src/components/result/result.tsx
@@ -35,6 +35,8 @@ function Result() {
     buyingCost,
     sellingCost,
     totalBuying,
+    totalMortgagePaid,
+    totalPrincipalPaid
   } = calculateMortgageDetails({
     yearsStaying,
     initialPropertyValue: propertyPrice,
@@ -67,7 +69,8 @@ function Result() {
   ];
   
   const mortgageDetails: ResultBlockProps["rows"] = [
-    { label: "Remaining debt at the end", value: -1 * remainingBalance },
+    { label: "Total interest paid", value: -1 * totalInterestPaid },
+    { label: "Total principal paid", value: -1 * totalPrincipalPaid },
   ]
   
   const buyingAndSellingDetails: ResultBlockProps["rows"] = [
@@ -76,21 +79,23 @@ function Result() {
   ]
   
   const capitalFromSaleDetails: ResultBlockProps["rows"] = [
-    { label: "Deposit", value: -1 * deposit },
-    { label: "Remaining debt", value: -1 * remainingBalance },
-    { label: "Total interest paid", value: -1 * totalInterestPaid },
     { label: "Original property value", value: propertyPrice },
     { label: "Total property value increase", value: totalPropertyValueIncrease },
+    { label: "Paying off remaining debt", value: -1 * remainingBalance },
   ]
   
   //TODO: this should probably be generalized for all tooltips
-  const capitalFromSale =  propertyPrice + totalPropertyValueIncrease  - deposit - remainingBalance - totalInterestPaid
+  const capitalFromSale = capitalFromSaleDetails.reduce((acc, row) => {
+    if(row === 'divider') return acc;
+    return acc + row.value;
+  }, 0);
 
   const buyingRows: ResultBlockProps["rows"] = [
-    { label: "Interest on mortgage paid", value: - totalInterestPaid, tooltip: <ResultBlock rows={mortgageDetails} heading={'Mortgage details:'}/>},
+    { label: "Deposit", value: -1 * deposit },
+    { label: "Mortgage paid", value: - totalMortgagePaid, tooltip: <ResultBlock rows={mortgageDetails} heading={'Mortgage details:'}/>},
     { label: "Buying and selling costs", value: -1 * (buyingCost + sellingCost), tooltip: <ResultBlock rows={buyingAndSellingDetails} heading={'Buying and selling details:'}/> },
     { label: "Total ownership costs", value: -1 * totalOwnershipCosts, tooltip: <div>Simply ownership cost over the time of staying</div> },
-    { label: "Capital from buying and selling", value: capitalFromSale, tooltip: <ResultBlock heading={'Capital from selling details'} rows={capitalFromSaleDetails} />},
+    { label: "Capital from selling", value: capitalFromSale, tooltip: <ResultBlock heading={'Capital from selling details'} rows={capitalFromSaleDetails} />},
     'divider',
     { label: "Total", value: totalBuying },
   ];
diff --git a/src/components/result/resultBlock.tsx b/src/components/result/resultBlock.tsx
index 7a0bc2a..061f923 100644
--- a/src/components/result/resultBlock.tsx
+++ b/src/components/result/resultBlock.tsx
@@ -11,7 +11,7 @@ export type ResultBlockProps = {
 function ResultBlock({ rows, heading, description }: ResultBlockProps) {
   
   const theme = useTheme();
-  const isBigScreen = useMediaQuery(theme.breakpoints.up('md'))
+  const isBigScreen = useMediaQuery(theme.breakpoints.up('lg'))
   
   return (
     <>