@everystack/admin 0.1.0

package/src/components/dashboard/EventTable.tsx

@@ -0,0 +1,248 @@
+/**
+ * EventTable — Config-driven paginated, searchable, sortable table.
+ *
+ * Generalized from EventList. Columns, RPC function name, and navigation
+ * are all injected via props.
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { View, Text, TextInput, Pressable, ActivityIndicator } from 'react-native';
+import { useRpc } from '../../hooks/useRpc';
+import type { DashboardFilters, EventListResult } from '../../rpc/resource-dashboard-rpc';
+
+export interface EventTableColumn {
+  /** Column key (matches data field) */
+  key: string;
+  /** Display label */
+  label: string;
+  /** Flex ratio (default: 1) */
+  flex?: number;
+  /** Format function */
+  format?: (value: unknown) => string;
+}
+
+export interface EventTableProps {
+  baseUrl: string;
+  rpcFn: string;
+  columns: EventTableColumn[];
+  filters: DashboardFilters;
+  getToken?: () => string | null | Promise<string | null>;
+  onRowPress?: (row: Record<string, unknown>) => void;
+  /** Default sort column */
+  defaultSort?: string;
+}
+
+const PAGE_SIZE = 25;
+
+interface SortState {
+  column: string;
+  dir: 'asc' | 'desc';
+}
+
+function SortHeader({
+  label,
+  column,
+  sort,
+  onSort,
+  flex,
+}: {
+  label: string;
+  column: string;
+  sort: SortState;
+  onSort: (col: string) => void;
+  flex: number;
+}): React.ReactElement {
+  const active = sort.column === column;
+  const arrow = active ? (sort.dir === 'asc' ? ' \u25B2' : ' \u25BC') : '';
+  return (
+    <Pressable onPress={() => onSort(column)} style={{ flex }}>
+      <Text style={{
+        fontSize: 11, fontWeight: '600', color: active ? '#0f172a' : '#6b7280',
+        textTransform: 'uppercase', letterSpacing: 0.5,
+      }}>
+        {label}{arrow}
+      </Text>
+    </Pressable>
+  );
+}
+
+export function EventTable({
+  baseUrl, rpcFn, columns, filters, getToken, onRowPress, defaultSort,
+}: EventTableProps): React.ReactElement {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(0);
+  const [sort, setSort] = useState<SortState>({
+    column: defaultSort ?? columns[0]?.key ?? 'id',
+    dir: 'desc',
+  });
+
+  const searchTrimmed = search.trim();
+
+  const body = useMemo(() => ({
+    hours: 168,
+    filters,
+    search: searchTrimmed || undefined,
+    sortBy: sort.column,
+    sortDir: sort.dir,
+    limit: PAGE_SIZE,
+    offset: page * PAGE_SIZE,
+  }), [filters, searchTrimmed, sort.column, sort.dir, page]);
+
+  const { data, loading } = useRpc<EventListResult>({
+    baseUrl,
+    fn: rpcFn,
+    body,
+    getToken,
+  });
+
+  const handleSort = useCallback((col: string) => {
+    setSort(prev => ({
+      column: col,
+      dir: prev.column === col && prev.dir === 'desc' ? 'asc' : 'desc',
+    }));
+    setPage(0);
+  }, []);
+
+  const handleSearch = useCallback((text: string) => {
+    setSearch(text);
+    setPage(0);
+  }, []);
+
+  const total = data?.total ?? 0;
+  const rows = data?.rows ?? [];
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  const defaultFormat = (value: unknown): string => {
+    if (value == null) return '\u2014';
+    if (typeof value === 'string' && value.match(/^\d{4}-\d{2}-\d{2}/)) {
+      try {
+        const d = new Date(value);
+        return d.toLocaleString('en-US', {
+          month: 'short', day: 'numeric',
+          hour: '2-digit', minute: '2-digit', second: '2-digit',
+          hour12: false,
+        });
+      } catch { /* fallthrough */ }
+    }
+    return String(value);
+  };
+
+  return (
+    <View style={{ marginTop: 32 }}>
+      {/* Header + Search */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+        <Text style={{ fontSize: 14, fontWeight: '600', color: '#0f172a' }}>
+          Events {total > 0 ? `(${total.toLocaleString()})` : ''}
+        </Text>
+        <TextInput
+          value={search}
+          onChangeText={handleSearch}
+          placeholder="Search..."
+          placeholderTextColor="#9ca3af"
+          style={{
+            width: 220, height: 32, paddingHorizontal: 10,
+            borderWidth: 1, borderColor: '#e5e7eb', borderRadius: 6,
+            fontSize: 12, color: '#0f172a', backgroundColor: '#ffffff',
+          }}
+        />
+      </View>
+
+      {/* Column headers */}
+      <View style={{
+        flexDirection: 'row', paddingVertical: 8, paddingHorizontal: 12,
+        backgroundColor: '#f8fafc', borderRadius: 6, marginBottom: 2,
+      }}>
+        {columns.map(col => (
+          <SortHeader
+            key={col.key}
+            label={col.label}
+            column={col.key}
+            sort={sort}
+            onSort={handleSort}
+            flex={col.flex ?? 1}
+          />
+        ))}
+      </View>
+
+      {/* Loading */}
+      {loading && rows.length === 0 && (
+        <View style={{ padding: 24, alignItems: 'center' }}>
+          <ActivityIndicator size="small" color="#6366f1" />
+        </View>
+      )}
+
+      {/* Rows */}
+      {rows.map((row, idx) => (
+        <Pressable
+          key={row.id as string ?? idx}
+          onPress={onRowPress ? () => onRowPress(row) : undefined}
+          style={{
+            flexDirection: 'row', paddingVertical: 8, paddingHorizontal: 12,
+            borderBottomWidth: 1, borderBottomColor: '#f1f5f9',
+            opacity: loading ? 0.6 : 1,
+          }}
+        >
+          {columns.map(col => {
+            const format = col.format ?? defaultFormat;
+            return (
+              <Text
+                key={col.key}
+                style={{ flex: col.flex ?? 1, fontSize: 11, color: '#0f172a' }}
+                numberOfLines={2}
+              >
+                {format(row[col.key])}
+              </Text>
+            );
+          })}
+        </Pressable>
+      ))}
+
+      {/* Empty state */}
+      {!loading && rows.length === 0 && (
+        <View style={{ padding: 24, alignItems: 'center' }}>
+          <Text style={{ color: '#9ca3af', fontSize: 12 }}>
+            {searchTrimmed ? 'No events match your search' : 'No events found'}
+          </Text>
+        </View>
+      )}
+
+      {/* Pagination */}
+      {total > PAGE_SIZE && (
+        <View style={{
+          flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
+          paddingTop: 12, paddingHorizontal: 4,
+        }}>
+          <Text style={{ fontSize: 11, color: '#6b7280' }}>
+            {page * PAGE_SIZE + 1}\u2013{Math.min((page + 1) * PAGE_SIZE, total)} of {total.toLocaleString()}
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <Pressable
+              onPress={() => setPage(p => Math.max(0, p - 1))}
+              disabled={page === 0}
+              style={{
+                paddingVertical: 4, paddingHorizontal: 10, borderRadius: 4,
+                backgroundColor: page === 0 ? '#f1f5f9' : '#e0e7ff',
+              }}
+            >
+              <Text style={{ fontSize: 11, color: page === 0 ? '#9ca3af' : '#6366f1', fontWeight: '500' }}>
+                Prev
+              </Text>
+            </Pressable>
+            <Pressable
+              onPress={() => setPage(p => Math.min(totalPages - 1, p + 1))}
+              disabled={page >= totalPages - 1}
+              style={{
+                paddingVertical: 4, paddingHorizontal: 10, borderRadius: 4,
+                backgroundColor: page >= totalPages - 1 ? '#f1f5f9' : '#e0e7ff',
+              }}
+            >
+              <Text style={{ fontSize: 11, color: page >= totalPages - 1 ? '#9ca3af' : '#6366f1', fontWeight: '500' }}>
+                Next
+              </Text>
+            </Pressable>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/dashboard/StatDials.tsx

@@ -0,0 +1,67 @@
+/**
+ * StatDials — Config-driven circular dials for dashboard KPIs.
+ *
+ * Renders N dials from an array of { label, value, color, ratio }.
+ * Each dial shows a colored ring proportional to ratio (0-1).
+ */
+
+import React from 'react';
+import { View, Text } from 'react-native';
+
+export interface DialData {
+  label: string;
+  value: number;
+  color: string;
+  /** 0-1 ratio for ring fill. undefined = full ring. */
+  ratio?: number;
+}
+
+export interface StatDialsProps {
+  dials: DialData[];
+}
+
+function Dial({ label, value, color, ratio }: DialData): React.ReactElement {
+  const size = 64;
+  const borderWidth = 4;
+  const fillPercent = Math.min(1, Math.max(0, ratio ?? 1));
+
+  return (
+    <View style={{ alignItems: 'center', flex: 1 }}>
+      <View style={{
+        width: size, height: size, borderRadius: size / 2,
+        borderWidth,
+        borderColor: `${color}20`,
+        backgroundColor: '#ffffff',
+        alignItems: 'center', justifyContent: 'center',
+      }}>
+        {/* Overlay ring */}
+        <View style={{
+          position: 'absolute', top: -borderWidth, left: -borderWidth,
+          width: size, height: size, borderRadius: size / 2,
+          borderWidth,
+          borderLeftColor: fillPercent > 0 ? color : 'transparent',
+          borderBottomColor: fillPercent >= 0.25 ? color : 'transparent',
+          borderRightColor: fillPercent >= 0.5 ? color : 'transparent',
+          borderTopColor: fillPercent >= 0.75 ? color : 'transparent',
+          transform: [{ rotate: '-90deg' }],
+        }} />
+        <Text style={{ color, fontSize: value > 999 ? 14 : 18, fontWeight: '700' }}>
+          {value.toLocaleString()}
+        </Text>
+      </View>
+      <Text style={{ marginTop: 6, fontSize: 11, color: '#6b7280', fontWeight: '500' }}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+export function StatDials({ dials }: StatDialsProps): React.ReactElement {
+  return (
+    <View style={{ flexDirection: 'row', gap: 8, paddingVertical: 12 }}>
+      {dials.map((dial) => (
+        <Dial key={dial.label} {...dial} />
+      ))}
+    </View>
+  );
+}

package/src/components/dashboard/TimeHistogram.tsx

@@ -0,0 +1,158 @@
+/**
+ * TimeHistogram — Brushable hourly event histogram.
+ *
+ * Receives pre-aggregated time buckets from the server. Brushing
+ * calls onBrush with [startISO, endISO] to update the parent's
+ * filter state, which triggers a new server query.
+ *
+ * Renders bars as react-native Views (no SVG dependency).
+ */
+
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { Brush } from './Brush';
+
+export interface TimeHistogramProps {
+  data: { bucket: string; count: number }[];
+  width: number;
+  height?: number;
+  title?: string;
+  onBrush: (extent: [string, string] | null) => void;
+}
+
+export function TimeHistogram({ data, width, height = 120, title, onBrush }: TimeHistogramProps): React.ReactElement {
+  const { bins, maxCount, xScale, barWidth } = useMemo(() => {
+    if (!data || data.length === 0) {
+      return { bins: [] as { bucket: string; ts: number; count: number }[], maxCount: 0, xScale: null, barWidth: 0 };
+    }
+
+    const sorted = data
+      .map(d => ({ bucket: d.bucket, ts: new Date(d.bucket).getTime(), count: d.count }))
+      .filter(d => d.count > 0 && !isNaN(d.ts))
+      .sort((a, b) => a.ts - b.ts);
+
+    if (sorted.length === 0) {
+      return { bins: [] as { bucket: string; ts: number; count: number }[], maxCount: 0, xScale: null, barWidth: 0 };
+    }
+
+    const minTime = sorted[0].ts;
+    const maxTime = sorted[sorted.length - 1].ts;
+    const mc = Math.max(...sorted.map(e => e.count), 1);
+
+    try {
+      const { scaleLinear } = require('d3-scale');
+      const padding = 16;
+      const chartWidth = width - padding * 2;
+      const scale = scaleLinear()
+        .domain([minTime, maxTime + 3_600_000])
+        .range([padding, padding + chartWidth]);
+      const bw = Math.max(2, chartWidth / Math.max(sorted.length, 1) - 1);
+      return { bins: sorted, maxCount: mc, xScale: scale, barWidth: bw };
+    } catch {
+      return { bins: sorted, maxCount: mc, xScale: null, barWidth: 0 };
+    }
+  }, [data, width]);
+
+  if (bins.length === 0) {
+    return (
+      <View style={{ height, justifyContent: 'center', alignItems: 'center' }}>
+        <Text style={{ color: '#9ca3af', fontSize: 12 }}>No event data</Text>
+      </View>
+    );
+  }
+
+  const barHeight = height - 32;
+
+  const handleBrush = (extent: [unknown, unknown] | null) => {
+    if (!extent) {
+      onBrush(null);
+      return;
+    }
+    // Convert epoch ms back to ISO strings for the server
+    const start = new Date(extent[0] as number).toISOString();
+    const end = new Date(extent[1] as number).toISOString();
+    onBrush([start, end]);
+  };
+
+  // Format time labels
+  const firstTime = new Date(bins[0].ts);
+  const lastTime = new Date(bins[bins.length - 1].ts);
+  const formatTime = (d: Date) => {
+    try {
+      const { timeFormat } = require('d3-time-format');
+      return timeFormat('%b %d %H:%M')(d);
+    } catch {
+      return d.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+    }
+  };
+
+  return (
+    <View style={{ marginTop: 16 }}>
+      <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
+        {title ?? 'Events Over Time'}
+      </Text>
+      <View style={{ position: 'relative', height, width }}>
+        {/* Bars */}
+        {xScale ? (
+          <View style={{ position: 'absolute', top: 0, left: 0, width, height: barHeight }}>
+            {bins.map((bin) => {
+              const x = xScale(bin.ts);
+              const h = Math.max(2, (bin.count / maxCount) * barHeight);
+              return (
+                <View
+                  key={bin.bucket}
+                  style={{
+                    position: 'absolute',
+                    left: x,
+                    bottom: 0,
+                    width: barWidth,
+                    height: h,
+                    backgroundColor: bin.count > maxCount * 0.7 ? '#ef4444' : '#6366f1',
+                    borderRadius: 2,
+                  }}
+                />
+              );
+            })}
+          </View>
+        ) : (
+          <View style={{
+            flexDirection: 'row', alignItems: 'flex-end', height: barHeight, gap: 1,
+            paddingHorizontal: 16,
+          }}>
+            {bins.map((bin) => (
+              <View
+                key={bin.bucket}
+                style={{
+                  flex: 1,
+                  height: Math.max(2, (bin.count / maxCount) * barHeight),
+                  backgroundColor: bin.count > maxCount * 0.7 ? '#ef4444' : '#6366f1',
+                  borderRadius: 2,
+                }}
+              />
+            ))}
+          </View>
+        )}
+
+        {/* Brush overlay */}
+        {xScale && (
+          <Brush
+            xScale={xScale}
+            width={width}
+            height={barHeight}
+            onBrush={handleBrush}
+          />
+        )}
+
+        {/* Time labels */}
+        <View style={{
+          flexDirection: 'row', justifyContent: 'space-between',
+          paddingHorizontal: 16, marginTop: 4,
+          position: 'absolute', bottom: 0, left: 0, right: 0,
+        }}>
+          <Text style={{ fontSize: 10, color: '#9ca3af' }}>{formatTime(firstTime)}</Text>
+          <Text style={{ fontSize: 10, color: '#9ca3af' }}>{formatTime(lastTime)}</Text>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/context.ts

@@ -0,0 +1,75 @@
+/**
+ * createAdminContext
+ *
+ * Creates a RequireContext-compatible object for expo-router's virtual routing.
+ * This allows the admin package to define routes without filesystem files.
+ *
+ * Based on expo-router's testing-library implementation of inMemoryContext.
+ */
+
+import type { AdminConfig } from './types';
+import React from 'react';
+import { AdminLayout } from './screens/AdminLayout';
+import { AdminDashboard } from './screens/AdminDashboard';
+import { ResourceList } from './screens/ResourceList';
+import { ResourceShow } from './screens/ResourceShow';
+import { ResourceCreate } from './screens/ResourceCreate';
+import { ResourceEdit } from './screens/ResourceEdit';
+
+// =============================================================================
+// RequireContext Types
+// =============================================================================
+
+/**
+ * Webpack/Metro RequireContext interface
+ * This is what expo-router expects for route resolution
+ */
+export interface RequireContext {
+  (id: string): { default: React.ComponentType<unknown> } | undefined;
+  keys(): string[];
+  resolve(id: string): string;
+  id: string;
+}
+
+// =============================================================================
+// Context Creation
+// =============================================================================
+
+/**
+ * Creates a RequireContext from an AdminConfig
+ *
+ * The context generates routes for:
+ * - _layout.js - Main admin layout
+ * - index.js - Dashboard
+ * - [resource]/index.js - Resource list (dynamic route)
+ * - [resource]/[id].js - Resource show (dynamic route)
+ * - [resource]/create.js - Resource create
+ * - [resource]/[id]/edit.js - Resource edit
+ */
+export function createAdminContext(config: AdminConfig): RequireContext {
+  // Build the module map
+  const modules: Record<string, { default: React.ComponentType<unknown> }> = {
+    './_layout.js': { default: AdminLayout as React.ComponentType<unknown> },
+    './index.js': { default: AdminDashboard as React.ComponentType<unknown> },
+    './[resource]/index.js': { default: ResourceList as React.ComponentType<unknown> },
+    './[resource]/[id].js': { default: ResourceShow as React.ComponentType<unknown> },
+    './[resource]/create.js': { default: ResourceCreate as React.ComponentType<unknown> },
+    './[resource]/[id]/edit.js': { default: ResourceEdit as React.ComponentType<unknown> },
+  };
+
+  // Create the context function
+  const context = ((id: string) => {
+    return modules[id];
+  }) as RequireContext;
+
+  // Add keys() - returns all module paths
+  context.keys = () => Object.keys(modules);
+
+  // Add resolve() - returns the resolved path
+  context.resolve = (id: string) => id;
+
+  // Add id - unique identifier for this context
+  context.id = `admin-context-${config.basePath || '/admin'}`;
+
+  return context;
+}

package/src/hooks/useAdminConfig.ts

@@ -0,0 +1,22 @@
+/**
+ * useAdminConfig hook
+ *
+ * Provides access to the admin configuration from context.
+ */
+
+import { createContext, useContext } from 'react';
+import type { AdminConfig } from '../types';
+
+export interface AdminConfigContextValue {
+  config: AdminConfig;
+}
+
+export const AdminConfigContext = createContext<AdminConfigContextValue | null>(null);
+
+export function useAdminConfig(): AdminConfig {
+  const context = useContext(AdminConfigContext);
+  if (!context) {
+    throw new Error('useAdminConfig must be used within an AdminConfigProvider');
+  }
+  return context.config;
+}

package/src/hooks/useAdminData.ts

@@ -0,0 +1,132 @@
+/**
+ * useAdminData hook
+ *
+ * Provides data fetching capabilities using the configured DataAdapter.
+ */
+
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import type { DataAdapter } from '../adapters/types';
+import type { ListParams, DataRecord } from '../types';
+
+// =============================================================================
+// Context
+// =============================================================================
+
+export interface DataAdapterContextValue {
+  adapter: DataAdapter;
+}
+
+export const DataAdapterContext = createContext<DataAdapterContextValue | null>(null);
+
+export function useDataAdapter(): DataAdapter {
+  const context = useContext(DataAdapterContext);
+  if (!context) {
+    throw new Error('useDataAdapter must be used within a DataAdapterProvider');
+  }
+  return context.adapter;
+}
+
+// =============================================================================
+// useAdminData Hook
+// =============================================================================
+
+export interface UseAdminDataOptions extends ListParams {
+  /** Skip initial fetch */
+  skip?: boolean;
+}
+
+export interface UseAdminDataResult<T extends DataRecord = DataRecord> {
+  /** Fetched data */
+  data: T[];
+  /** Total record count */
+  total: number;
+  /** Loading state */
+  loading: boolean;
+  /** Error state */
+  error: Error | null;
+  /** Refetch data */
+  refetch: () => Promise<void>;
+  /** Current page */
+  page: number;
+  /** Items per page */
+  perPage: number;
+  /** Set page */
+  setPage: (page: number) => void;
+  /** Set items per page */
+  setPerPage: (perPage: number) => void;
+  /** Set sort */
+  setSort: (field: string, order?: 'asc' | 'desc') => void;
+  /** Set filter */
+  setFilter: (filter: Record<string, unknown>) => void;
+}
+
+export function useAdminData<T extends DataRecord = DataRecord>(
+  resource: string,
+  options: UseAdminDataOptions = {}
+): UseAdminDataResult<T> {
+  const adapter = useDataAdapter();
+  const [data, setData] = useState<T[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(!options.skip);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Params state
+  const [page, setPage] = useState(options.page ?? 1);
+  const [perPage, setPerPage] = useState(options.perPage ?? 10);
+  const [sort, setSortState] = useState(options.sort);
+  const [order, setOrder] = useState(options.order ?? 'asc');
+  const [filter, setFilterState] = useState(options.filter ?? {});
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await adapter.fetchList<T>(resource, {
+        page,
+        perPage,
+        sort,
+        order,
+        filter,
+        search: options.search,
+      });
+
+      setData(result.data);
+      setTotal(result.total);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [adapter, resource, page, perPage, sort, order, filter, options.search]);
+
+  useEffect(() => {
+    if (!options.skip) {
+      fetchData();
+    }
+  }, [fetchData, options.skip]);
+
+  const setSort = useCallback((field: string, newOrder?: 'asc' | 'desc') => {
+    setSortState(field);
+    setOrder(newOrder ?? 'asc');
+  }, []);
+
+  const setFilter = useCallback((newFilter: Record<string, unknown>) => {
+    setFilterState(newFilter);
+    setPage(1); // Reset to first page when filter changes
+  }, []);
+
+  return {
+    data,
+    total,
+    loading,
+    error,
+    refetch: fetchData,
+    page,
+    perPage,
+    setPage,
+    setPerPage,
+    setSort,
+    setFilter,
+  };
+}