Mobile POS

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { View, Text, TouchableOpacity, StyleSheet } from "https://esm.sh/react-native-web@0.19.9"; // TypeScript Interfaces for Type Safety interface Product { id: number; name: string; price: number; stock: number; } interface CartItem extends Product { quantity: number; } // Sample product data with type annotation const initialProducts: Product[] = [ { id: 1, name: "Coffee", price: 3.50, stock: 100 }, { id: 2, name: "Espresso", price: 2.75, stock: 50 }, { id: 3, name: "Pastry", price: 4.00, stock: 30 }, { id: 4, name: "Sandwich", price: 7.50, stock: 20 } ]; function PosApp() { const [products, setProducts] = useState(initialProducts); const [cart, setCart] = useState([]); const [total, setTotal] = useState(0); const addToCart = (product: Product): void => { if (product.stock > 0) { const existingItem = cart.find(item => item.id === product.id); if (existingItem) { setCart(cart.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item )); } else { setCart([...cart, { ...product, quantity: 1 }]); } setTotal(prevTotal => +(prevTotal + product.price).toFixed(2)); // Reduce stock setProducts(products.map(p => p.id === product.id ? { ...p, stock: p.stock - 1 } : p )); } }; const removeFromCart = (productId: number): void => { const itemToRemove = cart.find(item => item.id === productId); if (itemToRemove) { setCart(cart.filter(item => item.id !== productId)); setTotal(prevTotal => +(prevTotal - (itemToRemove.price * itemToRemove.quantity)).toFixed(2)); // Restore stock setProducts(products.map(p => p.id === productId ? { ...p, stock: p.stock + itemToRemove.quantity } : p )); } }; const checkout = (): void => { alert(`Total: $${total.toFixed(2)} - Transaction Complete!`); setCart([]); setTotal(0); }; return ( 📱 Mobile POS Products {products.map(product => ( addToCart(product)} disabled={product.stock === 0} > {product.name} - ${product.price.toFixed(2)} Stock: {product.stock} ))} Cart {cart.map(item => ( {item.name} x {item.quantity} removeFromCart(item.id)}> 🗑️ ))} Total: ${total.toFixed(2)} Checkout View Source ); } function client() { const root = document.getElementById("root"); if (root) { import("https://esm.sh/react-dom@18.2.0/client").then(({ createRoot }) => { createRoot(root).render(); }); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Mobile POS

`, { headers: { "content-type": "text/html" } }); } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5', }, title: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', marginBottom: 20, }, productSection: { marginBottom: 20, }, cartSection: { borderTopWidth: 1, borderTopColor: '#ddd', paddingTop: 10, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, }, productItem: { backgroundColor: 'white', padding: 15, marginBottom: 10, borderRadius: 5, flexDirection: 'row', justifyContent: 'space-between', }, stockText: { color: 'gray', }, cartItem: { flexDirection: 'row', justifyContent: 'space-between', padding: 10, backgroundColor: 'white', marginBottom: 5, borderRadius: 5, }, removeButton: { color: 'red', }, totalText: { fontSize: 18, fontWeight: 'bold', textAlign: 'right', marginTop: 10, }, checkoutButton: { backgroundColor: 'green', padding: 15, borderRadius: 5, marginTop: 10, }, checkoutButtonText: { color: 'white', textAlign: 'center', fontWeight: 'bold', }, sourceLink: { marginTop: 20, textAlign: 'center', } });

thankfulBlackDragon