<div class="home-banner mb-9">
<div class="home-banner-header d-flex justify-content-between">
<div>
<img src="{{rootURL}}assets/images/logo-heart-horizontal.svg" alt="Heart" class="logo-heart">
</div>
<div class="text-right">
<div class="text-white link-help" onclick={{transition-to "home.about"}}><i class="bx bx-help-circle" ></i></div>
</div>
</div>
<div class="home-banner-body text-right mt-8">
<div class="home-banner-body-greet text-left text-white d-sm-flex flex-sm-column justify-content-sm-center h-100">
<h5>Welcome Back,</h5>
<h2>{{ this.sessionAccount.currentUser.name }}</h2>
</div>
<img src="{{rootURL}}assets/images/employee.png" alt="employee" class="home-banner-body-image">
</div>
</div>
<div class="home-body">
<section class="mb-9">
<div class="container">
<div class="row mb-10">
<div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-leads.svg" alt="leads" class="w-100">
</div>
</div>
{{#if (gt this.homeNotification.model.name 0)}}
<p class="text-danger font-weight-bold">Leads</p>
{{else}}
<p>Leads</p>
{{/if}}
</div>
<div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-opportunity.svg" alt="opportunity" class="w-100">
</div>
</div>
{{#if (gt this.homeNotification.model.name 0)}}
<p class="text-danger font-weight-bold">Opportunity</p>
{{else}}
<p>Opportunity</p>
{{/if}}
</div>
<div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-event-management.svg" alt="event-management" class="w-100">
</div>
</div>
{{#if (gt this.homeNotification.model.name 0)}}
<p class="text-danger font-weight-bold">Event Management</p>
{{else}}
<p>Event Management</p>
{{/if}}
</div>
<div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-complain-management.svg" alt="complain-management" class="w-100">
</div>
</div>
{{#if (gt this.homeNotification.model.name 0)}}
<p class="text-danger font-weight-bold">Complain Management</p>
{{else}}
<p>Complain Management</p>
{{/if}}
</div>
<div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to "account-management"}}>
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-account-management.svg" alt="account-management" class="w-100">
</div>
</div>
{{#if (gt this.homeNotification.model.accountManagementErrorCount 0)}}
<p class="text-danger font-weight-bold">Account Management</p>
{{else}}
<p>Account Management</p>
{{/if}}
</div>
<div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to "vehicle-management"}}>
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-vehicle-management.svg" alt="vehicle-management" class="w-100">
</div>
</div>
{{#if (gt this.homeNotification.model.vehicleManagementErrorCount 0)}}
<p class="text-danger font-weight-bold">Vehicle Management</p>
{{else}}
<p>Vehicle Management</p>
{{/if}}
</div>
<div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to "dms-item-inquiry.index-filter"}}>
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-item-inquiry.svg" alt="item-inquiry" class="w-100">
</div>
</div>
{{#if (gt this.homeNotification.model.name 0)}}
<p class="text-danger font-weight-bold">Item Inquiry</p>
{{else}}
<p>Item Inquiry</p>
{{/if}}
</div>
<div class="col-4 col-sm-3 col-lg-2 text-center" data-toggle="modal" data-target="#mega-menu">
<div class="card mb-2">
<div class="card-body p-4">
<img src="{{rootURL}}assets/images/ic-ellips.svg" alt="more" class="w-100">
</div>
</div>
<p>More</p>
</div>
</div>
<div class="row mb-10">
<div class="col">
<div class="d-flex flex-column flex-lg-row align-items-stretched">
<div class="p-4 bg-white my-activity__container shadow">
<div class="d-flex align-items-center">
<div class="mr-4 px-0 col-auto px-0">
<img src="{{rootURL}}assets/images/ic-my-activity.svg" alt="my-activity" class="ic-my-activity">
</div>
<div class="text-black col px-0">
<h5 class="font-weight-bold">My Activity</h5>
<p class="m-0">Active: 4 Activities</p>
</div>
<div class="ml-4 mr-4 col-auto px-0">
<h3 class="m-0 text-hino-red-medium"><i class="fa fa-plus"></i></h3>
</div>
</div>
</div>
<div class="px-4 px-lg-0">
<div class="bg-hino-red-medium text-white px-5 py-4 d-flex justify-content-between align-items-center flex-grow-0 flex-shrink-0 my-activity__day">
<h5 class="font-weight-bold m-0 mr-md-5">{{moment-format (moment) 'dddd, D MMM YYYY'}}</h5>
<h5 class="m-0"><i class="fa fa-calendar"></i></h5>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-8">
<div class="col-12 col-lg-4">
<h5 class="font-weight-bold mb-4">Outstanding Transaction</h5>
<div class="card hino-card py-7 py-lg-0" onclick={{transition-to "inbox.outstanding-transaction-dms"}}>
<div class="card-body hino-card-body">
{{#if this.model.isPending}}
<AppLoading @home={{true}} />
{{else}}
<div class="d-flex justify-content-between flex-lg-column align-items-center align-items-lg-start">
<div class="mb-lg-3">
<h2>
{{this.model.outstandingTransactionCount}}
{{#if (gt this.model.outstandingTransactionNewCount 0)}}
<span class="badge badge-pill bg-hino-red text-white">{{ this.model.outstandingTransactionNewCount }}</span>
{{/if}}
</h2>
</div>
<img src="{{rootURL}}assets/images/logo-dms.svg" alt="DMS" class="mx-lg-auto card-logo logo-dms">
</div>
{{/if}}
</div>
</div>
</div>
<div class="col-12 col-lg-8">
<h5 class="font-weight-bold mb-4">Outstanding Approval</h5>
<div class="row">
<div class="col-6">
<div class="card hino-card" onclick={{transition-to "inbox.outstanding-approval-hoyu"}}>
{{#if this.model.isPending}}
<AppLoading @home={{true}} />
{{else}}
<div class="card-body hino-card-body">
<div class="d-flex flex-column">
<div class="mb-3">
<h2>
{{this.model.outstandingApprovalHoyuCount}}
{{#if (gt this.model.outstandingApprovalHoyuNewCount 0)}}
<span class="badge badge-pill bg-hino-red text-white">{{ this.model.outstandingApprovalHoyuNewCount }}</span>
{{/if}}
</h2>
</div>
<img src="{{rootURL}}assets/images/logo-hoyu.svg" alt="HOYU" class="mx-auto card-logo logo-hoyu">
</div>
</div>
{{/if}}
</div>
</div>
<div class="col-6">
<div class="hino-card card" onclick={{transition-to "inbox.outstanding-approval-dms"}} >
<div class="card-body hino-card-body">
{{#if this.model.isPending}}
<AppLoading @home={{true}} />
{{else}}
<div class="d-flex flex-column">
<div>
<h2 class="mb-3">
{{this.model.outstandingApprovalDmsCount}}
{{#if (gt this.model.outstandingApprovalDmsNewCount 0)}}
<span class="badge badge-pill bg-hino-red text-white">{{ this.model.outstandingApprovalDmsNewCount }}</span>
{{/if}}
</h2>
</div>
<img src="{{rootURL}}assets/images/logo-dms.svg" alt="DMS" class="mx-auto card-logo logo-dms">
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h5 class="font-weight-bold mb-4">News</h5>
<div class="card">
<div class="card-body hino-card-body">
<div class="row">
<div class="col-auto">
<div class="latest-news__image rounded" style="background-image: url(https://source.unsplash.com/20qcctvyR1Q/500x500)"></div>
</div>
<div class="col">
<h4 class="text-black font-weight-bold">Luncurkan Fasilitas Servis Kini Hino hadirkan Layanan 3S di Tokopedia</h4>
<p>ADMIN | {{moment-format (moment) 'D MMM YYYY'}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{!-- modal popup menu --}}
<div class="modal" id="mega-menu" role="dialog">
<div class="modal-dialog tryPopup">
{{!-- Modal content --}}
<div class="modal-content">
<div class="modal-header">
{{!-- <!-- <div data-dismiss="modal" class="close-modal" aria-label="Close" class="close"
data-target="#myModal">
×</div> --> --}}
<div class="tutup" data-dismiss="modal" aria-label="Close"></div>
</div>
<div class="modal-body">
<div class="col-12">
<Megamenu::List />
</div>
</div>
</div>
</div>
</div>
</div>