test: implement OrderItems display component tests (#15)

.claude/ci-cd.md

@@ -9,6 +9,7 @@ All workflows run on `ubuntu-latest` with Node.js 20.x and pnpm.
 **Triggered:** Push to main, Pull requests to main
 
 **Jobs:**
+
 - ✅ Install dependencies (`pnpm install --frozen-lockfile`)
 - ✅ Lint code (`pnpm lint`)
 - ✅ Type check (`pnpm check`)
@@ -22,6 +23,7 @@ All workflows run on `ubuntu-latest` with Node.js 20.x and pnpm.
 **Triggered:** Push to main, Pull requests to main
 
 **Jobs:**
+
 - ✅ Install dependencies
 - ✅ Build SvelteKit (`pnpm build`)
 - ✅ Upload build artifact to GitHub
@@ -33,13 +35,15 @@ All workflows run on `ubuntu-latest` with Node.js 20.x and pnpm.
 **Triggered:** Push to main only (not PR)
 
 **Jobs:**
+
 - ✅ Install dependencies
 - ✅ Build SvelteKit
 - ✅ Deploy to Cloudflare Pages
 
 **Purpose:** Automatically deploy to production when code is merged to main
 
 **Setup Required (when ready for Phase 8.1):**
+
 1. Create Cloudflare Pages project
 2. Get API token: https://dash.cloudflare.com/profile/api-tokens
 3. Get Account ID: https://dash.cloudflare.com/

.claude/deployment.md

@@ -5,13 +5,15 @@
 ✅ **Verified:** All Cloudflare adapter configurations are complete and working.
 
 ### Build & Preview
+
 - ✅ `pnpm build` - Compiles SvelteKit with @sveltejs/adapter-cloudflare
 - ✅ `pnpm preview` - Runs production build locally on http://localhost:4173/
 - ✅ `wrangler.toml` - Created with base configuration
 
 ### Deployment Options
 
 #### Option 1: Cloudflare Pages (RECOMMENDED for this project)
+
 - **Best for:** Static sites with edge functions, simple PWAs
 - **How it works:** Git-based deployments, automatic builds on push
 - **Setup:**
@@ -26,6 +28,7 @@
   - Perfect for PWA offline-first apps
 
 #### Option 2: Cloudflare Workers (for advanced use cases)
+
 - **Best for:** Custom API routes, real-time features
 - **Requires:**
   - Wrangler CLI (`npm install -g wrangler`)
@@ -46,17 +49,20 @@
    - Ready for Phase 1-7 development
 
 ### Environment Variables
+
 - `wrangler.toml` supports `[env]` sections for production/staging
 - Will be configured in Phase 8.1 when setting up Pages
 - Currently using defaults for local development
 
 ### PWA & Service Worker Considerations
+
 - Service Worker (sw.js) is generated by vite-plugin-pwa
 - Works offline-first with local storage/IndexedDB
 - Cloudflare Pages caches static assets at edge
 - No special configuration needed for PWA to work
 
 ### Testing the Build
+
 ```bash
 pnpm build              # Create production build
 pnpm preview            # Test locally before deploying

.prettierrc

@@ -3,10 +3,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": [
-		"prettier-plugin-svelte",
-		"prettier-plugin-tailwindcss"
-	],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"tailwindStylesheet": "./src/routes/layout.css",
 	"overrides": [
 		{

CLAUDE.md

@@ -7,13 +7,15 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 **Kassa** is a mobile-first PWA (Progressive Web App) designed for small fruit and vegetable vendors (families, couples, small shops) to simplify sales calculations and margin management.
 
 **Core Features:**
+
 - Quick product selection via large icons (POS-style interface)
 - Real-time price and margin calculations (comparing purchase vs selling price)
 - Multi-client/order management with easy switching
 - Offline-first functionality with local storage and IndexedDB
 - Profit margin tracking and percentage calculation
 
 **Future Features:**
+
 - Sales history tracking and daily summaries
 - Data analysis with trend visualization (best-selling products by day)
 
@@ -37,13 +39,15 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 Create branches using this format: `<type>/<#>-<slug>`
 
 **Types (must match GitHub labels):**
+
 - `feat/` - New features
 - `test/` - Tests and test-related
 - `docs/` - Documentation
 - `fix/` - Bug fixes
 - `refactor/` - Code refactoring
 
 **Examples:**
+
 ```bash
 git checkout -b feat/11-margin-calculations
 git checkout -b test/33-unit-tests
@@ -64,6 +68,7 @@ Closes #<issue-number>
 ```
 
 **Example:**
+
 ```
 feat: implement margin and total calculations with tests
 
@@ -78,6 +83,7 @@ Closes #11
 ### GitHub Labels
 
 Only 5 labels per issue:
+
 - **feature** - New features and enhancements
 - **test** - Tests and TDD-related
 - **docs** - Documentation
@@ -119,11 +125,13 @@ git push -u origin feat/11-margin-calculations
 #### ✋ MANDATORY RULE: ALWAYS CREATE FEATURE BRANCH FIRST
 
 **Before you modify ANY file, verify you are NOT on `main`:**
+
 ```bash
 git status  # If you see "On branch main" → STOP and create branch immediately
 ```
 
 **If you see "On branch main", create feature branch NOW:**
+
 ```bash
 git checkout -b <type>/<issue-number>-<slug>
 # Examples: test/14-product-grid, feat/11-margin, docs/5-setup
@@ -141,6 +149,7 @@ git checkout -b <type>/<issue-number>-<slug>
 6. **MERGE**: Create PR on GitHub → Review → Merge
 
 #### Branch Naming Format (mandatory)
+
 - `test/<issue-number>-<slug>` for tests
 - `feat/<issue-number>-<slug>` for features
 - `docs/<issue-number>-<slug>` for documentation
@@ -150,6 +159,7 @@ git checkout -b <type>/<issue-number>-<slug>
 **DO NOT deviate from this format.**
 
 #### Commit Requirements
+
 - ✅ Always reference issue number: `Closes #14`
 - ✅ Tests must pass: `pnpm test`
 - ✅ Code formatted: `pnpm format`
@@ -209,19 +219,22 @@ The project is organized in 8 phases (Phase 0-8) to build Kassa incrementally wi
 ## Quick Commands
 
 ### Development
+
 ```bash
 pnpm dev              # Start dev server with hot reload
 pnpm dev -- --open    # Start dev server and open in browser
 ```
 
 ### Testing
+
 ```bash
 pnpm test:unit        # Run unit tests (Vitest + Playwright browser tests)
 pnpm test:e2e         # Run end-to-end tests
 pnpm test             # Run all tests (unit + e2e)
 ```
 
 ### Code Quality
+
 ```bash
 pnpm lint             # Run ESLint and Prettier checks
 pnpm format           # Auto-format code with Prettier
@@ -230,6 +243,7 @@ pnpm check:watch      # Run type checking in watch mode
 ```
 
 ### Build & Deploy
+
 ```bash
 pnpm build            # Production build for Cloudflare
 pnpm preview          # Preview production build locally (port 4173)
@@ -270,27 +284,31 @@ Dual testing setup with different environments:
 ## Code Style Guidelines
 
 ### Formatting & Linting
+
 - **Indentation**: Tabs (not spaces)
 - **Quotes**: Single quotes
 - **Line Width**: 100 characters
 - **Trailing Commas**: None
 - **Tailwind Classes**: Auto-ordered by Prettier plugin (stylesheet: `src/routes/layout.css`)
 
 ### TypeScript
+
 - Strict mode enabled (`strict: true`)
 - JavaScript type-checked (`checkJs: true`)
 - No `any` types - create proper interfaces instead
 - Module resolution: "bundler"
 - Path alias: `$lib` maps to `src/lib`
 
 ### ESLint
+
 - TypeScript-eslint recommended rules
 - Svelte linting via eslint-plugin-svelte
 - Prettier integration (no conflicts)
 - `no-undef` disabled (TypeScript handles this)
 - `.gitignore` patterns respected
 
 ### Svelte 5 Specifics
+
 - Uses Runes (`$state`, `$derived`, `$effect`) - NOT legacy reactive declarations
 - Props destructuring: `let { children } = $props()`
 - Snippet syntax for slot-like components

README.md

@@ -14,15 +14,15 @@ A mobile-first PWA (Progressive Web App) designed to simplify sales calculations
 
 ## Tech Stack
 
-| Category | Technology |
-|----------|-----------|
-| **Framework** | [SvelteKit 2](https://kit.svelte.dev) + [Svelte 5](https://svelte.dev) |
-| **Styling** | [Tailwind CSS 4](https://tailwindcss.com) + [Skeleton Labs](https://www.skeleton.dev) |
-| **Database** | [PouchDB](https://pouchdb.com) (IndexedDB-based, offline-sync ready) |
-| **Testing** | [Vitest](https://vitest.dev) + [Playwright](https://playwright.dev) |
-| **Deployment** | [Cloudflare Workers](https://workers.cloudflare.com) |
-| **Language** | [TypeScript](https://www.typescriptlang.org) 5 (strict mode) |
-| **Code Quality** | ESLint + Prettier |
+| Category         | Technology                                                                            |
+| ---------------- | ------------------------------------------------------------------------------------- |
+| **Framework**    | [SvelteKit 2](https://kit.svelte.dev) + [Svelte 5](https://svelte.dev)                |
+| **Styling**      | [Tailwind CSS 4](https://tailwindcss.com) + [Skeleton Labs](https://www.skeleton.dev) |
+| **Database**     | [PouchDB](https://pouchdb.com) (IndexedDB-based, offline-sync ready)                  |
+| **Testing**      | [Vitest](https://vitest.dev) + [Playwright](https://playwright.dev)                   |
+| **Deployment**   | [Cloudflare Workers](https://workers.cloudflare.com)                                  |
+| **Language**     | [TypeScript](https://www.typescriptlang.org) 5 (strict mode)                          |
+| **Code Quality** | ESLint + Prettier                                                                     |
 
 ## Getting Started
 
@@ -49,20 +49,23 @@ The app will be available at `http://localhost:5173`
 ## Development Commands
 
 ### Running the App
+
 ```bash
 pnpm dev              # Start dev server with hot reload
 pnpm build            # Build for production (Cloudflare)
 pnpm preview          # Preview production build (port 4173)
 ```
 
 ### Testing
+
 ```bash
 pnpm test:unit        # Run unit tests (browser + server)
 pnpm test:e2e         # Run end-to-end tests with Playwright
 pnpm test             # Run all tests
 ```
 
 ### Code Quality
+
 ```bash
 pnpm lint             # Check ESLint and Prettier
 pnpm format           # Auto-format code
@@ -105,22 +108,22 @@ export const db = new PouchDB('kassa-local');
 
 // For data structure
 export interface Product {
-  _id?: string;
-  _rev?: string;
-  type: 'product';
-  name: string;
-  price_per_unit: number; // purchase price
-  unit: string; // kg, piece, etc.
+	_id?: string;
+	_rev?: string;
+	type: 'product';
+	name: string;
+	price_per_unit: number; // purchase price
+	unit: string; // kg, piece, etc.
 }
 
 export interface Order {
-  _id?: string;
-  _rev?: string;
-  type: 'order';
-  client_name: string;
-  items: OrderItem[];
-  total_amount: number;
-  created_at: Date;
+	_id?: string;
+	_rev?: string;
+	type: 'order';
+	client_name: string;
+	items: OrderItem[];
+	total_amount: number;
+	created_at: Date;
 }
 ```
 
@@ -129,13 +132,13 @@ export interface Order {
 ```typescript
 // Get all documents of a type
 const products = await db.allDocs({
-  include_docs: true,
-  key: 'product'
+	include_docs: true,
+	key: 'product'
 });
 
 // Query with Mango (if using pouchdb-find)
 const orders = await db.find({
-  selector: { type: 'order', created_at: { $gte: startDate } }
+	selector: { type: 'order', created_at: { $gte: startDate } }
 });
 ```
 
@@ -144,8 +147,8 @@ const orders = await db.find({
 ```typescript
 // Sync with CouchDB server
 db.sync('https://your-couchdb-server/kassa', {
-  live: true,
-  retry: true
+	live: true,
+	retry: true
 });
 ```
 
@@ -209,6 +212,7 @@ Requires IndexedDB support for PouchDB offline storage.
 ## Contributing
 
 When contributing:
+
 1. Run `pnpm lint` to check code quality
 2. Run `pnpm test` to ensure tests pass
 3. Use `pnpm format` for consistent formatting

dev-dist/registerSW.js

@@ -1 +1,2 @@
-if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })
+if ('serviceWorker' in navigator)
+	navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' });