chore: restore

ui/components/users/add-user-button.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AddIcon } from "../icons";
+import { CustomButton } from "../ui/custom";
+
+export const AddUserButton = () => {
+  return (
+    <div className="flex w-full items-center justify-end">
+      <CustomButton
+        asLink="/invitations/new"
+        ariaLabel="Invite User"
+        variant="solid"
+        color="action"
+        size="md"
+        endContent={<AddIcon size={20} />}
+      >
+        Invite User
+      </CustomButton>
+    </div>
+  );
+};

ui/components/users/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 { deleteUser } from "@/actions/users/users";
+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({
+  userId: z.string(),
+});
+
+export const DeleteForm = ({
+  userId,
+  setIsOpen,
+}: {
+  userId: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      userId,
+    },
+  });
+  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 deleteUser(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 user was removed successfully.",
+      });
+    }
+    setIsOpen(false); // Close the modal on success
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmitClient)}>
+        <input type="hidden" name="id" value={userId} />
+        <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>
+  );
+};

ui/components/users/forms/edit-form.tsx

@@ -0,0 +1,155 @@
+"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 { updateUser } from "@/actions/users/users";
+import { SaveIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { editUserFormSchema } from "@/types";
+
+export const EditForm = ({
+  userId,
+  userName,
+  userEmail,
+  userCompanyName,
+  setIsOpen,
+}: {
+  userId: string;
+  userName?: string;
+  userEmail?: string;
+  userCompanyName?: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = editUserFormSchema(
+    userName ?? "",
+    userEmail ?? "",
+    userCompanyName ?? "",
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      userId: userId,
+      name: userName,
+      email: userEmail,
+      company_name: userCompanyName,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+
+    const data = await updateUser(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 user 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 name: <span className="font-bold">{userName}</span>
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="name"
+            type="text"
+            label="Name"
+            labelPlacement="outside"
+            placeholder={userName}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.name}
+          />
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="email"
+            type="email"
+            label="Email"
+            labelPlacement="outside"
+            placeholder={userEmail}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.email}
+          />
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="company_name"
+            type="text"
+            label="Company Name"
+            labelPlacement="outside"
+            placeholder={userCompanyName}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.company_name}
+          />
+        </div>
+        <input type="hidden" name="userId" value={userId} />
+
+        <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>
+  );
+};

ui/components/users/forms/index.ts

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

ui/components/users/index.ts

@@ -0,0 +1 @@
+export * from "./add-user-button";

ui/components/users/profile/index.ts

@@ -0,0 +1,2 @@
+export * from "./skeleton-user-info";
+export * from "./user-info";

ui/components/users/profile/skeleton-user-info.tsx

@@ -0,0 +1,64 @@
+import { Card, CardBody, CardHeader, Skeleton } from "@nextui-org/react";
+
+export const SkeletonUserInfo = () => {
+  const rows = 4;
+
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-1/3 rounded-lg">
+          <div className="h-6 bg-default-200"></div>
+        </Skeleton>
+      </CardHeader>
+      <CardBody>
+        <div className="grid grid-cols-1 gap-4">
+          {/* Header Skeleton */}
+          <div className="grid grid-cols-4 border-b pb-2 text-sm font-semibold">
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+          </div>
+
+          {/* Row Skeletons */}
+          {Array.from({ length: rows }).map((_, index) => (
+            <div
+              key={index}
+              className="grid grid-cols-4 items-center border-b py-2 text-sm"
+            >
+              {/* Provider Name */}
+              <div className="flex items-center space-x-2">
+                <Skeleton className="h-5 w-5 rounded-lg">
+                  <div className="h-5 w-5 bg-default-200"></div>
+                </Skeleton>
+                <Skeleton className="h-5 w-1/3 rounded-lg">
+                  <div className="h-5 bg-default-200"></div>
+                </Skeleton>
+              </div>
+              {/* Percent Passing */}
+              <Skeleton className="h-5 w-1/4 rounded-lg">
+                <div className="h-5 bg-default-200"></div>
+              </Skeleton>
+              {/* Failing Checks */}
+              <Skeleton className="h-5 w-1/4 rounded-lg">
+                <div className="h-5 bg-default-200"></div>
+              </Skeleton>
+              {/* Total Resources */}
+              <Skeleton className="h-5 w-1/4 rounded-lg">
+                <div className="h-5 bg-default-200"></div>
+              </Skeleton>
+            </div>
+          ))}
+        </div>
+      </CardBody>
+    </Card>
+  );
+};

ui/components/users/profile/user-info.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Card, CardBody } from "@nextui-org/react";
+
+import { DateWithTime } from "@/components/ui/entities";
+import { UserProfileProps } from "@/types";
+
+export const UserInfo = ({
+  user,
+}: {
+  user: UserProfileProps["data"] | null;
+}) => {
+  if (!user || !user.attributes) {
+    return (
+      <Card className="dark:bg-prowler-blue-400">
+        <CardBody>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">Name:</p>
+              <span className="text-sm">-</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">Email:</p>
+              <span className="text-sm">-</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">Company:</p>
+              <span className="text-sm">-</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">
+                Date Joined:
+              </p>
+              <span className="text-sm">-</span>
+            </div>
+          </div>
+          <div className="mt-4 text-center text-sm text-red-600">
+            Unable to load user information.
+            <br />
+            Please check your API connection.
+          </div>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  const { name, email, company_name, date_joined } = user.attributes;
+
+  return (
+    <Card className="dark:bg-prowler-blue-400">
+      <CardBody>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">Name:</p>
+            <span className="text-sm">{name}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">Email:</p>
+            <span className="text-sm">{email}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">Company:</p>
+            <span className="text-sm">{company_name}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">
+              Date Joined:
+            </p>
+            <span className="text-sm">
+              <DateWithTime inline dateTime={date_joined} />
+            </span>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};

ui/components/users/table/column-users.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DateWithTime } from "@/components/ui/entities";
+import { DataTableColumnHeader } from "@/components/ui/table";
+import { UserProps } from "@/types";
+
+import { DataTableRowActions } from "./data-table-row-actions";
+
+const getUserData = (row: { original: UserProps }) => {
+  return row.original.attributes;
+};
+
+export const ColumnsUser: ColumnDef<UserProps>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Name"} param="name" />
+    ),
+    cell: ({ row }) => {
+      const data = getUserData(row);
+      return <p className="font-semibold">{data?.name || "N/A"}</p>;
+    },
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Email"} param="email" />
+    ),
+    cell: ({ row }) => {
+      const { email } = getUserData(row);
+      return <p className="font-semibold">{email}</p>;
+    },
+  },
+  {
+    accessorKey: "company_name",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Company Name"}
+        param="company_name"
+      />
+    ),
+    cell: ({ row }) => {
+      const { company_name } = getUserData(row);
+      return <p className="font-semibold">{company_name}</p>;
+    },
+  },
+
+  {
+    accessorKey: "date_joined",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Joined"}
+        param="date_joined"
+      />
+    ),
+    cell: ({ row }) => {
+      const { date_joined } = getUserData(row);
+      return <DateWithTime dateTime={date_joined} showTime={false} />;
+    },
+  },
+
+  {
+    accessorKey: "actions",
+    header: () => <div className="text-right">Actions</div>,
+    id: "actions",
+    cell: ({ row }) => {
+      return <DataTableRowActions row={row} />;
+    },
+  },
+];

ui/components/users/table/data-table-row-actions.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import {
+  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<ProviderProps> {
+  row: Row<ProviderProps>;
+}
+const iconClasses =
+  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+
+export function DataTableRowActions<ProviderProps>({
+  row,
+}: DataTableRowActionsProps<ProviderProps>) {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const userId = (row.original as { id: string }).id;
+  const userName = (row.original as any).attributes?.name;
+  const userEmail = (row.original as any).attributes?.email;
+  const userCompanyName = (row.original as any).attributes?.company_name;
+  return (
+    <>
+      <CustomAlertModal
+        isOpen={isEditOpen}
+        onOpenChange={setIsEditOpen}
+        title="Edit user"
+        description={"Edit the user details"}
+      >
+        <EditForm
+          userId={userId}
+          userName={userName}
+          userEmail={userEmail}
+          userCompanyName={userCompanyName}
+          setIsOpen={setIsEditOpen}
+        />
+      </CustomAlertModal>
+      <CustomAlertModal
+        isOpen={isDeleteOpen}
+        onOpenChange={setIsDeleteOpen}
+        title="Are you absolutely sure?"
+        description="This action cannot be undone. This will permanently delete your user account and remove your data from the server."
+      >
+        <DeleteForm userId={userId} setIsOpen={setIsDeleteOpen} />
+      </CustomAlertModal>
+
+      <div className="relative flex items-center justify-end gap-2">
+        <Dropdown
+          className="shadow-xl dark:bg-prowler-blue-800"
+          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
+                key="edit"
+                description="Allows you to edit the user"
+                textValue="Edit User"
+                startContent={<EditDocumentBulkIcon className={iconClasses} />}
+                onClick={() => setIsEditOpen(true)}
+              >
+                Edit User
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSection title="Danger zone">
+              <DropdownItem
+                key="delete"
+                className="text-danger"
+                color="danger"
+                description="Delete the user permanently"
+                textValue="Delete User"
+                startContent={
+                  <DeleteDocumentBulkIcon
+                    className={clsx(iconClasses, "!text-danger")}
+                  />
+                }
+                onClick={() => setIsDeleteOpen(true)}
+              >
+                Delete User
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}

ui/components/users/table/index.ts

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

ui/components/users/table/skeleton-table-user.tsx

@@ -0,0 +1,59 @@
+import { Card, Skeleton } from "@nextui-org/react";
+import React from "react";
+
+export const SkeletonTableUser = () => {
+  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>
+  );
+};