214 lines
8.5 KiB
TypeScript
214 lines
8.5 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Search, Eye, ChevronLeft, ChevronRight, Filter } from "lucide-react";
|
|
import { userService } from "@/services";
|
|
import { format } from "date-fns";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function UsersPage() {
|
|
const navigate = useNavigate();
|
|
const [page, setPage] = useState(1);
|
|
const [limit] = useState(15);
|
|
const [search, setSearch] = useState("");
|
|
const [roleFilter, setRoleFilter] = useState<string>("all");
|
|
|
|
const { data: usersData, isLoading } = useQuery({
|
|
queryKey: ["admin", "users", page, limit, search, roleFilter],
|
|
queryFn: async () => {
|
|
const params: Record<string, string | number | boolean> = { page, limit };
|
|
if (search) params.search = search;
|
|
if (roleFilter !== "all") params.role = roleFilter;
|
|
return await userService.getUsers(params);
|
|
},
|
|
});
|
|
|
|
const getRoleBadgeColor = (role: string) => {
|
|
switch (role) {
|
|
case "ADMIN":
|
|
return "text-rose-600 bg-rose-50 border-rose-100";
|
|
case "USER":
|
|
return "text-blue-600 bg-blue-50 border-blue-100";
|
|
case "VIEWER":
|
|
return "text-emerald-600 bg-emerald-50 border-emerald-100";
|
|
default:
|
|
return "text-gray-600 bg-gray-50 border-gray-100";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 max-w-7xl mx-auto bg-white p-4 min-h-screen">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 tracking-tight">
|
|
Users
|
|
</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
Manage system access and permissions.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{/* View only access: Add User and Import buttons removed */}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="border shadow-none rounded-none">
|
|
<CardHeader className="border-b pb-4 flex flex-row items-center justify-between space-y-0">
|
|
<CardTitle className="text-xs font-bold uppercase tracking-widest text-gray-400">
|
|
User Directory
|
|
</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative w-64">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
|
<Input
|
|
className="pl-10 h-9 rounded-none border-gray-200 text-xs"
|
|
placeholder="Search email or name..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9 rounded-none border-gray-200"
|
|
>
|
|
<Filter className="w-4 h-4 mr-2" /> Filter
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left">
|
|
<thead className="bg-gray-50 border-b">
|
|
<tr>
|
|
<th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
|
User
|
|
</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
|
Role
|
|
</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
|
Status
|
|
</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
|
Created
|
|
</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest text-right">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{isLoading ? (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
className="px-6 py-20 text-center text-gray-400 animate-pulse font-medium uppercase tracking-widest text-[10px]"
|
|
>
|
|
Retrieving user data...
|
|
</td>
|
|
</tr>
|
|
) : usersData?.data && usersData.data.length > 0 ? (
|
|
usersData.data.map((user: any) => (
|
|
<tr
|
|
key={user.id}
|
|
className="hover:bg-gray-50 transition-colors group"
|
|
>
|
|
<td className="px-6 py-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-bold text-gray-900">
|
|
{user.firstName} {user.lastName}
|
|
</span>
|
|
<span className="text-[10px] text-gray-400">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span
|
|
className={cn(
|
|
"px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest rounded-none border",
|
|
getRoleBadgeColor(user.role),
|
|
)}
|
|
>
|
|
{user.role}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span
|
|
className={cn(
|
|
"px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest rounded-none border",
|
|
user.isActive
|
|
? "text-emerald-600 bg-emerald-50 border-emerald-100"
|
|
: "text-slate-600 bg-slate-50 border-slate-100",
|
|
)}
|
|
>
|
|
{user.isActive ? "Active" : "Inactive"}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-500">
|
|
{format(new Date(user.createdAt), "MMM dd, yyyy")}
|
|
</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-none"
|
|
onClick={() => navigate(`/admin/users/${user.id}`)}
|
|
>
|
|
<Eye className="w-4 h-4 text-gray-400" />
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
className="px-6 py-20 text-center text-gray-400 italic"
|
|
>
|
|
No users found.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</CardContent>
|
|
{usersData && (
|
|
<div className="p-4 border-t flex items-center justify-between bg-gray-50/30">
|
|
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
|
Showing {(page - 1) * limit + 1} to{" "}
|
|
{Math.min(page * limit, usersData.total)} of {usersData.total}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-none"
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
disabled={page === 1}
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-none"
|
|
onClick={() => setPage((p) => p + 1)}
|
|
disabled={page * limit >= usersData.total}
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|