feat: invitation workflow is working as expected

actions/invitations/invitation.ts

@@ -1,7 +1,51 @@
 "use server";
 
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
 import { auth } from "@/auth.config";
-import { getErrorMessage, parseStringify } from "@/lib";
+import { getErrorMessage, parseStringify, wait } from "@/lib";
+
+export const getInvitations = async ({
+  page = 1,
+  query = "",
+  sort = "",
+  filters = {},
+}) => {
+  const session = await auth();
+
+  if (isNaN(Number(page)) || page < 1) redirect("/invitations");
+
+  const keyServer = process.env.API_BASE_URL;
+  const url = new URL(`${keyServer}/tenants/invitations`);
+
+  if (page) url.searchParams.append("page[number]", page.toString());
+  if (query) url.searchParams.append("filter[search]", query);
+  if (sort) url.searchParams.append("sort", sort);
+
+  // Handle multiple filters
+  Object.entries(filters).forEach(([key, value]) => {
+    if (key !== "filter[search]") {
+      url.searchParams.append(key, String(value));
+    }
+  });
+
+  try {
+    const invitations = await fetch(url.toString(), {
+      headers: {
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+    const data = await invitations.json();
+    const parsedData = parseStringify(data);
+    revalidatePath("/invitations");
+    return parsedData;
+  } catch (error) {
+    console.error("Error fetching invitations:", error);
+    return undefined;
+  }
+};
 
 export const sendInvite = async (formData: FormData) => {
   const session = await auth();
@@ -40,6 +84,46 @@ export const sendInvite = async (formData: FormData) => {
   }
 };
 
+export const updateInvite = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const invitationId = formData.get("invitationId");
+  const invitationEmail = formData.get("invitationEmail");
+  const expiresAt = formData.get("expires_at");
+
+  const url = new URL(`${keyServer}/tenants/invitations/${invitationId}`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body: JSON.stringify({
+        data: {
+          type: "Invitation",
+          id: invitationId,
+          attributes: {
+            email: invitationEmail,
+            ...(expiresAt && { expires_at: expiresAt }),
+          },
+        },
+      }),
+    });
+    const data = await response.json();
+    revalidatePath("/invitations");
+    return parseStringify(data);
+  } catch (error) {
+    console.error("Error updating invitation:", error);
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
 export const getInvitationInfoById = async (invitationId: string) => {
   const session = await auth();
   const keyServer = process.env.API_BASE_URL;
@@ -62,3 +146,27 @@ export const getInvitationInfoById = async (invitationId: string) => {
     };
   }
 };
+
+export const revokeInvite = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const invitationId = formData.get("invitationId");
+  const url = new URL(`${keyServer}/tenants/invitations/${invitationId}`);
+  try {
+    const response = await fetch(url.toString(), {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+    const data = await response.json();
+    await wait(1000);
+    revalidatePath("/invitations");
+    return parseStringify(data);
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};

app/(prowler)/invitations/page.tsx

@@ -1,13 +1,16 @@
 import { Spacer } from "@nextui-org/react";
 import { Suspense } from "react";
 
-import { getUsers } from "@/actions/users/users";
+import { getInvitations } from "@/actions/invitations/invitation";
 import { FilterControls } from "@/components/filters";
-import { filterUsers } from "@/components/filters/data-filters";
+import { filterInvitations } from "@/components/filters/data-filters";
 import { SendInvitationButton } from "@/components/invitations";
+import {
+  ColumnsInvitation,
+  SkeletonTableInvitation,
+} from "@/components/invitations/table";
 import { Header } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
-import { ColumnsUser, SkeletonTableUser } from "@/components/users/table";
 import { SearchParamsProps } from "@/types";
 
 export default async function Invitations({
@@ -26,7 +29,7 @@ export default async function Invitations({
       <SendInvitationButton />
       <Spacer y={4} />
 
-      <Suspense key={searchParamsKey} fallback={<SkeletonTableUser />}>
+      <Suspense key={searchParamsKey} fallback={<SkeletonTableInvitation />}>
         <SSRDataTable searchParams={searchParams} />
       </Suspense>
     </>
@@ -49,14 +52,14 @@ const SSRDataTable = async ({
   // Extract query from filters
   const query = (filters["filter[search]"] as string) || "";
 
-  const usersData = await getUsers({ query, page, sort, filters });
+  const invitationsData = await getInvitations({ query, page, sort, filters });
 
   return (
     <DataTable
-      columns={ColumnsUser}
-      data={usersData?.data || []}
-      metadata={usersData?.meta}
-      customFilters={filterUsers}
+      columns={ColumnsInvitation}
+      data={invitationsData?.data || []}
+      metadata={invitationsData?.meta}
+      customFilters={filterInvitations}
     />
   );
 };

components/filters/data-filters.ts

@@ -59,3 +59,11 @@ export const filterUsers = [
     values: ["true", "false"],
   },
 ];
+
+export const filterInvitations = [
+  {
+    key: "state",
+    labelCheckboxGroup: "State",
+    values: ["pending", "accepted", "expired", "revoked"],
+  },
+];

components/invitations/forms/delete-form.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { revokeInvite } from "@/actions/invitations/invitation";
+import { DeleteIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+
+const formSchema = z.object({
+  invitationId: z.string(),
+});
+
+export const DeleteForm = ({
+  invitationId,
+  setIsOpen,
+}: {
+  invitationId: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      invitationId,
+    },
+  });
+  const { toast } = useToast();
+  const isLoading = form.formState.isSubmitting;
+
+  async function onSubmitClient(values: z.infer<typeof formSchema>) {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+    // client-side validation
+    const data = await revokeInvite(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The invitation was revoked successfully.",
+      });
+    }
+    setIsOpen(false); // Close the modal on success
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmitClient)}>
+        <input type="hidden" name="id" value={invitationId} />
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Delete"
+            className="w-full"
+            variant="solid"
+            color="danger"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <DeleteIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Delete</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/invitations/forms/edit-form.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { updateInvite } from "@/actions/invitations/invitation";
+import { SaveIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { editInviteFormSchema } from "@/types";
+
+export const EditForm = ({
+  invitationId,
+  invitationEmail,
+  setIsOpen,
+}: {
+  invitationId: string;
+  invitationEmail?: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = editInviteFormSchema;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      invitationId,
+      invitationEmail: invitationEmail,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+    console.log(values);
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+
+    const data = await updateInvite(formData);
+
+    if (data?.error) {
+      const errorMessage = `${data.error}`;
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The invitation was updated successfully.",
+      });
+      setIsOpen(false); // Close the modal on success
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <div className="text-md">
+          Current email: <span className="font-bold">{invitationEmail}</span>
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="invitationEmail"
+            type="email"
+            label="Email"
+            labelPlacement="outside"
+            placeholder={invitationEmail}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.invitationEmail}
+          />
+        </div>
+        <input type="hidden" name="invitationId" value={invitationId} />
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Save"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Save</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/invitations/forms/index.ts

@@ -0,0 +1,2 @@
+export * from "./delete-form";
+export * from "./edit-form";

components/invitations/table/column-invitations.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DateWithTime } from "@/components/ui/entities";
+import { DataTableColumnHeader } from "@/components/ui/table";
+import { InvitationProps } from "@/types";
+
+import { DataTableRowActions } from "./data-table-row-actions";
+
+const getInvitationData = (row: { original: InvitationProps }) => {
+  return row.original.attributes;
+};
+
+export const ColumnsInvitation: ColumnDef<InvitationProps>[] = [
+  {
+    accessorKey: "email",
+    header: () => <div className="text-left">Email</div>,
+    cell: ({ row }) => {
+      const data = getInvitationData(row);
+      return <p className="font-semibold">{data?.email || "N/A"}</p>;
+    },
+  },
+  {
+    accessorKey: "state",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"State"} param="state" />
+    ),
+    cell: ({ row }) => {
+      const { state } = getInvitationData(row);
+      return <p className="font-semibold">{state}</p>;
+    },
+  },
+  {
+    accessorKey: "inserted_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Inserted At"}
+        param="inserted_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const { inserted_at } = getInvitationData(row);
+      return <DateWithTime dateTime={inserted_at} showTime={false} />;
+    },
+  },
+
+  {
+    accessorKey: "expires_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Expires At"}
+        param="expires_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const { expires_at } = getInvitationData(row);
+      return <DateWithTime dateTime={expires_at} showTime={false} />;
+    },
+  },
+
+  {
+    accessorKey: "actions",
+    header: () => <div className="text-right">Actions</div>,
+    id: "actions",
+    cell: ({ row }) => {
+      return <DataTableRowActions row={row} />;
+    },
+  },
+];

components/invitations/table/data-table-row-actions.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import {
+  AddNoteBulkIcon,
+  DeleteDocumentBulkIcon,
+  EditDocumentBulkIcon,
+} from "@nextui-org/shared-icons";
+import { Row } from "@tanstack/react-table";
+import clsx from "clsx";
+import { useState } from "react";
+
+import { VerticalDotsIcon } from "@/components/icons";
+import { CustomAlertModal } from "@/components/ui/custom";
+
+import { DeleteForm, EditForm } from "../forms";
+
+interface DataTableRowActionsProps<InvitationProps> {
+  row: Row<InvitationProps>;
+}
+const iconClasses =
+  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+
+export function DataTableRowActions<InvitationProps>({
+  row,
+}: DataTableRowActionsProps<InvitationProps>) {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const invitationId = (row.original as { id: string }).id;
+  const invitationEmail = (row.original as any).attributes?.email;
+  return (
+    <>
+      <CustomAlertModal
+        isOpen={isEditOpen}
+        onOpenChange={setIsEditOpen}
+        title="Edit Invitation"
+        description={"Edit the invitation details"}
+      >
+        <EditForm
+          invitationId={invitationId}
+          invitationEmail={invitationEmail}
+          setIsOpen={setIsEditOpen}
+        />
+      </CustomAlertModal>
+      <CustomAlertModal
+        isOpen={isDeleteOpen}
+        onOpenChange={setIsDeleteOpen}
+        title="Are you absolutely sure?"
+        description="This action cannot be undone. This will permanently delete your invitation."
+      >
+        <DeleteForm invitationId={invitationId} setIsOpen={setIsDeleteOpen} />
+      </CustomAlertModal>
+
+      <div className="relative flex items-center justify-end gap-2">
+        <Dropdown className="shadow-xl" placement="bottom">
+          <DropdownTrigger>
+            <Button isIconOnly radius="full" size="sm" variant="light">
+              <VerticalDotsIcon className="text-default-400" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu
+            closeOnSelect
+            aria-label="Actions"
+            color="default"
+            variant="flat"
+          >
+            <DropdownSection title="Actions">
+              <DropdownItem
+                href={`http://localhost:3000/invitations/check-details?id=${invitationId}`}
+                key="check-details"
+                description="View invitation details"
+                textValue="Check Details"
+                startContent={<AddNoteBulkIcon className={iconClasses} />}
+              >
+                Check Details
+              </DropdownItem>
+
+              <DropdownItem
+                key="edit"
+                description="Allows you to edit the invitation"
+                textValue="Edit Invitation"
+                startContent={<EditDocumentBulkIcon className={iconClasses} />}
+                onClick={() => setIsEditOpen(true)}
+              >
+                Edit Invitation
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSection title="Danger zone">
+              <DropdownItem
+                key="delete"
+                className="text-danger"
+                color="danger"
+                description="Delete the invitation permanently"
+                textValue="Delete Invitation"
+                startContent={
+                  <DeleteDocumentBulkIcon
+                    className={clsx(iconClasses, "!text-danger")}
+                  />
+                }
+                onClick={() => setIsDeleteOpen(true)}
+              >
+                Delete Invitation
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}

components/invitations/table/index.ts

@@ -0,0 +1,3 @@
+export * from "./column-invitations";
+export * from "./data-table-row-actions";
+export * from "./skeleton-table-invitations";

components/invitations/table/skeleton-table-invitations.tsx

@@ -0,0 +1,59 @@
+import { Card, Skeleton } from "@nextui-org/react";
+import React from "react";
+
+export const SkeletonTableInvitation = () => {
+  return (
+    <Card className="h-full w-full space-y-5 p-4" radius="sm">
+      {/* Table headers */}
+      <div className="hidden justify-between md:flex">
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+      </div>
+
+      {/* Table body */}
+      <div className="space-y-3">
+        {[...Array(10)].map((_, index) => (
+          <div
+            key={index}
+            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
+          >
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};

types/formSchemas.ts

@@ -151,6 +151,12 @@ export const editProviderFormSchema = (currentAlias: string) =>
     providerId: z.string(),
   });
 
+export const editInviteFormSchema = z.object({
+  invitationId: z.string().uuid(),
+  invitationEmail: z.string().email(),
+  expires_at: z.string().optional(),
+});
+
 export const editUserFormSchema = (
   currentName: string,
   currentEmail: string,