MVR - Training Dashboard
Wet and Dry lease training overview page
<header>
<a class="sr-only sr-only-focusable" href="#mainContent">Skip navigation to main content</a> <nav class="navbar navbar-expand-lg atp-navbar" aria-label="Main">
<div class="container">
<div class="row no-gutters w-100 mb-lg-2">
<div class="col d-flex align-items-center">
<button class="navbar-toggler mr-2 px-1" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="lmp-icon icon-lg" aria-hidden="true">menu</i>
</button>
<a class="navbar-brand d-none d-lg-inline-block" href="#">
Aviation Training Portal
</a>
<div class="navbar-title d-lg-none">
Products & Services
</div>
</div>
<div class="col-auto">
<ul class="navbar-nav navbar-icon-nav justify-content-end">
<li class="nav-item d-none d-sm-block">
<a class="nav-link" href="#">
<i class="lmp-icon icon-lg" aria-hidden="true">help_outline</i>
<span class="sr-only">Help Center</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="lmp-icon icon-lg" aria-hidden="true">apps</i>
<span class="sr-only">Applications Menu</span>
</a>
<div class="dropdown-menu dropdown-menu-right atp-nav-dropdown" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">Portal</h6>
<a class="dropdown-item" href="#">MyBoeingFleet</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Applications</h6>
<a class="dropdown-item" href="#">Application 1</a>
<a class="dropdown-item" href="#">Application 2</a>
<a class="dropdown-item" href="#">Application 3</a>
<a class="dropdown-item" href="#">More Applications</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="accountMenuDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="lmp-icon icon-lg" aria-hidden="true">account_circle</i>
<span class="sr-only">Account Menu</span>
</a>
<div class="dropdown-menu dropdown-menu-right atp-nav-dropdown pb-0" aria-labelledby="accountMenuDropdown">
<div class="h5 font-weight-bold mb-1 px-4">FirstName LastName</div>
<div class="dropdown-small-text">firstname.lastname@company.com</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">MBF Account Details</a>
<a href="#" class="dropdown-item dropdown-btn mt-4">Log Out</a>
</div>
</li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="atpNavbarContent">
<div class="row d-lg-none pt-lg-1">
<div class="col py-3 pl-4">
<img src="../../../../assets/images/boeing-logo.svg" width="145" height="34" alt="Boeing" loading="lazy" style="width: 150px; display: block; height: auto;">
</div>
<div class="col-auto py-3 pr-2">
<button class="navbar-toggler text-dark" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Close navigation">
<i class="lmp-icon icon-lg" aria-hidden="true">close</i>
</button>
</div>
<div class="col-12 border-top border-bottom py-1 px-3">
<a class="navbar-brand-mobile" href="#">Aviation Training Portal</a>
</div>
</div>
<div class="row no-gutters">
<div class="col-12">
<ul class="navbar-nav navbar-link-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Products & Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Materials</a>
</li>
<li class="nav-item d-sm-none border-top mt-1 pt-2">
<a href="#" class="nav-link d-flex align-items-center">
<i class="lmp-icon mr-2" aria-hidden="true">help_outline</i> Help Center
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<main id="mainContent" class="bg-gray-lt">
<div class="atp-header">
<div class="container">
<div class="row">
<div class="col d-flex align-items-start order-1 order-md-0">
<h1 class="order-1">
Airline XYZ Training Dashboard
</h1>
</div>
</div>
</div>
</div>
<div class="container lmp-page-content">
<div class="row mb-3 mb-lg-4">
<div class="col-md-6 col-xl-4 mb-4">
<div class="atp-card-overview">
<div class="card-title">
<h3 class="h4">Wet Flight Training
<span>120-day look ahead</span>
</h3>
</div>
<div class="row px-3">
<div class="col-6 py-3 pb-lg-5 border-right border-lmp-gray">
<div class="overview-val-lg">51</div>
<div class="card-label">Upcoming</div>
</div>
<div class="col-6 py-3 pb-lg-5">
<div class="overview-val-lg">20</div>
<div class="card-label">Today</div>
</div>
<div class="card-controls col-12 py-3 border-top border-lmp-gray">
<a href="#" class="btn lmp-primary">Manage Training</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4 mb-4">
<div class="atp-card-overview">
<div class="card-title">
<h3 class="h4">Dry Lease Training
<span>90-day look ahead</span>
</h3>
</div>
<div class="row px-3">
<div class="col-6 py-3 pb-lg-5 border-right border-lmp-gray">
<div class="overview-val-lg">330</div>
<div class="card-label">Upcoming</div>
</div>
<div class="col-6 py-3 pb-lg-5">
<div class="overview-val-lg">125</div>
<div class="card-label">Today</div>
</div>
<div class="card-controls col-12 py-3 border-top border-lmp-gray">
<a href="#" class="btn lmp-primary">Manage Leases</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4 mb-4">
<div class="atp-card-overview">
<div class="card-title">
<h3 class="h4">Dry Leases (error example)
<span>90-day look ahead</span>
</h3>
</div>
<div class="row px-3">
<div class="col py-4">
<div class="lmp-error">
<i class="lmp-icon icon-lg" aria-hidden="true">error</i>
Something went wrong loading this information. Please <a href="#">reload</a> or try again later.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<h4>Additional Information</h4>
<ul class="list-unstyled">
<li><a href="#">Resource Calendar View</a></li>
</ul>
</div>
</div>
</div>
</main>
<footer class="atp-foooter">
<div class="container">
<div class="row">
<div class="col-lg-7">
<nav class="atp-footer-links" aria-label="Footer">
<a href="#">MBF Home</a>
<a href="#">Contact Us</a>
<a href="#">Terms of Use</a>
<a href="#">Boeing Privacy & Cookie Statement</a>
</nav>
</div>
<div class="col-lg-5 text-center text-lg-right">
Copyright © 2020 Boeing. All right reserved.
</div>
</div>
</div>
</footer>