feat: add roles page

ui/components/roles/add-role-button.tsx

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

ui/components/roles/index.ts

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

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

@@ -0,0 +1,95 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DateWithTime } from "@/components/ui/entities";
+import { DataTableColumnHeader } from "@/components/ui/table";
+import { RolesProps } from "@/types";
+
+const getRoleAttributes = (row: { original: RolesProps["data"][number] }) => {
+  return row.original.attributes;
+};
+
+const getRoleRelationships = (row: {
+  original: RolesProps["data"][number];
+}) => {
+  return row.original.relationships;
+};
+
+export const ColumnsRoles: ColumnDef<RolesProps["data"][number]>[] = [
+  {
+    accessorKey: "role",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Role"} param="name" />
+    ),
+    cell: ({ row }) => {
+      const data = getRoleAttributes(row);
+      return (
+        <p className="font-semibold">
+          {data.name[0].toUpperCase() + data.name.slice(1).toLowerCase()}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "users",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Users"} param="users" />
+    ),
+    cell: ({ row }) => {
+      const relationships = getRoleRelationships(row);
+      const count = relationships.users.meta.count;
+      return (
+        <p className="font-semibold">
+          {count === 0
+            ? "No Users"
+            : `${count} ${count === 1 ? "User" : "Users"}`}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "invitations",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Invitations"}
+        param="invitations"
+      />
+    ),
+    cell: ({ row }) => {
+      const relationships = getRoleRelationships(row);
+      return (
+        <p className="font-semibold">{relationships.invitations.meta.count}</p>
+      );
+    },
+  },
+  {
+    accessorKey: "updated_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Updated At"}
+        param="updated_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const { updated_at } = getRoleAttributes(row);
+      return <DateWithTime dateTime={updated_at} showTime={false} />;
+    },
+  },
+  {
+    accessorKey: "inserted_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Added At"}
+        param="inserted_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const { inserted_at } = getRoleAttributes(row);
+      return <DateWithTime dateTime={inserted_at} showTime={false} />;
+    },
+  },
+];

ui/components/roles/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 { VerticalDotsIcon } from "@/components/icons";
+
+// 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;
+  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 revoke your invitation."
+      >
+        <DeleteForm invitationId={invitationId} 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
+                href={`/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)}
+              >
+                Revoke Invitation
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}

ui/components/roles/table/index.ts

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

ui/components/roles/table/skeleton-table-roles.tsx

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