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 currentKey = `${selectedYear}-${selectedMonth}`
|
||||||
const currentData = prefetchedData[currentKey]
|
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 {
|
return {
|
||||||
availableYears,
|
availableYears,
|
||||||
isYearsLoading,
|
isYearsLoading,
|
||||||
yearsError,
|
yearsError,
|
||||||
crimes: currentData,
|
crimes: Array.isArray(currentData) ? currentData : [],
|
||||||
isCrimesLoading: isPrefetching && !currentData,
|
isCrimesLoading: isPrefetching || !currentData,
|
||||||
crimesError: prefetchError,
|
crimesError: prefetchError,
|
||||||
setSelectedYear,
|
setSelectedYear,
|
||||||
setSelectedMonth,
|
setSelectedMonth,
|
||||||
|
|
|
||||||
|
|
@ -145,29 +145,7 @@ export async function getCrimes() {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return crimes.map((crime) => {
|
return crimes;
|
||||||
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,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (err instanceof InputParseError) {
|
if (err instanceof InputParseError) {
|
||||||
// return {
|
// return {
|
||||||
|
|
@ -233,6 +211,8 @@ export async function getCrimeByYearAndMonth(
|
||||||
address: true,
|
address: true,
|
||||||
land_area: true,
|
land_area: true,
|
||||||
year: true,
|
year: true,
|
||||||
|
latitude: true,
|
||||||
|
longitude: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
demographics: {
|
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 {
|
return {
|
||||||
id: crime.id,
|
...crime,
|
||||||
distrcit_id: crime.district_id,
|
districts: {
|
||||||
district_name: crime.districts.name,
|
...crime.districts,
|
||||||
number_of_crime: crime.number_of_crime,
|
// Convert geographics array to single object matching the year
|
||||||
level: crime.level,
|
geographics: crime.districts.geographics[0] || null,
|
||||||
score: crime.score,
|
// Convert demographics array to single object matching the year
|
||||||
month: crime.month,
|
demographics: crime.districts.demographics[0] || null,
|
||||||
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,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return processedCrimes;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (err instanceof InputParseError) {
|
if (err instanceof InputParseError) {
|
||||||
throw new InputParseError(err.message);
|
throw new InputParseError(err.message);
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ function YearSelectorUI({
|
||||||
return (
|
return (
|
||||||
<div ref={containerRef} className="mapboxgl-year-selector">
|
<div ref={containerRef} className="mapboxgl-year-selector">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="flex items-center justify-center h-8">
|
<div className=" h-8">
|
||||||
<Skeleton className="h-full w-full rounded-md" />
|
<Skeleton className="h-full w-full rounded-md" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,12 @@
|
||||||
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"
|
import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"
|
||||||
import { Skeleton } from "@/app/_components/ui/skeleton"
|
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 MapView from "./map"
|
||||||
import { Button } from "@/app/_components/ui/button"
|
import { Button } from "@/app/_components/ui/button"
|
||||||
import { AlertCircle } from "lucide-react"
|
import { AlertCircle } from "lucide-react"
|
||||||
import { getMonthName } from "@/app/_utils/common"
|
import { getMonthName } from "@/app/_utils/common"
|
||||||
import { useRef, useState, useCallback, useMemo } from "react"
|
import { useRef, useState, useCallback, useMemo, useEffect } from "react"
|
||||||
import { CrimePopup } from "./pop-up"
|
|
||||||
import type { CrimeIncident } from "./markers/crime-marker"
|
|
||||||
import { useFullscreen } from "@/app/_hooks/use-fullscreen"
|
import { useFullscreen } from "@/app/_hooks/use-fullscreen"
|
||||||
import { Overlay } from "./overlay"
|
import { Overlay } from "./overlay"
|
||||||
import MapLegend from "./controls/map-legend"
|
import MapLegend from "./controls/map-legend"
|
||||||
|
|
@ -20,6 +18,22 @@ import MapSelectors from "./controls/map-selector"
|
||||||
import TopNavigation from "./controls/map-navigations"
|
import TopNavigation from "./controls/map-navigations"
|
||||||
import CrimeSidebar from "./sidebar/map-sidebar"
|
import CrimeSidebar from "./sidebar/map-sidebar"
|
||||||
import SidebarToggle from "./sidebar/sidebar-toggle"
|
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() {
|
export default function CrimeMap() {
|
||||||
// State for sidebar
|
// State for sidebar
|
||||||
|
|
@ -66,33 +80,34 @@ export default function CrimeMap() {
|
||||||
if (!crimes) return []
|
if (!crimes) return []
|
||||||
if (selectedCategory === "all") return crimes
|
if (selectedCategory === "all") return crimes
|
||||||
|
|
||||||
return crimes.map((district: { incidents: CrimeIncident[], number_of_crime: number }) => ({
|
return crimes.map((crime: ICrimeData) => {
|
||||||
...district,
|
const filteredIncidents = crime.crime_incidents.filter(
|
||||||
incidents: district.incidents.filter(incident =>
|
incident => incident.crime_categories.name === selectedCategory
|
||||||
incident.category === selectedCategory
|
)
|
||||||
),
|
|
||||||
// Update number_of_crime to reflect the filtered count
|
return {
|
||||||
number_of_crime: district.incidents.filter(
|
...crime,
|
||||||
incident => incident.category === selectedCategory
|
crime_incidents: filteredIncidents,
|
||||||
).length
|
number_of_crime: filteredIncidents.length
|
||||||
}))
|
}
|
||||||
|
})
|
||||||
}, [crimes, selectedCategory])
|
}, [crimes, selectedCategory])
|
||||||
|
|
||||||
// Extract all incidents from all districts for marker display
|
// Extract all incidents from all districts for marker display
|
||||||
const allIncidents = useMemo(() => {
|
const allIncidents = useMemo(() => {
|
||||||
if (!filteredCrimes) return []
|
if (!filteredCrimes) return []
|
||||||
|
|
||||||
return filteredCrimes.flatMap((district: { incidents: CrimeIncident[] }) =>
|
return filteredCrimes.flatMap((crime: ICrimeData) =>
|
||||||
district.incidents.map((incident) => ({
|
crime.crime_incidents.map((incident) => ({
|
||||||
id: incident.id,
|
id: incident.id,
|
||||||
timestamp: incident.timestamp,
|
timestamp: incident.timestamp,
|
||||||
description: incident.description,
|
description: incident.description,
|
||||||
status: incident.status,
|
status: incident.status,
|
||||||
category: incident.category,
|
category: incident.crime_categories.name,
|
||||||
type: incident.type,
|
type: incident.crime_categories.type,
|
||||||
address: incident.address,
|
address: incident.locations.address,
|
||||||
latitude: incident.latitude,
|
latitude: incident.locations.latitude,
|
||||||
longitude: incident.longitude,
|
longitude: incident.locations.longitude,
|
||||||
}))
|
}))
|
||||||
)
|
)
|
||||||
}, [filteredCrimes])
|
}, [filteredCrimes])
|
||||||
|
|
@ -104,9 +119,41 @@ export default function CrimeMap() {
|
||||||
|
|
||||||
// Handle incident marker click
|
// Handle incident marker click
|
||||||
const handleIncidentClick = (incident: CrimeIncident) => {
|
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
|
// Reset filters
|
||||||
const resetFilters = useCallback(() => {
|
const resetFilters = useCallback(() => {
|
||||||
setSelectedYear(2024)
|
setSelectedYear(2024)
|
||||||
|
|
@ -156,53 +203,70 @@ export default function CrimeMap() {
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="relative h-[600px]" ref={mapContainerRef}>
|
<div className="relative h-[600px]" ref={mapContainerRef}>
|
||||||
<MapView mapStyle="mapbox://styles/mapbox/dark-v11" className="h-[600px] w-full rounded-md">
|
<div className={cn(
|
||||||
{/* District Layer with crime data */}
|
"transition-all duration-300 ease-in-out",
|
||||||
<DistrictLayer
|
!sidebarCollapsed && isFullscreen && "ml-[400px]"
|
||||||
onClick={handleDistrictClick}
|
)}>
|
||||||
crimes={filteredCrimes || []}
|
<MapView mapStyle="mapbox://styles/mapbox/dark-v11" className="h-[600px] w-full rounded-md">
|
||||||
year={selectedYear.toString()}
|
{/* District Layer with crime data */}
|
||||||
month={selectedMonth.toString()}
|
<DistrictLayer
|
||||||
filterCategory={selectedCategory}
|
onClick={handleDistrictClick}
|
||||||
/>
|
crimes={filteredCrimes || []}
|
||||||
|
year={selectedYear.toString()}
|
||||||
{/* Popup for selected incident */}
|
month={selectedMonth.toString()}
|
||||||
{selectedIncident && (
|
filterCategory={selectedCategory}
|
||||||
<CrimePopup
|
|
||||||
longitude={selectedIncident.longitude}
|
|
||||||
latitude={selectedIncident.latitude}
|
|
||||||
onClose={() => setSelectedIncident(null)}
|
|
||||||
crime={selectedIncident}
|
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Components that are only visible in fullscreen mode */}
|
{/* Popup for selected incident */}
|
||||||
{isFullscreen && (
|
{selectedIncident && selectedIncident.longitude !== undefined && selectedIncident.latitude !== undefined && (
|
||||||
<>
|
<>
|
||||||
<Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none">
|
{console.log("Rendering CrimePopup with:", selectedIncident)}
|
||||||
<div className="flex justify-center">
|
<CrimePopup
|
||||||
<TopNavigation
|
longitude={selectedIncident.longitude}
|
||||||
activeControl={activeControl}
|
latitude={selectedIncident.latitude}
|
||||||
onControlChange={setActiveControl}
|
onClose={() => setSelectedIncident(null)}
|
||||||
selectedYear={selectedYear}
|
crime={{
|
||||||
setSelectedYear={setSelectedYear}
|
...selectedIncident,
|
||||||
selectedMonth={selectedMonth}
|
latitude: selectedIncident.latitude,
|
||||||
setSelectedMonth={setSelectedMonth}
|
longitude: selectedIncident.longitude
|
||||||
selectedCategory={selectedCategory}
|
}}
|
||||||
setSelectedCategory={setSelectedCategory}
|
/>
|
||||||
availableYears={availableYears || []}
|
</>
|
||||||
categories={categories}
|
)}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
{/* Sidebar component without overlay */}
|
{/* Components that are only visible in fullscreen mode */}
|
||||||
<CrimeSidebar defaultCollapsed={sidebarCollapsed} />
|
{isFullscreen && (
|
||||||
|
<>
|
||||||
|
<Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<TopNavigation
|
||||||
|
activeControl={activeControl}
|
||||||
|
onControlChange={setActiveControl}
|
||||||
|
selectedYear={selectedYear}
|
||||||
|
setSelectedYear={setSelectedYear}
|
||||||
|
selectedMonth={selectedMonth}
|
||||||
|
setSelectedMonth={setSelectedMonth}
|
||||||
|
selectedCategory={selectedCategory}
|
||||||
|
setSelectedCategory={setSelectedCategory}
|
||||||
|
availableYears={availableYears || []}
|
||||||
|
categories={categories}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Overlay>
|
||||||
|
|
||||||
<MapLegend position="bottom-right" />
|
{/* Pass selectedCategory, selectedYear, and selectedMonth to the sidebar */}
|
||||||
</>
|
<CrimeSidebar
|
||||||
)}
|
defaultCollapsed={sidebarCollapsed}
|
||||||
</MapView>
|
selectedCategory={selectedCategory}
|
||||||
|
selectedYear={selectedYear}
|
||||||
|
selectedMonth={selectedMonth}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<MapLegend position="bottom-right" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</MapView>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,11 +1,14 @@
|
||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import type React from "react"
|
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 { type ViewState, Map, type MapRef, NavigationControl, GeolocateControl } from "react-map-gl/mapbox"
|
||||||
import { FullscreenControl } 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 { BASE_LATITUDE, BASE_LONGITUDE, BASE_ZOOM, MAPBOX_STYLES, type MapboxStyle } from "@/app/_utils/const/map"
|
||||||
import "mapbox-gl/dist/mapbox-gl.css"
|
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 {
|
interface MapViewProps {
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
|
|
@ -29,7 +32,8 @@ export default function MapView({
|
||||||
mapboxApiAccessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN,
|
mapboxApiAccessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN,
|
||||||
onMoveEnd,
|
onMoveEnd,
|
||||||
}: MapViewProps) {
|
}: MapViewProps) {
|
||||||
const [mapRef, setMapRef] = useState<MapRef | null>(null)
|
const mapContainerRef = useRef<MapRef | null>(null);
|
||||||
|
const mapRef = useRef<MapRef | null>(null);
|
||||||
|
|
||||||
const defaultViewState: Partial<ViewState> = {
|
const defaultViewState: Partial<ViewState> = {
|
||||||
longitude: BASE_LONGITUDE,
|
longitude: BASE_LONGITUDE,
|
||||||
|
|
@ -40,6 +44,32 @@ export default function MapView({
|
||||||
...initialViewState,
|
...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(
|
const handleMoveEnd = useCallback(
|
||||||
(event: any) => {
|
(event: any) => {
|
||||||
if (onMoveEnd) {
|
if (onMoveEnd) {
|
||||||
|
|
@ -54,16 +84,18 @@ export default function MapView({
|
||||||
<div className="flex h-full">
|
<div className="flex h-full">
|
||||||
<div className="relative flex-grow h-full transition-all duration-300">
|
<div className="relative flex-grow h-full transition-all duration-300">
|
||||||
<Map
|
<Map
|
||||||
|
ref={mapRef}
|
||||||
mapStyle={mapStyle}
|
mapStyle={mapStyle}
|
||||||
mapboxAccessToken={mapboxApiAccessToken}
|
mapboxAccessToken={mapboxApiAccessToken}
|
||||||
initialViewState={defaultViewState}
|
initialViewState={defaultViewState}
|
||||||
|
onLoad={handleMapLoad}
|
||||||
onMoveEnd={handleMoveEnd}
|
onMoveEnd={handleMoveEnd}
|
||||||
style={{ width: "100%", height: "100%" }}
|
style={{ width: "100%", height: "100%" }}
|
||||||
attributionControl={false}
|
attributionControl={false}
|
||||||
preserveDrawingBuffer={true} // This helps with fullscreen stability
|
preserveDrawingBuffer={true} // This helps with fullscreen stability
|
||||||
>
|
>
|
||||||
<FullscreenControl position="top-right" />
|
{/* <FullscreenControl position="top-right" />
|
||||||
<NavigationControl position="top-right" showCompass={false} />
|
<NavigationControl position="top-right" showCompass={false} /> */}
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
</Map>
|
</Map>
|
||||||
|
|
@ -71,4 +103,4 @@ export default function MapView({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -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"
|
"use client"
|
||||||
|
|
||||||
import React, { useState } from "react"
|
import React, { useState, useEffect, useMemo } from "react"
|
||||||
import { AlertTriangle, BarChart, ChevronRight, MapPin, Skull, Shield, FileText } from "lucide-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 { 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 { cn } from "@/app/_lib/utils"
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/app/_components/ui/tabs"
|
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 {
|
interface CrimeSidebarProps {
|
||||||
className?: string
|
className?: string
|
||||||
defaultCollapsed?: boolean
|
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 [isCollapsed, setIsCollapsed] = useState(defaultCollapsed)
|
||||||
const [activeTab, setActiveTab] = useState("incidents")
|
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 (
|
return (
|
||||||
<div className={cn(
|
<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 ",
|
"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-[-100%]" : "translate-x-0",
|
isCollapsed ? "-translate-x-full" : "translate-x-0",
|
||||||
className
|
className
|
||||||
)}>
|
)}>
|
||||||
<div className="relative h-full flex items-stretch">
|
<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-[400px]">
|
||||||
<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 max-h-full overflow-hidden">
|
||||||
<div className="p-4 text-white h-full flex flex-col">
|
<CardHeader className="p-0 pb-2 shrink-0">
|
||||||
<CardHeader className="p-0 pb-2">
|
|
||||||
<CardTitle className="text-xl font-semibold flex items-center gap-2">
|
<CardTitle className="text-xl font-semibold flex items-center gap-2">
|
||||||
<AlertTriangle className="h-5 w-5" />
|
<AlertTriangle className="h-5 w-5" />
|
||||||
Crime Analysis
|
Crime Analysis
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
|
{!isCrimesLoading && (
|
||||||
|
<CardDescription className="text-xs text-white/60">
|
||||||
|
{getTimePeriodDisplay()}
|
||||||
|
</CardDescription>
|
||||||
|
)}
|
||||||
</CardHeader>
|
</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">
|
<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="statistics" className="flex-1">Statistics</TabsTrigger>
|
||||||
<TabsTrigger value="reports" className="flex-1">Reports</TabsTrigger>
|
<TabsTrigger value="info" className="flex-1">Information</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto overflow-x-hidden pr-1 max-h-[calc(100vh-10rem)]">
|
<div className="flex-1 overflow-y-auto overflow-x-hidden pr-1">
|
||||||
<TabsContent value="incidents" className="m-0 p-0">
|
<TabsContent value="incidents" className="m-0 p-0 space-y-4">
|
||||||
<SidebarSection title="Recent Incidents" icon={<AlertTriangle className="h-4 w-4 text-red-400" />}>
|
{isCrimesLoading ? (
|
||||||
<div className="space-y-2">
|
<div className="space-y-4">
|
||||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
<Skeleton className="h-24 w-full" />
|
||||||
<IncidentCard key={i} />
|
<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">
|
||||||
|
<Skeleton className="h-20 w-full" />
|
||||||
|
<Skeleton className="h-20 w-full" />
|
||||||
|
<Skeleton className="h-20 w-full" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SidebarSection>
|
) : (
|
||||||
|
<>
|
||||||
|
<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>
|
||||||
|
|
||||||
<TabsContent value="statistics" className="m-0 p-0">
|
<TabsContent value="statistics" className="m-0 p-0 space-y-4">
|
||||||
<SidebarSection title="Crime Overview" icon={<BarChart className="h-4 w-4 text-blue-400" />}>
|
{isCrimesLoading ? (
|
||||||
<div className="space-y-2">
|
<div className="space-y-4">
|
||||||
<StatCard title="Total Incidents" value="254" change="+12%" />
|
<Skeleton className="h-64 w-full" />
|
||||||
<StatCard title="Hot Zones" value="6" change="+2" />
|
<Skeleton className="h-24 w-full" />
|
||||||
<StatCard title="Case Clearance" value="68%" change="+5%" isPositive />
|
<Skeleton className="h-36 w-full" />
|
||||||
|
<Skeleton className="h-48 w-full" />
|
||||||
</div>
|
</div>
|
||||||
</SidebarSection>
|
) : (
|
||||||
|
<>
|
||||||
|
<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
|
||||||
|
|
||||||
<Separator className="bg-white/20 my-4" />
|
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="Most Reported" icon={<Skull className="h-4 w-4 text-amber-400" />}>
|
<SidebarSection title="Crime Overview" icon={<BarChart className="h-4 w-4 text-blue-400" />}>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<CrimeTypeCard type="Theft" count={42} percentage={23} />
|
<StatCard
|
||||||
<CrimeTypeCard type="Assault" count={28} percentage={15} />
|
title="Total Incidents"
|
||||||
<CrimeTypeCard type="Vandalism" count={19} percentage={10} />
|
value={crimeStats.totalIncidents.toString()}
|
||||||
<CrimeTypeCard type="Burglary" count={15} percentage={8} />
|
change={`${Object.keys(crimeStats.districts).length} districts`}
|
||||||
</div>
|
/>
|
||||||
</SidebarSection>
|
<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-2" />
|
||||||
|
|
||||||
|
<SidebarSection title="Most Common Crimes" icon={<Skull className="h-4 w-4 text-amber-400" />}>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{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>
|
||||||
|
|
||||||
<TabsContent value="reports" className="m-0 p-0">
|
<TabsContent value="info" className="m-0 p-0 space-y-4">
|
||||||
<SidebarSection title="Recent Reports" icon={<FileText className="h-4 w-4 text-indigo-400" />}>
|
<SidebarSection title="Map Legend" icon={<MapIcon className="h-4 w-4 text-blue-400" />}>
|
||||||
<div className="space-y-2">
|
<Card className="bg-black/20 border border-white/10">
|
||||||
<ReportCard
|
<CardContent className="p-3 text-xs space-y-2">
|
||||||
title="Monthly Crime Summary"
|
<div className="space-y-2">
|
||||||
date="June 15, 2024"
|
<h4 className="font-medium mb-1">Crime Severity</h4>
|
||||||
author="Dept. Analysis Team"
|
<div className="flex items-center gap-2">
|
||||||
/>
|
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.low }}></div>
|
||||||
<ReportCard
|
<span>Low Crime Rate</span>
|
||||||
title="High Risk Areas Analysis"
|
</div>
|
||||||
date="June 12, 2024"
|
<div className="flex items-center gap-2">
|
||||||
author="Regional Coordinator"
|
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.medium }}></div>
|
||||||
/>
|
<span>Medium Crime Rate</span>
|
||||||
<ReportCard
|
</div>
|
||||||
title="Case Resolution Statistics"
|
<div className="flex items-center gap-2">
|
||||||
date="June 10, 2024"
|
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.high }}></div>
|
||||||
author="Investigation Unit"
|
<span>High Crime Rate</span>
|
||||||
/>
|
</div>
|
||||||
<ReportCard
|
</div>
|
||||||
title="Quarterly Report Q2 2024"
|
|
||||||
date="June 1, 2024"
|
<Separator className="bg-white/20 my-2" />
|
||||||
author="Crime Analysis Department"
|
|
||||||
/>
|
<div className="space-y-2">
|
||||||
</div>
|
<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>
|
</SidebarSection>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,13 +643,12 @@ export default function CrimeSidebar({ className, defaultCollapsed = true }: Cri
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Toggle Button - always visible and positioned correctly */}
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||||
className={cn(
|
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",
|
"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",
|
"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"}
|
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 {
|
interface SidebarSectionProps {
|
||||||
title: string
|
title: string
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
|
|
@ -133,7 +670,7 @@ interface SidebarSectionProps {
|
||||||
|
|
||||||
function SidebarSection({ title, children, icon }: SidebarSectionProps) {
|
function SidebarSection({ title, children, icon }: SidebarSectionProps) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-sm font-medium text-white/80 mb-2 flex items-center gap-1.5">
|
<h3 className="text-sm font-medium text-white/80 mb-2 flex items-center gap-1.5">
|
||||||
{icon}
|
{icon}
|
||||||
{title}
|
{title}
|
||||||
|
|
@ -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 (
|
return (
|
||||||
<Card className="bg-white/10 border-0 text-white shadow-none">
|
<Card className="bg-white/10 border-0 text-white shadow-none">
|
||||||
<CardContent className="p-3 text-xs">
|
<CardContent className="p-3 text-xs">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<AlertTriangle className="h-4 w-4 text-red-400 shrink-0 mt-0.5" />
|
<AlertTriangle className="h-4 w-4 text-red-400 shrink-0 mt-0.5" />
|
||||||
<div>
|
<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">
|
<div className="flex items-center gap-2 mt-1 text-white/60">
|
||||||
<MapPin className="h-3 w-3" />
|
<MapPin className="h-3 w-3" />
|
||||||
<span>Jombang District</span>
|
<span>{location}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-1 text-white/60">3 hours ago</div>
|
<div className="mt-1 text-white/60">{time}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
interface StatCardProps {
|
interface StatCardProps {
|
||||||
|
|
@ -192,7 +774,7 @@ interface CrimeTypeCardProps {
|
||||||
|
|
||||||
function CrimeTypeCard({ type, count, percentage }: CrimeTypeCardProps) {
|
function CrimeTypeCard({ type, count, percentage }: CrimeTypeCardProps) {
|
||||||
return (
|
return (
|
||||||
<Card className="bg-white/10 border-0 text-white shadow-none">
|
<Card className="bg-white/10 border-0 text-white shadow-none">
|
||||||
<CardContent className="p-3">
|
<CardContent className="p-3">
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<span className="font-medium">{type}</span>
|
<span className="font-medium">{type}</span>
|
||||||
|
|
@ -215,7 +797,7 @@ interface ReportCardProps {
|
||||||
|
|
||||||
function ReportCard({ title, date, author }: ReportCardProps) {
|
function ReportCard({ title, date, author }: ReportCardProps) {
|
||||||
return (
|
return (
|
||||||
<Card className="bg-white/10 border-0 text-white shadow-none">
|
<Card className="bg-white/10 border-0 text-white shadow-none">
|
||||||
<CardContent className="p-3 text-xs">
|
<CardContent className="p-3 text-xs">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<FileText className="h-4 w-4 text-indigo-400 shrink-0 mt-0.5" />
|
<FileText className="h-4 w-4 text-indigo-400 shrink-0 mt-0.5" />
|
||||||
|
|
@ -232,3 +814,7 @@ function ReportCard({ title, date, author }: ReportCardProps) {
|
||||||
</Card>
|
</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'
|
'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": {
|
"dependencies": {
|
||||||
"@evyweb/ioctopus": "^1.2.0",
|
"@evyweb/ioctopus": "^1.2.0",
|
||||||
"@hookform/resolvers": "^4.1.2",
|
"@hookform/resolvers": "^4.1.2",
|
||||||
|
"@mapbox/mapbox-gl-geocoder": "^5.0.3",
|
||||||
"@prisma/client": "^6.4.1",
|
"@prisma/client": "^6.4.1",
|
||||||
"@prisma/instrumentation": "^6.5.0",
|
"@prisma/instrumentation": "^6.5.0",
|
||||||
"@radix-ui/react-alert-dialog": "^1.1.6",
|
"@radix-ui/react-alert-dialog": "^1.1.6",
|
||||||
|
|
@ -72,6 +73,7 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tanstack/eslint-plugin-query": "^5.67.2",
|
"@tanstack/eslint-plugin-query": "^5.67.2",
|
||||||
"@tanstack/react-query-devtools": "^5.67.2",
|
"@tanstack/react-query-devtools": "^5.67.2",
|
||||||
|
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
|
||||||
"@types/node": "^22.10.2",
|
"@types/node": "^22.10.2",
|
||||||
"@types/react": "^19.0.2",
|
"@types/react": "^19.0.2",
|
||||||
"@types/react-dom": "19.0.2",
|
"@types/react-dom": "19.0.2",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue