fix: resolve React key duplicates and NaN in profile page

- Fix NaN error in impact score calculation by handling undefined reportCount/eventCount
- Fix duplicate React keys in activity timeline by using unique composite keys
- Add reportCount and eventCount to backend profile response to match frontend expectations
- Keep stats object for backward compatibility

Fixes:
- 'Received NaN for children attribute' warning
- 'Encountered two children with the same key' errors

server/src/services/userService.ts

@@ -98,6 +98,8 @@ export class UserService {
 
     return {
       ...user,
+      reportCount: user._count.reports,
+      eventCount: user._count.eventRegistrations,
       stats: {
         reportsSubmitted: user._count.reports,
         eventsAttended: user._count.eventRegistrations,

src/pages/UserProfilePage.tsx

@@ -111,7 +111,9 @@ export function UserProfilePage() {
   const calculateImpactScore = () => {
     if (!profile) return 0;
     // Impact score calculation: reports * 10 + events attended * 20
-    return profile.reportCount * 10 + profile.eventCount * 20;
+    const reportCount = profile.reportCount || 0;
+    const eventCount = profile.eventCount || 0;
+    return reportCount * 10 + eventCount * 20;
   };
 
   const formatDate = (date: Date) => {
@@ -422,8 +424,8 @@ export function UserProfilePage() {
                 <h2 className="text-xl font-semibold mb-4">Activity Timeline</h2>
                 {activity.length > 0 ? (
                   <div className="space-y-4">
-                    {activity.map((item) => (
-                      <div key={item.id} className="flex items-start space-x-4">
+                    {activity.map((item, index) => (
+                      <div key={`${item.type}-${item.id}-${index}`} className="flex items-start space-x-4">
                         <div className="flex-shrink-0">
                           <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                             {item.type === 'report' && <span className="text-xl">📍</span>}