[Dashboard] Redefine the user page with tabs and updated UI (#1351)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Tabbed user profile with Activity (30-day analytics, KPIs, daily
chart, top lists, recent events), Payments (transactions, subscriptions,
product/item balances) and an activity heatmap sidebar.
* New internal user-activity API and admin-facing activity hook; admin
API client can fetch per-user activity.

* **UI/UX Improvements**
* Unified menus, cards and tables; inline editable user details with
accept/revert; metadata editor validates JSON; country-code input has
draft editing; tabs support optional icons.

* **API**
* Transactions endpoint and admin transaction queries now support
optional customer-scoped filtering.

* **Tests**
  * End-to-end coverage for the user-activity endpoint.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<img width="1326" height="752" alt="image"
src="https://github.com/user-attachments/assets/97c04dca-db59-4357-98b1-8eae5a7a3673"
/>

<img width="1142" height="251" alt="image"
src="https://github.com/user-attachments/assets/e1aa44fc-0d7e-436d-90a5-c7cb15155e24"
/>

<img width="1170" height="1125" alt="image"
src="https://github.com/user-attachments/assets/bf6659fd-a9b5-4ae6-a13d-dab9956ad650"
/>

Author: madster456

apps/backend/src/app/api/latest/internal/payments/transactions/route.tsx

@@ -594,6 +594,7 @@ async function getTransactions(options: {
   cursor: string | undefined,
   type: TransactionType | undefined,
   customerType: "user" | "team" | "custom" | undefined,
+  customerId: string | undefined,
 }): Promise<{ transactions: Transaction[], nextCursor: string | null }> {
   const ledgerTypes = getLedgerTypesForFilter(options.type);
   if (ledgerTypes.length === 0) {
@@ -616,6 +617,9 @@ async function getTransactions(options: {
   if (options.customerType) {
     whereClauses.push(`"__rows"."rowdata"->>'customerType' = ${quoteSqlStringLiteral(options.customerType).sql}`);
   }
+  if (options.customerId) {
+    whereClauses.push(`"__rows"."rowdata"->>'customerId' = ${quoteSqlStringLiteral(options.customerId).sql}`);
+  }
   if (decodedCursor) {
     whereClauses.push(`(
       (("__rows"."rowdata"->>'createdAtMillis')::bigint < ${decodedCursor.createdAtMillis})
@@ -673,6 +677,9 @@ async function getTransactions(options: {
     if (options.customerType) {
       refundWhereClauses.push(`"__rows"."rowdata"->>'customerType' = ${quoteSqlStringLiteral(options.customerType).sql}`);
     }
+    if (options.customerId) {
+      refundWhereClauses.push(`"__rows"."rowdata"->>'customerId' = ${quoteSqlStringLiteral(options.customerId).sql}`);
+    }
     const refundSql = `
       SELECT "__rows"."rowdata" AS "rowData"
       FROM (${baseSql}) AS "__rows"
@@ -729,6 +736,7 @@ export const GET = createSmartRouteHandler({
       limit: yupString().optional(),
       type: yupString().oneOf(TRANSACTION_TYPES).optional(),
       customer_type: yupString().oneOf(['user', 'team', 'custom']).optional(),
+      customer_id: yupString().optional(),
     }).optional(),
   }),
   response: yupObject({
@@ -751,6 +759,7 @@ export const GET = createSmartRouteHandler({
       cursor: query.cursor,
       type: query.type,
       customerType: query.customer_type,
+      customerId: query.customer_id,
     });
 
     return {

apps/backend/src/app/api/latest/internal/user-activity/route.tsx

@@ -0,0 +1,110 @@
+import { getClickhouseAdminClient } from "@/lib/clickhouse";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { ClickHouseError } from "@clickhouse/client";
+import { UserActivityResponseBodySchema } from "@stackframe/stack-shared/dist/interface/admin-metrics";
+import { adaptSchema, adminAuthTypeSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StackAssertionError, StatusError, captureError } from "@stackframe/stack-shared/dist/utils/errors";
+
+// Per-user activity heatmap window. Sized to match the 22×16 dashboard grid
+// so every cell maps to exactly one day and we never truncate or pad awkwardly
+// on the client. Bump both sides if you want a longer/shorter window.
+const USER_ACTIVITY_WINDOW_DAYS = 22 * 16;
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
+function formatClickhouseDateTimeParam(date: Date): string {
+  // ClickHouse DateTime params are passed as "YYYY-MM-DDTHH:MM:SS" (no timezone); treat them as UTC.
+  return date.toISOString().slice(0, 19);
+}
+
+export const GET = createSmartRouteHandler({
+  metadata: {
+    hidden: true,
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: adminAuthTypeSchema.defined(),
+      tenancy: adaptSchema.defined(),
+    }),
+    query: yupObject({
+      user_id: yupString().defined(),
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: UserActivityResponseBodySchema,
+  }),
+  handler: async (req) => {
+    const { tenancy } = req.auth;
+    const userId = req.query.user_id;
+
+    const now = new Date();
+    const todayUtc = new Date(now);
+    todayUtc.setUTCHours(0, 0, 0, 0);
+    const untilExclusive = new Date(todayUtc.getTime() + ONE_DAY_MS);
+    const since = new Date(todayUtc.getTime() - (USER_ACTIVITY_WINDOW_DAYS - 1) * ONE_DAY_MS);
+
+    let rows: { day: string, activity: string | number }[];
+    try {
+      const clickhouseClient = getClickhouseAdminClient();
+      const result = await clickhouseClient.query({
+        query: `
+          SELECT
+            toDate(event_at) AS day,
+            count() AS activity
+          FROM analytics_internal.events
+          WHERE project_id = {projectId:String}
+            AND branch_id = {branchId:String}
+            AND user_id = {userId:String}
+            AND event_at >= {since:DateTime}
+            AND event_at < {untilExclusive:DateTime}
+          GROUP BY day
+          ORDER BY day ASC
+        `,
+        query_params: {
+          projectId: tenancy.project.id,
+          branchId: tenancy.branchId,
+          userId,
+          since: formatClickhouseDateTimeParam(since),
+          untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+        },
+        format: "JSONEachRow",
+      });
+      rows = await result.json();
+    } catch (error) {
+      if (!(error instanceof ClickHouseError)) {
+        throw error;
+      }
+      captureError("internal-user-activity-clickhouse-fallback", new StackAssertionError(
+        "Failed to load user activity due to ClickHouse query failure.",
+        {
+          cause: error,
+          projectId: tenancy.project.id,
+          branchId: tenancy.branchId,
+          userId,
+        },
+      ));
+      throw new StatusError(StatusError.ServiceUnavailable, "Analytics activity is temporarily unavailable.");
+    }
+
+    const byDay = new Map<string, number>();
+    for (const row of rows) {
+      // ClickHouse returns dates/datetimes without timezone, treat as UTC.
+      const dayKey = row.day.split("T")[0];
+      byDay.set(dayKey, Number(row.activity));
+    }
+
+    const dataPoints: { date: string, activity: number }[] = [];
+    for (let i = 0; i < USER_ACTIVITY_WINDOW_DAYS; i += 1) {
+      const day = new Date(since.getTime() + i * ONE_DAY_MS);
+      const dayKey = day.toISOString().split("T")[0];
+      dataPoints.push({ date: dayKey, activity: byDay.get(dayKey) ?? 0 });
+    }
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: { data_points: dataPoints },
+    };
+  },
+});

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx

@@ -62,13 +62,15 @@ function ComponentDemo({
   title,
   description,
   children,
+  className,
 }: {
   title: string,
   description?: string,
   children: React.ReactNode,
+  className?: string,
 }) {
   return (
-    <div className="space-y-4">
+    <div className={cn("space-y-4", className)}>
       <div className="flex items-start justify-between gap-4">
         <div>
           <Typography type="h3" className="text-lg font-semibold">{title}</Typography>
@@ -1119,6 +1121,25 @@ export default function PageClient() {
             />
           </ComponentDemo>
 
+          <ComponentDemo
+            title="Category tabs with trailing slot"
+            description="Use `trailing` for actions that live in the tab bar but are not a tab (e.g. “Install apps”)."
+            className="pt-6"
+          >
+            <DesignCategoryTabs
+              categories={categories}
+              selectedCategory={selectedCategory}
+              onSelect={setSelectedCategory}
+              glassmorphic={false}
+              gradient="blue"
+              trailing={(
+                <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/80">
+                  + Example action
+                </span>
+              )}
+            />
+          </ComponentDemo>
+
           <div className="pt-4 border-t border-black/[0.12] dark:border-white/[0.06]">
             <Typography type="label" className="font-semibold mb-3">Props</Typography>
             <PropsTable props={[
@@ -1129,6 +1150,7 @@ export default function PageClient() {
               { name: "size", type: "'sm' | 'md'", default: "'sm'", description: "Controls padding and density." },
               { name: "glassmorphic", type: "boolean", default: "false", description: "Enable when tabs are on glass surfaces." },
               { name: "gradient", type: "'blue' | 'cyan' | 'purple' | 'green' | 'orange' | 'default'", description: "Optional accent when glassmorphic is true." },
+              { name: "trailing", type: "ReactNode", description: "Renders at the end of the tab bar, after all tab buttons (not a tab)." },
             ]} />
           </div>
         </DesignSection>