[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_293":294,"_295":296},"routes/_app.x.$handle.$name",{"_105":104,"_38":50,"_114":95,"_33":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_26":-5,"_126":-5,"_127":-5,"_128":31,"_129":130,"_131":64,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":31},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","a2fb862c-03cd-4ef7-9d7e-df8dbd700617","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","01a03bc6-6207-76cc-b747-38367f9b29fe","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n","# 🌹 Perfume POS UAE - Full Stack System\n\nA complete **Point of Sale (POS) system** built for perfume retail in the United Arab Emirates. Full-stack web and mobile-responsive application with inventory management, sales tracking, VAT calculation, and comprehensive reporting.\n\n## ✨ Features\n\n### 🛍️ **Sales & Checkout**\n- Product catalog with search and filtering by category\n- Real-time inventory display (stock levels)\n- Shopping cart management with quantity adjustment\n- Multiple payment methods (Cash, Card, Bank Transfer)\n- Automatic 5% VAT calculation (UAE compliant)\n- Transaction ID generation for every sale\n- Immediate inventory reduction on purchase\n\n### 📦 **Inventory Management**\n- Real-time stock tracking\n- Low stock alerts (items below 20 units)\n- Inventory history and movement logs\n- Stock adjustment interface for receiving/adjustments\n- Categorized product organization\n- Product details: SKU, cost, selling price, description\n\n### 📊 **Reporting & Analytics**\n- Daily sales reports\n- Date range filtering for sales history\n- Transaction summaries with VAT breakdown\n- Inventory status dashboard\n- Sales statistics and trends\n- Revenue tracking by payment method\n\n### 🎨 **UI/UX**\n- **Fully responsive design** - Works on desktop, tablet, and mobile\n- Twind/Tailwind CSS styling\n- Real-time updates\n- Clean, intuitive interface\n- Arabic-ready UI (component structure prepared)\n- Professional typography and spacing\n\n### 🔐 **Data Management**\n- SQLite database for reliable data storage\n- Transactional integrity for sales\n- Complete audit trail via inventory logs\n- Multi-user support structure (ready for expansion)\n- Indexed queries for performance\n\n## 🏗️ Architecture\n\n```\nperfume-pos-uae/\n├── index.ts # Hono HTTP server with API endpoints\n├── db/\n│ └── schema.ts # Database initialization and demo data\n├── frontend/\n│ ├── index.tsx # React app entry point\n│ ├── root.tsx # HTML shell with asset loading\n│ ├── favicon.svg # App icon\n│ └── components/\n│ ├── App.tsx # Main app layout\n│ ├── ProductCatalog.tsx # Product display & search\n│ ├── Cart.tsx # Shopping cart interface\n│ └── Checkout.tsx # Payment processing UI\n└── README.md # Documentation\n```\n\n## 🚀 Getting Started\n\n### Live Demo\nThe app loads with 6 demo perfume products:\n- **Oud Al Amerat** (AED 450)\n- **Rose Oud** (AED 350)\n- **Musk Al Noor** (AED 280)\n- **Attar Al Khaleej** (AED 320)\n- **Agarwood Premium** (AED 550)\n- **Rose Water** (AED 150)\n\nAll products have 100 units in stock initially.\n\n### Quick Start\n1. Visit the live application URL\n2. Browse products by category or search by name/SKU\n3. Add items to cart\n4. Click \"Checkout\" to complete a sale\n5. Choose payment method and confirm\n\n## 📡 API Endpoints\n\n### Products\n```\nGET /api/products # All products with stock\nGET /api/products/:id # Single product details\n```\n\n### Sales\n```\nPOST /api/sales # Create new sale transaction\n Body: { items: [{id, name, price, quantity}], paymentMethod }\n```\n\n### Inventory\n```\nGET /api/inventory # All products with low stock alerts\nPOST /api/inventory/stock # Update stock (receive/adjust)\n Body: { productId, quantity, type, reference }\n```\n\n### Reports\n```\nGET /api/reports/sales # Sales report with filtering\n Query: ?startDate=2026-08-01&endDate=2026-08-31\n```\n\n### Dashboard\n```\nGET /api/dashboard # Stats: today's sales, low stock alerts, totals\n```\n\n## 💾 Database Schema\n\n### Products\n- `id`, `name`, `sku` (unique), `category`, `price`, `cost`, `stock`\n- `description`, `barcode` (for future barcode scanning)\n- Timestamps for tracking\n\n### Sales\n- `id`, `transactionId` (unique), `total`, `subtotal`, `vatAmount`\n- `paymentMethod` (cash, card, transfer)\n- `status`, `createdAt`\n\n### Sale Items (Line Items)\n- Links products to sales with quantity and pricing\n- Stores unit price at time of sale (prevents price change conflicts)\n- Discount field for promotions\n\n### Inventory Log\n- Tracks all stock movements (sales, adjustments, returns)\n- References transaction IDs for traceability\n- Type: \"sale\", \"adjustment\", \"return\", etc.\n\n### Users\n- Structure for multi-user support\n- PIN-based authentication (expandable)\n- Roles: admin, cashier (ready for implementation)\n\n## 🔧 Tech Stack\n\n- **Frontend:** React 18 with TypeScript\n- **Backend:** Hono (lightweight HTTP framework)\n- **Database:** SQLite (Val Town's std/sqlite)\n- **Styling:** Twind (Tailwind CSS runtime)\n- **Runtime:** Deno (on Val Town)\n\n## 💡 Customization\n\n### Adding New Products\nEdit `db/schema.ts` `seedDemoData()` function or use admin panel (future feature)\n\n### Changing VAT Rate\nVAT is calculated as 5% in:\n- `frontend/components/Cart.tsx` (line with `subtotal * 0.05`)\n- `frontend/components/Checkout.tsx` (same calculation)\n- `index.ts` `/api/sales` endpoint\n\nChange `0.05` to your desired rate everywhere.\n\n### Adding Categories\nCategories are auto-detected from products. Add new products with new category names.\n\n### Payment Methods\nUpdate the `

Diff · v8