diff --git a/apps/admin-panel/src/views/finical/addFinDoc.vue b/apps/admin-panel/src/views/finical/addFinDoc.vue
index 95d850a..e5857d6 100644
--- a/apps/admin-panel/src/views/finical/addFinDoc.vue
+++ b/apps/admin-panel/src/views/finical/addFinDoc.vue
@@ -2,6 +2,10 @@
   <!--
     Ported from legacy henza_admin/src/views/finical/addFinDoc.vue — filing a
     financial document (a customer repayment). Serves both create and edit.
+    Converted to a modal (BaseFormModal): the /add/findoc and
+    /edit/findoc/:id routes still exist and still render this component
+    directly as a route-based fallback, but finical/list.vue now opens it as
+    a modal via open/id props.
 
     The form's defining behaviour, preserved: which fields appear depends on the
     document type.
@@ -10,7 +14,112 @@
       3 چک     -> cheque amount, account holder, bank
       4 پولی   -> Rial amount + quoted price per gram, with a live conversion
   -->
-  <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="نوع سند">
+        <a-select v-model:value="form.type">
+          <a-select-option :value="2">حواله</a-select-option>
+          <a-select-option :value="1">آب شده</a-select-option>
+          <a-select-option :value="4">پولی</a-select-option>
+          <a-select-option :value="3">چک</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        label="مشتری"
+        :validate-status="err.customer_id ? 'error' : ''"
+        :help="err.customer_id"
+      >
+        <a-select
+          v-model:value="form.customer_id"
+          show-search
+          option-filter-prop="children"
+          :filter-option="filterOption"
+          placeholder="انتخاب کنید"
+        >
+          <a-select-option v-for="c in customers" :key="c.id" :value="c.id">
+            {{ `${c.name} - ${c.mobile}` }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+
+    <!-- 1 آب شده -->
+    <div v-if="form.type == 1" class="grid-3">
+      <a-form-item label="وزن (گرم)">
+        <a-input-number v-model:value="form.original_value" class="w-full" :step="0.001" />
+      </a-form-item>
+      <a-form-item label="عیار">
+        <a-input-number v-model:value="form.ayar" class="w-full" />
+      </a-form-item>
+      <a-form-item label="نام آزمایشگاه">
+        <a-input v-model:value="form.lab" />
+      </a-form-item>
+      <a-form-item label="انگ">
+        <a-input v-model:value="form.ang" />
+      </a-form-item>
+      <a-form-item label="وزن نهایی اعمال شده">
+        <a-input :value="meltedFinalWeight" disabled />
+      </a-form-item>
+    </div>
+
+    <!-- 2 حواله -->
+    <div v-if="form.type == 2" class="grid-3">
+      <a-form-item label="وزن (گرم)">
+        <a-input-number v-model:value="form.value" class="w-full" :step="0.001" />
+      </a-form-item>
+      <a-form-item label="حواله به">
+        <a-input v-model:value="form.to" />
+      </a-form-item>
+    </div>
+
+    <!-- 3 چک -->
+    <div v-if="form.type == 3" class="grid-3">
+      <a-form-item label="مبلغ چک">
+        <a-input-number v-model:value="form.price" class="w-full" />
+      </a-form-item>
+      <a-form-item label="وزن (گرم)">
+        <a-input-number v-model:value="form.value" class="w-full" :step="0.001" />
+      </a-form-item>
+      <a-form-item label="نام صاحب حساب">
+        <a-input v-model:value="form.account_name" />
+      </a-form-item>
+      <a-form-item label="نام بانک">
+        <a-input v-model:value="form.bank_name" />
+      </a-form-item>
+    </div>
+
+    <!-- 4 پولی -->
+    <div v-if="form.type == 4" class="grid-3">
+      <a-form-item label="میزان پول">
+        <a-input-number v-model:value="form.price" class="w-full" />
+      </a-form-item>
+      <a-form-item label="مظنه">
+        <a-input-number v-model:value="form.price_per_gram" class="w-full" />
+      </a-form-item>
+      <a-form-item v-if="form.price_per_gram" label="وزن نهایی اعمال شده">
+        <a-input :value="cashFinalWeight" disabled />
+      </a-form-item>
+    </div>
+
+    <a-form-item label="توضیحات">
+      <a-textarea v-model:value="form.note" :auto-size="{ minRows: 3, maxRows: 5 }" />
+    </a-form-item>
+  </BaseFormModal>
+
+  <!-- route-based fallback for direct links to /add/findoc and /edit/findoc/:id -->
+  <a-spin v-else :spinning="loading">
     <a-form layout="vertical" @submit.prevent="handleSubmit">
       <a-card title="ثبت سند مالی" class="mb-base">
         <div class="grid-3">
@@ -114,12 +223,24 @@
 import { computed, 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 customers = ref<{ id: string; name: string; mobile: string }[]>([]);
 
@@ -186,7 +307,12 @@ async function handleSubmit() {
       await api.post('cash', form);
     }
     message.info('اطلاعات با موفقیت به ثبت رسید.');
-    router.push('/finical/list');
+    if (asModal) {
+      emit('success');
+      emit('update:open', false);
+    } else {
+      router.push('/finical/list');
+    }
   } catch (e: any) {
     message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
   } finally {
diff --git a/apps/admin-panel/src/views/finical/list.vue b/apps/admin-panel/src/views/finical/list.vue
index 716dffb..3288b89 100644
--- a/apps/admin-panel/src/views/finical/list.vue
+++ b/apps/admin-panel/src/views/finical/list.vue
@@ -8,6 +8,8 @@
   <div id="page-user-list">
     <a-spin :spinning="loading">
       <a-card title="لیست اسناد مالی">
+        <ListPageHeader rid="document.create" add-label="ثبت سند مالی" @add="openAdd" />
+
         <XTable ref="tbl" :model="model">
           <template #confirmed="{ text }">
             <a-tag v-if="text === 1" color="green">تایید شده</a-tag>
@@ -40,7 +42,7 @@
             </a-tooltip>
 
             <a-tooltip v-if="hasPermission('document.list.edit')" 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 v-if="hasPermission('document.list.remove')" title="حذف">
@@ -56,6 +58,8 @@
             </a-tooltip>
           </template>
         </XTable>
+
+        <AddFinDoc :key="editingId ?? 'new'" :open="modalOpen" :id="editingId" @update:open="modalOpen = $event" @success="tbl?.fetch()" />
       </a-card>
     </a-spin>
   </div>
@@ -63,7 +67,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 import {
   CheckOutlined,
@@ -72,12 +75,13 @@ import {
   EditOutlined,
 } from '@ant-design/icons-vue';
 import XTable from '../../components/x-table/XTable.vue';
+import ListPageHeader from '../../components/common/ListPageHeader.vue';
+import AddFinDoc from './addFinDoc.vue';
 import { buildDocumentListModel } from './list_model';
 import { useUsersStore } from '../../stores/users';
 import { useDeleteHandler } from '../../composables/useDeleteHandler';
 import api from '../../api/client';
 
-const router = useRouter();
 const users = useUsersStore();
 const hasPermission = (rid: string) => Boolean(users.hasPermission(rid));
 
@@ -85,6 +89,19 @@ const model = buildDocumentListModel();
 const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
 const loading = ref(false);
 
+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;
+}
+
 /** legacy changeConfirme(): one toggle endpoint for both confirm and deny */
 async function changeConfirme(record: Record<string, any>) {
   try {
@@ -111,11 +128,5 @@ const { remove: deleteCashById } = useDeleteHandler({
 function deleteCash(record: Record<string, any>) {
   return deleteCashById(`cash/${record.id}`);
 }
-
-function toEdit(id: string) {
-  // legacy list.vue:137 opened /admin/edit/findoc/{id}; the route is
-  // /edit/findoc/:id, not /finical/edit/:id.
-  router.push(`/edit/findoc/${id}`);
-}
 </script>