QSystem Mockups

Costing → Quotation Automation System

UI / UX Design Preview
Authentication
🔐
Screen 01
Login Page
Authentication screen with role-based access for Staff, Manager, and Admin.
All Roles
Core Screens
📊
Screen 02
Dashboard
Overview with KPIs, recent activities, pending approvals, and quick actions.
Staff Manager Admin
📋
Screen 03
Costing List
All costing files with search, filter by status/client/date, and bulk actions.
Staff Manager
✏️
Screen 04
Costing Form
Create / Edit costing with project details, line items, auto-calculations, and totals.
Staff
Screen 05
Approval Workflow
Review costing details, add comments, approve or reject with version history.
Manager
📄
Screen 06
Quotation Generation
Auto-generate quotation from approved costing with template selection and preview.
Staff
🖨️
Screen 07
PDF Preview & Export
Professional quotation PDF preview with export, filename auto-generation, and locked layout.
Staff
Administration
🎨
Screen 08
Template Management
Upload, edit, configure quotation templates, field mapping, logo, and footer settings.
Admin
🗂️
Screen 09
Document Storage
Search and browse all costing & quotation files by client, project, date, or status.
Staff Manager Admin
👥
Screen 10
User Management
Add/edit users, assign roles (Staff / Manager / Admin), and manage permissions.
Admin
🔍
Screen 11
Audit Trail
Complete log of all actions: creation, edits, approvals, rejections with timestamps.
Admin