feat: port payment management tab from tauri to admin dashboard

Add per-clinic payment methods (bank accounts + POS/card-reader devices)
under the "مدیریت پرداخت" settings tab at /admin/my-financial, ported from
clinic-pro-tauri's mock-only PaymentManagement tab into a real persisted
feature. These records are referenceable (by uuid) from patient invoices to
record which method a service payment was made with.

Backend (new src/PaymentMethod domain):
- BankAccount + Pos entities, repositories, PaymentMethodService (validation,
  ownership scoping, create/update/toggle logic).
- Thin PaymentMethodController exposing /api/v1/my/payment-methods/{bank-accounts,pos}
  (GET/POST/PUT + PATCH .../status), guarded to clinic/doctor/secretary/admin.
- Migration for bank_accounts + pos_devices tables.
- Functional tests (success + validation/404/403 + empty boundaries).
- docs/api/payment-method.md.

Frontend:
- Replace MyFinancialPage content with the payment-management UI (two tabs,
  tables, add/edit modals, status toggle) using the admin design system.
- usePaymentMethods hook (TanStack Query) + presentational components.
- Update page test to cover tabs, data, empty state and the add modal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/admin/components/paymentMethods/BankAccountFormModal.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import Modal from '../ui/Modal';
+import SearchableSelect from '../ui/SearchableSelect';
+import { BANK_OPTIONS } from './banks';
+import {
+  useCreateBankAccount,
+  useUpdateBankAccount,
+  type BankAccount,
+} from '../../hooks/usePaymentMethods';
+
+/**
+ * فرم افزودن/ویرایش حساب بانکی — پورت مبدأ ModalAddBankAccount.jsx.
+ * اگر `account` داده شود حالت ویرایش، وگرنه افزودن.
+ */
+export default function BankAccountFormModal({
+  open,
+  account,
+  onClose,
+}: {
+  open: boolean;
+  account: BankAccount | null;
+  onClose: () => void;
+}) {
+  const isEdit = !!account;
+  const [bankName, setBankName] = useState('');
+  const [cardNumber, setCardNumber] = useState('');
+  const [accountNumber, setAccountNumber] = useState('');
+  const [shabaNumber, setShabaNumber] = useState('');
+
+  const createMut = useCreateBankAccount();
+  const updateMut = useUpdateBankAccount();
+  const pending = createMut.isPending || updateMut.isPending;
+
+  useEffect(() => {
+    if (!open) return;
+    setBankName(account?.bank_name ?? '');
+    setCardNumber(account?.card_number ?? '');
+    setAccountNumber(account?.account_number ?? '');
+    setShabaNumber(account?.shaba_number ?? '');
+  }, [open, account]);
+
+  const submit = () => {
+    if (!bankName.trim()) { toast.error('نام بانک الزامی است'); return; }
+    if (!accountNumber.trim()) { toast.error('شماره حساب الزامی است'); return; }
+
+    const body = {
+      bank_name: bankName.trim(),
+      account_number: accountNumber.trim(),
+      card_number: cardNumber.trim(),
+      shaba_number: shabaNumber.trim(),
+    };
+
+    const onSuccess = () => {
+      toast.success(isEdit ? 'حساب بانکی ویرایش شد' : 'حساب بانکی اضافه شد');
+      onClose();
+    };
+    const onError = (e: unknown) => toast.error(e instanceof Error ? e.message : 'خطا در ذخیره');
+
+    if (isEdit && account) {
+      updateMut.mutate({ uuid: account.uuid, body }, { onSuccess, onError });
+    } else {
+      createMut.mutate(body, { onSuccess, onError });
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={isEdit ? 'ویرایش حساب بانکی' : 'افزودن حساب بانکی'}
+      size="sm"
+      footer={
+        <button className="btn primary" style={{ width: '100%' }} disabled={pending} onClick={submit}>
+          {pending ? '...' : isEdit ? 'ذخیره تغییرات' : 'اضافه کردن حساب بانکی'}
+        </button>
+      }
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div>
+          <label className="field-label">نام بانک</label>
+          <SearchableSelect
+            options={BANK_OPTIONS}
+            value={bankName || null}
+            onChange={(v) => setBankName(v != null ? String(v) : '')}
+            placeholder="انتخاب بانک"
+          />
+        </div>
+        <div>
+          <label className="field-label">شماره کارت</label>
+          <input className="input" value={cardNumber} onChange={(e) => setCardNumber(e.target.value)} placeholder="شماره کارت" />
+        </div>
+        <div>
+          <label className="field-label">شماره حساب</label>
+          <input className="input" value={accountNumber} onChange={(e) => setAccountNumber(e.target.value)} placeholder="شماره حساب" />
+        </div>
+        <div>
+          <label className="field-label">شبا</label>
+          <input className="input" value={shabaNumber} onChange={(e) => setShabaNumber(e.target.value)} placeholder="شبا" />
+        </div>
+      </div>
+    </Modal>
+  );
+}

assets/admin/components/paymentMethods/BankAccountTable.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { PencilIcon } from '@heroicons/react/24/outline';
+import DataTable, { type Column } from '../ui/DataTable';
+import StatusToggle from './StatusToggle';
+import type { BankAccount } from '../../hooks/usePaymentMethods';
+
+/**
+ * جدول حساب‌های بانکی — پورت مبدأ BankAccountList.jsx.
+ * ستون «شماره ترمینال» مبدأ به «شماره کارت» تغییر کرد (حساب بانکی ترمینال ندارد؛
+ * فرم افزودن شماره کارت می‌گیرد).
+ */
+export default function BankAccountTable({
+  data,
+  loading,
+  togglingUuid,
+  onToggle,
+  onEdit,
+  onAdd,
+}: {
+  data: BankAccount[];
+  loading?: boolean;
+  togglingUuid: string | null;
+  onToggle: (uuid: string) => void;
+  onEdit: (account: BankAccount) => void;
+  onAdd: () => void;
+}) {
+  const columns: Column<BankAccount>[] = [
+    { key: 'bank_name', header: 'نام بانک' },
+    { key: 'card_number', header: 'شماره کارت', render: (r) => r.card_number || '—' },
+    { key: 'account_number', header: 'شماره حساب', render: (r) => r.account_number || '—' },
+    {
+      key: 'is_active',
+      header: 'وضعیت',
+      render: (r) => (
+        <StatusToggle
+          active={r.is_active}
+          disabled={togglingUuid === r.uuid}
+          onToggle={() => onToggle(r.uuid)}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <p style={{ fontSize: 13.5, color: 'var(--text-2)', margin: '0 0 14px' }}>
+        مدیریت و اضافه کردن حساب های بانکی کلینیک
+      </p>
+      <DataTable<BankAccount>
+        columns={columns}
+        data={data}
+        loading={loading}
+        emptyMessage="هنوز حساب بانکی ثبت نشده است"
+        emptyAction={<button className="btn primary sm" onClick={onAdd}>افزودن حساب بانکی</button>}
+        actions={(r) => (
+          <button
+            className="btn sm ghost"
+            style={{ color: 'var(--accent)' }}
+            onClick={() => onEdit(r)}
+          >
+            <PencilIcon style={{ width: 14 }} />
+            ویرایش
+          </button>
+        )}
+      />
+    </>
+  );
+}

assets/admin/components/paymentMethods/PaymentMethodHead.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+export type PaymentTab = 'bank' | 'pos';
+
+/**
+ * سربرگ صفحهٔ مدیریت پرداخت — پورت مبدأ PaymentManagement/Head.jsx.
+ * تیتر + سوییچ تب (حساب بانکی / کارت خوان) + دکمهٔ افزودن.
+ */
+export default function PaymentMethodHead({
+  activeTab,
+  onTabChange,
+  onAdd,
+}: {
+  activeTab: PaymentTab;
+  onTabChange: (tab: PaymentTab) => void;
+  onAdd: () => void;
+}) {
+  return (
+    <div style={{ marginBottom: 20 }}>
+      <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', margin: '0 0 16px' }}>
+        مدیریت پرداخت‌ها
+      </h2>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+        <div className="seg" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'bank'}
+            className={activeTab === 'bank' ? 'on' : ''}
+            onClick={() => onTabChange('bank')}
+          >
+            حساب بانکی
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'pos'}
+            className={activeTab === 'pos' ? 'on' : ''}
+            onClick={() => onTabChange('pos')}
+          >
+            کارت خوان
+          </button>
+        </div>
+        <button className="btn primary" onClick={onAdd}>
+          <PlusIcon style={{ width: 16 }} />
+          {activeTab === 'bank' ? 'افزودن حساب بانکی' : 'افزودن کارت خوان'}
+        </button>
+      </div>
+    </div>
+  );
+}

assets/admin/components/paymentMethods/PosFormModal.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import Modal from '../ui/Modal';
+import SearchableSelect from '../ui/SearchableSelect';
+import { BANK_OPTIONS } from './banks';
+import {
+  useCreatePos,
+  useUpdatePos,
+  type Pos,
+} from '../../hooks/usePaymentMethods';
+
+/**
+ * فرم افزودن/ویرایش کارت‌خوان — پورت مبدأ ModalAddPose.jsx.
+ * اگر `pos` داده شود حالت ویرایش، وگرنه افزودن.
+ */
+export default function PosFormModal({
+  open,
+  pos,
+  onClose,
+}: {
+  open: boolean;
+  pos: Pos | null;
+  onClose: () => void;
+}) {
+  const isEdit = !!pos;
+  const [bankName, setBankName] = useState('');
+  const [terminalNumber, setTerminalNumber] = useState('');
+  const [accountNumber, setAccountNumber] = useState('');
+
+  const createMut = useCreatePos();
+  const updateMut = useUpdatePos();
+  const pending = createMut.isPending || updateMut.isPending;
+
+  useEffect(() => {
+    if (!open) return;
+    setBankName(pos?.bank_name ?? '');
+    setTerminalNumber(pos?.terminal_number ?? '');
+    setAccountNumber(pos?.account_number ?? '');
+  }, [open, pos]);
+
+  const submit = () => {
+    if (!bankName.trim()) { toast.error('نام بانک الزامی است'); return; }
+    if (!terminalNumber.trim()) { toast.error('شماره ترمینال الزامی است'); return; }
+
+    const body = {
+      bank_name: bankName.trim(),
+      terminal_number: terminalNumber.trim(),
+      account_number: accountNumber.trim(),
+    };
+
+    const onSuccess = () => {
+      toast.success(isEdit ? 'کارت خوان ویرایش شد' : 'کارت خوان اضافه شد');
+      onClose();
+    };
+    const onError = (e: unknown) => toast.error(e instanceof Error ? e.message : 'خطا در ذخیره');
+
+    if (isEdit && pos) {
+      updateMut.mutate({ uuid: pos.uuid, body }, { onSuccess, onError });
+    } else {
+      createMut.mutate(body, { onSuccess, onError });
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={isEdit ? 'ویرایش کارت خوان' : 'افزودن کارت خوان'}
+      size="sm"
+      footer={
+        <button className="btn primary" style={{ width: '100%' }} disabled={pending} onClick={submit}>
+          {pending ? '...' : isEdit ? 'ذخیره تغییرات' : 'اضافه کردن کارت خوان'}
+        </button>
+      }
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div>
+          <label className="field-label">نام بانک</label>
+          <SearchableSelect
+            options={BANK_OPTIONS}
+            value={bankName || null}
+            onChange={(v) => setBankName(v != null ? String(v) : '')}
+            placeholder="انتخاب بانک"
+          />
+        </div>
+        <div>
+          <label className="field-label">شماره ترمینال</label>
+          <input className="input" value={terminalNumber} onChange={(e) => setTerminalNumber(e.target.value)} placeholder="شماره ترمینال" />
+        </div>
+        <div>
+          <label className="field-label">شماره حساب</label>
+          <input className="input" value={accountNumber} onChange={(e) => setAccountNumber(e.target.value)} placeholder="شماره حساب" />
+        </div>
+      </div>
+    </Modal>
+  );
+}

assets/admin/components/paymentMethods/PosTable.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { PencilIcon } from '@heroicons/react/24/outline';
+import DataTable, { type Column } from '../ui/DataTable';
+import StatusToggle from './StatusToggle';
+import type { Pos } from '../../hooks/usePaymentMethods';
+
+/**
+ * جدول کارت‌خوان‌ها — پورت مبدأ PoseList.jsx.
+ * ستون‌ها: نام بانک، شماره سریال، شماره ترمینال، وضعیت، عملیات.
+ */
+export default function PosTable({
+  data,
+  loading,
+  togglingUuid,
+  onToggle,
+  onEdit,
+  onAdd,
+}: {
+  data: Pos[];
+  loading?: boolean;
+  togglingUuid: string | null;
+  onToggle: (uuid: string) => void;
+  onEdit: (pos: Pos) => void;
+  onAdd: () => void;
+}) {
+  const columns: Column<Pos>[] = [
+    { key: 'bank_name', header: 'نام بانک' },
+    { key: 'serial_number', header: 'شماره سریال', render: (r) => r.serial_number || '—' },
+    { key: 'terminal_number', header: 'شماره ترمینال', render: (r) => r.terminal_number || '—' },
+    {
+      key: 'is_active',
+      header: 'وضعیت',
+      render: (r) => (
+        <StatusToggle
+          active={r.is_active}
+          disabled={togglingUuid === r.uuid}
+          onToggle={() => onToggle(r.uuid)}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <p style={{ fontSize: 13.5, color: 'var(--text-2)', margin: '0 0 14px' }}>
+        مدیریت و اضافه کردن دستگاه های کارت خوان موجود
+      </p>
+      <DataTable<Pos>
+        columns={columns}
+        data={data}
+        loading={loading}
+        emptyMessage="هنوز کارت خوانی ثبت نشده است"
+        emptyAction={<button className="btn primary sm" onClick={onAdd}>افزودن کارت خوان</button>}
+        actions={(r) => (
+          <button
+            className="btn sm ghost"
+            style={{ color: 'var(--accent)' }}
+            onClick={() => onEdit(r)}
+          >
+            <PencilIcon style={{ width: 14 }} />
+            ویرایش
+          </button>
+        )}
+      />
+    </>
+  );
+}

assets/admin/components/paymentMethods/StatusToggle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+/**
+ * سوییچ وضعیت فعال/غیرفعال — معادل MUI Switch مبدأ با دیزاین‌سیستم مقصد.
+ * برچسب فعال/غیرفعال کنار سوییچ نمایش داده می‌شود (مثل مبدأ).
+ */
+export default function StatusToggle({
+  active,
+  onToggle,
+  disabled,
+}: {
+  active: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+}) {
+  const label = active ? 'فعال' : 'غیرفعال';
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <label className="switch" title={label}>
+        <input
+          type="checkbox"
+          checked={active}
+          onChange={onToggle}
+          disabled={disabled}
+          aria-label={label}
+        />
+        <span className="switch-track"><span className="switch-thumb" /></span>
+      </label>
+      <span style={{ fontSize: 13, color: 'var(--text-2)' }}>{label}</span>
+    </div>
+  );
+}

assets/admin/components/paymentMethods/banks.ts

@@ -0,0 +1,16 @@
+import type { SelectOption } from '../ui/SearchableSelect';
+
+/**
+ * فهرست بانک‌های قابل انتخاب — عیناً از مبدأ clinic-pro-tauri
+ * (PaymentManagement/list/ModalAddBankAccount.jsx). value = label تا نام بانک
+ * مستقیم ذخیره شود (بک‌اند نام را نگه می‌دارد، نه شناسه).
+ */
+export const BANK_OPTIONS: SelectOption[] = [
+  { value: 'ملی', label: 'ملی' },
+  { value: 'ملت', label: 'ملت' },
+  { value: 'تجارت', label: 'تجارت' },
+  { value: 'صادرات', label: 'صادرات' },
+  { value: 'سپه', label: 'سپه' },
+  { value: 'پاسارگاد', label: 'پاسارگاد' },
+  { value: 'رفاه', label: 'رفاه' },
+];

assets/admin/hooks/usePaymentMethods.ts

@@ -0,0 +1,112 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import type { ApiResponse } from '../lib/api';
+
+/**
+ * روش‌های پرداختِ کلینیک (حساب بانکی + کارت‌خوان) برای صفحهٔ «مدیریت پرداخت».
+ * منبع: /api/v1/my/payment-methods/... — این رکوردها بعداً از فاکتور مراجعه‌کننده
+ * برای ثبت روش پرداختِ یک سرویس ارجاع داده می‌شوند.
+ */
+
+export interface BankAccount {
+  uuid: string;
+  bank_name: string;
+  card_number: string | null;
+  account_number: string;
+  shaba_number: string | null;
+  is_active: boolean;
+  created_at: number;
+}
+
+export interface Pos {
+  uuid: string;
+  bank_name: string;
+  serial_number: string | null;
+  terminal_number: string;
+  account_number: string | null;
+  is_active: boolean;
+  created_at: number;
+}
+
+export interface BankAccountInput {
+  bank_name: string;
+  account_number: string;
+  card_number?: string;
+  shaba_number?: string;
+}
+
+export interface PosInput {
+  bank_name: string;
+  terminal_number: string;
+  serial_number?: string;
+  account_number?: string;
+}
+
+const BANK_KEY = ['payment-methods', 'bank-accounts'] as const;
+const POS_KEY = ['payment-methods', 'pos'] as const;
+
+// ── Bank accounts ────────────────────────────────────────────────────────────
+
+export function useBankAccounts() {
+  return useQuery<ApiResponse<BankAccount[]>>({
+    queryKey: BANK_KEY,
+    queryFn: () => api.get('/api/v1/my/payment-methods/bank-accounts'),
+  });
+}
+
+export function useCreateBankAccount() {
+  const qc = useQueryClient();
+  return useMutation<ApiResponse<BankAccount>, unknown, BankAccountInput>({
+    mutationFn: (body) => api.post('/api/v1/my/payment-methods/bank-accounts', body),
+    onSuccess: () => qc.invalidateQueries({ queryKey: BANK_KEY }),
+  });
+}
+
+export function useUpdateBankAccount() {
+  const qc = useQueryClient();
+  return useMutation<ApiResponse<BankAccount>, unknown, { uuid: string; body: BankAccountInput }>({
+    mutationFn: ({ uuid, body }) => api.put(`/api/v1/my/payment-methods/bank-accounts/${uuid}`, body),
+    onSuccess: () => qc.invalidateQueries({ queryKey: BANK_KEY }),
+  });
+}
+
+export function useToggleBankAccountStatus() {
+  const qc = useQueryClient();
+  return useMutation<ApiResponse<BankAccount>, unknown, string>({
+    mutationFn: (uuid) => api.patch(`/api/v1/my/payment-methods/bank-accounts/${uuid}/status`, {}),
+    onSuccess: () => qc.invalidateQueries({ queryKey: BANK_KEY }),
+  });
+}
+
+// ── POS devices ──────────────────────────────────────────────────────────────
+
+export function usePosDevices() {
+  return useQuery<ApiResponse<Pos[]>>({
+    queryKey: POS_KEY,
+    queryFn: () => api.get('/api/v1/my/payment-methods/pos'),
+  });
+}
+
+export function useCreatePos() {
+  const qc = useQueryClient();
+  return useMutation<ApiResponse<Pos>, unknown, PosInput>({
+    mutationFn: (body) => api.post('/api/v1/my/payment-methods/pos', body),
+    onSuccess: () => qc.invalidateQueries({ queryKey: POS_KEY }),
+  });
+}
+
+export function useUpdatePos() {
+  const qc = useQueryClient();
+  return useMutation<ApiResponse<Pos>, unknown, { uuid: string; body: PosInput }>({
+    mutationFn: ({ uuid, body }) => api.put(`/api/v1/my/payment-methods/pos/${uuid}`, body),
+    onSuccess: () => qc.invalidateQueries({ queryKey: POS_KEY }),
+  });
+}
+
+export function useTogglePosStatus() {
+  const qc = useQueryClient();
+  return useMutation<ApiResponse<Pos>, unknown, string>({
+    mutationFn: (uuid) => api.patch(`/api/v1/my/payment-methods/pos/${uuid}/status`, {}),
+    onSuccess: () => qc.invalidateQueries({ queryKey: POS_KEY }),
+  });
+}

assets/admin/pages/MyFinancialPage.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { screen } from '@testing-library/react';
+import { screen, fireEvent, within } from '@testing-library/react';
 import { renderWithProviders } from '../test/utils';
 
 vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
@@ -13,20 +13,70 @@ import MyFinancialPage from './MyFinancialPage';
 
 const get = api.get as ReturnType<typeof vi.fn>;
 
+const bankRow = {
+  uuid: 'bank-1', bank_name: 'ملی', card_number: '6037991234567890',
+  account_number: '0101234567890', shaba_number: null, is_active: true, created_at: 1,
+};
+const posRow = {
+  uuid: 'pos-1', bank_name: 'ملت', serial_number: 'SN-98765',
+  terminal_number: '123456', account_number: null, is_active: false, created_at: 1,
+};
+
+function mockData({ banks = [bankRow], pos = [posRow] } = {}) {
+  get.mockImplementation((url: string) => {
+    if (url.includes('/bank-accounts')) return Promise.resolve({ success: true, data: banks });
+    if (url.includes('/pos')) return Promise.resolve({ success: true, data: pos });
+    return Promise.resolve({ success: true, data: [] });
+  });
+}
+
 beforeEach(() => {
   get.mockReset();
-  get.mockResolvedValue({ success: true, data: {
-    total_paid: 0, total_pending: 0, monthly_chart: [],
-  } });
+  mockData();
 });
 
-describe('MyFinancialPage inside the settings shell', () => {
-  it('renders the settings sub-nav around the page content', async () => {
+describe('MyFinancialPage — payment methods', () => {
+  it('renders the settings shell and the payment management header', async () => {
     renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
-    // settings shell menu
-    expect(await screen.findByText('خرید اشتراک')).toBeInTheDocument();
-    expect(screen.getByText('خدمات')).toBeInTheDocument();
-    // page's own content
-    expect(screen.getByText('گزارش مالی')).toBeInTheDocument();
+    expect(await screen.findByText('خرید اشتراک')).toBeInTheDocument();       // settings sub-nav
+    expect(screen.getByText('مدیریت پرداخت‌ها')).toBeInTheDocument();          // page header
+    expect(screen.getByRole('tab', { name: 'حساب بانکی' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'کارت خوان' })).toBeInTheDocument();
+  });
+
+  it('shows bank accounts by default', async () => {
+    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
+    expect(await screen.findByText('0101234567890')).toBeInTheDocument();
+    expect(screen.getByText('6037991234567890')).toBeInTheDocument();
+    expect(screen.getByText('مدیریت و اضافه کردن حساب های بانکی کلینیک')).toBeInTheDocument();
+  });
+
+  it('switches to the POS tab and lists devices', async () => {
+    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
+    await screen.findByText('0101234567890');
+
+    fireEvent.click(screen.getByRole('tab', { name: 'کارت خوان' }));
+
+    expect(await screen.findByText('SN-98765')).toBeInTheDocument();
+    expect(screen.getByText('123456')).toBeInTheDocument();
+    expect(screen.getByText('مدیریت و اضافه کردن دستگاه های کارت خوان موجود')).toBeInTheDocument();
+  });
+
+  it('renders an empty state when there are no bank accounts', async () => {
+    mockData({ banks: [] });
+    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
+    expect(await screen.findByText('هنوز حساب بانکی ثبت نشده است')).toBeInTheDocument();
+  });
+
+  it('opens the add bank account modal from the header button', async () => {
+    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
+    await screen.findByText('0101234567890');
+
+    fireEvent.click(screen.getByRole('button', { name: /افزودن حساب بانکی/ }));
+
+    const dialog = await screen.findByText('افزودن حساب بانکی', { selector: 'h2' });
+    expect(dialog).toBeInTheDocument();
+    const modal = dialog.closest('.modal') as HTMLElement;
+    expect(within(modal).getByText('شبا')).toBeInTheDocument();
   });
 });

assets/admin/pages/MyFinancialPage.tsx

@@ -1,84 +1,86 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
 import SettingsLayout from '../components/layout/SettingsLayout';
-import { useQuery } from '@tanstack/react-query';
-import { api } from '../lib/api';
-import type { ApiResponse } from '../lib/api';
-import { formatRial } from '../lib/utils';
 import PageHeader from '../components/ui/PageHeader';
+import PaymentMethodHead, { type PaymentTab } from '../components/paymentMethods/PaymentMethodHead';
+import BankAccountTable from '../components/paymentMethods/BankAccountTable';
+import PosTable from '../components/paymentMethods/PosTable';
+import BankAccountFormModal from '../components/paymentMethods/BankAccountFormModal';
+import PosFormModal from '../components/paymentMethods/PosFormModal';
+import {
+  useBankAccounts,
+  usePosDevices,
+  useToggleBankAccountStatus,
+  useTogglePosStatus,
+  type BankAccount,
+  type Pos,
+} from '../hooks/usePaymentMethods';
 
-interface MonthlyEntry {
-  month: string;
-  paid: number;
-  count: number;
-}
-
-interface FinancialSummary {
-  total_paid: number;
-  total_pending: number;
-  total_refunded: number;
-  count_paid: number;
-  monthly_chart: MonthlyEntry[];
-}
-
-function KpiCard({ label, value, color }: { label: string; value: string; color: string }) {
-  return (
-    <div className="card" style={{ flex: '1 1 200px', minWidth: 0 }}>
-      <div style={{ color: 'var(--text-3)', fontSize: 13, marginBottom: 6 }}>{label}</div>
-      <div style={{ fontSize: 22, fontWeight: 700, color }}>{value}</div>
-    </div>
-  );
-}
-
-const BAR_MAX_HEIGHT = 120;
-
+/**
+ * صفحهٔ «مدیریت پرداخت» (/admin/my-financial) — پورت تب PaymentManagement از
+ * clinic-pro-tauri. روش‌های پرداختِ کلینیک (حساب بانکی + کارت‌خوان) که بعداً از
+ * فاکتور مراجعه‌کننده برای ثبت روش پرداخت یک سرویس ارجاع می‌شوند.
+ */
 function MyFinancialPageContent() {
-  const { data, isLoading } = useQuery<ApiResponse<FinancialSummary>>({
-    queryKey: ['my-financial-summary'],
-    queryFn: () => api.get('/api/v1/my/financial-summary'),
-  });
+  const [activeTab, setActiveTab] = useState<PaymentTab>('bank');
+  const [bankModalOpen, setBankModalOpen] = useState(false);
+  const [posModalOpen, setPosModalOpen] = useState(false);
+  const [editingBank, setEditingBank] = useState<BankAccount | null>(null);
+  const [editingPos, setEditingPos] = useState<Pos | null>(null);
 
-  const summary = data?.data;
-  const maxPaid = summary?.monthly_chart?.reduce((m, e) => Math.max(m, e.paid), 1) ?? 1;
+  const bankQuery = useBankAccounts();
+  const posQuery = usePosDevices();
+  const toggleBank = useToggleBankAccountStatus();
+  const togglePos = useTogglePosStatus();
+
+  const banks = bankQuery.data?.data ?? [];
+  const posDevices = posQuery.data?.data ?? [];
+
+  const openAdd = () => {
+    if (activeTab === 'bank') { setEditingBank(null); setBankModalOpen(true); }
+    else { setEditingPos(null); setPosModalOpen(true); }
+  };
+
+  const onError = (e: unknown) => toast.error(e instanceof Error ? e.message : 'خطا در تغییر وضعیت');
 
   return (
     <div className="page">
-      <PageHeader title="گزارش مالی" description="خلاصه پرداخت‌های بیماران" />
+      <PageHeader title="مدیریت پرداخت" description="روش‌های پرداخت کلینیک (حساب بانکی و کارت‌خوان)" />
 
-      {isLoading ? (
-        <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری...</div>
-      ) : (
-        <>
-          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 24 }}>
-            <KpiCard label="مجموع پرداخت شده"   value={formatRial(summary?.total_paid ?? 0)}     color="var(--green)"   />
-            <KpiCard label="در انتظار پرداخت"    value={formatRial(summary?.total_pending ?? 0)}  color="var(--orange)"  />
-            <KpiCard label="مجموع استرداد"        value={formatRial(summary?.total_refunded ?? 0)} color="var(--red)"     />
-            <KpiCard label="تعداد پرداخت موفق"   value={String(summary?.count_paid ?? 0)}          color="var(--primary)" />
-          </div>
+      <div className="card">
+        <PaymentMethodHead activeTab={activeTab} onTabChange={setActiveTab} onAdd={openAdd} />
 
-          <div className="card">
-            <div style={{ fontWeight: 600, marginBottom: 20 }}>نمودار ۶ ماه اخیر</div>
-            {summary?.monthly_chart?.length ? (
-              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, height: BAR_MAX_HEIGHT + 40 }}>
-                {summary.monthly_chart.map((entry) => {
-                  const barH = Math.max(4, Math.round((entry.paid / maxPaid) * BAR_MAX_HEIGHT));
-                  return (
-                    <div key={entry.month} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{formatRial(entry.paid)}</div>
-                      <div
-                        style={{ width: '100%', height: barH, borderRadius: 6, background: 'linear-gradient(to top, var(--primary), oklch(0.72 0.16 256))', transition: 'height 0.3s ease' }}
-                        title={`${entry.month}: ${formatRial(entry.paid)} — ${entry.count} پرداخت`}
-                      />
-                      <div style={{ fontSize: 11, color: 'var(--text-2)', whiteSpace: 'nowrap' }}>{entry.month}</div>
-                    </div>
-                  );
-                })}
-              </div>
-            ) : (
-              <div style={{ textAlign: 'center', color: 'var(--text-3)', padding: 32 }}>داده‌ای برای نمایش وجود ندارد</div>
-            )}
-          </div>
-        </>
-      )}
+        {activeTab === 'bank' ? (
+          <BankAccountTable
+            data={banks}
+            loading={bankQuery.isLoading}
+            togglingUuid={toggleBank.isPending ? toggleBank.variables ?? null : null}
+            onToggle={(uuid) => toggleBank.mutate(uuid, { onError })}
+            onEdit={(account) => { setEditingBank(account); setBankModalOpen(true); }}
+            onAdd={openAdd}
+          />
+        ) : (
+          <PosTable
+            data={posDevices}
+            loading={posQuery.isLoading}
+            togglingUuid={togglePos.isPending ? togglePos.variables ?? null : null}
+            onToggle={(uuid) => togglePos.mutate(uuid, { onError })}
+            onEdit={(pos) => { setEditingPos(pos); setPosModalOpen(true); }}
+            onAdd={openAdd}
+          />
+        )}
+      </div>
+
+      <BankAccountFormModal
+        open={bankModalOpen}
+        account={editingBank}
+        onClose={() => { setBankModalOpen(false); setEditingBank(null); }}
+      />
+      <PosFormModal
+        open={posModalOpen}
+        pos={editingPos}
+        onClose={() => { setPosModalOpen(false); setEditingPos(null); }}
+      />
     </div>
   );
 }