Building a Delivery ETA Dashboard: Compare Quick Commerce Speed

import { useState, useEffect } from "react";
import { BarChart, Bar, XAxis, YAxis, Tooltip, Cell, ResponsiveContainer } from "recharts";

interface PlatformETA {
  status: string;
  eta_minutes: number;
  eta_text: string;
  serviceable: boolean;
  store_name: string;
}

interface ETAResponse {
  platforms: Record<string, PlatformETA>;
  credits_used: number;
}

const ALL_PLATFORMS = "blinkit,zepto,swiggy,bigbasket,dmart,jiomart,minutes";

const getColor = (eta: number) => {
  if (eta <= 10) return "#22c55e"; // green
  if (eta <= 20) return "#f59e0b"; // amber
  return "#ef4444";                 // red
};

const PLATFORM_LABELS: Record<string, string> = {
  blinkit: "BlinkIt",
  zepto: "Zepto",
  swiggy: "Swiggy",
  bigbasket: "BigBasket",
  dmart: "DMart",
  jiomart: "JioMart",
  minutes: "Minutes",
};

export default function ETADashboard() {
  const [data, setData] = useState<ETAResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [coords, setCoords] = useState({ lat: 12.9352, lng: 77.6245 });
  const [pincode, setPincode] = useState("560034");

  const fetchETA = async (lat: number, lng: number, pin: string) => {
    setLoading(true);
    try {
      const res = await fetch(
        `https://api.quickcommerceapi.com/api/v1/groupeta?lat=${lat}&lng=${lng}&platforms=${ALL_PLATFORMS}`,
        {
          headers: {
            "X-API-Key": process.env.NEXT_PUBLIC_QC_API_KEY!,
            "x-geolocation-pincode": pin,
          },
        }
      );
      setData(await res.json());
    } catch (err) {
      console.error("Failed to fetch ETA:", err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchETA(coords.lat, coords.lng, pincode);
  }, [coords, pincode]);

  const chartData = data
    ? Object.entries(data.platforms)
        .filter(([_, v]) => v.serviceable)
        .map(([key, v]) => ({
          name: PLATFORM_LABELS[key] || key,
          eta: v.eta_minutes,
          text: v.eta_text,
        }))
        .sort((a, b) => a.eta - b.eta)
    : [];

  return (
    <div className="max-w-3xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-2">Delivery ETA Dashboard</h1>
      <p className="text-gray-500 mb-6">
        Real-time delivery estimates from 7 platforms at your location
      </p>

      {/* Location input */}
      <div className="flex gap-2 mb-6">
        <input
          value={pincode}
          onChange={(e) => setPincode(e.target.value)}
          placeholder="Pincode (e.g. 560034)"
          className="border rounded-lg px-4 py-2 w-40"
        />
        <button
          onClick={() => {
            navigator.geolocation.getCurrentPosition((pos) => {
              setCoords({ lat: pos.coords.latitude, lng: pos.coords.longitude });
            });
          }}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg"
        >
          Use My Location
        </button>
      </div>

      {loading ? (
        <div className="text-center py-12 text-gray-400">Loading ETAs...</div>
      ) : (
        <>
          <ResponsiveContainer width="100%" height={chartData.length * 50 + 40}>
            <BarChart data={chartData} layout="vertical" margin={{ left: 80 }}>
              <XAxis type="number" domain={[0, "auto"]}
                label={{ value: "Minutes", position: "bottom" }} />
              <YAxis type="category" dataKey="name" width={80} />
              <Tooltip formatter={(val: number) => [`${val} min`, "ETA"]} />
              <Bar dataKey="eta" radius={[0, 6, 6, 0]}>
                {chartData.map((entry, i) => (
                  <Cell key={i} fill={getColor(entry.eta)} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>

          {/* Legend */}
          <div className="flex gap-4 mt-4 text-sm">
            <span className="flex items-center gap-1">
              <span className="w-3 h-3 rounded-full bg-green-500" /> Under 10 min
            </span>
            <span className="flex items-center gap-1">
              <span className="w-3 h-3 rounded-full bg-amber-500" /> 10-20 min
            </span>
            <span className="flex items-center gap-1">
              <span className="w-3 h-3 rounded-full bg-red-500" /> Over 20 min
            </span>
          </div>

          <p className="text-xs text-gray-400 mt-4 text-right">
            Credits used: {data?.credits_used}
          </p>
        </>
      )}
    </div>
  );
}

import { useState, useEffect } from "react";

interface LocationState {
  lat: number;
  lng: number;
  pincode: string;
  city: string;
  loading: boolean;
  error: string | null;
}

export function useLocation() {
  const [location, setLocation] = useState<LocationState>({
    lat: 12.9716, lng: 77.5946, // Default: Bangalore
    pincode: "560001", city: "Bangalore",
    loading: true, error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation((prev) => ({ ...prev, loading: false, error: "Geolocation not supported" }));
      return;
    }

    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const { latitude, longitude } = position.coords;
        try {
          // Reverse geocode with a free service or Google Maps
          const res = await fetch(
            `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`
          );
          const geo = await res.json();
          setLocation({
            lat: latitude,
            lng: longitude,
            pincode: geo.address?.postcode || "560001",
            city: geo.address?.city || geo.address?.town || "Unknown",
            loading: false,
            error: null,
          });
        } catch {
          setLocation({
            lat: latitude, lng: longitude,
            pincode: "560001", city: "Unknown",
            loading: false, error: null,
          });
        }
      },
      (err) => {
        setLocation((prev) => ({ ...prev, loading: false, error: err.message }));
      }
    );
  }, []);

  return location;
}