andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Improve admin authentication flow and fix MUI Grid warnings
Some checks failed
ParentFlow CI/CD Pipeline / Backend Tests (push) Has been cancelled
Details
ParentFlow CI/CD Pipeline / Frontend Tests (push) Has been cancelled
Details
ParentFlow CI/CD Pipeline / Security Scanning (push) Has been cancelled
Details
ParentFlow CI/CD Pipeline / Build Docker Images (map[context:maternal-app/maternal-app-backend dockerfile:Dockerfile.production name:backend]) (push) Has been cancelled
Details
ParentFlow CI/CD Pipeline / Build Docker Images (map[context:maternal-web dockerfile:Dockerfile.production name:frontend]) (push) Has been cancelled
Details
ParentFlow CI/CD Pipeline / Deploy to Development (push) Has been cancelled
Details
ParentFlow CI/CD Pipeline / Deploy to Production (push) Has been cancelled
Details
CI/CD Pipeline / Lint and Test (push) Has been cancelled
Details
CI/CD Pipeline / E2E Tests (push) Has been cancelled
Details
CI/CD Pipeline / Build Application (push) Has been cancelled
Details

Browse Source 
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
This commit is contained in:
Andrei
2025-10-08 08:30:22 +00:00
parent aca7061851
commit 28a781517c
3 changed files with 105 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
parentflow-admin/src/app/page.tsx
View File

@@ -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>
);

9
parentflow-admin/src/components/AdminLayout.tsx
View File

@@ -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);
};

12
parentflow-admin/src/lib/api-client.ts
View File

@@ -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');
}