Add breakdown table, redesign results

api/models/projection.ts

@@ -10,4 +10,5 @@ export default interface Projection {
   interestApplied: number;
   totalPaid: number;
   totalInterestApplied: number;
+  threshold: number;
 }

components/layout.tsx → components/Layout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import Footer from "./ui/organisms/footer";
-import Header from "./ui/organisms/header";
+import Footer from "./ui/organisms/Footer";
+import Header from "./ui/organisms/Header";
 
 interface LayoutProps {
   children?: ReactNode | undefined;
@@ -11,11 +11,7 @@ function Layout({ children, className }: LayoutProps) {
   return (
     <div className={className}>
       <Header />
-      <main className="flex justify-center">
-        <div className="p-8 m-8 max-w-7xl w-full bg-white shadow-lg">
-          {children}
-        </div>
-      </main>
+      <main className="container mx-auto my-8">{children}</main>
       <Footer />
     </div>
   );

components/ui/atoms/Container.tsx

@@ -0,0 +1,19 @@
+import classNames from "classnames";
+
+export type ContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export const Container = ({ className, children }: ContainerProps) => {
+  return (
+    <div
+      className={classNames(
+        "mx-0 p-8 sm:mx-8 max-w-7xl bg-white shadow-lg",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};

components/ui/atoms/date-picker.tsx → components/ui/atoms/DatePicker.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import Tooltip from "./tooltip";
+import Tooltip from "./Tooltip";
 import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { ReactDatePickerProps } from "react-datepicker";
@@ -44,7 +44,7 @@ const DatePicker = forwardRef<ReactDatePicker, DatePickerProps>(
         )}
       </>
     );
-  },
+  }
 );
 
 export default DatePicker;

components/ui/atoms/highlight.tsx → components/ui/atoms/Highlight.tsx

@@ -6,7 +6,7 @@ const Highlight = (props: HighlightProps) => {
   const { children } = props;
 
   return (
-    <span className="font-bold background bg-slate-500 px-1 mx-0.5 py-0.5 text-white rounded whitespace-nowrap">
+    <span className="font-semibold bg-slate-200 px-1 mx-0.5 py-px rounded whitespace-nowrap">
       {children}
     </span>
   );

components/ui/atoms/input.tsx → components/ui/atoms/Input.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import Tooltip from "./tooltip";
+import Tooltip from "./Tooltip";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string;
@@ -14,7 +14,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 const Input = forwardRef<HTMLInputElement, InputProps>(function InputGroup(
   props: InputProps,
-  ref,
+  ref
 ) {
   const {
     id,

components/ui/atoms/input-group.tsx → components/ui/atoms/InputGroup.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import Tooltip from "./tooltip";
+import Tooltip from "./Tooltip";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string;
@@ -15,7 +15,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 const InputGroup = forwardRef<HTMLInputElement, InputProps>(function InputGroup(
   props: InputProps,
-  ref,
+  ref
 ) {
   const {
     id,

components/ui/molecules/balanceGraph.tsx → components/ui/molecules/BalanceGraph.tsx

@@ -20,7 +20,7 @@ import {
   getLabelsForGroupedDataCallback,
   groupDataEveryNthPeriod,
 } from "./graphUtils";
-import currencyFormatter from "../../../utils/currencyFormatter";
+import { currencyFormatter } from "../../../utils/currencyFormatter";
 import { DateTime } from "luxon";
 
 ChartJS.register(
@@ -30,7 +30,7 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend,
+  Legend
 );
 
 interface BalanceGraphProps {
@@ -49,11 +49,11 @@ const BalanceGraph = (props: BalanceGraphProps) => {
             this: Scale<CoreScaleOptions>,
             tickValue: string | number,
             index: number,
-            ticks: Tick[],
+            ticks: Tick[]
           ): string {
             return getLabelsForGroupedDataCallback(
               props.results.results,
-              this.getLabelForValue(index),
+              this.getLabelForValue(index)
             );
           },
           autoSkip: false,
@@ -77,7 +77,7 @@ const BalanceGraph = (props: BalanceGraphProps) => {
             }
 
             if (context.parsed.y !== null) {
-              label += currencyFormatter().format(context.parsed.y);
+              label += currencyFormatter.format(context.parsed.y);
             }
 
             return label;
@@ -109,7 +109,7 @@ const BalanceGraph = (props: BalanceGraphProps) => {
   const dataSetsPerLoanType = props.loanTypes.map((loanType, index) => ({
     label: LoanTypeToDescription(loanType),
     data: groupedData.data.map(
-      (x) => x.projections.find((p) => p.loanType == loanType)?.debtRemaining,
+      (x) => x.projections.find((p) => p.loanType == loanType)?.debtRemaining
     ),
     borderColor: colors[index],
     backgroundColor: backgroundColors[index],

components/ui/molecules/loan-repayment-narrative.tsx → components/ui/molecules/LoanRepaymentNarrative.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { DateTime } from "luxon";
 import LoanType from "../../../models/loanType";
 import { Results } from "../../../api/models/results";
-import Highlight from "../atoms/highlight";
-import currencyFormatter from "../../../utils/currencyFormatter";
+import Highlight from "../atoms/Highlight";
+import { currencyFormatter } from "../../../utils/currencyFormatter";
 import { RepaymentStatusToDescription } from "../../../models/repaymentStatus";
 
 interface LoanRepaymentNarrativeProps {
@@ -48,7 +48,7 @@ const LoanRepaymentNarrative: NextPage<LoanRepaymentNarrativeProps> = ({
 
   const explainer = (
     <>
-      Will be{" "}
+      The loan will be{" "}
       {RepaymentStatusToDescription(
         periodCompleteProjection.repaymentStatus
       ).toLowerCase()}{" "}
@@ -58,7 +58,7 @@ const LoanRepaymentNarrative: NextPage<LoanRepaymentNarrativeProps> = ({
 
   return (
     <>
-      <p className="leading-7">
+      <p className="mb-3">
         {paidOffDiff().years > 0 && paidOffDiff().months > 0 && (
           <>
             {explainer}
@@ -83,14 +83,14 @@ const LoanRepaymentNarrative: NextPage<LoanRepaymentNarrativeProps> = ({
         <Highlight>{periodComplete.periodDate.toFormat("LLLL yyyy")}</Highlight>
         .
       </p>
-      <p className="mt-3 leading-7">
+      <p>
         There is{" "}
         <Highlight>
-          {currencyFormatter().format(periodCompleteProjection.totalPaid)}
+          {currencyFormatter.format(periodCompleteProjection.totalPaid)}
         </Highlight>{" "}
         remaining to pay, with{" "}
         <Highlight>
-          {currencyFormatter().format(
+          {currencyFormatter.format(
             periodCompleteProjection.totalInterestApplied
           )}
         </Highlight>{" "}