invoice pdf

 avatar
unknown
javascript
4 years ago
21 kB
4
Indexable
<template>
  <div class="pdf">
    <!-- Content for Static Frame 'header_frame' -->
    <div id="header_content">
      <img src="/img/mime_logo.png" alt="logo" width="200" height="100" />
    </div>

    <!-- Content for Static Frame 'footer_frame' -->
    <div id="footer_content"></div>
    <!-- HTML Content -->
    <table class="invoice_customer_info">
      <tr>
        <td
          colspan="2"
          style="
            text-align: center;
            font-size: 20px;
            text-decoration: underline;
          "
        >
          <h1>Invoice</h1>
        </td>
      </tr>
      <tr></tr>
      <tr>
        <td><strong>Name : </strong>{{ pdf_info.customer_name }}</td>
        <td style="text-align: right">
          <strong>Subscriber ID :</strong> {{ pdf_info.subscriber_id }}
        </td>
      </tr>
      <tr>
        <td><strong>Bill_Add:</strong> {{ pdf_info.billing_address }}</td>
        <td style="text-align: right">
          <strong>Invoice No. :</strong> {{ pdf_info.invoice_no }}
        </td>
      </tr>
      <tr>
        <td><strong>Ins_Add:</strong> {{ pdf_info.installation_address }}</td>
        <td style="text-align: right">
          <strong>Ref No:</strong> {{ pdf_info.ref_no }}
        </td>
      </tr>
      <tr>
        <td><strong>Contact No:</strong> {{ pdf_info.contact_no }}</td>
        <td style="text-align: right">
          <strong>Invoice Date:</strong> {{ pdf_info.invoice_date }}
        </td>
      </tr>
      <tr>
        <td><strong>Email:</strong> {{ pdf_info.email }}</td>
        <td style="text-align: right">
          <strong>Due Date:</strong> {{ pdf_info.due_date }}
        </td>
      </tr>
      <tr>
        <td><strong>BIN No.</strong></td>
        <td style="text-align: right">
          <strong>Billing Period:</strong> {{ pdf_info.billing_period }}
        </td>
      </tr>
      <tr>
        <td></td>
        <td style="text-align: right">
          <strong>Billing Month:</strong> {{ pdf_info.billing_month }}
        </td>
      </tr>
    </table>

    <br /><br />

    <table class="invoice_bill">
      <tr>
        <td colspan="2" style="text-align: left">
          <strong>Current Bill (BDT)</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 50%;">Package Price</td>
        <td style="text-align: right">{{ pdf_info.recurring_charges }}</td>
      </tr>
      <tr>
        <td style="width: 50%;">Inventory</td>
        <td style="text-align: right">{{ pdf_info.inventory_charges }}</td>
      </tr>
      <tr>
        <td>OTC/OTC Installment</td>
        <td style="text-align: right">{{ pdf_info.installation_charges }}</td>
      </tr>
      <tr>
        <td style="text-align: right">Gross Charges</td>
        <td style="text-align: right">{{ pdf_info.gross_charges }}</td>
      </tr>
      <tr>
        <td>Discount</td>
        <td style="text-align: right">{{ pdf_info.total_discount }}</td>
      </tr>
      <tr>
        <td style="text-align: right">Total Discount</td>
        <td style="text-align: right">{{ pdf_info.total_discount }}</td>
      </tr>
      <tr>
        <td style="text-align: right">Gross Charges after Discount</td>
        <td style="text-align: right">
          {{ pdf_info.gross_charges_after_discount }}
        </td>
      </tr>
      <tr>
        <td>VAT</td>
        <td style="text-align: right">{{ pdf_info.vat }}</td>
      </tr>
      <tr>
        <td style="text-align: right">Sub Total</td>
        <td style="text-align: right">{{ pdf_info.sub_total }}</td>
      </tr>
      <tr>
        <td>Security Deposit Charges</td>
        <td style="text-align: right">
          {{ pdf_info.security_deposit_charges }}
        </td>
      </tr>
      <tr>
        <td>Other Charges</td>
        <td style="text-align: right">{{ pdf_info.other_charges }}</td>
      </tr>
      <tr>
        <td style="text-align: right">
          <strong>Total Current Charges</strong>
        </td>
        <td style="text-align: right">{{ pdf_info.total_current_charges }}</td>
      </tr>
      <!-- <tr>
        <td colspan="2">
          <strong>In words: .</strong>
        </td>
      </tr> -->
    </table>

    <div class="accounting-div">
      <table class="accounting">
        <tr>
          <td style="text-align: center"><strong>Particulars</strong></td>
          <td style="text-align: right"><strong>Amount(BDT)</strong></td>
        </tr>
        <tr>
          <td>Current Outstanding</td>
          <td style="text-align: right">
            {{ pdf_info.total_current_charges }}
          </td>
        </tr>
        <tr>
          <td>Previous Outstanding</td>
          <td style="text-align: right">{{ pdf_info.previous_outstanding }}</td>
        </tr>
        <tr>
          <td>OTC Installment Due</td>
          <td style="text-align: right">{{ pdf_info.due_installment }}</td>
        </tr>
        <tr>
          <td>Deffered Charge</td>
          <td style="text-align: right">{{ pdf_info.deffered_charge }}</td>
        </tr>
        <tr>
          <td>Total Paid</td>
          <td style="text-align: right">{{ pdf_info.total_paid }}</td>
        </tr>
        <tr>
          <td style="text-align: center">
            <strong>Total Outstanding</strong>
          </td>
          <td style="text-align: right">
            <strong>{{ pdf_info.total_outstanding }}</strong>
          </td>
        </tr>
      </table>
    </div>

    <div class="instruction-note instruction">
      <h4>Payments Instruction:</h4>
      <ul>
        <li>
          Payment to be made by crossed cheque/Bank Draft in favor of "DigiCon
          Telecommunication Ltd."
        </li>
        <li>
          Log in your portal and follow make payment option. Portal URL:
          https//myisp.mimebd.com
        </li>
      </ul>
    </div>
    <div>
      <table class="beneficiary-bank-table">
        <thead style="border: 1px solid black;">
          <tr>
            <td colspan="3"><strong>Beneficiary Bank Details:</strong></td>
          </tr>
          <tr>
            <td colspan="3">BIN No. 000862204-0101</td>
          </tr>
        </thead>
        <tr>
          <td>Account Name</td>
          <td>DigiCon Telecommunication Limited</td>
          <td>DigiCon Telecommunication Limited</td>
        </tr>
        <tr>
          <td>Account No.</td>
          <td>0002-0210033602</td>
          <td>1031200005091</td>
        </tr>
        <tr>
          <td>Routing No.</td>
          <td>14527 5358</td>
          <td>090260434</td>
        </tr>
        <tr>
          <td>Bank Name</td>
          <td>Mutual Trust Bank Ltd.</td>
          <td>Dutch-Bangla Bank Limited</td>
        </tr>
        <tr>
          <td>Branch Name</td>
          <td>Principal</td>
          <td>Branch: Banani</td>
        </tr>
        <tr>
          <td>Swift Code</td>
          <td>MTBLBDDHPBR</td>
          <td></td>
        </tr>
        <tr style="border: 1px solid black;">
          <td>bKash Merchant Payment</td>
          <td>01787-671362</td>
          <td></td>
        </tr>
      </table>
    </div>

    <div class="instruction-note">
      <h4>Note:</h4>
      <ul>
        <li>
          If you have any queries regarding the invoice amount, please send
          email to: billing.mime@cg-bd.com
        </li>
        <li>
          This is a computer-generated invoice does not require any signature.
        </li>
      </ul>
    </div>

    <div class="company-address">
      <table>
        <tr>
          <td><strong>DigiCon Telecommunication Ltd.</strong></td>
          <td></td>
        </tr>
        <tr>
          <td>
            Awal Center (15th Floor), 34, Kemal Ataturk Avenue, Banani C/A,
            Dhaka-1213, Bangladesh
          </td>
          <td></td>
        </tr>
        <tr>
          <td>Tel: +88-02-9822056-9, Cell: +88-01704-119545</td>
          <td style="text-align: right">www.mimebd.com</td>
        </tr>
        <tr>
          <td>
            Email: info.mimebd@cg-bd.com Facebook: https:www.facebook.com/MIMECG
          </td>
          <td style="text-align: right">Hotline: 16676</td>
        </tr>
      </table>
    </div>

    <div class="download-pdf">
      <base-button simple type="primary" @click="downloadInvoicePdf">
        Download Pdf
      </base-button>
      <base-button simple type="primary" @click="$router.go(-1)">
        Back
      </base-button>
    </div>
  </div>
</template>

<script>
import InvoiceService from "@/services/invoice_service";
import { mapGetters } from "vuex";

export default {
  props: ["swapComponent", "invoiceId"],
  components: {
    InvoiceService
  },
  computed: {
    ...mapGetters({
      new_invoice: "invoice_store/getInvoice",
      unpaid_invoice_amount: "invoice_store/getUnpaidInvoiceAmount",
      customer_line: "customer/getCustomerLine",
      customer_details: "customer/getCustomerDetails"
    })
  },
  beforeMount() {
    this.renderInvoice(this.$route.params.invoice);
  },
  data() {
    return {
      invoice_obj: null,
      cust_line: null,
      cust_details: null,
      unpaid_amount: 0,
      customer_type : 'general',
      pdf_info: {
        customer_name: "",
        installation_address: "",
        billing_address: "",
        contact_no: "",
        email: "",
        subscriber_id: "",
        invoice_no: "",
        invoice_date: "",
        ref_no: "",
        due_date: "",
        billing_period: "",
        billing_month: "",
        recurring_charges: 0,
        deffered_charge: 0,
        inventory_charges: 0,
        installation_charges: 0,
        current_installment_with_vat: 0,
        gross_charges: 0,
        discount: 0,
        total_discount: 0,
        gross_charges_after_discount: 0,
        vat: 0,
        sub_total: 0,
        security_deposit_charges: 0,
        other_charges: 0,
        total_current_charges: 0,
        current_outstanding: 0,
        previous_outstanding: 0,
        due_installment: 0,
        total_outstanding: 0,
        total_paid: 0
      }
    };
  },
  methods: {
    downloadInvoicePdf() {
      InvoiceService.downloadInvoice(this.pdf_info).then(
        request => {
          if (request.result.status == 200) {
            this.$notify({
              verticalAlign: "top",
              horizontalAlign: "center",
              message: "Invoice download successfully."
            });
            this.show_loader = false;
          } else {
            this.$notify({
              verticalAlign: "top",
              horizontalAlign: "center",
              message: "Something went wrong"
            });
            this.show_loader = false;
          }
        },
        error => {
          this.show_loader = false;
        }
      );
    },
    renderInvoice(invId) {
      this.invoiceId = invId;
      this.$store
        .dispatch("invoice_store/setInvoiceDetails", this.invoiceId)
        .then(response => {
          this.invoice_obj = response.result;
          console.log('invoiced object',this.invoice_obj);
          var CustomerDetailsByMiMeId_url = 'customer/setCustomerDetailsByMiMeId'
          var CustomerLineByMiMeId_url = "customer/setCustomerLineByMiMeId"
          if(this.invoice_obj.customer_interested_on == 'license_lisp' || this.invoice_obj.customer_interested_on == 'non_license_lisp'){
            CustomerDetailsByMiMeId_url = 'reseller/setResellerDetailsByMiMeId'
            CustomerLineByMiMeId_url = "reseller/setResellerBWLineByMiMeId"
            this.customer_type = 'reseller'
          }
          this.$store
            .dispatch(
              CustomerDetailsByMiMeId_url,
              this.invoice_obj.subscriber_id
            )
            .then(response => {
              this.cust_details = response;

              this.$store
                .dispatch(
                  CustomerLineByMiMeId_url,
                  this.invoice_obj.subscriber_id
                )
                .then(response => {
                  this.cust_line = response.result;

                  /* odoo product line */
                  let installation_charges = 0;
                  let r_charges = 0;
                  let inv_charges = 0;
                  let discount = this.invoice_obj.total_discount;
                  for (
                    let index = 0;
                    index < this.invoice_obj.invoice_lines.length;
                    index++
                  ) {
                    const element = this.invoice_obj.invoice_lines[index];
                    if (
                      element.product_type == "otp" ||
                      element.unified_category_name.toLowerCase() == "otc" ||
                      element.unified_service_type_name.toLowerCase() == "otc"
                    ) {
                      installation_charges += parseFloat(
                        element.price_subtotal
                      );

                      this.pdf_info.current_installment_with_vat += parseFloat(
                        element.price_unit
                      ) * element.quantity;
                    } else if (element.product_type == "product") {
                      inv_charges += parseFloat(element.price_subtotal);
                    } else {
                      r_charges += parseFloat(element.price_subtotal);
                    }
                  }

                  r_charges = r_charges - this.invoice_obj.deffered_charge;
                  if(r_charges < 0) {
                    r_charges = 0;
                  }

                  this.$store
                    .dispatch(
                      "invoice_store/setUnpaidInvoiceAmount",
                      this.invoice_obj.customer_id
                    )
                    .then(response => {
                      this.unpaid_amount = response.result;

                      let g_charges =
                        r_charges + installation_charges + inv_charges;
                      this.pdf_info.gross_charges = 0;
                      let g_charges_after_discount = g_charges;
                      let s_total =
                        g_charges_after_discount + this.invoice_obj.vat;
                      let t_current_charges =
                        s_total +
                        parseFloat(this.pdf_info.other_charges) +
                        this.pdf_info.security_deposit_charges;
                      let p_outstanding = 0;
                      let t_outstanding = 0;

                      var total_paid = 0;
                      for (
                        var i = 0;
                        i < this.invoice_obj.paid_lines.length;
                        i++
                      ) {
                        total_paid =
                          parseFloat(total_paid) +
                          parseFloat(this.invoice_obj.paid_lines[i].amount);
                      }

                      this.$store.dispatch(
                        "customer/setCustomerOTCInstallmentLine",
                        this.invoice_obj.subscriber_id
                      ).then(response => {
                        var inst_due = 0;
                        var installmentLines = response;
                        for (var i = 0; i < installmentLines.length; i++) {
                          if (installmentLines[i].status == "pending") {
                            inst_due +=
                              parseFloat(
                                installmentLines[i].installment_amount
                              );
                          }
                        }

                        if(this.invoice_obj.state != 'paid') {
                          this.pdf_info.due_installment =
                            inst_due - this.pdf_info.current_installment_with_vat;
                            if(this.pdf_info.due_installment < 0) {
                              this.pdf_info.due_installment = 0;
                            }
                        } else {
                          this.pdf_info.due_installment = inst_due;
                        }


                        p_outstanding =
                          parseFloat(this.unpaid_amount.due_amount) -
                          (t_current_charges - total_paid);
                        if(p_outstanding < 0) {
                          p_outstanding = 0;
                        }
                        t_outstanding =
                          t_current_charges +
                          p_outstanding +
                          this.pdf_info.due_installment + this.invoice_obj.deffered_charge;
                        t_outstanding = t_outstanding - total_paid;

                        var inv_no = "";
                        if (this.invoice_obj.number) {
                          inv_no = this.invoice_obj.number;
                        }

                        var inv_date = "";
                        if (this.invoice_obj.invoice_date) {
                          inv_date = this.invoice_obj.invoice_date;
                        }

                        var duedate = "";
                        if (this.invoice_obj.due_date) {
                          duedate = this.invoice_obj.due_date;
                        }

                        this.pdf_info = {
                          customer_name:
                            this.cust_details.first_name +
                            " " +
                            this.cust_details.middle_name +
                            " " +
                            this.cust_details.last_name,
                          installation_address: this.cust_details
                            .contact_address,
                          billing_address: this.cust_details.billing_address,
                          contact_no: this.cust_details.mobile_primary,
                          email: this.cust_details.email,
                          subscriber_id: this.cust_details.username,
                          invoice_no: inv_no,
                          invoice_date: inv_date,
                          ref_no: inv_no,
                          due_date: duedate,
                          billing_period: this.invoice_obj.billing_period,
                          billing_month: this.invoice_obj.billing_month,
                          recurring_charges: r_charges.toFixed(2),
                          deffered_charge: this.invoice_obj.deffered_charge,
                          installation_charges: installation_charges.toFixed(2),
                          gross_charges: g_charges.toFixed(2),
                          discount: discount.toFixed(2),
                          total_discount: discount.toFixed(2),
                          gross_charges_after_discount: g_charges_after_discount.toFixed(
                            2
                          ),
                          vat: this.invoice_obj.vat.toFixed(2),
                          sub_total: s_total.toFixed(2),
                          security_deposit_charges: 0,
                          other_charges: 0,
                          total_current_charges: t_current_charges.toFixed(2),
                          current_outstanding: t_current_charges.toFixed(2),
                          previous_outstanding: p_outstanding.toFixed(2),
                          total_outstanding: t_outstanding.toFixed(2),
                          total_paid: total_paid,
                          due_installment: this.pdf_info.due_installment,
                          inventory_charges: inv_charges.toFixed(2),
                        };
                      });
                    });
                });
            });
        });
    }
  }
};
</script>

<style scoped>
body {
  font-size: 12px;
}
div.pdf {
  width: 100%;
  height: 100%;
}
table {
  margin: 0 auto;
  width: 100%;
  line-height: 1.5;
}
table td {
  padding: 5px;
}
table.invoice_bill {
  border: 1px solid black;
  border-collapse: collapse;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
table.beneficiary-bank-table {
  border: 1px solid black;
  border-collapse: collapse;
  border-left: 1px solid #000;
}
table.beneficiary-bank-table td {
  border-collapse: collapse;
  border-left: 1px solid #000;
}
div.accounting-div {
  width: 50%;
  margin-top: 7%;
  margin-left: 50%;
}
div.company-address {
  margin-top: 10%;
}
div.instruction {
  margin-top: 7%;
}

.accounting td,
.invoice_bill td {
  border: 1px solid black;
  border-collapse: collapse;
  border: 1px solid black;
}
.download-pdf {
  float: left;
  margin-top: 1%;
}
.instruction-note {
  margin-top: 2%;
  line-height: 2;
  font-size: 0.775rem;
}
</style>
Editor is loading...