77 lines
3.5 KiB
TypeScript
77 lines
3.5 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { Wallet, Users, Info } from 'lucide-react';
|
|
import { useTourStore } from './useTourStore.js';
|
|
|
|
export const ExpenseManager = () => {
|
|
const { legs } = useTourStore();
|
|
const [adults, setAdults] = useState(2);
|
|
const [children, setChildren] = useState(1);
|
|
const [discount, setDiscount] = useState(30);
|
|
|
|
const totals = useMemo(() => {
|
|
const totalAmount = legs.reduce((acc, leg) =>
|
|
acc + leg.expenses.reduce((lAcc: number, exp: any) => lAcc + Number(exp.amount), 0), 0
|
|
);
|
|
|
|
const childRateFactor = 1 - (discount / 100);
|
|
const weightedCount = adults + (children * childRateFactor);
|
|
const adultPrice = totalAmount / weightedCount;
|
|
const childPrice = adultPrice * childRateFactor;
|
|
|
|
return {
|
|
total: totalAmount,
|
|
adultPrice: Math.round(adultPrice),
|
|
childPrice: Math.round(childPrice)
|
|
};
|
|
}, [legs, adults, children, discount]);
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
|
|
<div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
|
<div className="flex items-center gap-2 mb-6 text-blue-600">
|
|
<Users className="w-5 h-5" />
|
|
<h3 className="font-bold">Cấu hình thành viên</h3>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">Người lớn</label>
|
|
<input type="number" value={adults} onChange={e => setAdults(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">Trẻ em</label>
|
|
<input type="number" value={children} onChange={e => setChildren(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">Giảm trẻ em (%)</label>
|
|
<input type="number" value={discount} onChange={e => setDiscount(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-blue-600 rounded-2xl p-6 text-white shadow-lg shadow-blue-200">
|
|
<div className="flex justify-between items-start mb-8">
|
|
<div>
|
|
<p className="text-blue-100 text-sm">Tổng chi phí chuyến đi</p>
|
|
<h2 className="text-3xl font-bold mt-1">{totals.total.toLocaleString()} VND</h2>
|
|
</div>
|
|
<Wallet className="w-8 h-8 opacity-20" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4 border-t border-blue-500 pt-6">
|
|
<div>
|
|
<p className="text-blue-100 text-xs uppercase tracking-wider font-semibold">Mỗi người lớn</p>
|
|
<p className="text-xl font-bold">{totals.adultPrice.toLocaleString()}đ</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-blue-100 text-xs uppercase tracking-wider font-semibold">Mỗi trẻ em (-{discount}%)</p>
|
|
<p className="text-xl font-bold">{totals.childPrice.toLocaleString()}đ</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-gray-400 text-xs px-2">
|
|
<Info className="w-4 h-4" />
|
|
<p>Chi phí được tự động tính toán dựa trên hóa đơn của các chặng.</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |