ktdatatable for admin panel invoices in admin panel code

 <template>

  <!--begin::Card-->
  <div :class="`card pt-2 ${cardClasses}`">
    <!--begin::Card header-->
    <div class="card-header border-0">
      <!--begin::Card title-->
      <div class="card-title">
        <h2>Invoices</h2>
      </div>
      <!--end::Card title-->

      <!--begin::Toolbar-->
      <div class="card-toolbar m-0">
        <!--begin::Tab nav-->
        <ul
          class="nav nav-stretch fs-5 fw-bold nav-line-tabs nav-line-tabs-2x border-transparent"
          role="tablist"
        >
          <li class="nav-item" role="presentation">
            <a
              id="kt_referrals_year_tab"
              class="nav-link text-active-primary active"
              data-bs-toggle="tab"
              role="tab"
              href="#kt_customer_details_invoices_1"
            >
              This Year
            </a>
          </li>

          <li class="nav-item" role="presentation">
            <a
              id="kt_referrals_2019_tab"
              class="nav-link text-active-primary ms-3"
              data-bs-toggle="tab"
              role="tab"
              href="#kt_customer_details_invoices_2"
            >
              2020
            </a>
          </li>

          <li class="nav-item" role="presentation">
            <a
              id="kt_referrals_2018_tab"
              class="nav-link text-active-primary ms-3"
              data-bs-toggle="tab"
              role="tab"
              href="#kt_customer_details_invoices_3"
            >
              2019
            </a>
          </li>

          <li class="nav-item" role="presentation">
            <a
              id="kt_referrals_2017_tab"
              class="nav-link text-active-primary ms-3"
              data-bs-toggle="tab"
              role="tab"
              href="#kt_customer_details_invoices_4"
            >
              2018
            </a>
          </li>
        </ul>
        <!--end::Tab nav-->
      </div>
      <!--end::Toolbar-->
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body pt-0">
      <!--begin::Tab Content-->
      <div id="kt_referred_users_tab_content" class="tab-content">
        <div
          id="kt_customer_details_invoices_1"
          class="py-0 tab-pane fade active show"
          role="tabpanel"
        >
          <Datatable
            :table-header="tableHeader"
            :table-data="tableData1"
            :rows-per-page="5"
            :enable-items-per-page-dropdown="false"
          >
            <template v-slot:cell-order="{ row: invoice }">
              {{ invoice.order }}
            </template>
            <template v-slot:cell-amount="{ row: invoice }">
              <span :class="`text-${invoice.color}`">
                {{ invoice.amount }}
              </span>
            </template>
            <template v-slot:cell-status="{ row: invoice }">
              <span :class="`badge badge-light-${invoice.status.state}`">{{
                invoice.status.label
              }}</span>
            </template>
            <template v-slot:cell-date="{ row: invoice }">
              {{ invoice.date }}
            </template>
            <template v-slot:cell-invoice>
              <button class="btn btn-sm btn-light btn-active-light-primary">
                Download
              </button>
            </template>
          </Datatable>
        </div>
        <div
          id="kt_customer_details_invoices_2"
          class="py-0 tab-pane fade"
          role="tabpanel"
        >
          <Datatable
            :table-header="tableHeader"
            :table-data="tableData2"
            :rows-per-page="5"
            :enable-items-per-page-dropdown="false"
          >
            <template v-slot:cell-order="{ row: invoice }">
              {{ invoice.order }}
            </template>
            <template v-slot:cell-amount="{ row: invoice }">
              <span :class="`text-${invoice.color}`">
                {{ invoice.amount }}
              </span>
            </template>
            <template v-slot:cell-status="{ row: invoice }">
              <span :class="`badge badge-light-${invoice.status.state}`">{{
                invoice.status.label
              }}</span>
            </template>
            <template v-slot:cell-date="{ row: invoice }">
              {{ invoice.date }}
            </template>
            <template v-slot:cell-invoice>
              <button class="btn btn-sm btn-light btn-active-light-primary">
                Download
              </button>
            </template>
          </Datatable>
        </div>
        <div
          id="kt_customer_details_invoices_3"
          class="py-0 tab-pane fade"
          role="tabpanel"
        >
          <Datatable
            :table-header="tableHeader"
            :table-data="tableData3"
            :rows-per-page="5"
            :enable-items-per-page-dropdown="false"
          >
            <template v-slot:cell-order="{ row: invoice }">
              {{ invoice.order }}
            </template>
            <template v-slot:cell-amount="{ row: invoice }">
              <span :class="`text-${invoice.color}`">
                {{ invoice.amount }}
              </span>
            </template>
            <template v-slot:cell-status="{ row: invoice }">
              <span :class="`badge badge-light-${invoice.status.state}`">{{
                invoice.status.label
              }}</span>
            </template>
            <template v-slot:cell-date="{ row: invoice }">
              {{ invoice.date }}
            </template>
            <template v-slot:cell-invoice>
              <button class="btn btn-sm btn-light btn-active-light-primary">
                Download
              </button>
            </template>
          </Datatable>
        </div>
        <div
          id="kt_customer_details_invoices_4"
          class="py-0 tab-pane fade"
          role="tabpanel"
        >
          <Datatable
            :table-header="tableHeader"
            :table-data="tableData4"
            :rows-per-page="5"
            :enable-items-per-page-dropdown="false"
          >
            <template v-slot:cell-order="{ row: invoice }">
              {{ invoice.order }}
            </template>
            <template v-slot:cell-amount="{ row: invoice }">
              <span :class="`text-${invoice.color}`">
                {{ invoice.amount }}
              </span>
            </template>
            <template v-slot:cell-status="{ row: invoice }">
              <span :class="`badge badge-light-${invoice.status.state}`">{{
                invoice.status.label
              }}</span>
            </template>
            <template v-slot:cell-date="{ row: invoice }">
              {{ invoice.date }}
            </template>
            <template v-slot:cell-invoice>
              <button class="btn btn-sm btn-light btn-active-light-primary">
                Download
              </button>
            </template>
          </Datatable>
        </div>
      </div>
      <!--end::Tab Content-->
    </div>
    <!--end::Card body-->
  </div>
  <!--end::Card-->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Datatable from "@/components/kt-datatable/KTDatatable.vue";

export default defineComponent({
  name: "kt-invoices",
  props: {
    cardClasses: String,
  },
  components: {
    Datatable,
  },
  setup() {
    const tableHeader = ref([
      {
        name: "Order id",
        key: "order",
        sortable: true,
      },
      {
        name: "Amount",
        key: "amount",
        sortable: true,
      },
      {
        name: "Status",
        key: "status",
        sortingField: "status.label",
        sortable: true,
      },
      {
        name: "Date",
        key: "date",
        sortable: true,
      },
      {
        name: "Invoice",
        key: "invoice",
        sortable: false,
      },
    ]);
    const tableData1 = ref([
      {
        date: "Nov 01, 2020",
        order: "102445788",
        details: "Darknight transparency  36 Icons Pack",
        color: "success",
        amount: "$38.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 24, 2020",
        order: "423445721",
        details: "Seller Fee",
        color: "danger",
        amount: "$-2.60",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 08, 2020",
        order: "312445984",
        details: "Cartoon Mobile Emoji Phone Pack",
        color: "success",
        amount: "$76.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Sep 15, 2020",
        order: "312445984",
        details: "Iphone 12 Pro Mockup  Mega Bundle",
        color: "success",
        amount: "$5.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "May 30, 2020",
        order: "523445943",
        details: "Seller Fee",
        color: "danger",
        amount: "$-1.30",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Apr 22, 2020",
        order: "231445943",
        details: "Parcel Shipping / Delivery Service App",
        color: "success",
        amount: "$204.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Feb 09, 2020",
        order: "426445943",
        details: "Visual Design Illustration",
        color: "success",
        amount: "$31.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Nov 01, 2020",
        order: "984445943",
        details: "Abstract Vusial Pack",
        color: "success",
        amount: "$52.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Jan 04, 2020",
        order: "324442313",
        details: "Seller Fee",
        color: "danger",
        amount: "$-0.80",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
    ]);
    const tableData2 = ref([
      {
        date: "May 30, 2020",
        order: "523445943",
        details: "Seller Fee",
        color: "danger",
        amount: "$-1.30",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Apr 22, 2020",
        order: "231445943",
        details: "Parcel Shipping / Delivery Service App",
        color: "success",
        amount: "$204.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Feb 09, 2020",
        order: "426445943",
        details: "Visual Design Illustration",
        color: "success",
        amount: "$31.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Nov 01, 2020",
        order: "984445943",
        details: "Abstract Vusial Pack",
        color: "success",
        amount: "$52.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Jan 04, 2020",
        order: "324442313",
        details: "Seller Fee",
        color: "danger",
        amount: "$-0.80",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Nov 01, 2020",
        order: "102445788",
        details: "Darknight transparency  36 Icons Pack",
        color: "success",
        amount: "$38.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 24, 2020",
        order: "423445721",
        details: "Seller Fee",
        color: "danger",
        amount: "$-2.60",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 08, 2020",
        order: "312445984",
        details: "Cartoon Mobile Emoji Phone Pack",
        color: "success",
        amount: "$76.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Sep 15, 2020",
        order: "312445984",
        details: "Iphone 12 Pro Mockup  Mega Bundle",
        color: "success",
        amount: "$5.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
    ]);
    const tableData3 = ref([
      {
        date: "Feb 09, 2020",
        order: "426445943",
        details: "Visual Design Illustration",
        color: "success",
        amount: "$31.00",
        status: {
          label: "Successful",
          state: "success",
        },
      },
      {
        date: "Nov 01, 2020",
        order: "984445943",
        details: "Abstract Vusial Pack",
        color: "success",
        amount: "$52.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Jan 04, 2020",
        order: "324442313",
        details: "Seller Fee",
        color: "danger",
        amount: "$-0.80",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Sep 15, 2020",
        order: "312445984",
        details: "Iphone 12 Pro Mockup  Mega Bundle",
        color: "success",
        amount: "$5.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Nov 01, 2020",
        order: "102445788",
        details: "Darknight transparency  36 Icons Pack",
        color: "success",
        amount: "$38.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 24, 2020",
        order: "423445721",
        details: "Seller Fee",
        color: "danger",
        amount: "$-2.60",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 08, 2020",
        order: "312445984",
        details: "Cartoon Mobile Emoji Phone Pack",
        color: "success",
        amount: "$76.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "May 30, 2020",
        order: "523445943",
        details: "Seller Fee",
        color: "danger",
        amount: "$-1.30",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Apr 22, 2020",
        order: "231445943",
        details: "Parcel Shipping / Delivery Service App",
        color: "success",
        amount: "$204.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
    ]);
    const tableData4 = ref([
      {
        date: "Nov 01, 2020",
        order: "102445788",
        details: "Darknight transparency  36 Icons Pack",
        color: "success",
        amount: "$38.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 24, 2020",
        order: "423445721",
        details: "Seller Fee",
        color: "danger",
        amount: "$-2.60",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Nov 01, 2020",
        order: "102445788",
        details: "Darknight transparency  36 Icons Pack",
        color: "success",
        amount: "$38.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 24, 2020",
        order: "423445721",
        details: "Seller Fee",
        color: "danger",
        amount: "$-2.60",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Feb 09, 2020",
        order: "426445943",
        details: "Visual Design Illustration",
        color: "success",
        amount: "$31.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Nov 01, 2020",
        order: "984445943",
        details: "Abstract Vusial Pack",
        color: "success",
        amount: "$52.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Jan 04, 2020",
        order: "324442313",
        details: "Seller Fee",
        color: "danger",
        amount: "$-0.80",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 08, 2020",
        order: "312445984",
        details: "Cartoon Mobile Emoji Phone Pack",
        color: "success",
        amount: "$76.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
      {
        date: "Oct 08, 2020",
        order: "312445984",
        details: "Cartoon Mobile Emoji Phone Pack",
        color: "success",
        amount: "$76.00",
        status: {
          label: "Pending",
          state: "warning",
        },
      },
    ]);

    return { tableHeader, tableData1, tableData2, tableData3, tableData4 };
  },
});
</script>

Comments

Post a Comment

Popular posts from this blog

 <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://embed.figma.com/proto/J0j3lwuubj1AletoTFlLFr/Untitled?page-id=0%3A1&node-id=1-5&viewport=907%2C916%2C0.73&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=1%3A5&embed-host=share" allowfullscreen></iframe>
Read more

get urls data and split in the diffrent parts to get endpoint of file name given in last of url and show it .. by put in new array or variable by using -1

 <template>   <div class="card" v-if="checkpw">     <div class="card-header">       <span class="h3 text-primary mt-4">Production Script Files</span>     </div>     <ul class="list-group list-group-flush" v-for="(value, index) in urls" :key="index">       <li class="list-group-item h5">         <i class="bi bi-file-earmark-zip-fill text-primary h3 mx-2"></i>        <span> {{ value }} </span>       <a :href="`https://production.brighterbins.com/production/download/${value}`" class="btn btn-primary px-3 py-2" download>Download </a>        </li>     </ul>       <!-- @click="psFileDownload(value)" -->   </div>   <div v-if="errormsg" class="text-danger">     <h5 class="pt-5 pt-5 text-d...
Read more