+ {/* Header with Back Button */}
+
+
+
+
Booking History
+
View all changes and events for this booking
+
+
+
+ {/* Filters */}
+
+
+ setSearchTerm(e.target.value)}
+ className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {/* Audit Log List */}
+
+ {filteredLogs.length === 0 ? (
+
+ ) : (
+ filteredLogs.map((log) => {
+ const isExpanded = expandedLogId === log.id;
+ const actionDisplay = actionDisplayMap[log.action] || log.action;
+
+ return (
+
+ {/* Log Header */}
+
+ {/* Icon */}
+
{getActionIcon(log.action)}
+
+ {/* Content */}
+
+
+
+
{actionDisplay}
+
+
+
+ {log.actor.displayName}
+
+ •
+
+
+ {dayjs(log.timestamp).fromNow()}
+
+
+
+
+
+
+
+
+
+ {/* Expanded Details */}
+ {isExpanded && (
+
+
+
+ Type:
+ {log.type}
+
+
+ Actor:
+ {log.actor.type}
+
+
+ Timestamp:
+
+ {dayjs(log.timestamp).format("YYYY-MM-DD HH:mm:ss")}
+
+
+ {log.actor.displayEmail && (
+
+ Actor Email:
+ {log.actor.displayEmail}
+
+ )}
+
+
+ {/* Data JSON */}
+ {log.data && (
+
+
Details:
+
+ {JSON.stringify(log.data, null, 2)}
+
+
+ )}
+
+ )}
+
+ );
+ })
+ )}
+
+
+ {/* Summary Stats */}
+
+
+
+ Showing {filteredLogs.length} of {auditLogs.length} log entries
+
+
+
+