Viewing file:  over-all.blade.php (10.85 KB) -rw-rw-rw-
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
{!! view_render_event('admin.dashboard.index.over_all.before') !!}
<!-- Over Details Vue Component -->
<v-dashboard-over-all-stats>
<!-- Shimmer -->
<x-admin::shimmer.dashboard.index.over-all />
</v-dashboard-over-all-stats>
{!! view_render_event('admin.dashboard.index.over_all.after') !!}
@pushOnce('scripts')
<script
type="text/x-template"
id="v-dashboard-over-all-stats-template"
>
<!-- Shimmer -->
<template v-if="isLoading">
<x-admin::shimmer.dashboard.index.over-all />
</template>
<!-- Total Sales Section -->
<template v-else>
<!-- Stats Cards -->
<div class="grid grid-cols-3 gap-4 max-md:grid-cols-2 max-sm:grid-cols-1">
<!-- Average Revenue Card -->
<div class="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
<p class="text-xs font-medium text-gray-600 dark:text-gray-300">
@lang('admin::app.dashboard.index.over-all.average-lead-value')
</p>
<div class="flex gap-2">
<p class="text-xl font-bold dark:text-gray-300">
@{{ report.statistics.average_lead_value.formatted_total }}
</p>
<div class="flex items-center gap-0.5">
<span
class="text-base !font-semibold text-green-500"
:class="[report.statistics.average_lead_value.progress < 0 ? 'icon-stats-down text-red-500 dark:!text-red-500' : 'icon-stats-up text-green-500 dark:!text-green-500']"
></span>
<p
class="text-xs font-semibold text-green-500"
:class="[report.statistics.average_lead_value.progress < 0 ? 'text-red-500' : 'text-green-500']"
>
@{{ Math.abs(report.statistics.average_lead_value.progress.toFixed(2)) }}%
</p>
</div>
</div>
</div>
<!-- Average Revenue Card -->
<div class="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
<p class="text-xs font-medium text-gray-600 dark:text-gray-300">
@lang('admin::app.dashboard.index.over-all.total-leads')
</p>
<div class="flex gap-2">
<p class="text-xl font-bold dark:text-gray-300">
@{{ report.statistics.total_leads.current }}
</p>
<div class="flex items-center gap-0.5">
<span
class="text-base !font-semibold text-green-500"
:class="[report.statistics.total_leads.progress < 0 ? 'icon-stats-down text-red-500 dark:!text-red-500' : 'icon-stats-up text-green-500 dark:!text-green-500']"
></span>
<p
class="text-xs font-semibold text-green-500"
:class="[report.statistics.total_leads.progress < 0 ? 'text-red-500' : 'text-green-500']"
>
@{{ Math.abs(report.statistics.total_leads.progress.toFixed(2)) }}%
</p>
</div>
</div>
</div>
<!-- Average Lead Per Day -->
<div class="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
<p class="text-xs font-medium text-gray-600 dark:text-gray-300">
@lang('admin::app.dashboard.index.over-all.average-leads-per-day')
</p>
<div class="flex gap-2">
<p class="text-xl font-bold dark:text-gray-300">
@{{ report.statistics.average_leads_per_day.current.toFixed(2) }}
</p>
<div class="flex items-center gap-0.5">
<span
class="text-base !font-semibold text-green-500"
:class="[report.statistics.average_leads_per_day.progress < 0 ? 'icon-stats-down text-red-500 dark:!text-red-500' : 'icon-stats-up text-green-500 dark:!text-green-500']"
></span>
<p
class="text-xs font-semibold text-green-500"
:class="[report.statistics.average_leads_per_day.progress < 0 ? 'text-red-500' : 'text-green-500']"
>
@{{ Math.abs(report.statistics.average_leads_per_day.progress.toFixed(2)) }}%
</p>
</div>
</div>
</div>
<!-- Total Quotes -->
<div class="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
<p class="text-xs font-medium text-gray-600 dark:text-gray-300">
@lang('admin::app.dashboard.index.over-all.total-quotations')
</p>
<div class="flex gap-2">
<p class="text-xl font-bold dark:text-gray-300">
@{{ report.statistics.total_quotations.current }}
</p>
<div class="flex items-center gap-0.5">
<span
class="text-base !font-semibold text-green-500"
:class="[report.statistics.total_quotations.progress < 0 ? 'icon-stats-down text-red-500 dark:!text-red-500' : 'icon-stats-up text-green-500 dark:!text-green-500']"
></span>
<p
class="text-xs font-semibold text-green-500"
:class="[report.statistics.total_quotations.progress < 0 ? 'text-red-500' : 'text-green-500']"
>
@{{ Math.abs(report.statistics.total_quotations.progress.toFixed(2)) }}%
</p>
</div>
</div>
</div>
<!-- Total Persons -->
<div class="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
<p class="text-xs font-medium text-gray-600 dark:text-gray-300">
@lang('admin::app.dashboard.index.over-all.total-persons')
</p>
<div class="flex gap-2">
<p class="text-xl font-bold dark:text-gray-300">
@{{ report.statistics.total_persons.current }}
</p>
<div class="flex items-center gap-0.5">
<span
class="text-base !font-semibold text-green-500"
:class="[report.statistics.total_persons.progress < 0 ? 'icon-stats-down text-red-500 dark:!text-red-500' : 'icon-stats-up text-green-500 dark:!text-green-500']"
></span>
<p
class="text-xs font-semibold text-green-500"
:class="[report.statistics.total_persons.progress < 0 ? 'text-red-500' : 'text-green-500']"
>
@{{ Math.abs(report.statistics.total_persons.progress.toFixed(2)) }}%
</p>
</div>
</div>
</div>
<!-- Total Organizations -->
<div class="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
<p class="text-xs font-medium text-gray-600 dark:text-gray-300">
@lang('admin::app.dashboard.index.over-all.total-organizations')
</p>
<div class="flex gap-2">
<p class="text-xl font-bold dark:text-gray-300">
@{{ report.statistics.total_organizations.current }}
</p>
<div class="flex items-center gap-0.5">
<span
class="text-base !font-semibold text-green-500"
:class="[report.statistics.total_organizations.progress < 0 ? 'icon-stats-down text-red-500 dark:!text-red-500' : 'icon-stats-up text-green-500 dark:!text-green-500']"
></span>
<p
class="text-xs font-semibold text-green-500"
:class="[report.statistics.total_organizations.progress < 0 ? 'text-red-500' : 'text-green-500']"
>
@{{ Math.abs(report.statistics.total_organizations.progress.toFixed(2)) }}%
</p>
</div>
</div>
</div>
</div>
</template>
</script>
<script type="module">
app.component('v-dashboard-over-all-stats', {
template: '#v-dashboard-over-all-stats-template',
data() {
return {
report: [],
isLoading: true,
chart: undefined,
}
},
mounted() {
this.getStats({});
this.$emitter.on('reporting-filter-updated', this.getStats);
},
methods: {
getStats(filters) {
this.isLoading = true;
var filters = Object.assign({}, filters);
filters.type = 'over-all';
this.$axios.get("{{ route('admin.dashboard.stats') }}", {
params: filters
})
.then(response => {
this.report = response.data;
this.isLoading = false;
})
.catch(error => {});
},
}
});
</script>
@endPushOnce
|