@ozdao/martyrs 0.2.582 → 0.2.584

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,6 +61,12 @@ 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')
+      },
     ]
   },
   {
@@ -77,8 +84,7 @@ export const navigationItems = [
       {
         title: 'Orders',
         iconComponent: IconOrders,
-        route: (auth, route) => `/users/${route.params._id}/orders`,
-        
+        route: (auth, route) => `/users/${route.params._id}/orders`
       },
     ]
   },

package/src/modules/community/components/layouts/Community.vue

@@ -4,7 +4,7 @@
 
 			<div style="flex: 1 1 auto" class="w-100 h-100 pos-relative">
 				<header v-if="!route.params.url && route.name !== 'Create BlogPost'" class="bg-light pd-medium radius-medium mobile:radius-zero scroll-hide o-y-visible t-black pos-relative  mn-b-thin flex-v-center t-left flex-nowrap flex">
-		    	<h2 class="pos-relative t-nowrap flex-v-center flex-nowrap flex">
+		    	<h2 class="pos-relative ws-nowrap flex-v-center flex-nowrap flex">
 		    		<span class="mn-r-thin">Posts for </span>
 
 		    		<Select 
@@ -29,7 +29,7 @@
 				</header>
 
 				<div  v-if="!route.params.url && route.name !=='Create BlogPost'"  class="w-100 pos-relative">
-					<ul class="align-self-start pos-sticky pos-t-0 w-100 bg-light radius-medium mobile:radius-zero mn-b-thin pd-medium p-regular gap-thin flex-row flex-nowrap flex z-index-2 o-scroll t-nowrap scroll-hide">
+					<ul class="align-self-start pos-sticky pos-t-0 w-100 bg-light radius-medium mobile:radius-zero mn-b-thin pd-medium p-regular gap-thin flex-row flex-nowrap flex z-index-2 o-scroll ws-nowrap scroll-hide">
 						<li  	
 							:class="{'t-black bg-white': route.params.category === 'featured' }" 					
 							@click="() => { blog.state.sort.param = 'createdAt'; router.push({name: 'Blog', params: { category: 'featured' } })}" 

package/src/modules/core/views/components/blocks/CardHeader.vue

@@ -8,7 +8,7 @@
 		>
 
 			<div
-				class="w-100 gap-thin p-regular t-nowrap flex-nowrap flex-v-center flex"
+				class="w-100 gap-thin p-regular ws-nowrap flex-nowrap flex-v-center flex"
 			>
 				<img loading="lazy" 
 					v-if="owner.target?.profile?.photo?.length > 0 && type !== 'short'" 

package/src/modules/core/views/components/partials/Header.vue

@@ -122,7 +122,7 @@
     		
     		br-2px 
     		ease-linear
-    		t-nowrap
+    		ws-nowrap
     	
     	"
     	:class="{

package/src/modules/core/views/components/partials/Sidebar.vue

@@ -139,7 +139,7 @@ router.beforeEach((to, from) => {
         ]"
       >
         <span
-          class="w-100 t-nowrap ease-quint-out  t-left fw-medium mn-r-thin"
+          class="w-100 ws-nowrap ease-quint-out  t-left fw-medium mn-r-thin"
           :class="{ 'hidden': !stateSidebar, 'visible': stateSidebar }"
         >
           Dark Mode

package/src/modules/core/views/components/sections/Filters.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex o-x-scroll scroll-hide t-nowrap  gap-thin">
+  <div class="flex o-x-scroll scroll-hide ws-nowrap  gap-thin">
     <!-- All Filters Button -->
     <button
       @click="showAllFilters = true"
@@ -20,7 +20,7 @@
       :class="{ 'selected bg-main': isFilterActive(filter) }"
     >
       <IconCalendar v-if="filter.type === 'date'" class="mn-r-micro i-regular" />
-      <span class="t-nowrap">{{ filter.type === 'date' && getFilterValue(filter) ? formatFilterValue(filter) : filter.title }}</span>
+      <span class="ws-nowrap">{{ filter.type === 'date' && getFilterValue(filter) ? formatFilterValue(filter) : filter.title }}</span>
       <span v-if="getFilterValue(filter) && filter.type !== 'date'" class="mn-l-micro">
         {{ formatFilterValue(filter) }}
       </span>

package/src/modules/core/views/components/sections/SectionPageTitle.vue

@@ -31,7 +31,7 @@
       :selected="tabs_current"
       @update:selected="updateTabsCurrent"
       :tabs="tabs"
-      class="mn-t-small pd-thin bg-light radius-small w-max t-nowrap o-scroll p-regular"
+      class="mn-t-small pd-thin bg-light radius-small w-max ws-nowrap o-scroll p-regular"
     />
   </div>
 </template>

package/src/modules/events/components/pages/EditEventTickets.vue

@@ -69,7 +69,7 @@
             v-else
             class="bg-light radius-micro w-2r h-thin"
           ></div>
-          <p class="p-nano fw-medium t-nowrap">{{ slot.time }}</p>
+          <p class="p-nano fw-medium ws-nowrap">{{ slot.time }}</p>
         </div>
       </div>
     </div>
@@ -195,7 +195,7 @@
           <section class="bg-black flex-column flex gap-thin pd-thin radius-small">
             <button
               @click="sendTicketEmail(ticket._id)"
-              class="w-100 t-nowrap bg-black br-1px br-white-transp-20 t-white button-small button"
+              class="w-100 ws-nowrap bg-black br-1px br-white-transp-20 t-white button-small button"
             >
               Send Email
             </button>

package/src/modules/gallery/components/sections/BackofficeGallery.vue

@@ -128,7 +128,7 @@
         <Button 
           :submit="() => createPhoto('draft')" 
           :callback="closePhotoPopup" 
-          class="t-nowrap bg-second w-100"
+          class="ws-nowrap bg-second w-100"
         >
           To drafts
         </Button>

package/src/modules/inventory/components/pages/Inventory.vue

@@ -51,7 +51,7 @@
                 class="w-3r h-3r radius-small bg-light object-fit-cover"
               />
               <PlaceholderImage v-else class="w-3r h-3r radius-small" />
-              <p class="truncate t-nowrap">{{ row.name || 'Unknown Product' }}</p>
+              <p class="truncate ws-nowrap">{{ row.name || 'Unknown Product' }}</p>
             </div>
           </template>
 
@@ -127,13 +127,13 @@
               align="right"
             >
               <div class="bg-white radius-small">
-                <button @click="openStockAudit(row)" class="cursor-pointer t-left t-nowrap w-100 pd-small">
+                <button @click="openStockAudit(row)" class="cursor-pointer t-left ws-nowrap w-100 pd-small">
                   Audit Stock
                 </button>
-                <button @click="openStockHistory(row)" class="cursor-pointer t-left t-nowrap w-100 pd-small">
+                <button @click="openStockHistory(row)" class="cursor-pointer t-left ws-nowrap w-100 pd-small">
                   Stock History
                 </button>
-                <button @click="openReorderSettings(row)" class="cursor-pointer t-left t-nowrap w-100 pd-small">
+                <button @click="openReorderSettings(row)" class="cursor-pointer t-left ws-nowrap w-100 pd-small">
                   Set Alerts
                 </button>
               </div>

package/src/modules/inventory/components/pages/InventoryEdit.vue

@@ -175,7 +175,7 @@
             align="right"
           >
             <div class="bg-white radius-small">
-              <button @click="leftovers.state.current.positions.splice(index, 1)" class="cursor-pointer t-left t-nowrap w-100 pd-small">
+              <button @click="leftovers.state.current.positions.splice(index, 1)" class="cursor-pointer t-left ws-nowrap w-100 pd-small">
                 Delete
               </button>
             </div>

package/src/modules/music/components/pages/Playlist.vue

@@ -374,8 +374,8 @@ const actionButtons = computed(() => {
     {
       type: 'dropdown',
       items: [
-        { text: 'Add to Queue', action: addToQueue, class: 't-nowrap' },
-        { text: 'Copy Link', action: copyLink, class: 't-nowrap' }
+        { text: 'Add to Queue', action: addToQueue, class: 'ws-nowrap' },
+        { text: 'Copy Link', action: copyLink, class: 'ws-nowrap' }
       ]
     }
   ];
@@ -383,19 +383,19 @@ const actionButtons = computed(() => {
   if (isOwner.value || isCollaborator.value) {
     const items = buttons[3].items;
     items.push({ separator: true });
-    items.push({ text: 'Edit Playlist', action: editPlaylist, class: 't-nowrap' });
+    items.push({ text: 'Edit Playlist', action: editPlaylist, class: 'ws-nowrap' });
 
     if (isOwner.value) {
       items.push({
         text: playlist.value?.isCollaborative ? 'Make Private' : 'Make Collaborative',
         action: toggleCollaborative,
-        class: 't-nowrap'
+        class: 'ws-nowrap'
       });
       items.push({
         text: 'Delete Playlist',
         action: deletePlaylist,
         color: 'danger',
-        class: 't-nowrap'
+        class: 'ws-nowrap'
       });
     }
   }

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>