Manage Invoices

Manage InvoicesInvite customer contacts and assign access permission.

Paid 56 Invoices

553,855.90

Outstanding 15 Invoices

110,529.50

Upcoming 42 Invoices

615,282.90

Not Approved 8 Invoices

15,750.00

Not Generated 20 Invoices

37,826.00

Customer Name No. of Invoices Total Amount (USD) Expand all
Abstergo Ltd. 3 24,346.20
Alphonso Capizzo 5 125.20
Biffco Enterprises Ltd. 4 3,125.20
Big Kahuna Burger Ltd. 3 2,325.20
Binford Ltd. 5 43,125.20
Brent and Dasher 6 63,125.20
Big Kahuna Burger Ltd. 7 68,125.20
Big Kahuna Burger Ltd. 3 3,125.20
Big Kahuna Burger Ltd. 4 2,125.20
        
<!--manage invoices-->
<div class="storefront-rightbar manage-invoices">
   <div class="row mainTab">
      <div class="col-md-6">
         <h1 class="storefront-heading">Manage Invoices<span>Invite customer contacts and assign access permission.</span></h1>
      </div>
      <div class="col-md-6 d-flex align-items-center invoiceBtns">
         <button class="btn btn-outline mr-2 ml-auto schedule openRtFly" data-flyout="scheduleInvoice">
         <i class="icon-cal-set"></i> Schedule Invoice
         </button><button class="btn btn-outline create openRtFly" data-flyout="createInvoice">
         <i class="icon-plus"></i> Create New Invoice
         </button>
      </div>
      <div class="col-md-12">
         <div class="config-tabs mx-auto">
            <div class="custom-tab-col">
               <div class="overview-tabs m-0 mx-auto action-tabs">
                  <a href="javascript:void(0);" class="active" data-active="invoices">Invoices (131)</a>
                  <a href="javascript:void(0);" data-active="scheduledInvocie" class="prod ml-2">Scheduled Invoices (10)</a>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-12 my-4  invoices selectedTab">
         <div class="row col-custom-padding custKpi">
            <div class="col">
               <div class="customer-tiles py-3 active" data-status="paid">
                  <h6>Paid 56 Invoices</h6>
                  <h1 class="Total-Invoices">553,855.90</h1>
               </div>
            </div>
            <div class="col">
               <div class="customer-tiles py-3"  data-status="outstanding">
                  <h6>Outstanding 15 Invoices </h6>
                  <h1 class="Total-Invoices">110,529.50</h1>
               </div>
            </div>
            <div class="col">
               <div class="customer-tiles py-3" data-status="upcoming">
                  <h6>Upcoming 42 Invoices </h6>
                  <h1 class="Total-Invoices">615,282.90</h1>
               </div>
            </div>
            <div class="col">
               <div class="customer-tiles py-3" data-status="na">
                  <h6>Not Approved 8 Invoices </h6>
                  <h1 class="Total-Invoices">15,750.00</h1>
               </div>
            </div>
            <div class="col">
               <div class="customer-tiles py-3" data-status="nt_generated">
                  <h6>Not Generated 20 Invoices</h6>
                  <h1 class="Total-Invoices">37,826.00</h1>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-4">
         <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 template or customer name" 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-auto pl-0">
         <div class="row no-gutters date-block">
            <div class="col-md-6">
               <div class="scheduled-time mt-0">
                  <div class="search-input-col date-picker w-100">
                     <input type="text" class="form-control form-control-padding date start-date" 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 w-100">
                     <input type="text" class="form-control form-control-padding date  end-date" placeholder="End Date">
                     <i class="icon-calender-outline"></i>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-auto pl-0 approve-invoices approveAll"  data-toggle="modal" data-target="#alertModal"  data-delete="updateStatus" style="display: none;">
         <button class="btn btn-outline" data-toggle="tooltip" data-placement="top" title="Approve All Invoices" disabled><i class="icon-successful-outline"></i></button>
      </div>
      <div class="col-md-12">
         <div class="list-view-tile summary-tab-table invoices selectedTab">
            <table class="table custom-table adminTable approved">
               <thead class="thead-light">
                  <tr>
                     <th scope="col" width="40%">Customer Name </th>
                     <th scope="col" width="20%">No. of Invoices</th>
                     <th scope="col" width="20%" class="text-right">Total Amount (USD)</th>
                     <th scope="col" width="20%"><a href="javascript:void(0);" class="expandAll mt-0"><i class="icon-expandall"></i><span class="txt">Expand all </span></a></th>
                  </tr>
               </thead>
               <tbody tabindex="4" style="overflow-y: hidden; outline: none;">
                  <tr class="prod-row">
                     <td><a href="javascript:void(0);">Abstergo Ltd.</a></td>
                     <td>3</td>
                     <td class="text-right">24,346.20</td>
                     <td>
                        <ul class="invoice-action-link">
                           <li class="ml-auto moreMainDiv">
                              <a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice" class="openMoreFly"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a>
                              <div class="custom-flyout-inner download-inner" style="display: none;" >
                                 <i class="icon-dropdown-arrow"></i>
                                 <div class="invoiceTxt mb-3">For which period do you need a invoice?</div>
                                 <div class="monthSelection">
                                    <div class="custom-control custom-radio">
                                       <input type="radio" class="custom-control-input" id="month1" name="example2" checked="" value="default">
                                       <label class="custom-control-label" for="month1">Last Month</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                       <input type="radio" class="custom-control-input" id="month2" name="example2" checked="" value="default">
                                       <label class="custom-control-label" for="month2">Last 3 Months</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                       <input type="radio" class="custom-control-input" id="month3" name="example2" checked="" value="default">
                                       <label class="custom-control-label" for="month3">Last 6 Months</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                       <input type="radio" class="custom-control-input" id="month4" name="example2" checked="" value="default">
                                       <label class="custom-control-label" for="month4">Last 1 Year</label>
                                    </div>
                                 </div>
                                 <div class="invoiceTxt mb-2">Or Select a custom date of your choice.</div>
                                 <div class="row no-gutters date-block">
                                    <div class="col-md-5">
                                       <div class="scheduled-time mt-0">
                                          <div class="search-input-col date-picker w-100">
                                             <input type="text" class="form-control form-control-padding date start-date " placeholder="Start Date" id="">
                                             <i class="icon-calender-outline"></i>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="col-md-5">
                                       <div class="scheduled-time mt-0">
                                          <div class="search-input-col date-picker w-100">
                                             <input type="text" class="form-control form-control-padding date end-date " placeholder="End Date" >
                                             <i class="icon-calender-outline"></i>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="flyout-footer">
                                    <input type="button" class="btn btn-outline ml-auto mr-2 cancelDownload" value="Cancel">
                                    <input type="button" class="btn btn-primary disabled " value="Download">   
                                 </div>
                              </div>
                           </li>
                           <li>
                              <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                           </li>
                        </ul>
                     </td>
                  </tr>
                  <tr class="addOnRow addon-shadow" style="display: none;">
                     <td colspan="4" class="p-0 border-0">
                        <div class="total-customer-col">
                           <div class="cutomer-container border-0">
                              <!--cutomer box section-->
                              <div class="customers-box">
                                 <div class="customer-tabel-col p-0">
                                    <table>
                                       <thead>
                                          <tr>
                                             <th class="noUp">Issue Date</th>
                                             <th class="noUp">Invoice #</th>
                                             <th>Contract #</th>
                                             <th class="text-right">Sum (USD)</th>
                                             <th class="text-right">Incl Tax (USD)</th>
                                             <th>Billing Period</th>
                                             <th>Status</th>
                                             <th>Action</th>
                                          </tr>
                                       </thead>
                                       <tbody>
                                          <tr>
                                             <td class="noUp">01/27/2021</td>
                                             <td class="noUp"><a href="javascript:void(0);" class="openRtFly" data-flyout="invDetails">76284</a></td>
                                             <td ><a href="javascript:void(0);">76289036</a></td>
                                             <td class="text-right">7,808.20</td>
                                             <td class="text-right">8,808.20</td>
                                             <td>02/01/2020 - 05/01/2021</td>
                                             <td class="d-flex">
                                                <span class="status-bar active paid">Paid</span>
                                                <span class="status-bar cancelled outstanding" style="display: none;">Outstanding</span>
                                                <div class="custom-flyout status-edit outstanding moreMainDiv">
                                                   <a href="javascript:void(0)" class="circle-link openMoreFly" data-toggle="tooltip" data-placement="top" title="" data-original-title="Update Status"><i class="icon-line-edit" data-toggle="modal" data-target="#editCustomer"></i></a>
                                                   <div class="custom-flyout-inner py-2" style="display:block;">
                                                      <i class="icon-dropdown-arrow"></i>
                                                      <a href="javascript:void(0);" class="custom-dropdown-item"><span class="status-bar cancelled">Outstanding</span></a>
                                                      <hr class="hair-line my-0">
                                                      <a href="javascript:void(0);" class="custom-dropdown-item"><span class="status-bar active">Paid</span></a>
                                                   </div>
                                                </div>
                                                <span class="status-bar current upcoming " style="display: none;">Upcoming</span>
                                             </td>
                                             <td>
                                                <div class="table-action-link">
                                                   <a href="javascript:void(0);" class="ml-0 noUp" data-toggle="tooltip" data-placement="top" title="Logs" data-original-title="Logs"><i class="icon-operation-circle"><span class="path1"></span><span class="path2"></span></i></a>
                                                   <a href="javascript:void(0);" class="noUp" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a>
                                                   <a href="javascript:void(0);" class="upPre openRtFly" data-flyout="previewInvoice" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit" style="display: none;"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>                                                         
                                                </div>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td class="noUp">01/27/2021</td>
                                             <td class="noUp"><a href="javascript:void(0);">76285</a></td>
                                             <td ><a href="javascript:void(0);">76289037</a></td>
                                             <td class="text-right">7,658.00</td>
                                             <td class="text-right">7,830.20</td>
                                             <td>02/01/2020 - 05/01/2021</td>
                                             <td class="d-flex">
                                                <span class="status-bar active paid">Paid</span>
                                                <span class="status-bar cancelled outstanding" style="display: none;">Outstanding</span>
                                                <div class="custom-flyout status-edit outstanding moreMainDiv">
                                                   <a href="javascript:void(0)" class="circle-link openMoreFly" data-toggle="tooltip" data-placement="top" title="" data-original-title="Update Status"><i class="icon-line-edit" data-toggle="modal" data-target="#editCustomer"></i></a>
                                                   <div class="custom-flyout-inner py-2" style="display:block;">
                                                      <i class="icon-dropdown-arrow"></i>
                                                      <a href="javascript:void(0);" class="custom-dropdown-item"><span class="status-bar cancelled">Outstanding</span></a>
                                                      <hr class="hair-line my-0">
                                                      <a href="javascript:void(0);" class="custom-dropdown-item"><span class="status-bar active">Paid</span></a>
                                                   </div>
                                                </div>
                                                <span class="status-bar current upcoming" style="display: none;">Upcoming</span>
                                             </td>
                                             <td>
                                                <div class="table-action-link">
                                                   <a href="javascript:void(0);" class="ml-0 noUp" data-toggle="tooltip" data-placement="top" title="Logs" data-original-title="Logs"><i class="icon-operation-circle"><span class="path1"></span><span class="path2"></span></i></a>
                                                   <a href="javascript:void(0);" class="noUp"  data-toggle="tooltip" data-placement="top" title="" data-original-title="Download Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a>
                                                   <a href="javascript:void(0);" class="upPre openRtFly" data-flyout="previewInvoice" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit" style="display: none;"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a> 
                                                </div>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td class="noUp">01/27/2021</td>
                                             <td class="noUp"><a href="javascript:void(0);">76286</a></td>
                                             <td ><a href="javascript:void(0);">76289038</a></td>
                                             <td class="text-right">7,830.00</td>
                                             <td class="text-right">7,708.20</td>
                                             <td>02/01/2020 - 05/01/2021</td>
                                             <td class="d-flex">
                                                <span class="status-bar active paid">Paid</span>
                                                <span class="status-bar cancelled outstanding moreMainDiv" style="display: none;">Outstanding</span>
                                                <div class="custom-flyout status-edit outstanding">
                                                   <a href="javascript:void(0)" class="circle-link openMoreFly" data-toggle="tooltip" data-placement="top" title="" data-original-title="Update Status"><i class="icon-line-edit" data-toggle="modal" data-target="#editCustomer"></i></a>
                                                   <div class="custom-flyout-inner py-2" style="display:block;">
                                                      <i class="icon-dropdown-arrow"></i>
                                                      <a href="javascript:void(0);" class="custom-dropdown-item"><span class="status-bar cancelled">Outstanding</span></a>
                                                      <hr class="hair-line my-0">
                                                      <a href="javascript:void(0);" class="custom-dropdown-item"><span class="status-bar active">Paid</span></a>
                                                   </div>
                                                </div>
                                                <span class="status-bar current upcoming" style="display: none;">Upcoming</span>
                                             </td>
                                             <td>
                                                <div class="table-action-link">
                                                   <a href="javascript:void(0);" class="ml-0 noUp" data-toggle="tooltip" data-placement="top" title="Logs" data-original-title="Logs"><i class="icon-operation-circle"><span class="path1"></span><span class="path2"></span></i></a>
                                                   <a href="javascript:void(0);" class="noUp" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a>
                                                   <a href="javascript:void(0);"  class="upPre openRtFly"  data-flyout="previewInvoice" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit" style="display: none;"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a> 
                                                </div>
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                    <nav aria-label="navigation" class="pagination-col pt-2 selectedTab invoices subs" style="">
                                       <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><a href="#page-2" class=""> <span>2</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>
                              <!--cutomer box section-->
                           </div>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Alphonso Capizzo</a></td>
                     <td>5</td>
                     <td class="text-right">125.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Biffco Enterprises Ltd.</a></td>
                     <td>4</td>
                     <td class="text-right">3,125.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger Ltd.</a></td>
                     <td>3</td>
                     <td class="text-right">2,325.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Binford Ltd.</a></td>
                     <td>5</td>
                     <td class="text-right">43,125.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Brent and Dasher</a></td>
                     <td>6</td>
                     <td class="text-right">63,125.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger Ltd.</a></td>
                     <td>7</td>
                     <td class="text-right">68,125.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger Ltd.</a></td>
                     <td>3</td>
                     <td class="text-right">3,125.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger Ltd.</a></td>
                     <td>4</td>
                     <td class="text-right">2,125.20</td>
                     <td class="text-right">
                        <div class="right-icon-list"><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Download Consolidated Invoice"><i class="icon-download1"><span class="path1"></span><span class="path2"></span></i></a> <a href="javascript:void(0);" class="row-expand-icon"  data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a></div>
                     </td>
                  </tr>
               </tbody>
            </table>
            <div class="notApp" style="display: none;">
               <div class="list-view-tile summary-tab-table  ">
                  <table class="table custom-table">
                     <thead class="thead-light">
                        <tr>
                           <th scope="col" width="13%">
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input chkAll approveAllChkBox" id="issueDate1" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate1"></label>
                              </div>
                              Issue Date
                           </th>
                           <th scope="col" width="8%">Invoice #</th>
                           <th scope="col" width="8%">Contract #</th>
                           <th scope="col" width="14%">Customer</th>
                           <th scope="col" width="8%" class="text-right">Sum (USD)</th>
                           <th scope="col" width="10%" class="text-right">Incl Tax <span class="price-denom">(USD)</span></th>
                           <th scope="col" width="15%">Billing Period</th>
                           <th scope="col" width="13%">Status</th>
                           <th scope="col" width="9%">Actions</th>
                        </tr>
                     </thead>
                     <tbody tabindex="28" style="overflow-y: hidden; outline: none;">
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate2" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate2"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76284</a></td>
                           <td><a href="javascript:void();">456178</a></td>
                           <td>Abstergo Ltd.</td>
                           <td class="text-right">20,230.00</td>
                           <td class="text-right">21,276.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="ml-0 openRtFly"  data-flyout="previewInvoice" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal" class="approveInvoice" data-delete="appInv"  ><i class="icon-checked-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice" ><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate3" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate3"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76285</a></td>
                           <td><a href="javascript:void();">456179</a></td>
                           <td>Alphonso Capizzo</td>
                           <td class="text-right">12,560.00</td>
                           <td class="text-right">12,998.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0); " class="ml-0 openRtFly"  data-flyout="previewInvoice" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal" class="approveInvoice" data-delete="appInv"  ><i class="icon-checked-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice" ><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate4" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate4"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76286</a></td>
                           <td><a href="javascript:void();">456180</a></td>
                           <td>Biffco Enterprises Ltd.</td>
                           <td class="text-right">14,325.00</td>
                           <td class="text-right">12,998.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="ml-0 openRtFly"  data-flyout="previewInvoice" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal" class="approveInvoice" data-delete="appInv"  ><i class="icon-checked-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice" ><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate5" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate5"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76287</a></td>
                           <td><a href="javascript:void();">456181</a></td>
                           <td>Binford Ltd.</td>
                           <td class="text-right">15,123.00</td>
                           <td class="text-right">12,998.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate6" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate6"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76288</a></td>
                           <td><a href="javascript:void();">456182</a></td>
                           <td>Brent and Dasher</td>
                           <td class="text-right">18,420.00</td>
                           <td class="text-right">12,998.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate7" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate7"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76289</a></td>
                           <td><a href="javascript:void();">456183</a></td>
                           <td>Biffco Enterprises Ltd.</td>
                           <td class="text-right">9,786.00</td>
                           <td class="text-right">12,998.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate8" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate8"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76290</a></td>
                           <td><a href="javascript:void();">456184</a></td>
                           <td>Binford Ltd.</td>
                           <td class="text-right">12,506.00</td>
                           <td class="text-right">12,998.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input " id="issueDate9" name="shiptime1">
                                 <label class="custom-control-label" for="issueDate9"></label>
                              </div>
                              01/27/2021
                           </td>
                           <td><a href="javascript:void();">76291</a></td>
                           <td><a href="javascript:void();">456185</a></td>
                           <td>Biffco Enterprises Ltd.</td>
                           <td class="text-right">1,245.00</td>
                           <td class="text-right">12,998.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar cancelled">Not Approved</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview and Edit"><i class="icon-doc-eye"><span class="path1"></span><span class="path2"></span></i></a>
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve Invoice"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <nav aria-label="navigation" class="pagination-col pt-2 private selectedTab" style="">
                  <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><a href="#page-2" class=""> <span>2</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 class="table-tabs main notGen" style="display: none;">
               <nav class="all-vendor-tabs custom-tabs store-sub-tabs notGeneratedTabs">
                  <div class="nav nav-tabs" id="nav-tab" role="tablist">
                     <a class="nav-item nav-link active" id="subscription-tab" data-active="custPurchase" data-toggle="tab" href="#subscriptiontab" role="tab" aria-controls="subscriptiontab" aria-selected="true">
                     <span>Customer Purchases</span>
                     </a>
                     <a class="nav-item nav-link " id="invoicepayment-tab" data-active="resellerInv" data-toggle="tab" href="#invoicePaymenttab" role="tab" aria-controls="invoicepaymenttab" aria-selected="false">
                     <span>Reseller Invoices</span>
                     </a>
                     <a href="javascript:void(0);" class="request-download"><i class="icon-download"></i></a>
                  </div>
               </nav>
               <div class="list-view-tile summary-tab-table">
                  <table class="table custom-table  subSelectedTab custPurchase" style="">
                     <thead class="thead-light">
                        <tr>
                           <th scope="col">Contact#</th>
                           <th scope="col">Customer</th>
                           <th scope="col" class="text-right">Sum <span class="price-denom">(USD)</span></th>
                           <th scope="col" class="text-right">Incl Tax <span class="price-denom">(USD)</span></th>
                           <th scope="col">Billing Period</th>
                           <th scope="col">Status</th>
                           <th scope="col">Action</th>
                        </tr>
                     </thead>
                     <tbody tabindex="23" style="overflow-y: hidden; outline: none;">
                        <tr>
                           <td><a href="javascript:void(0);">A456178</a></td>
                           <td>Abstergo Ltd.</td>
                           <td class="text-right">10,230.00</td>
                           <td class="text-right">10,945.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="openRtFly" data-flyout="generateInv" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456179</a></td>
                           <td>Alphonso Capizzo</td>
                           <td class="text-right">12,450.00</td>
                           <td class="text-right">12,876.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="openRtFly" data-flyout="generateInv" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456180</a></td>
                           <td>Biffco Enterprises Ltd.</td>
                           <td class="text-right">9,089.00</td>
                           <td class="text-right">10,216.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456145</a></td>
                           <td>Big Kahuna Burger Ltd.</td>
                           <td class="text-right">14,134.00</td>
                           <td class="text-right">14,999.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456157</a></td>
                           <td>Binford Ltd.</td>
                           <td class="text-right">10,230.00</td>
                           <td class="text-right">10,545.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456193</a></td>
                           <td>Brent and Dasher</td>
                           <td class="text-right">6,543.00</td>
                           <td class="text-right">7,006.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456184</a></td>
                           <td>Biffco Enterprises Ltd.</td>
                           <td class="text-right">8,140.00</td>
                           <td class="text-right">8,920.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456123</a></td>
                           <td>Big Kahuna Burger Ltd.</td>
                           <td class="text-right">17,865.00</td>
                           <td class="text-right">18,120.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456154</a></td>
                           <td>Binford Ltd.</td>
                           <td class="text-right">6,200.00</td>
                           <td class="text-right">7,046.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">456171</a></td>
                           <td>Brent and Dasher</td>
                           <td class="text-right">2,230.00</td>
                           <td class="text-right">4,376.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                     </tbody>
                  </table>
                  <table class="table custom-table subSelectedTab  resellerInv" style="display: none;" >
                     <thead class="thead-light">
                        <tr>
                           <th scope="col">Contact#</th>
                           <th scope="col">Reseller</th>
                           <th scope="col" class="text-right">Sum <span class="price-denom">(USD)</span></th>
                           <th scope="col" class="text-right">Incl Tax <span class="price-denom">(USD)</span></th>
                           <th scope="col">Billing Period</th>
                           <th scope="col">Status</th>
                           <th scope="col">Action</th>
                        </tr>
                     </thead>
                     <tbody tabindex="23" style="overflow-y: hidden; outline: none;">
                        <tr>
                           <td><a href="javascript:void(0);">178456</a></td>
                           <td>Google</td>
                           <td class="text-right">10,230.00</td>
                           <td class="text-right">10,945.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="openRtFly" data-flyout="generateInv" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">179456</a></td>
                           <td>Maicrosoft Corp.</td>
                           <td class="text-right">12,450.00</td>
                           <td class="text-right">12,876.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" class="openRtFly" data-flyout="generateInv" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">180456</a></td>
                           <td>Dropbox</td>
                           <td class="text-right">9,089.00</td>
                           <td class="text-right">10,216.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">145456</a></td>
                           <td>Google</td>
                           <td class="text-right">14,134.00</td>
                           <td class="text-right">14,999.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">157456</a></td>
                           <td>Google</td>
                           <td class="text-right">10,230.00</td>
                           <td class="text-right">10,545.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">193456</a></td>
                           <td>Maicrosoft Corp.</td>
                           <td class="text-right">6,543.00</td>
                           <td class="text-right">7,006.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">184456</a></td>
                           <td>Maicrosoft Corp.</td>
                           <td class="text-right">8,140.00</td>
                           <td class="text-right">8,920.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">123456</a></td>
                           <td>Dropbox  </td>
                           <td class="text-right">17,865.00</td>
                           <td class="text-right">18,120.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">154456</a></td>
                           <td>Google</td>
                           <td class="text-right">6,200.00</td>
                           <td class="text-right">7,046.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td><a href="javascript:void(0);">171456</a></td>
                           <td>Dropbox</td>
                           <td class="text-right">2,230.00</td>
                           <td class="text-right">4,376.00</td>
                           <td>02/01/2020 - 05/01/2021</td>
                           <td><span class="status-bar suspended" style="">Pending</span></td>
                           <td>
                              <div class="table-action-link">
                                 <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Generate Invoice"><i class="icon-cal-arrow"><span class="path1"></span><span class="path2"></span></i></a>
                              </div>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <nav aria-label="navigation" class="pagination-col pt-2   " style="">
                  <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><a href="#page-2" class=""> <span>2</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 class="list-view-tile summary-tab-table scheduledInvocie selectedTab" style="display: none;">
            <table class="table custom-table " >
               <thead class="thead-light">
                  <tr>
                     <th scope="col">Customer Name</th>
                     <th scope="col">Scheduled on </th>
                     <th scope="col">Grace Period</th>
                     <th scope="col">Currency</th>
                     <th scope="col">Taxable</th>
                     <th scope="col">Action</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>Abstergo Ltd.</td>
                     <td>04/27/2021</td>
                     <td>15 Days</td>
                     <td>US dollar (USD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0 cancelInvoice" data-toggle="modal" data-target="#alertModal"  data-delete="cnclInv"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" class="openRtFly" data-flyout="rescheduleInv" data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td>Alphonso Capizzo</td>
                     <td>04/27/2021</td>
                     <td>15 Days</td>
                     <td>US dollar (USD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" class="openRtFly" data-flyout="rescheduleInv"  data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td>Biffco Enterprises Ltd.</td>
                     <td>04/27/2021</td>
                     <td>20 Days</td>
                     <td>Australian dollar (AUD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" class="openRtFly" data-flyout="rescheduleInv"  data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td>Big Kahuna Burger Ltd.</td>
                     <td>04/27/2021</td>
                     <td>10 Days</td>
                     <td>Canadian dollar (CAD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td>Big Kahuna Burger Ltd.</td>
                     <td>04/27/2021</td>
                     <td>10 Days</td>
                     <td>Canadian dollar (CAD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td>Big Kahuna Burger Ltd.</td>
                     <td>04/27/2021</td>
                     <td>20 Days</td>
                     <td>Australian dollar (AUD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td>Big Kahuna Burger Ltd.</td>
                     <td>04/27/2021</td>
                     <td>10 Days</td>
                     <td>Canadian dollar (CAD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td>Big Kahuna Burger Ltd.</td>
                     <td>04/27/2021</td>
                     <td>10 Days</td>
                     <td>Canadian dollar (CAD)</td>
                     <td>Yes</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);" class="ml-0" data-toggle="tooltip" data-placement="top" data-original-title="Cancel Schedule"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Re-Schedule"><i class="icon-cal-tick"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
               </tbody>
            </table>
            <table class="table custom-table   approved selectedTab " style="display: none;">
               <thead class="thead-light">
                  <tr>
                     <th scope="col">Customer</th>
                     <th scope="col">Invoice#</th>
                     <th scope="col">Product Name</th>
                     <th scope="col" class="text-center">Quantity</th>
                     <th scope="col">Billing Type</th>
                     <th scope="col">Provision File</th>
                     <th scope="col">Requested Change</th>
                     <th scope="col">Requested Date</th>
                     <th scope="col">Action</th>
                  </tr>
               </thead>
               <tbody tabindex="23" style="overflow-y: hidden; outline: none;">
                  <tr>
                     <td><a href="javascript:void(0);">Abstergo Ltd.</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Acme Co. </a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Alphonso Capizzo</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Biffco Enterprises Ltd.</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger...</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Binford Ltd.</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Brent and Dasher</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger Ltd.</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger Ltd.</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td><a href="javascript:void(0);">Big Kahuna Burger Ltd.</a></td>
                     <td>527043</td>
                     <td>FMN-10241</td>
                     <td class="text-center">2</td>
                     <td>Monthly</td>
                     <td>--</td>
                     <td>New 2 Seats</td>
                     <td>03/03/2021</td>
                     <td>
                        <div class="table-action-link">
                           <a href="javascript:void(0);"><i class="icon-checked-circle"><span class="path1"></span><span class="path2"></span></i></a>
                           <a href="javascript:void(0);"><i class="icon-cross-circle"><span class="path1"></span><span class="path2"></span></i></a>
                        </div>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
         <nav aria-label="navigation" class="pagination-col pt-2 scheduledInvocie selectedTab " style="display: none;">
            <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><a href="#page-2" class=""> <span>2</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>
<!--manage invoices-->