renato97/finanzas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add consumption tracking for services

Browse Source 
Enhanced services module with comprehensive consumption tracking:
- Add usage field to ServiceBill interface (optional number)
- Add unit field to ServiceBill interface (kW, m³, or empty for internet)
- Updated AddServiceModal with consumption input field
- Auto-detect unit based on service type (electricity=kW, gas/water=m³, internet=none)
- Responsive grid layout for amount and consumption inputs
- Display consumption and unit in history list
- Show price per unit in history (amount/usage)
- Improved date display with responsive layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
renato97
2026-01-29 01:00:21 +00:00
parent d27aa6a9a7
commit 4ba5841839
3 changed files with 72 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/services/page.tsx
View File

@@ -105,12 +105,29 @@ export default function ServicesPage() {
</div>
<div>
<p className="text-white font-medium capitalize">{service?.label || bill.type}</p>
<p className="text-xs text-slate-500 capitalize">{new Date(bill.date).toLocaleDateString('es-AR', { dateStyle: 'long' })}</p>
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
<p className="text-xs text-slate-500 capitalize">{new Date(bill.date).toLocaleDateString('es-AR', { dateStyle: 'long' })}</p>
{bill.usage && (
<>
<span className="hidden sm:inline text-slate-700">•</span>
<p className="text-xs text-slate-400">
Consumo: <span className="text-slate-300 font-medium">{bill.usage} {bill.unit}</span>
</p>
</>
)}
</div>
</div>
</div>
<div className="text-right">
<p className="text-white font-mono font-medium">{formatCurrency(bill.amount)}</p>
<p className="text-xs text-slate-500 uppercase">{bill.period}</p>
<div className="flex flex-col items-end">
<p className="text-xs text-slate-500 uppercase">{bill.period}</p>
{bill.usage && bill.amount && (
<p className="text-[10px] text-cyan-500/80 font-mono">
{formatCurrency(bill.amount / bill.usage)} / {bill.unit}
</p>
)}
</div>
</div>
</div>
)