{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "loan-calculator", "title": "Loan Calculator", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/loan-calculator/LoanCalculator.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowRight,\n Building2,\n Calculator,\n Calendar,\n Car,\n CheckCircle2,\n DollarSign,\n FileSpreadsheet,\n Home,\n PiggyBank,\n Wallet,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\ntype LoanType = 'mortgage-30' | 'commercial-10' | 'auto-5' | 'personal-3'\n\ninterface LoanPreset {\n id: LoanType\n name: string\n amount: number\n rate: number\n termYears: number\n extraPayment: number\n description: string\n}\n\nconst LOAN_PRESETS: Record = {\n 'mortgage-30': {\n id: 'mortgage-30',\n name: 'Mortgage 30Y',\n amount: 450_000,\n rate: 6.5,\n termYears: 30,\n extraPayment: 200,\n description: '30-year fixed home mortgage',\n },\n 'commercial-10': {\n id: 'commercial-10',\n name: 'Commercial 10Y',\n amount: 1_200_000,\n rate: 7.25,\n termYears: 10,\n extraPayment: 500,\n description: '10-year commercial real estate loan',\n },\n 'auto-5': {\n id: 'auto-5',\n name: 'Auto Loan 5Y',\n amount: 45_000,\n rate: 5.9,\n termYears: 5,\n extraPayment: 50,\n description: '60-month standard vehicle loan',\n },\n 'personal-3': {\n id: 'personal-3',\n name: 'Personal Loan',\n amount: 25_000,\n rate: 9.5,\n termYears: 3,\n extraPayment: 25,\n description: '36-month fixed unsecured personal loan',\n },\n}\n\nconst LOAN_AMOUNT_MARKS = {\n 100000: '$100K',\n 500000: '$500K',\n 1000000: '$1M',\n 2000000: '$2M',\n}\n\nconst INTEREST_RATE_MARKS = {\n 1: '1%',\n 5: '5%',\n 10: '10%',\n 15: '15%',\n}\n\nconst LOAN_TERM_MARKS = {\n 5: '5Y',\n 10: '10Y',\n 15: '15Y',\n 20: '20Y',\n 30: '30Y',\n}\n\nconst EXTRA_PAYMENT_MARKS = {\n 0: '$0',\n 500: '$500',\n 1000: '$1K',\n 2000: '$2K',\n}\n\nconst TERM_PRESETS = [5, 10, 15, 20, 30]\n\ninterface MonthRecord {\n month: number\n principalPaid: number\n interestPaid: number\n extraPaid: number\n totalPaid: number\n remainingBalance: number\n}\n\ninterface YearRecord {\n year: number\n principalPaid: number\n interestPaid: number\n extraPaid: number\n totalPaid: number\n remainingBalance: number\n}\n\nfunction fmtCurrency(val: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(val || 0)\n}\n\nfunction fmtCurrencyWhole(val: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }).format(val || 0)\n}\n\nexport function LoanCalculator({ className }: { className?: string }) {\n const [selectedLoanType, setSelectedLoanType] = React.useState('mortgage-30')\n const [loanAmount, setLoanAmount] = React.useState(450_000)\n const [interestRate, setInterestRate] = React.useState(6.5)\n const [loanTermYears, setLoanTermYears] = React.useState(30)\n const [extraMonthlyPayment, setExtraMonthlyPayment] = React.useState(200)\n const [showAllYears, setShowAllYears] = React.useState(false)\n\n const handleTabChange = React.useCallback((value: string) => {\n const type = value as LoanType\n setSelectedLoanType(type)\n const preset = LOAN_PRESETS[type]\n if (preset) {\n setLoanAmount(preset.amount)\n setInterestRate(preset.rate)\n setLoanTermYears(preset.termYears)\n setExtraMonthlyPayment(preset.extraPayment)\n }\n }, [])\n\n // Base monthly payment (standard amortization without extra payments)\n const baseMonthlyPayment = React.useMemo(() => {\n const principal = loanAmount\n const annualRate = interestRate\n const termYears = loanTermYears\n const totalMonths = termYears * 12\n\n if (principal <= 0 || totalMonths <= 0) return 0\n if (annualRate <= 0) return principal / totalMonths\n\n const monthlyRate = annualRate / 100 / 12\n const factor = Math.pow(1 + monthlyRate, totalMonths)\n if (!isFinite(factor) || factor <= 1) return principal / totalMonths\n return (principal * (monthlyRate * factor)) / (factor - 1)\n }, [loanAmount, interestRate, loanTermYears])\n\n // Total standard cost and interest without extra payment\n const totalCostBase = React.useMemo(() => {\n return baseMonthlyPayment * loanTermYears * 12\n }, [baseMonthlyPayment, loanTermYears])\n\n const totalInterestBase = React.useMemo(() => {\n return Math.max(0, totalCostBase - loanAmount)\n }, [totalCostBase, loanAmount])\n\n // Month-by-month amortization schedule calculation\n const amortizationResult = React.useMemo(() => {\n const principal = Math.max(0, loanAmount)\n const annualRate = Math.max(0, interestRate)\n const termYears = Math.max(1, loanTermYears)\n const extra = Math.max(0, extraMonthlyPayment)\n const basePayment = baseMonthlyPayment\n const monthlyRate = annualRate / 100 / 12\n const standardMonths = termYears * 12\n\n let balance = principal\n const monthlySchedule: MonthRecord[] = []\n let totalInterest = 0\n let totalPaid = 0\n let totalExtra = 0\n let month = 0\n const maxMonths = 1200 // 100 years safeguard\n\n while (balance > 0.005 && month < maxMonths) {\n month++\n const interestForMonth = annualRate > 0 ? balance * monthlyRate : 0\n let scheduledTotal = basePayment + extra\n\n if (balance + interestForMonth < scheduledTotal) {\n scheduledTotal = balance + interestForMonth\n }\n\n const principalForMonth = Math.min(balance, Math.max(0, scheduledTotal - interestForMonth))\n const extraForMonth = Math.max(0, scheduledTotal - basePayment)\n balance = Math.max(0, balance - principalForMonth)\n\n totalInterest += interestForMonth\n totalPaid += scheduledTotal\n totalExtra += extraForMonth\n\n monthlySchedule.push({\n month,\n principalPaid: principalForMonth,\n interestPaid: interestForMonth,\n extraPaid: extraForMonth,\n totalPaid: scheduledTotal,\n remainingBalance: balance,\n })\n }\n\n // Aggregate by year\n const yearlySchedule: YearRecord[] = []\n const totalYearsActual = Math.ceil(monthlySchedule.length / 12)\n\n for (let y = 1; y <= totalYearsActual; y++) {\n const startIdx = (y - 1) * 12\n const endIdx = Math.min(y * 12, monthlySchedule.length)\n const yearMonths = monthlySchedule.slice(startIdx, endIdx)\n\n if (yearMonths.length === 0) continue\n\n const yearPrincipal = yearMonths.reduce((sum, m) => sum + m.principalPaid, 0)\n const yearInterest = yearMonths.reduce((sum, m) => sum + m.interestPaid, 0)\n const yearExtra = yearMonths.reduce((sum, m) => sum + m.extraPaid, 0)\n const yearTotal = yearMonths.reduce((sum, m) => sum + m.totalPaid, 0)\n const endingBalance = yearMonths[yearMonths.length - 1]?.remainingBalance ?? 0\n\n yearlySchedule.push({\n year: y,\n principalPaid: yearPrincipal,\n interestPaid: yearInterest,\n extraPaid: yearExtra,\n totalPaid: yearTotal,\n remainingBalance: endingBalance,\n })\n }\n\n const monthsSaved = Math.max(0, standardMonths - monthlySchedule.length)\n const yearsSaved = monthsSaved / 12\n const interestSaved = Math.max(0, totalInterestBase - totalInterest)\n\n return {\n monthlySchedule,\n yearlySchedule,\n actualMonths: monthlySchedule.length,\n actualYears: (monthlySchedule.length / 12).toFixed(1),\n monthsSaved,\n yearsSaved: yearsSaved.toFixed(1),\n totalInterestPaid: totalInterest,\n totalLoanCost: totalPaid,\n totalExtraPaid: totalExtra,\n interestSavings: interestSaved,\n }\n }, [loanAmount, interestRate, loanTermYears, extraMonthlyPayment, baseMonthlyPayment, totalInterestBase])\n\n // Visual breakdown percentages\n const principalPercent = React.useMemo(() => {\n const total = amortizationResult.totalLoanCost\n if (total <= 0) return 100\n return Math.min(100, Math.max(0, Math.round((loanAmount / total) * 100)))\n }, [amortizationResult.totalLoanCost, loanAmount])\n\n const interestPercent = React.useMemo(() => {\n return Math.max(0, 100 - principalPercent)\n }, [principalPercent])\n\n // Filtered schedule for display\n const displayedSchedule = React.useMemo(() => {\n if (showAllYears) {\n return amortizationResult.yearlySchedule\n }\n return amortizationResult.yearlySchedule.slice(0, 5)\n }, [showAllYears, amortizationResult.yearlySchedule])\n\n // Totals for the displayed schedule\n const displayedTotals = React.useMemo(() => {\n const list = displayedSchedule\n return {\n principal: list.reduce((sum, r) => sum + r.principalPaid, 0),\n interest: list.reduce((sum, r) => sum + r.interestPaid, 0),\n extra: list.reduce((sum, r) => sum + r.extraPaid, 0),\n total: list.reduce((sum, r) => sum + r.totalPaid, 0),\n }\n }, [displayedSchedule])\n\n return (\n
\n {/* Header */}\n
\n \n \n Loan Amortization Engine\n \n
\n

\n Loan & Mortgage Amortization Calculator\n

\n

\n Estimate monthly payments, interest vs principal breakdown, and payoff timelines with extra payments.\n

\n
\n\n {/* Loan Type Tabs */}\n
\n \n \n \n \n Mortgage 30Y\n \n \n \n Commercial 10Y\n \n \n \n Auto Loan 5Y\n \n \n \n Personal Loan\n \n \n \n
\n
\n\n {/* 2-Column Calculator Layout */}\n
\n {/* Left Inputs Card */}\n
\n \n \n \n \n Loan Parameters\n \n \n Customize loan principal, interest rate, term duration, and extra monthly contributions.\n \n \n \n {/* 1. Loan Amount */}\n
\n
\n
\n Loan Amount (Principal)\n

Total borrowed loan amount.

\n
\n
\n setLoanAmount(Number(e.target.value) || 0)}\n />\n
\n
\n
\n `$${val.toLocaleString('en-US')}`}\n onValueChange={(val) => setLoanAmount(val[0])}\n />\n
\n
\n Quick select:\n {[150000, 300000, 450000, 750000, 1200000].map((amt) => (\n setLoanAmount(amt)}\n >\n ${amt >= 1000000 ? `${(amt / 1000000).toFixed(1)}M` : `${amt / 1000}K`}\n \n ))}\n
\n
\n\n \n\n {/* 2. Interest Rate */}\n
\n
\n
\n Annual Interest Rate (APR)\n

Fixed annual percentage rate.

\n
\n
\n setInterestRate(Number(e.target.value) || 0)}\n />\n
\n
\n
\n `${val.toFixed(1)}%`}\n onValueChange={(val) => setInterestRate(val[0])}\n />\n
\n
\n Market benchmarks:\n {[4.5, 5.5, 6.5, 7.5, 9.5].map((rate) => (\n setInterestRate(rate)}\n >\n {rate}%\n \n ))}\n
\n
\n\n \n\n {/* 3. Loan Term */}\n
\n
\n
\n Loan Term\n

Amortization period in years.

\n
\n
\n \n {loanTermYears} Years ({loanTermYears * 12} mo)\n \n
\n
\n
\n `${val} Years`}\n onValueChange={(val) => setLoanTermYears(val[0])}\n />\n
\n
\n Standard terms:\n {TERM_PRESETS.map((term) => (\n setLoanTermYears(term)}\n >\n {term} Yrs\n \n ))}\n
\n
\n\n \n\n {/* 4. Extra Monthly Payment */}\n
\n
\n
\n
\n Extra Monthly Payment\n \n Accelerates Payoff\n \n
\n

Directly reduces principal balance each month.

\n
\n
\n setExtraMonthlyPayment(Number(e.target.value) || 0)}\n />\n
\n
\n
\n `$${val}/mo`}\n onValueChange={(val) => setExtraMonthlyPayment(val[0])}\n />\n
\n
\n Quick extra:\n {[0, 100, 200, 500, 1000].map((extra) => (\n setExtraMonthlyPayment(extra)}\n >\n +${extra}/mo\n \n ))}\n
\n
\n \n \n
\n\n {/* Right Results Card (Sticky on desktop) */}\n
\n \n \n
\n \n Estimated Monthly Payment\n \n \n Amortized\n \n
\n
\n
\n \n {fmtCurrency(baseMonthlyPayment)}\n \n / month\n
\n {extraMonthlyPayment > 0 ? (\n

\n Total monthly cash outlay:{' '}\n \n {fmtCurrency(baseMonthlyPayment + extraMonthlyPayment)}/mo\n {' '}\n ({fmtCurrency(baseMonthlyPayment)} base + {fmtCurrency(extraMonthlyPayment)} extra)\n

\n ) : (\n

\n Standard fixed payment based on {interestRate}% APR over {loanTermYears} years.\n

\n )}\n
\n \n\n \n \n\n {/* Extra Payment Impact Box */}\n {extraMonthlyPayment > 0 && amortizationResult.interestSavings > 0 && (\n
\n
\n \n
\n

\n Saves {fmtCurrencyWhole(amortizationResult.interestSavings)} and cuts{' '}\n {amortizationResult.yearsSaved} years off payoff!\n

\n

\n You'll be debt-free in {amortizationResult.actualYears} years ({amortizationResult.actualMonths}{' '}\n payments) instead of {loanTermYears} years.\n

\n
\n
\n
\n )}\n\n {/* Summary Breakdown */}\n
\n
\n Total Loan Principal\n {fmtCurrency(loanAmount)}\n
\n
\n Total Interest Paid\n \n {fmtCurrency(amortizationResult.totalInterestPaid)}\n \n
\n
\n Total Loan Cost\n \n {fmtCurrency(amortizationResult.totalLoanCost)}\n \n
\n
\n Effective Payoff Timeline\n \n {amortizationResult.actualYears} Years ({amortizationResult.actualMonths} mo)\n \n
\n
\n\n \n\n {/* Visual Principal vs Interest Bar */}\n
\n
\n Principal vs. Total Interest\n \n {principalPercent}% / {interestPercent}%\n \n
\n
\n \n \n
\n
\n
\n \n \n Principal: {fmtCurrencyWhole(loanAmount)} ({principalPercent}%)\n \n
\n
\n \n \n Interest: {fmtCurrencyWhole(amortizationResult.totalInterestPaid)} ({interestPercent}%)\n \n
\n
\n
\n\n \n\n {/* Key Features / Trust Checklist */}\n
    \n
  • \n \n Real-time compound interest calculations\n
    • \n
  • \n \n Principal reduction extra payment model\n
    • \n
  • \n \n Standard fixed-rate banking amortization schedule\n
    • \n
\n \n\n \n \n \n \n \n
\n
\n\n {/* Amortization Schedule Table */}\n \n \n
\n \n \n Amortization Schedule\n \n \n Annual breakdown of principal reduction, interest paid, extra contributions, and ending balance.\n \n
\n
\n \n
\n \n \n
\n \n \n \n Year\n Principal Paid\n Interest Paid\n Extra Principal\n Total Payment\n Ending Balance\n \n \n \n {displayedSchedule.map((row) => (\n \n \n
\n Year {row.year}\n {row.year === 1 && (\n \n Initial\n \n )}\n
\n \n \n {fmtCurrency(row.principalPaid)}\n \n \n {fmtCurrency(row.interestPaid)}\n \n \n {row.extraPaid > 0 ? `+${fmtCurrency(row.extraPaid)}` : '—'}\n \n \n {fmtCurrency(row.totalPaid)}\n \n \n {fmtCurrency(row.remainingBalance)}\n \n \n ))}\n \n \n \n \n Total ({displayedSchedule.length} {displayedSchedule.length === 1 ? 'Year' : 'Years'})\n \n \n {fmtCurrency(displayedTotals.principal)}\n \n \n {fmtCurrency(displayedTotals.interest)}\n \n \n {fmtCurrency(displayedTotals.extra)}\n \n \n {fmtCurrency(displayedTotals.total)}\n \n \n {fmtCurrency(displayedSchedule[displayedSchedule.length - 1]?.remainingBalance ?? 0)}\n \n \n \n
\n
\n \n \n
\n )\n}\n\nexport default LoanCalculator\n", "type": "registry:block", "target": "~/components/blocks/LoanCalculator.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/slider.json", "https://uipkge.dev/r/react/table.json", "https://uipkge.dev/r/react/tabs.json" ], "description": "Interactive mortgage and commercial loan amortization schedule calculator with dynamic sliders, loan type presets, extra payment impact simulation, principal vs interest visual ratio bar, and year-by-year amortization breakdown table.", "categories": [ "finance", "billing" ] }