first commit
This commit is contained in:
Inshal
42
resources/js/views/dashboards/analytics/AnalyticsAward.vue
Normal file
42
resources/js/views/dashboards/analytics/AnalyticsAward.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import trophy from '@images/misc/trophy.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="position-relative">
|
||||
<VCardText>
|
||||
<div class="mb-2">
|
||||
<h5 class="text-h5">
|
||||
Congratulations John! <span class="text-high-emphasis">🎉</span>
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Best seller of the month
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="text-h4 text-primary">
|
||||
$42.8k
|
||||
</h4>
|
||||
<div class="text-body-1 mb-2">
|
||||
78% of target <span class="text-high-emphasis">🚀</span>
|
||||
</div>
|
||||
<VBtn size="small">
|
||||
View Sales
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- Trophy -->
|
||||
<VImg
|
||||
:src="trophy"
|
||||
class="trophy"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card .trophy {
|
||||
position: absolute;
|
||||
inline-size: 5.188rem;
|
||||
inset-block-end: 1.25rem;
|
||||
inset-inline-end: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<script setup>
|
||||
import americanBank from '@images/logos/american-bank.png'
|
||||
import aws from '@images/logos/aws.png'
|
||||
import citiBank from '@images/logos/citi-bank.png'
|
||||
import digitalOcean from '@images/logos/digital-ocean.png'
|
||||
import github from '@images/logos/github.png'
|
||||
import google from '@images/logos/google.png'
|
||||
import gumroad from '@images/logos/gumroad.png'
|
||||
import mastercardLabel from '@images/logos/mastercard-label.png'
|
||||
import slack from '@images/logos/slack.png'
|
||||
import stripe from '@images/logos/stripe.png'
|
||||
|
||||
const deposits = [
|
||||
{
|
||||
title: 'Gumroad Account',
|
||||
subtitle: 'Sell UI Kit',
|
||||
amount: '+$4,650',
|
||||
logo: gumroad,
|
||||
},
|
||||
{
|
||||
title: 'Mastercard',
|
||||
subtitle: 'Wallet deposit',
|
||||
amount: '+$92,705',
|
||||
logo: mastercardLabel,
|
||||
},
|
||||
{
|
||||
title: 'Stripe Account',
|
||||
subtitle: 'iOS Application',
|
||||
amount: '+$957',
|
||||
logo: stripe,
|
||||
},
|
||||
{
|
||||
title: 'American Bank',
|
||||
subtitle: 'American Bank',
|
||||
amount: '+$6,837',
|
||||
logo: americanBank,
|
||||
},
|
||||
{
|
||||
title: 'Bank Account',
|
||||
subtitle: 'Wallet deposit',
|
||||
amount: '+$8,934',
|
||||
logo: citiBank,
|
||||
},
|
||||
]
|
||||
|
||||
const withdraws = [
|
||||
{
|
||||
title: 'Google Adsense',
|
||||
subtitle: 'PayPal deposit',
|
||||
amount: '-$145',
|
||||
logo: google,
|
||||
},
|
||||
{
|
||||
title: 'GitHub Enterprise',
|
||||
subtitle: 'Security & compliance',
|
||||
amount: '-$1870',
|
||||
logo: github,
|
||||
},
|
||||
{
|
||||
title: 'Upgrade Slack Plan',
|
||||
subtitle: 'Debit card deposit',
|
||||
amount: '-$450',
|
||||
logo: slack,
|
||||
},
|
||||
{
|
||||
title: 'DigitalOcean',
|
||||
subtitle: 'Cloud Hosting',
|
||||
amount: '-$540',
|
||||
logo: digitalOcean,
|
||||
},
|
||||
{
|
||||
title: 'AWS Account',
|
||||
subtitle: 'Choosing a Cloud Platform',
|
||||
amount: '-$21',
|
||||
logo: aws,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Deposit</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<h6 class="text-h6">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>View All</a>
|
||||
</h6>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="deposit in deposits"
|
||||
:key="deposit.logo"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="me-4">
|
||||
<VImg
|
||||
:height="30"
|
||||
:width="30"
|
||||
:src="deposit.logo"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ deposit.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1">
|
||||
{{ deposit.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="text-success font-weight-medium">
|
||||
{{ deposit.amount }}
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Withdraw</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<h6 class="text-h6">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>View All</a>
|
||||
</h6>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="withdraw in withdraws"
|
||||
:key="withdraw.logo"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="me-4">
|
||||
<VImg
|
||||
:height="30"
|
||||
:width="30"
|
||||
:src="withdraw.logo"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ withdraw.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1">
|
||||
{{ withdraw.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<span class="text-error font-weight-medium">
|
||||
{{ withdraw.amount }}
|
||||
</span>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
135
resources/js/views/dashboards/analytics/AnalyticsPerformance.vue
Normal file
135
resources/js/views/dashboards/analytics/AnalyticsPerformance.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
colors: [
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.info,
|
||||
],
|
||||
plotOptions: {
|
||||
radar: {
|
||||
size: 110,
|
||||
polygons: {
|
||||
strokeColors: borderColor,
|
||||
connectorColors: borderColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
labels: { colors: secondaryTextColor },
|
||||
fontSize: '15px',
|
||||
markers: {
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: [
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.info,
|
||||
],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.9,
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
],
|
||||
markers: { size: 0 },
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: [
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: { show: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [
|
||||
70,
|
||||
90,
|
||||
90,
|
||||
90,
|
||||
80,
|
||||
90,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Net Worth',
|
||||
data: [
|
||||
120,
|
||||
80,
|
||||
100,
|
||||
80,
|
||||
100,
|
||||
80,
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Performance</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="radar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="295"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
const salesByCountries = [
|
||||
{
|
||||
abbr: 'US',
|
||||
amount: '$8,656k',
|
||||
country: 'United states of america',
|
||||
change: '+25.8%',
|
||||
sales: '894k',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
abbr: 'UK',
|
||||
amount: '$2,415k',
|
||||
country: 'United kingdom',
|
||||
change: '-6.2%',
|
||||
sales: '645k',
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
abbr: 'IN',
|
||||
amount: '$865k',
|
||||
country: 'India',
|
||||
change: '+12.4%',
|
||||
sales: '148k',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
abbr: 'JA',
|
||||
amount: '$745k',
|
||||
country: 'Japan',
|
||||
change: '-11.9%',
|
||||
sales: '86k',
|
||||
color: 'secondary',
|
||||
},
|
||||
{
|
||||
abbr: 'KO',
|
||||
amount: '$45k',
|
||||
country: 'Korea',
|
||||
change: '+16.2%',
|
||||
sales: '42k',
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
abbr: 'CH',
|
||||
amount: '$12k',
|
||||
country: 'China',
|
||||
change: '+14.8%',
|
||||
sales: '8k',
|
||||
color: 'info',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Sales by Countries</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="data in salesByCountries"
|
||||
:key="data.country"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:color="data.color"
|
||||
variant="tonal"
|
||||
size="40"
|
||||
>
|
||||
{{ data.abbr }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="mb-1 d-flex align-center">
|
||||
<h6 class="text-h6">
|
||||
{{ data.amount }}
|
||||
</h6>
|
||||
<VIcon
|
||||
size="24"
|
||||
:color="data.change.charAt(0) === '+' ? 'success' : 'error'"
|
||||
class="mx-1"
|
||||
>
|
||||
{{ data.change.charAt(0) === '+' ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line' }}
|
||||
</VIcon>
|
||||
<div
|
||||
:class="`${data.change.charAt(0) === '+' ? 'text-success' : 'text-error'}`"
|
||||
class="text-body-1"
|
||||
>
|
||||
{{ data.change.slice(1) }}
|
||||
</div>
|
||||
</VListItemTitle>
|
||||
|
||||
<VListItemSubtitle class="text-body-1 me-2">
|
||||
{{ data.country }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div>
|
||||
<h6 class="text-h6 mb-1">
|
||||
{{ data.sales }}
|
||||
</h6>
|
||||
<div class="text-body-2 text-disabled text-end">
|
||||
Sales
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const series = [{
|
||||
name: '2020',
|
||||
data: [
|
||||
35,
|
||||
85,
|
||||
55,
|
||||
50,
|
||||
70,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const backgroundColor = currentTheme.value['track-bg']
|
||||
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
width: 200,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
left: -7,
|
||||
right: 0,
|
||||
bottom: -5,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
currentTheme.value.error,
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.error,
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.primary,
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '20%',
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
colors: {
|
||||
backgroundBarColors: [
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
],
|
||||
backgroundBarRadius: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1628,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '20%',
|
||||
borderRadius: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 725,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
2,856
|
||||
</h4>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="80"
|
||||
class="my-1"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Sessions
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,105 @@
|
||||
<script setup>
|
||||
import aviato from '@images/logos/aviato.png'
|
||||
import bitbank from '@images/logos/bitbank.png'
|
||||
import zipcar from '@images/logos/zipcar.png'
|
||||
|
||||
const earnings = [
|
||||
{
|
||||
avatar: zipcar,
|
||||
title: 'Zipcar',
|
||||
subtitle: 'Vuejs, React & HTML',
|
||||
amount: '$24,895.65',
|
||||
progress: 'primary',
|
||||
},
|
||||
{
|
||||
avatar: bitbank,
|
||||
title: 'Bitbank',
|
||||
subtitle: 'Sketch, Figma & XD',
|
||||
amount: '$8,6500.20',
|
||||
progress: 'info',
|
||||
},
|
||||
{
|
||||
avatar: aviato,
|
||||
title: 'Aviato',
|
||||
subtitle: 'HTML & Anguler',
|
||||
amount: '$1,2450.80',
|
||||
progress: 'secondary',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Earning</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center">
|
||||
<h3 class="text-h3">
|
||||
$24,895
|
||||
</h3>
|
||||
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-arrow-up-s-line"
|
||||
color="success"
|
||||
/>
|
||||
<div class="text-success">
|
||||
10%
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-body-1 mb-12">
|
||||
Compared to $84,325 last year
|
||||
</div>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="earning in earnings"
|
||||
:key="earning.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
:image="earning.avatar"
|
||||
variant="tonal"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ earning.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1">
|
||||
{{ earning.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div>
|
||||
<h6 class="text-h6 mb-2">
|
||||
{{ earning.amount }}
|
||||
</h6>
|
||||
<VProgressLinear
|
||||
:color="earning.progress"
|
||||
model-value="80"
|
||||
rounded-bar
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
0,
|
||||
20,
|
||||
5,
|
||||
30,
|
||||
15,
|
||||
45,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
grid: {
|
||||
borderColor: `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`,
|
||||
strokeDashArray: 6,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
top: -10,
|
||||
left: -7,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
lineCap: 'butt',
|
||||
curve: 'straight',
|
||||
},
|
||||
colors: [currentTheme.primary],
|
||||
markers: {
|
||||
size: 6,
|
||||
offsetY: 4,
|
||||
offsetX: -2,
|
||||
strokeWidth: 3,
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [{
|
||||
size: 5.5,
|
||||
seriesIndex: 0,
|
||||
strokeColor: currentTheme.primary,
|
||||
fillColor: currentTheme.surface,
|
||||
dataPointIndex: series[0].data.length - 1,
|
||||
}],
|
||||
hover: { size: 7 },
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
$86.4k
|
||||
</h4>
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="80"
|
||||
class="my-1"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Total Profit
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup>
|
||||
const statistics = [
|
||||
{
|
||||
title: 'Sales',
|
||||
stats: '245k',
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Customers',
|
||||
stats: '12.5k',
|
||||
icon: 'ri-group-line',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Product',
|
||||
stats: '1.54k',
|
||||
icon: 'ri-macbook-line',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: 'Revenue',
|
||||
stats: '$88k',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
color: 'info',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Transactions">
|
||||
<template #subtitle>
|
||||
<p class="text-body-1 mb-0">
|
||||
<span class="d-inline-block font-weight-medium text-high-emphasis">Total 48.5% Growth</span> <span class="text-high-emphasis">😎</span> this month
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<IconBtn class="mt-n5">
|
||||
<VIcon
|
||||
color="high-emphasis"
|
||||
icon="ri-more-2-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
</template>
|
||||
|
||||
<VCardText class="pt-10">
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in statistics"
|
||||
:key="item.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VAvatar
|
||||
:color="item.color"
|
||||
rounded
|
||||
size="40"
|
||||
class="elevation-2"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-body-1">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ item.stats }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
250
resources/js/views/dashboards/analytics/AnalyticsUserTable.vue
Normal file
250
resources/js/views/dashboards/analytics/AnalyticsUserTable.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const headers = [
|
||||
{
|
||||
title: 'User',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
title: 'Role',
|
||||
key: 'role',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'status',
|
||||
},
|
||||
]
|
||||
|
||||
const userData = [
|
||||
{
|
||||
id: 1,
|
||||
fullName: 'Galasasen Slixby',
|
||||
company: 'Yotz PVT LTD',
|
||||
role: 'editor',
|
||||
username: 'gslixby0',
|
||||
country: 'El Salvador',
|
||||
contact: '(479) 232-9151',
|
||||
email: 'gslixby0@abc.net.au',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'inactive',
|
||||
avatar: avatar1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
fullName: 'Halsey Redmore',
|
||||
company: 'Skinder PVT LTD',
|
||||
role: 'author',
|
||||
username: 'hredmore1',
|
||||
country: 'Albania',
|
||||
contact: '(472) 607-9137',
|
||||
email: 'hredmore1@imgur.com',
|
||||
currentPlan: 'team',
|
||||
status: 'pending',
|
||||
avatar: avatar2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
fullName: 'Marjory Sicely',
|
||||
company: 'Oozz PVT LTD',
|
||||
role: 'maintainer',
|
||||
username: 'msicely2',
|
||||
country: 'Russia',
|
||||
contact: '(321) 264-4599',
|
||||
email: 'msicely2@who.int',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'active',
|
||||
avatar: avatar3,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
fullName: 'Cyrill Risby',
|
||||
company: 'Oozz PVT LTD',
|
||||
role: 'Admin',
|
||||
username: 'crisby3',
|
||||
country: 'China',
|
||||
contact: '(923) 690-6806',
|
||||
email: 'crisby3@wordpress.com',
|
||||
currentPlan: 'team',
|
||||
status: 'inactive',
|
||||
avatar: avatar4,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
fullName: 'Maggy Hurran',
|
||||
company: 'Aimbo PVT LTD',
|
||||
role: 'subscriber',
|
||||
username: 'mhurran4',
|
||||
country: 'Pakistan',
|
||||
contact: '(669) 914-1078',
|
||||
email: 'mhurran4@yahoo.co.jp',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'pending',
|
||||
avatar: avatar5,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
fullName: 'Silvain Halstead',
|
||||
company: 'Jaxbean PVT LTD',
|
||||
role: 'author',
|
||||
username: 'shalstead5',
|
||||
country: 'China',
|
||||
contact: '(958) 973-3093',
|
||||
email: 'shalstead5@shinystat.com',
|
||||
currentPlan: 'company',
|
||||
status: 'active',
|
||||
avatar: avatar6,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
fullName: 'Breena Gallemore',
|
||||
company: 'Jazzy PVT LTD',
|
||||
role: 'subscriber',
|
||||
username: 'bgallemore6',
|
||||
country: 'Canada',
|
||||
contact: '(825) 977-8152',
|
||||
email: 'bgallemore6@boston.com',
|
||||
currentPlan: 'company',
|
||||
status: 'pending',
|
||||
avatar: avatar7,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
fullName: 'Kathryne Liger',
|
||||
company: 'Pixoboo PVT LTD',
|
||||
role: 'author',
|
||||
username: 'kliger7',
|
||||
country: 'France',
|
||||
contact: '(187) 440-0934',
|
||||
email: 'kliger7@vinaora.com',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'pending',
|
||||
avatar: avatar8,
|
||||
},
|
||||
]
|
||||
|
||||
const resolveUserRoleVariant = role => {
|
||||
const roleLowerCase = role.toLowerCase()
|
||||
if (roleLowerCase === 'subscriber')
|
||||
return {
|
||||
color: 'success',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
if (roleLowerCase === 'author')
|
||||
return {
|
||||
color: 'error',
|
||||
icon: 'ri-computer-line',
|
||||
}
|
||||
if (roleLowerCase === 'maintainer')
|
||||
return {
|
||||
color: 'info',
|
||||
icon: 'ri-pie-chart-line',
|
||||
}
|
||||
if (roleLowerCase === 'editor')
|
||||
return {
|
||||
color: 'warning',
|
||||
icon: 'ri-edit-box-line',
|
||||
}
|
||||
if (roleLowerCase === 'admin')
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'ri-vip-crown-line',
|
||||
}
|
||||
|
||||
return {
|
||||
color: 'success',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
}
|
||||
|
||||
const resolveUserStatusVariant = stat => {
|
||||
const statLowerCase = stat.toLowerCase()
|
||||
if (statLowerCase === 'pending')
|
||||
return 'warning'
|
||||
if (statLowerCase === 'active')
|
||||
return 'success'
|
||||
if (statLowerCase === 'inactive')
|
||||
return 'secondary'
|
||||
|
||||
return 'primary'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="userData"
|
||||
item-value="id"
|
||||
class="text-no-wrap"
|
||||
>
|
||||
<!-- User -->
|
||||
<template #item.username="{ item }">
|
||||
<div class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:variant="!item.avatar ? 'tonal' : undefined"
|
||||
:color="!item.avatar ? resolveUserRoleVariant(item.role).color : undefined"
|
||||
>
|
||||
<VImg
|
||||
v-if="item.avatar"
|
||||
:src="item.avatar"
|
||||
/>
|
||||
<span v-else>{{ avatarText(item.fullName) }}</span>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<RouterLink
|
||||
:to="{ name: 'apps-user-view-id', params: { id: item.id } }"
|
||||
class="text-h6 font-weight-medium user-list-name"
|
||||
>
|
||||
{{ item.fullName }}
|
||||
</RouterLink>
|
||||
|
||||
<span class="text-sm text-medium-emphasis">@{{ item.username }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Role -->
|
||||
<template #item.role="{ item }">
|
||||
<div class="d-flex gap-4">
|
||||
<VIcon
|
||||
:icon="resolveUserRoleVariant(item.role).icon"
|
||||
:color="resolveUserRoleVariant(item.role).color"
|
||||
size="22"
|
||||
/>
|
||||
<div class="text-capitalize text-high-emphasis">
|
||||
{{ item.role }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Plan -->
|
||||
<template #item.plan="{ item }">
|
||||
<span class="text-capitalize text-high-emphasis">{{ item.currentPlan }}</span>
|
||||
</template>
|
||||
<!-- Status -->
|
||||
<template #item.status="{ item }">
|
||||
<VChip
|
||||
:color="resolveUserStatusVariant(item.status)"
|
||||
size="small"
|
||||
class="text-capitalize"
|
||||
>
|
||||
{{ item.status }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetY: -10,
|
||||
offsetX: -15,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
distributed: true,
|
||||
columnWidth: '30%',
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 7,
|
||||
xaxis: { lines: { show: false } },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Sun',
|
||||
'Mon',
|
||||
'Tue',
|
||||
'Wed',
|
||||
'Thu',
|
||||
'Fri',
|
||||
'Sat',
|
||||
],
|
||||
tickPlacement: 'on',
|
||||
labels: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
tickAmount: 4,
|
||||
labels: {
|
||||
style: {
|
||||
colors: disabledColor,
|
||||
fontSize: '13px',
|
||||
},
|
||||
formatter: value => `${ value > 999 ? `${ (value / 1000).toFixed(0) }` : value }k`,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: { plotOptions: { bar: { columnWidth: '35%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1380,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
37,
|
||||
57,
|
||||
45,
|
||||
75,
|
||||
57,
|
||||
40,
|
||||
65,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Weekly Overview</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="200"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center mb-5 gap-x-4">
|
||||
<h4 class="text-h4">
|
||||
45%
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Your sales performance is 45% <span class="text-high-emphasis">😎</span> better compared to last month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VBtn block>
|
||||
Details
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
103
resources/js/views/dashboards/crm/CrmActivityTimeline.vue
Normal file
103
resources/js/views/dashboards/crm/CrmActivityTimeline.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import pdf from '@images/icons/project-icons/pdf.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Activity Timeline">
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
side="end"
|
||||
align="start"
|
||||
line-inset="8"
|
||||
truncate-line="start"
|
||||
density="compact"
|
||||
>
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
12 Invoices have been paid
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
12 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Invoices have been paid to the company.
|
||||
</p>
|
||||
|
||||
<div class="d-inline-flex align-center timeline-chip mb-2">
|
||||
<img
|
||||
:src="pdf"
|
||||
height="20"
|
||||
class="me-3"
|
||||
alt="img"
|
||||
>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
invoice.pdf
|
||||
</h6>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="success"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Client Meeting
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
45 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Project meeting with john @10:15am
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center mb-2">
|
||||
<VAvatar
|
||||
size="32"
|
||||
:image="avatar1"
|
||||
class="me-3"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="text-body-2 font-weight-medium">
|
||||
Lester McCarthy (Client)
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
CEO of ThemeSelection
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="info"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Create a new project for client
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
2 Day Ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-0 app-timeline-text">
|
||||
6 team members in a project
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
137
resources/js/views/dashboards/crm/CrmDeveloperMeetup.vue
Normal file
137
resources/js/views/dashboards/crm/CrmDeveloperMeetup.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import cardMeetup from '@images/cards/meetup-img.png'
|
||||
|
||||
const developerMeetup = [
|
||||
{
|
||||
icon: 'ri-time-line',
|
||||
title: 'Tuesday, 24 january, 10:20 - 12:30',
|
||||
subtitle: 'After 1 week',
|
||||
},
|
||||
{
|
||||
icon: 'ri-map-pin-line',
|
||||
title: 'The Richard NYC',
|
||||
subtitle: '1305 Lexington Ave, New York',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VImg
|
||||
cover
|
||||
:height="160"
|
||||
:src="cardMeetup"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center pb-4">
|
||||
<div class="me-4">
|
||||
<VAvatar
|
||||
rounded
|
||||
size="58"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<div class="py-2">
|
||||
<div class="text-body-1 text-primary">
|
||||
Jan
|
||||
</div>
|
||||
<h5 class="text-h5 text-primary">
|
||||
24
|
||||
</h5>
|
||||
</div>
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Developer Meetup
|
||||
</h6>
|
||||
<div class="text-body-2">
|
||||
The WordPress open source,free software project is the community behind the…
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<div class="d-flex justify-space-between align-center my-4">
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-star-smile-line"
|
||||
class="mb-1"
|
||||
/>
|
||||
<div class="text-body-1">
|
||||
Interested
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-check-double-line"
|
||||
class="mb-1"
|
||||
/>
|
||||
<div class="text-body-1">
|
||||
Joined
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-group-line"
|
||||
color="primary"
|
||||
class="mb-1"
|
||||
/>
|
||||
<div class="text-body-1 text-primary">
|
||||
Invited
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="mb-1">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-more-line"
|
||||
class="mb-1"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs text-no-wrap">
|
||||
More
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider class="mb-4" />
|
||||
|
||||
<div
|
||||
v-for="(meetup, index) in developerMeetup"
|
||||
:key="meetup.icon"
|
||||
class="d-flex align-start gap-x-2"
|
||||
:class="index !== developerMeetup.length - 1 ? 'mb-2' : ''"
|
||||
>
|
||||
<VIcon
|
||||
:icon="meetup.icon"
|
||||
size="20"
|
||||
/>
|
||||
<div>
|
||||
<div>{{ meetup.title }}</div>
|
||||
<div>{{ meetup.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.text-two-line-ellipsis {
|
||||
/* stylelint-disable-next-line value-no-vendor-prefix */
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
128
resources/js/views/dashboards/crm/CrmMeetingSchedule.vue
Normal file
128
resources/js/views/dashboards/crm/CrmMeetingSchedule.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const meetingSchedules = [
|
||||
{
|
||||
profile: avatar4,
|
||||
with: 'Call with Woods',
|
||||
dateTime: '21 Jul | 08:20-10:30',
|
||||
type: 'Business',
|
||||
},
|
||||
{
|
||||
profile: avatar8,
|
||||
with: 'Call with hilda',
|
||||
dateTime: '24 Jul | 11:30-12:00',
|
||||
type: 'Meditation',
|
||||
},
|
||||
{
|
||||
profile: avatar7,
|
||||
with: 'Conference call',
|
||||
dateTime: '28 Jul | 05:00-6:45',
|
||||
type: 'Dinner',
|
||||
},
|
||||
{
|
||||
profile: avatar3,
|
||||
with: 'Meeting with Mark',
|
||||
dateTime: '03 Aug | 07:00-8:30',
|
||||
type: 'Meetup',
|
||||
},
|
||||
{
|
||||
profile: avatar2,
|
||||
with: 'Meeting in Oakland',
|
||||
dateTime: '14 Aug | 04:15-05:30',
|
||||
type: 'Dinner',
|
||||
},
|
||||
{
|
||||
profile: avatar1,
|
||||
with: 'Meeting with Carl',
|
||||
dateTime: '05 Oct | 10:00-12:45',
|
||||
type: 'Business',
|
||||
},
|
||||
]
|
||||
|
||||
const meetingTypeUiColors = {
|
||||
Business: 'primary',
|
||||
Meditation: 'success',
|
||||
Meetup: 'secondary',
|
||||
Dinner: 'error',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<!-- SECTION Card Header and Menu -->
|
||||
<VCardItem>
|
||||
<!-- 👉 Title -->
|
||||
<VCardTitle>Meeting Schedule</VCardTitle>
|
||||
|
||||
<!-- 👉 menu -->
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Meting Schedule -->
|
||||
<VCardText>
|
||||
<VList
|
||||
lines="two"
|
||||
class="card-list"
|
||||
>
|
||||
<VListItem
|
||||
v-for="meeting in meetingSchedules"
|
||||
:key="meeting.type"
|
||||
>
|
||||
<!-- 👉 Avatar -->
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
:size="38"
|
||||
:image="meeting.profile"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Title and Subtitle -->
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ meeting.with }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="me-2">
|
||||
<VIcon
|
||||
size="16"
|
||||
start
|
||||
icon="ri-calendar-line"
|
||||
/>
|
||||
{{ meeting.dateTime }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<!-- 👉 Business Types -->
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<VChip
|
||||
size="small"
|
||||
:color="meetingTypeUiColors[meeting.type]"
|
||||
>
|
||||
{{ meeting.type }}
|
||||
</VChip>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
214
resources/js/views/dashboards/crm/CrmRevenueReport.vue
Normal file
214
resources/js/views/dashboards/crm/CrmRevenueReport.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
yaxis: { lines: { show: false } },
|
||||
xaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
offsetY: 5,
|
||||
fontSize: '15px',
|
||||
markers: {
|
||||
radius: 15,
|
||||
width: 10,
|
||||
height: 10,
|
||||
},
|
||||
labels: { colors: secondaryTextColor },
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.secondary,
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: '40%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
crosshairs: { opacity: 0 },
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1380,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '60%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1080,
|
||||
options: { plotOptions: { bar: { borderRadius: 4 } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '20%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 460,
|
||||
options: { plotOptions: { bar: { columnWidth: '30%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 400,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [
|
||||
95,
|
||||
177,
|
||||
284,
|
||||
256,
|
||||
105,
|
||||
63,
|
||||
168,
|
||||
218,
|
||||
72,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [
|
||||
-145,
|
||||
-80,
|
||||
-60,
|
||||
-180,
|
||||
-100,
|
||||
-60,
|
||||
-85,
|
||||
-75,
|
||||
-100,
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Revenue Report</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="220"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.apexcharts-legend-marker{
|
||||
margin-inline-end: 0.5rem !important;
|
||||
}
|
||||
</style>
|
||||
170
resources/js/views/dashboards/crm/CrmSalesOverview.vue
Normal file
170
resources/js/views/dashboards/crm/CrmSalesOverview.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-primary), 0.7)',
|
||||
'rgba(var(--v-theme-primary), 0.5)',
|
||||
currentTheme.value['track-bg'],
|
||||
],
|
||||
stroke: { width: 0 },
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
labels: [
|
||||
'Apparel',
|
||||
'Electronics',
|
||||
'FMCG',
|
||||
'Other Sales',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
customScale: 0.9,
|
||||
donut: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 25,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '24px',
|
||||
color: primaryTextColor,
|
||||
formatter: value => `${ value }k`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Weekly Visits',
|
||||
fontSize: '15px',
|
||||
color: secondaryTextColor,
|
||||
formatter: value => `${ value.globals.seriesTotals.reduce((total, num) => total + num) }k`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
12,
|
||||
25,
|
||||
15,
|
||||
50,
|
||||
]
|
||||
|
||||
const salesOverviews = [
|
||||
{
|
||||
product: 'Apparel',
|
||||
sales: '$1,840',
|
||||
},
|
||||
{
|
||||
product: 'Electronic',
|
||||
sales: '$11,420',
|
||||
},
|
||||
{
|
||||
product: 'FMCG',
|
||||
sales: '$1,840',
|
||||
},
|
||||
{
|
||||
product: 'Other Sales',
|
||||
sales: '$11,420',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Sales Overview</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-5">
|
||||
<div class="d-flex gap-6 flex-md-row flex-column">
|
||||
<div class="mx-auto">
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="220"
|
||||
:width="220"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex align-center">
|
||||
<div class="me-3">
|
||||
<VAvatar
|
||||
rounded
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon icon="ri-wallet-line" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0">
|
||||
Number of Sales
|
||||
</p>
|
||||
<h5 class="text-h5">
|
||||
$86,400
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<VDivider class="my-6" />
|
||||
|
||||
<div>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="sale in salesOverviews"
|
||||
:key="sale.product"
|
||||
cols="6"
|
||||
>
|
||||
<div class="d-flex align-center mb-1">
|
||||
<VIcon
|
||||
icon="ri-circle-fill"
|
||||
color="primary"
|
||||
size="10"
|
||||
class="me-2"
|
||||
/>
|
||||
<div
|
||||
class="text-truncate"
|
||||
style="max-inline-size: 85px;"
|
||||
>
|
||||
{{ sale.product }}
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
{{ sale.sales }}
|
||||
</h6>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
89
resources/js/views/dashboards/crm/CrmTotalGrowthCharts.vue
Normal file
89
resources/js/views/dashboards/crm/CrmTotalGrowthCharts.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
const series = [{
|
||||
name: 'Subscribers',
|
||||
data: [
|
||||
28,
|
||||
40,
|
||||
36,
|
||||
52,
|
||||
38,
|
||||
60,
|
||||
55,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
grid: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5,
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.1,
|
||||
stops: [
|
||||
0,
|
||||
80,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
lines: { show: false },
|
||||
axisBorder: { show: false },
|
||||
labels: { show: false },
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
}],
|
||||
tooltip: { enabled: false },
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
color: currentTheme.success,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 0.65,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
42.5k
|
||||
</h4>
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="110"
|
||||
/>
|
||||
<h6 class="text-h6 text-center">
|
||||
Total Growth
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
101
resources/js/views/dashboards/crm/CrmTotalSales.vue
Normal file
101
resources/js/views/dashboards/crm/CrmTotalSales.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.2,
|
||||
opacityFrom: 1,
|
||||
shadeIntensity: 0,
|
||||
type: 'horizontal',
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
legend: { show: false },
|
||||
colors: [currentTheme.value.success],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: -10,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
],
|
||||
labels: { style: { colors: secondaryTextColor } },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
name: 'Total Sales',
|
||||
data: [
|
||||
0,
|
||||
258,
|
||||
30,
|
||||
240,
|
||||
150,
|
||||
400,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle class="mb-1">
|
||||
Total Sales
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>$21,845</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="206"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
65
resources/js/views/dashboards/crm/CrmTransactions.vue
Normal file
65
resources/js/views/dashboards/crm/CrmTransactions.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
const statistics = [
|
||||
{
|
||||
title: 'Sales',
|
||||
stats: '245k',
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Customers',
|
||||
stats: '12.5k',
|
||||
icon: 'ri-group-line',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Product',
|
||||
stats: '1.54k',
|
||||
icon: 'ri-macbook-line',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Transactions">
|
||||
<template #subtitle>
|
||||
<p class="text-body-2 mb-0">
|
||||
<span class="d-inline-block font-weight-medium text-high-emphasis">Total 48.5% Growth</span> <span class="text-high-emphasis">😎</span> this month
|
||||
</p>
|
||||
</template>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in statistics"
|
||||
:key="item.title"
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
:color="item.color"
|
||||
rounded
|
||||
size="40"
|
||||
class="elevation-1 me-3"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-body-1">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ item.stats }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
157
resources/js/views/dashboards/crm/CrmUpgradeYourPlan.vue
Normal file
157
resources/js/views/dashboards/crm/CrmUpgradeYourPlan.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<script setup>
|
||||
import briefcase from '@images/cards/briefcase.png'
|
||||
import logoCreditCard2 from '@images/cards/logo-credit-card-2.png'
|
||||
import logoMastercardSmall from '@images/cards/logo-mastercard-small.png'
|
||||
|
||||
const savedCards = [
|
||||
{
|
||||
logo: logoMastercardSmall,
|
||||
type: 'Credit card',
|
||||
number: '2566 xxxx xxxx 8908',
|
||||
},
|
||||
{
|
||||
logo: logoCreditCard2,
|
||||
type: 'Credit card',
|
||||
number: '8990 xxxx xxxx 6852',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<!-- SECTION Card Header and Menu -->
|
||||
<VCardItem>
|
||||
<!-- 👉 Title -->
|
||||
<VCardTitle>Upgrade Your Plan</VCardTitle>
|
||||
|
||||
<!-- 👉 menu -->
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<VCardText>
|
||||
<p class="text-body-2">
|
||||
Please make the payment to start enjoying all the features of our premium plan as soon as possible.
|
||||
</p>
|
||||
|
||||
<!-- SECTION Upgrade plan banner -->
|
||||
<div class="plan-upgrade-banner pa-4 d-flex rounded align-center">
|
||||
<VAvatar
|
||||
rounded
|
||||
size="40"
|
||||
class="plan-details border-opacity-100 border-primary me-4"
|
||||
>
|
||||
<VImg
|
||||
:src="briefcase"
|
||||
alt="briefcase"
|
||||
height="20"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column me-3">
|
||||
<h6 class="text-h6">
|
||||
Platinum
|
||||
</h6>
|
||||
<span class="text-primary text-body-2">Upgrade Plan</span>
|
||||
</div>
|
||||
<VSpacer />
|
||||
<div class="d-flex align-center">
|
||||
<sup>
|
||||
<div class="text-body-2 text-high-emphasis">$</div>
|
||||
</sup>
|
||||
<h4 class="text-h4">
|
||||
5,250
|
||||
</h4>
|
||||
<sub>
|
||||
<div class="text-body-2 text-high-emphasis">/Year</div>
|
||||
</sub>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Payment Details -->
|
||||
<VList class="card-list mt-1">
|
||||
<h6 class="text-h6 my-2">
|
||||
Payment details
|
||||
</h6>
|
||||
|
||||
<VListItem
|
||||
v-for="card in savedCards"
|
||||
:key="card.logo"
|
||||
class="mb-2"
|
||||
>
|
||||
<!-- 👉 Avatar -->
|
||||
<template #prepend>
|
||||
<img
|
||||
:src="card.logo"
|
||||
height="30"
|
||||
width="42"
|
||||
class="me-3"
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Title and Subtitle -->
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ card.type }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="me-2">
|
||||
{{ card.number }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<!-- 👉 Action -->
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<VTextField
|
||||
density="compact"
|
||||
label="CVV"
|
||||
placeholder="123"
|
||||
style="inline-size: 5rem;"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<!-- 👉 Add Payment -->
|
||||
<VListItem class="mb-3 text-body-1">
|
||||
<a href="javascript:void(0)">Add Payment Method</a>
|
||||
</VListItem>
|
||||
</VList>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
placeholder="Email Address"
|
||||
density="compact"
|
||||
class="mb-3"
|
||||
/>
|
||||
<VBtn block>
|
||||
Contact Now
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plan-upgrade-banner {
|
||||
.plan-details {
|
||||
border: 1px solid rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
background-color: rgba(var(--v-theme-primary), 0.16);
|
||||
}
|
||||
|
||||
.card-list {
|
||||
--v-card-list-gap: 0;
|
||||
}
|
||||
</style>
|
||||
156
resources/js/views/dashboards/crm/CrmWeeklySales.vue
Normal file
156
resources/js/views/dashboards/crm/CrmWeeklySales.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
columnWidth: '60%',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'S',
|
||||
'M',
|
||||
'T',
|
||||
'W',
|
||||
'T',
|
||||
'F',
|
||||
'S',
|
||||
],
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
tickPlacement: 'on',
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: secondaryColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -15,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
40,
|
||||
60,
|
||||
50,
|
||||
60,
|
||||
90,
|
||||
40,
|
||||
50,
|
||||
],
|
||||
}]
|
||||
|
||||
const weeklySalesData = [
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'primary',
|
||||
},
|
||||
title: '34.6k',
|
||||
subtitle: 'Sales',
|
||||
},
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
color: 'success',
|
||||
},
|
||||
title: '$482k',
|
||||
subtitle: 'Total Profit',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Weekly Sales</VCardTitle>
|
||||
<VCardSubtitle>Total 85.4k Sales</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="203"
|
||||
class="py-5"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-space-around">
|
||||
<div
|
||||
v-for="data in weeklySalesData"
|
||||
:key="data.title"
|
||||
class="d-flex align-center me-3"
|
||||
>
|
||||
<div>
|
||||
<VAvatar
|
||||
rounded
|
||||
:color="data.avatar.color"
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
>
|
||||
<VIcon :icon="data.avatar.icon" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
{{ data.title }}
|
||||
</h6>
|
||||
<div class="text-base text-no-wrap">
|
||||
{{ data.subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
import illustrationJohn2 from '@images/cards/illustration-john-2.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="overflow-visible mt-sm-10 mt-md-0">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
order="2"
|
||||
order-sm="1"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
<h4 class="text-h4 text-wrap">
|
||||
Congratulations <strong>John!</strong> <span class="text-high-emphasis">🎉</span>
|
||||
</h4>
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-sm-4">
|
||||
<div class="mb-0 text-body-1 me-2">
|
||||
You have done 72% <span class="text-high-emphasis">😎</span> more sales today.
|
||||
Check your new raising badge in your profile.
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
order="1"
|
||||
order-sm="2"
|
||||
class="text-center"
|
||||
>
|
||||
<img
|
||||
:src="illustrationJohn2"
|
||||
:height="$vuetify.display.xs ? '165' : '200'"
|
||||
:class="$vuetify.display.xs ? 'position-relative' : 'position-absolute'"
|
||||
class="john-illustration flip-in-rtl mt-6 mt-sm-0"
|
||||
>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.john-illustration {
|
||||
inset-block-end: -0.0625rem;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,337 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const now = new Date()
|
||||
const currentMonth = now.toLocaleString('default', { month: '2-digit' })
|
||||
|
||||
// 👉 Invoice balance variant resolver
|
||||
const resolveInvoiceBalanceVariant = (balance, total) => {
|
||||
if (balance === total)
|
||||
return {
|
||||
status: 'Unpaid',
|
||||
chip: { color: 'error' },
|
||||
}
|
||||
if (balance === 0)
|
||||
return {
|
||||
status: 'Paid',
|
||||
chip: { color: 'success' },
|
||||
}
|
||||
|
||||
return {
|
||||
status: balance,
|
||||
chip: { variant: 'text' },
|
||||
}
|
||||
}
|
||||
|
||||
const resolveInvoiceStatusVariantAndIcon = status => {
|
||||
if (status === 'Partial Payment')
|
||||
return {
|
||||
variant: 'warning',
|
||||
icon: 'ri-line-chart-line',
|
||||
}
|
||||
if (status === 'Paid')
|
||||
return {
|
||||
variant: 'success',
|
||||
icon: 'ri-check-line',
|
||||
}
|
||||
if (status === 'Downloaded')
|
||||
return {
|
||||
variant: 'info',
|
||||
icon: 'ri-arrow-down-line',
|
||||
}
|
||||
if (status === 'Draft')
|
||||
return {
|
||||
variant: 'secondary',
|
||||
icon: 'ri-save-line',
|
||||
}
|
||||
if (status === 'Sent')
|
||||
return {
|
||||
variant: 'primary',
|
||||
icon: 'ri-mail-line',
|
||||
}
|
||||
if (status === 'Past Due')
|
||||
return {
|
||||
variant: 'error',
|
||||
icon: 'ri-error-warning-line',
|
||||
}
|
||||
|
||||
return {
|
||||
variant: 'secondary',
|
||||
icon: 'ri-close-line',
|
||||
}
|
||||
}
|
||||
|
||||
const invoices = [
|
||||
{
|
||||
id: 5024,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-28`,
|
||||
client: {
|
||||
address: '276 Michael Gardens Apt. 004',
|
||||
company: 'Shea, Velez and Garcia LLC',
|
||||
companyEmail: 'zjohnson@nichols-powers.com',
|
||||
country: 'Philippines',
|
||||
contact: '(817) 700-2984',
|
||||
name: 'Christopher Allen',
|
||||
},
|
||||
service: 'Software Development',
|
||||
total: 2787,
|
||||
avatar: avatar1,
|
||||
invoiceStatus: 'Partial Payment',
|
||||
balance: 0,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-25`,
|
||||
},
|
||||
{
|
||||
id: 5025,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-21`,
|
||||
client: {
|
||||
address: '633 Bell Well Apt. 057',
|
||||
company: 'Adams, Simmons and Brown Group',
|
||||
companyEmail: 'kayla09@thomas.com',
|
||||
country: 'Martinique',
|
||||
contact: '(266) 611-9482',
|
||||
name: 'Joseph Oliver',
|
||||
},
|
||||
service: 'UI/UX Design & Development',
|
||||
total: 5591,
|
||||
avatar: avatar2,
|
||||
invoiceStatus: 'Downloaded',
|
||||
balance: 0,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-07`,
|
||||
},
|
||||
{
|
||||
id: 5026,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-24`,
|
||||
client: {
|
||||
address: '1068 Lopez Fall',
|
||||
company: 'Williams-Lawrence and Sons',
|
||||
companyEmail: 'melvindavis@allen.info',
|
||||
country: 'Mexico',
|
||||
contact: '(739) 745-9728',
|
||||
name: 'Megan Roberts',
|
||||
},
|
||||
service: 'Template Customization',
|
||||
total: 2783,
|
||||
avatar: avatar3,
|
||||
invoiceStatus: 'Draft',
|
||||
balance: 0,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-22`,
|
||||
},
|
||||
{
|
||||
id: 5027,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-13`,
|
||||
client: {
|
||||
address: '86691 Mackenzie Light Suite 568',
|
||||
company: 'Deleon Inc LLC',
|
||||
companyEmail: 'gjordan@fernandez-coleman.com',
|
||||
country: 'Costa Rica',
|
||||
contact: '(682) 804-6506',
|
||||
name: 'Mary Garcia',
|
||||
},
|
||||
service: 'Template Customization',
|
||||
total: 2719,
|
||||
avatar: avatar4,
|
||||
invoiceStatus: 'Sent',
|
||||
balance: 0,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-04`,
|
||||
},
|
||||
{
|
||||
id: 5028,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-18`,
|
||||
client: {
|
||||
address: '86580 Sarah Bridge',
|
||||
company: 'Farmer, Johnson and Anderson Group',
|
||||
companyEmail: 'robertscott@garcia.com',
|
||||
country: 'Cameroon',
|
||||
contact: '(775) 366-0411',
|
||||
name: 'Crystal Mays',
|
||||
},
|
||||
service: 'Template Customization',
|
||||
total: 3325,
|
||||
avatar: avatar5,
|
||||
invoiceStatus: 'Paid',
|
||||
balance: 361,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-02`,
|
||||
},
|
||||
{
|
||||
id: 5029,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-29`,
|
||||
client: {
|
||||
address: '49709 Edwin Ports Apt. 353',
|
||||
company: 'Sherman-Johnson PLC',
|
||||
companyEmail: 'desiree61@kelly.com',
|
||||
country: 'Macedonia',
|
||||
contact: '(510) 536-6029',
|
||||
name: 'Nicholas Tanner',
|
||||
},
|
||||
service: 'Template Customization',
|
||||
total: 3851,
|
||||
avatar: avatar6,
|
||||
invoiceStatus: 'Paid',
|
||||
balance: 0,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-25`,
|
||||
},
|
||||
{
|
||||
id: 5030,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-07`,
|
||||
client: {
|
||||
address: '3856 Mathis Squares Apt. 584',
|
||||
company: 'Byrd LLC PLC',
|
||||
companyEmail: 'jeffrey25@martinez-hodge.com',
|
||||
country: 'Congo',
|
||||
contact: '(253) 230-4657',
|
||||
name: 'Justin Richardson',
|
||||
},
|
||||
service: 'Template Customization',
|
||||
total: 5565,
|
||||
avatar: avatar7,
|
||||
invoiceStatus: 'Draft',
|
||||
balance: 0,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-06`,
|
||||
},
|
||||
{
|
||||
id: 5031,
|
||||
issuedDate: `${ now.getFullYear() }-${ currentMonth }-21`,
|
||||
client: {
|
||||
address: '141 Adrian Ridge Suite 550',
|
||||
company: 'Stone-Zimmerman Group',
|
||||
companyEmail: 'john77@anderson.net',
|
||||
country: 'Falkland Islands (Malvinas)',
|
||||
contact: '(612) 546-3485',
|
||||
name: 'Jennifer Summers',
|
||||
},
|
||||
service: 'Template Customization',
|
||||
total: 3313,
|
||||
avatar: avatar8,
|
||||
invoiceStatus: 'Partial Payment',
|
||||
balance: 0,
|
||||
dueDate: `${ now.getFullYear() }-${ currentMonth }-09`,
|
||||
},
|
||||
]
|
||||
|
||||
const headers = [
|
||||
{
|
||||
title: '#ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'status',
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
title: 'Client',
|
||||
key: 'client.name',
|
||||
},
|
||||
{
|
||||
title: 'Total',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
title: 'Balance',
|
||||
key: 'balance',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="invoices"
|
||||
class="text-no-wrap"
|
||||
>
|
||||
<!-- id -->
|
||||
<template #item.id="{ item }">
|
||||
<RouterLink :to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }">
|
||||
#{{ item.id }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<!-- trending -->
|
||||
<template #item.status="{ item }">
|
||||
<VTooltip>
|
||||
<template #activator="{ props }">
|
||||
<VAvatar
|
||||
:size="28"
|
||||
v-bind="props"
|
||||
:color="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon
|
||||
:size="16"
|
||||
:icon="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
<p class="mb-0">
|
||||
{{ item.invoiceStatus }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Balance: {{ item.balance }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Due date: {{ item.dueDate }}
|
||||
</p>
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<!-- client -->
|
||||
<template #item.client.name="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:color="!item.avatar.length ? resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant : undefined"
|
||||
:variant="!item.avatar.length ? 'tonal' : undefined"
|
||||
class="me-3"
|
||||
>
|
||||
<VImg
|
||||
v-if="item.avatar.length"
|
||||
:src="item.avatar"
|
||||
/>
|
||||
<span v-else>{{ avatarText(item.client.name) }}</span>
|
||||
</VAvatar>
|
||||
<div class="d-flex flex-column">
|
||||
<RouterLink
|
||||
:to="{ name: 'pages-user-profile-tab', params: { tab: 'profile' } }"
|
||||
class="text-h6 font-weight-medium mb-0"
|
||||
>
|
||||
{{ item.client.name }}
|
||||
</RouterLink>
|
||||
<span class="text-body-2">{{ item.client.companyEmail }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Total -->
|
||||
<template #item.total="{ item }">
|
||||
${{ item.total }}
|
||||
</template>
|
||||
|
||||
<!-- Balance -->
|
||||
<template #item.balance="{ item }">
|
||||
<VChip
|
||||
v-if="typeof ((resolveInvoiceBalanceVariant(item.balance, item.total)).status) === 'string'"
|
||||
:color="resolveInvoiceBalanceVariant(item.balance, item.total).chip.color"
|
||||
size="small"
|
||||
>
|
||||
{{ (resolveInvoiceBalanceVariant(item.balance, item.total)).status }}
|
||||
</VChip>
|
||||
<h6
|
||||
v-else
|
||||
class="text-h6 font-weight-regular"
|
||||
>
|
||||
{{ Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status) > 0 ? `$${(resolveInvoiceBalanceVariant(item.balance, item.total)).status}` : `-$${Math.abs(Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status))}` }}
|
||||
</h6>
|
||||
</template>
|
||||
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const meetingSchedules = [
|
||||
{
|
||||
profile: avatar4,
|
||||
with: 'Call with Woods',
|
||||
dateTime: '21 Jul | 08:20-10:30',
|
||||
type: 'Business',
|
||||
},
|
||||
{
|
||||
profile: avatar8,
|
||||
with: 'Call with hilda',
|
||||
dateTime: '24 Jul | 11:30-12:00',
|
||||
type: 'Meditation',
|
||||
},
|
||||
{
|
||||
profile: avatar7,
|
||||
with: 'Conference call',
|
||||
dateTime: '28 Jul | 05:00-6:45',
|
||||
type: 'Dinner',
|
||||
},
|
||||
{
|
||||
profile: avatar3,
|
||||
with: 'Meeting with Mark',
|
||||
dateTime: '03 Aug | 07:00-8:30',
|
||||
type: 'Meetup',
|
||||
},
|
||||
{
|
||||
profile: avatar2,
|
||||
with: 'Meeting in Oakland',
|
||||
dateTime: '14 Aug | 04:15-05:30',
|
||||
type: 'Dinner',
|
||||
},
|
||||
{
|
||||
profile: avatar1,
|
||||
with: 'Meeting with Carl',
|
||||
dateTime: '05 Oct | 10:00-12:45',
|
||||
type: 'Business',
|
||||
},
|
||||
]
|
||||
|
||||
const meetingTypeUiColors = {
|
||||
Business: 'primary',
|
||||
Meditation: 'success',
|
||||
Meetup: 'secondary',
|
||||
Dinner: 'error',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<!-- SECTION Card Header and Menu -->
|
||||
<VCardItem>
|
||||
<!-- 👉 Title -->
|
||||
<VCardTitle>Meeting Schedule</VCardTitle>
|
||||
|
||||
<!-- 👉 menu -->
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Meting Schedule -->
|
||||
<VCardText>
|
||||
<VList
|
||||
lines="two"
|
||||
class="card-list"
|
||||
>
|
||||
<VListItem
|
||||
v-for="meeting in meetingSchedules"
|
||||
:key="meeting.type"
|
||||
>
|
||||
<!-- 👉 Avatar -->
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
:size="38"
|
||||
:image="meeting.profile"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Title and Subtitle -->
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ meeting.with }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="me-2">
|
||||
<VIcon
|
||||
size="16"
|
||||
start
|
||||
icon="ri-calendar-line"
|
||||
/>
|
||||
{{ meeting.dateTime }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<!-- 👉 Business Types -->
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<VChip
|
||||
size="small"
|
||||
:color="meetingTypeUiColors[meeting.type]"
|
||||
>
|
||||
{{ meeting.type }}
|
||||
</VChip>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
111
resources/js/views/dashboards/ecommerce/ECommerceNewVisitors.vue
Normal file
111
resources/js/views/dashboards/ecommerce/ECommerceNewVisitors.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
const series = [{
|
||||
data: [
|
||||
40,
|
||||
60,
|
||||
50,
|
||||
60,
|
||||
90,
|
||||
40,
|
||||
50,
|
||||
],
|
||||
}]
|
||||
|
||||
const options = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -5,
|
||||
left: -10,
|
||||
right: -7,
|
||||
bottom: -12,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
columnWidth: '60%',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),0.1)',
|
||||
'rgba(var(--v-theme-primary),0.1)',
|
||||
'rgba(var(--v-theme-primary),0.1)',
|
||||
'rgba(var(--v-theme-primary),0.1)',
|
||||
'rgba(var(--v-theme-primary))',
|
||||
'rgba(var(--v-theme-primary),0.1)',
|
||||
'rgba(var(--v-theme-primary),0.1)',
|
||||
'rgba(var(--v-theme-primary),0.1)',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
tickPlacement: 'on',
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
'S',
|
||||
'M',
|
||||
'T',
|
||||
'W',
|
||||
'T',
|
||||
'F',
|
||||
'S',
|
||||
],
|
||||
},
|
||||
yaxis: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol cols="6">
|
||||
<VCardItem>
|
||||
<VCardTitle>New Visitors</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="mt-5">
|
||||
<p class="text-body-1 mb-2">
|
||||
48% new visitors <br>
|
||||
this week.
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<h4 class="text-h4">
|
||||
12,480
|
||||
</h4>
|
||||
<VIcon
|
||||
icon="ri-arrow-up-s-line"
|
||||
size="24"
|
||||
color="success"
|
||||
/>
|
||||
<span class="text-success font-weight-medium">28</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="6">
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="160"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
352
resources/js/views/dashboards/ecommerce/ECommerceTotalProfit.vue
Normal file
352
resources/js/views/dashboards/ecommerce/ECommerceTotalProfit.vue
Normal file
@@ -0,0 +1,352 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
columnWidth: '30%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
2015,
|
||||
2016,
|
||||
2017,
|
||||
2018,
|
||||
2019,
|
||||
2020,
|
||||
2021,
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: disabledColor,
|
||||
fontFamily: 'inter',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: disabledColor,
|
||||
fontFamily: 'inter',
|
||||
},
|
||||
formatter: value => value > 999 ? `${ (value / 1000).toFixed(0) }k` : `${ value }`,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.secondary,
|
||||
],
|
||||
grid: {
|
||||
xaxis: { lines: { show: false } },
|
||||
borderColor,
|
||||
strokeDashArray: 7,
|
||||
padding: { bottom: -10 },
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 6,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: { plotOptions: { bar: { columnWidth: '35%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1280,
|
||||
charts: { height: 200 },
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1160,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 800,
|
||||
chart: {
|
||||
height: 250,
|
||||
offsetX: -10,
|
||||
},
|
||||
options: { plotOptions: { bar: { columnWidth: '40%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 650,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250,
|
||||
offsetX: -10,
|
||||
},
|
||||
plotOptions: { bar: { columnWidth: '45%' } },
|
||||
xaxis: {
|
||||
labels: {
|
||||
rotate: 315,
|
||||
rotateAlways: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
options: { plotOptions: { bar: { columnWidth: '60%' } } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [
|
||||
29000,
|
||||
22000,
|
||||
25000,
|
||||
18500,
|
||||
29000,
|
||||
20000,
|
||||
34500,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Transactions',
|
||||
data: [
|
||||
0,
|
||||
16000,
|
||||
11000,
|
||||
15500,
|
||||
0,
|
||||
12500,
|
||||
9500,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Total Profit',
|
||||
data: [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
14000,
|
||||
0,
|
||||
11500,
|
||||
12000,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const lastThreeTransactions = [
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'success',
|
||||
},
|
||||
title: '$48,568.20',
|
||||
subtitle: 'Total Profit',
|
||||
},
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
color: 'primary',
|
||||
},
|
||||
title: '$38,453.25',
|
||||
subtitle: 'Total Income',
|
||||
},
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-bank-card-line',
|
||||
color: 'secondary',
|
||||
},
|
||||
title: '$2,453.45',
|
||||
subtitle: 'Total Expense',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
class="responsive-border"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
Total Profit
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="292"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
$482.85k
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>Last month balance $234.40k</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-12">
|
||||
<VList class="card-list mt-2">
|
||||
<VListItem
|
||||
v-for="transaction in lastThreeTransactions"
|
||||
:key="transaction.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:color="transaction.avatar.color"
|
||||
variant="tonal"
|
||||
rounded
|
||||
>
|
||||
<VIcon :icon="transaction.avatar.icon" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ transaction.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
<div class="text-body-1">
|
||||
{{ transaction.subtitle }}
|
||||
</div>
|
||||
</VListItemSubtitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
class="mt-4"
|
||||
>
|
||||
View Report
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
$responsive-border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.responsive-border {
|
||||
border-inline-end: $responsive-border;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
.responsive-border {
|
||||
border-block-end: $responsive-border;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
28,
|
||||
58,
|
||||
40,
|
||||
68,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: -2,
|
||||
top: -10,
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'line',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 10,
|
||||
blur: 4,
|
||||
color: currentTheme.primary,
|
||||
opacity: 0.09,
|
||||
},
|
||||
toolbar: { show: false },
|
||||
},
|
||||
markers: {
|
||||
size: 6,
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent',
|
||||
strokeWidth: 4,
|
||||
discrete: [{
|
||||
seriesIndex: 0,
|
||||
dataPointIndex: series[0].data.length - 1,
|
||||
fillColor: currentTheme.surface,
|
||||
strokeColor: currentTheme.primary,
|
||||
size: 6,
|
||||
}],
|
||||
hover: { size: 7 },
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
colors: [currentTheme.primary],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
$35.4k
|
||||
</h4>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="110"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Total Revenue
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,118 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
sparkline: { enabled: true },
|
||||
animations: { enabled: false },
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: true },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.info,
|
||||
currentTheme.value.warning,
|
||||
currentTheme.value.error,
|
||||
],
|
||||
labels: [
|
||||
'Comments',
|
||||
'Replies',
|
||||
'Shares',
|
||||
'Likes',
|
||||
],
|
||||
series: [
|
||||
45,
|
||||
10,
|
||||
18,
|
||||
27,
|
||||
],
|
||||
grid: {
|
||||
padding: {
|
||||
top: -7,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
expandOnClick: false,
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '1.125rem',
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: 500,
|
||||
offsetY: -18,
|
||||
color: 'rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))',
|
||||
formatter: o => `${ Number.parseInt(o) }%`,
|
||||
},
|
||||
name: {
|
||||
offsetY: 18,
|
||||
fontFamily: 'Inter',
|
||||
},
|
||||
total: {
|
||||
label: '1 Quarter',
|
||||
show: true,
|
||||
color: 'rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))',
|
||||
fontSize: '0.8125rem',
|
||||
fontWeight: 400,
|
||||
formatter: () => '28%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="overflow-visible">
|
||||
<VCardText class="d-flex justify-space-between align-center gap-3">
|
||||
<div>
|
||||
<h5 class="text-h5 mb-1">
|
||||
Total Sales
|
||||
</h5>
|
||||
|
||||
<div class="text-body-1 mb-3">
|
||||
Calculated in last 7 days
|
||||
</div>
|
||||
<div class="d-flex align-center">
|
||||
<h4 class="text-h4">
|
||||
$25,980
|
||||
</h4>
|
||||
<div class="d-flex align-center">
|
||||
<VIcon
|
||||
icon="ri-arrow-up-s-line"
|
||||
size="24"
|
||||
color="success"
|
||||
/>
|
||||
<span class="text-body-1 text-success">15.6%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:options="chartOptions"
|
||||
:height="110"
|
||||
:series="[45, 10, 18, 27]"
|
||||
:width="110"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const series = [78]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
colors: [currentTheme.info],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: { size: '65%' },
|
||||
dataLabels: {
|
||||
name: { show: false },
|
||||
value: {
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: '500',
|
||||
offsetY: 0,
|
||||
color: `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['medium-emphasis-opacity'] })`,
|
||||
},
|
||||
},
|
||||
track: { background: currentTheme['track-bg'] },
|
||||
},
|
||||
},
|
||||
stroke: { lineCap: 'round' },
|
||||
responsive: [{
|
||||
breakpoint: 450,
|
||||
options: { plotOptions: { radialBar: { hollow: { size: '52%' } } } },
|
||||
}],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
135k
|
||||
</h4>
|
||||
<VueApexCharts
|
||||
id="stats-radial-bar-chart"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
type="radialBar"
|
||||
:height="150"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center mt-6">
|
||||
Total sales
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,133 @@
|
||||
<script setup>
|
||||
import { kFormatter } from '@core/utils/formatters'
|
||||
import arrowGrowth from '@images/cards/arrow-growth.png'
|
||||
import atmCard from '@images/cards/atm-card.png'
|
||||
import creditCard from '@images/cards/credit-card.png'
|
||||
import paypal from '@images/cards/paypal.png'
|
||||
import wallet from '@images/cards/wallet.png'
|
||||
|
||||
const transactions = [
|
||||
{
|
||||
gateway: 'PayPal',
|
||||
for: 'Received Money',
|
||||
amount: 2482,
|
||||
img: paypal,
|
||||
imgHeight: 22,
|
||||
},
|
||||
{
|
||||
gateway: 'Credit Card',
|
||||
for: 'DigitalOcean',
|
||||
amount: -1250,
|
||||
img: creditCard,
|
||||
imgHeight: 15,
|
||||
},
|
||||
{
|
||||
gateway: 'Mastercard',
|
||||
for: 'Netflix',
|
||||
amount: -99,
|
||||
img: atmCard,
|
||||
imgHeight: 15,
|
||||
},
|
||||
{
|
||||
gateway: 'Wallet',
|
||||
for: 'Mac\'D',
|
||||
amount: -82,
|
||||
img: wallet,
|
||||
imgHeight: 18,
|
||||
},
|
||||
{
|
||||
gateway: 'Transfer',
|
||||
for: 'Refund',
|
||||
amount: 8934,
|
||||
img: arrowGrowth,
|
||||
imgHeight: 12,
|
||||
},
|
||||
]
|
||||
|
||||
const transactionsColors = {
|
||||
'PayPal': 'error',
|
||||
'Credit Card': 'success',
|
||||
'Mastercard': 'warning',
|
||||
'Wallet': 'primary',
|
||||
'Transfer': 'info',
|
||||
}
|
||||
|
||||
const formateAmount = amount => {
|
||||
return Math.sign(amount) === 1 ? `+${ kFormatter(amount) }` : `-${ Math.abs(amount) }`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<!-- SECTION Card Header and Menu -->
|
||||
<VCardItem>
|
||||
<!-- 👉 Title -->
|
||||
<VCardTitle>Transactions</VCardTitle>
|
||||
|
||||
<!-- 👉 menu -->
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Transactions List -->
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="transaction in transactions"
|
||||
:key="transaction.for"
|
||||
>
|
||||
<!-- 👉 Avatar -->
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
variant="tonal"
|
||||
:color="transactionsColors[transaction.gateway]"
|
||||
>
|
||||
<img
|
||||
:src="transaction.img"
|
||||
:height="transaction.imgHeight"
|
||||
>
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Title and Subtitle -->
|
||||
<VListItemTitle>
|
||||
<h6 class="text-h6">
|
||||
{{ transaction.gateway }}
|
||||
</h6>
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
<div class="text-body-1">
|
||||
{{ transaction.for }}
|
||||
</div>
|
||||
</VListItemSubtitle>
|
||||
|
||||
<!-- 👉 Amounts -->
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<h6 class="text-h6 me-2">
|
||||
{{ formateAmount(transaction.amount) }}
|
||||
</h6>
|
||||
<VIcon
|
||||
:size="24"
|
||||
:color="Math.sign(transaction.amount) === 1 ? 'success' : 'error'"
|
||||
:icon="Math.sign(transaction.amount) === 1 ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<script setup>
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
grid: { show: false },
|
||||
colors: ['rgba(var(--v-theme-primary))'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '85%',
|
||||
columnWidth: '35px',
|
||||
borderRadius: 3,
|
||||
distributed: true,
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
|
||||
const series = [{
|
||||
name: '2020',
|
||||
data: [
|
||||
50,
|
||||
40,
|
||||
110,
|
||||
80,
|
||||
40,
|
||||
60,
|
||||
40,
|
||||
],
|
||||
}]
|
||||
|
||||
const websiteStatistics = [
|
||||
{
|
||||
title: 'Direct',
|
||||
color: 'success',
|
||||
traffic: '86,471',
|
||||
percentage: '-15',
|
||||
},
|
||||
{
|
||||
title: 'Organic Search',
|
||||
color: 'primary',
|
||||
traffic: '57,484',
|
||||
percentage: '+85',
|
||||
},
|
||||
{
|
||||
title: 'Referral',
|
||||
color: 'warning',
|
||||
traffic: '2,534',
|
||||
percentage: '+48',
|
||||
},
|
||||
{
|
||||
title: 'Mail',
|
||||
color: 'error',
|
||||
traffic: '977',
|
||||
percentage: '-36',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="position-relative">
|
||||
<VCardTitle>Transactions</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<h1 class="text-h1 mb-2">
|
||||
4,590
|
||||
</h1>
|
||||
<div class="text-body-2">
|
||||
Total Traffic
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
height="80"
|
||||
width="120"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<div
|
||||
v-for="(data, index) in websiteStatistics"
|
||||
:key="data.title"
|
||||
>
|
||||
<div class="d-flex py-3 align-center">
|
||||
<div
|
||||
class="bubble"
|
||||
:class="`bg-${data.color}`"
|
||||
/>
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
{{ data.title }}
|
||||
</div>
|
||||
<VSpacer />
|
||||
<h6 class="text-h6 me-8">
|
||||
{{ data.traffic }}
|
||||
</h6>
|
||||
<h6 class="text-h6 me-2">
|
||||
{{ data.percentage.slice(1) }}%
|
||||
</h6>
|
||||
<VIcon
|
||||
:size="24"
|
||||
:color="data.percentage.charAt(0) === '+' ? 'success' : 'error'"
|
||||
>
|
||||
{{ data.percentage.charAt(0) === '+' ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line' }}
|
||||
</VIcon>
|
||||
</div>
|
||||
<VDivider v-if="index !== websiteStatistics.length - 1" />
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bubble {
|
||||
border-radius: 50%;
|
||||
block-size: 1rem;
|
||||
inline-size: 1rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user