121 lines
2.9 KiB
TypeScript
121 lines
2.9 KiB
TypeScript
|
import { PlusOutlined } from '@ant-design/icons';
|
||
|
|
import { t } from '@lingui/macro';
|
||
|
|
import { Button, DatePicker, Form, Modal, Select } from 'antd';
|
||
|
|
import { SbtPageHeader } from 'components/page-header';
|
||
|
|
import ReportTable from 'components/report-detail/report-table';
|
||
|
|
import { Dayjs } from 'dayjs';
|
||
|
|
import { useMakeReport } from 'queries/report';
|
||
|
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
export interface ReportFormValues {
|
||
|
|
dateRange: [Dayjs, Dayjs];
|
||
|
|
subsidiary: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ReportsPage = () => {
|
||
|
|
const [form] = Form.useForm<ReportFormValues>();
|
||
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
|
|
const makeReportMutation = useMakeReport();
|
||
|
|
|
||
|
|
const showModal = () => {
|
||
|
|
setIsModalOpen(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleOk = () => {
|
||
|
|
form
|
||
|
|
.validateFields()
|
||
|
|
.then((values) => {
|
||
|
|
makeReportMutation
|
||
|
|
.mutateAsync({
|
||
|
|
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,
|
||
|
|
})
|
||
|
|
.then((data) => {
|
||
|
|
if (!!data && data?.report_id) {
|
||
|
|
form.resetFields();
|
||
|
|
setIsModalOpen(false);
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log(error);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch((info) => {
|
||
|
|
console.log('Validate Failed:', info);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCancel = () => {
|
||
|
|
setIsModalOpen(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<SbtPageHeader
|
||
|
|
title={t`Reports`}
|
||
|
|
extra={
|
||
|
|
<Button
|
||
|
|
size='large'
|
||
|
|
type='primary'
|
||
|
|
onClick={showModal}
|
||
|
|
icon={<PlusOutlined />}
|
||
|
|
>
|
||
|
|
{t`New Report`}
|
||
|
|
</Button>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<ReportTable />
|
||
|
|
|
||
|
|
<Modal
|
||
|
|
title={t`Create New Report`}
|
||
|
|
open={isModalOpen}
|
||
|
|
onOk={() => {
|
||
|
|
handleOk();
|
||
|
|
}}
|
||
|
|
onCancel={handleCancel}
|
||
|
|
>
|
||
|
|
<Form form={form}>
|
||
|
|
<Form.Item
|
||
|
|
name='dateRange'
|
||
|
|
label={t`Date`}
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: 'Please select a date range',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<DatePicker.RangePicker />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Form.Item
|
||
|
|
name='subsidiary'
|
||
|
|
label={t`Subsidiary`}
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: 'Please select a subsidiary',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
placeholder='Select a subsidiary'
|
||
|
|
style={{ width: 200 }}
|
||
|
|
options={[
|
||
|
|
{ value: 'all', label: 'ALL' },
|
||
|
|
{ value: 'sesp', label: 'SESP' },
|
||
|
|
{ value: 'seau', label: 'SEAU' },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</Modal>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ReportsPage;
|