@everystack/admin 0.4.5 → 0.4.7

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

@@ -15,8 +15,10 @@
  */
 
 import { sql, type SQL } from 'drizzle-orm';
-import { toCamelCaseKeys } from '../utils/naming';
-import type { ResourceDashboardConfig, DimensionConfig, StatDialConfig } from '../types';
+import { HandlerError } from '@everystack/api/errors';
+import { compileListFilter } from './list-filter';
+import { toCamelCaseKeys, toSnakeCase } from '../utils/naming';
+import type { ResourceDashboardConfig, DimensionConfig, StatDialConfig, WhereValues } from '../types';
 
 interface DbExecutor {
   execute(query: unknown): Promise<{ rows?: unknown[] } | unknown[]>;
@@ -80,6 +82,15 @@ export interface EventListResult {
 
 const TABLE_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]*)?$/;
 const COLUMN_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+const ERROR_COLUMN = /^[A-Za-z_][A-Za-z0-9_]{0,127}$/;
+
+function refuseOrder(column: unknown): never {
+  const safe = typeof column === 'string' && ERROR_COLUMN.exec(column)?.[0] === column;
+  throw new HandlerError(400, safe ? `Unknown order column: ${column}` : 'Unknown order column', {
+    code: 'invalid_order',
+    ...(safe ? { column } : {}),
+  });
+}
 
 function assertTable(name: string): void {
   if (!TABLE_PATTERN.test(name)) {
@@ -124,6 +135,7 @@ function buildWhereClause(
   config: ResourceDashboardConfig,
   filters: DashboardFilters,
   hours: number,
+  options: { timeBounded?: boolean; conditions?: SQL[] } = {},
 ): SQL {
   const conditions: SQL[] = [];
   const tsCol = config.timestampColumn;
@@ -137,7 +149,7 @@ function buildWhereClause(
   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 {
+  } else if (!options.timeBounded || filters.time !== undefined) {
     conditions.push(sql`${sql.raw(tsCol)} >= NOW() - INTERVAL '1 hour' * ${hours}`);
   }
 
@@ -160,6 +172,8 @@ function buildWhereClause(
     conditions.push(sql`${sql.raw(dim.column)} IN (${inList})`);
   }
 
+  conditions.push(...(options.conditions ?? []));
+
   if (conditions.length === 0) return sql`1=1`;
   if (conditions.length === 1) return conditions[0];
 
@@ -360,7 +374,9 @@ function createEventListHandler(
   config: ResourceDashboardConfig,
   db: DbExecutor,
 ): DashboardRpc {
-  const validSortColumns = new Set(config.listColumns);
+  const validSortColumns = new Set([...config.listColumns, config.timestampColumn]);
+  // Build the config-only column/alias map once, after factory validation.
+  compileListFilter(config, undefined);
 
   return async (body: unknown, _user?: unknown, _client?: unknown, tx?: DbExecutor) => {
     const exec = tx ?? db;
@@ -370,14 +386,20 @@ function createEventListHandler(
     const search = params.search as string | undefined;
     // Accept the EverystackAdapter listRpc param names (sort/dir) as aliases for the
     // EventTable names (sortBy/sortDir), so this handler serves both consumers.
-    const reqSort = (params.sortBy ?? params.sort) as string;
+    const reqSort = params.sortBy ?? params.sort;
     const reqDir = (params.sortDir ?? params.dir) as string;
-    const sortBy = validSortColumns.has(reqSort) ? reqSort : config.timestampColumn;
+    // The admin list sends the camelCase field name (durationMs) for the column duration_ms.
+    const reqColumn = typeof reqSort === 'string' ? toSnakeCase(reqSort) : undefined;
+    const sortBy = reqSort == null || reqSort === '' ? config.timestampColumn
+      : typeof reqSort === 'string' && validSortColumns.has(reqSort) ? reqSort
+      : reqColumn !== undefined && validSortColumns.has(reqColumn) ? reqColumn
+      : refuseOrder(reqSort);
     const sortDir = reqDir === '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);
+    const listFilter = compileListFilter(config, params.filter);
+    const where = buildWhereClause(config, filters, hours, listFilter);
 
     // Build search condition
     let searchCondition: SQL = sql`1=1`;
@@ -398,10 +420,14 @@ function createEventListHandler(
       ? (Array.isArray(config.primaryKey) ? config.primaryKey : [config.primaryKey])
       : ['id'];
     const allCols = [...new Set([...pkCols, ...config.listColumns])];
+    // These identifiers are unquoted in SQL, so PostgreSQL folds their case.
+    const hasTimestamp = allCols.some(column => column.toLowerCase() === config.timestampColumn.toLowerCase());
+    const filteredCols = hasTimestamp ? allCols : [...allCols, config.timestampColumn];
+    const resultCols = hasTimestamp ? '*' : allCols.join(', ');
 
     const result = await exec.execute(sql`
       WITH filtered AS (
-        SELECT ${sql.raw(allCols.join(', '))}
+        SELECT ${sql.raw(filteredCols.join(', '))}
         FROM ${sql.raw(tableName)}
         WHERE ${where} AND ${searchCondition}
       )
@@ -409,7 +435,7 @@ function createEventListHandler(
         (SELECT COUNT(*)::int FROM filtered) AS total,
         (SELECT COALESCE(json_agg(row_to_json(r)), '[]'::json)
          FROM (
-           SELECT * FROM filtered
+           SELECT ${sql.raw(resultCols)} FROM filtered
            ORDER BY ${sql.raw(sortBy)} ${sql.raw(sortDir)}
            LIMIT ${limit} OFFSET ${offset}
          ) r
@@ -520,25 +546,48 @@ export function createResourceDashboardRpcs(
   };
 }
 
+/**
+ * The dashboard's static where with the resource's `where` ANDed in. A `where` key is a field name
+ * as the API spells it, so a camelCase key becomes its snake_case column (a snake_case key is
+ * unchanged). The resource `where` wins on the same column, as it does on the list. With no
+ * resource `where`, the dashboard config is returned as is.
+ */
+function withResourceWhere(config: ResourceDashboardConfig, where: WhereValues | undefined): ResourceDashboardConfig {
+  const entries = Object.entries(where ?? {});
+  if (entries.length === 0) return config;
+  const forced = entries.map(([key, value]) => ({ column: toSnakeCase(key), equals: String(value) }));
+  const columns = new Set(forced.map(p => p.column));
+  return { ...config, where: [...(config.where ?? []).filter(p => !columns.has(p.column)), ...forced] };
+}
+
 /**
  * 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)
+ * The table is `dashboard.tableName`, else the resource `table`, else the resource name. When that
+ * is the resource's own table, the resource `where` is ANDed into every dashboard query, the event
+ * list and the event detail. When `dashboard.tableName` names another table, it is not: only
+ * `dashboard.where` applies.
+ *
+ * @param resources - Array of ResourceConfig (with optional .dashboard, .table and .where)
  * @param db - Drizzle db executor
  */
 export function createAllDashboardRpcs(
-  resources: Array<{ name: string; dashboard?: ResourceDashboardConfig }>,
+  resources: Array<{ name: string; table?: string; where?: WhereValues; dashboard?: ResourceDashboardConfig }>,
   db: DbExecutor,
 ): Record<string, DashboardRpc> {
   const rpcs: Record<string, DashboardRpc> = {};
 
   for (const resource of resources) {
     if (!resource.dashboard) continue;
-    const tableName = resource.dashboard.tableName ?? resource.name;
-    const handlers = createResourceDashboardRpcs(tableName, resource.dashboard, db);
+    const ownTable = resource.table ?? resource.name;
+    const tableName = resource.dashboard.tableName ?? ownTable;
+    // The resource `where` names columns of the resource's own table. A dashboard over another
+    // table (a rollup view) may not have them, so there its own `dashboard.where` governs.
+    const where = tableName === ownTable ? resource.where : undefined;
+    const handlers = createResourceDashboardRpcs(tableName, withResourceWhere(resource.dashboard, where), 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;

package/src/screens/AdminRouter.tsx

@@ -11,7 +11,7 @@
 import React, { useMemo } from 'react';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
-import { ViewStateContext, normalizeParams, buildQueryString } from '../hooks/useViewState';
+import { ViewStateContext, normalizeParams, normalizeParamValues, buildQueryString, type ViewParamDelta } from '../hooks/useViewState';
 import { AdminNavigationContext } from '../hooks/useAdminNavigation';
 import { AdminDashboard } from './AdminDashboard';
 import { ResourceListView } from './ResourceListView';
@@ -31,7 +31,7 @@ export interface AdminNavigator {
    * remounts the list and takes the cursor out of the search box. A key set to undefined
    * is removed.
    */
-  setParams?: (params: Record<string, string | undefined>) => void;
+  setParams?: (params: ViewParamDelta) => void;
 }
 
 export interface AdminRouterProps {
@@ -41,6 +41,11 @@ export interface AdminRouterProps {
   pathname: string;
   /** Current query params, e.g. expo-router's useLocalSearchParams(). */
   searchParams?: Record<string, string | string[] | undefined>;
+  /**
+   * Host route params to omit from view state and fallback URL rewrites, e.g.
+   * ['rest'] for a [...rest] route. Default: none. Query keys are never guessed.
+   */
+  ignoreParams?: string[];
   /** Mount point of the admin. Default '/admin'. */
   basePath?: string;
   /** API base for resources with a `dashboard` config (observability screens). */
@@ -53,6 +58,7 @@ export function AdminRouter({
   router,
   pathname,
   searchParams,
+  ignoreParams,
   basePath = '/admin',
   baseUrl,
   getToken,
@@ -66,20 +72,27 @@ export function AdminRouter({
   // View state ⇄ URL query: screens read the current params and push merged
   // updates, preserving the path. Powers shareable filtered/scrubbed views.
   const viewState = useMemo(() => {
-    const params = normalizeParams(searchParams);
+    const ignored = new Set(ignoreParams);
+    const queryParams = Object.fromEntries(
+      Object.entries(searchParams ?? {}).filter(([key]) => !ignored.has(key)),
+    );
+    const params = normalizeParams(queryParams);
+    const paramValues = normalizeParamValues(queryParams);
     return {
       params,
-      setParams: (next: Record<string, string | undefined>) => {
+      paramValues,
+      setParams: (next: ViewParamDelta) => {
         if (router.setParams) {
           router.setParams(next);
           return;
         }
-        const merged: Record<string, string | undefined> = { ...params, ...next };
+        const merged: ViewParamDelta = { ...paramValues, ...next };
+        for (const key of ignored) delete merged[key];
         (router.replace ?? router.push)(`${pathname}${buildQueryString(merged)}`);
       },
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(searchParams), pathname, router]);
+  }, [JSON.stringify(searchParams), JSON.stringify(ignoreParams), pathname, router]);
 
   const navigation = useMemo(
     () => ({ push: (href: string) => router.push(href), basePath, resources: config.resources.map(r => r.name) }),

package/src/screens/ResourceCreate.tsx

@@ -11,8 +11,12 @@ import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
 import { useEditors } from '../hooks/useEditors';
 import { editorFor } from '../utils/render-resolution';
+import { normalizeDateTimeSubmission } from '../utils/datetime-submission';
 import { toDateInputValue } from '../utils/format-cell-value';
+import { integrityErrorField } from '../utils/integrity-error';
 import { missingRequired } from '../utils/required';
+import { isWallClock, wallClockError } from '../utils/wall-clock';
+import { withoutWhere } from '../utils/resource-query';
 import { FormField, TextInput, SelectInput, SwitchInput, DateInput, Button, ErrorState } from '@everystack/ui';
 import { ImageFieldInput } from '../components/ImageFieldInput';
 import { AvatarFieldInput } from '../components/AvatarFieldInput';
@@ -40,6 +44,22 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
 
   const [formData, setFormData] = useState<Record<string, unknown>>({});
   const [errors, setErrors] = useState<Record<string, string>>({});
+  // A picker can have an invalid draft while formData still holds its last valid instant.
+  const invalidFields = useRef(new Map<string, string>());
+  const setFieldValidity = useCallback((name: string, valid: boolean, reason?: string) => {
+    const previous = invalidFields.current.get(name);
+    const error = valid ? undefined : reason ?? 'Choose a valid date and time.';
+    if (error === previous) return;
+    if (error) invalidFields.current.set(name, error);
+    else invalidFields.current.delete(name);
+    setErrors(current => {
+      if (error) return { ...current, [name]: error };
+      if (current[name] !== previous) return current;
+      const next = { ...current };
+      delete next[name];
+      return next;
+    });
+  }, []);
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   // Set synchronously so two presses in one tick (before a re-render) submit once.
@@ -49,10 +69,11 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
     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
+    // A `where` column has no input: the adapter sends its `where` value instead.
+    return withoutWhere(fieldNames
       .map(name => fieldMap.get(name))
       .filter((f): f is FieldDefinition => f != null)
-      .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id'));
+      .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id')), resourceConfig);
   }, [resourceConfig]);
 
   const editors = useEditors();
@@ -74,10 +95,18 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
   const validate = useCallback((): Record<string, string> => {
     const newErrors: Record<string, string> = {};
     for (const field of fields) {
+      const draftError = invalidFields.current.get(field.name);
+      if (draftError) {
+        newErrors[field.name] = draftError;
+        continue;
+      }
       const value = formData[field.name];
       if (field.validation?.required && missingRequired(field, value)) {
         newErrors[field.name] = field.validation.message ?? `${field.label ?? field.name} is required`;
+        continue;
       }
+      const skipped = wallClockError(field, value);
+      if (skipped) newErrors[field.name] = skipped;
     }
     setErrors(newErrors);
     return newErrors;
@@ -96,10 +125,17 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
     setSubmitError(null);
 
     try {
-      const record = await adapter.create(resource, formData as Record<string, unknown> & { id?: never });
+      const record = await adapter.create(resource, normalizeDateTimeSubmission(fields, formData) as Record<string, unknown> & { id?: never });
       onSuccess?.(record);
     } catch (err) {
-      setSubmitError(err instanceof Error ? err.message : String(err));
+      const message = err instanceof Error ? err.message : String(err);
+      const field = integrityErrorField(err, fields);
+      if (field) {
+        setErrors({ [field.name]: message });
+        requestScrollToFirstError(fields);
+      } else {
+        setSubmitError(message);
+      }
     } finally {
       inFlight.current = false;
       setSubmitting(false);
@@ -117,6 +153,7 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
       value={formData[field.name]}
       error={errors[field.name]}
       onChange={value => setFieldValue(field.name, value)}
+      onValidityChange={setFieldValidity}
       values={formData}
     />
   );
@@ -166,13 +203,17 @@ interface FieldInputProps {
   value: unknown;
   error?: string;
   onChange: (value: unknown) => void;
+  onValidityChange: (name: string, valid: boolean, reason?: string) => void;
   /** The whole form's current values, for a custom input. */
   values: Record<string, unknown>;
 }
 
-function FieldInput({ field, value, error, onChange, values }: FieldInputProps): React.ReactElement {
+function FieldInput({ field, value, error, onChange, onValidityChange, values }: FieldInputProps): React.ReactElement {
   const editors = useEditors();
   const adapter = useDataAdapter();
+  const reportValidity = useCallback((valid: boolean, reason?: string) => {
+    onValidityChange(field.name, valid, reason);
+  }, [field.name, onValidityChange]);
 
   // Resolution: inline input → registered editor → type-based default.
   if (field.input) {
@@ -220,7 +261,11 @@ function FieldInput({ field, value, error, onChange, values }: FieldInputProps):
     case 'datetime':
       return (
         <FormField label={label} error={error} required={required}>
-          <DateInput value={toDateInputValue(value)} onValueChange={onChange} granularity="datetime" />
+          {isWallClock(field) ? (
+            <DateInput value={toDateInputValue(value)} onValueChange={onChange} timeZone={field.timezone} storage="wall" />
+          ) : (
+            <DateInput value={toDateInputValue(value)} onValueChange={onChange} granularity="datetime" storage="utc" onValidityChange={reportValidity} />
+          )}
         </FormField>
       );
 

package/src/screens/ResourceEdit.tsx

@@ -2,7 +2,7 @@
  * ResourceEdit
  *
  * Edit form for an existing resource record.
- * Pre-populates form with existing data, submits via adapter.update().
+ * Pre-populates form with existing data, submits the changed fields via adapter.update().
  */
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
@@ -11,8 +11,13 @@ import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
 import { useEditors } from '../hooks/useEditors';
 import { editorFor } from '../utils/render-resolution';
+import { normalizeDateTimeSubmission } from '../utils/datetime-submission';
 import { toDateInputValue } from '../utils/format-cell-value';
+import { integrityErrorField } from '../utils/integrity-error';
 import { missingRequired } from '../utils/required';
+import { isWallClock, wallClockError } from '../utils/wall-clock';
+import { withoutWhere } from '../utils/resource-query';
+import { changedFields } from '../utils/changed-fields';
 import { FormField, TextInput, SelectInput, SwitchInput, DateInput, Button, LoadingState, ErrorState } from '@everystack/ui';
 import { ImageFieldInput } from '../components/ImageFieldInput';
 import { AvatarFieldInput } from '../components/AvatarFieldInput';
@@ -43,21 +48,40 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
   const [record, setRecord] = useState<DataRecord | null>(null);
   const [formData, setFormData] = useState<Record<string, unknown>>({});
   const [errors, setErrors] = useState<Record<string, string>>({});
+  // A picker can have an invalid draft while formData still holds its last valid instant.
+  const invalidFields = useRef(new Map<string, string>());
+  const setFieldValidity = useCallback((name: string, valid: boolean, reason?: string) => {
+    const previous = invalidFields.current.get(name);
+    const error = valid ? undefined : reason ?? 'Choose a valid date and time.';
+    if (error === previous) return;
+    if (error) invalidFields.current.set(name, error);
+    else invalidFields.current.delete(name);
+    setErrors(current => {
+      if (error) return { ...current, [name]: error };
+      if (current[name] !== previous) return current;
+      const next = { ...current };
+      delete next[name];
+      return next;
+    });
+  }, []);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [fetchError, setFetchError] = useState<Error | null>(null);
   const [submitError, setSubmitError] = useState<string | null>(null);
   // Set synchronously so two presses in one tick (before a re-render) submit once.
   const inFlight = useRef(false);
+  // The values as loaded. A save sends only the fields that differ from these.
+  const initialValues = useRef<Record<string, unknown>>({});
 
   const fields = useMemo(() => {
     if (!resourceConfig) return [];
     const fieldNames = resourceConfig.editFields ?? resourceConfig.fields.map(f => f.name);
     const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
-    return fieldNames
+    // A `where` column has no input: the adapter sends its `where` value instead.
+    return withoutWhere(fieldNames
       .map(name => fieldMap.get(name))
       .filter((f): f is FieldDefinition => f != null)
-      .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id'));
+      .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id')), resourceConfig);
   }, [resourceConfig]);
 
   const editors = useEditors();
@@ -80,6 +104,7 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
       for (const field of fields) {
         initial[field.name] = result[field.name];
       }
+      initialValues.current = initial;
       setFormData(initial);
     } catch (err) {
       setFetchError(err instanceof Error ? err : new Error(String(err)));
@@ -103,11 +128,22 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
 
   const validate = useCallback((): Record<string, string> => {
     const newErrors: Record<string, string> = {};
+    // Only a value this save would send is checked for a skipped wall time: a stored one the user
+    // did not touch must not block saving another field.
+    const changes = changedFields(fields, initialValues.current, formData);
     for (const field of fields) {
+      const draftError = invalidFields.current.get(field.name);
+      if (draftError) {
+        newErrors[field.name] = draftError;
+        continue;
+      }
       const value = formData[field.name];
       if (field.validation?.required && missingRequired(field, value)) {
         newErrors[field.name] = field.validation.message ?? `${field.label ?? field.name} is required`;
+        continue;
       }
+      const skipped = field.name in changes ? wallClockError(field, value) : null;
+      if (skipped) newErrors[field.name] = skipped;
     }
     setErrors(newErrors);
     return newErrors;
@@ -121,20 +157,38 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
       return;
     }
 
+    const changes = changedFields(fields, initialValues.current, formData);
+    // The API refuses an empty update, and there is nothing to save.
+    if (Object.keys(changes).length === 0) {
+      setSubmitError(null);
+      if (record) onSuccess?.(record);
+      return;
+    }
+
     inFlight.current = true;
     setSubmitting(true);
     setSubmitError(null);
 
     try {
-      const updated = await adapter.update(resource, id, formData);
+      const updated = await adapter.update(resource, id, normalizeDateTimeSubmission(fields, changes));
+      // What was saved is now what is stored: the next save diffs against it.
+      initialValues.current = { ...formData };
+      setRecord(prev => ({ ...prev, ...updated }));
       onSuccess?.(updated);
     } catch (err) {
-      setSubmitError(err instanceof Error ? err.message : String(err));
+      const message = err instanceof Error ? err.message : String(err);
+      const field = integrityErrorField(err, fields);
+      if (field) {
+        setErrors({ [field.name]: message });
+        requestScrollToFirstError(fields);
+      } else {
+        setSubmitError(message);
+      }
     } finally {
       inFlight.current = false;
       setSubmitting(false);
     }
-  }, [adapter, resource, id, formData, validate, onSuccess, fields, requestScrollToFirstError]);
+  }, [adapter, resource, id, formData, record, validate, onSuccess, fields, requestScrollToFirstError]);
 
   if (!resourceConfig) {
     return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
@@ -159,6 +213,7 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
       value={formData[field.name]}
       error={errors[field.name]}
       onChange={value => setFieldValue(field.name, value)}
+      onValidityChange={setFieldValidity}
       values={formData}
       record={record}
     />
@@ -211,14 +266,18 @@ interface EditFieldInputProps {
   value: unknown;
   error?: string;
   onChange: (value: unknown) => void;
+  onValidityChange: (name: string, valid: boolean, reason?: string) => void;
   record?: DataRecord;
   /** The whole form's current values, for a custom input. */
   values: Record<string, unknown>;
 }
 
-function EditFieldInput({ field, value, error, onChange, record, values }: EditFieldInputProps): React.ReactElement {
+function EditFieldInput({ field, value, error, onChange, onValidityChange, record, values }: EditFieldInputProps): React.ReactElement {
   const editors = useEditors();
   const adapter = useDataAdapter();
+  const reportValidity = useCallback((valid: boolean, reason?: string) => {
+    onValidityChange(field.name, valid, reason);
+  }, [field.name, onValidityChange]);
 
   // Resolution: inline input → registered editor → type-based default.
   if (field.input) {
@@ -263,7 +322,11 @@ function EditFieldInput({ field, value, error, onChange, record, values }: EditF
     case 'datetime':
       return (
         <FormField label={label} error={error} required={required}>
-          <DateInput value={toDateInputValue(value)} onValueChange={onChange} granularity="datetime" />
+          {isWallClock(field) ? (
+            <DateInput value={toDateInputValue(value)} onValueChange={onChange} timeZone={field.timezone} storage="wall" />
+          ) : (
+            <DateInput value={toDateInputValue(value)} onValueChange={onChange} granularity="datetime" storage="utc" onValidityChange={reportValidity} />
+          )}
         </FormField>
       );