sbt-idp/cope2n-fe/src/pages/reports/index.tsx

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;