Untitled

	const event = getValues();

	const handleClose = () => onClose(false);

	// For export excel
	const getCellStyle = (textAlign = 'center') => {
		return {
			border: '1px solid #000',
			padding: '4px 8px',
			textAlign: textAlign,
			verticalAlign: 'middle',
		};
	};
	
	const formatNumber = (value) => {
	    if (isNaN(value)) return '';
    
	    // return value = value.toLocaleString('vi-VN');
	    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    };

	const incomeListInit = [
		{
			name: 'Hội viên đóng phí tiền mặt',
			quantity: 0,
			price:
				event.cs_ve?.find((item) => item.loai_ve === 'Hội viên')
					?.gia_ve || 0,
		},
		{
			name: 'Khách mời đóng phí tiền mặt',
			quantity: 0,
			price:
				event.cs_ve?.find((item) => item.loai_ve === 'Khách mời')
					?.gia_ve || 0,
		},
		{
			name: 'Hội viên chuyển khoản',
			quantity: 0,
			price:
				event.cs_ve?.find((item) => item.loai_ve === 'Hội viên')
					?.gia_ve || 0,
		},
		{
			name: 'Khách mời chuyển khoản',
			quantity: 0,
			price:
				event.cs_ve?.find((item) => item.loai_ve === 'Khách mời')
					?.gia_ve || 0,
		},
		{
			name: 'Khách mời free (Diễn giả)',
			quantity: 0,
			price:
				event.cs_ve?.find((item) => item.loai_ve === 'Miễn phí')
					?.gia_ve || 0,
		},
		{
			name: 'Hội viên chưa thu tiền',
			quantity: 0,
			price: 0,
			// event.cs_ve?.find((item) => item.loai_ve === 'Hội viên')
			//     ?.gia_ve || 0,
		},
		{
			name: 'Khách mời chưa thu tiền',
			quantity: 0,
			price: 0,
			// event.cs_ve?.find((item) => item.loai_ve === 'Khách mời')
			//     ?.gia_ve || 0,
		},
	];

	// 0 - Hội viên đóng phí tiền mặt
	// 1 - Khách mời đóng phí tiền mặt
	// 2 - Hội viên chuyển khoản
	// 3 - Khách mời chuyển khoản
	// 4 - Khách mời free (Diễn giả)
	// 5 - Hội viên chưa thu tiền
	// 6 - Khách mời chưa thu tiền
	const incomeList =
		event.ds_tham_gia?.reduce((incomeList, mem) => {
			if (mem.trang_thai_tt === 'Đã thanh toán') {
				if (mem.pt_thanh_toan === 'Tiền mặt') {
					if (mem.loai_ve === 'Hội viên') {
						incomeList[0].quantity += 1;
					} else if (mem.loai_ve === 'Khách mời') {
						incomeList[1].quantity += 1;
					}
				} else if (mem.pt_thanh_toan === 'Chuyển khoản') {
					if (mem.loai_ve === 'Hội viên') {
						incomeList[2].quantity += 1;
					} else if (mem.loai_ve === 'Khách mời') {
						incomeList[3].quantity += 1;
					}
				}
				if (mem.loai_ve === 'Miễn phí') {
					incomeList[4].quantity += 1;
				}
			} else {
				if (mem.loai_ve === 'Hội viên') {
					incomeList[5].quantity += 1;
				} else if (mem.loai_ve === 'Khách mời') {
					incomeList[6].quantity += 1;
				}
			}
			return incomeList;
		}, incomeListInit) || incomeListInit;

	const totalIncome = incomeList.reduce(
		(total, item) => total + item.price * item.quantity,
		0
	);

	const costList =
		event.chi_phi?.map((item) => ({
			name: item.ten_phi,
			quantity: item.so_luong || 1,
			price: item.gia_tri || 0,
		})) || [];

	const totalCost = costList.reduce(
		(total, item) => total + item.price * item.quantity,
		0
	);

	const tableReportRef = useRef(null);

	const { onDownload } = useDownloadExcel({
		currentTableRef: tableReportRef.current,
		filename: `Báo cáo chi tiết sự kiện ${event.ten_su_kien}`,
		sheet: 'Báo cáo',
	});

	const renderListFee = (list, feeType) => {
		return list.map((item, index) => (
			<tr key={index}>
				<td style={getCellStyle()}>
					<b>{index + 1}</b>
				</td>
				{index === 0 && (
					<td
						style={getCellStyle()}
						rowSpan={list.length}
						className="align-middle text-center"
					>
						<b>{feeType}</b>
					</td>
				)}
				<td style={getCellStyle('left')} className="text-start">
					<b>{item.name}</b>
				</td>
				<td style={getCellStyle('right')}>
					<b>{formatNumber(item.quantity)}</b>
				</td>
				<td style={getCellStyle('right')}>
					<b>{formatNumber(item.price / 1000)}</b>
				</td>
				<td style={getCellStyle('right')}>
					<b>{formatNumber((item.quantity * item.price) / 1000)}</b>
				</td>
			</tr>
		));
	};

	const renderTable = () => (
		<table
			className="table table-sm table-light report_detail_modal text-center"
			ref={tableReportRef}
		>
			<thead>
				<tr>
					<th style={getCellStyle()} colSpan={6} className="fs-6">
						<b>BÁO CÁO TÀI CHÍNH</b>
					</th>
				</tr>
				<tr>
					<th style={getCellStyle()} colSpan={6} className="fs-6">
						<b>
							BẢNG KÊ PHÍ SỰ KIỆN{' '}
							{moment(event.ngay_su_kien).format('DD/MM/YYYY')}
						</b>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td
						style={getCellStyle('left')}
						colSpan={3}
						className="text-start"
					>
						<p>
							Mã sự kiện: <b>{event.ma_su_kien}</b>
							<br />
							Tên sự kiện: <b>{event.ten_su_kien}</b>
							<br />
							Người lập báo cáo: <b>{event.name_user_created}</b>
							<br />
							Người xác nhận: <b>{event.ten_partner}</b>
						</p>
					</td>
					<td
						style={getCellStyle()}
						colSpan={3}
						className="align-middle"
					>
						{moment(event.ngay_su_kien)
							.locale('vi')
							.format('[Ngày] LL')}
					</td>
				</tr>

				<tr>
					<td style={getCellStyle()}>
						<b>STT</b>
					</td>
					<td style={getCellStyle()}>
						<b>THU/CHI</b>
					</td>
					<td style={getCellStyle()}>
						<b>HẠNG MỤC</b>
					</td>

					<td style={getCellStyle()}>
						<b>SỐ LƯỢNG</b>
					</td>
					<td style={getCellStyle()}>
						<b>
							ĐƠN GIÁ <br /> (1.000 VNĐ)
						</b>
					</td>
					<td style={getCellStyle()}>
						<b>
							THÀNH TIỀN <br />
							(1.000 VNĐ)
						</b>
					</td>
				</tr>

				{renderListFee(incomeList, 'THU')}

				<tr>
					<td style={getCellStyle()} colSpan={5}>
						<b>TỔNG CỘNG THU (1)</b>
					</td>
					<td style={getCellStyle('right')}>
						<b>{formatNumber(totalIncome / 1000)}</b>
					</td>
				</tr>

				{renderListFee(costList, 'CHI')}

				<tr>
					<td style={getCellStyle()} colSpan={5}>
						<b>TỔNG CỘNG CHI (2)</b>
					</td>
					<td style={getCellStyle('right')}>
						<b>{formatNumber(totalCost / 1000)}</b>
					</td>
				</tr>

				<tr>
					<td style={getCellStyle()} colSpan={5} className="fs-6">
						<b>LỢI NHUẬN = (1) - (2)</b>
					</td>
					<td style={getCellStyle('right')} className="fs-6">
						<b>{formatNumber((totalIncome - totalCost) / 1000)}</b>
					</td>
				</tr>
			</tbody>
		</table>
	);