Merge branch 'dev' into preprod

.firebaserc

@@ -10,6 +10,9 @@
         ],
         "qa": [
           "hpos-qa"
+        ],
+        "dev": [
+          "hpos-dev"
         ]
       }
     }

README.md

@@ -14,4 +14,22 @@
     http://localhost:3000
 
 
+
+### add target (multi site), if not already defined for that site
+
+    firebase target:apply hosting dev1 hpos-dev1
+
+### add or change to firebase.json
+
+    "target": "dev1",
+
+### run build
+
+    npm build
+
+
+### deploy
+
+    firebase deploy --only hosting:dev
+
 pyinstaller --noconfirm --noconsole -i "smi.ico" --windowed --clean hemocube.py

src/components/Accuracy.css

@@ -0,0 +1,63 @@
+.button {
+    background-color: #4CAF50;
+    /* Green */
+    border: none;
+    color: white;
+    /* padding: 15px 32px; */
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 15px;
+}
+
+.file-row {
+    flex-direction: row;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1.5rem;
+}
+
+.file-label {
+    margin: 10px;
+}
+
+.dates {
+    flex-direction: row;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1.5rem;
+}
+
+.start-date {
+    margin: 10px;
+}
+
+.end-date {
+    margin: 10px;
+}
+
+.download-row {
+    flex-direction: row;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1.5rem;
+}
+
+.loading-icon {
+    animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

src/components/Accuracy.js

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { FaInfoCircle } from "react-icons/fa";
+import { AiOutlineLoading } from "react-icons/ai";
+import DatePicker from "react-datepicker";
+import moment from 'moment';
+import axios from 'axios';
+
+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 [selectedFile, setSelectedFile] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null); // New state for handling errors
+
+    const handleFileChange = (event) => {
+        setSelectedFile(event.target.files[0]);
+    };
+
+
+    const fetchFile = async (start_date, end_date) => {
+        try {
+            setLoading(true);
+            setError(null); // Reset error state before making a new request
+
+            if (selectedFile) {
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+
+                const queryString = `start_date=${moment(startDate).format(
+                    'YYYY-MM-DD'
+                )}&end_date=${moment(endDate).format('YYYY-MM-DD')}`;
+
+                const url = `https://asia-south1-hpos-af3cc.cloudfunctions.net/performance?${queryString}`;
+
+                // Make a POST request using the Fetch API
+                const response = await fetch(url, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        // Add any necessary headers
+                        // 'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
+                    },
+                });
+
+                // Check if the request was successful (status code 2xx)
+                if (response.ok) {
+                    // Create a blob from the response data
+                    const blob = await response.blob();
+
+                    // Create a download link and trigger a click to download the file
+                    const link = document.createElement('a');
+                    link.href = window.URL.createObjectURL(blob);
+                    link.download = 'autoanlysis.xlsx'; // Set the desired file name
+                    document.body.appendChild(link);
+                    link.click();
+
+                    // Clean up
+                    document.body.removeChild(link);
+                } else {
+                    console.error('Error downloading file:', response.statusText);
+                    setError('Error downloading file. Please try again.'); // Set error message
+                }
+            } else {
+                setError("Select file from reference device");
+            }
+        } catch (error) {
+            console.error('Error downloading file:', error);
+            setError('Error downloading file. Please try again.'); // Set error message
+        } finally {
+            setLoading(false); // Set loading back to false when the request completes
+        }
+    };
+
+
+    return (
+        <div>
+            <h1>Auto Analysis</h1>
+            <div className='file-row'>
+                <div className='file-label'>Reference file</div>
+                <input type="file" onChange={handleFileChange} />
+            </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>
+            <div className='download-row'>
+                <div className='button' onClick={() => fetchFile(startDate, endDate)}>
+                    {loading ? (
+                        <AiOutlineLoading className="loading-icon" />
+                    ) : (
+                        'Download Excel'
+                    )}
+                </div>
+            </div>
+            {error && <div className="error-message">{error}</div>} {/* Display error message if there's an error */}
+        </div>
+    );
+}
+export default Accuracy;

src/components/AppInstallation.js

@@ -12,10 +12,11 @@ const AppInstallation = () => {
 
     return (
         <div>
-            <div>
-                <h1>App Installation</h1>
-                <h3>First try the firebase app distribution which is email linked. After adding the email from backend. Check the email to get started.</h3>
-                <div>Alternative Method: Testing 2.1.27 (Preprod - 07-11-2023)</div>
+            <h1>App Installation</h1>
+
+            <h3>First try the firebase app distribution which is email linked. After adding the email from backend. Check the email to get started.</h3>
+            {/* <div>
+                <div>Testing 2.1.27 (Preprod - 07-11-2023)</div>
                 <a href="https://www.dropbox.com/scl/fi/v0hux8qrby54rjns8mhum/hpos-testing_preprod_2.1.27.apk?rlkey=ias0fe0zq72avy01rk4cvzmvp&dl=1">
                     <img className="app-qrcode" src={require('../assets/hpos-testing_preprod.png')} alt='icon'></img>
                 </a>
@@ -29,7 +30,7 @@ const AppInstallation = () => {
                         <li>install the downloaded apk and give permissions</li>
                     </ul>
                 </p>
-            </div>
+            </div> */}
         </div>
     )
 }

src/components/CurveFit.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { FaInfoCircle } from "react-icons/fa";
+import axios from 'axios';
+
+import './CurveFit.css';
+import ImageDownloader from './ImageDownloader';
+
+function CurveFit({ show }) {
+    const [showCardInfo, setShowCardInfo] = useState(false);
+    const [svgData, setSvgData] = useState(null);
+
+    const fetchSvg = () => {
+        axios({
+            method: 'get',
+            url: "https://asia-south1-hpos-qa.cloudfunctions.net/curvefit",
+            data: {
+                "_id": "id",
+                "underMedication": false,
+                "underTransfusion": false,
+                "userImageURL": "https://hpos-prod.web.app/logo.png"
+            },
+            withCredentials: false,
+            secure: false,
+            headers: {
+                "Content-Type": "application/json",
+                // "x-client": "e16a1bd15af2ee640f5a7a18c8d8333f5f01f7c66e003bbc21ee52870f1bce27",
+            },
+        })
+            .then(response => response.data)
+            .then((data) => {
+                // setMessage(`${id} is being created`);
+                // setSvgData(data?.plot?.replace('\"', '').replace('\n', '').replace('"', "'"));
+            })
+            .catch((err) => {
+                console.log(err);
+                // setMessage(`error: ${err?.message}`);
+            });
+    }
+
+    useEffect(() => {
+        if (!svgData) {
+            // fetchSvg();
+        }
+    }, []);
+
+    return (
+        <div>
+            <h1>Curve Fit</h1>
+            {/* <img alt='' src={ svgData }/>; */}
+            <img src="https://asia-south1-hpos-qa.cloudfunctions.net/curvefit" width="450" height="340" />
+
+            {/* <ImageDownloader /> */}
+        </div>
+    );
+}
+export default CurveFit;

src/components/Help.css

@@ -0,0 +1,19 @@
+.step-title {
+    font-weight: 600;
+    margin: 10px;
+    margin-top: 50px;
+}
+
+.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,128 @@
+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="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="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="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 }}>Raw Data</Typography>
+                    <Typography sx={{ color: 'text.secondary' }}>
+                        Download raw data
+                    </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>
+                    <div className='step-title'>Step 1:</div>
+                    <div className='step-description'>Click on the <strong>start date</strong> tab and select the necessary date. Repeat the same process on the <strong>end date</strong> tab as well.</div>
+                    <img className="help-image" src={require('../assets/raw_data_help_1.png')} alt='icon'></img>
+                    <img className="help-image" src={require('../assets/raw_data_help_2.png')} alt='icon'></img>
+
+                    <div className='step-title'>Step 2:</div>
+                    <div className='step-description'>Click on the <strong>Download Excel</strong>  button and wait for the document to download.</div>
+                    <img className="help-image" src={require('../assets/raw_data_help_3.png')} alt='icon'></img>
+                    </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 }}>
+                    Registration
+                    </Typography>
+                    <Typography sx={{ color: 'text.secondary' }}>
+                        Create and clear entries for taking readings in devices
+                    </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>
+
+                    <div className='step-title'>Step 1:</div>
+                    <div className='step-description'>Enter the sample or solution name in the <strong>name</strong> tab with appropriate format given below.</div>
+                    <img className="help-image" src={require('../assets/registration_help_1.png')} alt='icon'></img>
+
+
+                    <div className='step-title'>Step 2:</div>
+                    <div className='step-description'>Click on the create button to get an ID and you will receive a confirmation message.
+
+If you wish to clear the generated IDs click on the clear button and you will receive a confirmation message.</div>
+                    <img className="help-image" src={require('../assets/raw_data_help_2.png')} alt='icon'></img>
+                    <img className="help-image" src={require('../assets/raw_data_help_3.png')} alt='icon'></img>
+                    </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;

src/components/ImageDownloader.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+
+const ImageDownloader = () => {
+  const [imageUrl, setImageUrl] = useState('');
+  const [imageData, setImageData] = useState(null);
+
+  const handleInputChange = (e) => {
+    setImageUrl(e.target.value);
+  };
+
+  const handleFetchImage = async () => {
+    try {
+      const response = await fetch(imageUrl, { mode: 'no-cors'});
+      const blob = await response.blob();
+      console.log(blob);
+      setImageData(URL.createObjectURL(blob));
+    } catch (error) {
+      console.error('Error fetching image:', error);
+    }
+  };
+
+  const handleDownloadImage = () => {
+    const link = document.createElement('a');
+    link.href = imageData;
+    link.download = 'downloaded_image';
+    link.click();
+  };
+
+  return (
+    <div>
+      <label>
+        Image URL:
+        <input type="text" value={imageUrl} onChange={handleInputChange} />
+      </label>
+      <button onClick={handleFetchImage}>Fetch Image</button>
+
+      {imageData && (
+        <div>
+          <img src={imageData} alt="Downloadable" style={{ maxWidth: '100%' }} />
+          <button onClick={handleDownloadImage}>Download Image</button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageDownloader;

src/components/Precision.js

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { FaInfoCircle } from "react-icons/fa";
+
+import './Precision.css';
+
+function Precision({ show }) {
+    const [showCardInfo, setShowCardInfo] = useState(false);
+
+    return (
+        <div>
+            <h1>Precision</h1>
+        </div>
+    );
+}
+export default Precision;

src/components/Registration.css

@@ -25,4 +25,8 @@
     display: inline-block;
     font-size: 16px;
     margin: 5px;
+}
+
+.format-text {
+    color: red;
 }

src/components/Registration.js

@@ -91,10 +91,11 @@ function Registration() {
         <div className="user-creation">
             <label>
                 name:
-                <input name="name" value={name} placeholder="350umol kmon04" onChange={onNameChange} />
+                <input name="name" value={name} placeholder="350 UMOL KMNO4" onChange={onNameChange} />
             </label>
+            <h5 className='format-text'>Correct formats for automatic analysis are: 100 UMOL KMNO4, 290uM KMnO4, KMnO4-720umol, 350 UMOL TAR, Tar-120umol, HB-13-N-4, HB-11-4</h5>
             <div className='dates'>
-                <div className='button' onClick={() => createUser()}>Create User</div>
+                <div className='button' onClick={() => createUser()}>Create</div>
             </div>
             <div className='dates'>
                 <div className='clear-users-button' onClick={() => clearsUsers()}>Clear</div>

src/firebase.js

@@ -28,14 +28,37 @@ import { getAnalytics } from "firebase/analytics";
 
 /* preprod */
 const firebaseConfig = {
-  apiKey: "AIzaSyB2-suWmKh2PgQbRmx7rzPjYhgoovQIsQ8",
-  authDomain: "hpos-preprod.firebaseapp.com",
-  projectId: "hpos-preprod",
-  storageBucket: "hpos-preprod.appspot.com",
-  messagingSenderId: "121176529204",
-  appId: "1:121176529204:web:6c0db8e642992192bbed61",
-  measurementId: "G-GYM6LRQ8KR"
-};
+    apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
+    authDomain: "hpos-af3cc.firebaseapp.com",
+    projectId: "hpos-af3cc",
+    storageBucket: "hpos-af3cc.appspot.com",
+    messagingSenderId: "650071678820",
+    appId: "1:650071678820:web:ce50538bf46632d46c6471",
+    measurementId: "G-6JHQ47S9DD"
+  };
+  
+// /* qa: hpos-qa */
+// const firebaseConfig = {
+//   apiKey: "AIzaSyCF7BNZ5vOMQIpKRi_vxquzWP5pIjcb59I",
+//   authDomain: "hpos-qa.firebaseapp.com",
+//   projectId: "hpos-qa",
+//   storageBucket: "hpos-qa.appspot.com",
+//   messagingSenderId: "1004619739289",
+//   appId: "1:1004619739289:web:c3ee0c0127f0d073e5c808",
+//   measurementId: "G-4MSTJHE64W"
+// };
+
+
+// /* preprod */
+// const firebaseConfig = {
+//   apiKey: "AIzaSyB2-suWmKh2PgQbRmx7rzPjYhgoovQIsQ8",
+//   authDomain: "hpos-preprod.firebaseapp.com",
+//   projectId: "hpos-preprod",
+//   storageBucket: "hpos-preprod.appspot.com",
+//   messagingSenderId: "121176529204",
+//   appId: "1:121176529204:web:6c0db8e642992192bbed61",
+//   measurementId: "G-GYM6LRQ8KR"
+// };
   
   // /* prod */
   // const firebaseConfig = {

src/routes/appRoutes.js

@@ -4,12 +4,16 @@ import AppsOutlinedIcon from '@mui/icons-material/AppsOutlined';
 import TestAnalytics from "../components/TestAnalytics";
 import HomePage from '../components/HomePage';
 import Devices from '../components/Devices';
-import { Download } from '@mui/icons-material';
+import { Download, FactCheck } from '@mui/icons-material';
 import ExportData from '../components/ExportData';
 import Registration from '../components/Registration';
-import { FaAndroid, FaFlask, FaPhone, FaSearch, FaUser } from 'react-icons/fa';
+import { FaAndroid, FaArrowCircleLeft, FaBars, FaBezierCurve, FaChalkboardTeacher, FaChartArea, FaChartLine, FaCheck, FaExclamation, FaFlask, FaGolfBall, FaPhone, FaQuestionCircle, FaSearch, FaUser } from 'react-icons/fa';
 import AppInstallation from '../components/AppInstallation';
 import Samples from '../components/Samples';
+import Precision from '../components/Precision';
+import Accuracy from '../components/Accuracy';
+import CurveFit from '../components/CurveFit';
+import Help from '../components/Help';
 
 const appRoutes = [
     {
@@ -40,7 +44,7 @@ const appRoutes = [
         element: <ExportData />,
         state: "downloaddata",
         sidebarProps: {
-            displayText: "Data Download",
+            displayText: "Raw Data",
             icon: <Download />
         }
     },
@@ -71,6 +75,42 @@ const appRoutes = [
             icon: <FaFlask />
         }
     },
+    // {
+    //     path: "/precision",
+    //     element: <Precision />,
+    //     state: "precision",
+    //     sidebarProps: {
+    //         displayText: "Precision",
+    //         icon: <FaCheck />
+    //     }
+    // },
+    {
+        path: "/autoanalysis",
+        element: <Accuracy />,
+        state: "autoanalysis",
+        sidebarProps: {
+            displayText: "Auto Analysis (NEW)",
+            icon: <FaChartLine />
+        }
+    },
+    // {
+    //     path: "/curvefit",
+    //     element: <CurveFit />,
+    //     state: "curvefit",
+    //     sidebarProps: {
+    //         displayText: "Linear Fit",
+    //         icon: <FaBezierCurve />
+    //     }
+    // },
+    {
+        path: "/helpcenter",
+        element: <Help />,
+        state: "helpcenter",
+        sidebarProps: {
+            displayText: "Help Center",
+            icon: <FaQuestionCircle />
+        }
+    },
 ]
 
 export default appRoutes;