Merge branch 'main' of https://code.sdsdev.co.kr/SDSRV-IDP/sbt-idp into vietanh99-update-xlsx

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<DataType> = [
       { 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<DataType> = [
     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 <span>{record.snImeiTC + record.invoiceTC}</span>;
+    },
+  },
+  {
+    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<DataType> = [
       },
     ],
   },
-  {
-    title: 'Total Images',
-    dataIndex: 'totalImages',
-    key: 'totalImages',
-    width: '130px',
-  },
   {
     title: 'Image Quality',
     children: [
@@ -94,12 +125,12 @@ const columns: TableColumnsType<DataType> = [
         width: '50px',
       },
       {
-        title: '% Successful',
+        title: 'Successful (%)',
         dataIndex: 'successfulPercentage',
         key: 'successfulPercentage',
         width: '120px',
         render: (_, record) => {
-          return <span>{(record.successfulPercentage * 100)?.toFixed(2)}</span>;
+          return <span>{formatPercent(record.successfulPercentage)}</span>;
         },
       },
       {
@@ -109,10 +140,10 @@ const columns: TableColumnsType<DataType> = [
         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<DataType> = [
         key: 'snImeiAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = ensureMin(record.snImeiAAR, 0.95)
+          const isAbnormal = ensureMin(record.snImeiAAR, 0.98);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
               {formatPercent(record.snImeiAAR)}
@@ -148,7 +179,7 @@ const columns: TableColumnsType<DataType> = [
         key: 'purchaseDateAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = ensureMin(record.purchaseDateAAR, 0.95);
+          const isAbnormal = ensureMin(record.purchaseDateAAR, 0.98);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
               {formatPercent(record.purchaseDateAAR)}
@@ -162,7 +193,7 @@ const columns: TableColumnsType<DataType> = [
         key: 'retailerNameAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = ensureMin(record.retailerNameAAR, 0.95);
+          const isAbnormal = ensureMin(record.retailerNameAAR, 0.98);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
               {formatPercent(record.retailerNameAAR)}
@@ -173,7 +204,7 @@ const columns: TableColumnsType<DataType> = [
     ],
   },
   {
-    title: 'Average Processing Time',
+    title: 'Average Processing Per Image (Seconds)',
     children: [
       {
         title: 'SN/IMEI',
@@ -203,21 +234,6 @@ const columns: TableColumnsType<DataType> = [
       },
     ],
   },
-  {
-    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<ReportOverViewTableProps> = ({
         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,

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;
+}

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

@@ -1,14 +1,18 @@
-export const formatPercent = (value: number) => {
+export const formatPercent = (value: number, floatingPoint: number = 1) => {
   if (value === 0) {
     return '-';
   }
   if (value < 100.0) {
     value = value * 100;
   }
-    return value.toFixed(2);
-}
+  return value.toFixed(floatingPoint);
+};
 
-export const ensureMin = (value: number, min: number, skipZero: boolean = true) => {
+export const ensureMin = (
+  value: number,
+  min: number,
+  skipZero: boolean = true,
+) => {
   if (skipZero && value === 0) {
     return false;
   }
@@ -16,9 +20,13 @@ export const ensureMin = (value: number, min: number, skipZero: boolean = true)
     return true;
   }
   return false;
-}
+};
 
-export const ensureMax = (value: number, max: number, skipZero: boolean = true) => {
+export const ensureMax = (
+  value: number,
+  max: number,
+  skipZero: boolean = true,
+) => {
   if (skipZero && value === 0) {
     return false;
   }
@@ -26,4 +34,4 @@ export const ensureMax = (value: number, max: number, skipZero: boolean = true)
     return true;
   }
   return false;
-}
+};