@everystack/admin 0.1.0

package/src/rpc/resource-dashboard-rpc.ts

@@ -0,0 +1,416 @@
+/**
+ * Generic Resource Dashboard RPC Factory
+ *
+ * Builds server-side aggregation queries from ResourceDashboardConfig.
+ * Creates two RPC handlers per resource:
+ *   - dashboardData: Single CTE query returning time histogram, dimension counts, and stats
+ *   - eventList: Paginated, searchable, sortable event listing
+ *
+ * All filters use whitelist validation from DimensionConfig.allowedValues.
+ * Table/column names come from server-side config (not user input).
+ *
+ * Usage:
+ *   const rpcs = createResourceDashboardRpcs('log_events', config, db);
+ *   // Wire into handler: rpc: { logEventsDashboardData: rpcs.dashboardData, ... }
+ */
+
+import { sql, type SQL } from 'drizzle-orm';
+import type { ResourceDashboardConfig, DimensionConfig, StatDialConfig } from '../types';
+
+interface DbExecutor {
+  execute(query: unknown): Promise<{ rows?: unknown[] } | unknown[]>;
+}
+
+function extractRows(result: { rows?: unknown[] } | unknown[]): unknown[] {
+  if (Array.isArray(result)) return result;
+  return (result as { rows?: unknown[] }).rows ?? [];
+}
+
+// ────────────────────────────────────────────────────────────
+// Dashboard Filters (generic — keyed by dimension column name)
+// ────────────────────────────────────────────────────────────
+
+export interface DashboardFilters {
+  time?: [string, string];
+  [dimension: string]: string[] | [string, string] | undefined;
+}
+
+// ────────────────────────────────────────────────────────────
+// Dashboard Aggregates (generic — keyed by config IDs)
+// ────────────────────────────────────────────────────────────
+
+export interface DashboardAggregates {
+  timeHistogram: { bucket: string; count: number }[];
+  dimensions: Record<string, { value: string; count: number }[]>;
+  stats: Record<string, number>;
+}
+
+// ────────────────────────────────────────────────────────────
+// Event List types
+// ────────────────────────────────────────────────────────────
+
+export interface EventListResult {
+  rows: Record<string, unknown>[];
+  total: number;
+}
+
+// ────────────────────────────────────────────────────────────
+// WHERE clause builder
+// ────────────────────────────────────────────────────────────
+
+function buildWhereClause(
+  config: ResourceDashboardConfig,
+  filters: DashboardFilters,
+  hours: number,
+): SQL {
+  const conditions: SQL[] = [];
+  const tsCol = config.timestampColumn;
+
+  // Time window
+  if (filters.time && filters.time[0] && filters.time[1]) {
+    conditions.push(sql`${sql.raw(tsCol)} >= ${filters.time[0]}::timestamptz`);
+    conditions.push(sql`${sql.raw(tsCol)} <= ${filters.time[1]}::timestamptz`);
+  } else {
+    conditions.push(sql`${sql.raw(tsCol)} >= NOW() - INTERVAL '1 hour' * ${hours}`);
+  }
+
+  // Dimension filters
+  for (const dim of config.dimensions) {
+    const filterValue = filters[dim.column];
+    if (!filterValue || !Array.isArray(filterValue) || filterValue.length === 0) continue;
+    // Skip time tuples (already handled)
+    if (filterValue.length === 2 && typeof filterValue[0] === 'string' && filterValue[0].includes('T')) continue;
+
+    const allowed = new Set(dim.allowedValues ?? []);
+    const safeValues = (filterValue as string[]).filter(v => allowed.size === 0 || allowed.has(v));
+    if (safeValues.length === 0) continue;
+
+    const params = safeValues.map(v => sql`${v}`);
+    let inList = params[0];
+    for (let i = 1; i < params.length; i++) {
+      inList = sql`${inList}, ${params[i]}`;
+    }
+    conditions.push(sql`${sql.raw(dim.column)} IN (${inList})`);
+  }
+
+  if (conditions.length === 0) return sql`1=1`;
+  if (conditions.length === 1) return conditions[0];
+
+  let result = conditions[0];
+  for (let i = 1; i < conditions.length; i++) {
+    result = sql`${result} AND ${conditions[i]}`;
+  }
+  return result;
+}
+
+// ────────────────────────────────────────────────────────────
+// Stats CTE builder
+// ────────────────────────────────────────────────────────────
+
+function buildStatSelects(stats: StatDialConfig[]): SQL {
+  const parts: SQL[] = [];
+
+  for (const stat of stats) {
+    switch (stat.value.type) {
+      case 'count':
+        parts.push(sql`COUNT(*)::int AS ${sql.raw(stat.id)}`);
+        break;
+      case 'count_where':
+        parts.push(
+          sql`COUNT(*) FILTER (WHERE ${sql.raw(stat.value.column)} = ${stat.value.equals})::int AS ${sql.raw(stat.id)}`
+        );
+        break;
+      case 'distinct':
+        parts.push(
+          sql`COUNT(DISTINCT ${sql.raw(stat.value.column)})::int AS ${sql.raw(stat.id)}`
+        );
+        break;
+      case 'table_count':
+        // Handled separately as a subquery
+        break;
+    }
+  }
+
+  if (parts.length === 0) {
+    return sql`COUNT(*)::int AS total`;
+  }
+
+  let result = parts[0];
+  for (let i = 1; i < parts.length; i++) {
+    result = sql`${result}, ${parts[i]}`;
+  }
+  return result;
+}
+
+// ────────────────────────────────────────────────────────────
+// Dashboard Data RPC
+// ────────────────────────────────────────────────────────────
+
+function createDashboardDataHandler(
+  tableName: string,
+  config: ResourceDashboardConfig,
+  db: DbExecutor,
+): (body: unknown) => Promise<unknown> {
+  return async (body: unknown) => {
+    const params = (body as Record<string, unknown>) ?? {};
+    const hours = Number(params.hours ?? config.defaultHours ?? 168);
+    const filters = (params.filters ?? {}) as DashboardFilters;
+    const where = buildWhereClause(config, filters, hours);
+    const bucketSize = config.bucketSize ?? 'hour';
+
+    // Build dimension CTEs
+    const dimensionCtes: SQL[] = [];
+    const dimensionSelects: SQL[] = [];
+
+    for (const dim of config.dimensions) {
+      const cteId = `dim_${dim.column}`;
+      dimensionCtes.push(sql`${sql.raw(cteId)} AS (
+        SELECT ${sql.raw(dim.column)} AS value, COUNT(*)::int AS count
+        FROM filtered
+        GROUP BY ${sql.raw(dim.column)}
+        ORDER BY count DESC
+      )`);
+      dimensionSelects.push(
+        sql`(SELECT COALESCE(json_agg(row_to_json(d)), '[]'::json) FROM ${sql.raw(cteId)} d) AS ${sql.raw(`"dim_${dim.column}"`)}`
+      );
+    }
+
+    // Build table_count stats (secondary tables)
+    const tableCountStats = config.stats.filter(s => s.value.type === 'table_count');
+    const tableCountCtes: SQL[] = [];
+    const tableCountSelects: SQL[] = [];
+
+    for (const stat of tableCountStats) {
+      if (stat.value.type !== 'table_count') continue;
+      const secTable = stat.value.table;
+      const secTsCol = stat.value.timestampColumn ?? config.timestampColumn;
+      // Build a simple time-window WHERE for the secondary table
+      let secWhere: SQL;
+      if (filters.time && filters.time[0] && filters.time[1]) {
+        secWhere = sql`${sql.raw(secTsCol)} >= ${filters.time[0]}::timestamptz AND ${sql.raw(secTsCol)} <= ${filters.time[1]}::timestamptz`;
+      } else {
+        secWhere = sql`${sql.raw(secTsCol)} >= NOW() - INTERVAL '1 hour' * ${hours}`;
+      }
+      tableCountCtes.push(sql`${sql.raw(`sec_${stat.id}`)} AS (
+        SELECT COUNT(*)::int AS count FROM ${sql.raw(secTable)} WHERE ${secWhere}
+      )`);
+      tableCountSelects.push(
+        sql`(SELECT count FROM ${sql.raw(`sec_${stat.id}`)}) AS ${sql.raw(`"sec_${stat.id}"`)}`
+      );
+    }
+
+    // Assemble query
+    const statSelects = buildStatSelects(config.stats);
+
+    let allCtes = sql`filtered AS (
+      SELECT *
+      FROM ${sql.raw(tableName)}
+      WHERE ${where}
+    ),
+    time_agg AS (
+      SELECT date_trunc('${sql.raw(bucketSize)}', ${sql.raw(config.timestampColumn)})::text AS bucket,
+             COUNT(*)::int AS count
+      FROM filtered
+      GROUP BY 1
+      ORDER BY 1 ASC
+    ),
+    stats_agg AS (
+      SELECT ${statSelects}
+      FROM filtered
+    )`;
+
+    for (const cte of dimensionCtes) {
+      allCtes = sql`${allCtes}, ${cte}`;
+    }
+    for (const cte of tableCountCtes) {
+      allCtes = sql`${allCtes}, ${cte}`;
+    }
+
+    let selectClauses = sql`(SELECT COALESCE(json_agg(row_to_json(t)), '[]'::json) FROM time_agg t) AS "timeHistogram",
+        (SELECT row_to_json(s) FROM stats_agg s) AS stats`;
+
+    for (const sel of dimensionSelects) {
+      selectClauses = sql`${selectClauses}, ${sel}`;
+    }
+    for (const sel of tableCountSelects) {
+      selectClauses = sql`${selectClauses}, ${sel}`;
+    }
+
+    const result = await db.execute(sql`
+      WITH ${allCtes}
+      SELECT ${selectClauses}
+    `);
+
+    const rows = extractRows(result);
+    const row = rows[0] as Record<string, unknown> | undefined;
+
+    if (!row) {
+      const emptyStats: Record<string, number> = {};
+      for (const s of config.stats) emptyStats[s.id] = 0;
+      return {
+        timeHistogram: [],
+        dimensions: {},
+        stats: emptyStats,
+      } satisfies DashboardAggregates;
+    }
+
+    // Parse timeHistogram
+    const timeHistogram = (typeof row.timeHistogram === 'string'
+      ? JSON.parse(row.timeHistogram)
+      : row.timeHistogram) as DashboardAggregates['timeHistogram'] ?? [];
+
+    // Parse stats
+    const rawStats = (typeof row.stats === 'string'
+      ? JSON.parse(row.stats)
+      : row.stats) as Record<string, number> ?? {};
+
+    // Merge in table_count stats
+    for (const stat of tableCountStats) {
+      const key = `sec_${stat.id}`;
+      const val = row[key];
+      rawStats[stat.id] = typeof val === 'number' ? val : 0;
+    }
+
+    // Parse dimension counts
+    const dimensions: Record<string, { value: string; count: number }[]> = {};
+    for (const dim of config.dimensions) {
+      const key = `dim_${dim.column}`;
+      const val = row[key];
+      dimensions[dim.column] = (typeof val === 'string' ? JSON.parse(val) : val) as { value: string; count: number }[] ?? [];
+    }
+
+    return { timeHistogram, dimensions, stats: rawStats } satisfies DashboardAggregates;
+  };
+}
+
+// ────────────────────────────────────────────────────────────
+// Event List RPC
+// ────────────────────────────────────────────────────────────
+
+function createEventListHandler(
+  tableName: string,
+  config: ResourceDashboardConfig,
+  db: DbExecutor,
+): (body: unknown) => Promise<unknown> {
+  const validSortColumns = new Set(config.listColumns);
+
+  return async (body: unknown) => {
+    const params = (body as Record<string, unknown>) ?? {};
+    const hours = Number(params.hours ?? config.defaultHours ?? 168);
+    const filters = (params.filters ?? {}) as DashboardFilters;
+    const search = params.search as string | undefined;
+    const sortBy = validSortColumns.has(params.sortBy as string) ? params.sortBy as string : config.timestampColumn;
+    const sortDir = params.sortDir === 'asc' ? 'asc' : 'desc';
+    const limit = Math.min(Math.max(1, Number(params.limit ?? 50)), 200);
+    const offset = Math.max(0, Number(params.offset ?? 0));
+
+    const where = buildWhereClause(config, filters, hours);
+
+    // Build search condition
+    let searchCondition: SQL = sql`1=1`;
+    if (search && search.trim().length > 0) {
+      const searchCols = config.searchColumns ?? [];
+      if (searchCols.length > 0) {
+        const pattern = `%${search.trim()}%`;
+        let searchSql = sql`${sql.raw(searchCols[0])} ILIKE ${pattern}`;
+        for (let i = 1; i < searchCols.length; i++) {
+          searchSql = sql`${searchSql} OR ${sql.raw(searchCols[i])} ILIKE ${pattern}`;
+        }
+        searchCondition = sql`(${searchSql})`;
+      }
+    }
+
+    // Build SELECT columns — include primary key(s) for row identification
+    const pkCols = config.primaryKey
+      ? (Array.isArray(config.primaryKey) ? config.primaryKey : [config.primaryKey])
+      : ['id'];
+    const allCols = [...new Set([...pkCols, ...config.listColumns])];
+
+    const result = await db.execute(sql`
+      WITH filtered AS (
+        SELECT ${sql.raw(allCols.join(', '))}
+        FROM ${sql.raw(tableName)}
+        WHERE ${where} AND ${searchCondition}
+      )
+      SELECT
+        (SELECT COUNT(*)::int FROM filtered) AS total,
+        (SELECT COALESCE(json_agg(row_to_json(r)), '[]'::json)
+         FROM (
+           SELECT * FROM filtered
+           ORDER BY ${sql.raw(sortBy)} ${sql.raw(sortDir)}
+           LIMIT ${limit} OFFSET ${offset}
+         ) r
+        ) AS rows
+    `);
+
+    const rows = extractRows(result);
+    const row = rows[0] as Record<string, unknown> | undefined;
+
+    if (!row) {
+      return { rows: [], total: 0 } satisfies EventListResult;
+    }
+
+    const eventRows = (typeof row.rows === 'string'
+      ? JSON.parse(row.rows)
+      : row.rows) as Record<string, unknown>[] ?? [];
+
+    return {
+      rows: eventRows,
+      total: (row.total as number) ?? 0,
+    } satisfies EventListResult;
+  };
+}
+
+// ────────────────────────────────────────────────────────────
+// Public API
+// ────────────────────────────────────────────────────────────
+
+export interface ResourceDashboardRpcs {
+  dashboardData: (body: unknown) => Promise<unknown>;
+  eventList: (body: unknown) => Promise<unknown>;
+}
+
+/**
+ * Create dashboard + event list RPC handlers for a resource.
+ *
+ * @param tableName - Database table name (snake_case)
+ * @param config - ResourceDashboardConfig from ResourceConfig.dashboard
+ * @param db - Drizzle db executor (must support .execute())
+ */
+export function createResourceDashboardRpcs(
+  tableName: string,
+  config: ResourceDashboardConfig,
+  db: DbExecutor,
+): ResourceDashboardRpcs {
+  return {
+    dashboardData: createDashboardDataHandler(tableName, config, db),
+    eventList: createEventListHandler(tableName, config, db),
+  };
+}
+
+/**
+ * Create dashboard RPCs for all resources that have a dashboard config.
+ *
+ * Returns a flat Record<string, RpcHandler> ready to spread into the handler's rpc config.
+ * RPC names follow the pattern: {resourceName}DashboardData, {resourceName}EventList
+ *
+ * @param resources - Array of ResourceConfig (with optional .dashboard)
+ * @param db - Drizzle db executor
+ */
+export function createAllDashboardRpcs(
+  resources: Array<{ name: string; dashboard?: ResourceDashboardConfig }>,
+  db: DbExecutor,
+): Record<string, (body: unknown) => Promise<unknown>> {
+  const rpcs: Record<string, (body: unknown) => Promise<unknown>> = {};
+
+  for (const resource of resources) {
+    if (!resource.dashboard) continue;
+    const handlers = createResourceDashboardRpcs(resource.name, resource.dashboard, db);
+    // Convert resource name to camelCase RPC name prefix
+    const prefix = resource.name.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
+    rpcs[`${prefix}DashboardData`] = handlers.dashboardData;
+    rpcs[`${prefix}EventList`] = handlers.eventList;
+  }
+
+  return rpcs;
+}

package/src/screens/AdminDashboard.tsx

@@ -0,0 +1,217 @@
+/**
+ * AdminDashboard
+ *
+ * Renders dashboard widgets from AdminConfig.dashboards[].widgets.
+ * Supports stat cards (useCount/useStats) and chart widgets (useGroupedCount).
+ * Grid width: width >= 2 → full-width, else half-width.
+ */
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import { useCount, useStats, useGroupedCount } from '../hooks/useAggregates';
+import { BarChart, DonutChart, LineChart, type DataPoint, type DataSeries } from '@everystack/ui';
+import type { WidgetConfig } from '../types';
+
+export interface AdminDashboardProps {
+  /** Dashboard ID to render (defaults to first dashboard) */
+  dashboardId?: string;
+  /** Called when a widget is pressed */
+  onWidgetPress?: (widget: WidgetConfig) => void;
+}
+
+export function AdminDashboard({ dashboardId, onWidgetPress }: AdminDashboardProps): React.ReactElement {
+  const config = useAdminConfig();
+  const dashboard = dashboardId
+    ? config.dashboards?.find(d => d.id === dashboardId)
+    : config.dashboards?.[0];
+
+  if (!dashboard) {
+    return (
+      <View className="flex-1 items-center justify-center py-12">
+        <Text className="text-sm text-gray-500">No dashboard configured</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 p-4">
+      <Text className="text-xl font-bold text-gray-900 mb-1">{dashboard.title}</Text>
+      {dashboard.description && (
+        <Text className="text-sm text-gray-500 mb-4">{dashboard.description}</Text>
+      )}
+
+      {/* Widget grid */}
+      <View className="flex-row flex-wrap -mx-2">
+        {dashboard.widgets.map(widget => {
+          const isWide = (widget.grid?.width ?? 1) >= 2;
+          return (
+            <View key={widget.id} className={isWide ? 'w-full px-2 mb-4' : 'w-1/2 px-2 mb-4'}>
+              <WidgetDispatcher widget={widget} onPress={onWidgetPress} />
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+// =============================================================================
+// Widget Dispatcher
+// =============================================================================
+
+interface WidgetDispatcherProps {
+  widget: WidgetConfig;
+  onPress?: (widget: WidgetConfig) => void;
+}
+
+function WidgetDispatcher({ widget, onPress }: WidgetDispatcherProps): React.ReactElement {
+  switch (widget.type) {
+    case 'chart':
+      return <ChartWidget widget={widget} onPress={onPress} />;
+    case 'stat':
+    default:
+      return <StatWidget widget={widget} onPress={onPress} />;
+  }
+}
+
+// =============================================================================
+// StatWidget
+// =============================================================================
+
+interface StatWidgetProps {
+  widget: WidgetConfig;
+  onPress?: (widget: WidgetConfig) => void;
+}
+
+function StatWidget({ widget, onPress }: StatWidgetProps): React.ReactElement {
+  const resource = widget.data?.resource ?? '';
+  const aggregation = widget.data?.aggregation;
+  const field = widget.data?.field;
+
+  // Use the appropriate hook based on aggregation type
+  const { count, loading: countLoading } = useCount(resource, {
+    skip: aggregation !== 'count' && aggregation !== undefined,
+  });
+
+  const { stats, loading: statsLoading } = useStats(resource, {
+    sum: aggregation === 'sum' ? field : undefined,
+    avg: aggregation === 'avg' ? field : undefined,
+    min: aggregation === 'min' ? field : undefined,
+    max: aggregation === 'max' ? field : undefined,
+    skip: aggregation === 'count' || aggregation === undefined,
+  });
+
+  const loading = countLoading || statsLoading;
+  let value: string | number = '—';
+
+  if (!loading) {
+    if (aggregation === 'count' || aggregation === undefined) {
+      value = count ?? 0;
+    } else if (aggregation && stats[aggregation] != null) {
+      value = formatStat(stats[aggregation] as number, widget.stat?.format);
+    }
+  }
+
+  return (
+    <View className="bg-white rounded-xl p-4 border border-gray-200">
+      <Text className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
+        {widget.title}
+      </Text>
+      <Text className="text-2xl font-bold text-gray-900">
+        {loading ? '...' : String(value)}
+      </Text>
+    </View>
+  );
+}
+
+// =============================================================================
+// ChartWidget
+// =============================================================================
+
+interface ChartWidgetProps {
+  widget: WidgetConfig;
+  onPress?: (widget: WidgetConfig) => void;
+}
+
+function ChartWidget({ widget, onPress }: ChartWidgetProps): React.ReactElement {
+  const resource = widget.data?.resource ?? '';
+  const groupBy = widget.data?.groupBy ?? '';
+  const chartType = widget.chart?.type ?? 'bar';
+
+  const { data, loading, error } = useGroupedCount(resource, groupBy, {
+    filter: widget.data?.query as Record<string, unknown> | undefined,
+  });
+
+  // Transform grouped data to chart data points
+  const chartData: DataPoint[] = data.map(row => ({
+    label: String(row[groupBy] ?? 'Unknown'),
+    value: row.count ?? 0,
+  }));
+
+  return (
+    <View className="bg-white rounded-xl p-4 border border-gray-200">
+      <Text className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
+        {widget.title}
+      </Text>
+
+      {loading ? (
+        <View className="h-40 items-center justify-center">
+          <Text className="text-sm text-gray-400">Loading...</Text>
+        </View>
+      ) : error ? (
+        <View className="h-40 items-center justify-center">
+          <Text className="text-sm text-red-400">Failed to load</Text>
+        </View>
+      ) : (
+        <ChartRenderer type={chartType} data={chartData} />
+      )}
+    </View>
+  );
+}
+
+// =============================================================================
+// Chart Renderer
+// =============================================================================
+
+interface ChartRendererProps {
+  type: string;
+  data: DataPoint[];
+}
+
+function ChartRenderer({ type, data }: ChartRendererProps): React.ReactElement {
+  switch (type) {
+    case 'donut':
+    case 'pie':
+      return <DonutChart data={data} size={140} showLegend />;
+
+    case 'line':
+    case 'area': {
+      const series: DataSeries[] = [{
+        name: 'Value',
+        data,
+        color: '#6366f1',
+      }];
+      return <LineChart series={series} height={160} fillArea={type === 'area'} showGrid />;
+    }
+
+    case 'bar':
+    default:
+      return <BarChart data={data} height={160} showLabels showValues={false} orientation="horizontal" />;
+  }
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function formatStat(value: number, format?: 'number' | 'currency' | 'percent'): string {
+  switch (format) {
+    case 'currency':
+      return `$${value.toLocaleString(undefined, { minimumFractionDigits: 2 })}`;
+    case 'percent':
+      return `${(value * 100).toFixed(1)}%`;
+    default:
+      return value.toLocaleString();
+  }
+}