feat: build UI

app/components/dashboard/DashboardHighlightCard.vue

@@ -0,0 +1,41 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  value: String,
+  color: String,
+  icon: String,
+  subheader: Object
+})
+</script>
+<template>
+  <div class="cell">
+    <div class="card h-full">
+      <div class="card-content is-flex is-gap-0.5 is-justify-content-space-between">
+        <div>
+          <p class="fs-14 has-text-grey mb-1">{{ name }}</p>
+          <p class="fsb-26 mb-1 has-text-black">{{ value }}</p>
+          <div v-if="subheader"
+            :class="[
+              'is-flex is-gap-0.5 is-align-items-center',
+              subheader.fluctuation === 'up' ? 'has-text-green-40' : 'has-text-red-40'
+            ]"
+          >
+            <Icon
+              :name="subheader.fluctuation === 'up' ? 'material-symbols:arrow-upward-rounded' :'material-symbols:arrow-downward-rounded'" 
+              color="inherit"
+            />
+            <p class="fs-14">{{ subheader.value }}</p>
+          </div>
+        </div>
+        <div
+          :class="[
+            'rounded-lg size-12 is-flex-shrink-0 is-flex is-justify-content-center is-align-items-center',
+            `has-background-${color}-soft has-text-${color}-40`
+          ]"
+        ">
+          <Icon :name="icon" :size="28" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>