Detail Views

/**
 * Page component for the Create view with form rendering and actions
 * @param props - Create page configuration props
 * @returns Complete create page with title, actions, and form container
 */
function Create<RecordType>(props: CreateProps<RecordType>): ReactElement;

interface CreateProps<RecordType> {
  /** Custom actions component for the create page */
  actions?: ComponentType<CreateActionsProps>;
  /** Aside component displayed next to the main content */
  aside?: ComponentType<CreateAsideProps>;
  /** Custom component to replace the default CreateView */
  component?: ComponentType<CreateViewProps>;
  /** Whether the record has an edit view */
  hasEdit?: boolean;
  /** Whether the record has a show view */
  hasShow?: boolean;
  /** Mutation options for the create operation */
  mutationOptions?: UseMutationOptions;
  /** Record data (for cloning scenarios) */
  record?: Partial<RecordType>;
  /** Redirect location after successful creation */
  redirect?: string | false | RedirectToFunction;
  /** Resource name */
  resource?: string;
  /** Page title */
  title?: string | ComponentType<TitleProps>;
  /** Transform function to modify data before submission */
  transform?: TransformData;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { Create, SimpleForm, TextInput } from "ra-ui-materialui";

// Basic create page
const PostCreate = () => (
  <Create>
    <SimpleForm>
      <TextInput source="title" />
      <TextInput source="body" multiline />
    </SimpleForm>
  </Create>
);

// Create with custom actions and redirect
const PostCreateCustom = () => (
  <Create 
    actions={<CustomCreateActions />}
    redirect="show"
    transform={(data) => ({ ...data, status: 'draft' })}
  >
    <SimpleForm>
      <TextInput source="title" validate={required()} />
      <TextInput source="body" multiline rows={5} />
    </SimpleForm>
  </Create>
);

/**
 * Page component for the Edit view with record loading and form rendering
 * @param props - Edit page configuration props
 * @returns Complete edit page with title, actions, and form container
 */
function Edit<RecordType>(props: EditProps<RecordType>): ReactElement;

interface EditProps<RecordType> {
  /** Custom actions component for the edit page */
  actions?: ComponentType<EditActionsProps>;
  /** Aside component displayed next to the main content */
  aside?: ComponentType<EditAsideProps>;
  /** Custom component to replace the default EditView */
  component?: ComponentType<EditViewProps>;
  /** Record identifier */
  id?: Identifier;
  /** Mutation mode for the edit operation */
  mutationMode?: 'pessimistic' | 'optimistic' | 'undoable';
  /** Mutation options for the edit operation */
  mutationOptions?: UseMutationOptions;
  /** Query options for loading the record */
  queryOptions?: UseQueryOptions;
  /** Redirect location after successful edit */
  redirect?: string | false | RedirectToFunction;
  /** Resource name */
  resource?: string;
  /** Page title */
  title?: string | ComponentType<TitleProps>;
  /** Transform function to modify data before submission */
  transform?: TransformData;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { Edit, SimpleForm, TextInput, DateInput } from "ra-ui-materialui";

// Basic edit page
const PostEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="id" disabled />
      <TextInput source="title" />
      <TextInput source="body" multiline />
      <DateInput source="published_at" />
    </SimpleForm>
  </Edit>
);

// Edit with custom title and mutation mode
const PostEditCustom = () => (
  <Edit 
    title={<PostTitle />}
    mutationMode="undoable"
    redirect={false}
  >
    <TabbedForm>
      <TabbedForm.Tab label="summary">
        <TextInput source="title" validate={required()} />
        <TextInput source="teaser" multiline />
      </TabbedForm.Tab>
      <TabbedForm.Tab label="body">
        <RichTextInput source="body" />
      </TabbedForm.Tab>
    </TabbedForm>
  </Edit>
);

/**
 * Page component for the Show view with record loading and display
 * @param props - Show page configuration props
 * @returns Complete show page with title, actions, and content display
 */
function Show<RecordType>(props: ShowProps<RecordType>): ReactElement;

interface ShowProps<RecordType> {
  /** Custom actions component for the show page */
  actions?: ComponentType<ShowActionsProps>;
  /** Aside component displayed next to the main content */
  aside?: ComponentType<ShowAsideProps>;
  /** Child components for displaying record data */
  children?: ReactNode;
  /** Custom component to replace the default ShowView */
  component?: ComponentType<ShowViewProps>;
  /** Whether to show loading while data is being fetched */
  emptyWhileLoading?: boolean;
  /** Record identifier */
  id?: Identifier;
  /** Query options for loading the record */
  queryOptions?: UseQueryOptions;
  /** Resource name */
  resource?: string;
  /** Page title */
  title?: string | ComponentType<TitleProps>;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { Show, SimpleShowLayout, TextField, DateField, RichTextField } from "ra-ui-materialui";

// Basic show page
const PostShow = () => (
  <Show>
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="title" />
      <RichTextField source="body" />
      <DateField source="published_at" />
    </SimpleShowLayout>
  </Show>
);

// Show with tabbed layout and custom actions
const PostShowCustom = () => (
  <Show 
    actions={<PostShowActions />}
    title={<PostTitle />}
  >
    <TabbedShowLayout>
      <TabbedShowLayout.Tab label="summary">
        <TextField source="id" />
        <TextField source="title" />
        <TextField source="teaser" />
      </TabbedShowLayout.Tab>
      <TabbedShowLayout.Tab label="body">  
        <RichTextField source="body" />
      </TabbedShowLayout.Tab>
      <TabbedShowLayout.Tab label="metadata">
        <DateField source="created_at" />
        <DateField source="updated_at" />
        <NumberField source="nb_views" />
      </TabbedShowLayout.Tab>
    </TabbedShowLayout>
  </Show>
);

/**
 * Default actions for Create pages
 * @param props - Create actions configuration props
 * @returns Action toolbar with save and cancel buttons
 */
function CreateActions(props: CreateActionsProps): ReactElement;

/**
 * Default actions for Edit pages
 * @param props - Edit actions configuration props
 * @returns Action toolbar with save, delete, and show buttons
 */
function EditActions(props: EditActionsProps): ReactElement;

/**
 * Default actions for Show pages
 * @param props - Show actions configuration props  
 * @returns Action toolbar with edit and delete buttons
 */
function ShowActions(props: ShowActionsProps): ReactElement;

interface CreateActionsProps {
  className?: string;
  hasEdit?: boolean;
  hasShow?: boolean;
  hasList?: boolean;
}

interface EditActionsProps {
  className?: string;
  hasCreate?: boolean;
  hasEdit?: boolean;
  hasShow?: boolean;
  hasList?: boolean;
}

interface ShowActionsProps {
  className?: string;
  hasCreate?: boolean;
  hasEdit?: boolean;
  hasList?: boolean;
}

/**
 * Simple layout component for Show pages
 * @param props - Simple show layout props
 * @returns Single-column layout for displaying fields
 */
function SimpleShowLayout(props: SimpleShowLayoutProps): ReactElement;

/**
 * Tabbed layout component for Show pages
 * @param props - Tabbed show layout props
 * @returns Multi-tab layout for organizing fields
 */
function TabbedShowLayout(props: TabbedShowLayoutProps): ReactElement;

/**
 * Individual tab component for TabbedShowLayout
 * @param props - Tab props
 * @returns Tab panel with field content
 */
function Tab(props: TabProps): ReactElement;

interface SimpleShowLayoutProps {
  children?: ReactNode;
  className?: string;
  spacing?: number;
  sx?: SxProps;
}

interface TabbedShowLayoutProps {
  children?: ReactNode;
  className?: string;
  spacing?: number;
  sx?: SxProps;
  syncWithLocation?: boolean;
}

interface TabProps {
  children?: ReactNode;
  className?: string;
  count?: number;
  icon?: ReactElement;
  label?: string | ReactElement;
  path?: string;
  sx?: SxProps;
  value?: string | number;
}

type Identifier = string | number;

type RedirectToFunction = (
  resource: string,
  id: Identifier,
  data: RaRecord
) => string;

type TransformData = (data: any) => any;

interface TitleProps {
  record?: RaRecord;
  defaultTitle?: string;
}

interface RaRecord {
  id: Identifier;
  [key: string]: any;
}

type MutationMode = 'pessimistic' | 'optimistic' | 'undoable';