feat: add services module with AI predictions
Added comprehensive services management with intelligent predictions: - New Services page (/services) with Luz, Agua, Gas, Internet tracking - AI-powered bill prediction based on historical data - Trend analysis (up/down percentage) for consumption patterns - Interactive service cards with icons and visual indicators - Complete payment history with period tracking - AddServiceModal for registering new bills - ServiceBill type definition with period tracking (YYYY-MM) - Services slice in Zustand store - Predictions engine using historical data analysis 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
renato97
141
components/modals/AddServiceModal.tsx
Normal file
141
components/modals/AddServiceModal.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useFinanzasStore } from '@/lib/store'
|
||||
import { X, Calendar, Zap, Droplets, Flame, Wifi } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface AddServiceModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const SERVICES = [
|
||||
{ id: 'electricity', label: 'Luz', icon: Zap, color: 'text-yellow-400' },
|
||||
{ id: 'water', label: 'Agua', icon: Droplets, color: 'text-blue-400' },
|
||||
{ id: 'gas', label: 'Gas', icon: Flame, color: 'text-orange-400' },
|
||||
{ id: 'internet', label: 'Internet', icon: Wifi, color: 'text-cyan-400' },
|
||||
]
|
||||
|
||||
export function AddServiceModal({ isOpen, onClose }: AddServiceModalProps) {
|
||||
const addServiceBill = useFinanzasStore((state) => state.addServiceBill)
|
||||
|
||||
const [type, setType] = useState('electricity')
|
||||
const [amount, setAmount] = useState('')
|
||||
const [period, setPeriod] = useState(new Date().toISOString().slice(0, 7)) // YYYY-MM
|
||||
const [date, setDate] = useState(new Date().toISOString().split('T')[0])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!amount) return
|
||||
|
||||
addServiceBill({
|
||||
type: type as any,
|
||||
amount: parseFloat(amount),
|
||||
date: new Date(date).toISOString(),
|
||||
period: period,
|
||||
notes: ''
|
||||
})
|
||||
|
||||
// Reset
|
||||
setAmount('')
|
||||
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">
|
||||
|
||||
<div className="flex items-center justify-between p-6 border-b border-slate-800">
|
||||
<h2 className="text-xl font-semibold text-white">Registrar Factura de Servicio</h2>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-5">
|
||||
|
||||
{/* Service Type Selection */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{SERVICES.map((s) => {
|
||||
const Icon = s.icon
|
||||
const isSelected = type === s.id
|
||||
return (
|
||||
<div
|
||||
key={s.id}
|
||||
onClick={() => setType(s.id)}
|
||||
className={cn(
|
||||
"cursor-pointer p-3 rounded-xl border flex flex-col items-center gap-2 transition-all",
|
||||
isSelected
|
||||
? "border-cyan-500 bg-cyan-500/10 ring-1 ring-cyan-500"
|
||||
: "border-slate-800 bg-slate-950 hover:border-slate-700 hover:bg-slate-900"
|
||||
)}
|
||||
>
|
||||
<Icon className={cn("w-6 h-6", s.color)} />
|
||||
<span className={cn("text-xs font-medium", isSelected ? "text-white" : "text-slate-400")}>{s.label}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Monto Factura</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>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* Period */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Periodo</label>
|
||||
<input
|
||||
type="month"
|
||||
value={period}
|
||||
onChange={(e) => setPeriod(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>
|
||||
|
||||
{/* Date */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Fecha Pago</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(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>
|
||||
</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]"
|
||||
>
|
||||
Guardar Factura
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user