@everystack/admin 0.2.3 → 0.2.6

package/src/screens/AdminShell.tsx

@@ -0,0 +1,66 @@
+/**
+ * AdminShell
+ *
+ * The admin chrome, router-agnostic. Wraps the providers (AdminRoot) and the
+ * sidebar layout (AdminLayout), wiring the menu's navigation to the app's
+ * router port and highlighting the active item from the current path. The app
+ * renders this once in its admin _layout with `<Slot/>` as children.
+ */
+
+import React from 'react';
+import type { AdminConfig, MenuItem, EditorRegistry } from '../types';
+import type { DataAdapter } from '../adapters/types';
+import { AdminRoot } from '../AdminRoot';
+import { AdminLayout } from './AdminLayout';
+import { adminHref, pathToSegments, resolveAdminRoute } from '../utils/admin-routing';
+import { buildBreadcrumbs } from '../utils/breadcrumbs';
+import type { AdminNavigator } from './AdminRouter';
+
+export interface AdminShellProps {
+  config: AdminConfig;
+  adapter: DataAdapter;
+  /** Navigation port — the app's router (expo-router's useRouter() fits). */
+  router: AdminNavigator;
+  /** Current path, e.g. expo-router's usePathname(). */
+  pathname: string;
+  /** Editor adapters available to fields via `field.editor` (opt-in plugins). */
+  editors?: EditorRegistry;
+  /** Mount point of the admin. Default '/admin'. */
+  basePath?: string;
+  children?: React.ReactNode;
+}
+
+export function AdminShell({
+  config,
+  adapter,
+  router,
+  pathname,
+  editors,
+  basePath = '/admin',
+  children,
+}: AdminShellProps): React.ReactElement {
+  const segments = pathToSegments(pathname, basePath);
+  const activeItem = segments[0] ?? config.dashboards?.[0]?.id ?? config.menu?.[0]?.id;
+  const match = resolveAdminRoute(segments);
+  const breadcrumbs = buildBreadcrumbs(config, match, activeItem, basePath);
+
+  const onNavigate = (item: MenuItem) => {
+    if (item.path === '#') return; // divider / non-navigable
+    if (item.dashboard) router.push(basePath);
+    else if (item.resource) router.push(adminHref(basePath, { resource: item.resource }));
+    else if (item.path) router.push(item.path);
+  };
+
+  return (
+    <AdminRoot config={config} adapter={adapter} editors={editors}>
+      <AdminLayout
+        activeItem={activeItem}
+        onNavigate={onNavigate}
+        breadcrumbs={breadcrumbs}
+        onNavigatePath={path => router.push(path)}
+      >
+        {children}
+      </AdminLayout>
+    </AdminRoot>
+  );
+}

package/src/screens/ResourceCreate.tsx

@@ -9,6 +9,8 @@ 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 { useEditors } from '../hooks/useEditors';
+import { editorFor } from '../utils/render-resolution';
 import { FormField, TextInput, SelectInput, SwitchInput, Button, ErrorState } from '@everystack/ui';
 import { ImageFieldInput } from '../components/ImageFieldInput';
 import { AvatarFieldInput } from '../components/AvatarFieldInput';
@@ -134,6 +136,17 @@ interface FieldInputProps {
 }
 
 function FieldInput({ field, value, error, onChange }: FieldInputProps): React.ReactElement {
+  const editors = useEditors();
+
+  // Resolution: inline input → registered editor → type-based default.
+  if (field.input) {
+    return <>{field.input({ value, onChange, field, error })}</>;
+  }
+  const Editor = editorFor(field, editors);
+  if (Editor) {
+    return <>{Editor({ value, onChange, field, format: field.format ?? 'html', error })}</>;
+  }
+
   const label = field.label ?? field.name;
   const required = field.validation?.required;
 

package/src/screens/ResourceEdit.tsx

@@ -9,6 +9,8 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
+import { useEditors } from '../hooks/useEditors';
+import { editorFor } from '../utils/render-resolution';
 import { FormField, TextInput, SelectInput, SwitchInput, Button, LoadingState, ErrorState } from '@everystack/ui';
 import { ImageFieldInput } from '../components/ImageFieldInput';
 import { AvatarFieldInput } from '../components/AvatarFieldInput';
@@ -158,6 +160,7 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
             value={formData[field.name]}
             error={errors[field.name]}
             onChange={value => setFieldValue(field.name, value)}
+            record={record}
           />
         ))}
       </View>
@@ -174,9 +177,21 @@ interface EditFieldInputProps {
   value: unknown;
   error?: string;
   onChange: (value: unknown) => void;
+  record?: DataRecord;
 }
 
-function EditFieldInput({ field, value, error, onChange }: EditFieldInputProps): React.ReactElement {
+function EditFieldInput({ field, value, error, onChange, record }: EditFieldInputProps): React.ReactElement {
+  const editors = useEditors();
+
+  // Resolution: inline input → registered editor → type-based default.
+  if (field.input) {
+    return <>{field.input({ value, onChange, field, record, error })}</>;
+  }
+  const Editor = editorFor(field, editors);
+  if (Editor) {
+    return <>{Editor({ value, onChange, field, format: field.format ?? 'html', error })}</>;
+  }
+
   const label = field.label ?? field.name;
   const required = field.validation?.required;
 

package/src/screens/ResourceList.tsx

@@ -8,22 +8,36 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, Text } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
-import { useAdminData } from '../hooks/useAdminData';
+import { useAdminData, useDataAdapter } from '../hooks/useAdminData';
 import { DataTable, FilterBar, PaginationBar, LoadingState, ErrorState, EmptyState, Button, type DataTableColumn } from '@everystack/ui';
 import { formatCellValue } from '../utils/format-cell-value';
-import type { ResourceConfig, FieldDefinition } from '../types';
+import { cellRenderKind } from '../utils/render-resolution';
+import { visibleRowActions } from '../utils/row-actions';
+import { standardRowActions } from '../utils/standard-actions';
+import { ImageDisplay } from '../components/ImageDisplay';
+import { RowActionButton } from '../components/RowActionButton';
+import type { DataAdapter } from '../adapters/types';
+import type { ResourceConfig, FieldDefinition, DataRecord, RowActionConfig } from '../types';
 
 export interface ResourceListProps {
   /** Resource name (matches ResourceConfig.name) */
   resource: string;
-  /** Called when a row is pressed */
+  /** Called when a row is pressed — also the built-in "Show" action target */
   onRowPress?: (record: Record<string, unknown>) => void;
+  /** Called when a row's built-in "Edit" action is pressed */
+  onEditPress?: (record: Record<string, unknown>) => void;
   /** Called when the create button is pressed */
   onCreatePress?: () => void;
+  /**
+   * Reactive filters merged beneath the search filter (e.g. an analytics-header
+   * time range or segment). Memoize at the call site.
+   */
+  baseFilter?: Record<string, unknown>;
 }
 
-export function ResourceList({ resource, onRowPress, onCreatePress }: ResourceListProps): React.ReactElement {
+export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress, baseFilter }: ResourceListProps): React.ReactElement {
   const config = useAdminConfig();
+  const adapter = useDataAdapter();
   const resourceConfig = config.resources.find(r => r.name === resource);
 
   const defaultSort = resourceConfig?.defaultSort;
@@ -41,13 +55,23 @@ export function ResourceList({ resource, onRowPress, onCreatePress }: ResourceLi
   } = useAdminData(resource, {
     sort: defaultSort?.field,
     order: defaultSort?.order,
+    baseFilter,
   });
 
-  // Build columns from field definitions
+  // Build columns from field definitions, plus an actions column combining the
+  // built-in Show/Edit/Delete (gated by actions.*) with any custom rowActions.
   const columns = useMemo(() => {
     if (!resourceConfig) return [];
-    return fieldsToColumns(resourceConfig, defaultSort?.field, defaultSort?.order);
-  }, [resourceConfig, defaultSort?.field, defaultSort?.order]);
+    const cols = fieldsToColumns(resourceConfig);
+    const actions = [
+      ...standardRowActions(resourceConfig, { onShow: onRowPress, onEdit: onEditPress }),
+      ...(resourceConfig.rowActions ?? []),
+    ];
+    if (actions.length) {
+      cols.push(actionsColumn(resourceConfig, actions, adapter, refetch));
+    }
+    return cols;
+  }, [resourceConfig, adapter, refetch, onRowPress, onEditPress]);
 
   // Build filter chips from filterable fields
   const filterChips = useMemo(() => {
@@ -114,7 +138,10 @@ export function ResourceList({ resource, onRowPress, onCreatePress }: ResourceLi
           columns={columns}
           data={data}
           onSort={handleSort}
-          onRowPress={onRowPress}
+          // A list-only resource (actions.show === false) has no detail screen —
+          // don't make rows navigate to a fetchOne that 404s. The row-action menu
+          // already hides "Show" via standardRowActions; this gates the whole-row tap.
+          onRowPress={resourceConfig?.actions?.show === false ? undefined : onRowPress}
         />
       )}
 
@@ -135,11 +162,7 @@ export function ResourceList({ resource, onRowPress, onCreatePress }: ResourceLi
 // Helpers
 // =============================================================================
 
-function fieldsToColumns(
-  resourceConfig: ResourceConfig,
-  _sortField?: string,
-  _sortOrder?: 'asc' | 'desc'
-): DataTableColumn[] {
+function fieldsToColumns(resourceConfig: ResourceConfig): DataTableColumn[] {
   const fieldNames = resourceConfig.listFields ?? resourceConfig.fields.map(f => f.name);
   const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
 
@@ -150,10 +173,61 @@ function fieldsToColumns(
       key: field.name,
       label: field.label ?? field.name,
       sortable: field.sortable,
-      render: (value: unknown) => (
+      render: cellRenderer(field),
+    }));
+}
+
+/**
+ * Cell rendering precedence: custom render → image thumbnail → type text.
+ * (See render-resolution.cellRenderKind.)
+ */
+function cellRenderer(field: FieldDefinition): DataTableColumn['render'] {
+  switch (cellRenderKind(field)) {
+    case 'custom':
+      return (value, record) => field.render!(value, record as DataRecord, { view: 'list' });
+    case 'image':
+      return (value) => <ImageDisplay field={field} value={value} view="list" />;
+    default:
+      return (value) => (
         <Text className="text-sm text-gray-900" numberOfLines={1}>
           {formatCellValue(field, value)}
         </Text>
-      ),
-    }));
+      );
+  }
+}
+
+/**
+ * A trailing column of per-row actions, each gated by its `when` clause.
+ * The cell claims the press so tapping an action doesn't also fire the row's
+ * onRowPress (navigate-to-detail).
+ */
+function actionsColumn(
+  resourceConfig: ResourceConfig,
+  actions: RowActionConfig[],
+  adapter: DataAdapter,
+  refetch: () => Promise<void> | void,
+): DataTableColumn {
+  const primaryKey = resourceConfig.primaryKey ?? 'id';
+  return {
+    key: '__actions',
+    label: 'Actions',
+    render: (_value, record) => {
+      const visible = visibleRowActions(actions, record);
+      if (!visible.length) return null;
+      return (
+        <View className="flex-row gap-2" onStartShouldSetResponder={() => true}>
+          {visible.map(action => (
+            <RowActionButton
+              key={action.id}
+              action={action}
+              record={record as DataRecord}
+              recordId={(record[primaryKey] as string | number) ?? (record.id as string | number)}
+              adapter={adapter}
+              refetch={refetch}
+            />
+          ))}
+        </View>
+      );
+    },
+  };
 }

package/src/screens/ResourceListView.tsx

@@ -0,0 +1,82 @@
+/**
+ * ResourceListView — the unified resource screen.
+ *
+ * Always a CRUD ResourceList (all records, paginated, Add/Edit/Delete). When the
+ * resource declares a `dashboard` config and the app supplied a baseUrl, an
+ * AnalyticsHeader (stats + counts-over-time + segments) renders on top, and its
+ * brush/segment selections filter the table beneath — one view, not two.
+ *
+ * Filter state lives in the URL query, so a filtered/scrubbed view is a direct
+ * link and drill-downs work (`/admin/log_events?level=error`, `?from=&to=`).
+ */
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import { useViewState } from '../hooks/useViewState';
+import { ResourceList } from './ResourceList';
+import { AnalyticsHeader } from '../components/AnalyticsHeader';
+import { paramsToFilters, filtersToParams, filtersToBaseFilter, paramsToColumnFilters } from '../utils/view-filters';
+
+export interface ResourceListViewProps {
+  resource: string;
+  baseUrl?: string;
+  getToken?: () => string | null | Promise<string | null>;
+  onRowPress?: (record: Record<string, unknown>) => void;
+  onEditPress?: (record: Record<string, unknown>) => void;
+  onCreatePress?: () => void;
+}
+
+export function ResourceListView({
+  resource,
+  baseUrl,
+  getToken,
+  onRowPress,
+  onEditPress,
+  onCreatePress,
+}: ResourceListViewProps): React.ReactElement {
+  const config = useAdminConfig();
+  const resourceConfig = config.resources.find(r => r.name === resource);
+  const dashboard = resourceConfig?.dashboard;
+  const { params, setParams } = useViewState();
+
+  const dimensions = dashboard?.dimensions ?? [];
+  const filters = useMemo(() => paramsToFilters(params, dimensions), [params, dimensions]);
+
+  // Table filters = analytics filters (time + dimensions) plus pass-through
+  // column filters from the URL (drill-downs by any resource field).
+  const baseFilter = useMemo(() => {
+    const fromAnalytics = dashboard ? filtersToBaseFilter(filters, dashboard) : undefined;
+    const fieldNames = new Set((resourceConfig?.fields ?? []).map(f => f.name));
+    const exclude = new Set(dimensions.map(d => d.column));
+    const passthrough = paramsToColumnFilters(params, fieldNames, exclude);
+    const merged = { ...fromAnalytics, ...passthrough };
+    return Object.keys(merged).length ? merged : undefined;
+  }, [filters, dashboard, params, resourceConfig, dimensions]);
+
+  const showHeader = Boolean(dashboard && baseUrl);
+
+  return (
+    <View className="flex-1">
+      {showHeader && (
+        <AnalyticsHeader
+          resource={resource}
+          dashboard={dashboard!}
+          baseUrl={baseUrl!}
+          getToken={getToken}
+          filters={filters}
+          onFiltersChange={next => setParams(filtersToParams(next, dimensions))}
+        />
+      )}
+      <View className="flex-1">
+        <ResourceList
+          resource={resource}
+          baseFilter={baseFilter}
+          onRowPress={onRowPress}
+          onEditPress={onEditPress}
+          onCreatePress={onCreatePress}
+        />
+      </View>
+    </View>
+  );
+}

package/src/screens/ResourceShow.tsx

@@ -5,15 +5,16 @@
  * Fetches via adapter.fetchOne() and displays field values.
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
 import { LoadingState, ErrorState, Button, Card, Divider } from '@everystack/ui';
 import { ImageDisplay } from '../components/ImageDisplay';
+import { RowActionButton } from '../components/RowActionButton';
 import { visibleRowActions } from '../utils/row-actions';
 import { toCamelCase } from '../utils/naming';
-import type { FieldDefinition, DataRecord, ResourceConfig, RowActionConfig } from '../types';
+import type { FieldDefinition, DataRecord, ResourceConfig } from '../types';
 import type { DataAdapter } from '../adapters/types';
 
 export interface ResourceShowProps {
@@ -89,7 +90,7 @@ export function ResourceShow({
       <View className="flex-row items-center justify-between px-4 py-4">
         <View className="flex-row items-center">
           {onBackPress && (
-            <Button label="\u2190 Back" variant="ghost" onPress={onBackPress} style={{ marginRight: 8 }} />
+            <Button label="← Back" variant="ghost" onPress={onBackPress} style={{ marginRight: 8 }} />
           )}
           <Text className="text-xl font-bold text-gray-900">
             {label} #{String(id)}
@@ -100,9 +101,10 @@ export function ResourceShow({
             <RowActionButton
               key={action.id}
               action={action}
+              record={record}
               recordId={id}
               adapter={adapter}
-              onDone={fetchRecord}
+              refetch={fetchRecord}
             />
           ))}
           {canEdit && onEditPress && (
@@ -123,7 +125,7 @@ export function ResourceShow({
           return (
             <React.Fragment key={fieldName}>
               {idx > 0 && <Divider />}
-              <FieldRow field={fieldDef} value={value} />
+              <FieldRow field={fieldDef} value={value} record={record} />
             </React.Fragment>
           );
         })}
@@ -147,7 +149,9 @@ async function fetchDetail(
   id: string | number,
   resourceConfig: ResourceConfig | undefined,
 ): Promise<DataRecord> {
-  if (resourceConfig?.dashboard?.detailVia === 'rpc') {
+  // detailVia may sit on the resource directly (a plain list with no dashboard,
+  // e.g. the audit log) or inside its dashboard (the observability screens).
+  if (resourceConfig?.detailVia === 'rpc' || resourceConfig?.dashboard?.detailVia === 'rpc') {
     if (!adapter.rpc) {
       throw new Error(`Resource "${resource}" uses detailVia: 'rpc' but the adapter has no rpc()`);
     }
@@ -156,82 +160,6 @@ async function fetchDetail(
   return adapter.fetchOne(resource, id);
 }
 
-// =============================================================================
-// RowActionButton
-// =============================================================================
-
-interface RowActionButtonProps {
-  action: RowActionConfig;
-  recordId: string | number;
-  adapter: DataAdapter;
-  onDone: () => Promise<void> | void;
-}
-
-/**
- * Two-tap confirm: actions with `confirm` swap their label on first press
- * and execute on the second. Cross-platform (no Alert/window.confirm),
- * resets after 3 seconds without the confirming press.
- */
-function RowActionButton({ action, recordId, adapter, onDone }: RowActionButtonProps): React.ReactElement {
-  const [confirming, setConfirming] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (resetTimer.current) clearTimeout(resetTimer.current);
-    };
-  }, []);
-
-  const execute = useCallback(async () => {
-    if (!adapter.rpc) {
-      setError('Adapter does not support RPC actions');
-      return;
-    }
-    setBusy(true);
-    setError(null);
-    try {
-      await adapter.rpc(action.rpc, { id: recordId });
-      await onDone();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setBusy(false);
-      setConfirming(false);
-    }
-  }, [adapter, action.rpc, recordId, onDone]);
-
-  const handlePress = useCallback(() => {
-    if (busy) return;
-    if (action.confirm && !confirming) {
-      setConfirming(true);
-      if (resetTimer.current) clearTimeout(resetTimer.current);
-      resetTimer.current = setTimeout(() => setConfirming(false), 3000);
-      return;
-    }
-    if (resetTimer.current) clearTimeout(resetTimer.current);
-    execute();
-  }, [busy, action.confirm, confirming, execute]);
-
-  const buttonLabel = busy ? '…' : confirming ? (action.confirm ?? action.label) : action.label;
-
-  return (
-    <View>
-      <Button
-        label={buttonLabel}
-        variant={action.variant ?? 'outline'}
-        onPress={handlePress}
-      />
-      {error && (
-        <Text className="text-xs text-red-600 mt-1" numberOfLines={2}>
-          {error}
-        </Text>
-      )}
-    </View>
-  );
-}
-
 // =============================================================================
 // FieldRow
 // =============================================================================
@@ -239,16 +167,19 @@ function RowActionButton({ action, recordId, adapter, onDone }: RowActionButtonP
 interface FieldRowProps {
   field: FieldDefinition;
   value: unknown;
+  record: DataRecord;
 }
 
-function FieldRow({ field, value }: FieldRowProps): React.ReactElement {
+function FieldRow({ field, value, record }: FieldRowProps): React.ReactElement {
   return (
     <View className="py-3">
       <Text className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
         {field.label ?? field.name}
       </Text>
-      {field.type === 'image' ? (
-        <ImageDisplay field={field} value={value} />
+      {field.render ? (
+        <>{field.render(value, record, { view: 'show' })}</>
+      ) : field.type === 'image' ? (
+        <ImageDisplay field={field} value={value} view="show" />
       ) : (
         <Text className="text-sm text-gray-900">{formatFieldValue(value, field)}</Text>
       )}

package/src/screens/index.ts

@@ -8,7 +8,13 @@
 export { AdminLayout, type AdminLayoutProps } from './AdminLayout';
 export { AdminDashboard, type AdminDashboardProps } from './AdminDashboard';
 export { ResourceList, type ResourceListProps } from './ResourceList';
+export { ResourceListView, type ResourceListViewProps } from './ResourceListView';
 export { ResourceShow, type ResourceShowProps } from './ResourceShow';
 export { ResourceCreate, type ResourceCreateProps } from './ResourceCreate';
 export { ResourceEdit, type ResourceEditProps } from './ResourceEdit';
+// ResourceDashboard is retained for backward-compat / direct use, but the router
+// now composes AnalyticsHeader + ResourceList via ResourceListView instead.
 export { ResourceDashboard, type ResourceDashboardProps } from './ResourceDashboard';
+export { AnalyticsHeader, type AnalyticsHeaderProps } from '../components/AnalyticsHeader';
+export { AdminRouter, type AdminRouterProps, type AdminNavigator } from './AdminRouter';
+export { AdminShell, type AdminShellProps } from './AdminShell';