add function for user

- create house
- edit house
- delete house
- list all member for active house

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

@@ -1,4 +1,3 @@
-import { ReturnError } from '@/types/common';
 import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
 import { m } from '@paraglide/messages';
 import { ShieldWarningIcon } from '@phosphor-icons/react';
@@ -17,6 +16,7 @@ import {
 } from '@ui/dialog';
 import { UserWithRole } from 'better-auth/plugins';
 import { toast } from 'sonner';
+import { Spinner } from '../ui/spinner';
 import {
   Table,
   TableBody,
@@ -36,7 +36,7 @@ const BanUserConfirm = ({ data }: BanConfirmProps) => {
   const queryClient = useQueryClient();
   const prevent = usePreventAutoFocus();
 
-  const { mutate: banUserMutation } = useMutation({
+  const { mutate: banUserMutation, isPending } = useMutation({
     mutationFn: banUser,
     onSuccess: () => {
       queryClient.refetchQueries({
@@ -130,7 +130,13 @@ const BanUserConfirm = ({ data }: BanConfirmProps) => {
               {m.ui_cancel_btn()}
             </Button>
           </DialogClose>
-          <Button variant="destructive" type="button" onClick={onConfirm}>
+          <Button
+            variant="destructive"
+            type="button"
+            onClick={onConfirm}
+            disabled={isPending}
+          >
+            {isPending && <Spinner data-icon="inline-start" />}
             {m.ui_confirm_btn()}
           </Button>
         </DialogFooter>

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

@@ -1,4 +1,3 @@
-import { ReturnError } from '@/types/common';
 import useHasPermission from '@hooks/use-has-permission';
 import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
 import { m } from '@paraglide/messages';
@@ -23,7 +22,15 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@ui/tooltip';
 import { UserWithRole } from 'better-auth/plugins';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import DisplayBreakLineMessage from '../DisplayBreakLineMessage';
+import { Spinner } from '../ui/spinner';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table';
 
 type UnbanUserProps = {
   data: UserWithRole;
@@ -38,7 +45,7 @@ const UnbanUserAction = ({ data }: UnbanUserProps) => {
   const [_open, _setOpen] = useState(false);
   const prevent = usePreventAutoFocus();
 
-  const { mutate: unbanMutation } = useMutation({
+  const { mutate: unbanMutation, isPending } = useMutation({
     mutationFn: unbanUser,
     onSuccess: () => {
       queryClient.refetchQueries({
@@ -107,19 +114,47 @@ const UnbanUserAction = ({ data }: UnbanUserProps) => {
               {m.users_page_ui_dialog_alert_title()}
             </DialogDescription>
           </DialogHeader>
-          <DisplayBreakLineMessage>
-            {m.users_page_ui_dialog_alert_description({
-              name: data.name,
-              email: data.email,
-            })}
-          </DisplayBreakLineMessage>
+          <div className="overflow-hidden rounded-md border">
+            <Table className="bg-white">
+              <TableHeader>
+                <TableRow className="bg-primary">
+                  <TableHead
+                    className="px-2 h-7 text-white text-xs"
+                    colSpan={2}
+                  >
+                    {m.users_page_ui_dialog_alert_description_title()}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell className="font-bold">
+                    {m.users_page_ui_table_header_name()}:
+                  </TableCell>
+                  <TableCell>{data.name}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-bold">
+                    {m.users_page_ui_table_header_email()}:
+                  </TableCell>
+                  <TableCell>{data.email}</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
           <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}>
+            <Button
+              variant="destructive"
+              type="button"
+              onClick={onConfirm}
+              disabled={isPending}
+            >
+              {isPending && <Spinner data-icon="inline-start" />}
               {m.ui_confirm_btn()}
             </Button>
           </DialogFooter>