feat: build UI

app/components/dashboard/OrderStatusCard.vue

@@ -0,0 +1,33 @@
+<script setup>
+const props = defineProps({
+  id: Number,
+  code: String,
+  name: String,
+  value: Number,
+  icon: String,
+  color: String,
+})
+</script>
+<template>
+  <div class="cell">
+    <div class="card" :style="{ border: `1px solid var(--bulma-${color}-70)` }">
+      <div class="card-content is-flex is-flex-direction-column is-align-items-center is-gap-1">
+        <div 
+          :class="[
+            'p-3 is-flex rounded-full',
+            `has-background-${color}-90`,
+            `has-text-${color}-40`,
+          ]" >
+          <Icon
+            :name="icon"
+            :size="24"
+          />
+        </div>
+        <div class="is-flex is-flex-direction-column is-align-items-center">
+          <p class="fs-24 font-bold">{{ value }}</p>
+          <p class="has-text-grey">{{ name }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>