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

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

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

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

@ -1,8 +1,10 @@
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Button } from 'antd'; import { Button, DatePicker, Form, Select } from 'antd';
import { SbtPageHeader } from 'components/page-header'; import { SbtPageHeader } from 'components/page-header';
import { ReportOverViewTable } from 'components/report-detail'; import { ReportOverViewTable } from 'components/report-detail';
import { Dayjs } from 'dayjs'; import { Dayjs } from 'dayjs';
import { useOverViewReport } from 'queries/report';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
export interface ReportFormValues { export interface ReportFormValues {
@ -12,35 +14,33 @@ export interface ReportFormValues {
const Dashboard = () => { const Dashboard = () => {
const navigate = useNavigate(); const navigate = useNavigate();
// const [form] = Form.useForm<ReportFormValues>(); const [form] = Form.useForm<ReportFormValues>();
// const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
// page: 1, page: 1,
// page_size: 10, page_size: 10,
// }); });
// const [fromData, setFormData] = useState<{ const [fromData, setFormData] = useState<{
// start_date: string; start_date: string;
// end_date: string; end_date: string;
// subsidiary: string; subsidiary: string;
// }>({ }>({
// start_date: '', start_date: '',
// end_date: '', end_date: '',
// subsidiary: '', subsidiary: '',
// }); });
// const { isLoading, data } = useOverViewReport({ const { isLoading, data } = useOverViewReport({
// page: pagination.page, start_date: fromData.start_date,
// page_size: pagination.page_size, end_date: fromData.end_date,
// start_date: fromData.start_date, subsidiary: fromData.subsidiary,
// end_date: fromData.end_date, });
// subsidiary: fromData.subsidiary, const handleSubmit = (values: ReportFormValues) => {
// }); console.log('check values >>>', values);
// const handleSubmit = (values: ReportFormValues) => { setFormData({
// console.log('check values >>>', values); start_date: values.dateRange[0].format('YYYY-MM-DDTHH:mm:ssZ'),
// setFormData({ end_date: values.dateRange[1].format('YYYY-MM-DDTHH:mm:ssZ'),
// start_date: values.dateRange[0].format('YYYY-MM-DDTHH:mm:ssZ'), subsidiary: values.subsidiary,
// end_date: values.dateRange[1].format('YYYY-MM-DDTHH:mm:ssZ'), });
// subsidiary: values.subsidiary, };
// });
// };
return ( return (
<> <>
@ -51,13 +51,13 @@ const Dashboard = () => {
{/* <Button type='primary' icon={<DownloadOutlined />}> {/* <Button type='primary' icon={<DownloadOutlined />}>
Download Download
</Button> */} </Button> */}
<Button type='primary' onClick={() => navigate('/reports')}> {/* <Button type='primary' onClick={() => navigate('/reports')}>
{t`Go to Report page`} {t`Go to Report page`}
</Button> </Button> */}
</> </>
} }
/> />
{/* <Form <Form
form={form} form={form}
style={{ display: 'flex', flexDirection: 'row', gap: 10 }} style={{ display: 'flex', flexDirection: 'row', gap: 10 }}
onFinish={handleSubmit} onFinish={handleSubmit}
@ -97,12 +97,17 @@ const Dashboard = () => {
/> />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type='primary' htmlType='submit'> <Button type='primary' htmlType='submit' style={{ height: 38 }}>
Submit Submit
</Button> </Button>
</Form.Item> </Form.Item>
</Form> */} </Form>
<ReportOverViewTable /> <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 { DownloadOutlined } from '@ant-design/icons';
import { t } from '@lingui/macro'; 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 { SbtPageHeader } from 'components/page-header';
import { Dayjs } from 'dayjs'; import { Dayjs } from 'dayjs';
import { ReportDetailList, ReportItemDetail } from 'models'; import { ReportDetailList, ReportItemDetail } from 'models';
@ -19,10 +26,11 @@ const ReportContainer = styled.div`
margin-bottom: 16px; margin-bottom: 16px;
`; `;
const CustomSpace = styled(Space)` const HeaderContainer = styled(Space)`
&.sbt-space { display: flex;
/* Add your custom styles here */ flex-direction: row;\
} gap: 16px;
margin-bottom: 16px;
`; `;
const ReportInformationContainer = styled.div` const ReportInformationContainer = styled.div`
@ -73,11 +81,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'IMEI1 Accuracy', dataIndex: 'IMEI1 Accuracy',
key: 'IMEI1 Accuracy', key: 'IMEI1 Accuracy',
render: (_, record) => { render: (_, record) => {
const isAbnormal = Number(record['IMEI1 Accuracy']) * 100 < 25; const isAbnormal = Number(record['IMEI1 Accuracy']) < 25;
return ( return (
<span style={{ color: isAbnormal ? 'red' : '' }}> <span style={{ color: isAbnormal ? 'red' : '' }}>
{record['IMEI1 Accuracy'] && {record['IMEI1 Accuracy'] &&
(Number(record['IMEI1 Accuracy']) * 100).toFixed(2)} Number(record['IMEI1 Accuracy']).toFixed(2)}
</span> </span>
); );
}, },
@ -98,12 +106,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'Invoice_Purchase Date Accuracy', dataIndex: 'Invoice_Purchase Date Accuracy',
key: 'Invoice_Purchase Date Accuracy', key: 'Invoice_Purchase Date Accuracy',
render: (_, record) => { render: (_, record) => {
const isAbnormal = const isAbnormal = Number(record['Invoice_Purchase Date Accuracy']) < 25;
Number(record['Invoice_Purchase Date Accuracy']) * 100 < 25;
return ( return (
<span style={{ color: isAbnormal ? 'red' : '' }}> <span style={{ color: isAbnormal ? 'red' : '' }}>
{record['Invoice_Purchase Date Accuracy'] && {record['Invoice_Purchase Date Accuracy'] &&
(Number(record['Invoice_Purchase Date Accuracy']) * 100).toFixed(2)} Number(record['Invoice_Purchase Date Accuracy']).toFixed(2)}
</span> </span>
); );
}, },
@ -124,11 +131,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'Invoice_Retailer Accuracy', dataIndex: 'Invoice_Retailer Accuracy',
key: 'Invoice_Retailer Accuracy', key: 'Invoice_Retailer Accuracy',
render: (_, record) => { render: (_, record) => {
const isAbnormal = Number(record['Invoice_Retailer Accuracy']) * 100 < 25; const isAbnormal = Number(record['Invoice_Retailer Accuracy']) < 25;
return ( return (
<span style={{ color: isAbnormal ? 'red' : '' }}> <span style={{ color: isAbnormal ? 'red' : '' }}>
{record['Invoice_Retailer Accuracy'] && {record['Invoice_Retailer Accuracy'] &&
(Number(record['Invoice_Retailer Accuracy']) * 100).toFixed(2)} Number(record['Invoice_Retailer Accuracy']).toFixed(2)}
</span> </span>
); );
}, },
@ -138,11 +145,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'Retailer_Revised Accuracy', dataIndex: 'Retailer_Revised Accuracy',
key: 'Retailer_Revised Accuracy', key: 'Retailer_Revised Accuracy',
render: (_, record) => { render: (_, record) => {
const isAbnormal = Number(record['Retailer_Revised Accuracy']) * 100 < 25; const isAbnormal = Number(record['Retailer_Revised Accuracy']) < 25;
return ( return (
<span style={{ color: isAbnormal ? 'red' : '' }}> <span style={{ color: isAbnormal ? 'red' : '' }}>
{record['Retailer_Revised Accuracy'] && {record['Retailer_Revised Accuracy'] &&
(Number(record['Retailer_Revised Accuracy']) * 100).toFixed(2)} Number(record['Retailer_Revised Accuracy']).toFixed(2)}
</span> </span>
); );
}, },
@ -152,11 +159,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
dataIndex: 'OCR Image Accuracy', dataIndex: 'OCR Image Accuracy',
key: 'OCR Image Accuracy', key: 'OCR Image Accuracy',
render: (_, record) => { render: (_, record) => {
const isAbnormal = Number(record['OCR Image Accuracy']) * 100 < 25; const isAbnormal = Number(record['OCR Image Accuracy']) < 25;
return ( return (
<span style={{ color: isAbnormal ? 'red' : '' }}> <span style={{ color: isAbnormal ? 'red' : '' }}>
{record['OCR Image Accuracy'] && {record['OCR Image Accuracy'] &&
(Number(record['OCR Image Accuracy']) * 100).toFixed(2)} Number(record['OCR Image Accuracy']).toFixed(2)}
</span> </span>
); );
}, },
@ -283,6 +290,27 @@ const ReportDetail = () => {
</Button> </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> <ReportContainer>
<Table <Table
loading={isLoading} loading={isLoading}