admin-panel: convert branch and workshop add/edit forms into modals

Both share FacilityList.vue, which now accepts an addRid/addLabel pair and a
#form slot: when addRid is supplied, edit opens the slot's modal instead of
navigating, and a ListPageHeader add button appears above the list. Branch
and workshop each plug their own AddBranches/AddWorkshop instance into that
slot, keyed by editingId so switching rows remounts the form (fresh
onMounted load) rather than needing new watch-based reactivity.

The /branch/add, /branch/edit/:id, /workshop/add, /workshop/edit/:id routes
are unchanged and still work as a route-based fallback.

Verified: pnpm build passes.

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

apps/admin-panel/src/views/branch/AddBranches.vue

@@ -2,11 +2,55 @@
   <!--
     Ported from legacy henza_admin/src/views/branch/AddBranches.vue.
     Serves BOTH create and edit — EditBranches.vue is a wrapper over it.
+    Converted to a modal (BaseFormModal): the /branch/add and /branch/edit/:id
+    routes still exist and still render this component directly as a route-based
+    fallback, but ListBranches.vue now opens it as a modal via open/id props.
 
     A branch's manager is an EXISTING admin picked from user/list. (The workshop
     form differs: it creates its supervisor inline — see AddWorkshop.vue.)
   -->
-  <a-spin :spinning="loading">
+  <BaseFormModal
+    v-if="asModal"
+    :open="Boolean(open)"
+    :id="id"
+    add-title="افزودن شعبه"
+    edit-title="ویرایش شعبه"
+    :loading="loading"
+    :submitting="loading"
+    @update:open="$emit('update:open', $event)"
+    @submit="handleSubmit"
+  >
+    <div class="grid-2">
+      <a-form-item label="نام شعبه" :validate-status="err.name ? 'error' : ''" :help="err.name">
+        <a-input v-model:value="form.name" />
+      </a-form-item>
+
+      <a-form-item label="تلفن شعبه">
+        <a-input v-model:value="form.phone" />
+      </a-form-item>
+
+      <a-form-item label="مدیر">
+        <a-select
+          v-model:value="form.user_id"
+          show-search
+          allow-clear
+          placeholder="انتخاب کنید"
+          :filter-option="filterOption"
+        >
+          <a-select-option v-for="u in adminUsers" :key="u.id" :value="u.id">
+            {{ u.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+
+    <a-form-item label="آدرس">
+      <a-textarea v-model:value="form.address" :auto-size="{ minRows: 2, maxRows: 5 }" />
+    </a-form-item>
+  </BaseFormModal>
+
+  <!-- route-based fallback for direct links to /branch/add and /branch/edit/:id -->
+  <a-spin v-else :spinning="loading">
     <a-form layout="vertical" @submit.prevent="handleSubmit">
       <a-card :title="id ? 'ویرایش شعبه' : 'افزودن شعبه'" class="mb-base">
         <div class="grid-2">
@@ -47,12 +91,27 @@
 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 = defineProps<{
+  /** Present -> rendered as a modal by the parent list page. */
+  open?: boolean;
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+  (e: 'success'): void;
+}>();
+
+// Fixed at mount: the parent decides once whether this instance is a modal
+// or the plain /branch/add or /branch/edit/:id route.
+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 adminUsers = ref<{ id: string; name: string }[]>([]);
 
@@ -82,7 +141,12 @@ async function handleSubmit() {
       await api.post('branch', form);
     }
     message.info('اطلاعات با موفقیت به ثبت رسید.');
-    router.push('/branch/list');
+    if (asModal) {
+      emit('success');
+      emit('update:open', false);
+    } else {
+      router.push('/branch/list');
+    }
   } catch (e: any) {
     message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
   } finally {

apps/admin-panel/src/views/branch/FacilityList.vue

@@ -10,12 +10,21 @@
       - legacy binds `slot-scope="text,record"` then reads `text.record.id`,
         i.e. the row arrives as the FIRST argument; the Vue 3 slot gives us
         `record` directly, which is the same row.
+
+    The add/edit modal itself is passed in via the default slot (branch and
+    workshop use different forms), so this component stays generic instead of
+    growing a v-if per caller.
   -->
   <a-card :title="title">
+    <ListPageHeader v-if="addRid" :rid="addRid" :add-label="addLabel" @add="openAdd()" />
+
     <XTable ref="tbl" :model="model">
       <template #actions="{ record }">
         <div class="flex gap-2">
-          <a-tooltip title="ویرایش">
+          <a-tooltip v-if="addRid" title="ویرایش">
+            <EditOutlined class="cursor-pointer mx-1 text-primary" @click="openEdit(record.id)" />
+          </a-tooltip>
+          <a-tooltip v-else title="ویرایش">
             <EditOutlined class="cursor-pointer mx-1 text-primary" @click="toEdit(record.id)" />
           </a-tooltip>
 
@@ -30,6 +39,8 @@
         </div>
       </template>
     </XTable>
+
+    <slot name="form" :open="modalOpen" :editing-id="editingId" :on-update-open="onUpdateOpen" :on-success="onSuccess" />
   </a-card>
 </template>
 
@@ -39,21 +50,48 @@ import { useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons-vue';
 import XTable from '../../components/x-table/XTable.vue';
+import ListPageHeader from '../../components/common/ListPageHeader.vue';
 import api from '../../api/client';
 import type { XTbl } from '../../components/x-table/model';
 
 const props = defineProps<{
   title: string;
   model: XTbl;
-  /** Where the edit pencil navigates, e.g. '/branch/edit' or '/workshop/edit'. */
+  /** Where the edit pencil navigates when no modal form is supplied, e.g.
+   *  '/branch/edit' or '/workshop/edit'. */
   editPath: string;
   /** The toggle endpoint, e.g. 'branch/active' or 'workshop/active'. */
   activePath: string;
+  /** When set, edit/add open the #form slot's modal instead of navigating,
+   *  gated on this rid (the same one the /add route used). */
+  addRid?: string;
+  addLabel?: string;
 }>();
 
 const router = useRouter();
 const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
 
+const modalOpen = ref(false);
+const editingId = ref<string | undefined>(undefined);
+
+function openAdd() {
+  editingId.value = undefined;
+  modalOpen.value = true;
+}
+
+function openEdit(id: string) {
+  editingId.value = id;
+  modalOpen.value = true;
+}
+
+function onUpdateOpen(value: boolean) {
+  modalOpen.value = value;
+}
+
+function onSuccess() {
+  tbl.value?.fetch();
+}
+
 function toEdit(id: string) {
   router.push(`${props.editPath}/${id}`);
 }
@@ -69,4 +107,3 @@ async function setOffer(id: string) {
   }
 }
 </script>
-

apps/admin-panel/src/views/branch/ListBranches.vue

@@ -6,11 +6,18 @@
     :model="model"
     edit-path="/branch/edit"
     active-path="branch/active"
-  />
+    add-rid="branch.create"
+    add-label="افزودن شعبه"
+  >
+    <template #form="{ open, editingId, onUpdateOpen, onSuccess }">
+      <AddBranches :key="editingId ?? 'new'" :open="open" :id="editingId" @update:open="onUpdateOpen" @success="onSuccess" />
+    </template>
+  </FacilityList>
 </template>
 
 <script setup lang="ts">
 import FacilityList from './FacilityList.vue';
+import AddBranches from './AddBranches.vue';
 import { buildBranchListModel } from './ListBranch';
 
 const model = buildBranchListModel();

apps/admin-panel/src/views/workshop/AddWorkshop.vue

@@ -2,12 +2,64 @@
   <!--
     Ported from legacy henza_admin/src/views/workshop/AddWorkshop.vue.
     Serves BOTH create and edit — EditWorkshop.vue is a wrapper over it.
+    Converted to a modal (BaseFormModal): the /workshop/add and
+    /workshop/edit/:id routes still exist and still render this component
+    directly as a route-based fallback, but ListWorkshop.vue now opens it as a
+    modal via open/id props.
 
     Unlike the branch form, this one CREATES its supervisor inline from three
     fields (نام / نام خانوادگی / موبایل) rather than picking an existing admin.
     The supervisor is saved as an AdminUser with role WORKSHOP_SUPERVISOR.
   -->
-  <a-spin :spinning="loading">
+  <BaseFormModal
+    v-if="asModal"
+    :open="Boolean(open)"
+    :id="id"
+    add-title="افزودن کارگاه"
+    edit-title="ویرایش کارگاه"
+    :loading="loading"
+    :submitting="loading"
+    width="lg"
+    @update:open="$emit('update:open', $event)"
+    @submit="handleSubmit"
+  >
+    <div class="grid-3">
+      <a-form-item
+        label="نام کارگاه"
+        :validate-status="err.workshop_name ? 'error' : ''"
+        :help="err.workshop_name"
+      >
+        <a-input v-model:value="form.workshop_name" />
+      </a-form-item>
+
+      <a-form-item label="تلفن کارگاه">
+        <a-input v-model:value="form.workshop_phone" />
+      </a-form-item>
+
+      <a-form-item label="نام سرپرست کارگاه">
+        <a-input v-model:value="form.user_fname" />
+      </a-form-item>
+
+      <a-form-item label="نام خانوادگی سرپرست کارگاه">
+        <a-input v-model:value="form.user_lname" />
+      </a-form-item>
+
+      <a-form-item
+        label="موبایل سرپرست کارگاه"
+        :validate-status="err.user_phone ? 'error' : ''"
+        :help="err.user_phone"
+      >
+        <a-input v-model:value="form.user_phone" />
+      </a-form-item>
+    </div>
+
+    <a-form-item label="آدرس">
+      <a-textarea v-model:value="form.workshop_address" :auto-size="{ minRows: 2, maxRows: 5 }" />
+    </a-form-item>
+  </BaseFormModal>
+
+  <!-- route-based fallback for direct links to /workshop/add and /workshop/edit/:id -->
+  <a-spin v-else :spinning="loading">
     <a-form layout="vertical" @submit.prevent="handleSubmit">
       <a-card :title="id ? 'ویرایش کارگاه' : 'افزودن کارگاه'" class="mb-base">
         <div class="grid-3">
@@ -54,12 +106,24 @@
 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 = defineProps<{
+  open?: boolean;
+  id?: string;
+}>();
+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 form = reactive<Record<string, any>>({
@@ -89,7 +153,12 @@ async function handleSubmit() {
       await api.post('workshop', form);
     }
     message.info('اطلاعات با موفقیت به ثبت رسید.');
-    router.push('/workshop/list');
+    if (asModal) {
+      emit('success');
+      emit('update:open', false);
+    } else {
+      router.push('/workshop/list');
+    }
   } catch (e: any) {
     message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
   } finally {

apps/admin-panel/src/views/workshop/ListWorkshop.vue

@@ -6,11 +6,18 @@
     :model="model"
     edit-path="/workshop/edit"
     active-path="workshop/active"
-  />
+    add-rid="workshop.create"
+    add-label="افزودن کارگاه"
+  >
+    <template #form="{ open, editingId, onUpdateOpen, onSuccess }">
+      <AddWorkshop :key="editingId ?? 'new'" :open="open" :id="editingId" @update:open="onUpdateOpen" @success="onSuccess" />
+    </template>
+  </FacilityList>
 </template>
 
 <script setup lang="ts">
 import FacilityList from '../branch/FacilityList.vue';
+import AddWorkshop from './AddWorkshop.vue';
 import { buildWorkshopListModel } from './ListWorkshop';
 
 const model = buildWorkshopListModel();