added ride estimate api and ui

Author: TusharW4ni

app/pages/rides/[id].vue

@@ -8,6 +8,7 @@
 
   const { data: session } = await authClient.useSession(useFetch)
   const { data: ride, status, refresh: refreshRide } = await useFetch(`/api/get/rides/byId/${id}`)
+  const { data: estimate } = await useFetch(`/api/get/rides/estimate/${id}`)
 
   const isEditModalOpen = ref(false)
   const isDeleteModalOpen = ref(false)
@@ -273,6 +274,17 @@
               </div>
             </div>
 
+            <div v-if="estimate && !estimate.error" class="flex gap-6 rounded-lg bg-gray-50 p-4 dark:bg-gray-800/50">
+              <div>
+                <p class="text-sm text-gray-500">Est. Duration</p>
+                <p class="font-medium">{{ estimate.duration }}</p>
+              </div>
+              <div>
+                <p class="text-sm text-gray-500">Distance</p>
+                <p class="font-medium">{{ estimate.distance }}</p>
+              </div>
+            </div>
+
             <div class="aspect-video w-full overflow-hidden rounded-lg border">
               <iframe
                 v-if="mapUrl && useRuntimeConfig().public.googleMapsApiKey"

server/api/get/rides/estimate/[id].ts

@@ -0,0 +1,81 @@
+import { prisma } from '../../../../utils/prisma'
+
+interface EstimateResponse {
+  duration: string | null
+  distance: string | null
+  durationValue: number | null
+  distanceValue: number | null
+  error: string | null
+}
+
+export default defineEventHandler(async (event): Promise<EstimateResponse> => {
+  const id = getRouterParam(event, 'id')
+  const config = useRuntimeConfig()
+
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'ID is required',
+    })
+  }
+
+  const ride = await prisma.ride.findUnique({
+    where: { id },
+    select: { pickupDisplay: true, dropoffDisplay: true }
+  })
+
+  if (!ride) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Ride not found',
+    })
+  }
+
+  const apiKey = config.public.googleMapsApiKey
+
+  if (!apiKey) {
+    return { 
+      duration: null,
+      distance: null,
+      durationValue: null,
+      distanceValue: null,
+      error: 'Maps API Key not configured' 
+    }
+  }
+
+  const origin = encodeURIComponent(ride.pickupDisplay)
+  const destination = encodeURIComponent(ride.dropoffDisplay)
+
+  try {
+    const url = `https://maps.googleapis.com/maps/api/directions/json?origin=${origin}&destination=${destination}&key=${apiKey}`
+    const response: any = await $fetch(url)
+
+    if (response.status === 'OK' && response.routes.length > 0 && response.routes[0].legs.length > 0) {
+      const leg = response.routes[0].legs[0]
+      return {
+        duration: leg.duration.text,
+        distance: leg.distance.text,
+        durationValue: leg.duration.value, // seconds
+        distanceValue: leg.distance.value, // meters
+        error: null
+      }
+    } else {
+        return { 
+          duration: null,
+          distance: null,
+          durationValue: null,
+          distanceValue: null,
+          error: response.status || 'No route found'
+        }
+    }
+  } catch (error) {
+    console.error('Maps API error:', error)
+    return { 
+      duration: null,
+      distance: null,
+      durationValue: null,
+      distanceValue: null,
+      error: 'Failed to fetch estimate' 
+    }
+  }
+})