132 lines
3.2 KiB
TypeScript
132 lines
3.2 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-DD'),
|
|
start_date: values.dateRange[0].format('YYYY-MM-DD'),
|
|
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}
|
|
style={{
|
|
marginTop: 30,
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name='dateRange'
|
|
label={t`Date (GMT+8)`}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please select a date range',
|
|
},
|
|
]}
|
|
style={{
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<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: 'SEAO', label: 'SEAO' },
|
|
{ value: 'SEAU', label: 'SEAU' },
|
|
{ value: 'SESP', label: 'SESP' },
|
|
{ value: 'SME', label: 'SME' },
|
|
{ value: 'SEPCO', label: 'SEPCO' },
|
|
{ value: 'TSE', label: 'TSE' },
|
|
{ value: 'SEIN', label: 'SEIN' },
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ReportsPage;
|