Entity & Composition

Standardizing management interfaces across GateFlow. Patterns for lists, directories, and high-density project views.

Install

pnpm add @gateflow/components

Data Density

Utilize standard StatGrid metrics to provide immediate contextual depth before delving into list details.

Atomic Entities

Every item must be encapsulated in an EntityCard, ensuring visual consistency across different data types.

Fluid Filtering

Search and filter operations must remain reactive and easily accessible at the top of the interaction flow.

Management Lab

Test the GateFlow management pattern below. This demonstrates how `StatGrid`, `FilterBar`, and `EntityCard` compose a high-fidelity resident directory.

Institutional Assembly

Standard management pages follow a recursive composition model. Metrics flow from the top down, followed by global actions and atomic entity lists.

1. The Standard List Pattern

Combine FilterBar and EntityCard for a consistent management experience.

import { EntityCard, FilterBar, StatGrid } from '@gateflow/components';

export function ResidentList() {
  return (
    <div className="flex flex-col gap-6">
      <StatGrid stats={metrics} />
      <FilterBar onSearch={setSearch} actions={<AddButton />} />
      <div className="grid grid-cols-2 gap-4">
        {data.map(item => (
          <EntityCard key={item.id} {...item} />
        ))}
      </div>
    </div>
  );
}

Clarity vs Density

When dealing with large datasets, prioritize the `FilterBar` operations. Never overwhelm the user with more than 12 entities per page without pagination or infinite scroll patterns.