Audit log table and modal

frontend/src/hooks/index.ts

@@ -1,4 +1,6 @@
 export * from "./useAccessLists";
+export * from "./useAuditLog";
+export * from "./useAuditLogs";
 export * from "./useDeadHosts";
 export * from "./useHealth";
 export * from "./useHostReport";

frontend/src/hooks/useAuditLog.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { type AuditLog, getAuditLog } from "src/api/backend";
+
+const fetchAuditLog = (id: number) => {
+	return getAuditLog(id, ["user"]);
+};
+
+const useAuditLog = (id: number, options = {}) => {
+	return useQuery<AuditLog, Error>({
+		queryKey: ["audit-log", id],
+		queryFn: () => fetchAuditLog(id),
+		staleTime: 5 * 60 * 1000, // 5 minutes
+		...options,
+	});
+};
+
+export { useAuditLog };

frontend/src/hooks/useAuditLogs.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { type AuditLog, type AuditLogExpansion, getAuditLogs } from "src/api/backend";
+
+const fetchAuditLogs = (expand?: AuditLogExpansion[]) => {
+	return getAuditLogs(expand);
+};
+
+const useAuditLogs = (expand?: AuditLogExpansion[], options = {}) => {
+	return useQuery<AuditLog[], Error>({
+		queryKey: ["audit-logs", { expand }],
+		queryFn: () => fetchAuditLogs(expand),
+		staleTime: 10 * 1000,
+		...options,
+	});
+};
+
+export { fetchAuditLogs, useAuditLogs };