feat: add Settlements, SMS, User detail, and Users management pages

- Implement SettlementsPage for managing settlement requests with approval and rejection functionalities. - Create SmsPage for handling SMS templates, including creation, approval, rejection, and logging. - Add UserDetailPage to display detailed information about users. - Develop UsersPage for listing users with search, view, edit, and delete options. - Introduce new types for User, SmsTemplate, SmsLog, and Settlement to support the new features.
2026-06-09 22:53:26 +03:30
parent e522c741b8
commit f619449167
30 changed files with 3870 additions and 0 deletions
@@ -0,0 +1,88 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import { api } from '../lib/api';
+import type { ApiResponse } from '../lib/api';
+import type { Payment } from '../types';
+import { formatDate, formatDateTime, formatRial } from '../lib/utils';
+import PageHeader from '../components/ui/PageHeader';
+import StatusBadge from '../components/ui/StatusBadge';
+
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
+      <span className="text-sm text-gray-500">{label}</span>
+      <span className="text-sm font-medium text-gray-900">{value ?? '—'}</span>
+    </div>
+  );
+}
+
+export default function PaymentDetailPage() {
+  const { uuid } = useParams<{ uuid: string }>();
+  const navigate = useNavigate();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['payment', uuid],
+    queryFn: () => api.get<ApiResponse<Payment>>(`/api/v1/payment/${uuid}`),
+    enabled: !!uuid,
+  });
+
+  const payment = data?.data;
+
+  return (
+    <div>
+      <PageHeader
+        title="جزئیات پرداخت"
+        breadcrumbs={[
+          { label: 'داشبورد', to: '/admin/dashboard' },
+          { label: 'پرداخت‌ها', to: '/admin/payments' },
+          { label: 'جزئیات' },
+        ]}
+        action={
+          <button onClick={() => navigate('/admin/payments')}
+            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors">
+            <ArrowRightIcon className="w-4 h-4" />
+            بازگشت
+          </button>
+        }
+      />
+
+      {isLoading ? (
+        <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" />
+          ))}
+        </div>
+      ) : payment ? (
+        <div className="max-w-lg">
+          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
+            <InfoRow label="شناسه" value={<span dir="ltr" className="font-mono text-xs">{payment.uuid}</span>} />
+            <InfoRow label="موبایل" value={<span dir="ltr">{payment.patient_mobile}</span>} />
+            <InfoRow label="مبلغ" value={formatRial(payment.amount)} />
+            <InfoRow label="وضعیت" value={<StatusBadge type="payment" value={payment.status} />} />
+            <InfoRow label="درگاه" value={<span className="uppercase">{payment.gateway}</span>} />
+            <InfoRow label="شماره مرجع" value={payment.ref_id ? <span dir="ltr" className="font-mono text-xs">{payment.ref_id}</span> : null} />
+            <InfoRow label="تاریخ پرداخت" value={formatDateTime(payment.paid_at)} />
+            <InfoRow label="تاریخ ثبت" value={formatDateTime(payment.created_at)} />
+            {payment.appointment_uuid && (
+              <InfoRow
+                label="نوبت مرتبط"
+                value={
+                  <a href={`/admin/appointments/${payment.appointment_uuid}`}
+                    className="text-primary-600 hover:underline text-xs font-mono">
+                    مشاهده نوبت
+                  </a>
+                }
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="bg-white rounded-2xl border border-gray-100 p-16 text-center text-gray-400">
+          پرداختی یافت نشد
+        </div>
+      )}
+    </div>
+  );
+}