Merge pull request #21 from SDSRV-IDP/improve-ui

Improve UI

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

@@ -45,29 +45,22 @@ function LeftMenu() {
       style={{
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'space-between',
         height: '100%',
       }}
     >
+      <div style={{
+        padding: '16px 8px 8px 8px',
+        fontWeight: 600,
+        color: '#555',
+      }}>
+        Menu
+      </div>
       <Menu
         mode='vertical'
         selectedKeys={[location.pathname]}
         style={{ borderRight: 'none' }}
         items={generalSubItems}
       />
-      {/* <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          marginLeft: '20px',
-          marginBottom: '20px',
-          gap: '10px',
-          cursor: 'pointer',
-        }}
-      >
-        <QuestionCircleOutlined />
-        <span>Help</span>
-      </div> */}
     </div>
   );
 }

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

@@ -48,7 +48,7 @@ const columns: TableColumnsType<DataType> = [
     title: 'OCR extraction date',
     dataIndex: 'extractionDate',
     key: 'extractionDate',
-    width: '130px',
+    width: 180,
     render: (_, record) => {
       if (record.extractionDate.includes('Subtotal'))
         return (
@@ -262,6 +262,7 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
         bordered
         size='small'
         scroll={{ x: 2000 }}
+        pagination={false} 
       />
     </div>
   );

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

@@ -14,7 +14,7 @@ const ReportTable: React.FC = () => {
   const navigate = useNavigate();
 
   const [pagination, setPagination] = useState(() => ({
-    page: report_data?.page.total_pages || 1,
+    page: 1,
     page_size: 10,
   }));
 

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

@@ -107,12 +107,6 @@ const Dashboard = () => {
             }}
           />
         </Form.Item>
-        <Form.Item>
-          <Button type='primary' style={{ height: 38 }}
-          >
-            View
-          </Button>
-        </Form.Item>
       </Form>
       <ReportOverViewTable
         isLoading={isLoading}

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

@@ -14,7 +14,7 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { downloadReport } from 'request/report';
 import styled from 'styled-components';
-import { SheetViewer } from "react-office-viewer"
+import { SheetViewer } from "react-office-viewer";
 
 export interface ReportFormValues {
   dateRange: [Dayjs, Dayjs];
@@ -138,9 +138,21 @@ const ReportDetail = () => {
         </Typography.Title>
       </HeaderContainer>
       <ReportContainer>
-        {(fileObject && !error) && <SheetViewer file={fileObject} />}
+        {(fileObject && !error) && <>
+          <div style={{ width: '100%', marginBottom: '10px' }}>
+            <b>Note: </b><i>All changes here will not be saved into server.</i>
+          </div>
+          <SheetViewer file={fileObject} />
+        </>}
         {(!fileObject && !error) && <Typography.Title level={5}>Loading...</Typography.Title>}
-        {error && <Typography.Title level={5}>{error}</Typography.Title>}
+        {error && <>
+          <Typography.Title level={5}>
+          {error}</Typography.Title>
+          <div>Try downloading the file:</div>
+           <a href={fileObject.url} download={fileObject.name}>
+             {fileObject.name}
+           </a>
+        </>}
       </ReportContainer>
     </>
   );