From 6758e0e9eab511aa9aff2660e8e16296771ec9ec Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvain@mailo.com>
Date: Sun, 13 Oct 2024 22:51:00 +0200
Subject: [PATCH] feat: categories count dashboard

---
 src/components/NumberDisplay.vue | 15 +++++++++++++++
 src/views/HomeView.vue           | 19 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/components/NumberDisplay.vue

diff --git a/src/components/NumberDisplay.vue b/src/components/NumberDisplay.vue
new file mode 100644
index 0000000..76c7727
--- /dev/null
+++ b/src/components/NumberDisplay.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+	label: string
+	data: number | undefined
+}>()
+</script>
+
+<template>
+	<VSkeletonLoader v-if="!props.data" width="100" height="100" type="heading" />
+
+	<VCard v-else class="d-flex align-center justify-center flex-column pa-4" variant="flat">
+		<p class="text-h4">{{ props.data }}</p>
+		<h2 class="text-subtitle-1">{{ props.label }}</h2>
+	</VCard>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3a8bbad..2a732c9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import NumberDisplay from '@/components/NumberDisplay.vue'
+import { useCategoriesStore } from '@/stores/categories'
+import { onMounted, ref } from 'vue'
+
+const categoriesStore = useCategoriesStore()
+
+const totalCategories = ref(undefined as number | undefined)
+
+onMounted(async () => {
+	const fetchedCategories = await categoriesStore.getCategories()
+	const response = await fetchedCategories.json()
+	totalCategories.value = response.total
+})
+</script>
 
 <template>
 	<h1 class="text-h3">Dashboard</h1>
+	<section class="d-flex align-center">
+		<NumberDisplay label="Categories" :data="totalCategories" />
+	</section>
 </template>