invite member to house

2026-02-11 22:45:33 +07:00
parent 5ffdd7454a
commit ea31b61cac
27 changed files with 545 additions and 61 deletions
--- a/src/components/house/current-user-invitation-list.tsx
+++ b/src/components/house/current-user-invitation-list.tsx
@@ -0,0 +1,116 @@
+import { cancelInvitation } from '@/service/house.api';
+import { INVITE_STATUS } from '@/types/enum';
+import { authClient } from '@lib/auth-client';
+import { m } from '@paraglide/messages';
+import { useMutation } from '@tanstack/react-query';
+import { Item, ItemContent, ItemDescription, ItemTitle } from '@ui/item';
+import { Skeleton } from '@ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@ui/table';
+import { toast } from 'sonner';
+import RoleBadge from '../avatar/role-badge';
+import { Button } from '../ui/button';
+
+type InvitationListProps = {
+  activeHouse: ReturnType<typeof authClient.useActiveOrganization>['data'];
+};
+
+const CurrentUserInvitationList = ({ activeHouse }: InvitationListProps) => {
+  const { refetch } = authClient.useActiveOrganization();
+
+  const { mutate: cancelInvitationMutation } = useMutation({
+    mutationFn: cancelInvitation,
+    onSuccess: () => {
+      refetch();
+      // _setOpen(false);
+      toast.success(m.houses_page_message_delete_house_success(), {
+        richColors: true,
+      });
+    },
+    onError: (error: ReturnError) => {
+      console.error(error);
+      const code = error.code as Parameters<
+        typeof m.backend_message
+      >[0]['code'];
+      toast.error(m.backend_message({ code }), {
+        richColors: true,
+      });
+    },
+  });
+
+  const handleCancelInvitation = (id: string) => {
+    cancelInvitationMutation({ data: { id } });
+  };
+
+  if (!activeHouse) {
+    return <Skeleton className="col-span-2 h-80 w-full rounded-xl" />;
+  }
+
+  return (
+    <div className="overflow-hidden rounded-md border col-span-1 lg:col-span-3 shadow-xs bg-linear-to-br from-primary/5 to-card">
+      <Table className="bg-white">
+        <TableHeader>
+          <TableRow>
+            <TableHead className="px-4 bg-primary text-white text-sm w-1/2">
+              {m.houses_page_ui_view_table_header_invite()}
+            </TableHead>
+            <TableHead className="px-4 bg-primary text-white text-sm w-1/2"></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {activeHouse.invitations.length > 0 ? (
+            activeHouse.invitations.map((item) => (
+              <TableRow>
+                <TableCell>
+                  <Item>
+                    <ItemContent>
+                      <ItemTitle>
+                        <strong>{m.houses_user_page_invite_label_to()}:</strong>{' '}
+                        {item.email} - <RoleBadge type={item.role} />
+                      </ItemTitle>
+                      <ItemDescription>
+                        <strong>
+                          {m.houses_user_page_invite_label_status()}:{' '}
+                          {m.invite_status({
+                            status: item.status as INVITE_STATUS,
+                          })}
+                        </strong>
+                      </ItemDescription>
+                    </ItemContent>
+                  </Item>
+                </TableCell>
+                <TableCell className="p-6">
+                  <div className="flex justify-end gap-2">
+                    {item.status !== INVITE_STATUS.CANCELED && (
+                      <Button
+                        variant="outline"
+                        className="cursor-pointer w-20 py-4"
+                        onClick={() => handleCancelInvitation(item.id)}
+                      >
+                        {m.ui_cancel_btn()}
+                      </Button>
+                    )}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={2} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default CurrentUserInvitationList;