TONG TIN UI MAP

Colorful Flow Diagram & 12‑Slice Circular Rotation

Drop this file into any project as a starting point. All labels and colors are easy to edit in the SVG.

Flow Diagram (UX System Map)

Shows the journey from Start/HomeCreate/JoinCycleTrackingEnd.

START / HOME • Create group • Join existing • Active / Completed CREATE GROUP • Amount, frequency, cycle length • Rules: payout order, penalties • Invite members GROUP DASHBOARD • Members & payout queue • Schedule & countdown • Status & notifications JOIN GROUP • Enter code / link • Review rules • Confirm & see slot CYCLE (WEEK/MONTH) • Members pay contribution • Payout to turn holder • Receipts & alerts TRACKING & HISTORY • Payment logs • Received history • Exports (CSV/PDF) END OF CYCLE • Mark completed • Restart with same group • Final report
Primary flow Alternate join Create → Cycle Dash → Tracking Cycle → End

12‑Slice Circular Rotation

Each slice is a member (A → L). Change members or amounts in the script to regenerate.

Tip: edit names/amounts below and the circle will update instantly.

Built as a single HTML file (no dependencies). SVGs scale cleanly for export/print.