initial commit
This commit is contained in:
Inshal
311
resources/js/views/dashboard/AnalyticsCongratulations.vue
Normal file
311
resources/js/views/dashboard/AnalyticsCongratulations.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<script setup>
|
||||
import illustrationJohnDark from '@images/cards/illustration-john-dark.png';
|
||||
import illustrationJohnLight from '@images/cards/illustration-john-light.png';
|
||||
import { useTheme } from 'vuetify';
|
||||
// const panelActive = ref(true);
|
||||
const panel = ref(0)
|
||||
onMounted(() => {
|
||||
// panelActive.value = true;
|
||||
});
|
||||
const props = defineProps({
|
||||
date: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
time: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
timezone: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const orders = ref([
|
||||
{
|
||||
icon: 'tabler-circle-check',
|
||||
type: 'SENDER',
|
||||
name: 'Myrtle Ullrich',
|
||||
address: '101 Boulder, California(CA), 95959',
|
||||
},
|
||||
{
|
||||
icon: 'tabler-map-pin',
|
||||
type: 'RECEIVER',
|
||||
name: 'Barry Schowalter',
|
||||
address: '939 Orange, California(CA),92118',
|
||||
},
|
||||
]);
|
||||
const { global } = useTheme()
|
||||
const illustrationJohn = computed(() => global.name.value === 'dark' ? illustrationJohnDark : illustrationJohnLight)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="text-center text-sm-start">
|
||||
<VRow no-gutters>
|
||||
<VCol>
|
||||
|
||||
<VExpansionPanels v-model="panel">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle variant="tonal" color="secondary">
|
||||
<span><b>TRT Lab Kit with a Virtual Provider Consultation.</b> <br><br>
|
||||
<p>{{ date }} Status: InProcess <br>
|
||||
</p>
|
||||
<p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt"> back to Lab
|
||||
</Routerview>
|
||||
</p>
|
||||
</span>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
<VCardText>
|
||||
<VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
||||
<span class="app-timeline-title">
|
||||
<b>Medical History Form Completed</b><br><br>
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- !SECTION -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Online Consultation Scheduled</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- SECTION Timeline Item: Interview Schedule -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
3
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>eClinic Schedule is Confirmed for {{ date }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between align-center flex-wrap">
|
||||
<!-- 👉 Avatar & Personal Info -->
|
||||
<div class="d-flex align-center mt-2">
|
||||
<div class="d-flex flex-column">
|
||||
<p class="text-sm font-weight-medium text-high-emphasis mb-0">
|
||||
Your virtual consultation with your HGH provider is set for {{ props.date }}, at {{
|
||||
props.time
|
||||
}}
|
||||
, {{ props.timezone }}. On the appointment day, we will send you an email containing the
|
||||
link
|
||||
to join, along
|
||||
with useful tips for preparation. If you have any inquiries or need to reschedule, feel free
|
||||
to reach out via text at (223) 124-5533.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<VBtn class="mt-3" color="rgb(var(--v-theme-yellow))">Go to Meeting</VBtn>
|
||||
<!-- 👉 Person Actions -->
|
||||
</div>
|
||||
|
||||
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
4
|
||||
</template>
|
||||
<!-- <template #icon>
|
||||
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
||||
</template> -->
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>eClicnic Attented</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
5
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Medication Ordered</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
6
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Medication Shipped</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
7
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Medication Delivered</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
</VExpansionPanels>
|
||||
<VCardTitle class="text-start">Latest Labs <RouterLink to="/">
|
||||
<span>(See all)</span>
|
||||
</RouterLink>
|
||||
</VCardTitle>
|
||||
<VExpansionPanels class="mt-2">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle variant="tonal" color="secondary">
|
||||
<span><b>TRT Lab Kit </b> <br><br>
|
||||
<p>{{ date }} Status: Ordered <br>
|
||||
</p>
|
||||
<p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt"> back to Lab
|
||||
</Routerview>
|
||||
</p>
|
||||
</span>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
<h2 class="text-start">Results</h2>
|
||||
<VCardText>
|
||||
|
||||
<VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
||||
|
||||
<span class="app-timeline-title">
|
||||
<b>Ordered Hormone Test Kit</b><br><br>
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- !SECTION -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Shipped Hormone Test Kit</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- SECTION Timeline Item: Interview Schedule -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Delivered Hormone Test Kit</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="rgb(var(--v-theme-yellow))"
|
||||
icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
4
|
||||
</template>
|
||||
<!-- <template #icon>
|
||||
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
||||
</template> -->
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1 ">
|
||||
<div>
|
||||
<b>Hormone Test Kit in Transit</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
5
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Lab Received Hormone Test Kit</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
6
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Provider Reviewed Test Results</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
</VExpansionPanels>
|
||||
|
||||
|
||||
|
||||
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.john-illustration {
|
||||
inset-block-end: -0.0625rem;
|
||||
inset-inline-end: 3rem;
|
||||
}
|
||||
|
||||
.v-timeline .v-timeline-divider__inner-dot {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.bg-secondary {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.v-expansion-panel-title--active {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
262
resources/js/views/dashboard/AnalyticsFinanceTab.vue
Normal file
262
resources/js/views/dashboard/AnalyticsFinanceTab.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<script setup>
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import { useTheme } from 'vuetify'
|
||||
import statsVerticalChart from '@images/cards/chart-success.png'
|
||||
import statsVerticalPaypal from '@images/cards/paypal-error.png'
|
||||
import statsVerticalWallet from '@images/cards/wallet-primary.png'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = {
|
||||
income: [{
|
||||
data: [
|
||||
24,
|
||||
21,
|
||||
30,
|
||||
22,
|
||||
42,
|
||||
26,
|
||||
35,
|
||||
29,
|
||||
],
|
||||
}],
|
||||
expenses: [{
|
||||
data: [
|
||||
24,
|
||||
21,
|
||||
30,
|
||||
25,
|
||||
42,
|
||||
26,
|
||||
35,
|
||||
29,
|
||||
],
|
||||
}],
|
||||
profit: [{
|
||||
data: [
|
||||
24,
|
||||
21,
|
||||
30,
|
||||
22,
|
||||
42,
|
||||
26,
|
||||
35,
|
||||
35,
|
||||
],
|
||||
}],
|
||||
}
|
||||
|
||||
const currentTab = ref('income')
|
||||
|
||||
const tabData = computed(() => {
|
||||
const data = {
|
||||
income: {
|
||||
avatar: statsVerticalWallet,
|
||||
title: 'Total Income',
|
||||
stats: '$459.1k',
|
||||
profitLoss: 65,
|
||||
profitLossAmount: '6.5k',
|
||||
compareToLastWeek: '$39k',
|
||||
},
|
||||
expenses: {
|
||||
avatar: statsVerticalPaypal,
|
||||
title: 'Total Expenses',
|
||||
stats: '$316.5k',
|
||||
profitLoss: 27.8,
|
||||
profitLossAmount: '7.2k',
|
||||
compareToLastWeek: '$16k',
|
||||
},
|
||||
profit: {
|
||||
avatar: statsVerticalChart,
|
||||
title: 'Total Profit',
|
||||
stats: '$147.9k',
|
||||
profitLoss: 35.1,
|
||||
profitLossAmount: '4.5k',
|
||||
compareToLastWeek: '$28k',
|
||||
},
|
||||
}
|
||||
|
||||
return data[currentTab.value]
|
||||
})
|
||||
|
||||
const chartConfig = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const disabledTextColor = `rgba(${ hexToRgb(String(currentTheme['on-surface'])) },${ variableTheme['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'smooth',
|
||||
},
|
||||
grid: {
|
||||
strokeDashArray: 4.5,
|
||||
borderColor,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -20,
|
||||
right: 11,
|
||||
bottom: 7,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.25,
|
||||
opacityFrom: 0.5,
|
||||
stops: [
|
||||
0,
|
||||
95,
|
||||
100,
|
||||
],
|
||||
shadeIntensity: 0.6,
|
||||
colorStops: [[
|
||||
{
|
||||
offset: 0,
|
||||
opacity: 0.4,
|
||||
color: currentTheme.primary,
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
opacity: 0.2,
|
||||
color: currentTheme.surface,
|
||||
},
|
||||
]],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 1,
|
||||
color: currentTheme.primary,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
'',
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 10,
|
||||
max: 50,
|
||||
show: false,
|
||||
tickAmount: 4,
|
||||
},
|
||||
markers: {
|
||||
size: 8,
|
||||
strokeWidth: 6,
|
||||
strokeOpacity: 1,
|
||||
hover: { size: 8 },
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [{
|
||||
size: 8,
|
||||
seriesIndex: 0,
|
||||
fillColor: '#fff',
|
||||
strokeColor: currentTheme.primary,
|
||||
dataPointIndex: series[currentTab.value][0].data.length - 1,
|
||||
}],
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VTabs
|
||||
v-model="currentTab"
|
||||
class="v-tabs-pill"
|
||||
>
|
||||
<VTab value="income">
|
||||
Income
|
||||
</VTab>
|
||||
<VTab value="expenses">
|
||||
Expenses
|
||||
</VTab>
|
||||
<VTab value="profit">
|
||||
Profit
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="d-flex align-center gap-3">
|
||||
<VAvatar
|
||||
size="46"
|
||||
rounded
|
||||
:image="tabData.avatar"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p class="mb-0">
|
||||
{{ tabData.title }}
|
||||
</p>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<h6 class="text-h6">
|
||||
{{ tabData.stats }}
|
||||
</h6>
|
||||
<span
|
||||
class="text-sm"
|
||||
:class="tabData.profitLoss > 0 ? 'text-success' : 'text-error'"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="bx-chevron-up"
|
||||
/>
|
||||
{{ tabData.profitLoss }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:height="241"
|
||||
:options="chartConfig"
|
||||
:series="series[currentTab]"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex align-center justify-center gap-3">
|
||||
<VProgressCircular
|
||||
size="45"
|
||||
:model-value="tabData.profitLoss"
|
||||
>
|
||||
<span class="text-xs text-medium-emphasis">{{ tabData.profitLossAmount }}</span>
|
||||
</VProgressCircular>
|
||||
|
||||
<div>
|
||||
<h6 class="text-base font-weight-regular">
|
||||
<span class="text-capitalize">{{ currentTab }}</span>
|
||||
<span> this week</span>
|
||||
</h6>
|
||||
<span class="text-sm text-disabled">{{ tabData.compareToLastWeek }} less than last week</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
118
resources/js/views/dashboard/AnalyticsOrder.vue
Normal file
118
resources/js/views/dashboard/AnalyticsOrder.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<script setup>
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
30,
|
||||
70,
|
||||
35,
|
||||
55,
|
||||
45,
|
||||
70,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -32,
|
||||
right: 17,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.7,
|
||||
opacityFrom: 0.5,
|
||||
shadeIntensity: 1,
|
||||
stops: [
|
||||
0,
|
||||
90,
|
||||
100,
|
||||
],
|
||||
colorStops: [[
|
||||
{
|
||||
offset: 0,
|
||||
opacity: 0.6,
|
||||
color: currentTheme.success,
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
opacity: 0.1,
|
||||
color: currentTheme.surface,
|
||||
},
|
||||
]],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 1,
|
||||
color: currentTheme.success,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
markers: {
|
||||
size: 1,
|
||||
offsetY: 2,
|
||||
offsetX: -4,
|
||||
strokeWidth: 4,
|
||||
strokeOpacity: 1,
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [{
|
||||
size: 6,
|
||||
seriesIndex: 0,
|
||||
fillColor: '#fff',
|
||||
strokeColor: currentTheme.success,
|
||||
dataPointIndex: series[0].data.length - 1,
|
||||
}],
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="pb-1">
|
||||
<h6 class="text-base font-weight-regular">
|
||||
Order
|
||||
</h6>
|
||||
<h5 class="text-h5 font-weight-medium">
|
||||
276k
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:height="110"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
206
resources/js/views/dashboard/AnalyticsOrderStatistics.vue
Normal file
206
resources/js/views/dashboard/AnalyticsOrderStatistics.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<script setup>
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [
|
||||
45,
|
||||
80,
|
||||
20,
|
||||
40,
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const disabledTextColor = `rgba(${ hexToRgb(String(currentTheme['on-surface'])) },${ variableTheme['disabled-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(String(currentTheme['on-surface'])) },${ variableTheme['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
sparkline: { enabled: true },
|
||||
animations: { enabled: false },
|
||||
},
|
||||
stroke: {
|
||||
width: 6,
|
||||
colors: [currentTheme.surface],
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
labels: [
|
||||
'Fashion',
|
||||
'Electronic',
|
||||
'Sports',
|
||||
'Decor',
|
||||
],
|
||||
colors: [
|
||||
currentTheme.success,
|
||||
currentTheme.primary,
|
||||
currentTheme.secondary,
|
||||
currentTheme.info,
|
||||
],
|
||||
grid: {
|
||||
padding: {
|
||||
top: -7,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
expandOnClick: false,
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 17,
|
||||
fontSize: '14px',
|
||||
color: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
value: {
|
||||
offsetY: -17,
|
||||
fontSize: '24px',
|
||||
color: primaryTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Weekly',
|
||||
fontSize: '14px',
|
||||
formatter: () => '38%',
|
||||
color: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const orders = [
|
||||
{
|
||||
amount: '82.5k',
|
||||
title: 'Electronic',
|
||||
avatarColor: 'primary',
|
||||
subtitle: 'Mobile, Earbuds, TV',
|
||||
avatarIcon: 'bx-mobile-alt',
|
||||
},
|
||||
{
|
||||
amount: '23.8k',
|
||||
title: 'Fashion',
|
||||
avatarColor: 'success',
|
||||
subtitle: 'Tshirt, Jeans, Shoes',
|
||||
avatarIcon: 'bx-closet',
|
||||
},
|
||||
{
|
||||
amount: 849,
|
||||
title: 'Decor',
|
||||
avatarColor: 'info',
|
||||
subtitle: 'Fine Art, Dining',
|
||||
avatarIcon: 'bx-home',
|
||||
},
|
||||
{
|
||||
amount: 99,
|
||||
title: 'Sports',
|
||||
avatarColor: 'secondary',
|
||||
subtitle: 'Football, Cricket Kit',
|
||||
avatarIcon: 'bx-football',
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'Share',
|
||||
value: 'Share',
|
||||
},
|
||||
{
|
||||
title: 'Refresh',
|
||||
value: 'Refresh',
|
||||
},
|
||||
{
|
||||
title: 'Update',
|
||||
value: 'Update',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle class="mb-1">
|
||||
Order Statistics
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>42.82k Total Sales</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3 mt-n8">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<h4 class="text-h4 mb-1">
|
||||
8,258
|
||||
</h4>
|
||||
<span>Total Orders</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:height="125"
|
||||
width="105"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VList class="card-list mt-7">
|
||||
<VListItem
|
||||
v-for="order in orders"
|
||||
:key="order.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
variant="tonal"
|
||||
:color="order.avatarColor"
|
||||
>
|
||||
<VIcon :icon="order.avatarIcon" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="mb-1">
|
||||
{{ order.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-disabled">
|
||||
{{ order.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<span>{{ order.amount }}</span>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 21px;
|
||||
}
|
||||
</style>
|
||||
124
resources/js/views/dashboard/AnalyticsProfitReport.vue
Normal file
124
resources/js/views/dashboard/AnalyticsProfitReport.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script setup>
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import {
|
||||
useDisplay,
|
||||
useTheme,
|
||||
} from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const display = useDisplay()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
30,
|
||||
58,
|
||||
35,
|
||||
53,
|
||||
50,
|
||||
68,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
dropShadow: {
|
||||
top: 12,
|
||||
blur: 4,
|
||||
left: 0,
|
||||
enabled: true,
|
||||
opacity: 0.12,
|
||||
color: currentTheme.warning,
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
colors: [`rgba(${ hexToRgb(String(currentTheme.warning)) }, 1)`],
|
||||
stroke: {
|
||||
width: 4,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -21,
|
||||
left: -5,
|
||||
bottom: -8,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: display.thresholds.value.lg,
|
||||
options: {
|
||||
chart: {
|
||||
height: 151,
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.md,
|
||||
options: {
|
||||
chart: {
|
||||
height: 131,
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex justify-space-between h-100">
|
||||
<div class="d-flex flex-column justify-space-between gap-y-4">
|
||||
<div>
|
||||
<h6 class="text-h6 text-no-wrap mb-1">
|
||||
Profile Report
|
||||
</h6>
|
||||
<VChip color="warning">
|
||||
Year 2022
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-success text-sm">
|
||||
<VIcon
|
||||
icon="bx-up-arrow-alt"
|
||||
size="18"
|
||||
class="me-1"
|
||||
/>
|
||||
<span>68.2%</span>
|
||||
</div>
|
||||
|
||||
<h5 class="text-h5">
|
||||
$84,686k
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-100 d-flex align-center">
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:height="131"
|
||||
width="80%"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
103
resources/js/views/dashboard/AnalyticsRevenue.vue
Normal file
103
resources/js/views/dashboard/AnalyticsRevenue.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import { hexToRgb } from '@layouts/utils';
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
23,
|
||||
81,
|
||||
70,
|
||||
31,
|
||||
99,
|
||||
46,
|
||||
73,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const disabledText = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['disabled-opacity']})`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 2,
|
||||
distributed: true,
|
||||
columnWidth: '10%',
|
||||
endingShape: 'rounded',
|
||||
startingShape: 'rounded',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 1)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'M',
|
||||
'T',
|
||||
'W',
|
||||
'T',
|
||||
'F',
|
||||
'S',
|
||||
'S',
|
||||
],
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
tickPlacement: 'on',
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: disabledText,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -10,
|
||||
right: 7,
|
||||
bottom: -3,
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="pb-1">
|
||||
<h6 class="text-base font-weight-regular">
|
||||
Revenue
|
||||
</h6>
|
||||
<h5 class="text-h5 font-weight-medium">
|
||||
425k
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts type="bar" :height="110" :options="chartOptions" :series="series" />
|
||||
</VCard>
|
||||
</template>
|
||||
332
resources/js/views/dashboard/AnalyticsTotalRevenue.vue
Normal file
332
resources/js/views/dashboard/AnalyticsTotalRevenue.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<script setup>
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import {
|
||||
useDisplay,
|
||||
useTheme,
|
||||
} from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const display = useDisplay()
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: `${ new Date().getFullYear() - 1 }`,
|
||||
data: [
|
||||
18,
|
||||
7,
|
||||
15,
|
||||
29,
|
||||
18,
|
||||
12,
|
||||
9,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: `${ new Date().getFullYear() - 2 }`,
|
||||
data: [
|
||||
-13,
|
||||
-18,
|
||||
-9,
|
||||
-14,
|
||||
-5,
|
||||
-17,
|
||||
-15,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const disabledTextColor = `rgba(${ hexToRgb(String(currentTheme['on-surface'])) },${ variableTheme['disabled-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(String(currentTheme['on-surface'])) },${ variableTheme['high-emphasis-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
|
||||
|
||||
return {
|
||||
bar: {
|
||||
chart: {
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 6,
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.surface],
|
||||
},
|
||||
colors: [
|
||||
`rgba(${ hexToRgb(String(currentTheme.primary)) }, 1)`,
|
||||
`rgba(${ hexToRgb(String(currentTheme.info)) }, 1)`,
|
||||
],
|
||||
legend: {
|
||||
offsetX: -10,
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
horizontalAlign: 'left',
|
||||
fontFamily: 'Public Sans',
|
||||
labels: { colors: currentTheme.secondary },
|
||||
itemMargin: {
|
||||
vertical: 4,
|
||||
horizontal: 10,
|
||||
},
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
radius: 10,
|
||||
offsetX: -4,
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
grid: {
|
||||
borderColor,
|
||||
padding: { bottom: 5 },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '30%',
|
||||
endingShape: 'rounded',
|
||||
startingShape: 'rounded',
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: display.thresholds.value.xl,
|
||||
options: { plotOptions: { bar: { columnWidth: '43%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.lg,
|
||||
options: { plotOptions: { bar: { columnWidth: '50%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.md,
|
||||
options: { plotOptions: { bar: { columnWidth: '42%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.sm,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
],
|
||||
},
|
||||
radial: {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
labels: ['Growth'],
|
||||
stroke: { dashArray: 5 },
|
||||
colors: [`rgba(${ hexToRgb(String(currentTheme.primary)) }, 1)`],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
opacityTo: 0.6,
|
||||
opacityFrom: 1,
|
||||
shadeIntensity: 0.5,
|
||||
stops: [
|
||||
30,
|
||||
70,
|
||||
100,
|
||||
],
|
||||
inverseColors: false,
|
||||
gradientToColors: [currentTheme.primary],
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
endAngle: 150,
|
||||
startAngle: -140,
|
||||
hollow: { size: '55%' },
|
||||
track: { background: 'transparent' },
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: 25,
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
color: currentTheme.secondary,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '24px',
|
||||
color: primaryTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 900,
|
||||
options: { chart: { height: 200 } },
|
||||
},
|
||||
{
|
||||
breakpoint: 735,
|
||||
options: { chart: { height: 200 } },
|
||||
},
|
||||
{
|
||||
breakpoint: 660,
|
||||
options: { chart: { height: 200 } },
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: { chart: { height: 280 } },
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const balanceData = [
|
||||
{
|
||||
icon: 'bx-dollar',
|
||||
amount: '$32.5k',
|
||||
year: '2023',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
icon: 'bx-wallet',
|
||||
amount: '$41.2k',
|
||||
year: '2022',
|
||||
color: 'info',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="7"
|
||||
xl="8"
|
||||
:class="$vuetify.display.smAndUp ? 'border-e' : 'border-b'"
|
||||
>
|
||||
<VCardItem class="pb-0">
|
||||
<VCardTitle>Total Revenue</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<!-- bar chart -->
|
||||
<VueApexCharts
|
||||
id="bar-chart"
|
||||
type="bar"
|
||||
:height="336"
|
||||
:options="chartOptions.bar"
|
||||
:series="series"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="5"
|
||||
xl="4"
|
||||
>
|
||||
<VCardText class="text-center">
|
||||
<VBtn
|
||||
size="small"
|
||||
variant="tonal"
|
||||
append-icon="bx-chevron-down"
|
||||
class="mt-4"
|
||||
>
|
||||
2023
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="(item, index) in ['2023', '2022', '2021']"
|
||||
:key="index"
|
||||
:value="item"
|
||||
>
|
||||
<VListItemTitle>{{ item }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
|
||||
<!-- radial chart -->
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:height="200"
|
||||
:options="chartOptions.radial"
|
||||
:series="[78]"
|
||||
class="mt-6"
|
||||
/>
|
||||
|
||||
<p class="font-weight-medium text-high-emphasis mb-7">
|
||||
62% Company Growth
|
||||
</p>
|
||||
<div class="d-flex align-center justify-center gap-x-8 gap-y-4 flex-wrap">
|
||||
<div
|
||||
v-for="data in balanceData"
|
||||
:key="data.year"
|
||||
class="d-flex align-center gap-3"
|
||||
>
|
||||
<VAvatar
|
||||
:icon="data.icon"
|
||||
:color="data.color"
|
||||
size="38"
|
||||
rounded
|
||||
variant="tonal"
|
||||
/>
|
||||
|
||||
<div class="text-start">
|
||||
<span class="text-sm"> {{ data.year }}</span>
|
||||
<h6 class="text-base font-weight-medium">
|
||||
{{ data.amount }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#bar-chart .apexcharts-series[rel="2"] {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
116
resources/js/views/dashboard/AnalyticsTransactions.vue
Normal file
116
resources/js/views/dashboard/AnalyticsTransactions.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import chartInfo from '@images/cards/chart-info.png'
|
||||
import creditCardSuccess from '@images/cards/credit-card-success.png'
|
||||
import creditCardWarning from '@images/cards/credit-card-warning.png'
|
||||
import paypalError from '@images/cards/paypal-error.png'
|
||||
import walletPrimary from '@images/cards/wallet-primary.png'
|
||||
|
||||
const transactions = [
|
||||
{
|
||||
amount: +82.6,
|
||||
paymentMethod: 'Paypal',
|
||||
description: 'Send money',
|
||||
icon: paypalError,
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Wallet',
|
||||
amount: +270.69,
|
||||
description: 'Mac\'D',
|
||||
icon: walletPrimary,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
amount: +637.91,
|
||||
paymentMethod: 'Transfer',
|
||||
description: 'Refund',
|
||||
icon: chartInfo,
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Credit Card',
|
||||
amount: -838.71,
|
||||
description: 'Ordered Food',
|
||||
icon: creditCardSuccess,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Wallet',
|
||||
amount: +203.33,
|
||||
description: 'Starbucks',
|
||||
icon: walletPrimary,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Mastercard',
|
||||
amount: -92.45,
|
||||
description: 'Ordered Food',
|
||||
icon: creditCardWarning,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'Share',
|
||||
value: 'Share',
|
||||
},
|
||||
{
|
||||
title: 'Refresh',
|
||||
value: 'Refresh',
|
||||
},
|
||||
{
|
||||
title: 'Update',
|
||||
value: 'Update',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Transactions">
|
||||
<template #append>
|
||||
<div class="me-n3 mt-n2">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="item in transactions"
|
||||
:key="item.paymentMethod"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
variant="tonal"
|
||||
:color="item.color"
|
||||
:image="item.icon"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemSubtitle class="text-disabled mb-1">
|
||||
{{ item.paymentMethod }}
|
||||
</VListItemSubtitle>
|
||||
<VListItemTitle>
|
||||
{{ item.description }}
|
||||
</VListItemTitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<span class="me-1">{{ item.amount > 0 ? `+$${Math.abs(item.amount)}` : `-$${Math.abs(item.amount)}` }}</span>
|
||||
<span class="text-disabled">USD</span>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.6rem;
|
||||
}
|
||||
</style>
|
||||
432
resources/js/views/dashboard/provider/EcommerceStatistics.vue
Normal file
432
resources/js/views/dashboard/provider/EcommerceStatistics.vue
Normal file
@@ -0,0 +1,432 @@
|
||||
<script setup>
|
||||
import { hexToRgb } from "@layouts/utils";
|
||||
import moment from "moment";
|
||||
import { onBeforeMount, onMounted } from "vue";
|
||||
import VueApexCharts from "vue3-apexcharts";
|
||||
import { useTheme } from "vuetify";
|
||||
import { useStore } from "vuex";
|
||||
const vuetifyTheme = useTheme();
|
||||
const store = useStore();
|
||||
const total_sessions = ref();
|
||||
const total_call_time = ref();
|
||||
const avg_session_time = ref(0);
|
||||
const getAnalytics = ref([]);
|
||||
const getAnalyticsFilter = ref([]);
|
||||
const monthly_session_count = ref([]);
|
||||
const currentMonth = ref();
|
||||
const refChart = ref(null);
|
||||
const showGraph = ref(false);
|
||||
const selectedFilter = ref(null);
|
||||
const monthListf = ref([]);
|
||||
const isHover = ref(false);
|
||||
|
||||
const currentTheme = "rgb(38 84 129 / 60%)";
|
||||
const variableTheme = vuetifyTheme.current.value.variables;
|
||||
const labelColor = `rgba(203 40 225 / 60%)`;
|
||||
const labelPrimaryColor = `rgba(rgb(132 173 21 / 60%),0.1)`;
|
||||
const series = ref([
|
||||
{
|
||||
data: [],
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
console.log("refChart", refChart);
|
||||
});
|
||||
onBeforeMount(async () => {
|
||||
currentMonth.value = moment().format("MMMM") + "(Month to date)";
|
||||
console.log("cm", currentMonth.value);
|
||||
await store.dispatch("getAnalytics");
|
||||
getAnalytics.value = store.getters.getAnalytics;
|
||||
console.log("getAnalytics", getAnalytics.value);
|
||||
total_sessions.value = getAnalytics.value.total_sessions;
|
||||
total_call_time.value = getAnalytics.value.total_call_time;
|
||||
avg_session_time.value = getAnalytics.value.avg_session_time;
|
||||
// monthListf.value = getAnalytics.value.months_list;
|
||||
series.value[0].data = getAnalytics.value.data;
|
||||
const currentTheme = vuetifyTheme.current.value.colors;
|
||||
const variableTheme = vuetifyTheme.current.value.variables;
|
||||
const labelColor = `rgba(${hexToRgb(currentTheme["on-background"])})`;
|
||||
const labelPrimaryColor = `rgba(${hexToRgb(currentTheme.primary)},0.1)`;
|
||||
chartOptions.value.colors = [
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
`rgba(${hexToRgb(currentTheme.primary)}, 1)`,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
];
|
||||
|
||||
chartOptions.value.xaxis.labels.style.colors = labelColor;
|
||||
chartOptions.value.xaxis.categories = getAnalytics.value.months_list;
|
||||
showGraph.value = true;
|
||||
});
|
||||
const chartOptions1 = computed(() => {
|
||||
return chartOptions.value;
|
||||
});
|
||||
const chartOptions = ref({
|
||||
chart: {
|
||||
type: "bar",
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: "60%",
|
||||
columnWidth: "40%",
|
||||
startingShape: "rounded",
|
||||
endingShape: "rounded",
|
||||
borderRadius: 5,
|
||||
distributed: true,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
"rgba(rgb(132 173 21 / 60%),0.1)",
|
||||
"rgba(rgb(132 173 21 / 60%),0.1)",
|
||||
"rgba(rgb(132 173 21 / 60%),0.1)",
|
||||
"rgba(rgb(132 173 21 / 60%),0.1)",
|
||||
`rgba('38 84 129 / 60%', 1)`,
|
||||
"rgba(rgb(132 173 21 / 60%),0.1)",
|
||||
"rgba(rgb(132 173 21 / 60%),0.1)",
|
||||
],
|
||||
dataLabels: { enabled: false },
|
||||
legend: { show: false },
|
||||
xaxis: {
|
||||
categories: [],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: `rgba(203 40 225 / 60%)`,
|
||||
fontSize: "13px",
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
});
|
||||
const filter = [
|
||||
{
|
||||
value: "This Month",
|
||||
key: "current_month",
|
||||
},
|
||||
{
|
||||
value: "Past Month",
|
||||
key: "1_month",
|
||||
},
|
||||
{
|
||||
value: "Past 2 Month from today",
|
||||
key: "2_months",
|
||||
},
|
||||
{
|
||||
value: "Past 3 Month from today",
|
||||
key: "3_months",
|
||||
},
|
||||
{
|
||||
value: "Past 6 Month from today",
|
||||
key: "6_months",
|
||||
},
|
||||
{
|
||||
value: "Past 12 Month from today",
|
||||
key: "12_months",
|
||||
},
|
||||
|
||||
{
|
||||
value: "All Time",
|
||||
key: "all_time",
|
||||
},
|
||||
];
|
||||
const handleDateInput = async () => {
|
||||
await store.dispatch("getAnalyticsFilter", {
|
||||
filter: selectedFilter.value,
|
||||
});
|
||||
getAnalyticsFilter.value = store.getters.getAnalyticsFilter;
|
||||
console.log("getAnalyticsFilter", getAnalyticsFilter.value);
|
||||
total_sessions.value = getAnalyticsFilter.value.total_sessions;
|
||||
total_call_time.value = getAnalyticsFilter.value.total_call_time;
|
||||
avg_session_time.value = getAnalyticsFilter.value.avg_session_time;
|
||||
store.dispatch("updateIsLoading", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="mb-5">
|
||||
<VCol cols="12">
|
||||
<v-select
|
||||
v-model="selectedFilter"
|
||||
:items="filter"
|
||||
:label="currentMonth"
|
||||
item-title="value"
|
||||
item-value="key"
|
||||
@update:model-value="handleDateInput"
|
||||
prepend-inner-icon="mdi-calendar"
|
||||
density="compact"
|
||||
clearable
|
||||
class="custom-select"
|
||||
>
|
||||
</v-select>
|
||||
</VCol>
|
||||
<VCol cols="12" md="4" sm="6">
|
||||
<div>
|
||||
<VCard
|
||||
class="logistics-card-statistics cursor-pointer"
|
||||
:style="
|
||||
isHover
|
||||
? `border-block-end-color: rgb(var(--v-theme-primary))`
|
||||
: `border-block-end-color: rgba(var(--v-theme-primary),0.7)`
|
||||
"
|
||||
@mouseenter="isHover = true"
|
||||
@mouseleave="isHover = false"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-4 mb-2">
|
||||
<VAvatar variant="tonal" color="yellow" rounded>
|
||||
<VIcon icon="mdi-account-group" size="24" />
|
||||
</VAvatar>
|
||||
<h4 class="text-h5">Total Session</h4>
|
||||
</div>
|
||||
<h6 class="text-body-1 mb-2"></h6>
|
||||
<div class="d-flex gap-x-2 align-center">
|
||||
<div class="text-body-1 font-weight-medium me-2">
|
||||
{{ total_sessions }}
|
||||
</div>
|
||||
<span class="text-sm text-disabled"
|
||||
>Total session</span
|
||||
>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</VCol>
|
||||
<VCol cols="12" md="4" sm="6">
|
||||
<div>
|
||||
<VCard
|
||||
class="logistics-card-statistics cursor-pointer"
|
||||
:style="
|
||||
isHover
|
||||
? `border-block-end-color: rgb(var(--v-theme-warning))`
|
||||
: `border-block-end-color: rgba(var(--v-theme-warning),0.7)`
|
||||
"
|
||||
@mouseenter="isHover = true"
|
||||
@mouseleave="isHover = false"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-4 mb-2">
|
||||
<VAvatar variant="tonal" color="yellow" rounded>
|
||||
<VIcon icon="mdi-timer" size="24" />
|
||||
</VAvatar>
|
||||
<h4 class="text-h5">Session Minutes</h4>
|
||||
</div>
|
||||
<h6 class="text-body-1 mb-2"></h6>
|
||||
<div class="d-flex gap-x-2 align-center">
|
||||
<div class="text-body-1 font-weight-medium me-2">
|
||||
{{ total_call_time }}
|
||||
</div>
|
||||
<span class="text-sm text-disabled"
|
||||
>Total Call Minutes
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</VCol>
|
||||
<VCol cols="12" md="4" sm="6">
|
||||
<div>
|
||||
<VCard
|
||||
class="logistics-card-statistics cursor-pointer"
|
||||
:style="
|
||||
isHover
|
||||
? `border-block-end-color: rgb(var(--v-theme-info))`
|
||||
: `border-block-end-color: rgba(var(--v-theme-info),0.7)`
|
||||
"
|
||||
@mouseenter="isHover = true"
|
||||
@mouseleave="isHover = false"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-4 mb-2">
|
||||
<VAvatar variant="tonal" color="yellow" rounded>
|
||||
<VIcon icon="mdi-hourglass" size="24" />
|
||||
</VAvatar>
|
||||
<h4 class="text-h5">Avg Session Time</h4>
|
||||
</div>
|
||||
<h6 class="text-body-1 mb-2"></h6>
|
||||
<div class="d-flex gap-x-2 align-center">
|
||||
<div class="text-body-1 font-weight-medium me-2">
|
||||
{{ avg_session_time }}
|
||||
</div>
|
||||
<span class="text-sm text-disabled"
|
||||
>Avg Session Time
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VCard>
|
||||
<VCardText class="pt-6">
|
||||
<VRow>
|
||||
<VDialog
|
||||
v-model="store.getters.getIsLoading"
|
||||
width="110"
|
||||
height="150"
|
||||
color="primary"
|
||||
>
|
||||
<VCardText class="" style="color: white !important">
|
||||
<div class="demo-space-x">
|
||||
<VProgressCircular
|
||||
:size="40"
|
||||
color="primary"
|
||||
indeterminate
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VDialog>
|
||||
|
||||
<VCol cols="12" lg="4" md="4" sm="12" style="display: none">
|
||||
<div class="d-flex align-center gap-4">
|
||||
<v-icon size="42" color="rgb(var(--v-theme-yellow))"
|
||||
>mdi-account-group</v-icon
|
||||
>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<span class="text-h5 font-weight-medium mt-1">{{
|
||||
total_sessions
|
||||
}}</span>
|
||||
<span
|
||||
class="text-sm"
|
||||
color="rgb(var(--v-theme-yellow))"
|
||||
>
|
||||
Total Session
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
<VCol cols="12" lg="4" md="4" sm="12" style="display: none">
|
||||
<div class="d-flex align-center gap-4">
|
||||
<v-icon size="42" color="rgb(var(--v-theme-yellow))"
|
||||
>mdi-timer</v-icon
|
||||
>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<span class="text-h5 font-weight-medium">{{
|
||||
total_call_time
|
||||
}}</span>
|
||||
<span class="text-sm"> Session Minutes </span>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
<VCol cols="12" lg="4" md="4" sm="12" style="display: none">
|
||||
<div class="d-flex align-center gap-4">
|
||||
<v-icon size="42" color="rgb(var(--v-theme-yellow))"
|
||||
>mdi-hourglass</v-icon
|
||||
>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<span class="text-h5 font-weight-medium">{{
|
||||
avg_session_time
|
||||
}}</span>
|
||||
<span class="text-sm"> Avg Session Time </span>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
<VueApexCharts
|
||||
v-if="showGraph"
|
||||
ref="refChart"
|
||||
:options="chartOptions1"
|
||||
:series="series"
|
||||
:height="250"
|
||||
:width="850"
|
||||
class="graph-scroll"
|
||||
/>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
<style scoped>
|
||||
@media (max-width: 576px) {
|
||||
.graph-scroll {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.text-h4 {
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 500;
|
||||
line-height: 2.375rem;
|
||||
letter-spacing: normal !important;
|
||||
font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont,
|
||||
Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", Segoe UI Symbol;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.text-body-1 {
|
||||
font-size: 0.9375rem !important;
|
||||
font-weight: 400;
|
||||
line-height: 1.375rem;
|
||||
letter-spacing: normal !important;
|
||||
font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont,
|
||||
Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", Segoe UI Symbol;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.logistics-card-statistics {
|
||||
border-block-end-style: solid;
|
||||
border-block-end-width: 2px;
|
||||
|
||||
&:hover {
|
||||
border-block-end-width: 3px;
|
||||
margin-block-end: -1px;
|
||||
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.skin--bordered {
|
||||
.logistics-card-statistics {
|
||||
&:hover {
|
||||
margin-block-end: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-select :deep(.v-input__control) {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.custom-select :deep(.v-select__selection) {
|
||||
color: var(--v-primary-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.custom-select :deep(.v-input__slot) {
|
||||
border-color: var(--v-primary-lighten2) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-select:hover :deep(.v-input__slot) {
|
||||
border-color: var(--v-primary-base) !important;
|
||||
box-shadow: 0 0 0 1px var(--v-primary-base);
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 13px;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
1667
resources/js/views/dashboard/provider/PatientQueueMobile.vue
Normal file
1667
resources/js/views/dashboard/provider/PatientQueueMobile.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user