From 28a781517c34bf5621c3d05498598785ce028232 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@noru1.ro>
Date: Wed, 8 Oct 2025 08:30:22 +0000
Subject: [PATCH] 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             | 189 ++++++++----------
 .../src/components/AdminLayout.tsx            |   9 +-
 parentflow-admin/src/lib/api-client.ts        |  12 +-
 3 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/parentflow-admin/src/app/page.tsx b/parentflow-admin/src/app/page.tsx
index 6987233..e6aaa5f 100644
--- a/parentflow-admin/src/app/page.tsx
+++ b/parentflow-admin/src/app/page.tsx
@@ -3,7 +3,6 @@
 import { useState, useEffect } from 'react';
 import {
   Box,
-  Grid,
   Paper,
   Typography,
   Card,
@@ -198,104 +197,91 @@ export default function DashboardPage() {
         </Box>
 
         {/* Stats Cards */}
-        <Grid container spacing={3} sx={{ mb: 3 }}>
-          <Grid item xs={12} sm={6} md={3}>
-            <StatCard
-              icon={<People />}
-              title="Total Users"
-              value={stats.totalUsers}
-              change={5.2}
-              color="primary"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            <StatCard
-              icon={<FamilyRestroom />}
-              title="Families"
-              value={stats.totalFamilies}
-              change={3.1}
-              color="secondary"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            <StatCard
-              icon={<ChildCare />}
-              title="Children"
-              value={stats.totalChildren}
-              change={4.5}
-              color="info"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            <StatCard
-              icon={<TrendingUp />}
-              title="Activities Today"
-              value={stats.activitiesLogged}
-              change={12.3}
-              color="success"
-            />
-          </Grid>
-        </Grid>
+        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 3, mb: 3 }}>
+          <StatCard
+            icon={<People />}
+            title="Total Users"
+            value={stats.totalUsers}
+            change={5.2}
+            color="primary"
+          />
+          <StatCard
+            icon={<FamilyRestroom />}
+            title="Families"
+            value={stats.totalFamilies}
+            change={3.1}
+            color="secondary"
+          />
+          <StatCard
+            icon={<ChildCare />}
+            title="Children"
+            value={stats.totalChildren}
+            change={4.5}
+            color="info"
+          />
+          <StatCard
+            icon={<TrendingUp />}
+            title="Activities Today"
+            value={stats.activitiesLogged}
+            change={12.3}
+            color="success"
+          />
+        </Box>
 
         {/* Charts Row */}
-        <Grid container spacing={3} sx={{ mb: 3 }}>
-          <Grid item xs={12} md={8}>
-            <Paper sx={{ p: 3, minWidth: 500 }}>
-              <Typography variant="h6" gutterBottom>
-                User Growth (Last 30 Days)
-              </Typography>
-              <ResponsiveContainer width="100%" height={300}>
-                <AreaChart data={userGrowthData}>
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis dataKey="date" />
-                  <YAxis />
-                  <Tooltip />
-                  <Area
-                    type="monotone"
-                    dataKey="users"
-                    stroke="#FF8B7D"
-                    fill="#FFB5A0"
-                    fillOpacity={0.6}
-                  />
-                </AreaChart>
-              </ResponsiveContainer>
-            </Paper>
-          </Grid>
-          <Grid item xs={12} md={4}>
-            <Paper sx={{ p: 3, minWidth: 500 }}>
-              <Typography variant="h6" gutterBottom>
-                Activity Distribution
-              </Typography>
-              <ResponsiveContainer width="100%" height={300}>
-                <PieChart>
-                  <Pie
-                    data={activityData}
-                    cx="50%"
-                    cy="50%"
-                    labelLine={false}
-                    label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
-                    outerRadius={80}
-                    fill="#8884d8"
-                    dataKey="value"
-                  >
-                    {activityData.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
-                  <Tooltip />
-                </PieChart>
-              </ResponsiveContainer>
-            </Paper>
-          </Grid>
-        </Grid>
+        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '2fr 1fr' }, gap: 3, mb: 3 }}>
+          <Paper sx={{ p: 3, minWidth: 500 }}>
+            <Typography variant="h6" gutterBottom>
+              User Growth (Last 30 Days)
+            </Typography>
+            <ResponsiveContainer width="100%" height={300}>
+              <AreaChart data={userGrowthData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" />
+                <YAxis />
+                <Tooltip />
+                <Area
+                  type="monotone"
+                  dataKey="users"
+                  stroke="#FF8B7D"
+                  fill="#FFB5A0"
+                  fillOpacity={0.6}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </Paper>
+          <Paper sx={{ p: 3, minWidth: 500 }}>
+            <Typography variant="h6" gutterBottom>
+              Activity Distribution
+            </Typography>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={activityData}
+                  cx="50%"
+                  cy="50%"
+                  labelLine={false}
+                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                  outerRadius={80}
+                  fill="#8884d8"
+                  dataKey="value"
+                >
+                  {activityData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip />
+              </PieChart>
+            </ResponsiveContainer>
+          </Paper>
+        </Box>
 
         {/* Recent Activity and System Status */}
-        <Grid container spacing={3}>
-          <Grid item xs={12} md={6}>
-            <Paper sx={{ p: 3, minWidth: 500 }}>
-              <Typography variant="h6" gutterBottom>
-                Recent Users
-              </Typography>
+        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>
+          <Paper sx={{ p: 3, minWidth: 500 }}>
+            <Typography variant="h6" gutterBottom>
+              Recent Users
+            </Typography>
               <List>
                 {recentUsers.map((user) => (
                   <ListItem key={user.id}>
@@ -319,12 +305,10 @@ 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
-              </Typography>
+          <Paper sx={{ p: 3, minWidth: 500 }}>
+            <Typography variant="h6" gutterBottom>
+              System Status
+            </Typography>
               <List>
                 <ListItem>
                   <ListItemAvatar>
@@ -376,8 +360,7 @@ export default function DashboardPage() {
                 </ListItem>
               </List>
             </Paper>
-          </Grid>
-        </Grid>
+        </Box>
       </Box>
     </AdminLayout>
   );
diff --git a/parentflow-admin/src/components/AdminLayout.tsx b/parentflow-admin/src/components/AdminLayout.tsx
index 72e0037..ffd148f 100644
--- a/parentflow-admin/src/components/AdminLayout.tsx
+++ b/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);
   };
diff --git a/parentflow-admin/src/lib/api-client.ts b/parentflow-admin/src/lib/api-client.ts
index e03341b..f97b6fa 100644
--- a/parentflow-admin/src/lib/api-client.ts
+++ b/parentflow-admin/src/lib/api-client.ts
@@ -134,12 +134,22 @@ class ApiClient {
 
   async logout() {
     try {
-      await this.request('POST', '/auth/logout');
+      // 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');
   }