-
-
-
- {/* {JSON.stringify(user, null, 2)} */}
-
-
+
+ {/*
Dashboard Overview
*/}
+
+ }
+ colSpan="2"
+ rowSpan="2"
+ >
+
+
+ Chart Visualization
-
-
-
-
-
-
- );
+
+
+
}
+ >
+
+ {[1, 2, 3].map((i) => (
+
+
+
+
Order #{i}0234
+
2 mins ago
+
+
$149.99
+
+ ))}
+
+
+
+
}>
+
+ {[1, 2, 3, 4, 5].map((i) => (
+
+ {i}
+
+ ))}
+
+ +3
+
+
+
+
+
}
+ colSpan="2"
+ >
+
+
+ World Map Visualization
+
+
+
+
}
+ >
+
+ {[1, 2].map((i) => (
+
+
+
+
+
+
Team Meeting
+
Tomorrow, 10:00 AM
+
+
+ ))}
+
+
+
+
}
+ >
+
+
24
+
-12% from last week
+
+
+
+
+
}
+ >
+
+ {["Visa", "Mastercard", "PayPal"].map((method) => (
+
+ {method}
+
+ ))}
+
+
+
+
}
+ >
+
+
+ API
+ Operational
+
+
+ Database
+ Operational
+
+
+ Storage
+ Degraded
+
+
+
+
+
+ )
}
diff --git a/sigap-website/app/_components/map/controls/map-legend.tsx b/sigap-website/app/_components/map/controls/map-legend.tsx
new file mode 100644
index 0000000..42536a0
--- /dev/null
+++ b/sigap-website/app/_components/map/controls/map-legend.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { Card } from "@/app/_components/ui/card"
+import { CRIME_COLORS, CRIME_RATES } from "@/app/_utils/const/crime"
+
+type MapLegendProps = {
+ title?: string
+ position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+}
+
+export default function MapLegend({ title = "Crime Rate Legend", position = "bottom-right" }: MapLegendProps) {
+ // Define position classes
+ const positionClasses = {
+ "top-left": "top-4 left-4",
+ "top-right": "top-4 right-4",
+ "bottom-left": "bottom-4 left-4",
+ "bottom-right": "bottom-4 right-4",
+ }
+
+ return (
+
+
+ {title}
+
+ {Object.entries(CRIME_RATES).map(([key, label]) => (
+
+ ))}
+
+
+ )
+}
diff --git a/sigap-website/app/_components/map/controls/year-selector.tsx b/sigap-website/app/_components/map/controls/year-selector.tsx
new file mode 100644
index 0000000..841d30b
--- /dev/null
+++ b/sigap-website/app/_components/map/controls/year-selector.tsx
@@ -0,0 +1,25 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/app/_components/ui/select"
+
+type YearSelectorProps = {
+ years: number[]
+ selectedYear: string
+ onChange: (year: string) => void
+ className?: string
+}
+
+export default function YearSelector({ years, selectedYear, onChange, className = "" }: YearSelectorProps) {
+ return (
+
+ )
+}
diff --git a/sigap-website/app/_components/map/crime-map.tsx b/sigap-website/app/_components/map/crime-map.tsx
new file mode 100644
index 0000000..e86c12e
--- /dev/null
+++ b/sigap-website/app/_components/map/crime-map.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"
+import { Skeleton } from "@/app/_components/ui/skeleton"
+import DistrictLayer, { type DistrictFeature } from "./layers/district-layer"
+import MapLegend from "./controls/map-legend"
+import YearSelector from "./controls/year-selector"
+import CrimeMarker, { type CrimeIncident } from "./markers/crime-marker"
+import { useToast } from "@/app/_hooks/use-toast"
+import MapView from "./map"
+import { useQuery } from "@tanstack/react-query"
+import { getAvailableYears } from "@/app/(pages)/(admin)/dashboard/crime-management/crime-overview/action"
+
+const years = [2020, 2021, 2022, 2023, 2024, 2025]
+
+export default function CrimeMap() {
+ const [loading, setLoading] = useState(false)
+ const [year, setYear] = useState
(new Date().getFullYear().toString())
+ const [availableYears, setAvailableYears] = useState(years)
+ const [districtData, setDistrictData] = useState([])
+ const [crimeIncidents, setCrimeIncidents] = useState([])
+ const [showIncidents, setShowIncidents] = useState(false)
+ const { toast } = useToast()
+
+ // fetch available years (example function)
+ // const { data: year } = useQuery({
+ // queryKey: ["available-years"],
+ // queryFn: getAvailableYears,
+ // })
+
+ // Fetch crime incidents (example function)
+ const fetchCrimeIncidents = async (districtId: string) => {
+ try {
+ // This would be replaced with an actual API call
+ // const response = await fetch(`/api/crime-incidents?districtId=${districtId}&year=${year}`)
+ // const data = await response.json()
+
+ // For demonstration, we'll create some sample data
+ const sampleIncidents: CrimeIncident[] = [
+ {
+ id: "1",
+ latitude: -8.1842 + (Math.random() - 0.5) * 0.1,
+ longitude: 113.7031 + (Math.random() - 0.5) * 0.1,
+ description: "Theft incident",
+ date: "2023-05-15",
+ category: "Theft",
+ },
+ {
+ id: "2",
+ latitude: -8.1842 + (Math.random() - 0.5) * 0.1,
+ longitude: 113.7031 + (Math.random() - 0.5) * 0.1,
+ description: "Vandalism",
+ date: "2023-06-22",
+ category: "Property Crime",
+ },
+ {
+ id: "3",
+ latitude: -8.1842 + (Math.random() - 0.5) * 0.1,
+ longitude: 113.7031 + (Math.random() - 0.5) * 0.1,
+ description: "Assault",
+ date: "2023-07-10",
+ category: "Violent Crime",
+ },
+ ]
+
+ setCrimeIncidents(sampleIncidents)
+ setShowIncidents(true)
+ } catch (error) {
+ console.error("Error fetching crime incidents:", error)
+ }
+ }
+
+ const handleDistrictClick = (feature: any) => {
+ const districtId = feature.properties.id
+ const districtName = feature.properties.name
+
+ toast({
+ title: `Selected: ${districtName}`,
+ description: "Loading crime incidents for this district...",
+ })
+
+ fetchCrimeIncidents(districtId)
+ }
+
+ const handleIncidentClick = (incident: CrimeIncident) => {
+ toast({
+ title: "Crime Incident",
+ description: `${incident.description} on ${incident.date}`,
+ })
+ }
+
+ return (
+
+ {/*
+ Crime Rate Map - Jember Regency
+
+ */}
+
+ {loading ? (
+
+ ) : (
+
+
+ {/* District Layer */}
+
+
+ {/* Crime Incident Markers */}
+ {showIncidents &&
+ crimeIncidents.map((incident) => (
+
+ ))}
+
+ {/* Map Legend */}
+ {/* */}
+
+
+ )}
+
+
+ )
+}
diff --git a/sigap-website/app/_components/map/layers/district-layer.tsx b/sigap-website/app/_components/map/layers/district-layer.tsx
new file mode 100644
index 0000000..2e655bc
--- /dev/null
+++ b/sigap-website/app/_components/map/layers/district-layer.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import { useEffect, useMemo } from "react"
+import { Layer, Source, useMap, Popup } from "react-map-gl/mapbox"
+import { useState } from "react"
+import { IGeoJSONPolygon } from "@/app/_utils/types/map"
+import { CRIME_COLORS, CRIME_RATES } from "@/app/_utils/const/crime"
+
+export type DistrictFeature = {
+ id: string
+ name: string
+ cityName: string
+ code: string
+ polygon: IGeoJSONPolygon
+ crimeRate: "low" | "medium" | "high" | "no_data"
+ crimeCount: number
+ year: number
+}
+
+type DistrictLayerProps = {
+ data: DistrictFeature[]
+ visible?: boolean
+ onClick?: (feature: any) => void
+}
+
+type hoverInfoType = {
+ feature: {
+ properties: {
+ crimeRate: "low" | "medium" | "high" | "no_data"
+ name: string
+ cityName: string
+ crimeCount: number
+ }
+ geometry: {
+ coordinates: number[][][]
+ }
+ }
+ x: number
+ y: number
+}
+
+export default function DistrictLayer({ data, visible = true, onClick }: DistrictLayerProps) {
+ const { current: map } = useMap()
+ const [hoverInfo, setHoverInfo] = useState(null)
+
+ // Convert data to GeoJSON
+ const geojson = useMemo(() => {
+ return {
+ type: "FeatureCollection",
+ features: data
+ .filter((district) => district.polygon) // Only include districts with polygon data
+ .map((district) => ({
+ type: "Feature",
+ properties: {
+ id: district.id,
+ name: district.name,
+ cityName: district.cityName,
+ crimeRate: district.crimeRate,
+ crimeCount: district.crimeCount,
+ color: CRIME_COLORS[district.crimeRate],
+ },
+ geometry: district.polygon,
+ })),
+ }
+ }, [data])
+
+ // Handle hover events
+ useEffect(() => {
+ if (!map) return
+
+ const onHover = (event: any) => {
+ const { features, point } = event
+ const hoveredFeature = features && features[0]
+
+ // Update hover state
+ setHoverInfo(
+ hoveredFeature
+ ? {
+ feature: hoveredFeature,
+ x: point.x,
+ y: point.y,
+ }
+ : null,
+ )
+ }
+
+ // Change cursor on hover
+ const onMouseEnter = () => {
+ if (map) map.getCanvas().style.cursor = "pointer"
+ }
+
+ const onMouseLeave = () => {
+ if (map) map.getCanvas().style.cursor = ""
+ setHoverInfo(null)
+ }
+
+ // Add event listeners
+ map.on("mousemove", "district-fills", onHover)
+ map.on("mouseenter", "district-fills", onMouseEnter)
+ map.on("mouseleave", "district-fills", onMouseLeave)
+ map.on("click", "district-fills", (e) => {
+ if (onClick && e.features && e.features[0]) {
+ onClick(e.features[0])
+ }
+ })
+
+ // Clean up
+ return () => {
+ map.off("mousemove", "district-fills", onHover)
+ map.off("mouseenter", "district-fills", onMouseEnter)
+ map.off("mouseleave", "district-fills", onMouseLeave)
+ map.off("click", "district-fills", onClick as any)
+ }
+ }, [map, onClick])
+
+ if (!visible) return null
+
+ return (
+ <>
+
+
+
+
+
+ {/* Popup on hover */}
+ {hoverInfo && (
+
+
+
{hoverInfo.feature.properties.name}
+
City: {hoverInfo.feature.properties.cityName}
+
Crime Rate: {CRIME_RATES[hoverInfo.feature.properties.crimeRate]}
+
Crime Count: {hoverInfo.feature.properties.crimeCount}
+
+
+
+ );
+};
+
+export default MapView;
\ No newline at end of file
diff --git a/sigap-website/app/_components/map/markers/crime-marker.tsx b/sigap-website/app/_components/map/markers/crime-marker.tsx
new file mode 100644
index 0000000..5303302
--- /dev/null
+++ b/sigap-website/app/_components/map/markers/crime-marker.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { Marker } from "react-map-gl/mapbox"
+import { AlertTriangle } from "lucide-react"
+
+export type CrimeIncident = {
+ id: string
+ latitude: number
+ longitude: number
+ description: string
+ date: string
+ category?: string
+}
+
+type CrimeMarkerProps = {
+ incident: CrimeIncident
+ onClick?: (incident: CrimeIncident) => void
+}
+
+export default function CrimeMarker({ incident, onClick }: CrimeMarkerProps) {
+ return (
+ onClick && onClick(incident)}
+ >
+
+
+ )
+}
diff --git a/sigap-website/app/_components/map/pop-up.tsx b/sigap-website/app/_components/map/pop-up.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/sigap-website/app/_components/ui/bento-grid.tsx b/sigap-website/app/_components/ui/bento-grid.tsx
new file mode 100644
index 0000000..4870102
--- /dev/null
+++ b/sigap-website/app/_components/ui/bento-grid.tsx
@@ -0,0 +1,68 @@
+import { cn } from "@/app/_lib/utils"
+import type React from "react"
+import type { HTMLAttributes } from "react"
+
+
+interface BentoGridProps extends HTMLAttributes {
+ className?: string
+ children: React.ReactNode
+}
+
+export function BentoGrid({ className, children, ...props }: BentoGridProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+interface BentoGridItemProps extends HTMLAttributes {
+ className?: string
+ title?: string
+ description?: string
+ header?: React.ReactNode
+ icon?: React.ReactNode
+ children?: React.ReactNode
+ colSpan?: "1" | "2" | "3"
+ rowSpan?: "1" | "2" | "3"
+}
+
+export function BentoGridItem({
+ className,
+ title,
+ description,
+ header,
+ icon,
+ children,
+ colSpan = "1",
+ rowSpan = "1",
+ ...props
+}: BentoGridItemProps) {
+ return (
+
+ {header &&
{header}
}
+
+ {icon && (
+
{icon}
+ )}
+ {(title || description) && (
+
+ {title &&
{title}
}
+ {description &&
{description}
}
+
+ )}
+
+ {children &&
{children}
}
+