first commit
This commit is contained in:
Inshal
103
resources/js/views/dashboards/crm/CrmActivityTimeline.vue
Normal file
103
resources/js/views/dashboards/crm/CrmActivityTimeline.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import pdf from '@images/icons/project-icons/pdf.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Activity Timeline">
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
side="end"
|
||||
align="start"
|
||||
line-inset="8"
|
||||
truncate-line="start"
|
||||
density="compact"
|
||||
>
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
12 Invoices have been paid
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
12 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Invoices have been paid to the company.
|
||||
</p>
|
||||
|
||||
<div class="d-inline-flex align-center timeline-chip mb-2">
|
||||
<img
|
||||
:src="pdf"
|
||||
height="20"
|
||||
class="me-3"
|
||||
alt="img"
|
||||
>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
invoice.pdf
|
||||
</h6>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="success"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Client Meeting
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
45 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Project meeting with john @10:15am
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center mb-2">
|
||||
<VAvatar
|
||||
size="32"
|
||||
:image="avatar1"
|
||||
class="me-3"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="text-body-2 font-weight-medium">
|
||||
Lester McCarthy (Client)
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
CEO of ThemeSelection
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="info"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Create a new project for client
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
2 Day Ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-0 app-timeline-text">
|
||||
6 team members in a project
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
137
resources/js/views/dashboards/crm/CrmDeveloperMeetup.vue
Normal file
137
resources/js/views/dashboards/crm/CrmDeveloperMeetup.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import cardMeetup from '@images/cards/meetup-img.png'
|
||||
|
||||
const developerMeetup = [
|
||||
{
|
||||
icon: 'ri-time-line',
|
||||
title: 'Tuesday, 24 january, 10:20 - 12:30',
|
||||
subtitle: 'After 1 week',
|
||||
},
|
||||
{
|
||||
icon: 'ri-map-pin-line',
|
||||
title: 'The Richard NYC',
|
||||
subtitle: '1305 Lexington Ave, New York',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VImg
|
||||
cover
|
||||
:height="160"
|
||||
:src="cardMeetup"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center pb-4">
|
||||
<div class="me-4">
|
||||
<VAvatar
|
||||
rounded
|
||||
size="58"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<div class="py-2">
|
||||
<div class="text-body-1 text-primary">
|
||||
Jan
|
||||
</div>
|
||||
<h5 class="text-h5 text-primary">
|
||||
24
|
||||
</h5>
|
||||
</div>
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Developer Meetup
|
||||
</h6>
|
||||
<div class="text-body-2">
|
||||
The WordPress open source,free software project is the community behind the…
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<div class="d-flex justify-space-between align-center my-4">
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-star-smile-line"
|
||||
class="mb-1"
|
||||
/>
|
||||
<div class="text-body-1">
|
||||
Interested
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-check-double-line"
|
||||
class="mb-1"
|
||||
/>
|
||||
<div class="text-body-1">
|
||||
Joined
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-group-line"
|
||||
color="primary"
|
||||
class="mb-1"
|
||||
/>
|
||||
<div class="text-body-1 text-primary">
|
||||
Invited
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="mb-1">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-more-line"
|
||||
class="mb-1"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs text-no-wrap">
|
||||
More
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider class="mb-4" />
|
||||
|
||||
<div
|
||||
v-for="(meetup, index) in developerMeetup"
|
||||
:key="meetup.icon"
|
||||
class="d-flex align-start gap-x-2"
|
||||
:class="index !== developerMeetup.length - 1 ? 'mb-2' : ''"
|
||||
>
|
||||
<VIcon
|
||||
:icon="meetup.icon"
|
||||
size="20"
|
||||
/>
|
||||
<div>
|
||||
<div>{{ meetup.title }}</div>
|
||||
<div>{{ meetup.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.text-two-line-ellipsis {
|
||||
/* stylelint-disable-next-line value-no-vendor-prefix */
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
128
resources/js/views/dashboards/crm/CrmMeetingSchedule.vue
Normal file
128
resources/js/views/dashboards/crm/CrmMeetingSchedule.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const meetingSchedules = [
|
||||
{
|
||||
profile: avatar4,
|
||||
with: 'Call with Woods',
|
||||
dateTime: '21 Jul | 08:20-10:30',
|
||||
type: 'Business',
|
||||
},
|
||||
{
|
||||
profile: avatar8,
|
||||
with: 'Call with hilda',
|
||||
dateTime: '24 Jul | 11:30-12:00',
|
||||
type: 'Meditation',
|
||||
},
|
||||
{
|
||||
profile: avatar7,
|
||||
with: 'Conference call',
|
||||
dateTime: '28 Jul | 05:00-6:45',
|
||||
type: 'Dinner',
|
||||
},
|
||||
{
|
||||
profile: avatar3,
|
||||
with: 'Meeting with Mark',
|
||||
dateTime: '03 Aug | 07:00-8:30',
|
||||
type: 'Meetup',
|
||||
},
|
||||
{
|
||||
profile: avatar2,
|
||||
with: 'Meeting in Oakland',
|
||||
dateTime: '14 Aug | 04:15-05:30',
|
||||
type: 'Dinner',
|
||||
},
|
||||
{
|
||||
profile: avatar1,
|
||||
with: 'Meeting with Carl',
|
||||
dateTime: '05 Oct | 10:00-12:45',
|
||||
type: 'Business',
|
||||
},
|
||||
]
|
||||
|
||||
const meetingTypeUiColors = {
|
||||
Business: 'primary',
|
||||
Meditation: 'success',
|
||||
Meetup: 'secondary',
|
||||
Dinner: 'error',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<!-- SECTION Card Header and Menu -->
|
||||
<VCardItem>
|
||||
<!-- 👉 Title -->
|
||||
<VCardTitle>Meeting Schedule</VCardTitle>
|
||||
|
||||
<!-- 👉 menu -->
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Meting Schedule -->
|
||||
<VCardText>
|
||||
<VList
|
||||
lines="two"
|
||||
class="card-list"
|
||||
>
|
||||
<VListItem
|
||||
v-for="meeting in meetingSchedules"
|
||||
:key="meeting.type"
|
||||
>
|
||||
<!-- 👉 Avatar -->
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
:size="38"
|
||||
:image="meeting.profile"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Title and Subtitle -->
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ meeting.with }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="me-2">
|
||||
<VIcon
|
||||
size="16"
|
||||
start
|
||||
icon="ri-calendar-line"
|
||||
/>
|
||||
{{ meeting.dateTime }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<!-- 👉 Business Types -->
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<VChip
|
||||
size="small"
|
||||
:color="meetingTypeUiColors[meeting.type]"
|
||||
>
|
||||
{{ meeting.type }}
|
||||
</VChip>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
214
resources/js/views/dashboards/crm/CrmRevenueReport.vue
Normal file
214
resources/js/views/dashboards/crm/CrmRevenueReport.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
yaxis: { lines: { show: false } },
|
||||
xaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
offsetY: 5,
|
||||
fontSize: '15px',
|
||||
markers: {
|
||||
radius: 15,
|
||||
width: 10,
|
||||
height: 10,
|
||||
},
|
||||
labels: { colors: secondaryTextColor },
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.secondary,
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: '40%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
crosshairs: { opacity: 0 },
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1380,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '60%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1080,
|
||||
options: { plotOptions: { bar: { borderRadius: 4 } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '20%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 460,
|
||||
options: { plotOptions: { bar: { columnWidth: '30%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 400,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [
|
||||
95,
|
||||
177,
|
||||
284,
|
||||
256,
|
||||
105,
|
||||
63,
|
||||
168,
|
||||
218,
|
||||
72,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [
|
||||
-145,
|
||||
-80,
|
||||
-60,
|
||||
-180,
|
||||
-100,
|
||||
-60,
|
||||
-85,
|
||||
-75,
|
||||
-100,
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Revenue Report</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="220"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.apexcharts-legend-marker{
|
||||
margin-inline-end: 0.5rem !important;
|
||||
}
|
||||
</style>
|
||||
170
resources/js/views/dashboards/crm/CrmSalesOverview.vue
Normal file
170
resources/js/views/dashboards/crm/CrmSalesOverview.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-primary), 0.7)',
|
||||
'rgba(var(--v-theme-primary), 0.5)',
|
||||
currentTheme.value['track-bg'],
|
||||
],
|
||||
stroke: { width: 0 },
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
labels: [
|
||||
'Apparel',
|
||||
'Electronics',
|
||||
'FMCG',
|
||||
'Other Sales',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
customScale: 0.9,
|
||||
donut: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 25,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '24px',
|
||||
color: primaryTextColor,
|
||||
formatter: value => `${ value }k`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Weekly Visits',
|
||||
fontSize: '15px',
|
||||
color: secondaryTextColor,
|
||||
formatter: value => `${ value.globals.seriesTotals.reduce((total, num) => total + num) }k`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
12,
|
||||
25,
|
||||
15,
|
||||
50,
|
||||
]
|
||||
|
||||
const salesOverviews = [
|
||||
{
|
||||
product: 'Apparel',
|
||||
sales: '$1,840',
|
||||
},
|
||||
{
|
||||
product: 'Electronic',
|
||||
sales: '$11,420',
|
||||
},
|
||||
{
|
||||
product: 'FMCG',
|
||||
sales: '$1,840',
|
||||
},
|
||||
{
|
||||
product: 'Other Sales',
|
||||
sales: '$11,420',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Sales Overview</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-5">
|
||||
<div class="d-flex gap-6 flex-md-row flex-column">
|
||||
<div class="mx-auto">
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="220"
|
||||
:width="220"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex align-center">
|
||||
<div class="me-3">
|
||||
<VAvatar
|
||||
rounded
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon icon="ri-wallet-line" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0">
|
||||
Number of Sales
|
||||
</p>
|
||||
<h5 class="text-h5">
|
||||
$86,400
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<VDivider class="my-6" />
|
||||
|
||||
<div>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="sale in salesOverviews"
|
||||
:key="sale.product"
|
||||
cols="6"
|
||||
>
|
||||
<div class="d-flex align-center mb-1">
|
||||
<VIcon
|
||||
icon="ri-circle-fill"
|
||||
color="primary"
|
||||
size="10"
|
||||
class="me-2"
|
||||
/>
|
||||
<div
|
||||
class="text-truncate"
|
||||
style="max-inline-size: 85px;"
|
||||
>
|
||||
{{ sale.product }}
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
{{ sale.sales }}
|
||||
</h6>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
89
resources/js/views/dashboards/crm/CrmTotalGrowthCharts.vue
Normal file
89
resources/js/views/dashboards/crm/CrmTotalGrowthCharts.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
const series = [{
|
||||
name: 'Subscribers',
|
||||
data: [
|
||||
28,
|
||||
40,
|
||||
36,
|
||||
52,
|
||||
38,
|
||||
60,
|
||||
55,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
grid: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5,
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.1,
|
||||
stops: [
|
||||
0,
|
||||
80,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
lines: { show: false },
|
||||
axisBorder: { show: false },
|
||||
labels: { show: false },
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
}],
|
||||
tooltip: { enabled: false },
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
color: currentTheme.success,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 0.65,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
42.5k
|
||||
</h4>
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="110"
|
||||
/>
|
||||
<h6 class="text-h6 text-center">
|
||||
Total Growth
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
101
resources/js/views/dashboards/crm/CrmTotalSales.vue
Normal file
101
resources/js/views/dashboards/crm/CrmTotalSales.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.2,
|
||||
opacityFrom: 1,
|
||||
shadeIntensity: 0,
|
||||
type: 'horizontal',
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
legend: { show: false },
|
||||
colors: [currentTheme.value.success],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: -10,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
],
|
||||
labels: { style: { colors: secondaryTextColor } },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
name: 'Total Sales',
|
||||
data: [
|
||||
0,
|
||||
258,
|
||||
30,
|
||||
240,
|
||||
150,
|
||||
400,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle class="mb-1">
|
||||
Total Sales
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>$21,845</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="206"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
65
resources/js/views/dashboards/crm/CrmTransactions.vue
Normal file
65
resources/js/views/dashboards/crm/CrmTransactions.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
const statistics = [
|
||||
{
|
||||
title: 'Sales',
|
||||
stats: '245k',
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Customers',
|
||||
stats: '12.5k',
|
||||
icon: 'ri-group-line',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Product',
|
||||
stats: '1.54k',
|
||||
icon: 'ri-macbook-line',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Transactions">
|
||||
<template #subtitle>
|
||||
<p class="text-body-2 mb-0">
|
||||
<span class="d-inline-block font-weight-medium text-high-emphasis">Total 48.5% Growth</span> <span class="text-high-emphasis">😎</span> this month
|
||||
</p>
|
||||
</template>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in statistics"
|
||||
:key="item.title"
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
:color="item.color"
|
||||
rounded
|
||||
size="40"
|
||||
class="elevation-1 me-3"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-body-1">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ item.stats }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
157
resources/js/views/dashboards/crm/CrmUpgradeYourPlan.vue
Normal file
157
resources/js/views/dashboards/crm/CrmUpgradeYourPlan.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<script setup>
|
||||
import briefcase from '@images/cards/briefcase.png'
|
||||
import logoCreditCard2 from '@images/cards/logo-credit-card-2.png'
|
||||
import logoMastercardSmall from '@images/cards/logo-mastercard-small.png'
|
||||
|
||||
const savedCards = [
|
||||
{
|
||||
logo: logoMastercardSmall,
|
||||
type: 'Credit card',
|
||||
number: '2566 xxxx xxxx 8908',
|
||||
},
|
||||
{
|
||||
logo: logoCreditCard2,
|
||||
type: 'Credit card',
|
||||
number: '8990 xxxx xxxx 6852',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<!-- SECTION Card Header and Menu -->
|
||||
<VCardItem>
|
||||
<!-- 👉 Title -->
|
||||
<VCardTitle>Upgrade Your Plan</VCardTitle>
|
||||
|
||||
<!-- 👉 menu -->
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<VCardText>
|
||||
<p class="text-body-2">
|
||||
Please make the payment to start enjoying all the features of our premium plan as soon as possible.
|
||||
</p>
|
||||
|
||||
<!-- SECTION Upgrade plan banner -->
|
||||
<div class="plan-upgrade-banner pa-4 d-flex rounded align-center">
|
||||
<VAvatar
|
||||
rounded
|
||||
size="40"
|
||||
class="plan-details border-opacity-100 border-primary me-4"
|
||||
>
|
||||
<VImg
|
||||
:src="briefcase"
|
||||
alt="briefcase"
|
||||
height="20"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column me-3">
|
||||
<h6 class="text-h6">
|
||||
Platinum
|
||||
</h6>
|
||||
<span class="text-primary text-body-2">Upgrade Plan</span>
|
||||
</div>
|
||||
<VSpacer />
|
||||
<div class="d-flex align-center">
|
||||
<sup>
|
||||
<div class="text-body-2 text-high-emphasis">$</div>
|
||||
</sup>
|
||||
<h4 class="text-h4">
|
||||
5,250
|
||||
</h4>
|
||||
<sub>
|
||||
<div class="text-body-2 text-high-emphasis">/Year</div>
|
||||
</sub>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Payment Details -->
|
||||
<VList class="card-list mt-1">
|
||||
<h6 class="text-h6 my-2">
|
||||
Payment details
|
||||
</h6>
|
||||
|
||||
<VListItem
|
||||
v-for="card in savedCards"
|
||||
:key="card.logo"
|
||||
class="mb-2"
|
||||
>
|
||||
<!-- 👉 Avatar -->
|
||||
<template #prepend>
|
||||
<img
|
||||
:src="card.logo"
|
||||
height="30"
|
||||
width="42"
|
||||
class="me-3"
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Title and Subtitle -->
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ card.type }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="me-2">
|
||||
{{ card.number }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<!-- 👉 Action -->
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<VTextField
|
||||
density="compact"
|
||||
label="CVV"
|
||||
placeholder="123"
|
||||
style="inline-size: 5rem;"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<!-- 👉 Add Payment -->
|
||||
<VListItem class="mb-3 text-body-1">
|
||||
<a href="javascript:void(0)">Add Payment Method</a>
|
||||
</VListItem>
|
||||
</VList>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
placeholder="Email Address"
|
||||
density="compact"
|
||||
class="mb-3"
|
||||
/>
|
||||
<VBtn block>
|
||||
Contact Now
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plan-upgrade-banner {
|
||||
.plan-details {
|
||||
border: 1px solid rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
background-color: rgba(var(--v-theme-primary), 0.16);
|
||||
}
|
||||
|
||||
.card-list {
|
||||
--v-card-list-gap: 0;
|
||||
}
|
||||
</style>
|
||||
156
resources/js/views/dashboards/crm/CrmWeeklySales.vue
Normal file
156
resources/js/views/dashboards/crm/CrmWeeklySales.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
columnWidth: '60%',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'S',
|
||||
'M',
|
||||
'T',
|
||||
'W',
|
||||
'T',
|
||||
'F',
|
||||
'S',
|
||||
],
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
tickPlacement: 'on',
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: secondaryColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -15,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
40,
|
||||
60,
|
||||
50,
|
||||
60,
|
||||
90,
|
||||
40,
|
||||
50,
|
||||
],
|
||||
}]
|
||||
|
||||
const weeklySalesData = [
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'primary',
|
||||
},
|
||||
title: '34.6k',
|
||||
subtitle: 'Sales',
|
||||
},
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
color: 'success',
|
||||
},
|
||||
title: '$482k',
|
||||
subtitle: 'Total Profit',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Weekly Sales</VCardTitle>
|
||||
<VCardSubtitle>Total 85.4k Sales</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="203"
|
||||
class="py-5"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-space-around">
|
||||
<div
|
||||
v-for="data in weeklySalesData"
|
||||
:key="data.title"
|
||||
class="d-flex align-center me-3"
|
||||
>
|
||||
<div>
|
||||
<VAvatar
|
||||
rounded
|
||||
:color="data.avatar.color"
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
>
|
||||
<VIcon :icon="data.avatar.icon" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
{{ data.title }}
|
||||
</h6>
|
||||
<div class="text-base text-no-wrap">
|
||||
{{ data.subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
Reference in New Issue
Block a user