712b06f118
Complete personal finance management application with: - Dashboard with financial metrics and alerts - Credit card management and payments - Fixed and variable debt tracking - Monthly budget planning - Intelligent alert system - Responsive design with Tailwind CSS Tech stack: Next.js 14, TypeScript, Zustand, Recharts 🤖 Generated with [Claude Code](https://claude.com/claude-code)
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { cn, formatCurrency } from '@/lib/utils'
|
|
|
|
interface BudgetProgressProps {
|
|
current: number
|
|
max: number
|
|
label: string
|
|
color?: string
|
|
}
|
|
|
|
export function BudgetProgress({ current, max, label, color }: BudgetProgressProps) {
|
|
const percentage = max > 0 ? Math.min((current / max) * 100, 100) : 0
|
|
|
|
const getColorClass = () => {
|
|
if (color) return color
|
|
if (percentage < 70) return 'bg-emerald-500'
|
|
if (percentage < 90) return 'bg-amber-500'
|
|
return 'bg-red-500'
|
|
}
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-slate-300">{label}</span>
|
|
<span className="text-sm text-slate-400">
|
|
{formatCurrency(current)} <span className="text-slate-600">/ {formatCurrency(max)}</span>
|
|
</span>
|
|
</div>
|
|
<div className="h-3 bg-slate-700 rounded-full overflow-hidden">
|
|
<div
|
|
className={cn('h-full rounded-full transition-all duration-500 ease-out', getColorClass())}
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
<div className="flex justify-between mt-1">
|
|
<span className="text-xs text-slate-500">{percentage.toFixed(0)}% usado</span>
|
|
{percentage >= 100 && (
|
|
<span className="text-xs text-red-400 font-medium">Límite alcanzado</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|