70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card';
|
|
import { Badge } from '../../ui/badge';
|
|
import { Globe } from 'lucide-react';
|
|
import { RootState } from '../../../store';
|
|
|
|
interface ZonesOverviewProps {
|
|
selectedZone: string;
|
|
onZoneClick: (zoneId: string) => void;
|
|
}
|
|
|
|
export const ZonesOverview: React.FC<ZonesOverviewProps> = ({ selectedZone, onZoneClick }) => {
|
|
const { zones, regionalOffices, asms } = useSelector((state: RootState) => state.master);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
|
{zones.map((zone: any) => {
|
|
const zoneRegions = regionalOffices.filter((r: any) => r.zoneId === zone.id);
|
|
const zoneASMs = asms.filter((a: any) => a.zoneId === zone.id);
|
|
const totalRegionalOfficers = zoneRegions.reduce((sum: number, region: any) => sum + region.regionalOfficerCount, 0);
|
|
|
|
return (
|
|
<Card
|
|
key={zone.id}
|
|
className={`border-2 transition-all cursor-pointer ${selectedZone === zone.id ? 'border-amber-600 shadow-lg' : 'hover:border-amber-400'
|
|
}`}
|
|
onClick={() => onZoneClick(zone.id)}
|
|
>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Globe className="w-5 h-5 text-amber-600" />
|
|
<CardTitle className="text-lg">{zone.name} Zone</CardTitle>
|
|
</div>
|
|
<Badge variant="outline" className="text-xs">{zone.code}</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm">
|
|
<p className="text-slate-600 text-xs leading-relaxed mb-3">{zone.description}</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-500">States</span>
|
|
<Badge variant="outline">{zone.states.length}</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-500">Regions</span>
|
|
<Badge className="bg-indigo-600">{zoneRegions.length}</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-500">Regional Officers</span>
|
|
<Badge className="bg-purple-600">{totalRegionalOfficers}</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-500">ASMs</span>
|
|
<Badge className="bg-green-600">{zoneASMs.length}</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-500">ZMs</span>
|
|
<Badge className="bg-blue-600">{zone.zmCount}</Badge>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|