@ozdao/martyrs 0.2.581 → 0.2.583

package/src/modules/auth/views/components/pages/UserDashboard.vue

@@ -1,160 +1,249 @@
 <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"><IconGroups class="i-medium mn-small"/></div>
-				<p class="h3 mn-b-thin">{{ stats.organizations || 0 }}</p>
-				<p>My Groups</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">{{ stats.orders || 0 }}</p>
-				<p>My Orders</p>
-			</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"><IconEvents class="i-medium mn-small"/></div>
-				<p class="h3 mn-b-thin">{{ stats.events || 0 }}</p>
-				<p>My Events</p>
-			</Block>
+	<div class="pd-medium">
+		<h2 class="mn-b-medium">Overview</h2>
+
+		<!-- Stats Cards -->
+		<div class="mn-b-medium cols-3 mobile:cols-1 gap-small">
+			<router-link
+				:to="`/users/${auth.state.user._id}/organizations`"
+				class="d-block bg-light pd-medium radius-medium hover-scale-1 transition-default"
+			>
+				<div class="flex flex-v-center gap-small mn-b-small">
+					<div class="radius-small bg-main flex flex-center">
+						<IconGroups class="i-medium mn-small" :fill="'rgb(var(--white))'"/>
+					</div>
+					<span class="t-grey t-small">My Groups</span>
+				</div>
+				<p class="h2 fw-semi">{{ stats.organizations || 0 }}</p>
+			</router-link>
+
+			<router-link
+				:to="`/users/${auth.state.user._id}/orders`"
+				class="d-block bg-light pd-medium radius-medium hover-scale-1 transition-default"
+			>
+				<div class="flex flex-v-center gap-small mn-b-small">
+					<div class="radius-small bg-main flex flex-center">
+						<IconOrders class="i-medium mn-small" :fill="'rgb(var(--white))'"/>
+					</div>
+					<span class="t-grey t-small">My Orders</span>
+				</div>
+				<p class="h2 fw-semi">{{ stats.orders || 0 }}</p>
+			</router-link>
+
+			<router-link
+				:to="`/users/${auth.state.user._id}/events`"
+				class="d-block bg-light pd-medium radius-medium hover-scale-1 transition-default"
+			>
+				<div class="flex flex-v-center gap-small mn-b-small">
+					<div class="radius-small bg-main flex flex-center">
+						<IconEvents class="i-medium mn-small" :fill="'rgb(var(--white))'"/>
+					</div>
+					<span class="t-grey t-small">My Events</span>
+				</div>
+				<p class="h2 fw-semi">{{ stats.events || 0 }}</p>
+			</router-link>
 		</div>
 
-		<div class="cols-2 mobile:cols-1 gap-thin">
-			<Block
-				title="Recent Orders"
-				class="pos-relative"
-			>
+		<!-- Content Grid -->
+		<div class="cols-2 mobile:cols-1 gap-small">
+			<!-- Recent Orders -->
+			<Block title="Recent Orders">
 				<Feed
-	        :showLoadMore="false"
-	        :LoadMore="false"
-	        :states="{
-	          empty: {
-	            title: 'No Orders',
-	            description: 'You have no orders yet.'
-	          }
-	        }"
-	        :store="{
-	          read: (options) => orders.actions.read(options),
-	          state: orders.state
-	        }"
-	        :options="{
-	            customer: auth.state.user._id,
-	            limit: 5,
-	            page: 1
-	        }"
-	        v-slot="{
-	          items
-	        }"
-	        class="cols-1 gap-thin"
-	      >
+					:showLoadMore="false"
+					:states="{
+						empty: {
+							title: 'No Orders',
+							description: 'You have no orders yet.'
+						}
+					}"
+					:store="{
+						read: (options) => orders.actions.read(options),
+						state: orders.state
+					}"
+					:options="{
+						customer: auth.state.user._id,
+						limit: 5,
+						page: 1
+					}"
+					v-slot="{ items }"
+				>
 					<Table
-						class="radius-semi bg-white"
+						class="radius-small bg-white"
 						:items="items"
-						:columns="[{
-					    key: '_id',
-					    label: 'ID',
-							formatter: (value) => `#${value.slice(0, 4)}...${value.slice(-4)}`
-					  },
-					  {
-					    key: 'positions',
-					    label: 'Items',
-					    formatter: (value) => value?.length || 0
-					  },
-					  {
-					    key: 'status',
-					    label: 'Status',
-					    component: StatusBadge
-					  },
-					  {
-					    key: 'createdAt',
-					    label: 'Date',
-					    formatter: (value) => new Date(value).toLocaleDateString()
-					  }]"
-					/>
-	      </Feed>
-
+						:columns="columns.orders"
+					>
+						<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-grey t-small">{{ formatDate(value) }}</span>
+						</template>
+					</Table>
+				</Feed>
 			</Block>
 
-			<Block
-				title="Upcoming Events"
-				class="pos-relative"
-			>
+			<!-- Upcoming Events -->
+			<Block title="Upcoming Events">
 				<Feed
-	        :showLoadMore="false"
-	        :LoadMore="false"
-	        :states="{
-	          empty: {
-	            title: 'No Events',
-	            description: 'You have no upcoming events.'
-	          }
-	        }"
-	        :store="{
-	          read: (options) => events.read(options),
-	        }"
-	        :options="{
-	            creator: auth.state.user._id,
-	            sortParam: 'date.start',
-	            sortOrder: 'asc',
-	            limit: 5,
-	            page: 1
-	        }"
-	        v-slot="{
-	          items
-	        }"
-	        class="cols-1 gap-thin"
-	      >
-					<CardEvent
-	          v-for="event in items"
-	          :key="event._id"
-	          :event="event"
-	          :user="auth.state.user._id"
-	          :type="'compact'"
-	          class="bg-light radius-medium"
-	        />
-	      </Feed>
+					:showLoadMore="false"
+					:states="{
+						empty: {
+							title: 'No Events',
+							description: 'You have no upcoming events.'
+						}
+					}"
+					:store="{
+						read: (options) => events.read(options)
+					}"
+					:options="{
+						creator: auth.state.user._id,
+						sortParam: 'date.start',
+						sortOrder: 'asc',
+						limit: 5,
+						page: 1
+					}"
+					v-slot="{ items }"
+					class="flex flex-column gap-thin"
+				>
+					<router-link
+						v-for="event in items"
+						:key="event._id"
+						:to="`/events/${event._id}`"
+						class="d-block bg-white pd-small radius-small hover-scale-1 transition-default"
+					>
+						<div class="flex flex-v-center gap-small">
+							<div
+								class="flex-none w-3r h-3r radius-small bg-main-transp flex flex-center o-hidden"
+							>
+								<img
+									v-if="event.cover"
+									:src="(FILE_SERVER_URL || '') + event.cover"
+									class="w-100 h-100 object-fit-cover"
+									alt=""
+								/>
+								<IconEvents v-else class="i-regular" :fill="'rgb(var(--main))'"/>
+							</div>
+							<div class="flex-child o-hidden">
+								<p class="fw-medium t-truncate mn-b-nano">{{ event.name }}</p>
+								<p class="t-grey t-small">{{ formatEventDate(event.date) }}</p>
+							</div>
+							<div class="flex-none">
+								<span
+									class="pd-thin pd-l-small pd-r-small radius-small t-small fw-medium"
+									:class="getEventStatusClass(event.date)"
+								>
+									{{ getEventStatus(event.date) }}
+								</span>
+							</div>
+						</div>
+					</router-link>
+				</Feed>
 			</Block>
 		</div>
-
 	</div>
-
-
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router'
+import { ref, onMounted, inject } from 'vue'
+import { useRouter } from 'vue-router'
 
 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 CardEvent from '@martyrs/src/modules/events/components/blocks/CardEvent.vue';
 
 import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue'
 import IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'
 import IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue'
 
-import * as auth  from '@martyrs/src/modules/auth/views/store/auth.js'
-import * as orders  from '@martyrs/src/modules/orders/store/orders.js'
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+import * as orders from '@martyrs/src/modules/orders/store/orders.js'
 import * as events from '@martyrs/src/modules/events/store/events.js'
 
-const route = useRoute()
+const FILE_SERVER_URL = inject('FILE_SERVER_URL', '')
 const router = useRouter()
 
 const stats = ref({
-  organizations: 0,
-  orders: 0,
-  events: 0
+	organizations: 0,
+	orders: 0,
+	events: 0
 })
 
+const columns = {
+	orders: [
+		{ key: '_id', label: 'Order' },
+		{ key: 'positions', label: 'Items' },
+		{ key: 'status', label: 'Status' },
+		{ key: 'createdAt', label: 'Date' }
+	]
+}
+
+// Formatters
+const formatId = (id) => id ? `${id.slice(0, 4)}...${id.slice(-4)}` : ''
+
+const formatDate = (date) => {
+	if (!date) return ''
+	return new Date(date).toLocaleDateString()
+}
+
+const formatEventDate = (date) => {
+	if (!date?.start) return ''
+	const start = new Date(date.start)
+	return start.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+}
+
+const getStatusClass = (status) => {
+	const classes = {
+		pending: 'bg-second-transp t-second',
+		processing: 'bg-main-transp t-main',
+		completed: 'bg-green-transp t-green',
+		cancelled: 'bg-red-transp t-red'
+	}
+	return classes[status] || 'bg-light t-grey'
+}
+
+const 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'
+}
+
+const getEventStatusClass = (date) => {
+	const status = getEventStatus(date)
+	if (status === 'Finished') return 'bg-light t-grey'
+	if (status === 'Live') return 'bg-green-transp t-green'
+	if (status === 'Tomorrow') return 'bg-second-transp t-second'
+	return 'bg-main-transp t-main'
+}
+
 onMounted(async () => {
-  // Load user stats if needed
+	// Load stats
+	try {
+		const [orgsData, ordersData, eventsData] = await Promise.all([
+			// Load counts if needed
+		])
+	} catch (e) {
+		console.error('Failed to load dashboard stats:', e)
+	}
 })
 </script>
 

package/src/modules/auth/views/configs/navigation.user.config.js

@@ -3,6 +3,7 @@ import IconHome from '@martyrs/src/modules/icons/entities/IconHome.vue';
 import IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue';
 import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue';
 import IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue';
+import IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue';
 import IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';
 import IconSettings from '@martyrs/src/modules/icons/entities/IconSettings.vue';
 import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';
@@ -60,25 +61,30 @@ export const navigationItems = [
         route: (auth, route) => `/users/${route.params._id}/organizations`,
         visible: () => isModuleInstalled('organizations')
       },
+      {
+        title: 'Posts',
+        iconComponent: IconCommunity,
+        route: (auth, route) => `/users/${route.params._id}/blogposts`,
+        visible: () => isModuleInstalled('community')
+      },
     ]
   },
   {
     category: 'Orders',
-    visible: () => true,
+    visible: (auth, route) => isModuleInstalled('orders') && (
+      auth.user && (
+        auth.user._id === route.params._id ||
+        (auth.access.roles &&
+          (auth.access.roles.includes('ROLE_MODERATOR') ||
+            auth.access.roles.includes('ROLE_ADMIN'))
+        )
+      )
+    ),
     items: [
       {
         title: 'Orders',
         iconComponent: IconOrders,
-        route: (auth, route) => `/users/${route.params._id}/orders`,
-        visible: (auth, route) => isModuleInstalled('orders') && (
-          auth.user && (
-            auth.user._id === route.params._id ||
-            (auth.access.roles &&
-              (auth.access.roles.includes('ROLE_MODERATOR') ||
-               auth.access.roles.includes('ROLE_ADMIN'))
-            )
-          )
-        )
+        route: (auth, route) => `/users/${route.params._id}/orders`
       },
     ]
   },

package/src/modules/auth/views/router/users.router.js

@@ -33,7 +33,6 @@ export function getUsersRoutes(options = {}) {
             },
             sidebar_hover: false,
             sidebar_navigation_items: navigationItems,
-            sidebar_header_component: ProfileCard,
             sidebar_footer_component: HelpCard,
             sidebarOpenOnEnter: true,
             sidebarCloseOnLeave: true

package/src/modules/core/views/classes/ws.manager.js

@@ -1,7 +1,8 @@
+import { reactive } from 'vue';
+
 class WebSocketManager {
   constructor() {
     this.socket = null;
-    this.isConnected = false;
     this.reconnectAttempts = 0;
     this.maxReconnectAttempts = 5;
     this.reconnectDelay = 3000;
@@ -17,6 +18,24 @@ class WebSocketManager {
     this.rpcCallbacks = new Map();
     this.rpcTimeout = 30000; // 30 секунд таймаут по умолчанию
     this.rpcIdCounter = 0;
+
+    // Реактивное состояние
+    this.state = reactive({
+      isConnected: false,
+      wasConnected: false,  // был ли когда-либо подключен
+    });
+  }
+
+  // Геттер для обратной совместимости
+  get isConnected() {
+    return this.state.isConnected;
+  }
+
+  set isConnected(value) {
+    this.state.isConnected = value;
+    if (value) {
+      this.state.wasConnected = true;
+    }
   }
 
   initialize(options = {}) {

package/src/modules/core/views/utils/vue-app-renderer.js

@@ -78,9 +78,6 @@ export function renderAndMountApp({ createApp, hooks = {} }) {
       initialState = null;
     }
 
-
-
-
     if (initialState) {
       console.log('[AUTH COOKIE DEBUG] Browser initialState.auth:', initialState.auth);
       console.log('[AUTH COOKIE DEBUG] Has token?', !!initialState?.auth?.access?.token);
@@ -89,6 +86,15 @@ export function renderAndMountApp({ createApp, hooks = {} }) {
       // Применяем начальное состояние ко всем модулям (true = гидратация)
       store.setInitialState(initialState, true);
 
+      // Гидратация session из auth данных — напрямую в reactive state
+      if (initialState?.auth?.user?._id && store.core?.state?.session) {
+        store.core.state.session.userId = initialState.auth.user._id;
+        store.core.state.session.token = initialState.auth.access?.token;
+        store.core.state.session.roles = initialState.auth.access?.roles;
+        store.core.state.session.accesses = initialState.auth.accesses || [];
+        console.log('[AUTH COOKIE DEBUG] Session hydrated with userId:', initialState.auth.user._id);
+      }
+
       if (initialState?.auth?.access?.token) {
         console.log('[AUTH COOKIE DEBUG] Setting auth token from initialState');
 

package/src/modules/notifications/components/elements/NotificationBadge.vue

@@ -47,7 +47,7 @@
               Mark all read
             </button>
 
-            <router-link class="w-100 bg-black t-white radius-small button" to="/notifications" @click="closeNotifications">
+            <router-link class="w-100 bg-black t-white radius-small button" :to="`/users/${auth.state.user?._id}/notifications`" @click="closeNotifications">
               View all 
             </router-link>
           </div>

package/src/modules/notifications/components/layouts/NotificationsLayout.vue

@@ -1,69 +1,25 @@
 <template>
-  <div class="notifications-layout">
-    <div class="">
-      <router-view></router-view>
-    </div>
-    
-    <div v-if="!wsConnected" class="connection-status">
-      <div class="connection-warning">
-        <span class="warning-icon">⚠️</span>
-        <span class="warning-text">
-          Notification service disconnected. 
-          <button @click="reconnect" class="reconnect-btn">Reconnect</button>
-        </span>
-      </div>
+  <div>
+    <router-view />
+
+    <!-- Показываем только если WS был подключен и потом отвалился -->
+    <div v-if="wsManager.state.wasConnected && !wsManager.state.isConnected" class="pos-fixed pos-b-0 pos-l-0 pos-r-0 pd-small bg-warning t-center">
+      <span>⚠️ Notification service disconnected.</span>
+      <button class="mn-l-thin bg-none bd-none cursor-pointer t-main" @click="reconnect">Reconnect</button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, inject, ref, onMounted, onUnmounted } from 'vue';
+import { computed, inject } from 'vue';
 import wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';
 
-// Get notification manager from store
 const store = inject('store');
-
 const notificationManager = computed(() => store.notificationManager || null);
 
-// Реактивное состояние WebSocket
-const wsConnected = ref(wsManager.isConnected);
-
-// ID слушателей для очистки
-const openListenerId = ref(null);
-const closeListenerId = ref(null);
-
-onMounted(() => {
-  // Подписываемся на события WebSocket
-  openListenerId.value = wsManager.addEventListener('open', () => {
-    wsConnected.value = true;
-  });
-  
-  closeListenerId.value = wsManager.addEventListener('close', () => {
-    wsConnected.value = false;
-  });
-  
-  // Устанавливаем начальное состояние
-  wsConnected.value = wsManager.isConnected;
-});
-
-onUnmounted(() => {
-  // Очищаем слушатели
-  if (openListenerId.value) {
-    wsManager.removeEventListener('open', openListenerId.value);
-  }
-  if (closeListenerId.value) {
-    wsManager.removeEventListener('close', closeListenerId.value);
-  }
-});
-
-
-// Methods
 const reconnect = () => {
   if (notificationManager.value) {
     notificationManager.value.initialize();
   }
 };
-</script>
-
-<style scoped>
-</style>
+</script>

package/src/modules/notifications/components/pages/Notifications.vue

@@ -1,36 +1,35 @@
 <template>
-  <div class="notifications-page pd-small">
-    <Tab
-      v-model:selected="activeTab"
-      :tabs="[
-        { label: `All Notifications${unreadCount > 0 ? ` (${unreadCount})` : ''}`, value: 'all' },
-        { label: 'Notification Settings', value: 'preferences' }
+  <div class="mobile:pd-thin pd-medium">
+    <SectionPageTitle
+      v-if="!MOBILE_APP"
+      :title="`Notifications${unreadCount > 0 ? ` (${unreadCount})` : ''}`"
+      :actions="[
+        { method: () => isSettingsPopup = true, label: 'Settings' }
       ]"
-      class="flex-child-default gap-micro scroll-hide bg-light radius-medium h-max pd-thin mn-b-thin o-x-scroll"
-      classTab="bg-white"
+      class="mn-b-small"
     />
-    
-    <div class="tab-content">
-      <notifications-list v-if="activeTab === 'all'" />
-      <notification-preferences v-else-if="activeTab === 'preferences'" />
-    </div>
+
+    <NotificationsList />
+
+    <Popup
+      :isPopupOpen="isSettingsPopup"
+      @close-popup="isSettingsPopup = false"
+      title="Notification Settings"
+      class="bg-white pd-medium w-m-30r radius-big"
+    >
+      <NotificationPreferences />
+    </Popup>
   </div>
 </template>
 
 <script setup>
 import { ref, inject } from 'vue';
-import { useRoute } from 'vue-router';
-import Tab from "@martyrs/src/components/Tab/Tab.vue";
+import SectionPageTitle from '@martyrs/src/modules/core/views/components/sections/SectionPageTitle.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
 import NotificationsList from '../sections/NotificationsList.vue';
 import NotificationPreferences from '../sections/NotificationPreferences.vue';
 
-// Get route and notification state
-const route = useRoute();
 const { unreadCount } = inject('useNotifications')();
 
-// Set initial active tab based on route query param or default to 'all'
-const activeTab = ref(route.query.tab || 'all');
+const isSettingsPopup = ref(false);
 </script>
-
-<style scoped>
-</style>