115 lines
4.5 KiB
TypeScript
115 lines
4.5 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { Users, Plus, Edit2, Trash2 } from 'lucide-react';
|
|
import { RootState } from '@/store';
|
|
|
|
interface ZMManagementProps {
|
|
selectedZone: string;
|
|
onAddZM: () => void;
|
|
onEditZM: (zm: any) => void;
|
|
onDeleteZM: (id: string, name: string) => void;
|
|
}
|
|
|
|
export const ZMManagement: React.FC<ZMManagementProps> = ({
|
|
selectedZone, onAddZM, onEditZM, onDeleteZM
|
|
}) => {
|
|
const { zonalManagers } = useSelector((state: RootState) => state.master);
|
|
|
|
const filteredZMs = (zonalManagers || []).filter((zm: any) =>
|
|
selectedZone === 'all' ||
|
|
zm.zoneId === selectedZone ||
|
|
(zm.zones && zm.zones.includes(selectedZone))
|
|
);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>Zonal Managers (DD-ZM)</CardTitle>
|
|
<CardDescription>Manage Zonal Managers and their region assignments</CardDescription>
|
|
</div>
|
|
<Button onClick={onAddZM} className="bg-amber-600 hover:bg-amber-700">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Add ZM
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>ZM Code</TableHead>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Zone</TableHead>
|
|
<TableHead>Regions Managed</TableHead>
|
|
<TableHead>Contact</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredZMs.map((zm: any) => (
|
|
<TableRow key={zm.id}>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-4 h-4 text-blue-600" />
|
|
<span className="font-medium">{zm.zmCode || zm.code}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>{zm.name}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{(zm.zones || [zm.zoneName]).map((z: string, i: number) => (
|
|
<Badge key={i} variant="outline">{z}</Badge>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{(zm.regionNames || []).slice(0, 3).map((regionName: string, idx: number) => (
|
|
<Badge key={idx} variant="secondary" className="text-xs">
|
|
{regionName}
|
|
</Badge>
|
|
))}
|
|
{(zm.regionNames || []).length > 3 && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
+{(zm.regionNames || []).length - 3}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="text-sm">
|
|
<p className="text-slate-900">{zm.email}</p>
|
|
<p className="text-slate-500">{zm.phone}</p>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={zm.status === 'Active' ? 'default' : 'secondary'} className={zm.status === 'Active' ? 'bg-emerald-100 text-emerald-700' : ''}>
|
|
{zm.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button variant="ghost" size="sm" onClick={() => onEditZM(zm)}>
|
|
<Edit2 className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => onDeleteZM(zm.id, zm.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50">
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|