feat: build UI

app/components/orders/OrderRow.vue

@@ -0,0 +1,85 @@
+<script setup>
+const props = defineProps({
+  id: Number,
+  code: String,
+  employee: Number,
+  employee__name: String,
+  customer: Number,
+  customer__name: String,
+  customer__phone: String,
+  total: String,
+  status: Number,
+  status__name: String,
+  status__color: String,
+  payment_status: Number,
+  payment_status__name: String,
+  payment_status__color: String,
+  delivery_status: Number,
+  delivery_status__name: String,
+  delivery_status__color: String,
+  order__products: Array,
+  create_time: String
+});
+
+const { $dayjs, $shortenCurrency } = useNuxtApp();
+
+</script>
+<template>
+  <tr>
+    <td>
+      <div>
+        <p class="fs-15 font-semibold">{{ code }}</p>
+        <p class="fs-13 has-text-grey">{{ employee__name }}</p>
+      </div>
+    </td>
+    <td>
+      <div>
+        <p>{{ customer__name }}</p>
+        <div class="is-flex is-gap-0.5 is-align-items-center mt-1 fs-13 has-text-grey">
+          <Icon name="material-symbols:call-outline-rounded"
+            :size="15"
+           />
+          <span class="fs-12">{{ customer__phone }}</span>
+        </div>
+      </div>
+    </td>
+    <td class="has-text-right">
+      <div>
+        <p class="font-semibold">{{ $shortenCurrency(total) }}</p>
+        <p class="fs-13 has-text-grey">{{ order__products.length }} SP</p>
+      </div>
+    </td>
+    <td class="has-text-centered">
+      <span :class="[
+        'tag rounded-full',
+        `has-background-${status__color}-80 has-text-${status__color}-25`
+      ]">
+        {{ status__name }}
+      </span>
+    </td>
+    <td>
+      <p :class="`has-text-${payment_status__color}-40`">{{ payment_status__name }}</p>
+    </td>
+    <td>
+      <p :class="`has-text-${delivery_status__color}-40`">{{ delivery_status__name }}</p>
+    </td>
+    <td>
+      <div>
+        <div class="is-flex is-gap-0.5">
+          <Icon :size="18" name="material-symbols:calendar-month-outline-rounded" />
+          <span class="fs-13">{{ $dayjs(create_time).format('L') }}</span>
+        </div>
+        <p class="has-text-grey fs-12">{{ $dayjs(create_time).format('HH:mm') }}</p>
+      </div>
+    </td>
+    <td>
+      <button class="button is-dark fs-13 rounded-full">Xác nhận</button>
+    </td>
+  </tr>
+</template>
+<style scoped>
+td {
+  vertical-align: middle;
+  --bulma-table-cell-padding: 0.75em;
+}
+</style>