Feature: Admin Dashboard

src/app/[[...paths]]/layout.tsx

@@ -2,6 +2,7 @@ import { TRPCReactProvider } from "~/trpc/react";
 import { sourceSansPro, synaxisHeader } from "../fonts";
 import HeaderMenu from "~/components/layout/header-menu";
 import Footer from "~/components/layout/footer";
+import { Toaster } from "~/components/ui/toaster";
 import "~/styles/globals.css";
 
 export default function RootLayout({
@@ -16,7 +17,10 @@ export default function RootLayout({
       >
         <div className="mx-auto">
           <HeaderMenu />
-          <TRPCReactProvider>{children}</TRPCReactProvider>
+          <TRPCReactProvider>
+            {children}
+            <Toaster />
+          </TRPCReactProvider>
           <Footer />
         </div>
       </body>

src/components/domain/admin/admin-actions/delete-user.tsx

@@ -0,0 +1,47 @@
+import { useToast } from "~/components/ui/use-toast";
+import { Button } from "~/components/ui/button";
+import { api } from "~/trpc/react";
+
+interface PromoteUserProps {
+  userId: string;
+  username: string;
+}
+
+export function DeleteUser(props: PromoteUserProps) {
+  const { userId, username } = props;
+  const { toast } = useToast();
+  const utils = api.useUtils();
+
+  const { mutate, isLoading } = api.user.delete.useMutation({
+    onSuccess: async (_data, _variables) => {
+      await utils.user.list.invalidate();
+      toast({
+        title: `Success`,
+        description: `${username} has been deleted.`,
+      });
+    },
+    onError: (e) => {
+      toast({
+        title: `Error`,
+        variant: "destructive",
+        description: `${e.message}`,
+      });
+    },
+  });
+
+  function handleClick() {
+    return mutate({ userId });
+  }
+
+  return (
+    <>
+      <Button
+        size={"sm"}
+        variant={isLoading ? "disabled" : "default"} // TODO: Change variant to RED-CAUTION
+        onClick={handleClick}
+      >
+        {isLoading ? "Deleting..." : "DELETE USER"}
+      </Button>
+    </>
+  );
+}

src/components/domain/admin/admin-actions/demote-user.tsx

@@ -0,0 +1,83 @@
+import { useToast } from "~/components/ui/use-toast";
+import { Button } from "~/components/ui/button";
+import { USER_ROLES } from "~/lib/constants";
+import { api } from "~/trpc/react";
+
+interface PromoteUserProps {
+  userId: string;
+  username: string;
+  currentUserRole: USER_ROLES;
+}
+
+export function DemoteUser(props: PromoteUserProps) {
+  const { userId, username, currentUserRole } = props;
+  const { toast } = useToast();
+  const utils = api.useUtils();
+
+  const { mutate: demoteFromMod, isLoading: userDemoteIsLoading } =
+    api.user.demoteUserFromMod.useMutation({
+      onSuccess: async (_data, _variables) => {
+        await utils.user.list.invalidate();
+        toast({
+          title: `Success`,
+          description: `${username} has been demoted to a regular user.`,
+        });
+      },
+      onError: (e) => {
+        toast({
+          title: `Error`,
+          variant: "destructive",
+          description: `${e.message}`,
+        });
+      },
+    });
+  const { mutate: demoteToMod, isLoading: modDemoteIsLoading } =
+    api.user.makeMod.useMutation({
+      onSuccess: async (_data, _variables) => {
+        await utils.user.list.invalidate();
+        toast({
+          title: `Success`,
+          description: `${username} has been demoted to a moderator.`,
+        });
+      },
+      onError: (e) => {
+        toast({
+          title: `Error`,
+          variant: "destructive",
+          description: `${e.message}`,
+        });
+      },
+    });
+
+  function handleClick() {
+    switch (currentUserRole) {
+      case USER_ROLES.MODERATOR:
+        return demoteFromMod({ userId });
+      case USER_ROLES.ADMINISTRATOR:
+        return demoteToMod({ userId });
+      default:
+        break;
+    }
+  }
+
+  const buttonText =
+    currentUserRole === USER_ROLES.ADMINISTRATOR
+      ? "Demote User to Moderator"
+      : "Demote User from Moderator";
+
+  return (
+    <>
+      <Button
+        size={"sm"}
+        variant={
+          userDemoteIsLoading || modDemoteIsLoading ? "disabled" : "default"
+        }
+        onClick={handleClick}
+      >
+        {userDemoteIsLoading || modDemoteIsLoading
+          ? "Promoting..."
+          : buttonText}
+      </Button>
+    </>
+  );
+}

src/components/domain/admin/admin-actions/promote-user.tsx

@@ -0,0 +1,83 @@
+import { useToast } from "~/components/ui/use-toast";
+import { Button } from "~/components/ui/button";
+import { USER_ROLES } from "~/lib/constants";
+import { api } from "~/trpc/react";
+
+interface PromoteUserProps {
+  userId: string;
+  username: string;
+  currentUserRole: USER_ROLES;
+}
+
+export function PromoteUser(props: PromoteUserProps) {
+  const { userId, username, currentUserRole } = props;
+  const { toast } = useToast();
+  const utils = api.useUtils();
+
+  const { mutate: promoteToMod, isLoading: modPromoteIsLoading } =
+    api.user.makeMod.useMutation({
+      onSuccess: async (_data, _variables) => {
+        await utils.user.list.invalidate();
+        toast({
+          title: `Success`,
+          description: `${username} is now a moderator!`,
+        });
+      },
+      onError: (e) => {
+        toast({
+          title: `Error`,
+          variant: "destructive",
+          description: `${e.message}`,
+        });
+      },
+    });
+  const { mutate: promoteToAdmin, isLoading: adminPromoteIsLoading } =
+    api.user.makeAdmin.useMutation({
+      onSuccess: async (_data, _variables) => {
+        await utils.user.list.invalidate();
+        toast({
+          title: `Success`,
+          description: `${username} is now an administrator!`,
+        });
+      },
+      onError: (e) => {
+        toast({
+          title: `Error`,
+          variant: "destructive",
+          description: `${e.message}`,
+        });
+      },
+    });
+
+  function handleClick() {
+    switch (currentUserRole) {
+      case USER_ROLES.USER:
+        return promoteToMod({ userId });
+      case USER_ROLES.MODERATOR:
+        return promoteToAdmin({ userId });
+      default:
+        break;
+    }
+  }
+
+  const buttonText =
+    currentUserRole === USER_ROLES.USER
+      ? "Promote User to Moderator"
+      : "Make User an Administrator";
+
+  return (
+    <>
+      <Button
+        size={"sm"}
+        variant={
+          modPromoteIsLoading || adminPromoteIsLoading ? "disabled" : "default"
+        }
+        onClick={handleClick}
+      >
+        {modPromoteIsLoading || adminPromoteIsLoading
+          ? "Promoting..."
+          : buttonText}
+      </Button>
+    </>
+  );
+}

src/components/domain/admin/dashboard/index.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React, { useState } from "react";
+import { Separator } from "~/components/ui/separator";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuList,
+} from "~/components/ui/navigation-menu";
+import AllUsers from "./users";
+
+type View = "users" | "account";
+
+export default function AdminDashboard() {
+  const [view, setView] = useState<View>("users");
+
+  const views: { title: string; view: View }[] = [
+    {
+      title: "Users",
+      view: "users",
+    },
+    // {
+    //   title: "Account",
+    //   view: "account",
+    // },
+  ];
+
+  return (
+    <main className="h-full min-h-screen w-full text-neutral-900">
+      <div className="container flex h-full flex-col items-start justify-center gap-4 px-4 py-4 ">
+        <h1
+          className={`font-synaxisHeader text-5xl font-extrabold tracking-tight text-primary-gold-600 sm:text-[5rem]`}
+        >
+          <span className="text-secondary-red-600">Admin</span> Dashboard
+        </h1>
+
+        <p className="w-1/2">
+          Handle admin-level tasks all from this dashboard.
+        </p>
+
+        <Separator className="w-full border border-neutral-400" />
+
+        <div className="flex h-full w-full flex-row items-start justify-normal gap-4">
+          <NavigationMenu>
+            <NavigationMenuList className="flex w-64 flex-col items-start justify-center">
+              {views.map((item) => {
+                return (
+                  <React.Fragment key={item.view}>
+                    <NavigationMenuItem className="w-full" key={item.view}>
+                      <span
+                        className={`${item.view === view ? "bg-neutral-200" : ""} text-md block cursor-pointer select-none space-y-1 rounded-md p-3 font-medium leading-none no-underline outline-none transition-colors focus:bg-neutral-100`}
+                        onClick={() => setView(item.view)}
+                      >
+                        {item.title}
+                      </span>
+                    </NavigationMenuItem>
+                  </React.Fragment>
+                );
+              })}
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          {view === "users" ? <AllUsers /> : <AllUsers />}
+        </div>
+      </div>
+    </main>
+  );
+}