feat(billing): patient payments list + patient invoices detail (doctor/clinic)

Port two nobat724 Figma screens into the admin SPA for the doctor/clinic
tenant panel:

- node 1 — لیست پرداخت‌ها (/admin/my-payments): per-patient payment summary
  (invoice count, paid, remaining, derived status paid/unsettled/unpaid),
  filters by national code / status / Jalali date range, pagination.
- node 2 — پرداخت‌های ثبت‌شده (/admin/my-payments/:patientUuid): a patient's
  recorded invoices with patient header, service title, total, status badge,
  and an expandable per-invoice item breakdown.

Backend (App\Billing):
- InvoiceRepository::patientPaymentSummary/countPatientPaymentSummary — DQL
  aggregation grouped by patient record (arbitrary join Invoice→PatientRecord
  →User), draft/void excluded, derived-status HAVING filters.
- InvoiceRepository::invoicesForPatient/count + InvoiceService methods that
  shape rows and derive status.
- BillingController: GET /api/v1/my/billing/patient-payments and
  GET /api/v1/my/billing/patients/{patientUuid}/invoices (thin, resolveEntity,
  tenant-scoped, 403/404). Invoice::getIssuedAt / InvoiceItem::getTitle added.
- docs/api/billing.md documents both endpoints.

Frontend: useMyPayments hooks, MyPaymentsPage, MyPaymentDetailPage, routes in
App.tsx (doctor/secretary/clinic, blockClinicScope) and a sidebar entry.
Persian strings hardcoded per existing admin convention (no i18n infra).

Tests: tests/Billing/PatientPaymentsTest.php (8), useMyPayments + both page
tests (11). Note: pre-existing LoginPage.test failures are unrelated (proven
by stashing this change).

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

assets/admin/pages/MyPaymentsPage.tsx

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MagnifyingGlassIcon, EyeIcon, BanknotesIcon } from '@heroicons/react/24/outline';
+import PageHeader from '../components/ui/PageHeader';
+import Pagination from '../components/ui/Pagination';
+import PersianDateInput from '../components/ui/PersianDateInput';
+import { formatRial, formatNumber, toDate } from '../lib/utils';
+import {
+  usePatientPayments,
+  MY_PAYMENTS_LIMIT,
+  type PatientPaymentRow,
+  type PaymentRowStatus,
+} from '../hooks/useMyPayments';
+
+const STATUS_LABEL: Record<PaymentRowStatus, string> = {
+  paid:      'پرداخت شده',
+  unsettled: 'تسویه نشده',
+  unpaid:    'پرداخت نشده',
+};
+const STATUS_BADGE: Record<PaymentRowStatus, string> = {
+  paid:      'green',
+  unsettled: 'amber',
+  unpaid:    'red',
+};
+
+const EMPTY: PatientPaymentRow[] = [];
+
+/** unix start-of-day for `from`, end-of-day for `to`, from a gregorian Y-m-d. */
+function dayBound(value: string, end: boolean): number | undefined {
+  const d = toDate(value);
+  if (!d) return undefined;
+  const secs = Math.floor(d.setHours(0, 0, 0, 0) / 1000);
+  return end ? secs + 86399 : secs;
+}
+
+/** لیست پرداخت‌ها — per-patient payment summary for the logged-in doctor/clinic. */
+export default function MyPaymentsPage() {
+  const navigate = useNavigate();
+  const [page, setPage] = useState(1);
+  const [nationalCode, setNationalCode] = useState('');
+  const [status, setStatus] = useState('');
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+
+  const reset = () => setPage(1);
+
+  const { data, isLoading } = usePatientPayments({
+    page,
+    national_code: nationalCode.trim() || undefined,
+    status: status || undefined,
+    from: from ? dayBound(from, false) : undefined,
+    to: to ? dayBound(to, true) : undefined,
+  });
+
+  const rows = data?.data ?? EMPTY;
+  const total = data?.meta?.totalRecords ?? 0;
+
+  const th: React.CSSProperties = { textAlign: 'right', padding: '12px 16px', fontWeight: 600 };
+  const td: React.CSSProperties = { padding: '12px 16px' };
+
+  return (
+    <>
+      <PageHeader title="لیست پرداخت‌ها" description="خلاصه‌ی پرداخت‌های بیماران شما" />
+
+      {/* فیلترها */}
+      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+        <div style={{
+          flex: '1 1 240px', minWidth: 200, display: 'flex', alignItems: 'center', gap: 8,
+          background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r)', padding: '9px 12px',
+        }}>
+          <MagnifyingGlassIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />
+          <input
+            style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1, fontSize: 14 }}
+            value={nationalCode}
+            onChange={(e) => { setNationalCode(e.target.value.replace(/\D/g, '')); reset(); }}
+            placeholder="کد ملی بیمار را وارد کنید..."
+            dir="ltr"
+            inputMode="numeric"
+          />
+        </div>
+
+        <select
+          className="input"
+          style={{ flex: '0 0 auto', width: 160 }}
+          value={status}
+          onChange={(e) => { setStatus(e.target.value); reset(); }}
+          aria-label="وضعیت"
+        >
+          <option value="">همه وضعیت‌ها</option>
+          <option value="paid">پرداخت شده</option>
+          <option value="unsettled">تسویه نشده</option>
+          <option value="unpaid">پرداخت نشده</option>
+        </select>
+
+        <div style={{ width: 150 }}>
+          <PersianDateInput value={from} onChange={(v) => { setFrom(v); reset(); }} placeholder="از تاریخ" />
+        </div>
+        <div style={{ width: 150 }}>
+          <PersianDateInput value={to} onChange={(v) => { setTo(v); reset(); }} placeholder="تا تاریخ" />
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="card" style={{ padding: 32, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری…</div>
+      ) : rows.length === 0 ? (
+        <div className="card" style={{ padding: '60px 24px', textAlign: 'center', color: 'var(--text-3)' }}>
+          <BanknotesIcon style={{ width: 48, margin: '0 auto 16px', display: 'block', opacity: 0.4 }} />
+          <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 6, color: 'var(--text-2)' }}>پرداختی یافت نشد</div>
+          <div style={{ fontSize: 13 }}>با ثبت صورتحساب برای بیماران، این فهرست پر می‌شود.</div>
+        </div>
+      ) : (
+        <>
+          <div className="card" style={{ overflowX: 'auto' }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5 }}>
+              <thead>
+                <tr style={{ borderBottom: '1px solid var(--border)', color: 'var(--text-3)', fontSize: 12 }}>
+                  <th style={th}>ردیف</th>
+                  <th style={th}>نام بیمار</th>
+                  <th style={th}>کد ملی</th>
+                  <th style={th}>تعداد صورتحساب</th>
+                  <th style={th}>مبلغ پرداختی</th>
+                  <th style={th}>مبلغ باقیمانده</th>
+                  <th style={th}>وضعیت</th>
+                  <th style={{ ...th, textAlign: 'left' }}>عملیات</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((row, i) => (
+                  <tr key={row.patient_uuid} style={{ borderBottom: '1px solid var(--border)' }}>
+                    <td style={td}>{formatNumber((page - 1) * MY_PAYMENTS_LIMIT + i + 1)}</td>
+                    <td style={{ ...td, fontWeight: 600 }}>{row.patient_name ?? '—'}</td>
+                    <td style={{ ...td, color: 'var(--text-2)' }} dir="ltr">{row.national_code ?? '—'}</td>
+                    <td style={td}>{formatNumber(row.invoice_count)}</td>
+                    <td style={{ ...td, fontWeight: 600 }}>{formatRial(row.paid_rials)}</td>
+                    <td style={{ ...td, color: row.remaining_rials > 0 ? 'var(--danger)' : 'var(--text-2)' }}>
+                      {formatRial(row.remaining_rials)}
+                    </td>
+                    <td style={td}>
+                      <span className={`badge ${STATUS_BADGE[row.status]}`}><span className="bdot" />{STATUS_LABEL[row.status]}</span>
+                    </td>
+                    <td style={{ ...td, textAlign: 'left' }}>
+                      <button
+                        className="cp-btn-secondary"
+                        style={{ height: 32, padding: '0 12px', display: 'inline-flex', alignItems: 'center', gap: 5 }}
+                        onClick={() => navigate(`/admin/my-payments/${row.patient_uuid}`)}
+                      >
+                        <EyeIcon style={{ width: 15 }} /> مشاهده
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div style={{ marginTop: 16 }}>
+            <Pagination page={page} total={total} limit={MY_PAYMENTS_LIMIT} onPageChange={setPage} />
+          </div>
+        </>
+      )}
+    </>
+  );
+}