import { useState, useEffect } from 'react' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Clock, Droplet, GlassWater } from "lucide-react" type Minzione = { id: string data: Date volume: number // in ml } type Liquido = { id: string data: Date volume: number // in ml tipo: string } export default function MinzionaleDiario() { const [minzioni, setMinzioni] = useState([]) const [liquidi, setLiquidi] = useState([]) const [volumeMinzione, setVolumeMinzione] = useState('') const [volumeLiquido, setVolumeLiquido] = useState('') const [tipoLiquido, setTipoLiquido] = useState('acqua') const [orarioAttuale, setOrarioAttuale] = useState(new Date()) // Aggiorna l'orario ogni secondo useEffect(() => { const timer = setInterval(() => { setOrarioAttuale(new Date()) }, 1000) return () => clearInterval(timer) }, []) const aggiungiMinzione = () => { if (!volumeMinzione) return const nuovaMinzione: Minzione = { id: Date.now().toString(), data: new Date(), volume: parseInt(volumeMinzione) } setMinzioni([...minzioni, nuovaMinzione]) setVolumeMinzione('') } const aggiungiLiquido = () => { if (!volumeLiquido) return const nuovoLiquido: Liquido = { id: Date.now().toString(), data: new Date(), volume: parseInt(volumeLiquido), tipo: tipoLiquido } setLiquidi([...liquidi, nuovoLiquido]) setVolumeLiquido('') } const datiUltime24Ore = () => { const ora = new Date() const ventiquattroOreFa = new Date(ora.getTime() - (24 * 60 * 60 * 1000)) const minzioniRecenti = minzioni.filter(m => new Date(m.data) > ventiquattroOreFa) const liquidiRecenti = liquidi.filter(l => new Date(l.data) > ventiquattroOreFa) return { numeroMinzioni: minzioniRecenti.length, volumeTotaleUrina: minzioniRecenti.reduce((sum, m) => sum + m.volume, 0), volumeTotaleLiquidi: liquidiRecenti.reduce((sum, l) => sum + l.volume, 0) } } // Chiamiamo la funzione e salviamo il risultato in una variabile const { numeroMinzioni, volumeTotaleUrina, volumeTotaleLiquidi } = datiUltime24Ore() return (

{/* Banner */}

Urorehab

Studio di Fisioterapia e Riabilitazione del Pavimento Pelvico

Diario Minzionale

{/* Riepilogo */}

Riepilogo Ultime 24 Ore

Frequenza Minzioni

{numeroMinzioni}

Volume Totale Urine

{volumeTotaleUrina} ml

Liquidi Assunti

{volumeTotaleLiquidi} ml

{/* Aggiungi Minzione */}

Registra Minzione

Ora attuale: {orarioAttuale.toLocaleTimeString('it-IT', {hour: '2-digit', minute:'2-digit', second:'2-digit'})}

Volume (ml) setVolumeMinzione(e.target.value)} style={{borderColor: '#002739'}} />

{/* Aggiungi Liquido */}

Registra Liquido

Volume (ml) setVolumeLiquido(e.target.value)} style={{borderColor: '#002739'}} />

{/* Storico */}

{/* Storico Minzioni */}

Storico Minzioni

{minzioni.length === 0 ? (

Nessuna minzione registrata

) : ( minzioni.slice().reverse().map(minzione => (

{minzione.volume} ml

{new Date(minzione.data).toLocaleTimeString('it-IT')}

{new Date(minzione.data).toLocaleDateString('it-IT')}

)) )}

{/* Storico Liquidi */}

Storico Liquidi

{liquidi.length === 0 ? (

Nessun liquido registrato

) : ( liquidi.slice().reverse().map(liquido => (

{liquido.volume} ml ({liquido.tipo})

{new Date(liquido.data).toLocaleTimeString('it-IT')}

{new Date(liquido.data).toLocaleDateString('it-IT')}

)) )}

) }