Add basic frontend structure

frontend/src/lib/component/DashboardCard.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import i18n from '$lib/i18n'
+
+  let props: {
+    title: string
+    icon: string
+    value: number
+    previousValue: number
+    unit?: string
+  } = $props()
+
+  let diff = $derived(
+    Math.round(((props.previousValue - props.value) / props.previousValue) * 100 * 10 * -1) / 10
+  )
+</script>
+
+<div class="card bg-base-100 shadow rounded-md basis-0 grow">
+  <div class="card-body gap-2">
+    <div class="flex items-start justify-between gap-2 text-sm">
+      <div>
+        <p class="text-base-content/80 font-medium">
+          {props.title}
+        </p>
+        <div class="mt-3 flex items-center gap-2">
+          <p class="text-2xl font-semibold">
+            {props.value}{#if props.unit}{' ' + props.unit}{/if}
+          </p>
+          {#if diff > 0}
+            <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
+              <i class="bi bi-arrow-up-right"></i>{diff}%
+            </div>
+          {:else if diff < 0}
+            <div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
+              <i class="bi bi-arrow-down-right"></i>{diff}%
+            </div>
+          {:else}
+            <div class="badge badge-soft badge-warning badge-sm gap-0.5 px-1 font-medium">
+              <i class="bi bi-arrow-right"></i>{diff}%
+            </div>
+          {/if}
+        </div>
+      </div>
+      <i class="bi {props.icon} text-primary text-4xl"></i>
+    </div>
+    <p class="text-base-content/60 text-sm">
+      {$i18n.t('dashboard:cards.lastMonth', { val: props.previousValue, unit: props.unit })}
+    </p>
+  </div>
+</div>