@catalystsoftware/ui 1.0.12 → 1.0.14

package/dist/components/catalyst-ui/ecommerce/modules/cash-drawer-wizard.tsx

@@ -0,0 +1,1400 @@
+// app/routes/admin.cash-drawer.jsx
+//import { json, redirect } from "@remix-run/node";
+import { useLoaderData, useActionData, useFetcher } from "@remix-run/react";
+import { useState } from "react";
+//import { prisma } from "~/modules/libs/prisma";
+import { authSessionStorage } from "~/modules/auth/auth_session";
+//import eP from "~/utils/ext";
+import { requirePermission } from "~/components/catalyst-ui";
+import { Settings, Printer, Zap, CheckCircle, XCircle, AlertCircle, Plus, Trash2, Edit3, Save, X } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "~/components/catalyst-ui";
+import { Label } from "~/components/catalyst-ui";
+import { Input } from "~/components/catalyst-ui";
+import { Button } from "~/components/catalyst-ui";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/catalyst-ui";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "~/components/catalyst-ui";
+import { QuestionMarkCircle } from "@catalystsoftware/icons";
+
+
+/**export async function loader({ request }) {
+	const session = await authSessionStorage.getSession(request.headers.get("Cookie"));
+	const email = session.get("email");
+	const user = await eP.user.all(email);
+	if (!user) {
+		return redirect(import.meta.env.VITE_LOGIN);
+	}
+
+	requirePermission(user, "canEditStore");
+
+	try {
+		// Get all configs
+		const configs = await prisma.cashDrawerConfig.findMany({
+			include: {
+				Store: true,
+			},
+		});
+
+		const stores = await prisma.store.findMany({});
+
+		const users = await prisma.user.findMany({
+			orderBy: { username: "asc" },
+		});
+
+		return json({
+			configs,
+			stores,
+			users,
+			user,
+		});
+	} catch (error) {
+		console.error("Error loading cash drawer config:", error);
+		throw new Response(`Failed to load configuration ${error}`, { status: 500 });
+	}
+}
+
+export async function action({ request }) {
+	const session = await authSessionStorage.getSession(request.headers.get("Cookie"));
+	const email = session.get("email");
+	const user = await eP.user.all(email);
+	if (!user) {
+		return redirect(import.meta.env.VITE_LOGIN);
+	}
+
+	requirePermission(user, "canEditStore");
+
+	const d = Object.fromEntries(await request.formData());
+	const intent = d.intent;
+
+	try {
+		switch (intent) {
+			case "saveConfig": {
+				const configId = d.configId;
+				const configData = {
+					storeId: d.storeId || null,
+					userId: d.userId || null,
+					name: d.name,
+					method: d.method || "auto",
+					active: d.active || true,
+					networkHost: d.networkHost || null,
+					networkPort: parseInt(d.networkPort) || null,
+					apiEndpoint: d.apiEndpoint || null,
+					apiUrl: d.apiUrl || null,
+					usbVendorId: d.usbVendorId || null,
+					usbProductId: d.usbProductId || null,
+					usbUsagePage: d.usbUsagePage || null,
+					parallelPort: d.parallelPort || null,
+					bluetoothAddress: d.bluetoothAddress || null,
+					serviceUUID: d.serviceUUID || null,
+					printerName: d.printerName || null,
+					drawerPin: d.drawerPin || null,
+					driverPath: d.driverPath || null,
+					appPath: d.appPath || null,
+					appArgs: d.appArgs || null,
+					scriptPath: d.scriptPath || null,
+					cloudApiKey: d.cloudApiKey || null,
+					cloudUrl: d.cloudUrl || null,
+					pulseDuration: parseInt(d.pulseDuration) || null,
+					pulsePin: parseInt(d.pulsePin) || null,
+					printerIP: d.printerIP || null,
+					serialPort: d.serialPort || "COM1",
+					baudRate: parseInt(d.baudRate) || 9600,
+					customCommand: d.customCommand || null,
+					autoOpenOnChange: d.autoOpenOnChange === "on",
+					testMode: d.testMode === "on",
+				};
+
+				let config;
+				if (configId && configId !== "new") {
+					// Update existing config
+					config = await prisma.cashDrawerConfig.update({
+						where: { id: configId },
+						data: configData,
+						include: {
+							store: {
+								select: { id: true, name: true },
+							},
+						},
+					});
+				} else {
+					// Create new config
+					config = await prisma.cashDrawerConfig.create({
+						data: configData,
+						include: {
+							store: {
+								select: { id: true, name: true },
+							},
+						},
+					});
+				}
+
+				return json({
+					success: true,
+					message: configId && configId !== "new" ? "Configuration updated successfully" : "Configuration created successfully",
+					config,
+				});
+			}
+
+			case "deleteConfig": {
+				const configId = d.configId;
+
+				await prisma.cashDrawerConfig.delete({
+					where: { id: configId },
+				});
+
+				return json({
+					success: true,
+					message: "Configuration deleted successfully",
+				});
+			}
+
+			case "testDrawer": {
+				const testConfig = {
+					method: d.method || "auto",
+					printerIP: d.printerIP,
+					serialPort: d.serialPort,
+					baudRate: parseInt(d.baudRate),
+					testMode: d.testMode === "on",
+				};
+
+				const result = await testCashDrawer(testConfig);
+
+				return json({
+					testResult: result,
+					message: result.success ? "Cash drawer test successful" : "Cash drawer test failed",
+				});
+			}
+
+			default:
+				return json({ error: "Invalid intent" }, { status: 400 });
+		}
+	} catch (error) {
+		console.error("Cash drawer config error:", error);
+		return json(
+			{
+				error: "Failed to process request",
+				details: error.message,
+			},
+			{ status: 500 }
+		);
+	}
+}
+ */
+// Actual test function that tries to open the cash drawer
+async function testCashDrawer(config) {
+	if (config.testMode) {
+		return { success: true, message: "Test mode - drawer simulation successful" };
+	}
+
+	try {
+		// Validate configuration
+		if (config.method === "network" && !config.printerIP) {
+			return { error: "Printer IP address is required for network method" };
+		}
+
+		if (config.method === "serial" && !config.serialPort) {
+			return { error: "Serial port is required for serial method" };
+		}
+
+		// ESC/POS command to open cash drawer (standard command)
+		const openDrawerCommand = config.customCommand || "\x1B\x70\x00\x19\x19";
+
+		if (config.method === "network") {
+			// Try to send command to network printer
+			const response = await fetch(`http://${config.printerIP}/cgi-bin/direct_print`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/octet-stream",
+				},
+				body: openDrawerCommand,
+			}).catch(() => null);
+
+			if (response && response.ok) {
+				return { success: true, message: "Network cash drawer opened successfully" };
+			} else {
+				return { error: "Failed to connect to network printer. Check IP address and network connection." };
+			}
+		}
+
+		if (config.method === "serial") {
+			// For web applications, we can't directly access serial ports
+			// This would require a local service or electron app
+			return { error: "Serial port access requires a desktop application or local service" };
+		}
+
+		if (config.method === "desktop") {
+			// Try to communicate with desktop application
+			try {
+				const response = await fetch("http://localhost:8080/open-drawer", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(config),
+				});
+
+				if (response.ok) {
+					return { success: true, message: "Desktop app opened cash drawer successfully" };
+				} else {
+					return { error: "Desktop application not responding. Make sure the POS desktop app is running." };
+				}
+			} catch (e) {
+				return { error: "Could not connect to desktop application on localhost:8080" };
+			}
+		}
+
+		// Auto-detect method
+		if (config.method === "auto") {
+			// Try desktop app first
+			try {
+				const response = await fetch("http://localhost:8080/open-drawer", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(config),
+				});
+
+				if (response.ok) {
+					return { success: true, message: "Auto-detected: Desktop app opened cash drawer successfully" };
+				}
+			} catch (e) {
+				// Desktop app failed, try network if IP provided
+				if (config.printerIP) {
+					const response = await fetch(`http://${config.printerIP}/cgi-bin/direct_print`, {
+						method: "POST",
+						headers: { "Content-Type": "application/octet-stream" },
+						body: openDrawerCommand,
+					}).catch(() => null);
+
+					if (response && response.ok) {
+						return { success: true, message: "Auto-detected: Network cash drawer opened successfully" };
+					}
+				}
+			}
+
+			return { error: "Auto-detect failed: No available connection methods found" };
+		}
+
+		return { error: "Unsupported connection method" };
+	} catch (error) {
+		return { error: `Test failed: ${error.message}` };
+	}
+}
+
+export default function CashDrawerAdminPage() {
+	//const { configs, stores, users, user } = useLoaderData();
+	const configs = []
+	const stores = []
+	const users = []
+	const actionData = useActionData();
+	const fetcher = useFetcher();
+
+	const [selectedConfig, setSelectedConfig] = useState(null);
+	const [isCreating, setIsCreating] = useState(false);
+	const [showConfigList, setShowConfigList] = useState(true);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [detectionStatus, setDetectionStatus] = useState({
+		success: false,
+		message: "",
+		config: null,
+		needsUserSelection: false,
+		detectedDevices: [],
+	});
+	// Form state
+	const [formData, setFormData] = useState({
+		name: "",
+		method: "auto",
+		printerIP: "",
+		storeId: "",
+		userId: "",
+		// Network Raw
+		networkHost: "",
+		networkPort: 9100,
+		apiEndpoint: "",
+		// HTTP API
+		apiUrl: "",
+		// Serial
+		serialPort: "COM1",
+		baudRate: 9600,
+		// USB HID
+		usbVendorId: "",
+		usbProductId: "",
+		usbUsagePage: "",
+		// Parallel
+		parallelPort: "LPT1",
+		// Bluetooth
+		bluetoothAddress: "",
+		serviceUUID: "",
+		// Printer Passthrough
+		printerName: "",
+		drawerPin: 0,
+		// Windows Driver
+		driverPath: "",
+		// Desktop App
+		appPath: "",
+		appArgs: "",
+		// Custom Script
+		scriptPath: "",
+		// Cloud
+		cloudApiKey: "",
+		cloudUrl: "",
+		// Advanced
+		autoOpenOnChange: true,
+		testMode: false,
+		customCommand: "",
+		pulseDuration: 100,
+		pulsePin: 0,
+	});
+
+	const handleConfigSelect = (config) => {
+		if (config === "create") {
+			setIsCreating(true);
+			setSelectedConfig(null);
+			setFormData({
+				// Basic info
+				name: "",
+				method: "auto",
+				storeId: "",
+				userId: "",
+
+				// Network settings
+				networkHost: "",
+				networkPort: 9100,
+				apiEndpoint: "",
+				apiUrl: "",
+				printerIP: "",
+
+				// USB settings
+				usbVendorId: "",
+				usbProductId: "",
+				usbUsagePage: "",
+
+				// Serial/Parallel settings
+				serialPort: "COM1",
+				baudRate: 9600,
+				parallelPort: "",
+
+				// Bluetooth settings
+				bluetoothAddress: "",
+				serviceUUID: "",
+
+				// Printer passthrough
+				printerName: "",
+				drawerPin: "",
+
+				// Driver/App/Script
+				driverPath: "",
+				appPath: "",
+				appArgs: "",
+				scriptPath: "",
+
+				// Cloud settings
+				cloudApiKey: "",
+				cloudUrl: "",
+
+				// Advanced settings
+				pulseDuration: 100,
+				pulsePin: 0,
+				customCommand: "",
+				autoOpenOnChange: true,
+				testMode: false,
+			});
+		} else {
+			setIsCreating(false);
+			setSelectedConfig(config);
+			setFormData({
+				// Basic info
+				name: config.name || "",
+				method: config.method || "auto",
+				storeId: config.storeId || "",
+				userId: config.userId || "",
+
+				// Network settings
+				networkHost: config.networkHost || "",
+				networkPort: config.networkPort || 9100,
+				apiEndpoint: config.apiEndpoint || "",
+				apiUrl: config.apiUrl || "",
+				printerIP: config.printerIP || "",
+
+				// USB settings
+				usbVendorId: config.usbVendorId || "",
+				usbProductId: config.usbProductId || "",
+				usbUsagePage: config.usbUsagePage || "",
+
+				// Serial/Parallel settings
+				serialPort: config.serialPort || "COM1",
+				baudRate: config.baudRate || 9600,
+				parallelPort: config.parallelPort || "",
+
+				// Bluetooth settings
+				bluetoothAddress: config.bluetoothAddress || "",
+				serviceUUID: config.serviceUUID || "",
+
+				// Printer passthrough
+				printerName: config.printerName || "",
+				drawerPin: config.drawerPin || "",
+
+				// Driver/App/Script
+				driverPath: config.driverPath || "",
+				appPath: config.appPath || "",
+				appArgs: config.appArgs || "",
+				scriptPath: config.scriptPath || "",
+
+				// Cloud settings
+				cloudApiKey: config.cloudApiKey || "",
+				cloudUrl: config.cloudUrl || "",
+
+				// Advanced settings
+				pulseDuration: config.pulseDuration || 100,
+				pulsePin: config.pulsePin || 0,
+				customCommand: config.customCommand || "",
+				autoOpenOnChange: config.autoOpenOnChange !== false,
+				testMode: config.testMode || false,
+			});
+		}
+		setShowConfigList(false);
+	};
+
+	const handleFormChange = (key, value) => {
+		setFormData((prev) => ({ ...prev, [key]: value }));
+	};
+
+	const handleSave = () => {
+		const formDataObj = new FormData();
+		formDataObj.append("intent", "saveConfig");
+		formDataObj.append("configId", isCreating ? "new" : selectedConfig?.id);
+
+		Object.entries(formData).forEach(([key, value]) => {
+			if (typeof value === "boolean") {
+				if (value) formDataObj.append(key, "on");
+			} else if (value !== null && value !== "") {
+				formDataObj.append(key, value.toString());
+			}
+		});
+
+		fetcher.submit(formDataObj, { method: "post" });
+	};
+
+	const handleTest = () => {
+		const formDataObj = new FormData();
+		formDataObj.append("intent", "testDrawer");
+
+		Object.entries(formData).forEach(([key, value]) => {
+			if (typeof value === "boolean") {
+				if (value) formDataObj.append(key, "on");
+			} else if (value !== null && value !== "") {
+				formDataObj.append(key, value.toString());
+			}
+		});
+
+		fetcher.submit(formDataObj, { method: "post" });
+	};
+
+	const handleDelete = () => {
+		if (!selectedConfig) return;
+
+		const formDataObj = new FormData();
+		formDataObj.append("intent", "deleteConfig");
+		formDataObj.append("configId", selectedConfig.id);
+
+		fetcher.submit(formDataObj, { method: "post" });
+		setShowConfigList(true);
+		setSelectedConfig(null);
+	};
+
+	const filteredConfigs = configs.filter((config) => config.name?.toLowerCase().includes(searchTerm.toLowerCase()) || config.store?.name?.toLowerCase().includes(searchTerm.toLowerCase()));
+
+	const testResult = fetcher.data?.testResult || actionData?.testResult;
+	const saveSuccess = fetcher.data?.success || actionData?.success;
+	const isLoading = fetcher.state === "submitting";
+
+	const handleWizardResult = (detectedConfig) => {
+		// Update the form with the detected configuration
+		setFormData((prev) => ({
+			...prev,
+			...detectedConfig,
+			method: detectedConfig.method, // Ensure method is set
+		}));
+
+		// Show success message
+		setDetectionStatus({
+			success: true,
+			message: `Detected: ${detectedConfig.method} configuration`,
+			config: detectedConfig,
+			needsUserSelection: false,
+			detectedDevices: [],
+		});
+
+		// Auto-switch to the detected method tab
+		setActiveTab("configuration");
+	};
+
+	const handleWizardError = (error) => {
+		setDetectionStatus({
+			success: false,
+			message: `Detection failed: ${error.message}`,
+			config: null,
+			needsUserSelection: false,
+			detectedDevices: [],
+		});
+	};
+	const handleDeviceSelect = (device) => {
+		const baseConfig = {
+			method: device.method,
+			pulseDuration: 100,
+		};
+
+		const methodConfigs = {
+			printerPassthrough: {
+				printerName: device.name,
+				drawerPin: 0,
+			},
+			serial: {
+				serialPort: device.name,
+				baudRate: 9600,
+			},
+			usbHid: {
+				usbVendorId: device.vendorId,
+				usbProductId: device.productId,
+				usbUsagePage: "0xFF00",
+			},
+		};
+
+		setFormData((prev) => ({
+			...prev,
+			...baseConfig,
+			...methodConfigs[device.method],
+		}));
+
+		setDetectionStatus((prev) => ({
+			...prev,
+			needsUserSelection: false,
+		}));
+	};
+	const testDetectedConfig = async () => {
+		try {
+			const service = new CashDrawerService(formData);
+			await service.openDrawer();
+			alert("✅ Cash drawer opened successfully! Configuration is working.");
+		} catch (error) {
+			alert(`❌ Test failed: ${error.message}`);
+		}
+	};
+	const runDetectionWizard = async () => {
+		try {
+			setDetectionStatus({
+				success: false,
+				message: "Scanning for devices...",
+				config: null,
+				needsUserSelection: false,
+				detectedDevices: [],
+			});
+
+			// Simulate device detection (replace with actual hardware scanning)
+			const detectedDevices = await detectCashDrawerDevices();
+
+			if (detectedDevices.length === 0) {
+				setDetectionStatus({
+					success: false,
+					message: "No cash drawer devices found. Please check connections.",
+					config: null,
+					needsUserSelection: false,
+					detectedDevices: [],
+				});
+				return;
+			}
+
+			if (detectedDevices.length === 1) {
+				// Auto-select the only detected device
+				handleDeviceSelect(detectedDevices[0]);
+				setDetectionStatus({
+					success: true,
+					message: `Automatically configured ${detectedDevices[0].type} device`,
+					config: detectedDevices[0],
+					needsUserSelection: false,
+					detectedDevices: [],
+				});
+			} else {
+				// Multiple devices found - let user choose
+				setDetectionStatus({
+					success: false,
+					message: "Multiple devices detected. Please select one:",
+					config: null,
+					needsUserSelection: true,
+					detectedDevices: detectedDevices,
+				});
+			}
+		} catch (error) {
+			setDetectionStatus({
+				success: false,
+				message: `Detection failed: ${error.message}`,
+				config: null,
+				needsUserSelection: false,
+				detectedDevices: [],
+			});
+		}
+	};
+
+	// Mock device detection function - replace with actual hardware scanning
+	const detectCashDrawerDevices = async () => {
+		// This is a mock implementation - replace with actual hardware detection
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				// Simulate finding some devices
+				const devices = [
+					{
+						id: 1,
+						name: "COM3",
+						type: "Serial Cash Drawer",
+						method: "serial",
+						vendorId: "",
+						productId: "",
+					},
+					{
+						id: 2,
+						name: "EPSON TM-T88V",
+						type: "Printer with Drawer",
+						method: "printerPassthrough",
+						vendorId: "",
+						productId: "",
+					},
+				];
+				resolve(devices);
+			}, 2000); // Simulate 2 second scan
+		});
+	};
+
+	return (
+		<div className=" p-6">
+			<div className="max-w-7xl mx-auto">
+				{/* Header */}
+				<div className="flex justify-between gap-2 mb-8">
+					<div className="flex items-center gap-3">
+						<div className="flex size-10 items-center justify-center">
+							<Settings className="size-5 text-primary" />
+						</div>
+						<div>
+							<h1 className="text-2xl font-bold text-foreground">Cash Drawer Configuration</h1>
+							<p className="text-foreground">Configure how your POS system opens cash drawers</p>
+						</div>
+					</div>
+					<div>
+						<HoverCard>
+							<HoverCardTrigger asChild>
+								<Button variant="ghost" size="icon">
+									<QuestionMarkCircledIcon />
+								</Button>
+							</HoverCardTrigger>
+							<HoverCardContent className="w-[500px]">
+								<div className="flex justify-between gap-4">
+									
+									<div className="bg-gray-800 border border-gray-600 rounded-lg p-4 space-y-4">
+										<h3 className="font-medium text-foreground">Setup Help</h3>
+										<div className="space-y-3 text-sm">
+											<div>
+												<h4 className="font-medium text-blue-400">Getting Started</h4>
+												<p className="text-gray-300">1. Give your configuration a descriptive name</p>
+												<p className="text-gray-300">2. Select which store/user this applies to</p>
+												<p className="text-gray-300">3. Choose your connection method</p>
+												<p className="text-gray-300">4. Configure connection settings</p>
+												<p className="text-gray-300">5. Test the connection</p>
+												<p className="text-gray-300">6. Save configuration</p>
+											</div>
+
+											<div className="pt-3 border-t border-gray-600">
+												<h4 className="font-medium text-blue-400 mb-2">Connection Methods</h4>
+												<ul className="text-gray-300 space-y-1">
+													<li>
+														• <strong>Auto-detect:</strong> Tries desktop app first, then network
+													</li>
+													<li>
+														• <strong>Desktop App:</strong> Requires POS desktop app running on localhost:8080
+													</li>
+													<li>
+														• <strong>Network:</strong> Direct connection to network printer
+													</li>
+													<li>
+														• <strong>Serial:</strong> Requires desktop app for serial port access
+													</li>
+													<li>
+														• <strong>USB:</strong> Direct USB connection (requires desktop app)
+													</li>
+												</ul>
+											</div>
+
+											<div className="pt-3 border-t border-gray-600">
+												<h4 className="font-medium text-blue-400 mb-2">Troubleshooting</h4>
+												<ul className="text-gray-300 space-y-1">
+													<li>• Check all cable connections</li>
+													<li>• Ensure printer drivers are installed</li>
+													<li>• For network: verify IP address and network connectivity</li>
+													<li>• For desktop methods: ensure POS desktop app is running</li>
+													<li>• Use test mode to simulate without hardware</li>
+												</ul>
+											</div>
+										</div>
+									</div>
+								</div>
+							</HoverCardContent>
+						</HoverCard>
+					</div>
+				</div>
+
+				{/* Success/Error Messages */}
+				{(actionData?.error || fetcher.data?.error) && (
+					<div className="rounded-lg border border-red-500/40 bg-red-900/20 p-4 mb-6">
+						<div className="flex items-center gap-2">
+							<XCircle className="h-5 w-5 text-red-400" />
+							<span className="font-medium text-red-300">Error</span>
+						</div>
+						<p className="text-sm text-red-200 mt-1">{actionData?.error || fetcher.data?.error}</p>
+					</div>
+				)}
+
+				{saveSuccess && (
+					<div className="rounded-lg border border-green-500/40 bg-green-900/20 p-4 mb-6">
+						<div className="flex items-center gap-2">
+							<CheckCircle className="h-5 w-5 text-green-500" />
+							<span className="font-medium text-green-500">Success</span>
+						</div>
+						<p className="text-sm text-green-200 mt-1">{actionData?.message || fetcher.data?.message}</p>
+					</div>
+				)}
+
+				<div className="grid lg:grid-cols-4 gap-6">
+					{/* Configuration Sidebar */}
+					<div className="lg:col-span-1">
+						<div className="bg-gray-800 border border-gray-600 rounded-lg p-4">
+							{showConfigList ? (
+								<>
+									<h3 className="text-foreground font-semibold mb-4">Cash Drawer Configs</h3>
+									<Command className="border border-gray-600 bg-gray-900">
+										<CommandInput placeholder="Search configs..." className="bg-gray-900 text-foreground border-gray-600" />
+										<CommandList>
+											<CommandEmpty>No configurations found.</CommandEmpty>
+											<CommandGroup>
+												<CommandItem onSelect={() => handleConfigSelect("create")} className="hover:bg-gray-700 cursor-pointer">
+													<div className="flex items-center gap-2">
+														<Plus className="w-4 h-4 text-green-400" />
+														<span className="text-foreground font-medium">Create New Config</span>
+													</div>
+												</CommandItem>
+												{configs.map((config) => (
+													<CommandItem key={config.id} onSelect={() => handleConfigSelect(config)} className="hover:bg-gray-700 cursor-pointer">
+														<div className="flex justify-between items-start w-full">
+															<div>
+																<h4 className="font-semibold text-foreground">{config.name}</h4>
+																<p className="text-sm text-foreground">{config.store?.name || "All Stores"}</p>
+																<p className="text-sm text-foreground">Method: {config.method}</p>
+															</div>
+															<div className="text-right">
+																<span className={`text-xs px-2 py-1 rounded ${config.testMode ? "bg-yellow-900 text-yellow-200" : "bg-green-900 text-green-200"}`}>{config.testMode ? "Test" : "Live"}</span>
+															</div>
+														</div>
+													</CommandItem>
+												))}
+											</CommandGroup>
+										</CommandList>
+									</Command>
+								</>
+							) : (
+								<div className="space-y-4">
+									<div className="flex items-center justify-between">
+										<h3 className="text-foreground font-semibold">{isCreating ? "Create Config" : "Edit Config"}</h3>
+										<Button
+											variant="ghost"
+											size="sm"
+											onClick={() => {
+												setShowConfigList(true);
+												setSelectedConfig(null);
+												setIsCreating(false);
+											}}
+											className="text-foreground hover:text-foreground hover:bg-gray-700"
+										>
+											<X className="w-4 h-4" />
+										</Button>
+									</div>
+
+									<div className="space-y-3">
+										<div>
+											<Label className="text-foreground">Configuration Name</Label>
+											<Input value={formData.name} onChange={(e) => handleFormChange("name", e.target.value)} placeholder="Main Cash Drawer" className="bg-gray-900 border-gray-600 text-foreground" />
+										</div>
+
+										<div>
+											<Label className="text-foreground">Assign to Store</Label>
+											<Select value={formData.storeId} onValueChange={(value) => handleFormChange("storeId", value)}>
+												<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+													<SelectValue placeholder="Select store (optional)" />
+												</SelectTrigger>
+												<SelectContent className="bg-gray-900 border-gray-600">
+													{stores.map((store) => (
+														<SelectItem key={store.id} value={store.id} className="text-foreground hover:bg-gray-800">
+															{store.name}
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+										</div>
+
+										<div>
+											<Label className="text-foreground">Assign to User</Label>
+											<Select value={formData.userId} onValueChange={(value) => handleFormChange("userId", value)}>
+												<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+													<SelectValue placeholder="Select user (optional)" />
+												</SelectTrigger>
+												<SelectContent className="bg-gray-900 border-gray-600">
+													{users.map((user) => (
+														<SelectItem key={user.id} value={user.id} className="text-foreground hover:bg-gray-800">
+															{user.username} ({user.email})
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+										</div>
+
+										{!isCreating && (
+											<Button onClick={handleDelete} variant="outline" size="sm" className="w-full border-red-600 text-red-400 hover:bg-red-900/20" disabled={isLoading}>
+												<Trash2 className="w-4 h-4 mr-2" />
+												Delete Config
+											</Button>
+										)}
+									</div>
+								</div>
+							)}
+						</div>
+					</div>
+
+					{/* Configuration Panel */}
+					<div className="lg:col-span-3">
+						{!showConfigList && (
+							<div className="space-y-6">
+								<div className="bg-gray-800 border border-gray-600 rounded-lg p-6 space-y-6">
+									<h2 className="text-lg font-semibold flex items-center gap-2 text-foreground">
+										<Printer className="h-5 w-5" />
+										Connection Settings
+									</h2>
+
+									{/* Connection Method Selection */}
+									<div className="space-y-3">
+										<label className="text-sm font-medium text-foreground">Connection Method</label>
+										<div className="grid gap-3">
+											{[
+												{ value: "wizard", label: "Detection Wizard", icon: "🔍", desc: "Guided hardware detection" },
+												{ value: "serial", label: "Serial (COM)", icon: "🔌", desc: "RS-232 serial port connection" },
+												{ value: "usbHid", label: "USB HID", icon: "🔗", desc: "USB Human Interface Device" },
+												{ value: "usbSerial", label: "USB-Serial", icon: "🔌", desc: "USB to Serial converter" },
+												{ value: "parallel", label: "Parallel (LPT)", icon: "🔗", desc: "Legacy parallel port" },
+												{ value: "networkRaw", label: "Network Raw", icon: "📡", desc: "Raw TCP/IP network connection" },
+												{ value: "networkHttp", label: "HTTP API", icon: "🌐", desc: "Web service/HTTP API" },
+												{ value: "bluetooth", label: "Bluetooth", icon: "📱", desc: "Bluetooth RFCOMM/SPP" },
+												{ value: "bluetoothLe", label: "Bluetooth LE", icon: "📱", desc: "Bluetooth Low Energy" },
+												{ value: "printerPassthrough", label: "Printer Passthrough", icon: "🖨️", desc: "Through receipt printer pulse" },
+												{ value: "windowsDriver", label: "Windows Driver", icon: "🪟", desc: "Custom Windows driver" },
+												{ value: "desktopApp", label: "Desktop App", icon: "💻", desc: "Desktop application integration" },
+												{ value: "customScript", label: "Custom Script", icon: "⚙️", desc: "Custom script execution" },
+												{ value: "cloud", label: "Cloud Service", icon: "☁️", desc: "Cloud-based drawer service" },
+											].map((method) => (
+												<label
+													key={method.value}
+													className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${formData.method === method.value ? "border-blue-500/40 bg-blue-900/20" : "border-gray-600 hover:bg-gray-700/50"}`}
+												>
+													<input type="radio" name="method" value={method.value} checked={formData.method === method.value} onChange={(e) => handleFormChange("method", e.target.value)} className="mt-1" />
+													<div className="flex-1">
+														<div className="flex items-center gap-2">
+															<span>{method.icon}</span>
+															<span className="font-medium text-foreground">{method.label}</span>
+														</div>
+														<p className="text-sm text-foreground">{method.desc}</p>
+													</div>
+												</label>
+											))}
+										</div>
+									</div>
+
+									{/* Method-specific settings */}
+									{formData.method === "networkRaw" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Raw Network Settings</h4>
+											<div className="grid grid-cols-2 gap-4">
+												<div className="space-y-2">
+													<label className="text-sm font-medium text-foreground">IP Address/Hostname</label>
+													<Input type="text" value={formData.networkHost} onChange={(e) => handleFormChange("networkHost", e.target.value)} placeholder="192.168.1.100" className="bg-gray-900 border-gray-600 text-foreground" />
+												</div>
+												<div className="space-y-2">
+													<label className="text-sm font-medium text-foreground">Port</label>
+													<Input type="number" value={formData.networkPort} onChange={(e) => handleFormChange("networkPort", e.target.value)} placeholder="9100" className="bg-gray-900 border-gray-600 text-foreground" />
+												</div>
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Protocol</label>
+												<Select value={formData.networkProtocol} onValueChange={(value) => handleFormChange("networkProtocol", value)}>
+													<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+														<SelectValue />
+													</SelectTrigger>
+													<SelectContent className="bg-gray-900 border-gray-600">
+														<SelectItem value="tcp" className="text-foreground">
+															TCP
+														</SelectItem>
+														<SelectItem value="udp" className="text-foreground">
+															UDP
+														</SelectItem>
+													</SelectContent>
+												</Select>
+											</div>
+										</div>
+									)}
+
+									{/* HTTP API Settings */}
+									{formData.method === "networkHttp" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">HTTP API Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">API URL</label>
+												<Input type="text" value={formData.apiUrl} onChange={(e) => handleFormChange("apiUrl", e.target.value)} placeholder="https://api.example.com/cash-drawer/open" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+											<div className="grid grid-cols-2 gap-4">
+												<div className="space-y-2">
+													<label className="text-sm font-medium text-foreground">HTTP Method</label>
+													<Select value={formData.httpMethod} onValueChange={(value) => handleFormChange("httpMethod", value)}>
+														<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+															<SelectValue />
+														</SelectTrigger>
+														<SelectContent className="bg-gray-900 border-gray-600">
+															<SelectItem value="POST" className="text-foreground">
+																POST
+															</SelectItem>
+															<SelectItem value="GET" className="text-foreground">
+																GET
+															</SelectItem>
+															<SelectItem value="PUT" className="text-foreground">
+																PUT
+															</SelectItem>
+														</SelectContent>
+													</Select>
+												</div>
+												<div className="space-y-2">
+													<label className="text-sm font-medium text-foreground">Timeout (ms)</label>
+													<Input type="number" value={formData.httpTimeout} onChange={(e) => handleFormChange("httpTimeout", parseInt(e.target.value))} placeholder="5000" className="bg-gray-900 border-gray-600 text-foreground" />
+												</div>
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Request Body (JSON)</label>
+												<textarea
+													value={formData.httpBody}
+													onChange={(e) => handleFormChange("httpBody", e.target.value)}
+													placeholder='{"action": "open", "duration": 100}'
+													className="w-full h-20 bg-gray-900 border border-gray-600 rounded-md px-3 py-2 text-foreground text-sm font-mono"
+												/>
+											</div>
+										</div>
+									)}
+									{formData.method === "wizard" && (
+										<div className="p-4 bg-blue-900/20 rounded-lg">
+											<button onClick={runDetectionWizard} className="bg-blue-600 text-foreground px-4 py-2 rounded">
+												Start Hardware Detection
+											</button>
+											<p className="text-sm text-foreground mt-2">This will scan for connected cash drawers and printers.</p>
+										</div>
+									)}
+									{detectionStatus?.config?.needsUserSelection && (
+										<div className="p-4 bg-gray-700 rounded-lg">
+											<h4 className="font-semibold text-foreground mb-3">Multiple devices detected:</h4>
+											<div className="space-y-2">
+												{detectionStatus.config.detectedDevices.map((device, index) => (
+													<button key={index} onClick={() => handleDeviceSelect(device)} className="w-full p-3 text-left bg-gray-600 hover:bg-muted0 rounded border border-gray-500">
+														<div className="font-medium text-foreground">
+															{device.type.toUpperCase()}: {device.name}
+														</div>
+														<div className="text-sm text-gray-300">Method: {device.method}</div>
+													</button>
+												))}
+											</div>
+										</div>
+									)}
+
+									{detectionStatus?.success && !detectionStatus.config.needsUserSelection && (
+										<div className="p-3 bg-green-900/30 border border-green-600 rounded-lg">
+											<div className="flex items-center gap-2 text-green-300">
+												<CheckCircle className="h-5 w-5" />
+												<span>Configuration detected and applied!</span>
+											</div>
+											<div className="text-sm text-green-400 mt-1">
+												Method: {formData.method} • {formData.printerName || formData.serialPort || ""}
+											</div>
+											<button onClick={() => testDetectedConfig()} className="mt-2 px-3 py-1 bg-green-600 text-foreground text-sm rounded">
+												Test Configuration
+											</button>
+										</div>
+									)}
+									{/* Serial Settings */}
+									{(formData.method === "serial" || formData.method === "usbSerial") && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Serial Settings</h4>
+											<div className="grid grid-cols-2 gap-4">
+												<div className="space-y-2">
+													<label className="text-sm font-medium text-foreground">Serial Port</label>
+													<Select value={formData.serialPort} onValueChange={(value) => handleFormChange("serialPort", value)}>
+														<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+															<SelectValue />
+														</SelectTrigger>
+														<SelectContent className="bg-gray-900 border-gray-600">
+															{["COM1", "COM2", "COM3", "COM4", "COM5", "COM6", "COM7", "COM8", "COM9", "COM10"].map((port) => (
+																<SelectItem key={port} value={port} className="text-foreground">
+																	{port}
+																</SelectItem>
+															))}
+														</SelectContent>
+													</Select>
+												</div>
+												<div className="space-y-2">
+													<label className="text-sm font-medium text-foreground">Baud Rate</label>
+													<Select value={formData.baudRate?.toString()} onValueChange={(value) => handleFormChange("baudRate", parseInt(value))}>
+														<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+															<SelectValue />
+														</SelectTrigger>
+														<SelectContent className="bg-gray-900 border-gray-600">
+															{[9600, 19200, 38400, 57600, 115200].map((rate) => (
+																<SelectItem key={rate} value={rate.toString()} className="text-foreground">
+																	{rate}
+																</SelectItem>
+															))}
+														</SelectContent>
+													</Select>
+												</div>
+											</div>
+										</div>
+									)}
+									{/* USB HID Settings */}
+									{formData.method === "usbHid" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">USB HID Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Vendor ID</label>
+												<Input type="text" value={formData.usbVendorId} onChange={(e) => handleFormChange("usbVendorId", e.target.value)} placeholder="0x1234" className="bg-gray-900 border-gray-600 text-foreground font-mono" />
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Product ID</label>
+												<Input type="text" value={formData.usbProductId} onChange={(e) => handleFormChange("usbProductId", e.target.value)} placeholder="0x5678" className="bg-gray-900 border-gray-600 text-foreground font-mono" />
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Usage Page</label>
+												<Input type="text" value={formData.usbUsagePage} onChange={(e) => handleFormChange("usbUsagePage", e.target.value)} placeholder="0xFF00" className="bg-gray-900 border-gray-600 text-foreground font-mono" />
+											</div>
+										</div>
+									)}
+									{/* Parallel Settings */}
+									{formData.method === "parallel" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Parallel Port Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">LPT Port</label>
+												<Select value={formData.parallelPort} onValueChange={(value) => handleFormChange("parallelPort", value)}>
+													<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+														<SelectValue />
+													</SelectTrigger>
+													<SelectContent className="bg-gray-900 border-gray-600">
+														{["LPT1", "LPT2", "LPT3"].map((port) => (
+															<SelectItem key={port} value={port} className="text-foreground">
+																{port}
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+											</div>
+										</div>
+									)}
+									{/* Printer Passthrough Settings */}
+									{formData.method === "printerPassthrough" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Printer Passthrough Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Printer Name</label>
+												<Input type="text" value={formData.printerName} onChange={(e) => handleFormChange("printerName", e.target.value)} placeholder="Receipt Printer" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Drawer Pin</label>
+												<Select value={formData.drawerPin?.toString()} onValueChange={(value) => handleFormChange("drawerPin", parseInt(value))}>
+													<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+														<SelectValue />
+													</SelectTrigger>
+													<SelectContent className="bg-gray-900 border-gray-600">
+														{[0, 1, 2].map((pin) => (
+															<SelectItem key={pin} value={pin.toString()} className="text-foreground">
+																Pin {pin}
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+											</div>
+										</div>
+									)}
+									{/* Bluetooth Settings */}
+									{(formData.method === "bluetooth" || formData.method === "bluetoothLe") && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Bluetooth Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Device MAC Address</label>
+												<Input type="text" value={formData.bluetoothAddress} onChange={(e) => handleFormChange("bluetoothAddress", e.target.value)} placeholder="00:1A:7D:DA:71:13" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Service UUID (BLE only)</label>
+												<Input
+													type="text"
+													value={formData.serviceUUID}
+													onChange={(e) => handleFormChange("serviceUUID", e.target.value)}
+													placeholder="0000ffe0-0000-1000-8000-00805f9b34fb"
+													className="bg-gray-900 border-gray-600 text-foreground"
+													disabled={formData.method !== "bluetoothLe"}
+												/>
+											</div>
+										</div>
+									)}
+									{/* Windows Driver Settings */}
+									{formData.method === "windowsDriver" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Windows Driver Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Driver Name/Path</label>
+												<Input type="text" value={formData.driverPath} onChange={(e) => handleFormChange("driverPath", e.target.value)} placeholder="CashDrawerDriver.dll or system path" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+										</div>
+									)}
+									{/* OPOS Settings */}
+									{formData.method === "opos" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">OPOS Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">OPOS Device Name</label>
+												<Input type="text" value={formData.oposDeviceName} onChange={(e) => handleFormChange("oposDeviceName", e.target.value)} placeholder="CashDrawer1" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+										</div>
+									)}
+									{/* Desktop App Settings */}
+									{formData.method === "desktopApp" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Desktop App Integration</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Application Path</label>
+												<Input type="text" value={formData.appPath} onChange={(e) => handleFormChange("appPath", e.target.value)} placeholder="C:\\Program Files\\CashDrawerApp\\app.exe" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Command Line Arguments</label>
+												<Input type="text" value={formData.appArgs} onChange={(e) => handleFormChange("appArgs", e.target.value)} placeholder="--open --duration=100" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+										</div>
+									)}
+									{/* Custom Script Settings */}
+									{formData.method === "customScript" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Custom Script Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Script Path/Command</label>
+												<Input type="text" value={formData.scriptPath} onChange={(e) => handleFormChange("scriptPath", e.target.value)} placeholder="/path/to/script.sh or command" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+										</div>
+									)}
+
+									{/* Cloud Service Settings */}
+									{formData.method === "cloud" && (
+										<div className="space-y-4 p-4 bg-gray-700/30 rounded-lg">
+											<h4 className="font-medium text-foreground">Cloud Service Settings</h4>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">API Key</label>
+												<Input type="password" value={formData.cloudApiKey} onChange={(e) => handleFormChange("cloudApiKey", e.target.value)} placeholder="Your API key" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Service URL</label>
+												<Input type="text" value={formData.cloudUrl} onChange={(e) => handleFormChange("cloudUrl", e.target.value)} placeholder="https://api.example.com" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+										</div>
+									)}
+
+									{/* Advanced Settings */}
+									<div className="space-y-4 pt-4 border-t border-gray-600">
+										<h3 className="font-medium text-foreground">Advanced Settings</h3>
+
+										<label className="flex items-center justify-between">
+											<div>
+												<span className="text-sm font-medium text-foreground">Auto-open on change due</span>
+												<p className="text-xs text-foreground">Automatically open drawer when customer needs change</p>
+											</div>
+											<input type="checkbox" checked={formData.autoOpenOnChange} onChange={(e) => handleFormChange("autoOpenOnChange", e.target.checked)} className="rounded" />
+										</label>
+
+										<div className="space-y-2">
+											<label className="text-sm font-medium text-foreground">Custom ESC/POS Command</label>
+											<Input
+												type="text"
+												value={formData.customCommand}
+												onChange={(e) => handleFormChange("customCommand", e.target.value)}
+												placeholder="\\x1B\\x70\\x00\\x19\\x19"
+												className="bg-gray-900 border-gray-600 text-foreground font-mono text-sm"
+											/>
+											<p className="text-xs text-foreground">Leave blank to use default command. Format: hex bytes or ASCII</p>
+										</div>
+
+										{/* Pulse Duration Settings */}
+										<div className="grid grid-cols-2 gap-4">
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Pulse Duration (ms)</label>
+												<Input type="number" value={formData.pulseDuration} onChange={(e) => handleFormChange("pulseDuration", parseInt(e.target.value))} placeholder="100" className="bg-gray-900 border-gray-600 text-foreground" />
+											</div>
+											<div className="space-y-2">
+												<label className="text-sm font-medium text-foreground">Pulse Pin</label>
+												<Select value={formData.pulsePin?.toString()} onValueChange={(value) => handleFormChange("pulsePin", parseInt(value))}>
+													<SelectTrigger className="bg-gray-900 border-gray-600 text-foreground">
+														<SelectValue />
+													</SelectTrigger>
+													<SelectContent className="bg-gray-900 border-gray-600">
+														{[0, 1, 2].map((pin) => (
+															<SelectItem key={pin} value={pin.toString()} className="text-foreground">
+																Pin {pin}
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								{/* Action Buttons */}
+								<div className="flex gap-3">
+									<Button onClick={handleTest} disabled={isLoading} variant="outline" className="flex-1 border-gray-600 text-gray-300 hover:bg-gray-700">
+										{isLoading && fetcher.formData?.get("intent") === "testDrawer" ? (
+											<>
+												<div className="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full mr-2" />
+												Testing...
+											</>
+										) : (
+											<>
+												<Zap className="h-4 w-4 mr-2" />
+												Test Drawer
+											</>
+										)}
+									</Button>
+
+									<Button onClick={handleSave} disabled={isLoading || !formData.name} className="flex-1 bg-blue-600 hover:bg-blue-700">
+										{isLoading && fetcher.formData?.get("intent") === "saveConfig" ? (
+											<>
+												<div className="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full mr-2" />
+												Saving...
+											</>
+										) : saveSuccess ? (
+											<>
+												<CheckCircle className="h-4 w-4 mr-2" />
+												Saved!
+											</>
+										) : (
+											<>
+												<Save className="h-4 w-4 mr-2" />
+												Save Configuration
+											</>
+										)}
+									</Button>
+								</div>
+
+								{!formData.name && <p className="text-sm text-foreground text-center">Configuration name is required</p>}
+
+								{/* Test Results */}
+								{testResult && (
+									<div className={`rounded-lg border p-4 ${testResult.success ? "border-green-600 bg-green-900/20" : "border-red-600 bg-red-900/20"}`}>
+										<div className="flex items-center gap-2 mb-2">
+											{testResult.success ? <CheckCircle className="h-5 w-5 text-green-400" /> : <XCircle className="h-5 w-5 text-red-400" />}
+											<span className="font-medium text-foreground">{testResult.success ? "Test Successful" : "Test Failed"}</span>
+										</div>
+										<p className="text-sm text-gray-300">{testResult.error || testResult.message || "Cash drawer test completed"}</p>
+									</div>
+								)}
+
+								{/* Current Configuration Summary */}
+								<div className="bg-gray-800 border border-gray-600 rounded-lg p-4 space-y-3">
+									<h3 className="font-medium flex items-center gap-2 text-foreground">
+										<AlertCircle className="h-4 w-4" />
+										Configuration Summary
+									</h3>
+									<div className="text-sm space-y-2">
+										<div className="flex justify-between">
+											<span className="text-foreground">Name:</span>
+											<span className="font-medium text-foreground">{formData.name || "Not set"}</span>
+										</div>
+										<div className="flex justify-between">
+											<span className="text-foreground">Store:</span>
+											<span className="font-medium text-foreground">{formData.storeId ? stores.find((s) => s.id === formData.storeId)?.name : "All Stores"}</span>
+										</div>
+										<div className="flex justify-between">
+											<span className="text-foreground">User:</span>
+											<span className="font-medium text-foreground">{formData.userId ? users.find((u) => u.id === formData.userId)?.username + " "  : "All Users"}</span>
+										</div>
+										<div className="flex justify-between">
+											<span className="text-foreground">Method:</span>
+											<span className="font-medium text-foreground capitalize">{formData.method}</span>
+										</div>
+										{formData.method === "network" && (
+											<div className="flex justify-between">
+												<span className="text-foreground">Printer IP:</span>
+												<span className="font-medium text-foreground">{formData.printerIP || "Not set"}</span>
+											</div>
+										)}
+										{formData.method === "serial" && (
+											<>
+												<div className="flex justify-between">
+													<span className="text-foreground">Port:</span>
+													<span className="font-medium text-foreground">{formData.serialPort}</span>
+												</div>
+												<div className="flex justify-between">
+													<span className="text-foreground">Baud Rate:</span>
+													<span className="font-medium text-foreground">{formData.baudRate}</span>
+												</div>
+											</>
+										)}
+										<div className="flex justify-between">
+											<span className="text-foreground">Auto-open:</span>
+											<span className="font-medium text-foreground">{formData.autoOpenOnChange ? "Enabled" : "Disabled"}</span>
+										</div>
+										<div className="flex justify-between">
+											<span className="text-foreground">Test Mode:</span>
+											<span className="font-medium text-foreground">{formData.testMode ? "Enabled" : "Disabled"}</span>
+										</div>
+									</div>
+								</div>
+
+								{/* Help Section */}
+							</div>
+						)}
+
+						{/* No Configuration Selected State */}
+						{showConfigList && (
+							<div className="bg-gray-800 border border-gray-600 rounded-lg p-8">
+								<div className="text-center">
+									<h3 className="text-lg font-medium text-foreground mb-2">Select a Configuration</h3>
+									<p className="text-foreground mb-6">Choose an existing configuration to edit, or create a new one to get started.</p>
+									<Button variant="outline" size="sm" onClick={() => handleConfigSelect("create")} className="">
+										<Plus className="h-4 w-4 mr-2" />
+										Create Your First Configuration
+									</Button>
+								</div>
+
+								{configs.length > 0 && (
+									<div className="mt-8 pt-8 border-t border-gray-600">
+										<h4 className="text-foreground font-medium mb-4">Recent Configurations</h4>
+										<div className="space-y-3">
+											{configs.slice(0, 3).map((config) => (
+												<div key={config.id} onClick={() => handleConfigSelect(config)} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition-colors">
+													<div>
+														<div className="text-foreground font-medium">{config.name}</div>
+														<div className="text-sm text-foreground">
+															{config.store?.name || "All Stores"} • {config.method}
+														</div>
+													</div>
+													<Edit3 className="h-4 w-4 text-foreground" />
+												</div>
+											))}
+										</div>
+									</div>
+								)}
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}