Done on function Ban and Unban User with reason and expiration date

messages/en.json

@@ -27,13 +27,13 @@
   "exp_time": [
     {
       "match": {
-        "time=1d": "1 day",
+        "time=1": "1 day",
-        "time=7d": "7 days",
+        "time=7": "7 days",
-        "time=15d": "15 days",
+        "time=15": "15 days",
-        "time=1m": "1 month",
+        "time=30": "1 month",
-        "time=6m": "6 month",
+        "time=180": "6 month",
-        "time=1y": "1 year",
+        "time=365": "1 year",
-        "time=0": "Forever"
+        "time=99999": "Forever"
       }
     }
   ],
@@ -133,12 +133,23 @@
   "users_page_message_update_info_success": "Edited user information successfully!",
   "users_page_message_set_role_success": "Modified user role successfully!",
   "users_page_message_banned_success": "Banned {name} successfully!",
+  "users_page_message_unbanned_success": "Unbanned {name} successfully!",
   "users_page_message_select_min_one_day": "Please select expiration at least 1 day!",
   "users_page_ui_form_ban_reason": "Ban reason",
   "users_page_ui_form_ban_exp": "Ban expiration",
-  "users_page_ui_select_placeholder_language": "Select language",
+  "users_page_ui_select_placeholder_role": "Select role",
   "users_page_ui_select_placeholder_ban_exp": "Select time",
-  "backend_INVALID_EMAIL_OR_PASSWORD": "Email or password incorrect!",
+  "users_page_ui_dialog_alert_title": "Unban this user?",
-  "backend_INVALID_PASSWORD": "Password incorrect!",
+  "users_page_ui_dialog_alert_ban_title": "",
-  "backend_YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "You are not allowed to change users role"
+  "users_page_ui_dialog_alert_description": "Detail: \nName: {name}. \nEmail: {email}",
+  "users_page_ui_dialog_alert_description_2": "Reason: {reason}. \nExpiration: {exp}",
+  "backend_message": [
+    {
+      "match": {
+        "code=INVALID_EMAIL_OR_PASSWORD": "Email or password incorrect!",
+        "code=INVALID_PASSWORD": "Password incorrect!",
+        "code=YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "You are not allowed to change users role"
+      }
+    }
+  ]
 }

messages/vi.json

@@ -27,13 +27,13 @@
   "exp_time": [
     {
       "match": {
-        "time=1d": "1 ngày",
+        "time=1": "1 ngày",
-        "time=7d": "7 ngày",
+        "time=7": "7 ngày",
-        "time=15d": "15 ngày",
+        "time=15": "15 ngày",
-        "time=1m": "1 tháng",
+        "time=30": "1 tháng",
-        "time=6m": "6 tháng",
+        "time=180": "6 tháng",
-        "time=1y": "1 năm",
+        "time=365": "1 năm",
-        "time=0": "Vĩnh viễn"
+        "time=99999": "Vĩnh viễn"
       }
     }
   ],
@@ -133,12 +133,23 @@
   "users_page_message_update_info_success": "Chỉnh sửa thông tin người dùng thành công!",
   "users_page_message_set_role_success": "Chỉnh sửa quyền hạn người dùng thành công!",
   "users_page_message_banned_success": "Người dùng {name} bị cấm thành công!",
+  "users_page_message_unbanned_success": "Người dùng {name} bỏ cấm thành công!",
   "users_page_message_select_min_one_day": "Chọn ít nhất là 1 ngày!",
   "users_page_ui_form_ban_reason": "Lý do cấm",
   "users_page_ui_form_ban_exp": "Thời gian cấm",
-  "users_page_ui_select_placeholder_language": "Hãy chọn ngôn ngữ",
+  "users_page_ui_select_placeholder_role": "Hãy chọn quyền hạn",
   "users_page_ui_select_placeholder_ban_exp": "Hãy chọn thời gian cấm",
-  "backend_INVALID_EMAIL_OR_PASSWORD": "Email hoặc mật khẩu không đúng!",
+  "users_page_ui_dialog_alert_title": "Bạn muốn mở khóa người dùng này?",
-  "backend_INVALID_PASSWORD": "Mật khẩu hiện tại không đúng!",
+  "users_page_ui_dialog_alert_ban_title": "Bạn muốn khóa người dùng này?",
-  "backend_YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "Bạn không đủ quyền để chỉnh sửa quyền hạn người dùng!"
+  "users_page_ui_dialog_alert_description": "Chi tiết: \nTên: {name}. \nEmail: {email}",
+  "users_page_ui_dialog_alert_description_2": "\nLý do: {reason}. \nHiệu lực: {exp}",
+  "backend_message": [
+    {
+      "match": {
+        "code=INVALID_EMAIL_OR_PASSWORD": "Email hoặc mật khẩu không đúng!",
+        "code=INVALID_PASSWORD": "Mật khẩu hiện tại không đúng!",
+        "code=YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "Bạn không đủ quyền để chỉnh sửa quyền hạn người dùng!"
+      }
+    }
+  ]
 }

src/components/DisplayBreakLineMessage.tsx

@@ -0,0 +1,9 @@
+const DisplayBreakLineMessage = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <pre className="font-sans text-black text-sm">{children}</pre>;
+};
+
+export default DisplayBreakLineMessage;

src/components/form/admin-ban-user-form.tsx

@@ -1,13 +1,8 @@
 import { m } from '@/paraglide/messages';
-import { usersQueries } from '@/service/queries';
-import { banUser } from '@/service/user.api';
 import { userBanSchema } from '@/service/user.schema';
-import { ReturnError } from '@/types/common';
 import { WarningIcon } from '@phosphor-icons/react';
 import { useForm } from '@tanstack/react-form';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { UserWithRole } from 'better-auth/plugins';
-import { toast } from 'sonner';
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
 import { Button } from '../ui/button';
 import { DialogClose, DialogFooter } from '../ui/dialog';
@@ -21,34 +16,14 @@ import {
   SelectValue,
 } from '../ui/select';
 import { Textarea } from '../ui/textarea';
+import { useBanContext } from '../user/ban-user-dialog';
 
 type FormProps = {
   data: UserWithRole;
-  onSubmit: (open: boolean) => void;
 };
 
-const BanUserForm = ({ data, onSubmit }: FormProps) => {
+const BanUserForm = ({ data }: FormProps) => {
-  const queryClient = useQueryClient();
+  const { setSubmitData, setOpen, setOpenConfirm } = useBanContext();
-
-  const banUserMutation = useMutation({
-    mutationFn: banUser,
-    onSuccess: () => {
-      queryClient.refetchQueries({
-        queryKey: usersQueries.all,
-      });
-      onSubmit(false);
-      toast.success(m.users_page_message_banned_success({ name: data.name }), {
-        richColors: true,
-      });
-    },
-    onError: (error: ReturnError) => {
-      console.error(error);
-      toast.error(
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
-        { richColors: true },
-      );
-    },
-  });
 
   const form = useForm({
     defaultValues: {
@@ -61,7 +36,11 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
       onSubmit: userBanSchema,
     },
     onSubmit: async ({ value }) => {
-      banUserMutation.mutate({ data: value });
+      setSubmitData(value);
+      setOpen(false);
+      setTimeout(() => {
+        setOpenConfirm(true);
+      }, 100);
     },
   });
 
@@ -147,25 +126,25 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="1">
-                      {m.exp_time({ time: '1d' })}
+                      {m.exp_time({ time: '1' })}
                     </SelectItem>
                     <SelectItem value="7">
-                      {m.exp_time({ time: '7d' })}
+                      {m.exp_time({ time: '7' })}
                     </SelectItem>
                     <SelectItem value="15">
-                      {m.exp_time({ time: '15d' })}
+                      {m.exp_time({ time: '15' })}
                     </SelectItem>
                     <SelectItem value="30">
-                      {m.exp_time({ time: '1m' })}
+                      {m.exp_time({ time: '30' })}
                     </SelectItem>
                     <SelectItem value="180">
-                      {m.exp_time({ time: '6m' })}
+                      {m.exp_time({ time: '180' })}
                     </SelectItem>
                     <SelectItem value="365">
-                      {m.exp_time({ time: '1y' })}
+                      {m.exp_time({ time: '365' })}
                     </SelectItem>
                     <SelectItem value="99999">
-                      {m.exp_time({ time: '0' })}
+                      {m.exp_time({ time: '99999' })}
                     </SelectItem>
                   </SelectContent>
                 </Select>
@@ -176,11 +155,11 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
         <Field>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="destructive" type="button">
+              <Button variant="outline" type="button">
                 {m.ui_cancel_btn()}
               </Button>
             </DialogClose>
-            <Button type="submit" variant="outline">
+            <Button type="submit" variant="destructive">
               {m.ui_ban_btn()}
             </Button>
           </DialogFooter>

src/components/form/admin-set-password-form.tsx

@@ -33,10 +33,9 @@ const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
+      toast.error(m.backend_message({ code: error.code }), {
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
+        richColors: true,
-        { richColors: true },
+      });
-      );
     },
   });
 

src/components/form/admin-set-user-role-form.tsx

@@ -45,10 +45,9 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
+      toast.error(m.backend_message({ code: error.code }), {
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
+        richColors: true,
-        { richColors: true },
+      });
-      );
     },
   });
 
@@ -111,7 +110,7 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
                 >
                   <SelectTrigger aria-invalid={isInvalid}>
                     <SelectValue
-                      placeholder={m.users_page_ui_select_placeholder_language()}
+                      placeholder={m.users_page_ui_select_placeholder_role()}
                     />
                   </SelectTrigger>
                   <SelectContent>

src/components/form/admin-update-user-info-form.tsx

@@ -33,10 +33,9 @@ const AdminUpdateUserInfoForm = ({ data, onSubmit }: UpdateUserFormProps) => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
+      toast.error(m.backend_message({ code: error.code }), {
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
+        richColors: true,
-        { richColors: true },
+      });
-      );
     },
   });
   const form = useForm({

src/components/form/change-password-form.tsx

@@ -71,14 +71,9 @@ const ChangePasswordForm = () => {
           },
           onError: (ctx) => {
             console.error(ctx.error.code);
-            toast.error(
+            toast.error(m.backend_message({ code: ctx.error.code }), {
-              (
-                m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
-              )(),
-              {
               richColors: true,
-              },
+            });
-            );
           },
         },
       );

src/components/form/profile-form.tsx

@@ -67,16 +67,9 @@ const ProfileForm = () => {
             },
             onError: (ctx) => {
               console.error(ctx.error.code);
-              toast.error(
+              toast.error(m.backend_message({ code: ctx.error.code }), {
-                (
-                  m[
-                    `backend_${ctx.error.code}` as keyof typeof m
-                  ] as () => string
-                )(),
-                {
                 richColors: true,
-                },
+              });
-              );
             },
           },
         );

src/components/form/settings-form.tsx

@@ -35,10 +35,9 @@ const SettingsForm = () => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
+      toast.error(m.backend_message({ code: error.code }), {
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
+        richColors: true,
-        { richColors: true },
+      });
-      );
     },
   });
 

src/components/form/signin-form.tsx

@@ -52,14 +52,9 @@ const SignInForm = () => {
           },
           onError: (ctx) => {
             console.error(ctx.error.code);
-            toast.error(
+            toast.error(m.backend_message({ code: ctx.error.code }), {
-              (
-                m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
-              )(),
-              {
               richColors: true,
-              },
+            });
-            );
           },
         },
       );

src/components/form/user-settings-form.tsx

@@ -43,10 +43,9 @@ const UserSettingsForm = () => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
+      toast.error(m.backend_message({ code: error.code }), {
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
+        richColors: true,
-        { richColors: true },
+      });
-      );
     },
   });
 

src/components/sidebar/nav-user.tsx

@@ -49,14 +49,9 @@ const NavUser = () => {
         },
         onError: (ctx) => {
           console.error(ctx.error.code);
-          toast.error(
+          toast.error(m.backend_message({ code: ctx.error.code }), {
-            (
-              m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
-            )(),
-            {
             richColors: true,
-            },
+          });
-          );
         },
       },
     });

src/components/user/ban-user-confirm-dialog.tsx

@@ -0,0 +1,98 @@
+import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
+import { m } from '@/paraglide/messages';
+import { usersQueries } from '@/service/queries';
+import { banUser } from '@/service/user.api';
+import { ReturnError } from '@/types/common';
+import { ShieldWarningIcon } from '@phosphor-icons/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { UserWithRole } from 'better-auth/plugins';
+import { toast } from 'sonner';
+import DisplayBreakLineMessage from '../DisplayBreakLineMessage';
+import { Button } from '../ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { useBanContext } from './ban-user-dialog';
+
+type BanConfirmProps = {
+  data: UserWithRole;
+};
+
+const BanUserConfirm = ({ data }: BanConfirmProps) => {
+  const { openConfirm, setOpenConfirm, submitData } = useBanContext();
+  const queryClient = useQueryClient();
+  const prevent = usePreventAutoFocus();
+
+  const { mutate: banUserMutation } = useMutation({
+    mutationFn: banUser,
+    onSuccess: () => {
+      queryClient.refetchQueries({
+        queryKey: usersQueries.all,
+      });
+      setOpenConfirm(false);
+      toast.success(m.users_page_message_banned_success({ name: data.name }), {
+        richColors: true,
+      });
+    },
+    onError: (error: ReturnError) => {
+      console.error(error);
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
+    },
+  });
+
+  const onConfirm = () => {
+    banUserMutation({ data: submitData });
+  };
+
+  return (
+    <Dialog open={openConfirm} onOpenChange={setOpenConfirm}>
+      <DialogContent
+        showCloseButton={false}
+        {...prevent}
+        onPointerDownOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-red-500">
+            <div className="rounded-full bg-red-100 p-3">
+              <ShieldWarningIcon size={30} />
+            </div>
+            {m.users_page_ui_dialog_alert_ban_title()}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {m.users_page_ui_dialog_alert_ban_title()}
+          </DialogDescription>
+        </DialogHeader>
+        <DisplayBreakLineMessage>
+          {m.users_page_ui_dialog_alert_description({
+            name: data.name,
+            email: data.email,
+          })}
+          {m.users_page_ui_dialog_alert_description_2({
+            reason: submitData.banReason,
+            exp: m.exp_time({ time: submitData.banExp }),
+          })}
+        </DisplayBreakLineMessage>
+        <DialogFooter className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4">
+          <DialogClose asChild>
+            <Button variant="outline" type="button">
+              {m.ui_cancel_btn()}
+            </Button>
+          </DialogClose>
+          <Button variant="destructive" type="button" onClick={onConfirm}>
+            {m.ui_confirm_btn()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BanUserConfirm;

src/components/user/ban-user-dialog.tsx

@@ -0,0 +1,113 @@
+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 { createContext, useContext, 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';
+import BanUserConfirm from './ban-user-confirm-dialog';
+
+type ChangeUserStatusProps = {
+  data: UserWithRole;
+};
+
+type SubmitValue = {
+  id: string;
+  banReason: string;
+  banExp: number;
+};
+
+type BanContextProps = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  openConfirm: boolean;
+  setOpenConfirm: React.Dispatch<React.SetStateAction<boolean>>;
+  submitData: SubmitValue;
+  setSubmitData: React.Dispatch<React.SetStateAction<SubmitValue>>;
+};
+
+const BanContext = createContext<BanContextProps | null>(null);
+
+const BanUserAction = ({ data }: ChangeUserStatusProps) => {
+  const [_open, _setOpen] = useState(false);
+  const [_openConfirm, _setOpenConfirm] = useState(false);
+  const [_confirmData, _setConfirmData] = useState<SubmitValue>({
+    id: '',
+    banReason: '',
+    banExp: 0,
+  });
+  const prevent = usePreventAutoFocus();
+
+  return (
+    <BanContext
+      value={{
+        open: _open,
+        setOpen: _setOpen,
+        openConfirm: _openConfirm,
+        setOpenConfirm: _setOpenConfirm,
+        submitData: _confirmData,
+        setSubmitData: _setConfirmData,
+      }}
+    >
+      <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>
+        </Tooltip>
+        <DialogContent
+          className="max-w-80 xl:max-w-xl"
+          {...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} />
+        </DialogContent>
+      </Dialog>
+      <BanUserConfirm data={data} />
+    </BanContext>
+  );
+};
+
+export default BanUserAction;
+
+export function useBanContext() {
+  const context = useContext(BanContext);
+
+  if (!context) {
+    throw new Error('SHOULD_HAVE_PROVIDER');
+  }
+
+  return context;
+}

src/components/user/change-role-dialog.tsx

@@ -43,8 +43,9 @@ const ChangeRoleAction = ({ data }: SetRoleProps) => {
         <TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white">
           <Label>{m.ui_change_role_btn()}</Label>
         </TooltipContent>
+      </Tooltip>
       <DialogContent
-          className="max-w-100 xl:max-w-2xl"
+        className="max-w-80 xl:max-w-sm"
         {...prevent}
         onPointerDownOutside={(e) => e.preventDefault()}
       >
@@ -59,7 +60,6 @@ const ChangeRoleAction = ({ data }: SetRoleProps) => {
         </DialogHeader>
         <AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
       </DialogContent>
-      </Tooltip>
     </Dialog>
   );
 };

src/components/user/change-user-status-dialog.tsx

@@ -1,67 +0,0 @@
-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;

src/components/user/edit-user-dialog.tsx

@@ -43,8 +43,9 @@ const EditUserAction = ({ data }: EditUserProps) => {
         <TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
           <Label>{m.ui_edit_user_btn()}</Label>
         </TooltipContent>
+      </Tooltip>
       <DialogContent
-          className="max-w-100 xl:max-w-2xl"
+        className="max-w-80 xl:max-w-sm"
         {...prevent}
         onPointerDownOutside={(e) => e.preventDefault()}
       >
@@ -58,7 +59,6 @@ const EditUserAction = ({ data }: EditUserProps) => {
         </DialogHeader>
         <AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
       </DialogContent>
-      </Tooltip>
     </Dialog>
   );
 };

src/components/user/set-password-dialog.tsx

@@ -43,8 +43,9 @@ const SetPasswordAction = ({ data }: UpdatePasswordProps) => {
         <TooltipContent className="bg-stone-500 [&_svg]:bg-stone-500 [&_svg]:fill-stone-500 text-white">
           <Label>{m.ui_update_password_btn()}</Label>
         </TooltipContent>
+      </Tooltip>
       <DialogContent
-          className="max-w-100 xl:max-w-2xl"
+        className="max-w-80 xl:max-w-sm"
         {...prevent}
         onPointerDownOutside={(e) => e.preventDefault()}
       >
@@ -59,7 +60,6 @@ const SetPasswordAction = ({ data }: UpdatePasswordProps) => {
         </DialogHeader>
         <AdminSetPasswordForm data={data} onSubmit={_setOpen} />
       </DialogContent>
-      </Tooltip>
     </Dialog>
   );
 };

src/components/user/unban-user-dialog.tsx

@@ -0,0 +1,119 @@
+import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
+import { m } from '@/paraglide/messages';
+import { usersQueries } from '@/service/queries';
+import { unbanUser } from '@/service/user.api';
+import { ReturnError } from '@/types/common';
+import { LockOpenIcon, ShieldWarningIcon } from '@phosphor-icons/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { UserWithRole } from 'better-auth/plugins';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import DisplayBreakLineMessage from '../DisplayBreakLineMessage';
+import { Button } from '../ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog';
+import { Label } from '../ui/label';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+type UnbanUserProps = {
+  data: UserWithRole;
+};
+
+const UnbanUserAction = ({ data }: UnbanUserProps) => {
+  const queryClient = useQueryClient();
+
+  const [_open, _setOpen] = useState(false);
+  const prevent = usePreventAutoFocus();
+
+  const { mutate: unbanMutation } = useMutation({
+    mutationFn: unbanUser,
+    onSuccess: () => {
+      queryClient.refetchQueries({
+        queryKey: usersQueries.all,
+      });
+      _setOpen(false);
+      toast.success(
+        m.users_page_message_unbanned_success({ name: data.name }),
+        {
+          richColors: true,
+        },
+      );
+    },
+    onError: (error: ReturnError) => {
+      console.error(error);
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
+    },
+  });
+
+  const onConfirm = () => {
+    unbanMutation({ data: { id: data.id } });
+  };
+
+  return (
+    <Dialog open={_open} onOpenChange={_setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="rounded-full cursor-pointer text-green-500 hover:bg-green-100 hover:text-green-600"
+            >
+              <LockOpenIcon size={16} />
+              <span className="sr-only">{m.ui_unban_btn()}</span>
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent className="bg-green-500 [&_svg]:bg-green-500 [&_svg]:fill-green-500 text-white">
+          <Label>{m.ui_unban_btn()}</Label>
+        </TooltipContent>
+      </Tooltip>
+      <DialogContent
+        showCloseButton={false}
+        {...prevent}
+        onPointerDownOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-green-500">
+            <div className="rounded-full bg-green-100 p-3">
+              <ShieldWarningIcon size={30} />
+            </div>
+            {m.users_page_ui_dialog_alert_title()}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {m.users_page_ui_dialog_alert_title()}
+          </DialogDescription>
+        </DialogHeader>
+        <DisplayBreakLineMessage>
+          {m.users_page_ui_dialog_alert_description({
+            name: data.name,
+            email: data.email,
+          })}
+        </DisplayBreakLineMessage>
+        <DialogFooter className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4">
+          <DialogClose asChild>
+            <Button variant="outline" type="button">
+              {m.ui_cancel_btn()}
+            </Button>
+          </DialogClose>
+          <Button variant="destructive" type="button" onClick={onConfirm}>
+            {m.ui_confirm_btn()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default UnbanUserAction;

src/components/user/user-column.tsx

@@ -4,10 +4,11 @@ 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 BanUserAction from './ban-user-dialog';
 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';
+import UnbanUserAction from './unban-user-dialog';
 
 export const userColumns: ColumnDef<UserWithRole>[] = [
   {
@@ -66,7 +67,11 @@ export const userColumns: ColumnDef<UserWithRole>[] = [
           <EditUserAction data={row.original} />
           <SetPasswordAction data={row.original} />
           <ChangeRoleAction data={row.original} />
-          <ChangeUserStatusAction data={row.original} />
+          {row.original.banned ? (
+            <UnbanUserAction data={row.original} />
+          ) : (
+            <BanUserAction data={row.original} />
+          )}
         </div>
       );
     },

src/service/user.api.ts

@@ -4,6 +4,7 @@ import { parseError } from '@/utils/helper';
 import { createServerFn } from '@tanstack/react-start';
 import { getRequestHeaders } from '@tanstack/react-start/server';
 import {
+  baseUser,
   userBanSchema,
   userListSchema,
   userSetPasswordSchema,
@@ -131,3 +132,23 @@ export const banUser = createServerFn({ method: 'POST' })
       throw { message, code };
     }
   });
+
+export const unbanUser = createServerFn({ method: 'POST' })
+  .middleware([authMiddleware])
+  .inputValidator(baseUser)
+  .handler(async ({ data }) => {
+    try {
+      const headers = getRequestHeaders();
+      const result = await auth.api.unbanUser({
+        body: {
+          userId: data.id, // required
+        },
+        // This endpoint requires session cookies.
+        headers,
+      });
+      return result;
+    } catch (error) {
+      const { message, code } = parseError(error);
+      throw { message, code };
+    }
+  });

src/service/user.schema.ts

@@ -1,14 +1,17 @@
 import { m } from '@/paraglide/messages';
 import z from 'zod';
 
+export const baseUser = z.object({
+  id: z.string().nonempty(m.users_page_message_user_not_found()),
+});
+
 export const userListSchema = z.object({
   page: z.coerce.number().min(1).default(1),
   limit: z.coerce.number().min(10).max(100).default(10),
   keyword: z.string().optional(),
 });
 
-export const userSetPasswordSchema = z.object({
+export const userSetPasswordSchema = baseUser.extend({
-  id: z.string().nonempty(m.users_page_message_user_not_found()),
   password: z
     .string()
     .min(5, m.users_page_message_user_min())
@@ -18,8 +21,7 @@ export const userSetPasswordSchema = z.object({
     .regex(/[^a-zA-Z0-9]/, m.users_page_message_contain_special()),
 });
 
-export const userUpdateInfoSchema = z.object({
+export const userUpdateInfoSchema = baseUser.extend({
-  id: z.string().nonempty(m.users_page_message_user_not_found()),
   name: z.string().nonempty(
     m.common_is_required({
       field: m.profile_form_name(),
@@ -29,13 +31,11 @@ export const userUpdateInfoSchema = z.object({
 
 export const RoleEnum = z.enum(['admin', 'user']);
 
-export const userUpdateRoleSchema = z.object({
+export const userUpdateRoleSchema = baseUser.extend({
-  id: z.string().nonempty(m.users_page_message_user_not_found()),
   role: RoleEnum,
 });
 
-export const userBanSchema = z.object({
+export const userBanSchema = baseUser.extend({
-  id: z.string().nonempty(m.users_page_message_user_not_found()),
   banReason: z.string().nonempty(
     m.common_is_required({
       field: m.users_page_ui_form_ban_reason(),