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/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}</>;
+}