feat: Report增加对比数据

5 months ago · 5fe987c85c
parent 10cf9a8327
commit 5fe987c85c
4 changed files with 197 additions and 61 deletions
--- a/src/components/Data.jsx
+++ b/src/components/Data.jsx
@ -10,14 +10,15 @@ import { isEmpty, getNestedValue } from "../utils/commons";
 * @property data1
 * @property data2
 */
-export const VSTag = (props) => {
-  const { diffPercent, diffData, data1, data2 } = props;
+export const VSTag = ({ diffPercent, diffData, ...props }) => {
  const CaretIcon = parseInt(diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
  const tagColor = parseInt(diffPercent) < 0 ? 'gold' : 'lime';
-  return parseInt(diffPercent) === 0 ? (
-    '-'
+  return diffData===undefined ? null : parseInt(diffPercent) === 0 ? (
+    <span style={{marginLeft: '0.5rem'}}>
+    <Tag color={tagColor}>-%{'  '}<span>{diffData}</span></Tag>
+    </span>
  ) : (
-    <span>
+    <span style={{marginLeft: '0.5rem'}}>
      {/* <div>
        {data1} vs {data2}
      </div> */}
@ -48,7 +49,7 @@ export const TableExportBtn = (props) => {
    );
      // .filter((c) => c.dataIndex)
      // !['string', 'number'].includes(typeof vc.title) ? `${v?.titleX || v.title}` : `${v?.titleX || v.title}-${vc.title || ''}`
-      ;
+      // ;
    setColumnsMap(flatCols);
    // console.log('flatCols', flatCols);

--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@ -54,6 +54,12 @@ const SearchForm = ({ initialValue, onSubmit, onReset, onMounted, confirmText, f
 				{ key: "starttime", transform: arrVal => (arrVal ? arrVal[0].format(DATE_FORMAT) : "") },
 				{ key: "endtime", transform: arrVal => (arrVal ? arrVal[1].format(SMALL_DATETIME_FORMAT) : "") },
 			],
+			datesDiff: [
+				{ key: "datesDiff1", transform: arrVal => (arrVal ? arrVal[0].format(DATE_FORMAT) : "") },
+				{ key: "datesDiff2", transform: arrVal => (arrVal ? arrVal[1].endOf('month').format(SMALL_DATETIME_FORMAT) : "") },
+				{ key: "timeDiff1", transform: arrVal => (arrVal ? arrVal[0].format(DATE_FORMAT) : "") },
+				{ key: "timeDiff2", transform: arrVal => (arrVal ? arrVal[1].format(SMALL_DATETIME_FORMAT) : "") },
+			],
 			invoiceStatus: { key: "invoiceStatus", transform: value => value?.value || value?.key || "", default: "" },
 			invoiceCheckStatus: { key: "invoiceCheckStatus", transform: value => value?.value || value?.key || "", default: "" },
 			audit_state: { key: "audit_state", transform: value => value?.value || value?.key || "", default: "" },
@ -87,7 +93,7 @@ const SearchForm = ({ initialValue, onSubmit, onReset, onMounted, confirmText, f
 			unconfirmed: { key: "unconfirmed", transform: value => (value ? 1 : 0) },
 		};
 		let dest = {};
-		const { dates, ...omittedValue } = values;
+		const { dates, datesDiff, ...omittedValue } = values;
 		dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
 		for (const key in dest) {
 			if (Object.prototype.hasOwnProperty.call(dest, key)) {
@ -252,10 +258,15 @@ function getFields(props) {
 		item(
 			"dates", //时间日期
 			99,
-			<Form.Item name={"dates"} label={t("group:ArrivalDate")} {...fieldProps.dates} initialValue={at(props, "initialValue.dates")[0]}>
-				{/* <DatePickerCharts isform={true} {...fieldProps.dates} form={form} /> */}
-				<RangePicker allowClear={true} inputReadOnly={true} presets={presets} placeholder={["From", "Thru"]} {...fieldComProps.dates} />
-			</Form.Item>,
+      <Form.Item label={t("group:ArrivalDate")} >
+        <Form.Item noStyle name={"dates"} {...fieldProps.dates} initialValue={at(props, "initialValue.dates")[0]}>
+          <RangePicker key='date1' allowClear={true} inputReadOnly={true} presets={presets} placeholder={["From", "Thru"]} {...fieldComProps.dates} />
+        </Form.Item>
+        { fieldProps?.dates?.hide_vs === false &&
+          <Form.Item noStyle name={'datesDiff'} >
+          <RangePicker key='date2' allowClear={true} inputReadOnly={true} presets={presets} placeholder={["From", "Thru"]} variant={'underlined'} {...fieldComProps.dates} />
+        </Form.Item>}
+      </Form.Item>,
 			fieldProps?.dates?.col || midCol
 		),
 		item(
--- a/src/stores/Report.js
+++ b/src/stores/Report.js
@ -8,6 +8,10 @@ const initialState = {
  vendorScoresData: [], //地接统计数据集，合计数据，每月数据，地接考核分数
  productScoresData: [], //产品体验分析 常用酒店分析, 导游接待情况
  commendScoresData: [], //表扬情况, 投诉情况, 评建议
+
+  vendorScoresDataDiff: [],
+  productScoresDataDiff: [],
+  commendScoresDataDiff: [],
 };
 export const useReportStore = create(
  devtools((set, get) => ({
@ -19,8 +23,12 @@ export const useReportStore = create(
    setProductScoresData: (productScoresData) => set({ productScoresData }),
    setCommendScoresData: (commendScoresData) => set({ commendScoresData }),

-    async getHWVendorScores(VEI_SN, StartDate, EndDate) {
-      const { setLoading, setVendorScoresData } = get();
+    setVendorScoresDataDiff: (vendorScoresDataDiff) => set({ vendorScoresDataDiff }),
+    setProductScoresDataDiff: (productScoresDataDiff) => set({ productScoresDataDiff }),
+    setCommendScoresDataDiff: (commendScoresDataDiff) => set({ commendScoresDataDiff }),
+
+    async getHWVendorScores(VEI_SN, StartDate, EndDate, isCompare = false) {
+      const { setLoading, setVendorScoresData, setVendorScoresDataDiff } = get();
      setLoading(true);
      const searchParams = {
        VEI_SN,
@ -30,12 +38,13 @@ export const useReportStore = create(
        OrderType: '-1',
        GroupType: '-1',
      };
-      const { errcode, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWVendorScores`, searchParams);
-      setVendorScoresData(errcode === 0 ? Result : {});
+      const { errcode, errmsg, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWVendorScores`, searchParams);
+      if(isCompare===false) setVendorScoresData(errcode === 0 ? Result : {});
+      else setVendorScoresDataDiff(errcode === 0 ? Result : {});
      // setLoading(false);
    },
-    async getHWProductScores(VEI_SN, StartDate, EndDate) {
-      const { setLoading, setProductScoresData } = get();
+    async getHWProductScores(VEI_SN, StartDate, EndDate, isCompare = false) {
+      const { setLoading, setProductScoresData, setProductScoresDataDiff } = get();
      setLoading(true);
      const searchParams = {
        VEI_SN,
@ -45,12 +54,13 @@ export const useReportStore = create(
        OrderType: '-1',
        GroupType: '-1',
      };
-      const { errcode, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWProductScores`, searchParams);
-      setProductScoresData(errcode === 0 ? Result : {});
+      const { errcode, errmsg, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWProductScores`, searchParams);
+      if(isCompare===false) setProductScoresData(errcode === 0 ? Result : {});
+      else setProductScoresDataDiff(errcode === 0 ? Result : {});
      setLoading(false);
    },
-    async getHWCommendScores(VEI_SN, StartDate, EndDate) {
-      const { setLoading, setCommendScoresData } = get();
+    async getHWCommendScores(VEI_SN, StartDate, EndDate, isCompare = false) {
+      const { setLoading, setCommendScoresData, setCommendScoresDataDiff } = get();
      setLoading(true);
      const searchParams = {
        VEI_SN,
@ -60,8 +70,9 @@ export const useReportStore = create(
        OrderType: '-1',
        GroupType: '-1',
      };
-      const { errcode, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWCommendScores`, searchParams);
-      setCommendScoresData(errcode === 0 ? Result : {});
+      const { errcode, errmsg, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWCommendScores`, searchParams);
+      if(isCompare===false) setCommendScoresData(errcode === 0 ? Result : {});
+      else setCommendScoresDataDiff(errcode === 0 ? Result : {});
      // setLoading(false);
    },
  }), { name: 'reportStore'})
--- a/src/views/report/Index.jsx
+++ b/src/views/report/Index.jsx
@ -6,32 +6,51 @@ import SearchForm from '@/components/SearchForm';
 import useReportStore from '@/stores/Report';
 import { useTranslation } from 'react-i18next'
 import { usingStorage } from '@/hooks/usingStorage';
+import { VSTag } from '@/components/Data';
+import { DATE_FORMAT } from '@/config';

 function Index() {
  const { t } = useTranslation();

  const {travelAgencyId, } = usingStorage();
-  const [loading, vendorScoresData, getHWVendorScores] = useReportStore((state) => [state.loading, state.vendorScoresData, state.getHWVendorScores]);
-  const [productScoresData, getHWProductScores] = useReportStore((state) => [state.productScoresData, state.getHWProductScores]);
-  const [commendScoresData, getHWCommendScores] = useReportStore((state) => [state.commendScoresData, state.getHWCommendScores]);
+  const [loading, setLoading, reset] = useReportStore((state) => [state.loading, state.setLoading, state.reset]);
+  const [vendorScoresData, vendorScoresDataDiff, getHWVendorScores] = useReportStore((state) => [state.vendorScoresData, state.vendorScoresDataDiff, state.getHWVendorScores]);
+  const [productScoresData, productScoresDataDiff, getHWProductScores] = useReportStore((state) => [state.productScoresData, state.productScoresDataDiff, state.getHWProductScores]);
+  const [commendScoresData, commendScoresDataDiff, getHWCommendScores] = useReportStore((state) => [state.commendScoresData, state.commendScoresDataDiff, state.getHWCommendScores]);

-  const evaluationScores = vendorScoresData.EvaluationScores ? vendorScoresData.EvaluationScores[0] : [];
+  const evaluationScores = vendorScoresData.EvaluationScores ? vendorScoresData.EvaluationScores[0] : {};
+  const evaluationScoresDiff = vendorScoresDataDiff.EvaluationScores ? vendorScoresDataDiff.EvaluationScores[0] : {};
  const primaryData = vendorScoresData.EvaluationScores
    ? [comm.pick(vendorScoresData.EvaluationScores[0], ['Groups', 'PersonNum', 'AmountUSD', 'EvaluationScore', 'TPReviews', 'TPReviewRate', 'Complaints', 'ComplaintRate'])]
    : [];
+  let MonthlyData = vendorScoresData.MonthlyData || [];
+  if (vendorScoresData.EvaluationScores && !comm.isEmpty(vendorScoresDataDiff)) {
+    primaryData[0].diff = vendorScoresDataDiff.EvaluationScores
+    ? comm.pick(vendorScoresDataDiff.EvaluationScores[0], ['Groups', 'PersonNum', 'AmountUSD', 'EvaluationScore', 'TPReviews', 'TPReviewRate', 'Complaints', 'ComplaintRate'])
+    : {};
+    MonthlyData = MonthlyData.map((row, ri) => ({...row, diff: vendorScoresDataDiff.MonthlyData[ri]}))
+  }
+
+  const guideData = (productScoresData?.GuideScores || []).reduce((a, row) => ({...a, [row.key]: row}), {});
+  const guideDataDiff = (productScoresDataDiff?.GuideScores || []).reduce((a, row) => ({...a, [row.key]: row}), {});
+  if (productScoresData.GuideScores && !comm.isEmpty(productScoresDataDiff)) {
+    Object.keys(guideData).forEach(key => {
+      guideData[key].diff = guideDataDiff[key];
+    })
+  }

  const evaluationScoresData = [
-    { category: 'DMC Services', item: 'Guide', value: evaluationScores.FRTGuide, note: evaluationScores.FRTText },
-    { category: 'DMC Services', item: 'Driver & Vehicle', value: evaluationScores.FRTGriver },
-    { category: 'DMC Services', item: 'Food Arrangement', value: evaluationScores.FRTMeal },
-    { category: 'DMC Services', item: 'Activity', value: evaluationScores.FRTProduct },
-    { category: 'Itinerary Arrangements', item: 'Hotel', value: evaluationScores.FRTHotel,  },
-    { category: 'Itinerary Arrangements', item: 'Travel Advisor&rsquo;s Planning', value: evaluationScores.FRTAdvisor },
+    { category: 'DMC Services', item: 'Guide', value: evaluationScores.FRTGuide, note: evaluationScores.FRTText, diff: { value: evaluationScoresDiff?.FRTGuide } },
+    { category: 'DMC Services', item: 'Driver & Vehicle', value: evaluationScores.FRTGriver, diff: { value: evaluationScoresDiff?.FRTGriver } },
+    { category: 'DMC Services', item: 'Food Arrangement', value: evaluationScores.FRTMeal, diff: { value: evaluationScoresDiff?.FRTMeal } },
+    { category: 'DMC Services', item: 'Activity', value: evaluationScores.FRTProduct, diff: { value: evaluationScoresDiff?.FRTProduct } },
+    { category: 'Itinerary Arrangements', item: 'Hotel', value: evaluationScores.FRTHotel, diff: { value: evaluationScoresDiff?.FRTHotel } },
+    { category: 'Itinerary Arrangements', item: 'Travel Advisor&rsquo;s Planning', value: evaluationScores.FRTAdvisor, diff: { value: evaluationScoresDiff?.FRTAdvisor } },
  ];
  const columns_evaluation = [
    { title: 'Category', dataIndex: 'category', key: 'category',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 4 : index === 4 ? 2 : 0 }) },
    { title: 'Item', dataIndex: 'item', key: 'item', align: 'center' },
-    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'center', },
+    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'left', render: (text, { diff }) => <>{text}<VSTag diffData={diff?.value} diffPercent={diff?.value ? comm.fixTo2Decimals((text-diff.value)/diff.value*100) : 0} /></> },
    { title: 'Note', dataIndex: 'note', key: 'note',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 7 : 0 })},
  ];

@ -40,8 +59,8 @@ function Index() {
    { title: '3 scores', dataIndex: 'stand_3', key: 'stand_3', align: 'center', onCell: (_, index) => ({ colSpan: (index === 2 || index===4) ? 3 : 1 }) },
    { title: '4 scores', dataIndex: 'stand_4', key: 'stand_4',align: 'center',onCell: (_, index) => ({ colSpan: (index === 2 || index===4) ? 0 : 1 }) },
    { title: '5 scores', dataIndex: 'stand_5', key: 'stand_5',align: 'center',onCell: (_, index) => ({ colSpan: (index === 2 || index===4) ? 0 : 1 }) },
-    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'center', },
-    { title: 'Final Scores', dataIndex: 'final_score', key: 'final_score',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 5 : 0 })},
+    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'center', render: (text, { diff }) => <>{text}<VSTag diffData={diff?.value} diffPercent={diff?.value ? comm.fixTo2Decimals((text-diff.value)/diff.value*100) : 0} /></> },
+    { title: 'Final Scores', dataIndex: 'final_score', key: 'final_score',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 5 : 0 }), render: (text, { diff }) => <>{text}<VSTag diffData={diff?.final_score} diffPercent={diff?.final_score ? comm.fixTo2Decimals((text-diff.final_score)/diff.final_score*100) : 0} /></> },
    { title: 'Note', dataIndex: 'note', key: 'note',align: 'center', },
  ];
  const DMCData_customer_satisfaction = [
@ -53,6 +72,10 @@ function Index() {
      value: evaluationScores.TPReviewRating,
      final_score: evaluationScores.AvgCusSatisfaction,
      note: evaluationScores.AvgCusSatisfaction,
+      diff: {
+        value: evaluationScoresDiff?.TPReviewRating,
+        final_score: evaluationScoresDiff?.AvgCusSatisfaction,
+      }
    },
    {
      item: 'Post tour complaints',
@ -62,6 +85,9 @@ function Index() {
      value: evaluationScores.PostTourComplaints,
      // final_score: evaluationScores.AvgCusSatisfaction,
      note: evaluationScores.PostTourComplaintsText,
+      diff: {
+        value: evaluationScoresDiff?.PostTourComplaints,
+      }
    },
    {
      item: 'Complaints resolved during the tour',
@ -70,9 +96,24 @@ function Index() {
      // stand_5: '0',
      value: evaluationScores.ComplaintsDuringTour,
      note: evaluationScores.ComplaintsDuringTourText,
+      diff: {
+        value: evaluationScoresDiff?.ComplaintsDuringTour,
+      }
+    },
+    { item: 'Customer photos', stand_3: '\\', stand_4: '30%', stand_5: '50%',
+      value: evaluationScores.CustomerPhotoRate,
+      note: evaluationScores.CustomerPhotoRateText,
+      diff: {
+        value: evaluationScoresDiff?.CustomerPhotoRate,
+      }
+    },
+    { item: 'Evaluation scores', stand_3: '4.5',
+      value: evaluationScores.EvaluationFormScore,
+      note: evaluationScores.EvaluationFormScoreText,
+      diff: {
+        value: evaluationScoresDiff?.EvaluationFormScore,
+      }
    },
-    { item: 'Customer photos', stand_3: '\\', stand_4: '30%', stand_5: '50%', value: evaluationScores.CustomerPhotoRate, note: evaluationScores.CustomerPhotoRateText },
-    { item: 'Evaluation scores', stand_3: '4.5',  value: evaluationScores.EvaluationFormScore, note: evaluationScores.EvaluationFormScoreText },
  ];

  const columns_DMC_sopport_local = [
@ -80,8 +121,8 @@ function Index() {
    { title: '3 scores', dataIndex: 'stand_3', key: 'stand_3', align: 'center',  },
    { title: '4 scores', dataIndex: 'stand_4', key: 'stand_4',align: 'center', },
    { title: '5 scores', dataIndex: 'stand_5', key: 'stand_5',align: 'center', },
-    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'center', },
-    { title: 'Final Scores', dataIndex: 'final_score', key: 'final_score',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 6 : 0 })},
+    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'center', render: (text, { diff }) => <>{text}<VSTag diffData={diff?.value} diffPercent={diff?.value ? comm.fixTo2Decimals((text-diff.value)/diff.value*100) : 0} /></> },
+    { title: 'Final Scores', dataIndex: 'final_score', key: 'final_score',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 6 : 0 }), render: (text, { diff }) => <>{text}<VSTag diffData={diff?.final_score} diffPercent={diff?.final_score ? comm.fixTo2Decimals((text-diff.final_score)/diff.final_score*100) : 0} /></> },
    { title: 'Note', dataIndex: 'note', key: 'note',align: 'center', },
  ];
  const DMCData_sopport_local = [
@ -93,6 +134,10 @@ function Index() {
      value: evaluationScores.ResponseEfficiency,
      final_score: evaluationScores.AvgLocalResources,
      note: evaluationScores.ResponseEfficiencyText,
+      diff: {
+        value: evaluationScoresDiff?.ResponseEfficiency,
+        final_score: evaluationScoresDiff?.AvgLocalResources,
+      }
    },
    {
      item: 'Provide suggestions and alternatives',
@ -102,6 +147,9 @@ function Index() {
      value: evaluationScores.ProvideSuggestions,
      // final_score: evaluationScores.AvgCusSatisfaction,
      note: evaluationScores.ProvideSuggestionsText,
+      diff: {
+        value: evaluationScoresDiff?.ProvideSuggestions,
+      }
    },
    {
      item: 'Provide local tourism information',
@ -110,27 +158,48 @@ function Index() {
      stand_5: '√',
      value: evaluationScores.ProvideLocalInfo,
      note: evaluationScores.ProvideLocalInfoText,
+      diff: {
+        value: evaluationScoresDiff?.ProvideLocalInfo,
+      }
    },
    { item: 'Assist in developing exclusive products',
    stand_3: '\\',
    stand_4: '\\',
-    stand_5: '√', value: evaluationScores.ExclusiveProducts, note: evaluationScores.ExclusiveProductsText },
+    stand_5: '√',
+    value: evaluationScores.ExclusiveProducts,
+    note: evaluationScores.ExclusiveProductsText,
+    diff: {
+      value: evaluationScoresDiff?.ExclusiveProducts,
+    }
+  },
    { item: 'Dedicated tour guide team for AH',
    stand_3: '\\',
    stand_4: '√',
-    stand_5: '√',   value: evaluationScores.DedicatedTourGuide, note: evaluationScores.DedicatedTourGuideText },
+    stand_5: '√',
+    value: evaluationScores.DedicatedTourGuide,
+    note: evaluationScores.DedicatedTourGuideText,
+    diff: {
+      value: evaluationScoresDiff?.DedicatedTourGuide,
+    }
+  },
    { item: 'Partner hotels with contracted rate',
    stand_3: '\\',
    stand_4: '√',
-    stand_5: '√',   value: evaluationScores.PartnerHotels, note: evaluationScores.PartnerHotelsText },
+    stand_5: '√',
+    value: evaluationScores.PartnerHotels,
+    note: evaluationScores.PartnerHotelsText,
+    diff: {
+      value: evaluationScoresDiff?.PartnerHotels,
+    }
+  },
  ];
  const columns_DMC_pricing = [
    { title: 'Pricing & Settlement （20%）', dataIndex: 'item', key: 'item',align: 'center',  },
    { title: '3 scores', dataIndex: 'stand_3', key: 'stand_3', align: 'center',  },
    { title: '4 scores', dataIndex: 'stand_4', key: 'stand_4',align: 'center', },
    { title: '5 scores', dataIndex: 'stand_5', key: 'stand_5',align: 'center', },
-    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'center', },
-    { title: 'Final Scores', dataIndex: 'final_score', key: 'final_score',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 3 : 0 })},
+    { title: 'Your Scores', dataIndex: 'value', key: 'value',align: 'center', render: (text, { diff }) => <>{text}<VSTag diffData={diff?.value} diffPercent={diff?.value ? comm.fixTo2Decimals((text-diff.value)/diff.value*100) : 0} /></> },
+    { title: 'Final Scores', dataIndex: 'final_score', key: 'final_score',align: 'center', onCell: (_, index) => ({ rowSpan: index === 0 ? 3 : 0 }), render: (text, { diff }) => <>{text}<VSTag diffData={diff?.final_score} diffPercent={diff?.final_score ? comm.fixTo2Decimals((text-diff.final_score)/diff.final_score*100) : 0} /></> },
    { title: 'Note', dataIndex: 'note', key: 'note',align: 'center', },
  ];
  const DMCData_pricing = [
@ -142,6 +211,10 @@ function Index() {
      value: evaluationScores.Quotation,
      final_score: evaluationScores.AvgPricingAndSettlement,
      note: evaluationScores.QuotationText,
+      diff: {
+        value: evaluationScoresDiff?.Quotation,
+        final_score: evaluationScoresDiff?.AvgPricingAndSettlement,
+      },
    },
    {
      item: 'Settlement',
@ -150,6 +223,7 @@ function Index() {
      stand_5: 'Monthly settlement after the tours',
      value: evaluationScores.Settlement,
      note: evaluationScores.SettlementText,
+      diff: { value: evaluationScoresDiff?.Settlement },
    },
    {
      item: 'Cancellation policy',
@ -158,6 +232,7 @@ function Index() {
      stand_5: '1 day',
      value: evaluationScores.CancellationPolicy,
      note: evaluationScores.CancellationPolicyText,
+      diff: { value: evaluationScoresDiff?.CancellationPolicy },
    },];

  const columns_primary = [
@ -165,48 +240,66 @@ function Index() {
      title: 'Groups',
      dataIndex: 'Groups',
      key: 'Groups',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.Groups} diffPercent={diff?.Groups ? comm.fixTo2Decimals((text-diff.Groups)/diff.Groups*100) : 0} /></>,
    },
    {
      title: 'Number of People',
      dataIndex: 'PersonNum',
      key: 'PersonNum',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.PersonNum} diffPercent={diff?.PersonNum ? comm.fixTo2Decimals((text-diff.PersonNum)/diff.PersonNum*100) : 0} /></>,
    },
    {
      title: 'Transaction Amount（USD)',
      dataIndex: 'AmountUSD',
      key: 'AmountUSD',
-      render: (value) => comm.formatPrice(value),
+      render: (value, { diff }) => <>{comm.formatPrice(value)}<VSTag diffData={diff?.AmountUSD} diffPercent={diff?.AmountUSD ? comm.fixTo2Decimals(value/diff.AmountUSD*100) : 0} /></>,
+      //
    },
    {
      title: 'Evaluation Score',
      dataIndex: 'EvaluationScore',
      key: 'EvaluationScore',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.EvaluationScore} diffPercent={diff?.EvaluationScore ? comm.fixTo2Decimals((text-diff.EvaluationScore)/diff.EvaluationScore*100) : 0} /></>,
    },
    {
      title: 'TP Reviews',
      dataIndex: 'TPReviews',
      key: 'TPReviews',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.TPReviews} diffPercent={diff?.TPReviews ? comm.fixTo2Decimals((text-diff.TPReviews)/diff.TPReviews*100) : 0} /></>,
    },
    {
      title: 'TP Reviews Rate',
      dataIndex: 'TPReviewRate',
      key: 'TPReviewRate',
-      render: (value) => comm.formatPercent(value),
+      render: (text, { diff }) => <>{comm.formatPercent(text)}<VSTag diffData={diff?.TPReviewRate} diffPercent={diff?.TPReviewRate ? comm.fixTo2Decimals((text-diff.TPReviewRate)/diff.TPReviewRate*100) : 0} /></>,
    },
    {
      title: 'Complaints',
      dataIndex: 'Complaints',
      key: 'Complaints',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.Complaints} diffPercent={diff?.Complaints ? comm.fixTo2Decimals((text-diff.Complaints)/diff.Complaints*100) : 0} /></>,
    },
    {
      title: 'Complaint Rate',
      dataIndex: 'ComplaintRate',
      key: 'ComplaintRate',
-      render: (value) => comm.formatPercent(value),
+      render: (text, { diff }) => <>{comm.formatPercent(text)}<VSTag diffData={diff?.ComplaintRate} diffPercent={diff?.ComplaintRate ? comm.fixTo2Decimals((text-diff.ComplaintRate)/diff.ComplaintRate*100) : 0} /></>,
    },
  ];

-  const columns_month = [{ title: 'Date', dataIndex: 'VMonth', key: 'VMonth' }, ...columns_primary];
+  const columns_month = [
+    {
+      title: 'Date',
+      dataIndex: 'VMonth',
+      key: 'VMonth',
+      render: (text, { diff }) => (
+        <>
+          {text} {diff?.VMonth ? ` VS ${diff.VMonth}` : ''}
+        </>
+      ),
+    },
+    ...columns_primary,
+  ];

  const columns_guide = [
    {
@ -218,33 +311,38 @@ function Index() {
      title: 'Average Scores',
      dataIndex: 'VAverage',
      key: 'VAverage',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.VAverage} diffPercent={diff?.VAverage ? comm.fixTo2Decimals((text-diff.VAverage)/diff.VAverage*100) : 0} /></>,
    },
    {
      title: 'Group Numbers',
      dataIndex: 'ReceptionGroups',
      key: 'ReceptionGroups',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.ReceptionGroups} diffPercent={diff?.ReceptionGroups ? comm.fixTo2Decimals((text-diff.ReceptionGroups)/diff.ReceptionGroups*100) : 0} /></>,
    },
    {
      title: 'TP Reviews',
      dataIndex: 'CommendNum',
      key: 'CommendNum',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.CommendNum} diffPercent={diff?.CommendNum ? comm.fixTo2Decimals((text-diff.CommendNum)/diff.CommendNum*100) : 0} /></>,
    },
    {
      title: 'TP Review Rate',
      dataIndex: 'CommendRate',
      key: 'CommendRate',
-      render: (value) => comm.formatPercent(value),
+      // render: (value) => comm.formatPercent(value),
+      render: (text, { diff }) => <>{comm.formatPercent(text)}<VSTag diffData={diff?.CommendRate ? comm.formatPercent(diff?.CommendRate || 0) : void 0} diffPercent={diff?.CommendRate ? comm.fixTo2Decimals((text-diff.CommendRate)/diff.CommendRate*100) : 0} /></>,
    },
    {
      title: 'Complaints',
      dataIndex: 'Complaints',
      key: 'Complaints',
+      render: (text, { diff }) => <>{text}<VSTag diffData={diff?.Complaints} diffPercent={diff?.Complaints ? comm.fixTo2Decimals((text-diff.Complaints)/diff.Complaints*100) : 0} /></>,
    },
    {
      title: 'Complaint Rate',
      dataIndex: 'ComplaintRate',
      key: 'ComplaintRate',
-      render: (value) => comm.formatPercent(value),
+      render: (text, { diff }) => <>{comm.formatPercent(text)}<VSTag diffData={diff?.ComplaintRate ? comm.formatPercent(diff?.ComplaintRate || 0) : void 0} diffPercent={diff?.ComplaintRate ? comm.fixTo2Decimals((text-diff.ComplaintRate)/diff.ComplaintRate*100) : 0} /></>,
    },
  ];

@ -274,6 +372,22 @@ function Index() {
    overrides: { pdf: { compress: true }, canvas: { useCORS: true } },
  });

+  const onGetData = async (formVal) => {
+    reset();
+    const fixDiff1 = dayjs(formVal.datesDiff1).startOf('month').format(DATE_FORMAT);
+    const res = await Promise.all([
+      getHWVendorScores(formVal.agency || travelAgencyId, formVal.startdate, formVal.enddate),
+      getHWProductScores(formVal.agency || travelAgencyId, formVal.startdate, formVal.enddate),
+      getHWCommendScores(formVal.agency || travelAgencyId, formVal.startdate, formVal.enddate),
+      ...(comm.isEmpty(formVal.datesDiff1) ? [] : [
+        getHWVendorScores(formVal.agency || travelAgencyId, fixDiff1, formVal.datesDiff2, true),
+        getHWProductScores(formVal.agency || travelAgencyId, fixDiff1, formVal.datesDiff2, true),
+        getHWCommendScores(formVal.agency || travelAgencyId, fixDiff1, formVal.datesDiff2, true)
+      ])
+    ]);
+    setLoading(false);
+  };
+
  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      {/* <Typography.Title level={3}></Typography.Title> */}
@ -286,15 +400,14 @@ function Index() {
            fieldsConfig={{
              shows: ['dates'],
              fieldProps: {
-                dates: { label: 'Select Date', col: 12 },
+                dates: { label: 'Select Date', col: 12, hide_vs: false },
              },
              fieldComProps: { dates: { picker: 'month', presets: false } },
            }}
            confirmText={t('vendor:report.GetReport')}
            onSubmit={(err, formVal, filedsVal) => {
-              getHWVendorScores(formVal.agency || travelAgencyId, formVal.startdate, formVal.enddate);
-              getHWProductScores(formVal.agency || travelAgencyId, formVal.startdate, formVal.enddate);
-              getHWCommendScores(formVal.agency || travelAgencyId, formVal.startdate, formVal.enddate);
+              // return false;
+              onGetData(formVal);
            }}
          />
        </Col>
@ -318,7 +431,7 @@ function Index() {
              Monthly Data
            </Typography.Title>
          </Divider>
-          <Table loading={loading} dataSource={vendorScoresData.MonthlyData} columns={columns_month} pagination={false} bordered />
+          <Table loading={loading} dataSource={MonthlyData} columns={columns_month} pagination={false} bordered />
        </Col>

        <Col md={24} lg={24} xxl={16}>
@ -334,7 +447,7 @@ function Index() {
          <Table key={'p'} dataSource={DMCData_pricing} columns={columns_DMC_pricing} pagination={false} bordered />
          <Divider orientation='right'>
            <Typography.Title level={3} type='danger'>
-              Final Scores: {evaluationScores.FinalScores}
+              Final Scores: {evaluationScores.FinalScores}{evaluationScoresDiff?.FinalScores ? <><VSTag diffData={evaluationScoresDiff.FinalScores} diffPercent={evaluationScoresDiff?.FinalScores ? comm.fixTo2Decimals((evaluationScores.FinalScores-evaluationScoresDiff.FinalScores)/evaluationScoresDiff.FinalScores*100) : 0} /></> : ''}
            </Typography.Title>
          </Divider>
          <br />
@ -373,28 +486,28 @@ function Index() {
              Tour Guides Performence
            </Typography.Title>
          </Divider>
-          <Table dataSource={productScoresData.GuideScores} columns={columns_guide} pagination={false} bordered />
+          <Table dataSource={Object.values(guideData)} 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 />
+          <Table dataSource={[...commendScoresData?.CommendScores || [], ...commendScoresDataDiff?.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 />
+          <Table dataSource={[...commendScoresData?.ComplaintScores || [], ...commendScoresDataDiff?.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 />
+          <Table dataSource={[...commendScoresData?.CriticizeScores || [], ...commendScoresDataDiff?.CriticizeScores || []]} columns={columns_commend} pagination={false} bordered />
        </Col>
      </Row>
    </Space>