# UX007 — Timeline Experience Final Walkthrough
**Sprint:** UX007  
**File modified:** `app/views/timeline/tasks.php`  
**Date:** July 2026  
**Status:** Complete ✅

---

## Files Modified

| File | Change Type |
|---|---|
| `app/views/timeline/tasks.php` | Full rewrite — table replaced with agenda view |
| `app/views/timeline/dashboard.php` | No changes — UX004 implementation is correct |

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

---

## Architecture Change: Table → Agenda Sections

### Before: One 9-column data table
```
| Done | Task Details | Phase | Category | Due Date | Priority | Status | Owner | Actions |
|------|-------------|-------|----------|----------|----------|--------|-------|---------|
| ○    | Pay caterer | Prep | Payment  | 15 Jul   | High     | …      | Groom | ✏️ 🗑️  |
| ○    | Dress fit   | Late | Meeting  | 20 Aug   | Normal   | …      | Bride | ✏️ 🗑️  |
```

### After: Chronological agenda sections
```
⚡ NEEDS ATTENTION  (overdue items)
┌─────────────────────────────────────────┐
│ ○  Jul  Task title           [Overdue]  │
│    13   Category · status dot           │
└─────────────────────────────────────────┘

☀ TODAY
┌─────────────────────────────────────────┐
│ ○  Jul  Task title           [Today]    │
│    16   Category · status dot           │
└─────────────────────────────────────────┘

📅 COMING UP
┌─────────────────────────────────────────┐
│ ○  Aug  Next task title                 │
│    15   Category · status dot           │
│ ○  Sep  Another task                    │
│    02   Category                        │
└─────────────────────────────────────────┘

✓ COMPLETED  (opacity-60)
┌─────────────────────────────────────────┐
│ ●  Jun  Done task  ~~strikethrough~~    │
│    01                                   │
└─────────────────────────────────────────┘
```

---

## Change 1 — Grouping logic added (PHP preprocessing)

The new view groups tasks into six buckets before rendering. This runs entirely in the view layer — no controller changes.

```php
$grouped = [
    'overdue'   => [],  // due_date < today AND not Completed/Cancelled
    'today'     => [],  // due_date === today
    'tomorrow'  => [],  // due_date === tomorrow
    'upcoming'  => [],  // due_date > tomorrow OR no date
    'completed' => [],  // status === 'Completed'
    'cancelled' => [],  // status === 'Cancelled'
];

foreach ($tasks as $t) {
    // Completed and Cancelled are grouped by status first
    // Overdue: not done, date in the past
    // Today / Tomorrow / Upcoming: date relative to now
}

// Upcoming sorted by due_date ASC
usort($grouped['upcoming'], fn($a, $b) => strcmp($a['due_date'] ?? '9999', $b['due_date'] ?? '9999'));
```

---

## Change 2 — Calendar date block added to each row

### Before
```html
<td class="py-3.5 px-5 whitespace-nowrap text-slate-650">
    15 Jul 2026
    <span class="block text-[8px] bg-rose-100 text-rose-700 ...">Overdue</span>
</td>
```

### After
```html
<!-- Calendar date block — visible dominant element -->
<div class="flex-shrink-0 w-11 text-center">
    <span class="text-[11px] font-bold text-slate-400 block leading-tight">Jul</span>
    <span class="text-base font-black text-rose-500 leading-tight block">13</span>
    <!-- colour: text-rose-500 (overdue) / text-indigo-600 (today) / text-slate-700 (future) -->
</div>
```

The month label is `text-[11px] text-slate-400` — quiet.  
The day number is `text-base font-black` — primary visual anchor for each row.

---

## Change 3 — Row layout: table row → flex row

### Before
```html
<tr class="hover:bg-slate-50/50 ...">
    <td>... checkbox ...</td>
    <td>... title + badges ...</td>
    <td>... phase ...</td>
    <td>... category ...</td>
    <td>... date ...</td>
    <td>... priority badge ...</td>
    <td>... status badge ...</td>
    <td>... owner ...</td>
    <td>... edit + delete ...</td>
</tr>
```

### After
```html
<div class="px-5 py-4 flex items-center gap-4 group ...">
    <!-- Toggle (form POST) -->
    <!-- Calendar date block (w-11 fixed) -->
    <!-- Title + meta (flex-1, min-w-0) -->
    <!-- Actions (opacity-0 group-hover:opacity-100) -->
</div>
```

The flex row has 4 semantic zones vs. 9 columns. Reading left to right: toggle → date → content → actions.

---

## Change 4 — Title cell simplified

### Before
```html
<td class="py-3.5 px-5">
    <span class="font-bold text-slate-800 block ...">Task title</span>
    <!-- keyword detection: 10+ string comparisons → "Open Budget Item" badge at text-[9px] -->
    <span class="text-[10px] text-slate-450 block mt-0.5 max-w-sm truncate">Description text</span>
</td>
```

### After
```html
<div class="flex-1 min-w-0">
    <span class="text-sm font-semibold block truncate text-slate-800">Task title</span>
    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
        <span class="text-[11px] text-slate-400">Category</span>      <!-- type only, no label -->
        <span class="text-[10px] font-bold text-rose-500">Overdue</span>  <!-- conditional -->
        <span class="text-[10px] font-bold text-indigo-500">Today</span>  <!-- conditional -->
        <span class="..."><span class="w-1.5 h-1.5 rounded-full ..."></span> Status</span>
    </div>
</div>
```

Changes:
- Title: `text-xs font-bold` → `text-sm font-semibold` (readable)
- Description text removed (too small to read in a list, available on detail view)
- Keyword detection block removed entirely
- Category shown without "Category:" label
- Contextual labels ("Overdue", "Today", "Tomorrow") shown inline
- Status shown as dot + text (not a coloured badge)

---

## Change 5 — Columns removed

| Column | Removed? | Reason |
|---|---|---|
| Done (toggle) | No — kept | Functional |
| Task Details (title) | Kept, simplified | Core content |
| Phase | ✅ Removed | PM vocabulary; couples don't think in phases |
| Category | Merged into meta | Shown as inline `text-[11px]` under title |
| Due Date | Kept, redesigned | Now a calendar date block |
| Priority badge | ✅ Removed | PM vocabulary; date order conveys urgency better |
| Status badge | ✅ Removed as badge | Now shown as status dot + text under title |
| Owner | ✅ Removed | PM vocabulary; rarely useful in a wedding context |
| Actions | Kept, hover-reveal | Edit + Delete — hidden by default |

---

## Change 6 — Actions: always-visible → hover-reveal

### Before
```html
<td class="py-3.5 px-5 text-center">
    <div class="flex items-center justify-center gap-1.5">
        <a href=".../edit/..." class="p-1.5 bg-slate-50 ...">✏️</a>
        <form method="POST" action=".../delete/..." onsubmit="...">
            <button class="p-1.5 bg-rose-550/10 ...">🗑️</button>
        </form>
    </div>
</td>
```

### After
```html
<!-- opacity-0 group-hover:opacity-100 — invisible until row hovered -->
<div class="flex-shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
    <a href=".../edit/..." class="p-1.5 rounded-lg bg-slate-50 hover:bg-indigo-50 ...">✏️</a>
    <form method="POST" action=".../delete/..." onsubmit="...">
        <button class="p-1.5 rounded-lg bg-slate-50 hover:bg-rose-50 ...">🗑️</button>
    </form>
</div>
```

Actions are invisible at rest. On row hover, they fade in. This reduces visual noise on the list — most couples are reading the schedule, not deleting items.

Delete confirmation: "Are you sure you want to delete this task?" → "Remove this item from your schedule?" — calendar vocabulary.

---

## Change 7 — Completed/Cancelled sections dimmed

### Before
```html
<!-- Completed item: only title had line-through -->
<tr class="hover:bg-slate-50/50">
    <td>☑</td>
    <td><span class="line-through text-slate-400">Done title</span> | Phase | Category | Date | Priority | Status | Owner | Actions</td>
    <!-- All other columns identical to active items -->
</tr>
```

### After
```html
<!-- Entire Completed section has opacity-60 -->
<div class="px-5 py-4 flex items-center gap-4 group opacity-60 hover:opacity-100 transition-opacity">
    <!-- ☑ toggle (emerald) -->
    <!-- calendar date block -->
    <!-- title: line-through text-slate-400 -->
    <!-- meta: category + status dot -->
    <!-- hover-reveal actions -->
</div>
```

The dimming is applied to the entire item row, not just the title. This makes the completed section visually recede as a whole.

---

## Change 8 — Section headers: agenda labels

Each section is preceded by a header row:
```html
<div class="flex items-center gap-2 mb-3">
    <i class="fa-solid fa-sun text-amber-400 text-xs"></i>
    <h2 class="text-xs font-bold text-slate-500 uppercase tracking-wider">Today</h2>
    <span class="text-xs text-slate-300">2</span>  <!-- item count -->
</div>
```

Section labels and icons:
| Section | Icon | Icon colour |
|---|---|---|
| Needs Attention | `fa-circle-exclamation` | `text-rose-400` |
| Today | `fa-sun` | `text-amber-400` |
| Tomorrow | `fa-sunrise` | `text-orange-400` |
| Coming Up | `fa-calendar-week` | `text-indigo-400` |
| Completed | `fa-circle-check` | `text-emerald-400` |
| Cancelled | `fa-ban` | `text-slate-300` |

Sections only render if they have items (`if (empty($items)) return;`). No empty section headers shown.

---

## Change 9 — Page header aligned with UX004–005

### Before
```html
<div class="flex ... 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> / <span>Wedding Tasks Checklist</span>
    </div>
    <h1 class="text-2xl font-bold ...">
        <i class="fa-solid fa-list-check text-indigo-500"></i> Wedding Checklist Tasks
    </h1>
    <p class="text-sm text-slate-500 mt-1">Detailed list of milestones, estimated durations, and coordination details.</p>
    ...
    <a href=".../timeline"><i class="fa-solid fa-gauge-high"></i> Dashboard</a>
    <a href=".../create"><i class="fa-solid fa-plus"></i> Add Task</a>
```

### After
```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>All Items</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-list-check text-indigo-500 text-base"></i>
            </span>
            All Schedule Items
        </h1>
        <p class="text-sm text-slate-500 mt-1.5 ml-0.5">All your wedding events, meetings, and reminders — in one place.</p>
    </div>
    <a href=".../timeline"><i class="fa-solid fa-calendar-heart"></i> Dashboard</a>
    <a href=".../create"><i class="fa-solid fa-plus"></i> Add to Schedule</a>
```

Changes:
- Header separator removed
- Breadcrumb: "Timeline Planner / Wedding Tasks Checklist" → "Wedding Schedule / All Items"
- h1: "Wedding Checklist Tasks" → "All Schedule Items"
- `font-bold` → `font-black`
- Icon in rounded square wrapper (consistent with UX004–005)
- Subtitle rewritten — no "milestones, estimated durations, coordination details"
- Dashboard button icon: `fa-gauge-high` → `fa-calendar-heart`
- "Add Task" → "Add to Schedule"

---

## Change 10 — Filter bar redesigned

### Before
```html
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm">
    <form class="grid grid-cols-1 md:grid-cols-5 gap-3 items-end">
        <!-- Search Tasks | Filter Phase | Filter Category | Filter Status | Apply + Reset -->
    </form>
</div>
```

### After
```html
<div class="bg-white rounded-2xl border border-slate-100 shadow-sm px-5 py-4">
    <form class="flex flex-wrap gap-3 items-end">
        <!-- Search | Type | Status | Period (conditional) | Filter + Reset -->
    </form>
</div>
```

Changes:
- Layout: `grid-cols-5` → `flex-wrap` (adaptive to screen width)
- "Search Tasks" → "Search"
- "Filter Phase" → "Period" (only shown if multiple phases)
- "Filter Category" → "Type"
- "Filter Status" → "Status"
- "Apply" → "Filter"
- Filter button: `btn btn-primary` → explicit indigo styling
- Reset link: `btn bg-slate-50` → `border border-slate-200 bg-white`

---

## Verification

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

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

### Responsive Layout — tasks.php

| Breakpoint | Header | Filter bar | Agenda items |
|---|---|---|---|
| Mobile (< md) | Stacked | `flex-wrap` — stacked filters | Full width rows, date block + title stacked naturally |
| Tablet (md) | Side by side | Inline filters | Full width rows |
| Desktop | Side by side | Inline filters | Full width rows |

The `flex` row layout of each agenda item is naturally responsive — the calendar date block (`w-11 flex-shrink-0`) and action buttons (`flex-shrink-0`) are fixed, and the title area (`flex-1 min-w-0`) fills remaining space.

### Grouping Logic — Edge Cases

| Scenario | Behaviour |
|---|---|
| Task with no due_date, not completed | Goes to "Coming Up" (date `'9999'` for sort) |
| Task with due_date today, status Completed | Goes to "Completed" (status check first) |
| Task with due_date in past, status Completed | Goes to "Completed" (status wins) |
| Task with due_date in past, status Not Started | Goes to "Needs Attention" |
| All tasks completed | Only "Completed" section renders |
| No tasks at all | Empty state shown |
| Filters active, no results | Empty state with "Clear filters" link |

### Scope Check

| File | Modified? |
|---|---|
| `app/views/timeline/tasks.php` | ✅ Yes |
| `app/views/timeline/dashboard.php` | ❌ Not touched (UX004 is correct) |
| `app/views/timeline/create_task.php` | ❌ Not touched |
| `app/views/timeline/edit_task.php` | ❌ Not touched |
| `app/views/timeline/milestones.php` | ❌ Not touched |
| `app/views/timeline/calendar.php` | ❌ Not touched |
| `app/views/budget/*.php` | ❌ Not touched |
| Any controller / model / route | ❌ Not touched |

---

## Summary of All Changes

| # | What Changed | Why |
|---|---|---|
| 1 | 9-column data table → chronological agenda sections | Calendar UX pattern, not project management |
| 2 | Grouped into: Overdue / Today / Tomorrow / Coming Up / Completed / Cancelled | Natural chronological reading order |
| 3 | Upcoming items sorted by due_date ASC | Chronological order within section |
| 4 | Calendar date block (month + day) added to each row | Date is the primary organisational element |
| 5 | Phase column removed | PM vocabulary, not useful to couples |
| 6 | Owner column removed | PM vocabulary, rarely useful |
| 7 | Priority badge removed | Date order conveys urgency; "Critical" is alarming |
| 8 | Status badge column → status dot + inline text | Less visual noise |
| 9 | Keyword detection ("Open Budget Item") removed | Fragile, noisy |
| 10 | Description text removed from row | Too small; available in detail view |
| 11 | Completed/Cancelled sections: `opacity-60 hover:opacity-100` | Visually quiet without hiding |
| 12 | Actions: always-visible → hover-reveal | Reduces noise; most users are scanning |
| 13 | Delete confirmation updated to calendar vocabulary | "Remove this item from your schedule?" |
| 14 | Empty state: bare text → icon + message + CTA | Styled, guides user |
| 15 | Empty state: filter-aware messaging | "No items match your filters. [Clear filters]" |
| 16 | Header: "Wedding Checklist Tasks" → "All Schedule Items" | Calendar vocabulary |
| 17 | Header separator removed | Consistent with UX004–006 |
| 18 | Breadcrumb: "Timeline Planner / Wedding Tasks Checklist" → "Wedding Schedule / All Items" | Consistent |
| 19 | Icon in rounded square wrapper | Consistent with UX004–006 |
| 20 | "Add Task" → "Add to Schedule" | Calendar vocabulary |
| 21 | Dashboard button icon: `fa-gauge-high` → `fa-calendar-heart` | Consistent with dashboard |
| 22 | Filter bar: `grid-cols-5` → `flex-wrap` | Adaptive, natural |
| 23 | Filter labels simplified: "Filter Phase" → "Period", etc. | Natural language |
| 24 | Phase filter conditional on multiple phases | Consistent with UX005 |
| 25 | Item count shown above agenda | "N items found" as quiet context |
| 26 | Pagination: aligned styling with UX004–006 buttons | Consistent |