Merge pull request #168 from SDSRV-IDP/feature/add_filter_review2

Feature/add filter review2

cope2n-api/fwd_api/management/commands/migrate-requestfile-update-reason.py

@@ -0,0 +1,41 @@
+from django.core.management.base import BaseCommand
+from tqdm import tqdm
+from fwd_api.models import SubscriptionRequestFile
+from fwd_api.models.SemiAutoCorrection import SemiAutoCorrection
+from fwd_api.exception.exceptions import InvalidException
+
+# Mapping dictionary for reasons
+REASON_MAP = {
+    'Invalid image': 'invalid_image',
+    'Missing information': 'missing_information',
+    'Too blurry text': 'too_blurry_text',
+    'Too small text': 'too_small_text',
+    'Handwritten': 'handwritten',
+    'Recheck': 'recheck',
+}
+
+class Command(BaseCommand):
+    help = 'Replace the reason field in SubscriptionRequestFile and SemiAutoCorrection based on the provided mapping dictionary'
+
+    def handle(self, *args, **options):
+        # Process SubscriptionRequestFile instances
+        self.update_reasons(SubscriptionRequestFile, "SubscriptionRequestFile")
+        
+        # Process SemiAutoCorrection instances
+        self.update_reasons(SemiAutoCorrection, "SemiAutoCorrection")
+
+        self.stdout.write(self.style.SUCCESS('All applicable reasons updated successfully!'))
+
+    def update_reasons(self, model, model_name):
+        instances = model.objects.exclude(reason__isnull=True).exclude(reason='').iterator()
+        for instance in tqdm(instances, desc=f"Updating reasons in {model_name}"):
+            try:
+                original_reason = instance.reason
+                new_reason = REASON_MAP.get(original_reason)
+                if new_reason is not None:
+                    instance.reason = new_reason
+                    instance.save()
+                    self.stdout.write(self.style.SUCCESS(f"Updated reason for {model_name} ID {instance.id}: {original_reason} -> {new_reason}"))
+            except Exception as e:
+                self.stdout.write(self.style.ERROR(f"Updated reason failed for {model_name} ID {instance.id} due to {e}"))
+                    

cope2n-api/fwd_api/models/SubscriptionRequestFile.py

@@ -23,7 +23,7 @@ class SubscriptionRequestFile(models.Model):
     doc_type = models.CharField(max_length=10, default="")
     index_in_request = models.IntegerField(default=0) # by doc_type
     processing_time = models.FloatField(default=-1) # in milisecond
-    reason = models.TextField(blank=True)
+    reason = models.TextField(blank=True, db_index=True) 
     counter_measures = models.TextField(blank=True)
     is_reviewed = models.BooleanField(default=False)
     is_required = models.BooleanField(default=True)

cope2n-fe/src/locales/en/messages.json

@@ -40,6 +40,7 @@
   "Remove this image from the evaluation report": "Remove this image from the evaluation report",
   "Report Details": "Report Details",
   "Report Filters": "Report Filters",
+  "Review Filters": "Review Filters",
   "Report Type": "Report Type",
   "Reports": "Reports",
   "Retry": "Retry",

cope2n-fe/src/locales/vi/messages.json

@@ -40,6 +40,7 @@
   "Remove this image from the evaluation report": "",
   "Report Details": "",
   "Report Filters": "",
+  "Review Filters": "",
   "Report Type": "",
   "Reports": "",
   "Retry": "Thử lại",

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Button, Descriptions, Input } from 'antd';
+import type { DescriptionsProps } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { FEEDBACK_RESULT, PREDICTED_RESULT, REVIEWED_RESULT } from './const';
+
+const DocumentCompareInfo = ({ key, data, selectedFileDataSource, updateRevisedByFeedback, handleUpdateFileInField, shouldRevised, disabledInput }) => {
+    const items: DescriptionsProps['items'] = [
+        {
+            key: selectedFileDataSource[data]?.[FEEDBACK_RESULT] || '1',
+            label: 'Feedback',
+            children: selectedFileDataSource[data]?.[FEEDBACK_RESULT],
+            labelStyle: { color: '#333', padding: '4px 16px' },
+            contentStyle: { padding: '4px 16px' },
+            span: 3
+        },
+        {
+            key: selectedFileDataSource[data]?.[PREDICTED_RESULT] || '2',
+            label: 'Predicted',
+            children: selectedFileDataSource[data]?.[PREDICTED_RESULT],
+            labelStyle: { color: '#333', padding: '4px 16px' },
+            contentStyle: { padding: '4px 16px' },
+            span: 3
+        },
+        {
+            key: selectedFileDataSource[data]?.[REVIEWED_RESULT] || '3',
+            label: 'Revised',
+            children: <Input
+                style={{ background: shouldRevised ? 'yellow' : '', padding: '0' }}
+                value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
+                size='small'
+                onChange={(e) =>
+                    handleUpdateFileInField(data, e.target.value)
+                }
+                variant="borderless"
+                disabled={disabledInput === undefined || disabledInput === 0}
+            />,
+            labelStyle: { color: '#333', padding: '4px 16px' },
+            contentStyle: { padding: '4px 16px' },
+            span: 3
+        },
+    ];
+    return (
+        <div style={{ margin: '0 0 8px' }} className='file-input-group' key={key}>
+            <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)}
+                    disabled={disabledInput === undefined || disabledInput === 0}
+                />
+            </div>
+            <Descriptions bordered items={items} layout="horizontal" size='small' contentStyle={{ height: '13px' }} />
+        </div>
+    )
+}
+
+export default DocumentCompareInfo;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Descriptions } from 'antd';
+import type { DescriptionsProps } from 'antd';
+
+const DocumentHeadInfo = ({ currentRequest }) => {
+    const items: DescriptionsProps['items'] = [
+        {
+            key: '1',
+            label: 'Request ID',
+            children: currentRequest?.RequestID,
+            span: 2,
+            labelStyle: { color: '#333', width: '200px' }
+        },
+        {
+            key: '2',
+            label: 'Raw accuracy',
+            children: currentRequest?.raw_accuracy,
+            labelStyle: { color: '#333', width: '200px' }
+        },
+        {
+            key: '3',
+            label: 'Redemption ID',
+            children: currentRequest?.RedemptionID,
+            span: 2,
+            labelStyle: { color: '#333', width: '200px' }
+        },
+        {
+            key: '4',
+            label: 'Processing time',
+            children: currentRequest?.['Server Processing Time (ms)'],
+            labelStyle: { color: '#333', width: '200px' }
+        }
+    ];
+    return (
+        <Descriptions bordered items={items} size="small" />
+    )
+}
+
+export default DocumentHeadInfo;

cope2n-fe/src/pages/reviews2/api.ts

@@ -10,6 +10,8 @@ export const fetchAllRequests = async (
   filterFeedbackResult: string,
   filterPredictResult: string,
   filterReviewedResult: string,
+  filterBadReason: string,
+  filterOtherReason: string,
   page = 1,
   page_size = 20,
   max_accuracy = 100,
@@ -42,6 +44,11 @@ export const fetchAllRequests = async (
   if (filterReviewedResult) {
     filterStr += `reviewed_result=${filterReviewedResult}&`;
   }
+  if (filterBadReason === 'other' && filterOtherReason.trim()) {
+    filterStr += `bad_reason=${filterOtherReason}&`;
+  } else if(filterBadReason !== 'other') {
+    filterStr += `bad_reason=${filterBadReason}&`;
+  }
   //
   if (startDate && endDate) {
     filterStr += `start_date=${startDate}&end_date=${endDate}&`;
@@ -105,7 +112,7 @@ export const fetchRequest = async (id: string) => {
   });
   return await (
     await response.json()
-  ).subscription_requests?.[0] || null;
+  ).subscription_requests?.[0];
 };
 
 export const addRecentRequest = (

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

@@ -3,7 +3,6 @@ import {
   ArrowRightOutlined,
   CheckCircleOutlined,
   ClockCircleFilled,
-  CopyOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
 } from '@ant-design/icons';
@@ -55,6 +54,8 @@ import {
 import FileCard from './FileCard';
 import RecentRequest from './RecentRequest';
 import './style.css';
+import DocumentHeadInfo from './DocumentHeadInfo';
+import DocumentCompareInfo from './DocumentCompareInfo';
 
 const ReviewPage = () => {
   const [loading, setLoading] = useState(false);
@@ -76,6 +77,9 @@ const ReviewPage = () => {
   const [filterFeedbackResult, setFilterFeedbackResult] = useState('');
   const [filterPredictResult, setFilterPredictResult] = useState('');
   const [filterReviewedResult, setFilterReviewedResult] = useState('');
+  const [filterBadReason, setFilterBadReason] = useState('other');
+  const [filterOtherReason, setFilterOtherReason] = useState('');
+
   // const [requests, setRequests] = useState([]);
   const [currentRequest, setCurrentRequest] = useState(null);
   const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
@@ -118,6 +122,8 @@ const ReviewPage = () => {
         filterFeedbackResult,
         filterPredictResult,
         filterReviewedResult,
+        filterBadReason,
+        filterOtherReason,
         1,
         1,
         filterAccuracy,
@@ -125,7 +131,7 @@ const ReviewPage = () => {
         setTotalPages(data?.page?.total_requests);
         setHasNextRequest(1 < data?.page?.total_requests);
         const firstRequest = fetchRequest(
-          data?.subscription_requests[0].RequestID,
+          data?.subscription_requests?.[0]?.RequestID,
         );
         firstRequest.then(async (data) => {
           if (data) setCurrentRequest(data);
@@ -231,6 +237,8 @@ const ReviewPage = () => {
       filterFeedbackResult,
       filterPredictResult,
       filterReviewedResult,
+      filterBadReason,
+      filterOtherReason,
       requestIndex,
       1,
       filterAccuracy,
@@ -290,6 +298,8 @@ const ReviewPage = () => {
       filterFeedbackResult,
       filterPredictResult,
       filterReviewedResult,
+      filterBadReason,
+      filterOtherReason,
       1,
       1,
       filterAccuracy,
@@ -491,42 +501,10 @@ const ReviewPage = () => {
             >
               {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 && (
+            <DocumentHeadInfo currentRequest={currentRequest} />
+          )}
           {totalRequests > 0 && (
             <div
               style={{
@@ -787,47 +765,14 @@ const ReviewPage = () => {
                 }
               } catch (error) { }
               return (
-                <div style={{ margin: '0 0 8px' }} className='file-input-group' key={data}>
-                  <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>
+                <DocumentCompareInfo key={data}
+                  data={data}
+                  selectedFileDataSource={selectedFileDataSource}
+                  updateRevisedByFeedback={updateRevisedByFeedback}
+                  handleUpdateFileInField={handleUpdateFileInField}
+                  shouldRevised={shouldRevised}
+                  disabledInput = {currentRequest?.Files?.length}
+                />
               );
             })}
             <b>{t`Bad image reason:`}</b>
@@ -904,7 +849,7 @@ const ReviewPage = () => {
         </div>
       </div>
       <Modal
-        title={t`Report Filters`}
+        title={t`Review Filters`}
         open={isModalOpen}
         width={700}
         onOk={() => {
@@ -919,31 +864,75 @@ const ReviewPage = () => {
           style={{
             marginTop: 30,
           }}
+          layout="vertical"
         >
-          <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='dateRange'
+              label={t`Date (GMT+8)`}
+              rules={[
+                {
+                  required: true,
+                  message: 'Please select a date range',
+                },
+              ]}
+              style={{
+                flex: 1,
+              }}
+            >
+              <DatePicker.RangePicker
+                onChange={(date, dateString) => {
+                  setFilterDateRange(dateString);
+                }}
+                style={{ width: 300 }}
+              />
+            </Form.Item>
+            <div style={{
+              flex: 1,
+            }}>
+              <Form.Item
+                name='bad_reason'
+                label={t`Bad image reason`}
+              >
+                <Select
+                  placeholder='Select a reason'
+                  style={{ width: 300 }}
+                  options={REASON_BAD_QUALITY}
+                  value={filterBadReason}
+                  defaultValue={filterBadReason}
+                  onChange={setFilterBadReason}
+                />
+              </Form.Item>
+              {filterBadReason === 'other' && (
+                <Form.Item
+                  name='other_reason'
+                  style={{
+                    flex: 1,
+                  }}
+                >
+                  <Input
+                    placeholder='Other reason'
+                    value={filterOtherReason}
+                    style={{ width: 300 }}
+                    onChange={(e) => {
+                      setFilterOtherReason(e.target.value);
+                    }}
+                  />
+                </Form.Item>
+              )}
+            </div>
+          </div>
+          <div
+            style={{
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -959,10 +948,13 @@ const ReviewPage = () => {
                   message: 'Please select a subsidiary',
                 },
               ]}
+              style={{
+                flex: 1,
+              }}
             >
               <Select
                 placeholder='Select a subsidiary'
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={SUBSIDIARIES}
                 value={filterSubsidiaries}
                 defaultValue={filterSubsidiaries}
@@ -978,8 +970,12 @@ const ReviewPage = () => {
                   message: 'Please select max accuracy',
                 },
               ]}
+              style={{
+                flex: 1,
+              }}
             >
               <InputNumber
+                style={{ width: 300 }}
                 min={1}
                 max={100}
                 defaultValue={filterAccuracy}
@@ -989,7 +985,7 @@ const ReviewPage = () => {
           </div>
           <div
             style={{
-              marginTop: 10,
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -1005,9 +1001,12 @@ const ReviewPage = () => {
                   message: 'Please select review status',
                 },
               ]}
+              style={{
+                flex: 1,
+              }}
             >
               <Select
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={[
                   { label: 'All', value: 'all' },
                   { label: 'Reviewed', value: 'reviewed' },
@@ -1027,10 +1026,10 @@ const ReviewPage = () => {
                   message: 'Please select test status',
                 },
               ]}
-              style={{ marginLeft: 16 }}
+              style={{ flex: 1 }}
             >
               <Select
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={[
                   { label: 'Include tests', value: 'true' },
                   { label: 'Exclude tests', value: 'false' },
@@ -1044,7 +1043,7 @@ const ReviewPage = () => {
           {/* add 4 more filter fields */}
           <div
             style={{
-              marginTop: 10,
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -1054,16 +1053,13 @@ const ReviewPage = () => {
             <Form.Item
               name='doc_type'
               label={t`Only type`}
-              rules={[
-                {
-                  required: true,
-                  message: 'Please select a document type',
-                },
-              ]}
+              style={{
+                flex: 1,
+              }}
             >
               <Select
                 placeholder='Select a document type'
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={DOCTYPE}
                 value={filterDoctype}
                 defaultValue={filterDoctype}
@@ -1073,8 +1069,12 @@ const ReviewPage = () => {
             <Form.Item
               name='feedback_result'
               label={t`Feedback includes`}
+              style={{
+                flex: 1,
+              }}
             >
               <Input
+                style={{ width: 300 }}
                 defaultValue={filterFeedbackResult}
                 onChange={(e) => setFilterFeedbackResult(e.target.value)}
               />
@@ -1082,7 +1082,7 @@ const ReviewPage = () => {
           </div>
           <div
             style={{
-              marginTop: 10,
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -1092,17 +1092,25 @@ const ReviewPage = () => {
             <Form.Item
               name='predict_result'
               label={t`Predict includes`}
+              style={{
+                flex: 1,
+              }}
             >
               <Input
+                style={{ width: 300 }}
                 defaultValue={filterPredictResult}
                 onChange={(e) => setFilterPredictResult(e.target.value)}
               />
             </Form.Item>
             <Form.Item
               name='reviewed_result'
-              label={t`Review inculdes`}
+              label={t`Review includes`}
+              style={{
+                flex: 1,
+              }}
             >
               <Input
+                style={{ width: 300 }}
                 defaultValue={filterReviewedResult}
                 onChange={(e) => setFilterReviewedResult(e.target.value)}
               />