Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/Clients/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div class="card p-2">
    <div class="row">
      <div class="col-8 d-flex flex-column justify-content-around">
        <img alt="siteLogo" :src="siteLogo" style="max-width: 250px;">
        <div>
          <span v-html="invoice.status"></span>
        </div>
      </div>
      <div class="col-4">
        <h4>Invoice</h4>
        <p style="font-size: 15px">
          <b> {{ invoice.code }} </b>
          <br/>
          Date: <b> {{ invoice.invoice_date }} </b>
          <br/>
          Due Date: <b> {{ invoice.due_date }} </b>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <h6>Payable to</h6>
        <p v-html="payableTo">

        </p>
      </div>
      <div class="col-6">
        <h6>Bill To</h6>
        <p>
          {{ invoice.client }}
          <br/>
          <template v-if="invoice.client_user">
            {{ invoice.client_user.full_name }}
            <br/>
            {{ invoice.client_user.email }}
            <br/>
          </template>
          <template v-if="invoice.client_billing_address">
            {{ invoice.client_billing_address }}
          </template>
        </p>
      </div>
    </div>

    <div>
      <table class="table table-sm">
        <thead>
        <tr>
          <th>Item</th>
          <th colspan="2">Description</th>
          <th>Amount</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in invoice.items.filter(item=>!['tax','discount'].includes(item.type))">
          <th>{{ item.title }}</th>
          <td colspan="2">
            <div style="white-space: pre;" v-if="isExistsInvoiceDescription(item)"
                 v-html="item.properties.invoice_description">
            </div>
            <div v-else>
              {{ item.quantity }} &times; {{ item.rate }}
            </div>
            <div v-if="item.notes">
              {{ item.notes }}
            </div>
          </td>
          <td>{{ item.amount }}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <th class="text-right">Subtotal</th>
          <td>{{ invoice.subtotal }}</td>
        </tr>
        <tr v-for="item in invoice.items.filter(item=>item.type==='tax')">
          <th>{{ item.title }}</th>
          <td colspan="2">
            {{ item.quantity }} &times; {{ item.rate }}
            <div v-if="item.notes">
              {{ item.notes }}
            </div>
          </td>
          <td>{{ item.amount }}</td>
        </tr>
        <tr v-if="parseFloat(invoice.tax_total)">
          <td></td>
          <td></td>
          <th class="text-right">Taxes</th>
          <td>{{ invoice.tax_total }}</td>
        </tr>
        <tr v-for="item in invoice.items.filter(item=>item.type==='discount')">
          <th>{{ item.title }}</th>
          <td colspan="2">
            {{ item.quantity }} &times; {{ item.rate }}
            <div v-if="item.notes">
              {{ item.notes }}
            </div>
          </td>
          <td>{{ item.amount }}</td>
        </tr>
        <tr v-if="parseFloat(invoice.discount_total)">
          <td></td>
          <td></td>
          <th class="text-right">Discount</th>
          <td class="text-danger">{{ invoice.discount_total }}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <th class="text-right">Total</th>
          <td v-html="invoice.total"></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div>
      <h6>Notes:</h6>
      <p v-html="invoice.notes"></p>
    </div>
  </div>
</template>


<script>

export default {
  name: "InvoiceDetails",
  props: {
    invoice: {
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    isExistsInvoiceDescription(item) {
      if (item.properties) {
        return !!item.properties.invoice_description;
      }
      return false
    }
  },
  computed: {
    siteLogo() {
      return this.$store.getters.settings('site_logo');
    },
    payableTo() {
      return this.$store.getters.settings('payable_to');
    },
  }
}
</script>

<style scoped>

</style>