feat: add payments summary endpoint and UI redesign for MyPaymentsPage

- Implemented a new API endpoint `/api/v1/my/billing/payments/summary` to provide a financial summary of payments with filters for national code, status, and date range.
- Updated the InvoiceRepository to aggregate totals for paid and unsettled invoices.
- Created a new hook `usePaymentsSummary` to fetch summary data in the frontend.
- Redesigned the MyPaymentsPage to align with the ClaimsPage structure, incorporating a design system, summary statistics, and improved filtering options.
- Added tests for the new payments summary endpoint to ensure correct functionality and filtering behavior.

assets/admin/hooks/useMyPayments.ts

@@ -59,6 +59,27 @@ export function usePayments(filters: PaymentFilters) {
   });
 }
 
+export interface PaymentsSummary {
+  total_rials: number;
+  paid_rials: number;
+  unsettled_rials: number;
+  invoices_count: number;
+}
+
+/** Summary over the same filters as the list, so the stat cards match the table. */
+export function usePaymentsSummary(filters: Omit<PaymentFilters, 'page'>) {
+  const qs = new URLSearchParams();
+  if (filters.national_code) qs.set('national_code', filters.national_code);
+  if (filters.status)        qs.set('status', filters.status);
+  if (filters.from)          qs.set('from', String(filters.from));
+  if (filters.to)            qs.set('to', String(filters.to));
+
+  return useQuery<ApiResponse<PaymentsSummary>>({
+    queryKey: ['payments-summary', filters],
+    queryFn: () => api.get(`/api/v1/my/billing/payments/summary?${qs.toString()}`),
+  });
+}
+
 /** Node 2 — a single patient's recorded invoices (header + paginated list). */
 export function usePatientInvoices(patientUuid: string | undefined, page: number) {
   return useQuery<ApiResponse<PatientInvoicesPayload>>({