The AuditTrail lists actions performed by a user at a given time. It does this by displaying an avatar that represents the user, the profile picture, the initials associated with the user, or the fallbackIcon that matches the action alongside the action that was performed and the time at which it happened.

Audit trails are crucial in a medical context as they provide a detailed record of all actions and changes made to patient data within electronic health records (EHRs) or medical systems. These trails ensure accountability, transparency, and integrity of medical information, aiding in compliance with regulations, detecting unauthorized access, and facilitating investigations in cases of errors or security breaches.

import { AuditTrail } from "@vitality-ds/components";

<AuditTrail
  items={[
    {
      action: "create",
      name: "Olga Campbell",
      dateTime: "2024-03-07T13:07:04.054",
    },
    {
      action: "edit",
      name: "Genevieve Reyes",
      dateTime: "2024-03-07T13:07:04.054",
    },
  ]}
/>

Items take an array of items with an infinite limit. Vitality will automatically stack your audit items on each other in the order they are provided, where the first item in the array will be at the top.

At all times, try to use a provided action; this will increase both the consistency through your app and simplify the creation of an audit item.

Below is the list of preset actions available for use alongside their associated action props:

If a custom action needs to be added, then set action: "custom". This will enable a new prop called actionProps, which must be defined.

1. actionName: The name associated with the audit's action should be in past tense and capitalised whereby action="edit": actionName="Edited"
   • Can be any string
2. preposition: The name's preposition associated with the audit's action. e.g. action="sendBy" : actionName="Sent" preposition="by"
   • Can be one of: "to" | "by" | "for" | "from" | null
3. fallbackIcon: The icon to be used if the name is empty
   • can be any Vitality Icon as a function
   • Will default to contact icon
4. forceIcon: If set to true, will use the fallbackIcon prop instead of the initials
   • can be any boolean

() => {
  const customActionProps = {
    actionName: "Assigned",
    preposition: "to",
    fallbackIcon: AddNote,
    forceIcon: true,
  };

  const assignedNoteAction = {
    action: "custom",
    actionProps: customActionProps,
    name: "Dr Jeremiah McKinney",
    dateTime: "2024-03-07T13:07:04.054",
  };

  return <AuditTrail items={[assignedNoteAction]} />;
};

The name prop is for the associated user or target of the audit action. The name will attempt to auto-populate the initials of the avatar beside it unless otherwise specified. It uses the following logic:

• If the name is three words and the first one is one of the following (case insensitive e.g. Dr, dr, DR), the first word is omitted, and the initials of the other two words are displayed

[
  "dr",
  "mr",
  "mrs",
  "ms",
  "miss",
  "prof",
  "mx",
  "dr.",
  "mr.",
  "mrs.",
  "ms.",
  "miss.",
  "prof.",
  "mx.",
];

• If the name is three words and the first word is not any of the above, use the fallbackIcon

Takes a dateTime string in ISO 8601 format. Displays the date, time and humanized difference. Some databases store Date strings in ISO format with a "T" as a delimiter to separate time from the date, and others use spaces; both will be accepted and parsed by Vitality. If a date is not provided or is invalid, it will not render

() => {
  const validDate1 = "2024-03-07T13:07:04.054";
  const validDate2 = "2024-03-07 13:07:04.054";
  const invalidDate = "07/03/2024";

  return (
    <AuditTrail
      items={[
        {
          action: "create",
          name: "Dr Jeremiah McKinney",
          dateTime: validDate1,
        },
        {
          action: "edit",
          name: "Annie Gilbert",
          dateTime: validDate2,
        },
        {
          action: "sendBy",
          name: "Dr James Vega",
          dateTime: invalidDate,
        },
      ]}
    />
  );
};

It allows users to define the initials passed into the audit trail if required, although this should only be used for unique cases; otherwise, try to use Vitality's default initial generation behaviour or create a custom action that forces the icon to be present.

<AuditTrail
  items={[
    {
      forcedInitials: "C",
      action: "create",
      name: "Dr Antonio Newton",
      dateTime: "2024-03-07 13:07:04.054",
    },
    {
      forcedInitials: "E",
      action: "edit",
      name: "Dr Samuel Grant",
      dateTime: "2024-03-07 13:07:04.054",
    },
  ]}
/>

The source prop specifies the origin or tool from which an action is performed. It accepts a string value and displays it after the name eg."Dr Joe Sullivan (using External App)".

In cases where no name prop is provided, the brackets are omitted, and the source is displayed after the action in place of the name.

<AuditTrail
  items={[
    {
      action: "create",
      name: "Gina Jackson",
      dateTime: "2024-03-07T13:07:04.054",
      source: "External App",
    },
    {
      action: "edit",
      dateTime: "2024-03-07T13:07:04.054",
      source: "External App",
    },
  ]}
/>