2022-09-08 15:06:44 -04:00

398 lines
13 KiB
Vue

<script>
import Layout from "../layouts/main";
import Profile from "../components/widgets/profile";
import Earning from "../components/widgets/earning";
import Stat from "../components/widgets/stat";
import Transaction from "../components/widgets/transaction";
import Emailsent from "../components/widgets/emailsent";
/**
* Dashboard Component
*/
export default {
components: { Layout, Profile, Stat, Transaction, Earning, Emailsent },
data() {
return {
title: "Dashboard",
showModal: false,
statData: [
{
icon: "bx bx-copy-alt",
title: "Orders",
value: "1,235"
},
{
icon: "bx bx-archive-in",
title: "Revenue",
value: "$35, 723"
},
{
icon: "bx bx-purchase-tag-alt",
title: "Average Price",
value: "$16.2"
}
],
transactions: [
{
id: "#SK2540",
name: "Neal Matthews",
date: "07 Oct, 2019",
total: "$400",
status: "Paid",
payment: ["fa-cc-mastercard", "Mastercard"],
index: 1
},
{
id: "#SK2541",
name: "Jamal Burnett",
date: "07 Oct, 2019",
total: "$380",
status: "Chargeback",
payment: ["fa-cc-visa", "Visa"],
index: 2
},
{
id: "#SK2542",
name: "Juan Mitchell",
date: "06 Oct, 2019",
total: "$384",
status: "Paid",
payment: ["fab fa-cc-paypal", "Paypal"],
index: 3
},
{
id: "#SK2543",
name: "Barry Dick",
date: "05 Oct, 2019",
total: "$412",
status: "Paid",
payment: ["fa-cc-mastercard", "Mastercard"],
index: 4
},
{
id: "#SK2544",
name: "Ronald Taylor",
date: "04 Oct, 2019",
total: "$404",
status: "Refund",
payment: ["fa-cc-visa", "Visa"],
index: 5
},
{
id: "#SK2545",
name: "Jacob Hunter",
date: "04 Oct, 2019",
total: "$392",
status: "Paid",
payment: ["fab fa-cc-paypal", "Paypal"],
index: 6
}
]
};
},
mounted() {
setTimeout(() => {
this.showModal = true;
}, 1500);
},
};
</script>
<template>
<Layout>
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-flex align-items-center justify-content-between">
<h4 class="mb-0 font-size-18">Dashboard</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item active">Welcome to Skote Dashboard</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-xl-4">
<Profile />
<Earning />
</div>
<!-- end col -->
<div class="col-xl-8">
<div class="row">
<div v-for="stat of statData" :key="stat.icon" class="col-md-4">
<Stat :icon="stat.icon" :title="stat.title" :value="stat.value" />
</div>
</div>
<!-- Email sent -->
<Emailsent />
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-xl-4">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Social Source</h4>
<div class="text-center">
<div class="avatar-sm mx-auto mb-4">
<span class="avatar-title rounded-circle bg-primary font-size-18">
<i class="mdi mdi-facebook text-white"></i>
</span>
</div>
<p class="font-16 text-muted mb-2"></p>
<h5>
<a href="javascript: void(0);" class="text-dark">
Facebook -
<span class="text-muted font-16">125 sales</span>
</a>
</h5>
<p
class="text-muted"
>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus tincidunt.</p>
<a href="javascript: void(0);" class="text-primary font-16">
Learn more
<i class="mdi mdi-chevron-right"></i>
</a>
</div>
<div class="row mt-4">
<div class="col-sm-4">
<div class="social-source text-center mt-3">
<div class="avatar-xs mx-auto mb-3">
<span class="avatar-title rounded-circle bg-primary font-size-16">
<i class="mdi mdi-facebook text-white"></i>
</span>
</div>
<h5 class="font-size-15">Facebook</h5>
<p class="text-muted mb-0">125 sales</p>
</div>
</div>
<div class="col-sm-4">
<div class="social-source text-center mt-3">
<div class="avatar-xs mx-auto mb-3">
<span class="avatar-title rounded-circle bg-info font-size-16">
<i class="mdi mdi-twitter text-white"></i>
</span>
</div>
<h5 class="font-size-15">Twitter</h5>
<p class="text-muted mb-0">112 sales</p>
</div>
</div>
<div class="col-sm-4">
<div class="social-source text-center mt-3">
<div class="avatar-xs mx-auto mb-3">
<span class="avatar-title rounded-circle bg-pink font-size-16">
<i class="mdi mdi-instagram text-white"></i>
</span>
</div>
<h5 class="font-size-15">Instagram</h5>
<p class="text-muted mb-0">104 sales</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-xl-4">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-5">Activity</h4>
<ul class="verti-timeline list-unstyled">
<li class="event-list">
<div class="event-timeline-dot">
<i class="bx bx-right-arrow-circle font-size-18"></i>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-14">
22 Nov
<i
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
></i>
</h5>
</div>
<div class="media-body">
<div>Responded to need Volunteer Activities</div>
</div>
</div>
</li>
<li class="event-list">
<div class="event-timeline-dot">
<i class="bx bx-right-arrow-circle font-size-18"></i>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-14">
17 Nov
<i
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
></i>
</h5>
</div>
<div class="media-body">
<div>
Everyone realizes why a new common language would be desirable...
<a
href="javascript: void(0);"
>Read more</a>
</div>
</div>
</div>
</li>
<li class="event-list active">
<div class="event-timeline-dot">
<i class="bx bxs-right-arrow-circle font-size-18 bx-fade-right"></i>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-14">
15 Nov
<i
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
></i>
</h5>
</div>
<div class="media-body">
<div>Joined the group Boardsmanship Forum</div>
</div>
</div>
</li>
<li class="event-list">
<div class="event-timeline-dot">
<i class="bx bx-right-arrow-circle font-size-18"></i>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-14">
12 Nov
<i
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
></i>
</h5>
</div>
<div class="media-body">
<div>Responded to need In-Kind Opportunity</div>
</div>
</div>
</li>
</ul>
<div class="text-center mt-4">
<a href="javascript: void(0);" class="btn btn-primary btn-sm">Load More</a>
</div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-xl-4">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Top Cities Selling Product</h4>
<div class="text-center">
<div class="mb-4">
<i class="bx bx-map-pin text-primary display-4"></i>
</div>
<h3>1,456</h3>
<p>San Francisco</p>
</div>
<div class="table-responsive mt-4">
<table class="table table-centered">
<tbody>
<tr>
<td style="width: 140px">
<p class="mb-0">San Francisco</p>
</td>
<td style="width: 120px">
<h5 class="mb-0">1,456</h5>
</td>
<td>
<b-progress :value="94" variant="primary" height="5px"></b-progress>
</td>
</tr>
<tr>
<td>
<p class="mb-0">Los Angeles</p>
</td>
<td>
<h5 class="mb-0">1,123</h5>
</td>
<td>
<b-progress :value="82" variant="success" height="5px"></b-progress>
</td>
</tr>
<tr>
<td>
<p class="mb-0">San Diego</p>
</td>
<td>
<h5 class="mb-0">1,026</h5>
</td>
<td>
<b-progress :value="70" variant="warning" height="5px"></b-progress>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Latest Transaction</h4>
<!-- Transactions table -->
<Transaction :transactions="transactions" />
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
<b-modal v-model="showModal" hide-footer centered header-class="border-0">
<div class="text-center mb-4">
<div class="avatar-md mx-auto mb-4">
<div class="avatar-title bg-light rounded-circle text-primary h1">
<i class="mdi mdi-email-open"></i>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-10">
<h4 class="text-primary">Subscribe !</h4>
<p class="text-muted font-size-14 mb-4">
Subscribe our newletter and get notification to stay update.
</p>
<div class="input-group bg-light rounded">
<input
type="email"
class="form-control bg-transparent border-0"
placeholder="Enter Email address"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<button class="btn btn-primary" type="button" id="button-addon2">
<i class="bx bxs-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</b-modal>
</Layout>
</template>