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

import { t } from '@lingui/macro';
import { Button, Form, Select } from 'antd';
import { SbtPageHeader } from 'components/page-header';
import { ReportOverViewTable } from 'components/report-detail';
import { useOverViewReport } from 'queries/report';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { DownloadOutlined } from '@ant-design/icons';
import { downloadDashboardReport } from 'request/report';

export interface ReportFormValues {
  duration: string;
  subsidiary: string;
}

const Dashboard = () => {
  const navigate = useNavigate();
  const [duration, setDuration] = useState<string>('30d');
  const [subsidiary, setSubsidiary] = useState<string>('ALL');
  const [form] = Form.useForm<ReportFormValues>();
  const { isLoading, data } = useOverViewReport({
    duration: duration,
    subsidiary: subsidiary,
  });

  const handleDownloadReport = async () => {
    console.log('duration >>>', duration);
    console.log('subsidiary >>>', subsidiary);
    const {file, filename} = await downloadDashboardReport(duration, subsidiary);
    const anchorElement = document.createElement('a');
    anchorElement.href = URL.createObjectURL(file);
    anchorElement.download = filename;

    document.body.appendChild(anchorElement);
    anchorElement.click();

    // Clean up
    document.body.removeChild(anchorElement);
    URL.revokeObjectURL(anchorElement.href);
  };
  return (
    <>
      <SbtPageHeader
        title={t`Dashboard`}
        extra={
          <>
            <Button type='primary' size='large' icon={<DownloadOutlined />}
              onClick={() => handleDownloadReport()}
            >
              {t`Download`}
            </Button>
            <Button type='primary' size='large' onClick={() => navigate('/reports')}>
              {t`Go to Report page`}
            </Button>
          </>
        }
      />
      <Form
        form={form}
        style={{ display: 'flex', flexDirection: 'row', gap: 10 }}
      >
        <Form.Item
          label={t`Duration`}
          rules={[
            {
              required: true,
              message: 'Please select a duration',
            },
          ]}
          required
        >
          <Select
            placeholder='Select a date range'
            style={{ width: 200 }}
            options={[
              { value: '30d', label: 'Last 30 days' },
              { value: '7d', label: 'Last 7 days' },
            ]}
            value={duration}
            onChange={(value) => {
              setDuration(value);
            }}
          />
        </Form.Item>

        <Form.Item
          name='subsidiary'
          label={t`Subsidiary`}
          required
        >
          <Select
            placeholder='Select a subsidiary'
            style={{ width: 200 }}
            options={[
              { value: 'ALL', label: 'ALL' },
              { value: 'SEAU', label: 'SEAU' },
              { value: 'SESP', label: 'SESP' },
              { value: 'SME', label: 'SME' },
              { value: 'SEPCO', label: 'SEPCO' },
              { value: 'TSE', label: 'TSE' },
              { value: 'SEIN', label: 'SEIN' },
            ]}
            defaultValue='ALL'
            value={subsidiary}
            onChange={(value) => {
              setSubsidiary(value);
            }}
          />
        </Form.Item>
        <Form.Item>
          <Button type='primary' style={{ height: 38 }}
          >
            View
          </Button>
        </Form.Item>
      </Form>
      <ReportOverViewTable
        isLoading={isLoading}
        data={data}
      />
    </>
  );
};

export default Dashboard;