@ozdao/martyrs 0.2.477 → 0.2.479

package/src/modules/products/components/elements/QuantitySelector.vue

@@ -0,0 +1,52 @@
+<!-- QuantitySelector.vue -->
+<template>
+  <div class="flex flex-nowrap gap-thin">
+    <button 
+      @click="decrementQuantity" 
+      class="radius-small pd-small bg-light flex-center flex aspect-1x1 cursor-pointer hover-scale-1"
+      :disabled="modelValue <= 1"
+    >
+      <span class="i-regular">-</span>
+    </button>
+
+    <div class="radius-small br-solid br-1px br-light w-3r pd-small">
+    <input
+      type="number"
+      v-model.number="modelValue"
+      class="w-100 h-1r t-center"
+      :min="1"
+      :max="maxValue"
+    />
+    </div>
+    <button 
+      @click="incrementQuantity" 
+      class="radius-small pd-small bg-light flex-center flex aspect-1x1 cursor-pointer hover-scale-1"
+      :disabled="modelValue >= maxValue"
+    >
+      <span class="i-regular">+</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  maxValue: {
+    type: Number,
+    default: Infinity
+  }
+});
+
+const modelValue = defineModel();
+
+function incrementQuantity() {
+  if (modelValue.value < props.maxValue) {
+    modelValue.value++;
+  }
+}
+
+function decrementQuantity() {
+  if (modelValue.value > 1) {
+    modelValue.value--;
+  }
+}
+</script>

package/src/modules/products/components/elements/THC.vue

@@ -1,18 +1,18 @@
 <template>
-	<div v-if="product.information[1]" class="thc">
-    <p class="t-bold t-white">{{product.information[1].value}} %</p>
+	<div v-if="product.attributes[1]" class="thc">
+    <p class="t-bold t-white">{{product.attributes[1].value}} %</p>
     <p class="t-white h6">THC</p>
     <!-- Polygon bg -->
-    <svg v-if="Number(product.information[1].value) >= 18" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="Number(product.attributes[1].value) >= 18" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill="#FF0000" stroke="rgb(var(--white))" stroke-width="3" d="M26 3.3094C28.4752 1.88034 31.5248 1.88034 34 3.3094L53.7128 14.6906C56.188 16.1197 57.7128 18.7607 57.7128 21.6188V44.3812C57.7128 47.2393 56.188 49.8803 53.7128 51.3094L34 62.6906C31.5248 64.1197 28.4752 64.1197 26 62.6906L6.28719 51.3094C3.81198 49.8803 2.28719 47.2393 2.28719 44.3812V21.6188C2.28719 18.7607 3.81198 16.1197 6.28719 14.6906L26 3.3094Z" />
     </svg>
-    <svg v-if="Number(product.information[1].value) <= 18 && Number(product.information[1].value) >= 14" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="Number(product.attributes[1].value) <= 18 && Number(product.attributes[1].value) >= 14" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill="#FF0099" stroke="rgb(var(--white))" stroke-width="3" d="M26 3.3094C28.4752 1.88034 31.5248 1.88034 34 3.3094L53.7128 14.6906C56.188 16.1197 57.7128 18.7607 57.7128 21.6188V44.3812C57.7128 47.2393 56.188 49.8803 53.7128 51.3094L34 62.6906C31.5248 64.1197 28.4752 64.1197 26 62.6906L6.28719 51.3094C3.81198 49.8803 2.28719 47.2393 2.28719 44.3812V21.6188C2.28719 18.7607 3.81198 16.1197 6.28719 14.6906L26 3.3094Z" />
     </svg>
-    <svg v-if="Number(product.information[1].value) <= 14 && Number(product.information[1].value) >= 10" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="Number(product.attributes[1].value) <= 14 && Number(product.attributes[1].value) >= 10" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill="#EB00FF" stroke="rgb(var(--white))" stroke-width="3" d="M26 3.3094C28.4752 1.88034 31.5248 1.88034 34 3.3094L53.7128 14.6906C56.188 16.1197 57.7128 18.7607 57.7128 21.6188V44.3812C57.7128 47.2393 56.188 49.8803 53.7128 51.3094L34 62.6906C31.5248 64.1197 28.4752 64.1197 26 62.6906L6.28719 51.3094C3.81198 49.8803 2.28719 47.2393 2.28719 44.3812V21.6188C2.28719 18.7607 3.81198 16.1197 6.28719 14.6906L26 3.3094Z" />
     </svg>
-    <svg v-if="Number(product.information[1].value) <= 10" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="Number(product.attributes[1].value) <= 10" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill="#00FF29" stroke="rgb(var(--white))" stroke-width="3" d="M26 3.3094C28.4752 1.88034 31.5248 1.88034 34 3.3094L53.7128 14.6906C56.188 16.1197 57.7128 18.7607 57.7128 21.6188V44.3812C57.7128 47.2393 56.188 49.8803 53.7128 51.3094L34 62.6906C31.5248 64.1197 28.4752 64.1197 26 62.6906L6.28719 51.3094C3.81198 49.8803 2.28719 47.2393 2.28719 44.3812V21.6188C2.28719 18.7607 3.81198 16.1197 6.28719 14.6906L26 3.3094Z" />
     </svg>
   </div>

package/src/modules/products/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/products/components/forms/ReorderSettingsForm.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="w-100">
+    <p class="mn-b-medium t-transp">
+      Set up automatic reordering to maintain optimal inventory levels and avoid stockouts.
+    </p>
+    
+    <Field
+      v-model:field="threshold"
+      label="Reorder Point"
+      type="number"
+      class="w-100 bg-light radius-small pd-medium mn-b-small"
+    />
+    
+    <p class="mn-b-small t-small t-transp">
+      Products will be flagged for reordering when the stock level drops below this threshold.
+    </p>
+    
+    <Field
+      v-model:field="quantity"
+      label="Reorder Quantity"
+      type="number"
+      class="w-100 bg-light radius-small pd-medium mn-b-small"
+    />
+    
+    <div class="mn-b-medium">
+      <p class="mn-b-small t-medium">Notification Options</p>
+      
+      <div class="mn-b-small">
+        <Checkbox 
+          v-model:checked="notifications.email"
+          label="Email notification"
+          class="w-100 mn-b-nano"
+        />
+        
+        <Checkbox 
+          v-model:checked="notifications.push"
+          label="Push notification"
+          class="w-100 mn-b-nano"
+        />
+        
+        <Checkbox 
+          v-model:checked="notifications.system"
+          label="System alert"
+          class="w-100"
+        />
+      </div>
+    </div>
+    
+    <Checkbox 
+      v-model:checked="autoOrder"
+      label="Enable automatic purchase order creation"
+      class="w-100 mn-b-small"
+    />
+    
+    <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 } from 'vue'
+import Field from '@martyrs/src/components/Field/Field.vue'
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
+
+const props = defineProps({
+  product: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['save', 'close'])
+
+// Form state
+const threshold = ref(props.product ? (props.product.reorderThreshold || '5') : '5')
+const quantity = ref(props.product ? (props.product.reorderQuantity || '10') : '10')
+const autoOrder = ref(false)
+const notifications = ref({
+  email: true,
+  push: false,
+  system: true
+})
+
+function saveSettings() {
+  const settings = {
+    threshold: parseInt(threshold.value || 5),
+    quantity: parseInt(quantity.value || 10),
+    autoOrder: autoOrder.value,
+    notifications: notifications.value
+  }
+  
+  emit('save', settings)
+}
+</script>

package/src/modules/products/components/forms/StockAuditForm.vue

@@ -0,0 +1,154 @@
+<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="physicalCount"
+          label="Physical Count"
+          type="number"
+          class="w-100 bg-light radius-small pd-medium"
+        />
+        
+        <Field
+          :field="product.available"
+          label="Available"
+          type="text"
+          :disabled="true"
+          class="w-100 bg-light radius-small pd-medium"
+        />
+      </div>
+      
+      <div class="bg-light pd-medium radius-small">
+        <div class="flex-nowrap flex flex-v-center t-demi">
+          <p class="mn-r-auto">Discrepancy</p>
+          <p :class="discrepancy > 0 ? 't-green' : discrepancy < 0 ? 't-red' : ''">
+            {{ discrepancy > 0 ? '+' : '' }}{{ discrepancy }}
+          </p>
+        </div>
+      </div>
+    </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 } from 'vue'
+import Field from '@martyrs/src/components/Field/Field.vue'
+
+// 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 adjustmentType = ref('quantity')
+const physicalCount = ref(props.product.available)
+const valueAdjustment = ref('0')
+const selectedReason = ref('stocktake')
+const customReasonText = ref('')
+const note = ref('')
+
+// Computed values
+const discrepancy = computed(() => {
+  return parseInt(physicalCount.value || 0) - props.product.available
+})
+
+// Adjustment reason options
+const adjustmentReasons = [
+  { label: 'Damage', value: 'damage', icon: IconDamage },
+  { label: 'Expire', value: 'expire', icon: IconExpire },
+  { label: 'Misplacement', value: 'misplacement', icon: IconMisplacement },
+  { label: 'Theft', value: 'theft', icon: IconThief },
+  { label: 'Stocktake', value: 'stocktake', icon: IconStocktake },
+  { label: 'Custom', value: 'custom', icon: IconCustom },
+]
+
+function formatPrice(price) {
+  return '$' + (parseFloat(price) || 0).toFixed(2)
+}
+
+function saveAdjustment() {
+  const adjustmentData = {
+    productId: props.product._id,
+    type: adjustmentType.value,
+    reason: selectedReason.value === 'custom' ? customReasonText.value : selectedReason.value
+  }
+  
+  if (adjustmentType.value === 'quantity') {
+    adjustmentData.physicalCount = parseInt(physicalCount.value || 0)
+    adjustmentData.discrepancy = discrepancy.value
+  } else {
+    adjustmentData.valueAdjustment = parseFloat(valueAdjustment.value || 0)
+  }
+  
+  if (note.value) {
+    adjustmentData.note = note.value
+  }
+  
+  emit('save', adjustmentData)
+}
+</script>

package/src/modules/products/components/forms/StockHistoryView.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.type === 'stock-in' ? 'bg-green t-white' : 'bg-red t-white'"
+                class="pd-nano pd-r-small pd-l-small radius-small t-small"
+              >
+                {{ entry.type === 'stock-in' ? 'Stock In' : 'Stock Out' }}
+              </span>
+            </td>
+            <td class="pd-small">
+              {{ entry.positions[0]?.quantity || 0 }}
+            </td>
+            <td class="pd-small">{{ 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 * as leftovers from '@martyrs/src/modules/products/store/leftovers.js'
+
+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 {
+    // Use the leftovers read action to get history for this product
+    const data = await leftovers.actions.read({ 
+      'positions._id': props.product._id 
+    })
+    
+    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>

package/src/modules/products/components/pages/Categories.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pd-thin bg-white">
     <Block v-if="!MOBILE_APP" 
-      class="radius-big mn-b-thin mobile:flex-wrap flex-nowrap flex-v-center flex"
+      class="radius-medium mn-b-thin mobile:flex-wrap flex-nowrap flex-v-center flex"
     >
       <h2 class="mn-r-auto">
         Categories
@@ -14,7 +14,7 @@
             _id: $route.params._id
           } 
         }"
-        class="uppercase t-medium pd-small radius-big bg-white nav-link"
+        class="uppercase t-medium pd-small radius-medium bg-white nav-link"
       >
         Add New
       </router-link>
@@ -65,9 +65,9 @@
   import { onMounted, onUnmounted, computed, ref,reactive } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
 
-  import * as globals from '@martyrs/src/modules/globals/views/store/globals';
-  import * as auth from '@martyrs/src/modules/auth/views/store/auth'; 
-  import * as categories from '@martyrs/src/modules/products/store/categories'; 
+  import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'; 
+  import * as categories from '@martyrs/src/modules/products/store/categories.js'; 
 
   const route = useRoute();
   const router = useRouter();

package/src/modules/products/components/pages/CategoryEdit.vue

@@ -1,13 +1,13 @@
 <template>
   <div v-if="!isLoading"  class="pd-thin bg-white for-transition w-100">
-    <Block v-if="!MOBILE_APP" class="radius-big mn-b-thin flex-nowrap flex-v-center flex">
+    <Block v-if="!MOBILE_APP" class="radius-medium mn-b-thin flex-nowrap flex-v-center flex">
       <h1   class="mn-r-auto">
         {{route.params.category ? 'Edit Category' : 'Add Category'}}
       </h1>
 
       <Button 
         :submit="onSubmit"
-        class="pd-small radius-big bg-main t-black uppercase t-medium"
+        class="pd-small radius-medium bg-main t-black uppercase t-medium"
       >
         Save Category 
       </Button>
@@ -66,7 +66,7 @@
         <h4  class="mn-r-thin t-medium">Localization</h4>
           
         <button 
-          @click="() => categories.state.current.localization.push({locale: '', text: ''})" 
+          @click="() => categories.state.current.translations.push({locale: '', text: ''})" 
           class="i-small pd-thin button-delete button"
         >
           +
@@ -74,7 +74,7 @@
       </div>
       <div 
         class="gap-thin mn-b-thin flex-nowrap flex" 
-        v-for="(item, index) in categories.state.current.localization" 
+        v-for="(item, index) in categories.state.current.translations" 
         :key="index"
       > 
         <Field
@@ -88,7 +88,7 @@
           class="w-100 bg-white radius-small pd-medium"
         />
         <div
-          @click="() => categories.state.current.localization.splice(index, 1)"  
+          @click="() => categories.state.current.translations.splice(index, 1)"  
           class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
         >
           <IconDelete 
@@ -99,42 +99,6 @@
 
       
     </Block>
-    <!-- Subcategories -->
-    <!-- <Block
-      title="Subcategories"
-      placeholder="No subcategories added yet"
-      :actions="[{
-        label: '+',
-        function: () => categories.state.current.children.push({name: '', url: ''})
-      }]"
-      class="mn-b-thin"
-    >
-   
-      <div 
-        class="gap-thin mn-b-thin flex-nowrap flex" 
-        v-for="(item, index) in categories.state.current.children" 
-        :key="index"
-      > 
-        <Field
-          v-model:field="item.name"
-          placeholder="Subcategory name"
-          class="w-100 bg-white radius-small pd-medium"
-        />  
-        <Field
-          v-model:field="item.url"
-          placeholder="Subcategory"
-          class="w-100 bg-white radius-small pd-medium"
-        />
-        <div
-          @click="() => categories.state.current.children.splice(index, 1)"  
-          class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
-        >
-          <IconDelete 
-            class="i-medium"
-          />
-        </div>
-      </div> 
-    </Block> -->
      <!-- Filters -->
     <Block
       title="Filters"
@@ -192,9 +156,9 @@
   import IconCheckmark from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue'
 
   // Import the new store structure
-  import * as globals from '@martyrs/src/modules/globals/views/store/globals';
-  import * as auth from '@martyrs/src/modules/auth/views/store/auth'; 
-  import * as categories from '@martyrs/src/modules/products/store/categories';
+  import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'; 
+  import * as categories from '@martyrs/src/modules/products/store/categories.js';
 
   const route = useRoute()
   const router = useRouter()