@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/ui/datatable/Datatable.svelte

@@ -1,525 +1,525 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { page } from '$app/state';
-	import {
-		AlertDialog,
-		Button,
-		Datepicker,
-		Drawer,
-		extractQueryParam,
-		Input,
-		loadFromLocalStorage,
-		Paginate,
-		saveToLocalStorage,
-		Select,
-		Table,
-		TableLoader,
-		toast,
-		type DatatableProps,
-		type IFormChangeProp,
-		type TableFilter
-	} from '../../index.js';
-	import { PageInfo } from '../../utils/paginate.svelte.js';
-	import debounce from 'lodash/debounce';
-	import { onMount } from 'svelte';
-	import { writable } from 'svelte/store';
-	import { slide } from 'svelte/transition';
-
-	let {
-		persitFiltersToUrl = false,
-		showTopActionsBackground = true,
-		fillSpace = true,
-		onAfterAction,
-		hideSearchBox = false,
-		showAdd = true,
-		addButtonLabel = 'Add New',
-		searchPlaceholder = 'Search...',
-		addNewHeading = 'Add New Record',
-		updateHeading = 'Update',
-		headerColor = 'blue',
-		newRecord = {},
-		query = $bindable(''),
-		hiddenColumns = [],
-		customFilterValues = {},
-		onAddNew,
-		busy = false,
-		showFilterDateRange = false,
-		loadingBodySize = 10,
-		loadingHeaderSize = 6,
-		allowLoadAfterCreate = true,
-		allowDispatchAfterAction = false,
-		modalSize = 'md',
-		take = 15,
-		onActionClicked,
-		onRowClicked,
-		onView,
-		onEdit,
-		onDelete,
-		editor,
-		customFilter,
-		handleCheckbox,
-		read = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
-			return null;
-		}),
-		updateEntry = (x: any) => {
-			return null;
-		},
-		createEntry = async (x: any) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		deleteEntry = async (id: string | number) => {
-			return { success: false, data: null, error: null } as any;
-		},
-		modalFooter,
-		showModalButtons = true,
-		customAddAction,
-		...otherProps
-	}: DatatableProps = $props();
-
-	const PAGE_SIZE_KEY = 'customTablePageSize';
-	let editorHeading = $state('');
-	let hideForm = $state(true);
-	let editing = $state(false);
-	let activeEntry = $state<any>({});
-	let pageInfo = new PageInfo();
-	const rangeDate = $derived(getRange());
-	let allColumns = $state(writable<any>([]));
-	let pathname = $state('');
-	let search = $state('');
-	let pageNumber = $state(0);
-	let searchParams = $state<any>(null);
-	let showAlert = $state(false);
-	let tableData = $state<any[]>([]);
-	let isLoading = $state(false);
-	let deleteLoading = $state(false);
-	let isValid = $state(false);
-	let viewing = $state(false);
-	let dataToSave = $state<any>({});
-
-	function addNew() {
-		if (onAddNew) {
-			onAddNew();
-			return;
-		}
-		editorHeading = addNewHeading;
-		activeEntry = (newRecord && { ...newRecord }) || null;
-		editing = false;
-		hideForm = false;
-		viewing = false;
-	}
-
-	async function fetchData(page: number, params: TableFilter) {
-		try {
-			let currentPage = 0;
-			busy = true;
-			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 ?? []
-			};
-			const ret = await read(newParams.page, newParams.pageSize, {
-				...params,
-				filter: { ...customFilterValues },
-				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;
-		} catch (e: any) {
-			toast.error(e.message || e);
-		} finally {
-			busy = false;
-		}
-	}
-
-	const debouncedSearch = debounce(fetchData, 300);
-
-	function onSearchChange(e: Event) {
-		const target = e.target as HTMLInputElement | null;
-		const value = target ? target.value : '';
-		debouncedSearch(pageNumber, { search: value });
-	}
-
-	function getRange() {
-		return { from: undefined, to: undefined };
-	}
-	function handleDateRangeChange(e) {
-		console.log({ e });
-	}
-
-	async function handlePageSize(val: number) {
-		pageInfo.setPageSize(val);
-		await fetchData(pageInfo.currentPage, { search: query });
-
-		saveToLocalStorage(PAGE_SIZE_KEY, { pageSize: val });
-	}
-
-	async function getMore() {
-		if (pageInfo.gotoNext()) {
-			const value = pageInfo.currentPage;
-			if (persitFiltersToUrl) {
-				const current = new URLSearchParams(Array.from(searchParams.entries()) as any);
-
-				if (!value) {
-					current.delete('page');
-				} else {
-					current.set('page', String(value));
-				}
-
-				const search = current.toString();
-				const page = search ? `?${search}` : '';
-				await goto(`${pathname}${page}`);
-			}
-			await fetchData(value, { search: query });
-		}
-	}
-
-	async function getLess() {
-		if (pageInfo.gotoPrev()) {
-			const value = pageInfo.currentPage;
-			if (persitFiltersToUrl) {
-				const current = new URLSearchParams(Array.from(searchParams.entries()) as any);
-				if (!value) {
-					current.delete('page');
-				} else {
-					current.set('page', String(value));
-				}
-				const search = current.toString();
-				const page = search ? `?${search}` : '';
-				await goto(`${pathname}${page}`);
-			}
-			await fetchData(value, { search: query });
-		}
-	}
-
-	function handleExternalFetch(event: CustomEvent) {
-		const { page: customPage, params: customParams } = event.detail || {};
-		const fetchPage = customPage !== undefined ? customPage : pageNumber;
-		const fetchParams = customParams || { search: query };
-
-		fetchData(fetchPage, fetchParams);
-	}
-
-	function handleEdit(val: any) {
-		if (onEdit) {
-			onEdit(val);
-			return;
-		}
-		activeEntry = val;
-		editorHeading = updateHeading;
-		editing = true;
-		hideForm = false;
-		viewing = false;
-	}
-	function handleView(val: any) {
-		if (onView) {
-			onView(val);
-			return;
-		}
-		activeEntry = val;
-		editorHeading = 'View Record';
-		editing = true;
-		hideForm = false;
-		viewing = true;
-	}
-
-	function handleRowClicked(val: any) {
-		if (onRowClicked) {
-			onRowClicked(val);
-			return;
-		}
-		activeEntry = val;
-		editorHeading = addNewHeading;
-		editing = true;
-		hideForm = false;
-	}
-	function handleDelete(val: any) {
-		if (onDelete) {
-			onDelete(val);
-			return;
-		}
-		activeEntry = val;
-		showAlert = true;
-		// editorHeading = updateHeading;
-		// editing = true;
-		// hideForm = true;
-	}
-
-	function closeSideModal() {
-		hideForm = true;
-		activeEntry = null;
-		viewing = false;
-	}
-
-	async function handleAction({ action, data }: { action: string; data: FormData }) {
-		// let formData = data;
-		let formData = dataToSave;
-
-		// console.log({ formData });
-		try {
-			isLoading = true;
-			const ret = editing
-				? await updateEntry({ ...formData, id: activeEntry.id })
-				: await createEntry(formData);
-
-			if (ret?.success) {
-				const successMessage = allowLoadAfterCreate
-					? editing
-						? 'Successfully updated record'
-						: 'Successfully added record'
-					: '';
-				toast.success(ret.message || successMessage);
-				allowLoadAfterCreate && (await fetchData(pageNumber, { search: query }));
-
-				allowDispatchAfterAction &&
-					onAfterAction &&
-					onAfterAction({ type: 'create', values: formData, data: ret.data });
-
-				hideForm = true;
-				activeEntry = {};
-				dataToSave = {};
-				closeSideModal();
-			} else {
-				toast.error(ret?.message || 'Failed');
-			}
-		} catch (error: any) {
-			toast.error(error?.message || 'failed');
-		} finally {
-			isLoading = false;
-		}
-	}
-
-	function closeAlert() {
-		activeEntry = {};
-		if (showAlert) showAlert = false;
-		if (deleteLoading) deleteLoading = false;
-	}
-
-	async function doDelete(id: string) {
-		try {
-			deleteLoading = true;
-			const ret = await deleteEntry(id);
-			if (!ret?.success) {
-				toast.error(ret?.message || 'Failed to delete');
-				return;
-			}
-			toast.success(ret.message);
-			closeAlert();
-			await fetchData(pageNumber, { search: query });
-		} catch (error: any) {
-			toast.error(error?.message || error);
-		} finally {
-			deleteLoading = false;
-		}
-	}
-
-	function handleFormChange(val: IFormChangeProp<any>) {
-		const { values, isValid: validForm } = val;
-		isValid = validForm;
-		dataToSave = values;
-	}
-
-	$effect(() => {
-		searchParams = page.url.searchParams;
-		search = page.url.search;
-		pathname = page.url.pathname;
-
-		pageNumber = extractQueryParam(page.url.search, 'page')
-			? Number(extractQueryParam(page.url.search, 'page'))
-			: pageInfo.currentPage;
-	});
-
-	onMount(() => {
-		const res = loadFromLocalStorage<{ pageSize: string }>(PAGE_SIZE_KEY);
-		if (res?.pageSize) {
-			pageInfo.setPageSize(Number(res?.pageSize));
-		} else {
-			pageInfo.setPageSize(take);
-		}
-
-		if (pageNumber) {
-			pageInfo.setCurrentPage(pageNumber);
-			fetchData(pageNumber, { search: query });
-		} else {
-			fetchData(pageInfo.currentPage, { search: query });
-		}
-
-		// Listen for custom event from parent
-		window.addEventListener('reFetchTableData', handleExternalFetch as EventListener);
-
-		// Cleanup on destroy
-		return () => {
-			window.removeEventListener('reFetchTableData', handleExternalFetch as EventListener);
-		};
-	});
-</script>
-
-<div class="flex h-full w-full flex-col gap-2">
-	<div
-		class="flex w-full flex-col gap-2"
-		class:custom-container={!fillSpace}
-		class:px-4={fillSpace}
-		class:table-background={showTopActionsBackground}
-		class:py-2={!showTopActionsBackground}
-	>
-		<div class="flex w-full flex-col gap-2 sm:justify-between lg:flex-row lg:items-center">
-			<div class="flex w-full flex-col gap-2 sm:flex-row">
-				<div class:hidden={hideSearchBox} class="w-full lg:max-w-lg">
-					<Input
-						value={query}
-						oninput={onSearchChange}
-						placeholder={searchPlaceholder}
-						class="h-9.5 ps-8"
-					>
-						{#snippet left()}
-							<iconify-icon icon="eva:search-outline" class="text-xl text-gray-500"></iconify-icon>
-						{/snippet}
-					</Input>
-				</div>
-				<div class:hidden={!showFilterDateRange} class="w-full sm:max-w-60">
-					<Datepicker
-						placeholder="Date Range"
-						onselect={handleDateRangeChange}
-						range
-						rangeFrom={rangeDate.from}
-						rangeTo={rangeDate.to}
-					/>
-				</div>
-			</div>
-
-			<div class="flex shrink-0 flex-col gap-4 sm:flex-row sm:items-center">
-				<div class="flex items-center gap-2">
-					<div class="text-sm">Page Size</div>
-					<Select
-						value={pageInfo.pageSize}
-						clearable={false}
-						searchable={false}
-						options={[
-							{ value: 15, label: '15' },
-							{ value: 20, label: '20' },
-							{ value: 25, label: '25' },
-							{ value: 30, label: '30' },
-							{ value: 40, label: '40' },
-							{ value: 45, label: '45' },
-							{ value: 50, label: '50' },
-							{ value: 100, label: '100' }
-						]}
-						placeholder="15"
-						onChange={(e) => {
-							const { value } = e;
-							handlePageSize(value);
-						}}
-					/>
-				</div>
-				<div>
-					<Paginate
-						onNextPage={getMore}
-						onPreviousPage={getLess}
-						currentPage={pageInfo.currentPage}
-						totalPages={pageInfo.totalPages}
-						hasNextPage={pageInfo.hasNextPage}
-						hasPreviousPage={pageInfo.hasPrevPage}
-						recordCount={pageInfo.totalItems}
-						refresh={() => {
-							fetchData(pageNumber, { search: query });
-						}}
-						tableColumns={$allColumns}
-						bind:hiddenColumns
-					/>
-				</div>
-				{#if customAddAction}
-					{@render customAddAction?.()}
-				{:else}
-					<div class:hidden={!showAdd} class="shrink-0">
-						<Button onclick={addNew}>{addButtonLabel}</Button>
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
-	<div class:custom-container={!fillSpace} class="flex h-full w-full flex-col gap-2">
-		{@render customFilter?.({
-			pageSize: pageInfo.pageSize ?? 0,
-			currentPage: pageInfo.currentPage ?? 0,
-			search: query ?? ''
-		})}
-		{#if busy}
-			<TableLoader bodySize={loadingBodySize} headerSize={loadingHeaderSize} />
-		{:else}
-			<div class="h-full w-full flex-grow">
-				<Table
-					data={tableData}
-					{headerColor}
-					bind:hiddenColumns
-					onEdit={handleEdit}
-					onView={handleView}
-					onDelete={handleDelete}
-					onRowClicked={handleRowClicked}
-					{onActionClicked}
-					{handleCheckbox}
-					{...otherProps}
-				/>
-			</div>
-		{/if}
-	</div>
-</div>
-
-<Drawer
-	bind:hidden={hideForm}
-	placement="right"
-	activateClickOutside={false}
-	title={editorHeading}
-	size={modalSize}
-	onclose={closeSideModal}
-	form
-	transitionType={slide}
-	transitionParams={{
-		duration: 300,
-		axis: 'x'
-	}}
-	onaction={handleAction}
->
-	{@render editor?.({
-		recordId: activeEntry.id,
-		data: activeEntry,
-		onChange: handleFormChange as any,
-		readonly: viewing
-	})}
-
-	{#snippet footer()}
-		{#if showModalButtons}
-			{#if modalFooter}
-				{@render modalFooter()}
-			{:else if !viewing}
-				<Button disabled={!isValid} loading={isLoading} type="submit" class="w-full" value="submit"
-					>Submit</Button
-				>
-			{/if}
-		{/if}
-	{/snippet}
-</Drawer>
-
-<AlertDialog
-	bind:open={showAlert}
-	message="Are you sure you want to delete this?"
-	icon="ion:trash"
-	onCancel={closeAlert}
-	busy={deleteLoading}
-	onYes={() => doDelete(activeEntry?.id)}
-/>
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import {
+		AlertDialog,
+		Button,
+		Datepicker,
+		Drawer,
+		extractQueryParam,
+		Input,
+		loadFromLocalStorage,
+		Paginate,
+		saveToLocalStorage,
+		Select,
+		Table,
+		TableLoader,
+		toast,
+		type DatatableProps,
+		type IFormChangeProp,
+		type TableFilter
+	} from '../../index.js';
+	import { PageInfo } from '../../utils/paginate.svelte.js';
+	import debounce from 'lodash/debounce';
+	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { slide } from 'svelte/transition';
+
+	let {
+		persitFiltersToUrl = false,
+		showTopActionsBackground = true,
+		fillSpace = true,
+		onAfterAction,
+		hideSearchBox = false,
+		showAdd = true,
+		addButtonLabel = 'Add New',
+		searchPlaceholder = 'Search...',
+		addNewHeading = 'Add New Record',
+		updateHeading = 'Update',
+		headerColor = 'blue',
+		newRecord = {},
+		query = $bindable(''),
+		hiddenColumns = [],
+		customFilterValues = {},
+		onAddNew,
+		busy = false,
+		showFilterDateRange = false,
+		loadingBodySize = 10,
+		loadingHeaderSize = 6,
+		allowLoadAfterCreate = true,
+		allowDispatchAfterAction = false,
+		modalSize = 'md',
+		take = 15,
+		onActionClicked,
+		onRowClicked,
+		onView,
+		onEdit,
+		onDelete,
+		editor,
+		customFilter,
+		handleCheckbox,
+		read = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
+			return null;
+		}),
+		updateEntry = (x: any) => {
+			return null;
+		},
+		createEntry = async (x: any) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		deleteEntry = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		modalFooter,
+		showModalButtons = true,
+		customAddAction,
+		...otherProps
+	}: DatatableProps = $props();
+
+	const PAGE_SIZE_KEY = 'customTablePageSize';
+	let editorHeading = $state('');
+	let hideForm = $state(true);
+	let editing = $state(false);
+	let activeEntry = $state<any>({});
+	let pageInfo = new PageInfo();
+	const rangeDate = $derived(getRange());
+	let allColumns = $state(writable<any>([]));
+	let pathname = $state('');
+	let search = $state('');
+	let pageNumber = $state(0);
+	let searchParams = $state<any>(null);
+	let showAlert = $state(false);
+	let tableData = $state<any[]>([]);
+	let isLoading = $state(false);
+	let deleteLoading = $state(false);
+	let isValid = $state(false);
+	let viewing = $state(false);
+	let dataToSave = $state<any>({});
+
+	function addNew() {
+		if (onAddNew) {
+			onAddNew();
+			return;
+		}
+		editorHeading = addNewHeading;
+		activeEntry = (newRecord && { ...newRecord }) || null;
+		editing = false;
+		hideForm = false;
+		viewing = false;
+	}
+
+	async function fetchData(page: number, params: TableFilter) {
+		try {
+			let currentPage = 0;
+			busy = true;
+			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 ?? []
+			};
+			const ret = await read(newParams.page, newParams.pageSize, {
+				...params,
+				filter: { ...customFilterValues },
+				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;
+		} catch (e: any) {
+			toast.error(e.message || e);
+		} finally {
+			busy = false;
+		}
+	}
+
+	const debouncedSearch = debounce(fetchData, 300);
+
+	function onSearchChange(e: Event) {
+		const target = e.target as HTMLInputElement | null;
+		const value = target ? target.value : '';
+		debouncedSearch(pageNumber, { search: value });
+	}
+
+	function getRange() {
+		return { from: undefined, to: undefined };
+	}
+	function handleDateRangeChange(e) {
+		console.log({ e });
+	}
+
+	async function handlePageSize(val: number) {
+		pageInfo.setPageSize(val);
+		await fetchData(pageInfo.currentPage, { search: query });
+
+		saveToLocalStorage(PAGE_SIZE_KEY, { pageSize: val });
+	}
+
+	async function getMore() {
+		if (pageInfo.gotoNext()) {
+			const value = pageInfo.currentPage;
+			if (persitFiltersToUrl) {
+				const current = new URLSearchParams(Array.from(searchParams.entries()) as any);
+
+				if (!value) {
+					current.delete('page');
+				} else {
+					current.set('page', String(value));
+				}
+
+				const search = current.toString();
+				const page = search ? `?${search}` : '';
+				await goto(`${pathname}${page}`);
+			}
+			await fetchData(value, { search: query });
+		}
+	}
+
+	async function getLess() {
+		if (pageInfo.gotoPrev()) {
+			const value = pageInfo.currentPage;
+			if (persitFiltersToUrl) {
+				const current = new URLSearchParams(Array.from(searchParams.entries()) as any);
+				if (!value) {
+					current.delete('page');
+				} else {
+					current.set('page', String(value));
+				}
+				const search = current.toString();
+				const page = search ? `?${search}` : '';
+				await goto(`${pathname}${page}`);
+			}
+			await fetchData(value, { search: query });
+		}
+	}
+
+	function handleExternalFetch(event: CustomEvent) {
+		const { page: customPage, params: customParams } = event.detail || {};
+		const fetchPage = customPage !== undefined ? customPage : pageNumber;
+		const fetchParams = customParams || { search: query };
+
+		fetchData(fetchPage, fetchParams);
+	}
+
+	function handleEdit(val: any) {
+		if (onEdit) {
+			onEdit(val);
+			return;
+		}
+		activeEntry = val;
+		editorHeading = updateHeading;
+		editing = true;
+		hideForm = false;
+		viewing = false;
+	}
+	function handleView(val: any) {
+		if (onView) {
+			onView(val);
+			return;
+		}
+		activeEntry = val;
+		editorHeading = 'View Record';
+		editing = true;
+		hideForm = false;
+		viewing = true;
+	}
+
+	function handleRowClicked(val: any) {
+		if (onRowClicked) {
+			onRowClicked(val);
+			return;
+		}
+		activeEntry = val;
+		editorHeading = addNewHeading;
+		editing = true;
+		hideForm = false;
+	}
+	function handleDelete(val: any) {
+		if (onDelete) {
+			onDelete(val);
+			return;
+		}
+		activeEntry = val;
+		showAlert = true;
+		// editorHeading = updateHeading;
+		// editing = true;
+		// hideForm = true;
+	}
+
+	function closeSideModal() {
+		hideForm = true;
+		activeEntry = null;
+		viewing = false;
+	}
+
+	async function handleAction({ action, data }: { action: string; data: FormData }) {
+		// let formData = data;
+		let formData = dataToSave;
+
+		// console.log({ formData });
+		try {
+			isLoading = true;
+			const ret = editing
+				? await updateEntry({ ...formData, id: activeEntry.id })
+				: await createEntry(formData);
+
+			if (ret?.success) {
+				const successMessage = allowLoadAfterCreate
+					? editing
+						? 'Successfully updated record'
+						: 'Successfully added record'
+					: '';
+				toast.success(ret.message || successMessage);
+				allowLoadAfterCreate && (await fetchData(pageNumber, { search: query }));
+
+				allowDispatchAfterAction &&
+					onAfterAction &&
+					onAfterAction({ type: 'create', values: formData, data: ret.data });
+
+				hideForm = true;
+				activeEntry = {};
+				dataToSave = {};
+				closeSideModal();
+			} else {
+				toast.error(ret?.message || 'Failed');
+			}
+		} catch (error: any) {
+			toast.error(error?.message || 'failed');
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function closeAlert() {
+		activeEntry = {};
+		if (showAlert) showAlert = false;
+		if (deleteLoading) deleteLoading = false;
+	}
+
+	async function doDelete(id: string) {
+		try {
+			deleteLoading = true;
+			const ret = await deleteEntry(id);
+			if (!ret?.success) {
+				toast.error(ret?.message || 'Failed to delete');
+				return;
+			}
+			toast.success(ret.message);
+			closeAlert();
+			await fetchData(pageNumber, { search: query });
+		} catch (error: any) {
+			toast.error(error?.message || error);
+		} finally {
+			deleteLoading = false;
+		}
+	}
+
+	function handleFormChange(val: IFormChangeProp<any>) {
+		const { values, isValid: validForm } = val;
+		isValid = validForm;
+		dataToSave = values;
+	}
+
+	$effect(() => {
+		searchParams = page.url.searchParams;
+		search = page.url.search;
+		pathname = page.url.pathname;
+
+		pageNumber = extractQueryParam(page.url.search, 'page')
+			? Number(extractQueryParam(page.url.search, 'page'))
+			: pageInfo.currentPage;
+	});
+
+	onMount(() => {
+		const res = loadFromLocalStorage<{ pageSize: string }>(PAGE_SIZE_KEY);
+		if (res?.pageSize) {
+			pageInfo.setPageSize(Number(res?.pageSize));
+		} else {
+			pageInfo.setPageSize(take);
+		}
+
+		if (pageNumber) {
+			pageInfo.setCurrentPage(pageNumber);
+			fetchData(pageNumber, { search: query });
+		} else {
+			fetchData(pageInfo.currentPage, { search: query });
+		}
+
+		// Listen for custom event from parent
+		window.addEventListener('reFetchTableData', handleExternalFetch as EventListener);
+
+		// Cleanup on destroy
+		return () => {
+			window.removeEventListener('reFetchTableData', handleExternalFetch as EventListener);
+		};
+	});
+</script>
+
+<div class="flex h-full w-full flex-col gap-2">
+	<div
+		class="flex w-full flex-col gap-2"
+		class:custom-container={!fillSpace}
+		class:px-4={fillSpace}
+		class:table-background={showTopActionsBackground}
+		class:py-2={!showTopActionsBackground}
+	>
+		<div class="flex w-full flex-col gap-2 sm:justify-between lg:flex-row lg:items-center">
+			<div class="flex w-full flex-col gap-2 sm:flex-row">
+				<div class:hidden={hideSearchBox} class="w-full lg:max-w-lg">
+					<Input
+						value={query}
+						oninput={onSearchChange}
+						placeholder={searchPlaceholder}
+						class="h-9.5 ps-8"
+					>
+						{#snippet left()}
+							<iconify-icon icon="eva:search-outline" class="text-xl text-gray-500"></iconify-icon>
+						{/snippet}
+					</Input>
+				</div>
+				<div class:hidden={!showFilterDateRange} class="w-full sm:max-w-60">
+					<Datepicker
+						placeholder="Date Range"
+						onselect={handleDateRangeChange}
+						range
+						rangeFrom={rangeDate.from}
+						rangeTo={rangeDate.to}
+					/>
+				</div>
+			</div>
+
+			<div class="flex shrink-0 flex-col gap-4 sm:flex-row sm:items-center">
+				<div class="flex items-center gap-2">
+					<div class="text-sm">Page Size</div>
+					<Select
+						value={pageInfo.pageSize}
+						clearable={false}
+						searchable={false}
+						options={[
+							{ value: 15, label: '15' },
+							{ value: 20, label: '20' },
+							{ value: 25, label: '25' },
+							{ value: 30, label: '30' },
+							{ value: 40, label: '40' },
+							{ value: 45, label: '45' },
+							{ value: 50, label: '50' },
+							{ value: 100, label: '100' }
+						]}
+						placeholder="15"
+						onChange={(e) => {
+							const { value } = e;
+							handlePageSize(value);
+						}}
+					/>
+				</div>
+				<div>
+					<Paginate
+						onNextPage={getMore}
+						onPreviousPage={getLess}
+						currentPage={pageInfo.currentPage}
+						totalPages={pageInfo.totalPages}
+						hasNextPage={pageInfo.hasNextPage}
+						hasPreviousPage={pageInfo.hasPrevPage}
+						recordCount={pageInfo.totalItems}
+						refresh={() => {
+							fetchData(pageNumber, { search: query });
+						}}
+						tableColumns={$allColumns}
+						bind:hiddenColumns
+					/>
+				</div>
+				{#if customAddAction}
+					{@render customAddAction?.()}
+				{:else}
+					<div class:hidden={!showAdd} class="shrink-0">
+						<Button onclick={addNew}>{addButtonLabel}</Button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+	<div class:custom-container={!fillSpace} class="flex h-full w-full flex-col gap-2">
+		{@render customFilter?.({
+			pageSize: pageInfo.pageSize ?? 0,
+			currentPage: pageInfo.currentPage ?? 0,
+			search: query ?? ''
+		})}
+		{#if busy}
+			<TableLoader bodySize={loadingBodySize} headerSize={loadingHeaderSize} />
+		{:else}
+			<div class="h-full w-full flex-grow">
+				<Table
+					data={tableData}
+					{headerColor}
+					bind:hiddenColumns
+					onEdit={handleEdit}
+					onView={handleView}
+					onDelete={handleDelete}
+					onRowClicked={handleRowClicked}
+					{onActionClicked}
+					{handleCheckbox}
+					{...otherProps}
+				/>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<Drawer
+	bind:hidden={hideForm}
+	placement="right"
+	activateClickOutside={false}
+	title={editorHeading}
+	size={modalSize}
+	onclose={closeSideModal}
+	form
+	transitionType={slide}
+	transitionParams={{
+		duration: 300,
+		axis: 'x'
+	}}
+	onaction={handleAction}
+>
+	{@render editor?.({
+		recordId: activeEntry.id,
+		data: activeEntry,
+		onChange: handleFormChange as any,
+		readonly: viewing
+	})}
+
+	{#snippet footer()}
+		{#if showModalButtons}
+			{#if modalFooter}
+				{@render modalFooter()}
+			{:else if !viewing}
+				<Button disabled={!isValid} loading={isLoading} type="submit" class="w-full" value="submit"
+					>Submit</Button
+				>
+			{/if}
+		{/if}
+	{/snippet}
+</Drawer>
+
+<AlertDialog
+	bind:open={showAlert}
+	message="Are you sure you want to delete this?"
+	icon="ion:trash"
+	onCancel={closeAlert}
+	busy={deleteLoading}
+	onYes={() => doDelete(activeEntry?.id)}
+/>