added leave house, remove member

src/components/house/delete-user-house-dialog.tsx

@@ -32,6 +32,7 @@ import parse from 'html-react-parser';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import RoleBadge from '../avatar/role-badge';
+import { Skeleton } from '../ui/skeleton';
 
 type DeleteUserHouseProps = {
   activeHouse: ReturnType<typeof authClient.useActiveOrganization>['data'];
@@ -40,7 +41,11 @@ type DeleteUserHouseProps = {
 const DeleteUserHouseAction = ({ activeHouse }: DeleteUserHouseProps) => {
   const [_open, _setOpen] = useState(false);
   const prevent = usePreventAutoFocus();
-  const { hasPermission, isLoading } = useHasPermission('house', 'delete');
+  const { hasPermission, isLoading } = useHasPermission(
+    'house',
+    'delete',
+    true,
+  );
 
   const queryClient = useQueryClient();
 
@@ -66,98 +71,98 @@ const DeleteUserHouseAction = ({ activeHouse }: DeleteUserHouseProps) => {
     },
   });
 
-  if (isLoading || !activeHouse) return null;
+  if (isLoading || !activeHouse) {
+    return <Skeleton className="h-8 w-8 rounded-full" />;
+  }
 
   const onConfirm = async () => {
     deleteHouseMutation({ data: { id: activeHouse.id } });
   };
 
-  if (hasPermission) {
-    return (
-      <Dialog open={_open} onOpenChange={_setOpen}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DialogTrigger asChild>
-              <Button
-                type="button"
-                size="icon-lg"
-                className="rounded-full cursor-pointer bg-red-500 text-white hover:bg-red-100 hover:text-red-600"
-              >
-                <TrashIcon size={16} />
-                <span className="sr-only">{m.ui_delete_btn()}</span>
-              </Button>
-            </DialogTrigger>
-          </TooltipTrigger>
-          <TooltipContent className="bg-red-500 [&_svg]:bg-red-500 [&_svg]:fill-red-500 text-white">
-            <Label>{m.ui_delete_btn()}</Label>
-          </TooltipContent>
-        </Tooltip>
-        <DialogContent
-          className="max-w-100 xl:max-w-xl"
-          showCloseButton={false}
-          {...prevent}
-          onPointerDownOutside={(e) => e.preventDefault()}
-          onEscapeKeyDown={(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.houses_page_ui_dialog_alert_delete_title({
-                name: activeHouse.name,
-              })}
-            </DialogTitle>
-            <DialogDescription className="text-red-500">
-              {parse(m.houses_page_ui_dialog_alert_delete_description())}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="overflow-hidden rounded-md border">
-            <Table className="bg-white">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="px-2 h-7 bg-primary text-white text-xs w-1/2">
-                    {m.houses_page_ui_view_table_header_email()}
-                  </TableHead>
-                  <TableHead className="px-2 h-7 bg-primary text-white text-xs w-1/2">
-                    {m.houses_page_ui_view_table_header_role()}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {activeHouse.members.map((member) => (
-                  <TableRow key={member.user.email}>
-                    <TableCell>{member.user.email}</TableCell>
-                    <TableCell>
-                      <RoleBadge type={member.role} />
-                    </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}
-              disabled={isPending}
-            >
-              {isPending && <Spinner data-icon="inline-start" />}
-              {m.ui_confirm_btn()}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    );
-  }
+  if (!hasPermission) return null;
 
-  return null;
+  return (
+    <Dialog open={_open} onOpenChange={_setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button
+              type="button"
+              size="icon-lg"
+              className="rounded-full cursor-pointer bg-red-500 text-white hover:bg-red-100 hover:text-red-600"
+            >
+              <TrashIcon size={16} />
+              <span className="sr-only">{m.ui_delete_btn()}</span>
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent className="bg-red-500 [&_svg]:bg-red-500 [&_svg]:fill-red-500 text-white">
+          <Label>{m.ui_delete_btn()}</Label>
+        </TooltipContent>
+      </Tooltip>
+      <DialogContent
+        className="max-w-100 xl:max-w-xl"
+        showCloseButton={false}
+        {...prevent}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(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.houses_page_ui_dialog_alert_delete_title({
+              name: activeHouse.name,
+            })}
+          </DialogTitle>
+          <DialogDescription className="text-red-500">
+            {parse(m.houses_page_ui_dialog_alert_delete_description())}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="overflow-hidden rounded-md border">
+          <Table className="bg-white">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="px-2 h-7 bg-primary text-white text-xs w-1/2">
+                  {m.houses_page_ui_view_table_header_email()}
+                </TableHead>
+                <TableHead className="px-2 h-7 bg-primary text-white text-xs w-1/2">
+                  {m.houses_page_ui_view_table_header_role()}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {activeHouse.members.map((member) => (
+                <TableRow key={member.user.email}>
+                  <TableCell>{member.user.email}</TableCell>
+                  <TableCell>
+                    <RoleBadge type={member.role} />
+                  </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}
+            disabled={isPending}
+          >
+            {isPending && <Spinner data-icon="inline-start" />}
+            {m.ui_confirm_btn()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
 };
 
 export default DeleteUserHouseAction;