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>
This commit is contained in:
hamed
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user