add data download page

src/components/ExportData.css

@@ -1,10 +1,29 @@
 .button {
-    background-color: #4CAF50; /* Green */
+    background-color: #4CAF50;
+    /* Green */
     border: none;
     color: white;
-    padding: 15px 32px;
+    /* padding: 15px 32px; */
+    padding: 5px 10px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
-  }
+    margin: 15px;
+}
+
+.dates {
+    flex-direction: row;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1.5rem;
+}
+
+.start-date {
+    margin: 10px;
+}
+
+.end-date {
+    margin: 10px;
+}

src/components/ExportData.js

@@ -1,4 +1,8 @@
 import React, { useState } from 'react';
+import DatePicker from "react-datepicker";
+import moment from 'moment';
+
+import "react-datepicker/dist/react-datepicker.css";
 
 import './ExportData.css';
 
@@ -7,13 +11,22 @@ function ExportData({ url, show }) {
     const [endDate, setEndDate] = useState("");
 
     const fetchFile = (start_date, end_date) => {
-        window.location.href = "https://asia-south1-hpos-af3cc.cloudfunctions.net/consolidation?start_date=2023-08-20&end_date=2023-08-21"
+        window.location.href = `https://asia-south1-hpos-af3cc.cloudfunctions.net/consolidation?start_date=${moment(startDate).format("YYYY-MM-DD")}&end_date=${moment(endDate).format("YYYY-MM-DD")}`;
     }
 
     return (
         <div>
+            <div className='dates'>
+                <div className='start-date'>
+                    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} placeholderText='start date' />
+                </div>
+                <div className='end-date'>
+                    <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} placeholderText='end date' />
+                </div>
+
                 <div className='button' onClick={() => fetchFile(startDate, endDate)}>Download Excel</div>
             </div>
+        </div>
     );
 }
 export default ExportData;