rèactor

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

@@ -10,8 +10,9 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
         border: '1px solid #ccc',
         backgroundColor: isSelected ? '#d4ecff' : '#fff',
         padding: '4px 8px',
-        margin: '0 0 4px',
+        margin: '0 8px 4px',
         cursor: 'pointer',
+        display: 'flex',
       }}
       onClick={onClick}
     >
@@ -41,35 +42,18 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
           {fileName ? fileName.substring(0, 25).replace('temp_', '') : fileName}
         </span>
       </div>
-      <div
+      <Button
         style={{
-          display: 'flex',
+          margin: '4px 2px',
-          justifyContent: 'center',
+        }}
-          alignItems: 'center',
+        onClick={() => {
+          const downloadUrl = file['File URL'];
+          window.open(downloadUrl, '_blank');
         }}
       >
-        <Button
+        <DownloadOutlined />
-          style={{
+      </Button>
-            margin: '4px 2px',
+
-          }}
-          onClick={() => {
-            setIsReasonModalOpen(true);
-          }}
-        >
-          Review
-        </Button>
-        <Button
-          style={{
-            margin: '4px 2px',
-          }}
-          onClick={() => {
-            const downloadUrl = file['File URL'];
-            window.open(downloadUrl, '_blank');
-          }}
-        >
-          <DownloadOutlined />
-        </Button>
-      </div>
     </div>
   );
 };

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,9 +23,9 @@ 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 =[
+export const SOLUTION_BAD_QUALITY = [
   {
     value: 'Remove this image from the evaluation report',
     label: t`Remove this image from the evaluation report`,
@@ -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

@@ -35,8 +35,14 @@ import { normalizeData } from 'utils/field-value-process';
 import { fetchAllRequests, fetchRequest } 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,6 +54,7 @@ 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);
 
   // Default date range: 1 month ago to today
@@ -78,6 +85,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,6 +106,8 @@ const ReviewPage = () => {
     }
     const fileName = requestData['Files'][index]['File Name'];
     const fileURL = requestData['Files'][index]['File URL'];
+    updateSelectedFileDataSource(requestData['Files'][index]);
+
     const response = await fetch(fileURL);
     if (response.status === 200) {
       setSelectedFileName(fileName);
@@ -99,7 +120,6 @@ const ReviewPage = () => {
     }
   };
 
-  console.log(dataSource);
   const loadCurrentRequest = (requestIndex) => {
     setLoading(true);
     setImageLoading(true);
@@ -122,7 +142,6 @@ const ReviewPage = () => {
         );
         requestData
           .then(async (data) => {
-            console.log('🚀 ~ .then ~ data:', data);
             if (data) setCurrentRequest(data);
             const predicted =
               data && data['Predicted Result'] ? data['Predicted Result'] : {};
@@ -308,6 +327,26 @@ const ReviewPage = () => {
 
   const [lightBox, setLightBox] = useState(false);
 
+  const updateRevised = (fieldName) => {
+    console.log('🚀 ~ updateRevised ~ fieldName:', fieldName);
+    // const tempData = Object.assign({}, selectedFileDataSource);
+    // tempData[fieldName][REVIEWED_RESULT] = tempData[fieldName][FEEDBACK_RESULT];
+    // console.log('🚀 ~ updateRevised ~ tempData:', tempData);
+    // updateSelectedFileDataSource(tempData);
+
+    setSelectedFileDataSource((prevData) => {
+      prevData[fieldName][REVIEWED_RESULT] =
+        prevData[fieldName][FEEDBACK_RESULT];
+      return {
+        ...prevData,
+      };
+    });
+  };
+
+  // useEffect(() => {
+
+  // }, [selectedFileDataSource]);
+  console.log('update data:', selectedFileDataSource);
   return (
     <div
       style={
@@ -361,24 +400,52 @@ const ReviewPage = () => {
           margin: '0 0 4px 0',
         }}
       >
-        <div style={{ flexGrow: 1 }}>
+        <Button
-          <Button
+          onClick={() => {
-            onClick={() => {
+            setFullscreen(!fullscreen);
-              setFullscreen(!fullscreen);
+          }}
+        >
+          {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+        </Button>
+        {totalRequests ? (
+          <div
+            style={{
+              flexGrow: 1,
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr 1fr',
             }}
           >
-            {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+            <div>
-            {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+              <b>&nbsp;&nbsp;Request ID: &nbsp;</b>
-          </Button>
+              {currentRequest?.RequestID}
-          {totalRequests ? (
+            </div>{' '}
-            <>
+            <div>
-              &nbsp;&nbsp;&nbsp;<b>Request ID:</b> {currentRequest?.RequestID}
+              <b>&nbsp;&nbsp;Redemption ID: &nbsp;</b>
-            </>
+              {currentRequest?.RedemptionID}
-          ) : (
+            </div>{' '}
-            ''
+            <div>
-          )}
+              <b>&nbsp;&nbsp;Created at: &nbsp;</b>
-        </div>
+              {currentRequest?.created_at}
-        <div style={{ display: 'flex', flexBasis: '400px' }}>
+            </div>{' '}
+            <div>
+              <b>&nbsp;&nbsp;Request time: &nbsp;</b>
+              {currentRequest?.['Client Request Time (ms)']}
+            </div>{' '}
+            <div>
+              <b>&nbsp;&nbsp;Processing time: &nbsp;</b>
+              {currentRequest?.['Server Processing Time (ms)']}
+            </div>{' '}
+            <div>
+              <b>&nbsp;&nbsp;Raw accuracy: &nbsp;</b>
+              {currentRequest?.raw_accuracy}
+            </div>{' '}
+          </div>
+        ) : (
+          ''
+        )}
+        {/* <div
+          style={{ display: 'flex', flexBasis: '400px', alignItems: 'center' }}
+        >
           <Input
             size='small'
             value={`Sub: ${filterSubsidiaries}, Date:${
@@ -397,7 +464,7 @@ const ReviewPage = () => {
           >
             Filters
           </Button>
-        </div>
+        </div> */}
       </div>
       <div
         style={{
@@ -408,126 +475,6 @@ const ReviewPage = () => {
           display: 'flex',
         }}
       >
-        <div
-          style={{
-            textAlign: 'center',
-            color: '#fff',
-            height: '100%',
-            display: 'flex',
-            flexBasis: '200px',
-            flexShrink: 0,
-            flexDirection: 'row',
-          }}
-        >
-          {totalRequests > 0 && (
-            <div
-              style={{
-                width: '200px',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'start',
-                flexGrow: 0,
-                padding: '0',
-              }}
-            >
-              <div
-                style={{
-                  flexGrow: 1,
-                  overflowY: 'auto',
-                  width: '100%',
-                }}
-              >
-                <p
-                  style={{
-                    color: '#333',
-                    fontWeight: 'bold',
-                  }}
-                >
-                  Files ({currentRequest?.Files?.length})
-                </p>
-                {currentRequest?.Files.map((file, index) => (
-                  <FileCard
-                    key={index}
-                    file={file}
-                    isSelected={index === selectedFileId}
-                    onClick={() => {
-                      setAndLoadSelectedFile(currentRequest, index);
-                      setImageLoading(true);
-                    }}
-                    setIsReasonModalOpen={setIsReasonModalOpen}
-                  />
-                ))}
-              </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',
@@ -537,15 +484,49 @@ const ReviewPage = () => {
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            padding: '0 16px',
+            padding: '8px 16px',
             // overflow: 'auto'
           }}
         >
+          {totalRequests > 0 && (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                flexGrow: 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);
+                  }}
+                  setIsReasonModalOpen={setIsReasonModalOpen}
+                />
+              ))}
+            </div>
+          )}
           <div
             style={{
               flexGrow: 1,
-              textAlign: 'center',
               overflow: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
             }}
           >
             <Spin spinning={imageLoading}>
@@ -685,11 +666,18 @@ const ReviewPage = () => {
                 />
               </div>
             </div>
+            <Button
+              type='primary'
+              shape='round'
+              size='middle'
+              style={{ width: '120px', alignSelf: 'flex-end' }}
+            >
+              Save
+            </Button>
           </div>
         </div>
         <div
           style={{
-            // backgroundColor: '#fafafa',
             padding: 8,
             flexBasis: 400,
             flexShrink: 0,
@@ -697,8 +685,43 @@ const ReviewPage = () => {
             flexDirection: 'column',
           }}
         >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <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'
+              onClick={() => {
+                setIsModalOpen(true);
+              }}
+            >
+              Filters
+            </Button>
+          </div>
           <div style={{ flexGrow: 1 }}>
-            {dataSource?.map((data) => {
+            {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,39 +732,102 @@ 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;'
+                    style={{ background: shouldRevised ? 'yellow' : '' }}
                     size='small'
-                    value={data?.revised}
+                    value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
                   />
                 </div>
               );
             })}
+
+            {/* <Form
+                style={{
+                  marginTop: 30,
+                }}
+              >
+                <Form.Item
+                  name='reason'
+                  label={t`Reason for bad quality:`}
+                ></Form.Item>
+              </Form> */}
+            <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%' }}
+                options={REASON_BAD_QUALITY}
+                onChange={setReason}
+                value={reason}
+              />
+              {reason === 'other' && (
+                <Input
+                  placeholder='Other reason'
+                  value={otherReason}
+                  style={{ width: 170, flexBasis: '50%' }}
+                  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%' }}
+                options={SOLUTION_BAD_QUALITY}
+                onChange={setSolution}
+                value={solution}
+                // defaultValue={solution}
+              />
+              {solution === 'other' && (
+                <Input
+                  style={{ width: 170, flexBasis: '50%' }}
+                  placeholder='Other solution'
+                  value={otherSolution}
+                  onChange={(e) => {
+                    setOtherSolution(e.target.value);
+                  }}
+                />
+              )}
+            </div>
           </div>
-          <Button type='primary' shape='round' size='middle' style={{width: '120px', alignSelf: 'flex-end'}}>
-            Save
-          </Button>
         </div>
       </div>
       <Modal