# UX005 — Timeline Form Walkthrough
**Sprint:** UX005  
**Files modified:** `app/views/timeline/create_task.php` · `app/views/timeline/edit_task.php`  
**Date:** July 2026  
**Status:** Complete ✅

---

## Files Modified

| File | Change Type |
|---|---|
| `app/views/timeline/create_task.php` | Full rewrite of view layer |
| `app/views/timeline/edit_task.php` | Full rewrite of view layer |

No backend files modified. No controllers, models, routes, or database changes.

---

## Backend Compatibility Strategy

Several fields were removed from the **visible** form. To preserve backend compatibility without any controller changes, these fields are submitted as `<input type="hidden">` elements:

| Field | Approach |
|---|---|
| `phase_id` | Auto-selected hidden field if only 1 phase; simplified dropdown if multiple |
| `owner` | Hidden field — empty on create; preserves existing value on edit |
| `estimated_duration` | Hidden field — empty on create; preserves existing value on edit |
| `notes` | Hidden field — empty on create; preserves existing value on edit |

The controller receives all expected POST fields. No validation errors will occur. No data is lost.

---

## Change 1 — Page header redesigned (both forms)

### Before (create)
```html
<div class="... border-b border-slate-100 pb-5">
    <div class="flex items-center gap-2 text-xs font-bold text-indigo-600 uppercase tracking-wider mb-1.5">
        <a href=".../timeline">Timeline Planner</a> / <a href=".../tasks">Tasks</a> / <span>Add</span>
    </div>
    <h1 class="text-2xl font-bold ...">
        <i class="fa-solid fa-list-check text-indigo-500"></i> Add Checklist Task
    </h1>
    <p class="text-sm text-slate-500 mt-1">Schedule a wedding preparation task under a planning phase.</p>
    ...
    <a href=".../tasks" class="btn bg-white ...">
        <i class="fa-solid fa-arrow-left"></i> Cancel
    </a>
</div>
```

### After (create)
```html
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <div>
        <div class="flex items-center gap-2 text-xs font-semibold text-indigo-500 mb-1.5">
            <a href=".../timeline">Wedding Schedule</a> / <span>Add to Schedule</span>
        </div>
        <h1 class="text-2xl font-black ...">
            <span class="inline-flex items-center justify-center w-9 h-9 bg-indigo-50 rounded-2xl">
                <i class="fa-solid fa-calendar-plus text-indigo-500 text-base"></i>
            </span>
            Add to Schedule
        </h1>
        <p class="text-sm text-slate-500 mt-1.5 ml-0.5">Add an event, meeting, payment, or reminder to your wedding schedule.</p>
    </div>
    <a href=".../timeline" class="... border border-slate-200 bg-white ...">
        <i class="fa-solid fa-arrow-left ..."></i> Back
    </a>
</div>
```

**Changes (create):**
- h1: "Add Checklist Task" → "Add to Schedule"
- `font-bold` → `font-black`
- Icon: `fa-list-check` → `fa-calendar-plus` in rounded square
- Breadcrumb: "Timeline Planner / Tasks / Add" → "Wedding Schedule / Add to Schedule"
- Breadcrumb style: `font-bold uppercase tracking-wider` → `font-semibold` (no all-caps)
- Subtitle rewritten
- Header separator removed
- Header button: "Cancel" → "Back"
- Header button: links to `/timeline` (dashboard) not `/timeline/tasks` (task list)

**Changes (edit):**
- h1: "Edit Checklist Task" → "Edit Schedule Item"
- Icon: `fa-pen-to-square` → `fa-calendar-pen`
- Breadcrumb: "Timeline Planner / Tasks / {title} / Edit" → "Wedding Schedule / {title}"
- Same structural changes as create

---

## Change 2 — Field: "Task Title" → "What is it?"

### Before
```html
<label for="title" class="form-label">Task Title <span class="text-rose-500">*</span></label>
<input ... placeholder="e.g. Schedule food tasting session" class="form-input pl-9">
<!-- prefix icon: fa-pencil -->
```

### After
```html
<label for="title" class="text-sm font-bold text-slate-700 block">
    What is it? <span class="text-rose-500">*</span>
</label>
<input ... placeholder="e.g. Food Tasting, Venue Payment, Dress Fitting…" class="form-input text-sm w-full">
<!-- prefix icon removed — cleaner input -->
```

Changes:
- Label: "Task Title" → "What is it?"
- Placeholder: "e.g. Schedule food tasting session" → "e.g. Food Tasting, Venue Payment, Dress Fitting…" (lists real wedding examples)
- Prefix pencil icon removed (decorative, adds no value)
- Label class: `form-label` → explicit `text-sm font-bold text-slate-700`
- Input class: `form-input pl-9` → `form-input text-sm w-full`

---

## Change 3 — Field: "Due Date" → "When?"

### Before
```html
<label for="due_date" class="form-label">Due Date <span class="text-slate-400 text-xxs font-normal uppercase ml-1">Optional</span></label>
<input type="date" ... class="form-input">
```

### After
```html
<label for="due_date" class="text-sm font-bold text-slate-700 block">When?</label>
<input type="date" ... class="form-input text-sm w-full">
```

Changes:
- Label: "Due Date" → "When?"
- "Optional" badge removed from label (date is the most natural field — marking it "optional" creates hesitation)
- Input: `text-sm` added explicitly

---

## Change 4 — Field: "Task Category" → "Type"

### Before
```html
<label for="category" class="form-label">Task Category <span class="text-rose-500">*</span></label>
<select id="category" name="category" class="form-select" required>
    <option value="">-- Choose Category --</option>
    ...
</select>
```

### After
```html
<label for="category" class="text-sm font-bold text-slate-700 block">Type <span class="text-rose-500">*</span></label>
<select id="category" name="category" class="form-select text-sm w-full" required>
    <option value="">-- Select type --</option>
    ...
</select>
```

Changes:
- Label: "Task Category" → "Type"
- Placeholder option: "-- Choose Category --" → "-- Select type --"
- Select: `text-sm` added explicitly

---

## Change 5 — Field: "Planning Period Phase" — visibility logic

### Before
```html
<!-- Always visible, always required -->
<label for="phase_id" class="form-label">Planning Period Phase <span class="text-rose-500">*</span></label>
<select id="phase_id" name="phase_id" class="form-select" required>
    <option value="">-- Choose Phase --</option>
    <?php foreach ($phases as $ph): ?>
        <option ...><?= $ph['name'] ?></option>
    <?php endforeach; ?>
</select>
```

### After
```html
<?php if (!empty($phases)): ?>
    <?php if (count($phases) > 1): ?>
        <!-- Multiple phases: show simplified dropdown -->
        <label for="phase_id" class="text-sm font-bold text-slate-700 block">Planning Period</label>
        <select id="phase_id" name="phase_id" class="form-select text-sm w-full" required>
            <option value="">-- Select period --</option>
            ...
        </select>
    <?php else: ?>
        <!-- Only one phase: pass silently -->
        <input type="hidden" name="phase_id" value="<?= (int)$phases[0]['id'] ?>">
    <?php endif; ?>
<?php endif; ?>
```

Changes:
- **If 1 phase:** passes as hidden field. Couple never sees it.
- **If multiple phases:** shows a dropdown labelled "Planning Period" (not "Planning Period Phase")
- Label: "Planning Period Phase" → "Planning Period"
- Placeholder: "-- Choose Phase --" → "-- Select period --"

---

## Change 6 — Field: "Priority Level" → "Importance"

### Before
```html
<label for="priority" class="form-label">Priority Level</label>
<select ...>
    <option value="Low">Low</option>
    <option value="Normal" selected>Normal</option>
    <option value="High">High</option>
    <option value="Critical">Critical</option>
</select>
```

### After
```html
<label for="priority" class="text-sm font-bold text-slate-700 block">Importance</label>
<select ...>
    <option value="Low">Low</option>
    <option value="Normal" selected>Normal</option>
    <option value="High">High</option>
    <option value="Critical">Urgent</option>  <!-- backend value unchanged -->
</select>
```

Changes:
- Label: "Priority Level" → "Importance"
- Option display: "Critical" → "Urgent" (backend value `Critical` preserved — no backend change)

---

## Change 7 — Field: "Task Status" — option vocabulary

### Before
```html
<label for="status" class="form-label">Task Status</label>
<select ...>
    <option value="Not Started">Not Started</option>
    <option value="In Progress">In Progress</option>
    <option value="Waiting">Waiting (Blocked / Third-Party)</option>
    <option value="Completed">Completed</option>
    <option value="Cancelled">Cancelled</option>
</select>
```

### After
```html
<label for="status" class="text-sm font-bold text-slate-700 block">Status</label>
<select ...>
    <option value="Not Started">Not Started</option>
    <option value="In Progress">In Progress</option>
    <option value="Waiting">Waiting</option>  <!-- simplified -->
    <option value="Completed">Completed</option>
    <option value="Cancelled">Cancelled</option>
</select>
```

Changes:
- Label: "Task Status" → "Status"
- "Waiting (Blocked / Third-Party)" → "Waiting" (backend value `Waiting` preserved)

---

## Change 8 — Fields removed from visible form

### Owner field — removed from visible UI

### Before
```html
<label for="owner" class="form-label">Task Owner / Assignee <span class="...">Optional</span></label>
<div class="relative">
    <span class="absolute left-3 top-2.5 ..."><i class="fa-solid fa-user"></i></span>
    <input type="text" id="owner" name="owner" placeholder="e.g. Groom / Bride / WO Organizer" class="form-input pl-9">
</div>
```

### After
```html
<!-- In create -->
<input type="hidden" name="owner" value="<?= escape_html($old['owner'] ?? '') ?>">
<!-- In edit -->
<input type="hidden" name="owner" value="<?= escape_html($old['owner'] ?? $task['owner'] ?? '') ?>">
```

---

### Estimated Duration field — removed from visible UI

### Before
```html
<label for="estimated_duration" class="form-label">Estimated Preparation Duration <span class="...">Optional</span></label>
<div class="relative">
    <span class="absolute left-3 top-2.5 text-slate-400 text-xs font-bold">Days</span>
    <input type="number" min="1" id="estimated_duration" name="estimated_duration" class="form-input pl-14" placeholder="e.g. 7">
</div>
```

### After
```html
<!-- In create -->
<input type="hidden" name="estimated_duration" value="">
<!-- In edit — preserves existing value -->
<input type="hidden" name="estimated_duration" value="<?= escape_html($old['estimated_duration'] ?? $task['estimated_duration'] ?? '') ?>">
```

---

### "Special Notes / Terms" — merged with Description, passed hidden

The separate `notes` field was merged into the single "Notes" textarea (`name="description"`). The `notes` POST field is passed as a hidden input to avoid backend errors:

```html
<!-- In create -->
<input type="hidden" name="notes" value="<?= escape_html($old['notes'] ?? '') ?>">
<!-- In edit — preserves existing notes value -->
<input type="hidden" name="notes" value="<?= escape_html($old['notes'] ?? $task['notes'] ?? '') ?>">
```

---

## Change 9 — Notes field: two textareas → one

### Before
```html
<!-- Textarea 1 -->
<label for="description" class="form-label">Task Details Description <span class="...">Optional</span></label>
<textarea name="description" placeholder="Specify instructions, requirements, deliverables, etc." rows="2"></textarea>

<!-- Textarea 2 -->
<label for="notes" class="form-label">Special Notes / Terms <span class="...">Optional</span></label>
<textarea name="notes" placeholder="Enter custom specs or notes..." rows="2"></textarea>
```

### After
```html
<!-- Single textarea -->
<label for="description" class="text-sm font-bold text-slate-700 block">
    Notes <span class="text-slate-400 text-xs font-normal ml-1">Optional</span>
</label>
<textarea id="description" name="description"
          placeholder="Any details, reminders, or instructions…"
          class="form-textarea text-sm w-full" rows="3">
</textarea>
```

Changes:
- Two textareas → one `name="description"`
- Label: "Task Details Description" → "Notes"
- Placeholder rewritten: removed "deliverables, requirements" → "Any details, reminders, or instructions…"
- `rows="2"` → `rows="3"` (slightly taller — easier to type in)

---

## Change 10 — Reminder section redesigned

### Before
```html
<!-- Toggle -->
<label class="flex items-center gap-2 cursor-pointer">
    <input type="checkbox" name="reminder_enabled" value="1" x-model="reminderEnabled" class="rounded ... w-4.5 h-4.5">
    <span class="text-xs font-bold text-slate-700">Enable Timeline Reminder Notification</span>
</label>

<!-- Conditional: Reminder Date -->
<div x-show="reminderEnabled" style="display: none;">
    <label for="reminder_date" class="form-label">Reminder Alert Date <span class="text-rose-500">*</span></label>
    <input type="date" name="reminder_date" ...>
</div>

<!-- Conditional: Reminder Notes (textarea) -->
<div x-show="reminderEnabled" style="display: none;">
    <label for="reminder_notes" class="form-label">Reminder Notification Details <span class="...">Optional</span></label>
    <textarea name="reminder_notes" placeholder="Alert instructions..." rows="2"></textarea>
</div>
```

### After
```html
<!-- Toggle -->
<label class="flex items-center gap-2.5 cursor-pointer group">
    <input type="checkbox" name="reminder_enabled" value="1" x-model="reminderEnabled" class="w-4 h-4 rounded text-indigo-600 ...">
    <span class="text-sm font-semibold text-slate-700 group-hover:text-slate-900 transition-colors">
        Remind me about this
    </span>
</label>

<!-- Conditional: Date + Note in 2-col grid -->
<div x-show="reminderEnabled" x-transition class="grid grid-cols-1 sm:grid-cols-2 gap-4" style="display: none;">
    <div>
        <label for="reminder_date" class="text-sm font-bold text-slate-700 block">Remind me on <span class="text-rose-500">*</span></label>
        <input type="date" name="reminder_date" class="form-input text-sm w-full" :required="reminderEnabled">
    </div>
    <div>
        <label for="reminder_notes" class="text-sm font-bold text-slate-700 block">Reminder note <span class="...">Optional</span></label>
        <input type="text" name="reminder_notes" placeholder="e.g. Call venue to confirm" class="form-input text-sm w-full">
    </div>
</div>
```

Changes:
- Toggle label: "Enable Timeline Reminder Notification" → "Remind me about this"
- Toggle: `w-4.5 h-4.5` → `w-4 h-4` (standard size)
- `group-hover` transition on label text for subtle interactivity
- Reminder Date label: "Reminder Alert Date" → "Remind me on"
- Reminder Notes: `<textarea rows="2">` → `<input type="text">` (reminder notes are always short)
- Reminder Notes label: "Reminder Notification Details" → "Reminder note"
- Reminder Notes placeholder: "Alert instructions..." → "e.g. Call venue to confirm"
- The two reminder fields now sit in a 2-column grid (side by side on sm+)
- `x-transition` added to the reveal container

---

## Change 11 — Submit buttons redesigned (both forms)

### Before (create)
```html
<div class="flex justify-end gap-2 border-t border-slate-100 pt-5 mt-4">
    <a href=".../tasks" class="btn bg-slate-50 ... text-xs">Cancel</a>
    <button type="submit" class="btn btn-primary ... text-xs flex items-center gap-1.5">
        <i class="fa-solid fa-floppy-disk"></i> Save Task
    </button>
</div>
```

### After (create)
```html
<div class="flex items-center justify-between pt-2 border-t border-slate-100">
    <a href=".../timeline" class="text-xs text-slate-400 hover:text-slate-600 font-medium transition-colors">
        ← Cancel and go back
    </a>
    <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-xl shadow-sm transition-all">
        Add to Schedule
    </button>
</div>
```

Changes:
- "Cancel" styled button → plain text link "← Cancel and go back"
- Save label (create): "Save Task" → **"Add to Schedule"**
- Save label (edit): "Update Task" → **"Save Changes"**
- Floppy-disk icon removed
- Save button: `btn btn-primary text-xs` → explicit `bg-indigo-600 text-sm font-bold`
- Layout: `justify-end` → `justify-between` (cancel left, save right)
- Both Cancel links now point to `/timeline` (dashboard) not `/timeline/tasks`

---

## Verification

### PHP Syntax
```
> C:\xampp\php\php.exe -l app/views/timeline/create_task.php
No syntax errors detected in app/views/timeline/create_task.php

> C:\xampp\php\php.exe -l app/views/timeline/edit_task.php
No syntax errors detected in app/views/timeline/edit_task.php
```
✅ **PASS (both files)**

### Responsive Layout
| Breakpoint | Title field | Date/Type row | Priority/Status row | Reminder row |
|---|---|---|---|---|
| Mobile (< sm) | Full width | Stacked (1 col) | Stacked (1 col) | Stacked (1 col) |
| Tablet (sm+) | Full width | Side by side (2 col) | Side by side (2 col) | Side by side (2 col) |
| Desktop | max-w-2xl card | 2 col | 2 col | 2 col |

Grid: `grid-cols-1 sm:grid-cols-2` throughout.

### Field Audit — Final State

| Field | Visible? | Name | Label | Required? |
|---|---|---|---|---|
| Title | ✅ Yes | `title` | "What is it?" | ✅ |
| Date | ✅ Yes | `due_date` | "When?" | No |
| Type | ✅ Yes | `category` | "Type" | ✅ |
| Phase | Conditional | `phase_id` | "Planning Period" | ✅ (if multiple) |
| Importance | ✅ Yes | `priority` | "Importance" | No |
| Status | ✅ Yes | `status` | "Status" | No |
| Notes | ✅ Yes | `description` | "Notes" | No |
| Owner | ❌ Hidden | `owner` | — | No |
| Duration | ❌ Hidden | `estimated_duration` | — | No |
| Notes (old) | ❌ Hidden | `notes` | — | No |
| Reminder toggle | ✅ Yes | `reminder_enabled` | "Remind me about this" | No |
| Reminder date | Conditional | `reminder_date` | "Remind me on" | If reminder enabled |
| Reminder note | Conditional | `reminder_notes` | "Reminder note" | No |

### Button Audit — Final State
| Location | Button | Style | Assessment |
|---|---|---|---|
| Header | Back | Secondary border | ✅ |
| Form footer (left) | ← Cancel and go back | Plain text slate-400 | ✅ |
| Form footer (right) | Add to Schedule / Save Changes | Primary indigo `text-sm` | ✅ |

### Scope Check
| File | Modified? |
|---|---|
| `app/views/timeline/create_task.php` | ✅ Yes |
| `app/views/timeline/edit_task.php` | ✅ Yes |
| `app/views/timeline/dashboard.php` | ❌ Not touched |
| `app/views/timeline/tasks.php` | ❌ Not touched |
| `app/views/timeline/milestones.php` | ❌ Not touched |
| `app/views/budget/*.php` | ❌ Not touched |
| Any controller / model / route | ❌ Not touched |

---

## Summary of All Changes

| # | What Changed | File | Why |
|---|---|---|---|
| 1 | h1: "Add Checklist Task" → "Add to Schedule" | create | Calendar-event vocabulary |
| 2 | h1: "Edit Checklist Task" → "Edit Schedule Item" | edit | Calendar-event vocabulary |
| 3 | Icon: `fa-list-check` → `fa-calendar-plus` | create | Calendar metaphor |
| 4 | Icon: `fa-pen-to-square` → `fa-calendar-pen` | edit | Calendar metaphor |
| 5 | Header separator removed | both | Consistent with UX001–004 |
| 6 | Breadcrumb simplified | both | 2 levels (not 4) |
| 7 | Subtitles rewritten | both | Human, not administrative |
| 8 | "Cancel" → "Back" (header) | both | Navigation vs. form action |
| 9 | Title label: "Task Title" → "What is it?" | both | Natural question |
| 10 | Title placeholder: real wedding examples | both | Context for new users |
| 11 | Title prefix icon removed | both | Cleaner input |
| 12 | Date label: "Due Date" → "When?" | both | Natural question |
| 13 | Category label: "Task Category" → "Type" | both | Shorter, simpler |
| 14 | Category placeholder: "-- Choose Category --" → "-- Select type --" | both | Natural |
| 15 | Phase: auto-hidden when only 1 phase | both | Removes #1 friction blocker |
| 16 | Phase label: "Planning Period Phase" → "Planning Period" | both | Removes "Phase" vocabulary |
| 17 | Priority label: "Priority Level" → "Importance" | both | Warmer vocabulary |
| 18 | "Critical" option display: → "Urgent" | both | Less alarming |
| 19 | Status label: "Task Status" → "Status" | both | Removes "Task" prefix |
| 20 | "Waiting (Blocked / Third-Party)" → "Waiting" | both | Removes engineering vocabulary |
| 21 | Owner field removed from visible UI | both | PM vocabulary, rarely used |
| 22 | Estimated Duration removed from visible UI | both | PM vocabulary, never used by couples |
| 23 | Two textareas merged into one "Notes" | both | Eliminates redundant field |
| 24 | Notes label: "Task Details Description" → "Notes" | both | Simple |
| 25 | Notes placeholder rewritten | both | Removes "deliverables" vocabulary |
| 26 | Reminder toggle: "Enable Timeline Reminder Notification" → "Remind me about this" | both | Personal, natural |
| 27 | Reminder Date label: "Reminder Alert Date" → "Remind me on" | both | Natural question |
| 28 | Reminder Notes: textarea → text input | both | Reminder notes are short strings |
| 29 | Reminder Notes label: "Reminder Notification Details" → "Reminder note" | both | Simple |
| 30 | Reminder Notes placeholder: real example | both | Context for new users |
| 31 | Reminder fields: side-by-side 2-col grid | both | Better use of space |
| 32 | Submit (create): "Save Task" → "Add to Schedule" | create | Matches page title |
| 33 | Submit (edit): "Update Task" → "Save Changes" | edit | Universal, simple |
| 34 | Floppy-disk icon removed from submit | both | Consistent with UX003 |
| 35 | Cancel: styled button → plain text link | both | Consistent with UX003 |
| 36 | Layout: `justify-end` → `justify-between` | both | Cancel left, Save right |
| 37 | Cancel links to `/timeline` (dashboard) | both | Correct primary navigation destination |
| 38 | All labels: `form-label` → explicit `text-sm font-bold text-slate-700` | both | Readable, consistent with UX001–004 |
| 39 | All inputs/selects: `text-sm` added | both | Readable on mobile |