From cec6ceb97ec5c6d4a7c0f89d0eec5401da2bce5e Mon Sep 17 00:00:00 2001 From: Andrei Date: Mon, 6 Oct 2025 23:17:21 +0000 Subject: [PATCH] feat: Complete admin dashboard implementation - Add comprehensive user management page with search, filters, and user details - Create families management interface showing members and children - Implement analytics dashboard with real-time charts using Recharts - Add system health monitoring page with service status and metrics - Create settings page with tabs for general, security, notifications, email, storage, and API settings - All pages include mock data for development and are ready for API integration --- parentflow-admin/src/app/analytics/page.tsx | 345 ++++++++++++ parentflow-admin/src/app/families/page.tsx | 583 +++++++++++++++++++ parentflow-admin/src/app/health/page.tsx | 464 +++++++++++++++ parentflow-admin/src/app/settings/page.tsx | 595 ++++++++++++++++++++ parentflow-admin/src/app/users/page.tsx | 453 +++++++++++++++ 5 files changed, 2440 insertions(+) create mode 100644 parentflow-admin/src/app/analytics/page.tsx create mode 100644 parentflow-admin/src/app/families/page.tsx create mode 100644 parentflow-admin/src/app/health/page.tsx create mode 100644 parentflow-admin/src/app/settings/page.tsx create mode 100644 parentflow-admin/src/app/users/page.tsx diff --git a/parentflow-admin/src/app/analytics/page.tsx b/parentflow-admin/src/app/analytics/page.tsx new file mode 100644 index 0000000..68c7f42 --- /dev/null +++ b/parentflow-admin/src/app/analytics/page.tsx @@ -0,0 +1,345 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { + Box, + Card, + CardContent, + Typography, + Grid, + Select, + MenuItem, + FormControl, + InputLabel, + Paper, + Chip, +} from '@mui/material'; +import { + TrendingUp, + TrendingDown, + People, + FamilyRestroom, + ChildCare, + DevicesOther, +} from '@mui/icons-material'; +import { + LineChart, + Line, + AreaChart, + Area, + BarChart, + Bar, + PieChart, + Pie, + Cell, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, +} from 'recharts'; +import AdminLayout from '@/components/AdminLayout'; +import apiClient from '@/lib/api-client'; + +interface Stat { + title: string; + value: number | string; + change: number; + icon: React.ReactNode; + color: string; +} + +export default function AnalyticsPage() { + const [timeRange, setTimeRange] = useState('7d'); + const [loading, setLoading] = useState(false); + + // Mock data for charts + const userGrowthData = [ + { date: 'Oct 1', users: 120, families: 45 }, + { date: 'Oct 2', users: 125, families: 47 }, + { date: 'Oct 3', users: 130, families: 48 }, + { date: 'Oct 4', users: 138, families: 52 }, + { date: 'Oct 5', users: 142, families: 54 }, + { date: 'Oct 6', users: 150, families: 58 }, + { date: 'Oct 7', users: 156, families: 60 }, + ]; + + const activityData = [ + { day: 'Monday', feeding: 245, sleep: 180, diapers: 120 }, + { day: 'Tuesday', feeding: 280, sleep: 190, diapers: 135 }, + { day: 'Wednesday', feeding: 320, sleep: 175, diapers: 140 }, + { day: 'Thursday', feeding: 290, sleep: 200, diapers: 125 }, + { day: 'Friday', feeding: 310, sleep: 185, diapers: 145 }, + { day: 'Saturday', feeding: 350, sleep: 210, diapers: 160 }, + { day: 'Sunday', feeding: 340, sleep: 205, diapers: 155 }, + ]; + + const deviceData = [ + { name: 'iOS', value: 45, color: '#007AFF' }, + { name: 'Android', value: 35, color: '#3DDC84' }, + { name: 'Web', value: 20, color: '#FF8B7D' }, + ]; + + const ageDistribution = [ + { age: '0-6 months', count: 25 }, + { age: '6-12 months', count: 30 }, + { age: '1-2 years', count: 45 }, + { age: '2-3 years', count: 38 }, + { age: '3-4 years', count: 32 }, + { age: '4-5 years', count: 28 }, + { age: '5-6 years', count: 22 }, + ]; + + const stats: Stat[] = [ + { + title: 'Total Users', + value: 156, + change: 12.5, + icon: , + color: 'primary.main', + }, + { + title: 'Active Families', + value: 60, + change: 8.3, + icon: , + color: 'success.main', + }, + { + title: 'Total Children', + value: 142, + change: 15.2, + icon: , + color: 'info.main', + }, + { + title: 'Connected Devices', + value: 324, + change: -2.1, + icon: , + color: 'warning.main', + }, + ]; + + const engagementData = [ + { hour: '00', sessions: 12 }, + { hour: '03', sessions: 8 }, + { hour: '06', sessions: 45 }, + { hour: '09', sessions: 78 }, + { hour: '12', sessions: 92 }, + { hour: '15', sessions: 85 }, + { hour: '18', sessions: 95 }, + { hour: '21', sessions: 68 }, + ]; + + return ( + + + + + + Analytics Dashboard + + + Platform usage metrics and insights + + + + Time Range + + + + + + {/* Stats Cards */} + + {stats.map((stat) => ( + + + + + + + {stat.title} + + + {stat.value} + + + {stat.change > 0 ? ( + + ) : ( + + )} + 0 ? 'success.main' : 'error.main', + }} + > + {Math.abs(stat.change)}% + + + vs last period + + + + + {stat.icon} + + + + + + ))} + + + {/* Charts Row 1 */} + + + + + User & Family Growth + + + + + + + + + + + + + + + + + + + Device Distribution + + + + `${entry.name}: ${entry.value}%`} + outerRadius={80} + fill="#8884d8" + dataKey="value" + > + {deviceData.map((entry, index) => ( + + ))} + + + + + + + + + {/* Charts Row 2 */} + + + + + Activity Types by Day + + + + + + + + + + + + + + + + + + + + Children Age Distribution + + + + + + + + + + + + + + + {/* Engagement Chart */} + + + + + Daily Engagement Pattern + + + Average sessions by hour of day + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/parentflow-admin/src/app/families/page.tsx b/parentflow-admin/src/app/families/page.tsx new file mode 100644 index 0000000..0543e97 --- /dev/null +++ b/parentflow-admin/src/app/families/page.tsx @@ -0,0 +1,583 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { + Box, + Card, + CardContent, + Typography, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + IconButton, + Chip, + Button, + TextField, + InputAdornment, + TablePagination, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Avatar, + AvatarGroup, + Grid, + List, + ListItem, + ListItemAvatar, + ListItemText, + Divider, +} from '@mui/material'; +import { + Search, + Edit, + Delete, + Visibility, + FamilyRestroom, + PersonAdd, + ChildCare, + Group, +} from '@mui/icons-material'; +import AdminLayout from '@/components/AdminLayout'; +import apiClient from '@/lib/api-client'; + +interface FamilyMember { + id: string; + name: string; + email: string; + role: 'parent' | 'caregiver'; + joinedAt: string; +} + +interface Child { + id: string; + name: string; + birthDate: string; + gender: 'male' | 'female' | 'other'; + displayColor: string; +} + +interface Family { + id: string; + name: string; + createdAt: string; + memberCount: number; + childrenCount: number; + activityCount: number; + lastActivityAt: string; + members: FamilyMember[]; + children: Child[]; +} + +export default function FamiliesPage() { + const [families, setFamilies] = useState([]); + const [loading, setLoading] = useState(true); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(10); + const [searchQuery, setSearchQuery] = useState(''); + const [selectedFamily, setSelectedFamily] = useState(null); + const [viewDialogOpen, setViewDialogOpen] = useState(false); + + useEffect(() => { + fetchFamilies(); + }, []); + + const fetchFamilies = async () => { + try { + setLoading(true); + const response = await apiClient.get('/admin/families'); + setFamilies(response.data); + } catch (error) { + console.error('Failed to fetch families:', error); + // Using mock data for development + setFamilies([ + { + id: '1', + name: 'The Doe Family', + createdAt: '2024-01-15T10:00:00Z', + memberCount: 2, + childrenCount: 2, + activityCount: 542, + lastActivityAt: '2024-10-06T08:30:00Z', + members: [ + { + id: '1', + name: 'John Doe', + email: 'john.doe@example.com', + role: 'parent', + joinedAt: '2024-01-15T10:00:00Z', + }, + { + id: '2', + name: 'Jane Doe', + email: 'jane.doe@example.com', + role: 'parent', + joinedAt: '2024-01-15T10:30:00Z', + }, + ], + children: [ + { + id: '1', + name: 'Emma Doe', + birthDate: '2022-03-15', + gender: 'female', + displayColor: '#FFB5A0', + }, + { + id: '2', + name: 'Liam Doe', + birthDate: '2020-08-22', + gender: 'male', + displayColor: '#81C784', + }, + ], + }, + { + id: '2', + name: 'The Smith Family', + createdAt: '2024-02-20T14:30:00Z', + memberCount: 2, + childrenCount: 1, + activityCount: 287, + lastActivityAt: '2024-10-05T18:45:00Z', + members: [ + { + id: '3', + name: 'Jane Smith', + email: 'jane.smith@example.com', + role: 'parent', + joinedAt: '2024-02-20T14:30:00Z', + }, + { + id: '4', + name: 'Bob Smith', + email: 'bob.smith@example.com', + role: 'parent', + joinedAt: '2024-02-20T15:00:00Z', + }, + ], + children: [ + { + id: '3', + name: 'Olivia Smith', + birthDate: '2023-01-10', + gender: 'female', + displayColor: '#FFD4CC', + }, + ], + }, + { + id: '3', + name: 'The Johnson Family', + createdAt: '2024-03-10T09:15:00Z', + memberCount: 3, + childrenCount: 3, + activityCount: 892, + lastActivityAt: '2024-09-30T12:00:00Z', + members: [ + { + id: '5', + name: 'Bob Johnson', + email: 'bob.johnson@example.com', + role: 'parent', + joinedAt: '2024-03-10T09:15:00Z', + }, + { + id: '6', + name: 'Alice Johnson', + email: 'alice.johnson@example.com', + role: 'parent', + joinedAt: '2024-03-10T09:30:00Z', + }, + { + id: '7', + name: 'Mary (Grandma)', + email: 'mary.johnson@example.com', + role: 'caregiver', + joinedAt: '2024-03-15T10:00:00Z', + }, + ], + children: [ + { + id: '4', + name: 'Noah Johnson', + birthDate: '2021-05-20', + gender: 'male', + displayColor: '#64B5F6', + }, + { + id: '5', + name: 'Sophia Johnson', + birthDate: '2019-11-08', + gender: 'female', + displayColor: '#BA68C8', + }, + { + id: '6', + name: 'Ethan Johnson', + birthDate: '2023-07-15', + gender: 'male', + displayColor: '#FFB74D', + }, + ], + }, + ]); + } finally { + setLoading(false); + } + }; + + const handleViewFamily = (family: Family) => { + setSelectedFamily(family); + setViewDialogOpen(true); + }; + + const handleDeleteFamily = async (familyId: string) => { + if (window.confirm('Are you sure you want to delete this family? This action cannot be undone.')) { + try { + await apiClient.delete(`/admin/families/${familyId}`); + fetchFamilies(); + } catch (error) { + console.error('Failed to delete family:', error); + } + } + }; + + const filteredFamilies = families.filter((family) => + family.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + }); + }; + + const calculateAge = (birthDate: string) => { + const birth = new Date(birthDate); + const now = new Date(); + const ageInMonths = (now.getFullYear() - birth.getFullYear()) * 12 + + (now.getMonth() - birth.getMonth()); + + if (ageInMonths < 12) { + return `${ageInMonths} months`; + } else if (ageInMonths < 24) { + const months = ageInMonths % 12; + return months > 0 ? `1 year ${months} months` : '1 year'; + } else { + const years = Math.floor(ageInMonths / 12); + return `${years} years`; + } + }; + + return ( + + + + Family Management + + + View and manage family groups, members, and children + + + + {/* Stats Cards */} + + + + + + Total Families + + + {families.length} + + + + + + + + + Total Members + + + {families.reduce((sum, f) => sum + f.memberCount, 0)} + + + + + + + + + Total Children + + + {families.reduce((sum, f) => sum + f.childrenCount, 0)} + + + + + + + + + Total Activities + + + {families.reduce((sum, f) => sum + f.activityCount, 0)} + + + + + + + {/* Search Bar */} + + setSearchQuery(e.target.value)} + fullWidth + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + {/* Families Table */} + + + + + Family Name + Members + Children + Activities + Created + Last Activity + Actions + + + + {filteredFamilies + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((family) => ( + + + + + + {family.name} + + + + + + + {family.members.map((member) => ( + + {member.name.charAt(0)} + + ))} + + {family.memberCount} + + + + + + {family.children.map((child) => ( + + {child.name.charAt(0)} + + ))} + + {family.childrenCount} + + + + + + {formatDate(family.createdAt)} + {formatDate(family.lastActivityAt)} + + handleViewFamily(family)} + title="View Details" + > + + + handleDeleteFamily(family.id)} + title="Delete" + color="error" + > + + + + + ))} + +
+ setPage(newPage)} + onRowsPerPageChange={(e) => { + setRowsPerPage(parseInt(e.target.value, 10)); + setPage(0); + }} + /> + + + {/* View Family Dialog */} + setViewDialogOpen(false)} + maxWidth="md" + fullWidth + > + {selectedFamily?.name} + + {selectedFamily && ( + + + {/* Family Info */} + + + Family Information + + + + + Family ID + + {selectedFamily.id} + + + + Created + + + {formatDate(selectedFamily.createdAt)} + + + + + Total Activities + + + {selectedFamily.activityCount} + + + + + Last Activity + + + {formatDate(selectedFamily.lastActivityAt)} + + + + + + + + + + {/* Members */} + + + Members ({selectedFamily.memberCount}) + + + {selectedFamily.members.map((member) => ( + + + + {member.name.charAt(0)} + + + + {member.email} +
+ + + } + /> + + ))} + + + + {/* Children */} + + + Children ({selectedFamily.childrenCount}) + + + {selectedFamily.children.map((child) => ( + + + + {child.name.charAt(0)} + + + + Age: {calculateAge(child.birthDate)} +
+ Gender: {child.gender} +
+ Born: {formatDate(child.birthDate)} + + } + /> + + ))} + + + + + )} + + + + + + + ); +} \ No newline at end of file diff --git a/parentflow-admin/src/app/health/page.tsx b/parentflow-admin/src/app/health/page.tsx new file mode 100644 index 0000000..b9c3d2b --- /dev/null +++ b/parentflow-admin/src/app/health/page.tsx @@ -0,0 +1,464 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { + Box, + Card, + CardContent, + Typography, + Grid, + LinearProgress, + Chip, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + Alert, + AlertTitle, + Button, + IconButton, +} from '@mui/material'; +import { + CheckCircle, + Error, + Warning, + Refresh, + Storage, + Memory, + Speed, + CloudQueue, + DataUsage, + Schedule, +} from '@mui/icons-material'; +import AdminLayout from '@/components/AdminLayout'; +import apiClient from '@/lib/api-client'; + +interface ServiceStatus { + name: string; + status: 'healthy' | 'degraded' | 'down'; + responseTime: number; + uptime: number; + lastCheck: string; +} + +interface SystemMetric { + name: string; + value: number; + max: number; + unit: string; + status: 'normal' | 'warning' | 'critical'; +} + +interface ErrorLog { + id: string; + timestamp: string; + severity: 'info' | 'warning' | 'error'; + service: string; + message: string; + count: number; +} + +export default function HealthPage() { + const [services, setServices] = useState([]); + const [metrics, setMetrics] = useState([]); + const [errorLogs, setErrorLogs] = useState([]); + const [loading, setLoading] = useState(false); + const [lastRefresh, setLastRefresh] = useState(new Date()); + + useEffect(() => { + fetchHealthData(); + const interval = setInterval(fetchHealthData, 30000); // Refresh every 30 seconds + return () => clearInterval(interval); + }, []); + + const fetchHealthData = async () => { + try { + setLoading(true); + // API calls would go here + // const response = await apiClient.get('/admin/health'); + + // Using mock data for development + setServices([ + { + name: 'Backend API', + status: 'healthy', + responseTime: 45, + uptime: 99.98, + lastCheck: new Date().toISOString(), + }, + { + name: 'PostgreSQL Database', + status: 'healthy', + responseTime: 12, + uptime: 99.99, + lastCheck: new Date().toISOString(), + }, + { + name: 'Redis Cache', + status: 'healthy', + responseTime: 3, + uptime: 100, + lastCheck: new Date().toISOString(), + }, + { + name: 'MongoDB', + status: 'healthy', + responseTime: 18, + uptime: 99.95, + lastCheck: new Date().toISOString(), + }, + { + name: 'MinIO Storage', + status: 'degraded', + responseTime: 250, + uptime: 98.5, + lastCheck: new Date().toISOString(), + }, + { + name: 'WebSocket Server', + status: 'healthy', + responseTime: 8, + uptime: 99.97, + lastCheck: new Date().toISOString(), + }, + ]); + + setMetrics([ + { + name: 'CPU Usage', + value: 45, + max: 100, + unit: '%', + status: 'normal', + }, + { + name: 'Memory Usage', + value: 3.2, + max: 8, + unit: 'GB', + status: 'normal', + }, + { + name: 'Disk Usage', + value: 42, + max: 100, + unit: 'GB', + status: 'normal', + }, + { + name: 'Network I/O', + value: 125, + max: 1000, + unit: 'Mbps', + status: 'normal', + }, + { + name: 'Database Connections', + value: 85, + max: 100, + unit: '', + status: 'warning', + }, + { + name: 'Redis Memory', + value: 450, + max: 512, + unit: 'MB', + status: 'warning', + }, + ]); + + setErrorLogs([ + { + id: '1', + timestamp: new Date(Date.now() - 5 * 60000).toISOString(), + severity: 'warning', + service: 'MinIO', + message: 'High response time detected', + count: 3, + }, + { + id: '2', + timestamp: new Date(Date.now() - 15 * 60000).toISOString(), + severity: 'error', + service: 'Backend API', + message: 'Rate limit exceeded for IP 192.168.1.105', + count: 12, + }, + { + id: '3', + timestamp: new Date(Date.now() - 30 * 60000).toISOString(), + severity: 'info', + service: 'Database', + message: 'Automatic vacuum completed', + count: 1, + }, + { + id: '4', + timestamp: new Date(Date.now() - 45 * 60000).toISOString(), + severity: 'warning', + service: 'Redis', + message: 'Memory usage above 85%', + count: 2, + }, + { + id: '5', + timestamp: new Date(Date.now() - 60 * 60000).toISOString(), + severity: 'info', + service: 'System', + message: 'Daily backup completed successfully', + count: 1, + }, + ]); + + setLastRefresh(new Date()); + } catch (error) { + console.error('Failed to fetch health data:', error); + } finally { + setLoading(false); + } + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'healthy': + case 'normal': + return 'success'; + case 'degraded': + case 'warning': + return 'warning'; + case 'down': + case 'critical': + return 'error'; + default: + return 'default'; + } + }; + + const getStatusIcon = (status: string) => { + switch (status) { + case 'healthy': + case 'normal': + return ; + case 'degraded': + case 'warning': + return ; + case 'down': + case 'critical': + return ; + default: + return null; + } + }; + + const getSeverityColor = (severity: string) => { + switch (severity) { + case 'error': + return 'error'; + case 'warning': + return 'warning'; + case 'info': + return 'info'; + default: + return 'default'; + } + }; + + const formatTimestamp = (timestamp: string) => { + const date = new Date(timestamp); + const now = new Date(); + const diff = now.getTime() - date.getTime(); + const minutes = Math.floor(diff / 60000); + + if (minutes < 1) return 'Just now'; + if (minutes < 60) return `${minutes}m ago`; + if (minutes < 1440) return `${Math.floor(minutes / 60)}h ago`; + return date.toLocaleString(); + }; + + const overallHealth = services.every(s => s.status === 'healthy') + ? 'healthy' + : services.some(s => s.status === 'down') + ? 'critical' + : 'degraded'; + + return ( + + + + + + System Health + + + Monitor system services and performance metrics + + + + + Last updated: {formatTimestamp(lastRefresh.toISOString())} + + + + + + + + + {/* Overall Status Alert */} + + + System Status:{' '} + {overallHealth === 'healthy' + ? 'All Systems Operational' + : overallHealth === 'critical' + ? 'Critical Issues Detected' + : 'Degraded Performance'} + + {overallHealth !== 'healthy' && ( + + {services.filter(s => s.status !== 'healthy').length} service(s) experiencing issues + + )} + + + {/* Service Status */} + + Service Status + + + {services.map((service) => ( + + + + + + {service.name} + + + + + + + Response Time + + + {service.responseTime}ms + + + + + Uptime + + + {service.uptime}% + + + + + + + ))} + + + {/* System Metrics */} + + System Metrics + + + {metrics.map((metric) => ( + + + + + {metric.name} + + {metric.status !== 'normal' && ( + + )} + + + {metric.value}{metric.unit} + + {' '}/ {metric.max}{metric.unit} + + + + + + ))} + + + {/* Recent Error Logs */} + + Recent Events + + + + + + Time + Severity + Service + Message + Count + + + + {errorLogs.map((log) => ( + + {formatTimestamp(log.timestamp)} + + + + {log.service} + {log.message} + + {log.count > 1 && ( + + )} + + + ))} + +
+ + + ); +} \ No newline at end of file diff --git a/parentflow-admin/src/app/settings/page.tsx b/parentflow-admin/src/app/settings/page.tsx new file mode 100644 index 0000000..d3c7b02 --- /dev/null +++ b/parentflow-admin/src/app/settings/page.tsx @@ -0,0 +1,595 @@ +'use client'; + +import { useState } from 'react'; +import { + Box, + Card, + CardContent, + Typography, + TextField, + Button, + Switch, + FormControlLabel, + FormGroup, + Divider, + Grid, + Alert, + Select, + MenuItem, + FormControl, + InputLabel, + Tabs, + Tab, + Paper, +} from '@mui/material'; +import { + Save, + Security, + Notifications, + Email, + Storage, + Api, +} from '@mui/icons-material'; +import AdminLayout from '@/components/AdminLayout'; + +interface TabPanelProps { + children?: React.ReactNode; + index: number; + value: number; +} + +function TabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props; + + return ( + + ); +} + +export default function SettingsPage() { + const [tabValue, setTabValue] = useState(0); + const [saveSuccess, setSaveSuccess] = useState(false); + const [settings, setSettings] = useState({ + // General Settings + siteName: 'ParentFlow', + adminEmail: 'admin@parentflowapp.com', + supportEmail: 'support@parentflowapp.com', + timezone: 'America/New_York', + language: 'en', + + // Security Settings + enforcePasswordPolicy: true, + minPasswordLength: 8, + requireUppercase: true, + requireNumbers: true, + requireSpecialChars: true, + sessionTimeout: 30, + maxLoginAttempts: 5, + enableTwoFactor: false, + + // Notification Settings + enableEmailNotifications: true, + enablePushNotifications: true, + adminNotifications: true, + errorAlerts: true, + newUserAlerts: true, + systemHealthAlerts: true, + + // Email Settings + smtpHost: 'smtp.gmail.com', + smtpPort: 587, + smtpUser: 'noreply@parentflowapp.com', + smtpPassword: '********', + emailFrom: 'ParentFlow ', + + // Storage Settings + maxFileSize: 10, + allowedFileTypes: 'jpg,jpeg,png,pdf,doc,docx', + storageProvider: 'minio', + s3Bucket: 'parentflow-files', + retentionDays: 90, + + // API Settings + rateLimit: 100, + rateLimitWindow: 60, + apiTimeout: 30, + enableGraphQL: true, + enableWebSockets: true, + corsOrigins: 'https://web.parentflowapp.com', + }); + + const handleSave = () => { + // Save settings logic here + setSaveSuccess(true); + setTimeout(() => setSaveSuccess(false), 3000); + }; + + return ( + + + + Settings + + + Configure system settings and preferences + + + + {saveSuccess && ( + + Settings saved successfully! + + )} + + + setTabValue(newValue)} + sx={{ borderBottom: 1, borderColor: 'divider', px: 2 }} + > + + } iconPosition="start" /> + } iconPosition="start" /> + } iconPosition="start" /> + } iconPosition="start" /> + } iconPosition="start" /> + + + + {/* General Settings */} + + + + setSettings({ ...settings, siteName: e.target.value })} + /> + + + setSettings({ ...settings, adminEmail: e.target.value })} + /> + + + setSettings({ ...settings, supportEmail: e.target.value })} + /> + + + + Timezone + + + + + + Language + + + + + + + {/* Security Settings */} + + + + setSettings({ ...settings, enforcePasswordPolicy: e.target.checked }) + } + /> + } + label="Enforce Password Policy" + /> + {settings.enforcePasswordPolicy && ( + + + + + setSettings({ ...settings, minPasswordLength: parseInt(e.target.value) }) + } + /> + + + + + setSettings({ ...settings, requireUppercase: e.target.checked }) + } + /> + } + label="Require Uppercase Letters" + /> + + setSettings({ ...settings, requireNumbers: e.target.checked }) + } + /> + } + label="Require Numbers" + /> + + setSettings({ ...settings, requireSpecialChars: e.target.checked }) + } + /> + } + label="Require Special Characters" + /> + + + + + )} + + + + + setSettings({ ...settings, sessionTimeout: parseInt(e.target.value) }) + } + /> + + + + setSettings({ ...settings, maxLoginAttempts: parseInt(e.target.value) }) + } + /> + + + + setSettings({ ...settings, enableTwoFactor: e.target.checked }) + } + /> + } + label="Enable Two-Factor Authentication" + sx={{ mt: 2 }} + /> + + + + {/* Notification Settings */} + + + + setSettings({ ...settings, enableEmailNotifications: e.target.checked }) + } + /> + } + label="Enable Email Notifications" + /> + + setSettings({ ...settings, enablePushNotifications: e.target.checked }) + } + /> + } + label="Enable Push Notifications" + /> + + + Admin Notifications + + + setSettings({ ...settings, adminNotifications: e.target.checked }) + } + /> + } + label="Receive Admin Notifications" + /> + + setSettings({ ...settings, errorAlerts: e.target.checked }) + } + /> + } + label="Error Alerts" + /> + + setSettings({ ...settings, newUserAlerts: e.target.checked }) + } + /> + } + label="New User Registration Alerts" + /> + + setSettings({ ...settings, systemHealthAlerts: e.target.checked }) + } + /> + } + label="System Health Alerts" + /> + + + + {/* Email Settings */} + + + + setSettings({ ...settings, smtpHost: e.target.value })} + /> + + + + setSettings({ ...settings, smtpPort: parseInt(e.target.value) }) + } + /> + + + setSettings({ ...settings, smtpUser: e.target.value })} + /> + + + setSettings({ ...settings, smtpPassword: e.target.value })} + /> + + + setSettings({ ...settings, emailFrom: e.target.value })} + /> + + + + + + + + {/* Storage Settings */} + + + + + setSettings({ ...settings, maxFileSize: parseInt(e.target.value) }) + } + /> + + + setSettings({ ...settings, allowedFileTypes: e.target.value })} + helperText="Comma-separated list of extensions" + /> + + + + Storage Provider + + + + + setSettings({ ...settings, s3Bucket: e.target.value })} + /> + + + + setSettings({ ...settings, retentionDays: parseInt(e.target.value) }) + } + /> + + + + + {/* API Settings */} + + + + + setSettings({ ...settings, rateLimit: parseInt(e.target.value) }) + } + /> + + + + setSettings({ ...settings, rateLimitWindow: parseInt(e.target.value) }) + } + /> + + + + setSettings({ ...settings, apiTimeout: parseInt(e.target.value) }) + } + /> + + + + + setSettings({ ...settings, enableGraphQL: e.target.checked }) + } + /> + } + label="Enable GraphQL API" + /> + + setSettings({ ...settings, enableWebSockets: e.target.checked }) + } + /> + } + label="Enable WebSockets" + /> + + + + setSettings({ ...settings, corsOrigins: e.target.value })} + helperText="One origin per line" + /> + + + + + {/* Save Button */} + + + + + + + ); +} \ No newline at end of file diff --git a/parentflow-admin/src/app/users/page.tsx b/parentflow-admin/src/app/users/page.tsx new file mode 100644 index 0000000..dc10d5d --- /dev/null +++ b/parentflow-admin/src/app/users/page.tsx @@ -0,0 +1,453 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { + Box, + Card, + CardContent, + Typography, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + IconButton, + Chip, + Button, + TextField, + InputAdornment, + TablePagination, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Avatar, + Grid, + Switch, + FormControlLabel, +} from '@mui/material'; +import { + Search, + Edit, + Delete, + Visibility, + PersonAdd, + Block, + CheckCircle, +} from '@mui/icons-material'; +import AdminLayout from '@/components/AdminLayout'; +import apiClient from '@/lib/api-client'; + +interface User { + id: string; + email: string; + name: string; + createdAt: string; + lastActiveAt: string; + isActive: boolean; + familyCount: number; + childrenCount: number; + deviceCount: number; +} + +export default function UsersPage() { + const [users, setUsers] = useState([]); + const [loading, setLoading] = useState(true); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(10); + const [searchQuery, setSearchQuery] = useState(''); + const [selectedUser, setSelectedUser] = useState(null); + const [viewDialogOpen, setViewDialogOpen] = useState(false); + const [editDialogOpen, setEditDialogOpen] = useState(false); + + useEffect(() => { + fetchUsers(); + }, []); + + const fetchUsers = async () => { + try { + setLoading(true); + const response = await apiClient.get('/admin/users'); + setUsers(response.data); + } catch (error) { + console.error('Failed to fetch users:', error); + // Using mock data for development + setUsers([ + { + id: '1', + email: 'john.doe@example.com', + name: 'John Doe', + createdAt: '2024-01-15T10:00:00Z', + lastActiveAt: '2024-10-06T08:30:00Z', + isActive: true, + familyCount: 1, + childrenCount: 2, + deviceCount: 3, + }, + { + id: '2', + email: 'jane.smith@example.com', + name: 'Jane Smith', + createdAt: '2024-02-20T14:30:00Z', + lastActiveAt: '2024-10-05T18:45:00Z', + isActive: true, + familyCount: 1, + childrenCount: 1, + deviceCount: 2, + }, + { + id: '3', + email: 'bob.johnson@example.com', + name: 'Bob Johnson', + createdAt: '2024-03-10T09:15:00Z', + lastActiveAt: '2024-09-30T12:00:00Z', + isActive: false, + familyCount: 1, + childrenCount: 3, + deviceCount: 1, + }, + ]); + } finally { + setLoading(false); + } + }; + + const handleViewUser = (user: User) => { + setSelectedUser(user); + setViewDialogOpen(true); + }; + + const handleEditUser = (user: User) => { + setSelectedUser(user); + setEditDialogOpen(true); + }; + + const handleToggleUserStatus = async (user: User) => { + try { + await apiClient.patch(`/admin/users/${user.id}`, { + isActive: !user.isActive, + }); + fetchUsers(); + } catch (error) { + console.error('Failed to update user status:', error); + } + }; + + const handleDeleteUser = async (userId: string) => { + if (window.confirm('Are you sure you want to delete this user?')) { + try { + await apiClient.delete(`/admin/users/${userId}`); + fetchUsers(); + } catch (error) { + console.error('Failed to delete user:', error); + } + } + }; + + const filteredUsers = users.filter( + (user) => + user.name.toLowerCase().includes(searchQuery.toLowerCase()) || + user.email.toLowerCase().includes(searchQuery.toLowerCase()) + ); + + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + }); + }; + + return ( + + + + User Management + + + Manage ParentFlow users, their accounts, and permissions + + + + {/* Stats Cards */} + + + + + + Total Users + + + {users.length} + + + + + + + + + Active Users + + + {users.filter(u => u.isActive).length} + + + + + + + + + Total Families + + + {users.reduce((sum, u) => sum + u.familyCount, 0)} + + + + + + + + + Total Children + + + {users.reduce((sum, u) => sum + u.childrenCount, 0)} + + + + + + + {/* Search and Actions */} + + setSearchQuery(e.target.value)} + sx={{ flexGrow: 1 }} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + + {/* Users Table */} + + + + + User + Created + Last Active + Status + Families + Children + Devices + Actions + + + + {filteredUsers + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((user) => ( + + + + + {user.name.charAt(0)} + + + {user.name} + + {user.email} + + + + + {formatDate(user.createdAt)} + {formatDate(user.lastActiveAt)} + + : } + /> + + {user.familyCount} + {user.childrenCount} + {user.deviceCount} + + handleViewUser(user)} + title="View" + > + + + handleEditUser(user)} + title="Edit" + > + + + handleToggleUserStatus(user)} + title={user.isActive ? 'Deactivate' : 'Activate'} + > + {user.isActive ? : } + + handleDeleteUser(user.id)} + title="Delete" + color="error" + > + + + + + ))} + +
+ setPage(newPage)} + onRowsPerPageChange={(e) => { + setRowsPerPage(parseInt(e.target.value, 10)); + setPage(0); + }} + /> + + + {/* View User Dialog */} + setViewDialogOpen(false)} + maxWidth="md" + fullWidth + > + User Details + + {selectedUser && ( + + + + + Name + + {selectedUser.name} + + + + Email + + {selectedUser.email} + + + + User ID + + {selectedUser.id} + + + + Status + + + + + + Created At + + + {formatDate(selectedUser.createdAt)} + + + + + Last Active + + + {formatDate(selectedUser.lastActiveAt)} + + + + + )} + + + + + + + {/* Edit User Dialog */} + setEditDialogOpen(false)} + maxWidth="sm" + fullWidth + > + Edit User + + {selectedUser && ( + + + + + } + label="Active" + /> + + )} + + + + + + + + ); +} \ No newline at end of file