# Section 1: Graphical representation of end product
```
Layer 1, Multi state card
===========================
┌──────────────────────────────────────────────────────────────────────────────┬─────────┬───┐ ┌────────────────────┐
│Goal │ A | CS │ │ │A => Add goal │
│ └─────────┘ │ │CS => Show in common│
├────────────────────────────────────────────────────────────────────────────────────────────┤ │screen │
│ │ └────────────────────┘
│ │ ┌──────────────────────┐│
│ ▲ │ │ Tree view of goals ││
│ │ │ └──────────────────────┘│
│ │ │ │ │
│ │ │ ├─── [*] Goal 1 │
│ │ Line charts of different │ │ │
│ Score │ goals where (rating,date) │ │ │
│ │ denotes different points of a │ ├─── [ ] Goal 2 │
│ │ chart. │ │ │
│ │ │ │ │
│ │ │ └─── [ ] Goal 3 │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────────────────────────────▶ │ │
│ │ │
│ Date │ │
│ │
│ │
└────────────────────────────────────────────────────────────────────────────────────────────┘
Layer 1, Current state card
=============================
┌──────────────────────────────┐
│ ┌──────────────────┐ │
│ │ ┌────────────┐ │ ┌─┴──────────────┐
▼ ▼ ▼ │ │ │A => Add goal │
┌──────────────────────────────────────────────────────────────┬────────────┬┬─┬─┬─┬─┬─┬───┐ │ │ │D => Discontinue│
│Goal │ A | D | CS ││ │ │ │ │ │◀──┼─┐ │ │ │list │
│ └────────────┘└─┘ └─┘ └─┘ │ │ │ │ │CS => Show in │
├──────────────────────────────────────────────────────────────────────────────────────────┤ │ │ │ │common screen │
│ │ │ │ │ └────────────────┘
│┌────────────────────────────────────────────────────────────────────────────────────────┐│ │ │ │
││Goal Score | Actions ││ │ │ └─────────┐
│└────────────────────────────────────────────────────────────────────────────────────────┘│ │ │ ┌───────┴────────┐
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐┌─┐ ┌─┐ ┌─┐ │ │ │ │Icon => Print │
│ Goal 1 35 │R│ │I│ │D│ │ │ │ │goal │
│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘└─┘ └─┘ └─┘ │ │ │ └────────────────┘
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐┌─┐ ┌─┐ ┌─┐ │ │ └───────────┐
│ Goal 2 50 │R│ │I│ │D│ │ │ ┌───────┴────────┐
│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘└─┘ └─┘ └─┘ │ │ │Icon => Save │
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐┌─┐ ┌─┐ ┌─┐┌─┐│ │ │goal as PDF │
│ Goal 3 │R│ │I│ │D││C││ │ └────────────────┘
│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘└─┘ └─┘ └─┘└─┘│ │
│ │ └───────────┐
│ │ ┌───────────┴──────────┐
└──────────────────────────────────────────────────────────────────────────────────────────┘ │Icon => Send goal in │
│an HDR to the patien │
┌───────────────────────────────────────────────────────────────┐ └──────────────────────┘
│Current state card body actions: │
│================================= │
│R => Rate/Score a goal │
│I => Info of the goal │
│D => Discontinue the goal │
│C => Change goal. It will be available till goal is not rated. │
│ │
└───────────────────────────────────────────────────────────────┘
Layer 2 Add Goal form
======================
┌──────────────────────────────────────────────────────────────────────────────────────────┐
│Add Goal │
│ │
├──────────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────┐ │
│ Description: * │ │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ Start date of goal: * │ │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ Score: │ │ │
│ └─────────────────────────────────┘ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
│ ┌──────┐ ┌───────────────┐ │
│ │ Save │ │ Add one more │ │
│ └──────┘ └───────────────┘ │
└──────────────────────────────────────────────────────────────────────────────────────────┘
Layer 2 Rate Goal form
======================
┌──────────────────────────────────────────────────────────────────────────────────────┐
│Rate Goal │
│ │
├──────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │
│ Description: * Goal 1 │
│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │
│ │
│ │
│ Score: * │
│ │
│ ──────────────□───────────────────────────────────────────────────── │
│ │
│ ┌──────┐ │
│ │ Save │ │
│ └──────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────────────┘
```
# Section 2: Feature to code relationship
| # | Feature | Client side state | Server side state | Component | Client side code | Server side code |
|---|---|---|---|---|---|---|
| 1 | Add goal | sql for table structure, sql for testdata | None |