Add Phase 2 & 3: Web frontend with authentication and tracking features

- Initialize Next.js 14 web application with Material UI and TypeScript
- Implement authentication (login/register) with device fingerprint
- Create mobile-first responsive layout with app shell pattern
- Add tracking pages for feeding, sleep, and diaper changes
- Implement activity history with filtering
- Configure backend CORS for web frontend (port 3030)
- Update backend port to 3020, frontend to 3030
- Fix API response handling for auth endpoints

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

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

maternal-web/components/ThemeRegistry.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { maternalTheme } from '@/styles/themes/maternalTheme';
+import { AuthProvider } from '@/lib/auth/AuthContext';
+import { ReactNode } from 'react';
+
+export function ThemeRegistry({ children }: { children: ReactNode }) {
+  return (
+    <AppRouterCacheProvider>
+      <ThemeProvider theme={maternalTheme}>
+        <CssBaseline />
+        <AuthProvider>
+          {children}
+        </AuthProvider>
+      </ThemeProvider>
+    </AppRouterCacheProvider>
+  );
+}

maternal-web/components/common/ProtectedRoute.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { Box, CircularProgress } from '@mui/material';
+import { useAuth } from '@/lib/auth/AuthContext';
+
+const PUBLIC_ROUTES = ['/login', '/register', '/forgot-password'];
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated && !PUBLIC_ROUTES.includes(pathname)) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, isLoading, router, pathname]);
+
+  if (isLoading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          minHeight: '100vh',
+        }}
+      >
+        <CircularProgress size={48} />
+      </Box>
+    );
+  }
+
+  if (!isAuthenticated && !PUBLIC_ROUTES.includes(pathname)) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

maternal-web/components/layouts/AppShell/AppShell.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Box, Container } from '@mui/material';
+import { MobileNav } from '../MobileNav/MobileNav';
+import { TabBar } from '../TabBar/TabBar';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { ReactNode } from 'react';
+
+interface AppShellProps {
+  children: ReactNode;
+}
+
+export const AppShell = ({ children }: AppShellProps) => {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const isTablet = useMediaQuery('(max-width: 1024px)');
+
+  return (
+    <Box sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100vh',
+      bgcolor: 'background.default',
+      pb: isMobile ? '64px' : 0, // Space for tab bar
+    }}>
+      {!isMobile && <MobileNav />}
+
+      <Container
+        maxWidth={isTablet ? 'md' : 'lg'}
+        sx={{
+          flex: 1,
+          px: isMobile ? 2 : 3,
+          py: 3,
+        }}
+      >
+        {children}
+      </Container>
+
+      {isMobile && <TabBar />}
+    </Box>
+  );
+};

maternal-web/components/layouts/MobileNav/MobileNav.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  AppBar,
+  Toolbar,
+  IconButton,
+  Typography,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Avatar,
+  Box,
+  Divider,
+} from '@mui/material';
+import {
+  Menu as MenuIcon,
+  Home,
+  Timeline,
+  Chat,
+  Insights,
+  Settings,
+  ChildCare,
+  Group,
+  Logout,
+} from '@mui/icons-material';
+
+export const MobileNav = () => {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const router = useRouter();
+
+  const menuItems = [
+    { label: 'Dashboard', icon: <Home />, path: '/' },
+    { label: 'Track Activity', icon: <Timeline />, path: '/track' },
+    { label: 'AI Assistant', icon: <Chat />, path: '/ai-assistant' },
+    { label: 'Insights', icon: <Insights />, path: '/insights' },
+    { label: 'Children', icon: <ChildCare />, path: '/children' },
+    { label: 'Family', icon: <Group />, path: '/family' },
+    { label: 'Settings', icon: <Settings />, path: '/settings' },
+  ];
+
+  const handleNavigate = (path: string) => {
+    router.push(path);
+    setDrawerOpen(false);
+  };
+
+  return (
+    <>
+      <AppBar position="static" elevation={1} sx={{ bgcolor: 'background.paper' }}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="primary"
+            aria-label="menu"
+            onClick={() => setDrawerOpen(true)}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: 'primary.main', fontWeight: 600 }}>
+            Maternal
+          </Typography>
+          <Avatar sx={{ bgcolor: 'primary.main' }}>U</Avatar>
+        </Toolbar>
+      </AppBar>
+
+      <Drawer
+        anchor="left"
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+      >
+        <Box
+          sx={{ width: 280 }}
+          role="presentation"
+        >
+          <Box sx={{ p: 3, bgcolor: 'primary.light' }}>
+            <Avatar sx={{ width: 64, height: 64, bgcolor: 'primary.main', mb: 2 }}>U</Avatar>
+            <Typography variant="h6" fontWeight="600">User Name</Typography>
+            <Typography variant="body2" color="text.secondary">user@example.com</Typography>
+          </Box>
+
+          <List>
+            {menuItems.map((item) => (
+              <ListItem key={item.path} disablePadding>
+                <ListItemButton onClick={() => handleNavigate(item.path)}>
+                  <ListItemIcon sx={{ color: 'primary.main' }}>
+                    {item.icon}
+                  </ListItemIcon>
+                  <ListItemText primary={item.label} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+
+          <Divider sx={{ my: 1 }} />
+
+          <List>
+            <ListItem disablePadding>
+              <ListItemButton onClick={() => handleNavigate('/logout')}>
+                <ListItemIcon sx={{ color: 'error.main' }}>
+                  <Logout />
+                </ListItemIcon>
+                <ListItemText primary="Logout" />
+              </ListItemButton>
+            </ListItem>
+          </List>
+        </Box>
+      </Drawer>
+    </>
+  );
+};

maternal-web/components/layouts/TabBar/TabBar.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import { BottomNavigation, BottomNavigationAction, Paper } from '@mui/material';
+import {
+  Home,
+  Timeline,
+  Chat,
+  Insights,
+  Settings,
+} from '@mui/icons-material';
+
+export const TabBar = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const tabs = [
+    { label: 'Home', icon: <Home />, value: '/' },
+    { label: 'Track', icon: <Timeline />, value: '/track' },
+    { label: 'AI Chat', icon: <Chat />, value: '/ai-assistant' },
+    { label: 'Insights', icon: <Insights />, value: '/insights' },
+    { label: 'Settings', icon: <Settings />, value: '/settings' },
+  ];
+
+  return (
+    <Paper
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+      }}
+      elevation={3}
+    >
+      <BottomNavigation
+        value={pathname}
+        onChange={(event, newValue) => {
+          router.push(newValue);
+        }}
+        showLabels
+        sx={{
+          height: 64,
+          '& .MuiBottomNavigationAction-root': {
+            minWidth: 60,
+            '&.Mui-selected': {
+              color: 'primary.main',
+            },
+          },
+        }}
+      >
+        {tabs.map((tab) => (
+          <BottomNavigationAction
+            key={tab.value}
+            label={tab.label}
+            icon={tab.icon}
+            value={tab.value}
+          />
+        ))}
+      </BottomNavigation>
+    </Paper>
+  );
+};