# INTERACT Bulk Sale -- Wholesale Ordering Platform

This document describes the features, product catalog, user workflows, and known limitations of the INTERACT Bulk Sale mobile application for B2B wholesale ordering.

**Estimated reading time:** 15 minutes

---

## Overview

INTERACT Bulk Sale is a self-contained mobile application for international wholesale buyers to browse products, build orders, and submit quote requests to INTERACT Solutions. The app bundles all product data, UI, and logic into a single HTML file wrapped in a Capacitor native shell. It works fully offline after the first load -- no server connection is required to browse products, build a cart, or review past orders.

| Field             | Value                                                    |
|-------------------|----------------------------------------------------------|
| App name          | INTERACT Bulk Sale                                       |
| App ID            | `com.interactpak.bulksale`                               |
| Version           | 1.0.0                                                    |
| APK size          | 4.0 MB                                                   |
| IPA size          | 655 KB                                                   |
| App type          | Bundled PWA (works fully offline)                        |
| Company           | INTERACT Solutions, Karachi, Pakistan                    |
| Contact email     | info@interactpak.com                                     |
| Contact phone     | +92 300 2020179                                          |
| Website           | https://interactpak.com                                  |

---

## Properties

### Architecture

Bulk Sale is a single-file PWA (1,839 lines of HTML, CSS, and JavaScript) wrapped in a Capacitor 8 native container for Android and iOS distribution. All product data, business logic, and UI rendering are bundled inside the app -- there is no backend server or API dependency for core functionality.

- **Native container:** Capacitor 8.2 (Android + iOS)
- **Web content:** Single `index.html` file with inline styles and scripts
- **Service worker:** Caches `index.html`, `manifest.json`, and the root path for offline access
- **Data persistence:** `localStorage` for cart contents, login session, and shipping preferences
- **Splash screen:** 2-second display, navy background (`#12253f`)
- **Status bar:** Dark style, gold background (`#be9a5f`)

### Connectivity

The app functions without any network connection for all core features (browsing, searching, cart management). Network access is required only for two outbound actions:

| Outbound connection     | Purpose                                    | Trigger            |
|-------------------------|--------------------------------------------|--------------------|
| `mailto:info@interactpak.com` | Send quote request via email          | User taps "Request Quote via Email" |
| `https://wa.me/923002020179`  | Send order summary via WhatsApp      | User taps "Quick Order via WhatsApp" |
| `https://interactpak.com`     | Visit company website (profile screen) | User taps "Visit Website" |

No external CDNs, analytics scripts, or third-party resources are loaded. The app uses system fonts (`Inter`, `system-ui`, `-apple-system`, `sans-serif`) with no font file downloads.

### Design system

The app uses a custom CSS design system with the following brand tokens:

| Token        | Hex value  | Usage                              |
|--------------|------------|-------------------------------------|
| Navy         | `#12253f`  | Primary text, header, buttons       |
| Navy light   | `#1a3355`  | Product image gradients             |
| Navy dark    | `#0c1a2e`  | Login screen gradient               |
| Gold         | `#be9a5f`  | Accent, badges, primary buttons     |
| Gold light   | `#d4b87a`  | Hover states, subtle text           |
| Gold dark    | `#a68245`  | Price text, category labels         |
| Warm         | `#f5f1e8`  | App background                      |

---

## Features

### Product catalog

The catalog contains 17 products across 4 categories. Each product includes a name, minimum order quantity (MOQ), unit of measurement, indicative price range in USD, HS (Harmonized System) tariff code, and a detailed description.

#### FMCG (4 products)

| Product                          | MOQ     | Unit | Price range (USD) | HS Code  |
|----------------------------------|---------|------|-------------------|----------|
| Super Basmati Rice (1121 Sella)  | 25      | MT   | $850 -- $1,100    | 1006.30  |
| Spice Blends (Export Quality)    | 5       | MT   | $2,200 -- $3,500  | 0910.99  |
| Brown Rice (Organic)             | 20      | MT   | $750 -- $950      | 1006.20  |
| Parboiled Rice (IR-6)            | 50      | MT   | $450 -- $600      | 1006.30  |

#### Textiles (5 products)

| Product                          | MOQ     | Unit | Price range (USD) | HS Code  |
|----------------------------------|---------|------|-------------------|----------|
| Terry Towels (100% Cotton)       | 5,000   | pcs  | $2.50 -- $8.00    | 6302.60  |
| Bed Sheets (Percale & Sateen)    | 3,000   | pcs  | $8.00 -- $22.00   | 6302.31  |
| Kitchen Textiles                 | 10,000  | pcs  | $0.80 -- $3.50    | 6302.91  |
| Bath Robes (Velour)              | 1,000   | pcs  | $12.00 -- $28.00  | 6108.91  |
| Duvet Covers (TC 300)            | 2,000   | pcs  | $15.00 -- $35.00  | 6302.32  |

#### Leather (4 products)

| Product                          | MOQ     | Unit | Price range (USD) | HS Code  |
|----------------------------------|---------|------|-------------------|----------|
| Finished Leather (Cow/Buffalo)   | 5,000   | sqft | $1.80 -- $4.50    | 4107.99  |
| Leather Jackets (Mens/Womens)    | 200     | pcs  | $45.00 -- $120.00 | 4203.10  |
| Leather Bags (Handbags & Travel) | 300     | pcs  | $25.00 -- $85.00  | 4202.21  |
| Leather Gloves (Work & Fashion)  | 1,000   | pcs  | $3.50 -- $15.00   | 4203.29  |

#### Chemicals (4 products)

| Product                          | MOQ     | Unit | Price range (USD) | HS Code  |
|----------------------------------|---------|------|-------------------|----------|
| Basic Chrome Sulfate (BCS 33%)   | 20      | MT   | $550 -- $750      | 2833.24  |
| Syntans (Replacement & Auxiliary)| 5       | MT   | $1,200 -- $2,800  | 3202.90  |
| Fatliquors (Sulphated & Sulphited)| 5      | MT   | $1,500 -- $3,200  | 3403.99  |
| Retanning Agents (Polymer-based) | 3       | MT   | $1,800 -- $3,500  | 3202.10  |

### Search and filter

- **Search bar:** Type to filter products by name, category name, or HS code. Filtering is instant (no server call).
- **Category tabs:** Horizontal scrollable tabs for All, FMCG, Textiles, Leather, and Chemicals. Tap a tab to filter the product grid to that category.
- **Product count:** The header displays the number of products matching the current filter.

### Product details

Tap any product card to open a bottom-sheet modal with:

- Full product description
- HS code, price range, and minimum order quantity
- Country of origin (Pakistan)
- Quantity selector with smart step sizes based on product unit:

| Unit   | Step size                             |
|--------|---------------------------------------|
| MT     | 5                                     |
| sqft   | 1,000                                |
| pcs    | 100 or MOQ/10 (whichever is larger)  |
| kg     | 1                                     |

- Estimated order value calculated from the quantity and the midpoint of the price range
- "Add to Cart" button (or "Update Cart" if the product is already in the cart)

### Cart and order builder

The cart screen provides a complete order-building workflow:

1. **Line items:** Each cart item displays the product name, average price per unit, quantity adjuster (with the same smart step sizes), estimated line total, and a "Remove" button.
2. **Shipping terms:** Select one of three Incoterms options:

   | Term         | Description                          |
   |--------------|--------------------------------------|
   | FOB Karachi  | Free on Board -- Karachi Port (default) |
   | CIF          | Cost, Insurance & Freight to destination |
   | CFR          | Cost & Freight to destination        |

3. **Special instructions:** Free-text field for packaging, labeling, or certification requirements.
4. **Order summary:** Displays item count, estimated subtotal, selected shipping terms, and estimated total. A disclaimer notes that prices are indicative averages subject to confirmation.
5. **Actions:**
   - **Request Quote via Email** -- Opens the device email client with a pre-formatted email to `info@interactpak.com` containing the full order breakdown.
   - **Quick Order via WhatsApp** -- Opens WhatsApp with a formatted message to `+92 300 2020179` containing the order summary.
   - **Continue Shopping** -- Returns to the catalog.
   - **Clear All** -- Removes all items from the cart (with confirmation prompt).

### Order tracking

The Orders tab displays 3 sample orders with a 5-step visual tracking bar:

| Step      | Position | Meaning                          |
|-----------|----------|----------------------------------|
| Confirmed | 1        | Order acknowledged by seller     |
| Processing| 2        | Order being prepared/manufactured|
| Shipped   | 3        | Goods dispatched from origin     |
| Customs   | 4        | Goods in customs clearance       |
| Delivered | 5        | Goods received by buyer          |

Each order card shows the order ID (format: `IBQ-2026-NNNN`), date, status badge (color-coded: orange for processing, blue for shipped, green for delivered), itemized list, total value, and shipping terms.

### Profile screen

The profile screen displays:

- User avatar (initials), name, and role
- Quick contact actions: Email sales team, call, WhatsApp chat, visit website
- Company information block with address and links
- Sign out button

---

## User Guide

### Sign in

1. Open the INTERACT Bulk Sale app.
2. Enter your username in the **Username** field.
3. Enter your password in the **Password** field.
4. Tap **Sign In**.
   - On success, the app loads the product catalog.
   - On failure, the message "Invalid credentials. Please try again." appears below the form.

**Available accounts:**

| Username | Password   | Display name       | Role          |
|----------|------------|--------------------|---------------|
| Contact info@interactpak.com for access credentials |  |  |  |


The login session persists across app restarts. The app stores the session in `localStorage` under the key `bulksale_session`.

### Browse and search products

1. After sign-in, the **Catalog** tab displays all 17 products in a two-column grid.
2. Tap a **category tab** (FMCG, Textiles, Leather, Chemicals) to filter the grid.
3. Type in the **search bar** to filter by product name, category, or HS code.
   - Results update as you type.

### Add a product to the cart

**Quick add (from catalog grid):**

1. Tap the **+ Add to Cart** button on any product card.
2. The app adds the product at its minimum order quantity.
   - A toast notification confirms the addition.
   - The button changes to show a checkmark and the current quantity.
3. Tap the button again to increase quantity by one step increment.

**Detailed add (from product modal):**

1. Tap anywhere on the product card (not the Add to Cart button) to open the detail modal.
2. Review the product description, HS code, price range, and MOQ.
3. Use the **minus** and **plus** buttons to adjust the quantity.
   - The quantity cannot go below the product MOQ.
   - The estimated order value updates as you adjust.
4. Tap **Add to Cart**.
   - A toast notification confirms the addition.
   - The modal closes and the catalog view updates.

### Build and submit an order

1. Tap the **Cart** tab in the bottom navigation (or the cart icon in the header).
2. Review the items in your cart. Adjust quantities or remove items as needed.
3. Under **Shipping Terms**, select FOB Karachi, CIF, or CFR.
4. Optionally, enter notes in the **Special Instructions** field.
5. Review the **Order Summary** section for the estimated total.
6. Choose a submission method:
   - Tap **Request Quote via Email** to open your email client with a pre-filled message.
   - Tap **Quick Order via WhatsApp** to open WhatsApp with the order summary.
7. Send the message from your email client or WhatsApp.
   - The INTERACT sales team receives the order details and responds with confirmed pricing.

### Check order status

1. Tap the **Orders** tab in the bottom navigation.
2. Review the list of orders with their status badges and tracking progress bars.
3. Each order shows the items, total value, shipping terms, and current tracking step.

### Sign out

1. Tap the **Profile** tab in the bottom navigation.
2. Scroll down and tap **Sign Out**.
   - The app clears the session and returns to the login screen.
   - Cart contents are also cleared on sign out.

---

## Technical Specifications

### Build toolchain

| Component                | Version / Detail                                |
|--------------------------|-------------------------------------------------|
| Capacitor Core           | 8.2.x                                           |
| Capacitor Android        | 8.2.x                                           |
| Capacitor iOS            | 8.2.x                                           |
| Capacitor Splash Screen  | 8.0.x                                           |
| Capacitor Status Bar     | 8.0.x                                           |
| Node.js (build)          | 25.7                                             |
| Android target SDK       | 34                                               |

### Capacitor configuration

| Setting                       | Value                      |
|-------------------------------|----------------------------|
| `appId`                       | `com.interactpak.bulksale` |
| `appName`                     | `INTERACT Bulk Sale`       |
| `webDir`                      | `www`                      |
| `bundledWebRuntime`           | `false`                    |
| `webContentsDebuggingEnabled` | `false`                    |
| `allowMixedContent`           | `false`                    |

### Service worker

The service worker (`sw.js`) caches shell assets on install and uses a cache-first strategy with network fallback. On a cache miss, the service worker fetches from the network and caches the response for future use. If both cache and network fail, it returns the cached `index.html`.

| Cache name      | Cached assets                            |
|-----------------|------------------------------------------|
| `bulksale-v1`   | `./`, `./index.html`, `./manifest.json`  |

### Data storage

All client-side data is stored in `localStorage` under a single key:

| Key                 | Contents                                          |
|---------------------|---------------------------------------------------|
| `bulksale_session`  | JSON object: `user` (name, username, role), `cart` (array of `{id, qty}`), `shipping` (selected Incoterm) |

### Android permissions

| Permission                    | Purpose                                |
|-------------------------------|----------------------------------------|
| `android.permission.INTERNET` | Required for email/WhatsApp links and website access |

### App dimensions

| Metric             | Value                                             |
|--------------------|---------------------------------------------------|
| Source lines       | 1,839 (single HTML file)                          |
| Products           | 17 across 4 categories                            |
| Users              | 2 hardcoded accounts                              |
| Sample orders      | 3 with tracking data                              |
| Max app width      | 600px (centered on larger screens)                |
| Bottom nav tabs    | 4 (Catalog, Cart, Orders, Profile)                |

### Quantity step sizes

The cart and product modal use smart step sizes to provide practical quantity adjustments for each unit type:

| Unit   | Step size formula                              | Example            |
|--------|------------------------------------------------|--------------------|
| MT     | Fixed: 5                                       | 25 -> 30 -> 35     |
| sqft   | Fixed: 1,000                                   | 5,000 -> 6,000     |
| pcs    | `max(100, floor(MOQ / 10))`                    | MOQ 5,000 -> step 500 |
| kg     | Fixed: 1                                       | 3 -> 4 -> 5        |

---

## Known Limitations

| Category             | Limitation                                                       |
|----------------------|------------------------------------------------------------------|
| Product data         | All 17 products are hardcoded in the HTML file. Adding, removing, or updating products requires rebuilding and redistributing the app. |
| Authentication       | Login credentials are hardcoded client-side (2 accounts). There is no server-side authentication or account management. |
| Order tracking       | The Orders tab shows 3 sample orders with static tracking data. It is not connected to a real logistics or order management system. |
| Quote requests       | Orders are quote requests only. The "Request Quote via Email" action opens a `mailto:` link -- it requires an email client installed on the device. WhatsApp orders require WhatsApp installed on the device. |
| Payment processing   | No payment gateway or financial transaction processing. All pricing is indicative and subject to seller confirmation. |
| Cart persistence     | Cart data is stored in `localStorage`. Clearing app data, clearing browser storage, or uninstalling the app deletes the cart. |
| Cart size            | Performance may degrade with approximately 50 or more items in the cart due to DOM rendering overhead. |
| Currency             | All prices are displayed in USD. No multi-currency support or exchange rate conversion. |
| Inventory levels     | The app shows price ranges only. Real-time stock levels and availability are not displayed. |
| iOS signing          | The iOS build (IPA) is unsigned. Distribution requires an Apple Developer account and Xcode signing. |
| Multi-user           | Single user per device. There is no account switching -- signing out clears the session and cart entirely. |
| Orientation          | Portrait-only (`"orientation": "portrait"` in manifest). |
| Accessibility        | Keyboard navigation supported (Escape closes modals). ARIA labels present on navigation and quantity buttons. Screen reader optimization is limited. |

---

## Support and Contact

| Channel   | Detail                                           |
|-----------|--------------------------------------------------|
| Email     | info@interactpak.com                             |
| Phone     | +92 300 2020179                                  |
| WhatsApp  | +92 300 2020179                                  |
| Website   | https://interactpak.com                          |
| Company   | INTERACT Solutions, Karachi, Pakistan            |

**For buyers:** Send product inquiries, custom specification requests, or quote follow-ups to info@interactpak.com. Include your company name and the products of interest.

**For technical issues:** If the app fails to launch, displays a blank screen, or does not open email/WhatsApp links, provide the device model, operating system version, and a description of the problem to the development team.

---

*INTERACT Bulk Sale v1.0.0 -- INTERACT Solutions, Karachi, Pakistan*