boursecu/boursecu_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better dashboard style

Browse Source
This commit is contained in:
mohmdsdg
2026-06-21 21:55:54 +03:30
parent 5586985d1e
commit 87da74a51b
14 changed files with 1683 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/index.vue
+282 -128
View File
@@ -3,47 +3,48 @@
<a-spin :spinning="loading">
<!-- Hero -->
<section
class="rounded-xl bg-gradient-to-l from-[#0f766e] via-[#1e3a5f] to-[#0f172a] px-3 py-2 text-white shadow-md"
class="dashboard-hero rounded-xl bg-gradient-to-l from-[#0f766e] via-[#1e3a5f] to-[#0f172a] px-3 py-2.5 text-white shadow-md"
>
<div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5">
<div class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
<DashboardLabelWithHelp
label="مظنه"
:help="copy.hero"
size="xs"
text-class="text-[11px]"
label-class="text-white/80"
/>
<span class="text-[11px] text-white/80">/گرم</span>
<span class="text-lg font-bold leading-none">{{ usePrice(master?.price ?? 0, true, '') }}</span>
<span class="text-white/35">·</span>
<span class="text-[11px] text-white/80">مثقال</span>
<span class="text-sm font-semibold leading-none">{{ usePrice(master?.pricem ?? 0, true, '') }}</span>
<span v-if="master?.update_date" class="text-[10px] text-white/55">
· {{ toJalali(master.update_date) }}
</span>
</div>
<div class="flex shrink-0 flex-wrap items-center gap-2">
<div class="flex items-center gap-1.5 leading-none rounded-lg bg-white/10 px-2 py-1 text-[11px]">
<BaseIcon icon="vuesax-linear:card" size="14" class="text-white/90" />
<div class="flex flex-col gap-2.5 md:flex-row md:items-center md:justify-between md:gap-3">
<div class="order-2 min-w-0 md:order-1">
<div class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
<DashboardLabelWithHelp
label="واریز آنلاین"
:help="copy.gateway"
label="مظنه"
:help="copy.hero"
size="xs"
text-class="text-[11px]"
label-class="text-white/85"
label-class="text-white/80"
/>
<span class="font-semibold">{{ master?.is_gateway_open ? 'فعال' : 'غیرفعال' }}</span>
<a-switch size="small" :checked="master?.is_gateway_open" @change="onToggleGateway" />
<span class="text-[11px] text-white/80">/گرم</span>
<span class="text-lg font-bold leading-none">{{ usePrice(master?.price ?? 0, true, '') }}</span>
<span class="text-white/35">·</span>
<span class="text-[11px] text-white/80">مثقال</span>
<span class="text-sm font-semibold leading-none">{{ usePrice(master?.pricem ?? 0, true, '') }}</span>
</div>
<router-link :to="{ name: 'ordersMain' }">
<a-button type="primary" size="small" class="!h-7 !rounded-lg !px-3">سفارشات</a-button>
</router-link>
<p v-if="master?.update_date" class="mt-1 text-[10px] leading-none text-white/55">
{{ toJalali(master.update_date) }}
</p>
</div>
<div class="order-1 w-full shrink-0 md:order-2 md:w-auto">
<DashboardQuickActionsBar
:quick-action-loading="quickActionLoading"
:has-product-snapshot="hasProductSnapshot"
:product-snapshot-count="productSnapshotCount"
@wallet="showQuickWallet = true"
@deactivate-all="deactivateAll"
@restore-products="restoreProducts"
@close-all-buy="closeAllBuy"
@close-all-sell="closeAllSell"
@sync-prices="syncPrices"
@sync-show="syncShow"
/>
</div>
</div>
</section>
<DashboardQuickWalletModal v-model:visible="showQuickWallet" />
<!-- KPI -->
<section class="mt-2 grid grid-cols-2 items-stretch gap-2 md:grid-cols-3 xl:grid-cols-6">
<DashboardStatCard
@@ -111,19 +112,32 @@
<p class="text-sm font-bold text-slate-900 dark:text-slate-50">{{ metric.value }}</p>
</div>
</div>
<div class="flex flex-wrap items-end gap-2">
<BaseDatePicker v-model:value="startDate" format="YYYY-MM-DD HH:mm:ss" class="!w-44" />
<span class="pb-1 text-xs text-slate-500 dark:text-slate-400">تا</span>
<BaseDatePicker v-model:value="endDate" format="YYYY-MM-DD HH:mm:ss" class="!w-44" />
<a-button type="primary" size="small" @click="applyDateRange">اعمال</a-button>
<a-button size="small" @click="refreshAll">بروزرسانی</a-button>
<div class="flex flex-wrap items-center gap-2">
<BaseDatePicker
v-model:value="startDate"
format="YYYY-MM-DD HH:mm:ss"
class="!w-44"
size="small"
/>
<span class="text-xs text-slate-500 dark:text-slate-400">تا</span>
<BaseDatePicker
v-model:value="endDate"
format="YYYY-MM-DD HH:mm:ss"
class="!w-44"
size="small"
/>
<div class="flex items-center gap-2">
<a-button type="primary" size="small" @click="applyDateRange">اعمال</a-button>
<a-button size="small" @click="refreshAll">بروزرسانی</a-button>
</div>
</div>
</section>
<!-- Charts row 1 -->
<section class="mt-2 grid grid-cols-1 gap-2 xl:grid-cols-2">
<div class="rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-600 dark:bg-slate-900">
<div class="dashboard-panel">
<DashboardSectionHeader title="ترکیب درآمد" :help="copy.charts.incomeMix" />
<div class="dashboard-chart-wrap">
<apexchart
v-if="(finance?.fullPriceSood ?? 0) + (finance?.fullPriceKarmozd ?? 0) > 0"
type="donut"
@@ -137,31 +151,31 @@
>
در این بازه داده مالی ثبت نشده
</div>
</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-600 dark:bg-slate-900">
<div class="dashboard-panel">
<div class="flex items-start justify-between gap-2">
<DashboardSectionHeader
class="!mb-0 min-w-0 flex-1"
title="حجم خرید و فروش"
:help="copy.charts.buySellVolume"
/>
<a-segmented
<a-radio-group
v-model:value="flowRange"
button-style="solid"
size="small"
class="mt-0.5 shrink-0"
:options="[
{ label: '۷ روز', value: 'week' },
{ label: '۳۰ روز', value: 'month' },
]"
@change="loadFlow"
/>
class="shrink-0"
>
<a-radio-button value="week">۷ روز</a-radio-button>
<a-radio-button value="month">۳۰ روز</a-radio-button>
</a-radio-group>
</div>
<a-spin :spinning="flowLoading">
<apexchart
v-if="flowData.length"
type="bar"
height="220"
:height="flowChartHeight"
:options="flowChartOptions"
:series="flowChartOptions.series"
/>
@@ -176,29 +190,27 @@
</section>
<!-- Price chart -->
<section
class="mt-2 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-600 dark:bg-slate-900"
>
<div class="flex flex-wrap items-start justify-between gap-2">
<section class="dashboard-panel mt-2">
<div class="mb-3 flex flex-wrap items-start justify-between gap-2">
<DashboardSectionHeader
class="!mb-0 min-w-0 flex-1"
title="نمودار مظنه"
:help="copy.charts.priceChart"
/>
<a-segmented
<a-radio-group
v-model:value="priceRange"
button-style="solid"
size="small"
class="mt-0.5 shrink-0"
:options="[
{ label: '۲۴س', value: 'DAILY' },
{ label: 'هفته', value: 'WEEKLY' },
{ label: 'ماه', value: 'MONTHLY' },
]"
@change="switchPriceRange"
/>
class="dashboard-price-range shrink-0"
>
<a-radio-button value="DAILY">24 ساعت اخیر</a-radio-button>
<a-radio-button value="WEEKLY">هفته گذشته</a-radio-button>
<a-radio-button value="MONTHLY">ماه گذشته</a-radio-button>
</a-radio-group>
</div>
<apexchart
v-if="priceSeries.length"
:key="priceRange"
type="area"
height="200"
:options="priceChartOptions"
@@ -212,52 +224,103 @@
</div>
</section>
<!-- Orders -->
<!-- Orders + side charts -->
<section class="mt-2 grid grid-cols-1 gap-2 xl:grid-cols-3">
<div
class="rounded-xl border border-amber-200 bg-amber-50/40 p-3 dark:border-amber-800/50 dark:bg-amber-950/25 xl:col-span-1"
>
<div class="mb-2 flex items-start justify-between gap-2">
<DashboardSectionHeader
class="!mb-0 min-w-0 flex-1"
title="سفارشات باز"
:help="copy.orders.pending"
/>
<a-badge :count="pendingOrders.length" :overflow-count="99" />
</div>
<div v-if="pendingOrders.length" class="max-h-64 space-y-1.5 overflow-y-auto">
<div
v-for="order in pendingOrders"
:key="order.id"
class="rounded-lg border border-amber-200/80 bg-white p-2 dark:border-amber-800/40 dark:bg-slate-900"
>
<div class="flex items-center justify-between gap-2">
<span class="font-bold text-slate-900 dark:text-slate-100">#{{ order.id }}</span>
<span class="rounded-lg px-2 py-0.5 text-xs" :class="directionClass(order.direction)">
{{ directionLabel(order.direction) }}
</span>
</div>
<p class="mt-1 truncate text-sm text-slate-800 dark:text-slate-200">
{{ order.customer?.name ?? '—' }}
</p>
<div class="mt-2 grid grid-cols-2 gap-1 text-xs text-slate-700 dark:text-slate-300">
<span>مقدار: {{ formatGram(order.amount) }}</span>
<span>مظنه: {{ usePrice(order.price_original ?? 0, true, '') }}</span>
<span>قیمت مشتری: {{ usePrice(order.price ?? 0, true, '') }}</span>
<span class="font-medium text-emerald-700 dark:text-emerald-400">
سود: {{ usePrice(order.total_fee ?? 0, true, '') }}
</span>
</div>
<div class="flex flex-col gap-2 xl:col-span-1">
<div class="dashboard-panel">
<div class="mb-2 flex items-start justify-between gap-2">
<DashboardSectionHeader
class="!mb-0 min-w-0 flex-1"
title="ساعات شلوغ سفارش"
:help="copy.orders.peakHours"
/>
<a-radio-group
v-model:value="peakHoursRange"
button-style="solid"
size="small"
class="shrink-0"
>
<a-radio-button :value="7">۷ روز</a-radio-button>
<a-radio-button :value="30">۳۰ روز</a-radio-button>
</a-radio-group>
</div>
<div
v-if="peakHoursData?.peak_hour != null && peakHoursData.peak_count > 0"
class="mb-3 flex flex-wrap items-center gap-1.5"
>
<span
class="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-800 dark:bg-amber-950/40 dark:text-amber-200"
>
شلوغ‌ترین: {{ formatPeakHourLabel(peakHoursData.peak_hour) }}
<span class="mr-1 font-normal opacity-75">({{ peakHoursData.peak_count }} سفارش)</span>
</span>
<span
v-for="slot in topPeakHours.slice(1)"
:key="slot.hour"
class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-600 dark:bg-slate-800 dark:text-slate-300"
>
{{ formatPeakHourLabel(slot.hour) }} · {{ slot.total }}
</span>
</div>
<a-spin :spinning="peakHoursLoading">
<apexchart
v-if="peakHoursData?.total_orders"
type="bar"
:height="peakHoursChartHeight"
:options="peakHoursChartOptions"
:series="peakHoursChartOptions.series"
/>
<div
v-else
class="flex h-44 items-center justify-center text-xs text-slate-500 dark:text-slate-400"
>
در این بازه سفارشی ثبت نشده
</div>
</a-spin>
</div>
<div v-else class="py-6 text-center text-xs text-amber-800/70 dark:text-amber-300/70">
سفارش بازی نیست
<div class="dashboard-panel">
<div class="mb-3 flex flex-wrap items-start justify-between gap-2">
<DashboardSectionHeader
class="!mb-0 min-w-0 flex-1"
title="فعالیت محصولات"
:help="copy.charts.productActivity"
/>
<a-radio-group
v-model:value="productActivityRange"
button-style="solid"
size="small"
class="dashboard-product-range shrink-0"
>
<a-radio-button value="day">روزانه</a-radio-button>
<a-radio-button value="week">هفتگی</a-radio-button>
<a-radio-button value="month">ماهانه</a-radio-button>
<a-radio-button value="year">سالانه</a-radio-button>
</a-radio-group>
</div>
<a-spin :spinning="productActivityLoading">
<div v-if="productReportItems.length" class="dashboard-product-chart min-w-0">
<apexchart
:key="`${productActivityRange}-${productChartHeight}-${productChartLabelWidth}`"
type="bar"
:height="productChartHeight"
:options="productChartOptions"
:series="productChartOptions.series"
/>
</div>
<div
v-else
class="flex h-44 items-center justify-center text-xs text-slate-500 dark:text-slate-400"
>
در این بازه معامله‌ای برای محصولات ثبت نشده
</div>
</a-spin>
</div>
</div>
<div
class="rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-600 dark:bg-slate-900 xl:col-span-2"
>
<div class="dashboard-panel xl:col-span-2">
<div class="mb-2 flex items-start justify-between gap-2">
<DashboardSectionHeader
class="!mb-0 min-w-0 flex-1"
@@ -322,63 +385,60 @@
</section>
<!-- Bottom row -->
<section class="mt-2 grid grid-cols-1 gap-2 lg:grid-cols-2">
<div class="rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-600 dark:bg-slate-900">
<section class="mt-2 grid grid-cols-1 gap-2 xl:grid-cols-2">
<div class="dashboard-panel">
<DashboardSectionHeader title="مشتریان" :help="copy.customers" />
<div class="grid grid-cols-2 gap-2">
<div class="grid grid-cols-2 gap-2.5 md:grid-cols-4">
<div
v-for="item in customerMetricItems"
:key="item.label"
class="rounded-lg px-2.5 py-2"
class="dashboard-metric-cell"
:class="item.bgClass"
>
<DashboardLabelWithHelp
:label="item.label"
:help="item.help"
size="xs"
text-class="text-[10px]"
text-class="text-[11px]"
:label-class="item.labelClass"
root-class="dashboard-metric-label"
/>
<p class="text-lg font-bold" :class="item.valueClass">{{ item.value }}</p>
<p class="dashboard-metric-value" :class="item.valueClass">{{ item.value }}</p>
</div>
</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-600 dark:bg-slate-900">
<div class="dashboard-panel">
<DashboardSectionHeader title="موجودی کیف پول‌ها" :help="copy.wallet" />
<div class="space-y-1.5 text-sm text-slate-800 dark:text-slate-200">
<div class="grid grid-cols-1 gap-2.5 sm:grid-cols-3">
<div
v-for="item in walletMetricItems"
:key="item.label"
class="flex items-center justify-between gap-2 rounded-lg px-2.5 py-2"
class="dashboard-metric-cell"
:class="item.bgClass"
>
<DashboardLabelWithHelp
:label="item.label"
:help="item.help"
size="sm"
label-class="text-slate-800 dark:text-slate-200"
size="xs"
text-class="text-[11px]"
label-class="text-slate-600 dark:text-slate-400"
root-class="dashboard-metric-label"
/>
<span class="shrink-0 font-bold text-slate-900 dark:text-slate-50">{{ item.value }}</span>
<p class="dashboard-metric-value text-slate-900 dark:text-slate-50">{{ item.value }}</p>
</div>
</div>
</div>
</section>
<section
v-if="(master?.GT_products_report?.length ?? 0) > 0"
class="mt-2 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-600 dark:bg-slate-900"
>
<DashboardSectionHeader title="فعالیت محصولات" :help="copy.charts.productActivity" />
<apexchart type="bar" height="220" :options="productChartOptions" :series="productChartOptions.series" />
</section>
</a-spin>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { computed, ref } from 'vue'
import DashboardLabelWithHelp from '@/pages/dashboard/components/DashboardLabelWithHelp.vue'
import DashboardQuickActionsBar from '@/pages/dashboard/components/DashboardQuickActionsBar.vue'
import DashboardQuickWalletModal from '@/pages/dashboard/components/DashboardQuickWalletModal.vue'
import DashboardSectionHeader from '@/pages/dashboard/components/DashboardSectionHeader.vue'
import DashboardStatCard from '@/pages/dashboard/components/DashboardStatCard.vue'
import {
@@ -395,6 +455,7 @@ import {
dashboardWalletMetrics,
} from '@/pages/dashboard/dashboardSectionCopy'
import { useDashboardPage } from '@/pages/dashboard/composables/useDashboardPage'
import { useDashboardQuickActions } from '@/pages/dashboard/composables/useDashboardQuickActions'
const copy = {
hero: dashboardHero,
@@ -417,17 +478,23 @@ const {
balance,
walletSums,
recentOrders,
pendingOrders,
customerStats,
peakHoursRange,
peakHoursData,
peakHoursLoading,
topPeakHours,
priceRange,
flowRange,
flowData,
priceSeries,
productActivityRange,
productActivityLoading,
productReportItems,
productChartHeight,
productChartLabelWidth,
refreshAll,
applyDateRange,
switchPriceRange,
loadFlow,
onToggleGateway,
loadProductActivity,
formatGram,
directionLabel,
directionClass,
@@ -435,12 +502,34 @@ const {
stsLabel,
financeChartOptions,
flowChartOptions,
flowChartHeight,
peakHoursChartOptions,
peakHoursChartHeight,
formatPeakHourLabel,
priceChartOptions,
productChartOptions,
usePrice,
toJalali,
customerStats,
} = useDashboardPage()
const {
quickActionLoading,
hasProductSnapshot,
productSnapshotCount,
loadSnapshotStatus,
deactivateAll,
restoreProducts,
closeAllBuy,
closeAllSell,
syncShow,
syncPrices,
} = useDashboardQuickActions(refreshAll)
const showQuickWallet = ref(false)
void loadSnapshotStatus()
const dateRangeMetrics = computed(() => [
{
label: 'واریز بانکی',
@@ -517,15 +606,80 @@ const walletMetricItems = computed(() => [
</script>
<style scoped>
.dashboard-panel {
@apply rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-600 dark:bg-slate-900;
}
.dashboard-metric-cell {
@apply flex min-h-[4.75rem] flex-col justify-between rounded-lg px-3 py-3;
}
.dashboard-metric-value {
@apply mt-2 text-base font-bold leading-snug break-words;
}
.dashboard-v2 :deep(.dashboard-metric-label) {
align-items: flex-start;
line-height: 1.4;
}
.dashboard-v2 :deep(.dashboard-metric-label > span:first-child) {
overflow: visible;
text-overflow: unset;
white-space: normal;
line-height: 1.4;
}
.dashboard-chart-wrap {
@apply px-1 pb-1;
}
.dashboard-v2 :deep(.apexcharts-legend) {
padding-inline: 12px !important;
}
.dashboard-v2 :deep(.apexcharts-legend-series) {
margin-inline: 8px !important;
}
.dashboard-v2 :deep(.apexcharts-tooltip) {
direction: rtl;
}
.dashboard-v2 :deep(.dashboard-section-header) {
overflow: visible;
padding-bottom: 2px;
}
.dashboard-v2 :deep(.dashboard-section-title) {
line-height: 1.6;
}
.dashboard-v2 :deep(.dashboard-section-title > span:first-child) {
line-height: 1.6;
overflow: visible;
padding-bottom: 2px;
}
.dashboard-v2 :deep(.dashboard-label-with-help .ant-tooltip-disabled-compatible-wrapper),
.dashboard-v2 :deep(.dashboard-label-with-help .dashboard-help-trigger) {
display: inline-flex !important;
align-items: center !important;
line-height: 0 !important;
vertical-align: middle !important;
line-height: 1 !important;
vertical-align: baseline !important;
}
.dashboard-product-chart {
@apply min-w-0 px-0.5 md:px-1;
}
.dashboard-product-chart :deep(.apexcharts-yaxis-texts-g text) {
text-anchor: start !important;
direction: rtl;
unicode-bidi: plaintext;
}
.dashboard-product-chart :deep(.apexcharts-yaxis) {
transform: translateX(-2px);
}
</style>