\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;",[],[253,260,267],{"_103":275,"_95":276,"_144":277,"_146":261,"_147":133,"_148":278,"_150":151,"_105":279,"_100":31,"_153":173,"_155":280,"_156":27,"_157":-5,"_158":281,"_98":282},"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;",[],[253,260,276],{"_103":284,"_95":285,"_144":286,"_146":261,"_147":133,"_148":287,"_150":151,"_105":288,"_100":31,"_153":173,"_155":289,"_156":27,"_157":-5,"_158":290,"_98":291},"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;",[],[253,260,285],{"_103":293,"_95":294,"_144":295,"_146":261,"_147":133,"_148":296,"_150":151,"_105":297,"_100":31,"_153":173,"_155":298,"_156":27,"_157":-5,"_158":299,"_98":300},"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;",[],[253,260,294],{"_103":302,"_95":303,"_144":304,"_146":261,"_147":133,"_148":305,"_150":151,"_105":306,"_100":31,"_153":173,"_155":307,"_156":27,"_157":-5,"_158":308,"_98":309},"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;",[],[253,260,303],{"_103":311,"_95":312,"_144":313,"_146":261,"_147":133,"_148":262,"_150":151,"_105":314,"_100":31,"_153":173,"_155":315,"_156":27,"_157":-5,"_158":316,"_98":317},"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;",[],[253,260,312],{"_103":319,"_95":320,"_144":321,"_146":261,"_147":133,"_148":322,"_150":151,"_105":323,"_100":31,"_153":173,"_155":324,"_156":27,"_157":-5,"_158":325,"_98":326},"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;",[],[253,260,320],{"_103":328,"_95":329,"_144":330,"_146":261,"_147":133,"_148":331,"_150":151,"_105":332,"_100":31,"_153":173,"_155":333,"_156":27,"_157":-5,"_158":334,"_98":335},"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;",[],[253,260,329],{"_103":337,"_95":338,"_144":339,"_146":261,"_147":133,"_148":340,"_150":151,"_105":341,"_100":31,"_153":173,"_155":342,"_156":27,"_157":-5,"_158":343,"_98":344},"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;",[],[253,260,338],{"_103":346,"_95":347,"_144":348,"_146":261,"_147":133,"_148":349,"_150":151,"_105":350,"_100":31,"_153":173,"_155":351,"_156":27,"_157":-5,"_158":352,"_98":353},"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;",[],[253,260,347],{"_103":355,"_95":356,"_144":357,"_146":261,"_147":133,"_148":358,"_150":151,"_105":359,"_100":31,"_153":173,"_155":360,"_156":27,"_157":-5,"_158":361,"_98":362},"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;",[],[253,260,356],{"_103":364,"_95":365,"_144":366,"_146":261,"_147":133,"_148":367,"_150":151,"_105":368,"_100":31,"_153":173,"_155":369,"_156":27,"_157":-5,"_158":370,"_98":371},"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;",[],[253,260,365],[253,260],{"_103":374,"_95":375,"_144":376,"_146":254,"_147":133,"_148":377,"_150":151,"_105":378,"_100":31,"_153":379,"_155":380,"_156":27,"_157":-5,"_158":381,"_98":382},"75df1454-358e-11f0-88a3-9e149126039e","favicon.svg","75df1526-358e-11f0-88a3-9e149126039e",12,["D",1747754642757],"file","\n",[],[253,375],{"_103":384,"_95":385,"_144":386,"_146":254,"_147":133,"_148":255,"_150":151,"_105":387,"_100":31,"_153":379,"_155":388,"_156":27,"_157":-5,"_158":389,"_98":390},"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",[],[253,385],{"_103":392,"_95":393,"_144":394,"_146":254,"_147":133,"_148":395,"_150":151,"_105":396,"_100":31,"_153":173,"_155":397,"_156":27,"_157":-5,"_158":398,"_98":399},"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();",[],[253,393],{"_103":401,"_95":402,"_144":403,"_146":254,"_147":133,"_148":404,"_150":151,"_105":405,"_100":31,"_153":379,"_155":406,"_156":27,"_157":-5,"_158":407,"_98":408},"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}",[],[253,402],[253],{"_103":411,"_95":412,"_144":413,"_146":-5,"_147":133,"_148":245,"_150":151,"_105":414,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":415,"_98":424},"06a2aeca-358e-11f0-80bf-9e149126039e","shared","b32166be-5c6b-4454-a0f4-92c383c4d325",["D",1747754456134],[416],{"_103":417,"_95":418,"_144":419,"_146":413,"_147":133,"_148":245,"_150":151,"_105":420,"_100":31,"_153":173,"_155":421,"_156":27,"_157":-5,"_158":422,"_98":423},"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}",[],[412,418],[412],{"_103":426,"_95":427,"_144":428,"_146":-5,"_147":133,"_148":172,"_150":151,"_105":429,"_100":31,"_153":379,"_155":430,"_156":27,"_157":-5,"_158":431,"_98":432},"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",[],[427],{"_103":434,"_95":435,"_144":436,"_146":-5,"_147":133,"_148":437,"_150":151,"_105":438,"_100":149,"_153":439,"_155":68,"_156":27,"_157":-5,"_158":440,"_98":441},"0df329e6-3590-11f0-b0c0-9e149126039e","new-file-1946.tsx","e868aade-358f-11f0-8134-9e149126039e",33,["D",1747755327399],"interval",[],[435],{"_103":443,"_95":444,"_144":445,"_146":-5,"_147":133,"_148":132,"_150":151,"_105":446,"_100":31,"_153":173,"_155":68,"_156":27,"_157":-5,"_158":447,"_98":448},"4acd0bca-3590-11f0-98f0-9e149126039e","new-file-9191.tsx","4acd0c74-3590-11f0-98f0-9e149126039e",["D",1747755429495],[],[444],"files",[141,160,166,177,187,194,202,211,220,229,239,251,258,265,274,283,292,301,310,318,327,336,345,354,363,373,383,391,400,410,416,425,433,442],"counts",{"_453":31,"_454":172,"_455":31,"_456":31},"pulls","branches","forks","envVars","contents",[],{"_103":328,"_95":329,"_144":330,"_146":261,"_147":133,"_148":331,"_150":151,"_105":460,"_100":31,"_153":173,"_155":333,"_156":27,"_157":-5,"_98":461},["D",1747754848254],[253,260,329],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":41,"_100":-7,"_98":99,"_101":467,"_139":471,"_449":574,"_379":575,"_457":577,"_462":-5,"_578":27,"_579":-5},{"_103":104,"_95":96,"_105":468,"_107":-5,"_108":27,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":27,"_116":-5,"_117":31,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":27,"_21":469,"_130":470},["D",1747754319784],{"_93":94,"_128":129},{"_100":132,"_95":41,"_103":133,"_134":104,"_135":-5,"_136":-5,"_137":-5,"_138":-5},[472,505,559,565,568,571],{"_103":142,"_95":143,"_144":145,"_146":-5,"_147":133,"_148":149,"_150":151,"_105":152,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":473,"_98":504},[474,483,501],{"_103":161,"_95":162,"_144":163,"_146":145,"_147":133,"_148":149,"_150":151,"_105":164,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":475,"_98":482},[476,479],{"_103":167,"_95":168,"_144":169,"_146":163,"_147":133,"_148":170,"_150":151,"_105":171,"_100":172,"_153":173,"_155":174,"_156":27,"_157":-5,"_158":477,"_98":478},[],[143,162,168],{"_103":178,"_95":179,"_144":180,"_146":163,"_147":133,"_148":181,"_150":151,"_105":182,"_100":31,"_153":173,"_155":183,"_156":27,"_157":-5,"_158":480,"_98":481},[],[143,162,179],[143,162],{"_103":188,"_95":189,"_144":190,"_146":145,"_147":133,"_148":191,"_150":151,"_105":192,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":484,"_98":500},[485,488,491,494,497],{"_103":195,"_95":196,"_144":197,"_146":190,"_147":133,"_148":191,"_150":151,"_105":198,"_100":31,"_153":173,"_155":199,"_156":27,"_157":-5,"_158":486,"_98":487},[],[143,189,196],{"_103":203,"_95":204,"_144":205,"_146":190,"_147":133,"_148":206,"_150":151,"_105":207,"_100":31,"_153":173,"_155":208,"_156":27,"_157":-5,"_158":489,"_98":490},[],[143,189,204],{"_103":212,"_95":213,"_144":214,"_146":190,"_147":133,"_148":215,"_150":151,"_105":216,"_100":31,"_153":173,"_155":217,"_156":27,"_157":-5,"_158":492,"_98":493},[],[143,189,213],{"_103":221,"_95":222,"_144":223,"_146":190,"_147":133,"_148":224,"_150":151,"_105":225,"_100":31,"_153":173,"_155":226,"_156":27,"_157":-5,"_158":495,"_98":496},[],[143,189,222],{"_103":230,"_95":231,"_144":232,"_146":190,"_147":133,"_148":233,"_150":151,"_105":234,"_100":31,"_153":173,"_155":235,"_156":27,"_157":-5,"_158":498,"_98":499},[],[143,189,231],[143,189],{"_103":240,"_95":241,"_144":242,"_146":145,"_147":133,"_148":243,"_150":151,"_105":244,"_100":245,"_153":246,"_155":247,"_156":27,"_157":-5,"_158":502,"_98":503},[],[143,241],[143],{"_103":252,"_95":253,"_144":254,"_146":-5,"_147":133,"_148":255,"_150":151,"_105":256,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":506,"_98":558},[507,546,549,552,555],{"_103":259,"_95":260,"_144":261,"_146":254,"_147":133,"_148":262,"_150":151,"_105":263,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":508,"_98":545},[509,512,515,518,521,524,527,530,533,536,539,542],{"_103":266,"_95":267,"_144":268,"_146":261,"_147":133,"_148":269,"_150":151,"_105":270,"_100":31,"_153":173,"_155":271,"_156":27,"_157":-5,"_158":510,"_98":511},[],[253,260,267],{"_103":275,"_95":276,"_144":277,"_146":261,"_147":133,"_148":278,"_150":151,"_105":279,"_100":31,"_153":173,"_155":280,"_156":27,"_157":-5,"_158":513,"_98":514},[],[253,260,276],{"_103":284,"_95":285,"_144":286,"_146":261,"_147":133,"_148":287,"_150":151,"_105":288,"_100":31,"_153":173,"_155":289,"_156":27,"_157":-5,"_158":516,"_98":517},[],[253,260,285],{"_103":293,"_95":294,"_144":295,"_146":261,"_147":133,"_148":296,"_150":151,"_105":297,"_100":31,"_153":173,"_155":298,"_156":27,"_157":-5,"_158":519,"_98":520},[],[253,260,294],{"_103":302,"_95":303,"_144":304,"_146":261,"_147":133,"_148":305,"_150":151,"_105":306,"_100":31,"_153":173,"_155":307,"_156":27,"_157":-5,"_158":522,"_98":523},[],[253,260,303],{"_103":311,"_95":312,"_144":313,"_146":261,"_147":133,"_148":262,"_150":151,"_105":314,"_100":31,"_153":173,"_155":315,"_156":27,"_157":-5,"_158":525,"_98":526},[],[253,260,312],{"_103":319,"_95":320,"_144":321,"_146":261,"_147":133,"_148":322,"_150":151,"_105":323,"_100":31,"_153":173,"_155":324,"_156":27,"_157":-5,"_158":528,"_98":529},[],[253,260,320],{"_103":328,"_95":329,"_144":330,"_146":261,"_147":133,"_148":331,"_150":151,"_105":332,"_100":31,"_153":173,"_155":333,"_156":27,"_157":-5,"_158":531,"_98":532},[],[253,260,329],{"_103":337,"_95":338,"_144":339,"_146":261,"_147":133,"_148":340,"_150":151,"_105":341,"_100":31,"_153":173,"_155":342,"_156":27,"_157":-5,"_158":534,"_98":535},[],[253,260,338],{"_103":346,"_95":347,"_144":348,"_146":261,"_147":133,"_148":349,"_150":151,"_105":350,"_100":31,"_153":173,"_155":351,"_156":27,"_157":-5,"_158":537,"_98":538},[],[253,260,347],{"_103":355,"_95":356,"_144":357,"_146":261,"_147":133,"_148":358,"_150":151,"_105":359,"_100":31,"_153":173,"_155":360,"_156":27,"_157":-5,"_158":540,"_98":541},[],[253,260,356],{"_103":364,"_95":365,"_144":366,"_146":261,"_147":133,"_148":367,"_150":151,"_105":368,"_100":31,"_153":173,"_155":369,"_156":27,"_157":-5,"_158":543,"_98":544},[],[253,260,365],[253,260],{"_103":374,"_95":375,"_144":376,"_146":254,"_147":133,"_148":377,"_150":151,"_105":378,"_100":31,"_153":379,"_155":380,"_156":27,"_157":-5,"_158":547,"_98":548},[],[253,375],{"_103":384,"_95":385,"_144":386,"_146":254,"_147":133,"_148":255,"_150":151,"_105":387,"_100":31,"_153":379,"_155":388,"_156":27,"_157":-5,"_158":550,"_98":551},[],[253,385],{"_103":392,"_95":393,"_144":394,"_146":254,"_147":133,"_148":395,"_150":151,"_105":396,"_100":31,"_153":173,"_155":397,"_156":27,"_157":-5,"_158":553,"_98":554},[],[253,393],{"_103":401,"_95":402,"_144":403,"_146":254,"_147":133,"_148":404,"_150":151,"_105":405,"_100":31,"_153":379,"_155":406,"_156":27,"_157":-5,"_158":556,"_98":557},[],[253,402],[253],{"_103":411,"_95":412,"_144":413,"_146":-5,"_147":133,"_148":245,"_150":151,"_105":414,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":560,"_98":564},[561],{"_103":417,"_95":418,"_144":419,"_146":413,"_147":133,"_148":245,"_150":151,"_105":420,"_100":31,"_153":173,"_155":421,"_156":27,"_157":-5,"_158":562,"_98":563},[],[412,418],[412],{"_103":426,"_95":427,"_144":428,"_146":-5,"_147":133,"_148":172,"_150":151,"_105":429,"_100":31,"_153":379,"_155":430,"_156":27,"_157":-5,"_158":566,"_98":567},[],[427],{"_103":434,"_95":435,"_144":436,"_146":-5,"_147":133,"_148":437,"_150":151,"_105":438,"_100":149,"_153":439,"_155":68,"_156":27,"_157":-5,"_158":569,"_98":570},[],[435],{"_103":443,"_95":444,"_144":445,"_146":-5,"_147":133,"_148":132,"_150":151,"_105":446,"_100":31,"_153":173,"_155":68,"_156":27,"_157":-5,"_158":572,"_98":573},[],[444],[472,474,476,479,483,485,488,491,494,497,501,505,507,509,512,515,518,521,524,527,530,533,536,539,542,546,549,552,555,559,561,565,568,571],{"_103":328,"_95":329,"_144":330,"_146":261,"_147":133,"_148":331,"_150":151,"_105":460,"_100":31,"_153":173,"_155":333,"_156":27,"_157":-5,"_98":576},[253,260,329],[],"showCompareCallout","pull","routes/_app","actionData","errors"]