qaffee/frontend/src/routes/company/[id]/+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { page } from '$app/stores';
	import { api, type Employee, type Company } from '$lib/api/client';
	import Header from '$lib/components/Header.svelte';

	let employees: Employee[] = [];
	let companyName = '';
	let loading = true;

	$: companyId = Number($page.params.id);

	onMount(async () => {
		const [emps, companies] = await Promise.all([
			api.getEmployees(companyId),
			api.getCompanies()
		]);
		employees = emps;
		const company = companies.find((c: Company) => c.id === companyId);
		companyName = company?.name ?? '';
		loading = false;
	});
</script>

<svelte:head>
	<title>{companyName} – Qaffee</title>
</svelte:head>

<Header title={companyName} backHref="/" />

{#if loading}
	<div style="text-align: center; padding: 48px;">
		<p>Laden...</p>
	</div>
{:else}
	<div class="card-grid" style="padding: 24px;">
		{#each employees as emp}
			<a href="/company/{companyId}/tally?employee={emp.id}" class="card">
				<div style="font-size: 2.5rem;">👤</div>
				<h3>{emp.firstName} {emp.lastName}</h3>
			</a>
		{/each}
	</div>
{/if}