changes

app/components/orders/PipelinePhase.vue

@@ -1,28 +1,39 @@
 <script setup>
+import { useInvoices } from "~/components/orders/composables/useInvoices";
+
 const props = defineProps({
+  id: Number,
+  code: String,
   name: String,
-  value: Number,
-  icon: String,
+  en: String,
   color: String,
   index: Number,
 });
 
+const { invoices, invoicesByStatus } = useInvoices();
+
+const invoiceMatchCount = computed(() => {
+  if (!props.code) return 0;
+  if (!invoicesByStatus.value[props.code]) return 0;
+  return invoicesByStatus.value[props.code].length;
+});
+const progressVal = computed(() => (invoiceMatchCount.value * 100) / (invoices.value.length || 1));
 const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
 </script>
 <template>
   <div class="is-flex-grow-1">
     <div class="is-flex is-justify-content-space-between">
       <p :class="`has-text-${color}-40`">{{ name }}</p>
-      <p :class="['fs-18 font-bold', `has-text-${color}-30`]">{{ value }}</p>
+      <p :class="['fs-18 font-bold', `has-text-${color}-30`]">{{ invoiceMatchCount }}</p>
     </div>
     <progress
       :class="['progress is-small mt-2', `is-${color}`]"
-      value="20"
+      :value="progressVal"
       max="100"
     ></progress>
   </div>
   <div
-    v-if="index < 4"
+    v-if="index < 3"
     class="is-flex is-justify-content-center is-align-items-center"
     style="width: 60px; height: 48px"
   >