@jjlmoya/utils-finance 1.34.0 → 1.36.0

package/src/tool/mortgageExtraPaymentPlanner/mortgage-amortization-extra-payment-planner.css

@@ -0,0 +1,551 @@
+:root {
+  --n-page: #f6f1e8;
+  --n-surface: #fffdf8;
+  --n-surface-raised: #f0e8da;
+  --n-ink: #18233b;
+  --n-muted: #697286;
+  --n-line: #d9cfbe;
+  --n-copper: #b45c3b;
+  --n-copper-soft: #f0d7c8;
+  --n-navy: #1d4367;
+  --n-navy-soft: #dce9f1;
+  --n-positive: #24735a;
+  --n-positive-soft: #dcefe6;
+  --n-warning: #8a4b24;
+  --n-warning-soft: #f5e1c7;
+  --n-shadow: #18233b1a;
+}
+
+.theme-dark {
+  --n-page: #15191f;
+  --n-surface: #202832;
+  --n-surface-raised: #293440;
+  --n-ink: #f7f2e9;
+  --n-muted: #b4bcc9;
+  --n-line: #46525f;
+  --n-copper: #e38a62;
+  --n-copper-soft: #573b34;
+  --n-navy: #90c1e2;
+  --n-navy-soft: #293f52;
+  --n-positive: #78d0a6;
+  --n-positive-soft: #23463a;
+  --n-warning: #edb36f;
+  --n-warning-soft: #4d382b;
+  --n-shadow: #0003;
+}
+
+.mortgage-planner {
+  --n-card: var(--n-surface);
+  --n-input: var(--n-surface);
+  --n-scene: var(--n-page);
+
+  background: var(--n-card);
+  border: 1px solid var(--n-line);
+  border-radius: 1.25rem;
+  box-shadow: 0 0.45rem 1.2rem var(--n-shadow);
+  color: var(--n-ink);
+  overflow: visible;
+}
+
+.mortgage-planner,
+.mortgage-planner * {
+  box-sizing: border-box;
+}
+
+.mortgage-controls,
+.mortgage-output,
+.mortgage-method {
+  padding: clamp(1.15rem, 3vw, 2rem);
+}
+
+.mortgage-output,
+.mortgage-method {
+  border-top: 1px solid var(--n-line);
+}
+
+.mortgage-currency-bar {
+  align-items: center;
+  border-bottom: 1px solid var(--n-line);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem) auto;
+  padding-bottom: 1.25rem;
+}
+
+.mortgage-output-heading,
+.mortgage-annual-heading {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.mortgage-eyebrow {
+  color: var(--n-navy);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.mortgage-status,
+.mortgage-output-currency {
+  color: var(--n-positive);
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.mortgage-currency-help {
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  margin: 0.35rem 0 0;
+}
+
+.mortgage-input-grid,
+.mortgage-extra-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 1.25rem;
+}
+
+.mortgage-extra-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.mortgage-field {
+  min-width: 0;
+}
+
+.mortgage-currency-control {
+  margin: 0;
+}
+
+.mortgage-field-major {
+  grid-column: span 2;
+}
+
+.mortgage-field label {
+  color: var(--n-ink);
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 750;
+  margin-bottom: 0.45rem;
+}
+
+.mortgage-field > span {
+  color: var(--n-muted);
+  display: block;
+  font-size: 0.74rem;
+  line-height: 1.35;
+  margin-top: 0.42rem;
+}
+
+.mortgage-field input,
+.mortgage-select-trigger {
+  background: var(--n-input);
+  border: 1px solid var(--n-line);
+  border-radius: 0.75rem;
+  color: var(--n-ink);
+  font: inherit;
+  min-height: 3rem;
+  padding: 0.75rem 0.85rem;
+  width: 100%;
+}
+
+.mortgage-field input[type='date'] {
+  color-scheme: light;
+}
+
+.theme-dark .mortgage-planner .mortgage-field input[type='date'] {
+  color-scheme: dark;
+}
+
+.theme-dark .mortgage-planner .mortgage-field input[type='date']::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  opacity: 0.85;
+}
+
+.mortgage-field input:focus,
+.mortgage-select-trigger:focus,
+.mortgage-select-menu button:focus {
+  border-color: var(--n-copper);
+  box-shadow: 0 0 0 3px var(--n-copper-soft);
+  outline: none;
+}
+
+.mortgage-select {
+  position: relative;
+}
+
+.mortgage-select-trigger {
+  cursor: pointer;
+  padding-right: 2.4rem;
+  position: relative;
+  text-align: left;
+}
+
+.mortgage-select-trigger::after {
+  border-bottom: 2px solid var(--n-copper);
+  border-right: 2px solid var(--n-copper);
+  content: '';
+  height: 0.45rem;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  transform: rotate(45deg);
+  width: 0.45rem;
+}
+
+.mortgage-select-menu {
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  border-radius: 0.75rem;
+  box-shadow: 0 0.9rem 2rem var(--n-shadow);
+  left: 0;
+  max-height: 15rem;
+  overflow: auto;
+  padding: 0.35rem;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  z-index: 5;
+}
+
+.mortgage-select-menu[hidden],
+.mortgage-field[hidden],
+.mortgage-empty[hidden] {
+  display: none;
+}
+
+.mortgage-select-menu button {
+  background: transparent;
+  border: 0;
+  border-radius: 0.5rem;
+  color: var(--n-ink);
+  cursor: pointer;
+  display: block;
+  font: inherit;
+  padding: 0.7rem 0.75rem;
+  text-align: left;
+  width: 100%;
+}
+
+.mortgage-select-menu button:hover,
+.mortgage-select-menu button.is-active {
+  background: var(--n-copper-soft);
+  color: var(--n-ink);
+}
+
+.mortgage-result-note,
+.mortgage-scene-help,
+.mortgage-scene-caption,
+.mortgage-risk-note {
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  line-height: 1.5;
+  margin: 0.75rem 0 0;
+}
+
+.mortgage-extra-details summary,
+.mortgage-method summary {
+  color: var(--n-navy);
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 800;
+  list-style-position: inside;
+}
+
+.mortgage-extra-details {
+  border-top: 1px solid var(--n-line);
+  margin-top: 1.4rem;
+  padding-top: 1.1rem;
+}
+
+.mortgage-output-heading {
+  margin-bottom: 1rem;
+}
+
+.mortgage-output-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
+}
+
+.mortgage-scene {
+  background: var(--n-scene);
+  border: 1px solid var(--n-line);
+  border-radius: 1.25rem;
+  min-height: 15rem;
+  padding: 1rem;
+}
+
+.mortgage-scene svg {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.mortgage-path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 4;
+}
+
+.mortgage-path-baseline {
+  stroke: var(--n-muted);
+  stroke-dasharray: 7 8;
+  stroke-width: 3;
+}
+
+.mortgage-path-plan {
+  stroke: var(--n-copper);
+}
+
+.mortgage-extra-marker {
+  stroke: var(--n-positive);
+  stroke-dasharray: 2 5;
+  stroke-width: 2;
+}
+
+.mortgage-scene-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  margin-top: 0.5rem;
+}
+
+.mortgage-legend-item {
+  align-items: center;
+  color: var(--n-muted);
+  display: inline-flex;
+  font-size: 0.74rem;
+  gap: 0.4rem;
+}
+
+.mortgage-legend-item::before {
+  border-top: 3px solid currentcolor;
+  content: '';
+  display: inline-block;
+  width: 1.4rem;
+}
+
+.mortgage-legend-baseline::before {
+  border-top-style: dashed;
+}
+
+.mortgage-legend-plan {
+  color: var(--n-copper);
+}
+
+.mortgage-scene-caption {
+  color: var(--n-ink);
+  font-weight: 750;
+}
+
+.mortgage-results {
+  align-content: start;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.mortgage-metrics {
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mortgage-metric,
+.mortgage-static-result {
+  background: var(--n-surface-raised);
+  border-left: 3px solid var(--n-line);
+  border-radius: 0.7rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+  padding: 0.8rem;
+}
+
+.mortgage-metric-primary {
+  border-left-color: var(--n-copper);
+  grid-column: span 2;
+}
+
+.mortgage-metric-positive {
+  border-left-color: var(--n-positive);
+}
+
+.mortgage-metric-label {
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  line-height: 1.3;
+}
+
+.mortgage-metric-value {
+  color: var(--n-ink);
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  overflow-wrap: anywhere;
+}
+
+.mortgage-metric-primary .mortgage-metric-value {
+  color: var(--n-copper);
+  font-size: clamp(1.35rem, 3vw, 2rem);
+}
+
+.mortgage-result-note {
+  color: var(--n-positive);
+  font-weight: 750;
+}
+
+.mortgage-empty {
+  background: var(--n-warning-soft);
+  border-left: 3px solid var(--n-warning);
+  color: var(--n-ink);
+  margin: 1rem 0 0;
+  padding: 0.85rem 1rem;
+}
+
+.mortgage-annual-wrap {
+  border-top: 1px solid var(--n-line);
+  margin-top: 1.5rem;
+  padding-top: 1.2rem;
+}
+
+.mortgage-annual-heading h2 {
+  color: var(--n-ink);
+  font-size: 1rem;
+  margin: 0;
+}
+
+.mortgage-annual-heading span {
+  color: var(--n-muted);
+  font-size: 0.75rem;
+}
+
+.mortgage-annual-table-scroll {
+  margin-top: 0.85rem;
+  overflow-x: auto;
+}
+
+.mortgage-annual-table {
+  border-collapse: collapse;
+  min-width: 48rem;
+  width: 100%;
+}
+
+.mortgage-annual-table th,
+.mortgage-annual-table td {
+  border-bottom: 1px solid var(--n-line);
+  padding: 0.65rem 0.55rem;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.mortgage-annual-table th:first-child,
+.mortgage-annual-table td:first-child {
+  text-align: left;
+}
+
+.mortgage-annual-table th {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.mortgage-annual-table td {
+  color: var(--n-ink);
+  font-size: 0.78rem;
+}
+
+.mortgage-annual-table tbody tr:nth-child(odd) {
+  background: var(--n-surface);
+}
+
+.mortgage-annual-table tbody tr:nth-child(even) {
+  background: var(--n-surface-raised);
+}
+
+.mortgage-annual-table tbody tr:hover {
+  background: var(--n-copper-soft);
+}
+
+.mortgage-method p {
+  color: var(--n-muted);
+  font-size: 0.85rem;
+  line-height: 1.6;
+  max-width: 70rem;
+}
+
+.mortgage-risk-note {
+  color: var(--n-warning);
+}
+
+.mortgage-initial-scene {
+  align-items: end;
+  display: flex;
+  gap: 0.45rem;
+  height: 10rem;
+  justify-content: center;
+  padding: 1rem 2rem;
+}
+
+.mortgage-initial-scene span {
+  background: var(--n-copper);
+  border-radius: 999px 999px 0 0;
+  display: block;
+  height: calc(3rem + var(--n-bar, 0rem));
+  width: 1.1rem;
+}
+
+.mortgage-initial-scene span:nth-child(2) { --n-bar: 1.2rem; }
+.mortgage-initial-scene span:nth-child(3) { --n-bar: 2.2rem; }
+.mortgage-initial-scene span:nth-child(4) { --n-bar: 3rem; }
+.mortgage-initial-scene span:nth-child(5) { --n-bar: 3.8rem; }
+
+@media (max-width: 900px) {
+  .mortgage-output-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .mortgage-rate-field {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 680px) {
+  .mortgage-planner {
+    border-radius: 1rem;
+  }
+
+  .mortgage-input-grid,
+  .mortgage-extra-grid,
+  .mortgage-output-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .mortgage-field-major,
+  .mortgage-rate-field,
+  .mortgage-metric-primary {
+    grid-column: auto;
+  }
+
+  .mortgage-metrics {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .mortgage-currency-bar {
+    align-items: flex-start;
+    grid-template-columns: 1fr;
+  }
+
+  .mortgage-currency-control {
+    width: 100%;
+  }
+}

package/src/tool/mortgageExtraPaymentPlanner/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { mortgageExtraPaymentPlanner } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await mortgageExtraPaymentPlanner.i18n[locale]?.();
+---
+
+{content?.seo && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/mortgageExtraPaymentPlanner/storage.ts

@@ -0,0 +1,65 @@
+import type { CurrencyCode, MortgageFrequency, MortgageInputs } from './logic';
+
+const STORAGE_PREFIX = 'jjlmoya:mortgage-extra-payment-planner:v2';
+const LEGACY_STORAGE_KEY = 'jjlmoya:mortgage-extra-payment-planner:v1';
+
+export function readMortgageState(locale = 'en'): Partial<MortgageInputs> {
+  try {
+    const raw = window.localStorage.getItem(storageKey(locale)) ?? legacyState(locale);
+    if (!raw) return {};
+    const parsed: unknown = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') return {};
+    return parseStoredState(parsed as Record<string, unknown>);
+  } catch {
+    return {};
+  }
+}
+
+function parseStoredState(value: Record<string, unknown>): Partial<MortgageInputs> {
+  const currency = storedCurrency(value);
+  if (!currency) return {};
+  return {
+    currency,
+    principal: numberOrUndefined(value.principal),
+    annualRate: numberOrUndefined(value.annualRate),
+    termYears: numberOrUndefined(value.termYears),
+    recurringExtra: numberOrUndefined(value.recurringExtra),
+    oneOffExtra: numberOrUndefined(value.oneOffExtra),
+    oneOffPeriod: numberOrUndefined(value.oneOffPeriod),
+    startDate: typeof value.startDate === 'string' ? value.startDate : undefined,
+    frequency: isFrequency(value.frequency) ? value.frequency : undefined,
+  };
+}
+
+function storedCurrency(value: Record<string, unknown>): CurrencyCode | undefined {
+  if (isCurrency(value.currency)) return value.currency;
+  if (isCurrency(value.loanCurrency)) return value.loanCurrency;
+  return undefined;
+}
+
+function numberOrUndefined(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function isCurrency(value: unknown): value is CurrencyCode {
+  return typeof value === 'string' && ['AUD', 'BRL', 'CAD', 'CHF', 'CNY', 'CZK', 'DKK', 'EUR', 'GBP', 'IDR', 'INR', 'JPY', 'KRW', 'MXN', 'NOK', 'PLN', 'RUB', 'SEK', 'TRY', 'USD'].includes(value);
+}
+
+function isFrequency(value: unknown): value is MortgageFrequency {
+  return value === 'monthly' || value === 'biweekly' || value === 'weekly';
+}
+
+function storageKey(locale: string): string {
+  return `${STORAGE_PREFIX}:${locale.toLowerCase()}`;
+}
+
+function legacyState(locale: string): string | null {
+  return locale.toLowerCase() === 'en' ? window.localStorage.getItem(LEGACY_STORAGE_KEY) : null;
+}
+
+export function writeMortgageState(state: MortgageInputs, locale = 'en'): void {
+  try {
+    window.localStorage.setItem(storageKey(locale), JSON.stringify(state));
+  } catch {
+  }
+}

package/src/tool/mortgageExtraPaymentPlanner/ui.ts

@@ -0,0 +1,48 @@
+import type { CurrencyCode, MortgageFrequency } from './logic';
+
+export interface MortgageExtraPaymentPlannerUI extends Record<string, unknown> {
+  currencyLabel: string;
+  currencyHelp: string;
+  principalLabel: string;
+  principalHelp: string;
+  annualRateLabel: string;
+  annualRateHelp: string;
+  termLabel: string;
+  termHelp: string;
+  frequencyLabel: string;
+  recurringExtraLabel: string;
+  recurringExtraHelp: string;
+  oneOffExtraLabel: string;
+  oneOffExtraHelp: string;
+  oneOffPeriodLabel: string;
+  oneOffPeriodHelp: string;
+  startDateLabel: string;
+  startDateHelp: string;
+  extraSectionTitle: string;
+  outputTitle: string;
+  regularPaymentLabel: string;
+  interestSavedLabel: string;
+  periodsSavedLabel: string;
+  payoffDateLabel: string;
+  totalInterestLabel: string;
+  totalExtraLabel: string;
+  baselineLabel: string;
+  planLabel: string;
+  balanceSceneLabel: string;
+  balanceSceneHelp: string;
+  annualScheduleTitle: string;
+  yearLabel: string;
+  paymentLabel: string;
+  interestLabel: string;
+  principalPaidLabel: string;
+  extraPaidLabel: string;
+  endingBalanceLabel: string;
+  formulaTitle: string;
+  formulaText: string;
+  riskNote: string;
+  emptyMessage: string;
+  invalidInputMessage: string;
+  currencyOptions: Record<CurrencyCode, string>;
+  currencySymbols: Record<CurrencyCode, string>;
+  frequencyOptions: Record<MortgageFrequency, string>;
+}

package/src/tools.ts

@@ -18,5 +18,7 @@ import { REVOLVING_CARD_CALCULATOR_TOOL } from './tool/revolvingCardCalculator';
 import { PESETA_VALUE_TOOL } from './tool/pesetaValue';
 import { SALARY_EMPLOYER_COST_TOOL } from './tool/salaryEmployerCost';
 import { DIVIDEND_YIELD_TOOL } from './tool/dividendYield';
+import { MORTGAGE_EXTRA_PAYMENT_PLANNER_TOOL } from './tool/mortgageExtraPaymentPlanner';
+import { INFLATION_PURCHASING_POWER_TOOL } from './tool/inflationPurchasingPower';
 
-export const ALL_TOOLS: ToolDefinition[] = [COMPOUND_INTEREST_TOOL, FINANCIAL_FREEDOM_TOOL, PROFITABILITY_TOOL, MORTGAGE_TOOL, INFLATION_TOOL, PERCENTAGE_CALCULATOR_TOOL, LATE_INTEREST_TOOL, IBAN_BIC_SWIFT_TOOL, RENT_INCREASE_TOOL, LOTTERY_OPTIMIZER_TOOL, COURT_FEE_CALCULATOR_TOOL, LEGAL_INTEREST_RATE_TOOL, FIRE_CALCULATOR_TOOL, DEBT_SNOWBALL_TOOL, REVOLVING_CARD_CALCULATOR_TOOL, PESETA_VALUE_TOOL, SALARY_EMPLOYER_COST_TOOL, DIVIDEND_YIELD_TOOL];
+export const ALL_TOOLS: ToolDefinition[] = [COMPOUND_INTEREST_TOOL, FINANCIAL_FREEDOM_TOOL, PROFITABILITY_TOOL, MORTGAGE_TOOL, INFLATION_TOOL, PERCENTAGE_CALCULATOR_TOOL, LATE_INTEREST_TOOL, IBAN_BIC_SWIFT_TOOL, RENT_INCREASE_TOOL, LOTTERY_OPTIMIZER_TOOL, COURT_FEE_CALCULATOR_TOOL, LEGAL_INTEREST_RATE_TOOL, FIRE_CALCULATOR_TOOL, DEBT_SNOWBALL_TOOL, REVOLVING_CARD_CALCULATOR_TOOL, PESETA_VALUE_TOOL, SALARY_EMPLOYER_COST_TOOL, DIVIDEND_YIELD_TOOL, MORTGAGE_EXTRA_PAYMENT_PLANNER_TOOL, INFLATION_PURCHASING_POWER_TOOL];