diff --git a/apps/admin-panel/src/views/invoice/AddInvoice.vue b/apps/admin-panel/src/views/invoice/AddInvoice.vue
index f6001ac..390680b 100644
--- a/apps/admin-panel/src/views/invoice/AddInvoice.vue
+++ b/apps/admin-panel/src/views/invoice/AddInvoice.vue
@@ -2,12 +2,91 @@
   <!--
     Ported from legacy henza_admin/src/views/invoice/AddInvoice.vue — the branch
     allocation ("فاکتور انتقال") form. Serves BOTH create and edit; EditInvoice
-    is a wrapper over it.
+    is a wrapper over it. Converted to a modal (BaseFormModal): the /invoice/add
+    and /invoice/edit/:id routes still exist and still render this component
+    directly as a route-based fallback, but ListInvoice.vue now opens it as a
+    modal via open/id props.
 
     Pick products from the grid, choose the receiving branch, submit. Legacy
-    posts `{ branch_id, products: [productId...] }`.
+    posts `{ branch_id, products: [productId...] }`. Kept at the widest modal
+    size (xl) since it embeds its own product-picker grid and a running cart
+    table.
   -->
-  <a-spin :spinning="loading">
+  <BaseFormModal
+    v-if="asModal"
+    :open="Boolean(open)"
+    :id="id"
+    add-title="افزودن فاکتور"
+    edit-title="ویرایش فاکتور"
+    :loading="loading"
+    :submitting="loading"
+    width="xl"
+    ok-text="ثبت تغییرات"
+    @update:open="$emit('update:open', $event)"
+    @submit="handleSubmit"
+  >
+    <a-card title="لیست محصولات">
+      <XTable ref="tblProducts" :model="productCols">
+        <template #image="{ record }">
+          <img
+            width="90px"
+            height="90px"
+            style="object-fit: scale-down"
+            :src="record.thumb && record.thumb.full ? record.thumb.full : noImage"
+          />
+        </template>
+
+        <template #op="{ record }">
+          <a-button size="small" type="primary" @click="addToCart(record)">افزودن</a-button>
+        </template>
+      </XTable>
+    </a-card>
+
+    <a-card v-if="items.length > 0" title="ثبت سفارش" class="mt-5">
+      <a-table :columns="columns" :data-source="items" bordered :pagination="false" row-key="pid">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'delete'">
+            <CloseOutlined class="cursor-pointer" @click="cart.remove(record)" />
+          </template>
+          <template v-else-if="column.dataIndex === 'product'">
+            <div class="flex items-center">
+              <img :src="getImage(record.product)" width="50px" />
+              {{ record.product.title }}
+            </div>
+          </template>
+          <template v-else-if="column.dataIndex === 'weight'">
+            {{ record.product.min_gram ?? '-' }}
+          </template>
+        </template>
+      </a-table>
+
+      <div class="grid-3 mt-4">
+        <a-form-item
+          label="نام شعبه"
+          :validate-status="err.branch_id ? 'error' : ''"
+          :help="err.branch_id"
+        >
+          <a-select
+            v-model:value="form.branch_id"
+            show-search
+            placeholder="انتخاب کنید"
+            :filter-option="filterOption"
+          >
+            <a-select-option v-for="b in branches" :key="b.id" :value="b.id">
+              {{ b.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item label="توضیحات">
+          <a-input v-model:value="form.note" />
+        </a-form-item>
+      </div>
+    </a-card>
+  </BaseFormModal>
+
+  <!-- route-based fallback for direct links to /invoice/add and /invoice/edit/:id -->
+  <a-spin v-else :spinning="loading">
     <a-card title="لیست محصولات">
       <XTable ref="tblProducts" :model="productCols">
         <template #image="{ record }">
@@ -86,16 +165,28 @@ import { computed, onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 import { CloseOutlined } from '@ant-design/icons-vue';
+import BaseFormModal from '../../components/common/BaseFormModal.vue';
 import XTable from '../../components/x-table/XTable.vue';
 import { buildInvoiceProductModel } from './AddInvoice';
 import { useInvoiceCartStore } from '../../stores/invoiceCart';
 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 cart = useInvoiceCartStore();
 
-const id = route.params.id as string | undefined;
+const id = asModal ? props.id : (route.params.id as string | undefined);
 const noImage = '/img/no-items.png';
 const loading = ref(false);
 const productCols = buildInvoiceProductModel();
@@ -143,7 +234,12 @@ async function handleSubmit() {
     }
     message.info('عملیات با موفقیت انجام شد');
     cart.clear();
-    router.push('/invoice/list');
+    if (asModal) {
+      emit('success');
+      emit('update:open', false);
+    } else {
+      router.push('/invoice/list');
+    }
   } catch (e: any) {
     message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
   } finally {
diff --git a/apps/admin-panel/src/views/invoice/ListInvoice.vue b/apps/admin-panel/src/views/invoice/ListInvoice.vue
index 56277b9..e4c21bf 100644
--- a/apps/admin-panel/src/views/invoice/ListInvoice.vue
+++ b/apps/admin-panel/src/views/invoice/ListInvoice.vue
@@ -5,6 +5,8 @@
   -->
   <div id="page-user-list">
     <a-card title="لیست فاکتورها">
+      <ListPageHeader rid="invoice.create" add-label="افزودن فاکتور" @add="openAdd" />
+
       <XTable ref="tbl" :model="model">
         <template #user="{ record }">
           {{ record.allocator_user?.name ?? '-' }}
@@ -17,7 +19,7 @@
             </a-tooltip>
 
             <a-tooltip title="ویرایش">
-              <EditOutlined class="cursor-pointer mx-1 text-primary" @click="toEdit(record.id)" />
+              <EditOutlined class="cursor-pointer mx-1 text-primary" @click="openEdit(record.id)" />
             </a-tooltip>
 
             <a-tooltip title="حذف">
@@ -25,7 +27,7 @@
                 placement="top"
                 ok-text="بله"
                 cancel-text="خیر"
-                @confirm="confirmDelete(record.id)"
+                @confirm="confirmDelete(`branch/product/${record.id}`)"
               >
                 <template #title><p>آیا مطمئن به حذف فاکتور مورد نظر هستید ؟</p></template>
                 <DeleteOutlined class="cursor-pointer mx-1 text-danger" />
@@ -63,26 +65,42 @@
           <a-button @click="visible = false">بستن</a-button>
         </template>
       </a-modal>
+
+      <AddInvoice :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, EyeOutlined } from '@ant-design/icons-vue';
 import XTable from '../../components/x-table/XTable.vue';
+import ListPageHeader from '../../components/common/ListPageHeader.vue';
+import AddInvoice from './AddInvoice.vue';
 import { buildInvoiceListModel } from './ListInvoice';
 import { jdate } from '../../utils/filters';
+import { useDeleteHandler } from '../../composables/useDeleteHandler';
 import api from '../../api/client';
 
-const router = useRouter();
 const model = buildInvoiceListModel();
 const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
 const visible = ref(false);
 const tempRow = ref<Record<string, any> | undefined>(undefined);
 
+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;
+}
+
 const productColumns = [
   { title: 'کد محصول', dataIndex: 'product_code' },
   { title: 'نام محصول', dataIndex: 'title' },
@@ -95,19 +113,11 @@ async function view(record: Record<string, any>) {
   visible.value = true;
 }
 
-function toEdit(id: string) {
-  router.push(`/invoice/edit/${id}`);
-}
-
-async function confirmDelete(id: string) {
-  try {
-    await api.delete(`branch/product/${id}`);
-    message.success('فاکتور حذف شد');
-    tbl.value?.fetch();
-  } catch (e: any) {
-    message.error(e?.response?.data?.message ?? 'خطا در حذف فاکتور');
-  }
-}
+const { remove: confirmDelete } = useDeleteHandler({
+  onSuccess: () => tbl.value?.fetch(),
+  successMessage: 'فاکتور حذف شد',
+  fallbackErrorMessage: 'خطا در حذف فاکتور',
+});
 </script>
 
 <style scoped>