Admin dashboard!! (#387)

* updated dependency

* made baseline

* frontend landing page

* Revert "updated dependency (#384)"

This reverts commit bc38882.

* updated redirection

* refactored header

* feat: report schema

* db changes

* fixed styling

* rough draft of admin dashboard

* created role

* made add user work

* updated auth

* added generate file

* fixed logic for landing page login

* updated image placement

* fixed styling

* merge conflicts

* added toast

* removed unnecessary

* cleaned up code

* removed untracked files

* test

* add dev role

* fix auth bug

* admin dashboard scaffolding

* db changes

* format

* added revokedAt field

* format

---------

Co-authored-by: Michael Song <msong@hometap.com>
Co-authored-by: Michael Song <song.mich@northeastern.edu>
Co-authored-by: Michael Song <64758303+songmichael11@users.noreply.github.com>

Author: gpalmer27

apps/web/src/app/(pages)/(landing)/page.tsx

@@ -1,14 +1,18 @@
+import { signIn } from "@cooper/auth";
 import Image from "next/image";
 import LoginButton from "~/app/_components/auth/login-button";
+import { AdminAccessToast } from "~/app/_components/landing/admin-access-toast";
 
 const textOptions = [
   "Insights on interviews, pay, and job experience",
   "Side-by-side comparison view of up to three jobs",
   "Anonymous reviews to protect identities",
 ];
+
 export default function Landing() {
   return (
     <div className="flex w-full flex-col bg-cooper-cream-100 lg:flex-row overflow-auto lg:overflow-hidden h-full flex-1">
+      <AdminAccessToast />
       <div className="lg:w-[43%] flex flex-col pl-16 pr-28 justify-center pt-2 lg:pt-0">
         <div className="flex w-fit flex-row items-center gap-2">
           <div className="text-cooper-blue-800 text-[40px] leading-[48px] font-semibold">
@@ -18,9 +22,21 @@ export default function Landing() {
         </div>
         <div className="w-fit pt-8">
           <LoginButton />
-          <div className="text-cooper-gray-600 text-md pb-6 pt-4 w-fit">
+          <div className="text-cooper-gray-600 text-md pt-4 w-fit">
             Log in with husky.neu.edu email to access reviews
           </div>
+          <form>
+            <button
+              type="submit"
+              formAction={async () => {
+                "use server";
+                await signIn("googleAdmin", { redirectTo: "/roles" });
+              }}
+              className="text-cooper-gray-600 font-bold text-md pb-6 pt-2 w-fit cursor-pointer hover:underline"
+            >
+              Or continue as admin / coordinator
+            </button>
+          </form>
           <hr />
         </div>
 

apps/web/src/app/(pages)/(protected)/admin/dashboard/page.tsx

@@ -0,0 +1,7 @@
+export default function AdminDashboardPage() {
+  return (
+    <div className="flex h-full w-full items-center justify-center flex-col">
+      Dashboard yay
+    </div>
+  );
+}

apps/web/src/app/(pages)/(protected)/admin/layout.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { UserRole } from "@cooper/db/schema";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { api } from "~/trpc/react";
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+
+  const {
+    data: session,
+    isLoading: sessionLoading,
+    error: _sessionError,
+  } = api.auth.getSession.useQuery();
+
+  if (
+    !sessionLoading &&
+    session?.user.role &&
+    session.user.role !== UserRole.ADMIN &&
+    session.user.role !== UserRole.DEVELOPER
+  ) {
+    router.replace("/404");
+    return null;
+  }
+
+  return (
+    <div className="flex w-full flex-col">
+      <div className="border-b bg-white px-6 py-3">
+        <div className="flex gap-4 text-sm">
+          <Link href="/admin/dashboard">Dashboard</Link>
+          <Link href="/admin/user-manager">User Manager</Link>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}

apps/web/src/app/(pages)/(protected)/admin/user-manager/page.tsx

@@ -0,0 +1,7 @@
+export default function AdminUserManagerPage() {
+  return (
+    <div className="flex h-full w-full items-center justify-center flex-col">
+      User Manager yay
+    </div>
+  );
+}

apps/web/src/app/(pages)/(protected)/review-form/page.tsx

@@ -21,6 +21,7 @@ import dayjs from "dayjs";
 import { Form } from "node_modules/@cooper/ui/src/form";
 import { PaySection } from "~/app/_components/form/sections/pay-section";
 import { api } from "~/trpc/react";
+import { UserRole } from "node_modules/@cooper/db/src/schema/misc";
 
 const filter = new Filter();
 
@@ -264,6 +265,14 @@ export default function ReviewForm() {
     return null;
   }
 
+  if (
+    session.user.role &&
+    session.user.role !== UserRole.STUDENT &&
+    session.user.role !== UserRole.DEVELOPER
+  ) {
+    router.replace("/404");
+  }
+
   // if (submitted) {
   //   if (validForm) {
   //     return <SubmissionConfirmation />;

apps/web/src/app/_components/admin/create-user-form.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+
+import { UserRole, UserRoleType } from "@cooper/db/schema";
+import { cn, useCustomToast } from "@cooper/ui";
+import { Button } from "@cooper/ui/button";
+import { Input } from "@cooper/ui/input";
+
+import { Select } from "~/app/_components/themed/onboarding/select";
+import { api } from "~/trpc/react";
+
+export function CreateUserForm() {
+  const { toast } = useCustomToast();
+  const [selectedRole, setSelectedRole] = useState<string>("");
+  const [email, setEmail] = useState("");
+
+  const createUser = api.user.create.useMutation({
+    onSuccess: () => {
+      toast.success("User added successfully.");
+      setEmail("");
+      setSelectedRole("");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+
+  return (
+    <div className="flex flex-row">
+      <Input
+        className={cn(
+          "border-cooper-gray-150 h-9 border-[1px] pl-5 w-[30%] text-sm text-cooper-gray-400",
+        )}
+        placeholder="Type email here"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <div className="w-[10%]">
+        <Select
+          options={[
+            { value: UserRole.ADMIN, label: "Admin" },
+            { value: UserRole.COORDINATOR, label: "Co-op advisor" },
+          ]}
+          className="border-cooper-gray-150 h-10 text-sm"
+          value={selectedRole}
+          placeholder="Select"
+          onChange={(e) => {
+            setSelectedRole(e.target.value);
+          }}
+        />
+      </div>
+      <Button
+        type="button"
+        className="bg-cooper-gray-550 hover:bg-cooper-gray-600 rounded-lg border-none px-8 py-3 text-lg font-semibold text-white"
+        onClick={() => {
+          if (!email || !selectedRole) return;
+          createUser.mutate({ email, role: selectedRole as UserRoleType });
+        }}
+      >
+        Submit
+      </Button>
+    </div>
+  );
+}

apps/web/src/app/_components/companies/company-card-preview.tsx

@@ -37,7 +37,7 @@ export function CompanyCardPreview({
   return (
     <Card
       className={cn(
-        "outline-cooper-gray-150 flex h-fit flex-col justify-between rounded-lg outline outline-[0.75px]",
+        "outline-cooper-gray-150 flex h-fit flex-col justify-between rounded-lg outline outline-[0.75px] hover:cursor-pointer hover:bg-cooper-gray-200",
         className,
       )}
     >

apps/web/src/app/_components/header/header-layout.tsx

@@ -8,7 +8,7 @@ import ProfileButton from "../profile/profile-button";
 /**
  * This should be used when placing content under the header, standardizes how children are placed under a header.
  * @param param0 Children to pass into the layout
- * @returns A layout component that standardizes the distance from the header
+ * @returns A layout component that standardizes the distance from the header.
  */
 export default async function HeaderLayout({
   children,

apps/web/src/app/_components/header/header.tsx

@@ -18,6 +18,7 @@ import { handleSignOut } from "../auth/actions";
 import CooperLogo from "../cooper-logo";
 import MobileHeaderButton from "./mobile-header-button";
 import { Session } from "@cooper/auth";
+import { UserRole } from "node_modules/@cooper/db/src/schema/misc";
 
 interface HeaderProps {
   auth: React.ReactNode;
@@ -32,6 +33,9 @@ export default function Header({ auth, loggedIn }: HeaderProps) {
   const [isOpen, setIsOpen] = useState(false);
   const session = api.auth.getSession.useQuery();
   const utils = api.useUtils();
+  const isStudentOrDeveloper =
+    session.data?.user.role === UserRole.STUDENT ||
+    session.data?.user.role === UserRole.DEVELOPER;
 
   if (isOpen) {
     return (
@@ -101,6 +105,15 @@ export default function Header({ auth, loggedIn }: HeaderProps) {
                     Log Out
                   </button>
                 </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel className="text-center">
+                  <Link
+                    href="/admin/dashboard"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Admin
+                  </Link>
+                </DropdownMenuLabel>
               </DropdownMenuContent>
             </DropdownMenu>
           ) : (
@@ -136,7 +149,7 @@ export default function Header({ auth, loggedIn }: HeaderProps) {
         >
           Submit Feedback or Bug Reports
         </Link>
-        {session.data && loggedIn && (
+        {session.data && loggedIn && isStudentOrDeveloper && (
           <div className="flex items-center gap-8">
             <Link href="/review-form">
               <Button className="hover:border-cooper-yellow-700 hover:bg-cooper-yellow-700 h-9 rounded-lg border-none border-cooper-yellow-500 bg-cooper-yellow-500 px-3 py-2 text-sm font-semibold text-white">
@@ -151,7 +164,7 @@ export default function Header({ auth, loggedIn }: HeaderProps) {
 
       {/* Mobile: when logged in show + and hamburger; when logged out show only login button */}
       <div className="justify-right mr-2 flex flex-shrink grid-cols-2 items-center gap-2 md:hidden">
-        {session.data ? (
+        {session.data && loggedIn && isStudentOrDeveloper ? (
           <>
             <Link href="/review-form">
               <Button className="hover:border-cooper-yellow-700 hover:bg-cooper-yellow-700 h-9 rounded-lg border-none border-cooper-yellow-500 bg-cooper-yellow-500 px-3 py-2 text-sm font-semibold text-white">

apps/web/src/app/_components/landing/admin-access-toast.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Suspense, useEffect, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import { useCustomToast } from "@cooper/ui";
+
+const CLEAR_URL_AFTER_MS = 5000;
+
+const MESSAGE = "You don't have access as an admin or coordinator.";
+
+function AdminAccessToastInner() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { toast } = useCustomToast();
+  const shownRef = useRef(false);
+
+  const error = searchParams.get("error");
+  console.log("[AdminAccessToast] render", { error });
+
+  useEffect(() => {
+    if (!error || shownRef.current) return;
+    shownRef.current = true;
+    console.log("[AdminAccessToast] scheduling toast", { error });
+
+    console.log("[AdminAccessToast] showing toast", { error });
+    toast.error(MESSAGE);
+
+    const clearUrlId = window.setTimeout(() => {
+      console.log("[AdminAccessToast] clearing url", { error });
+      router.replace("/", { scroll: false });
+    }, CLEAR_URL_AFTER_MS);
+
+    return () => {
+      console.log("[AdminAccessToast] cleanup", { error });
+      window.clearTimeout(clearUrlId);
+    };
+    // Intentionally depend only on `error`.
+    // `toast` is not referentially stable (new object each render) and would cancel the timeout.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error]);
+
+  return null;
+}
+
+export function AdminAccessToast() {
+  return (
+    <Suspense fallback={null}>
+      <AdminAccessToastInner />
+    </Suspense>
+  );
+}