feat: Add thousand separators to all numbers in admin dashboard
Some checks failed
ParentFlow CI/CD Pipeline / Frontend Tests (push) Has been cancelled
ParentFlow CI/CD Pipeline / Security Scanning (push) Has been cancelled
ParentFlow CI/CD Pipeline / Build Docker Images (map[context:maternal-app/maternal-app-backend dockerfile:Dockerfile.production name:backend]) (push) Has been cancelled
ParentFlow CI/CD Pipeline / Build Docker Images (map[context:maternal-web dockerfile:Dockerfile.production name:frontend]) (push) Has been cancelled
ParentFlow CI/CD Pipeline / Deploy to Development (push) Has been cancelled
ParentFlow CI/CD Pipeline / Backend Tests (push) Has been cancelled
ParentFlow CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled

- Applied .toLocaleString() to all numeric displays across all pages
- Dashboard: total users, families, children, activities already had it
- Families page: added to stats cards, activity counts in table, dialog
- Users page: added to all stat cards (users, active users, families, children)
- Numbers now display with commas (e.g., 20,399 instead of 20399)
- Improves readability for large numbers
This commit is contained in:
Andrei
2025-10-08 08:46:46 +00:00
parent 0f56c68a1b
commit 7d0d199e64
2 changed files with 10 additions and 10 deletions

View File

@@ -162,7 +162,7 @@ export default function FamiliesPage() {
Total Families
</Typography>
<Typography variant="h3" sx={{ color: 'primary.main' }}>
{families.length}
{families.length.toLocaleString()}
</Typography>
</CardContent>
</Card>
@@ -172,7 +172,7 @@ export default function FamiliesPage() {
Total Members
</Typography>
<Typography variant="h3" sx={{ color: 'success.main' }}>
{families.reduce((sum, f) => sum + f.memberCount, 0)}
{families.reduce((sum, f) => sum + f.memberCount, 0).toLocaleString()}
</Typography>
</CardContent>
</Card>
@@ -182,7 +182,7 @@ export default function FamiliesPage() {
Total Children
</Typography>
<Typography variant="h3" sx={{ color: 'info.main' }}>
{families.reduce((sum, f) => sum + f.childrenCount, 0)}
{families.reduce((sum, f) => sum + f.childrenCount, 0).toLocaleString()}
</Typography>
</CardContent>
</Card>
@@ -192,7 +192,7 @@ export default function FamiliesPage() {
Total Activities
</Typography>
<Typography variant="h3" sx={{ color: 'secondary.main' }}>
{families.reduce((sum, f) => sum + f.activityCount, 0)}
{families.reduce((sum, f) => sum + f.activityCount, 0).toLocaleString()}
</Typography>
</CardContent>
</Card>
@@ -273,7 +273,7 @@ export default function FamiliesPage() {
</Box>
</TableCell>
<TableCell align="center">
<Chip label={family.activityCount} size="small" />
<Chip label={family.activityCount.toLocaleString()} size="small" />
</TableCell>
<TableCell>{formatDate(family.createdAt)}</TableCell>
<TableCell>{formatDate(family.lastActivityAt)}</TableCell>
@@ -347,7 +347,7 @@ export default function FamiliesPage() {
Total Activities
</Typography>
<Typography variant="body1">
{selectedFamily.activityCount}
{selectedFamily.activityCount.toLocaleString()}
</Typography>
</Box>
<Box>

View File

@@ -180,7 +180,7 @@ export default function UsersPage() {
Total Users
</Typography>
<Typography variant="h3" sx={{ color: 'primary.main' }}>
{users.length}
{users.length.toLocaleString()}
</Typography>
</CardContent>
</Card>
@@ -190,7 +190,7 @@ export default function UsersPage() {
Active Users
</Typography>
<Typography variant="h3" sx={{ color: 'success.main' }}>
{users.filter(u => u.emailVerified).length}
{users.filter(u => u.emailVerified).length.toLocaleString()}
</Typography>
</CardContent>
</Card>
@@ -200,7 +200,7 @@ export default function UsersPage() {
Total Families
</Typography>
<Typography variant="h3" sx={{ color: 'info.main' }}>
{users.reduce((sum, u) => sum + (u.familyCount || 0), 0)}
{users.reduce((sum, u) => sum + (u.familyCount || 0), 0).toLocaleString()}
</Typography>
</CardContent>
</Card>
@@ -210,7 +210,7 @@ export default function UsersPage() {
Total Children
</Typography>
<Typography variant="h3" sx={{ color: 'secondary.main' }}>
{users.reduce((sum, u) => sum + (u.childrenCount || 0), 0)}
{users.reduce((sum, u) => sum + (u.childrenCount || 0), 0).toLocaleString()}
</Typography>
</CardContent>
</Card>