@jjlmoya/utils-finance 1.16.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-finance",
-    "version": "1.16.0",
+    "version": "1.18.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,5 +1,7 @@
 import type { FinanceCategoryEntry } from '../types';
 import { compoundInterest } from '../tool/compoundInterest/entry';
+import { financialFreedom } from '../tool/financialFreedom/entry';
+import { profitability } from '../tool/profitability/entry';
 import { mortgage } from '../tool/mortgage/entry';
 import { inflation } from '../tool/inflation/entry';
 import { percentageCalculator } from '../tool/percentageCalculator/entry';
@@ -14,7 +16,7 @@ import { debtSnowball } from '../tool/debtSnowball/entry';
 
 export const financeCategory: FinanceCategoryEntry = {
   icon: 'mdi:finance',
-  tools: [compoundInterest, mortgage, inflation, percentageCalculator, lateInterest, ibanBicSwift, rentIncrease, lotteryOptimizer, courtFeeCalculator, legalInterestRate, fireCalculator, debtSnowball],
+  tools: [compoundInterest, financialFreedom, profitability, mortgage, inflation, percentageCalculator, lateInterest, ibanBicSwift, rentIncrease, lotteryOptimizer, courtFeeCalculator, legalInterestRate, fireCalculator, debtSnowball],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -1,5 +1,9 @@
 export { compoundInterest } from './tool/compoundInterest/entry';
 export type { CompoundInterestLocaleContent } from './tool/compoundInterest/entry';
+export { financialFreedom } from './tool/financialFreedom/entry';
+export type { FinancialFreedomLocaleContent } from './tool/financialFreedom/entry';
+export { profitability } from './tool/profitability/entry';
+export type { ProfitabilityLocaleContent } from './tool/profitability/entry';
 export { courtFeeCalculator } from './tool/courtFeeCalculator/entry';
 export type { CourtFeeCalculatorLocaleContent } from './tool/courtFeeCalculator/entry';
 export { debtSnowball } from './tool/debtSnowball/entry';
@@ -24,6 +28,8 @@ export { rentIncrease } from './tool/rentIncreaseCalculator/entry';
 export type { RentIncreaseLocaleContent } from './tool/rentIncreaseCalculator/entry';
 export { financeCategory } from './category';
 import { compoundInterest } from './tool/compoundInterest/entry';
+import { financialFreedom } from './tool/financialFreedom/entry';
+import { profitability } from './tool/profitability/entry';
 import { courtFeeCalculator } from './tool/courtFeeCalculator/entry';
 import { debtSnowball } from './tool/debtSnowball/entry';
 import { fireCalculator } from './tool/fireCalculator/entry';
@@ -35,4 +41,4 @@ import { lotteryOptimizer } from './tool/lotteryOptimizer/entry';
 import { mortgage } from './tool/mortgage/entry';
 import { percentageCalculator } from './tool/percentageCalculator/entry';
 import { rentIncrease } from './tool/rentIncreaseCalculator/entry';
-export const ALL_ENTRIES = [compoundInterest, courtFeeCalculator, debtSnowball, fireCalculator, ibanBicSwift, inflation, lateInterest, legalInterestRate, lotteryOptimizer, mortgage, percentageCalculator, rentIncrease];
+export const ALL_ENTRIES = [compoundInterest, financialFreedom, profitability, courtFeeCalculator, debtSnowball, fireCalculator, ibanBicSwift, inflation, lateInterest, legalInterestRate, lotteryOptimizer, mortgage, percentageCalculator, rentIncrease];

package/src/tests/locale_completeness.test.ts

@@ -26,7 +26,7 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all 12 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(12);
+    expect(ALL_TOOLS.length).toBe(14);
   });
 });
 

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { financeCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 12 tools in ALL_TOOLS (compoundInterest, mortgage, inflation, percentageCalculator, lateInterest, ibanBicSwift, rentIncrease, lotteryOptimizer, courtFeeCalculator, legalInterestRate, fireCalculator, debtSnowball)', () => {
-      expect(ALL_TOOLS.length).toBe(12);
+    it('should have 14 tools in ALL_TOOLS (compoundInterest, financialFreedom, profitability, mortgage, inflation, percentageCalculator, lateInterest, ibanBicSwift, rentIncrease, lotteryOptimizer, courtFeeCalculator, legalInterestRate, fireCalculator, debtSnowball)', () => {
+      expect(ALL_TOOLS.length).toBe(14);
     });
 
     it('financeCategory should be defined', () => {

package/src/tool/financialFreedom/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { financialFreedom } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await financialFreedom.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/financialFreedom/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Financial Independence, Retire Early (FIRE) - Wikipedia',
+    url: 'https://en.wikipedia.org/wiki/FIRE_movement',
+  },
+  {
+    name: 'The Trinity Study: Retirement Savings and Withdrawal Rates',
+    url: 'https://en.wikipedia.org/wiki/Trinity_study',
+  }
+];

package/src/tool/financialFreedom/component.astro

@@ -0,0 +1,253 @@
+---
+import type { KnownLocale } from '../../types';
+import type { FinancialFreedomUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as FinancialFreedomUI;
+---
+
+<div
+  class="ff-root"
+  data-label-years={t.labelYears}
+  data-label-months={t.labelMonths}
+  data-label-days={t.labelDays}
+  data-label-years-short={t.labelYearsShort}
+  data-label-months-short={t.labelMonthsShort}
+  data-label-days-short={t.labelDaysShort}
+  data-label-red-zone={t.labelRedZone}
+  data-label-yellow-zone={t.labelYellowZone}
+  data-label-green-zone={t.labelGreenZone}
+  data-locale={Astro.props.locale || 'en'}
+>
+  <div class="ff-card">
+    <div class="ff-calculator-grid">
+      <div class="ff-inputs">
+        <div class="ff-input-group">
+          <div class="ff-input-label">
+            <span>{t.labelSavings}</span>
+            <select id="ff-currency-select" class="ff-currency-select">
+              <option value="USD">USD ($)</option>
+              <option value="EUR">EUR (€)</option>
+              <option value="GBP">GBP (£)</option>
+              <option value="JPY">JPY (¥)</option>
+              <option value="CNY">CNY (元)</option>
+              <option value="RUB">RUB (₽)</option>
+              <option value="KRW">KRW (₩)</option>
+              <option value="TRY">TRY (₺)</option>
+              <option value="PLN">PLN (zł)</option>
+              <option value="SEK">SEK (kr)</option>
+              <option value="IDR">IDR (Rp)</option>
+            </select>
+          </div>
+          <input type="number" id="ff-savings-input" value="50000" class="ff-input-field" />
+          <input type="range" id="ff-savings-slider" min="0" max="1000000" step="1000" value="50000" class="ff-slider" />
+        </div>
+
+        <div class="ff-input-group">
+          <div class="ff-input-label">
+            <span>{t.labelExpenses}</span>
+            <div class="ff-switch">
+              <button class="ff-switch-btn active" data-period="monthly">{t.labelMonthly}</button>
+              <button class="ff-switch-btn" data-period="yearly">{t.labelYearly}</button>
+            </div>
+          </div>
+          <input type="number" id="ff-expenses-input" value="2000" class="ff-input-field" />
+          <input type="range" id="ff-expenses-slider" min="0" max="20000" step="100" value="2000" class="ff-slider" />
+        </div>
+      </div>
+
+      <div class="ff-results-main">
+        <div class="ff-time-hero">
+          <div class="ff-time-label">{t.labelTimeRemaining}</div>
+          <div id="ff-time-display" class="ff-time-display">0</div>
+        </div>
+        
+        <div class="ff-time-units">
+          <div class="ff-unit-card">
+            <span id="ff-years" class="ff-unit-val">0</span>
+            <span class="ff-unit-name">{t.labelYears}</span>
+          </div>
+          <div class="ff-unit-card">
+            <span id="ff-months" class="ff-unit-val">0</span>
+            <span class="ff-unit-name">{t.labelMonths}</span>
+          </div>
+          <div class="ff-unit-card">
+            <span id="ff-days" class="ff-unit-val">0</span>
+            <span class="ff-unit-name">{t.labelDays}</span>
+          </div>
+        </div>
+
+        <div id="ff-status" class="ff-status-indicator status-red">
+          <span id="ff-status-text">{t.labelRedZone}</span>
+        </div>
+
+        <div class="ff-burn-grid">
+          <div class="ff-unit-card ff-burn-card">
+            <div class="ff-unit-name">{t.labelBurnRateDaily}</div>
+            <div id="ff-burn-daily" class="ff-burn-val">0</div>
+          </div>
+          <div class="ff-unit-card ff-burn-card">
+            <div class="ff-unit-name">{t.labelBurnRateMonthly}</div>
+            <div id="ff-burn-monthly" class="ff-burn-val">0</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ff-what-if-card">
+      <div class="ff-what-if-title">{t.labelWhatIf}</div>
+      <p class="ff-what-if-desc">{t.labelWhatIfDescription}</p>
+      <div class="ff-gain-display">
+        <span id="ff-gain-time">0</span> {t.labelGainTime}
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { FinancialFreedomCalculator } from './logic';
+  import type { FinancialFreedomResult } from './logic';
+
+  const root = document.querySelector('.ff-root') as HTMLElement;
+  const savingsSlider = document.getElementById('ff-savings-slider') as HTMLInputElement;
+  const savingsInput = document.getElementById('ff-savings-input') as HTMLInputElement;
+  const expensesSlider = document.getElementById('ff-expenses-slider') as HTMLInputElement;
+  const expensesInput = document.getElementById('ff-expenses-input') as HTMLInputElement;
+  const currencySelect = document.getElementById('ff-currency-select') as HTMLSelectElement;
+  const periodBtns = document.querySelectorAll('.ff-switch-btn');
+  
+  const yearsOut = document.getElementById('ff-years');
+  const monthsOut = document.getElementById('ff-months');
+  const daysOut = document.getElementById('ff-days');
+  const burnDailyOut = document.getElementById('ff-burn-daily');
+  const burnMonthlyOut = document.getElementById('ff-burn-monthly');
+  const gainTimeOut = document.getElementById('ff-gain-time');
+  const statusOut = document.getElementById('ff-status');
+  const statusTextOut = document.getElementById('ff-status-text');
+  const timeHeroOut = document.getElementById('ff-time-display');
+  
+  const labelRedZone = root.dataset.labelRedZone || '';
+  const labelYellowZone = root.dataset.labelYellowZone || '';
+  const labelGreenZone = root.dataset.labelGreenZone || '';
+
+  let currentPeriod: 'monthly' | 'yearly' = 'monthly';
+
+  const labelYearsShort = root.dataset.labelYearsShort || 'y';
+  const labelMonthsShort = root.dataset.labelMonthsShort || 'm';
+  const labelDaysShort = root.dataset.labelDaysShort || 'd';
+
+  const formatHumanTimeShort = (res: { years: number; months: number; days: number }) => {
+     if (res.years > 0) return `${res.years}${labelYearsShort} ${res.months}${labelMonthsShort}`;
+     if (res.months > 0) return `${res.months}${labelMonthsShort} ${res.days}${labelDaysShort}`;
+     return `${res.days}${labelDaysShort}`;
+  };
+
+  const setText = (el: HTMLElement | null, text: string) => {
+    if (el) el.innerText = text;
+  };
+
+  const updateDisplay = (result: FinancialFreedomResult, currencyCode: string) => {
+    const locale = root.dataset.locale || 'en';
+    const fmt = (max: number) => new Intl.NumberFormat(locale, {
+      style: 'currency', currency: currencyCode, maximumFractionDigits: max
+    });
+
+    const { years, months, days } = result.humanTime;
+    setText(yearsOut, years.toString());
+    setText(monthsOut, months.toString());
+    setText(daysOut, days.toString());
+    
+    setText(timeHeroOut, formatHumanTimeShort(result.humanTime));
+    setText(burnDailyOut, fmt(2).format(result.dailyBurn));
+    setText(burnMonthlyOut, fmt(0).format(result.monthlyBurn));
+    
+    if (gainTimeOut) {
+      const g = result.gainWithSavings;
+      gainTimeOut.innerText = `${g.years}${labelYearsShort}, ${g.months}${labelMonthsShort}, ${g.days}${labelDaysShort}`;
+    }
+  };
+
+  const updateStatus = (status: string) => {
+    if (!statusOut || !statusTextOut) return;
+    statusOut.className = `ff-status-indicator status-${status}`;
+    if (status === 'red') statusTextOut.innerText = labelRedZone;
+    if (status === 'yellow') statusTextOut.innerText = labelYellowZone;
+    if (status === 'green') statusTextOut.innerText = labelGreenZone;
+  };
+
+  const update = () => {
+    const savings = parseFloat(savingsInput.value) || 0;
+    const expenses = parseFloat(expensesInput.value) || 0;
+    const currencyCode = currencySelect.value;
+
+    const result = FinancialFreedomCalculator.calculate({
+      savings,
+      expenses,
+      expensePeriod: currentPeriod
+    });
+
+    updateDisplay(result, currencyCode);
+    updateStatus(result.status);
+  };
+
+  const syncInput = (slider: HTMLInputElement, input: HTMLInputElement) => {
+    slider.addEventListener('input', () => {
+      input.value = slider.value;
+      update();
+    });
+    input.addEventListener('input', () => {
+      slider.value = input.value;
+      update();
+    });
+  };
+
+  syncInput(savingsSlider, savingsInput);
+  syncInput(expensesSlider, expensesInput);
+
+  currencySelect.addEventListener('change', update);
+
+  const handlePeriodChange = (btn: HTMLElement) => {
+    periodBtns.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentPeriod = btn.dataset.period as 'monthly' | 'yearly';
+    
+    if (currentPeriod === 'monthly') {
+      expensesSlider.max = '20000';
+      expensesSlider.step = '100';
+      if (parseFloat(expensesInput.value) > 20000) expensesInput.value = '20000';
+    } else {
+      expensesSlider.max = '240000';
+      expensesSlider.step = '1000';
+    }
+    expensesSlider.value = expensesInput.value;
+    
+    update();
+  };
+
+  const preselectCurrency = () => {
+    const locale = root.dataset.locale || 'en';
+    const mapping: Record<string, string> = {
+      es: 'EUR', de: 'EUR', fr: 'EUR', it: 'EUR', pt: 'EUR', nl: 'EUR',
+      en: 'USD',
+      tr: 'TRY', pl: 'PLN', sv: 'SEK', id: 'IDR',
+      ru: 'RUB', ja: 'JPY', zh: 'CNY', ko: 'KRW'
+    };
+    if (mapping[locale]) currencySelect.value = mapping[locale];
+  };
+
+  periodBtns.forEach(btn => {
+    btn.addEventListener('click', () => handlePeriodChange(btn as HTMLElement));
+  });
+
+  preselectCurrency();
+  update();
+</script>
+
+<style>
+  @import './financial-freedom-calculator.css';
+</style>

package/src/tool/financialFreedom/entry.ts

@@ -0,0 +1,27 @@
+import type { FinanceToolEntry } from '../../types';
+import type { FinancialFreedomUI } from './ui';
+
+export const financialFreedom: FinanceToolEntry<FinancialFreedomUI> = {
+  id: 'financial-freedom-calculator',
+  icons: {
+    bg: 'mdi:bank-outline',
+    fg: 'mdi:clock-fast',
+  },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};