150 lines
3.6 KiB
TypeScript
150 lines
3.6 KiB
TypeScript
import type { TableColumnsType } from 'antd';
|
|
import { Button, Table } from 'antd';
|
|
import { ReportDetail } from 'models';
|
|
import { useReportList } from 'queries/report';
|
|
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
const ReportTable: React.FC = () => {
|
|
const { isLoading, data: reportData } = useReportList({
|
|
page_size: 100,
|
|
});
|
|
const report_data: any = reportData;
|
|
const navigate = useNavigate();
|
|
|
|
const [pagination, setPagination] = useState(() => ({
|
|
page: report_data?.page.total_pages || 1,
|
|
page_size: 10,
|
|
}));
|
|
|
|
const columns: TableColumnsType<ReportDetail> = [
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'ID',
|
|
key: 'ID',
|
|
sorter: (a, b) => a.ID - b.ID,
|
|
},
|
|
{
|
|
title: 'Created Date',
|
|
dataIndex: 'Created Date',
|
|
key: 'Created Date',
|
|
},
|
|
{
|
|
title: 'No. Requests',
|
|
dataIndex: 'No. Requests',
|
|
key: 'No. Requests',
|
|
},
|
|
{
|
|
title: 'Status',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
},
|
|
{
|
|
title: 'Purchase Date Acc',
|
|
dataIndex: 'Purchase Date Acc',
|
|
key: 'Purchase Date Acc',
|
|
render: (_, record) => {
|
|
return (
|
|
record['Purchase Date Acc'] &&
|
|
Number(record['Purchase Date Acc']).toFixed(2)
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
title: 'Retailer Acc',
|
|
dataIndex: 'Retailer Acc',
|
|
key: 'Retailer Acc',
|
|
render: (_, record) => {
|
|
return (
|
|
record['Retailer Acc'] && Number(record['Retailer Acc']).toFixed(2)
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'IMEI Acc',
|
|
dataIndex: 'IMEI Acc',
|
|
key: 'IMEI Acc',
|
|
render: (_, record) => {
|
|
return record['IMEI Acc'] && Number(record['IMEI Acc']).toFixed(2);
|
|
},
|
|
},
|
|
{
|
|
title: 'Avg Accuracy',
|
|
dataIndex: 'Avg Accuracy',
|
|
key: 'Avg Accuracy',
|
|
render: (_, record) => {
|
|
return (
|
|
record['Avg Accuracy'] && Number(record['Avg Accuracy']).toFixed(2)
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Avg Client Request Time',
|
|
dataIndex: 'Avg. Client Request Time',
|
|
key: 'Avg. Client Request Time',
|
|
render: (_, record) => {
|
|
return (
|
|
record['Avg Client Request Time'] &&
|
|
Number(record['Avg Client Request Time']).toFixed(2)
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Avg. OCR Processing Time',
|
|
dataIndex: 'Avg. OCR Processing Time',
|
|
key: 'Avg. OCR Processing Time',
|
|
render: (_, record) => {
|
|
return (
|
|
record['Avg. OCR Processing Time'] &&
|
|
Number(record['Avg. OCR Processing Time']).toFixed(2)
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Actions',
|
|
dataIndex: 'actions',
|
|
key: 'actions',
|
|
width: 200,
|
|
render: (_, record) => {
|
|
return (
|
|
<div style={{ flexDirection: 'row' }}>
|
|
<Button
|
|
onClick={() => {
|
|
navigate(`/reports/${record.report_id}/detail`);
|
|
}}
|
|
style={{ marginRight: 10 }}
|
|
>
|
|
Detail
|
|
</Button>
|
|
<Button>Download</Button>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
loading={isLoading}
|
|
columns={columns}
|
|
dataSource={(report_data && report_data?.report_detail) || []}
|
|
bordered
|
|
size='small'
|
|
pagination={{
|
|
current: pagination.page,
|
|
pageSize: pagination.page_size,
|
|
total: report_data?.count || 0,
|
|
onChange: (page, pageSize) => {
|
|
setPagination({ page, page_size: pageSize || 10 });
|
|
},
|
|
showSizeChanger: false,
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ReportTable;
|