dashboard improvements

packages/app/control/src/app/(app)/admin/_components/overview/AppEarnings.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function AppEarningsOverview() {
+  const { data, isLoading, error } =
+    api.admin.earnings.getAppEarningsOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="App Earnings Overview"
+      description="Summary statistics for app revenues and usage"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{
+        columns: 3,
+        gap: 'md',
+        responsive: true,
+      }}
+      className="mb-8"
+    />
+  );
+}
+

packages/app/control/src/app/(app)/admin/_components/overview/PaymentHistory.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from 'react';
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function PaymentsOverview() {
+  const { data, isLoading, error } =
+    api.admin.payments.getPaymentsOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="Payments Overview"
+      description="How users are paying into the platform"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{ columns: 3, gap: 'md', responsive: true }}
+      className="mb-8"
+    />
+  );
+}
+

packages/app/control/src/app/(app)/admin/_components/overview/UserEarnings.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function UserEarningsOverview() {
+  const { data, isLoading, error } =
+    api.admin.earnings.getUserEarningsOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="User Earnings Overview"
+      description="Summary statistics for user earnings"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{
+        columns: 3,
+        gap: 'md',
+        responsive: true,
+      }}
+      className="mb-8"
+    />
+  );
+}

packages/app/control/src/app/(app)/admin/_components/overview/UserSpending.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function UserSpendingOverview() {
+  const { data, isLoading, error } =
+    api.admin.spending.getUserSpendingOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="User Spending Overview"
+      description="Summary statistics for how users are spending"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{
+        columns: 3,
+        gap: 'md',
+        responsive: true,
+      }}
+      className="mb-8"
+    />
+  );
+}
+
+

packages/app/control/src/app/(app)/admin/dashboard/app-earnings/page.tsx

@@ -1,12 +1,14 @@
 import AppEarningsTable from '@/app/(app)/admin/_components/table/AppEarnings';
 import { TableLayout } from '@/app/(app)/admin/_components';
+import { AppEarningsOverview } from '@/app/(app)/admin/_components/overview/AppEarnings';
 
 export default function AppEarningsPage() {
   return (
     <TableLayout
       title="App Earnings"
       description="Monitor app performance and revenue generation metrics"
     >
+      <AppEarningsOverview />
       <AppEarningsTable />
     </TableLayout>
   );

packages/app/control/src/app/(app)/admin/dashboard/payments/page.tsx

@@ -1,4 +1,5 @@
 import PaymentHistoryTable from '@/app/(app)/admin/_components/table/PaymentHistory';
+import { PaymentsOverview } from '@/app/(app)/admin/_components/overview/PaymentHistory';
 import { TableLayout } from '@/app/(app)/admin/_components';
 
 export default function PaymentHistoryPage() {
@@ -7,6 +8,7 @@ export default function PaymentHistoryPage() {
       title="Payment History"
       description="Review payment transactions and payout history"
     >
+      <PaymentsOverview />
       <PaymentHistoryTable />
     </TableLayout>
   );

packages/app/control/src/app/(app)/admin/dashboard/user-earnings/page.tsx

@@ -1,12 +1,14 @@
 import UserEarningsTable from '@/app/(app)/admin/_components/table/UserEarnings';
 import { TableLayout } from '@/app/(app)/admin/_components';
+import { UserEarningsOverview } from '@/app/(app)/admin/_components/overview/UserEarnings';
 
 export default function UserEarningsPage() {
   return (
     <TableLayout
       title="User Earnings"
       description="Comprehensive view of user earnings and transaction aggregates across all apps"
     >
+      <UserEarningsOverview />
       <UserEarningsTable />
     </TableLayout>
   );

packages/app/control/src/app/(app)/admin/dashboard/user-spending/page.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import UserSpendingTable from '@/app/(app)/admin/_components/table/UserSpending';
 import { TableLayout } from '@/app/(app)/admin/_components';
+import { UserSpendingOverview } from '@/app/(app)/admin/_components/overview/UserSpending';
 
 export default function UserSpendingPage() {
   return (
     <TableLayout
       title="User Spending"
       description="Analyze user spending patterns and credit usage across the platform"
     >
+      <UserSpendingOverview />
       <UserSpendingTable />
     </TableLayout>
   );

packages/app/control/src/services/admin/app-earnings-summary.ts

@@ -0,0 +1,187 @@
+import { db } from '@/lib/db';
+import { OverviewMetricConfig } from './type/overview-metric';
+
+function percentChange(currentValue: number | bigint, previousValue: number | bigint): number {
+  const currentNumber = Number(currentValue) || 0;
+  const previousNumber = Number(previousValue) || 0;
+  if (previousNumber === 0) return currentNumber ? 100 : 0;
+  const delta = currentNumber - previousNumber;
+  return (delta / previousNumber) * 100;
+}
+
+type AppEarningsOverviewRow = {
+  totalRevenue: number;
+  totalTransactions: number;
+  activeApps: number;
+  avgRevenuePerActiveApp: number;
+  avgTransactionValue: number;
+  freeTierUsage: number;
+};
+
+type AppEarningsTrendRow = {
+  spend_current: number;
+  spend_prev: number;
+  tx_count_current: number;
+  tx_count_prev: number;
+  active_apps_current: number;
+  active_apps_prev: number;
+  free_tier_current: number;
+  free_tier_prev: number;
+};
+
+export async function getAppEarningsOverviewMetrics(): Promise<OverviewMetricConfig[]> {
+  const summaryQuery = `
+    WITH t AS (
+      SELECT 
+        COALESCE(SUM(t."totalCost"), 0)::double precision AS total_revenue,
+        COALESCE(COUNT(t.id), 0)::double precision AS total_transactions,
+        COALESCE(SUM(CASE WHEN t."spendPoolId" IS NOT NULL THEN t."totalCost" END), 0)::double precision AS free_tier_usage
+      FROM "transactions" t
+    ), a AS (
+      SELECT COALESCE(COUNT(DISTINCT t2."echoAppId"), 0)::double precision AS active_apps
+      FROM "transactions" t2
+    ), avg_tx AS (
+      SELECT COALESCE(AVG(t3."totalCost"), 0)::double precision AS avg_txn_value
+      FROM "transactions" t3
+    )
+    SELECT 
+      t.total_revenue AS "totalRevenue",
+      t.total_transactions AS "totalTransactions",
+      a.active_apps AS "activeApps",
+      CASE WHEN a.active_apps > 0 THEN t.total_revenue / a.active_apps ELSE 0 END AS "avgRevenuePerActiveApp",
+      avg_tx.avg_txn_value AS "avgTransactionValue",
+      t.free_tier_usage AS "freeTierUsage"
+    FROM t, a, avg_tx;
+  `;
+
+  const summary = (await db.$queryRawUnsafe(summaryQuery)) as Array<AppEarningsOverviewRow>;
+  const s = summary[0] || {
+    totalRevenue: 0,
+    totalTransactions: 0,
+    activeApps: 0,
+    avgRevenuePerActiveApp: 0,
+    avgTransactionValue: 0,
+    freeTierUsage: 0,
+  };
+
+  const trendQuery = `
+    WITH ranges AS (
+      SELECT 
+        (NOW()::date - INTERVAL '7 days') AS start_current,
+        NOW()::date AS end_current,
+        (NOW()::date - INTERVAL '14 days') AS start_prev,
+        (NOW()::date - INTERVAL '7 days') AS end_prev
+    ),
+    txn AS (
+      SELECT 
+        COALESCE(SUM(CASE WHEN t."createdAt" >= r.start_current AND t."createdAt" < r.end_current THEN t."totalCost" END), 0)::double precision AS spend_current,
+        COALESCE(SUM(CASE WHEN t."createdAt" >= r.start_prev AND t."createdAt" < r.end_prev THEN t."totalCost" END), 0)::double precision AS spend_prev,
+        COALESCE(COUNT(CASE WHEN t."createdAt" >= r.start_current AND t."createdAt" < r.end_current THEN 1 END), 0)::double precision AS tx_count_current,
+        COALESCE(COUNT(CASE WHEN t."createdAt" >= r.start_prev AND t."createdAt" < r.end_prev THEN 1 END), 0)::double precision AS tx_count_prev,
+        COALESCE(SUM(CASE WHEN t."spendPoolId" IS NOT NULL AND t."createdAt" >= r.start_current AND t."createdAt" < r.end_current THEN t."totalCost" END), 0)::double precision AS free_tier_current,
+        COALESCE(SUM(CASE WHEN t."spendPoolId" IS NOT NULL AND t."createdAt" >= r.start_prev AND t."createdAt" < r.end_prev THEN t."totalCost" END), 0)::double precision AS free_tier_prev
+      FROM "transactions" t, ranges r
+    ),
+    apps AS (
+      SELECT 
+        COALESCE(COUNT(DISTINCT CASE WHEN t."createdAt" >= r.start_current AND t."createdAt" < r.end_current THEN t."echoAppId" END), 0)::double precision AS active_apps_current,
+        COALESCE(COUNT(DISTINCT CASE WHEN t."createdAt" >= r.start_prev AND t."createdAt" < r.end_prev THEN t."echoAppId" END), 0)::double precision AS active_apps_prev
+      FROM "transactions" t, ranges r
+    )
+    SELECT 
+      txn.spend_current,
+      txn.spend_prev,
+      txn.tx_count_current,
+      txn.tx_count_prev,
+      apps.active_apps_current,
+      apps.active_apps_prev,
+      txn.free_tier_current,
+      txn.free_tier_prev
+    FROM txn, apps;
+  `;
+
+  const trendRows = (await db.$queryRawUnsafe(trendQuery)) as Array<AppEarningsTrendRow>;
+  const t = trendRows[0] || {
+    spend_current: 0,
+    spend_prev: 0,
+    tx_count_current: 0,
+    tx_count_prev: 0,
+    active_apps_current: 0,
+    active_apps_prev: 0,
+    free_tier_current: 0,
+    free_tier_prev: 0,
+  };
+
+  const trendLabel = 'vs previous 7d';
+
+  const avgRevCurrent = t.active_apps_current ? t.spend_current / t.active_apps_current : 0;
+  const avgRevPrev = t.active_apps_prev ? t.spend_prev / t.active_apps_prev : 0;
+  const avgTxnCurrent = t.tx_count_current ? t.spend_current / t.tx_count_current : 0;
+  const avgTxnPrev = t.tx_count_prev ? t.spend_prev / t.tx_count_prev : 0;
+
+  const metrics: OverviewMetricConfig[] = [
+    {
+      id: 'totalRevenue',
+      title: 'Total Revenue',
+      description: 'Total revenue generated across all apps',
+      displayType: 'currency',
+      value: s.totalRevenue,
+      trendValue: percentChange(t.spend_current, t.spend_prev),
+      size: 'md',
+      format: { showTrend: true, decimals: 2, trendLabel },
+    },
+    {
+      id: 'activeApps',
+      title: 'Active Apps',
+      description: 'Apps with at least one transaction',
+      displayType: 'number',
+      value: s.activeApps,
+      trendValue: percentChange(t.active_apps_current, t.active_apps_prev),
+      size: 'sm',
+      format: { showTrend: true, trendLabel },
+    },
+    {
+      id: 'avgRevenuePerActiveApp',
+      title: 'Avg Revenue / Active App',
+      description: 'Average revenue per active app',
+      displayType: 'currency',
+      value: s.avgRevenuePerActiveApp,
+      trendValue: percentChange(avgRevCurrent, avgRevPrev),
+      size: 'sm',
+      format: { showTrend: true, decimals: 2, trendLabel },
+    },
+    {
+      id: 'totalTransactions',
+      title: 'Total Transactions',
+      description: 'Number of transactions across all apps',
+      displayType: 'number',
+      value: s.totalTransactions,
+      trendValue: percentChange(t.tx_count_current, t.tx_count_prev),
+      size: 'sm',
+      format: { showTrend: true, trendLabel },
+    },
+    {
+      id: 'avgTransactionValue',
+      title: 'Avg Transaction Value',
+      description: 'Average spend per transaction',
+      displayType: 'currency',
+      value: s.avgTransactionValue,
+      trendValue: percentChange(avgTxnCurrent, avgTxnPrev),
+      size: 'sm',
+      format: { showTrend: true, decimals: 2, trendLabel },
+    },
+    {
+      id: 'freeTierUsage',
+      title: 'Free Tier Usage',
+      description: 'Total consumption covered by spend pools',
+      displayType: 'currency',
+      value: s.freeTierUsage,
+      trendValue: percentChange(t.free_tier_current, t.free_tier_prev),
+      size: 'md',
+      format: { showTrend: true, decimals: 2, trendLabel },
+    },
+  ];
+
+  return metrics;
+}
+