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/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>
   );
 }