From 7d0d199e643f915355159856f1e6144674216a66 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@noru1.ro>
Date: Wed, 8 Oct 2025 08:46:46 +0000
Subject: [PATCH] feat: Add thousand separators to all numbers in admin
 dashboard

- 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
---
 parentflow-admin/src/app/families/page.tsx | 12 ++++++------
 parentflow-admin/src/app/users/page.tsx    |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/parentflow-admin/src/app/families/page.tsx b/parentflow-admin/src/app/families/page.tsx
index 747c6a6..d24dc79 100644
--- a/parentflow-admin/src/app/families/page.tsx
+++ b/parentflow-admin/src/app/families/page.tsx
@@ -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>
diff --git a/parentflow-admin/src/app/users/page.tsx b/parentflow-admin/src/app/users/page.tsx
index adec23d..0ee0d39 100644
--- a/parentflow-admin/src/app/users/page.tsx
+++ b/parentflow-admin/src/app/users/page.tsx
@@ -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>