Fetch actual data from the database and create prototype scanner layout.

frontend/src/App.css

@@ -4,11 +4,3 @@
   min-height: 100vh;
   width: 100%;
 }
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/App.jsx

@@ -1,99 +1,78 @@
 import { useState } from 'react';
 import BarcodeScannerComponent from 'react-qr-barcode-scanner';
-import toast, { Toaster } from 'react-hot-toast';
 import { Container, Row, Col } from 'react-bootstrap';
+import Table from 'react-bootstrap/Table';
+import Alert from 'react-bootstrap/Alert';
 
-// Styles
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
-  // State to store the latest scanned data
-  const [currentData, setCurrentData] = useState('No result');
-
-  // State to store an array of scanned results for history tracking
-  const [scanHistory, setScanHistory] = useState([]);
-
-  /**
-   * Handles the scanning result.
-   * @param {Error} err - Error, if any, from the scanner.
-   * @param {Object} result - The scanning result object.
-   */
-  const handleScan = (err, result) => {
-    if (result) {
-      // Update current data and add it to the scan history
-      setCurrentData(result.text);
-      setScanHistory(prevHistory => [...prevHistory, result.text]);
-
-      // Show a success notification using toast
-      toast.success(`Product scanned: ${result.text}`);
-    } else {
-      setCurrentData('No result'); // Set message if no result
-    }
-  };
+    const [reqAccount, setReqAccount] = useState('');
+    const [actAccount, setActAccount] = useState('');
+    const [balance, setBalance] = useState(-1);
+    const [statusMsg, setStatusMsg] = useState('');
+    const [msgType, setMsgType] = useState('info');
+    
+    const handleScan = async (err, result) => {
+	if (result) {
+	    const ra = result.text;
+	    setReqAccount(ra);
+	    setStatusMsg('Loading');
+	    setMsgType('primary');
+	    try {
+		const resp = await fetch('/api/barcode/' + ra);
+		if (resp.ok) {
+		    const json = await resp.json();
+		    setActAccount(ra);
+		    setBalance(json.amount);
+		    setStatusMsg('OK');
+		    setMsgType('success');
+		}
+	    } catch(ex) {
+		setMsgType('danger');
+		setStatusMsg(ex.message);
+	    }
+	}
+    };
 
     return (
 	<Container>
 	    <Row>
 		<Col>
-	    {/* Notification toaster for displaying scan success messages */}
-		    <Toaster position="top-right" reverseOrder={false} />
+		    <BarcodeScannerComponent
+			width={"100%"}
+			height={"auto"}
+			onUpdate={handleScan}
+			delay={1500}
+		    />
 		</Col>
 	    </Row>
 	    <Row>
 		<Col>
-
-	    {/* Scanner title */}
-		    <div className="title">BrmInv</div>
-		</Col>
-	    </Row>
-
-	    <Row>
-		<Col>
-
-	    {/* Barcode scanner component */}
-	    <div className="scan" style={{border: '1px solid black'}}>
-		<BarcodeScannerComponent
-		    width={"100%"}
-		    height={"auto"}
-		    onUpdate={handleScan}
-		    delay={1500} // 1.5 seconds delay between scans
-		/>
-	    </div>
-		</Col>
-	    </Row>
-
-	    <Row>
-		<Col>
-	    {/* Display the current scanned data */}
-		    <p>Scanned Data: {currentData}</p>
-		</Col>
-	    </Row>
-
-	    <Row>
-		<Col>
-	    {/* Table to display scan history */}
-	    <h2>Scan History</h2>
-	    <table>
-		<thead>
-		    <tr>
-			<th>#</th>
-			<th>Scanned Result</th>
-		    </tr>
-		</thead>
-		<tbody>
-		    {scanHistory.map((result, index) => (
-			<tr key={index}>
-			    <td>{index + 1}</td>
-			    <td>{result}</td>
+		    <Table>
+			<tr>
+			    <th>Requested:</th>
+			    <td>{reqAccount}</td>
 			</tr>
-		    ))}
-		</tbody>
-	    </table>
+			<tr>
+			    <th>Loaded:</th>
+			    <td>{actAccount}</td>
+			</tr>
+			<tr>
+			    <th>Balance:</th>
+			    <td>{balance}</td>
+			</tr>
+		    </Table>
 		</Col>
 	    </Row>
-	    </Container>
-		);
-    }
+	    <Row>
+		<Col>
+		    <Alert variant={msgType}>{statusMsg}</Alert>
+		</Col>
+	    </Row>
+	</Container>
+    );
+}
 
-    export default App;
+export default App;