first commit
This commit is contained in:
Inshal
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
import timelineCardHeader from '@images/cards/timeline-card-header.png'
|
||||
import pdf from '@images/icons/project-icons/pdf.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VImg
|
||||
cover
|
||||
height="210"
|
||||
:src="timelineCardHeader"
|
||||
/>
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Activity Timeline</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<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-4">
|
||||
<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 mb-2">
|
||||
6 team members in a project
|
||||
</p>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar1"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar8"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar6"
|
||||
/>
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="40"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
import message from '@images/cards/comment-alt-lines.svg'
|
||||
import chart from '@images/cards/graph-bar.svg'
|
||||
import heart from '@images/cards/heart-medical.svg'
|
||||
import user from '@images/cards/user.svg'
|
||||
|
||||
const analytics = [
|
||||
{
|
||||
title: '42.8k',
|
||||
subtitle: 'Number of like',
|
||||
img: heart,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: '21.2k',
|
||||
subtitle: 'Number of Followers',
|
||||
img: chart,
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: '2.4k',
|
||||
subtitle: 'Number of Comments',
|
||||
img: message,
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: '389.50k',
|
||||
subtitle: 'Number of Visits',
|
||||
img: user,
|
||||
color: 'success',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
Analytics
|
||||
</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="item in analytics"
|
||||
:key="item.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="40"
|
||||
:color="item.color"
|
||||
variant="tonal"
|
||||
>
|
||||
<component :is="item.img" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>
|
||||
<h5 class="text-h5">
|
||||
{{ item.title }}
|
||||
</h5>
|
||||
</VListItemTitle>
|
||||
|
||||
<VListItemSubtitle>
|
||||
<div class="text-body-1">
|
||||
{{ item.subtitle }}
|
||||
</div>
|
||||
</VListItemSubtitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
import cafeBadilico from '@images/cards/cafe-badilico.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VImg
|
||||
cover
|
||||
height="168"
|
||||
:src="cafeBadilico"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between align-center mb-2">
|
||||
<h5 class="text-h5">
|
||||
Cafe Badilico
|
||||
</h5>
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
<div class="d-flex gap-x-2 align-center mb-5">
|
||||
<VRating
|
||||
:model-value="4"
|
||||
:size="24"
|
||||
background-color="warning"
|
||||
/>
|
||||
|
||||
<div class="text-body-1">
|
||||
4 Star (12.4k)
|
||||
</div>
|
||||
</div>
|
||||
<p>Italian Cafe</p>
|
||||
<p>
|
||||
The refrigerated dairy aisle of your local grocery store can be a great source tasty, convenient selections for your.
|
||||
</p>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<p class="my-4">
|
||||
Tonight's availability
|
||||
</p>
|
||||
|
||||
<div class="d-flex gap-x-2 mb-5">
|
||||
<VChip size="small">
|
||||
5:30PM
|
||||
</VChip>
|
||||
<VChip size="small">
|
||||
7:00PM
|
||||
</VChip>
|
||||
<VChip size="small">
|
||||
7:15PM
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<VBtn block>
|
||||
Book Now
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,206 @@
|
||||
<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,
|
||||
},
|
||||
{
|
||||
title: 'Gumroad Account',
|
||||
subtitle: 'Sell Admin template',
|
||||
amount: '+$8,190',
|
||||
logo: gumroad,
|
||||
},
|
||||
]
|
||||
|
||||
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,
|
||||
},
|
||||
{
|
||||
title: 'DigitalOcean',
|
||||
subtitle: 'Cloud Hosting',
|
||||
amount: '-$1030',
|
||||
logo: digitalOcean,
|
||||
},
|
||||
]
|
||||
</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">
|
||||
{{ 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">
|
||||
{{ withdraw.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1 me-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>
|
||||
@@ -0,0 +1,133 @@
|
||||
<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"
|
||||
/>
|
||||
<div class="text-body-1">
|
||||
Interested
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-check-double-line"
|
||||
/>
|
||||
<div class="text-body-1">
|
||||
Joined
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-group-line"
|
||||
color="primary"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Finance Summary</VCardTitle>
|
||||
<VCardSubtitle>Check out each Column for more details</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VAvatar
|
||||
size="44"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-question-line"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex flex-column gap-y-6">
|
||||
<div class="d-flex flex-wrap gap-y-4">
|
||||
<div style="min-inline-size: 210px;">
|
||||
<div class="mb-1">
|
||||
Annual Companies Taxes
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
$1450.35
|
||||
</h5>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1">
|
||||
Next Tax Review Date
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
July 14, 2021
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap gap-y-4">
|
||||
<div style="min-inline-size: 210px;">
|
||||
<div class="mb-1">
|
||||
Average Product Price
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
$85.50
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-1">
|
||||
Satisfaction Rate
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-center gap-5"
|
||||
style="inline-size: 130px;"
|
||||
>
|
||||
<div class="flex-grow-1">
|
||||
<VProgressLinear
|
||||
color="primary"
|
||||
rounded
|
||||
rounded-bar
|
||||
:model-value="75"
|
||||
:height="6"
|
||||
/>
|
||||
</div>
|
||||
<span>75%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar7"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar8"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar6"
|
||||
/>
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="40"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
<VChip
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
5 days Ago
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</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: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -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">
|
||||
Sales
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<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 avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
profilePic: avatar1,
|
||||
name: 'Dean Hogan',
|
||||
designation: 'IOS developer',
|
||||
project: 'Zipper',
|
||||
projectIndication: 'primary',
|
||||
task: '87/135',
|
||||
progress: 65,
|
||||
},
|
||||
{
|
||||
profilePic: avatar8,
|
||||
name: 'Hilda Rice',
|
||||
designation: 'Laravel developer',
|
||||
project: 'Brandi',
|
||||
projectIndication: 'success',
|
||||
task: '340/420',
|
||||
progress: 75,
|
||||
},
|
||||
{
|
||||
profilePic: avatar5,
|
||||
name: 'Andrew O\'Brien',
|
||||
designation: 'React developer',
|
||||
project: 'Payers',
|
||||
projectIndication: 'warning',
|
||||
task: '50/82',
|
||||
progress: 55,
|
||||
},
|
||||
{
|
||||
profilePic: avatar2,
|
||||
name: 'Eleanor Price',
|
||||
designation: 'Angular developer',
|
||||
project: 'Citibank',
|
||||
projectIndication: 'error',
|
||||
task: '98/260',
|
||||
progress: 60,
|
||||
},
|
||||
{
|
||||
profilePic: avatar3,
|
||||
name: 'Carl Oliver',
|
||||
designation: 'VueJs developer',
|
||||
project: 'Aviator',
|
||||
projectIndication: 'secondary',
|
||||
task: '12/25',
|
||||
progress: 60,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<!-- SECTION Card Header and Menu -->
|
||||
<VCardItem>
|
||||
<!-- 👉 Title -->
|
||||
<VCardTitle>Team Members</VCardTitle>
|
||||
|
||||
<!-- 👉 menu -->
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- TODO try to remove table border -->
|
||||
<VTable class="text-no-wrap team-members-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col">
|
||||
Project
|
||||
</th>
|
||||
<th scope="col">
|
||||
Tasks
|
||||
</th>
|
||||
<th scope="col">
|
||||
Progress
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="member in teamMembers"
|
||||
:key="member.name"
|
||||
>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="me-3">
|
||||
<VAvatar
|
||||
size="38"
|
||||
:image="member.profilePic"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
{{ member.name }}
|
||||
</h6>
|
||||
<div class="text-body-1">
|
||||
{{ member.designation }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<VChip
|
||||
:color="member.projectIndication"
|
||||
size="small"
|
||||
>
|
||||
{{ member.project }}
|
||||
</VChip>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="d-flex font-weight-medium">
|
||||
<div class="text-primary">
|
||||
{{ member.task.split('/')[0] }}
|
||||
</div>
|
||||
<div class="text-primary">
|
||||
/
|
||||
</div>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
{{ member.task.split('/')[1] }}
|
||||
</h6>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-center">
|
||||
<VProgressCircular
|
||||
:color="member.projectIndication"
|
||||
:model-value="member.progress"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.team-members-table {
|
||||
&.v-table{
|
||||
--v-table-header-height: 2rem;
|
||||
|
||||
.v-table__wrapper{
|
||||
table{
|
||||
thead{
|
||||
tr{
|
||||
th{
|
||||
background: none !important;
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
margin-block-end: 0.75rem !important;
|
||||
|
||||
&:first-child{
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
padding-inline-end: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
|
||||
&:first-child{
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
padding-inline-end: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child){
|
||||
td{
|
||||
border-block-end: none ;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
td{
|
||||
padding-block-end: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
td{
|
||||
padding-block-start: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<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-6">
|
||||
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
|
||||
rounded-bar
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,140 @@
|
||||
<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,
|
||||
},
|
||||
{
|
||||
gateway: 'Wallet',
|
||||
for: 'Buy Apple Watch',
|
||||
amount: -399,
|
||||
img: wallet,
|
||||
imgHeight: 18,
|
||||
},
|
||||
]
|
||||
|
||||
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 me-2">
|
||||
{{ 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.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -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 me-2 border-opacity-100 border-primary"
|
||||
>
|
||||
<VImg
|
||||
:src="briefcase"
|
||||
alt="briefcase"
|
||||
height="20"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<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">
|
||||
5250
|
||||
</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>
|
||||
@@ -0,0 +1,155 @@
|
||||
<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',
|
||||
},
|
||||
{
|
||||
title: 'Social',
|
||||
color: 'info',
|
||||
traffic: '92',
|
||||
percentage: '+55',
|
||||
},
|
||||
{
|
||||
title: 'Other',
|
||||
color: 'secondary',
|
||||
traffic: '28',
|
||||
percentage: '+12',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Transactions</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-3">
|
||||
<div class="d-flex align-center justify-space-between mb-5">
|
||||
<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>
|
||||
|
||||
<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-6">
|
||||
{{ data.traffic }}
|
||||
</h6>
|
||||
<h6 class="text-h6 me-1">
|
||||
{{ 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>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
const assignmentData = [
|
||||
{
|
||||
title: 'User Experience Design',
|
||||
tasks: 120,
|
||||
progress: 72,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Basic fundamentals',
|
||||
tasks: 32,
|
||||
progress: 48,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'React Native components',
|
||||
tasks: 182,
|
||||
progress: 15,
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
title: 'Basic of music theory',
|
||||
tasks: 56,
|
||||
progress: 24,
|
||||
color: 'info',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem title="Assignment progress">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="assignment in assignmentData"
|
||||
:key="assignment.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VProgressCircular
|
||||
v-model="assignment.progress"
|
||||
:size="54"
|
||||
class="me-4"
|
||||
:color="assignment.color"
|
||||
>
|
||||
<h6 class="text-h6">
|
||||
{{ assignment.progress }}%
|
||||
</h6>
|
||||
</VProgressCircular>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="text-h6 me-4 mb-2 text-truncate">
|
||||
{{ assignment.title }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VListItemSubtitle>{{ assignment.tasks }} Tasks</VListItemSubtitle>
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
color="secondary"
|
||||
class="rounded"
|
||||
size="34"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-right-s-line"
|
||||
size="20"
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
const deliveryData = [
|
||||
{
|
||||
title: 'Packages in transit',
|
||||
value: '10k',
|
||||
change: 25.8,
|
||||
icon: 'ri-gift-line',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Packages out for delivery',
|
||||
value: '5k',
|
||||
change: 4.3,
|
||||
icon: 'ri-car-line',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: 'Packages delivered',
|
||||
value: '15k',
|
||||
change: -12.5,
|
||||
icon: 'ri-check-line',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Delivery success rate',
|
||||
value: '95%',
|
||||
change: 35.6,
|
||||
icon: 'ri-home-line',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: 'Average delivery time',
|
||||
value: '2.5 Days',
|
||||
change: -2.15,
|
||||
icon: 'ri-timer-line',
|
||||
color: 'secondary',
|
||||
},
|
||||
{
|
||||
title: 'Customer satisfaction',
|
||||
value: '4.5/5',
|
||||
change: 5.7,
|
||||
icon: 'ri-user-line',
|
||||
color: 'error',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem
|
||||
title="Delivery performance"
|
||||
subtitle="12% increase in this month"
|
||||
>
|
||||
<template #append>
|
||||
<MoreBtn class="mt-n5" />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="(data, index) in deliveryData"
|
||||
:key="index"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:color="data.color"
|
||||
variant="tonal"
|
||||
rounded
|
||||
size="42"
|
||||
>
|
||||
<VIcon
|
||||
:icon="data.icon"
|
||||
size="26"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
<VListItemTitle class="me-1">
|
||||
{{ data.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
<div
|
||||
:class="data.change > 0 ? 'text-success' : 'text-error'"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<VIcon
|
||||
:icon="data.change > 0 ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
|
||||
size="24"
|
||||
class="me-1"
|
||||
/>
|
||||
<span>{{ data.change }}%</span>
|
||||
</div>
|
||||
</VListItemSubtitle>
|
||||
<template #append>
|
||||
<span class="text-high-emphasis text-body-1 font-weight-medium">
|
||||
{{ data.value }}
|
||||
</span>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,347 @@
|
||||
<script setup>
|
||||
const currentTab = ref('New')
|
||||
|
||||
const tabsData = [
|
||||
'New',
|
||||
'Preparing',
|
||||
'Shipping',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem
|
||||
title="Orders by countries"
|
||||
subtitle="62 deliveries in progress"
|
||||
>
|
||||
<template #append>
|
||||
<MoreBtn class="mt-n5" />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VTabs
|
||||
v-model="currentTab"
|
||||
grow
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VTab
|
||||
v-for="(tab, index) in tabsData"
|
||||
:key="index"
|
||||
>
|
||||
{{ tab }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VCardText>
|
||||
<VWindow v-model="currentTab">
|
||||
<VWindowItem>
|
||||
<div>
|
||||
<VTimeline
|
||||
align="start"
|
||||
truncate-line="both"
|
||||
side="end"
|
||||
density="compact"
|
||||
line-thickness="1"
|
||||
class="v-timeline--variant-outlined"
|
||||
>
|
||||
<VTimelineItem
|
||||
icon="ri-checkbox-circle-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="success"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-uppercase text-success">
|
||||
Sender
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Myrtle Ullrich
|
||||
</div>
|
||||
<div class="text-body-2 mb-1">
|
||||
101 Boulder, California(CA), 95959
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
icon="ri-map-pin-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="primary"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-primary text-uppercase">
|
||||
Receiver
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Barry Schowalter
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
939 Orange, California(CA), 92118
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
|
||||
<VDivider
|
||||
class="my-4"
|
||||
style="border-style: dashed;"
|
||||
/>
|
||||
|
||||
<VTimeline
|
||||
align="start"
|
||||
truncate-line="both"
|
||||
side="end"
|
||||
density="compact"
|
||||
line-thickness="1"
|
||||
class="v-timeline--variant-outlined"
|
||||
>
|
||||
<VTimelineItem
|
||||
icon="ri-checkbox-circle-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="success"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-uppercase text-success">
|
||||
Sender
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Veronica Herman
|
||||
</div>
|
||||
<div class="text-body-2 mb-1">
|
||||
162 Windsor, California(CA), 95492
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
icon="ri-map-pin-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="primary"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-primary text-uppercase">
|
||||
Receiver
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Helen Jacobs
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
487 Sunset, California(CA), 94043
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<div>
|
||||
<VTimeline
|
||||
align="start"
|
||||
truncate-line="both"
|
||||
side="end"
|
||||
density="compact"
|
||||
line-thickness="1"
|
||||
class="v-timeline--variant-outlined"
|
||||
>
|
||||
<VTimelineItem
|
||||
icon="ri-checkbox-circle-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="success"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-uppercase text-success">
|
||||
Sender
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Barry Schowalter
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
939 Orange, California(CA), 92118
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
icon="ri-map-pin-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="primary"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-primary text-uppercase">
|
||||
Receiver
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Myrtle Ullrich
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
101 Boulder, California(CA), 95959
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
|
||||
<VDivider
|
||||
class="my-4"
|
||||
style="border-style: dashed;"
|
||||
/>
|
||||
|
||||
<VTimeline
|
||||
align="start"
|
||||
truncate-line="both"
|
||||
side="end"
|
||||
density="compact"
|
||||
line-thickness="1"
|
||||
class="v-timeline--variant-outlined"
|
||||
>
|
||||
<VTimelineItem
|
||||
icon="ri-checkbox-circle-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="success"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-uppercase text-success">
|
||||
Sender
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Veronica Herman
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
162 Windsor, California(CA), 95492
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
icon="ri-map-pin-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="primary"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-primary text-uppercase">
|
||||
Receiver
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Helen Jacobs
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
487 Sunset, California(CA), 94043
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<div>
|
||||
<VTimeline
|
||||
align="start"
|
||||
truncate-line="both"
|
||||
side="end"
|
||||
density="compact"
|
||||
line-thickness="1"
|
||||
class="v-timeline--variant-outlined"
|
||||
>
|
||||
<VTimelineItem
|
||||
icon="ri-checkbox-circle-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="success"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-uppercase text-success">
|
||||
Sender
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Myrtle Ullrich
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
101 Boulder, California(CA), 95959
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem
|
||||
icon="ri-map-pin-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="primary"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-primary text-uppercase">
|
||||
Receiver
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Barry Schowalter
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
939 Orange, California(CA), 92118
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
|
||||
<VDivider
|
||||
class="my-4"
|
||||
style="border-style: dashed;"
|
||||
/>
|
||||
|
||||
<VTimeline
|
||||
align="start"
|
||||
truncate-line="both"
|
||||
side="end"
|
||||
density="compact"
|
||||
line-thickness="1"
|
||||
class="v-timeline--variant-outlined"
|
||||
>
|
||||
<VTimelineItem
|
||||
icon="ri-checkbox-circle-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="success"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-uppercase text-success">
|
||||
Sender
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Veronica Herman
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
162 Windsor, California(CA), 95492
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
icon="ri-map-pin-line"
|
||||
dot-color="rgba(var(--v-theme-surface))"
|
||||
icon-color="primary"
|
||||
fill-dot
|
||||
size="20"
|
||||
:elevation="0"
|
||||
>
|
||||
<div class="text-caption text-primary text-uppercase">
|
||||
Receiver
|
||||
</div>
|
||||
<div class="app-timeline-title">
|
||||
Helen Jacobs
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
487 Sunset, California(CA), 94043
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,66 @@
|
||||
<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'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem title="Popular Instructors">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
<VDivider />
|
||||
<div class="text-overline d-flex justify-space-between px-5 py-4">
|
||||
<div>instructors</div>
|
||||
<div>Courses</div>
|
||||
</div>
|
||||
<VDivider />
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="instructor in [
|
||||
{ name: 'Jordan Stevenson', profession: 'Business Intelligence', totalCourses: 33, avatar: avatar1 },
|
||||
{ name: 'Bentlee Emblin', profession: 'Digital Marketing', totalCourses: 52, avatar: avatar2 },
|
||||
{ name: 'Benedetto Rossiter', profession: 'UI/UX Design', totalCourses: 12, avatar: avatar3 },
|
||||
{ name: 'Beverlie Krabbe', profession: 'Vue', totalCourses: 8, avatar: avatar4 },
|
||||
{ name: 'Benette Rose', profession: 'React', totalCourses: 20, avatar: avatar5 },
|
||||
{ name: 'John Doe', profession: 'Public speaking', totalCourses: 30, avatar: avatar6 },
|
||||
|
||||
]"
|
||||
:key="instructor.name"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="34"
|
||||
:image="instructor.avatar"
|
||||
/>
|
||||
</template>
|
||||
<h6 class="text-h6">
|
||||
{{ instructor.name }}
|
||||
</h6>
|
||||
<div class="text-caption text-medium-emphasis">
|
||||
{{ instructor.profession }}
|
||||
</div>
|
||||
|
||||
<template #append>
|
||||
<h6 class="text-h6">
|
||||
{{ instructor.totalCourses }}
|
||||
</h6>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list{
|
||||
--v-card-list-gap: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
const coursesData = [
|
||||
{
|
||||
title: 'Videography Basic Design Course',
|
||||
views: '1.2k',
|
||||
icon: 'ri-video-download-line',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Basic Front-end Development Course',
|
||||
views: '834',
|
||||
icon: 'ri-code-view',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: 'Basic Fundamentals of Photography',
|
||||
views: '3.7k',
|
||||
icon: 'ri-image-2-line',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Advance Dribble Base Visual Design',
|
||||
views: '2.5k',
|
||||
icon: 'ri-palette-line',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: 'Your First Singing Lesson',
|
||||
views: '948',
|
||||
icon: 'ri-music-2-line',
|
||||
color: 'error',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem title="Top Courses">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="(course, index) in coursesData"
|
||||
:key="index"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
variant="tonal"
|
||||
:color="course.color"
|
||||
>
|
||||
<VIcon
|
||||
:icon="course.icon"
|
||||
size="24"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<div class="text-h6 clamp-text text-wrap me-4">
|
||||
{{ course.title }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<VChip
|
||||
variant="tonal"
|
||||
size="small"
|
||||
>
|
||||
{{ course.views }} Views
|
||||
</VChip>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
import girlWithLaptop from '@images/pages/pose-fs-9.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex justify-center align-start pb-0 px-3 pt-3 mb-4 bg-light-primary rounded">
|
||||
<VImg
|
||||
:src="girlWithLaptop"
|
||||
width="145"
|
||||
height="140"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-h5 mb-2">
|
||||
Upcoming Webinar
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Next Generation Frontend Architecture Using Layout Engine And Vue.
|
||||
</div>
|
||||
<div class="d-flex justify-space-between my-4 gap-4 flex-wrap">
|
||||
<div
|
||||
v-for="{ icon, title, value } in [{ icon: 'ri-calendar-line', title: '17 Nov 23', value: 'Date' }, { icon: 'ri-time-line', title: '32 Minutes', value: 'Duration' }]"
|
||||
:key="title"
|
||||
class="d-flex gap-x-4 align-center"
|
||||
>
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
rounded
|
||||
>
|
||||
<VIcon :icon="icon" />
|
||||
</VAvatar>
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
{{ title }}
|
||||
</h6>
|
||||
<div class="text-body-1">
|
||||
{{ value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VBtn block>
|
||||
Join the event
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
473
resources/js/views/pages/cards/card-basic/CardBasic.vue
Normal file
473
resources/js/views/pages/cards/card-basic/CardBasic.vue
Normal file
@@ -0,0 +1,473 @@
|
||||
<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 eCommerce2 from '@images/eCommerce/2.png'
|
||||
import pages1 from '@images/pages/1.png'
|
||||
import pages2 from '@images/pages/2.png'
|
||||
import pages3 from '@images/pages/3.png'
|
||||
import pages5 from '@images/pages/5.jpg'
|
||||
import pages6 from '@images/pages/6.jpg'
|
||||
|
||||
const avatars = [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
]
|
||||
|
||||
const isCardDetailsVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Influencing The Influencer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard>
|
||||
<VImg
|
||||
:src="pages1"
|
||||
cover
|
||||
/>
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Influencing The Influencer</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Cancun is back, better than ever! Over a hundred Mexico resorts have reopened and the state tourism minister predicts Cancun will draw as many visitors in 2006 as it did two years ago.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Robert Meyer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages2" />
|
||||
|
||||
<VCardText class="position-relative">
|
||||
<!-- User Avatar -->
|
||||
<VAvatar
|
||||
size="75"
|
||||
class="avatar-center"
|
||||
:image="avatar1"
|
||||
/>
|
||||
|
||||
<!-- Title, Subtitle & Action Button -->
|
||||
<div class="d-flex justify-space-between flex-wrap pt-8">
|
||||
<div class="me-2 mb-2">
|
||||
<VCardTitle class="pa-0">
|
||||
Robert Meyer
|
||||
</VCardTitle>
|
||||
<VCardSubtitle class="text-caption pa-0">
|
||||
London, UK
|
||||
</VCardSubtitle>
|
||||
</div>
|
||||
<VBtn>send request</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Mutual Friends -->
|
||||
<div class="d-flex justify-space-between align-center mt-8">
|
||||
<span class="font-weight-medium">18 mutual friends</span>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
v-for="avatar in avatars"
|
||||
:key="avatar"
|
||||
:image="avatar"
|
||||
size="40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Popular Uses Of The Internet -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
sm="6"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages3" />
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Popular Uses Of The Internet</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Although cards can support multiple actions, UI controls, and an overflow menu.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn @click="isCardDetailsVisible = !isCardDetailsVisible">
|
||||
Details
|
||||
</VBtn>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<VBtn
|
||||
icon
|
||||
size="small"
|
||||
@click="isCardDetailsVisible = !isCardDetailsVisible"
|
||||
>
|
||||
<VIcon :icon="isCardDetailsVisible ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'" />
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
|
||||
<VExpandTransition>
|
||||
<div v-show="isCardDetailsVisible">
|
||||
<VDivider />
|
||||
<VCardText>
|
||||
I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
|
||||
</VCardText>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Apple iPhone 11 Pro -->
|
||||
<VCol
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
|
||||
<div class="ma-auto pa-5">
|
||||
<VImg
|
||||
width="137"
|
||||
height="176"
|
||||
:src="eCommerce2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||
|
||||
<div>
|
||||
<VCardItem>
|
||||
<VCardTitle>Apple iPhone 11 Pro</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="text-body-1">
|
||||
<span>Price :</span> <span class="font-weight-medium">$899</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions class="justify-space-between">
|
||||
<VBtn>
|
||||
<VIcon icon="ri-shopping-cart-line" />
|
||||
<span class="ms-2">Add to cart</span>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
icon="ri-share-line"
|
||||
size="small"
|
||||
/>
|
||||
</VCardActions>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Stump town Roasters. -->
|
||||
<VCol
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="d-flex flex-column-reverse flex-md-row">
|
||||
<div>
|
||||
<VCardItem>
|
||||
<VCardTitle>Stumptown Roasters</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="d-flex align-center flex-wrap text-body-1">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
class="me-3"
|
||||
density="compact"
|
||||
/>
|
||||
<span>5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
Before there was a United States of America, there were coffee houses, because how are you supposed to build.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Location</VBtn>
|
||||
<VBtn>Reviews</VBtn>
|
||||
</VCardActions>
|
||||
</div>
|
||||
|
||||
<div class="ma-auto pa-5">
|
||||
<VImg
|
||||
:width="176"
|
||||
:src="pages5"
|
||||
class="rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Apple Watch card -->
|
||||
<VCol
|
||||
lg="4"
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages6" />
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Apple Watch</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<p class="font-weight-medium text-base">
|
||||
$249.40
|
||||
</p>
|
||||
|
||||
<p class="mb-0">
|
||||
3.1GHz 6-core 10th-generation Intel Core i5 processor, Turbo Boost up to 4.5GHz
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
class="rounded-t-0"
|
||||
>
|
||||
Add to cart
|
||||
</VBtn>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Lifetime Membership -->
|
||||
<VCol
|
||||
md="6"
|
||||
lg="8"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
md="12"
|
||||
lg="7"
|
||||
order="2"
|
||||
order-lg="1"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Lifetime Membership</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Here, I focus on a range of items and features that we use in life without giving them a second thought such as Coca Cola, body muscles and holding ones own breath. Though, most of these notes are not fundamentally necessary, they are such that you can use them for a good laugh, at a drinks party or for picking up women or men.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VDivider />
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-center">
|
||||
<div class="me-auto pe-4">
|
||||
<p class="d-flex align-center mb-6">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="ri-lock-unlock-line"
|
||||
/>
|
||||
<span class="ms-3">Full Access</span>
|
||||
</p>
|
||||
|
||||
<p class="d-flex align-center mb-0">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
<span class="ms-3">15 Members</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VDivider
|
||||
v-if="$vuetify.display.smAndUp"
|
||||
vertical
|
||||
inset
|
||||
/>
|
||||
|
||||
<div class="ms-auto ps-4">
|
||||
<p class="d-flex align-center mb-6">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="ri-star-line"
|
||||
/>
|
||||
<span class="ms-3">Access all Features</span>
|
||||
</p>
|
||||
|
||||
<p class="d-flex align-center mb-0">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="ri-pulse-line"
|
||||
/>
|
||||
<span class="ms-3">Lifetime Free Update</span>
|
||||
</p>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
md="12"
|
||||
lg="5"
|
||||
order="1"
|
||||
order-lg="2"
|
||||
class="member-pricing-bg text-center"
|
||||
>
|
||||
<div class="membership-pricing d-flex flex-column align-center py-14 h-100 justify-center">
|
||||
<p class="mb-5">
|
||||
<sub class="text-h5">$</sub>
|
||||
<sup class="text-h2 font-weight-medium">899</sup>
|
||||
<sub class="text-h5">USD</sub>
|
||||
</p>
|
||||
|
||||
<p class="text-sm">
|
||||
5 Tips For Offshore <br> Software Development
|
||||
</p>
|
||||
|
||||
<VBtn class="mt-8">
|
||||
Contact Now
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Influencing The Influencer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Influencing The Influencer">
|
||||
<VCardText>
|
||||
Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in touch.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
If you're in the market for new desktops, notebooks, or PDAs, there are a myriad of choices. Here's a rundown of some of the best systems available.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Read More</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 The Best Answers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="The Best Answers">
|
||||
<VCardText class="d-flex align-center flex-wrap">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
density="compact"
|
||||
class="me-3"
|
||||
/>
|
||||
<span class="text-subtitle-2">5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
If you are looking for a new way to promote your business that won't cost you more money, maybe printing is one of the options you won't resist.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
become fast, easy and simple. If you want your promotional material to be an eye-catching
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Location</VBtn>
|
||||
<VBtn>Reviews</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Support -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard class="text-center">
|
||||
<VCardText class="d-flex flex-column justify-center align-center">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="50"
|
||||
class="mb-4"
|
||||
>
|
||||
<VIcon
|
||||
size="2rem"
|
||||
icon="ri-question-line"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<h6 class="text-h6">
|
||||
Support
|
||||
</h6>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p>
|
||||
According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VBtn>Contact Now</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-center {
|
||||
position: absolute;
|
||||
border: 3px solid rgb(var(--v-theme-surface));
|
||||
inset-block-start: -2rem;
|
||||
inset-inline-start: 1rem;
|
||||
}
|
||||
|
||||
// membership pricing
|
||||
.member-pricing-bg {
|
||||
position: relative;
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
}
|
||||
|
||||
.membership-pricing {
|
||||
sup {
|
||||
inset-block-start: 9px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
resources/js/views/pages/cards/card-basic/CardNavigation.vue
Normal file
94
resources/js/views/pages/cards/card-basic/CardNavigation.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
const navigationTab = ref('ITEM ONE')
|
||||
const navigationTab2 = ref('ITEM ONE')
|
||||
|
||||
const tabItems = [
|
||||
'ITEM ONE',
|
||||
'ITEM TWO',
|
||||
'ITEM THREE',
|
||||
]
|
||||
|
||||
const tabContent = 'Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards...'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VTabs v-model="navigationTab">
|
||||
<VTab
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
{{ item }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<!-- tabs content -->
|
||||
<VWindow v-model="navigationTab">
|
||||
<VWindowItem
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Navigation Card</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
{{ tabContent }}
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VBtn>Learn More</VBtn>
|
||||
</VCardText>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VTabs
|
||||
v-model="navigationTab2"
|
||||
align-tabs="center"
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
{{ item }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<!-- tabs content -->
|
||||
<VWindow v-model="navigationTab2">
|
||||
<VWindowItem
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
class="text-center"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Navigation Card</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>{{ tabContent }}</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VBtn>Learn More</VBtn>
|
||||
</VCardText>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
97
resources/js/views/pages/cards/card-basic/CardSolid.vue
Normal file
97
resources/js/views/pages/cards/card-basic/CardSolid.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const solidCardData = [
|
||||
{
|
||||
cardBg: '#16B1FF',
|
||||
title: 'Twitter Card',
|
||||
icon: 'ri-twitter-line',
|
||||
text: '"Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."',
|
||||
avatarImg: avatar4,
|
||||
avatarName: 'Mary Vaughn',
|
||||
likes: '1.2k',
|
||||
share: '80',
|
||||
},
|
||||
{
|
||||
cardBg: '#3B5998',
|
||||
title: 'Facebook Card',
|
||||
icon: 'ri-facebook-circle-line',
|
||||
text: 'You\'ve read about the importance of being courageous, rebellious and imaginative. These are all vital ingredients.',
|
||||
avatarImg: avatar1,
|
||||
avatarName: 'Eugene Clarke',
|
||||
likes: '3.2k',
|
||||
share: '49',
|
||||
},
|
||||
{
|
||||
cardBg: '#007BB6',
|
||||
title: 'LinkedIn Card',
|
||||
icon: 'ri-linkedin-box-line',
|
||||
text: 'With the Internet spreading like wildfire and reaching every part of our daily life, more and more traffic is directed.',
|
||||
avatarImg: avatar8,
|
||||
avatarName: 'Anne Burke1',
|
||||
likes: '1.2k',
|
||||
share: '80',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="data in solidCardData"
|
||||
:key="data.icon"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard :color="data.cardBg">
|
||||
<VCardItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
size="1.9rem"
|
||||
color="white"
|
||||
:icon="data.icon"
|
||||
/>
|
||||
</template>
|
||||
<VCardTitle class="text-white">
|
||||
{{ data.title }}
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<p class="clamp-text text-white mb-0">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-space-between align-center flex-wrap">
|
||||
<div class="text-no-wrap">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:image="data.avatarImg"
|
||||
/>
|
||||
<span class="text-white ms-2">{{ data.avatarName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<IconBtn
|
||||
icon="ri-heart-fill"
|
||||
color="white"
|
||||
class="me-1"
|
||||
/>
|
||||
<span class="text-body-2 text-white me-4">{{ data.likes }}</span>
|
||||
|
||||
<IconBtn
|
||||
icon="ri-share-line"
|
||||
color="white"
|
||||
class="me-1"
|
||||
/>
|
||||
<span class="text-body-2 text-white">{{ data.share }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
const logisticData = ref([
|
||||
{
|
||||
icon: 'ri-car-line',
|
||||
color: 'primary',
|
||||
title: 'On route vehicles',
|
||||
value: 42,
|
||||
change: 18.2,
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
icon: 'ri-alert-line',
|
||||
color: 'warning',
|
||||
title: 'Vehicles with errors',
|
||||
value: 8,
|
||||
change: -8.7,
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
icon: 'ri-stackshare-line',
|
||||
color: 'error',
|
||||
title: 'Deviated from route',
|
||||
value: 27,
|
||||
change: 4.3,
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
icon: 'ri-timer-line',
|
||||
color: 'info',
|
||||
title: 'Late vehicles',
|
||||
value: 13,
|
||||
change: -2.5,
|
||||
isHover: false,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="(data, index) in logisticData"
|
||||
:key="index"
|
||||
cols="12"
|
||||
md="3"
|
||||
sm="6"
|
||||
>
|
||||
<div>
|
||||
<VCard
|
||||
class="logistics-card-statistics cursor-pointer"
|
||||
:style="data.isHover ? `border-block-end-color: rgb(var(--v-theme-${data.color}))` : `border-block-end-color: rgba(var(--v-theme-${data.color}),0.7)`"
|
||||
@mouseenter="data.isHover = true"
|
||||
@mouseleave="data.isHover = false"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-4 mb-2">
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
:color="data.color"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
:icon="data.icon"
|
||||
size="24"
|
||||
/>
|
||||
</VAvatar>
|
||||
<h4 class="text-h4">
|
||||
{{ data.value }}
|
||||
</h4>
|
||||
</div>
|
||||
<h6 class="text-h6 font-weight-regular">
|
||||
{{ data.title }}
|
||||
</h6>
|
||||
<div class="d-flex align-center">
|
||||
<div class="text-body-1 font-weight-medium me-2">
|
||||
{{ data.change }}%
|
||||
</div>
|
||||
<span class="text-sm text-disabled">than last week</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@core-scss/base/mixins" as mixins;
|
||||
|
||||
.logistics-card-statistics {
|
||||
border-block-end-style: solid;
|
||||
border-block-end-width: 2px;
|
||||
|
||||
&:hover {
|
||||
border-block-end-width: 3px;
|
||||
margin-block-end: -1px;
|
||||
|
||||
@include mixins.elevation(10);
|
||||
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.skin--bordered{
|
||||
.logistics-card-statistics {
|
||||
&:hover {
|
||||
margin-block-end: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const series = [{
|
||||
name: '2020',
|
||||
data: [
|
||||
45,
|
||||
85,
|
||||
65,
|
||||
50,
|
||||
70,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const backgroundColor = currentTheme.value['track-bg']
|
||||
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -10,
|
||||
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 },
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
2,856
|
||||
</h4>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="110"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Sessions
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,139 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [
|
||||
180,
|
||||
120,
|
||||
284,
|
||||
180,
|
||||
102,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [
|
||||
-100,
|
||||
-130,
|
||||
-100,
|
||||
-60,
|
||||
-120,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -10,
|
||||
left: -15,
|
||||
right: 0,
|
||||
bottom: 5,
|
||||
},
|
||||
yaxis: { lines: { show: false } },
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
],
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value['on-background'],
|
||||
currentTheme.value.error,
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '25%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
stroke: { lineCap: 'round' },
|
||||
tooltip: { enabled: false },
|
||||
responsive: [{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: { height: 200 },
|
||||
grid: {
|
||||
padding: {
|
||||
top: -12,
|
||||
left: -15,
|
||||
right: 0,
|
||||
bottom: -10,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '20%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
},
|
||||
}],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
4,350
|
||||
</h4>
|
||||
<VueApexCharts
|
||||
id="sessions-chart"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="110"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Sessions
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#sessions-chart {
|
||||
.apexcharts-series {
|
||||
&[seriesName="Earning"] {
|
||||
transform: scaleY(0.965);
|
||||
}
|
||||
|
||||
&[seriesName="Expense"] {
|
||||
transform: scaleY(1.035);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,90 @@
|
||||
<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="110"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Total Profit
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<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',
|
||||
offsetX: -8,
|
||||
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,68 @@
|
||||
<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.25rem',
|
||||
fontWeight: '500',
|
||||
offsetY: 0,
|
||||
color: `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['high-emphasis-opacity'] })`,
|
||||
},
|
||||
},
|
||||
track: { background: currentTheme['track-bg'] },
|
||||
},
|
||||
},
|
||||
stroke: { lineCap: 'round' },
|
||||
}
|
||||
})
|
||||
</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>
|
||||
|
||||
<style lang="scss">
|
||||
#stats-radial-bar-chart {
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-text {
|
||||
&.apexcharts-datalabel-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
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 },
|
||||
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.15rem',
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: 500,
|
||||
offsetY: -18,
|
||||
color: primaryTextColor,
|
||||
formatter: o => `${ Number.parseInt(o) }%`,
|
||||
},
|
||||
name: {
|
||||
offsetY: 18,
|
||||
fontFamily: 'Inter',
|
||||
},
|
||||
total: {
|
||||
label: '1 Quarter',
|
||||
show: true,
|
||||
color: secondaryTextColor,
|
||||
fontSize: '0.75rem',
|
||||
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 flex-wrap">
|
||||
<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="120"
|
||||
:series="[45, 10, 18, 27]"
|
||||
:width="110"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,71 @@
|
||||
<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>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in statistics"
|
||||
:key="item.title"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
:color="item.color"
|
||||
rounded
|
||||
size="40"
|
||||
class="elevation-2 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>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.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-4">
|
||||
<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 mb-2">
|
||||
6 team members in a project
|
||||
</p>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar1"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar8"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar6"
|
||||
/>
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="40"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,230 @@
|
||||
<script setup>
|
||||
import {
|
||||
useDisplay,
|
||||
useTheme,
|
||||
} from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const { thresholds } = useDisplay()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetY: -25,
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
columnWidth: '35%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
xaxis: { lines: { show: false } },
|
||||
borderColor,
|
||||
strokeDashArray: 10,
|
||||
padding: {
|
||||
left: -15,
|
||||
right: -5,
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 6,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
colors: [
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.secondary,
|
||||
currentTheme.value.warning,
|
||||
],
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: thresholds.value.lg,
|
||||
options: { plotOptions: { bar: { columnWidth: '40%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: thresholds.value.md,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '55%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: thresholds.value.sm,
|
||||
options: { plotOptions: { bar: { columnWidth: '35%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 460,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 400,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Product A',
|
||||
data: [
|
||||
16000,
|
||||
12000,
|
||||
16000,
|
||||
18000,
|
||||
15000,
|
||||
35000,
|
||||
16000,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Product B',
|
||||
data: [
|
||||
10000,
|
||||
12000,
|
||||
10000,
|
||||
0,
|
||||
10000,
|
||||
10000,
|
||||
10000,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Product C',
|
||||
data: [
|
||||
0,
|
||||
15000,
|
||||
0,
|
||||
0,
|
||||
12000,
|
||||
0,
|
||||
10000,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const analytics = [
|
||||
{
|
||||
title: 'Revenue',
|
||||
amount: '$845k',
|
||||
percentage: '82%',
|
||||
profit: true,
|
||||
},
|
||||
{
|
||||
title: 'Transactions',
|
||||
amount: '$12.5k',
|
||||
percentage: '52%',
|
||||
profit: false,
|
||||
},
|
||||
{
|
||||
title: 'Total Profit',
|
||||
amount: '$27.6k',
|
||||
percentage: '42%',
|
||||
profit: true,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Analytics</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="210"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in analytics"
|
||||
:key="item.title"
|
||||
class="d-flex align-center"
|
||||
:class="index > 0 ? 'mt-3' : ''"
|
||||
>
|
||||
<h6 class="text-h6">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<VSpacer />
|
||||
<div class="text-body-1 me-4 mb-0">
|
||||
{{ item.amount }}
|
||||
</div>
|
||||
<h6 class="text-h6 me-4">
|
||||
{{ item.percentage }}
|
||||
</h6>
|
||||
<VIcon
|
||||
:color="item.profit ? 'success' : 'error'"
|
||||
:icon="item.profit ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
|
||||
size="24"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
const chartColors = {
|
||||
donut: {
|
||||
series1: '#56ca00',
|
||||
series2: '#56ca00cc',
|
||||
series3: '#56ca0099',
|
||||
series4: '#56ca0066',
|
||||
},
|
||||
}
|
||||
|
||||
const headingColor = 'rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))'
|
||||
const labelColor = 'rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity))'
|
||||
|
||||
const deliveryExceptionsChartSeries = [
|
||||
13,
|
||||
25,
|
||||
22,
|
||||
40,
|
||||
]
|
||||
|
||||
const deliveryExceptionsChartConfig = {
|
||||
labels: [
|
||||
'Incorrect address',
|
||||
'Weather conditions',
|
||||
'Federal Holidays',
|
||||
'Damage during transit',
|
||||
],
|
||||
colors: [
|
||||
chartColors.donut.series1,
|
||||
chartColors.donut.series2,
|
||||
chartColors.donut.series3,
|
||||
chartColors.donut.series4,
|
||||
],
|
||||
stroke: { width: 0 },
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter(val) {
|
||||
return `${ Number.parseInt(val) }%`
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
offsetY: 10,
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
offsetX: -3,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 15,
|
||||
vertical: 5,
|
||||
},
|
||||
fontSize: '13px',
|
||||
fontWeight: 400,
|
||||
labels: {
|
||||
colors: headingColor,
|
||||
useSeriesColors: false,
|
||||
},
|
||||
},
|
||||
tooltip: { theme: false },
|
||||
grid: { padding: { top: 15 } },
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '26px',
|
||||
color: headingColor,
|
||||
fontWeight: 500,
|
||||
offsetY: -15,
|
||||
formatter(val) {
|
||||
return `${ Number.parseInt(val) }%`
|
||||
},
|
||||
},
|
||||
name: { offsetY: 30 },
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '1rem',
|
||||
label: 'AVG. Exceptions',
|
||||
color: labelColor,
|
||||
formatter() {
|
||||
return '30%'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 420,
|
||||
options: { chart: { height: 400 } },
|
||||
}],
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem title="Delivery exceptions">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
height="400"
|
||||
:options="deliveryExceptionsChartConfig"
|
||||
:series="deliveryExceptionsChartSeries"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -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,208 @@
|
||||
<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: 8,
|
||||
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: 6,
|
||||
columnWidth: '45%',
|
||||
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: '45%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '55%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 460,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
{
|
||||
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="240"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,162 @@
|
||||
<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 Sales',
|
||||
fontSize: '15px',
|
||||
color: secondaryTextColor,
|
||||
formatter: value => `${ value.globals.seriesTotals.reduce((total, num) => total + num) }k`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
12,
|
||||
25,
|
||||
13,
|
||||
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-4 flex-lg-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" />
|
||||
<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>{{ sale.product }}</div>
|
||||
</div>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
{{ sale.sales }}
|
||||
</h6>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetY: -30,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth',
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -40,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.7,
|
||||
opacityFrom: 0.5,
|
||||
shadeIntensity: 1,
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
],
|
||||
colorStops: [[
|
||||
{
|
||||
offset: 0,
|
||||
opacity: 0.6,
|
||||
color: currentTheme.value.primary,
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
opacity: 0.1,
|
||||
color: currentTheme.value.surface,
|
||||
},
|
||||
]],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 1,
|
||||
color: currentTheme.value.primary,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
markers: {
|
||||
size: 1,
|
||||
offsetY: 1,
|
||||
offsetX: -10,
|
||||
strokeWidth: 5,
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [{
|
||||
size: 8,
|
||||
seriesIndex: 0,
|
||||
dataPointIndex: 5,
|
||||
strokeColor: currentTheme.value.primary,
|
||||
fillColor: currentTheme.value.surface,
|
||||
}],
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
name: 'Traffic Rate',
|
||||
data: [
|
||||
35,
|
||||
180,
|
||||
100,
|
||||
300,
|
||||
220,
|
||||
400,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between">
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
Sales State
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Total $42,580 Sales
|
||||
</div>
|
||||
</div>
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="295"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,350 @@
|
||||
<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"
|
||||
>
|
||||
<VCardText>
|
||||
<h5 class="text-h5">
|
||||
Total Profit
|
||||
</h5>
|
||||
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="280"
|
||||
/>
|
||||
</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-1">
|
||||
<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,79 @@
|
||||
<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 primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
stroke: { dashArray: 5 },
|
||||
colors: ['rgba(var(--v-theme-primary),1)'],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
endAngle: 90,
|
||||
startAngle: -90,
|
||||
hollow: { size: '55%' },
|
||||
track: { background: currentTheme.value['track-bg'] },
|
||||
dataLabels: {
|
||||
name: { show: false },
|
||||
value: {
|
||||
offsetY: -5,
|
||||
fontSize: '18px',
|
||||
fontWeight: 500,
|
||||
color: primaryTextColor,
|
||||
formatter: val => {
|
||||
const num = val * 35250 / 100
|
||||
|
||||
return num > 999 ? `${ (num / 1000).toFixed(1) }k` : `${ num }`
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [80]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Profit</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
/>
|
||||
<VCardText class="text-center">
|
||||
<div class="mt-5">
|
||||
<p class="text-body-1 mb-2">
|
||||
18k new sales
|
||||
</p>
|
||||
<VChip
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
This Year
|
||||
</VChip>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,142 @@
|
||||
<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 } },
|
||||
labels: [
|
||||
'Returning',
|
||||
'New Users',
|
||||
'Referrals',
|
||||
],
|
||||
legend: { show: false },
|
||||
stroke: { lineCap: 'round' },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.warning,
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: { size: '40%' },
|
||||
track: {
|
||||
background: 'transparent',
|
||||
margin: 10,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: 28,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
value: {
|
||||
fontSize: '1.75rem',
|
||||
offsetY: -12,
|
||||
color: primaryTextColor,
|
||||
formatter(value) {
|
||||
return `${ value }k`
|
||||
},
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: `${ new Date().getFullYear() }`,
|
||||
color: secondaryTextColor,
|
||||
fontSize: '13px',
|
||||
fontWeight: 400,
|
||||
formatter(value) {
|
||||
return `${ value.globals.seriesTotals.reduce((total, num) => total + num) }k`
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
71,
|
||||
78,
|
||||
86,
|
||||
]
|
||||
|
||||
const revenueData = [
|
||||
{
|
||||
title: 'New User',
|
||||
value: 856,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Returning',
|
||||
value: 345,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Referrals',
|
||||
value: 258,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Revenue</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="243"
|
||||
/>
|
||||
|
||||
<div class="d-flex justify-space-around mt-4">
|
||||
<template
|
||||
v-for="(item, index) in revenueData"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div class="d-flex align-center">
|
||||
<VIcon
|
||||
size="10"
|
||||
:color="item.color"
|
||||
icon="ri-circle-fill"
|
||||
class="me-2"
|
||||
/>
|
||||
<h6 class="text-h6">
|
||||
{{ item.value }}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div class="text-base">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<VDivider
|
||||
v-if="index !== revenueData.length - 1"
|
||||
vertical
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -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'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
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 },
|
||||
dataLabels: { enabled: false },
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
},
|
||||
labels: { colors: secondaryTextColor },
|
||||
},
|
||||
labels: [
|
||||
'FR',
|
||||
'UK',
|
||||
'ESP',
|
||||
'USA',
|
||||
],
|
||||
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 }%`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Weekly Visits',
|
||||
fontSize: '15px',
|
||||
color: secondaryTextColor,
|
||||
formatter: value => `${ value.globals.seriesTotals.reduce((total, num) => total + num) }%`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
12,
|
||||
25,
|
||||
13,
|
||||
50,
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Visitors</VCardTitle>
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="292"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,100 @@
|
||||
<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 } },
|
||||
labels: ['Cricket'],
|
||||
stroke: { lineCap: 'round' },
|
||||
grid: { padding: { top: -10 } },
|
||||
colors: [currentTheme.value.info],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.2,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.1,
|
||||
stops: [
|
||||
0,
|
||||
90,
|
||||
],
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
endAngle: 180,
|
||||
startAngle: -180,
|
||||
inverseOrder: true,
|
||||
hollow: { size: '62%' },
|
||||
track: { background: currentTheme.value['track-bg'] },
|
||||
dataLabels: {
|
||||
name: { offsetY: 26 },
|
||||
value: {
|
||||
offsetY: -14,
|
||||
fontSize: '24px',
|
||||
fontWeight: 500,
|
||||
color: primaryTextColor,
|
||||
formatter: value => `${ value }k`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Growth',
|
||||
fontSize: '15px',
|
||||
fontWeight: 500,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [78]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Visits</VCardTitle>
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="199"
|
||||
/>
|
||||
<VCardText class="text-center pt-0">
|
||||
<div class="text-body-1 mb-2">
|
||||
42.2k new visits
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
size="small"
|
||||
>
|
||||
This year
|
||||
</VChip>
|
||||
</VCardText>
|
||||
</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-3 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>
|
||||
@@ -0,0 +1,155 @@
|
||||
<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"
|
||||
/>
|
||||
</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,238 @@
|
||||
<script setup>
|
||||
const borderColor = 'rgba(var(--v-border-color), var(--v-border-opacity))'
|
||||
|
||||
// Topics Charts config
|
||||
const topicsChartConfig = {
|
||||
chart: {
|
||||
height: 270,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '70%',
|
||||
distributed: true,
|
||||
borderRadius: 7,
|
||||
borderRadiusApplication: 'end',
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'#16B1FF',
|
||||
'#56CA00',
|
||||
'#8A8D93',
|
||||
'#FF4C51',
|
||||
'#FFB400',
|
||||
],
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 10,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
top: -35,
|
||||
bottom: -12,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'],
|
||||
fontWeight: 200,
|
||||
fontSize: '13px',
|
||||
},
|
||||
offsetX: 0,
|
||||
dropShadow: { enabled: false },
|
||||
formatter(val, opt) {
|
||||
return topicsChartConfig.labels[opt.dataPointIndex]
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
'UI Design',
|
||||
'UX Design',
|
||||
'Music',
|
||||
'Animation',
|
||||
'Vue',
|
||||
'SEO',
|
||||
],
|
||||
xaxis: {
|
||||
categories: [
|
||||
'6',
|
||||
'5',
|
||||
'4',
|
||||
'3',
|
||||
'2',
|
||||
'1',
|
||||
],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))',
|
||||
fontSize: '13px',
|
||||
},
|
||||
formatter(val) {
|
||||
return `${ val }%`
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
max: 35,
|
||||
labels: {
|
||||
style: {
|
||||
colors: 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))',
|
||||
fontSize: '13px',
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
style: { fontSize: '12px' },
|
||||
onDatasetHover: { highlightDataSeries: false },
|
||||
},
|
||||
legend: { show: false },
|
||||
}
|
||||
|
||||
const topicsChartSeries = [{
|
||||
data: [
|
||||
35,
|
||||
20,
|
||||
14,
|
||||
12,
|
||||
10,
|
||||
9,
|
||||
],
|
||||
}]
|
||||
|
||||
const topicsData = [
|
||||
{
|
||||
title: 'UI Design',
|
||||
value: 35,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'UX Design',
|
||||
value: 20,
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: 'Music',
|
||||
value: 14,
|
||||
color: 'success',
|
||||
},
|
||||
]
|
||||
|
||||
const moreTopics = [
|
||||
{
|
||||
title: 'Animation',
|
||||
value: 12,
|
||||
color: 'secondary',
|
||||
},
|
||||
{
|
||||
title: 'Vue',
|
||||
value: 10,
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
title: 'SEO',
|
||||
value: 9,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="topicCard">
|
||||
<VCardItem title="Topic you are interested in">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
height="300"
|
||||
:options="topicsChartConfig"
|
||||
:series="topicsChartSeries"
|
||||
class="mb-md-0 mb-6"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol class="d-flex justify-space-around align-center">
|
||||
<div class="d-flex flex-column gap-y-12">
|
||||
<div
|
||||
v-for="topic in topicsData"
|
||||
:key="topic.title"
|
||||
class="d-flex gap-x-2"
|
||||
>
|
||||
<VBadge
|
||||
inline
|
||||
dot
|
||||
:color="topic.color"
|
||||
class="mt-1"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="text-body-1"
|
||||
style="min-inline-size: 90px;"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ topic.value }}%
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-y-12">
|
||||
<div
|
||||
v-for="topic in moreTopics"
|
||||
:key="topic.title"
|
||||
class="d-flex gap-x-2"
|
||||
>
|
||||
<VBadge
|
||||
inline
|
||||
dot
|
||||
:color="topic.color"
|
||||
class="mt-1"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="text-body-1"
|
||||
style="min-inline-size: 90px;"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ topic.value }}%
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/libs/apex-chart.scss";
|
||||
|
||||
.topicCard{
|
||||
.v-badge.v-badge--dot{
|
||||
.v-badge__badge{
|
||||
border-radius: 6px;
|
||||
block-size: 12px;
|
||||
inline-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
resources/js/views/pages/cards/gamification/CardAward.vue
Normal file
49
resources/js/views/pages/cards/gamification/CardAward.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import trophy from '@images/misc/trophy.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="position-relative">
|
||||
<VCardText>
|
||||
<div class="mb-3">
|
||||
<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-3">
|
||||
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 .triangle-bg {
|
||||
position: absolute;
|
||||
inline-size: 10.375rem;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.v-card .trophy {
|
||||
position: absolute;
|
||||
inline-size: 5.188rem;
|
||||
inset-block-end: 1rem;
|
||||
inset-inline-end: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
import illustrationJohn2 from '@images/cards/illustration-john-2.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="overflow-visible">
|
||||
<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-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>
|
||||
49
resources/js/views/pages/cards/gamification/CardUpgrade.vue
Normal file
49
resources/js/views/pages/cards/gamification/CardUpgrade.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import poseM9 from '@images/cards/pose-m-9.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="position-relative">
|
||||
<VCardText>
|
||||
<div class="mb-3">
|
||||
<h5 class="text-h5">
|
||||
Upgrade Account <span class="text-high-emphasis">😀</span>
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Add 15 team members
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="text-h4 text-primary">
|
||||
$199
|
||||
</h4>
|
||||
<div class="text-body-1 mb-3">
|
||||
40% OFF <span class="text-high-emphasis">😍</span>
|
||||
</div>
|
||||
<VBtn size="small">
|
||||
Upgrade Plan
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- Trophy -->
|
||||
<VImg
|
||||
:src="poseM9"
|
||||
class="illustration flip-in-rtl"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card .triangle-bg {
|
||||
position: absolute;
|
||||
inline-size: 10.375rem;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.v-card .illustration {
|
||||
position: absolute;
|
||||
inline-size: 3rem;
|
||||
inset-block-end: 1rem;
|
||||
inset-inline-end: 3rem;
|
||||
}
|
||||
</style>
|
||||
56
resources/js/views/pages/cards/gamification/CardWelcome.vue
Normal file
56
resources/js/views/pages/cards/gamification/CardWelcome.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import illustrationJohn from '@images/cards/illustration-john.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="overflow-visible">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
<h4 class="text-h4 text-wrap">
|
||||
Welcome back <strong>John!</strong> <span class="text-high-emphasis">🥳</span>
|
||||
</h4>
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-4">
|
||||
<div class="text-body-1 me-2">
|
||||
You have 4 tasks to finish today,
|
||||
You already completed 68% <span class="text-high-emphasis">😍</span> tasks. Good job!
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
class="text-center"
|
||||
>
|
||||
<img
|
||||
:src="illustrationJohn"
|
||||
class="john-illustration"
|
||||
:height="$vuetify.display.xs ? '165' : '200'"
|
||||
:class="$vuetify.display.xs ? 'position-relative' : 'position-absolute'"
|
||||
>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.john-illustration {
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.john-illustration {
|
||||
inset-block-end: -0.375rem;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user