@everystack/admin 0.1.0

package/src/screens/AdminLayout.tsx

@@ -0,0 +1,97 @@
+/**
+ * AdminLayout
+ *
+ * Main admin layout with sidebar navigation and content area.
+ * Reads menu items from AdminConfig via useAdminConfig().
+ */
+
+import React, { useState } from 'react';
+import { View, Text, Pressable, ScrollView } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import type { MenuItem } from '../types';
+
+export interface AdminLayoutProps {
+  children?: React.ReactNode;
+  /** Currently active menu item ID */
+  activeItem?: string;
+  /** Called when a menu item is pressed */
+  onNavigate?: (item: MenuItem) => void;
+}
+
+export function AdminLayout({ children, activeItem, onNavigate }: AdminLayoutProps): React.ReactElement {
+  const config = useAdminConfig();
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  return (
+    <View className="flex-1 flex-row bg-gray-50">
+      {/* Sidebar */}
+      {sidebarOpen && (
+        <View className="w-64 bg-white border-r border-gray-200">
+          {/* Header */}
+          <View className="px-4 py-5 border-b border-gray-200">
+            <Text className="text-lg font-bold text-gray-900">{config.title}</Text>
+            {config.subtitle && (
+              <Text className="text-xs text-gray-500 mt-0.5">{config.subtitle}</Text>
+            )}
+          </View>
+
+          {/* Menu */}
+          <ScrollView className="flex-1 py-2">
+            {config.menu?.map(item => (
+              <MenuItemRow
+                key={item.id}
+                item={item}
+                active={activeItem === item.id}
+                onPress={onNavigate}
+              />
+            ))}
+          </ScrollView>
+        </View>
+      )}
+
+      {/* Main content */}
+      <View className="flex-1">
+        {/* Top bar */}
+        <View className="flex-row items-center px-4 py-3 bg-white border-b border-gray-200">
+          <Pressable
+            className="p-2 rounded-lg mr-2"
+            onPress={() => setSidebarOpen(!sidebarOpen)}
+          >
+            <Text className="text-lg text-gray-600">{sidebarOpen ? '\u2190' : '\u2192'}</Text>
+          </Pressable>
+        </View>
+
+        {/* Content */}
+        <View className="flex-1">{children}</View>
+      </View>
+    </View>
+  );
+}
+
+// =============================================================================
+// MenuItemRow
+// =============================================================================
+
+interface MenuItemRowProps {
+  item: MenuItem;
+  active: boolean;
+  onPress?: (item: MenuItem) => void;
+}
+
+function MenuItemRow({ item, active, onPress }: MenuItemRowProps): React.ReactElement {
+  return (
+    <Pressable
+      className={active ? "flex-row items-center px-4 py-2.5 mx-2 rounded-lg bg-blue-50" : "flex-row items-center px-4 py-2.5 mx-2 rounded-lg"}
+      onPress={() => onPress?.(item)}
+    >
+      <Text className={active ? "text-sm text-blue-700 font-semibold" : "text-sm text-gray-700"}>
+        {item.label}
+      </Text>
+      {item.badge != null && (
+        <View className="ml-auto bg-gray-200 rounded-full px-2 py-0.5">
+          <Text className="text-xs text-gray-600">{String(item.badge)}</Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}

package/src/screens/ResourceCreate.tsx

@@ -0,0 +1,243 @@
+/**
+ * ResourceCreate
+ *
+ * Create form for a resource. Generates form inputs based on ResourceConfig.fields.
+ * Field type determines which input component is used.
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import { useDataAdapter } from '../hooks/useAdminData';
+import { FormField, TextInput, SelectInput, SwitchInput, Button, ErrorState } from '@everystack/ui';
+import { ImageFieldInput } from '../components/ImageFieldInput';
+import { AvatarFieldInput } from '../components/AvatarFieldInput';
+import type { FieldDefinition } from '../types';
+
+export interface ResourceCreateProps {
+  /** Resource name */
+  resource: string;
+  /** Called after successful creation with the new record */
+  onSuccess?: (record: Record<string, unknown>) => void;
+  /** Called when the cancel button is pressed */
+  onCancel?: () => void;
+}
+
+export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreateProps): React.ReactElement {
+  const config = useAdminConfig();
+  const adapter = useDataAdapter();
+  const resourceConfig = config.resources.find(r => r.name === resource);
+
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const fields = useMemo(() => {
+    if (!resourceConfig) return [];
+    const fieldNames = resourceConfig.createFields ?? resourceConfig.fields.map(f => f.name);
+    const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
+    return fieldNames
+      .map(name => fieldMap.get(name))
+      .filter((f): f is FieldDefinition => f != null)
+      .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id'));
+  }, [resourceConfig]);
+
+  const setFieldValue = useCallback((name: string, value: unknown) => {
+    setFormData(prev => ({ ...prev, [name]: value }));
+    setErrors(prev => {
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+
+  const validate = useCallback((): boolean => {
+    const newErrors: Record<string, string> = {};
+    for (const field of fields) {
+      const value = formData[field.name];
+      if (field.validation?.required && (value == null || value === '')) {
+        newErrors[field.name] = field.validation.message ?? `${field.label ?? field.name} is required`;
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [fields, formData]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!validate()) return;
+
+    setSubmitting(true);
+    setSubmitError(null);
+
+    try {
+      const record = await adapter.create(resource, formData as Record<string, unknown> & { id?: never });
+      onSuccess?.(record);
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  }, [adapter, resource, formData, validate, onSuccess]);
+
+  if (!resourceConfig) {
+    return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
+  }
+
+  const label = resourceConfig.label ?? resourceConfig.name;
+
+  return (
+    <ScrollView className="flex-1">
+      {/* Header */}
+      <View className="flex-row items-center justify-between px-4 py-4">
+        <Text className="text-xl font-bold text-gray-900">Create {label}</Text>
+        <View className="flex-row gap-2">
+          {onCancel && (
+            <Button label="Cancel" variant="ghost" onPress={onCancel} />
+          )}
+          <Button label="Create" onPress={handleSubmit} loading={submitting} />
+        </View>
+      </View>
+
+      {/* Error */}
+      {submitError && (
+        <View className="mx-4 mb-4 bg-red-50 border border-red-200 rounded-lg px-4 py-3">
+          <Text className="text-sm text-red-700">{submitError}</Text>
+        </View>
+      )}
+
+      {/* Form fields */}
+      <View className="px-4">
+        {fields.map(field => (
+          <FieldInput
+            key={field.name}
+            field={field}
+            value={formData[field.name]}
+            error={errors[field.name]}
+            onChange={value => setFieldValue(field.name, value)}
+          />
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+// =============================================================================
+// FieldInput — maps FieldDefinition.type to input component
+// =============================================================================
+
+interface FieldInputProps {
+  field: FieldDefinition;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}
+
+function FieldInput({ field, value, error, onChange }: FieldInputProps): React.ReactElement {
+  const label = field.label ?? field.name;
+  const required = field.validation?.required;
+
+  switch (field.type) {
+    case 'boolean':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <SwitchInput
+            value={Boolean(value)}
+            onValueChange={onChange}
+          />
+        </FormField>
+      );
+
+    case 'enum':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <SelectInput
+            value={String(value ?? '')}
+            options={(field.enumValues ?? []).map(v => ({ label: v, value: v }))}
+            onValueChange={onChange}
+            placeholder={`Select ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'number':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={value != null ? String(value) : ''}
+            onChangeText={text => onChange(text ? Number(text) : null)}
+            keyboardType="numeric"
+            placeholder={`Enter ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'email':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            keyboardType="email-address"
+            placeholder={`Enter ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'url':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            keyboardType="url"
+            placeholder={`Enter ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'json':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={typeof value === 'string' ? value : JSON.stringify(value ?? '', null, 2)}
+            onChangeText={text => {
+              try { onChange(JSON.parse(text)); } catch { onChange(text); }
+            }}
+            multiline
+            placeholder="{}"
+          />
+        </FormField>
+      );
+
+    case 'image':
+      if (field.renderer === 'avatar') {
+        return <AvatarFieldInput field={field} value={value} error={error} onChange={onChange} />;
+      }
+      return <ImageFieldInput field={field} value={value} error={error} onChange={onChange} />;
+
+    case 'file':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            keyboardType="url"
+            placeholder="Enter file URL"
+          />
+        </FormField>
+      );
+
+    default:
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            placeholder={`Enter ${label.toLowerCase()}`}
+            multiline={field.type === 'string' && (field.validation?.max ?? 0) > 255}
+          />
+        </FormField>
+      );
+  }
+}

package/src/screens/ResourceDashboard.tsx

@@ -0,0 +1,278 @@
+/**
+ * ResourceDashboard — Config-driven dashboard for any resource.
+ *
+ * Reads ResourceDashboardConfig from the AdminConfig context and renders:
+ *   1. StatDials (N configurable stat circles)
+ *   2. TimeHistogram (brushable time series)
+ *   3. Dimension charts (bars or donut per config)
+ *   4. EventTable (paginated, searchable, sortable)
+ *
+ * All data comes from two server-side RPC endpoints:
+ *   - {prefix}DashboardData → aggregates
+ *   - {prefix}EventList → paginated rows
+ *
+ * The resource name determines the RPC prefix (snake_case → camelCase).
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { View, Text, ScrollView, Pressable, useWindowDimensions } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import { useRpc } from '../hooks/useRpc';
+import { StatDials } from '../components/dashboard/StatDials';
+import { TimeHistogram } from '../components/dashboard/TimeHistogram';
+import { DimensionBars } from '../components/dashboard/DimensionBars';
+import { DimensionDonut } from '../components/dashboard/DimensionDonut';
+import { EventTable } from '../components/dashboard/EventTable';
+import type { ResourceDashboardConfig } from '../types';
+import type { DashboardFilters, DashboardAggregates } from '../rpc/resource-dashboard-rpc';
+
+export interface ResourceDashboardProps {
+  /** Resource name — must match a ResourceConfig with .dashboard defined */
+  resource: string;
+  /** API base URL for RPC calls */
+  baseUrl: string;
+  /** Auth token provider */
+  getToken?: () => string | null | Promise<string | null>;
+  /** Called when a row is pressed in the event table */
+  onRowPress?: (record: Record<string, unknown>) => void;
+  /** Optional action button in the header */
+  action?: { label: string; onPress: () => void };
+}
+
+function toCamelCase(snakeCase: string): string {
+  return snakeCase.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+export function ResourceDashboard({
+  resource,
+  baseUrl,
+  getToken,
+  onRowPress,
+  action,
+}: ResourceDashboardProps): React.ReactElement {
+  const config = useAdminConfig();
+  const resourceConfig = config.resources.find(r => r.name === resource);
+  const dashboard = resourceConfig?.dashboard;
+
+  if (!dashboard) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 32 }}>
+        <Text style={{ color: '#6b7280', fontSize: 14 }}>
+          No dashboard configuration found for &quot;{resource}&quot;
+        </Text>
+      </View>
+    );
+  }
+
+  const displayTitle = dashboard.title ?? resourceConfig?.labelPlural ?? resource;
+
+  return (
+    <ResourceDashboardInner
+      resource={resource}
+      dashboard={dashboard}
+      displayTitle={displayTitle}
+      baseUrl={baseUrl}
+      getToken={getToken}
+      onRowPress={onRowPress}
+      action={action}
+    />
+  );
+}
+
+// Inner component with dashboard config guaranteed
+function ResourceDashboardInner({
+  resource,
+  dashboard,
+  displayTitle,
+  baseUrl,
+  getToken,
+  onRowPress,
+  action,
+}: {
+  resource: string;
+  dashboard: ResourceDashboardConfig;
+  displayTitle: string;
+  baseUrl: string;
+  getToken?: () => string | null | Promise<string | null>;
+  onRowPress?: (record: Record<string, unknown>) => void;
+  action?: { label: string; onPress: () => void };
+}): React.ReactElement {
+  const { width: windowWidth } = useWindowDimensions();
+  const chartWidth = Math.min(windowWidth - 48, 800);
+
+  const prefix = toCamelCase(resource);
+  const dashboardDataFn = `${prefix}DashboardData`;
+  const eventListFn = `${prefix}EventList`;
+
+  // Filter state — keyed by dimension columns
+  const [filters, setFilters] = useState<DashboardFilters>({});
+
+  const hours = dashboard.defaultHours ?? 168;
+
+  const body = useMemo(() => ({
+    hours,
+    filters,
+  }), [hours, filters]);
+
+  const { data, loading } = useRpc<DashboardAggregates>({
+    baseUrl,
+    fn: dashboardDataFn,
+    body,
+    getToken,
+  });
+
+  // Handle time brush
+  const handleTimeBrush = useCallback((extent: [string, string] | null) => {
+    setFilters(prev => {
+      const next = { ...prev };
+      if (extent) {
+        next.time = extent;
+      } else {
+        delete next.time;
+      }
+      return next;
+    });
+  }, []);
+
+  // Handle dimension filter toggle
+  const handleDimensionFilter = useCallback((column: string, value: string) => {
+    setFilters(prev => {
+      const next = { ...prev };
+      const current = (next[column] as string[] | undefined) ?? [];
+      if (current.includes(value)) {
+        const filtered = current.filter(v => v !== value);
+        if (filtered.length === 0) {
+          delete next[column];
+        } else {
+          next[column] = filtered;
+        }
+      } else {
+        next[column] = [...current, value];
+      }
+      return next;
+    });
+  }, []);
+
+  // Clear all filters
+  const handleClearFilters = useCallback(() => {
+    setFilters({});
+  }, []);
+
+  const hasFilters = Object.keys(filters).length > 0;
+
+  // Build stat dials from config + data
+  const dials = useMemo(() => {
+    if (!data?.stats) return dashboard.stats.map(s => ({
+      label: s.label,
+      value: 0,
+      color: s.color,
+      ratio: undefined as number | undefined,
+    }));
+
+    const total = data.stats.total ?? data.stats[dashboard.stats[0]?.id] ?? 1;
+
+    return dashboard.stats.map(stat => {
+      const value = data.stats[stat.id] ?? 0;
+      let ratio: number | undefined;
+      if (stat.ratio === 'of_total' && total > 0 && stat.id !== 'total') {
+        ratio = value / total;
+      } else if (typeof stat.ratio === 'number') {
+        ratio = stat.ratio;
+      }
+      return { label: stat.label, value, color: stat.color, ratio };
+    });
+  }, [data?.stats, dashboard.stats]);
+
+  // Build event table columns from config
+  const tableColumns = useMemo(() => {
+    return dashboard.listColumns.map(col => ({
+      key: col,
+      label: col.charAt(0).toUpperCase() + col.slice(1).replace(/_/g, ' '),
+      flex: col === 'message' ? 3 : col === 'timestamp' ? 1.5 : 1,
+    }));
+  }, [dashboard.listColumns]);
+
+  return (
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, paddingBottom: 48 }}>
+      {/* Header */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <View>
+          <Text style={{ fontSize: 20, fontWeight: '700', color: '#0f172a' }}>
+            {displayTitle}
+          </Text>
+          {hasFilters && (
+            <Pressable onPress={handleClearFilters} style={{ marginTop: 4 }}>
+              <Text style={{ fontSize: 12, color: '#6366f1' }}>Clear all filters</Text>
+            </Pressable>
+          )}
+        </View>
+        {action && (
+          <Pressable
+            onPress={action.onPress}
+            style={{
+              paddingHorizontal: 16, paddingVertical: 8,
+              backgroundColor: '#6366f1', borderRadius: 6,
+            }}
+          >
+            <Text style={{ color: '#ffffff', fontSize: 13, fontWeight: '600' }}>{action.label}</Text>
+          </Pressable>
+        )}
+      </View>
+
+      {/* Stat Dials */}
+      <StatDials dials={dials} />
+
+      {/* Time Histogram */}
+      <TimeHistogram
+        data={data?.timeHistogram ?? []}
+        width={chartWidth}
+        title={dashboard.title ? `${dashboard.title} Over Time` : undefined}
+        onBrush={handleTimeBrush}
+      />
+
+      {/* Dimension Charts */}
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 24, marginTop: 24 }}>
+        {dashboard.dimensions.map(dim => {
+          const dimData = data?.dimensions?.[dim.column] ?? [];
+          const activeFilters = (filters[dim.column] as string[] | undefined) ?? [];
+
+          if (dim.chartType === 'donut') {
+            return (
+              <DimensionDonut
+                key={dim.column}
+                title={dim.label}
+                data={dimData}
+                colors={dim.colors}
+                order={dim.order}
+                activeFilters={activeFilters}
+                onFilter={(value) => handleDimensionFilter(dim.column, value)}
+              />
+            );
+          }
+
+          return (
+            <DimensionBars
+              key={dim.column}
+              title={dim.label}
+              data={dimData}
+              colors={dim.colors}
+              activeFilters={activeFilters}
+              onFilter={(value) => handleDimensionFilter(dim.column, value)}
+            />
+          );
+        })}
+      </View>
+
+      {/* Event Table */}
+      <EventTable
+        baseUrl={baseUrl}
+        rpcFn={eventListFn}
+        columns={tableColumns}
+        filters={filters}
+        getToken={getToken}
+        onRowPress={dashboard.linkToDetail !== false ? onRowPress : undefined}
+        defaultSort={dashboard.timestampColumn}
+      />
+    </ScrollView>
+  );
+}