changes

app/components/orders/OrderPipeline.vue

@@ -1,36 +1,9 @@
 <script setup>
+import { useInvoices } from "~/components/orders/composables/useInvoices";
 import PipelinePhase from "~/components/orders/PipelinePhase.vue";
 
-const phases = [
-  {
-    name: "Nháp",
-    value: 2,
-    icon: "material-symbols:assignment-outline-rounded",
-    color: "yellow",
-    index: 1,
-  },
-  {
-    name: "Đã xác nhận",
-    value: 3,
-    icon: "material-symbols:check-circle-outline-rounded",
-    color: "blue",
-    index: 2,
-  },
-  {
-    name: "Đang giao",
-    value: 2,
-    icon: "material-symbols:delivery-truck-speed-outline-rounded",
-    color: "orange",
-    index: 3,
-  },
-  {
-    name: "Hoàn thành",
-    value: 1,
-    icon: "material-symbols:box-outline-rounded",
-    color: "green",
-    index: 4,
-  },
-];
+const store = useStore();
+const { invoices } = useInvoices();
 </script>
 <template>
   <div class="card">
@@ -38,16 +11,16 @@ const phases = [
       <p class="fs-16 font-semibold mb-4">Pipeline đơn hàng</p>
       <div class="is-flex is-justify-content-space-evenly">
         <PipelinePhase
-          v-for="phase in phases"
-          :key="phases.name"
-          v-bind="phase"
+          v-for="invoiceStatus in store.Invoice_Status"
+          :key="invoiceStatus.id"
+          v-bind="invoiceStatus"
         />
       </div>
       <hr class="has-background-grey-85" />
       <div class="is-flex is-justify-content-space-between">
         <p>Tổng đơn hàng</p>
         <p class="fs-18 font-semibold">
-          {{ phases.reduce((prev, curr) => prev + curr.value, 0) }}
+          {{ invoices.length }}
         </p>
       </div>
     </div>