diff --git a/frontend/src/components/ExpenseManager.tsx b/frontend/src/components/ExpenseManager.tsx
index 480539f..00df8ce 100644
--- a/frontend/src/components/ExpenseManager.tsx
+++ b/frontend/src/components/ExpenseManager.tsx
@@ -1,73 +1,297 @@
import React, { useState, useMemo } from 'react';
-import { Wallet, Users, Info } from 'lucide-react';
+import { Wallet, Users, Info, PieChart, Tag, Calendar, User, FileText, TrendingUp, BarChart3 } from 'lucide-react';
import { useTourStore } from '@/store/useTourStore';
+import { format, parseISO } from 'date-fns';
export const ExpenseManager = () => {
- const { legs } = useTourStore();
- const [adults, setAdults] = useState(2);
- const [children, setChildren] = useState(1);
- const [discount, setDiscount] = useState(30);
+ const { legs, currentTour } = useTourStore();
- const totals = useMemo(() => {
- const totalAmount = legs.reduce((acc, leg) =>
- acc + leg.expenses.reduce((lAcc: number, exp: any) => lAcc + Number(exp.amount), 0), 0
- );
+ const adults = currentTour?.adultCount ?? 1;
+ const children = currentTour?.childCount ?? 0;
+ const discount = currentTour?.childDiscount ?? 0;
- const childRateFactor = 1 - (discount / 100);
+ const stats = useMemo(() => {
+ const categoryMap: Record
= {
+ ACCOMMODATION: 0,
+ FOOD: 0,
+ TRANSPORT: 0,
+ TICKET: 0,
+ OTHER: 0
+ };
+ const legMap: Record = {};
+ const memberMap: Record = {};
+ let totalAmount = 0;
+ let totalCount = 0;
+
+ (legs || []).forEach(leg => {
+ let legTotal = 0;
+ (leg.expenses || []).forEach((exp: any) => {
+ const amt = Number(exp.amount);
+ totalAmount += amt;
+ legTotal += amt;
+ totalCount += 1;
+
+ const memberName = exp.paidBy?.name || 'Chưa rõ';
+ memberMap[memberName] = (memberMap[memberName] || 0) + amt;
+
+ if (categoryMap[exp.category] !== undefined) {
+ categoryMap[exp.category] += amt;
+ } else {
+ categoryMap.OTHER += amt;
+ }
+ });
+ legMap[leg.sequence] = legTotal;
+ });
+
+ // Tìm hạng mục tốn nhất
+ const maxCat = Object.entries(categoryMap).reduce((a, b) => b[1] > a[1] ? b : a);
+
+ // Tìm chặng tốn nhất
+ const maxLegEntry = Object.entries(legMap).length > 0
+ ? Object.entries(legMap).reduce((a, b) => b[1] > a[1] ? b : a)
+ : [null, 0];
+
+ const avgPerLeg = legs.length > 0 ? totalAmount / legs.length : 0;
+
+ // Danh sách phẳng tất cả chi phí để hiển thị bảng
+ const flatExpenses = (legs || []).flatMap(leg =>
+ (leg.expenses || []).map((exp: any) => ({
+ ...exp,
+ legSequence: leg.sequence,
+ // Lấy ngày của Location nếu có, nếu không lấy ngày của Leg
+ date: exp.location?.plannedStart || leg.startDate || null
+ }))
+ ).sort((a, b) => {
+ if (!a.date || !b.date) return 0;
+ return new Date(a.date).getTime() - new Date(b.date).getTime();
+ });
+
+ const childRateFactor = 1 - (Number(discount) / 100);
const weightedCount = adults + (children * childRateFactor);
const adultPrice = totalAmount / weightedCount;
const childPrice = adultPrice * childRateFactor;
return {
total: totalAmount,
+ count: totalCount,
adultPrice: Math.round(adultPrice),
- childPrice: Math.round(childPrice)
+ childPrice: Math.round(childPrice),
+ categories: categoryMap,
+ list: flatExpenses,
+ topCategory: maxCat[0],
+ topLeg: maxLegEntry[0],
+ avgPerLeg,
+ memberStats: Object.entries(memberMap)
};
}, [legs, adults, children, discount]);
+ const categoryLabels: Record = {
+ ACCOMMODATION: { label: 'Chỗ ở', color: 'bg-blue-500' },
+ FOOD: { label: 'Ăn uống', color: 'bg-orange-500' },
+ TRANSPORT: { label: 'Di chuyển', color: 'bg-indigo-500' },
+ TICKET: { label: 'Vé tham quan', color: 'bg-green-500' },
+ OTHER: { label: 'Khác', color: 'bg-gray-400' }
+ };
+
return (
-
-
-
-
Cấu hình thành viên
-
-
-
-
Tổng chi phí chuyến đi
-
{totals.total.toLocaleString()} VND
+
{stats.total.toLocaleString()} VND
+
{stats.count} hóa đơn đã ghi nhận
Mỗi người lớn
-
{totals.adultPrice.toLocaleString()}đ
+
{stats.adultPrice.toLocaleString()}đ
Mỗi trẻ em (-{discount}%)
-
{totals.childPrice.toLocaleString()}đ
+
{stats.childPrice.toLocaleString()}đ
+
+ {/* Các thẻ chỉ số nhanh */}
+
+
+
+
+
+
+
Hạng mục cao nhất
+
{categoryLabels[stats.topCategory]?.label || 'Chưa có'}
+
+
+
+
+
+
+
+
Trung bình / Chặng
+
{Math.round(stats.avgPerLeg).toLocaleString()}đ
+
+
+
+
+
+
+
+
Chặng tốn kém nhất
+
{stats.topLeg ? `Chặng ${stats.topLeg}` : 'Chưa có'}
+
+
+
+
+ {/* Thống kê theo thành viên */}
+
+
+
+
Thống kê theo người chi trả
+
+
+ {stats.memberStats.length > 0 ? stats.memberStats.map(([name, amount]) => {
+ const percentage = stats.total > 0 ? (amount / stats.total) * 100 : 0;
+ return (
+
+
+
+ {name.charAt(0)}
+
+
{name}
+
+
+
{amount.toLocaleString()}đ
+
{percentage.toFixed(1)}% tổng chi
+
+
+ );
+ }) : (
+
+ Chưa có thông tin chi trả của thành viên.
+
+ )}
+
+
+
+ {/* Thống kê theo hạng mục */}
+
+
+
+ {stats.total > 0 ? Object.entries(stats.categories).map(([key, value]) => {
+ const percentage = stats.total > 0 ? (value / stats.total) * 100 : 0;
+ if (value === 0) return null;
+ return (
+
+
+
+
+ {categoryLabels[key].label}
+
+
{value.toLocaleString()}đ ({percentage.toFixed(1)}%)
+
+
+
+ );
+ }) : (
+
+ Chưa có dữ liệu phân tích theo hạng mục.
+
+ )}
+
+
+ {/* Bảng thống kê chi tiết chi phí */}
+
+
+
+
Bảng kê chi tiết các khoản chi
+
+
+
+
+
+
+ | STT |
+ Ngày giờ |
+ Chặng |
+ Dịch vụ sử dụng |
+ Số tiền |
+ Người đã trả |
+ Ghi chú |
+
+
+
+ {stats.list.length > 0 ? (
+ stats.list.map((exp: any, index: number) => (
+
+ | {index + 1} |
+
+
+
+ {exp.date ? format(new Date(exp.date), 'dd/MM HH:mm') : '--/--'}
+
+ |
+
+
+ Chặng {exp.legSequence}
+
+ |
+
+ {exp.description || 'Không có mô tả'}
+ |
+
+ {Number(exp.amount).toLocaleString()}đ
+ |
+
+
+
+ {exp.paidBy?.name || 'Chưa rõ'}
+
+ |
+
+ {exp.note || '-'}
+ |
+
+ ))
+ ) : (
+ // Khung bảng mẫu khi chưa có dữ liệu (Placeholder)
+ [1, 2, 3].map((i) => (
+
+ | {i} |
+
+
+ --/-- --:--
+
+ |
+
+ Chặng -
+ |
+ Ví dụ: Vé tham quan, Tiền ăn trưa... |
+ 0đ |
+
+
+ Chưa có dữ liệu
+
+ |
+ - |
+
+ ))
+ )}
+
+
+
+
+
Chi phí được tự động tính toán dựa trên hóa đơn của các chặng.
diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index f999c4d..5388e6e 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -539,12 +539,15 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
{/* Financial Quick-View Widget or Quote */}
-
+
hasFinanceAccess && setActiveTab('expense')}
+ className={`rounded-3xl p-6 shadow-2xl transition-all duration-500 ${hasFinanceAccess ? 'bg-indigo-600 text-white shadow-indigo-200 cursor-pointer hover:scale-[1.02] active:scale-95' : 'bg-white text-gray-600 border border-gray-100'}`}
+ >
{hasFinanceAccess ? (
<>
-
Tổng chi tiêu hiện tại
+
Tổng chi tiêu hiện tại (Nhấn để xem chi tiết)
{tourInfo.budget}