diff --git a/hesabixCore/src/Controller/BusinessController.php b/hesabixCore/src/Controller/BusinessController.php
index ebe3b55..f73b042 100644
--- a/hesabixCore/src/Controller/BusinessController.php
+++ b/hesabixCore/src/Controller/BusinessController.php
@@ -542,6 +542,7 @@ class BusinessController extends AbstractController
                 'plugAccproCloseYear' => true,
                 'plugAccproPresell' => true,
                 'plugRepservice' => true,
+                'plugHrmDocs' => true,
             ];
         } elseif ($perm) {
             $result = [
@@ -583,6 +584,7 @@ class BusinessController extends AbstractController
                 'plugAccproCloseYear' => $perm->isPlugAccproCloseYear(),
                 'plugRepservice' => $perm->isPlugRepservice(),
                 'plugAccproPresell' => $perm->isPlugAccproPresell(),
+                'plugHrmDocs' => $perm->isPlugHrmDocs(),
             ];
         }
         return $this->json($result);
@@ -650,6 +652,7 @@ class BusinessController extends AbstractController
                 $perm->setPlugAccproPresell($params['plugAccproPresell']);
                 $perm->setPlugAccproAccounting($params['plugAccproAccounting']);
                 $perm->setPlugRepservice($params['plugRepservice']);
+                $perm->setPlugHrmDocs($params['plugHrmDocs']);
                 $entityManager->persist($perm);
                 $entityManager->flush();
                 $log->insert('تنظیمات پایه', 'ویرایش دسترسی‌های کاربر با پست الکترونیکی ' . $user->getEmail(), $this->getUser(), $business);
diff --git a/hesabixCore/src/Controller/CostController.php b/hesabixCore/src/Controller/CostController.php
index 379f19b..e06e45a 100644
--- a/hesabixCore/src/Controller/CostController.php
+++ b/hesabixCore/src/Controller/CostController.php
@@ -269,10 +269,10 @@ class CostController extends AbstractController
                             ->setParameter('today', $today);
                         break;
                     case 'custom':
-                        if (isset($filters['dateFrom']) && isset($filters['dateTo'])) {
+                        if (isset($filters['date']) && isset($filters['date']['from']) && isset($filters['date']['to'])) {
                             $queryBuilder->andWhere('d.date BETWEEN :dateFrom AND :dateTo')
-                                ->setParameter('dateFrom', $filters['dateFrom'])
-                                ->setParameter('dateTo', $filters['dateTo']);
+                                ->setParameter('dateFrom', $filters['date']['from'])
+                                ->setParameter('dateTo', $filters['date']['to']);
                         }
                         break;
                 }
diff --git a/hesabixCore/src/Entity/Permission.php b/hesabixCore/src/Entity/Permission.php
index 96ab27a..ec735fb 100644
--- a/hesabixCore/src/Entity/Permission.php
+++ b/hesabixCore/src/Entity/Permission.php
@@ -123,6 +123,9 @@ class Permission
     #[ORM\Column(nullable: true)]
     private ?bool $plugAccproPresell = null;
 
+    #[ORM\Column(nullable: true)]
+    private ?bool $plugHrmDocs = null;
+
     public function getId(): ?int
     {
         return $this->id;
@@ -560,4 +563,16 @@ class Permission
         return $this;
     }
 
+    public function isPlugHrmDocs(): ?bool
+    {
+        return $this->plugHrmDocs;
+    }
+
+    public function setPlugHrmDocs(?bool $plugHrmDocs): static
+    {
+        $this->plugHrmDocs = $plugHrmDocs;
+
+        return $this;
+    }
+
 }
diff --git a/webUI/package.json b/webUI/package.json
index bc95449..f768ddc 100644
--- a/webUI/package.json
+++ b/webUI/package.json
@@ -20,6 +20,8 @@
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^13.1.0",
+        "@zxing/browser": "^0.1.5",
+        "@zxing/library": "^0.21.3",
         "animate.css": "^4.1.1",
         "apexcharts": "^4.6.0",
         "axios": "^1.8.4",
@@ -27,6 +29,7 @@
         "date-fns-jalali": "^3.2.0-0",
         "downloadjs": "^1.4.7",
         "file-saver": "^2.0.5",
+        "html5-qrcode": "^2.3.8",
         "jalali-moment": "^3.3.11",
         "libphonenumber-js": "^1.12.7",
         "lodash": "^4.17.21",
@@ -42,6 +45,7 @@
         "vue-loading-overlay": "^6.0.6",
         "vue-media-upload": "^2.2.4",
         "vue-persian-datetime-picker": "^2.10.4",
+        "vue-qrcode-reader": "^5.7.2",
         "vue-router": "^4.5.0",
         "vue-select": "^4.0.0-beta.6",
         "vue-spinner": "^1.0.4",
@@ -49,6 +53,7 @@
         "vue3-easy-data-table": "^1.5.47",
         "vue3-perfect-scrollbar": "^2.0.0",
         "vue3-persian-datetime-picker": "^1.2.2",
+        "vue3-qrcode-reader": "^0.0.1",
         "vue3-tel-input": "^1.0.4",
         "vue3-treeselect": "^0.1.10",
         "vue3-treeview": "^0.4.2",
diff --git a/webUI/public/img/plugins/hmr.jpg b/webUI/public/img/plugins/hmr.jpg
new file mode 100644
index 0000000..6811b00
Binary files /dev/null and b/webUI/public/img/plugins/hmr.jpg differ
diff --git a/webUI/public/sounds/beep.mp3 b/webUI/public/sounds/beep.mp3
new file mode 100644
index 0000000..c734804
Binary files /dev/null and b/webUI/public/sounds/beep.mp3 differ
diff --git a/webUI/src/components/application/buttons/ShortcutsButton.vue b/webUI/src/components/application/buttons/ShortcutsButton.vue
new file mode 100644
index 0000000..585ec40
--- /dev/null
+++ b/webUI/src/components/application/buttons/ShortcutsButton.vue
@@ -0,0 +1,471 @@
+<template>
+  <div>
+    <v-menu location="bottom end" :close-on-content-click="false">
+      <template v-slot:activator="{ props }">
+        <v-btn class="" stacked v-bind="props">
+          <v-icon>mdi-apps</v-icon>
+        </v-btn>
+      </template>
+
+      <v-card min-width="300" class="shortcuts-menu">
+        <v-list>
+          <v-list-item>
+            <template v-slot:prepend>
+              <v-icon color="primary">mdi-apps</v-icon>
+            </template>
+            <v-list-item-title class="text-h6">دسترسی‌های سریع</v-list-item-title>
+            <template v-slot:append>
+              <v-tooltip
+                location="top"
+                text="افزودن دسترسی سریع جدید"
+              >
+                <template v-slot:activator="{ props }">
+                  <v-btn
+                    icon
+                    variant="text"
+                    color="primary"
+                    size="small"
+                    v-bind="props"
+                    @click="showAddDialog = true"
+                  >
+                    <v-icon>mdi-plus</v-icon>
+                  </v-btn>
+                </template>
+              </v-tooltip>
+            </template>
+          </v-list-item>
+
+          <v-divider class="my-0"></v-divider>
+
+          <template v-if="!customShortcuts || customShortcuts.length === 0">
+            <v-list-item>
+              <v-list-item-title class="text-center py-4">
+                <v-icon
+                  size="32"
+                  color="grey-lighten-1"
+                  class="mb-2 d-block mx-auto"
+                >
+                  mdi-star-outline
+                </v-icon>
+                <span class="text-body-2 text-grey">
+                  هیچ دسترسی سریعی تعریف نشده است
+                </span>
+              </v-list-item-title>
+            </v-list-item>
+          </template>
+
+          <template v-else>
+            <v-list-item
+              v-for="(shortcut, index) in customShortcuts"
+              :key="index"
+              class="shortcut-item"
+              @click="navigateTo(shortcut.path)"
+            >
+              <template v-slot:prepend>
+                <v-avatar
+                  :color="getRandomColor(index)"
+                  size="32"
+                  class="shortcut-icon"
+                >
+                  <v-icon :icon="shortcut.icon" color="white" size="18"></v-icon>
+                </v-avatar>
+              </template>
+
+              <v-list-item-title class="text-body-2">
+                {{ shortcut.name }}
+              </v-list-item-title>
+
+              <template v-slot:append>
+                <div class="shortcut-actions" :class="{ 'always-show': showActions }">
+                  <v-btn
+                    v-show="showActions"
+                    icon
+                    variant="text"
+                    size="x-small"
+                    color="primary"
+                    @click.stop="editShortcut(index)"
+                  >
+                    <v-icon>mdi-pencil</v-icon>
+                  </v-btn>
+                  <v-btn
+                    v-show="showActions"
+                    icon
+                    variant="text"
+                    size="x-small"
+                    color="error"
+                    @click.stop="deleteShortcut(index)"
+                  >
+                    <v-icon>mdi-delete</v-icon>
+                  </v-btn>
+                </div>
+              </template>
+            </v-list-item>
+          </template>
+
+          <v-divider class="my-0"></v-divider>
+
+          <v-list-item class="edit-mode-item">
+            <template v-slot:prepend>
+              <v-icon size="small" color="primary">mdi-pencil</v-icon>
+            </template>
+            <v-list-item-title class="text-caption">حالت ویرایش</v-list-item-title>
+            <template v-slot:append>
+              <v-tooltip
+                location="bottom"
+                text="نمایش دکمه‌های ویرایش و حذف"
+              >
+                <template v-slot:activator="{ props }">
+                  <v-switch
+                    v-model="showActions"
+                    color="primary"
+                    hide-details
+                    density="compact"
+                    class="edit-mode-switch"
+                    v-bind="props"
+                  ></v-switch>
+                </template>
+              </v-tooltip>
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card>
+    </v-menu>
+
+    <!-- دیالوگ افزودن/ویرایش دسترسی سریع -->
+    <v-dialog v-model="showAddDialog" max-width="500">
+      <v-card class="shortcut-dialog">
+        <v-card-title class="text-h6 pa-4 d-flex align-center">
+          <v-icon color="primary" class="me-2">{{ editingIndex === null ? 'mdi-plus' : 'mdi-pencil' }}</v-icon>
+          {{ editingIndex === null ? 'افزودن دسترسی سریع' : 'ویرایش دسترسی سریع' }}
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <v-card-text class="pa-6">
+          <v-form @submit.prevent="saveShortcut">
+            <v-text-field
+              v-model="newShortcut.name"
+              label="نام"
+              required
+              variant="outlined"
+              density="comfortable"
+              class="mb-4"
+              :rules="[v => !!v || 'نام الزامی است']"
+              autofocus
+            ></v-text-field>
+
+            <v-text-field
+              v-model="newShortcut.path"
+              label="مسیر"
+              required
+              hint="برای آدرس داخلی: /acc/dashboard - برای آدرس خارجی: https://example.com"
+              persistent-hint
+              variant="outlined"
+              density="comfortable"
+              class="mb-4"
+              :rules="[
+                v => !!v || 'مسیر الزامی است',
+                v => isInternalPath(v) || v.startsWith('http') || 'مسیر باید با / یا http شروع شود'
+              ]"
+            ></v-text-field>
+
+            <v-select
+              v-model="newShortcut.icon"
+              :items="availableIcons"
+              label="آیکون"
+              required
+              variant="outlined"
+              density="comfortable"
+              item-title="title"
+              item-value="value"
+              return-object
+              :rules="[v => !!v || 'آیکون الزامی است']"
+            >
+              <template v-slot:item="{ props, item }">
+                <v-list-item v-bind="props">
+                  <template v-slot:prepend>
+                    <v-icon :icon="item.raw.value" color="primary"></v-icon>
+                  </template>
+                </v-list-item>
+              </template>
+              <template v-slot:selection="{ item }">
+                <div class="d-flex align-center">
+                  <v-icon :icon="item.raw.value" color="primary" class="me-2"></v-icon>
+                  <span>{{ item.raw.title }}</span>
+                </div>
+              </template>
+            </v-select>
+          </v-form>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="pa-4">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="error"
+            variant="text"
+            @click="showAddDialog = false"
+            class="px-4"
+          >
+            انصراف
+          </v-btn>
+          <v-btn
+            color="primary"
+            @click="saveShortcut"
+            :loading="saving"
+            class="px-4"
+          >
+            {{ editingIndex === null ? 'افزودن' : 'ویرایش' }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ShortcutsButton',
+  data() {
+    return {
+      showAddDialog: false,
+      editingIndex: null,
+      customShortcuts: [],
+      saving: false,
+      showActions: false,
+      newShortcut: {
+        name: '',
+        path: '',
+        icon: 'mdi-link'
+      },
+      availableIcons: [
+        { title: 'لینک', value: 'mdi-link' },
+        { title: 'داشبورد', value: 'mdi-view-dashboard' },
+        { title: 'کاربران', value: 'mdi-account-group' },
+        { title: 'گزارش‌ها', value: 'mdi-chart-bar' },
+        { title: 'تنظیمات', value: 'mdi-cog' },
+        { title: 'فایل', value: 'mdi-file' },
+        { title: 'پیام', value: 'mdi-message' },
+        { title: 'نوتیفیکیشن', value: 'mdi-bell' },
+        { title: 'فروش', value: 'mdi-cart' },
+        { title: 'خرید', value: 'mdi-cart-arrow-down' },
+        { title: 'انبار', value: 'mdi-warehouse' },
+        { title: 'بانک', value: 'mdi-bank' },
+        { title: 'صندوق', value: 'mdi-cash-register' },
+        { title: 'چک', value: 'mdi-checkbook' },
+        { title: 'حسابداری', value: 'mdi-calculator' },
+        { title: 'گزارش', value: 'mdi-file-document' },
+        { title: 'فاکتور جدید', value: 'mdi-file-plus' },
+        { title: 'فاکتور فروش', value: 'mdi-file-document-edit' },
+        { title: 'فاکتور خرید', value: 'mdi-file-document-edit-outline' },
+        { title: 'شخص جدید', value: 'mdi-account-plus' },
+        { title: 'مشتری', value: 'mdi-account' },
+        { title: 'تامین کننده', value: 'mdi-account-tie' },
+        { title: 'کالا جدید', value: 'mdi-package-variant-plus' },
+        { title: 'کالا', value: 'mdi-package-variant' },
+        { title: 'دسته‌بندی', value: 'mdi-shape' },
+        { title: 'قیمت', value: 'mdi-currency-usd' },
+        { title: 'تخفیف', value: 'mdi-tag-multiple' },
+        { title: 'مالیات', value: 'mdi-percent' },
+        { title: 'پرداخت', value: 'mdi-cash' },
+        { title: 'دریافت', value: 'mdi-cash-plus' },
+        { title: 'انتقال وجه', value: 'mdi-bank-transfer' },
+        { title: 'صورتحساب', value: 'mdi-receipt' },
+        { title: 'سند حسابداری', value: 'mdi-book-open-variant' },
+        { title: 'دفتر کل', value: 'mdi-book' },
+        { title: 'دفتر روزنامه', value: 'mdi-book-open' },
+        { title: 'ترازنامه', value: 'mdi-scale-balance' },
+        { title: 'سود و زیان', value: 'mdi-chart-line' },
+        { title: 'جریان نقدی', value: 'mdi-cash-flow' },
+        { title: 'بودجه', value: 'mdi-chart-box' },
+        { title: 'پیش‌بینی', value: 'mdi-chart-timeline-variant' },
+        { title: 'دوره مالی', value: 'mdi-calendar-clock' },
+        { title: 'سال مالی', value: 'mdi-calendar-range' },
+        { title: 'بستن دوره', value: 'mdi-calendar-check' },
+        { title: 'تنظیمات مالی', value: 'mdi-cog-outline' },
+        { title: 'تعریف حساب', value: 'mdi-account-cog' },
+        { title: 'تعریف مرکز هزینه', value: 'mdi-account-group-outline' },
+        { title: 'تعریف پروژه', value: 'mdi-briefcase-outline' }
+      ],
+      colors: [
+        'primary',
+        'secondary',
+        'success',
+        'info',
+        'warning',
+        'error'
+      ]
+    }
+  },
+  mounted() {
+    this.loadShortcuts()
+  },
+  methods: {
+    loadShortcuts() {
+      const savedShortcuts = localStorage.getItem('customShortcuts')
+      if (savedShortcuts) {
+        this.customShortcuts = JSON.parse(savedShortcuts)
+      }
+    },
+    isInternalPath(path) {
+      return path.startsWith('/acc/') || path.startsWith('/')
+    },
+    navigateTo(path) {
+      if (!this.showActions) {
+        if (this.isInternalPath(path)) {
+          this.$router.push(path)
+        } else {
+          window.open(path, '_blank')
+        }
+      }
+    },
+    saveShortcuts() {
+      localStorage.setItem('customShortcuts', JSON.stringify(this.customShortcuts))
+    },
+    getRandomColor(index) {
+      return this.colors[index % this.colors.length]
+    },
+    async saveShortcut() {
+      this.saving = true
+      try {
+        if (!this.newShortcut.path) {
+          throw new Error('مسیر نمی‌تواند خالی باشد')
+        }
+        
+        if (!this.isInternalPath(this.newShortcut.path) && !this.newShortcut.path.startsWith('http')) {
+          throw new Error('برای آدرس‌های خارجی باید از http یا https استفاده کنید')
+        }
+
+        const shortcutToSave = {
+          name: this.newShortcut.name,
+          path: this.newShortcut.path,
+          icon: this.newShortcut.icon.value
+        }
+
+        if (this.editingIndex === null) {
+          this.customShortcuts.push(shortcutToSave)
+        } else {
+          this.customShortcuts[this.editingIndex] = shortcutToSave
+        }
+        this.saveShortcuts()
+        this.showAddDialog = false
+        this.resetNewShortcut()
+      } catch (error) {
+        this.$toast.error(error.message)
+      } finally {
+        this.saving = false
+      }
+    },
+    editShortcut(index) {
+      this.editingIndex = index
+      this.newShortcut = { ...this.customShortcuts[index] }
+      this.showAddDialog = true
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    deleteShortcut(index) {
+      this.customShortcuts.splice(index, 1)
+      this.saveShortcuts()
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    resetNewShortcut() {
+      this.newShortcut = {
+        name: '',
+        path: '',
+        icon: 'mdi-link'
+      }
+      this.editingIndex = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shortcuts-menu {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.shortcut-item {
+  transition: all 0.2s ease;
+}
+
+.shortcut-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+
+.shortcut-actions {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.shortcut-actions.always-show {
+  opacity: 1;
+}
+
+.shortcut-item:hover .shortcut-actions:not(.always-show) {
+  opacity: 1;
+}
+
+.shortcut-icon {
+  transition: transform 0.2s ease;
+}
+
+.shortcut-item:hover .shortcut-icon {
+  transform: scale(1.1);
+}
+
+.shortcut-btn {
+  position: relative;
+}
+
+.shortcut-btn::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background-color: rgb(var(--v-theme-primary));
+  transition: width 0.2s ease;
+}
+
+.shortcut-btn:hover::after {
+  width: 100%;
+}
+
+.edit-mode-item {
+  min-height: 36px !important;
+  padding: 0 16px !important;
+}
+
+.edit-mode-switch {
+  transform: scale(0.8);
+  margin-right: -8px;
+}
+
+.text-caption {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.shortcut-dialog {
+  border-radius: 12px;
+}
+
+.shortcut-dialog .v-card-title {
+  font-weight: 600;
+}
+
+.shortcut-dialog .v-card-text {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.shortcut-dialog .v-btn {
+  min-width: 100px;
+}
+</style> 
\ No newline at end of file
diff --git a/webUI/src/components/application/buttons/notifications_btn.vue b/webUI/src/components/application/buttons/notifications_btn.vue
index ce22cce..a7214a0 100644
--- a/webUI/src/components/application/buttons/notifications_btn.vue
+++ b/webUI/src/components/application/buttons/notifications_btn.vue
@@ -2,10 +2,17 @@
 import { defineComponent } from 'vue'
 import axios from 'axios';
 
+interface NotificationItem {
+  id: number;
+  message: string;
+  date: string;
+  url: string;
+}
+
 export default defineComponent({
   name: "notifications_btn",
   data: () => ({
-    items: [],
+    items: [] as NotificationItem[],
     timeoutId: null as number | null, // برای ذخیره ID تایمر
   }),
   components: {},
@@ -19,7 +26,7 @@ export default defineComponent({
     }
   },
   methods: {
-    jump(item) {
+    jump(item: NotificationItem) {
       axios.post('/api/notifications/read/' + item.id).then((response) => {
         if (item.url.startsWith('http')) {
           window.location.href = item.url;
@@ -46,7 +53,7 @@ export default defineComponent({
 
 <template>
   <v-menu location="bottom">
-    <template v-slot:activator="{ props }">
+    <template #activator="{ props }">
       <v-btn v-bind="props" stacked>
         <v-badge color="error" :content="items.length">
           <v-icon icon="mdi-bell"></v-icon>
@@ -56,14 +63,14 @@ export default defineComponent({
     <v-card prepend-icon="mdi-bell" :subtitle="$t('dialog.unread_notifications')" :title="$t('dialog.notifications')">
       <v-list>
         <v-list-item v-for="(item, i) in items" :key="i" :value="item" @click="jump(item)">
-          <template v-slot:prepend>
+          <template #prepend>
             <v-icon color="primary" icon="mdi-alert-box-outline"></v-icon>
           </template>
           <v-list-item-title class="text-primary" v-text="item.message"></v-list-item-title>
           <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
         </v-list-item>
         <v-list-item v-if="items.length == 0">
-          <template v-slot:prepend>
+          <template #prepend>
             <v-icon color="primary" icon="mdi-cards-heart"></v-icon>
           </template>
           <v-list-item-title class="text-primary" v-text="$t('dialog.no_notification')"></v-list-item-title>
diff --git a/webUI/src/components/forms/Hcommoditysearch.vue b/webUI/src/components/forms/Hcommoditysearch.vue
index cb1a5c6..478b2b8 100644
--- a/webUI/src/components/forms/Hcommoditysearch.vue
+++ b/webUI/src/components/forms/Hcommoditysearch.vue
@@ -22,10 +22,19 @@
           <template v-slot:append-inner>
             <v-icon>{{ menu ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </template>
+          <template v-slot:prepend>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ props }">
+                <v-icon v-bind="props" color="danger" @click.stop="openScanner">mdi-barcode-scan</v-icon>
+
+              </template>
+              <span>اسکن بارکد</span>
+            </v-tooltip>
+          </template>
         </v-text-field>
       </template>
 
-      <v-card min-width="300" max-width="400" class="search-card">
+      <v-card min-width="300" max-width="500" class="search-card">
         <v-card-text class="pa-2">
           <template v-if="!loading">
             <v-list density="compact" class="list-container">
@@ -34,10 +43,19 @@
                   v-for="item in filteredItems"
                   :key="item.id"
                   @click="selectItem(item)"
-                  class="mb-1"
+                  class="search-item"
                 >
-                  <v-list-item-title class="text-right">{{ item.name }}</v-list-item-title>
-                  <v-list-item-subtitle class="text-right">{{ item.code }}</v-list-item-subtitle>
+                  <div class="d-flex flex-column w-100">
+                    <div class="d-flex justify-space-between align-center mb-1">
+                      <span class="text-grey-darken-1 text-caption">{{ item.code }}</span>
+                      <span class="text-warning text-caption">{{ formatNumber(item.count) }} عدد</span>
+                    </div>
+                    <div class="text-subtitle-1 font-weight-medium mb-1">{{ item.name }}</div>
+                    <div class="d-flex justify-space-between align-center">
+                      <span class="text-success text-caption">خرید: {{ formatPrice(item.priceBuy) }} ریال</span>
+                      <span class="text-primary text-caption">فروش: {{ formatPrice(item.priceSell) }} ریال</span>
+                    </div>
+                  </div>
                 </v-list-item>
               </template>
               <template v-else>
@@ -70,126 +88,296 @@
 
     <v-dialog v-model="showAddDialog" :fullscreen="$vuetify.display.mobile" max-width="800">
       <v-card>
-        <v-card-title class="text-h5">
-          افزودن کالا/خدمت جدید
-        </v-card-title>
-        <v-card-text>
-          <v-form @submit.prevent="saveCommodity">
-            <v-row>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.name"
-                  label="نام کالا/خدمت *"
-                  required
-                  :error-messages="nameErrors"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.code"
-                  label="کد"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-select
-                  v-model="newCommodity.type"
-                  :items="commodityTypes"
-                  label="نوع *"
-                  required
-                  :error-messages="typeErrors"
-                ></v-select>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-select
-                  v-model="newCommodity.unit"
-                  :items="units"
-                  label="واحد اندازه‌گیری *"
-                  required
-                  :error-messages="unitErrors"
-                ></v-select>
-              </v-col>
-              <v-col cols="12">
-                <v-textarea
-                  v-model="newCommodity.description"
-                  label="توضیحات"
-                  rows="3"
-                ></v-textarea>
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.brand"
-                  label="برند"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.model"
-                  label="مدل"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.barcode"
-                  label="بارکد"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.serial"
-                  label="سریال"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12">
-                <v-switch
-                  v-model="newCommodity.isService"
-                  label="خدمت"
-                  color="primary"
-                ></v-switch>
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.basePrice"
-                  label="قیمت پایه"
-                  type="number"
-                  prefix="ریال"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.salePrice"
-                  label="قیمت فروش"
-                  type="number"
-                  prefix="ریال"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.minStock"
-                  label="حداقل موجودی"
-                  type="number"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="newCommodity.maxStock"
-                  label="حداکثر موجودی"
-                  type="number"
-                ></v-text-field>
-              </v-col>
-            </v-row>
-          </v-form>
-        </v-card-text>
-        <v-card-actions>
+        <v-toolbar color="toolbar" :title="$t('dialog.commodity_info')">
+          <template v-slot:prepend>
+            <v-btn icon @click="showAddDialog = false">
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
           <v-spacer></v-spacer>
-          <v-btn color="grey-darken-1" variant="text" @click="showAddDialog = false">
-            انصراف
+          <v-btn :loading="saving" @click="saveCommodity" icon color="green">
+            <v-tooltip activator="parent" :text="$t('dialog.save')" location="bottom" />
+            <v-icon icon="mdi-content-save"></v-icon>
           </v-btn>
-          <v-btn color="primary" variant="text" @click="saveCommodity" :loading="saving">
-            ذخیره
+          <template v-slot:extension>
+            <v-tabs color="primary" class="bg-light" grow v-model="tabs">
+              <v-tab value="0">{{ $t('dialog.general') }}</v-tab>
+              <v-tab value="1">{{ $t('dialog.prices') }}</v-tab>
+              <v-tab value="2">{{ $t('dialog.existly') }}</v-tab>
+              <v-tab value="3">{{ $t('dialog.tax') }}</v-tab>
+            </v-tabs>
+          </template>
+        </v-toolbar>
+
+        <v-card-text>
+          <v-tabs-window v-model="tabs">
+            <v-tabs-window-item value="0">
+              <v-card>
+                <v-card-text>
+                  <div class="row py-3">
+                    <div class="col-sm-6 col-md-6 mb-1">
+                      <div>
+                        <label class="me-4 text-primary">نوع کالا یا خدمات</label>
+                        <div class="form-check form-check-inline">
+                          <input v-model="newCommodity.khadamat" class="form-check-input" type="radio" value="true">
+                          <label class="form-check-label">خدمات</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                          <input v-model="newCommodity.khadamat" class="form-check-input" type="radio" value="false">
+                          <label class="form-check-label">کالا و اقلام فیزیکی</label>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-6 mb-1">
+                      <div class="space-y-2">
+                        <div class="form-check form-switch">
+                          <input v-model="newCommodity.speedAccess" class="form-check-input" type="checkbox">
+                          <label class="form-check-label">دسترسی سریع</label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-sm-12 col-md-6">
+                      <div class="form-floating mb-4">
+                        <input v-model="newCommodity.name" class="form-control" type="text">
+                        <label class="form-label"><span class="text-danger">(لازم)</span> نام کالا/خدمات</label>
+                      </div>
+                    </div>
+                    <div class="col-sm-12 col-md-6">
+                      <div class="form-floating mb-4">
+                        <select v-model="newCommodity.unit" class="form-select">
+                          <option v-for="option in units" :key="option.name" :value="option.name">
+                            {{ option.name }}
+                          </option>
+                        </select>
+                        <label class="form-label">واحد شمارش</label>
+                      </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12 mb-4">
+                      <small class="mb-2">دسته بندی</small>
+                      <select class="form-select" aria-label="دسته‌بندی" v-model="newCommodity.cat">
+                        <option v-for="(item, index) in listCats" :value="item.id">{{ item.name }}</option>
+                      </select>
+                    </div>
+                    <div class="col-sm-12 col-md-12 mb-4">
+                      <v-dialog>
+                        <template v-slot:activator="{ props: activatorProps }">
+                          <v-btn v-bind="activatorProps" prepend-icon="mdi-wizard-hat" color="surface-variant"
+                            :text="$t('dialog.barcodes_generate')" class="mb-2"></v-btn>
+                        </template>
+
+                        <template v-slot:default="{ isActive }">
+                          <v-card :text="$t('dialog.barcodes_generate')">
+                            <v-card-text>
+                              <v-number-input :min="1" :max="400" v-model="barcode.count" :label="$t('dialog.count')"
+                                prepend-inner-icon="mdi-barcode"></v-number-input>
+                            </v-card-text>
+
+                            <v-card-actions>
+                              <v-spacer></v-spacer>
+                              <v-btn :text="$t('dialog.generate')" color="success" variant="flat"
+                                @click="isActive.value = false; generateBarcode();"></v-btn>
+                              <v-btn :text="$t('dialog.close')" color="secondary" variant="flat"
+                                @click="isActive.value = false"></v-btn>
+                            </v-card-actions>
+                          </v-card>
+                        </template>
+                      </v-dialog>
+                      <v-textarea class="text-left" v-model="newCommodity.barcodes" :label="$t('dialog.barcodes')"
+                        :placeholder="$t('dialog.barcodes_info')" prepend-inner-icon="mdi-barcode"></v-textarea>
+                    </div>
+                    <div class="col-sm-12 col-md-12">
+                      <div class="form-floating mb-4">
+                        <input v-model="newCommodity.des" class="form-control" type="text">
+                        <label class="form-label">توضیحات</label>
+                      </div>
+                    </div>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-tabs-window-item>
+
+            <v-tabs-window-item value="1">
+              <v-card>
+                <v-card-text>
+                  <div class="row">
+                    <div class="col-sm-12 col-md-6">
+                      <div class="form-floating mb-4">
+                        <Hnumberinput
+                          v-model="newCommodity.priceBuy"
+                          :min="0"
+                          suffix="ریال"
+                        />
+                        <label class="form-label">قیمت خرید</label>
+                      </div>
+                    </div>
+                    <div class="col-sm-12 col-md-6">
+                      <div class="form-floating mb-4">
+                        <Hnumberinput
+                          v-model="newCommodity.priceSell"
+                          :min="0"
+                          suffix="ریال"
+                        />
+                        <label class="form-label">قیمت فروش</label>
+                      </div>
+                    </div>
+                    <div v-if="isPluginActive('accpro')" class="col-sm-12 col-md-6" v-for="price in newCommodity.prices">
+                      <div class="form-floating mb-4">
+                        <Hnumberinput
+                          v-model="price.priceSell"
+                          :min="0"
+                          class="form-control"
+                          prefix="ریال"
+                        />
+                        <label class="form-label">{{ price.list.label }}</label>
+                      </div>
+                    </div>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-tabs-window-item>
+
+            <v-tabs-window-item value="2">
+              <v-card>
+                <v-card-text>
+                  <div class="col-sm-12 col-md-12">
+                    <b class="text-primary-dark me-3">موجودی کالا</b>
+                    <label class="text-muted">تنظیمات بخش موجودی کالا تنها برای نوع کالا اعمال می‌شود و برای نوع خدمات نادیده گرفته می‌شود.</label>
+                    <div class="space-y-2">
+                      <div class="form-check form-switch">
+                        <input v-model="newCommodity.commodityCountCheck" class="form-check-input" type="checkbox">
+                        <label class="form-check-label">کنترل موجودی</label>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-sm-12 col-md-4 mt-2">
+                        <div class="form-floating mb-4">
+                          <input v-model="newCommodity.minOrderCount"
+                            @blur="(event) => { if (newCommodity.minOrderCount === '' || newCommodity.minOrderCount === 0) { newCommodity.minOrderCount = 1 } }"
+                            @keypress="onlyNumber($event)" class="form-control" type="number" min="1">
+                          <label class="form-label">حداقل سفارش</label>
+                        </div>
+                      </div>
+                      <div class="col-sm-12 col-md-4 mt-2">
+                        <div class="form-floating mb-4">
+                          <input v-model="newCommodity.orderPoint" @keypress="onlyNumber($event)" class="form-control"
+                            type="number" min="1">
+                          <label class="form-label">نقطه سفارش</label>
+                        </div>
+                      </div>
+                      <div class="col-sm-12 col-md-4 mt-2">
+                        <div class="form-floating mb-4">
+                          <input v-model="newCommodity.dayLoading" @keypress="onlyNumber($event)" class="form-control"
+                            type="number">
+                          <label class="form-label">زمان انتظار(روز)</label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-tabs-window-item>
+
+            <v-tabs-window-item value="3">
+              <v-card>
+                <v-card-text>
+                  <div class="col-sm-6 col-md-6 mb-1">
+                    <div class="space-y-2">
+                      <div class="form-check form-switch">
+                        <input v-model="newCommodity.withoutTax" class="form-check-input" type="checkbox">
+                        <label class="form-check-label">معاف از مالیات</label>
+                      </div>
+                    </div>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-tabs-window-item>
+          </v-tabs-window>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="showBarcodeScanner" max-width="500" persistent>
+      <v-card>
+        <v-toolbar color="primary" dark>
+          <v-toolbar-title>اسکن بارکد</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn icon @click="closeScanner">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-toolbar>
+
+        <v-card-text class="pa-0">
+          <div class="scanner-container">
+            <div class="scanner-overlay">
+              <div class="scanner-line"></div>
+              <div class="scanner-corner top-left"></div>
+              <div class="scanner-corner top-right"></div>
+              <div class="scanner-corner bottom-left"></div>
+              <div class="scanner-corner bottom-right"></div>
+            </div>
+            <qrcode-stream
+              :camera="camera"
+              :torch="isFlashOn"
+              @detect="onDetect"
+              @init="onInit"
+              :track="paintOutline"
+              :formats="supportedFormats"
+            />
+          </div>
+
+          <div class="scanner-controls pa-4">
+            <v-row no-gutters>
+              <v-col cols="4" class="text-center">
+                <v-btn
+                  block
+                  :color="isFlashOn ? 'primary' : 'grey'"
+                  variant="tonal"
+                  @click="toggleFlash"
+                  class="mb-2"
+                >
+                  <v-icon start>mdi-flash</v-icon>
+                  فلش
+                </v-btn>
+              </v-col>
+              <v-col cols="4" class="text-center">
+                <v-btn
+                  block
+                  :color="isAutoFocus ? 'primary' : 'grey'"
+                  variant="tonal"
+                  @click="toggleAutoFocus"
+                  class="mb-2"
+                >
+                  <v-icon start>mdi-focus</v-icon>
+                  فوکوس خودکار
+                </v-btn>
+              </v-col>
+              <v-col cols="4" class="text-center">
+                <v-btn
+                  block
+                  :color="cameraSettings.isBackCamera ? 'primary' : 'grey'"
+                  variant="tonal"
+                  @click="toggleCamera"
+                  class="mb-2"
+                  :disabled="availableCameras.length < 2"
+                >
+                  <v-icon start>mdi-camera-flip</v-icon>
+                  {{ cameraSettings.isBackCamera ? 'عقب' : 'جلو' }}
+                </v-btn>
+              </v-col>
+            </v-row>
+          </div>
+        </v-card-text>
+
+        <v-card-actions class="pa-4">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            @click="closeScanner"
+          >
+            بستن
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -217,9 +405,16 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
+import { QrcodeStream, QrcodeCapture } from 'vue3-qrcode-reader'
+import Hnumberinput from '@/components/forms/Hnumberinput.vue'
 
 export default defineComponent({
   name: 'Hcommoditysearch',
+  components: {
+    QrcodeStream,
+    QrcodeCapture,
+    Hnumberinput
+  },
   props: {
     modelValue: {
       type: [Object, Number],
@@ -261,20 +456,69 @@ export default defineComponent({
       errorMessages: [],
       newCommodity: {
         name: '',
-        code: '',
-        type: '',
-        unit: '',
-        description: '',
-        brand: '',
-        model: '',
-        barcode: '',
-        serial: '',
-        isService: false,
-        basePrice: 0,
-        salePrice: 0,
-        minStock: 0,
-        maxStock: 0
-      }
+        priceSell: 0,
+        priceBuy: 0,
+        des: '',
+        unit: 'عدد',
+        code: 0,
+        khadamat: false,
+        cat: null,
+        orderPoint: 0,
+        commodityCountCheck: false,
+        minOrderCount: 1,
+        dayLoading: 0,
+        speedAccess: false,
+        withoutTax: false,
+        barcodes: '',
+        prices: []
+      },
+      showBarcodeScanner: false,
+      camera: 'environment',
+      isFlashOn: false,
+      isAutoFocus: true,
+      supportedFormats: [
+        'QR_CODE',
+        'EAN_13',
+        'EAN_8',
+        'UPC_A',
+        'UPC_E',
+        'CODE_39',
+        'CODE_128',
+        'CODABAR',
+        'ITF',
+        'PDF_417',
+        'AZTEC',
+        'DATA_MATRIX'
+      ],
+      tabs: 0,
+      plugins: [],
+      barcode: {
+        count: 1,
+      },
+      priceList: [],
+      listCats: [],
+      currencyConfig: {
+        prefix: 'ریال',
+        suffix: '',
+        thousands: ',',
+        decimal: '.',
+        precision: 0,
+        disableNegative: true,
+        disabled: false,
+        min: 0,
+        max: null,
+        allowBlank: false,
+        minimumNumberOfCharacters: 0,
+        shouldRound: true,
+        focusOnRight: false,
+      },
+      cameraSettings: {
+        deviceId: 'environment',
+        isFlashOn: false,
+        isAutoFocus: true,
+        isBackCamera: true
+      },
+      availableCameras: [],
     }
   },
   computed: {
@@ -292,6 +536,8 @@ export default defineComponent({
         this.searchQuery = value
         if (!value) {
           this.clearSelection()
+        } else if (value !== this.selectedItem?.name) {
+          this.menu = true
         }
       }
     },
@@ -337,9 +583,19 @@ export default defineComponent({
         }
         this.searchTimeout = setTimeout(() => {
           this.fetchData()
+          if (newVal && newVal !== this.selectedItem?.name) {
+            this.menu = true
+          }
         }, 500)
       }
     },
+    menu: {
+      handler(newVal) {
+        if (!newVal) {
+          this.searchQuery = this.selectedItem?.name || ''
+        }
+      }
+    },
     showAddDialog: {
       handler(newVal) {
         if (newVal) {
@@ -419,35 +675,21 @@ export default defineComponent({
         return
       }
 
-      if (!this.newCommodity.type) {
-        this.showMessage('نوع کالا/خدمت الزامی است', 'error')
-        return
-      }
-
-      if (!this.newCommodity.unit) {
-        this.showMessage('واحد اندازه‌گیری الزامی است', 'error')
-        return
-      }
-
-      this.saving = true
+      this.saving = true;
       try {
-        const response = await axios.post('/api/commodity/mod/' + this.newCommodity.code, this.newCommodity)
-        if (response.data.Success) {
-          if (response.data.result === 1) {
-            this.showMessage('کالا/خدمت با موفقیت ثبت شد')
-            this.showAddDialog = false
-            this.fetchData()
-          } else if (response.data.result === 2) {
-            this.showMessage('این کالا/خدمت قبلاً ثبت شده است', 'error')
-          }
+        const response = await axios.post('/api/commodity/mod/' + this.newCommodity.code, this.newCommodity);
+        if (response.data.result === 2) {
+          this.showMessage('این کالا/خدمت قبلاً ثبت شده است', 'error');
         } else {
-          this.showMessage('خطا در ثبت کالا/خدمت', 'error')
+          this.showMessage('کالا/خدمت با موفقیت ثبت شد', 'success');
+          this.showAddDialog = false;
+          this.fetchData();
         }
       } catch (error) {
-        console.error('خطا در ثبت کالا/خدمت:', error)
-        this.showMessage('خطا در ثبت کالا/خدمت', 'error')
+        console.error('خطا در ثبت کالا/خدمت:', error);
+        this.showMessage('خطا در ثبت کالا/خدمت', 'error');
       } finally {
-        this.saving = false
+        this.saving = false;
       }
     },
     selectItem(item: any) {
@@ -462,22 +704,429 @@ export default defineComponent({
       this.searchQuery = ''
       this.$emit('update:modelValue', null)
       this.errorMessages = ['انتخاب کالا/خدمت الزامی است']
+      this.menu = false
     },
     handleEnter() {
       if (!this.loading && this.filteredItems.length === 0) {
         this.showAddDialog = true
       }
-    }
+    },
+    async openScanner() {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        this.showMessage('مرورگر شما از دوربین پشتیبانی نمی‌کند. لطفاً از مرورگرهای Chrome، Firefox یا Safari استفاده کنید.', 'error');
+        return;
+      }
+
+      try {
+        // ابتدا دسترسی به دوربین را درخواست می‌کنیم
+        await navigator.mediaDevices.getUserMedia({ video: true });
+        
+        // سپس لیست دوربین‌ها را دریافت می‌کنیم
+        await this.loadAvailableCameras();
+        
+        if (this.availableCameras.length === 0) {
+          this.showMessage('هیچ دوربینی در دستگاه شما یافت نشد', 'error');
+          return;
+        }
+
+        // همیشه سعی می‌کنیم دوربین عقب را پیدا کنیم
+        const backCamera = this.availableCameras.find(device => 
+          device.label.toLowerCase().includes('back') || 
+          device.label.toLowerCase().includes('rear') ||
+          device.label.toLowerCase().includes('main') ||
+          device.label.toLowerCase().includes('primary')
+        );
+        
+        if (backCamera) {
+          this.camera = backCamera.deviceId;
+          this.cameraSettings.deviceId = backCamera.deviceId;
+          this.cameraSettings.isBackCamera = true;
+        } else if (this.availableCameras.length > 0) {
+          // اگر دوربین عقب پیدا نشد، از اولین دوربین استفاده می‌کنیم
+          this.camera = this.availableCameras[0].deviceId;
+          this.cameraSettings.deviceId = this.availableCameras[0].deviceId;
+          this.cameraSettings.isBackCamera = false;
+        }
+
+        this.showBarcodeScanner = true;
+      } catch (error) {
+        console.error('خطا در دسترسی به دوربین:', error);
+        this.showMessage('خطا در دسترسی به دوربین. لطفاً مطمئن شوید که به دوربین دسترسی داده‌اید.', 'error');
+      }
+    },
+    closeScanner() {
+      this.showBarcodeScanner = false;
+      this.saveCameraSettings();
+    },
+    onInit(promise) {
+      promise
+        .then(() => {
+          this.showMessage('اسکنر آماده است', 'success');
+        })
+        .catch(error => {
+          console.error('خطا در راه‌اندازی اسکنر:', error);
+          // بررسی نوع خطا و نمایش پیام مناسب
+          if (error.name === 'NotAllowedError') {
+            this.showMessage('دسترسی به دوربین رد شد. لطفاً دسترسی را مجدداً بررسی کنید.', 'error');
+          } else if (error.name === 'NotFoundError') {
+            this.showMessage('دوربین مورد نظر یافت نشد.', 'error');
+          } else if (error.name === 'NotReadableError') {
+            this.showMessage('دوربین در حال استفاده توسط برنامه دیگری است.', 'error');
+          } else {
+            this.showMessage('خطا در راه‌اندازی اسکنر. لطفاً دوباره تلاش کنید.', 'error');
+          }
+          this.closeScanner();
+        });
+    },
+    onDetect(promisedQrCode) {
+      promisedQrCode
+        .then(result => {
+          if (!result || !result.length) {
+            return;
+          }
+
+          const barcode = result[0].rawValue;
+          if (!barcode) {
+            return;
+          }
+
+          // حذف کاراکترهای غیرمجاز از بارکد
+          const cleanBarcode = barcode.replace(/[^0-9A-Za-z]/g, '');
+          
+          // بررسی اعتبار بارکد
+          if (cleanBarcode.length < 8) {
+            this.showMessage('بارکد نامعتبر است', 'error');
+            return;
+          }
+
+          this.showMessage('بارکد با موفقیت اسکن شد', 'success');
+          this.handleBarcodeResult(cleanBarcode);
+        })
+        .catch(error => {
+          console.error('خطا در اسکن:', error);
+          this.showMessage('خطا در اسکن بارکد. لطفاً دوباره تلاش کنید.', 'error');
+        });
+    },
+    handleBarcodeResult(barcode: string) {
+      if (!barcode) return;
+      
+      this.searchQuery = barcode;
+      this.closeScanner();
+      this.fetchData().then(() => {
+        this.menu = true;
+      });
+    },
+    paintOutline(location, ctx) {
+      if (!location) return;
+
+      const canvas = ctx.canvas;
+      if (canvas) {
+        canvas.willReadFrequently = true;
+      }
+
+      const { topLeftCorner, topRightCorner, bottomLeftCorner, bottomRightCorner } = location;
+      
+      // رسم خطوط راهنما
+      ctx.strokeStyle = '#00ff00';
+      ctx.lineWidth = 4;
+      
+      ctx.beginPath();
+      ctx.moveTo(topLeftCorner.x, topLeftCorner.y);
+      ctx.lineTo(topRightCorner.x, topRightCorner.y);
+      ctx.lineTo(bottomRightCorner.x, bottomRightCorner.y);
+      ctx.lineTo(bottomLeftCorner.x, bottomLeftCorner.y);
+      ctx.lineTo(topLeftCorner.x, topLeftCorner.y);
+      ctx.stroke();
+
+      // نمایش نوع کد
+      ctx.fillStyle = '#00ff00';
+      ctx.font = '16px Arial';
+      ctx.fillText(location.format || 'کد شناسایی شده', topLeftCorner.x, topLeftCorner.y - 10);
+    },
+    toggleFlash() {
+      this.isFlashOn = !this.isFlashOn;
+      this.saveCameraSettings();
+    },
+    toggleAutoFocus() {
+      this.isAutoFocus = !this.isAutoFocus;
+      this.camera = this.isAutoFocus ? 'auto' : 'environment';
+      this.saveCameraSettings();
+    },
+    generateBarcode() {
+      for (let index = 0; index < this.barcode.count; index++) {
+        let x = Math.random() * 1000000000000000000;
+        this.newCommodity.barcodes = this.newCommodity.barcodes + ';' + x
+      }
+    },
+    isPluginActive(plugName) {
+      return this.plugins[plugName] !== undefined;
+    },
+    onlyNumber(event) {
+      const keyCode = event.keyCode;
+      if ((keyCode < 48 || keyCode > 57) && keyCode !== 8) {
+        event.preventDefault();
+      }
+    },
+    async loadData() {
+      //get active plugins
+      const pluginsResponse = await axios.post('/api/plugin/get/actives');
+      this.plugins = pluginsResponse.data;
+
+      const unitsResponse = await axios.post('/api/commodity/units');
+      this.units = unitsResponse.data;
+
+      const priceListResponse = await axios.post('/api/commodity/pricelist/list');
+      if (priceListResponse.data.length === 0) {
+        this.newCommodity.prices = [];
+      } else {
+        this.priceList = priceListResponse.data;
+        this.priceList.forEach((item) => {
+          this.newCommodity.prices.push({
+            id: 0,
+            priceBuy: 0,
+            priceSell: 0,
+            list: item
+          });
+        });
+      }
+
+      const catsResponse = await axios.post('/api/commodity/cat/get/line');
+      this.listCats = catsResponse.data;
+      if (!this.newCommodity.code) {
+        this.newCommodity.cat = catsResponse.data[1];
+      }
+    },
+    formatPrice(price: number): string {
+      return new Intl.NumberFormat('fa-IR').format(price || 0);
+    },
+    formatNumber(num: number): string {
+      return new Intl.NumberFormat('fa-IR').format(num || 0);
+    },
+    stopScanning() {
+      if (this.showBarcodeScanner) {
+        this.closeScanner();
+      }
+    },
+    loadCameraSettings() {
+      try {
+        const savedSettings = localStorage.getItem('cameraSettings');
+        if (savedSettings) {
+          this.cameraSettings = JSON.parse(savedSettings);
+          this.camera = this.cameraSettings.deviceId;
+          this.isFlashOn = this.cameraSettings.isFlashOn;
+          this.isAutoFocus = this.cameraSettings.isAutoFocus;
+        }
+      } catch (error) {
+        console.error('خطا در بارگذاری تنظیمات دوربین:', error);
+      }
+    },
+    saveCameraSettings() {
+      try {
+        this.cameraSettings = {
+          deviceId: this.camera,
+          isFlashOn: this.isFlashOn,
+          isAutoFocus: this.isAutoFocus,
+        };
+        localStorage.setItem('cameraSettings', JSON.stringify(this.cameraSettings));
+      } catch (error) {
+        console.error('خطا در ذخیره تنظیمات دوربین:', error);
+      }
+    },
+    async loadAvailableCameras() {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        this.availableCameras = devices.filter(device => device.kind === 'videoinput');
+        
+        // همیشه سعی می‌کنیم دوربین عقب را پیدا کنیم
+        const backCamera = this.availableCameras.find(device => 
+          device.label.toLowerCase().includes('back') || 
+          device.label.toLowerCase().includes('rear') ||
+          device.label.toLowerCase().includes('main') ||
+          device.label.toLowerCase().includes('primary')
+        );
+        
+        if (backCamera) {
+          this.camera = backCamera.deviceId;
+          this.cameraSettings.deviceId = backCamera.deviceId;
+          this.cameraSettings.isBackCamera = true;
+        } else if (this.availableCameras.length > 0) {
+          this.camera = this.availableCameras[0].deviceId;
+          this.cameraSettings.deviceId = this.availableCameras[0].deviceId;
+          this.cameraSettings.isBackCamera = false;
+        }
+      } catch (error) {
+        console.error('خطا در دریافت لیست دوربین‌ها:', error);
+        throw error;
+      }
+    },
+    async toggleCamera() {
+      if (this.availableCameras.length < 2) {
+        this.showMessage('تنها یک دوربین در دسترس است', 'warning');
+        return;
+      }
+
+      try {
+        // پیدا کردن دوربین فعلی
+        const currentIndex = this.availableCameras.findIndex(cam => cam.deviceId === this.camera);
+        // انتخاب دوربین بعدی
+        const nextIndex = (currentIndex + 1) % this.availableCameras.length;
+        const nextCamera = this.availableCameras[nextIndex];
+
+        this.camera = nextCamera.deviceId;
+        this.cameraSettings.deviceId = nextCamera.deviceId;
+        this.cameraSettings.isBackCamera = 
+          nextCamera.label.toLowerCase().includes('back') || 
+          nextCamera.label.toLowerCase().includes('rear') ||
+          nextCamera.label.toLowerCase().includes('main') ||
+          nextCamera.label.toLowerCase().includes('primary');
+        
+        this.saveCameraSettings();
+        this.showMessage(`دوربین ${this.cameraSettings.isBackCamera ? 'عقب' : 'جلو'} فعال شد`, 'success');
+      } catch (error) {
+        console.error('خطا در تعویض دوربین:', error);
+        this.showMessage('خطا در تعویض دوربین', 'error');
+      }
+    },
   },
   created() {
     this.fetchData()
+    this.loadData()
+    this.loadCameraSettings()
+  },
+  beforeUnmount() {
+    this.stopScanning()
   }
 })
 </script>
 
 <style scoped>
 .list-container {
-  max-height: 300px;
+  max-height: 400px;
   overflow-y: auto;
 }
+
+.search-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.search-item {
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  padding: 0px 0px;
+  margin-bottom: 4px;
+}
+
+.search-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+  border-color: rgba(var(--v-theme-primary), 0.1);
+}
+
+.v-toolbar {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.scanner-container {
+  width: 100%;
+  height: 300px;
+  background: #000;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scanner-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.scanner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.scanner-line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #00ff00;
+  animation: scan 2s linear infinite;
+}
+
+.scanner-corner {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-color: #00ff00;
+  border-style: solid;
+  border-width: 0;
+}
+
+.scanner-corner.top-left {
+  top: 20%;
+  left: 20%;
+  border-top-width: 4px;
+  border-left-width: 4px;
+}
+
+.scanner-corner.top-right {
+  top: 20%;
+  right: 20%;
+  border-top-width: 4px;
+  border-right-width: 4px;
+}
+
+.scanner-corner.bottom-left {
+  bottom: 20%;
+  left: 20%;
+  border-bottom-width: 4px;
+  border-left-width: 4px;
+}
+
+.scanner-corner.bottom-right {
+  bottom: 20%;
+  right: 20%;
+  border-bottom-width: 4px;
+  border-right-width: 4px;
+}
+
+@keyframes scan {
+  0% {
+    transform: translateY(-50px);
+  }
+  50% {
+    transform: translateY(50px);
+  }
+  100% {
+    transform: translateY(-50px);
+  }
+}
+
+.scanner-controls {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(8px);
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.scanner-controls .v-btn {
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 0.875rem;
+}
+
+.scanner-controls .v-icon {
+  margin-right: 4px;
+}
 </style>
\ No newline at end of file
diff --git a/webUI/src/components/forms/Hpersonsearch.vue b/webUI/src/components/forms/Hpersonsearch.vue
index a2ff5b3..174c5e2 100644
--- a/webUI/src/components/forms/Hpersonsearch.vue
+++ b/webUI/src/components/forms/Hpersonsearch.vue
@@ -34,10 +34,29 @@
                   v-for="item in filteredItems"
                   :key="item.id"
                   @click="selectItem(item)"
-                  class="mb-1"
+                  class="mb-2 search-result-item"
+                  :class="{ 'selected-item': selectedItem?.id === item.id }"
                 >
-                  <v-list-item-title class="text-right">{{ item.nikename }}</v-list-item-title>
-                  <v-list-item-subtitle class="text-right">{{ item.code }}</v-list-item-subtitle>
+                  <div class="d-flex flex-column w-100">
+                    <div class="d-flex align-center justify-space-between mb-1">
+                      <div class="d-flex align-center">
+                        <v-icon size="small" color="primary" class="mr-1">mdi-cellphone</v-icon>
+                        <span class="text-caption text-primary-dark">{{ item.mobile || 'بدون موبایل' }}</span>
+                      </div>
+                      <span class="text-caption text-grey-darken-1">{{ item.code }}</span>
+                    </div>
+                    <div class="d-flex align-center justify-space-between">
+                      <span class="text-body-2 font-weight-medium text-primary-dark">{{ item.nikename }}</span>
+                      <v-chip
+                        size="small"
+                        :color="getBalanceColor(item.balance)"
+                        class="balance-chip"
+                        :class="getBalanceTextColor(item.balance)"
+                      >
+                        {{ formatBalance(item.balance) }}
+                      </v-chip>
+                    </div>
+                  </div>
                 </v-list-item>
               </template>
               <template v-else>
@@ -609,6 +628,23 @@ export default {
       if (!this.loading && this.filteredItems.length === 0) {
         this.showAddDialog = true;
       }
+    },
+    getBalanceColor(balance) {
+      if (!balance) return 'grey-lighten-3';
+      return balance > 0 ? 'green-lighten-5' : balance < 0 ? 'red-lighten-5' : 'grey-lighten-3';
+    },
+    getBalanceTextColor(balance) {
+      if (!balance) return 'text-grey-darken-2';
+      return balance > 0 ? 'text-green-darken-2' : balance < 0 ? 'text-red-darken-2' : 'text-grey-darken-2';
+    },
+    formatBalance(balance) {
+      if (!balance) return 'بدون تراز';
+      return balance > 0 ? `بستانکار: ${this.formatNumber(balance)}` : 
+             balance < 0 ? `بدهکار: ${this.formatNumber(Math.abs(balance))}` : 
+             'بدون تراز';
+    },
+    formatNumber(number) {
+      return new Intl.NumberFormat('fa-IR').format(number);
     }
   },
   created() {
@@ -676,4 +712,74 @@ export default {
     -webkit-overflow-scrolling: touch;
   }
 }
+
+.search-result-item {
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(var(--v-theme-outline), 0.1);
+  background-color: rgb(var(--v-theme-surface));
+  margin: 4px 0;
+}
+
+.search-result-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+  border-color: rgba(var(--v-theme-primary), 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+  transform: translateY(-1px);
+}
+
+.selected-item {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  border-color: rgba(var(--v-theme-primary), 0.5);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.balance-chip {
+  min-width: 110px;
+  justify-content: center;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+:deep(.v-list-item__content) {
+  padding: 12px;
+}
+
+:deep(.v-list-item) {
+  min-height: 72px;
+}
+
+:deep(.v-chip) {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+:deep(.text-green-darken-2) {
+  color: #1b5e20 !important;
+}
+
+:deep(.text-red-darken-2) {
+  color: #b71c1c !important;
+}
+
+:deep(.text-grey-darken-2) {
+  color: #424242 !important;
+}
+
+:deep(.text-primary-dark) {
+  color: rgb(var(--v-theme-primary-dark)) !important;
+}
+
+:deep(.v-list) {
+  padding: 8px;
+}
+
+:deep(.v-card) {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+:deep(.v-card-text) {
+  padding: 16px;
+}
 </style>
diff --git a/webUI/src/i18n/en_lang.ts b/webUI/src/i18n/en_lang.ts
index e924a44..e0613b5 100644
--- a/webUI/src/i18n/en_lang.ts
+++ b/webUI/src/i18n/en_lang.ts
@@ -86,6 +86,8 @@ const en_lang = {
     cheque_output: "Cheque Output",
     presells: "Presells",
     presell_view: "View Presell",
+    hrm: 'HR & Payroll',
+    hrm_docs: 'Payroll Document',
   },
 };
 export default en_lang
diff --git a/webUI/src/i18n/fa_lang.ts b/webUI/src/i18n/fa_lang.ts
index 892ac8d..a174674 100644
--- a/webUI/src/i18n/fa_lang.ts
+++ b/webUI/src/i18n/fa_lang.ts
@@ -190,6 +190,8 @@ const fa_lang = {
     plugins_invoices: "صورت حساب‌ها",
     repservice: "مدیریت تعمیرگاه",
     repservice_reqs: "درخواست‌ها",
+    hrm: 'منابع انسانی',
+    hrm_docs: 'سند حقوق',
   },
   time: {
     month: "{id} ماه",
@@ -494,6 +496,32 @@ const fa_lang = {
     presell_info: "اطلاعات پیش فاکتور",
     financial_info: "اطلاعات مالی",
     invoice_items: "اقلام فاکتور",
+    hrm: {
+      title: "سند حقوق",
+      date: "تاریخ",
+      description: "توضیحات",
+      person: "شخص",
+      base_salary: "حقوق پایه",
+      overtime: "اضافه کار",
+      shift: "حق شیفت",
+      night: "شب کاری",
+      total: "جمع کل",
+      row_description: "شرح",
+      add_new_row: "افزودن سطر جدید",
+      no_data: "هیچ داده‌ای ثبت نشده است",
+      delete_confirm: "آیا مطمئن هستید که می‌خواهید این سند را حذف کنید؟",
+      save_success: "سند با موفقیت ثبت شد",
+      edit_success: "سند با موفقیت ویرایش شد",
+      delete_success: "سند با موفقیت حذف شد",
+      load_error: "خطا در دریافت اطلاعات",
+      save_error: "خطا در ذخیره اطلاعات",
+      delete_error: "خطا در حذف سند",
+      required_fields: {
+        date: "تاریخ الزامی است",
+        description: "توضیحات الزامی است",
+        person: "انتخاب شخص الزامی است"
+      }
+    }
   },
   app: {
     loading: "در حال بارگذاری...",
diff --git a/webUI/src/router/index.ts b/webUI/src/router/index.ts
index 03dbf8f..8caf621 100644
--- a/webUI/src/router/index.ts
+++ b/webUI/src/router/index.ts
@@ -764,6 +764,12 @@ const router = createRouter({
             component: () =>
                 import('../views/acc/plugins/resamap/intro.vue'),
         },
+        {
+            path: 'plugins/hrm/intro',
+            name: 'plugin_hrm_intro',
+            component: () =>
+                import('../views/acc/plugins/hrm/intro.vue'),
+        },
         {
             path: 'plugins/noghre/intro',
             name: 'plugin_noghre_intro',
@@ -926,6 +932,24 @@ const router = createRouter({
             component: () =>
                 import('../views/acc/shareholder/list.vue'),
         },
+        {
+            path: 'hrm/docs/list',
+            name: 'hrm_docs_list',
+            component: () =>
+                import('../views/acc/plugins/hrm/docs/list.vue'),
+        },
+        {
+            path: 'hrm/docs/mod/:id?',
+            name: 'hrm_docs_mod',
+            component: () =>
+                import('../views/acc/plugins/hrm/docs/mod.vue'),
+        },
+        {
+            path: 'hrm/docs/view/:id?',
+            name: 'hrm_docs_view',
+            component: () =>
+                import('../views/acc/plugins/hrm/docs/view.vue'),
+        },
     ],
 },
     {
diff --git a/webUI/src/types/vue3-qrcode-reader.d.ts b/webUI/src/types/vue3-qrcode-reader.d.ts
new file mode 100644
index 0000000..cc67307
--- /dev/null
+++ b/webUI/src/types/vue3-qrcode-reader.d.ts
@@ -0,0 +1,14 @@
+declare module 'vue3-qrcode-reader' {
+  import { DefineComponent } from 'vue'
+
+  export const QrcodeStream: DefineComponent<{
+    camera?: string
+    torch?: boolean
+    track?: (location: any, ctx: CanvasRenderingContext2D) => void
+  }>
+
+  export const QrcodeCapture: DefineComponent<{
+    camera?: string
+    torch?: boolean
+  }>
+} 
\ No newline at end of file
diff --git a/webUI/src/views/NotFound.vue b/webUI/src/views/NotFound.vue
index 32471dc..f8c6ae8 100644
--- a/webUI/src/views/NotFound.vue
+++ b/webUI/src/views/NotFound.vue
@@ -7,7 +7,7 @@
         <div class="fof">
             <h1>
                 <v-empty-state  :headline="$t('static.not_found')" title="404" :text="$t('static.not_found_info')"
-                    image="/img/logo-blue.png"></v-empty-state>
+                    image="/u/img/logo-blue.png"></v-empty-state>
                     <v-btn color="success" to="/" prepend-icon="mdi-home">{{ $t('static.home_page') }}</v-btn>
             </h1>
         </div>
diff --git a/webUI/src/views/acc/App.vue b/webUI/src/views/acc/App.vue
index 0c382bd..d2b2e2d 100644
--- a/webUI/src/views/acc/App.vue
+++ b/webUI/src/views/acc/App.vue
@@ -11,6 +11,7 @@ import Currency_cob from '@/components/application/combobox/currency_cob.vue';
 import clock from '@/components/application/clock.vue';
 import CalculatorButton from '@/components/application/buttons/CalculatorButton.vue'
 import SecretDialog from '@/components/application/buttons/SecretDialog.vue';
+import ShortcutsButton from '@/components/application/buttons/ShortcutsButton.vue';
 export default {
   data() {
     return {
@@ -175,7 +176,8 @@ export default {
         { path: '/acc/archive/order/list', key: '.', label: this.$t('drawer.archive_log'), ctrl: true, shift: true, permission: () => this.permissions.owner },
         { path: '/acc/plugin-center/list', key: '/', label: this.$t('drawer.plugins_list'), ctrl: true, shift: true, permission: () => this.permissions.owner },
         { path: '/acc/plugin-center/my', key: '\\', label: this.$t('drawer.my_plugins'), ctrl: true, shift: true, permission: () => this.permissions.owner },
-        { path: '/acc/plugin-center/invoice', key: '`', label: this.$t('drawer.plugins_invoices'), ctrl: true, shift: true, permission: () => this.permissions.owner }
+        { path: '/acc/plugin-center/invoice', key: '`', label: this.$t('drawer.plugins_invoices'), ctrl: true, shift: true, permission: () => this.permissions.owner },
+        { path: '/acc/hrm/docs/list', key: 'H', label: this.$t('drawer.hrm_docs'), ctrl: true, shift: true, permission: () => this.isPluginActive('hrm') && this.permissions.plugHrmDocs },
       ];
     },
     restorePermissions(shortcuts) {
@@ -283,14 +285,15 @@ export default {
     Currency_cob,
     clock,
     CalculatorButton,
-    SecretDialog
+    SecretDialog,
+    ShortcutsButton
   }
 };
 </script>
 
 <template>
   <v-system-bar color="primaryLight2">
-    <v-avatar image="/img/logo-blue.png" size="20" class="me-2 d-none d-sm-flex" />
+    <v-avatar image="/u/img/logo-blue.png" size="20" class="me-2 d-none d-sm-flex" />
     <span class="d-none d-sm-flex">{{ siteSlogan }}</span>
     <v-avatar :image="apiUrl + '/front/avatar/file/get/' + business.id" size="20" class="me-2 d-flex d-sm-none" />
     <span class="d-flex d-sm-none">{{ business.name }}</span>
@@ -784,6 +787,26 @@ export default {
           </template>
         </v-list-item>
       </v-list-group>
+      <v-list-group v-show="isPluginActive('hrm') && permissions.plugHrmDocs">
+        <template v-slot:activator="{ props }">
+          <v-list-item class="text-dark" v-bind="props" :title="$t('drawer.hrm')">
+            <template v-slot:prepend><v-icon icon="mdi-account-cash" color="primary"></v-icon></template>
+          </v-list-item>
+        </template>
+        <v-list-item to="/acc/hrm/docs/list">
+          <v-list-item-title>
+            {{ $t('drawer.hrm_docs') }}
+            <span v-if="isCtrlShiftPressed" class="shortcut-key">{{ getShortcutKey('/acc/hrm/docs/list') }}</span>
+          </v-list-item-title>
+          <template v-slot:append v-if="permissions.plugHrmDocs">
+            <v-tooltip :text="$t('dialog.add_new')" location="end">
+              <template v-slot:activator="{ props }">
+                <v-btn v-bind="props" icon="mdi-plus-box" variant="plain" to="/acc/hrm/docs/mod/" />
+              </template>
+            </v-tooltip>
+          </template>
+        </v-list-item>
+      </v-list-group>
       <v-list-item class="text-dark" v-if="permissions.owner" to="/acc/sms/panel">
         <template v-slot:prepend><v-icon icon="mdi-message-cog" color="primary"></v-icon></template>
         <v-list-item-title>
@@ -884,10 +907,11 @@ export default {
     <v-tooltip text="جادوگر" location="bottom">
       <template v-slot:activator="{ props }">
         <v-btn class="" stacked v-bind="props" to="/acc/wizard/home">
-      <v-icon>mdi-robot</v-icon>
-    </v-btn>
+          <v-icon>mdi-robot</v-icon>
+        </v-btn>
       </template>
     </v-tooltip>
+    <ShortcutsButton />
     <CalculatorButton />
     <SecretDialog />
     <v-dialog v-model="showShortcutsDialog" max-width="800" scrollable>
diff --git a/webUI/src/views/acc/costs/list.vue b/webUI/src/views/acc/costs/list.vue
index e3dac73..a0630dd 100644
--- a/webUI/src/views/acc/costs/list.vue
+++ b/webUI/src/views/acc/costs/list.vue
@@ -120,8 +120,38 @@
           
           <v-divider class="my-2"></v-divider>
           
+          <!-- فیلتر بازه زمانی -->
+          <v-list-item>
+            <v-list-item-title class="text-dark mb-2">
+            </v-list-item-title>
+            <v-row>
+              <v-col cols="12">
+                <v-checkbox
+                  v-model="timeFilters.find(f => f.value === 'custom').checked"
+                  label="بازه زمانی"
+                  @change="handleCustomDateFilterChange"
+                  hide-details
+                />
+              </v-col>
+              <v-col cols="12" v-if="timeFilters.find(f => f.value === 'custom').checked">
+                <Hdatepicker
+                  v-model="dateRange.from"
+                  label="از تاریخ"
+                  @update:model-value="handleDateRangeChange"
+                />
+              </v-col>
+              <v-col cols="12" v-if="timeFilters.find(f => f.value === 'custom').checked">
+                <Hdatepicker
+                  v-model="dateRange.to"
+                  label="تا تاریخ"
+                  @update:model-value="handleDateRangeChange"
+                />
+              </v-col>
+            </v-row>
+          </v-list-item>
+          
           <!-- فیلترهای زمانی -->
-          <v-list-item v-for="(filter, index) in timeFilters" :key="index" class="text-dark">
+          <v-list-item v-for="(filter, index) in timeFilters.filter(f => f.value !== 'custom')" :key="index" class="text-dark">
             <template v-slot:title>
               <v-checkbox v-model="filter.checked" :label="filter.label" @change="applyTimeFilter(filter.value)"
                 hide-details />
@@ -242,6 +272,7 @@ import { debounce } from 'lodash';
 import { getApiUrl } from '/src/hesabixConfig';
 import moment from 'jalali-moment';
 import HesabdariTreeView from '@/components/forms/HesabdariTreeView.vue';
+import Hdatepicker from '@/components/forms/Hdatepicker.vue';
 
 const apiUrl = getApiUrl();
 axios.defaults.baseURL = apiUrl;
@@ -255,12 +286,17 @@ const searchQuery = ref('');
 const timeFilter = ref('all');
 const expanded = ref([]);
 const selectedAccountId = ref('67');
+const dateRange = ref({
+  from: moment().locale('fa').subtract(1, 'days').format('YYYY/MM/DD'),
+  to: moment().locale('fa').format('YYYY/MM/DD')
+});
 
 // فیلترهای زمانی
 const timeFilters = ref([
   { label: 'امروز', value: 'today', checked: false },
   { label: 'این هفته', value: 'week', checked: false },
   { label: 'این ماه', value: 'month', checked: false },
+  { label: 'بازه زمانی', value: 'custom', checked: false },
   { label: 'همه', value: 'all', checked: true },
 ]);
 
@@ -317,6 +353,93 @@ const resetAccountFilter = () => {
   fetchData();
 };
 
+// دیبونس برای جستجو
+const debouncedSearch = debounce(() => fetchData(), 500);
+
+// دیبونس برای تغییر تاریخ
+const debouncedFetchData = debounce(() => {
+  fetchData();
+}, 500);
+
+// اصلاح متد handleDateRangeChange
+const handleDateRangeChange = () => {
+  if (dateRange.value.from && dateRange.value.to) {
+    // تبدیل تاریخ‌های شمسی به آبجکت moment
+    const fromDate = moment(dateRange.value.from, 'jYYYY/jMM/jDD').locale('fa');
+    const toDate = moment(dateRange.value.to, 'jYYYY/jMM/jDD').locale('fa');
+
+    // بررسی اعتبار بازه زمانی
+    if (fromDate.isAfter(toDate)) {
+      Swal.fire({
+        text: 'تاریخ شروع نمی‌تواند بعد از تاریخ پایان باشد',
+        icon: 'error',
+        confirmButtonText: 'قبول'
+      });
+      // پاک کردن تاریخ‌ها
+      dateRange.value = {
+        from: null,
+        to: null
+      };
+      return;
+    }
+
+    // ارسال درخواست با تاخیر
+    debouncedFetchData();
+  }
+};
+
+// اصلاح متد handleCustomDateFilterChange
+const handleCustomDateFilterChange = (checked) => {
+  if (checked) {
+    // غیرفعال کردن سایر فیلترها
+    timeFilters.value.forEach(filter => {
+      if (filter.value !== 'custom') {
+        filter.checked = false;
+      }
+    });
+    timeFilter.value = 'custom';
+    
+    // تنظیم تاریخ‌های پیش‌فرض
+    dateRange.value = {
+      from: moment().locale('fa').subtract(1, 'days').format('YYYY/MM/DD'),
+      to: moment().locale('fa').format('YYYY/MM/DD')
+    };
+    
+    // ارسال درخواست با تاریخ‌های پیش‌فرض
+    debouncedFetchData();
+  } else {
+    // اگر چک‌باکس بازه زمانی غیرفعال شد، فیلتر "همه" را فعال کن
+    timeFilters.value.forEach(filter => {
+      filter.checked = filter.value === 'all';
+    });
+    timeFilter.value = 'all';
+    // پاک کردن تاریخ‌ها
+    dateRange.value = {
+      from: null,
+      to: null
+    };
+    debouncedFetchData();
+  }
+};
+
+// اصلاح متد applyTimeFilter
+const applyTimeFilter = (value) => {
+  timeFilters.value.forEach((filter) => {
+    filter.checked = filter.value === value;
+  });
+  timeFilter.value = value;
+  
+  // اگر فیلتر بازه زمانی غیرفعال شد، تاریخ‌ها را پاک کن
+  if (value !== 'custom') {
+    dateRange.value = {
+      from: null,
+      to: null
+    };
+  }
+  
+  fetchData();
+};
+
 // فچ کردن داده‌ها از سرور
 const fetchData = async () => {
   try {
@@ -329,20 +452,37 @@ const fetchData = async () => {
     if (timeFilter.value) {
       filters.timeFilter = timeFilter.value;
 
-      const today = moment().locale('fa').format('YYYY/MM/DD');
-      switch (timeFilter.value) {
-        case 'today':
-          filters.dateFrom = today;
-          filters.dateTo = today;
-          break;
-        case 'week':
-          filters.dateFrom = moment().locale('fa').subtract(6, 'days').format('YYYY/MM/DD');
-          filters.dateTo = today;
-          break;
-        case 'month':
-          filters.dateFrom = moment().locale('fa').startOf('jMonth').format('YYYY/MM/DD');
-          filters.dateTo = today;
-          break;
+      if (timeFilter.value === 'custom' && dateRange.value.from && dateRange.value.to) {
+        // تبدیل تاریخ‌های شمسی به فرمت مورد نیاز
+        const fromDate = moment(dateRange.value.from, 'jYYYY/jMM/jDD').locale('fa').format('YYYY/MM/DD');
+        const toDate = moment(dateRange.value.to, 'jYYYY/jMM/jDD').locale('fa').format('YYYY/MM/DD');
+        
+        filters.date = {
+          from: fromDate,
+          to: toDate
+        };
+      } else {
+        const today = moment().locale('fa').format('YYYY/MM/DD');
+        switch (timeFilter.value) {
+          case 'today':
+            filters.date = {
+              from: today,
+              to: today
+            };
+            break;
+          case 'week':
+            filters.date = {
+              from: moment().locale('fa').subtract(6, 'days').format('YYYY/MM/DD'),
+              to: today
+            };
+            break;
+          case 'month':
+            filters.date = {
+              from: moment().locale('fa').startOf('jMonth').format('YYYY/MM/DD'),
+              to: today
+            };
+            break;
+        }
       }
     }
     
@@ -368,6 +508,8 @@ const fetchData = async () => {
       },
     };
 
+    console.log('Request payload:', payload); // برای دیباگ
+
     const response = await axios.post('/api/cost/list/search', {
       type: 'cost',
       ...payload,
@@ -396,18 +538,6 @@ const fetchData = async () => {
   }
 };
 
-// دیبونس برای جستجو
-const debouncedSearch = debounce(() => fetchData(), 500);
-
-// اعمال فیلتر زمانی
-const applyTimeFilter = (value) => {
-  timeFilters.value.forEach((filter) => {
-    filter.checked = filter.value === value;
-  });
-  timeFilter.value = value;
-  fetchData();
-};
-
 // حذف یک آیتم
 const deleteItem = async (code) => {
   const result = await Swal.fire({
@@ -589,6 +719,13 @@ const deleteGroup = async () => {
   }
 };
 
+// اضافه کردن watch برای تغییرات تاریخ‌ها
+watch([() => dateRange.value.from, () => dateRange.value.to], () => {
+  if (timeFilter.value === 'custom') {
+    handleDateRangeChange();
+  }
+}, { deep: true });
+
 // Watchers
 watch(() => serverOptions.value.page, () => {
   selectedItems.value.clear();
diff --git a/webUI/src/views/acc/plugins/accpro/intro.vue b/webUI/src/views/acc/plugins/accpro/intro.vue
index 75cdb17..4a791ac 100644
--- a/webUI/src/views/acc/plugins/accpro/intro.vue
+++ b/webUI/src/views/acc/plugins/accpro/intro.vue
@@ -7,7 +7,9 @@ export default defineComponent({
     siteName:''
   }},
   created(){
-    this.siteName = getSiteName();
+    getSiteName().then((name) => {
+      this.siteName = name;
+    });
   }
 })
 </script>
@@ -15,7 +17,7 @@ export default defineComponent({
 <template>
   <main id="main-container p-0 m-0">
     <!-- Hero -->
-    <div class="bg-image" style="background-image: url('/img/plugins/accpro/intro.png');">
+    <div class="bg-image" style="background-image: url('/u/img/plugins/accpro/intro.png');">
       <div class="bg-black-75">
         <div class="content content-top content-full text-center">
           <h1 class="text-white"><i class="fa fa-shop"></i></h1>
diff --git a/webUI/src/views/acc/plugins/hrm/docs/list.vue b/webUI/src/views/acc/plugins/hrm/docs/list.vue
new file mode 100644
index 0000000..934ed90
--- /dev/null
+++ b/webUI/src/views/acc/plugins/hrm/docs/list.vue
@@ -0,0 +1,70 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        {{ $t('drawer.hrm_docs') }}
+        <v-spacer></v-spacer>
+        <v-btn color="primary" prepend-icon="mdi-plus" to="/acc/hrm/docs/mod/">
+          {{ $t('dialog.add_new') }}
+        </v-btn>
+      </v-card-title>
+      <v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          :loading="loading"
+          class="elevation-1"
+        >
+          <template v-slot:item.actions="{ item }">
+            <v-btn
+              icon="mdi-eye"
+              variant="text"
+              size="small"
+              :to="'/acc/hrm/docs/view/' + item.id"
+            ></v-btn>
+            <v-btn
+              icon="mdi-pencil"
+              variant="text"
+              size="small"
+              :to="'/acc/hrm/docs/mod/' + item.id"
+            ></v-btn>
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      headers: [
+        { title: this.$t('field.id'), key: 'id' },
+        { title: this.$t('field.date'), key: 'date' },
+        { title: this.$t('field.employee'), key: 'employee' },
+        { title: this.$t('field.amount'), key: 'amount' },
+        { title: this.$t('field.status'), key: 'status' },
+        { title: this.$t('field.actions'), key: 'actions', sortable: false }
+      ],
+      items: []
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    async loadData() {
+      this.loading = true
+      try {
+        const response = await this.$axios.post('/api/hrm/docs/list')
+        this.items = response.data
+      } catch (error) {
+        console.error('Error loading data:', error)
+      }
+      this.loading = false
+    }
+  }
+}
+</script> 
\ No newline at end of file
diff --git a/webUI/src/views/acc/plugins/hrm/docs/mod.vue b/webUI/src/views/acc/plugins/hrm/docs/mod.vue
new file mode 100644
index 0000000..e9143db
--- /dev/null
+++ b/webUI/src/views/acc/plugins/hrm/docs/mod.vue
@@ -0,0 +1,393 @@
+<template>
+  <v-toolbar color="toolbar" flat class="rounded-t mb-4">
+    <template v-slot:prepend>
+      <v-tooltip :text="$t('dialog.back')" location="bottom">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" @click="$router.back()" variant="text" icon="mdi-arrow-right" />
+        </template>
+      </v-tooltip>
+    </template>
+    <v-toolbar-title class="text-h6">{{ isEdit ? $t('dialog.edit') : $t('dialog.add_new') }}</v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-tooltip :text="$t('dialog.save')" location="bottom">
+      <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" variant="text" icon="mdi-content-save" color="success" @click="validateAndSave"></v-btn>
+      </template>
+    </v-tooltip>
+    <v-tooltip v-if="isEdit" :text="$t('dialog.delete')" location="bottom">
+      <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" variant="text" icon="mdi-delete" color="error" @click="deleteDialog = true"></v-btn>
+      </template>
+    </v-tooltip>
+  </v-toolbar>
+  <v-container>
+    <v-form ref="form" v-model="valid">
+      <v-row>
+        <v-col cols="12" sm="6" md="6">
+          <Hdatepicker v-model="form.date" :label="$t('dialog.hrm.date')"
+            :rules="[v => !!v || $t('dialog.hrm.required_fields.date')]" required />
+        </v-col>
+        <v-col cols="12" sm="6" md="6">
+          <v-text-field v-model="form.description" :label="$t('dialog.hrm.description')" 
+            :rules="[v => !!v || $t('dialog.hrm.required_fields.description')]" required></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12">
+          <v-table class="border rounded d-none d-sm-table" style="width: 100%;">
+            <thead>
+              <tr style="background-color: #0D47A1; color: white;">
+                <th class="text-center pa-1" style="width: 100px;">شخص</th>
+                <th class="text-center pa-1">حقوق پایه</th>
+                <th class="text-center pa-1">اضافه کار</th>
+                <th class="text-center pa-1">حق شیفت</th>
+                <th class="text-center pa-1">شب کاری</th>
+                <th class="text-center pa-1" style="width: 150px;">جمع کل</th>
+              </tr>
+            </thead>
+            <tbody>
+              <template v-for="(row, index) in tableItems" :key="index">
+                <tr :style="{ backgroundColor: index % 2 === 0 ? '#f8f9fa' : 'white', height: '48px' }">
+                  <td class="text-center pa-1" style="width: 170px;">
+                    <Hpersonsearch v-model="row.person" label="شخص" density="compact" hide-details class="my-0" style="font-size: 0.8rem;"></Hpersonsearch>
+                  </td>
+                  <td class="text-center pa-1" style="width: 120px;">
+                    <Hnumberinput v-model="row.baseSalary" density="compact" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;"></Hnumberinput>
+                  </td>
+                  <td class="text-center pa-1" style="width: 120px;">
+                    <Hnumberinput v-model="row.overtime" density="compact" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;"></Hnumberinput>
+                  </td>
+                  <td class="text-center pa-1" style="width: 120px;">
+                    <Hnumberinput v-model="row.shift" density="compact" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;"></Hnumberinput>
+                  </td>
+                  <td class="text-center pa-1" style="width: 120px;">
+                    <Hnumberinput v-model="row.night" density="compact" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;"></Hnumberinput>
+                  </td>
+                  <td class="text-center font-weight-bold pa-1" style="width: 120px;">
+                    {{ calculateTotal(row).toLocaleString('fa-IR') }}
+                  </td>
+                </tr>
+                <tr :style="{ backgroundColor: index % 2 === 0 ? '#f8f9fa' : 'white', height: '48px' }">
+                  <td colspan="4" class="pa-1">
+                    <v-text-field v-model="row.description" density="compact" hide-details 
+                      :placeholder="$t('dialog.hrm.row_description')" class="my-0" style="font-size: 0.8rem;"></v-text-field>
+                  </td>
+                  <td class="text-center pa-1" style="width: 120px;">
+                    <v-tooltip text="حذف" location="bottom">
+                      <template v-slot:activator="{ props }">
+                        <v-btn v-bind="props" icon="mdi-delete" variant="text" size="small" color="error" @click="removeRow(index)"></v-btn>
+                      </template>
+                    </v-tooltip>
+                  </td>
+                </tr>
+              </template>
+              <tr v-if="tableItems.length === 0">
+                <td colspan="6" class="text-center text-grey pa-1">{{ $t('dialog.hrm.no_data') }}</td>
+              </tr>
+              <tr>
+                <td colspan="6" class="text-center pa-1" style="height: 48px;">
+                  <v-btn color="primary" prepend-icon="mdi-plus" size="small" @click="addRow">{{ $t('dialog.hrm.add_new_row') }}</v-btn>
+                </td>
+              </tr>
+              <tr v-if="tableItems.length > 0" style="background-color: #E3F2FD;">
+                <td class="text-center pa-1 font-weight-bold">جمع کل</td>
+                <td class="text-center pa-1 font-weight-bold">{{ calculateColumnTotal('baseSalary').toLocaleString('fa-IR') }}</td>
+                <td class="text-center pa-1 font-weight-bold">{{ calculateColumnTotal('overtime').toLocaleString('fa-IR') }}</td>
+                <td class="text-center pa-1 font-weight-bold">{{ calculateColumnTotal('shift').toLocaleString('fa-IR') }}</td>
+                <td class="text-center pa-1 font-weight-bold">{{ calculateColumnTotal('night').toLocaleString('fa-IR') }}</td>
+                <td class="text-center pa-1 font-weight-bold">{{ calculateColumnTotal('total').toLocaleString('fa-IR') }}</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-col>
+      </v-row>
+    </v-form>
+    <v-snackbar v-model="showSuccess" color="success" timeout="3000">
+      {{ successMessage }}
+    </v-snackbar>
+    <v-snackbar v-model="showError" color="error" timeout="3000">
+      {{ errorMessage }}
+    </v-snackbar>
+    <v-dialog v-model="deleteDialog" max-width="400">
+      <v-card>
+        <v-card-title class="text-h5">{{ $t('dialog.hrm.title') }}</v-card-title>
+        <v-card-text>{{ $t('dialog.hrm.delete_confirm') }}</v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey-darken-1" variant="text" @click="deleteDialog = false">{{ $t('dialog.cancel') }}</v-btn>
+          <v-btn color="error" variant="text" @click="confirmDelete" :loading="loading">{{ $t('dialog.delete') }}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script>
+import Hdatepicker from '@/components/forms/Hdatepicker.vue';
+import Hpersonsearch from '@/components/forms/Hpersonsearch.vue';
+import Hnumberinput from '@/components/forms/Hnumberinput.vue';
+export default {
+  components: { Hdatepicker, Hpersonsearch, Hnumberinput },
+  data() {
+    return {
+      valid: false,
+      isEdit: false,
+      loading: false,
+      deleteDialog: false,
+      showSuccess: false,
+      showError: false,
+      successMessage: '',
+      errorMessage: '',
+      form: {
+        date: '',
+        description: ''
+      },
+      tableItems: [],
+    }
+  },
+  mounted() {
+    const id = this.$route.params.id
+    if (id) {
+      this.isEdit = true
+      this.loadData(id)
+    }
+  },
+  methods: {
+    async loadData(id) {
+      try {
+        const response = await this.$axios.post('/api/hrm/docs/get/' + id)
+        this.form = response.data
+      } catch (error) {
+        this.errorMessage = 'خطا در دریافت اطلاعات';
+        this.showError = true;
+      }
+    },
+    validateAndSave() {
+      if (!this.$refs.form.validate()) {
+        this.errorMessage = this.$t('validator.form_invalid');
+        this.showError = true;
+        return;
+      }
+
+      // بررسی وجود حداقل یک سطر در جدول
+      if (this.tableItems.length === 0) {
+        this.errorMessage = this.$t('dialog.hrm.no_data');
+        this.showError = true;
+        return;
+      }
+
+      // بررسی انتخاب شخص در تمام سطرها
+      const hasInvalidPerson = this.tableItems.some(row => !row.person);
+      if (hasInvalidPerson) {
+        this.errorMessage = this.$t('dialog.hrm.required_fields.person');
+        this.showError = true;
+        return;
+      }
+
+      this.save();
+    },
+    async save() {
+      try {
+        this.loading = true;
+        const url = this.isEdit ? '/api/hrm/docs/update' : '/api/hrm/docs/insert'
+        await this.$axios.post(url, this.form)
+        this.successMessage = this.isEdit ? this.$t('dialog.hrm.edit_success') : this.$t('dialog.hrm.save_success');
+        this.showSuccess = true;
+        setTimeout(() => {
+          this.$router.push('/acc/hrm/docs/list')
+        }, 1200)
+      } catch (error) {
+        this.errorMessage = this.$t('dialog.hrm.save_error');
+        this.showError = true;
+      } finally {
+        this.loading = false;
+      }
+    },
+    async confirmDelete() {
+      try {
+        this.loading = true;
+        await this.$axios.post('/api/hrm/docs/delete', { id: this.$route.params.id })
+        this.successMessage = 'سند با موفقیت حذف شد';
+        this.showSuccess = true;
+        setTimeout(() => {
+          this.$router.push('/acc/hrm/docs/list')
+        }, 1200)
+      } catch (error) {
+        this.errorMessage = 'خطا در حذف سند';
+        this.showError = true;
+      } finally {
+        this.loading = false;
+        this.deleteDialog = false;
+      }
+    },
+    addRow() {
+      this.tableItems.push({
+        person: null,
+        description: '',
+        baseSalary: 0,
+        overtime: 0,
+        shift: 0,
+        night: 0
+      });
+    },
+    removeRow(index) {
+      this.tableItems.splice(index, 1);
+    },
+    calculateTotal(row) {
+      const base = Number(row.baseSalary) || 0;
+      const overtime = Number(row.overtime) || 0;
+      const shift = Number(row.shift) || 0;
+      const night = Number(row.night) || 0;
+      return base + overtime + shift + night;
+    },
+    recalculateTotals() {
+      // Implementation of recalculateTotals method
+    },
+    calculateColumnTotal(column) {
+      return this.tableItems.reduce((sum, row) => {
+        if (column === 'total') {
+          return sum + this.calculateTotal(row);
+        }
+        return sum + (Number(row[column]) || 0);
+      }, 0);
+    },
+  }
+}
+</script>
+
+<style scoped>
+.bank-card {
+  border-right: 4px solid #1976D2 !important;
+}
+
+.cashdesk-card {
+  border-right: 4px solid #4CAF50 !important;
+}
+
+.salary-card {
+  border-right: 4px solid #FF9800 !important;
+}
+
+.tabs-container {
+  background-color: #f5f5f5;
+}
+
+.payment-card :deep(.v-card-item) {
+  min-height: 40px;
+}
+
+.payment-card :deep(.v-card-title) {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.payment-card :deep(.v-card-text) {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+:deep(.v-overlay__content) {
+  z-index: 9999 !important;
+}
+
+:deep(.v-menu__content) {
+  z-index: 9999 !important;
+}
+
+:deep(.v-dialog) {
+  z-index: 9999 !important;
+}
+
+:deep(.v-date-picker) {
+  z-index: 9999 !important;
+}
+
+.settings-section-card {
+  height: 100%;
+  transition: all 0.3s ease;
+}
+
+.settings-section-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.settings-section-title {
+  background-color: #f5f5f5;
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.settings-section-content {
+  padding: 20px;
+}
+
+.settings-section-card :deep(.v-switch) {
+  margin-bottom: 8px;
+}
+
+.settings-section-card :deep(.v-switch .v-label) {
+  font-size: 0.9rem;
+  color: #424242;
+}
+
+.settings-section-card :deep(.v-switch.v-input--disabled) {
+  opacity: 0.6;
+}
+
+.settings-section-card :deep(.v-select) {
+  margin-top: 8px;
+}
+
+.settings-section-card :deep(.v-divider) {
+  margin: 16px 0;
+}
+
+.draft-dialog {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.draft-dialog-title {
+  background-color: #f5f5f5;
+  padding: 16px;
+  font-size: 1.25rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+}
+
+.draft-dialog-content {
+  padding: 24px;
+}
+
+.draft-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 16px 0;
+}
+
+.draft-message p {
+  margin: 8px 0;
+}
+
+.draft-dialog-actions {
+  padding: 16px;
+  background-color: #f5f5f5;
+}
+
+:deep(.v-btn) {
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+:deep(.v-btn--elevated) {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.v-btn--outlined) {
+  border-width: 1px;
+}
+</style>
\ No newline at end of file
diff --git a/webUI/src/views/acc/plugins/hrm/docs/view.vue b/webUI/src/views/acc/plugins/hrm/docs/view.vue
new file mode 100644
index 0000000..cc9464e
--- /dev/null
+++ b/webUI/src/views/acc/plugins/hrm/docs/view.vue
@@ -0,0 +1,89 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        {{ $t('drawer.hrm_docs') }}
+        <v-spacer></v-spacer>
+        <v-btn
+          color="primary"
+          prepend-icon="mdi-pencil"
+          :to="'/acc/hrm/docs/mod/' + $route.params.id"
+        >
+          {{ $t('dialog.edit') }}
+        </v-btn>
+      </v-card-title>
+      <v-card-text>
+        <v-row v-if="!loading">
+          <v-col cols="12" md="6">
+            <v-list>
+              <v-list-item>
+                <template v-slot:prepend>
+                  <v-icon icon="mdi-account"></v-icon>
+                </template>
+                <v-list-item-title>{{ $t('field.employee') }}</v-list-item-title>
+                <v-list-item-subtitle>{{ item.employee }}</v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <template v-slot:prepend>
+                  <v-icon icon="mdi-currency-usd"></v-icon>
+                </template>
+                <v-list-item-title>{{ $t('field.amount') }}</v-list-item-title>
+                <v-list-item-subtitle>{{ item.amount }}</v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <template v-slot:prepend>
+                  <v-icon icon="mdi-calendar"></v-icon>
+                </template>
+                <v-list-item-title>{{ $t('field.date') }}</v-list-item-title>
+                <v-list-item-subtitle>{{ item.date }}</v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <template v-slot:prepend>
+                  <v-icon icon="mdi-check-circle"></v-icon>
+                </template>
+                <v-list-item-title>{{ $t('field.status') }}</v-list-item-title>
+                <v-list-item-subtitle>{{ item.status }}</v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+          </v-col>
+        </v-row>
+        <v-progress-circular
+          v-else
+          indeterminate
+          color="primary"
+        ></v-progress-circular>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" @click="$router.back()">
+          {{ $t('dialog.back') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      item: {}
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    async loadData() {
+      try {
+        const response = await this.$axios.post('/api/hrm/docs/get/' + this.$route.params.id)
+        this.item = response.data
+      } catch (error) {
+        console.error('Error loading data:', error)
+      }
+      this.loading = false
+    }
+  }
+}
+</script> 
\ No newline at end of file
diff --git a/webUI/src/views/acc/plugins/hrm/intro.vue b/webUI/src/views/acc/plugins/hrm/intro.vue
new file mode 100644
index 0000000..75168e7
--- /dev/null
+++ b/webUI/src/views/acc/plugins/hrm/intro.vue
@@ -0,0 +1,127 @@
+<script lang="ts">
+import {defineComponent} from 'vue'
+import {getApiUrl, getSiteName} from '@/hesabixConfig'
+export default defineComponent({
+  name: "intro",
+  data:()=>{return{
+    siteName:''
+  }},
+  async created(){
+    this.siteName = await getSiteName();
+  }
+})
+</script>
+
+<template>
+  <main id="main-container pt-0 mt-o">
+    <!-- Hero -->
+    <div class="bg-image" style="background-image: url('/u/img/plugins/hrm/hrm.jpg');">
+      <div class="bg-black-75">
+        <div class="content content-top content-full text-center">
+          <h1 class="text-white"><i class="fa fa-users"></i></h1>
+          <h1 class="fw-bold text-white mt-5 mb-3"> افزونه مدیریت منابع انسانی </h1>
+          <h2 class="h3 fw-normal text-white-75 mb-5">مدیریت هوشمند پرسنل، حقوق و دستمزد و حضور و غیاب با یک افزونه قدرتمند</h2>
+          <RouterLink to="/acc/plugin-center/view-end/hrm">
+                <span class="badge rounded-pill bg-primary fs-base px-3 py-2 me-2 m-1">
+                  <i class="fa fa-shopping-cart me-1"></i> خرید نسخه آزمایشی </span>
+          </RouterLink>
+    
+        </div>
+      </div>
+    </div>
+    <!-- END Hero -->
+
+    <!-- Page Content -->
+    <div class="content content-full">
+      <div class="row justify-content-center">
+        <div class="col-sm-11 py-2">
+          <!-- Story -->
+          <article class="story justify-content-between">
+            <div class="alert alert-info">
+              <i class="fa fa-info-circle me-2"></i>
+              این افزونه در حال توسعه و آزمایشی است. در نسخه اولیه، تنها از سند حقوق کارکنان پشتیبانی می‌کند. خرید شما باعث سرعت بیشتر در توسعه و بهبود قابلیت‌های آن می‌شود.
+            </div>
+            <p class="justify-content-between">
+              مدیریت منابع انسانی یکی از مهمترین بخش‌های هر سازمان است که نیاز به دقت و نظم بالایی دارد. افزونه مدیریت منابع انسانی حسابیکس با ارائه قابلیت‌های متنوع، مدیریت پرسنل، محاسبه حقوق و دستمزد و کنترل حضور و غیاب را به ساده‌ترین شکل ممکن فراهم می‌کند.
+            </p>
+            <p>
+              <strong>قابلیت‌های نسخه اولیه:</strong>
+            </p>
+            <ul class="list-group list-group-flush mb-4">
+              <li class="list-group-item">
+                <i class="fa fa-check text-success me-2"></i>
+                ثبت سند حقوق کارکنان با در نظر گرفتن موارد قانونی
+              </li>
+            </ul>
+            <p>
+              <strong>قابلیت‌های در دست توسعه:</strong>
+            </p>
+            <ul class="list-group list-group-flush mb-4">
+              <li class="list-group-item">
+                <i class="fa fa-clock text-warning me-2"></i>
+                سیستم حضور و غیاب هوشمند
+              </li>
+              <li class="list-group-item">
+                <i class="fa fa-clock text-warning me-2"></i>
+                مدیریت مرخصی‌ها و غیبت‌ها
+              </li>
+              <li class="list-group-item">
+                <i class="fa fa-clock text-warning me-2"></i>
+                ثبت مدارک و سوابق کاری
+              </li>
+            </ul>
+            <p>
+              این افزونه به صورت کامل با سیستم حسابداری حسابیکس یکپارچه شده و تمامی عملیات مالی مربوط به حقوق و دستمزد را به صورت خودکار در سیستم حسابداری ثبت می‌کند. همچنین امکان صدور فیش حقوقی و گزارش‌های مالی متنوع را فراهم می‌کند.
+            </p>
+            <p>
+              با استفاده از این افزونه، دیگر نیازی به نرم افزارهای جداگانه برای مدیریت منابع انسانی نخواهید داشت. تمامی اطلاعات در یک سیستم یکپارچه ذخیره می‌شود و دسترسی به آن‌ها از هر مکان و در هر زمان امکان‌پذیر است.
+            </p>
+          </article>
+          <!-- END Story -->
+        </div>
+      </div>
+    </div>
+    <!-- END Page Content -->
+  </main>
+</template>
+
+<style scoped>
+.bg-image {
+  background-size: cover;
+  background-position: center;
+  min-height: 400px;
+  position: relative;
+}
+
+.bg-black-75 {
+  background-color: rgba(0, 0, 0, 0.75);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+.story {
+  line-height: 1.8;
+  font-size: 1.1rem;
+}
+
+.alert {
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.list-group-item {
+  border: none;
+  padding: 0.75rem 1.25rem;
+  background-color: transparent;
+}
+
+.list-group-item i {
+  width: 20px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/webUI/src/views/acc/plugins/repservice/intro.vue b/webUI/src/views/acc/plugins/repservice/intro.vue
index 4a18af1..874d1f9 100644
--- a/webUI/src/views/acc/plugins/repservice/intro.vue
+++ b/webUI/src/views/acc/plugins/repservice/intro.vue
@@ -9,7 +9,9 @@ export default defineComponent({
     }
   },
   created() {
-    this.siteName = getSiteName();
+    getSiteName().then(name => {
+      this.siteName = name;
+    });
   }
 })
 </script>
@@ -17,7 +19,7 @@ export default defineComponent({
 <template>
   <main id="main-container p-0 m-0">
     <!-- Hero -->
-    <div class="bg-image" style="background-image: url('/img/plugins/repservice.png');">
+    <div class="bg-image" style="background-image: url('/u/img/plugins/repservice.png');">
       <div class="bg-black-75">
         <div class="content content-top content-full text-center">
           <h1 class="text-white"><i class="fa fa-shop"></i></h1>
@@ -30,8 +32,6 @@ export default defineComponent({
             <span class="badge rounded-pill bg-primary fs-base px-3 py-2 me-2 m-1">
               <i class="fa fa-user-circle me-1"></i> خرید </span>
           </RouterLink>
-          <br>
-          <i class="fa fa-arrow-down text-white"></i>
         </div>
       </div>
     </div>
diff --git a/webUI/src/views/acc/sell/list.vue b/webUI/src/views/acc/sell/list.vue
index ad893f7..9c1ac79 100644
--- a/webUI/src/views/acc/sell/list.vue
+++ b/webUI/src/views/acc/sell/list.vue
@@ -216,15 +216,24 @@
       </template>
     </v-data-table-server>
     <div class="footer-summary">
-    <div class="summary-item">
-      <span class="summary-label">جمع کل فاکتورهای صفحه:</span>
-      <span class="summary-value">{{ $filters.formatNumber(sumTotal) }}</span>
+      <div class="summary-items">
+        <div class="summary-item">
+          <span class="summary-label">جمع کل فاکتورهای صفحه:</span>
+          <span class="summary-value">{{ $filters.formatNumber(sumTotal) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">جمع موارد انتخاب شده:</span>
+          <span class="summary-value">{{ $filters.formatNumber(sumSelected) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">جمع سود موارد انتخاب شده:</span>
+          <span class="summary-value" :class="{'text-success': sumSelectedProfit >= 0, 'text-danger': sumSelectedProfit < 0}">
+            {{ $filters.formatNumber(Math.abs(sumSelectedProfit)) }}
+            <span v-if="sumSelectedProfit < 0">(زیان)</span>
+          </span>
+        </div>
+      </div>
     </div>
-    <div class="summary-item">
-      <span class="summary-label">جمع موارد انتخاب شده:</span>
-      <span class="summary-value">{{ $filters.formatNumber(sumSelected) }}</span>
-    </div>
-  </div>
     <v-dialog v-model="showColumnDialog" max-width="500px">
       <v-card>
         <v-toolbar dark>
@@ -344,6 +353,7 @@ export default defineComponent({
       },
       plugins: {},
       sumSelected: 0,
+      sumSelectedProfit: 0,
       sumTotal: 0,
       itemsSelected: [],
       searchValue: '',
@@ -693,6 +703,7 @@ export default defineComponent({
     itemsSelected: {
       handler(val) {
         this.sumSelected = 0;
+        this.sumSelectedProfit = 0;
         this.itemsSelected.forEach((code) => {
           const selectedItem = this.items.find(item => item.code === code);
           if (selectedItem) {
@@ -702,6 +713,7 @@ export default defineComponent({
             } else {
               this.sumSelected += amount;
             }
+            this.sumSelectedProfit += selectedItem.profit || 0;
           }
         });
       },
@@ -715,21 +727,29 @@ export default defineComponent({
 .footer-summary {
   background-color: #f5f5f5;
   padding: 12px 24px;
-  display: flex;
-  justify-content: space-between;
   border-top: 1px solid #e0e0e0;
   margin-top: 8px;
 }
 
+.summary-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: space-between;
+}
+
 .summary-item {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
+  min-width: 200px;
 }
 
 .summary-label {
   font-weight: 500;
   color: #666;
+  white-space: nowrap;
 }
 
 .summary-value {
@@ -737,6 +757,18 @@ export default defineComponent({
   color: #1976d2;
 }
 
+@media (max-width: 600px) {
+  .summary-items {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .summary-item {
+    min-width: 100%;
+    justify-content: space-between;
+  }
+}
+
 .data-table-wrapper {
   margin-bottom: 0;
 }
diff --git a/webUI/src/views/acc/sell/mod.vue b/webUI/src/views/acc/sell/mod.vue
index 09e5701..638db08 100644
--- a/webUI/src/views/acc/sell/mod.vue
+++ b/webUI/src/views/acc/sell/mod.vue
@@ -46,35 +46,46 @@
                     <mostdes v-model="invoiceDescription" :submitData="{ id: null, des: invoiceDescription }" type="sell" label=""></mostdes>
                   </template>
                 </v-text-field>
-                <v-table class="border rounded d-none d-sm-table" style="width: 100%;">
+                <v-table class="border rounded d-none d-sm-table" style="width: 100%; border-collapse: collapse;">
                   <thead>
                     <tr style="background-color: #0D47A1; color: white;">
+                      <th class="text-center px-2" style="width: 50px;">ردیف</th>
                       <th class="text-center">نام کالا</th>
                       <th class="text-center">تعداد</th>
                       <th class="text-center">قیمت</th>
                       <th class="text-center">تخفیف</th>
-                      <th class="text-center" style="width: 150px;">جمع کل</th>
+                      <th class="text-center">جمع کل</th>
                     </tr>
                   </thead>
                   <tbody>
                     <template v-for="(item, index) in items" :key="index">
                       <tr :style="{ backgroundColor: index % 2 === 0 ? '#f8f9fa' : 'white', height: '64px' }">
-                        <td class="text-center" style="min-width: 200px;">
+                        <td class="text-center px-2">
+                          <span class="text-subtitle-2">{{ index + 1 }}</span>
+                        </td>
+                        <td class="text-center px-2">
                           <Hcommoditysearch v-model="item.name" density="compact" hide-details class="my-0" style="font-size: 0.8rem;" return-object @update:modelValue="handleCommodityChange(item)"></Hcommoditysearch>
                         </td>
-                        <td class="text-center" style="width: 100px;">
+                        <td class="text-center px-2">
                           <Hnumberinput v-model="item.count" density="compact" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;"></Hnumberinput>
                         </td>
-                        <td class="text-center" style="width: 120px;">
-                          <Hnumberinput v-model="item.price" density="compact" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;"></Hnumberinput>
+                        <td class="text-center px-2">
+                          <div class="d-flex align-center justify-center">
+                            <Hnumberinput v-model="item.price" density="compact" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;"></Hnumberinput>
+                            <v-tooltip v-if="item.name && item.price < item.name.priceBuy" text="قیمت فروش کمتر از قیمت خرید است" location="bottom">
+                              <template v-slot:activator="{ props }">
+                                <v-icon v-bind="props" color="warning" size="small" class="mr-1">mdi-alert</v-icon>
+                              </template>
+                            </v-tooltip>
+                          </div>
                         </td>
-                        <td class="text-center" style="width: 150px;">
+                        <td class="text-center px-2">
                           <div class="d-flex align-center">
                             <Hnumberinput v-if="item.showPercentDiscount" v-model="item.discountPercent" density="compact" suffix="%" @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;">
                               <template v-slot:prepend>
                                 <v-tooltip text="تخفیف درصدی" location="bottom">
                                   <template v-slot:activator="{ props }">
-                                    <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
+                                    <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" style="margin: 0; padding: 0;" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
                                   </template>
                                 </v-tooltip>
                               </template>
@@ -83,14 +94,14 @@
                               <template v-slot:prepend>
                                 <v-tooltip text="تخفیف مبلغی" location="bottom">
                                   <template v-slot:activator="{ props }">
-                                    <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
+                                    <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" style="margin: 0; padding: 0;" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
                                   </template>
                                 </v-tooltip>
                               </template>
                             </Hnumberinput>
                           </div>
                         </td>
-                        <td class="text-center font-weight-bold" style="width: 120px;">
+                        <td class="text-center font-weight-bold px-2">
                           {{ item.total.toLocaleString('fa-IR') }}
                         </td>
                       </tr>
@@ -127,35 +138,42 @@
                 <v-card-text>
                   <div class="d-flex justify-space-between align-center mb-2">
                     <span class="text-subtitle-2 font-weight-bold">ردیف:</span>
-                    <span>{{ index + 1 }}</span>
+                    <span class="text-subtitle-2">{{ index + 1 }}</span>
                   </div>
                   <div class="mb-2">
-                    <Hcommoditysearch v-model="item.name" density="compact" label="نام کالا" hide-details class="my-0" style="font-size: 0.8rem;" return-object @update:modelValue="handleCommodityChange(item)"></Hcommoditysearch>
+                    <Hcommoditysearch v-model="item.name" density="compact" label="نام کالا" hide-details class="my-0" style="font-size: 0.8rem; margin: 0; padding: 0;" return-object @update:modelValue="handleCommodityChange(item)"></Hcommoditysearch>
                   </div>
                   <div class="d-flex justify-space-between mb-2">
-                    <div style="width: 48%;">
-                      <Hnumberinput v-model="item.count" density="compact" label="تعداد" hide-details class="my-0" style="font-size: 0.8rem;" @update:modelValue="recalculateTotals"></Hnumberinput>
+                    <div class="flex-grow-1 mr-2">
+                      <Hnumberinput v-model="item.count" density="compact" label="تعداد" hide-details class="my-0" style="font-size: 0.8rem; margin: 0; padding: 0;" @update:modelValue="recalculateTotals"></Hnumberinput>
                     </div>
-                    <div style="width: 48%;">
-                      <Hnumberinput v-model="item.price" density="compact" label="قیمت" hide-details class="my-0" style="font-size: 0.8rem;" @update:modelValue="recalculateTotals"></Hnumberinput>
+                    <div class="flex-grow-1">
+                      <div class="d-flex align-center">
+                        <Hnumberinput v-model="item.price" density="compact" label="قیمت" hide-details class="my-0" style="font-size: 0.8rem; margin: 0; padding: 0;" @update:modelValue="recalculateTotals"></Hnumberinput>
+                        <v-tooltip v-if="item.name && item.price < item.name.priceBuy" text="قیمت فروش کمتر از قیمت خرید است" location="bottom">
+                          <template v-slot:activator="{ props }">
+                            <v-icon v-bind="props" color="warning" size="small" class="mr-1" style="margin: 0; padding: 0;">mdi-alert</v-icon>
+                          </template>
+                        </v-tooltip>
+                      </div>
                     </div>
                   </div>
                   <div class="mb-2">
                     <div class="d-flex align-center">
-                      <Hnumberinput v-if="item.showPercentDiscount" v-model="item.discountPercent" density="compact" label="تخفیف" suffix="%" hide-details @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;">
+                      <Hnumberinput v-if="item.showPercentDiscount" v-model="item.discountPercent" density="compact" label="تخفیف" suffix="%" hide-details @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem; margin: 0; padding: 0;">
                         <template v-slot:prepend>
                           <v-tooltip text="تخفیف درصدی" location="bottom">
                             <template v-slot:activator="{ props }">
-                              <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
+                              <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" style="margin: 0; padding: 0;" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
                             </template>
                           </v-tooltip>
                         </template>
                       </Hnumberinput>
-                      <Hnumberinput v-else v-model="item.discountAmount" density="compact" label="تخفیف" hide-details @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem;">
+                      <Hnumberinput v-else v-model="item.discountAmount" density="compact" label="تخفیف" hide-details @update:modelValue="recalculateTotals" class="my-0" style="font-size: 0.8rem; margin: 0; padding: 0;">
                         <template v-slot:prepend>
                           <v-tooltip text="تخفیف مبلغی" location="bottom">
                             <template v-slot:activator="{ props }">
-                              <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
+                              <v-checkbox v-bind="props" v-model="item.showPercentDiscount" hide-details density="compact" color="primary" class="mt-0" style="margin: 0; padding: 0;" @update:modelValue="handleDiscountTypeChange(item)"></v-checkbox>
                             </template>
                           </v-tooltip>
                         </template>
@@ -1293,6 +1311,36 @@ export default {
   padding-bottom: 8px;
 }
 
+:deep(.v-table) {
+  width: 100%;
+  table-layout: auto;
+}
+
+:deep(.v-table__wrapper) {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+:deep(.v-table__wrapper::-webkit-scrollbar) {
+  display: none;
+}
+
+:deep(.v-table .v-field) {
+  margin: 4px 0;
+}
+
+:deep(.v-table .v-field__input) {
+  padding: 4px 8px;
+}
+
+:deep(.v-table .v-field__outline) {
+  --v-field-border-width: 1px;
+}
+
+:deep(.v-table .v-field--variant-outlined) {
+  --v-field-border-opacity: 0.12;
+}
+
 :deep(.v-overlay__content) {
   z-index: 9999 !important;
 }
diff --git a/webUI/src/views/acc/settings/user_perm_edit.vue b/webUI/src/views/acc/settings/user_perm_edit.vue
index c7068e2..a1e8d1f 100644
--- a/webUI/src/views/acc/settings/user_perm_edit.vue
+++ b/webUI/src/views/acc/settings/user_perm_edit.vue
@@ -493,6 +493,32 @@
             </v-col>
           </v-row>
 
+          <v-row v-if="isPluginActive('hrm')" class="mt-4">
+            <v-col cols="12">
+              <v-card-title class="text-h6 font-weight-bold mb-4">افزونه مدیریت منابع انسانی</v-card-title>
+            </v-col>
+            <v-col cols="12" md="4">
+              <v-card variant="outlined" class="h-100">
+                <v-card-text>
+                  <v-list>
+                    <v-list-item>
+                      <v-switch
+                        v-model="info.plugHrmDocs"
+                        label="مدیریت اسناد حقوق و دستمزد"
+                        @change="savePerms('plugHrmDocs')"
+                        hide-details
+                        color="success"
+                        density="comfortable"
+                        :loading="loadingSwitches.plugHrmDocs"
+                        :disabled="loadingSwitches.plugHrmDocs"
+                      ></v-switch>
+                    </v-list-item>
+                  </v-list>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+
           <v-row class="mt-4">
             <v-col v-if="isPluginActive('noghre')" cols="12" md="4">
               <v-card-title class="text-h6 font-weight-bold mb-4">افزونه کارگاه نقره سازی</v-card-title>
@@ -625,7 +651,8 @@ export default {
         plugRepservice: false,
         plugNoghreAdmin: false,
         plugNoghreSell: false,
-        plugCCAdmin: false
+        plugCCAdmin: false,
+        plugHrmDocs: false
       };
 
       axios.post('/api/business/get/user/permissions',
diff --git a/webUI/src/views/acc/store/plugin-world.vue b/webUI/src/views/acc/store/plugin-world.vue
index 28aa6d6..c563751 100644
--- a/webUI/src/views/acc/store/plugin-world.vue
+++ b/webUI/src/views/acc/store/plugin-world.vue
@@ -1,87 +1,100 @@
-<script>
-import {defineComponent} from 'vue'
-import axios from "axios";
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from "axios"
 
-export default defineComponent({
-  name: "plugin-world",
-  data: ()=>{return{
-    plugins:{}
-  }},
-  methods:{
-    loadData(){
-      axios.post('/api/plugin/get/all').then((response)=>{
-        this.plugins = response.data;
-      })
-    }
-  },
-  created() {
-    this.loadData()
-  }
+const plugins = ref([])
+
+const loadData = () => {
+  axios.post('/api/plugin/get/all').then((response) => {
+    plugins.value = response.data
+  })
+}
+
+onMounted(() => {
+  loadData()
 })
 </script>
 
 <template>
-  <div class="block block-content-full">
-    <div id="fixed-header" class="block-header block-header-default bg-gray-light" >
-      <h3 class="block-title text-primary-dark">
-        <button @click="$router.back()" type="button" class="float-start d-none d-sm-none d-md-block btn btn-sm btn-link text-warning">
-          <i class="fa fw-bold fa-arrow-right"></i>
-        </button>
-        <i class="fa fa-cog"></i>
-        فهرست افزونه‌ها
-      </h3>
-      <div class="block-options">
-      </div>
-    </div>
-    <div class="block-content pb-3">
-      <div class="container-fluid">
-        <div class="row">
-          <div v-for="plugin in plugins" class="col-md-6 col-xl-4">
-            <!-- House -->
-            <div class="block block-rounded border">
-              <div class="block-content p-0 overflow-hidden">
-                <a class="img-link img-fluid-100" data-action="side_overlay_open" data-toggle="layout" href="javascript:void(0)">
-                  <img alt="" class="img-fluid rounded-top" :src="'/img/plugins/' + plugin.icon">
-                </a>
-              </div>
-              <div class="block-content">
-                <h4 class="h6 mb-2">
-                  <i class="fa fa-plug-circle-plus"></i>
-                  {{plugin.name}}
-                </h4>
-                <h5 class="h2 fw-light push">{{Intl.NumberFormat('en-US').format(plugin.price)}}  تومان<br><span class="fs-3 text-muted"><i class="fa fa-clock"></i> {{plugin.timelabel}} </span>
-                </h5>
-              </div>
-              <div class="block-content p-0">
-                <div class="row text-center m-0 border-top border-bottom bg-body-light">
-                  <div class="col-6 border-end">
-                    <p class="py-3 mb-0">
-                      <i class="fa fa-fw fa-ticket text-muted me-1"></i>  پشتیبانی دارد </p>
-                  </div>
-                  <div class="col-6">
-                    <p class="py-3 mb-0">
-                      <i class="fa fa-fw fa-users-rectangle text-muted me-1"></i>  کاربر نامحدود </p>
-                  </div>
-                </div>
-              </div>
-              <div class="block-content block-content-full">
-                <div class="row">
-                  <div class="col-6">
-                    <RouterLink class="btn btn-sm btn-primary w-100" :to="'/acc/plugin-center/view-end/' + plugin.code"> خرید </RouterLink>
-                  </div>
-                  <div class="col-6">
-                    <RouterLink :to="'/acc/plugins/' + plugin.code +'/intro'" class="btn btn-sm btn-alt-primary w-100"> کاتالوگ </RouterLink>
-                  </div>
-                </div>
-              </div>
+  <v-toolbar title="فهرست افزونه‌ها" flat color="toolbar">
+        <template v-slot:prepend>
+            <v-btn icon @click="$router.back()" class="me-2 d-none d-md-flex" variant="text">
+          <v-icon>mdi-arrow-right</v-icon>
+        </v-btn>
+        </template>
+      </v-toolbar>
+  <v-container fluid>
+    <v-row>
+      <v-col
+        v-for="plugin in plugins"
+        :key="plugin.code"
+        cols="12"
+        md="6"
+        lg="4"
+        xl="4"
+      >
+        <v-card class="mb-6 elevation-3" rounded="lg">
+          <v-img
+            :src="'/u/img/plugins/' + plugin.icon"
+            height="200"
+            class="rounded-t-lg"
+            cover
+          ></v-img>
+          <v-card-title class="d-flex align-center justify-space-between">
+            <div>
+              <v-icon class="me-2" color="primary">mdi-power-plug</v-icon>
+              <span class="font-weight-bold">{{ plugin.name }}</span>
             </div>
-            <!-- END House -->
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
+          </v-card-title>
+          <v-card-subtitle class="d-flex align-center justify-space-between mb-2">
+            <v-chip color="success" text-color="white" size="small">
+              {{ Intl.NumberFormat('en-US').format(plugin.price) }} تومان
+            </v-chip>
+            <v-chip color="info" text-color="white" size="small">
+              <v-icon size="small" class="me-1">mdi-clock-outline</v-icon>
+              {{ plugin.timelabel }}
+            </v-chip>
+          </v-card-subtitle>
+          <v-divider></v-divider>
+          <v-row class="text-center py-2 bg-grey-lighten-4">
+            <v-col cols="6" class="border-e">
+              <v-icon class="me-1" color="grey">mdi-ticket</v-icon>
+              پشتیبانی دارد
+            </v-col>
+            <v-col cols="6">
+              <v-icon class="me-1" color="grey">mdi-account-group</v-icon>
+              کاربر نامحدود
+            </v-col>
+          </v-row>
+          <v-divider></v-divider>
+          <v-card-actions class="justify-center">
+            <RouterLink :to="'/acc/plugin-center/view-end/' + plugin.code">
+              <v-btn
+                color="success"
+                class="mx-2 px-4"
+                elevation="1"
+                variant="flat"
+              >
+                <v-icon start class="ms-1">mdi-cart</v-icon>
+                خرید
+              </v-btn>
+            </RouterLink>
+            <RouterLink :to="'/acc/plugins/' + plugin.code + '/intro'">
+              <v-btn
+                color="info"
+                class="mx-2 px-4"
+                elevation="1"
+                variant="outlined"
+              >
+                <v-icon start class="ms-1">mdi-book-open-page-variant</v-icon>
+                کاتالوگ
+              </v-btn>
+            </RouterLink>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <style scoped>
diff --git a/webUI/src/views/acc/store/viewProdect.vue b/webUI/src/views/acc/store/viewProdect.vue
index 3f48511..441e3ac 100644
--- a/webUI/src/views/acc/store/viewProdect.vue
+++ b/webUI/src/views/acc/store/viewProdect.vue
@@ -12,13 +12,27 @@ export default defineComponent({
       name: '',
       price: 0,
       timelabel: 0,
+      icon: '',
     },
   }),
   created() {
-    axios.post('/api/plugin/get/info/' + this.$route.params.id).then((response) => {
-      this.item = response.data;
-      this.loading = false;
-    });
+    axios.post('/api/plugin/get/info/' + this.$route.params.id)
+      .then((response) => {
+        const data = response.data;
+        data.id = Number(data.id);
+        data.price = Number(data.price);
+        this.item = data;
+        this.loading = false;
+      })
+      .catch((error) => {
+        this.loading = false;
+        Swal.fire({
+          text: 'خطا در دریافت اطلاعات افزونه!',
+          icon: 'error',
+          confirmButtonText: 'باشه',
+        });
+        console.error(error);
+      });
   },
   methods: {
     insert() {
@@ -51,51 +65,158 @@ export default defineComponent({
 
 <template>
   <!-- هدر -->
-  <v-toolbar color="toolbar" title="جزئیات خرید افزونه">
+  <v-toolbar title="جزئیات خرید افزونه" flat color="toolbar">
     <template v-slot:prepend>
-      <v-tooltip :text="$t('dialog.back')" location="bottom">
-        <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" @click="$router.back()" class="d-none d-sm-flex" variant="text"
-            icon="mdi-arrow-right" />
-        </template>
-      </v-tooltip>
+      <v-btn icon @click="$router.back()" class="me-2 d-none d-md-flex" variant="text">
+        <v-icon>mdi-arrow-right</v-icon>
+      </v-btn>
     </template>
   </v-toolbar>
 
-  <!-- محتوای اصلی -->
-  <v-card :loading="loading" elevation="2" class="pa-4 ma-2" color="lighten-5">
-    <v-card-title class="text-center">
-      <v-icon size="x-large" color="grey">mdi-toy-brick-outline</v-icon>
-    </v-card-title>
-    <v-card-text class="text-center">
-      <!-- نام افزونه -->
-      <h3 class="text-h5 text-dark mt-3">{{ item.name }}</h3>
-
-      <!-- مدت اعتبار -->
-      <p class="text-body-1 text-muted mb-3">
-        مدت اعتبار افزونه:
-        <span class="text-primary">{{ item.timelabel }}</span>
-      </p>
-
-      <!-- قیمت اصلی -->
-      <v-chip color="primary" class="mb-3">
-        {{ formattedPrice }} تومان
-      </v-chip>
-
-      <!-- مبلغ قابل پرداخت -->
-      <p class="text-body-1 font-weight-bold text-muted">
-        مبلغ قابل پرداخت (با احتساب مالیات بر ارزش افزوده و کارمزد درگاه واسط):
-      </p>
-      <h3 class="text-success">{{ totalPrice }} تومان</h3>
-    </v-card-text>
-
-    <!-- دکمه پرداخت -->
-    <v-card-actions class="justify-center">
-      <v-btn variant="tonal" block color="primary" @click="insert">
-        پرداخت آنلاین از طریق زرین‌پال
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+  <v-container class="d-flex justify-center align-center" style="min-height: 80vh;">
+    <v-row justify="center" align="center">
+      <v-col cols="12" md="7" lg="5">
+        <div v-if="loading" class="d-flex flex-column align-center justify-center py-16">
+          <v-progress-circular indeterminate color="primary" size="48" />
+          <div class="mt-4 text-body-2 text-muted">در حال بارگذاری اطلاعات...</div>
+        </div>
+        <v-card v-else elevation="6" class="pa-7 rounded-xl pay-card clean-card">
+          <v-img
+            :src="item.icon ? '/u/img/plugins/' + item.icon : '/images/plugin-default.png'"
+            height="200"
+            class="rounded-t-lg plugin-image mb-5"
+            cover
+            alt="عکس افزونه"
+          />
+          <v-card-text class="text-center mt-3">
+            <h2 class="text-h5 font-weight-bold mb-4 main-title">{{ item.name }}</h2>
+            <div class="mb-4">
+              <span class="label">مدت اعتبار:</span>
+              <span class="value">{{ item.timelabel }}</span>
+            </div>
+            <v-divider class="my-4" />
+            <div class="mb-3">
+              <span class="label">قیمت افزونه:</span>
+              <span class="value price">{{ formattedPrice }} تومان</span>
+            </div>
+            <div class="mb-2">
+              <span class="label">مبلغ قابل پرداخت (با مالیات و کارمزد):</span>
+              <span class="value total">{{ totalPrice }} تومان</span>
+            </div>
+          </v-card-text>
+          <v-card-actions class="justify-center mt-8 mb-2 pay-btn-wrapper">
+            <v-btn
+              color="success"
+              size="x-large"
+              class="rounded-3 px-12 pay-btn"
+              @click="insert"
+              prepend-icon="mdi-credit-card-outline"
+              elevation="1"
+            >
+              پرداخت آنلاین
+            </v-btn>
+            <v-btn
+              variant="outlined"
+              color="grey-darken-2"
+              size="large"
+              class="cancel-btn rounded-3"
+              @click="$router.back()"
+              prepend-icon="mdi-close-circle-outline"
+            >
+              انصراف
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.text-h5 {
+  font-size: 1.4rem;
+}
+.pay-card.clean-card {
+  background: #fff;
+  border: 1px solid #f1f1f1;
+  box-shadow: 0 4px 24px 0 rgba(60, 72, 88, 0.08);
+  min-height: 420px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.main-title {
+  color: #222;
+  letter-spacing: -0.5px;
+}
+.label {
+  color: #888;
+  font-size: 1rem;
+  margin-left: 0.5rem;
+}
+.value {
+  color: #222;
+  font-size: 1.08rem;
+  font-weight: 500;
+}
+.price {
+  color: #1976d2;
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+.total {
+  color: #388e3c;
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+.pay-btn-wrapper {
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
+.pay-btn {
+  background: #43a047 !important;
+  color: #fff !important;
+  font-size: 1.15rem;
+  font-weight: bold;
+  box-shadow: 0 2px 8px rgba(67, 160, 71, 0.13);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+.pay-btn:hover {
+  transform: scale(1.04);
+  box-shadow: 0 6px 24px rgba(67, 160, 71, 0.18);
+}
+.cancel-btn {
+  border: 1px solid #bdbdbd !important;
+  color: #757575 !important;
+  background: #fff !important;
+  margin-right: 1rem;
+}
+.cancel-btn:hover {
+  color: #ff9800 !important;
+  border-color: #ff9800 !important;
+}
+@media (max-width: 600px) {
+  .pay-card.clean-card {
+    min-height: 340px;
+    padding: 1.5rem !important;
+  }
+  .main-title {
+    font-size: 1.1rem;
+  }
+  .pay-btn-wrapper {
+    bottom: 12px;
+  }
+}
+.plugin-image {
+  display: block;
+  margin-bottom: 1.5rem;
+  border-radius: 18px;
+  box-shadow: 0 2px 12px rgba(60,72,88,0.10);
+  background: #f8f8f8;
+  object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/webUI/src/views/user/InstallPWA.vue b/webUI/src/views/user/InstallPWA.vue
index f67db13..fdf190e 100644
--- a/webUI/src/views/user/InstallPWA.vue
+++ b/webUI/src/views/user/InstallPWA.vue
@@ -69,6 +69,11 @@
 import { getSiteName } from "@/hesabixConfig";
 import { onMounted, ref } from "vue";
 
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: string }>;
+}
+
 const installPromptEvent = ref<Event | null>(null);
 const browserName = ref<string>("");
 const chromeBanner = ref<boolean>(false);
diff --git a/webUI/src/views/user/profile/dashboard.vue b/webUI/src/views/user/profile/dashboard.vue
index 59f7fd9..41058c0 100644
--- a/webUI/src/views/user/profile/dashboard.vue
+++ b/webUI/src/views/user/profile/dashboard.vue
@@ -3,7 +3,6 @@
     <v-tabs v-model="activeTab" color="primary" grow>
       <v-tab value="personal" :text="$t('tabs.personal_info')"></v-tab>
       <v-tab value="marketing" :text="$t('tabs.marketing_info')"></v-tab>
-      <v-tab value="suggestions">{{ $t('tabs.suggestions') }}</v-tab>
     </v-tabs>
 
     <v-window v-model="activeTab">
@@ -109,15 +108,6 @@
           </v-card-text>
         </v-card>
       </v-window-item>
-
-      <!-- تب پیشنهادات -->
-      <v-window-item value="suggestions">
-        <v-card class="ma-4">
-          <v-card-text>
-            <!-- این بخش فعلاً خالی است -->
-          </v-card-text>
-        </v-card>
-      </v-window-item>
     </v-window>
 
     <!-- دیالوگ‌ها -->
diff --git a/webUI/src/views/user/profile/profile-main.vue b/webUI/src/views/user/profile/profile-main.vue
index 488aabf..c74a9b2 100644
--- a/webUI/src/views/user/profile/profile-main.vue
+++ b/webUI/src/views/user/profile/profile-main.vue
@@ -1,6 +1,6 @@
 <template>
   <v-system-bar color="primaryLight2">
-    <v-avatar :image="getbase() + 'img/logo-blue.png'" size="20" class="me-2" />
+    <v-avatar :image="getbase() + 'u/img/logo-blue.png'" size="20" class="me-2" />
     <span>{{ siteSlogan }}</span>
     <v-spacer />
   </v-system-bar>
@@ -10,7 +10,7 @@
         {{ siteName }}
       </template>
       <template v-slot:prepend>
-        <v-avatar :image="getbase() + 'img/favw.png'" />
+        <v-avatar :image="getbase() + 'u/img/favw.png'" />
       </template>
     </v-card>
     <v-list class="px-0 pt-0">
@@ -68,7 +68,7 @@ import { applicationStore } from "@/stores/applicationStore";
 import { useUserStore } from "@/stores/userStore";
 import { ref, defineComponent } from "vue";
 import { mapActions, mapState, mapStores } from "pinia";
-import Change_lang from "/src/components/application/buttons/change_lang.vue";
+import Change_lang from "@/components/application/buttons/change_lang.vue";
 
 export default defineComponent({
   // eslint-disable-next-line vue/multi-word-component-names,vue/no-reserved-component-names