8 changed files with 114 additions and 280 deletions
--- a/cope2n-api/fwd_api/management/commands/migrate-requestfile-update-reason.py
+++ b/cope2n-api/fwd_api/management/commands/migrate-requestfile-update-reason.py
@ -1,41 +0,0 @@
-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}"))
-                    
--- a/cope2n-api/fwd_api/models/SubscriptionRequestFile.py
+++ b/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, db_index=True) 
+    reason = models.TextField(blank=True)
    counter_measures = models.TextField(blank=True)
    is_reviewed = models.BooleanField(default=False)
    is_required = models.BooleanField(default=True)
--- a/cope2n-fe/src/locales/en/messages.json
+++ b/cope2n-fe/src/locales/en/messages.json
@ -40,7 +40,6 @@
  "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",
--- a/cope2n-fe/src/locales/vi/messages.json
+++ b/cope2n-fe/src/locales/vi/messages.json
@ -40,7 +40,6 @@
  "Remove this image from the evaluation report": "",
  "Report Details": "",
  "Report Filters": "",
-  "Review Filters": "",
  "Report Type": "",
  "Reports": "",
  "Retry": "Thử lại",
--- a/cope2n-fe/src/pages/reviews2/DocumentCompareInfo.tsx
+++ b/cope2n-fe/src/pages/reviews2/DocumentCompareInfo.tsx
@ -1,69 +0,0 @@
-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;
--- a/cope2n-fe/src/pages/reviews2/DocumentHeadInfo.tsx
+++ b/cope2n-fe/src/pages/reviews2/DocumentHeadInfo.tsx
@ -1,39 +0,0 @@
-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;
--- a/cope2n-fe/src/pages/reviews2/api.ts
+++ b/cope2n-fe/src/pages/reviews2/api.ts
@ -10,8 +10,6 @@ export const fetchAllRequests = async (
  filterFeedbackResult: string,
  filterPredictResult: string,
  filterReviewedResult: string,
-  filterBadReason: string,
-  filterOtherReason: string,
  page = 1,
  page_size = 20,
  max_accuracy = 100,
@ -44,11 +42,6 @@ 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}&`;
@ -112,7 +105,7 @@ export const fetchRequest = async (id: string) => {
  });
  return await (
    await response.json()
-  ).subscription_requests?.[0];
+  ).subscription_requests?.[0] || null;
 };

 export const addRecentRequest = (
--- a/cope2n-fe/src/pages/reviews2/index.tsx
+++ b/cope2n-fe/src/pages/reviews2/index.tsx
@ -3,6 +3,7 @@ import {
  ArrowRightOutlined,
  CheckCircleOutlined,
  ClockCircleFilled,
+  CopyOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
 } from '@ant-design/icons';
@ -54,8 +55,6 @@ 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);
@ -77,9 +76,6 @@ 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);
@ -122,8 +118,6 @@ const ReviewPage = () => {
        filterFeedbackResult,
        filterPredictResult,
        filterReviewedResult,
-        filterBadReason,
-        filterOtherReason,
        1,
        1,
        filterAccuracy,
@ -131,7 +125,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);
@ -237,8 +231,6 @@ const ReviewPage = () => {
      filterFeedbackResult,
      filterPredictResult,
      filterReviewedResult,
-      filterBadReason,
-      filterOtherReason,
      requestIndex,
      1,
      filterAccuracy,
@ -298,8 +290,6 @@ const ReviewPage = () => {
      filterFeedbackResult,
      filterPredictResult,
      filterReviewedResult,
-      filterBadReason,
-      filterOtherReason,
      1,
      1,
      filterAccuracy,
@ -501,10 +491,42 @@ 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={{
@ -765,14 +787,47 @@ const ReviewPage = () => {
                }
              } catch (error) { }
              return (
-                <DocumentCompareInfo key={data}
-                  data={data}
-                  selectedFileDataSource={selectedFileDataSource}
-                  updateRevisedByFeedback={updateRevisedByFeedback}
-                  handleUpdateFileInField={handleUpdateFileInField}
-                  shouldRevised={shouldRevised}
-                  disabledInput = {currentRequest?.Files?.length}
-                />
+                <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>
              );
            })}
            <b>{t`Bad image reason:`}</b>
@ -849,7 +904,7 @@ const ReviewPage = () => {
        </div>
      </div>
      <Modal
-        title={t`Review Filters`}
+        title={t`Report Filters`}
        open={isModalOpen}
        width={700}
        onOk={() => {
@ -864,75 +919,31 @@ const ReviewPage = () => {
          style={{
            marginTop: 30,
          }}
-          layout="vertical"
        >
-          <div
+          <Form.Item
+            name='dateRange'
+            label={t`Date (GMT+8)`}
+            rules={[
+              {
+                required: true,
+                message: 'Please select a date range',
+              },
+            ]}
            style={{
-
-              display: 'flex',
-              justifyContent: 'space-between',
-              marginLeft: 0,
-              padding: 0,
+              marginBottom: 24,
            }}
          >
-            <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);
              }}
-            >
-              <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>
+              style={{ width: 200 }}
+            />
+          </Form.Item>
+
          <div
            style={{
-
+              marginTop: 10,
              display: 'flex',
              justifyContent: 'space-between',
              marginLeft: 0,
@ -948,13 +959,10 @@ const ReviewPage = () => {
                  message: 'Please select a subsidiary',
                },
              ]}
-              style={{
-                flex: 1,
-              }}
            >
              <Select
                placeholder='Select a subsidiary'
-                style={{ width: 300 }}
+                style={{ width: 200 }}
                options={SUBSIDIARIES}
                value={filterSubsidiaries}
                defaultValue={filterSubsidiaries}
@ -970,12 +978,8 @@ const ReviewPage = () => {
                  message: 'Please select max accuracy',
                },
              ]}
-              style={{
-                flex: 1,
-              }}
            >
              <InputNumber
-                style={{ width: 300 }}
                min={1}
                max={100}
                defaultValue={filterAccuracy}
@ -985,7 +989,7 @@ const ReviewPage = () => {
          </div>
          <div
            style={{
-
+              marginTop: 10,
              display: 'flex',
              justifyContent: 'space-between',
              marginLeft: 0,
@ -1001,12 +1005,9 @@ const ReviewPage = () => {
                  message: 'Please select review status',
                },
              ]}
-              style={{
-                flex: 1,
-              }}
            >
              <Select
-                style={{ width: 300 }}
+                style={{ width: 200 }}
                options={[
                  { label: 'All', value: 'all' },
                  { label: 'Reviewed', value: 'reviewed' },
@ -1026,10 +1027,10 @@ const ReviewPage = () => {
                  message: 'Please select test status',
                },
              ]}
-              style={{ flex: 1 }}
+              style={{ marginLeft: 16 }}
            >
              <Select
-                style={{ width: 300 }}
+                style={{ width: 200 }}
                options={[
                  { label: 'Include tests', value: 'true' },
                  { label: 'Exclude tests', value: 'false' },
@ -1043,7 +1044,7 @@ const ReviewPage = () => {
          {/* add 4 more filter fields */}
          <div
            style={{
-
+              marginTop: 10,
              display: 'flex',
              justifyContent: 'space-between',
              marginLeft: 0,
@ -1053,13 +1054,16 @@ const ReviewPage = () => {
            <Form.Item
              name='doc_type'
              label={t`Only type`}
-              style={{
-                flex: 1,
-              }}
+              rules={[
+                {
+                  required: true,
+                  message: 'Please select a document type',
+                },
+              ]}
            >
              <Select
                placeholder='Select a document type'
-                style={{ width: 300 }}
+                style={{ width: 200 }}
                options={DOCTYPE}
                value={filterDoctype}
                defaultValue={filterDoctype}
@ -1069,12 +1073,8 @@ 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,25 +1092,17 @@ 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 includes`}
-              style={{
-                flex: 1,
-              }}
+              label={t`Review inculdes`}
            >
              <Input
-                style={{ width: 300 }}
                defaultValue={filterReviewedResult}
                onChange={(e) => setFilterReviewedResult(e.target.value)}
              />