tannedcung/sbt-idp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add filter dashboard

Browse Source
This commit is contained in:
Vu Khanh Du 2024-02-01 12:54:12 +07:00
parent 6eeddd03d9
commit 29b9595ff9
4 changed files with 120 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
cope2n-fe/src/components/report-detail/report-overview-table.tsx
View File

@ -1,7 +1,6 @@
import type { TableColumnsType } from 'antd';
import { Table } from 'antd';
import { useOverViewReport } from 'queries/report';
import React, { useState } from 'react';
import React from 'react';
interface DataType {
key: React.Key;
@ -109,10 +108,10 @@ const columns: TableColumnsType<DataType> = [
key: 'snImeiAAR',
width: '130px',
render: (_, record) => {
const isAbnormal = record.snImeiAAR * 100 < 98;
const isAbnormal = record.snImeiAAR < 98;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{(record.snImeiAAR * 100).toFixed(2)}
{record.snImeiAAR.toFixed(2)}
</span>
);
},
@ -123,10 +122,10 @@ const columns: TableColumnsType<DataType> = [
key: 'purchaseDateAAR',
width: '130px',
render: (_, record) => {
const isAbnormal = record.purchaseDateAAR * 100 < 98;
const isAbnormal = record.purchaseDateAAR < 98;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{(record.purchaseDateAAR * 100).toFixed(2)}
{record.purchaseDateAAR.toFixed(2)}
</span>
);
},
@ -137,10 +136,10 @@ const columns: TableColumnsType<DataType> = [
key: 'retailerNameAAR',
width: '130px',
render: (_, record) => {
const isAbnormal = record.retailerNameAAR * 100 < 98;
const isAbnormal = record.retailerNameAAR < 98;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{(record.retailerNameAAR * 100).toFixed(2)}
{record.retailerNameAAR.toFixed(2)}
</span>
);
},
@ -210,14 +209,22 @@ interface ReportOverViewTableProps {
data: any;
}
const ReportOverViewTable: React.FC = () => {
const [pagination, setPagination] = useState({
page: 1,
page_size: 10,
});
const { isLoading, data } = useOverViewReport({
page: pagination.page,
});
const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
pagination,
setPagination,
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) => {
@ -349,10 +356,10 @@ const ReportOverViewTable: React.FC = () => {
key: 'snImeiAAR',
width: '130px',
render: (_, record) => {
const isAbnormal = record.snImeiAAR * 100 < 98;
const isAbnormal = record.snImeiAAR < 98;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{(record.snImeiAAR * 100).toFixed(2)}
{record.snImeiAAR.toFixed(2)}
</span>
);
},
@ -363,10 +370,10 @@ const ReportOverViewTable: React.FC = () => {
key: 'purchaseDateAAR',
width: '130px',
render: (_, record) => {
const isAbnormal = record.purchaseDateAAR * 100 < 98;
const isAbnormal = record.purchaseDateAAR < 98;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{(record.purchaseDateAAR * 100).toFixed(2)}
{record.purchaseDateAAR.toFixed(2)}
</span>
);
},
@ -377,10 +384,10 @@ const ReportOverViewTable: React.FC = () => {
key: 'retailerNameAAR',
width: '130px',
render: (_, record) => {
const isAbnormal = record.retailerNameAAR * 100 < 98;
const isAbnormal = record.retailerNameAAR < 98;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{(record.retailerNameAAR * 100).toFixed(2)}
{record.retailerNameAAR.toFixed(2)}
</span>
);
},

6
cope2n-fe/src/models/report.ts
View File

@ -3,6 +3,7 @@ import { UseMutationOptions } from '@tanstack/react-query';
export interface ReportDetailList {
report_detail: ReportItemDetail[];
page: Page;
metadata: Metadata;
}
export interface ReportItemDetail {
@ -28,6 +29,11 @@ export interface ReportItemDetail {
'Retailer_Revised Accuracy': any;
}
export interface Metadata {
subsidiary: string;
start_at: string;
end_at: string;
}
export interface Page {
number: number;
total_pages: number;

77
cope2n-fe/src/pages/dashboard/index.tsx
View File

@ -1,8 +1,10 @@
import { t } from '@lingui/macro';
import { Button } from 'antd';
import { Button, DatePicker, Form, Select } from 'antd';
import { SbtPageHeader } from 'components/page-header';
import { ReportOverViewTable } from 'components/report-detail';
import { Dayjs } from 'dayjs';
import { useOverViewReport } from 'queries/report';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
export interface ReportFormValues {
@ -12,35 +14,33 @@ export interface ReportFormValues {
const Dashboard = () => {
const navigate = useNavigate();
// const [form] = Form.useForm<ReportFormValues>();
// const [pagination, setPagination] = useState({
// page: 1,
// page_size: 10,
// });
// const [fromData, setFormData] = useState<{
// start_date: string;
// end_date: string;
// subsidiary: string;
// }>({
// start_date: '',
// end_date: '',
// subsidiary: '',
// });
// const { isLoading, data } = useOverViewReport({
// page: pagination.page,
// page_size: pagination.page_size,
// start_date: fromData.start_date,
// end_date: fromData.end_date,
// subsidiary: fromData.subsidiary,
// });
// const handleSubmit = (values: ReportFormValues) => {
// console.log('check values >>>', values);
// setFormData({
// start_date: values.dateRange[0].format('YYYY-MM-DDTHH:mm:ssZ'),
// end_date: values.dateRange[1].format('YYYY-MM-DDTHH:mm:ssZ'),
// subsidiary: values.subsidiary,
// });
// };
const [form] = Form.useForm<ReportFormValues>();
const [pagination, setPagination] = useState({
page: 1,
page_size: 10,
});
const [fromData, setFormData] = useState<{
start_date: string;
end_date: string;
subsidiary: string;
}>({
start_date: '',
end_date: '',
subsidiary: '',
});
const { isLoading, data } = useOverViewReport({
start_date: fromData.start_date,
end_date: fromData.end_date,
subsidiary: fromData.subsidiary,
});
const handleSubmit = (values: ReportFormValues) => {
console.log('check values >>>', values);
setFormData({
start_date: values.dateRange[0].format('YYYY-MM-DDTHH:mm:ssZ'),
end_date: values.dateRange[1].format('YYYY-MM-DDTHH:mm:ssZ'),
subsidiary: values.subsidiary,
});
};
return (
<>
@ -51,13 +51,13 @@ const Dashboard = () => {
{/* <Button type='primary' icon={<DownloadOutlined />}>
Download
</Button> */}
<Button type='primary' onClick={() => navigate('/reports')}>
{/* <Button type='primary' onClick={() => navigate('/reports')}>
{t`Go to Report page`}
</Button>
</Button> */}
</>
}
/>
{/* <Form
<Form
form={form}
style={{ display: 'flex', flexDirection: 'row', gap: 10 }}
onFinish={handleSubmit}
@ -97,12 +97,17 @@ const Dashboard = () => {
/>
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit'>
<Button type='primary' htmlType='submit' style={{ height: 38 }}>
Submit
</Button>
</Form.Item>
</Form> */}
<ReportOverViewTable />
</Form>
<ReportOverViewTable
pagination={pagination}
setPagination={setPagination}
isLoading={isLoading}
data={data}
/>
</>
);
};

60
cope2n-fe/src/pages/reports/report_detail/index.tsx
View File

@ -1,6 +1,13 @@
import { DownloadOutlined } from '@ant-design/icons';
import { t } from '@lingui/macro';
import { Button, Space, Table, TableColumnsType, Tooltip } from 'antd';
import {
Button,
Space,
Table,
TableColumnsType,
Tooltip,
Typography,
} from 'antd';
import { SbtPageHeader } from 'components/page-header';
import { Dayjs } from 'dayjs';
import { ReportDetailList, ReportItemDetail } from 'models';
@ -19,10 +26,11 @@ const ReportContainer = styled.div`
margin-bottom: 16px;
`;
const CustomSpace = styled(Space)`
&.sbt-space {
/* Add your custom styles here */
}
const HeaderContainer = styled(Space)`
display: flex;
flex-direction: row;\
gap: 16px;
margin-bottom: 16px;
`;
const ReportInformationContainer = styled.div`
@ -73,11 +81,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'IMEI1 Accuracy',
key: 'IMEI1 Accuracy',
render: (_, record) => {
const isAbnormal = Number(record['IMEI1 Accuracy']) * 100 < 25;
const isAbnormal = Number(record['IMEI1 Accuracy']) < 25;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{record['IMEI1 Accuracy'] &&
(Number(record['IMEI1 Accuracy']) * 100).toFixed(2)}
Number(record['IMEI1 Accuracy']).toFixed(2)}
</span>
);
},
@ -98,12 +106,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'Invoice_Purchase Date Accuracy',
key: 'Invoice_Purchase Date Accuracy',
render: (_, record) => {
const isAbnormal =
Number(record['Invoice_Purchase Date Accuracy']) * 100 < 25;
const isAbnormal = Number(record['Invoice_Purchase Date Accuracy']) < 25;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{record['Invoice_Purchase Date Accuracy'] &&
(Number(record['Invoice_Purchase Date Accuracy']) * 100).toFixed(2)}
Number(record['Invoice_Purchase Date Accuracy']).toFixed(2)}
</span>
);
},
@ -124,11 +131,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'Invoice_Retailer Accuracy',
key: 'Invoice_Retailer Accuracy',
render: (_, record) => {
const isAbnormal = Number(record['Invoice_Retailer Accuracy']) * 100 < 25;
const isAbnormal = Number(record['Invoice_Retailer Accuracy']) < 25;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{record['Invoice_Retailer Accuracy'] &&
(Number(record['Invoice_Retailer Accuracy']) * 100).toFixed(2)}
Number(record['Invoice_Retailer Accuracy']).toFixed(2)}
</span>
);
},
@ -138,11 +145,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'Retailer_Revised Accuracy',
key: 'Retailer_Revised Accuracy',
render: (_, record) => {
const isAbnormal = Number(record['Retailer_Revised Accuracy']) * 100 < 25;
const isAbnormal = Number(record['Retailer_Revised Accuracy']) < 25;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{record['Retailer_Revised Accuracy'] &&
(Number(record['Retailer_Revised Accuracy']) * 100).toFixed(2)}
Number(record['Retailer_Revised Accuracy']).toFixed(2)}
</span>
);
},
@ -152,11 +159,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'OCR Image Accuracy',
key: 'OCR Image Accuracy',
render: (_, record) => {
const isAbnormal = Number(record['OCR Image Accuracy']) * 100 < 25;
const isAbnormal = Number(record['OCR Image Accuracy']) < 25;
return (
<span style={{ color: isAbnormal ? 'red' : '' }}>
{record['OCR Image Accuracy'] &&
(Number(record['OCR Image Accuracy']) * 100).toFixed(2)}
Number(record['OCR Image Accuracy']).toFixed(2)}
</span>
);
},
@ -283,6 +290,27 @@ const ReportDetail = () => {
</Button>
}
/>
<HeaderContainer>
<Typography.Title level={5}>
Subsidiary:{' '}
<span style={{ fontWeight: '400' }}>
{report_data?.metadata?.subsidiary}
</span>
</Typography.Title>
<Typography.Title level={5}>
Start date:{' '}
<span style={{ fontWeight: '400' }}>
{report_data?.metadata?.start_at}
</span>
</Typography.Title>
<Typography.Title level={5}>
End date:{' '}
<span style={{ fontWeight: '400' }}>
{report_data?.metadata?.end_at}
</span>
</Typography.Title>
</HeaderContainer>
<ReportContainer>
<Table
loading={isLoading}