hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
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="cp-info-row">
|
|
<span className="cp-info-label text-sm">{label}</span>
|
|
<span className="cp-info-value">{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-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
|
|
<ArrowRightIcon className="w-4 h-4" />
|
|
بازگشت
|
|
</button>
|
|
}
|
|
/>
|
|
|
|
{isLoading ? (
|
|
<div className="cp-card p-6 space-y-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="h-8 rounded-lg skeleton" />
|
|
))}
|
|
</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>
|
|
);
|
|
}
|