feat: build UI

app/components/orders/OrderHighlightCard.vue

@@ -0,0 +1,34 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  value: Number,
+  icon: String,
+  color: String,
+  unit: String
+})
+
+</script>
+<template>
+  <div class="cell">
+    <div class="card h-full">
+      <div class="card-content is-flex is-gap-1 is-justify-content-space-between is-align-items-center">
+        <div>
+          <p class="has-text-grey">{{ name }}</p>
+          <div class="is-flex is-gap-1 is-align-items-center">
+            <p class="fs-26 font-bold">{{ value }}</p>
+            <span class="fs-13 has-text-grey">{{ unit }}</span>
+          </div>
+        </div>
+        <div 
+          :class="['p-3 is-flex', `has-background-${color}-soft`]" style="border-radius: 8px"
+        >
+          <Icon
+            :name="icon"
+            :size="26"
+            :class="`has-text-${color}-40`"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>