Dump nextjs attempt

.eslintrc.json

@@ -12,7 +12,7 @@
     "createDefaultProgram": true,
     "ecmaFeatures": {
       "ecmaVersion": 2017,
-      "jsx": false
+      "jsx": true
     },
     "noWatch": true
   },

mt-next/pages/components/FinancialResultBreakdown.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { ResultTableProps } from './ResultTable'
+import { Col, Divider, Row } from 'antd'
+import { formatRupiah } from '../services/Formatters'
+import { InfoCircleOutlined } from '@ant-design/icons'
+import { Documentation } from '../services/DocumentationService'
+
+
+interface BreakEvenPoint {
+  years: number
+  months: number
+}
+
+export const FinancialResultBreakdown: React.FunctionComponent<ResultTableProps> = (props) => {
+  const { t } = useTranslation()
+  const { results, onOpenDocumentation } = props
+  if (!results) {
+    return <div>Invalid Data</div>
+  }
+
+  const monthsInYear = 12
+  const breakEven: BreakEvenPoint = {
+    years: Math.floor(results.breakEvenPointInMonths / monthsInYear),
+    months: Math.round(results.breakEvenPointInMonths % monthsInYear)
+  }
+
+  return (<div className="ant-table">
+    <Divider style={{ marginTop: '1px' }} orientation="left">{t('resultTable.financialHeading')}</Divider>
+    <Row gutter={12}>
+      <Col span={15}>{t('resultTable.currentMonthlyCosts')}</Col>
+      <Col span={9}>{formatRupiah(results.currentMonthlyCosts)}</Col>
+    </Row>
+    <Row gutter={12}>
+      <Col span={15}>{t('resultTable.remainingMonthlyCosts')}&nbsp;
+        <InfoCircleOutlined onClick={() => onOpenDocumentation(Documentation.MinimalPayment,t('resultTable.remainingMonthlyCosts'))}/>
+      </Col>
+      <Col span={9}>- {formatRupiah(results.remainingMonthlyCosts)}</Col>
+    </Row>
+    <Row gutter={12}>
+      <Col span={15}>{t('resultTable.monthlyProfit')}</Col>
+      <Col span={9} className='total'>{formatRupiah(results.monthlyProfit)}</Col>
+    </Row>
+    <Row gutter={12}>
+      <Col span={24} >&nbsp;</Col>
+    </Row>
+    <Row gutter={12}>
+      <Col span={15}>{t('resultTable.yearlyProfit')}</Col>
+      <Col span={9}>{formatRupiah(results.yearlyProfit)}</Col>
+    </Row>
+    <Row gutter={12}>
+      <Col span={11} className='emphasis'>{t('resultTable.breakEven')}&nbsp;
+        <InfoCircleOutlined onClick={() => onOpenDocumentation(Documentation.RoiExplanation,t('resultTable.breakEven'))}/>
+      </Col>
+      <Col span={13} className='emphasis'>{t('resultTable.breakEvenExplanation', { breakEven })}</Col>
+    </Row>
+    <Row gutter={12}>
+      <Col span={24} />
+    </Row>
+  </div>)
+}
+
+

mt-next/pages/components/InfoPane.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Documentation, documentation, Locale } from '../services/DocumentationService'
+import { useTranslation } from 'react-i18next'
+
+interface InfoPaneProps {
+  documentation: Documentation
+}
+
+export const InfoPane: React.FunctionComponent<InfoPaneProps> = (props) => {
+
+  const { i18n } = useTranslation()
+
+  function createMarkup(body: string) {
+    return { __html: body }
+  }
+
+  return (
+    <div className={Documentation[props.documentation]}
+      dangerouslySetInnerHTML={createMarkup(documentation(i18n.resolvedLanguage as Locale, props.documentation))} />
+  )
+}

mt-next/pages/components/InputForm.scss

@@ -0,0 +1,19 @@
+@import '../styles/theme.scss';
+
+.numberCircle {
+    display: inline-block;
+    line-height: 0;
+    font-weight: bold;
+    /*border-radius: 50%;*/
+    /*border: 2px solid;*/
+    font-size: 16px;
+    color: $primary
+}
+
+.numberCircle span {
+    display: inline-block;
+    padding-top: 50%;
+    padding-bottom: 50%;
+    margin-left: 4px;
+    margin-right: 4px;
+}