@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/layout/mailing/MailingModule.svelte

@@ -1,448 +1,448 @@
-<script lang="ts">
-	import { PageLoader } from '../../ui/pageLoader/index.js';
-	import { scale, slide } from 'svelte/transition';
-	import {
-		MailSidebar,
-		MailToolBar,
-		type MailingModuleProps,
-		type MailMenu,
-		type MailingMessage,
-		type MailMarkReadToggleType,
-		type MailFavariteToggleType,
-		type MailPageInfo,
-		type MailingActiveBox
-	} from './index.js';
-	import MailingMessageCard from './MailingMessageCard.svelte';
-	import { toast, type CrudResult, type TableFilter } from '../../index.js';
-	import { PageInfo } from '../../utils/paginate.svelte.js';
-	import AlertDialog from '../../ui/alertDialog/AlertDialog.svelte';
-	import MailingMessageViewer from './MailingMessageViewer.svelte';
-	import debounce from 'lodash/debounce';
-
-	let {
-		showSidePanel = true,
-		showPagination = true,
-		showComposeButton = true,
-		showSearch = true,
-		customFilterComponent,
-		showArchiveButton = true,
-		showDeleteButton = true,
-		showMarkReadButton = true,
-		showFavoriteButton = true,
-		showMarkAsSpamButton = true,
-		showReplies = true,
-		showMarkAsImportantButton = true,
-		readInbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
-			return null;
-		}),
-		readOutbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
-			return null;
-		}),
-		deleteEntry = async (id: string | number) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		toggleArchieve = async (id: string | number) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		toggleAsRead = async (id: string | number, type?: MailMarkReadToggleType) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		toggleFavourite = async (id: string | number) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		toggleSpam = async (id: string | number) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		toggelImportant = async (id: string | number) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		readAMessage = async (id: string | number) => {
-			return { success: false, data: null, error: null } as any;
-		}
-	}: MailingModuleProps = $props();
-
-	let activeBox = $state<MailingActiveBox>('inbox');
-	let pageInfo = new PageInfo();
-	let menutItems = $state([
-		{ icon: 'bx:bxs-inbox', title: 'Inbox', count: 0, path: '' },
-		{ icon: 'bx:bxs-send', title: 'Sent', count: 0, path: '' }
-	]);
-	let openDeleteAlert = $state(false);
-	let busy = $state(true);
-	let messages = $state<MailingMessage[]>([]);
-	let pageNumber = $derived(pageInfo.currentPage);
-	let query = $state('');
-	let selectedMessages = $state<number[]>([]);
-	let messageSelected = $state<number>(0);
-
-	let paginationInfo = new PageInfo();
-
-	function toggleSideBar(val: MailMenu) {
-		const { title } = val;
-		if (title === 'Inbox') activeBox = 'inbox';
-		else activeBox = 'outbox';
-	}
-
-	function setActiveMenu(val: MailMenu): boolean {
-		if (activeBox === 'inbox' && val.title === 'Inbox') return true;
-		else if (activeBox === 'outbox' && val.title === 'Sent') return true;
-		else return false;
-	}
-
-	async function fetchData(
-		page: number,
-		params: TableFilter,
-		activeBox: MailingActiveBox = 'inbox'
-	) {
-		try {
-			let currentPage = 0;
-			if (params.search) {
-				pageInfo.setCurrentPage(1);
-				currentPage = pageInfo.currentPage;
-			} else {
-				currentPage = page || pageInfo.currentPage;
-			}
-			let newParams: any = {
-				page: currentPage,
-				pageSize: pageInfo.pageSize,
-				search: params.search ?? '',
-				filter: params.filter ?? {},
-				order: params.order ?? []
-			};
-			let read = activeBox === activeBox ? readInbox : readOutbox;
-			const ret = await read(newParams.page, newParams.pageSize, {
-				...params,
-				filter: {},
-				search: newParams.search ?? ''
-			});
-			if (!ret?.success) {
-				// showError(ret?.message || 'Failed to load data');
-				toast.error(ret?.message || 'Failed to load data');
-				return true;
-			}
-			const xs = ret.data;
-			// console.log({ xs });
-			pageInfo.totalItems = xs.totalCount;
-			pageInfo.setHasNextPage(xs.pageInfo.hasNextPage);
-			pageInfo.setHasPrevPage(xs.pageInfo.hasPreviousPage);
-			// tableData = xs.items;
-			messages = xs.items.map((a) => ({ ...a, isChecked: false }));
-		} catch (e: any) {
-			toast.error(e.message || e);
-		} finally {
-			busy = false;
-		}
-	}
-
-	function handleRefreshClick() {
-		busy = true;
-		fetchData(pageNumber, { search: query }, activeBox);
-	}
-
-	async function handleArchiveClick() {
-		if (selectedMessages.length === 0) return;
-
-		toast.promise(
-			(async () => {
-				const results = [];
-
-				for (const msg of selectedMessages) {
-					const res = await toggleArchieve(msg);
-					results.push(res);
-				}
-				selectedMessages = [];
-				fetchData(pageNumber, { search: query }, activeBox);
-
-				return {
-					message: `${results.length} message(s) archived successfully`,
-					results
-				};
-			})(),
-			{
-				loading: `Archiving message(s)...`,
-				success: (data: any) => data?.message,
-				error: (err: any) => err?.message || 'Failed to archive messages'
-			}
-		);
-	}
-
-	async function handleMarkAsSpam() {
-		if (selectedMessages.length === 0) return;
-
-		toast.promise(
-			(async () => {
-				const results = [];
-
-				for (const msg of selectedMessages) {
-					const res = await toggleSpam(msg);
-					results.push(res);
-				}
-				selectedMessages = [];
-				fetchData(pageNumber, { search: query }, activeBox);
-
-				return {
-					message: `${results.length} message(s) marked as spam successfully`,
-					results
-				};
-			})(),
-			{
-				loading: `Marking message(s) as spam...`,
-				success: (data: any) => data?.message,
-				error: (err: any) => err?.message || 'Failed to archive messages'
-			}
-		);
-	}
-
-	async function handleMarkAsRead(val: MailMarkReadToggleType) {
-		if (selectedMessages.length === 0) return;
-
-		toast.promise(
-			(async () => {
-				const results = [];
-
-				for (const msg of selectedMessages) {
-					const res = await toggleAsRead(msg, val);
-					results.push(res);
-				}
-				selectedMessages = [];
-				fetchData(pageNumber, { search: query }, activeBox);
-
-				return {
-					message: `${results.length} message(s) marked as ${val === 'read' ? 'read' : 'unread'} successfully`,
-					results
-				};
-			})(),
-			{
-				loading: `Marking message(s) as ${val === 'read' ? 'read' : 'unread'}...`,
-				success: (data: any) => data?.message,
-				error: (err: any) =>
-					err?.message || `Failed to ${val === 'read' ? 'read' : 'unread'} messages`
-			}
-		);
-	}
-
-	async function handleMarkAsFavorite(val: MailFavariteToggleType) {
-		if (selectedMessages.length === 0) return;
-
-		toast.promise(
-			(async () => {
-				const results = [];
-
-				for (const msg of selectedMessages) {
-					const res = await toggleFavourite(msg);
-					results.push(res);
-				}
-				selectedMessages = [];
-				fetchData(pageNumber, { search: query }, activeBox);
-
-				return {
-					message: `${results.length} message(s) marked as ${val === 'favorite' ? 'favorite' : 'unfavorite'} successfully`,
-					results
-				};
-			})(),
-			{
-				loading: `Marking message(s) as ${val === 'favorite' ? 'favorite' : 'unfavorite'}...`,
-				success: (data: any) => data?.message,
-				error: (err: any) =>
-					err?.message || `Failed to ${val === 'favorite' ? 'favorite' : 'unfavorite'} messages`
-			}
-		);
-	}
-
-	async function handleMarkAsImportant(val: 'isImportant' | 'notImportant') {
-		if (selectedMessages.length === 0) return;
-
-		toast.promise(
-			(async () => {
-				const results = [];
-
-				for (const msg of selectedMessages) {
-					const res = await toggelImportant(msg);
-					results.push(res);
-				}
-				selectedMessages = [];
-				fetchData(pageNumber, { search: query }, activeBox);
-
-				return {
-					message: `${results.length} message(s) marked as ${val === 'isImportant' ? 'important' : 'not important'} successfully`,
-					results
-				};
-			})(),
-			{
-				loading: `Marking message(s) as ${val === 'isImportant' ? 'important' : 'not important'}...`,
-				success: (data: any) => data?.message,
-				error: (err: any) =>
-					err?.message ||
-					`Failed to ${val === 'isImportant' ? 'important' : 'not important'} messages`
-			}
-		);
-	}
-
-	async function handleDeleteMessages() {
-		if (selectedMessages.length === 0) return;
-
-		toast.promise(
-			(async () => {
-				const results = [];
-
-				for (const msg of selectedMessages) {
-					const res = await deleteEntry(msg);
-					results.push(res);
-				}
-
-				openDeleteAlert = false;
-				selectedMessages = [];
-				fetchData(pageNumber, { search: query }, activeBox);
-
-				return {
-					message: `${results.length} message(s) deleted successfully`,
-					results
-				};
-			})(),
-			{
-				loading: `Deleting message(s)...`,
-				success: (data: any) => data?.message,
-				error: (err: any) => err?.message || 'Failed to delete messages'
-			}
-		);
-	}
-
-	function handleItemChecked({ checked, id }: any) {
-		if (checked) {
-			selectedMessages = [...selectedMessages, id];
-		} else {
-			selectedMessages = selectedMessages.filter((a) => a !== id);
-		}
-	}
-
-	function handleMessageSelected(id: number) {
-		messageSelected = id;
-		selectedMessages = [id];
-	}
-
-	function updatePageInfo(val: MailPageInfo) {
-		// console.log({ val });
-		paginationInfo.totalItems = 1;
-		paginationInfo.setHasNextPage(val.hasNextPage);
-		paginationInfo.setHasPrevPage(val.hasPreviousPage);
-		paginationInfo.setTotalPages(1);
-		paginationInfo.setPageSize(1);
-	}
-
-	const debouncedSearch = debounce(fetchData, 300);
-
-	function handleSearch(val: string) {
-		// query = val;
-		debouncedSearch(pageNumber, { search: val }, activeBox);
-	}
-
-	async function getIsRead(id: number): Promise<boolean> {
-		let status = false;
-		try {
-			const ret = await readAMessage(id);
-			if (!ret?.success) {
-				return false;
-			}
-			status = ret.data?.isRead || false;
-			return status;
-		} catch (error) {}
-		return status;
-	}
-
-	$effect(() => {
-		fetchData(pageNumber, { search: query }, activeBox);
-	});
-</script>
-
-<div class="h-full w-full">
-	<div class="flex h-full w-full gap-2">
-		<div class:hidden={!showSidePanel} class="loginbox h-full w-20 rounded-md bg-white">
-			<MailSidebar onClick={toggleSideBar} menus={menutItems} {setActiveMenu} />
-		</div>
-		<div class="flex w-full flex-grow flex-col gap-1">
-			<div class="loginbox h-14 rounded bg-white px-4">
-				<MailToolBar
-					isFavoriteActive={false}
-					isReadActive={async () => await getIsRead(messageSelected)}
-					showBackButton={Boolean(messageSelected)}
-					{showPagination}
-					{showComposeButton}
-					{showSearch}
-					{showArchiveButton}
-					{showDeleteButton}
-					{showMarkReadButton}
-					{showFavoriteButton}
-					{showMarkAsSpamButton}
-					{customFilterComponent}
-					onRefreshClick={handleRefreshClick}
-					onArchiveClick={handleArchiveClick}
-					onMarkAsSpamClick={handleMarkAsSpam}
-					onToggleMarkReadClick={handleMarkAsRead}
-					onToggleFavoriteClick={handleMarkAsFavorite}
-					onsearchChange={handleSearch}
-					onBackClick={() => {
-						messageSelected = 0;
-						selectedMessages = [];
-					}}
-					onDeleteClick={() => {
-						if (selectedMessages.length === 0) return;
-						openDeleteAlert = true;
-					}}
-					selectedMails={selectedMessages}
-					pageInfo={{
-						currentPage: !messageSelected ? pageInfo.currentPage : paginationInfo.currentPage,
-						pageSize: !messageSelected ? pageInfo.pageSize : paginationInfo.pageSize,
-						totalCount: !messageSelected ? pageInfo.totalItems : paginationInfo.totalItems,
-						hasNextPage: !messageSelected ? pageInfo.hasNextPage : paginationInfo.hasNextPage,
-						hasPreviousPage: !messageSelected ? pageInfo.hasPrevPage : paginationInfo.hasPrevPage
-					}}
-				/>
-			</div>
-
-			<div class="loginbox h-full w-full flex-grow rounded bg-gray-100 p-2">
-				{#if busy}
-					<PageLoader size={50} />
-				{:else if messageSelected}
-					<MailingMessageViewer
-						bind:recordId={messageSelected}
-						readMessage={readAMessage}
-						{updatePageInfo}
-						{showReplies}
-						showHeader={activeBox === 'inbox'}
-					/>
-				{:else if messages.length}
-					<div class="custom-scrollbar h-full w-full overflow-auto" in:slide>
-						{#each messages as message}
-							<MailingMessageCard
-								{...message}
-								onItemChecked={handleItemChecked}
-								showMarkAsFavorite={showFavoriteButton}
-								showMarkAsImportant={showMarkAsImportantButton}
-								toggleFavorited={() => {
-									selectedMessages = [message.id];
-									handleMarkAsFavorite(message.isStared ? 'unfavorite' : 'favorite');
-								}}
-								toggelImportant={() => {
-									selectedMessages = [message.id];
-									handleMarkAsImportant(message.isImportant ? 'notImportant' : 'isImportant');
-								}}
-								onItemSelected={handleMessageSelected}
-							/>
-						{/each}
-					</div>
-				{:else}
-					<div class="grid h-full w-full items-center justify-center p-20" in:scale>
-						<div class="rounded-[5px] bg-yellow-300 px-10 py-5 text-center">No Records Found</div>
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
-</div>
-
-<AlertDialog
-	open={openDeleteAlert}
-	message={`Are you sure you want to delete ${selectedMessages?.length > 1 ? 'these messages' : 'this message'}`}
-	onCancel={() => (openDeleteAlert = false)}
-	onYes={handleDeleteMessages}
-/>
+<script lang="ts">
+	import { PageLoader } from '../../ui/pageLoader/index.js';
+	import { scale, slide } from 'svelte/transition';
+	import {
+		MailSidebar,
+		MailToolBar,
+		type MailingModuleProps,
+		type MailMenu,
+		type MailingMessage,
+		type MailMarkReadToggleType,
+		type MailFavariteToggleType,
+		type MailPageInfo,
+		type MailingActiveBox
+	} from './index.js';
+	import MailingMessageCard from './MailingMessageCard.svelte';
+	import { toast, type CrudResult, type TableFilter } from '../../index.js';
+	import { PageInfo } from '../../utils/paginate.svelte.js';
+	import AlertDialog from '../../ui/alertDialog/AlertDialog.svelte';
+	import MailingMessageViewer from './MailingMessageViewer.svelte';
+	import debounce from 'lodash/debounce';
+
+	let {
+		showSidePanel = true,
+		showPagination = true,
+		showComposeButton = true,
+		showSearch = true,
+		customFilterComponent,
+		showArchiveButton = true,
+		showDeleteButton = true,
+		showMarkReadButton = true,
+		showFavoriteButton = true,
+		showMarkAsSpamButton = true,
+		showReplies = true,
+		showMarkAsImportantButton = true,
+		readInbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
+			return null;
+		}),
+		readOutbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
+			return null;
+		}),
+		deleteEntry = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleArchieve = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleAsRead = async (id: string | number, type?: MailMarkReadToggleType) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleFavourite = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleSpam = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggelImportant = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		readAMessage = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		}
+	}: MailingModuleProps = $props();
+
+	let activeBox = $state<MailingActiveBox>('inbox');
+	let pageInfo = new PageInfo();
+	let menutItems = $state([
+		{ icon: 'bx:bxs-inbox', title: 'Inbox', count: 0, path: '' },
+		{ icon: 'bx:bxs-send', title: 'Sent', count: 0, path: '' }
+	]);
+	let openDeleteAlert = $state(false);
+	let busy = $state(true);
+	let messages = $state<MailingMessage[]>([]);
+	let pageNumber = $derived(pageInfo.currentPage);
+	let query = $state('');
+	let selectedMessages = $state<number[]>([]);
+	let messageSelected = $state<number>(0);
+
+	let paginationInfo = new PageInfo();
+
+	function toggleSideBar(val: MailMenu) {
+		const { title } = val;
+		if (title === 'Inbox') activeBox = 'inbox';
+		else activeBox = 'outbox';
+	}
+
+	function setActiveMenu(val: MailMenu): boolean {
+		if (activeBox === 'inbox' && val.title === 'Inbox') return true;
+		else if (activeBox === 'outbox' && val.title === 'Sent') return true;
+		else return false;
+	}
+
+	async function fetchData(
+		page: number,
+		params: TableFilter,
+		activeBox: MailingActiveBox = 'inbox'
+	) {
+		try {
+			let currentPage = 0;
+			if (params.search) {
+				pageInfo.setCurrentPage(1);
+				currentPage = pageInfo.currentPage;
+			} else {
+				currentPage = page || pageInfo.currentPage;
+			}
+			let newParams: any = {
+				page: currentPage,
+				pageSize: pageInfo.pageSize,
+				search: params.search ?? '',
+				filter: params.filter ?? {},
+				order: params.order ?? []
+			};
+			let read = activeBox === activeBox ? readInbox : readOutbox;
+			const ret = await read(newParams.page, newParams.pageSize, {
+				...params,
+				filter: {},
+				search: newParams.search ?? ''
+			});
+			if (!ret?.success) {
+				// showError(ret?.message || 'Failed to load data');
+				toast.error(ret?.message || 'Failed to load data');
+				return true;
+			}
+			const xs = ret.data;
+			// console.log({ xs });
+			pageInfo.totalItems = xs.totalCount;
+			pageInfo.setHasNextPage(xs.pageInfo.hasNextPage);
+			pageInfo.setHasPrevPage(xs.pageInfo.hasPreviousPage);
+			// tableData = xs.items;
+			messages = xs.items.map((a) => ({ ...a, isChecked: false }));
+		} catch (e: any) {
+			toast.error(e.message || e);
+		} finally {
+			busy = false;
+		}
+	}
+
+	function handleRefreshClick() {
+		busy = true;
+		fetchData(pageNumber, { search: query }, activeBox);
+	}
+
+	async function handleArchiveClick() {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleArchieve(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) archived successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Archiving message(s)...`,
+				success: (data: any) => data?.message,
+				error: (err: any) => err?.message || 'Failed to archive messages'
+			}
+		);
+	}
+
+	async function handleMarkAsSpam() {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleSpam(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as spam successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as spam...`,
+				success: (data: any) => data?.message,
+				error: (err: any) => err?.message || 'Failed to archive messages'
+			}
+		);
+	}
+
+	async function handleMarkAsRead(val: MailMarkReadToggleType) {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleAsRead(msg, val);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as ${val === 'read' ? 'read' : 'unread'} successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as ${val === 'read' ? 'read' : 'unread'}...`,
+				success: (data: any) => data?.message,
+				error: (err: any) =>
+					err?.message || `Failed to ${val === 'read' ? 'read' : 'unread'} messages`
+			}
+		);
+	}
+
+	async function handleMarkAsFavorite(val: MailFavariteToggleType) {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleFavourite(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as ${val === 'favorite' ? 'favorite' : 'unfavorite'} successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as ${val === 'favorite' ? 'favorite' : 'unfavorite'}...`,
+				success: (data: any) => data?.message,
+				error: (err: any) =>
+					err?.message || `Failed to ${val === 'favorite' ? 'favorite' : 'unfavorite'} messages`
+			}
+		);
+	}
+
+	async function handleMarkAsImportant(val: 'isImportant' | 'notImportant') {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggelImportant(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as ${val === 'isImportant' ? 'important' : 'not important'} successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as ${val === 'isImportant' ? 'important' : 'not important'}...`,
+				success: (data: any) => data?.message,
+				error: (err: any) =>
+					err?.message ||
+					`Failed to ${val === 'isImportant' ? 'important' : 'not important'} messages`
+			}
+		);
+	}
+
+	async function handleDeleteMessages() {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await deleteEntry(msg);
+					results.push(res);
+				}
+
+				openDeleteAlert = false;
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) deleted successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Deleting message(s)...`,
+				success: (data: any) => data?.message,
+				error: (err: any) => err?.message || 'Failed to delete messages'
+			}
+		);
+	}
+
+	function handleItemChecked({ checked, id }: any) {
+		if (checked) {
+			selectedMessages = [...selectedMessages, id];
+		} else {
+			selectedMessages = selectedMessages.filter((a) => a !== id);
+		}
+	}
+
+	function handleMessageSelected(id: number) {
+		messageSelected = id;
+		selectedMessages = [id];
+	}
+
+	function updatePageInfo(val: MailPageInfo) {
+		// console.log({ val });
+		paginationInfo.totalItems = 1;
+		paginationInfo.setHasNextPage(val.hasNextPage);
+		paginationInfo.setHasPrevPage(val.hasPreviousPage);
+		paginationInfo.setTotalPages(1);
+		paginationInfo.setPageSize(1);
+	}
+
+	const debouncedSearch = debounce(fetchData, 300);
+
+	function handleSearch(val: string) {
+		// query = val;
+		debouncedSearch(pageNumber, { search: val }, activeBox);
+	}
+
+	async function getIsRead(id: number): Promise<boolean> {
+		let status = false;
+		try {
+			const ret = await readAMessage(id);
+			if (!ret?.success) {
+				return false;
+			}
+			status = ret.data?.isRead || false;
+			return status;
+		} catch (error) {}
+		return status;
+	}
+
+	$effect(() => {
+		fetchData(pageNumber, { search: query }, activeBox);
+	});
+</script>
+
+<div class="h-full w-full">
+	<div class="flex h-full w-full gap-2">
+		<div class:hidden={!showSidePanel} class="loginbox h-full w-20 rounded-md bg-white">
+			<MailSidebar onClick={toggleSideBar} menus={menutItems} {setActiveMenu} />
+		</div>
+		<div class="flex w-full flex-grow flex-col gap-1">
+			<div class="loginbox h-14 rounded bg-white px-4">
+				<MailToolBar
+					isFavoriteActive={false}
+					isReadActive={async () => await getIsRead(messageSelected)}
+					showBackButton={Boolean(messageSelected)}
+					{showPagination}
+					{showComposeButton}
+					{showSearch}
+					{showArchiveButton}
+					{showDeleteButton}
+					{showMarkReadButton}
+					{showFavoriteButton}
+					{showMarkAsSpamButton}
+					{customFilterComponent}
+					onRefreshClick={handleRefreshClick}
+					onArchiveClick={handleArchiveClick}
+					onMarkAsSpamClick={handleMarkAsSpam}
+					onToggleMarkReadClick={handleMarkAsRead}
+					onToggleFavoriteClick={handleMarkAsFavorite}
+					onsearchChange={handleSearch}
+					onBackClick={() => {
+						messageSelected = 0;
+						selectedMessages = [];
+					}}
+					onDeleteClick={() => {
+						if (selectedMessages.length === 0) return;
+						openDeleteAlert = true;
+					}}
+					selectedMails={selectedMessages}
+					pageInfo={{
+						currentPage: !messageSelected ? pageInfo.currentPage : paginationInfo.currentPage,
+						pageSize: !messageSelected ? pageInfo.pageSize : paginationInfo.pageSize,
+						totalCount: !messageSelected ? pageInfo.totalItems : paginationInfo.totalItems,
+						hasNextPage: !messageSelected ? pageInfo.hasNextPage : paginationInfo.hasNextPage,
+						hasPreviousPage: !messageSelected ? pageInfo.hasPrevPage : paginationInfo.hasPrevPage
+					}}
+				/>
+			</div>
+
+			<div class="loginbox h-full w-full flex-grow rounded bg-gray-100 p-2">
+				{#if busy}
+					<PageLoader size={50} />
+				{:else if messageSelected}
+					<MailingMessageViewer
+						bind:recordId={messageSelected}
+						readMessage={readAMessage}
+						{updatePageInfo}
+						{showReplies}
+						showHeader={activeBox === 'inbox'}
+					/>
+				{:else if messages.length}
+					<div class="custom-scrollbar h-full w-full overflow-auto" in:slide>
+						{#each messages as message}
+							<MailingMessageCard
+								{...message}
+								onItemChecked={handleItemChecked}
+								showMarkAsFavorite={showFavoriteButton}
+								showMarkAsImportant={showMarkAsImportantButton}
+								toggleFavorited={() => {
+									selectedMessages = [message.id];
+									handleMarkAsFavorite(message.isStared ? 'unfavorite' : 'favorite');
+								}}
+								toggelImportant={() => {
+									selectedMessages = [message.id];
+									handleMarkAsImportant(message.isImportant ? 'notImportant' : 'isImportant');
+								}}
+								onItemSelected={handleMessageSelected}
+							/>
+						{/each}
+					</div>
+				{:else}
+					<div class="grid h-full w-full items-center justify-center p-20" in:scale>
+						<div class="rounded-[5px] bg-yellow-300 px-10 py-5 text-center">No Records Found</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<AlertDialog
+	open={openDeleteAlert}
+	message={`Are you sure you want to delete ${selectedMessages?.length > 1 ? 'these messages' : 'this message'}`}
+	onCancel={() => (openDeleteAlert = false)}
+	onYes={handleDeleteMessages}
+/>