ui(admin-panel): responsive persons menu, XTable phone cards, full-screen form modal

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-13 09:08:38 +03:30
parent 28b0a4be38
commit 0a2466ca0c
15 changed files with 453 additions and 25 deletions
@@ -15,7 +15,7 @@
  -->
  <div id="page-user-view">
    <div id="user-data">
-      <a-card class="mb-base">
+      <a-card class="mb-base page-card">
        <a-tabs v-if="hasPermission('persons.create')">
          <a-tab-pane v-if="hasPermission('persons.create.client')" key="omde" tab="مشتری عمده">
            <BulkCustomer />
@@ -4,7 +4,7 @@
    a 19-line wrapper whose entire template is <Customer /> (bulkCustomer).
    bulkCustomer reads the :id route param to switch between create and edit.
  -->
-  <BulkCustomer />
+  <BulkCustomer class="page-card" />
 </template>

 <script setup lang="ts">
@@ -3,7 +3,7 @@
    Ported from legacy henza_admin/src/views/apps/customer/EditReagent.vue — a
    19-line wrapper over <ReagentCustomer />, which reads the :id route param.
  -->
-  <ReagentCustomer />
+  <ReagentCustomer class="page-card" />
 </template>

 <script setup lang="ts">
@@ -4,7 +4,7 @@
    — a 16-line wrapper over <Customer /> (singleCustomer), which reads the :id
    route param to switch between create and edit.
  -->
-  <SingleCustomerForm />
+  <SingleCustomerForm class="page-card" />
 </template>

 <script setup lang="ts">
@@ -104,7 +104,7 @@
        </a-form-item>
      </a-card>

-      <a-button type="primary" @click="handleSubmit">ثبت اطلاعات</a-button>
+      <a-button type="primary" class="form-submit" @click="handleSubmit">ثبت اطلاعات</a-button>
    </a-form>
  </a-spin>
 </template>
@@ -295,4 +295,10 @@ onMounted(async () => {
  display: flex;
  justify-content: center;
 }
+/* single-column grid on phones: a 2-row span would only leave a gap */
+@media (max-width: 575px) {
+  .avatar-cell {
+    grid-row: auto;
+  }
+}
 </style>
@@ -247,7 +247,7 @@
      </a-card>

      <div>
-        <a-button type="primary" class="mr-4" @click="handleSubmitOmde">ثبت اطلاعات</a-button>
+        <a-button type="primary" class="mr-4 form-submit" @click="handleSubmitOmde">ثبت اطلاعات</a-button>
      </div>
    </a-spin>
  </a-form>
@@ -41,7 +41,7 @@
          />
        </div>

-        <a-button type="primary" @click="handleSubmit">ثبت اطلاعات</a-button>
+        <a-button type="primary" class="form-submit" @click="handleSubmit">ثبت اطلاعات</a-button>
      </a-card>
    </a-form>
  </a-spin>
@@ -10,8 +10,8 @@
      - the retail screen adds a wallet panel (legacy single/wallet/{id})
  -->
  <a-spin :spinning="loading">
-    <a-card :title="title">
-      <a-descriptions bordered size="small" :column="3">
+    <a-card :title="title" class="page-card">
+      <a-descriptions bordered size="small" :column="{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 }">
        <a-descriptions-item label="نام">{{ customer?.name ?? '-' }}</a-descriptions-item>
        <a-descriptions-item label="موبایل">{{ customer?.mobile ?? '-' }}</a-descriptions-item>
        <a-descriptions-item label="کد ملی">
@@ -47,7 +47,7 @@
    <!-- D27 — link and balance in the accounting software. -->
    <CustomerAccountingCard :customer-id="id" />

-    <a-tabs class="mt-4" :default-active-key="defaultTab">
+    <a-tabs class="mt-4 detail-tabs" :default-active-key="defaultTab">
      <a-tab-pane key="orders" tab="سفارش ها">
        <a-table
          size="small"
@@ -208,9 +208,28 @@ onMounted(async () => {
 <style scoped>
 .stats {
  display: flex;
+  flex-wrap: wrap;
  gap: 0.5rem;
 }
 .mt-4 {
  margin-top: 1rem;
 }
+
+@media (max-width: 575px) {
+  .mt-4 {
+    margin-top: 12px;
+  }
+  .stats :deep(.ant-tag) {
+    margin: 0;
+  }
+  .detail-tabs :deep(.ant-tabs-nav) {
+    margin-bottom: 8px;
+  }
+  .detail-tabs :deep(.ant-table-content) {
+    overflow-x: auto;
+  }
+  .detail-tabs :deep(.ant-table-content > table) {
+    min-width: max-content;
+  }
+}
 </style>
@@ -12,16 +12,16 @@
    the implementation lives once, parameterised by props.
  -->
  <div id="page-user-list">
-    <a-card :title="title">
+    <a-card :title="title" class="page-card">
      <template v-if="accountingSync" #extra>
        <AccountingSyncButton endpoint="admin/customers-omde/accounting-sync" @done="tbl?.fetch()" />
      </template>
-      <div v-if="query && query.count && query.total">
+      <div v-if="query && query.count && query.total" class="list-count">
        {{ query.total }} رکورد یافت شد -
        <span class="text-danger">{{ query.count }} رکورد غیر فعال</span>
      </div>

-      <XTable ref="tbl" :model="model" @query="setCount">
+      <XTable ref="tbl" :model="model" mobile-cards @query="setCount">
        <template v-if="showAddButton" #add>
          <ListPageHeader rid="persons.create.client" add-label="افزودن مشتری عمده" @add="openAdd" />
        </template>
@@ -503,3 +503,12 @@ function viewCash(record: Record<string, any>) {
 }
 </script>

+<style scoped>
+@media (max-width: 575px) {
+  .list-count {
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
+}
+</style>
+
@@ -11,8 +11,8 @@
    those customers' orders instead.
  -->
  <a-spin :spinning="loading">
-    <a-card title="مشاهده اطلاعات کارشناس فروش">
-      <a-descriptions bordered size="small" :column="3">
+    <a-card title="مشاهده اطلاعات کارشناس فروش" class="page-card">
+      <a-descriptions bordered size="small" :column="{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 }">
        <a-descriptions-item label="نام">{{ agent?.name ?? '-' }}</a-descriptions-item>
        <a-descriptions-item label="موبایل">{{ agent?.mobile ?? '-' }}</a-descriptions-item>
        <a-descriptions-item label="شعبه">{{ agent?.branch?.name ?? '-' }}</a-descriptions-item>
@@ -33,7 +33,7 @@
      </div>
    </a-card>

-    <a-tabs class="mt-4" default-active-key="referred">
+    <a-tabs class="mt-4 detail-tabs" default-active-key="referred">
      <a-tab-pane key="referred" tab="مشتریان معرفی‌شده">
        <a-table
          size="small"
@@ -118,9 +118,28 @@ onMounted(async () => {
 <style scoped>
 .stats {
  display: flex;
+  flex-wrap: wrap;
  gap: 0.5rem;
 }
 .mt-4 {
  margin-top: 1rem;
 }
+
+@media (max-width: 575px) {
+  .mt-4 {
+    margin-top: 12px;
+  }
+  .stats :deep(.ant-tag) {
+    margin: 0;
+  }
+  .detail-tabs :deep(.ant-tabs-nav) {
+    margin-bottom: 8px;
+  }
+  .detail-tabs :deep(.ant-table-content) {
+    overflow-x: auto;
+  }
+  .detail-tabs :deep(.ant-table-content > table) {
+    min-width: max-content;
+  }
+}
 </style>
@@ -16,8 +16,8 @@
    endpoints it used to hit (which would 404/target the wrong row entirely).
  -->
  <div id="page-user-list">
-    <a-card title="لیست کارشناسان فروش">
-      <XTable ref="tbl" :model="model">
+    <a-card title="لیست کارشناسان فروش" class="page-card">
+      <XTable ref="tbl" :model="model" mobile-cards>
        <template #add>
          <ListPageHeader
            v-if="hasPermission('persons.create.seller')"
@@ -5,8 +5,8 @@
    including legacy's quirk that the "مشاهده اطلاعات" icon is gated on the
    `wallet.charge` rid rather than a view rid.
  -->
-  <a-card :title="is_branch ? 'لیست مشتریان' : 'لیست مشتریان تک فروشی'">
-    <XTable ref="tbl" :model="model">
+  <a-card :title="is_branch ? 'لیست مشتریان' : 'لیست مشتریان تک فروشی'" class="page-card">
+    <XTable ref="tbl" :model="model" mobile-cards>
      <template #op="{ record }">
        <a-tooltip title="ویرایش">
          <EditOutlined class="cursor-pointer mx-1 text-primary" @click="toEdit(record.id)" />