@ozdao/martyrs 0.2.487 → 0.2.488

package/src/modules/globals/views/plugins/date-picker.plugin.js

@@ -6,7 +6,10 @@ import * as globals from '@martyrs/src/modules/globals/views/store/globals.js'
 // 1) Общее состояние и API
 const state = reactive({
   isOpen: false,
-  product: null,
+  productId: null,
+  variantId: null,
+  quantity: 1,
+  price: 0,
   options: { showFees: false, feesRate: 0.15, showVat: false, vatRate: 0 },
   resolve: null,
   reject: null
@@ -21,11 +24,14 @@ function getDefaultOptions() {
   }
 }
 
-export function showDateSelector(product, customOptions = {}) {
+export function showDateSelector(productId, variantId, quantity = 1, price = 0, customOptions = {}) {
   return new Promise((res, rej) => {
     state.resolve = res
     state.reject  = rej
-    state.product = markRaw(product)
+    state.productId = productId
+    state.variantId = variantId
+    state.quantity = quantity
+    state.price = price
     state.options = { ...getDefaultOptions(), ...customOptions }
     state.isOpen  = true
   })
@@ -34,13 +40,13 @@ export function showDateSelector(product, customOptions = {}) {
 function confirmSelection(dates) {
   state.isOpen = false
   state.resolve?.(dates)
-  state.resolve = state.reject = null
+  state.resolve = state.reject = state.productId = state.variantId = null
 }
 
 function cancelSelection() {
   state.isOpen = false
   state.reject?.(new Error('Date selection cancelled'))
-  state.resolve = state.reject = null
+  state.resolve = state.reject = state.productId = state.variantId = null
 }
 
 // 2) Хост-компонент
@@ -50,14 +56,18 @@ const DateSelectorHost = defineComponent({
     return () =>
       state.isOpen
         ? h(PopupDateSelector, {
-            product: state.product,
+            productId: state.productId,
+            variantId: state.variantId,
+            quantity: state.quantity,
+            price: state.price,
             isOpen: state.isOpen,
             showFees: state.options.showFees,
             feesRate: state.options.feesRate,
             showVat: state.options.showVat,
             vatRate: state.options.vatRate,
+            showCancelButton: state.options.showCancelButton || false,
             onConfirm: confirmSelection,
-            onCancel: cancelSelection,
+            onCancel: state.options.onCancel || cancelSelection,
             'onClose-popup': cancelSelection
           })
         : null

package/src/modules/globals/views/router/addRoutes.js

@@ -72,14 +72,17 @@ function addRoutes(router, config) {
     }
 
     if (basePath) {
+      console.log('addRoutes: Adding intermediate route', `${routeNamePrefix}${basePath.charAt(0).toUpperCase() + basePath.slice(1)}Intermediate`, 'to parent', parentName);
+      console.log('Routes before adding:', router.getRoutes().filter(r => r.name && r.name.includes('OrganizationOrders')).map(r => r.name));
       const intermediateRoute = {
         path: basePath,
         component,
-        name: `${routeNamePrefix}Intermediate`,
+        name: `${routeNamePrefix}${basePath.charAt(0).toUpperCase() + basePath.slice(1)}Intermediate`,
         meta,
         children: finalChildren,
       };
       router.addRoute(parentName, intermediateRoute);
+      console.log('Routes after adding:', router.getRoutes().filter(r => r.name && r.name.includes('OrganizationOrders')).map(r => r.name));
     } else {
       filteredRoutes.forEach(route => {
         router.addRoute(parentName, route);

package/src/modules/globals/views/store/globals.js

@@ -222,4 +222,4 @@ function invertColors(variableNames, originalColors) {
   });
 }
 
-export { actions, setError, state };
+export { actions, setError, setSnack, state };

package/src/modules/icons/actions/IconOpenLink.vue

@@ -0,0 +1,14 @@
+<template>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<path :fill="fill" d="m58.332 20.832c-2.3008 0-4.1641-1.8633-4.1641-4.1641s1.8633-4.168 4.1641-4.168h25c1.1055 0 2.168 0.4375 2.9492 1.2188s1.2188 1.8438 1.2188 2.9492v25c0 2.3008-1.8672 4.1641-4.168 4.1641s-4.1641-1.8633-4.1641-4.1641v-14.941l-38.723 38.719c-1.625 1.6289-4.2656 1.6289-5.8906 0-1.6289-1.625-1.6289-4.2656 0-5.8906l38.719-38.723zm-45.832 8.3359c0-4.6055 3.7305-8.3359 8.332-8.3359h20.836c2.3008 0 4.1641 1.8672 4.1641 4.168s-1.8633 4.168-4.1641 4.168h-20.836v50h50v-20.836c0-2.3008 1.8672-4.1641 4.168-4.1641s4.168 1.8633 4.168 4.1641v20.836c0 4.6016-3.7305 8.332-8.3359 8.332h-50c-4.6016 0-8.332-3.7305-8.332-8.332z"/>
+</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/icons/entities/IconInfo.vue

@@ -1,7 +1,7 @@
 <template>
 	<svg xmlns="http://www.w3.org/2000/svg" class="mn-b-small i-extra" f width="64" height="64" viewBox="0 0 64 64" fill="none">
-    <circle cx="32" cy="32" r="22.875"  :stroke="fill" stroke-width="2.25"/>
-    <path d="M34.207 22.4192L33.436 21.6L34.207 22.4192C34.8678 21.7973 35.173 20.9832 35.173 20.088C35.173 19.1688 34.8535 18.3301 34.1341 17.7234C33.4511 17.123 32.5912 16.875 31.672 16.875C30.7602 16.875 29.912 17.1319 29.2341 17.7338C28.5388 18.3482 28.243 19.1854 28.243 20.088C28.243 20.9931 28.5391 21.8248 29.209 22.4552L29.2337 22.4785L29.2598 22.5002C29.9451 23.0714 30.8001 23.301 31.708 23.301C32.6422 23.301 33.5294 23.057 34.207 22.4192ZM33.012 26.631H28.8847C27.8742 26.631 27.055 27.4502 27.055 28.4607C27.055 29.3486 27.6924 30.1083 28.5668 30.2626L29.503 30.4279V42.2561L28.2191 42.643C27.4211 42.8835 26.875 43.6184 26.875 44.4518C26.875 45.4952 27.7208 46.341 28.7642 46.341H35.7727C36.8134 46.341 37.657 45.4974 37.657 44.4567C37.657 43.6154 37.0993 42.8761 36.2904 42.6449L35.137 42.3154V28.756C35.137 27.5824 34.1856 26.631 33.012 26.631Z"  :stroke="fill" stroke-width="2.25"/>
+    <circle cx="32" cy="32" r="22.875" :class="$attrs.class" :stroke="fill" stroke-width="2.25"/>
+    <path d="M34.207 22.4192L33.436 21.6L34.207 22.4192C34.8678 21.7973 35.173 20.9832 35.173 20.088C35.173 19.1688 34.8535 18.3301 34.1341 17.7234C33.4511 17.123 32.5912 16.875 31.672 16.875C30.7602 16.875 29.912 17.1319 29.2341 17.7338C28.5388 18.3482 28.243 19.1854 28.243 20.088C28.243 20.9931 28.5391 21.8248 29.209 22.4552L29.2337 22.4785L29.2598 22.5002C29.9451 23.0714 30.8001 23.301 31.708 23.301C32.6422 23.301 33.5294 23.057 34.207 22.4192ZM33.012 26.631H28.8847C27.8742 26.631 27.055 27.4502 27.055 28.4607C27.055 29.3486 27.6924 30.1083 28.5668 30.2626L29.503 30.4279V42.2561L28.2191 42.643C27.4211 42.8835 26.875 43.6184 26.875 44.4518C26.875 45.4952 27.7208 46.341 28.7642 46.341H35.7727C36.8134 46.341 37.657 45.4974 37.657 44.4567C37.657 43.6154 37.0993 42.8761 36.2904 42.6449L35.137 42.3154V28.756C35.137 27.5824 34.1856 26.631 33.012 26.631Z"   :class="$attrs.class" :stroke="fill" stroke-width="2.25"/>
   </svg>
 </template>
 

package/src/modules/icons/icons.client.js

@@ -37,6 +37,7 @@ import LabelGooglePlay from './labels/LabelGooglePlay.vue';
 
 // Actions
 import IconDuplicate from './actions/IconDuplicate.vue';
+import IconOpenLink from './actions/IconOpenLink.vue';
 import IconShow from './actions/IconShow.vue';
 import IconShopcartAdd from './actions/IconShopcartAdd.vue';
 
@@ -72,6 +73,9 @@ import IconUnMute from './navigation/IconUnMute.vue';
 import IconUpload from './navigation/IconUpload.vue';
 import IconVolume from './navigation/IconVolume.vue';
 
+// Components
+import IconSearchPopup from './components/IconSearchPopup.vue';
+
 // Placeholders
 import PlaceholderChat from './placeholders/PlaceholderChat.vue';
 import PlaceholderImage from './placeholders/PlaceholderImage.vue';
@@ -146,6 +150,9 @@ export {
   IconUpload,
   IconVolume,
   
+  // Components
+  IconSearchPopup,
+  
   // Entities
   IconAddress,
   IconBell,
@@ -183,6 +190,7 @@ export {
   IconDuplicate,
   IconShow,
   IconShopcartAdd,
+  IconOpenLink,
   
   // Labels
   LabelAppStore,

package/src/modules/icons/pages/IconsPage.vue

@@ -139,6 +139,7 @@ import Line from '@martyrs/src/modules/icons/socials/line.vue';
 
 // Import actions icons
 import IconDuplicate from '@martyrs/src/modules/icons/actions/IconDuplicate.vue';
+import IconOpenLink from '@martyrs/src/modules/icons/actions/IconOpenLink.vue';
 import IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue';
 import IconShow from '@martyrs/src/modules/icons/actions/IconShow.vue';
 
@@ -242,6 +243,7 @@ const iconsMap = {
   },
   actions: {
     IconDuplicate,
+    IconOpenLink,
     IconShopcartAdd,
     IconShow
   },

package/src/modules/icons/skeletons/SkeletonEventShort.vue

@@ -1,7 +1,7 @@
 <template>
   <svg width="100%" height="50" xmlns="http://www.w3.org/2000/svg">
     <!-- Фоновый прямоугольник для всей строки -->
-    <rect x="0" y="0" width="100%" height="100%" fill="rgb(var(--white))"/>
+    <rect x="0" y="0" width="100%" height="100%" fill="rgb(var(--light))"/>
 
     <!-- Имитация времени -->
     <rect x="15" y="15" rx="3" ry="3" width="40" height="20" fill="rgba(var(--black),0.05)"></rect>
@@ -14,7 +14,7 @@
     <circle cx="280" cy="25" r="10" fill="rgba(var(--black),0.025)"></circle>
 
     <!-- Блик с анимацией движения -->
-    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--white))" opacity="0.3">
+    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--light))" opacity="0.3">
       <animate attributeName="x" from="-25%" to="100%" dur="2s" repeatCount="indefinite"></animate>
     </rect>
   </svg>

package/src/modules/icons/socials/telegram.vue

@@ -1,7 +1,7 @@
 <template>
 	<svg width="40" height="33" viewBox="0 0 40 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M9.75391 18.7989L14.1454 30.9541C14.1454 30.9541 14.6945 32.0914 15.2824 32.0914C15.8704 32.0914 24.6149 22.9943 24.6149 22.9943L34.3391 4.21216L9.9106 15.6613L9.75391 18.7989Z" fill="#C8DAEA"/>
-	<path d="M15.5785 21.916L14.7355 30.8755C14.7355 30.8755 14.3826 33.6208 17.1273 30.8755C19.8719 28.1302 22.4991 26.0133 22.4991 26.0133" fill="#A9C6D8"/>
+	<path d="M9.75391 18.7989L14.1454 30.9541C14.1454 30.9541 14.6945 32.0914 15.2824 32.0914C15.8704 32.0914 24.6149 22.9943 24.6149 22.9943L34.3391 4.21216L9.9106 15.6613L9.75391 18.7989Z" :fill="fill" opacity="0.95"/>
+	<path d="M15.5785 21.916L14.7355 30.8755C14.7355 30.8755 14.3826 33.6208 17.1273 30.8755C19.8719 28.1302 22.4991 26.0133 22.4991 26.0133" :fill="fill" opacity="0.9"/>
 	<path d="M9.8345 19.2327L0.800944 16.2894C0.800944 16.2894 -0.278665 15.8514 0.0689689 14.8581C0.140532 14.6533 0.28489 14.479 0.716734 14.1795C2.71833 12.7844 37.7646 0.18778 37.7646 0.18778C37.7646 0.18778 38.7541 -0.145665 39.3377 0.0761175C39.4821 0.120809 39.612 0.20305 39.7142 0.314426C39.8164 0.425801 39.8871 0.562314 39.9192 0.710002C39.9823 0.970857 40.0086 1.23923 39.9975 1.50737C39.9948 1.73933 39.9667 1.95433 39.9454 2.29148C39.732 5.73543 33.3444 31.4388 33.3444 31.4388C33.3444 31.4388 32.9622 32.9428 31.5929 32.9943C31.2564 33.0052 30.9212 32.9482 30.6072 32.8267C30.2932 32.7053 30.0069 32.5218 29.7653 32.2873C27.0783 29.976 17.7912 23.7347 15.739 22.362C15.6927 22.3305 15.6538 22.2894 15.6247 22.2415C15.5957 22.1936 15.5772 22.14 15.5706 22.0844C15.5419 21.9397 15.6992 21.7605 15.6992 21.7605C15.6992 21.7605 31.8706 7.38631 32.3009 5.87732C32.3342 5.76041 32.2083 5.70273 32.0393 5.75394C30.9652 6.14908 12.346 17.9073 10.291 19.2049C10.1431 19.2497 9.98675 19.2592 9.8345 19.2327V19.2327Z" :fill="fill"/>
 	</svg>
 </template>

package/src/modules/inventory/components/forms/AdjustmentForm.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="w-100">
+    <p class="mn-b-medium t-transp">
+      Effortlessly update your inventory and track adjustments for accurate stock management.
+    </p>
+    
+   
+    <div class="mn-b-medium">
+      <div class="mn-b-small flex-nowrap flex gap-thin">
+        <Field
+          v-model:field="quantity"
+          label="Quantity Adjustment"
+          type="number"
+          placeholder="Enter +/- quantity"
+          class="w-100 bg-light radius-small pd-medium"
+        />
+        
+        <Field
+          :field="product.available"
+          label="Current Available"
+          type="text"
+          :disabled="true"
+          class="w-100 bg-light radius-small pd-medium"
+        />
+      </div>
+      
+    </div>
+
+    <!-- Variant Selection -->
+    <div class="mn-b-medium" v-if="productVariants.length > 0">
+      <p class="mn-b-small t-medium">Select Variant</p>
+      <Select
+        v-model:select="selectedVariant"
+        :options="productVariants"
+        property="_id"
+        value="name"
+        placeholder="Choose variant"
+        class="w-100 bg-light radius-small pd-medium"
+      />
+    </div>
+
+    <!-- Storage Selection -->
+    <div class="mn-b-medium">
+      <p class="mn-b-small t-medium">Select Storage</p>
+      <Select
+        v-model:select="selectedStorage"
+        :options="storageOptions"
+        property="_id"
+        value="name"
+        placeholder="Choose storage"
+        class="w-100 bg-light radius-small pd-medium"
+      />
+    </div>
+    
+    <div class="mn-b-medium">
+      <p class="mn-b-small t-medium">Adjustment Reason</p>
+      
+      <div class="cols-3 gap-small mn-b-small">
+        <div 
+          v-for="reason in adjustmentReasons"
+          :key="reason.value"
+          @click="selectedReason = reason.value"
+          :class="{ 'bg-main t-black': selectedReason === reason.value, 'bg-light': selectedReason !== reason.value }"
+          class="pd-small radius-small flex-column flex-center flex cursor-pointer"
+        >
+          <component :is="reason.icon" class="i-regular mn-b-nano" />
+          <span>{{ reason.label }}</span>
+        </div>
+      </div>
+      
+      <Field
+        v-if="selectedReason === 'custom'"
+        v-model:field="customReasonText"
+        placeholder="Enter custom reason"
+        class="w-100 bg-light radius-small pd-medium"
+      />
+    </div>
+    
+    <Field
+      v-model:field="note"
+      label="Note"
+      type="textarea"
+      placeholder="Add additional details about this adjustment..."
+      class="w-100 bg-light radius-small pd-medium mn-b-medium"
+    />
+    
+    <div class="flex-nowrap flex gap-small">
+      <button 
+        @click="$emit('close')" 
+        class="pd-small radius-small flex-center flex w-max cursor-pointer t-transp"
+      >
+        Cancel
+      </button>
+      
+      <button 
+        @click="saveAdjustment" 
+        class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-main t-black"
+      >
+        Save Adjustment
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import Field from '@martyrs/src/components/Field/Field.vue'
+import Select from '@martyrs/src/components/Select/Select.vue'
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+import * as spots from '@martyrs/src/modules/spots/store/spots.js'
+import variants from '@martyrs/src/modules/products/store/variants.store.js'
+
+const route = useRoute()
+
+// Icons for adjustment reasons
+import IconDamage from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconExpire from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconMisplacement from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconThief from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconStocktake from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconCustom from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['save', 'close'])
+
+// Form state
+const quantity = ref(0)
+const selectedReason = ref('custom')
+const customReasonText = ref('')
+const note = ref('')
+const selectedStorage = ref(null)
+const selectedVariant = ref(null)
+const productVariants = ref([])
+const storageOptions = ref([])
+
+// Adjustment reason options
+const adjustmentReasons = [
+  { label: 'Restock', value: 'restock', icon: IconDamage },
+  { label: 'Sale', value: 'sale', icon: IconExpire },
+  { label: 'Return', value: 'return', icon: IconMisplacement },
+  { label: 'Damage', value: 'damage', icon: IconThief },
+  { label: 'Transfer', value: 'transfer', icon: IconStocktake },
+  { label: 'Custom', value: 'custom', icon: IconCustom },
+]
+
+function formatPrice(price) {
+  return '$' + (parseFloat(price) || 0).toFixed(2)
+}
+
+// Fetch variants and storages on mount
+onMounted(async () => {
+  console.log('AdjustmentForm mounted with product:', props.product)
+  
+  // Fetch variants for the product
+  try {
+    const variantsData = await variants.read({
+      product: props.product._id,
+      limit: 50
+    })
+    productVariants.value = variantsData
+    // Select first variant by default if available
+    if (variantsData.length > 0) {
+      selectedVariant.value = variantsData[0]._id
+    }
+  } catch (err) {
+    console.error('Error fetching variants:', err)
+  }
+
+  // Fetch storage options
+  try {
+    const spotsData = await spots.actions.read({
+      user: auth.state.user._id,
+      organization: route.params._id,
+      limit: 50
+    })
+    storageOptions.value = spotsData.map(spot => ({
+      _id: spot._id,
+      name: spot.profile?.name || 'Storage'
+    }))
+    // Select first storage by default if available
+    if (storageOptions.value.length > 0) {
+      selectedStorage.value = storageOptions.value[0]._id
+    }
+  } catch (err) {
+    console.error('Error fetching spots:', err)
+  }
+})
+
+function saveAdjustment() {
+  if (!selectedVariant.value) {
+    alert('Please select a variant')
+    return
+  }
+  if (!selectedStorage.value) {
+    alert('Please select a storage')
+    return
+  }
+
+  const adjustmentData = {
+    product: props.product._id,
+    variant: selectedVariant.value,
+    storage: selectedStorage.value,
+    source: {
+      type: 'User',
+      target: auth.state.user._id
+    },
+    quantity: parseInt(quantity.value || 0),
+    reason: selectedReason.value === 'custom' ? customReasonText.value : selectedReason.value,
+    comment: note.value || '',
+    creator: {
+      type: 'user',
+      target: auth.state.user._id
+    }
+  }
+  
+  emit('save', adjustmentData)
+}
+</script>

package/src/modules/inventory/components/forms/ColumnSettingsMenu.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="w-100">
+    <p class="mn-b-medium t-transp">
+      Customize which columns are visible in your inventory table.
+    </p>
+
+    <div class="mn-b-medium">
+      <div
+        v-for="col in columns"
+        :key="col.key"
+        class="mn-b-small"
+      >
+        <Checkbox
+          :label="col.label"
+          name="columnVisibility"
+          :value="col.key"
+          class="w-100 bg-light radius-small pd-small"
+          :checked="selected.includes(col.key)"
+          @update:checked="val => toggle(col.key, val)"
+        />
+      </div>
+    </div>
+
+    <div class="flex-nowrap flex gap-small">
+      <button
+        @click="$emit('close')"
+        class="pd-small radius-small flex-center flex w-max cursor-pointer t-transp"
+      >
+        Cancel
+      </button>
+
+      <button
+        @click="saveSettings"
+        class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-main t-black"
+      >
+        Save Settings
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['save', 'close'])
+
+// Локальный массив выбранных ключей
+const selected = ref(props.columns.filter(c => c.visible).map(c => c.key))
+
+// Синхронизируем, если проп изменится
+watch(
+  () => props.columns,
+  cols => {
+    selected.value = cols.filter(c => c.visible).map(c => c.key)
+  }
+)
+
+// Добавление/удаление ключа
+function toggle(key, checked) {
+  const idx = selected.value.indexOf(key)
+  if (checked && idx === -1) {
+    selected.value.push(key)
+  } else if (!checked && idx !== -1) {
+    selected.value.splice(idx, 1)
+  }
+}
+
+// Эмитим массив видимых колонок
+function saveSettings() {
+  emit('save', selected.value)
+}
+</script>

package/src/modules/inventory/components/forms/HistoryView.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="w-100">
+    <div class="flex-nowrap flex flex-v-center mn-b-medium">
+      <div class="flex-nowrap flex flex-v-center">
+        <img 
+          v-if="product.images && product.images.length > 0"
+          :src="(FILE_SERVER_URL || '') + product.images[0]" 
+          alt="Product" 
+          class="w-3r h-3r radius-small object-fit-cover mn-r-small"
+        />
+        <PlaceholderImage 
+          v-else 
+          class="w-3r h-3r radius-small mn-r-small"
+        />
+        
+        <div>
+          <h3 class="mn-b-nano">{{ product.name }}</h3>
+          <p class="t-small t-transp">SKU: {{ product.sku }}</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="mn-b-medium w-100 h-max-30r o-scroll">
+      <table class="w-100">
+        <thead>
+          <tr class="bg-light">
+            <th class="pd-small t-left">Date</th>
+            <th class="pd-small t-left">Type</th>
+            <th class="pd-small t-left">Quantity</th>
+            <th class="pd-small t-left">Reason</th>
+            <th class="pd-small t-left">User</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td colspan="5" class="pd-medium t-center">Loading history...</td>
+          </tr>
+          <tr v-else-if="history.length === 0">
+            <td colspan="5" class="pd-medium t-center">No history available</td>
+          </tr>
+          <tr v-for="(entry, index) in history" :key="index" class="border-b">
+            <td class="pd-small">{{ formatDate(entry.createdAt) }}</td>
+            <td class="pd-small">
+              <span 
+                :class="entry.quantity > 0 ? 'bg-green t-white' : 'bg-red t-white'"
+                class="pd-nano pd-r-small pd-l-small radius-small t-small"
+              >
+                {{ entry.quantity > 0 ? 'Stock In' : 'Stock Out' }}
+              </span>
+            </td>
+            <td class="pd-small">
+              {{ entry.quantity > 0 ? '+' : '' }}{{ entry.quantity }}
+            </td>
+            <td class="pd-small">{{ entry.reason || entry.comment || 'Not specified' }}</td>
+            <td class="pd-small">
+              <div class="flex-nowrap flex flex-v-center">
+                <div class="w-2r h-2r radius-100 bg-light o-hidden mn-r-nano">
+                  <img 
+                    v-if="entry.creator?.target?.profile?.photo" 
+                    :src="(FILE_SERVER_URL || '') + entry.creator.target.profile.photo" 
+                    alt="User" 
+                    class="w-100 h-100 object-fit-cover" 
+                  />
+                  <PlaceholderImage v-else class="w-100 h-100" />
+                </div>
+                {{ entry.creator?.target?.profile?.name || 'System' }}
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    
+    <button 
+      @click="$emit('close')" 
+      class="pd-small radius-small flex-center flex w-max cursor-pointer bg-main t-black"
+    >
+      Close
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
+// Import inventory API functions
+const API_BASE = '/api/inventory'
+
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['close'])
+
+// State
+const loading = ref(true)
+const history = ref([])
+
+onMounted(async () => {
+  await loadHistory()
+})
+
+async function loadHistory() {
+  try {
+    // Fetch adjustments for this product
+    const response = await fetch(`${API_BASE}/adjustments?product=${props.product._id}&limit=50&sort=createdAt&order=desc`)
+    const data = await response.json()
+    
+    history.value = data || []
+  } catch (error) {
+    console.error('Error loading history:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatDate(dateString) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { 
+    day: 'numeric', 
+    month: 'short', 
+    year: 'numeric' 
+  })
+}
+</script>
+
+<style scoped>
+.border-b {
+  border-bottom: 1px solid rgba(var(--black), 0.1);
+}
+</style>