changes

app/components/orders/OrderPaymentTab.vue

@@ -0,0 +1,25 @@
+<script setup>
+const props = defineProps({
+  order: Object
+});
+const { $numtoString } = useNuxtApp();
+</script>
+
+<template>
+  <div>
+    <div class="is-flex is-gap-2">
+      <div class="is-flex-grow-1 p-3 rounded-md has-background-grey-95">
+        <p class="fs-13 has-text-grey">Tổng tiền</p>
+        <p class="font-bold">{{ $numtoString(order.total, { hasUnit: true }) }}</p>
+      </div>
+      <div class="is-flex-grow-1 p-3 rounded-md has-background-success-95">
+        <p class="fs-13 has-text-success-40">Đã thanh toán</p>
+        <p class="font-bold has-text-success-30">0 đ</p>
+      </div>
+    </div>
+    <div class="p-4 mt-4 rounded-md has-background-danger-95">
+      <p class="fs-13 has-text-danger-50">Còn lại</p>
+      <p class="fs-20 font-bold has-text-danger-40">{{ $numtoString(order.total, { hasUnit: true }) }}</p>
+    </div>
+  </div>
+</template>