feat(bookings): add cancellation reason column to bookings table

Enhanced the bookings page and admin event bookings tab by adding a new column for 'cancellationReason'. This column displays the reason for cancellations when applicable, improving the visibility of booking statuses. Additionally, removed the 'غایب' (no-show) insight stat from the event overview tab for a cleaner presentation of event insights.
This commit is contained in:
alisaza 2026-09-11 22:56:04 +03:30
parent 9435173971
commit 3a08625cbe
3 changed files with 32 additions and 4 deletions

View File

@ -56,6 +56,13 @@ const columns: PaginationListColumnType[] = [
type: 'select', type: 'select',
filterItems: BOOKING_STATUS_FILTER_ITEMS, filterItems: BOOKING_STATUS_FILTER_ITEMS,
}, },
{
field: 'cancellationReason',
label: 'دلیل لغو',
filterable: false,
sortable: false,
type: 'text',
},
{ {
field: 'checkedInAt', field: 'checkedInAt',
label: 'چک‌این', label: 'چک‌این',
@ -123,6 +130,18 @@ const BookingsPage = () => {
/> />
) )
}, },
cancellationReason: (row, cellValue) => {
const reason = coerceToString(cellValue).trim()
const isCancelledLike = row.status === 'cancelled' || row.status === 'refunded'
if (!isCancelledLike || !reason) return '—'
return (
<span className="max-w-[220px] whitespace-pre-wrap break-words text-xs text-secondary-20">
{reason}
</span>
)
},
checkedInAt: (_row, cellValue) => formatPersianDate(cellValue), checkedInAt: (_row, cellValue) => formatPersianDate(cellValue),
createdAt: (_row, cellValue) => formatPersianDate(cellValue), createdAt: (_row, cellValue) => formatPersianDate(cellValue),
actions: (row) => { actions: (row) => {

View File

@ -34,6 +34,7 @@ const bookingsColumns: PaginationListColumnType[] = [
{ field: 'bookingCode', label: 'کد رزرو', filterable: false, sortable: false, type: 'text' }, { field: 'bookingCode', label: 'کد رزرو', filterable: false, sortable: false, type: 'text' },
{ field: 'userId', label: 'مهمان', filterable: false, sortable: false, type: 'text' }, { field: 'userId', label: 'مهمان', filterable: false, sortable: false, type: 'text' },
{ field: 'status', label: 'وضعیت', filterable: true, sortable: true, type: 'select', filterItems: BOOKING_STATUS_FILTER_ITEMS }, { field: 'status', label: 'وضعیت', filterable: true, sortable: true, type: 'select', filterItems: BOOKING_STATUS_FILTER_ITEMS },
{ field: 'cancellationReason', label: 'دلیل لغو', filterable: false, sortable: false, type: 'text' },
{ field: 'checkedInAt', label: 'چک‌این', filterable: false, sortable: false, type: 'date' }, { field: 'checkedInAt', label: 'چک‌این', filterable: false, sortable: false, type: 'date' },
{ field: 'createdAt', label: 'تاریخ ثبت', filterable: false, sortable: true, type: 'date' }, { field: 'createdAt', label: 'تاریخ ثبت', filterable: false, sortable: true, type: 'date' },
{ field: 'actions', label: 'عملیات' }, { field: 'actions', label: 'عملیات' },
@ -113,6 +114,18 @@ const AdminEventBookingsTab = ({ eventId, eventStatus, onCheckedIn }: AdminEvent
/> />
) )
}, },
cancellationReason: (row, cellValue) => {
const reason = coerceToString(cellValue).trim()
const isCancelledLike = row.status === 'cancelled' || row.status === 'refunded'
if (!isCancelledLike || !reason) return '—'
return (
<span className="max-w-[220px] whitespace-pre-wrap break-words text-xs text-secondary-20">
{reason}
</span>
)
},
checkedInAt: (_row, cellValue) => formatPersianDate(cellValue), checkedInAt: (_row, cellValue) => formatPersianDate(cellValue),
createdAt: (_row, cellValue) => formatPersianDate(cellValue), createdAt: (_row, cellValue) => formatPersianDate(cellValue),
actions: (row) => { actions: (row) => {

View File

@ -48,10 +48,6 @@ const AdminEventOverviewTab = ({ insights }: AdminEventOverviewTabProps) => {
label="بازپرداخت‌شده" label="بازپرداخت‌شده"
value={number(insights.registrations.refundedCount)} value={number(insights.registrations.refundedCount)}
/> />
<InsightStat
label="غایب"
value={number(insights.registrations.noShowCount)}
/>
<InsightStat <InsightStat
label="ظرفیت باقی‌مانده" label="ظرفیت باقی‌مانده"
value={number(insights.registrations.remainingCapacity)} value={number(insights.registrations.remainingCapacity)}