Initialize review page

cope2n-fe/package.json

@@ -31,6 +31,7 @@
         "@ant-design/plots": "^1.2.3",
         "@ant-design/pro-layout": "^7.10.3",
         "@babel/core": "^7.13.10",
+        "@cyntler/react-doc-viewer": "^1.14.1",
         "@tanstack/react-query": "^4.20.4",
         "antd": "^5.4.0",
         "axios": "^1.2.2",

cope2n-fe/src/components/left-menu/index.tsx

@@ -1,4 +1,4 @@
-import { AppstoreOutlined, BarChartOutlined, RotateRightOutlined } from '@ant-design/icons';
+import { AppstoreOutlined, BarChartOutlined, RotateRightOutlined, FileSearchOutlined } from '@ant-design/icons';
 import { t } from '@lingui/macro';
 import { Menu, MenuProps } from 'antd';
 import React from 'react';
@@ -34,8 +34,8 @@ function LeftMenu() {
 
   const generalSubItems = [
     getItem(t`Dashboard`, '/dashboard', <AppstoreOutlined />),
-    // getItem(t`Reviews`, '/reviews', <FileSearchOutlined />),
     getItem(t`Reports`, '/reports', <BarChartOutlined />),
+    getItem(t`Review`, '/reviews', <FileSearchOutlined />),
     getItem(t`Inference`, '/inference', <RotateRightOutlined />),
     // getItem(t`Users`, '/users', <UsergroupAddOutlined />),
   ];

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

@@ -1,5 +1,183 @@
-function Reviews() {
+import { t } from '@lingui/macro';
-  return <div>Reviews</div>;
+import { Button, message, Upload, Input, Table  } from 'antd';
-}
+import { SbtPageHeader } from 'components/page-header';
+import { useState } from 'react';
+import { Layout } from 'antd';
+import FileViewer from '@cyntler/react-doc-viewer';
+const { Sider, Content } = Layout;
 
-export default Reviews;
+const contentStyle: React.CSSProperties = {
+  textAlign: 'center',
+  color: '#fff',
+  backgroundColor: '#efefef',
+};
+
+const siderStyle: React.CSSProperties = {
+  backgroundColor: '#fafafa',
+  padding: 10,
+  width: 200,
+};
+
+
+const fileList = [
+  {
+    name: "invoice.pdf",
+    url: "/dummpy.pdf",
+    type: "invoice",
+    isBadQuality: false,
+  },
+  {
+    name: "invoice.pdf",
+    url: "/dummpy.pdf",
+    type: "imei",
+    isBadQuality: true,
+  }
+]
+
+const dataSource = [
+  {
+    key: '1',
+    value: 'Mike',
+  },
+  {
+    key: '2',
+    value: 'Mike',
+  },
+  {
+    key: '3',
+    value: 'Mike',
+  },
+];
+
+const columns = [
+  {
+    title: 'Key',
+    dataIndex: 'key',
+    key: 'key',
+  },
+  {
+    title: 'Predicted',
+    dataIndex: 'value',
+    key: 'value',
+  },
+  {
+    title: 'Submitted',
+    dataIndex: 'value',
+    key: 'value',
+  },
+  {
+    title: 'Revised',
+    dataIndex: 'value',
+    key: 'value',
+  },
+];
+
+
+const FileCard = ({ file, isSelected, onClick }) => {
+  return (
+    <div style={{
+      border: '1px solid #ccc',
+      width: '200px',
+      backgroundColor: isSelected? '#d4ecff' : '#fff',
+      padding: '4px 8px',
+      marginRight: '4px',
+      marginTop: '4px',
+    }} onClick={onClick}>
+      <div>
+        <span style={{
+          fontSize: '12px',
+          color: '#333',
+          fontWeight: 'bold',
+          padding: '4px 8px',
+        }}>{file.type.toUpperCase()}</span>
+        <span style={{
+          fontSize: '12px',
+          color: '#aaa',
+          fontWeight: 'bold',
+          padding: '4px 8px',
+        }}>{file.name}</span>
+      </div>
+    </div>
+  );
+
+};
+
+const InferencePage = () => {
+  const [selectedFileId, setSelectedFileId] = useState(0);
+  const selectFileByIndex = (index) => {
+    setSelectedFileId(index);
+  };
+
+  return (
+    <>
+      {/* <SbtPageHeader
+        title={t`Result Review`}
+      /> */}
+      <Layout style={{
+        overflow: 'hidden',
+        width: '100%',
+        maxWidth: '100%',
+        minHeight: 'calc(100vh - 200px)',
+        display: 'flex',
+        padding: '8px',
+      }}>
+        <Layout>
+          <Content style={contentStyle}>
+            <div style={{
+              height: "450px",
+              border: "1px solid #ccc",
+              flexGrow: 0,
+            }}>
+              <FileViewer documents={
+                [
+                  { uri: "/dummy.pdf" }
+                ]
+              } config={{
+                header: {
+                  disableHeader: true,
+                  disableFileName: true,
+                  retainURLParams: true,
+                },
+                csvDelimiter: ",", // "," as default,
+                pdfZoom: {
+                  defaultZoom: 1.1, // 1 as default,
+                  zoomJump: 0.2, // 0.1 as default,
+                },
+                pdfVerticalScrollByDefault: true, // false as default
+              }} />
+            </div>
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "row",
+                height: "100px",
+              }}>
+              {fileList.map((file, index) => (
+                <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
+                  () => {
+                    setSelectedFileId(index);
+                  }
+                }/>
+              ))}
+            </div>
+          </Content>
+          <Sider width="500px" style={siderStyle}>
+            <h2 style={{margin: "0 0 10px 0"}}>Overview</h2>
+            <Input size='small' addonBefore="Request ID" style={{marginBottom: "4px"}} readOnly/>
+            <Input size='small' addonBefore="Redemption" style={{marginBottom: "4px"}} readOnly/>
+            <Input size='small' addonBefore="Uploaded date" style={{marginBottom: "4px"}} readOnly/>
+            <Input size='small' addonBefore="Request time" style={{marginBottom: "4px"}} readOnly/>
+            <Input size='small' addonBefore="Processing time" style={{marginBottom: "4px"}} readOnly/>
+            <div style={{marginBottom: "8px", marginTop: "8px", display: "flex"}}>
+              <Button type="primary" size='middle'>Confirm result</Button>
+            </div>
+            <Table dataSource={dataSource} columns={columns} />
+          </Sider>
+        </Layout>
+      </Layout>
+    </>
+  );
+};
+
+export default InferencePage;