Fix daily summary to display real activity counts and add medicine tracker
## Backend Changes - Update tracking.service.ts getDailySummary to calculate actual counts - Import ActivityType enum for proper type comparisons - Calculate feedingCount, sleepTotalMinutes, diaperCount, medicationCount - Sleep duration now correctly calculated from startedAt/endedAt timestamps ## Frontend API Changes - Add medicationCount to DailySummary interface - Extract endTime from metadata and send as endedAt to backend - Enables proper sleep duration tracking with start/end times ## Homepage Updates - Add Medicine and Activities quick action buttons - Update summary grid from 3 to 4 columns (responsive layout) - Add medication count display with MedicalServices icon - Improve grid responsiveness (xs=6, sm=3) - Replace Analytics button with Activities button ## New Activities Page - Create /activities page to show recent activity history - Display last 7 days of activities with color-coded icons - Show smart timestamps (Today/Yesterday/date format) - Activity-specific descriptions (feeding amount, sleep duration, etc.) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
227
maternal-web/app/activities/page.tsx
Normal file
227
maternal-web/app/activities/page.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Paper,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Restaurant,
|
||||
Hotel,
|
||||
BabyChangingStation,
|
||||
MedicalServices,
|
||||
EmojiEvents,
|
||||
Note,
|
||||
} from '@mui/icons-material';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import { childrenApi, Child } from '@/lib/api/children';
|
||||
import { trackingApi, Activity } from '@/lib/api/tracking';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
const activityIcons: Record<string, any> = {
|
||||
feeding: <Restaurant />,
|
||||
sleep: <Hotel />,
|
||||
diaper: <BabyChangingStation />,
|
||||
medication: <MedicalServices />,
|
||||
milestone: <EmojiEvents />,
|
||||
note: <Note />,
|
||||
};
|
||||
|
||||
const activityColors: Record<string, string> = {
|
||||
feeding: '#FFB6C1',
|
||||
sleep: '#B6D7FF',
|
||||
diaper: '#FFE4B5',
|
||||
medication: '#FFB8B8',
|
||||
milestone: '#FFD700',
|
||||
note: '#E0E0E0',
|
||||
};
|
||||
|
||||
export default function ActivitiesPage() {
|
||||
const { user } = useAuth();
|
||||
const [children, setChildren] = useState<Child[]>([]);
|
||||
const [selectedChild, setSelectedChild] = useState<Child | null>(null);
|
||||
const [activities, setActivities] = useState<Activity[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const familyId = user?.families?.[0]?.familyId;
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
if (!familyId) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const childrenData = await childrenApi.getChildren(familyId);
|
||||
setChildren(childrenData);
|
||||
|
||||
if (childrenData.length > 0) {
|
||||
const firstChild = childrenData[0];
|
||||
setSelectedChild(firstChild);
|
||||
|
||||
// Load activities for the last 7 days
|
||||
const endDate = format(new Date(), 'yyyy-MM-dd');
|
||||
const startDate = format(
|
||||
new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
|
||||
'yyyy-MM-dd'
|
||||
);
|
||||
|
||||
const activitiesData = await trackingApi.getActivities(
|
||||
firstChild.id,
|
||||
undefined,
|
||||
startDate,
|
||||
endDate
|
||||
);
|
||||
setActivities(activitiesData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[ActivitiesPage] Failed to load data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [familyId]);
|
||||
|
||||
const formatActivityTime = (timestamp: string) => {
|
||||
const date = new Date(timestamp);
|
||||
const today = new Date();
|
||||
const yesterday = new Date(today);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
const isToday = date.toDateString() === today.toDateString();
|
||||
const isYesterday = date.toDateString() === yesterday.toDateString();
|
||||
|
||||
if (isToday) {
|
||||
return `Today at ${format(date, 'h:mm a')}`;
|
||||
} else if (isYesterday) {
|
||||
return `Yesterday at ${format(date, 'h:mm a')}`;
|
||||
} else {
|
||||
return format(date, 'MMM d, h:mm a');
|
||||
}
|
||||
};
|
||||
|
||||
const getActivityDescription = (activity: Activity) => {
|
||||
switch (activity.type) {
|
||||
case 'feeding':
|
||||
return activity.data?.amount
|
||||
? `${activity.data.amount} ${activity.data.unit || 'oz'}`
|
||||
: 'Feeding';
|
||||
case 'sleep':
|
||||
if (activity.data?.endedAt) {
|
||||
const duration = Math.floor(
|
||||
(new Date(activity.data.endedAt).getTime() -
|
||||
new Date(activity.timestamp).getTime()) /
|
||||
60000
|
||||
);
|
||||
const hours = Math.floor(duration / 60);
|
||||
const mins = duration % 60;
|
||||
return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
|
||||
}
|
||||
return 'Sleep';
|
||||
case 'diaper':
|
||||
return activity.data?.type || 'Diaper change';
|
||||
case 'medication':
|
||||
return activity.data?.name || 'Medication';
|
||||
default:
|
||||
return activity.type;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Typography variant="h4" gutterBottom fontWeight="600" sx={{ mb: 3 }}>
|
||||
Recent Activities
|
||||
</Typography>
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : activities.length === 0 ? (
|
||||
<Paper sx={{ p: 4, textAlign: 'center' }}>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
No activities recorded yet
|
||||
</Typography>
|
||||
</Paper>
|
||||
) : (
|
||||
<Paper>
|
||||
<List>
|
||||
{activities.map((activity, index) => (
|
||||
<ListItem
|
||||
key={activity.id}
|
||||
sx={{
|
||||
borderBottom:
|
||||
index < activities.length - 1 ? '1px solid' : 'none',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Box
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 2,
|
||||
bgcolor: activityColors[activity.type] || '#E0E0E0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
{activityIcons[activity.type] || <Note />}
|
||||
</Box>
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1" fontWeight="500">
|
||||
{getActivityDescription(activity)}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={activity.type}
|
||||
size="small"
|
||||
sx={{ textTransform: 'capitalize' }}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
secondary={
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{formatActivityTime(activity.timestamp)}
|
||||
</Typography>
|
||||
{activity.notes && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ mt: 0.5 }}
|
||||
>
|
||||
{activity.notes}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user