From 195d0300a0bb7b24c982f8a9963e767b01db85bb Mon Sep 17 00:00:00 2001
From: Kavehhn174 <Kavehhn174@gmail.com>
Date: Sun, 30 Aug 2026 11:25:31 +0330
Subject: [PATCH] fix(gallery): resolve image zoom stretching and add rich
 viewer features

---
 package-lock.json                             |   7 +
 package.json                                  |   1 +
 src/App.vue                                   |  41 +-
 src/components/ListLoadingScreen.vue          |  17 +-
 src/components/LoadingCheck.vue               | 127 ++--
 .../dashboard/PropertyStatusWidget.vue        |  10 +-
 .../dashboard/QuickActionsWidget.vue          |  11 +-
 .../dashboard/RecentSalesWidget.vue           |  32 +-
 .../dashboard/RevenueStreamWidget.vue         |  15 +-
 src/components/dashboard/StatsWidget.vue      |  44 +-
 .../dashboard/WarehouseActivityWidget.vue     |  47 +-
 src/layout/AppMenu.vue                        |   5 +-
 src/layout/AppTopbar.vue                      |   7 +-
 src/layout/composables/layout.js              |   2 +-
 src/service/CategoryService.js                |   1 -
 src/service/FeatureService.js                 |   1 -
 src/service/PermissionService.js              |   9 +-
 src/service/PropertyService.js                |  15 +-
 src/service/RoleService.js                    |   9 +-
 src/service/SettingService.js                 |  14 +-
 src/service/TransactionService.js             |  15 +-
 src/service/UserService.js                    |   9 +-
 src/service/WarehouseItemService.js           |  10 +-
 src/service/WarehouseService.js               |  10 +-
 src/utils/jalali.js                           |  17 +-
 src/views/Dashboard.vue                       |  25 +-
 src/views/pages/Category/ListCategories.vue   |   8 +-
 src/views/pages/Features/ListFeatures.vue     |  45 +-
 src/views/pages/Property/CreateProperty.vue   | 181 ++---
 src/views/pages/Property/ListProperties.vue   | 144 +---
 src/views/pages/Property/PropertyMap.vue      | 603 ++++++++---------
 src/views/pages/Roles/ListRoles.vue           |  60 +-
 src/views/pages/Settings/SearchSettings.vue   | 162 +----
 .../pages/Transaction/ListTransactions.vue    |   3 -
 src/views/pages/Users/ListUsers.vue           |  68 +-
 .../CreateWarehouseTransaction.vue            | 446 +++++++-----
 .../ListWarehouseItemTransactions.vue         | 251 ++++---
 .../WarehouseItems/ListWarehouseItems.vue     | 149 ++--
 .../pages/WarehouseItems/ListWarehouses.vue   | 174 +++--
 .../WarehouseItems/WarehouseItemStockView.vue | 394 ++++++-----
 src/views/uikit/FileGallery.vue               | 143 ++--
 src/views/uikit/ImageGallery.vue              | 189 +++---
 src/views/uikit/ImageUploader.vue             |  72 +-
 src/views/uikit/ImageViewerModal.vue          | 636 ++++++++++++++++++
 src/views/uikit/KiwiChips.vue                 |  16 +-
 src/views/uikit/KiwiToggleSwitch.vue          |  14 +-
 src/views/uikit/MapComponent.vue              | 335 ++++-----
 src/views/uikit/MediaDoc.vue                  |  17 +-
 48 files changed, 2448 insertions(+), 2163 deletions(-)
 create mode 100644 src/views/uikit/ImageViewerModal.vue

diff --git a/package-lock.json b/package-lock.json
index b2d1b20..806d7b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
                 "usng.js": "^0.4.5",
                 "utm-latlng": "^1.0.8",
                 "v-mapbox": "^5.1.0",
+                "viewerjs": "^1.12.0",
                 "vue": "^3.4.34",
                 "vue-cookies": "^1.8.3",
                 "vue-filepond": "^7.0.4",
@@ -4840,6 +4841,12 @@
             "resolved": "https://registry.npmjs.org/vazirmatn/-/vazirmatn-33.0.3.tgz",
             "integrity": "sha512-fbjNc0CMjazZpIegWzz9OHGzI1APFboT+x7ZecXlUCtDe/nkyx7gtCTZnWS/+eeXG7fbfXymCPKJI8EsnM3iqw=="
         },
+        "node_modules/viewerjs": {
+            "version": "1.12.0",
+            "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.12.0.tgz",
+            "integrity": "sha512-eQrV7FvqXj2Ysavd9LINI6bFAvXtw5YbdlMtdIo6Bmrv25hEOBeXoOX9E7cJwYuFAOPFzmppFvDn02QNHB120w==",
+            "license": "MIT"
+        },
         "node_modules/vite": {
             "version": "5.4.11",
             "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
diff --git a/package.json b/package.json
index ff2da84..72fed21 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
         "usng.js": "^0.4.5",
         "utm-latlng": "^1.0.8",
         "v-mapbox": "^5.1.0",
+        "viewerjs": "^1.12.0",
         "vue": "^3.4.34",
         "vue-cookies": "^1.8.3",
         "vue-filepond": "^7.0.4",
diff --git a/src/App.vue b/src/App.vue
index be31b27..e84f797 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,28 +6,31 @@ axios.defaults.baseURL = import.meta.env.VITE_API_URL;
 axios.defaults.withCredentials = true;
 
 // Global Axios Request Interceptor for Authentication
-axios.interceptors.request.use((config) => {
-    config.withCredentials = true;
+axios.interceptors.request.use(
+    (config) => {
+        config.withCredentials = true;
 
-    // Resolve token from Cookies, localStorage, or document.cookie
-    let token = Cookies.get('bm-token') || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
+        // Resolve token from Cookies, localStorage, or document.cookie
+        let token = Cookies.get('bm-token') || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
 
-    if (!token && typeof document !== 'undefined') {
-        token = document.cookie
-            .split('; ')
-            .find((row) => row.startsWith('bm-token='))
-            ?.split('=')[1];
+        if (!token && typeof document !== 'undefined') {
+            token = document.cookie
+                .split('; ')
+                .find((row) => row.startsWith('bm-token='))
+                ?.split('=')[1];
+        }
+
+        if (token && token !== 'undefined' && token !== 'null' && token.trim() !== '') {
+            config.headers = config.headers || {};
+            config.headers.Authorization = `Bearer ${token.trim()}`;
+        }
+
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
     }
-
-    if (token && token !== 'undefined' && token !== 'null' && token.trim() !== '') {
-        config.headers = config.headers || {};
-        config.headers.Authorization = `Bearer ${token.trim()}`;
-    }
-
-    return config;
-}, (error) => {
-    return Promise.reject(error);
-});
+);
 </script>
 
 <template>
diff --git a/src/components/ListLoadingScreen.vue b/src/components/ListLoadingScreen.vue
index 04f790a..ca9c355 100644
--- a/src/components/ListLoadingScreen.vue
+++ b/src/components/ListLoadingScreen.vue
@@ -32,10 +32,7 @@ defineProps({
         </div>
 
         <!-- ── TABLE SKELETON ── -->
-        <div
-            v-if="type === 'table'"
-            class="rounded-2xl border border-surface-200 dark:border-surface-700 overflow-hidden bg-surface-0 dark:bg-surface-900 shadow-sm"
-        >
+        <div v-if="type === 'table'" class="rounded-2xl border border-surface-200 dark:border-surface-700 overflow-hidden bg-surface-0 dark:bg-surface-900 shadow-sm">
             <!-- Table Header Bar -->
             <div class="p-4 bg-surface-50 dark:bg-surface-800/60 border-b border-surface-200 dark:border-surface-700 flex flex-wrap items-center justify-between gap-4">
                 <div class="flex items-center gap-3">
@@ -66,11 +63,7 @@ defineProps({
 
         <!-- ── CARDS GRID SKELETON ── -->
         <div v-else-if="type === 'cards'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-            <div
-                v-for="c in rows"
-                :key="c"
-                class="card p-4 rounded-2xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-sm flex flex-col gap-3"
-            >
+            <div v-for="c in rows" :key="c" class="card p-4 rounded-2xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-sm flex flex-col gap-3">
                 <Skeleton width="100%" height="12rem" class="rounded-xl" />
                 <div class="flex items-center justify-between gap-2 mt-1">
                     <Skeleton width="60%" height="1.5rem" class="rounded-md" />
@@ -93,11 +86,7 @@ defineProps({
                     <Skeleton width="6rem" height="1.25rem" class="rounded-md" />
                 </div>
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div
-                        v-for="i in 4"
-                        :key="i"
-                        class="p-4 rounded-2xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-sm flex flex-col gap-3"
-                    >
+                    <div v-for="i in 4" :key="i" class="p-4 rounded-2xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-sm flex flex-col gap-3">
                         <Skeleton width="100%" height="10rem" class="rounded-xl" />
                         <Skeleton width="70%" height="1.25rem" class="rounded-md" />
                         <Skeleton width="45%" height="1rem" class="rounded-md" />
diff --git a/src/components/LoadingCheck.vue b/src/components/LoadingCheck.vue
index 3a99797..34dead3 100644
--- a/src/components/LoadingCheck.vue
+++ b/src/components/LoadingCheck.vue
@@ -1,93 +1,72 @@
 <!-- LoadingCheck.vue -->
-<template>
-  <div class="inline-flex items-center justify-center">
-    <svg
-      :width="size"
-      :height="size"
-      viewBox="0 0 24 24"
-      class="transform transition-transform duration-500"
-    >
-      <circle
-        cx="12"
-        cy="12"
-        r="8"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        class="text-blue-500"
-        :style="circleStyle"
-      />
-      <path
-        d="M8 12l3 3l5-5"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        class="text-green-500"
-        :style="checkStyle"
-      />
-    </svg>
-  </div>
-</template>
-
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 const props = defineProps({
-  isComplete: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: Number,
-    default: 24
-  }
-})
+    isComplete: {
+        type: Boolean,
+        default: false
+    },
+    size: {
+        type: Number,
+        default: 24
+    }
+});
 
-const dashOffset = ref(0)
-let animationFrame = null
+const dashOffset = ref(0);
+let animationFrame = null;
 
 const circleStyle = computed(() => ({
-  strokeDasharray: '60 60',
-  strokeDashoffset: props.isComplete ? '60' : String(dashOffset.value),
-  transition: props.isComplete ? 'all 0.2s ease-in-out' : 'none',
-  transformOrigin: 'center',
-  transform: `rotate(${props.isComplete ? -90 : 0}deg)`
-}))
+    strokeDasharray: '60 60',
+    strokeDashoffset: props.isComplete ? '60' : String(dashOffset.value),
+    transition: props.isComplete ? 'all 0.2s ease-in-out' : 'none',
+    transformOrigin: 'center',
+    transform: `rotate(${props.isComplete ? -90 : 0}deg)`
+}));
 
 const checkStyle = computed(() => ({
-  opacity: props.isComplete ? 1 : 0,
-  strokeDasharray: 20,
-  strokeDashoffset: props.isComplete ? 0 : 20,
-  transition: 'all 0.3s ease-in-out',
-  transitionDelay: '0.2s'
-}))
+    opacity: props.isComplete ? 1 : 0,
+    strokeDasharray: 20,
+    strokeDashoffset: props.isComplete ? 0 : 20,
+    transition: 'all 0.3s ease-in-out',
+    transitionDelay: '0.2s'
+}));
 
-let startTime = null
+let startTime = null;
 const animate = (timestamp) => {
-  if (!startTime) startTime = timestamp
-  dashOffset.value = (timestamp - startTime) / 10
-  animationFrame = requestAnimationFrame(animate)
-}
+    if (!startTime) startTime = timestamp;
+    dashOffset.value = (timestamp - startTime) / 10;
+    animationFrame = requestAnimationFrame(animate);
+};
 
 watch(
-  () => props.isComplete,
-  (newValue) => {
-    if (newValue && animationFrame) {
-      cancelAnimationFrame(animationFrame)
-      animationFrame = null
+    () => props.isComplete,
+    (newValue) => {
+        if (newValue && animationFrame) {
+            cancelAnimationFrame(animationFrame);
+            animationFrame = null;
+        }
     }
-  }
-)
+);
 
 onMounted(() => {
-  if (!props.isComplete) {
-    animationFrame = requestAnimationFrame(animate)
-  }
-})
+    if (!props.isComplete) {
+        animationFrame = requestAnimationFrame(animate);
+    }
+});
 
 onUnmounted(() => {
-  if (animationFrame) {
-    cancelAnimationFrame(animationFrame)
-  }
-})
+    if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+    }
+});
 </script>
+
+<template>
+    <div class="inline-flex items-center justify-center">
+        <svg :width="size" :height="size" viewBox="0 0 24 24" class="transform transition-transform duration-500">
+            <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-500" :style="circleStyle" />
+            <path d="M8 12l3 3l5-5" fill="none" stroke="currentColor" stroke-width="2" class="text-green-500" :style="checkStyle" />
+        </svg>
+    </div>
+</template>
diff --git a/src/components/dashboard/PropertyStatusWidget.vue b/src/components/dashboard/PropertyStatusWidget.vue
index b59403a..734daa6 100644
--- a/src/components/dashboard/PropertyStatusWidget.vue
+++ b/src/components/dashboard/PropertyStatusWidget.vue
@@ -73,9 +73,13 @@ function updateChart() {
     };
 }
 
-watch(() => props.statusStats, () => {
-    updateChart();
-}, { deep: true });
+watch(
+    () => props.statusStats,
+    () => {
+        updateChart();
+    },
+    { deep: true }
+);
 
 watch(isDarkTheme, () => {
     updateChart();
diff --git a/src/components/dashboard/QuickActionsWidget.vue b/src/components/dashboard/QuickActionsWidget.vue
index 80290b8..8a774f5 100644
--- a/src/components/dashboard/QuickActionsWidget.vue
+++ b/src/components/dashboard/QuickActionsWidget.vue
@@ -55,12 +55,7 @@ function navigate(route) {
         </div>
 
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
-            <div
-                v-for="item in actions"
-                :key="item.title"
-                @click="navigate(item.route)"
-                class="quick-action-card group"
-            >
+            <div v-for="item in actions" :key="item.title" @click="navigate(item.route)" class="quick-action-card group">
                 <div :class="['action-icon-box', item.colorClass]">
                     <i :class="[item.icon, 'text-lg']"></i>
                 </div>
@@ -191,7 +186,9 @@ function navigate(route) {
 :global(.app-dark) .quick-action-card:hover {
     background: #27272a;
     border-color: #6366f1;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.3);
+    box-shadow:
+        0 8px 24px rgba(0, 0, 0, 0.45),
+        0 0 0 1px rgba(99, 102, 241, 0.3);
 }
 
 :global(.app-dark) .action-title {
diff --git a/src/components/dashboard/RecentSalesWidget.vue b/src/components/dashboard/RecentSalesWidget.vue
index fd4a688..72ea0dd 100644
--- a/src/components/dashboard/RecentSalesWidget.vue
+++ b/src/components/dashboard/RecentSalesWidget.vue
@@ -45,15 +45,7 @@ const formatNumber = (num) => {
                 <h3 class="font-bold text-lg text-surface-900 dark:text-surface-0 mb-1">آخرین املاک ثبت شده</h3>
                 <p class="text-xs text-muted-color">جدیدترین املاک و دارایی‌های ثبت شده در سیستم</p>
             </div>
-            <Button
-                label="مشاهده همه"
-                icon="pi pi-arrow-left"
-                iconPos="right"
-                size="small"
-                text
-                class="text-xs"
-                @click="viewAllProperties"
-            />
+            <Button label="مشاهده همه" icon="pi pi-arrow-left" iconPos="right" size="small" text class="text-xs" @click="viewAllProperties" />
         </div>
 
         <div v-if="loading" class="py-12 flex items-center justify-center">
@@ -74,12 +66,7 @@ const formatNumber = (num) => {
                 <Column header="تصویر" style="width: 60px">
                     <template #body="slotProps">
                         <div class="w-11 h-11 rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700 bg-surface-100 dark:bg-surface-800 flex items-center justify-center">
-                            <img
-                                :src="slotProps.data.imageUrl"
-                                :alt="slotProps.data.name"
-                                class="w-full h-full object-cover"
-                                @error="(e) => e.target.src = 'https://cloud.mbmanager.ir/images/item-no-image.png'"
-                            />
+                            <img :src="slotProps.data.imageUrl" :alt="slotProps.data.name" class="w-full h-full object-cover" @error="(e) => (e.target.src = 'https://cloud.mbmanager.ir/images/item-no-image.png')" />
                         </div>
                     </template>
                 </Column>
@@ -91,9 +78,7 @@ const formatNumber = (num) => {
                             <span class="font-semibold text-surface-900 dark:text-surface-100 text-sm hover:text-primary cursor-pointer" @click="editProperty(slotProps.data._id)">
                                 {{ slotProps.data.name }}
                             </span>
-                            <span class="text-[11px] text-muted-color font-mono">
-                                کد: {{ slotProps.data.propertyCode }}
-                            </span>
+                            <span class="text-[11px] text-muted-color font-mono"> کد: {{ slotProps.data.propertyCode }} </span>
                         </div>
                     </template>
                 </Column>
@@ -111,7 +96,9 @@ const formatNumber = (num) => {
                 <Column header="مشخصات" style="min-width: 130px">
                     <template #body="slotProps">
                         <div class="flex flex-col text-xs gap-0.5">
-                            <span class="text-surface-600 dark:text-surface-400">مالک: <b class="text-surface-800 dark:text-surface-200">{{ slotProps.data.ownerName }}</b></span>
+                            <span class="text-surface-600 dark:text-surface-400"
+                                >مالک: <b class="text-surface-800 dark:text-surface-200">{{ slotProps.data.ownerName }}</b></span
+                            >
                             <span class="text-muted-color text-[11px]">مساحت: {{ formatNumber(slotProps.data.area) }} م² ({{ slotProps.data.dong }} دانگ)</span>
                         </div>
                     </template>
@@ -129,12 +116,7 @@ const formatNumber = (num) => {
                 <!-- Action -->
                 <Column header="عملیات" style="width: 50px">
                     <template #body="slotProps">
-                        <Button
-                            icon="pi pi-arrow-left"
-                            class="p-button-rounded p-button-text p-button-sm !w-8 !h-8"
-                            v-tooltip.top="'مشاهده و ویرایش'"
-                            @click="editProperty(slotProps.data._id)"
-                        />
+                        <Button icon="pi pi-arrow-left" class="p-button-rounded p-button-text p-button-sm !w-8 !h-8" v-tooltip.top="'مشاهده و ویرایش'" @click="editProperty(slotProps.data._id)" />
                     </template>
                 </Column>
             </DataTable>
diff --git a/src/components/dashboard/RevenueStreamWidget.vue b/src/components/dashboard/RevenueStreamWidget.vue
index 53018a4..ee214cb 100644
--- a/src/components/dashboard/RevenueStreamWidget.vue
+++ b/src/components/dashboard/RevenueStreamWidget.vue
@@ -18,10 +18,7 @@ const { getPrimary, getSurface, isDarkTheme } = useLayout();
 const chartData = ref(null);
 const chartOptions = ref(null);
 
-const palette = [
-    '#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6',
-    '#06b6d4', '#f97316', '#6366f1', '#14b8a6', '#84cc16'
-];
+const palette = ['#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#06b6d4', '#f97316', '#6366f1', '#14b8a6', '#84cc16'];
 
 function updateChart() {
     const documentStyle = getComputedStyle(document.documentElement);
@@ -101,9 +98,13 @@ function updateChart() {
     };
 }
 
-watch(() => props.categoryStats, () => {
-    updateChart();
-}, { deep: true });
+watch(
+    () => props.categoryStats,
+    () => {
+        updateChart();
+    },
+    { deep: true }
+);
 
 watch([getPrimary, getSurface, isDarkTheme], () => {
     updateChart();
diff --git a/src/components/dashboard/StatsWidget.vue b/src/components/dashboard/StatsWidget.vue
index 6ef8be1..15d35b0 100644
--- a/src/components/dashboard/StatsWidget.vue
+++ b/src/components/dashboard/StatsWidget.vue
@@ -24,15 +24,15 @@ const warehouseFlow = computed(() => props.stats?.warehouseFlow || {});
 <template>
     <!-- Total Properties Card -->
     <div class="col-span-12 sm:col-span-6 lg:col-span-6 xl:col-span-3">
-        <div class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950">
+        <div
+            class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950"
+        >
             <div class="absolute -right-6 -bottom-6 w-24 h-24 bg-blue-500/5 dark:bg-blue-500/10 rounded-full blur-xl pointer-events-none"></div>
             <div class="flex justify-between items-start mb-3">
                 <div>
                     <span class="block text-muted-color font-medium text-sm mb-1">املاک و مستغلات</span>
                     <div v-if="loading" class="h-8 w-20 bg-surface-200 dark:bg-surface-700 animate-pulse rounded my-1"></div>
-                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">
-                        {{ formatNumber(overview.totalProperties) }} <span class="text-xs font-normal text-muted-color">ملک</span>
-                    </div>
+                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">{{ formatNumber(overview.totalProperties) }} <span class="text-xs font-normal text-muted-color">ملک</span></div>
                 </div>
                 <div class="flex items-center justify-center bg-blue-100 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-xl shadow-sm" style="width: 3rem; height: 3rem">
                     <i class="pi pi-building text-xl"></i>
@@ -40,22 +40,24 @@ const warehouseFlow = computed(() => props.stats?.warehouseFlow || {});
             </div>
             <div class="flex items-center gap-2 text-xs font-medium text-surface-600 dark:text-surface-400 pt-2 border-t border-surface-100 dark:border-surface-800">
                 <i class="pi pi-map text-blue-500"></i>
-                <span>مساحت کل: <b class="text-surface-900 dark:text-surface-100">{{ formatNumber(overview.totalArea) }}</b> م²</span>
+                <span
+                    >مساحت کل: <b class="text-surface-900 dark:text-surface-100">{{ formatNumber(overview.totalArea) }}</b> م²</span
+                >
             </div>
         </div>
     </div>
 
     <!-- Warehouse Items Card -->
     <div class="col-span-12 sm:col-span-6 lg:col-span-6 xl:col-span-3">
-        <div class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950">
+        <div
+            class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950"
+        >
             <div class="absolute -right-6 -bottom-6 w-24 h-24 bg-amber-500/5 dark:bg-amber-500/10 rounded-full blur-xl pointer-events-none"></div>
             <div class="flex justify-between items-start mb-3">
                 <div>
                     <span class="block text-muted-color font-medium text-sm mb-1">اقلام انبار</span>
                     <div v-if="loading" class="h-8 w-20 bg-surface-200 dark:bg-surface-700 animate-pulse rounded my-1"></div>
-                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">
-                        {{ formatNumber(overview.totalWarehouseItems) }} <span class="text-xs font-normal text-muted-color">قلم کالا</span>
-                    </div>
+                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">{{ formatNumber(overview.totalWarehouseItems) }} <span class="text-xs font-normal text-muted-color">قلم کالا</span></div>
                 </div>
                 <div class="flex items-center justify-center bg-amber-100 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 rounded-xl shadow-sm" style="width: 3rem; height: 3rem">
                     <i class="pi pi-box text-xl"></i>
@@ -63,22 +65,24 @@ const warehouseFlow = computed(() => props.stats?.warehouseFlow || {});
             </div>
             <div class="flex items-center gap-2 text-xs font-medium text-surface-600 dark:text-surface-400 pt-2 border-t border-surface-100 dark:border-surface-800">
                 <i class="pi pi-warehouse text-amber-500"></i>
-                <span>مستقر در <b class="text-surface-900 dark:text-surface-100">{{ formatNumber(overview.totalWarehouses) }}</b> انبار فعال</span>
+                <span
+                    >مستقر در <b class="text-surface-900 dark:text-surface-100">{{ formatNumber(overview.totalWarehouses) }}</b> انبار فعال</span
+                >
             </div>
         </div>
     </div>
 
     <!-- Warehouse Transactions Card -->
     <div class="col-span-12 sm:col-span-6 lg:col-span-6 xl:col-span-3">
-        <div class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950">
+        <div
+            class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950"
+        >
             <div class="absolute -right-6 -bottom-6 w-24 h-24 bg-emerald-500/5 dark:bg-emerald-500/10 rounded-full blur-xl pointer-events-none"></div>
             <div class="flex justify-between items-start mb-3">
                 <div>
                     <span class="block text-muted-color font-medium text-sm mb-1">گردش انبارداری</span>
                     <div v-if="loading" class="h-8 w-20 bg-surface-200 dark:bg-surface-700 animate-pulse rounded my-1"></div>
-                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">
-                        {{ formatNumber(overview.totalWarehouseTransactions) }} <span class="text-xs font-normal text-muted-color">تراکنش</span>
-                    </div>
+                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">{{ formatNumber(overview.totalWarehouseTransactions) }} <span class="text-xs font-normal text-muted-color">تراکنش</span></div>
                 </div>
                 <div class="flex items-center justify-center bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl shadow-sm" style="width: 3rem; height: 3rem">
                     <i class="pi pi-sync text-xl"></i>
@@ -99,15 +103,15 @@ const warehouseFlow = computed(() => props.stats?.warehouseFlow || {});
 
     <!-- Active Users & Roles Card -->
     <div class="col-span-12 sm:col-span-6 lg:col-span-6 xl:col-span-3">
-        <div class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950">
+        <div
+            class="card mb-0 h-full p-5 border border-surface-200 dark:border-surface-800 hover:shadow-lg transition-all duration-300 rounded-2xl relative overflow-hidden bg-gradient-to-br from-surface-0 to-surface-50 dark:from-surface-900 dark:to-surface-950"
+        >
             <div class="absolute -right-6 -bottom-6 w-24 h-24 bg-purple-500/5 dark:bg-purple-500/10 rounded-full blur-xl pointer-events-none"></div>
             <div class="flex justify-between items-start mb-3">
                 <div>
                     <span class="block text-muted-color font-medium text-sm mb-1">کاربران سیستم</span>
                     <div v-if="loading" class="h-8 w-20 bg-surface-200 dark:bg-surface-700 animate-pulse rounded my-1"></div>
-                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">
-                        {{ formatNumber(overview.totalUsers) }} <span class="text-xs font-normal text-muted-color">کاربر</span>
-                    </div>
+                    <div v-else class="text-surface-900 dark:text-surface-0 font-bold text-2xl tracking-tight">{{ formatNumber(overview.totalUsers) }} <span class="text-xs font-normal text-muted-color">کاربر</span></div>
                 </div>
                 <div class="flex items-center justify-center bg-purple-100 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-xl shadow-sm" style="width: 3rem; height: 3rem">
                     <i class="pi pi-users text-xl"></i>
@@ -115,7 +119,9 @@ const warehouseFlow = computed(() => props.stats?.warehouseFlow || {});
             </div>
             <div class="flex items-center gap-2 text-xs font-medium text-surface-600 dark:text-surface-400 pt-2 border-t border-surface-100 dark:border-surface-800">
                 <i class="pi pi-shield text-purple-500"></i>
-                <span>تعریف شده در <b class="text-surface-900 dark:text-surface-100">{{ formatNumber(overview.totalRoles) }}</b> نقش سازمانی</span>
+                <span
+                    >تعریف شده در <b class="text-surface-900 dark:text-surface-100">{{ formatNumber(overview.totalRoles) }}</b> نقش سازمانی</span
+                >
             </div>
         </div>
     </div>
diff --git a/src/components/dashboard/WarehouseActivityWidget.vue b/src/components/dashboard/WarehouseActivityWidget.vue
index d07b1fd..1498056 100644
--- a/src/components/dashboard/WarehouseActivityWidget.vue
+++ b/src/components/dashboard/WarehouseActivityWidget.vue
@@ -48,15 +48,7 @@ const formatNumber = (num) => {
                     <h3 class="font-bold text-lg text-surface-900 dark:text-surface-0 mb-1">آخرین گردش‌های انبار</h3>
                     <p class="text-xs text-muted-color">گزارش لحظه‌ای ثبت ورود و خروج کالا در انبارها</p>
                 </div>
-                <Button
-                    label="مشاهده همه"
-                    icon="pi pi-arrow-left"
-                    iconPos="right"
-                    size="small"
-                    text
-                    class="text-xs"
-                    @click="viewAllTransactions"
-                />
+                <Button label="مشاهده همه" icon="pi pi-arrow-left" iconPos="right" size="small" text class="text-xs" @click="viewAllTransactions" />
             </div>
 
             <!-- Flow stats summary banner -->
@@ -68,14 +60,10 @@ const formatNumber = (num) => {
                         </div>
                         <div>
                             <span class="text-[11px] text-muted-color block">مجموع ورودی</span>
-                            <span class="text-xs font-bold text-emerald-700 dark:text-emerald-400">
-                                {{ formatNumber(warehouseFlow.inQuantity) }} واحد
-                            </span>
+                            <span class="text-xs font-bold text-emerald-700 dark:text-emerald-400"> {{ formatNumber(warehouseFlow.inQuantity) }} واحد </span>
                         </div>
                     </div>
-                    <span class="text-xs font-medium text-emerald-600 dark:text-emerald-400">
-                        {{ formatNumber(warehouseFlow.inCount) }} تراکنش
-                    </span>
+                    <span class="text-xs font-medium text-emerald-600 dark:text-emerald-400"> {{ formatNumber(warehouseFlow.inCount) }} تراکنش </span>
                 </div>
 
                 <div class="p-3 rounded-xl bg-rose-50/60 dark:bg-rose-950/20 border border-rose-200/50 dark:border-rose-800/30 flex items-center justify-between">
@@ -85,14 +73,10 @@ const formatNumber = (num) => {
                         </div>
                         <div>
                             <span class="text-[11px] text-muted-color block">مجموع خروجی</span>
-                            <span class="text-xs font-bold text-rose-700 dark:text-rose-400">
-                                {{ formatNumber(warehouseFlow.outQuantity) }} واحد
-                            </span>
+                            <span class="text-xs font-bold text-rose-700 dark:text-rose-400"> {{ formatNumber(warehouseFlow.outQuantity) }} واحد </span>
                         </div>
                     </div>
-                    <span class="text-xs font-medium text-rose-600 dark:text-rose-400">
-                        {{ formatNumber(warehouseFlow.outCount) }} تراکنش
-                    </span>
+                    <span class="text-xs font-medium text-rose-600 dark:text-rose-400"> {{ formatNumber(warehouseFlow.outCount) }} تراکنش </span>
                 </div>
             </div>
 
@@ -110,18 +94,12 @@ const formatNumber = (num) => {
 
             <!-- Transactions List -->
             <ul v-else class="list-none p-0 m-0 divide-y divide-surface-100 dark:divide-surface-800">
-                <li
-                    v-for="tx in transactions"
-                    :key="tx._id"
-                    class="py-3 flex items-center justify-between gap-3 hover:bg-surface-50 dark:hover:bg-surface-800/50 px-2 rounded-xl transition-colors duration-150"
-                >
+                <li v-for="tx in transactions" :key="tx._id" class="py-3 flex items-center justify-between gap-3 hover:bg-surface-50 dark:hover:bg-surface-800/50 px-2 rounded-xl transition-colors duration-150">
                     <div class="flex items-center gap-3 min-w-0">
                         <div
                             :class="[
                                 'w-9 h-9 rounded-xl flex items-center justify-center shrink-0 font-bold text-xs',
-                                tx.type === 'IN'
-                                    ? 'bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400'
-                                    : 'bg-rose-100 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400'
+                                tx.type === 'IN' ? 'bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400' : 'bg-rose-100 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400'
                             ]"
                         >
                             <i :class="['pi text-xs', tx.type === 'IN' ? 'pi-arrow-down' : 'pi-arrow-up']"></i>
@@ -135,9 +113,7 @@ const formatNumber = (num) => {
                                 <span
                                     :class="[
                                         'px-1.5 py-0.2 rounded text-[10px] font-bold',
-                                        tx.type === 'IN'
-                                            ? 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300'
-                                            : 'bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300'
+                                        tx.type === 'IN' ? 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300' : 'bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300'
                                     ]"
                                 >
                                     {{ tx.type === 'IN' ? 'ورود' : 'خروج' }}
@@ -152,12 +128,7 @@ const formatNumber = (num) => {
                     </div>
 
                     <div class="text-left shrink-0">
-                        <div
-                            :class="[
-                                'font-bold text-sm font-mono',
-                                tx.type === 'IN' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'
-                            ]"
-                        >
+                        <div :class="['font-bold text-sm font-mono', tx.type === 'IN' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400']">
                             {{ tx.type === 'IN' ? '+' : '-' }}{{ formatNumber(tx.quantity) }} {{ tx.unit }}
                         </div>
                         <span class="text-[10px] text-muted-color font-mono block">
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 959038b..d407054 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -40,12 +40,9 @@ const model = ref([
     },
     {
         label: 'تنظیمات سیستم',
-        items: [
-            { label: 'تنظیمات جستجو', icon: 'pi pi-fw pi-sliders-h', to: '/settings/search-settings' }
-        ]
+        items: [{ label: 'تنظیمات جستجو', icon: 'pi pi-fw pi-sliders-h', to: '/settings/search-settings' }]
     }
 ]);
-
 </script>
 
 <template>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index d42b697..8292783 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -119,12 +119,7 @@ const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
                         <i class="pi pi-user"></i>
                         <span>کاربران</span>
                     </router-link>
-                    <button
-                        type="button"
-                        class="layout-topbar-action text-red-500 hover:text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30"
-                        title="خروج از حساب کاربری"
-                        @click="signOut"
-                    >
+                    <button type="button" class="layout-topbar-action text-red-500 hover:text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30" title="خروج از حساب کاربری" @click="signOut">
                         <i class="pi pi-power-off text-red-500"></i>
                         <span class="text-red-500">خروج</span>
                     </button>
diff --git a/src/layout/composables/layout.js b/src/layout/composables/layout.js
index e839bcc..d114e4f 100644
--- a/src/layout/composables/layout.js
+++ b/src/layout/composables/layout.js
@@ -15,7 +15,7 @@ const layoutState = reactive({
     configSidebarVisible: false,
     staticMenuMobileActive: false,
     menuHoverActive: false,
-    activeMenuItem: null,
+    activeMenuItem: null
 });
 
 export function useLayout() {
diff --git a/src/service/CategoryService.js b/src/service/CategoryService.js
index a8ed349..edb8645 100644
--- a/src/service/CategoryService.js
+++ b/src/service/CategoryService.js
@@ -35,4 +35,3 @@ export const CategoryService = {
         }
     }
 };
-
diff --git a/src/service/FeatureService.js b/src/service/FeatureService.js
index 06bfaa4..192caa6 100644
--- a/src/service/FeatureService.js
+++ b/src/service/FeatureService.js
@@ -44,4 +44,3 @@ export const FeatureService = {
         }
     }
 };
-
diff --git a/src/service/PermissionService.js b/src/service/PermissionService.js
index 7e53b0a..a6b5b78 100644
--- a/src/service/PermissionService.js
+++ b/src/service/PermissionService.js
@@ -1,10 +1,11 @@
 import axios from 'axios';
 
 const getAuthHeader = () => {
-    const bmToken = document.cookie
-        .split('; ')
-        .find((row) => row.startsWith('bm-token='))
-        ?.split('=')[1] || localStorage.getItem('bm-token');
+    const bmToken =
+        document.cookie
+            .split('; ')
+            .find((row) => row.startsWith('bm-token='))
+            ?.split('=')[1] || localStorage.getItem('bm-token');
     return bmToken ? { Authorization: `Bearer ${bmToken}` } : {};
 };
 
diff --git a/src/service/PropertyService.js b/src/service/PropertyService.js
index dbec953..3c67a51 100644
--- a/src/service/PropertyService.js
+++ b/src/service/PropertyService.js
@@ -2,13 +2,15 @@ import axios from 'axios';
 
 export const PropertyService = {
     _getAuthHeader: () => {
-        const bmToken = (typeof document !== 'undefined'
-            ? document.cookie.split('; ').find((row) => row.startsWith('bm-token='))?.split('=')[1]
-            : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
+        const bmToken =
+            (typeof document !== 'undefined'
+                ? document.cookie
+                      .split('; ')
+                      .find((row) => row.startsWith('bm-token='))
+                      ?.split('=')[1]
+                : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
 
-        return bmToken && bmToken !== 'undefined' && bmToken !== 'null'
-            ? { Authorization: `Bearer ${bmToken}` }
-            : {};
+        return bmToken && bmToken !== 'undefined' && bmToken !== 'null' ? { Authorization: `Bearer ${bmToken}` } : {};
     },
 
     getProperty: async (propertyId) => {
@@ -75,7 +77,6 @@ export const PropertyService = {
         }
     },
 
-
     indexProperties: async () => {
         const config = {
             method: 'post',
diff --git a/src/service/RoleService.js b/src/service/RoleService.js
index 425254b..56f5b99 100644
--- a/src/service/RoleService.js
+++ b/src/service/RoleService.js
@@ -1,10 +1,11 @@
 import axios from 'axios';
 
 const getAuthHeader = () => {
-    const bmToken = document.cookie
-        .split('; ')
-        .find((row) => row.startsWith('bm-token='))
-        ?.split('=')[1] || localStorage.getItem('bm-token');
+    const bmToken =
+        document.cookie
+            .split('; ')
+            .find((row) => row.startsWith('bm-token='))
+            ?.split('=')[1] || localStorage.getItem('bm-token');
     return bmToken ? { Authorization: `Bearer ${bmToken}` } : {};
 };
 
diff --git a/src/service/SettingService.js b/src/service/SettingService.js
index 8c5c40e..6edf95f 100644
--- a/src/service/SettingService.js
+++ b/src/service/SettingService.js
@@ -2,13 +2,15 @@ import axios from 'axios';
 
 export const SettingService = {
     _getAuthHeader: () => {
-        const bmToken = (typeof document !== 'undefined'
-            ? document.cookie.split('; ').find((row) => row.startsWith('bm-token='))?.split('=')[1]
-            : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
+        const bmToken =
+            (typeof document !== 'undefined'
+                ? document.cookie
+                      .split('; ')
+                      .find((row) => row.startsWith('bm-token='))
+                      ?.split('=')[1]
+                : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
 
-        return bmToken && bmToken !== 'undefined' && bmToken !== 'null'
-            ? { Authorization: `Bearer ${bmToken}` }
-            : {};
+        return bmToken && bmToken !== 'undefined' && bmToken !== 'null' ? { Authorization: `Bearer ${bmToken}` } : {};
     },
 
     /**
diff --git a/src/service/TransactionService.js b/src/service/TransactionService.js
index ad21502..1e69fd2 100644
--- a/src/service/TransactionService.js
+++ b/src/service/TransactionService.js
@@ -2,13 +2,15 @@ import axios from 'axios';
 
 export const TransactionService = {
     _getAuthHeader: () => {
-        const bmToken = (typeof document !== 'undefined'
-            ? document.cookie.split('; ').find((row) => row.startsWith('bm-token='))?.split('=')[1]
-            : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
+        const bmToken =
+            (typeof document !== 'undefined'
+                ? document.cookie
+                      .split('; ')
+                      .find((row) => row.startsWith('bm-token='))
+                      ?.split('=')[1]
+                : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
 
-        return bmToken && bmToken !== 'undefined' && bmToken !== 'null'
-            ? { Authorization: `Bearer ${bmToken}` }
-            : {};
+        return bmToken && bmToken !== 'undefined' && bmToken !== 'null' ? { Authorization: `Bearer ${bmToken}` } : {};
     },
     /**
      * Get a single transaction by ID
@@ -188,7 +190,6 @@ export const TransactionService = {
         }
     },
 
-
     indexTransactions: async () => {
         const config = {
             method: 'post',
diff --git a/src/service/UserService.js b/src/service/UserService.js
index 916ee83..d83919e 100644
--- a/src/service/UserService.js
+++ b/src/service/UserService.js
@@ -1,10 +1,11 @@
 import axios from 'axios';
 
 const getAuthHeader = () => {
-    const bmToken = document.cookie
-        .split('; ')
-        .find((row) => row.startsWith('bm-token='))
-        ?.split('=')[1] || localStorage.getItem('bm-token');
+    const bmToken =
+        document.cookie
+            .split('; ')
+            .find((row) => row.startsWith('bm-token='))
+            ?.split('=')[1] || localStorage.getItem('bm-token');
     return bmToken ? { Authorization: `Bearer ${bmToken}` } : {};
 };
 
diff --git a/src/service/WarehouseItemService.js b/src/service/WarehouseItemService.js
index c98a814..72cf64d 100644
--- a/src/service/WarehouseItemService.js
+++ b/src/service/WarehouseItemService.js
@@ -1,9 +1,13 @@
 import axios from 'axios';
 
 const getAuthHeader = () => {
-    const bmToken = (typeof document !== 'undefined'
-        ? document.cookie.split('; ').find((row) => row.startsWith('bm-token='))?.split('=')[1]
-        : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
+    const bmToken =
+        (typeof document !== 'undefined'
+            ? document.cookie
+                  .split('; ')
+                  .find((row) => row.startsWith('bm-token='))
+                  ?.split('=')[1]
+            : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
     return bmToken && bmToken !== 'undefined' && bmToken !== 'null' ? { Authorization: `Bearer ${bmToken}` } : {};
 };
 
diff --git a/src/service/WarehouseService.js b/src/service/WarehouseService.js
index b001054..08353f5 100644
--- a/src/service/WarehouseService.js
+++ b/src/service/WarehouseService.js
@@ -1,9 +1,13 @@
 import axios from 'axios';
 
 const getAuthHeader = () => {
-    const bmToken = (typeof document !== 'undefined'
-        ? document.cookie.split('; ').find((row) => row.startsWith('bm-token='))?.split('=')[1]
-        : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
+    const bmToken =
+        (typeof document !== 'undefined'
+            ? document.cookie
+                  .split('; ')
+                  .find((row) => row.startsWith('bm-token='))
+                  ?.split('=')[1]
+            : null) || (typeof localStorage !== 'undefined' ? localStorage.getItem('bm-token') : null);
     return bmToken && bmToken !== 'undefined' && bmToken !== 'null' ? { Authorization: `Bearer ${bmToken}` } : {};
 };
 
diff --git a/src/utils/jalali.js b/src/utils/jalali.js
index 3f101f0..2bf2c60 100644
--- a/src/utils/jalali.js
+++ b/src/utils/jalali.js
@@ -38,13 +38,7 @@ export function jalaliToGregorian(jy, jm, jd) {
     let gy = jy > 979 ? 1600 : 621;
     jy = jy > 979 ? jy - 979 : jy;
 
-    let days =
-        365 * jy +
-        Math.floor(jy / 33) * 8 +
-        Math.floor(((jy % 33) + 3) / 4) +
-        78 +
-        jd +
-        (jm < 7 ? (jm - 1) * 31 : (jm - 7) * 30 + 186);
+    let days = 365 * jy + Math.floor(jy / 33) * 8 + Math.floor(((jy % 33) + 3) / 4) + 78 + jd + (jm < 7 ? (jm - 1) * 31 : (jm - 7) * 30 + 186);
 
     gy += 400 * Math.floor(days / 146097);
     days %= 146097;
@@ -90,14 +84,7 @@ export function gregorianToJalali(gy, gm, gd) {
     gy = gy > 1600 ? gy - 1600 : gy - 621;
 
     const gy2 = gm > 2 ? gy + 1 : gy;
-    let days =
-        365 * gy +
-        Math.floor((gy2 + 3) / 4) -
-        Math.floor((gy2 + 99) / 100) +
-        Math.floor((gy2 + 399) / 400) -
-        80 +
-        gd +
-        g_d_m[gm - 1];
+    let days = 365 * gy + Math.floor((gy2 + 3) / 4) - Math.floor((gy2 + 99) / 100) + Math.floor((gy2 + 399) / 400) - 80 + gd + g_d_m[gm - 1];
 
     jy += 33 * Math.floor(days / 12053);
     days %= 12053;
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 49155b3..06ff566 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -50,7 +50,9 @@ onMounted(() => {
 <template>
     <div class="flex flex-col gap-6">
         <!-- Dashboard Header Welcome Banner -->
-        <div class="card p-6 border border-surface-200 dark:border-surface-800 rounded-2xl bg-gradient-to-l from-primary-500/10 via-surface-0 to-surface-0 dark:from-primary-500/15 dark:via-surface-900 dark:to-surface-900 shadow-sm relative overflow-hidden">
+        <div
+            class="card p-6 border border-surface-200 dark:border-surface-800 rounded-2xl bg-gradient-to-l from-primary-500/10 via-surface-0 to-surface-0 dark:from-primary-500/15 dark:via-surface-900 dark:to-surface-900 shadow-sm relative overflow-hidden"
+        >
             <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                 <div>
                     <div class="flex items-center gap-2 mb-1.5">
@@ -63,21 +65,12 @@ onMounted(() => {
                             {{ todayFormatted }}
                         </span>
                     </div>
-                    <h1 class="text-2xl font-black text-surface-900 dark:text-surface-0 tracking-tight">
-                        داشبورد جامع مدیریت اموال و انبارداری
-                    </h1>
-                    <p class="text-sm text-muted-color mt-1">
-                        خلاصه آماری دارایی‌ها، املاک ثبتی و گزارش لحظه‌ای گردش کالاهای انبار
-                    </p>
+                    <h1 class="text-2xl font-black text-surface-900 dark:text-surface-0 tracking-tight">داشبورد جامع مدیریت اموال و انبارداری</h1>
+                    <p class="text-sm text-muted-color mt-1">خلاصه آماری دارایی‌ها، املاک ثبتی و گزارش لحظه‌ای گردش کالاهای انبار</p>
                 </div>
 
                 <div class="flex items-center gap-3 shrink-0">
-                    <Button
-                        icon="pi pi-refresh"
-                        :class="['p-button-outlined p-button-secondary !w-10 !h-10 p-button-rounded', { 'pi-spin': refreshing }]"
-                        v-tooltip.bottom="'بروزرسانی داده‌ها'"
-                        @click="fetchDashboardStats(true)"
-                    />
+                    <Button icon="pi pi-refresh" :class="['p-button-outlined p-button-secondary !w-10 !h-10 p-button-rounded', { 'pi-spin': refreshing }]" v-tooltip.bottom="'بروزرسانی داده‌ها'" @click="fetchDashboardStats(true)" />
                     <router-link to="/property/create-property">
                         <Button label="ثبت ملک جدید" icon="pi pi-plus" class="shadow-sm" />
                     </router-link>
@@ -115,11 +108,7 @@ onMounted(() => {
 
             <!-- Recent Warehouse Transactions Feed -->
             <div class="col-span-12 xl:col-span-5">
-                <WarehouseActivityWidget
-                    :transactions="stats?.recentWarehouseTransactions || []"
-                    :warehouse-flow="stats?.warehouseFlow || { inCount: 0, outCount: 0, inQuantity: 0, outQuantity: 0 }"
-                    :loading="loading"
-                />
+                <WarehouseActivityWidget :transactions="stats?.recentWarehouseTransactions || []" :warehouse-flow="stats?.warehouseFlow || { inCount: 0, outCount: 0, inQuantity: 0, outQuantity: 0 }" :loading="loading" />
             </div>
         </div>
     </div>
diff --git a/src/views/pages/Category/ListCategories.vue b/src/views/pages/Category/ListCategories.vue
index 1f983be..12f399e 100644
--- a/src/views/pages/Category/ListCategories.vue
+++ b/src/views/pages/Category/ListCategories.vue
@@ -177,9 +177,7 @@ function exportCSV() {
                 <Column field="englishName" header="نام انگلیسی" sortable style="min-width: 16rem"></Column>
                 <Column header="تعداد ویژگی‌ها" style="min-width: 10rem">
                     <template #body="slotProps">
-                        <span class="px-2.5 py-1 text-xs rounded-full bg-indigo-50 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300 font-medium">
-                            {{ slotProps.data.features?.length || 0 }} ویژگی
-                        </span>
+                        <span class="px-2.5 py-1 text-xs rounded-full bg-indigo-50 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300 font-medium"> {{ slotProps.data.features?.length || 0 }} ویژگی </span>
                     </template>
                 </Column>
                 <Column :exportable="false" style="min-width: 12rem">
@@ -227,7 +225,9 @@ function exportCSV() {
         <Dialog v-model:visible="deleteSelectedDialog" :style="{ width: '450px' }" header="تایید حذف گروهی" :modal="true">
             <div class="flex items-center gap-4">
                 <i class="pi pi-exclamation-triangle !text-3xl text-red-500" />
-                <span>آیا از حذف <b>{{ selectedCategories?.length || 0 }}</b> دسته‌بندی انتخاب شده اطمینان دارید؟</span>
+                <span
+                    >آیا از حذف <b>{{ selectedCategories?.length || 0 }}</b> دسته‌بندی انتخاب شده اطمینان دارید؟</span
+                >
             </div>
             <template #footer>
                 <Button label="خیر" icon="pi pi-times" text @click="deleteSelectedDialog = false" />
diff --git a/src/views/pages/Features/ListFeatures.vue b/src/views/pages/Features/ListFeatures.vue
index ca46cf7..19fc588 100644
--- a/src/views/pages/Features/ListFeatures.vue
+++ b/src/views/pages/Features/ListFeatures.vue
@@ -27,7 +27,7 @@ const loadCategories = async () => {
     try {
         const data = await CategoryService.getAllCategories();
         categories.value = Array.isArray(data) ? data : [];
-        if (categories.value.length > 0 && (!selectedTab.value || !categories.value.some(c => c._id === selectedTab.value))) {
+        if (categories.value.length > 0 && (!selectedTab.value || !categories.value.some((c) => c._id === selectedTab.value))) {
             selectedTab.value = categories.value[0]._id;
         }
     } catch (e) {
@@ -119,7 +119,7 @@ const saveFeature = async () => {
 
 const getFeatureTypeLabel = (type) => {
     const found = featureTypes.find((t) => t.value === type);
-    return found ? found.name : (type || '-');
+    return found ? found.name : type || '-';
 };
 </script>
 
@@ -131,13 +131,7 @@ const getFeatureTypeLabel = (type) => {
                 <h3 class="text-xl font-bold m-0 text-slate-800 dark:text-slate-100">ویژگی دسته‌بندی‌ها</h3>
                 <p class="text-xs text-slate-500 mt-1 mb-0">تعریف و مدیریت فیلدهای اختصاصی برای هر دسته‌بندی</p>
             </div>
-            <Button
-                v-if="selectedTab"
-                label="افزودن ویژگی جدید"
-                icon="pi pi-plus"
-                severity="primary"
-                @click="openNew(selectedTab)"
-            />
+            <Button v-if="selectedTab" label="افزودن ویژگی جدید" icon="pi pi-plus" severity="primary" @click="openNew(selectedTab)" />
         </div>
 
         <!-- Skeleton Loading -->
@@ -175,17 +169,8 @@ const getFeatureTypeLabel = (type) => {
             <TabPanels>
                 <TabPanel v-for="cat in categories" :key="cat._id + '_content'" :value="cat._id">
                     <div class="flex items-center justify-between mb-4">
-                        <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">
-                            لیست ویژگی‌های «{{ cat.nativeName }}» ({{ cat.features?.length || 0 }} مورد)
-                        </span>
-                        <Button
-                            label="افزودن ویژگی"
-                            icon="pi pi-plus"
-                            size="small"
-                            severity="secondary"
-                            outlined
-                            @click="openNew(cat._id)"
-                        />
+                        <span class="text-sm font-semibold text-slate-700 dark:text-slate-200"> لیست ویژگی‌های «{{ cat.nativeName }}» ({{ cat.features?.length || 0 }} مورد) </span>
+                        <Button label="افزودن ویژگی" icon="pi pi-plus" size="small" severity="secondary" outlined @click="openNew(cat._id)" />
                     </div>
 
                     <!-- Features Table / List -->
@@ -216,24 +201,8 @@ const getFeatureTypeLabel = (type) => {
                                     <td class="p-3 text-xs text-slate-500">{{ feat.tag || '-' }}</td>
                                     <td class="p-3 text-center">
                                         <div class="flex items-center justify-center gap-2">
-                                            <Button
-                                                icon="pi pi-pencil"
-                                                size="small"
-                                                outlined
-                                                rounded
-                                                severity="info"
-                                                title="ویرایش"
-                                                @click="editFeature(feat, cat._id)"
-                                            />
-                                            <Button
-                                                icon="pi pi-trash"
-                                                size="small"
-                                                outlined
-                                                rounded
-                                                severity="danger"
-                                                title="حذف"
-                                                @click="confirmDelete(feat)"
-                                            />
+                                            <Button icon="pi pi-pencil" size="small" outlined rounded severity="info" title="ویرایش" @click="editFeature(feat, cat._id)" />
+                                            <Button icon="pi pi-trash" size="small" outlined rounded severity="danger" title="حذف" @click="confirmDelete(feat)" />
                                         </div>
                                     </td>
                                 </tr>
diff --git a/src/views/pages/Property/CreateProperty.vue b/src/views/pages/Property/CreateProperty.vue
index 0d0893b..d511473 100644
--- a/src/views/pages/Property/CreateProperty.vue
+++ b/src/views/pages/Property/CreateProperty.vue
@@ -156,11 +156,11 @@ const long = ref(null);
 // Auto-generated property name: ownerName + شماره اصلی/شماره فرعی
 const computedPropertyName = computed(() => {
     const owner = property.value.ownerName?.trim() || '';
-    const main  = property.value.mainNumber?.trim() || '';
-    const sub   = property.value.subNumber?.trim() || '';
-    const regNum = main && sub ? `${main}/${sub}` : (main || sub || '');
+    const main = property.value.mainNumber?.trim() || '';
+    const sub = property.value.subNumber?.trim() || '';
+    const regNum = main && sub ? `${main}/${sub}` : main || sub || '';
     if (owner && regNum) return `${owner} - ${regNum}`;
-    if (owner)  return owner;
+    if (owner) return owner;
     if (regNum) return regNum;
     return '';
 });
@@ -206,7 +206,7 @@ const dongOptions = [
     { value: 3, label: '۳ دانگ', fraction: '۱⁏۲ (نیم)' },
     { value: 4, label: '۴ دانگ', fraction: '۲⁏۳ (دو سوم)' },
     { value: 5, label: '۵ دانگ', fraction: '۵⁏۶' },
-    { value: 6, label: '۶ دانگ', fraction: 'تمام (مالکیت کامل)' },
+    { value: 6, label: '۶ دانگ', fraction: 'تمام (مالکیت کامل)' }
 ];
 
 /**
@@ -356,28 +356,23 @@ const handleNationalGeoCodeChange = () => {
 };
 
 // Auto sync category when propertyType changes
-watch(() => property.value.propertyType, (newType) => {
-    if (pageLoading.value || editMode.value) return;
-    if (!categories.value || categories.value.length === 0) return;
-    let targetCatName = newType === 'Land' ? 'Lot' : 'Building';
-    let matchedCategory = categories.value.find(c => c.englishName === targetCatName || c.nativeName === (newType === 'Land' ? 'زمین' : 'ساختمان'));
-    if (matchedCategory && !property.value.category) {
-        property.value.category = matchedCategory._id;
-        handleSelectCategory(matchedCategory._id);
+watch(
+    () => property.value.propertyType,
+    (newType) => {
+        if (pageLoading.value || editMode.value) return;
+        if (!categories.value || categories.value.length === 0) return;
+        let targetCatName = newType === 'Land' ? 'Lot' : 'Building';
+        let matchedCategory = categories.value.find((c) => c.englishName === targetCatName || c.nativeName === (newType === 'Land' ? 'زمین' : 'ساختمان'));
+        if (matchedCategory && !property.value.category) {
+            property.value.category = matchedCategory._id;
+            handleSelectCategory(matchedCategory._id);
+        }
     }
-});
+);
 
 // Watch for form modifications to mark dirty for auto-save
 watch(
-    [
-        () => property.value,
-        () => featuresValues.value,
-        () => regYear.value,
-        () => regMonth.value,
-        () => regDay.value,
-        () => mainImageUrlsWithData.value,
-        () => documentUrlsWithData.value
-    ],
+    [() => property.value, () => featuresValues.value, () => regYear.value, () => regMonth.value, () => regDay.value, () => mainImageUrlsWithData.value, () => documentUrlsWithData.value],
     () => {
         if (!pageLoading.value) {
             isDirty.value = true;
@@ -531,13 +526,13 @@ const performAutoSave = async () => {
             }
             payload.mainImageUrls = (mainImageUrlsWithData.value || [])
                 .map((x) => {
-                    const raw = typeof x === 'string' ? x : (x.url || x.source || '');
+                    const raw = typeof x === 'string' ? x : x.url || x.source || '';
                     return raw.split('?')[0];
                 })
                 .filter(Boolean);
             payload.documentUrls = (documentUrlsWithData.value || [])
                 .map((x) => {
-                    const raw = typeof x === 'string' ? x : (x.url || x.source || '');
+                    const raw = typeof x === 'string' ? x : x.url || x.source || '';
                     return raw.split('?')[0];
                 })
                 .filter(Boolean);
@@ -656,12 +651,8 @@ onBeforeMount(async () => {
                     }
                 }
 
-                const mainImages = (data.signedMainImageUrls && data.signedMainImageUrls.length > 0)
-                    ? data.signedMainImageUrls
-                    : (data.mainImageUrls || []);
-                const docs = (data.signedDocumentUrls && data.signedDocumentUrls.length > 0)
-                    ? data.signedDocumentUrls
-                    : (data.documentUrls || []);
+                const mainImages = data.signedMainImageUrls && data.signedMainImageUrls.length > 0 ? data.signedMainImageUrls : data.mainImageUrls || [];
+                const docs = data.signedDocumentUrls && data.signedDocumentUrls.length > 0 ? data.signedDocumentUrls : data.documentUrls || [];
 
                 mainImageUrlsWithData.value = fillImagesArray(mainImages);
                 documentUrlsWithData.value = fillImagesArray(docs);
@@ -669,7 +660,7 @@ onBeforeMount(async () => {
                 toast.add({ severity: 'error', summary: 'خطا', detail: 'ملک مورد نظر یافت نشد.', life: 4000 });
             }
         } else {
-            let matchedCat = categories.value.find(c => c.englishName === 'Lot' || c.nativeName === 'زمین');
+            let matchedCat = categories.value.find((c) => c.englishName === 'Lot' || c.nativeName === 'زمین');
             if (matchedCat) {
                 property.value.category = matchedCat._id;
                 handleSelectCategory(matchedCat._id);
@@ -723,13 +714,13 @@ const saveProperty = async () => {
 
         payload.mainImageUrls = (mainImageUrlsWithData.value || [])
             .map((x) => {
-                const raw = typeof x === 'string' ? x : (x.url || x.source || '');
+                const raw = typeof x === 'string' ? x : x.url || x.source || '';
                 return raw.split('?')[0];
             })
             .filter(Boolean);
         payload.documentUrls = (documentUrlsWithData.value || [])
             .map((x) => {
-                const raw = typeof x === 'string' ? x : (x.url || x.source || '');
+                const raw = typeof x === 'string' ? x : x.url || x.source || '';
                 return raw.split('?')[0];
             })
             .filter(Boolean);
@@ -769,7 +760,7 @@ const saveProperty = async () => {
 </script>
 
 <template>
-    <div class="space-y-6 dir-rtl relative" style="direction: rtl;">
+    <div class="space-y-6 dir-rtl relative" style="direction: rtl">
         <!-- Toast Notification Container -->
         <Toast></Toast>
 
@@ -794,16 +785,7 @@ const saveProperty = async () => {
 
             <div class="flex items-center gap-2 flex-wrap justify-end">
                 <Button label="بازگشت" icon="pi pi-arrow-right" severity="secondary" text rounded @click="router.push('/property/list-properties')" />
-                <Button
-                    :label="editMode ? 'بروزرسانی ملک' : 'ذخیره ملک'"
-                    icon="pi pi-check"
-                    severity="primary"
-                    rounded
-                    :loading="isSaving"
-                    :disabled="pageLoading"
-                    @click="saveProperty"
-                    class="px-5 font-semibold"
-                />
+                <Button :label="editMode ? 'بروزرسانی ملک' : 'ذخیره ملک'" icon="pi pi-check" severity="primary" rounded :loading="isSaving" :disabled="pageLoading" @click="saveProperty" class="px-5 font-semibold" />
             </div>
         </div>
 
@@ -827,40 +809,23 @@ const saveProperty = async () => {
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <!-- 1. شناسه یکتا -->
                         <div>
-                            <label class="block text-sm font-medium text-surface-700 dark:text-surface-200 mb-1.5">
-                                شناسه یکتا ثبت ملک (۱۸ رقم)
-                            </label>
-                            <InputText
-                                v-model="property.uniqueId"
-                                placeholder="مثلاً: ۱۳۹۹۲۱۵۸۰۳۰۱۰۰۰۱۲۳"
-                                class="w-full !rounded-xl"
-                                fluid
-                            />
+                            <label class="block text-sm font-medium text-surface-700 dark:text-surface-200 mb-1.5"> شناسه یکتا ثبت ملک (۱۸ رقم) </label>
+                            <InputText v-model="property.uniqueId" placeholder="مثلاً: ۱۳۹۹۲۱۵۸۰۳۰۱۰۰۰۱۲۳" class="w-full !rounded-xl" fluid />
                         </div>
 
                         <!-- 2. شناسه ملی جغرافیایی (JAM) -->
                         <div>
                             <div class="flex items-center justify-between mb-1.5">
-                                <label class="block text-sm font-medium text-surface-700 dark:text-surface-200">
-                                    شناسه ملی جغرافیایی (کد جام) <span class="text-red-500">*</span>
-                                </label>
+                                <label class="block text-sm font-medium text-surface-700 dark:text-surface-200"> شناسه ملی جغرافیایی (کد جام) <span class="text-red-500">*</span> </label>
                                 <span class="text-xs text-primary font-medium">الزامی</span>
                             </div>
                             <div class="relative">
-                                <InputText
-                                    v-model="property.nationalGeoCode"
-                                    @input="handleNationalGeoCodeChange"
-                                    placeholder="مثلاً: ۵۳۸۱۳۶۳۹۵۰۱۳۵۳۹ (۱۵ رقم)"
-                                    class="w-full !rounded-xl pl-9"
-                                    fluid
-                                />
+                                <InputText v-model="property.nationalGeoCode" @input="handleNationalGeoCodeChange" placeholder="مثلاً: ۵۳۸۱۳۶۳۹۵۰۱۳۵۳۹ (۱۵ رقم)" class="w-full !rounded-xl pl-9" fluid />
                                 <span class="absolute left-3 top-1/2 -translate-y-1/2 text-surface-400">
                                     <i class="pi pi-map-marker text-sm"></i>
                                 </span>
                             </div>
-                            <small class="text-xs text-surface-500 mt-1 block">
-                                شامل ۶ رقم طول + ۷ رقم عرض + ۲ رقم زون UTM
-                            </small>
+                            <small class="text-xs text-surface-500 mt-1 block"> شامل ۶ رقم طول + ۷ رقم عرض + ۲ رقم زون UTM </small>
                         </div>
 
                         <!-- 3. شماره سریال سند -->
@@ -883,30 +848,11 @@ const saveProperty = async () => {
 
                         <!-- 6. تاریخ ثبت سند (شمسی) -->
                         <div>
-                            <label class="block text-sm font-medium text-surface-700 dark:text-surface-200 mb-1.5">
-                                تاریخ ثبت سند
-                            </label>
+                            <label class="block text-sm font-medium text-surface-700 dark:text-surface-200 mb-1.5"> تاریخ ثبت سند </label>
                             <div class="grid grid-cols-3 gap-2">
-                                <InputText
-                                    v-model="regDay"
-                                    placeholder="روز (۰۱)"
-                                    maxlength="2"
-                                    class="!rounded-xl text-center text-xs"
-                                />
-                                <Dropdown
-                                    v-model="regMonth"
-                                    :options="persianMonths"
-                                    optionLabel="label"
-                                    optionValue="value"
-                                    placeholder="ماه"
-                                    class="!rounded-xl text-xs"
-                                />
-                                <InputText
-                                    v-model="regYear"
-                                    placeholder="سال (۱۴۰۲)"
-                                    maxlength="4"
-                                    class="!rounded-xl text-center text-xs"
-                                />
+                                <InputText v-model="regDay" placeholder="روز (۰۱)" maxlength="2" class="!rounded-xl text-center text-xs" />
+                                <Dropdown v-model="regMonth" :options="persianMonths" optionLabel="label" optionValue="value" placeholder="ماه" class="!rounded-xl text-xs" />
+                                <InputText v-model="regYear" placeholder="سال (۱۴۰۲)" maxlength="4" class="!rounded-xl text-center text-xs" />
                             </div>
                         </div>
                     </div>
@@ -922,17 +868,13 @@ const saveProperty = async () => {
                     <div class="space-y-4">
                         <!-- Auto-generated Display Name Preview -->
                         <div class="p-3 bg-surface-50 dark:bg-surface-800/50 rounded-xl border border-surface-200 dark:border-surface-700">
-                            <label class="block text-xs font-semibold text-surface-500 dark:text-surface-400 mb-1">
-                                نام ثبت‌شده ملک (تولید خودکار بر اساس مالک و شماره ثبتی)
-                            </label>
+                            <label class="block text-xs font-semibold text-surface-500 dark:text-surface-400 mb-1"> نام ثبت‌شده ملک (تولید خودکار بر اساس مالک و شماره ثبتی) </label>
                             <div class="flex items-center gap-2">
                                 <i class="pi pi-building text-primary text-sm"></i>
                                 <span v-if="computedPropertyName" class="text-sm font-bold text-surface-900 dark:text-surface-100 font-mono">
                                     {{ computedPropertyName }}
                                 </span>
-                                <span v-else class="text-sm text-surface-400 italic">
-                                    پس از وارد کردن نام مالک و شماره ثبتی نمایش داده می‌شود
-                                </span>
+                                <span v-else class="text-sm text-surface-400 italic"> پس از وارد کردن نام مالک و شماره ثبتی نمایش داده می‌شود </span>
                             </div>
                         </div>
 
@@ -955,16 +897,7 @@ const saveProperty = async () => {
 
                             <div>
                                 <label class="block text-sm font-medium text-surface-700 dark:text-surface-200 mb-1.5">وضعیت ملک</label>
-                                <Dropdown
-                                    v-model="property.status"
-                                    :options="statuses"
-                                    optionLabel="nativeName"
-                                    optionValue="_id"
-                                    placeholder="انتخاب وضعیت"
-                                    class="w-full !rounded-xl"
-                                    showClear
-                                    fluid
-                                >
+                                <Dropdown v-model="property.status" :options="statuses" optionLabel="nativeName" optionValue="_id" placeholder="انتخاب وضعیت" class="w-full !rounded-xl" showClear fluid>
                                     <template #option="slotProps">
                                         <div class="flex items-center gap-2">
                                             <Tag :value="slotProps.option.nativeName" :severity="getStatusSeverity(slotProps.option)" rounded class="text-xs" />
@@ -1024,18 +957,8 @@ const saveProperty = async () => {
                             <InputText v-model="property.nationality" placeholder="مثلاً: ایران" class="w-full !rounded-xl" fluid />
                         </div>
                         <div>
-                            <label class="block text-sm font-medium text-surface-700 dark:text-surface-200 mb-1.5">
-                                میزان سهم مالکیت (دانگ)
-                            </label>
-                            <Dropdown
-                                v-model="property.dong"
-                                :options="dongOptions"
-                                optionLabel="label"
-                                optionValue="value"
-                                placeholder="انتخاب دانگ"
-                                class="w-full !rounded-xl"
-                                fluid
-                            >
+                            <label class="block text-sm font-medium text-surface-700 dark:text-surface-200 mb-1.5"> میزان سهم مالکیت (دانگ) </label>
+                            <Dropdown v-model="property.dong" :options="dongOptions" optionLabel="label" optionValue="value" placeholder="انتخاب دانگ" class="w-full !rounded-xl" fluid>
                                 <template #option="slotProps">
                                     <div class="flex items-center justify-between w-full">
                                         <span class="font-semibold">{{ slotProps.option.label }}</span>
@@ -1150,15 +1073,7 @@ const saveProperty = async () => {
                                 <label class="block text-xs font-medium text-surface-600 dark:text-surface-300">
                                     {{ feat.nativeName }}
                                 </label>
-                                <Dropdown
-                                    v-if="feat.predefinedValues && feat.predefinedValues.length > 0"
-                                    v-model="featuresValues[feat._id]"
-                                    :options="feat.predefinedValues"
-                                    placeholder="انتخاب کنید"
-                                    class="w-full !rounded-xl"
-                                    showClear
-                                    fluid
-                                />
+                                <Dropdown v-if="feat.predefinedValues && feat.predefinedValues.length > 0" v-model="featuresValues[feat._id]" :options="feat.predefinedValues" placeholder="انتخاب کنید" class="w-full !rounded-xl" showClear fluid />
                                 <InputText v-else-if="feat.featureType === 'string' || feat.featureType === 'text' || feat.type === 'string'" v-model="featuresValues[feat._id]" class="w-full !rounded-xl" fluid />
                                 <InputNumber v-else-if="feat.featureType === 'number' || feat.type === 'number'" v-model="featuresValues[feat._id]" class="w-full !rounded-xl" fluid />
                                 <ToggleSwitch v-else-if="feat.featureType === 'boolean' || feat.type === 'boolean'" v-model="featuresValues[feat._id]" />
@@ -1199,13 +1114,7 @@ const saveProperty = async () => {
                         <Button label="تبدیل UTM" size="small" severity="secondary" rounded @click="convertUTMtoLatLng" class="w-full" />
 
                         <div class="h-[600px] rounded-xl overflow-hidden border border-surface-200 dark:border-surface-800">
-                            <MapComponent
-                                ref="mapRef"
-                                v-model="mapMarker"
-                                :locked="!!property.nationalGeoCode?.trim()"
-                                @marker-updated="handleMarkerUpdated"
-                                @cleared="handleMapCleared"
-                            />
+                            <MapComponent ref="mapRef" v-model="mapMarker" :locked="!!property.nationalGeoCode?.trim()" @marker-updated="handleMarkerUpdated" @cleared="handleMapCleared" />
                         </div>
                     </div>
                 </div>
@@ -1243,7 +1152,9 @@ const saveProperty = async () => {
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 0.3s ease, transform 0.3s ease;
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
 }
 
 .fade-enter-from,
diff --git a/src/views/pages/Property/ListProperties.vue b/src/views/pages/Property/ListProperties.vue
index dc59abf..de218b9 100644
--- a/src/views/pages/Property/ListProperties.vue
+++ b/src/views/pages/Property/ListProperties.vue
@@ -150,8 +150,6 @@ const loadData = async () => {
     }
 };
 
-
-
 const loading = ref(false);
 const indexingFinished = ref(false);
 const indexingMessage = ref('در حال ایندکس...');
@@ -258,18 +256,8 @@ const onCardLeave = () => {
             <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                 <!-- Start: Actions -->
                 <div class="flex flex-wrap items-center gap-3">
-                    <Button
-                        label="ساخت ملک جدید"
-                        icon="pi pi-plus"
-                        severity="primary"
-                        @click="router.push('/property/create-property')"
-                    />
-                    <Button
-                        @click="indexProperties"
-                        :disabled="loading"
-                        severity="secondary"
-                        class="indexing-button"
-                    >
+                    <Button label="ساخت ملک جدید" icon="pi pi-plus" severity="primary" @click="router.push('/property/create-property')" />
+                    <Button @click="indexProperties" :disabled="loading" severity="secondary" class="indexing-button">
                         <div class="button-content">
                             <div v-if="!loading" class="flex items-center gap-2">
                                 <i class="pi pi-refresh"></i>
@@ -307,16 +295,8 @@ const onCardLeave = () => {
                         @click="router.push('/settings/search-settings')"
                     />
 
-
                     <!-- View Mode Selector -->
-                    <SelectButton
-                        v-model="viewMode"
-                        :options="viewModeOptions"
-                        optionLabel="label"
-                        optionValue="value"
-                        :allowEmpty="false"
-                        class="view-mode-selector"
-                    >
+                    <SelectButton v-model="viewMode" :options="viewModeOptions" optionLabel="label" optionValue="value" :allowEmpty="false" class="view-mode-selector">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2 px-2 py-1">
                                 <i :class="slotProps.option.icon"></i>
@@ -365,16 +345,10 @@ const onCardLeave = () => {
                         </div>
                     </template>
 
-
                     <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
                     <Column header="تصویر" style="width: 5rem">
                         <template #body="slotProps">
-                            <img
-                                :src="getPropertyImage(slotProps.data)"
-                                :alt="slotProps.data.name"
-                                class="rounded-lg object-cover w-14 h-14 shadow-sm"
-                                @error="handleImageError"
-                            />
+                            <img :src="getPropertyImage(slotProps.data)" :alt="slotProps.data.name" class="rounded-lg object-cover w-14 h-14 shadow-sm" @error="handleImageError" />
                         </template>
                     </Column>
                     <Column field="propertyCode" header="کد" style="min-width: 5rem">
@@ -408,30 +382,9 @@ const onCardLeave = () => {
                     <Column :exportable="false" style="min-width: 12rem">
                         <template #body="slotProps">
                             <div class="flex items-center gap-2">
-                                <Button
-                                    icon="pi pi-external-link"
-                                    outlined
-                                    rounded
-                                    severity="secondary"
-                                    title="باز کردن در تب جدید"
-                                    @click="openInNewTab(slotProps.data._id || slotProps.data.id)"
-                                />
-                                <Button
-                                    icon="pi pi-pencil"
-                                    outlined
-                                    rounded
-                                    severity="info"
-                                    title="ویرایش ملک"
-                                    @click="editProperty(slotProps.data._id || slotProps.data.id)"
-                                />
-                                <Button
-                                    icon="pi pi-trash"
-                                    outlined
-                                    rounded
-                                    severity="danger"
-                                    title="حذف ملک"
-                                    @click="confirmDeleteProperty(slotProps.data._id || slotProps.data.id, $event)"
-                                />
+                                <Button icon="pi pi-external-link" outlined rounded severity="secondary" title="باز کردن در تب جدید" @click="openInNewTab(slotProps.data._id || slotProps.data.id)" />
+                                <Button icon="pi pi-pencil" outlined rounded severity="info" title="ویرایش ملک" @click="editProperty(slotProps.data._id || slotProps.data.id)" />
+                                <Button icon="pi pi-trash" outlined rounded severity="danger" title="حذف ملک" @click="confirmDeleteProperty(slotProps.data._id || slotProps.data.id, $event)" />
                             </div>
                         </template>
                     </Column>
@@ -443,18 +396,12 @@ const onCardLeave = () => {
                 <!-- Left/Main: Property Cards Scrollable Column -->
                 <div class="properties-cards-column">
                     <div class="cards-header">
-                        <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">
-                            {{ totalCount }} ملک یافت شد (صفحه {{ page }} از {{ pagesCount || 1 }})
-                        </span>
+                        <span class="text-sm font-semibold text-slate-700 dark:text-slate-200"> {{ totalCount }} ملک یافت شد (صفحه {{ page }} از {{ pagesCount || 1 }}) </span>
                     </div>
 
                     <!-- Loading Skeleton in Split View -->
                     <div v-if="dataLoading" class="cards-grid">
-                        <div
-                            v-for="i in 6"
-                            :key="i"
-                            class="p-4 rounded-2xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-sm flex flex-col gap-3 animate-pulse"
-                        >
+                        <div v-for="i in 6" :key="i" class="p-4 rounded-2xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-sm flex flex-col gap-3 animate-pulse">
                             <Skeleton width="100%" height="11rem" class="rounded-xl" />
                             <Skeleton width="70%" height="1.25rem" class="rounded-md" />
                             <Skeleton width="45%" height="1rem" class="rounded-md" />
@@ -482,18 +429,11 @@ const onCardLeave = () => {
                         >
                             <!-- Card Image -->
                             <div class="card-img-wrap">
-                                <img
-                                    :src="getPropertyImage(prop)"
-                                    :alt="prop.name"
-                                    class="card-img"
-                                    @error="handleImageError"
-                                />
+                                <img :src="getPropertyImage(prop)" :alt="prop.name" class="card-img" @error="handleImageError" />
                                 <span v-if="getCategoryName(prop)" class="card-badge-category">
                                     {{ getCategoryName(prop) }}
                                 </span>
-                                <span v-if="prop.propertyCode" class="card-badge-code">
-                                    #{{ prop.propertyCode }}
-                                </span>
+                                <span v-if="prop.propertyCode" class="card-badge-code"> #{{ prop.propertyCode }} </span>
                             </div>
 
                             <!-- Card Body -->
@@ -519,32 +459,12 @@ const onCardLeave = () => {
 
                                 <!-- Card Actions -->
                                 <div class="card-actions" @click.stop>
-                                    <a
-                                        :href="'/property/edit-property/' + (prop._id || prop.id)"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="card-btn card-btn-newtab"
-                                        title="باز کردن در تب جدید"
-                                    >
+                                    <a :href="'/property/edit-property/' + (prop._id || prop.id)" target="_blank" rel="noopener noreferrer" class="card-btn card-btn-newtab" title="باز کردن در تب جدید">
                                         <i class="pi pi-external-link"></i>
                                         <span>تب جدید</span>
                                     </a>
-                                    <Button
-                                        icon="pi pi-pencil"
-                                        label="ویرایش"
-                                        size="small"
-                                        severity="secondary"
-                                        outlined
-                                        class="flex-1"
-                                        @click="editProperty(prop._id || prop.id)"
-                                    />
-                                    <Button
-                                        icon="pi pi-trash"
-                                        size="small"
-                                        severity="danger"
-                                        outlined
-                                        @click="confirmDeleteProperty(prop._id || prop.id, $event)"
-                                    />
+                                    <Button icon="pi pi-pencil" label="ویرایش" size="small" severity="secondary" outlined class="flex-1" @click="editProperty(prop._id || prop.id)" />
+                                    <Button icon="pi pi-trash" size="small" severity="danger" outlined @click="confirmDeleteProperty(prop._id || prop.id, $event)" />
                                 </div>
                             </div>
                         </div>
@@ -555,41 +475,19 @@ const onCardLeave = () => {
                         <p>ملکی یافت نشد.</p>
                     </div>
 
-
                     <!-- Pagination -->
-                    <Paginator
-                        :rows="per_page"
-                        :totalRecords="totalCount"
-                        :first="(page - 1) * per_page"
-                        :rowsPerPageOptions="[20, 40, 80]"
-                        @page="onPageChange($event)"
-                        class="mt-4"
-                    />
+                    <Paginator :rows="per_page" :totalRecords="totalCount" :first="(page - 1) * per_page" :rowsPerPageOptions="[20, 40, 80]" @page="onPageChange($event)" class="mt-4" />
                 </div>
 
                 <!-- Right/Side: Sticky Interactive Map -->
                 <div class="properties-map-column">
-                    <PropertyMap
-                        ref="splitMapRef"
-                        :properties="properties"
-                        :selectedPropertyId="selectedPropertyId"
-                        :hoveredPropertyId="hoveredPropertyId"
-                        @select-property="onSelectProperty"
-                        @edit-property="editProperty"
-                    />
+                    <PropertyMap ref="splitMapRef" :properties="properties" :selectedPropertyId="selectedPropertyId" :hoveredPropertyId="hoveredPropertyId" @select-property="onSelectProperty" @edit-property="editProperty" />
                 </div>
             </div>
 
             <!-- ── VIEW 3: FULL MAP VIEW ── -->
             <div v-else-if="viewMode === 'map'" class="full-map-container">
-                <PropertyMap
-                    ref="mapRef"
-                    :properties="properties"
-                    :selectedPropertyId="selectedPropertyId"
-                    :hoveredPropertyId="hoveredPropertyId"
-                    @select-property="onSelectProperty"
-                    @edit-property="editProperty"
-                />
+                <PropertyMap ref="mapRef" :properties="properties" :selectedPropertyId="selectedPropertyId" :hoveredPropertyId="hoveredPropertyId" @select-property="onSelectProperty" @edit-property="editProperty" />
             </div>
         </div>
     </div>
@@ -658,7 +556,9 @@ const onCardLeave = () => {
 
 .property-card.card-selected {
     border-color: #6366f1;
-    box-shadow: 0 0 0 2px #6366f1, 0 12px 28px rgba(99, 102, 241, 0.18);
+    box-shadow:
+        0 0 0 2px #6366f1,
+        0 12px 28px rgba(99, 102, 241, 0.18);
     transform: translateY(-4px);
 }
 
@@ -805,7 +705,9 @@ const onCardLeave = () => {
 
 .app-dark .property-card.card-selected {
     border-color: #6366f1;
-    box-shadow: 0 0 0 2px #6366f1, 0 12px 28px rgba(99, 102, 241, 0.35);
+    box-shadow:
+        0 0 0 2px #6366f1,
+        0 12px 28px rgba(99, 102, 241, 0.35);
 }
 
 .app-dark .card-title {
diff --git a/src/views/pages/Property/PropertyMap.vue b/src/views/pages/Property/PropertyMap.vue
index 87587f3..6772401 100644
--- a/src/views/pages/Property/PropertyMap.vue
+++ b/src/views/pages/Property/PropertyMap.vue
@@ -1,337 +1,3 @@
-<template>
-    <div ref="mapContainer" class="property-map-container" :class="{ 'map-fullscreen': isFullscreen }">
-        <!-- ── Top Action Buttons ── -->
-        <div class="map-overlay action-buttons">
-            <!-- Fullscreen toggle -->
-            <button class="map-btn" @click="toggleFullscreen" :title="isFullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'">
-                <svg v-if="isFullscreen" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/>
-                    <path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>
-                </svg>
-                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M3 7V3h4"/><path d="M21 7V3h-4"/>
-                    <path d="M3 17v4h4"/><path d="M21 17v4h-4"/>
-                </svg>
-            </button>
-
-            <!-- Fit all markers -->
-            <button class="map-btn map-btn-fit" @click="fitBounds" title="نمایش همه املاک روی نقشه" :disabled="propertiesWithCoords.length === 0">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
-                </svg>
-            </button>
-
-            <!-- Locate me -->
-            <button class="map-btn map-btn-locate" @click="locateMe" title="موقعیت من" :class="{ locating: isLocating }">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="3"/>
-                    <path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
-                    <circle cx="12" cy="12" r="7" opacity="0.3"/>
-                </svg>
-            </button>
-
-            <!-- Spread / Group Mode Toggle (when co-located properties exist) -->
-            <button
-                v-if="hasCoLocatedProperties"
-                class="map-btn map-btn-spread"
-                :class="{ 'is-active': isSpreadMode }"
-                @click="toggleSpreadMode"
-                :title="isSpreadMode ? 'نمایش تجمیعی املاک هم‌مکان' : 'تفکیک و نمایش جداگانه املاک هم‌مکان'"
-            >
-                <svg v-if="isSpreadMode" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <!-- Collapse / Group icon -->
-                    <rect x="4" y="4" width="7" height="7" rx="1.5"/>
-                    <rect x="13" y="13" width="7" height="7" rx="1.5"/>
-                    <path d="M11 4v4h-4M13 20v-4h4"/>
-                </svg>
-                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <!-- Spread / Fan-out icon -->
-                    <circle cx="12" cy="12" r="3"/>
-                    <circle cx="6" cy="6" r="2.5"/>
-                    <circle cx="18" cy="6" r="2.5"/>
-                    <circle cx="6" cy="18" r="2.5"/>
-                    <circle cx="18" cy="18" r="2.5"/>
-                    <path d="M8 8l2.5 2.5M16 8l-2.5 2.5M8 16l2.5-2.5M16 16l-2.5-2.5" opacity="0.5"/>
-                </svg>
-            </button>
-        </div>
-
-        <!-- ── Top-Left: Properties count badge ── -->
-        <div class="map-overlay count-badge">
-            <i class="pi pi-map-marker text-indigo-500"></i>
-            <span>{{ propertiesWithCoords.length }} ملک</span>
-            <span v-if="hasCoLocatedProperties && !isSpreadMode" class="badge-subcount">
-                ({{ locationGroups.length }} موقعیت)
-            </span>
-        </div>
-
-        <!-- ── Bottom-Left: Coordinate readout ── -->
-        <div v-if="hoverCoords" class="map-overlay coords-readout">
-            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="opacity:0.7;flex-shrink:0">
-                <circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
-            </svg>
-            <span>{{ hoverCoords.lat.toFixed(5) }}, {{ hoverCoords.lon.toFixed(5) }}</span>
-        </div>
-
-        <!-- ── Leaflet Map ── -->
-        <l-map
-            ref="map"
-            v-model:zoom="zoom"
-            :center="center"
-            :use-global-leaflet="false"
-            style="height: 100%; width: 100%;"
-            @mousemove="handleMouseMove($event)"
-            @mouseout="hoverCoords = null"
-            @ready="onMapReady"
-        >
-            <!-- Layer switcher -->
-            <l-control-layers position="bottomright" />
-
-            <!-- OpenStreetMap -->
-            <l-tile-layer
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                layer-type="base"
-                name="نمای نقشه‌ای"
-                attribution="&copy; OpenStreetMap contributors"
-            />
-
-            <!-- Satellite -->
-            <l-tile-layer
-                :visible="false"
-                url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
-                layer-type="base"
-                name="نمای ماهواره‌ای"
-                attribution="Tiles &copy; Esri"
-            />
-
-            <!-- Scale control -->
-            <l-control-scale position="bottomleft" :imperial="false" :maxWidth="150" />
-
-            <!-- ── VIEW A: SPREAD MODE MARKERS (Separated individual pins) ── -->
-            <template v-if="isSpreadMode">
-                <l-marker
-                    v-for="item in spreadMarkersList"
-                    :key="item.prop._id || item.prop.id"
-                    :lat-lng="item.coords"
-                    :icon="getIndividualMarkerIcon(item.prop, item.isOffset)"
-                    @click="onMarkerClick(item.prop)"
-                >
-                    <l-popup :options="{ maxWidth: 330, minWidth: 280, className: 'airbnb-custom-popup' }">
-                        <div class="airbnb-popup-card">
-                            <!-- Image / Header -->
-                            <div class="popup-image-container">
-                                <img
-                                    :src="getPropertyImage(item.prop)"
-                                    :alt="item.prop.name"
-                                    class="popup-image"
-                                    @error="handleImageError"
-                                />
-                                <span v-if="getCategoryName(item.prop)" class="popup-category-badge">
-                                    {{ getCategoryName(item.prop) }}
-                                </span>
-                                <span v-if="item.prop.propertyCode" class="popup-code-badge">
-                                    کد: {{ item.prop.propertyCode }}
-                                </span>
-                            </div>
-
-                            <!-- Card Body -->
-                            <div class="popup-content-body">
-                                <h4 class="popup-title">{{ item.prop.name || 'ملک بدون نام' }}</h4>
-
-                                <div class="popup-info-grid">
-                                    <div v-if="item.prop.nationalGeoCode" class="popup-info-item">
-                                        <span class="info-label">شناسه ملی جغرافیایی:</span>
-                                        <span class="info-value text-mono">{{ item.prop.nationalGeoCode }}</span>
-                                    </div>
-                                    <div v-if="item.prop.dong" class="popup-info-item">
-                                        <span class="info-label">سهم دانگ:</span>
-                                        <span class="info-value text-indigo-600 font-bold">{{ item.prop.dong }} دانگ</span>
-                                    </div>
-                                    <div v-if="item.prop.zoningType" class="popup-info-item">
-                                        <span class="info-label">کاربری:</span>
-                                        <span class="info-value">{{ item.prop.zoningType }}</span>
-                                    </div>
-                                    <div v-if="item.prop.address" class="popup-info-item full-width">
-                                        <span class="info-label">آدرس:</span>
-                                        <span class="info-value">{{ item.prop.address }}</span>
-                                    </div>
-                                </div>
-
-                                <!-- Action Buttons -->
-                                <div class="popup-actions">
-                                    <a
-                                        :href="'/property/edit-property/' + (item.prop._id || item.prop.id)"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="popup-btn popup-btn-external"
-                                        title="باز کردن در برگه جدید"
-                                    >
-                                        <i class="pi pi-external-link"></i>
-                                        <span>باز کردن در تب جدید</span>
-                                    </a>
-                                    <button
-                                        type="button"
-                                        class="popup-btn popup-btn-primary"
-                                        @click="onEditClick(item.prop)"
-                                        title="ویرایش ملک"
-                                    >
-                                        <i class="pi pi-pencil"></i>
-                                        <span>ویرایش</span>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </l-popup>
-                </l-marker>
-            </template>
-
-            <!-- ── VIEW B: GROUPED MODE MARKERS (Default Smart Grouping & Multi-Property Card) ── -->
-            <template v-else>
-                <l-marker
-                    v-for="group in locationGroups"
-                    :key="group.id"
-                    :lat-lng="group.coords"
-                    :icon="getGroupMarkerIcon(group)"
-                    @click="onGroupMarkerClick(group)"
-                >
-                    <l-popup :options="{ maxWidth: 340, minWidth: 290, className: 'airbnb-custom-popup' }">
-                        <div class="airbnb-popup-card">
-                            <!-- Multi-Property Group Header & Switcher (If multiple properties share this location) -->
-                            <div v-if="group.isGroup" class="popup-group-header">
-                                <div class="group-header-top">
-                                    <div class="group-header-title">
-                                        <span class="group-header-icon">🏢</span>
-                                        <span>موقعیت مشترک: {{ group.count }} سهم / ملک</span>
-                                    </div>
-                                    <div class="group-nav-controls">
-                                        <button
-                                            type="button"
-                                            class="group-nav-btn"
-                                            @click.stop="prevGroupProperty(group)"
-                                            title="سهم قبلی"
-                                        >
-                                            <i class="pi pi-chevron-right"></i>
-                                        </button>
-                                        <span class="group-step-indicator">
-                                            {{ getActiveGroupIndex(group) + 1 }} از {{ group.count }}
-                                        </span>
-                                        <button
-                                            type="button"
-                                            class="group-nav-btn"
-                                            @click.stop="nextGroupProperty(group)"
-                                            title="سهم بعدی"
-                                        >
-                                            <i class="pi pi-chevron-left"></i>
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <!-- Property Tabs Chips -->
-                                <div class="group-tabs-bar">
-                                    <button
-                                        v-for="(p, idx) in group.properties"
-                                        :key="p._id || p.id"
-                                        type="button"
-                                        class="group-tab-chip"
-                                        :class="{ 'is-active': getActiveGroupIndex(group) === idx }"
-                                        @click.stop="setActiveGroupIndex(group, idx)"
-                                    >
-                                        <span class="tab-chip-code">
-                                            {{ p.propertyCode ? `#${p.propertyCode}` : `سهم ${idx + 1}` }}
-                                        </span>
-                                        <span v-if="p.dong" class="tab-chip-dong">
-                                            {{ p.dong }} دانگ
-                                        </span>
-                                    </button>
-                                </div>
-                            </div>
-
-                            <!-- Currently Active Property in this Group -->
-                            <template v-if="getActiveProperty(group)">
-                                <!-- Image / Header -->
-                                <div class="popup-image-container">
-                                    <img
-                                        :src="getPropertyImage(getActiveProperty(group))"
-                                        :alt="getActiveProperty(group).name"
-                                        class="popup-image"
-                                        @error="handleImageError"
-                                    />
-                                    <span v-if="getCategoryName(getActiveProperty(group))" class="popup-category-badge">
-                                        {{ getCategoryName(getActiveProperty(group)) }}
-                                    </span>
-                                    <span v-if="getActiveProperty(group).propertyCode" class="popup-code-badge">
-                                        کد: {{ getActiveProperty(group).propertyCode }}
-                                    </span>
-                                    <span v-if="group.isGroup && getActiveProperty(group).dong" class="popup-dong-badge">
-                                        سهم: {{ getActiveProperty(group).dong }} دانگ
-                                    </span>
-                                </div>
-
-                                <!-- Card Body -->
-                                <div class="popup-content-body">
-                                    <h4 class="popup-title">
-                                        {{ getActiveProperty(group).name || 'ملک بدون نام' }}
-                                    </h4>
-
-                                    <div class="popup-info-grid">
-                                        <div v-if="getActiveProperty(group).nationalGeoCode" class="popup-info-item">
-                                            <span class="info-label">شناسه ملی جغرافیایی:</span>
-                                            <span class="info-value text-mono">{{ getActiveProperty(group).nationalGeoCode }}</span>
-                                        </div>
-                                        <div v-if="getActiveProperty(group).dong" class="popup-info-item">
-                                            <span class="info-label">میزان مالکیت:</span>
-                                            <span class="info-value text-indigo-600 font-bold">
-                                                {{ getActiveProperty(group).dong }} دانگ ({{ (parseFloat(getActiveProperty(group).dong) / 6 * 100).toFixed(0) }}٪)
-                                            </span>
-                                        </div>
-                                        <div v-if="getActiveProperty(group).zoningType" class="popup-info-item">
-                                            <span class="info-label">کاربری:</span>
-                                            <span class="info-value">{{ getActiveProperty(group).zoningType }}</span>
-                                        </div>
-                                        <div v-if="getActiveProperty(group).address" class="popup-info-item full-width">
-                                            <span class="info-label">آدرس:</span>
-                                            <span class="info-value">{{ getActiveProperty(group).address }}</span>
-                                        </div>
-                                    </div>
-
-                                    <!-- Action Buttons -->
-                                    <div class="popup-actions">
-                                        <a
-                                            :href="'/property/edit-property/' + (getActiveProperty(group)._id || getActiveProperty(group).id)"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            class="popup-btn popup-btn-external"
-                                            title="باز کردن در برگه جدید"
-                                        >
-                                            <i class="pi pi-external-link"></i>
-                                            <span>باز کردن در تب جدید</span>
-                                        </a>
-                                        <button
-                                            type="button"
-                                            class="popup-btn popup-btn-primary"
-                                            @click="onEditClick(getActiveProperty(group))"
-                                            title="ویرایش ملک"
-                                        >
-                                            <i class="pi pi-pencil"></i>
-                                            <span>ویرایش</span>
-                                        </button>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </l-popup>
-                </l-marker>
-            </template>
-        </l-map>
-
-        <!-- Locating overlay -->
-        <div v-if="isLocating" class="locating-overlay">
-            <div class="locating-spinner"></div>
-            <span>در حال تعیین موقعیت...</span>
-        </div>
-    </div>
-</template>
-
 <script setup>
 import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue';
 import 'leaflet/dist/leaflet.css';
@@ -845,6 +511,250 @@ defineExpose({
 });
 </script>
 
+<template>
+    <div ref="mapContainer" class="property-map-container" :class="{ 'map-fullscreen': isFullscreen }">
+        <!-- ── Top Action Buttons ── -->
+        <div class="map-overlay action-buttons">
+            <!-- Fullscreen toggle -->
+            <button class="map-btn" @click="toggleFullscreen" :title="isFullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'">
+                <svg v-if="isFullscreen" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M8 3v3a2 2 0 0 1-2 2H3" />
+                    <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+                    <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+                    <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M3 7V3h4" />
+                    <path d="M21 7V3h-4" />
+                    <path d="M3 17v4h4" />
+                    <path d="M21 17v4h-4" />
+                </svg>
+            </button>
+
+            <!-- Fit all markers -->
+            <button class="map-btn map-btn-fit" @click="fitBounds" title="نمایش همه املاک روی نقشه" :disabled="propertiesWithCoords.length === 0">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
+                </svg>
+            </button>
+
+            <!-- Locate me -->
+            <button class="map-btn map-btn-locate" @click="locateMe" title="موقعیت من" :class="{ locating: isLocating }">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="3" />
+                    <path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
+                    <circle cx="12" cy="12" r="7" opacity="0.3" />
+                </svg>
+            </button>
+
+            <!-- Spread / Group Mode Toggle (when co-located properties exist) -->
+            <button v-if="hasCoLocatedProperties" class="map-btn map-btn-spread" :class="{ 'is-active': isSpreadMode }" @click="toggleSpreadMode" :title="isSpreadMode ? 'نمایش تجمیعی املاک هم‌مکان' : 'تفکیک و نمایش جداگانه املاک هم‌مکان'">
+                <svg v-if="isSpreadMode" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <!-- Collapse / Group icon -->
+                    <rect x="4" y="4" width="7" height="7" rx="1.5" />
+                    <rect x="13" y="13" width="7" height="7" rx="1.5" />
+                    <path d="M11 4v4h-4M13 20v-4h4" />
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <!-- Spread / Fan-out icon -->
+                    <circle cx="12" cy="12" r="3" />
+                    <circle cx="6" cy="6" r="2.5" />
+                    <circle cx="18" cy="6" r="2.5" />
+                    <circle cx="6" cy="18" r="2.5" />
+                    <circle cx="18" cy="18" r="2.5" />
+                    <path d="M8 8l2.5 2.5M16 8l-2.5 2.5M8 16l2.5-2.5M16 16l-2.5-2.5" opacity="0.5" />
+                </svg>
+            </button>
+        </div>
+
+        <!-- ── Top-Left: Properties count badge ── -->
+        <div class="map-overlay count-badge">
+            <i class="pi pi-map-marker text-indigo-500"></i>
+            <span>{{ propertiesWithCoords.length }} ملک</span>
+            <span v-if="hasCoLocatedProperties && !isSpreadMode" class="badge-subcount"> ({{ locationGroups.length }} موقعیت) </span>
+        </div>
+
+        <!-- ── Bottom-Left: Coordinate readout ── -->
+        <div v-if="hoverCoords" class="map-overlay coords-readout">
+            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="opacity: 0.7; flex-shrink: 0">
+                <circle cx="12" cy="12" r="3" />
+                <path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
+            </svg>
+            <span>{{ hoverCoords.lat.toFixed(5) }}, {{ hoverCoords.lon.toFixed(5) }}</span>
+        </div>
+
+        <!-- ── Leaflet Map ── -->
+        <l-map ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false" style="height: 100%; width: 100%" @mousemove="handleMouseMove($event)" @mouseout="hoverCoords = null" @ready="onMapReady">
+            <!-- Layer switcher -->
+            <l-control-layers position="bottomright" />
+
+            <!-- OpenStreetMap -->
+            <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="نمای نقشه‌ای" attribution="&copy; OpenStreetMap contributors" />
+
+            <!-- Satellite -->
+            <l-tile-layer :visible="false" url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" layer-type="base" name="نمای ماهواره‌ای" attribution="Tiles &copy; Esri" />
+
+            <!-- Scale control -->
+            <l-control-scale position="bottomleft" :imperial="false" :maxWidth="150" />
+
+            <!-- ── VIEW A: SPREAD MODE MARKERS (Separated individual pins) ── -->
+            <template v-if="isSpreadMode">
+                <l-marker v-for="item in spreadMarkersList" :key="item.prop._id || item.prop.id" :lat-lng="item.coords" :icon="getIndividualMarkerIcon(item.prop, item.isOffset)" @click="onMarkerClick(item.prop)">
+                    <l-popup :options="{ maxWidth: 330, minWidth: 280, className: 'airbnb-custom-popup' }">
+                        <div class="airbnb-popup-card">
+                            <!-- Image / Header -->
+                            <div class="popup-image-container">
+                                <img :src="getPropertyImage(item.prop)" :alt="item.prop.name" class="popup-image" @error="handleImageError" />
+                                <span v-if="getCategoryName(item.prop)" class="popup-category-badge">
+                                    {{ getCategoryName(item.prop) }}
+                                </span>
+                                <span v-if="item.prop.propertyCode" class="popup-code-badge"> کد: {{ item.prop.propertyCode }} </span>
+                            </div>
+
+                            <!-- Card Body -->
+                            <div class="popup-content-body">
+                                <h4 class="popup-title">{{ item.prop.name || 'ملک بدون نام' }}</h4>
+
+                                <div class="popup-info-grid">
+                                    <div v-if="item.prop.nationalGeoCode" class="popup-info-item">
+                                        <span class="info-label">شناسه ملی جغرافیایی:</span>
+                                        <span class="info-value text-mono">{{ item.prop.nationalGeoCode }}</span>
+                                    </div>
+                                    <div v-if="item.prop.dong" class="popup-info-item">
+                                        <span class="info-label">سهم دانگ:</span>
+                                        <span class="info-value text-indigo-600 font-bold">{{ item.prop.dong }} دانگ</span>
+                                    </div>
+                                    <div v-if="item.prop.zoningType" class="popup-info-item">
+                                        <span class="info-label">کاربری:</span>
+                                        <span class="info-value">{{ item.prop.zoningType }}</span>
+                                    </div>
+                                    <div v-if="item.prop.address" class="popup-info-item full-width">
+                                        <span class="info-label">آدرس:</span>
+                                        <span class="info-value">{{ item.prop.address }}</span>
+                                    </div>
+                                </div>
+
+                                <!-- Action Buttons -->
+                                <div class="popup-actions">
+                                    <a :href="'/property/edit-property/' + (item.prop._id || item.prop.id)" target="_blank" rel="noopener noreferrer" class="popup-btn popup-btn-external" title="باز کردن در برگه جدید">
+                                        <i class="pi pi-external-link"></i>
+                                        <span>باز کردن در تب جدید</span>
+                                    </a>
+                                    <button type="button" class="popup-btn popup-btn-primary" @click="onEditClick(item.prop)" title="ویرایش ملک">
+                                        <i class="pi pi-pencil"></i>
+                                        <span>ویرایش</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </l-popup>
+                </l-marker>
+            </template>
+
+            <!-- ── VIEW B: GROUPED MODE MARKERS (Default Smart Grouping & Multi-Property Card) ── -->
+            <template v-else>
+                <l-marker v-for="group in locationGroups" :key="group.id" :lat-lng="group.coords" :icon="getGroupMarkerIcon(group)" @click="onGroupMarkerClick(group)">
+                    <l-popup :options="{ maxWidth: 340, minWidth: 290, className: 'airbnb-custom-popup' }">
+                        <div class="airbnb-popup-card">
+                            <!-- Multi-Property Group Header & Switcher (If multiple properties share this location) -->
+                            <div v-if="group.isGroup" class="popup-group-header">
+                                <div class="group-header-top">
+                                    <div class="group-header-title">
+                                        <span class="group-header-icon">🏢</span>
+                                        <span>موقعیت مشترک: {{ group.count }} سهم / ملک</span>
+                                    </div>
+                                    <div class="group-nav-controls">
+                                        <button type="button" class="group-nav-btn" @click.stop="prevGroupProperty(group)" title="سهم قبلی">
+                                            <i class="pi pi-chevron-right"></i>
+                                        </button>
+                                        <span class="group-step-indicator"> {{ getActiveGroupIndex(group) + 1 }} از {{ group.count }} </span>
+                                        <button type="button" class="group-nav-btn" @click.stop="nextGroupProperty(group)" title="سهم بعدی">
+                                            <i class="pi pi-chevron-left"></i>
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Property Tabs Chips -->
+                                <div class="group-tabs-bar">
+                                    <button v-for="(p, idx) in group.properties" :key="p._id || p.id" type="button" class="group-tab-chip" :class="{ 'is-active': getActiveGroupIndex(group) === idx }" @click.stop="setActiveGroupIndex(group, idx)">
+                                        <span class="tab-chip-code">
+                                            {{ p.propertyCode ? `#${p.propertyCode}` : `سهم ${idx + 1}` }}
+                                        </span>
+                                        <span v-if="p.dong" class="tab-chip-dong"> {{ p.dong }} دانگ </span>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Currently Active Property in this Group -->
+                            <template v-if="getActiveProperty(group)">
+                                <!-- Image / Header -->
+                                <div class="popup-image-container">
+                                    <img :src="getPropertyImage(getActiveProperty(group))" :alt="getActiveProperty(group).name" class="popup-image" @error="handleImageError" />
+                                    <span v-if="getCategoryName(getActiveProperty(group))" class="popup-category-badge">
+                                        {{ getCategoryName(getActiveProperty(group)) }}
+                                    </span>
+                                    <span v-if="getActiveProperty(group).propertyCode" class="popup-code-badge"> کد: {{ getActiveProperty(group).propertyCode }} </span>
+                                    <span v-if="group.isGroup && getActiveProperty(group).dong" class="popup-dong-badge"> سهم: {{ getActiveProperty(group).dong }} دانگ </span>
+                                </div>
+
+                                <!-- Card Body -->
+                                <div class="popup-content-body">
+                                    <h4 class="popup-title">
+                                        {{ getActiveProperty(group).name || 'ملک بدون نام' }}
+                                    </h4>
+
+                                    <div class="popup-info-grid">
+                                        <div v-if="getActiveProperty(group).nationalGeoCode" class="popup-info-item">
+                                            <span class="info-label">شناسه ملی جغرافیایی:</span>
+                                            <span class="info-value text-mono">{{ getActiveProperty(group).nationalGeoCode }}</span>
+                                        </div>
+                                        <div v-if="getActiveProperty(group).dong" class="popup-info-item">
+                                            <span class="info-label">میزان مالکیت:</span>
+                                            <span class="info-value text-indigo-600 font-bold"> {{ getActiveProperty(group).dong }} دانگ ({{ ((parseFloat(getActiveProperty(group).dong) / 6) * 100).toFixed(0) }}٪) </span>
+                                        </div>
+                                        <div v-if="getActiveProperty(group).zoningType" class="popup-info-item">
+                                            <span class="info-label">کاربری:</span>
+                                            <span class="info-value">{{ getActiveProperty(group).zoningType }}</span>
+                                        </div>
+                                        <div v-if="getActiveProperty(group).address" class="popup-info-item full-width">
+                                            <span class="info-label">آدرس:</span>
+                                            <span class="info-value">{{ getActiveProperty(group).address }}</span>
+                                        </div>
+                                    </div>
+
+                                    <!-- Action Buttons -->
+                                    <div class="popup-actions">
+                                        <a
+                                            :href="'/property/edit-property/' + (getActiveProperty(group)._id || getActiveProperty(group).id)"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            class="popup-btn popup-btn-external"
+                                            title="باز کردن در برگه جدید"
+                                        >
+                                            <i class="pi pi-external-link"></i>
+                                            <span>باز کردن در تب جدید</span>
+                                        </a>
+                                        <button type="button" class="popup-btn popup-btn-primary" @click="onEditClick(getActiveProperty(group))" title="ویرایش ملک">
+                                            <i class="pi pi-pencil"></i>
+                                            <span>ویرایش</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </l-popup>
+                </l-marker>
+            </template>
+        </l-map>
+
+        <!-- Locating overlay -->
+        <div v-if="isLocating" class="locating-overlay">
+            <div class="locating-spinner"></div>
+            <span>در حال تعیین موقعیت...</span>
+        </div>
+    </div>
+</template>
+
 <style scoped>
 .property-map-container {
     position: relative;
@@ -972,8 +882,13 @@ defineExpose({
 }
 
 @keyframes pulse-btn {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
-    50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
+    }
+    50% {
+        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
+    }
 }
 
 .coords-readout {
@@ -1020,7 +935,9 @@ defineExpose({
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 </style>
 
@@ -1102,8 +1019,12 @@ defineExpose({
 }
 
 @keyframes badge-pop {
-    0% { transform: scale(0); }
-    100% { transform: scale(1); }
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
 
 .airbnb-pin.is-multi-pin:hover .pin-content,
@@ -1138,7 +1059,9 @@ defineExpose({
     background: #4f46e5;
     color: #ffffff;
     border-color: #ffffff;
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35), 0 8px 24px rgba(79, 70, 229, 0.5);
+    box-shadow:
+        0 0 0 3px rgba(79, 70, 229, 0.35),
+        0 8px 24px rgba(79, 70, 229, 0.5);
 }
 
 .pin-icon {
diff --git a/src/views/pages/Roles/ListRoles.vue b/src/views/pages/Roles/ListRoles.vue
index 917b693..57aafe6 100644
--- a/src/views/pages/Roles/ListRoles.vue
+++ b/src/views/pages/Roles/ListRoles.vue
@@ -237,13 +237,7 @@ const confirmDelete = (r, event) => {
 
         <!-- Table Card -->
         <div class="card main-card">
-            <DataTable
-                :value="filteredRoles"
-                :loading="loading"
-                dataKey="_id"
-                stripedRows
-                responsiveLayout="scroll"
-            >
+            <DataTable :value="filteredRoles" :loading="loading" dataKey="_id" stripedRows responsiveLayout="scroll">
                 <template #header>
                     <div class="table-header">
                         <span class="table-title">لیست نقش‌های تعریف شده ({{ filteredRoles.length }})</span>
@@ -269,15 +263,12 @@ const confirmDelete = (r, event) => {
                     </div>
                 </template>
 
-
                 <!-- Native Name -->
                 <Column field="nativeName" header="نام فارسی نقش" style="min-width: 180px">
                     <template #body="{ data }">
                         <div class="role-name-cell">
                             <span class="role-native-name">{{ data.nativeName }}</span>
-                            <span v-if="data.englishName === 'SuperAdmin'" class="super-badge">
-                                <i class="pi pi-bolt"></i> مدیر کل سیستم
-                            </span>
+                            <span v-if="data.englishName === 'SuperAdmin'" class="super-badge"> <i class="pi pi-bolt"></i> مدیر کل سیستم </span>
                         </div>
                     </template>
                 </Column>
@@ -292,22 +283,15 @@ const confirmDelete = (r, event) => {
                 <!-- Permissions Count -->
                 <Column header="تعداد دسترسی‌ها" style="width: 180px">
                     <template #body="{ data }">
-                        <span v-if="data.englishName === 'SuperAdmin'" class="perm-count-badge perm-full">
-                            <i class="pi pi-check-circle ml-1"></i> تمام دسترسی‌ها (نامحدود)
-                        </span>
-                        <span v-else class="perm-count-badge">
-                            <i class="pi pi-key ml-1"></i> {{ (data.permissions || []).length }} دسترسی فعال
-                        </span>
+                        <span v-if="data.englishName === 'SuperAdmin'" class="perm-count-badge perm-full"> <i class="pi pi-check-circle ml-1"></i> تمام دسترسی‌ها (نامحدود) </span>
+                        <span v-else class="perm-count-badge"> <i class="pi pi-key ml-1"></i> {{ (data.permissions || []).length }} دسترسی فعال </span>
                     </template>
                 </Column>
 
                 <!-- Status Column -->
                 <Column header="وضعیت" style="width: 100px">
                     <template #body="{ data }">
-                        <Tag
-                            :severity="data.isActive !== false ? 'success' : 'danger'"
-                            :value="data.isActive !== false ? 'فعال' : 'غیرفعال'"
-                        />
+                        <Tag :severity="data.isActive !== false ? 'success' : 'danger'" :value="data.isActive !== false ? 'فعال' : 'غیرفعال'" />
                     </template>
                 </Column>
 
@@ -316,16 +300,7 @@ const confirmDelete = (r, event) => {
                     <template #body="{ data }">
                         <div class="action-buttons">
                             <Button icon="pi pi-pencil" outlined rounded size="small" v-tooltip.top="'ویرایش دسترسی‌ها'" @click="openEdit(data)" />
-                            <Button
-                                v-if="data.englishName !== 'SuperAdmin'"
-                                icon="pi pi-trash"
-                                outlined
-                                rounded
-                                severity="danger"
-                                size="small"
-                                v-tooltip.top="'حذف نقش'"
-                                @click="confirmDelete(data, $event)"
-                            />
+                            <Button v-if="data.englishName !== 'SuperAdmin'" icon="pi pi-trash" outlined rounded severity="danger" size="small" v-tooltip.top="'حذف نقش'" @click="confirmDelete(data, $event)" />
                         </div>
                     </template>
                 </Column>
@@ -333,13 +308,7 @@ const confirmDelete = (r, event) => {
         </div>
 
         <!-- Create / Edit Dialog -->
-        <Dialog
-            v-model:visible="showDialog"
-            :header="editMode ? 'ویرایش نقش و دسترسی‌ها' : 'افزودن نقش جدید'"
-            :style="{ width: '820px' }"
-            modal
-            dir="rtl"
-        >
+        <Dialog v-model:visible="showDialog" :header="editMode ? 'ویرایش نقش و دسترسی‌ها' : 'افزودن نقش جدید'" :style="{ width: '820px' }" modal dir="rtl">
             <div class="dialog-content">
                 <!-- General Info -->
                 <div class="form-row">
@@ -393,13 +362,7 @@ const confirmDelete = (r, event) => {
                             </div>
 
                             <div class="permissions-grid">
-                                <div
-                                    v-for="p in perms"
-                                    :key="p._id"
-                                    class="permission-item"
-                                    :class="{ 'permission-active': isPermissionSelected(p._id) }"
-                                    @click="togglePermission(p._id)"
-                                >
+                                <div v-for="p in perms" :key="p._id" class="permission-item" :class="{ 'permission-active': isPermissionSelected(p._id) }" @click="togglePermission(p._id)">
                                     <div class="perm-checkbox">
                                         <i v-if="isPermissionSelected(p._id)" class="pi pi-check text-xs"></i>
                                     </div>
@@ -416,12 +379,7 @@ const confirmDelete = (r, event) => {
 
             <template #footer>
                 <Button label="انصراف" icon="pi pi-times" text @click="showDialog = false" />
-                <Button
-                    :label="editMode ? 'ذخیره تغییرات' : 'ایجاد نقش'"
-                    icon="pi pi-check"
-                    :loading="submitting"
-                    @click="submitForm"
-                />
+                <Button :label="editMode ? 'ذخیره تغییرات' : 'ایجاد نقش'" icon="pi pi-check" :loading="submitting" @click="submitForm" />
             </template>
         </Dialog>
     </div>
diff --git a/src/views/pages/Settings/SearchSettings.vue b/src/views/pages/Settings/SearchSettings.vue
index 2d84d38..8e8c8fe 100644
--- a/src/views/pages/Settings/SearchSettings.vue
+++ b/src/views/pages/Settings/SearchSettings.vue
@@ -96,7 +96,8 @@ const handleSeedDatabase = () => {
     if (seedStatus.value.isSeeded) return;
 
     confirm.require({
-        message: 'توجه: این عملیات داده‌های اولیه سیستم (کاربران پیش‌فرض، نقش‌ها، دسته‌بندی‌ها، ویژگی‌های تکمیلی و وضعیت‌های املاک) را در پایگاه داده ایجاد می‌کند. این عملیات فقط یک‌بار قابل اجراست و پس از انجام دکمه برای همیشه قفل خواهد شد. آیا ادامه می‌دهید؟',
+        message:
+            'توجه: این عملیات داده‌های اولیه سیستم (کاربران پیش‌فرض، نقش‌ها، دسته‌بندی‌ها، ویژگی‌های تکمیلی و وضعیت‌های املاک) را در پایگاه داده ایجاد می‌کند. این عملیات فقط یک‌بار قابل اجراست و پس از انجام دکمه برای همیشه قفل خواهد شد. آیا ادامه می‌دهید؟',
         header: 'تایید مقداردهی اولیه پایگاه داده (Seed Database)',
         icon: 'pi pi-exclamation-triangle',
         rejectProps: { label: 'انصراف', severity: 'secondary', outlined: true },
@@ -237,9 +238,7 @@ const navigateToModule = (routePath) => {
                     </div>
                     <div>
                         <h2 class="text-2xl font-bold m-0 text-surface-900 dark:text-surface-0">تنظیمات موتور جستجو</h2>
-                        <p class="text-surface-500 dark:text-surface-400 m-0 mt-1 text-sm">
-                            انتخاب روش جستجو (MongoDB یا Typesense) برای هر بخش از سیستم به صورت مجزا
-                        </p>
+                        <p class="text-surface-500 dark:text-surface-400 m-0 mt-1 text-sm">انتخاب روش جستجو (MongoDB یا Typesense) برای هر بخش از سیستم به صورت مجزا</p>
                     </div>
                 </div>
 
@@ -267,33 +266,15 @@ const navigateToModule = (routePath) => {
                 <div class="flex items-start gap-4">
                     <div
                         class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 transition-colors"
-                        :class="seedStatus.isSeeded
-                            ? 'bg-surface-100 text-surface-500 dark:bg-surface-800 dark:text-surface-400'
-                            : 'bg-indigo-100 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400 shadow-sm'"
+                        :class="seedStatus.isSeeded ? 'bg-surface-100 text-surface-500 dark:bg-surface-800 dark:text-surface-400' : 'bg-indigo-100 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400 shadow-sm'"
                     >
                         <i :class="seedStatus.isSeeded ? 'pi pi-lock' : 'pi pi-database'"></i>
                     </div>
                     <div>
                         <div class="flex items-center gap-2.5 flex-wrap">
-                            <h3 class="text-xl font-bold m-0 text-surface-900 dark:text-surface-0">
-                                مقداردهی اولیه پایگاه داده (Seed Database)
-                            </h3>
-                            <Tag
-                                v-if="seedStatus.isSeeded"
-                                value="مقداردهی شده و قفل است"
-                                severity="success"
-                                icon="pi pi-lock"
-                                rounded
-                                class="px-2.5 text-xs font-bold"
-                            />
-                            <Tag
-                                v-else
-                                value="آماده مقداردهی (یک‌بار مصرف)"
-                                severity="warn"
-                                icon="pi pi-exclamation-circle"
-                                rounded
-                                class="px-2.5 text-xs font-bold"
-                            />
+                            <h3 class="text-xl font-bold m-0 text-surface-900 dark:text-surface-0">مقداردهی اولیه پایگاه داده (Seed Database)</h3>
+                            <Tag v-if="seedStatus.isSeeded" value="مقداردهی شده و قفل است" severity="success" icon="pi pi-lock" rounded class="px-2.5 text-xs font-bold" />
+                            <Tag v-else value="آماده مقداردهی (یک‌بار مصرف)" severity="warn" icon="pi pi-exclamation-circle" rounded class="px-2.5 text-xs font-bold" />
                         </div>
                         <p class="text-surface-500 dark:text-surface-400 m-0 mt-1.5 text-sm leading-relaxed max-w-2xl">
                             ایجاد خودکار کاربران اولیه، نقش‌ها و سطوح دسترسی، دسته‌بندی‌های املاک، ویژگی‌های تکمیلی و وضعیت‌های املاک در دیتابیس. این عملیات صرفاً یک‌بار قابل اجراست و پس از انجام دکمه برای همیشه قفل می‌شود.
@@ -306,25 +287,8 @@ const navigateToModule = (routePath) => {
                 </div>
 
                 <div class="flex items-center gap-3 flex-shrink-0">
-                    <Button
-                        v-if="!seedStatus.isSeeded"
-                        label="اجرای مقداردهی اولیه داده‌ها"
-                        icon="pi pi-database"
-                        severity="primary"
-                        rounded
-                        :loading="isSeeding"
-                        @click="handleSeedDatabase"
-                        class="px-5 font-semibold"
-                    />
-                    <Button
-                        v-else
-                        label="پایگاه داده مقداردهی شده است"
-                        icon="pi pi-lock"
-                        severity="secondary"
-                        rounded
-                        disabled
-                        class="px-5 font-semibold opacity-70 cursor-not-allowed"
-                    />
+                    <Button v-if="!seedStatus.isSeeded" label="اجرای مقداردهی اولیه داده‌ها" icon="pi pi-database" severity="primary" rounded :loading="isSeeding" @click="handleSeedDatabase" class="px-5 font-semibold" />
+                    <Button v-else label="پایگاه داده مقداردهی شده است" icon="pi pi-lock" severity="secondary" rounded disabled class="px-5 font-semibold opacity-70 cursor-not-allowed" />
                 </div>
             </div>
         </div>
@@ -338,15 +302,8 @@ const navigateToModule = (routePath) => {
                     </div>
                     <div>
                         <div class="flex items-center gap-2.5 flex-wrap">
-                            <h3 class="text-xl font-bold m-0 text-surface-900 dark:text-surface-0">
-                                تنظیمات ذخیره خودکار (Auto-Save)
-                            </h3>
-                            <Tag
-                                :value="autoSaveSettings.enabled ? 'فعال' : 'غیرفعال'"
-                                :severity="autoSaveSettings.enabled ? 'success' : 'secondary'"
-                                rounded
-                                class="px-2.5 text-xs font-bold"
-                            />
+                            <h3 class="text-xl font-bold m-0 text-surface-900 dark:text-surface-0">تنظیمات ذخیره خودکار (Auto-Save)</h3>
+                            <Tag :value="autoSaveSettings.enabled ? 'فعال' : 'غیرفعال'" :severity="autoSaveSettings.enabled ? 'success' : 'secondary'" rounded class="px-2.5 text-xs font-bold" />
                         </div>
                         <p class="text-surface-500 dark:text-surface-400 m-0 mt-1.5 text-sm leading-relaxed max-w-2xl">
                             پیکربندی ذخیره پس‌زمینه خودکار فرم‌ها و املاک. در صورت فعال بودن، تغییرات شما بدون نیاز به فشردن دستی دکمه ذخیره، در بازه‌های مشخص ذخیره شده و اعلان آن در گوشه صفحه نمایش داده می‌شود.
@@ -362,26 +319,10 @@ const navigateToModule = (routePath) => {
 
                     <div class="flex items-center gap-2">
                         <span class="text-xs font-medium text-surface-600 dark:text-surface-300">بازه زمانی:</span>
-                        <Dropdown
-                            v-model="autoSaveSettings.intervalSeconds"
-                            :options="autoSaveIntervalOptions"
-                            optionLabel="label"
-                            optionValue="value"
-                            :disabled="!autoSaveSettings.enabled"
-                            class="!rounded-xl text-xs w-44"
-                        />
+                        <Dropdown v-model="autoSaveSettings.intervalSeconds" :options="autoSaveIntervalOptions" optionLabel="label" optionValue="value" :disabled="!autoSaveSettings.enabled" class="!rounded-xl text-xs w-44" />
                     </div>
 
-                    <Button
-                        label="ذخیره تنظیمات"
-                        icon="pi pi-check"
-                        severity="primary"
-                        rounded
-                        size="small"
-                        :loading="autoSaveSaving"
-                        @click="saveAutoSaveSettings"
-                        class="px-4 font-semibold"
-                    />
+                    <Button label="ذخیره تنظیمات" icon="pi pi-check" severity="primary" rounded size="small" :loading="autoSaveSaving" @click="saveAutoSaveSettings" class="px-4 font-semibold" />
                 </div>
             </div>
         </div>
@@ -389,35 +330,11 @@ const navigateToModule = (routePath) => {
         <!-- ── Quick Actions Toolbar ── -->
         <div class="card p-4 mb-6 flex flex-wrap items-center justify-between gap-4">
             <div class="flex flex-wrap items-center gap-3">
-                <Button
-                    label="تنظیم همه روی MongoDB"
-                    icon="pi pi-database"
-                    severity="success"
-                    outlined
-                    size="small"
-                    :disabled="loading || saving"
-                    @click="setAllToMethod('mongo')"
-                />
-                <Button
-                    label="تنظیم همه روی Typesense"
-                    icon="pi pi-bolt"
-                    severity="warn"
-                    outlined
-                    size="small"
-                    :disabled="loading || saving"
-                    @click="setAllToMethod('typesense')"
-                />
+                <Button label="تنظیم همه روی MongoDB" icon="pi pi-database" severity="success" outlined size="small" :disabled="loading || saving" @click="setAllToMethod('mongo')" />
+                <Button label="تنظیم همه روی Typesense" icon="pi pi-bolt" severity="warn" outlined size="small" :disabled="loading || saving" @click="setAllToMethod('typesense')" />
             </div>
             <div class="flex items-center gap-2">
-                <Button
-                    icon="pi pi-refresh"
-                    severity="secondary"
-                    text
-                    rounded
-                    :loading="loading"
-                    v-tooltip.top="'بارگذاری مجدد'"
-                    @click="loadSettings"
-                />
+                <Button icon="pi pi-refresh" severity="secondary" text rounded :loading="loading" v-tooltip.top="'بارگذاری مجدد'" @click="loadSettings" />
             </div>
         </div>
 
@@ -435,11 +352,7 @@ const navigateToModule = (routePath) => {
                 v-for="item in settings"
                 :key="item.pageKey"
                 class="card p-6 rounded-2xl border transition-all duration-200 hover:shadow-md flex flex-col justify-between"
-                :class="[
-                    item.searchMethod === 'mongo'
-                        ? 'border-emerald-200 dark:border-emerald-900 bg-emerald-50/10'
-                        : 'border-amber-200 dark:border-amber-900 bg-amber-50/10'
-                ]"
+                :class="[item.searchMethod === 'mongo' ? 'border-emerald-200 dark:border-emerald-900 bg-emerald-50/10' : 'border-amber-200 dark:border-amber-900 bg-amber-50/10']"
             >
                 <div>
                     <!-- Card Top Header -->
@@ -447,11 +360,7 @@ const navigateToModule = (routePath) => {
                         <div class="flex items-center gap-3">
                             <div
                                 class="w-10 h-10 rounded-xl flex items-center justify-center text-lg"
-                                :class="[
-                                    item.searchMethod === 'mongo'
-                                        ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300'
-                                        : 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300'
-                                ]"
+                                :class="[item.searchMethod === 'mongo' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300' : 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300']"
                             >
                                 <i :class="item.icon || 'pi pi-file'"></i>
                             </div>
@@ -462,11 +371,7 @@ const navigateToModule = (routePath) => {
                         </div>
 
                         <!-- Persistence Badge -->
-                        <Tag
-                            :value="item.isPersisted ? 'ذخیره در دیتابیس' : 'پیش‌فرض'"
-                            :severity="item.isPersisted ? 'success' : 'secondary'"
-                            class="text-xs"
-                        />
+                        <Tag :value="item.isPersisted ? 'ذخیره در دیتابیس' : 'پیش‌فرض'" :severity="item.isPersisted ? 'success' : 'secondary'" class="text-xs" />
                     </div>
 
                     <!-- Description -->
@@ -489,15 +394,7 @@ const navigateToModule = (routePath) => {
                 <div class="pt-4 border-t border-surface-200 dark:border-surface-700 flex flex-wrap items-center justify-between gap-3">
                     <div class="flex items-center gap-2">
                         <span class="text-xs font-semibold text-surface-600 dark:text-surface-400">موتور جستجو:</span>
-                        <SelectButton
-                            :modelValue="item.searchMethod"
-                            :options="methodOptions"
-                            optionLabel="label"
-                            optionValue="value"
-                            :allowEmpty="false"
-                            size="small"
-                            @update:modelValue="(val) => updateMethod(item.pageKey, val)"
-                        >
+                        <SelectButton :modelValue="item.searchMethod" :options="methodOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" @update:modelValue="(val) => updateMethod(item.pageKey, val)">
                             <template #option="slotProps">
                                 <div class="flex items-center gap-1.5 px-1 py-0.5 text-xs font-bold">
                                     <i :class="slotProps.option.icon"></i>
@@ -507,16 +404,7 @@ const navigateToModule = (routePath) => {
                         </SelectButton>
                     </div>
 
-                    <Button
-                        v-if="item.routePath"
-                        label="مشاهده صفحه"
-                        icon="pi pi-arrow-left"
-                        iconPos="right"
-                        size="small"
-                        severity="secondary"
-                        text
-                        @click="navigateToModule(item.routePath)"
-                    />
+                    <Button v-if="item.routePath" label="مشاهده صفحه" icon="pi pi-arrow-left" iconPos="right" size="small" severity="secondary" text @click="navigateToModule(item.routePath)" />
                 </div>
             </div>
         </div>
@@ -533,18 +421,14 @@ const navigateToModule = (routePath) => {
                         <i class="pi pi-bolt"></i>
                         <span>موتور Typesense</span>
                     </div>
-                    <p class="m-0">
-                        موتور جستجوی ایندکس‌شده با سرعت فوق‌العاده بالا، تحمل خطای تایپی (Typo Tolerance) و سیستم Faceting پیشرفته. نیازمند فرآیند ایندکس‌سازی داده‌ها است.
-                    </p>
+                    <p class="m-0">موتور جستجوی ایندکس‌شده با سرعت فوق‌العاده بالا، تحمل خطای تایپی (Typo Tolerance) و سیستم Faceting پیشرفته. نیازمند فرآیند ایندکس‌سازی داده‌ها است.</p>
                 </div>
                 <div class="p-4 rounded-xl bg-surface-0 dark:bg-surface-900 border border-emerald-200 dark:border-emerald-900/50">
                     <div class="font-bold text-emerald-700 dark:text-emerald-400 flex items-center gap-2 mb-1">
                         <i class="pi pi-database"></i>
                         <span>موتور MongoDB</span>
                     </div>
-                    <p class="m-0">
-                        جستجوی زنده مستقیم روی پایگاه داده MongoDB با الگوهای عبارت منظم (Regex) و فیلترهای دقیق. بدون نیاز به ایندکس جداگانه و همیشه هماهنگ با آخرین تغییرات پایگاه داده.
-                    </p>
+                    <p class="m-0">جستجوی زنده مستقیم روی پایگاه داده MongoDB با الگوهای عبارت منظم (Regex) و فیلترهای دقیق. بدون نیاز به ایندکس جداگانه و همیشه هماهنگ با آخرین تغییرات پایگاه داده.</p>
                 </div>
             </div>
         </div>
diff --git a/src/views/pages/Transaction/ListTransactions.vue b/src/views/pages/Transaction/ListTransactions.vue
index 6d8482f..1c1f193 100644
--- a/src/views/pages/Transaction/ListTransactions.vue
+++ b/src/views/pages/Transaction/ListTransactions.vue
@@ -146,8 +146,6 @@ const loadData = async () => {
     }
 };
 
-
-
 const loading = ref(false);
 const indexingFinished = ref(false);
 const indexingMessage = ref('در حال ایندکس...');
@@ -333,7 +331,6 @@ const toggle = (event, data) => {
                     <Chip v-if="searchPhrase" class="mx-2 mt-2" :label="searchPhrase" removable @remove="handleRemoveSearch" />
                 </template>
 
-
                 <Column field="_id" header="شناسه" sortable style="width: 10%"></Column>
                 <Column field="belongingName" header="ملک" sortable style="width: 15%"></Column>
 
diff --git a/src/views/pages/Users/ListUsers.vue b/src/views/pages/Users/ListUsers.vue
index 52ee9a9..7214a3e 100644
--- a/src/views/pages/Users/ListUsers.vue
+++ b/src/views/pages/Users/ListUsers.vue
@@ -247,16 +247,7 @@ const getInitials = (name, email) => {
 
         <!-- Table Card -->
         <div class="card main-card">
-            <DataTable
-                :value="filteredUsers"
-                :loading="loading"
-                dataKey="_id"
-                stripedRows
-                responsiveLayout="scroll"
-                paginator
-                :rows="10"
-                :rowsPerPageOptions="[10, 20, 50]"
-            >
+            <DataTable :value="filteredUsers" :loading="loading" dataKey="_id" stripedRows responsiveLayout="scroll" paginator :rows="10" :rowsPerPageOptions="[10, 20, 50]">
                 <template #header>
                     <div class="table-header">
                         <span class="table-title">لیست کاربران سیستم ({{ filteredUsers.length }})</span>
@@ -282,7 +273,6 @@ const getInitials = (name, email) => {
                     </div>
                 </template>
 
-
                 <!-- User Column -->
                 <Column header="کاربر" style="min-width: 200px">
                     <template #body="{ data }">
@@ -312,12 +302,7 @@ const getInitials = (name, email) => {
                 <!-- Admin Column -->
                 <Column header="دسترسی ادمین" style="width: 120px; text-align: center">
                     <template #body="{ data }">
-                        <Tag
-                            v-if="data.isAdmin || data.role?.englishName === 'SuperAdmin'"
-                            severity="warn"
-                            value="مدیر"
-                            icon="pi pi-star-fill"
-                        />
+                        <Tag v-if="data.isAdmin || data.role?.englishName === 'SuperAdmin'" severity="warn" value="مدیر" icon="pi pi-star-fill" />
                         <span v-else class="text-muted">عادی</span>
                     </template>
                 </Column>
@@ -325,10 +310,7 @@ const getInitials = (name, email) => {
                 <!-- Status Column -->
                 <Column header="وضعیت" style="width: 100px">
                     <template #body="{ data }">
-                        <Tag
-                            :severity="data.isActive !== false ? 'success' : 'danger'"
-                            :value="data.isActive !== false ? 'فعال' : 'غیرفعال'"
-                        />
+                        <Tag :severity="data.isActive !== false ? 'success' : 'danger'" :value="data.isActive !== false ? 'فعال' : 'غیرفعال'" />
                     </template>
                 </Column>
 
@@ -344,15 +326,7 @@ const getInitials = (name, email) => {
                     <template #body="{ data }">
                         <div class="action-buttons">
                             <Button icon="pi pi-pencil" outlined rounded size="small" v-tooltip.top="'ویرایش'" @click="openEdit(data)" />
-                            <Button
-                                icon="pi pi-ban"
-                                outlined
-                                rounded
-                                severity="danger"
-                                size="small"
-                                v-tooltip.top="'غیرفعال‌سازی'"
-                                @click="confirmDelete(data, $event)"
-                            />
+                            <Button icon="pi pi-ban" outlined rounded severity="danger" size="small" v-tooltip.top="'غیرفعال‌سازی'" @click="confirmDelete(data, $event)" />
                         </div>
                     </template>
                 </Column>
@@ -360,13 +334,7 @@ const getInitials = (name, email) => {
         </div>
 
         <!-- Create / Edit Dialog -->
-        <Dialog
-            v-model:visible="showDialog"
-            :header="editMode ? 'ویرایش کاربر' : 'افزودن کاربر جدید'"
-            :style="{ width: '520px' }"
-            modal
-            dir="rtl"
-        >
+        <Dialog v-model:visible="showDialog" :header="editMode ? 'ویرایش کاربر' : 'افزودن کاربر جدید'" :style="{ width: '520px' }" modal dir="rtl">
             <div class="form-grid">
                 <div class="form-field">
                     <label>نام و نام خانوادگی</label>
@@ -384,27 +352,12 @@ const getInitials = (name, email) => {
                         <span v-if="!editMode" class="required">*</span>
                         <span v-else class="text-xs text-muted-color">(در صورت تمایل به تغییر وارد کنید)</span>
                     </label>
-                    <Password
-                        v-model="form.password"
-                        :placeholder="editMode ? 'رمز جدید (اختیاری)' : 'حداقل ۸ کاراکتر'"
-                        :toggleMask="true"
-                        class="w-full"
-                        fluid
-                        :feedback="false"
-                        dir="ltr"
-                    />
+                    <Password v-model="form.password" :placeholder="editMode ? 'رمز جدید (اختیاری)' : 'حداقل ۸ کاراکتر'" :toggleMask="true" class="w-full" fluid :feedback="false" dir="ltr" />
                 </div>
 
                 <div class="form-field">
                     <label>نقش کاربری <span class="required">*</span></label>
-                    <Dropdown
-                        v-model="form.role"
-                        :options="roleOptions"
-                        optionLabel="label"
-                        optionValue="value"
-                        placeholder="انتخاب نقش"
-                        class="w-full"
-                    />
+                    <Dropdown v-model="form.role" :options="roleOptions" optionLabel="label" optionValue="value" placeholder="انتخاب نقش" class="w-full" />
                 </div>
 
                 <div class="checkbox-row">
@@ -422,12 +375,7 @@ const getInitials = (name, email) => {
 
             <template #footer>
                 <Button label="انصراف" icon="pi pi-times" text @click="showDialog = false" />
-                <Button
-                    :label="editMode ? 'ذخیره تغییرات' : 'ایجاد کاربر'"
-                    icon="pi pi-check"
-                    :loading="submitting"
-                    @click="submitForm"
-                />
+                <Button :label="editMode ? 'ذخیره تغییرات' : 'ایجاد کاربر'" icon="pi pi-check" :loading="submitting" @click="submitForm" />
             </template>
         </Dialog>
     </div>
diff --git a/src/views/pages/WarehouseItems/CreateWarehouseTransaction.vue b/src/views/pages/WarehouseItems/CreateWarehouseTransaction.vue
index 65bdda9..70b8e12 100644
--- a/src/views/pages/WarehouseItems/CreateWarehouseTransaction.vue
+++ b/src/views/pages/WarehouseItems/CreateWarehouseTransaction.vue
@@ -20,34 +20,20 @@ const form = ref({
     quantity: null,
     reason: '',
     note: '',
-    date: '',
+    date: ''
 });
 
 // Stock preview for the selected item+warehouse combo
 const stockPreview = ref(null);
 const stockLoading = ref(false);
 
-const IN_REASONS = [
-    'خرید از تامین‌کننده',
-    'برگشت از کارگاه',
-    'انتقال از انبار دیگر',
-    'اهدا / دریافت رایگان',
-    'موجودی اولیه',
-    'سایر',
-];
+const IN_REASONS = ['خرید از تامین‌کننده', 'برگشت از کارگاه', 'انتقال از انبار دیگر', 'اهدا / دریافت رایگان', 'موجودی اولیه', 'سایر'];
 
-const OUT_REASONS = [
-    'مصرف در پروژه',
-    'انتقال به انبار دیگر',
-    'فروش / واگذاری',
-    'ضایعات',
-    'مفقودی',
-    'سایر',
-];
+const OUT_REASONS = ['مصرف در پروژه', 'انتقال به انبار دیگر', 'فروش / واگذاری', 'ضایعات', 'مفقودی', 'سایر'];
 
-const reasons = computed(() => form.value.type === 'IN' ? IN_REASONS : OUT_REASONS);
+const reasons = computed(() => (form.value.type === 'IN' ? IN_REASONS : OUT_REASONS));
 
-const selectedItem = computed(() => items.value.find(i => i._id === form.value.itemId));
+const selectedItem = computed(() => items.value.find((i) => i._id === form.value.itemId));
 
 onMounted(async () => {
     await Promise.all([loadItems(), loadWarehouses()]);
@@ -79,11 +65,11 @@ const onItemOrWarehouseChange = async () => {
     stockLoading.value = true;
     try {
         const data = await WarehouseItemService.getStockByItem(form.value.itemId);
-        const warehouseStock = data.stocks.find(s => s.warehouse?._id === form.value.warehouseId);
+        const warehouseStock = data.stocks.find((s) => s.warehouse?._id === form.value.warehouseId);
         stockPreview.value = {
             quantity: warehouseStock ? warehouseStock.quantity : 0,
             unit: data.unit,
-            unitEn: data.unitEn,
+            unitEn: data.unitEn
         };
     } catch (e) {
         stockPreview.value = null;
@@ -116,14 +102,14 @@ const submitTransaction = async () => {
             quantity: form.value.quantity,
             reason: form.value.reason,
             note: form.value.note,
-            date: form.value.date || undefined,
+            date: form.value.date || undefined
         });
 
         toast.add({
             severity: 'success',
             summary: 'موفق',
             detail: form.value.type === 'IN' ? 'موجودی با موفقیت به انبار افزوده شد' : 'موجودی با موفقیت از انبار کسر شد',
-            life: 4000,
+            life: 4000
         });
 
         // Reset form
@@ -135,7 +121,7 @@ const submitTransaction = async () => {
             severity: 'error',
             summary: 'خطا',
             detail: e.response?.data?.message || 'عملیات ناموفق بود',
-            life: 5000,
+            life: 5000
         });
     } finally {
         submitting.value = false;
@@ -151,7 +137,6 @@ const goToStockView = () => {
 
 <template>
     <div class="create-transaction-page">
-
         <!-- Header -->
         <div class="page-header">
             <div class="header-left">
@@ -164,29 +149,14 @@ const goToStockView = () => {
                 </div>
             </div>
             <div class="header-actions">
-                <Button
-                    icon="pi pi-history"
-                    label="تاریخچه تراکنش‌ها"
-                    severity="secondary"
-                    outlined
-                    @click="router.push('/warehouse-items/transactions')"
-                />
-                <Button
-                    v-if="form.itemId"
-                    icon="pi pi-chart-bar"
-                    label="مشاهده موجودی قلم"
-                    severity="info"
-                    outlined
-                    @click="goToStockView"
-                />
+                <Button icon="pi pi-history" label="تاریخچه تراکنش‌ها" severity="secondary" outlined @click="router.push('/warehouse-items/transactions')" />
+                <Button v-if="form.itemId" icon="pi pi-chart-bar" label="مشاهده موجودی قلم" severity="info" outlined @click="goToStockView" />
             </div>
         </div>
 
         <div class="form-layout">
-
             <!-- Main form card -->
             <div class="card form-card">
-
                 <!-- Type selector -->
                 <div class="type-selector">
                     <button
@@ -194,7 +164,10 @@ const goToStockView = () => {
                         class="type-card"
                         :class="{ active: form.type === 'IN' }"
                         type="button"
-                        @click="form.type = 'IN'; onTypeChange()"
+                        @click="
+                            form.type = 'IN';
+                            onTypeChange();
+                        "
                     >
                         <div class="type-icon in-icon"><i class="pi pi-arrow-down"></i></div>
                         <div class="type-text">
@@ -207,7 +180,10 @@ const goToStockView = () => {
                         class="type-card"
                         :class="{ active: form.type === 'OUT' }"
                         type="button"
-                        @click="form.type = 'OUT'; onTypeChange()"
+                        @click="
+                            form.type = 'OUT';
+                            onTypeChange();
+                        "
                     >
                         <div class="type-icon out-icon"><i class="pi pi-arrow-up"></i></div>
                         <div class="type-text">
@@ -223,18 +199,7 @@ const goToStockView = () => {
                 <div class="fields-grid">
                     <div class="form-field" :class="{ 'field-error': submitted && !form.itemId }">
                         <label for="item-select">قلم انبار <span class="required">*</span></label>
-                        <Select
-                            id="item-select"
-                            v-model="form.itemId"
-                            :options="items"
-                            optionLabel="nameFa"
-                            optionValue="_id"
-                            placeholder="انتخاب قلم..."
-                            class="w-full"
-                            filter
-                            filterPlaceholder="جستجو..."
-                            @change="onItemOrWarehouseChange"
-                        >
+                        <Select id="item-select" v-model="form.itemId" :options="items" optionLabel="nameFa" optionValue="_id" placeholder="انتخاب قلم..." class="w-full" filter filterPlaceholder="جستجو..." @change="onItemOrWarehouseChange">
                             <template #option="{ option }">
                                 <div class="item-option">
                                     <span class="option-fa">{{ option.nameFa }}</span>
@@ -248,16 +213,7 @@ const goToStockView = () => {
 
                     <div class="form-field" :class="{ 'field-error': submitted && !form.warehouseId }">
                         <label for="warehouse-select">انبار <span class="required">*</span></label>
-                        <Select
-                            id="warehouse-select"
-                            v-model="form.warehouseId"
-                            :options="warehouses"
-                            optionLabel="name"
-                            optionValue="_id"
-                            placeholder="انتخاب انبار..."
-                            class="w-full"
-                            @change="onItemOrWarehouseChange"
-                        >
+                        <Select id="warehouse-select" v-model="form.warehouseId" :options="warehouses" optionLabel="name" optionValue="_id" placeholder="انتخاب انبار..." class="w-full" @change="onItemOrWarehouseChange">
                             <template #option="{ option }">
                                 <div class="warehouse-option">
                                     <span>{{ option.name }}</span>
@@ -278,10 +234,8 @@ const goToStockView = () => {
                             <strong>{{ stockPreview.quantity.toLocaleString('fa-IR') }} {{ stockPreview.unit }}</strong>
                             <span class="unit-en-small">({{ stockPreview.unitEn }})</span>
                         </span>
-                        <span v-if="stockPreview.quantity <= 0 && form.type === 'OUT'" class="stock-alert">
-                            <i class="pi pi-exclamation-triangle"></i> موجودی صفر است
-                        </span>
-                        <ProgressSpinner v-if="stockLoading" style="width:20px;height:20px" strokeWidth="5" />
+                        <span v-if="stockPreview.quantity <= 0 && form.type === 'OUT'" class="stock-alert"> <i class="pi pi-exclamation-triangle"></i> موجودی صفر است </span>
+                        <ProgressSpinner v-if="stockLoading" style="width: 20px; height: 20px" strokeWidth="5" />
                     </div>
                 </Transition>
 
@@ -316,21 +270,9 @@ const goToStockView = () => {
                 <div class="form-field" :class="{ 'field-error': submitted && !form.reason }">
                     <label>دلیل تراکنش <span class="required">*</span></label>
                     <div class="reason-chips">
-                        <button
-                            v-for="r in reasons"
-                            :key="r"
-                            class="reason-chip"
-                            :class="{ active: form.reason === r }"
-                            type="button"
-                            @click="form.reason = r"
-                        >{{ r }}</button>
+                        <button v-for="r in reasons" :key="r" class="reason-chip" :class="{ active: form.reason === r }" type="button" @click="form.reason = r">{{ r }}</button>
                     </div>
-                    <InputText
-                        v-model="form.reason"
-                        placeholder="یا دلیل سفارشی وارد کنید..."
-                        class="w-full mt-2"
-                        :class="{ 'p-invalid': submitted && !form.reason }"
-                    />
+                    <InputText v-model="form.reason" placeholder="یا دلیل سفارشی وارد کنید..." class="w-full mt-2" :class="{ 'p-invalid': submitted && !form.reason }" />
                     <small class="error-msg" v-if="submitted && !form.reason">دلیل تراکنش ضروری است</small>
                 </div>
 
@@ -347,7 +289,13 @@ const goToStockView = () => {
                         icon="pi pi-times"
                         severity="secondary"
                         outlined
-                        @click="() => { form = { itemId: '', warehouseId: '', type: 'IN', quantity: null, reason: '', note: '', date: '' }; submitted = false; stockPreview = null; }"
+                        @click="
+                            () => {
+                                form = { itemId: '', warehouseId: '', type: 'IN', quantity: null, reason: '', note: '', date: '' };
+                                submitted = false;
+                                stockPreview = null;
+                            }
+                        "
                     />
                     <Button
                         :label="form.type === 'IN' ? 'ثبت ورود به انبار' : 'ثبت خروج از انبار'"
@@ -387,22 +335,8 @@ const goToStockView = () => {
 
                 <div class="card quick-links-card" v-if="form.itemId">
                     <h4 class="info-title"><i class="pi pi-link"></i> دسترسی سریع</h4>
-                    <Button
-                        icon="pi pi-chart-bar"
-                        label="موجودی این قلم در همه انبارها"
-                        class="w-full mb-2"
-                        severity="info"
-                        outlined
-                        @click="goToStockView"
-                    />
-                    <Button
-                        icon="pi pi-box"
-                        label="لیست همه اقلام"
-                        class="w-full"
-                        severity="secondary"
-                        outlined
-                        @click="router.push('/warehouse-items/list')"
-                    />
+                    <Button icon="pi pi-chart-bar" label="موجودی این قلم در همه انبارها" class="w-full mb-2" severity="info" outlined @click="goToStockView" />
+                    <Button icon="pi pi-box" label="لیست همه اقلام" class="w-full" severity="secondary" outlined @click="router.push('/warehouse-items/list')" />
                 </div>
             </div>
         </div>
@@ -410,31 +344,59 @@ const goToStockView = () => {
 </template>
 
 <style scoped>
-.create-transaction-page { padding: 1.5rem; direction: rtl; }
+.create-transaction-page {
+    padding: 1.5rem;
+    direction: rtl;
+}
 
 /* Header */
 .page-header {
-    display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
-.header-left { display: flex; align-items: center; gap: 1rem; }
 .header-icon {
-    width: 56px; height: 56px; border-radius: 16px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 1.6rem; color: #fff;
+    width: 56px;
+    height: 56px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.6rem;
+    color: #fff;
     transition: all 0.3s;
 }
 .icon-in {
     background: linear-gradient(135deg, #22c55e, #16a34a);
-    box-shadow: 0 4px 15px rgba(34,197,94,0.35);
+    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.35);
 }
 .icon-out {
     background: linear-gradient(135deg, #ef4444, #dc2626);
-    box-shadow: 0 4px 15px rgba(239,68,68,0.35);
+    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
+}
+.page-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+.page-subtitle {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-color-secondary);
+}
+.header-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
 }
-.page-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
-.page-subtitle { margin: 0; font-size: 0.875rem; color: var(--text-color-secondary); }
-.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
 
 /* Layout */
 .form-layout {
@@ -444,14 +406,25 @@ const goToStockView = () => {
     align-items: start;
 }
 @media (max-width: 900px) {
-    .form-layout { grid-template-columns: 1fr; }
+    .form-layout {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* Form card */
-.form-card { border-radius: 16px; display: flex; flex-direction: column; gap: 1.25rem; }
+.form-card {
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
 
 /* Type selector */
-.type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.type-selector {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
 .type-card {
     border: 2px solid var(--surface-border);
     background: var(--surface-50);
@@ -465,52 +438,132 @@ const goToStockView = () => {
     text-align: right;
     color: var(--text-color);
 }
-.type-card:hover { border-color: var(--primary-color); transform: translateY(-1px); }
-.type-card.active { transform: translateY(-2px); box-shadow: 0 6px 20px -5px currentColor; }
-.type-card:nth-child(1).active { border-color: #22c55e; background: rgba(34,197,94,0.07); box-shadow: 0 6px 20px -5px rgba(34,197,94,0.4); }
-.type-card:nth-child(2).active { border-color: #ef4444; background: rgba(239,68,68,0.07); box-shadow: 0 6px 20px -5px rgba(239,68,68,0.4); }
+.type-card:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-1px);
+}
+.type-card.active {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px -5px currentColor;
+}
+.type-card:nth-child(1).active {
+    border-color: #22c55e;
+    background: rgba(34, 197, 94, 0.07);
+    box-shadow: 0 6px 20px -5px rgba(34, 197, 94, 0.4);
+}
+.type-card:nth-child(2).active {
+    border-color: #ef4444;
+    background: rgba(239, 68, 68, 0.07);
+    box-shadow: 0 6px 20px -5px rgba(239, 68, 68, 0.4);
+}
 
 .type-icon {
-    width: 44px; height: 44px; border-radius: 12px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 1.3rem; color: #fff; flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+    color: #fff;
+    flex-shrink: 0;
+}
+.in-icon {
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+}
+.out-icon {
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+.type-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.type-label {
+    font-weight: 700;
+    font-size: 1rem;
+}
+.type-desc {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
 }
-.in-icon { background: linear-gradient(135deg, #22c55e, #16a34a); }
-.out-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
-.type-text { display: flex; flex-direction: column; gap: 2px; }
-.type-label { font-weight: 700; font-size: 1rem; }
-.type-desc { font-size: 0.8rem; color: var(--text-color-secondary); }
 
 /* Fields */
-.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-@media (max-width: 600px) { .fields-grid { grid-template-columns: 1fr; } }
-.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
-.form-field label { font-weight: 600; font-size: 0.9rem; }
-.required { color: #ef4444; }
-.optional { font-size: 0.75rem; color: var(--text-color-secondary); font-weight: 400; }
-.unit-hint { font-size: 0.8rem; color: #6366f1; font-weight: 600; margin-right: 0.25rem; }
-.error-msg { color: #ef4444; font-size: 0.8rem; }
-.field-error label { color: #ef4444; }
+.fields-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+@media (max-width: 600px) {
+    .fields-grid {
+        grid-template-columns: 1fr;
+    }
+}
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+.form-field label {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+.required {
+    color: #ef4444;
+}
+.optional {
+    font-size: 0.75rem;
+    color: var(--text-color-secondary);
+    font-weight: 400;
+}
+.unit-hint {
+    font-size: 0.8rem;
+    color: #6366f1;
+    font-weight: 600;
+    margin-right: 0.25rem;
+}
+.error-msg {
+    color: #ef4444;
+    font-size: 0.8rem;
+}
+.field-error label {
+    color: #ef4444;
+}
 
 /* Stock preview */
 .stock-preview {
-    display: flex; align-items: center; gap: 0.75rem;
-    background: rgba(99,102,241,0.08);
-    border: 1px solid rgba(99,102,241,0.25);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: rgba(99, 102, 241, 0.08);
+    border: 1px solid rgba(99, 102, 241, 0.25);
     border-radius: 10px;
     padding: 0.75rem 1rem;
     font-size: 0.9rem;
 }
 .stock-preview.stock-zero {
-    background: rgba(239,68,68,0.08);
-    border-color: rgba(239,68,68,0.3);
+    background: rgba(239, 68, 68, 0.08);
+    border-color: rgba(239, 68, 68, 0.3);
     color: #dc2626;
 }
-.stock-alert { margin-right: auto; font-size: 0.8rem; font-weight: 600; color: #ef4444; }
-.unit-en-small { font-size: 0.8rem; color: var(--text-color-secondary); margin-right: 0.25rem; }
+.stock-alert {
+    margin-right: auto;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #ef4444;
+}
+.unit-en-small {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
+    margin-right: 0.25rem;
+}
 
 /* Reason chips */
-.reason-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.reason-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
 .reason-chip {
     border: 1.5px solid var(--surface-border);
     background: var(--surface-50);
@@ -521,9 +574,12 @@ const goToStockView = () => {
     transition: all 0.2s;
     color: var(--text-color);
 }
-.reason-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
+.reason-chip:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
 .reason-chip.active {
-    background: rgba(99,102,241,0.1);
+    background: rgba(99, 102, 241, 0.1);
     border-color: #6366f1;
     color: #6366f1;
     font-weight: 600;
@@ -531,42 +587,100 @@ const goToStockView = () => {
 
 /* Submit row */
 .submit-row {
-    display: flex; justify-content: space-between; align-items: center;
-    padding-top: 0.5rem; gap: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 0.5rem;
+    gap: 1rem;
+}
+.submit-btn {
+    flex: 0 0 auto;
 }
-.submit-btn { flex: 0 0 auto; }
 
 /* Dropdown option templates */
-.item-option { display: flex; align-items: center; gap: 0.5rem; }
-.option-fa { font-weight: 600; }
-.option-en { font-size: 0.8rem; color: var(--text-color-secondary); direction: ltr; }
+.item-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.option-fa {
+    font-weight: 600;
+}
+.option-en {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
+    direction: ltr;
+}
 .option-unit {
     margin-right: auto;
     font-size: 0.75rem;
-    background: rgba(99,102,241,0.1);
+    background: rgba(99, 102, 241, 0.1);
     color: #6366f1;
     padding: 2px 8px;
     border-radius: 10px;
 }
-.warehouse-option { display: flex; flex-direction: column; }
-.option-addr { font-size: 0.75rem; color: var(--text-color-secondary); }
+.warehouse-option {
+    display: flex;
+    flex-direction: column;
+}
+.option-addr {
+    font-size: 0.75rem;
+    color: var(--text-color-secondary);
+}
 
 /* Side panel */
-.side-panel { display: flex; flex-direction: column; gap: 1rem; }
-.info-card, .quick-links-card { border-radius: 14px; }
+.side-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.info-card,
+.quick-links-card {
+    border-radius: 14px;
+}
 .info-title {
     margin: 0 0 1rem 0;
     font-size: 0.95rem;
     font-weight: 700;
-    display: flex; align-items: center; gap: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.info-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+.info-list li {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6rem;
+    font-size: 0.85rem;
+    line-height: 1.5;
+}
+.in-dot {
+    color: #22c55e;
+    margin-top: 2px;
+}
+.out-dot {
+    color: #ef4444;
+    margin-top: 2px;
 }
-.info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
-.info-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; line-height: 1.5; }
-.in-dot { color: #22c55e; margin-top: 2px; }
-.out-dot { color: #ef4444; margin-top: 2px; }
 
 /* Transition */
-.fade-enter-active, .fade-leave-active { transition: all 0.25s ease; }
-.fade-enter-from { opacity: 0; transform: translateY(-6px); }
-.fade-leave-to { opacity: 0; transform: translateY(-6px); }
+.fade-enter-active,
+.fade-leave-active {
+    transition: all 0.25s ease;
+}
+.fade-enter-from {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+.fade-leave-to {
+    opacity: 0;
+    transform: translateY(-6px);
+}
 </style>
diff --git a/src/views/pages/WarehouseItems/ListWarehouseItemTransactions.vue b/src/views/pages/WarehouseItems/ListWarehouseItemTransactions.vue
index 17846e2..c00fbd6 100644
--- a/src/views/pages/WarehouseItems/ListWarehouseItemTransactions.vue
+++ b/src/views/pages/WarehouseItems/ListWarehouseItemTransactions.vue
@@ -22,7 +22,7 @@ const filters = ref({
     warehouseId: '',
     type: '',
     dateFrom: '',
-    dateTo: '',
+    dateTo: ''
 });
 
 const items = ref([]);
@@ -30,7 +30,7 @@ const warehouses = ref([]);
 
 const typeOptions = [
     { label: 'ورود', value: 'IN' },
-    { label: 'خروج', value: 'OUT' },
+    { label: 'خروج', value: 'OUT' }
 ];
 
 onMounted(async () => {
@@ -39,10 +39,7 @@ onMounted(async () => {
 
 const loadLookups = async () => {
     try {
-        const [wi, wh] = await Promise.all([
-            WarehouseItemService.listItems({ limit: 200 }),
-            WarehouseService.listWarehouses(),
-        ]);
+        const [wi, wh] = await Promise.all([WarehouseItemService.listItems({ limit: 200 }), WarehouseService.listWarehouses()]);
         items.value = wi.items || [];
         warehouses.value = wh;
     } catch (e) {
@@ -55,7 +52,7 @@ const loadData = async () => {
     try {
         const params = {
             page: page.value,
-            limit: perPage.value,
+            limit: perPage.value
         };
         if (filters.value.itemId) params.itemId = filters.value.itemId;
         if (filters.value.warehouseId) params.warehouseId = filters.value.warehouseId;
@@ -93,14 +90,17 @@ const onPageChange = (event) => {
 const formatDate = (d) => {
     if (!d) return '—';
     return new Intl.DateTimeFormat('fa-IR', {
-        year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
     }).format(new Date(d));
 };
 </script>
 
 <template>
     <div class="transactions-page">
-
         <!-- Header -->
         <div class="page-header">
             <div class="header-content">
@@ -123,39 +123,15 @@ const formatDate = (d) => {
             <div class="filters-grid">
                 <div class="filter-field">
                     <label>قلم انبار</label>
-                    <Select
-                        v-model="filters.itemId"
-                        :options="items"
-                        optionLabel="nameFa"
-                        optionValue="_id"
-                        placeholder="همه اقلام"
-                        showClear
-                        class="w-full"
-                    />
+                    <Select v-model="filters.itemId" :options="items" optionLabel="nameFa" optionValue="_id" placeholder="همه اقلام" showClear class="w-full" />
                 </div>
                 <div class="filter-field">
                     <label>انبار</label>
-                    <Select
-                        v-model="filters.warehouseId"
-                        :options="warehouses"
-                        optionLabel="name"
-                        optionValue="_id"
-                        placeholder="همه انبارها"
-                        showClear
-                        class="w-full"
-                    />
+                    <Select v-model="filters.warehouseId" :options="warehouses" optionLabel="name" optionValue="_id" placeholder="همه انبارها" showClear class="w-full" />
                 </div>
                 <div class="filter-field">
                     <label>نوع تراکنش</label>
-                    <Select
-                        v-model="filters.type"
-                        :options="typeOptions"
-                        optionLabel="label"
-                        optionValue="value"
-                        placeholder="همه"
-                        showClear
-                        class="w-full"
-                    />
+                    <Select v-model="filters.type" :options="typeOptions" optionLabel="label" optionValue="value" placeholder="همه" showClear class="w-full" />
                 </div>
                 <div class="filter-field">
                     <label>از تاریخ</label>
@@ -211,18 +187,13 @@ const formatDate = (d) => {
                     </div>
                 </template>
 
-
-                <Column header="نوع" style="width:7%">
+                <Column header="نوع" style="width: 7%">
                     <template #body="{ data }">
-                        <Tag
-                            :severity="data.type === 'IN' ? 'success' : 'danger'"
-                            :value="data.type === 'IN' ? 'ورود' : 'خروج'"
-                            class="type-tag"
-                        />
+                        <Tag :severity="data.type === 'IN' ? 'success' : 'danger'" :value="data.type === 'IN' ? 'ورود' : 'خروج'" class="type-tag" />
                     </template>
                 </Column>
 
-                <Column header="قلم انبار" style="width:16%">
+                <Column header="قلم انبار" style="width: 16%">
                     <template #body="{ data }">
                         <div class="item-cell">
                             <span class="item-name-fa">{{ data.item?.nameFa || '—' }}</span>
@@ -231,7 +202,7 @@ const formatDate = (d) => {
                     </template>
                 </Column>
 
-                <Column header="مقدار" style="width:12%">
+                <Column header="مقدار" style="width: 12%">
                     <template #body="{ data }">
                         <span class="qty-display" :class="data.type === 'IN' ? 'qty-in' : 'qty-out'">
                             {{ data.type === 'OUT' ? '−' : '+' }}{{ data.quantity.toLocaleString('fa-IR') }}
@@ -240,16 +211,16 @@ const formatDate = (d) => {
                     </template>
                 </Column>
 
-                <Column header="انبار" style="width:13%">
+                <Column header="انبار" style="width: 13%">
                     <template #body="{ data }">
                         <div class="warehouse-cell">
-                            <i class="pi pi-map-marker" style="font-size:0.75rem; opacity:0.5;"></i>
+                            <i class="pi pi-map-marker" style="font-size: 0.75rem; opacity: 0.5"></i>
                             {{ data.warehouse?.name || '—' }}
                         </div>
                     </template>
                 </Column>
 
-                <Column header="دلیل" style="width:18%">
+                <Column header="دلیل" style="width: 18%">
                     <template #body="{ data }">
                         <div>
                             <span class="reason-text">{{ data.reason }}</span>
@@ -258,32 +229,24 @@ const formatDate = (d) => {
                     </template>
                 </Column>
 
-                <Column header="کاربر" style="width:12%">
+                <Column header="کاربر" style="width: 12%">
                     <template #body="{ data }">
                         <div class="actor-cell">
-                            <i class="pi pi-user" style="font-size:0.75rem; opacity:0.5;"></i>
+                            <i class="pi pi-user" style="font-size: 0.75rem; opacity: 0.5"></i>
                             {{ data.actorName || data.actor?.name || '—' }}
                         </div>
                     </template>
                 </Column>
 
-                <Column header="تاریخ" style="width:14%">
+                <Column header="تاریخ" style="width: 14%">
                     <template #body="{ data }">
                         <span class="date-text">{{ formatDate(data.date || data.createdAt) }}</span>
                     </template>
                 </Column>
 
-                <Column style="width:8%">
+                <Column style="width: 8%">
                     <template #body="{ data }">
-                        <Button
-                            icon="pi pi-eye"
-                            text
-                            rounded
-                            severity="secondary"
-                            size="small"
-                            v-tooltip.top="'مشاهده موجودی قلم'"
-                            @click="router.push(`/warehouse-items/stock/${data.item?._id}`)"
-                        />
+                        <Button icon="pi pi-eye" text rounded severity="secondary" size="small" v-tooltip.top="'مشاهده موجودی قلم'" @click="router.push(`/warehouse-items/stock/${data.item?._id}`)" />
                     </template>
                 </Column>
             </DataTable>
@@ -292,38 +255,83 @@ const formatDate = (d) => {
 </template>
 
 <style scoped>
-.transactions-page { padding: 1.5rem; direction: rtl; }
+.transactions-page {
+    padding: 1.5rem;
+    direction: rtl;
+}
 
 /* Header */
-.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
-.header-content { display: flex; align-items: center; gap: 1rem; }
+.page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+}
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
 .header-icon {
-    width: 52px; height: 52px;
+    width: 52px;
+    height: 52px;
     border-radius: 14px;
     background: linear-gradient(135deg, #0ea5e9, #6366f1);
-    display: flex; align-items: center; justify-content: center;
-    font-size: 1.5rem; color: #fff;
-    box-shadow: 0 4px 15px rgba(14,165,233,0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: #fff;
+    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
+}
+.page-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+.page-subtitle {
+    margin: 0;
+    color: var(--text-color-secondary);
+    font-size: 0.875rem;
 }
-.page-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
-.page-subtitle { margin: 0; color: var(--text-color-secondary); font-size: 0.875rem; }
 
 /* Filters */
-.filters-card { border-radius: 16px; margin-bottom: 1.25rem; }
+.filters-card {
+    border-radius: 16px;
+    margin-bottom: 1.25rem;
+}
 .filters-header {
-    display: flex; justify-content: space-between; align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 1rem;
 }
-.filters-title { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
+.filters-title {
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
 .filters-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 1rem;
     align-items: end;
 }
-.filter-field { display: flex; flex-direction: column; gap: 0.4rem; }
-.filter-field label { font-size: 0.85rem; font-weight: 600; color: var(--text-color-secondary); }
-.filter-action { display: flex; align-items: flex-end; }
+.filter-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+.filter-field label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-color-secondary);
+}
+.filter-action {
+    display: flex;
+    align-items: flex-end;
+}
 .apply-btn {
     background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
     border: none !important;
@@ -331,32 +339,89 @@ const formatDate = (d) => {
 }
 
 /* Table */
-.main-card { border-radius: 16px; }
-.table-title { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
+.main-card {
+    border-radius: 16px;
+}
+.table-title {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-weight: 600;
+}
 
 .empty-state {
-    text-align: center; padding: 3rem;
+    text-align: center;
+    padding: 3rem;
     color: var(--text-color-secondary);
 }
-.empty-state i { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; opacity: 0.3; }
+.empty-state i {
+    font-size: 2.5rem;
+    display: block;
+    margin-bottom: 0.75rem;
+    opacity: 0.3;
+}
 
 /* Cells */
-.type-tag { font-weight: 700; }
+.type-tag {
+    font-weight: 700;
+}
 
-.item-cell { display: flex; flex-direction: column; }
-.item-name-fa { font-weight: 600; font-size: 0.9rem; }
-.item-name-en { font-size: 0.75rem; color: var(--text-color-secondary); direction: ltr; display: inline-block; }
+.item-cell {
+    display: flex;
+    flex-direction: column;
+}
+.item-name-fa {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+.item-name-en {
+    font-size: 0.75rem;
+    color: var(--text-color-secondary);
+    direction: ltr;
+    display: inline-block;
+}
 
-.qty-display { font-weight: 700; font-size: 1rem; }
-.qty-in { color: #16a34a; }
-.qty-out { color: #dc2626; }
-.qty-display small { font-size: 0.75rem; font-weight: 400; margin-right: 0.25rem; color: var(--text-color-secondary); }
+.qty-display {
+    font-weight: 700;
+    font-size: 1rem;
+}
+.qty-in {
+    color: #16a34a;
+}
+.qty-out {
+    color: #dc2626;
+}
+.qty-display small {
+    font-size: 0.75rem;
+    font-weight: 400;
+    margin-right: 0.25rem;
+    color: var(--text-color-secondary);
+}
 
-.warehouse-cell { display: flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; }
-.actor-cell { display: flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; }
+.warehouse-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.875rem;
+}
+.actor-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.875rem;
+}
 
-.reason-text { font-size: 0.875rem; }
-.note-text { font-size: 0.775rem; color: var(--text-color-secondary); margin-top: 2px; }
+.reason-text {
+    font-size: 0.875rem;
+}
+.note-text {
+    font-size: 0.775rem;
+    color: var(--text-color-secondary);
+    margin-top: 2px;
+}
 
-.date-text { font-size: 0.8rem; color: var(--text-color-secondary); }
+.date-text {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
+}
 </style>
diff --git a/src/views/pages/WarehouseItems/ListWarehouseItems.vue b/src/views/pages/WarehouseItems/ListWarehouseItems.vue
index 536cb3e..068711b 100644
--- a/src/views/pages/WarehouseItems/ListWarehouseItems.vue
+++ b/src/views/pages/WarehouseItems/ListWarehouseItems.vue
@@ -18,7 +18,6 @@ const perPage = ref(Number(route.query.per_page) || 20);
 const searchPhrase = ref(route.query.search || '');
 const loading = ref(true);
 
-
 // Create/Edit dialog
 const showDialog = ref(false);
 const editMode = ref(false);
@@ -48,7 +47,7 @@ const UNITS = [
     { fa: 'رول', en: 'Roll' },
     { fa: 'جعبه', en: 'Box' },
     { fa: 'کیسه', en: 'Bag' },
-    { fa: 'پالت', en: 'Pallet' },
+    { fa: 'پالت', en: 'Pallet' }
 ];
 
 let searchTimeout = null;
@@ -64,12 +63,16 @@ watch(searchPhrase, (val) => {
     }, 400);
 });
 
-watch(() => route.query, () => {
-    page.value = Number(route.query.page) || 1;
-    perPage.value = Number(route.query.per_page) || 20;
-    searchPhrase.value = route.query.search || '';
-    loadData();
-}, { deep: true });
+watch(
+    () => route.query,
+    () => {
+        page.value = Number(route.query.page) || 1;
+        perPage.value = Number(route.query.per_page) || 20;
+        searchPhrase.value = route.query.search || '';
+        loadData();
+    },
+    { deep: true }
+);
 
 const loadData = async () => {
     loading.value = true;
@@ -169,7 +172,6 @@ const viewStock = (itemId) => {
 <template>
     <ConfirmPopup />
     <div class="warehouse-items-page">
-
         <!-- ─── Header ─────────────────────────────────────────────────── -->
         <div class="page-header">
             <div class="header-content">
@@ -182,12 +184,7 @@ const viewStock = (itemId) => {
                 </div>
             </div>
             <div class="header-actions">
-                <Button
-                    label="افزودن قلم جدید"
-                    icon="pi pi-plus"
-                    class="create-btn"
-                    @click="openCreateDialog"
-                />
+                <Button label="افزودن قلم جدید" icon="pi pi-plus" class="create-btn" @click="openCreateDialog" />
             </div>
         </div>
 
@@ -233,15 +230,14 @@ const viewStock = (itemId) => {
                     </div>
                 </template>
 
-
-                <Column field="code" header="کد" style="width:8%">
+                <Column field="code" header="کد" style="width: 8%">
                     <template #body="{ data }">
                         <span class="code-badge" v-if="data.code">{{ data.code }}</span>
                         <span class="text-muted" v-else>—</span>
                     </template>
                 </Column>
 
-                <Column field="nameFa" header="نام فارسی" sortable style="width:18%">
+                <Column field="nameFa" header="نام فارسی" sortable style="width: 18%">
                     <template #body="{ data }">
                         <div class="item-name">
                             <span class="name-fa">{{ data.nameFa }}</span>
@@ -249,58 +245,37 @@ const viewStock = (itemId) => {
                     </template>
                 </Column>
 
-                <Column field="nameEn" header="نام انگلیسی" sortable style="width:18%">
+                <Column field="nameEn" header="نام انگلیسی" sortable style="width: 18%">
                     <template #body="{ data }">
                         <span class="name-en">{{ data.nameEn }}</span>
                     </template>
                 </Column>
 
-                <Column header="واحد" style="width:12%">
+                <Column header="واحد" style="width: 12%">
                     <template #body="{ data }">
                         <span class="unit-badge">{{ data.unitFa }} / {{ data.unitEn }}</span>
                     </template>
                 </Column>
 
-                <Column field="category" header="دسته‌بندی" style="width:14%">
+                <Column field="category" header="دسته‌بندی" style="width: 14%">
                     <template #body="{ data }">
                         <span v-if="data.category" class="category-chip">{{ data.category }}</span>
                         <span v-else class="text-muted">—</span>
                     </template>
                 </Column>
 
-                <Column field="isActive" header="وضعیت" style="width:9%">
+                <Column field="isActive" header="وضعیت" style="width: 9%">
                     <template #body="{ data }">
-                        <Tag :severity="data.isActive ? 'success' : 'danger'"
-                             :value="data.isActive ? 'فعال' : 'غیرفعال'" />
+                        <Tag :severity="data.isActive ? 'success' : 'danger'" :value="data.isActive ? 'فعال' : 'غیرفعال'" />
                     </template>
                 </Column>
 
-                <Column header="عملیات" style="width:21%">
+                <Column header="عملیات" style="width: 21%">
                     <template #body="{ data }">
                         <div class="action-buttons">
-                            <Button
-                                icon="pi pi-chart-bar"
-                                outlined
-                                rounded
-                                severity="info"
-                                v-tooltip.top="'مشاهده موجودی'"
-                                @click="viewStock(data._id)"
-                            />
-                            <Button
-                                icon="pi pi-pencil"
-                                outlined
-                                rounded
-                                v-tooltip.top="'ویرایش'"
-                                @click="openEditDialog(data)"
-                            />
-                            <Button
-                                icon="pi pi-ban"
-                                outlined
-                                rounded
-                                severity="danger"
-                                v-tooltip.top="'غیرفعال‌سازی'"
-                                @click="confirmDelete(data, $event)"
-                            />
+                            <Button icon="pi pi-chart-bar" outlined rounded severity="info" v-tooltip.top="'مشاهده موجودی'" @click="viewStock(data._id)" />
+                            <Button icon="pi pi-pencil" outlined rounded v-tooltip.top="'ویرایش'" @click="openEditDialog(data)" />
+                            <Button icon="pi pi-ban" outlined rounded severity="danger" v-tooltip.top="'غیرفعال‌سازی'" @click="confirmDelete(data, $event)" />
                         </div>
                     </template>
                 </Column>
@@ -308,13 +283,7 @@ const viewStock = (itemId) => {
         </div>
 
         <!-- ─── Create/Edit Dialog ──────────────────────────────────────── -->
-        <Dialog
-            v-model:visible="showDialog"
-            :header="editMode ? 'ویرایش قلم انبار' : 'افزودن قلم جدید'"
-            :style="{ width: '580px' }"
-            modal
-            :dir="'rtl'"
-        >
+        <Dialog v-model:visible="showDialog" :header="editMode ? 'ویرایش قلم انبار' : 'افزودن قلم جدید'" :style="{ width: '580px' }" modal :dir="'rtl'">
             <div class="form-grid">
                 <div class="form-row">
                     <div class="form-field">
@@ -342,14 +311,7 @@ const viewStock = (itemId) => {
                 <div class="form-field full-width">
                     <label>واحد شمارش <span class="required">*</span></label>
                     <div class="unit-picker">
-                        <button
-                            v-for="u in UNITS"
-                            :key="u.en"
-                            class="unit-chip"
-                            :class="{ active: form.unitFa === u.fa }"
-                            type="button"
-                            @click="onUnitSelect(u)"
-                        >
+                        <button v-for="u in UNITS" :key="u.en" class="unit-chip" :class="{ active: form.unitFa === u.fa }" type="button" @click="onUnitSelect(u)">
                             {{ u.fa }}
                             <span class="unit-en">{{ u.en }}</span>
                         </button>
@@ -368,12 +330,7 @@ const viewStock = (itemId) => {
 
             <template #footer>
                 <Button label="انصراف" icon="pi pi-times" text @click="showDialog = false" />
-                <Button
-                    :label="editMode ? 'ذخیره تغییرات' : 'ایجاد قلم'"
-                    icon="pi pi-check"
-                    :loading="submitting"
-                    @click="submitForm"
-                />
+                <Button :label="editMode ? 'ذخیره تغییرات' : 'ایجاد قلم'" icon="pi pi-check" :loading="submitting" @click="submitForm" />
             </template>
         </Dialog>
     </div>
@@ -443,7 +400,9 @@ const viewStock = (itemId) => {
     font-size: 1rem;
     font-weight: 600;
 }
-.search-input { width: 260px; }
+.search-input {
+    width: 260px;
+}
 
 /* Empty state */
 .empty-state {
@@ -467,7 +426,9 @@ const viewStock = (itemId) => {
     font-size: 0.8rem;
     font-weight: 600;
 }
-.name-fa { font-weight: 600; }
+.name-fa {
+    font-weight: 600;
+}
 .name-en {
     color: var(--text-color-secondary);
     font-size: 0.875rem;
@@ -475,7 +436,7 @@ const viewStock = (itemId) => {
     display: inline-block;
 }
 .unit-badge {
-    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
     color: #6366f1;
     padding: 3px 10px;
     border-radius: 20px;
@@ -488,7 +449,10 @@ const viewStock = (itemId) => {
     border-radius: 20px;
     font-size: 0.8rem;
 }
-.text-muted { color: var(--text-color-secondary); opacity: 0.5; }
+.text-muted {
+    color: var(--text-color-secondary);
+    opacity: 0.5;
+}
 
 /* Actions */
 .action-buttons {
@@ -498,12 +462,31 @@ const viewStock = (itemId) => {
 }
 
 /* Form */
-.form-grid { display: flex; flex-direction: column; gap: 1rem; }
-.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
-.form-field.full-width { grid-column: span 2; }
-.form-field label { font-weight: 600; font-size: 0.9rem; }
-.required { color: #ef4444; }
+.form-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+.form-field.full-width {
+    grid-column: span 2;
+}
+.form-field label {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+.required {
+    color: #ef4444;
+}
 
 /* Unit picker */
 .unit-picker {
@@ -526,10 +509,14 @@ const viewStock = (itemId) => {
     transition: all 0.2s;
     color: var(--text-color);
 }
-.unit-chip:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.06); }
+.unit-chip:hover {
+    border-color: #6366f1;
+    color: #6366f1;
+    background: rgba(99, 102, 241, 0.06);
+}
 .unit-chip.active {
     border-color: #6366f1;
-    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
     color: #6366f1;
 }
 .unit-en {
diff --git a/src/views/pages/WarehouseItems/ListWarehouses.vue b/src/views/pages/WarehouseItems/ListWarehouses.vue
index 278158b..d88d469 100644
--- a/src/views/pages/WarehouseItems/ListWarehouses.vue
+++ b/src/views/pages/WarehouseItems/ListWarehouses.vue
@@ -21,7 +21,7 @@ const form = ref({
     name: '',
     code: '',
     description: '',
-    location: { address: '' },
+    location: { address: '' }
 });
 
 onMounted(() => loadData());
@@ -53,7 +53,7 @@ const openEdit = (wh) => {
         name: wh.name,
         code: wh.code || '',
         description: wh.description || '',
-        location: { address: wh.location?.address || '' },
+        location: { address: wh.location?.address || '' }
     };
     showDialog.value = true;
 };
@@ -110,7 +110,6 @@ const onSearch = () => {
 <template>
     <ConfirmPopup />
     <div class="warehouses-page">
-
         <!-- Header -->
         <div class="page-header">
             <div class="header-content">
@@ -127,13 +126,7 @@ const onSearch = () => {
 
         <!-- Table -->
         <div class="card main-card">
-            <DataTable
-                :value="warehouses"
-                :loading="loading"
-                dataKey="_id"
-                stripedRows
-                responsiveLayout="scroll"
-            >
+            <DataTable :value="warehouses" :loading="loading" dataKey="_id" stripedRows responsiveLayout="scroll">
                 <template #header>
                     <div class="table-header">
                         <span class="table-title">لیست انبارها ({{ warehouses.length }})</span>
@@ -159,46 +152,44 @@ const onSearch = () => {
                     </div>
                 </template>
 
-
-                <Column field="code" header="کد" style="width:8%">
+                <Column field="code" header="کد" style="width: 8%">
                     <template #body="{ data }">
                         <span v-if="data.code" class="code-badge">{{ data.code }}</span>
                         <span v-else class="text-muted">—</span>
                     </template>
                 </Column>
 
-                <Column field="name" header="نام انبار" sortable style="width:20%">
+                <Column field="name" header="نام انبار" sortable style="width: 20%">
                     <template #body="{ data }">
                         <span class="warehouse-name">{{ data.name }}</span>
                     </template>
                 </Column>
 
-                <Column header="آدرس" style="width:28%">
+                <Column header="آدرس" style="width: 28%">
                     <template #body="{ data }">
                         <span class="address-text">{{ data.location?.address || '—' }}</span>
                     </template>
                 </Column>
 
-                <Column header="مدیر انبار" style="width:16%">
+                <Column header="مدیر انبار" style="width: 16%">
                     <template #body="{ data }">
                         {{ data.manager?.name || '—' }}
                     </template>
                 </Column>
 
-                <Column field="isActive" header="وضعیت" style="width:9%">
+                <Column field="isActive" header="وضعیت" style="width: 9%">
                     <template #body="{ data }">
-                        <Tag :severity="data.isActive ? 'success' : 'danger'"
-                             :value="data.isActive ? 'فعال' : 'غیرفعال'" />
+                        <Tag :severity="data.isActive ? 'success' : 'danger'" :value="data.isActive ? 'فعال' : 'غیرفعال'" />
                     </template>
                 </Column>
 
-                <Column header="توضیحات" style="width:12%">
+                <Column header="توضیحات" style="width: 12%">
                     <template #body="{ data }">
                         <span class="desc-text">{{ data.description || '—' }}</span>
                     </template>
                 </Column>
 
-                <Column header="عملیات" style="width:7%">
+                <Column header="عملیات" style="width: 7%">
                     <template #body="{ data }">
                         <div class="action-buttons">
                             <Button icon="pi pi-pencil" outlined rounded size="small" v-tooltip.top="'ویرایش'" @click="openEdit(data)" />
@@ -210,13 +201,7 @@ const onSearch = () => {
         </div>
 
         <!-- Dialog -->
-        <Dialog
-            v-model:visible="showDialog"
-            :header="editMode ? 'ویرایش انبار' : 'افزودن انبار جدید'"
-            :style="{ width: '480px' }"
-            modal
-            dir="rtl"
-        >
+        <Dialog v-model:visible="showDialog" :header="editMode ? 'ویرایش انبار' : 'افزودن انبار جدید'" :style="{ width: '480px' }" modal dir="rtl">
             <div class="form-grid">
                 <div class="form-row">
                     <div class="form-field">
@@ -240,32 +225,51 @@ const onSearch = () => {
 
             <template #footer>
                 <Button label="انصراف" icon="pi pi-times" text @click="showDialog = false" />
-                <Button
-                    :label="editMode ? 'ذخیره تغییرات' : 'ایجاد انبار'"
-                    icon="pi pi-check"
-                    :loading="submitting"
-                    @click="submitForm"
-                />
+                <Button :label="editMode ? 'ذخیره تغییرات' : 'ایجاد انبار'" icon="pi pi-check" :loading="submitting" @click="submitForm" />
             </template>
         </Dialog>
     </div>
 </template>
 
 <style scoped>
-.warehouses-page { padding: 1.5rem; direction: rtl; }
+.warehouses-page {
+    padding: 1.5rem;
+    direction: rtl;
+}
 
-.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
-.header-content { display: flex; align-items: center; gap: 1rem; }
+.page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+}
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
 .header-icon {
-    width: 52px; height: 52px;
+    width: 52px;
+    height: 52px;
     border-radius: 14px;
     background: linear-gradient(135deg, #0891b2, #0ea5e9);
-    display: flex; align-items: center; justify-content: center;
-    font-size: 1.5rem; color: #fff;
-    box-shadow: 0 4px 15px rgba(8,145,178,0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: #fff;
+    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.35);
+}
+.page-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+.page-subtitle {
+    margin: 0;
+    color: var(--text-color-secondary);
+    font-size: 0.875rem;
 }
-.page-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
-.page-subtitle { margin: 0; color: var(--text-color-secondary); font-size: 0.875rem; }
 .create-btn {
     background: linear-gradient(135deg, #0891b2, #0ea5e9) !important;
     border: none !important;
@@ -273,13 +277,34 @@ const onSearch = () => {
     font-weight: 600 !important;
 }
 
-.main-card { border-radius: 16px; }
-.table-header { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0; }
-.table-title { font-size: 1rem; font-weight: 600; }
-.search-input { width: 240px; }
+.main-card {
+    border-radius: 16px;
+}
+.table-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.25rem 0;
+}
+.table-title {
+    font-size: 1rem;
+    font-weight: 600;
+}
+.search-input {
+    width: 240px;
+}
 
-.empty-state { text-align: center; padding: 3rem; color: var(--text-color-secondary); }
-.empty-icon { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: 0.35; }
+.empty-state {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-color-secondary);
+}
+.empty-icon {
+    font-size: 3rem;
+    display: block;
+    margin-bottom: 1rem;
+    opacity: 0.35;
+}
 
 .code-badge {
     font-family: monospace;
@@ -289,16 +314,47 @@ const onSearch = () => {
     font-size: 0.8rem;
     font-weight: 600;
 }
-.warehouse-name { font-weight: 600; }
-.address-text { font-size: 0.875rem; color: var(--text-color-secondary); }
-.desc-text { font-size: 0.8rem; color: var(--text-color-secondary); }
-.text-muted { opacity: 0.4; }
-.action-buttons { display: flex; gap: 0.4rem; }
+.warehouse-name {
+    font-weight: 600;
+}
+.address-text {
+    font-size: 0.875rem;
+    color: var(--text-color-secondary);
+}
+.desc-text {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
+}
+.text-muted {
+    opacity: 0.4;
+}
+.action-buttons {
+    display: flex;
+    gap: 0.4rem;
+}
 
-.form-grid { display: flex; flex-direction: column; gap: 1rem; }
-.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
-.form-field.full-width { }
-.form-field label { font-weight: 600; font-size: 0.9rem; }
-.required { color: #ef4444; }
+.form-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+.form-field.full-width {
+}
+.form-field label {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+.required {
+    color: #ef4444;
+}
 </style>
diff --git a/src/views/pages/WarehouseItems/WarehouseItemStockView.vue b/src/views/pages/WarehouseItems/WarehouseItemStockView.vue
index bf8cd26..6daf26b 100644
--- a/src/views/pages/WarehouseItems/WarehouseItemStockView.vue
+++ b/src/views/pages/WarehouseItems/WarehouseItemStockView.vue
@@ -29,28 +29,14 @@ const txForm = ref({
     warehouseId: '',
     quantity: null,
     reason: '',
-    note: '',
+    note: ''
 });
 
-const IN_REASONS = [
-    'خرید از تامین‌کننده',
-    'برگشت از کارگاه',
-    'انتقال از انبار دیگر',
-    'اهدا / دریافت رایگان',
-    'موجودی اولیه',
-    'سایر',
-];
+const IN_REASONS = ['خرید از تامین‌کننده', 'برگشت از کارگاه', 'انتقال از انبار دیگر', 'اهدا / دریافت رایگان', 'موجودی اولیه', 'سایر'];
 
-const OUT_REASONS = [
-    'مصرف در پروژه',
-    'انتقال به انبار دیگر',
-    'فروش / واگذاری',
-    'ضایعات',
-    'مفقودی',
-    'سایر',
-];
+const OUT_REASONS = ['مصرف در پروژه', 'انتقال به انبار دیگر', 'فروش / واگذاری', 'ضایعات', 'مفقودی', 'سایر'];
 
-const reasons = computed(() => txForm.value.type === 'IN' ? IN_REASONS : OUT_REASONS);
+const reasons = computed(() => (txForm.value.type === 'IN' ? IN_REASONS : OUT_REASONS));
 
 onMounted(async () => {
     await Promise.all([loadStock(), loadWarehouses()]);
@@ -106,7 +92,7 @@ const submitTransaction = async () => {
             type: txForm.value.type,
             quantity: txForm.value.quantity,
             reason: txForm.value.reason,
-            note: txForm.value.note,
+            note: txForm.value.note
         });
         toast.add({
             severity: 'success',
@@ -158,12 +144,16 @@ const confirmDeleteTransaction = (tx, event) => {
 const formatDate = (d) => {
     if (!d) return '—';
     return new Intl.DateTimeFormat('fa-IR', {
-        year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
     }).format(new Date(d));
 };
 
 const getWarehouseName = (id) => {
-    const w = warehouses.value.find(w => w._id === id);
+    const w = warehouses.value.find((w) => w._id === id);
     return w ? w.name : id;
 };
 </script>
@@ -171,7 +161,6 @@ const getWarehouseName = (id) => {
 <template>
     <ConfirmPopup />
     <div class="stock-view-page">
-
         <!-- ─── Back + Title ──────────────────────────────────────────── -->
         <div class="page-header">
             <Button icon="pi pi-arrow-right" text rounded @click="router.back()" />
@@ -183,26 +172,9 @@ const getWarehouseName = (id) => {
                 <p class="page-subtitle">مدیریت موجودی انبار</p>
             </div>
             <div class="header-actions" v-if="stockData">
-                <Button
-                    icon="pi pi-plus"
-                    label="افزودن موجودی"
-                    severity="success"
-                    @click="openTransactionDialog('IN')"
-                />
-                <Button
-                    icon="pi pi-minus"
-                    label="کسر موجودی"
-                    severity="danger"
-                    outlined
-                    @click="openTransactionDialog('OUT')"
-                />
-                <Button
-                    :icon="showTransactionHistory ? 'pi pi-times' : 'pi pi-history'"
-                    :label="showTransactionHistory ? 'بستن تاریخچه' : 'تاریخچه تراکنش‌ها'"
-                    severity="secondary"
-                    outlined
-                    @click="toggleHistory"
-                />
+                <Button icon="pi pi-plus" label="افزودن موجودی" severity="success" @click="openTransactionDialog('IN')" />
+                <Button icon="pi pi-minus" label="کسر موجودی" severity="danger" outlined @click="openTransactionDialog('OUT')" />
+                <Button :icon="showTransactionHistory ? 'pi pi-times' : 'pi pi-history'" :label="showTransactionHistory ? 'بستن تاریخچه' : 'تاریخچه تراکنش‌ها'" severity="secondary" outlined @click="toggleHistory" />
             </div>
         </div>
 
@@ -211,7 +183,6 @@ const getWarehouseName = (id) => {
         </div>
 
         <div v-else-if="stockData" class="content-grid">
-
             <!-- ─── Total Summary Card ────────────────────────────────── -->
             <div class="summary-card">
                 <div class="summary-icon">
@@ -280,7 +251,13 @@ const getWarehouseName = (id) => {
                                     text
                                     rounded
                                     v-tooltip.top="'افزودن موجودی'"
-                                    @click="() => { txForm.warehouseId = data.warehouse?._id; openTransactionDialog('IN'); txForm.warehouseId = data.warehouse?._id; }"
+                                    @click="
+                                        () => {
+                                            txForm.warehouseId = data.warehouse?._id;
+                                            openTransactionDialog('IN');
+                                            txForm.warehouseId = data.warehouse?._id;
+                                        }
+                                    "
                                 />
                                 <Button
                                     icon="pi pi-minus"
@@ -289,7 +266,13 @@ const getWarehouseName = (id) => {
                                     text
                                     rounded
                                     v-tooltip.top="'کسر موجودی'"
-                                    @click="() => { txForm.warehouseId = data.warehouse?._id; openTransactionDialog('OUT'); txForm.warehouseId = data.warehouse?._id; }"
+                                    @click="
+                                        () => {
+                                            txForm.warehouseId = data.warehouse?._id;
+                                            openTransactionDialog('OUT');
+                                            txForm.warehouseId = data.warehouse?._id;
+                                        }
+                                    "
                                 />
                             </div>
                         </template>
@@ -306,30 +289,20 @@ const getWarehouseName = (id) => {
                         <span class="history-count">({{ totalTransactions }} تراکنش)</span>
                     </h3>
 
-                    <DataTable
-                        :value="transactions"
-                        :loading="transactionsLoading"
-                        stripedRows
-                        responsiveLayout="scroll"
-                    >
+                    <DataTable :value="transactions" :loading="transactionsLoading" stripedRows responsiveLayout="scroll">
                         <template #empty>
                             <div class="empty-state"><p>هیچ تراکنشی یافت نشد</p></div>
                         </template>
 
-                        <Column header="نوع" style="width:8%">
+                        <Column header="نوع" style="width: 8%">
                             <template #body="{ data }">
-                                <Tag
-                                    :severity="data.type === 'IN' ? 'success' : 'danger'"
-                                    :value="data.type === 'IN' ? 'ورود' : 'خروج'"
-                                />
+                                <Tag :severity="data.type === 'IN' ? 'success' : 'danger'" :value="data.type === 'IN' ? 'ورود' : 'خروج'" />
                             </template>
                         </Column>
 
                         <Column header="مقدار">
                             <template #body="{ data }">
-                                <span class="qty-value" :class="data.type === 'IN' ? 'in-qty' : 'out-qty'">
-                                    {{ data.type === 'OUT' ? '-' : '+' }}{{ data.quantity.toLocaleString('fa-IR') }} {{ data.unit }}
-                                </span>
+                                <span class="qty-value" :class="data.type === 'IN' ? 'in-qty' : 'out-qty'"> {{ data.type === 'OUT' ? '-' : '+' }}{{ data.quantity.toLocaleString('fa-IR') }} {{ data.unit }} </span>
                             </template>
                         </Column>
 
@@ -352,17 +325,9 @@ const getWarehouseName = (id) => {
                             <template #body="{ data }">{{ formatDate(data.date) }}</template>
                         </Column>
 
-                        <Column style="width:5%">
+                        <Column style="width: 5%">
                             <template #body="{ data }">
-                                <Button
-                                    icon="pi pi-trash"
-                                    text
-                                    rounded
-                                    severity="danger"
-                                    size="small"
-                                    v-tooltip.top="'حذف تراکنش'"
-                                    @click="confirmDeleteTransaction(data, $event)"
-                                />
+                                <Button icon="pi pi-trash" text rounded severity="danger" size="small" v-tooltip.top="'حذف تراکنش'" @click="confirmDeleteTransaction(data, $event)" />
                             </template>
                         </Column>
                     </DataTable>
@@ -371,70 +336,28 @@ const getWarehouseName = (id) => {
         </div>
 
         <!-- ─── Transaction Dialog ────────────────────────────────────── -->
-        <Dialog
-            v-model:visible="showTransactionDialog"
-            :header="txForm.type === 'IN' ? 'افزودن موجودی' : 'کسر موجودی'"
-            :style="{ width: '500px' }"
-            modal
-            dir="rtl"
-        >
+        <Dialog v-model:visible="showTransactionDialog" :header="txForm.type === 'IN' ? 'افزودن موجودی' : 'کسر موجودی'" :style="{ width: '500px' }" modal dir="rtl">
             <div class="tx-form">
                 <!-- Type toggle -->
                 <div class="type-toggle">
-                    <button
-                        class="type-btn"
-                        :class="{ active: txForm.type === 'IN', 'in-type': true }"
-                        @click="txForm.type = 'IN'"
-                        type="button"
-                    >
-                        <i class="pi pi-arrow-down"></i> ورود به انبار
-                    </button>
-                    <button
-                        class="type-btn"
-                        :class="{ active: txForm.type === 'OUT', 'out-type': true }"
-                        @click="txForm.type = 'OUT'"
-                        type="button"
-                    >
-                        <i class="pi pi-arrow-up"></i> خروج از انبار
-                    </button>
+                    <button class="type-btn" :class="{ active: txForm.type === 'IN', 'in-type': true }" @click="txForm.type = 'IN'" type="button"><i class="pi pi-arrow-down"></i> ورود به انبار</button>
+                    <button class="type-btn" :class="{ active: txForm.type === 'OUT', 'out-type': true }" @click="txForm.type = 'OUT'" type="button"><i class="pi pi-arrow-up"></i> خروج از انبار</button>
                 </div>
 
                 <div class="form-field">
                     <label>انبار <span class="required">*</span></label>
-                    <Select
-                        v-model="txForm.warehouseId"
-                        :options="warehouses"
-                        optionLabel="name"
-                        optionValue="_id"
-                        placeholder="انتخاب انبار..."
-                        class="w-full"
-                    />
+                    <Select v-model="txForm.warehouseId" :options="warehouses" optionLabel="name" optionValue="_id" placeholder="انتخاب انبار..." class="w-full" />
                 </div>
 
                 <div class="form-field">
                     <label>مقدار ({{ stockData?.unit }}) <span class="required">*</span></label>
-                    <InputNumber
-                        v-model="txForm.quantity"
-                        :min="0.001"
-                        :minFractionDigits="0"
-                        :maxFractionDigits="3"
-                        class="w-full"
-                        placeholder="مقدار را وارد کنید"
-                        :pt="{ input: { dir: 'ltr' } }"
-                    />
+                    <InputNumber v-model="txForm.quantity" :min="0.001" :minFractionDigits="0" :maxFractionDigits="3" class="w-full" placeholder="مقدار را وارد کنید" :pt="{ input: { dir: 'ltr' } }" />
                 </div>
 
                 <div class="form-field">
                     <label>دلیل <span class="required">*</span></label>
                     <div class="reason-chips">
-                        <button
-                            v-for="r in reasons"
-                            :key="r"
-                            class="reason-chip"
-                            :class="{ active: txForm.reason === r }"
-                            type="button"
-                            @click="txForm.reason = r"
-                        >{{ r }}</button>
+                        <button v-for="r in reasons" :key="r" class="reason-chip" :class="{ active: txForm.reason === r }" type="button" @click="txForm.reason = r">{{ r }}</button>
                     </div>
                     <InputText v-model="txForm.reason" placeholder="یا دلیل سفارشی وارد کنید..." class="w-full mt-2" />
                 </div>
@@ -449,11 +372,7 @@ const getWarehouseName = (id) => {
                     <i class="pi pi-info-circle"></i>
                     <span>
                         موجودی فعلی در این انبار:
-                        <strong>
-                            {{
-                                (stockData.stocks.find(s => s.warehouse?._id === txForm.warehouseId)?.quantity || 0).toLocaleString('fa-IR')
-                            }} {{ stockData?.unit }}
-                        </strong>
+                        <strong> {{ (stockData.stocks.find((s) => s.warehouse?._id === txForm.warehouseId)?.quantity || 0).toLocaleString('fa-IR') }} {{ stockData?.unit }} </strong>
                     </span>
                 </div>
             </div>
@@ -473,7 +392,10 @@ const getWarehouseName = (id) => {
 </template>
 
 <style scoped>
-.stock-view-page { padding: 1.5rem; direction: rtl; }
+.stock-view-page {
+    padding: 1.5rem;
+    direction: rtl;
+}
 
 /* Header */
 .page-header {
@@ -483,7 +405,9 @@ const getWarehouseName = (id) => {
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
 }
-.header-text { flex: 1; }
+.header-text {
+    flex: 1;
+}
 .page-title {
     margin: 0;
     font-size: 1.4rem;
@@ -492,7 +416,9 @@ const getWarehouseName = (id) => {
     align-items: center;
     gap: 0.75rem;
 }
-.item-name-fa { color: var(--text-color); }
+.item-name-fa {
+    color: var(--text-color);
+}
 .item-name-en {
     font-size: 0.95rem;
     color: var(--text-color-secondary);
@@ -500,13 +426,29 @@ const getWarehouseName = (id) => {
     display: inline-block;
     font-weight: 400;
 }
-.page-subtitle { margin: 0; color: var(--text-color-secondary); font-size: 0.875rem; }
-.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.page-subtitle {
+    margin: 0;
+    color: var(--text-color-secondary);
+    font-size: 0.875rem;
+}
+.header-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
 
-.loading-container { display: flex; justify-content: center; padding: 4rem; }
+.loading-container {
+    display: flex;
+    justify-content: center;
+    padding: 4rem;
+}
 
 /* Content grid */
-.content-grid { display: flex; flex-direction: column; gap: 1.5rem; }
+.content-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
 
 /* Summary card */
 .summary-card {
@@ -517,22 +459,46 @@ const getWarehouseName = (id) => {
     display: flex;
     align-items: center;
     gap: 1.5rem;
-    box-shadow: 0 8px 30px rgba(99,102,241,0.35);
+    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.35);
 }
 .summary-icon {
-    width: 64px; height: 64px;
-    background: rgba(255,255,255,0.2);
+    width: 64px;
+    height: 64px;
+    background: rgba(255, 255, 255, 0.2);
     border-radius: 16px;
-    display: flex; align-items: center; justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 1.8rem;
     flex-shrink: 0;
 }
-.summary-details { flex: 1; }
-.summary-label { font-size: 0.875rem; opacity: 0.85; display: block; margin-bottom: 0.3rem; }
-.summary-value { display: flex; align-items: baseline; gap: 0.5rem; }
-.summary-value .qty { font-size: 2.5rem; font-weight: 700; line-height: 1; }
-.summary-value .unit { font-size: 1.1rem; opacity: 0.9; }
-.unit-en-label { font-size: 0.8rem; opacity: 0.7; }
+.summary-details {
+    flex: 1;
+}
+.summary-label {
+    font-size: 0.875rem;
+    opacity: 0.85;
+    display: block;
+    margin-bottom: 0.3rem;
+}
+.summary-value {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+}
+.summary-value .qty {
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1;
+}
+.summary-value .unit {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+.unit-en-label {
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
 .summary-locations {
     font-size: 0.875rem;
     opacity: 0.85;
@@ -542,7 +508,10 @@ const getWarehouseName = (id) => {
 }
 
 /* Table card */
-.stock-table-card, .history-card { border-radius: 16px; }
+.stock-table-card,
+.history-card {
+    border-radius: 16px;
+}
 .card-title {
     font-size: 1rem;
     font-weight: 600;
@@ -551,38 +520,105 @@ const getWarehouseName = (id) => {
     align-items: center;
     gap: 0.5rem;
 }
-.history-count { font-size: 0.8rem; color: var(--text-color-secondary); font-weight: 400; }
+.history-count {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
+    font-weight: 400;
+}
 
 /* Warehouse cells */
-.warehouse-name { font-weight: 600; }
-.warehouse-code { font-size: 0.75rem; color: var(--text-color-secondary); font-family: monospace; }
-.warehouse-address { font-size: 0.85rem; color: var(--text-color-secondary); }
+.warehouse-name {
+    font-weight: 600;
+}
+.warehouse-code {
+    font-size: 0.75rem;
+    color: var(--text-color-secondary);
+    font-family: monospace;
+}
+.warehouse-address {
+    font-size: 0.85rem;
+    color: var(--text-color-secondary);
+}
 
 /* Stock quantity */
-.stock-quantity { display: flex; align-items: baseline; gap: 0.4rem; }
-.qty-value { font-size: 1.2rem; font-weight: 700; }
-.qty-unit { font-size: 0.8rem; color: var(--text-color-secondary); }
-.zero-stock .qty-value { color: #ef4444; }
-.low-stock .qty-value { color: #f59e0b; }
-.in-qty { color: #22c55e; font-weight: 700; }
-.out-qty { color: #ef4444; font-weight: 700; }
+.stock-quantity {
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+}
+.qty-value {
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+.qty-unit {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
+}
+.zero-stock .qty-value {
+    color: #ef4444;
+}
+.low-stock .qty-value {
+    color: #f59e0b;
+}
+.in-qty {
+    color: #22c55e;
+    font-weight: 700;
+}
+.out-qty {
+    color: #ef4444;
+    font-weight: 700;
+}
 
-.row-actions { display: flex; gap: 0.25rem; }
-.reason-text { font-size: 0.875rem; }
-.note-text { font-size: 0.8rem; color: var(--text-color-secondary); }
+.row-actions {
+    display: flex;
+    gap: 0.25rem;
+}
+.reason-text {
+    font-size: 0.875rem;
+}
+.note-text {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary);
+}
 
-.empty-state { text-align: center; padding: 2rem; color: var(--text-color-secondary); }
+.empty-state {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-color-secondary);
+}
 
 /* Slide animation */
-.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.3s ease; }
-.slide-fade-enter-from { opacity: 0; transform: translateY(-12px); }
-.slide-fade-leave-to { opacity: 0; transform: translateY(-12px); }
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+    transition: all 0.3s ease;
+}
+.slide-fade-enter-from {
+    opacity: 0;
+    transform: translateY(-12px);
+}
+.slide-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-12px);
+}
 
 /* TX form */
-.tx-form { display: flex; flex-direction: column; gap: 1rem; }
-.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
-.form-field label { font-weight: 600; font-size: 0.9rem; }
-.required { color: #ef4444; }
+.tx-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+.form-field label {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+.required {
+    color: #ef4444;
+}
 
 .type-toggle {
     display: grid;
@@ -606,11 +642,25 @@ const getWarehouseName = (id) => {
     transition: all 0.2s;
     color: var(--text-color);
 }
-.type-btn.in-type.active { background: #dcfce7; border-color: #22c55e; color: #16a34a; }
-.type-btn.out-type.active { background: #fee2e2; border-color: #ef4444; color: #dc2626; }
-.type-btn:hover { border-color: var(--primary-color); }
+.type-btn.in-type.active {
+    background: #dcfce7;
+    border-color: #22c55e;
+    color: #16a34a;
+}
+.type-btn.out-type.active {
+    background: #fee2e2;
+    border-color: #ef4444;
+    color: #dc2626;
+}
+.type-btn:hover {
+    border-color: var(--primary-color);
+}
 
-.reason-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.reason-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
 .reason-chip {
     border: 1.5px solid var(--surface-border);
     background: var(--surface-50);
@@ -621,8 +671,16 @@ const getWarehouseName = (id) => {
     transition: all 0.2s;
     color: var(--text-color);
 }
-.reason-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
-.reason-chip.active { background: var(--primary-50); border-color: var(--primary-color); color: var(--primary-color); font-weight: 600; }
+.reason-chip:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+.reason-chip.active {
+    background: var(--primary-50);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    font-weight: 600;
+}
 
 .stock-warning {
     background: #fef3c7;
diff --git a/src/views/uikit/FileGallery.vue b/src/views/uikit/FileGallery.vue
index 8baf0db..d63cd97 100644
--- a/src/views/uikit/FileGallery.vue
+++ b/src/views/uikit/FileGallery.vue
@@ -1,95 +1,66 @@
-<template>
-  <div
-    :id="galleryId"
-    class="pswp-gallery pswp-gallery--single-column my-3 flex min-w-0 flex-row flex-nowrap overflow-x-auto rounded-md bg-brand-dark-3 p-3"
-  >
-    <div v-for="(image, key) in imagesData" :key="key" class="relative">
-      <a
-        :href="image.url"
-        :data-pswp-width="image.width"
-        :data-pswp-height="image.height"
-        target="_blank"
-        rel="noreferrer"
-        class="mx-3 block flex-shrink-0"
-      >
-        <img :src="image.url" alt="" class="max-h-60 rounded-md" :style="{ height: '150px' }" />
-      </a>
-      <button
-        class="absolute right-4 top-2 flex h-6 w-6 items-center justify-center rounded-full text-brand-danger"
-        @click="removeImage(key)"
-      >
-        <font-awesome-icon icon="fa-solid fa-x" />
-      </button>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { ref, watch, onMounted } from 'vue'
-import PhotoSwipeLightbox from 'photoswipe/lightbox'
-import 'photoswipe/style.css'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { ref, watch } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import ImageViewerModal from '@/views/uikit/ImageViewerModal.vue';
+
+const props = defineProps({
+    galleryId: {
+        type: String,
+        required: true
+    },
+    modelValue: {
+        type: Array,
+        required: true
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const imagesData = ref([]);
+const viewerVisible = ref(false);
+const viewerInitialIndex = ref(0);
 
 function updateImagesData(images) {
-  for (let i = 0; i < images.length; i++) {
-    const img = new Image()
-    img.src = images[i].url
-    img.onload = function () {
-      images[i].height = img.naturalHeight
-      images[i].width = img.naturalWidth
-    }
-  }
-
-  return images
+    if (!images || !Array.isArray(images)) return [];
+    return images.map((item) => {
+        if (typeof item === 'string') {
+            return { url: item, name: item.split('?')[0].split('/').pop() || 'image' };
+        }
+        return { ...item };
+    });
 }
 
-// Props
-const props = defineProps({
-  galleryId: {
-    type: String,
-    required: true
-  },
-  modelValue: {
-    type: Array,
-    required: true
-  }
-})
+function openViewer(index) {
+    viewerInitialIndex.value = index;
+    viewerVisible.value = true;
+}
 
-const imagesData = ref([])
-
-let lightbox = null
-
-// Lifecycle hook: mounted
-onMounted(() => {
-  if (!lightbox) {
-    console.log('Launching Gallery')
-    console.log({
-      gallery: '#' + props.galleryId,
-      children: 'a'
-    })
-    lightbox = new PhotoSwipeLightbox({
-      gallery: '#' + props.galleryId,
-      children: 'a',
-      pswpModule: () => import('photoswipe')
-    })
-    lightbox.init()
-  }
-  imagesData.value = updateImagesData(props.modelValue)
-})
+function removeImage(index) {
+    const newImages = [...props.modelValue];
+    newImages.splice(index, 1);
+    emit('update:modelValue', newImages);
+}
 
 watch(
-  () => props.modelValue,
-  (newImages) => {
-    console.log('propsimages', newImages)
-    imagesData.value = updateImagesData(newImages)
-  },
-  { deep: true, immediate: true }
-)
-
-const emit = defineEmits(['update:modelValue'])
-function removeImage(index) {
-  const newImages = [...props.modelValue]
-  newImages.splice(index, 1)
-  emit('update:modelValue', newImages)
-}
+    () => props.modelValue,
+    (newImages) => {
+        imagesData.value = updateImagesData(newImages);
+    },
+    { deep: true, immediate: true }
+);
 </script>
+
+<template>
+    <div :id="galleryId" class="my-3 flex min-w-0 flex-row flex-nowrap overflow-x-auto rounded-md bg-brand-dark-3 p-3 gap-3">
+        <div v-for="(image, key) in imagesData" :key="key" class="relative group flex-shrink-0">
+            <div class="cursor-pointer overflow-hidden rounded-md" @click="openViewer(key)">
+                <img :src="image.url" alt="" class="h-[150px] object-cover rounded-md transition-transform duration-200 group-hover:scale-105" />
+            </div>
+            <button type="button" class="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow-md hover:bg-red-600 focus:outline-none" @click.stop="removeImage(key)">
+                <font-awesome-icon icon="fa-solid fa-x" class="text-xs" />
+            </button>
+        </div>
+
+        <ImageViewerModal v-model:visible="viewerVisible" :images="imagesData" :initial-index="viewerInitialIndex" />
+    </div>
+</template>
diff --git a/src/views/uikit/ImageGallery.vue b/src/views/uikit/ImageGallery.vue
index 7326d97..22dd0cd 100644
--- a/src/views/uikit/ImageGallery.vue
+++ b/src/views/uikit/ImageGallery.vue
@@ -1,77 +1,6 @@
-<template>
-    <div
-        :id="galleryId"
-        class="pswp-gallery flex flex-wrap gap-3 p-3 rounded-xl bg-surface-50 dark:bg-surface-800/60 border border-surface-200 dark:border-surface-700/60 min-h-[90px] items-center"
-    >
-        <div
-            v-for="(item, key) in itemsData"
-            :key="key"
-            class="group relative flex flex-col items-center justify-between rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 p-2 shadow-sm transition-all hover:shadow-md overflow-hidden"
-            :class="isImageFile(item.url) ? 'w-36 h-36 sm:w-40 sm:h-40' : 'w-44 h-36'"
-            draggable="true"
-            @dragstart="startDrag($event, key)"
-            @dragover.prevent
-            @dragenter.prevent
-            @drop="onDrop($event, key)"
-        >
-            <!-- Image Thumbnail & PhotoSwipe Link -->
-            <template v-if="isImageFile(item.url)">
-                <a
-                    :href="item.url"
-                    :data-pswp-width="item.width || 1200"
-                    :data-pswp-height="item.height || 800"
-                    target="_blank"
-                    rel="noreferrer"
-                    class="pswp-link w-full h-full flex items-center justify-center overflow-hidden rounded-lg relative cursor-pointer"
-                >
-                    <img
-                        :src="item.url"
-                        :alt="item.name || 'Image'"
-                        class="w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-105"
-                        crossorigin="anonymous"
-                    />
-                    <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white">
-                        <i class="pi pi-search-plus text-xl"></i>
-                    </div>
-                </a>
-            </template>
-
-            <!-- Non-Image File (PDF, DOC, etc.) -->
-            <template v-else>
-                <div class="w-full h-full flex flex-col items-center justify-center p-2 text-center">
-                    <i :class="[getFileIconClass(item.url), getFileIconColor(item.url), 'text-3xl mb-2']"></i>
-                    <p class="text-xs font-medium text-surface-700 dark:text-surface-200 truncate max-w-full px-1 mb-2" :title="getFileName(item.url)">
-                        {{ getFileName(item.url) }}
-                    </p>
-                    <a
-                        :href="item.url"
-                        target="_blank"
-                        download
-                        class="inline-flex items-center gap-1 text-[11px] px-2.5 py-1 rounded-lg bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-surface-700 dark:text-surface-200 transition-colors"
-                    >
-                        <i class="pi pi-download text-[10px]"></i>
-                        <span>دانلود</span>
-                    </a>
-                </div>
-            </template>
-
-            <!-- Remove Button -->
-            <button
-                type="button"
-                class="absolute top-1.5 right-1.5 z-10 w-6 h-6 rounded-full bg-red-500 hover:bg-red-600 text-white flex items-center justify-center shadow-md opacity-90 hover:opacity-100 transition-all cursor-pointer"
-                title="حذف"
-                @click.stop="removeItem(key, item.url)"
-            >
-                <i class="pi pi-times text-[10px]"></i>
-            </button>
-        </div>
-    </div>
-</template>
-
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import 'photoswipe/style.css';
+import { ref, computed, watch } from 'vue';
+import ImageViewerModal from '@/views/uikit/ImageViewerModal.vue';
 
 const props = defineProps({
     galleryId: {
@@ -87,13 +16,14 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'delete-image']);
 
 const itemsData = ref([]);
-let lightbox = null;
+const viewerVisible = ref(false);
+const viewerInitialIndex = ref(0);
 
 function isImageFile(url) {
     if (!url || typeof url !== 'string') return false;
     const cleanUrl = url.split('?')[0];
     const ext = cleanUrl.toLowerCase().split('.').pop();
-    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(ext);
+    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'avif'].includes(ext) || cleanUrl.startsWith('blob:') || cleanUrl.startsWith('data:image/');
 }
 
 function getFileIconClass(url) {
@@ -133,49 +63,27 @@ function updateItemsData(items) {
     }
 
     return items.map((item) => {
-        const itemObj = typeof item === 'string'
-            ? { url: item, name: item.split('/').pop() || 'file' }
-            : { ...item };
-
-        if (itemObj && itemObj.url && isImageFile(itemObj.url)) {
-            const img = new Image();
-            img.src = itemObj.url;
-            img.onload = function () {
-                itemObj.height = img.naturalHeight || 800;
-                itemObj.width = img.naturalWidth || 1200;
+        if (typeof item === 'string') {
+            return {
+                url: item,
+                name: item.split('?')[0].split('/').pop() || 'file'
             };
-            if (!itemObj.width) itemObj.width = 1200;
-            if (!itemObj.height) itemObj.height = 800;
         }
-        return itemObj;
+        return { ...item };
     });
 }
 
-function initLightbox() {
-    if (lightbox) {
-        lightbox.destroy();
-        lightbox = null;
-    }
-    lightbox = new PhotoSwipeLightbox({
-        gallery: '#' + props.galleryId,
-        children: 'a.pswp-link',
-        pswpModule: () => import('photoswipe')
-    });
-    lightbox.init();
+// Extract only images for the lightbox viewer
+const imageItems = computed(() => {
+    return itemsData.value.filter((item) => isImageFile(item.url));
+});
+
+function openViewer(clickedItem) {
+    const idx = imageItems.value.findIndex((img) => img.url === clickedItem.url);
+    viewerInitialIndex.value = idx >= 0 ? idx : 0;
+    viewerVisible.value = true;
 }
 
-onMounted(() => {
-    initLightbox();
-    itemsData.value = updateItemsData(props.modelValue);
-});
-
-onBeforeUnmount(() => {
-    if (lightbox) {
-        lightbox.destroy();
-        lightbox = null;
-    }
-});
-
 watch(
     () => props.modelValue,
     (newItems) => {
@@ -209,3 +117,62 @@ function onDrop(event, dropIndex) {
     emit('update:modelValue', newItems);
 }
 </script>
+
+<template>
+    <div :id="galleryId" class="flex flex-wrap gap-3 p-3 rounded-xl bg-surface-50 dark:bg-surface-800/60 border border-surface-200 dark:border-surface-700/60 min-h-[90px] items-center">
+        <div
+            v-for="(item, key) in itemsData"
+            :key="key"
+            class="group relative flex flex-col items-center justify-between rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 p-2 shadow-sm transition-all hover:shadow-md overflow-hidden"
+            :class="isImageFile(item.url) ? 'w-36 h-36 sm:w-40 sm:h-40' : 'w-44 h-36'"
+            draggable="true"
+            @dragstart="startDrag($event, key)"
+            @dragover.prevent
+            @dragenter.prevent
+            @drop="onDrop($event, key)"
+        >
+            <!-- Image Thumbnail -->
+            <template v-if="isImageFile(item.url)">
+                <div class="w-full h-full flex items-center justify-center overflow-hidden rounded-lg relative cursor-pointer group" @click="openViewer(item)">
+                    <img :src="item.url" :alt="item.name || 'Image'" class="w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-105 select-none pointer-events-none" crossorigin="anonymous" loading="lazy" />
+                    <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-1 text-white">
+                        <i class="pi pi-search-plus text-2xl drop-shadow-md"></i>
+                        <span class="text-[11px] font-medium drop-shadow-md">مشاهده و بزرگ‌نمایی</span>
+                    </div>
+                </div>
+            </template>
+
+            <!-- Non-Image File (PDF, DOC, etc.) -->
+            <template v-else>
+                <div class="w-full h-full flex flex-col items-center justify-center p-2 text-center">
+                    <i :class="[getFileIconClass(item.url), getFileIconColor(item.url), 'text-3xl mb-2']"></i>
+                    <p class="text-xs font-medium text-surface-700 dark:text-surface-200 truncate max-w-full px-1 mb-2" :title="getFileName(item.url)">
+                        {{ getFileName(item.url) }}
+                    </p>
+                    <a
+                        :href="item.url"
+                        target="_blank"
+                        download
+                        class="inline-flex items-center gap-1 text-[11px] px-2.5 py-1 rounded-lg bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-surface-700 dark:text-surface-200 transition-colors"
+                    >
+                        <i class="pi pi-download text-[10px]"></i>
+                        <span>دانلود</span>
+                    </a>
+                </div>
+            </template>
+
+            <!-- Remove Button -->
+            <button
+                type="button"
+                class="absolute top-1.5 right-1.5 z-10 w-6 h-6 rounded-full bg-red-500 hover:bg-red-600 text-white flex items-center justify-center shadow-md opacity-90 hover:opacity-100 transition-all cursor-pointer focus:outline-none"
+                title="حذف"
+                @click.stop="removeItem(key, item.url)"
+            >
+                <i class="pi pi-times text-[10px]"></i>
+            </button>
+        </div>
+
+        <!-- High-Performance Image Viewer Lightbox Modal -->
+        <ImageViewerModal v-model:visible="viewerVisible" :images="imageItems" :initial-index="viewerInitialIndex" />
+    </div>
+</template>
diff --git a/src/views/uikit/ImageUploader.vue b/src/views/uikit/ImageUploader.vue
index f60edf1..e030c1d 100644
--- a/src/views/uikit/ImageUploader.vue
+++ b/src/views/uikit/ImageUploader.vue
@@ -1,36 +1,3 @@
-<template>
-    <div class="image-uploader-wrapper">
-        <FilePond
-            ref="pond"
-            name="filepond-image"
-            :max-files="maxFiles"
-            :allow-multiple="allowMultiple"
-            store-as-file="true"
-            :server="{
-                process: {
-                    url: resolvedUploadUrl,
-                    method: 'POST',
-                    withCredentials: true,
-                    headers: authHeaders,
-                    onload: (response) => handleProcessResponse(response)
-                },
-                revert: {
-                    url: resolvedDeleteUrl,
-                    method: 'DELETE',
-                    withCredentials: true,
-                    headers: authHeaders,
-                    onload: (response) => handleRevertResponse(response)
-                }
-            }"
-            :label-idle="'برای آپلود کلیک کنید یا فایل را بکشید و رها کنید <span class=\'filepond--label-action\'>انتخاب فایل</span>'"
-            label-tap-to-undo="برای حذف کلیک کنید"
-            label-file-processing="در حال آپلود..."
-            label-file-processing-complete="آپلود فایل تکمیل شد"
-            @removefile="handleRemoveFile"
-        />
-    </div>
-</template>
-
 <script>
 import vueFilePond from 'vue-filepond';
 import 'filepond/dist/filepond.min.css';
@@ -150,10 +117,7 @@ function handleProcessResponse(response) {
         fileRecord = parsed;
     }
 
-    const fileUrl =
-        props.mode === 'private'
-            ? fileRecord?.privateUrl || fileRecord?.fileURL || fileRecord?.url || ''
-            : fileRecord?.publicUrl || fileRecord?.fileURL || fileRecord?.url || '';
+    const fileUrl = props.mode === 'private' ? fileRecord?.privateUrl || fileRecord?.fileURL || fileRecord?.url || '' : fileRecord?.publicUrl || fileRecord?.fileURL || fileRecord?.url || '';
 
     const fileName = fileRecord?.fileName || fileRecord?.name || (fileUrl ? fileUrl.split('/').pop() : 'file');
 
@@ -214,6 +178,39 @@ function removeFromFileList(identifier) {
 }
 </script>
 
+<template>
+    <div class="image-uploader-wrapper">
+        <FilePond
+            ref="pond"
+            name="filepond-image"
+            :max-files="maxFiles"
+            :allow-multiple="allowMultiple"
+            store-as-file="true"
+            :server="{
+                process: {
+                    url: resolvedUploadUrl,
+                    method: 'POST',
+                    withCredentials: true,
+                    headers: authHeaders,
+                    onload: (response) => handleProcessResponse(response)
+                },
+                revert: {
+                    url: resolvedDeleteUrl,
+                    method: 'DELETE',
+                    withCredentials: true,
+                    headers: authHeaders,
+                    onload: (response) => handleRevertResponse(response)
+                }
+            }"
+            :label-idle="'برای آپلود کلیک کنید یا فایل را بکشید و رها کنید <span class=\'filepond--label-action\'>انتخاب فایل</span>'"
+            label-tap-to-undo="برای حذف کلیک کنید"
+            label-file-processing="در حال آپلود..."
+            label-file-processing-complete="آپلود فایل تکمیل شد"
+            @removefile="handleRemoveFile"
+        />
+    </div>
+</template>
+
 <style>
 /* FilePond Container & Theme Styling */
 .image-uploader-wrapper {
@@ -261,4 +258,3 @@ function removeFromFileList(identifier) {
     background-color: var(--primary-color, #10b981) !important;
 }
 </style>
-
diff --git a/src/views/uikit/ImageViewerModal.vue b/src/views/uikit/ImageViewerModal.vue
new file mode 100644
index 0000000..dc6285f
--- /dev/null
+++ b/src/views/uikit/ImageViewerModal.vue
@@ -0,0 +1,636 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    images: {
+        type: Array,
+        default: () => []
+    },
+    initialIndex: {
+        type: Number,
+        default: 0
+    }
+});
+
+const emit = defineEmits(['update:visible', 'change', 'close']);
+
+// Viewport and container refs
+const modalContainerRef = ref(null);
+const viewportRef = ref(null);
+const imageRef = ref(null);
+
+// Active state
+const currentIndex = ref(0);
+const loading = ref(true);
+const isFullscreen = ref(false);
+const showThumbnails = ref(true);
+
+// Zoom and Transform states
+const scale = ref(1);
+const minScale = 0.2;
+const maxScale = 8.0;
+const translateX = ref(0);
+const translateY = ref(0);
+const rotation = ref(0);
+const flipH = ref(1);
+const flipV = ref(1);
+
+// Drag & Pan state
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+const initialTranslateX = ref(0);
+const initialTranslateY = ref(0);
+
+// Touch tracking for pinch-to-zoom
+let initialTouchDistance = 0;
+let initialTouchScale = 1;
+
+// Filter only valid image items
+function isImageItem(item) {
+    const url = getImageUrl(item);
+    if (!url || typeof url !== 'string') return false;
+    const clean = url.split('?')[0].toLowerCase();
+    const ext = clean.split('.').pop();
+    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'avif'].includes(ext) || clean.startsWith('blob:') || clean.startsWith('data:image/');
+}
+
+const validImages = computed(() => {
+    if (!props.images || !Array.isArray(props.images)) return [];
+    return props.images.filter(isImageItem);
+});
+
+const currentImage = computed(() => {
+    return validImages.value[currentIndex.value] || null;
+});
+
+const currentImageUrl = computed(() => {
+    return getImageUrl(currentImage.value);
+});
+
+const currentImageName = computed(() => {
+    return getImageName(currentImage.value);
+});
+
+const isActualSize = computed(() => {
+    return Math.abs(scale.value - 1) < 0.05 && translateX.value === 0 && translateY.value === 0;
+});
+
+function getImageUrl(item) {
+    if (!item) return '';
+    if (typeof item === 'string') return item;
+    return item.url || item.source || item.src || '';
+}
+
+function getImageName(item) {
+    if (!item) return 'تصویر';
+    if (typeof item === 'string') {
+        const clean = item.split('?')[0];
+        try {
+            return decodeURIComponent(clean.split('/').pop() || 'تصویر');
+        } catch {
+            return clean.split('/').pop() || 'تصویر';
+        }
+    }
+    const name = item.fileName || item.name || '';
+    if (name) return name;
+    const url = item.url || item.source || '';
+    const clean = url.split('?')[0];
+    try {
+        return decodeURIComponent(clean.split('/').pop() || 'تصویر');
+    } catch {
+        return clean.split('/').pop() || 'تصویر';
+    }
+}
+
+function formatPersianNumber(num) {
+    if (num === null || num === undefined) return '';
+    return num.toLocaleString('fa-IR');
+}
+
+// Transform matrix
+const transformStyle = computed(() => {
+    return {
+        transform: `translate3d(${translateX.value}px, ${translateY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg) scaleX(${flipH.value}) scaleY(${flipV.value})`,
+        transition: isDragging.value ? 'none' : 'transform 0.18s cubic-bezier(0.2, 0, 0.2, 1)'
+    };
+});
+
+// Watch visibility
+watch(
+    () => props.visible,
+    (val) => {
+        if (val) {
+            currentIndex.value = Math.max(0, Math.min(props.initialIndex, validImages.value.length - 1));
+            resetTransform();
+            loading.value = true;
+            nextTick(() => {
+                modalContainerRef.value?.focus();
+            });
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+            if (document.fullscreenElement) {
+                document.exitFullscreen().catch(() => {});
+            }
+        }
+    },
+    { immediate: true }
+);
+
+watch(
+    () => props.initialIndex,
+    (idx) => {
+        if (props.visible) {
+            currentIndex.value = Math.max(0, Math.min(idx, validImages.value.length - 1));
+            resetTransform();
+            loading.value = true;
+        }
+    }
+);
+
+function selectImage(idx) {
+    if (idx >= 0 && idx < validImages.value.length) {
+        currentIndex.value = idx;
+        resetTransform();
+        loading.value = true;
+        emit('change', idx);
+    }
+}
+
+function prevImage() {
+    if (validImages.value.length <= 1) return;
+    const nextIdx = (currentIndex.value - 1 + validImages.value.length) % validImages.value.length;
+    selectImage(nextIdx);
+}
+
+function nextImage() {
+    if (validImages.value.length <= 1) return;
+    const nextIdx = (currentIndex.value + 1) % validImages.value.length;
+    selectImage(nextIdx);
+}
+
+function onImageLoaded() {
+    loading.value = false;
+}
+
+function onImageError() {
+    loading.value = false;
+}
+
+// Zoom operations
+function zoomIn() {
+    const newScale = Math.min(scale.value * 1.25, maxScale);
+    scale.value = Number(newScale.toFixed(2));
+}
+
+function zoomOut() {
+    const newScale = Math.max(scale.value / 1.25, minScale);
+    scale.value = Number(newScale.toFixed(2));
+    if (scale.value <= 1) {
+        translateX.value = 0;
+        translateY.value = 0;
+    }
+}
+
+function toggleActualSize() {
+    if (Math.abs(scale.value - 1) < 0.05) {
+        scale.value = 2.0;
+    } else {
+        resetTransform();
+    }
+}
+
+function rotateRight() {
+    rotation.value = (rotation.value + 90) % 360;
+}
+
+function rotateLeft() {
+    rotation.value = (rotation.value - 90 + 360) % 360;
+}
+
+function toggleFlipH() {
+    flipH.value = flipH.value === 1 ? -1 : 1;
+}
+
+function toggleFlipV() {
+    flipV.value = flipV.value === 1 ? -1 : 1;
+}
+
+function resetTransform() {
+    scale.value = 1;
+    translateX.value = 0;
+    translateY.value = 0;
+    rotation.value = 0;
+    flipH.value = 1;
+    flipV.value = 1;
+}
+
+// Mouse Wheel Zoom
+function handleWheel(e) {
+    const zoomFactor = e.deltaY < 0 ? 1.15 : 0.87;
+    const newScale = Math.min(Math.max(scale.value * zoomFactor, minScale), maxScale);
+    if (newScale === scale.value) return;
+
+    if (viewportRef.value) {
+        const rect = viewportRef.value.getBoundingClientRect();
+        const mouseX = e.clientX - (rect.left + rect.width / 2);
+        const mouseY = e.clientY - (rect.top + rect.height / 2);
+
+        // Calculate offset zoom
+        translateX.value = mouseX - (mouseX - translateX.value) * (newScale / scale.value);
+        translateY.value = mouseY - (mouseY - translateY.value) * (newScale / scale.value);
+    }
+    scale.value = Number(newScale.toFixed(2));
+
+    if (scale.value <= 1) {
+        translateX.value = 0;
+        translateY.value = 0;
+    }
+}
+
+// Double Click Zoom
+function onDoubleClick(e) {
+    if (scale.value <= 1.1) {
+        if (viewportRef.value) {
+            const rect = viewportRef.value.getBoundingClientRect();
+            const mouseX = e.clientX - (rect.left + rect.width / 2);
+            const mouseY = e.clientY - (rect.top + rect.height / 2);
+            translateX.value = -mouseX * 1.5;
+            translateY.value = -mouseY * 1.5;
+        }
+        scale.value = 2.5;
+    } else {
+        resetTransform();
+    }
+}
+
+// Mouse Drag / Pan
+function onMouseDown(e) {
+    if (e.button !== 0) return; // Only left click
+    isDragging.value = true;
+    dragStartX.value = e.clientX;
+    dragStartY.value = e.clientY;
+    initialTranslateX.value = translateX.value;
+    initialTranslateY.value = translateY.value;
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+}
+
+function onMouseMove(e) {
+    if (!isDragging.value) return;
+    const dx = e.clientX - dragStartX.value;
+    const dy = e.clientY - dragStartY.value;
+    translateX.value = initialTranslateX.value + dx;
+    translateY.value = initialTranslateY.value + dy;
+}
+
+function onMouseUp() {
+    isDragging.value = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+}
+
+// Touch Handling for Mobile / Tablets
+function onTouchStart(e) {
+    if (e.touches.length === 2) {
+        // Pinch zoom
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        initialTouchDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+        initialTouchScale = scale.value;
+    } else if (e.touches.length === 1) {
+        // Pan
+        isDragging.value = true;
+        dragStartX.value = e.touches[0].clientX;
+        dragStartY.value = e.touches[0].clientY;
+        initialTranslateX.value = translateX.value;
+        initialTranslateY.value = translateY.value;
+    }
+}
+
+function onTouchMove(e) {
+    if (e.touches.length === 2 && initialTouchDistance > 0) {
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        const currentDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+        const factor = currentDistance / initialTouchDistance;
+        scale.value = Math.min(Math.max(initialTouchScale * factor, minScale), maxScale);
+    } else if (e.touches.length === 1 && isDragging.value) {
+        const dx = e.touches[0].clientX - dragStartX.value;
+        const dy = e.touches[0].clientY - dragStartY.value;
+        translateX.value = initialTranslateX.value + dx;
+        translateY.value = initialTranslateY.value + dy;
+    }
+}
+
+function onTouchEnd() {
+    isDragging.value = false;
+    initialTouchDistance = 0;
+}
+
+// Fullscreen
+function toggleFullscreen() {
+    if (!document.fullscreenElement) {
+        modalContainerRef.value
+            ?.requestFullscreen?.()
+            .then(() => {
+                isFullscreen.value = true;
+            })
+            .catch(() => {});
+    } else {
+        document
+            .exitFullscreen?.()
+            .then(() => {
+                isFullscreen.value = false;
+            })
+            .catch(() => {});
+    }
+}
+
+// Download
+async function downloadCurrentImage() {
+    const url = currentImageUrl.value;
+    if (!url) return;
+    const filename = currentImageName.value || 'image.jpg';
+
+    try {
+        const response = await fetch(url);
+        const blob = await response.blob();
+        const blobUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = blobUrl;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(blobUrl);
+    } catch {
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.target = '_blank';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+}
+
+// Close
+function closeViewer() {
+    emit('update:visible', false);
+    emit('close');
+}
+
+// Keyboard shortcuts
+function handleKeydown(e) {
+    if (!props.visible) return;
+
+    switch (e.key) {
+        case 'Escape':
+            closeViewer();
+            break;
+        case 'ArrowRight':
+            prevImage();
+            break;
+        case 'ArrowLeft':
+            nextImage();
+            break;
+        case '+':
+        case '=':
+            zoomIn();
+            break;
+        case '-':
+        case '_':
+            zoomOut();
+            break;
+        case '0':
+            resetTransform();
+            break;
+        case 'r':
+        case 'R':
+        case 'ق': // Persian layout mapping
+            rotateRight();
+            break;
+        case 'f':
+        case 'F':
+        case 'ب':
+            toggleFullscreen();
+            break;
+    }
+}
+
+function onFullscreenChange() {
+    isFullscreen.value = !!document.fullscreenElement;
+}
+
+onMounted(() => {
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener('fullscreenchange', onFullscreenChange);
+    document.body.style.overflow = '';
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition name="iv-fade">
+            <div v-if="visible" ref="modalContainerRef" class="fixed inset-0 z-[99999] flex flex-col bg-black/92 backdrop-blur-xl text-white select-none overflow-hidden font-sans outline-none" tabindex="-1" @keydown="handleKeydown">
+                <!-- TOP HEADER BAR -->
+                <div class="relative z-20 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/80 via-black/40 to-transparent">
+                    <!-- Left / Image Counter & Name -->
+                    <div class="flex items-center gap-3 max-w-[60%] truncate">
+                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-white/10 text-white/90 backdrop-blur-md border border-white/10 tracking-wide">
+                            {{ formatPersianNumber(currentIndex + 1) }} / {{ formatPersianNumber(validImages.length) }}
+                        </span>
+                        <h3 class="text-sm font-medium text-white/80 truncate" :title="currentImageName">
+                            {{ currentImageName }}
+                        </h3>
+                    </div>
+
+                    <!-- Right / Top Action Controls -->
+                    <div class="flex items-center gap-2">
+                        <!-- Fullscreen -->
+                        <button type="button" class="iv-btn" :title="isFullscreen ? 'خروج از تمام صفحه (F)' : 'تمام صفحه (F)'" @click="toggleFullscreen">
+                            <i :class="isFullscreen ? 'pi pi-window-minimize' : 'pi pi-window-maximize'" class="text-sm"></i>
+                        </button>
+
+                        <!-- Download -->
+                        <button type="button" class="iv-btn" title="دانلود تصویر" @click="downloadCurrentImage">
+                            <i class="pi pi-download text-sm"></i>
+                        </button>
+
+                        <!-- Close Button -->
+                        <button type="button" class="iv-btn iv-btn-close" title="بستن (Esc)" @click="closeViewer">
+                            <i class="pi pi-times text-base font-bold"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- MAIN IMAGE VIEWPORT -->
+                <div
+                    ref="viewportRef"
+                    class="relative flex-1 w-full h-full flex items-center justify-center overflow-hidden cursor-grab active:cursor-grabbing touch-none"
+                    @wheel.prevent="handleWheel"
+                    @mousedown="onMouseDown"
+                    @dblclick="onDoubleClick"
+                    @touchstart="onTouchStart"
+                    @touchmove="onTouchMove"
+                    @touchend="onTouchEnd"
+                >
+                    <!-- Loading Spinner -->
+                    <div v-if="loading" class="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
+                        <i class="pi pi-spin pi-spinner text-4xl text-primary-400"></i>
+                    </div>
+
+                    <!-- Image Container with Hardware Accelerated Transform -->
+                    <div v-show="currentImageUrl" class="relative will-change-transform flex items-center justify-center max-w-full max-h-full" :style="transformStyle">
+                        <img
+                            ref="imageRef"
+                            :src="currentImageUrl"
+                            :alt="currentImageName"
+                            class="max-w-[85vw] max-h-[75vh] object-contain pointer-events-none select-none drop-shadow-2xl transition-opacity duration-200"
+                            :class="{ 'opacity-0': loading, 'opacity-100': !loading }"
+                            crossorigin="anonymous"
+                            @load="onImageLoaded"
+                            @error="onImageError"
+                        />
+                    </div>
+
+                    <!-- Navigation Arrow: Previous (Right side in RTL, left side in LTR) -->
+                    <button v-if="validImages.length > 1" type="button" class="iv-nav-btn absolute right-4 top-1/2 -translate-y-1/2 z-20" title="تصویر قبلی (کلید جهت‌نما)" @click.stop="prevImage">
+                        <i class="pi pi-chevron-right text-xl"></i>
+                    </button>
+
+                    <!-- Navigation Arrow: Next (Left side in RTL, right side in LTR) -->
+                    <button v-if="validImages.length > 1" type="button" class="iv-nav-btn absolute left-4 top-1/2 -translate-y-1/2 z-20" title="تصویر بعدی (کلید جهت‌نما)" @click.stop="nextImage">
+                        <i class="pi pi-chevron-left text-xl"></i>
+                    </button>
+                </div>
+
+                <!-- FLOATING BOTTOM TOOLBAR -->
+                <div class="relative z-20 flex flex-col items-center gap-2 pb-3 px-4 pointer-events-none">
+                    <div class="pointer-events-auto flex items-center gap-1.5 p-1.5 rounded-2xl bg-surface-900/80 dark:bg-surface-950/80 backdrop-blur-xl border border-white/10 shadow-2xl">
+                        <!-- Zoom Out -->
+                        <button type="button" class="iv-tool-btn" title="کوچک‌نمایی (-)" :disabled="scale <= minScale" @click="zoomOut">
+                            <i class="pi pi-search-minus text-sm"></i>
+                        </button>
+
+                        <!-- Zoom Percentage / Reset Zoom -->
+                        <button type="button" class="iv-tool-btn px-3 font-mono text-xs font-semibold text-white/90 min-w-[54px] text-center" title="بازنشانی بزرگ‌نمایی (0)" @click="resetTransform">{{ Math.round(scale * 100) }}%</button>
+
+                        <!-- Zoom In -->
+                        <button type="button" class="iv-tool-btn" title="بزرگ‌نمایی (+)" :disabled="scale >= maxScale" @click="zoomIn">
+                            <i class="pi pi-search-plus text-sm"></i>
+                        </button>
+
+                        <div class="w-[1px] h-5 bg-white/15 mx-1"></div>
+
+                        <!-- 1:1 Actual Size -->
+                        <button type="button" class="iv-tool-btn" :class="{ 'text-primary-400 bg-white/10': isActualSize }" title="اندازه واقعی (۱:۱)" @click="toggleActualSize">
+                            <span class="text-xs font-bold font-mono">1:1</span>
+                        </button>
+
+                        <!-- Rotate Counter-Clockwise -->
+                        <button type="button" class="iv-tool-btn" title="چرخش ۹۰ درجه پادساعت‌گرد" @click="rotateLeft">
+                            <i class="pi pi-replay text-sm"></i>
+                        </button>
+
+                        <!-- Rotate Clockwise -->
+                        <button type="button" class="iv-tool-btn" title="چرخش ۹۰ درجه ساعت‌گرد (R)" @click="rotateRight">
+                            <i class="pi pi-refresh text-sm"></i>
+                        </button>
+
+                        <!-- Flip Horizontal -->
+                        <button type="button" class="iv-tool-btn" :class="{ 'text-primary-400 bg-white/10': flipH === -1 }" title="قرینه افقی" @click="toggleFlipH">
+                            <i class="pi pi-arrows-h text-sm"></i>
+                        </button>
+
+                        <!-- Flip Vertical -->
+                        <button type="button" class="iv-tool-btn" :class="{ 'text-primary-400 bg-white/10': flipV === -1 }" title="قرینه عمودی" @click="toggleFlipV">
+                            <i class="pi pi-arrows-v text-sm"></i>
+                        </button>
+
+                        <div class="w-[1px] h-5 bg-white/15 mx-1"></div>
+
+                        <!-- Reset Everything -->
+                        <button type="button" class="iv-tool-btn" title="تنظیم مجدد موقعیت و چرخش" @click="resetTransform">
+                            <i class="pi pi-undo text-sm"></i>
+                        </button>
+
+                        <!-- Toggle Thumbnail Strip -->
+                        <button v-if="validImages.length > 1" type="button" class="iv-tool-btn" :class="{ 'text-primary-400 bg-white/10': showThumbnails }" title="نمایش/مخفی‌سازی گالری تصاویر" @click="showThumbnails = !showThumbnails">
+                            <i class="pi pi-images text-sm"></i>
+                        </button>
+                    </div>
+
+                    <!-- THUMBNAIL STRIP CAROUSEL -->
+                    <Transition name="iv-slide-up">
+                        <div
+                            v-if="showThumbnails && validImages.length > 1"
+                            class="pointer-events-auto flex items-center gap-2 p-2 rounded-2xl bg-black/60 backdrop-blur-xl border border-white/10 max-w-[90vw] overflow-x-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
+                        >
+                            <button
+                                v-for="(img, idx) in validImages"
+                                :key="idx"
+                                type="button"
+                                class="relative flex-shrink-0 w-14 h-14 rounded-xl overflow-hidden border-2 transition-all duration-200 cursor-pointer focus:outline-none"
+                                :class="idx === currentIndex ? 'border-primary-400 ring-2 ring-primary-400/40 scale-105 opacity-100 shadow-lg' : 'border-white/20 opacity-60 hover:opacity-100 hover:border-white/50'"
+                                @click="selectImage(idx)"
+                            >
+                                <img :src="getImageUrl(img)" :alt="getImageName(img)" class="w-full h-full object-cover" crossorigin="anonymous" />
+                            </button>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.iv-btn {
+    @apply flex items-center justify-center w-9 h-9 rounded-full bg-white/10 hover:bg-white/20 active:bg-white/30 text-white/90 transition-all backdrop-blur-md border border-white/10 cursor-pointer shadow-md focus:outline-none;
+}
+
+.iv-btn-close {
+    @apply bg-red-500/80 hover:bg-red-600 text-white border-red-400/30;
+}
+
+.iv-nav-btn {
+    @apply flex items-center justify-center w-12 h-12 rounded-full bg-surface-900/70 hover:bg-surface-900 text-white/80 hover:text-white transition-all backdrop-blur-xl border border-white/15 shadow-2xl cursor-pointer hover:scale-110 active:scale-95 focus:outline-none;
+}
+
+.iv-tool-btn {
+    @apply flex items-center justify-center h-8 px-2.5 rounded-xl text-white/80 hover:text-white hover:bg-white/10 active:bg-white/20 transition-all cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed focus:outline-none;
+}
+
+/* Animations */
+.iv-fade-enter-active,
+.iv-fade-leave-active {
+    transition: opacity 0.25s ease;
+}
+
+.iv-fade-enter-from,
+.iv-fade-leave-to {
+    opacity: 0;
+}
+
+.iv-slide-up-enter-active,
+.iv-slide-up-leave-active {
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.iv-slide-up-enter-from,
+.iv-slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(12px);
+}
+</style>
diff --git a/src/views/uikit/KiwiChips.vue b/src/views/uikit/KiwiChips.vue
index 5bfcdde..841b9cf 100644
--- a/src/views/uikit/KiwiChips.vue
+++ b/src/views/uikit/KiwiChips.vue
@@ -1,11 +1,3 @@
-<template>
-    <!-- Outer container that mimics a text field with a green border -->
-    <div class="flex flex-wrap items-center gap-2 rounded p-2 cursor-text" @click="focusInput">
-        <InputText v-model="inputValue" @keyup.enter="addChip" :placeholder="placeholder" class="w-full min-w-[100px]" />
-        <Chip v-for="(tag, index) in localTags" :key="tag" :label="tag" removable @remove="removeChip(index)" class="text-sm" />
-    </div>
-</template>
-
 <script setup>
 import { ref, watch } from 'vue';
 import Chip from 'primevue/chip';
@@ -51,6 +43,14 @@ function removeChip(index) {
 }
 </script>
 
+<template>
+    <!-- Outer container that mimics a text field with a green border -->
+    <div class="flex flex-wrap items-center gap-2 rounded p-2 cursor-text" @click="focusInput">
+        <InputText v-model="inputValue" @keyup.enter="addChip" :placeholder="placeholder" class="w-full min-w-[100px]" />
+        <Chip v-for="(tag, index) in localTags" :key="tag" :label="tag" removable @remove="removeChip(index)" class="text-sm" />
+    </div>
+</template>
+
 <!--
   No <style> block is needed if you're using Tailwind CSS utility classes.
   However, if you need to override or add custom CSS, do it here or in a global stylesheet.
diff --git a/src/views/uikit/KiwiToggleSwitch.vue b/src/views/uikit/KiwiToggleSwitch.vue
index 902f8cc..4da83dc 100644
--- a/src/views/uikit/KiwiToggleSwitch.vue
+++ b/src/views/uikit/KiwiToggleSwitch.vue
@@ -1,10 +1,3 @@
-<template>
-    <FloatLabel>
-        <ToggleSwitch :id="id" v-model="computedValue" :class="inputClass" @change="handleChange" @keyup="handleKeyUp" />
-        <label :for="id">label</label>
-    </FloatLabel>
-</template>
-
 <script setup>
 import ToggleSwitch from 'primevue/toggleswitch';
 import { computed } from 'vue';
@@ -46,3 +39,10 @@ const handleKeyUp = (event) => {
     emit('key-up-event', event);
 };
 </script>
+
+<template>
+    <FloatLabel>
+        <ToggleSwitch :id="id" v-model="computedValue" :class="inputClass" @change="handleChange" @keyup="handleKeyUp" />
+        <label :for="id">label</label>
+    </FloatLabel>
+</template>
diff --git a/src/views/uikit/MapComponent.vue b/src/views/uikit/MapComponent.vue
index b0e1e55..7abc7d1 100644
--- a/src/views/uikit/MapComponent.vue
+++ b/src/views/uikit/MapComponent.vue
@@ -1,137 +1,3 @@
-<template>
-    <div ref="mapContainer" class="map-container" :class="{ 'map-fullscreen': isFullscreen }">
-
-        <!-- ── Top-left: Search bar ── -->
-        <div class="map-overlay search-bar-wrap">
-            <span class="search-icon">🔍</span>
-            <input
-                v-model="searchQuery"
-                @keyup.enter="handleSearch"
-                placeholder="جستجو روی نقشه..."
-                class="search-input"
-            />
-            <button v-if="searchQuery" class="search-clear" @click="searchQuery = ''" title="پاک کردن">✕</button>
-        </div>
-
-        <!-- ── Top-right: Action buttons ── -->
-        <div class="map-overlay action-buttons">
-            <!-- Fullscreen toggle -->
-            <button class="map-btn" @click="toggleFullscreen" :title="isFullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'">
-                <!-- Exit fullscreen icon -->
-                <svg v-if="isFullscreen" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/>
-                    <path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>
-                </svg>
-                <!-- Enter fullscreen icon -->
-                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M3 7V3h4"/><path d="M21 7V3h-4"/>
-                    <path d="M3 17v4h4"/><path d="M21 17v4h-4"/>
-                </svg>
-            </button>
-            <!-- Locate me -->
-            <button class="map-btn map-btn-locate" @click="locateMe" title="موقعیت من" :class="{ locating: isLocating }">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="3"/>
-                    <path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
-                    <circle cx="12" cy="12" r="7" opacity="0.3"/>
-                </svg>
-            </button>
-            <!-- Clear marker -->
-            <button v-if="marker.length > 0" class="map-btn map-btn-danger" @click="clearMarker" title="حذف نشانگر">
-                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="3 6 5 6 21 6"/>
-                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
-                    <path d="M10 11v6M14 11v6"/>
-                    <path d="M9 6V4h6v2"/>
-                </svg>
-            </button>
-        </div>
-
-        <!-- ── Bottom-left: Coordinate readout ── -->
-        <div v-if="hoverCoords" class="map-overlay coords-readout">
-            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="opacity:0.7;flex-shrink:0">
-                <circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
-            </svg>
-            <span>{{ hoverCoords.lat.toFixed(6) }}, {{ hoverCoords.lon.toFixed(6) }}</span>
-        </div>
-
-        <!-- ── Bottom-right: Marker info pill ── -->
-        <div v-if="marker.length > 0" class="map-overlay marker-info">
-            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="#6366f1" stroke="#6366f1" stroke-width="1">
-                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-            </svg>
-            <span class="marker-coords">{{ marker[0].toFixed(5) }}, {{ marker[1].toFixed(5) }}</span>
-            <button class="copy-btn" @click="copyCoords" :title="copied ? 'کپی شد!' : 'کپی مختصات'">
-                <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
-                    <rect x="9" y="9" width="13" height="13" rx="2"/>
-                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-                </svg>
-                <svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5">
-                    <polyline points="20 6 9 17 4 12"/>
-                </svg>
-            </button>
-        </div>
-
-        <!-- Lock Indicator -->
-        <div v-if="locked" class="map-overlay lock-indicator">
-            🔒 قفل شده
-        </div>
-
-        <!-- ── Leaflet Map ── -->
-        <l-map
-            ref="map"
-            v-model:zoom="zoom"
-            :center="center"
-            :use-global-leaflet="false"
-            style="height: 100%; width: 100%;"
-            @click="handleClick($event)"
-            @mousemove="handleMouseMove($event)"
-            @mouseout="hoverCoords = null"
-            @ready="onMapReady"
-        >
-            <!-- Layer switcher -->
-            <l-control-layers position="bottomright" />
-
-            <!-- OpenStreetMap -->
-            <l-tile-layer
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                layer-type="base"
-                name="نمای نقشه‌ای"
-                :attribution="attribution"
-            />
-
-            <!-- Satellite -->
-            <l-tile-layer
-                :visible="false"
-                url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
-                layer-type="base"
-                name="نمای ماهواره‌ای"
-                attribution="Tiles &copy; Esri"
-            />
-
-            <!-- Scale control -->
-            <l-control-scale position="bottomleft" :imperial="false" :maxWidth="150" />
-
-            <!-- Marker with rich popup -->
-            <l-marker v-if="marker.length > 0" :lat-lng="marker">
-                <l-popup>
-                    <div class="popup-content">
-                        <strong>📍 نقطه انتخاب‌شده</strong><br />
-                        <span>عرض: {{ marker[0].toFixed(6) }}</span><br />
-                        <span>طول: {{ marker[1].toFixed(6) }}</span>
-                    </div>
-                </l-popup>
-            </l-marker>
-        </l-map>
-
-        <!-- Locating spinner overlay -->
-        <div v-if="isLocating" class="locating-overlay">
-            <div class="locating-spinner"></div>
-            <span>در حال تعیین موقعیت...</span>
-        </div>
-    </div>
-</template>
-
 <script setup>
 import { ref, watch, nextTick, onBeforeUnmount } from 'vue';
 import 'leaflet/dist/leaflet.css';
@@ -188,7 +54,7 @@ const clearMarker = () => {
     marker.value = [];
     emit('update:modelValue', []);
     emit('marker-updated', []);
-    emit('cleared');  // notify parent to also reset nationalGeoCode
+    emit('cleared'); // notify parent to also reset nationalGeoCode
 };
 
 // ── Fullscreen ─────────────────────────────────────────────────────────────
@@ -229,7 +95,9 @@ const locateMe = () => {
             isLocating.value = false;
             setMarker(pos.coords.latitude, pos.coords.longitude);
         },
-        () => { isLocating.value = false; },
+        () => {
+            isLocating.value = false;
+        },
         { timeout: 10000, enableHighAccuracy: true }
     );
 };
@@ -332,6 +200,117 @@ watch(
 defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, searchLocation, onMapReady });
 </script>
 
+<template>
+    <div ref="mapContainer" class="map-container" :class="{ 'map-fullscreen': isFullscreen }">
+        <!-- ── Top-left: Search bar ── -->
+        <div class="map-overlay search-bar-wrap">
+            <span class="search-icon">🔍</span>
+            <input v-model="searchQuery" @keyup.enter="handleSearch" placeholder="جستجو روی نقشه..." class="search-input" />
+            <button v-if="searchQuery" class="search-clear" @click="searchQuery = ''" title="پاک کردن">✕</button>
+        </div>
+
+        <!-- ── Top-right: Action buttons ── -->
+        <div class="map-overlay action-buttons">
+            <!-- Fullscreen toggle -->
+            <button class="map-btn" @click="toggleFullscreen" :title="isFullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'">
+                <!-- Exit fullscreen icon -->
+                <svg v-if="isFullscreen" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M8 3v3a2 2 0 0 1-2 2H3" />
+                    <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+                    <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+                    <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+                </svg>
+                <!-- Enter fullscreen icon -->
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M3 7V3h4" />
+                    <path d="M21 7V3h-4" />
+                    <path d="M3 17v4h4" />
+                    <path d="M21 17v4h-4" />
+                </svg>
+            </button>
+            <!-- Locate me -->
+            <button class="map-btn map-btn-locate" @click="locateMe" title="موقعیت من" :class="{ locating: isLocating }">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="3" />
+                    <path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
+                    <circle cx="12" cy="12" r="7" opacity="0.3" />
+                </svg>
+            </button>
+            <!-- Clear marker -->
+            <button v-if="marker.length > 0" class="map-btn map-btn-danger" @click="clearMarker" title="حذف نشانگر">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                    <path d="M10 11v6M14 11v6" />
+                    <path d="M9 6V4h6v2" />
+                </svg>
+            </button>
+        </div>
+
+        <!-- ── Bottom-left: Coordinate readout ── -->
+        <div v-if="hoverCoords" class="map-overlay coords-readout">
+            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="opacity: 0.7; flex-shrink: 0">
+                <circle cx="12" cy="12" r="3" />
+                <path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
+            </svg>
+            <span>{{ hoverCoords.lat.toFixed(6) }}, {{ hoverCoords.lon.toFixed(6) }}</span>
+        </div>
+
+        <!-- ── Bottom-right: Marker info pill ── -->
+        <div v-if="marker.length > 0" class="map-overlay marker-info">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="#6366f1" stroke="#6366f1" stroke-width="1">
+                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
+            </svg>
+            <span class="marker-coords">{{ marker[0].toFixed(5) }}, {{ marker[1].toFixed(5) }}</span>
+            <button class="copy-btn" @click="copyCoords" :title="copied ? 'کپی شد!' : 'کپی مختصات'">
+                <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+                    <rect x="9" y="9" width="13" height="13" rx="2" />
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5">
+                    <polyline points="20 6 9 17 4 12" />
+                </svg>
+            </button>
+        </div>
+
+        <!-- Lock Indicator -->
+        <div v-if="locked" class="map-overlay lock-indicator">🔒 قفل شده</div>
+
+        <!-- ── Leaflet Map ── -->
+        <l-map ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false" style="height: 100%; width: 100%" @click="handleClick($event)" @mousemove="handleMouseMove($event)" @mouseout="hoverCoords = null" @ready="onMapReady">
+            <!-- Layer switcher -->
+            <l-control-layers position="bottomright" />
+
+            <!-- OpenStreetMap -->
+            <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="نمای نقشه‌ای" :attribution="attribution" />
+
+            <!-- Satellite -->
+            <l-tile-layer :visible="false" url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" layer-type="base" name="نمای ماهواره‌ای" attribution="Tiles &copy; Esri" />
+
+            <!-- Scale control -->
+            <l-control-scale position="bottomleft" :imperial="false" :maxWidth="150" />
+
+            <!-- Marker with rich popup -->
+            <l-marker v-if="marker.length > 0" :lat-lng="marker">
+                <l-popup>
+                    <div class="popup-content">
+                        <strong>📍 نقطه انتخاب‌شده</strong><br />
+                        <span>عرض: {{ marker[0].toFixed(6) }}</span
+                        ><br />
+                        <span>طول: {{ marker[1].toFixed(6) }}</span>
+                    </div>
+                </l-popup>
+            </l-marker>
+        </l-map>
+
+        <!-- Locating spinner overlay -->
+        <div v-if="isLocating" class="locating-overlay">
+            <div class="locating-spinner"></div>
+            <span>در حال تعیین موقعیت...</span>
+        </div>
+    </div>
+</template>
+
 <style scoped>
 /* ── Container ──────────────────────────────────────────────────────────── */
 .map-container {
@@ -370,12 +349,15 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
     -webkit-backdrop-filter: blur(8px);
     border-radius: 12px;
     padding: 6px 10px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
-    border: 1px solid rgba(255,255,255,0.6);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.6);
     max-width: 280px;
 }
 
-.search-icon { font-size: 13px; opacity: 0.5; }
+.search-icon {
+    font-size: 13px;
+    opacity: 0.5;
+}
 
 .search-input {
     border: none;
@@ -388,7 +370,9 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
     direction: rtl;
 }
 
-.search-input::placeholder { color: #9ca3af; }
+.search-input::placeholder {
+    color: #9ca3af;
+}
 
 .search-clear {
     background: none;
@@ -400,7 +384,9 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
     line-height: 1;
     transition: color 0.15s;
 }
-.search-clear:hover { color: #ef4444; }
+.search-clear:hover {
+    color: #ef4444;
+}
 
 /* ── Action buttons (top-right) ─────────────────────────────────────────── */
 .action-buttons {
@@ -418,45 +404,57 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
     border: none;
     background: #6366f1;
     color: #fff;
-    box-shadow: 0 3px 10px rgba(99,102,241,0.35);
+    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
+    transition:
+        background 0.15s,
+        transform 0.1s,
+        box-shadow 0.15s;
 }
 
 .map-btn:hover {
     background: #4f46e5;
-    box-shadow: 0 6px 18px rgba(79,70,229,0.45);
+    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45);
     transform: scale(1.06);
 }
 
-.map-btn:active { transform: scale(0.95); }
+.map-btn:active {
+    transform: scale(0.95);
+}
 
 .map-btn-locate {
     background: #0ea5e9;
-    box-shadow: 0 3px 10px rgba(14,165,233,0.35);
+    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.35);
 }
 .map-btn-locate:hover {
     background: #0284c7;
-    box-shadow: 0 6px 18px rgba(2,132,199,0.45);
+    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
 }
 
-.map-btn.locating { animation: pulse-btn 1s infinite; }
+.map-btn.locating {
+    animation: pulse-btn 1s infinite;
+}
 
 .map-btn-danger {
     background: #ef4444;
-    box-shadow: 0 3px 10px rgba(239,68,68,0.35);
+    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
 }
 .map-btn-danger:hover {
     background: #dc2626;
-    box-shadow: 0 6px 18px rgba(220,38,38,0.45);
+    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
 }
 
 @keyframes pulse-btn {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.5); }
-    50%       { box-shadow: 0 0 0 8px rgba(14,165,233,0); }
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.5);
+    }
+    50% {
+        box-shadow: 0 0 0 8px rgba(14, 165, 233, 0);
+    }
 }
 
 /* ── Coordinate readout (bottom-left) ────────────────────────────────────────────── */
@@ -485,20 +483,25 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
     display: flex;
     align-items: center;
     gap: 6px;
-    background: rgba(255,255,255,0.95);
+    background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border-radius: 20px;
     padding: 5px 12px;
-    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
-    border: 1px solid rgba(255,255,255,0.6);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
+    border: 1px solid rgba(255, 255, 255, 0.6);
     font-size: 12px;
     color: #1a1a2e;
     max-width: 260px;
 }
 
-.marker-pin-icon { font-size: 14px; }
-.marker-coords   { font-family: 'Courier New', monospace; font-size: 11px; }
+.marker-pin-icon {
+    font-size: 14px;
+}
+.marker-coords {
+    font-family: 'Courier New', monospace;
+    font-size: 11px;
+}
 
 .copy-btn {
     background: none;
@@ -509,14 +512,16 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
     padding: 0;
     transition: transform 0.1s;
 }
-.copy-btn:hover { transform: scale(1.2); }
+.copy-btn:hover {
+    transform: scale(1.2);
+}
 
 /* ── Locating overlay ───────────────────────────────────────────────────── */
 .locating-overlay {
     position: absolute;
     inset: 0;
     z-index: 1100;
-    background: rgba(255,255,255,0.55);
+    background: rgba(255, 255, 255, 0.55);
     backdrop-filter: blur(4px);
     display: flex;
     flex-direction: column;
@@ -532,14 +537,16 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
 .locating-spinner {
     width: 36px;
     height: 36px;
-    border: 3px solid rgba(99,102,241,0.2);
+    border: 3px solid rgba(99, 102, 241, 0.2);
     border-top-color: #6366f1;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 /* ── Lock badge ──────────────────────────────────────────────────────────── */
@@ -570,7 +577,7 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
 .app-dark .search-bar-wrap {
     background: rgba(30, 30, 50, 0.92) !important;
     border-color: rgba(99, 102, 241, 0.25) !important;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
 }
 
 .app-dark .search-input {
@@ -590,7 +597,7 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
     background: rgba(30, 30, 50, 0.92) !important;
     border-color: rgba(99, 102, 241, 0.25) !important;
     color: #e2e8f0 !important;
-    box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
 }
 
 /* Locating overlay */
@@ -600,7 +607,7 @@ defineExpose({ searchByCoordinates: setMarker, setCenterAndMarker: setMarker, se
 }
 
 .app-dark .locating-spinner {
-    border-color: rgba(99,102,241,0.15) !important;
+    border-color: rgba(99, 102, 241, 0.15) !important;
     border-top-color: #818cf8 !important;
 }
 </style>
diff --git a/src/views/uikit/MediaDoc.vue b/src/views/uikit/MediaDoc.vue
index 0a16894..edffd1d 100644
--- a/src/views/uikit/MediaDoc.vue
+++ b/src/views/uikit/MediaDoc.vue
@@ -3,8 +3,17 @@ import { PhotoService } from '@/service/PhotoService';
 import { ProductService } from '@/service/ProductService';
 import { onMounted, ref } from 'vue';
 
+import ImageGallery from '@/views/uikit/ImageGallery.vue';
+
 const products = ref([]);
 const images = ref([]);
+const sampleGalleryImages = ref([
+    { url: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg', name: 'تصویر منظره شماره ۱' },
+    { url: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg', name: 'تصویر منظره شماره ۲' },
+    { url: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg', name: 'تصویر سند / عمودی' },
+    { url: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13.jpg', name: 'تصویر شماره ۴' },
+    { url: 'https://example.com/sample-document.pdf', name: 'سند_مالکیت.pdf' }
+]);
 const galleriaResponsiveOptions = ref([
     {
         breakpoint: '1024px',
@@ -91,7 +100,13 @@ function getSeverity(status) {
     </div>
 
     <div class="card">
-        <div class="font-semibold text-xl mb-4">Image</div>
+        <div class="font-semibold text-xl mb-2">Image Gallery with Aspect-Preserving Zoom & Rotate</div>
+        <p class="text-surface-500 mb-4">گالری پیشرفته تصاویر با بزرگ‌نمایی بدون تغییر نسبت تصویر (بدون کشیدگی)، قابلیت چرخش ۹۰ درجه، قرینه، تمام صفحه و نوار پیش‌نمایش بندانگشتی.</p>
+        <ImageGallery v-model="sampleGalleryImages" galleryId="demoMediaGallery" />
+    </div>
+
+    <div class="card">
+        <div class="font-semibold text-xl mb-4">PrimeVue Image</div>
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>