add accordion in help for automatic

src/components/Help.css

@@ -0,0 +1,19 @@
+.step-title {
+    font-weight: 600;
+    margin: 10px;
+    margin-top: 50px;
+}
+
+.auto-analysis-help-image {
+    margin: 10px;
+}
+
+.step-description {
+    margin: 10px;
+}
+
+.help-feature {
+    font-weight: 900;
+    font-size: 1.5rem;
+    margin: 10px;
+}

src/components/Help.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import './Help.css';
+
+function Help({ url, show }) {
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
+
+    const [expanded, setExpanded] = useState(false);
+
+    const handleChange =
+        (panel) => (event, isExpanded) => {
+            setExpanded(isExpanded ? panel : false);
+        };
+
+    return (
+        <div>
+            <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel1bh-content"
+                    id="panel1bh-header"
+                >
+                    <Typography sx={{ width: '33%', flexShrink: 0 }}>
+                        Auto Analysis
+                    </Typography>
+                    <Typography sx={{ color: 'text.secondary' }}>Auto Analysis of device data with dye and HB</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>
+                        <div className='step-title'>Step 1:</div>
+                        <div className='step-description'>Click on the start date tab and select the necessary date. Repeat the same process on the end date tab as well.</div>
+                        <img className="auto-analysis-help-image" src={require('../assets/auto_analysis_help-1.png')} alt='icon'></img>
+
+                        <div className='step-title'>Step 2:</div>
+                        <div className='step-description'>Select an end date, it has to be at least one date post the start date.</div>
+                        <img className="auto-analysis-help-image" src={require('../assets/auto_analysis_help-2.png')} alt='icon'></img>
+
+                        <div className='step-title'>Step 3:</div>
+                        <div className='step-description'>Click on the Download Excel button and wait for the document to download.</div>
+                        <img className="auto-analysis-help-image" src={require('../assets/auto_analysis_help-3.png')} alt='icon'></img>
+                    </Typography>
+                </AccordionDetails>
+            </Accordion>
+
+            
+            {/* <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel2bh-content"
+                    id="panel2bh-header"
+                >
+                    <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
+                    <Typography sx={{ color: 'text.secondary' }}>
+                        You are currently not an owner
+                    </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>
+                        Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus,
+                        varius pulvinar diam eros in elit. Pellentesque convallis laoreet
+                        laoreet.
+                    </Typography>
+                </AccordionDetails>
+            </Accordion> */}
+
+
+            {/* <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel3bh-content"
+                    id="panel3bh-header"
+                >
+                    <Typography sx={{ width: '33%', flexShrink: 0 }}>
+                        Advanced settings
+                    </Typography>
+                    <Typography sx={{ color: 'text.secondary' }}>
+                        Filtering has been entirely disabled for whole web server
+                    </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>
+                        Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit
+                        amet egestas eros, vitae egestas augue. Duis vel est augue.
+                    </Typography>
+                </AccordionDetails>
+            </Accordion>
+            <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel4bh-content"
+                    id="panel4bh-header"
+                >
+                    <Typography sx={{ width: '33%', flexShrink: 0 }}>Personal data</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>
+                        Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit
+                        amet egestas eros, vitae egestas augue. Duis vel est augue.
+                    </Typography>
+                </AccordionDetails>
+            </Accordion> */}
+        </div>
+    );
+}
+export default Help;