@ozdao/martyrs 0.2.604 → 0.2.605

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

@@ -1,147 +1,221 @@
 <template>
-  <div class="pd-thin">
+  <div class="pos-relative">
     <!-- Header -->
-    <header class="mn-b-medium flex-v-center flex-nowrap flex">
-      <h2>Inventory</h2>
-      <button
-        @click="route.meta.context === 'backoffice' ? router.push({ name: 'BackofficeInventoryAudit' }) : router.push({ name: 'OrganizationInventoryAudit', params: { _id: route.params._id } })"
-        class="mn-l-auto radius-small button t-white bg-second"
-        v-html="'+ New Audit'"
-      />
-    </header>
-
-    <!-- Products Feed -->
-    <div class="rows-1">
-      <Feed
-        :search="true"
-        v-model:sort="sort"
-        v-model:items="items"
-        :store="{
-          read: (options) => products.actions.read(options),
-          state: products.state
-        }"
-        :actions="[{
-          key: 'settings',
-          component: IconSettings,
-          props: {
-            class: 'h-3r pd-r-small pd-l-small flex-center flex bg-light t-black radius-small hover:scale-[1.05] cursor-pointer'
-          },
-          handler: openViewSettings
-        }]"
-        :options="{
-          limit: 15,
-          lookup: ['inventory','categories'],
-          owner: route.params._id,
-          sortParam: sort.param,
-          sortOrder: sort.order
-        }"
-      >
-        <Table
-          :columns="columns.filter(col => col.visible)"
-          :items="items"
-          class="bg-white z-index-1 br-1px br-light radius-medium"
-        >
-          <!-- Name column (was "product") -->
-          <template #cell-name="{ row }">
-            <div class="w-max-20r truncate flex gap-small flex-nowrap flex-v-center">
-              <img
-                v-if="row.images?.length"
-                :src="(FILE_SERVER_URL || '') + row.images[0]"
-                alt="Product"
-                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 ws-nowrap">{{ row.name || 'Unknown Product' }}</p>
-            </div>
-          </template>
-
-          <!-- Categories -->
-          <template #cell-category="{ row }">
-            <div class="w-max-10r flex-nowrap flex  truncate">
-              <p
-                v-if="row.category?.length"
-                v-for="cat in row.category"
-                :key="cat._id"
-                class="w-max truncate pd-small mn-r-micro radius-small bg-light t-small"
+    <SectionPageTitle
+      v-if="!MOBILE_APP"
+      :title="currentCategory ? currentCategory.name : 'Inventory'"
+      :actions="[
+        { method: () => route.meta.context === 'backoffice' ? router.push({ name: 'BackofficeInventoryAudit' }) : router.push({ name: 'OrganizationInventoryAudit', params: { _id: route.params._id } }), label: '+ Add Audit' }
+      ]"
+      class="pd-medium"
+    />
+
+    <div class="cols-[1fr_3fr] mobile:cols-1 tablet:cols-1 z-index-3 pos-relative">
+
+      <!-- Desktop sidebar с категориями -->
+      <div class="o-y-scroll br-r-1px br-grey pd-medium z-index-2 desktop-only h-100 pos-relative">
+        <div class="w-100 o-y-scroll h-100">
+          <!-- Категории -->
+          <div class="mn-b-medium" v-if="currentCategories.length > 0">
+            <h4 class="mn-b-medium">
+              {{ route.params.categoryPath ? 'Subcategories' : 'Categories' }}
+            </h4>
+            <div class="gap-micro">
+              <div
+                v-for="category in currentCategories"
+                :key="category._id"
+                @click="selectCategory(category)"
+                class="cursor-pointer hover:underline mn-b-regular ease"
               >
-                {{ cat.name }}
-              </p>
-              <p v-else>-</p>
+                {{ category.name }}
+                <br>
+                <span v-for="subcategory in category.children">{{subcategory.name}}</span>
+              </div>
             </div>
-          </template>
-
-          <!-- Storages -->
-          <template #cell-storages="{ row }">
-            <div class="w-max-10r flex-nowrap flex  truncate">
-              <p
-                v-if="row.availabilityDetails?.length"
-                v-for="avail in row.availabilityDetails" 
-                :key="avail._id"
-                class="w-max truncate pd-small mn-r-micro radius-small bg-light t-small"
-              >
+          </div>
 
-                <span class="fw-medium">{{ avail.available || 0 }}</span> ·  
-                <span class="t-small">{{ avail.storageName || avail.storage }}:</span>
-              </p>
-              <p v-else>No stock</p>
-            </div>
-          </template>
-
-          <!-- Available (replaces stock) -->
-          <template #cell-available="{ row }">
-            <div class="flex-column flex">
-              <span class="d-block mn-b-thin">
-                {{ row.available }} ·
-                {{ row.available <= 5 ? 'Low' : row.available <= 10 ? 'Medium' : 'High' }}
-              </span>
-              <div class="w-100 h-micro radius-thin bg-light">
-                <div
-                  class="h-100 radius-thin"
-                  :class="
-                    row.available <= 1
-                      ? 'bg-red t-white'
-                      : row.available <= 2
-                      ? 'bg-orange t-white'
-                      : 'bg-green t-white'
-                  "
-                  :style="`width: ${
-                    Math.min(
-                      (row.available / (row.alert !== undefined ? row.alert : 50)) * 100,
-                      100
-                    )
-                  }%`"
+          <!-- Stock Level фильтр -->
+          <Spoiler
+            class="o-hidden mn-b-medium"
+            :status="true"
+          >
+            <template #header="{ isOpen }">
+              <div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
+                <h4 class="w-100">Stock Level</h4>
+                <div class="h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra">
+                  <IconChevronBottom :class="{ 'rotate-180deg mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
+                </div>
+              </div>
+            </template>
+
+            <template #content>
+              <div class="mn-t-small">
+                <Checkbox
+                  v-for="option in stockLevelOptions"
+                  :key="option.value"
+                  v-model:radio="selectedStockLevel"
+                  :label="option.label"
+                  :value="option.value"
+                  mode="checkbox"
+                  class="mn-b-micro"
                 />
               </div>
-            </div>
-          </template>
-          <!-- Price -->
-          <template #cell-price="{ row }">
-            {{ formatPrice(row.price || 0) }}
-          </template>
-
-          <!-- Actions -->
-          <template #cell-actions="{ row }">
-            <Dropdown
-              :label="{ component: IconEllipsis, class: 't-transp i-medium' }"
-              class="cursor-pointer aspect-1x1 pd-nano radius-small hover:bg-light"
-              align="right"
+            </template>
+          </Spoiler>
+        </div>
+      </div>
+
+      <!-- Контент -->
+      <div class="w-100 flex flex-column pd-thin pos-relative o-hidden">
+
+        <!-- Mobile категории -->
+        <div class="mn-b-thin mobile-only w-100 o-y-scroll scroll-hide scroll-snap-x-mandatory scroll-pd-regular">
+          <div class="gap-thin flex-nowrap flex">
+            <div
+              v-for="category in currentCategories"
+              :key="category._id"
+              @click="selectCategory(category)"
+              class="flex-child-default bg-light flex ws-nowrap pd-medium radius-medium cursor-pointer hover:bg-light ease"
             >
-              <div class="bg-white radius-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 ws-nowrap w-100 pd-small">
-                  Stock History
-                </button>
-                <button @click="openReorderSettings(row)" class="cursor-pointer t-left ws-nowrap w-100 pd-small">
-                  Set Alerts
-                </button>
+              {{ category.name }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Products Feed -->
+        <Feed
+          :search="true"
+          v-model:sort="sort"
+          v-model:items="items"
+          :store="{
+            read: (options) => products.actions.read(options),
+            state: products.state
+          }"
+          :actions="[{
+            key: 'settings',
+            component: IconSettings,
+            props: {
+              class: 'h-3r pd-r-small pd-l-small flex-center flex bg-light t-black radius-small hover:scale-[1.05] cursor-pointer'
+            },
+            handler: openViewSettings
+          }]"
+          :options="{
+            limit: 15,
+            lookup: ['inventory','categories'],
+            owner: route.params._id,
+            categories: route.params.categoryPath ? `/${route.params.categoryPath}` : null,
+            sortParam: sort.param,
+            sortOrder: sort.order
+          }"
+        >
+          <Table
+            :columns="columns.filter(col => col.visible)"
+            :items="items"
+            class="bg-white z-index-1 br-1px br-light radius-medium"
+          >
+            <!-- Name column (was "product") -->
+            <template #cell-name="{ row }">
+              <div class="w-max-20r truncate flex gap-small flex-nowrap flex-v-center">
+                <img
+                  v-if="row.images?.length"
+                  :src="(FILE_SERVER_URL || '') + row.images[0]"
+                  alt="Product"
+                  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 ws-nowrap">{{ row.name || 'Unknown Product' }}</p>
               </div>
-            </Dropdown>
-          </template>
-        </Table>
-      </Feed>
+            </template>
+
+            <!-- Categories -->
+            <template #cell-category="{ row }">
+              <div class="w-max-10r flex-nowrap flex  truncate">
+                <p
+                  v-if="row.category?.length"
+                  v-for="cat in row.category"
+                  :key="cat._id"
+                  class="w-max truncate pd-small mn-r-micro radius-small bg-light t-small"
+                >
+                  {{ cat.name }}
+                </p>
+                <p v-else>-</p>
+              </div>
+            </template>
+
+            <!-- Storages -->
+            <template #cell-storages="{ row }">
+              <div class="w-max-10r flex-nowrap flex  truncate">
+                <p
+                  v-if="row.availabilityDetails?.length"
+                  v-for="avail in row.availabilityDetails"
+                  :key="avail._id"
+                  class="w-max truncate pd-small mn-r-micro radius-small bg-light t-small"
+                >
+
+                  <span class="fw-medium">{{ avail.available || 0 }}</span> ·
+                  <span class="t-small">{{ avail.storageName || avail.storage }}:</span>
+                </p>
+                <p v-else>No stock</p>
+              </div>
+            </template>
+
+            <!-- Available (replaces stock) -->
+            <template #cell-available="{ row }">
+              <div class="flex-column flex">
+                <span class="d-block mn-b-thin">
+                  {{ row.available }} ·
+                  {{ row.available <= 5 ? 'Low' : row.available <= 10 ? 'Medium' : 'High' }}
+                </span>
+                <div class="w-100 h-micro radius-thin bg-light">
+                  <div
+                    class="h-100 radius-thin"
+                    :class="
+                      row.available <= 1
+                        ? 'bg-red t-white'
+                        : row.available <= 2
+                        ? 'bg-orange t-white'
+                        : 'bg-green t-white'
+                    "
+                    :style="`width: ${
+                      Math.min(
+                        (row.available / (row.alert !== undefined ? row.alert : 50)) * 100,
+                        100
+                      )
+                    }%`"
+                  />
+                </div>
+              </div>
+            </template>
+            <!-- Price -->
+            <template #cell-price="{ row }">
+              {{ formatPrice(row.price || 0) }}
+            </template>
+
+            <!-- Actions -->
+            <template #cell-actions="{ row }">
+              <Dropdown
+                :label="{ component: IconEllipsis, class: 'opacity-50 i-medium' }"
+                class="cursor-pointer aspect-1x1 pd-nano radius-small hover:bg-light"
+                align="right"
+              >
+                <div class="bg-white radius-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 ws-nowrap w-100 pd-small">
+                    Stock History
+                  </button>
+                  <button @click="openReorderSettings(row)" class="cursor-pointer t-left ws-nowrap w-100 pd-small">
+                    Set Alerts
+                  </button>
+                </div>
+              </Dropdown>
+            </template>
+          </Table>
+        </Feed>
+      </div>
     </div>
+
     <!-- Modals -->
     <Popup
       :isPopupOpen="showAuditModal"
@@ -196,22 +270,24 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
 
 // Components
+import SectionPageTitle from '@martyrs/src/modules/core/views/components/sections/SectionPageTitle.vue'
 import Table from '@martyrs/src/components/Table/Table.vue'
 import Feed from '@martyrs/src/components/Feed/Feed.vue'
 import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
 import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'
 import Popup from '@martyrs/src/components/Popup/Popup.vue'
-import Chips  from '@martyrs/src/components/Chips/Chips.vue'
-
+import Spoiler from "@martyrs/src/components/Spoiler/Spoiler.vue"
+import Checkbox from "@martyrs/src/components/Checkbox/Checkbox.vue"
 
 // Icons
 import IconSettings from '@martyrs/src/modules/icons/entities/IconSettings.vue'
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue'
+import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'
 
 // Forms
 import AdjustmentForm from '../forms/AdjustmentForm.vue'
@@ -222,6 +298,7 @@ import ColumnSettingsMenu from '../forms/ColumnSettingsMenu.vue'
 // Stores
 import * as inventory from '@martyrs/src/modules/inventory/store/inventory.store.js'
 import * as products from '@martyrs/src/modules/products/store/products.js'
+import * as categories from '@martyrs/src/modules/products/store/categories.js'
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 import stockAlerts from '@martyrs/src/modules/inventory/store/stock.alerts.store.js'
 
@@ -230,6 +307,62 @@ const route = useRoute()
 const router = useRouter()
 const { formatPrice } = useGlobalMixins()
 
+// Категории и фильтры
+const currentCategories = ref([])
+const currentCategory = ref(null)
+
+const stockLevelOptions = [
+  { label: 'Low', value: 'low' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'High', value: 'high' }
+]
+const selectedStockLevel = ref([])
+
+const loadCategoryData = async () => {
+  const categoryPath = route.params.categoryPath
+
+  try {
+    if (categoryPath) {
+      // Загружаем категорию и её прямых детей
+      const result = await categories.actions.read({
+        url: `/${categoryPath}`,
+        depth: 1,
+        tree: false
+      })
+
+      if (result.length > 0) {
+        currentCategory.value = result[0]
+        currentCategories.value = result[0].children || []
+      }
+    } else {
+      // Загружаем только корневые категории
+      const result = await categories.actions.read({
+        root: true,
+        tree: false
+      })
+
+      currentCategory.value = null
+      currentCategories.value = result
+    }
+  } catch (error) {
+    console.error('Error loading categories:', error)
+    currentCategories.value = []
+  }
+}
+
+// Функция для выбора категории
+const selectCategory = (category) => {
+  const categoryPath = category.url ? category.url.substring(1) : ''
+
+  if (!categoryPath) {
+    console.warn('No URL found for category:', category)
+    return
+  }
+
+  const basePath = route.meta.context === 'backoffice' ? '/backoffice/inventory' : `/organizations/${route.params._id}/inventory`
+  router.push(`${basePath}/categories/${categoryPath}`)
+}
+
 // Products items state
 const items = ref([])
 
@@ -245,24 +378,6 @@ const sort = ref({
   ]
 })
 
-const filter = reactive({
-  active: false,
-  class: '',
-  selected: { category: [], stockLevel: [] },
-  options: [
-    { title: 'Categories', value: 'category', options: [] },
-    {
-      title: 'Stock Level',
-      value: 'stockLevel',
-      options: [
-        { label: 'Low', value: 'low' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'High', value: 'high' }
-      ]
-    }
-  ]
-})
-
 // Column definitions + visibility, combined into one
 const columns = reactive([
   { key: 'name',     label: 'Product Name', component: true, visible: true },
@@ -290,17 +405,17 @@ function openStockAudit(row) {
 function handleAdjustmentCreated(adjustment) {
   // Find the product in items array
   const productIndex = items.value.findIndex(item => item._id === adjustment.product)
-  
+
   if (productIndex !== -1) {
     // Update the available quantity
     items.value[productIndex].available += adjustment.quantity
-    
+
     // Update availabilityDetails if present
     if (items.value[productIndex].availabilityDetails) {
       const storageDetail = items.value[productIndex].availabilityDetails.find(
         detail => detail.storage === adjustment.storage
       )
-      
+
       if (storageDetail) {
         storageDetail.available += adjustment.quantity
       } else {
@@ -313,7 +428,7 @@ function handleAdjustmentCreated(adjustment) {
       }
     }
   }
-  
+
   showAuditModal.value = false
 }
 function openReorderSettings(row = null) {
@@ -334,6 +449,10 @@ function handleColumnsUpdate(updated) {
   })
   showSettingsModal.value = false
 }
+
+onMounted(async () => {
+  await loadCategoryData()
+})
 </script>
 
 <style>

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

@@ -93,7 +93,7 @@
             </div>
             <div>
               <p class="fw-medium">{{ variant.name || 'Default variant' }}</p>
-              <p v-if="variant.attributes && variant.attributes.length" class="t-small t-transp">
+              <p v-if="variant.attributes && variant.attributes.length" class="t-small opacity-50">
                 {{ variant.attributes.map(attr => `${attr.name}: ${attr.value}`).join(', ') }}
               </p>
             </div>
@@ -170,7 +170,7 @@
           <QuantitySelector v-model="position.quantity"/>
          
           <!-- <Dropdown
-            :label="{ component: IconEllipsis, class: 't-transp i-medium' }"
+            :label="{ component: IconEllipsis, class: 'opacity-50 i-medium' }"
             class="cursor-pointer aspect-1x1 pd-nano radius-small hover:bg-light"
             align="right"
           >

package/src/modules/inventory/inventory.client.js

@@ -27,14 +27,14 @@ function initializeInventory(app, store, router, options = {}) {
   const routeOrganizations = options.routeOrganizations || 'OrganizationRoot';
 
   // Backoffice routes
-  if (!options.withBackoffice) {
+  if (!options.contexts || options.contexts.includes('backoffice')) {
     addRoutes(router, {
       parentName: routeBackoffice,
       basePath: 'inventory',
       routes: routerInventory,
       routeNamePrefix: 'Backoffice',
       filterConfig: {
-        include: ['InventoryList', 'InventoryAudit'], // Все роуты для бэкофиса
+        include: ['InventoryList', 'InventoryCategory', 'InventoryAudit'], // Все роуты для бэкофиса
       },
       meta: {
         context: 'backoffice',
@@ -43,14 +43,14 @@ function initializeInventory(app, store, router, options = {}) {
   }
 
   // Organization routes
-  if (!options.withOrganizationRoutes) {
+  if (!options.contexts || options.contexts.includes('organization')) {
     addRoutes(router, {
       parentName: routeOrganizations,
       basePath: 'inventory',
       routes: routerInventory,
       routeNamePrefix: 'Organization',
       filterConfig: {
-        include: ['InventoryList', 'InventoryAudit'], // Роуты для организации
+        include: ['InventoryList', 'InventoryCategory', 'InventoryAudit'], // Роуты для организации
       },
       meta: {
         context: 'organization',

package/src/modules/inventory/models/stock.audit.model.js

@@ -9,7 +9,7 @@ export default db => {
     },
     status: {
       type: String,
-      enum: ['draft', 'published', 'cancelled'],
+      enum: ['draft', 'published', 'canceled'],
       default: 'draft',
     },
     positions: [{

package/src/modules/inventory/router/inventory.router.js

@@ -11,6 +11,18 @@ const inventoryRoutes = [
     },
     component: () => import(/* webpackChunkName: 'inventory-list' */ '../components/pages/Inventory.vue'),
   },
+  {
+    path: 'categories/:categoryPath(.*)',
+    name: 'InventoryCategory',
+    meta: {
+      title: {
+        en: 'Inventory',
+        ru: 'Инвентарь',
+      },
+      authorize: [],
+    },
+    component: () => import(/* webpackChunkName: 'inventory-list' */ '../components/pages/Inventory.vue'),
+  },
   {
     path: 'audit',
     name: 'InventoryAudit',

package/src/modules/landing/components/sections/SectionEarn.vue

@@ -5,8 +5,8 @@
         <img v-if="te('logo')" loading="lazy" class="mn-b-semi h-4r" :src="t('logo')">
 
         <h2 v-if="te('title')" class="mn-b-medium" v-html="t('title')"/>
-        <p v-if="te('description')" class="mn-b-medium p-medium t-transp">{{ t('description') }}</p>  
-        <p v-if="te('subdescription')" class="mn-b-semi p-regular t-transp">{{ t('subdescription')}}</p>
+        <p v-if="te('description')" class="mn-b-medium p-medium opacity-50">{{ t('description') }}</p>  
+        <p v-if="te('subdescription')" class="mn-b-semi p-regular opacity-50">{{ t('subdescription')}}</p>
 
       <div class="gap-thin cols-2 mobile:cols-1">
         <router-link :to="t('action_link')" class="flex t-center bg-white flex-center flex-column t-black pd-big radius-medium">
@@ -67,7 +67,7 @@ const props = defineProps({
       tokenAddress: '0x64b4b0ade1f015d6a0c536e8cf041e181d872220',
       tokenSymbol: 'OZDT',
       tokenDecimals: 8,
-      tokenImage: 'https://ozdao.dev/logo-token.png',
+      tokenImage: 'https://ozdao.com/logo-token.png',
       targetChainId: '0x89',
       metamaskIcon: "/icons/metamask.svg"
     })

package/src/modules/landing/components/sections/SectionFeature.vue

@@ -8,7 +8,7 @@
 				{{title}}
 	    </h2>
 	    
-	    <p class="p-medium t-transp">
+	    <p class="p-medium opacity-50">
 	    	{{description}}
 	    </p>
     </div>

package/src/modules/landing/components/sections/SectionFeatures.vue

@@ -14,7 +14,7 @@
         <h3 class="mn-b-medium">
           {{ feature.title }}
         </h3>
-        <p class="t-transp">
+        <p class="opacity-50">
           {{ feature.description }}
         </p>
       </div>

package/src/modules/landing/components/sections/SectionFeaturesImages.vue

@@ -3,7 +3,7 @@
 
     <div class="mn-b-big t-center title">
       <h2 class="mn-b-small">{{t('title')}}</h2>
-      <p class="w-m-60r mn-b-big mn-auto t-transp p-medium">
+      <p class="w-m-60r mn-b-big mn-auto opacity-50 p-medium">
         {{t('subtitle')}}
       </p>
     </div>
@@ -20,7 +20,7 @@
           :src="feature.image"
         > 
         <h3 class="mn-b-medium">{{feature.title}}</h3>
-        <p class="t-transp">{{feature.text}}</p>
+        <p class="opacity-50">{{feature.text}}</p>
       </div>
 
     </div>