fix: Improve admin authentication flow and fix MUI Grid warnings

Authentication fixes:
- Add isAuthenticated() method to ApiClient to check token presence
- Add useEffect in AdminLayout to redirect to login if no token found
- Fix logout to not fail when token is expired/invalid (401)
- Properly handle logout errors by clearing tokens locally
- Clear tokens and redirect to /login on 401 refresh token failure

UI/UX fixes:
- Replace all deprecated MUI Grid v1 with CSS Grid layout
- Remove Grid import since it's no longer used
- Fix Grid warnings: item, xs, sm, md props deprecated in MUI v7
- Use responsive CSS Grid with gridTemplateColumns for all layouts

Security improvements:
- Check authentication status on every page load
- Auto-redirect to login if no valid session exists
- Handle expired tokens gracefully without breaking logout flow

parentflow-admin/src/app/page.tsx

@@ -3,7 +3,6 @@
 import { useState, useEffect } from 'react';
 import {
   Box,
-  Grid,
   Paper,
   Typography,
   Card,
@@ -198,8 +197,7 @@ export default function DashboardPage() {
         </Box>
 
         {/* Stats Cards */}
-        <Grid container spacing={3} sx={{ mb: 3 }}>
+        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 3, mb: 3 }}>
-          <Grid item xs={12} sm={6} md={3}>
           <StatCard
             icon={<People />}
             title="Total Users"
@@ -207,8 +205,6 @@ export default function DashboardPage() {
             change={5.2}
             color="primary"
           />
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
           <StatCard
             icon={<FamilyRestroom />}
             title="Families"
@@ -216,8 +212,6 @@ export default function DashboardPage() {
             change={3.1}
             color="secondary"
           />
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
           <StatCard
             icon={<ChildCare />}
             title="Children"
@@ -225,8 +219,6 @@ export default function DashboardPage() {
             change={4.5}
             color="info"
           />
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
           <StatCard
             icon={<TrendingUp />}
             title="Activities Today"
@@ -234,12 +226,10 @@ export default function DashboardPage() {
             change={12.3}
             color="success"
           />
-          </Grid>
+        </Box>
-        </Grid>
 
         {/* Charts Row */}
-        <Grid container spacing={3} sx={{ mb: 3 }}>
+        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '2fr 1fr' }, gap: 3, mb: 3 }}>
-          <Grid item xs={12} md={8}>
           <Paper sx={{ p: 3, minWidth: 500 }}>
             <Typography variant="h6" gutterBottom>
               User Growth (Last 30 Days)
@@ -260,8 +250,6 @@ export default function DashboardPage() {
               </AreaChart>
             </ResponsiveContainer>
           </Paper>
-          </Grid>
-          <Grid item xs={12} md={4}>
           <Paper sx={{ p: 3, minWidth: 500 }}>
             <Typography variant="h6" gutterBottom>
               Activity Distribution
@@ -286,12 +274,10 @@ export default function DashboardPage() {
               </PieChart>
             </ResponsiveContainer>
           </Paper>
-          </Grid>
+        </Box>
-        </Grid>
 
         {/* Recent Activity and System Status */}
-        <Grid container spacing={3}>
+        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>
-          <Grid item xs={12} md={6}>
           <Paper sx={{ p: 3, minWidth: 500 }}>
             <Typography variant="h6" gutterBottom>
               Recent Users
@@ -319,8 +305,6 @@ export default function DashboardPage() {
                 ))}
               </List>
             </Paper>
-          </Grid>
-          <Grid item xs={12} md={6}>
           <Paper sx={{ p: 3, minWidth: 500 }}>
             <Typography variant="h6" gutterBottom>
               System Status
@@ -376,8 +360,7 @@ export default function DashboardPage() {
                 </ListItem>
               </List>
             </Paper>
-          </Grid>
+        </Box>
-        </Grid>
       </Box>
     </AdminLayout>
   );

parentflow-admin/src/components/AdminLayout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, ReactNode } from 'react';
+import { useState, useEffect, ReactNode } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import {
   Box,
@@ -45,6 +45,13 @@ export default function AdminLayout({ children }: AdminLayoutProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
+  // Check authentication on mount
+  useEffect(() => {
+    if (!apiClient.isAuthenticated()) {
+      router.push('/login');
+    }
+  }, [router]);
+
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };

parentflow-admin/src/lib/api-client.ts

@@ -134,12 +134,22 @@ class ApiClient {
 
   async logout() {
     try {
+      // Only try to call logout endpoint if we have a token
+      if (this.token) {
         await this.request('POST', '/auth/logout');
+      }
+    } catch (error) {
+      // Ignore errors on logout - we'll clear tokens anyway
+      console.log('Logout request failed, clearing tokens locally');
     } finally {
       this.clearTokens();
     }
   }
 
+  isAuthenticated(): boolean {
+    return !!this.token;
+  }
+
   async getCurrentAdmin() {
     return this.request('GET', '/auth/me');
   }