A definition of a custom component that will be used to render the given type of history entry. *Example* ```tsx import { defineDashboardExtension, HistoryEntry } from '@vendure/dashboard'; import { IdCard } from 'lucide-react'; defineDashboardExtension({ historyEntries: [ { type: 'CUSTOMER_TAX_ID_APPROVAL', component: ({ entry, entity }) => { return ( } >

Approval reference: {entry.data.ref}

); }, }, ], }); ``` ```ts title="Signature" interface DashboardHistoryEntryComponent { type: string; component: React.ComponentType<{ entry: HistoryEntryItem; entity: OrderHistoryOrderDetail | CustomerHistoryCustomerDetail; }>; } ```

### type \ The `type` should correspond to a valid `HistoryEntryType`, such as * `CUSTOMER_REGISTERED` * `ORDER_STATE_TRANSITION` * some custom type - see the [HistoryService](/current/core/reference/typescript-api/services/history-service#historyservice) docs for a guide on how to define custom history entry types. ### component \HistoryEntryItem; entity: OrderHistoryOrderDetail | CustomerHistoryCustomerDetail; }>`} /> The component which is used to render the timeline entry. It should use the [HistoryEntry](/current/core/reference/dashboard/extensions-api/history-entries#historyentry) component and pass the appropriate props to configure how it will be displayed. The `entity` prop will be a subset of the Order object for Order history entries, or a subset of the Customer object for customer history entries.

## HistoryEntryItem This object contains the information about the history entry. ```ts title="Signature" interface HistoryEntryItem { id: string; type: string; createdAt: string; isPublic: boolean; administrator?: { id: string; firstName: string; lastName: string; } | null; data: any; } ```

### id \ ### type \ The `HistoryEntryType`, such as `ORDER_STATE_TRANSITION`. ### createdAt \ ### isPublic \ Whether this entry is visible to customers via the Shop API ### administrator \ If an Administrator created this entry, their details will be available here. ### data \ The entry payload data. This will be an object, which is different for each type of history entry. For example, the `CUSTOMER_ADDED_TO_GROUP` data looks like this: ```json { groupName: 'Some Group', } ``` and the `ORDER_STATE_TRANSITION` data looks like this: ```json { from: 'ArrangingPayment', to: 'PaymentSettled', } ```

## HistoryEntryProps The props for the [HistoryEntry](/current/core/reference/dashboard/extensions-api/history-entries#historyentry) component. ```ts title="Signature" interface HistoryEntryProps { entry: HistoryEntryItem; title: string | React.ReactNode; timelineIcon?: React.ReactNode; timelineIconClassName?: string; actorName?: string; children: React.ReactNode; isPrimary?: boolean; } ```

### entry \HistoryEntryItem`} /> The entry itself, which will get passed down to your custom component ### title \ The title of the entry ### timelineIcon \ An icon which is used to represent the entry. Note that this will only display if `isPrimary` is `true`. ### timelineIconClassName \ Optional tailwind classes to apply to the icon. For instance ```ts const success = 'bg-success text-success-foreground'; const destructive = 'bg-destructive text-destructive-foreground'; ``` ### actorName \ The name to display of "who did the action". For instance: ```ts const getActorName = (entry: HistoryEntryItem) => { if (entry.administrator) { return `${entry.administrator.firstName} ${entry.administrator.lastName}`; } else if (entity?.customer) { return `${entity.customer.firstName} ${entity.customer.lastName}`; } return ''; }; ``` ### children \ ### isPrimary \ When set to `true`, the timeline entry will feature the specified icon and will not be collapsible.

## HistoryEntry A component which is used to display a history entry in the order/customer history timeline. ```ts title="Signature" function HistoryEntry(props: Readonly): void ``` Parameters ### props \HistoryEntryProps>`} />