Added User List table
This commit is contained in:
67
src/components/user/change-role-dialog.tsx
Normal file
67
src/components/user/change-role-dialog.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
|
||||
import { m } from '@/paraglide/messages';
|
||||
import { UserGearIcon } from '@phosphor-icons/react';
|
||||
import { UserWithRole } from 'better-auth/plugins';
|
||||
import { useState } from 'react';
|
||||
import AdminSetUserRoleForm from '../form/admin-set-user-role-form';
|
||||
import { Button } from '../ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '../ui/dialog';
|
||||
import { Label } from '../ui/label';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
||||
|
||||
type SetRoleProps = {
|
||||
data: UserWithRole;
|
||||
};
|
||||
|
||||
const ChangeRoleAction = ({ data }: SetRoleProps) => {
|
||||
const [_open, _setOpen] = useState(false);
|
||||
const prevent = usePreventAutoFocus();
|
||||
|
||||
return (
|
||||
<Dialog open={_open} onOpenChange={_setOpen}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full cursor-pointer text-yellow-500 hover:bg-yellow-100 hover:text-yellow-600"
|
||||
>
|
||||
<UserGearIcon size={16} />
|
||||
<span className="sr-only">{m.ui_change_role_btn()}</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white">
|
||||
<Label>{m.ui_change_role_btn()}</Label>
|
||||
</TooltipContent>
|
||||
<DialogContent
|
||||
className="max-w-100 xl:max-w-2xl"
|
||||
{...prevent}
|
||||
onPointerDownOutside={(e) => e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-yellow-600">
|
||||
<UserGearIcon size={16} />
|
||||
{m.ui_change_role_btn()}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{m.ui_change_role_btn()}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
|
||||
</DialogContent>
|
||||
</Tooltip>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeRoleAction;
|
||||
67
src/components/user/change-user-status-dialog.tsx
Normal file
67
src/components/user/change-user-status-dialog.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
|
||||
import { m } from '@/paraglide/messages';
|
||||
import { LockIcon } from '@phosphor-icons/react';
|
||||
import { UserWithRole } from 'better-auth/plugins';
|
||||
import { useState } from 'react';
|
||||
import BanUserForm from '../form/admin-ban-user-form';
|
||||
import { Button } from '../ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '../ui/dialog';
|
||||
import { Label } from '../ui/label';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
||||
|
||||
type ChangeUserStatusProps = {
|
||||
data: UserWithRole;
|
||||
};
|
||||
|
||||
const ChangeUserStatusAction = ({ data }: ChangeUserStatusProps) => {
|
||||
const [_open, _setOpen] = useState(false);
|
||||
const prevent = usePreventAutoFocus();
|
||||
|
||||
return (
|
||||
<Dialog open={_open} onOpenChange={_setOpen}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full cursor-pointer text-red-500 hover:bg-red-100 hover:text-red-600"
|
||||
>
|
||||
<LockIcon size={16} />
|
||||
<span className="sr-only">{m.ui_ban_btn()}</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-red-500 [&_svg]:bg-red-500 [&_svg]:fill-red-500 text-white">
|
||||
<Label>{m.ui_ban_btn()}</Label>
|
||||
</TooltipContent>
|
||||
<DialogContent
|
||||
className="max-w-100 xl:max-w-2xl"
|
||||
{...prevent}
|
||||
onPointerDownOutside={(e) => e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-red-600">
|
||||
<LockIcon size={16} />
|
||||
{m.ui_ban_btn()}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{m.ui_change_role_btn()}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<BanUserForm data={data} onSubmit={_setOpen} />
|
||||
</DialogContent>
|
||||
</Tooltip>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeUserStatusAction;
|
||||
66
src/components/user/edit-user-dialog.tsx
Normal file
66
src/components/user/edit-user-dialog.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
|
||||
import { m } from '@/paraglide/messages';
|
||||
import { PenIcon } from '@phosphor-icons/react';
|
||||
import { UserWithRole } from 'better-auth/plugins';
|
||||
import { useState } from 'react';
|
||||
import AdminUpdateUserInfoForm from '../form/admin-update-user-info-form';
|
||||
import { Button } from '../ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '../ui/dialog';
|
||||
import { Label } from '../ui/label';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
||||
|
||||
type EditUserProps = {
|
||||
data: UserWithRole;
|
||||
};
|
||||
|
||||
const EditUserAction = ({ data }: EditUserProps) => {
|
||||
const [_open, _setOpen] = useState(false);
|
||||
const prevent = usePreventAutoFocus();
|
||||
|
||||
return (
|
||||
<Dialog open={_open} onOpenChange={_setOpen}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600"
|
||||
>
|
||||
<PenIcon size={16} />
|
||||
<span className="sr-only">{m.ui_edit_user_btn()}</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
|
||||
<Label>{m.ui_edit_user_btn()}</Label>
|
||||
</TooltipContent>
|
||||
<DialogContent
|
||||
className="max-w-100 xl:max-w-2xl"
|
||||
{...prevent}
|
||||
onPointerDownOutside={(e) => e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
|
||||
<PenIcon size={16} /> {m.ui_edit_user_btn()}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{m.ui_edit_user_btn()}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
|
||||
</DialogContent>
|
||||
</Tooltip>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditUserAction;
|
||||
67
src/components/user/set-password-dialog.tsx
Normal file
67
src/components/user/set-password-dialog.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
|
||||
import { m } from '@/paraglide/messages';
|
||||
import { KeyIcon } from '@phosphor-icons/react';
|
||||
import { UserWithRole } from 'better-auth/plugins';
|
||||
import { useState } from 'react';
|
||||
import AdminSetPasswordForm from '../form/admin-set-password-form';
|
||||
import { Button } from '../ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '../ui/dialog';
|
||||
import { Label } from '../ui/label';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
||||
|
||||
type UpdatePasswordProps = {
|
||||
data: UserWithRole;
|
||||
};
|
||||
|
||||
const SetPasswordAction = ({ data }: UpdatePasswordProps) => {
|
||||
const [_open, _setOpen] = useState(false);
|
||||
const prevent = usePreventAutoFocus();
|
||||
|
||||
return (
|
||||
<Dialog open={_open} onOpenChange={_setOpen}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-600"
|
||||
>
|
||||
<KeyIcon size={16} />
|
||||
<span className="sr-only">{m.ui_update_password_btn()}</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-stone-500 [&_svg]:bg-stone-500 [&_svg]:fill-stone-500 text-white">
|
||||
<Label>{m.ui_update_password_btn()}</Label>
|
||||
</TooltipContent>
|
||||
<DialogContent
|
||||
className="max-w-100 xl:max-w-2xl"
|
||||
{...prevent}
|
||||
onPointerDownOutside={(e) => e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-stone-600">
|
||||
<KeyIcon size={20} />
|
||||
{m.ui_update_password_btn()}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{m.ui_update_password_btn()}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<AdminSetPasswordForm data={data} onSubmit={_setOpen} />
|
||||
</DialogContent>
|
||||
</Tooltip>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SetPasswordAction;
|
||||
74
src/components/user/user-column.tsx
Normal file
74
src/components/user/user-column.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { m } from '@/paraglide/messages';
|
||||
import { formatters } from '@/utils/formatters';
|
||||
import { CheckCircleIcon, XCircleIcon } from '@phosphor-icons/react';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { UserWithRole } from 'better-auth/plugins';
|
||||
import RoleBadge from '../avatar/role-badge';
|
||||
import ChangeRoleAction from './change-role-dialog';
|
||||
import ChangeUserStatusAction from './change-user-status-dialog';
|
||||
import EditUserAction from './edit-user-dialog';
|
||||
import SetPasswordAction from './set-password-dialog';
|
||||
|
||||
export const userColumns: ColumnDef<UserWithRole>[] = [
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: m.users_page_ui_table_header_name(),
|
||||
meta: {
|
||||
thClass: 'w-1/6',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: m.users_page_ui_table_header_email(),
|
||||
meta: {
|
||||
thClass: 'w-1/6',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'role',
|
||||
header: m.users_page_ui_table_header_role(),
|
||||
meta: {
|
||||
thClass: 'w-1/6',
|
||||
},
|
||||
cell: ({ row }) => <RoleBadge type={row.original.role} />,
|
||||
},
|
||||
{
|
||||
accessorKey: 'banned',
|
||||
header: m.users_page_ui_table_header_banned(),
|
||||
meta: {
|
||||
thClass: 'w-1/6',
|
||||
},
|
||||
cell: ({ row }) =>
|
||||
row.original.banned ? (
|
||||
<CheckCircleIcon size={18} weight="fill" className="text-green-400" />
|
||||
) : (
|
||||
<XCircleIcon size={18} weight="fill" className="text-red-400" />
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'createdAt',
|
||||
header: m.users_page_ui_table_header_created_at(),
|
||||
meta: {
|
||||
thClass: 'w-1/6',
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
return formatters.dateTime(new Date(row.original.createdAt));
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
meta: {
|
||||
thClass: 'w-1/6',
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="flex justify-end gap-2">
|
||||
<EditUserAction data={row.original} />
|
||||
<SetPasswordAction data={row.original} />
|
||||
<ChangeRoleAction data={row.original} />
|
||||
<ChangeUserStatusAction data={row.original} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user