VOCV2 UI Logic Map: Garden Dashboard

This document provides the logical mapping for the “Garden Progress” UI (Tiến độ khu vườn), translating visual metaphors into system data fields and formulas.

1. Visual Overview

Based on the provided design reference:

• Context: User Dashboard / Vocab Summary.
• Metaphor: “Khu vườn trí nhớ” (The Memory Garden).
• Core Metrics: Stage Distribution (Growth Cycle) & Health Status (Watering Needs).

---

2. Logic Mapping Table

A. The Growth Timeline (Stage Icons)

Visualizes the distribution of vocabulary across the 6 maturity levels.

UI Element	Icon Metaphor	System Definition (Level)	Data Source	Logic / Qualifying Condition
Stage 0	🌰 Seed (Hạt giống)	Level 0: Unseen	ItemLearner count	lastReviewedAt IS NULL (Note: Often not counted in “Garden” as they aren’t planted yet, unless representing “To-do”)
Stage 1	🌱 Germinated (Nảy mầm)	Level 1: Sprout	ItemLearner.max_stage	max_stage == 1 (Condition: Recently learned, F_peak < 30)
Stage 2	🌿 Seedling (Mầm non)	Level 2: Seedling	ItemLearner.max_stage	max_stage == 2 (Condition: F_peak >= 30)
Stage 3	🪴 Sapling (Cây non)	Level 3: Sapling	ItemLearner.max_stage	max_stage == 3 (Condition: F_peak >= Threshold)
Stage 4	🌳 Tree (Trưởng thành)	Level 4: Mature	ItemLearner.max_stage	max_stage == 4 (Condition: SuccessCount >= 3)
Stage 5	🌸 Flowering (Nở hoa)	Level 5: Flowering	ItemLearner.max_stage	max_stage == 5 (Condition: SuccessCount >= 5)

Note on “No Downgrade”: Use max_stage (highest achievement), NOT current F. A “Flowering Tree” (Lv5) stays at Lv5 even if it needs water.

---

B. Garden Health (Status Buckets)

Visualizes the real-time review urgency.

UI Component	Label (VN)	Meaning	Logic / Formula	Data Filter (Pseudo-SQL)
Health Stat	🌾 Cây tươi tốt (Lush/Healthy)	Safe State Words that are currently remembered well.	F_now >= Threshold	WHERE F >= threshold
Urgency Stat	🚿 Cây cần tưới (Thirsty/Needs Water)	Due for Review Words that have dropped below the safety level or withered.	F_now < Threshold	WHERE F < threshold AND F >= 30 (Strictly “Thirsty”) OR WHERE F < threshold (Aggregate Thirsty + Dead)

Implementation Note:

• Current Level in user request (“F < lv hiện tại”) technically translates to Target Threshold.
• Threshold varies by Skill (Speaking: 80, Writing: 75, Reading: 70).

---

3. Detailed Logic Definitions

Dynamic Thresholds

The “Watering Line” is not fixed at 50/100, but depends on the skill type of the plant:

function getThreshold(skill) {
  switch(skill) {
    case 'speaking': return 80; // Hardest to maintain
    case 'writing': return 75;
    default: return 70; // Reading/Listening
  }
}

State Classification Example

Consider a Level 5 (Flowering) word “Serendipity” (Skill: Reading, Threshold: 70).

• Scenario A (Good): F_now = 85.

  • Level: 5 (Flowering Icon).
  • Status: “Cây tươi tốt” (85 > 70).
  • Action: No review needed.

• Scenario B (Forgot): F_now = 65.

  • Level: 5 (Still displays Flowering Icon - it’s a big tree, just thirsty).
  • Status: “Cây cần tưới” (65 < 70).
  • Action: Appears in “Daily Review”.

• Scenario C (Long term neglect): F_now = 10 (Héo/Dead).

  • Level: 5 (A dead giant tree).
  • Status: Heavily “Cần tưới” (Urgent resurrection).
  • UI Treatment: Might show withered visual overlay on the Lv5 icon.

4. UI Rendering Summary

1. Icon Bar (Top): Render specific SVG icons based on the max_stage count.
2. Stats Bar (Bottom):
   • Yellow Box (Tươi tốt): Sum of items where F >= Threshold.
   • Outline Box (Cần tưới): Sum of items where F < Threshold.