Users Page - Add User Modal, Edit User Modal (#45)

* feat(users): Add in Add User modal, add in Label component

* feat(users): Make adjustments to Add User modal and Edit user modal

* feat(users): Populate data from mock API

* feat(users): Permissions - do not show team info to users, redirect users

components/users/table/ColumnsUser.tsx

@@ -1,17 +1,10 @@
 "use client";
 
-import {
-  Button,
-  Dropdown,
-  DropdownItem,
-  DropdownMenu,
-  DropdownTrigger,
-} from "@nextui-org/react";
 import { ColumnDef } from "@tanstack/react-table";
 
-import { VerticalDotsIcon } from "@/components/icons";
 import { DateWithTime } from "@/components/providers";
 import { StatusBadge } from "@/components/ui";
+import { UserActions } from "@/components/users";
 import { UserProps } from "@/types";
 
 const getUserData = (row: { original: UserProps }) => {
@@ -63,21 +56,9 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
     accessorKey: "actions",
     header: () => <div className="text-right">Actions</div>,
     id: "actions",
-    cell: () => {
-      return (
-        <div className="relative flex justify-end items-center gap-2">
-          <Dropdown className="bg-background border-1 border-default-200">
-            <DropdownTrigger>
-              <Button isIconOnly radius="full" size="sm" variant="light">
-                <VerticalDotsIcon className="text-default-400" />
-              </Button>
-            </DropdownTrigger>
-            <DropdownMenu>
-              <DropdownItem>Edit</DropdownItem>
-            </DropdownMenu>
-          </Dropdown>
-        </div>
-      );
+    cell: ({ row }) => {
+      const userData = getUserData(row);
+      return <UserActions userData={userData} />;
     },
   },
 ];

components/users/table/UserActions.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+
+import { VerticalDotsIcon } from "@/components/icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui";
+import { EditUserModal } from "@/components/users";
+import { UserProps } from "@/types";
+
+interface UserActionsProps {
+  userData: UserProps;
+}
+
+export const UserActions: React.FC<UserActionsProps> = ({ userData }) => {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+
+  return (
+    <>
+      <div className="relative flex justify-end items-center gap-2">
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger>
+            <VerticalDotsIcon
+              size={28}
+              className="text-default-400 p-0.5 hover:bg-gray-200 hover:rounded-full"
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="bg-white">
+            <DropdownMenuItem
+              className="hover:bg-gray-200 hover:cursor-pointer"
+              onClick={() => setIsEditOpen(true)}
+            >
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="hover:bg-gray-200 hover:cursor-pointer">
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      {isEditOpen && (
+        <EditUserModal
+          isOpen={isEditOpen}
+          setIsOpen={setIsEditOpen}
+          userData={userData}
+        />
+      )}
+    </>
+  );
+};