                        <!-- Page header -->
                        <div class="page-header">
                            <div>
                                <h1>Projects</h1>
                                <p class="subtitle">Active work, upcoming deadlines, and team availability.</p>
                            </div>
                            <div class="page-header__actions">
                                <button type="button" class="date-chip" aria-label="Workspace: All teams">
                                    <i class="fa-solid fa-people-group"></i>
                                    All teams
                                    <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="m-btn m-btn--ghost" id="dash-refresh-btn" aria-label="Refresh dashboard data">
                                    <i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
                                    Refresh
                                </button>
                                <button type="button" class="m-btn m-btn--primary">
                                    <i class="fa-solid fa-plus" aria-hidden="true"></i>
                                    New project
                                </button>
                            </div>
                        </div>

                        <!-- KPI strip -->
                        <div class="row row-tight">
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">Active projects</p>
                                        <span class="stat-card__icon stat-card__icon--c1"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                                    </div>
                                    <p class="stat-card__value">12</p>
                                    <p class="stat-card__delta stat-card__delta--up">
                                        <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>2 <span class="stat-card__delta-period">since last week</span>
                                    </p>
                                </article>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">Completed this month</p>
                                        <span class="stat-card__icon stat-card__icon--c2"><i class="fa-solid fa-circle-check" aria-hidden="true"></i></span>
                                    </div>
                                    <p class="stat-card__value">38</p>
                                    <p class="stat-card__delta stat-card__delta--up">
                                        <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>12 <span class="stat-card__delta-period">vs last month</span>
                                    </p>
                                </article>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">Team capacity</p>
                                        <span class="stat-card__icon stat-card__icon--c3"><i class="fa-solid fa-gauge-simple" aria-hidden="true"></i></span>
                                    </div>
                                    <p class="stat-card__value">78%</p>
                                    <p class="stat-card__delta stat-card__delta--up">
                                        <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>5pp <span class="stat-card__delta-period">vs last week</span>
                                    </p>
                                </article>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">Hours this week</p>
                                        <span class="stat-card__icon stat-card__icon--c4"><i class="fa-regular fa-clock" aria-hidden="true"></i></span>
                                    </div>
                                    <p class="stat-card__value">1,248</p>
                                    <p class="stat-card__delta stat-card__delta--down">
                                        <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>4% <span class="stat-card__delta-period">vs last week</span>
                                    </p>
                                </article>
                            </div>
                        </div>

                        <!-- Active projects + Upcoming deadlines -->
                        <div class="row row-tight" style="margin-top: 16px;">
                            <div class="col-lg-8">
                                <section class="m-card" aria-labelledby="projects-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="projects-title">Active projects</h2>
                                            <p class="m-card__subtitle">Currently in progress, by completion.</p>
                                        </div>
                                        <a href="#" class="m-btn m-btn--ghost" style="height:30px; padding:0 10px; font-size:12.5px;">View all</a>
                                    </header>
                                    <ul class="project-list">
                                        <li>
                                            <div>
                                                <p class="project-list__title">Acme dashboard redesign</p>
                                                <span class="project-list__meta">Due May 18 · 12 tasks · <span class="status--process">on track</span></span>
                                            </div>
                                            <div class="project-list__avatars">
                                                <img src="images/icon/avatar-01.jpg" alt="">
                                                <img src="images/icon/avatar-04.jpg" alt="">
                                                <img src="images/icon/avatar-06.jpg" alt="">
                                            </div>
                                            <span class="project-list__bar" style="--pct: 78%;"></span>
                                        </li>
                                        <li>
                                            <div>
                                                <p class="project-list__title">Q2 marketing campaign</p>
                                                <span class="project-list__meta">Due May 24 · 8 tasks · <span class="status--process">on track</span></span>
                                            </div>
                                            <div class="project-list__avatars">
                                                <img src="images/icon/avatar-02.jpg" alt="">
                                                <img src="images/icon/avatar-05.jpg" alt="">
                                            </div>
                                            <span class="project-list__bar project-list__bar--success" style="--pct: 64%;"></span>
                                        </li>
                                        <li>
                                            <div>
                                                <p class="project-list__title">Mobile app v3 release</p>
                                                <span class="project-list__meta">Due Jun 02 · 24 tasks · <span class="status--approved">in review</span></span>
                                            </div>
                                            <div class="project-list__avatars">
                                                <img src="images/icon/avatar-01.jpg" alt="">
                                                <img src="images/icon/avatar-03.jpg" alt="">
                                                <img src="images/icon/avatar-05.jpg" alt="">
                                                <img src="images/icon/avatar-06.jpg" alt="">
                                            </div>
                                            <span class="project-list__bar" style="--pct: 52%;"></span>
                                        </li>
                                        <li>
                                            <div>
                                                <p class="project-list__title">API v2 documentation</p>
                                                <span class="project-list__meta">Due May 20 · 6 tasks · <span class="status--process">on track</span></span>
                                            </div>
                                            <div class="project-list__avatars">
                                                <img src="images/icon/avatar-04.jpg" alt="">
                                            </div>
                                            <span class="project-list__bar project-list__bar--success" style="--pct: 88%;"></span>
                                        </li>
                                        <li>
                                            <div>
                                                <p class="project-list__title">Customer onboarding flow</p>
                                                <span class="project-list__meta">Due May 28 · 14 tasks · <span class="status--denied">at risk</span></span>
                                            </div>
                                            <div class="project-list__avatars">
                                                <img src="images/icon/avatar-02.jpg" alt="">
                                                <img src="images/icon/avatar-04.jpg" alt="">
                                            </div>
                                            <span class="project-list__bar project-list__bar--warning" style="--pct: 32%;"></span>
                                        </li>
                                        <li>
                                            <div>
                                                <p class="project-list__title">Pricing page A/B test</p>
                                                <span class="project-list__meta">Due Jun 10 · 4 tasks · <span class="status--approved">planning</span></span>
                                            </div>
                                            <div class="project-list__avatars">
                                                <img src="images/icon/avatar-05.jpg" alt="">
                                                <img src="images/icon/avatar-03.jpg" alt="">
                                            </div>
                                            <span class="project-list__bar" style="--pct: 18%;"></span>
                                        </li>
                                    </ul>
                                </section>
                            </div>
                            <div class="col-lg-4">
                                <section class="m-card" aria-labelledby="deadlines-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="deadlines-title">Upcoming deadlines</h2>
                                            <p class="m-card__subtitle">Next two weeks.</p>
                                        </div>
                                    </header>
                                    <ul class="deadline-list">
                                        <li>
                                            <div class="deadline-list__date"><strong>16</strong><span>May</span></div>
                                            <div class="deadline-list__body">
                                                <p class="deadline-list__title">Design review with stakeholders</p>
                                                <span class="deadline-list__project">Acme dashboard redesign</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="deadline-list__date"><strong>18</strong><span>May</span></div>
                                            <div class="deadline-list__body">
                                                <p class="deadline-list__title">Hand-off final designs</p>
                                                <span class="deadline-list__project">Acme dashboard redesign</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="deadline-list__date"><strong>20</strong><span>May</span></div>
                                            <div class="deadline-list__body">
                                                <p class="deadline-list__title">Publish API v2 docs</p>
                                                <span class="deadline-list__project">API v2 documentation</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="deadline-list__date"><strong>24</strong><span>May</span></div>
                                            <div class="deadline-list__body">
                                                <p class="deadline-list__title">Campaign launch</p>
                                                <span class="deadline-list__project">Q2 marketing campaign</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="deadline-list__date"><strong>28</strong><span>May</span></div>
                                            <div class="deadline-list__body">
                                                <p class="deadline-list__title">Onboarding flow QA</p>
                                                <span class="deadline-list__project">Customer onboarding flow</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="deadline-list__date"><strong>02</strong><span>Jun</span></div>
                                            <div class="deadline-list__body">
                                                <p class="deadline-list__title">Mobile app v3 ship</p>
                                                <span class="deadline-list__project">Mobile app v3 release</span>
                                            </div>
                                        </li>
                                    </ul>
                                </section>
                            </div>
                        </div>

                        <!-- Activity feed + Team availability -->
                        <div class="row row-tight" style="margin-top: 16px;">
                            <div class="col-lg-8">
                                <section class="m-card" aria-labelledby="activity-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="activity-title">Recent activity</h2>
                                            <p class="m-card__subtitle">Latest team updates.</p>
                                        </div>
                                        <a href="#" class="m-btn m-btn--ghost" style="height:30px; padding:0 10px; font-size:12.5px;">View all</a>
                                    </header>
                                    <ul class="activity-list">
                                        <li class="activity-item">
                                            <img class="activity-item__avatar" src="images/icon/avatar-01.jpg" alt="">
                                            <div class="activity-item__body">
                                                <p class="activity-item__text"><b>John Doe</b> moved 3 tasks to "In review" on <b>Mobile app v3 release</b>.</p>
                                                <span class="activity-item__time">12 minutes ago</span>
                                            </div>
                                        </li>
                                        <li class="activity-item">
                                            <img class="activity-item__avatar" src="images/icon/avatar-04.jpg" alt="">
                                            <div class="activity-item__body">
                                                <p class="activity-item__text"><b>Diane Myers</b> shipped <b>"Auth flow refactor"</b>.</p>
                                                <span class="activity-item__time">1 hour ago</span>
                                            </div>
                                        </li>
                                        <li class="activity-item">
                                            <img class="activity-item__avatar" src="images/icon/avatar-06.jpg" alt="">
                                            <div class="activity-item__body">
                                                <p class="activity-item__text"><b>Michelle Moreno</b> commented on <b>"Pricing page A/B test"</b>.</p>
                                                <span class="activity-item__time">3 hours ago</span>
                                            </div>
                                        </li>
                                        <li class="activity-item">
                                            <img class="activity-item__avatar" src="images/icon/avatar-05.jpg" alt="">
                                            <div class="activity-item__body">
                                                <p class="activity-item__text"><b>Cynthia Harvey</b> created <b>"Customer onboarding flow"</b>.</p>
                                                <span class="activity-item__time">Yesterday</span>
                                            </div>
                                        </li>
                                        <li class="activity-item">
                                            <img class="activity-item__avatar" src="images/icon/avatar-02.jpg" alt="">
                                            <div class="activity-item__body">
                                                <p class="activity-item__text"><b>Emma Carter</b> assigned 5 tasks to <b>Robert Taylor</b>.</p>
                                                <span class="activity-item__time">Yesterday</span>
                                            </div>
                                        </li>
                                        <li class="activity-item">
                                            <img class="activity-item__avatar" src="images/icon/avatar-03.jpg" alt="">
                                            <div class="activity-item__body">
                                                <p class="activity-item__text"><b>Robert Taylor</b> resolved 2 issues on <b>API v2 documentation</b>.</p>
                                                <span class="activity-item__time">2 days ago</span>
                                            </div>
                                        </li>
                                    </ul>
                                </section>
                            </div>
                            <div class="col-lg-4">
                                <section class="m-card" aria-labelledby="team-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="team-title">Team availability</h2>
                                            <p class="m-card__subtitle">Right now.</p>
                                        </div>
                                    </header>
                                    <ul class="team-list">
                                        <li>
                                            <div class="team-list__avatar">
                                                <img src="images/icon/avatar-01.jpg" alt="John Doe">
                                                <span class="team-list__status team-list__status--online" aria-label="online"></span>
                                            </div>
                                            <span class="team-list__name">John Doe<span class="team-list__role">Engineering lead</span></span>
                                            <span class="team-list__badge">Available</span>
                                        </li>
                                        <li>
                                            <div class="team-list__avatar">
                                                <img src="images/icon/avatar-04.jpg" alt="Diane Myers">
                                                <span class="team-list__status team-list__status--busy" aria-label="busy"></span>
                                            </div>
                                            <span class="team-list__name">Diane Myers<span class="team-list__role">Senior engineer</span></span>
                                            <span class="team-list__badge">In meeting</span>
                                        </li>
                                        <li>
                                            <div class="team-list__avatar">
                                                <img src="images/icon/avatar-06.jpg" alt="Michelle Moreno">
                                                <span class="team-list__status team-list__status--online" aria-label="online"></span>
                                            </div>
                                            <span class="team-list__name">Michelle Moreno<span class="team-list__role">Product designer</span></span>
                                            <span class="team-list__badge">Available</span>
                                        </li>
                                        <li>
                                            <div class="team-list__avatar">
                                                <img src="images/icon/avatar-05.jpg" alt="Cynthia Harvey">
                                                <span class="team-list__status team-list__status--away" aria-label="away"></span>
                                            </div>
                                            <span class="team-list__name">Cynthia Harvey<span class="team-list__role">Product manager</span></span>
                                            <span class="team-list__badge">Away</span>
                                        </li>
                                        <li>
                                            <div class="team-list__avatar">
                                                <img src="images/icon/avatar-02.jpg" alt="Emma Carter">
                                                <span class="team-list__status team-list__status--online" aria-label="online"></span>
                                            </div>
                                            <span class="team-list__name">Emma Carter<span class="team-list__role">Engineering manager</span></span>
                                            <span class="team-list__badge">Available</span>
                                        </li>
                                        <li>
                                            <div class="team-list__avatar">
                                                <img src="images/icon/avatar-03.jpg" alt="Robert Taylor">
                                                <span class="team-list__status team-list__status--offline" aria-label="offline"></span>
                                            </div>
                                            <span class="team-list__name">Robert Taylor<span class="team-list__role">Engineer</span></span>
                                            <span class="team-list__badge">Off today</span>
                                        </li>
                                    </ul>
                                </section>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
