changes samples table

- add store
	- add routes
	- add page wrapper, mainlayout
	- add nav folder

.firebaserc

@@ -1,5 +1,18 @@
 {
   "projects": {
     "default": "hpos-af3cc"
+  },
+  "targets": {
+    "hpos-af3cc": {
+      "hosting": {
+        "dev1": [
+          "hpos-dev1"
+        ],
+        "qa": [
+          "hpos-qa"
+        ]
       }
+    }
+  },
+  "etags": {}
 }

.gitignore

@@ -27,3 +27,7 @@ yarn-error.log*
 src/components/testData.json
 public/world-110m.json
 public/india-states.json
+*.apk
+
+scripts/reports
+scripts/data

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:dev1
+
 pyinstaller --noconfirm --noconsole -i "smi.ico" --windowed --clean hemocube.py

firebase.json

@@ -1,5 +1,6 @@
 {
   "hosting": {
+    "target": "qa",
     "public": "build",
     "ignore": [
       "firebase.json",

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.1",
+    "@mui/material": "^5.14.2",
+    "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -14,10 +19,12 @@
     "ml-savitzky-golay-generalized": "^4.0.1",
     "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-datepicker": "^4.16.0",
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "react-flip-numbers": "^3.0.8",
     "react-icons": "^4.10.1",
+    "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.4",
@@ -49,5 +56,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "csv-parser": "^3.0.0",
+    "html-pdf-node": "^1.0.8"
   }
 }

src/App.js

@@ -2,11 +2,27 @@ import './App.css';
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import MainLayout from "./components/MainLayout";
+import { routes } from "./routes";
+
 import { collection, onSnapshot, query } from "firebase/firestore";
 import Card from './components/Card';
 import db from './firebase';
 
 function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainLayout />}>
+          {routes}
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function App1() {
   const [totalScreened, setTotalScreened] = useState(0);
   const [males, setMales] = useState(0);
   const [females, setFemales] = useState(0);

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-qa.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/Alerts.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot } from 'firebase/firestore';
+
+import './Alerts.css';
+import db from '../firebase';
+
+const Alerts = () => {
+    const [alerts, setAlerts] = useState([]);
+
+    useEffect(() => {
+        if (!allTests) {
+            const q = query(collection(db, "alerts"));
+
+            const unsub = onSnapshot(q, (querySnapshot) => {
+                const testDevices = new Set();
+                const hposTests = [];
+                querySnapshot.forEach((document) => {
+                    const hposTestData = document.data();
+                    hposTests.push(hposTestData);
+                    const { deviceSerialNumber } = hposTestData;
+                    testDevices.add(deviceSerialNumber);
+                });
+                const groups = [...testDevices];
+                // setDevices(groups);
+                setAlerts(hposTests);
+            });
+
+            return () => unsub;
+        }
+    }, []);
+
+    return (
+        <div>
+            {alerts.length}
+        </div>
+    )
+}
+
+export default Alerts;

src/components/AppInstallation.css

@@ -0,0 +1,4 @@
+.app-qrcode {
+    height: 250px;
+    width: 250px;
+}

src/components/AppInstallation.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot } from 'firebase/firestore';
+
+import './AppInstallation.css';
+import db from '../firebase';
+
+const AppInstallation = () => {
+    const [alerts, setAlerts] = useState([]);
+
+    useEffect(() => {
+    }, []);
+
+    return (
+        <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>
+            </div>
+            <div>
+                <p>Steps to install:</p>
+                <p>
+                    <ul>
+                        <li>use an QR code scanner app to download the app</li>
+                        <li>if the phone browser prompts an warning, select download anyway</li>
+                        <li>install the downloaded apk and give permissions</li>
+                    </ul>
+                </p>
+            </div> */}
+        </div>
+    )
+}
+
+export default AppInstallation;

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/Devices.js

@@ -24,7 +24,7 @@ const Devices = () => {
         setTestDate(null);
         setCurTest(null);
         setDays([...new Set(allTests
-            .filter((x) => x.deviceSerialNumber === value)
+            .filter((x) => x.deviceSerialNumber === value || x.deviceId === value)
             .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
             .sort()
             .reverse());
@@ -36,7 +36,7 @@ const Devices = () => {
         setCurTestData(null);
         setShowGraph(false);
         setTests(allTests
-            .filter((x) => x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day')))
+            .filter((x) => (x.deviceSerialNumber === device || x.deviceId === device) && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day')))
             .map(x => x._id)
             .sort());
     }
@@ -70,8 +70,13 @@ const Devices = () => {
                 querySnapshot.forEach((document) => {
                     const hposTestData = document.data();
                     hposTests.push(hposTestData);
-                    const { deviceSerialNumber } = hposTestData;
+                    const { deviceType, deviceId, deviceSerialNumber } = hposTestData;
+                    if (deviceType === 'HEMOCUBE' && deviceId) {
+                        testDevices.add(deviceId);
+                    }
+                    if (deviceType !== 'HEMOCUBE' && deviceSerialNumber) {
                         testDevices.add(deviceSerialNumber);
+                    }
                 });
                 const groups = [...testDevices];
                 setDevices(groups);

src/components/ExportData.css

@@ -0,0 +1,29 @@
+.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;
+}
+
+.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

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import DatePicker from "react-datepicker";
+import moment from 'moment';
+
+import "react-datepicker/dist/react-datepicker.css";
+
+import './ExportData.css';
+
+function ExportData({ url, show }) {
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
+
+    const fetchFile = (start_date, end_date) => {
+        window.location.href = `https://asia-south1-hpos-qa.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;

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/HomePage.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const HomePage = (props) => {
+  return (
+    <div>HomePage</div>
+  );
+};
+
+export default HomePage;

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/MainLayout.js

@@ -0,0 +1,38 @@
+import { Outlet } from "react-router-dom";
+import { Box, Toolbar } from "@mui/material";
+import colorConfigs from "../configs/colorConfigs";
+import sizeConfigs from "../configs/sizeConfigs";
+import Sidebar from "./nav/Sidebar";
+import Topbar from "./nav/Topbar";
+
+const MainLayout = () => {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <Topbar />
+      <Box
+        component="nav"
+        sx={{
+          width: sizeConfigs.sidebar.width,
+          flexShrink: 0
+        }}
+      >
+        <Sidebar />
+      </Box>
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: 3,
+          width: `calc(100% - ${sizeConfigs.sidebar.width})`,
+          minHeight: "100vh",
+          backgroundColor: colorConfigs.mainBg
+        }}
+      >
+        <Toolbar />
+        <Outlet />
+      </Box>
+    </Box>
+  );
+};
+
+export default MainLayout;

src/components/PageWrapper.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setAppState } from "../store/appStateSlice";
+
+const PageWrapper = (props) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (props.state) {
+      dispatch(setAppState(props.state));
+    }
+  }, [dispatch, props]);
+
+  return (
+    <>{props.children}</>
+  );
+};
+
+export default PageWrapper;

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

@@ -0,0 +1,32 @@
+.message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 80vw;
+    height: 50px;
+    background-color: rgb(187, 218, 174);
+}
+
+.user-creation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.clear-users-button {
+    background-color: #b62200;
+    border: none;
+    color: white;
+    padding: 5px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 5px;
+}
+
+.format-text {
+    color: red;
+}

src/components/Registration.js

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import moment from 'moment';
+import axios from 'axios';
+
+import './Registration.css';
+
+function Registration() {
+    const [userId, setUserId] = useState("2808202300103SMIBLR");
+    const [counter, setCounter] = useState(0);
+    const [message, setMessage] = useState("");
+    const [name, setName] = useState("");
+
+    const createUser = () => {
+        setMessage("");
+        const id = moment().unix() + counter + "SMIBLR";
+        setCounter(counter + 1);
+        axios({
+            method: 'post',
+            url: "https://asia-south1-hpos-qa.cloudfunctions.net/registerUser",
+            data: {
+                "_id": id,
+                "aadharId": "2808202300001",
+                "abhaId": "12434949797979",
+                "birthYear": "2000",
+                "bloodGroup": "",
+                "careOf": "",
+                "caste": "",
+                "city": "Bengaluru",
+                "district": "Bengaluru",
+                "gender": "Male",
+                "house": "42",
+                "maritalStatus": "Single",
+                "name": name ? name : "Web",
+                "phoneNumber": "9123456789",
+                "pinCode": "560060",
+                "registeredBy": "admin",
+                "registrationCenterName": "SMI",
+                "sickleCellHistory": null,
+                "state": "Karnataka",
+                "subCaste": "",
+                "testStatus": false,
+                "incubationTime": moment().subtract('15', 'minutes').utcOffset("+05:30").format("YYYY-MM-DD HH:mm:ss"),
+                "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`);
+            })
+            .catch((err) => {
+                console.log(err);
+                setMessage(`error: ${err?.message}`);
+            });
+    }
+
+    const clearsUsers = () => {
+        setMessage("");
+        axios({
+            method: 'get',
+            url: "https://asia-south1-hpos-qa.cloudfunctions.net/clearUsers",
+            withCredentials: false,
+            secure: false,
+            headers: {
+                "Content-Type": "application/json",
+                // "x-client": "e16a1bd15af2ee640f5a7a18c8d8333f5f01f7c66e003bbc21ee52870f1bce27",
+            },
+        })
+            .then(response => response.data)
+            .then((data) => {
+                setMessage(`${data}`);
+            })
+            .catch((err) => {
+                console.log(err);
+                setMessage(`error: ${err?.message}`);
+            });
+    }
+
+    const onNameChange = (event) => {
+        setName(event.target.value);
+    }
+
+    return (
+        <div className="user-creation">
+            <label>
+                name:
+                <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</div>
+            </div>
+            <div className='dates'>
+                <div className='clear-users-button' onClick={() => clearsUsers()}>Clear</div>
+            </div>
+            <div>{message && <div className='message'>{message}</div>}</div>
+        </div>
+    );
+}
+export default Registration;

src/components/Samples.css

@@ -0,0 +1,38 @@
+#samples-table {
+    font-family: Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+#samples-table td,
+#samples-table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+    width: 10vw;
+}
+
+#samples-table td {
+    width: 15vw;
+}
+
+#samples-table tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+#samples-table tr:hover {
+    background-color: #ddd;
+}
+
+#samples-table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: center;
+    background-color: rgb(144, 183, 255);
+    color: black;
+    width: 5vw;
+}
+
+.samples-container {
+    overflow-x: auto;
+    overflow-y: auto;
+}

src/components/Samples.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot, where, orderBy, limit } from 'firebase/firestore';
+
+import './Samples.css';
+import db from '../firebase';
+import moment from 'moment';
+
+const Samples = () => {
+    const [samples, setSamples] = useState([]);
+
+    useEffect(() => {
+        if (!samples.length) {
+            const q = query(collection(db, "testData"), where("testTime", ">=", moment().format("YYYY-MM-DD").toString()), orderBy("testTime", "desc"));
+
+            const unsub = onSnapshot(q, (querySnapshot) => {
+                const samples = [];
+                querySnapshot.forEach((document) => {
+                    console.log(document.data());
+                    const alert = document.data();
+                    samples.push(alert);
+                });
+                setSamples(samples);
+            });
+
+            return () => unsub;
+        }
+    }, []);
+
+    return (
+        <div>
+            {/* <div className='samples-heading'><h3>Samples page for denovix useage</h3></div>
+            {samples.length ? (
+                samples.map((alert, index) => (
+                    <div key={index} className='samples-card'>
+                        <div tabIndex={index}><strong>{alert._id}</strong></div>
+                        <p className='sample-time'>{alert.testTime}</p>
+                        <p className='sample-time-ago'>{moment(alert.testTime).fromNow()}</p>
+                    </div>
+                ))
+            ) : (
+                <div className='no-samples-message'>Samples will appear as in when a test is recorded</div>
+            )} */}
+
+
+            <h1>Samples</h1>
+
+            <div className='samples-container'>
+                <table id="samples-table">
+                    <tr>
+                        <th>Sample Name</th>
+                        <th>Device</th>
+                        <th>Classification</th>
+                        <th>abs1</th>
+                        <th>abs2</th>
+                        <th>abs3</th>
+                        <th>PDR</th>
+                        <th>Time</th>
+                    </tr>
+                    {samples.map((sample, index) => (
+                        <tr key={index} className='samples-table-tr'>
+                            <td>{sample.name}</td>
+                            <td>{sample.deviceId}</td>
+                            <td>{sample.prdClassification || 'NA'}</td>
+                            <td>{sample.abs1}</td>
+                            <td>{sample.abs2 || 'NA'}</td>
+                            <td>{sample.abs3 || 'NA'}</td>
+                            <td>{sample.predictedDenovixRatio}</td>
+                            <td>{sample.testTime}</td>
+                        </tr>
+                    ))}
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default Samples;

src/components/TestAnalyticsGraph.js

@@ -25,9 +25,9 @@ class TestAnalyticsGraph extends Component {
 
         data.reverse();
 
-        var margin = { top: 60, right: 20, bottom: 30, left: 50 },
+        var margin = { top: 30, right: 20, bottom: 50, left: 15 },
-            width = 520 - margin.left - margin.right,
+            width = 1500 - margin.left - margin.right,
-            height = 220 - margin.top - margin.bottom;
+            height = 180 - margin.top - margin.bottom;
 
         var svg = d3.select("#tests-count-graph").append('svg')
             .attr("width", width + margin.left + margin.right)

src/components/nav/Sidebar.js

@@ -0,0 +1,50 @@
+import { Avatar, Drawer, List, Stack, Toolbar } from "@mui/material";
+
+// import assets from "../../assets";
+import colorConfigs from "../../configs/colorConfigs";
+import sizeConfigs from "../../configs/sizeConfigs";
+import appRoutes from "../../routes/appRoutes";
+import SidebarItem from "./SidebarItem";
+import SidebarItemCollapse from "./SidebarItemCollapse";
+
+const Sidebar = () => {
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: sizeConfigs.sidebar.width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: sizeConfigs.sidebar.width,
+          boxSizing: "border-box",
+          borderRight: "0px",
+          backgroundColor: colorConfigs.sidebar.bg,
+          color: colorConfigs.sidebar.color
+        }
+      }}
+    >
+      <List disablePadding>
+        <Toolbar sx={{ marginBottom: "20px" }}>
+          <Stack
+            sx={{ width: "100%" }}
+            direction="row"
+            justifyContent="center"
+          >
+            <Avatar src={require('../../smi-logo-120x120.webp')} />
+          </Stack>
+        </Toolbar>
+        {appRoutes.map((route, index) => (
+          route.sidebarProps ? (
+            route.child ? (
+              <SidebarItemCollapse item={route} key={index} />
+            ) : (
+              <SidebarItem item={route} key={index} />
+            )
+          ) : null
+        ))}
+      </List>
+    </Drawer>
+  );
+};
+
+export default Sidebar;

src/components/nav/SidebarItem.js

@@ -0,0 +1,34 @@
+import { ListItemButton, ListItemIcon } from "@mui/material";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import colorConfigs from "../../configs/colorConfigs";
+
+const SidebarItem = ({ item }) => {
+  const { appState } = useSelector((state) => state.appState);
+
+  return (
+    item.sidebarProps && item.path ? (
+      <ListItemButton
+        component={Link}
+        to={item.path}
+        sx={{
+          "&: hover": {
+            backgroundColor: colorConfigs.sidebar.hoverBg
+          },
+          backgroundColor: appState === item.state ? colorConfigs.sidebar.activeBg : "unset",
+          paddingY: "12px",
+          paddingX: "24px"
+        }}
+      >
+        <ListItemIcon sx={{
+          color: colorConfigs.sidebar.color
+        }}>
+          {item.sidebarProps.icon && item.sidebarProps.icon}
+        </ListItemIcon>
+        {item.sidebarProps.displayText}
+      </ListItemButton>
+    ) : null
+  );
+};
+
+export default SidebarItem;

src/components/nav/SidebarItemCollapse.js

@@ -0,0 +1,66 @@
+import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import colorConfigs from "../../configs/colorConfigs";
+import ExpandLessOutlinedIcon from '@mui/icons-material/ExpandLessOutlined';
+import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';
+import SidebarItem from "./SidebarItem";
+import { useSelector } from "react-redux";
+
+const SidebarItemCollapse = ({ item }) => {
+  const [open, setOpen] = useState(false);
+
+  const { appState } = useSelector((state) => state.appState);
+
+  useEffect(() => {
+    if (appState.includes(item.state)) {
+      setOpen(true);
+    }
+  }, [appState, item]);
+
+  return (
+    item.sidebarProps ? (
+      <>
+        <ListItemButton
+          onClick={() => setOpen(!open)}
+          sx={{
+            "&: hover": {
+              backgroundColor: colorConfigs.sidebar.hoverBg
+            },
+            paddingY: "12px",
+            paddingX: "24px"
+          }}
+        >
+          <ListItemIcon sx={{
+            color: colorConfigs.sidebar.color
+          }}>
+            {item.sidebarProps.icon && item.sidebarProps.icon}
+          </ListItemIcon>
+          <ListItemText
+            disableTypography
+            primary={
+              <Typography>
+                {item.sidebarProps.displayText}
+              </Typography>
+            }
+          />
+          {open ? <ExpandLessOutlinedIcon /> : <ExpandMoreOutlinedIcon />}
+        </ListItemButton>
+        <Collapse in={open} timeout="auto">
+          <List>
+            {item.child?.map((route, index) => (
+              route.sidebarProps ? (
+                route.child ? (
+                  <SidebarItemCollapse item={route} key={index} />
+                ) : (
+                  <SidebarItem item={route} key={index} />
+                )
+              ) : null
+            ))}
+          </List>
+        </Collapse>
+      </>
+    ) : null
+  );
+};
+
+export default SidebarItemCollapse;

src/components/nav/Topbar.js

@@ -0,0 +1,26 @@
+import { AppBar, Toolbar, Typography } from "@mui/material";
+import colorConfigs from "../../configs/colorConfigs";
+import sizeConfigs from "../../configs/sizeConfigs";
+
+const Topbar = () => {
+  return (
+    <AppBar
+      position="fixed"
+      sx={{
+        width: `calc(100% - ${sizeConfigs.sidebar.width})`,
+        ml: sizeConfigs.sidebar.width,
+        boxShadow: "unset",
+        backgroundColor: colorConfigs.topbar.bg,
+        color: colorConfigs.topbar.color
+      }}
+    >
+      <Toolbar>
+        <Typography variant="h6">
+          HPOS Web - Quality / QA
+        </Typography>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Topbar;

src/configs/colorConfigs.js

@@ -0,0 +1,17 @@
+import { colors } from "@mui/material";
+
+const colorConfigs = {
+  sidebar: {
+    bg: "#233044",
+    color: "#eeeeee",
+    hoverBg: "#1e293a",
+    activeBg: "#1e253a"
+  },
+  topbar: {
+    bg: "#fff",
+    color: "#000"
+  },
+  mainBg: colors.grey["100"]
+};
+
+export default colorConfigs;

src/configs/sizeConfigs.js

@@ -0,0 +1,7 @@
+const sizeConfigs = {
+  sidebar: {
+    width: "300px"
+  }
+};
+
+export default sizeConfigs;

src/firebase.js

@@ -14,17 +14,39 @@ import { getAnalytics } from "firebase/analytics";
 //     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"
+};
 
-  /* prod */
+
-  const firebaseConfig = {
+// /* preprod */
-    apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
+// const firebaseConfig = {
-    authDomain: "hpos-prod.firebaseapp.com",
+//   apiKey: "AIzaSyB2-suWmKh2PgQbRmx7rzPjYhgoovQIsQ8",
-    projectId: "hpos-prod",
+//   authDomain: "hpos-preprod.firebaseapp.com",
-    storageBucket: "hpos-prod.appspot.com",
+//   projectId: "hpos-preprod",
-    messagingSenderId: "1012719870714",
+//   storageBucket: "hpos-preprod.appspot.com",
-    appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
+//   messagingSenderId: "121176529204",
-    measurementId: "G-B0NZ7DEF69"
+//   appId: "1:121176529204:web:6c0db8e642992192bbed61",
-  };
+//   measurementId: "G-GYM6LRQ8KR"
+// };
+  
+  // /* prod */
+  // const firebaseConfig = {
+  //   apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
+  //   authDomain: "hpos-prod.firebaseapp.com",
+  //   projectId: "hpos-prod",
+  //   storageBucket: "hpos-prod.appspot.com",
+  //   messagingSenderId: "1012719870714",
+  //   appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
+  //   measurementId: "G-B0NZ7DEF69"
+  // };
 
 
 const app = initializeApp(firebaseConfig);

src/index.js

@@ -4,6 +4,9 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
+import { Provider } from 'react-redux';
+
+import { store } from './store/store';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -11,6 +14,7 @@ import Devices from './components/Devices';
 import TestAnalytics from './components/TestAnalytics';
 import WorldMap from './components/WorldMap';
 import RegistraionChart from './RegistraionChart';
+import TestAnalyticsGraph from './components/TestAnalyticsGraph';
 
 const router = createBrowserRouter([
   {
@@ -29,6 +33,10 @@ const router = createBrowserRouter([
     path: "/analytics",
     element: <TestAnalytics />,
   },
+  {
+    path: "/hposdata",
+    element: <TestAnalyticsGraph />,
+  },
   {
     path: "/map",
     element: <RegistraionChart />,
@@ -38,7 +46,11 @@ const router = createBrowserRouter([
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-    <RouterProvider router={router} />
+  <Provider store={store}>
+    {/* <CssBaseline /> */}
+    {/* <RouterProvider router={router} /> */}
+    <App />
+  </Provider>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/routes/appRoutes.js

@@ -0,0 +1,116 @@
+import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
+import AppsOutlinedIcon from '@mui/icons-material/AppsOutlined';
+
+import TestAnalytics from "../components/TestAnalytics";
+import HomePage from '../components/HomePage';
+import Devices from '../components/Devices';
+import { Download, FactCheck } from '@mui/icons-material';
+import ExportData from '../components/ExportData';
+import Registration from '../components/Registration';
+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 = [
+    {
+        index: true,
+        element: <HomePage />,
+        state: "home"
+    },
+    {
+        path: "/analytics",
+        element: <TestAnalytics />,
+        state: "analytics",
+        sidebarProps: {
+            displayText: "Analytics",
+            icon: <DashboardOutlinedIcon />
+        }
+    },
+    {
+        path: "/tests/insights",
+        element: <Devices />,
+        state: "insights",
+        sidebarProps: {
+            displayText: "Insights",
+            icon: <AppsOutlinedIcon />
+        }
+    },
+    {
+        path: "/downloaddata",
+        element: <ExportData />,
+        state: "downloaddata",
+        sidebarProps: {
+            displayText: "Raw Data",
+            icon: <Download />
+        }
+    },
+    {
+        path: "/registration",
+        element: <Registration />,
+        state: "registration",
+        sidebarProps: {
+            displayText: "Registration",
+            icon: <FaUser />
+        }
+    },
+    {
+        path: "/appinstallation",
+        element: <AppInstallation />,
+        state: "appinstallation",
+        sidebarProps: {
+            displayText: "App Installation",
+            icon: <FaAndroid />
+        }
+    },
+    {
+        path: "/samples",
+        element: <Samples />,
+        state: "Samples",
+        sidebarProps: {
+            displayText: "Samples",
+            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;

src/routes/index.js

@@ -0,0 +1,34 @@
+import { Route } from "react-router-dom";
+import PageWrapper from "../components/PageWrapper";
+import appRoutes from "./appRoutes";
+
+const generateRoute = (routes) => {
+  return routes.map((route, index) => (
+    route.index ? (
+      <Route
+        index
+        path={route.path}
+        element={<PageWrapper state={route.state}>
+          {route.element}
+        </PageWrapper>}
+        key={index}
+      />
+    ) : (
+      <Route
+        path={route.path}
+        element={
+          <PageWrapper state={route.child ? undefined : route.state}>
+            {route.element}
+          </PageWrapper>
+        }
+        key={index}
+      >
+        {route.child && (
+          generateRoute(route.child)
+        )}
+      </Route>
+    )
+  ));
+};
+
+export const routes = generateRoute(appRoutes);

src/store/appStateSlice.js

@@ -0,0 +1,21 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const initialState = {
+  appState: ""
+};
+
+export const appStateSlice = createSlice({
+  name: "appState",
+  initialState,
+  reducers: {
+    setAppState: (state, action) => {
+      state.appState = action.payload;
+    }
+  }
+});
+
+export const {
+  setAppState
+} = appStateSlice.actions;
+
+export default appStateSlice.reducer;

src/store/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from "@reduxjs/toolkit";
+import appStateSlice from "./appStateSlice";
+
+export const store = configureStore({
+  reducer: {
+    appState: appStateSlice
+  }
+});