Merge pull request #154 from lil-lab/feat/admin-panel

Admin panel

.github/pull_request_template.md

@@ -16,3 +16,4 @@
 ## TODO
 
 - [ ] Paste the testing link
+- [ ] Clear `console.log` or `console.error` for debug usage

.gitignore

@@ -55,4 +55,7 @@ Thumbs.db
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+
+# misc
+apps/**/pnpm-lock.yaml

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 LIL Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/recnet/src/app/Headerbar.tsx

@@ -39,6 +39,11 @@ export function UserDropdown({ user }: { user: User }) {
         <DropdownMenu.Item>
           <Link href={`/${user.username}`}>Profile</Link>
         </DropdownMenu.Item>
+        {user.role && user.role === "admin" ? (
+          <DropdownMenu.Item>
+            <Link href={`/admin`}>Admin Panel</Link>
+          </DropdownMenu.Item>
+        ) : null}
         <DropdownMenu.Item color="red" onClick={handleLogout}>
           Log out
         </DropdownMenu.Item>
@@ -120,7 +125,8 @@ export function Headerbar() {
         "border-b-[1px]",
         "border-slate-8",
         "sticky",
-        "top-0"
+        "top-0",
+        "z-[1000]"
       )}
     >
       <Flex className="items-center" gap="4">

apps/recnet/src/app/MobileNavigator.tsx

@@ -4,19 +4,21 @@ import {
   AvatarIcon,
   Cross2Icon,
   HomeIcon,
+  MagicWandIcon,
   Pencil2Icon,
 } from "@radix-ui/react-icons";
 import { useRouter, usePathname } from "next/navigation";
 import { useAuth } from "./AuthContext";
 import { UserDropdown } from "./Headerbar";
 import { useGoogleLogin } from "@/firebase/auth";
 import { toast } from "sonner";
-import { Dialog, Text, Button, Flex } from "@radix-ui/themes";
+import { Dialog, Text, Button, Flex, DropdownMenu } from "@radix-ui/themes";
 import { SkeletonText, Skeleton } from "@/components/Skeleton";
 import { useState } from "react";
 import { useRec } from "@/hooks/useRec";
 import { getDateFromFirebaseTimestamp, getNextCutOff } from "@/utils/date";
-import { RecForm } from "./feeds/LeftPanel";
+import { RecForm } from "@/components/RecForm";
+import Link from "next/link";
 
 function RecFormContent(props: { setOpen: (open: boolean) => void }) {
   const { setOpen } = props;
@@ -119,6 +121,38 @@ function RecFormContent(props: { setOpen: (open: boolean) => void }) {
   );
 }
 
+function AdminDropdown(props: { children: React.ReactNode }) {
+  const { children } = props;
+  const dropdownSectionStyle = "p-2 text-[14px] text-gray-12 font-medium";
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <div>{children}</div>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="center" className="mt-1 sm:w-[120px]">
+        <div className={cn(dropdownSectionStyle)}>Stats</div>
+        <DropdownMenu.Item>
+          <Link href={`/admin/stats/user-rec`}>User & Rec</Link>
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <div className={cn(dropdownSectionStyle)}>Email</div>
+        <DropdownMenu.Item>
+          <Link href={`/admin`}>🚧 Announcement</Link>
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <div className={cn(dropdownSectionStyle)}>Invite Codes</div>
+        <DropdownMenu.Item>
+          <Link href={`/admin/invite-code/monitor`}>Monitor</Link>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <Link href={`/admin/invite-code/provision`}>Provision</Link>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
 function MobileNavigator() {
   const { user } = useAuth();
   const router = useRouter();
@@ -189,6 +223,12 @@ function MobileNavigator() {
         </Dialog.Content>
       </Dialog.Root>
 
+      {user && user?.role === "admin" && pathname.startsWith("/admin") ? (
+        <AdminDropdown>
+          <MagicWandIcon width="24" height="24" />
+        </AdminDropdown>
+      ) : null}
+
       {user ? (
         <UserDropdown user={user} />
       ) : (

apps/recnet/src/app/admin/AdminPanelNav.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+import { Text, Tooltip } from "@radix-ui/themes";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { createContext, useContext } from "react";
+
+const AdminPanelNavContext = createContext({});
+
+function useAdminPanelNavContext() {
+  const context = useContext(AdminPanelNavContext);
+
+  if (!context) {
+    throw new Error(
+      "Child components of AdminPanelNav cannot be rendered outside the AdminPanelNav component."
+    );
+  }
+
+  return context;
+}
+
+function AdminPanelNav({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className={cn(
+        "w-[17%]",
+        "min-w-[250px]",
+        `min-h-[90svh]`,
+        "border-r-[1px]",
+        "border-gray-6",
+        "hidden",
+        "md:flex",
+        "flex-col"
+      )}
+    >
+      <AdminPanelNavContext.Provider value={{}}>
+        <div
+          className={cn(
+            "p-4",
+            "gap-y-4",
+            "sticky",
+            "flex",
+            "flex-col",
+            "top-[80px]"
+          )}
+        >
+          {children}
+        </div>
+      </AdminPanelNavContext.Provider>
+    </div>
+  );
+}
+
+function NavItem(props: { route: string; label: string; wip?: boolean }) {
+  useAdminPanelNavContext();
+  const { route, label, wip = false } = props;
+  const pathname = usePathname();
+  const isActive = pathname === `/admin/${route}`;
+
+  const ItemWrapper = ({ children }: { children: React.ReactNode }) => {
+    if (wip) {
+      return (
+        <Tooltip content="Work in progress" side="right" arrowPadding={0}>
+          {children}
+        </Tooltip>
+      );
+    }
+    return <Link href={`/admin/${route}`}>{children}</Link>;
+  };
+
+  return (
+    <ItemWrapper>
+      <div
+        className={cn(
+          "px-3 py-2 rounded-[999px] hover:bg-accentA-3 cursor-pointer transition-all ease-in-out duration-200",
+          "text-gray-11",
+          {
+            "bg-accentA-4": isActive,
+            "cursor-not-allowed": wip,
+          }
+        )}
+      >
+        {`${wip ? "🚧 " : ""}${label}`}
+      </div>
+    </ItemWrapper>
+  );
+}
+AdminPanelNav.Item = NavItem;
+
+function NavSection({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  useAdminPanelNavContext();
+
+  return (
+    <div className="flex-col flex gap-y-2 w-full">
+      <Text size="3" weight={"medium"} className="text-gray-12">
+        {label}
+      </Text>
+      <div className="flex flex-col gap-y-1">{children}</div>
+    </div>
+  );
+}
+AdminPanelNav.Section = NavSection;
+
+export function AdminPanelNavbar() {
+  return (
+    <AdminPanelNav>
+      <AdminPanelNav.Section label="Stats">
+        <AdminPanelNav.Item route="stats/user-rec" label="User & Rec" />
+      </AdminPanelNav.Section>
+      <AdminPanelNav.Section label="Email">
+        <AdminPanelNav.Item
+          route="email/announcement"
+          label="Announcement"
+          wip
+        />
+      </AdminPanelNav.Section>
+      <AdminPanelNav.Section label="Invite Code">
+        <AdminPanelNav.Item route="invite-code/monitor" label="Monitor" />
+        <AdminPanelNav.Item
+          route="invite-code/provision"
+          label="Provision code"
+        />
+      </AdminPanelNav.Section>
+    </AdminPanelNav>
+  );
+}

apps/recnet/src/app/admin/AdminSections.tsx

@@ -0,0 +1,41 @@
+import { Text } from "@radix-ui/themes";
+import { cn } from "@/utils/cn";
+
+export function AdminSectionTitle(props: {
+  children: React.ReactNode;
+  description?: string;
+}) {
+  const { children, description } = props;
+  return (
+    <div className={cn("w-full py-2 flex flex-col gap-y-2")}>
+      <Text size="6" weight={"medium"} className="text-gray-12">
+        {children}
+      </Text>
+      {description ? (
+        <Text size="2" className="text-gray-10">
+          {description}
+        </Text>
+      ) : null}
+    </div>
+  );
+}
+
+export function AdminSectionBox(props: { children: React.ReactNode }) {
+  const { children } = props;
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        "w-full",
+        "p-4",
+        "border-[1px]",
+        "rounded-4",
+        "border-gray-6",
+        "mb-4"
+      )}
+    >
+      {children}
+    </div>
+  );
+}