moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
resources/js/views/dashboards/crm/CrmActiveProject.vue Normal file
View File

@@ -0,0 +1,134 @@
<script setup>
import bootstrapLogo from '@images/icons/brands/bootstrap-logo.png'
import figmaLogo from '@images/icons/brands/figma-logo.png'
import laravelLogo from '@images/icons/brands/laravel-logo.png'
import reactLogo from '@images/icons/brands/react-logo.png'
import sketchLogo from '@images/icons/brands/sketch-logo.png'
import vuejsLogo from '@images/icons/brands/vuejs-logo.png'
const activeProjects = [
{
avatarImg: laravelLogo,
title: 'Laravel',
subtitle: 'Ecommerce',
stats: '65',
progressColor: 'error',
},
{
avatarImg: figmaLogo,
title: 'Figma',
subtitle: 'App UI Kit',
stats: '86',
progressColor: 'primary',
},
{
avatarImg: vuejsLogo,
title: 'VueJs',
subtitle: 'Calendar App',
stats: '90',
progressColor: 'success',
},
{
avatarImg: reactLogo,
title: 'React',
subtitle: 'Dashboard',
stats: '37',
progressColor: 'info',
},
{
avatarImg: bootstrapLogo,
title: 'Bootstrap',
subtitle: 'Website',
stats: '22',
progressColor: 'primary',
},
{
avatarImg: sketchLogo,
title: 'Sketch',
subtitle: 'Website Design',
stats: '29',
progressColor: 'warning',
},
]
const moreList = [
{
title: 'Refresh',
value: 'refresh',
},
{
title: 'Download',
value: 'Download',
},
{
title: 'View All',
value: 'View All',
},
]
</script>
<template>
<VCard>
<VCardItem>
<VCardTitle>Active Projects</VCardTitle>
<VCardSubtitle>
Average 72% completed
</VCardSubtitle>
<template #append>
<div class="mt-n4 me-n2">
<MoreBtn
size="small"
:menu-list="moreList"
/>
</div>
</template>
</VCardItem>
<VCardText>
<VList class="card-list">
<VListItem
v-for="project in activeProjects"
:key="project.title"
>
<template #prepend>
<VAvatar
size="34"
rounded
class="me-1"
>
<img :src="project.avatarImg">
</VAvatar>
</template>
<VListItemTitle class="font-weight-medium">
{{ project.title }}
</VListItemTitle>
<VListItemSubtitle class="me-4">
{{ project.subtitle }}
</VListItemSubtitle>
<template #append>
<div class="d-flex align-center gap-x-4">
<div style="inline-size: 4.875rem;">
<VProgressLinear
:model-value="project.stats"
:color="project.progressColor"
height="8"
rounded-bar
rounded
/>
</div>
<span class="text-disabled">{{ project.stats }}%</span>
</div>
</template>
</VListItem>
</VList>
</VCardText>
</VCard>
</template>
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 16px;
}
</style>

180
resources/js/views/dashboards/crm/CrmActivityTimeline.vue Normal file
View File

@@ -0,0 +1,180 @@
<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 pdf from '@images/icons/project-icons/pdf.png'
const moreList = [
{
title: 'View More',
value: 'View More',
},
{
title: 'Delete',
value: 'Delete',
},
]
</script>
<template>
<VCard>
<VCardItem>
<template #prepend>
<VIcon
icon="tabler-list-details"
size="20"
color="high-emphasis"
class="me-1"
/>
</template>
<template #append>
<div class="mt-n4 me-n2">
<MoreBtn
size="small"
:menu-list="moreList"
/>
</div>
</template>
<VCardTitle>Activity Timeline</VCardTitle>
</VCardItem>
<VCardText>
<VTimeline
side="end"
align="start"
line-inset="8"
truncate-line="start"
density="compact"
>
<!-- SECTION Timeline Item: Flight -->
<VTimelineItem
dot-color="primary"
size="x-small"
>
<!-- 👉 Header -->
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-2">
<span class="app-timeline-title">
12 Invoices have been paid
</span>
<span class="app-timeline-meta">12 min ago</span>
</div>
<!-- 👉 Content -->
<div class="app-timeline-text mt-1">
Invoices have been paid to the company
</div>
<div class="d-inline-flex align-center timeline-chip mt-2">
<img
:src="pdf"
height="20"
class="me-2"
alt="img"
>
<span class="app-timeline-text font-weight-medium">
invoice.pdf
</span>
</div>
</VTimelineItem>
<!-- !SECTION -->
<!-- SECTION Timeline Item: Interview Schedule -->
<VTimelineItem
size="x-small"
dot-color="success"
>
<!-- 👉 Header -->
<div class="d-flex justify-space-between align-center flex-wrap mb-2">
<div class="app-timeline-title">
Client Meeting
</div>
<span class="app-timeline-meta">45 min ago</span>
</div>
<div class="app-timeline-text mt-1">
Project meeting with john @10:15am
</div>
<!-- 👉 Person -->
<div class="d-flex justify-space-between align-center flex-wrap">
<!-- 👉 Avatar & Personal Info -->
<div class="d-flex align-center mt-2">
<VAvatar
size="32"
class="me-2"
:image="avatar1"
/>
<div class="d-flex flex-column">
<p class="text-sm font-weight-medium text-medium-emphasis mb-0">
Lester McCarthy (Client)
</p>
<span class="text-sm">CEO of Pixinvent</span>
</div>
</div>
</div>
</VTimelineItem>
<!-- !SECTION -->
<!-- SECTION Design Review -->
<VTimelineItem
size="x-small"
dot-color="info"
>
<!-- 👉 Header -->
<div class="d-flex justify-space-between align-center flex-wrap mb-2">
<span class="app-timeline-title">
Create a new project for client
</span>
<span class="app-timeline-meta">2 Day Ago</span>
</div>
<!-- 👉 Content -->
<p class="app-timeline-text mt-1 mb-2">
6 team members in a project
</p>
<div class="v-avatar-group demo-avatar-group">
<VAvatar :size="40">
<VImg :src="avatar1" />
<VTooltip
activator="parent"
location="top"
>
John Doe
</VTooltip>
</VAvatar>
<VAvatar :size="40">
<VImg :src="avatar2" />
<VTooltip
activator="parent"
location="top"
>
Jennie Obrien
</VTooltip>
</VAvatar>
<VAvatar :size="40">
<VImg :src="avatar3" />
<VTooltip
activator="parent"
location="top"
>
Peter Harper
</VTooltip>
</VAvatar>
<VAvatar
:size="40"
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
>
+3
</VAvatar>
</div>
</VTimelineItem>
<!-- !SECTION -->
</VTimeline>
</VCardText>
</VCard>
</template>

164
resources/js/views/dashboards/crm/CrmAnalyticsSales.vue Normal file
View File

@@ -0,0 +1,164 @@
<script setup>
import { useTheme } from 'vuetify'
import { hexToRgb } from '@layouts/utils'
const vuetifyTheme = useTheme()
const series = [
{
name: 'Sales',
data: [
32,
27,
27,
30,
25,
25,
],
},
{
name: 'Visits',
data: [
25,
35,
20,
20,
20,
20,
],
},
]
const chartOptions = computed(() => {
const currentTheme = vuetifyTheme.current.value.colors
const variableTheme = vuetifyTheme.current.value.variables
const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
const legendColor = `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['medium-emphasis-opacity'] })`
return {
chart: {
type: 'radar',
toolbar: { show: false },
},
plotOptions: {
radar: {
polygons: {
strokeColors: borderColor,
connectorColors: borderColor,
},
},
},
stroke: {
show: false,
width: 0,
},
legend: {
show: true,
fontSize: '13px',
position: 'bottom',
labels: {
colors: legendColor,
useSeriesColors: false,
},
markers: {
height: 12,
width: 12,
offsetX: -8,
},
itemMargin: { horizontal: 10 },
onItemHover: { highlightDataSeries: false },
},
colors: [
currentTheme.primary,
currentTheme.info,
],
fill: {
opacity: [
1,
0.85,
],
},
markers: { size: 0 },
grid: {
show: false,
padding: {
top: 0,
bottom: -5,
},
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
],
labels: {
show: true,
style: {
colors: [
labelColor,
labelColor,
labelColor,
labelColor,
labelColor,
labelColor,
],
fontSize: '13px',
fontFamily: 'Public Sans',
},
},
},
yaxis: {
show: false,
min: 0,
max: 40,
tickAmount: 4,
},
responsive: [{
breakpoint: 769,
options: { chart: { height: 372 } },
}],
}
})
const moreList = [
{
title: 'View More',
value: 'View More',
},
{
title: 'Delete',
value: 'Delete',
},
]
</script>
<template>
<VCard>
<VCardItem class="pb-4">
<VCardTitle>Sales</VCardTitle>
<VCardSubtitle>Last 6 Months</VCardSubtitle>
<template #append>
<div class="mt-n4 me-n2">
<MoreBtn
size="small"
:menu-list="moreList"
/>
</div>
</template>
</VCardItem>
<VCardText>
<VueApexCharts
:options="chartOptions"
:series="series"
height="290"
/>
</VCardText>
</VCard>
</template>

627
resources/js/views/dashboards/crm/CrmEarningReportsYearlyOverview.vue Normal file
View File

@@ -0,0 +1,627 @@
<script setup>
import { useTheme } from "vuetify";
import { hexToRgb } from "@layouts/utils";
const vuetifyTheme = useTheme();
const currentTab = ref(0);
const refVueApexChart = ref();
const cardBackgroundStyle = computed(() => {
const currentTheme = vuetifyTheme.current.value.colors;
const primaryColor = currentTheme.primary;
const createGradientColor = (color, opacity = 0.08) => {
if (color.includes("rgba")) {
return color.replace(/[\d\.]+\)$/g, `${opacity})`);
}
if (color.startsWith("#")) {
return `rgba(${hexToRgb(color)}, ${opacity})`;
}
if (color.includes("rgb")) {
return color.replace("rgb", "rgba").replace(")", `, ${opacity})`);
}
return `rgba(${hexToRgb(color)}, ${opacity})`;
};
const gradientColor1 = createGradientColor(primaryColor, 0.12);
const gradientColor2 = createGradientColor(primaryColor, 0.04);
return {
background: `linear-gradient(135deg,
${gradientColor1} 0%,
${gradientColor2} 50%,
${gradientColor1} 100%)`,
};
});
const chartConfigs = computed(() => {
const currentTheme = vuetifyTheme.current.value.colors;
const variableTheme = vuetifyTheme.current.value.variables;
const labelPrimaryColor = `rgba(${hexToRgb(currentTheme.primary)},${
variableTheme["dragged-opacity"]
})`;
const legendColor = `rgba(${hexToRgb(currentTheme["on-background"])},${
variableTheme["high-emphasis-opacity"]
})`;
const borderColor = `rgba(${hexToRgb(
String(variableTheme["border-color"])
)},${variableTheme["border-opacity"]})`;
const labelColor = `rgba(${hexToRgb(currentTheme["on-surface"])},${
variableTheme["disabled-opacity"]
})`;
return [
{
title: "Orders",
icon: "tabler-shopping-cart",
chartOptions: {
chart: {
parentHeightOffset: 0,
type: "bar",
toolbar: { show: false },
},
plotOptions: {
bar: {
columnWidth: "32%",
borderRadiusApplication: "end",
borderRadius: 4,
distributed: true,
dataLabels: { position: "top" },
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
left: -10,
right: -10,
},
},
colors: [
labelPrimaryColor,
labelPrimaryColor,
`rgba(${hexToRgb(currentTheme.primary)}, 1)`,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
],
dataLabels: {
enabled: true,
formatter(val) {
return `${val}k`;
},
offsetY: -25,
style: {
fontSize: "15px",
colors: [legendColor],
fontWeight: "600",
fontFamily: "Public Sans",
},
},
legend: { show: false },
tooltip: { enabled: false },
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
axisBorder: {
show: true,
color: borderColor,
},
axisTicks: { show: false },
labels: {
style: {
colors: labelColor,
fontSize: "13px",
fontFamily: "Public Sans",
},
},
},
yaxis: {
labels: {
offsetX: -15,
formatter(val) {
return `${val / 1}k`;
},
style: {
fontSize: "13px",
colors: labelColor,
fontFamily: "Public Sans",
},
min: 0,
max: 60000,
tickAmount: 6,
},
},
responsive: [
{
breakpoint: 1441,
options: { plotOptions: { bar: { columnWidth: "41%" } } },
},
{
breakpoint: 590,
options: {
plotOptions: { bar: { columnWidth: "61%" } },
yaxis: { labels: { show: false } },
grid: {
padding: {
right: 0,
left: -20,
},
},
dataLabels: {
style: {
fontSize: "12px",
fontWeight: "400",
},
},
},
},
],
},
series: [
{
data: [28, 10, 45, 38, 15, 30, 35, 30, 8],
},
],
},
{
title: "Sales",
icon: "tabler-chart-bar",
chartOptions: {
chart: {
parentHeightOffset: 0,
type: "bar",
toolbar: { show: false },
},
plotOptions: {
bar: {
columnWidth: "32%",
borderRadiusApplication: "end",
borderRadius: 4,
distributed: true,
dataLabels: { position: "top" },
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
left: -10,
right: -10,
},
},
colors: [
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
`rgba(${hexToRgb(currentTheme.primary)}, 1)`,
labelPrimaryColor,
labelPrimaryColor,
],
dataLabels: {
enabled: true,
formatter(val) {
return `${val}k`;
},
offsetY: -25,
style: {
fontSize: "15px",
colors: [legendColor],
fontWeight: "600",
fontFamily: "Public Sans",
},
},
legend: { show: false },
tooltip: { enabled: false },
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
axisBorder: {
show: true,
color: borderColor,
},
axisTicks: { show: false },
labels: {
style: {
colors: labelColor,
fontSize: "13px",
fontFamily: "Public Sans",
},
},
},
yaxis: {
labels: {
offsetX: -15,
formatter(val) {
return `${val / 1}k`;
},
style: {
fontSize: "13px",
colors: labelColor,
fontFamily: "Public Sans",
},
min: 0,
max: 60000,
tickAmount: 6,
},
},
responsive: [
{
breakpoint: 1441,
options: { plotOptions: { bar: { columnWidth: "41%" } } },
},
{
breakpoint: 590,
options: {
plotOptions: { bar: { columnWidth: "61%" } },
grid: { padding: { right: 0 } },
dataLabels: {
style: {
fontSize: "12px",
fontWeight: "400",
},
},
yaxis: { labels: { show: false } },
},
},
],
},
series: [
{
data: [35, 25, 15, 40, 42, 25, 48, 8, 30],
},
],
},
{
title: "Profit",
icon: "tabler-currency-dollar",
chartOptions: {
chart: {
parentHeightOffset: 0,
type: "bar",
toolbar: { show: false },
},
plotOptions: {
bar: {
columnWidth: "32%",
borderRadiusApplication: "end",
borderRadius: 4,
distributed: true,
dataLabels: { position: "top" },
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
left: -10,
right: -10,
},
},
colors: [
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
`rgba(${hexToRgb(currentTheme.primary)}, 1)`,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
],
dataLabels: {
enabled: true,
formatter(val) {
return `${val}k`;
},
offsetY: -25,
style: {
fontSize: "15px",
colors: [legendColor],
fontWeight: "600",
fontFamily: "Public Sans",
},
},
legend: { show: false },
tooltip: { enabled: false },
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
axisBorder: {
show: true,
color: borderColor,
},
axisTicks: { show: false },
labels: {
style: {
colors: labelColor,
fontSize: "13px",
fontFamily: "Public Sans",
},
},
},
yaxis: {
labels: {
offsetX: -15,
formatter(val) {
return `${val / 1}k`;
},
style: {
fontSize: "13px",
colors: labelColor,
fontFamily: "Public Sans",
},
min: 0,
max: 60000,
tickAmount: 6,
},
},
responsive: [
{
breakpoint: 1441,
options: { plotOptions: { bar: { columnWidth: "41%" } } },
},
{
breakpoint: 590,
options: {
plotOptions: { bar: { columnWidth: "61%" } },
grid: { padding: { right: 0 } },
dataLabels: {
style: {
fontSize: "12px",
fontWeight: "400",
},
},
yaxis: { labels: { show: false } },
},
},
],
},
series: [
{
data: [10, 22, 27, 33, 42, 32, 27, 22, 8],
},
],
},
{
title: "Income",
icon: "tabler-chart-pie-2",
chartOptions: {
chart: {
parentHeightOffset: 0,
type: "bar",
toolbar: { show: false },
},
plotOptions: {
bar: {
columnWidth: "32%",
borderRadius: 6,
distributed: true,
borderRadiusApplication: "end",
dataLabels: { position: "top" },
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
left: -10,
right: -10,
},
},
colors: [
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
labelPrimaryColor,
`rgba(${hexToRgb(currentTheme.primary)}, 1)`,
],
dataLabels: {
enabled: true,
formatter(val) {
return `${val}k`;
},
offsetY: -25,
style: {
fontSize: "15px",
colors: [legendColor],
fontWeight: "600",
fontFamily: "Public Sans",
},
},
legend: { show: false },
tooltip: { enabled: false },
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
axisBorder: {
show: true,
color: borderColor,
},
axisTicks: { show: false },
labels: {
style: {
colors: labelColor,
fontSize: "13px",
fontFamily: "Public Sans",
},
},
},
yaxis: {
labels: {
offsetX: -15,
formatter(val) {
return `${val / 1}k`;
},
style: {
fontSize: "13px",
colors: labelColor,
fontFamily: "Public Sans",
},
min: 0,
max: 60000,
tickAmount: 6,
},
},
responsive: [
{
breakpoint: 1441,
options: { plotOptions: { bar: { columnWidth: "41%" } } },
},
{
breakpoint: 590,
options: {
plotOptions: { bar: { columnWidth: "50%" } },
dataLabels: {
style: {
fontSize: "12px",
fontWeight: "400",
},
},
grid: { padding: { right: 0 } },
yaxis: { labels: { show: false } },
},
},
],
},
series: [
{
data: [5, 9, 12, 18, 20, 25, 30, 36, 48],
},
],
},
];
});
const moreList = [
{
title: "View More",
value: "View More",
},
{
title: "Delete",
value: "Delete",
},
];
</script>
<template>
<VCard
title="Earning Reports"
subtitle="Yearly Earnings Overview"
:style="cardBackgroundStyle"
>
<template #append>
<div class="mt-n4 me-n2">
<MoreBtn size="small" :menu-list="moreList" />
</div>
</template>
<VCardText>
<VSlideGroup v-model="currentTab" show-arrows mandatory class="mb-10">
<VSlideGroupItem
v-for="(report, index) in chartConfigs"
:key="report.title"
v-slot="{ isSelected, toggle }"
:value="index"
>
<div
style="block-size: 100px; inline-size: 110px"
:style="
isSelected
? 'border-color:rgb(var(--v-theme-primary)) !important'
: ''
"
:class="isSelected ? 'border' : 'border border-dashed'"
class="d-flex flex-column justify-center align-center cursor-pointer rounded py-4 px-5 me-4"
@click="toggle"
>
<VAvatar
rounded
size="38"
:color="isSelected ? 'primary' : ''"
variant="tonal"
class="mb-2"
>
<VIcon size="22" :icon="report.icon" />
</VAvatar>
<h6 class="text-base font-weight-medium mb-0">
{{ report.title }}
</h6>
</div>
</VSlideGroupItem>
<!-- 👉 slider more -->
<VSlideGroupItem>
<div
style="block-size: 100px; inline-size: 110px"
class="d-flex flex-column justify-center align-center rounded border border-dashed py-4 px-5"
>
<VAvatar rounded size="38" variant="tonal">
<VIcon size="22" icon="tabler-plus" />
</VAvatar>
</div>
</VSlideGroupItem>
</VSlideGroup>
<VueApexCharts
ref="refVueApexChart"
:key="currentTab"
:options="chartConfigs[Number(currentTab)].chartOptions"
:series="chartConfigs[Number(currentTab)].series"
height="230"
class="mt-3"
/>
</VCardText>
</VCard>
</template>

186
resources/js/views/dashboards/crm/CrmOrderBarChart.vue Normal file
View File

@@ -0,0 +1,186 @@
<script setup>
const series = [{
name: '2020',
data: [
60,
50,
20,
45,
50,
30,
70,
],
}]
const chartOptions = computed(() => {
return {
chart: {
height: 90,
parentHeightOffset: 0,
type: 'bar',
toolbar: { show: false },
},
tooltip: { enabled: false },
plotOptions: {
bar: {
barHeight: '100%',
columnWidth: '30%',
startingShape: 'rounded',
endingShape: 'rounded',
borderRadius: 4,
colors: {
backgroundBarColors: [
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
],
backgroundBarRadius: 4,
},
},
},
colors: ['rgba(var(--v-theme-primary),1)'],
grid: {
show: false,
padding: {
top: -30,
left: -16,
bottom: 0,
right: -6,
},
},
dataLabels: { enabled: false },
legend: { show: false },
xaxis: {
categories: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
],
axisBorder: { show: false },
axisTicks: { show: false },
labels: { show: false },
},
yaxis: { labels: { show: false } },
responsive: [
{
breakpoint: 1441,
options: {
plotOptions: {
bar: {
columnWidth: '30%',
borderRadius: 4,
},
},
},
},
{
breakpoint: 1368,
options: { plotOptions: { bar: { columnWidth: '48%' } } },
},
{
breakpoint: 1264,
options: {
plotOptions: {
bar: {
borderRadius: 6,
columnWidth: '30%',
colors: { backgroundBarRadius: 6 },
},
},
},
},
{
breakpoint: 960,
options: {
plotOptions: {
bar: {
columnWidth: '15%',
borderRadius: 4,
},
},
},
},
{
breakpoint: 883,
options: { plotOptions: { bar: { columnWidth: '20%' } } },
},
{
breakpoint: 768,
options: { plotOptions: { bar: { columnWidth: '25%' } } },
},
{
breakpoint: 600,
options: {
plotOptions: {
bar: {
columnWidth: '15%',
borderRadius: 4,
},
colors: { backgroundBarRadius: 9 },
},
},
},
{
breakpoint: 479,
options: {
plotOptions: {
bar: { borderRadius: 4 },
colors: { backgroundBarRadius: 9 },
},
grid: {
padding: {
right: -15,
left: -15,
},
},
},
},
{
breakpoint: 400,
options: { plotOptions: { bar: { borderRadius: 4 } } },
},
],
}
})
</script>
<template>
<VCard>
<VCardItem class="pb-3">
<VCardTitle>Orders</VCardTitle>
<VCardSubtitle>Last Week</VCardSubtitle>
</VCardItem>
<VCardText>
<VueApexCharts
:options="chartOptions"
:series="series"
:height="62"
/>
<div class="d-flex align-center justify-space-between gap-x-2 mt-3">
<h4 class="text-h4 text-center">
124k
</h4>
<div class="text-sm text-success">
+12.6%
</div>
</div>
</VCardText>
</VCard>
</template>

169
resources/js/views/dashboards/crm/CrmProjectStatus.vue Normal file
View File

@@ -0,0 +1,169 @@
<script setup>
import { useTheme } from 'vuetify'
import { prefixWithPlus } from '@core/utils/formatters'
const vuetifyTheme = useTheme()
const series = [{
data: [
2000,
2000,
4000,
4000,
3050,
3050,
2000,
2000,
3050,
3050,
4700,
4700,
2750,
2750,
5700,
5700,
],
}]
const chartOptions = computed(() => {
const currentTheme = vuetifyTheme.current.value.colors
return {
chart: {
type: 'area',
toolbar: false,
},
markers: { strokeColor: 'transparent' },
dataLabels: { enabled: false },
grid: {
show: false,
padding: {
left: -10,
right: -5,
top: -40,
},
},
stroke: {
width: 3,
curve: 'straight',
},
colors: [currentTheme.warning],
fill: {
type: 'gradient',
gradient: {
opacityFrom: 0.6,
opacityTo: 0.15,
stops: [
0,
95,
100,
],
},
},
xaxis: {
labels: { show: false },
axisBorder: { show: false },
axisTicks: { show: false },
lines: { show: false },
},
yaxis: {
labels: { show: false },
min: 1000,
max: 6000,
tickAmount: 5,
},
tooltip: { enabled: false },
}
})
const projectStatus = [
{
title: 'Donates',
amount: '$756.26',
lossProfit: -139.34,
},
{
title: 'Podcasts',
amount: '$2,207.03',
lossProfit: +576.24,
},
]
const moreList = [
{
title: 'View More',
value: 'View More',
},
{
title: 'Delete',
value: 'Delete',
},
]
</script>
<template>
<VCard title="Project Status">
<template #append>
<div class="mt-n4 me-n2">
<MoreBtn
size="small"
:menu-list="moreList"
/>
</div>
</template>
<VCardText>
<VList class="card-list mb-6">
<VListItem>
<VListItemTitle class="font-weight-medium">
$4,3742
</VListItemTitle>
<template #prepend>
<VAvatar
color="warning"
variant="tonal"
rounded
icon="tabler-currency-dollar"
/>
</template>
<VListItemSubtitle>
Your Earnings
</VListItemSubtitle>
<template #append>
<span class="text-success font-weight-medium">+10.2%</span>
</template>
</VListItem>
</VList>
<VueApexCharts
:options="chartOptions"
:series="series"
height="208"
/>
<VList class="card-list">
<VListItem
v-for="status in projectStatus"
:key="status.title"
>
<VListItemTitle class="font-weight-medium">
{{ status.title }}
</VListItemTitle>
<template #append>
<span class="me-4 text-medium-emphasis">{{ status.amount }}</span>
<span :class="status.lossProfit > 0 ? 'text-success' : 'text-error'">{{ prefixWithPlus(status.lossProfit) }}</span>
</template>
</VListItem>
</VList>
</VCardText>
</VCard>
</template>
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 16px;
}
</style>

168
resources/js/views/dashboards/crm/CrmRecentTransactions.vue Normal file
View File

@@ -0,0 +1,168 @@
<script setup>
import aeIcon from '@images/icons/payments/ae-icon.png'
import mastercardIcon from '@images/icons/payments/mastercard-icon.png'
import visaIcon from '@images/icons/payments/visa-icon.png'
const lastTransitions = [
{
cardImg: visaIcon,
lastDigit: '*4230',
cardType: 'Credit',
sentDate: '17 Mar 2022',
status: 'Verified',
trend: '+$1,678',
},
{
cardImg: mastercardIcon,
lastDigit: '*5578',
cardType: 'Credit',
sentDate: '12 Feb 2022',
status: 'Rejected',
trend: '-$839',
},
{
cardImg: aeIcon,
lastDigit: '*4567',
cardType: 'Credit',
sentDate: '28 Feb 2022',
status: 'Verified',
trend: '+$435',
},
{
cardImg: visaIcon,
lastDigit: '*5699',
cardType: 'Credit',
sentDate: '8 Jan 2022',
status: 'Pending',
trend: '+$2,345',
},
{
cardImg: visaIcon,
lastDigit: '*5699',
cardType: 'Credit',
sentDate: '8 Jan 2022',
status: 'Rejected',
trend: '-$234',
},
]
const resolveStatus = {
Verified: 'success',
Rejected: 'error',
Pending: 'secondary',
}
const moreList = [
{
title: 'Refresh',
value: 'refresh',
},
{
title: 'Download',
value: 'Download',
},
{
title: 'View All',
value: 'View All',
},
]
const getPaddingStyle = index => index ? 'padding-block-end: 1.25rem;' : 'padding-block: 1.25rem;'
</script>
<template>
<VCard title="Last Transaction">
<template #append>
<div class="me-n2">
<MoreBtn
size="small"
:menu-list="moreList"
/>
</div>
</template>
<VDivider />
<VTable class="text-no-wrap transaction-table">
<thead>
<tr>
<th>CARD</th>
<th>DATE</th>
<th>STATUS</th>
<th>
TREND
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(transition, index) in lastTransitions"
:key="index"
>
<td
:style="getPaddingStyle(index)"
style="padding-inline-end: 1.5rem;"
>
<div class="d-flex align-center">
<div class="me-4">
<VImg
:src="transition.cardImg"
width="50"
/>
</div>
<div>
<p class="text-base mb-0 text-high-emphasis">
{{ transition.lastDigit }}
</p>
<p class="text-sm mb-0">
{{ transition.cardType }}
</p>
</div>
</div>
</td>
<td
:style="getPaddingStyle(index)"
style="padding-inline-end: 1.5rem;"
>
<p class="text-high-emphasis text-base mb-0">
Sent
</p>
<div class="text-sm">
{{ transition.sentDate }}
</div>
</td>
<td
:style="getPaddingStyle(index)"
style="padding-inline-end: 1.5rem;"
>
<VChip
label
:color="resolveStatus[transition.status]"
size="small"
>
{{ transition.status }}
</VChip>
</td>
<td
:style="getPaddingStyle(index)"
style="padding-inline-end: 1.5rem;"
align="right"
>
<div class="text-high-emphasis text-base">
{{ transition.trend }}
</div>
</td>
</tr>
</tbody>
</VTable>
</VCard>
</template>
<style lang="scss">
.transaction-table {
&.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
&.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
border-block-end: none !important;
}
}
</style>

200
resources/js/views/dashboards/crm/CrmRevenueGrowth.vue Normal file
View File

@@ -0,0 +1,200 @@
<script setup>
import { useTheme } from 'vuetify'
import { hexToRgb } from '@layouts/utils'
const vuetifyTheme = useTheme()
const series = [{
data: [
25,
40,
55,
70,
85,
70,
55,
],
}]
const chartOptions = computed(() => {
const currentTheme = vuetifyTheme.current.value.colors
const variableTheme = vuetifyTheme.current.value.variables
const labelSuccessColor = `rgba(${ hexToRgb(currentTheme.success) },0.2)`
const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
return {
chart: {
height: 162,
type: 'bar',
parentHeightOffset: 0,
toolbar: { show: false },
},
plotOptions: {
bar: {
barHeight: '80%',
columnWidth: '30%',
startingShape: 'rounded',
endingShape: 'rounded',
borderRadius: 6,
distributed: true,
},
},
tooltip: { enabled: false },
grid: {
show: false,
padding: {
top: -20,
bottom: -12,
left: -10,
right: 0,
},
},
colors: [
labelSuccessColor,
labelSuccessColor,
labelSuccessColor,
labelSuccessColor,
currentTheme.success,
labelSuccessColor,
labelSuccessColor,
],
dataLabels: { enabled: false },
legend: { show: false },
xaxis: {
categories: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
],
axisBorder: { show: false },
axisTicks: { show: false },
labels: {
style: {
colors: labelColor,
fontSize: '13px',
fontFamily: 'Public sans',
},
},
},
yaxis: { labels: { show: false } },
states: { hover: { filter: { type: 'none' } } },
responsive: [
{
breakpoint: 1640,
options: {
plotOptions: {
bar: {
columnWidth: '40%',
borderRadius: 6,
},
},
},
},
{
breakpoint: 1471,
options: { plotOptions: { bar: { columnWidth: '50%' } } },
},
{
breakpoint: 1350,
options: { plotOptions: { bar: { columnWidth: '57%' } } },
},
{
breakpoint: 1032,
options: {
plotOptions: {
bar: {
columnWidth: '50%',
borderRadius: 4,
},
},
},
},
{
breakpoint: 992,
options: {
plotOptions: {
bar: {
columnWidth: '40%',
borderRadius: 4,
},
},
},
},
{
breakpoint: 855,
options: {
plotOptions: {
bar: {
columnWidth: '50%',
borderRadius: 6,
},
},
},
},
{
breakpoint: 440,
options: {
plotOptions: {
bar: {
columnWidth: '30%',
borderRadius: 4,
},
},
},
},
{
breakpoint: 381,
options: {
plotOptions: {
bar: {
columnWidth: '45%',
borderRadius: 4,
},
},
},
},
],
}
})
</script>
<template>
<VCard>
<VCardText class="d-flex justify-space-between">
<div class="d-flex flex-column">
<div class="mb-auto">
<h5 class="text-h5 text-no-wrap mb-2">
Revenue Growth
</h5>
<div class="text-body-1">
Weekly Report
</div>
</div>
<div>
<h5 class="text-h3 mb-2">
$4,673
</h5>
<VChip
label
color="success"
size="small"
>
+15.2%
</VChip>
</div>
</div>
<div>
<VueApexCharts
:options="chartOptions"
:series="series"
:height="162"
/>
</div>
</VCardText>
</VCard>
</template>

91
resources/js/views/dashboards/crm/CrmSalesAreaCharts.vue Normal file
View File

@@ -0,0 +1,91 @@
<script setup>
import { useTheme } from 'vuetify'
const vuetifyTheme = useTheme()
const currentTheme = vuetifyTheme.current.value.colors
const series = [{
name: 'Subscribers',
data: [
200,
55,
400,
250,
],
}]
const chartOptions = {
chart: {
type: 'area',
parentHeightOffset: 0,
toolbar: { show: false },
sparkline: { enabled: true },
},
markers: {
colors: 'transparent',
strokeColors: 'transparent',
},
grid: { show: false },
colors: [currentTheme.success],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 0.9,
opacityFrom: 0.5,
opacityTo: 0.07,
stops: [
0,
80,
100,
],
},
},
dataLabels: { enabled: false },
stroke: {
width: 2,
curve: 'smooth',
},
xaxis: {
show: true,
lines: { show: false },
labels: { show: false },
stroke: { width: 0 },
axisBorder: { show: false },
},
yaxis: {
stroke: { width: 0 },
show: false,
},
tooltip: { enabled: false },
}
</script>
<template>
<VCard>
<VCardItem class="pb-3">
<VCardTitle>
Sales
</VCardTitle>
<VCardSubtitle>
Last Year
</VCardSubtitle>
</VCardItem>
<VueApexCharts
:options="chartOptions"
:series="series"
:height="68"
/>
<VCardText class="pt-1">
<div class="d-flex align-center justify-space-between gap-x-2">
<h4 class="text-h4 text-center">
175k
</h4>
<span class="text-sm text-error">
-16.2%
</span>
</div>
</VCardText>
</VCard>
</template>

123
resources/js/views/dashboards/crm/CrmSalesByCountries.vue Normal file
View File

@@ -0,0 +1,123 @@
<script setup>
import auFlag from '@images/icons/countries/au.png'
import brFlag from '@images/icons/countries/br.png'
import cnFlag from '@images/icons/countries/cn.png'
import frFlag from '@images/icons/countries/fr.png'
import inFlag from '@images/icons/countries/in.png'
import usFlag from '@images/icons/countries/us.png'
const salesByCountries = [
{
avatarImg: usFlag,
stats: '$8,567k',
subtitle: 'United states',
profitLoss: 25.8,
},
{
avatarImg: brFlag,
stats: '$2,415k',
subtitle: 'Brazil',
profitLoss: -6.2,
},
{
avatarImg: inFlag,
stats: '$865k',
subtitle: 'India',
profitLoss: 12.4,
},
{
avatarImg: auFlag,
stats: '$745k',
subtitle: 'Australia',
profitLoss: -11.9,
},
{
avatarImg: frFlag,
stats: '$45',
subtitle: 'France',
profitLoss: 16.2,
},
{
avatarImg: cnFlag,
stats: '$12k',
subtitle: 'China',
profitLoss: 14.8,
},
]
const moreList = [
{
title: 'Refresh',
value: 'refresh',
},
{
title: 'Download',
value: 'Download',
},
{
title: 'View All',
value: 'View All',
},
]
</script>
<template>
<VCard
title="Sales by Countries"
subtitle="Monthly Sales Overview"
>
<template #append>
<div class="mt-n4 me-n2">
<MoreBtn
size="small"
:menu-list="moreList"
/>
</div>
</template>
<VCardText>
<VList class="card-list">
<VListItem
v-for="country in salesByCountries"
:key="country.stats"
>
<template #prepend>
<VAvatar
size="34"
color="secondary"
variant="tonal"
class="me-1"
:image="country.avatarImg"
/>
</template>
<VListItemTitle class="font-weight-medium">
{{ country.stats }}
</VListItemTitle>
<VListItemSubtitle>
{{ country.subtitle }}
</VListItemSubtitle>
<template #append>
<div :class="`d-flex align-center font-weight-medium ${country.profitLoss > 0 ? 'text-success' : 'text-error'}`">
<VIcon
:icon="country.profitLoss > 0 ? 'tabler-chevron-up' : 'tabler-chevron-down'"
size="20"
class="me-1"
/>
<div class="font-weight-medium">
{{ Math.abs(country.profitLoss) }}%
</div>
</div>
</template>
</VListItem>
</VList>
</VCardText>
</VCard>
</template>
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 1rem;
}
</style>

206
resources/js/views/dashboards/crm/CrmSessionsBarWithGapCharts.vue Normal file
View File

@@ -0,0 +1,206 @@
<script setup>
import { useTheme } from 'vuetify'
import { hexToRgb } from '@layouts/utils'
const vuetifyTheme = useTheme()
const series = [
{
name: 'PRODUCT A',
data: [
4,
3,
6,
4,
3,
],
},
{
name: 'PRODUCT B',
data: [
-3,
-4,
-3,
-2,
-3,
],
},
]
const chartOptions = computed(() => {
const currentTheme = vuetifyTheme.current.value.colors
return {
chart: {
type: 'bar',
parentHeightOffset: 0,
stacked: true,
toolbar: { show: false },
},
series: [
{
name: 'PRODUCT A',
data: [
4,
3,
6,
4,
3,
],
},
{
name: 'PRODUCT B',
data: [
-3,
-4,
-3,
-2,
-3,
],
},
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: '30%',
barHeight: '100%',
borderRadius: 5,
startingShape: 'rounded',
endingShape: 'rounded',
},
},
dataLabels: { enabled: false },
tooltip: { enabled: false },
stroke: {
curve: 'smooth',
width: 1,
lineCap: 'round',
colors: [currentTheme.surface],
},
legend: { show: false },
colors: [
`rgba(${ hexToRgb(currentTheme.primary) },1)`,
`rgba(${ hexToRgb(currentTheme.success) },1)`,
],
grid: {
show: false,
padding: {
top: -41,
right: -5,
left: -3,
bottom: -15,
},
},
xaxis: {
categories: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
],
labels: { show: false },
axisBorder: { show: false },
axisTicks: { show: false },
},
yaxis: { show: false },
responsive: [
{
breakpoint: 1441,
options: { plotOptions: { bar: { columnWidth: '40%' } } },
},
{
breakpoint: 1300,
options: { plotOptions: { bar: { columnWidth: '50%' } } },
},
{
breakpoint: 1279,
options: {
plotOptions: {
bar: {
borderRadius: 6,
columnWidth: '20%',
},
},
},
},
{
breakpoint: 1025,
options: {
plotOptions: {
bar: {
borderRadius: 7,
columnWidth: '25%',
},
},
chart: { height: 110 },
},
},
{
breakpoint: 960,
options: { plotOptions: { bar: { borderRadius: 6 } } },
},
{
breakpoint: 782,
options: { plotOptions: { bar: { columnWidth: '30%' } } },
},
{
breakpoint: 600,
options: {
plotOptions: {
bar: {
borderRadius: 12,
columnWidth: '20%',
},
},
chart: { height: 160 },
},
},
{
breakpoint: 426,
options: { plotOptions: { bar: { borderRadius: 8 } } },
},
{
breakpoint: 376,
options: { plotOptions: { bar: { borderRadius: 6 } } },
},
],
states: {
hover: { filter: { type: 'none' } },
active: { filter: { type: 'none' } },
},
}
})
</script>
<template>
<VCard>
<VCardText>
<div>
<h5 class="text-h5">
Sessions
</h5>
<p class="mb-0 text-sm text-disabled">
This Month
</p>
</div>
<VueApexCharts
:options="chartOptions"
:series="series"
:height="75"
/>
<div class="d-flex align-center justify-space-between mt-4">
<h4 class="text-h4">
45.1k
</h4>
<p class="mb-0 text-sm text-success">
+12.6%
</p>
</div>
</VCardText>
</VCard>
</template>