From 56964c96b737f35b6e75ac604f23ce086e319f53 Mon Sep 17 00:00:00 2001
From: Babak Alizadeh <alizadeh.babak@gmail.com>
Date: Wed, 13 Aug 2025 16:14:16 +0000
Subject: [PATCH] improve general setting page

---
 webUI/src/views/acc/settings/bussiness.vue | 254 ++++++++++++++-------
 1 file changed, 171 insertions(+), 83 deletions(-)

diff --git a/webUI/src/views/acc/settings/bussiness.vue b/webUI/src/views/acc/settings/bussiness.vue
index ad9850d..805287a 100755
--- a/webUI/src/views/acc/settings/bussiness.vue
+++ b/webUI/src/views/acc/settings/bussiness.vue
@@ -233,94 +233,182 @@
         <v-tabs-window-item value="2">
           <v-card>
             <v-card-text>
-              <h3 class="text-primary">نمایش پیوند یکتا</h3>
+              <h3 class="text-primary mb-6">تنظیمات سراسری کسب و کار</h3>
+              
               <v-row>
                 <v-col cols="12" md="8">
-                  <v-switch
-                    v-model="content.shortlinks"
-                    label="فعال‌سازی پیوند‌های یکتا"
-                    color="primary"
-                    hide-details
-                  ></v-switch>
-                  <div class="text-caption text-medium-emphasis mt-1">
-                    این قابلیت برای تولید پیوند‌های یکتا برای ارسال به مشتری جهت مشاهده فاکتورها است.
-                  </div>
-                </v-col>
-              </v-row>
-
-              <h3 class="text-primary mt-4">دریافت مبلغ فاکتور از طریق کیف پول</h3>
-              <v-row>
-                <v-col cols="12">
-                  <v-switch
-                    v-model="content.walletEnabled"
-                    label="فعال‌سازی دریافت آنلاین از طریق کیف پول"
-                    color="primary"
-                    @change="checkBanksExist"
-                    hide-details
-                  ></v-switch>
-                  <div class="text-caption text-medium-emphasis mt-1">
-                    با فعال سازی این قابلیت قادر خواهید بود مبالغ فاکتورهای ثبت شده را به صورت آنلاین از مشتریان خود دریافت کنید.
-                  </div>
-                  
-                  <v-row v-if="content.walletEnabled" class="mt-4">
-                    <v-col cols="12" md="6">
-                      <v-select
-                        v-model="content.walletMatchBank"
-                        :items="listBanks"
-                        item-title="name"
-                        item-value="id"
-                        label="حساب بانکی متصل به کیف پول"
-                        variant="outlined"
-                        density="compact"
-                      ></v-select>
-                    </v-col>
-                    <v-col cols="12">
-                      <div class="text-caption text-medium-emphasis">
-                        برای تسویه اتوماتیک به حساب انتخاب شده حتما باید تمام موارد از جمله شماره شبا و شماره کارت و ... به درستی تکمیل شده باشد در غیر این صورت تراکنش با خطا مواجه خواهد شد.
+                  <!-- بخش پیوندهای یکتا -->
+                  <v-card variant="outlined" class="mb-6">
+                    <v-card-title class="text-h6 text-primary">
+                      <v-icon icon="mdi-link-variant" class="mr-2"></v-icon>
+                      نمایش پیوند یکتا
+                    </v-card-title>
+                    <v-card-text>
+                      <v-switch
+                        v-model="content.shortlinks"
+                        label="فعال‌سازی پیوند‌های یکتا"
+                        color="primary"
+                        hide-details
+                        class="mb-2"
+                      ></v-switch>
+                      <div class="text-body-2 text-medium-emphasis">
+                        این قابلیت برای تولید پیوند‌های یکتا برای ارسال به مشتری جهت مشاهده فاکتورها است.
                       </div>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
+                    </v-card-text>
+                  </v-card>
 
-              <h3 class="text-primary mt-4">کالا و خدمات</h3>
-              <v-row>
-                <v-col cols="12" md="8">
-                  <v-switch
-                    v-model="content.updateBuyPrice"
-                    label="به روز رسانی قیمت خرید هنگام صدور فاکتور"
-                    color="primary"
-                    hide-details
-                  ></v-switch>
-                  <div class="text-caption text-medium-emphasis mt-1">
-                    با صدور فاکتور خرید یا برگشت از خرید قیمت خرید کالا و خدمات به روزرسانی خواهد شد.
-                  </div>
+                  <!-- بخش کیف پول -->
+                  <v-card variant="outlined" class="mb-6">
+                    <v-card-title class="text-h6 text-primary">
+                      <v-icon icon="mdi-wallet" class="mr-2"></v-icon>
+                      دریافت مبلغ فاکتور از طریق کیف پول
+                    </v-card-title>
+                    <v-card-text>
+                      <v-switch
+                        v-model="content.walletEnabled"
+                        label="فعال‌سازی دریافت آنلاین از طریق کیف پول"
+                        color="primary"
+                        @change="checkBanksExist"
+                        hide-details
+                        class="mb-2"
+                      ></v-switch>
+                      <div class="text-body-2 text-medium-emphasis mb-4">
+                        با فعال سازی این قابلیت قادر خواهید بود مبالغ فاکتورهای ثبت شده را به صورت آنلاین از مشتریان خود دریافت کنید.
+                      </div>
+                      
+                      <v-expand-transition>
+                        <div v-if="content.walletEnabled">
+                          <v-divider class="mb-4"></v-divider>
+                          <v-row>
+                            <v-col cols="12" md="8">
+                              <v-select
+                                v-model="content.walletMatchBank"
+                                :items="listBanks"
+                                item-title="name"
+                                item-value="id"
+                                label="حساب بانکی متصل به کیف پول"
+                                variant="outlined"
+                                density="compact"
+                                prepend-icon="mdi-bank"
+                              ></v-select>
+                            </v-col>
+                            <v-col cols="12">
+                              <v-alert
+                                type="info"
+                                variant="tonal"
+                                class="mt-2"
+                              >
+                                <template v-slot:prepend>
+                                  <v-icon icon="mdi-information"></v-icon>
+                                </template>
+                                برای تسویه اتوماتیک به حساب انتخاب شده حتما باید تمام موارد از جمله شماره شبا و شماره کارت و ... به درستی تکمیل شده باشد در غیر این صورت تراکنش با خطا مواجه خواهد شد.
+                              </v-alert>
+                            </v-col>
+                          </v-row>
+                        </div>
+                      </v-expand-transition>
+                    </v-card-text>
+                  </v-card>
+
+                  <!-- بخش کالا و خدمات -->
+                  <v-card variant="outlined">
+                    <v-card-title class="text-h6 text-primary">
+                      <v-icon icon="mdi-package-variant" class="mr-2"></v-icon>
+                      کالا و خدمات
+                    </v-card-title>
+                    <v-card-text>
+                      <v-row>
+                        <v-col cols="12">
+                          <v-switch
+                            v-model="content.updateBuyPrice"
+                            label="به روز رسانی قیمت خرید هنگام صدور فاکتور"
+                            color="primary"
+                            hide-details
+                            class="mb-2"
+                          ></v-switch>
+                          <div class="text-body-2 text-medium-emphasis mb-4">
+                            با صدور فاکتور خرید یا برگشت از خرید قیمت خرید کالا و خدمات به روزرسانی خواهد شد.
+                          </div>
+                        </v-col>
+                        
+                        <v-col cols="12">
+                          <v-switch
+                            v-model="content.updateSellPrice"
+                            label="به روز رسانی قیمت فروش هنگام صدور فاکتور"
+                            color="primary"
+                            hide-details
+                            class="mb-2"
+                          ></v-switch>
+                          <div class="text-body-2 text-medium-emphasis mb-4">
+                            با صدور فاکتور فروش یا برگشت از فروش قیمت فروش کالا و خدمات به روزرسانی خواهد شد.
+                          </div>
+                        </v-col>
+                        
+                        <v-col cols="12" md="8">
+                          <v-select
+                            v-model="content.profitCalcType"
+                            :items="[
+                              { title: 'بر اساس اختلاف قیمت خرید و فروش', value: 'simple' },
+                              { title: 'بر اساس آخرین قیمت ورود به انبار', value: 'lis' },
+                              { title: 'بر اساس میانگین قیمت ورود به انبار', value: 'avgis' }
+                            ]"
+                            item-title="title"
+                            item-value="value"
+                            label="نحوه محاسبه سود فاکتور"
+                            variant="outlined"
+                            density="compact"
+                            prepend-icon="mdi-calculator"
+                          ></v-select>
+                        </v-col>
+                      </v-row>
+                    </v-card-text>
+                  </v-card>
                 </v-col>
-                <v-col cols="12" md="8">
-                  <v-switch
-                    v-model="content.updateSellPrice"
-                    label="به روز رسانی قیمت فروش هنگام صدور فاکتور"
-                    color="primary"
-                    hide-details
-                  ></v-switch>
-                  <div class="text-caption text-medium-emphasis mt-1">
-                    با صدور فاکتور فروش یا برگشت از فروش قیمت خرید کالا و خدمات به روزرسانی خواهد شد.
-                  </div>
-                </v-col>
-                <v-col cols="12" md="8">
-                  <v-select
-                    v-model="content.profitCalcType"
-                    :items="[
-                      { title: 'بر اساس اختلاف قیمت خرید و فروش', value: 'simple' },
-                      { title: 'بر اساس آخرین قیمت ورود به انبار', value: 'lis' },
-                      { title: 'بر اساس میانگین قیمت ورود به انبار', value: 'avgis' }
-                    ]"
-                    item-title="title"
-                    item-value="value"
-                    label="نحوه محاسبه سود فاکتور"
-                    variant="outlined"
-                    density="compact"
-                  ></v-select>
+                
+                <v-col cols="12" md="4">
+                  <!-- کارت راهنما -->
+                  <v-card variant="outlined" class="mb-4">
+                    <v-card-title class="text-h6 text-primary">
+                      <v-icon icon="mdi-help-circle" class="mr-2"></v-icon>
+                      راهنما
+                    </v-card-title>
+                    <v-card-text>
+                      <v-list density="compact">
+                        <v-list-item prepend-icon="mdi-link-variant" title="پیوند یکتا" class="text-body-2">
+                          <template v-slot:subtitle>
+                            <span class="text-caption">برای اشتراک‌گذاری فاکتورها</span>
+                          </template>
+                        </v-list-item>
+                        <v-list-item prepend-icon="mdi-wallet" title="کیف پول" class="text-body-2">
+                          <template v-slot:subtitle>
+                            <span class="text-caption">دریافت آنلاین مبالغ</span>
+                          </template>
+                        </v-list-item>
+                        <v-list-item prepend-icon="mdi-package-variant" title="کالا و خدمات" class="text-body-2">
+                          <template v-slot:subtitle>
+                            <span class="text-caption">مدیریت قیمت‌ها و سود</span>
+                          </template>
+                        </v-list-item>
+                      </v-list>
+                    </v-card-text>
+                  </v-card>
+                  
+                  <!-- کارت نکات مهم -->
+                  <v-card variant="outlined" color="info">
+                    <v-card-title class="text-h6">
+                      <v-icon icon="mdi-lightbulb" class="mr-2"></v-icon>
+                      نکات مهم
+                    </v-card-title>
+                    <v-card-text>
+                      <div class="text-body-2">
+                        <ul class="pl-4">
+                          <li class="mb-2">تنظیمات سراسری بر تمام عملیات کسب و کار تأثیر می‌گذارد</li>
+                          <li class="mb-2">تغییرات پس از ذخیره اعمال می‌شوند</li>
+                          <li class="mb-2">برای کیف پول حتماً حساب بانکی معتبر انتخاب کنید</li>
+                        </ul>
+                      </div>
+                    </v-card-text>
+                  </v-card>
                 </v-col>
               </v-row>
             </v-card-text>