Project_Compass/app/Views/projects/index.php

<section class="stack">
    <div class="layout-top">
        <div class="section-title">
            <span class="eyebrow">Portfolio view</span>
            <h1>Projects</h1>
            <p>Filter every project by status, workstream, and delivery risk.</p>
        </div>
        <div class="board-actions">
            <a class="button button-primary" href="/projects/create">Create project</a>
            <a class="button button-secondary" href="/activity">View activity</a>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card"><span class="meta-label">Projects</span><strong><?= e((string) $summary['project_count']) ?></strong></div>
        <div class="stat-card"><span class="meta-label">Open tasks</span><strong><?= e((string) $summary['open_tasks']) ?></strong></div>
        <div class="stat-card"><span class="meta-label">Overdue</span><strong><?= e((string) $summary['overdue_tasks']) ?></strong></div>
    </div>

    <form class="filter-bar" method="get" action="/projects">
        <label class="field">
            <span>Search</span>
            <input class="input" type="search" name="search" placeholder="Search name, client, or code" value="<?= e($search) ?>">
        </label>

        <label class="field">
            <span>Status</span>
            <select class="select" name="status">
                <option value="">All statuses</option>
                <?php foreach ($statusOptions as $option): ?>
                    <option value="<?= e($option) ?>" <?= $status === $option ? 'selected' : '' ?>><?= e(project_status_label($option)) ?></option>
                <?php endforeach; ?>
            </select>
        </label>

        <div class="board-actions">
            <button class="button button-primary" type="submit">Apply filters</button>
            <a class="button button-ghost" href="/projects">Reset</a>
        </div>
    </form>

    <div class="card-grid">
        <?php foreach ($projects as $project): ?>
            <article class="project-card card" data-filter-item>
                <div class="project-top">
                    <div>
                        <span class="kicker"><?= e($project['code']) ?></span>
                        <h3><a href="/projects/<?= e((string) $project['id']) ?>"><?= e($project['name']) ?></a></h3>
                    </div>
                    <span class="status-pill <?= e($project['health_class']) ?>"><?= e($project['status_label']) ?></span>
                </div>
                <p><?= e($project['description']) ?></p>
                <div class="progress"><span style="width: <?= e((string) $project['progress_percent']) ?>%"></span></div>
                <div class="project-bottom">
                    <span class="mini-pill is-neutral"><?= e((string) $project['task_count']) ?> tasks</span>
                    <span class="mini-pill is-blue"><?= e($project['task_traffic']) ?></span>
                    <span class="mini-pill is-amber">Due <?= e($project['due_label']) ?></span>
                </div>
                <div class="project-bottom">
                    <span class="mini-pill is-slate">Owner: <?= e($project['owner_name']) ?></span>
                    <span class="mini-pill is-green"><?= e($project['budget_label']) ?></span>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
</section>