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

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,23 +43,23 @@ 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>
-        <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>
+      <DialogContent
+        className="max-w-80 xl:max-w-sm"
+        {...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>
     </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,22 +43,22 @@ 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>
-        <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>
+      <DialogContent
+        className="max-w-80 xl:max-w-sm"
+        {...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>
     </Dialog>
   );
 };

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

@@ -43,23 +43,23 @@ 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>
-        <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>
+      <DialogContent
+        className="max-w-80 xl:max-w-sm"
+        {...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>
     </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>
       );
     },