changes

app/components/orders/Orders.vue

@@ -1,42 +1,10 @@
 <script setup>
-import OrderHighlightCard from "~/components/orders/OrderHighlightCard.vue";
+import { useInvoices } from "~/components/orders/composables/useInvoices";
+import OrderHighlights from "~/components/orders/OrderHighlights.vue";
 import OrderPipeline from "~/components/orders/OrderPipeline.vue";
 import OrdersTable from "~/components/orders/OrdersTable.vue";
 
-const { $getdata, $store } = useNuxtApp();
-const highlights = [
-  {
-    name: "Nháp",
-    value: 2,
-    icon: "material-symbols:assignment-outline-rounded",
-    color: "yellow",
-  },
-  {
-    name: "Đã xác nhận",
-    value: 3,
-    icon: "material-symbols:check-circle-outline-rounded",
-    color: "blue",
-  },
-  {
-    name: "Đang giao",
-    value: 2,
-    icon: "material-symbols:delivery-truck-speed-outline-rounded",
-    color: "orange",
-  },
-  {
-    name: "Hoàn thành",
-    value: 1,
-    icon: "material-symbols:box-outline-rounded",
-    color: "green",
-  },
-  {
-    name: "Doanh thu",
-    value: "6.8M",
-    icon: "material-symbols:attach-money-rounded",
-    color: "purple",
-    unit: "VNĐ",
-  },
-];
+const store = useStore();
 
 const viewModes = [
   { name: "list", icon: "material-symbols:format-list-bulleted-rounded" },
@@ -44,20 +12,15 @@ const viewModes = [
 ];
 const viewMode = ref("list");
 
-const invoices = ref();
-onMounted(async () => {
-  invoices.value = await $getdata("Invoice");
-});
-provide("orders", {
-  invoices,
-});
+const { fetchInvoices } = useInvoices();
+onMounted(fetchInvoices);
 </script>
 <template>
   <div>
     <Teleport
       defer
       to="#header-right-slot"
-      v-if="$store.tabinfo.tab.code === 'orders'"
+      v-if="store.tabinfo.tab.code === 'orders'"
     >
       <div class="is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
         <div class="tabs is-toggle m-0">
@@ -90,15 +53,7 @@ provide("orders", {
         </button>
       </div>
     </Teleport>
-    <div class="fixed-grid has-2-cols-mobile has-5-cols">
-      <div class="grid">
-        <OrderHighlightCard
-          v-for="highlight in highlights"
-          :key="highlight.name"
-          v-bind="highlight"
-        />
-      </div>
-    </div>
+    <OrderHighlights />
     <OrderPipeline />
     <OrdersTable :viewMode="viewMode" />
   </div>