refactor: handle intallment no

src/pages/08_request-list/RequestListView.vue

@@ -276,11 +276,38 @@ const successAll = computed(() => {
   });
 });
 
+function getInstallmentInfo() {
+  if (
+    data.value?.quotation.payCondition === 'Full' ||
+    data.value?.quotation.payCondition === 'BillFull'
+  ) {
+    return null;
+  }
+
+  const total = data.value?.quotation.paySplitCount || 0;
+  const paid = data.value?.quotation.invoice?.reduce((a, c) => {
+    if (c.payment?.paymentStatus === 'PaymentSuccess') {
+      a += c.installments.length || 0;
+    }
+    return a;
+  }, 0);
+
+  return { total, paid };
+}
+
 function isInstallmentPaySuccess(installmentNo: number) {
-  const invoice = data.value?.quotation.invoice?.find((lhs) =>
-    lhs.installements.some((rhs) => rhs.no === installmentNo),
-  );
-  return !!(invoice?.payment?.paymentStatus === 'Success');
+  if (
+    data.value?.quotation.payCondition === 'Full' ||
+    data.value?.quotation.payCondition === 'BillFull'
+  ) {
+    return true;
+  }
+
+  const invoice = data.value?.quotation.invoice?.find((lhs) => {
+    return lhs.installments?.some((rhs) => rhs.no === installmentNo);
+  });
+
+  return !!(invoice?.payment?.paymentStatus === 'PaymentSuccess');
 }
 </script>
 <template>
@@ -587,7 +614,13 @@ function isInstallmentPaySuccess(installmentNo: number) {
             )"
             :key="value"
           >
+            {{ getInstallmentInfo() }}
             <ProductExpansion
+              :class="{
+                'status-unpaid': !isInstallmentPaySuccess(
+                  value.productService.installmentNo,
+                ),
+              }"
               :status="
                 value.stepStatus?.find((v) => v.step === pageState.currentStep)
               "
@@ -710,6 +743,12 @@ function isInstallmentPaySuccess(installmentNo: number) {
   </div>
 </template>
 <style scoped>
+.status-unpaid {
+  opacity: 0.5;
+  filter: grayscale(90%);
+  pointer-events: none;
+}
+
 .status-color {
   --_color: var(--gray-0);
   border-color: hsla(var(--_color));

src/stores/payment/types.ts

@@ -8,7 +8,7 @@ export type Invoice = {
 
   amount: number;
 
-  installements: QuotationFull['paySplit'];
+  installments: QuotationFull['paySplit'];
 
   quotation: Quotation;
 

src/stores/quotations/types.ts

@@ -278,6 +278,7 @@ export type QuotationFull = {
       productServiceId: string;
       employeeId: string;
     }[];
+    installmentNo: number;
   }[];
 
   id: string;