From 6d8ede8e2abd2d2acc07185489880142eb2964dc Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Thu, 22 Oct 2026 19:47:58 +0330
Subject: [PATCH] fix(tahesab): polish sales report page chrome Match
 leads/invoices header layout, keep title clean, and add a clear apply-filters
 action for the date range.

---
 apps/web/src/views/TahesabSalesReportView.vue | 428 ++++++++++--------
 1 file changed, 249 insertions(+), 179 deletions(-)

diff --git a/apps/web/src/views/TahesabSalesReportView.vue b/apps/web/src/views/TahesabSalesReportView.vue
index a2f01b9..2f8d7b8 100644
--- a/apps/web/src/views/TahesabSalesReportView.vue
+++ b/apps/web/src/views/TahesabSalesReportView.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import { theme } from 'ant-design-vue';
 import type { TableColumnsType, TablePaginationConfig } from 'ant-design-vue';
-import { ReloadOutlined, SyncOutlined } from '@ant-design/icons-vue';
+import {
+  ArrowRightOutlined,
+  FilterOutlined,
+  SearchOutlined,
+  SyncOutlined,
+} from '@ant-design/icons-vue';
 import {
   TAHESAB_ASNAD_KIND_LABELS,
   TAHESAB_ASNAD_KINDS,
@@ -28,6 +34,7 @@ import { useCustomerGroups } from '@/lib/customer-groups';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 
 const router = useRouter();
+const { token } = theme.useToken();
 const { groups: customerGroups, load: loadCustomerGroups } = useCustomerGroups();
 
 const connections = ref<TahesabConnectionDto[]>([]);
@@ -87,7 +94,9 @@ function metalLabel(v: number | null) {
 
 function formatNum(n: number | null | undefined) {
   if (n == null) return '—';
-  return toFaDigits(new Intl.NumberFormat('fa-IR', { maximumFractionDigits: 3 }).format(n));
+  return toFaDigits(
+    new Intl.NumberFormat('fa-IR', { maximumFractionDigits: 3 }).format(n),
+  );
 }
 
 function formatMali(n: number | null | undefined) {
@@ -96,7 +105,13 @@ function formatMali(n: number | null | undefined) {
 }
 
 const columns: TableColumnsType<TahesabAsnadLineDto> = [
-  { title: 'تاریخ', dataIndex: 'tarikh', key: 'tarikh', width: 110 },
+  {
+    title: 'تاریخ',
+    dataIndex: 'tarikh',
+    key: 'tarikh',
+    width: 110,
+    customRender: ({ text }) => toFaDigits(String(text ?? '')),
+  },
   {
     title: 'شخص',
     key: 'person',
@@ -162,6 +177,16 @@ const filterParams = computed(() => {
   };
 });
 
+const lastSyncedLabel = computed(() => {
+  const raw = summary.value?.lastSyncedAt;
+  if (!raw) return null;
+  try {
+    return toFaDigits(new Date(raw).toLocaleString('fa-IR'));
+  } catch {
+    return null;
+  }
+});
+
 async function loadConnections() {
   const { data } = await api.get<TahesabConnectionDto[]>(
     '/integrations/tahesab/connections/public',
@@ -263,7 +288,7 @@ async function pollJob(jobId: string) {
 async function startSync() {
   const params = filterParams.value;
   if (!params) {
-    error.value = 'تاریخ از و تا را انتخاب کنید.';
+    error.value = 'ابتدا بازه تاریخ را مشخص کنید، بعد به‌روزرسانی را بزنید.';
     return;
   }
   syncing.value = true;
@@ -289,6 +314,11 @@ async function startSync() {
   }
 }
 
+function applyFilters() {
+  page.value = 1;
+  void loadReport();
+}
+
 function onTableChange(pag: TablePaginationConfig) {
   page.value = pag.current ?? 1;
   pageSize.value = pag.pageSize ?? 50;
@@ -313,190 +343,230 @@ onUnmounted(() => stopPoll());
 </script>
 
 <template>
-  <a-flex vertical :gap="16">
-    <a-row :gutter="[16, 16]" align="middle" justify="space-between">
-      <a-col :xs="24" :md="14">
-        <a-typography-title :level="3" style="margin: 0">
-          گزارش فروش ته‌حساب
-        </a-typography-title>
-        <a-typography-text type="secondary">
-          اسنپ‌شات اسناد مشتریان لینک‌شده — طبقه‌بندی فروش/مرجوعی تقریبی است و بعد از بازخورد کارفرما اصلاح می‌شود.
-        </a-typography-text>
-      </a-col>
-      <a-col :xs="24" :md="10">
-        <a-flex justify="flex-end" wrap="wrap" :gap="8">
-          <a-button @click="router.push({ name: 'reports' })">بازگشت به گزارش‌ها</a-button>
-          <a-button :loading="loading" @click="loadReport">
-            <template #icon><ReloadOutlined /></template>
-            نمایش
+  <a-row :gutter="[24, 24]">
+    <a-col :span="24">
+      <a-flex
+        justify="space-between"
+        align="center"
+        wrap="wrap"
+        :gap="token.marginSM"
+      >
+        <div>
+          <a-typography-title :level="3" :style="{ margin: 0 }">
+            گزارش فروش ته‌حساب
+          </a-typography-title>
+          <a-typography-text type="secondary">
+            فروش و مرجوعی مشتریان لینک‌شده بر اساس بازه تاریخ
+          </a-typography-text>
+        </div>
+        <a-space :size="8" wrap>
+          <a-button @click="router.push({ name: 'reports' })">
+            <template #icon><ArrowRightOutlined /></template>
+            بازگشت
           </a-button>
           <a-button type="primary" :loading="syncing" @click="startSync">
             <template #icon><SyncOutlined /></template>
             به‌روزرسانی از ته‌حساب
           </a-button>
-        </a-flex>
-      </a-col>
-    </a-row>
+        </a-space>
+      </a-flex>
+    </a-col>
 
-    <a-alert v-if="error" type="error" show-icon :message="error" closable @close="error = ''" />
-    <a-alert v-if="syncHint" type="info" show-icon :message="syncHint" />
+    <a-col v-if="error" :span="24">
+      <a-alert type="error" show-icon :message="error" closable @close="error = ''" />
+    </a-col>
+    <a-col v-if="syncHint" :span="24">
+      <a-alert type="info" show-icon :message="syncHint" />
+    </a-col>
 
-    <a-card :bordered="false" title="فیلترها">
-      <a-form layout="vertical">
-        <a-row :gutter="[16, 8]">
-          <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item label="اتصال ته‌حساب">
-              <a-select
-                v-model:value="connectionId"
-                :options="connections.map((c) => ({ value: c.id, label: c.label }))"
-                placeholder="اتصال"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item label="از تاریخ">
-              <JalaliDateInput v-model="fromDate" placeholder="از" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item label="تا تاریخ">
-              <JalaliDateInput v-model="toDate" placeholder="تا" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item label="گروه مشتری">
-              <a-select
-                v-model:value="groupIds"
-                mode="multiple"
-                allow-clear
-                placeholder="همه گروه‌ها"
-                :options="(customerGroups as CustomerGroupDto[]).map((g) => ({ value: g.id, label: g.name }))"
-                :max-tag-count="2"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item label="نوع سند">
-              <a-select
-                v-model:value="kinds"
-                mode="multiple"
-                :options="kindOptions"
-                placeholder="نوع"
-                :max-tag-count="2"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item label="فلز">
-              <a-select
-                v-model:value="jensFelez"
-                allow-clear
-                placeholder="همه"
-                :options="metalOptions"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item label="شخص">
-              <a-select
-                v-model:value="personId"
-                show-search
-                allow-clear
-                placeholder="جستجوی نام…"
-                :filter-option="false"
-                :options="personOptions"
-                @search="searchPeople"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
+    <a-col :span="24">
+      <a-card :bordered="false">
+        <template #title>
+          <a-space :size="8">
+            <FilterOutlined />
+            <span>فیلترها</span>
+          </a-space>
+        </template>
+        <a-form layout="vertical" @finish="applyFilters">
+          <a-row :gutter="[16, 8]">
+            <a-col :xs="24" :sm="12" :md="8" :lg="6">
+              <a-form-item label="اتصال">
+                <a-select
+                  v-model:value="connectionId"
+                  :options="
+                    connections.map((c) => ({ value: c.id, label: c.label }))
+                  "
+                  placeholder="اتصال ته‌حساب"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" :lg="6">
+              <a-form-item label="از تاریخ" required>
+                <JalaliDateInput v-model="fromDate" placeholder="از تاریخ" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" :lg="6">
+              <a-form-item label="تا تاریخ" required>
+                <JalaliDateInput v-model="toDate" placeholder="تا تاریخ" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" :lg="6">
+              <a-form-item label="گروه مشتری">
+                <a-select
+                  v-model:value="groupIds"
+                  mode="multiple"
+                  allow-clear
+                  placeholder="همه گروه‌ها"
+                  :options="
+                    (customerGroups as CustomerGroupDto[]).map((g) => ({
+                      value: g.id,
+                      label: g.name,
+                    }))
+                  "
+                  :max-tag-count="2"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" :lg="6">
+              <a-form-item label="نوع سند">
+                <a-select
+                  v-model:value="kinds"
+                  mode="multiple"
+                  :options="kindOptions"
+                  placeholder="فروش / مرجوعی / …"
+                  :max-tag-count="2"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" :lg="6">
+              <a-form-item label="فلز">
+                <a-select
+                  v-model:value="jensFelez"
+                  allow-clear
+                  placeholder="همه"
+                  :options="metalOptions"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" :lg="6">
+              <a-form-item label="شخص">
+                <a-select
+                  v-model:value="personId"
+                  show-search
+                  allow-clear
+                  placeholder="جستجوی نام…"
+                  :filter-option="false"
+                  :options="personOptions"
+                  @search="searchPeople"
+                >
+                  <template #suffixIcon><SearchOutlined /></template>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
+            <a-typography-text v-if="lastSyncedLabel" type="secondary">
+              آخرین همگام‌سازی: {{ lastSyncedLabel }}
+            </a-typography-text>
+            <a-typography-text v-else type="secondary">
+              بعد از انتخاب بازه، فیلتر را اعمال کنید یا از ته‌حساب به‌روز کنید.
+            </a-typography-text>
+            <a-button type="primary" html-type="submit" :loading="loading">
+              اعمال فیلتر
+            </a-button>
+          </a-flex>
+        </a-form>
+      </a-card>
+    </a-col>
 
-    <a-row v-if="summary" :gutter="[16, 16]">
-      <a-col :xs="24" :sm="8">
-        <a-card :bordered="false">
-          <a-statistic title="تعداد ردیف" :value="summary.totalLines" />
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="8">
-        <a-card :bordered="false">
-          <a-statistic title="جمع مبلغ" :value="formatMali(summary.maliSum)" />
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="8">
-        <a-card :bordered="false">
-          <a-statistic title="جمع وزن" :value="formatNum(summary.vaznSum)" />
-        </a-card>
-      </a-col>
-    </a-row>
+    <a-col v-if="summary" :xs="24" :sm="8">
+      <a-card :bordered="false">
+        <a-statistic
+          title="تعداد ردیف"
+          :value="summary.totalLines"
+          :formatter="(val) => toFaDigits(String(val))"
+        />
+      </a-card>
+    </a-col>
+    <a-col v-if="summary" :xs="24" :sm="8">
+      <a-card :bordered="false">
+        <a-statistic title="جمع مبلغ" :value="formatMali(summary.maliSum)" />
+      </a-card>
+    </a-col>
+    <a-col v-if="summary" :xs="24" :sm="8">
+      <a-card :bordered="false">
+        <a-statistic title="جمع وزن" :value="formatNum(summary.vaznSum)" />
+      </a-card>
+    </a-col>
 
-    <a-row v-if="summary?.byKind?.length" :gutter="[16, 16]">
-      <a-col :xs="24" :lg="12">
-        <a-card :bordered="false" title="به تفکیک نوع">
-          <a-list
-            :data-source="summary.byKind"
-            item-layout="horizontal"
-            size="small"
-          >
-            <template #renderItem="{ item }">
-              <a-list-item>
-                <a-list-item-meta :title="item.label">
-                  <template #description>
-                    {{ toFaDigits(String(item.lineCount)) }} ردیف ·
-                    {{ formatMali(item.maliSum) }} · وزن {{ formatNum(item.vaznSum) }}
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </template>
-          </a-list>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :lg="12">
-        <a-card :bordered="false" title="به تفکیک گروه">
-          <a-list
-            :data-source="summary.byGroup.slice(0, 8)"
-            item-layout="horizontal"
-            size="small"
-          >
-            <template #renderItem="{ item }">
-              <a-list-item>
-                <a-list-item-meta :title="item.label">
-                  <template #description>
-                    {{ toFaDigits(String(item.lineCount)) }} ردیف ·
-                    {{ formatMali(item.maliSum) }}
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </template>
-          </a-list>
-        </a-card>
-      </a-col>
-    </a-row>
+    <a-col v-if="summary?.byKind?.length" :xs="24" :lg="12">
+      <a-card :bordered="false" title="به تفکیک نوع">
+        <a-list :data-source="summary.byKind" item-layout="horizontal">
+          <template #renderItem="{ item }">
+            <a-list-item>
+              <a-list-item-meta :title="item.label">
+                <template #description>
+                  {{ toFaDigits(String(item.lineCount)) }} ردیف ·
+                  {{ formatMali(item.maliSum) }} · وزن {{ formatNum(item.vaznSum) }}
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+          </template>
+        </a-list>
+      </a-card>
+    </a-col>
+    <a-col v-if="summary?.byGroup?.length" :xs="24" :lg="12">
+      <a-card :bordered="false" title="به تفکیک گروه">
+        <a-list
+          :data-source="summary.byGroup.slice(0, 8)"
+          item-layout="horizontal"
+        >
+          <template #renderItem="{ item }">
+            <a-list-item>
+              <a-list-item-meta :title="item.label">
+                <template #description>
+                  {{ toFaDigits(String(item.lineCount)) }} ردیف ·
+                  {{ formatMali(item.maliSum) }}
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+          </template>
+        </a-list>
+      </a-card>
+    </a-col>
 
-    <a-card v-if="summary?.distinctNos?.length" :bordered="false" title="مقادیر خام NO در این بازه">
-      <a-space wrap>
-        <a-tag v-for="no in summary.distinctNos" :key="no">{{ no }}</a-tag>
-      </a-space>
-    </a-card>
+    <a-col v-if="summary?.distinctNos?.length" :span="24">
+      <a-card :bordered="false" title="انواع سند خام (NO)">
+        <a-space wrap>
+          <a-tag v-for="no in summary.distinctNos" :key="no">{{ no }}</a-tag>
+        </a-space>
+      </a-card>
+    </a-col>
 
-    <a-card :bordered="false" title="ردیف‌ها">
-      <a-table
-        :columns="columns"
-        :data-source="report?.items ?? []"
-        :loading="loading"
-        :pagination="{
-          current: page,
-          pageSize,
-          total: report?.total ?? 0,
-          showSizeChanger: true,
-          pageSizeOptions: ['20', '50', '100'],
-        }"
-        row-key="id"
-        :scroll="{ x: 1100 }"
-        @change="onTableChange"
-      />
-    </a-card>
-  </a-flex>
+    <a-col :span="24">
+      <a-card :bordered="false" title="ردیف‌های گزارش">
+        <a-table
+          :columns="columns"
+          :data-source="report?.items ?? []"
+          :loading="loading"
+          :pagination="{
+            current: page,
+            pageSize,
+            total: report?.total ?? 0,
+            showSizeChanger: true,
+            showTotal: (total) => `${toFaDigits(String(total))} ردیف`,
+            pageSizeOptions: ['20', '50', '100'],
+          }"
+          row-key="id"
+          :scroll="{ x: 1100 }"
+          @change="onTableChange"
+        >
+          <template #emptyText>
+            <a-empty description="برای این بازه ردیفی نیست. بازه را اعمال کنید یا از ته‌حساب به‌روز کنید." />
+          </template>
+        </a-table>
+      </a-card>
+    </a-col>
+  </a-row>
 </template>