Merge branch 'main' of https://code.sdsdev.co.kr/SDSRV-IDP/sbt-idp into BE/review_page

2024-05-24 13:06:32 +07:00 · 2024-05-24 13:06:32 +07:00 · 34a35174c8
commit 34a35174c8
parent e30ba0f40b c7481dd2bf
10 changed files with 449 additions and 343 deletions
--- a/cope2n-ai-fi/configs/sdsap_sbt/configs.py
+++ b/cope2n-ai-fi/configs/sdsap_sbt/configs.py
@ -29,7 +29,7 @@ kvu_model = {
    "option": "sbt_v2",
    "model": {
        "pretrained_model_path": "/workspace/cope2n-ai-fi/weights/layoutxlm-base",
-        "config": "/workspace/cope2n-ai-fi/weights/models/sdsvkvu/key_value_understanding_for_sbt-20240503-182151_1/base.yaml",
-        "checkpoint": "/workspace/cope2n-ai-fi/weights/models/sdsvkvu/key_value_understanding_for_sbt-20240503-182151_1/checkpoints/best_model.pth"
+        "config": "/workspace/cope2n-ai-fi/weights/models/sdsvkvu/key_value_understanding_for_sbt-20240506-175534/base.yaml",
+        "checkpoint": "/workspace/cope2n-ai-fi/weights/models/sdsvkvu/key_value_understanding_for_sbt-20240506-175534/checkpoints/best_model.pth"
    }
 }
--- a/cope2n-ai-fi/modules/sdsvkvu
+++ b/cope2n-ai-fi/modules/sdsvkvu
@ -1 +1 @@
-Subproject commit ec0d9a0a5a8c17c9a78165d1f78103951a2e138b
+Subproject commit f5604a92edcf8fd9021397b047c946a03dbb9e5a
--- a/cope2n-api/fwd_api/celery_worker/internal_task.py
+++ b/cope2n-api/fwd_api/celery_worker/internal_task.py
@ -127,7 +127,7 @@ def process_csv_feedback(csv_file_path, feedback_id):
                    print(f"[ERROR] image.doc_type: {image.doc_type} - image.index_in_request: {image.index_in_request} - time_cost: {time_cost} - {e}")
                if not validate_feedback_file(_feedback_result, _predict_result):
                    status[request_id] = "Missalign imei number between feedback and predict"
-                    continue
+                    # continue
                if image.doc_type == "invoice":
                    _predict_result["imei_number"] = []
                    if _feedback_result:
@ -136,7 +136,7 @@ def process_csv_feedback(csv_file_path, feedback_id):
                else:
                    try:
                        _predict_result = {"retailername": None, "sold_to_party": None, "invoice_no": None, "purchase_date": [], "imei_number": [_predict_result["imei_number"][image.index_in_request]]}
-                        _feedback_result = {"retailername": None, "sold_to_party": None, "invoice_no": None, "purchase_date": None, "imei_number": [_feedback_result["imei_number"][image.index_in_request]]} if _feedback_result else None
+                        _feedback_result = {"retailername": None, "sold_to_party": None, "invoice_no": None, "purchase_date": None, "imei_number": [_feedback_result["imei_number"][image.index_in_request]]} if _feedback_result and len(_feedback_result["imei_number"]) > image.index_in_request else None
                    except Exception as e:
                        print (f"[ERROR]: {request_id} - {e}")
                image.predict_result = _predict_result
--- a/cope2n-api/fwd_api/utils/accuracy.py
+++ b/cope2n-api/fwd_api/utils/accuracy.py
@ -529,6 +529,7 @@ def validate_feedback_file(feedback, predict):
        num_imei_predict = len(predict.get("imei_number", []))
        if num_imei_feedback != num_imei_predict:
            return False
+        feedback["imei_number"] = imei_feedback
    return True

 def first_of_list(the_list):
--- a/cope2n-api/fwd_api/utils/sdsvkvu
+++ b/cope2n-api/fwd_api/utils/sdsvkvu
@ -1 +1 @@
-Subproject commit ec0d9a0a5a8c17c9a78165d1f78103951a2e138b
+Subproject commit f5604a92edcf8fd9021397b047c946a03dbb9e5a
--- a/cope2n-fe/Dockerfile
+++ b/cope2n-fe/Dockerfile
@ -2,7 +2,7 @@ FROM node:21-alpine AS build

 WORKDIR /app/
 COPY --chown=node:node package*.json ./
-RUN npm install -g npm@10.4.0 && npm install
+RUN yarn
 COPY --chown=node:node . .
 RUN npm run build
 RUN npm cache clean --force
--- a/cope2n-fe/src/pages/reviews2/FileCard.tsx
+++ b/cope2n-fe/src/pages/reviews2/FileCard.tsx
@ -1,20 +1,30 @@
-import { DownloadOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import {
+  CheckCircleOutlined,
+  DownloadOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
+import { Button, Tag } from 'antd';

 const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
  const fileName = file['File Name'];
-
+  let status = true;
+  if (file['Is Required'] && !file['Is Reviewed']) {
+    status = false;
+  }
  return (
    <div
      style={{
-        border: '1px solid #ccc',
-        backgroundColor: isSelected ? '#d4ecff' : '#fff',
+        border: `1px solid #ccc`,
+        backgroundColor: isSelected ? '#f4f4f4' : '#fff',
        padding: '4px 8px',
-        margin: '0 0 4px',
+        margin: '0 8px 4px',
+        display: 'flex',
+        alignItems: 'center',
        cursor: 'pointer',
      }}
      onClick={onClick}
    >
+      <div>
        <div>
          <p
            style={{
@ -22,7 +32,8 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
              color: '#333',
              fontWeight: 'bold',
              cursor: 'default',
-            margin: '4px',
+              margin: '4px 8px 4px 0',
+              display: 'inline-block',
            }}
          >
            {file['Doc Type'].toUpperCase()}
@ -38,29 +49,30 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
              textOverflow: 'ellipsis',
            }}
          >
-          {fileName ? fileName.substring(0, 25).replace('temp_', '') : fileName}
+            {fileName
+              ? fileName.substring(0, 25).replace('temp_', '')
+              : fileName}
          </span>
        </div>
-      <div
+        <Tag
+          color={status ? 'success' : 'warning'}
+          icon={
+            status ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />
+          }
+          style={{ display: 'inline-block', fontWeight: 'bold' }}
+          // bordered={false}
+        >
+          {status ? 'Good' : 'Warning'}{' '}
+        </Tag>
+      </div>
+      <Button
        style={{
+          width: '24px',
+          height: '24px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
-        }}
-      >
-        <Button
-          style={{
-            margin: '4px 2px',
-          }}
-          onClick={() => {
-            setIsReasonModalOpen(true);
-          }}
-        >
-          Review
-        </Button>
-        <Button
-          style={{
-            margin: '4px 2px',
+          marginLeft: '8px',
        }}
        onClick={() => {
          const downloadUrl = file['File URL'];
@ -70,7 +82,6 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
        <DownloadOutlined />
      </Button>
    </div>
-    </div>
  );
 };

--- a/cope2n-fe/src/pages/reviews2/api.ts
+++ b/cope2n-fe/src/pages/reviews2/api.ts
@ -43,7 +43,6 @@ export const fetchAllRequests = async (

 export const updateRevisedData = async (
  requestID: any,
-  newRevisedData: any,
 ) => {
  // const requestID = ;
  const token = localStorage.getItem('sbt-token') || '';
@ -53,9 +52,7 @@ export const updateRevisedData = async (
      Authorization: `${JSON.parse(token)}`,
      'Content-Type': 'application/json',
    },
-    body: JSON.stringify({
-      reviewed_result: newRevisedData,
-    }),
+    body: JSON.stringify({"request_file_results": []}),
  }).catch((error) => {
    console.log(error);
    throw error;
@ -65,6 +62,30 @@ export const updateRevisedData = async (
  }
 };

+export const updateRevisedDataByFile = async (
+  requestID: any,
+  fileID: any,
+  newRevisedData: any,
+) => {
+  // const requestID = ;
+  const token = localStorage.getItem('sbt-token') || '';
+  const result = await fetch(`${baseURL}/ctel/request_image/${requestID}/${fileID}/`, {
+    method: 'POST',
+    headers: {
+      Authorization: `${JSON.parse(token)}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(newRevisedData),
+  }).catch((error) => {
+    console.log(error);
+    throw error;
+  });
+  if (result.status != 200) {
+    throw new Error('Could not update revised data');
+  }
+};
+
+
 export const fetchRequest = async (id) => {
  const token = localStorage.getItem('sbt-token') || '';
  const response = await fetch(`${baseURL}/ctel/request/${id}/`, {
--- a/cope2n-fe/src/pages/reviews2/const.ts
+++ b/cope2n-fe/src/pages/reviews2/const.ts
@ -1,4 +1,4 @@
-import { t } from "@lingui/macro";
+import { t } from '@lingui/macro';

 export const counter_measure_map = {
  invalid_image: 'Remove this image from the evaluation report',
@ -23,7 +23,7 @@ export const REASON_BAD_QUALITY = [
  { value: 'wrong_feedback', label: t`Wrong Feedback` },
  { value: 'ocr_cannot_extract', label: t`Ocr cannot extract` },
  { value: 'other', label: t`Other` },
-]
+];

 export const SOLUTION_BAD_QUALITY = [
  {
@ -36,7 +36,7 @@ export const SOLUTION_BAD_QUALITY =[
    label: t`Update revised result and re-calculate accuracy`,
  },
  { value: 'other', label: t`Other` },
-]
+];

 export const SUBSIDIARIES = [
  { value: 'SEAO', label: 'SEAO' },
@ -46,4 +46,25 @@ export const SUBSIDIARIES = [
  { value: 'SEPCO', label: 'SEPCO' },
  { value: 'TSE', label: 'TSE' },
  { value: 'SEIN', label: 'SEIN' },
-]
+];
+
+export const SOURCE_KEYS = [
+  'retailername',
+  'sold_to_party',
+  'invoice_no',
+  'purchase_date',
+  'imei_number',
+];
+
+export const FEEDBACK_RESULT = 'Feedback Result';
+export const FEEDBACK_ACCURACY = 'Feedback Accuracy';
+export const PREDICTED_RESULT = 'Predicted Result';
+export const REVIEWED_ACCURACY = 'Reviewed Accuracy';
+export const REVIEWED_RESULT = 'Reviewed Result';
+export const SOURCE_OBJECT_NAMES = [
+  FEEDBACK_RESULT,
+  FEEDBACK_ACCURACY,
+  PREDICTED_RESULT,
+  REVIEWED_ACCURACY,
+  REVIEWED_RESULT
+];
--- a/cope2n-fe/src/pages/reviews2/index.tsx
+++ b/cope2n-fe/src/pages/reviews2/index.tsx
@ -26,17 +26,27 @@ import { useEffect, useState } from 'react';
 import Lightbox from 'react-awesome-lightbox';
 import 'react-awesome-lightbox/build/style.css';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { baseURL } from 'request/api';
 // Import the styles
 import '@react-pdf-viewer/core/lib/styles/index.css';

 import { badQualityReasonSubmit } from 'request';
-import { normalizeData } from 'utils/field-value-process';
-import { fetchAllRequests, fetchRequest } from './api';
+import { getErrorMessage } from 'utils/error-handler';
+import {
+  fetchAllRequests,
+  fetchRequest,
+  updateRevisedData,
+  updateRevisedDataByFile,
+} from './api';
 import {
  counter_measure_map,
+  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';
@ -48,7 +58,9 @@ const ReviewPage = () => {
  const [isReasonModalOpen, setIsReasonModalOpen] = useState(false);
  const [selectedFileId, setSelectedFileId] = useState(0);
  const [selectedFileData, setSelectedFileData] = useState(null);
+  const [selectedFileDataSource, setSelectedFileDataSource] = useState({});
  const [selectedFileName, setSelectedFileName] = useState(null);
+  const [disableUpdateFileBtn, setDisableUpdateFileBtn] = useState(false);

  // Default date range: 1 month ago to today
  const [filterDateRange, setFilterDateRange] = useState(['', '']);
@ -62,7 +74,6 @@ const ReviewPage = () => {
  const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
  const [hasNextRequest, setHasNextRequest] = useState(true);
  const [totalRequests, setTotalPages] = useState(0);
-  const [dataSource, setDataSource] = useState([]);

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

@ -78,6 +89,18 @@ const ReviewPage = () => {
    }
  }, [reason]);

+  const updateSelectedFileDataSource = (fileContent) => {
+    let tempData = {};
+    SOURCE_KEYS.forEach((k) => {
+      tempData[k] = {};
+      SOURCE_OBJECT_NAMES.forEach((name) => {
+        tempData[k][name] = fileContent[name][k];
+      });
+    });
+
+    setSelectedFileDataSource(tempData);
+  };
+
  const setAndLoadSelectedFile = async (requestData, index) => {
    setSelectedFileId(index);
    if (!requestData['Files'][index]) {
@ -87,19 +110,38 @@ const ReviewPage = () => {
    }
    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);
+    } else if (REASON_BAD_QUALITY.some((r) => r.value === reason)) {
+      setReason(reason);
+    } else {
+      setReason('other');
+      setOtherReason(reason);
+    }
+    if (!solution) {
+      setSolution(null);
+    } else if (SOLUTION_BAD_QUALITY.some((r) => r.value === solution)) {
+      setSolution(solution);
+    } else {
+      setSolution('other');
+      setOtherSolution(solution);
+    }
+
+    setSelectedFileName(fileName);
    const response = await fetch(fileURL);
    if (response.status === 200) {
-      setSelectedFileName(fileName);
      setSelectedFileData(fileURL);
-      console.log('Loading file: ' + fileName);
-      console.log('URL: ' + fileURL);
    } else {
      setSelectedFileData('FAILED_TO_LOAD_FILE');
      setImageLoading(false);
    }
  };

-  console.log(dataSource);
  const loadCurrentRequest = (requestIndex) => {
    setLoading(true);
    setImageLoading(true);
@ -122,25 +164,7 @@ const ReviewPage = () => {
        );
        requestData
          .then(async (data) => {
-            console.log('🚀 ~ .then ~ data:', data);
            if (data) setCurrentRequest(data);
-            const predicted =
-              data && data['Predicted Result'] ? data['Predicted Result'] : {};
-            const submitted =
-              data && data['Feedback Result'] ? data['Feedback Result'] : {};
-            const revised =
-              data && data['Reviewed Result'] ? data['Reviewed Result'] : {};
-            const keys = Object.keys(predicted);
-            const tableRows = [];
-            for (let i = 0; i < keys.length; i++) {
-              let instance = {};
-              instance['key'] = keys[i];
-              instance['predicted'] = predicted[keys[i]];
-              instance['submitted'] = submitted[keys[i]];
-              instance['revised'] = revised[keys[i]];
-              tableRows.push(instance);
-            }
-            setDataSource(tableRows);
            setAndLoadSelectedFile(data, 0);
          })
          .finally(() => {
@ -222,80 +246,58 @@ const ReviewPage = () => {
    });
  }, []);

-  // "Key", "Accuracy", "Submitted", "Revised"
-  interface DataType {
-    key: string;
-    accuracy: number;
-    submitted: string;
-    revised: string;
-  }
-
-  const updateRevisedData = async (newRevisedData: any) => {
-    const requestID = currentRequest.RequestID;
-    const token = localStorage.getItem('sbt-token') || '';
-    const result = await fetch(`${baseURL}/ctel/request/${requestID}/`, {
-      method: 'POST',
-      headers: {
-        Authorization: `${JSON.parse(token)}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        reviewed_result: newRevisedData,
-      }),
-    }).catch((error) => {
-      console.log(error);
-      throw error;
-    });
-    if (result.status != 200) {
-      throw new Error('Could not update revised data');
-    }
-  };
-
-  const handleSave = (row: DataType) => {
-    const newData = [...dataSource];
-    const index = newData.findIndex((item) => row.key === item.key);
-    const item = newData[index];
-    newData.splice(index, 1, {
-      ...item,
-      ...row,
-    });
-    const newRevisedData = {};
-    for (let i = 0; i < newData.length; i++) {
-      newData[i].revised = normalizeData(newData[i].key, newData[i].revised);
-      newRevisedData[newData[i].key] = newData[i].revised;
-    }
-    updateRevisedData(newRevisedData)
-      .then(() => {
-        // "[Is Reviewed]" => true
+  const handleConfirmReview = async () => {
+    const isConfirmed = window.confirm(
+      'Are you sure you want to confirm this request is reviewed?',
+    );
+    if (isConfirmed) {
+      try {
+        await updateRevisedData(currentRequest?.RequestID);
        setCurrentRequest({
          ...currentRequest,
          ['Is Reviewed']: true,
        });
-      })
-      .then(() => {
-        setDataSource(newData);
-      })
-      .catch((error) => {
-        message.error(
-          'Could not update revised data. Please check the format.',
-        );
+        notification.success({ message: 'Update file success' });
+      } catch (error) {
+        notification.error({
+          message: getErrorMessage(error),
        });
+      }
+    }
  };

  const submitRevisedData = async () => {
-    const newData = [...dataSource];
-    const newRevisedData = {};
-    for (let i = 0; i < newData.length; i++) {
-      newData[i].revised = normalizeData(newData[i].key, newData[i].revised);
-      newRevisedData[newData[i].key] = newData[i].revised;
-    }
-    updateRevisedData(newRevisedData).then(() => {
-      // "[Is Reviewed]" => true
+    const fileId = selectedFileName.split('.')[0];
+
+    let request_file_result = {};
+    SOURCE_KEYS.forEach((k) => {
+      request_file_result[k] = selectedFileDataSource[k][REVIEWED_RESULT];
+    });
+    let data = {
+      request_file_result,
+      reason: reason ? reason : otherReason,
+      solution: solution ? solution : otherSolution,
+    };
+    try {
+      await updateRevisedDataByFile(currentRequest?.RequestID, fileId, data);
+
+      let newData = currentRequest;
+      newData.Files[selectedFileId]['Is Reviewed'] = true;
+
      setCurrentRequest({
-        ...currentRequest,
-        ['Is Reviewed']: true,
+        ...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
@ -308,6 +310,25 @@ const ReviewPage = () => {

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

+  const updateRevised = (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,
+      };
+    });
+  };
+
  return (
    <div
      style={
@ -354,93 +375,91 @@ const ReviewPage = () => {
          size='large'
        />
      </div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          margin: '0 0 4px 0',
-        }}
-      >
-        <div style={{ flexGrow: 1 }}>
-          <Button
-            onClick={() => {
-              setFullscreen(!fullscreen);
-            }}
-          >
-            {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-            {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
-          </Button>
-          {totalRequests ? (
-            <>
-              &nbsp;&nbsp;&nbsp;<b>Request ID:</b> {currentRequest?.RequestID}
-            </>
-          ) : (
-            ''
-          )}
-        </div>
-        <div style={{ display: 'flex', flexBasis: '400px' }}>
-          <Input
-            size='small'
-            value={`Sub: ${filterSubsidiaries}, Date:${
-              filterDateRange[0]
-                ? filterDateRange[0] + ' to ' + filterDateRange[1]
-                : 'All'
-            }, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`}
-            readOnly
-          />
-          <Button
-            type='primary'
-            size='middle'
-            onClick={() => {
-              setIsModalOpen(true);
-            }}
-          >
-            Filters
-          </Button>
-        </div>
-      </div>
+
      <div
        style={{
          overflow: 'auto',
          width: '100%',
-          height: fullscreen ? 'calc(100% - 32px)' : 'calc(100% - 32px)',
+          height: fullscreen ? 'calc(100% - 32px)' : '100%',
          maxWidth: '100%',
          display: 'flex',
        }}
      >
        <div
          style={{
-            textAlign: 'center',
-            color: '#fff',
            height: '100%',
-            display: 'flex',
-            flexBasis: '200px',
-            flexShrink: 0,
-            flexDirection: 'row',
-          }}
-        >
-          {totalRequests > 0 && (
-            <div
-              style={{
-                width: '200px',
+            flexGrow: 1,
            display: 'flex',
            flexDirection: 'column',
-                alignItems: 'start',
-                flexGrow: 0,
-                padding: '0',
+            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,
-                  overflowY: 'auto',
-                  width: '100%',
+                  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})
@ -458,94 +477,14 @@ const ReviewPage = () => {
                />
              ))}
            </div>
-              {totalRequests > 0 && (
-                <div
-                  style={{
-                    color: 'black',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    padding: '0 4px 0 0',
-                  }}
-                >
-                  <b>Request ID</b>
-                  <Input
-                    size='small'
-                    style={{ margin: '2px 0px 4px' }}
-                    readOnly
-                    value={currentRequest ? currentRequest.RequestID : ''}
-                  />
-                  <b>Redemption</b>
-                  <Input
-                    size='small'
-                    style={{ margin: '2px 0px 4px' }}
-                    readOnly
-                    value={
-                      currentRequest?.RedemptionID
-                        ? currentRequest.RedemptionID
-                        : ''
-                    }
-                  />
-                  <b>Created date</b>
-                  <Input
-                    size='small'
-                    style={{ margin: '2px 0px 4px' }}
-                    readOnly
-                    value={currentRequest ? currentRequest.created_at : ''}
-                  />
-                  <b>Request time</b>
-                  <Input
-                    size='small'
-                    style={{ margin: '2px 0px 4px' }}
-                    readOnly
-                    value={
-                      currentRequest
-                        ? currentRequest['Client Request Time (ms)']
-                        : ''
-                    }
-                  />
-                  <b>Processing time</b>
-                  <Input
-                    size='small'
-                    style={{ margin: '2px 0px 4px' }}
-                    readOnly
-                    value={
-                      currentRequest
-                        ? currentRequest['Server Processing Time (ms)']
-                        : ''
-                    }
-                  />
-                  <b>Raw accuracy</b>
-                  <Input
-                    size='small'
-                    style={{ margin: '2px 0px 4px' }}
-                    readOnly
-                    value={currentRequest ? currentRequest['raw_accuracy'] : ''}
-                  />
-                </div>
          )}
-            </div>
-          )}
-        </div>
-        <div
-          style={{
-            // borderLeft: '1px solid #ccc',
-            height: '100%',
-            // width: '300px',
-            flexGrow: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'relative',
-            padding: '0 16px',
-            // overflow: 'auto'
-          }}
-        >
          <div
            style={{
              flexGrow: 1,
-              textAlign: 'center',
              overflow: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
            }}
          >
            <Spin spinning={imageLoading}>
@ -685,20 +624,67 @@ const ReviewPage = () => {
                />
              </div>
            </div>
+            <Button
+              type='primary'
+              shape='default'
+              size='middle'
+              style={{ minWidth: '120px', alignSelf: 'flex-end' }}
+              onClick={handleConfirmReview}
+            >
+              Confirm request
+            </Button>
          </div>
        </div>
        <div
          style={{
-            // backgroundColor: '#fafafa',
-            padding: 8,
            flexBasis: 400,
            flexShrink: 0,
            display: 'flex',
            flexDirection: 'column',
+            paddingLeft: '8px',
          }}
        >
-          <div style={{ flexGrow: 1 }}>
-            {dataSource?.map((data) => {
+          <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' }}>
                  <div
@ -709,41 +695,107 @@ const ReviewPage = () => {
                      margin: '0 0 4px',
                    }}
                  >
-                    <p style={{ fontWeight: 'bold', margin: 0 }}>{data.key}</p>
+                    <p style={{ fontWeight: 'bold', margin: 0 }}>{data}</p>
                    <Button
                      shape='round'
                      type='primary'
                      ghost
                      icon={<CopyOutlined />}
                      size='small'
+                      onClick={() => updateRevised(data)}
                    />
                  </div>
                  <Input
                    addonBefore='Feedback'
                    size='small'
                    readOnly
-                    value={data?.submitted}
+                    value={selectedFileDataSource[data]?.[FEEDBACK_RESULT]}
                  />
                  <Input
                    addonBefore='Predicted'
                    readOnly
                    size='small'
-                    value={data?.predicted}
+                    value={selectedFileDataSource[data]?.[PREDICTED_RESULT]}
                  />
                  <Input
-                    addonBefore='Revised&nbsp; &nbsp;'
+                    addonBefore='Revised'
+                    style={{ background: shouldRevised ? 'yellow' : '' }}
                    size='small'
-                    value={data?.revised}
+                    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={setReason}
+                value={reason}
+              />
+              {reason === 'other' && (
+                <Input
+                  placeholder='Other reason'
+                  value={otherReason}
+                  style={{ width: 170, flexBasis: '50%', height: '32px' }}
+                  onChange={(e) => {
+                    setOtherReason(e.target.value);
+                  }}
+                />
+              )}
            </div>
-          <Button type='primary' shape='round' size='middle' style={{width: '120px', alignSelf: 'flex-end'}}>
-            Save
+            <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}