<script>
import Layout from "@/layout/main.vue"
import pageheader from "@/components/page-header.vue"
import { total_line_1_chart_options, total_line_2_chart_options, total_line_3_chart_options, cashflow_bar_chart_options, donut_chart_options } from "./data"
import cardBg from '@/assets/images/widget/img-card-bg.svg'

export default {
    name: "DASHBOARD",
    data() {
        return {
            cardBg: cardBg,
            total_line_1_chart_options: total_line_1_chart_options,
            total_line_2_chart_options: total_line_2_chart_options,
            total_line_3_chart_options: total_line_3_chart_options,
            cashflow_bar_chart_options: cashflow_bar_chart_options,
            donut_chart_options: donut_chart_options
        }
    },
   
    components: {
        Layout, pageheader
    },
}
</script>

<template>
    <Layout>
        <pageheader title="Home" pageTitle="Finance" />
        <BRow>
            <BCol md="5" lg="4">
                <BCard no-body>
                    <BCardBody>
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="mb-0">My Card</h5>
                            <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-s text-reset dropdown-btn arrow-none" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                <template #button-content><span class="text-muted"><i class="ti ti-dots-vertical f-18"></i></span>
                                </template>
                                <BDropdownItem>Today</BDropdownItem>
                                <BDropdownItem>Weekly</BDropdownItem>
                                <BDropdownItem>Monthly</BDropdownItem>
                            </BDropdown>

                        </div>
                        <BCard no-body class="rounded-4 overflow-hidden" :style="{ backgroundImage: `url(${cardBg})`, backgroundSize: 'cover' }">
                            <BCardBody>
                                <div class="d-flex">
                                    <div class="flex-grow-1 me-3">
                                        <p class="text-white text-sm text-opacity-50 mb-0">CARD NAME</p>
                                        <h5 class="text-white">Jonh Smith</h5>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <img src="@/assets/images/widget/img-card-master.svg" alt="img" class="img-fluid">
                                    </div>
                                </div>
                                <h4 class="text-white my-3">**** **** **** **** 8361</h4>
                                <div class="row">
                                    <div class="col-auto">
                                        <p class="text-white text-sm text-opacity-50 mb-0">EXP</p>
                                        <h6 class="text-white mb-0">7/30</h6>
                                    </div>
                                    <div class="col-auto">
                                        <p class="text-white text-sm text-opacity-50 mb-0">CVV</p>
                                        <h6 class="text-white mb-0">455</h6>
                                    </div>
                                </div>
                            </BCardBody>
                        </BCard>
                        <div class="text-center mt-3">
                            <h3 class="mb-1">$1.480.000</h3>
                            <p class="text-muted mb-0">Total Balance</p>
                        </div>
                    </BCardBody>
                </BCard>
                <BCard no-body>
                    <BCardBody>
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="mb-0">Transactions</h5>

                            <BDropdown variant="link-secondary" class="card-header-dropdown" size="sm" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                <template #button-content><span class="text-muted"><i class="ti ti-dots-vertical f-18"></i></span>
                                </template>
                                <BDropdownItem>Today</BDropdownItem>
                                <BDropdownItem>Weekly</BDropdownItem>
                                <BDropdownItem>Monthly</BDropdownItem>
                            </BDropdown>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avtar avtar-s border"> AI </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <BRow class="g-1">
                                            <BCol lg="6">
                                                <h6 class="mb-0">Apple Inc.</h6>
                                                <p class="text-muted mb-0"><small>#ABLE-PRO-T00232</small></p>
                                            </BCol>
                                            <BCol lg="6" class="text-end">
                                                <h6 class="mb-1">$210,000</h6>
                                                <p class="text-danger mb-0"><i class="ti ti-arrow-down-left"></i> 10.6%</p>
                                            </BCol>
                                        </BRow>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avtar avtar-s border" data-bs-toggle="tooltip" data-bs-title="10,000 Tracks"><span>SM</span></div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <BRow class="row g-1">
                                            <BCol class="col-6">
                                                <h6 class="mb-0">Spotify Music</h6>
                                                <p class="text-muted mb-0"><small>#ABLE-PRO-T10232</small></p>
                                            </BCol>
                                            <BCol class="col-6 text-end">
                                                <h6 class="mb-1">- 10,000</h6>
                                                <p class="text-success mb-0"><i class="ti ti-arrow-up-right"></i> 30.6%</p>
                                            </BCol>
                                        </BRow>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avtar avtar-s border bg-light-primary" data-bs-toggle="tooltip" data-bs-title="143 Posts"><span>MD</span>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <BRow class="g-1">
                                            <BCol class="col-6">
                                                <h6 class="mb-0">Medium</h6>
                                                <p class="text-muted mb-0"><small>06:30 pm</small></p>
                                            </BCol>
                                            <BCol class="col-6 text-end">
                                                <h6 class="mb-1">-26</h6>
                                                <p class="text-warning mb-0"><i class="ti ti-arrows-left-right"></i> 5%</p>
                                            </BCol>
                                        </BRow>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avtar avtar-s border" data-bs-toggle="tooltip" data-bs-title="143 Posts"><span>U</span> </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <BRow class="row g-1">
                                            <BCol class="col-6">
                                                <h6 class="mb-0">Uber</h6>
                                                <p class="text-muted mb-0"><small>08:40 pm</small></p>
                                            </BCol>
                                            <BCol class="col-6 text-end">
                                                <h6 class="mb-1">+210,000</h6>
                                                <p class="text-success mb-0"><i class="ti ti-arrow-up-right"></i> 10.6%</p>
                                            </BCol>
                                        </BRow>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avtar avtar-s border bg-light-warning" data-bs-toggle="tooltip" data-bs-title="143 Posts"><span>OC</span>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <BRow class="g-1">
                                            <BCol class="col-6">
                                                <h6 class="mb-0">Ola Cabs</h6>
                                                <p class="text-muted mb-0"><small>07:40 pm</small></p>
                                            </BCol>
                                            <BCol class="col-6 text-end">
                                                <h6 class="mb-1">+210,000</h6>
                                                <p class="text-success mb-0"><i class="ti ti-arrow-up-right"></i> 10.6%</p>
                                            </BCol>
                                        </BRow>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </BCardBody>
                </BCard>
            </BCol>
            <BCol md="7" lg="8">
                <div class="row">
                    <div class="col-md-6 col-xxl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start justify-content-between mb-3">
                                    <div>
                                        <h6 class="mb-0">Transactions</h6>
                                        <p class="mb-0 text-muted">2-31 July 2023</p>
                                    </div>
                                    <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                        <template #button-content><span class="text-muted"><i class="ti ti-dots-vertical f-18"></i></span>
                                        </template>
                                        <BDropdownItem>Today</BDropdownItem>
                                        <BDropdownItem>Weekly</BDropdownItem>
                                        <BDropdownItem>Monthly</BDropdownItem>
                                    </BDropdown>
                                </div>

                                <apexchart id="total-line-1-chart" type="line" height="60" :options="total_line_1_chart_options.chartOptions" :series="total_line_1_chart_options.series" />

                                <div class="d-flex align-items-center justify-content-between gap-2 mt-3">
                                    <h4 class="mb-0"><small class="text-muted">$</small>650k</h4>
                                    <p class="mb-0 text-muted text-sm">Compare to last week</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xxl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start justify-content-between mb-3">
                                    <div>
                                        <h6 class="mb-0">Transactions</h6>
                                        <p class="mb-0 text-muted">2-31 July 2023</p>
                                    </div>
                                    <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                        <template #button-content><span class="text-muted"><i class="ti ti-dots-vertical f-18"></i></span>
                                        </template>
                                        <BDropdownItem>Today</BDropdownItem>
                                        <BDropdownItem>Weekly</BDropdownItem>
                                        <BDropdownItem>Monthly</BDropdownItem>
                                    </BDropdown>
                                </div>
                                <apexchart id="total-line-2-chart" type="line" height="60" :options="total_line_2_chart_options.chartOptions" :series="total_line_2_chart_options.series" />

                                <!-- <div id="total-line-2-chart"></div> -->
                                <div class="d-flex align-items-center justify-content-between gap-2 mt-3">
                                    <h4 class="mb-0"><small class="text-muted">$</small>650k</h4>
                                    <p class="mb-0 text-muted text-sm">Compare to last week</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-xxl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start justify-content-between mb-3">
                                    <div>
                                        <h6 class="mb-0">Transactions</h6>
                                        <p class="mb-0 text-muted">2-31 July 2023</p>
                                    </div>
                                    <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                        <template #button-content><span class="text-muted"><i class="ti ti-dots-vertical f-18"></i></span>
                                        </template>
                                        <BDropdownItem>Today</BDropdownItem>
                                        <BDropdownItem>Weekly</BDropdownItem>
                                        <BDropdownItem>Monthly</BDropdownItem>
                                    </BDropdown>
                                </div>
                                <apexchart id="total-line-3-chart" type="line" height="60" :options="total_line_3_chart_options.chartOptions" :series="total_line_3_chart_options.series" />
                                <div class="d-flex align-items-center justify-content-between gap-2 mt-3">
                                    <h4 class="mb-0"><small class="text-muted">$</small>650k</h4>
                                    <p class="mb-0 text-muted text-sm">Compare to last week</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div>
                                <h5 class="mb-1">Cashflow</h5>
                                <p>5.44% <span class="badge text-bg-success">5.44%</span></p>
                            </div>
                            <select class="form-select rounded-3 form-select-sm w-auto">
                                <option>Today</option>
                                <option>Weekly</option>
                                <option selected>Monthly</option>
                            </select>
                        </div>
                        <apexchart id="cashflow-bar-chart" type="bar" height="260" :options="cashflow_bar_chart_options.chartOptions" :series="cashflow_bar_chart_options.series" />

                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="mb-0">Where your money go ?</h5>
                            <button class="btn btn-sm btn-primary">+ Add New</button>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6 col-xxl-3">
                                <div class="card shadow-none border mb-0">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-center justify-content-between mb-3">
                                            <img src="@/assets/images/widget/img-food.png" alt="img" class="img-fluid">
                                            <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none p-1" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                                <template #button-content><span class="text-muted "><i class="ti ti-dots-vertical f-18"></i></span>
                                                </template>
                                                <BDropdownItem>Today</BDropdownItem>
                                                <BDropdownItem>Weekly</BDropdownItem>
                                                <BDropdownItem>Monthly</BDropdownItem>
                                            </BDropdown>
                                        </div>
                                        <h6 class="mb-3">Food & Drink</h6>
                                        <div class="bg-dark p-3 pt-4 rounded-4">
                                            <div class="progress bg-white bg-opacity-25" style="height: 6px;">
                                                <div class="progress-bar bg-white" style="width: 65%"></div>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-between mt-2">
                                                <p class="mb-0 text-white text-opacity-75 text-sm">65%</p>
                                                <p class="mb-0 text-white text-opacity-75 text-sm">$1000</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-xxl-3">
                                <div class="card shadow-none border mb-0">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-center justify-content-between mb-3">
                                            <img src="@/assets/images/widget/img-travel.png" alt="img" class="img-fluid">
                                            <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none p-1" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                                <template #button-content><span class="text-muted "><i class="ti ti-dots-vertical f-18"></i></span>
                                                </template>
                                                <BDropdownItem>Today</BDropdownItem>
                                                <BDropdownItem>Weekly</BDropdownItem>
                                                <BDropdownItem>Monthly</BDropdownItem>
                                            </BDropdown>
                                        </div>
                                        <h6 class="mb-3">Travel</h6>
                                        <div class="bg-dark p-3 pt-4 rounded-4">
                                            <div class="progress bg-white bg-opacity-25" style="height: 6px;">
                                                <div class="progress-bar bg-white" style="width: 30%"></div>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-between mt-2">
                                                <p class="mb-0 text-white text-opacity-75 text-sm">30%</p>
                                                <p class="mb-0 text-white text-opacity-75 text-sm">$400</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-xxl-3">
                                <div class="card shadow-none border mb-0">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-center justify-content-between mb-3">
                                            <img src="@/assets/images/widget/img-shoping.png" alt="img" class="img-fluid">
                                            <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none p-1" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                                <template #button-content><span class="text-muted "><i class="ti ti-dots-vertical f-18"></i></span>
                                                </template>
                                                <BDropdownItem>Today</BDropdownItem>
                                                <BDropdownItem>Weekly</BDropdownItem>
                                                <BDropdownItem>Monthly</BDropdownItem>
                                            </BDropdown>
                                        </div>
                                        <h6 class="mb-3">Shopping</h6>
                                        <div class="bg-dark p-3 pt-4 rounded-4">
                                            <div class="progress bg-white bg-opacity-25" style="height: 6px;">
                                                <div class="progress-bar bg-white" style="width: 52%"></div>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-between mt-2">
                                                <p class="mb-0 text-white text-opacity-75 text-sm">52%</p>
                                                <p class="mb-0 text-white text-opacity-75 text-sm">$900</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-xxl-3">
                                <div class="card shadow-none border mb-0">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-center justify-content-between mb-3">
                                            <img src="@/assets/images/widget/img-helth.png" alt="img" class="img-fluid">
                                            <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none p-1" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                                <template #button-content><span class="text-muted "><i class="ti ti-dots-vertical f-18"></i></span>
                                                </template>
                                                <BDropdownItem>Today</BDropdownItem>
                                                <BDropdownItem>Weekly</BDropdownItem>
                                                <BDropdownItem>Monthly</BDropdownItem>
                                            </BDropdown>
                                        </div>
                                        <h6 class="mb-3">Healthcare</h6>
                                        <div class="bg-dark p-3 pt-4 rounded-4">
                                            <div class="progress bg-white bg-opacity-25" style="height: 6px;">
                                                <div class="progress-bar bg-white" style="width: 52%"></div>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-between mt-2">
                                                <p class="mb-0 text-white text-opacity-75 text-sm">26%</p>
                                                <p class="mb-0 text-white text-opacity-75 text-sm">$250</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </BCol>
            <BCol md="12" lg="4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="mb-3">Accounts</h5>
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="card shadow-none border mb-0">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <img src="@/assets/images/widget/img-card-1.png" alt="img" class="img-fluid">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <div class="d-flex align-items-center justify-content-center gap-2 text-success">
                                                    <i class="ti ti-circle f-10"></i>
                                                    <p class="mb-0">Active</p>
                                                </div>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <h6 class="mb-0">12,920.000</h6>
                                                <p class="mb-0">US Dollar</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card shadow-none border mb-0">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <img src="@/assets/images/widget/img-card-2.png" alt="img" class="img-fluid">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <div class="d-flex align-items-center justify-content-center gap-2 text-success">
                                                    <i class="ti ti-circle f-10"></i>
                                                    <p class="mb-0">Active</p>
                                                </div>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <h6 class="mb-0">12,920.000</h6>
                                                <p class="mb-0">US Dollar</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <input class="form-control d-none" type="file" id="formFile">
                                <label for="formFile" class="form-label d-block mb-0">
                                    <span class="card shadow-none border mb-0">
                                        <span class="card-body p-3 text-center">
                                            <span class="d-flex align-items-center justify-content-center gap-2 flex-column">
                                                <span class="avtar avtar-s bg-dark text-white rounded-circle">
                                                    <i class="ti ti-plus f-18"></i>
                                                </span>
                                                <span class="text-muted">Add to Account</span>
                                            </span>
                                        </span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </BCol>
            <BCol md="6" lg="4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="mb-0">Quick Transfer</h5>
                            <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-s text-reset dropdown-btn arrow-none p-2" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                <template #button-content><span class="text-muted "><i class="ti ti-dots-vertical f-18"></i></span>
                                </template>
                                <BDropdownItem>Today</BDropdownItem>
                                <BDropdownItem>Weekly</BDropdownItem>
                                <BDropdownItem>Monthly</BDropdownItem>
                            </BDropdown>
                        </div>
                        <div class="d-flex align-items-center justify-content-between gap-2 my-3">
                            <a href="#" class="avtar border border-secondary rounded-circle btn-light-secondary">
                                <i class="ti ti-plus f-20"></i>
                            </a>
                            <a href="#" class="avtar"><img class="rounded-circle img-fluid" src="@/assets/images/user/avatar-1.jpg" alt="User image" /></a>
                            <a href="#" class="avtar"><img class="rounded-circle img-fluid" src="@/assets/images/user/avatar-2.jpg" alt="User image" /></a>
                            <a href="#" class="avtar"><img class="rounded-circle img-fluid" src="@/assets/images/user/avatar-3.jpg" alt="User image" /></a>
                            <a href="#" class="avtar"><img class="rounded-circle img-fluid" src="@/assets/images/user/avatar-4.jpg" alt="User image" /></a>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <img src="@/assets/images/widget/img-acitivity-3.svg" alt="img" class="wid-30 rounded" />
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <div class="row g-1">
                                            <div class="col-6">
                                                <h6 class="mb-0">Starbucks Cafe</h6>
                                                <p class="text-muted mb-0">11th Sep 2020</p>
                                            </div>
                                            <div class="col-6 text-end">
                                                <h5 class="mb-1 text-danger">-$26</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <img src="@/assets/images/widget/img-acitivity-3.svg" alt="img" class="wid-30 rounded" />
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <div class="row g-1">
                                            <div class="col-6">
                                                <h6 class="mb-0">Starbucks Cafe</h6>
                                                <p class="text-muted mb-0">11th Sep 2020</p>
                                            </div>
                                            <div class="col-6 text-end">
                                                <h5 class="mb-1 text-success">-$750.00</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item px-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <img src="@/assets/images/widget/img-acitivity-3.svg" alt="img" class="wid-30 rounded" />
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <div class="row g-1">
                                            <div class="col-6">
                                                <h6 class="mb-0">Starbucks Cafe</h6>
                                                <p class="text-muted mb-0">11th Sep 2020</p>
                                            </div>
                                            <div class="col-6 text-end">
                                                <h5 class="mb-1 text-danger">-$26</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </BCol>
            <BCol md="6" lg="4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="mb-0">Category</h5>
                            <BDropdown variant="link-secondary" class="card-header-dropdown" toggle-class="avtar avtar-xs text-reset dropdown-btn arrow-none p-1" menu-class="dropdown-menu-end" aria-haspopup="true" :offset="{ alignmentAxis: -160, crossAxis: 0, mainAxis: 0 }">
                                <template #button-content><span class="text-muted "><i class="ti ti-dots-vertical f-18"></i></span>
                                </template>
                                <BDropdownItem>Today</BDropdownItem>
                                <BDropdownItem>Weekly</BDropdownItem>
                                <BDropdownItem>Monthly</BDropdownItem>
                            </BDropdown>
                        </div>
                        <apexchart id="category-donut-chart" type="donut" height="310" :options="donut_chart_options.chartOptions" :series="donut_chart_options.series" />
                    </div>
                </div>
            </BCol>
            <BCol class="col-12">
                <div class="card table-card">
                    <div class="card-header d-flex align-items-center justify-content-between py-3">
                        <h5 class="mb-0">Transaction History</h5>
                        <button class="btn btn-sm btn-link-primary">View All</button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover" id="pc-dt-simple">
                                <thead>
                                    <tr>
                                        <th>User Name</th>
                                        <th>Category</th>
                                        <th>Date/Time</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <img src="@/assets/images/user/avatar-1.jpg" alt="user image" class="img-radius wid-40">
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="mb-0">Airi Satou</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>Salary Payment</td>
                                        <td>2023/02/07 <span class="text-muted text-sm d-block">09:05 PM</span></td>
                                        <td>$950.54</td>
                                        <td><span class="badge text-bg-success">Completed</span></td>
                                        <td>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-eye f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-edit f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-trash f-20"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <img src="@/assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40">
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="mb-0">Ashton Cox</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>Project Payment</td>
                                        <td>2023/02/01 <span class="text-muted text-sm d-block">02:14 PM</span></td>
                                        <td>$520.30</td>
                                        <td><span class="badge text-bg-success">Completed</span></td>
                                        <td>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-eye f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-edit f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-trash f-20"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <img src="@/assets/images/user/avatar-3.jpg" alt="user image" class="img-radius wid-40">
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="mb-0">Bradley Greer</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>You Tube Subscribe</td>
                                        <td>2023/01/22 <span class="text-muted text-sm d-block">10:32 AM</span></td>
                                        <td>$100.00</td>
                                        <td><span class="badge text-bg-warning">Pending</span></td>
                                        <td>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-eye f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-edit f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-trash f-20"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <img src="@/assets/images/user/avatar-4.jpg" alt="user image" class="img-radius wid-40">
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="mb-0">Brielle Williamson</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>Slary Payment</td>
                                        <td>2023/02/07 <span class="text-muted text-sm d-block">09:05 PM</span></td>
                                        <td>$760.25</td>
                                        <td><span class="badge text-bg-primary">In Progress</span></td>
                                        <td>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-eye f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-edit f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-trash f-20"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <img src="@/assets/images/user/avatar-5.jpg" alt="user image" class="img-radius wid-40">
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="mb-0">Airi Satou</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>Spotify Subscribe</td>
                                        <td>2023/02/07 <span class="text-muted text-sm d-block">09:05 PM</span></td>
                                        <td>$60.05</td>
                                        <td><span class="badge text-bg-danger">Canceled</span></td>
                                        <td>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-eye f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-edit f-20"></i>
                                            </a>
                                            <a href="#" class="avtar avtar-xs btn-link-secondary">
                                                <i class="ti ti-trash f-20"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </BCol>
        </BRow>
    </Layout>
</template>

<!-- <style>
.card {
    z-index: 0;
}
</style> -->