M002-UI-POLISH Mission Report

Date: 2026-03-04 PR: #436 (merged, squash) Branch: feat/m002-ui-polish Status: DEPLOYED & VERIFIED

Objective

Comprehensive UX upgrade for "Tiến trình thực hiện" tab and Workflow Detail page — golden ratio layout, accordion timeline, auto-position, scrollable containers, reorganized info cards, visual harmony.

Changes (7 improvements)

[1] Golden Ratio Layout

• Changed from lg:grid-cols-2 (50/50) to lg:grid-cols-[38fr_62fr]
• Left column (Trình tự table) ~38%, Right column (Timeline) ~62%
• Responsive: stacks vertically on mobile

[2] Scrollable Containers

• Both columns have overflow-y-auto with max-height: calc(100vh - 280px)
• Custom scrollbar styling (thin, semi-transparent, rounded)
• Sticky table header in left column
• Works with 1 step or 300+ steps

[3] Auto-Position Current Step

• On tab activation, auto-scrolls to current step at position 3 from top
• Uses data-step-index attributes and scrollIntoView({ block: 'start', behavior: 'smooth' })
• Target index: Math.max(0, currentIndex - 2) so 2 completed steps show above
• If no current step, stays at top
• Syncs both table and timeline columns

[4] Column Width Balance

• Same as [1] — golden ratio replaces rigid 50/50

[5] Info Cards Reorganization

• Before: 4 large cards (STT, Phiên bản, Công việc, Mã QT) taking prime real estate
• After: Title + Status badge + Category breadcrumb prominent in header
• Process code, version, sort → small inline badges with tooltips
• Task link → clickable badge Task #N
• Removed 4x card grid entirely — metadata now fits in 1 header line

[6] Accordion Timeline

• Each step is clickable → toggles expand/collapse
• Compact: Title + Actor label + chevron indicator
• Expanded: Description, Step type badge, Trigger in/out, Config key-values
• Smooth CSS transitions (max-h + opacity)
• Current step auto-expands on mount
• hasDetails() check — only shows chevron if step has expandable content

[7] Visual Harmony

• Status-based coloring: done (emerald), current (amber), pending (gray)
• Tab navigation: underline indicator instead of pill buttons
• Consistent font sizes (text-sm body, text-xs meta, text-xs labels)
• Transitions on all interactive elements (200ms ease)
• Table rows highlight based on step status

Files Modified (2)

File	Changes
components/modules/workflow-module/partials/StepsTimeline.vue	Accordion, expanded step details, status-based row styling, hasDetails() logic
pages/knowledge/workflows/[id].vue	Golden ratio grid, scrollable containers, info card reorganization, auto-position, tab underline, expanded data fetch

Data Fetch Changes

• Step fetch now includes: description, trigger_in_text, trigger_out_text, config (was only id/title/actor/step_type/sort_order)
• Same endpoint, same collection — just additional fields for accordion content

Production Verification

Check	Result
/knowledge/workflows/1 → 200	PASS
/knowledge/workflows/1?tab=diagram → 200	PASS
Golden ratio class 38fr_62fr in HTML	PASS
scrollbar-thin class present	PASS
data-step-index attributes present	PASS
"Tiến trình thực hiện" in HTML	PASS
No "BPMN" in HTML	PASS