[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68ec94d3d4e48191b0ace5bd0f8283c0","versionInt","title","Family Care Plans - Calculadora de interes compuesto","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { LineChart, Line, XAxis, YAxis, ResponsiveContainer, Tooltip, CartesianGrid } from \"recharts\";\nimport html2canvas from \"html2canvas\";\n\n// =====================================================\n// Paleta segura (HEX/RGB) — sin funciones de color OKLCH\n// =====================================================\nconst COLORS = {\n bgTop: \"#f8fafc\",\n bgBottom: \"#f1f5f9\",\n text: \"#0f172a\",\n muted: \"#64748b\",\n border: \"#d1d5db\",\n card: \"#ffffff\",\n grid: \"#e5e7eb\",\n primary: \"#1d4ed8\",\n};\n\n// Formateador de moneda\nfunction currency(n: number) {\n return n.toLocaleString(\"es-MX\", {\n style: \"currency\",\n currency: \"USD\",\n maximumFractionDigits: 0,\n });\n}\n\nexport default function CompoundInterestCalculator() {\n // ================================\n // Estado\n // ================================\n const [principal, setPrincipal] = useState(10000);\n const [monthly, setMonthly] = useState(300);\n const [rate, setRate] = useState(8); // % anual\n const [years, setYears] = useState(30);\n const [compound, setCompound] = useState(\"Mensual\");\n const [atBeginning, setAtBeginning] = useState(false);\n\n // Logo por defecto (del usuario) — editable por input y por upload\n const [logoUrl, setLogoUrl] = useState(\n \"https://d1yei2z3i6k35z.cloudfront.net/11552427/6866e5d46ead4_FamilyCarePlansLLC-02.png\"\n );\n const webText = \"www.familycareplansllc.com\";\n\n // Frecuencia seleccionada (expuesta para futuro)\n const n = useMemo(() => {\n switch (compound) {\n case \"Diaria\":\n return 365;\n case \"Mensual\":\n return 12;\n case \"Trimestral\":\n return 4;\n case \"Semestral\":\n return 2;\n case \"Anual\":\n return 1;\n default:\n return 12;\n }\n }, [compound]);\n\n // ================================\n // Simulación mes a mes\n // ================================\n const { series, finalValue, totalContribuciones, interesesGanados } = useMemo(() => {\n const r = rate / 100; // tasa anual en decimal\n const months = Math.round(years * 12);\n const i = r / 12; // interés por mes (aprox)\n\n let balance = Number(principal) || 0;\n const data: Array<{ t: number; etiqueta: string; valor: number }> = [];\n let contribAcumulada = Number(principal) || 0;\n\n for (let m = 0; m <= months; m++) {\n data.push({ t: m, etiqueta: `${Math.floor(m / 12)}a ${m % 12}m`, valor: balance });\n if (m === months) break;\n\n if (atBeginning) {\n balance += Number(monthly) || 0; // aporte al inicio\n contribAcumulada += Number(monthly) || 0;\n }\n\n balance *= 1 + i; // capitalización mensual\n\n if (!atBeginning) {\n balance += Number(monthly) || 0; // aporte al final\n contribAcumulada += Number(monthly) || 0;\n }\n }\n\n const total = balance;\n const intereses = total - contribAcumulada;\n\n return {\n series: data,\n finalValue: total,\n totalContribuciones: contribAcumulada,\n interesesGanados: intereses,\n };\n }, [principal, monthly, rate, years, atBeginning]);\n\n // ================================\n // Exportar a PNG (html2canvas) — agrega logo y URL\n // ================================\n const exportToPNG = async () => {\n const element = document.getElementById(\"calculator-container\");\n if (!element) return;\n\n const canvas = await html2canvas(element, { scale: 2, backgroundColor: COLORS.bgTop });\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n if (logoUrl) {\n await new Promise((resolve) => {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = logoUrl;\n img.onload = () => {\n const w = 180;\n const h = 60;\n ctx.drawImage(img, canvas.width - (w + 24), canvas.height - (h + 24), w, h);\n // URL de sitio web\n ctx.font = \"14px Arial\";\n ctx.fillStyle = COLORS.text;\n ctx.textAlign = \"right\";\n ctx.fillText(webText, canvas.width - 24, canvas.height - 8);\n resolve();\n };\n img.onerror = () => resolve();\n });\n }\n\n const link = document.createElement(\"a\");\n link.download = \"calculadora_interes_compuesto.png\";\n link.href = canvas.toDataURL(\"image/png\");\n link.click();\n };\n\n // ================================\n // TESTS (NO modificar a menos que sean erróneos) + agregamos nuevos\n // ================================\n useEffect(() => {\n // TEST 1: sin intereses, sólo aportes finales 12m x 100 = 1200\n (function testAportesSinInteres() {\n const principal0 = 0,\n monthly0 = 100,\n rate0 = 0,\n years0 = 1,\n atBeg = false;\n const months = years0 * 12;\n const i = (rate0 / 100) / 12;\n let bal = principal0;\n let contrib = principal0;\n for (let m = 0; m < months; m++) {\n bal *= 1 + i;\n bal += monthly0;\n contrib += monthly0;\n }\n console.assert(Math.abs(bal - 1200) < 1e-6, \"TEST 1 falló: esperado 1200, obtuve\", bal);\n })();\n\n // TEST 2: anualidad fin de período vs fórmula teórica (12% anual -> 1% mensual), 12 meses, PM=100\n (function testAnualidadFinDePeriodo() {\n const rAnual = 12,\n i = (rAnual / 100) / 12,\n meses = 12,\n pm = 100; // 100 mensual, 1% mensual\n const fvTeorico = pm * ((Math.pow(1 + i, meses) - 1) / i);\n let bal = 0;\n for (let m = 0; m < meses; m++) {\n bal *= 1 + i;\n bal += pm;\n }\n console.assert(Math.abs(bal - fvTeorico) < 1e-6, \"TEST 2 falló: anualidad fin periodo\", bal, fvTeorico);\n })();\n\n // TEST 3: aporte al inicio (anualidad adelantada) debe ser mayor que al final (misma tasa/plazo)\n (function testAnualidadAdelantadaMayor() {\n const rAnual = 12,\n i = (rAnual / 100) / 12,\n meses = 12,\n pm = 100;\n let fin = 0;\n for (let m = 0; m < meses; m++) {\n fin *= 1 + i;\n fin += pm;\n }\n let inicio = 0;\n for (let m = 0; m < meses; m++) {\n inicio += pm;\n inicio *= 1 + i;\n }\n console.assert(inicio > fin, \"TEST 3 falló: la anualidad adelantada debe ser mayor\");\n })();\n\n // TEST 4 (nuevo): sólo principal, sin aportes ni interés -> valor constante\n (function testPrincipalSinCambios() {\n const principal0 = 5000,\n monthly0 = 0,\n rate0 = 0,\n years0 = 5;\n const months = years0 * 12;\n const i = (rate0 / 100) / 12;\n let bal = principal0;\n for (let m = 0; m < months; m++) {\n bal *= 1 + i; // i=0 => bal constante\n }\n console.assert(Math.abs(bal - principal0) < 1e-6, \"TEST 4 falló: el principal debe mantenerse igual\", bal);\n })();\n }, []);\n\n // ================================\n // Estilos inline seguros\n // ================================\n const containerStyle: React.CSSProperties = {\n minHeight: \"100vh\",\n width: \"100%\",\n color: COLORS.text,\n background: `linear-gradient(180deg, ${COLORS.bgTop} 0%, ${COLORS.bgBottom} 100%)`,\n padding: \"1rem\",\n };\n\n const cardStyle: React.CSSProperties = {\n borderRadius: \"1rem\",\n boxShadow: \"0 4px 12px rgba(0,0,0,0.08)\",\n backgroundColor: COLORS.card,\n padding: \"1.25rem\",\n border: `1px solid ${COLORS.border}`,\n };\n\n const labelStyle: React.CSSProperties = { fontSize: 12, color: COLORS.muted, marginBottom: 4 };\n const inputStyle: React.CSSProperties = {\n width: \"100%\",\n borderRadius: \"1rem\",\n border: `1px solid ${COLORS.border}`,\n padding: \"0.5rem 1rem\",\n outline: \"none\",\n };\n\n const statBox: React.CSSProperties = {\n backgroundColor: COLORS.bgTop,\n borderRadius: \"0.75rem\",\n padding: \"1rem\",\n textAlign: \"center\",\n border: `1px solid ${COLORS.border}`,\n };\n\n const buttonStyle: React.CSSProperties = {\n backgroundColor: COLORS.primary,\n color: \"#ffffff\",\n border: \"none\",\n borderRadius: 8,\n padding: \"0.5rem 1rem\",\n cursor: \"pointer\",\n };\n\n return (\n

\n {/* Header */}\n

\n Calculadora de Interés Compuesto\n

Family Care Plans LLC • Calculadora educativa de interés compuesto • Resultados en tiempo real

\n {/* Brand bar */}\n

\n {logoUrl ? (\n $\"Family$ \n ) : null}\n

\n Family Care Plans LLC · www.familycareplansllc.com\n

\n \n setLogoUrl(e.target.value)}\n style={{ ...inputStyle, maxWidth: 360 }}\n />\n \n o sube el logo:\n {\n const f = e.target.files?.[0];\n if (!f) return;\n const reader = new FileReader();\n reader.onload = () => setLogoUrl(String(reader.result || \"\"));\n reader.readAsDataURL(f);\n }}\n style={{ marginLeft: 8 }}\n />\n \n

\n\n {/* Contenido principal */}\n

\n {/* Panel de controles */}\n

\n Aporte inicial (USD)\n setPrincipal(Number(e.target.value))}\n style={inputStyle}\n />\n

\n Aporte mensual (USD)\n setMonthly(Number(e.target.value))}\n style={inputStyle}\n />\n

\n Tasa anual (%)\n setRate(Number(e.target.value))}\n style={inputStyle}\n />\n

\n Horizonte (años)\n setYears(Number(e.target.value))}\n style={inputStyle}\n />\n

\n Frecuencia de capitalización\n \n

\n setAtBeginning(e.target.checked)}\n />\n \n Aportar al inicio de cada mes\n \n

\n * Aproximación mensual para la simulación. Las cifras son educativas; no constituyen asesoría financiera.\n

\n\n {/* Gráfica y KPIs */}\n

Valor futuro estimado

{currency(finalValue)}

Aportes totales

{currency(totalContribuciones)}

Intereses ganados

{currency(interesesGanados)}

\n\n

\n \n \n \n `${Math.floor((v as number) / 12)}a`}\n interval=\"preserveStartEnd\"\n tick={{ fill: COLORS.text }}\n />\n (v >= 1000000 ? `$${(v / 1e6).toFixed(1)}M` : v >= 1000 ? `$${(v / 1e3).toFixed(0)}k` : `$${v}`)}\n tick={{ fill: COLORS.text }}\n />\n currency(v as number)} labelFormatter={(l) => `Mes ${l}`} />\n \n \n \n

\n\n {/* Vista previa del logo si existe (FIX: usar logoUrl como condición) */}\n {logoUrl ? (\n

\n \n Vista previa del logotipo (se incluirá en el PNG):\n \n $\"Logo\"$ \n

\n ) : null}\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","4245669690684753789","traceTime",1781723472731]