update: sheet routes

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

@@ -0,0 +1,62 @@
+<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 {
+		loadRecipe,
+		recipeData,
+		recipeFromServerQuery,
+		recipeOverviewData,
+		referenceFromPage
+	} from '$lib/core/stores/recipeStore.js';
+	import { 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
+		// loadRecipe();
+		refDepartment = get(departmentStore);
+		referenceFromPage.set('overview');
+		// 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>