AI Newsletter Digest improvements: fixed QP soft line break decoding, URL extraction, and content cleaning
This commit is contained in:
Krilly
@@ -0,0 +1,217 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { format } from 'date-fns'
|
||||
import { X, FileText, Download, Share2 } from 'lucide-react'
|
||||
|
||||
import { Button, showToast } from '@/components/ui'
|
||||
|
||||
interface Symptom {
|
||||
id: string
|
||||
type: string
|
||||
customName?: string
|
||||
severity: number
|
||||
notes?: string
|
||||
recordedAt: string
|
||||
durationMinutes?: number
|
||||
triggers?: string
|
||||
medicationTaken?: string
|
||||
reliefNotes?: string
|
||||
}
|
||||
|
||||
interface SymptomReportGeneratorProps {
|
||||
symptoms: Symptom[]
|
||||
workspaceId: string
|
||||
timeRange: number
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const SYMPTOM_LABELS: Record<string, string> = {
|
||||
FATIGUE: 'Fatigue',
|
||||
NAUSEA: 'Nausea',
|
||||
PAIN: 'Pain',
|
||||
APPETITE: 'Appetite Loss',
|
||||
SLEEP: 'Sleep Issues',
|
||||
MOOD: 'Mood Changes',
|
||||
CUSTOM: 'Other',
|
||||
}
|
||||
|
||||
export function SymptomReportGenerator({
|
||||
symptoms,
|
||||
workspaceId,
|
||||
timeRange,
|
||||
onClose
|
||||
}: SymptomReportGeneratorProps) {
|
||||
const [generating, setGenerating] = useState(false)
|
||||
|
||||
const reportData = useMemo(() => {
|
||||
// Group by type
|
||||
const byType: Record<string, Symptom[]> = {}
|
||||
symptoms.forEach(s => {
|
||||
if (!byType[s.type]) byType[s.type] = []
|
||||
byType[s.type].push(s)
|
||||
})
|
||||
|
||||
// Calculate averages
|
||||
const averages = Object.entries(byType).map(([type, items]) => ({
|
||||
type,
|
||||
label: SYMPTOM_LABELS[type] || type,
|
||||
count: items.length,
|
||||
avgSeverity: (items.reduce((sum, s) => sum + s.severity, 0) / items.length).toFixed(1),
|
||||
maxSeverity: Math.max(...items.map(s => s.severity)),
|
||||
}))
|
||||
|
||||
// Sort by frequency
|
||||
averages.sort((a, b) => b.count - a.count)
|
||||
|
||||
// Daily breakdown
|
||||
const byDay: Record<string, Symptom[]> = {}
|
||||
symptoms.forEach(s => {
|
||||
const day = format(new Date(s.recordedAt), 'yyyy-MM-dd')
|
||||
if (!byDay[day]) byDay[day] = []
|
||||
byDay[day].push(s)
|
||||
})
|
||||
|
||||
return { byType, averages, byDay }
|
||||
}, [symptoms])
|
||||
|
||||
const generatePDF = async () => {
|
||||
setGenerating(true)
|
||||
try {
|
||||
const response = await fetch(`/api/workspaces/${workspaceId}/symptoms/report`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
symptoms,
|
||||
timeRange,
|
||||
generatedAt: new Date().toISOString()
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Failed to generate report')
|
||||
|
||||
const blob = await response.blob()
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `symptom-report-${format(new Date(), 'yyyy-MM-dd')}.pdf`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
document.body.removeChild(a)
|
||||
|
||||
showToast('Report downloaded', 'success')
|
||||
} catch {
|
||||
showToast('Failed to generate report', 'error')
|
||||
} finally {
|
||||
setGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const copySummary = () => {
|
||||
const summary = `
|
||||
Symptom Summary (Last ${timeRange} Days)
|
||||
Generated: ${format(new Date(), 'MMM d, yyyy')}
|
||||
|
||||
Total Symptoms Logged: ${symptoms.length}
|
||||
|
||||
By Symptom Type:
|
||||
${reportData.averages.map(a =>
|
||||
`- ${a.label}: ${a.count} times (avg severity: ${a.avgSeverity}/5)`
|
||||
).join('\n')}
|
||||
|
||||
Most Common: ${reportData.averages[0]?.label || 'N/A'}
|
||||
Average Severity: ${(symptoms.reduce((s, x) => s + x.severity, 0) / symptoms.length || 0).toFixed(1)}/5
|
||||
`.trim()
|
||||
|
||||
navigator.clipboard.writeText(summary)
|
||||
showToast('Summary copied to clipboard', 'success')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl max-w-md w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-primary-500" />
|
||||
<h2 className="font-semibold text-secondary-900">Symptom Report</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-secondary-100 rounded-full"
|
||||
>
|
||||
<X className="w-5 h-5 text-secondary-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto p-4 space-y-4">
|
||||
{/* Summary */}
|
||||
<div className="bg-primary-50 rounded-lg p-4">
|
||||
<h3 className="font-medium text-primary-900 mb-2">Summary</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-primary-700">{symptoms.length}</p>
|
||||
<p className="text-xs text-primary-600">Total Logged</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-primary-700">
|
||||
{(symptoms.reduce((s, x) => s + x.severity, 0) / symptoms.length || 0).toFixed(1)}
|
||||
</p>
|
||||
<p className="text-xs text-primary-600">Avg Severity</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breakdown */}
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-900 mb-2">By Symptom Type</h3>
|
||||
<div className="space-y-2">
|
||||
{reportData.averages.map(item => (
|
||||
<div
|
||||
key={item.type}
|
||||
className="flex items-center justify-between p-3 bg-secondary-50 rounded-lg"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium text-secondary-900">{item.label}</p>
|
||||
<p className="text-xs text-secondary-500">{item.count} occurrences</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-semibold text-secondary-900">{item.avgSeverity}/5</p>
|
||||
<p className="text-xs text-secondary-500">avg</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<p className="text-xs text-secondary-500 text-center">
|
||||
Share this report with your doctor at your next appointment
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="p-4 border-t border-border space-y-2">
|
||||
<Button
|
||||
onClick={generatePDF}
|
||||
loading={generating}
|
||||
fullWidth
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download PDF
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={copySummary}
|
||||
fullWidth
|
||||
>
|
||||
<Share2 className="w-4 h-4 mr-2" />
|
||||
Copy Text Summary
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { format, subDays, startOfDay, isSameDay } from 'date-fns'
|
||||
|
||||
interface Symptom {
|
||||
id: string
|
||||
type: string
|
||||
severity: number
|
||||
recordedAt: string
|
||||
durationMinutes?: number
|
||||
triggers?: string
|
||||
medicationTaken?: string
|
||||
}
|
||||
|
||||
interface SymptomTrendChartProps {
|
||||
symptoms: Symptom[]
|
||||
days?: number
|
||||
selectedType?: string | null
|
||||
}
|
||||
|
||||
const SYMPTOM_COLORS: Record<string, string> = {
|
||||
FATIGUE: '#8b5cf6',
|
||||
NAUSEA: '#f59e0b',
|
||||
PAIN: '#ef4444',
|
||||
APPETITE: '#10b981',
|
||||
SLEEP: '#3b82f6',
|
||||
MOOD: '#ec4899',
|
||||
CUSTOM: '#6b7280',
|
||||
}
|
||||
|
||||
const SYMPTOM_EMOJIS: Record<string, string> = {
|
||||
FATIGUE: '😴',
|
||||
NAUSEA: '🤢',
|
||||
PAIN: '😣',
|
||||
APPETITE: '🍽️',
|
||||
SLEEP: '😴',
|
||||
MOOD: '😔',
|
||||
CUSTOM: '📝',
|
||||
}
|
||||
|
||||
export function SymptomTrendChart({ symptoms, days = 7, selectedType }: SymptomTrendChartProps) {
|
||||
// Generate date range
|
||||
const today = startOfDay(new Date())
|
||||
const dates = useMemo(() =>
|
||||
Array.from({ length: days }, (_, i) => subDays(today, days - 1 - i)),
|
||||
[days, today]
|
||||
)
|
||||
|
||||
// Group symptoms by type and date
|
||||
const dataByTypeAndDate = useMemo(() => {
|
||||
const result: Record<string, Record<string, { avgSeverity: number; count: number }>> = {}
|
||||
|
||||
symptoms.forEach(s => {
|
||||
if (selectedType && s.type !== selectedType) return
|
||||
|
||||
const dateKey = format(new Date(s.recordedAt), 'yyyy-MM-dd')
|
||||
if (!result[s.type]) result[s.type] = {}
|
||||
if (!result[s.type][dateKey]) {
|
||||
result[s.type][dateKey] = { avgSeverity: 0, count: 0 }
|
||||
}
|
||||
result[s.type][dateKey].avgSeverity += s.severity
|
||||
result[s.type][dateKey].count++
|
||||
})
|
||||
|
||||
// Calculate averages
|
||||
Object.keys(result).forEach(type => {
|
||||
Object.keys(result[type]).forEach(date => {
|
||||
const data = result[type][date]
|
||||
data.avgSeverity = data.avgSeverity / data.count
|
||||
})
|
||||
})
|
||||
|
||||
return result
|
||||
}, [symptoms, selectedType])
|
||||
|
||||
// Get unique types
|
||||
const types = selectedType ? [selectedType] : Object.keys(dataByTypeAndDate)
|
||||
|
||||
if (symptoms.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 text-secondary-500">
|
||||
No symptom data to display
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Chart Area */}
|
||||
<div className="h-48 relative">
|
||||
{/* Grid lines */}
|
||||
<div className="absolute inset-0 flex flex-col justify-between">
|
||||
{[5, 4, 3, 2, 1].map(level => (
|
||||
<div key={level} className="flex items-center">
|
||||
<span className="w-4 text-xs text-secondary-400">{level}</span>
|
||||
<div className="flex-1 border-t border-secondary-100" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bars */}
|
||||
<div className="absolute inset-0 pl-6 flex items-end gap-1">
|
||||
{dates.map((date, i) => {
|
||||
const dateKey = format(date, 'yyyy-MM-dd')
|
||||
const dayData: Record<string, number> = {}
|
||||
|
||||
types.forEach(type => {
|
||||
if (dataByTypeAndDate[type]?.[dateKey]) {
|
||||
dayData[type] = dataByTypeAndDate[type][dateKey].avgSeverity
|
||||
}
|
||||
})
|
||||
|
||||
const hasData = Object.keys(dayData).length > 0
|
||||
|
||||
return (
|
||||
<div key={i} className="flex-1 flex flex-col items-center">
|
||||
<div className="w-full flex items-end justify-center gap-0.5 h-40">
|
||||
{hasData ? (
|
||||
types.map(type => {
|
||||
const severity = dayData[type]
|
||||
if (!severity) return null
|
||||
const height = (severity / 5) * 100
|
||||
return (
|
||||
<div
|
||||
key={type}
|
||||
className="w-full rounded-t transition-all hover:opacity-80"
|
||||
style={{
|
||||
height: `${height}%`,
|
||||
backgroundColor: SYMPTOM_COLORS[type] || '#6b7280',
|
||||
minHeight: '4px',
|
||||
}}
|
||||
title={`${type}: ${severity.toFixed(1)}/5`}
|
||||
/>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="w-full h-1 bg-secondary-100 rounded" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date labels */}
|
||||
<div className="flex pl-6">
|
||||
{dates.map((date, i) => (
|
||||
<div key={i} className="flex-1 text-center">
|
||||
<span className="text-xs text-secondary-500">
|
||||
{format(date, days > 14 ? 'd' : 'EEE')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
{!selectedType && types.length > 0 && (
|
||||
<div className="flex flex-wrap justify-center gap-3 pt-2 border-t border-border">
|
||||
{types.map(type => (
|
||||
<div key={type} className="flex items-center gap-1">
|
||||
<div
|
||||
className="w-3 h-3 rounded"
|
||||
style={{ backgroundColor: SYMPTOM_COLORS[type] || '#6b7280' }}
|
||||
/>
|
||||
<span className="text-xs text-secondary-600">
|
||||
{SYMPTOM_EMOJIS[type]} {type.charAt(0) + type.slice(1).toLowerCase()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user