Add the whole api stack for weight

frontend/src/lib/components/Weight/EmptyWeightComp.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner'
+	import type { Err } from '$lib/types'
+	import { type Weight, WeightService } from '$lib/database/weight'
+	import { weightStore } from '$lib/store/weight/weightStore'
+	import { RefreshStores } from '$lib/utils'
+
+	let item: Weight = {
+		weight: 0
+	}
+	let weight: string | null = null
+
+	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+		if (!weight) return
+		weight = weight.trim()
+
+		if (event.key == 'Enter') {
+			event.preventDefault()
+			item.weight = parseFloat(weight)
+
+			const [dbRow, err]: [Weight, Err] = await WeightService.Create(item)
+			weight = ''
+
+			if (err) {
+				toast.error(err)
+				return
+			}
+			RefreshStores()
+		}
+	}
+</script>
+
+<template>
+	<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold">
+		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+		    scope="row">
+		</th>
+		<td bind:innerText={weight}
+		    class:border-[3px]={!weight}
+		    class:border-red-600={!weight}
+		    class="px-6 py-4 overflow-hidden"
+		    contenteditable="true"
+		    autofocus
+		    on:keydown={update}>
+		</td>
+	</tr>
+</template>

frontend/src/lib/components/Weight/WeightComp.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { type Weight, WeightService } from '$lib/database/weight'
+
+	export let item: Weight
+	export let dateColor: string
+
+	let weight: string = item.weight.toString()
+
+	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+		if (event.key == 'Enter') {
+			event.preventDefault()
+			await updateItem()
+		}
+	}
+
+	async function focusOutUpdate() {
+		await updateItem()
+	}
+
+	async function updateItem() {
+		weight = weight.trim()
+
+		item.weight = weight
+
+		const [newItem, err] = await WeightService.Update(item)
+
+		if (newItem && !err) {
+			item = newItem
+		}
+		weight = item.weight
+	}
+</script>
+
+<template>
+	<tr class="border-b border-gray-200 dark:border-gray-700 font-bold text-lg">
+		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+		    style="color: {dateColor}"
+		    scope="row">
+			{item.date}
+		</th>
+		<td class="px-6 py-4">
+			{item.weight}
+		</td>
+	</tr>
+</template>

frontend/src/lib/components/Weight/WeightTable.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { GenerateColor } from '$lib/utils'
+	import EmptyWeightComp from '$components/Weight/EmptyWeightComp.svelte'
+	import WeightComp from '$components/Weight/WeightComp.svelte'
+	import type { Weight } from '$lib/database/weight'
+
+	export let items: Weight[] = []
+
+	const dateColors: Map<string, string> = new Map<string, string>()
+
+	function getDateColor(item: Weight): string {
+		if (!item) return GenerateColor()
+		if (!item.date) return GenerateColor()
+		const date = item.date.toString().split(' ')[0]
+		if (!date) return GenerateColor()
+		if (!dateColors.has(date)) dateColors.set(date, GenerateColor())
+		// THERE'S NOTHING UNDEFINED HERE
+		// WE GOT RID OF UNDEFINED ON LINE 33
+		// ASSHOLE
+		// @ts-ignore
+		return dateColors.get(date)
+	}
+</script>
+
+<template>
+	<div class="relative flex flex-col flex-grow h-[95vh]" data-vaul-drawer-wrapper id="page">
+		<div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
+			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+				<tr>
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
+						Date
+					</th>
+					<th class="px-6 py-3 w-10/12" scope="col">
+						Weight
+					</th>
+				</tr>
+				</thead>
+				<tbody>
+				<EmptyWeightComp />
+				{#each items as f}
+					<WeightComp item="{f}" dateColor="{getDateColor(f)}" />
+				{/each}
+				</tbody>
+			</table>
+		</div>
+		<div>
+		</div>
+	</div>
+</template>