initial commit
This commit is contained in:
Inshal
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