first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<v-card elevation="0" rounded="md" class="bg-lightinfo mt-6">
|
||||
<v-card-item class="py-0">
|
||||
<v-row class="d-flex align-center">
|
||||
<v-col cols="12" sm="7">
|
||||
<h5 class="text-h5 pt-3 mb-4">Track your every Transaction Easily</h5>
|
||||
<p class="topacity-80 mb-1 textSecondary text-body-1 lh-md">Track and record your every income and expence easily to control your balance</p>
|
||||
<v-btn flat color="info" class="mt-4" size="large">Download</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="5">
|
||||
<div class="px-11 pt-5 pb-0">
|
||||
<img src="@/assets/images/backgrounds/track-bg.png" height="215" class="mb-n10 ml-sm-5" alt="image"/>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<v-card elevation="10" class=" mt-6">
|
||||
<v-card-item class="text-center">
|
||||
<img src="@/assets/images/backgrounds/maintenance.svg" width="200" alt="image" />
|
||||
<h5 class="text-h5 pt-3 mb-0">Oops something went wrong!</h5>
|
||||
<p class="text-body-1 mt-3 textSecondary">
|
||||
Trying again to bypasses these<br> temporary error.
|
||||
</p>
|
||||
<v-btn flat class="mt-4" size="large" color="error">Retry</v-btn>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<v-card elevation="10" class=" mt-6">
|
||||
<v-card-item class="text-center">
|
||||
<img src="@/assets/images/products/empty-shopping-cart.svg" alt="image" width="200" />
|
||||
<h5 class="text-h5 pt-3 mb-0">Oop, Your cart is empty!</h5>
|
||||
<p class="text-body-1 mt-3 textSecondary">
|
||||
Get back to shopping and get rewards from it.
|
||||
</p>
|
||||
<v-btn flat class="mt-4" size="large" color="primary">Go for shopping</v-btn>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<v-card elevation="10" class=" mt-sm-0 mt-6">
|
||||
<v-card-item class="text-center">
|
||||
<p class="text-body-1 mb-4 textSecondary">LEVEL UP</p>
|
||||
<img src="@/assets/images/backgrounds/gold.png" alt="image" width="150" />
|
||||
<h5 class="text-h5 pt-3 mb-0">You reach all Notifications</h5>
|
||||
<p class="text-body-1 mt-3 textSecondary">
|
||||
Congratulations,<br> Tap to continue next task.
|
||||
</p>
|
||||
<v-btn flat color="primary" class="mt-4" size="large">Yes, Got it!</v-btn>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<v-card elevation="10" class=" mt-6">
|
||||
<v-card-item class="text-center">
|
||||
<h5 class="text-h5 mb-6">Mutual Friend Revealed</h5>
|
||||
<v-badge content="1" color="error"
|
||||
offset-x="18"
|
||||
offset-y="18"
|
||||
>
|
||||
<v-avatar size="140">
|
||||
<img src="@/assets/images/profile/user-3.jpg" height="140" alt="image" />
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
|
||||
<h5 class="text-h5 pt-3 mt-3 mb-0">Tommoie Henderson</h5>
|
||||
<p class="text-body-1 mt-3 textSecondary">
|
||||
Accept the request and<br> type a message
|
||||
</p>
|
||||
<div class="d-flex justify-center gap-3 mt-4">
|
||||
<v-btn flat color="primary" size="large">accept</v-btn>
|
||||
<v-btn flat variant="tonal" size="large" color="error">remove</v-btn>
|
||||
</div>
|
||||
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="bg-primary-gt position-relative profit-card overflow-hidden">
|
||||
<v-card-item>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<h5 class="text-h5 text-white mb-4">Welcome back David!</h5>
|
||||
<p class="opacity-80 mb-1 text-white text-body-1 lh-md">You have earned 54% more than last month which is great thing.</p>
|
||||
<v-btn flat color="error" size="large" class="mt-4">check</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
<img src="@/assets/images/backgrounds/welcome-bg2.png" alt="matdash-img" class="position-absolute" />
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { blogCard } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" sm="4" v-for="card in blogCard" :key="card.title">
|
||||
<v-card elevation="10" rounded="md" class="card-hover">
|
||||
<div>
|
||||
<v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
|
||||
<v-card-item
|
||||
><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
|
||||
></v-card-item>
|
||||
</v-img>
|
||||
<v-avatar size="40" class="mt-n7 mx-6">
|
||||
<img :src="card.avatar" alt="icon" height="40" />
|
||||
</v-avatar>
|
||||
<v-card-item class="pt-4">
|
||||
<v-chip class="text-body-2 font-weight-medium bg-light" size="small" rounded="sm" v-text="card.category"></v-chip>
|
||||
<h5 class="text-h5 text-13 my-6 custom-text-primary">
|
||||
<RouterLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</RouterLink>
|
||||
</h5>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<v-avatar class="" size="18">
|
||||
<EyeIcon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 textSecondary" v-text="card.view"></span>
|
||||
<v-avatar class="ml-4" size="18">
|
||||
<Message2Icon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 textSecondary" v-text="card.comments"></span>
|
||||
</div>
|
||||
<div>
|
||||
<v-avatar size="10">
|
||||
<CircleIcon size="10" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-2 ml-2 textSecondary" v-text="card.time"></span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import {followerCard} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row class="pt-3">
|
||||
<v-col cols="12" md="4" v-for="card in followerCard" :key="card.title">
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="40" >
|
||||
<img :src="card.avatar" :alt="card.avatar" width="40"/>
|
||||
</v-avatar>
|
||||
<div class="pl-4 mt-n1">
|
||||
<h5 class="text-h5" v-text="card.title"></h5>
|
||||
<p class="text-body-1 textSecondary d-flex align-center"><MapPinIcon size="15" class="mr-1"/>{{card.location}}</p>
|
||||
</div>
|
||||
<v-btn class="ml-auto" color="primary" flat>Follow</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import img1 from '@/assets/images/products/s1.jpg';
|
||||
import img2 from '@/assets/images/products/s2.jpg';
|
||||
/*import tabler icons*/
|
||||
import { GiftIcon } from 'vue-tabler-icons';
|
||||
const gift = [
|
||||
{
|
||||
title: 'Andrew Grant',
|
||||
avatar: img1
|
||||
},
|
||||
{
|
||||
title: 'Leo Pratt',
|
||||
avatar: img2
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6" v-for="card in gift" :key="card.title">
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<h5 class="text-h6" v-text="card.title"></h5>
|
||||
<v-btn size="30" icon variant="flat" class="mx-1">
|
||||
<v-avatar size="25" >
|
||||
<GiftIcon class="text-secondary" size="20" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-avatar rounded="lg" class="w-100 mt-2 mb-6" size="160" cla>
|
||||
<img :src="card.avatar" :alt="card.avatar" class="w-100"/>
|
||||
</v-avatar>
|
||||
<v-btn color="primary" block flat>Gift to Friend ($50.00)</v-btn>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import {musicCard} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" v-for="card in musicCard" :key="card.title">
|
||||
<v-card elevation="10" class="overflow-visible">
|
||||
<v-row class="mt-md-0 mt-sm-3 mt-3">
|
||||
<v-col cols="6" sm="6">
|
||||
<v-card-item class="pb-3">
|
||||
<h5 class="text-h5" v-text="card.title"></h5>
|
||||
<div class="text-body-1 textSecondary mt-1" v-text="card.subheader"></div>
|
||||
<div class="d-flex align-center justify-center mt-8 ">
|
||||
<v-btn size="20" icon variant="flat" class="grey100">
|
||||
<v-avatar size="20">
|
||||
<PlayerSkipBackIcon size="15" color="grey100" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
<v-btn size="20" icon variant="flat" class="mx-6 text-error">
|
||||
<v-avatar size="20">
|
||||
<PlayerPlayIcon size="15" class="text-error" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
<v-btn size="20" icon variant="flat" class="grey100">
|
||||
<v-avatar size="20">
|
||||
<PlayerSkipForwardIcon size="15" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="py-0 pl-0">
|
||||
<img :src="card.img" class="rounded-e-md w-100 h-100 obj-cover"></img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { paymentGateways } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Payment Gateways</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 ">Platform For Income</v-card-subtitle>
|
||||
<div class="mt-sm-10 mt-5">
|
||||
<div class="d-flex gap-3 align-center mt-6" v-for="list in paymentGateways" :key="list.title">
|
||||
<v-avatar :class="'rounded-md bg-light' + list.bgcolor" size="45">
|
||||
<img :src="list.img" :alt="list.img" width="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h5 class="text-h6 mb-1">{{ list.title }}</h5>
|
||||
<p class="text-subtitle-1 textSecondary">{{ list.subtitle }}</p>
|
||||
</div>
|
||||
<div :class="'ml-auto font-weight-semibold text-subtitle-1 text-medium-' + list.disable">{{ list.rank }}</div>
|
||||
</div>
|
||||
<v-btn class="mt-10" block flat color="primary">View all transactions</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { productsCard } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="3" sm="6" v-for="card in productsCard" :key="card.title">
|
||||
<v-card elevation="10" rounded="md" class="card-hover overflow-hidden">
|
||||
<RouterLink :to="card.link" >
|
||||
<v-img :src="card.photo" height="100%" class="rounded-t-md"></v-img>
|
||||
</RouterLink>
|
||||
<div class="d-flex justify-end mr-3 mt-n4">
|
||||
<v-btn size="30" icon variant="flat" class="bg-primary d-flex">
|
||||
<v-avatar size="30" class="text-white">
|
||||
<BasketIcon size="17" />
|
||||
</v-avatar>
|
||||
<v-tooltip
|
||||
activator="parent"
|
||||
location="bottom"
|
||||
>Add To Cart
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-card-item class="pa-6 pt-1">
|
||||
<h6 class="text-h6" v-text="card.title"></h6>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<div>
|
||||
<span class="text-h6" v-text="'$'+ card.price"></span>
|
||||
<span class="text-body-1 ml-2 text-medium-emphasis text-decoration-line-through" v-text="'$'+ card.salesPrice"></span>
|
||||
</div>
|
||||
<v-rating density="compact" color="warning" size="small" v-model="card.rating" readonly></v-rating>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import {profileCards, socialiconCard} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" v-for="card in profileCards" :key="card.title">
|
||||
<v-card elevation="10" class=" text-center" rounded="md">
|
||||
<v-card-item>
|
||||
<v-avatar size="80">
|
||||
<img :src="card.avatar" :alt="card.avatar" width="80"/>
|
||||
</v-avatar>
|
||||
<div class="mt-4">
|
||||
<h5 class="text-h5" v-text="card.title"></h5>
|
||||
<p class="text-body-2 mt-1 textSecondary " v-text="card.subtitle"></p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<v-divider class="mt-1"></v-divider>
|
||||
<div class="text-center d-flex justify-center pa-3">
|
||||
<v-btn size="30" icon variant="flat" v-for="icon in socialiconCard" :key="icon.name">
|
||||
<v-avatar size="22">
|
||||
<component :is="icon.icon" :class="'text-'+ icon.color" stroke-width="2" size="18" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
/*import tabler icons*/
|
||||
import { VolumeIcon,MessageIcon } from 'vue-tabler-icons';
|
||||
const slider = ref(50);
|
||||
const model = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Settings</v-card-title>
|
||||
<div class="d-flex mt-5">
|
||||
<v-avatar class="rounded-md bg-primary" size="48">
|
||||
<VolumeIcon size="22" />
|
||||
</v-avatar>
|
||||
<div class="pl-4 w-100">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<h6 class="text-h6">Sound</h6>
|
||||
<p class="text-subtitle-1 textSecondary">45%</p>
|
||||
</div>
|
||||
<v-slider v-model="slider" hide-details class="ml-0" color="primary"></v-slider>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider class="mt-4"></v-divider>
|
||||
<div class="d-flex mt-4">
|
||||
<v-avatar class="rounded-md bg-secondary" size="48">
|
||||
<MessageIcon size="22" class="text-surface"/>
|
||||
</v-avatar>
|
||||
<div class="pl-4 w-100 d-flex align-center">
|
||||
<div class="">
|
||||
<h6 class="text-h6 mb-1">Chat</h6>
|
||||
<p class="text-subtitle-1 textSecondary">Turn on chat during call</p>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<v-switch v-model="model" hide-details color="primary" inset ></v-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider class="mt-4"></v-divider>
|
||||
<div class="d-flex justify-end mt-4 gap-3">
|
||||
<v-btn color="error" variant="tonal">Cancel</v-btn>
|
||||
<v-btn color="primary">save</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import {upcommingCards} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item class="pb-sm-8 pb-6">
|
||||
<v-card-title class="text-h5">Upcoming Activity</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 ">In New year</v-card-subtitle>
|
||||
<div class="">
|
||||
<div class="d-flex align-center mt-6" v-for="list in upcommingCards" :key="list.title">
|
||||
<v-avatar :class="'rounded-md bg-light'+ list.bgcolor" size="45">
|
||||
<component :is="list.icon" :class="'text-'+ list.bgcolor" stroke-width="2" size="20" />
|
||||
</v-avatar>
|
||||
<div class="pl-4 ">
|
||||
<h5 class="text-h6 mb-1" v-text="list.title"></h5>
|
||||
<p class="text-subtitle-1 textSecondary" v-text="list.subtitle"></p>
|
||||
</div>
|
||||
<div class="ml-auto font-weight-medium text-subtitle-1 textSecondary" v-text="list.rank"></div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { userCards } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3" sm="6" v-for="card in userCards" :key="card.title">
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<v-avatar size="80" >
|
||||
<img :src="card.avatar" :alt="card.avatar" width="80"/>
|
||||
</v-avatar>
|
||||
<div class="mt-6">
|
||||
<h5 class="text-h5 mb-2" v-text="card.title"></h5>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div class="ml-2 d-flex ">
|
||||
<v-avatar size="32" class="ml-n2 avtar-border" v-for="user in card.userGroup" :key="user.icon">
|
||||
<img :src="user.icon" alt="avatar" height="32"/>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<p class="text-subtitle-1 textSecondary">{{card.subtitle}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<v-btn color="primary" variant="tonal" block >Add friend</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" class="mt-3" block >Remove</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,267 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
/* Chart Color */
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
const lightprimary = theme.current.value.colors.lightprimary;
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
/* Chart 1 */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 200,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [primary, primary],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '20%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: '',
|
||||
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
|
||||
}
|
||||
];
|
||||
|
||||
/* Chart 2 */
|
||||
const chartOptions2 = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 200,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [secondary, secondary],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '20%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart2 = [
|
||||
{
|
||||
name: '',
|
||||
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
|
||||
}
|
||||
];
|
||||
|
||||
/* Chart 3 */
|
||||
const chartOptions3 = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 180,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
labels: ['Income', 'Current', 'Expance'],
|
||||
colors: [primary, 'rgba(var(--v-theme-light))', secondary],
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
donut: {
|
||||
size: '89%',
|
||||
background: 'transparent',
|
||||
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
offsetY: 7
|
||||
},
|
||||
value: {
|
||||
show: false
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
label: '$98,260'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fillSeriesColor: false,
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart3 = [55,55,55];
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Current Value</v-card-title>
|
||||
<div class="">
|
||||
<v-btn color="primary" flat>buy</v-btn>
|
||||
<v-btn color="primary" variant="outlined" flat class="ml-2">sell</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<v-row class="mt-4 mb-1">
|
||||
<!--Income Chart-->
|
||||
<v-col cols="12" sm="4">
|
||||
<v-card variant="outlined" >
|
||||
<v-card-item>
|
||||
<apexchart type="bar" height="200" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
<v-card-subtitle class="text-subtitle-1">Income</v-card-subtitle>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<h4 class="text-h4">$25,260</h4>
|
||||
<p class="text-body-1 text-success">+1.25%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!--Expence Chart-->
|
||||
<v-col cols="12" sm="4">
|
||||
<v-card variant="outlined" >
|
||||
<v-card-item>
|
||||
<apexchart type="bar" height="200" :options="chartOptions2" :series="Chart2"> </apexchart>
|
||||
<v-card-subtitle class="text-subtitle-1">Expance</v-card-subtitle>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<h4 class="text-h4">$12,260</h4>
|
||||
<p class="text-body-1 text-success">+4.25%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!--Current Year Chart-->
|
||||
<v-col cols="12" sm="4">
|
||||
<v-card variant="outlined" >
|
||||
<v-card-item>
|
||||
<apexchart class="mb-5" type="donut" height="180" :options="chartOptions3" :series="Chart3"> </apexchart>
|
||||
<v-card-subtitle class="text-subtitle-1">Current Year</v-card-subtitle>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<h4 class="text-h4">$98,260</h4>
|
||||
<p class="text-subtitle-1 text-success">+2.5%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
/*Chart*/
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 80,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors: [getSecondary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 0.05
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: '',
|
||||
data: [30, 25, 35, 20, 30, 40]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<p class="text-subtitle-1 textSecondary">Customers</p>
|
||||
<h4 class="text-h4 my-2">36,358</h4>
|
||||
<div>
|
||||
<v-avatar class="bg-lighterror" size="20">
|
||||
<ArrowDownRightIcon size="15" class="text-error" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1 ml-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart class="" type="area" height="80" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 90,
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#adb0bb',
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [primary],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: true
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [0, 3, 1, 2, 8, 1, 5, 1]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-flex justify-space-between align-end">
|
||||
<div>
|
||||
<v-card-title class="text-h5">2,545 </v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 pb-0">Earned</v-card-subtitle>
|
||||
</div>
|
||||
<p class="text-subtitle-1 text-success">+1.20%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart class="mt-3" type="area" height="90" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors: [primary],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name:'',
|
||||
data: [0, 150, 110, 240, 200, 200, 300, 200],
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="overflow-hidden">
|
||||
<v-card-item>
|
||||
<div class="d-flex justify-space-between align-end">
|
||||
<div>
|
||||
<v-card-title class="text-h5">2,545</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 pb-0">Followers</v-card-subtitle>
|
||||
</div>
|
||||
<p class="text-subtitle-1 text-success">+1.20%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart class="mt-4" type="area" height="88" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { getPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 80,
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#a1aab2',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors: [getPrimary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
color: [getPrimary.value],
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.5,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [25, 66, 20, 40, 12, 58, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item class="">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Monthly Earnings</v-card-title>
|
||||
<v-avatar class="rounded-md bg-lightprimary text-primary">
|
||||
<img src="@/assets/images/svgs/icon-master-card-2.svg" alt="ico" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
<div class="mb-8 d-flex align-center mt-5">
|
||||
<h3 class="text-h3 font-weight-bold">$6,820</h3>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar class="bg-lightsuccess text-success ml-2" size="20">
|
||||
<ArrowUpLeftIcon size="18" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<div class="pt-2">
|
||||
<apexchart type="area" height="80" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const select = ref('March 2022');
|
||||
const items = ref(['March 2022', 'April 2022', 'May 2022']);
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
height: 265,
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true
|
||||
},
|
||||
colors: [primary, secondary],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: [6],
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '40%',
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['01', '02', '03', '04', '05', '06'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fillSeriesColor: false,
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: 'San Francisco',
|
||||
data: [44, 55, 41, 67, 22, 43]
|
||||
},
|
||||
{
|
||||
name: 'Diego',
|
||||
data: [13, 23, 20, 8, 13, 27]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5 mb-0">Most Visited</v-card-title>
|
||||
<div class="my-sm-0 my-2">
|
||||
<v-select
|
||||
v-model="select"
|
||||
:items="items"
|
||||
class="text-body-1"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details
|
||||
></v-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n3 mt-5">
|
||||
<apexchart type="bar" height="265" class="rounded-bars" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center pb-1 justify-center">
|
||||
<p class="text-body-1 textSecondary d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="primary"></v-icon> San Francisco
|
||||
</p>
|
||||
<p class="text-body-1 textSecondary pl-5 d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="secondary"></v-icon> Diego
|
||||
</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import { ArrowDownRightIcon } from 'vue-tabler-icons';
|
||||
const theme = useTheme();
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
const lightsecondary = theme.current.value.colors.lightsecondary;
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
height: 100,
|
||||
type: 'bar',
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [lightsecondary, lightsecondary, secondary, lightsecondary, lightsecondary],
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 3,
|
||||
columnWidth: '64%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [20, 15, 30, 25, 10]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Page Impressions</v-card-title>
|
||||
<v-row>
|
||||
<v-col cols="5">
|
||||
<h4 class="text-h4 mt-6">$456,120</h4>
|
||||
<p class="text-12 textSecondary">(Change Yesterday)</p>
|
||||
<div class="pt-2">
|
||||
<v-avatar class="bg-lighterror" size="20">
|
||||
<ArrowDownRightIcon size="15" class="text-error" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1 ms-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<apexchart class="" type="bar" height="100" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
height: 80,
|
||||
type: 'bar',
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [getPrimary.value],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 3,
|
||||
columnWidth: '40%',
|
||||
distributed: true,
|
||||
endingShape: 'all',
|
||||
borderRadiusApplication: 'end'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2.5,
|
||||
colors: ['rgba(0,0,0,0.01)']
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: '',
|
||||
data: [4, 10, 9, 7, 9, 10]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<p class="text-subtitle-1 textSecondary">Projects</p>
|
||||
<h4 class="text-h4 my-1">78,298</h4>
|
||||
<div>
|
||||
<v-avatar class="bg-lightsuccess" size="20">
|
||||
<ArrowUpLeftIcon size="15" class="text-success" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1 ms-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
<apexchart class="" type="bar" height="80" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
const select = ref('March 2022');
|
||||
const items = ref(['March 2022', 'April 2022', 'May 2022']);
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
height: 320,
|
||||
type: 'bar',
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true
|
||||
},
|
||||
colors: [getPrimary.value, getSecondary.value],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '20%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const seriescolumnchart = [
|
||||
{
|
||||
name: '',
|
||||
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
data: [-2.8, -1.1, -3.2, -1.5, -1.9, -2.8]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Revenue Updates</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 textSecondary">Overview of Profit</v-card-subtitle>
|
||||
<div class="d-flex align-center mt-6">
|
||||
<p class="text-body-1 textSecondary d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="primary"></v-icon> Footware
|
||||
</p>
|
||||
<p class="text-body-1 textSecondary pl-5 d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="secondary"></v-icon> Fashionware
|
||||
</p>
|
||||
</div>
|
||||
<div class="mx-n4">
|
||||
<apexchart class="pt-1 revenuechart" type="bar" height="320" :options="chartOptions" :series="seriescolumnchart">
|
||||
</apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style type="text/css">
|
||||
.revenuechart .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
|
||||
clip-path: inset(0 0 5% 0 round 20px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getSecondary, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
labels: ['Profit', 'Revenue', 'Expance'],
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'donut',
|
||||
foreColor: '#adb0bb',
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [getPrimary.value, getLightPrimary.value, getSecondary.value],
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '89%',
|
||||
background: 'transparent',
|
||||
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
offsetY: 7
|
||||
},
|
||||
value: {
|
||||
show: false
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
label: '$500,458'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fillSeriesColor: false,
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const seriescolumnchart = [55, 55, 55];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Sales Overview</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 textSecondary">Every month</v-card-subtitle>
|
||||
<apexchart class="mt-6" type="donut" height="240" :options="chartOptions" :series="seriescolumnchart"> </apexchart>
|
||||
<v-row class="mt-5">
|
||||
<v-col cols="6">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-lightprimary text-primary">
|
||||
<GridDotsIcon size="22" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h3 class="text-h6">$23,450</h3>
|
||||
<p class="text-body-1 textSecondary">Profit</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" class="d-flex justify-lg-start justify-end">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-lightsecondary text-secondary">
|
||||
<GridDotsIcon size="22" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h3 class="text-h6">$23,450</h3>
|
||||
<p class="text-body-1 textSecondary">Expance</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 55,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [secondary],
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '60%',
|
||||
barHeight: '18%',
|
||||
borderRadius: 3
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2.5,
|
||||
colors: ['rgba(0,0,0,0.01)']
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const seriescolumnchart = [
|
||||
{
|
||||
name: 'projects',
|
||||
data: [4, 10, 9, 7, 9, 10, 11, 8, 10, 12, 9]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-subtitle class="text-subtitle-1">Total Earning</v-card-subtitle>
|
||||
<v-card-title class="text-h5">$78,298</v-card-title>
|
||||
<div class="mx-n1">
|
||||
<apexchart class="mt-sm-13 mt-10" type="bar" height="55" :options="chartOptions" :series="seriescolumnchart"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
const lightsecondary = theme.current.value.colors.lightsecondary;
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 80,
|
||||
fontFamily: `inherit`,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [lightsecondary, lightsecondary, secondary, lightsecondary, lightsecondary, lightsecondary],
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '50%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [20, 15, 30, 25, 10, 18, 20, 15, 12, 10]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-flex justify-space-between align-end">
|
||||
<div>
|
||||
<v-card-title class="text-h5">15,480</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 pb-0">Views</v-card-subtitle>
|
||||
</div>
|
||||
<p class="text-subtitle-1 text-error">-4.150%</p>
|
||||
</div>
|
||||
<div class="mx-n1">
|
||||
<apexchart class="mt-6" type="bar" height="80" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/ Chart /
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
labels: ['', '', ''],
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 150,
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#a1aab2',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [getPrimary.value, 'rgba(var(--v-theme-light))', '#F9F9FD'],
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
donut: {
|
||||
size: '75%',
|
||||
background: 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
chart: {
|
||||
height: 140
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: {
|
||||
height: 130
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
const Chart = [38, 40, 25];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Yearly Breakup</v-card-title>
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col cols="7" sm="7">
|
||||
<div class="mt-3">
|
||||
<h3 class="text-h3">$36,358</h3>
|
||||
<div class="mt-2 d-flex gap-2 align-center">
|
||||
<v-avatar class="bg-lightsuccess text-success" size="25">
|
||||
<ArrowUpLeftIcon size="20" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1">+9%</span>
|
||||
<span class="text-body-1 textSecondary ">last year</span>
|
||||
</div>
|
||||
<div class="d-flex align-center mt-sm-10 mt-8">
|
||||
<p class="text-body-1 textSecondary">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="primary"></v-icon> 2023
|
||||
</p>
|
||||
<p class="text-body-1 textSecondary pl-5">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="light "></v-icon> 2024
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="5" sm="5">
|
||||
<div class="d-flex align-center flex-shrink-0">
|
||||
<apexchart class="pt-6" type="donut" height="150" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { getPrimary, getLight100, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
height: 310,
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
,
|
||||
getLightPrimary.value,
|
||||
,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 3,
|
||||
columnWidth: '53%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: [['Apr'], ['May'], ['June'], ['July'], ['Aug'], ['Sept'], ['Oct']],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [20, 15, 30, 25, 10, 15, 12]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Yearly Sales</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 textSecondary">Total Sales</v-card-subtitle>
|
||||
<div class="mx-n2">
|
||||
<apexchart type="bar" height="310" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
<v-row class="mt-1">
|
||||
<v-col cols="6">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-lightprimary text-primary">
|
||||
<GridDotsIcon size="22" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="text-body-1 textSecondary">Salary</p>
|
||||
<h3 class="text-h6">$36,358</h3>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" class="d-flex justify-end">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-grey100 textSecondary">
|
||||
<GridDotsIcon size="22" class="text-medium-emphasis" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="text-body-1 textSecondary">Expance</p>
|
||||
<h3 class="text-h6">$5,296</h3>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user