[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.35 0 0); --card: oklch(0.98 0 0); --card-foreground: oklch(0.35 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.35 0 0); --primary: oklch(0.52 0.15 165); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.62 0.15 165); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.62 0.15 165); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.88 0 0); --input: oklch(0.88 0 0); --ring: oklch(0.52 0.15 165); --chart-1: oklch(0.52 0.15 165); --chart-2: oklch(0.62 0.15 165); --chart-3: oklch(0.45 0 0); --chart-4: oklch(0.75 0.12 165); --chart-5: oklch(0.85 0.08 165); --radius: 0.625rem; --sidebar: oklch(0.98 0 0); --sidebar-foreground: oklch(0.35 0 0); --sidebar-primary: oklch(0.52 0.15 165); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.62 0.15 165); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.88 0 0); --sidebar-ring: oklch(0.52 0.15 165); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.2 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.62 0.15 165); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.52 0.15 165); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.62 0.15 165); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.62 0.15 165); --chart-1: oklch(0.62 0.15 165); --chart-2: oklch(0.72 0.15 165); --chart-3: oklch(0.6 0 0); --chart-4: oklch(0.5 0.12 165); --chart-5: oklch(0.4 0.08 165); --sidebar: oklch(0.2 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.62 0.15 165); --sidebar-primary-foreground: oklch(0.145 0 0); --sidebar-accent: oklch(0.52 0.15 165); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.62 0.15 165); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { TaxDashboard } from "@/components/tax-dashboard" export default function Home() { return } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Sparkles } from "lucide-react" export function HeroSection() { return (

{/* Animated background pattern */}

Your 2024 Tax Journey

Sample Client • Let's make taxes fun (yes, really!)

) } [V0_FILE]typescriptreact:file="components/stats-grid.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Card } from "@/components/ui/card" import { DollarSign, PieChart, Target, TrendingUp } from "lucide-react" const stats = [ { icon: DollarSign, label: "Total Income", value: "$455K", subtext: "Great year!", color: "text-primary", }, { icon: PieChart, label: "Total Tax", value: "$119K", subtext: "26.3% paid", color: "text-chart-2", }, { icon: Target, label: "Effective Rate", value: "27.1%", subtext: "Solid efficiency", color: "text-chart-3", }, { icon: TrendingUp, label: "Marginal Rate", value: "35%", subtext: "Top bracket", color: "text-chart-4", }, ] export function StatsGrid() { return (

{stats.map((stat, index) => (

{stat.label}

{stat.value}

{stat.subtext}

))}

) } [V0_FILE]typescriptreact:file="components/investment-section.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { TrendingUp, Target } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" export function InvestmentSection() { return (

Your Investment Wins

💎 Capital Gains

Short-Term ($983)

Long-Term $43,657

Net Gain $42,674

💸 Dividends

Qualified $115

Tax Rate 15%

Tax Savings vs 35% rate

Smart Money Moves Your long-term capital gains are taxed at just 15% instead of your ordinary income rate of 35%. That's a{" "} 20% tax savings on $42,789 of investment income—worth $8,558 in tax savings! Keep holding those long-term winners. ) } [V0_FILE]typescriptreact:file="components/niit-section.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { AlertTriangle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Progress } from "@/components/ui/progress" export function NIITSection() { const magi = 455516 const threshold = 200000 const overThreshold = magi - threshold const percentageOver = (overThreshold / magi) * 100 return (

The NIIT Watch

Income vs NIIT Threshold ${overThreshold.toLocaleString()} over

Threshold: ${threshold.toLocaleString()} Your MAGI: ${magi.toLocaleString()}

Your MAGI ${magi.toLocaleString()}

NIIT Threshold ${threshold.toLocaleString()}

Amount Over ${overThreshold.toLocaleString()}

Net Investment Income $43,734

NIIT Rate 3.8%

Total NIIT $1,662

Optimization Opportunity You're ${overThreshold.toLocaleString()} over the NIIT threshold. Strategic tax planning could help reduce this 3.8% surcharge on investment income. Let's chat about ways to optimize this! ) } [V0_FILE]typescriptreact:file="components/action-plan-section.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { CheckCircle2, Circle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { GraduationCap } from "lucide-react" import { motion } from "framer-motion" const actions = [ { title: "HSA Contributions", description: "Your return shows no HSA contributions. If eligible, max this out for tax-free healthcare savings!", }, { title: "Estimated Tax Payments", description: "Safe harbor for 2025: $131,675 (110% of 2024 tax). Set up quarterly payments to avoid surprises.", }, { title: "Review Withholding", description: "You had additional taxes due. Let's adjust your withholding to spread payments throughout the year.", }, { title: "Maximize Pre-Tax Benefits", description: "Double-check you're maxing out 401(k), FSA, and any other employer benefits.", }, { title: "NY PTE Tax Election", description: "Pass-through entity? Consider the PTE tax election to exceed the $10K SALT cap.", }, ] interface ActionPlanSectionProps { completedActions: number[] onToggleAction: (index: number) => void } export function ActionPlanSection({ completedActions, onToggleAction }: ActionPlanSectionProps) { const completionPercentage = (completedActions.length / actions.length) * 100 return (

Your 2025 Action Plan

{completedActions.length} of {actions.length} completed ({Math.round(completionPercentage)}%)

Quick Wins for Next Year:

{actions.map((action, index) => { const isCompleted = completedActions.includes(index) return ( onToggleAction(index)} className="flex items-start gap-4 p-4 bg-card rounded-xl cursor-pointer hover:shadow-md transition-all hover:translate-x-2" > {isCompleted ? ( ) : ( )}

{action.title}

{action.description}

) })}

Did You Know? The gap between your marginal rate (35%) and effective rate (27.1%) shows you're doing a great job utilizing deductions and preferential tax treatments. That 7.9 percentage point difference represents smart tax planning in action! ) } [V0_FILE]typescriptreact:file="components/fine-print-section.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { FileText } from "lucide-react" export function FinePrintSection() { return (

The Fine Print

Filing Info

Status Single

AGI $455,516

Taxable Income $440,916

Deductions

Standard Deduction $14,600

Credits $0

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "use client" import { MessageCircle } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]json:file="package.json" isMerged="true" { "dependencies": { "framer-motion": "^11.0.0", "recharts": "^2.10.0", "lucide-react": "latest", "next": "15.5.4", "react": "19.1.1", "react-dom": "19.1.1", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@types/react": "19.1.15", "@types/react-dom": "19.1.9", "@types/node": "24.5.2", "tailwindcss": "4.1.13", "typescript": "5.9.2", "postcss": "8.5.6" } } [V0_FILE]typescriptreact:file="components/tax-brackets-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Layers, DollarSign, ArrowUpRight, TrendingUp, Wallet, PiggyBank, Building2, Landmark, Crown, Globe, MapPin, Scale, ArrowDownRight, ArrowUpCircle, } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Lightbulb } from "lucide-react" const bracketData = [ { bracket: "10%", income: 11600, tax: 1160, range: "$0 - $11,600" }, { bracket: "12%", income: 35550, tax: 4266, range: "$11,601 - $47,150" }, { bracket: "22%", income: 53375, tax: 11743, range: "$47,151 - $100,525" }, { bracket: "24%", income: 91425, tax: 21942, range: "$100,526 - $191,950" }, { bracket: "32%", income: 51775, tax: 16568, range: "$191,951 - $243,725" }, { bracket: "35%", income: 154402, tax: 54041, range: "$243,726 - $609,350" }, { bracket: "37%", income: 0, tax: 0, range: "$609,351+" }, ] export function TaxBracketsSection() { const totalTax = bracketData.reduce((sum, item) => sum + item.tax, 0) const totalIncome = bracketData.reduce((sum, item) => sum + item.income, 0) const activeBrackets = bracketData.filter((b) => b.income > 0) return (

Climbing the Tax Bracket Ladder

{/* Highest Bracket Card */}

Highest Bracket

35%

${bracketData[5].income.toLocaleString()} taxed at this rate

{/* Total Tax from Brackets Card */}

Total Tax from Brackets

${totalTax.toLocaleString()}

Effective rate: {((totalTax / totalIncome) * 100).toFixed(1)}%

{/* 10% Bracket */}

10%

Basic

$0 - $11,600

${bracketData[0].income.toLocaleString()} taxed

Tax paid: ${bracketData[0].tax.toLocaleString()}

{((bracketData[0].tax / totalTax) * 100).toFixed(1)}% of your total tax bill

{/* 12% Bracket */}

12%

Moderate

$11,601 - $47,150

${bracketData[1].income.toLocaleString()} taxed

Tax paid: ${bracketData[1].tax.toLocaleString()}

{((bracketData[1].tax / totalTax) * 100).toFixed(1)}% of your total tax bill

{/* 22% Bracket */}

22%

Growing

$47,151 - $100,525

${bracketData[2].income.toLocaleString()} taxed

Tax paid: ${bracketData[2].tax.toLocaleString()}

{((bracketData[2].tax / totalTax) * 100).toFixed(1)}% of your total tax bill

{/* 24% Bracket */}

24%

Substantial

$100,526 - $191,950

${bracketData[3].income.toLocaleString()} taxed

Tax paid: ${bracketData[3].tax.toLocaleString()}

{((bracketData[3].tax / totalTax) * 100).toFixed(1)}% of your total tax bill

{/* 32% Bracket */}

32%

High Earner

$191,951 - $243,725

${bracketData[4].income.toLocaleString()} taxed

Tax paid: ${bracketData[4].tax.toLocaleString()}

{((bracketData[4].tax / totalTax) * 100).toFixed(1)}% of your total tax bill

{/* 35% Bracket - Highlighted as current top bracket */}

35%

Your Top

$243,726 - $609,350

${bracketData[5].income.toLocaleString()} taxed

Tax paid: ${bracketData[5].tax.toLocaleString()}

{((bracketData[5].tax / totalTax) * 100).toFixed(1)}% of your total tax bill

How Your Brackets Compare Internationally

Tax bracket systems vary significantly across countries. Here's how the US system compares to Canada and Switzerland at your income level:

{/* USA Bracket Card */}

United States

Your Current System

Your Top Bracket

35%

Bracket Range

$243,726 - $609,350

System Type

7 federal brackets (10%-37%)

{/* Canada Bracket Card */}

Canada

Federal + Provincial

Your Top Bracket

33%

Bracket Range

CAD $246,752+

System Type

5 federal brackets (15%-33%)

{/* Switzerland Bracket Card */}

Switzerland

Federal + Cantonal

Your Top Bracket

11.5%

Bracket Range

CHF 895,900+

System Type

Federal max 11.5% + canton

{/* Key Difference Card 1 */}

Bracket Width

How brackets are structured

USA

Wide brackets

$365k range in 35% bracket

Canada

Unlimited top

33% starts at CAD $247k

Switzerland

Lower federal

Canton taxes vary widely

{/* Key Difference Card 2 */}

What This Means

At your income level

Canada: +$4,509

Higher provincial taxes

Switzerland: -$32,914

Much lower overall rates

Switzerland's lower federal rates make it significantly more tax-friendly for high earners

Room to Grow! You have $211,223 of breathing room in your current 35% bracket before hitting the 37% rate at $609,350. That's plenty of space for strategic income moves in 2025! Consider maximizing retirement contributions or timing income recognition to stay in this bracket. ) } [V0_FILE]typescriptreact:file="components/medicare-premium-section.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Heart, TrendingUp, DollarSign, AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Progress } from "@/components/ui/progress" export function MedicarePremiumSection() { const income = 398127 const threshold = 103000 const overThreshold = income - threshold const percentageOver = Math.min((overThreshold / income) * 100, 100) // 2024 Medicare Part B premiums const standardMonthly = 174.7 const irmaaMonthly = 384.3 const totalMonthly = standardMonthly + irmaaMonthly const standardAnnual = standardMonthly * 12 const irmaaAnnual = irmaaMonthly * 12 const totalAnnual = totalMonthly * 12 // Calculate savings if under threshold const potentialSavings = irmaaAnnual return (

Medicare Premium Watch

Income vs IRMAA Threshold ${overThreshold.toLocaleString()} over

Threshold: ${threshold.toLocaleString()} Your Income: ${income.toLocaleString()}

What is IRMAA? Income-Related Monthly Adjustment Amount is an extra charge added to your Medicare Part B premium if your income exceeds certain thresholds.

Standard Premium

Monthly ${standardMonthly.toFixed(2)}

Annual ${standardAnnual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Base Medicare Part B premium everyone pays

IRMAA Surcharge

Monthly +${irmaaMonthly.toFixed(2)}

Annual +${irmaaAnnual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Additional charge due to income over ${threshold.toLocaleString()}

Total Premium

Monthly ${totalMonthly.toFixed(2)}

Annual Total ${totalAnnual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Your total Medicare Part B cost for 2024

Income Bracket Breakdown

Under $103,000 $0 surcharge

$103,001 - $129,000 +$69.90/mo

$129,001 - $161,000 +$174.70/mo

$161,001 - $193,000 +$279.50/mo

$193,001 - $500,000 ← You're here +$384.30/mo

$500,001+ +$419.30/mo

Potential Savings

If your income was under the $103,000 threshold:

Annual Savings ${potentialSavings.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Planning Tip: IRMAA is based on your Modified Adjusted Gross Income (MAGI) from 2 years prior. Strategic income planning can help manage these costs.

Medicare Cost Planning You're paying an additional $ {irmaaAnnual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} annually in IRMAA surcharges. Since IRMAA is based on income from 2 years ago, strategic tax planning and income timing can help optimize these costs. Consider Roth conversions, HSA contributions, and other strategies to manage your MAGI. ) } [V0_FILE]typescriptreact:file="components/tax-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { HeroSection } from "./hero-section" import { StatsGrid } from "./stats-grid" import { TaxBreakdownSection } from "./tax-breakdown-section" import { TaxBracketsSection } from "./tax-brackets-section" import { InvestmentSection } from "./investment-section" import { NIITSection } from "./niit-section" import { MedicarePremiumSection } from "./medicare-premium-section" import { ActionPlanSection } from "./action-plan-section" import { FinePrintSection } from "./fine-print-section" import { Footer } from "./footer" export function TaxDashboard() { const [completedActions, setCompletedActions] = useState([]) const toggleAction = (index: number) => { setCompletedActions((prev) => (prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index])) } return (

) } [V0_FILE]typescriptreact:file="components/tax-breakdown-section.tsx" isEdit="true" isQuickEdit="true" "use client" import { Card } from "@/components/ui/card" import { Palette, TrendingUp, Users, Calendar } from "lucide-react" import { Progress } from "@/components/ui/progress" const taxData = [ { name: "Ordinary Income", value: 109719, color: "#10b981" }, { name: "LT Gains & Dividends", value: 6418, color: "#3b82f6" }, { name: "Medicare Tax", value: 1906, color: "#f59e0b" }, { name: "NIIT", value: 1662, color: "#ef4444" }, ] const progressData = [ { label: "Ordinary Income Tax", amount: 109719, percentage: 91.7 }, { label: "Long-Term Gains Tax", amount: 6418, percentage: 5.4 }, { label: "Additional Medicare Tax", amount: 1906, percentage: 1.6 }, { label: "Net Investment Income Tax", amount: 1662, percentage: 1.4 }, ] const internationalTaxData = [ { income: 0, usa: 0, canada: 0, switzerland: 0 }, { income: 50000, usa: 12.5, canada: 15.2, switzerland: 8.5 }, { income: 100000, usa: 18.2, canada: 20.5, switzerland: 12.3 }, { income: 150000, usa: 21.8, canada: 23.8, switzerland: 15.1 }, { income: 200000, usa: 24.5, canada: 26.2, switzerland: 17.2 }, { income: 250000, usa: 26.8, canada: 28.1, switzerland: 18.8 }, { income: 300000, usa: 28.4, canada: 29.5, switzerland: 20.1 }, { income: 350000, usa: 29.5, canada: 30.6, switzerland: 21.2 }, { income: 398127, usa: 30.1, canada: 31.2, switzerland: 21.8 }, // Shane's income { income: 450000, usa: 31.2, canada: 32.1, switzerland: 22.5 }, { income: 500000, usa: 32.0, canada: 32.8, switzerland: 23.1 }, { income: 600000, usa: 33.2, canada: 33.8, switzerland: 24.0 }, ] export function TaxBreakdownSection() { const total = taxData.reduce((sum, item) => sum + item.value, 0) const effectiveRate = ((total / 398127) * 100).toFixed(1) const bigMacPrice = 11.39 const bigMacCount = Math.floor(total / bigMacPrice) const daysOfMeals = Math.floor(bigMacCount / 3) const yearsOfMeals = Math.floor(daysOfMeals / 365) return (

How Your Tax Dollar Breaks Down

Put It In Perspective

Your tax bill of ${total.toLocaleString()} could buy...

{bigMacCount.toLocaleString()}

Big Mac Combo Meals

at ${bigMacPrice.toFixed(2)} per meal

{Array.from({ length: 64 }).map((_, i) => (

🍔

))}

That's enough burgers to eat{" "} 3 meals a day for {daysOfMeals.toLocaleString()} days (over{" "} {yearsOfMeals} years)!

Your Effective Rate

{effectiveRate}%

On total income of ${(398127).toLocaleString()}

vs. Average Taxpayer

The average effective tax rate for your income bracket is 28-32%

You're here

Year-over-Year

Your tax liability increased by $12,450 from 2023, primarily due to higher investment income.

Detailed Breakdown

{progressData.map((item, index) => (

{item.label} ${item.amount.toLocaleString()} ({item.percentage}%)

))}

) }

About

Tags

Share

More from iconocapital

More Templates Like This

About

Tags

Share

About

Tags

Share

More from iconocapital

More Templates Like This