Add missing pages with AppShell layout integration

- Created /track, /insights, /children, /family, /settings, /logout pages
- Wrapped all authenticated pages with AppShell and ProtectedRoute
- Updated AI assistant page to use AppShell layout
- All pages now have proper header/navigation and footer/tabbar
- Added responsive mobile and desktop layouts
- Integrated with existing navigation system

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/app/family/page.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { Box, Typography, Grid, Card, CardContent, Button, Avatar, Chip } from '@mui/material';
+import { PersonAdd, ContentCopy, People } from '@mui/icons-material';
+import { useAuth } from '@/lib/auth/AuthContext';
+import { AppShell } from '@/components/layouts/AppShell/AppShell';
+import { ProtectedRoute } from '@/components/common/ProtectedRoute';
+
+export default function FamilyPage() {
+  const { user } = useAuth();
+
+  const handleInvite = () => {
+    // Invite functionality to be implemented
+    alert('Family invitation feature coming soon!');
+  };
+
+  const handleCopyCode = () => {
+    // Copy share code to clipboard
+    navigator.clipboard.writeText('FAMILY-CODE-123');
+    alert('Family code copied to clipboard!');
+  };
+
+  return (
+    <ProtectedRoute>
+      <AppShell>
+        <Box>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
+        <Box>
+          <Typography variant="h4" fontWeight="600" gutterBottom>
+            Family
+          </Typography>
+          <Typography variant="body1" color="text.secondary">
+            Manage your family members and share access
+          </Typography>
+        </Box>
+        <Button
+          variant="contained"
+          startIcon={<PersonAdd />}
+          onClick={handleInvite}
+        >
+          Invite Member
+        </Button>
+      </Box>
+
+      <Grid container spacing={3}>
+        {/* Family Share Code */}
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography variant="h6" fontWeight="600" gutterBottom>
+                Family Share Code
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                Share this code with family members to give them access to your family's data
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                <Chip
+                  label="FAMILY-CODE-123"
+                  sx={{
+                    fontSize: '1.1rem',
+                    fontWeight: 600,
+                    py: 2.5,
+                    px: 1,
+                  }}
+                />
+                <Button
+                  variant="outlined"
+                  startIcon={<ContentCopy />}
+                  onClick={handleCopyCode}
+                >
+                  Copy Code
+                </Button>
+              </Box>
+            </CardContent>
+          </Card>
+        </Grid>
+
+        {/* Family Members */}
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography variant="h6" fontWeight="600" gutterBottom sx={{ mb: 3 }}>
+                Family Members
+              </Typography>
+
+              {/* Current User */}
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+                <Avatar sx={{ bgcolor: 'primary.main' }}>
+                  {user?.name?.charAt(0).toUpperCase()}
+                </Avatar>
+                <Box sx={{ flex: 1 }}>
+                  <Typography variant="body1" fontWeight="600">
+                    {user?.name}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    {user?.email}
+                  </Typography>
+                </Box>
+                <Chip label="Admin" color="primary" size="small" />
+              </Box>
+
+              {/* Empty State */}
+              <Box sx={{ textAlign: 'center', py: 4, borderTop: '1px solid', borderColor: 'divider' }}>
+                <People sx={{ fontSize: 48, color: 'text.secondary', mb: 2 }} />
+                <Typography variant="body2" color="text.secondary" gutterBottom>
+                  No other family members yet
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                  Invite family members to collaborate on child care
+                </Typography>
+                <Button
+                  variant="outlined"
+                  startIcon={<PersonAdd />}
+                  onClick={handleInvite}
+                >
+                  Invite First Member
+                </Button>
+              </Box>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+        </Box>
+      </AppShell>
+    </ProtectedRoute>
+  );
+}