ability to remove user from org

src/app/[orgId]/settings/sites/components/SitesTable.tsx

@@ -79,7 +79,7 @@ export const columns: ColumnDef<SiteRow>[] = [
                     .then(() => {
                         router.refresh();
                     });
-            }
+            };
 
             return (
                 <DropdownMenu>
@@ -98,7 +98,12 @@ export const columns: ColumnDef<SiteRow>[] = [
                             </Link>
                         </DropdownMenuItem>
                         <DropdownMenuItem>
-                            <button onClick={() => deleteSite(siteRow.id)} className="text-red-600 hover:text-red-800 hover:underline cursor-pointer">Delete</button>
+                            <button
+                                onClick={() => deleteSite(siteRow.id)}
+                                className="text-red-600 hover:text-red-800"
+                            >
+                                Delete
+                            </button>
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>

src/app/[orgId]/settings/users/components/InviteUserForm.tsx

@@ -122,7 +122,13 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
 
     return (
         <>
-            <Credenza open={open} onOpenChange={setOpen}>
+            <Credenza open={open} onOpenChange={(val) => {
+                setOpen(val);
+                setInviteLink(null);
+                setLoading(false);
+                setExpiresInDays(1);
+                form.reset();
+            }}>
                 <CredenzaContent>
                     <CredenzaHeader>
                         <CredenzaTitle>Invite User</CredenzaTitle>
@@ -257,7 +263,7 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
                             type="submit"
                             form="invite-user-form"
                             loading={loading}
-                            disabled={inviteLink !== null}
+                            disabled={inviteLink !== null || loading}
                         >
                             Create Invitation
                         </Button>

src/app/[orgId]/settings/users/components/UsersTable.tsx

@@ -12,60 +12,178 @@ import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 import { UsersDataTable } from "./UsersDataTable";
 import { useState } from "react";
 import InviteUserForm from "./InviteUserForm";
+import { Badge } from "@app/components/ui/badge";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { useUserContext } from "@app/hooks/useUserContext";
+import api from "@app/api";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { useToast } from "@app/hooks/useToast";
 
 export type UserRow = {
     id: string;
     email: string;
+    status: string;
+    role: string;
 };
 
-export const columns: ColumnDef<UserRow>[] = [
-    {
-        accessorKey: "email",
-        header: ({ column }) => {
-            return (
-                <Button
-                    variant="ghost"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === "asc")
-                    }
-                >
-                    Email
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            );
-        },
-    },
-    {
-        id: "actions",
-        cell: ({ row }) => {
-            const userRow = row.original;
-
-            return (
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" className="h-8 w-8 p-0">
-                            <span className="sr-only">Open menu</span>
-                            <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuItem>Edit access</DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            );
-        },
-    },
-];
-
 type UsersTableProps = {
     users: UserRow[];
 };
 
 export default function UsersTable({ users }: UsersTableProps) {
     const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [userToRemove, setUserToRemove] = useState<UserRow | null>(null);
+
+    const user = useUserContext();
+    const { org } = useOrgContext();
+    const { toast } = useToast();
+
+    const columns: ColumnDef<UserRow>[] = [
+        {
+            accessorKey: "email",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Email
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+        },
+        {
+            accessorKey: "status",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Status
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+        },
+        {
+            accessorKey: "role",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Role
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+        },
+        {
+            id: "actions",
+            cell: ({ row }) => {
+                const userRow = row.original;
+
+                return (
+                    <>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <span className="sr-only">Open menu</span>
+                                    <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <DropdownMenuItem>Manage user</DropdownMenuItem>
+                                {userRow.email !== user?.email && (
+                                    <DropdownMenuItem>
+                                        <button
+                                            className="text-red-600 hover:text-red-800"
+                                            onClick={() => {
+                                                setIsDeleteModalOpen(true);
+                                                setUserToRemove(userRow);
+                                            }}
+                                        >
+                                            Remove User
+                                        </button>
+                                    </DropdownMenuItem>
+                                )}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </>
+                );
+            },
+        },
+    ];
+
+    async function removeUser() {
+        if (userToRemove) {
+            const res = await api
+                .delete(`/org/${org!.org.orgId}/user/${userToRemove.id}`)
+                .catch((e) => {
+                    toast({
+                        variant: "destructive",
+                        title: "Failed to remove user",
+                        description:
+                            e.message ??
+                            "An error occurred while removing the user.",
+                    });
+                });
+
+            if (res && res.status === 200) {
+                toast({
+                    variant: "default",
+                    title: "User removed",
+                    description: `The user ${userToRemove.email} has been removed from the organization.`,
+                });
+            }
+        }
+        setIsDeleteModalOpen(false);
+    }
 
     return (
         <>
+            <ConfirmDeleteDialog
+                open={isDeleteModalOpen}
+                setOpen={(val) => {
+                    setIsDeleteModalOpen(val);
+                    setUserToRemove(null);
+                }}
+                dialog={
+                    <div>
+                        <p className="mb-2">
+                            Are you sure you want to remove{" "}
+                            <b>{userToRemove?.email}</b> from the organization?
+                        </p>
+
+                        <p className="mb-2">
+                            Once removed, this user will no longer have access
+                            to the organization. You can always re-invite them
+                            later, but they will need to accept the invitation
+                            again.
+                        </p>
+
+                        <p>
+                            To confirm, please type the email address of the
+                            user below.
+                        </p>
+                    </div>
+                }
+                buttonText="Confirm remove user"
+                onConfirm={removeUser}
+                string={userToRemove?.email ?? ""}
+                title="Remove user from organization"
+            />
+
             <InviteUserForm
                 open={isInviteModalOpen}
                 setOpen={setIsInviteModalOpen}

src/app/[orgId]/settings/users/page.tsx

@@ -6,6 +6,8 @@ import UsersTable, { UserRow } from "./components/UsersTable";
 import { GetOrgResponse } from "@server/routers/org";
 import { cache } from "react";
 import OrgProvider from "@app/providers/OrgProvider";
+import UserProvider from "@app/providers/UserProvider";
+import { verifySession } from "@app/lib/auth/verifySession";
 
 type UsersPageProps = {
     params: Promise<{ orgId: string }>;
@@ -14,6 +16,9 @@ type UsersPageProps = {
 export default async function UsersPage(props: UsersPageProps) {
     const params = await props.params;
 
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
     let users: ListUsersResponse["users"] = [];
     const res = await internal
         .get<AxiosResponse<ListUsersResponse>>(
@@ -49,6 +54,8 @@ export default async function UsersPage(props: UsersPageProps) {
         return {
             id: user.id,
             email: user.email,
+            status: "Confirmed",
+            role: user.roleName || "",
         };
     });
 
@@ -64,9 +71,11 @@ export default async function UsersPage(props: UsersPageProps) {
                 </p>
             </div>
 
-            <OrgProvider org={org}>
-                <UsersTable users={userRows} />
-            </OrgProvider>
+            <UserProvider user={user!}>
+                <OrgProvider org={org}>
+                    <UsersTable users={userRows} />
+                </OrgProvider>
+            </UserProvider>
         </>
     );
 }

src/app/page.tsx

@@ -1,7 +1,7 @@
 import { internal } from "@app/api";
 import { authCookieHeader } from "@app/api/cookies";
 import { verifySession } from "@app/lib/auth/verifySession";
-import { LandingProvider } from "@app/providers/LandingProvider";
+import UserProvider from "@app/providers/UserProvider";
 import { ListOrgsResponse } from "@server/routers/org";
 import { AxiosResponse } from "axios";
 import { ArrowUpRight } from "lucide-react";
@@ -42,9 +42,9 @@ export default async function Page(props: {
 
     return (
         <>
-            <LandingProvider user={user}>
+            <UserProvider user={user}>
                 <p>Logged in as {user.email}</p>
-            </LandingProvider>
+            </UserProvider>
 
             <div className="mt-4">
                 {orgs.map((org) => (

src/components/ConfirmDeleteDialog.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import api from "@app/api";
+import { Button } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@app/components/ui/select";
+import { useToast } from "@app/hooks/useToast";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+    InviteUserBody,
+    InviteUserResponse,
+    ListUsersResponse,
+} from "@server/routers/user";
+import { AxiosResponse } from "axios";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import CopyTextBox from "@app/components/CopyTextBox";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle,
+} from "@app/components/Credenza";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { Description } from "@radix-ui/react-toast";
+
+type InviteUserFormProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    string: string;
+    title: string;
+    dialog: React.ReactNode;
+    buttonText: string;
+    onConfirm: () => Promise<void>;
+};
+
+export default function InviteUserForm({
+    open,
+    setOpen,
+    string,
+    title,
+    onConfirm,
+    buttonText,
+    dialog,
+}: InviteUserFormProps) {
+    const [loading, setLoading] = useState(false);
+
+    const formSchema = z.object({
+        string: z.string().refine((val) => val === string, {
+            message: "Invalid confirmation",
+        }),
+    });
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            string: "",
+        },
+    });
+
+    function reset() {
+        form.reset();
+        setLoading(false);
+    }
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        setLoading(true);
+        await onConfirm();
+        reset();
+    }
+
+    return (
+        <>
+            <Credenza
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val);
+                    reset();
+                }}
+            >
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>{title}</CredenzaTitle>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <div className="mb-4">{dialog}</div>
+                        <Form {...form}>
+                            <form
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                                id="confirm-delete-form"
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="string"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </form>
+                        </Form>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <Button
+                            type="submit"
+                            form="confirm-delete-form"
+                            loading={loading}
+                            disabled={loading}
+                        >
+                            {buttonText}
+                        </Button>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+        </>
+    );
+}

src/components/ui/badge.tsx

@@ -1,36 +1,39 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+                outline: "text-foreground",
+                green: "border-transparent bg-green-300",
+                yellow: "border-transparent bg-yellow-300",
+                red: "border-transparent bg-red-300",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+);
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+    return (
+        <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

src/providers/UserProvider.tsx

@@ -4,13 +4,13 @@ import { UserContext } from "@app/contexts/userContext";
 import { GetUserResponse } from "@server/routers/user";
 import { ReactNode } from "react";
 
-type LandingProviderProps = {
+type UserProviderProps = {
     user: GetUserResponse;
     children: ReactNode;
 };
 
-export function LandingProvider({ user, children }: LandingProviderProps) {
+export function UserProvider({ user, children }: UserProviderProps) {
     return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
 }
 
-export default LandingProvider;
+export default UserProvider;