106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useUsers, useDeleteUser } from "@/hooks/use-users";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DataTable } from "@/components/common/data-table"; // Reuse Data Table
|
|
import { Plus, MoreHorizontal, Pencil, Trash } from "lucide-react"; // Import Icons
|
|
import { useState } from "react";
|
|
import { UserDialog } from "@/components/admin/user-dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
import { User } from "@/types/user";
|
|
|
|
export default function UsersPage() {
|
|
const { data: users, isLoading } = useUsers();
|
|
const deleteMutation = useDeleteUser();
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
|
|
|
const columns: ColumnDef<User>[] = [
|
|
{
|
|
accessorKey: "username",
|
|
header: "Username",
|
|
},
|
|
{
|
|
accessorKey: "email",
|
|
header: "Email",
|
|
},
|
|
{
|
|
id: "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"}>
|
|
{row.original.is_active ? "Active" : "Inactive"}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: "Actions",
|
|
cell: ({ row }) => {
|
|
const user = row.original;
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Open menu</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => { setSelectedUser(user); setDialogOpen(true); }}>
|
|
<Pencil className="mr-2 h-4 w-4" /> Edit
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className="text-red-600"
|
|
onClick={() => {
|
|
if (confirm("Are you sure?")) deleteMutation.mutate(user.user_id);
|
|
}}
|
|
>
|
|
<Trash className="mr-2 h-4 w-4" /> Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="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 roles</p>
|
|
</div>
|
|
<Button onClick={() => { setSelectedUser(null); setDialogOpen(true); }}>
|
|
<Plus className="mr-2 h-4 w-4" /> Add User
|
|
</Button>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div>Loading...</div>
|
|
) : (
|
|
<DataTable columns={columns} data={users || []} />
|
|
)}
|
|
|
|
<UserDialog
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
user={selectedUser}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|