diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 06566ead..5bf0e43e 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -32,6 +32,8 @@ const prop = defineProps<{
   isDebitNote?: boolean;
 }>();
 
+const firstCodePayment = defineModel<string>('firstCodePayment');
+
 const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const refQMenu = ref<InstanceType<typeof QMenu>[]>([]);
 const paymentData = ref<QuotationPaymentData[]>([]);
@@ -206,10 +208,15 @@ onMounted(async () => {
   });
   if (ret) {
     paymentData.value = ret.result;
-    slipFile.value = paymentData.value.map((v) => ({
-      paymentId: v.id,
-      data: [],
-    }));
+    slipFile.value = paymentData.value.map((v, i) => {
+      if (i === 0) {
+        firstCodePayment.value = v.code;
+      }
+      return {
+        paymentId: v.id,
+        data: [],
+      };
+    });
   }
 });
 </script>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 6d14d322..62adb987 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -196,7 +196,7 @@ const selectedWorkerItem = computed(() => {
   ];
 });
 const workerList = ref<Employee[]>([]);
-
+const firstCodePayment = ref('');
 const selectedProductGroup = ref('');
 const selectedInstallmentNo = ref<number[]>([]);
 const installmentAmount = ref<number>(0);
@@ -1093,12 +1093,14 @@ watch(
 // }
 
 function storeDataLocal() {
-  quotationFormData.value.productServiceList = productServiceList.value;
+  quotationFormData.value.productServiceList = productService.value;
 
   localStorage.setItem(
     'quotation-preview',
     JSON.stringify({
       data: {
+        codeInvoice: code.value,
+        codePayment: firstCodePayment.value,
         ...quotationFormData.value,
         productServiceList: productService.value,
       },
@@ -1939,6 +1941,7 @@ function covertToNode() {
                 view !== View.Complete
               "
               :data="quotationFormState.source"
+              v-model:first-code-payment="firstCodePayment"
               @fetch-status="
                 () => {
                   fetchQuotation();
@@ -2105,6 +2108,8 @@ function covertToNode() {
 
                                 installmentAmount = props.row.amount;
                                 view = View.Invoice;
+
+                                console.log(code);
                               }
                             }
                           "
diff --git a/src/pages/05_quotation/preview/ViewForm.vue b/src/pages/05_quotation/preview/ViewForm.vue
index 26be292e..0a12408f 100644
--- a/src/pages/05_quotation/preview/ViewForm.vue
+++ b/src/pages/05_quotation/preview/ViewForm.vue
@@ -86,10 +86,22 @@ const summaryPrice = ref<SummaryPrice>({
   finalPrice: 0,
 });
 
-async function fetchQuotationById(id: string) {
+async function fetchQuotationById(id: string, codeInvoice: string) {
   const res = await quotationStore.getQuotation(id);
+  if (res) {
+    const installmentNo = res.paySplit.find(
+      (v) => codeInvoice === v.invoice?.code,
+    )?.no;
 
-  if (res) data.value = res;
+    data.value = {
+      ...res,
+      productServiceList: !!installmentNo
+        ? res.productServiceList.filter(
+            (v) => installmentNo === v.installmentNo,
+          )
+        : res.productServiceList,
+    };
+  }
 }
 
 async function getAttachment(quotationId: string) {
@@ -190,7 +202,8 @@ onMounted(async () => {
   if (data.value) {
     if (!!data.value.id) {
       await getAttachment(data.value.id);
-      await fetchQuotationById(data.value.id);
+      if (parsed.data.fetch)
+        await fetchQuotationById(data.value.id, parsed.data.codeInvoice);
     }
 
     const resCustomerBranch = await customerStore.getBranchById(
@@ -203,8 +216,15 @@ onMounted(async () => {
 
     agentPrice.value = data.value.agentPrice || parsed?.meta?.agentPrice;
 
+    const currentCode =
+      view.value === View.Invoice
+        ? parsed.data.codeInvoice
+        : view.value === View.Payment
+          ? parsed.data.codePayment
+          : (parsed?.meta?.source?.code ?? data.value?.code);
+
     details.value = {
-      code: parsed?.meta?.source?.code ?? data.value?.code,
+      code: currentCode,
       createdAt:
         parsed?.meta?.source?.createdAt ??
         new Date(data.value?.createdAt || ''),
diff --git a/src/pages/10_invoice/MainPage.vue b/src/pages/10_invoice/MainPage.vue
index 5b0274cc..12f20809 100644
--- a/src/pages/10_invoice/MainPage.vue
+++ b/src/pages/10_invoice/MainPage.vue
@@ -88,12 +88,16 @@ function triggerView(opts: { quotationId: string }) {
   window.open(url.toString(), '_blank');
 }
 
-function viewDocExample(quotationId: string) {
+function viewDocExample(quotationId: string, codeInvoice: string) {
+  console.log(codeInvoice);
+
   localStorage.setItem(
     'quotation-preview',
     JSON.stringify({
       data: {
         id: quotationId,
+        codeInvoice,
+        fetch: true,
       },
     }),
   );
@@ -346,7 +350,7 @@ watch(
               :rows="data"
               :grid="pageState.gridView"
               @view="(quotationId) => triggerView({ quotationId })"
-              @preview="(quotationId) => viewDocExample(quotationId)"
+              @preview="(item) => viewDocExample(item.quotation.id, item.code)"
             >
               <template #grid="{ item }">
                 <div class="col-md-4 col-sm-6 col-12">
@@ -401,9 +405,7 @@ watch(
                       () => triggerView({ quotationId: item.row.quotation.id })
                     "
                     @preview="
-                      () => {
-                        viewDocExample(item.row.quotation.id);
-                      }
+                      () => viewDocExample(item.row.quotation.id, item.row.code)
                     "
                   />
                 </div>
diff --git a/src/pages/10_invoice/TableInvoice.vue b/src/pages/10_invoice/TableInvoice.vue
index 5ae938c2..901533ca 100644
--- a/src/pages/10_invoice/TableInvoice.vue
+++ b/src/pages/10_invoice/TableInvoice.vue
@@ -41,7 +41,7 @@ withDefaults(
 
 defineEmits<{
   (e: 'view', id: string): void;
-  (e: 'preview', id: string): void;
+  (e: 'preview', data: Invoice): void;
   (e: 'edit', data: T, index: number): void;
   (e: 'delete', data: T, index: number): void;
   (e: 'download', data: T, index: number): void;
@@ -118,7 +118,7 @@ defineEmits<{
               icon="mdi-play-box-outline"
               size="12px"
               :title="$t('preview.doc')"
-              @click.stop="$emit('preview', props.row.quotation.id)"
+              @click.stop="$emit('preview', props.row)"
             />
 
             <q-btn
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index 606208d3..ce969936 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -414,6 +414,7 @@ export type QuotationPaymentData = {
   remark: string;
   date: string;
   id: string;
+  code: string;
 };
 
 export type Details = {