feat: add crime and district popups with detailed information and filtering capabilities
- Added `CrimePopup` component to display detailed information about individual crime incidents. - Introduced `DistrictPopup` component to show district-level crime statistics and demographics. - Implemented `useFilteredCrimeData` hook for filtering crime data based on selected categories. - Created `calculateCrimeStats` utility function to compute various crime statistics from raw data. - Updated package.json to include necessary dependencies for map and geocoder functionalities.
This commit is contained in:
vergiLgood1
parent
edf5013363
commit
428986c927
|
|
@ -85,12 +85,25 @@ export function usePrefetchedCrimeData(initialYear: number = 2024, initialMonth:
|
|||
const currentKey = `${selectedYear}-${selectedMonth}`
|
||||
const currentData = prefetchedData[currentKey]
|
||||
|
||||
// Add better debugging and handle potential undefined values
|
||||
// useEffect(() => {
|
||||
// if (isPrefetching) {
|
||||
// console.log("Currently prefetching data...")
|
||||
// } else {
|
||||
// console.log(`Current data for ${currentKey}:`, currentData);
|
||||
// if (!currentData) {
|
||||
// console.log("Available prefetched data keys:", Object.keys(prefetchedData));
|
||||
// }
|
||||
// }
|
||||
// }, [isPrefetching, currentKey, currentData, prefetchedData]);
|
||||
|
||||
// Ensure we always return a valid crimes array, even if empty
|
||||
return {
|
||||
availableYears,
|
||||
isYearsLoading,
|
||||
yearsError,
|
||||
crimes: currentData,
|
||||
isCrimesLoading: isPrefetching && !currentData,
|
||||
crimes: Array.isArray(currentData) ? currentData : [],
|
||||
isCrimesLoading: isPrefetching || !currentData,
|
||||
crimesError: prefetchError,
|
||||
setSelectedYear,
|
||||
setSelectedMonth,
|
||||
|
|
|
|||
|
|
@ -145,29 +145,7 @@ export async function getCrimes() {
|
|||
},
|
||||
});
|
||||
|
||||
return crimes.map((crime) => {
|
||||
return {
|
||||
id: crime.id,
|
||||
district: crime.districts.name,
|
||||
number_of_crime: crime.number_of_crime,
|
||||
level: crime.level,
|
||||
score: crime.score,
|
||||
month: crime.month,
|
||||
year: crime.year,
|
||||
incidents: crime.crime_incidents.map((incident) => {
|
||||
return {
|
||||
timestamp: incident.timestamp,
|
||||
description: incident.description,
|
||||
status: incident.status,
|
||||
category: incident.crime_categories.name,
|
||||
type: incident.crime_categories.type,
|
||||
address: incident.locations.address,
|
||||
latitude: incident.locations.latitude,
|
||||
longitude: incident.locations.longitude,
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
return crimes;
|
||||
} catch (err) {
|
||||
if (err instanceof InputParseError) {
|
||||
// return {
|
||||
|
|
@ -233,6 +211,8 @@ export async function getCrimeByYearAndMonth(
|
|||
address: true,
|
||||
land_area: true,
|
||||
year: true,
|
||||
latitude: true,
|
||||
longitude: true,
|
||||
},
|
||||
},
|
||||
demographics: {
|
||||
|
|
@ -270,46 +250,21 @@ export async function getCrimeByYearAndMonth(
|
|||
},
|
||||
});
|
||||
|
||||
return crimes.map((crime) => {
|
||||
// Process the data to transform geographics and demographics from array to single object
|
||||
const processedCrimes = crimes.map((crime) => {
|
||||
return {
|
||||
id: crime.id,
|
||||
distrcit_id: crime.district_id,
|
||||
district_name: crime.districts.name,
|
||||
number_of_crime: crime.number_of_crime,
|
||||
level: crime.level,
|
||||
score: crime.score,
|
||||
month: crime.month,
|
||||
year: crime.year,
|
||||
geographics: crime.districts.geographics.map((geo) => {
|
||||
return {
|
||||
address: geo.address,
|
||||
land_area: geo.land_area,
|
||||
year: geo.year,
|
||||
};
|
||||
}),
|
||||
demographics: crime.districts.demographics.map((demo) => {
|
||||
return {
|
||||
number_of_unemployed: demo.number_of_unemployed,
|
||||
population: demo.population,
|
||||
population_density: demo.population_density,
|
||||
year: demo.year,
|
||||
};
|
||||
}),
|
||||
incidents: crime.crime_incidents.map((incident) => {
|
||||
return {
|
||||
id: incident.id,
|
||||
timestamp: incident.timestamp,
|
||||
description: incident.description,
|
||||
status: incident.status,
|
||||
category: incident.crime_categories.name,
|
||||
type: incident.crime_categories.type,
|
||||
address: incident.locations.address,
|
||||
latitude: incident.locations.latitude,
|
||||
longitude: incident.locations.longitude,
|
||||
};
|
||||
}),
|
||||
...crime,
|
||||
districts: {
|
||||
...crime.districts,
|
||||
// Convert geographics array to single object matching the year
|
||||
geographics: crime.districts.geographics[0] || null,
|
||||
// Convert demographics array to single object matching the year
|
||||
demographics: crime.districts.demographics[0] || null,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return processedCrimes;
|
||||
} catch (err) {
|
||||
if (err instanceof InputParseError) {
|
||||
throw new InputParseError(err.message);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ function YearSelectorUI({
|
|||
return (
|
||||
<div ref={containerRef} className="mapboxgl-year-selector">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-8">
|
||||
<div className=" h-8">
|
||||
<Skeleton className="h-full w-full rounded-md" />
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -2,14 +2,12 @@
|
|||
|
||||
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 DistrictLayer, { type DistrictFeature, ICrimeData } from "./layers/district-layer"
|
||||
import MapView from "./map"
|
||||
import { Button } from "@/app/_components/ui/button"
|
||||
import { AlertCircle } from "lucide-react"
|
||||
import { getMonthName } from "@/app/_utils/common"
|
||||
import { useRef, useState, useCallback, useMemo } from "react"
|
||||
import { CrimePopup } from "./pop-up"
|
||||
import type { CrimeIncident } from "./markers/crime-marker"
|
||||
import { useRef, useState, useCallback, useMemo, useEffect } from "react"
|
||||
import { useFullscreen } from "@/app/_hooks/use-fullscreen"
|
||||
import { Overlay } from "./overlay"
|
||||
import MapLegend from "./controls/map-legend"
|
||||
|
|
@ -20,6 +18,22 @@ import MapSelectors from "./controls/map-selector"
|
|||
import TopNavigation from "./controls/map-navigations"
|
||||
import CrimeSidebar from "./sidebar/map-sidebar"
|
||||
import SidebarToggle from "./sidebar/sidebar-toggle"
|
||||
import { cn } from "@/app/_lib/utils"
|
||||
import CrimePopup from "./pop-up/crime-popup"
|
||||
|
||||
|
||||
// Updated CrimeIncident type to match the structure in crime_incidents
|
||||
export interface CrimeIncident {
|
||||
id: string
|
||||
timestamp: Date
|
||||
description: string
|
||||
status: string
|
||||
category?: string
|
||||
type?: string
|
||||
address?: string
|
||||
latitude?: number
|
||||
longitude?: number
|
||||
}
|
||||
|
||||
export default function CrimeMap() {
|
||||
// State for sidebar
|
||||
|
|
@ -66,33 +80,34 @@ export default function CrimeMap() {
|
|||
if (!crimes) return []
|
||||
if (selectedCategory === "all") return crimes
|
||||
|
||||
return crimes.map((district: { incidents: CrimeIncident[], number_of_crime: number }) => ({
|
||||
...district,
|
||||
incidents: district.incidents.filter(incident =>
|
||||
incident.category === selectedCategory
|
||||
),
|
||||
// Update number_of_crime to reflect the filtered count
|
||||
number_of_crime: district.incidents.filter(
|
||||
incident => incident.category === selectedCategory
|
||||
).length
|
||||
}))
|
||||
return crimes.map((crime: ICrimeData) => {
|
||||
const filteredIncidents = crime.crime_incidents.filter(
|
||||
incident => incident.crime_categories.name === selectedCategory
|
||||
)
|
||||
|
||||
return {
|
||||
...crime,
|
||||
crime_incidents: filteredIncidents,
|
||||
number_of_crime: filteredIncidents.length
|
||||
}
|
||||
})
|
||||
}, [crimes, selectedCategory])
|
||||
|
||||
// Extract all incidents from all districts for marker display
|
||||
const allIncidents = useMemo(() => {
|
||||
if (!filteredCrimes) return []
|
||||
|
||||
return filteredCrimes.flatMap((district: { incidents: CrimeIncident[] }) =>
|
||||
district.incidents.map((incident) => ({
|
||||
return filteredCrimes.flatMap((crime: ICrimeData) =>
|
||||
crime.crime_incidents.map((incident) => ({
|
||||
id: incident.id,
|
||||
timestamp: incident.timestamp,
|
||||
description: incident.description,
|
||||
status: incident.status,
|
||||
category: incident.category,
|
||||
type: incident.type,
|
||||
address: incident.address,
|
||||
latitude: incident.latitude,
|
||||
longitude: incident.longitude,
|
||||
category: incident.crime_categories.name,
|
||||
type: incident.crime_categories.type,
|
||||
address: incident.locations.address,
|
||||
latitude: incident.locations.latitude,
|
||||
longitude: incident.locations.longitude,
|
||||
}))
|
||||
)
|
||||
}, [filteredCrimes])
|
||||
|
|
@ -104,8 +119,40 @@ export default function CrimeMap() {
|
|||
|
||||
// Handle incident marker click
|
||||
const handleIncidentClick = (incident: CrimeIncident) => {
|
||||
setSelectedIncident(incident)
|
||||
if (!incident.longitude || !incident.latitude) {
|
||||
console.error("Invalid incident coordinates:", incident);
|
||||
return;
|
||||
}
|
||||
setSelectedIncident(incident);
|
||||
}
|
||||
|
||||
// Set up event listener for incident clicks from the district layer
|
||||
useEffect(() => {
|
||||
const handleIncidentClick = (e: CustomEvent) => {
|
||||
// console.log("Received incident_click event:", e.detail)
|
||||
if (e.detail) {
|
||||
setSelectedIncident(e.detail)
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the map container and document
|
||||
const mapContainer = mapContainerRef.current
|
||||
|
||||
// Listen on both the container and document to ensure we catch the event
|
||||
document.addEventListener('incident_click', handleIncidentClick as EventListener)
|
||||
|
||||
if (mapContainer) {
|
||||
mapContainer.addEventListener('incident_click', handleIncidentClick as EventListener)
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('incident_click', handleIncidentClick as EventListener)
|
||||
|
||||
if (mapContainer) {
|
||||
mapContainer.removeEventListener('incident_click', handleIncidentClick as EventListener)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Reset filters
|
||||
const resetFilters = useCallback(() => {
|
||||
|
|
@ -156,6 +203,10 @@ export default function CrimeMap() {
|
|||
</div>
|
||||
) : (
|
||||
<div className="relative h-[600px]" ref={mapContainerRef}>
|
||||
<div className={cn(
|
||||
"transition-all duration-300 ease-in-out",
|
||||
!sidebarCollapsed && isFullscreen && "ml-[400px]"
|
||||
)}>
|
||||
<MapView mapStyle="mapbox://styles/mapbox/dark-v11" className="h-[600px] w-full rounded-md">
|
||||
{/* District Layer with crime data */}
|
||||
<DistrictLayer
|
||||
|
|
@ -167,13 +218,20 @@ export default function CrimeMap() {
|
|||
/>
|
||||
|
||||
{/* Popup for selected incident */}
|
||||
{selectedIncident && (
|
||||
{selectedIncident && selectedIncident.longitude !== undefined && selectedIncident.latitude !== undefined && (
|
||||
<>
|
||||
{console.log("Rendering CrimePopup with:", selectedIncident)}
|
||||
<CrimePopup
|
||||
longitude={selectedIncident.longitude}
|
||||
latitude={selectedIncident.latitude}
|
||||
onClose={() => setSelectedIncident(null)}
|
||||
crime={selectedIncident}
|
||||
crime={{
|
||||
...selectedIncident,
|
||||
latitude: selectedIncident.latitude,
|
||||
longitude: selectedIncident.longitude
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Components that are only visible in fullscreen mode */}
|
||||
|
|
@ -196,14 +254,20 @@ export default function CrimeMap() {
|
|||
</div>
|
||||
</Overlay>
|
||||
|
||||
{/* Sidebar component without overlay */}
|
||||
<CrimeSidebar defaultCollapsed={sidebarCollapsed} />
|
||||
{/* Pass selectedCategory, selectedYear, and selectedMonth to the sidebar */}
|
||||
<CrimeSidebar
|
||||
defaultCollapsed={sidebarCollapsed}
|
||||
selectedCategory={selectedCategory}
|
||||
selectedYear={selectedYear}
|
||||
selectedMonth={selectedMonth}
|
||||
/>
|
||||
|
||||
<MapLegend position="bottom-right" />
|
||||
</>
|
||||
)}
|
||||
</MapView>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,89 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useState, useRef } from "react"
|
||||
import { useEffect, useState, useRef, useCallback } from "react"
|
||||
import { useMap } from "react-map-gl/mapbox"
|
||||
import { CRIME_RATE_COLORS, MAPBOX_TILESET_ID } from "@/app/_utils/const/map"
|
||||
import { DistrictPopup } from "../pop-up"
|
||||
|
||||
import { $Enums } from "@prisma/client"
|
||||
import DistrictPopup from "../pop-up/district-popup"
|
||||
|
||||
// Types for district properties
|
||||
export interface DistrictFeature {
|
||||
id: string
|
||||
name: string
|
||||
properties: Record<string, any>
|
||||
longitude?: number
|
||||
latitude?: number
|
||||
number_of_crime?: number
|
||||
level?: "low" | "medium" | "high" | "critical"
|
||||
longitude: number
|
||||
latitude: number
|
||||
number_of_crime: number
|
||||
level: $Enums.crime_rates
|
||||
demographics: {
|
||||
number_of_unemployed: number
|
||||
population: number
|
||||
population_density: number
|
||||
year: number
|
||||
}
|
||||
geographics: {
|
||||
address: string
|
||||
land_area: number
|
||||
year: number
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
crime_incidents: Array<{
|
||||
id: string
|
||||
timestamp: Date
|
||||
description: string
|
||||
status: string
|
||||
category: string
|
||||
type: string
|
||||
address: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
}>
|
||||
selectedYear?: string
|
||||
selectedMonth?: string
|
||||
}
|
||||
|
||||
// Updated interface to match the structure returned by getCrimeByYearAndMonth
|
||||
export interface ICrimeData {
|
||||
id: string
|
||||
district_id: string
|
||||
districts: {
|
||||
name: string
|
||||
geographics: {
|
||||
address: string
|
||||
land_area: number
|
||||
year: number
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
demographics: {
|
||||
number_of_unemployed: number
|
||||
population: number
|
||||
population_density: number
|
||||
year: number
|
||||
}
|
||||
}
|
||||
number_of_crime: number
|
||||
level: $Enums.crime_rates
|
||||
score: number
|
||||
month: number
|
||||
year: number
|
||||
crime_incidents: Array<{
|
||||
id: string
|
||||
timestamp: Date
|
||||
description: string
|
||||
status: string
|
||||
crime_categories: {
|
||||
name: string
|
||||
type: string
|
||||
}
|
||||
locations: {
|
||||
address: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
}>
|
||||
}
|
||||
|
||||
// District layer props
|
||||
|
|
@ -23,14 +93,7 @@ export interface DistrictLayerProps {
|
|||
year?: string
|
||||
month?: string
|
||||
filterCategory?: string | "all"
|
||||
crimes?: Array<{
|
||||
id: string
|
||||
district_name: string
|
||||
distrcit_id?: string
|
||||
number_of_crime?: number
|
||||
level?: "low" | "medium" | "high" | "critical"
|
||||
incidents: any[]
|
||||
}>
|
||||
crimes?: ICrimeData[]
|
||||
tilesetId?: string
|
||||
}
|
||||
|
||||
|
|
@ -50,6 +113,10 @@ export default function DistrictLayer({
|
|||
y: number
|
||||
feature: any
|
||||
} | null>(null)
|
||||
|
||||
// Menggunakan useRef untuk menyimpan informasi distrik yang dipilih
|
||||
// sehingga nilainya tidak hilang saat komponen di-render ulang
|
||||
const selectedDistrictRef = useRef<DistrictFeature | null>(null)
|
||||
const [selectedDistrict, setSelectedDistrict] = useState<DistrictFeature | null>(null)
|
||||
|
||||
// Use a ref to track whether layers have been added
|
||||
|
|
@ -59,9 +126,7 @@ export default function DistrictLayer({
|
|||
const crimeDataByDistrict = crimes.reduce(
|
||||
(acc, crime) => {
|
||||
// Use district_id (which corresponds to kode_kec in the tileset) as the key
|
||||
const districtId = crime.distrcit_id || crime.district_name
|
||||
|
||||
// console.log("Mapping district:", districtId, "level:", crime.level)
|
||||
const districtId = crime.district_id
|
||||
|
||||
acc[districtId] = {
|
||||
number_of_crime: crime.number_of_crime,
|
||||
|
|
@ -69,7 +134,7 @@ export default function DistrictLayer({
|
|||
}
|
||||
return acc
|
||||
},
|
||||
{} as Record<string, { number_of_crime?: number; level?: "low" | "medium" | "high" | "critical" }>,
|
||||
{} as Record<string, { number_of_crime?: number; level?: $Enums.crime_rates }>,
|
||||
)
|
||||
|
||||
// Handle click on district
|
||||
|
|
@ -80,59 +145,128 @@ export default function DistrictLayer({
|
|||
const districtId = feature.properties.kode_kec // Using kode_kec as the unique identifier
|
||||
const crimeData = crimeDataByDistrict[districtId] || {}
|
||||
|
||||
// Get ALL crime_incidents for this district by aggregating from all matching crime records
|
||||
let crime_incidents: Array<{
|
||||
id: string
|
||||
timestamp: Date
|
||||
description: string
|
||||
status: string
|
||||
category: string
|
||||
type: string
|
||||
address: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
}> = []
|
||||
|
||||
// Find all crime data records for this district (across all months)
|
||||
const districtCrimes = crimes.filter(crime => crime.district_id === districtId)
|
||||
|
||||
console.log(`Found ${districtCrimes.length} crime data records for district ID ${districtId}`)
|
||||
|
||||
// Collect all crime incidents from all month records for this district
|
||||
districtCrimes.forEach(crimeRecord => {
|
||||
if (crimeRecord && crimeRecord.crime_incidents) {
|
||||
const incidents = crimeRecord.crime_incidents.map(incident => ({
|
||||
id: incident.id,
|
||||
timestamp: incident.timestamp,
|
||||
description: incident.description || "",
|
||||
status: incident.status || "",
|
||||
category: incident.crime_categories?.name || "",
|
||||
type: incident.crime_categories?.type || "",
|
||||
address: incident.locations?.address || "",
|
||||
latitude: incident.locations?.latitude || 0,
|
||||
longitude: incident.locations?.longitude || 0
|
||||
}))
|
||||
|
||||
crime_incidents = [...crime_incidents, ...incidents]
|
||||
}
|
||||
})
|
||||
|
||||
console.log(`Aggregated ${crime_incidents.length} total crime incidents for district`)
|
||||
|
||||
// Get demographics and geographics from the first record (should be the same across all records)
|
||||
const firstDistrictCrime = districtCrimes.length > 0 ? districtCrimes[0] : null
|
||||
const demographics = firstDistrictCrime?.districts.demographics
|
||||
const geographics = firstDistrictCrime?.districts.geographics
|
||||
|
||||
// Make sure we have valid coordinates from the click event
|
||||
const clickLng = e.lngLat ? e.lngLat.lng : null
|
||||
const clickLat = e.lngLat ? e.lngLat.lat : null
|
||||
|
||||
if (!geographics) {
|
||||
console.error("Missing geographics data for district:", districtId)
|
||||
return
|
||||
}
|
||||
|
||||
if (!demographics) {
|
||||
console.error("Missing demographics data for district:", districtId)
|
||||
return
|
||||
}
|
||||
|
||||
// Create a complete district object ensuring all required properties are present
|
||||
const district: DistrictFeature = {
|
||||
id: districtId,
|
||||
name: feature.properties.nama || feature.properties.kecamatan,
|
||||
name: feature.properties.nama || feature.properties.kecamatan || "Unknown District",
|
||||
properties: feature.properties,
|
||||
longitude: e.lngLat.lng,
|
||||
latitude: e.lngLat.lat,
|
||||
...crimeData,
|
||||
longitude: geographics.longitude || clickLng || 0,
|
||||
latitude: geographics.latitude || clickLat || 0,
|
||||
// Use the total crime count across all months
|
||||
number_of_crime: crimeData.number_of_crime || 0,
|
||||
// Use the level from the currently selected month/year (or default to low)
|
||||
level: crimeData.level || $Enums.crime_rates.low,
|
||||
demographics,
|
||||
geographics,
|
||||
// Include all aggregated crime incidents
|
||||
crime_incidents: crime_incidents || [],
|
||||
selectedYear: year,
|
||||
selectedMonth: month
|
||||
}
|
||||
|
||||
if (!district.longitude || !district.latitude) {
|
||||
console.error("Invalid district coordinates:", district);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Selected district:", district);
|
||||
console.log(`Selected district has ${district.crime_incidents?.length || 0} crime_incidents out of ${district.number_of_crime} total crimes`);
|
||||
|
||||
// Set the reference BEFORE handling the onClick or setState
|
||||
selectedDistrictRef.current = district;
|
||||
|
||||
if (onClick) {
|
||||
onClick(district)
|
||||
onClick(district);
|
||||
} else {
|
||||
setSelectedDistrict(district)
|
||||
setSelectedDistrict(district);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle mouse move for hover effect
|
||||
const handleMouseMove = (e: any) => {
|
||||
if (!map || !e.features || e.features.length === 0) return
|
||||
// Pastikan event handler klik selalu diperbarui
|
||||
// dan re-attach setiap kali ada perubahan data
|
||||
useEffect(() => {
|
||||
if (!map || !visible || !map.getMap().getLayer("district-fill")) return;
|
||||
|
||||
const feature = e.features[0]
|
||||
const districtId = feature.properties.kode_kec // Using kode_kec as the unique identifier
|
||||
const crimeData = crimeDataByDistrict[districtId] || {}
|
||||
// Re-attach click handler
|
||||
map.off("click", "district-fill", handleClick);
|
||||
map.on("click", "district-fill", handleClick);
|
||||
|
||||
// console.log("Hover district:", districtId, "found data:", crimeData)
|
||||
console.log("Re-attached click handler, current district:", selectedDistrict?.name || "None");
|
||||
|
||||
// Enhance feature with crime data
|
||||
feature.properties = {
|
||||
...feature.properties,
|
||||
...crimeData,
|
||||
}
|
||||
|
||||
setHoverInfo({
|
||||
x: e.point.x,
|
||||
y: e.point.y,
|
||||
feature: feature,
|
||||
})
|
||||
return () => {
|
||||
if (map) {
|
||||
map.off("click", "district-fill", handleClick);
|
||||
}
|
||||
};
|
||||
}, [map, visible, crimes, filterCategory, year, month]);
|
||||
|
||||
// Add district layer to the map when it's loaded
|
||||
useEffect(() => {
|
||||
if (!map || !visible) return
|
||||
if (!map || !visible) return;
|
||||
|
||||
// Handler for style load event
|
||||
const onStyleLoad = () => {
|
||||
// Skip if map is not available
|
||||
if (!map) return
|
||||
if (!map) return;
|
||||
|
||||
try {
|
||||
// Check if the source already exists to prevent duplicates
|
||||
if (!map.getMap().getSource("districts")) {
|
||||
// Get the first symbol layer ID from the map style
|
||||
// This ensures our layers appear below labels and POIs
|
||||
const layers = map.getStyle().layers
|
||||
let firstSymbolId: string | undefined
|
||||
for (const layer of layers) {
|
||||
|
|
@ -142,13 +276,11 @@ export default function DistrictLayer({
|
|||
}
|
||||
}
|
||||
|
||||
// Add the vector tile source
|
||||
map.getMap().addSource("districts", {
|
||||
type: "vector",
|
||||
url: `mapbox://${tilesetId}`,
|
||||
})
|
||||
|
||||
// Create the dynamic fill color expression based on crime data
|
||||
const fillColorExpression: any = [
|
||||
"case",
|
||||
["has", "kode_kec"],
|
||||
|
|
@ -156,7 +288,6 @@ export default function DistrictLayer({
|
|||
"match",
|
||||
["get", "kode_kec"],
|
||||
...Object.entries(crimeDataByDistrict).flatMap(([districtId, data]) => {
|
||||
console.log("Initial color setting for:", districtId, "level:", data.level)
|
||||
return [
|
||||
districtId,
|
||||
data.level === "low"
|
||||
|
|
@ -173,10 +304,7 @@ export default function DistrictLayer({
|
|||
CRIME_RATE_COLORS.default,
|
||||
]
|
||||
|
||||
// Only add layers if they don't already exist
|
||||
if (!map.getMap().getLayer("district-fill")) {
|
||||
// Add the fill layer for districts with dynamic colors from the start
|
||||
// Insert below the first symbol layer to preserve Mapbox default layers
|
||||
map.getMap().addLayer(
|
||||
{
|
||||
id: "district-fill",
|
||||
|
|
@ -184,16 +312,15 @@ export default function DistrictLayer({
|
|||
source: "districts",
|
||||
"source-layer": "Districts",
|
||||
paint: {
|
||||
"fill-color": fillColorExpression, // Apply colors based on crime data
|
||||
"fill-color": fillColorExpression,
|
||||
"fill-opacity": 0.6,
|
||||
},
|
||||
},
|
||||
firstSymbolId,
|
||||
) // Add before the first symbol layer
|
||||
)
|
||||
}
|
||||
|
||||
if (!map.getMap().getLayer("district-line")) {
|
||||
// Add the line layer for district borders
|
||||
map.getMap().addLayer(
|
||||
{
|
||||
id: "district-line",
|
||||
|
|
@ -210,93 +337,34 @@ export default function DistrictLayer({
|
|||
)
|
||||
}
|
||||
|
||||
// if (!map.getMap().getLayer("district-labels")) {
|
||||
// // Add district labels with improved visibility and responsive sizing
|
||||
// map.getMap().addLayer(
|
||||
// {
|
||||
// id: "district-labels",
|
||||
// type: "symbol",
|
||||
// source: "districts",
|
||||
// "source-layer": "Districts",
|
||||
// layout: {
|
||||
// "text-field": ["get", "nama"],
|
||||
// "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
|
||||
// // Make text size responsive to zoom level
|
||||
// "text-size": [
|
||||
// "interpolate",
|
||||
// ["linear"],
|
||||
// ["zoom"],
|
||||
// 9,
|
||||
// 8, // At zoom level 9, size 8px
|
||||
// 12,
|
||||
// 12, // At zoom level 12, size 12px
|
||||
// 15,
|
||||
// 14, // At zoom level 15, size 14px
|
||||
// ],
|
||||
// "text-allow-overlap": false,
|
||||
// "text-ignore-placement": false,
|
||||
// // Adjust text anchor based on zoom level
|
||||
// "text-anchor": "center",
|
||||
// "text-justify": "center",
|
||||
// "text-max-width": 8,
|
||||
// // Show labels only at certain zoom levels
|
||||
// "text-optional": true,
|
||||
// "symbol-sort-key": ["get", "kode_kec"], // Sort labels by district code
|
||||
// "symbol-z-order": "source",
|
||||
// },
|
||||
// paint: {
|
||||
// "text-color": "#000000",
|
||||
// "text-halo-color": "#ffffff",
|
||||
// "text-halo-width": 2,
|
||||
// "text-halo-blur": 1,
|
||||
// // Fade in text opacity based on zoom level
|
||||
// "text-opacity": [
|
||||
// "interpolate",
|
||||
// ["linear"],
|
||||
// ["zoom"],
|
||||
// 8,
|
||||
// 0, // Fully transparent at zoom level 8
|
||||
// 9,
|
||||
// 0.6, // 60% opacity at zoom level 9
|
||||
// 10,
|
||||
// 1.0, // Fully opaque at zoom level 10
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// firstSymbolId,
|
||||
// )
|
||||
// }
|
||||
|
||||
// Create a source for clustered incident markers
|
||||
if (crimes.length > 0 && !map.getMap().getSource("crime-incidents")) {
|
||||
// Collect all incidents from all districts
|
||||
const allIncidents = crimes.flatMap((crime) => {
|
||||
// Apply category filter if specified
|
||||
let filteredIncidents = crime.incidents;
|
||||
|
||||
let filteredIncidents = crime.crime_incidents
|
||||
|
||||
if (filterCategory !== "all") {
|
||||
filteredIncidents = crime.incidents.filter(
|
||||
incident => incident.category === filterCategory
|
||||
);
|
||||
filteredIncidents = crime.crime_incidents.filter(
|
||||
incident => incident.crime_categories.name === filterCategory
|
||||
)
|
||||
}
|
||||
|
||||
return filteredIncidents.map((incident) => ({
|
||||
type: "Feature" as const,
|
||||
properties: {
|
||||
id: incident.id,
|
||||
district: crime.district_name,
|
||||
category: incident.category,
|
||||
incidentType: incident.type,
|
||||
district: crime.districts.name,
|
||||
category: incident.crime_categories.name,
|
||||
incidentType: incident.crime_categories.type,
|
||||
level: crime.level,
|
||||
description: incident.description,
|
||||
},
|
||||
geometry: {
|
||||
type: "Point" as const,
|
||||
coordinates: [incident.longitude, incident.latitude],
|
||||
coordinates: [incident.locations.longitude, incident.locations.latitude],
|
||||
},
|
||||
}));
|
||||
});
|
||||
}))
|
||||
})
|
||||
|
||||
// Add a clustered GeoJSON source for incidents
|
||||
map.getMap().addSource("crime-incidents", {
|
||||
type: "geojson",
|
||||
data: {
|
||||
|
|
@ -306,11 +374,9 @@ export default function DistrictLayer({
|
|||
cluster: true,
|
||||
clusterMaxZoom: 14,
|
||||
clusterRadius: 50,
|
||||
});
|
||||
})
|
||||
|
||||
// Only add layers if they don't already exist
|
||||
if (!map.getMap().getLayer("clusters")) {
|
||||
// Add a layer for the clusters - place below default symbol layers
|
||||
map.getMap().addLayer(
|
||||
{
|
||||
id: "clusters",
|
||||
|
|
@ -321,20 +387,20 @@ export default function DistrictLayer({
|
|||
"circle-color": [
|
||||
"step",
|
||||
["get", "point_count"],
|
||||
"#51bbd6", // Blue for small clusters
|
||||
"#51bbd6",
|
||||
5,
|
||||
"#f1f075", // Yellow for medium clusters
|
||||
"#f1f075",
|
||||
15,
|
||||
"#f28cb1", // Pink for large clusters
|
||||
"#f28cb1",
|
||||
],
|
||||
"circle-radius": [
|
||||
"step",
|
||||
["get", "point_count"],
|
||||
20, // Size for small clusters
|
||||
20,
|
||||
5,
|
||||
30, // Size for medium clusters
|
||||
30,
|
||||
15,
|
||||
40, // Size for large clusters
|
||||
40,
|
||||
],
|
||||
"circle-opacity": 0.75,
|
||||
},
|
||||
|
|
@ -344,7 +410,6 @@ export default function DistrictLayer({
|
|||
}
|
||||
|
||||
if (!map.getMap().getLayer("cluster-count")) {
|
||||
// Add a layer for cluster counts
|
||||
map.getMap().addLayer({
|
||||
id: "cluster-count",
|
||||
type: "symbol",
|
||||
|
|
@ -362,7 +427,6 @@ export default function DistrictLayer({
|
|||
}
|
||||
|
||||
if (!map.getMap().getLayer("unclustered-point")) {
|
||||
// Add a layer for individual incident points
|
||||
map.getMap().addLayer(
|
||||
{
|
||||
id: "unclustered-point",
|
||||
|
|
@ -380,7 +444,6 @@ export default function DistrictLayer({
|
|||
)
|
||||
}
|
||||
|
||||
// Add click handler for clusters
|
||||
map.on("click", "clusters", (e) => {
|
||||
const features = map.queryRenderedFeatures(e.point, { layers: ["clusters"] })
|
||||
|
||||
|
|
@ -388,7 +451,6 @@ export default function DistrictLayer({
|
|||
|
||||
const clusterId = features[0].properties?.cluster_id
|
||||
|
||||
// Get the cluster expansion zoom
|
||||
; (map.getSource("crime-incidents") as mapboxgl.GeoJSONSource).getClusterExpansionZoom(
|
||||
clusterId,
|
||||
(err, zoom) => {
|
||||
|
|
@ -402,7 +464,6 @@ export default function DistrictLayer({
|
|||
)
|
||||
})
|
||||
|
||||
// Show pointer cursor on clusters and points
|
||||
map.on("mouseenter", "clusters", () => {
|
||||
map.getCanvas().style.cursor = "pointer"
|
||||
})
|
||||
|
|
@ -420,19 +481,14 @@ export default function DistrictLayer({
|
|||
})
|
||||
}
|
||||
|
||||
// Set event handlers
|
||||
map.on("click", "district-fill", handleClick)
|
||||
map.on("mousemove", "district-fill", handleMouseMove)
|
||||
map.on("mouseleave", "district-fill", () => setHoverInfo(null))
|
||||
// Rebind the click event listener for "district-fill"
|
||||
map.on("click", "district-fill", handleClick);
|
||||
|
||||
// Mark layers as added
|
||||
layersAdded.current = true
|
||||
console.log("District layers added successfully")
|
||||
// Ensure hover info is cleared when leaving the layer
|
||||
map.on("mouseleave", "district-fill", () => setHoverInfo(null));
|
||||
|
||||
layersAdded.current = true;
|
||||
} else {
|
||||
// If the source already exists, just update the data
|
||||
console.log("District source already exists, updating data")
|
||||
|
||||
// Update the district-fill layer with new crime data if it exists
|
||||
if (map.getMap().getLayer("district-fill")) {
|
||||
map.getMap().setPaintProperty("district-fill", "fill-color", [
|
||||
"case",
|
||||
|
|
@ -461,49 +517,37 @@ export default function DistrictLayer({
|
|||
} catch (error) {
|
||||
console.error("Error adding district layers:", error)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// If the map's style is already loaded, add the layers immediately
|
||||
if (map.isStyleLoaded()) {
|
||||
onStyleLoad()
|
||||
onStyleLoad();
|
||||
} else {
|
||||
// Otherwise, wait for the style.load event
|
||||
map.once("style.load", onStyleLoad)
|
||||
map.once("style.load", onStyleLoad);
|
||||
}
|
||||
|
||||
// Cleanup function
|
||||
return () => {
|
||||
if (map) {
|
||||
// Only remove event listeners, not the layers themselves
|
||||
map.off("click", "district-fill", handleClick)
|
||||
map.off("mousemove", "district-fill", handleMouseMove)
|
||||
map.off("mouseleave", "district-fill", () => setHoverInfo(null))
|
||||
// Remove the click event listener when the component unmounts or dependencies change
|
||||
map.off("click", "district-fill", handleClick);
|
||||
|
||||
// We're not removing the layers or sources here to avoid disrupting the map
|
||||
// This prevents the issue of removing default layers
|
||||
}
|
||||
}
|
||||
}, [map, visible, tilesetId, crimes, filterCategory])
|
||||
};
|
||||
}, [map, visible, tilesetId, crimes, filterCategory, year, month]);
|
||||
|
||||
// Update the crime data when it changes
|
||||
useEffect(() => {
|
||||
if (!map || !layersAdded.current) return
|
||||
|
||||
console.log("Updating district colors with data:", crimeDataByDistrict)
|
||||
|
||||
// Update the district-fill layer with new crime data
|
||||
try {
|
||||
// Check if the layer exists before updating it
|
||||
if (map.getMap().getLayer("district-fill")) {
|
||||
// We need to update the layer paint property to correctly apply colors
|
||||
map.getMap().setPaintProperty("district-fill", "fill-color", [
|
||||
"case",
|
||||
["has", "kode_kec"],
|
||||
[
|
||||
"match",
|
||||
["get", "kode_kec"],
|
||||
...Object.entries(crimeDataByDistrict).flatMap(([districtId, data]) => {
|
||||
console.log("Setting color for:", districtId, "level:", data.level)
|
||||
// Create a safety check for empty or invalid data
|
||||
const colorEntries = Object.entries(crimeDataByDistrict).flatMap(([districtId, data]) => {
|
||||
if (!data || !data.level) {
|
||||
return [
|
||||
districtId,
|
||||
CRIME_RATE_COLORS.default
|
||||
]
|
||||
}
|
||||
|
||||
return [
|
||||
districtId,
|
||||
data.level === "low"
|
||||
|
|
@ -514,65 +558,208 @@ export default function DistrictLayer({
|
|||
? CRIME_RATE_COLORS.high
|
||||
: CRIME_RATE_COLORS.default,
|
||||
]
|
||||
}),
|
||||
})
|
||||
|
||||
const fillColorExpression = [
|
||||
"case",
|
||||
["has", "kode_kec"],
|
||||
[
|
||||
"match",
|
||||
["get", "kode_kec"],
|
||||
...colorEntries,
|
||||
CRIME_RATE_COLORS.default,
|
||||
],
|
||||
CRIME_RATE_COLORS.default,
|
||||
] as any)
|
||||
] as any
|
||||
|
||||
map.getMap().setPaintProperty("district-fill", "fill-color", fillColorExpression)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating district layer:", error)
|
||||
}
|
||||
}, [map, crimes])
|
||||
}, [map, crimes, crimeDataByDistrict])
|
||||
|
||||
// Update the incident data when it changes
|
||||
useEffect(() => {
|
||||
if (!map || !map.getMap().getSource("crime-incidents")) return;
|
||||
if (!map || !map.getMap().getSource("crime-incidents")) return
|
||||
|
||||
try {
|
||||
// Get all incidents, filtered by category if needed
|
||||
const allIncidents = crimes.flatMap((crime) => {
|
||||
// Make sure we handle cases where crime_incidents might be undefined
|
||||
if (!crime.crime_incidents) return []
|
||||
|
||||
// Apply category filter if specified
|
||||
let filteredIncidents = crime.incidents;
|
||||
let filteredIncidents = crime.crime_incidents
|
||||
|
||||
if (filterCategory !== "all") {
|
||||
filteredIncidents = crime.incidents.filter(
|
||||
incident => incident.category === filterCategory
|
||||
);
|
||||
filteredIncidents = crime.crime_incidents.filter(
|
||||
incident => incident.crime_categories &&
|
||||
incident.crime_categories.name === filterCategory
|
||||
)
|
||||
}
|
||||
|
||||
return filteredIncidents.map((incident) => ({
|
||||
return filteredIncidents.map((incident) => {
|
||||
// Handle possible null/undefined values
|
||||
if (!incident.locations) {
|
||||
console.warn("Missing location for incident:", incident.id)
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
type: "Feature" as const,
|
||||
properties: {
|
||||
id: incident.id,
|
||||
district: crime.district_name,
|
||||
category: incident.category,
|
||||
incidentType: incident.type,
|
||||
level: crime.level,
|
||||
description: incident.description,
|
||||
district: crime.districts?.name || "Unknown",
|
||||
category: incident.crime_categories?.name || "Unknown",
|
||||
incidentType: incident.crime_categories?.type || "Unknown",
|
||||
level: crime.level || "low",
|
||||
description: incident.description || "",
|
||||
},
|
||||
geometry: {
|
||||
type: "Point" as const,
|
||||
coordinates: [incident.longitude, incident.latitude],
|
||||
coordinates: [
|
||||
incident.locations.longitude || 0,
|
||||
incident.locations.latitude || 0
|
||||
],
|
||||
},
|
||||
}));
|
||||
}
|
||||
}).filter(Boolean) // Remove null values
|
||||
});
|
||||
|
||||
// Update the data source
|
||||
(map.getMap().getSource("crime-incidents") as mapboxgl.GeoJSONSource).setData({
|
||||
type: "FeatureCollection",
|
||||
features: allIncidents,
|
||||
});
|
||||
features: allIncidents as GeoJSON.Feature[],
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error updating incident data:", error);
|
||||
console.error("Error updating incident data:", error)
|
||||
}
|
||||
}, [map, crimes, filterCategory]);
|
||||
}, [map, crimes, filterCategory])
|
||||
|
||||
// Effect khusus untuk memastikan state selectedDistrict dipertahankan
|
||||
// ketika data berubah (tahun/bulan diubah)
|
||||
useEffect(() => {
|
||||
// Jika kita memiliki district yang dipilih dalam ref, pastikan
|
||||
// state juga diperbarui dengan data terbaru
|
||||
if (selectedDistrictRef.current) {
|
||||
// Cari crime data terbaru untuk district yang dipilih
|
||||
const districtId = selectedDistrictRef.current.id;
|
||||
const crimeData = crimeDataByDistrict[districtId] || {};
|
||||
|
||||
// Cari data district terkini
|
||||
const districtCrime = crimes.find(crime => crime.district_id === districtId);
|
||||
|
||||
// Perbarui data district dengan informasi terkini
|
||||
if (districtCrime) {
|
||||
const demographics = districtCrime.districts.demographics;
|
||||
const geographics = districtCrime.districts.geographics;
|
||||
|
||||
// Filter crime_incidents
|
||||
const crime_incidents = districtCrime.crime_incidents
|
||||
.filter(incident =>
|
||||
filterCategory === "all" || incident.crime_categories.name === filterCategory
|
||||
)
|
||||
.map(incident => ({
|
||||
id: incident.id,
|
||||
timestamp: incident.timestamp,
|
||||
description: incident.description,
|
||||
status: incident.status,
|
||||
category: incident.crime_categories.name,
|
||||
type: incident.crime_categories.type,
|
||||
address: incident.locations.address,
|
||||
latitude: incident.locations.latitude,
|
||||
longitude: incident.locations.longitude
|
||||
}));
|
||||
|
||||
// Buat district object baru dengan data terkini
|
||||
const updatedDistrict: DistrictFeature = {
|
||||
...selectedDistrictRef.current,
|
||||
...crimeData,
|
||||
demographics,
|
||||
geographics,
|
||||
crime_incidents,
|
||||
selectedYear: year,
|
||||
selectedMonth: month
|
||||
};
|
||||
|
||||
// Perbarui ref tetapi BUKAN state di sini
|
||||
selectedDistrictRef.current = updatedDistrict;
|
||||
|
||||
// Gunakan functional update untuk menghindari loop
|
||||
// Hanya update jika berbeda dari state sebelumnya
|
||||
setSelectedDistrict(prevDistrict => {
|
||||
// Jika sudah sama, tidak perlu update
|
||||
if (prevDistrict?.id === updatedDistrict.id &&
|
||||
prevDistrict?.selectedYear === updatedDistrict.selectedYear &&
|
||||
prevDistrict?.selectedMonth === updatedDistrict.selectedMonth) {
|
||||
return prevDistrict;
|
||||
}
|
||||
return updatedDistrict;
|
||||
});
|
||||
|
||||
console.log("Updated selected district with new data:", updatedDistrict.name);
|
||||
}
|
||||
}
|
||||
}, [crimes, filterCategory, year, month]); // hapus crimeDataByDistrict dari dependencies
|
||||
|
||||
const handleIncidentClick = useCallback((e: any) => {
|
||||
if (!map) return;
|
||||
|
||||
// Try to query for crime_incidents at the click location
|
||||
const features = map.queryRenderedFeatures(e.point, { layers: ["unclustered-point"] })
|
||||
if (!features || features.length === 0) return
|
||||
|
||||
const incident = features[0]
|
||||
if (!incident.properties) return
|
||||
|
||||
// Prevent the click from propagating to other layers
|
||||
e.originalEvent.stopPropagation()
|
||||
|
||||
// Extract the incident details from the feature properties
|
||||
const incidentDetails = {
|
||||
id: incident.properties.id,
|
||||
district: incident.properties.district,
|
||||
category: incident.properties.category,
|
||||
type: incident.properties.incidentType,
|
||||
description: incident.properties.description,
|
||||
status: incident.properties?.status || "Unknown",
|
||||
longitude: (incident.geometry as any).coordinates[0],
|
||||
latitude: (incident.geometry as any).coordinates[1],
|
||||
timestamp: new Date(),
|
||||
}
|
||||
|
||||
// Dispatch the custom event to the map container element directly
|
||||
const customEvent = new CustomEvent('incident_click', {
|
||||
detail: incidentDetails,
|
||||
bubbles: true // Make sure the event bubbles up
|
||||
})
|
||||
|
||||
if (map.getMap().getCanvas()) {
|
||||
map.getMap().getCanvas().dispatchEvent(customEvent)
|
||||
} else {
|
||||
document.dispatchEvent(customEvent) // Fallback
|
||||
}
|
||||
}, [map]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!map || !visible) return;
|
||||
|
||||
// Add click handler for individual incident points
|
||||
if (map.getMap().getLayer("unclustered-point")) {
|
||||
map.on("click", "unclustered-point", handleIncidentClick)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (map && map.getMap().getLayer("unclustered-point")) {
|
||||
map.off("click", "unclustered-point", handleIncidentClick)
|
||||
}
|
||||
}
|
||||
}, [map, visible, handleIncidentClick]);
|
||||
|
||||
if (!visible) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hover tooltip */}
|
||||
{hoverInfo && (
|
||||
{/* {hoverInfo && (
|
||||
<div
|
||||
className="absolute z-10 bg-white rounded-md shadow-md px-3 py-2 pointer-events-none"
|
||||
style={{
|
||||
|
|
@ -585,26 +772,29 @@ export default function DistrictLayer({
|
|||
</p>
|
||||
{hoverInfo.feature.properties.number_of_crime !== undefined && (
|
||||
<p className="text-xs text-gray-600">
|
||||
{hoverInfo.feature.properties.number_of_crime} incidents
|
||||
{hoverInfo.feature.properties.number_of_crime} crime_incidents
|
||||
{hoverInfo.feature.properties.level && (
|
||||
<span className="ml-2 text-xs font-semibold text-gray-500">({hoverInfo.feature.properties.level})</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
{/* District popup */}
|
||||
{selectedDistrict && selectedDistrict.longitude && selectedDistrict.latitude && (
|
||||
{selectedDistrictRef.current ? (
|
||||
<DistrictPopup
|
||||
longitude={selectedDistrict.longitude}
|
||||
latitude={selectedDistrict.latitude}
|
||||
onClose={() => setSelectedDistrict(null)}
|
||||
district={selectedDistrict}
|
||||
longitude={selectedDistrictRef.current.longitude || 0}
|
||||
latitude={selectedDistrictRef.current.latitude || 0}
|
||||
onClose={() => {
|
||||
selectedDistrictRef.current = null;
|
||||
setSelectedDistrict(null);
|
||||
}}
|
||||
district={selectedDistrictRef.current}
|
||||
year={year}
|
||||
month={month}
|
||||
filterCategory={filterCategory}
|
||||
/>
|
||||
)}
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState, useCallback } from "react"
|
||||
import { useState, useCallback, useRef } from "react"
|
||||
import { type ViewState, Map, type MapRef, NavigationControl, GeolocateControl } from "react-map-gl/mapbox"
|
||||
import { FullscreenControl } from "react-map-gl/mapbox"
|
||||
import { BASE_LATITUDE, BASE_LONGITUDE, BASE_ZOOM, MAPBOX_STYLES, type MapboxStyle } from "@/app/_utils/const/map"
|
||||
import "mapbox-gl/dist/mapbox-gl.css"
|
||||
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
|
||||
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
|
||||
import mapboxgl from "mapbox-gl"
|
||||
|
||||
interface MapViewProps {
|
||||
children?: React.ReactNode
|
||||
|
|
@ -29,7 +32,8 @@ export default function MapView({
|
|||
mapboxApiAccessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN,
|
||||
onMoveEnd,
|
||||
}: MapViewProps) {
|
||||
const [mapRef, setMapRef] = useState<MapRef | null>(null)
|
||||
const mapContainerRef = useRef<MapRef | null>(null);
|
||||
const mapRef = useRef<MapRef | null>(null);
|
||||
|
||||
const defaultViewState: Partial<ViewState> = {
|
||||
longitude: BASE_LONGITUDE,
|
||||
|
|
@ -40,6 +44,32 @@ export default function MapView({
|
|||
...initialViewState,
|
||||
}
|
||||
|
||||
const geocoder = new MapboxGeocoder(
|
||||
{
|
||||
accessToken: mapboxApiAccessToken!,
|
||||
mapboxgl: mapboxgl as any, // Type assertion to bypass type checking
|
||||
marker: false,
|
||||
placeholder: "Search for places",
|
||||
proximity: {
|
||||
longitude: BASE_LONGITUDE,
|
||||
latitude: BASE_LATITUDE,
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const fullscreenControl = new mapboxgl.FullscreenControl();
|
||||
const navigationControl = new mapboxgl.NavigationControl({
|
||||
showCompass: false,
|
||||
});
|
||||
|
||||
const handleMapLoad = useCallback(() => {
|
||||
if (mapRef.current) {
|
||||
// mapRef.current.addControl(geocoder, "top-right")
|
||||
mapRef.current.addControl(fullscreenControl, "top-right")
|
||||
mapRef.current.addControl(navigationControl, "top-right")
|
||||
}
|
||||
}, [mapRef, geocoder, fullscreenControl, navigationControl])
|
||||
|
||||
const handleMoveEnd = useCallback(
|
||||
(event: any) => {
|
||||
if (onMoveEnd) {
|
||||
|
|
@ -54,16 +84,18 @@ export default function MapView({
|
|||
<div className="flex h-full">
|
||||
<div className="relative flex-grow h-full transition-all duration-300">
|
||||
<Map
|
||||
ref={mapRef}
|
||||
mapStyle={mapStyle}
|
||||
mapboxAccessToken={mapboxApiAccessToken}
|
||||
initialViewState={defaultViewState}
|
||||
onLoad={handleMapLoad}
|
||||
onMoveEnd={handleMoveEnd}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
attributionControl={false}
|
||||
preserveDrawingBuffer={true} // This helps with fullscreen stability
|
||||
>
|
||||
<FullscreenControl position="top-right" />
|
||||
<NavigationControl position="top-right" showCompass={false} />
|
||||
{/* <FullscreenControl position="top-right" />
|
||||
<NavigationControl position="top-right" showCompass={false} /> */}
|
||||
|
||||
{children}
|
||||
</Map>
|
||||
|
|
|
|||
|
|
@ -1,184 +0,0 @@
|
|||
import { Popup } from 'react-map-gl/mapbox';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { DistrictFeature } from './layers/district-layer';
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Skeleton } from "@/app/_components/ui/skeleton";
|
||||
import { getCrimeRateInfo } from "@/app/_utils/common";
|
||||
import { CrimeIncident } from './markers/crime-marker';
|
||||
|
||||
|
||||
interface MapPopupProps {
|
||||
longitude: number
|
||||
latitude: number
|
||||
onClose: () => void
|
||||
children: React.ReactNode
|
||||
title?: string
|
||||
}
|
||||
|
||||
export function MapPopup({
|
||||
longitude,
|
||||
latitude,
|
||||
onClose,
|
||||
children,
|
||||
title
|
||||
}: MapPopupProps) {
|
||||
return (
|
||||
<Popup
|
||||
longitude={longitude}
|
||||
latitude={latitude}
|
||||
closeOnClick={false}
|
||||
onClose={onClose}
|
||||
anchor="bottom"
|
||||
offset={20}
|
||||
className="z-10"
|
||||
>
|
||||
<div className="p-3 min-w-[200px] max-w-[300px]">
|
||||
{title && <h3 className="text-sm font-medium border-b pb-1 mb-2 pr-4">{title}</h3>}
|
||||
<button
|
||||
className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100"
|
||||
onClick={onClose}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
{children}
|
||||
</div>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
||||
// Function to fetch district details - this would typically be implemented
|
||||
// to fetch more detailed information about a district
|
||||
const getDistrictDetails = async (districtId: string, year?: string, month?: string) => {
|
||||
// This would be an API call to get district details
|
||||
// For now, we'll return mock data
|
||||
return {
|
||||
category_breakdown: [
|
||||
{ category: "Theft", count: 12 },
|
||||
{ category: "Assault", count: 5 },
|
||||
{ category: "Vandalism", count: 8 }
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
export function DistrictPopup({
|
||||
longitude,
|
||||
latitude,
|
||||
onClose,
|
||||
district,
|
||||
year,
|
||||
month
|
||||
}: {
|
||||
longitude: number
|
||||
latitude: number
|
||||
onClose: () => void
|
||||
district: DistrictFeature
|
||||
year?: string
|
||||
month?: string
|
||||
}) {
|
||||
const { data: districtDetails, isLoading } = useQuery({
|
||||
queryKey: ['district-details', district.id, year, month],
|
||||
queryFn: () => getDistrictDetails(district.id, year, month),
|
||||
enabled: !!district.id
|
||||
});
|
||||
|
||||
const rateInfo = getCrimeRateInfo(district.level);
|
||||
|
||||
return (
|
||||
<MapPopup
|
||||
longitude={longitude}
|
||||
latitude={latitude}
|
||||
onClose={onClose}
|
||||
title="District Information"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-medium text-base">{district.name}</h3>
|
||||
|
||||
{district.number_of_crime !== undefined && (
|
||||
<div className="text-sm text-gray-600">
|
||||
<span className="font-medium">Total Incidents:</span> {district.number_of_crime}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{district.level && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">Crime Rate:</span>
|
||||
<span className={`inline-flex items-center rounded-full ${rateInfo.color} px-2.5 py-0.5 text-xs font-medium`}>
|
||||
{rateInfo.text}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{year && (
|
||||
<div className="text-xs text-gray-500">
|
||||
<span className="font-medium">Year:</span> {year}
|
||||
{month && <>, Month: {month}</>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="h-20 flex items-center justify-center">
|
||||
<Skeleton className="h-16 w-full" />
|
||||
</div>
|
||||
) : districtDetails?.category_breakdown && districtDetails.category_breakdown.length > 0 ? (
|
||||
<div className="mt-2">
|
||||
<h4 className="text-sm font-medium mb-1">Crime Categories:</h4>
|
||||
<div className="space-y-1">
|
||||
{districtDetails.category_breakdown.map((cat, idx) => (
|
||||
<div key={idx} className="flex justify-between text-xs">
|
||||
<span>{cat.category}</span>
|
||||
<span className="font-medium">{cat.count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="text-xs text-gray-500">
|
||||
<span className="font-medium">District ID:</span> {district.id}
|
||||
</div>
|
||||
</div>
|
||||
</MapPopup>
|
||||
)
|
||||
}
|
||||
|
||||
export function CrimePopup({
|
||||
longitude,
|
||||
latitude,
|
||||
onClose,
|
||||
crime
|
||||
}: {
|
||||
longitude: number
|
||||
latitude: number
|
||||
onClose: () => void
|
||||
crime: CrimeIncident
|
||||
}) {
|
||||
return (
|
||||
<MapPopup
|
||||
longitude={longitude}
|
||||
latitude={latitude}
|
||||
onClose={onClose}
|
||||
title="Crime Incident"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm">
|
||||
<span className="font-medium">Type:</span> {crime.category}
|
||||
</div>
|
||||
{crime.timestamp && (
|
||||
<div className="text-sm">
|
||||
<span className="font-medium">Date:</span> {new Date(crime.timestamp).toLocaleDateString()}
|
||||
</div>
|
||||
)}
|
||||
{crime.description && (
|
||||
<div className="text-sm">
|
||||
<span className="font-medium">Description:</span>
|
||||
<p className="text-xs mt-1">{crime.description}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-gray-500 mt-2">
|
||||
<span className="font-medium">ID:</span> {crime.id}
|
||||
</div>
|
||||
</div>
|
||||
</MapPopup>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import { Popup } from 'react-map-gl/mapbox'
|
||||
import { Badge } from '@/app/_components/ui/badge'
|
||||
import { Card } from '@/app/_components/ui/card'
|
||||
import { MapPin, AlertTriangle, Calendar, Clock, Tag, Bookmark, FileText } from 'lucide-react'
|
||||
|
||||
interface CrimePopupProps {
|
||||
longitude: number
|
||||
latitude: number
|
||||
onClose: () => void
|
||||
crime: {
|
||||
id: string
|
||||
district?: string
|
||||
category?: string
|
||||
type?: string
|
||||
description?: string
|
||||
status?: string
|
||||
address?: string
|
||||
timestamp?: Date
|
||||
latitude?: number
|
||||
longitude?: number
|
||||
}
|
||||
}
|
||||
|
||||
export default function CrimePopup({ longitude, latitude, onClose, crime }: CrimePopupProps) {
|
||||
console.log("CrimePopup rendering with props:", { longitude, latitude, crime })
|
||||
|
||||
const formatDate = (date?: Date) => {
|
||||
if (!date) return 'Unknown date'
|
||||
return new Date(date).toLocaleDateString()
|
||||
}
|
||||
|
||||
const formatTime = (date?: Date) => {
|
||||
if (!date) return 'Unknown time'
|
||||
return new Date(date).toLocaleTimeString()
|
||||
}
|
||||
|
||||
const getStatusBadge = (status?: string) => {
|
||||
if (!status) return <Badge variant="outline">Unknown</Badge>
|
||||
|
||||
const statusLower = status.toLowerCase()
|
||||
if (statusLower.includes('resolv') || statusLower.includes('closed')) {
|
||||
return <Badge className="bg-green-600">Resolved</Badge>
|
||||
}
|
||||
if (statusLower.includes('progress') || statusLower.includes('invest')) {
|
||||
return <Badge className="bg-yellow-600">In Progress</Badge>
|
||||
}
|
||||
if (statusLower.includes('open') || statusLower.includes('new')) {
|
||||
return <Badge className="bg-blue-600">Open</Badge>
|
||||
}
|
||||
|
||||
return <Badge variant="outline">{status}</Badge>
|
||||
}
|
||||
|
||||
return (
|
||||
<Popup
|
||||
longitude={longitude}
|
||||
latitude={latitude}
|
||||
closeButton={true}
|
||||
closeOnClick={false}
|
||||
onClose={onClose}
|
||||
anchor="top"
|
||||
maxWidth="280px"
|
||||
className="crime-popup z-50"
|
||||
>
|
||||
<Card className="bg-background p-3 w-full max-w-[280px] shadow-xl border-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-semibold text-sm flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3 text-red-500" />
|
||||
{crime.category || 'Unknown Incident'}
|
||||
</h3>
|
||||
{getStatusBadge(crime.status)}
|
||||
</div>
|
||||
|
||||
{crime.description && (
|
||||
<div className="mb-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<FileText className="inline-block h-3 w-3 mr-1 align-text-top" />
|
||||
{crime.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1 text-xs text-muted-foreground">
|
||||
{crime.district && (
|
||||
<p className="flex items-center">
|
||||
<Bookmark className="inline-block h-3 w-3 mr-1 shrink-0" />
|
||||
<span>{crime.district}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{crime.address && (
|
||||
<p className="flex items-center">
|
||||
<MapPin className="inline-block h-3 w-3 mr-1 shrink-0" />
|
||||
<span>{crime.address}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{crime.timestamp && (
|
||||
<>
|
||||
<p className="flex items-center">
|
||||
<Calendar className="inline-block h-3 w-3 mr-1 shrink-0" />
|
||||
<span>{formatDate(crime.timestamp)}</span>
|
||||
</p>
|
||||
<p className="flex items-center">
|
||||
<Clock className="inline-block h-3 w-3 mr-1 shrink-0" />
|
||||
<span>{formatTime(crime.timestamp)}</span>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{crime.type && (
|
||||
<p className="flex items-center">
|
||||
<Tag className="inline-block h-3 w-3 mr-1 shrink-0" />
|
||||
<span>Type: {crime.type}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
ID: {crime.id}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
import { useState, useMemo } from 'react'
|
||||
import { Popup } from 'react-map-gl/mapbox'
|
||||
import { Badge } from '@/app/_components/ui/badge'
|
||||
import { Button } from '@/app/_components/ui/button'
|
||||
import { Card } from '@/app/_components/ui/card'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/app/_components/ui/tabs'
|
||||
import { Separator } from '@/app/_components/ui/separator'
|
||||
import { getMonthName } from '@/app/_utils/common'
|
||||
import { BarChart, Map, Users, Home, FileBarChart, AlertTriangle } from 'lucide-react'
|
||||
import type { DistrictFeature } from '../layers/district-layer'
|
||||
|
||||
// Helper function to format numbers
|
||||
function formatNumber(num?: number): string {
|
||||
if (num === undefined || num === null) return "N/A";
|
||||
|
||||
if (num >= 1_000_000) {
|
||||
return (num / 1_000_000).toFixed(1) + 'M';
|
||||
}
|
||||
|
||||
if (num >= 1_000) {
|
||||
return (num / 1_000).toFixed(1) + 'K';
|
||||
}
|
||||
|
||||
return num.toLocaleString();
|
||||
}
|
||||
|
||||
interface DistrictPopupProps {
|
||||
longitude: number
|
||||
latitude: number
|
||||
onClose: () => void
|
||||
district: DistrictFeature
|
||||
year?: string
|
||||
month?: string
|
||||
filterCategory?: string | "all"
|
||||
}
|
||||
|
||||
export default function DistrictPopup({
|
||||
longitude,
|
||||
latitude,
|
||||
onClose,
|
||||
district,
|
||||
year,
|
||||
month,
|
||||
filterCategory = "all"
|
||||
}: DistrictPopupProps) {
|
||||
console.log("DistrictPopup rendering with props:", { longitude, latitude, district, year, month })
|
||||
const [activeTab, setActiveTab] = useState('overview')
|
||||
|
||||
// Extract all crime incidents from the district data and apply filtering if needed
|
||||
const allCrimeIncidents = useMemo(() => {
|
||||
// Check if there are crime incidents in the district object
|
||||
if (!Array.isArray(district.crime_incidents)) {
|
||||
console.warn("No crime incidents array found in district data");
|
||||
return [];
|
||||
}
|
||||
|
||||
// Return all incidents if filterCategory is 'all'
|
||||
if (filterCategory === 'all') {
|
||||
return district.crime_incidents;
|
||||
}
|
||||
|
||||
// Otherwise, filter by category
|
||||
return district.crime_incidents.filter(incident =>
|
||||
incident.category === filterCategory
|
||||
);
|
||||
}, [district, filterCategory]);
|
||||
|
||||
// For debugging: log the actual crime incidents count vs number_of_crime
|
||||
console.log(`District ${district.name} - Number of crime from data: ${district.number_of_crime}, Incidents array length: ${allCrimeIncidents.length}`);
|
||||
|
||||
const getCrimeRateBadge = (level?: string) => {
|
||||
switch (level) {
|
||||
case 'low':
|
||||
return <Badge className="bg-green-600">Low</Badge>
|
||||
case 'medium':
|
||||
return <Badge className="bg-yellow-600">Medium</Badge>
|
||||
case 'high':
|
||||
return <Badge className="bg-red-600">High</Badge>
|
||||
case 'critical':
|
||||
return <Badge className="bg-red-800">Critical</Badge>
|
||||
default:
|
||||
return <Badge className="bg-gray-600">Unknown</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
// Format a time period string from year and month
|
||||
const getTimePeriod = () => {
|
||||
if (year && month && month !== 'all') {
|
||||
return `${getMonthName(Number(month))} ${year}`
|
||||
}
|
||||
return year || 'All time'
|
||||
}
|
||||
|
||||
return (
|
||||
<Popup
|
||||
longitude={longitude}
|
||||
latitude={latitude}
|
||||
closeButton={true}
|
||||
closeOnClick={false}
|
||||
onClose={onClose}
|
||||
anchor="top"
|
||||
maxWidth="300px"
|
||||
className="district-popup z-50"
|
||||
>
|
||||
<Card className="bg-background p-0 w-full max-w-[300px] shadow-xl border-0">
|
||||
<div className="p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-semibold text-base">{district.name}</h3>
|
||||
{getCrimeRateBadge(district.level)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<Map className="inline w-3 h-3 mr-1" />
|
||||
District ID: {district.id}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
<FileBarChart className="inline w-3 h-3 mr-1" />
|
||||
{district.number_of_crime || 0} crime incidents in {getTimePeriod()}
|
||||
{filterCategory !== 'all' ? ` (${filterCategory} category)` : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<div className="border-t border-border">
|
||||
<TabsList className="w-full rounded-none bg-muted/50 p-0 h-9">
|
||||
<TabsTrigger value="overview" className="rounded-none flex-1 text-xs h-full">
|
||||
Overview
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="demographics" className="rounded-none flex-1 text-xs h-full">
|
||||
Demographics
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="crime_incidents" className="rounded-none flex-1 text-xs h-full">
|
||||
Incidents
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<TabsContent value="overview" className="mt-0 p-3">
|
||||
<div className="text-sm space-y-2">
|
||||
<div>
|
||||
<p className="font-medium">Crime Level</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
This area has a {district.level || 'unknown'} level of crime based on incident reports.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{district.geographics && district.geographics.land_area && (
|
||||
<div>
|
||||
<p className="font-medium flex items-center gap-1">
|
||||
<Home className="w-3 h-3" /> Geography
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Land area: {formatNumber(district.geographics.land_area)} km²
|
||||
</p>
|
||||
{district.geographics.address && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Address: {district.geographics.address}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p className="font-medium">Time Period</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Data shown for {getTimePeriod()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="demographics" className="mt-0 p-3">
|
||||
{district.demographics ? (
|
||||
<div className="text-sm space-y-3">
|
||||
<div>
|
||||
<p className="font-medium flex items-center gap-1">
|
||||
<Users className="w-3 h-3" /> Population
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Total: {formatNumber(district.demographics.population || 0)}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Density: {formatNumber(district.demographics.population_density || 0)} people/km²
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="font-medium">Unemployment</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{formatNumber(district.demographics.number_of_unemployed || 0)} unemployed people
|
||||
</p>
|
||||
{district.demographics.population && district.demographics.number_of_unemployed && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Rate: {((district.demographics.number_of_unemployed / district.demographics.population) * 100).toFixed(1)}%
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="font-medium">Crime Rate</p>
|
||||
{district.number_of_crime && district.demographics.population ? (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{((district.number_of_crime / district.demographics.population) * 10000).toFixed(2)} crime incidents per 10,000 people
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-muted-foreground text-xs">No data available</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-4 text-sm text-muted-foreground">
|
||||
<Users className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No demographic data available for this district.</p>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* // Inside the TabsContent for crime_incidents */}
|
||||
<TabsContent value="crime_incidents" className="mt-0 max-h-[250px] overflow-y-auto">
|
||||
{allCrimeIncidents && allCrimeIncidents.length > 0 ? (
|
||||
<div className="divide-y divide-border">
|
||||
{allCrimeIncidents.map((incident, index) => (
|
||||
<div key={incident.id || index} className="p-3 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">
|
||||
{incident.category || incident.type || "Unknown"}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-[10px] h-5">
|
||||
{incident.status || "unknown"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 truncate">
|
||||
{incident.description || "No description"}
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
{incident.timestamp ? new Date(incident.timestamp).toLocaleString() : "Unknown date"}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Show a note if we're missing some incidents */}
|
||||
{district.number_of_crime > allCrimeIncidents.length && (
|
||||
<div className="p-3 text-xs text-center text-muted-foreground bg-muted/50">
|
||||
<p>
|
||||
Showing {allCrimeIncidents.length} of {district.number_of_crime} total incidents
|
||||
{filterCategory !== 'all' ? ` for ${filterCategory} category` : ''}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-4 text-sm text-muted-foreground">
|
||||
<AlertTriangle className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No crime incidents available to display{filterCategory !== 'all' ? ` for ${filterCategory}` : ''}.</p>
|
||||
<p className="text-xs mt-2">Total reported incidents: {district.number_of_crime || 0}</p>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</Card>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,101 +1,641 @@
|
|||
"use client"
|
||||
|
||||
import React, { useState } from "react"
|
||||
import { AlertTriangle, BarChart, ChevronRight, MapPin, Skull, Shield, FileText } from "lucide-react"
|
||||
import React, { useState, useEffect, useMemo } from "react"
|
||||
import {
|
||||
AlertTriangle, BarChart, ChevronRight, MapPin, Skull, Shield, FileText,
|
||||
Clock, Calendar, MapIcon, Info, CheckCircle, AlertCircle, XCircle,
|
||||
Bell, Users, Search, List, RefreshCw, Eye
|
||||
} from "lucide-react"
|
||||
import { Separator } from "@/app/_components/ui/separator"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/app/_components/ui/card"
|
||||
import { cn } from "@/app/_lib/utils"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/app/_components/ui/tabs"
|
||||
import { Badge } from "@/app/_components/ui/badge"
|
||||
import { CRIME_RATE_COLORS } from "@/app/_utils/const/map"
|
||||
import { usePrefetchedCrimeData } from "@/app/(pages)/(admin)/dashboard/crime-management/crime-overview/_hooks/use-prefetch-crimes"
|
||||
import { getMonthName, formatDateString } from "@/app/_utils/common"
|
||||
import { Skeleton } from "@/app/_components/ui/skeleton"
|
||||
import { useGetCrimeCategories } from "@/app/(pages)/(admin)/dashboard/crime-management/crime-overview/_queries/queries"
|
||||
import { $Enums, crime_categories, crime_incidents, crimes, demographics, districts, geographics, locations } from "@prisma/client"
|
||||
|
||||
interface CrimeSidebarProps {
|
||||
className?: string
|
||||
defaultCollapsed?: boolean
|
||||
selectedCategory?: string | "all"
|
||||
selectedYear?: number
|
||||
selectedMonth?: number | "all"
|
||||
}
|
||||
|
||||
export default function CrimeSidebar({ className, defaultCollapsed = true }: CrimeSidebarProps) {
|
||||
// Updated interface to match the structure returned by getCrimeByYearAndMonth
|
||||
interface ICrimesProps {
|
||||
id: string
|
||||
district_id: string
|
||||
districts: {
|
||||
name: string
|
||||
geographics?: {
|
||||
address: string
|
||||
land_area: number
|
||||
year: number
|
||||
}[]
|
||||
demographics?: {
|
||||
number_of_unemployed: number
|
||||
population: number
|
||||
population_density: number
|
||||
year: number
|
||||
}[]
|
||||
}
|
||||
number_of_crime: number
|
||||
level: $Enums.crime_rates
|
||||
score: number
|
||||
month: number
|
||||
year: number
|
||||
crime_incidents: Array<{
|
||||
id: string
|
||||
timestamp: Date
|
||||
description: string
|
||||
status: string
|
||||
crime_categories: {
|
||||
name: string
|
||||
type: string
|
||||
}
|
||||
locations: {
|
||||
address: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
}>
|
||||
}
|
||||
|
||||
export default function CrimeSidebar({
|
||||
className,
|
||||
defaultCollapsed = true,
|
||||
selectedCategory = "all",
|
||||
selectedYear: propSelectedYear,
|
||||
selectedMonth: propSelectedMonth
|
||||
}: CrimeSidebarProps) {
|
||||
const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed)
|
||||
const [activeTab, setActiveTab] = useState("incidents")
|
||||
const [currentTime, setCurrentTime] = useState<Date>(new Date())
|
||||
const [location, setLocation] = useState<string>("Jember, East Java")
|
||||
|
||||
const {
|
||||
availableYears,
|
||||
isYearsLoading,
|
||||
crimes,
|
||||
isCrimesLoading,
|
||||
crimesError,
|
||||
selectedYear: hookSelectedYear,
|
||||
selectedMonth: hookSelectedMonth,
|
||||
} = usePrefetchedCrimeData()
|
||||
|
||||
// Use props for selectedYear and selectedMonth if provided, otherwise fall back to hook values
|
||||
const selectedYear = propSelectedYear || hookSelectedYear
|
||||
const selectedMonth = propSelectedMonth || hookSelectedMonth
|
||||
|
||||
// Update current time every minute for the real-time display
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(new Date())
|
||||
}, 60000)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
|
||||
// Format date with selected year and month if provided
|
||||
const getDisplayDate = () => {
|
||||
// If we have a specific month selected, use that for display
|
||||
if (selectedMonth && selectedMonth !== 'all') {
|
||||
const date = new Date()
|
||||
date.setFullYear(selectedYear)
|
||||
date.setMonth(Number(selectedMonth) - 1) // Month is 0-indexed in JS Date
|
||||
|
||||
return new Intl.DateTimeFormat('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long'
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
// Otherwise show today's date
|
||||
return new Intl.DateTimeFormat('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}).format(currentTime)
|
||||
}
|
||||
|
||||
const formattedDate = getDisplayDate()
|
||||
|
||||
const formattedTime = new Intl.DateTimeFormat('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
}).format(currentTime)
|
||||
|
||||
const { data: categoriesData } = useGetCrimeCategories()
|
||||
|
||||
const crimeStats = useMemo(() => {
|
||||
// Return default values if crimes is undefined, null, or not an array
|
||||
if (!crimes || !Array.isArray(crimes) || crimes.length === 0) return {
|
||||
todaysIncidents: 0,
|
||||
totalIncidents: 0,
|
||||
recentIncidents: [],
|
||||
categoryCounts: {},
|
||||
districts: {},
|
||||
incidentsByMonth: Array(12).fill(0),
|
||||
clearanceRate: 0
|
||||
}
|
||||
|
||||
// Make sure we have a valid array to work with
|
||||
let filteredCrimes = [...crimes]
|
||||
|
||||
if (selectedCategory !== "all") {
|
||||
filteredCrimes = crimes.filter((crime: ICrimesProps) =>
|
||||
crime.crime_incidents.some(incident =>
|
||||
incident.crime_categories.name === selectedCategory
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
// Collect all incidents from all crimes
|
||||
const allIncidents = filteredCrimes.flatMap((crime: ICrimesProps) =>
|
||||
crime.crime_incidents.map(incident => ({
|
||||
id: incident.id,
|
||||
timestamp: incident.timestamp,
|
||||
description: incident.description,
|
||||
status: incident.status,
|
||||
category: incident.crime_categories.name,
|
||||
type: incident.crime_categories.type,
|
||||
address: incident.locations.address,
|
||||
latitude: incident.locations.latitude,
|
||||
longitude: incident.locations.longitude
|
||||
}))
|
||||
)
|
||||
|
||||
const totalIncidents = allIncidents.length
|
||||
|
||||
const today = new Date()
|
||||
const thirtyDaysAgo = new Date()
|
||||
thirtyDaysAgo.setDate(today.getDate() - 30)
|
||||
|
||||
const recentIncidents = allIncidents
|
||||
.filter((incident) => {
|
||||
if (!incident?.timestamp) return false
|
||||
const incidentDate = new Date(incident.timestamp)
|
||||
return incidentDate >= thirtyDaysAgo
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const bTime = b?.timestamp ? new Date(b.timestamp).getTime() : 0
|
||||
const aTime = a?.timestamp ? new Date(a.timestamp).getTime() : 0
|
||||
return bTime - aTime
|
||||
})
|
||||
|
||||
const todaysIncidents = recentIncidents.filter((incident) => {
|
||||
const incidentDate = incident?.timestamp
|
||||
? new Date(incident.timestamp)
|
||||
: new Date(0)
|
||||
return incidentDate.toDateString() === today.toDateString()
|
||||
}).length
|
||||
|
||||
const categoryCounts = allIncidents.reduce((acc: Record<string, number>, incident) => {
|
||||
const category = incident?.category || 'Unknown'
|
||||
acc[category] = (acc[category] || 0) + 1
|
||||
return acc
|
||||
}, {} as Record<string, number>)
|
||||
|
||||
const districts = filteredCrimes.reduce((acc: Record<string, number>, crime: ICrimesProps) => {
|
||||
const districtName = crime.districts.name || 'Unknown'
|
||||
acc[districtName] = (acc[districtName] || 0) + (crime.number_of_crime || 0)
|
||||
return acc
|
||||
}, {} as Record<string, number>)
|
||||
|
||||
const incidentsByMonth = Array(12).fill(0)
|
||||
allIncidents.forEach((incident) => {
|
||||
if (!incident?.timestamp) return;
|
||||
|
||||
const date = new Date(incident.timestamp)
|
||||
const month = date.getMonth()
|
||||
if (month >= 0 && month < 12) {
|
||||
incidentsByMonth[month]++
|
||||
}
|
||||
})
|
||||
|
||||
const resolvedIncidents = allIncidents.filter(incident =>
|
||||
incident?.status?.toLowerCase() === "resolved"
|
||||
).length
|
||||
|
||||
const clearanceRate = totalIncidents > 0 ?
|
||||
Math.round((resolvedIncidents / totalIncidents) * 100) : 0
|
||||
|
||||
return {
|
||||
todaysIncidents,
|
||||
totalIncidents,
|
||||
recentIncidents: recentIncidents.slice(0, 10),
|
||||
categoryCounts,
|
||||
districts,
|
||||
incidentsByMonth,
|
||||
clearanceRate
|
||||
}
|
||||
}, [crimes, selectedCategory])
|
||||
|
||||
// Generate a time period display for the current view
|
||||
const getTimePeriodDisplay = () => {
|
||||
if (selectedMonth && selectedMonth !== 'all') {
|
||||
return `${getMonthName(Number(selectedMonth))} ${selectedYear}`
|
||||
}
|
||||
return `${selectedYear} - All months`
|
||||
}
|
||||
|
||||
const topCategories = useMemo(() => {
|
||||
if (!crimeStats.categoryCounts) return []
|
||||
|
||||
return Object.entries(crimeStats.categoryCounts)
|
||||
.sort((a, b) => (b[1] as number) - (a[1] as number))
|
||||
.slice(0, 4)
|
||||
.map(([type, count]) => {
|
||||
const percentage = Math.round(((count as number) / crimeStats.totalIncidents) * 100) || 0
|
||||
return { type, count: count as number, percentage }
|
||||
})
|
||||
}, [crimeStats])
|
||||
|
||||
const getTimeAgo = (timestamp: string | Date) => {
|
||||
const now = new Date()
|
||||
const eventTime = new Date(timestamp)
|
||||
const diffMs = now.getTime() - eventTime.getTime()
|
||||
|
||||
const diffMins = Math.floor(diffMs / 60000)
|
||||
const diffHours = Math.floor(diffMins / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
|
||||
if (diffDays > 0) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`
|
||||
if (diffHours > 0) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`
|
||||
if (diffMins > 0) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`
|
||||
return 'just now'
|
||||
}
|
||||
|
||||
const getIncidentSeverity = (incident: any): "Low" | "Medium" | "High" | "Critical" => {
|
||||
if (!incident) return "Low";
|
||||
|
||||
const category = incident.category || "Unknown";
|
||||
|
||||
const highSeverityCategories = [
|
||||
'Pembunuhan', 'Perkosaan', 'Penculikan', 'Lahgun Senpi/Handak/Sajam',
|
||||
'PTPPO', 'Trafficking In Person'
|
||||
]
|
||||
|
||||
const mediumSeverityCategories = [
|
||||
'Penganiayaan Berat', 'Penganiayaan Ringan', 'Pencurian Biasa', 'Curat',
|
||||
'Curas', 'Curanmor', 'Pengeroyokan', 'PKDRT', 'Penggelapan', 'Pengrusakan'
|
||||
]
|
||||
|
||||
if (highSeverityCategories.includes(category)) return "High"
|
||||
if (mediumSeverityCategories.includes(category)) return "Medium"
|
||||
|
||||
if (incident.type === "Pidana Tertentu") return "Medium"
|
||||
return "Low"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
"absolute top-0 left-0 h-full z-10 transition-all duration-300 ease-in-out bg-background backdrop-blur-sm border-r border-white/10 ",
|
||||
isCollapsed ? "translate-x-[-100%]" : "translate-x-0",
|
||||
"fixed top-0 left-0 h-full z-40 transition-transform duration-300 ease-in-out bg-background backdrop-blur-sm border-r border-white/10",
|
||||
isCollapsed ? "-translate-x-full" : "translate-x-0",
|
||||
className
|
||||
)}>
|
||||
<div className="relative h-full flex items-stretch">
|
||||
{/* Main Sidebar Content */}
|
||||
<div className="bg-background backdrop-blur-sm border-r border-white/10 h-full w-[320px]">
|
||||
<div className="p-4 text-white h-full flex flex-col">
|
||||
<CardHeader className="p-0 pb-2">
|
||||
<div className="bg-background backdrop-blur-sm border-r border-white/10 h-full w-[400px]">
|
||||
<div className="p-4 text-white h-full flex flex-col max-h-full overflow-hidden">
|
||||
<CardHeader className="p-0 pb-2 shrink-0">
|
||||
<CardTitle className="text-xl font-semibold flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
Crime Analysis
|
||||
</CardTitle>
|
||||
{!isCrimesLoading && (
|
||||
<CardDescription className="text-xs text-white/60">
|
||||
{getTimePeriodDisplay()}
|
||||
</CardDescription>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<Tabs defaultValue="incidents" className="w-full" value={activeTab} onValueChange={setActiveTab}>
|
||||
<Tabs defaultValue="incidents" className="w-full flex-1 flex flex-col overflow-hidden" value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="w-full mb-2 bg-black/30">
|
||||
<TabsTrigger value="incidents" className="flex-1">Incidents</TabsTrigger>
|
||||
<TabsTrigger value="incidents" className="flex-1">Dashboard</TabsTrigger>
|
||||
<TabsTrigger value="statistics" className="flex-1">Statistics</TabsTrigger>
|
||||
<TabsTrigger value="reports" className="flex-1">Reports</TabsTrigger>
|
||||
<TabsTrigger value="info" className="flex-1">Information</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden pr-1 max-h-[calc(100vh-10rem)]">
|
||||
<TabsContent value="incidents" className="m-0 p-0">
|
||||
<SidebarSection title="Recent Incidents" icon={<AlertTriangle className="h-4 w-4 text-red-400" />}>
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden pr-1">
|
||||
<TabsContent value="incidents" className="m-0 p-0 space-y-4">
|
||||
{isCrimesLoading ? (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-24 w-full" />
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<IncidentCard key={i} />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Card className="bg-black/20 border border-white/10">
|
||||
<CardContent className="p-3 text-sm">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-blue-400" />
|
||||
<span className="font-medium">{formattedDate}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-blue-400" />
|
||||
<span>{formattedTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<MapPin className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white/70">{location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<AlertTriangle className="h-4 w-4 text-amber-400" />
|
||||
<span>
|
||||
<strong>{crimeStats.totalIncidents || 0}</strong> incidents reported
|
||||
{selectedMonth !== 'all' ? ` in ${getMonthName(Number(selectedMonth))}` : ` in ${selectedYear}`}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<SystemStatusCard
|
||||
title="Total Cases"
|
||||
status={`${crimeStats?.totalIncidents || 0}`}
|
||||
statusIcon={<AlertCircle className="h-4 w-4 text-blue-500" />}
|
||||
statusColor="text-blue-500"
|
||||
updatedTime={getTimePeriodDisplay()}
|
||||
/>
|
||||
<SystemStatusCard
|
||||
title="Recent Cases"
|
||||
status={`${crimeStats?.recentIncidents?.length || 0}`}
|
||||
statusIcon={<Clock className="h-4 w-4 text-amber-500" />}
|
||||
statusColor="text-amber-500"
|
||||
updatedTime="Last 30 days"
|
||||
/>
|
||||
<SystemStatusCard
|
||||
title="Top Category"
|
||||
status={topCategories.length > 0 ? topCategories[0].type : "None"}
|
||||
statusIcon={<Shield className="h-4 w-4 text-green-500" />}
|
||||
statusColor="text-green-500"
|
||||
/>
|
||||
<SystemStatusCard
|
||||
title="Districts"
|
||||
status={`${Object.keys(crimeStats.districts).length}`}
|
||||
statusIcon={<MapPin className="h-4 w-4 text-purple-500" />}
|
||||
statusColor="text-purple-500"
|
||||
updatedTime="Affected areas"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SidebarSection
|
||||
title={selectedCategory !== "all"
|
||||
? `${selectedCategory} Incidents`
|
||||
: "Recent Incidents"}
|
||||
icon={<AlertTriangle className="h-4 w-4 text-red-400" />}
|
||||
>
|
||||
{crimeStats.recentIncidents.length === 0 ? (
|
||||
<Card className="bg-white/5 border-0 text-white shadow-none">
|
||||
<CardContent className="p-4 text-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AlertCircle className="h-6 w-6 text-white/40" />
|
||||
<p className="text-sm text-white/70">
|
||||
{selectedCategory !== "all"
|
||||
? `No ${selectedCategory} incidents found`
|
||||
: "No recent incidents reported"}
|
||||
</p>
|
||||
<p className="text-xs text-white/50">Try adjusting your filters or checking back later</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{crimeStats.recentIncidents.slice(0, 6).map((incident) => (
|
||||
<IncidentCard
|
||||
key={incident.id}
|
||||
title={`${incident.category || 'Unknown'} in ${incident.address?.split(',')[0] || 'Unknown Location'}`}
|
||||
time={incident.timestamp ? getTimeAgo(incident.timestamp) : 'Unknown time'}
|
||||
location={incident.address?.split(',').slice(1, 3).join(', ') || 'Unknown Location'}
|
||||
severity={getIncidentSeverity(incident)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</SidebarSection>
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="statistics" className="m-0 p-0">
|
||||
<TabsContent value="statistics" className="m-0 p-0 space-y-4">
|
||||
{isCrimesLoading ? (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-64 w-full" />
|
||||
<Skeleton className="h-24 w-full" />
|
||||
<Skeleton className="h-36 w-full" />
|
||||
<Skeleton className="h-48 w-full" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Card className="bg-black/20 border border-white/10 p-3">
|
||||
<CardHeader className="p-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Monthly Incidents</CardTitle>
|
||||
<CardDescription className="text-xs text-white/60">{selectedYear}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="h-24 flex items-end gap-1 mt-2">
|
||||
{crimeStats.incidentsByMonth.map((count, i) => {
|
||||
const maxCount = Math.max(...crimeStats.incidentsByMonth)
|
||||
const height = maxCount > 0 ? (count / maxCount) * 100 : 0
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
"bg-blue-500 w-full rounded-t",
|
||||
selectedMonth !== 'all' && i + 1 === Number(selectedMonth) ? "bg-yellow-500" : ""
|
||||
)}
|
||||
style={{
|
||||
height: `${Math.max(5, height)}%`,
|
||||
opacity: 0.6 + (i / 24)
|
||||
}}
|
||||
title={`${getMonthName(i + 1)}: ${count} incidents`}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="flex justify-between mt-1 text-[10px] text-white/60">
|
||||
<span>Jan</span>
|
||||
<span>Feb</span>
|
||||
<span>Mar</span>
|
||||
<span>Apr</span>
|
||||
<span>May</span>
|
||||
<span>Jun</span>
|
||||
<span>Jul</span>
|
||||
<span>Aug</span>
|
||||
<span>Sep</span>
|
||||
<span>Oct</span>
|
||||
<span>Nov</span>
|
||||
<span>Dec</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<SidebarSection title="Crime Overview" icon={<BarChart className="h-4 w-4 text-blue-400" />}>
|
||||
<div className="space-y-2">
|
||||
<StatCard title="Total Incidents" value="254" change="+12%" />
|
||||
<StatCard title="Hot Zones" value="6" change="+2" />
|
||||
<StatCard title="Case Clearance" value="68%" change="+5%" isPositive />
|
||||
<StatCard
|
||||
title="Total Incidents"
|
||||
value={crimeStats.totalIncidents.toString()}
|
||||
change={`${Object.keys(crimeStats.districts).length} districts`}
|
||||
/>
|
||||
<StatCard
|
||||
title={selectedMonth !== 'all' ?
|
||||
`${getMonthName(Number(selectedMonth))} Cases` :
|
||||
"Monthly Average"}
|
||||
value={selectedMonth !== 'all' ?
|
||||
crimeStats.totalIncidents.toString() :
|
||||
Math.round(crimeStats.totalIncidents /
|
||||
(crimeStats.incidentsByMonth.filter(c => c > 0).length || 1)
|
||||
).toString()}
|
||||
change={selectedMonth !== 'all' ?
|
||||
`in ${getMonthName(Number(selectedMonth))}` :
|
||||
"per active month"}
|
||||
isPositive={false}
|
||||
/>
|
||||
<StatCard
|
||||
title="Clearance Rate"
|
||||
value={`${crimeStats.clearanceRate}%`}
|
||||
change="of cases resolved"
|
||||
isPositive={crimeStats.clearanceRate > 50}
|
||||
/>
|
||||
</div>
|
||||
</SidebarSection>
|
||||
|
||||
<Separator className="bg-white/20 my-4" />
|
||||
<Separator className="bg-white/20 my-2" />
|
||||
|
||||
<SidebarSection title="Most Reported" icon={<Skull className="h-4 w-4 text-amber-400" />}>
|
||||
<SidebarSection title="Most Common Crimes" icon={<Skull className="h-4 w-4 text-amber-400" />}>
|
||||
<div className="space-y-2">
|
||||
<CrimeTypeCard type="Theft" count={42} percentage={23} />
|
||||
<CrimeTypeCard type="Assault" count={28} percentage={15} />
|
||||
<CrimeTypeCard type="Vandalism" count={19} percentage={10} />
|
||||
<CrimeTypeCard type="Burglary" count={15} percentage={8} />
|
||||
{topCategories.length > 0 ? (
|
||||
topCategories.map((category) => (
|
||||
<CrimeTypeCard
|
||||
key={category.type}
|
||||
type={category.type}
|
||||
count={category.count}
|
||||
percentage={category.percentage}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Card className="bg-white/5 border-0 text-white shadow-none">
|
||||
<CardContent className="p-4 text-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FileText className="h-6 w-6 text-white/40" />
|
||||
<p className="text-sm text-white/70">No crime data available</p>
|
||||
<p className="text-xs text-white/50">Try selecting a different time period</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</SidebarSection>
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="reports" className="m-0 p-0">
|
||||
<SidebarSection title="Recent Reports" icon={<FileText className="h-4 w-4 text-indigo-400" />}>
|
||||
<TabsContent value="info" className="m-0 p-0 space-y-4">
|
||||
<SidebarSection title="Map Legend" icon={<MapIcon className="h-4 w-4 text-blue-400" />}>
|
||||
<Card className="bg-black/20 border border-white/10">
|
||||
<CardContent className="p-3 text-xs space-y-2">
|
||||
<div className="space-y-2">
|
||||
<ReportCard
|
||||
title="Monthly Crime Summary"
|
||||
date="June 15, 2024"
|
||||
author="Dept. Analysis Team"
|
||||
/>
|
||||
<ReportCard
|
||||
title="High Risk Areas Analysis"
|
||||
date="June 12, 2024"
|
||||
author="Regional Coordinator"
|
||||
/>
|
||||
<ReportCard
|
||||
title="Case Resolution Statistics"
|
||||
date="June 10, 2024"
|
||||
author="Investigation Unit"
|
||||
/>
|
||||
<ReportCard
|
||||
title="Quarterly Report Q2 2024"
|
||||
date="June 1, 2024"
|
||||
author="Crime Analysis Department"
|
||||
/>
|
||||
<h4 className="font-medium mb-1">Crime Severity</h4>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.low }}></div>
|
||||
<span>Low Crime Rate</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.medium }}></div>
|
||||
<span>Medium Crime Rate</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.high }}></div>
|
||||
<span>High Crime Rate</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="bg-white/20 my-2" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium mb-1">Map Markers</h4>
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-red-500" />
|
||||
<span>Individual Incident</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center text-[8px] text-white">5</div>
|
||||
<span>Incident Cluster</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</SidebarSection>
|
||||
|
||||
<SidebarSection title="About" icon={<Info className="h-4 w-4 text-blue-400" />}>
|
||||
<Card className="bg-black/20 border border-white/10">
|
||||
<CardContent className="p-3 text-xs">
|
||||
<p className="mb-2">
|
||||
SIGAP Crime Map provides real-time visualization and analysis
|
||||
of crime incidents across Jember region.
|
||||
</p>
|
||||
<p>
|
||||
Data is sourced from official police reports and updated
|
||||
daily to ensure accurate information.
|
||||
</p>
|
||||
<div className="mt-2 text-white/60">
|
||||
<div className="flex justify-between">
|
||||
<span>Version</span>
|
||||
<span>1.2.4</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Last Updated</span>
|
||||
<span>June 18, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</SidebarSection>
|
||||
|
||||
<SidebarSection title="How to Use" icon={<Eye className="h-4 w-4 text-blue-400" />}>
|
||||
<Card className="bg-black/20 border border-white/10">
|
||||
<CardContent className="p-3 text-xs space-y-2">
|
||||
<div>
|
||||
<span className="font-medium">Filtering</span>
|
||||
<p className="text-white/70">
|
||||
Use the year, month, and category filters at the top to
|
||||
refine the data shown on the map.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">District Information</span>
|
||||
<p className="text-white/70">
|
||||
Click on any district to view detailed crime statistics for that area.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Incidents</span>
|
||||
<p className="text-white/70">
|
||||
Click on incident markers to view details about specific crime reports.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</SidebarSection>
|
||||
</TabsContent>
|
||||
</div>
|
||||
|
|
@ -103,13 +643,12 @@ export default function CrimeSidebar({ className, defaultCollapsed = true }: Cri
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle Button - always visible and positioned correctly */}
|
||||
<button
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
className={cn(
|
||||
"absolute h-12 w-8 bg-background backdrop-blur-sm border-t border-b border-r border-white/10 flex items-center justify-center",
|
||||
"top-1/2 -translate-y-1/2 transition-all duration-300 ease-in-out",
|
||||
isCollapsed ? "-right-8 rounded-r-md" : "left-[320px] rounded-r-md",
|
||||
isCollapsed ? "-right-8 rounded-r-md" : "left-[400px] rounded-r-md",
|
||||
)}
|
||||
aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
>
|
||||
|
|
@ -123,8 +662,6 @@ export default function CrimeSidebar({ className, defaultCollapsed = true }: Cri
|
|||
)
|
||||
}
|
||||
|
||||
// Helper components for sidebar content
|
||||
|
||||
interface SidebarSectionProps {
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
|
|
@ -143,24 +680,69 @@ function SidebarSection({ title, children, icon }: SidebarSectionProps) {
|
|||
)
|
||||
}
|
||||
|
||||
function IncidentCard() {
|
||||
interface SystemStatusCardProps {
|
||||
title: string
|
||||
status: string
|
||||
statusIcon: React.ReactNode
|
||||
statusColor: string
|
||||
updatedTime?: string
|
||||
}
|
||||
|
||||
function SystemStatusCard({ title, status, statusIcon, statusColor, updatedTime }: SystemStatusCardProps) {
|
||||
return (
|
||||
<Card className="bg-black/20 border border-white/10">
|
||||
<CardContent className="p-2 text-xs">
|
||||
<div className="font-medium mb-1">{title}</div>
|
||||
<div className={`flex items-center gap-1 ${statusColor}`}>
|
||||
{statusIcon}
|
||||
<span>{status}</span>
|
||||
</div>
|
||||
{updatedTime && (
|
||||
<div className="text-white/50 text-[10px] mt-1">{updatedTime}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface EnhancedIncidentCardProps {
|
||||
title: string
|
||||
time: string
|
||||
location: string
|
||||
severity: "Low" | "Medium" | "High" | "Critical"
|
||||
}
|
||||
|
||||
function IncidentCard({ title, time, location, severity }: EnhancedIncidentCardProps) {
|
||||
const getBadgeColor = () => {
|
||||
switch (severity) {
|
||||
case "Low": return "bg-green-500/20 text-green-300";
|
||||
case "Medium": return "bg-yellow-500/20 text-yellow-300";
|
||||
case "High": return "bg-orange-500/20 text-orange-300";
|
||||
case "Critical": return "bg-red-500/20 text-red-300";
|
||||
default: return "bg-gray-500/20 text-gray-300";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-white/10 border-0 text-white shadow-none">
|
||||
<CardContent className="p-3 text-xs">
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertTriangle className="h-4 w-4 text-red-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-medium">Theft reported at Jalan Srikandi</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">{title}</p>
|
||||
<Badge className={`${getBadgeColor()} text-[9px] h-4 ml-1`}>{severity}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1 text-white/60">
|
||||
<MapPin className="h-3 w-3" />
|
||||
<span>Jombang District</span>
|
||||
<span>{location}</span>
|
||||
</div>
|
||||
<div className="mt-1 text-white/60">3 hours ago</div>
|
||||
<div className="mt-1 text-white/60">{time}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
interface StatCardProps {
|
||||
|
|
@ -232,3 +814,7 @@ function ReportCard({ title, date, author }: ReportCardProps) {
|
|||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function PieChart(props: any) {
|
||||
return <BarChart {...props} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
"use client"
|
||||
|
||||
import { useMemo } from "react"
|
||||
|
||||
export function useFilteredCrimeData(
|
||||
crimes: any[] | undefined,
|
||||
selectedCategory: string | "all" = "all"
|
||||
) {
|
||||
// Handle filtered crime data
|
||||
return useMemo(() => {
|
||||
if (!crimes || crimes.length === 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (selectedCategory === "all") {
|
||||
return crimes
|
||||
}
|
||||
|
||||
return crimes.filter(crime => {
|
||||
// Check if any incident in this crime matches the category
|
||||
return crime.incidents?.some((incident: any) =>
|
||||
incident.category === selectedCategory
|
||||
)
|
||||
}).map(crime => ({
|
||||
...crime,
|
||||
// Only include incidents that match the selected category
|
||||
incidents: crime.incidents.filter((incident: any) =>
|
||||
incident.category === selectedCategory
|
||||
),
|
||||
// Update number_of_crime to reflect the filtered count
|
||||
number_of_crime: crime.incidents.filter(
|
||||
(incident: any) => incident.category === selectedCategory
|
||||
).length
|
||||
}))
|
||||
}, [crimes, selectedCategory])
|
||||
}
|
||||
|
|
@ -770,3 +770,22 @@ export const getDistrictName = (districtId: string): string => {
|
|||
'Unknown District'
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Format number with commas or abbreviate large numbers
|
||||
*/
|
||||
export function formatNumber(num?: number): string {
|
||||
if (num === undefined || num === null) return "N/A";
|
||||
|
||||
// If number is in the thousands, abbreviate
|
||||
if (num >= 1_000_000) {
|
||||
return (num / 1_000_000).toFixed(1) + 'M';
|
||||
}
|
||||
|
||||
if (num >= 1_000) {
|
||||
return (num / 1_000).toFixed(1) + 'K';
|
||||
}
|
||||
|
||||
// Otherwise, format with commas
|
||||
return num.toLocaleString();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
/**
|
||||
* Calculates crime statistics from raw crime data
|
||||
*/
|
||||
export function calculateCrimeStats(
|
||||
crimes: any[] | undefined,
|
||||
selectedCategory: string | 'all' = 'all'
|
||||
) {
|
||||
if (!crimes || crimes.length === 0) {
|
||||
return {
|
||||
todaysIncidents: 0,
|
||||
totalIncidents: 0,
|
||||
recentIncidents: [],
|
||||
categoryCounts: {},
|
||||
districts: {},
|
||||
incidentsByMonth: Array(12).fill(0),
|
||||
};
|
||||
}
|
||||
|
||||
// Filter incidents by category if needed
|
||||
let filteredIncidents: any[] = [];
|
||||
|
||||
crimes.forEach((crime) => {
|
||||
if (selectedCategory === 'all') {
|
||||
// Include all incidents
|
||||
if (crime.incidents) {
|
||||
filteredIncidents = [...filteredIncidents, ...crime.incidents];
|
||||
}
|
||||
} else {
|
||||
// Filter by category
|
||||
const matchingIncidents =
|
||||
crime.incidents?.filter(
|
||||
(incident: any) => incident.category === selectedCategory
|
||||
) || [];
|
||||
filteredIncidents = [...filteredIncidents, ...matchingIncidents];
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate statistics
|
||||
const today = new Date();
|
||||
const thirtyDaysAgo = new Date();
|
||||
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||
|
||||
// Get recent incidents (last 30 days)
|
||||
const recentIncidents = filteredIncidents
|
||||
.filter((incident) => {
|
||||
const incidentDate = new Date(incident.timestamp);
|
||||
return incidentDate >= thirtyDaysAgo;
|
||||
})
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
|
||||
);
|
||||
|
||||
// Get today's incidents
|
||||
const todaysIncidents = recentIncidents.filter((incident) => {
|
||||
const incidentDate = new Date(incident.timestamp);
|
||||
return incidentDate.toDateString() === today.toDateString();
|
||||
}).length;
|
||||
|
||||
// Count by category
|
||||
const categoryCounts = filteredIncidents.reduce(
|
||||
(acc: Record<string, number>, incident) => {
|
||||
const category = incident.category || 'Unknown';
|
||||
acc[category] = (acc[category] || 0) + 1;
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
// Count by district
|
||||
const districts = crimes.reduce((acc: Record<string, number>, crime) => {
|
||||
if (selectedCategory === 'all') {
|
||||
acc[crime.district_name] =
|
||||
(acc[crime.district_name] || 0) + (crime.number_of_crime || 0);
|
||||
} else {
|
||||
// Count only matching incidents
|
||||
const matchCount =
|
||||
crime.incidents?.filter(
|
||||
(incident: any) => incident.category === selectedCategory
|
||||
).length || 0;
|
||||
|
||||
if (matchCount > 0) {
|
||||
acc[crime.district_name] = (acc[crime.district_name] || 0) + matchCount;
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Group by month
|
||||
const incidentsByMonth = Array(12).fill(0);
|
||||
filteredIncidents.forEach((incident) => {
|
||||
const date = new Date(incident.timestamp);
|
||||
const month = date.getMonth();
|
||||
if (month >= 0 && month < 12) {
|
||||
incidentsByMonth[month]++;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
todaysIncidents,
|
||||
totalIncidents: filteredIncidents.length,
|
||||
recentIncidents,
|
||||
categoryCounts,
|
||||
districts,
|
||||
incidentsByMonth,
|
||||
};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,7 @@
|
|||
"dependencies": {
|
||||
"@evyweb/ioctopus": "^1.2.0",
|
||||
"@hookform/resolvers": "^4.1.2",
|
||||
"@mapbox/mapbox-gl-geocoder": "^5.0.3",
|
||||
"@prisma/client": "^6.4.1",
|
||||
"@prisma/instrumentation": "^6.5.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.6",
|
||||
|
|
@ -72,6 +73,7 @@
|
|||
"devDependencies": {
|
||||
"@tanstack/eslint-plugin-query": "^5.67.2",
|
||||
"@tanstack/react-query-devtools": "^5.67.2",
|
||||
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
|
||||
"@types/node": "^22.10.2",
|
||||
"@types/react": "^19.0.2",
|
||||
"@types/react-dom": "19.0.2",
|
||||
|
|
|
|||
Loading…
Reference in New Issue