add auto analysis functionality

src/components/Accuracy.js

@@ -1,14 +1,34 @@
 import React, { useState } from 'react';
 import { FaInfoCircle } from "react-icons/fa";
+import DatePicker from "react-datepicker";
+import moment from 'moment';
 
+import "react-datepicker/dist/react-datepicker.css";
 import './Accuracy.css';
 
 function Accuracy({ show }) {
     const [showCardInfo, setShowCardInfo] = useState(false);
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
+
+    const fetchFile = (start_date, end_date) => {
+        window.location.href = `https://asia-south1-hpos-qa.cloudfunctions.net/performance?start_date=${moment(startDate).format("YYYY-MM-DD")}&end_date=${moment(endDate).format("YYYY-MM-DD")}`;
+    }
+
 
     return (
         <div>
-            <h1>Accuracy</h1>
+            <h1>Auto Analysis</h1>
+            <div>Maintain correct formatting while taking the readings for this to work</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>
     );
 }