@jjlmoya/utils-finance 1.22.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-finance",
-    "version": "1.22.0",
+    "version": "1.24.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -28,7 +28,7 @@
         "check": "astro check",
         "type-check": "astro check",
         "test": "vitest run",
-        "preversion": "npm run lint && npm run test",
+        "preversion": "npm run lint && npm run test && npm run build",
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",

package/src/category/index.ts

@@ -13,10 +13,11 @@ import { courtFeeCalculator } from '../tool/courtFeeCalculator/entry';
 import { legalInterestRate } from '../tool/legalInterestRate/entry';
 import { fireCalculator } from '../tool/fireCalculator/entry';
 import { debtSnowball } from '../tool/debtSnowball/entry';
+import { revolvingCardCalculator } from '../tool/revolvingCardCalculator/entry';
 
 export const financeCategory: FinanceCategoryEntry = {
   icon: 'mdi:finance',
-  tools: [compoundInterest, financialFreedom, profitability, 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, revolvingCardCalculator],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -26,6 +26,8 @@ export { percentageCalculator } from './tool/percentageCalculator/entry';
 export type { PercentageCalculatorLocaleContent } from './tool/percentageCalculator/entry';
 export { rentIncrease } from './tool/rentIncreaseCalculator/entry';
 export type { RentIncreaseLocaleContent } from './tool/rentIncreaseCalculator/entry';
+export { revolvingCardCalculator } from './tool/revolvingCardCalculator/entry';
+export type { RevolvingCardCalculatorLocaleContent } from './tool/revolvingCardCalculator/entry';
 export { financeCategory } from './category';
 import { compoundInterest } from './tool/compoundInterest/entry';
 import { financialFreedom } from './tool/financialFreedom/entry';
@@ -41,4 +43,5 @@ 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, financialFreedom, profitability, courtFeeCalculator, debtSnowball, fireCalculator, ibanBicSwift, inflation, lateInterest, legalInterestRate, lotteryOptimizer, mortgage, percentageCalculator, rentIncrease];
+import { revolvingCardCalculator } from './tool/revolvingCardCalculator/entry';
+export const ALL_ENTRIES = [compoundInterest, financialFreedom, profitability, courtFeeCalculator, debtSnowball, fireCalculator, ibanBicSwift, inflation, lateInterest, legalInterestRate, lotteryOptimizer, mortgage, percentageCalculator, rentIncrease, revolvingCardCalculator];

package/src/index.ts

@@ -29,4 +29,5 @@ export { COURT_FEE_CALCULATOR_TOOL } from './tool/courtFeeCalculator';
 export { LEGAL_INTEREST_RATE_TOOL } from './tool/legalInterestRate';
 export { FIRE_CALCULATOR_TOOL } from './tool/fireCalculator';
 export { DEBT_SNOWBALL_TOOL } from './tool/debtSnowball';
+export { REVOLVING_CARD_CALCULATOR_TOOL } from './tool/revolvingCardCalculator';
 

package/src/tests/locale_completeness.test.ts

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

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 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('should have 15 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(15);
     });
 
     it('financeCategory should be defined', () => {

package/src/tool/revolvingCardCalculator/bibliography.astro

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

package/src/tool/revolvingCardCalculator/bibliography.ts

@@ -0,0 +1,24 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Banco de España - Estadísticas de Tipos de Interés',
+    url: 'https://www.bde.es/webbde/es/estadis/infoest/tipos/tipos.html',
+  },
+  {
+    name: 'Sentencia del Tribunal Supremo de España 258/2023 sobre Usura',
+    url: 'https://www.poderjudicial.es/',
+  },
+  {
+    name: 'US Consumer Financial Protection Bureau (CFPB) - Credit Cards',
+    url: 'https://www.consumerfinance.gov/consumer-tools/credit-cards/',
+  },
+  {
+    name: 'UK Financial Conduct Authority (FCA) - Credit Cards Rules',
+    url: 'https://www.fca.org.uk/consumers/credit-cards',
+  },
+  {
+    name: 'Investopedia - Revolving Debt Explained',
+    url: 'https://www.investopedia.com/terms/r/revolvingdebt.asp',
+  },
+];

package/src/tool/revolvingCardCalculator/component.astro

@@ -0,0 +1,315 @@
+---
+import type { KnownLocale } from '../../types';
+import type { RevolvingCardCalculatorUI } from './ui';
+import CalculatorInputs from './components/CalculatorInputs.astro';
+import UsuryChecker from './components/UsuryChecker.astro';
+import AmortizationTable from './components/AmortizationTable.astro';
+import ChartDisplay from './components/ChartDisplay.astro';
+
+import './revolving-card-calculator.css';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: RevolvingCardCalculatorUI;
+}
+
+const { ui = {} as RevolvingCardCalculatorUI } = Astro.props;
+---
+
+<div
+  class="rev-container"
+  data-currency-symbol={ui.currencySymbol}
+  data-percent-symbol={ui.percentSymbol}
+  data-copied-label={ui.copiedLabel}
+  data-usury-safe={ui.usurySafeStatus}
+  data-usury-warning={ui.usuryWarningStatus}
+  data-usury-usurious={ui.usuryUsuriousStatus}
+>
+  <div class="rev-card fade-in">
+    <CalculatorInputs ui={ui} />
+    
+    <UsuryChecker ui={ui} />
+
+    <ChartDisplay ui={ui} />
+
+    <AmortizationTable ui={ui} />
+
+    <div class="action-row">
+      <button class="rev-btn-primary" id="rev-copy-report">
+        {ui.copyTooltip}
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculateAmortization, analyzeUsury } from './logic';
+  import { CURRENCY_SYMBOLS, MARKET_CURRENCY_MAP } from './constants';
+  import type { RevolvingInputs } from './types';
+
+  const container = document.querySelector('.rev-container');
+  const marketSelect = document.getElementById('rev-market') as HTMLSelectElement | null;
+  const currencySelect = document.getElementById('rev-currency') as HTMLSelectElement | null;
+  const customThresholdGroup = document.querySelector('.id-custom-threshold-group') as HTMLDivElement | null;
+  const customThresholdInput = document.getElementById('rev-custom-threshold') as HTMLInputElement | null;
+  const balanceInput = document.getElementById('rev-balance') as HTMLInputElement | null;
+  const creditLimitInput = document.getElementById('rev-credit-limit') as HTMLInputElement | null;
+  const aprInput = document.getElementById('rev-apr') as HTMLInputElement | null;
+  const paymentTypeSelect = document.getElementById('rev-payment-type') as HTMLSelectElement | null;
+  const paymentValueInput = document.getElementById('rev-payment-value') as HTMLInputElement | null;
+  const paymentValueUnit = document.getElementById('rev-payment-value-unit') as HTMLSpanElement | null;
+  const minPaymentGroup = document.getElementById('rev-min-payment-group') as HTMLDivElement | null;
+  const minPaymentInput = document.getElementById('rev-min-payment') as HTMLInputElement | null;
+
+  const usuryBadge = document.getElementById('rev-usury-status-badge');
+  const usuryIcon = document.getElementById('rev-status-icon');
+  const usuryStatusText = document.getElementById('rev-usury-status-text');
+  const usuryStatusDesc = document.getElementById('rev-usury-status-desc');
+  const usuryRefVal = document.getElementById('rev-usury-ref-val');
+  const usuryThresholdVal = document.getElementById('rev-usury-threshold-val');
+
+  const barPrincipal = document.getElementById('rev-bar-principal');
+  const barInterest = document.getElementById('rev-bar-interest');
+  const barPrincipalPct = document.getElementById('rev-bar-principal-pct');
+  const barInterestPct = document.getElementById('rev-bar-interest-pct');
+  const timelineTrack = document.getElementById('rev-timeline-track');
+
+  const totalInterestDisplay = document.getElementById('rev-total-interest');
+  const totalPaidDisplay = document.getElementById('rev-total-paid');
+  const monthsToPayDisplay = document.getElementById('rev-months-to-pay');
+  const yearsToPayDisplay = document.getElementById('rev-years-to-pay');
+  const infiniteDebtAlert = document.getElementById('rev-infinite-debt-alert');
+
+  const toggleTableBtn = document.getElementById('rev-toggle-table-btn');
+  const tableWrapper = document.getElementById('rev-table-wrapper');
+  const tableBody = document.getElementById('rev-table-body');
+  const copyReportBtn = document.getElementById('rev-copy-report');
+
+
+  function getCurrencySymbol(): string {
+    const val = currencySelect?.value || 'USD';
+    return CURRENCY_SYMBOLS[val] || '$';
+  }
+
+  function getPercentSymbol(): string {
+    return container?.getAttribute('data-percent-symbol') || '%';
+  }
+
+  function formatCurrency(value: number): string {
+    return `${getCurrencySymbol()}${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  }
+
+  function formatPercent(value: number): string {
+    return `${value.toFixed(2)}${getPercentSymbol()}`;
+  }
+
+  function updateCurrencySymbols() {
+    const symbol = getCurrencySymbol();
+    document.querySelectorAll('.rev-currency-symbol').forEach((el) => {
+      el.textContent = symbol;
+    });
+  }
+
+  function updatePaymentUnit() {
+    if (!paymentTypeSelect || !paymentValueUnit || !minPaymentGroup) return;
+    if (paymentTypeSelect.value === 'percentage') {
+      paymentValueUnit.textContent = getPercentSymbol();
+      minPaymentGroup.style.display = 'flex';
+    } else {
+      paymentValueUnit.textContent = getCurrencySymbol();
+      minPaymentGroup.style.display = 'none';
+    }
+  }
+
+
+  function handleMarketChange() {
+    if (!marketSelect || !currencySelect) return;
+    const market = marketSelect.value;
+    const currency = MARKET_CURRENCY_MAP[market];
+    if (currency) {
+      currencySelect.value = currency;
+    }
+  }
+
+  function parseNum(el: HTMLInputElement | null, fallback: string): number {
+    return parseFloat(el?.value || fallback);
+  }
+
+  function readRawValues() {
+    return {
+      market: (marketSelect?.value || 'es') as RevolvingInputs['market'],
+      balance: parseNum(balanceInput, '0'),
+      creditLimit: parseNum(creditLimitInput, '0'),
+      apr: parseNum(aprInput, '0'),
+      paymentType: (paymentTypeSelect?.value || 'percentage') as RevolvingInputs['paymentType'],
+      paymentValue: parseNum(paymentValueInput, '0'),
+      minPaymentRaw: parseNum(minPaymentInput, '0'),
+      customThreshold: parseNum(customThresholdInput, '25'),
+    };
+  }
+
+  function getInputs(): RevolvingInputs {
+    const raw = readRawValues();
+    return {
+      balance: raw.balance,
+      creditLimit: raw.creditLimit,
+      apr: raw.apr,
+      paymentType: raw.paymentType,
+      paymentValue: raw.paymentValue,
+      minPaymentValue: raw.paymentType === 'percentage' ? raw.minPaymentRaw : 0,
+      market: raw.market,
+      customThreshold: raw.customThreshold,
+    };
+  }
+
+  function resolveStatusLabel(status: string): string {
+    const labels: Record<string, string> = {
+      safe: container?.getAttribute('data-usury-safe') || 'Legally Standard (Low Risk)',
+      warning: container?.getAttribute('data-usury-warning') || 'High Rate Warning (Medium Risk)',
+      usurious: container?.getAttribute('data-usury-usurious') || 'Potentially Usurious (High Risk)',
+    };
+    return labels[status] ?? labels['usurious']!;
+  }
+
+  function resolveStatusIcon(status: string): string {
+    if (status === 'safe') return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
+    if (status === 'warning') return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 14h-2v-2h2v2zm0-4h-2V7h2v5z"/></svg>';
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
+  }
+
+  function updateUsuryUI(apr: number, market: RevolvingInputs['market'], customThreshold: number) {
+    if (!usuryBadge || !usuryIcon || !usuryStatusText || !usuryStatusDesc || !usuryRefVal || !usuryThresholdVal) return;
+    const analysis = analyzeUsury(apr, market, customThreshold);
+    usuryBadge.className = 'rev-usury-status-container ' + analysis.status;
+    usuryIcon.innerHTML = resolveStatusIcon(analysis.status);
+    usuryStatusText.textContent = resolveStatusLabel(analysis.status);
+    usuryStatusDesc.textContent = analysis.details;
+    usuryRefVal.textContent = formatPercent(analysis.referenceRate);
+    usuryThresholdVal.textContent = formatPercent(analysis.thresholdRate);
+  }
+
+  function updateSummaryDisplay(result: ReturnType<typeof calculateAmortization>) {
+    if (totalInterestDisplay) totalInterestDisplay.textContent = formatCurrency(result.totalInterest);
+    if (totalPaidDisplay) totalPaidDisplay.textContent = formatCurrency(result.totalPaid);
+    if (infiniteDebtAlert) infiniteDebtAlert.style.display = result.isInfinite ? 'flex' : 'none';
+    if (!monthsToPayDisplay || !yearsToPayDisplay) return;
+    if (result.isInfinite) {
+      monthsToPayDisplay.textContent = '∞';
+      yearsToPayDisplay.textContent = 'Never-ending debt';
+    } else {
+      monthsToPayDisplay.textContent = result.monthsToPay.toString();
+      yearsToPayDisplay.textContent = `${(result.monthsToPay / 12).toFixed(1)} years`;
+    }
+  }
+
+  function updateBreakdownBar(principal: number, interest: number) {
+    if (!barPrincipal || !barInterest || !barPrincipalPct || !barInterestPct) return;
+    const total = principal + interest;
+    const pp = total > 0 ? (principal / total) * 100 : 100;
+    const ip = total > 0 ? (interest / total) * 100 : 0;
+    barPrincipal.style.width = `${pp}%`;
+    barInterest.style.width = `${ip}%`;
+    barPrincipalPct.textContent = `${pp.toFixed(0)}%`;
+    barInterestPct.textContent = `${ip.toFixed(0)}%`;
+  }
+
+  function updateTimeline(result: ReturnType<typeof calculateAmortization>) {
+    if (!timelineTrack) return;
+    timelineTrack.innerHTML = '';
+    const fill = document.createElement('div');
+    fill.className = 'rev-timeline-fill';
+    fill.style.width = '100%';
+    if (result.isInfinite || result.schedule.length === 0) {
+      fill.style.background = 'var(--rc-chart-interest)';
+      timelineTrack.appendChild(fill);
+      return;
+    }
+    const step = Math.max(1, Math.floor(result.schedule.length / 10));
+    for (let i = 0; i < result.schedule.length; i += step) {
+      const row = result.schedule[i];
+      if (!row) continue;
+      const marker = document.createElement('div');
+      marker.className = 'rev-timeline-marker';
+      marker.style.cssText = `position:absolute;left:${(i / result.schedule.length) * 100}%;width:6px;height:12px;background:var(--rc-chart-principal);border-radius:3px`;
+      timelineTrack.appendChild(marker);
+    }
+    timelineTrack.appendChild(fill);
+  }
+
+  function updateTableBody(result: ReturnType<typeof calculateAmortization>) {
+    if (!tableBody) return;
+    tableBody.innerHTML = '';
+    result.schedule.slice(0, 120).forEach((row) => {
+      const tr = document.createElement('tr');
+      tr.innerHTML = `<td>${row.month}</td><td>${formatCurrency(row.initialBalance)}</td><td>${formatCurrency(row.interestPaid)}</td><td>${formatCurrency(row.principalPaid)}</td><td>${formatCurrency(row.payment)}</td><td>${formatCurrency(row.finalBalance)}</td>`;
+      tableBody.appendChild(tr);
+    });
+  }
+
+  function updateAmortizationUI(inputs: RevolvingInputs) {
+    const result = calculateAmortization(inputs);
+    updateSummaryDisplay(result);
+    updateBreakdownBar(inputs.balance, result.totalInterest);
+    updateTimeline(result);
+    updateTableBody(result);
+  }
+
+  function calculate() {
+    const inputs = getInputs();
+    if (marketSelect && customThresholdGroup) {
+      customThresholdGroup.style.display = marketSelect.value === 'custom' ? 'flex' : 'none';
+    }
+    updateCurrencySymbols();
+    updatePaymentUnit();
+    updateUsuryUI(inputs.apr, inputs.market, inputs.customThreshold || 25);
+    updateAmortizationUI(inputs);
+  }
+
+  function buildReportText(): string {
+    const inputs = getInputs();
+    const result = calculateAmortization(inputs);
+    const usury = analyzeUsury(inputs.apr, inputs.market, inputs.customThreshold || 25);
+    
+    return [
+      'REVOLVING CARD & USURY SIMULATION REPORT',
+      '========================================',
+      `Outstanding Balance: ${formatCurrency(inputs.balance)}`,
+      `Credit Limit: ${formatCurrency(inputs.creditLimit)}`,
+      `Interest Rate (APR / TAE): ${formatPercent(inputs.apr)}`,
+      `Market context: ${usury.marketName}`,
+      `Usury Compliance: ${usury.status.toUpperCase()} - ${usury.details}`,
+      '----------------------------------------',
+      `Time to Pay Off: ${result.isInfinite ? 'Infinite / Never' : `${result.monthsToPay} months`}`,
+      `Total Interest Paid: ${formatCurrency(result.totalInterest)}`,
+      `Total Amount Repaid: ${formatCurrency(result.totalPaid)}`,
+      '========================================'
+    ].join('\n');
+  }
+
+  function handleCopy() {
+    const text = buildReportText();
+    navigator.clipboard.writeText(text);
+    if (copyReportBtn) {
+      const originalText = copyReportBtn.textContent;
+      copyReportBtn.textContent = container?.getAttribute('data-copied-label') || 'Copied!';
+      setTimeout(() => {
+        copyReportBtn.textContent = originalText;
+      }, 2000);
+    }
+  }
+
+  marketSelect?.addEventListener('change', () => { handleMarketChange(); calculate(); });
+  marketSelect?.addEventListener('input', calculate);
+  [currencySelect, customThresholdInput, balanceInput, creditLimitInput, aprInput, paymentTypeSelect, paymentValueInput, minPaymentInput].forEach((el) => { el?.addEventListener('input', calculate); el?.addEventListener('change', calculate); });
+
+  toggleTableBtn?.addEventListener('click', () => {
+    if (tableWrapper) {
+      const isHidden = tableWrapper.style.display === 'none';
+      tableWrapper.style.display = isHidden ? 'block' : 'none';
+    }
+  });
+
+  copyReportBtn?.addEventListener('click', handleCopy);
+
+  calculate();
+</script>

package/src/tool/revolvingCardCalculator/components/AmortizationTable.astro

@@ -0,0 +1,57 @@
+---
+import type { RevolvingCardCalculatorUI } from '../ui';
+
+interface Props {
+  ui: RevolvingCardCalculatorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="rev-amortization-section">
+  <div class="rev-summary-grid">
+    <div class="rev-summary-card primary-gradient">
+      <span class="rev-summary-label">{ui.totalInterestLabel}</span>
+      <span class="rev-summary-value" id="rev-total-interest">0.00</span>
+    </div>
+
+    <div class="rev-summary-card">
+      <span class="rev-summary-label">{ui.totalPaidLabel}</span>
+      <span class="rev-summary-value" id="rev-total-paid">0.00</span>
+    </div>
+
+    <div class="rev-summary-card">
+      <span class="rev-summary-label">{ui.monthsToPayLabel}</span>
+      <span class="rev-summary-value" id="rev-months-to-pay">0</span>
+      <span class="rev-summary-subvalue" id="rev-years-to-pay">0 years</span>
+    </div>
+  </div>
+
+  <div class="rev-alert-box error" id="rev-infinite-debt-alert" style="display: none;">
+    <div class="rev-alert-icon"></div>
+    <div class="rev-alert-content">{ui.infiniteDebtWarning}</div>
+  </div>
+
+  <div class="rev-table-actions">
+    <button class="rev-btn-secondary" id="rev-toggle-table-btn">
+      {ui.tableTitle}
+    </button>
+  </div>
+
+  <div class="rev-table-container" id="rev-table-wrapper" style="display: none;">
+    <table class="rev-table">
+      <thead>
+        <tr>
+          <th>{ui.tableHeaderMonth}</th>
+          <th>{ui.tableHeaderInitial}</th>
+          <th>{ui.tableHeaderInterest}</th>
+          <th>{ui.tableHeaderPrincipal}</th>
+          <th>{ui.tableHeaderPayment}</th>
+          <th>{ui.tableHeaderFinal}</th>
+        </tr>
+      </thead>
+      <tbody id="rev-table-body">
+      </tbody>
+    </table>
+  </div>
+</div>

package/src/tool/revolvingCardCalculator/components/CalculatorInputs.astro

@@ -0,0 +1,117 @@
+---
+import type { RevolvingCardCalculatorUI } from '../ui';
+
+interface Props {
+  ui: RevolvingCardCalculatorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="rev-inputs-grid">
+  <div class="rev-input-group">
+    <label for="rev-market">{ui.marketLabel}</label>
+    <div class="rev-select-wrapper">
+      <select id="rev-market">
+        <option value="es">{ui.marketES}</option>
+        <option value="us">{ui.marketUS}</option>
+        <option value="uk">{ui.marketUK}</option>
+        <option value="eu">{ui.marketEU}</option>
+        <option value="jp">{ui.marketJP}</option>
+        <option value="kr">{ui.marketKR}</option>
+        <option value="cn">{ui.marketCN}</option>
+        <option value="br">{ui.marketBR}</option>
+        <option value="mx">{ui.marketMX}</option>
+        <option value="pl">{ui.marketPL}</option>
+        <option value="id">{ui.marketID}</option>
+        <option value="tr">{ui.marketTR}</option>
+        <option value="ru">{ui.marketRU}</option>
+        <option value="se">{ui.marketSE}</option>
+        <option value="au">{ui.marketAU}</option>
+        <option value="ca">{ui.marketCA}</option>
+        <option value="custom">{ui.marketCustom}</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="rev-input-group">
+    <label for="rev-currency">{ui.currencyLabel}</label>
+    <div class="rev-select-wrapper">
+      <select id="rev-currency">
+        <option value="EUR">EUR (€)</option>
+        <option value="USD">USD ($)</option>
+        <option value="GBP">GBP (£)</option>
+        <option value="JPY">JPY (¥)</option>
+        <option value="KRW">KRW (₩)</option>
+        <option value="CNY">CNY (¥)</option>
+        <option value="BRL">BRL (R$)</option>
+        <option value="MXN">MXN ($)</option>
+        <option value="PLN">PLN (zł)</option>
+        <option value="IDR">IDR (Rp)</option>
+        <option value="TRY">TRY (₺)</option>
+        <option value="RUB">RUB (₽)</option>
+        <option value="SEK">SEK (kr)</option>
+        <option value="AUD">AUD (A$)</option>
+        <option value="CAD">CAD (C$)</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="rev-input-group id-custom-threshold-group" style="display: none;">
+    <label for="rev-custom-threshold">{ui.customThresholdLabel}</label>
+    <div class="rev-input-wrapper">
+      <input type="number" id="rev-custom-threshold" min="0" max="1000" value="25" step="0.1" />
+      <span class="rev-input-unit">{ui.percentSymbol}</span>
+    </div>
+  </div>
+
+  <div class="rev-input-group">
+    <label for="rev-balance">{ui.balanceLabel}</label>
+    <div class="rev-input-wrapper">
+      <input type="number" id="rev-balance" min="0" value="3000" step="10" />
+      <span class="rev-input-unit rev-currency-symbol">{ui.currencySymbol}</span>
+    </div>
+  </div>
+
+  <div class="rev-input-group">
+    <label for="rev-credit-limit">{ui.creditLimitLabel}</label>
+    <div class="rev-input-wrapper">
+      <input type="number" id="rev-credit-limit" min="0" value="5000" step="100" />
+      <span class="rev-input-unit rev-currency-symbol">{ui.currencySymbol}</span>
+    </div>
+  </div>
+
+  <div class="rev-input-group">
+    <label for="rev-apr">{ui.aprLabel}</label>
+    <div class="rev-input-wrapper">
+      <input type="number" id="rev-apr" min="0" max="1000" value="24" step="0.05" />
+      <span class="rev-input-unit">{ui.percentSymbol}</span>
+    </div>
+  </div>
+
+  <div class="rev-input-group">
+    <label for="rev-payment-type">{ui.paymentTypeLabel}</label>
+    <div class="rev-select-wrapper">
+      <select id="rev-payment-type">
+        <option value="percentage" selected>{ui.paymentTypePercentage}</option>
+        <option value="fixed">{ui.paymentTypeFixed}</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="rev-input-group">
+    <label for="rev-payment-value">{ui.paymentValueLabel}</label>
+    <div class="rev-input-wrapper">
+      <input type="number" id="rev-payment-value" min="0" value="2.5" step="0.1" />
+      <span class="rev-input-unit" id="rev-payment-value-unit">{ui.percentSymbol}</span>
+    </div>
+  </div>
+
+  <div class="rev-input-group" id="rev-min-payment-group">
+    <label for="rev-min-payment">{ui.minPaymentValueLabel}</label>
+    <div class="rev-input-wrapper">
+      <input type="number" id="rev-min-payment" min="0" value="30" step="1" />
+      <span class="rev-input-unit rev-currency-symbol">{ui.currencySymbol}</span>
+    </div>
+  </div>
+</div>

package/src/tool/revolvingCardCalculator/components/ChartDisplay.astro

@@ -0,0 +1,35 @@
+---
+import type { RevolvingCardCalculatorUI } from '../ui';
+
+interface Props {
+  ui: RevolvingCardCalculatorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="rev-chart-container">
+  <div class="rev-chart-header">
+    <h3 class="rev-chart-title">{ui.payoffYearsLabel}</h3>
+  </div>
+
+  <div class="rev-breakdown-bar-wrapper">
+    <div class="rev-bar-labels">
+      <span>Original Principal</span>
+      <span>Total Interest Paid</span>
+    </div>
+    <div class="rev-breakdown-bar">
+      <div id="rev-bar-principal" class="rev-bar-segment principal" style="width: 50%;">
+        <span class="rev-bar-pct" id="rev-bar-principal-pct">50%</span>
+      </div>
+      <div id="rev-bar-interest" class="rev-bar-segment interest" style="width: 50%;">
+        <span class="rev-bar-pct" id="rev-bar-interest-pct">50%</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="rev-timeline-visual">
+    <div class="rev-timeline-track" id="rev-timeline-track">
+    </div>
+  </div>
+</div>