System Overview

Mobile Shop Management System Kya Hai?

Yeh ek professional web-based shop management system hai jo specifically mobile phone shops ke liye design kiya gaya hai. Shop owner ya staff is system se:

• Apne products ka record rakh sakta hai
• Stock levels track kar sakta hai
• Customer ko bill (invoice) bana sakta hai
• Purani sales dekh sakta hai
• Suppliers ka data manage kar sakta hai
• Shop ki daily performance dashboard par dekh sakta hai

System Architecture

┌─────────────────────────────────────────────────────────┐
│                    Browser (Client)                      │
│  Next.js 14 App Router + React + Tailwind CSS           │
├─────────────────────────────────────────────────────────┤
│  Pages: Login | Dashboard | Inventory | Sales | Orders  │
│  Context: Auth | Shop | Currency | Theme                │
│  Components: Sidebar, ProtectedRoute, BarcodeDisplay      │
└───────────────────────┬─────────────────────────────────┘
                        │ Supabase Client (REST + RPC)
┌───────────────────────▼─────────────────────────────────┐
│                    Supabase (Cloud)                      │
│  PostgreSQL Database + Row Level Security                 │
│  Functions: verify_user_password, update_user_password    │
│  Triggers: Auto stock deduction on sale                   │
└─────────────────────────────────────────────────────────┘

Core Modules

1. Authentication Module

• Custom username/password login (Supabase users table)
• Password bcrypt se hashed store hota hai
• Session localStorage mein save hoti hai
• Protected routes — bina login ke koi page nahi khulta

2. Inventory Module

• Products CRUD (Create, Read, Update, Delete)
• Categories management
• IMEI/Serial number tracking (mobile phones ke liye)
• Cost price aur selling price
• Low stock alerts (min_stock_level se compare)

3. Sales / POS Module

• Product search aur cart
• Multiple payment methods: Cash, Card, Mobile Payment
• Automatic invoice number generation (INV-00001 format)
• Barcode wali printable invoice
• Sale complete hone par stock automatically kam

4. Order History Module

• Saari past sales ki list
• Invoice number se search
• Invoice re-print
• Order delete (stock wapas restore hota hai)

5. Supplier Module

• Supplier name, contact person, email, phone, address
• Full CRUD operations

6. Activity Logging

• Har important action log hota hai
• Product add/edit/delete, sale, settings change sab record hota hai
• Dashboard par real-time feed (5 second refresh)

7. Settings Module (Sidebar)

• Shop name, address, phone, email, owner name
• Currency selector (PKR, USD, EUR, GBP)
• Dark/Light theme toggle
• Username aur password change

Data Flow Examples

Sale Complete Hone Par

User cart mein products add karta hai
        ↓
"Complete Sale" click
        ↓
`sales` table mein naya record insert
        ↓
`sale_items` table mein har product ka record
        ↓
Database TRIGGER: stock_quantity automatically minus
        ↓
`activity_logs` mein sale log
        ↓
Invoice preview dialog + print option

Product Add Karne Par

Inventory → Add Product → Form fill
        ↓
`products` table mein insert
        ↓
Activity log: "Product XYZ added to inventory"
        ↓
Dashboard stats update (product count)

User Roles

Database mein roles defined hain:

Note: Abhi UI mein role-based page restrictions implement nahi hain — sab authenticated users sab pages access kar sakte hain. Role database level par ready hai future use ke liye.

UI/UX Features

• Glassmorphism cards — modern glass-like design
• Responsive layout — mobile, tablet, desktop
• Mobile sidebar — hamburger menu with overlay
• Dark/Light mode — next-themes se toggle
• PKR default currency — Pakistani Rupee symbol (₨)
• Barcode invoices — JsBarcode library se CODE128 format

File Structure (Important)

Mobil-Shop-System/
├── app/
│   ├── page.tsx              → Dashboard (/)
│   ├── login/page.tsx        → Login (/login)
│   ├── inventory/page.tsx    → Inventory
│   ├── sales/page.tsx        → Sales POS
│   ├── orders/page.tsx       → Order History
│   └── suppliers/page.tsx    → Suppliers
├── components/
│   ├── sidebar.tsx           → Navigation + Settings
│   ├── protected-route.tsx   → Auth guard
│   ├── recent-activity.tsx   → Dashboard recent bills
│   └── activity-log.tsx      → Dashboard activity feed
├── lib/
│   ├── auth-context.tsx      → Login/logout/session
│   ├── shop-context.tsx      → Shop details (localStorage)
│   ├── currency-context.tsx  → Currency preference
│   └── supabase/             → Supabase clients
└── supabase/
    └── complete-schema.sql   → Full database setup

Kya Kya Kar Sakte Hain? (Summary)