Skip to main content

History Entries

The Customer and Order detail pages have a special history timeline, which show a summary of all significant changes and activity relating to that customer or order.

History entries are defined by DashboardHistoryEntryComponent, and the component should be wrapped in HistoryEntry.

Example​

Following the backend example of a custom history entry given in the HistoryService docs, we can define a corresponding component to render this entry in the customer history timeline:

import { defineDashboardExtension, HistoryEntry } from '@vendure/dashboard';
import { IdCard } from 'lucide-react';

defineDashboardExtension({
    historyEntries: [
        {
            type: 'CUSTOMER_TAX_ID_VERIFICATION',
            component: ({ entry, entity }) => {
                return (
                    <HistoryEntry
                        entry={entry}
                        title={'Tax ID verified'}
                        timelineIconClassName={'bg-success text-success-foreground'}
                        timelineIcon={<IdCard />}
                    >
                        <div className="text-xs">Approval reference: {entry.data.ref}</div>
                    </HistoryEntry>
                );
            },
        },
    ],
});

This will then appear in the customer history timeline:

History entry