Sales (POS) Page

Route: /sales
File: app/sales/page.tsx

Page Ka Maqsad

Yeh system ka Point of Sale (POS) module hai. Customer ko bill banana, products cart mein add karna, payment method select karna, aur printable invoice generate karna — sab yahan hota hai.

Page Layout

┌──────────────────────────────┬─────────────────┐
│  Select Products (2/3 width) │  Cart (1/3)     │
│  [Search products...]        │  🛒 Cart        │
│  ┌────────────────────────┐  │  Item 1  [-][+] │
│  │ Samsung A54  ₨45,000   │  │  Item 2  [-][+] │
│  │ Stock: 5      [+ Add]  │  │                 │
│  └────────────────────────┘  │  Payment: Cash ▼│
│  ┌────────────────────────┐  │  Total: ₨90,000 │
│  │ iPhone 15    ₨250,000  │  │  [Complete Sale]│
│  │ Stock: 2      [+ Add]  │  │                 │
│  └────────────────────────┘  │                 │
└──────────────────────────────┴─────────────────┘

Kya Kar Sakte Hain?

Action	Kaise
Product search	Search bar — name, brand, IMEI
Cart mein add	Product ke saamne Add button
Quantity badhana	Cart mein + button
Quantity kam karna	Cart mein - button
Item remove	Cart mein 🗑️ trash icon
Payment method	Cash / Card / Mobile Payment
Sale complete	Complete Sale button
Invoice preview	Sale ke baad automatic dialog
Invoice print	Dialog mein Print Invoice

Sale Process (Step by Step)

Step 1: Products Select Karein

Sirf in-stock products dikhte hain (stock_quantity > 0)
Search se quickly product dhundhein
Add click se cart mein jata hai

Step 2: Cart Manage Karein

Same product dobara add → quantity increase
Stock se zyada quantity nahi le sakte — alert aayega
Quantity 0 → item cart se remove

Step 3: Payment Method

Method	Value
Cash	`cash`
Card	`card`
Mobile Payment	`mobile_payment`

Step 4: Complete Sale

Complete Sale click
System automatically:
1. Unique invoice number generate (INV-00001 format)
2. sales record create
3. sale_items records create
4. Stock automatically minus (database trigger)
5. Activity log entry
6. Invoice preview dialog open

Step 5: Print Invoice

Preview mein shop name, address, phone
Invoice number + barcode (CODE128)
Product list with quantities aur prices
Total amount
Print Invoice → new window → browser print dialog

Invoice Features

Shop branding — Sidebar settings se shop name/address/phone
Barcode — JsBarcode library, CODE128 format
Short invoice number — INV-00001 readable format
Date/time — sale creation timestamp
Payment method — uppercase display

Stock Protection

Agar cart quantity > available stock:
  → Alert: "Not enough stock available"
  → Action block

Agar product stock = 0:
  → Add button disabled
  → Product list mein nahi dikhega (filtered out)

Database Operations on Sale

INSERT INTO sales (invoice_number, total_amount, payment_method)
        ↓
INSERT INTO sale_items (sale_id, product_id, quantity, unit_price, total_price)
        ↓
TRIGGER: update_product_stock → stock_quantity -= quantity
        ↓
INSERT INTO activity_logs (action: sale, description: invoice + amount)

Cart State

Cart client-side state mein hai (page refresh par clear ho jayega incomplete sale). Sale complete hone ke baad cart automatically empty ho jata hai.

Empty States

Condition	Message
Koi product available nahi	"No products available"
Search match nahi	"No products found matching..."
Cart empty	"Cart is empty"

Tips for Cashiers

Pehle search use karein — IMEI se bhi search hota hai
Stock check karein — har product ke neeche stock count dikhta hai
Sale complete ke baad print — customer ko invoice dein
Galat sale? — Order History se delete karein (stock restore hoga)

Inventory — products yahan se aate hain
Order History — completed sales yahan save hoti hain
Dashboard — today's sales update hoti hai