fix(LeafletMaps): Displays animated Route and waypoints/turnpoints

.gitignore

@@ -109,3 +109,5 @@ frontend/.vite-temp/
 # Project specific
 notebooks/gmaps/
 data/processed/
+.bak
+/netlify

backend/routes/predict.js

@@ -59,11 +59,15 @@ function estimateTravelTime(distanceKm, startTime, city) {
   return minutes > 5 ? minutes : 5;
 }
 
+// This file now exclusively serves as an Express route handler for local development or a traditional server.
 export const predictRoute = (req, res) => {
+  const requestId = `req-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
+  console.log(`[predict.js] [${requestId}] Received prediction request.`);
   try {
     const { from, to, startTime, city } = req.body || {};
 
     if (!from || !to || !startTime || !city) {
+      console.warn(`[predict.js] [${requestId}] Bad Request: Missing required fields. Body:`, req.body);
       return res.status(400).json({ error: 'Missing required fields: from, to, startTime, city' });
     }
 
@@ -73,6 +77,7 @@ export const predictRoute = (req, res) => {
       from.lat < -90 || from.lat > 90 || to.lat < -90 || to.lat > 90 ||
       from.lon < -180 || from.lon > 180 || to.lon < -180 || to.lon > 180
     ) {
+      console.warn(`[predict.js] [${requestId}] Bad Request: Invalid coordinates. From:`, from, "To:", to);
       return res.status(400).json({ error: 'Invalid coordinates' });
     }
 
@@ -81,9 +86,11 @@ export const predictRoute = (req, res) => {
     const cacheKey = createCacheKey(from, to, startTime, cityKey);
     const cached = predictionCache.get(cacheKey);
     if (cached !== undefined) {
+      console.log(`[predict.js] [${requestId}] Cache HIT for key: ${cacheKey}`);
       return res.json({ ...cached, cached: true });
     }
 
+    console.log(`[predict.js] [${requestId}] Cache MISS for key: ${cacheKey}. Calculating new prediction.`);
     const distanceKm = calculateDistance(from.lat, from.lon, to.lat, to.lon);
     const minutes = estimateTravelTime(distanceKm, startTime, cityKey);
 
@@ -98,9 +105,11 @@ export const predictRoute = (req, res) => {
     };
 
     predictionCache.set(cacheKey, prediction);
+    console.log(`[predict.js] [${requestId}] Prediction successful. Result:`, prediction);
     return res.json({ ...prediction, cached: false });
   } catch (error) {
-    console.error('Prediction error:', error);
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.error(`[predict.js] [${requestId}] Prediction error: ${errorMessage}`, { error });
     return res.status(500).json({
       error: 'Internal server error',
       message: error?.message ?? String(error),

backend/server.js

@@ -9,10 +9,22 @@ dotenv.config();
 const app = express();
 const PORT = process.env.PORT || 8000;
 
+const allowedOrigins = (process.env.FRONTEND_URL || 'http://localhost:3000')
+  .split(',')
+  .map(origin => origin.trim());
+
+console.log(`[server.js]:${allowedOrigins}`)
 // Middleware
 app.use(cors({
-  origin: process.env.FRONTEND_URL || 'http://localhost:3000',
-  credentials: true
+  origin: (origin, callback) => {
+    // Allow requests with no origin (like mobile apps or curl requests)
+    if (!origin || allowedOrigins.includes(origin)) {
+      callback(null, true);
+    } else {
+      callback(new Error('Not allowed by CORS'));
+    }
+  },
+  credentials: true,
 }));
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
@@ -66,6 +78,7 @@ app.use('*', (req, res) => {
 if (process.env.NODE_ENV !== 'test') {
   app.listen(PORT, () => {
     console.log(`🚀 GoPredict API Server running on port ${PORT}`);
+    console.log(`✅ CORS enabled for origins: ${allowedOrigins.join(', ')}`);
     console.log(`📊 Health check: http://localhost:${PORT}/api/health`);
     console.log(`🔮 Prediction endpoint: http://localhost:${PORT}/api/predict`);
   });

frontend/src/components/DateTimePicker.css → frontend/src/components/DateTimePicker/DateTimePicker.css

@@ -128,3 +128,31 @@
 .react-datepicker__time-list::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
+
+/* Center the datepicker on small screens */
+@media (max-width: 480px) {
+  .react-datepicker-portal {
+    @apply fixed inset-0 z-30 flex items-center justify-center bg-black/50;
+  }
+  .react-datepicker-portal .react-datepicker-popper {
+    /* Reset popper.js inline styles to allow flex centering */
+    @apply static transform-none;
+  }
+
+  /* Reduce calendar size on mobile */
+  .react-datepicker {
+    @apply p-1;
+  }
+  .react-datepicker__header {
+    @apply p-1;
+  }
+  .react-datepicker__current-month {
+    @apply text-sm;
+  }
+  .react-datepicker__day-name {
+    @apply m-0.5 w-7;
+  }
+  .react-datepicker__day {
+    @apply m-0.5 h-7 w-7;
+  }
+}