plc.directory mirror
seiso.moe
1<script lang="ts">
2 export let auditData: { canonical: any[], nullified: any[] } | null = null;
3
4 function formatTimestamp(timestamp: string | number | Date) {
5 try {
6 return new Date(timestamp).toLocaleString();
7 } catch {
8 return 'Invalid date';
9 }
10 }
11
12 function getOperationType(operation: any) {
13 if (operation.operation) return operation.operation.type;
14 if (operation.type) return operation.type;
15 return 'Unknown';
16 }
17</script>
18
19{#if auditData}
20 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors">
21 <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">Audit Log</h2>
22
23 <div class="space-y-4">
24 {#if auditData.canonical && auditData.canonical.length > 0}
25 <div>
26 <h3 class="text-lg font-medium mb-3 text-gray-800 dark:text-gray-200">Valid Operations</h3>
27 <div class="space-y-2">
28 {#each auditData.canonical.slice().reverse() as operation, index}
29 <div class="flex items-center justify-between p-3
30 bg-green-50 dark:bg-green-900/20
31 border border-green-200 dark:border-green-800
32 rounded-md transition-colors">
33 <div class="flex-1">
34 <div class="flex items-center gap-3">
35 <span class="font-medium text-gray-900 dark:text-white">
36 Operation #{auditData.canonical.length - index}
37 </span>
38 <span class="text-sm text-gray-600 dark:text-gray-400">
39 {getOperationType(operation)}
40 </span>
41 </div>
42 <div class="mt-1 text-sm text-gray-600 dark:text-gray-400">
43 {#if operation.createdAt}
44 <div>Created At: {formatTimestamp(operation.createdAt)}</div>
45 {/if}
46 <div class="font-mono break-all">CID: {operation.cid}</div>
47 </div>
48 </div>
49 <div class="text-xs bg-green-100 dark:bg-green-800/30
50 text-green-700 dark:text-green-300
51 px-2 py-1 rounded transition-colors">
52 VALID
53 </div>
54 </div>
55 {/each}
56 </div>
57 </div>
58 {/if}
59
60 {#if auditData.nullified && auditData.nullified.length > 0}
61 <div>
62 <h3 class="text-lg font-medium mb-3 text-gray-800 dark:text-gray-200">Nullified Operations</h3>
63 <div class="space-y-2">
64 {#each auditData.canonical.slice().reverse() as operation, index}
65<div class="flex items-center justify-between p-3
66 bg-purple-50 dark:bg-purple-900/20
67 border border-purple-200 dark:border-purple-800
68 rounded-md transition-colors">
69 <div class="flex-1">
70 <div class="flex items-center gap-3">
71 <div class="w-3 h-3 bg-purple-500 rounded-full"></div>
72 <span class="font-medium text-gray-900 dark:text-white">
73 Nullified #{auditData.canonical.length - index}
74 </span>
75 <span class="text-sm text-gray-600 dark:text-gray-400">
76 {getOperationType(operation)}
77 </span>
78 </div>
79 <div class="mt-1 ml-6 text-sm text-gray-600 dark:text-gray-400">
80 {#if operation.createdAt}
81 <div>Created At: {formatTimestamp(operation.createdAt)}</div>
82 {/if}
83 <div class="font-mono break-all">CID: {operation.cid}</div>
84 </div>
85 </div>
86 <div class="text-xs bg-purple-100 dark:bg-purple-800/30
87 text-purple-700 dark:text-purple-300
88 px-2 py-1 rounded transition-colors">
89 NULLIFIED
90 </div>
91 </div>
92 {/each}
93 </div>
94 </div>
95 {/if}
96
97 {#if (!auditData.canonical || auditData.canonical.length === 0) && (!auditData.nullified || auditData.nullified.length === 0)}
98 <div class="text-center py-8 text-gray-500 dark:text-gray-400">
99 <p>No audit log entries found</p>
100 </div>
101 {/if}
102 </div>
103 </div>
104{/if}