Legend
── ▶ Navigation Flow
- - ▶ Conditional Flow
1 Entry & Overview
S1 · Landing / Hero
#001
Overview
Jan
Feb
Mac
Apr
+2
Sticky nav — always visible on scroll
S2 · Overview Tab
#002
Overview
Jan
Feb
Mac
Apr
Trend
Ops
Jualan Semasa vs Tahun Lepas
Status Capai Target
| Bagan Serai | Jan ✓ Feb ✓ Mac~ |
| Kuala Kangsar | Jan ✗ Feb ✓ Mac ✗ |
| Kamunting | Jan ✗ Feb ✗ Mac ✓ |
| +5 more rows… |
4 KPI cards auto-resize grid. Each metric pulls from monthly data.
Dual-bar: blue = Jan–Mac YTD. Green = full 2025 as reference baseline.
2 Monthly Tabs — Januari & Februari
S3 · Tab: Januari
#003
Overview
Jan
Feb
Mac
Apr
…
Meeting date stamp
Capai Target 2025
| Tambun | 5 bulan |
| Bagan Serai | 4 bulan |
| Selama | 3 bulan |
| +5… |
Action Tracker
●R 2
●A 4
●G 1
[ table rows — scrollable ]
Projek & Promosi
Guru Kemas
Pasir Salak
YB Linda
+5 more
Tab click triggers JS to hide all pages, show #qrp-jan
S3a · Action Tracker (expanded)
#003a
Action Tracker — Jan
● Kritikal 2
● D.Proses 4
● Selesai 1
| # |
Isu |
Owner |
Due |
Status |
Remarks |
| 1 |
E-invoice mula… |
Kak Wan |
Berterus |
D.Proses |
Train junior… |
| 2 |
Spek belum tun… |
Idham |
Segera |
Kritikal |
Perlu call… |
| +5 more rows… |
✏️ Clicking status pill cycles: Kritikal → D.Proses → Selesai
Pill click cycles RAG state. Selesai = strikethrough row text.
S4 · Tab: Februari
#004
Overview
Jan
Feb
Mac
Apr
…
Jualan Jan vs Target
| Bagan Serai | Capai ✓ |
| Kuala Kangsar | Tak capai |
| Kamunting | Tak capai |
| +4… |
Jadual Projek Feb
| 13 Feb | Projek sekolah KK |
| 17 Feb | ADTEC Kamunting |
| +5… |
Action Tracker
R 1
A 2
G 2
3 Monthly Tabs — Mac & April
S5 · Tab: Mac
#005
Overview
Jan
Feb
Mac
Apr
…
Jualan Feb — Ranking
| #1 Kuala Kangsar | Capai ✓ |
| #2 Projek | RM71K |
| #3 Kamunting | RM61K |
| +5… |
Projek Akan Datang
Eyesinar
MRSM
+8…
S6 · Tab: April
#006
Overview
Jan
Feb
Mac
Apr
…
Jualan Mac — Ranking
| #1 Kamunting | On Top |
| #2 Projek | RM51K |
| ⬇ Nibong Tebal | ↓↓ Merosot |
⚠ Alert: Nibong Tebal
2 staf berhenti serentak → crash RM4,768
Jadual Penyerahan Apr
| 3 Apr | YP Eyesinar 2026 |
| 12 Apr | Pasir Salak |
Red alert card appears when outlet has critical drop (Nibong Mac)
4 Analytics & Operations Tabs
S7 · Tab: Trend
#007
Trend Jualan Okt 25–Mac 26
Google Reviews — Horizontal Bar
TikTok Followers (2×4 grid)
Charts render only when Trend tab is first clicked (lazy load)
S8 · Tab: Operasi
#008
Perbelanjaan Tetap
| Mercedes SMS 246 | RM4,339/bln |
| Tesla VNW 1630 | RM2,663/bln |
| Jumlah HP | RM7,860/bln |
Baki Stok HQ
| Frame Pakej | 3,718 pcs |
| Casing | 2,476 pcs |
Fast Moving
Mission5
Bonia
5 Component State Reference
RAG Status Pill — 3 States
● Kritikal
● D.Proses
● Selesai
↩ cycles
Selesai → row text gets line-through + dimmed
Nav Tab — Active vs Default
Active = blue text + 2px underline bar at bottom.
Sticky at top — backdrop-filter blur.
Dual Bar — Label Colours
Track: #e8e8ed (semasa) / #d4f0db (lepas)
Filter Pill — Active vs Dimmed
● Kritikal 3
● D.Proses 2
● Selesai 1
Inactive = grey wash. Table rows filter accordingly.
📐 User Flow Summary
Entry
User lands on page → Hero visible → Nav loads sticky → Default tab = Overview
Overview
Sees 4 KPI cards → Dual bar chart → Target status table → Gets monthly snapshot
Monthly Tabs
Click Jan/Feb/Mac/Apr → Meeting context → Metrics → Rankings → Action Tracker → Projects
Analytics + Ops
Trend tab → charts lazy-render → Operasi tab → staff, fixed costs, stock status
8 screens · 4 flow stages · 23 action items tracked · 9 outlets
QAP D Optic Group · Jan–Apr 2026 · Wireflow v1.0