\n \n

\n );\n }\n\n if (!token || !user) {\n return (\n

\n \n

\n );\n }\n\n // Render the appropriate page based on the current hash\n const renderPage = () => {\n switch (currentPage) {\n case \"dashboard\":\n return ;\n case \"pos\":\n return ;\n case \"products\":\n return ;\n case \"sales\":\n return ;\n case \"users\":\n return user.role === \"admin\" ? : ;\n default:\n return ;\n }\n };\n\n return (\n \n {renderPage()}\n \n );\n};\n\nexport default App;",[],[262,269,276],{"_104":284,"_95":285,"_153":286,"_155":270,"_156":138,"_157":287,"_159":160,"_106":288,"_100":32,"_162":182,"_164":289,"_165":22,"_166":-5,"_167":290,"_98":291},"861bd85c-358e-11f0-93f2-9e149126039e","Button.tsx","861bd9a6-358e-11f0-93f2-9e149126039e",15,["D",1747754670004],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport LoadingSpinner from \"./LoadingSpinner.tsx\";\n\ninterface ButtonProps {\n children: React.ReactNode;\n onClick?: () => void;\n type?: \"button\" | \"submit\" | \"reset\";\n variant?: \"primary\" | \"secondary\" | \"danger\" | \"success\" | \"outline\";\n size?: \"sm\" | \"md\" | \"lg\";\n fullWidth?: boolean;\n disabled?: boolean;\n loading?: boolean;\n icon?: React.ReactNode;\n}\n\nconst Button: React.FC = ({\n children,\n onClick,\n type = \"button\",\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n disabled = false,\n loading = false,\n icon\n}) => {\n const baseClasses = \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2\";\n \n const variantClasses = {\n primary: \"bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500\",\n secondary: \"bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500\",\n danger: \"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500\",\n success: \"bg-green-600 text-white hover:bg-green-700 focus:ring-green-500\",\n outline: \"bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500\"\n };\n \n const sizeClasses = {\n sm: \"text-sm px-3 py-1.5\",\n md: \"text-base px-4 py-2\",\n lg: \"text-lg px-6 py-3\"\n };\n \n const classes = [\n baseClasses,\n variantClasses[variant],\n sizeClasses[size],\n fullWidth ? \"w-full\" : \"\",\n (disabled || loading) ? \"opacity-60 cursor-not-allowed\" : \"cursor-pointer\"\n ].join(\" \");\n\n return (\n \n {loading ? (\n <>\n \n {children}\n \n ) : (\n <>\n {icon && {icon}}\n {children}\n \n )}\n \n );\n};\n\nexport default Button;",[],[262,269,285],{"_104":293,"_95":294,"_153":295,"_155":270,"_156":138,"_157":296,"_159":160,"_106":297,"_100":32,"_162":182,"_164":298,"_165":22,"_166":-5,"_167":299,"_98":300},"be7a99fe-358e-11f0-ad9e-9e149126039e","Dashboard.tsx","be7a9ac6-358e-11f0-ad9e-9e149126039e",20,["D",1747754764576],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DashboardStats } from \"../../shared/types.ts\";\nimport LoadingSpinner from \"./LoadingSpinner.tsx\";\n\ninterface DashboardProps {\n token: string;\n}\n\nconst Dashboard: React.FC = ({ token }) => {\n const [stats, setStats] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchStats = async () => {\n try {\n const response = await fetch(\"/api/dashboard/stats\", {\n headers: {\n \"Authorization\": `Bearer ${token}`\n }\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch dashboard data\");\n }\n\n const data = await response.json();\n if (data.success) {\n setStats(data.data);\n } else {\n throw new Error(data.error || \"Unknown error\");\n }\n } catch (err) {\n console.error(\"Dashboard error:\", err);\n setError(err.message || \"Failed to load dashboard\");\n } finally {\n setLoading(false);\n }\n };\n\n fetchStats();\n }, [token]);\n\n if (loading) {\n return (\n

\n \n

\n );\n }\n\n if (error) {\n return (\n

\n {error}\n

\n );\n }\n\n if (!stats) {\n return

No data available

;\n }\n\n return (\n

Dashboard

\n \n

\n {/* Total Sales Card */}\n

\n \n

\n Total Sales\n: \n
\n {stats.totalSales}\n
\n

\n\n {/* Total Revenue Card */}\n

\n \n

\n Total Revenue\n: \n
\n ${stats.totalRevenue.toFixed(2)}\n
\n

\n\n {/* Low Stock Items Card */}\n

\n \n

\n Low Stock Items\n: \n
\n {stats.lowStockItems}\n
\n

\n\n {/* Top Products */}\n

Top Products

\n
\n
\n
\n {product.name}\n
\n
\n
\n {product.quantity} sold\n
\n
\n
\n
\n
No sales data available

\n );\n};\n\nexport default Dashboard;",[],[262,269,294],{"_104":302,"_95":303,"_153":304,"_155":270,"_156":138,"_157":305,"_159":160,"_106":306,"_100":32,"_162":182,"_164":307,"_165":22,"_166":-5,"_167":308,"_98":309},"8cb2791e-358e-11f0-a215-9e149126039e","Input.tsx","8cb279c8-358e-11f0-a215-9e149126039e",16,["D",1747754681055],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface InputProps {\n id: string;\n label?: string;\n type?: string;\n placeholder?: string;\n value: string | number;\n onChange: (e: React.ChangeEvent) => void;\n error?: string;\n required?: boolean;\n disabled?: boolean;\n min?: number;\n max?: number;\n step?: number;\n className?: string;\n}\n\nconst Input: React.FC = ({\n id,\n label,\n type = \"text\",\n placeholder,\n value,\n onChange,\n error,\n required = false,\n disabled = false,\n min,\n max,\n step,\n className = \"\"\n}) => {\n return (\n

\n {label && (\n \n {label}\n {required && *}\n \n )}\n \n {error &&

{error}

}\n

\n );\n};\n\nexport default Input;",[],[262,269,303],{"_104":311,"_95":312,"_153":313,"_155":270,"_156":138,"_157":314,"_159":160,"_106":315,"_100":32,"_162":182,"_164":316,"_165":22,"_166":-5,"_167":317,"_98":318},"9de7142e-358e-11f0-b4ea-9e149126039e","Layout.tsx","9de714e2-358e-11f0-b4ea-9e149126039e",18,["D",1747754709922],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport Sidebar from \"./Sidebar.tsx\";\nimport { User } from \"../../shared/types.ts\";\n\ninterface LayoutProps {\n children: React.ReactNode;\n user: User;\n onLogout: () => void;\n}\n\nconst Layout: React.FC = ({ children, user, onLogout }) => {\n const [sidebarOpen, setSidebarOpen] = useState(false);\n\n return (\n

\n {/* Mobile sidebar */}\n

setSidebarOpen(false)}\n >

\n setSidebarOpen(false)}\n >\n Close sidebar\n \n \n

\n \n

\n\n {/* Static sidebar for desktop */}\n

\n \n

\n\n {/* Main content */}\n

\n setSidebarOpen(true)}\n >\n Open sidebar\n \n \n

\n {children}\n

\n );\n};\n\nexport default Layout;",[],[262,269,312],{"_104":320,"_95":321,"_153":322,"_155":270,"_156":138,"_157":271,"_159":160,"_106":323,"_100":32,"_162":182,"_164":324,"_165":22,"_166":-5,"_167":325,"_98":326},"7f562ac2-358e-11f0-8972-9e149126039e","LoadingSpinner.tsx","7f562ba8-358e-11f0-8972-9e149126039e",["D",1747754658630],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface LoadingSpinnerProps {\n size?: \"sm\" | \"md\" | \"lg\";\n color?: string;\n}\n\nconst LoadingSpinner: React.FC = ({ \n size = \"md\", \n color = \"border-indigo-600\" \n}) => {\n const sizeClasses = {\n sm: \"w-4 h-4 border-2\",\n md: \"w-8 h-8 border-2\",\n lg: \"w-12 h-12 border-4\"\n };\n\n return (\n

\n );\n};\n\nexport default LoadingSpinner;",[],[262,269,321],{"_104":328,"_95":329,"_153":330,"_155":270,"_156":138,"_157":331,"_159":160,"_106":332,"_100":32,"_162":182,"_164":333,"_165":22,"_166":-5,"_167":334,"_98":335},"948c7748-358e-11f0-b4ea-9e149126039e","LoginForm.tsx","948c77fc-358e-11f0-b4ea-9e149126039e",17,["D",1747754694205],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport Input from \"./Input.tsx\";\nimport Button from \"./Button.tsx\";\n\ninterface LoginFormProps {\n onLogin: (username: string, password: string) => Promise;\n error?: string;\n}\n\nconst LoginForm: React.FC = ({ onLogin, error }) => {\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n try {\n await onLogin(username, password);\n } catch (err) {\n console.error(\"Login error:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

POS System

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n );\n};\n\nexport default LoginForm;",[],[262,269,329],{"_104":337,"_95":338,"_153":339,"_155":270,"_156":138,"_157":340,"_159":160,"_106":341,"_100":32,"_162":182,"_164":342,"_165":22,"_166":-5,"_167":343,"_98":344},"f05adc0e-358e-11f0-828c-9e149126039e","PointOfSale.tsx","f05adcd6-358e-11f0-828c-9e149126039e",22,["D",1747754848254],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Product, Sale } from \"../../shared/types.ts\";\nimport Button from \"./Button.tsx\";\nimport Input from \"./Input.tsx\";\nimport ProductList from \"./ProductList.tsx\";\nimport LoadingSpinner from \"./LoadingSpinner.tsx\";\n\ninterface CartItem {\n product: Product;\n quantity: number;\n}\n\ninterface PointOfSaleProps {\n token: string;\n isAdmin: boolean;\n}\n\nconst PointOfSale: React.FC = ({ token, isAdmin }) => {\n const [cart, setCart] = useState([]);\n const [paymentMethod, setPaymentMethod] = useState<'cash' | 'card' | 'other'>('cash');\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [success, setSuccess] = useState(null);\n const [receipt, setReceipt] = useState(null);\n const [barcode, setBarcode] = useState(\"\");\n\n const handleAddToCart = (product: Product) => {\n setCart(prevCart => {\n // Check if product is already in cart\n const existingItem = prevCart.find(item => item.product.id === product.id);\n \n if (existingItem) {\n // Increase quantity if already in cart\n return prevCart.map(item => \n item.product.id === product.id \n ? { ...item, quantity: item.quantity + 1 } \n : item\n );\n } else {\n // Add new item to cart\n return [...prevCart, { product, quantity: 1 }];\n }\n });\n };\n\n const handleUpdateQuantity = (productId: number, newQuantity: number) => {\n if (newQuantity <= 0) {\n // Remove item if quantity is 0 or negative\n setCart(prevCart => prevCart.filter(item => item.product.id !== productId));\n } else {\n // Update quantity\n setCart(prevCart => \n prevCart.map(item => \n item.product.id === productId \n ? { ...item, quantity: newQuantity } \n : item\n )\n );\n }\n };\n\n const handleRemoveItem = (productId: number) => {\n setCart(prevCart => prevCart.filter(item => item.product.id !== productId));\n };\n\n const calculateTotal = () => {\n return cart.reduce((total, item) => total + (item.product.price * item.quantity), 0);\n };\n\n const handleCheckout = async () => {\n if (cart.length === 0) {\n setError(\"Cart is empty\");\n return;\n }\n\n try {\n setLoading(true);\n setError(null);\n setSuccess(null);\n \n const saleData = {\n items: cart.map(item => ({\n productId: item.product.id,\n quantity: item.quantity\n })),\n paymentMethod\n };\n \n const response = await fetch(\"/api/sales\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${token}`\n },\n body: JSON.stringify(saleData)\n });\n \n const data = await response.json();\n \n if (data.success) {\n setSuccess(\"Sale completed successfully!\");\n setReceipt(data.data);\n setCart([]);\n } else {\n throw new Error(data.error || \"Failed to process sale\");\n }\n } catch (err) {\n console.error(\"Checkout error:\", err);\n setError(err.message || \"Failed to process sale\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleBarcodeSearch = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!barcode.trim()) return;\n \n try {\n setLoading(true);\n const response = await fetch(\"/api/products\", {\n headers: {\n \"Authorization\": `Bearer ${token}`\n }\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch products\");\n }\n\n const data = await response.json();\n if (data.success) {\n const product = data.data.find((p: Product) => \n p.barcode && p.barcode.toLowerCase() === barcode.toLowerCase()\n );\n \n if (product) {\n handleAddToCart(product);\n setBarcode(\"\");\n } else {\n setError(\"Product not found with this barcode\");\n }\n } else {\n throw new Error(data.error || \"Unknown error\");\n }\n } catch (err) {\n console.error(\"Barcode search error:\", err);\n setError(err.message || \"Failed to search product\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleNewSale = () => {\n setReceipt(null);\n setSuccess(null);\n setError(null);\n };\n\n return (\n

Point of Sale

\n \n {receipt ? (\n

Receipt

\n \n

Sale #{receipt.id}

Date: {new Date(receipt.created_at).toLocaleString()}

Cashier: {receipt.username}

Payment Method: {receipt.payment_method}

\n \n \n \n \n \n \n \n \n \n \n \n {receipt.items.map((item) => (\n \n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n

\n Product\n	\n Qty\n	\n Price\n	\n Total\n
\n {item.product_name}\n	\n {item.quantity}\n	\n ${item.price_per_unit.toFixed(2)}\n	\n ${item.total_price.toFixed(2)}\n
\n Total:\n	\n ${receipt.total_amount.toFixed(2)}\n

\n \n

Thank you for your purchase!

\n ) : (\n

\n {/* Product Selection */}\n

\n \n \n

\n \n {/* Cart */}\n

Current Sale

\n \n {error && (\n

\n {error}\n

\n )}\n \n {success && (\n

\n {success}\n

\n )}\n \n {cart.length === 0 ? (\n

Cart is empty

\n ) : (\n

\n {cart.map((item) => (\n

{item.product.name}

${item.product.price.toFixed(2)} each

\n handleUpdateQuantity(item.product.id, item.quantity - 1)}\n >\n -\n \n {item.quantity}\n handleUpdateQuantity(item.product.id, item.quantity + 1)}\n >\n +\n \n handleRemoveItem(item.product.id)}\n >\n ×\n \n

\n ))}\n

\n )}\n \n

\n Total:\n ${calculateTotal().toFixed(2)}\n

\n \n

\n \n Payment Method\n \n

\n setPaymentMethod('cash')}\n >\n Cash\n \n setPaymentMethod('card')}\n >\n Card\n \n setPaymentMethod('other')}\n >\n Other\n \n

\n \n \n Complete Sale\n \n

\n )}\n

\n );\n};\n\nexport default PointOfSale;",[],[262,269,338],{"_104":346,"_95":347,"_153":348,"_155":270,"_156":138,"_157":349,"_159":160,"_106":350,"_100":32,"_162":182,"_164":351,"_165":22,"_166":-5,"_167":352,"_98":353},"d489c42c-358e-11f0-9acd-9e149126039e","ProductList.tsx","d489c4e0-358e-11f0-9acd-9e149126039e",21,["D",1747754801586],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Product } from \"../../shared/types.ts\";\nimport Button from \"./Button.tsx\";\nimport Input from \"./Input.tsx\";\nimport LoadingSpinner from \"./LoadingSpinner.tsx\";\n\ninterface ProductListProps {\n token: string;\n isAdmin: boolean;\n onSelectProduct?: (product: Product) => void;\n}\n\nconst ProductList: React.FC = ({ token, isAdmin, onSelectProduct }) => {\n const [products, setProducts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [showForm, setShowForm] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [selectedCategory, setSelectedCategory] = useState(\"all\");\n \n // Form state\n const [formData, setFormData] = useState({\n name: \"\",\n price: \"\",\n stock: \"\",\n category: \"\",\n barcode: \"\"\n });\n const [formErrors, setFormErrors] = useState>({});\n const [formLoading, setFormLoading] = useState(false);\n\n const fetchProducts = async () => {\n try {\n setLoading(true);\n const response = await fetch(\"/api/products\", {\n headers: {\n \"Authorization\": `Bearer ${token}`\n }\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch products\");\n }\n\n const data = await response.json();\n if (data.success) {\n setProducts(data.data);\n } else {\n throw new Error(data.error || \"Unknown error\");\n }\n } catch (err) {\n console.error(\"Products error:\", err);\n setError(err.message || \"Failed to load products\");\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchProducts();\n }, [token]);\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n \n // Clear error when user types\n if (formErrors[name]) {\n setFormErrors(prev => {\n const newErrors = { ...prev };\n delete newErrors[name];\n return newErrors;\n });\n }\n };\n\n const validateForm = () => {\n const errors: Record = {};\n \n if (!formData.name.trim()) {\n errors.name = \"Name is required\";\n }\n \n if (!formData.price) {\n errors.price = \"Price is required\";\n } else if (isNaN(parseFloat(formData.price)) || parseFloat(formData.price) < 0) {\n errors.price = \"Price must be a positive number\";\n }\n \n if (formData.stock && (isNaN(parseInt(formData.stock)) || parseInt(formData.stock) < 0)) {\n errors.stock = \"Stock must be a positive number\";\n }\n \n if (!formData.category.trim()) {\n errors.category = \"Category is required\";\n }\n \n setFormErrors(errors);\n return Object.keys(errors).length === 0;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!validateForm()) {\n return;\n }\n \n try {\n setFormLoading(true);\n \n const productData = {\n name: formData.name,\n price: parseFloat(formData.price),\n stock: formData.stock ? parseInt(formData.stock) : 0,\n category: formData.category,\n barcode: formData.barcode || undefined\n };\n \n const response = await fetch(\"/api/products\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${token}`\n },\n body: JSON.stringify(productData)\n });\n \n const data = await response.json();\n \n if (data.success) {\n // Reset form and refresh products\n setFormData({\n name: \"\",\n price: \"\",\n stock: \"\",\n category: \"\",\n barcode: \"\"\n });\n setShowForm(false);\n fetchProducts();\n } else {\n throw new Error(data.error || \"Failed to create product\");\n }\n } catch (err) {\n console.error(\"Create product error:\", err);\n setError(err.message || \"Failed to create product\");\n } finally {\n setFormLoading(false);\n }\n };\n\n // Get unique categories for filter\n const categories = [\"all\", ...new Set(products.map(p => p.category))];\n \n // Filter products based on search and category\n const filteredProducts = products.filter(product => {\n const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase()) || \n product.barcode?.toLowerCase().includes(searchTerm.toLowerCase());\n const matchesCategory = selectedCategory === \"all\" || product.category === selectedCategory;\n return matchesSearch && matchesCategory;\n });\n\n if (loading) {\n return (\n

\n \n

\n );\n }\n\n if (error && !showForm) {\n return (\n

\n {error}\n

\n );\n }\n\n return (\n

Products

\n {isAdmin && (\n \n )}\n

\n\n {showForm && (\n

Add New Product

\n {error && (\n

\n {error}\n

\n )}\n \n

\n )}\n\n

\n setSearchTerm(e.target.value)}\n />\n

\n setSelectedCategory(e.target.value)}\n >\n {categories.map(category => (\n \n ))}\n \n

\n\n {filteredProducts.length === 0 ? (\n

\n No products found\n

\n ) : (\n

onSelectProduct && onSelectProduct(product)}\n >\n
\n
\n
\n
\n {product.name}\n
\n
\n Category: {product.category}\n {product.barcode && ` | Barcode: ${product.barcode}`}\n
\n
\n
\n
\n ${product.price.toFixed(2)}\n
\n
\n Stock: {product.stock}\n
\n
\n
\n
\n

\n )}\n

\n );\n};\n\nexport default ProductList;",[],[262,269,347],{"_104":355,"_95":356,"_153":357,"_155":270,"_156":138,"_157":358,"_159":160,"_106":359,"_100":32,"_162":182,"_164":360,"_165":22,"_166":-5,"_167":361,"_98":362},"0237eb60-358f-11f0-9059-9e149126039e","SalesHistory.tsx","0237ec28-358f-11f0-9059-9e149126039e",23,["D",1747754878224],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Sale } from \"../../shared/types.ts\";\nimport LoadingSpinner from \"./LoadingSpinner.tsx\";\nimport Button from \"./Button.tsx\";\n\ninterface SalesHistoryProps {\n token: string;\n}\n\nconst SalesHistory: React.FC = ({ token }) => {\n const [sales, setSales] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [selectedSale, setSelectedSale] = useState(null);\n\n useEffect(() => {\n const fetchSales = async () => {\n try {\n setLoading(true);\n const response = await fetch(\"/api/sales\", {\n headers: {\n \"Authorization\": `Bearer ${token}`\n }\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch sales history\");\n }\n\n const data = await response.json();\n if (data.success) {\n setSales(data.data);\n } else {\n throw new Error(data.error || \"Unknown error\");\n }\n } catch (err) {\n console.error(\"Sales history error:\", err);\n setError(err.message || \"Failed to load sales history\");\n } finally {\n setLoading(false);\n }\n };\n\n fetchSales();\n }, [token]);\n\n const handleViewSale = (sale: Sale) => {\n setSelectedSale(sale);\n };\n\n const handleBackToList = () => {\n setSelectedSale(null);\n };\n\n if (loading) {\n return (\n

\n \n

\n );\n }\n\n if (error) {\n return (\n

\n {error}\n

\n );\n }\n\n if (selectedSale) {\n return (\n

\n \n ← Back to Sales\n \n

Sale #{selectedSale.id}

\n \n

Date: {new Date(selectedSale.created_at).toLocaleString()}

Cashier: {selectedSale.username}

Payment Method: {selectedSale.payment_method}

Total Amount: ${selectedSale.total_amount.toFixed(2)}

\n \n

Items

\n \n \n \n \n \n \n \n \n \n \n {selectedSale.items.map((item) => (\n \n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n

\n Product\n	\n Qty\n	\n Price\n	\n Total\n
\n {item.product_name}\n	\n {item.quantity}\n	\n ${item.price_per_unit.toFixed(2)}\n	\n ${item.total_price.toFixed(2)}\n
\n Total:\n	\n ${selectedSale.total_amount.toFixed(2)}\n

\n );\n }\n\n return (\n

Sales History

\n \n {sales.length === 0 ? (\n

\n No sales records found\n

\n ) : (\n

\n
\n
\n
\n
\n Sale #{sale.id}\n
\n
\n {new Date(sale.created_at).toLocaleString()}\n
\n
\n Cashier: {sale.username}\n
\n
\n
\n
\n ${sale.total_amount.toFixed(2)}\n
\n
\n {sale.items.length} items\n
\n \n
\n
\n
\n

\n )}\n

\n );\n};\n\nexport default SalesHistory;",[],[262,269,356],{"_104":364,"_95":365,"_153":366,"_155":270,"_156":138,"_157":367,"_159":160,"_106":368,"_100":32,"_162":182,"_164":369,"_165":22,"_166":-5,"_167":370,"_98":371},"aca57834-358e-11f0-bd6d-9e149126039e","Sidebar.tsx","aca57910-358e-11f0-bd6d-9e149126039e",19,["D",1747754734659],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { User } from \"../../shared/types.ts\";\nimport Button from \"./Button.tsx\";\n\ninterface SidebarProps {\n user: User;\n onLogout: () => void;\n mobile: boolean;\n}\n\ninterface NavItem {\n name: string;\n icon: JSX.Element;\n href: string;\n adminOnly?: boolean;\n}\n\nconst Sidebar: React.FC = ({ user, onLogout, mobile }) => {\n const navigation: NavItem[] = [\n {\n name: \"Dashboard\",\n icon: (\n \n ),\n href: \"#dashboard\"\n },\n {\n name: \"Point of Sale\",\n icon: (\n \n ),\n href: \"#pos\"\n },\n {\n name: \"Products\",\n icon: (\n \n ),\n href: \"#products\"\n },\n {\n name: \"Sales History\",\n icon: (\n \n ),\n href: \"#sales\"\n },\n {\n name: \"Users\",\n icon: (\n \n ),\n href: \"#users\",\n adminOnly: true\n }\n ];\n\n return (\n

POS System

\n \n

{user.username}

{user.role}

\n \n

\n );\n};\n\nexport default Sidebar;",[],[262,269,365],{"_104":373,"_95":374,"_153":375,"_155":270,"_156":138,"_157":376,"_159":160,"_106":377,"_100":32,"_162":182,"_164":378,"_165":22,"_166":-5,"_167":379,"_98":380},"0d877c6a-358f-11f0-9a54-9e149126039e","UserManagement.tsx","0d877d5a-358f-11f0-9a54-9e149126039e",24,["D",1747754897200],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport Button from \"./Button.tsx\";\nimport Input from \"./Input.tsx\";\n\ninterface UserManagementProps {\n token: string;\n}\n\nconst UserManagement: React.FC = ({ token }) => {\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [role, setRole] = useState<\"admin\" | \"cashier\">(\"cashier\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [success, setSuccess] = useState(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!username || !password) {\n setError(\"Username and password are required\");\n return;\n }\n \n try {\n setLoading(true);\n setError(null);\n setSuccess(null);\n \n const response = await fetch(\"/api/auth/register\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${token}`\n },\n body: JSON.stringify({\n username,\n password,\n role\n })\n });\n \n const data = await response.json();\n \n if (data.success) {\n setSuccess(`User ${username} created successfully!`);\n setUsername(\"\");\n setPassword(\"\");\n setRole(\"cashier\");\n } else {\n throw new Error(data.error || \"Failed to create user\");\n }\n } catch (err) {\n console.error(\"Create user error:\", err);\n setError(err.message || \"Failed to create user\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

User Management

\n \n

Create New User

\n \n {error && (\n

\n {error}\n

\n )}\n \n {success && (\n

\n {success}\n

\n )}\n \n

\n setUsername(e.target.value)}\n required\n />\n \n setPassword(e.target.value)}\n required\n />\n \n

\n \n Role\n \n

\n \n setRole(\"cashier\")}\n />\n Cashier\n \n \n setRole(\"admin\")}\n />\n Admin\n \n

\n \n

\n \n Create User\n \n

\n \n \n

Role Permissions

Cashier: Can process sales and view products
Admin: Full access to all features including user management, product management, and sales reports

\n );\n};\n\nexport default UserManagement;",[],[262,269,374],[262,269],{"_104":383,"_95":384,"_153":385,"_155":263,"_156":138,"_157":386,"_159":160,"_106":387,"_100":32,"_162":388,"_164":389,"_165":22,"_166":-5,"_167":390,"_98":391},"75df1454-358e-11f0-88a3-9e149126039e","favicon.svg","75df1526-358e-11f0-88a3-9e149126039e",12,["D",1747754642757],"file","\n",[],[262,384],{"_104":393,"_95":394,"_153":395,"_155":263,"_156":138,"_157":264,"_159":160,"_106":396,"_100":32,"_162":388,"_164":397,"_165":22,"_166":-5,"_167":398,"_98":399},"71df0be8-358e-11f0-a082-9e149126039e","index.html","71df0cd8-358e-11f0-a082-9e149126039e",["D",1747754636050],"\n\n\n \n \n POS System\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n \n \n\n",[],[262,394],{"_104":401,"_95":402,"_153":403,"_155":263,"_156":138,"_157":404,"_159":160,"_106":405,"_100":32,"_162":182,"_164":406,"_165":22,"_166":-5,"_167":407,"_98":408},"1e6e3406-358f-11f0-b08a-9e149126039e","index.tsx","1e6e34ba-358f-11f0-b08a-9e149126039e",26,["D",1747754925558],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\n// Add view source link\nconst viewSourceUrl = window.VIEW_SOURCE_URL;\nif (viewSourceUrl) {\n const viewSourceLink = document.createElement(\"a\");\n viewSourceLink.href = viewSourceUrl;\n viewSourceLink.target = \"_top\";\n viewSourceLink.className = \"fixed bottom-2 right-2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-50 hover:opacity-100\";\n viewSourceLink.textContent = \"View Source\";\n document.body.appendChild(viewSourceLink);\n}\n\n// Render the app\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();",[],[262,402],{"_104":410,"_95":411,"_153":412,"_155":263,"_156":138,"_157":413,"_159":160,"_106":414,"_100":32,"_162":388,"_164":415,"_165":22,"_166":-5,"_167":416,"_98":417},"7a269b90-358e-11f0-b777-9e149126039e","style.css","7a269c62-358e-11f0-b777-9e149126039e",13,["D",1747754649942],"/* Custom styles for POS system */\n\n/* Smooth transitions */\n.fade-enter {\n opacity: 0;\n}\n.fade-enter-active {\n opacity: 1;\n transition: opacity 200ms;\n}\n.fade-exit {\n opacity: 1;\n}\n.fade-exit-active {\n opacity: 0;\n transition: opacity 200ms;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .pos-grid {\n grid-template-columns: 1fr;\n }\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n/* Prevent text selection on buttons */\nbutton {\n user-select: none;\n}\n\n/* Loading spinner */\n.spinner {\n border: 3px solid rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n border-top: 3px solid #4F46E5;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}",[],[262,411],[262],{"_104":420,"_95":421,"_153":422,"_155":-5,"_156":138,"_157":254,"_159":160,"_106":423,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":424,"_98":433},"06a2aeca-358e-11f0-80bf-9e149126039e","shared","b32166be-5c6b-4454-a0f4-92c383c4d325",["D",1747754456134],[425],{"_104":426,"_95":427,"_153":428,"_155":422,"_156":138,"_157":254,"_159":160,"_106":429,"_100":32,"_162":182,"_164":430,"_165":22,"_166":-5,"_167":431,"_98":432},"06a28f3a-358e-11f0-80bf-9e149126039e","types.ts","06a2900c-358e-11f0-80bf-9e149126039e",["D",1747754456134],"// Shared types for the POS system\n\nexport interface Product {\n id: number;\n name: string;\n price: number;\n stock: number;\n category: string;\n barcode?: string;\n created_at: string;\n updated_at: string;\n}\n\nexport interface User {\n id: number;\n username: string;\n role: 'admin' | 'cashier';\n created_at: string;\n}\n\nexport interface SaleItem {\n id: number;\n sale_id: number;\n product_id: number;\n product_name: string;\n quantity: number;\n price_per_unit: number;\n total_price: number;\n}\n\nexport interface Sale {\n id: number;\n user_id: number;\n username: string;\n total_amount: number;\n payment_method: 'cash' | 'card' | 'other';\n created_at: string;\n items: SaleItem[];\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}\n\nexport interface DashboardStats {\n totalSales: number;\n totalRevenue: number;\n lowStockItems: number;\n topProducts: {\n name: string;\n quantity: number;\n }[];\n}",[],[421,427],[421],{"_104":435,"_95":436,"_153":437,"_155":-5,"_156":138,"_157":181,"_159":160,"_106":438,"_100":32,"_162":388,"_164":439,"_165":22,"_166":-5,"_167":440,"_98":441},"02c5da8e-358e-11f0-bd19-9e149126039e","README.md","02c5db4c-358e-11f0-bd19-9e149126039e",["D",1747754449658],"# Mobile-Friendly POS System\n\nA point of sale system with inventory management and sales tracking capabilities, optimized for mobile devices.\n\n## Features\n\n- Product inventory management\n- Sales tracking and history\n- User authentication\n- Receipt generation\n- Basic reporting\n- Mobile-friendly interface\n\n## Project Structure\n\n- `/backend` - Server API and database operations\n- `/frontend` - User interface components and pages\n- `/shared` - Shared types and utilities\n\n## Getting Started\n\nAccess the POS system by visiting the HTTP endpoint of this Val.\n\n## Technologies Used\n\n- Backend: Hono (API framework), SQLite (database)\n- Frontend: React, TailwindCSS\n- Shared: TypeScript for type definitions",[],[436],{"_104":443,"_95":99,"_153":444,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":445,"_100":254,"_162":255,"_164":72,"_165":22,"_166":-5,"_167":446,"_98":447},"03f980ac-3590-11f0-b3d4-9e149126039e","e868aade-358f-11f0-8134-9e149126039e",["D",1747755310666],[],[99],"files",[150,169,175,186,196,203,211,220,229,238,248,260,267,274,283,292,301,310,319,327,336,345,354,363,372,382,392,400,409,419,425,434,442],"counts",{"_452":32,"_453":181,"_454":32,"_455":32},"pulls","branches","forks","envVars","contents",[],{"_104":443,"_95":99,"_153":444,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":459,"_100":254,"_162":255,"_164":72,"_165":22,"_166":-5,"_98":460},["D",1747755310666],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":469,"_148":474,"_448":574,"_388":575,"_456":577,"_578":-5,"_579":22,"_580":-5,"_581":-5,"_582":-5,"_583":584},{"_104":105,"_95":96,"_106":470,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":471,"_132":472,"_135":473,"_147":22},["D",1747754319784],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[475,508,562,568,571],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":476,"_98":507},[477,486,504],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":158,"_159":160,"_106":173,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":478,"_98":485},[479,482],{"_104":176,"_95":177,"_153":178,"_155":172,"_156":138,"_157":179,"_159":160,"_106":180,"_100":181,"_162":182,"_164":183,"_165":22,"_166":-5,"_167":480,"_98":481},[],[152,171,177],{"_104":187,"_95":188,"_153":189,"_155":172,"_156":138,"_157":190,"_159":160,"_106":191,"_100":32,"_162":182,"_164":192,"_165":22,"_166":-5,"_167":483,"_98":484},[],[152,171,188],[152,171],{"_104":197,"_95":198,"_153":199,"_155":154,"_156":138,"_157":200,"_159":160,"_106":201,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":487,"_98":503},[488,491,494,497,500],{"_104":204,"_95":205,"_153":206,"_155":199,"_156":138,"_157":200,"_159":160,"_106":207,"_100":32,"_162":182,"_164":208,"_165":22,"_166":-5,"_167":489,"_98":490},[],[152,198,205],{"_104":212,"_95":213,"_153":214,"_155":199,"_156":138,"_157":215,"_159":160,"_106":216,"_100":32,"_162":182,"_164":217,"_165":22,"_166":-5,"_167":492,"_98":493},[],[152,198,213],{"_104":221,"_95":222,"_153":223,"_155":199,"_156":138,"_157":224,"_159":160,"_106":225,"_100":32,"_162":182,"_164":226,"_165":22,"_166":-5,"_167":495,"_98":496},[],[152,198,222],{"_104":230,"_95":231,"_153":232,"_155":199,"_156":138,"_157":233,"_159":160,"_106":234,"_100":32,"_162":182,"_164":235,"_165":22,"_166":-5,"_167":498,"_98":499},[],[152,198,231],{"_104":239,"_95":240,"_153":241,"_155":199,"_156":138,"_157":242,"_159":160,"_106":243,"_100":32,"_162":182,"_164":244,"_165":22,"_166":-5,"_167":501,"_98":502},[],[152,198,240],[152,198],{"_104":249,"_95":250,"_153":251,"_155":154,"_156":138,"_157":252,"_159":160,"_106":253,"_100":254,"_162":255,"_164":256,"_165":22,"_166":-5,"_167":505,"_98":506},[],[152,250],[152],{"_104":261,"_95":262,"_153":263,"_155":-5,"_156":138,"_157":264,"_159":160,"_106":265,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":509,"_98":561},[510,549,552,555,558],{"_104":268,"_95":269,"_153":270,"_155":263,"_156":138,"_157":271,"_159":160,"_106":272,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":511,"_98":548},[512,515,518,521,524,527,530,533,536,539,542,545],{"_104":275,"_95":276,"_153":277,"_155":270,"_156":138,"_157":278,"_159":160,"_106":279,"_100":32,"_162":182,"_164":280,"_165":22,"_166":-5,"_167":513,"_98":514},[],[262,269,276],{"_104":284,"_95":285,"_153":286,"_155":270,"_156":138,"_157":287,"_159":160,"_106":288,"_100":32,"_162":182,"_164":289,"_165":22,"_166":-5,"_167":516,"_98":517},[],[262,269,285],{"_104":293,"_95":294,"_153":295,"_155":270,"_156":138,"_157":296,"_159":160,"_106":297,"_100":32,"_162":182,"_164":298,"_165":22,"_166":-5,"_167":519,"_98":520},[],[262,269,294],{"_104":302,"_95":303,"_153":304,"_155":270,"_156":138,"_157":305,"_159":160,"_106":306,"_100":32,"_162":182,"_164":307,"_165":22,"_166":-5,"_167":522,"_98":523},[],[262,269,303],{"_104":311,"_95":312,"_153":313,"_155":270,"_156":138,"_157":314,"_159":160,"_106":315,"_100":32,"_162":182,"_164":316,"_165":22,"_166":-5,"_167":525,"_98":526},[],[262,269,312],{"_104":320,"_95":321,"_153":322,"_155":270,"_156":138,"_157":271,"_159":160,"_106":323,"_100":32,"_162":182,"_164":324,"_165":22,"_166":-5,"_167":528,"_98":529},[],[262,269,321],{"_104":328,"_95":329,"_153":330,"_155":270,"_156":138,"_157":331,"_159":160,"_106":332,"_100":32,"_162":182,"_164":333,"_165":22,"_166":-5,"_167":531,"_98":532},[],[262,269,329],{"_104":337,"_95":338,"_153":339,"_155":270,"_156":138,"_157":340,"_159":160,"_106":341,"_100":32,"_162":182,"_164":342,"_165":22,"_166":-5,"_167":534,"_98":535},[],[262,269,338],{"_104":346,"_95":347,"_153":348,"_155":270,"_156":138,"_157":349,"_159":160,"_106":350,"_100":32,"_162":182,"_164":351,"_165":22,"_166":-5,"_167":537,"_98":538},[],[262,269,347],{"_104":355,"_95":356,"_153":357,"_155":270,"_156":138,"_157":358,"_159":160,"_106":359,"_100":32,"_162":182,"_164":360,"_165":22,"_166":-5,"_167":540,"_98":541},[],[262,269,356],{"_104":364,"_95":365,"_153":366,"_155":270,"_156":138,"_157":367,"_159":160,"_106":368,"_100":32,"_162":182,"_164":369,"_165":22,"_166":-5,"_167":543,"_98":544},[],[262,269,365],{"_104":373,"_95":374,"_153":375,"_155":270,"_156":138,"_157":376,"_159":160,"_106":377,"_100":32,"_162":182,"_164":378,"_165":22,"_166":-5,"_167":546,"_98":547},[],[262,269,374],[262,269],{"_104":383,"_95":384,"_153":385,"_155":263,"_156":138,"_157":386,"_159":160,"_106":387,"_100":32,"_162":388,"_164":389,"_165":22,"_166":-5,"_167":550,"_98":551},[],[262,384],{"_104":393,"_95":394,"_153":395,"_155":263,"_156":138,"_157":264,"_159":160,"_106":396,"_100":32,"_162":388,"_164":397,"_165":22,"_166":-5,"_167":553,"_98":554},[],[262,394],{"_104":401,"_95":402,"_153":403,"_155":263,"_156":138,"_157":404,"_159":160,"_106":405,"_100":32,"_162":182,"_164":406,"_165":22,"_166":-5,"_167":556,"_98":557},[],[262,402],{"_104":410,"_95":411,"_153":412,"_155":263,"_156":138,"_157":413,"_159":160,"_106":414,"_100":32,"_162":388,"_164":415,"_165":22,"_166":-5,"_167":559,"_98":560},[],[262,411],[262],{"_104":420,"_95":421,"_153":422,"_155":-5,"_156":138,"_157":254,"_159":160,"_106":423,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":563,"_98":567},[564],{"_104":426,"_95":427,"_153":428,"_155":422,"_156":138,"_157":254,"_159":160,"_106":429,"_100":32,"_162":182,"_164":430,"_165":22,"_166":-5,"_167":565,"_98":566},[],[421,427],[421],{"_104":435,"_95":436,"_153":437,"_155":-5,"_156":138,"_157":181,"_159":160,"_106":438,"_100":32,"_162":388,"_164":439,"_165":22,"_166":-5,"_167":569,"_98":570},[],[436],{"_104":443,"_95":99,"_153":444,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":445,"_100":254,"_162":255,"_164":72,"_165":22,"_166":-5,"_167":572,"_98":573},[],[99],[475,477,479,482,486,488,491,494,497,500,504,508,510,512,515,518,521,524,527,530,533,536,539,542,545,549,552,555,558,562,564,568,571],{"_104":443,"_95":99,"_153":444,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":459,"_100":254,"_162":255,"_164":72,"_165":22,"_166":-5,"_98":576},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]