GHHub/src/views/report/Index.jsx

import { useEffect } from "react";
import { observer } from "mobx-react";
import { Row, Col, Space, Button, Table, Divider, Typography, DatePicker } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";
import * as comm from "@/utils/commons";
import { usePDF } from "react-to-pdf";

function Index() {
	const { reportStore, authStore } = useStore();
	const { search_date_start, search_date_end, vendorScoresData, productScoresData, commendScoresData } = reportStore;
	const evaluationScores = vendorScoresData.EvaluationScores ? vendorScoresData.EvaluationScores[0] : [];
	useEffect(() => {}, []);

	const columns_month = [
		{
			title: "Date",
			dataIndex: "VMonth",
			key: "VMonth",
		},
		{
			title: "Groups",
			dataIndex: "Groups",
			key: "Groups",
		},
		{
			title: "Number of People",
			dataIndex: "PersonNum",
			key: "PersonNum",
		},
		{
			title: "Transaction Amount（USD)",
			dataIndex: "AmountUSD",
			key: "AmountUSD",
			render: value => comm.formatPrice(value),
		},
		{
			title: "Evaluation Score",
			dataIndex: "EvaluationScore",
			key: "EvaluationScore",
		},
		{
			title: "TP Reviews",
			dataIndex: "TPReviews",
			key: "TPReviews",
		},
		{
			title: "TP Reviews Rate",
			dataIndex: "TPReviewRate",
			key: "TPReviewRate",
			render: value => comm.formatPercent(value),
		},
		{
			title: "Complaints",
			dataIndex: "Complaints",
			key: "Complaints",
		},
		{
			title: "Complaint Rate",
			dataIndex: "ComplaintRate",
			key: "ComplaintRate",
			render: value => comm.formatPercent(value),
		},
	];

	const columns_guide = [
		{
			title: "Name",
			dataIndex: "TGI2_Name",
			key: "TGI2_Name",
		},
		{
			title: "Average Scores",
			dataIndex: "VAverage",
			key: "VAverage",
		},
		{
			title: "Group Numbers",
			dataIndex: "ReceptionGroups",
			key: "ReceptionGroups",
		},
		{
			title: "TP Reviews",
			dataIndex: "CommendNum",
			key: "CommendNum",
		},
		{
			title: "TP Review Rate",
			dataIndex: "CommendRate",
			key: "CommendRate",
			render: value => comm.formatPercent(value),
		},
		{
			title: "Complaints",
			dataIndex: "Complaints",
			key: "Complaints",
		},
		{
			title: "Complaint Rate",
			dataIndex: "ComplaintRate",
			key: "ComplaintRate",
			render: value => comm.formatPercent(value),
		},
	];

	const columns_commend = [
		{
			title: "Reference Number",
			dataIndex: "GRI_No",
			key: "GRI_No",
		},
		{
			title: "Tour Guides",
			dataIndex: "ObjectName",
			key: "ObjectName",
		},
		{
			title: "Essential Comments",
			dataIndex: "ECI_Content",
			key: "ECI_Content",
		},
	];

	const { toPDF, targetRef } = usePDF({
		method: "save",
		filename: "GHH-Report.pdf",
		page: { margin: "3", format: "letter" }, //margin: Margin.SMALL,
		canvas: { mimeType: "image/jpeg", qualityRatio: 1 },
		overrides: { pdf: { compress: true }, canvas: { useCORS: true } },
	});

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Typography.Title level={3}></Typography.Title>
			<Row gutter={16}>
				<Col md={24} lg={8} xxl={6}>
					<Space direction="horizontal">
						Select Date
						<DatePicker.RangePicker
							format={config.DATE_FORMAT_MONTH}
							allowClear={true}
							style={{ width: "100%" }}
							defaultValue={[search_date_start, search_date_end]}
							onChange={reportStore.onDateRangeChange}
							allowEmpty={true}
							picker="month"
						/>
					</Space>
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<Button
						type="primary"
						loading={reportStore.loading}
						onClick={() => {
							reportStore.getHWVendorScores(
								authStore.login.travelAgencyId,
								search_date_start == null ? null : search_date_start.format(config.DATE_FORMAT),
								search_date_end == null ? null : search_date_end.format(config.DATE_FORMAT)
							);
							reportStore.getHWProductScores(
								authStore.login.travelAgencyId,
								search_date_start == null ? null : search_date_start.format(config.DATE_FORMAT),
								search_date_end == null ? null : search_date_end.format(config.DATE_FORMAT)
							);
							reportStore.getHWCommendScores(
								authStore.login.travelAgencyId,
								search_date_start == null ? null : search_date_start.format(config.DATE_FORMAT),
								search_date_end == null ? null : search_date_end.format(config.DATE_FORMAT)
							);
						}}>
						Get Report
					</Button>
				</Col>
				<Col md={24} lg={10} xxl={11}>
					<Button onClick={() => toPDF()}>Download PDF</Button>
				</Col>
			</Row>
			<Typography.Title level={3}></Typography.Title>

			<Row ref={targetRef}>
				<Col md={24} lg={24} xxl={16}>
					<Divider orientation="center">
						<Typography.Title level={3} type="success">Primary Data</Typography.Title>
					</Divider>
					<div className="ant-table-wrapper ant-spin-nested-loading css-1x2egda css-dev-only-do-not-override-1x2egda ">
						<div className="ant-spin-container ant-table ant-table-bordered">
							<div className="ant-table-container">
								<div className="ant-table-content">
									<table style={{ textAlign: "center" }}>
										<thead className="ant-table-thead">
											<tr>
												<th scope="col">Groups</th>
												<th scope="col">Number of People</th>
												<th scope="col">Transaction Amount (USD)</th>
												<th scope="col">Evaluation Score</th>
												<th scope="col">TP Reviews</th>
												<th scope="col">TP Reviews Rate</th>
												<th scope="col">Complaints</th>
												<th scope="col">Complaint Rate</th>
											</tr>
										</thead>
										<tbody className="ant-table-tbody">
											<tr className="ant-table-row ant-table-row-level-0">
												<td>{evaluationScores.Groups}</td>
												<td>{evaluationScores.PersonNum}</td>
												<td>{comm.formatPrice(evaluationScores.AmountUSD)}</td>
												<td>{evaluationScores.EvaluationScore}</td>
												<td>{evaluationScores.TPReviews}</td>
												<td>{comm.formatPercent(evaluationScores.TPReviewRate)}</td>
												<td>{evaluationScores.Complaints}</td>
												<td>{comm.formatPercent(evaluationScores.ComplaintRate)}</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</Col>

				<Col md={24} lg={24} xxl={16}>
					<Divider orientation="center">
						<Typography.Title level={3} type="success">Monthly Data</Typography.Title>
					</Divider>
					<Table dataSource={vendorScoresData.MonthlyData} columns={columns_month} pagination={false} bordered />
				</Col>

				<Col md={24} lg={24} xxl={16}>
					<Divider orientation="center">
						<Typography.Title level={3} type="success">DMC Assessment Criteria</Typography.Title>
					</Divider>
					<div className="ant-table-wrapper ant-spin-nested-loading css-1x2egda css-dev-only-do-not-override-1x2egda">
						<div className="ant-spin-container ant-table ant-table-bordered">
							<div className="ant-table-container">
								<div className="ant-table-content">
									<table style={{ textAlign: "center" }}>
										<thead className="ant-table-thead">
											<tr>
												<th scope="col">Customer Satisfaction</th>
												<th scope="col">3 scores</th>
												<th scope="col">4 scores</th>
												<th scope="col">5 scores</th>
												<th scope="col">Your Scores</th>
												<th scope="col">Final Scores</th>
												<th scope="col">Note</th>
											</tr>
										</thead>
										<tbody className="ant-table-tbody">
											<tr className="ant-table-row ant-table-row-level-0">
												<td>TP review rating</td>
												<td>\</td>
												<td>30%</td>
												<td>60%</td>
												<td>{evaluationScores.TPReviewRating}</td>
												<td rowSpan="5">{evaluationScores.AvgCusSatisfaction}</td>
												<td>{evaluationScores.TPReviewRatingText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Post tour complaints</td>
												<td>1</td>
												<td>0</td>
												<td>0</td>
												<td>{evaluationScores.PostTourComplaints}</td>
												<td>{evaluationScores.PostTourComplaintsText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Complaints resolved during the tour</td>
												<td colSpan={3}>3</td>
												<td>{evaluationScores.ComplaintsDuringTour}</td>
												<td>{evaluationScores.ComplaintsDuringTourText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Customer photos</td>
												<td>\</td>
												<td>30%</td>
												<td>50%</td>
												<td>{evaluationScores.CustomerPhotoRate}</td>
												<td>{evaluationScores.CustomerPhotoRateText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Evaluation scores</td>
												<td colSpan={3}>4.5</td>
												<td>{evaluationScores.EvaluationFormScore}</td>
												<td>{evaluationScores.EvaluationFormScoreText}</td>
											</tr>
										</tbody>
									</table>
									<br />
									<table style={{ textAlign: "center" }}>
										<thead className="ant-table-thead">
											<tr>
												<th scope="col">Operator Support & Local resources</th>
												<th scope="col">3 scores</th>
												<th scope="col">4 scores</th>
												<th scope="col">5 scores</th>
												<th scope="col">Your Scores</th>
												<th scope="col">Final Scores</th>
												<th scope="col">Note</th>
											</tr>
										</thead>
										<tbody className="ant-table-tbody">
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Response efficiency</td>
												<td>1d</td>
												<td>6hrs</td>
												<td>3hrs</td>
												<td>{evaluationScores.ResponseEfficiency}</td>
												<td rowSpan="6">{evaluationScores.AvgLocalResources}</td>
												<td>{evaluationScores.ResponseEfficiencyText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Provide suggestions and alternatives</td>
												<td>\</td>
												<td>√</td>
												<td>√</td>
												<td>{evaluationScores.ProvideSuggestions}</td>
												<td>{evaluationScores.ProvideSuggestionsText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Provide local tourism information</td>
												<td>\</td>
												<td>√</td>
												<td>√</td>
												<td>{evaluationScores.ProvideLocalInfo}</td>
												<td>{evaluationScores.ProvideLocalInfoText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Assist in developing exclusive products</td>
												<td>\</td>
												<td>\</td>
												<td>√</td>
												<td>{evaluationScores.ExclusiveProducts}</td>
												<td>{evaluationScores.ExclusiveProductsText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Dedicated tour guide team for AH</td>
												<td>\</td>
												<td>√</td>
												<td>√</td>
												<td>{evaluationScores.DedicatedTourGuide}</td>
												<td>{evaluationScores.DedicatedTourGuideText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Partner hotels with contracted rate</td>
												<td>\</td>
												<td>√</td>
												<td>√</td>
												<td>{evaluationScores.PartnerHotels}</td>
												<td>{evaluationScores.PartnerHotelsText}</td>
											</tr>
										</tbody>
									</table>
									<br />
									<table style={{ textAlign: "center" }}>
										<thead className="ant-table-thead">
											<tr>
												<th scope="col">Pricing & Settlement （20%）</th>
												<th scope="col">3 scores</th>
												<th scope="col">4 scores</th>
												<th scope="col">5 scores</th>
												<th scope="col">Your Scores</th>
												<th scope="col">Final Scores</th>
												<th scope="col">Note</th>
											</tr>
										</thead>
										<tbody className="ant-table-tbody">
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Quotation</td>
												<td>Package</td>
												<td>Day tours</td>
												<td>Individual services</td>
												<td>{evaluationScores.Quotation}</td>
												<td rowSpan="3">{evaluationScores.AvgPricingAndSettlement}</td>
												<td>{evaluationScores.QuotationText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Settlement</td>
												<td>Prepayment</td>
												<td>Monthly Prepayment</td>
												<td>Monthly settlement after the tours</td>
												<td>{evaluationScores.Settlement}</td>
												<td>{evaluationScores.SettlementText}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Cancellation policy</td>
												<td>30 days</td>
												<td>21 days</td>
												<td>1 day</td>
												<td>{evaluationScores.CancellationPolicy}</td>
												<td>{evaluationScores.CancellationPolicyText}</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<Divider orientation="right">
						<Typography.Title level={3} type="danger">
							Final Scores: {evaluationScores.FinalScores}
						</Typography.Title>
					</Divider>
					<br />
					<Typography>
						<Typography.Title level={3} type="success">
							Scoring Rules
						</Typography.Title>
						<Typography.Paragraph type="success">
							<ol>
								<li>The maximum score is 5</li>
								<li>
									The three categories are:
									<ul>
										<li>Customer satisfaction (40%)</li>
										<li>Operator support & local resources (40%)</li>
										<li>Pricing & settlement (20%)</li>
									</ul>
								</li>
								<li>For each category, you can only get the corresponding score if you meet the standards of all items under the score.</li>
								<li>The final score is the sum of the scores of each category multiplied by the proportion of the category.</li>
							</ol>
						</Typography.Paragraph>
					</Typography>

					<br />
					<Divider orientation="center">
						<Typography.Title level={3} type="success">Evaluation Scores</Typography.Title>
					</Divider>
					<div className="ant-table-wrapper ant-spin-nested-loading css-1x2egda css-dev-only-do-not-override-1x2egda ">
						<div className="ant-spin-container ant-table ant-table-bordered">
							<div className="ant-table-container">
								<div className="ant-table-content">
									<table style={{ textAlign: "center" }}>
										<thead className="ant-table-thead">
											<tr>
												<th scope="col">Category</th>
												<th scope="col">Item</th>
												<th scope="col">Your Scores</th>
												<th scope="col">Note</th>
											</tr>
										</thead>
										<tbody className="ant-table-tbody">
											<tr className="ant-table-row ant-table-row-level-0">
												<td rowSpan="4">DMC Services</td>
												<td>Guide</td>
												<td>{evaluationScores.FRTGuide}</td>
												<td rowSpan="7">{evaluationScores.FRTText}</td>
											</tr>

											<tr className="ant-table-row ant-table-row-level-0">
												<td>Driver & Vehicle</td>
												<td>{evaluationScores.FRTGriver}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Food Arrangement</td>
												<td>{evaluationScores.FRTMeal}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Activity</td>
												<td>{evaluationScores.FRTProduct}</td>
											</tr>

											<tr className="ant-table-row ant-table-row-level-0">
												<td rowSpan="2">Itinerary Arrangements</td>
												<td>Hotel</td>
												<td>{evaluationScores.FRTHotel}</td>
											</tr>
											<tr className="ant-table-row ant-table-row-level-0">
												<td>Travel Advisor&rsquo;s Planning</td>
												<td>{evaluationScores.FRTAdvisor}</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</Col>
				<Col md={24} lg={24} xxl={16}>
					<Divider orientation="center">
						<Typography.Title level={3} type="success">Tour Guides Performence</Typography.Title>
					</Divider>
					<Table dataSource={productScoresData.GuideScores} columns={columns_guide} pagination={false} bordered />

					<Divider orientation="center">
						<Typography.Title level={3} type="success">TP Reviews</Typography.Title>
					</Divider>
					<Table dataSource={commendScoresData.CommendScores} columns={columns_commend} pagination={false} bordered />

					<Divider orientation="center">
						<Typography.Title level={3} type="success">Complaints</Typography.Title>
					</Divider>
					<Table dataSource={commendScoresData.ComplaintScores} columns={columns_commend} pagination={false} bordered />

					<Divider orientation="center">
						<Typography.Title level={3} type="success">Suggestions from Customers</Typography.Title>
					</Divider>
					<Table dataSource={commendScoresData.CriticizeScores} columns={columns_commend} pagination={false} bordered />
				</Col>
			</Row>
		</Space>
	);
}

export default observer(Index);