From 052556b68234296021a0562f65061a48d3037f2e Mon Sep 17 00:00:00 2001 From: Vu Khanh Du Date: Thu, 21 Mar 2024 09:39:29 +0700 Subject: [PATCH] update feedback --- .../report-detail/report-overview-table.tsx | 31 +++++++++++++++--- .../components/report-detail/report-table.tsx | 32 +++++++++++++------ cope2n-fe/src/utils/metric-format.ts | 16 ++++++++-- 3 files changed, 63 insertions(+), 16 deletions(-) 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 56eb847..b96a140 100644 --- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx +++ b/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 = [ { - title: 'Subs', + title: 'Subsidiary', dataIndex: 'subSidiaries', key: 'subSidiaries', width: '100px', @@ -76,7 +77,7 @@ const columns: TableColumnsType = [ className: 'hide-border-right', render: (_, record) => { const value = record.snImeiTC + record.invoiceTC; - return {value ? value : '-'}; + return {value ? numberWithCommas(value) : '-'}; }, }, { @@ -90,7 +91,7 @@ const columns: TableColumnsType = [ className: 'show-border-left', render: (_, record) => { const value = record.snImeiTC; - return {value ? value : '-'}; + return {value ? numberWithCommas(value) : '-'}; }, }, { @@ -100,7 +101,7 @@ const columns: TableColumnsType = [ width: '50px', render: (_, record) => { const value = record.invoiceTC; - return {value ? value : '-'}; + return {value ? numberWithCommas(value) : '-'}; }, }, ], @@ -111,6 +112,10 @@ const columns: TableColumnsType = [ key: 'totalImages', width: '130px', className: 'hide-border-right', + render: (_, record) => { + const value = record.totalImages; + return {value ? numberWithCommas(value) : '-'}; + }, }, { title: '', @@ -121,12 +126,20 @@ const columns: TableColumnsType = [ key: 'snOrImeiNumber', width: '50px', className: 'show-border-left', + render: (_, record) => { + const value = record.snOrImeiNumber; + return {value ? numberWithCommas(value) : '-'}; + }, }, { title: 'Invoice', dataIndex: 'invoiceNumber', key: 'invoiceNumber', width: '50px', + render: (_, record) => { + const value = record.invoiceNumber; + return {value ? numberWithCommas(value) : '-'}; + }, }, ], }, @@ -138,6 +151,10 @@ const columns: TableColumnsType = [ dataIndex: 'successfulNumber', key: 'successfulNumber', width: '50px', + render: (_, record) => { + const value = record.successfulNumber; + return {value ? numberWithCommas(value) : '-'}; + }, }, { title: 'Successful (%)', @@ -153,6 +170,10 @@ const columns: TableColumnsType = [ dataIndex: 'badNumber', key: 'badNumber', width: '30px', + render: (_, record) => { + const value = record.badNumber; + return {value ? numberWithCommas(value) : '-'}; + }, }, { title: 'Bad (%)', @@ -175,7 +196,7 @@ const columns: TableColumnsType = [ title: 'Average accuracy rate (%) \n(※ character-based)', children: [ { - title: 'IMEI / Serial no.', + title: 'SN/IMEI', dataIndex: 'snImeiAAR', key: 'snImeiAAR', width: '130px', diff --git a/cope2n-fe/src/components/report-detail/report-table.tsx b/cope2n-fe/src/components/report-detail/report-table.tsx index 0011f50..1b8c509 100644 --- a/cope2n-fe/src/components/report-detail/report-table.tsx +++ b/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 {datetimeStrToDate(record['Created Date'], 'Asia/Singapore')}; + return ( + + {datetimeStrToDate(record['Created Date'], 'Asia/Singapore')} + + ); }, width: 110, }, @@ -55,7 +63,11 @@ const ReportTable: React.FC = () => { dataIndex: 'Start Date', key: 'Start Date', render: (_, record) => { - return {datetimeStrToDate(record['Start Date'], 'Asia/Singapore')}; + return ( + + {datetimeStrToDate(record['Start Date'], 'Asia/Singapore')} + + ); }, width: 110, }, @@ -64,7 +76,9 @@ const ReportTable: React.FC = () => { dataIndex: 'End Date', key: 'End Date', render: (_, record) => { - return {datetimeStrToDate(record['End Date'], 'Asia/Singapore')}; + return ( + {datetimeStrToDate(record['End Date'], 'Asia/Singapore')} + ); }, width: 110, }, @@ -74,7 +88,7 @@ const ReportTable: React.FC = () => { key: 'Subsidiary', render: (_, record) => { return {String(record['Subsidiary']).toUpperCase()}; - }, + }, 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) => { diff --git a/cope2n-fe/src/utils/metric-format.ts b/cope2n-fe/src/utils/metric-format.ts index bcf9fd0..f5130ca 100644 --- a/cope2n-fe/src/utils/metric-format.ts +++ b/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, ','); +};