Add Medicine and Activity trackers with voice command support
Added new tracking pages: - Medicine tracker: track medication name, dosage, unit, route, and reason - Activity tracker: track play, exercise, walks, music, reading, tummy time, etc. - Both pages follow existing tracker patterns with recent activities list Voice command improvements: - Updated voice classification to support medicine and activity types - Added detailed extraction fields for medicine (medicineName, dosage, unit, route, reason) - Added detailed extraction fields for activity (activityType, duration, description) - Enhanced unknown intent dialog with manual tracker selection - Updated tracker options to match implemented pages (removed milestone) Backend changes: - Added MEDICINE and ACTIVITY to ActivityType enum - Created migration V013 to add medicine/activity to database CHECK constraint - Updated voice service prompts to include medicine and activity extraction Frontend changes: - Created /track/medicine page with full CRUD operations - Created /track/activity page with full CRUD operations - Added Medicine card to /track page with MedicalServices icon - Updated VoiceFloatingButton unknown dialog with 4 tracker options 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -18,8 +18,10 @@ export enum ActivityType {
|
||||
DIAPER = 'diaper',
|
||||
GROWTH = 'growth',
|
||||
MEDICATION = 'medication',
|
||||
MEDICINE = 'medicine',
|
||||
TEMPERATURE = 'temperature',
|
||||
MILESTONE = 'milestone',
|
||||
ACTIVITY = 'activity',
|
||||
}
|
||||
|
||||
@Entity('activities')
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
-- V013_add_medicine_activity_types.sql
|
||||
-- Migration V013: Add 'medicine' and 'activity' to allowed activity types
|
||||
|
||||
-- Drop the existing constraint
|
||||
ALTER TABLE activities DROP CONSTRAINT IF EXISTS activities_type_check;
|
||||
|
||||
-- Add the new constraint with medicine and activity included
|
||||
ALTER TABLE activities ADD CONSTRAINT activities_type_check
|
||||
CHECK (type IN ('feeding', 'sleep', 'diaper', 'growth', 'medication', 'medicine', 'temperature', 'milestone', 'activity'));
|
||||
@@ -16,7 +16,7 @@ export interface TranscriptionResult {
|
||||
}
|
||||
|
||||
export interface ActivityExtractionResult {
|
||||
type: string; // 'feeding', 'sleep', 'diaper', 'medicine', 'milestone'
|
||||
type: string; // 'feeding', 'sleep', 'diaper', 'medicine', 'milestone', 'activity'
|
||||
timestamp?: Date;
|
||||
details: Record<string, any>;
|
||||
confidence: number;
|
||||
@@ -172,12 +172,15 @@ Extract activity details from the user's text and respond ONLY with valid JSON (
|
||||
4. **medicine** - Any mention of medication, vitamin, supplement, drops, dose
|
||||
- Extract: name, dosage, unit, notes
|
||||
|
||||
5. **milestone** - Any mention of first time events, developmental progress, achievements
|
||||
5. **activity** - Any mention of play, exercise, walk, music, reading, tummy time, outdoor activities
|
||||
- Extract: activityType (play/walk/exercise/music/reading/tummy_time/outdoor/other), duration (minutes), description, notes
|
||||
|
||||
6. **milestone** - Any mention of first time events, developmental progress, achievements, new skills
|
||||
- Extract: description, category (motor/social/cognitive/language), notes
|
||||
|
||||
**Response Format:**
|
||||
{
|
||||
"type": "feeding|sleep|diaper|medicine|milestone|unknown",
|
||||
"type": "feeding|sleep|diaper|medicine|activity|milestone|unknown",
|
||||
"timestamp": "ISO 8601 datetime if mentioned (e.g., '3pm', '30 minutes ago'), otherwise use current time",
|
||||
"details": {
|
||||
// For feeding:
|
||||
@@ -202,9 +205,17 @@ Extract activity details from the user's text and respond ONLY with valid JSON (
|
||||
"notes": string or null
|
||||
|
||||
// For medicine:
|
||||
"name": string,
|
||||
"medicineName": string,
|
||||
"dosage": number or string,
|
||||
"unit": string or null,
|
||||
"route": "oral|topical|injection|other" or null,
|
||||
"reason": string or null,
|
||||
"notes": string or null
|
||||
|
||||
// For activity:
|
||||
"activityType": "play|walk|exercise|music|reading|tummy_time|outdoor|other",
|
||||
"duration": number (minutes) or null,
|
||||
"description": string or null,
|
||||
"notes": string or null
|
||||
|
||||
// For milestone:
|
||||
|
||||
528
maternal-web/app/track/activity/page.tsx
Normal file
528
maternal-web/app/track/activity/page.tsx
Normal file
@@ -0,0 +1,528 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Paper,
|
||||
TextField,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
IconButton,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Card,
|
||||
CardContent,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Chip,
|
||||
Snackbar,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ArrowBack,
|
||||
Save,
|
||||
ChildCare,
|
||||
Delete,
|
||||
Refresh,
|
||||
Add,
|
||||
FitnessCenter,
|
||||
DirectionsWalk,
|
||||
Toys,
|
||||
MusicNote,
|
||||
} from '@mui/icons-material';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
import { withErrorBoundary } from '@/components/common/ErrorFallbacks';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import { trackingApi, Activity } from '@/lib/api/tracking';
|
||||
import { childrenApi, Child } from '@/lib/api/children';
|
||||
import { VoiceInputButton } from '@/components/voice/VoiceInputButton';
|
||||
import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingSkeletons';
|
||||
import { motion } from 'framer-motion';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
interface ActivityData {
|
||||
activityType: string;
|
||||
duration?: number;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
function ActivityTrackPage() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [children, setChildren] = useState<Child[]>([]);
|
||||
const [selectedChild, setSelectedChild] = useState<string>('');
|
||||
|
||||
// Activity state
|
||||
const [activityType, setActivityType] = useState<string>('play');
|
||||
const [duration, setDuration] = useState<string>('');
|
||||
const [description, setDescription] = useState<string>('');
|
||||
|
||||
// Common state
|
||||
const [notes, setNotes] = useState<string>('');
|
||||
const [recentActivities, setRecentActivities] = useState<Activity[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [childrenLoading, setChildrenLoading] = useState(true);
|
||||
const [activitiesLoading, setActivitiesLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
// Delete confirmation dialog
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [activityToDelete, setActivityToDelete] = useState<string | null>(null);
|
||||
|
||||
const familyId = user?.families?.[0]?.familyId;
|
||||
|
||||
// Load children
|
||||
useEffect(() => {
|
||||
if (familyId) {
|
||||
loadChildren();
|
||||
}
|
||||
}, [familyId]);
|
||||
|
||||
// Load recent activities when child is selected
|
||||
useEffect(() => {
|
||||
if (selectedChild) {
|
||||
loadRecentActivities();
|
||||
}
|
||||
}, [selectedChild]);
|
||||
|
||||
const loadChildren = async () => {
|
||||
if (!familyId) return;
|
||||
|
||||
try {
|
||||
setChildrenLoading(true);
|
||||
const childrenData = await childrenApi.getChildren(familyId);
|
||||
setChildren(childrenData);
|
||||
if (childrenData.length > 0) {
|
||||
setSelectedChild(childrenData[0].id);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to load children:', err);
|
||||
setError(err.response?.data?.message || 'Failed to load children');
|
||||
} finally {
|
||||
setChildrenLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadRecentActivities = async () => {
|
||||
if (!selectedChild) return;
|
||||
|
||||
try {
|
||||
setActivitiesLoading(true);
|
||||
const activities = await trackingApi.getActivities(selectedChild, 'activity');
|
||||
// Sort by timestamp descending and take last 10
|
||||
const sorted = activities.sort((a, b) =>
|
||||
new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
|
||||
).slice(0, 10);
|
||||
setRecentActivities(sorted);
|
||||
} catch (err: any) {
|
||||
console.error('Failed to load recent activities:', err);
|
||||
} finally {
|
||||
setActivitiesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedChild) {
|
||||
setError('Please select a child');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validation
|
||||
if (!activityType) {
|
||||
setError('Please select activity type');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const data: ActivityData = {
|
||||
activityType,
|
||||
duration: duration ? parseInt(duration) : undefined,
|
||||
description: description || undefined,
|
||||
};
|
||||
|
||||
await trackingApi.createActivity(selectedChild, {
|
||||
type: 'activity',
|
||||
timestamp: new Date().toISOString(),
|
||||
data,
|
||||
notes: notes || undefined,
|
||||
});
|
||||
|
||||
setSuccessMessage('Activity logged successfully!');
|
||||
|
||||
// Reset form
|
||||
resetForm();
|
||||
|
||||
// Reload recent activities
|
||||
await loadRecentActivities();
|
||||
} catch (err: any) {
|
||||
console.error('Failed to save activity:', err);
|
||||
setError(err.response?.data?.message || 'Failed to save activity');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setActivityType('play');
|
||||
setDuration('');
|
||||
setDescription('');
|
||||
setNotes('');
|
||||
};
|
||||
|
||||
const handleDeleteClick = (activityId: string) => {
|
||||
setActivityToDelete(activityId);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!activityToDelete) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
await trackingApi.deleteActivity(activityToDelete);
|
||||
setSuccessMessage('Activity deleted successfully');
|
||||
setDeleteDialogOpen(false);
|
||||
setActivityToDelete(null);
|
||||
await loadRecentActivities();
|
||||
} catch (err: any) {
|
||||
console.error('Failed to delete activity:', err);
|
||||
setError(err.response?.data?.message || 'Failed to delete activity');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getActivityTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'play':
|
||||
return <Toys />;
|
||||
case 'walk':
|
||||
return <DirectionsWalk />;
|
||||
case 'exercise':
|
||||
return <FitnessCenter />;
|
||||
case 'music':
|
||||
return <MusicNote />;
|
||||
default:
|
||||
return <ChildCare />;
|
||||
}
|
||||
};
|
||||
|
||||
const getActivityDetails = (activity: Activity) => {
|
||||
const data = activity.data as ActivityData;
|
||||
let details = data.activityType.charAt(0).toUpperCase() + data.activityType.slice(1);
|
||||
if (data.duration) {
|
||||
details += ` - ${data.duration} min`;
|
||||
}
|
||||
if (data.description) {
|
||||
details += ` - ${data.description}`;
|
||||
}
|
||||
return details;
|
||||
};
|
||||
|
||||
if (childrenLoading) {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Typography variant="h4" fontWeight="600" sx={{ mb: 3 }}>
|
||||
Track Activity
|
||||
</Typography>
|
||||
<Paper sx={{ p: 3, mb: 3 }}>
|
||||
<FormSkeleton />
|
||||
</Paper>
|
||||
<Typography variant="h6" fontWeight="600" sx={{ mb: 2 }}>
|
||||
Recent Activities
|
||||
</Typography>
|
||||
<ActivityListSkeleton count={3} />
|
||||
</Box>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
if (!familyId || children.length === 0) {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Card>
|
||||
<CardContent sx={{ textAlign: 'center', py: 8 }}>
|
||||
<ChildCare sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
|
||||
<Typography variant="h6" color="text.secondary" gutterBottom>
|
||||
No Children Added
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
You need to add a child before you can track activities
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={() => router.push('/children')}
|
||||
>
|
||||
Add Child
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||
<IconButton onClick={() => router.back()} sx={{ mr: 2 }}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h4" fontWeight="600" sx={{ flex: 1 }}>
|
||||
Track Activity
|
||||
</Typography>
|
||||
<VoiceInputButton
|
||||
onTranscript={(transcript) => {
|
||||
console.log('[Activity] Voice transcript:', transcript);
|
||||
}}
|
||||
onClassifiedIntent={(result) => {
|
||||
if (result.intent === 'activity' && result.structuredData) {
|
||||
const data = result.structuredData;
|
||||
// Auto-fill form with voice data
|
||||
if (data.activityType) setActivityType(data.activityType);
|
||||
if (data.duration) setDuration(data.duration.toString());
|
||||
if (data.description) setDescription(data.description);
|
||||
}
|
||||
}}
|
||||
size="medium"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }} onClose={() => setError(null)}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Child Selector */}
|
||||
{children.length > 1 && (
|
||||
<Paper sx={{ p: 2, mb: 3 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Select Child</InputLabel>
|
||||
<Select
|
||||
value={selectedChild}
|
||||
onChange={(e) => setSelectedChild(e.target.value)}
|
||||
label="Select Child"
|
||||
>
|
||||
{children.map((child) => (
|
||||
<MenuItem key={child.id} value={child.id}>
|
||||
{child.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Main Form */}
|
||||
<Paper sx={{ p: 3, mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||
<ChildCare sx={{ fontSize: 36, color: 'success.main', mr: 2 }} />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
Activity Information
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<FormControl fullWidth sx={{ mb: 3 }}>
|
||||
<InputLabel>Activity Type</InputLabel>
|
||||
<Select
|
||||
value={activityType}
|
||||
onChange={(e) => setActivityType(e.target.value)}
|
||||
label="Activity Type"
|
||||
>
|
||||
<MenuItem value="play">Play</MenuItem>
|
||||
<MenuItem value="walk">Walk</MenuItem>
|
||||
<MenuItem value="exercise">Exercise</MenuItem>
|
||||
<MenuItem value="music">Music</MenuItem>
|
||||
<MenuItem value="reading">Reading</MenuItem>
|
||||
<MenuItem value="tummy_time">Tummy Time</MenuItem>
|
||||
<MenuItem value="outdoor">Outdoor</MenuItem>
|
||||
<MenuItem value="other">Other</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Duration (minutes, optional)"
|
||||
type="number"
|
||||
value={duration}
|
||||
onChange={(e) => setDuration(e.target.value)}
|
||||
sx={{ mb: 3 }}
|
||||
placeholder="e.g., 30"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Description (optional)"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
sx={{ mb: 3 }}
|
||||
placeholder="e.g., Playing with blocks, Reading stories"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Notes (optional)"
|
||||
multiline
|
||||
rows={3}
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
sx={{ mb: 3 }}
|
||||
placeholder="Any additional notes..."
|
||||
/>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
type="button"
|
||||
variant="contained"
|
||||
size="large"
|
||||
startIcon={<Save />}
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Saving...' : 'Save Activity'}
|
||||
</Button>
|
||||
</Paper>
|
||||
|
||||
{/* Recent Activities */}
|
||||
<Paper sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
Recent Activities
|
||||
</Typography>
|
||||
<IconButton onClick={loadRecentActivities} disabled={activitiesLoading}>
|
||||
<Refresh />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{activitiesLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress size={30} />
|
||||
</Box>
|
||||
) : recentActivities.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No activities yet
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{recentActivities.map((activity, index) => {
|
||||
const data = activity.data as ActivityData;
|
||||
if (!data || !data.activityType) {
|
||||
console.warn('[Activity] Activity missing activityType:', activity);
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<motion.div
|
||||
key={activity.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ mt: 0.5 }}>
|
||||
{getActivityTypeIcon(data.activityType)}
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Typography variant="body1" fontWeight="600">
|
||||
{data.activityType.charAt(0).toUpperCase() + data.activityType.slice(1).replace('_', ' ')}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{getActivityDetails(activity)}
|
||||
</Typography>
|
||||
{activity.notes && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
||||
{activity.notes}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => handleDeleteClick(activity.id)}
|
||||
disabled={loading}
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onClose={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
<DialogTitle>Delete Activity?</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Are you sure you want to delete this activity? This action cannot be undone.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteDialogOpen(false)} disabled={loading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleDeleteConfirm} color="error" disabled={loading}>
|
||||
{loading ? 'Deleting...' : 'Delete'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Success Snackbar */}
|
||||
<Snackbar
|
||||
open={!!successMessage}
|
||||
autoHideDuration={3000}
|
||||
onClose={() => setSuccessMessage(null)}
|
||||
message={successMessage}
|
||||
/>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
export default withErrorBoundary(ActivityTrackPage, 'form');
|
||||
548
maternal-web/app/track/medicine/page.tsx
Normal file
548
maternal-web/app/track/medicine/page.tsx
Normal file
@@ -0,0 +1,548 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Paper,
|
||||
TextField,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
IconButton,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Card,
|
||||
CardContent,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Chip,
|
||||
Snackbar,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ArrowBack,
|
||||
Save,
|
||||
MedicalServices,
|
||||
Delete,
|
||||
Refresh,
|
||||
ChildCare,
|
||||
Add,
|
||||
} from '@mui/icons-material';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
import { withErrorBoundary } from '@/components/common/ErrorFallbacks';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import { trackingApi, Activity } from '@/lib/api/tracking';
|
||||
import { childrenApi, Child } from '@/lib/api/children';
|
||||
import { VoiceInputButton } from '@/components/voice/VoiceInputButton';
|
||||
import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingSkeletons';
|
||||
import { motion } from 'framer-motion';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
interface MedicineData {
|
||||
medicineName: string;
|
||||
dosage: string;
|
||||
unit?: string;
|
||||
route?: 'oral' | 'topical' | 'injection' | 'other';
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
function MedicineTrackPage() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [children, setChildren] = useState<Child[]>([]);
|
||||
const [selectedChild, setSelectedChild] = useState<string>('');
|
||||
|
||||
// Medicine state
|
||||
const [medicineName, setMedicineName] = useState<string>('');
|
||||
const [dosage, setDosage] = useState<string>('');
|
||||
const [unit, setUnit] = useState<string>('ml');
|
||||
const [route, setRoute] = useState<'oral' | 'topical' | 'injection' | 'other'>('oral');
|
||||
const [reason, setReason] = useState<string>('');
|
||||
|
||||
// Common state
|
||||
const [notes, setNotes] = useState<string>('');
|
||||
const [recentMedicines, setRecentMedicines] = useState<Activity[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [childrenLoading, setChildrenLoading] = useState(true);
|
||||
const [medicinesLoading, setMedicinesLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
// Delete confirmation dialog
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [activityToDelete, setActivityToDelete] = useState<string | null>(null);
|
||||
|
||||
const familyId = user?.families?.[0]?.familyId;
|
||||
|
||||
// Load children
|
||||
useEffect(() => {
|
||||
if (familyId) {
|
||||
loadChildren();
|
||||
}
|
||||
}, [familyId]);
|
||||
|
||||
// Load recent medicines when child is selected
|
||||
useEffect(() => {
|
||||
if (selectedChild) {
|
||||
loadRecentMedicines();
|
||||
}
|
||||
}, [selectedChild]);
|
||||
|
||||
const loadChildren = async () => {
|
||||
if (!familyId) return;
|
||||
|
||||
try {
|
||||
setChildrenLoading(true);
|
||||
const childrenData = await childrenApi.getChildren(familyId);
|
||||
setChildren(childrenData);
|
||||
if (childrenData.length > 0) {
|
||||
setSelectedChild(childrenData[0].id);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to load children:', err);
|
||||
setError(err.response?.data?.message || 'Failed to load children');
|
||||
} finally {
|
||||
setChildrenLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadRecentMedicines = async () => {
|
||||
if (!selectedChild) return;
|
||||
|
||||
try {
|
||||
setMedicinesLoading(true);
|
||||
const activities = await trackingApi.getActivities(selectedChild, 'medicine');
|
||||
// Sort by timestamp descending and take last 10
|
||||
const sorted = activities.sort((a, b) =>
|
||||
new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
|
||||
).slice(0, 10);
|
||||
setRecentMedicines(sorted);
|
||||
} catch (err: any) {
|
||||
console.error('Failed to load recent medicines:', err);
|
||||
} finally {
|
||||
setMedicinesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedChild) {
|
||||
setError('Please select a child');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validation
|
||||
if (!medicineName) {
|
||||
setError('Please enter medicine name');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!dosage) {
|
||||
setError('Please enter dosage');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const data: MedicineData = {
|
||||
medicineName,
|
||||
dosage,
|
||||
unit,
|
||||
route,
|
||||
reason: reason || undefined,
|
||||
};
|
||||
|
||||
await trackingApi.createActivity(selectedChild, {
|
||||
type: 'medicine',
|
||||
timestamp: new Date().toISOString(),
|
||||
data,
|
||||
notes: notes || undefined,
|
||||
});
|
||||
|
||||
setSuccessMessage('Medicine logged successfully!');
|
||||
|
||||
// Reset form
|
||||
resetForm();
|
||||
|
||||
// Reload recent medicines
|
||||
await loadRecentMedicines();
|
||||
} catch (err: any) {
|
||||
console.error('Failed to save medicine:', err);
|
||||
setError(err.response?.data?.message || 'Failed to save medicine');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setMedicineName('');
|
||||
setDosage('');
|
||||
setUnit('ml');
|
||||
setRoute('oral');
|
||||
setReason('');
|
||||
setNotes('');
|
||||
};
|
||||
|
||||
const handleDeleteClick = (activityId: string) => {
|
||||
setActivityToDelete(activityId);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!activityToDelete) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
await trackingApi.deleteActivity(activityToDelete);
|
||||
setSuccessMessage('Medicine deleted successfully');
|
||||
setDeleteDialogOpen(false);
|
||||
setActivityToDelete(null);
|
||||
await loadRecentMedicines();
|
||||
} catch (err: any) {
|
||||
console.error('Failed to delete medicine:', err);
|
||||
setError(err.response?.data?.message || 'Failed to delete medicine');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getMedicineDetails = (activity: Activity) => {
|
||||
const data = activity.data as MedicineData;
|
||||
let details = `${data.dosage} ${data.unit || ''}`;
|
||||
if (data.route) {
|
||||
details += ` - ${data.route.charAt(0).toUpperCase() + data.route.slice(1)}`;
|
||||
}
|
||||
if (data.reason) {
|
||||
details += ` - ${data.reason}`;
|
||||
}
|
||||
return details;
|
||||
};
|
||||
|
||||
if (childrenLoading) {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Typography variant="h4" fontWeight="600" sx={{ mb: 3 }}>
|
||||
Track Medicine
|
||||
</Typography>
|
||||
<Paper sx={{ p: 3, mb: 3 }}>
|
||||
<FormSkeleton />
|
||||
</Paper>
|
||||
<Typography variant="h6" fontWeight="600" sx={{ mb: 2 }}>
|
||||
Recent Medicines
|
||||
</Typography>
|
||||
<ActivityListSkeleton count={3} />
|
||||
</Box>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
if (!familyId || children.length === 0) {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Card>
|
||||
<CardContent sx={{ textAlign: 'center', py: 8 }}>
|
||||
<ChildCare sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
|
||||
<Typography variant="h6" color="text.secondary" gutterBottom>
|
||||
No Children Added
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
You need to add a child before you can track medicine activities
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={() => router.push('/children')}
|
||||
>
|
||||
Add Child
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||
<IconButton onClick={() => router.back()} sx={{ mr: 2 }}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h4" fontWeight="600" sx={{ flex: 1 }}>
|
||||
Track Medicine
|
||||
</Typography>
|
||||
<VoiceInputButton
|
||||
onTranscript={(transcript) => {
|
||||
console.log('[Medicine] Voice transcript:', transcript);
|
||||
}}
|
||||
onClassifiedIntent={(result) => {
|
||||
if (result.intent === 'medicine' && result.structuredData) {
|
||||
const data = result.structuredData;
|
||||
// Auto-fill form with voice data
|
||||
if (data.medicineName) setMedicineName(data.medicineName);
|
||||
if (data.dosage) setDosage(data.dosage.toString());
|
||||
if (data.unit) setUnit(data.unit);
|
||||
if (data.route) setRoute(data.route);
|
||||
if (data.reason) setReason(data.reason);
|
||||
}
|
||||
}}
|
||||
size="medium"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }} onClose={() => setError(null)}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Child Selector */}
|
||||
{children.length > 1 && (
|
||||
<Paper sx={{ p: 2, mb: 3 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Select Child</InputLabel>
|
||||
<Select
|
||||
value={selectedChild}
|
||||
onChange={(e) => setSelectedChild(e.target.value)}
|
||||
label="Select Child"
|
||||
>
|
||||
{children.map((child) => (
|
||||
<MenuItem key={child.id} value={child.id}>
|
||||
{child.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Main Form */}
|
||||
<Paper sx={{ p: 3, mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||
<MedicalServices sx={{ fontSize: 36, color: 'error.main', mr: 2 }} />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
Medicine Information
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Medicine Name"
|
||||
value={medicineName}
|
||||
onChange={(e) => setMedicineName(e.target.value)}
|
||||
sx={{ mb: 3 }}
|
||||
placeholder="e.g., Acetaminophen, Ibuprofen"
|
||||
required
|
||||
/>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Dosage"
|
||||
value={dosage}
|
||||
onChange={(e) => setDosage(e.target.value)}
|
||||
placeholder="e.g., 5, 2.5"
|
||||
required
|
||||
/>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Unit</InputLabel>
|
||||
<Select
|
||||
value={unit}
|
||||
onChange={(e) => setUnit(e.target.value)}
|
||||
label="Unit"
|
||||
>
|
||||
<MenuItem value="ml">ml</MenuItem>
|
||||
<MenuItem value="mg">mg</MenuItem>
|
||||
<MenuItem value="tsp">tsp</MenuItem>
|
||||
<MenuItem value="tbsp">tbsp</MenuItem>
|
||||
<MenuItem value="drops">drops</MenuItem>
|
||||
<MenuItem value="tablet">tablet(s)</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<FormControl fullWidth sx={{ mb: 3 }}>
|
||||
<InputLabel>Route</InputLabel>
|
||||
<Select
|
||||
value={route}
|
||||
onChange={(e) => setRoute(e.target.value as 'oral' | 'topical' | 'injection' | 'other')}
|
||||
label="Route"
|
||||
>
|
||||
<MenuItem value="oral">Oral</MenuItem>
|
||||
<MenuItem value="topical">Topical</MenuItem>
|
||||
<MenuItem value="injection">Injection</MenuItem>
|
||||
<MenuItem value="other">Other</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Reason (optional)"
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
sx={{ mb: 3 }}
|
||||
placeholder="e.g., Fever, Pain, Allergy"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Notes (optional)"
|
||||
multiline
|
||||
rows={3}
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
sx={{ mb: 3 }}
|
||||
placeholder="Any additional notes..."
|
||||
/>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
type="button"
|
||||
variant="contained"
|
||||
size="large"
|
||||
startIcon={<Save />}
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Saving...' : 'Save Medicine'}
|
||||
</Button>
|
||||
</Paper>
|
||||
|
||||
{/* Recent Medicines */}
|
||||
<Paper sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
Recent Medicines
|
||||
</Typography>
|
||||
<IconButton onClick={loadRecentMedicines} disabled={medicinesLoading}>
|
||||
<Refresh />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{medicinesLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress size={30} />
|
||||
</Box>
|
||||
) : recentMedicines.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No medicine activities yet
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{recentMedicines.map((activity, index) => {
|
||||
const data = activity.data as MedicineData;
|
||||
if (!data || !data.medicineName) {
|
||||
console.warn('[Medicine] Activity missing medicineName:', activity);
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<motion.div
|
||||
key={activity.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ mt: 0.5 }}>
|
||||
<MedicalServices color="error" />
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Typography variant="body1" fontWeight="600">
|
||||
{data.medicineName}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{getMedicineDetails(activity)}
|
||||
</Typography>
|
||||
{activity.notes && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
||||
{activity.notes}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => handleDeleteClick(activity.id)}
|
||||
disabled={loading}
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onClose={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
<DialogTitle>Delete Medicine Activity?</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Are you sure you want to delete this medicine activity? This action cannot be undone.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteDialogOpen(false)} disabled={loading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleDeleteConfirm} color="error" disabled={loading}>
|
||||
{loading ? 'Deleting...' : 'Delete'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Success Snackbar */}
|
||||
<Snackbar
|
||||
open={!!successMessage}
|
||||
autoHideDuration={3000}
|
||||
onClose={() => setSuccessMessage(null)}
|
||||
message={successMessage}
|
||||
/>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
export default withErrorBoundary(MedicineTrackPage, 'form');
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Box, Typography, Grid, Card, CardContent, CardActionArea } from '@mui/material';
|
||||
import { Restaurant, Hotel, BabyChangingStation, ChildCare } from '@mui/icons-material';
|
||||
import { Restaurant, Hotel, BabyChangingStation, ChildCare, MedicalServices } from '@mui/icons-material';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
@@ -28,6 +28,12 @@ export default function TrackPage() {
|
||||
path: '/track/diaper',
|
||||
color: '#FFF4E1',
|
||||
},
|
||||
{
|
||||
title: 'Medicine',
|
||||
icon: <MedicalServices sx={{ fontSize: 48, color: 'error.main' }} />,
|
||||
path: '/track/medicine',
|
||||
color: '#FFE8E8',
|
||||
},
|
||||
{
|
||||
title: 'Activity',
|
||||
icon: <ChildCare sx={{ fontSize: 48, color: 'success.main' }} />,
|
||||
|
||||
@@ -16,9 +16,14 @@ import {
|
||||
CircularProgress,
|
||||
Chip,
|
||||
IconButton,
|
||||
Select,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
} from '@mui/material';
|
||||
import MicIcon from '@mui/icons-material/Mic';
|
||||
import MicOffIcon from '@mui/icons-material/MicOff';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useVoiceInput } from '@/hooks/useVoiceInput';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
@@ -43,6 +48,8 @@ export function VoiceFloatingButton() {
|
||||
const [classificationResult, setClassificationResult] = useState<any>(null);
|
||||
const [processedClassificationId, setProcessedClassificationId] = useState<string | null>(null);
|
||||
const [showReview, setShowReview] = useState(false);
|
||||
const [showUnknownDialog, setShowUnknownDialog] = useState(false);
|
||||
const [manualTrackingType, setManualTrackingType] = useState<string>('feeding');
|
||||
const [snackbar, setSnackbar] = useState<{
|
||||
open: boolean;
|
||||
message: string;
|
||||
@@ -91,14 +98,10 @@ export function VoiceFloatingButton() {
|
||||
setProcessingStatus(null);
|
||||
setShowReview(true);
|
||||
} else {
|
||||
// For unknown or low confidence, show error and close dialog
|
||||
// For unknown or low confidence, show unknown dialog
|
||||
setProcessingStatus(null);
|
||||
setOpen(false);
|
||||
setSnackbar({
|
||||
open: true,
|
||||
message: 'Could not understand the command. Please try again or use manual entry.',
|
||||
severity: 'warning',
|
||||
});
|
||||
setShowUnknownDialog(true);
|
||||
}
|
||||
}
|
||||
}, [classification, isListening, isProcessing, open, transcript, processedClassificationId]);
|
||||
@@ -295,6 +298,24 @@ export function VoiceFloatingButton() {
|
||||
setSnackbar(prev => ({ ...prev, open: false }));
|
||||
};
|
||||
|
||||
const handleRetry = () => {
|
||||
setShowUnknownDialog(false);
|
||||
setOpen(true);
|
||||
reset();
|
||||
setClassificationResult(null);
|
||||
setProcessingStatus(null);
|
||||
setProcessedClassificationId(null);
|
||||
// Auto-start listening
|
||||
setTimeout(() => {
|
||||
startListening();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleManualTracking = () => {
|
||||
setShowUnknownDialog(false);
|
||||
router.push(`/track/${manualTrackingType}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Floating button positioned in bottom-right */}
|
||||
@@ -439,6 +460,44 @@ export function VoiceFloatingButton() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Unknown Intent Dialog */}
|
||||
<Dialog open={showUnknownDialog} onClose={() => setShowUnknownDialog(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Could Not Understand Command</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
You said: "{transcript}"
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 2 }}>
|
||||
I couldn't identify a specific activity from your command. You can either try again or manually add an activity.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<FormControl fullWidth sx={{ mt: 2 }}>
|
||||
<InputLabel>Activity Type</InputLabel>
|
||||
<Select
|
||||
value={manualTrackingType}
|
||||
onChange={(e) => setManualTrackingType(e.target.value)}
|
||||
label="Activity Type"
|
||||
>
|
||||
<MenuItem value="feeding">Feeding</MenuItem>
|
||||
<MenuItem value="sleep">Sleep</MenuItem>
|
||||
<MenuItem value="diaper">Diaper Change</MenuItem>
|
||||
<MenuItem value="medicine">Medicine</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleRetry} startIcon={<MicIcon />} color="primary">
|
||||
Retry Voice Command
|
||||
</Button>
|
||||
<Button onClick={handleManualTracking} startIcon={<AddIcon />} variant="contained">
|
||||
Add Manual Tracking
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Snackbar for feedback */}
|
||||
<Snackbar
|
||||
open={snackbar.open}
|
||||
|
||||
Reference in New Issue
Block a user