tambah fitur leaflet js pada penerima bantuan

2026-05-16 20:44:41 +07:00
parent 01c00093d5
commit 76d6888b90
3 changed files with 188 additions and 19 deletions
@@ -0,0 +1,152 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { MapContainer, Marker, TileLayer, useMap, useMapEvents } from "react-leaflet";
+import L, { type LatLngExpression, type LeafletEvent } from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+type LocationValue = {
+  latitude: string;
+  longitude: string;
+  address: string;
+};
+
+type LocationPickerProps = {
+  value: LocationValue;
+  onChange: (next: Partial<LocationValue>) => void;
+  label?: string;
+  hint?: string;
+};
+
+const DEFAULT_CENTER: LatLngExpression = [-6.2088, 106.8456];
+
+const markerIcon = L.icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
+function parsePosition(value: LocationValue) {
+  const latitude = Number.parseFloat(value.latitude);
+  const longitude = Number.parseFloat(value.longitude);
+  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
+    return null;
+  }
+  return { lat: latitude, lng: longitude };
+}
+
+async function reverseGeocode(latitude: number, longitude: number) {
+  const response = await fetch(
+    `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}&accept-language=id&addressdetails=1`,
+    {
+      headers: {
+        Accept: "application/json",
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error("Reverse geocode failed");
+  }
+
+  const data = (await response.json()) as { display_name?: string };
+  return data.display_name ?? "";
+}
+
+function LocationMap({
+  position,
+  onPick,
+}: {
+  position: { lat: number; lng: number } | null;
+  onPick: (latitude: number, longitude: number) => void;
+}) {
+  const map = useMap();
+
+  useEffect(() => {
+    if (position) {
+      map.setView([position.lat, position.lng], Math.max(map.getZoom(), 15), {
+        animate: true,
+      });
+    }
+  }, [map, position]);
+
+  useMapEvents({
+    click(event) {
+      onPick(event.latlng.lat, event.latlng.lng);
+    },
+  });
+
+  if (!position) {
+    return null;
+  }
+
+  return (
+    <Marker
+      position={[position.lat, position.lng]}
+      icon={markerIcon}
+      draggable
+      eventHandlers={{
+        dragend(event: LeafletEvent) {
+          const marker = event.target as L.Marker;
+          const { lat, lng } = marker.getLatLng();
+          onPick(lat, lng);
+        },
+      }}
+    />
+  );
+}
+
+export function LocationPicker({ value, onChange, label = "Pilih titik lokasi", hint = "Klik peta atau geser pin untuk mengisi koordinat dan alamat otomatis." }: LocationPickerProps) {
+  const position = useMemo(() => parsePosition(value), [value]);
+  const requestRef = useRef(0);
+  const [isResolving, setIsResolving] = useState(false);
+
+  const handlePick = async (latitude: number, longitude: number) => {
+    const nextLatitude = latitude.toFixed(6);
+    const nextLongitude = longitude.toFixed(6);
+    onChange({ latitude: nextLatitude, longitude: nextLongitude });
+
+    const requestId = ++requestRef.current;
+    setIsResolving(true);
+    try {
+      const resolvedAddress = await reverseGeocode(latitude, longitude);
+      if (requestRef.current !== requestId) return;
+      if (resolvedAddress) {
+        onChange({ address: resolvedAddress });
+      }
+    } catch {
+      // Keep the selected coordinates even if reverse geocoding fails.
+    } finally {
+      if (requestRef.current === requestId) {
+        setIsResolving(false);
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <div>
+          <p className="text-xs font-medium">{label}</p>
+          <p className="text-[11px] text-muted-foreground">{hint}</p>
+        </div>
+        {isResolving && <p className="text-[11px] text-muted-foreground">Mengambil alamat...</p>}
+      </div>
+      <div className="overflow-hidden rounded-xl border bg-muted/20">
+        <MapContainer
+          center={position ?? DEFAULT_CENTER}
+          zoom={position ? 15 : 12}
+          scrollWheelZoom
+          className="h-[280px] w-full"
+        >
+          <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+          <LocationMap position={position} onPick={handlePick} />
+        </MapContainer>
+      </div>
+    </div>
+  );
+}
@@ -177,8 +177,8 @@ export default function PlacesOfWorshipPage() {
            <DialogHeader><DialogTitle>Tambah Rumah Ibadah</DialogTitle></DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-1.5">
-                <Label className="text-xs">Nama</Label>
-                <Input value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} placeholder="Nama rumah ibadah" className="h-9" />
+                <Label className="text-xs">Nama Tempat Ibadah</Label>
+                <Input value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} placeholder="Tulis nama rumah ibadah" className="h-9" />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
@@ -322,8 +322,8 @@ export default function PlacesOfWorshipPage() {
          <DialogHeader><DialogTitle>Edit Rumah Ibadah</DialogTitle></DialogHeader>
          <form onSubmit={handleUpdate} className="space-y-4">
            <div className="space-y-1.5">
-              <Label className="text-xs">Nama</Label>
-              <Input value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="h-9" />
+              <Label className="text-xs">Nama Tempat Ibadah</Label>
+              <Input value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} placeholder="Tulis nama rumah ibadah" className="h-9" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { trpc } from "@/providers/trpc";
+import { LocationPicker } from "@/components/LocationPicker";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -185,6 +186,10 @@ export default function RecipientsPage() {

  const selectedRec = recipients?.find((r) => r.id === selectedRecipient);

+  const updateFormData = (next: Partial<typeof formData>) => {
+    setFormData((current) => ({ ...current, ...next }));
+  };
+
  return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
@@ -234,26 +239,32 @@ export default function RecipientsPage() {
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">Alamat</Label>
-                <Input value={formData.address} onChange={(e) => setFormData({ ...formData, address: e.target.value })} placeholder="Alamat lengkap" className="h-9" />
+                <Input value={formData.address} onChange={(e) => updateFormData({ address: e.target.value })} placeholder="Alamat lengkap" className="h-9" />
              </div>
+              <LocationPicker
+                value={formData}
+                onChange={updateFormData}
+                label="Pilih titik lokasi dari peta"
+                hint="Klik atau geser pin. Alamat akan terisi otomatis dari koordinat yang dipilih."
+              />
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label className="text-xs">Telepon</Label>
-                  <Input value={formData.phone} onChange={(e) => setFormData({ ...formData, phone: e.target.value })} placeholder="08xxxxxxxxxx" className="h-9" />
+                  <Input value={formData.phone} onChange={(e) => updateFormData({ phone: e.target.value })} placeholder="08xxxxxxxxxx" className="h-9" />
                </div>
                <div className="space-y-1.5">
                  <Label className="text-xs">Jumlah Keluarga</Label>
-                  <Input type="number" min={1} value={formData.familyMembers} onChange={(e) => setFormData({ ...formData, familyMembers: parseInt(e.target.value) || 1 })} className="h-9" />
+                  <Input type="number" min={1} value={formData.familyMembers} onChange={(e) => updateFormData({ familyMembers: parseInt(e.target.value) || 1 })} className="h-9" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label className="text-xs">Pendapatan/Bulan (Rp)</Label>
-                  <Input type="number" min={0} value={formData.incomePerMonth} onChange={(e) => setFormData({ ...formData, incomePerMonth: parseInt(e.target.value) || 0 })} className="h-9" />
+                  <Input type="number" min={0} value={formData.incomePerMonth} onChange={(e) => updateFormData({ incomePerMonth: parseInt(e.target.value) || 0 })} className="h-9" />
                </div>
                <div className="space-y-1.5">
                  <Label className="text-xs">Rumah Ibadah</Label>
-                  <Select value={String(formData.placeOfWorshipId)} onValueChange={(v) => setFormData({ ...formData, placeOfWorshipId: parseInt(v) })}>
+                  <Select value={String(formData.placeOfWorshipId)} onValueChange={(v) => updateFormData({ placeOfWorshipId: parseInt(v) })}>
                    <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                    <SelectContent>
                      {(places ?? []).map((p) => (
@@ -266,16 +277,16 @@ export default function RecipientsPage() {
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label className="text-xs">Latitude</Label>
-                  <Input value={formData.latitude} onChange={(e) => setFormData({ ...formData, latitude: e.target.value })} placeholder="-6.xxxx" className="h-9" />
+                  <Input value={formData.latitude} onChange={(e) => updateFormData({ latitude: e.target.value })} placeholder="-6.xxxx" className="h-9" />
                </div>
                <div className="space-y-1.5">
                  <Label className="text-xs">Longitude</Label>
-                  <Input value={formData.longitude} onChange={(e) => setFormData({ ...formData, longitude: e.target.value })} placeholder="106.xxxx" className="h-9" />
+                  <Input value={formData.longitude} onChange={(e) => updateFormData({ longitude: e.target.value })} placeholder="106.xxxx" className="h-9" />
                </div>
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">Catatan</Label>
-                <Input value={formData.notes} onChange={(e) => setFormData({ ...formData, notes: e.target.value })} placeholder="Catatan tambahan" className="h-9" />
+                <Input value={formData.notes} onChange={(e) => updateFormData({ notes: e.target.value })} placeholder="Catatan tambahan" className="h-9" />
              </div>
              <Button type="submit" className="w-full" disabled={createMutation.isPending}>
                {createMutation.isPending ? "Menyimpan..." : "Simpan"}
@@ -430,26 +441,32 @@ export default function RecipientsPage() {
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs">Alamat</Label>
-              <Input value={formData.address} onChange={(e) => setFormData({ ...formData, address: e.target.value })} className="h-9" />
+              <Input value={formData.address} onChange={(e) => updateFormData({ address: e.target.value })} className="h-9" />
            </div>
+            <LocationPicker
+              value={formData}
+              onChange={updateFormData}
+              label="Pilih titik lokasi dari peta"
+              hint="Klik atau geser pin. Alamat akan terisi otomatis dari koordinat yang dipilih."
+            />
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">Telepon</Label>
-                <Input value={formData.phone} onChange={(e) => setFormData({ ...formData, phone: e.target.value })} className="h-9" />
+                <Input value={formData.phone} onChange={(e) => updateFormData({ phone: e.target.value })} className="h-9" />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">Jumlah Keluarga</Label>
-                <Input type="number" value={formData.familyMembers} onChange={(e) => setFormData({ ...formData, familyMembers: parseInt(e.target.value) || 1 })} className="h-9" />
+                <Input type="number" value={formData.familyMembers} onChange={(e) => updateFormData({ familyMembers: parseInt(e.target.value) || 1 })} className="h-9" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">Pendapatan/Bulan</Label>
-                <Input type="number" value={formData.incomePerMonth} onChange={(e) => setFormData({ ...formData, incomePerMonth: parseInt(e.target.value) || 0 })} className="h-9" />
+                <Input type="number" value={formData.incomePerMonth} onChange={(e) => updateFormData({ incomePerMonth: parseInt(e.target.value) || 0 })} className="h-9" />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">Rumah Ibadah</Label>
-                <Select value={String(formData.placeOfWorshipId)} onValueChange={(v) => setFormData({ ...formData, placeOfWorshipId: parseInt(v) })}>
+                <Select value={String(formData.placeOfWorshipId)} onValueChange={(v) => updateFormData({ placeOfWorshipId: parseInt(v) })}>
                  <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {(places ?? []).map((p) => (
@@ -462,11 +479,11 @@ export default function RecipientsPage() {
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">Latitude</Label>
-                <Input value={formData.latitude} onChange={(e) => setFormData({ ...formData, latitude: e.target.value })} className="h-9" />
+                <Input value={formData.latitude} onChange={(e) => updateFormData({ latitude: e.target.value })} className="h-9" />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">Longitude</Label>
-                <Input value={formData.longitude} onChange={(e) => setFormData({ ...formData, longitude: e.target.value })} className="h-9" />
+                <Input value={formData.longitude} onChange={(e) => updateFormData({ longitude: e.target.value })} className="h-9" />
              </div>
            </div>
            <Button type="submit" className="w-full" disabled={updateMutation.isPending}>