@jjlmoya/utils-finance 1.1.0

package/src/tool/lateInterest/component.astro

@@ -0,0 +1,655 @@
+---
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div
+  class="li-container"
+  data-currency-symbol={ui.currencySymbol}
+  data-currency-code={ui.currencyCode || 'EUR'}
+  data-currency-locale={ui.currencyLocale || 'es-ES'}
+  data-report-title={ui.reportTitle}
+  data-report-label-principal={ui.reportLabelPrincipal}
+  data-report-label-type={ui.reportLabelType}
+  data-report-label-period={ui.reportLabelPeriod}
+  data-report-label-days={ui.reportLabelDays}
+  data-report-label-interest={ui.reportLabelInterest}
+  data-report-label-total={ui.reportLabelTotal}
+  data-report-days-suffix={ui.reportDaysSuffix}
+>
+    <div class="li-card fade-in">
+        <div class="li-input-grid">
+            <div class="li-input-group">
+                <label for="principal-amount">{ui.labelPrincipal}</label>
+                <div class="li-input-wrapper">
+                    <input
+                        type="number"
+                        id="principal-amount"
+                        placeholder="Ej. 1000"
+                        min="0"
+                        value="1000"
+                        step="0.01"
+                    />
+                    <span class="li-input-unit">{ui.currencySymbol}</span>
+                </div>
+            </div>
+
+            <div class="li-input-group">
+                <label for="interest-type">{ui.labelAnnualRate}</label>
+                <div class="li-input-wrapper">
+                    <select id="interest-type">
+                        <option value="legal">{ui.labelSimpleTitle}</option>
+                        <option value="demora" selected>{ui.labelCompoundTitle}</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="li-input-group">
+                <label for="start-date">{ui.labelDays}</label>
+                <div class="li-input-wrapper">
+                    <input type="date" id="start-date" value="2024-01-01" />
+                </div>
+            </div>
+
+            <div class="li-input-group">
+                <label for="end-date">{ui.labelMonths}</label>
+                <div class="li-input-wrapper">
+                    <input type="date" id="end-date" value="2025-01-01" />
+                </div>
+            </div>
+        </div>
+
+        <div class="li-results-display" id="interest-results">
+            <div class="li-total-interest-box">
+                <span class="li-total-label">{ui.labelTotalInterest}</span>
+                <span class="li-total-value" id="val-total-interest">0,00 {ui.currencySymbol}</span>
+            </div>
+
+            <div class="li-breakdown-grid">
+                <div class="li-sub-result-card">
+                    <span class="li-sub-label">{ui.labelDailyInterest}</span>
+                    <span class="li-sub-value" id="val-days">0 días</span>
+                </div>
+                <div class="li-sub-result-card">
+                    <span class="li-sub-label">{ui.labelEffectiveRate}</span>
+                    <span class="li-sub-value" id="val-rate">0.00{ui.percentSymbol}</span>
+                </div>
+                <div class="li-sub-result-card">
+                    <span class="li-sub-label">{ui.labelTotalAmount}</span>
+                    <span class="li-sub-value" id="val-final-total">0,00 {ui.currencySymbol}</span>
+                </div>
+            </div>
+
+            <div class="li-info-banner">
+                <p>
+                    <strong>{ui.labelFormula}:</strong> {ui.formulaDescription}
+                </p>
+            </div>
+        </div>
+
+        <div class="action-row">
+            <button class="li-btn-primary" id="copy-report">
+                {ui.labelCopyTooltip}
+            </button>
+        </div>
+    </div>
+</div>
+
+<style>
+:root {
+    --li-bg-card: #fff;
+    --li-bg-card-hover: #f9fafb;
+    --li-border-card: #e5e7eb;
+    --li-text-primary: #1f2937;
+    --li-text-secondary: #6b7280;
+    --li-text-input: #1f2937;
+    --li-bg-input: #fff;
+    --li-border-input: #d1d5db;
+    --li-focus-ring: rgba(59, 130, 246, 0.1);
+    --li-focus-border: #3b82f6;
+    --li-unit-color: #3b82f6;
+    --li-bg-result: #f3f4f6;
+    --li-border-result: #d1d5db;
+    --li-label-result: #6b7280;
+    --li-value-result: #1f2937;
+    --li-bg-total-gradient-1: #dbeafe;
+    --li-bg-total-gradient-2: #bfdbfe;
+    --li-border-total: #3b82f6;
+    --li-label-total: #1e40af;
+    --li-value-total: #1e3a8a;
+    --li-bg-banner: #fef3c7;
+    --li-border-banner: #f59e0b;
+    --li-text-banner: #92400e;
+    --li-bg-button: #3b82f6;
+    --li-bg-button-hover: #2563eb;
+    --li-text-button: #fff;
+}
+
+:global(.theme-dark) {
+    --li-bg-card: #1f2937;
+    --li-border-card: #374151;
+    --li-text-primary: #f3f4f6;
+    --li-text-secondary: #d1d5db;
+    --li-text-input: #f3f4f6;
+    --li-bg-input: #111827;
+    --li-border-input: #4b5563;
+    --li-focus-ring: rgba(59, 130, 246, 0.1);
+    --li-focus-border: #3b82f6;
+    --li-unit-color: #60a5fa;
+    --li-bg-result: #111827;
+    --li-border-result: #374151;
+    --li-label-result: #d1d5db;
+    --li-value-result: #f3f4f6;
+    --li-bg-total-gradient-1: #1e3a8a;
+    --li-bg-total-gradient-2: #1e40af;
+    --li-border-total: #3b82f6;
+    --li-label-total: #93c5fd;
+    --li-value-total: #dbeafe;
+    --li-bg-banner: #78350f;
+    --li-border-banner: #f59e0b;
+    --li-text-banner: #fef3c7;
+    --li-bg-button: #3b82f6;
+    --li-bg-button-hover: #1e40af;
+    --li-text-button: #fff;
+}
+
+:global([data-theme='dark']) {
+    --li-bg-card: #1f2937;
+    --li-border-card: #374151;
+    --li-text-primary: #f3f4f6;
+    --li-text-secondary: #d1d5db;
+    --li-text-input: #f3f4f6;
+    --li-bg-input: #111827;
+    --li-border-input: #4b5563;
+    --li-focus-ring: rgba(59, 130, 246, 0.1);
+    --li-focus-border: #3b82f6;
+    --li-unit-color: #60a5fa;
+    --li-bg-result: #111827;
+    --li-border-result: #374151;
+    --li-label-result: #d1d5db;
+    --li-value-result: #f3f4f6;
+    --li-bg-total-gradient-1: #1e3a8a;
+    --li-bg-total-gradient-2: #1e40af;
+    --li-border-total: #3b82f6;
+    --li-label-total: #93c5fd;
+    --li-value-total: #dbeafe;
+    --li-bg-banner: #78350f;
+    --li-border-banner: #f59e0b;
+    --li-text-banner: #fef3c7;
+    --li-bg-button: #3b82f6;
+    --li-bg-button-hover: #1e40af;
+    --li-text-button: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --li-bg-card: #1f2937;
+        --li-border-card: #374151;
+        --li-text-primary: #f3f4f6;
+        --li-text-secondary: #d1d5db;
+        --li-text-input: #f3f4f6;
+        --li-bg-input: #111827;
+        --li-border-input: #4b5563;
+        --li-focus-ring: rgba(59, 130, 246, 0.1);
+        --li-focus-border: #3b82f6;
+        --li-unit-color: #60a5fa;
+        --li-bg-result: #111827;
+        --li-border-result: #374151;
+        --li-label-result: #d1d5db;
+        --li-value-result: #f3f4f6;
+        --li-bg-total-gradient-1: #1e3a8a;
+        --li-bg-total-gradient-2: #1e40af;
+        --li-border-total: #3b82f6;
+        --li-label-total: #93c5fd;
+        --li-value-total: #dbeafe;
+        --li-bg-banner: #78350f;
+        --li-border-banner: #f59e0b;
+        --li-text-banner: #fef3c7;
+        --li-bg-button: #3b82f6;
+        --li-bg-button-hover: #1e40af;
+        --li-text-button: #fff;
+    }
+}
+
+.li-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: 2rem 1rem;
+}
+
+.li-card {
+    background: var(--li-bg-card);
+    border: 1px solid var(--li-border-card);
+    border-radius: 12px;
+    padding: 2rem;
+    width: 100%;
+    max-width: 600px;
+    color: var(--li-text-primary);
+}
+
+.li-input-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.li-input-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.li-input-group label {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--li-text-primary);
+}
+
+.li-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.li-input-wrapper input,
+.li-input-wrapper select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--li-border-input);
+    border-radius: 8px;
+    font-size: 1rem;
+    background: var(--li-bg-input);
+    color: var(--li-text-input);
+    color-scheme: light;
+}
+
+:global(.theme-dark) .li-input-wrapper input,
+:global(.theme-dark) .li-input-wrapper select,
+:global([data-theme='dark']) .li-input-wrapper input,
+:global([data-theme='dark']) .li-input-wrapper select {
+    color-scheme: dark;
+}
+
+.li-input-wrapper select {
+    padding-right: 2.5rem;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233b82f6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 12px 8px;
+}
+
+:global(.theme-dark) .li-input-wrapper select,
+:global([data-theme='dark']) .li-input-wrapper select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2360a5fa' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
+}
+
+.li-input-wrapper input:focus,
+.li-input-wrapper select:focus {
+    outline: none;
+    border-color: var(--li-focus-border);
+    box-shadow: 0 0 0 3px var(--li-focus-ring);
+}
+
+.li-input-unit {
+    position: absolute;
+    right: 1rem;
+    font-weight: 600;
+    color: var(--li-unit-color);
+    pointer-events: none;
+}
+
+.li-results-display {
+    margin-bottom: 2rem;
+}
+
+.li-total-interest-box {
+    background: linear-gradient(135deg, var(--li-bg-total-gradient-1), var(--li-bg-total-gradient-2));
+    border: 2px solid var(--li-border-total);
+    border-radius: 12px;
+    padding: 1.5rem;
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.li-total-label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--li-label-total);
+    margin-bottom: 0.5rem;
+}
+
+.li-total-value {
+    display: block;
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--li-value-total);
+}
+
+.li-breakdown-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.li-sub-result-card {
+    background: var(--li-bg-result);
+    border: 1px solid var(--li-border-result);
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.li-sub-label {
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--li-label-result);
+    margin-bottom: 0.5rem;
+}
+
+.li-sub-value {
+    display: block;
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--li-value-result);
+}
+
+.li-info-banner {
+    background: var(--li-bg-banner);
+    border-left: 4px solid var(--li-border-banner);
+    border-radius: 6px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.li-info-banner p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--li-text-banner);
+}
+
+.action-row {
+    display: flex;
+    gap: 1rem;
+}
+
+.li-btn-primary {
+    flex: 1;
+    padding: 0.75rem 1.5rem;
+    background: var(--li-bg-button);
+    color: var(--li-text-button);
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.li-btn-primary:hover {
+    background: var(--li-bg-button-hover);
+    transform: translateY(-2px);
+}
+
+.li-btn-primary:active {
+    transform: translateY(0);
+}
+
+.fade-in {
+    animation: fade-in-up 0.4s ease-out;
+}
+
+@keyframes fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .li-card {
+        background: #1f2937;
+        border-color: #374151;
+        color: #f3f4f6;
+    }
+
+    .li-input-group label {
+        color: #d1d5db;
+    }
+
+    .li-input-wrapper input,
+    .li-input-wrapper select {
+        background: #111827;
+        border-color: #4b5563;
+        color: #f3f4f6;
+    }
+
+    .li-input-unit {
+        color: #60a5fa;
+    }
+
+    .li-sub-result-card {
+        background: #111827;
+        border-color: #374151;
+    }
+
+    .li-sub-label {
+        color: #d1d5db;
+    }
+
+    .li-sub-value {
+        color: #f3f4f6;
+    }
+
+    .li-info-banner {
+        background: #78350f;
+        color: #fef3c7;
+    }
+
+    .li-info-banner p {
+        color: #fef3c7;
+    }
+
+    .li-total-interest-box {
+        background: linear-gradient(135deg, #1e3a8a, #1e40af);
+        border-color: #3b82f6;
+    }
+
+    .li-total-label {
+        color: #93c5fd;
+    }
+
+    .li-total-value {
+        color: #dbeafe;
+    }
+
+    .li-btn-primary {
+        background: #3b82f6;
+        color: #fff;
+    }
+
+    .li-btn-primary:hover {
+        background: #1e40af;
+    }
+}
+
+@media (max-width: 640px) {
+    .li-input-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .li-breakdown-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .li-total-value {
+        font-size: 1.5rem;
+    }
+}
+</style>
+
+<script>
+    const principalInput = document.getElementById("principal-amount") as HTMLInputElement | null;
+    const typeSelect = document.getElementById("interest-type") as HTMLSelectElement | null;
+    const startInput = document.getElementById("start-date") as HTMLInputElement | null;
+    const endInput = document.getElementById("end-date") as HTMLInputElement | null;
+
+    const totalInterestDisplay = document.getElementById("val-total-interest");
+    const daysDisplay = document.getElementById("val-days");
+    const rateDisplay = document.getElementById("val-rate");
+    const finalTotalDisplay = document.getElementById("val-final-total");
+    const copyBtn = document.getElementById("copy-report");
+    const container = document.querySelector(".li-container");
+
+    const RATE_LEGAL = 3.25;
+    const RATE_DEMORA = 4.0625;
+
+    function getCurrencyLocale(): string {
+        return container?.getAttribute("data-currency-locale") || "es-ES";
+    }
+
+    function getCurrencyCode(): string {
+        return container?.getAttribute("data-currency-code") || "EUR";
+    }
+
+    function formatCurrency(val: number): string {
+        return new Intl.NumberFormat(getCurrencyLocale(), {
+            style: "currency",
+            currency: getCurrencyCode(),
+        }).format(val);
+    }
+
+    function getReportLabel(key: string): string {
+        return container?.getAttribute(`data-report-${key}`) || "";
+    }
+
+    function getCurrencySymbol(): string {
+        return container?.getAttribute("data-currency-symbol") || "€";
+    }
+
+    function getReportLabels() {
+        return {
+            title: getReportLabel("title"),
+            principal: getReportLabel("label-principal"),
+            type: getReportLabel("label-type"),
+            period: getReportLabel("label-period"),
+            days: getReportLabel("label-days"),
+            interest: getReportLabel("label-interest"),
+            total: getReportLabel("label-total"),
+        };
+    }
+
+    function updateElement(el: Element | null, text: string): void {
+        if (el) el.textContent = text;
+    }
+
+    function displayInvalidDates(principal: number): void {
+        const symbol = getCurrencySymbol();
+        updateElement(totalInterestDisplay, `0,00 ${symbol}`);
+        updateElement(daysDisplay, "0 días");
+        updateElement(finalTotalDisplay, formatCurrency(principal));
+    }
+
+    function displayResults(interest: number, diffDays: number, rate: number, principal: number): void {
+        const suffix = getReportLabel("days-suffix");
+        updateElement(totalInterestDisplay, formatCurrency(interest));
+        updateElement(daysDisplay, `${diffDays} ${suffix}`);
+        updateElement(rateDisplay, `${rate}%`);
+        updateElement(finalTotalDisplay, formatCurrency(principal + interest));
+    }
+
+    function areInputsValid(): boolean {
+        return !!(principalInput && typeSelect && startInput && endInput);
+    }
+
+    function areDatesValid(start: Date, end: Date): boolean {
+        return !isNaN(start.getTime()) && !isNaN(end.getTime()) && end >= start;
+    }
+
+    function calculate() {
+        if (!areInputsValid()) return;
+
+        const principal = parseFloat(principalInput!.value) || 0;
+        const type = typeSelect!.value;
+        const rate = type === "legal" ? RATE_LEGAL : RATE_DEMORA;
+
+        const start = new Date(startInput!.value);
+        const end = new Date(endInput!.value);
+
+        if (!areDatesValid(start, end)) {
+            displayInvalidDates(principal);
+            return;
+        }
+
+        const diffTime = Math.abs(end.getTime() - start.getTime());
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        const interest = (principal * diffDays * (rate / 100)) / 365;
+
+        displayResults(interest, diffDays, rate, principal);
+    }
+
+    function getPrincipalForReport(): string {
+        return formatCurrency(parseFloat(principalInput?.value || "0"));
+    }
+
+    function getTypeForReport(): string {
+        return typeSelect?.options[typeSelect.selectedIndex].text || "";
+    }
+
+    function getPeriodForReport(): string {
+        return `${startInput?.value} hasta ${endInput?.value}`;
+    }
+
+    function buildReport(): string {
+        const labels = getReportLabels();
+        const separator = "-".repeat(labels.title.length);
+
+        return `
+${labels.title}
+${separator}
+${labels.principal}: ${getPrincipalForReport()}
+${labels.type}: ${getTypeForReport()}
+${labels.period}: ${getPeriodForReport()}
+${labels.days}: ${daysDisplay?.textContent}
+${separator}
+${labels.interest}: ${totalInterestDisplay?.textContent}
+${labels.total}: ${finalTotalDisplay?.textContent}
+        `.trim();
+    }
+
+    function handleCopyClick(): void {
+        const report = buildReport();
+        navigator.clipboard.writeText(report);
+
+        if (copyBtn) {
+            const originalHtml = copyBtn.innerHTML;
+            copyBtn.innerHTML = '¡Copiado!';
+            setTimeout(() => {
+                copyBtn.innerHTML = originalHtml;
+            }, 2000);
+        }
+    }
+
+    [principalInput, typeSelect, startInput, endInput].forEach((el) => {
+        el?.addEventListener("input", calculate);
+        el?.addEventListener("change", calculate);
+    });
+
+    copyBtn?.addEventListener("click", handleCopyClick);
+
+    calculate();
+</script>