feat: initial commit with seeded database and premium ui changes
This commit is contained in:
Dodo
@@ -0,0 +1,79 @@
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
import { useState, useEffect } from "react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
|
||||
|
||||
interface LandAllocationChartProps {
|
||||
pieChartData: Array<{
|
||||
name: string;
|
||||
value: number;
|
||||
color: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export function LandAllocationChart({ pieChartData }: LandAllocationChartProps) {
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 h-full flex flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold font-sans">Land Status Breakdown</CardTitle>
|
||||
<CardDescription>Acreage and share representation of registered parcels by ownership status.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col sm:flex-row items-center justify-around gap-6 py-6 min-h-[260px]">
|
||||
{pieChartData.length > 0 ? (
|
||||
<>
|
||||
<div className="h-56 w-56 shrink-0">
|
||||
{!isMounted ? (
|
||||
<div className="h-full w-full" />
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieChartData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={65}
|
||||
outerRadius={85}
|
||||
paddingAngle={3}
|
||||
dataKey="value"
|
||||
>
|
||||
{pieChartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: "rgba(12, 10, 8, 0.95)",
|
||||
border: "1px solid #4d505d",
|
||||
borderRadius: "6px",
|
||||
fontSize: "12px",
|
||||
color: "#ffffff"
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-xs w-full max-w-sm">
|
||||
{pieChartData.map((d, index) => (
|
||||
<div key={index} className="flex items-center gap-2 border p-2 rounded bg-background">
|
||||
<div className="h-3 w-3 rounded shrink-0" style={{ backgroundColor: d.color }} />
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="font-semibold text-foreground truncate">{d.name}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{d.value} Hectares</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-center text-xs text-muted-foreground py-12">Belum ada data poligon lahan.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { SearchIcon } from "@/components/ui/phosphor-icons";
|
||||
import { LAND_MARKER_LABELS, LAND_MARKER_COLORS } from "@/lib/map-data";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
import { calcLineLength, calcPolygonArea } from "@/components/land/shape-placement-dialog";
|
||||
|
||||
interface LandDirectoryProps {
|
||||
searchQuery: string;
|
||||
setSearchQuery: (query: string) => void;
|
||||
filteredItems: UserMarker[];
|
||||
selectedItemId: string | null;
|
||||
visibilityFilters: Record<string, boolean>;
|
||||
onSelectItem: (item: UserMarker) => void;
|
||||
}
|
||||
|
||||
function itemBadge(item: UserMarker): string {
|
||||
const coordinates = item.meta?.coordinates ?? [];
|
||||
if (item.type === "polygon" && coordinates.length > 0) {
|
||||
return `${(calcPolygonArea(coordinates) / 10000).toFixed(2)} Ha`;
|
||||
}
|
||||
if (item.type === "line" && coordinates.length > 0) {
|
||||
const length = calcLineLength(coordinates);
|
||||
return length >= 1000 ? `${(length / 1000).toFixed(2)} km` : `${length.toFixed(1)} m`;
|
||||
}
|
||||
if (item.type === "circle") {
|
||||
const radius = item.meta?.radius ?? 0;
|
||||
return `${radius.toFixed(1)} m`;
|
||||
}
|
||||
return LAND_MARKER_LABELS[item.type] ?? item.type;
|
||||
}
|
||||
|
||||
export function LandDirectory({
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
filteredItems,
|
||||
selectedItemId,
|
||||
visibilityFilters,
|
||||
onSelectItem,
|
||||
}: LandDirectoryProps) {
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 h-full flex flex-col">
|
||||
<CardHeader className="py-4">
|
||||
<CardTitle className="text-base font-semibold">GIS Layer Directory</CardTitle>
|
||||
<CardDescription>Select a marker or shape to review survey metadata and inspector details.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pb-6 flex-1">
|
||||
<div className="relative mb-4">
|
||||
<SearchIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search by name or type..."
|
||||
className="pl-9 bg-background h-10"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{filteredItems.length > 0 ? (
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{filteredItems.map((item) => {
|
||||
const isSelected = selectedItemId === item.id;
|
||||
const isVisible = visibilityFilters[item.type] !== false;
|
||||
const color = LAND_MARKER_COLORS[item.type] ?? "#6b7280";
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => onSelectItem(item)}
|
||||
className={`p-3 border rounded-lg cursor-pointer flex justify-between items-center gap-2 transition-all ${
|
||||
isSelected
|
||||
? "border-primary bg-primary/5 text-primary font-semibold"
|
||||
: "border-border/60 hover:bg-muted"
|
||||
} ${!isVisible ? "opacity-45" : ""}`}
|
||||
>
|
||||
<span className="text-xs text-foreground font-medium truncate">{item.name}</span>
|
||||
<span
|
||||
className="text-[9px] border px-2 py-0.5 rounded font-bold shrink-0"
|
||||
style={{
|
||||
color,
|
||||
borderColor: `${color}33`,
|
||||
backgroundColor: `${color}11`
|
||||
}}
|
||||
>
|
||||
{itemBadge(item)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-center text-xs text-muted-foreground py-12">
|
||||
Belum ada penanda atau bentuk yang ditambahkan. Buka peta untuk mulai menambahkan.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { LayersIcon, EyeIcon, EyeOffIcon, ShieldAlertIcon } from "@/components/ui/phosphor-icons";
|
||||
import { LAND_MARKER_LABELS, LAND_MARKER_COLORS } from "@/lib/map-data";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
import { calcLineLength, calcPolygonArea } from "@/components/land/shape-placement-dialog";
|
||||
|
||||
function formatDate(iso?: string): string {
|
||||
if (!iso) return "—";
|
||||
return new Date(iso).toLocaleDateString("id-ID", { year: "numeric", month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
interface LandInspectorTopProps {
|
||||
selectedItem: UserMarker | null;
|
||||
visibilityFilters: Record<string, boolean>;
|
||||
toggleFilter: (type: string) => void;
|
||||
}
|
||||
|
||||
export function LandInspectorTop({ selectedItem, visibilityFilters, toggleFilter }: LandInspectorTopProps) {
|
||||
if (!selectedItem) {
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<CardHeader className="border-b bg-muted/20 px-6 py-4 flex flex-col justify-center">
|
||||
<CardTitle className="text-base font-semibold flex items-center gap-2">
|
||||
<LayersIcon className="h-4 w-4 text-primary" />
|
||||
Boundary Inspector
|
||||
</CardTitle>
|
||||
<CardDescription>Reviewing border registries.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 flex-1 flex items-center justify-center">
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
Belum ada item dipilih. Buka peta atau pilih item dari direktori.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const color = LAND_MARKER_COLORS[selectedItem.type] ?? "#6b7280";
|
||||
const label = LAND_MARKER_LABELS[selectedItem.type] ?? selectedItem.type;
|
||||
const coordinates = selectedItem.meta?.coordinates ?? [];
|
||||
const radius = selectedItem.meta?.radius ?? 0;
|
||||
const length = selectedItem.type === "line" ? calcLineLength(coordinates) : 0;
|
||||
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<CardHeader className="border-b bg-muted/20 px-6 py-4 flex flex-col justify-center">
|
||||
<CardTitle className="text-base font-semibold flex items-center gap-2">
|
||||
<LayersIcon className="h-4 w-4 text-primary" />
|
||||
Boundary Inspector
|
||||
</CardTitle>
|
||||
<CardDescription>Reviewing border registries.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 flex flex-col gap-5 flex-1 justify-center">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-foreground">{selectedItem.name}</h3>
|
||||
<span
|
||||
className="inline-block mt-1.5 text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded border"
|
||||
style={{
|
||||
color,
|
||||
borderColor: `${color}33`,
|
||||
backgroundColor: `${color}11`
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2.5 text-xs py-3 border-y">
|
||||
{selectedItem.type === "polygon" && coordinates.length > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Luas Terdaftar:</span>
|
||||
<span className="font-semibold text-foreground">{(calcPolygonArea(coordinates) / 10000).toFixed(2)} Ha</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedItem.type === "line" && coordinates.length > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Panjang:</span>
|
||||
<span className="font-semibold text-foreground">
|
||||
{length >= 1000 ? `${(length / 1000).toFixed(2)} km` : `${length.toFixed(1)} m`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedItem.type === "circle" && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Radius:</span>
|
||||
<span className="font-semibold text-foreground">{radius.toFixed(1)} m</span>
|
||||
</div>
|
||||
)}
|
||||
{(selectedItem.type === "line" || selectedItem.type === "polygon") && selectedItem.meta?.poi_type && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Status:</span>
|
||||
<span className="font-semibold text-foreground">{selectedItem.meta.poi_type}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Created By:</span>
|
||||
<span className="font-semibold text-foreground text-right max-w-44 truncate">{selectedItem.meta?.created_by_username ?? "—"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Created:</span>
|
||||
<span className="font-semibold text-foreground">{formatDate(selectedItem.meta?.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 justify-center py-2">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase">Visibility filter status:</span>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => toggleFilter(selectedItem.type)}
|
||||
className="h-8 gap-1 text-xs"
|
||||
>
|
||||
{visibilityFilters[selectedItem.type] !== false ? (
|
||||
<>
|
||||
<EyeOffIcon className="h-3.5 w-3.5" />
|
||||
Hide Category
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EyeIcon className="h-3.5 w-3.5" />
|
||||
Show Category
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface LandInspectorBottomProps {
|
||||
recentFlags: UserMarker[];
|
||||
}
|
||||
|
||||
export function LandInspectorBottom({ recentFlags }: LandInspectorBottomProps) {
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 h-full flex flex-col justify-between">
|
||||
<CardHeader className="py-3 px-6 border-b bg-muted/10">
|
||||
<CardTitle className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
|
||||
<ShieldAlertIcon className="h-3.5 w-3.5 text-primary" />
|
||||
Surveyor Logs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 flex flex-col gap-2 flex-1">
|
||||
{recentFlags.length > 0 ? (
|
||||
recentFlags.map((flag) => (
|
||||
<div key={flag.id} className="p-2 border rounded bg-background text-[11px] flex flex-col gap-1">
|
||||
<div className="flex justify-between font-bold text-primary">
|
||||
<span className="truncate">{flag.name}</span>
|
||||
</div>
|
||||
{flag.meta?.notes && (
|
||||
<p className="text-muted-foreground">{flag.meta.notes}</p>
|
||||
)}
|
||||
<span className="text-[9px] text-muted-foreground/60">Reported: {formatDate(flag.meta?.created_at)}</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<p className="text-center text-xs text-muted-foreground py-6">Belum ada tengara lahan tercatat.</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { LayersIcon, RoadHorizonIcon, MapPinIcon } from "@/components/ui/phosphor-icons";
|
||||
|
||||
interface LandStatsCardsProps {
|
||||
aggregateStats: {
|
||||
totalParcelArea: string;
|
||||
totalRoadLength: string;
|
||||
activeMarkers: number;
|
||||
};
|
||||
}
|
||||
|
||||
export function LandStatsCards({ aggregateStats }: LandStatsCardsProps) {
|
||||
return (
|
||||
<>
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<div className="flex justify-between items-center pb-2">
|
||||
<span className="text-xs font-medium text-muted-foreground">Total Parcel Area</span>
|
||||
<LayersIcon className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-foreground mt-2">{aggregateStats.totalParcelArea} Ha</div>
|
||||
</div>
|
||||
<div className="border-t px-6 py-3 text-xs text-muted-foreground mt-auto">
|
||||
Sum of all registered polygon parcels
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<div className="flex justify-between items-center pb-2">
|
||||
<span className="text-xs font-medium text-muted-foreground">Total Road Length</span>
|
||||
<RoadHorizonIcon className="h-4 w-4 text-cobalt-glow" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-foreground mt-2">{aggregateStats.totalRoadLength} km</div>
|
||||
</div>
|
||||
<div className="border-t px-6 py-3 text-xs text-muted-foreground mt-auto">
|
||||
Sum of all measured road/line segments
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<div className="flex justify-between items-center pb-2">
|
||||
<span className="text-xs font-medium text-muted-foreground">Active Markers</span>
|
||||
<MapPinIcon className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-foreground mt-2">{aggregateStats.activeMarkers} Markers</div>
|
||||
</div>
|
||||
<div className="border-t px-6 py-3 text-xs text-muted-foreground mt-auto">
|
||||
Land pins, survey flags, protected zones & registries
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
import { TimedUndoAction } from "@/components/time-undo-action";
|
||||
import {
|
||||
ROAD_STATUSES,
|
||||
LAND_STATUSES,
|
||||
calcLineLength,
|
||||
calcPolygonArea,
|
||||
} from "@/components/land/shape-placement-dialog";
|
||||
import { LAND_MARKER_LABELS } from "@/lib/map-data";
|
||||
|
||||
/* ─── Shared Field component ─────────────────────────────── */
|
||||
|
||||
function Field({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-1.5", className)}>
|
||||
<span className="text-[11px] font-semibold text-foreground/60 uppercase tracking-wider">
|
||||
{label}
|
||||
</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Stat Chip ──────────────────────────────────────────── */
|
||||
|
||||
function StatChip({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2">
|
||||
<span className="text-[10px] font-semibold text-foreground/50 uppercase tracking-wider">{label}</span>
|
||||
<span className="text-sm font-semibold text-foreground tabular-nums ml-auto">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Status Chip Selector ───────────────────────────────── */
|
||||
|
||||
function StatusSelector({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
options: { value: string; label: string; color: string }[];
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{options.map((opt) => {
|
||||
const isSelected = value === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={cn(
|
||||
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all",
|
||||
isSelected
|
||||
? "border-transparent text-white shadow-sm"
|
||||
: "border-border text-foreground/70 hover:bg-muted"
|
||||
)}
|
||||
style={isSelected ? { backgroundColor: opt.color } : undefined}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Dialog Component ───────────────────────────────────── */
|
||||
|
||||
interface ShapeEditDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
shape: UserMarker | null;
|
||||
onUpdated: (updated: UserMarker) => void;
|
||||
onDeleted: (deleted: UserMarker) => void;
|
||||
}
|
||||
|
||||
export function ShapeEditDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
shape,
|
||||
onUpdated,
|
||||
onDeleted,
|
||||
}: ShapeEditDialogProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const [notes, setNotes] = useState("");
|
||||
|
||||
const DELETE_SECONDS = 5;
|
||||
const TOAST_ID = "shape-delete";
|
||||
|
||||
const [deleteActive, setDeleteActive] = useState(false);
|
||||
const [deleteCountdown, setDeleteCountdown] = useState(DELETE_SECONDS);
|
||||
const pendingDeleteShape = useRef<UserMarker | null>(null);
|
||||
|
||||
const shapeType = shape?.type ?? "";
|
||||
const isLine = shapeType === "line";
|
||||
const isPolygon = shapeType === "polygon";
|
||||
const isCircle = shapeType === "circle";
|
||||
|
||||
const titleLabel = `Edit ${LAND_MARKER_LABELS[shapeType] ?? "Item"}`;
|
||||
const coordinates = shape?.meta?.coordinates ?? [];
|
||||
const radius = shape?.meta?.radius ?? 0;
|
||||
|
||||
const length = isLine ? calcLineLength(coordinates) : 0;
|
||||
const area = isPolygon
|
||||
? calcPolygonArea(coordinates)
|
||||
: isCircle
|
||||
? Math.PI * radius * radius
|
||||
: 0;
|
||||
|
||||
const statusOptions = isLine ? ROAD_STATUSES : isPolygon ? LAND_STATUSES : [];
|
||||
|
||||
// Reset when different shape opens
|
||||
useEffect(() => {
|
||||
if (!shape?.id) return;
|
||||
setName(shape.name);
|
||||
setStatus(shape.meta?.poi_type ?? (isLine ? "Regency Road" : isPolygon ? "SHM" : ""));
|
||||
setNotes(shape.meta?.notes ?? "");
|
||||
setDeleteActive(false);
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
pendingDeleteShape.current = null;
|
||||
toast.dismiss(TOAST_ID);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [shape?.id]);
|
||||
|
||||
// Countdown tick
|
||||
useEffect(() => {
|
||||
if (!deleteActive) return;
|
||||
const id = setInterval(() => setDeleteCountdown((p) => Math.max(0, p - 1)), 1000);
|
||||
return () => clearInterval(id);
|
||||
}, [deleteActive]);
|
||||
|
||||
// Fire delete when countdown hits 0
|
||||
useEffect(() => {
|
||||
if (!deleteActive || deleteCountdown > 0) return;
|
||||
setDeleteActive(false);
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
toast.dismiss(TOAST_ID);
|
||||
handleDelete();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [deleteActive, deleteCountdown]);
|
||||
|
||||
// Toast while countdown is running
|
||||
useEffect(() => {
|
||||
if (!deleteActive || !pendingDeleteShape.current) {
|
||||
toast.dismiss(TOAST_ID);
|
||||
return;
|
||||
}
|
||||
const shapeName = pendingDeleteShape.current.name;
|
||||
const pct = (deleteCountdown / DELETE_SECONDS) * 100;
|
||||
toast.custom(
|
||||
() => (
|
||||
<div className="relative flex items-center gap-3 w-72 rounded-xl border border-border bg-popover px-4 py-3 shadow-lg overflow-hidden font-sans">
|
||||
<div
|
||||
className="absolute bottom-0 left-0 h-[3px] bg-red-500 transition-[width] duration-1000 ease-linear"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold text-foreground truncate">Menghapus shape</p>
|
||||
<p className="text-xs text-muted-foreground truncate">"{shapeName}" — dalam {deleteCountdown} detik</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setDeleteActive(false);
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
pendingDeleteShape.current = null;
|
||||
toast.dismiss(TOAST_ID);
|
||||
}}
|
||||
className="shrink-0 h-7 rounded-full border border-border bg-background px-3 text-xs font-medium hover:bg-muted transition-colors cursor-pointer"
|
||||
>
|
||||
Batalkan
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
{ id: TOAST_ID, duration: Infinity, position: "bottom-left" },
|
||||
);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [deleteActive, deleteCountdown]);
|
||||
|
||||
function toggleDelete() {
|
||||
setDeleteActive((prev) => {
|
||||
if (!prev) {
|
||||
pendingDeleteShape.current = shape;
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
} else {
|
||||
pendingDeleteShape.current = null;
|
||||
toast.dismiss(TOAST_ID);
|
||||
}
|
||||
return !prev;
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
const target = pendingDeleteShape.current;
|
||||
if (!target) return;
|
||||
pendingDeleteShape.current = null;
|
||||
onDeleted(target);
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!shape) return;
|
||||
|
||||
const updated: UserMarker = {
|
||||
...shape,
|
||||
name: name.trim() || shape.name,
|
||||
meta: {
|
||||
...shape.meta,
|
||||
poi_type: status || undefined,
|
||||
notes: notes.trim() || undefined,
|
||||
},
|
||||
};
|
||||
|
||||
onUpdated(updated);
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) onOpenChange(false); }}>
|
||||
<DialogContent showCloseButton={false} className="sm:max-w-lg w-full max-h-[90vh] overflow-y-auto rounded-2xl p-0 gap-0">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col">
|
||||
{/* Header */}
|
||||
<DialogHeader className="px-6 pt-6 pb-4 border-b">
|
||||
<DialogTitle className="text-center text-base font-semibold">{titleLabel}</DialogTitle>
|
||||
<p className="text-center text-xs text-muted-foreground font-mono tabular-nums mt-1">
|
||||
{shape ? `${shape.lat.toFixed(5)}, ${shape.lng.toFixed(5)}` : ""}
|
||||
</p>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-5 flex flex-col gap-5">
|
||||
{/* Name */}
|
||||
<Field label={isLine ? "Nama Jalan" : isPolygon ? "Nama Lahan" : isCircle ? "Nama Area" : "Nama Penanda"}>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Notes (optional, all types) */}
|
||||
<Field label="Catatan">
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Catatan tambahan (opsional)"
|
||||
rows={2}
|
||||
className="w-full min-w-0 rounded-lg border border-input bg-muted/50 px-2.5 py-1.5 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 resize-none"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Status (line / polygon only) */}
|
||||
{statusOptions.length > 0 && (
|
||||
<Field label="Status">
|
||||
<StatusSelector options={statusOptions} value={status} onChange={setStatus} />
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Auto-calculated metrics */}
|
||||
<div className={cn("grid gap-3", isCircle ? "grid-cols-2" : "grid-cols-1")}>
|
||||
{isLine && (
|
||||
<StatChip
|
||||
label="Panjang"
|
||||
value={length >= 1000
|
||||
? `${(length / 1000).toFixed(2)} km`
|
||||
: `${length.toFixed(1)} m`}
|
||||
/>
|
||||
)}
|
||||
{(isPolygon || isCircle) && (
|
||||
<StatChip
|
||||
label="Luas"
|
||||
value={area >= 10000
|
||||
? `${(area / 10000).toFixed(2)} ha`
|
||||
: `${area.toFixed(1)} m²`}
|
||||
/>
|
||||
)}
|
||||
{isCircle && (
|
||||
<StatChip label="Radius" value={`${radius.toFixed(1)} m`} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(isLine || isPolygon) && coordinates.length > 0 && (
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{coordinates.length} titik koordinat
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between gap-2 px-6 py-4 border-t">
|
||||
<TimedUndoAction
|
||||
compact
|
||||
deleteLabel="Hapus Shape"
|
||||
undoLabel="Batal"
|
||||
isDeleting={deleteActive}
|
||||
countDown={deleteCountdown}
|
||||
onToggle={toggleDelete}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="h-9 rounded-full border border-border px-5 text-sm font-medium transition-colors hover:bg-muted"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim()}
|
||||
className="h-9 rounded-full bg-primary text-primary-foreground px-5 text-sm font-medium transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
import { LAND_MARKER_LABELS } from "@/lib/map-data";
|
||||
|
||||
/* ─── Status options per shape type ──────────────────────── */
|
||||
|
||||
const ROAD_STATUSES = [
|
||||
{ value: "National Road", label: "National", color: "#ef4444" },
|
||||
{ value: "Provincial Road", label: "Provincial", color: "#eab308" },
|
||||
{ value: "Regency Road", label: "Regency", color: "#22c55e" },
|
||||
];
|
||||
|
||||
const LAND_STATUSES = [
|
||||
{ value: "SHM", label: "SHM", color: "#a855f7" },
|
||||
{ value: "HGB", label: "HGB", color: "#f97316" },
|
||||
{ value: "HGU", label: "HGU", color: "#14b8a6" },
|
||||
{ value: "HP", label: "HP", color: "#ec4899" },
|
||||
];
|
||||
|
||||
/* ─── Geometry helpers ───────────────────────────────────── */
|
||||
|
||||
/** Calculate polyline length from [lat, lng][] coordinates in meters */
|
||||
function calcLineLength(coords: [number, number][]): number {
|
||||
let total = 0;
|
||||
for (let i = 1; i < coords.length; i++) {
|
||||
total += haversineDistance(coords[i - 1], coords[i]);
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
/** Calculate polygon area from [lat, lng][] using shoelfoot formula + spherical correction */
|
||||
function calcPolygonArea(coords: [number, number][]): number {
|
||||
// Shoelace formula on projected coords (approximate for small areas)
|
||||
const R = 6371000; // Earth radius in meters
|
||||
let area = 0;
|
||||
const n = coords.length;
|
||||
for (let i = 0; i < n; i++) {
|
||||
const j = (i + 1) % n;
|
||||
const lat1 = coords[i][0] * Math.PI / 180;
|
||||
const lat2 = coords[j][0] * Math.PI / 180;
|
||||
const lng1 = coords[i][1] * Math.PI / 180;
|
||||
const lng2 = coords[j][1] * Math.PI / 180;
|
||||
area += (lng2 - lng1) * (2 + Math.sin(lat1) + Math.sin(lat2));
|
||||
}
|
||||
area = Math.abs(area * R * R / 2);
|
||||
return area;
|
||||
}
|
||||
|
||||
/** Haversine distance between two [lat, lng] points in meters */
|
||||
function haversineDistance(a: [number, number], b: [number, number]): number {
|
||||
const R = 6371000;
|
||||
const dLat = (b[0] - a[0]) * Math.PI / 180;
|
||||
const dLng = (b[1] - a[1]) * Math.PI / 180;
|
||||
const lat1 = a[0] * Math.PI / 180;
|
||||
const lat2 = b[0] * Math.PI / 180;
|
||||
const s = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||
Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
|
||||
return R * 2 * Math.atan2(Math.sqrt(s), Math.sqrt(1 - s));
|
||||
}
|
||||
|
||||
/* ─── Shared Field component ─────────────────────────────── */
|
||||
|
||||
function Field({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-1.5", className)}>
|
||||
<span className="text-[11px] font-semibold text-foreground/60 uppercase tracking-wider">
|
||||
{label}
|
||||
</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Stat Chip (for read-only auto-calculated values) ──── */
|
||||
|
||||
function StatChip({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2">
|
||||
<span className="text-[10px] font-semibold text-foreground/50 uppercase tracking-wider">{label}</span>
|
||||
<span className="text-sm font-semibold text-foreground tabular-nums ml-auto">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Status Chip Selector ───────────────────────────────── */
|
||||
|
||||
function StatusSelector({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
options: { value: string; label: string; color: string }[];
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{options.map((opt) => {
|
||||
const isSelected = value === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={cn(
|
||||
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all",
|
||||
isSelected
|
||||
? "border-transparent text-white shadow-sm"
|
||||
: "border-border text-foreground/70 hover:bg-muted"
|
||||
)}
|
||||
style={isSelected ? { backgroundColor: opt.color } : undefined}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Dialog Component ───────────────────────────────────── */
|
||||
|
||||
interface ShapePlacementDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
pendingShape: UserMarker | null;
|
||||
onConfirm: (shape: UserMarker) => void;
|
||||
}
|
||||
|
||||
export function ShapePlacementDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
pendingShape,
|
||||
onConfirm,
|
||||
}: ShapePlacementDialogProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const [notes, setNotes] = useState("");
|
||||
|
||||
const shapeType = pendingShape?.type ?? "";
|
||||
const isLine = shapeType === "line";
|
||||
const isPolygon = shapeType === "polygon";
|
||||
const isCircle = shapeType === "circle";
|
||||
|
||||
const titleLabel = isLine ? "Jalan Baru" : isPolygon ? "Lahan Baru" : isCircle ? "Area Baru" : (LAND_MARKER_LABELS[shapeType] ?? "Item Baru");
|
||||
|
||||
// Auto-calculated metrics
|
||||
const coordinates = pendingShape?.meta?.coordinates ?? [];
|
||||
const radius = pendingShape?.meta?.radius ?? 0;
|
||||
|
||||
const length = isLine ? calcLineLength(coordinates) : 0;
|
||||
const area = isPolygon
|
||||
? calcPolygonArea(coordinates)
|
||||
: isCircle
|
||||
? Math.PI * radius * radius
|
||||
: 0;
|
||||
|
||||
const statusOptions = isLine ? ROAD_STATUSES : isPolygon ? LAND_STATUSES : [];
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!pendingShape) return;
|
||||
|
||||
const finalName = name.trim() || pendingShape.name;
|
||||
const updated: UserMarker = {
|
||||
...pendingShape,
|
||||
name: finalName,
|
||||
meta: {
|
||||
...pendingShape.meta,
|
||||
poi_type: status || undefined,
|
||||
notes: notes.trim() || undefined,
|
||||
},
|
||||
};
|
||||
|
||||
onConfirm(updated);
|
||||
// Reset
|
||||
setName("");
|
||||
setStatus("");
|
||||
setNotes("");
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
setName("");
|
||||
setStatus("");
|
||||
setNotes("");
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
// Reset form when dialog opens with a new shape
|
||||
useEffect(() => {
|
||||
if (!pendingShape?.id) return;
|
||||
setName("");
|
||||
const t = pendingShape.type;
|
||||
setStatus(t === "line" ? "Regency Road" : t === "polygon" ? "SHM" : "");
|
||||
setNotes(pendingShape.meta?.notes ?? "");
|
||||
}, [pendingShape?.id]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) handleCancel(); }}>
|
||||
<DialogContent showCloseButton={false} className="sm:max-w-lg w-full max-h-[90vh] overflow-y-auto rounded-2xl p-0 gap-0">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col">
|
||||
{/* Header */}
|
||||
<DialogHeader className="px-6 pt-6 pb-4 border-b">
|
||||
<DialogTitle className="text-center text-base font-semibold">{titleLabel}</DialogTitle>
|
||||
<p className="text-center text-xs text-muted-foreground font-mono tabular-nums mt-1">
|
||||
{pendingShape ? `${pendingShape.lat.toFixed(5)}, ${pendingShape.lng.toFixed(5)}` : ""}
|
||||
</p>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-5 flex flex-col gap-5">
|
||||
{/* Name */}
|
||||
<Field label={isLine ? "Nama Jalan" : isPolygon ? "Nama Lahan" : isCircle ? "Nama Area" : "Nama Penanda"}>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={isLine ? "Contoh: Jl. Merdeka" : isPolygon ? "Contoh: Lahan Sawah A1" : isCircle ? "Contoh: Buffer Zone A" : "Contoh: Patok Batas Utara"}
|
||||
required
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Notes (optional, all types) */}
|
||||
<Field label="Catatan">
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Catatan tambahan (opsional)"
|
||||
rows={2}
|
||||
className="w-full min-w-0 rounded-lg border border-input bg-muted/50 px-2.5 py-1.5 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 resize-none"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Status selector (line / polygon only) */}
|
||||
{statusOptions.length > 0 && (
|
||||
<Field label="Status">
|
||||
<StatusSelector options={statusOptions} value={status} onChange={setStatus} />
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Auto-calculated metrics */}
|
||||
<div className={cn("grid gap-3", isCircle ? "grid-cols-2" : "grid-cols-1")}>
|
||||
{isLine && (
|
||||
<StatChip
|
||||
label="Panjang"
|
||||
value={length >= 1000
|
||||
? `${(length / 1000).toFixed(2)} km`
|
||||
: `${length.toFixed(1)} m`}
|
||||
/>
|
||||
)}
|
||||
{(isPolygon || isCircle) && (
|
||||
<StatChip
|
||||
label="Luas"
|
||||
value={area >= 10000
|
||||
? `${(area / 10000).toFixed(2)} ha`
|
||||
: `${area.toFixed(1)} m²`}
|
||||
/>
|
||||
)}
|
||||
{isCircle && (
|
||||
<StatChip label="Radius" value={`${radius.toFixed(1)} m`} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Coordinate count */}
|
||||
{(isLine || isPolygon) && coordinates.length > 0 && (
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{coordinates.length} titik koordinat
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end gap-2 px-6 py-4 border-t">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
className="h-9 rounded-full border border-border px-5 text-sm font-medium transition-colors hover:bg-muted"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim()}
|
||||
className="h-9 rounded-full bg-primary text-primary-foreground px-5 text-sm font-medium transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
Simpan & Pasang
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
// Re-export helpers for use in edit dialog and leaflet-map
|
||||
export { ROAD_STATUSES, LAND_STATUSES, calcLineLength, calcPolygonArea };
|
||||
Reference in New Issue
Block a user