Delivery Tracker

1"use client";
2 
3import { useEffect, useMemo, useState } from "react";
4import { useTheme } from "next-themes";
5import { Clock3, House, Store, Utensils, Truck, UserRound } from "lucide-react";
6 
7import { Map, MapMarker, MapRoute, MarkerContent } from "@/components/ui/map";
8import { Badge } from "@/components/ui/badge";
9import { Button } from "@/components/ui/button";
10import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
11import {
12  buildRouteUrl,
13  deliveryMeals,
14  dropoff,
15  mapView,
16  pickup,
17  progressFraction,
18  routeStyle,
19  type OsrmRouteData,
20} from "./data";
21 
22function formatDistance(meters?: number) {
23  if (!meters) return "--";
24  if (meters < 1000) return `${Math.round(meters)} m`;
25  return `${(meters / 1000).toFixed(1)} km`;
26}
27 
28function formatDuration(seconds?: number) {
29  if (!seconds) return "--";
30  const minutes = Math.round(seconds / 60);
31  if (minutes < 60) return `${minutes} min`;
32  const hours = Math.floor(minutes / 60);
33  const remainingMinutes = minutes % 60;
34  return `${hours}h ${remainingMinutes}m`;
35}
36 
37export default function Page() {
38  const [routeData, setRouteData] = useState<OsrmRouteData | null>(null);
39  const [loading, setLoading] = useState(true);
40  const { resolvedTheme } = useTheme();
41  const remainingRouteColor =
42    resolvedTheme === "dark"
43      ? routeStyle.remaining.color.dark
44      : routeStyle.remaining.color.light;
45 
46  useEffect(() => {
47    async function fetchRoute() {
48      setLoading(true);
49      try {
50        const response = await fetch(buildRouteUrl(pickup, dropoff));
51        const data = await response.json();
52        const route = data?.routes?.[0];
53        if (!route?.geometry?.coordinates) return;
54 
55        setRouteData({
56          coordinates: route.geometry.coordinates as [number, number][],
57          duration: route.duration as number,
58          distance: route.distance as number,
59        });
60      } catch (error) {
61        console.error("Failed to fetch route:", error);
62      } finally {
63        setLoading(false);
64      }
65    }
66 
67    fetchRoute();
68  }, []);
69 
70  const progressCoordinates = useMemo(() => {
71    const total = routeData?.coordinates?.length ?? 0;
72    const progressCount = Math.max(2, Math.floor(total * progressFraction));
73    return routeData?.coordinates?.slice(0, progressCount) ?? [];
74  }, [routeData]);
75 
76  const courierPosition = progressCoordinates[progressCoordinates.length - 1];
77 
78  return (
79    <div className="flex min-h-screen items-center justify-center p-8">
80// … truncated