121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
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>('SEAO');
|
|
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 Reports`}
|
|
</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: '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' },
|
|
]}
|
|
defaultValue='SEAO'
|
|
value={subsidiary}
|
|
onChange={(value) => {
|
|
setSubsidiary(value);
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
<ReportOverViewTable
|
|
isLoading={isLoading}
|
|
data={data}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|