add admin mail analytics (#240)

apps/web/src/app/(dashboard)/admin/email-analytics/constants.ts

@@ -0,0 +1,4 @@
+export const timeframeOptions = [
+  { label: "Today", value: "today" },
+  { label: "This month", value: "thisMonth" },
+] as const;

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

@@ -0,0 +1,182 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@usesend/ui/src/card";
+import { Label } from "@usesend/ui/src/label";
+import { Switch } from "@usesend/ui/src/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@usesend/ui/src/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@usesend/ui/src/table";
+import Spinner from "@usesend/ui/src/spinner";
+import { api } from "~/trpc/react";
+import { isCloud } from "~/utils/common";
+import { timeframeOptions } from "./constants";
+
+export default function AdminEmailAnalyticsPage() {
+  const isCloudEnv = isCloud();
+  const [timeframe, setTimeframe] = useState<
+    (typeof timeframeOptions)[number]["value"]
+  >("today");
+  const [paidOnly, setPaidOnly] = useState(false);
+
+  const analyticsQuery = api.admin.getEmailAnalytics.useQuery(
+    {
+      timeframe,
+      paidOnly,
+    },
+    { keepPreviousData: true, enabled: isCloudEnv }
+  );
+
+  const data = analyticsQuery.data;
+
+  const totals = data?.totals ?? {
+    sent: 0,
+    delivered: 0,
+    opened: 0,
+    clicked: 0,
+    bounced: 0,
+    complained: 0,
+    hardBounced: 0,
+  };
+
+  const rows = useMemo(() => data?.rows ?? [], [data]);
+
+  if (!isCloudEnv) {
+    return (
+      <div className="rounded-lg border bg-muted/30 p-6 text-sm text-muted-foreground">
+        Email analytics are available only in the cloud deployment.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold">Email analytics</h2>
+      <div className="flex flex-wrap gap-4">
+        <div className="w-48">
+          <Label htmlFor="timeframe">Timeframe</Label>
+          <Select
+            value={timeframe}
+            onValueChange={(value) =>
+              setTimeframe(value as (typeof timeframeOptions)[number]["value"])
+            }
+          >
+            <SelectTrigger id="timeframe">
+              <SelectValue placeholder="Select timeframe" />
+            </SelectTrigger>
+            <SelectContent>
+              {timeframeOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center space-x-3">
+          <Switch checked={paidOnly} onCheckedChange={setPaidOnly} id="paid" />
+          <Label htmlFor="paid">Paid users only</Label>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <SummaryCard label="Sent" value={totals.sent} />
+        <SummaryCard label="Delivered" value={totals.delivered} />
+        <SummaryCard label="Opened" value={totals.opened} />
+        <SummaryCard label="Clicked" value={totals.clicked} />
+        <SummaryCard label="Bounced" value={totals.bounced} />
+        <SummaryCard label="Complained" value={totals.complained} />
+        <SummaryCard label="Hard bounced" value={totals.hardBounced} />
+      </div>
+
+      <Card className="overflow-hidden">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle>Usage by team</CardTitle>
+            {data ? (
+              <p className="text-sm text-muted-foreground">
+                Since {data.timeframe === "today" ? "today" : data.periodStart}
+              </p>
+            ) : null}
+          </div>
+          {analyticsQuery.isLoading ? (
+            <Spinner className="h-4 w-4" />
+          ) : null}
+        </CardHeader>
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Team</TableHead>
+                <TableHead>Plan</TableHead>
+                <TableHead className="text-right">Sent</TableHead>
+                <TableHead className="text-right">Delivered</TableHead>
+                <TableHead className="text-right">Opened</TableHead>
+                <TableHead className="text-right">Clicked</TableHead>
+                <TableHead className="text-right">Bounced</TableHead>
+                <TableHead className="text-right">Complained</TableHead>
+                <TableHead className="text-right">Hard bounced</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {analyticsQuery.isLoading ? (
+                <TableRow>
+                  <TableCell colSpan={9} className="py-12 text-center">
+                    <Spinner className="h-6 w-6" />
+                  </TableCell>
+                </TableRow>
+              ) : rows.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={9} className="py-12 text-center">
+                    No email activity found for this period.
+                  </TableCell>
+                </TableRow>
+              ) : (
+                rows.map((row) => (
+                  <TableRow key={row.teamId}>
+                    <TableCell>{row.name}</TableCell>
+                    <TableCell>{row.plan}</TableCell>
+                    <TableCell className="text-right">{row.sent}</TableCell>
+                    <TableCell className="text-right">{row.delivered}</TableCell>
+                    <TableCell className="text-right">{row.opened}</TableCell>
+                    <TableCell className="text-right">{row.clicked}</TableCell>
+                    <TableCell className="text-right">{row.bounced}</TableCell>
+                    <TableCell className="text-right">{row.complained}</TableCell>
+                    <TableCell className="text-right">{row.hardBounced}</TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function SummaryCard({ label, value }: { label: string; value: number }) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {label}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-2xl font-semibold">{value.toLocaleString()}</p>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -20,6 +20,11 @@ export default function AdminLayout({
             Teams
           </SettingsNavButton>
         ) : null}
+        {isCloud() ? (
+          <SettingsNavButton href="/admin/email-analytics">
+            Email analytics
+          </SettingsNavButton>
+        ) : null}
         {isCloud() ? (
           <SettingsNavButton href="/admin/waitlist">
             Waitlist

apps/web/src/server/api/routers/admin.ts

@@ -1,3 +1,4 @@
+import { Prisma, type Plan } from "@prisma/client";
 import { z } from "zod";
 import { env } from "~/env";
 
@@ -289,4 +290,91 @@ export const adminRouter = createTRPCRouter({
 
       return updatedTeam;
     }),
+
+  getEmailAnalytics: adminProcedure
+    .input(
+      z.object({
+        timeframe: z.enum(["today", "thisMonth"]),
+        paidOnly: z.boolean().optional(),
+      })
+    )
+    .query(async ({ input }) => {
+      const timeframe = input.timeframe;
+      const paidOnly = input.paidOnly ?? false;
+
+      const now = new Date();
+      const today = now.toISOString().slice(0, 10);
+      const monthStartDate = new Date(
+        Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1)
+      );
+      const monthStart = monthStartDate.toISOString().slice(0, 10);
+
+      type EmailAnalyticsRow = {
+        teamId: number;
+        name: string;
+        plan: Plan;
+        sent: number;
+        delivered: number;
+        opened: number;
+        clicked: number;
+        bounced: number;
+        complained: number;
+        hardBounced: number;
+      };
+
+      const rows = await db.$queryRaw<Array<EmailAnalyticsRow>>`
+        SELECT
+          d."teamId" AS "teamId",
+          t."name" AS name,
+          t."plan" AS plan,
+          SUM(d.sent)::integer AS sent,
+          SUM(d.delivered)::integer AS delivered,
+          SUM(d.opened)::integer AS opened,
+          SUM(d.clicked)::integer AS clicked,
+          SUM(d.bounced)::integer AS bounced,
+          SUM(d.complained)::integer AS complained,
+          SUM(d."hardBounced")::integer AS "hardBounced"
+        FROM "DailyEmailUsage" d
+        INNER JOIN "Team" t ON t.id = d."teamId"
+        WHERE 1 = 1
+        ${
+          timeframe === "today"
+            ? Prisma.sql`AND d."date" = ${today}`
+            : Prisma.sql`AND d."date" >= ${monthStart}`
+        }
+        ${paidOnly ? Prisma.sql`AND t."plan" = 'BASIC'` : Prisma.sql``}
+        GROUP BY d."teamId", t."name", t."plan"
+        ORDER BY sent DESC
+      `;
+
+      const totals = rows.reduce(
+        (acc, row) => {
+          acc.sent += row.sent;
+          acc.delivered += row.delivered;
+          acc.opened += row.opened;
+          acc.clicked += row.clicked;
+          acc.bounced += row.bounced;
+          acc.complained += row.complained;
+          acc.hardBounced += row.hardBounced;
+          return acc;
+        },
+        {
+          sent: 0,
+          delivered: 0,
+          opened: 0,
+          clicked: 0,
+          bounced: 0,
+          complained: 0,
+          hardBounced: 0,
+        }
+      );
+
+      return {
+        rows,
+        totals,
+        timeframe,
+        paidOnly,
+        periodStart: timeframe === "today" ? today : monthStart,
+      };
+    }),
 });