update design

cope2n-fe/package.json

@@ -44,6 +44,7 @@
     "pdfjs-dist": "^3.11.174",
     "process": "^0.11.10",
     "react": "^18.2.0",
+    "react-awesome-lightbox": "^1.8.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.5.0",
@@ -51,6 +52,7 @@
     "react-office-viewer": "^1.0.4",
     "react-router-dom": "^6.6.1",
     "styled-components": "^5.3.6",
+    "ts-node": "^10.9.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

cope2n-fe/src/layouts/main-layout.tsx

@@ -119,7 +119,7 @@ export const MainLayout = ({ children }: { children: React.ReactNode }) => {
             style={{
               height: '100%',
               overflow: 'auto',
-              padding: 32,
+              padding: 16,
               background: colorBgContainer,
             }}
           >

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

@@ -31,6 +31,7 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
         >
           {file['Doc Type'].toUpperCase()}
         </span>
+        <br/>
         <span
           style={{
             fontSize: '12px',

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

@@ -0,0 +1,77 @@
+import { DownloadOutlined } from "@ant-design/icons";
+import { Button } from "antd";
+
+const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
+  const fileName = file['File Name'];
+
+  return (
+    <div
+      style={{
+        border: '1px solid #ccc',
+        backgroundColor: isSelected ? '#d4ecff' : '#fff',
+        padding: '4px 8px',
+        marginRight: '4px',
+        position: 'relative',
+        height: '100px',
+        cursor: 'pointer'
+      }}
+      onClick={onClick}
+    >
+      <div>
+        <p
+          style={{
+            fontSize: '12px',
+            color: '#333',
+            fontWeight: 'bold',
+            padding: '4px 8px',
+            cursor: 'default',
+          }}
+        >
+          {file['Doc Type'].toUpperCase()}
+        </p>
+        <span
+          style={{
+            fontSize: '12px',
+            color: '#aaa',
+            fontWeight: 'bold',
+            cursor: 'default',
+            maxWidth: '40px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {fileName ? fileName.substring(0, 25).replace('temp_', '') : fileName}
+        </span>
+      </div>
+      <div
+        style={{
+          display: 'flex'
+        }}
+      >
+        <Button
+          style={{
+            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>
+  );
+};
+
+export default FileCard;

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

@@ -0,0 +1,79 @@
+import { baseURL } from 'request/api';
+
+export const fetchAllRequests = async (
+  filterDateRange,
+  filterSubsidiaries,
+  filterReviewState,
+  filterIncludeTests,
+  page = 1,
+  page_size = 20,
+  max_accuracy = 100
+) => {
+  const startDate =
+    filterDateRange && filterDateRange[0] ? filterDateRange[0] : '';
+  const endDate =
+    filterDateRange && filterDateRange[1] ? filterDateRange[1] : '';
+  let filterStr = '';
+  filterStr += `page=${page}&page_size=${page_size}&`;
+  if (filterSubsidiaries) {
+    filterStr += `subsidiary=${filterSubsidiaries}&`;
+  }
+  if (filterReviewState) {
+    filterStr += `is_reviewed=${filterReviewState}&`;
+  }
+  if (filterIncludeTests) {
+    filterStr += `includes_test=${filterIncludeTests}&`;
+  }
+  if (startDate && endDate) {
+    filterStr += `start_date=${startDate}&end_date=${endDate}&`;
+  }
+  filterStr += `max_accuracy=${max_accuracy}`
+  const token = localStorage.getItem('sbt-token') || '';
+  const data = await fetch(`${baseURL}/ctel/request_list/?${filterStr}`, {
+    method: 'GET',
+    headers: {
+      Authorization: `${JSON.parse(token)}`,
+    },
+  }).then(async (res) => {
+    const data = await res.json();
+    return data;
+  });
+  return data;
+};
+
+export const updateRevisedData = async (
+  requestID: any,
+  newRevisedData: any,
+) => {
+  // const 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');
+  }
+};
+
+export const fetchRequest = async (id) => {
+  const token = localStorage.getItem('sbt-token') || '';
+  const response = await fetch(`${baseURL}/ctel/request/${id}/`, {
+    method: 'GET',
+    headers: {
+      Authorization: `${JSON.parse(token)}`,
+    },
+  });
+  return await (
+    await response.json()
+  ).subscription_requests[0];
+};

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

@@ -0,0 +1,10 @@
+export const counter_measure_map = {
+  invalid_image: 'Remove this image from the evaluation report',
+  missing_information: 'Remove this image from the evaluation report',
+  too_blurry_text: 'Remove this image from the evaluation report',
+  too_small_text: 'Remove this image from the evaluation report',
+  ocr_cannot_extract: 'Improve OCR',
+  wrong_feedback: 'Update revised result and re-calculate accuracy',
+  handwritten: 'Remove this image from the evaluation report',
+  other: 'other',
+};

cope2n-fe/src/routes/useAppRouter.tsx

@@ -12,6 +12,7 @@ const DashboardPage = React.lazy(() => import('pages/dashboard'));
 const InferencePage = React.lazy(() => import('pages/inference/index'));
 
 const ReviewsPage = React.lazy(() => import('pages/reviews'));
+const ReviewsPage2 = React.lazy(() => import('pages/reviews2'));
 const ReportsPage = React.lazy(() => import('pages/reports'));
 const ReportDetailPage = React.lazy(
   () => import('pages/reports/report_detail'),
@@ -65,6 +66,11 @@ export function useAppRouter() {
           path: '/reviews',
           element: <PrivateRoute element={<ReviewsPage />} />,
         },
+        {
+          path: '/reviews2',
+          element: <PrivateRoute element={<ReviewsPage2 />} />,
+        },
+        
         {
           path: '/users',
           element: <PrivateRoute element={<UsersPage />} />,