Feat/admin view

package.json

@@ -26,7 +26,7 @@
     "@markdoc/markdoc": "^0.2.2",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@next/bundle-analyzer": "^12.3.4",
-    "@prisma/client": "^4.12.0",
+    "@prisma/client": "^4.13.0",
     "@resvg/resvg-js": "^2.4.1",
     "@tailwindcss/forms": "^0.5.2",
     "@tanem/react-nprogress": "^5.0.33",
@@ -77,7 +77,7 @@
     "eslint-config-next": "^13.0.0",
     "gray-matter": "^4.0.3",
     "postcss": "^8.4.13",
-    "prisma": "^4.12.0",
+    "prisma": "^4.13.0",
     "tailwindcss": "^3.0.24",
     "typescript": "4.6.4"
   },

pages/metrics/index.tsx

@@ -0,0 +1,145 @@
+import Layout from "../../components/Layout/Layout";
+import PageHeading from "../../components/PageHeading/PageHeading";
+import { authOptions } from "../api/auth/[...nextauth]";
+import { unstable_getServerSession } from "next-auth";
+import type {
+  GetServerSideProps,
+  InferGetServerSidePropsType,
+  NextPage,
+} from "next/types";
+import prisma from "../../server/db/client";
+
+const Metrics: NextPage = ({
+  postsPublishedStats,
+  postsNotPublishedStats,
+  tags,
+  userCount,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  return (
+    <>
+      <Layout>
+        <div className="relative sm:mx-auto max-w-2xl mx-4">
+          <div className="relative">
+            <PageHeading>Metrics</PageHeading>
+            <div className="sm:grid grid-cols-2 gap-8 mt-4">
+              <div className="bg-neutral-800 p-8 border-l-4 border-l-orange-400 mb-4 sm:mb-0">
+                <h2 className="font-bold text-2xl">User Count</h2>
+                <p className="font-semibold text-8xl">{userCount}</p>
+              </div>
+
+              <div className="bg-neutral-800 p-8 border-l-4 border-l-pink-600 mb-4 sm:mb-0">
+                <h2 className="font-bold text-2xl">Published Posts</h2>
+                <p className="font-semibold text-8xl">{postsPublishedStats}</p>
+              </div>
+
+              <div className="bg-neutral-800 p-8 border-l-4 border-l-pink-600 mb-4 sm:mb-0">
+                <h2 className="font-bold text-2xl">Unpublished Posts</h2>
+                <p className="font-semibold text-8xl">
+                  {postsNotPublishedStats}
+                </p>
+              </div>
+            </div>
+            <div className="bg-neutral-800 p-8 border-l-4 border-l-orange-400 sm:mt-8">
+              <h2 className="font-bold text-2xl mb-6">Tags</h2>
+              {tags.map(({ tag, count }: { tag: string; count: string }) => (
+                <p key={tag} className="font-semibold text-xl mb-1">
+                  {`Count: ${count} - ${tag}`}
+                </p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await unstable_getServerSession(
+    context.req,
+    context.res,
+    authOptions
+  );
+
+  if (!session || !session?.user?.id) {
+    return {
+      redirect: {
+        destination: "/404",
+        permanent: false,
+      },
+    };
+  }
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: session.user.id,
+    },
+  });
+
+  if (user && user.role !== "ADMIN") {
+    return {
+      redirect: {
+        destination: "/404",
+        permanent: false,
+      },
+    };
+  }
+
+  const postsPublishedStats = await prisma.post.count({
+    where: {
+      published: { not: null },
+    },
+  });
+
+  const postsNotPublishedStats = await prisma.post.count({
+    where: {
+      published: null,
+    },
+  });
+
+  const userCount = await prisma.user.count();
+
+  const tags = await prisma.postTag.findMany({
+    include: {
+      tag: true,
+    },
+  });
+
+  const grouped = tags.reduce(
+    (
+      result: {
+        [x: string]: {
+          count: number;
+          tag: string;
+        };
+      },
+      item
+    ) => {
+      const groupValue = item["tagId"];
+      if (!result[groupValue]) {
+        result[groupValue] = {
+          count: 0,
+          tag: item.tag.title,
+        };
+      }
+      result[groupValue].count++;
+      return result;
+    },
+    {}
+  );
+
+  const tagsWithCount = Object.keys(grouped)
+    .map((key) => grouped[key])
+    .sort((a, b) => (b?.count || 0) - (a?.count || 0));
+
+  return {
+    props: {
+      postsPublishedStats,
+      postsNotPublishedStats,
+      tags: tagsWithCount,
+      userCount,
+    },
+  };
+};
+
+export default Metrics;