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/settings/page.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { Box, Typography, Card, CardContent, TextField, Button, Divider, Switch, FormControlLabel } from '@mui/material';
+import { Save, Logout } from '@mui/icons-material';
+import { useAuth } from '@/lib/auth/AuthContext';
+import { useState } from 'react';
+import { AppShell } from '@/components/layouts/AppShell/AppShell';
+import { ProtectedRoute } from '@/components/common/ProtectedRoute';
+
+export default function SettingsPage() {
+  const { user, logout } = useAuth();
+  const [settings, setSettings] = useState({
+    notifications: true,
+    emailUpdates: false,
+    darkMode: false,
+  });
+
+  const handleSave = () => {
+    // Save settings functionality to be implemented
+    alert('Settings saved successfully!');
+  };
+
+  const handleLogout = async () => {
+    await logout();
+  };
+
+  return (
+    <ProtectedRoute>
+      <AppShell>
+        <Box sx={{ maxWidth: 'md', mx: 'auto' }}>
+      <Typography variant="h4" fontWeight="600" gutterBottom>
+        Settings
+      </Typography>
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+        Manage your account settings and preferences
+      </Typography>
+
+      {/* Profile Settings */}
+      <Card sx={{ mb: 3 }}>
+        <CardContent>
+          <Typography variant="h6" fontWeight="600" gutterBottom>
+            Profile Information
+          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}>
+            <TextField
+              label="Name"
+              defaultValue={user?.name}
+              fullWidth
+            />
+            <TextField
+              label="Email"
+              defaultValue={user?.email}
+              fullWidth
+              disabled
+            />
+            <Button
+              variant="contained"
+              startIcon={<Save />}
+              onClick={handleSave}
+              sx={{ alignSelf: 'flex-start' }}
+            >
+              Save Changes
+            </Button>
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Notification Settings */}
+      <Card sx={{ mb: 3 }}>
+        <CardContent>
+          <Typography variant="h6" fontWeight="600" gutterBottom>
+            Notifications
+          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 2 }}>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={settings.notifications}
+                  onChange={(e) => setSettings({ ...settings, notifications: e.target.checked })}
+                />
+              }
+              label="Push Notifications"
+            />
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={settings.emailUpdates}
+                  onChange={(e) => setSettings({ ...settings, emailUpdates: e.target.checked })}
+                />
+              }
+              label="Email Updates"
+            />
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Appearance Settings */}
+      <Card sx={{ mb: 3 }}>
+        <CardContent>
+          <Typography variant="h6" fontWeight="600" gutterBottom>
+            Appearance
+          </Typography>
+          <Box sx={{ mt: 2 }}>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={settings.darkMode}
+                  onChange={(e) => setSettings({ ...settings, darkMode: e.target.checked })}
+                />
+              }
+              label="Dark Mode (Coming Soon)"
+              disabled
+            />
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Account Actions */}
+      <Card>
+        <CardContent>
+          <Typography variant="h6" fontWeight="600" gutterBottom>
+            Account Actions
+          </Typography>
+          <Divider sx={{ my: 2 }} />
+          <Button
+            variant="outlined"
+            color="error"
+            startIcon={<Logout />}
+            onClick={handleLogout}
+            fullWidth
+          >
+            Logout
+          </Button>
+        </CardContent>
+      </Card>
+        </Box>
+      </AppShell>
+    </ProtectedRoute>
+  );
+}