Components Reference

The CMS is built from composable React components organized by function. Every component reads metadata from the schema registry and adapts its behavior based on the current role.

Layout

Sidebar

The main navigation sidebar. Reads the schema registry to build a collapsible feature-grouped table list.

interface SidebarProps {
  // No props — reads schema registry directly
}

Header

Top bar with tagline and role switcher.

interface HeaderProps {
  // No props — renders tagline and RoleSwitcher
}

RoleSwitcher

Dropdown to switch between owner, admin, and member roles. Available in demo mode. In live mode, the role is read from the authenticated session.

// Uses RoleContext internally
// Provides: role, setRole, session

Table

DataTable

Standard browse table with clickable rows and sortable columns.

interface DataTableProps {
  data: Record[];
  columns: ColumnDef[];
  onRowClick?: (row: Record) => void;
}

SpreadsheetTable

Excel/Google Sheets-like editable table with cell selection and keyboard navigation.

interface SpreadsheetTableProps {
  data: Record[];
  columns: ColumnDef[];
  onCellEdit: (recordId: string, field: string, value: unknown) => Promise<void>;
  editableFields: Set<string>;
  onFKSearch: (targetTable: string, query: string) => Promise<FKOption[]>;
}

Toolbar

Search bar, view selector, view mode toggle, and refresh button.

interface ToolbarProps {
  table: TableMeta;
  search: string;
  onSearchChange: (search: string) => void;
  onRefresh: () => void;
  selectedView?: string;
  onViewChange: (view: string | undefined) => void;
  viewMode: "table" | "dataTable";
  onViewModeChange: (mode: "table" | "dataTable") => void;
}

Pagination

Page navigation controls with range indicator.

interface PaginationProps {
  page: number;
  pageSize: number;
  total: number;
  onPageChange: (page: number) => void;
}

RowActions

Three-dot dropdown menu on each table row with view, edit, delete, and custom actions.

interface RowActionsProps {
  table: TableMeta;
  record: Record;
  onDelete?: (id: string) => void;
  onAction?: (action: ActionMeta, record: Record) => void;
}

ColumnFactory

Utility function (not a component) that builds column definitions from table metadata.

function buildColumns(
  table: TableMeta,
  role: Role,
  options?: { viewFields?: string[] }
): ColumnDef[];

Generates columns with appropriate formatters for each field type: dates, money, booleans, enums, FK references, masked values, and plain text. Respects view field projections when provided.

Record

RecordDetail

Grouped field display for a single record. Auto-groups fields by category (Identity, Contact, Financial, References, Settings, Dates, Audit).

interface RecordDetailProps {
  table: TableMeta;
  record: Record;
  role: Role;
}

FieldDisplay

Renders a single field value with appropriate formatting: masking, booleans, enums, FK links, dates, money, percentages, and numbers.

interface FieldDisplayProps {
  column: ColumnMeta;
  value: unknown;
  role: Role;
  masking?: Record<string, MaskingRule>;
  validation?: Record<string, ValidationRule>;
}

ActionBar

Card displaying available actions as buttons for the current record.

interface ActionBarProps {
  table: TableMeta;
  record: Record;
  onAction: (action: ActionMeta) => void;
}

RelatedRecords

Card showing incoming FK relationships with record counts. Lists tables that reference the current record.

interface RelatedRecordsProps {
  table: TableMeta;
  recordId: string;
}

Form

AutoForm

Auto-generated create/edit form built from the table's guard configuration.

interface AutoFormProps {
  table: TableMeta;
  mode: "create" | "edit";
  initialData?: Record;
  onSubmit: (data: Record) => Promise<void>;
  onCancel: () => void;
}

Features:

• Fields determined from guards (createable for create, updatable for edit)
• Immutable fields shown as disabled with lock icon
• Protected fields shown as disabled with "Updated via actions only" note
• Client-side validation from schema rules
• Boolean fields grouped in a "Settings" section
• Required fields marked with red asterisk

FieldInput

Single form input that adapts to the column type and validation rules.

interface FieldInputProps {
  column: ColumnMeta;
  validation?: ValidationRule;
  value: unknown;
  onChange: (value: unknown) => void;
  error?: string;
  disabled?: boolean;
}

Renders as: text input, number input, email input, URL input, date picker, select dropdown (for enums), textarea (for long text), or checkbox (for booleans).

Actions

ActionDialog

Modal dialog for executing a custom action with auto-generated input fields.

interface ActionDialogProps {
  action: ActionMeta;
  record: Record;
  tableName: string;
  onClose: () => void;
  onExecute: (input: Record) => Promise<void>;
}

Features:

• Auto-generates input fields from action schema
• Destructive actions get red styling and warning icon
• File response actions get download icon
• Side effects warning banner for sideEffects: "sync"
• Loading state during execution
• Error display on failure

Next Steps

• Schema Format Reference — TypeScript types consumed by these components
• Table Views — How DataTable and SpreadsheetTable are used
• Inline Editing — SpreadsheetTable editing details