Entity Page

interface EntityPageConfig {
  type: 'entityPage';
  entityPage: {
    mode?: 'edit' | 'view'; // Default 'edit'
    route: { path: string; params: { id: string } };
    parentPageId: string; // REQUIRED
    collectionId: string;
    entityTypeSource: 'cms' | 'custom';
    title?: {
      text: string;
      badges?: { id: string }; // Dynamic badges override ID
    };
    subtitle?: {
      text: string;
      id?: string; // Dynamic subtitle override ID
    };
    layout?: {
      main: CardLayout[];
      sidebar?: CardLayout[];
    };
    actions?: EntityPageActions; // See Action Rules
  };
}

interface CardLayout {
  type: 'card';
  card: {
    title?: { text: string };
    children: LayoutContent[];
  };
}

type LayoutContent = | { type: 'field'; field: { fieldId: string; span?: number } } | { type: 'container'; container: { children: LayoutContent[]; span?: number } } | { type: 'component'; component

// Override Types
type EntityPageHeaderSubtitle = (entity: any) => { text: string };
type EntityPageHeaderBadges = (entity: any) => {
  text: string;
  skin?: 'success' | 'warning' | 'destructive' | 'neutral' | 'premium';
  prefixIcon?: ReactElement;
  suffixIcon?: ReactElement;
}[];

// Config
{
  type: 'entityPage',
  entityPage: {
    mode: 'view',
    route: { path: '/pet/:entityId', params: { id: 'entityId' } },
    parentPageId: 'pets-list',
    collectionId: 'pets',
    entityTypeSource: 'cms',
    title: {
      text: 'Pet Details',
      badges: { id: 'petBadges' }
    },
    layout: {
      main: [{
        type: 'card',
        card: {
          title: { text: 'Info' },
          children: [
            { type: 'field', field: { fieldId: 'name', span: 6 } },
            { type: 'field', field: { fieldId: 'age', span: 6 } }
          ]
        }
      }]
    }
  }
}

// Override Implementation
export const petBadges = (entity) => ([
  { text: entity.status, skin: entity.status === 'Active' ? 'success' : 'neutral' }
]);