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

2026-04-27 21:23:40 -05:00
parent 649ae1ee9f
commit 7d2f048932
32 changed files with 1909 additions and 325 deletions
--- a/lstMobile/src/components/ProdScanner.tsx
+++ b/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>
+	);
 }
--- a/lstMobile/src/components/ScannExample.tsx
+++ b/lstMobile/src/components/ScannExample.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Button, Text, View } from "react-native";
+import { sendTcpMessage } from "../lib/tcpScan";
 import { type ZebraScanResult, zebraScanner } from "../lib/ZebraScanner";

 const STX = "\x02";
@@ -13,20 +14,19 @@ export function ScannerTestScreen() {

 		const scanned = scan.data;

-		// Hard-coded command example:
-		// <stx>98@{scanned}<etx>
-		const tcpMessage = `${STX}98@${scanned}${ETX}`;
+		let commandToSend = `${STX}98@${scanned}${ETX}`;

-		console.log("TCP message to send:", tcpMessage);
-		console.log("TCP message visible:", `<stx>98@${scanned}<etx>`);
+		// if we are sscc we need to scan like this .... <STX>98@]C100090087710038712256<ETX>
+		if (scan.data.startsWith("000")) {
+			commandToSend = `${STX}98@]C1${scanned}${ETX}`;
+		}

+		const something = await sendTcpMessage(commandToSend, "10.44.0.26", 50001);
 		// Later this is where your TCP send goes.
 		// const response = await sendTcpMessage(tcpMessage);

-		const fakeResponse = `Would send TCP: <stx>98@${scanned}<etx>`;
-
-		console.log("TCP response:", fakeResponse);
-		setLastResponse(fakeResponse);
+		console.log("TCP response:", something);
+		setLastResponse(JSON.stringify(something));
 	};

 	useEffect(() => {
--- a/lstMobile/src/components/ScannedLabels.tsx
+++ b/lstMobile/src/components/ScannedLabels.tsx
@@ -0,0 +1,50 @@
+import { ScrollView, Text, View } from "react-native";
+
+type ScannedLabel = {
+	id: string;
+	barcode: string;
+	createdAt: string;
+};
+
+type ScannedLabelBoxProps = {
+	labels: ScannedLabel[];
+};
+
+export function ScannedLabelBox({ labels }: ScannedLabelBoxProps) {
+	return (
+		<View style={{ flex: 1, marginTop: 30 }}>
+			<Text style={{ fontSize: 18, fontWeight: "700", marginBottom: 8 }}>
+				Current scanned labels
+			</Text>
+
+			<ScrollView
+				style={{
+					flex: 1,
+					borderWidth: 1,
+					borderColor: "#ccc",
+					borderRadius: 8,
+					padding: 2,
+					margin: 2,
+				}}
+				contentContainerStyle={{ gap: 2 }}
+			>
+				{labels.length === 0 ? (
+					<Text style={{ color: "#777" }}>No labels scanned yet</Text>
+				) : (
+					labels.map((label) => (
+						<View
+							key={`${label}`}
+							style={{
+								padding: 2,
+								borderRadius: 8,
+								backgroundColor: "#f2f2f2",
+							}}
+						>
+							<Text style={{ fontSize: 18, fontWeight: "700" }}>{label}</Text>
+						</View>
+					))
+				)}
+			</ScrollView>
+		</View>
+	);
+}
--- a/lstMobile/src/components/ui/card.tsx
+++ b/lstMobile/src/components/ui/card.tsx
@@ -0,0 +1,52 @@
+import { Text, TextClassContext } from '@/components/ui/text';
+import { cn } from '@/lib/utils';
+import { View } from 'react-native';
+
+function Card({ className, ...props }: React.ComponentProps<typeof View>) {
+  return (
+    <TextClassContext.Provider value="text-card-foreground">
+      <View
+        className={cn(
+          'bg-card border-border flex flex-col gap-6 rounded-xl border py-6 shadow-sm shadow-black/5',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<typeof View>) {
+  return <View className={cn('flex flex-col gap-1.5 px-6', className)} {...props} />;
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text>) {
+  return (
+    <Text
+      role="heading"
+      aria-level={3}
+      className={cn('font-semibold leading-none', className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text>) {
+  return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<typeof View>) {
+  return <View className={cn('px-6', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<typeof View>) {
+  return <View className={cn('flex flex-row items-center px-6', className)} {...props} />;
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
--- a/lstMobile/src/components/ui/text.tsx
+++ b/lstMobile/src/components/ui/text.tsx
@@ -0,0 +1,88 @@
+import { cn } from '@/lib/utils';
+import * as Slot from '@rn-primitives/slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Platform, Text as RNText, type Role } from 'react-native';
+
+const textVariants = cva(
+  cn(
+    'text-foreground text-base',
+    Platform.select({
+      web: 'select-text',
+    })
+  ),
+  {
+    variants: {
+      variant: {
+        default: '',
+        h1: cn(
+          'text-center text-4xl font-extrabold tracking-tight',
+          Platform.select({ web: 'scroll-m-20 text-balance' })
+        ),
+        h2: cn(
+          'border-border border-b pb-2 text-3xl font-semibold tracking-tight',
+          Platform.select({ web: 'scroll-m-20 first:mt-0' })
+        ),
+        h3: cn('text-2xl font-semibold tracking-tight', Platform.select({ web: 'scroll-m-20' })),
+        h4: cn('text-xl font-semibold tracking-tight', Platform.select({ web: 'scroll-m-20' })),
+        p: 'mt-3 leading-7 sm:mt-6',
+        blockquote: 'mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6',
+        code: cn(
+          'bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold'
+        ),
+        lead: 'text-muted-foreground text-xl',
+        large: 'text-lg font-semibold',
+        small: 'text-sm font-medium leading-none',
+        muted: 'text-muted-foreground text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type TextVariantProps = VariantProps<typeof textVariants>;
+
+type TextVariant = NonNullable<TextVariantProps['variant']>;
+
+const ROLE: Partial<Record<TextVariant, Role>> = {
+  h1: 'heading',
+  h2: 'heading',
+  h3: 'heading',
+  h4: 'heading',
+  blockquote: Platform.select({ web: 'blockquote' as Role }),
+  code: Platform.select({ web: 'code' as Role }),
+};
+
+const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {
+  h1: '1',
+  h2: '2',
+  h3: '3',
+  h4: '4',
+};
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+function Text({
+  className,
+  asChild = false,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof RNText> &
+  TextVariantProps & {
+    asChild?: boolean;
+  }) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn(textVariants({ variant }), textClass, className)}
+      role={variant ? ROLE[variant] : undefined}
+      aria-level={variant ? ARIA_LEVEL[variant] : undefined}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextClassContext };