144 lines
3.9 KiB
TypeScript
144 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DataTable } from "@/components/common/data-table";
|
|
import { UserDialog } from "@/components/admin/user-dialog";
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { MoreHorizontal, Plus, Loader2 } from "lucide-react";
|
|
import { User } from "@/types/admin";
|
|
import { adminApi } from "@/lib/api/admin";
|
|
|
|
export default function UsersPage() {
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
|
|
|
const fetchUsers = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await adminApi.getUsers();
|
|
setUsers(data);
|
|
} catch (error) {
|
|
console.error("Failed to fetch users", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchUsers();
|
|
}, []);
|
|
|
|
const columns: ColumnDef<User>[] = [
|
|
{
|
|
accessorKey: "username",
|
|
header: "Username",
|
|
},
|
|
{
|
|
accessorKey: "email",
|
|
header: "Email",
|
|
},
|
|
{
|
|
accessorKey: "first_name",
|
|
header: "Name",
|
|
cell: ({ row }) => `${row.original.first_name} ${row.original.last_name}`,
|
|
},
|
|
{
|
|
accessorKey: "is_active",
|
|
header: "Status",
|
|
cell: ({ row }) => (
|
|
<Badge variant={row.original.is_active ? "default" : "secondary"} className={row.original.is_active ? "bg-green-600 hover:bg-green-700" : ""}>
|
|
{row.original.is_active ? "Active" : "Inactive"}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
id: "roles",
|
|
header: "Roles",
|
|
cell: ({ row }) => (
|
|
<div className="flex gap-1 flex-wrap">
|
|
{row.original.roles?.map((role) => (
|
|
<Badge key={role.role_id} variant="outline">
|
|
{role.role_name}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "actions",
|
|
cell: ({ row }) => (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
setSelectedUser(row.original);
|
|
setDialogOpen(true);
|
|
}}
|
|
>
|
|
Edit
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className="text-destructive"
|
|
onClick={() => alert("Deactivate not implemented in mock")}
|
|
>
|
|
{row.original.is_active ? "Deactivate" : "Activate"}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">User Management</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Manage system users and their roles
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => {
|
|
setSelectedUser(null);
|
|
setDialogOpen(true);
|
|
}}
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Add User
|
|
</Button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center py-12">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : (
|
|
<DataTable columns={columns} data={users} />
|
|
)}
|
|
|
|
<UserDialog
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
user={selectedUser}
|
|
onSuccess={fetchUsers}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|