Add org analytics view

apps/web/app/(app)/organization/[organizationId]/OrganizationTabs.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { TabSelect } from "@/components/TabSelect";
+import { PageHeading } from "@/components/Typography";
+import { LoadingContent } from "@/components/LoadingContent";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useOrganization } from "@/hooks/useOrganization";
+
+interface OrganizationTabsProps {
+  organizationId: string;
+}
+
+export function OrganizationTabs({ organizationId }: OrganizationTabsProps) {
+  const pathname = usePathname();
+  const {
+    data: organization,
+    isLoading,
+    error,
+  } = useOrganization(organizationId);
+
+  const tabs = [
+    {
+      id: "members",
+      label: "Members",
+      href: `/organization/${organizationId}`,
+    },
+    {
+      id: "stats",
+      label: "Analytics",
+      href: `/organization/${organizationId}/stats`,
+    },
+  ];
+
+  // Determine selected tab based on pathname
+  const selected = pathname.includes("/stats") ? "stats" : "members";
+
+  return (
+    <div>
+      <LoadingContent
+        loading={isLoading}
+        error={error}
+        loadingComponent={<Skeleton className="mb-2 h-8 w-48" />}
+      >
+        {organization?.name && (
+          <PageHeading className="mb-2">{organization.name}</PageHeading>
+        )}
+      </LoadingContent>
+      <div className="border-b border-neutral-200">
+        <TabSelect options={tabs} selected={selected} />
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/organization/[organizationId]/page.tsx

@@ -1,5 +1,5 @@
 import { Members } from "@/app/(app)/organization/[organizationId]/Members";
-import { PageHeader } from "@/components/PageHeader";
+import { OrganizationTabs } from "@/app/(app)/organization/[organizationId]/OrganizationTabs";
 import { PageWrapper } from "@/components/PageWrapper";
 
 export default async function MembersPage({
@@ -11,9 +11,9 @@ export default async function MembersPage({
 
   return (
     <PageWrapper>
-      <PageHeader title="Organization Members" />
+      <OrganizationTabs organizationId={organizationId} />
 
-      <div className="mt-4">
+      <div className="mt-6">
         <Members organizationId={organizationId} />
       </div>
     </PageWrapper>

apps/web/app/(app)/organization/[organizationId]/stats/OrgStats.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useState, useMemo, useCallback } from "react";
+import type { DateRange } from "react-day-picker";
+import { subDays } from "date-fns/subDays";
+import { Mail, Sparkles, Users } from "lucide-react";
+import { LoadingContent } from "@/components/LoadingContent";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DatePickerWithRange } from "@/components/DatePickerWithRange";
+import { useOrgStatsTotals } from "@/hooks/useOrgStatsTotals";
+import { useOrgStatsEmailBuckets } from "@/hooks/useOrgStatsEmailBuckets";
+import { useOrgStatsRulesBuckets } from "@/hooks/useOrgStatsRulesBuckets";
+
+const selectOptions = [
+  { label: "Last week", value: "7" },
+  { label: "Last month", value: "30" },
+  { label: "Last 3 months", value: "90" },
+  { label: "All time", value: "0" },
+];
+const defaultSelected = selectOptions[1];
+
+export function OrgStats({ organizationId }: { organizationId: string }) {
+  const [dateDropdown, setDateDropdown] = useState<string>(
+    defaultSelected.label,
+  );
+
+  const now = useMemo(() => new Date(), []);
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: subDays(now, Number.parseInt(defaultSelected.value)),
+    to: now,
+  });
+
+  const onSetDateDropdown = useCallback(
+    (option: { label: string; value: string }) => {
+      setDateDropdown(option.label);
+    },
+    [],
+  );
+
+  const options = useMemo(
+    () => ({
+      fromDate: dateRange?.from?.getTime(),
+      toDate: dateRange?.to?.getTime(),
+    }),
+    [dateRange],
+  );
+
+  const {
+    data: totalsData,
+    isLoading: totalsLoading,
+    error: totalsError,
+  } = useOrgStatsTotals(organizationId, options);
+
+  const {
+    data: emailBucketsData,
+    isLoading: emailBucketsLoading,
+    error: emailBucketsError,
+  } = useOrgStatsEmailBuckets(organizationId, options);
+
+  const {
+    data: rulesBucketsData,
+    isLoading: rulesBucketsLoading,
+    error: rulesBucketsError,
+  } = useOrgStatsRulesBuckets(organizationId, options);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <DatePickerWithRange
+          dateRange={dateRange}
+          onSetDateRange={setDateRange}
+          selectOptions={selectOptions}
+          dateDropdown={dateDropdown}
+          onSetDateDropdown={onSetDateDropdown}
+        />
+      </div>
+
+      <div className="space-y-6">
+        <LoadingContent
+          loading={totalsLoading}
+          error={totalsError}
+          loadingComponent={
+            <div className="grid gap-4 md:grid-cols-3">
+              <Skeleton className="h-24" />
+              <Skeleton className="h-24" />
+              <Skeleton className="h-24" />
+            </div>
+          }
+        >
+          {totalsData && (
+            <div className="grid gap-4 md:grid-cols-3">
+              <StatCard
+                title="Emails Received"
+                value={totalsData.totalEmails.toLocaleString()}
+                icon={<Mail className="h-4 w-4 text-muted-foreground" />}
+              />
+              <StatCard
+                title="Rules Executed"
+                value={totalsData.totalRules.toLocaleString()}
+                icon={<Sparkles className="h-4 w-4 text-muted-foreground" />}
+              />
+              <StatCard
+                title="Active Members"
+                value={totalsData.activeMembers.toLocaleString()}
+                icon={<Users className="h-4 w-4 text-muted-foreground" />}
+              />
+            </div>
+          )}
+        </LoadingContent>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <LoadingContent
+            loading={emailBucketsLoading}
+            error={emailBucketsError}
+            loadingComponent={<Skeleton className="h-64" />}
+          >
+            {emailBucketsData && (
+              <BucketChart
+                title="Email Volume Distribution"
+                description="Number of users by emails received in selected period"
+                data={emailBucketsData}
+                emptyMessage="No email data available. Users need to load their stats first."
+                unit="emails"
+              />
+            )}
+          </LoadingContent>
+
+          <LoadingContent
+            loading={rulesBucketsLoading}
+            error={rulesBucketsError}
+            loadingComponent={<Skeleton className="h-64" />}
+          >
+            {rulesBucketsData && (
+              <BucketChart
+                title="Automation Usage Distribution"
+                description="Number of users by rules executed in selected period"
+                data={rulesBucketsData}
+                emptyMessage="No automation data yet."
+                unit="rules"
+              />
+            )}
+          </LoadingContent>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({
+  title,
+  value,
+  icon,
+}: {
+  title: string;
+  value: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        {icon}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function BucketChart({
+  title,
+  description,
+  data,
+  emptyMessage,
+  unit = "emails",
+}: {
+  title: string;
+  description: string;
+  data: { label: string; userCount: number }[];
+  emptyMessage: string;
+  unit?: string;
+}) {
+  const hasData = data.some((bucket) => bucket.userCount > 0);
+  const maxValue = Math.max(...data.map((d) => d.userCount), 1);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">{title}</CardTitle>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </CardHeader>
+      <CardContent>
+        {!hasData ? (
+          <div className="flex h-40 items-center justify-center">
+            <p className="text-sm text-muted-foreground text-center">
+              {emptyMessage}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {data.map((bucket) => (
+              <div key={bucket.label} className="space-y-1">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">
+                    {bucket.label} {unit}
+                  </span>
+                  <span className="font-medium">
+                    {bucket.userCount}{" "}
+                    {bucket.userCount === 1 ? "user" : "users"}
+                  </span>
+                </div>
+                <div className="h-2 w-full rounded-full bg-secondary">
+                  <div
+                    className="h-2 rounded-full bg-primary transition-all"
+                    style={{
+                      width: `${(bucket.userCount / maxValue) * 100}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/app/(app)/organization/[organizationId]/stats/page.tsx

@@ -0,0 +1,21 @@
+import { PageWrapper } from "@/components/PageWrapper";
+import { OrgStats } from "@/app/(app)/organization/[organizationId]/stats/OrgStats";
+import { OrganizationTabs } from "@/app/(app)/organization/[organizationId]/OrganizationTabs";
+
+export default async function OrgStatsPage({
+  params,
+}: {
+  params: Promise<{ organizationId: string }>;
+}) {
+  const { organizationId } = await params;
+
+  return (
+    <PageWrapper>
+      <OrganizationTabs organizationId={organizationId} />
+
+      <div className="mt-6">
+        <OrgStats organizationId={organizationId} />
+      </div>
+    </PageWrapper>
+  );
+}

apps/web/app/api/organizations/[organizationId]/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import prisma from "@/utils/prisma";
+import { withAuth } from "@/utils/middleware";
+import { fetchAndCheckIsAdmin } from "@/utils/organizations/access";
+
+export type OrganizationResponse = Awaited<ReturnType<typeof getOrganization>>;
+
+export const GET = withAuth(
+  "organizations/get",
+  async (request, { params }) => {
+    const { userId } = request.auth;
+    const { organizationId } = await params;
+
+    await fetchAndCheckIsAdmin({ organizationId, userId });
+
+    const result = await getOrganization({ organizationId });
+
+    return NextResponse.json(result);
+  },
+);
+
+async function getOrganization({ organizationId }: { organizationId: string }) {
+  const organization = await prisma.organization.findUnique({
+    where: { id: organizationId },
+    select: { id: true, name: true },
+  });
+
+  return organization;
+}