📋

Prototype Overview

Premier Tissues B2B ERP/CRM Platform — Clickable HTML Prototype

30

Total Screens

Complete UI prototype coverage

10

Module Categories

Authentication, ERP, B2B, Production...

4

User Roles

Admin, 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

ScreenFilePurposeRole
Authentication Portalpremier_authentication_login_system.htmlRole-based login. Admin, Client, Sales, Operations sign-in with secure authentication. Entry point for entire platform.ALL

📊 ERP Admin Core

ScreenFilePurposeRole
ERP Admin DashboardAdmin Dashboard.htmlCentral 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 PanelDark Mode ERP Panel.htmlDark-themed alternate ERP panel. Identical operations view with dark UI for low-light or night shift use. Alternative admin interface.ADMIN
ERP Navigation SystemERP Sidebar Navigation System.htmlFull navigation architecture prototype. Demonstrates the centralized sidebar system with 18 module groups, search functionality, and badge counts.ADMIN

🌐 B2B Client Portal

ScreenFilePurposeRole
B2B Solutions Landingb2b page.htmlPublic-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 DashboardClient Dashboard.htmlAuthenticated enterprise buyer dashboard. Shows active orders, subscription status, export logistics, invoice summary, procurement analytics. Account: PT-20481, Enterprise Plus tier.CLIENT
Product CatalogProduct Listing Page.htmlB2B product browsing with category filters (Facial Tissues, Napkins, Wipes, Kitchen Towels, Institutional). MOQ range slider. Grid/list view toggle.CLIENT
Product DetailsProduct Details Page.htmlIndividual SKU page with full specifications, export certifications, MOQ requirements, pricing tiers, and bulk order request form.CLIENT
Bulk OrderingBulk Ordering Page.htmlLarge-volume order configuration. SKU selection, quantity input, delivery schedule, enterprise pricing calculator, and shipment preferences.CLIENT
Enterprise CheckoutCheckout Page.htmlMulti-step checkout. Billing details, shipping address, payment terms (Net30/60/90/LC), order review, and confirmation. Designed for enterprise procurement.CLIENT
Subscription DashboardSubscription Dashboard.htmlRecurring B2B order management. Auto-replenishment schedules, subscription tier management, usage analytics, billing cycle tracking.CLIENT
White Label ManufacturingWhite Label Page.htmlOEM/private label manufacturing portal. Custom branding configuration, packaging design upload, MOQ specification, and white-label agreement initiation.CLIENT

🏭 Production & Manufacturing

ScreenFilePurposeRole
Production PanelProduction Management Panel.htmlFactory workflow control center. Monitor active production batches, machine utilization rates, quality control checkpoints, shift schedules, and batch completion tracking.OPS
Manufacturing CalendarManufacturing Calendar Planner.htmlVisual calendar-based production scheduler. Plan batch runs, schedule maintenance windows, align with export deadlines, and manage resource allocation across production lines.OPS

📋 Procurement & Vendor

ScreenFilePurposeRole
RFQ ManagementRFQ Management Panel.htmlFull RFQ pipeline. Inbound quote requests (16 active), pricing negotiation status, quote-to-order conversion funnel, and response timeline tracking. Primary sales tool.SALES
Procurement ApprovalsProcurement Approval Workflow.htmlMulti-level procurement authorization. Routes purchase requests through department heads → Finance → Executive. Tracks approval status, rejections, and pending timelines.ADMIN
AI Procurement AssistantAI Procurement Assistant.htmlAI-powered procurement intelligence. Smart vendor scoring, demand forecasting, cost optimization recommendations, and procurement risk analysis.ADMIN
Vendor ManagementVendor Management Module.htmlSupplier database and relationship management. Vendor profiles, performance scorecards, contract terms, payment history, compliance tracking, and vendor onboarding.ADMIN

📦 Inventory & Warehouse

ScreenFilePurposeRole
Inventory ManagementInventory Management Module.htmlReal-time stock tracking. 42 active SKU movements, reorder threshold alerts, batch traceability (FIFO/LIFO), inventory valuation, and low-stock notifications.OPS
Multi-WarehouseMulti-Warehouse Management.htmlDistributed warehouse operations across multiple locations. Zone-wise stock levels, inter-warehouse transfer management, warehouse-specific fulfillment queues.OPS

✈️ Export & Logistics

ScreenFilePurposeRole
Export OrdersExport Orders Page.htmlInternational order management. 24 active shipments to 40+ countries. Destination tracking, incoterms management, container booking status, customs compliance, dispatch scheduling.OPS
Export DocumentationExport Documentation Centre.htmlDocument repository for all export compliance papers: Commercial Invoice, Packing List, Bill of Lading, Certificate of Origin, Phytosanitary Certificate, Letter of Credit documents.OPS
Shipment TrackingShipment Tracking Module.htmlReal-time shipment status dashboard. Container movement tracking, port status updates, ETA calculations, carrier partner integration, and delivery milestone alerts.ALL

💰 Finance & Analytics

ScreenFilePurposeRole
Invoice ManagementInvoice Management System.htmlEnd-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 & ReportsAnalytics & Reports Dashboard.htmlExecutive reporting and BI hub. Revenue trends, production KPIs, export performance charts, client acquisition analytics, and exportable report generation.ADMIN

💬 CRM & Communication

ScreenFilePurposeRole
Client Communication CRMClient Communication Center.htmlCRM inbox and account management. Thread-based client communication, enterprise account timelines, meeting scheduling, follow-up tracking, and 142 enterprise account management.SALES
Notification CenterNotification Center.htmlSystem-wide alert hub. 7 pending alerts covering order updates, procurement approvals, export dispatches, low-stock warnings, payment reminders, and client events.ADMIN
Chat / Support ModuleSupport Module.htmlLive chat and support ticketing. Internal team collaboration threads and client-facing support with conversation history, ticket assignment, and resolution tracking.ALL

🔒 Administration

ScreenFilePurposeRole
Roles & PermissionsRole & Permission Management.htmlGranular 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 AppMobile Responsive Admin App UI.htmlResponsive 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.