fix: update layout and wording

apps/web/src/app/(dashboard)/admin/layout.tsx

@@ -1,23 +1,19 @@
-import { redirect } from 'next/navigation';
+import React from 'react';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import { AdminNav } from './nav';
 
-export type AdminLayoutProps = {
+export type AdminSectionLayoutProps = {
   children: React.ReactNode;
 };
 
-export default async function AdminLayout({ children }: AdminLayoutProps) {
-  const user = await getRequiredServerComponentSession();
-  const isUserAdmin = isAdmin(user);
+export default function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
+  return (
+    <div className="mx-auto mt-16 w-full max-w-screen-xl px-4 md:px-8">
+      <div className="grid grid-cols-12 gap-x-8 md:mt-8">
+        <AdminNav className="col-span-12 md:col-span-3 md:flex" />
 
-  if (!user) {
-    redirect('/signin');
-  }
-
-  if (!isUserAdmin) {
-    redirect('/dashboard');
-  }
-
-  return <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>;
+        <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">{children}</div>
+      </div>
+    </div>
+  );
 }

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { BarChart3, User2 } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type AdminNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const AdminNav = ({ className, ...props }: AdminNavProps) => {
+  const pathname = usePathname();
+
+  return (
+    <div className={cn('flex gap-x-2.5 gap-y-2 md:flex-col', className)} {...props}>
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/stats') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/stats">
+          <BarChart3 className="mr-2 h-5 w-5" />
+          Stats
+        </Link>
+      </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/users') && 'bg-secondary',
+        )}
+        disabled
+      >
+        <User2 className="mr-2 h-5 w-5" />
+        Users (Coming Soon)
+      </Button>
+    </div>
+  );
+};

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

@@ -1,114 +1,5 @@
-import {
-  Archive,
-  File,
-  FileX2,
-  LucideIcon,
-  Mail,
-  MailOpen,
-  PenTool,
-  Send,
-  User as UserIcon,
-  UserPlus2,
-  UserSquare2,
-} from 'lucide-react';
+import { redirect } from 'next/navigation';
 
-import { getDocsCount } from '@documenso/lib/server-only/admin/get-documents-stats';
-import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
-import {
-  getUsersCount,
-  getUsersWithSubscriptionsCount,
-} from '@documenso/lib/server-only/admin/get-users-stats';
-import {
-  ReadStatus as InternalReadStatus,
-  SendStatus as InternalSendStatus,
-  SigningStatus as InternalSigningStatus,
-} from '@documenso/prisma/client';
-
-import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
-
-type CardData = {
-  icon: LucideIcon;
-  title: string;
-  status:
-    | 'TOTAL_RECIPIENTS'
-    | 'OPENED'
-    | 'NOT_OPENED'
-    | 'SIGNED'
-    | 'NOT_SIGNED'
-    | 'SENT'
-    | 'NOT_SENT';
-};
-
-const CARD_DATA: CardData[] = [
-  {
-    icon: UserSquare2,
-    title: 'Recipients in the database',
-    status: 'TOTAL_RECIPIENTS',
-  },
-  {
-    icon: MailOpen,
-    title: 'Opened documents',
-    status: InternalReadStatus.OPENED,
-  },
-  {
-    icon: Mail,
-    title: 'Unopened documents',
-    status: InternalReadStatus.NOT_OPENED,
-  },
-  {
-    icon: Send,
-    title: 'Sent documents',
-    status: InternalSendStatus.SENT,
-  },
-  {
-    icon: Archive,
-    title: 'Unsent documents',
-    status: InternalSendStatus.NOT_SENT,
-  },
-  {
-    icon: PenTool,
-    title: 'Signed documents',
-    status: InternalSigningStatus.SIGNED,
-  },
-  {
-    icon: FileX2,
-    title: 'Unsigned documents',
-    status: InternalSigningStatus.NOT_SIGNED,
-  },
-];
-
-export default async function Admin() {
-  const [usersCount, usersWithSubscriptionsCount, docsCount, recipientsStats] = await Promise.all([
-    getUsersCount(),
-    getUsersWithSubscriptionsCount(),
-    getDocsCount(),
-    getRecipientsStats(),
-  ]);
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h2 className="text-4xl font-semibold">Instance version: {process.env.APP_VERSION}</h2>
-      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
-        <CardMetric icon={UserIcon} title={'Total users in the database'} value={usersCount} />
-        <CardMetric
-          icon={UserPlus2}
-          title={'Users with an active subscription'}
-          value={usersWithSubscriptionsCount}
-        />
-      </div>
-      <h2 className="my-8 text-4xl font-semibold">Document metrics</h2>
-      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
-        <CardMetric icon={File} title={'Total documents in the database'} value={docsCount} />
-      </div>
-
-      <h2 className="my-8 text-4xl font-semibold">Recipients metrics</h2>
-      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-3">
-        {CARD_DATA.map((card) => (
-          <div key={card.status}>
-            <CardMetric icon={card.icon} title={card.title} value={recipientsStats[card.status]} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+export default function Admin() {
+  redirect('/admin/stats');
 }

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

@@ -0,0 +1,75 @@
+import {
+  File,
+  FileCheck,
+  FileClock,
+  FileEdit,
+  Mail,
+  MailOpen,
+  PenTool,
+  User as UserIcon,
+  UserPlus2,
+  UserSquare2,
+} from 'lucide-react';
+
+import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
+import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
+import {
+  getUsersCount,
+  getUsersWithSubscriptionsCount,
+} from '@documenso/lib/server-only/admin/get-users-stats';
+
+import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
+
+export default async function AdminStatsPage() {
+  const [usersCount, usersWithSubscriptionsCount, docStats, recipientStats] = await Promise.all([
+    getUsersCount(),
+    getUsersWithSubscriptionsCount(),
+    getDocumentStats(),
+    getRecipientsStats(),
+  ]);
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">Instance Stats</h2>
+
+      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-4">
+        <CardMetric icon={UserIcon} title="Total Users" value={usersCount} />
+        <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
+        <CardMetric
+          icon={UserPlus2}
+          title="Active Subscriptions"
+          value={usersWithSubscriptionsCount}
+        />
+        <CardMetric icon={UserPlus2} title="App Version" value={`v${process.env.APP_VERSION}`} />
+      </div>
+
+      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
+        <div>
+          <h3 className="text-3xl font-semibold">Document metrics</h3>
+
+          <div className="mt-8 grid flex-1 grid-cols-2 gap-4">
+            <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
+            <CardMetric icon={FileEdit} title="Drafted Documents" value={docStats.DRAFT} />
+            <CardMetric icon={FileClock} title="Pending Documents" value={docStats.PENDING} />
+            <CardMetric icon={FileCheck} title="Completed Documents" value={docStats.COMPLETED} />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-3xl font-semibold">Recipients metrics</h3>
+
+          <div className="mt-8 grid flex-1 grid-cols-2 gap-4">
+            <CardMetric
+              icon={UserSquare2}
+              title="Total Recipients"
+              value={recipientStats.TOTAL_RECIPIENTS}
+            />
+            <CardMetric icon={Mail} title="Documents Received" value={recipientStats.SENT} />
+            <CardMetric icon={MailOpen} title="Documents Viewed" value={recipientStats.OPENED} />
+            <CardMetric icon={PenTool} title="Signatures Collected" value={recipientStats.SIGNED} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -62,6 +62,19 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuLabel>Account</DropdownMenuLabel>
 
+        {isUserAdmin && (
+          <>
+            <DropdownMenuItem asChild>
+              <Link href="/admin" className="cursor-pointer">
+                <UserCog className="mr-2 h-4 w-4" />
+                Admin
+              </Link>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+          </>
+        )}
+
         <DropdownMenuItem asChild>
           <Link href="/settings/profile" className="cursor-pointer">
             <LucideUser className="mr-2 h-4 w-4" />
@@ -69,15 +82,6 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
           </Link>
         </DropdownMenuItem>
 
-        {isUserAdmin && (
-          <DropdownMenuItem asChild>
-            <Link href="/admin" className="cursor-pointer">
-              <UserCog className="mr-2 h-4 w-4" />
-              Admin
-            </Link>
-          </DropdownMenuItem>
-        )}
-
         <DropdownMenuItem asChild>
           <Link href="/settings/password" className="cursor-pointer">
             <Key className="mr-2 h-4 w-4" />

apps/web/src/components/(dashboard)/metric-card/metric-card.tsx

@@ -18,10 +18,10 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
       )}
     >
       <div className="px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
-        <div className="flex items-start">
-          {Icon && <Icon className="mr-2 h-4 w-4 text-slate-500" />}
+        <div className="flex items-center">
+          {Icon && <Icon className="text-muted-foreground mr-2 h-4 w-4" />}
 
-          <h3 className="flex items-end text-sm font-medium text-slate-500">{title}</h3>
+          <h3 className="text-primary-forground flex items-end text-sm font-medium">{title}</h3>
         </div>
 
         <p className="text-foreground mt-6 text-4xl font-semibold leading-8 md:mt-8">

packages/lib/server-only/admin/get-documents-stats.ts

@@ -1,5 +1,26 @@
 import { prisma } from '@documenso/prisma';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
-export const getDocsCount = async () => {
-  return await prisma.document.count();
+export const getDocumentStats = async () => {
+  const counts = await prisma.document.groupBy({
+    by: ['status'],
+    _count: {
+      _all: true,
+    },
+  });
+
+  const stats: Record<Exclude<ExtendedDocumentStatus, 'INBOX'>, number> = {
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  };
+
+  counts.forEach((stat) => {
+    stats[stat.status] = stat._count._all;
+
+    stats.ALL += stat._count._all;
+  });
+
+  return stats;
 };