132 lines
4.4 KiB
TypeScript
132 lines
4.4 KiB
TypeScript
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { SquarePen, Power, Trash2, CircleCheck } from 'lucide-react';
|
|
|
|
interface TableUser {
|
|
id: string;
|
|
name: string;
|
|
email: string;
|
|
role: 'ADMIN' | 'MANAGEMENT' | 'USER';
|
|
department: string;
|
|
status: 'active' | 'inactive';
|
|
}
|
|
|
|
interface UserTableProps {
|
|
users: TableUser[];
|
|
onEdit: (userId: string) => void;
|
|
onToggleStatus: (userId: string) => void;
|
|
onDelete: (userId: string) => void;
|
|
}
|
|
|
|
const getRoleBadgeColor = (role: string) => {
|
|
switch (role.toUpperCase()) {
|
|
case 'ADMIN':
|
|
return 'bg-yellow-100 text-yellow-800 border-yellow-200';
|
|
case 'MANAGEMENT':
|
|
return 'bg-blue-100 text-blue-800 border-blue-200';
|
|
case 'USER':
|
|
return 'bg-gray-100 text-gray-800 border-gray-200';
|
|
default:
|
|
return 'bg-gray-100 text-gray-800 border-gray-200';
|
|
}
|
|
};
|
|
|
|
const getUserInitials = (name: string) => {
|
|
return name
|
|
.split(' ')
|
|
.map(n => n[0])
|
|
.join('')
|
|
.toUpperCase()
|
|
.substring(0, 2);
|
|
};
|
|
|
|
export function UserTable({ users, onEdit, onToggleStatus, onDelete }: UserTableProps) {
|
|
return (
|
|
<div className="border rounded-lg overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>User</TableHead>
|
|
<TableHead>Role</TableHead>
|
|
<TableHead>Department</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{users.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
|
|
No users found
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
users.map((user) => (
|
|
<TableRow key={user.id} className="hover:bg-muted/50">
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="size-10">
|
|
<AvatarFallback className="bg-re-green text-white">
|
|
{getUserInitials(user.name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<p className="font-medium">{user.name}</p>
|
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge className={getRoleBadgeColor(user.role)}>
|
|
{user.role}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>{user.department}</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-green-100 text-green-800 border-green-200">
|
|
<CircleCheck className="w-3 h-3 mr-1" />
|
|
{user.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onEdit(user.id)}
|
|
className="h-8"
|
|
>
|
|
<SquarePen className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onToggleStatus(user.id)}
|
|
disabled={user.role.toUpperCase() === 'ADMIN'}
|
|
className="h-8"
|
|
>
|
|
<Power className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onDelete(user.id)}
|
|
disabled={user.role.toUpperCase() === 'ADMIN'}
|
|
className="h-8 text-destructive hover:text-destructive"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|
|
|