hamed
8ad983310c
- Implemented ClinicFormPage for adding new clinics with validation. - Created MyFinancialPage to display financial summaries and charts. - Developed MyPatientsPage for managing patient data with search and pagination. - Added PreRegistrationsPage for handling pre-registration requests with approval and rejection functionalities. - Introduced database migration for pre_registrations table. - Built PreRegistrationController for managing pre-registration logic, including submission, approval, and rejection. - Created PreRegistration entity and repository for handling pre-registration data.
84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
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';
|
|
|
|
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;
|
|
|
|
export default function MyFinancialPage() {
|
|
const { data, isLoading } = useQuery<ApiResponse<FinancialSummary>>({
|
|
queryKey: ['my-financial-summary'],
|
|
queryFn: () => api.get('/api/v1/my/financial-summary'),
|
|
});
|
|
|
|
const summary = data?.data;
|
|
const maxPaid = summary?.monthly_chart?.reduce((m, e) => Math.max(m, e.paid), 1) ?? 1;
|
|
|
|
return (
|
|
<div className="page">
|
|
<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">
|
|
<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>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|