feat: build UI

app/components/orders/PipelinePhase.vue

@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  value: Number,
+  icon: String,
+  color: String,
+  index: Number,
+});
+
+const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
+</script>
+<template>
+  <div class="is-flex-grow-1">
+    <div class="is-flex is-justify-content-space-between">
+      <p :class="`has-text-${color}-40`">{{ name }}</p>
+      <p :class="['fs-18 font-bold', `has-text-${color}-30`]">{{ value }}</p>
+    </div>
+    <progress 
+      :class="['progress is-small mt-2', `is-${color}`]"
+      value="20"
+      max="100"
+    >
+    </progress>
+  </div>
+  <div 
+    v-if="index < 4"
+    class="is-flex is-justify-content-center is-align-items-center"
+    style="width: 60px; height: 48px"
+  >
+    <Icon 
+      name="material-symbols:arrow-forward-rounded" 
+      :size="24"
+      class="has-text-grey-70"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+$progress-value-background-color: 'red';
+
+.progress {
+  --bulma-size-small: 0.5rem;
+  background-color: v-bind(progressUnfilled);
+}
+</style>