feat: AdminUsersPage implementation
This commit is contained in:
135
web/src/pages/Admin/Users/index.tsx
Normal file
135
web/src/pages/Admin/Users/index.tsx
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
import Breadcrumbs from "@/components/ui/breadcrumbs";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import Avatar from "@/feature/Avatar";
|
||||||
|
import { useUsers } from "@/store/admin/users";
|
||||||
|
import { UserPlus } from "lucide-react";
|
||||||
|
import { useEffect, type FC } from "react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
|
const AdminUsersPage: FC = () => {
|
||||||
|
const users = useUsers((state) => state.users);
|
||||||
|
const loading = useUsers((state) => state.fetching);
|
||||||
|
const fetchUsers = useUsers((state) => state.fetchUsers);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUsers();
|
||||||
|
}, [fetchUsers]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col items-stretch w-full h-full">
|
||||||
|
<div className="p-4">
|
||||||
|
<Breadcrumbs
|
||||||
|
className="pb-2"
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
href: "/admin",
|
||||||
|
label: "Admin",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Users",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 flex flex-row items-center justify-between">
|
||||||
|
<p className="text-gray-800 dark:text-gray-300">Search...</p>
|
||||||
|
<Link to="/admin/api-services/create">
|
||||||
|
<Button className="flex flex-row items-center gap-2">
|
||||||
|
<UserPlus /> Add User
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-x-auto">
|
||||||
|
<table className="relative min-w-full border-l-0 border border-gray-300 dark:border-gray-700 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
|
||||||
|
{loading && (
|
||||||
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
|
||||||
|
<div className="text-gray-800 dark:text-gray-200 font-medium">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<thead className="bg-black/5 dark:bg-white/5 text-nowrap">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
|
||||||
|
Full Name
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
|
||||||
|
Email
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
|
||||||
|
Is Admin
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
|
||||||
|
Created At
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
|
||||||
|
Last Login
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
{!loading && users.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colSpan={5}
|
||||||
|
className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
No services found.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
users.map((user) => (
|
||||||
|
<tr
|
||||||
|
key={user.id}
|
||||||
|
className="hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||||
|
>
|
||||||
|
<td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-300 dark:border-gray-700">
|
||||||
|
<Link
|
||||||
|
to={`/admin/users/view/${user.id}`}
|
||||||
|
className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex flex-row items-center gap-3">
|
||||||
|
<Avatar
|
||||||
|
iconSize={21}
|
||||||
|
className="w-8 h-8"
|
||||||
|
avatarId={user.profile_picture ?? undefined}
|
||||||
|
/>
|
||||||
|
<p>{user.full_name}</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
|
||||||
|
{user.email}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-sm border border-gray-300 dark:border-gray-700">
|
||||||
|
<span
|
||||||
|
className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
|
||||||
|
user.is_admin
|
||||||
|
? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
|
||||||
|
: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{user.is_admin ? "Yes" : "No"}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
|
||||||
|
{new Date(user.created_at).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
|
||||||
|
{user.last_login
|
||||||
|
? new Date(user.last_login).toLocaleString()
|
||||||
|
: "never"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AdminUsersPage;
|
||||||
Reference in New Issue
Block a user