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/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>
-