@ozdao/martyrs 0.2.602 → 0.2.603

package/src/modules/backoffice/components/pages/Dashboard.vue

@@ -1,155 +1,458 @@
 <template>
-	<div class="pd-medium bg-white">
-		<h2 class="mn-b-small">Overview</h2>
-		<div class="mn-b-medium cols-3 mobile:cols-1 gap-thin">
-			<Block class="pos-relative">
-				<span class="t-green fw-semi pos-absolute pos-t-small pos-r-small">+12.5%</span>
-				<div class="mn-b-medium radius-small w-max bg-main"><IconProfile class="i-medium mn-small"/></div>
-				<p class="h3 mn-b-thin">2,453</p>
-				<p>Active Members</p>
-			</Block>
+	<div class="pd-medium">
+		<!-- 1. KPI Cards -->
+		<div class="flex flex-v-center flex-justify-between mn-b-medium">
+			<h2>Overview</h2>
+			<Dropdown align="right" class="pos-relative z-index-3">
+				<template #label>
+					<div class="flex flex-v-center gap-thin bg-light pd-thin pd-l-small pd-r-small radius-small cursor-pointer">
+						<IconCalendar class="i-small" />
+						<span class="t-small fw-medium">{{ dateRangeLabel }}</span>
+					</div>
+				</template>
+				<Calendar
+					v-model:date="dateRange"
+					:allowRange="true"
+					class="bg-white radius-small pd-small"
+				/>
+			</Dropdown>
+		</div>
+		<div class="mn-b-medium cols-3 mobile:cols-1 gap-small">
+			<CardStat
+				:icon="IconProfile"
+				title="Active Users"
+				:displayValue="userStats.active?.toLocaleString() || '—'"
+				:subtitle="userStats.newThisMonth ? `+${userStats.newThisMonth} this month` : ''"
+			/>
+
+			<CardStat
+				:icon="IconOrders"
+				title="Total Orders"
+				:displayValue="orderStats.total?.orderCount?.toLocaleString() || '—'"
+				:subtitle="orderStats.monthly?.orderCount ? `+${orderStats.monthly.orderCount} this month` : ''"
+			/>
+
+			<CardStat
+				:icon="IconCash"
+				title="Total Revenue"
+				:displayValue="'฿' + (orderStats.total?.totalRevenue?.toLocaleString() || '0')"
+				:subtitle="orderStats.monthly?.totalRevenue ? `+฿${orderStats.monthly.totalRevenue.toLocaleString()} this month` : ''"
+			/>
+		</div>
+
+		<!-- 2. Revenue Chart — FULL WIDTH -->
+		<Block title="Revenue" class="mn-b-medium">
+			<div v-if="revenueChart.length" class="pos-relative" @mouseleave="hoveredRevenueIdx = -1">
+				<svg viewBox="0 0 500 200" class="w-100 d-block">
+					<!-- Grid lines -->
+					<line v-for="(tick, i) in revenueTicks" :key="'rg'+i" x1="50" x2="490" :y1="chartY(tick, maxRevenue)" :y2="chartY(tick, maxRevenue)" stroke="rgb(var(--light))" stroke-width="0.5"/>
+					<!-- Y labels -->
+					<text v-for="(tick, i) in revenueTicks" :key="'ry'+i" x="46" :y="chartY(tick, maxRevenue) + 3" text-anchor="end" fill="rgb(var(--grey))" font-size="10">{{ formatChartValue(tick) }}</text>
+					<!-- Area fill -->
+					<polygon :points="revenueAreaPoints" fill="rgb(var(--second))" fill-opacity="0.06"/>
+					<!-- Line -->
+					<polyline :points="revenueLinePoints" fill="none" stroke="rgb(var(--second))" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
+					<!-- Interactive hit areas -->
+					<circle v-for="(day, i) in revenueChart" :key="'rh'+i" :cx="chartX(i, revenueChart.length)" :cy="chartY(day.revenue, maxRevenue)" r="12" fill="transparent" @mouseenter="hoveredRevenueIdx = i"/>
+					<!-- Visible dots -->
+					<circle v-for="(day, i) in revenueChart" :key="'rd'+i" :cx="chartX(i, revenueChart.length)" :cy="chartY(day.revenue, maxRevenue)" :r="hoveredRevenueIdx === i ? 4 : 2" :fill="hoveredRevenueIdx === i ? 'rgb(var(--main))' : 'rgb(var(--second))'" style="pointer-events: none"/>
+					<!-- X labels (dates) -->
+					<template v-for="(day, i) in revenueChart" :key="'rx'+i">
+						<text v-if="i % revenueXStep === 0" :x="chartX(i, revenueChart.length)" y="195" text-anchor="middle" fill="rgb(var(--grey))" font-size="9">{{ formatXDate(day._id) }}</text>
+					</template>
+				</svg>
+				<!-- Hover Tooltip -->
+				<div
+					v-if="hoveredRevenueIdx >= 0"
+					class="pos-absolute bg-dark t-white pd-thin pd-l-small pd-r-small radius-small t-small fw-medium"
+					style="pointer-events: none; white-space: nowrap;"
+					:style="revenueTooltipStyle"
+				>
+					฿{{ revenueChart[hoveredRevenueIdx].revenue.toLocaleString() }} · {{ formatXDate(revenueChart[hoveredRevenueIdx]._id) }}
+				</div>
+			</div>
+			<p v-else class="t-transp">No revenue data</p>
+		</Block>
 
-			<Block class="pos-relative">
-				<span class="t-green fw-semi pos-absolute pos-t-small pos-r-small">+14.8%</span>
-				<div class="mn-b-medium radius-small w-max bg-main"><IconOrders class="i-medium mn-small"/></div>
-				<p class="h3 mn-b-thin">432</p>
-				<p>New Orders</p>
+		<!-- 3. Recent Orders + 4. Upcoming Events -->
+		<div class="mn-b-medium cols-2 mobile:cols-1 gap-small">
+			<Block title="Recent Orders">
+				<Feed
+					:showLoadMore="false"
+					:LoadMore="false"
+					:states="{ empty: { title: 'No Orders', description: 'No orders yet.' } }"
+					:store="{ read: (options) => ordersStore.actions.read(options), state: ordersStore.state }"
+					:options="{ limit: 5, page: 1, sortParam: 'createdAt', sortOrder: 'desc', dateStart: dateRange.start, dateEnd: dateRange.end }"
+					v-slot="{ items }"
+				>
+					<Table
+						class="radius-small bg-white"
+						:items="items"
+						:columns="orderColumns"
+					>
+						<template #cell-_id="{ value }">
+							<span class="t-dark fw-medium">#{{ formatId(value) }}</span>
+						</template>
+						<template #cell-positions="{ value }">
+							<span class="t-dark">{{ value?.length || 0 }} items</span>
+						</template>
+						<template #cell-status="{ value }">
+							<span
+								class="pd-thin pd-l-small pd-r-small radius-small t-small fw-medium"
+								:class="getStatusClass(value)"
+							>
+								{{ value }}
+							</span>
+						</template>
+						<template #cell-createdAt="{ value }">
+							<span class="t-dark t-small">{{ formatDate(value, { dateOnly: true }) }}</span>
+						</template>
+					</Table>
+				</Feed>
 			</Block>
 
-			<Block class="pos-relative">
-				<span class="t-green fw-semi pos-absolute pos-t-small pos-r-small">+25.1%</span>
-				<div class="mn-b-medium radius-small w-max bg-main"><IconProfile class="i-medium mn-small"/></div>
-				<p class="h3 mn-b-thin">$23,232</p>
-				<p>Monthly Revenue</p>
+			<Block title="Upcoming Events">
+				<Feed
+					:showLoadMore="false"
+					:LoadMore="false"
+					:states="{ empty: { title: 'No Events', description: 'No upcoming events.' } }"
+					:store="{ read: (options) => events.read(options), state: events.state }"
+					:options="{ sortParam: 'date.start', sortOrder: 'desc', limit: 5, page: 1 }"
+					v-slot="{ items }"
+					class="flex flex-column gap-thin"
+				>
+					<Card
+						v-for="event in items"
+						:key="event._id"
+						:to="`/events/${event.url || event._id}`"
+						:photo="event.cover"
+						:placeholder="IconEvents"
+						:title="event.name"
+						:subtitle="formatDate(event.date?.start, { dateOnly: true })"
+						classImage="flex-none w-3r h-3r radius-small bg-main-transp flex flex-center o-hidden"
+						classContent="flex-child o-hidden"
+						class="bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+					>
+						<template #actions>
+							<span
+								class="flex-none pd-thin pd-l-small pd-r-small radius-small t-small fw-medium"
+								:class="getEventStatusClass(event.date)"
+							>
+								{{ getEventStatus(event.date) }}
+							</span>
+						</template>
+					</Card>
+				</Feed>
 			</Block>
 		</div>
 
-		<div class="cols-2 mobile:cols-1 gap-thin">
-			<Block 
-				title="Recent Orders"
-				class="pos-relative"
-			>
+		<!-- 5. Recent Applications + 6. Recent Customers -->
+		<div class="mn-b-medium cols-2 mobile:cols-1 gap-small">
+			<Block title="Recent Applications">
 				<Feed
-	        :showLoadMore="false"
-	        :LoadMore="false"
-	        :states="{
-	          empty: {
-	            title: 'No Events Today',
-	            description: 'Currently, there are no events available.'
-	          }
-	        }"
-	        :store="{
-	          read: (options) => orders.actions.read(options),
-	          state: orders.state
-	        }"
-	        :options="{
-	            user: auth.state.user._id,
-	            limit: 5,
-	            page: 1
-	        }"
-	        v-slot="{ 
-	          items 
-	        }"
-	        class="cols-1 gap-thin"
-	      >
-					<Table 
-						class="radius-semi bg-white"
-						:items="items"
-						:columns="[{ 
-					    key: '_id', 
-					    label: 'ID',
-							formatter: (value) => `#${value.slice(0, 4)}...${value.slice(-4)}` 
-					  },
-					  { 
-					    key: 'customer.target.profile.name', 
-					    label: 'Name',
-					    formatter: (value) => `👤 ${value}`
-					  },
-					  { 
-					    key: 'positions', 
-					    label: 'Name',
-					    formatter: (value) => value?.length || 0
-					  },
-					  {
-					    key: 'status',
-					    label: 'Status',
-					    component: StatusBadge
-					  },
-					  {
-					    key: 'createdAt',
-					    label: 'Metadata',
-					    formatter: (value) => new Date(value).toLocaleDateString()
-					  }]" 
+					:showLoadMore="false"
+					:LoadMore="false"
+					:states="{ empty: { title: 'No Applications', description: 'No applications.' } }"
+					:store="{ read: (options) => applications.read(options), state: applications.state }"
+					:options="{ sortParam: 'createdAt', sortOrder: 'desc', limit: 5, page: 1, dateStart: dateRange.start, dateEnd: dateRange.end }"
+					v-slot="{ items }"
+					class="flex flex-column gap-thin"
+				>
+					<Card
+						v-for="app in items"
+						:key="app._id"
+						:to="`/backoffice/applications/${app._id}`"
+						:placeholder="IconFile"
+						:title="app.profile?.name || app.name || 'Application'"
+						:subtitle="formatDate(app.createdAt)"
+						classImage="flex-none w-3r h-3r radius-small bg-main-transp flex flex-center o-hidden"
+						classContent="flex-child o-hidden"
+						class="bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
 					/>
-	      </Feed>
-
+				</Feed>
 			</Block>
 
-			<Block 
-				title="Activity Feed"
-				class="pos-relative"
+			<Block title="Recent Customers">
+				<Feed
+					:showLoadMore="false"
+					:LoadMore="false"
+					:states="{ empty: { title: 'No Customers', description: 'No customers.' } }"
+					:store="{ read: (options) => customers.read(options), state: customers.state }"
+					:options="{ sortParam: 'createdAt', sortOrder: 'desc', limit: 5, page: 1, dateStart: dateRange.start, dateEnd: dateRange.end }"
+					v-slot="{ items }"
+					class="flex flex-column gap-thin"
 				>
+					<Card
+						v-for="customer in items"
+						:key="customer._id"
+						:to="`/backoffice/customers/${customer._id}`"
+						:photo="customer.avatar || customer.profile?.photo"
+						:placeholder="IconProfile"
+						:title="customer.profile?.name || customer.name || customer.phone || 'Customer'"
+						:subtitle="formatDate(customer.createdAt)"
+						classImage="flex-none w-3r h-3r radius-extra bg-main-transp flex flex-center o-hidden"
+						classContent="flex-child o-hidden"
+						class="bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+					/>
+				</Feed>
 			</Block>
 		</div>
 
-	</div>
+		<!-- 7. Popular Products — FULL WIDTH -->
+		<Block title="Popular Products" class="mn-b-medium">
+			<div v-if="orderStats.popularProducts?.length" class="cols-5 tablet:cols-3 mobile:cols-2 gap-small">
+				<CardProduct
+					v-for="product in orderStats.popularProducts"
+					:key="product._id"
+					:product="product"
+					:showAddToCart="false"
+					class="bg-white"
+				>
+					<p class="t-dark t-small mn-t-thin">{{ product.totalQuantity }} sold · ฿{{ product.totalRevenue?.toLocaleString() }}</p>
+				</CardProduct>
+			</div>
+			<p v-else class="t-transp">No product data</p>
+		</Block>
 
+		<!-- 8. Recent Registrations + 9. Upcoming Rents -->
+		<div class="mn-b-medium cols-2 mobile:cols-1 gap-small">
+			<Block title="Recent Registrations">
+				<Feed
+					:showLoadMore="false"
+					:LoadMore="false"
+					:states="{ empty: { title: 'No Registrations', description: 'No recent registrations.' } }"
+					:store="{ read: (options) => users.actions.read(options), state: users.state }"
+					:options="{ sortParam: 'createdAt', sortOrder: 'desc', limit: 5, page: 1, dateStart: dateRange.start, dateEnd: dateRange.end }"
+					v-slot="{ items }"
+					class="flex flex-column gap-thin"
+				>
+					<Card
+						v-for="user in items"
+						:key="user._id"
+						:to="`/users/${user._id}`"
+						:photo="user.avatar || user.profile?.photo"
+						:placeholder="IconProfile"
+						:title="user.profile?.name || user.username || user.email || 'User'"
+						:subtitle="formatDate(user.createdAt)"
+						classImage="flex-none w-3r h-3r radius-extra bg-main-transp flex flex-center o-hidden"
+						classContent="flex-child o-hidden"
+						class="bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+					/>
+				</Feed>
+			</Block>
 
+			<Block title="Upcoming Rents">
+				<Feed
+					:showLoadMore="false"
+					:LoadMore="false"
+					:search="false"
+					:states="{ empty: { title: 'No Rents', description: 'No upcoming bookings.' } }"
+					:store="{ read: (options) => rents.actions.read(options), state: rents.state }"
+					:options="{ sortParam: 'startDate', sortOrder: 'desc', limit: 5 }"
+					v-slot="{ items }"
+					class="flex flex-column gap-thin"
+				>
+					<Card
+						v-for="rent in items"
+						:key="rent._id"
+						:to="`/backoffice/orders/${rent.order}`"
+						:placeholder="IconCalendar"
+						:title="rent.product?.name || 'Rent'"
+						:subtitle="`${formatDate(rent.startDate)} — ${formatDate(rent.endDate)}`"
+						classImage="flex-none w-3r h-3r radius-small bg-main-transp flex flex-center o-hidden"
+						classContent="flex-child o-hidden"
+						class="bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+					/>
+				</Feed>
+			</Block>
+		</div>
+	</div>
 </template>
 
-<script setup="props">
-/////////////////////////////
-// COMPONENT DEPENDENCIES
-/////////////////////////////
-import { ref, onMounted } from 'vue';
+<script setup>
+import { ref, computed, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
 
-// Mobile Module
 import Block from '@martyrs/src/components/Block/Block.vue'
 import Feed from '@martyrs/src/components/Feed/Feed.vue'
 import Table from '@martyrs/src/components/Table/Table.vue'
-import StatusBadge from '@martyrs/src/components/Table/StatusBadge.vue'
-
+import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'
+import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
+import Card from '@martyrs/src/modules/core/views/components/blocks/Card.vue'
+import CardStat from '@martyrs/src/modules/core/views/components/blocks/CardStat.vue'
+import CardProduct from '@martyrs/src/modules/products/components/blocks/CardProduct.vue'
 
 import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue'
-
-import IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue'
-import IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'
-import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue'
-import IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue'
-import IconGallery from '@martyrs/src/modules/icons/entities/IconGallery.vue'
 import IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue'
-import IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue'
-/////////////////////////////
-// HELPERS
-/////////////////////////////
-import { useRoute, useRouter } from 'vue-router'
+import IconCash from '@martyrs/src/modules/icons/entities/IconCash.vue'
+import IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'
+import IconFile from '@martyrs/src/modules/icons/entities/IconFile.vue'
+import IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue'
 
-import * as auth  from '@martyrs/src/modules/auth/views/store/auth.js'
-import * as organizations  from '@martyrs/src/modules/organizations/store/organizations.js'
-import * as orders  from '@martyrs/src/modules/orders/store/orders.js'
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
+import $axios from '@martyrs/src/modules/core/views/utils/axios-instance.js'
+import * as ordersStore from '@martyrs/src/modules/orders/store/orders.js'
+import * as events from '@martyrs/src/modules/events/store/events.js'
+import * as rents from '@martyrs/src/modules/rents/views/store/rents.store.js'
+import applications from '@martyrs/src/modules/orders/store/applications.js'
+import customers from '@martyrs/src/modules/orders/store/customers.store.js'
+import * as users from '@martyrs/src/modules/auth/views/store/users.js'
 
 const route = useRoute()
-const router = useRouter()
-/////////////////////////////
-// CREATED
-/////////////////////////////
-const props = defineProps({
-  favorites: Array,
-});
+const { formatDate } = useGlobalMixins()
+
+const orderStats = ref({})
+const userStats = ref({})
+const hoveredRevenueIdx = ref(-1)
+
+const dateRange = ref({
+	start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+	end: new Date()
+})
 
-const selectedOrganization = ref(null);
-const publics = ref([]);
+const dateRangeLabel = computed(() => {
+	if (!dateRange.value?.start || !dateRange.value?.end) return 'Select dates'
+	return formatDate(dateRange.value.start, { dayMonth: true }) + ' — ' + formatDate(dateRange.value.end, { dayMonth: true })
+})
 
 
-const columns = [
-  
+// Order table columns
+const orderColumns = [
+	{ key: '_id', label: 'Order' },
+	{ key: 'positions', label: 'Items' },
+	{ key: 'status', label: 'Status' },
+	{ key: 'createdAt', label: 'Date' }
 ]
-/////////////////////////////
-// MOUNTED
-/////////////////////////////
-onMounted(async () =>{
+
+// Chart constants: viewBox 500x200, chart area x:50-490 y:20-170
+const CHART_LEFT = 50
+const CHART_RIGHT = 490
+const CHART_TOP = 20
+const CHART_BOTTOM = 170
+
+function chartX(i, total) {
+	if (total <= 1) return (CHART_LEFT + CHART_RIGHT) / 2
+	return CHART_LEFT + (i / (total - 1)) * (CHART_RIGHT - CHART_LEFT)
+}
+
+function chartY(value, max) {
+	if (!max) return CHART_BOTTOM
+	return CHART_BOTTOM - (value / max) * (CHART_BOTTOM - CHART_TOP)
+}
+
+function calcTicks(max) {
+	if (!max || max <= 0) return [0]
+	const step = Math.pow(10, Math.floor(Math.log10(max))) / 2
+	const ticks = []
+	for (let v = 0; v <= max; v += step) ticks.push(Math.round(v))
+	if (ticks[ticks.length - 1] < max) ticks.push(Math.round(max))
+	return ticks.length > 6 ? ticks.filter((_, i) => i % 2 === 0) : ticks
+}
+
+function formatChartValue(val) {
+	if (val >= 1000) return '฿' + Math.round(val / 1000) + 'k'
+	return '฿' + Math.round(val)
+}
+
+function calcXStep(count) {
+	if (count <= 8) return 1
+	if (count <= 16) return 2
+	if (count <= 30) return 5
+	return 7
+}
+
+const revenueChart = computed(() => {
+	const data = orderStats.value.dailyRevenue
+	if (!data?.length) return []
+	return data.slice(-30)
+})
+
+const maxRevenue = computed(() => {
+	if (!revenueChart.value.length) return 1
+	return Math.max(...revenueChart.value.map(d => d.revenue)) || 1
+})
+
+const revenueTicks = computed(() => calcTicks(maxRevenue.value))
+const revenueXStep = computed(() => calcXStep(revenueChart.value.length))
+
+const revenueLinePoints = computed(() => {
+	return revenueChart.value.map((d, i) =>
+		`${chartX(i, revenueChart.value.length)},${chartY(d.revenue, maxRevenue.value)}`
+	).join(' ')
+})
+
+const revenueAreaPoints = computed(() => {
+	if (!revenueChart.value.length) return ''
+	const len = revenueChart.value.length
+	return `${chartX(0, len)},${CHART_BOTTOM} ${revenueLinePoints.value} ${chartX(len - 1, len)},${CHART_BOTTOM}`
+})
+
+const revenueTooltipStyle = computed(() => {
+	if (hoveredRevenueIdx.value < 0) return {}
+	const i = hoveredRevenueIdx.value
+	const len = revenueChart.value.length
+	const day = revenueChart.value[i]
+	const x = chartX(i, len)
+	const y = chartY(day.revenue, maxRevenue.value)
+	return {
+		left: `${(x / 500) * 100}%`,
+		top: `${(y / 200) * 100}%`,
+		transform: 'translate(-50%, -100%) translateY(-0.5rem)'
+	}
 })
-</script>
 
-<style lang="scss">
-</style>
+// Formatters
+function formatId(id) {
+	return id ? `${id.slice(0, 4)}...${id.slice(-4)}` : ''
+}
+
+function formatXDate(dateStr) {
+	if (!dateStr) return ''
+	return formatDate(dateStr, { dayMonth: true })
+}
+
+function getStatusClass(status) {
+	const classes = {
+		pending: 'bg-second-transp t-second',
+		processing: 'bg-main-transp t-main',
+		created: 'bg-main-transp t-main',
+		confirmed: 'bg-green-transp t-green',
+		completed: 'bg-green-transp t-green',
+		cancelled: 'bg-red-transp t-red'
+	}
+	return classes[status] || 'bg-light t-dark'
+}
+
+function getEventStatus(date) {
+	if (!date?.start) return 'No date'
+	const now = new Date()
+	const start = new Date(date.start)
+	const end = date.end ? new Date(date.end) : start
+	if (now > end) return 'Finished'
+	if (now >= start && now <= end) return 'Live'
+	const diffDays = Math.ceil((start - now) / (1000 * 60 * 60 * 24))
+	if (diffDays <= 1) return 'Tomorrow'
+	if (diffDays <= 7) return `In ${diffDays} days`
+	return 'Upcoming'
+}
+
+function getEventStatusClass(date) {
+	const status = getEventStatus(date)
+	if (status === 'Finished') return 'bg-light t-dark'
+	if (status === 'Live') return 'bg-green-transp t-green'
+	if (status === 'Tomorrow') return 'bg-second-transp t-second'
+	return 'bg-main-transp t-main'
+}
+
+watchEffect(async () => {
+	const params = {}
+	if (dateRange.value?.start) params.startDate = new Date(dateRange.value.start).toISOString()
+	if (dateRange.value?.end) params.endDate = new Date(dateRange.value.end).toISOString()
+	const [orders, stats] = await Promise.all([
+		$axios.get('/api/orders/stats', { params }),
+		$axios.get('/api/users/stats', { params })
+	])
+	orderStats.value = orders.data
+	userStats.value = stats.data
+})
+</script>

package/src/modules/backoffice/configs/navigation.backoffice.config.js

@@ -12,13 +12,11 @@ import IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue
 export const navigationItems = [
   {
     category: 'Menu',
-    visible: () => true,
     items: [
       {
         title: 'Organizations',
         iconComponent: IconGroups,
         route: () => '/backoffice/organizations',
-        visible: () => true
       },
       {
         title: 'Community',

package/src/modules/backoffice/router/backoffice.router.js

@@ -16,7 +16,6 @@ export function getRoutes(options = {}) {
           meta: {
             sidebar_navigation: Navigation,
             sidebar_navigation_items: navigationItems,
-            sidebar_width_hidden: 'w-2r',
           },
           props: {
             newsletterPopup: 12344,
@@ -36,30 +35,6 @@ export function getRoutes(options = {}) {
               },
               component: () => import(/* webpackChunkName: 'BackofficeGallery' */ '../components/pages/Dashboard.vue'),
             },
-            {
-              path: 'organizations',
-              name: 'Backoffice Organizations',
-              meta: {
-                title: {
-                  en: 'Backoffice Organizations',
-                  ru: 'Управление Организациями',
-                },
-                authorize: [],
-              },
-              component: () => import(/* webpackChunkName: 'BackofficeOrganizations' */ '@martyrs/src/modules/organizations/components/pages/Organizations.vue'),
-            },
-            {
-              path: 'community',
-              name: 'Backoffice Community',
-              meta: {
-                title: {
-                  en: 'Backoffice Community',
-                  ru: 'Управление Сообществом',
-                },
-                authorize: [],
-              },
-              component: () => import(/* webpackChunkName: 'BackofficeCommunity' */ '@martyrs/src/modules/community/components/pages/Blog.vue'),
-            },
           ],
         }
       ],