Platform Overview

INTERACT
ChemOps
Staff Operations Portal

A Capacitor-wrapped native shell that connects staff to the INTERACT Operations Portal — estimates, invoices, gate passes, instructions, followups, and recipes from a single mobile app.

v1.0.0 Remote Portal App Capacitor 8 Next.js 14 Backend Online-Required

Company

INTERACT Solutions

Headquarters

Karachi, Pakistan

App ID

com.interactpak.chemops

Portal

app.interactpak.com

At a Glance

Platform Capabilities

6
ChemOps OS Modules

3
Portal Modules

7
User Roles with RBAC

8hr
JWT Session Duration

📱

Android APK

4.0 MB native shell. Connects to live portal at app.interactpak.com for all operations.

🍎

iOS IPA

642 KB via Capacitor shell. Lightweight — all logic runs server-side on Next.js 14.

🌐

Web Portal

Full staff portal at app.interactpak.com. Hosted on Vercel, Frankfurt region, Neon PostgreSQL.

Architecture

System Architecture

Thin native shell that redirects to the live Next.js staff portal. All business logic and data live server-side.

graph TB
    AND[Android App - 4.0 MB] --> SHELL[HTML Shell - 107 lines]
    IOS[iOS App - 642 KB] --> SHELL
    SHELL --> CHECK{Online?}
    CHECK -->|Yes| PORTAL[Next.js 14 Portal]
    CHECK -->|No| OFFLINE[Offline Screen + Retry]
    OFFLINE -->|Reconnect| CHECK
    PORTAL --> AUTH[JWT Auth - HS256, 8hr]
    AUTH --> MODULES[ChemOps OS Modules]
    AUTH --> EXISTING[Portal Modules]
    MODULES --> PRISMA[Prisma ORM]
    EXISTING --> PRISMA
    PRISMA --> NEON[PostgreSQL on Neon]
    PORTAL --> VERCEL[Vercel - fra1 Region]

    style AND fill:#1a3355,stroke:#3b82f6,color:#fff
    style IOS fill:#1a3355,stroke:#3b82f6,color:#fff
    style SHELL fill:#12253f,stroke:#be9a5f,color:#fff
    style PORTAL fill:#12253f,stroke:#be9a5f,color:#fff
    style OFFLINE fill:#7f1d1d,stroke:#ef4444,color:#fff
    style NEON fill:#1a2520,stroke:#22c55e,color:#fff
    style VERCEL fill:#1a2520,stroke:#22c55e,color:#fff

User Flow

App Launch and Authentication

flowchart TD
    A[Open ChemOps App] --> B[Show Splash Screen - 2s]
    B --> C[Load HTML Shell]
    C --> D{Device Online?}
    D -->|Yes| E[Redirect to Portal]
    D -->|No| F[Show Offline Panel]
    F --> G[Show 9 Module Icons]
    G --> H[Retry Connection Button]
    H --> D
    E --> I[Staff Login Screen]
    I --> J[Enter Username + Password]
    J --> K{Credentials Valid?}
    K -->|Yes| L[Issue JWT Token - 8hr]
    K -->|No| M[Show Error]
    M --> J
    L --> N[Load Dashboard]
    N --> O[Quick Actions + KPIs]

    style A fill:#12253f,stroke:#be9a5f,color:#fff
    style N fill:#12253f,stroke:#be9a5f,color:#fff
    style F fill:#7f1d1d,stroke:#ef4444,color:#fff
    style M fill:#7f1d1d,stroke:#ef4444,color:#fff

Connectivity Check

Shell tests connectivity to app.interactpak.com on launch
1.5 second timeout before showing offline panel
Listens for browser online event for auto-reconnect
Only interactpak.com domains allowed in WebView

                Authentication
                JWT via Jose library, HS256 algorithm
8-hour token stored in httpOnly cookie
Middleware guards all staff routes
On logout: auto-generates session digest email

            

Offline Screen

Shows 9 module icons as visual reference: Estimates, Invoices, Gate Pass, Instructions, Followups, Recipes, CRM, Inquiries, Accounts. No data is accessible offline — informational only.

Core Modules

ChemOps OS — 6 Operational Modules

Sequential document codes with year-based prefix. Each module follows a create, submit, approve, share workflow.

graph LR
    DASH[Dashboard] --> EST[Estimates - EST-2026-xxx]
    DASH --> INV[Invoices - INV-2026-xxx]
    DASH --> GP[Gate Passes - GP-2026-xxx]
    DASH --> INST[Instructions - INST-2026-xxx]
    DASH --> FU[Followups]
    DASH --> REC[Recipes - 5 Solutions]
    EST -->|Convert| INV
    EST -->|Share| SHARE[Email + WhatsApp]
    INV -->|Share| SHARE
    GP -->|Approve| DONE[Completed]
    INST -->|Assign| STAFF[Staff Members]
    FU -->|Schedule| CALLS[Calls, Meetings, Visits]

    style DASH fill:#12253f,stroke:#be9a5f,color:#fff
    style EST fill:#1a3355,stroke:#3b82f6,color:#fff
    style INV fill:#1a3355,stroke:#3b82f6,color:#fff
    style GP fill:#1a3355,stroke:#3b82f6,color:#fff
    style INST fill:#1a3355,stroke:#3b82f6,color:#fff
    style FU fill:#1a3355,stroke:#3b82f6,color:#fff
    style REC fill:#1a3355,stroke:#3b82f6,color:#fff
    style SHARE fill:#1a2520,stroke:#22c55e,color:#fff

📋

Estimates

Itemized cost estimates with approval workflow. Sequential codes: EST-2026-001. Approved estimates convert directly to invoices.

🧾

Invoices

Generate from estimates or manually. Record partial and full payments. Share via Email or WhatsApp. Codes: INV-2026-001.

🚪

Gate Passes

Track goods in and out. Incoming and outgoing passes with approval flow and completion tracking. Codes: GP-2026-001.

📝

Instructions

Issue directives to sales, marketing, or production teams. Assign to specific staff and track completion. Codes: INST-2026-001.

📞

Followups

Schedule calls, meetings, and site visits. Assign to team members. Record outcomes and plan next actions.

🧪

Recipes

Reference library of 5 tannery solution formulations with chemical lists, process steps, and batch cost breakdowns.

Workflow

Document Lifecycle Flow

flowchart TD
    A[Create Document] --> B[Fill Line Items + Details]
    B --> C{Save or Submit?}
    C -->|Save| D[Draft Status]
    C -->|Submit| E[Pending Approval]
    D --> C
    E --> F{Approver Decision}
    F -->|Approve| G[Approved]
    F -->|Reject| H[Rejected + Notes]
    H --> B
    G --> I{Document Type?}
    I -->|Estimate| J{Convert to Invoice?}
    I -->|Invoice| K[Record Payments]
    I -->|Gate Pass| L[Mark Completed]
    J -->|Yes| M[Create Linked Invoice]
    J -->|No| N[Archive Estimate]
    G --> O{Share?}
    O -->|Email| P[Open mailto Link]
    O -->|WhatsApp| Q[Open wa.me Link]

    style A fill:#12253f,stroke:#be9a5f,color:#fff
    style G fill:#166534,stroke:#22c55e,color:#fff
    style H fill:#7f1d1d,stroke:#ef4444,color:#fff
    style M fill:#1e3a5f,stroke:#3b82f6,color:#fff

Document Codes

Module	Code Format
Estimates	`EST-2026-001`
Invoices	`INV-2026-001`
Gate Passes	`GP-2026-001`
Instructions	`INST-2026-001`

                Estimate to Invoice
                Approved estimates can be converted to invoices in one tap
Invoice is linked to source estimate via ID
Line items, quantities, and pricing carry over automatically

            

Sharing Options

Email: Opens device email client via mailto link with pre-filled content
WhatsApp: Opens wa.me with formatted document summary

Access Control

Role-Based Access Control

7 roles with granular permissions across all modules. Permission levels: Full, Edit, View, Approve.

flowchart TD
    LOGIN[Staff Login] --> RBAC{Role Check}
    RBAC -->|Admin| FULL[Full Access - All Modules]
    RBAC -->|Chemical Engineer| CE[Create + Approve Most Modules]
    RBAC -->|Manager| MGR[View + Approve + Full CRM]
    RBAC -->|Accounts| ACC[Edit Estimates + Full Accounts]
    RBAC -->|Merchandiser| MERCH[Edit Estimates + Followups]
    RBAC -->|Fabricator| FAB[Edit Gate Passes Only]
    RBAC -->|Office Staff| OS[Edit Followups Only]

    style LOGIN fill:#12253f,stroke:#be9a5f,color:#fff
    style FULL fill:#166534,stroke:#22c55e,color:#fff
    style CE fill:#1e3a5f,stroke:#3b82f6,color:#fff
    style MGR fill:#1e3a5f,stroke:#3b82f6,color:#fff

Permission Matrix

Role	Key Access
Admin	Full CRUD + Approve on all modules + Audit Trail
Chemical Engineer	Create + Approve estimates, invoices, gate passes, instructions
Manager	View + Approve most modules, Full CRM + Inquiries
Accounts	Edit + Approve estimates and invoices, Full Accounts
Merchandiser	Edit estimates and followups, View-only elsewhere
Fabricator	Edit gate passes, View-only elsewhere
Office Staff	Edit followups, View-only elsewhere

                Permission Levels
                Full: Create, read, update, delete, and approve
Edit: Create, read, and update
View: Read-only access
Approve: Submit approval decisions, accept or reject

            

Infrastructure

Backend Stack and Deployment

flowchart TD
    APP[ChemOps Mobile App] --> VERCEL[Vercel - fra1]
    VERCEL --> NEXT[Next.js 14 App Router]
    NEXT --> SSR[Server-Side Rendering]
    NEXT --> API[API Routes]
    API --> PRISMA[Prisma ORM]
    PRISMA --> NEON[PostgreSQL on Neon]
    API --> JWT[JWT Auth - Jose HS256]
    JWT --> COOKIE[httpOnly Cookie - 8hr TTL]
    NEXT --> REACT[React 18 UI]
    REACT --> RBAC[RBAC Middleware]

    style APP fill:#12253f,stroke:#be9a5f,color:#fff
    style VERCEL fill:#1a2520,stroke:#22c55e,color:#fff
    style NEON fill:#1a2520,stroke:#22c55e,color:#fff
    style NEXT fill:#1a3355,stroke:#3b82f6,color:#fff

Server-Side Stack

Component	Detail
Framework	Next.js 14, App Router
UI	React 18
ORM	Prisma
Database	PostgreSQL on Neon
Auth	JWT via Jose, HS256, 8hr tokens
Hosting	Vercel, fra1 region
Domain	app.interactpak.com

                Mobile Shell
                
                    ComponentDetail

                    Capacitor8.2.x Core, Android, iOS
PluginsSplash Screen 8.0, Status Bar 8.0
Shell Filewww/index.html, 107 lines
SW Cachechemops-v1, cache-first for shell
Android TargetSDK 34

Component	Detail
Capacitor	8.2.x Core, Android, iOS
Plugins	Splash Screen 8.0, Status Bar 8.0
Shell File	www/index.html, 107 lines
SW Cache	chemops-v1, cache-first for shell
Android Target	SDK 34

Security

Navigation restricted to *.interactpak.com only
Mixed content disabled on Android
WebView debugging disabled in production
HTTPS scheme enforced for Android and iOS

Full Module Map

Complete Module Overview

graph LR
    PORTAL[ChemOps Portal] --> OS[ChemOps OS]
    PORTAL --> EXISTING[Existing Modules]
    PORTAL --> DASH[Dashboard]
    OS --> EST[Estimates]
    OS --> INV[Invoices]
    OS --> GP[Gate Passes]
    OS --> INST[Instructions]
    OS --> FU[Followups]
    OS --> REC[Recipes]
    EXISTING --> CRM[CRM]
    EXISTING --> INQ[Inquiries]
    EXISTING --> ACC[Accounts]
    DASH --> KPI1[Pending Approvals]
    DASH --> KPI2[Active Instructions]
    DASH --> KPI3[Upcoming Followups]
    DASH --> KPI4[Outstanding Invoices]
    DASH --> QA[Quick Actions]

    style PORTAL fill:#12253f,stroke:#be9a5f,color:#fff
    style OS fill:#1a3355,stroke:#3b82f6,color:#fff
    style EXISTING fill:#1a3355,stroke:#3b82f6,color:#fff
    style DASH fill:#1a3355,stroke:#3b82f6,color:#fff

Existing Portal Modules

CRM	Contact and company management with interaction history
Inquiries	Quote pipeline with status workflow tracking
Accounts	Financial ledger

            Dashboard KPIs
            Pending Approvals — documents awaiting your decision
Active Instructions — open directives assigned to you
Upcoming Followups — scheduled calls, meetings, visits
Outstanding Invoices — unpaid invoice balances
Quick Actions — create estimate, invoice, or gate pass in one tap

        

Considerations

Known Limitations and Workarounds

Limitation	Impact	Workaround
Online-only	All operations require internet. No offline data.	Static offline screen with retry button; auto-reconnects
No push notifications	No alerts for approvals or new tasks	Open the app to check; dashboard shows pending counts
Email via mailto	Requires email client installed on device	Use WhatsApp sharing as alternative
No real-time sync	Changes by others need manual page refresh	Pull-to-refresh or navigate away and back
8hr session limit	JWT expires, requires re-login	Session digest email auto-sent on logout
Portrait only	Landscape orientation not supported	Designed for mobile-first portrait use
iOS unsigned	IPA needs Apple Developer account	Use Xcode for signing and TestFlight distribution

🏢

Server-Powered

All logic on Next.js 14 + PostgreSQL. App is a thin native shell — always up-to-date.

🔒

Secure

JWT auth, httpOnly cookies, HTTPS-only, domain-restricted WebView navigation.

💼

7 Roles

Granular RBAC: Admin, Chemical Engineer, Manager, Accounts, Merchandiser, Fabricator, Office Staff.

INTERACTChemOpsStaff Operations Portal