346 lines
12 KiB
TypeScript
346 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import {
|
|
BarChart2, History, TrendingUp, Download,
|
|
Calendar, Filter, Activity
|
|
} from 'lucide-react'
|
|
import { useLiveQuery } from 'dexie-react-hooks'
|
|
import { format, subDays, startOfDay, isSameDay, subWeeks, subMonths } from 'date-fns'
|
|
|
|
import { db } from '@/lib/sync'
|
|
import { Card, LoadingState, Button, showToast } from '@/components/ui'
|
|
import { Header, PageContainer } from '@/components/layout/header'
|
|
import { SymptomQuickLog } from '@/components/symptoms/SymptomQuickLog'
|
|
import { SymptomCard } from '@/components/symptoms/SymptomCard'
|
|
import { SymptomTrendChart } from '@/components/symptoms/SymptomTrendChart'
|
|
import { SymptomReportGenerator } from '@/components/symptoms/SymptomReportGenerator'
|
|
import { useApp } from '../provider'
|
|
|
|
const TIME_RANGES = [
|
|
{ value: '7', label: '7 Days' },
|
|
{ value: '14', label: '14 Days' },
|
|
{ value: '30', label: '30 Days' },
|
|
]
|
|
|
|
const SYMPTOM_TYPES = [
|
|
{ type: 'FATIGUE', emoji: '😴', label: 'Fatigue', color: '#8b5cf6' },
|
|
{ type: 'NAUSEA', emoji: '🤢', label: 'Nausea', color: '#f59e0b' },
|
|
{ type: 'PAIN', emoji: '😣', label: 'Pain', color: '#ef4444' },
|
|
{ type: 'APPETITE', emoji: '🍽️', label: 'Appetite', color: '#10b981' },
|
|
{ type: 'SLEEP', emoji: '😴', label: 'Sleep', color: '#3b82f6' },
|
|
{ type: 'MOOD', emoji: '😔', label: 'Mood', color: '#ec4899' },
|
|
]
|
|
|
|
export default function EnhancedSymptomsPage() {
|
|
const router = useRouter()
|
|
const { currentWorkspace, refreshData } = useApp()
|
|
const [recentSymptoms, setRecentSymptoms] = useState<any[]>([])
|
|
const [timeRange, setTimeRange] = useState('7')
|
|
const [selectedType, setSelectedType] = useState<string | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [showReport, setShowReport] = useState(false)
|
|
|
|
// Fetch symptoms from IndexedDB
|
|
const localSymptoms = useLiveQuery(
|
|
() =>
|
|
db.symptoms
|
|
.where('workspaceId')
|
|
.equals(currentWorkspace.id)
|
|
.and((s) => !s.deletedAt)
|
|
.reverse()
|
|
.toArray(),
|
|
[currentWorkspace.id]
|
|
)
|
|
|
|
// Fetch from server
|
|
const fetchSymptoms = useCallback(async () => {
|
|
try {
|
|
const response = await fetch(
|
|
`/api/workspaces/${currentWorkspace.id}/symptoms?limit=100`
|
|
)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setRecentSymptoms(data.symptoms)
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch symptoms:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [currentWorkspace.id])
|
|
|
|
useEffect(() => {
|
|
fetchSymptoms()
|
|
}, [fetchSymptoms])
|
|
|
|
const handleLogged = () => {
|
|
fetchSymptoms()
|
|
refreshData()
|
|
}
|
|
|
|
// Combine local and server data
|
|
const symptoms = recentSymptoms.length > 0 ? recentSymptoms : localSymptoms || []
|
|
|
|
// Filter by time range
|
|
const daysBack = parseInt(timeRange)
|
|
const cutoffDate = subDays(new Date(), daysBack)
|
|
const filteredSymptoms = symptoms.filter(s =>
|
|
new Date(s.recordedAt) >= cutoffDate &&
|
|
(!selectedType || s.type === selectedType)
|
|
)
|
|
|
|
// Calculate stats
|
|
const stats = useMemo(() => {
|
|
const byType: Record<string, { count: number; avgSeverity: number }> = {}
|
|
|
|
filteredSymptoms.forEach(s => {
|
|
if (!byType[s.type]) {
|
|
byType[s.type] = { count: 0, avgSeverity: 0 }
|
|
}
|
|
byType[s.type].count++
|
|
byType[s.type].avgSeverity += s.severity
|
|
})
|
|
|
|
// Calculate averages
|
|
Object.keys(byType).forEach(type => {
|
|
byType[type].avgSeverity = Math.round((byType[type].avgSeverity / byType[type].count) * 10) / 10
|
|
})
|
|
|
|
return byType
|
|
}, [filteredSymptoms])
|
|
|
|
// Find patterns (days with multiple symptoms)
|
|
const patterns = useMemo(() => {
|
|
const byDate: Record<string, any[]> = {}
|
|
filteredSymptoms.forEach(s => {
|
|
const date = format(new Date(s.recordedAt), 'yyyy-MM-dd')
|
|
if (!byDate[date]) byDate[date] = []
|
|
byDate[date].push(s)
|
|
})
|
|
|
|
return Object.entries(byDate)
|
|
.filter(([_, items]) => items.length >= 2)
|
|
.sort((a, b) => b[0].localeCompare(a[0]))
|
|
.slice(0, 5)
|
|
}, [filteredSymptoms])
|
|
|
|
if (loading && !localSymptoms) {
|
|
return (
|
|
<>
|
|
<Header title="Symptom Insights" />
|
|
<PageContainer>
|
|
<LoadingState message="Loading symptoms..." />
|
|
</PageContainer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Header
|
|
title="Symptom Insights"
|
|
rightAction={{
|
|
icon: <History className="w-6 h-6 text-secondary-700" />,
|
|
label: 'History',
|
|
onClick: () => router.push('/symptoms/history'),
|
|
}}
|
|
/>
|
|
<PageContainer className="pt-4 space-y-6">
|
|
{/* Quick Log */}
|
|
<section>
|
|
<h2 className="text-lg font-semibold text-secondary-900 mb-3">Log a Symptom</h2>
|
|
<Card>
|
|
<SymptomQuickLog
|
|
workspaceId={currentWorkspace.id}
|
|
onLogged={handleLogged}
|
|
medications={medications}
|
|
/>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* Time Range & Filters */}
|
|
<section>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-lg font-semibold text-secondary-900 flex items-center">
|
|
<TrendingUp className="w-5 h-5 mr-2" />
|
|
Trends & Insights
|
|
</h2>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowReport(true)}
|
|
>
|
|
<Download className="w-4 h-4 mr-1" />
|
|
Report
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Time Range Selector */}
|
|
<div className="flex gap-2 mb-4">
|
|
{TIME_RANGES.map(range => (
|
|
<button
|
|
key={range.value}
|
|
onClick={() => setTimeRange(range.value)}
|
|
className={`px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
|
|
timeRange === range.value
|
|
? 'bg-primary-500 text-white'
|
|
: 'bg-secondary-100 text-secondary-600 hover:bg-secondary-200'
|
|
}`}
|
|
>
|
|
{range.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Symptom Type Filter */}
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
<button
|
|
onClick={() => setSelectedType(null)}
|
|
className={`px-3 py-1.5 rounded-full text-sm transition-all ${
|
|
selectedType === null
|
|
? 'bg-secondary-800 text-white'
|
|
: 'bg-secondary-100 text-secondary-600'
|
|
}`}
|
|
>
|
|
All
|
|
</button>
|
|
{SYMPTOM_TYPES.map(type => (
|
|
<button
|
|
key={type.type}
|
|
onClick={() => setSelectedType(type.type)}
|
|
className={`px-3 py-1.5 rounded-full text-sm transition-all flex items-center gap-1 ${
|
|
selectedType === type.type
|
|
? 'text-white'
|
|
: 'bg-secondary-100 text-secondary-600'
|
|
}`}
|
|
style={{
|
|
backgroundColor: selectedType === type.type ? type.color : undefined
|
|
}}
|
|
>
|
|
<span>{type.emoji}</span>
|
|
<span>{type.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Trend Chart */}
|
|
{filteredSymptoms.length > 0 && (
|
|
<Card>
|
|
<SymptomTrendChart
|
|
symptoms={filteredSymptoms}
|
|
days={parseInt(timeRange)}
|
|
selectedType={selectedType}
|
|
/>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Stats Summary */}
|
|
{Object.keys(stats).length > 0 && (
|
|
<Card>
|
|
<h3 className="font-semibold text-secondary-900 mb-3 flex items-center">
|
|
<Activity className="w-5 h-5 mr-2 text-primary-500" />
|
|
Summary ({timeRange} Days)
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{Object.entries(stats).map(([type, data]) => {
|
|
const typeInfo = SYMPTOM_TYPES.find(t => t.type === type)
|
|
return (
|
|
<div key={type} className="flex items-center justify-between p-3 bg-secondary-50 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">{typeInfo?.emoji}</span>
|
|
<div>
|
|
<p className="font-medium text-secondary-900">{typeInfo?.label}</p>
|
|
<p className="text-xs text-secondary-500">{data.count} logged</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-semibold text-secondary-900">{data.avgSeverity}/5</p>
|
|
<p className="text-xs text-secondary-500">avg severity</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Patterns */}
|
|
{patterns.length > 0 && (
|
|
<Card>
|
|
<h3 className="font-semibold text-secondary-900 mb-3 flex items-center">
|
|
<Calendar className="w-5 h-5 mr-2 text-primary-500" />
|
|
Patterns Noticed
|
|
</h3>
|
|
<p className="text-sm text-secondary-500 mb-3">
|
|
Days with multiple symptoms logged
|
|
</p>
|
|
<div className="space-y-2">
|
|
{patterns.map(([date, items]) => (
|
|
<div key={date} className="p-3 bg-amber-50 border border-amber-100 rounded-lg">
|
|
<p className="font-medium text-secondary-900">
|
|
{format(new Date(date), 'EEEE, MMM d')}
|
|
</p>
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{items.map((item, i) => (
|
|
<span
|
|
key={i}
|
|
className="text-xs px-2 py-0.5 bg-white rounded-full text-secondary-600"
|
|
>
|
|
{SYMPTOM_TYPES.find(t => t.type === item.type)?.label} ({item.severity}/5)
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Recent Symptoms */}
|
|
<section>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-lg font-semibold text-secondary-900">Recent</h2>
|
|
{symptoms.length > 5 && (
|
|
<button
|
|
onClick={() => router.push('/symptoms/history')}
|
|
className="text-sm text-primary-600 font-medium"
|
|
>
|
|
View all
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{symptoms.length === 0 ? (
|
|
<Card variant="outline" className="text-center py-8">
|
|
<BarChart2 className="w-10 h-10 text-secondary-300 mx-auto mb-3" />
|
|
<p className="text-secondary-500">No symptoms logged yet</p>
|
|
<p className="text-sm text-secondary-400 mt-1">
|
|
Use the form above to track how you're feeling
|
|
</p>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{symptoms.slice(0, 5).map((symptom: any) => (
|
|
<SymptomCard key={symptom.id} symptom={symptom} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</PageContainer>
|
|
|
|
{/* Report Modal */}
|
|
{showReport && (
|
|
<SymptomReportGenerator
|
|
symptoms={filteredSymptoms}
|
|
workspaceId={currentWorkspace.id}
|
|
timeRange={parseInt(timeRange)}
|
|
onClose={() => setShowReport(false)}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|