Platform Overview

LeathX
Leather Chemical
Trading Platform

A bundled PWA for chemical sourcing, recipe building, invoicing, and client intelligence — fully offline-capable on Android, iOS, and web.

v11.0.0 Single-File PWA Capacitor 8 6 Languages Offline-First

Company

INTERACT Chemical Solutions

Headquarters

Karachi, Pakistan

App ID

com.interact.leatherchemos

At a Glance

Platform Capabilities

71
Chemicals in Database

240
Recipe Combinations

5
Solution Packages

6
Languages incl. RTL

📦

Android APK

6.4 MB bundled app. No server needed — all features work offline from the device.

🍎

iOS IPA

3.0 MB via Capacitor shell. Distributed through TestFlight or direct install.

🌐

Web PWA

Deployed at leathx.netlify.app. Install as a PWA from any modern browser.

Architecture

System Architecture

Single-file PWA wrapped in a Capacitor native shell, with offline-first data and optional cloud sync.

graph TB
    AND[Android WebView] --> UI[UI Layer: Vanilla HTML, CSS, JS]
    IOS[iOS WKWebView] --> UI
    UI --> AUTH[Auth Module - 8 Roles]
    UI --> CHEM[Chemical DB - 71 Items]
    UI --> REC[Recipe Engine - 240 Combos]
    UI --> INV[Invoice System]
    UI --> CRM[Client CRM]
    AUTH --> LS[localStorage - All Data]
    CHEM --> LS
    REC --> LS
    INV --> LS
    CRM --> LS
    LS --> IDB[IndexedDB - 5min Backups]
    LS --> EMSW[Service Worker v14]
    EMSW -.-> GS[Google Sheets Pricing]
    LS -.-> GD[Google Drive Backup]
    INV -.-> EJS[EmailJS]
    INV -.-> WA[WhatsApp Sharing]

    style AND fill:#1a3355,stroke:#3b82f6,color:#fff
    style IOS fill:#1a3355,stroke:#3b82f6,color:#fff
    style UI fill:#0D7377,stroke:#14919B,color:#fff
    style LS fill:#1f2937,stroke:#6b7280,color:#fff
    style IDB fill:#1f2937,stroke:#6b7280,color:#fff
    style GS fill:#1a2520,stroke:#22c55e,color:#fff
    style GD fill:#1a2520,stroke:#22c55e,color:#fff
    style EJS fill:#1a2520,stroke:#22c55e,color:#fff
    style WA fill:#1a2520,stroke:#22c55e,color:#fff

Authentication

User Login and Role-Based Access

flowchart TD
    A[Open App] --> B[Login Screen]
    B --> C[Select User Type]
    C --> D[Enter Credentials]
    D --> E{Auth Check}
    E -->|Direct Match| F[Simple Password]
    E -->|Hash Match| G[SHA-256 + Salt]
    F --> H{Valid?}
    G --> H
    H -->|Yes| I[Set Session]
    H -->|No| J[Show Error]
    J --> D
    I --> K[Load Dashboard]
    K --> L[Enforce Role Access]

    style A fill:#0D7377,stroke:#14919B,color:#fff
    style K fill:#0D7377,stroke:#14919B,color:#fff
    style J fill:#7f1d1d,stroke:#ef4444,color:#fff

8 User Roles

Role	Username	Password
Login credentials are provided by your system administrator

Auth Details

Dual auth: simple password match + SHA-256 hash with salt
Session stored in sessionStorage — clears on tab close
Login count and last-login timestamp tracked per user
Role enforcement hides sidebar items + restricts views

Navigation

Application Module Map

30+ sections organized into 7 functional groups, all accessible from the sidebar.

graph LR
    HOME[Dashboard] --> CAT[Catalog]
    HOME --> OPS[Operations]
    HOME --> COMM[Commercial]
    HOME --> GROWTH[Growth]
    HOME --> PROD[Production]
    HOME --> SAFE[Compliance]
    HOME --> ADM[Admin]

    CAT --> C1[Chemicals]
    CAT --> C2[Processes]
    CAT --> C3[Recipes]
    CAT --> C4[Solutions Hub]
    CAT --> C5[Services]

    OPS --> O1[Live Ops]
    OPS --> O2[Field Visits]
    OPS --> O3[HR and Payroll]

    COMM --> CM1[CRM]
    COMM --> CM2[Client Intel]
    COMM --> CM3[Order-to-Cash]
    COMM --> CM4[Procure-to-Pay]
    COMM --> CM5[Invoices]
    COMM --> CM6[Suppliers]
    COMM --> CM7[Financials]
    COMM --> CM8[Stock Flow]
    COMM --> CM9[Allocation]

    GROWTH --> G1[Marketing]
    GROWTH --> G2[Sales]
    GROWTH --> G3[Initiatives]
    GROWTH --> G4[Markets]

    PROD --> P1[Job Orders]
    PROD --> P2[Lab]
    PROD --> P3[Comms]

    SAFE --> S1[Safety]
    SAFE --> S2[Agreements]
    SAFE --> S3[Leather KB]
    SAFE --> S4[Labels]
    SAFE --> S5[Trace Journey]
    SAFE --> S6[Calculator]
    SAFE --> S7[Schema]

    style HOME fill:#0D7377,stroke:#14919B,color:#fff
    style CAT fill:#1a3355,stroke:#3b82f6,color:#fff
    style OPS fill:#1a3355,stroke:#3b82f6,color:#fff
    style COMM fill:#1a3355,stroke:#3b82f6,color:#fff
    style GROWTH fill:#1a3355,stroke:#3b82f6,color:#fff
    style PROD fill:#1a3355,stroke:#3b82f6,color:#fff
    style SAFE fill:#1a3355,stroke:#3b82f6,color:#fff
    style ADM fill:#1a3355,stroke:#3b82f6,color:#fff

Core Feature

Recipe Builder Flow

flowchart TD
    A[Open Recipe Builder] --> B[Select Leather Type]
    B --> B1[Bovine, Goat, Sheep, Buffalo, Exotic]
    B1 --> C[Select Finish]
    C --> C1[Aniline, Semi-Aniline, Pigmented, Nubuck, Suede, Patent]
    C1 --> D[Select End Product]
    D --> D1[Shoe, Garment, Upholstery, Bag, Belt, Glove, Jacket, Wallet]
    D1 --> E[Generate Recipe]
    E --> F[Show Chemicals + Quantities + Costs]
    F --> H{User Action}
    H -->|Adjust| I[Modify Quantities]
    I --> F
    H -->|Save| J[Save to localStorage]
    H -->|Export| K[Print or PDF]

    style A fill:#0D7377,stroke:#14919B,color:#fff
    style E fill:#be9a5f,stroke:#d4b87a,color:#000
    style J fill:#166534,stroke:#22c55e,color:#fff

Recipe Combinations5
Leather Types
x
6
Finishes
x
8
Products
=
240
Combinations

What Each Recipe Contains

Step-by-step process stages, beam house through finishing
Exact chemical names from the 71-chemical database
Quantities per 100 kg of raw hide
Per-stage and total cost calculations
Alternative chemical substitutions
References to Solutions Hub packages

Solutions Hub Packages

Chrome Tanning Veg Retanning Sheepskin Nappa Eco-Friendly Beam House

Core Feature

Invoice Creation and Sharing Flow

flowchart TD
    A[New Invoice] --> B[Select or Enter Client]
    B --> C{Client in CRM?}
    C -->|Yes| D[Auto-populate Details]
    C -->|No| E[Enter Manually]
    D --> F[Add Line Items]
    E --> F
    F --> G[Search Catalog or Type Manually]
    G --> H[Set Quantity + Price]
    H --> I{More Items?}
    I -->|Yes| G
    I -->|No| J[Review Totals + Discounts]
    J --> K[Save Invoice]
    K --> L[Stored in localStorage]
    L --> M{Share Method}
    M -->|WhatsApp| N[Open wa.me Link]
    M -->|Email| O[Send via EmailJS]
    M -->|Print| P[Browser Print Dialog]
    M -->|Edit| Q[Re-edit Invoice]
    Q --> L

    style A fill:#0D7377,stroke:#14919B,color:#fff
    style K fill:#be9a5f,stroke:#d4b87a,color:#000
    style N fill:#166534,stroke:#22c55e,color:#fff
    style O fill:#1e3a5f,stroke:#3b82f6,color:#fff
    style P fill:#3b1764,stroke:#a855f7,color:#fff

Invoice Step-by-Step

1. Select Client — pick from CRM or enter new
2. Add Line Items — from chemical catalog or manual entry
3. Review and Save — check totals, apply discounts
4. Share — WhatsApp, Email, or PDF

                Sharing Channels
                
                    WhatsAppOpens wa.me with pre-formatted invoice text
EmailEmailJS SDK — requires one-time setup, free 200/mo
Print/PDFBrowser print dialog — best results in Chrome

WhatsApp	Opens wa.me with pre-formatted invoice text
Email	EmailJS SDK — requires one-time setup, free 200/mo
Print/PDF	Browser print dialog — best results in Chrome

Data Layer

Offline-First Data Strategy

flowchart TD
    APP[App Runtime] -->|read and write| LS[localStorage]
    APP -->|every 5 min| IDB[IndexedDB Backup]
    APP -->|on page close| EM[Emergency Backup]
    SW[Service Worker v14] --> AC[Assets Cache]
    SW --> DC[Data Cache]
    SW -->|poll every 30 min| UP[Update Check]
    UP -->|new version found| BANNER[Gold Update Banner]
    DC -.->|sync when online| GS[Google Sheets]
    LS -.->|optional backup| GD[Google Drive]

    style APP fill:#0D7377,stroke:#14919B,color:#fff
    style LS fill:#1f2937,stroke:#6b7280,color:#fff
    style IDB fill:#1f2937,stroke:#6b7280,color:#fff
    style EM fill:#1f2937,stroke:#6b7280,color:#fff
    style SW fill:#0a2a2c,stroke:#0D7377,color:#fff
    style BANNER fill:#5c4a1e,stroke:#be9a5f,color:#fff
    style GS fill:#1a2520,stroke:#22c55e,color:#fff
    style GD fill:#1a2520,stroke:#22c55e,color:#fff

localStorage Keys

Key	Data
`lcos_chemicals`	Chemical catalog cache
`lcos_invoices`	Invoice records
`lcos_clients`	CRM contacts + history
`lcos_recipes`	Saved recipes
`lcos_samples`	Sample requests
`lcos_jobs`	Job orders
`lcos_visits`	Field visit logs
`lcos_cart`	Shopping cart state

                Service Worker Caching
                
                    RequestStrategy

                    HTML navigationNetwork-first
Google APIsNetwork-only
All other assetsCache-first

Request	Strategy
HTML navigation	Network-first
Google APIs	Network-only
All other assets	Cache-first

4 Backup Layers

Layer 1: localStorage — real-time persistence
Layer 2: IndexedDB — 5 timestamped snapshots every 5 min
Layer 3: Emergency write on page close
Layer 4: Google Drive cloud sync — optional

Deployment

Build and Deployment Pipeline

flowchart LR
    SRC[Source: index.html] --> WEB[Web Deploy]
    SRC --> CAP[Capacitor Sync]
    CAP --> ANDR[Android Build]
    CAP --> IOSB[iOS Build]
    ANDR --> APK[Debug APK - 6.4 MB]
    ANDR --> AAB[Release AAB - Play Store]
    IOSB --> IPA[IPA - 3.0 MB]
    IOSB --> STORE[App Store]
    WEB --> PWA[PWA on Netlify]

    style SRC fill:#0D7377,stroke:#14919B,color:#fff
    style APK fill:#166534,stroke:#22c55e,color:#fff
    style AAB fill:#166534,stroke:#22c55e,color:#fff
    style IPA fill:#1e3a5f,stroke:#3b82f6,color:#fff
    style STORE fill:#1e3a5f,stroke:#3b82f6,color:#fff
    style PWA fill:#5c4a1e,stroke:#be9a5f,color:#fff

Web

Deploy method	Drag web/ folder
URL	leathx.netlify.app
Server config	Nginx / .htaccess
Script	`deploy-hetzner.sh`

Android

Debug	`build-android.sh`
Release	`gradlew bundleRelease`
Min SDK	24 - Android 7.0
Target SDK	36

iOS

Build	`build-ios.sh` + Xcode
Distribute	Archive then App Store Connect
Package Mgr	Swift Package Manager
Scheme	HTTPS via WKWebView

Internationalization

6 Languages with RTL Support

Language Matrix

Code	Language	Direction	Status
EN	English	LTR	Primary
UR	Urdu	RTL	Full
AR	Arabic	RTL	Full
TR	Turkish	LTR	Full
CN	Chinese	LTR	Full
RU	Russian	LTR	Full

                RTL Behavior
                Urdu and Arabic switch document.dir to RTL
Entire UI layout mirrors: sidebar moves right, text aligns right
Language selector accessible from the sidebar menu
Selection persists in localStorage across sessions

            

flowchart TD
    A[User Selects Language] --> B{RTL Language?}
    B -->|UR or AR| C[Set dir to RTL]
    B -->|EN, TR, CN, RU| D[Set dir to LTR]
    C --> E[Mirror UI Layout]
    D --> F[Standard Layout]
    E --> G[Save to localStorage]
    F --> G
    G --> H[Reload All Visible Text]

    style A fill:#0D7377,stroke:#14919B,color:#fff
    style C fill:#5c4a1e,stroke:#be9a5f,color:#fff
    style D fill:#1e3a5f,stroke:#3b82f6,color:#fff

Integrations

External Services — All Optional

LeathX works fully offline. These services enhance functionality when connectivity is available.

📊

Google Sheets

Live pricing sync. Published sheet fetched when online; cached for offline use. Read-only — edits flow one way from Sheets to App.

Automatic

☁

Google Drive

Full data backup to user's Drive. Requires OAuth setup. Background sync triggers when device comes back online.

OAuth Required

✉

EmailJS

Send formatted invoices via email. Free tier: 200 emails/month. One-time setup: Service ID + Template ID + Public Key.

Setup Required

WhatsApp Sharing

Opens wa.me with pre-formatted invoice text. No API key needed — uses deep linking.

Google Fonts

Inter font loaded when online. Falls back to system-ui, -apple-system, sans-serif when offline.

Considerations

Known Limitations and Workarounds

Limitation	Impact	Workaround
Single-file architecture	All 21K lines in one HTML file	Use section comment headers to navigate
No multi-user sync	Data is device-specific via localStorage	Export JSON manually or use Google Drive backup
Sheets sync is read-only	App changes do not write back to Sheets	Update pricing in Google Sheets directly
No push notifications	No alerts for new orders or updates	Auto-update banner appears on app launch
Browser-based PDF	Quality depends on browser/device	Use Chrome for most consistent results
~5,000 invoice limit	localStorage degrades at 5-10 MB	Archive old invoices via JSON backup, then clear

📱

Cross-Platform

Android + iOS + Web — one codebase, zero server dependency.

🌍

6 Languages

EN, UR, AR, TR, CN, RU with full RTL support for Urdu and Arabic.

⚡

Offline-First

4-layer backup: localStorage, IndexedDB, emergency save, Google Drive.

Training

LeathX logins · INTERACT staff portal

The bundled PWA uses in-app usernames (not email). INTERACT corporate tools use the separate staff portal at app.interactpak.com.

LeathX kiosk users (PWA)

From LeathX-Desktop/README.txt — change before any shared demo device goes off-site.

Username	Password	Role
admin	Admin@123	Admin
sales	Sales@123	Sales Manager
lab	Lab@123	Lead Chemist
production	Prod@123	Production
purchase	Purch@123	Purchase
Also: finance / Finance@123, hr / HR@123, field_staff / Staff@123

Corporate staff (separate system)

Staff login	app.interactpak.com/staff/login
Emails	@interactpak.com roster in internal operator HTML
Doc path	`interactpak-nextjs/docs/INTERACT-Operator-Dashboards-and-Logins.html`

FleetOps (UAE) demo: admin@fleetops.ae / admin123 — see CGT operator page in repo.

LeathXLeather ChemicalTrading Platform