Contract No.
Start Date
End Date
Billing Model
Contract Status
Subscription Status
Total Revenue/Cost (USD)
498419 01/08/2020
31/07/2021
RS Billing
Current Active 2,345.00
507183 01/08/2020
31/07/2021
RS Billing
Current Active 1,453.00
444010 01/08/2020
31/07/2021
RS Billing
Current Active 1,785.00
498419 08/01/2020
31/07/2021
RS Billing
Current Cancelled 2,345.00
444010 08/01/2020
31/07/2021
RS Billing
Current Inactive 2,345.00
498419 08/01/2020
31/07/2021
RS Billing
Current Suspended 2,345.00
498419 08/01/2020
31/07/2021
RS Billing
Current Suspended 2,345.00
498419 08/01/2020
31/07/2021
RS Billing
Current Suspended 2,345.00
498419
08/01/2020
31/07/2021
RS Billing
Current Suspended 2,345.00
Subscription Name
Contract Number
Vendor Name
Renewal Date
Extended Price (USD)
Contract Status
Subscription Status
Seats
Actions
10241 Microsoft
31/07/2021
145.00
Current Active 3/7
3
3 Actions Required
Subscription can be re-activated up to 90 days after cancel
Subscription can be re-activated up to 90 days after cancel
Subscription can be re-activated up to 90 days after cancel
10241 Dropbox
31/07/2021
124.20
Current Active 5/6
10241 Microsoft
31/07/2021
145.00
Current Inactive 0/7
10241 Microsoft
31/07/2021
145.00
Current Scheduled 0/7
10241 Watchguard
31/07/2021
124.28
Current
0/7
10241 Google
31/07/2021
3.34
Current Action Required 0/7
Products
User
Vendor Name
Microsoft
Microsoft
Microsoft
Microsoft
Microsoft
Microsoft
Exchange Online (Plan 1)
Nerdio O365 Admin AdminPortalO365Admin6099@digitalsignages...
Zhihong Tang zhihongt@digitalsignageservice.onmicrosoftc...
Mike Morrison AdminPortalO365Admin6099@digitalsignages...
Bundle Name
Bundle ID
Quantity
Status
Total Price (USD)
4921136
1
Delivered 1,350.90
Hardware
Product Name
Vendor Name
SNX SKU#
SNX Part#
Extended Price (USD)
Microsoft Surface Pro
Microsoft
4921136
MST-FMN-00001
1,199.00
Services/Subscriptions
Subscription Name
Contract Number
Vendor Name
Renewal Date
Extended Price (USD)
Contract Status
Subscription Status
Seats
10241 Microsoft
31/07/2021
60.90
Current Active 5/6
3
3 Actions Required
Subscription can be re-activated up to 90 days after cancel
Subscription can be re-activated up to 90 days after cancel
Subscription can be re-activated up to 90 days after cancel
10241 Dropbox
31/07/2021
150.00
Current Inactive 0/7
3
3 Actions Required
Subscription can be re-activated up to 90 days after cancel
Subscription can be re-activated up to 90 days after cancel
Subscription can be re-activated up to 90 days after cancel
4921136
1
Delivered 1,350.90
4921136
1
Delivered 1,350.90
4921136
1
Delivered 1,350.90
4921136
1
Delivered 1,350.90
Abstergo Ltd. Customer Number: 184528
39 Pelham St. Ste. 250, Greenville, SC 29605 USA
Vendor Name
Agremeent Accepted
Accepted By
Date Time
Microsoft CSP Agreement rossk@synnex.com
06/27/2020
Microsoft CSP Agreement rossk@synnex.com
06/27/2020
Microsoft CSP Agreement rossk@synnex.com
06/27/2020
Microsoft CSP Agreement rossk@synnex.com
06/27/2020
Issue Date
Invoice #
Contract #
Sum (USD)
Incl Tax (USD)
Billing Period
Status
Action
01/01/2021
76284 28907636 23,125.20
23,312.20
02/01/2021 - 05/01/2020
Paid
11/11/2020
76281 78906237 12,616.20
12,830.20
06/11/2021 - 09/11/2020
Paid
10/31/2020
76390 07693728 18,428.20
18,740.20
10/31/2020 - 01/31/2021
Outstanding
06/05/2020
76254 90377628 21,070.20
21,125.20
02/06/2021 - 05/06/2021
Paid
Issue Date
Invoice #
Contract #
Sum (USD)
Incl Tax (USD)
Billing Period
Status
Action
12/01/2021
76234584 07636289 12,738.00
12,912.20
02/01/2021 - 05/01/2020
Paid
10/10/2020
76234528 78790623 67,195.20
67,325.20
06/11/2021 - 09/11/2020
Paid
08/12/2020
76283451 69372807 1,678.20
1,725.20
10/31/2020 - 01/31/2021
Paid
04/11/2020
76234525 28903776 1,125.20
1,200.20
02/06/2021 - 05/06/2021
Paid
Activity Log
Product
Contract
Vendor
Change Type
Entered by
Date
Net New Contract
Office 365 F3 04339 MICROSOFT CORP/CSP
Contract Change
Kristin Watson
08/27/2020
Net New Contract
Update Service 74875 MICROSOFT CORP/CSP
Contract Change
Kristin Watson
08/27/2020
Net New Contract
Update Contract 39235 MICROSOFT CORP/CSP
Contract Change
Kristin Watson
08/27/2020
Sync Activity
Product
Contract
Change Status
Entered by
Date
Net New Contract
Office 365 F3 04339 MICROSOFT CORP/CSP
Kristin Watson
08/27/2020
Update Service
Office 365 F3 74875 MICROSOFT CORP/CSP
Kristin Watson
08/27/2020
Update Contract
Office 365 F3 39235 MICROSOFT CORP/CSP
Kristin Watson
08/27/2020
Name
Email
Phone
Access Pernision
Status
Actions
Rachael Kelly
rachaelk@synnex.com (123)456-7890
GGCM-3651
Registered
Customer Spending Limit (USD)
Enabling Customer billing allows CloudSubscription will collect payment and remit your profit to you. The customer will be... nvoiced via credit card and only for services that SYNNEX offers, custom reseller services will not be billed through CloudSubscription. The customer will be required to eSign an agreement before any services can be purchased or billed. Services will be billed as soon as the customer is enabled. Contact stellr@synnex.com with any question(s).
Agent Billing Accepted at 06/24/2021 by contact David Zhang(ecittest@synnex.com)
Select "Use Default Settings" to use the setting set under Storefront Setting > Payment Gateway Settings. Select "Use Customer Specifc Settings" below to specify different payment setting for the currently selected user.
1. Supported Payment Methods *
2. Invoice Creation *
3. Payment Grace Period Of *
Invoice Trend By Month
Some features are not supported by the Legacy Azure plan. Reach out to msftcsp@synnex.com to learn about the New Azure plan.
<div class="row mainTab">
<div class="col-md-12">
<div class="refine-div" style="display: none;">
<ul class="refine-by-links pl-0 mt-2 d-flex" style="display: none;">
<li class="list-name"><span>Refine By</span></li>
<li class="dropdown dropdown-left">
<a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Customer Type <i class="icon-arrow-bottom ml-2"></i> </a>
<div class="dropdown-menu" style="">
<ul class="sub-dropdown-menu pl-0 m-0">
<li><a href="javascript:void(0)" class="dropdown-item"><span>New Customers</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Recent Customers</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Top Performing </span></a></li>
</ul>
</div>
</li>
<li class="dropdown dropdown-left">
<a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Business Value <i class="icon-arrow-bottom ml-2"></i> </a>
<div class="dropdown-menu">
<ul class="sub-dropdown-menu pl-0 m-0">
<li><a href="javascript:void(0)" class="dropdown-item"><span>Above $10K</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Above $50K</span></a></li>
</ul>
</div>
</li>
<li class="dropdown dropdown-left price-range">
<a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Service Status <i class="icon-arrow-bottom ml-2"></i> </a>
<div class="dropdown-menu">
<ul class="sub-dropdown-menu pl-0 m-0">
<li><a href="javascript:void(0)" class="dropdown-item"><span>Active Services</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Cancelled Services</span></a></li>
</ul>
</div>
</li>
<li class="dropdown dropdown-left mr-auto">
<a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contracts <i class="icon-arrow-bottom ml-2"></i> </a>
<div class="dropdown-menu">
<ul class="sub-dropdown-menu pl-0">
<li><a href="javascript:void(0)" class="dropdown-item"><span>Agent Billing Contracts</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Contracts with Alert</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Suspended Contracts</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Subscriptions expiring within next 90 days</span></a></li>
</ul>
</div>
</li>
<li class="list-name">
<div><a class="clearAllRefine clearAllFilter" href="javascript:void(0);"><span>Clear All</span></a> </div>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="custom-tab-col">
<div class="overview-tabs mx-auto action-tabs mb-0">
<a href="javascript:void(0);" class="active" data-active="prod-mgmt">Product Management</a>
<a href="javascript:void(0);" data-active="cust-info" class="prod">Customer Information</a>
<a href="javascript:void(0);" data-active="agreements">Agreements (4)</a>
<a href="javascript:void(0);" class="bill" data-active="bill-histry">Billing History (4)</a>
<a href="javascript:void(0);" data-active="audit-trl" class="prod">Audit Trail</a>
<a href="javascript:void(0);" data-active="store-access">Storefront Access</a>
</div>
</div>
</div>
<!--prduct management-->
<div class="col-md-12 selectedTab prod-mgmt">
<div class="cust-summary-section p-0">
<nav class="all-vendor-tabs custom-tabs">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active cust" id="contract-tab" data-toggle="tab" href="#contracttab" role="tab" aria-controls="contracttab" aria-selected="true">
<span>Contracts (89) </span>
</a>
<a class="nav-item nav-link global-cust" id="servicesSubscriptions-tab" data-toggle="tab" href="#servicesSubscriptionstab" role="tab" aria-controls="servicesSubscriptionstab" aria-selected="false">
<span>Services/Subscriptions (10) </span>
</a>
<a class="nav-item nav-link global-cust" id="hardware-tab" data-toggle="tab" href="#hardwaretab" role="tab" aria-controls="hardwaretab" aria-selected="false">
<span>Hardware (10) </span>
</a>
<a class="nav-item nav-link global-cust" id="licenses-tab" data-toggle="tab" href="#licensestab" role="tab" aria-controls="licensestab" aria-selected="false">
<span>Licenses (10) </span>
</a>
<a class="nav-item nav-link global-cust" id="bundle-tab" data-toggle="tab" href="#bundletab" role="tab" aria-controls="bundletab" aria-selected="false">
<span>Bundle (6) </span>
</a>
<a class="nav-item nav-link global-cust" id="user-tab" data-toggle="tab" href="#usertab" role="tab" aria-controls="usertab" aria-selected="false">
<span>User (10) </span>
</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<!--contract section-->
<div class="tab-pane fade active show" id="contracttab" role="tabpanel" aria-labelledby="contract-tab">
<div class="summary-contract-table cont selectedSection px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="15%"> Contract No. </th>
<th scope="col" width="14%">Start Date</th>
<th scope="col" width="14%">End Date </th>
<th scope="col" width="13%">Billing Model</th>
<th scope="col" width="14%">Contract Status </th>
<th scope="col" width="13%">Subscription Status</th>
<th scope="col" width="17%" class="text-right">Total Revenue/Cost <span class="price-denom">(USD)</span></th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">498419</a></td>
<td>01/08/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar active">Active</span></td>
<td class="text-right">2,345.00</td>
</tr>
<tr>
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">507183</a></td>
<td>01/08/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar active">Active</span></td>
<td class="text-right">1,453.00</td>
</tr>
<tr>
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">444010</a></td>
<td>01/08/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar active">Active</span></td>
<td class="text-right">1,785.00</td>
</tr>
<tr class="cancelled-row">
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">498419</a></td>
<td>08/01/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar cancelled">Cancelled</span></td>
<td class="text-right">2,345.00</td>
</tr>
<tr class="row-disabled">
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">444010</a></td>
<td>08/01/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar inactive">Inactive</span></td>
<td class="text-right">2,345.00</td>
</tr>
<tr class="suspended-row">
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">498419</a></td>
<td>08/01/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar suspended">Suspended</span></td>
<td class="text-right">2,345.00</td>
</tr>
<tr class="suspended-row">
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">498419</a></td>
<td>08/01/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar suspended">Suspended</span></td>
<td class="text-right">2,345.00</td>
</tr>
<tr class="suspended-row">
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">498419</a></td>
<td>08/01/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar suspended">Suspended</span></td>
<td class="text-right">2,345.00</td>
</tr>
<tr class="suspended-row">
<td><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i>
<a href="javascript:void(0);">498419</a>
</td>
<td>08/01/2020</td>
<td>31/07/2021</td>
<td>RS Billing</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar suspended">Suspended</span></td>
<td class="text-right">2,345.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--contract section-->
<!--Services/Subscriptions section-->
<div class="tab-pane fade" id="servicesSubscriptionstab" role="tabpanel" aria-labelledby="servicesSubscriptions-tab">
<div class="summary-contract-table px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table service-table adminTable" data-flyout="subscription-flyout">
<thead class="thead-light">
<tr>
<th scope="col" width="22%"> Subscription Name </th>
<th scope="col" width="7%">Contract Number</th>
<th scope="col" width="10%">Vendor Name </th>
<th scope="col" width="10%">Renewal Date</th>
<th scope="col" width="8%" class="text-right">Extended Price <span class="price-denom">(USD)</span></th>
<th scope="col" width="10%">Contract Status</th>
<th scope="col" width="13s%">Subscription Status</th>
<th scope="col" width="8%">Seats</th>
<th scope="col" width="7%">Actions</th>
<th scope="col" width="5%"> </th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr class="prod-row main-product-row">
<td class="flex-col">
<div class="d-flex">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);" class="openRtFly" data-flyout="servicesubsc">Mailbox with Outlook</a><br> <span class="per-val">(per User)</span> </div>
<div class="action-icons ml-4"><a href="javascript:void(0)" class="edit-sub-icon"><i class="icon-sync" data-toggle="tooltip" data-placement="top" title="" data-original-title="Synced to Autotask"></i></a></div>
</div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Microsoft </td>
<td>31/07/2021</td>
<td class="text-right">145.00</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar active">Active</span></td>
<td>3/<strong>7</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li data-toggle="modal" data-target="#helpdeskModal"><a href="javascript:void(0);"><i class="icon-help"></i>
<span>Customer Helpdesk Support</span></a>
</li>
<li data-toggle="modal" data-target="#tempCredentialsModal"><a href="javascript:void(0);"><i class="icon-google-id"></i>
<span>Retrieve Temporary Credentials</span></a>
</li>
<li data-toggle="modal" data-target="#vendorsyncModal"><a href="javascript:void(0);"><i class="icon-cyclist"></i>
<span>Vendor Sync</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncCont"><i class="icon-catalog"></i>
<span>Sync Contract</span></a>
</li>
<li><a href="javascript:void(0);" class="openUserTab"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required">
<a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">3</span>
<div class="alert-list" style="display: none;">
<i class="icon-action-arrow"></i>
<h6>3 Actions Required</h6>
<div class="alert alert-warning mt-0"><i></i><span>Subscription can be re-activated up to 90 days after cancel </span></div>
<div class="alert alert-info"><i></i><span>Subscription can be re-activated up to 90 days after cancel</span></div>
<div class="alert alert-danger"><i></i><span>Subscription can be re-activated up to 90 days after cancel </span></div>
</div>
</div>
</td>
</tr>
<tr class="addOnRow product-addOn addon-shadow customer-add-on">
<td colspan="10" class="p-0 border-0">
<div class="add-on-section toggle-box">
<div class="border-div">
<a href="javascript:void(0)" class="add-ons toggleAddOn active">
<i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand"></i> <span>Add Ons <strong>(2)</strong></span>
</a>
<span class="border-dash"></span>
</div>
<div class="addOnTable customer-tabel-col agreement-table" style="display: none;">
<table class="">
<tbody>
<tr>
<td style="width: 19%;"><a href=""><strong>MST Stream P2 for O365 Add-Ons</strong></a></td>
<td style="width: 7%;">4921134</td>
<td style="width: 10%;">Microsoft </td>
<td style="width: 4%;">31/07/2021</td>
<td style="width: 12%;" class="text-right">2.80</td>
<td style="width: 12%;"><span class="status-bar current">Current</span></td>
<td style="width: 15%;"><span class="status-bar active">Active</span></td>
<td style="width: 8%;"></td>
<td style="width: 15%;">
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li><a href="javascript:void(0);" class="openUserTab"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#removeAddonModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Remove Add-On"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td style="width: 19%;"><a href=""><strong>Office 365 Extra File Storage</strong>s</a></td>
<td style="width: 8%;">4921134</td>
<td style="width: 11%;">Microsoft </td>
<td style="width: 3%;">31/07/2021</td>
<td style="width: 12%;" class="text-right">4.80</td>
<td style="width: 12%;"><span class="status-bar current">Current</span></td>
<td style="width: 15%;"><span class="status-bar active">Active</span></td>
<td style="width: 8%;"></td>
<td style="width: 15%;">
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li><a href="javascript:void(0);" class="openUserTab"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#removeAddonModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Remove Add-On"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td class="flex-col">
<div class="d-flex">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Dropbox Bus. Adv...</a><br> <span class="per-val"> (per User)</span></div>
<div class="action-icons ml-4"><a href="javascript:void(0)" class="edit-sub-icon"><i class="icon-sync" data-toggle="tooltip" data-placement="top" title="" data-original-title="Synced to Autotask"></i></a></div>
</div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Dropbox </td>
<td>31/07/2021</td>
<td class="text-right">124.20</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar active">Active</span></td>
<td>5/<strong>6</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li data-toggle="modal" data-target="#helpdeskModal"><a href="javascript:void(0);"><i class="icon-help"></i>
<span>Customer Helpdesk Support</span></a>
</li>
<li data-toggle="modal" data-target="#tempCredentialsModal"><a href="javascript:void(0);"><i class="icon-google-id"></i>
<span>Retrieve Temporary Credentials</span></a>
</li>
<li data-toggle="modal" data-target="#vendorsyncModal"><a href="javascript:void(0);"><i class="icon-cyclist"></i>
<span>Vendor Sync</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncCont"><i class="icon-catalog"></i>
<span>Sync Contract</span></a>
</li>
<li><a href="javascript:void(0);"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required"><a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">4</span></div>
</td>
</tr>
<tr>
<td class="flex-col">
<div class="d-flex">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Faxvia Email: Packages</a><br> <span class="per-val">(per User)</span></div>
<div class="action-icons ml-4"><a href="javascript:void(0)" class="edit-sub-icon"><i class="icon-sync" data-toggle="tooltip" data-placement="top" title="" data-original-title="Synced to Autotask"></i></a></div>
</div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Microsoft </td>
<td>31/07/2021</td>
<td class="text-right">145.00</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar inactive">Inactive</span></td>
<td>0/<strong>7</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li data-toggle="modal" data-target="#helpdeskModal"><a href="javascript:void(0);"><i class="icon-help"></i>
<span>Customer Helpdesk Support</span></a>
</li>
<li data-toggle="modal" data-target="#tempCredentialsModal"><a href="javascript:void(0);"><i class="icon-google-id"></i>
<span>Retrieve Temporary Credentials</span></a>
</li>
<li data-toggle="modal" data-target="#vendorsyncModal"><a href="javascript:void(0);"><i class="icon-cyclist"></i>
<span>Vendor Sync</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncCont"><i class="icon-catalog"></i>
<span>Sync Contract</span></a>
</li>
<li><a href="javascript:void(0);"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required"><a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">3</span></div>
</td>
</tr>
<tr class="cancelled-row">
<td class="flex-col">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Blackberry</a><br> <span class="per-val">(per User)</span></div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Microsoft </td>
<td>31/07/2021</td>
<td class="text-right">145.00</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar suspended">Scheduled</span></td>
<td>0/<strong>7</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Activate"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-successful-outline"></i>
<span>Activate Now</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-cancelled"></i>
<span>Remove Schedule</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required"><a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">1</span></div>
</td>
</tr>
<tr>
<td class="flex-col">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Firebox T40 W/1-Mon TTL...</a><br> <span class="per-val">(per User)</span></div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Watchguard </td>
<td>31/07/2021</td>
<td class="text-right">124.28</td>
<td><span class="status-bar current">Current</span></td>
<td>
<div class="link-text-more moreMainDiv">
<a href="javascript:void(0);" class="openMoreFly verify-serial">Verify Serial Number</a>
<div class="text-more-flyout" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<h6>Verify Serial Number</h6>
<div class="temp-details">
<label class="mt-2">Watchguard Serial Number <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding validateSN" value="D0270330BED3C">
</div>
<div class="mini-flyout-footer-btns">
<input type="button" class="btn btn-outline ml-auto cancelVerify" value="Cancel">
<input type="button" class="btn btn-primary verifyCust" value="Verify">
</div>
</div>
</div>
</div>
</td>
<td>0/<strong>7</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService disabled"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li data-toggle="modal" data-target="#helpdeskModal"><a href="javascript:void(0);"><i class="icon-help"></i>
<span>Customer Helpdesk Support</span></a>
</li>
<li data-toggle="modal" data-target="#tempCredentialsModal"><a href="javascript:void(0);"><i class="icon-google-id"></i>
<span>Retrieve Temporary Credentials</span></a>
</li>
<li data-toggle="modal" data-target="#vendorsyncModal"><a href="javascript:void(0);"><i class="icon-cyclist"></i>
<span>Vendor Sync</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncCont"><i class="icon-catalog"></i>
<span>Sync Contract</span></a>
</li>
<li><a href="javascript:void(0);"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required"><a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">5</span></div>
</td>
</tr>
<tr class="">
<td class="flex-col">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Chrome Enterprise License...</a><br> <span class="per-val">(per User)</span></div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Google </td>
<td>31/07/2021</td>
<td class="text-right">3.34</td>
<td><span class="status-bar current">Current</span></td>
<td><a href="javascript:void(0);">Action Required</a></td>
<td>0/<strong>7</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService disabled"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li data-toggle="modal" data-target="#helpdeskModal"><a href="javascript:void(0);"><i class="icon-help"></i>
<span>Customer Helpdesk Support</span></a>
</li>
<li data-toggle="modal" data-target="#tempCredentialsModal"><a href="javascript:void(0);"><i class="icon-google-id"></i>
<span>Retrieve Temporary Credentials</span></a>
</li>
<li data-toggle="modal" data-target="#vendorsyncModal"><a href="javascript:void(0);"><i class="icon-cyclist"></i>
<span>Vendor Sync</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncCont"><i class="icon-catalog"></i>
<span>Sync Contract</span></a>
</li>
<li><a href="javascript:void(0);"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required"><a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">2</span></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--Services/Subscriptions section-->
<!--Hardware section-->
<div class="tab-pane fade hardware-section" id="hardwaretab" role="tabpanel" aria-labelledby="hardware-tab">
<div class="summary-contract-table px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table service-table adminTable" data-flyout="subscription-flyout">
<thead class="thead-light">
<tr>
<th scope="col" width="35%"> Hardware Name </th>
<th scope="col" width="15%">Vendor Name</th>
<th scope="col" width="15%">SNX SKU# </th>
<th scope="col" width="20%">SNX Part#</th>
<th scope="col" width="15%"> Status</th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td class="flex-col"><i class="icon-server"><span class="path1"></span><span class="path2"></span></i>
<a href="javascript:void(0);" class="openRtFly" data-flyout="hardware-flyout">Surface Keyboard Commer SC Bluetooth</a>
</td>
<td>Microsoft </td>
<td>4923476</td>
<td>MST-FMN-00001</td>
<td><span class="status-bar active">Delivered</span></td>
</tr>
<tr>
<td class="flex-col">
<i class="icon-server"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">Firebox T40 W/1-Mon TTL SEC STE Sub</a>
<div class="custom-flyout copy-flyout moreMainDiv">
<a href="javascript:void(0);" class="openMoreFly"> <span class="subs-lbl">Subs</span></a>
<div class="custom-flyout-inner" style=" display: none;">
<i class="icon-action-arrow"></i>
<label>Included Subscription</label><br>
<span>Included Subscription
Firebox T40 W/1-Mon TTL SEC STE Sub
Subs ID: E3FFE3E9-0C32-4890-9A27-6D29C4484C51 <br>
<a href="javascript:void(0);">View Detail</a></span>
</div>
</div>
</td>
<td>Microsoft </td>
<td>4923476</td>
<td>MST-FMN-00001</td>
<td><span class="status-bar active">Delivered</span></td>
</tr>
<tr>
<td class="flex-col"><i class="icon-server"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">Catalyst 8500-12X4QC</a></td>
<td>Cisco </td>
<td>4923476</td>
<td>MST-FMN-00001</td>
<td><span class="status-bar active">Delivered</span></td>
</tr>
<tr>
<td class="flex-col"><i class="icon-server"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">HP 90W Slim AC Adapter</a></td>
<td>HP SMB Solution </td>
<td>4923476</td>
<td>MST-FMN-00001</td>
<td><span class="status-bar cancelled">Cancelled</span></td>
</tr>
<tr>
<td class="flex-col"><i class="icon-server"><span class="path1"></span><span class="path2"></span></i><a href="javascript:void(0);">Dell Latitude 3310 13.3" Notebook </a></td>
<td>Dell </td>
<td>4923476</td>
<td>MST-FMN-00001</td>
<td><span class="status-bar current">In transit</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>5</option>
<option>10</option>
<option>15</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--Hardware section-->
<!--license section-->
<div class="tab-pane fade license-section" id="licensestab" role="tabpanel" aria-labelledby="licensestab">
<div class="summary-contract-table licence px-3">
<div class="row table1 col-custom-padding">
<div class="col-md-8">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="35%">Products </th>
<th scope="col" width="15%">User</th>
<th scope="col" width="15%">Vendor Name</th>
<th scope="col" width="20%"> </th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td class="exchange-col"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i> Exchange Online (Plan 1)</td>
<td>
<div class="user-val"><span class="user-first"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assigned"><i class="icon-user-tick"><span class="path1"></span><span class="path2"></span></i></a> <span>3</span></span> <span class="user-second"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Unassigned"><i class="icon-user-cross"><span class="path1"></span><span class="path2"></span></i></a> <span>7</span></span></div>
</td>
<td>Microsoft </td>
<td>
<div class="license-action-links"><a href="javascript:void(0)" class="" data-toggle="modal" data-target="#managelicenseModal"><i class="icon-exchange" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSub1Modal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
<tr>
<td class="exchange-col"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i> Microsoft Surface Pro</td>
<td>
<div class="user-val"><span class="user-first"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assigned"><i class="icon-user-tick"><span class="path1"></span><span class="path2"></span></i></a> <span>2</span></span> <span class="user-second"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Unassigned"><i class="icon-user-cross"><span class="path1"></span><span class="path2"></span></i></a> <span>8</span></span></div>
</td>
<td>Microsoft </td>
<td>
<div class="license-action-links"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSub1Modal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
<tr>
<td class="exchange-col"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i> Exchange Online (Plan 2)</td>
<td>
<div class="user-val"><span class="user-first"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assigned"><i class="icon-user-tick"><span class="path1"></span><span class="path2"></span></i></a> <span>5</span></span> <span class="user-second"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Unassigned"><i class="icon-user-cross"><span class="path1"></span><span class="path2"></span></i></a> <span>9</span></span></div>
</td>
<td>Microsoft </td>
<td>
<div class="license-action-links"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSub1Modal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
<tr>
<td class="exchange-col"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i> Exchange Online Protection</td>
<td>
<div class="user-val"><span class="user-first"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assigned"><i class="icon-user-tick"><span class="path1"></span><span class="path2"></span></i></a> <span>3</span></span> <span class="user-second"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Unassigned"><i class="icon-user-cross"><span class="path1"></span><span class="path2"></span></i></a> <span>7</span></span> </div>
</td>
<td>Microsoft </td>
<td>
<div class="license-action-links"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSub1Modal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
<tr>
<td class="exchange-col"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i> Office 365 Enterprise E1</td>
<td>
<div class="user-val"><span class="user-first"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assigned"><i class="icon-user-tick"><span class="path1"></span><span class="path2"></span></i></a> <span>1</span></span> <span class="user-second"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Unassigned"><i class="icon-user-cross"><span class="path1"></span><span class="path2"></span></i></a> <span>5</span></span> </div>
</td>
<td>Microsoft </td>
<td>
<div class="license-action-links"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSub1Modal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
<tr>
<td class="exchange-col"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i> Microsoft 365 Business Standard</td>
<td>
<div class="user-val"> <span class="user-first"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assigned"><i class="icon-user-tick"><span class="path1"></span><span class="path2"></span></i></a> <span>2</span></span> <span class="user-second"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Unassigned"><i class="icon-user-cross"><span class="path1"></span><span class="path2"></span></i></a> <span>5</span></span></div>
</td>
<td>Microsoft </td>
<td>
<div class="license-action-links"><a href="javascript:void(0)" class="" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><i class="icon-exchange"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSub1Modal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<div class="license-product-details">
<i class="icon-left-arrow1"></i>
<h4>Exchange Online (Plan 1) <a href="javascript:void(0);" class="float-right openAddUserModal" data-toggle="modal" ><i class="icon-add-user" data-toggle="tooltip" data-placement="top" title="Add a User"><span class="path1"></span><span class="path2"></span></i></a></h4>
<img src="images/license-pie-chart.png" class="rounded mx-auto d-block my-3"/>
<ul class="license-user-list">
<li>
<i class="icon-user-name"></i>
<div class="user-information"><label>Nerdio O365 Admin</label> <span>AdminPortalO365Admin6099@digitalsignages...</span></div>
</li>
<li>
<i class="icon-user-name"></i>
<div class="user-information"><label>Zhihong Tang</label> <span>zhihongt@digitalsignageservice.onmicrosoftc...</span></div>
</li>
<li>
<i class="icon-user-name"></i>
<div class="user-information"><label>Mike Morrison</label> <span>AdminPortalO365Admin6099@digitalsignages...</span></div>
</li>
</ul>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>6</option>
<option>12</option>
<option>18</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--license section-->
<!--bundle section-->
<div class="tab-pane fade bundle-section" id="bundletab" role="tabpanel" aria-labelledby="bundletab">
<div class="summary-contract-table px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table service-table adminTable" data-flyout="subscription-flyout">
<thead class="thead-light">
<tr>
<th scope="col" width="22%"> Bundle Name </th>
<th scope="col" width="7%">Bundle ID</th>
<th scope="col" width="10%">Quantity </th>
<th scope="col" width="10%">Status</th>
<th scope="col" width="8%" class="text-right">Total Price <span class="price-denom">(USD)</span></th>
</tr>
</thead>
<tbody>
<tr class="prod-row main-product-row">
<td class="flex-col">
<i class="icon-bundle"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);" class="openRtFly" data-flyout="microsoft-pro">Microsoft Surface Pro with Cloud Bundle</a></div>
</td>
<td>4921136</td>
<td>1 </td>
<td><span class="status-bar active">Delivered</span></td>
<td class="text-right">1,350.90</td>
</tr>
<tr class="addOnRow product-addOn addon-shadow customer-add-on">
<td colspan="10" class="p-0 border-0">
<div class="add-on-section toggle-box">
<div class="border-div">
<a href="javascript:void(0)" class="add-ons toggleAddOn active">
<i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand"></i>
<span class="view">View Detail </span>
<span class="hide" style="display: none;">Hide Detail</span>
</a>
<span class="border-dash"></span>
</div>
<div class="addOnTable customer-tabel-col agreement-table mt-2" style="display: none;">
<div class="cutomer-container border-top-0">
<h1 class="totalCustomer-heading mt-0"><strong>Hardware</strong></h1>
<!--cutomer box section-->
<div class="customers-box">
<div class="customer-tabel-col">
<table>
<thead>
<tr>
<th class="subscription-th">Product Name</th>
<th class="billingType">Vendor Name</th>
<th class="startDate">SNX SKU#</th>
<th class="renewDate">SNX Part#</th>
<th class="status-th text-right">Extended Price <span class="price-denom">(USD)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="flex-col"><i class="icon-server"><span class="path1"></span><span class="path2"></span></i>
<a href="javascript:void(0);" class="openRtFly" data-flyout="hardware-flyout">Microsoft Surface Pro</a>
</td>
<td>Microsoft</td>
<td>4921136</td>
<td>MST-FMN-00001</td>
<td class="text-right">
1,199.00
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--cutomer box section-->
<h1 class="totalCustomer-heading"><strong>Services/Subscriptions</strong></h1>
<!--cutomer box section-->
<div class="customers-box">
<div class="customer-tabel-col">
<table>
<thead>
<tr>
<th class="subscription-th">Subscription Name</th>
<th class="billingType">Contract Number</th>
<th class="startDate">Vendor Name</th>
<th class="renewDate">Renewal Date</th>
<th class="status-th text-right">Extended Price <span class="price-denom">(USD)</span></th>
<th>Contract Status</th>
<th>Subscription Status</th>
<th>Seats</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="flex-col">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);" class="openRtFly" data-flyout="servicesubsc">Microsoft 365 Basic</a><br> <span class="per-val">(per User)</span></div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Microsoft </td>
<td>31/07/2021</td>
<td class="text-right">60.90</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar active">Active</span></td>
<td>5/<strong>6</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li data-toggle="modal" data-target="#helpdeskModal"><a href="javascript:void(0);"><i class="icon-help"></i>
<span>Customer Helpdesk Support</span></a>
</li>
<li data-toggle="modal" data-target="#tempCredentialsModal"><a href="javascript:void(0);"><i class="icon-google-id"></i>
<span>Retrieve Temporary Credentials</span></a>
</li>
<li data-toggle="modal" data-target="#vendorsyncModal"><a href="javascript:void(0);"><i class="icon-cyclist"></i>
<span>Vendor Sync</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncCont"><i class="icon-catalog"></i>
<span>Sync Contract</span></a>
</li>
<li><a href="javascript:void(0);"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required">
<a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">3</span>
<div class="alert-list" style="display: none;">
<i class="icon-action-arrow"></i>
<h6>3 Actions Required</h6>
<div class="alert alert-warning mt-0"><i></i><span>Subscription can be re-activated up to 90 days after cancel </span></div>
<div class="alert alert-info"><i></i><span>Subscription can be re-activated up to 90 days after cancel</span></div>
<div class="alert alert-danger"><i></i><span>Subscription can be re-activated up to 90 days after cancel </span></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="flex-col">
<i class="icon-active-subscriptions"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Dropbox Standard</a><br> <span class="per-val">(per User)</span></div>
</td>
<td><a href="javascript:void(0);">10241</a></td>
<td>Dropbox </td>
<td>31/07/2021</td>
<td class="text-right">150.00</td>
<td><span class="status-bar current">Current</span></td>
<td><span class="status-bar inactive">Inactive</span></td>
<td>0/<strong>7</strong></td>
<td>
<div class="action-icons">
<div class="custom-flyout customer-edit-flyout">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Manage"></i></a>
<div class="custom-flyout-inner" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<ul class="">
<li data-toggle="modal" data-target="#editSubModal"><a href="javascript:void(0);"><i class="icon-manage-seat"></i>
<span>Manage Seats</span></a>
</li>
<li data-toggle="modal" data-target="#addOnsModal"><a href="javascript:void(0);"><i class="icon-add-on"></i>
<span>Add On</span> </a>
</li>
<li data-toggle="modal" data-target="#helpdeskModal"><a href="javascript:void(0);"><i class="icon-help"></i>
<span>Customer Helpdesk Support</span></a>
</li>
<li data-toggle="modal" data-target="#tempCredentialsModal"><a href="javascript:void(0);"><i class="icon-google-id"></i>
<span>Retrieve Temporary Credentials</span></a>
</li>
<li data-toggle="modal" data-target="#vendorsyncModal"><a href="javascript:void(0);"><i class="icon-cyclist"></i>
<span>Vendor Sync</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncCont"><i class="icon-catalog"></i>
<span>Sync Contract</span></a>
</li>
<li><a href="javascript:void(0);"><i class="icon-customers"></i>
<span>User Management</span></a>
</li>
<li><a href="javascript:void(0);" class="openRtFly" data-flyout="syncAutotask"><i class="icon-sync"></i>
<span>Sync to Autotask</span> </a>
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Cancel Subscription"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
<td class="alert-number-section">
<div class="action-required">
<a href="javascript:void(0)" class=""><i class="icon-threedot-circle"></i> </a> <span class="alert-count">3</span>
<div class="alert-list" style="display: none;">
<i class="icon-action-arrow"></i>
<h6>3 Actions Required</h6>
<div class="alert alert-warning mt-0"><i></i><span>Subscription can be re-activated up to 90 days after cancel </span></div>
<div class="alert alert-info"><i></i><span>Subscription can be re-activated up to 90 days after cancel</span></div>
<div class="alert alert-danger"><i></i><span>Subscription can be re-activated up to 90 days after cancel </span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--cutomer box section-->
</div>
</div>
</div>
</td>
</tr>
<tr class="prod-row main-product-row">
<td class="flex-col">
<i class="icon-bundle"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);" >Microsoft Surface Pro with Meetings Bundle</a></div>
</td>
<td>4921136</td>
<td>1 </td>
<td><span class="status-bar active">Delivered</span></td>
<td class="text-right">1,350.90</td>
</tr>
<tr class="addOnRow product-addOn addon-shadow customer-add-on">
<td colspan="10" class="p-0 border-0">
<div class="add-on-section toggle-box">
<div class="border-div">
<a href="javascript:void(0)" class="add-ons toggleAddOn active">
<i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand"></i> <span class="view">View Detail </span>
<span class="hide" style="display: none;">Hide Detail</span>
</a>
<span class="border-dash"></span>
</div>
</div>
</td>
</tr>
<tr class="prod-row main-product-row">
<td class="flex-col">
<i class="icon-bundle"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Meetings with Security Bundle</a></div>
</td>
<td>4921136</td>
<td>1 </td>
<td><span class="status-bar active">Delivered</span></td>
<td class="text-right">1,350.90</td>
</tr>
<tr class="addOnRow product-addOn addon-shadow customer-add-on">
<td colspan="10" class="p-0 border-0">
<div class="add-on-section toggle-box">
<div class="border-div">
<a href="javascript:void(0)" class="add-ons toggleAddOn active">
<i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand"></i><span class="view">View Detail </span>
<span class="hide" style="display: none;">Hide Detail</span>
</a>
<span class="border-dash"></span>
</div>
</div>
</td>
</tr>
<tr class="prod-row main-product-row">
<td class="flex-col">
<i class="icon-bundle"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Cisco Security with Kaspersky Endpoint Cloud</a></div>
</td>
<td>4921136</td>
<td>1 </td>
<td><span class="status-bar active">Delivered</span></td>
<td class="text-right">1,350.90</td>
</tr>
<tr class="addOnRow product-addOn addon-shadow customer-add-on">
<td colspan="10" class="p-0 border-0">
<div class="add-on-section toggle-box">
<div class="border-div">
<a href="javascript:void(0)" class="add-ons toggleAddOn active">
<i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand"></i><span class="view">View Detail </span>
<span class="hide" style="display: none;">Hide Detail</span>
</a>
<span class="border-dash"></span>
</div>
</div>
</td>
</tr>
<tr class="prod-row main-product-row">
<td class="flex-col">
<i class="icon-bundle"><span class="path1"></span><span class="path2"></span></i>
<div class="service-name"><a href="javascript:void(0);">Microsoft Surface Pro with Security Bundle</a></div>
</td>
<td>4921136</td>
<td>1 </td>
<td><span class="status-bar active">Delivered</span></td>
<td class="text-right">1,350.90</td>
</tr>
<tr class="addOnRow product-addOn addon-shadow customer-add-on">
<td colspan="10" class="p-0 border-0">
<div class="add-on-section toggle-box">
<div class="border-div">
<a href="javascript:void(0)" class="add-ons toggleAddOn active">
<i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand"></i><span class="view">View Detail </span>
<span class="hide" style="display: none;">Hide Detail</span>
</a>
<span class="border-dash"></span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--bundle section-->
<!--user section-->
<div class="tab-pane fade user-section" id="usertab" role="tabpanel" aria-labelledby="usertab">
<div class="row mt-4 px-3">
<div class="col-md-3">
<div class="products-search">
<div class="search-input-col w-100 mr-0">
<i class="icon-cross" style="display: none;"></i>
<i class="icon-search"></i>
<input type="text" class="form-control form-control-padding search-category ui-autocomplete-input" placeholder="Search by name or ID" autocomplete="off">
<ul id="ui-id-2" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="float-right">
<span class="col-auto dropdown sort-filter ml-auto">
<span class="mx-2">Sort by: <i class="icon-sort-arrow" data-toggle="tooltip" ><span class="path1"></span><span class="path2"></span></i></span>
<a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class=""> <span class="link-text" >All Users</span> <i class="icon-arrow-bottom ml-2"></i> </a>
<div class="dropdown-menu">
<ul class="sub-dropdown-menu pl-0">
<li><a href="javascript:void(0)" class="dropdown-item"><span>All Users</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Licensed Users</span></a></li>
<li><a href="javascript:void(0)" class="dropdown-item"><span>Unlicensed Users</span></a></li>
</ul>
</div>
</span>
</div>
</div>
</div>
<div class="row px-3">
<div class="col-md-12 gateway-accordion">
<div class="accordion custom-accordion ">
<div class="card active">
<div class="card-header p-0 d-inline-block" >
<div class="row">
<div class="col-auto">
<div class="user-detail-part">
<i class="icon-subscription-globe"></i>
<div>
<label>Google Tenant Domain</label><br>
<span>
<a href="javascript:void(0);">googtest.hiramh10088.uat.reseller.synnex.com.synnex.business</a></span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="user-detail-part">
<i class="icon-google-id"></i>
<div>
<label>Google Tenant ID</label>
<span>
C027svz3t</span>
</div>
</div>
</div>
<div class="col-auto">
<div class="user-detail-part">
<i class="icon-license"></i>
<div class="license-assigned">
<label>Licenses Assigned</label><br>
<ul class="pl-0">
<li>Google Workspace Business Plus Flex (1/5),</li>
<li>Chrome Enterprise (0/1)</li>
<li class="showAll" style="display: none;">G Suite (1/5)</li>
<li class="showAll" style="display: none;">Chrome Enterprise License (1/5)</li>
<li class="showAll" style="display: none;">G Suite (Arrears Billing) (1/5)</li>
</ul>
<a href="javascript:void(0);" class="view-more-link more">View More (3)</a>
<a href="javascript:void(0);" class="view-more-link less" style="display: none;">View Less </a>
</div>
</div>
</div>
<div class="col-auto">
<div class="user-icon-list">
<a href="javascript:void(0);" data-toggle="modal" data-target="#uploadModal"><i class="icon-upload-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Upload User"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void(0);"><i class="icon-download1" data-toggle="tooltip" data-placement="top" title="Download"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void(0);" data-toggle="modal" data-target="#addUserModal"><i class="icon-add-user" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add a User"><span class="path1"></span><span class="path2"></span></i></a>
<i class="icon-arrow-bottom ml-5" type="button" data-toggle="collapse" data-target="#checkout" aria-expanded="true" aria-controls="checkout" data-original-title="Collapse"></i>
</div>
</div>
</div>
</div>
<div id="checkout" class="body collapse show" aria-labelledby="checkout" >
<div class="row table1">
<div class="col-md-12">
<div class="logs-table all">
<table class="table custom-table">
<thead class="">
<tr>
<th scope="col" width="20%">Display Name </th>
<th scope="col" width="50%">Username/Email</th>
<th scope="col" width="15%">Sign-in Status</th>
<th scope="col" width="15%">Actions</th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td><span class="text-blue">Hiram Huang</span></td>
<td><a href="mailto:john.appleseed@abstergo.com">admin@googtest.hiramh10088.uat.resseller.synnex.com.synnex.buiness</a></td>
<td><span class="status-bar active">Active</span></td>
<td>
<div class="userbar-action-links"><a href="javascript:void(0)" class="openRtFly" data-flyout="manage-license-flyout" ><i class="icon-exchange" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#alertModal"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
<tr>
<td><span class="text-blue">Tom</span></td>
<td><a href="mailto:john.appleseed@abstergo.com">admin@googtest.hiramh10088.uat.resseller.synnex.com.synnex.buiness</a></td>
<td><span class="status-bar active">Active</span></td>
<td>
<div class="userbar-action-links"><a href="javascript:void(0)" class="openRtFly" data-flyout="manage-license-flyout" ><i class="icon-exchange" data-toggle="tooltip" data-placement="top" title="Manage Licenses" ><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#alertModal"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
<tr>
<td><span class="text-blue">SRF Black</span></td>
<td><a href="mailto:john.appleseed@abstergo.com">admin@googtest.hiramh10088.uat.resseller.synnex.com.synnex.buiness</a></td>
<td><span class="status-bar active">Active</span></td>
<td>
<div class="userbar-action-links"><a href="javascript:void(0)" class="openRtFly" data-flyout="manage-license-flyout" ><i class="icon-exchange" data-toggle="tooltip" data-placement="top" title="Manage Licenses"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#resetPassword1Modal"><i class="icon-security1" data-toggle="tooltip" data-placement="top" title="Reset Password"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0)" class="" data-toggle="modal" data-target="#alertModal"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete"><span class="path1"></span><span class="path2"></span></i></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled user-table">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>6</option>
<option>12</option>
<option>18</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="accordion custom-accordion">
<div class="card ">
<div class="card-header p-0 d-inline-block">
<div class="row">
<div class="col-auto">
<div class="user-detail-part">
<i class="icon-subscription-globe"></i>
<div>
<label>Microsoft Tenant Domain</label><br>
<span>
<a href="javascript:void(0);">sdf234dfg.onmicrosoft.com</a></span>
</div>
</div>
</div>
<div class="col-auto">
<div class="user-detail-part">
<i class="icon-google-id"></i>
<div>
<label>Microsoft Tenant ID</label>
<span>
964f6101</span>
</div>
</div>
</div>
<div class="col-auto">
<div class="user-detail-part">
<i class="icon-license"></i>
<div class="license-assigned">
<label>Licenses Assigned</label><br>
<ul class="pl-0">
<li>Azure Active Directory Premium P1</li>
<li class="showAll" style="display: none;">Microsoft CSP Subscription Transfer</li>
<li class="showAll" style="display: none;">Microsoft Reserved Instance</li>
</ul>
<a href="javascript:void(0);" class="view-more-link more" >View More (3)</a><a href="javascript:void(0);" class="view-more-link less" style="display: none;">View Less</a>
</div>
</div>
</div>
<div class="col-auto">
<div class="user-icon-list">
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Upload User"><i class="icon-upload-circle"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void(0);"><i class="icon-download1" data-toggle="tooltip" data-placement="top" title="Download"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void(0);" data-toggle="modal" data-target="#addUserModal"><i class="icon-add-user" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add a User"><span class="path1"></span><span class="path2"></span></i></a>
<i class="icon-arrow-bottom ml-5 collapsed" type="button" ></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--user section-->
</div>
</div>
</div>
<!--prduct management-->
<!--customer information-->
<div class="col-md-12 selectedTab cust-info" style="display:none">
<div class="cust-summary-section">
<div class="row summary-section-top">
<div class="col-md-4 px-0">
<div class="cust-summary-details">
<a class="" href="javascript:void(0)"><i class="icon-star-outline" title="Save as Favorite"></i></a>
<h5>Abstergo Ltd. <br><span>Customer Number: 184528</span></h5>
</div>
</div>
<div class="col-md-5">
<div class="cust-address-details">
<div class="cust-location">
<i class="icon-customer-location"></i>
<span>39 Pelham St. Ste. 250, Greenville, SC 29605 USA</span>
</div>
<div class="row cust-mailing-address mt-2">
<div class="col-md-12 col-lg-12 col-xl-6">
<div class="cust-location">
<i class="icon-customer-email"></i>
<span><a href="mailto:john.appleseed@abstergo.com">john.appleseed@abstergo.com</a></span>
</div>
</div>
<div class="col-md-12 col-lg-12 col-xl-6">
<div class="cust-location">
<i class="icon-customer-phone"></i>
<span>+1-803-795-8004</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 pr-0">
<div class="cust-location mt-1">
<i class="icon-customer-dashboard"></i>
<span><a href="javascript:void(0)">Customer Dashboard</a></span>
</div>
<div class="cust-location mt-2">
<i class="icon-user-management"></i>
<span><a href="javascript:void(0)">User Management</a></span>
</div>
</div>
<div class="col-md-1">
<a href="javascript:void(0)" class="circle-link float-right" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Customer"><i class="icon-line-edit" data-toggle="modal" data-target="#editCustomer"></i></a>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="60%"> Domain </th>
<th scope="col" width="40%">Acceptance</th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td><a href="javascript:void(0);">digitalsignageservice.ongoogle.com</a></td>
<td>Google ToS Acceptance: Yes</td>
</tr>
<tr>
<td><a href="javascript:void(0);">digitalsignageservice.onmicrosoft.com</a></td>
<td>Microsoft MCuA Acceptance: Yes</td>
</tr>
<tr>
<td><a href="javascript:void(0);">digitalsignageservice.ondropbox.com</a></td>
<td>Dropbox ToS Acceptance: Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--customer information-->
<!--Agreements-->
<div class="col-md-12 selectedTab agreements" style="display:none">
<div class="cust-summary-section">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="29%"> Vendor Name </th>
<th scope="col" width="29%">Agremeent Accepted</th>
<th scope="col" width="23%">Accepted By</th>
<th scope="col" width="15%">Date Time</th>
<th scope="col" width="5%"> </th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td><i class="icon-vendors"><span class="path1"></span><span class="path2"></span></i> Microsoft CORP/CSP</td>
<td><img src="images/pdf-icon.png"> <span class="text-blue">Microsoft CSP Agreement</span> </td>
<td>rossk@synnex.com</td>
<td>06/27/2020</td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td><i class="icon-vendors"><span class="path1"></span><span class="path2"></span></i> Microsoft CORP/CSP</td>
<td><img src="images/pdf-icon.png"> <span class="text-blue">Microsoft CSP Agreement</span> </td>
<td>rossk@synnex.com</td>
<td>06/27/2020</td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td><i class="icon-vendors"><span class="path1"></span><span class="path2"></span></i> Microsoft CORP/CSP</td>
<td><img src="images/pdf-icon.png"> <span class="text-blue">Microsoft CSP Agreement</span> </td>
<td>rossk@synnex.com</td>
<td>06/27/2020</td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td><i class="icon-vendors"><span class="path1"></span><span class="path2"></span></i> Microsoft CORP/CSP</td>
<td><img src="images/pdf-icon.png"> <span class="text-blue">Microsoft CSP Agreement</span> </td>
<td>rossk@synnex.com</td>
<td>06/27/2020</td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
</tbody>
</table>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled user-table">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>6</option>
<option>12</option>
<option>18</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!--Agreements-->
<!--Billing History-->
<div class="col-md-12 selectedTab bill-histry" style="display:none">
<div class="cust-summary-section p-0">
<nav class="all-vendor-tabs custom-tabs">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active cust" id="customerInvoices-tab" data-toggle="tab" href="#customerInvoicestab" role="tab" aria-controls="customerInvoicestab" aria-selected="true">
<span>Customer Invoices </span>
</a>
<a class="nav-item nav-link global-cust" id="reseller-tab" data-toggle="tab" href="#resellertab" role="tab" aria-controls="resellertab" aria-selected="false">
<span>Reseller Invoices </span></a>
<a class="nav-item nav-link global-cust manage-link" href="javascript:void(0);">
<span>Manage Customer Invoices </span>
</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<!--Customer Invoices section-->
<div class="tab-pane fade active show" id="customerInvoicestab" role="tabpanel" aria-labelledby="customerInvoices-tab">
<div class="summary-contract-table cont selectedSection px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="12%"> Issue Date </th>
<th scope="col" width="12%">Invoice #</th>
<th scope="col" width="10%">Contract # </th>
<th scope="col" width="10%" class="text-right">Sum <span class="price-denom">(USD)</span></th>
<th scope="col" width="15%" class="text-right">Incl Tax <span class="price-denom">(USD)</span> </th>
<th scope="col" width="20%">Billing Period</th>
<th scope="col" width="11%">Status</th>
<th scope="col" width="10%">Action</th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td>01/01/2021</td>
<td><a href="javascript:void(0);" class="openRtFly" data-flyout="prod-invoice-details">76284</a></td>
<td><a href="javascript:void(0);">28907636</a></td>
<td class="text-right">23,125.20</td>
<td class="text-right">23,312.20</td>
<td>02/01/2021 - 05/01/2020</td>
<td><span class="status-bar active">Paid</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td>11/11/2020</td>
<td><a href="javascript:void(0);">76281</a></td>
<td><a href="javascript:void(0);">78906237</a></td>
<td class="text-right">12,616.20</td>
<td class="text-right">12,830.20</td>
<td>06/11/2021 - 09/11/2020</td>
<td><span class="status-bar active">Paid</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td>10/31/2020</td>
<td><a href="javascript:void(0);">76390</a></td>
<td><a href="javascript:void(0);">07693728</a></td>
<td class="text-right">18,428.20</td>
<td class="text-right">18,740.20</td>
<td>10/31/2020 - 01/31/2021</td>
<td><span class="status-bar cancelled">Outstanding</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td>06/05/2020</td>
<td><a href="javascript:void(0);">76254</a></td>
<td><a href="javascript:void(0);">90377628</a></td>
<td class="text-right">21,070.20</td>
<td class="text-right">21,125.20</td>
<td>02/06/2021 - 05/06/2021</td>
<td><span class="status-bar active">Paid</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--Customer Invoices section-->
<!--Reseller Invoices section-->
<div class="tab-pane fade" id="resellertab" role="tabpanel" aria-labelledby="reseller-tab">
<div class="summary-contract-table cont selectedSection px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="12%"> Issue Date </th>
<th scope="col" width="12%">Invoice #</th>
<th scope="col" width="10%">Contract # </th>
<th scope="col" width="10%" class="text-right">Sum <span class="price-denom">(USD)</span></th>
<th scope="col" width="15%" class="text-right">Incl Tax <span class="price-denom">(USD)</span> </th>
<th scope="col" width="20%">Billing Period</th>
<th scope="col" width="11%">Status</th>
<th scope="col" width="10%">Action</th>
</tr>
</thead>
<tbody tabindex="4" style="overflow-y: hidden; outline: none;">
<tr>
<td>12/01/2021</td>
<td><a href="javascript:void(0);">76234584</a></td>
<td><a href="javascript:void(0);">07636289</a></td>
<td class="text-right">12,738.00</td>
<td class="text-right">12,912.20</td>
<td>02/01/2021 - 05/01/2020</td>
<td><span class="status-bar active">Paid</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td>10/10/2020</td>
<td><a href="javascript:void(0);">76234528</a></td>
<td><a href="javascript:void(0);">78790623</a></td>
<td class="text-right">67,195.20</td>
<td class="text-right">67,325.20</td>
<td>06/11/2021 - 09/11/2020</td>
<td><span class="status-bar active">Paid</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td>08/12/2020</td>
<td><a href="javascript:void(0);">76283451</a></td>
<td><a href="javascript:void(0);">69372807</a></td>
<td class="text-right">1,678.20</td>
<td class="text-right">1,725.20</td>
<td>10/31/2020 - 01/31/2021</td>
<td><span class="status-bar active">Paid</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
<tr>
<td>04/11/2020</td>
<td><a href="javascript:void(0);">76234525</a></td>
<td><a href="javascript:void(0);">28903776</a></td>
<td class="text-right">1,125.20</td>
<td class="text-right">1,200.20</td>
<td>02/06/2021 - 05/06/2021</td>
<td><span class="status-bar active">Paid</span></td>
<td>
<div class="right-icon-list float-left"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--Reseller Invoices section-->
</div>
</div>
</div>
<!--Billing History-->
<!--Audit Trail -->
<div class="col-md-12 selectedTab audit-trl" style="display:none">
<div class="cust-summary-section p-0">
<nav class="all-vendor-tabs custom-tabs">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active cust" id="changelog-tab" data-toggle="tab" href="#changelogtab" role="tab" aria-controls="changelogtab" aria-selected="true">
<span>Change Log </span>
</a>
<a class="nav-item nav-link global-cust" id="sync-tab" data-toggle="tab" href="#synctab" role="tab" aria-controls="synctab" aria-selected="false">
<span>Sync Log </span></a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<!--Change log section-->
<div class="tab-pane fade active show" id="changelogtab" role="tabpanel" aria-labelledby="changelog-tab">
<div class="summary-contract-table cont selectedSection px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="15%"> Activity Log </th>
<th scope="col" width="13%">Product</th>
<th scope="col" width="10%">Contract </th>
<th scope="col" width="19%">Vendor</th>
<th scope="col" width="15%">Change Type</th>
<th scope="col" width="13%">Entered by</th>
<th scope="col" width="15%">Date</th>
</tr>
</thead>
<tbody tabindex="4">
<tr>
<td>Net New Contract</td>
<td><span class="text-blue">Office 365 F3</span></td>
<td><span class="text-blue">04339</span></td>
<td>MICROSOFT CORP/CSP </td>
<td>Contract Change</td>
<td>Kristin Watson</td>
<td>08/27/2020 </td>
</tr>
<tr>
<td>Net New Contract</td>
<td><span class="text-blue">Update Service</span></td>
<td><span class="text-blue">74875</span></td>
<td>MICROSOFT CORP/CSP </td>
<td>Contract Change</td>
<td>Kristin Watson</td>
<td>08/27/2020 </td>
</tr>
<tr>
<td>Net New Contract</td>
<td><span class="text-blue">Update Contract</span></td>
<td><span class="text-blue">39235</span></td>
<td>MICROSOFT CORP/CSP </td>
<td>Contract Change</td>
<td>Kristin Watson</td>
<td>08/27/2020 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--Change log section-->
<!--sync log section-->
<div class="tab-pane fade" id="synctab" role="tabpanel" aria-labelledby="sync-tab">
<div class="summary-contract-table cont selectedSection px-3">
<div class="row">
<div class="col-md-12">
<div class="list-view-tile summary-tab-table">
<table class="table custom-table">
<thead class="thead-light">
<tr>
<th scope="col" width="15%"> Sync Activity </th>
<th scope="col" width="13%">Product</th>
<th scope="col" width="10%">Contract </th>
<th scope="col" width="19%">Change Status</th>
<th scope="col" width="13%">Entered by</th>
<th scope="col" width="15%">Date</th>
</tr>
</thead>
<tbody tabindex="4">
<tr>
<td>Net New Contract</td>
<td><span class="text-blue">Office 365 F3</span></td>
<td><span class="text-blue">04339</span></td>
<td>MICROSOFT CORP/CSP </td>
<td>Kristin Watson</td>
<td>08/27/2020 </td>
</tr>
<tr>
<td>Update Service</td>
<td><span class="text-blue">Office 365 F3</span></td>
<td><span class="text-blue">74875</span></td>
<td>MICROSOFT CORP/CSP </td>
<td>Kristin Watson</td>
<td>08/27/2020 </td>
</tr>
<tr>
<td>Update Contract</td>
<td><span class="text-blue">Office 365 F3</span></td>
<td><span class="text-blue">39235</span></td>
<td>MICROSOFT CORP/CSP </td>
<td>Kristin Watson</td>
<td>08/27/2020 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
<!--sync log section-->
</div>
</div>
</div>
<!--Audit Trail -->
<!--Storefront Access Trail -->
<div class="col-md-12 selectedTab store-access" style="display:none">
<div class="cust-summary-section">
<div class="row">
<div class="col-md-12">
<div class="gateway-accordion mpnID-accordion mt-2 profile" id="gatewayAccordion">
<div class="accordion custom-accordion profileAcc">
<div class="card">
<div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#mpnID1" aria-expanded="false" aria-controls="mpnID1">
<div class="card-heading mr-auto d-flex align-items-center">
<div class="circle-link mr-2">
<i class="icon-google-id"></i>
</div>
<h2 >Customer Contacts</h2>
<span class="contractCount">1 Contract</span>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#mpnID1" aria-expanded="false" aria-controls="mpnID1" data-original-title="Expand"></i>
</div>
<div id="mpnID1" class="mpnID1 body collapse" aria-labelledby="mpnID1" data-parent="#gatewayAccordion" style="">
<!--card body start-->
<div class="card-body bg-none p-0 pt-2">
<div class="row">
<div class="col-md-12 px-2">
<div class="sub-table mb-3">
<table class="categoryTbl">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Access Pernision</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rachael Kelly
</td>
<td><a href="mailto:rachaelk@synnex.com"> rachaelk@synnex.com </a></td>
<td>(123)456-7890</td>
<td>GGCM-3651</td>
<td><span class="status-bar active">Registered</span></td>
<td>
<div class="action-icons">
<a href="javascript:void(0)" class="edit-sub-icon manageService"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Manage"></i></a>
<a href="javascript:void(0)" class="cross-circle" data-toggle="modal" data-target="#cancelSubModal"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--card body end-->
</div>
</div>
<div class="card mt-3">
<div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#mpnID2" aria-expanded="false" aria-controls="mpnID2">
<div class="card-heading mr-auto d-flex align-items-center">
<div class="circle-link mr-2">
<i class="icon-google-id"></i>
</div>
<h2 >Customer Support and Contact Information</h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#mpnID2" aria-expanded="false" aria-controls="mpnID2" data-original-title="Expand"></i>
</div>
<div id="mpnID2" class="mpnID2 body collapse" aria-labelledby="mpnID2" data-parent="#gatewayAccordion" style="">
<!--card body start-->
<div class="card-body bg-none p-0 pt-2">
<div class="row">
<div class="col-md-3 mb-2">
<label>Phone </label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding" value="+1-803-795-8004">
</div>
</div>
<div class="col-md-3 mb-2">
<label>Email </label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="email" class="form-control form-control-padding" value="+1-803-795-8004">
</div>
</div>
<div class="col-md-3 mb-2 mb-2">
<label>Service Time </label>
<div class="row no-gutters">
<div class="col-md-6">
<div class="scheduled-time mt-0">
<div class="search-input-col date-picker">
<input type="text" class="form-control form-control-padding date start-date hasDatepicker" placeholder="Start Date">
<i class="icon-calender-outline"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div class="scheduled-time mt-0">
<div class="search-input-col date-picker">
<input type="text" class="form-control form-control-padding date end-date hasDatepicker" placeholder="End Date">
<i class="icon-calender-outline"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-2">
<label>Address </label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding" plceholder="Address">
</div>
</div>
</div>
</div>
<!--card body end-->
</div>
</div>
<div class="card mt-3">
<div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#mpnID3" aria-expanded="false" aria-controls="mpnID3">
<div class="card-heading mr-auto d-flex align-items-center">
<div class="circle-link mr-2">
<i class="icon-limit"></i>
</div>
<h2 >Customer Spending Limit</h2>
<span class="contractCount">85,000.00</span>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#mpnID3" aria-expanded="false" aria-controls="mpnID3" data-original-title="Expand"></i>
</div>
<div id="mpnID3" class="mpnID3 body collapse" aria-labelledby="mpnID3" data-parent="#gatewayAccordion" >
<!--card body start-->
<div class="card-body p-0 p-2 bg-light">
<div class="row">
<div class="col-md-3">
<div class="spending-limit pl-3">
<label>Customer Spending Limit (USD)</label>
<div class="limit-val">
<span>85,000.00</span>
<div class="action-icons"><a href="javascript:void(0)" class="edit-sub-icon"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a></div>
</div>
</div>
</div>
<div class="col-md-9">
<img src="images/store-graph.png" class="float-right" />
</div>
</div>
</div>
<!--card body end-->
</div>
</div>
<div class="card mt-3">
<div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#mpnID4" aria-expanded="false" aria-controls="mpnID4">
<div class="card-heading mr-auto d-flex align-items-center">
<div class="circle-link mr-2">
<i class="icon-payment"></i>
</div>
<h2 >Customer Payment Options</h2>
<span class="contractCount">Payment Gateway</span>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#mpnID4" aria-expanded="false" aria-controls="mpnID4" data-original-title="Expand"></i>
</div>
<div id="mpnID4" class="mpnID4 body collapse" aria-labelledby="mpnID4" data-parent="#gatewayAccordion" >
<!--card body start-->
<div class="card-body bg-none p-0 pt-2">
<div class="row my-account">
<div class="col-md-12">
<p>Enabling Customer billing allows CloudSubscription will collect payment and remit your profit to you. The customer will be... nvoiced via credit card and only for services that SYNNEX offers, custom reseller services will not be billed through CloudSubscription. The customer will be required to eSign an agreement before any services can be purchased or billed. Services will be billed as soon as the customer is enabled. Contact <a href="mailto:stellr@synnex.com"> stellr@synnex.com </a> with any question(s).</p>
<div class="cust-summary-section mt-3">
<div class="row agentBillingMain">
<div class="col-md-9">
<div class="account-heading">
<h5>Agent Billing <span class="agent-txt ml-2" style="display: none;">Accepted at 06/24/2021 by contact David Zhang(ecittest@synnex.com)</span></h5>
</div>
<div class="info-links">
<a href="javascript:void(0)"> View Agreement</a>
<a href="javascript:void(0)" class="ml-2 transfrTxt" style="display: none;"> Transfer existing contracts to Agent Billing</a>
</div>
</div>
<div class="col-md-3">
<div class="set-default-btn float-right">
<span class="toggle-btn">
<label class="switch enableSwitch"><input type="checkbox"><span class="slider round"></span></label>
</span><span class="set-default-lbl">Enable</span>
</div>
</div>
</div>
</div>
<div class="cust-summary-section my-3">
<div class="row">
<div class="col-md-9">
<div class="account-heading">
<h5>Payment Gateway </h5>
</div>
</div>
<div class="col-md-3">
<div class="set-default-btn float-right">
<span class="toggle-btn">
<label class="switch enablePayGateway"><input type="checkbox"><span class="slider round"></span></label>
</span><span class="set-default-lbl">Enable</span>
</div>
</div>
</div>
<div class="row paymntGatewySection" style="display: none;">
<div class="col-md-12">
<p>Select "Use Default Settings" to use the setting set under <span class="text-blue">Storefront Setting</span> > <span class="text-blue">Payment Gateway</span> Settings. Select "Use Customer Specifc Settings" below to specify different payment setting for the currently selected user.</p>
<div class="service-label my-3">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio66" name="service64" value="all" checked="">
<label class="custom-control-label" for="customRadio66"><span>Use Default Settings</span></label>
</div>
<div class="custom-control custom-radio label2">
<input type="radio" class="custom-control-input" id="customRadio68" name="service64" value="individual">
<label class="custom-control-label" for="customRadio68"><span>Use Customer Specific Settings</span></label>
</div>
</div>
<div class="customer-payment">
<h1 class="customer-section">1. Supported Payment Methods <span class="asterisk">*</span></h1>
<div class="row defaultSet">
<div class="col-auto">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customTerm" name="shiptime1" checked="">
<label class="custom-control-label" for="customTerm">Custom Terms</label>
</div>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Net 30</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>Net 30</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Net 45</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Net 60</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customTerm1" name="shiptime1">
<label class="custom-control-label" for="customTerm1">Authorize.Net</label>
</div>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled="">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">7 Days</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>1 Day</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7 Days</span></a>
</div>
</div>
</div>
</div>
<span class="card-validation">Credit card validation before invoice generate.</span>
</div>
</div>
<div class="col-md-12">
<hr class="hair-line">
</div>
</div>
<h1 class="customer-section">2. Invoice Creation <span class="asterisk">*</span></h1>
<div class="row defaultSet">
<div class="col-md-6">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="newcustomTerm" name="shiptime11" checked="">
<label class="custom-control-label" for="newcustomTerm">At the time of product enablement, each anniversary day after</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="newcustomTerm1" name="shiptime11">
<label class="custom-control-label" for="newcustomTerm1">Consolidate all product invoices to create a single invoice on the</label>
</div>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled="">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">2nd</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>1st</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2nd</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3rd</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4th</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5th</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6th</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7th</span></a>
</div>
</div>
</div>
</div>
<span class="card-validation">day each month</span>
</div>
</div>
<div class="col-md-12">
<hr class="hair-line">
</div>
</div>
<h1 class="customer-section">3. Payment Grace Period Of <span class="asterisk">*</span></h1>
<div class="row mb-2">
<div class="col-md-6">
<div class="customer-opt">
<div class="search-input-col ml-0">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">1 Day</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>1 Day</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
</div>
</div>
</div>
</div>
<i class="icon-info-blue ml-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="If the customer has not provided payment for products before the grace period expires, Cloud Subscription will automatically process the payment on the cutomers payment method."></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--card body end-->
</div>
</div>
<div class="card mt-3">
<div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#mpnID5" aria-expanded="false" aria-controls="mpnID5">
<div class="card-heading mr-auto d-flex align-items-center">
<div class="circle-link mr-2">
<i class="icon-invoices1"></i>
</div>
<h2>Refrence Information</h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#mpnID5" aria-expanded="false" aria-controls="mpnID5" data-original-title="Expand"></i>
</div>
<div id="mpnID5" class="mpnID5 body collapse" aria-labelledby="mpnID5" data-parent="#gatewayAccordion" >
<!--card body start-->
<div class="card-body bg-none p-0 pt-2">
<div class="row">
<div class="col-md-4 mb-2">
<label>Internal Account Number <span class="asterisk"> *</span> </label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding" value="269873259072">
</div>
</div>
<div class="col-md-4 mb-2">
<label>Sales Rep <span class="asterisk"> *</span> </label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="email" class="form-control form-control-padding" placeholder="Enter">
</div>
</div>
<div class="col-md-4 mb-2 mb-2">
<label>Sales Region <span class="asterisk"> *</span> </label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="email" class="form-control form-control-padding" placeholder="Enter">
</div>
</div>
</div>
</div>
<!--card body end-->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row summary-bottom">
<div class="col-md-3">
<div class="invoice-trend">
<div class="invoice-trend-dropdown">
<span>Invoice Trend By Month</span> <i class="icon-arrow-bottom ml-auto"></i>
</div>
<p>Some features are not supported by the Legacy Azure plan. Reach out to <span class="text-blue">msftcsp@synnex.com</span> to learn about the New Azure plan.</p>
</div>
</div>
<div class="col-md-9">
<img src="images/summary-graph.png" style="width:100%">
</div>
</div>
</div>
</div>
</div>
