sbt-idp/cope2n-fe/src/pages/reviews2/index.tsx

import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  CheckCircleOutlined,
  ClockCircleFilled,
  CopyOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
} from '@ant-design/icons';
import { t } from '@lingui/macro';
import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import {
  Button,
  DatePicker,
  Form,
  Input,
  InputNumber,
  message,
  Modal,
  notification,
  Select,
  Spin,
  Tag,
} from 'antd';
import { isEmpty } from 'lodash-es';
import { useEffect, useMemo, useState } from 'react';
import Lightbox from 'react-awesome-lightbox';
import 'react-awesome-lightbox/build/style.css';
import { useHotkeys } from 'react-hotkeys-hook';
import { useSearchParams } from 'react-router-dom';
import { getErrorMessage } from 'utils/error-handler';
import {
  addRecentRequest,
  confirmRequest,
  fetchAllRequests,
  fetchRequest,
  updateRevisedDataByFile,
} from './api';
import {
  counter_measure_map,
  DOCTYPE,
  FEEDBACK_ACCURACY,
  FEEDBACK_RESULT,
  PREDICTED_RESULT,
  REASON_BAD_QUALITY,
  REVIEWED_RESULT,
  SOLUTION_BAD_QUALITY,
  SOURCE_KEYS,
  SOURCE_OBJECT_NAMES,
  SUBSIDIARIES,
} from './const';
import FileCard from './FileCard';
import RecentRequest from './RecentRequest';
import './style.css';

const ReviewPage = () => {
  const [loading, setLoading] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedFileId, setSelectedFileId] = useState(0);
  const [selectedFileData, setSelectedFileData] = useState(null);
  const [selectedFileDataSource, setSelectedFileDataSource] = useState({});
  const [selectedFileName, setSelectedFileName] = useState(null);
  const [isOpenConfirmRequest, setIsOpenConfirmRequest] = useState(false);
  // Default date range: 1 month ago to today
  const [filterDateRange, setFilterDateRange] = useState(['', '']);

  const [filterSubsidiaries, setFilterSubsidiaries] = useState('SEAO');
  const [filterAccuracy, setFilterAccuracy] = useState(100);
  const [filterReviewState, setFilterReviewState] = useState('all');
  const [filterIncludeTests, setFilterIncludesTests] = useState('true');
  const [filterDoctype, setFilterDoctype] = useState(null);
  const [filterFeedbackResult, setFilterFeedbackResult] = useState('');
  const [filterPredictResult, setFilterPredictResult] = useState('');
  const [filterReviewedResult, setFilterReviewedResult] = useState('');
  // const [requests, setRequests] = useState([]);
  const [currentRequest, setCurrentRequest] = useState(null);
  const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
  const [hasNextRequest, setHasNextRequest] = useState(true);
  const [totalRequests, setTotalPages] = useState(0);

  const [pageIndexToGoto, setPageIndexToGoto] = useState(1);

  const [reason, setReason] = useState('');
  const [otherReason, setOtherReason] = useState('');
  const [solution, setSolution] = useState('');
  const [otherSolution, setOtherSolution] = useState('');
  const [imageLoading, setImageLoading] = useState(false);
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  let [searchParams, setSearchParams] = useSearchParams();

  useEffect(() => {
    const request_id = searchParams.get('request_id');
    if (request_id) {
      setLoading(true);
      setTotalPages(1);
      setHasNextRequest(false);
      const requestData = fetchRequest(request_id);
      requestData
        .then(async (data) => {
          if (data) setCurrentRequest(data);
          setAndLoadSelectedFile(data, 0);
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      setCurrentRequestIndex(1);
      fetchAllRequests(
        filterDateRange,
        filterSubsidiaries,
        filterReviewState,
        filterIncludeTests,
        filterDoctype,
        filterFeedbackResult,
        filterPredictResult,
        filterReviewedResult,
        1,
        1,
        filterAccuracy,
      ).then((data) => {
        setTotalPages(data?.page?.total_requests);
        setHasNextRequest(1 < data?.page?.total_requests);
        const firstRequest = fetchRequest(
          data?.subscription_requests[0].RequestID,
        );
        firstRequest.then(async (data) => {
          if (data) setCurrentRequest(data);
          setAndLoadSelectedFile(data, 0);
        });
      });
    }
  }, []);

  // useEffect(() => {
  //   if (reason) {
  //     setSolution(counter_measure_map[reason]);
  //   }
  // }, [reason]);

  const updateSelectedFileDataSource = (fileContent) => {
    let tempData = {};
    SOURCE_KEYS.forEach((k) => {
      tempData[k] = {};
      SOURCE_OBJECT_NAMES.forEach((name) => {
        tempData[k][name] = fileContent[name][k];
      });
      if (!isEmpty(tempData[k][PREDICTED_RESULT])) {
        let isEmptyResult = false;
        if (isEmpty(tempData[k][REVIEWED_RESULT])) {
          isEmptyResult = true;
        }
        if (
          Array.isArray(tempData[k][REVIEWED_RESULT]) &&
          tempData[k][REVIEWED_RESULT].length > 0
        ) {
          isEmptyResult = tempData[k][REVIEWED_RESULT].every((r: any) =>
            isEmpty(r),
          );
        }
        if (isEmptyResult) {
          tempData[k][REVIEWED_RESULT] = tempData[k][PREDICTED_RESULT];
        }
      }
    });

    setSelectedFileDataSource(tempData);
  };

  const setAndLoadSelectedFile = async (requestData, index) => {
    setSelectedFileId(index);
    if (!requestData['Files'][index]) {
      setSelectedFileData('FAILED_TO_LOAD_FILE');
      setImageLoading(false);
      return;
    }
    const fileName = requestData['Files'][index]['File Name'];
    const fileURL = requestData['Files'][index]['File URL'];
    let fileDataSource = requestData['Files'][index];
    updateSelectedFileDataSource(fileDataSource);
    let reason = fileDataSource.Reason;
    let solution = fileDataSource['Counter Measures'];

    if (!reason) {
      setReason(null);
      setOtherReason(null);
    } else if (REASON_BAD_QUALITY.some((r) => r.value === reason)) {
      setReason(reason);
      setOtherReason(null);
    } else {
      setReason('other');
      setOtherReason(reason);
    }
    if (!solution) {
      setSolution(null);
      setOtherSolution(null);
    } else if (SOLUTION_BAD_QUALITY.some((r) => r.value === solution)) {
      setSolution(solution);
      setOtherSolution(null);
    } else {
      setSolution('other');
      setOtherSolution(solution);
    }

    setSelectedFileName(fileName);
    try {
      const response = await fetch(fileURL);
      if (response.status === 200) {
        setSelectedFileData(fileURL);
      } else {
        setSelectedFileData('FAILED_TO_LOAD_FILE');
      }
    } catch (error) {
      setSelectedFileData('FAILED_TO_LOAD_FILE');
    }
    setImageLoading(false);
  };
  const loadCurrentRequest = (requestIndex) => {
    setCurrentRequestIndex(requestIndex);
    setLoading(true);
    setImageLoading(true);
    fetchAllRequests(
      filterDateRange,
      filterSubsidiaries,
      filterReviewState,
      filterIncludeTests,
      filterDoctype,
      filterFeedbackResult,
      filterPredictResult,
      filterReviewedResult,
      requestIndex,
      1,
      filterAccuracy,
    )
      .then((data) => {
        setTotalPages(data?.page?.total_requests);
        setHasNextRequest(requestIndex < data?.page?.total_requests);

        fetchRequest(data?.subscription_requests[0].RequestID)
          .then(async (data) => {
            if (data) setCurrentRequest(data);
            setAndLoadSelectedFile(data, 0);
          })
          .catch((error) => {
            notification.error({ message: getErrorMessage(error) });
          })
          .finally(() => {
            setLoading(false);
          });
      })
      .catch((error) => {
        notification.error({ message: getErrorMessage(error) });
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const gotoNextRequest = () => {
    if (currentRequestIndex >= totalRequests) {
      return;
    }
    const nextRequestIndex = currentRequestIndex + 1;
    loadCurrentRequest(nextRequestIndex);
  };

  const gotoPreviousRequest = () => {
    if (currentRequestIndex === 1) {
      return;
    }
    const previousRequestIndex = currentRequestIndex - 1;
    loadCurrentRequest(previousRequestIndex);
  };

  const reloadFilters = () => {
    setCurrentRequestIndex(1);
    if (searchParams.has('request_id')) {
      searchParams.delete('request_id');
      setSearchParams(searchParams);
    }
    fetchAllRequests(
      filterDateRange,
      filterSubsidiaries,
      filterReviewState,
      filterIncludeTests,
      filterDoctype,
      filterFeedbackResult,
      filterPredictResult,
      filterReviewedResult,
      1,
      1,
      filterAccuracy,
    ).then((data) => {
      setTotalPages(data?.page?.total_requests);
      setHasNextRequest(1 < data?.page?.total_requests);
      const firstRequest = fetchRequest(
        data?.subscription_requests[0].RequestID,
      );
      firstRequest.then(async (data) => {
        if (data) setCurrentRequest(data);
        setAndLoadSelectedFile(data, 0);
      });
    });
  };

  const handleConfirmRequest = async () => {
    try {
      const res = await confirmRequest(currentRequest?.RequestID);
      if (res.status == 200) {
        addRecentRequest(currentRequest?.RequestID, res, true);
        notification.success({ message: 'Update file success' });
        setCurrentRequest({
          ...currentRequest,
          ['Is Reviewed']: true,
        });
      } else {
        throw new Error(await res.text());
      }
    } catch (error) {
      addRecentRequest(currentRequest?.RequestID, error, false);
      notification.error({
        message: getErrorMessage(error),
      });
    }
  };

  const submitRevisedData = async () => {
    const fileId = selectedFileName.split('.')[0];

    let request_file_result = {};
    SOURCE_KEYS.forEach((k) => {
      request_file_result[k] = selectedFileDataSource[k][REVIEWED_RESULT];
      if (Array.isArray(selectedFileDataSource[k][REVIEWED_RESULT])) {
        request_file_result[k] =
          selectedFileDataSource[k][REVIEWED_RESULT].toString();
      } else {
        request_file_result[k] = selectedFileDataSource[k][REVIEWED_RESULT];
      }
    });
    let data = {
      request_file_result,
      reason: reason !== 'other' ? reason : otherReason,
      solution: solution !== 'other' ? solution : otherSolution,
    };
    try {
      let res = await updateRevisedDataByFile(
        currentRequest?.RequestID,
        fileId,
        data,
      );
      if (res.status != 200) {
        throw new Error('Could not update revised data');
      }
      let newData = currentRequest;
      newData.Files[selectedFileId]['Is Reviewed'] = true;
      setCurrentRequest({
        ...newData,
      });
      notification.success({ message: 'Update file success' });

      const requestData = await fetchRequest(currentRequest?.RequestID);
      setCurrentRequest(requestData);
    } catch (error) {
      notification.error({
        message: getErrorMessage(error),
      });
    }
  };

  // use left/right keys to navigate
  useHotkeys('left', gotoPreviousRequest);
  useHotkeys('right', gotoNextRequest);
  useHotkeys('u', submitRevisedData);
  useHotkeys('c', handleConfirmRequest);

  const fileExtension = selectedFileName
    ? selectedFileName.split('.').pop()
    : '';

  const [lightBox, setLightBox] = useState(false);

  const updateRevisedByFeedback = (fieldName) => {
    setSelectedFileDataSource((prevData) => {
      prevData[fieldName][REVIEWED_RESULT] =
        prevData[fieldName][FEEDBACK_RESULT];
      return {
        ...prevData,
      };
    });
  };

  const handleUpdateFileInField = (fieldName, fieldValue) => {
    setSelectedFileDataSource((prevData) => {
      prevData[fieldName][REVIEWED_RESULT] = fieldValue;
      return {
        ...prevData,
      };
    });
  };

  const isSafeToConfirm = useMemo(() => {
    let isSafe = true;
    isSafe = !currentRequest?.Files.some((file) => {
      const isRequired = file['Is Required'];
      const isReviewed = file['Is Reviewed'];
      return isRequired && !isReviewed;
    });
    return isSafe;
  }, [currentRequest]);

  return (
    <div
      style={
        fullscreen
          ? {
              position: 'fixed',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              backgroundColor: '#fff',
              zIndex: 1000,
            }
          : {
              height: '100%',
              position: 'relative',
            }
      }
    >
      <div
        style={{
          height: '100%',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          background: '#00000033',
          zIndex: 1000,
          display: loading ? 'block' : 'none',
        }}
      >
        <Spin
          spinning={true}
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            marginTop: -12,
            marginLeft: -12,
            width: 24,
            height: 24,
            borderRadius: '50%',
          }}
          size='large'
        />
      </div>

      <div
        style={{
          overflow: 'auto',
          width: '100%',
          height: fullscreen ? 'calc(100% - 32px)' : '100%',
          maxWidth: '100%',
          display: 'flex',
        }}
      >
        <div
          style={{
            height: '100%',
            flexGrow: 1,
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
          }}
        >
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              margin: '0 0 4px 0',
            }}
          >
            <Button
              onClick={() => {
                setFullscreen(!fullscreen);
              }}
            >
              {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
            </Button>
            {totalRequests && (
              <div
                style={{
                  flexGrow: 1,
                  display: 'grid',
                  gridTemplateColumns: '1fr 1fr 1fr',
                  marginLeft: '16px',
                }}
              >
                <div style={{ gridColumn: 'span 2 / span 2' }}>
                  <b>Request ID: &nbsp;</b>
                  {currentRequest?.RequestID}
                </div>{' '}
                <div>
                  <b>Created at: &nbsp;</b>
                  {currentRequest?.created_at}
                </div>{' '}
                <div>
                  <b>Request time: &nbsp;</b>
                  {currentRequest?.['Client Request Time (ms)']}
                </div>{' '}
                <div style={{ gridColumn: 'span 2 / span 2' }}>
                  <b>Redemption ID: &nbsp;</b>
                  {currentRequest?.RedemptionID}
                </div>{' '}
                <div>
                  <b>Raw accuracy: &nbsp;</b>
                  {currentRequest?.raw_accuracy}
                </div>{' '}
                <div style={{ gridColumn: 'span 2 / span 2' }}>
                  <b>Processing time: &nbsp;</b>
                  {currentRequest?.['Server Processing Time (ms)']}
                </div>{' '}
              </div>
            )}
          </div>
          {totalRequests > 0 && (
            <div
              style={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                flexGrow: 0,
                margin: '8px 0 0 0',
              }}
            >
              <p
                style={{
                  color: '#333',
                  fontWeight: 'bold',
                  margin: '0 16px 0 0',
                }}
              >
                Files ({currentRequest?.Files?.length})
              </p>
              {currentRequest?.Files.map((file, index) => (
                <FileCard
                  key={index}
                  file={file}
                  isSelected={index === selectedFileId}
                  onClick={() => {
                    setAndLoadSelectedFile(currentRequest, index);
                    setImageLoading(true);
                  }}
                />
              ))}
            </div>
          )}
          {selectedFileData === 'FAILED_TO_LOAD_FILE' ? (
            <div
              style={{
                flexGrow: 1,
                overflow: 'auto',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <p style={{ color: '#333' }}>Failed to load file.</p>
            </div>
          ) : fileExtension === 'pdf' ? (
            <div
              style={{
                flexGrow: 1,
                overflow: 'auto',
              }}
            >
              <Viewer
                plugins={[defaultLayoutPluginInstance]}
                fileUrl={selectedFileData}
                onDocumentLoad={() => setImageLoading(false)}
              />
            </div>
          ) : (
            <div
              style={{
                flexGrow: 1,
                overflow: 'auto',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                overflowX: 'visible',
              }}
            >
              <Spin spinning={imageLoading} wrapperClassName='image-spin'>
                <img
                  style={{
                    height: '100%',
                    width: '100%',
                    objectFit: 'contain',
                    cursor: 'zoom-in',
                  }}
                  src={selectedFileData}
                  alt='file'
                  onClick={() => setLightBox(true)}
                  onLoad={() => {
                    setImageLoading(false);
                  }}
                />

                {lightBox && (
                  <Lightbox
                    image={selectedFileData}
                    onClose={() => setLightBox(false)}
                  ></Lightbox>
                )}
              </Spin>
            </div>
          )}

          <div
            style={{
              flexGrow: 0,
              display: 'flex',
              justifyContent: 'space-between',
              margin: '8px 0 0',
              alignItems: 'center',
            }}
          >
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <RecentRequest />
              <h3 style={{ margin: '0 8px ' }}>
                {totalRequests
                  ? 'No: ' + currentRequestIndex + '/' + totalRequests
                  : 'No Request. Adjust your search criteria to see more results.'}
              </h3>
              {currentRequest &&
                (currentRequest['Is Reviewed'] ? (
                  <Tag
                    icon={<CheckCircleOutlined />}
                    color='success'
                    style={{ padding: '4px 16px' }}
                  >
                    Reviewed
                  </Tag>
                ) : (
                  <Tag
                    icon={<ClockCircleFilled />}
                    color='warning'
                    style={{ padding: '4px 16px' }}
                  >
                    Not Reviewed
                  </Tag>
                ))}
            </div>
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              <div>
                <Button
                  type='default'
                  style={{ height: 38 }}
                  disabled={currentRequestIndex === 1}
                  onClick={() => {
                    gotoPreviousRequest();
                  }}
                >
                  <ArrowLeftOutlined />
                  Prev
                </Button>
                <Button
                  type='default'
                  style={{ height: 38 }}
                  disabled={!hasNextRequest}
                  onClick={() => {
                    if (!hasNextRequest) {
                      return;
                    }
                    gotoNextRequest();
                  }}
                >
                  Next
                  <ArrowRightOutlined />
                </Button>
                <Input
                  size='middle'
                  addonBefore='To'
                  style={{ marginBottom: '4px', marginLeft: '4px', width: 180 }}
                  defaultValue={currentRequestIndex}
                  addonAfter={
                    <Button
                      type='default'
                      onClick={() => {
                        if (pageIndexToGoto > totalRequests) {
                          message.error('RequestID is out of range.');
                          return;
                        }
                        if (pageIndexToGoto < 1) {
                          message.error('RequestID is out of range.');
                          return;
                        }

                        loadCurrentRequest(pageIndexToGoto);
                      }}
                    >
                      Go to
                    </Button>
                  }
                  value={pageIndexToGoto}
                  onChange={(e) => {
                    setPageIndexToGoto(parseInt(e.target.value));
                  }}
                />
              </div>
            </div>
            <Button
              type='primary'
              shape='default'
              size='middle'
              disabled={currentRequest && currentRequest['Is Reviewed']}
              style={{ minWidth: '120px' }}
              onClick={() => setIsOpenConfirmRequest(true)}
            >
              Confirm request
            </Button>
          </div>
        </div>
        <div
          style={{
            flexBasis: 400,
            flexShrink: 0,
            display: 'flex',
            flexDirection: 'column',
            paddingLeft: '8px',
          }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '8px',
            }}
          >
            <Input
              size='middle'
              value={`Sub: ${filterSubsidiaries}, Date:${
                filterDateRange[0]
                  ? filterDateRange[0] + ' to ' + filterDateRange[1]
                  : 'All'
              }, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`}
              readOnly
            />
            <Button
              type='primary'
              size='middle'
              style={{
                height: '36px',
              }}
              onClick={() => {
                setIsModalOpen(true);
              }}
            >
              Filters
            </Button>
          </div>
          <div style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}>
            {SOURCE_KEYS?.map((data) => {
              let shouldRevised = false;
              try {
                if (
                  selectedFileDataSource[data]?.[FEEDBACK_ACCURACY].length > 0
                ) {
                  shouldRevised =
                    selectedFileDataSource[data][FEEDBACK_ACCURACY][0] < 1;
                }
              } catch (error) {}
              return (
                <div style={{ margin: '0 0 8px' }} className='file-input-group'>
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      margin: '0 0 4px',
                    }}
                  >
                    <p style={{ fontWeight: 'bold', margin: 0 }}>{data}</p>
                    <Button
                      shape='round'
                      type='primary'
                      ghost
                      icon={<CopyOutlined />}
                      size='small'
                      onClick={() => updateRevisedByFeedback(data)}
                    />
                  </div>
                  <Input
                    addonBefore='Feedback'
                    size='small'
                    readOnly
                    value={selectedFileDataSource[data]?.[FEEDBACK_RESULT]}
                  />
                  <Input
                    addonBefore='Predicted'
                    readOnly
                    size='small'
                    value={selectedFileDataSource[data]?.[PREDICTED_RESULT]}
                  />
                  <Input
                    addonBefore='Revised'
                    style={{ background: shouldRevised ? 'yellow' : '' }}
                    size='small'
                    value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
                    onChange={(e) =>
                      handleUpdateFileInField(data, e.target.value)
                    }
                  />
                </div>
              );
            })}
            <b>{t`Bad image reason:`}</b>
            <div
              style={{
                display: 'flex',
                margin: '8px 0px',
                justifyContent: 'space-between',
              }}
            >
              <Select
                placeholder='Select a reason'
                style={{ width: 170, flexBasis: '50%', height: '32px' }}
                options={REASON_BAD_QUALITY}
                onChange={(value) => {
                  let newReason = value;
                  setReason(newReason);
                  setSolution(counter_measure_map[newReason]);
                }}
                value={reason}
              />
              {reason === 'other' && (
                <Input
                  placeholder='Other reason'
                  value={otherReason}
                  style={{ width: 170, flexBasis: '50%', height: '32px' }}
                  onChange={(e) => {
                    setOtherReason(e.target.value);
                  }}
                />
              )}
            </div>
            <b>{t`Solution:`}</b>
            <div
              style={{
                display: 'flex',
                margin: '8px 0px',
                justifyContent: 'space-between',
              }}
            >
              <Select
                placeholder='Select a solution'
                style={{ width: 170, flexBasis: '50%', height: '32px' }}
                options={SOLUTION_BAD_QUALITY}
                onChange={setSolution}
                value={solution}
                // defaultValue={solution}
              />
              {solution === 'other' && (
                <Input
                  style={{ width: 170, flexBasis: '50%', height: '32px' }}
                  placeholder='Other solution'
                  value={otherSolution}
                  onChange={(e) => {
                    setOtherSolution(e.target.value);
                  }}
                />
              )}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button
              type='primary'
              color='success'
              size='middle'
              style={{
                height: '36px',
              }}
              onClick={submitRevisedData}
            >
              Update File
            </Button>
          </div>
        </div>
      </div>
      <Modal
        title={t`Report Filters`}
        open={isModalOpen}
        width={700}
        onOk={() => {
          setIsModalOpen(false);
          reloadFilters();
        }}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <Form
          style={{
            marginTop: 30,
          }}
        >
          <Form.Item
            name='dateRange'
            label={t`Date (GMT+8)`}
            rules={[
              {
                required: true,
                message: 'Please select a date range',
              },
            ]}
            style={{
              marginBottom: 24,
            }}
          >
            <DatePicker.RangePicker
              onChange={(date, dateString) => {
                setFilterDateRange(dateString);
              }}
              style={{ width: 200 }}
            />
          </Form.Item>

          <div
            style={{
              marginTop: 10,
              display: 'flex',
              justifyContent: 'space-between',
              marginLeft: 0,
              padding: 0,
            }}
          >
            <Form.Item
              name='subsidiary'
              label={t`Subsidiary`}
              rules={[
                {
                  required: true,
                  message: 'Please select a subsidiary',
                },
              ]}
            >
              <Select
                placeholder='Select a subsidiary'
                style={{ width: 200 }}
                options={SUBSIDIARIES}
                value={filterSubsidiaries}
                defaultValue={filterSubsidiaries}
                onChange={setFilterSubsidiaries}
              />
            </Form.Item>
            <Form.Item
              name='max_accuracy'
              label={t`max_accuracy` + ' (1-100)'}
              rules={[
                {
                  required: true,
                  message: 'Please select max accuracy',
                },
              ]}
            >
              <InputNumber
                min={1}
                max={100}
                defaultValue={filterAccuracy}
                onChange={(value) => setFilterAccuracy(value)}
              />
            </Form.Item>
          </div>
          <div
            style={{
              marginTop: 10,
              display: 'flex',
              justifyContent: 'space-between',
              marginLeft: 0,
              padding: 0,
            }}
          >
            <Form.Item
              name='reviewed'
              label={t`Reviewed`}
              rules={[
                {
                  required: true,
                  message: 'Please select review status',
                },
              ]}
            >
              <Select
                style={{ width: 200 }}
                options={[
                  { label: 'All', value: 'all' },
                  { label: 'Reviewed', value: 'reviewed' },
                  { label: 'Not Reviewed', value: 'not_reviewed' },
                ]}
                value={filterReviewState}
                defaultValue={filterReviewState}
                onChange={setFilterReviewState}
              />
            </Form.Item>
            <Form.Item
              name='is_test'
              label={t`Is Test`}
              rules={[
                {
                  required: true,
                  message: 'Please select test status',
                },
              ]}
              style={{ marginLeft: 16 }}
            >
              <Select
                style={{ width: 200 }}
                options={[
                  { label: 'Include tests', value: 'true' },
                  { label: 'Exclude tests', value: 'false' },
                ]}
                value={filterIncludeTests}
                defaultValue={filterIncludeTests}
                onChange={setFilterIncludesTests}
              />
            </Form.Item>
          </div>
          {/* add 4 more filter fields */}
          <div
            style={{
              marginTop: 10,
              display: 'flex',
              justifyContent: 'space-between',
              marginLeft: 0,
              padding: 0,
            }}
          >
            <Form.Item
              name='doc_type'
              label={t`Only type`}
              rules={[
                {
                  required: true,
                  message: 'Please select a document type',
                },
              ]}
            >
              <Select
                placeholder='Select a document type'
                style={{ width: 200 }}
                options={DOCTYPE}
                value={filterDoctype}
                defaultValue={filterDoctype}
                onChange={setFilterDoctype}
              />
            </Form.Item>
            <Form.Item
              name='feedback_result'
              label={t`Feedback includes`}
            >
              <Input
                defaultValue={filterFeedbackResult}
                onChange={(e) => setFilterFeedbackResult(e.target.value)}
              />
            </Form.Item>
          </div>
          <div
            style={{
              marginTop: 10,
              display: 'flex',
              justifyContent: 'space-between',
              marginLeft: 0,
              padding: 0,
            }}
          >
            <Form.Item
              name='predict_result'
              label={t`Predict includes`}
            >
              <Input
                defaultValue={filterPredictResult}
                onChange={(e) => setFilterPredictResult(e.target.value)}
              />
            </Form.Item>
            <Form.Item
              name='reviewed_result'
              label={t`Review inculdes`}
            >
             <Input
                defaultValue={filterReviewedResult}
                onChange={(e) => setFilterReviewedResult(e.target.value)}
              />
            </Form.Item>
          </div>
        </Form>
      </Modal>
      <Modal
        title='Confirm this request?'
        centered
        open={isOpenConfirmRequest}
        onOk={() => {
          setIsOpenConfirmRequest(false);
          handleConfirmRequest();
        }}
        onCancel={() => {
          setIsOpenConfirmRequest(false);
        }}
      >
        {!isSafeToConfirm && (
          <p style={{ fontWeight: 'bold', color: 'red' }}>
            There is still at least 1 photo need to be reviewed!{' '}
          </p>
        )}
        <p>Are you sure you want to confirm this request is reviewed?</p>
      </Modal>
    </div>
  );
};

export default ReviewPage;