From 39e4915df05f6aa6fc7efde64f53f1338aecd89c Mon Sep 17 00:00:00 2001 From: Vu Khanh Du Date: Thu, 15 Feb 2024 15:51:54 +0700 Subject: [PATCH] fix: dashboard ui --- .../report-detail/report-overview-table.tsx | 84 +++++++++++-------- cope2n-fe/src/theme/table.scss | 8 ++ cope2n-fe/src/utils/metric-format.ts | 58 +++++++------ 3 files changed, 91 insertions(+), 59 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 c607be5..544a750 100644 --- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx +++ b/cope2n-fe/src/components/report-detail/report-overview-table.tsx @@ -1,7 +1,7 @@ import type { TableColumnsType } from 'antd'; import { Table } from 'antd'; import React from 'react'; -import { formatPercent, ensureMin, ensureMax } from 'utils/metric-format'; +import { ensureMax, ensureMin, formatPercent } from 'utils/metric-format'; interface DataType { key: React.Key; @@ -43,7 +43,8 @@ const columns: TableColumnsType = [ { text: 'SEIN', value: 'SEIN' }, ], filterMode: 'menu', - onFilter: (value: string, record) => record.subSidiaries.includes(String(value).toUpperCase()), + onFilter: (value: string, record) => + record.subSidiaries.includes(String(value).toUpperCase()), }, { title: 'OCR extraction date', @@ -62,13 +63,49 @@ const columns: TableColumnsType = [ onFilter: (value: string, record) => record.extractionDate.includes(value), }, { - title: 'OCR Images', + title: 'Total OCR Received (Image Count)', + dataIndex: 'totalOCRReceived', + key: 'totalOCRReceived', + width: '130px', + className: 'hide-border-right', + render: (_, record) => { + return {record.snImeiTC + record.invoiceTC}; + }, + }, + { + title: '', + children: [ + { + title: 'SN/IMEI', + dataIndex: 'snImeiTC', + key: 'snImeiTC', + width: '50px', + className: 'show-border-left', + }, + { + title: 'Invoice', + dataIndex: 'invoiceTC', + key: 'invoiceTC', + width: '50px', + }, + ], + }, + { + title: 'Total OCR Redemptions (Image Count)', + dataIndex: 'totalImages', + key: 'totalImages', + width: '130px', + className: 'hide-border-right', + }, + { + title: '', children: [ { title: 'SN/IMEI', dataIndex: 'snOrImeiNumber', key: 'snOrImeiNumber', width: '50px', + className: 'show-border-left', }, { title: 'Invoice', @@ -78,12 +115,6 @@ const columns: TableColumnsType = [ }, ], }, - { - title: 'Total Images', - dataIndex: 'totalImages', - key: 'totalImages', - width: '130px', - }, { title: 'Image Quality', children: [ @@ -94,12 +125,12 @@ const columns: TableColumnsType = [ width: '50px', }, { - title: '% Successful', + title: 'Successful (%)', dataIndex: 'successfulPercentage', key: 'successfulPercentage', width: '120px', render: (_, record) => { - return {(record.successfulPercentage * 100)?.toFixed(2)}; + return {formatPercent(record.successfulPercentage)}; }, }, { @@ -109,10 +140,10 @@ const columns: TableColumnsType = [ width: '30px', }, { - title: '% Bad', + title: 'Bad (%)', dataIndex: 'badPercentage', key: 'badPercentage', - width: '60px', + width: '80px', render: (_, record) => { const isAbnormal = ensureMax(record.badPercentage, 0.1); return ( @@ -134,7 +165,7 @@ const columns: TableColumnsType = [ key: 'snImeiAAR', width: '130px', render: (_, record) => { - const isAbnormal = ensureMin(record.snImeiAAR, 0.95) + const isAbnormal = ensureMin(record.snImeiAAR, 0.98); return ( {formatPercent(record.snImeiAAR)} @@ -148,7 +179,7 @@ const columns: TableColumnsType = [ key: 'purchaseDateAAR', width: '130px', render: (_, record) => { - const isAbnormal = ensureMin(record.purchaseDateAAR, 0.95); + const isAbnormal = ensureMin(record.purchaseDateAAR, 0.98); return ( {formatPercent(record.purchaseDateAAR)} @@ -162,7 +193,7 @@ const columns: TableColumnsType = [ key: 'retailerNameAAR', width: '130px', render: (_, record) => { - const isAbnormal = ensureMin(record.retailerNameAAR, 0.95); + const isAbnormal = ensureMin(record.retailerNameAAR, 0.98); return ( {formatPercent(record.retailerNameAAR)} @@ -173,7 +204,7 @@ const columns: TableColumnsType = [ ], }, { - title: 'Average Processing Time', + title: 'Average Processing Per Image (Seconds)', children: [ { title: 'SN/IMEI', @@ -203,21 +234,6 @@ const columns: TableColumnsType = [ }, ], }, - { - title: 'Usage (Transaction Count)', - children: [ - { - title: 'SN/IMEI', - dataIndex: 'snImeiTC', - key: 'snImeiTC', - }, - { - title: 'Invoice', - dataIndex: 'invoiceTC', - key: 'invoiceTC', - }, - ], - }, ]; interface ReportOverViewTableProps { @@ -236,9 +252,9 @@ const ReportOverViewTable: React.FC = ({ key: index, subSidiaries: item.subs, extractionDate: item.extraction_date, + totalImages: item.total_images, snOrImeiNumber: item.num_imei, invoiceNumber: item.num_invoice, - totalImages: item.total_images, successfulNumber: item.images_quality.successful, successfulPercentage: item.images_quality.successful_percent, badNumber: item.images_quality.bad, @@ -263,7 +279,7 @@ const ReportOverViewTable: React.FC = ({ bordered size='small' scroll={{ x: 2000 }} - pagination={false} + pagination={false} /> ); diff --git a/cope2n-fe/src/theme/table.scss b/cope2n-fe/src/theme/table.scss index cfa2aff..fdd2065 100644 --- a/cope2n-fe/src/theme/table.scss +++ b/cope2n-fe/src/theme/table.scss @@ -1,3 +1,11 @@ .ant-table-thead > tr > th { font-weight: 600 !important; } + +.sbt-table-wrapper .sbt-table-thead .hide-border-right { + border-right: none !important; +} + +.sbt-table-wrapper .sbt-table-thead .show-border-left { + border-left: 1px solid #f0f0f0 !important; +} \ No newline at end of file diff --git a/cope2n-fe/src/utils/metric-format.ts b/cope2n-fe/src/utils/metric-format.ts index 6e42167..c106edc 100644 --- a/cope2n-fe/src/utils/metric-format.ts +++ b/cope2n-fe/src/utils/metric-format.ts @@ -1,29 +1,37 @@ -export const formatPercent = (value: number) => { - if (value === 0) { - return '-'; - } - if (value < 100.0) { - value = value * 100; - } - return value.toFixed(2); -} +export const formatPercent = (value: number, floatingPoint: number = 1) => { + if (value === 0) { + return '-'; + } + if (value < 100.0) { + value = value * 100; + } + return value.toFixed(floatingPoint); +}; -export const ensureMin = (value: number, min: number, skipZero: boolean = true) => { - if (skipZero && value === 0) { - return false; - } - if (value < min) { - return true; - } +export const ensureMin = ( + value: number, + min: number, + skipZero: boolean = true, +) => { + if (skipZero && value === 0) { return false; -} + } + if (value < min) { + return true; + } + return false; +}; -export const ensureMax = (value: number, max: number, skipZero: boolean = true) => { - if (skipZero && value === 0) { - return false; - } - if (value > max) { - return true; - } +export const ensureMax = ( + value: number, + max: number, + skipZero: boolean = true, +) => { + if (skipZero && value === 0) { return false; -} + } + if (value > max) { + return true; + } + return false; +};