mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 07:38:10 +00:00
518 lines
24 KiB
TypeScript
518 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Download, TrendingUp, BookOpen, Banknote, Ticket } from 'lucide-react';
|
|
import {
|
|
LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid,
|
|
Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell,
|
|
} from 'recharts';
|
|
import { bookingsApi } from '@/lib/api';
|
|
import { dashboardApi } from '@/lib/api/dashboard';
|
|
import { apiClient } from '@/lib/api-client';
|
|
import { formatCurrency } from '@/lib/utils';
|
|
import ActionButton from '@/components/ui/ActionButton';
|
|
import Modal from '@/components/ui/Modal';
|
|
|
|
const STATUS_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444'];
|
|
|
|
function esc(s: string) {
|
|
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
|
|
export default function ReportsPage() {
|
|
const [dateRange, setDateRange] = useState('30');
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
const [exportModalOpen, setExportModalOpen] = useState(false);
|
|
const [exportFormat, setExportFormat] = useState<'csv' | 'excel' | 'pdf'>('csv');
|
|
|
|
const getDateRange = () => {
|
|
const end = new Date();
|
|
end.setHours(23, 59, 59, 999);
|
|
const start = new Date();
|
|
switch (dateRange) {
|
|
case '7': start.setDate(end.getDate() - 7); break;
|
|
case '30': start.setDate(end.getDate() - 30); break;
|
|
case '90': start.setDate(end.getDate() - 90); break;
|
|
default:
|
|
if (startDate && endDate) return { startDate, endDate };
|
|
}
|
|
return {
|
|
startDate: start.toISOString().split('T')[0],
|
|
endDate: end.toISOString().split('T')[0],
|
|
};
|
|
};
|
|
|
|
const dates = getDateRange();
|
|
|
|
// Confirmed-ticket revenue — same source as dashboard
|
|
const { data: stats, isLoading: statsLoading } = useQuery({
|
|
queryKey: ['backoffice-stats'],
|
|
queryFn: dashboardApi.getBackofficeStats,
|
|
staleTime: 60000,
|
|
});
|
|
|
|
const { data: exchangeRates = [] } = useQuery<any[]>({
|
|
queryKey: ['currencies'],
|
|
queryFn: () => apiClient.get('/currencies'),
|
|
select: (d: any) => (Array.isArray(d) ? d : d?.data ?? d?.items ?? []),
|
|
});
|
|
|
|
const toEtbRate = (currency: string): number | null => {
|
|
if (currency === 'ETB') return 1;
|
|
const r = exchangeRates.find((x: any) => x.fromCurrency === 'ETB' && x.toCurrency === currency);
|
|
return r ? 1 / r.rate : null;
|
|
};
|
|
|
|
const calcGrand = (rows: { currency: string; totalMinor: number }[]) =>
|
|
rows.reduce((sum, { currency, totalMinor }) => {
|
|
const rate = toEtbRate(currency);
|
|
return rate !== null ? sum + Math.round(totalMinor * rate) : sum;
|
|
}, 0);
|
|
|
|
const normalRows = stats?.revenueByCurrency ?? [];
|
|
const packageRows = stats?.packageRevenueByCurrency ?? [];
|
|
const normalGrand = calcGrand(normalRows);
|
|
const packageGrand = calcGrand(packageRows);
|
|
const overallGrand = normalGrand + packageGrand;
|
|
|
|
// Bookings for charts / status distribution
|
|
const { data: bookingsData, isLoading: bookingsLoading } = useQuery({
|
|
queryKey: ['all-bookings'],
|
|
queryFn: () => bookingsApi.getAll({ pageSize: 1000 }),
|
|
});
|
|
|
|
const isLoading = statsLoading || bookingsLoading;
|
|
|
|
const allBookings: any[] = Array.isArray(bookingsData?.items) ? bookingsData.items : [];
|
|
|
|
const bookings = allBookings.filter((b: any) => {
|
|
const d = new Date(b.createdAt).toISOString().split('T')[0];
|
|
return d >= dates.startDate && d <= dates.endDate;
|
|
});
|
|
|
|
const confirmedBookings = bookings.filter((b: any) => b.status !== 'CANCELLED' && b.status !== 'REFUNDED');
|
|
|
|
const byDate = confirmedBookings.reduce((acc: Record<string, any>, b: any) => {
|
|
const date = new Date(b.createdAt).toISOString().split('T')[0];
|
|
if (!acc[date]) acc[date] = { totalMinor: 0, count: 0 };
|
|
acc[date].totalMinor += b.totalMinor || 0;
|
|
acc[date].count += 1;
|
|
return acc;
|
|
}, {});
|
|
|
|
const chartData = Object.entries(byDate)
|
|
.sort(([a], [b]) => a.localeCompare(b))
|
|
.map(([date, d]: [string, any]) => ({
|
|
date: new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
|
|
revenue: (d.totalMinor || 0) / 100,
|
|
bookings: d.count || 0,
|
|
}));
|
|
|
|
const avgDailyRevenue = chartData.length > 0 ? Math.round(overallGrand / 100 / chartData.length) : 0;
|
|
|
|
const REPORT_COLS = ['Date', 'Revenue (ETB)', 'Confirmed Bookings'];
|
|
|
|
const doExport = () => {
|
|
if (!chartData.length) { alert('No data to export'); return; }
|
|
const rows = chartData.map(r => [r.date, String(Math.round(r.revenue)), String(r.bookings)]);
|
|
const dateStr = new Date().toISOString().split('T')[0];
|
|
|
|
if (exportFormat === 'pdf') {
|
|
const w = window.open('', '_blank')!;
|
|
const thead = REPORT_COLS.map(h => `<th>${esc(h)}</th>`).join('');
|
|
const tbody = rows.map(r => `<tr>${r.map(v => `<td>${esc(v)}</td>`).join('')}</tr>`).join('');
|
|
w.document.write(
|
|
`<!DOCTYPE html><html><head><title>Revenue Report</title>` +
|
|
`<style>body{font-family:sans-serif;font-size:11px}table{border-collapse:collapse;width:100%}` +
|
|
`th,td{border:1px solid #ccc;padding:4px 8px}th{background:#10b981;color:#fff}</style></head><body>` +
|
|
`<h2>Revenue Report — ${esc(dates.startDate)} to ${esc(dates.endDate)}</h2>` +
|
|
`<p>Total Revenue: ${esc(formatCurrency(overallGrand, 'ETB'))} | ` +
|
|
`Bookings: ${esc(String(stats?.totalBookings ?? 0))} | ` +
|
|
`Tickets: ${esc(String(stats?.totalTickets ?? 0))}</p>` +
|
|
`<table><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table></body></html>`
|
|
);
|
|
w.document.close(); w.print();
|
|
} else if (exportFormat === 'excel') {
|
|
const tsv = [REPORT_COLS.join('\t'), ...rows.map(r => r.join('\t'))].join('\n');
|
|
const blob = new Blob([tsv], { type: 'application/vnd.ms-excel' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a'); a.href = url; a.download = `revenue-report-${dateStr}.xls`; a.click(); URL.revokeObjectURL(url);
|
|
} else {
|
|
const csv = [REPORT_COLS.map(h => `"${h}"`).join(','), ...rows.map(r => r.map(v => `"${v}"`).join(','))].join('\n');
|
|
const blob = new Blob([csv], { type: 'text/csv' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a'); a.href = url; a.download = `revenue-report-${dateStr}.csv`; a.click(); URL.revokeObjectURL(url);
|
|
}
|
|
setExportModalOpen(false);
|
|
};
|
|
|
|
const renderCurrencyRow = ({ currency, totalMinor }: { currency: string; totalMinor: number }) => {
|
|
const rate = toEtbRate(currency);
|
|
const etbMinor = rate !== null ? Math.round(totalMinor * rate) : null;
|
|
return (
|
|
<div key={currency} className="flex items-center justify-between rounded-md bg-muted/20 px-3 py-2">
|
|
<div className="flex items-center gap-1.5">
|
|
<Banknote className="h-3.5 w-3.5 text-muted-foreground" />
|
|
<span className="text-sm font-medium">{currency}</span>
|
|
</div>
|
|
<span className="text-sm font-semibold tabular-nums">
|
|
{formatCurrency(totalMinor, currency)}
|
|
{currency !== 'ETB' && etbMinor !== null && (
|
|
<span className="ml-1.5 text-xs font-normal text-muted-foreground">
|
|
({formatCurrency(etbMinor, 'ETB')})
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground">Reports & Analytics</h1>
|
|
<p className="text-muted-foreground mt-1">Revenue figures reflect confirmed tickets only</p>
|
|
</div>
|
|
|
|
{/* Date Range Selector */}
|
|
<div className="card">
|
|
<div className="flex items-end gap-4 flex-wrap">
|
|
<div>
|
|
<label className="label">Date Range</label>
|
|
<select className="input" value={dateRange} onChange={(e) => setDateRange(e.target.value)} disabled={isLoading}>
|
|
<option value="7">Last 7 Days</option>
|
|
<option value="30">Last 30 Days</option>
|
|
<option value="90">Last 90 Days</option>
|
|
<option value="custom">Custom Range</option>
|
|
</select>
|
|
</div>
|
|
{dateRange === 'custom' && (
|
|
<>
|
|
<div>
|
|
<label className="label">Start Date</label>
|
|
<input type="date" className="input" value={startDate} onChange={(e) => setStartDate(e.target.value)} disabled={isLoading} />
|
|
</div>
|
|
<div>
|
|
<label className="label">End Date</label>
|
|
<input type="date" className="input" value={endDate} onChange={(e) => setEndDate(e.target.value)} disabled={isLoading} />
|
|
</div>
|
|
</>
|
|
)}
|
|
<ActionButton icon={Download} variant="secondary" disabled={isLoading} onClick={() => setExportModalOpen(true)}>
|
|
Export
|
|
</ActionButton>
|
|
</div>
|
|
{isLoading && <p className="text-xs text-muted-foreground mt-2">Loading…</p>}
|
|
</div>
|
|
|
|
{/* Key Metrics */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{/* Total Revenue */}
|
|
<div className="card flex flex-col gap-1">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Total Revenue</p>
|
|
<div className="rounded-lg bg-amber-100 dark:bg-amber-900/30 p-1.5">
|
|
<Banknote className="h-4 w-4 text-amber-600 dark:text-amber-400" />
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400 tabular-nums mt-1">
|
|
{statsLoading ? '—' : formatCurrency(overallGrand, 'ETB')}
|
|
</p>
|
|
<div className="flex flex-col gap-1 border-t border-border pt-2 mt-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-muted-foreground">Regular</span>
|
|
<span className="font-semibold tabular-nums">{statsLoading ? '—' : formatCurrency(normalGrand, 'ETB')}</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-muted-foreground">Package</span>
|
|
<span className="font-semibold tabular-nums">{statsLoading ? '—' : formatCurrency(packageGrand, 'ETB')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Total Bookings */}
|
|
<div className="card flex flex-col gap-1">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Total Bookings</p>
|
|
<div className="rounded-lg bg-blue-100 dark:bg-blue-900/30 p-1.5">
|
|
<BookOpen className="h-4 w-4 text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold tabular-nums mt-1">
|
|
{statsLoading ? '—' : (stats?.totalBookings ?? 0).toLocaleString()}
|
|
</p>
|
|
<div className="flex flex-col gap-1 border-t border-border pt-2 mt-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-muted-foreground">Regular</span>
|
|
<span className="font-semibold tabular-nums">{statsLoading ? '—' : (stats?.totalNormalBookings ?? 0).toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-muted-foreground">Package</span>
|
|
<span className="font-semibold tabular-nums">{statsLoading ? '—' : (stats?.totalPackageBookings ?? 0).toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Total Tickets */}
|
|
<div className="card flex flex-col gap-1">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Total Tickets</p>
|
|
<div className="rounded-lg bg-emerald-100 dark:bg-emerald-900/30 p-1.5">
|
|
<Ticket className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold tabular-nums mt-1">
|
|
{statsLoading ? '—' : (stats?.totalTickets ?? 0).toLocaleString()}
|
|
</p>
|
|
<div className="flex flex-col gap-1 border-t border-border pt-2 mt-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-muted-foreground">Regular</span>
|
|
<span className="font-semibold tabular-nums">{statsLoading ? '—' : (stats?.totalNormalTickets ?? 0).toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-muted-foreground">Package</span>
|
|
<span className="font-semibold tabular-nums">{statsLoading ? '—' : (stats?.totalPackageTickets ?? 0).toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Avg Daily Revenue */}
|
|
<div className="card flex flex-col gap-1">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Avg. Daily Revenue</p>
|
|
<div className="rounded-lg bg-purple-100 dark:bg-purple-900/30 p-1.5">
|
|
<TrendingUp className="h-4 w-4 text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold tabular-nums mt-1">
|
|
{isLoading ? '—' : formatCurrency(avgDailyRevenue * 100, 'ETB')}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-auto pt-2 border-t border-border">
|
|
Over {chartData.length} active day{chartData.length !== 1 ? 's' : ''} in range
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Revenue Breakdown by Currency */}
|
|
<div className="card">
|
|
<h2 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground mb-4">
|
|
Revenue Breakdown — Confirmed Tickets
|
|
</h2>
|
|
{statsLoading ? (
|
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
|
) : !normalRows.length && !packageRows.length ? (
|
|
<p className="text-sm text-muted-foreground">No revenue data yet.</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{/* Regular */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Regular</span>
|
|
<span className="text-xs text-muted-foreground tabular-nums">
|
|
{(stats?.totalNormalBookings ?? 0).toLocaleString()} bookings · {(stats?.totalNormalTickets ?? 0).toLocaleString()} tickets
|
|
</span>
|
|
</div>
|
|
{normalRows.length === 0
|
|
? <p className="text-xs text-muted-foreground py-1">No revenue yet</p>
|
|
: normalRows.map(renderCurrencyRow)}
|
|
{normalRows.length > 0 && (
|
|
<div className="flex items-center justify-between rounded-md bg-muted/40 px-3 py-2 mt-1">
|
|
<span className="text-xs font-semibold text-muted-foreground">Subtotal</span>
|
|
<span className="text-sm font-bold tabular-nums">{formatCurrency(normalGrand, 'ETB')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Package */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Package</span>
|
|
<span className="text-xs text-muted-foreground tabular-nums">
|
|
{(stats?.totalPackageBookings ?? 0).toLocaleString()} bookings · {(stats?.totalPackageTickets ?? 0).toLocaleString()} tickets
|
|
</span>
|
|
</div>
|
|
{packageRows.length === 0
|
|
? <p className="text-xs text-muted-foreground py-1">No revenue yet</p>
|
|
: packageRows.map(renderCurrencyRow)}
|
|
{packageRows.length > 0 && (
|
|
<div className="flex items-center justify-between rounded-md bg-muted/40 px-3 py-2 mt-1">
|
|
<span className="text-xs font-semibold text-muted-foreground">Subtotal</span>
|
|
<span className="text-sm font-bold tabular-nums">{formatCurrency(packageGrand, 'ETB')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!statsLoading && (normalRows.length > 0 || packageRows.length > 0) && (
|
|
<div className="flex items-center justify-between rounded-lg border border-border bg-muted/30 px-4 py-3 mt-4">
|
|
<span className="text-sm font-semibold text-muted-foreground">Grand Total (ETB equivalent)</span>
|
|
<span className="text-lg font-bold text-emerald-600 dark:text-emerald-400 tabular-nums">
|
|
{formatCurrency(overallGrand, 'ETB')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Charts */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Revenue Trend */}
|
|
<div className="card">
|
|
<h3 className="text-base font-semibold mb-4">
|
|
Revenue Trend{' '}
|
|
<span className="text-xs font-normal text-muted-foreground">(confirmed, ETB)</span>
|
|
</h3>
|
|
{chartData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<LineChart data={chartData}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
|
<XAxis dataKey="date" tick={{ fontSize: 11 }} />
|
|
<YAxis tick={{ fontSize: 11 }} />
|
|
<Tooltip formatter={(value: number) => [`ETB ${Math.round(value).toLocaleString()}`, 'Revenue']} />
|
|
<Legend />
|
|
<Line type="monotone" dataKey="revenue" stroke="#10b981" dot={{ r: 4 }} activeDot={{ r: 6 }} strokeWidth={2} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="h-[280px] flex items-center justify-center text-muted-foreground text-sm">
|
|
No data for selected range
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Daily Confirmed Bookings */}
|
|
<div className="card">
|
|
<h3 className="text-base font-semibold mb-4">Daily Confirmed Bookings</h3>
|
|
{chartData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<BarChart data={chartData}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
|
<XAxis dataKey="date" tick={{ fontSize: 11 }} />
|
|
<YAxis tick={{ fontSize: 11 }} />
|
|
<Tooltip />
|
|
<Bar dataKey="bookings" fill="#3b82f6" radius={[3, 3, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="h-[280px] flex items-center justify-center text-muted-foreground text-sm">
|
|
No data for selected range
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Booking Status Distribution */}
|
|
<div className="card">
|
|
<h3 className="text-base font-semibold mb-4">Booking Status Distribution</h3>
|
|
{bookings.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<PieChart>
|
|
<Pie
|
|
data={[
|
|
{ name: 'Confirmed', value: bookings.filter((b: any) => b.status === 'CONFIRMED').length },
|
|
{ name: 'Boarded', value: bookings.filter((b: any) => b.status === 'BOARDED').length },
|
|
{ name: 'Cancelled', value: bookings.filter((b: any) => b.status === 'CANCELLED').length },
|
|
{ name: 'Other', value: bookings.filter((b: any) => !['CONFIRMED', 'BOARDED', 'CANCELLED'].includes(b.status)).length },
|
|
].filter(d => d.value > 0)}
|
|
cx="50%" cy="50%"
|
|
labelLine={false}
|
|
label={({ name, value }) => `${name}: ${value}`}
|
|
outerRadius={100}
|
|
dataKey="value"
|
|
>
|
|
{STATUS_COLORS.map((color, idx) => <Cell key={idx} fill={color} />)}
|
|
</Pie>
|
|
<Tooltip />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="h-[280px] flex items-center justify-center text-muted-foreground text-sm">
|
|
No data for selected range
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Payment Methods */}
|
|
<div className="card">
|
|
<h3 className="text-base font-semibold mb-4">Payment Methods</h3>
|
|
{bookings.length > 0 ? (
|
|
<div className="space-y-3 pt-1">
|
|
{(Object.entries(
|
|
bookings.reduce((acc: Record<string, number>, b: any) => {
|
|
const method = b.paymentIntent?.method || 'Unknown';
|
|
acc[method] = (acc[method] || 0) + 1;
|
|
return acc;
|
|
}, {} as Record<string, number>)
|
|
) as [string, number][])
|
|
.sort(([, a], [, b]) => b - a)
|
|
.slice(0, 6)
|
|
.map(([method, count]) => {
|
|
const pct = bookings.length > 0 ? Math.round((count / bookings.length) * 100) : 0;
|
|
return (
|
|
<div key={method} className="flex items-center gap-3">
|
|
<span className="text-sm w-32 shrink-0 capitalize">{method.toLowerCase().replace(/_/g, ' ')}</span>
|
|
<div className="flex-1 bg-muted rounded-full h-2">
|
|
<div className="bg-primary h-2 rounded-full" style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<span className="text-sm font-semibold tabular-nums w-8 text-right">{count}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="h-[280px] flex items-center justify-center text-muted-foreground text-sm">
|
|
No data for selected range
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary */}
|
|
<div className="card">
|
|
<h3 className="text-base font-semibold mb-4">Summary</h3>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
|
|
{[
|
|
{ label: 'Active Days', value: chartData.length, fromStats: false },
|
|
{ label: 'Confirmed', value: bookings.filter((b: any) => b.status === 'CONFIRMED').length, fromStats: false },
|
|
{ label: 'Boarded', value: bookings.filter((b: any) => b.status === 'BOARDED').length, fromStats: false },
|
|
{ label: 'Cancelled', value: bookings.filter((b: any) => b.status === 'CANCELLED').length, fromStats: false },
|
|
{ label: 'Regular Bookings', value: stats?.totalNormalBookings ?? 0, fromStats: true },
|
|
{ label: 'Package Bookings', value: stats?.totalPackageBookings ?? 0, fromStats: true },
|
|
].map(({ label, value, fromStats }) => (
|
|
<div key={label} className="border border-border rounded-lg p-3 text-center">
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="text-xl font-bold mt-1 tabular-nums">
|
|
{fromStats && statsLoading ? '—' : value.toLocaleString()}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Export Modal */}
|
|
<Modal isOpen={exportModalOpen} onClose={() => setExportModalOpen(false)} title="Export Revenue Report" size="sm">
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Exports daily confirmed-booking revenue for the selected date range. Cancelled and refunded bookings are excluded.
|
|
</p>
|
|
<div>
|
|
<p className="text-sm font-medium mb-2">Format</p>
|
|
<div className="flex gap-3">
|
|
{(['csv', 'excel', 'pdf'] as const).map(fmt => (
|
|
<label key={fmt} className="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="reportExportFormat" value={fmt} checked={exportFormat === fmt} onChange={() => setExportFormat(fmt)} className="w-4 h-4" />
|
|
<span className="text-sm font-medium">{fmt === 'excel' ? 'Excel (.xls)' : fmt === 'pdf' ? 'PDF (Print)' : 'CSV'}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 pt-4 border-t">
|
|
<ActionButton variant="secondary" onClick={() => setExportModalOpen(false)}>Cancel</ActionButton>
|
|
<ActionButton onClick={doExport}>Export</ActionButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|