Add report details view

cope2n-fe/package.json

@@ -43,6 +43,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-json-view-lite": "^1.2.1",
+    "react-office-viewer": "^1.0.4",
     "react-router-dom": "^6.6.1",
     "styled-components": "^5.3.6",
     "uuid": "^9.0.0"

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

@@ -3,8 +3,6 @@ import { t } from '@lingui/macro';
 import {
   Button,
   Space,
-  Table,
-  TableColumnsType,
   Tooltip,
   Typography,
 } from 'antd';
@@ -12,10 +10,11 @@ import { SbtPageHeader } from 'components/page-header';
 import { Dayjs } from 'dayjs';
 import { ReportDetailList, ReportItemDetail } from 'models';
 import { useReportDetailList } from 'queries/report';
-import { useState } from 'react';
+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"
 
 export interface ReportFormValues {
   dateRange: [Dayjs, Dayjs];
@@ -33,225 +32,13 @@ const HeaderContainer = styled(Space)`
   margin-bottom: 16px;
 `;
 
-const ReportInformationContainer = styled.div`
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  padding: 16px;
-  border-radius: 10px;
-  width: 100%;
-  height: 400px;
-`;
-
-const columns: TableColumnsType<ReportItemDetail> = [
-  {
-    title: 'Request ID',
-    dataIndex: 'Request ID',
-    key: 'Request ID',
-    width: 100,
-    render: (value, record, index) => {
-      const shortenedValue =
-        String(value).length > 20
-          ? String(value).substring(0, 20) + '...'
-          : String(value);
-      return <Tooltip title={value}>{shortenedValue}</Tooltip>;
-    },
-  },
-  {
-    title: 'Redemption Number',
-    dataIndex: 'Redemption Number',
-    key: 'Redemption Number',
-  },
-  {
-    title: 'Image type',
-    dataIndex: 'Image type',
-    key: 'Image type',
-  },
-  {
-    title: 'IMEI_user submitted',
-    dataIndex: 'IMEI_user submitted',
-    key: 'IMEI_user submitted',
-  },
-  {
-    title: 'IMEI_OCR retrieved',
-    dataIndex: 'IMEI_OCR retrieved',
-    key: 'IMEI_OCR retrieved',
-  },
-
-  {
-    title: 'IMEI1 Accuracy',
-    dataIndex: 'IMEI1 Accuracy',
-    key: 'IMEI1 Accuracy',
-    render: (_, record) => {
-      const isAbnormal = Number(record['IMEI1 Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['IMEI1 Accuracy'] &&
-            (Number(record['IMEI1 Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-
-  {
-    title: 'Invoice_Purchase Date_Consumer',
-    dataIndex: 'Invoice_Purchase Date_Consumer',
-    key: 'Invoice_Purchase Date_Consumer',
-  },
-  {
-    title: 'Invoice_Purchase Date_OCR',
-    dataIndex: 'Invoice_Purchase Date_OCR',
-    key: 'Invoice_Purchase Date_OCR',
-  },
-  {
-    title: 'Invoice_Purchase Date Accuracy',
-    dataIndex: 'Invoice_Purchase Date Accuracy',
-    key: 'Invoice_Purchase Date Accuracy',
-    render: (_, record) => {
-      const isAbnormal =
-        Number(record['Invoice_Purchase Date Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['Invoice_Purchase Date Accuracy'] &&
-            (Number(record['Invoice_Purchase Date Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-
-  {
-    title: 'Invoice_Retailer_Consumer',
-    dataIndex: 'Invoice_Retailer_Consumer',
-    key: 'Invoice_Retailer_Consumer',
-  },
-  {
-    title: 'Invoice_Retailer_OCR',
-    dataIndex: 'Invoice_Retailer_OCR',
-    key: 'Invoice_Retailer_OCR',
-  },
-  {
-    title: 'Invoice_Retailer Accuracy',
-    dataIndex: 'Invoice_Retailer Accuracy',
-    key: 'Invoice_Retailer Accuracy',
-    render: (_, record) => {
-      const isAbnormal = Number(record['Invoice_Retailer Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['Invoice_Retailer Accuracy'] &&
-            (Number(record['Invoice_Retailer Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-  {
-    title: 'Retailer_Revised Accuracy',
-    dataIndex: 'Retailer_Revised Accuracy',
-    key: 'Retailer_Revised Accuracy',
-    render: (_, record) => {
-      const isAbnormal = Number(record['Retailer_Revised Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['Retailer_Revised Accuracy'] &&
-            (Number(record['Retailer_Revised Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-  {
-    title: 'OCR Image Accuracy',
-    dataIndex: 'OCR Image Accuracy',
-    key: 'OCR Image Accuracy',
-    render: (_, record) => {
-      const isAbnormal = Number(record['OCR Image Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['OCR Image Accuracy'] &&
-            (Number(record['OCR Image Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-  {
-    title: 'OCR Image Speed (seconds)',
-    dataIndex: 'OCR Image Speed (seconds)',
-    key: 'OCR Image Speed (seconds)',
-    render: (_, record) => {
-      const isAbnormal = Number(record['OCR Image Speed (seconds)']) > 2;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['OCR Image Speed (seconds)'] &&
-            Number(record['OCR Image Speed (seconds)']).toFixed(2)}
-        </span>
-      );
-    },
-    sorter: (a, b) =>
-      a['OCR Image Speed (seconds)'] - b['OCR Image Speed (seconds)'],
-  },
-  {
-    title: 'Reviewed',
-    dataIndex: 'Reviewed',
-    key: 'Reviewed',
-  },
-  {
-    title: 'Bad Image Reasons',
-    dataIndex: 'Bad Image Reasons',
-    key: 'Bad Image Reasons',
-  },
-  {
-    title: 'Countermeasures',
-    dataIndex: 'Countermeasures',
-    key: 'Countermeasures',
-  },
-  {
-    title: 'IMEI_Revised Accuracy',
-    dataIndex: 'IMEI_Revised Accuracy',
-    key: 'IMEI_Revised Accuracy',
-    render: (_, record) => {
-      const isAbnormal = Number(record['IMEI_Revised Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['IMEI_Revised Accuracy'] &&
-            (Number(record['IMEI_Revised Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-  {
-    title: 'Purchase Date_Revised Accuracy',
-    dataIndex: 'Purchase Date_Revised Accuracy',
-    key: 'Purchase Date_Revised Accuracy',
-    render: (_, record) => {
-      const isAbnormal =
-        Number(record['Purchase Date_Revised Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['Purchase Date_Revised Accuracy'] &&
-            (Number(record['Purchase Date_Revised Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-  {
-    title: 'Retailer_Revised Accuracy',
-    dataIndex: 'Retailer_Revised Accuracy',
-    key: 'Retailer_Revised Accuracy',
-    render: (_, record) => {
-      const isAbnormal = Number(record['Retailer_Revised Accuracy']) * 100 < 25;
-      return (
-        <span style={{ color: isAbnormal ? 'red' : '' }}>
-          {record['Retailer_Revised Accuracy'] &&
-            (Number(record['Retailer_Revised Accuracy']) * 100).toFixed(2)}
-        </span>
-      );
-    },
-  },
-];
-
 const ReportDetail = () => {
+  const [fileObject, setFileObject] = useState(null);
   const [pagination, setPagination] = useState({
     page: 1,
     page_size: 10,
   });
   const { id } = useParams<{ id: string }>();
-
   const { isLoading, data } = useReportDetailList({
     report_id: id,
     page: pagination.page,
@@ -271,6 +58,18 @@ const ReportDetail = () => {
     URL.revokeObjectURL(anchorElement.href);
   };
 
+  // Download and show report
+  useEffect(() => {
+    downloadReport(id, (fileDetails) => {
+      var blob = new Blob(
+          [fileDetails.file],
+          {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"}
+      );
+      let blobUrl = URL.createObjectURL(blob);
+      setFileObject(blobUrl);
+    });
+  }, []);
+
   const handleBack = () => {
     window.history.back();
   };
@@ -330,28 +129,7 @@ const ReportDetail = () => {
         </Typography.Title>
       </HeaderContainer>
       <ReportContainer>
-        <Table
+        {fileObject && <SheetViewer file={fileObject} />}
-          loading={isLoading}
-          columns={columns}
-          dataSource={report_data?.report_detail}
-          bordered
-          size='small'
-          pagination={{
-            current: pagination.page,
-            pageSize: pagination.page_size,
-            total: report_data?.page.count,
-            showTotal: (total, range) =>
-              `${range[0]}-${range[1]} of ${total} items`,
-            onChange: (page, pageSize) => {
-              setPagination({
-                page,
-                page_size: pageSize || 10,
-              });
-            },
-            showSizeChanger: false,
-          }}
-          scroll={{ x: 2000 }}
-        />
       </ReportContainer>
     </>
   );

cope2n-fe/src/request/report.ts

@@ -86,7 +86,7 @@ export async function getOverViewReport(params?: DashboardOverviewParams) {
   }
 }
 
-export async function downloadReport(report_id: string) {
+export async function downloadReport(report_id: string, downloadFinishedCallback?: (fileDetails: any) => void) {
   try {
     const response = await API.get(`/ctel/get_report_file/${report_id}/`, {
       responseType: 'blob', // Important
@@ -104,6 +104,10 @@ export async function downloadReport(report_id: string) {
     const file = new Blob([response.data], {
       type: 'application/vnd.ms-excel',
     });
+    downloadFinishedCallback && downloadFinishedCallback({
+      file: file,
+      filename: filename,
+    });
     return {
       file: file,
       filename: filename,