fix(ui): resolve dark mode layout gray colors in light-mode browser and fix row index looping on paginated tables

backend/routes/auth/settings.js

@@ -101,26 +101,45 @@ router.post('/change-account-name', requireAuth, async (req, res) => {
 });
 
 // ─── POST /api/auth/upload-profile-picture ───────────────────────────────────
-router.post('/upload-profile-picture', requireAuth, upload.single('profile_picture'), async (req, res) => {
+// Multer errors TIDAK tertangkap oleh try/catch di route handler.
+// Wajib menggunakan callback agar error multer dikembalikan sebagai JSON, bukan HTML.
+router.post('/upload-profile-picture', requireAuth, (req, res, next) => {
+  upload.single('profile_picture')(req, res, (multerErr) => {
+    if (multerErr) {
+      console.error('[Upload] Multer error:', multerErr.message);
+      return res.status(400).json({ error: `Upload gagal: ${multerErr.message}` });
+    }
+    next();
+  });
+}, async (req, res) => {
   try {
-    if (!req.file) return res.status(400).json({ error: 'No image uploaded' });
+    if (!req.file) return res.status(400).json({ error: 'No image uploaded. Please select an image file first.' });
 
     const user = await User.findById(req.user.id);
     if (!user) return res.status(404).json({ error: 'User not found' });
 
+    // Hapus foto profil lama jika ada
+    if (user.profile_picture) {
+      const oldPath = path.join(getUploadsDir(), user.profile_picture);
+      if (fs.existsSync(oldPath)) {
+        try { fs.unlinkSync(oldPath); } catch (_) {}
+      }
+    }
+
     user.profile_picture = req.file.filename;
     await user.save();
 
     const newToken = makeToken(user);
     setCookieToken(res, newToken);
 
-    res.json({ ok: true, message: 'Foto profil berhasil diperbarui', profile_picture: req.file.filename });
+    res.json({ ok: true, message: 'Profile picture updated successfully.', profile_picture: req.file.filename });
   } catch (err) {
     console.error('[Upload Error]', err);
     res.status(500).json({ error: err.message });
   }
 });
 
+
 // ─── POST /api/auth/remove-profile-picture ───────────────────────────────────
 router.post('/remove-profile-picture', requireAuth, async (req, res) => {
   try {