fix overview table
This commit is contained in:
Vu Khanh Du
parent
93aee28494
commit
67daa2d157
@ -5,7 +5,7 @@ import React from 'react';
|
||||
interface DataType {
|
||||
key: React.Key;
|
||||
subSidiaries: string;
|
||||
extractionDate: string | Date;
|
||||
extractionDate: string;
|
||||
snOrImeiNumber: number;
|
||||
invoiceNumber: number;
|
||||
totalImages: number;
|
||||
@ -28,12 +28,26 @@ const columns: TableColumnsType<DataType> = [
|
||||
dataIndex: 'subSidiaries',
|
||||
key: 'subSidiaries',
|
||||
width: '100px',
|
||||
render: (_, record) => {
|
||||
if (record.subSidiaries === '+') return '';
|
||||
return record.subSidiaries;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'OCR extraction date',
|
||||
dataIndex: 'extractionDate',
|
||||
key: 'extractionDate',
|
||||
width: '130px',
|
||||
render: (_, record) => {
|
||||
if (record.extractionDate.includes('Subtotal'))
|
||||
return (
|
||||
<span style={{ fontWeight: 'bold' }}>{record.extractionDate}</span>
|
||||
);
|
||||
return record.extractionDate;
|
||||
},
|
||||
filters: [{ text: 'Subtotal', value: 'Subtotal' }],
|
||||
filterMode: 'menu',
|
||||
onFilter: (value: string, record) => record.extractionDate.includes(value),
|
||||
},
|
||||
{
|
||||
title: 'OCR Images',
|
||||
@ -73,7 +87,7 @@ const columns: TableColumnsType<DataType> = [
|
||||
key: 'successfulPercentage',
|
||||
width: '120px',
|
||||
render: (_, record) => {
|
||||
return <span>{(record.successfulPercentage * 100).toFixed(2)}</span>;
|
||||
return <span>{(record.successfulPercentage * 100)?.toFixed(2)}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -91,7 +105,7 @@ const columns: TableColumnsType<DataType> = [
|
||||
const isAbnormal = record.badPercentage * 100 > 10;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{(record.badPercentage * 100).toFixed(2)}
|
||||
{(record.badPercentage * 100)?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
@ -111,7 +125,7 @@ const columns: TableColumnsType<DataType> = [
|
||||
const isAbnormal = record.snImeiAAR * 100 < 98;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{(record.snImeiAAR * 100).toFixed(2)}
|
||||
{(record.snImeiAAR * 100)?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
@ -139,7 +153,7 @@ const columns: TableColumnsType<DataType> = [
|
||||
const isAbnormal = record.retailerNameAAR * 100 < 98;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{(record.retailerNameAAR * 100).toFixed(2)}
|
||||
{(record.retailerNameAAR * 100)?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
@ -157,7 +171,7 @@ const columns: TableColumnsType<DataType> = [
|
||||
const isAbnormal = record.snImeiAPT > 2;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record.snImeiAPT.toFixed(2)}
|
||||
{record?.snImeiAPT?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
@ -170,7 +184,7 @@ const columns: TableColumnsType<DataType> = [
|
||||
const isAbnormal = record.invoiceAPT > 2;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record.invoiceAPT.toFixed(2)}
|
||||
{record?.invoiceAPT?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
@ -215,231 +229,31 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
|
||||
isLoading,
|
||||
data,
|
||||
}) => {
|
||||
// const [pagination, setPagination] = useState({
|
||||
// page: 1,
|
||||
// page_size: 10,
|
||||
// });
|
||||
// const { isLoading, data } = useOverViewReport({
|
||||
// page: pagination.page,
|
||||
// });
|
||||
|
||||
console.log('check >>>', pagination, isLoading, data);
|
||||
|
||||
const overviewDataResponse = data as any;
|
||||
const dataSubsRows = overviewDataResponse?.overview_data
|
||||
.map((item, index) => {
|
||||
if (item.subs.includes('+')) {
|
||||
return {
|
||||
key: index,
|
||||
subSidiaries: '',
|
||||
extractionDate: item.extraction_date,
|
||||
snOrImeiNumber: '',
|
||||
invoiceNumber: '',
|
||||
totalImages: item.total_images,
|
||||
successfulNumber: item.images_quality.successful,
|
||||
successfulPercentage: item.images_quality.successful_percent,
|
||||
badNumber: item.images_quality.bad,
|
||||
badPercentage: item.images_quality.bad_percent,
|
||||
snImeiAAR: item.average_accuracy_rate.imei,
|
||||
purchaseDateAAR: item.average_accuracy_rate.purchase_date,
|
||||
retailerNameAAR: item.average_accuracy_rate.retailer_name,
|
||||
snImeiAPT: item.average_processing_time.imei,
|
||||
invoiceAPT: item.average_processing_time.invoice,
|
||||
snImeiTC: item.usage.imei,
|
||||
invoiceTC: item.usage.invoice,
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.filter((item) => item);
|
||||
const dataSubsRows = overviewDataResponse?.overview_data.map(
|
||||
(item, index) => {
|
||||
return {
|
||||
key: index,
|
||||
subSidiaries: item.subs,
|
||||
extractionDate: item.extraction_date,
|
||||
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,
|
||||
badPercentage: item.images_quality.bad_percent,
|
||||
snImeiAAR: item.average_accuracy_rate.imei,
|
||||
purchaseDateAAR: item.average_accuracy_rate.purchase_date,
|
||||
retailerNameAAR: item.average_accuracy_rate.retailer_name,
|
||||
snImeiAPT: item.average_processing_time.imei,
|
||||
invoiceAPT: item.average_processing_time.invoice,
|
||||
snImeiTC: item.usage.imei,
|
||||
invoiceTC: item.usage.invoice,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
const expandedRowRender = () => {
|
||||
const subData = overviewDataResponse?.overview_data
|
||||
.map((item, index) => {
|
||||
if (!item.subs.includes('+')) {
|
||||
return {
|
||||
key: index,
|
||||
subSidiaries: item.subs,
|
||||
extractionDate: item.extraction_date,
|
||||
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,
|
||||
badPercentage: item.images_quality.bad_percent,
|
||||
snImeiAAR: item.average_accuracy_rate.imei,
|
||||
purchaseDateAAR: item.average_accuracy_rate.purchase_date,
|
||||
retailerNameAAR: item.average_accuracy_rate.retailer_name,
|
||||
snImeiAPT: item.average_processing_time.imei,
|
||||
invoiceAPT: item.average_processing_time.invoice,
|
||||
snImeiTC: item.usage.imei,
|
||||
invoiceTC: item.usage.invoice,
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.filter((item) => item);
|
||||
|
||||
const subColumns: TableColumnsType<DataType> = [
|
||||
{
|
||||
title: 'Subs',
|
||||
dataIndex: 'subSidiaries',
|
||||
key: 'subSidiaries',
|
||||
width: '100px',
|
||||
},
|
||||
{
|
||||
title: 'OCR extraction date',
|
||||
dataIndex: 'extractionDate',
|
||||
key: 'extractionDate',
|
||||
width: '130px',
|
||||
},
|
||||
{
|
||||
title: 'SN/IMEI',
|
||||
dataIndex: 'snOrImeiNumber',
|
||||
key: 'snOrImeiNumber',
|
||||
width: '50px',
|
||||
},
|
||||
{
|
||||
title: 'Invoice',
|
||||
dataIndex: 'invoiceNumber',
|
||||
key: 'invoiceNumber',
|
||||
width: '50px',
|
||||
},
|
||||
{
|
||||
title: 'Total Images',
|
||||
dataIndex: 'totalImages',
|
||||
key: 'totalImages',
|
||||
width: '130px',
|
||||
},
|
||||
{
|
||||
title: 'Successful',
|
||||
dataIndex: 'successfulNumber',
|
||||
key: 'successfulNumber',
|
||||
width: '50px',
|
||||
},
|
||||
{
|
||||
title: '% Successful',
|
||||
dataIndex: 'successfulPercentage',
|
||||
key: 'successfulPercentage',
|
||||
width: '120px',
|
||||
render: (_, record) => {
|
||||
return <span>{(record.successfulPercentage * 100).toFixed(2)}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Bad',
|
||||
dataIndex: 'badNumber',
|
||||
key: 'badNumber',
|
||||
width: '30px',
|
||||
},
|
||||
{
|
||||
title: '% Bad',
|
||||
dataIndex: 'badPercentage',
|
||||
key: 'badPercentage',
|
||||
width: '60px',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record.badPercentage * 100 > 10;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{(record.badPercentage * 100).toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: 'IMEI / Serial no.',
|
||||
dataIndex: 'snImeiAAR',
|
||||
key: 'snImeiAAR',
|
||||
width: '130px',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record.snImeiAAR * 100 < 98;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{(record.snImeiAAR * 100).toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Purchase date',
|
||||
dataIndex: 'purchaseDateAAR',
|
||||
key: 'purchaseDateAAR',
|
||||
width: '130px',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record.purchaseDateAAR * 100 < 98;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{(record.purchaseDateAAR * 100).toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Retailer name',
|
||||
dataIndex: 'retailerNameAAR',
|
||||
key: 'retailerNameAAR',
|
||||
width: '130px',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record.retailerNameAAR * 100 < 98;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{(record.retailerNameAAR * 100).toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: 'SN/IMEI',
|
||||
dataIndex: 'snImeiAPT',
|
||||
key: 'snImeiAPT',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record.snImeiAPT > 2;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record.snImeiAPT.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Invoice',
|
||||
dataIndex: 'invoiceAPT',
|
||||
key: 'invoiceAPT',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record.invoiceAPT > 2;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record.invoiceAPT.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'SN/IMEI',
|
||||
dataIndex: 'snImeiTC',
|
||||
key: 'snImeiTC',
|
||||
},
|
||||
{
|
||||
title: 'Invoice',
|
||||
dataIndex: 'invoiceTC',
|
||||
key: 'invoiceTC',
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Table
|
||||
columns={subColumns}
|
||||
dataSource={subData}
|
||||
pagination={false}
|
||||
bordered
|
||||
// showHeader={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
@ -448,7 +262,6 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
|
||||
dataSource={dataSubsRows}
|
||||
bordered
|
||||
size='small'
|
||||
expandable={{ expandedRowRender, defaultExpandedRowKeys: [0, 1] }}
|
||||
scroll={{ x: 2000 }}
|
||||
pagination={{
|
||||
current: pagination.page,
|
||||
|
||||
@ -62,9 +62,12 @@ const ReportTable: React.FC = () => {
|
||||
dataIndex: 'Purchase Date Acc',
|
||||
key: 'Purchase Date Acc',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record['Purchase Date Acc'] * 100 < 98;
|
||||
return (
|
||||
record['Purchase Date Acc'] &&
|
||||
Number(record['Purchase Date Acc']).toFixed(2)
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record['Purchase Date Acc'] &&
|
||||
(Number(record['Purchase Date Acc']) * 100)?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
@ -74,8 +77,12 @@ const ReportTable: React.FC = () => {
|
||||
dataIndex: 'Retailer Acc',
|
||||
key: 'Retailer Acc',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record['Retailer Acc'] * 100 < 98;
|
||||
return (
|
||||
record['Retailer Acc'] && Number(record['Retailer Acc']).toFixed(2)
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record['Retailer Acc'] &&
|
||||
(Number(record['Retailer Acc']) * 100)?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
@ -84,7 +91,13 @@ const ReportTable: React.FC = () => {
|
||||
dataIndex: 'IMEI Acc',
|
||||
key: 'IMEI Acc',
|
||||
render: (_, record) => {
|
||||
return record['IMEI Acc'] && Number(record['IMEI Acc']).toFixed(2);
|
||||
const isAbnormal = record['IMEI Acc'] * 100 < 98;
|
||||
return (
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record['IMEI Acc'] &&
|
||||
(Number(record['IMEI Acc']) * 100)?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -92,8 +105,12 @@ const ReportTable: React.FC = () => {
|
||||
dataIndex: 'Avg Accuracy',
|
||||
key: 'Avg Accuracy',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record['Avg Accuracy'] * 100 < 98;
|
||||
return (
|
||||
record['Avg Accuracy'] && Number(record['Avg Accuracy']).toFixed(2)
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record['Avg Accuracy'] &&
|
||||
(Number(record['Avg Accuracy']) * 100)?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
@ -102,9 +119,12 @@ const ReportTable: React.FC = () => {
|
||||
dataIndex: 'Avg. Client Request Time',
|
||||
key: 'Avg. Client Request Time',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record['Avg Client Request Time'] > 2;
|
||||
return (
|
||||
record['Avg Client Request Time'] &&
|
||||
Number(record['Avg Client Request Time']).toFixed(2)
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record['Avg Client Request Time'] &&
|
||||
Number(record['Avg Client Request Time'])?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
@ -113,9 +133,12 @@ const ReportTable: React.FC = () => {
|
||||
dataIndex: 'Avg. OCR Processing Time',
|
||||
key: 'Avg. OCR Processing Time',
|
||||
render: (_, record) => {
|
||||
const isAbnormal = record['Avg. OCR Processing Time'] > 2;
|
||||
return (
|
||||
record['Avg. OCR Processing Time'] &&
|
||||
Number(record['Avg. OCR Processing Time']).toFixed(2)
|
||||
<span style={{ color: isAbnormal ? 'red' : '' }}>
|
||||
{record['Avg. OCR Processing Time'] &&
|
||||
Number(record['Avg. OCR Processing Time'])?.toFixed(2)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user