Update imports and add exception column to report table

Sveltekit-App/src/routes/home/reports/source-account-create-error/+page.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import Progress from '$lib/Components/Progress.svelte';
 	import { TriggerCodeModal } from '$lib/Utils';
-	import type { TableSource } from '@skeletonlabs/skeleton';
-	import { Table, getModalStore, tableMapperValues } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
 	import alasql from 'alasql';
-	import type { EventDocument, Search } from 'sailpoint-api-client';
-	import { onMount } from 'svelte';
 
 	const modalStore = getModalStore();
 
@@ -14,21 +12,26 @@
 	let report: any;
 
 	let reportPromise = new Promise<
-		{ failure: string; source: string; name: string; failures: number }[]
+		{ failure: string; source: string; name: string; exception: string; failures: number }[]
 	>((resolve, reject) => {
 		data.errorEvents.then((data) => {
 			let reportResult = [];
 
 			for (let row of data) {
+				console.log(row);
+
 				reportResult.push({
 					name: row.target?.name,
 					source: row.attributes?.sourceName,
-					failure: row.name
+					failure: row.name,
+					exception: row.attributes?.errors
 				});
 			}
 
+			console.log(reportResult);
+
 			let res = alasql(
-				'SELECT failure, source, name, count(*) as failures FROM ? GROUP BY failure, source, name',
+				'SELECT failure, source, name, exception, count(*) as failures FROM ? GROUP BY failure, source, name, exception',
 				[reportResult]
 			);
 
@@ -37,6 +40,12 @@
 			resolve(res);
 		});
 	});
+
+	const popupHover: PopupSettings = {
+		event: 'hover',
+		target: 'popupHover',
+		placement: 'top'
+	};
 </script>
 
 <div class=" flex justify-center flex-col align-middle gap-2">
@@ -56,20 +65,24 @@
 			</div>
 		{:else}
 			<div class="table-container">
-				<table class="table">
+				<table class="table table-interactive">
 					<thead class="table-head">
 						<th>Source</th>
 						<th>Failure</th>
 						<th>Name</th>
 						<th>Count</th>
+						<th>Exception</th>
 					</thead>
 					<tbody>
 						{#each report as row}
-							<tr>
+							<tr on:click={() => TriggerCodeModal(row, modalStore)}>
 								<td>{row.source}</td>
 								<td>{row.failure}</td>
 								<td>{row.name}</td>
 								<td>{row.failures}</td>
+								<td class="max-w-36">
+									<p class="truncate">{row.exception}</p>
+								</td>
 							</tr>
 						{/each}
 					</tbody>