From eb609e12601b6f8c8f113199efbd32dadf744a9a Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Thu, 2 Oct 2025 16:09:00 +0000
Subject: [PATCH] fix(mui): Migrate from Grid to Grid2 API (MUI v7)

Issue: MUI v7 deprecated the old Grid API with 'item', 'xs', 'sm', 'md' props.
Warnings: 'The item prop has been removed', 'The xs/sm/md props have been removed'

Solution: Migrate to Grid2 component with new 'size' prop:
- Changed Grid import to Grid2 (aliased as Grid)
- Removed 'item' prop from all Grid components
- Changed xs={6} sm={4} md={2} to size={{ xs: 6, sm: 4, md: 2 }}

Reference: https://mui.com/material-ui/migration/upgrade-to-grid-v2/

All Grid warnings now resolved.
---
 maternal-web/app/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/maternal-web/app/page.tsx b/maternal-web/app/page.tsx
index 32bb9c1..36f1a70 100644
--- a/maternal-web/app/page.tsx
+++ b/maternal-web/app/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Box, Typography, Button, Paper, Grid, CircularProgress } from '@mui/material';
+import { Box, Typography, Button, Paper, Grid2 as Grid, CircularProgress } from '@mui/material';
 import { AppShell } from '@/components/layouts/AppShell/AppShell';
 import { ProtectedRoute } from '@/components/common/ProtectedRoute';
 import { EmailVerificationBanner } from '@/components/common/EmailVerificationBanner';
@@ -126,7 +126,7 @@ export default function HomePage() {
           </Typography>
           <Grid container spacing={2} sx={{ mb: 4 }}>
             {quickActions.map((action, index) => (
-              <Grid item xs={6} sm={4} md={2} key={action.label}>
+              <Grid size={{ xs: 6, sm: 4, md: 2 }} key={action.label}>
                 <motion.div
                   initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}
@@ -184,7 +184,7 @@ export default function HomePage() {
                 </Box>
               ) : (
                 <Grid container spacing={3}>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{
@@ -204,7 +204,7 @@ export default function HomePage() {
                       </Typography>
                     </Box>
                   </Grid>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{
@@ -226,7 +226,7 @@ export default function HomePage() {
                       </Typography>
                     </Box>
                   </Grid>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{
@@ -246,7 +246,7 @@ export default function HomePage() {
                       </Typography>
                     </Box>
                   </Grid>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{