feat: build UI

app/components/dashboard/Driver.vue

@@ -0,0 +1,35 @@
+<script setup>
+import AvatarBox from '@/components/dashboard/AvatarBox.vue';
+
+const props = defineProps({
+  name: String,
+  status: String,
+  deliveries: Number,
+  deliveries_completed: Number,
+})
+</script>
+<template>
+  <div 
+    class="is-flex is-gap-2 fs-14 p-3 rounded-lg"
+    :style="{
+      border: '1px solid var(--bulma-grey-80)',
+    }"
+  >
+    <AvatarBox :text="name.slice(0, 2)" />
+    <div class="is-flex-grow-1">
+      <div class="is-flex is-gap-1 is-align-items-center">
+        <p>{{ name }}</p>
+        <span :class="['tag', status === 'Đang giao' ? 'is-warning' : 'is-success']">{{ status }}</span>
+      </div>
+      <p class="fs-13 has-text-grey">Đơn: {{ deliveries_completed }}/{{ deliveries }}</p>
+      <progress 
+        v-if="deliveries !== deliveries_completed"
+        class="progress is-small is-primary mt-2"
+        style="--bulma-size-small: 0.4rem;"
+        :value="deliveries_completed"
+        :max="deliveries"
+      >
+      </progress>
+    </div>
+  </div>
+</template>