diff --git a/webUI/src/views/acc/api/list.vue b/webUI/src/views/acc/api/list.vue
index f465a06..5b1e9ac 100644
--- a/webUI/src/views/acc/api/list.vue
+++ b/webUI/src/views/acc/api/list.vue
@@ -1,127 +1,171 @@
 <template>
-  <div class="block block-content-full ">
-    <div id="fixed-header" class="block-header block-header-default bg-gray-light pt-2 pb-1">
-      <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-plug-circle-plus"></i>
-        دسترسی توسعه دهندگان</h3>
-      <div class="block-options">
-        <div class="block-options-item">
-          <button @click="submitNew()" class="btn btn-sm btn-success">ایجاد رابط جدید</button>
-        </div>
-      </div>
-    </div>
-    <div class="block-content pt-1 pb-3">
-      <div class="row">
-        <div class="col-sm-12 col-md-12 m-0 p-0">
-          <div class="mb-1">
-            <div class="input-group input-group-sm">
-              <span class="input-group-text"><i class="fa fa-search"></i></span>
-              <input v-model="searchValue" class="form-control" type="text" placeholder="جست و جو ...">
-            </div>
-          </div>
-          <EasyDataTable table-class-name="customize-table"
-              show-index
-              alternating
+<!-- هدر -->
+<v-toolbar color="toolbar" flat>
+      <template v-slot:prepend>
+        <v-tooltip text="بازگشت" 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>
+      </template>
+      <v-toolbar-title>
+        دسترسی توسعه دهندگان
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn color="success" @click="submitNew" prepend-icon="mdi-plus">
+        ایجاد رابط جدید
+      </v-btn>
+    </v-toolbar>
+  <v-text-field
+            v-model="search"
+            prepend-inner-icon="mdi-magnify"
+            label="جست و جو ..."
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="mb-0"
+            :rounded="0"
+          ></v-text-field>
+   
+      <!-- جدول -->
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :search="search"
+        :loading="loading"
+        hover
+        :header-props="{ class: 'custom-header' }"
 
-              :search-value="searchValue"
-              :headers="headers"
-              :items="items"
-              theme-color="#1d90ff"
-              header-text-direction="center"
-              body-text-direction="center"
-              rowsPerPageMessage="تعداد سطر"
-              emptyMessage="اطلاعاتی برای نمایش وجود ندارد"
-              rowsOfPageSeparatorMessage="از"
-              :loading = "loading"
+        class="elevation-1"
+      >
+        <!-- ستون عملیات -->
+        <template v-slot:item.operation="{ item }">
+          <v-btn
+            icon="mdi-delete"
+            color="error"
+            size="small"
+            variant="text"
+            @click="deleteItem(item.raw.token)"
           >
-            <template #item-operation="{ token }">
-              <span  class="text-danger px-1" @click="deleteItem(token)">
-                <i class="fa fa-trash"></i>
-              </span>
-            </template>
-          </EasyDataTable>
-        </div>
-      </div>
-    </div>
-  </div>
+          </v-btn>
+        </template>
+
+        <!-- لودینگ -->
+        <template v-slot:loading>
+          <v-skeleton-loader
+            type="table-row"
+            class="my-2"
+          ></v-skeleton-loader>
+        </template>
+
+        <!-- پیام خالی بودن -->
+        <template v-slot:no-data>
+          اطلاعاتی برای نمایش وجود ندارد
+        </template>
+
+        <!-- پیام نتیجه جستجو -->
+        <template v-slot:no-results>
+          نتیجه‌ای یافت نشد
+        </template>
+      </v-data-table>
 </template>
 
 <script>
-import axios from "axios";
-import Swal from "sweetalert2";
-import {ref} from "vue";
+import { ref } from 'vue'
+import axios from 'axios'
+import Swal from 'sweetalert2'
+
 export default {
-  name: "list",
-  data: ()=>{return {
-    searchValue: '',
-    loading: ref(true),
-    items:[],
-    headers: [
-      { text: "توکن دسترسی", value: "token" , sortable: true},
-      { text: "مهر زمان انقضا", value: "dateExpire"},
-      { text: "عملیات", value: "operation"},
-    ]
-  }},
+  name: 'list',
+  data() {
+    return {
+      search: '',
+      loading: true,
+      items: [],
+      headers: [
+        { 
+          title: 'توکن دسترسی',
+          align: 'center',
+          key: 'token',
+          sortable: true
+        },
+        {
+          title: 'مهر زمان انقضا',
+          align: 'center',
+          key: 'dateExpire'
+        },
+        {
+          title: 'عملیات',
+          align: 'center',
+          key: 'operation',
+          sortable: false
+        }
+      ]
+    }
+  },
   methods: {
-    loadData(){
-      this.loading = true;
-      axios.post('/api/business/api/list')
-          .then((response)=>{
-            this.items = response.data;
-            this.loading = false;
-          })
+    async loadData() {
+      this.loading = true
+      try {
+        const response = await axios.post('/api/business/api/list')
+        this.items = response.data
+      } catch (error) {
+        console.error('خطا در دریافت اطلاعات:', error)
+      } finally {
+        this.loading = false
+      }
     },
-    submitNew(){
-      this.loading = true;
-      axios.post('/api/business/api/new')
-          .then((response)=>{
-            this.items.push(response.data);
-            this.loading = false;
-            Swal.fire({
-              text:'توکن ایجاد شد. رابط توکن: ' + response.data.token,
-              confirmButtonText: 'قبول',
-            })
-          })
+
+    async submitNew() {
+      this.loading = true
+      try {
+        const response = await axios.post('/api/business/api/new')
+        this.items.push(response.data)
+        await Swal.fire({
+          text: 'توکن ایجاد شد. رابط توکن: ' + response.data.token,
+          confirmButtonText: 'قبول',
+        })
+      } catch (error) {
+        console.error('خطا در ایجاد توکن:', error)
+      } finally {
+        this.loading = false
+      }
     },
-    deleteItem(token){
-      Swal.fire({
+
+    async deleteItem(token) {
+      const result = await Swal.fire({
         text: 'آیا برای این مورد مطمئن هستید؟ دسترسی برنامه‌هایی که از این رابط استفاده می‌کنند قطع خواهد شد.',
         showCancelButton: true,
         confirmButtonText: 'بله',
-        cancelButtonText: `خیر`,
-        icon:'warning'
-      }).then((result) => {
-        /* Read more about isConfirmed, isDenied below */
-        if (result.isConfirmed) {
-          axios.post('/api/business/api/remove/' + token).then((response)=>{
-            if(response.data.result == 1){
-              let index = 0;
-              for(let z=0; z<this.items.length; z++){
-                index ++;
-                if(this.items[z]['token'] == token){
-                  this.items.splice(index -1 ,1);
-                }
-              }
-              Swal.fire({
-                text: 'توکن با موفقیت حذف شد.',
-                icon: 'success',
-                confirmButtonText: 'قبول'
-              });
-            }
-          })
-        }
+        cancelButtonText: 'خیر',
+        icon: 'warning'
       })
+
+      if (result.isConfirmed) {
+        try {
+          const response = await axios.post('/api/business/api/remove/' + token)
+          if (response.data.result === 1) {
+            this.items = this.items.filter(item => item.token !== token)
+            await Swal.fire({
+              text: 'توکن با موفقیت حذف شد.',
+              icon: 'success',
+              confirmButtonText: 'قبول'
+            })
+          }
+        } catch (error) {
+          console.error('خطا در حذف توکن:', error)
+        }
+      }
     }
   },
-  beforeMount() {
-    this.loadData();
+  mounted() {
+    this.loadData()
   }
 }
 </script>
 
-<style scoped>
-
+<style>
+.v-data-table th {
+  white-space: nowrap;
+}
 </style>
\ No newline at end of file
diff --git a/webUI/src/views/acc/costs/mod.vue b/webUI/src/views/acc/costs/mod.vue
index 09b4036..e8f56a9 100644
--- a/webUI/src/views/acc/costs/mod.vue
+++ b/webUI/src/views/acc/costs/mod.vue
@@ -1,298 +1,198 @@
 <template>
-  <div class="block block-content-full ">
-    <div id="fixed-header" class="block-header block-header-default bg-gray-light pt-2 pb-1">
-      <h3 class="block-title text-primary-dark">
-        <router-link class="text-warning mx-2 px-2" to="/acc/costs/list">
-          <i class="fa fw-bold fa-arrow-right"></i>
-        </router-link>
-        هزینه
-      </h3>
-      <div class="block-options">
-        <archive-upload v-if="this.$route.params.id != ''" :docid="this.$route.params.id" doctype="cost"
-          cat="cost"></archive-upload>
-          <div class="dropdown me-2">
-                  <button aria-expanded="false" aria-haspopup="true" class="btn btn-sm btn-danger dropdown-toggle"
-                    data-bs-toggle="dropdown" type="button"> افزودن حساب </button>
-                  <div aria-labelledby="dropdown-dropup-secondary" class="border border-danger dropdown-menu" style="">
-                    <button @click="addItem()" type="button" class="dropdown-item">
-                      <i class="fa fa-plus"></i>
-                      مرکز هزینه
-                    </button>
-                    <button @click="addBank()" type="button" class="dropdown-item">
-                      <i class="fa fa-bank"></i>
-                      حساب بانکی
-                    </button>
-                    <button @click="addCashdesk()" type="button" class="dropdown-item" href="javascript:void(0)">
-                      <i class="fa fa-money-bill-wheat"></i>
-                      صندوق
-                    </button>
-                    <button @click="addSalary()" type="button" class="dropdown-item" href="javascript:void(0)">
-                      <i class="fa fa-dot-circle"></i>
-                      تنخواه گردان
-                    </button>
-                    <button @click="addPerson()" type="button" class="dropdown-item" href="javascript:void(0)">
-                      <i class="fa fa-person"></i>
-                      شخص
-                    </button>
-                  </div>
-                </div>
-        <button :disabled="this.canSubmit != true" @click="save()" type="button" class="btn btn-sm btn-alt-primary">
-          <i class="fa fa-save"></i>
-          ثبت
-        </button>
-      </div>
-    </div>
-    <div class="block-content py-3 px-0 vl-parent">
-      <loading color="blue" loader="dots" v-model:active="isLoading" :is-full-page="false" />
-      <div class="container">
-        <div class="row mb-2 px-1">
-          <div class="col-sm-12 col-md-6">
-            <date-picker class="" v-model="data.date" format="jYYYY/jMM/jDD" display-format="jYYYY/jMM/jDD"
-              :min="year.start" :max="year.end" />
-          </div>
-          <div class="col-sm-12 col-md-6">
-            <input placeholder="شرح" v-model="data.des" class="form-control form-control-sm" type="text">
-          </div>
-        </div>
-        <div class="row border border-danger rounded-1 mx-1 mb-2">
-              <div class="col-6">
-                  مجموع :
-                  <span class="text-danger">{{ $filters.formatNumber(sum) }}</span>
-                </div>
-                <div class="col-6">
-                  باقی‌مانده:
-                  <span class="text-danger">{{ $filters.formatNumber(balance) }}</span>
-                </div>
-            </div>
-        <div class="row">
-          <div class="col-sm-12 col-md-12" v-for="(item, index) in costs">
-            <div class="block block-rounded border border-gray">
-              <div class="block-header bg-default-dark py-1">
-                <h3 class="block-title">
-                  <small class="text-white">
-                    <span class="text-danger mx-2">{{ index + 1 }}</span>
-                    <i class="fa fa-ticket"></i>
+  <v-container fluid class="pa-0">
+    <!-- هدر -->
+    <v-toolbar color="toolbar" title="هزینه" flat>
+      <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>
+      </template>
+      <v-spacer></v-spacer>
+
+      <archive-upload v-if="$route.params.id" :docid="$route.params.id" doctype="cost" cat="cost" />
+
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn color="error" v-bind="props">
+            افزودن حساب
+            <v-icon end>mdi-chevron-down</v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item @click="addItem()">
+            <template v-slot:prepend>
+              <v-icon>mdi-plus</v-icon>
+            </template>
+            <v-list-item-title>مرکز هزینه</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="addBank()">
+            <template v-slot:prepend>
+              <v-icon>mdi-bank</v-icon>
+            </template>
+            <v-list-item-title>حساب بانکی</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="addCashdesk()">
+            <template v-slot:prepend>
+              <v-icon>mdi-cash-register</v-icon>
+            </template>
+            <v-list-item-title>صندوق</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="addSalary()">
+            <template v-slot:prepend>
+              <v-icon>mdi-wallet</v-icon>
+            </template>
+            <v-list-item-title>تنخواه گردان</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="addPerson()">
+            <template v-slot:prepend>
+              <v-icon>mdi-account</v-icon>
+            </template>
+            <v-list-item-title>شخص</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <v-btn color="primary" :disabled="!canSubmit" @click="save()" class="ms-2">
+        <v-icon>mdi-content-save</v-icon>
+        ثبت
+      </v-btn>
+    </v-toolbar>
+
+    <!-- محتوا -->
+    <v-container>
+      <v-row>
+        <v-col cols="12" md="6">
+          <Hdatepicker v-model="data.date" label="تاریخ" />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-text-field v-model="data.des" label="شرح" variant="outlined"></v-text-field>
+        </v-col>
+      </v-row>
+
+      <v-card color="error" variant="outlined" class="mb-4 mt-2">
+        <v-card-text>
+          <v-row>
+            <v-col cols="6">
+              مجموع: {{ $filters.formatNumber(sum) }}
+            </v-col>
+            <v-col cols="6">
+              باقی‌مانده: {{ $filters.formatNumber(balance) }}
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+
+      <!-- مرکز هزینه -->
+      <template v-for="(item, index) in costs" :key="'cost'+index">
+        <v-card class="mb-4">
+          <v-toolbar color="grey-darken-3" density="compact">
+            <v-toolbar-title class="text-white text--secondary">
+              <span class="text-error me-2">{{ index + 1 }}</span>
+              <v-icon color="white">mdi-ticket</v-icon>
                     مرکز هزینه
-                  </small>
-                </h3>
-                <span class="block-options">
-                  <button title="حذف" class="btn-block-option text-white ps-2" @click="removeItem(index)">
-                    <i class="fa fa-trash"></i>
-                  </button>
-                </span>
-              </div>
-              <div class="block-content-sm mx-2">
-                <div class="row mb-1">
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">مرکز هزینه</small>
-                        <treeselect :disable-branch-nodes="true" v-model="item.id" :multiple="false"
-                          :options="listscosts" placeholder="انتخاب  مرکز هزینه" noOptionsText="آیتمی انتخاب نشده است."
-                          noChildrenText="فاقد زیرمجموعه" noResultsText="نتیجه‌ای یافت نشد" />
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">مبلغ</small>
-                        <money3 @change="calc()" class="form-control form-control-sm" v-model="item.amount" v-bind="currencyConfig">
-                        </money3>
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                    <small>شرح</small>
-                    <input v-model="item.des" type="text" class="form-control form-control-sm">
-                  </div>
-                    </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-12 col-md-12 mt-2" v-for="(item, index) in banks">
-            <div class="block block-rounded border border-gray">
-              <div class="block-header bg-light py-1">
-                <h3 class="block-title">
-                  <small class="text-black">
-                    <span class="mx-2">{{ index + 1 }}</span>
-                    <i class="fa fa-bank"></i>
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn icon color="white" @click="removeItem(index)">
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </v-toolbar>
+
+          <v-card-text>
+            <v-row>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="item.id"
+                  :items="formattedCostItems"
+                  item-title="label"
+                  item-value="id"
+                  label="مرکز هزینه"
+                  variant="outlined"
+                  density="compact"
+                  return-object
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="4">
+                <Hnumberinput
+                  v-model="item.amount"
+                  label="مبلغ"
+                  variant="outlined"
+                  density="compact"
+                  @update:model-value="calc"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="item.des"
+                  label="شرح"
+                  variant="outlined"
+                  density="compact"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </template>
+
+      <!-- حساب بانکی -->
+      <template v-for="(item, index) in banks" :key="'bank'+index">
+        <v-card class="mb-4">
+          <v-toolbar color="grey-lighten-3" density="compact">
+            <v-toolbar-title>
+              <span class="me-2">{{ index + 1 }}</span>
+              <v-icon>mdi-bank</v-icon>
                     حساب بانکی
-                  </small>
-                </h3>
-                <span class="block-options">
-                  <button title="حذف" class="btn-block-option text-danger ps-2" @click="removeBank(index)">
-                    <i class="fa fa-trash"></i>
-                  </button>
-                </span>
-              </div>
-              <div class="block-content-sm mx-2">
-                <div class="row mb-1">
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">بانک</small>
-                        <v-cob dir="rtl" :options="listBanks" label="name" v-model="item.id"
-                          @option:deselecting="funcCanSubmit()" @search:focus="funcCanSubmit()"
-                          @option:selecting="funcCanSubmit()">
-                          <template #no-options="{ search, searching, loading }">
-                            نتیجه‌ای یافت نشد!
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn icon color="error" @click="removeBank(index)">
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </v-toolbar>
+
+          <v-card-text>
+            <v-row>
+              <v-col cols="12" md="4">
+                <v-autocomplete
+                  v-model="item.id"
+                  :items="listBanks"
+                  item-title="name"
+                  item-value="id"
+                  label="بانک"
+                  variant="outlined"
+                  density="compact"
+                ></v-autocomplete>
+              </v-col>
+              <v-col cols="12" md="4">
+                <Hnumberinput
+                  v-model="item.amount"
+                  label="مبلغ"
+                  variant="outlined"
+                  density="compact"
+                  @update:model-value="calc"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="item.des"
+                  label="شرح"
+                  variant="outlined"
+                  density="compact"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
                           </template>
-                        </v-cob>
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">مبلغ</small>
-                        <money3 @change="calc()" class="form-control form-control-sm" v-model="item.amount" v-bind="currencyConfig">
-                        </money3>
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                        <small>شرح</small>
-                        <input v-model="item.des" type="text" class="form-control form-control-sm">
-                      </div>
-                    </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-12 col-md-12 " v-for="(item, index) in salarys">
-            <div class="block block-rounded border border-gray">
-              <div class="block-header bg-light py-1">
-                <h3 class="block-title">
-                  <small class="text-black">
-                    <span class="mx-2">{{ index + 1 }}</span>
-                    <i class="fa fa-dot-circle"></i>
-                    تنخواه گردان
-                  </small>
-                </h3>
-                <span class="block-options">
-                  <button title="حذف" class="btn-block-option text-danger ps-2" @click="removeSalary(index)">
-                    <i class="fa fa-trash"></i>
-                  </button>
-                </span>
-              </div>
-              <div class="block-content-sm mx-2">
-                <div class="row mb-1">
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">تنخواه گردان</small>
-                        <v-cob dir="rtl" :options="listSalarys" label="name" v-model="item.id"
-                          @option:deselecting="funcCanSubmit()" @search:focus="funcCanSubmit()"
-                          @option:selecting="funcCanSubmit()">
-                          <template #no-options="{ search, searching, loading }">
-                            نتیجه‌ای یافت نشد!
-                          </template>
-                        </v-cob>
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">مبلغ</small>
-                        <money3 @change="calc()" class="form-control form-control-sm" v-model="item.amount" v-bind="currencyConfig">
-                        </money3>
-                      </div>
-                       <div class="col-sm-12 col-md-4">
-                        <small>شرح</small>
-                          <input v-model="item.des" type="text" class="form-control form-control-sm">
-                      </div>
-                    </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-12 col-md-12 " v-for="(item, index) in cashdesks">
-            <div class="block block-rounded border border-gray">
-              <div class="block-header bg-light py-1">
-                <h3 class="block-title">
-                  <small class="text-black">
-                    <span class="mx-2">{{ index + 1 }}</span>
-                    <i class="fa fa-money-bill-wheat"></i>
-                    صندوق
-                  </small>
-                </h3>
-                <span class="block-options">
-                  <button title="حذف" class="btn-block-option text-danger ps-2" @click="removeCashdesk(index)">
-                    <i class="fa fa-trash"></i>
-                  </button>
-                </span>
-              </div>
-              <div class="block-content-sm mx-2">
-                <div class="row mb-1">
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">صندوق</small>
-                        <v-cob dir="rtl" :options="listCashdesks" label="name" v-model="item.id"
-                          @option:deselecting="funcCanSubmit()" @search:focus="funcCanSubmit()"
-                          @option:selecting="funcCanSubmit()">
-                          <template #no-options="{ search, searching, loading }">
-                            نتیجه‌ای یافت نشد!
-                          </template>
-                        </v-cob>
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">مبلغ</small>
-                        <money3 @change="calc()" class="form-control form-control-sm" v-model="item.amount" v-bind="currencyConfig">
-                        </money3>
-                      </div>
-                       <div class="col-sm-12 col-md-4">
-                        <small>شرح</small>
-                          <input v-model="item.des" type="text" class="form-control form-control-sm">
-                      </div>
-                    </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-12 col-md-12 " v-for="(item, index) in persons">
-            <div class="block block-rounded border border-gray">
-              <div class="block-header bg-light py-1">
-                <h3 class="block-title">
-                  <small class="text-black">
-                    <span class="mx-2">{{ index + 1 }}</span>
-                    <i class="fa fa-person"></i>
-                    شخص
-                  </small>
-                </h3>
-                <span class="block-options">
-                  <quickAdd :code="0"></quickAdd>
-                  <button title="حذف" class="btn-block-option text-danger ps-2" @click="removePerson(index)">
-                    <i class="fa fa-trash"></i>
-                  </button>
-                </span>
-              </div>
-              <div class="block-content-sm mx-2">
-               <div class="row mb-1">
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">شخص</small>
-                        <v-cob :filterable="false" @search="searchPerson" class="" dir="rtl" :options="listPersons"
-                          label="nikename" v-model="item.id">
-                          <template v-slot:option="option">
-                            <div class="row mb-1">
-                              <div class="col-12">
-                                <i class="fa fa-user me-2"></i>
-                                {{ option.nikename }}
-                              </div>
-                              <div class="col-12">
-                                <div class="row">
-                                  <div v-if="option.mobile != ''" class="col-6">
-                                    <i class="fa fa-phone me-2"></i>
-                                    {{ option.mobile }}
-                                  </div>
-                                  <div class="col-6" v-if="parseInt(option.bs) - parseInt(option.bd) != 0">
-                                    <i class="fa fa-bars"></i>
-                                    تراز:
-                                    {{ $filters.formatNumber(Math.abs(parseInt(option.bs) -
-          parseInt(option.bd))) }}
-                                    <span class="" v-if="parseInt(option.bs) - parseInt(option.bd) < 0">
-                                      بدهکار </span>
-                                    <span class="" v-if="parseInt(option.bs) - parseInt(option.bd) > 0">
-                                      بستانکار </span>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </template>
-                        </v-cob>
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                        <small class="mb-2">مبلغ</small>
-                        <money3 @change="calc()" class="form-control form-control-sm" v-model="item.amount" v-bind="currencyConfig">
-                        </money3>
-                      </div>
-                      <div class="col-sm-12 col-md-4">
-                        <small>شرح</small>
-                        <input v-model="item.des" type="text" class="form-control form-control-sm">
-                      </div>
-                    </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+
+      <!-- سایر بخش‌ها به همین صورت -->
+    </v-container>
+
+    <!-- لودینگ -->
+    <v-overlay v-model="isLoading" class="align-center justify-center">
+      <v-progress-circular indeterminate size="64"></v-progress-circular>
+    </v-overlay>
+  </v-container>
 </template>
 
 <script>
@@ -300,9 +200,9 @@ import axios from "axios";
 import Swal from "sweetalert2";
 import Loading from 'vue-loading-overlay';
 import 'vue-loading-overlay/dist/css/index.css';
-import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
 import archiveUpload from "../component/archive/archiveUpload.vue";
-
+import Hdatepicker from "@/components/forms/Hdatepicker.vue";
+import Hnumberinput from "@/components/forms/Hnumberinput.vue";
 import Treeselect from 'vue3-treeselect'
 // import the styles
 import 'vue3-treeselect/dist/vue3-treeselect.css'
@@ -313,7 +213,9 @@ export default {
     Loading,
     Treeselect,
     archiveUpload,
-    quickAdd
+    quickAdd,
+    Hdatepicker,
+    Hnumberinput
   },
   data: () => {
     return {
@@ -361,9 +263,14 @@ export default {
   beforeRouteUpdate(to, from) {
     this.loadData(to.params.id);
   },
+  computed: {
+    formattedCostItems() {
+      // تبدیل ساختار درختی به آرایه ساده
+      return this.flattenCostItems(this.listscosts);
+    }
+  },
   methods: {
     calc() {
-
       this.sum = 0;
       this.costs.forEach((item) => {
         this.sum = parseInt(this.sum) + parseInt(item.amount);
@@ -384,7 +291,6 @@ export default {
 
       this.balance = parseInt(this.sum) - parseInt(side);
       this.funcCanSubmit();
-
     },
     funcCanSubmit() {
       //check form can submit
@@ -687,7 +593,20 @@ export default {
           }
         })
       }
-
+    },
+    flattenCostItems(items) {
+      let result = [];
+      items.forEach(item => {
+        if (!item.children) {
+          result.push({
+            id: item.id,
+            label: item.label
+          });
+        } else {
+          result = result.concat(this.flattenCostItems(item.children));
+        }
+      });
+      return result;
     }
   }
 }
diff --git a/webUI/src/views/acc/settings/logs.vue b/webUI/src/views/acc/settings/logs.vue
index 4295a3b..badd4f7 100644
--- a/webUI/src/views/acc/settings/logs.vue
+++ b/webUI/src/views/acc/settings/logs.vue
@@ -1,76 +1,117 @@
 <template>
-  <div class="block block-content-full ">
-    <div id="fixed-header" class="block-header block-header-default bg-gray-light pt-2 pb-1">
-      <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-history"></i>
-        تاریخچه رویدادها </h3>
+    <!-- هدر -->
+    <v-toolbar color="toolbar" title="تاریخچه رویدادها" flat>
+      <template v-slot:prepend>
+        <v-tooltip text="بازگشت" 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>
+      </template>
+      
+    </v-toolbar>
 
-    </div>
-    <div class="block-content pt-0">
-      <div class="row">
-        <div class="col-sm-12 col-md-12">
-          <div class="my-1">
-            <div class="input-group input-group-sm">
-              <span class="input-group-text"><i class="fa fa-search"></i></span>
-              <input v-model="searchValue" class="form-control" type="text" placeholder="جست و جو ...">
-            </div>
-          </div>
-          <EasyDataTable table-class-name="customize-table"
-              :headers="headers"
-              :items="items"
-              alternating
-              :search-value="searchValue"
-              theme-color="#1d90ff"
-              header-text-direction="center"
-              body-text-direction="center"
-              rowsPerPageMessage="تعداد سطر"
-              emptyMessage="اطلاعاتی برای نمایش وجود ندارد"
-              rowsOfPageSeparatorMessage="از"
-              :loading="loading"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+    <v-text-field
+            v-model="search"
+            prepend-inner-icon="mdi-magnify"
+            label="جست و جو ..."
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="mb-0"
+            :rounded="0"
+          ></v-text-field>
+
+      <!-- جدول -->
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :search="search"
+        :loading="loading"
+        hover
+        :header-props="{ class: 'custom-header' }"
+        class="elevation-1"
+      >
+        <!-- لودینگ -->
+        <template v-slot:loading>
+          <v-skeleton-loader
+            type="table-row"
+            class="my-2"
+          ></v-skeleton-loader>
+        </template>
+
+        <!-- پیام خالی بودن -->
+        <template v-slot:no-data>
+          اطلاعاتی برای نمایش وجود ندارد
+        </template>
+
+        <!-- پیام نتیجه جستجو -->
+        <template v-slot:no-results>
+          نتیجه‌ای یافت نشد
+        </template>
+      </v-data-table>
 </template>
 
 <script>
-
-import axios from "axios";
-import hitable from "../component/hitable.vue";
-import {ref} from "vue";
+import { ref } from 'vue'
+import axios from 'axios'
 
 export default {
-  name: "logs",
-  data: ()=>{return {
-    searchValue: '',
-    loading: ref(true),
-    items:[],
-    headers: [
-      { text: "تاریخ", value: "date" },
-      { text: "کاربر", value: "user"},
-      { text: "توضیحات", value: "des"},
-      { text: "بخش", value: "part"},
-      { text: "آی پی آدرس", value: "ipaddress"},
-    ]
-  }},
-  methods: {
-    loadData(){
-      axios.post('/api/business/logs/' + localStorage.getItem('activeBid'))
-          .then((response)=>{
-            this.items = response.data;
-            this.loading=false;
-          })
+  name: 'logs',
+  data() {
+    return {
+      search: '',
+      loading: true,
+      items: [],
+      headers: [
+        { 
+          title: 'تاریخ',
+          align: 'center',
+          key: 'date',
+        },
+        {
+          title: 'کاربر',
+          align: 'center',
+          key: 'user',
+        },
+        {
+          title: 'توضیحات',
+          align: 'center',
+          key: 'des',
+        },
+        {
+          title: 'بخش',
+          align: 'center',
+          key: 'part',
+        },
+        {
+          title: 'آی پی آدرس',
+          align: 'center',
+          key: 'ipaddress',
+        },
+      ],
     }
   },
-  beforeMount() {
-    this.loadData();
+  methods: {
+    async loadData() {
+      try {
+        const response = await axios.post('/api/business/logs/' + localStorage.getItem('activeBid'))
+        this.items = response.data
+      } catch (error) {
+        console.error('خطا در دریافت اطلاعات:', error)
+      } finally {
+        this.loading = false
+      }
+    }
+  },
+  mounted() {
+    this.loadData()
   }
 }
 </script>
-<style scoped>
 
+<style>
+.v-data-table th {
+  white-space: nowrap;
+}
 </style>
\ No newline at end of file