Add comprehensive .gitignore

maternal-web/app/track/page.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { Box, Typography, Grid, Card, CardContent, CardActionArea } from '@mui/material';
+import { Restaurant, Hotel, BabyChangingStation, ChildCare } from '@mui/icons-material';
+import { useRouter } from 'next/navigation';
+import { AppShell } from '@/components/layouts/AppShell/AppShell';
+import { ProtectedRoute } from '@/components/common/ProtectedRoute';
+
+export default function TrackPage() {
+  const router = useRouter();
+
+  const trackingOptions = [
+    {
+      title: 'Feeding',
+      icon: <Restaurant sx={{ fontSize: 48, color: 'primary.main' }} />,
+      path: '/track/feeding',
+      color: '#FFE4E1',
+    },
+    {
+      title: 'Sleep',
+      icon: <Hotel sx={{ fontSize: 48, color: 'info.main' }} />,
+      path: '/track/sleep',
+      color: '#E1F5FF',
+    },
+    {
+      title: 'Diaper',
+      icon: <BabyChangingStation sx={{ fontSize: 48, color: 'warning.main' }} />,
+      path: '/track/diaper',
+      color: '#FFF4E1',
+    },
+    {
+      title: 'Activity',
+      icon: <ChildCare sx={{ fontSize: 48, color: 'success.main' }} />,
+      path: '/track/activity',
+      color: '#E8F5E9',
+    },
+  ];
+
+  return (
+    <ProtectedRoute>
+      <AppShell>
+        <Box>
+          <Typography variant="h4" fontWeight="600" gutterBottom>
+            Track Activity
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+            Select an activity to track
+          </Typography>
+
+          <Grid container spacing={3}>
+            {trackingOptions.map((option) => (
+              <Grid item xs={12} sm={6} md={3} key={option.title}>
+                <Card
+                  sx={{
+                    height: '100%',
+                    bgcolor: option.color,
+                    '&:hover': {
+                      transform: 'translateY(-4px)',
+                      transition: 'transform 0.2s',
+                    },
+                  }}
+                >
+                  <CardActionArea
+                    onClick={() => router.push(option.path)}
+                    sx={{
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      py: 4,
+                    }}
+                  >
+                    <CardContent sx={{ textAlign: 'center' }}>
+                      {option.icon}
+                      <Typography variant="h6" fontWeight="600" sx={{ mt: 2 }}>
+                        {option.title}
+                      </Typography>
+                    </CardContent>
+                  </CardActionArea>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      </AppShell>
+    </ProtectedRoute>
+  );
+}