changes

app/components/orders/OrderDeliveryTab.vue

@@ -9,7 +9,10 @@ const props = defineProps({
 <template>
   <div class="is-flex is-flex-direction-column is-gap-2">
     <div
-      class="p-4 rounded-md has-background-primary-95 is-flex is-justify-content-space-between is-align-items-center"
+      v-if="invoice.delivery"
+      class="p-4 rounded-md is-flex is-justify-content-space-between is-align-items-center"
+      :class="`has-background-${invoice.delivery__delivery_status__color}-95`"
+      :style="{ border: `1px solid var(--bulma-${invoice.delivery__delivery_status__color}-80)` }"
     >
       <div>
         <p class="fs-14 has-text-grey-40">Mã giao hàng</p>
@@ -28,7 +31,10 @@ const props = defineProps({
           </button>
         </p>
       </div>
-      <p class="font-medium has-text-primary-50">
+      <p
+        class="font-medium"
+        :class="`has-text-${invoice.delivery__delivery_status__color}-40`"
+      >
         {{ capitalize(invoice.delivery__delivery_status__name) }}
       </p>
     </div>

app/components/orders/OrderProductTab.vue

@@ -27,7 +27,8 @@ const invoiceProducts = computed(() => {
       <div
         v-for="product in invoiceProducts"
         :key="product.id"
-        class="p-4 has-background-white-ter rounded-md is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end"
+        class="p-4 has-background-grey-100 rounded-md is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end"
+        style="border: 1px solid var(--bulma-grey-90)"
       >
         <div class="is-flex-grow-1 is-flex is-gap-2">
           <NuxtImg

app/components/orders/SelectedOrder.vue

@@ -45,12 +45,23 @@ const activeTab = ref(tabs[0]);
 <template>
   <div v-if="invoice">
     <div class="block">
-      <div class="is-flex is-gap-1.5 is-align-items-center">
+      <div class="is-flex is-align-items-center">
         <span class="fs-17 font-bold">{{ invoice.code }}</span>
+        <button
+          class="button size-7 ml-1.5 is-primary is-light is-small p-0 rounded-full"
+          @click="$copyToClipboard(invoice.code)"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:content-copy-outline-rounded"
+              :size="16"
+            />
+          </span>
+        </button>
         <span
           :class="[
-            'tag rounded-full',
-            `has-background-${invoice.invoice_status__color}-80 has-text-${invoice.invoice_status__color}-25`,
+            'tag rounded-full ml-3',
+            `has-background-${invoice.invoice_status__color}-90 has-text-${invoice.invoice_status__color}-25`,
           ]"
         >
           {{ invoice.invoice_status__name }}