# UX004 — Timeline Dashboard Walkthrough
**Sprint:** UX004  
**File modified:** `app/views/timeline/dashboard.php`  
**Date:** July 2026  
**Status:** Complete ✅

---

## Files Modified

| File | Change Type |
|---|---|
| `app/views/timeline/dashboard.php` | Full rewrite of view layer — no backend, no routes, no controllers modified |

---

## Change 1 — Page title and header redesigned

### Before
```html
<div class="... border-b border-slate-100 pb-5">
    <h1 class="text-2xl font-bold tracking-tight text-slate-800 flex items-center gap-2">
        <i class="fa-solid fa-clock text-indigo-500"></i> Timeline Planner
    </h1>
    <p class="text-sm text-slate-500 mt-1">Manage wedding checklist milestones, countdowns, and preparation tasks.</p>
    ...
    <a href=".../calendar">
        <i class="fa-solid fa-calendar-days"></i> View Calendar
    </a>
    <a href=".../tasks/create" class="btn btn-primary ...">
        <i class="fa-solid fa-plus"></i> Add Task
    </a>
</div>
```

### After
```html
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-black tracking-tight text-slate-800 flex items-center gap-2.5">
            <span class="inline-flex items-center justify-center w-9 h-9 bg-indigo-50 rounded-2xl">
                <i class="fa-solid fa-calendar-heart text-indigo-500 text-base"></i>
            </span>
            Wedding Schedule
        </h1>
        <p class="text-sm text-slate-500 mt-1.5 ml-0.5">Your upcoming wedding preparation, day by day.</p>
    </div>
    <div class="flex items-center gap-2.5">
        <a href=".../tasks" class="... border border-slate-200 bg-white ...">
            <i class="fa-solid fa-list-check ..."></i> All Items
        </a>
        <a href=".../tasks/create" class="... bg-indigo-600 ... text-white ...">
            <i class="fa-solid fa-plus ..."></i> Add to Schedule
        </a>
    </div>
</div>
```

**Changes:**
- h1: "Timeline Planner" → "Wedding Schedule"
- `font-bold` → `font-black` (consistent with UX001–003)
- Icon: `fa-clock` → `fa-calendar-heart` (warm, wedding-appropriate)
- Icon wrapped in soft rounded square (consistent with UX001–003 header pattern)
- Subtitle: "Manage wedding checklist milestones…" → "Your upcoming wedding preparation, day by day."
- Header separator (`border-b pb-5`) removed — consistent with UX001–003 pattern
- "View Calendar" button removed
- "Add Task" → "Add to Schedule"
- Button styling: `btn btn-primary btn-md` → explicit `bg-indigo-600 ... text-xs font-bold`

---

## Change 2 — KPI metrics strip: removed entirely

### Before
```html
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <!-- In Progress card -->
    <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm">
        <span class="text-[10px] font-bold text-slate-400 block uppercase tracking-wider">In Progress</span>
        <span class="text-2xl font-black text-slate-800 block mt-2"><?= $inProgress ?></span>
        <span class="text-[10px] text-slate-400 block mt-1">Actively coordinates</span>
    </div>
    <!-- Overdue Tasks card -->
    <!-- Pending Tasks card — "Remaining work backlog" -->
    <!-- Due This Week card -->
</div>
```

### After
*(section removed — no replacement)*

The four KPI cards were entirely removed. Completion progress is now shown inside the countdown hero. The overdue count is shown in the overdue banner.

**PHP variables removed from use:**
- `$inProgress` — no longer used in view
- `$pending` — no longer used in view
- `$completionPercent` — still used, now in hero pill

---

## Change 3 — Countdown hero redesigned; progress ring merged

### Before
Two separate elements in a `grid-cols-3` row:
1. Countdown banner (`lg:col-span-2`)
2. Circular progress ring widget (separate `bg-white` card)

### After
Single full-width countdown card with inline progress pill:
```html
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-3xl p-6 text-white ...">
    <!-- decorative icon changed from fa-hourglass-half to fa-heart -->

    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 relative">
        <!-- Left: names + date -->
        <div>
            <span class="...">Wedding Countdown</span>
            <h2>Groom & Bride's Big Day</h2>
            <p>Wednesday, 15 January 2025</p>
        </div>

        <!-- Right: days + progress pill -->
        <div class="flex items-end gap-6 flex-shrink-0">
            <div class="text-right">
                <span class="text-5xl font-extrabold">180</span>
                <span class="text-xs text-indigo-100 mt-1 block">days to go</span>
            </div>
            <?php if ($total > 0): ?>
            <div class="bg-white/15 rounded-2xl px-4 py-3 text-center">
                <span class="text-2xl font-black block">45%</span>
                <span class="text-[11px] text-indigo-100">5/11 done</span>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>
```

Changes:
- Decorative background icon: `fa-hourglass-half` → `fa-heart`
- "days left until wedding vows!" → "days to go" (concise)
- Progress ring card removed
- Progress % now shown as frosted pill inside the hero (only if tasks exist)
- "tasks settled" subtext removed — replaced with "N/M done"

---

## Change 4 — Overdue section: repositioned and redesigned

### Before
```html
<!-- Rendered at the BOTTOM of the left column, AFTER Today and This Week -->
<?php if (!empty($stats['overdue_list'])): ?>
<div class="p-6 bg-rose-50/60 rounded-2xl border border-rose-100 shadow-sm space-y-4">
    <h3 class="font-bold text-rose-800 ... text-sm">
        <i class="fa-solid fa-triangle-exclamation text-rose-600 text-lg"></i>
        Attention Required: Overdue Items
    </h3>
    <div class="space-y-2.5">
        <?php foreach ($stats['overdue_list'] as $t): ?>
            <div class="p-3 rounded-xl bg-white border border-rose-100 flex justify-between items-center text-xs">
                <div>
                    <span class="font-bold text-slate-700"><?= $t['title'] ?></span>
                    <span class="text-[10px] text-rose-500">Was due on: 15 Jul 2026</span>
                </div>
                <a href=".../edit/<?= $t['id'] ?>" class="text-[10px] font-bold text-rose-600 underline">
                    Reschedule
                </a>
            </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>
```

### After
```html
<!-- Rendered immediately ABOVE the main content grid — high priority position -->
<?php if (!empty($stats['overdue_list'])): ?>
<div class="bg-rose-50 rounded-2xl border border-rose-100 overflow-hidden">
    <div class="px-5 py-3.5 flex items-center gap-3 border-b border-rose-100">
        <i class="fa-solid fa-circle-exclamation text-rose-500"></i>
        <span class="text-sm font-bold text-rose-800">Needs Your Attention</span>
        <span class="ml-auto text-xs text-rose-400 font-medium"><?= count($stats['overdue_list']) ?> overdue</span>
    </div>
    <div class="divide-y divide-rose-50">
        <?php foreach ($stats['overdue_list'] as $t): ?>
            <div class="px-5 py-3 flex items-center justify-between gap-4">
                <div>
                    <span class="text-sm font-semibold text-rose-900"><?= $t['title'] ?></span>
                    <span class="text-xs text-rose-400">Was due <?= date('d M Y', ...) ?></span>
                </div>
                <a href=".../edit/<?= $t['id'] ?>" class="... bg-white border border-rose-200 text-rose-600 ... rounded-xl ...">
                    Reschedule
                </a>
            </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>
```

**Changes:**
- **Position:** Moved from bottom of left column → immediately after hero (top of content)
- Header: now shows count badge ("3 overdue")
- Icon: `fa-triangle-exclamation` → `fa-circle-exclamation`
- "Attention Required: Overdue Items" → "Needs Your Attention"
- "Was due on:" → "Was due" (shorter)
- Reschedule button: `text-[10px] underline link` → `styled button (white bg, rose border)`
- "Attention Required: Overdue Items" removes the administrative tone

---

## Change 5 — Today's section redesigned

**Label changes:**
- Section title: "Today's Schedule Tasks" → "Today"
- Current date shown as secondary text in card header
- "View Backlog" link removed (backlog = Agile vocabulary)
- Priority badge removed from each task row
- "Open Budget Item" keyword-detection badge removed
- "Phase • Category: X" subtext → category name only (`text-[11px]`)

**Row design:**
```html
<div class="px-5 py-3.5 flex items-center gap-3 group">
    <!-- Toggle form: unchanged (same CSRF + POST) -->
    <!-- Title: text-sm font-semibold (was text-xs font-bold) -->
    <!-- Category: text-[11px] text-slate-400 (was text-[9px] with Phase prefix) -->
    <!-- Edit link: opacity-0 group-hover:opacity-100 — hover-reveal -->
</div>
```

**Empty state:**
```html
<!-- Before: "No tasks due today. Have a peaceful day!" (text only) -->
<!-- After: icon + "Nothing scheduled today" + "Enjoy your day!" -->
```

---

## Change 6 — This Week section redesigned

**Label changes:**
- Section title: "Upcoming Due Tasks (This Week)" → "Coming Up This Week"
- "View All" link added to card header (was missing — no way to navigate out)
- Priority badge removed
- "Open Budget Item" keyword-detection badge removed
- Date format: "Due: 15 Jul 2026 (in 3 days)" → "15 Jul 2026 · in 3 days" (or "· Tomorrow" / "· Today")

**Empty state:**
```html
<!-- Before: "No tasks due later this week." (text only) -->
<!-- After: icon + "Nothing coming up this week" + "Add something to your schedule" link -->
```

---

## Change 7 — Milestones section redesigned

**Label changes:**
- "Quick Add Milestone" label: `text-[10px] uppercase` → `text-xs font-semibold text-slate-500 "Add a milestone"`
- "Target: DD MM YYYY" → "By DD MM YYYY"
- Milestone item font: `text-xs font-bold` → `text-sm font-semibold`
- Milestone date font: `text-[9px]` → `text-[11px]`

**Empty state:**
```html
<!-- Before: "No milestones added. Add one below!" (text only) -->
<!-- After: icon + "No milestones yet" -->
```

**Toggle button:**
- Checkbox icon: size unchanged (`fa-check text-[9px]`)  
- `border-slate-300 bg-white text-transparent` when unchecked (previously `text-slate-100 hover:text-emerald-500`)
- Consistent with Today/This Week toggle button styling

---

## Change 8 — "Module Integrations" box removed

### Before
```html
<div class="p-5 rounded-2xl bg-indigo-50 border border-indigo-100 ...">
    <h4 class="font-bold text-xs ...">
        <i class="fa-solid fa-circle-nodes text-indigo-500"></i> Module Integrations
    </h4>
    <p class="text-[11px] text-indigo-700 ...">
        This timeline planner is built to automatically integrate with Budget milestones, vendor arrangements,
        and crew assignment checklists in upcoming releases.
    </p>
</div>
```

### After
*(section removed — no replacement)*

Developer roadmap copy removed from end-user interface.

---

## Variables Used (No Backend Changes)

| Variable | Previously Used For | Still Used? |
|---|---|---|
| `$stats['wedding_date']` | Countdown hero | ✅ Yes |
| `$stats['countdown_days']` | Countdown days | ✅ Yes |
| `$stats['completion_percent']` | Progress ring | ✅ Yes — now in hero pill |
| `$stats['total_tasks']` | Progress ring denominator | ✅ Yes — in hero pill |
| `$stats['completed_tasks']` | Progress ring numerator | ✅ Yes — in hero pill |
| `$stats['overdue_tasks']` | KPI card | ❌ No longer needed (count from `overdue_list`) |
| `$stats['in_progress_tasks']` | KPI card | ❌ Removed |
| `$stats['pending_tasks']` | KPI card | ❌ Removed |
| `$stats['due_this_week']` | KPI card | ❌ Removed |
| `$stats['today_tasks']` | Today list | ✅ Yes |
| `$stats['this_week_tasks']` | This Week list | ✅ Yes |
| `$stats['overdue_list']` | Overdue section | ✅ Yes |
| `$stats['groom_name']` | Countdown hero | ✅ Yes |
| `$stats['bride_name']` | Countdown hero | ✅ Yes |
| `$milestones` | Milestones list | ✅ Yes |
| `$priorityStyles` | Priority badges | ❌ Removed (badges removed) |

No new variables. No new queries. The controller passes all the same data — the view simply uses fewer of them.

---

## Verification

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

### Responsive Layout
| Breakpoint | Hero | Overdue | Main Grid | Milestones |
|---|---|---|---|---|
| Mobile (< md) | Single column, hero full width | Full width, stacked rows | Single column | Full width below schedule |
| Tablet (md) | Hero content: flex-col → flex-row | Same | Single column | Full width below schedule |
| Desktop (lg+) | Full width | Full width | 2-col left + 1-col right | Right column |

Grid: `grid-cols-1 lg:grid-cols-3` — same breakpoints as original.

### Button Audit — Final State
| Location | Button | Style | Assessment |
|---|---|---|---|
| Header | All Items | Secondary (white/slate border) | ✅ Clear secondary nav |
| Header | Add to Schedule | Primary indigo | ✅ Clear primary action |
| Overdue rows | Reschedule | White bg, rose border | ✅ Contextual urgency |
| Today rows | Toggle circle | Form POST, circle button | ✅ Functional, unchanged |
| Today rows | Edit (hover) | Hover-reveal icon | ✅ Non-intrusive |
| This Week rows | Toggle circle | Form POST, circle button | ✅ Functional, unchanged |
| This Week card | View All | Text link, indigo | ✅ Clear navigation |
| Milestones card | Manage | Text link, indigo | ✅ Clear |
| Milestones list | Toggle checkbox | Form POST | ✅ Functional, unchanged |
| Milestone form | Add | Primary indigo, small | ✅ Consistent |

### Scope Check
| File | Modified? |
|---|---|
| `app/views/timeline/dashboard.php` | ✅ Yes — only this file |
| `app/views/timeline/create_task.php` | ❌ Not touched |
| `app/views/timeline/edit_task.php` | ❌ Not touched |
| `app/views/timeline/tasks.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 | h1: "Timeline Planner" → "Wedding Schedule" | Module label → user-facing page name |
| 2 | Icon: `fa-clock` → `fa-calendar-heart` | Warm, wedding-appropriate |
| 3 | Header separator removed | Visual consistency with UX001–003 |
| 4 | Subtitle rewritten | "Manage…" → "Your upcoming preparation, day by day." |
| 5 | "View Calendar" button removed from header | Rarely used, not a primary action |
| 6 | "Add Task" → "Add to Schedule" | Wedding vocabulary |
| 7 | KPI metric strip (4 cards) removed | Project management dashboard vocabulary |
| 8 | Progress ring card removed | Merged into hero as progress pill |
| 9 | Overdue section moved above schedule | Urgent items should appear first |
| 10 | Overdue banner: count badge added | Shows number at a glance |
| 11 | Overdue "Reschedule": link → styled button | Better affordance |
| 12 | "Attention Required: Overdue Items" → "Needs Your Attention" | Human language |
| 13 | Today: "Today's Schedule Tasks" → "Today" | Simple, direct |
| 14 | "View Backlog" removed from Today header | "Backlog" = Agile vocabulary |
| 15 | Priority badges removed from all rows | PM vocabulary; alarming |
| 16 | "Open Budget Item" keyword detection removed | Fragile, noisy |
| 17 | "Phase • Category: X" → category only, `text-[11px]` | Simpler, readable |
| 18 | Task row: `text-xs` → `text-sm` labels | Readable |
| 19 | Hover-reveal edit link added to Today rows | Non-intrusive access |
| 20 | "Upcoming Due Tasks (This Week)" → "Coming Up This Week" | Natural language |
| 21 | "View All" link added to This Week header | Navigation path was missing |
| 22 | Date format: "Due: D M Y (in N days)" → "D M Y · in N days" | Cleaner inline |
| 23 | `· Tomorrow` / `· Today` contextual labels | Warmer than "in 1 days" |
| 24 | Milestone "Target:" → "By" | Natural language |
| 25 | Milestone font: `text-xs` → `text-sm` | Readable |
| 26 | "Quick Add Milestone" label upgraded | `text-[10px] uppercase` → `text-xs normal` |
| 27 | Milestone empty state: text → icon + message | Styled, guides user |
| 28 | Today empty state improved | Added icon, cleaner copy |
| 29 | This Week empty state improved | Added icon + "Add to schedule" CTA |
| 30 | "Module Integrations" box removed | Developer roadmap in end-user UI |