Refactor BuildStats for dynamic rendering and reuse

Replaced hardcoded items with dynamically generated lists for stats and LTO sections. Introduced reusable styles and refactored the `getStats` function to use async/await, ensuring better readability and maintainability. Enhanced code structure for easier updates and scalability.

frontend/src/components/BuildStats.vue

@@ -1,17 +1,26 @@
 <template>
-  <v-sheet class="d-flex" color="transparent" style="gap: 50px">
+  <v-sheet :style="sheetStyles" class="d-flex" color="transparent">
-    <v-list bg-color="transparent" class="d-flex" style="border-radius: 5px">
+    <!-- Dynamically render the "Stats" section -->
+    <v-list :style="listStyles" bg-color="transparent" class="d-flex">
       <v-list-subheader>Stats:</v-list-subheader>
-      <v-list-item style="color: #069b35" title="latest">{{ stats.latest }}</v-list-item>
+      <v-list-item
-      <v-list-item style="color: #b97808" title="queued">{{ stats.queued }}</v-list-item>
+        v-for="item in statsList"
-      <v-list-item style="color: #878787" title="skipped">{{ stats.skipped }}</v-list-item>
+        :key="item.label"
-      <v-list-item style="color: #b30303" title="failed">{{ stats.failed }}</v-list-item>
+        :style="{ color: item.color }"
+        :title="item.label">
+        {{ item.value }}
+      </v-list-item>
     </v-list>
-    <v-list bg-color="transparent" class="d-flex" style="border-radius: 5px">
+    <!-- Dynamically render the "LTO" section -->
+    <v-list :style="listStyles" bg-color="transparent" class="d-flex">
       <v-list-subheader>LTO:</v-list-subheader>
-      <v-list-item style="color: #069b35" title="enabled">{{ stats.lto.enabled }}</v-list-item>
+      <v-list-item
-      <v-list-item style="color: #b30303" title="disabled">{{ stats.lto.disabled }}</v-list-item>
+        v-for="item in ltoList"
-      <v-list-item style="color: #878787" title="unknown">{{ stats.lto.unknown }}</v-list-item>
+        :key="item.label"
+        :style="{ color: item.color }"
+        :title="item.label">
+        {{ item.value }}
+      </v-list-item>
     </v-list>
   </v-sheet>
 </template>
@@ -20,6 +29,20 @@
 import { onMounted, ref } from 'vue'
 import { type Stats } from '@/types/Stats'
 
+// Define reusable styles and colors
+const sheetStyles = { gap: '50px' }
+const listStyles = { borderRadius: '5px' }
+const colors = {
+  latest: '#069b35',
+  queued: '#b97808',
+  skipped: '#878787',
+  failed: '#b30303',
+  enabled: '#069b35',
+  disabled: '#b30303',
+  unknown: '#878787'
+}
+
+// Reactive stats object
 const stats = ref<Stats>({
   latest: 0,
   queued: 0,
@@ -32,21 +55,47 @@ const stats = ref<Stats>({
   }
 })
 
-const getStats = () => {
+// Map stats and LTO data for simpler rendering in the template
-  fetch('https://api.alhp.dev/stats')
+const statsList = ref([
-    .then((response) => {
+  { label: 'latest', value: stats.value.latest, color: colors.latest },
+  { label: 'queued', value: stats.value.queued, color: colors.queued },
+  { label: 'skipped', value: stats.value.skipped, color: colors.skipped },
+  { label: 'failed', value: stats.value.failed, color: colors.failed }
+])
+
+const ltoList = ref([
+  { label: 'enabled', value: stats.value.lto.enabled, color: colors.enabled },
+  { label: 'disabled', value: stats.value.lto.disabled, color: colors.disabled },
+  { label: 'unknown', value: stats.value.lto.unknown, color: colors.unknown }
+])
+
+// Function to fetch stats data (refactored with async/await)
+const getStats = async (): Promise<void> => {
+  try {
+    const response = await fetch('https://api.alhp.dev/stats')
     if (!response.ok) throw new Error(response.statusText)
-      return response.json()
+
-    })
+    const statistics = await response.json()
-    .then((statistics) => {
     stats.value = statistics
-    })
+
-    .catch((error) => {
+    // Update lists with fresh data
-      console.error(error)
+    statsList.value = [
-    })
+      { label: 'latest', value: stats.value.latest, color: colors.latest },
-    .finally(() => {})
+      { label: 'queued', value: stats.value.queued, color: colors.queued },
+      { label: 'skipped', value: stats.value.skipped, color: colors.skipped },
+      { label: 'failed', value: stats.value.failed, color: colors.failed }
+    ]
+    ltoList.value = [
+      { label: 'enabled', value: stats.value.lto.enabled, color: colors.enabled },
+      { label: 'disabled', value: stats.value.lto.disabled, color: colors.disabled },
+      { label: 'unknown', value: stats.value.lto.unknown, color: colors.unknown }
+    ]
+  } catch (error) {
+    console.error('Failed to fetch stats:', error)
+  }
 }
 
+// Fetch stats on mount
 onMounted(() => {
   getStats()
 })