AgroMonev
diff --git a/src/Layout2.jsx b/src/Layout2.jsx
old mode 100644
new mode 100755
index 6d3017dc..0134da17
--- a/src/Layout2.jsx
+++ b/src/Layout2.jsx
@@ -60,7 +60,7 @@ const navigation = [
{ name: "Lahan", page: "Lands", icon: Map },
{ name: "Tanaman", page: "Plants", icon: TreePine },
{ name: "Produktivitas", page: "ProductivityMonitoring", icon: LayoutDashboard },
- { name: "Validator", page: "Validators", icon: Shield },
+ { name: "Facilitator", page: "Validators", icon: Shield },
{ name: "Offtaker", page: "Offtakers", icon: Users },
{ name: "Portal Petani", page: "FarmerPortal", icon: Users },
{ name: "Portal Validator", page: "ValidatorPortal", icon: Shield },
diff --git a/src/_mock/api_lama.js b/src/_mock/api_lama.js
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Comodity.json b/src/_mock/data/Comodity.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Distribution.json b/src/_mock/data/Distribution.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Farmer.json b/src/_mock/data/Farmer.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Harvest.json b/src/_mock/data/Harvest.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Inspection.json b/src/_mock/data/Inspection.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Land.json b/src/_mock/data/Land.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/LandValidation.json b/src/_mock/data/LandValidation.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Offtaker.json b/src/_mock/data/Offtaker.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Plant.json b/src/_mock/data/Plant.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/PlantInspection.json b/src/_mock/data/PlantInspection.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Province.json b/src/_mock/data/Province.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/Synclog.json b/src/_mock/data/Synclog.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/offlineData.js b/src/_mock/data/offlineData.js
old mode 100644
new mode 100755
diff --git a/src/_mock/data/propinsi.json b/src/_mock/data/propinsi.json
old mode 100644
new mode 100755
diff --git a/src/_mock/data/validator.json b/src/_mock/data/validator.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/Comodity.json b/src/_mock/schema/Comodity.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/Distribution.json b/src/_mock/schema/Distribution.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/Farmer.json b/src/_mock/schema/Farmer.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/Land.json b/src/_mock/schema/Land.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/LandValidation.json b/src/_mock/schema/LandValidation.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/Plant.json b/src/_mock/schema/Plant.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/PlantInspection.json b/src/_mock/schema/PlantInspection.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/Synclog.json b/src/_mock/schema/Synclog.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/Validator.json b/src/_mock/schema/Validator.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/farmers.json b/src/_mock/schema/farmers.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/lands.json b/src/_mock/schema/lands.json
old mode 100644
new mode 100755
diff --git a/src/_mock/schema/plants.json b/src/_mock/schema/plants.json
old mode 100644
new mode 100755
diff --git a/src/api/Client.js b/src/api/Client.js
old mode 100644
new mode 100755
diff --git a/src/api/entities.js b/src/api/entities.js
old mode 100644
new mode 100755
diff --git a/src/components/UserNotRegisteredError.jsx b/src/components/UserNotRegisteredError.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/EmptyState.jsx b/src/components/common/EmptyState.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/OfflineStorage_001.jsx b/src/components/common/OfflineStorage_001.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/OfflineStorage_002.jsx b/src/components/common/OfflineStorage_002.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/RoleBasedGuard.jsx b/src/components/common/RoleBasedGuard.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/SyncManager copy.jsx b/src/components/common/SyncManager copy.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/SyncManager.jsx b/src/components/common/SyncManager.jsx
old mode 100644
new mode 100755
index 77f81fc8..40cef171
--- a/src/components/common/SyncManager.jsx
+++ b/src/components/common/SyncManager.jsx
@@ -17,12 +17,11 @@ export function useSyncManager() {
const hasPending = await OfflineService.hasPendingData();
if (hasPending) {
- // console.log("📤 Memulai Push Sinkronisasi...");
await OfflineService.syncAllPending();
toast.success("Sinkronisasi data berhasil");
} else {
- // console.log("🔄 Data lokal bersih. Melakukan Pull dari server...");
- await OfflineService.downloadFromServer();
+ // await OfflineService.downloadFromServer();
+ await OfflineService.syncDataFromServer();
}
} catch (error) {
console.error('Sync process failed:', error);
diff --git a/src/components/common/SyncStatus.jsx b/src/components/common/SyncStatus.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/SyncStatusBar.jsx b/src/components/common/SyncStatusBar.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/offlineStorage.jsx b/src/components/common/offlineStorage.jsx
old mode 100644
new mode 100755
index ff55a4f0..e0c3f881
--- a/src/components/common/offlineStorage.jsx
+++ b/src/components/common/offlineStorage.jsx
@@ -14,7 +14,7 @@ const agroApi = axios.create({
export const OfflineService = {
hasPendingData: async () => {
- const tables = ['farmers', 'lands', 'plants', 'harvest', 'plant_inspections', 'offtakers', 'validators'];
+ const tables = ['farmers', 'lands', 'plants', 'harvests', 'plant_inspections', 'offtakers', 'validators', 'distributions','profiles'];
for (const table of tables) {
const count = await db[table].where('sync_status').equals('pending').count();
if (count > 0) return true;
@@ -44,7 +44,7 @@ export const OfflineService = {
});
return id;
} catch (err) {
- console.error("❌ Dexie Error:", err);
+ console.error("Error:", err);
throw err;
}
},
@@ -78,8 +78,6 @@ export const OfflineService = {
if (filter && typeof filter === 'object' && Object.keys(filter).length > 0) {
return await dbTable.where(filter).toArray();
}
-
- console.log(`Fetching ...... all from ${table}`);
return await dbTable.reverse().toArray();
} catch (e) {
@@ -93,9 +91,11 @@ export const OfflineService = {
db.farmers.where('sync_status').equals('pending').count(),
db.lands.where('sync_status').equals('pending').count(),
db.plants.where('sync_status').equals('pending').count(),
- db.harvest.where('sync_status').equals('pending').count(),
+ db.harvests.where('sync_status').equals('pending').count(),
db.plant_inspections.where('sync_status').equals('pending').count(),
db.offtakers.where('sync_status').equals('pending').count(),
+ db.profiles.where('sync_status').equals('pending').count(),
+ db.distributions.where('sync_status').equals('pending').count(),
// db.validators.where('sync_status').equals('pending').count(),
]);
@@ -126,6 +126,50 @@ export const OfflineService = {
throw err;
}
},
+ syncDataFromServer : async () => {
+ const token = localStorage.getItem('access_token');
+ const baseURL = import.meta.env.VITE_BASE44_API_URL.replace(/\/+$/, "");
+ const syncConfigs = [
+ { from: db.farmers, to:"profile", endpoint: 'auth/profile/1' },
+ { from: db.lands, to:"lahan", endpoint: 'map/lahan' },
+ { from: db.plants, to:"tanaman", endpoint: 'map/tanaman' },
+ { from: db.harvests, to:"panen", endpoint: 'map/panen'},
+ { from: db.plant_inspections, to:"inspeksi", endpoint: 'map/inspeksi'},
+ { from: db.offtakers, to:"offtaker", endpoint: 'map/offtaker'},
+ { from: db.distributions, to:"panen", endpoint: 'distribusi/panen'},
+ { from: db.villages, to: "desa-kelurahan", endpoint: "master/desa-kelurahan" },
+ { from: db.districts, to: "kecamatan", endpoint: "master/kecamatan"},
+ { from: db.regencies, to: "kabupaten-kota", endpoint: "master/kabupaten-kota"},
+ { from: db.provinces, to: "provinsi", endpoint: "master/provinsi"},
+ ];
+
+ for (const config of syncConfigs) {
+ try {
+ console.log(`Syncing table: ${config.from.name}...`);
+
+ const response = await axios.get(`${baseURL}/api/${config.endpoint}`, {
+ headers: { Authorization: `Bearer ${token}` }
+ });
+ console.log(response, "Res")
+ if (response.status !== 200) throw new Error(`HTTP error! status: ${response.status}`);
+
+ const result = await response;
+ const dataToSave = config.to ? result[config.to] : (result.data || result.data.data || []);
+
+ if (Array.isArray(dataToSave)) {
+ await config.table.bulkPut(dataToSave);
+ console.log(`Berhasil sinkron ${dataToSave.length} data ke ${config.table.name}`);
+ } else if (typeof dataToSave === 'object' && dataToSave !== null) {
+ await config.table.put(dataToSave);
+ }
+
+ } catch (error) {
+ console.error(`Gagal sinkronisasi ${config.endpoint}:`, error);
+ // Lanjut ke config berikutnya meski satu error
+ continue;
+ }
+ }
+ },
syncAll: async () => {
const queue = await db.pending_sync.toArray();
for (const item of queue) {
@@ -147,18 +191,19 @@ export const OfflineService = {
const baseURL = import.meta.env.VITE_BASE44_API_URL.replace(/\/+$/, "");
console.log(user, "Userr")
const syncConfigs = [
- { endpoint: `auth/profile/1`, table: db.farmers },
+ { endpoint: `auth/profile/1`, table: db.farmers },
+ // { endpoint: `auth/me`, table: db.users },
{ endpoint: 'map/lahan', table: db.lands },
{ endpoint: 'map/tanaman', table: db.plants },
- { endpoint: 'map/panen', table: db.harvest},
+ { endpoint: 'map/panen', table: db.harvests},
{ endpoint: 'map/inspeksi', table: db.plant_inspections},
{ endpoint: 'map/offtaker', table: db.offtakers},
{ endpoint: 'distribusi/panen', table: db.distributions},
// { endpoint: 'map/validator', table: db.validators}
- { table: db.villages, to: "desa-kelurahan", endpoint: "master/desa-kelurahan" },
- { table: db.districts, to: "kecamatan", endpoint: "master/kecamatan"},
- { table: db.regencies, to: "kabupaten-kota", endpoint: "master/kabupaten-kota"},
- { table: db.provinces, to: "provinsi", endpoint: "master/provinsi"},
+ { endpoint: "master/desa-kelurahan", table: db.villages, to: "desa-kelurahan"},
+ { endpoint: "master/kecamatan", table: db.districts, to: "kecamatan"},
+ { endpoint: "master/kabupaten-kota", table: db.regencies, to: "kabupaten-kota"},
+ { endpoint: "master/provinsi", table: db.provinces, to: "provinsi"},
];
@@ -168,34 +213,55 @@ export const OfflineService = {
headers: { Authorization: `Bearer ${token}` }
});
- const respondData = Array.isArray(respond.data) ? respond.data : respond.data.data || [];
- if(respondData.length > 0){
- const localIds = await config.table.toCollection().primaryKeys();
- const newData = respondData.filter(item => !localIds.includes(item.id));
- if(newData.length > 0){
- await config.table.bulkAdd(newData.map(item => ({
- ...item,
- sync_status: 'synced'
- })));
- }else {
- // console.log(` Data ${config.endpoint} sudah mutakhir (tidak ada data baru).`);
+ const rawData = respond.data?.data || respond.data;
+ console.log(rawData, "Raw Data")
+ let respondData = [];
+
+ // const respondData = (config.endpoint.includes('auth/profile') || config.endpoint.includes('auth/me'))
+ // ? [rawData]
+ // : Array.isArray(rawData) ? rawData : [];
+
+ if (config.endpoint.includes('auth/profile') || config.endpoint.includes('auth/me')) {
+ if (rawData && typeof rawData === 'object') {
+ const { password, ...cleanData } = rawData;
+ respondData = [cleanData]
+ }
+ } else {
+ // Jika data memang seharusnya array (List)
+ respondData = Array.isArray(rawData) ? rawData : [];
+ }
+
+ console.log(respondData," || data " ,config.table)
+ if(respondData.length > 0 && respondData[0] !== null){
+ const preparedData = respondData.map(item => ({
+ ...item,
+ id: item.id,
+ sync_status: 'synced'
+ })).filter(item => item.id !== undefined);
+
+ if (preparedData.length > 0) {
+ await config.table.bulkPut(preparedData);
+ console.log(`✅ Berhasil sync ${preparedData.length} data ke ${config.table.name}`);
}
}
}
} catch (err) {
console.error("Gagal download data:", err);
+ if (err.failures) {
+ console.error("Detail kegagalan Dexie:", err.failures);
+ }
}
},
syncAllPending: async () => {
const tables = [
- { from: db.farmers, to:"profile", endpoint: 'auth/profile' },
+ { from: db.farmers, to:"profile", endpoint: 'auth/profile/1' },
{ from: db.lands, to:"lahan", endpoint: 'map/lahan' },
{ from: db.plants, to:"tanaman", endpoint: 'map/tanaman' },
- { endpoint: 'map/panen', to:"panen", from: db.harvest},
- { endpoint: 'map/inspeksi', to:"inspeksi", from: db.plant_inspections},
- { endpoint: 'map/offtaker', to:"offtaker", from: db.offtakers},
- { endpoint: 'distribusi/panen', to:"panen", from: db.distributions},
+ { from: db.harvests, to:"panen", endpoint: 'map/panen'},
+ { from: db.plant_inspections, to:"inspeksi", endpoint: 'map/inspeksi'},
+ { from: db.offtakers, to:"offtaker", endpoint: 'map/offtaker'},
+ { from: db.distributions, to:"panen", endpoint: 'distribusi/panen'},
// { endpoint: 'map/validator', to:"validator", from: db.validators}
{ from: db.villages, to: "desa-kelurahan", endpoint: "master/desa-kelurahan" },
{ from: db.districts, to: "kecamatan", endpoint: "master/kecamatan"},
diff --git a/src/components/common/useOfflineEntity copy.jsx b/src/components/common/useOfflineEntity copy.jsx
old mode 100644
new mode 100755
diff --git a/src/components/common/useOfflineEntity.jsx b/src/components/common/useOfflineEntity.jsx
old mode 100644
new mode 100755
diff --git a/src/components/dashboard/CommodityPieChart.jsx b/src/components/dashboard/CommodityPieChart.jsx
old mode 100644
new mode 100755
diff --git a/src/components/dashboard/RegionChart.jsx b/src/components/dashboard/RegionChart.jsx
old mode 100644
new mode 100755
diff --git a/src/components/dashboard/StatCard.jsx b/src/components/dashboard/StatCard.jsx
old mode 100644
new mode 100755
diff --git a/src/components/distribution/DistributionForm.jsx b/src/components/distribution/DistributionForm.jsx
old mode 100644
new mode 100755
diff --git a/src/components/distribution/DistributionForm_01.jsx b/src/components/distribution/DistributionForm_01.jsx
old mode 100644
new mode 100755
diff --git a/src/components/distribution/DistributionGrading.jsx b/src/components/distribution/DistributionGrading.jsx
old mode 100644
new mode 100755
diff --git a/src/components/farmers/FarmerCard.jsx b/src/components/farmers/FarmerCard.jsx
old mode 100644
new mode 100755
index 8571c631..fde3322d
--- a/src/components/farmers/FarmerCard.jsx
+++ b/src/components/farmers/FarmerCard.jsx
@@ -12,18 +12,19 @@ const statusColors = {
};
const statusLabels = {
- pending: "Menunggu Verifikasi",
- verified: "Terverifikasi",
- rejected: "Ditolak"
+ pending: "W",
+ verified: "V",
+ rejected: "X"
};
export default function FarmerCard({ farmer }) {
+ console.log("Petani : ", farmer);
return (
{farmer.photo_url ? (
-
+
) : (
{farmer.full_name?.charAt(0)?.toUpperCase() || "P"}
@@ -34,18 +35,18 @@ export default function FarmerCard({ farmer }) {
-
{farmer.full_name}
-
NIK: {farmer.nik}
+
{farmer?.full_name || farmer?.name || farmer?.nama }
+
NIK: {farmer?.kk}
-
- {statusLabels[farmer.verification_status]}
+
+ {statusLabels[farmer.user.email_verified_at !== null || farmer.user.email_verified_at !== undefined ? 'verified' : 'pending']}
- {farmer.village}, {farmer.district}
+ {farmer.alamat}
{farmer.farmer_group && (
@@ -53,10 +54,10 @@ export default function FarmerCard({ farmer }) {
{farmer.farmer_group}
)}
- {farmer.phone && (
+ {farmer.telepon && (
-
{farmer.phone}
+
{farmer?.telepon}
)}
diff --git a/src/components/farmers/FarmerForm.jsx b/src/components/farmers/FarmerForm.jsx
old mode 100644
new mode 100755
diff --git a/src/components/farmers/LinkUserAccount.jsx b/src/components/farmers/LinkUserAccount.jsx
old mode 100644
new mode 100755
diff --git a/src/components/harvest/HarvestForm.jsx b/src/components/harvest/HarvestForm.jsx
old mode 100644
new mode 100755
diff --git a/src/components/lands/GPSLandMapper copy 2.jsx b/src/components/lands/GPSLandMapper copy 2.jsx
new file mode 100755
index 00000000..b89f21de
--- /dev/null
+++ b/src/components/lands/GPSLandMapper copy 2.jsx
@@ -0,0 +1,242 @@
+import { useState, useEffect, useMemo } from "react";
+import { MapContainer, TileLayer, Marker, Polygon, useMap, Circle } from "react-leaflet";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Locate, MapPin, Trash2, Save, Navigation, RotateCcw, AlertTriangle } from "lucide-react";
+import { toast } from "sonner";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+
+// Fix default marker icon
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+ iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+ iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+ shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+});
+
+const getColorByIndex = (index) => {
+ const colors = ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"];
+ return colors[index % colors.length];
+};
+
+/**
+ * Kalkulasi Luas Lahan (Hektar) yang lebih presisi
+ */
+function calculatePolygonArea(points) {
+ if (points.length < 3) return 0;
+
+ const radius = 6378137; // Radius Bumi (meters)
+ let area = 0;
+
+ for (let i = 0; i < points.length; i++) {
+ const p1 = points[i];
+ const p2 = points[(i + 1) % points.length];
+
+ // Konversi ke Radians
+ const lat1 = p1[0] * Math.PI / 180;
+ const lon1 = p1[1] * Math.PI / 180;
+ const lat2 = p2[0] * Math.PI / 180;
+ const lon2 = p2[1] * Math.PI / 180;
+
+ area += (lon2 - lon1) * (2 + Math.sin(lat1) + Math.sin(lat2));
+ }
+
+ area = Math.abs(area * radius * radius / 2.0);
+ return area / 10000; // Return in Hectares
+}
+
+function MapController({ center, zoom }) {
+ const map = useMap();
+ useEffect(() => {
+ if (center) {
+ // Zoom 20 untuk melihat detail batas lahan lebih dekat
+ map.flyTo(center, zoom || 20, { duration: 1.5 });
+ }
+ }, [center, map, zoom]);
+ return null;
+}
+
+export default function GPSLandMapper({ existingPolygon, onSave, readOnly = false }) {
+ const [points, setPoints] = useState([]);
+ const [currentLocation, setCurrentLocation] = useState(null);
+ const [isLocating, setIsLocating] = useState(false);
+ const [gpsAccuracy, setGpsAccuracy] = useState(null);
+ const [watchId, setWatchId] = useState(null);
+
+ const area = useMemo(() => calculatePolygonArea(points), [points]);
+
+ const getDistance = (p1, p2) => {
+ if (!p1 || !p2) return 0;
+ const R = 6371000;
+ const dLat = (p2[0] - p1[0]) * Math.PI / 180;
+ const dLon = (p2[1] - p1[1]) * Math.PI / 180;
+ const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+ Math.cos(p1[0] * Math.PI / 180) * Math.cos(p2[0] * Math.PI / 180) *
+ Math.sin(dLon / 2) * Math.sin(dLon / 2);
+ return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+ };
+
+ useEffect(() => {
+ if (existingPolygon && existingPolygon.length > 0) {
+ // Pastikan format dari database [lng, lat] dibalik ke [lat, lng] untuk Leaflet
+ const converted = Array.isArray(existingPolygon[0])
+ ? existingPolygon.map(p => [p[1], p[0]])
+ : [];
+ setPoints(converted);
+ }
+ }, [existingPolygon]);
+
+ const startGPSTracking = () => {
+ if (!navigator.geolocation) {
+ toast.error("GPS tidak didukung");
+ return;
+ }
+ setIsLocating(true);
+ const id = navigator.geolocation.watchPosition(
+ (pos) => {
+ setCurrentLocation([pos.coords.latitude, pos.coords.longitude]);
+ setGpsAccuracy(pos.coords.accuracy);
+ setIsLocating(false);
+ },
+ (err) => {
+ setIsLocating(false);
+ toast.error("Gagal mendapatkan lokasi GPS");
+ },
+ { enableHighAccuracy: true, maximumAge: 0 }
+ );
+ setWatchId(id);
+ };
+
+ const stopGPSTracking = () => {
+ if (watchId !== null) navigator.geolocation.clearWatch(watchId);
+ };
+
+ useEffect(() => {
+ startGPSTracking();
+ return () => stopGPSTracking();
+ }, []);
+
+ const addCornerPoint = () => {
+ if (!currentLocation) {
+ toast.error("Tunggu GPS mengunci lokasi");
+ return;
+ }
+
+ if (gpsAccuracy > 10) {
+ toast.error(`Akurasi buruk (±${gpsAccuracy.toFixed(0)}m). Pindah ke tempat terbuka.`);
+ return;
+ }
+
+ if (points.length > 0) {
+ const dist = getDistance(points[points.length - 1], currentLocation);
+ if (dist < 1) {
+ toast.error("Anda belum bergerak dari titik terakhir");
+ return;
+ }
+ }
+
+ setPoints([...points, currentLocation]);
+ toast.success(`Titik ${points.length + 1} ditandai`);
+ };
+
+ const removeLastPoint = () => setPoints(points.slice(0, -1));
+ const clearAllPoints = () => setPoints([]);
+
+ const handleSave = () => {
+ if (points.length < 3) {
+ toast.error("Minimal harus ada 3 titik");
+ return;
+ }
+ onSave({
+ polygon_coordinates: points.map(p => [p[1], p[0]]), // [lng, lat]
+ center_lat: points.reduce((s, p) => s + p[0], 0) / points.length,
+ center_lng: points.reduce((s, p) => s + p[1], 0) / points.length,
+ area_hectares: area
+ });
+ };
+
+ const createCornerIcon = (index) => L.divIcon({
+ className: "custom-corner-icon",
+ html: `
${index + 1}
`,
+ iconSize: [32, 32], iconAnchor: [16, 16]
+ });
+
+ return (
+
+
+
+
+
+
+
GPS {currentLocation ? "Aktif" : "Mencari..."}
+
10 ? 'text-red-500' : 'text-slate-500'}`}>
+ Akurasi: ±{gpsAccuracy?.toFixed(1)}m {gpsAccuracy > 10 && "(Lemah)"}
+
+
+
+ {currentLocation &&
{currentLocation[0].toFixed(5)}, {currentLocation[1].toFixed(5)}}
+
+
+ {!readOnly && (
+
+
+
+
+
+ )}
+
+ {points.length >= 3 && (
+
+
+
Estimasi Luas
+
{area.toFixed(4)} Ha
+
+ {!readOnly &&
}
+
+ )}
+
+
+ {/* LAYER SATELIT UNTUK PRESISI */}
+
+
+
+
+ {currentLocation && (
+ <>
+
+
+
+ Tips: Berjalanlah ke setiap sudut lahan. Tunggu lingkaran biru mengecil sebelum menekan "Tandai Titik" untuk hasil yang lebih presisi.
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/lands/GPSLandMapper copy.jsx b/src/components/lands/GPSLandMapper copy.jsx
old mode 100644
new mode 100755
diff --git a/src/components/lands/GPSLandMapper.jsx b/src/components/lands/GPSLandMapper.jsx
old mode 100644
new mode 100755
index b89f21de..66ed99c4
--- a/src/components/lands/GPSLandMapper.jsx
+++ b/src/components/lands/GPSLandMapper.jsx
@@ -3,146 +3,52 @@ import { MapContainer, TileLayer, Marker, Polygon, useMap, Circle } from "react-
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
-import { Locate, MapPin, Trash2, Save, Navigation, RotateCcw, AlertTriangle } from "lucide-react";
+import { Trash2, Save, Navigation, RotateCcw, Zap, ZapOff, Map as MapIcon, Loader2 } from "lucide-react";
import { toast } from "sonner";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
+import { Geolocation } from '@capacitor/geolocation';
-// Fix default marker icon
-delete L.Icon.Default.prototype._getIconUrl;
-L.Icon.Default.mergeOptions({
- iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+// Konfigurasi Icon Marker agar muncul di Android
+const customMarkerIcon = new L.Icon({
iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+ iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
});
const getColorByIndex = (index) => {
const colors = ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"];
return colors[index % colors.length];
};
-
-/**
- * Kalkulasi Luas Lahan (Hektar) yang lebih presisi
- */
-function calculatePolygonArea(points) {
- if (points.length < 3) return 0;
-
- const radius = 6378137; // Radius Bumi (meters)
- let area = 0;
-
- for (let i = 0; i < points.length; i++) {
- const p1 = points[i];
- const p2 = points[(i + 1) % points.length];
-
- // Konversi ke Radians
- const lat1 = p1[0] * Math.PI / 180;
- const lon1 = p1[1] * Math.PI / 180;
- const lat2 = p2[0] * Math.PI / 180;
- const lon2 = p2[1] * Math.PI / 180;
-
- area += (lon2 - lon1) * (2 + Math.sin(lat1) + Math.sin(lat2));
- }
-
- area = Math.abs(area * radius * radius / 2.0);
- return area / 10000; // Return in Hectares
-}
-
-function MapController({ center, zoom }) {
+// Komponen Pengatur Peta (PENTING: Memperbaiki masalah layar putih)
+function MapController({ center, isTracking }) {
const map = useMap();
+
useEffect(() => {
- if (center) {
- // Zoom 20 untuk melihat detail batas lahan lebih dekat
- map.flyTo(center, zoom || 20, { duration: 1.5 });
+ // Memaksa Leaflet menghitung ulang ukuran container setelah render pertama
+ setTimeout(() => {
+ map.invalidateSize();
+ }, 500);
+ }, [map]);
+
+ useEffect(() => {
+ if (center && isTracking) {
+ map.setView(center, 19, { animate: true });
}
- }, [center, map, zoom]);
+ }, [center, isTracking, map]);
+
return null;
}
-export default function GPSLandMapper({ existingPolygon, onSave, readOnly = false }) {
+export default function GPSLandMapper({ onSave, readOnly = false }) {
const [points, setPoints] = useState([]);
const [currentLocation, setCurrentLocation] = useState(null);
- const [isLocating, setIsLocating] = useState(false);
const [gpsAccuracy, setGpsAccuracy] = useState(null);
const [watchId, setWatchId] = useState(null);
-
- const area = useMemo(() => calculatePolygonArea(points), [points]);
-
- const getDistance = (p1, p2) => {
- if (!p1 || !p2) return 0;
- const R = 6371000;
- const dLat = (p2[0] - p1[0]) * Math.PI / 180;
- const dLon = (p2[1] - p1[1]) * Math.PI / 180;
- const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
- Math.cos(p1[0] * Math.PI / 180) * Math.cos(p2[0] * Math.PI / 180) *
- Math.sin(dLon / 2) * Math.sin(dLon / 2);
- return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
- };
-
- useEffect(() => {
- if (existingPolygon && existingPolygon.length > 0) {
- // Pastikan format dari database [lng, lat] dibalik ke [lat, lng] untuk Leaflet
- const converted = Array.isArray(existingPolygon[0])
- ? existingPolygon.map(p => [p[1], p[0]])
- : [];
- setPoints(converted);
- }
- }, [existingPolygon]);
-
- const startGPSTracking = () => {
- if (!navigator.geolocation) {
- toast.error("GPS tidak didukung");
- return;
- }
- setIsLocating(true);
- const id = navigator.geolocation.watchPosition(
- (pos) => {
- setCurrentLocation([pos.coords.latitude, pos.coords.longitude]);
- setGpsAccuracy(pos.coords.accuracy);
- setIsLocating(false);
- },
- (err) => {
- setIsLocating(false);
- toast.error("Gagal mendapatkan lokasi GPS");
- },
- { enableHighAccuracy: true, maximumAge: 0 }
- );
- setWatchId(id);
- };
-
- const stopGPSTracking = () => {
- if (watchId !== null) navigator.geolocation.clearWatch(watchId);
- };
-
- useEffect(() => {
- startGPSTracking();
- return () => stopGPSTracking();
- }, []);
-
- const addCornerPoint = () => {
- if (!currentLocation) {
- toast.error("Tunggu GPS mengunci lokasi");
- return;
- }
-
- if (gpsAccuracy > 10) {
- toast.error(`Akurasi buruk (±${gpsAccuracy.toFixed(0)}m). Pindah ke tempat terbuka.`);
- return;
- }
-
- if (points.length > 0) {
- const dist = getDistance(points[points.length - 1], currentLocation);
- if (dist < 1) {
- toast.error("Anda belum bergerak dari titik terakhir");
- return;
- }
- }
-
- setPoints([...points, currentLocation]);
- toast.success(`Titik ${points.length + 1} ditandai`);
- };
-
- const removeLastPoint = () => setPoints(points.slice(0, -1));
- const clearAllPoints = () => setPoints([]);
+ const [isTracking, setIsTracking] = useState(false);
+ const [positionBuffer, setPositionBuffer] = useState([]);
const handleSave = () => {
if (points.length < 3) {
@@ -157,83 +63,181 @@ export default function GPSLandMapper({ existingPolygon, onSave, readOnly = fals
});
};
- const createCornerIcon = (index) => L.divIcon({
- className: "custom-corner-icon",
- html: `${index + 1}
`,
- iconSize: [32, 32], iconAnchor: [16, 16]
- });
+ // Hitung Luas
+ const area = useMemo(() => {
+ if (points.length < 3) return 0;
+ const radius = 6378137;
+ let areaVal = 0;
+ for (let i = 0; i < points.length; i++) {
+ const p1 = points[i];
+ const p2 = points[(i + 1) % points.length];
+ const lat1 = p1[0] * Math.PI / 180;
+ const lon1 = p1[1] * Math.PI / 180;
+ const lat2 = p2[0] * Math.PI / 180;
+ const lon2 = p2[1] * Math.PI / 180;
+ areaVal += (lon2 - lon1) * (2 + Math.sin(lat1) + Math.sin(lat2));
+ }
+ return Math.abs(areaVal * radius * radius / 2.0) / 10000;
+ }, [points]);
+
+ const startGPSTracking = async () => {
+ try {
+ const permissions = await Geolocation.requestPermissions();
+ if (permissions.location !== 'granted') {
+ toast.error("Izin lokasi diperlukan");
+ return;
+ }
+
+ const id = await Geolocation.watchPosition(
+ { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 },
+ (position, err) => {
+ if (err) return;
+ if (position) {
+ const coords = [position.coords.latitude, position.coords.longitude];
+ setCurrentLocation(coords);
+ setGpsAccuracy(position.coords.accuracy);
+ setPositionBuffer(prev => [...prev, coords].slice(-5));
+ }
+ }
+ );
+ setWatchId(id);
+ } catch (e) {
+ toast.error("GPS Error: " + e.message);
+ }
+ };
+
+ const stopGPSTracking = async () => {
+ if (watchId) {
+ await Geolocation.clearWatch({ id: watchId });
+ setWatchId(null);
+ }
+ };
+
+ useEffect(() => {
+ if (isTracking) startGPSTracking();
+ else stopGPSTracking();
+ return () => stopGPSTracking();
+ }, [isTracking]);
+
+ const addPoint = () => {
+ if (!currentLocation) return;
+ if (gpsAccuracy > 15) {
+ toast.error("Akurasi terlalu rendah, tunggu sinyal stabil");
+ return;
+ }
+ // Averaging
+ const lat = positionBuffer.reduce((a, b) => a + b[0], 0) / positionBuffer.length;
+ const lng = positionBuffer.reduce((a, b) => a + b[1], 0) / positionBuffer.length;
+ setPoints([...points, [lat, lng]]);
+ toast.success("Titik sudut ditambahkan");
+ };
return (
-
-
-
-
-
-
-
GPS {currentLocation ? "Aktif" : "Mencari..."}
-
10 ? 'text-red-500' : 'text-slate-500'}`}>
- Akurasi: ±{gpsAccuracy?.toFixed(1)}m {gpsAccuracy > 10 && "(Lemah)"}
-
-
+
+
+ {/* SECTION 1: KONTROL UTAMA (Selalu Ada) */}
+
+
+
+
+
+ {isTracking ? `Akurasi: ±${gpsAccuracy?.toFixed(1)}m` : "GPS Nonaktif"}
+
- {currentLocation &&
{currentLocation[0].toFixed(5)}, {currentLocation[1].toFixed(5)}}
+ {currentLocation &&
Sinyal Terkunci}
- {!readOnly && (
-
-
-
-
-
- {/* LAYER SATELIT UNTUK PRESISI */}
-
-
-
-
- {currentLocation && (
+ ) : (
<>
-
- `,
- iconSize:[20,20], iconAnchor:[10,10]
- })} />
+
+
)}
+
- {points.map((p, i) =>
)}
- {points.length >= 3 &&
}
+ {/* SECTION 2: AREA INFORMASI LUAS & SIMPAN (Muncul jika titik >= 3) */}
+ {points.length >= 3 && (
+
+
+
Total Estimasi Luas
+
+ {area.toFixed(4)}
+ Ha
+
+
+
+ {!readOnly && (
+
+ )}
+
+ )}
+
+ {/* SECTION 3: MAP CONTAINER */}
+
+
+
+
+
+ {currentLocation && isTracking && (
+
+ )}
+
+ {points.map((p, i) => (
+ ${i+1}`
+ })}
+ />
+ ))}
+
+ {points.length >= 3 && (
+
+ )}
- {!readOnly && (
-
-
- Tips: Berjalanlah ke setiap sudut lahan. Tunggu lingkaran biru mengecil sebelum menekan "Tandai Titik" untuk hasil yang lebih presisi.
-
+ {/* Floating Reset Button (Hanya ini yang di dalam peta) */}
+ {points.length > 0 && (
+
+
+
)}
diff --git a/src/components/lands/LandCard.jsx b/src/components/lands/LandCard.jsx
old mode 100644
new mode 100755
index b635f873..cef22de5
--- a/src/components/lands/LandCard.jsx
+++ b/src/components/lands/LandCard.jsx
@@ -4,6 +4,9 @@ import { Button } from "@/components/ui/button";
import { MapPin, Maximize2, TreePine, ChevronRight } from "lucide-react";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";
+import { entity } from "@/api/entities";
+import { OfflineService } from "../common/offlineStorage";
+import { useEffect, useState } from "react";
const validationColors = {
valid: "bg-emerald-100 text-emerald-700 border-emerald-200",
@@ -27,15 +30,26 @@ const statusColors = {
};
export default function LandCard({ land, farmerName, plantCount = 0 }) {
+ const [village, setVillage] = useState();
+
+ useEffect(() => {
+ const fetchVillages = async () => {
+ const villages = await OfflineService.getEntities('villages');
+ const findvillage = villages.find(data => data.id === land.desa_kelurahan_id);
+
+ setVillage(findvillage);
+ };
+ fetchVillages();
+ });
+
return (
-
{land.nama}
+
{land.nama || land?.name}
{farmerName &&
{farmerName}
}
-
- {validationLabels[land.validation_status]}
+ Lahan
@@ -61,7 +75,7 @@ export default function LandCard({ land, farmerName, plantCount = 0 }) {
- {land.village || land.desa_kelurahan_id }, {land.district || 'Unknown'}
+ {village?.nama || village?.name || land.desa_kelurahan_id }
