132 lines
5.3 KiB
TypeScript
132 lines
5.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Plus, Search, Map } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
import GeoStats from './GeoStats';
|
|
import ClusterCard from './ClusterCard';
|
|
import GeoMap from './GeoMap';
|
|
|
|
// Client-side API fetcher (no Directus client needed)
|
|
async function fetchGeoData(collection: string) {
|
|
const res = await fetch(`/api/directus/${collection}`);
|
|
if (!res.ok) throw new Error('Failed to fetch');
|
|
return res.json();
|
|
}
|
|
|
|
export default function GeoIntelligenceManager() {
|
|
const queryClient = useQueryClient();
|
|
const [search, setSearch] = useState('');
|
|
const [showMap, setShowMap] = useState(true);
|
|
|
|
// 1. Fetch Data via API (not Directus client)
|
|
const { data: clusters = [], isLoading: isLoadingClusters } = useQuery({
|
|
queryKey: ['geo_clusters'],
|
|
queryFn: () => fetchGeoData('geo_clusters')
|
|
});
|
|
|
|
const { data: locations = [], isLoading: isLoadingLocations } = useQuery({
|
|
queryKey: ['geo_locations'],
|
|
queryFn: () => fetchGeoData('geo_locations')
|
|
});
|
|
|
|
// 2. Mutations
|
|
const deleteMutation = useMutation({
|
|
mutationFn: async (id: string) => {
|
|
const res = await fetch(`/api/directus/geo_clusters/${id}`, { method: 'DELETE' });
|
|
if (!res.ok) throw new Error('Delete failed');
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['geo_clusters'] });
|
|
toast.success('Cluster deleted');
|
|
},
|
|
onError: (err: any) => toast.error(err.message)
|
|
});
|
|
|
|
const handleDelete = (id: string) => {
|
|
if (confirm('Delete this cluster and all its locations?')) {
|
|
deleteMutation.mutate(id);
|
|
}
|
|
};
|
|
|
|
// 3. Filter
|
|
const filteredClusters = clusters.filter((c: any) =>
|
|
c.name.toLowerCase().includes(search.toLowerCase()) ||
|
|
c.state?.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
|
|
const filteredLocations = locations.filter((l: any) =>
|
|
l.city?.toLowerCase().includes(search.toLowerCase()) ||
|
|
l.zip?.includes(search)
|
|
);
|
|
|
|
// Combine locations for map (either all if no search, or filtered)
|
|
const mapLocations = search ? filteredLocations : locations;
|
|
|
|
if (isLoadingClusters || isLoadingLocations) {
|
|
return <div className="p-8 text-zinc-500">Loading Geospatial Data...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<GeoStats clusters={clusters} locations={locations} />
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Left Column: List */}
|
|
<div className="lg:col-span-1 space-y-4">
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-2.5 h-4 w-4 text-zinc-500" />
|
|
<Input
|
|
placeholder="Search clusters..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-9 bg-zinc-950 border-zinc-800"
|
|
/>
|
|
</div>
|
|
<Button size="icon" variant={showMap ? "secondary" : "ghost"} onClick={() => setShowMap(!showMap)}>
|
|
<Map className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-4 max-h-[600px] overflow-y-auto pr-2">
|
|
<Button className="w-full bg-blue-600 hover:bg-blue-500 mb-2">
|
|
<Plus className="mr-2 h-4 w-4" /> New Cluster
|
|
</Button>
|
|
|
|
{filteredClusters.map((cluster: any) => (
|
|
<ClusterCard
|
|
key={cluster.id}
|
|
cluster={cluster}
|
|
locations={locations}
|
|
onEdit={(id) => console.log('Edit', id)}
|
|
onDelete={handleDelete}
|
|
onTarget={(id) => toast.info(`Targeting ${cluster.name} for content`)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Map */}
|
|
<div className="lg:col-span-2 space-y-4">
|
|
{showMap && (
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-xl p-1 shadow-2xl">
|
|
{/* Client-side only rendering for map is handled inside GeoMap/Astro usually,
|
|
but since this is React component loaded via client:load, it mounts in browser. */}
|
|
<GeoMap locations={mapLocations} clusters={clusters} />
|
|
</div>
|
|
)}
|
|
|
|
{!showMap && (
|
|
<div className="h-[400px] flex items-center justify-center border border-dashed border-zinc-800 rounded-xl text-zinc-500">
|
|
Map view hidden
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|