Prototype Overview
Premier Tissues B2B ERP/CRM Platform — Clickable HTML Prototype
30
Total ScreensComplete UI prototype coverage
10
Module CategoriesAuthentication, ERP, B2B, Production...
4
User RolesAdmin, Client, Operations, Sales/CRM
Business Context: Premier Tissues is a B2B tissue manufacturing company serving distributors, institutional buyers, hotels, retail chains, and export clients across 40+ countries. This prototype represents a fully integrated ERP + B2B commerce platform designed to manage the complete lifecycle of tissue manufacturing — from raw material procurement to global export delivery.
Prototype Entry Point: Open index.html to access the Prototype Hub. Every page has a floating ⚡ Prototype Hub button (bottom-right) that opens a full navigation menu to jump between any module instantly.
Navigation Injected: All 30 pages now have working navigation. ERP sidebar menu items, B2B header nav links, footer links, and major CTA buttons are all wired to their correct target pages.
Module Catalogue
All 30 screens — purpose, role, and file reference
🔐 Authentication
| Screen | File | Purpose | Role |
|---|---|---|---|
| Authentication Portal | premier_authentication_login_system.html | Role-based login. Admin, Client, Sales, Operations sign-in with secure authentication. Entry point for entire platform. | ALL |
📊 ERP Admin Core
| Screen | File | Purpose | Role |
|---|---|---|---|
| ERP Admin Dashboard | Admin Dashboard.html | Central operations hub. Displays revenue ($1.2M monthly), production capacity (82%), export shipments (38), active RFQs, and ERP KPIs. Has sidebar navigation to all modules. | ADMIN |
| Dark Mode ERP Panel | Dark Mode ERP Panel.html | Dark-themed alternate ERP panel. Identical operations view with dark UI for low-light or night shift use. Alternative admin interface. | ADMIN |
| ERP Navigation System | ERP Sidebar Navigation System.html | Full navigation architecture prototype. Demonstrates the centralized sidebar system with 18 module groups, search functionality, and badge counts. | ADMIN |
🌐 B2B Client Portal
| Screen | File | Purpose | Role |
|---|---|---|---|
| B2B Solutions Landing | b2b page.html | Public-facing enterprise landing page. Showcases manufacturing capabilities (25+ years, 40+ countries, 12M+ orders). Entry point for new enterprise buyers. Includes CTA to start bulk ordering. | CLIENT |
| Client Procurement Dashboard | Client Dashboard.html | Authenticated enterprise buyer dashboard. Shows active orders, subscription status, export logistics, invoice summary, procurement analytics. Account: PT-20481, Enterprise Plus tier. | CLIENT |
| Product Catalog | Product Listing Page.html | B2B product browsing with category filters (Facial Tissues, Napkins, Wipes, Kitchen Towels, Institutional). MOQ range slider. Grid/list view toggle. | CLIENT |
| Product Details | Product Details Page.html | Individual SKU page with full specifications, export certifications, MOQ requirements, pricing tiers, and bulk order request form. | CLIENT |
| Bulk Ordering | Bulk Ordering Page.html | Large-volume order configuration. SKU selection, quantity input, delivery schedule, enterprise pricing calculator, and shipment preferences. | CLIENT |
| Enterprise Checkout | Checkout Page.html | Multi-step checkout. Billing details, shipping address, payment terms (Net30/60/90/LC), order review, and confirmation. Designed for enterprise procurement. | CLIENT |
| Subscription Dashboard | Subscription Dashboard.html | Recurring B2B order management. Auto-replenishment schedules, subscription tier management, usage analytics, billing cycle tracking. | CLIENT |
| White Label Manufacturing | White Label Page.html | OEM/private label manufacturing portal. Custom branding configuration, packaging design upload, MOQ specification, and white-label agreement initiation. | CLIENT |
🏭 Production & Manufacturing
| Screen | File | Purpose | Role |
|---|---|---|---|
| Production Panel | Production Management Panel.html | Factory workflow control center. Monitor active production batches, machine utilization rates, quality control checkpoints, shift schedules, and batch completion tracking. | OPS |
| Manufacturing Calendar | Manufacturing Calendar Planner.html | Visual calendar-based production scheduler. Plan batch runs, schedule maintenance windows, align with export deadlines, and manage resource allocation across production lines. | OPS |
📋 Procurement & Vendor
| Screen | File | Purpose | Role |
|---|---|---|---|
| RFQ Management | RFQ Management Panel.html | Full RFQ pipeline. Inbound quote requests (16 active), pricing negotiation status, quote-to-order conversion funnel, and response timeline tracking. Primary sales tool. | SALES |
| Procurement Approvals | Procurement Approval Workflow.html | Multi-level procurement authorization. Routes purchase requests through department heads → Finance → Executive. Tracks approval status, rejections, and pending timelines. | ADMIN |
| AI Procurement Assistant | AI Procurement Assistant.html | AI-powered procurement intelligence. Smart vendor scoring, demand forecasting, cost optimization recommendations, and procurement risk analysis. | ADMIN |
| Vendor Management | Vendor Management Module.html | Supplier database and relationship management. Vendor profiles, performance scorecards, contract terms, payment history, compliance tracking, and vendor onboarding. | ADMIN |
📦 Inventory & Warehouse
| Screen | File | Purpose | Role |
|---|---|---|---|
| Inventory Management | Inventory Management Module.html | Real-time stock tracking. 42 active SKU movements, reorder threshold alerts, batch traceability (FIFO/LIFO), inventory valuation, and low-stock notifications. | OPS |
| Multi-Warehouse | Multi-Warehouse Management.html | Distributed warehouse operations across multiple locations. Zone-wise stock levels, inter-warehouse transfer management, warehouse-specific fulfillment queues. | OPS |
✈️ Export & Logistics
| Screen | File | Purpose | Role |
|---|---|---|---|
| Export Orders | Export Orders Page.html | International order management. 24 active shipments to 40+ countries. Destination tracking, incoterms management, container booking status, customs compliance, dispatch scheduling. | OPS |
| Export Documentation | Export Documentation Centre.html | Document repository for all export compliance papers: Commercial Invoice, Packing List, Bill of Lading, Certificate of Origin, Phytosanitary Certificate, Letter of Credit documents. | OPS |
| Shipment Tracking | Shipment Tracking Module.html | Real-time shipment status dashboard. Container movement tracking, port status updates, ETA calculations, carrier partner integration, and delivery milestone alerts. | ALL |
💰 Finance & Analytics
| Screen | File | Purpose | Role |
|---|---|---|---|
| Invoice Management | Invoice Management System.html | End-to-end invoice lifecycle. Create and send invoices, track payment status, generate aging reports, handle payment terms (Net30/60/90), produce PDF exports, and manage overdue follow-ups. | ADMIN |
| Analytics & Reports | Analytics & Reports Dashboard.html | Executive reporting and BI hub. Revenue trends, production KPIs, export performance charts, client acquisition analytics, and exportable report generation. | ADMIN |
💬 CRM & Communication
| Screen | File | Purpose | Role |
|---|---|---|---|
| Client Communication CRM | Client Communication Center.html | CRM inbox and account management. Thread-based client communication, enterprise account timelines, meeting scheduling, follow-up tracking, and 142 enterprise account management. | SALES |
| Notification Center | Notification Center.html | System-wide alert hub. 7 pending alerts covering order updates, procurement approvals, export dispatches, low-stock warnings, payment reminders, and client events. | ADMIN |
| Chat / Support Module | Support Module.html | Live chat and support ticketing. Internal team collaboration threads and client-facing support with conversation history, ticket assignment, and resolution tracking. | ALL |
🔒 Administration
| Screen | File | Purpose | Role |
|---|---|---|---|
| Roles & Permissions | Role & Permission Management.html | Granular RBAC (Role-Based Access Control). Define user roles, assign module-level permissions, configure approval hierarchies, and manage team access across the full ERP system. | ADMIN |
| Mobile Admin App | Mobile Responsive Admin App UI.html | Responsive mobile-first ERP interface. Full admin functionality optimized for smartphone and tablet field use. Same ERP data access on mobile form factor. | ADMIN |
Role Access Matrix
Which user roles can access which modules
| Module | 🛡️ Admin | 🏢 B2B Client | ⚙️ Operations | 📊 Sales/CRM |
|---|---|---|---|---|
| Authentication Portal | ✓ | ✓ | ✓ | ✓ |
| ERP Admin Dashboard | ✓ | – | – | – |
| Dark Mode ERP Panel | ✓ | – | – | – |
| B2B Landing Page | – | ✓ | – | ✓ |
| Client Dashboard | ✓ | ✓ | – | ✓ |
| Product Listing / Details | – | ✓ | – | ✓ |
| Bulk Ordering / Checkout | – | ✓ | – | – |
| Subscription Dashboard | ✓ | ✓ | – | ✓ |
| White Label Page | ✓ | ✓ | – | ✓ |
| Production Management | ✓ | – | ✓ | – |
| Manufacturing Calendar | ✓ | – | ✓ | – |
| RFQ Management | ✓ | – | – | ✓ |
| Procurement Approvals | ✓ | – | – | – |
| AI Procurement Assistant | ✓ | – | – | ✓ |
| Vendor Management | ✓ | – | ✓ | ✓ |
| Inventory Management | ✓ | – | ✓ | – |
| Multi-Warehouse | ✓ | – | ✓ | – |
| Export Orders | ✓ | ✓ | ✓ | – |
| Export Documentation | ✓ | ✓ | ✓ | – |
| Shipment Tracking | ✓ | ✓ | ✓ | ✓ |
| Invoice Management | ✓ | ✓ | – | – |
| Analytics & Reports | ✓ | – | ✓ | ✓ |
| Client Communication CRM | ✓ | – | – | ✓ |
| Notification Center | ✓ | – | ✓ | ✓ |
| Support Module | ✓ | ✓ | ✓ | ✓ |
| Role & Permission Mgmt | ✓ | – | – | – |
| Mobile Admin App | ✓ | – | ✓ | – |
User Flow Maps
End-to-end journeys through the platform — click any node to open that screen
🛒 Flow 1: B2B Bulk Order Journey (New Enterprise Buyer)
A new distributor discovers Premier Tissues, creates an account, browses products, and places a bulk order.
📋 Flow 2: RFQ → Production → Export (Internal ERP Flow)
Sales team receives an RFQ, gets procurement approved, triggers production, and dispatches export order.
🏷️ Flow 3: White Label Manufacturing (OEM Flow)
A hotel chain or retailer requests private-labeled tissue products with custom branding.
🛡️ Flow 4: Admin Daily Operations
Admin starts their day, reviews KPIs, approves pending items, and generates reports.
🔄 Flow 5: Subscription Auto-Replenishment
Enterprise client sets up recurring auto-delivery for institutional tissue supplies.
📊 Flow 6: Sales CRM — Quote to Order
Sales rep handles a client inquiry, generates a quotation, and converts it to an order.
System Architecture
Platform layers and their business functions
Premier Tissues operates a unified B2B manufacturing platform combining ERP (internal operations) and a B2B Commerce Portal (external buyer-facing). The system covers the full product lifecycle — from raw material procurement to international export delivery.
Authentication Layer
Role-based access control. Single login portal that routes users (Admin, Client, Sales, Operations) to their respective dashboards based on user type and permissions.
B2B Commerce Layer
Public-facing and authenticated buyer portal. Handles product discovery, bulk order placement, subscription management, white label requests, and client account operations.
Procurement Layer
End-to-end procurement management. RFQ processing, multi-level approval workflows, vendor management, and AI-powered procurement intelligence for cost optimization.
Production Layer
Factory operations management. Production batch scheduling, manufacturing calendar planning, quality control checkpoints, and machine utilization tracking.
Inventory & Warehouse Layer
Multi-location stock management. Real-time inventory tracking, multi-warehouse operations, inter-warehouse transfers, reorder alerts, and batch traceability.
Export & Logistics Layer
International trade management. Export order dispatch (40+ countries), full documentation centre (BoL, CoO, LC, Phytosanitary), and real-time shipment tracking.
Finance Layer
Complete financial operations. Invoice lifecycle management, payment terms (Net30/60/90/LC), aging reports, analytics dashboards, and revenue reporting.
CRM & Communication Layer
Client relationship management. Enterprise account CRM, RFQ-to-order pipeline, chat/support ticketing, notification center, and sales team collaboration.
Administration Layer
System governance. RBAC permission management, multi-level approval hierarchies, mobile-responsive admin access, and dark mode ERP interface.
UX Observations & Recommendations
Missing flows, broken UX, and suggested improvements
Strong Design System Consistency
All 30 pages use a consistent Inter font, primary color (#171a84), accent teal, and shadow system. The visual language is cohesive and professional across all modules.
Missing: Order Confirmation / Success Screen
After checkout, there is no dedicated order success/confirmation page. Users are left without feedback on order submission. Recommend adding an "Order Placed Successfully" screen with order number, estimated delivery, and next steps.
Missing: Settings / Profile Page
The ERP sidebar has a "Settings" menu item but no corresponding settings.html page exists. A system settings page (company profile, email config, integration settings, notification preferences) is needed.
Missing: 404 / Error Page
No error handling page exists. When users navigate to broken links, they see browser default errors. A branded 404 page with navigation back to hub is recommended.
Missing: Onboarding Flow for New Clients
There is no guided onboarding for new B2B clients after registration. A step-by-step "Complete Your Profile → Set Credit Terms → Browse Catalog" wizard would reduce drop-off.
Recommendation: Breadcrumb Navigation
ERP pages lack breadcrumb trails. Adding "Dashboard > Inventory > Warehouse A" breadcrumbs would significantly improve wayfinding within the multi-level ERP hierarchy.
Recommendation: Global Search
The ERP Sidebar Navigation has a search input but it's not functional in the prototype. A global search across orders, products, clients, and invoices would be a high-value addition.
Recommendation: Product → Quick Order Flow
From Product Details page, there's no direct "Add to Cart" or "Request Quote" button that's prominently wired. This conversion path (product browse → bulk order) needs stronger CTA visibility.
Recommendation: Mobile B2B Experience
The Mobile Admin App exists, but there's no mobile-optimized B2B client portal. Enterprise buyers increasingly use mobile for procurement. A mobile client dashboard is a gap.
Recommendation: Export Document Download Flow
Export Documentation Centre shows document types but the download/generate flow for individual documents (e.g., generate BoL for order #EX-2048) is not connected end-to-end from Export Orders → Documents.
AI Integration is a Differentiator
The AI Procurement Assistant is a strong differentiator for the platform. Recommend expanding AI features to include demand forecasting on the Inventory module and smart pricing on the RFQ panel.