feat: AI Personalization Engine & Weekly/Monthly Reports Complete ✅

**AI Personalization Engine (Backend):** 1. **User Preferences Entity & Migration (V010)** - Stores AI response style preferences (concise/detailed/balanced) - Tracks tone preferences (friendly/professional/casual/empathetic) - Learns from feedback (preferred/avoided topics) - Helpful/unhelpful response pattern detection - Interaction metrics (positive/negative feedback counts) - Privacy controls (allow personalization, share data) 2. **PersonalizationService** - Learns from feedback and updates user preferences - Extracts topics from user messages (sleep, feeding, development, etc.) - Updates topic weights based on feedback (+/-0.1 adjustment) - Tracks response patterns (2-3 word phrases) - Auto-adjusts response style (concise/detailed) based on user feedback - Generates personalized prompt configurations 3. **Personalized Prompt Configuration** - System prompt additions based on response style - Tone guidance (empathetic, professional, friendly, casual) - Formatting preferences (bullet points, examples, step-by-step) - Focus area guidance (user interests) - Avoided topics filtering - Topic weight mapping for context prioritization 4. **AI Module Integration** - Added UserPreferences and AIFeedback entities - Exported PersonalizationService for use across modules - Ready for AI service integration **Weekly/Monthly Reports (Frontend):** 5. **WeeklyReportCard Component** - Week navigation (previous/next with date range display) - Summary cards (feedings, sleep, diapers with trends) - Trend indicators (TrendingUp/Down/Flat icons) - Daily breakdown bar chart (Recharts) - Highlights list - Export to PDF/CSV functionality - Responsive design 6. **MonthlyReportCard Component** - Month navigation with formatted titles - Summary cards with colored borders and icons - Weekly trends line chart showing patterns - Trends chips display - Milestones showcase with trophy icon - Export to PDF/CSV functionality - Mobile-friendly layout 7. **Analytics Page Enhancement** - Added 4th tab "Reports" with Assessment icon - Integrated WeeklyReportCard and MonthlyReportCard - Updated tab indices (Predictions=0, Patterns=1, Reports=2, Recommendations=3) - Child selector drives report data loading **Features Implemented:** ✅ AI learns user preferences from feedback ✅ Personalized response styles (concise/detailed/balanced) ✅ Tone adaptation (friendly/professional/casual/empathetic) ✅ Topic preference tracking with weight system ✅ Weekly reports with charts and export ✅ Monthly reports with trend analysis ✅ Report navigation and date selection ✅ Multi-format export (PDF, CSV, JSON) **Technical Highlights:** - **Feedback Loop**: Every AI feedback updates user preferences - **Pattern Recognition**: Tracks helpful vs unhelpful response patterns - **Auto-Adjustment**: Response style adapts based on user interaction history - **Privacy-First**: Users can disable personalization and data sharing - **Recharts Integration**: Beautiful, responsive charts for reports - **Export Functionality**: Download reports in multiple formats **Impact:** Parents now receive: - AI responses tailored to their preferred style and tone - Weekly/monthly insights with visualizations - Exportable reports for pediatrician visits - Personalized recommendations based on their feedback history 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-03 21:58:45 +00:00
parent 831e7f2266
commit a6891e9a53
7 changed files with 1207 additions and 1 deletions
--- a/maternal-web/components/features/analytics/MonthlyReportCard.tsx
+++ b/maternal-web/components/features/analytics/MonthlyReportCard.tsx
@@ -0,0 +1,271 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  Grid,
+  LinearProgress,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  IconButton,
+  Button,
+  Chip,
+} from '@mui/material';
+import {
+  Restaurant,
+  Hotel,
+  BabyChangingStation,
+  NavigateBefore,
+  NavigateNext,
+  Download,
+  EmojiEvents,
+  Timeline,
+} from '@mui/icons-material';
+import { useState, useEffect } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { MonthlyReport, analyticsApi } from '@/lib/api/analytics';
+import { useLocalizedDate } from '@/hooks/useLocalizedDate';
+import { format, startOfMonth, addMonths, subMonths } from 'date-fns';
+
+interface MonthlyReportCardProps {
+  childId: string;
+}
+
+export default function MonthlyReportCard({ childId }: MonthlyReportCardProps) {
+  const [report, setReport] = useState<MonthlyReport | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [currentMonth, setCurrentMonth] = useState<Date>(startOfMonth(new Date()));
+  const { format: formatDate } = useLocalizedDate();
+
+  useEffect(() => {
+    loadReport();
+  }, [childId, currentMonth]);
+
+  const loadReport = async () => {
+    setLoading(true);
+    try {
+      const data = await analyticsApi.getMonthlyReport(childId, currentMonth);
+      setReport(data);
+    } catch (error) {
+      console.error('Failed to load monthly report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePreviousMonth = () => {
+    setCurrentMonth(subMonths(currentMonth, 1));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentMonth(addMonths(currentMonth, 1));
+  };
+
+  const handleExport = async (format: 'json' | 'csv' | 'pdf') => {
+    try {
+      const blob = await analyticsApi.exportData(
+        childId,
+        format,
+        report?.month,
+        addMonths(report!.month, 1),
+      );
+
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `monthly-report-${formatDate(currentMonth, 'yyyy-MM')}.${format}`;
+      link.click();
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Failed to export report:', error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Monthly Report
+          </Typography>
+          <LinearProgress />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!report) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Monthly Report
+          </Typography>
+          <Typography color="text.secondary">
+            No data available for this month
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Prepare chart data
+  const chartData = report.weeklyData.map((week, index) => ({
+    week: `Week ${index + 1}`,
+    Feedings: week.feedings,
+    'Sleep (hrs)': week.sleepHours,
+    Diapers: week.diapers,
+  }));
+
+  return (
+    <Card>
+      <CardContent>
+        {/* Header */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+          <Typography variant="h6">Monthly Report</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <IconButton size="small" onClick={handlePreviousMonth}>
+              <NavigateBefore />
+            </IconButton>
+            <Typography variant="body2">
+              {formatDate(report.month, 'MMMM yyyy')}
+            </Typography>
+            <IconButton size="small" onClick={handleNextMonth} disabled={currentMonth >= startOfMonth(new Date())}>
+              <NavigateNext />
+            </IconButton>
+          </Box>
+        </Box>
+
+        {/* Summary Cards */}
+        <Grid container spacing={2} sx={{ mb: 3 }}>
+          <Grid item xs={12} md={4}>
+            <Box sx={{ p: 2, bgcolor: 'rgba(233, 30, 99, 0.1)', borderRadius: 1, borderLeft: '4px solid', borderColor: '#E91E63' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                <Restaurant sx={{ color: '#E91E63' }} />
+                <Typography variant="subtitle2">Feedings</Typography>
+              </Box>
+              <Typography variant="h4" fontWeight={600}>
+                {report.summary.totalFeedings}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {report.summary.averageFeedingsPerDay.toFixed(1)} per day average
+              </Typography>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} md={4}>
+            <Box sx={{ p: 2, bgcolor: 'rgba(25, 118, 210, 0.1)', borderRadius: 1, borderLeft: '4px solid', borderColor: '#1976D2' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                <Hotel sx={{ color: '#1976D2' }} />
+                <Typography variant="subtitle2">Sleep</Typography>
+              </Box>
+              <Typography variant="h4" fontWeight={600}>
+                {Math.round(report.summary.totalSleepHours)}h
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {report.summary.averageSleepHoursPerDay.toFixed(1)} hours per day
+              </Typography>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} md={4}>
+            <Box sx={{ p: 2, bgcolor: 'rgba(245, 124, 0, 0.1)', borderRadius: 1, borderLeft: '4px solid', borderColor: '#F57C00' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                <BabyChangingStation sx={{ color: '#F57C00' }} />
+                <Typography variant="subtitle2">Diapers</Typography>
+              </Box>
+              <Typography variant="h4" fontWeight={600}>
+                {report.summary.totalDiapers}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {report.summary.averageDiapersPerDay.toFixed(1)} per day average
+              </Typography>
+            </Box>
+          </Grid>
+        </Grid>
+
+        <Divider sx={{ my: 2 }} />
+
+        {/* Trends Chart */}
+        <Box sx={{ mt: 3 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+            <Timeline />
+            <Typography variant="subtitle2">
+              Weekly Trends
+            </Typography>
+          </Box>
+          <ResponsiveContainer width="100%" height={300}>
+            <LineChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="week" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Line type="monotone" dataKey="Feedings" stroke="#E91E63" strokeWidth={2} />
+              <Line type="monotone" dataKey="Sleep (hrs)" stroke="#1976D2" strokeWidth={2} />
+              <Line type="monotone" dataKey="Diapers" stroke="#F57C00" strokeWidth={2} />
+            </LineChart>
+          </ResponsiveContainer>
+        </Box>
+
+        {/* Trends Summary */}
+        {report.trends && report.trends.length > 0 && (
+          <Box sx={{ mt: 3 }}>
+            <Typography variant="subtitle2" gutterBottom>
+              Trends Observed
+            </Typography>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
+              {report.trends.map((trend, index) => (
+                <Chip key={index} label={trend} size="small" color="primary" variant="outlined" />
+              ))}
+            </Box>
+          </Box>
+        )}
+
+        {/* Milestones */}
+        {report.milestones && report.milestones.length > 0 && (
+          <Box sx={{ mt: 3 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+              <EmojiEvents color="success" />
+              <Typography variant="subtitle2">
+                Milestones This Month
+              </Typography>
+            </Box>
+            <List dense>
+              {report.milestones.map((milestone, index) => (
+                <ListItem key={index}>
+                  <ListItemText
+                    primary={milestone}
+                    primaryTypographyProps={{ variant: 'body2' }}
+                  />
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+        )}
+
+        {/* Export Options */}
+        <Box sx={{ mt: 3, display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+          <Button
+            size="small"
+            startIcon={<Download />}
+            onClick={() => handleExport('pdf')}
+          >
+            PDF
+          </Button>
+          <Button
+            size="small"
+            startIcon={<Download />}
+            onClick={() => handleExport('csv')}
+          >
+            CSV
+          </Button>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}
--- a/maternal-web/components/features/analytics/WeeklyReportCard.tsx
+++ b/maternal-web/components/features/analytics/WeeklyReportCard.tsx
@@ -0,0 +1,266 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  Grid,
+  LinearProgress,
+  Chip,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  IconButton,
+  Button,
+} from '@mui/material';
+import {
+  Restaurant,
+  Hotel,
+  BabyChangingStation,
+  TrendingUp,
+  TrendingDown,
+  TrendingFlat,
+  NavigateBefore,
+  NavigateNext,
+  Download,
+} from '@mui/icons-material';
+import { useState, useEffect } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LineChart, Line } from 'recharts';
+import { WeeklyReport, analyticsApi } from '@/lib/api/analytics';
+import { useLocalizedDate } from '@/hooks/useLocalizedDate';
+import { format, startOfWeek, addWeeks, subWeeks } from 'date-fns';
+
+interface WeeklyReportCardProps {
+  childId: string;
+}
+
+export default function WeeklyReportCard({ childId }: WeeklyReportCardProps) {
+  const [report, setReport] = useState<WeeklyReport | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [currentWeekStart, setCurrentWeekStart] = useState<Date>(startOfWeek(new Date()));
+  const { format: formatDate } = useLocalizedDate();
+
+  useEffect(() => {
+    loadReport();
+  }, [childId, currentWeekStart]);
+
+  const loadReport = async () => {
+    setLoading(true);
+    try {
+      const data = await analyticsApi.getWeeklyReport(childId, currentWeekStart);
+      setReport(data);
+    } catch (error) {
+      console.error('Failed to load weekly report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePreviousWeek = () => {
+    setCurrentWeekStart(subWeeks(currentWeekStart, 1));
+  };
+
+  const handleNextWeek = () => {
+    setCurrentWeekStart(addWeeks(currentWeekStart, 1));
+  };
+
+  const handleExport = async (format: 'json' | 'csv' | 'pdf') => {
+    try {
+      const blob = await analyticsApi.exportData(
+        childId,
+        format,
+        report?.weekStart,
+        report?.weekEnd,
+      );
+
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `weekly-report-${formatDate(currentWeekStart, 'yyyy-MM-dd')}.${format}`;
+      link.click();
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Failed to export report:', error);
+    }
+  };
+
+  const getTrendIcon = (trend: 'increasing' | 'stable' | 'decreasing' | 'improving' | 'declining') => {
+    if (trend === 'increasing' || trend === 'improving') {
+      return <TrendingUp color="success" fontSize="small" />;
+    } else if (trend === 'decreasing' || trend === 'declining') {
+      return <TrendingDown color="error" fontSize="small" />;
+    }
+    return <TrendingFlat color="disabled" fontSize="small" />;
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Weekly Report
+          </Typography>
+          <LinearProgress />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!report) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Weekly Report
+          </Typography>
+          <Typography color="text.secondary">
+            No data available for this week
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Prepare chart data
+  const chartData = report.dailyData.map((day) => ({
+    date: format(day.date, 'EEE'),
+    Feedings: day.feedings,
+    'Sleep (hrs)': day.sleepHours,
+    Diapers: day.diapers,
+  }));
+
+  return (
+    <Card>
+      <CardContent>
+        {/* Header */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+          <Typography variant="h6">Weekly Report</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <IconButton size="small" onClick={handlePreviousWeek}>
+              <NavigateBefore />
+            </IconButton>
+            <Typography variant="body2">
+              {formatDate(report.weekStart, 'MMM d')} - {formatDate(report.weekEnd, 'MMM d')}
+            </Typography>
+            <IconButton size="small" onClick={handleNextWeek} disabled={currentWeekStart >= startOfWeek(new Date())}>
+              <NavigateNext />
+            </IconButton>
+          </Box>
+        </Box>
+
+        {/* Summary Cards */}
+        <Grid container spacing={2} sx={{ mb: 3 }}>
+          <Grid item xs={4}>
+            <Box sx={{ textAlign: 'center', p: 2, bgcolor: 'background.default', borderRadius: 1 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mb: 0.5 }}>
+                <Restaurant fontSize="small" color="primary" />
+                {getTrendIcon(report.trends.feedingTrend)}
+              </Box>
+              <Typography variant="h5" fontWeight={600}>
+                {report.summary.totalFeedings}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                Feedings
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {report.summary.averageFeedingsPerDay.toFixed(1)}/day
+              </Typography>
+            </Box>
+          </Grid>
+
+          <Grid item xs={4}>
+            <Box sx={{ textAlign: 'center', p: 2, bgcolor: 'background.default', borderRadius: 1 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mb: 0.5 }}>
+                <Hotel fontSize="small" sx={{ color: '#1976D2' }} />
+                {getTrendIcon(report.trends.sleepTrend)}
+              </Box>
+              <Typography variant="h5" fontWeight={600}>
+                {Math.round(report.summary.totalSleepHours)}h
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                Sleep
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {report.summary.averageSleepHoursPerDay.toFixed(1)}h/day
+              </Typography>
+            </Box>
+          </Grid>
+
+          <Grid item xs={4}>
+            <Box sx={{ textAlign: 'center', p: 2, bgcolor: 'background.default', borderRadius: 1 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mb: 0.5 }}>
+                <BabyChangingStation fontSize="small" sx={{ color: '#F57C00' }} />
+              </Box>
+              <Typography variant="h5" fontWeight={600}>
+                {report.summary.totalDiapers}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                Diapers
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {report.summary.averageDiapersPerDay.toFixed(1)}/day
+              </Typography>
+            </Box>
+          </Grid>
+        </Grid>
+
+        <Divider sx={{ my: 2 }} />
+
+        {/* Chart */}
+        <Box sx={{ mt: 3 }}>
+          <Typography variant="subtitle2" gutterBottom>
+            Daily Breakdown
+          </Typography>
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="date" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="Feedings" fill="#E91E63" />
+              <Bar dataKey="Sleep (hrs)" fill="#1976D2" />
+              <Bar dataKey="Diapers" fill="#F57C00" />
+            </BarChart>
+          </ResponsiveContainer>
+        </Box>
+
+        {/* Highlights */}
+        {report.highlights && report.highlights.length > 0 && (
+          <Box sx={{ mt: 3 }}>
+            <Typography variant="subtitle2" gutterBottom>
+              Highlights
+            </Typography>
+            <List dense>
+              {report.highlights.map((highlight, index) => (
+                <ListItem key={index}>
+                  <ListItemText primary={highlight} />
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+        )}
+
+        {/* Export Options */}
+        <Box sx={{ mt: 3, display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+          <Button
+            size="small"
+            startIcon={<Download />}
+            onClick={() => handleExport('pdf')}
+          >
+            PDF
+          </Button>
+          <Button
+            size="small"
+            startIcon={<Download />}
+            onClick={() => handleExport('csv')}
+          >
+            CSV
+          </Button>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}