@ozdao/prometheus-framework 0.2.322 → 0.2.324

package/src/components/Slider/Slider.vue

@@ -1,20 +1,36 @@
 <template>
-  <div class="embla" ref="emblaNode">
-    <div class="embla__container">
-      <div class="embla__slide pd-nano" v-for="(entity, key, index) in entitiesState" :key="key">
-        <transition name="fade" mode="out-in" appear>
-          <slot
-            :item="entity"
-            :user="user"
-          ></slot>
-        </transition>
-      </div>
+  <div class="pos-relative">
+    <!-- Loading State -->
+    <div v-if="isLoading" class="h-20r radius-semi pos-relative w-100 bg-light">
+      <Loader />
+    </div>
 
+    <!-- Empty State -->
+    <div v-else-if="!entitiesState.length" class="bg-light radius-semi  flex flex-center  w-100 h-20r">
+      <p class="text-gray-500">{{t('title')}}</p>
+    </div>
+
+    <!-- Carousel -->
+    <div v-else class="embla" ref="emblaNode">
+      <div class="embla__container">
+        <div 
+          class="embla__slide pd-nano" 
+          v-for="(entity, key, index) in entitiesState" 
+          :key="key"
+        >
+          <transition name="fade" mode="out-in" appear>
+            <slot
+              :item="entity"
+              :user="user"
+            ></slot>
+          </transition>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
-<script setup >
+<script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -33,7 +49,6 @@ const props = defineProps({
 });
 
 const router = useRouter()
-
 const entitiesState = ref([])
 const isLoading = ref(true);
 const selectedIndex = ref(0);
@@ -57,17 +72,38 @@ const [emblaNode, emblaApi] = emblaCarouselVue(
 
 const scrollTo = (index) => emblaApi.value && emblaApi.value.scrollTo(index);
 const onSelect = (embla) => selectedIndex.value = emblaApi.value.selectedScrollSnap();
-// const onInit = (embla) =>  scrollSnaps.value = emblaApi.value.scrollSnapList();
+
+const { t } = useI18n({
+  messages: props.text
+})
 
 onMounted(async() => {
-  entitiesState.value = await props.store.read(props.options);
+  try {
+    entitiesState.value = await props.store.read(props.options);
+  } catch (error) {
+    console.error('Error loading entities:', error);
+    entitiesState.value = [];
+  } finally {
+    isLoading.value = false;
+  }
+  
+  if (entitiesState.value.length) {
+    onSelect(emblaApi);
+    emblaApi.value.on('reInit', onSelect);
+    emblaApi.value.on('select', onSelect);
+  }
+});
 
-  isLoading.value = false;
+</script>
 
-  onSelect(emblaApi);
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
 
-  // emblaApi.value.on('reInit', onInit);
-  emblaApi.value.on('reInit', onSelect);
-  emblaApi.value.on('select', onSelect);
-});
-</script>
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/index.js

@@ -37,3 +37,4 @@ export { default as Slider } from './Slider/Slider.vue';
 export { default as Status } from './Status/Status.vue';
 
 export { default as Marquee } from './Marquee/Marquee.vue';
+export { default as Media } from './Media/Media.vue';

package/src/main.js

@@ -38,7 +38,8 @@ import {
   Shader,
   Slider,
   Status,
-  Marquee
+  Marquee,
+  Mediam
 } from  './components';
 
 export default {
@@ -80,6 +81,7 @@ export default {
     app.component('Slider',       () => import('./components/Slider/Slider.vue'));
     app.component('Status',       () => import('./components/Status/Status.vue'));
     app.component('Marquee',       () => import('./components/Marquee/Marquee.vue'));
+     app.component('Media',       () => import('./components/Media/Media.vue'));
   }
 };
 

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

@@ -164,7 +164,8 @@
 	        @click="router.push({
 	          name: `${module.route}`, 
 	          params: {
-	            _id: route.params._id
+	            _id: route.params._id,
+	            user: route.params._id
 	          }
 	        })" 
 	        class="profile-menu-item cursor-pointer"

package/src/modules/backoffice/backoffice.client.js

@@ -3,7 +3,6 @@ import routerBackoffice from './router/backoffice';
 
 // Views
 // Layouts
-import BackofficeLayout from './components/layouts/Backoffice.vue';
 
 // Pages
 import Dashboard from './components/pages/Dashboard.vue';
@@ -38,7 +37,6 @@ const ModuleBackoffice = {
     },
     components: {
       // Layouts
-      BackofficeLayout,
       // Pages
       Dashboard,
       // Admin components

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

@@ -1,7 +1,94 @@
 <template>
-	<div class="bg-white">
-		
+	<div class="pd-medium bg-white">
+		<h2 class="mn-b-small">Overview</h2>
+		<div class="mn-b-medium cols-3 gap-thin">
+			<Block class="pos-relative">
+				<span class="t-green t-semi pos-absolute pos-t-medium pos-r-medium">+12.5%</span>
+				<div class="mn-b-medium radius-small w-max bg-main"><IconProfile class="i-semi mn-small"/></div>
+				<p class="h3 mn-b-thin">2,453</p>
+				<p>Active Members</p>
+			</Block>
+
+			<Block class="pos-relative">
+				<span class="t-green t-semi pos-absolute pos-t-medium pos-r-medium">+14.8%</span>
+				<div class="mn-b-medium radius-small w-max bg-main"><IconOrders class="i-semi mn-small"/></div>
+				<p class="h3 mn-b-thin">432</p>
+				<p>New Orders</p>
+			</Block>
+
+			<Block class="pos-relative">
+				<span class="t-green t-semi pos-absolute pos-t-medium pos-r-medium">+25.1%</span>
+				<div class="mn-b-medium radius-small w-max bg-main"><IconProfile class="i-semi mn-small"/></div>
+				<p class="h3 mn-b-thin">$23,232</p>
+				<p>Monthly Revenue</p>
+			</Block>
+		</div>
+
+		<div class="cols-2 gap-thin">
+			<Block 
+				title="Recent Orders"
+				class="pos-relative"
+			>
+				<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="table">
+				    <thead>
+				      <tr>
+				        <th>Order ID</th>
+				        <th>Customer</th>
+				        <th>Items</th>
+				        <th>Amount</th>
+				        <th>Status</th>
+				        <th>Date</th>
+				      </tr>
+				    </thead>
+				    <tbody>
+				      <tr v-for="(order, index) in items" :key="order._id">
+				        <td>{{ order._id }}</td>
+				        <td>{{ order.customer.target.profile.name }}</td>
+				        <td>{{ order.positions?.length || 0}}
+				        </td>
+				        <td>${{ order.amount?.toFixed(2) }}</td>
+				        <td>{{ order.status }}</td>
+				        <td>{{ new Date(order.createdAt).toLocaleDateString() }}</td>
+				      </tr>
+				    </tbody>
+				  </table>
+	      </Feed>
+
+			</Block>
+
+			<Block 
+				title="Activity Feed"
+				class="pos-relative"
+				>
+			</Block>
+		</div>
+
 	</div>
+
+
 </template>
 
 <script setup="props">
@@ -11,10 +98,15 @@
 import { ref, onMounted } from 'vue';
 
 // Mobile Module
+import Block from '@pf/src/components/Block/Block.vue'
+import Feed from '@pf/src/components/Feed/Feed.vue'
 import Menu from '@pf/src/components/Menu/Menu.vue'
 import MenuItem from '@pf/src/components/Menu/MenuItem.vue'
 import SelectMulti    from '@pf/src/components/SelectMulti/SelectMulti.vue'
 
+
+import IconProfile from '@pf/src/modules/icons/entities/IconProfile.vue'
+
 import IconProducts from '@pf/src/modules/icons/entities/IconProducts.vue'
 import IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'
 import IconGroups from '@pf/src/modules/icons/entities/IconGroups.vue'
@@ -29,6 +121,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import * as auth  from '@pf/src/modules/auth/views/store/auth'
 import * as organizations  from '@pf/src/modules/organizations/store/organizations'
+import * as orders  from '@pf/src/modules/orders/store/orders'
 
 const route = useRoute()
 const router = useRouter()

package/src/modules/backoffice/components/partials/Sidebar.vue

@@ -1,133 +1,42 @@
 <template>
   <div class="">
-    <Menu 
-      class="bg-light mn-b-semi"
-    >
-      <MenuItem 
-        @click="router.push({
-          name: 'Organization Members'
-        })" 
-        class="cursor-pointer"
-      >
-        <IconGroups class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-        <span>
-          Members
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Backoffice Community'
-        })" 
-        class="cursor-pointer">
-        <span>
-          Community
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Products'
-        })" 
-        class="cursor-pointer">
-        <IconProducts class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-        <span>
-          Products
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Leftovers'
-        })" 
-        class="cursor-pointer">
-        <IconLeftovers class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-        <span>
-          Leftovers
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Backoffice Orders'
-        })" 
-        class="cursor-pointer">
-        <IconOrders class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-        <span>
-          Orders
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Backoffice Gallery'
-        })" 
-        class="cursor-pointer">
-        <IconGallery class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-        <span>
-          Gallery
-        </span>
-      </MenuItem>
+    <div class="br-b h3 h-4r pd-semi br-solid br-black-transp-10">Backoffice</div>
+    <div class="pd-semi">
+      <span class="pd-thin uppercase t-medium t-transp">Menu</span>
+      <div 
+        v-for="item in menuItems" 
+        :key="item.name"
+        @click="router.push({ name: item.routeName })" 
+        class="flex pd-thin flex-v-center cursor-pointer">
+        <component 
+          v-if="item.icon" 
+          :is="item.icon" 
+          class="i-regular mn-r-thin" 
+          :icon="true" 
+          :fill="'rgba(var(--black),0.25)'"
+        /> 
+        <span class="t-medium">{{ item.title }}</span>
+      </div>
       
-      <MenuItem 
-        @click="router.push({
-          name: 'Backoffice Events'
-        })" 
-        class="cursor-pointer">
-        <IconEvents class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-        <span>
-          Events
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Payments'
-        })" 
-        class="cursor-pointer">
-        <span>
-          Payments
-        </span>
-      </MenuItem>
-    </Menu>
-
-    <Menu 
-      class="bg-light"
-    >
-      <MenuItem 
-        @click="router.push({
-          name: 'Backoffice Organizations'
-        })" 
-        class="cursor-pointer">
-        <span>
-          Organizations
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Backoffice Pages'
-        })" 
-        class="cursor-pointer">
-        <span>
-          Pages
-        </span>
-      </MenuItem>
-
-      <MenuItem 
-        @click="router.push({
-          name: 'Backoffice Reports'
-        })" 
-        class="cursor-pointer">
-        <span>
-          Reports
-        </span>
-      </MenuItem>
-    </Menu>
+      <span class="pd-thin d-block mn-t-medium uppercase t-medium t-transp">General</span>
+      <div 
+        v-for="item in generalItems" 
+        :key="item.name"
+        @click="router.push({ name: item.routeName })" 
+        class="flex pd-thin flex-v-center cursor-pointer">
+        <component 
+          v-if="item.icon" 
+          :is="item.icon" 
+          class="i-regular mn-r-thin" 
+          :icon="true" 
+          :fill="'rgba(var(--black),0.25)'"
+        /> 
+        <span class="t-medium">{{ item.title }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
-
 <script setup="props">
 /////////////////////////////
 // COMPONENT DEPENDENCIES
@@ -135,11 +44,10 @@
 import { ref, onMounted } from 'vue';
 
 // Mobile Module
-import Menu from '@pf/src/components/Menu/Menu.vue'
-import MenuItem from '@pf/src/components/Menu/MenuItem.vue'
-import SelectMulti    from '@pf/src/components/SelectMulti/SelectMulti.vue'
+import SelectMulti from '@pf/src/components/SelectMulti/SelectMulti.vue'
 
 import IconProducts from '@pf/src/modules/icons/entities/IconProducts.vue'
+import IconPayments from '@pf/src/modules/icons/entities/IconPayments.vue'
 import IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'
 import IconGroups from '@pf/src/modules/icons/entities/IconGroups.vue'
 import IconCommunity from '@pf/src/modules/icons/entities/IconCommunity.vue'
@@ -151,8 +59,8 @@ import IconLeftovers from '@pf/src/modules/icons/entities/IconLeftovers.vue'
 /////////////////////////////
 import { useRoute, useRouter } from 'vue-router'
 
-import * as auth  from '@pf/src/modules/auth/views/store/auth'
-import * as organizations  from '@pf/src/modules/organizations/store/organizations'
+import * as auth from '@pf/src/modules/auth/views/store/auth'
+import * as organizations from '@pf/src/modules/organizations/store/organizations'
 
 const route = useRoute()
 const router = useRouter()
@@ -165,12 +73,87 @@ const props = defineProps({
 
 const selectedOrganization = ref(null);
 const publics = ref([]);
+
+// Define menu items
+const menuItems = [
+  {
+    name: 'organizations',
+    title: 'Organizations',
+    routeName: 'Backoffice Organizations',
+    icon: IconGroups
+  },
+  {
+    name: 'community',
+    title: 'Community',
+    routeName: 'Backoffice Community',
+    icon: IconCommunity
+  },
+  {
+    name: 'products',
+    title: 'Products',
+    routeName: 'Products',
+    icon: IconProducts
+  },
+  {
+    name: 'leftovers',
+    title: 'Leftovers',
+    routeName: 'Leftovers',
+    icon: IconLeftovers
+  },
+  {
+    name: 'orders',
+    title: 'Orders',
+    routeName: 'Backoffice Orders',
+    icon: IconOrders
+  },
+  {
+    name: 'gallery',
+    title: 'Gallery',
+    routeName: 'Backoffice Gallery',
+    icon: IconGallery
+  },
+  {
+    name: 'events',
+    title: 'Events',
+    routeName: 'BackofficeEvents Backoffice',
+    icon: IconEvents
+  }
+];
+
+// Define general items
+const generalItems = [
+  {
+    name: 'payments',
+    title: 'Payments',
+    routeName: 'Payments',
+    icon: IconPayments
+  },
+  {
+    name: 'users',
+    title: 'Users',
+    routeName: 'Users',
+    icon: null
+  },
+  {
+    name: 'pages',
+    title: 'Pages',
+    routeName: 'Backoffice Pages',
+    icon: null
+  },
+  {
+    name: 'reports',
+    title: 'Reports',
+    routeName: 'Backoffice Reports',
+    icon: null
+  }
+];
+
 /////////////////////////////
 // MOUNTED
 /////////////////////////////
-onMounted(async () =>{
-})
+onMounted(async () => {
+});
 </script>
 
 <style lang="scss">
-</style>
+</style>

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

@@ -1,4 +1,3 @@
-import layoutBackoffice from '../components/layouts/Backoffice.vue'
 import Sidebar from '../components/partials/Sidebar.vue'
 
 import layoutEmpty from '@pf/src/modules/globals/views/components/layouts/Empty.vue';
@@ -36,8 +35,6 @@ const backofficeRoutes = {
   path: 'backoffice',
   name: 'Backoffice Root',
 
-  component: layoutBackoffice,
-
   meta: {
     sidebar: Sidebar,
   },
@@ -81,17 +78,6 @@ const backofficeRoutes = {
       authorize: []
     },
     component: () => import(/* webpackChunkName: 'BackofficeOrganizations' */ '@pf/src/modules/organizations/components/pages/Organizations.vue'),
-  },{
-    path: 'events',
-    name: 'Backoffice Events',
-    meta: {
-      title: {
-        en: 'Backoffice Events',
-        ru: 'Управление Событиями'
-      },
-      authorize: []
-    },
-    component: () => import(/* webpackChunkName: 'BackofficeEvents' */ '@pf/src/modules/events/components/pages/Events.vue'),
   },{
     path: 'community',
     name: 'Backoffice Community',

package/src/modules/community/community.client.js

@@ -20,7 +20,6 @@ import Activity from './components/blocks/Activity.vue';
 import CardBlogpost from './components/blocks/CardBlogpost.vue';
 
 // Sections
-import JoinUs from './components/sections/JoinUs.vue';
 import Comments from './components/sections/Comments.vue';
 import HotPosts from './components/sections/HotPosts.vue';
 
@@ -56,7 +55,6 @@ const ModuleCommunity = {
       Activity,
       CardBlogpost,
       // Sections
-      JoinUs,
       Comments,
       HotPosts
     }
@@ -71,7 +69,6 @@ export {
   FooterBlogpost,
   Activity,
   CardBlogpost,
-  JoinUs,
   Comments,
   HotPosts,
   storeBlogposts,

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

@@ -1,52 +1,5 @@
 <template>
-	<div style="grid-template-columns: 2fr 4fr 2fr; grid-template-rows: auto 1fr auto;" class="cols-3 gap-thin pd-t-zero pd-thin mobile:pd-zero ">
-
-		<ul class="align-self-start pos-sticky h-max pos-t-0 w-100 bg-white radius-medium pd-medium p-medium gap-thin flex-column mobile:flex-row mobile:radius-zero mobile:pd-thin flex-nowrap flex z-index-2 o-scroll t-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' } })}" 
-				class="cursor-pointer flex-v-center flex t-medium  pd-thin radius-extra"
-			>
-				<IconFeatured class="i-medium mn-r-thin t-transp"/>
-				Featured
-			</li>
-			<li  	
-				:class="{'t-black bg-white': route.params.category === 'popular' }"					 				
-				@click="() => { blog.state.sort.param = 'views'; router.push({name: 'Blog', params: { category: 'popular' } }) }" 
-				class="cursor-pointer t-medium flex-v-center flex  pd-thin radius-extra"
-			>	
-				<IconPopular class="i-medium mn-r-thin t-transp"/>
-				Popular
-			</li>
-			<li  	
-				:class="{'t-black bg-white': route.params.category === 'new'}" 					
-				@click="() => { blog.state.sort.param = 'createdAt'; router.push({name: 'Blog', params: { category: 'new' } })}" 
-				class="cursor-pointer t-medium flex-v-center flex  pd-thin radius-extra"
-			>
-				<IconRecent class="i-medium mn-r-thin t-transp"/>
-				Recent
-			</li>
-			<li 	
-				v-if="auth.state.user._id"
-				:class="{'t-black bg-white': route.params.category === 'following'}" 		
-				@click="() => { blog.state.sort.param = 'createdAt'; router.push({name: 'Blog', params: { category: 'following' } })}" 
-				class="cursor-pointer t-medium flex-v-center flex pd-thin radius-extra"
-			>
-				<IconFollowing class="i-medium mn-r-thin t-transp"/>
-				Following
-			</li>
-
-			<router-link 
-				v-if="auth.state.user._id"
-				:to="{
-					name: 'Create BlogPost'
-				}" 
-				class="button t-medium bg-main w-100"
-			>
-				Create Post
-			</router-link>
-		</ul>
-
+	<div style="grid-template-columns: 4fr 2fr; grid-template-rows: 1fr auto;" class="cols-3 gap-thin pd-t-zero pd-thin mobile:pd-zero ">
 		<section class="pos-relative">
 
 			<header v-if="!route.params.url" class="bg-white pd-medium radius-medium mobile:radius-zero t-black pos-relative  mn-b-thin flex-v-center t-left flex-nowrap flex">
@@ -144,10 +97,6 @@
 	import Feed from '@pf/src/components/Feed/Feed.vue'
 	import CardOrganization from '@pf/src/modules/organizations/components/blocks/CardOrganization.vue'
 
-	import IconFeatured from '@pf/src/modules/icons/entities/IconFeatured.vue'
-	import IconPopular from '@pf/src/modules/icons/entities/IconPopular.vue'
-	import IconRecent from '@pf/src/modules/icons/entities/IconRecent.vue'
-	import IconFollowing from '@pf/src/modules/icons/entities/IconFollowing.vue'
 
  	// Import state
 	import * as blog from '@pf/src/modules/community/store/blogposts.js';