admin-panel: convert promotion add/edit forms into modals

PromotionForm.vue (shared by the omde and tak variants) gains open/id modal
support; both thin wrappers (promotion_add_edit.vue, promotion_tak_add_edit.vue)
pass the props/emits through unchanged. promotion_list.vue gets two
ListPageHeader buttons (offers.create / offers.create.tak, matching the two
routes' rids) and picks which variant's modal to open based on the edited
row's type_customer, exactly as the old toEdit() picked which route to
navigate to.

Verified: pnpm build passes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/admin-panel/src/views/promotion/PromotionForm.vue

@@ -8,7 +8,125 @@
     option and its whole customer block COMMENTED OUT. Both differences are
     parameterised here rather than duplicating ~400 lines.
   -->
-  <a-spin :spinning="loading">
+  <BaseFormModal
+    v-if="asModal"
+    :open="Boolean(open)"
+    :id="id"
+    :add-title="title"
+    :edit-title="title"
+    :loading="loading"
+    :submitting="loading"
+    width="lg"
+    @update:open="$emit('update:open', $event)"
+    @submit="handleSubmit"
+  >
+    <div class="grid-4 grid-4--tight">
+      <a-form-item label="نوع تخفیف">
+        <!-- legacy disables the type selector while editing -->
+        <a-select v-model:value="form.type" :disabled="Boolean(id)" @change="changeType">
+          <a-select-option :value="1">محصولات</a-select-option>
+          <a-select-option :value="2">دسته بندی</a-select-option>
+          <a-select-option v-if="allowCustomerScope" :value="3">مشتری</a-select-option>
+          <a-select-option :value="4">برند</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item label="عنوان" :validate-status="err.title ? 'error' : ''" :help="err.title">
+        <a-input v-model:value="form.title" />
+      </a-form-item>
+
+      <!-- the target picker changes with the scope -->
+      <a-form-item v-if="form.type === 1" label="محصول">
+        <a-select
+          v-model:value="form.product_id"
+          show-search
+          allow-clear
+          :filter-option="filterOption"
+          placeholder="انتخاب کنید"
+        >
+          <a-select-option v-for="p in products" :key="p.id" :value="p.id">
+            {{ p.title }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item v-if="form.type === 2" label="دسته بندی">
+        <a-select
+          v-model:value="form.category_id"
+          show-search
+          allow-clear
+          :filter-option="filterOption"
+          placeholder="انتخاب کنید"
+        >
+          <a-select-option v-for="c in categories" :key="c.id" :value="c.id">
+            {{ c.title }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item v-if="form.type === 3 && allowCustomerScope" label="مشتری">
+        <a-select
+          v-model:value="form.customer_id"
+          show-search
+          allow-clear
+          :filter-option="filterOption"
+          placeholder="انتخاب کنید"
+        >
+          <a-select-option v-for="c in customers" :key="c.id" :value="c.id">
+            {{ c.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item v-if="form.type === 4" label="برند">
+        <a-select
+          v-model:value="form.brand_id"
+          show-search
+          allow-clear
+          :filter-option="filterOption"
+          placeholder="انتخاب کنید"
+        >
+          <a-select-option v-for="b in brands" :key="b.id" :value="b.id">
+            {{ b.title }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        label="درصد تخفیف"
+        :validate-status="err.discount_percent ? 'error' : ''"
+        :help="err.discount_percent"
+      >
+        <a-input-number v-model:value="form.discount_percent" class="w-full" :min="0" :max="100" />
+      </a-form-item>
+
+      <a-form-item label="تاریخ شروع">
+        <a-date-picker v-model:value="form.start" class="w-full" value-format="YYYY-MM-DD" />
+      </a-form-item>
+
+      <a-form-item label="تاریخ پایان">
+        <a-date-picker v-model:value="form.end" class="w-full" value-format="YYYY-MM-DD" />
+      </a-form-item>
+
+      <a-form-item label="قابلیت استفاده">
+        <a-radio-group v-model:value="form.use_only">
+          <a-radio :value="1"> فقط یکبار</a-radio>
+          <a-radio :value="2">تا  تاریخ پایان</a-radio>
+        </a-radio-group>
+      </a-form-item>
+
+      <a-form-item label="وضعیت تخفیف">
+        <a-switch v-model:checked="form.is_active" />
+      </a-form-item>
+    </div>
+
+    <a-form-item label="توضیحات">
+      <a-textarea v-model:value="form.description" :auto-size="{ minRows: 3, maxRows: 6 }" />
+    </a-form-item>
+  </BaseFormModal>
+
+  <!-- route-based fallback for direct links to /major/promotion/(tak/)add and .../edit/:id -->
+  <a-spin v-else :spinning="loading">
     <a-form layout="vertical" @submit.prevent="handleSubmit">
       <a-card :title="title" class="mb-base">
         <div class="grid-4 grid-4--tight">
@@ -134,6 +252,7 @@
 import { onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
+import BaseFormModal from '../../components/common/BaseFormModal.vue';
 import api from '../../api/client';
 
 const props = withDefaults(
@@ -144,14 +263,23 @@ const props = withDefaults(
      * is not offered there. Preserved behind this flag.
      */
     allowCustomerScope?: boolean;
+    /** Present -> rendered as a modal by the parent list page. */
+    open?: boolean;
+    id?: string;
   }>(),
   { title: 'تعریف تخفیف', allowCustomerScope: true },
 );
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+  (e: 'success'): void;
+}>();
+
+const asModal = props.open !== undefined;
 
 const route = useRoute();
 const router = useRouter();
 
-const id = route.params.id as string | undefined;
+const id = asModal ? props.id : (route.params.id as string | undefined);
 const loading = ref(false);
 
 const products = ref<{ id: string; title: string }[]>([]);
@@ -209,7 +337,12 @@ async function handleSubmit() {
       await api.post('product/variant/promotion', form);
     }
     message.info('اطلاعات با موفقیت به ثبت رسید.');
-    router.push('/major/promotion/list');
+    if (asModal) {
+      emit('success');
+      emit('update:open', false);
+    } else {
+      router.push('/major/promotion/list');
+    }
   } catch (e: any) {
     message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
   } finally {

apps/admin-panel/src/views/promotion/promotion_add_edit.vue

@@ -3,11 +3,23 @@
     Ported from legacy henza_admin/src/views/promotion/promotion_add_edit.vue.
     Verified by diff against promotion_tak_add_edit.vue: the two files differ
     only in the card title and whether the "مشتری" scope is offered, so both are
-    thin wrappers over PromotionForm.
+    thin wrappers over PromotionForm. Props/emits pass through unchanged so this
+    wrapper works both as the /major/promotion/add(/edit/:id) route and as a
+    modal opened from promotion_list.vue.
   -->
-  <PromotionForm title="تعریف تخفیف" :allow-customer-scope="true" />
+  <PromotionForm
+    title="تعریف تخفیف"
+    :allow-customer-scope="true"
+    :open="open"
+    :id="id"
+    @update:open="$emit('update:open', $event)"
+    @success="$emit('success')"
+  />
 </template>
 
 <script setup lang="ts">
 import PromotionForm from './PromotionForm.vue';
+
+defineProps<{ open?: boolean; id?: string }>();
+defineEmits<{ (e: 'update:open', value: boolean): void; (e: 'success'): void }>();
 </script>

apps/admin-panel/src/views/promotion/promotion_list.vue

@@ -8,6 +8,11 @@
   -->
   <div id="page-user-list">
     <a-card title="لیست تخفیف ها">
+      <div class="list-page-header-row">
+        <ListPageHeader rid="offers.create" add-label="افزودن تخفیف عمده" @add="openAdd('omde')" />
+        <ListPageHeader rid="offers.create.tak" add-label="افزودن تخفیف تک" @add="openAdd('tak')" />
+      </div>
+
       <XTable ref="tbl" :model="model">
         <template #sts="{ record }">
           <a-tag v-if="record.status === 1" color="green">فعال</a-tag>
@@ -24,7 +29,7 @@
 
         <template #op="{ record }">
           <a-tooltip v-if="canEdit(record)" title="ویرایش">
-            <EditOutlined class="cursor-pointer mx-1 text-primary" @click="toEdit(record)" />
+            <EditOutlined class="cursor-pointer mx-1 text-primary" @click="openEdit(record)" />
           </a-tooltip>
 
           <a-tooltip v-if="canRemove(record)" title="حذف">
@@ -40,28 +45,57 @@
           </a-tooltip>
         </template>
       </XTable>
+
+      <PromotionAddEdit
+        v-if="editingVariant === 'omde'"
+        :key="editingId ?? 'new'"
+        :open="modalOpen"
+        :id="editingId"
+        @update:open="modalOpen = $event"
+        @success="tbl?.fetch()"
+      />
+      <PromotionTakAddEdit
+        v-else-if="editingVariant === 'tak'"
+        :key="editingId ?? 'new'"
+        :open="modalOpen"
+        :id="editingId"
+        @update:open="modalOpen = $event"
+        @success="tbl?.fetch()"
+      />
     </a-card>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
 import XTable from '../../components/x-table/XTable.vue';
+import ListPageHeader from '../../components/common/ListPageHeader.vue';
+import PromotionAddEdit from './promotion_add_edit.vue';
+import PromotionTakAddEdit from './promotion_tak_add_edit.vue';
 import { buildPromotionListModel } from './promotionListModel';
 import { useUsersStore } from '../../stores/users';
 import { jdate } from '../../utils/filters';
 import api from '../../api/client';
 
-const router = useRouter();
 const users = useUsersStore();
 const hasPermission = (rid: string) => Boolean(users.hasPermission(rid));
 
 const model = buildPromotionListModel();
 const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
 
+const modalOpen = ref(false);
+const editingId = ref<string | undefined>(undefined);
+/** 'omde' -> PromotionAddEdit (type_customer 2), 'tak' -> PromotionTakAddEdit (type_customer 1) */
+const editingVariant = ref<'omde' | 'tak' | undefined>(undefined);
+
+function openAdd(variant: 'omde' | 'tak') {
+  editingVariant.value = variant;
+  editingId.value = undefined;
+  modalOpen.value = true;
+}
+
 /** legacy: tak rows need the .tak.* rid, omde rows the plain one */
 function canEdit(record: Record<string, any>) {
   return (
@@ -82,12 +116,10 @@ function canRemove(record: Record<string, any>) {
  * to a different path per type_customer. Ported as an in-app navigation — a new
  * tab would lose the SPA session state the panel relies on.
  */
-function toEdit(record: Record<string, any>) {
-  if (record.type_customer === 2) {
-    router.push(`/major/promotion/edit/${record.id}`);
-  } else if (record.type_customer === 1) {
-    router.push(`/major/promotion/tak/edit/${record.id}`);
-  }
+function openEdit(record: Record<string, any>) {
+  editingVariant.value = record.type_customer === 1 ? 'tak' : 'omde';
+  editingId.value = record.id;
+  modalOpen.value = true;
 }
 
 async function deletePromotion(record: Record<string, any>) {
@@ -101,3 +133,16 @@ async function deletePromotion(record: Record<string, any>) {
 }
 </script>
 
+<style scoped>
+.list-page-header-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+/* ListPageHeader's own margin-bottom would double up when two sit side by side */
+.list-page-header-row :deep(.list-page-header) {
+  margin-bottom: 0;
+}
+</style>
+

apps/admin-panel/src/views/promotion/promotion_tak_add_edit.vue

@@ -2,11 +2,24 @@
   <!--
     Ported from legacy henza_admin/src/views/promotion/promotion_tak_add_edit.vue.
     Legacy has the "مشتری" scope option and its whole customer block COMMENTED
-    OUT in this variant — preserved as absent, not re-enabled.
+    OUT in this variant — preserved as absent, not re-enabled. Props/emits pass
+    through unchanged so this wrapper works both as the
+    /major/promotion/tak/add(/edit/:id) route and as a modal opened from
+    promotion_list.vue.
   -->
-  <PromotionForm title="تعریف تخفیف تک" :allow-customer-scope="false" />
+  <PromotionForm
+    title="تعریف تخفیف تک"
+    :allow-customer-scope="false"
+    :open="open"
+    :id="id"
+    @update:open="$emit('update:open', $event)"
+    @success="$emit('success')"
+  />
 </template>
 
 <script setup lang="ts">
 import PromotionForm from './PromotionForm.vue';
+
+defineProps<{ open?: boolean; id?: string }>();
+defineEmits<{ (e: 'update:open', value: boolean): void; (e: 'success'): void }>();
 </script>