Feat: add modal to display for evaluation information in Feedbacks

src/lib/components/admin/Evaluations/Feedbacks.svelte

@@ -18,6 +18,7 @@
 	import CloudArrowUp from '$lib/components/icons/CloudArrowUp.svelte';
 	import Pagination from '$lib/components/common/Pagination.svelte';
 	import FeedbackMenu from './FeedbackMenu.svelte';
+	import FeedbackModal from './FeedbackModal.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 
 	export let feedbacks = [];
@@ -48,6 +49,14 @@
 		lost: number;
 	};
 
+	let showFeedbackModal = false;
+	let selectedFeedback = null;
+
+	const openFeedbackModal = (feedback) => {
+		showFeedbackModal = true;
+		selectedFeedback = feedback;
+	};
+
 	//////////////////////
 	//
 	// CRUD operations
@@ -106,6 +115,8 @@
 	};
 </script>
 
+<FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} />
+
 <div class="mt-0.5 mb-2 gap-1 flex flex-row justify-between">
 	<div class="flex md:self-center text-lg font-medium px-0.5">
 		{$i18n.t('Feedback History')}
@@ -167,7 +178,10 @@
 			</thead>
 			<tbody class="">
 				{#each paginatedFeedbacks as feedback (feedback.id)}
-					<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
+					<tr
+						class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+						on:click={() => openFeedbackModal(feedback)}
+					>
 						<td class=" py-0.5 text-right font-semibold">
 							<div class="flex justify-center">
 								<Tooltip content={feedback?.user?.name}>