History

Widget History is a UI component that displays a log or timeline of past actions, changes, or events in an application.

Demo

Sarah Chen14:30

createdproject-001

Lisa Park09:30

updatedblog-post-002

Admin System04:45

updatednew-user-003

Project Manager23:30

updatedproject-task-004

Usage

<HistoryWidget :data="history" />

interface IHistory{
  data: IHistoryRecord[];
  title: string;
  maxHeight?: number;  // optional parameter for height of the scrollable area
}

interface IHistoryRecord {
  id: string;
  entityId: string;       // ID of related object (file, post, etc.)
  entityType: 'file' | 'post' | 'user' | 'custom';
  action: 'created' | 'updated' | 'deleted' | 'moved' | 'renamed' | string;
  userId: string;         // who performed the action
  userName: string;       // display name of the user
  timestamp: Date;
  description?: string;   // optional details about the change
  changes?: Record<string, { old: any; new: any }>; // diff of fields
  status: 'success' | 'error' | 'pending';
}

Key features:

• Displays a list of records (e.g., recent changes, orders, viewed items).
• Often includes timestamps for each event.
• May support filtering and searching through history.
• Typically integrates with an API to fetch historical data.

Common use cases:

• Admin dashboards (user activity logs).
• E-commerce platforms (order history).
• CRM/ERP systems (customer action history).
• Web apps (message history, file version tracking).