Supra_App/src/routes/(authed)/sheet/overview/+page.svelte

<script lang="ts">
	import Button from '$lib/components/ui/button/button.svelte';
	import Input from '$lib/components/ui/input/input.svelte';
	import { SearchIcon } from '@lucide/svelte/icons';

	import { onDestroy, onMount } from 'svelte';
	import {
		recipeData,
		recipeFromServerQuery,
		recipeOverviewData,
		referenceFromPage
	} from '$lib/core/stores/recipeStore.js';
	import { sendCommandRequest, sendMessage } from '$lib/core/handlers/ws_messageSender.js';
	import { auth } from '$lib/core/stores/auth.js';
	import { get } from 'svelte/store';
	import { getRecipes } from '$lib/core/client/server.js';
	import { departmentStore } from '$lib/core/stores/departments';

	let refDepartment: string | undefined = $state();

	onMount(async () => {
		// do load recipe
		refDepartment = get(departmentStore);
		referenceFromPage.set('overview');

		sendCommandRequest('sheet', {
			country: refDepartment,
			param: 'catalogs'
		});

		// await getRecipes();
	});

	// onDestroy(() => {
	// 	unsubRecipeData();
	// });
</script>

<div class="mx-8 flex">
	<!-- header -->
	<div class="w-full">
		<div class="mb-4 flex items-center justify-between">
			<div>
				<h1 class="m-8 text-4xl font-bold">Layout overview [ {refDepartment} ]</h1>
				<p class="mx-8 my-0 text-muted-foreground">
					Display menus from the spreadsheet current selected country
				</p>
			</div>
			<div class="mx-8 my-4 flex gap-2">
				<Button variant="default">+ Create Menu</Button>
			</div>
		</div>
		<!-- search bar -->
		<!-- <div class="mx-4 my-8 flex w-full items-center justify-center gap-2">
			<SearchIcon />
			<Input type="text" placeholder="Search by id, product code, name or material" class="" />
		</div> -->
		<!-- filter -->

		<!-- table -->

		<!-- <div class="w-full overflow-auto">
			<DataTable data={data.recipes} refPage="overview" {columns} />
		</div> -->
	</div>
</div>