feat(web): admin homepage

mrevanzak · May 22, 2024 · 5d849fc · 5d849fc
1 parent 678c5ac
commit 5d849fc
Show file tree

Hide file tree

Showing 8 changed files with 1,133 additions and 24 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -38,6 +38,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-icons": "^5.2.0",
+    "recharts": "^2.12.7",
     "superjson": "2.2.1",
     "zod": "^3.23.0"
   },
@@ -60,4 +61,4 @@
     "typescript": "^5.4.5"
   },
   "prettier": "@tanya.in/prettier-config"
-}
+}
diff --git a/apps/web/src/app/(app)/@admin/documents/page.tsx b/apps/web/src/app/(app)/@admin/documents/page.tsx
@@ -8,7 +8,7 @@ export default async function DocumentsPage() {
 
   return (
     <div className="flex flex-1 flex-col gap-4">
-      <h3 className="text-xl font-semibold">All Files</h3>
+      <h3 className="font-semibold">All Files</h3>
       <DropzoneContainer initialData={documents} />
     </div>
   );

diff --git a/apps/web/src/app/(app)/@admin/page.tsx b/apps/web/src/app/(app)/@admin/page.tsx
@@ -1,29 +1,96 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@tanya.in/ui/card";
-import { Chat } from "@tanya.in/ui/chat";
+import { AreaChart } from "@/components/area-chart";
+import { api } from "@/trpc/server";
+import { Chip, Divider, Tooltip } from "@nextui-org/react";
+import moment from "moment";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@tanya.in/ui/card";
+
+export default async function HomePage() {
+  const analytics = await api.analytics.get();
+  const data = analytics.map((item) => ({
+    date: item.key,
+    "Page Views": item.total,
+    Visitors: item.devices,
+  }));
+
+  const { visitors, pageViews } = analytics.reduce(
+    (acc, { devices, total }) => {
+      acc.visitors += devices;
+      acc.pageViews += total;
+      return acc;
+    },
+    {
+      visitors: 0,
+      pageViews: 0,
+    },
+  );
+  const { visitorsLastWeek, pageViewsLastWeek } = analytics.reduce(
+    (acc, { devices, total, key }) => {
+      if (moment(key).isSameOrBefore(moment().subtract(1, "week"))) {
+        acc.visitorsLastWeek += devices;
+        acc.pageViewsLastWeek += total;
+      }
+      return acc;
+    },
+    {
+      visitorsLastWeek: 0,
+      pageViewsLastWeek: 0,
+    },
+  );
 
-export default function HomePage() {
   return (
-    <div className="flex-1 self-center">
-      <Card className="m-2 mx-auto w-full duration-500 transition-size has-[[data-started=false]]:min-[450px]:w-96">
+    <div className="flex flex-1 flex-wrap gap-4">
+      <Card className="w-full">
         <CardHeader>
-          <CardTitle className="text-center">Admin</CardTitle>
+          <CardTitle>Statistics</CardTitle>
         </CardHeader>
-        <CardContent>
-          <Chat />
+        <AreaChart
+          data={data}
+          index="date"
+          categories={["Page Views", "Visitors"]}
+          colors={["blue", "yellow"]}
+          showLegend={false}
+          showYAxis={false}
+          startEndOnly={true}
+          className="h-[calc(100vh-28rem)]"
+        />
+        <CardContent className="space-y-4 p-6">
+          <div className="flex flex-row items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="h-0.5 w-8 bg-primary-its" />
+              <p>{pageViews}</p>
+              <Tooltip
+                content={`${Math.abs(pageViews - pageViewsLastWeek)} ${pageViews > pageViewsLastWeek ? "more" : "less"} page views than last week`}
+                color="foreground"
+              >
+                <Chip color="success" radius="sm" variant="flat">
+                  {pageViews > pageViewsLastWeek
+                    ? "↑" + pageViews
+                    : "↓" + pageViews}
+                </Chip>
+              </Tooltip>
+            </div>
+            <p>Page Views</p>
+          </div>
+          <Divider />
+          <div className="flex flex-row items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="h-0.5 w-8 bg-accent-its" />
+              <p>{visitors}</p>
+              <Tooltip
+                content={`${Math.abs(visitors - visitorsLastWeek)} ${visitors > visitorsLastWeek ? "more" : "less"} visitors than last week`}
+                color="foreground"
+              >
+                <Chip color="success" radius="sm" variant="flat">
+                  {visitors > visitorsLastWeek
+                    ? "↑" + visitors
+                    : "↓" + visitors}
+                </Chip>
+              </Tooltip>
+            </div>
+            <p>Visitors</p>
+          </div>
         </CardContent>
-        <CardFooter>
-          <Card className="m-auto shadow-none">
-            <CardContent className="py-4 text-center">
-              /: To choose the topic
-            </CardContent>
-          </Card>
-        </CardFooter>
       </Card>
     </div>
   );

diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
@@ -27,7 +27,7 @@ export default async function AuthLayout(props: {
         <Navbar />
         <main
           className={cn("container flex min-h-[calc(100vh-8rem)]", {
-            "!px-4 pt-4 2xl:pt-8": isAdmin,
+            "p-4 2xl:pt-8": isAdmin,
           })}
         >
           {isAdmin ? props.admin : props.user}