From e95f9c9f70282b2a21de0e9d8de404dc85f00308 Mon Sep 17 00:00:00 2001
From: Viet Anh Nguyen <nv.anh5@samsung.com>
Date: Mon, 19 Feb 2024 11:02:21 +0700
Subject: [PATCH] Add review screen + Return - for 0

---
 cope2n-fe/src/components/left-menu/index.tsx  |  2 +-
 .../report-detail/report-overview-table.tsx   | 11 +++-
 cope2n-fe/src/pages/reviews/index.tsx         | 52 +++++++++----------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/cope2n-fe/src/components/left-menu/index.tsx b/cope2n-fe/src/components/left-menu/index.tsx
index 4c9206e..d0390dc 100644
--- a/cope2n-fe/src/components/left-menu/index.tsx
+++ b/cope2n-fe/src/components/left-menu/index.tsx
@@ -35,7 +35,7 @@ function LeftMenu() {
   const generalSubItems = [
     getItem(t`Dashboard`, '/dashboard', <AppstoreOutlined />),
     getItem(t`Reports`, '/reports', <BarChartOutlined />),
-    getItem(t`Review`, '/reviews', <FileSearchOutlined />),
+    // getItem(t`Review`, '/reviews', <FileSearchOutlined />),
     getItem(t`Inference`, '/inference', <RotateRightOutlined />),
     // getItem(t`Users`, '/users', <UsergroupAddOutlined />),
   ];
diff --git a/cope2n-fe/src/components/report-detail/report-overview-table.tsx b/cope2n-fe/src/components/report-detail/report-overview-table.tsx
index 544a750..ab5fd25 100644
--- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx
+++ b/cope2n-fe/src/components/report-detail/report-overview-table.tsx
@@ -69,7 +69,8 @@ const columns: TableColumnsType<DataType> = [
     width: '130px',
     className: 'hide-border-right',
     render: (_, record) => {
-      return <span>{record.snImeiTC + record.invoiceTC}</span>;
+      const value = record.snImeiTC + record.invoiceTC;
+      return <span>{value ? value : '-'}</span>;
     },
   },
   {
@@ -81,12 +82,20 @@ const columns: TableColumnsType<DataType> = [
         key: 'snImeiTC',
         width: '50px',
         className: 'show-border-left',
+        render: (_, record) => {
+          const value = record.snImeiTC;
+          return <span>{value ? value : '-'}</span>;
+        },
       },
       {
         title: 'Invoice',
         dataIndex: 'invoiceTC',
         key: 'invoiceTC',
         width: '50px',
+        render: (_, record) => {
+          const value = record.invoiceTC;
+          return <span>{value ? value : '-'}</span>;
+        },
       },
     ],
   },
diff --git a/cope2n-fe/src/pages/reviews/index.tsx b/cope2n-fe/src/pages/reviews/index.tsx
index 55ac845..616fb15 100644
--- a/cope2n-fe/src/pages/reviews/index.tsx
+++ b/cope2n-fe/src/pages/reviews/index.tsx
@@ -1,17 +1,11 @@
 import { t } from '@lingui/macro';
-import { Button, message, Upload, Input, Table  } from 'antd';
+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;
 
-const contentStyle: React.CSSProperties = {
-  textAlign: 'center',
-  color: '#fff',
-  backgroundColor: '#efefef',
-};
-
 const siderStyle: React.CSSProperties = {
   backgroundColor: '#fafafa',
   padding: 10,
@@ -78,7 +72,7 @@ const FileCard = ({ file, isSelected, onClick }) => {
     <div style={{
       border: '1px solid #ccc',
       width: '200px',
-      backgroundColor: isSelected? '#d4ecff' : '#fff',
+      backgroundColor: isSelected ? '#d4ecff' : '#fff',
       padding: '4px 8px',
       marginRight: '4px',
       marginTop: '4px',
@@ -117,16 +111,24 @@ const InferencePage = () => {
         overflow: 'hidden',
         width: '100%',
         maxWidth: '100%',
-        minHeight: 'calc(100vh - 200px)',
+        minHeight: 'calc(100vh - 100px)',
+        maxHeight: 'calc(100vh - 100px)',
         display: 'flex',
         padding: '8px',
       }}>
-        <Layout>
-          <Content style={contentStyle}>
+          <Content style={{
+            textAlign: 'center',
+            color: '#fff',
+            backgroundColor: '#efefef',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+          }}>
             <div style={{
-              height: "450px",
               border: "1px solid #ccc",
-              flexGrow: 0,
+              flexGrow: 1,
+              height: '500px',
             }}>
               <FileViewer documents={
                 [
@@ -139,10 +141,6 @@ const InferencePage = () => {
                   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>
@@ -152,30 +150,30 @@ const InferencePage = () => {
                 display: "flex",
                 flexDirection: "row",
                 height: "100px",
+                flexGrow: 0,
               }}>
               {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"}}>
+          <Sider width="400px" 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>
     </>
   );
 };