AI Newsletter Digest improvements: fixed QP soft line break decoding, URL extraction, and content cleaning
This commit is contained in:
Krilly
345
nextstep-features/enhanced-symptoms/app/page.tsx
Normal file
345
nextstep-features/enhanced-symptoms/app/page.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
'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)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user