581 lines
30 KiB
TypeScript
581 lines
30 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { adminService } from '../../services/admin.service';
|
|
import { masterService } from '../../services/master.service';
|
|
import { Card, CardContent } from '../ui/card';
|
|
import { Badge } from '../ui/badge';
|
|
import { Button } from '../ui/button';
|
|
import { Input } from '../ui/input';
|
|
import { Label } from '../ui/label';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
|
import { Switch } from '../ui/switch';
|
|
import {
|
|
Users,
|
|
UserPlus,
|
|
Search,
|
|
Edit2,
|
|
Trash2,
|
|
Shield,
|
|
Mail,
|
|
Phone,
|
|
Filter,
|
|
RefreshCw,
|
|
CheckCircle,
|
|
XCircle
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../ui/dialog';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
|
|
|
export function UserManagementPage() {
|
|
const getParentIdByType = (location: any, parentType: string): string => {
|
|
if (!location?.parents || !Array.isArray(location.parents)) return '';
|
|
const match = location.parents.find((p: any) => p?.type === parentType);
|
|
return match?.id || '';
|
|
};
|
|
|
|
const normalizeList = (res: any, preferredKey: string): any[] => {
|
|
if (!res) return [];
|
|
if (Array.isArray(res[preferredKey])) return res[preferredKey];
|
|
if (Array.isArray(res.data)) return res.data;
|
|
return [];
|
|
};
|
|
|
|
const [users, setUsers] = useState<any[]>([]);
|
|
const [roles, setRoles] = useState<any[]>([]);
|
|
const [zones, setZones] = useState<any[]>([]);
|
|
const [regions, setRegions] = useState<any[]>([]);
|
|
const [states, setStates] = useState<any[]>([]);
|
|
const [districts, setDistricts] = useState<any[]>([]);
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [roleFilter, setRoleFilter] = useState('all');
|
|
const [statusFilter, setStatusFilter] = useState('all');
|
|
|
|
// Edit/Add Modal State
|
|
const [showUserModal, setShowUserModal] = useState(false);
|
|
const [editingUser, setEditingUser] = useState<any>(null);
|
|
const [formData, setFormData] = useState({
|
|
fullName: '',
|
|
email: '',
|
|
roleCode: '',
|
|
status: 'active',
|
|
isActive: true,
|
|
mobileNumber: '',
|
|
department: '',
|
|
designation: '',
|
|
employeeId: '',
|
|
zoneId: '',
|
|
regionId: '',
|
|
stateId: '',
|
|
districtId: ''
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [usersRes, rolesRes, zonesRes, regionsRes] = await Promise.all([
|
|
adminService.getAllUsers(),
|
|
masterService.getRoles(),
|
|
masterService.getZones(),
|
|
masterService.getRegions()
|
|
]) as any[];
|
|
|
|
if (usersRes.success) setUsers(usersRes.data);
|
|
if (rolesRes.success) setRoles(rolesRes.data);
|
|
if (zonesRes.success) setZones(zonesRes.data);
|
|
if (regionsRes.success) setRegions(regionsRes.data);
|
|
} catch (error) {
|
|
toast.error('Failed to load user management data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Load states when zone changes (or on edit)
|
|
useEffect(() => {
|
|
if (formData.zoneId) {
|
|
masterService.getStates(formData.zoneId).then((res: any) => {
|
|
if (res && res.success) setStates(normalizeList(res, 'states'));
|
|
});
|
|
} else {
|
|
setStates([]);
|
|
}
|
|
}, [formData.zoneId]);
|
|
|
|
// Load districts when state changes
|
|
useEffect(() => {
|
|
if (formData.stateId) {
|
|
masterService.getDistricts(formData.stateId).then((res: any) => {
|
|
if (res && res.success) setDistricts(normalizeList(res, 'districts'));
|
|
});
|
|
} else {
|
|
setDistricts([]);
|
|
}
|
|
}, [formData.stateId]);
|
|
|
|
// Load areas when district changes (Disabled)
|
|
useEffect(() => {
|
|
// Area selection removed as per user request
|
|
}, [formData.districtId]);
|
|
|
|
const handleEditUser = (user: any) => {
|
|
const userLocation = user.location;
|
|
const userLocationType = userLocation?.type;
|
|
|
|
const zoneId = user.zoneId || (userLocationType === 'zone' ? userLocation?.id : getParentIdByType(userLocation, 'zone'));
|
|
const regionId = user.regionId || (userLocationType === 'region' ? userLocation?.id : getParentIdByType(userLocation, 'region'));
|
|
const stateId = user.stateId || (userLocationType === 'state' ? userLocation?.id : getParentIdByType(userLocation, 'state'));
|
|
const districtId = user.districtId || (userLocationType === 'district' ? userLocation?.id : getParentIdByType(userLocation, 'district'));
|
|
|
|
setEditingUser(user);
|
|
setFormData({
|
|
fullName: user.fullName || '',
|
|
email: user.email || '',
|
|
roleCode: user.roleCode || '',
|
|
status: user.status || 'active',
|
|
isActive: user.isActive ?? true,
|
|
mobileNumber: user.mobileNumber || '',
|
|
department: user.department || '',
|
|
designation: user.designation || '',
|
|
employeeId: user.employeeId || '',
|
|
zoneId: zoneId || '',
|
|
regionId: regionId || '',
|
|
stateId: stateId || '',
|
|
districtId: districtId || ''
|
|
});
|
|
setShowUserModal(true);
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!formData.fullName || !formData.email || !formData.roleCode) {
|
|
toast.error('Please fill in all required fields');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const userLocationId = formData.districtId || formData.stateId || formData.regionId || formData.zoneId || null;
|
|
const submitData = {
|
|
...formData,
|
|
locationId: userLocationId
|
|
};
|
|
|
|
if (editingUser) {
|
|
const res = await adminService.updateUser(editingUser.id, submitData);
|
|
if (res.success) {
|
|
setShowUserModal(false);
|
|
fetchData();
|
|
}
|
|
} else {
|
|
const res = await adminService.createUser(submitData);
|
|
if (res.success) {
|
|
toast.success('User created successfully');
|
|
setFormData({
|
|
fullName: '', email: '', roleCode: '', status: 'active', isActive: true,
|
|
mobileNumber: '', department: '', designation: '', employeeId: '',
|
|
zoneId: '', regionId: '', stateId: '', districtId: ''
|
|
});
|
|
setShowUserModal(false);
|
|
fetchData();
|
|
} else {
|
|
toast.error(res.message || 'Failed to create user');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
const message = (error as any)?.response?.data?.message || (error as any)?.message || 'Operation failed';
|
|
toast.error(message);
|
|
}
|
|
};
|
|
|
|
const toggleUserStatus = async (user: any) => {
|
|
const newStatus = user.status === 'active' ? 'inactive' : 'active';
|
|
const newActive = !user.isActive;
|
|
|
|
const res = await adminService.updateUserStatus(user.id, newStatus, newActive);
|
|
if (res.success) {
|
|
fetchData();
|
|
}
|
|
};
|
|
|
|
const filteredUsers = users.filter(user => {
|
|
const matchesSearch =
|
|
user.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.email?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.employeeId?.toLowerCase().includes(searchQuery.toLowerCase());
|
|
|
|
const matchesRole = roleFilter === 'all' || user.roleCode === roleFilter;
|
|
const matchesStatus = statusFilter === 'all' || user.status === statusFilter;
|
|
|
|
return matchesSearch && matchesRole && matchesStatus;
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-6 max-w-7xl mx-auto py-6 px-4">
|
|
{/* Header section */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
|
|
<Users className="w-6 h-6 text-re-red" />
|
|
User Management
|
|
</h1>
|
|
<p className="text-slate-500">Manage system users, roles, and access permissions.</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => {
|
|
setEditingUser(null); setFormData({
|
|
fullName: '', email: '', roleCode: '', status: 'active', isActive: true,
|
|
mobileNumber: '', department: '', designation: '', employeeId: '',
|
|
zoneId: '', regionId: '', stateId: '', districtId: ''
|
|
}); setShowUserModal(true);
|
|
}}
|
|
className="bg-re-red hover:bg-re-red-hover text-white shrink-0"
|
|
>
|
|
<UserPlus className="w-4 h-4 mr-2" />
|
|
Add New User
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Filters section */}
|
|
<Card className="border-slate-200">
|
|
<CardContent className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<Input
|
|
placeholder="Search by name, email, ID..."
|
|
className="pl-10"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Select value={roleFilter} onValueChange={setRoleFilter}>
|
|
<SelectTrigger>
|
|
<Filter className="w-4 h-4 mr-2 text-slate-400" />
|
|
<SelectValue placeholder="Filter by Role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Roles</SelectItem>
|
|
{roles.map(role => (
|
|
<SelectItem key={role.id} value={role.roleCode}>{role.roleName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Filter by Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Status</SelectItem>
|
|
<SelectItem value="active">Active</SelectItem>
|
|
<SelectItem value="inactive">Inactive</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline" onClick={fetchData} disabled={loading}>
|
|
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Users Table */}
|
|
<Card className="border-slate-200 overflow-hidden">
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader className="bg-slate-50">
|
|
<TableRow>
|
|
<TableHead>User Information</TableHead>
|
|
<TableHead>Geographical Mapping</TableHead>
|
|
<TableHead>Account Details</TableHead>
|
|
<TableHead>Role & Department</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="h-40 text-center">
|
|
<div className="flex flex-col items-center justify-center space-y-2 text-slate-500">
|
|
<RefreshCw className="w-8 h-8 animate-spin" />
|
|
<p>Loading users...</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : filteredUsers.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="h-40 text-center text-slate-500">
|
|
<Users className="w-12 h-12 mx-auto mb-2 opacity-20" />
|
|
No users found matching your criteria.
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredUsers.map((user) => (
|
|
<TableRow key={user.id} className="hover:bg-slate-50/50">
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-red-100 text-re-red-hover flex items-center justify-center font-bold">
|
|
{user.fullName?.charAt(0) || user.email?.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-slate-900">{user.fullName}</div>
|
|
<div className="text-xs text-slate-500 flex items-center gap-1">
|
|
<Mail className="w-3 h-3" />
|
|
{user.email}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
|
|
Location: {user.location?.name || 'N/A'}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-xs text-slate-500">
|
|
Type: {user.location?.type ? user.location.type.toUpperCase() : 'N/A'}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<div className="text-sm font-medium">ID: {user.employeeId || 'N/A'}</div>
|
|
<div className="text-xs text-slate-500 flex items-center gap-1">
|
|
<Phone className="w-3 h-3" />
|
|
{user.mobileNumber || 'No phone'}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
|
|
<Shield className="w-3 h-3 mr-1" />
|
|
{user.roleCode}
|
|
</Badge>
|
|
<div className="text-xs text-slate-500">{user.department || 'No department'}</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex flex-col items-start gap-1">
|
|
<Badge
|
|
variant={user.status === 'active' ? 'default' : 'destructive'}
|
|
className={`text-xs ${user.status === 'active' ? 'bg-green-600 hover:bg-green-700' : ''}`}
|
|
>
|
|
{user.status === 'active' ? (
|
|
<CheckCircle className="w-3 h-3 mr-1" />
|
|
) : (
|
|
<XCircle className="w-3 h-3 mr-1" />
|
|
)}
|
|
{user.status}
|
|
</Badge>
|
|
</div>
|
|
<Switch
|
|
checked={user.isActive}
|
|
onCheckedChange={() => toggleUserStatus(user)}
|
|
/>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="ghost" size="icon" onClick={() => handleEditUser(user)}>
|
|
<Edit2 className="w-4 h-4 text-slate-400 hover:text-re-red" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon">
|
|
<Trash2 className="w-4 h-4 text-slate-400 hover:text-red-600" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* User Edit/Add Modal */}
|
|
<Dialog open={showUserModal} onOpenChange={setShowUserModal}>
|
|
<DialogContent className="max-w-2xl bg-white">
|
|
<DialogHeader>
|
|
<DialogTitle>{editingUser ? 'Edit User' : 'Add New User'}</DialogTitle>
|
|
<DialogDescription>
|
|
Modify user profiles and system access settings.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid grid-cols-2 gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="fullName">Full Name *</Label>
|
|
<Input
|
|
id="fullName"
|
|
value={formData.fullName}
|
|
onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email Address *</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="employeeId">Employee ID</Label>
|
|
<Input
|
|
id="employeeId"
|
|
value={formData.employeeId}
|
|
onChange={(e) => setFormData({ ...formData, employeeId: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="roleCode">Role *</Label>
|
|
<Select
|
|
value={formData.roleCode}
|
|
onValueChange={(val) => setFormData({ ...formData, roleCode: val })}
|
|
>
|
|
<SelectTrigger id="roleCode">
|
|
<SelectValue placeholder="Select a role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{roles.map(role => (
|
|
<SelectItem key={role.id} value={role.roleCode}>{role.roleName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="department">Department</Label>
|
|
<Input
|
|
id="department"
|
|
value={formData.department}
|
|
onChange={(e) => setFormData({ ...formData, department: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="designation">Designation</Label>
|
|
<Input
|
|
id="designation"
|
|
value={formData.designation}
|
|
onChange={(e) => setFormData({ ...formData, designation: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="mobileNumber">Mobile Number</Label>
|
|
<Input
|
|
id="mobileNumber"
|
|
value={formData.mobileNumber}
|
|
onChange={(e) => setFormData({ ...formData, mobileNumber: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="status">Account Status</Label>
|
|
<Select
|
|
value={formData.status}
|
|
onValueChange={(val) => setFormData({ ...formData, status: val })}
|
|
>
|
|
<SelectTrigger id="status">
|
|
<SelectValue placeholder="Select status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="active">Active</SelectItem>
|
|
<SelectItem value="inactive">Inactive</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Geographical Assignments */}
|
|
<div className="col-span-2 border-t pt-4 mt-2">
|
|
<h3 className="text-sm font-semibold text-slate-900 mb-1">Geographical Assignments</h3>
|
|
<p className="text-xs text-slate-500 mb-4">Optional: you can create users without territory mapping and assign later.</p>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="zoneId">Zone (Top Level)</Label>
|
|
<Select
|
|
value={formData.zoneId}
|
|
onValueChange={(val) => setFormData({ ...formData, zoneId: val, regionId: '', stateId: '', districtId: '' })}
|
|
>
|
|
<SelectTrigger id="zoneId">
|
|
<SelectValue placeholder="Select Zone" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{zones.map(zone => (
|
|
<SelectItem key={zone.id} value={zone.id}>{zone.name || zone.zoneName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="regionId">Region</Label>
|
|
<Select
|
|
value={formData.regionId}
|
|
onValueChange={(val) => setFormData({ ...formData, regionId: val })}
|
|
disabled={!formData.zoneId}
|
|
>
|
|
<SelectTrigger id="regionId">
|
|
<SelectValue placeholder="Select Region" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{regions.filter(r => (r.parents && r.parents.some((p:any) => p.id === formData.zoneId)) || r.zoneId === formData.zoneId).map(region => (
|
|
<SelectItem key={region.id} value={region.id}>{region.name || region.regionName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="stateId">State</Label>
|
|
<Select
|
|
value={formData.stateId}
|
|
onValueChange={(val) => setFormData({ ...formData, stateId: val, districtId: '' })}
|
|
disabled={!formData.zoneId}
|
|
>
|
|
<SelectTrigger id="stateId">
|
|
<SelectValue placeholder="Select State" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{states.filter(s => (s.parents && s.parents.some((p:any) => p.id === formData.zoneId)) || s.zoneId === formData.zoneId).map(state => (
|
|
<SelectItem key={state.id} value={state.id}>{state.name || state.stateName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="districtId">District</Label>
|
|
<Select
|
|
value={formData.districtId}
|
|
onValueChange={(val) => setFormData({ ...formData, districtId: val })}
|
|
disabled={!formData.stateId}
|
|
>
|
|
<SelectTrigger id="districtId">
|
|
<SelectValue placeholder="Select District" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{districts.filter(d => (d.parents && d.parents.some((p:any) => p.id === formData.stateId)) || d.stateId === formData.stateId).map(district => (
|
|
<SelectItem key={district.id} value={district.id}>{district.name || district.districtName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="bg-slate-50 -mx-6 -mb-6 p-4 rounded-b-lg">
|
|
<Button variant="outline" onClick={() => setShowUserModal(false)}>Cancel</Button>
|
|
<Button className="bg-re-red hover:bg-re-red-hover text-white" onClick={handleSubmit}>
|
|
{editingUser ? 'Save Changes' : 'Create User'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|