feat: add clinic management and financial reporting features

- 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.
2026-06-12 12:31:27 +03:30
parent 92cb834c22
commit 8ad983310c
14 changed files with 1772 additions and 469 deletions
@@ -0,0 +1,83 @@
+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>
+  );
+}