Update Dashboard page

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

@@ -6,14 +6,19 @@ import { Dayjs } from 'dayjs';
 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;
   dateRange: [Dayjs, Dayjs];
   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 [pagination, setPagination] = useState({
     page: 1,
@@ -44,18 +49,36 @@ const Dashboard = () => {
     });
   };
 
+  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' icon={<DownloadOutlined />}>
+            <Button type='primary' size='large' icon={<DownloadOutlined />}
-              Download
+              onClick={() => handleDownloadReport()}
-            </Button> */}
+            >
-            {/* <Button type='primary' onClick={() => navigate('/reports')}>
+              {t`Download`}
+            </Button>
+            <Button type='primary' size='large' onClick={() => navigate('/reports')}>
               {t`Go to Report page`}
-            </Button> */}
+            </Button>
           </>
         }
       />
@@ -64,6 +87,7 @@ const Dashboard = () => {
         style={{ display: 'flex', flexDirection: 'row', gap: 10 }}
         onFinish={handleSubmit}
       >
+        {/* TODO: Remove this when the Dashboard page is refactored */}
         <Form.Item
           name='dateRange'
           label={t`Date`}
@@ -73,10 +97,36 @@ const Dashboard = () => {
               message: 'Please select a date range',
             },
           ]}
+          style={{
+            display: 'none'
+          }}
         >
           <DatePicker.RangePicker />
         </Form.Item>
 
+        <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={duration}
+            onChange={(value) => {
+              setDuration(value);
+            }}
+          />
+        </Form.Item>
+
         <Form.Item
           name='subsidiary'
           label={t`Subsidiary`}
@@ -86,6 +136,7 @@ const Dashboard = () => {
               message: 'Please select a subsidiary',
             },
           ]}
+          required
         >
           <Select
             placeholder='Select a subsidiary'
@@ -95,12 +146,16 @@ const Dashboard = () => {
               { value: 'sesp', label: 'SESP' },
               { value: 'seau', label: 'SEAU' },
             ]}
-            allowClear
+            defaultValue={'all'}
+            value={subsidiary}
+            onChange={(value) => {
+              setSubsidiary(value);
+            }}
           />
         </Form.Item>
         <Form.Item>
           <Button type='primary' htmlType='submit' style={{ height: 38 }}>
-            Submit
+            View
           </Button>
         </Form.Item>
       </Form>

cope2n-fe/src/request/report.ts

@@ -117,3 +117,34 @@ export async function downloadReport(report_id: string) {
     console.log(error);
   }
 }
+
+
+export async function downloadDashboardReport(duration='30d', subsidiary='ALL') {
+  try {
+    const response = await API.get(`/api/ctel/overview_download_file/?duration=${duration}&subsidiary=${subsidiary}`, {
+      responseType: 'blob', // Important
+    });
+    let filename = "report.xlsx";
+    try {
+      let basename = response.headers['content-disposition'].split('filename=')[1].split('.')[0];
+      let extension = response.headers['content-disposition'].split('.')[1].split(';')[0];
+      filename = `${basename}.${extension}`
+    } catch(err) {
+      console.log(err);
+    }
+    const file = new Blob([response.data], {
+      type: 'application/vnd.ms-excel',
+    });
+    // const fileURL = URL.createObjectURL(file);
+    // window.open(fileURL);
+    return {
+      file: file,
+      filename: filename,
+    }
+  } catch (error) {
+    notification.error({
+      message: `${error?.message}`,
+    });
+    console.log(error);
+  }
+}