<script>
import Layout from "@/layout/main.vue"
import pageheader from "@/components/page-header.vue"
import { total_invoice_1_chart_options, total_invoice_2_chart_options, total_invoice_3_chart_options } from "./data"
import {AlertCircleIcon} from '@zhuowenli/vue-feather-icons'
export default {
    name: "List",
    components: {
        Layout, pageheader,AlertCircleIcon
    },
    data(){
        return{
            total_invoice_1_chart_options: total_invoice_1_chart_options,
            total_invoice_2_chart_options: total_invoice_2_chart_options,
            total_invoice_3_chart_options: total_invoice_3_chart_options
        }
    }
}
</script>

<template>
    <Layout>
        <pageheader title="List" pageTitle="Invoice" />
        <!-- [ Main Content ] start -->
        <div class="row">
            <div class="col-xxl-8">
                <div class="row g-3 mb-3">
                    <div class="col-md-6 col-lg-4">
                        <div class="card mb-0">
                            <div class="card-body">
                                <div class="mb-2 d-flex align-items-center justify-content-between gap-1">
                                    <h6 class="mb-0">Total</h6>
                                    <p class="mb-0 text-muted d-flex align-items-center gap-1">
                                        <svg class="pc-icon text-success wid-15 hei-15" viewBox="0 0 24 24">
                                            <path d="M18.6806 13.9783L15.4706 10.7683L13.5106 8.79828C12.6806 7.96828 11.3306 7.96828 10.5006 8.79828L5.32056 13.9783C4.64056 14.6583 5.13056 15.8183 6.08056 15.8183H11.6906H17.9206C18.8806 15.8183 19.3606 14.6583 18.6806 13.9783Z" fill="currentcolor" />
                                        </svg>
                                        70.5%
                                    </p>
                                </div>
                                <div class="row g-2 align-items-center">
                                    <div class="col-6">
                                        <h5 class="mb-2 mt-3">$7,825</h5>
                                        <div class="d-flex align-items-center gap-1">
                                            <h5 class="mb-0">9</h5>
                                            <p class="mb-0 text-muted d-flex align-items-center gap-2">invoices</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <apexchart id="total-invoice-1-chart" height="55" type="area" dir="ltr" :series="total_invoice_1_chart_options.series" :options="total_invoice_1_chart_options.chartOptions"></apexchart>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card mb-0">
                            <div class="card-body">
                                <div class="d-flex mb-2 align-items-center justify-content-between gap-1">
                                    <h6 class="mb-0">Paid</h6>
                                    <p class="mb-0 text-muted d-flex align-items-center gap-1">
                                        <svg class="pc-icon text-warning wid-15 hei-15" viewBox="0 0 24 24">
                                            <path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z" fill=" currentcolor" />
                                        </svg>
                                        -8.73%
                                    </p>
                                </div>
                                <div class="row g-2 align-items-center">
                                    <div class="col-6">
                                        <h5 class="mb-2 mt-3">£5678.09</h5>
                                        <div class="d-flex align-items-center gap-1">
                                            <h5 class="mb-0">5</h5>
                                            <p class="mb-0 text-muted d-flex align-items-center gap-2">invoices</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <apexchart id="total-invoice-2-chart" height="55" type="area" dir="ltr" :series="total_invoice_2_chart_options.series" :options="total_invoice_2_chart_options.chartOptions"></apexchart>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-4">
                        <div class="card mb-0">
                            <div class="card-body">
                                <div class="mb-2 d-flex align-items-center justify-content-between gap-1">
                                    <h6 class="mb-0">Overdue</h6>
                                    <p class="mb-0 text-muted d-flex align-items-center gap-1">
                                        <svg class="pc-icon text-danger wid-15 hei-15" viewBox="0 0 24 24">
    <path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z" fill=" currentcolor"/>
                                        </svg>
                                        -4.73%
                                    </p>
                                </div>
                                <div class="row g-2 align-items-center">
                                    <div class="col-6">
                                        <h5 class="mb-2 mt-3">£5678.09</h5>
                                        <div class="d-flex align-items-center gap-1">
                                            <h5 class="mb-0">5</h5>
                                            <p class="mb-0 text-muted d-flex align-items-center gap-2">invoices</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <apexchart id="total-invoice-3-chart" height="55" type="area" dir="ltr" :series="total_invoice_3_chart_options.series" :options="total_invoice_3_chart_options.chartOptions"></apexchart>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-4">
                <div class="card bg-primary">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <div class="avtar bg-white bg-opacity-10 text-white">
                                    <i class="ph-duotone ph-user-plus f-22"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <p class="text-white mb-1 d-flex align-items-center gap-2">Total Recievables <AlertCircleIcon></AlertCircleIcon> </p>
                                <div class="d-flex align-items-center justify-content-between">
                                    <p class="text-white mb-0 d-flex align-items-center gap-2">Current <span class="fw-medium f-16">109.1k</span> </p>
                                    <p class="text-white mb-0 d-flex align-items-center gap-2">Overdue <span class="fw-medium f-16">62k</span> </p>
                                </div>
                            </div>
                        </div>
                        <h4 class="text-white mt-3 mb-1">$43,078</h4>
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 me-3">
                                <div class="progress bg-light-warning" style="height: 7px;">
                                    <div class="progress-bar bg-warning" style="width: 90%"></div>
                                </div>
                            </div>
                            <div class="flex-shrink-0 text-end wid-30">
                                <p class="text-white mb-0">90%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-tabs invoice-tab border-bottom mb-3" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="analytics-tab-1" data-bs-toggle="tab" data-bs-target="#analytics-tab-1-pane" type="button" role="tab" aria-controls="analytics-tab-1-pane" aria-selected="true">
                                    <span class="d-flex align-items-center gap-2">All <span class="avtar rounded-circle bg-light-primary">5</span></span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="analytics-tab-2" data-bs-toggle="tab" data-bs-target="#analytics-tab-2-pane" type="button" role="tab" aria-controls="analytics-tab-2-pane" aria-selected="false">
                                    <span class="d-flex align-items-center gap-2">Paid <span class="avtar rounded-circle bg-light-success">2</span></span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="analytics-tab-3" data-bs-toggle="tab" data-bs-target="#analytics-tab-3-pane" type="button" role="tab" aria-controls="analytics-tab-3-pane" aria-selected="false">
                                    <span class="d-flex align-items-center gap-2">Unpaid <span class="avtar rounded-circle bg-light-warning">2</span></span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="analytics-tab-4" data-bs-toggle="tab" data-bs-target="#analytics-tab-4-pane" type="button" role="tab" aria-controls="analytics-tab-4-pane" aria-selected="false">
                                    <span class="d-flex align-items-center gap-2">Cancelled <span class="avtar rounded-circle bg-light-danger">1</span></span>
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="analytics-tab-1-pane" role="tabpanel" aria-labelledby="analytics-tab-1" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="pc-dt-simple-1">
                                        <thead>
                                            <tr>
                                                <th>Invoice Id</th>
                                                <th>User Name</th>
                                                <th>Create Date</th>
                                                <th>Due Date</th>
                                                <th>Quantity</th>
                                                <th>Status</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-5.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-9.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-10.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-1.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>5</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-2.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>6</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-3.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>7</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-4.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>8</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-7.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>9</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-8.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="analytics-tab-2-pane" role="tabpanel" aria-labelledby="analytics-tab-2" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="pc-dt-simple-2">
                                        <thead>
                                            <tr>
                                                <th>Invoice Id</th>
                                                <th>User Name</th>
                                                <th>Create Date</th>
                                                <th>Due Date</th>
                                                <th>Quantity</th>
                                                <th>Status</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>5</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-2.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>6</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-3.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-5.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-9.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-10.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-1.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>7</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-4.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>8</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-7.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>9</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-8.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="analytics-tab-3-pane" role="tabpanel" aria-labelledby="analytics-tab-3" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="pc-dt-simple-3">
                                        <thead>
                                            <tr>
                                                <th>Invoice Id</th>
                                                <th>User Name</th>
                                                <th>Create Date</th>
                                                <th>Due Date</th>
                                                <th>Quantity</th>
                                                <th>Status</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-5.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-9.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-10.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-1.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>5</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-2.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>6</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-3.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>7</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-4.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>8</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-7.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>9</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-8.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="analytics-tab-4-pane" role="tabpanel" aria-labelledby="analytics-tab-4" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="pc-dt-simple-4">
                                        <thead>
                                            <tr>
                                                <th>Invoice Id</th>
                                                <th>User Name</th>
                                                <th>Create Date</th>
                                                <th>Due Date</th>
                                                <th>Quantity</th>
                                                <th>Status</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>5</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-2.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>6</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-3.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-5.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-9.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-10.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-1.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>7</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-4.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Mickie Melmoth</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">mmsht23@gmail.com</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>5/5/2022</td>
                                                <td>7/11/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-success">Paid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>8</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-7.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">Shelba Thews</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>7/6/2022</td>
                                                <td>7/8/2022</td>
                                                <td>3000</td>
                                                <td><span class="badge bg-light-danger">Cancelled</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>9</td>
                                                <td>
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pe-0">
                                                            <img src="@/assets/images/user/avatar-8.jpg" alt="user-image" class="wid-40 hei-40 rounded-circle" />
                                                        </div>
                                                        <div class="col">
                                                            <h6 class="mb-1"><span class="text-truncate w-100">tass23@gmail.com</span>
                                                            </h6>
                                                            <p class="f-12 mb-0"><a href="#!" class="text-muted"><span class="text-truncate w-100">Shelba Thews</span></a></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>05/01/2022</td>
                                                <td>06/02/2022</td>
                                                <td>1000</td>
                                                <td><span class="badge bg-light-info">Unpaid</span></td>
                                                <td class="text-end">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-info btn-pc-default"><i class="ti ti-eye f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-success btn-pc-default"><i class="ti ti-edit f-20"></i></a></li>
                                                        <li class="list-inline-item"><a href="#" class="avtar avtar-s btn-link-danger btn-pc-default"><i class="ti ti-trash f-20"></i></a></li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Layout>
</template>