Merge pull request #98 from SDSRV-IDP/feeback1903

update feedback

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

@@ -6,6 +6,7 @@ import {
   ensureMin,
   formatNumber,
   formatPercent,
+  numberWithCommas,
 } from 'utils/metric-format';
 
 interface DataType {
@@ -31,7 +32,7 @@ interface DataType {
 
 const columns: TableColumnsType<DataType> = [
   {
-    title: 'Subs',
+    title: 'Subsidiary',
     dataIndex: 'subSidiaries',
     key: 'subSidiaries',
     width: '100px',
@@ -76,7 +77,7 @@ const columns: TableColumnsType<DataType> = [
     className: 'hide-border-right',
     render: (_, record) => {
       const value = record.snImeiTC + record.invoiceTC;
-      return <span>{value ? value : '-'}</span>;
+      return <span>{value ? numberWithCommas(value) : '-'}</span>;
     },
   },
   {
@@ -90,7 +91,7 @@ const columns: TableColumnsType<DataType> = [
         className: 'show-border-left',
         render: (_, record) => {
           const value = record.snImeiTC;
-          return <span>{value ? value : '-'}</span>;
+          return <span>{value ? numberWithCommas(value) : '-'}</span>;
         },
       },
       {
@@ -100,7 +101,7 @@ const columns: TableColumnsType<DataType> = [
         width: '50px',
         render: (_, record) => {
           const value = record.invoiceTC;
-          return <span>{value ? value : '-'}</span>;
+          return <span>{value ? numberWithCommas(value) : '-'}</span>;
         },
       },
     ],
@@ -111,6 +112,10 @@ const columns: TableColumnsType<DataType> = [
     key: 'totalImages',
     width: '130px',
     className: 'hide-border-right',
+    render: (_, record) => {
+      const value = record.totalImages;
+      return <span>{value ? numberWithCommas(value) : '-'}</span>;
+    },
   },
   {
     title: '',
@@ -121,12 +126,20 @@ const columns: TableColumnsType<DataType> = [
         key: 'snOrImeiNumber',
         width: '50px',
         className: 'show-border-left',
+        render: (_, record) => {
+          const value = record.snOrImeiNumber;
+          return <span>{value ? numberWithCommas(value) : '-'}</span>;
+        },
       },
       {
         title: 'Invoice',
         dataIndex: 'invoiceNumber',
         key: 'invoiceNumber',
         width: '50px',
+        render: (_, record) => {
+          const value = record.invoiceNumber;
+          return <span>{value ? numberWithCommas(value) : '-'}</span>;
+        },
       },
     ],
   },
@@ -138,6 +151,10 @@ const columns: TableColumnsType<DataType> = [
         dataIndex: 'successfulNumber',
         key: 'successfulNumber',
         width: '50px',
+        render: (_, record) => {
+          const value = record.successfulNumber;
+          return <span>{value ? numberWithCommas(value) : '-'}</span>;
+        },
       },
       {
         title: 'Successful (%)',
@@ -153,6 +170,10 @@ const columns: TableColumnsType<DataType> = [
         dataIndex: 'badNumber',
         key: 'badNumber',
         width: '30px',
+        render: (_, record) => {
+          const value = record.badNumber;
+          return <span>{value ? numberWithCommas(value) : '-'}</span>;
+        },
       },
       {
         title: 'Bad (%)',
@@ -175,7 +196,7 @@ const columns: TableColumnsType<DataType> = [
     title: 'Average accuracy rate (%) \n(※ character-based)',
     children: [
       {
-        title: 'IMEI / Serial no.',
+        title: 'SN/IMEI',
         dataIndex: 'snImeiAAR',
         key: 'snImeiAAR',
         width: '130px',

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

@@ -5,10 +5,14 @@ import { useReportList } from 'queries/report';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { downloadReport } from 'request/report';
-import { formatPercent, ensureMin, ensureMax, formatNumber } from 'utils/metric-format';
+import {
+  ensureMax,
+  ensureMin,
+  formatNumber,
+  formatPercent,
+} from 'utils/metric-format';
 import { datetimeStrToDate } from 'utils/time';
 
-
 const ReportTable: React.FC = () => {
   const { isLoading, data: reportData } = useReportList({
     page_size: 100,
@@ -22,7 +26,7 @@ const ReportTable: React.FC = () => {
   }));
 
   const handleDownloadReport = async (report_id: string) => {
-    const {file, filename} = await downloadReport(report_id);
+    const { file, filename } = await downloadReport(report_id);
     const anchorElement = document.createElement('a');
     anchorElement.href = URL.createObjectURL(file);
     anchorElement.download = filename;
@@ -46,7 +50,11 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Created Date',
       key: 'Created Date',
       render: (_, record) => {
-        return <span>{datetimeStrToDate(record['Created Date'], 'Asia/Singapore')}</span>;
+        return (
+          <span>
+            {datetimeStrToDate(record['Created Date'], 'Asia/Singapore')}
+          </span>
+        );
       },
       width: 110,
     },
@@ -55,7 +63,11 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Start Date',
       key: 'Start Date',
       render: (_, record) => {
-        return <span>{datetimeStrToDate(record['Start Date'], 'Asia/Singapore')}</span>;
+        return (
+          <span>
+            {datetimeStrToDate(record['Start Date'], 'Asia/Singapore')}
+          </span>
+        );
       },
       width: 110,
     },
@@ -64,7 +76,9 @@ const ReportTable: React.FC = () => {
       dataIndex: 'End Date',
       key: 'End Date',
       render: (_, record) => {
-        return <span>{datetimeStrToDate(record['End Date'], 'Asia/Singapore')}</span>;
+        return (
+          <span>{datetimeStrToDate(record['End Date'], 'Asia/Singapore')}</span>
+        );
       },
       width: 110,
     },
@@ -74,7 +88,7 @@ const ReportTable: React.FC = () => {
       key: 'Subsidiary',
       render: (_, record) => {
         return <span>{String(record['Subsidiary']).toUpperCase()}</span>;
-       },
+      },
       width: 110,
     },
     {
@@ -144,7 +158,7 @@ const ReportTable: React.FC = () => {
       },
     },
     {
-      title: 'Avg. Accuracy',
+      title: 'Average Accuracy',
       dataIndex: 'Avg. Accuracy',
       key: 'Avg. Accuracy',
       render: (_, record) => {
@@ -157,7 +171,7 @@ const ReportTable: React.FC = () => {
       },
     },
     {
-      title: 'Avg. OCR Processing Time (ms)',
+      title: 'Average Processing Time (ms)',
       dataIndex: 'Avg. OCR Processing Time',
       key: 'Avg. OCR Processing Time',
       render: (_, record) => {

cope2n-fe/src/utils/metric-format.ts

@@ -1,4 +1,8 @@
-export const formatPercent = (value: any, floatingPoint: number = 1, maskZero: boolean = false) => {
+export const formatPercent = (
+  value: any,
+  floatingPoint: number = 1,
+  maskZero: boolean = false,
+) => {
   if (value === null || value === undefined || (value === 0 && maskZero)) {
     return '-';
   }
@@ -8,7 +12,11 @@ export const formatPercent = (value: any, floatingPoint: number = 1, maskZero: b
   return value.toFixed(floatingPoint);
 };
 
-export const formatNumber = (value: any, floatingPoint: number = 1, maskZero: boolean = false) => {
+export const formatNumber = (
+  value: any,
+  floatingPoint: number = 1,
+  maskZero: boolean = false,
+) => {
   if (value === null || value === undefined || (value === 0 && maskZero)) {
     return '-';
   }
@@ -44,3 +52,7 @@ export const ensureMax = (
   }
   return false;
 };
+
+export const numberWithCommas = (x: number) => {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};