Supra_App/src/routes/(authed)/recipe/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 DataTable from './data-table.svelte';
	import { columns, type RecipeOverview } from './columns';
	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';

	let data: { recipes: RecipeOverview[] } = $state({
		recipes: []
	});

	let unsubRecipeData = recipeOverviewData.subscribe((rd) => {
		if (rd) {
			data.recipes = rd == null ? [] : rd;
		}
	});

	onMount(async () => {
		// do load recipe
		// loadRecipe();
		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">Overview</h1>
				<p class="mx-8 my-0 text-muted-foreground">
					Display menus from the 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>