import { ComponentProps, useMemo } from "react"; import { Head, router } from "@inertiajs/react"; import { AlertTriangle, BarChart3, CheckCircle2, Filter, MapPinned, RefreshCcw, UserRoundCheck, Users, } from "lucide-react"; import AppLayout from "@/layouts/app-layout"; import CrmOsmMap from "@/components/crm-osm-map"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; // Reusable StatChip dari Global Card import { StatChip } from "@/components/crm/global-card"; // Ekstrak tipe elemen array points secara aman type MapPoint = NonNullable["points"]>[number]; type Option = { id: number; name: string; code?: string; latitude?: string | number | null; longitude?: string | number | null; radius_meters?: number | null; }; type Props = { points: MapPoint[]; areas: Option[]; salesUsers: Option[]; filters: { area_id?: number | null; sales_id?: number | null }; stats: { mapped: number; missing_coordinates: number }; }; export default function CustomerMap({ points, areas, salesUsers, filters, stats, }: Props) { const areaId = filters.area_id ? String(filters.area_id) : ""; const salesId = filters.sales_id ? String(filters.sales_id) : ""; const selectedArea = areas.find((area) => String(area.id) === areaId); const selectedSales = salesUsers.find( (sales) => String(sales.id) === salesId, ); const applyFilters = (nextArea = areaId, nextSales = salesId) => { router.get( "/crm/customer-map", { area_id: nextArea || undefined, sales_id: nextSales || undefined, }, { preserveState: true, preserveScroll: true, replace: true }, ); }; const selectArea = (value: string) => { const nextArea = value === "all" ? "" : value; // Reset pilihan sales saat area diganti agar tidak mengunci filter sales dari area sebelumnya applyFilters(nextArea, ""); }; const mappedPercent = stats.mapped + stats.missing_coordinates > 0 ? Math.round( (stats.mapped / (stats.mapped + stats.missing_coordinates)) * 100, ) : 0; const number = (value: number) => new Intl.NumberFormat("id-ID").format(value || 0); // Memoisasi transformasi array areas untuk mencegah re-render peta berlebih const formattedAreas = useMemo(() => { return areas.map((area) => ({ id: area.id, name: area.name, code: area.code, lat: area.latitude == null ? null : Number(area.latitude), lng: area.longitude == null ? null : Number(area.longitude), radius_meters: area.radius_meters, })); }, [areas]); return (
{/* Page header */}
Customer Intelligence

Peta Customer

Pahami persebaran pelanggan, fokuskan kunjungan, dan bantu tim sales mengambil keputusan berbasis wilayah.

Customer terpetakan
{mappedPercent}%
{/* KPI Metrics */}
{/* Filters */}
Filter Wilayah

Pilih area dan sales untuk melihat customer yang relevan.

{(selectedArea || selectedSales) && (
{selectedArea && ( Area:{" "} {selectedArea.code ? `${selectedArea.code} — ` : ""} {selectedArea.name} )} {selectedSales && ( Sales: {selectedSales.name} )}
)}
{/* Tombol Reset hanya akan tampil saat terdapat filter terpilih */} {(selectedArea || selectedSales) && ( )} {/* Map */}
Persebaran Customer

{points.length} titik customer ditampilkan pada area yang dipilih.

Data peta aktif
); }