CRUD Pattern Reference
Complete reference implementation for Create, Read, Update, Delete interfaces.
THIS IS THE STANDARD. Copy these patterns for any entity in the codebase. The Contact entity demonstrates all CRUD operations with proper validation, navigation, and state management.
Contact List
DataTable with globalFilter search, sorting, pagination, and StatusBadge.
Contact Detail
Single entity view with StatusBadge, field sections, and actions.
Contact Create
FormShell + FormInput + FormSelect with TanStack Form validation.
Contact Edit
Pre-populated form reusing the create pattern.
Architecture Notes
Data Layer
Static mock data in lib/crud-pattern/data.ts. Types, helper functions, and status configurations are centralized here.
Form Components
TanStack Form with @stackmates/ui-forms. FormInput and FormSelect handle validation and error display automatically.
UI Components
DataTable from @stackmates/ui-interactive/organisms for lists. StatusBadge from @stackmates/ui-interactive/atoms for status display. FormShell from @stackmates/ui-forms for form wrappers.
Navigation Pattern
List → Detail → Edit → Detail. Create returns to List. URL params for entity IDs: ?id=1
How to Use This Pattern
- Copy
lib/crud-pattern/data.tsand replace Contact with your entity - Copy each page and update imports to your data file
- Update field names, labels, and validation rules
- Replace console.log with actual server actions
- Update navigation links to match your routes