import DayNavigator from '@/Components/DayNavigator'; import ExportButton from '@/Components/ExportButton'; import PrintButton from '@/Components/PrintButton'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { capitalize, t } from '@/lib/utils'; import LineMetricChart from '@/Pages/Metric/LineMetricChart'; import MetricMeasure from '@/Pages/Metric/MetricMeasure'; import MetricPeriodSummary from '@/Pages/Metric/MetricPeriodSummary'; import MetricSummaryCard from '@/Pages/Metric/MetricSummaryCard'; import { AggregatedMetricData, MetricPeriod, OxygenSaturation, User, } from '@/types'; import { Head, router, usePage } from '@inertiajs/react'; import dayjs, { Dayjs } from 'dayjs'; import { useState } from 'react'; interface MetricDetailProps { measures: OxygenSaturation[]; metricName: string; patient: User; availableDates: string[]; period: MetricPeriod | null; measuresByHour: AggregatedMetricData[]; } export default function OxygenSaturationMetricDetail({ measures, measuresByHour, metricName, patient, availableDates, period, }: MetricDetailProps) { const user = usePage().props.auth.user; const now = dayjs(); const { filters } = usePage().props as unknown as { filters: { date?: string }; }; const [date, setDate] = useState(filters?.date || now.format('YYYY-MM-DD')); const onDateChange = (updatedDate: Dayjs) => { const dateString = dayjs(updatedDate).format('YYYY-MM-DD'); setDate(dateString); router.get( route('oxygen-saturation.detail', { patient: patient.id }), { date: dateString }, { preserveState: true, preserveScroll: true, replace: true }, ); }; const onRangeChange = (from: Dayjs, to: Dayjs) => { router.get( route('oxygen-saturation.detail', { patient: patient.id }), { from: from.format('YYYY-MM-DD'), to: to.format('YYYY-MM-DD'), }, { preserveState: true, preserveScroll: true, replace: true }, ); }; const periodData = period ? period.data.map((point) => ({ date: dayjs(point.date).format( period.byMonth ? 'MM/YYYY' : 'DD/MM', ), average: point.average, min: point.min, max: point.max, })) : []; const backLinkLabel = patient.id === user.id ? 'Dashboard' : `${patient.name} ${patient.surname}`; const data = measuresByHour.map((measure) => ({ date: dayjs(measure.date).format('HH:mm'), average: measure.average, min: measure.min, max: measure.max, })); const ascSortedMeasures = [...measures].sort((a, b) => a.value - b.value); const min = measures.length ? ascSortedMeasures[0].value : null; const max = measures.length ? ascSortedMeasures[ascSortedMeasures.length - 1].value : null; const measuresWithHrv = measures.filter((m) => m.hrv != null); const avgHrv = measuresWithHrv.length ? Math.round( measuresWithHrv.reduce((s, m) => s + m.hrv!, 0) / measuresWithHrv.length, ) : null; const measuresWithBreath = measures.filter((m) => m.breath != null); const avgBreath = measuresWithBreath.length ? Math.round( measuresWithBreath.reduce((s, m) => s + m.breath!, 0) / measuresWithBreath.length, ) : null; return (

Saturazione di ossigeno

{period && ( )} {!period && (

{avgHrv !== null && ( )} {avgBreath !== null && ( )}

)}

La saturazione di ossigeno (SpO2) indica la quantità di ossigeno nel sangue. Monitorarla è importante per valutare la salute respiratoria e il livello di ossigenazione del corpo. Valori normali sono sopra il 95%. Livelli bassi possono indicare problemi respiratori o circolatori e richiedere attenzione medica.

{!period && (

Misurazioni

); })}

)}

); }