feat(mobile): shadcn like and tailwind added to make things look yummy

lstMobile/src/components/ProdScanner.tsx

@@ -1,31 +1,121 @@
-import React from 'react'
-import { View, Text } from 'react-native'
-import { ScannerTestScreen } from './ScannExample'
-import { useAppStore } from '../hooks/useAppStore';
+import { useCallback, useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import { useAppStore } from "../hooks/useAppStore";
+import { sendTcpMessage } from "../lib/tcpScan";
+import { type ZebraScanResult, zebraScanner } from "../lib/ZebraScanner";
+import { ScannedLabelBox } from "./ScannedLabels";
+
+const STX = "\x02";
+const ETX = "\x03";
 
 export default function ProdScanner() {
-        const scannerIdFromStore = useAppStore((s) => s.scannerId);
-  return (
-    <View>
-        <View style={{ alignItems: "center", margin: 10 }}>
-                    <Text style={{ fontSize: 20, fontWeight: "600" }}>SScanner ID: {scannerIdFromStore}</Text>
-                </View>
-                <View
-                    style={{
-                        marginTop: 50,
-                        alignItems: "center",
-                    }}
-                >
-                    <Text>Relocate</Text>
-                    <Text>0 / 4</Text>
-                </View>
-    
-                {/* <View>
-                    <Text>List of recent scanned pallets TBA</Text>
-                </View> */}
-                <ScannerTestScreen />
-    </View>
-    
-                
-  )
+	const [lastScan, setLastScan] = useState<any>(null);
+	const [tagScans, setTagScans] = useState<any>([]);
+	const scannerIdFromStore = useAppStore((s) => s.scannerId);
+	const serverIp = useAppStore((s) => s.serverIp);
+	const serverPort = useAppStore((s) => s.serverPort);
+
+	const handleScan = useCallback(
+		async (scan: ZebraScanResult) => {
+			const scanned = scan.data;
+
+			let commandToSend = `${STX}${scannerIdFromStore}@${scanned}${ETX}`;
+
+			// if we are sscc we need to scan like this .... <STX>98@]C100090087710038712256<ETX>
+			if (scan.data.startsWith("000")) {
+				commandToSend = `${STX}${scannerIdFromStore}@]C1${scanned}${ETX}`;
+				setTagScans((prev: any) => [
+					parseInt(scanned.slice(10, -1) || "000", 10).toString(),
+					...prev,
+				]);
+			}
+
+			// if we change commands we want to zero out the last scanned labels
+			if (/^[a-zA-Z]/.test(scan.data)) {
+				setTagScans([]);
+			}
+
+			const something = await sendTcpMessage(
+				commandToSend,
+				serverIp,
+				parseInt(serverPort || "0", 10),
+			);
+			// Later this is where your TCP send goes.
+			// const response = await sendTcpMessage(tcpMessage);
+			setLastScan(something.data[0]);
+			//console.log("TCP response:", something);
+		},
+		[scannerIdFromStore, serverIp, serverPort],
+	);
+
+	console.log(lastScan);
+
+	useEffect(() => {
+		zebraScanner.ensureProfile();
+		zebraScanner.startListening();
+
+		const sub = zebraScanner.addScanListener((scan) => {
+			//console.log("SCAN:", scan);
+			handleScan(scan);
+		});
+
+		return () => {
+			sub.remove();
+			zebraScanner.stopListening();
+		};
+	}, [handleScan]);
+	return (
+		<View>
+			<View>
+				<View style={{ alignItems: "center", margin: 10 }}>
+					<Text style={{ fontSize: 20, fontWeight: "600" }}>
+						Scanner ID: {parseInt(scannerIdFromStore || "0", 10)}
+					</Text>
+				</View>
+				{!lastScan ? (
+					<View
+						style={{
+							marginTop: 10,
+							alignItems: "center",
+						}}
+					>
+						<Text className="text-xl font-bold">Waiting on scan....</Text>
+					</View>
+				) : (
+					<View
+						style={{
+							marginTop: 10,
+							alignItems: "center",
+						}}
+					>
+						<Text style={{ fontSize: 20, fontWeight: "600" }}>
+							{lastScan?.action}
+						</Text>
+
+						{lastScan?.type === "error" ? (
+							<Text style={{ fontSize: 20, fontWeight: "600" }}>
+								{lastScan?.message}
+							</Text>
+						) : (
+							<View
+								style={{
+									marginTop: 15,
+									alignItems: "center",
+								}}
+							>
+								<Text style={{ fontSize: 20, fontWeight: "600" }}>
+									{lastScan?.prompt}
+								</Text>
+								<Text style={{ fontSize: 20, fontWeight: "600" }}>
+									{lastScan?.message}
+								</Text>
+							</View>
+						)}
+					</View>
+				)}
+			</View>
+
+			<ScannedLabelBox labels={tagScans} />
+		</View>
+	);
 }