Merge pull request #48 from SDSRV-IDP/feature/review-ui

Feature: Review UI

cope2n-fe/package-lock.json

@@ -25,6 +25,7 @@
         "react": "^18.2.0",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
+        "react-hotkeys-hook": "^4.5.0",
         "react-json-view-lite": "^1.2.1",
         "react-office-viewer": "^1.0.4",
         "react-router-dom": "^6.6.1",
@@ -11407,6 +11408,15 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hotkeys-hook": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz",
+      "integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==",
+      "peerDependencies": {
+        "react": ">=16.8.1",
+        "react-dom": ">=16.8.1"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "11.18.6",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",

cope2n-fe/package.json

@@ -43,6 +43,7 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
+    "react-hotkeys-hook": "^4.5.0",
     "react-json-view-lite": "^1.2.1",
     "react-office-viewer": "^1.0.4",
     "react-router-dom": "^6.6.1",

cope2n-fe/src/components/report-detail/report-overview-table.tsx

@@ -34,7 +34,7 @@ const columns: TableColumnsType<DataType> = [
       return String(record.subSidiaries).toUpperCase();
     },
     filters: [
-      { text: 'ALL', value: 'ALL' },
+      { text: 'SEAO', value: 'SEAO' },
       { text: 'SEAU', value: 'SEAU' },
       { text: 'SESP', value: 'SESP' },
       { text: 'SME', value: 'SME' },

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

@@ -4,7 +4,7 @@
   "Back to Dashboard": "Back to Dashboard",
   "Create New Report": "Create New Report",
   "Dashboard": "Dashboard",
-  "Date": "Date",
+  "Date (GMT+8)": "Date (GMT+8)",
   "Download": "Download",
   "Download Report": "Download Report",
   "Duration": "Duration",
@@ -12,6 +12,7 @@
   "English": "English",
   "Go to Reports": "Go to Reports",
   "Inference": "Inference",
+  "Is Test": "Is Test",
   "Language": "Language",
   "Login": "Login",
   "Logout": "Logout",
@@ -28,8 +29,11 @@
   "Please specify a password": "Please specify a password",
   "Please specify a username": "Please specify a username",
   "Report Details": "Report Details",
+  "Report Filters": "Report Filters",
   "Reports": "Reports",
   "Retry": "Retry",
+  "Review": "Review",
+  "Reviewed": "Reviewed",
   "Service temporarily unavailable.": "Service temporarily unavailable.",
   "Something went wrong.": "Something went wrong.",
   "Sorry, something went wrong.": "Sorry, something went wrong.",

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

@@ -4,7 +4,7 @@
   "Back to Dashboard": "",
   "Create New Report": "",
   "Dashboard": "",
-  "Date": "",
+  "Date (GMT+8)": "",
   "Download": "",
   "Download Report": "",
   "Duration": "",
@@ -12,6 +12,7 @@
   "English": "Tiếng Anh",
   "Go to Reports": "",
   "Inference": "",
+  "Is Test": "",
   "Language": "Ngôn ngữ",
   "Login": "Đăng nhập",
   "Logout": "Đăng xuất",
@@ -28,8 +29,11 @@
   "Please specify a password": "Vui lòng nhập một mật khẩu",
   "Please specify a username": "Vui lòng nhập một tên tài khoản",
   "Report Details": "",
+  "Report Filters": "",
   "Reports": "",
   "Retry": "Thử lại",
+  "Review": "",
+  "Reviewed": "",
   "Service temporarily unavailable.": "Dịch vụ máy chủ hiện tại không sẵn sàng.",
   "Something went wrong.": "Có lỗi xảy ra",
   "Sorry, something went wrong.": "Hệ thống gặp lỗi",

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

@@ -16,7 +16,7 @@ export interface ReportFormValues {
 const Dashboard = () => {
   const navigate = useNavigate();
   const [duration, setDuration] = useState<string>('30d');
-  const [subsidiary, setSubsidiary] = useState<string>('ALL');
+  const [subsidiary, setSubsidiary] = useState<string>('SEAO');
   const [form] = Form.useForm<ReportFormValues>();
   const { isLoading, data } = useOverViewReport({
     duration: duration,
@@ -93,6 +93,7 @@ const Dashboard = () => {
             style={{ width: 200 }}
             options={[
               { value: 'ALL', label: 'ALL' },
+              { value: 'SEAO', label: 'SEAO' },
               { value: 'SEAU', label: 'SEAU' },
               { value: 'SESP', label: 'SESP' },
               { value: 'SME', label: 'SME' },
@@ -100,7 +101,7 @@ const Dashboard = () => {
               { value: 'TSE', label: 'TSE' },
               { value: 'SEIN', label: 'SEIN' },
             ]}
-            defaultValue='ALL'
+            defaultValue='SEAO'
             value={subsidiary}
             onChange={(value) => {
               setSubsidiary(value);

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

@@ -112,7 +112,7 @@ const ReportsPage = () => {
               placeholder='Select a subsidiary'
               style={{ width: 200 }}
               options={[
-                { value: 'ALL', label: 'ALL' },
+                { value: 'SEAO', label: 'SEAO' },
                 { value: 'SEAU', label: 'SEAU' },
                 { value: 'SESP', label: 'SESP' },
                 { value: 'SME', label: 'SME' },

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

@@ -1,10 +1,23 @@
 import { t } from '@lingui/macro';
-import { Button, message, Upload, Input, Table } from 'antd';
+import { Button, Input, Table, Tag, DatePicker, Form, Modal, Select, Space, Spin, message } from 'antd';
-import { SbtPageHeader } from 'components/page-header';
+import React, { useContext, useEffect, useRef, useState } from 'react';
-import { useState } from 'react';
+import type { GetRef } from 'antd';
 import { Layout } from 'antd';
+import {
+  DownloadOutlined, CheckCircleOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+  ClockCircleFilled,
+} from '@ant-design/icons';
 import FileViewer from '@cyntler/react-doc-viewer';
+import styled from 'styled-components';
 const { Sider, Content } = Layout;
+import { baseURL } from "request/api";
+import moment from 'moment';
+import { useHotkeys } from "react-hotkeys-hook";
+
 
 const siderStyle: React.CSSProperties = {
   backgroundColor: '#fafafa',
@@ -13,61 +26,142 @@ const siderStyle: React.CSSProperties = {
 };
 
 
-const fileList = [
+const StyledTable = styled(Table)`
-  {
+  & .sbt-table-cell {
-    name: "invoice.pdf",
+    padding: 4px!important;
-    url: "/dummpy.pdf",
-    type: "invoice",
-    isBadQuality: false,
-  },
-  {
-    name: "invoice.pdf",
-    url: "/dummpy.pdf",
-    type: "imei",
-    isBadQuality: true,
   }
-]
+`;
 
-const dataSource = [
+type InputRef = GetRef<typeof Input>;
-  {
+type FormInstance<T> = GetRef<typeof Form<T>>;
-    key: '1',
-    value: 'Mike',
-  },
-  {
-    key: '2',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-];
 
-const columns = [
+const EditableContext = React.createContext<FormInstance<any> | null>(null);
+
+interface Item {
+  key: string;
+  accuracy: number;
+  submitted: string;
+  revised: string;
+  action: string;
+}
+
+interface EditableRowProps {
+  index: number;
+}
+
+const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
+  const [form] = Form.useForm();
+  return (
+    <Form form={form} component={false}>
+      <EditableContext.Provider value={form}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  );
+};
+
+interface EditableCellProps {
+  title: React.ReactNode;
+  editable: boolean;
+  children: React.ReactNode;
+  dataIndex: keyof Item;
+  record: Item;
+  handleSave: (record: Item) => void;
+}
+
+
+const EditableCell: React.FC<EditableCellProps> = ({
+  title,
+  editable,
+  children,
+  dataIndex,
+  record,
+  handleSave,
+  ...restProps
+}) => {
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<InputRef>(null);
+  const form = useContext(EditableContext)!;
+
+  useEffect(() => {
+    if (editing) {
+      inputRef.current!.focus();
+    }
+  }, [editing]);
+
+  const toggleEdit = () => {
+    setEditing(!editing);
+    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
+  };
+
+  const save = async () => {
+    try {
+      const values = await form.validateFields();
+
+      toggleEdit();
+      handleSave({ ...record, ...values });
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo);
+    }
+  };
+
+  let childNode = children;
+
+  if (editable) {
+    childNode = editing ? (
+      <Form.Item
+        style={{ margin: 0 }}
+        name={dataIndex}
+        rules={[
+          {
+            required: true,
+            message: `${title} is required.`,
+          },
+        ]}
+      >
+        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
+      </Form.Item>
+    ) : (
+      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
+        {children}
+      </div>
+    );
+  }
+
+  return <td {...restProps}>{childNode}</td>;
+};
+
+// type EditableTableProps = Parameters<typeof Table>[0];
+
+const defaultColumns = [
   {
     title: 'Key',
     dataIndex: 'key',
     key: 'key',
+    width: 200,
   },
   {
     title: 'Predicted',
-    dataIndex: 'value',
+    dataIndex: 'predicted',
-    key: 'value',
+    key: 'predicted',
   },
   {
     title: 'Submitted',
-    dataIndex: 'value',
+    dataIndex: 'submitted',
-    key: 'value',
+    key: 'submitted',
   },
   {
     title: 'Revised',
-    dataIndex: 'value',
+    dataIndex: 'revised',
-    key: 'value',
+    key: 'revised',
+    editable: true,
   },
 ];
 
 
-const FileCard = ({ file, isSelected, onClick }) => {
+const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
+  const fileName = file["File Name"];
+
   return (
     <div style={{
       border: '1px solid #ccc',
@@ -75,7 +169,10 @@ const FileCard = ({ file, isSelected, onClick }) => {
       backgroundColor: isSelected ? '#d4ecff' : '#fff',
       padding: '4px 8px',
       marginRight: '4px',
-      marginTop: '4px',
+      marginTop: '2px',
+      position: 'relative',
+      height: '100px',
+      overflow: 'hidden',
     }} onClick={onClick}>
       <div>
         <span style={{
@@ -83,36 +180,337 @@ const FileCard = ({ file, isSelected, onClick }) => {
           color: '#333',
           fontWeight: 'bold',
           padding: '4px 8px',
-        }}>{file.type.toUpperCase()}</span>
+          cursor: 'default',
+        }}>{file["Doc Type"].toUpperCase()}</span>
         <span style={{
           fontSize: '12px',
           color: '#aaa',
           fontWeight: 'bold',
           padding: '4px 8px',
-        }}>{file.name}</span>
+          cursor: 'default',
+          maxWidth: '50px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}>
+          {fileName ? fileName.substring(0, 25).replace("temp_", "") : fileName}
+        </span>
+      </div>
+      <div style={{
+        padding: '4px',
+        position: 'absolute',
+        bottom: 2,
+        right: 2,
+      }}>
+        <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>
   );
 
 };
 
-const InferencePage = () => {
+const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page = 1, page_size = 20) => {
-  const [selectedFileId, setSelectedFileId] = useState(0);
+  const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0] : '';
-  const selectFileByIndex = (index) => {
+  const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1] : '';
-    setSelectedFileId(index);
+  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}&`;
+  }
+  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;
 };
 
+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];
+};
+
+const ReviewPage = () => {
+  const [loading, setLoading] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isReasonModalOpen, setIsReasonModalOpen] = useState(false);
+  const [selectedFileId, setSelectedFileId] = useState(0);
+  const [selectedFileData, setSelectedFileData] = useState(null);
+  const [selectedFileName, setSelectedFileName] = useState(null);
+
+  // Default date range: 1 month ago to today
+  const [filterDateRange, setFilterDateRange] = useState([
+    "", ""
+  ]);
+
+  const [filterSubsidiaries, setFilterSubsidiaries] = useState('SEAO');
+  const [filterReviewState, setFilterReviewState] = useState('all');
+  const [filterIncludeTests, setFilterIncludesTests] = useState('true');
+  const [requests, setRequests] = useState([]);
+  const [currentRequest, setCurrentRequest] = useState(null);
+  const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
+  const [hasNextRequest, setHasNextRequest] = useState(true);
+  const [totalRequests, setTotalPages] = useState(0);
+  const [dataSource, setDataSource] = useState([]);
+
+  const [pageIndexToGoto, setPageIndexToGoto] = useState(1);
+
+  const setAndLoadSelectedFile = async (requestData, index) => {
+    setSelectedFileId(index);
+    if (!requestData["Files"][index]) {
+      setSelectedFileData("FAILED_TO_LOAD_FILE");
+      return;
+    };
+    const fileName = requestData["Files"][index]["File Name"];
+    const fileURL = requestData["Files"][index]["File URL"];
+    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");
+    }
+  };
+
+  const loadCurrentRequest = (requestID) => {
+    setLoading(true);
+    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, requestID, 2).then((data) => {
+      setRequests(data?.subscription_requests);
+      setHasNextRequest(data?.subscription_requests.length > 1);
+      setTotalPages(data?.page?.total_requests);
+      const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
+      requestData.then(async (data) => {
+        if (data) setCurrentRequest(data);
+        const predicted = (data && data["Reviewed Result"]) ? data["Reviewed 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);
+        setLoading(false);
+        setAndLoadSelectedFile(data, 0);
+      }).finally(() => {
+        setLoading(false);
+      });
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  const gotoNextRequest = () => {
+    if (currentRequestIndex >= totalRequests) {
+      return;
+    }
+    const nextRequestIndex = currentRequestIndex + 1;
+    setCurrentRequestIndex(nextRequestIndex);
+    loadCurrentRequest(nextRequestIndex);
+  };
+
+  const gotoPreviousRequest = () => {
+    if (currentRequestIndex === 1) {
+      return;
+    }
+    const previousRequestIndex = currentRequestIndex - 1;
+    setCurrentRequestIndex(previousRequestIndex);
+    loadCurrentRequest(previousRequestIndex);
+  };
+
+  const reloadFilters = () => {
+    setCurrentRequestIndex(1);
+    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
+      setTotalPages(data?.page?.total_requests);
+      setRequests(data?.subscription_requests);
+      setHasNextRequest(data?.subscription_requests.length > 1);
+      const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
+      firstRequest.then(async (data) => {
+        if (data) setCurrentRequest(data);
+        setAndLoadSelectedFile(data, 0);
+      });
+    });
+
+  };
+
+  useEffect(() => {
+    setCurrentRequestIndex(1);
+    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
+      setTotalPages(data?.page?.total_requests);
+      setRequests(data?.subscription_requests);
+      setHasNextRequest(data?.subscription_requests.length > 1);
+      const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
+      firstRequest.then(async (data) => {
+        if (data) setCurrentRequest(data);
+        setAndLoadSelectedFile(data, 0);
+      });
+    });
+  }, []);
+
+  const components = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell,
+    },
+  };
+
+  // "Key", "Accuracy", "Submitted", "Revised"
+  interface DataType {
+    key: string;
+    accuracy: number;
+    submitted: string;
+    revised: string;
+  };
+
+  const updateRevisedData = async (newRevisedData: any) => {
+    const requestID = newRevisedData.request_id;
+    const token = localStorage.getItem('sbt-token') || '';
+    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);
+      message.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,
+    });
+    setDataSource(newData);
+    const newRevisedData = {};
+    for (let i = 0; i < newData.length; i++) {
+      newRevisedData[newData[i].key] = newData[i].revised;
+    }
+    updateRevisedData(newRevisedData).then(() => {
+      // "[Is Reviewed]" => true
+      setCurrentRequest({
+        ...currentRequest,
+        ["Is Reviewed"]: true,
+      })
+    })
+  };
+
+  const columns = defaultColumns.map((col) => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: (record: DataType) => ({
+        record,
+        editable: col.key != "request_id" && col.editable,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        handleSave,
+      }),
+    };
+  });
+
+  // use left/right keys to navigate
+  useHotkeys("left", gotoPreviousRequest);
+  useHotkeys("right", gotoNextRequest);
+
+  const fileExtension = selectedFileName ? selectedFileName.split('.').pop() : '';
+
   return (
-    <>
+    <div style={fullscreen ? {
-      {/* <SbtPageHeader
+      position: 'fixed',
-        title={t`Result Review`}
+      top: 0,
-      /> */}
+      left: 0,
-      <Layout style={{
-        overflow: 'hidden',
       width: '100%',
+      height: '100%',
+      backgroundColor: '#fff',
+      zIndex: 1000,
+    } : {
+      height: '100%',
+      position: 'relative',
+    }}>
+      <div
+        style={{ height: '100%', position: 'absolute', top: 0, left: 0, width: '100%', background: "#00000033", zIndex: 1000, display: loading ? 'block' : 'none' }}
+      >
+        <Spin spinning={true} style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          marginTop: -12,
+          marginLeft: -12,
+          width: 24,
+          height: 24,
+          borderRadius: '50%',
+        }} size='large' />
+      </div>
+      <div>
+        <Button onClick={() => {
+          setFullscreen(!fullscreen);
+        }}>
+          {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+          {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+        </Button>
+        {totalRequests ? <>&nbsp;&nbsp;&nbsp;<b>Request ID:</b> {currentRequest?.RequestID}</> : ""}
+      </div>
+      <Layout style={{
+        overflow: 'auto',
+        width: '100%',
+        height: '100%',
         maxWidth: '100%',
-        minHeight: 'calc(100vh - 100px)',
+        minHeight: '70%',
-        maxHeight: 'calc(100vh - 100px)',
+        maxHeight: '70%',
         display: 'flex',
         padding: '8px',
       }}>
@@ -122,19 +520,38 @@ const InferencePage = () => {
           backgroundColor: '#efefef',
           height: '100%',
           display: 'flex',
-            flexDirection: 'column',
+          flexDirection: 'row',
-            flexGrow: 1,
         }}>
+          {totalRequests > 0 && <div
+            style={{
+              width: "200px",
+              display: "flex",
+              flexDirection: "column",
+              flexGrow: 0,
+            }}>
+            <h2
+              style={{
+                color: "#333",
+                padding: 10,
+                fontWeight: 'bold'
+              }}
+            >Files ({currentRequest?.Files?.length})</h2>
+            {currentRequest?.Files.map((file, index) => (
+              <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
+                () => {
+                  setAndLoadSelectedFile(currentRequest, index);
+                }
+              } setIsReasonModalOpen={setIsReasonModalOpen} />
+            ))}
+          </div>}
           <div style={{
             border: "1px solid #ccc",
             flexGrow: 1,
-              height: '500px',
+            height: '100%',
           }}>
-              <FileViewer documents={
+            {selectedFileData === "FAILED_TO_LOAD_FILE" ? <p style={{ color: "#333" }}>Failed to load file.</p> : ( fileExtension === "pdf" ? (<FileViewer documents={[
-                [
+              { uri: selectedFileData }
-                  { uri: "/dummy.pdf" }
+            ]} config={{
-                ]
-              } config={{
               header: {
                 disableHeader: true,
                 disableFileName: true,
@@ -142,40 +559,265 @@ const InferencePage = () => {
               },
               csvDelimiter: ",", // "," as default,
               pdfVerticalScrollByDefault: true, // false as default
-              }} />
+            }} />) : <div style={{
-            </div>
+              height: "100%",
-            <div
-              style={{
               width: "100%",
-                display: "flex",
+              overflow: "auto",
-                flexDirection: "row",
+            }}><img width={"100%"} src={selectedFileData} alt="file" /></div>)}
-                height: "100px",
-                flexGrow: 0,
-              }}>
-              {fileList.map((file, index) => (
-                <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
-                  () => {
-                    setSelectedFileId(index);
-                  }
-                } />
-              ))}
           </div>
         </Content>
         <Sider width="400px" style={siderStyle}>
-            <h2 style={{ margin: "0 0 10px 0" }}>Overview</h2>
+          <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
-            <Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly />
+            <Input value={
-            <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly />
+              `Sub: ${filterSubsidiaries}, Date:${filterDateRange[0] ? (filterDateRange[0] + " to " + filterDateRange[1]) : "All"}, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`
-            <Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly />
+            } readOnly />
-            <Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly />
+            <Button type="primary" size="large"
-            <Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly />
+              onClick={() => {
-            <div style={{ marginBottom: "8px", marginTop: "8px", display: "flex" }}>
+                setIsModalOpen(true);
-              <Button type="primary" size='middle'>Confirm result</Button>
+              }}
+            >
+              Filters
+            </Button>
+          </Space.Compact>
+          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
+            <div>
+              <Button type="default" style={{ height: 38 }}
+                disabled={currentRequestIndex === 1}
+                onClick={() => {
+                  gotoPreviousRequest();
+                }}
+              >
+                <ArrowLeftOutlined />
+                Previou
+              </Button>
+              <Button type="default" style={{ height: 38 }}
+                disabled={!hasNextRequest}
+                onClick={() => {
+                  if (!hasNextRequest) {
+                    return;
+                  }
+                  gotoNextRequest();
+                }}
+              >
+                Next
+                <ArrowRightOutlined />
+              </Button>
+              <Input size='middle' addonBefore="To" style={{ marginBottom: "4px", marginLeft: "4px", width: 180 }} defaultValue={currentRequestIndex} addonAfter={
+                <Button type="default"
+                  onClick={() => {
+                    if (pageIndexToGoto > totalRequests) {
+                      message.error("RequestID is out of range.");
+                      return;
+                    }
+                    if (pageIndexToGoto < 1) {
+                      message.error("RequestID is out of range.");
+                      return;
+                    }
+                    setCurrentRequestIndex(pageIndexToGoto);
+                    loadCurrentRequest(pageIndexToGoto);
+                  }}>
+                  Go to
+                </Button>
+              }
+                value={pageIndexToGoto}
+                onChange={e => {
+                  setPageIndexToGoto(parseInt(e.target.value));
+                }}
+              />
             </div>
-            <Table dataSource={dataSource} columns={columns} />
+          </div>
+          <h2 style={{ margin: "20px 0 10px 0" }}>{totalRequests ? ("Request: " + currentRequestIndex + "/" + totalRequests) : "No Request. Adjust your search criteria to see more results."}</h2>
+          {totalRequests > 0 && <div>
+            <Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.RequestID : ""} />
+            <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : ""} />
+            <Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.created_at : ""} />
+            <Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Client Request Time (ms)"] : ""} />
+            <Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Server Processing Time (ms)"] : ""} />
+            <div style={{ marginBottom: "8px", marginTop: "8px", display: "flex" }}>
+              {currentRequest && (currentRequest["Is Reviewed"] ? <Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px" }}>
+                Reviewed
+              </Tag> : <Tag icon={<ClockCircleFilled />} color="warning" style={{ padding: "4px 16px" }}>
+                Not Reviewed
+              </Tag>)}
+            </div>
+          </div>}
         </Sider>
       </Layout>
-    </>
+      <Modal
+        title={t`Report Filters`}
+        open={isModalOpen}
+        width={700}
+        onOk={
+          () => {
+            setIsModalOpen(false);
+            reloadFilters();
+          }
+        }
+        onCancel={
+          () => {
+            setIsModalOpen(false);
+          }
+        }
+      >
+        <Form
+          style={{
+            marginTop: 30,
+          }}
+        >
+          <Form.Item
+            name='dateRange'
+            label={t`Date (GMT+8)`}
+            rules={[
+              {
+                required: true,
+                message: 'Please select a date range',
+              },
+            ]}
+            style={{
+              marginBottom: 10,
+            }}
+          >
+            <DatePicker.RangePicker
+              onChange={(date, dateString) => {
+                setFilterDateRange(dateString);
+              }}
+              style={{ width: 200 }}
+            />
+          </Form.Item>
+          <Form.Item
+            name='subsidiary'
+            label={t`Subsidiary`}
+            rules={[
+              {
+                required: true,
+                message: 'Please select a subsidiary',
+              },
+            ]}
+            style={{
+              marginBottom: 10,
+            }}
+          >
+            <Select
+              placeholder='Select a subsidiary'
+              style={{ width: 200 }}
+              options={[
+                { value: 'SEAO', label: 'SEAO' },
+                { value: 'SEAU', label: 'SEAU' },
+                { value: 'SESP', label: 'SESP' },
+                { value: 'SME', label: 'SME' },
+                { value: 'SEPCO', label: 'SEPCO' },
+                { value: 'TSE', label: 'TSE' },
+                { value: 'SEIN', label: 'SEIN' },
+              ]}
+              value={filterSubsidiaries}
+              defaultValue={filterSubsidiaries}
+              onChange={setFilterSubsidiaries}
+            />
+          </Form.Item>
+          <div style={{ marginTop: 10, display: 'flex', marginLeft: 0, padding: 0 }}>
+            <Form.Item
+              name='reviewed'
+              label={t`Reviewed`}
+              rules={[
+                {
+                  required: true,
+                  message: 'Please select review status',
+                },
+              ]}
+            >
+              <Select
+                style={{ width: 200 }}
+                options={[
+                  { label: 'All', value: 'all' },
+                  { label: 'Reviewed', value: 'reviewed' },
+                  { label: 'Not Reviewed', value: 'not_reviewed' },
+                ]}
+                value={filterReviewState}
+                defaultValue={filterReviewState}
+                onChange={setFilterReviewState}
+              />
+            </Form.Item>
+            <Form.Item
+              name='is_test'
+              label={t`Is Test`}
+              rules={[
+                {
+                  required: true,
+                  message: 'Please select test status',
+                },
+              ]}
+              style={{ marginLeft: 16 }}
+            >
+              <Select
+                style={{ width: 200 }}
+                options={[
+                  { label: 'Include tests', value: 'true' },
+                  { label: 'Exclude tests', value: 'false' },
+                ]}
+                value={filterIncludeTests}
+                defaultValue={filterIncludeTests}
+                onChange={setFilterIncludesTests}
+              />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+      <Modal
+        title={t`Review`}
+        open={isReasonModalOpen}
+        width={700}
+        onOk={
+          () => {
+
+          }
+        }
+        onCancel={
+          () => {
+            setIsReasonModalOpen(false);
+          }
+        }
+      >
+        {currentRequest && JSON.stringify(currentRequest["Files"][selectedFileId])}
+        <Form
+          style={{
+            marginTop: 30,
+          }}
+        >
+          <Form.Item
+            name='reason'
+            label={t`Reason for bad quality:`}
+            style={{
+              marginBottom: 10,
+            }}
+          >
+            <Select
+              placeholder='Select a reason'
+              style={{ width: 200 }}
+              options={[
+                { value: 'invalid_image', label: t`Invalid image` },
+                { value: 'missing_information', label: t`Missing information` },
+                { value: 'too_blurry_text', label: t`Too blurry text` },
+                { value: 'too_small_text', label: t`Too small text` },
+                { value: 'handwritten', label: t`Handwritten` },
+                { value: 'recheck', label: t`Recheck` },
+              ]}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+      {totalRequests > 0 && <div
+        style={{
+          height: '25%',
+          overflowY: 'auto',
+        }}
+      >
+        <StyledTable components={components}
+          rowClassName={() => 'editable-row'}
+          bordered dataSource={dataSource} columns={columns}
+        />
+      </div>}
+    </div>
   );
 };
 
-export default InferencePage;
+export default ReviewPage;

cope2n-fe/src/request/api.ts

@@ -11,7 +11,7 @@ const environment = process.env.NODE_ENV;
 const AXIOS_TIMEOUT_MS = 30 * 60 * 1000; // This config sastified long-live upload file request
 const EXPIRED_PASSWORD_SIGNAL = 'expired_password';
 
-export const baseURL = environment === 'development' ? 'http://42.96.42.13:9000/api' : '/api';
+export const baseURL = environment === 'development' ? 'http://42.96.42.13:9881/api' : '/api';
 
 export const API = axios.create({
   timeout: AXIOS_TIMEOUT_MS,

cope2n-fe/src/request/report.ts

@@ -123,7 +123,7 @@ export async function downloadReport(report_id: string, downloadFinishedCallback
 }
 
 
-export async function downloadDashboardReport(duration='30d', subsidiary='ALL') {
+export async function downloadDashboardReport(duration='30d', subsidiary='SEAO') {
   try {
     const response = await API.get(`/ctel/overview_download_file/?duration=${duration}&subsidiary=${subsidiary}`, {
       responseType: 'blob', // Important