add kit check

src/components/KitCheck.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot, where, orderBy, limit } from 'firebase/firestore';
+import moment from 'moment';
+
+import db from '../firebase';
+import './KitCheck.css';
+
+const KitCheck = () => {
+    const [samples, setSamples] = useState([]);
+
+    useEffect(() => {
+        if (!samples.length) {
+            const q = query(collection(db, "buffers"), where("runTime", ">=", moment().format("YYYY-MM-DD").toString()), orderBy("runTime", "desc"));
+
+            const unsub = onSnapshot(q, (querySnapshot) => {
+                const samples = [];
+                querySnapshot.forEach((document) => {
+                    console.log(document.id);
+                    const data = document.data();
+                    const id = document.id;
+                    samples.push({id, ...data});
+                });
+                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>Kit Check</h1>
+
+            <div className='samples-container'>
+                <table id="samples-table">
+                    <tr>
+                        <th>Device</th>
+                        <th>Kit</th>
+                        <th>Result</th>
+                        <th>Time</th>
+                    </tr>
+                    {samples.map((sample, index) => (
+                        <tr key={index} className='samples-table-tr'>
+                            <td>{sample.deviceId}</td>
+                            <td>{sample.kitSerial || 'NA'}</td>
+                            <td>{sample.classificationResult || 'NA'}</td>
+                            <td>{moment(sample.runTime).format('HH:mm:ss')}</td>
+                        </tr>
+                    ))}
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default KitCheck;