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,34 +1,38 @@
 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 [reqAccount, setReqAccount] = useState('');
-  const [currentData, setCurrentData] = useState('No result');
+    const [actAccount, setActAccount] = useState('');
+    const [balance, setBalance] = useState(-1);
+    const [statusMsg, setStatusMsg] = useState('');
+    const [msgType, setMsgType] = useState('info');
     
-  // State to store an array of scanned results for history tracking
+    const handleScan = async (err, result) => {
-  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
+	    const ra = result.text;
-      setCurrentData(result.text);
+	    setReqAccount(ra);
-      setScanHistory(prevHistory => [...prevHistory, result.text]);
+	    setStatusMsg('Loading');
-
+	    setMsgType('primary');
-      // Show a success notification using toast
+	    try {
-      toast.success(`Product scanned: ${result.text}`);
+		const resp = await fetch('/api/barcode/' + ra);
-    } else {
+		if (resp.ok) {
-      setCurrentData('No result'); // Set message if no result
+		    const json = await resp.json();
+		    setActAccount(ra);
+		    setBalance(json.amount);
+		    setStatusMsg('OK');
+		    setMsgType('success');
+		}
+	    } catch(ex) {
+		setMsgType('danger');
+		setStatusMsg(ex.message);
+	    }
 	}
     };
 
@@ -36,64 +40,39 @@ function App() {
 	<Container>
 	    <Row>
 		<Col>
-	    {/* Notification toaster for displaying scan success messages */}
-		    <Toaster position="top-right" reverseOrder={false} />
-		</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
+			delay={1500}
 		    />
-	    </div>
 		</Col>
 	    </Row>
-
 	    <Row>
 		<Col>
-	    {/* Display the current scanned data */}
+		    <Table>
-		    <p>Scanned Data: {currentData}</p>
-		</Col>
-	    </Row>
-
-	    <Row>
-		<Col>
-	    {/* Table to display scan history */}
-	    <h2>Scan History</h2>
-	    <table>
-		<thead>
 			<tr>
-			<th>#</th>
+			    <th>Requested:</th>
-			<th>Scanned Result</th>
+			    <td>{reqAccount}</td>
 			</tr>
-		</thead>
+			<tr>
-		<tbody>
+			    <th>Loaded:</th>
-		    {scanHistory.map((result, index) => (
+			    <td>{actAccount}</td>
-			<tr key={index}>
-			    <td>{index + 1}</td>
-			    <td>{result}</td>
 			</tr>
-		    ))}
+			<tr>
-		</tbody>
+			    <th>Balance:</th>
-	    </table>
+			    <td>{balance}</td>
+			</tr>
+		    </Table>
+		</Col>
+	    </Row>
+	    <Row>
+		<Col>
+		    <Alert variant={msgType}>{statusMsg}</Alert>
 		</Col>
 	    </Row>
 	</Container>
     );
-    }
+}
 
-    export default App;
+export default App;