add users list

src/components/Users.js

@@ -0,0 +1,49 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot, where, orderBy } from 'firebase/firestore';
+
+import './Samples.css';
+import db from '../firebase';
+import moment from 'moment';
+
+const Users = () => {
+    const [samples, setSamples] = useState([]);
+
+    useEffect(() => {
+        if (!samples.length) {
+            const q = query(collection(db, "patientData"), where("createdAt", ">=", moment().format("YYYY-MM-DD")), orderBy("createdAt", "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>Users 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-classification'>{alert.registrationCenterName}</p>
+                        {/* <p className='sample-classification'>{alert.deviceSerialNumber}</p> */}
+                        {/* <p className='sample-time'>Test Status: {alert.testStatus}</p> */}
+                        <p className='sample-time-ago'>{moment(alert.createdAt).fromNow()}</p>
+                    </div>
+                ))
+            ) : (
+                <div className='no-samples-message'>No tests are conducted today</div>
+            )}
+        </div>
+    )
+}
+
+export default Users;

src/index.js

@@ -15,6 +15,7 @@ import RegistraionChart from './RegistraionChart';
 import Calibrations from './components/Calibrations';
 import Alerts from './components/Alerts';
 import Samples from './components/Samples';
+import Users from './components/Users';
 
 const router = createBrowserRouter([
   {
@@ -53,6 +54,10 @@ const router = createBrowserRouter([
     path: "/samples",
     element: <Samples />,
   },
+  {
+    path: "/users",
+    element: <Users />,
+  },
 ]);