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)
204 lines
11 KiB
TypeScript
204 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useFinanzasStore } from '@/lib/store'
|
|
import { X, CreditCard, DollarSign, Calendar, FileText, Layers } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface AddPaymentModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export function AddPaymentModal({ isOpen, onClose }: AddPaymentModalProps) {
|
|
const cards = useFinanzasStore((state) => state.creditCards)
|
|
const addCardPayment = useFinanzasStore((state) => state.addCardPayment)
|
|
|
|
const [selectedCardId, setSelectedCardId] = useState(cards[0]?.id || '')
|
|
const [description, setDescription] = useState('')
|
|
const [amount, setAmount] = useState('')
|
|
const [dateStr, setDateStr] = useState(new Date().toISOString().split('T')[0])
|
|
const [hasInstallments, setHasInstallments] = useState(false)
|
|
const [installments, setInstallments] = useState('1')
|
|
const [totalInstallments, setTotalInstallments] = useState('12')
|
|
|
|
if (!isOpen) return null
|
|
|
|
// Ensure card selection if cards exist
|
|
if (!selectedCardId && cards.length > 0) {
|
|
setSelectedCardId(cards[0].id)
|
|
}
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!description || !amount || !selectedCardId) return
|
|
|
|
addCardPayment({
|
|
cardId: selectedCardId,
|
|
amount: parseFloat(amount),
|
|
date: new Date(dateStr).toISOString(),
|
|
description,
|
|
installments: hasInstallments ? {
|
|
current: parseInt(installments),
|
|
total: parseInt(totalInstallments)
|
|
} : undefined
|
|
})
|
|
|
|
// Reset
|
|
setDescription('')
|
|
setAmount('')
|
|
setHasInstallments(false)
|
|
setInstallments('1')
|
|
setTotalInstallments('12')
|
|
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
|
|
<div className="w-full max-w-lg rounded-xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden scale-100 animate-in zoom-in-95 duration-200">
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-6 border-b border-slate-800">
|
|
<h2 className="text-xl font-semibold text-white">Registrar Consumo / Pago</h2>
|
|
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{cards.length === 0 ? (
|
|
<div className="p-8 text-center space-y-4">
|
|
<CreditCard className="mx-auto text-slate-600 mb-2" size={48} />
|
|
<h3 className="text-lg font-medium text-white">No tienes tarjetas registradas</h3>
|
|
<p className="text-slate-400">Debes agregar una tarjeta antes de registrar pagos.</p>
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition"
|
|
>
|
|
Entendido
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-5">
|
|
|
|
{/* Card Selection */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Tarjeta</label>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[120px] overflow-y-auto pr-1">
|
|
{cards.map((card) => (
|
|
<div
|
|
key={card.id}
|
|
onClick={() => setSelectedCardId(card.id)}
|
|
className={cn(
|
|
"cursor-pointer p-3 rounded-lg border flex items-center gap-3 transition-all",
|
|
selectedCardId === card.id
|
|
? "border-cyan-500 bg-cyan-500/10 ring-1 ring-cyan-500"
|
|
: "border-slate-800 bg-slate-950 hover:border-slate-700"
|
|
)}
|
|
>
|
|
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: card.color }} />
|
|
<div className="flex flex-col truncate">
|
|
<span className="text-sm font-medium text-white truncate">{card.name}</span>
|
|
<span className="text-xs text-slate-500">**** {card.lastFourDigits}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Amount */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Monto</label>
|
|
<div className="relative">
|
|
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-semibold">$</span>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
value={amount}
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
className="w-full pl-8 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white text-lg font-mono outline-none"
|
|
required
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Descripción</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Ej: Cena McDonalds, Compra ML"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Date */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-1">
|
|
<Calendar size={12} /> Fecha
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={dateStr}
|
|
onChange={(e) => setDateStr(e.target.value)}
|
|
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none [color-scheme:dark]"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Installments Toggle */}
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-slate-800/30 rounded-lg cursor-pointer" onClick={() => setHasInstallments(!hasInstallments)}>
|
|
<div className={cn("w-5 h-5 rounded border flex items-center justify-center transition-colors", hasInstallments ? "bg-cyan-500 border-cyan-500" : "border-slate-600 bg-transparent")}>
|
|
{hasInstallments && <Layers size={14} className="text-white" />}
|
|
</div>
|
|
<span className="text-sm text-slate-300 select-none">Es una compra en cuotas</span>
|
|
</div>
|
|
|
|
{/* Installments Inputs */}
|
|
{hasInstallments && (
|
|
<div className="grid grid-cols-2 gap-4 animate-in slide-in-from-top-2">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Cuota N°</label>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={installments}
|
|
onChange={(e) => setInstallments(e.target.value)}
|
|
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Total Cuotas</label>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={totalInstallments}
|
|
onChange={(e) => setTotalInstallments(e.target.value)}
|
|
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="pt-2">
|
|
<button
|
|
type="submit"
|
|
className="w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-white font-semibold rounded-lg shadow-lg shadow-cyan-500/20 transition-all active:scale-[0.98]"
|
|
>
|
|
Registrar Pago
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|