From fdfa23e67ddbe1bb7da63f09abc71ae17417fa13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=8D?= <nikola.derezic@gmail.com>
Date: Sun, 14 Sep 2025 22:45:14 +0200
Subject: [PATCH] fix: resolve MongoDB ObjectId serialization error in client
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix React serialization warning when passing ObjectIds to client components:

**Problem:**
- MongoDB ObjectIds have toJSON() methods which React rejects in client components
- Error: "Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported"
- Occurred when rendering main page with year parameter (?year=2023)

**Solution:**
- Add $addFields stage in fetchAllLocations aggregation pipeline
- Convert location _id and bill _id fields to strings using $toString
- Simplify $project stage to use single "bills": 1 instead of individual field projections
- Ensures only plain objects (strings) are passed to client components

**Technical Details:**
- Modified app/lib/actions/locationActions.ts:268-287
- Added $addFields stage before existing $project stage
- Converted ObjectIds to strings while preserving all other data structures
- Build passes without serialization warnings

ObjectId serialization now handled properly across all client component boundaries.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/lib/actions/locationActions.ts | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/lib/actions/locationActions.ts b/app/lib/actions/locationActions.ts
index 7accab4..be3fc07 100644
--- a/app/lib/actions/locationActions.ts
+++ b/app/lib/actions/locationActions.ts
@@ -264,6 +264,24 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
                     },
                 },
             },
+            {
+                $addFields: {
+                    _id: { $toString: "$_id" },
+                    bills: {
+                        $map: {
+                            input: "$bills",
+                            as: "bill",
+                            in: {
+                                _id: { $toString: "$$bill._id" },
+                                name: "$$bill.name",
+                                paid: "$$bill.paid",
+                                payedAmount: "$$bill.payedAmount",
+                                hasAttachment: "$$bill.hasAttachment",
+                            },
+                        },
+                    },
+                }
+            },
             {
                 $project: {
                     "_id": 1,
@@ -274,12 +292,7 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
                     // "yearMonth": 1,
                     "yearMonth.year": 1,
                     "yearMonth.month": 1,
-                    // "bills": 1,
-                    "bills._id": 1,
-                    "bills.name": 1,
-                    "bills.paid": 1,
-                    "bills.payedAmount": 1,
-                    "bills.hasAttachment": 1,
+                    "bills": 1,
                     // "bills.attachment": 0,
                     // "bills.notes": 0,
                     // "bills.barcodeImage": 1,