Merge pull request #123 from SDSRV-IDP/refactor/review-filter

Refactor/review filter

cope2n-fe/src/pages/reviews2/FileCard.tsx

@@ -1,20 +1,30 @@
-import { DownloadOutlined } from '@ant-design/icons';
+import {
-import { Button } from 'antd';
+  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',
+        border: `1px solid #ccc`,
-        backgroundColor: isSelected ? '#d4ecff' : '#fff',
+        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',
-        }}
+          marginLeft: '8px',
-      >
-        <Button
-          style={{
-            margin: '4px 2px',
-          }}
-          onClick={() => {
-            setIsReasonModalOpen(true);
-          }}
-        >
-          Review
-        </Button>
-        <Button
-          style={{
-            margin: '4px 2px',
         }}
         onClick={() => {
           const downloadUrl = file['File URL'];
@@ -70,7 +82,6 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
         <DownloadOutlined />
       </Button>
     </div>
-    </div>
   );
 };
 

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({
+    body: JSON.stringify({"request_file_results": []}),
-      reviewed_result: newRevisedData,
-    }),
   }).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}/`, {

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
+];

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 { getErrorMessage } from 'utils/error-handler';
-import { fetchAllRequests, fetchRequest } from './api';
+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"
+  const handleConfirmReview = async () => {
-  interface DataType {
+    const isConfirmed = window.confirm(
-    key: string;
+      'Are you sure you want to confirm this request is reviewed?',
-    accuracy: number;
+    );
-    submitted: string;
+    if (isConfirmed) {
-    revised: string;
+      try {
-  }
+        await updateRevisedData(currentRequest?.RequestID);
-
-  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
         setCurrentRequest({
           ...currentRequest,
           ['Is Reviewed']: true,
         });
-      })
+        notification.success({ message: 'Update file success' });
-      .then(() => {
+      } catch (error) {
-        setDataSource(newData);
+        notification.error({
-      })
+          message: getErrorMessage(error),
-      .catch((error) => {
-        message.error(
-          'Could not update revised data. Please check the format.',
-        );
         });
+      }
+    }
   };
 
   const submitRevisedData = async () => {
-    const newData = [...dataSource];
+    const fileId = selectedFileName.split('.')[0];
-    const newRevisedData = {};
+
-    for (let i = 0; i < newData.length; i++) {
+    let request_file_result = {};
-      newData[i].revised = normalizeData(newData[i].key, newData[i].revised);
+    SOURCE_KEYS.forEach((k) => {
-      newRevisedData[newData[i].key] = newData[i].revised;
+      request_file_result[k] = selectedFileDataSource[k][REVIEWED_RESULT];
-    }
+    });
-    updateRevisedData(newRevisedData).then(() => {
+    let data = {
-      // "[Is Reviewed]" => true
+      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,
+        ...newData,
-        ['Is Reviewed']: true,
       });
+      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',
+            flexGrow: 1,
-            flexBasis: '200px',
-            flexShrink: 0,
-            flexDirection: 'row',
-          }}
-        >
-          {totalRequests > 0 && (
-            <div
-              style={{
-                width: '200px',
             display: 'flex',
             flexDirection: 'column',
-                alignItems: 'start',
+            position: 'relative',
-                flexGrow: 0,
-                padding: '0',
           }}
         >
+          <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',
+                  display: 'grid',
-                  width: '100%',
+                  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 }}>
+          <div
-            {dataSource?.map((data) => {
+            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'}}>
+            <b>{t`Solution:`}</b>
-            Save
+            <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}